/* =========================================================
   GoGo CTV — Tech-first design system
   ========================================================= */
/* ---------- Self-hosted fonts ----------
   Variable woff2, latin subset, OFL licensed (Inter, JetBrains Mono).
   Self-hosted deliberately: removes a third-party render-blocking request,
   removes the extra DNS + TLS handshake before any text can paint, and stops
   disclosing visitor IPs to Google on a site that sells privacy compliance.

   It does NOT remove the swap. `font-display:swap` below is, by definition,
   a swap: fallback text paints first and is replaced when the face arrives.
   Both faces are preloaded from the document head, which shrinks that window
   to near zero on a warm connection but does not close it. Kept at `swap`
   anyway — `optional` would eliminate the shift by rendering some first
   visits entirely in the fallback, which is a worse trade for a brand site.

   Variable also fixes a real fidelity bug: this stylesheet uses font-weight
   650 and 750, which static weight files cannot render — they snapped to the
   nearest available weight. A variable face renders them exactly.

   GLYPH COVERAGE — verified against the actual woff2 files, not assumed.
   Both subsets CONTAIN: ↑ ↓ · —
   Both subsets LACK:    ← → ↗ ➤ ✦ ✓ ☰
   Every glyph in that second list is used in UI chrome (button arrows, the
   Ads Manager link, list bullets, the mobile menu) and therefore renders in
   the system fallback family at a slightly different width. That is cosmetic
   and every one of those characters is inside an aria-hidden span, so it is
   accepted rather than fixed.

   Do NOT "fix" this by adding U+2192 etc. to the unicode-range below. The
   range only decides which font is CONSULTED for a character; it cannot
   conjure a glyph the file does not contain, so the fallback happens either
   way and the edit just looks like a fix. The only real fix is re-subsetting
   both faces from their full sources to include those codepoints.
---------------------------------------- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/inter-var-latin.c940764593.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/jetbrains-mono-var-latin.2c32b9b3ee.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --bg:#070A12;
  --bg-2:#0B111D;
  --surface:#0F1725;
  --surface-2:#141E30;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --text:#EAF0FB;
  --muted:#9BA8C0;
  --muted-2:#6C7A94;
  --brand:#5B8CFF;
  --brand-2:#8B5CFF;
  --signal:#31E6C4;
  --warn:#FFB74D;
  --grad:linear-gradient(120deg,#5B8CFF 0%,#8B5CFF 55%,#31E6C4 120%);
  --grad-soft:linear-gradient(120deg,rgba(91,140,255,.18),rgba(139,92,255,.14));
  --radius:16px;
  --radius-sm:12px;
  --radius-lg:26px;
  --shadow:0 24px 60px -24px rgba(0,0,0,.75);
  --maxw:1180px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;line-height:1.6;letter-spacing:-.01em;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Background glow ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(60% 50% at 15% -5%,rgba(91,140,255,.20),transparent 60%),
    radial-gradient(55% 45% at 100% 0%,rgba(139,92,255,.16),transparent 55%),
    radial-gradient(50% 40% at 50% 100%,rgba(49,230,196,.08),transparent 60%);
  pointer-events:none;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-2;opacity:.35;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 0%,#000,transparent 70%);
          mask-image:radial-gradient(circle at 50% 0%,#000,transparent 70%);
}

/* ---------- Nav ---------- */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(7,10,18,.72);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:19px;letter-spacing:-.02em}
.brand .logo{width:34px;height:34px;border-radius:10px;background:var(--grad);
  display:grid;place-items:center;font-weight:800;color:#0a0f1c;font-size:15px;
  box-shadow:0 6px 20px -6px rgba(91,140,255,.7)}
.brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{color:var(--muted);font-size:15px;font-weight:500;transition:color .18s}
.nav-links a:hover{color:var(--text)}
.nav-actions{display:flex;align-items:center;gap:14px}
.menu-btn{display:none;background:none;border:1px solid var(--line-strong);color:var(--text);
  border-radius:10px;padding:8px 12px;font-size:20px;cursor:pointer;line-height:1}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;
  padding:12px 22px;border-radius:12px;cursor:pointer;border:1px solid transparent;
  transition:transform .16s ease,box-shadow .2s ease,background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--grad);color:#08101f;box-shadow:0 14px 34px -12px rgba(91,140,255,.8)}
