/* ============================================================
   AGNT — main.css
   Single source of truth for shared design tokens and page chrome.

   HOW THIS WORKS
   Every page links this file, then may follow it with an inline
   <style> block for page-specific rules. Because the link comes
   first, any page-level rule with the same selector still wins —
   so pages that intentionally differ (referrals, testimonials,
   provider, integration, marketplace) keep their own look by
   overriding below, with no change to how they render today.

   Generated from the 22 rules that were byte-identical across
   25+ of the 33 pages. Do not add page-specific rules here.
   ============================================================ */

/* --- Design tokens --- */
:root{--ink:#111118;--muted:#62626e;--line:#dedde3;--soft:#f7f7f9;--paper:#fff;--pink:#e53d8f;--cyan:#00b8d9;--green:#0ba969;--max:1180px;--gutter:clamp(20px,5vw,64px)}

/* --- Reset --- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* --- Layout --- */
.wrap{width:min(var(--max),calc(100% - var(--gutter)*2));margin:auto}

/* --- Chrome — navigation --- */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}
.nav-in{height:68px;display:flex;align-items:center;justify-content:space-between;gap:28px}
/* The brand is the real AGNT lockup, inlined as SVG by _brand.js.
   colour here is what the wordmark inherits through fill="currentColor";
   `body.hero-top .brand{color:#fff}` on the homepage flips it white over the
   dark hero. The six-dot mark carries a hardcoded #E53D8F (== --pink) and is
   deliberately left out of the flip — it reads on both backgrounds. */
.brand{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none}
.brand-logo{height:28px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{text-decoration:none;color:var(--muted);font-size:13px;font-weight:650}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}

/* --- Chrome — auth controls injected by agnt-nav.js ---
   These elements do not exist in the built HTML: agnt-nav.js appends them
   after load. Styles live here so every page gets them without repeating
   the rules inline. The burger is hidden until the mobile breakpoint. */
.nav-auth{white-space:nowrap}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:38px;height:38px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
.nav-burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:transform .18s ease,opacity .18s ease}
.nav-burger.active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger.active span:nth-child(2){opacity:0}
.nav-burger.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
body.menu-open{overflow:hidden}

@media(max-width:900px){
  .nav-burger{display:flex}
  .nav-links{position:fixed;inset:68px 0 auto 0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:10px var(--gutter) 20px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(17,17,24,.10);max-height:calc(100vh - 68px);overflow-y:auto}
  .nav-links.open{display:flex}
  /* The desktop rule that hides non-button links is a page-level override on
     most pages; re-assert visibility inside the open drawer or the menu opens
     empty on exactly the devices that need it. */
  .nav-links.open a{display:block;padding:13px 2px;font-size:15px;border-bottom:1px solid var(--line)}
  .nav-links.open a.button{margin-top:12px;text-align:center;border-bottom:none}
}

/* .nav-links a (0,1,1) outranks .button (0,1,0) — without this the nav's
   Download button renders muted-gray text on the dark button fill. */
.nav-links a.button,.nav-links a.button:hover{color:#fff}

/* --- Buttons --- */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:8px;background:var(--ink);color:#fff;text-decoration:none;font-size:14px;font-weight:750;border:1px solid var(--ink);transition:.18s ease;cursor:pointer;font-family:inherit}
.button:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(17,17,24,.12)}
.button.alt{background:#fff;color:var(--ink);border-color:var(--line)}
.button.pink{background:var(--pink);border-color:var(--pink)}

/* --- Typography --- */
.eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:var(--pink)}

/* --- Sections --- */
.section{padding:clamp(64px,8vw,104px) 0;border-bottom:1px solid var(--line)}
.section.soft{background:var(--soft)}

/* --- Chrome — footer --- */
/* ---------- footer ------------------------------------------------------
   Every top-level page is reachable from here, plus the content families
   worth surfacing to a crawler: integrations, providers, comparisons and the
   glossary. A footer is the one element on every page, so it is also the
   cheapest place to make deep pages discoverable - both to a reader who has
   scrolled to the bottom and to an indexer that follows links.

   The generated families (integrations, providers, glossary, what-is) LIFT
   this markup out of pricing.html at generation time, so a change here has to
   be followed by re-running the page generators, not just a wave sync. */
.footer{border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 0;background:var(--soft)}
/* THE BRAND SITS IN A FULL-WIDTH BAND, NOT A COLUMN. As a narrow left-hand
   column beside eight stacked link groups it ended a fifth of the way down and
   left roughly 900px of empty column running to the divider. A band across the
   top has no void to leave, and it gives every link column noticeably more
   width. */
.footer-lead{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:30px;margin-bottom:34px;border-bottom:1px solid var(--line)}
/* Wide enough that the sentence does not end a third of the way across and
   leave 500px of nothing before the buttons. */
.footer-lead-left{max-width:600px}
/* Buttons and social on ONE line rather than stacked: a taller, narrower
   cluster pushed itself into the far corner and widened the same gap. */
.footer-lead-right{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.footer-mark{display:inline-block;line-height:0}
.footer-mark .brand-logo{height:24px;width:auto}
/* text-wrap:pretty so the last word does not sit alone on line two. It
   rebalances the break rather than changing the width, so the band's spacing
   is unaffected; browsers without it simply wrap as before. */
.footer-blurb{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.footer-actions{display:flex;gap:10px;flex-wrap:wrap}
.footer-actions .button{font-size:12.5px;padding:9px 16px}
.footer-social{display:flex;gap:14px}
.footer-social a{color:var(--muted);transition:color .15s ease;line-height:0}
.footer-social a:hover{color:var(--ink)}
.footer-social svg{width:17px;height:17px;display:block}

/* Four across, so eight columns read as two even rows rather than a ragged
   auto-fit that reflows differently on every viewport. */
/* padding-bottom, because the tallest column ended flush against the rule
   below it - measured 0px of clearance while its shorter neighbours had room
   to spare, so the grid looked like it had collided with the legal bar. */
.footer-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 24px;padding-bottom:44px}
.footer-col h3{margin:0 0 13px;font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink)}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer-col a{font-size:13px;line-height:1.4;color:var(--muted);text-decoration:none;transition:color .15s ease}
.footer-col a:hover{color:var(--ink)}

.footer-bottom{border-top:1px solid var(--line);padding:20px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-copy{margin:0;font-size:11.5px;color:var(--muted)}
.footer-legal{display:flex;gap:18px;flex-wrap:wrap}
.footer-legal a{font-size:11.5px;color:var(--muted);text-decoration:none;transition:color .15s ease}
.footer-legal a:hover{color:var(--ink)}

@media(max-width:1000px){
  .footer-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Once the band wraps, the right-hand group must align left with everything
   else rather than hang off the right edge on its own. */
@media(max-width:760px){
  .footer-lead-right{align-items:flex-start}
}
/* TWO COLUMNS ALL THE WAY DOWN. Stacking eight columns into one made the
   footer 3400px tall on a phone - longer than most of the pages above it.
   Two keeps it under half that and still leaves room for the longest label. */
@media(max-width:700px){.footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}}
@media(max-width:420px){.footer-cols{gap:24px 14px}}

/* --- Responsive: collapse nav links on small screens --- */
@media(max-width:900px){.nav-links a:not(.button){display:none}}