/* ============================================================================
   SYNDRA — styles.css
   Layout and components. Colour comes exclusively from tokens.css, by role.
   No hex literal, no preprocessor, no framework.
   ============================================================================ */

/* Self-hosted, latin subset — English and Spanish in full, accents and
   inverted punctuation included. Nothing is fetched at runtime.

   Space Grotesk replaced IBM Plex Sans, which was indistinguishable from the
   system UI font at body sizes — the point of self-hosting a face is lost if
   nobody can tell it apart from the fallback. Space Grotesk is a geometric
   grotesque with genuinely distinctive letterforms, and it echoes the wide
   geometric wordmark without being a novelty face.

   JetBrains Mono replaced Plex Mono for the code, tickers and metrics: taller
   x-height, more open apertures, and instantly legible as a developer face —
   which is exactly the signal the API samples should send.

   Both ship as VARIABLE fonts, so one file per family covers every weight and
   a single @font-face with a weight RANGE is the correct declaration. 54KB for
   the pair, against 75KB for the three Plex files they replace. */
@font-face{font-family:'Syndra Sans';src:url('fonts/SpaceGrotesk-Variable.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'Syndra Mono';src:url('fonts/JetBrainsMono-Variable.woff2') format('woff2');font-weight:400 800;font-display:swap}

:root{
  --sans:'Syndra Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Syndra Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --maxw:1160px;
}

/* ---------- Utilities ----------
   These exist so the markup carries no inline style attributes. That is not
   tidiness for its own sake: the Content-Security-Policy served with the page
   uses `style-src 'self'`, which blocks inline styles outright. Keeping them
   here is what lets the policy stay strict instead of needing 'unsafe-inline',
   which would defeat most of its purpose. Do not reintroduce style="…". */
.mw-20{max-width:20ch}
.mw-24{max-width:24ch}
.mw-26{max-width:26ch}
.mw-48{max-width:48ch}
.mw-50{max-width:50ch}
.mw-52{max-width:52ch}
.mt-28{margin-top:28px}
.mt-44{margin-top:44px}
.gap-24{gap:24px}
.bare{border:0;padding:0}
.no-bb{border-bottom:0}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
/* Links wear the warm text gold, underlined only on hover. */
a{color:var(--warm-text);text-decoration:none}
a:hover{color:var(--warm-text-hover);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent);color:var(--on-accent)}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.022em;text-wrap:balance;color:var(--fg)}
p{margin:0;text-wrap:pretty}
svg{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:100;background:var(--accent);color:var(--on-accent);padding:8px 14px;border-radius:6px}

/* Node-graph motif — the wordmark geometry, reused as marks and dividers.
   The leading node takes the gold so every instance of the mark has one warm
   point that catches the eye; the rest stay ink so the figure still reads as
   a graph and not as decoration. */
.node{fill:var(--node)}
.edge{stroke:var(--node);fill:none;opacity:.5}
.mark-arc{stroke:var(--node);stroke-width:1.1;fill:none;stroke-linecap:round;opacity:.7}
.node-lead{fill:var(--warm-fill);stroke:var(--gold-deep);stroke-width:.9}
.divider-edge{stroke:var(--edge);fill:none}
.divider-node{fill:var(--edge)}

/* ---------- Emphasis ----------
   Key terms take the warm text gold and a heavier weight. Colour plus weight,
   no background band and no underline — the word reads as part of the sentence
   and still catches the eye. Use sparingly: three or four phrases on the whole
   page, or nothing is emphasised any more. */
.hl{color:var(--warm-text);font-weight:600}

/* Metallic sheen for gold fills: a light source at the top-left, a deeper step
   at the bottom. Two stops only — enough to read as a surface catching light,
   not a gradient for its own sake. */
.sheen{
  background-image:linear-gradient(152deg,var(--warm-fill-hover) 0%,var(--warm-fill) 46%,var(--gold-deep) 100%);
}