.btn-primary:hover{box-shadow:0 18px 40px -10px rgba(139,92,255,.85)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-lg{padding:15px 28px;font-size:16px}
.btn .arr{transition:transform .18s}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- Typography helpers ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);
  padding:6px 13px;border:1px solid var(--line-strong);border-radius:100px;
  background:rgba(49,230,196,.06)}
.eyebrow.blue{color:var(--brand);background:rgba(91,140,255,.07)}
h1,h2,h3,h4{line-height:1.08;letter-spacing:-.03em;margin:0;font-weight:750}
h1{font-size:clamp(2.6rem,5.4vw,4.4rem);font-weight:800}
h2{font-size:clamp(2rem,3.6vw,2.9rem)}
h3{font-size:1.32rem;letter-spacing:-.02em}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--muted);max-width:60ch}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.section{padding:104px 0}
.section.tight{padding:72px 0}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.section-head{max-width:720px}
.section-head.center{margin:0 auto}

/* ---------- Hero ---------- */
.hero{padding:120px 0 90px;position:relative}
/* The 16ch measure is a homepage design choice — a deliberately tall, stacked
   headline. It used to apply to EVERY hero, so long content headings on the
   docs, compare and legal pages wrapped at roughly sixteen characters and ran
   to five or six lines. General heroes get a normal display measure; the tight
   one is opt-in via .hero-tight. */
.hero h1{max-width:26ch}
.hero.hero-tight h1{max-width:16ch}
.hero .lead{margin-top:26px}
.hero-cta{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
.hero-note{margin-top:20px;color:var(--muted-2);font-size:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero-note b{color:var(--muted)}

/* ---------- Stat row ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:66px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px}
.stat .num{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.stat .num span{font-size:1.3rem;color:var(--brand);vertical-align:super}
.stat .lbl{color:var(--muted);font-size:14px;margin-top:10px}

/* ---------- Logos strip ---------- */
.logos{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0}
.logos p{text-align:center;color:var(--muted-2);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;font-family:var(--mono);margin:0 0 22px}
.logos-row{display:flex;justify-content:center;align-items:center;gap:52px;flex-wrap:wrap;
  opacity:.7;font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--muted)}

/* ---------- Cards ---------- */
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;transition:transform .2s ease,border-color .2s,background .2s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-4px);border-color:var(--line-strong);background:var(--surface-2)}
.card .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--grad-soft);border:1px solid var(--line-strong);margin-bottom:20px;font-size:22px}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:15px;margin:0}
.card.feature{padding:34px}
.tag{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand);border:1px solid var(--line-strong);
  border-radius:100px;padding:4px 11px;margin-bottom:16px}

/* ---------- Spotlight (primary product) ---------- */
.spotlight{background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line-strong);border-radius:var(--radius-lg);padding:0;overflow:hidden;
  display:grid;grid-template-columns:1.05fr .95fr;box-shadow:var(--shadow)}
.spotlight .copy{padding:56px}
.spotlight h2{margin-bottom:18px}
.spotlight ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.spotlight li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:15.5px}
.spotlight li b{color:var(--text);font-weight:600}
.check{color:var(--signal);flex:none;margin-top:2px}
.spotlight .visual{background:var(--bg);border-left:1px solid var(--line);position:relative;
  display:grid;place-items:center;padding:40px}

/* ---------- Terminal / code visual ---------- */
.terminal{width:100%;background:#0a1120;border:1px solid var(--line-strong);border-radius:14px;
  overflow:hidden;font-family:var(--mono);font-size:13px;box-shadow:var(--shadow)}
.terminal .bar{display:flex;gap:7px;padding:13px 16px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--line)}
.terminal .bar i{width:11px;height:11px;border-radius:50%;display:block}
.dot-r{background:#ff5f57}.dot-y{background:#febc2e}.dot-g{background:#28c840}
.terminal .body{padding:20px;line-height:1.85;color:#c6d2ea}
.terminal .body .k{color:var(--brand)}
.terminal .body .s{color:var(--signal)}
.terminal .body .c{color:var(--muted-2)}
.terminal .body .v{color:var(--warn)}

/* ---------- How it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px;position:relative}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--mono);
  font-size:14px;color:var(--brand);border:1px solid var(--line-strong);border-radius:10px;
  width:44px;height:44px;display:grid;place-items:center;margin-bottom:20px;background:rgba(91,140,255,.07)}
.step h3{margin-bottom:10px}
.step p{color:var(--muted);font-size:15px;margin:0}

/* ---------- Feature list (spec page) ---------- */
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.spec{background:var(--bg-2);padding:26px 28px}
.spec .st{font-family:var(--mono);font-size:12px;color:var(--muted-2);letter-spacing:.06em;text-transform:uppercase}
.spec .sv{font-size:1.55rem;font-weight:750;margin-top:8px}
.spec p{color:var(--muted);font-size:14px;margin:8px 0 0}

/* ---------- CTA band ---------- */
.cta-band{position:relative;border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  padding:64px;text-align:center;overflow:hidden;
  background:linear-gradient(120deg,rgba(91,140,255,.14),rgba(139,92,255,.12) 60%,rgba(49,230,196,.08))}
.cta-band h2{max-width:20ch;margin:0 auto 16px}
.cta-band .lead{margin:0 auto 30px}
.cta-band .hero-cta{justify-content:center}

/* ---------- Callout / comparison ---------- */
.pill-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.pill{font-size:14px;color:var(--muted);border:1px solid var(--line);border-radius:100px;
  padding:9px 16px;background:var(--surface)}
.pill b{color:var(--text)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}

/* ---------- Footer ---------- */
footer.foot{border-top:1px solid var(--line);padding:64px 0 40px;margin-top:40px;background:var(--bg-2)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot-grid h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
  font-family:var(--mono);font-weight:600;margin-bottom:18px}
.foot-grid a{display:block;color:var(--muted);font-size:15px;margin-bottom:12px;transition:color .16s}
.foot-grid a:hover{color:var(--text)}
.foot-about p{color:var(--muted);font-size:14.5px;margin:16px 0 0;max-width:34ch}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  margin-top:52px;padding-top:26px;border-top:1px solid var(--line);color:var(--muted-2);font-size:13.5px}

/* ---------- Contact form ---------- */
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px}
.field{margin-bottom:20px}
.field label{display:block;font-size:14px;color:var(--muted);margin-bottom:8px;font-weight:500}
.field input,.field select,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line-strong);
  border-radius:11px;padding:13px 15px;color:var(--text);font-size:15px;font-family:var(--font)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(91,140,255,.18)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* ---------- Misc ---------- */
.badge-live{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--signal)}
.badge-live i{width:8px;height:8px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 0 0 rgba(49,230,196,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(49,230,196,.55)}70%{box-shadow:0 0 0 9px rgba(49,230,196,0)}100%{box-shadow:0 0 0 0 rgba(49,230,196,0)}}

/* Scroll reveal is opt-in: the .js class is only set by the inline head script.
   Without JavaScript — which includes most AI/LLM crawlers — content stays visible
   instead of rendering as a header above blank space. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}

/* The demo form ONLY works with JavaScript — the submit handler posts JSON to a
   Lambda. It carries method="post" and no action, so without JavaScript the
   browser posts the page back to itself on S3 and the lead is silently lost.
   A <noscript> warning alone did not prevent that: the form still rendered and
   was still submittable. Hiding it is what actually closes the hole, so the
   noscript block beside it is the only route offered. */