/* Spanish stays hidden until main.js flips [data-lang]; JS-off reads English. */
[data-l="es"]{display:none}
html[data-lang="es"] [data-l="es"]{display:inline}
html[data-lang="es"] [data-l="en"]{display:none}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border)}
.hdr .wrap{display:flex;align-items:center;gap:32px;height:64px}
.brand{display:flex;align-items:center;gap:11px;color:var(--fg);font:500 15px/1 var(--mono);letter-spacing:.15em}
.brand:hover{text-decoration:none;color:var(--fg)}
.navlinks{display:flex;gap:26px;font-size:14px}
.navlinks a{color:var(--fg-muted)}
.spacer{flex:1}
.hdr-right{display:flex;align-items:center;gap:14px}
.langsw{display:flex;border:1px solid var(--border-strong);border-radius:6px;overflow:hidden}
.langsw button{appearance:none;border:0;background:transparent;color:var(--fg-muted);font:500 12px/1 var(--mono);letter-spacing:.06em;padding:6px 10px;cursor:pointer}
.langsw button[aria-pressed="true"]{background-image:linear-gradient(152deg,var(--warm-fill-hover) 0%,var(--warm-fill) 46%,var(--gold-deep) 100%);color:var(--on-warm)}
.mobnav{display:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:8px;font-size:15px;font-weight:500;padding:13px 22px;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-primary{background-image:linear-gradient(152deg,var(--warm-fill-hover) 0%,var(--warm-fill) 46%,var(--gold-deep) 100%);color:var(--on-warm);font-weight:600}
.btn-primary:hover{background-image:none;background:var(--warm-fill-hover);color:var(--on-warm)}
.btn-primary svg path{stroke:var(--on-warm)}
.btn-ghost{background:var(--surface);border:1px solid var(--border-strong);color:var(--fg)}
.btn-ghost:hover{color:var(--fg);border-color:var(--accent)}
.btn-sm{padding:8px 16px;font-size:13.5px;font-weight:500;border-radius:7px;background:var(--surface);border:1px solid var(--border-strong);color:var(--fg)}
.btn-sm:hover{text-decoration:none;border-color:var(--accent);color:var(--fg)}

/* ---------- Section rhythm ---------- */
.sec{border-bottom:1px solid var(--border)}
.sec > .wrap{padding:96px 28px}
.sec.alt{background:var(--bg-2)}
.kicker{display:flex;align-items:center;gap:12px}
.eyebrow{font:400 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--warm-text)}
.h2{margin-top:18px;font-size:38px;line-height:1.16}
.lede{margin-top:20px;font-size:17px;line-height:1.65;color:var(--fg-muted);max-width:62ch}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.grid2.center{align-items:center}
.col{display:grid;gap:24px}
.label{font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint)}

/* ---------- Hero ---------- */
.hero{position:relative;border-bottom:1px solid var(--border);overflow:hidden}
.constellation{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.hero > .wrap{position:relative;padding:104px 28px 96px;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--soft-border);background:var(--soft);border-radius:999px;padding:6px 14px 6px 11px;font:400 11.5px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--soft-fg)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--warm-fill);box-shadow:0 0 0 3px color-mix(in srgb,var(--warm-fill) 28%,transparent);flex:none}
@media (prefers-reduced-motion:no-preference){.pulse{animation:pulse 2.4s ease-in-out infinite}}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
h1{margin-top:26px;font-size:56px;line-height:1.07;letter-spacing:-.028em}
.hero-sub{margin-top:26px;font-size:18.5px;line-height:1.62;color:var(--fg-muted);max-width:53ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero-note{margin-top:26px;font:400 12.5px/1.6 var(--mono);color:var(--fg-faint)}

/* ---------- Cards & code ---------- */
.card{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
.card.raised{box-shadow:var(--shadow)}
.card-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-2);font:400 11.5px/1 var(--mono);color:var(--fg-faint)}
.card-foot{border-top:1px solid var(--border);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface-2);font:400 11.5px/1.4 var(--mono);color:var(--fg-muted)}
.card-body{padding:24px}
.verb{font:500 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--on-warm);background-image:linear-gradient(152deg,var(--warm-fill-hover) 0%,var(--warm-fill) 46%,var(--gold-deep) 100%);padding:4px 7px;border-radius:4px}
.endpoint{font:400 12.5px/1 var(--mono);color:var(--fg-muted)}

pre{margin:0;padding:18px;overflow-x:auto;font:400 12.6px/1.85 var(--mono);color:var(--fg-muted);tab-size:2}
pre.wrap-cmd{white-space:pre-wrap;line-height:1.9;border-bottom:1px solid var(--border)}
.tok-p{color:var(--fg-faint)}                 /* punctuation           */
.tok-k{color:var(--warm-text)}                   /* key                   */
.tok-s{color:var(--fg-muted)}                 /* string                */
.tok-v{color:var(--fg)}                       /* literal / number      */
.tok-c{color:var(--fg-faint)}                 /* comment               */
.tok-sent{color:var(--pos)}                   /* sentiment DATA value  */