html:not(.js) #demo-form{display:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .reveal.in{opacity:1!important;transform:none!important;transition:none!important}
  .badge-live i{animation:none}
  .btn:hover,.card:hover,.spec:hover{transform:none}
  *{scroll-behavior:auto!important}
}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  /* Measured: the full nav is 817px of content and fits to a 865px viewport;
     without the secondary button it is 633px and fits to 681px. Collapsing
     at 960/780 is deliberately conservative. */
  .nav-actions .btn-ghost{display:none}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .spotlight{grid-template-columns:1fr}
  .spotlight .visual{border-left:none;border-top:1px solid var(--line)}
  .split{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:780px){
  /* Gated on .js: without JavaScript the hamburger cannot work, so leave the
     links visible and let them wrap rather than stranding the visitor. */
  .js .nav-links{display:none}
  .js .menu-btn{display:block}
  .nav-links{flex-wrap:wrap;gap:16px}
  .nav-links.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;
    gap:0;background:var(--bg-2);border-bottom:1px solid var(--line);padding:12px 24px}
  .nav-links.open a{padding:12px 0;border-bottom:1px solid var(--line);width:100%}
}
@media(max-width:680px){
  .section{padding:72px 0}
  .hero{padding:70px 0 50px}
  .grid-3,.grid-4,.grid-2,.specs,.field-row{grid-template-columns:1fr}
  .spotlight .copy{padding:34px}
  .cta-band{padding:40px 26px}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .stats{grid-template-columns:1fr 1fr;gap:12px}
}

/* ---------- Legal & policy documents ---------- */
.legal{max-width:74ch;padding-bottom:24px}
.legal .doc-meta{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 40px;padding-bottom:22px;
  border-bottom:1px solid var(--line);color:var(--muted-2);font-size:13.5px;font-family:var(--mono)}
.legal h2{font-size:1.42rem;letter-spacing:-.02em;font-weight:700;margin:52px 0 14px;scroll-margin-top:90px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.06rem;letter-spacing:-.01em;font-weight:650;margin:30px 0 10px;color:var(--text)}
.legal p{color:var(--muted);margin:0 0 16px;line-height:1.72}
.legal ul,.legal ol{color:var(--muted);margin:0 0 18px;padding-left:22px;line-height:1.72}
.legal li{margin-bottom:9px}
.legal li>strong{color:var(--text);font-weight:650}
.legal a{color:var(--brand);text-decoration:none;border-bottom:1px solid rgba(91,140,255,.32)}
.legal a:hover{border-bottom-color:var(--brand)}
.legal strong{color:var(--text);font-weight:650}
.legal .num{counter-reset:sec;list-style:none;padding:0}

/* in-page contents */
.legal .toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:24px 28px;margin:0 0 44px}
.legal .toc h3{margin:0 0 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);font-family:var(--mono);font-weight:500}
.legal .toc ol{columns:2;column-gap:32px;margin:0;padding-left:20px;font-size:14.5px}
.legal .toc li{margin-bottom:7px;break-inside:avoid}
.legal .toc a{border-bottom:0;color:var(--muted)}
.legal .toc a:hover{color:var(--brand)}
@media(max-width:640px){.legal .toc ol{columns:1}}

/* items requiring counsel or operator input before publication */
.legal .fill{background:rgba(255,183,77,.10);border:1px dashed rgba(255,183,77,.45);
  border-radius:4px;padding:1px 7px;color:var(--warn);font-family:var(--mono);font-size:.88em;
  overflow-wrap:break-word;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.legal .review{background:rgba(255,183,77,.07);border-left:3px solid var(--warn);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:18px 22px;margin:0 0 26px}
.legal .review p{color:var(--muted);margin:0}
.legal .review p+p{margin-top:10px}
.legal .review b{color:var(--warn);font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;display:block;margin-bottom:8px;font-weight:500}

/* definition-style rows and data tables */
.legal .rows{border-top:1px solid var(--line);margin:0 0 26px}
.legal .rows>div{display:grid;grid-template-columns:minmax(9rem,15rem) 1fr;gap:6px 26px;
  padding:15px 0;border-bottom:1px solid var(--line)}
.legal .rows dt,.legal .rows .k{color:var(--text);font-weight:650;font-size:14.5px}
.legal .rows dd,.legal .rows .v{color:var(--muted);margin:0;font-size:14.5px;line-height:1.65}
@media(max-width:620px){.legal .rows>div{grid-template-columns:1fr}}
.legal .tbl-wrap{overflow-x:auto;margin:0 0 26px;border-top:1px solid var(--line)}
.legal table{width:100%;border-collapse:collapse;font-size:14px}
.legal th{text-align:left;padding:12px 18px 12px 0;border-bottom:1px solid var(--line);
  color:var(--muted-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;white-space:nowrap}
.legal td{padding:14px 18px 14px 0;border-bottom:1px solid var(--line);color:var(--muted);
  vertical-align:top}
.legal td:first-child{color:var(--text);font-weight:600;white-space:nowrap}

/* footer legal links — must read as links, not as the plain text they replaced */
.foot-bottom a{color:var(--muted);transition:color .16s}
.foot-bottom a:hover{color:var(--text);text-decoration:underline}
.foot-bottom a:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px}

/* ---------- Glossary ---------- */
.legal .jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 44px;padding:22px 24px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
.legal .jump a{font-family:var(--mono);font-size:12.5px;color:var(--muted);border:1px solid var(--line);
  border-radius:4px;padding:5px 10px;transition:color .16s,border-color .16s}
.legal .jump a:hover{color:var(--brand);border-color:var(--brand)}
.legal .term{padding:26px 0;border-bottom:1px solid var(--line);scroll-margin-top:90px}
.legal .term:last-child{border-bottom:0}
.legal .term h2{font-size:1.24rem;margin:0 0 4px;scroll-margin-top:90px}
.legal .term .also{font-family:var(--mono);font-size:11.5px;color:var(--muted-2);
  letter-spacing:.04em;margin:0 0 12px}
.legal .term p{margin:0 0 12px}
.legal .term p:last-child{margin-bottom:0}

/* ---------- Contextual links in marketing body copy ----------
   The global reset (a{color:inherit;text-decoration:none}) is right for nav
   and cards-as-links, but it renders in-prose links indistinguishable from
   body text. These need to look like links to be worth having. */
.lead a,.card p a,.spotlight ul a,.spec p a,.term p a,.hero-note a{
  color:var(--brand);border-bottom:1px solid rgba(91,140,255,.35);
  transition:border-color .16s,color .16s
}
.lead a:hover,.card p a:hover,.spotlight ul a:hover,.spec p a:hover,
.term p a:hover,.hero-note a:hover{border-bottom-color:var(--brand);color:var(--text)}
.lead a:focus-visible,.card p a:focus-visible,.spotlight ul a:focus-visible,
.spec p a:focus-visible,.term p a:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:2px
}

/* ---------- Documentation ---------- */
.doc{max-width:78ch;padding-bottom:24px}
.doc h2{font-size:1.5rem;letter-spacing:-.02em;font-weight:700;margin:56px 0 16px;scroll-margin-top:90px}
.doc h2:first-of-type{margin-top:0}
.doc h3{font-size:1.1rem;font-weight:650;margin:34px 0 10px;color:var(--text);scroll-margin-top:90px}
.doc h4{font-size:.95rem;font-weight:650;margin:24px 0 8px;color:var(--text);letter-spacing:-.01em}
.doc p{color:var(--muted);margin:0 0 16px;line-height:1.72}
.doc ul,.doc ol{color:var(--muted);margin:0 0 18px;padding-left:22px;line-height:1.72}
.doc li{margin-bottom:9px}
.doc li>strong,.doc p>strong{color:var(--text);font-weight:650}
.doc a{color:var(--brand);border-bottom:1px solid rgba(91,140,255,.32)}
.doc a:hover{border-bottom-color:var(--brand)}

/* code */
.doc code{font-family:var(--mono);font-size:.86em;background:var(--surface-2);
  border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--text)}
.doc pre{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:20px 22px;overflow-x:auto;margin:0 0 22px;font-size:13px;line-height:1.6}
.doc pre code{background:none;border:0;padding:0;font-size:13px;color:var(--muted)}
.doc pre code .c{color:var(--muted-2)}
.doc pre code .k{color:var(--brand)}
.doc pre code .s{color:var(--signal)}