/* Sentiment chips — colour never travels without the label. */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;padding:6px 12px;font:400 12px/1 var(--mono);color:var(--fg)}
.sw{width:9px;height:9px;border-radius:2px}
.sw-pos{background:var(--pos)}
.sw-neu{background:var(--neu)}
.sw-neg{background:var(--neg)}
.note{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--fg-muted)}

/* ---------- Metrics ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.metric{background:var(--surface);padding:26px 24px}
.metric .fig{font:500 38px/1.1 var(--mono);letter-spacing:-.02em;color:var(--fg);font-variant-numeric:tabular-nums}
.metric .cap{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--fg-muted)}
.measured{margin-top:16px;font:400 11.5px/1.6 var(--mono);color:var(--fg-faint)}
.metrics-strip > .wrap{padding:44px 28px 40px}

/* ---------- Options table ---------- */
.opts{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:44px}
.opts table{width:100%;border-collapse:collapse;text-align:left}
.opts th{background:var(--surface-2);padding:14px 22px;font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);border-bottom:1px solid var(--border)}
.opts td{background:var(--surface);padding:22px;font-size:15px;line-height:1.6;color:var(--fg-muted);border-bottom:1px solid var(--border);vertical-align:top}
.opts tbody tr:last-child td{border-bottom:0}
.opts td.opt{font-size:15.5px;font-weight:500;color:var(--fg);white-space:nowrap}
.opts td.cost{font-family:var(--mono);color:var(--fg);white-space:nowrap}
.opts tr.us td{background:var(--soft);color:var(--soft-fg)}
.opts tr.us td.opt{color:var(--soft-fg);font-weight:600}
.opts tr.us td.cost{color:var(--soft-fg)}
.opts tr.us .with-mark{display:inline-flex;align-items:center;gap:10px}

/* ---------- Pipeline diagram ---------- */
.diagram{margin-top:48px;border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:36px 28px;overflow-x:auto}
.diagram svg{display:block;min-width:560px}
.d-band{fill:var(--fg-faint);font:400 11px var(--mono);letter-spacing:1.6px}
.d-rail{stroke:var(--border-strong)}
.d-stage{fill:var(--surface-2);stroke:var(--border)}
.d-stage-hi{fill:var(--soft);stroke:var(--soft-border)}
.d-title{fill:var(--fg);font:600 16px var(--sans)}
.d-title-hi{fill:var(--soft-fg);font:600 16px var(--sans)}
.d-tech{fill:var(--fg-muted);font:400 11.5px var(--mono)}
.d-tech-hi{fill:var(--soft-fg);font:400 11.5px var(--mono)}
.d-note{fill:var(--fg-faint);font:400 10.5px var(--mono)}
.d-note-hi{fill:var(--soft-fg);font:400 10.5px var(--mono);opacity:.85}
.d-link{stroke:var(--border-strong)}
.d-link-hi{stroke:var(--warm-text)}
.d-dot{fill:var(--border-strong)}
.d-dot-hi{fill:var(--warm-fill);stroke:var(--gold-deep);stroke-width:.8}
.d-base{fill:var(--surface-2);stroke:var(--border)}
.d-basetext{fill:var(--fg-faint);font:400 11.5px var(--mono)}

/* ---------- Stack list / guarantees ---------- */
.stack{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.stack > div{background:var(--surface);padding:24px}
.stack h3{font-size:16px}
.stack p{margin-top:9px;font-size:14.5px;line-height:1.6;color:var(--fg-muted)}
.guarantees{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:12px;font-size:14.5px;line-height:1.55;color:var(--fg-muted)}
.guarantees li{display:flex;gap:11px}
.guarantees li::before{content:"→";color:var(--warm-text);font-family:var(--mono);flex:none}
.guarantees code{font-family:var(--mono);color:var(--fg)}

/* ---------- FAQ ---------- */
.faq{margin-top:40px;border-top:1px solid var(--border);max-width:900px}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;list-style:none;padding:22px 0;display:flex;justify-content:space-between;gap:24px;font-size:17px;font-weight:500;color:var(--fg)}
.faq summary::-webkit-details-marker{display:none}
.faq .mk{color:var(--warm-text);font-family:var(--mono)}
.faq details[open] .mk::after{content:"\00d7"}
.faq details:not([open]) .mk::after{content:"+"}
.faq p{padding:0 0 24px;font-size:15.5px;line-height:1.7;color:var(--fg-muted);max-width:70ch}
.faq code{font-family:var(--mono);color:var(--fg)}

/* ---------- Access form ---------- */
form.access{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:28px;display:grid;gap:18px}
form.access label{display:grid;gap:8px}
form.access .lbl{font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted)}
form.access input,form.access textarea{background:var(--surface-2);border:1px solid var(--border-strong);border-radius:7px;padding:11px 13px;color:var(--fg);font:400 15px/1.4 var(--sans)}
form.access input[type=email]{font:400 14.5px/1.4 var(--mono)}
form.access textarea{resize:vertical}
form.access input:focus,form.access textarea:focus{border-color:var(--accent);outline:none}
form.access button{appearance:none;border:0;background-image:linear-gradient(152deg,var(--warm-fill-hover) 0%,var(--warm-fill) 46%,var(--gold-deep) 100%);color:var(--on-warm);font:600 15px/1 var(--sans);padding:14px 20px;border-radius:8px;cursor:pointer}
form.access button:hover{background:var(--accent-hover)}
.err{display:none;font-size:13.5px;color:var(--neg)}
.err[data-show]{display:block}

/* ---------- Footer ---------- */
footer{background:var(--bg-2)}
.foot-top{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start;padding:56px 28px 44px}
.foot-top p{margin-top:14px;font-size:14px;line-height:1.65;color:var(--fg-muted);max-width:44ch}
.foot-nav{display:flex;gap:56px;font-size:14px}
.foot-nav div{display:grid;gap:11px}
.foot-nav a{color:var(--fg-muted)}
.foot-bar{border-top:1px solid var(--border)}
.foot-bar .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;padding:20px 28px;font:400 11.5px/1.5 var(--mono);color:var(--fg-faint)}

/* ---------- Responsive: 360px → 2560px, no horizontal scroll ---------- */
@media (max-width:1024px){
  .navlinks{display:none}
  .mobnav{display:block;position:relative}
  .mobnav summary{list-style:none;cursor:pointer;color:var(--fg-muted);font:400 13.5px/1 var(--sans);padding:9px 11px;border:1px solid var(--border-strong);border-radius:7px}
  .mobnav summary::-webkit-details-marker{display:none}
  .mobnav ul{position:absolute;right:0;top:46px;margin:0;padding:10px;list-style:none;display:grid;gap:4px;min-width:190px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);z-index:60}
  .mobnav a{display:block;padding:9px 10px;border-radius:6px;color:var(--fg);font-size:14.5px}
}
@media (max-width:900px){
  .hero > .wrap{grid-template-columns:1fr;gap:44px;padding:72px 28px 64px}
  h1{font-size:40px}
  .hero-sub{font-size:17px}
  .grid2{grid-template-columns:1fr;gap:40px}
  .metrics{grid-template-columns:1fr 1fr}
  .sec > .wrap{padding:72px 28px}
  .h2{font-size:30px}
  .opts{overflow-x:auto}
  .opts table{min-width:680px}
}
@media (max-width:560px){
  .metrics{grid-template-columns:1fr}
  h1{font-size:33px}
  .hdr .wrap{gap:12px;padding:0 18px}
  .sec > .wrap,.hero > .wrap{padding-left:18px;padding-right:18px}
  .hero-cta .btn{width:100%;justify-content:center}
  .foot-nav{gap:32px}

  /* The header runs out of room here. Measured at 360px, the four controls
     plus their gaps come to roughly 436px — the row overflows and takes the
     whole page into horizontal scroll with it.
     The "Request access" button goes first: the same call to action appears
     again in the hero and once more in the access section, so nothing is lost,
     and it is the widest of the four. */
  .hdr-right .btn-sm{display:none}
  .brand{font-size:13.5px;letter-spacing:.1em;gap:8px}
  .hdr-right{gap:10px}

  /* Two items with space-between and no wrap: on a narrow card the right-hand
     one gets squeezed to a couple of characters per line. */
  .card-foot{flex-wrap:wrap;gap:10px}
  .card-foot > *{min-width:0}

  /* Give the scrolling figures a little more of the screen. */
  .diagram{padding:24px 16px}
  .diagram svg{min-width:520px}

  .badge{font-size:11px}
  .lede,.hero-sub{font-size:16px}
}

/* Small phones. Nothing here is a new decision — it is the same layout with
   the last of the slack taken out. */
@media (max-width:380px){
  h1{font-size:29px}
  .h2{font-size:26px}
  .sec > .wrap{padding-top:56px;padding-bottom:56px}
  .hdr .wrap{gap:10px;padding:0 14px}
  .sec > .wrap,.hero > .wrap{padding-left:14px;padding-right:14px}
  .langsw button{padding:6px 8px}
}
@media (min-width:1600px){:root{--maxw:1320px}}
@media print{.hdr,.langsw,.mobnav{display:none}}