/* callouts */
.doc .note,.doc .warn,.doc .blocked{border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:18px 22px;margin:0 0 24px}
.doc .note{background:rgba(91,140,255,.07);border-left:3px solid var(--brand)}
.doc .warn{background:rgba(255,183,77,.07);border-left:3px solid var(--warn)}
.doc .blocked{background:rgba(255,183,77,.07);border-left:3px solid var(--warn)}
.doc .note p,.doc .warn p,.doc .blocked p{margin:0;color:var(--muted)}
.doc .note p+p,.doc .warn p+p,.doc .blocked p+p{margin-top:10px}
.doc .note b,.doc .warn b,.doc .blocked b{display:block;margin-bottom:8px;font-family:var(--mono);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:500}
.doc .note b{color:var(--brand)}
.doc .warn b,.doc .blocked b{color:var(--warn)}

/* numbered sequence */
.doc .seq{list-style:none;counter-reset:seq;padding:0;margin:0 0 26px}
.doc .seq>li{counter-increment:seq;position:relative;padding:0 0 22px 46px;margin:0;
  border-left:1px solid var(--line);margin-left:14px}
.doc .seq>li:last-child{border-left-color:transparent;padding-bottom:0}
.doc .seq>li::before{content:counter(seq);position:absolute;left:-14px;top:-2px;width:28px;height:28px;
  border-radius:50%;background:var(--surface-2);border:1px solid var(--line-strong);
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--brand)}
.doc .seq h4{margin:2px 0 6px}
.doc .seq p:last-child{margin-bottom:0}

/* doc index cards */
.doc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:0 0 34px}
.doc-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;transition:border-color .2s,transform .2s}
.doc-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.doc-card h3{margin:0 0 8px;font-size:1.06rem}
.doc-card p{margin:0;font-size:14.5px;color:var(--muted)}
.doc-card .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);margin:0 0 12px;display:block}
@media(max-width:680px){.doc-grid{grid-template-columns:1fr}}

/* spec table */
.doc .tbl{overflow-x:auto;margin:0 0 26px;border-top:1px solid var(--line)}
.doc table{width:100%;border-collapse:collapse;font-size:14px}
.doc th{text-align:left;padding:12px 18px 12px 0;border-bottom:1px solid var(--line);
  color:var(--muted-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;white-space:nowrap}
.doc td{padding:13px 18px 13px 0;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
.doc td:first-child{color:var(--text);font-weight:600}

/* ---------- Comparison pages ---------- */
.doc .cmp{overflow-x:auto;margin:0 0 10px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.doc .cmp table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.doc .cmp th{background:var(--surface);padding:14px 18px;border-bottom:1px solid var(--line-strong);
  color:var(--muted-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;text-align:left;white-space:nowrap}
.doc .cmp td{padding:15px 18px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
.doc .cmp tr:last-child td{border-bottom:0}
.doc .cmp td:first-child{color:var(--text);font-weight:650;white-space:nowrap}
.doc .cmp .us{background:rgba(49,230,196,.05)}
.doc .cmp .us td:first-child{color:var(--signal)}

/* inline source citation */
.doc .src{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--muted-2);
  margin:0 0 26px}
.doc .src a{color:var(--muted-2);border-bottom:1px solid var(--line-strong)}
.doc .src a:hover{color:var(--brand);border-bottom-color:var(--brand)}

/* balanced verdict blocks */
.doc .verdict{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-sm);margin:0 0 26px;overflow:hidden}
.doc .verdict>div{background:var(--bg-2);padding:22px 24px}
.doc .verdict h4{margin:0 0 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:500}
.doc .verdict .them h4{color:var(--warn)}
.doc .verdict .usx h4{color:var(--signal)}
.doc .verdict ul{margin:0;padding-left:20px;font-size:14.5px}
.doc .verdict li{margin-bottom:9px}
.doc .verdict li:last-child{margin-bottom:0}
@media(max-width:680px){.doc .verdict{grid-template-columns:1fr}}