/* ================================================================
     VIDEO INSIGHT PRO — "Field of View / The Live Read"
     Instrument-grade video-intelligence console. Dark-committed by
     design (the page is a screen). Color rides ONLY on live data.
     Two-voice type: sans speaks to humans, mono is the machine.
     ================================================================ */

  @property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img, svg, canvas { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

  :root {
    --bezel:   #091316;   /* base canvas — tinted near-black glass */
    --chassis: #0F1C22;   /* primary surface */
    --rail:    #17282F;   /* raised / hover */
    --signal:  #33E6C4;   /* teal — person class, nominal, live data */
    --track:   #F4A63C;   /* amber — vehicle class, attention/focus */
    --equip:   #A99BE6;   /* desat violet — equipment class */
    --zone:    #6FE0A0;   /* soft green — zones */
    --readout: #E8F1F1;   /* primary ink */
    --graphite:#82959B;   /* dim ink + hairline tint */
    --hair:    rgba(130,149,155,.14);
    --hair-2:  rgba(130,149,155,.09);

    --container: 1200px;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Code", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  }

  body {
    font-family: var(--sans);
    background: var(--bezel);
    color: var(--readout);
    line-height: 1.55;
    letter-spacing: -.008em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    font-variant-numeric: tabular-nums;
  }

  /* ---- atmospheric field + grain (ambient, meaningless motion avoided) ---- */
  .atmos { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
  .atmos::before { content:""; position: absolute; width: 70vw; height: 70vw; top: -26vw; right: -18vw;
    background: radial-gradient(circle, rgba(51,230,196,.11), transparent 62%); filter: blur(30px);
    animation: drift 34s ease-in-out infinite alternate; }
  .atmos::after { content:""; position: absolute; width: 55vw; height: 55vw; bottom: -22vw; left: -14vw;
    background: radial-gradient(circle, rgba(130,149,155,.07), transparent 66%); filter: blur(30px); }
  @keyframes drift { to { transform: translate3d(-4%, 3%, 0) scale(1.08); } }
  .grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

  /* ---- page playhead progress ---- */
  .playhead { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); z-index: 100;
    background: linear-gradient(90deg, var(--signal), var(--track)); }
  @supports (animation-timeline: scroll()) {
    .playhead { animation: grow-x linear both; animation-timeline: scroll(root); }
    @keyframes grow-x { to { transform: scaleX(1); } }
  }

  /* ---- layout primitives ---- */
  .wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
  .section { padding-block: clamp(60px, 8vw, 118px); position: relative; }
  .divider { border-top: 1px solid var(--hair-2); }

  .eyebrow { font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); display: inline-flex; align-items: center; gap: .6em; }
  .eyebrow .tk { color: var(--signal); }
  h2.head { font-size: clamp(1.9rem, 3.6vw, 2.95rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.03; text-wrap: balance; margin-top: 14px; }
  .lede { color: var(--graphite); font-size: clamp(1rem, 1.35vw, 1.12rem); max-width: 60ch; margin-top: 14px; }
  .sec-head { max-width: 64ch; }

  /* ---- surface ladder cards (depth from color + hairline, no shadow) ---- */
  .panel { background: var(--chassis); border: 1px solid var(--hair); border-radius: 12px; position: relative; }
  .panel::before { content:""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, transparent, rgba(232,241,241,.09), transparent); }

  /* ---- buttons ---- */
  .btn { display: inline-flex; align-items: center; gap: .55em; font-weight: 640; font-size: .93rem; letter-spacing: -.01em;
    padding: 12px 18px; border-radius: 8px; border: 1px solid var(--hair); transition: background .2s, border-color .2s, transform .18s, color .2s; }
  .btn svg { width: 15px; height: 15px; }
  .btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
  .btn-ghost { color: var(--readout); background: var(--chassis); }
  .btn-ghost:hover { background: var(--rail); border-color: rgba(130,149,155,.28); transform: translateY(-1px); }
  .btn-primary { color: var(--bezel); background: var(--signal); border-color: transparent; font-weight: 720; }
  .btn-primary:hover { transform: translateY(-1px); }

  /* conic glow-border — used on EXACTLY two elements */
  .glow-cta { position: relative; z-index: 0; }
  .glow-cta::before, .glow-cta::after { content:""; position: absolute; inset: -1.5px; border-radius: 10px; z-index: -1;
    background: conic-gradient(from var(--angle), transparent 55%, var(--signal) 72%, var(--track) 84%, transparent 96%); }
  .glow-cta::after { filter: blur(13px); opacity: .55; }
  @keyframes spin { to { --angle: 360deg; } }
  .glow-cta::before, .glow-cta::after { animation: spin 4.5s linear infinite; }

  /* ================= NAV ================= */
  .nav { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(12px) saturate(1.3);
    background: color-mix(in srgb, var(--bezel) 82%, transparent); border-bottom: 1px solid transparent; transition: border-color .3s; }
  .nav.scrolled { border-bottom-color: var(--hair); }
  .nav-in { display: flex; align-items: center; justify-content: space-between; height: 62px; }
  .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 680; letter-spacing: -.01em; font-size: .98rem; }
  .brand .mk { width: 28px; height: 28px; flex: none; }
  .brand .status { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; color: var(--graphite); display: inline-flex; align-items: center; gap: 5px; }
  .brand .status b { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .35; } }
  .nav-links { display: flex; gap: 4px; }
  .nav-links a { font-size: .88rem; color: var(--graphite); padding: 7px 11px; border-radius: 7px; transition: color .2s, background .2s; }
  .nav-links a:hover { color: var(--readout); background: var(--chassis); }
  .nav-right { display: flex; align-items: center; gap: 10px; }

  /* ================= HERO ================= */
  .hero { padding-top: clamp(30px, 4vw, 54px); padding-bottom: clamp(48px, 6vw, 84px); }
  .hero-copy { max-width: 62ch; }
  h1.title { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 840; letter-spacing: -.038em; line-height: 1.0; text-wrap: balance; margin-top: 18px; }
  .title .word { display: inline-block; }
  .title .em { color: var(--signal); }
  .hero-sub { color: var(--graphite); font-size: clamp(1.02rem, 1.5vw, 1.2rem); max-width: 52ch; margin-top: 20px; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }

  /* the console */
  .console { margin-top: clamp(30px, 4vw, 50px); display: grid; grid-template-columns: 1.58fr 1fr; gap: 14px; }
  .viewport-wrap { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--hair); background: #050c0e; aspect-ratio: 9 / 5; }
  #vpvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: contrast(1.05) saturate(.9) brightness(.97); background: #050c0e; }
  #viewport { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
  .vp-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1; box-shadow: inset 0 0 110px rgba(0,0,0,.5); background: radial-gradient(120% 80% at 72% 8%, rgba(51,230,196,.05), transparent 60%); }
  .vp-select { position: absolute; left: 12px; bottom: 30px; z-index: 4; display: flex; gap: 6px; }
  .vp-select button { font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; color: var(--graphite); background: rgba(5,12,14,.62); border: 1px solid var(--hair); border-radius: 5px; padding: 5px 9px; backdrop-filter: blur(5px); transition: color .2s, border-color .2s, background .2s; }
  .vp-select button.on { color: var(--bezel); background: var(--signal); border-color: transparent; font-weight: 700; }
  .vp-select button:hover:not(.on) { color: var(--readout); border-color: rgba(130,149,155,.3); }
  .vp-top { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; z-index: 3; }
  .vp-top .cam { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; color: rgba(232,241,241,.82); }
  .vp-top .rec { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; color: var(--track); display: inline-flex; align-items: center; gap: 6px; }
  .vp-top .rec b { width: 6px; height: 6px; border-radius: 50%; background: var(--track); animation: pulse 1.6s ease-in-out infinite; }
  .vp-status { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; pointer-events: none;
    font-family: var(--mono); font-size: .6rem; letter-spacing: .06em; color: rgba(232,241,241,.7);
    padding: 7px 12px; background: linear-gradient(0deg, rgba(5,12,14,.85), transparent); display: flex; gap: 14px; }
  .vp-status .ok { color: var(--signal); }

  /* telemetry panel */
  .telemetry { background: var(--chassis); border: 1px solid var(--hair); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; min-height: 0; position: relative; overflow: hidden; }
  .telemetry .t-q { font-family: var(--mono); font-size: .78rem; color: var(--readout); background: var(--bezel); border: 1px solid var(--hair); border-radius: 7px; padding: 9px 11px; min-height: 38px; }
  .telemetry .t-q .caret { display: inline-block; width: 7px; height: 1.05em; background: var(--signal); vertical-align: -2px; margin-left: 2px; animation: pulse 1s steps(1) infinite; }
  .telemetry .t-label { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); margin: 14px 0 8px; display: flex; justify-content: space-between; }
  .t-rows { display: flex; flex-direction: column; gap: 6px; }
  .t-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 9px; align-items: center; font-family: var(--mono); font-size: .68rem;
    padding: 7px 9px; background: var(--bezel); border: 1px solid var(--hair-2); border-radius: 6px; color: var(--graphite);
    opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
  .t-row.in { opacity: 1; transform: none; }
  .t-row .tc { color: var(--readout); }
  .t-row .cls { color: var(--track); }
  .t-row .conf { color: var(--signal); }
  .t-row .thumb { width: 26px; height: 16px; border-radius: 3px; background: linear-gradient(135deg, #16323a, #0b1d22); border: 1px solid var(--hair); }
  .callout { margin-top: auto; padding-top: 12px; }
  .callout .card { font-family: var(--mono); font-size: .64rem; color: var(--readout); background: var(--bezel); border: 1px solid var(--hair); border-left: 2px solid var(--signal); border-radius: 6px; padding: 8px 10px; }
  .callout .card .k { color: var(--graphite); }

  /* ================= HERO FLOW: 1 -> 5 -> report ================= */
  .flow { position: relative; margin-top: clamp(28px, 4vw, 46px); display: grid; gap: clamp(28px, 4vw, 44px); }
  .wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; opacity: 0; transition: opacity .8s ease; }
  .flow.go .wires { opacity: 1; }
  .wire { fill: none; stroke: rgba(51,230,196,.30); stroke-width: 1.2; stroke-dasharray: 3 6; }
  @media (prefers-reduced-motion: no-preference) { .flow.go .wire { animation: wireflow 1.1s linear infinite; } }
  @keyframes wireflow { to { stroke-dashoffset: -18; } }
  .stage { position: relative; z-index: 1; }
  .flow-tag { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
  .flow-tag .n { color: var(--signal); border: 1px solid var(--hair); border-radius: 4px; padding: 2px 6px; }
  .stage-source .viewport-wrap { max-width: 540px; margin-inline: auto; }

  .reads { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .read { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--hair); background: #050c0e;
    opacity: 0; transform: translateY(-30px) scale(.86); transition: opacity .55s ease calc(var(--i,0)*80ms), transform .6s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*80ms); }
  .flow.go .read { opacity: 1; transform: none; }
  .read .rv { position: relative; aspect-ratio: 9/5; overflow: hidden; }
  .read .rv img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(.85) brightness(.86); }
  .read .ovl { position: absolute; inset: 0; }
  .read .bx { position: absolute; border: 1.3px solid var(--signal); border-radius: 2px; box-shadow: 0 0 0 1px rgba(5,12,14,.3); }
  .read .rm { padding: 8px 9px; border-top: 1px solid var(--hair-2); }
  .read .rm .nm { font-family: var(--mono); font-size: .52rem; letter-spacing: .06em; color: var(--graphite); display: block; }
  .read .rm .ct { font-family: var(--mono); font-size: .58rem; margin-top: 3px; display: block; }

  .hero-dossier { max-width: 640px; margin-inline: auto; }
  .hero-dossier .dm { transition: color .4s; }
  .frow2 { display: grid; grid-template-columns: 88px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--hair-2); font-size: .82rem;
    opacity: 0; transform: translateX(-10px); transition: opacity .4s ease, transform .4s ease; }
  .frow2.in { opacity: 1; transform: none; }
  .frow2 .src { font-family: var(--mono); font-size: .58rem; color: var(--signal); letter-spacing: .04em; }
  .frow2 .sev { font-family: var(--mono); font-size: .54rem; padding: 2px 7px; border-radius: 100px; border: 1px solid var(--hair); }

  @media (max-width: 1000px) { .reads { grid-template-columns: repeat(3, 1fr); } .wires { display: none; } }
  @media (max-width: 560px) { .reads { grid-template-columns: repeat(2, 1fr); } }

  /* ================= TELEMETRY STRIP / MARQUEE ================= */
  .strip { border-block: 1px solid var(--hair-2); background: color-mix(in srgb, var(--chassis) 60%, transparent); }
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair-2); }
  .stat { background: var(--bezel); padding: 20px 22px; }
  .stat .k { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
  .stat .v { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; margin-top: 6px; }
  .stat .v small { font-size: .9rem; color: var(--graphite); font-weight: 600; letter-spacing: 0; }
  .marquee { overflow: hidden; padding: 13px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee .track { display: inline-flex; gap: 10px; white-space: nowrap; animation: slide 42s linear infinite; }
  .marquee:hover .track { animation-play-state: paused; }
  @keyframes slide { to { transform: translateX(-50%); } }
  .ent { font-family: var(--mono); font-size: .72rem; color: var(--graphite); border: 1px solid var(--hair); border-radius: 100px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 7px; }
  .ent b { width: 5px; height: 5px; border-radius: 50%; }

  /* ================= SEARCH + AGENT split ================= */
  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
  .demo { padding: 18px; }
  .demo .q { font-family: var(--mono); font-size: .8rem; color: var(--readout); background: var(--bezel); border: 1px solid var(--hair); border-radius: 8px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
  .demo .q svg { width: 14px; height: 14px; color: var(--signal); flex: none; }
  .res { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
  .res .r { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--hair-2); border-radius: 8px; background: var(--bezel); }
  .res .r .th { width: 44px; height: 28px; border-radius: 4px; position: relative; overflow: hidden; background: linear-gradient(135deg, #16323a, #0a191d); }
  .res .r .th::after { content:""; position: absolute; border: 1.5px solid var(--signal); border-radius: 2px; left: 30%; top: 25%; width: 34%; height: 46%; opacity: .9; }
  .res .r .meta { min-width: 0; }
  .res .r .meta .t { font-size: .82rem; font-weight: 600; }
  .res .r .meta .s { font-family: var(--mono); font-size: .62rem; color: var(--graphite); }
  .res .r .tc { font-family: var(--mono); font-size: .66rem; color: var(--signal); }
  .agent-msg { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
  .bub { border-radius: 10px; padding: 11px 13px; font-size: .88rem; max-width: 92%; }
  .bub.u { align-self: flex-end; background: var(--rail); border: 1px solid var(--hair); }
  .bub.a { align-self: flex-start; background: var(--bezel); border: 1px solid var(--hair); border-left: 2px solid var(--signal); }
  .bub.a .cite { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
  .bub.a .cite a { font-family: var(--mono); font-size: .62rem; color: var(--signal); border: 1px solid var(--hair); border-radius: 5px; padding: 2px 6px; }

/* ================= PRODUCT TOUR =================
     Four clips in one grid. Each card is a self-contained player: a reserved
     16/9 frame, its own caption layer, its own controls. Styled to sit inside
     the console language rather than to look like an embedded video player.

     WHY THE CAPTIONS ARE NOT NATIVE. A browser paints cues along the BOTTOM
     edge of the video box — which is exactly where the composer sits in these
     clips, so the caption lands on top of the sentence being typed and the
     demo becomes unreadable at the one moment it needs to be legible. Cue
     placement cannot be moved from CSS: `::cue` styles the ink (colour, font,
     background) and never the position. The other lever, a `line:`/`position:`
     cue setting, lives inside the .vtt — and the .vtt files are build output
     from the recording harness in another repo, so they are not ours to edit
     and would be overwritten on the next re-record anyway.

     So the track is loaded with `mode = 'hidden'`, which still fires
     `cuechange` but paints nothing, and `.tour-cc` renders the active cue
     itself, pinned to the TOP of the frame and clear of the composer. The
     real <track> element stays in the DOM for assistive tech and for any UA
     that surfaces its own caption menu. The `::cue` rule below is insurance
     for that last case only — in the normal path nothing native is painted. */
  /* auto-fit rather than a fixed column count, so the card count can change
     without a CSS edit. At the 1200px container a 420px minimum yields two
     columns (three would need 1296px), which keeps each frame ~591px wide —
     wide enough to actually read the app UI inside a 1280x720 recording, which
     is the entire point of the section. Three cards therefore sit 2 + 1, and
     the fourth completes the block as 2x2 when it lands. Below ~858px it
     collapses to one column on its own; `min(100%, 420px)` stops the track
     minimum overflowing a narrow phone. */
  .tour { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; align-items: start; }

  .tour-card { display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: 12px;
    background: var(--chassis); overflow: hidden; transition: border-color .3s; }
  .tour-card.is-live { border-color: rgba(51,230,196,.3); }

  /* Reserves the box before any byte of video arrives. No layout shift, ever. */
  .tour-frame { position: relative; aspect-ratio: 16 / 9; background: #060f11; }
  .tour-frame video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #060f11; }
  .tour-frame video::cue { font-family: var(--sans); font-size: .82rem; background: rgba(9,19,22,.9); color: var(--readout); line-height: 1.4; }

  /* Absolutely positioned, so a cue appearing or leaving can never move a
     pixel of the page — the no-layout-shift rule holds for the captions too,
     without reserving a strip of empty space under every one of four cards. */
  .tour-cc { position: absolute; left: 0; right: 0; top: 0; padding: 9px 10px; display: flex; justify-content: center; pointer-events: none; }
  .tour-cc[hidden] { display: none; }
  .tour-cc span { font-size: .78rem; line-height: 1.4; color: var(--readout); text-align: center; text-wrap: balance;
    background: rgba(6,15,17,.92); border: 1px solid var(--hair); border-radius: 8px; padding: 6px 10px; max-width: 96%;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .tour-cc:empty, .tour-cc span:empty { display: none; }

  .tour-bar { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-top: 1px solid var(--hair); background: var(--chassis); }
  .tour-bar .lbl { font-family: var(--mono); font-size: .57rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--graphite); margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tour-bar .lbl b { color: var(--signal); font-weight: 600; }

  .tour-btn { font-family: var(--mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
    border: 1px solid var(--hair); color: var(--graphite); border-radius: 100px; padding: 6px 11px;
    display: inline-flex; align-items: center; gap: 6px; transition: color .2s, border-color .2s, background .2s; }
  .tour-btn:hover { color: var(--readout); border-color: rgba(130,149,155,.32); }
  .tour-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
  .tour-btn svg { width: 12px; height: 12px; flex: none; }
  /* The captions toggle is a real pressed-state control, so its state is
     readable by anyone — sighted or not — without opening a native menu. */
  .tour-btn[aria-pressed="true"] { color: var(--signal); border-color: rgba(51,230,196,.34); background: rgba(51,230,196,.07); }
  .tour-btn.sound { color: var(--signal); border-color: rgba(51,230,196,.34); background: rgba(51,230,196,.07); }
  .tour-btn.sound:hover { background: rgba(51,230,196,.14); color: var(--signal); }

  .tour-copy { padding: 14px 14px 16px; border-top: 1px solid var(--hair-2); }
  .tour-copy .tt { display: block; font-family: var(--mono); font-size: .57rem; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
  .tour-copy h3 { font-size: 1.02rem; font-weight: 680; letter-spacing: -.015em; line-height: 1.3; margin-top: 7px; color: var(--readout); }
  .tour-copy p { font-size: .82rem; color: var(--graphite); line-height: 1.5; margin-top: 6px; }

  @media (max-width: 900px) {
    .tour { grid-template-columns: 1fr; gap: 14px; }
  }
  @media (max-width: 520px) {
    .tour-bar .lbl { display: none; }
    .tour-bar { justify-content: flex-end; }
  }

  /* ================= CAPABILITIES BENTO ================= */
  .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 168px; gap: 12px; margin-top: 40px; }
  .cell { position: relative; overflow: hidden; padding: 18px; border-radius: 12px; background: var(--chassis); border: 1px solid var(--hair); }
  .cell::before { content:""; position: absolute; inset: 0; border-radius: 12px; opacity: 0; transition: opacity .3s; pointer-events: none;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(51,230,196,.10), transparent 60%); }
  .cell:hover::before { opacity: 1; }
  .cell .ct { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
  .cell h3 { font-size: 1.12rem; font-weight: 720; letter-spacing: -.02em; margin-top: 8px; }
  .cell p { color: var(--graphite); font-size: .86rem; margin-top: 6px; max-width: 40ch; }
  .cell .art { position: absolute; right: 14px; bottom: 12px; left: 18px; height: 54px; pointer-events: none; }
  .c-analyze { grid-column: span 3; grid-row: span 1; }
  .c-search  { grid-column: span 3; }
  .c-agent   { grid-column: span 2; }
  .c-report  { grid-column: span 2; }
  .c-extract { grid-column: span 2; }
  .c-templates { grid-column: span 6; grid-row: span 1; }
  .c-templates { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

  .mono-read { font-family: var(--mono); font-size: .64rem; color: var(--graphite); line-height: 1.8; }
  .mono-read .v { color: var(--signal); }

  /* ================= HOW IT WORKS pipeline ================= */
  .pipe { margin-top: 42px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
  .pnode { position: relative; padding: 20px 16px; text-align: left; }
  .pnode:not(:last-child)::after { content:""; position: absolute; top: 34px; right: -1px; width: 100%; height: 1px; background: linear-gradient(90deg, var(--signal), transparent); opacity: .4; }
  .pnode .idx { font-family: var(--mono); font-size: .62rem; color: var(--signal); border: 1px solid var(--hair); border-radius: 6px; width: 30px; height: 30px; display: grid; place-items: center; }
  .pnode h3 { font-size: 1rem; font-weight: 700; margin-top: 14px; letter-spacing: -.01em; }
  .pnode p { color: var(--graphite); font-size: .84rem; margin-top: 5px; }

  /* ================= REPORTS dossier ================= */
  .report-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px,4vw,52px); align-items: center; margin-top: 40px; }
  .dossier { background: var(--chassis); border: 1px solid var(--hair); border-radius: 12px; padding: 22px; position: relative; }
  .dossier .dh { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--hair); padding-bottom: 12px; }
  .dossier .dh .dt { font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; }
  .dossier .dh .dm { font-family: var(--mono); font-size: .58rem; color: var(--graphite); text-align: right; line-height: 1.6; }
  .dossier .frow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hair-2); font-size: .84rem; }
  .dossier .frow .tc { font-family: var(--mono); font-size: .64rem; color: var(--bezel); background: var(--signal); padding: 2px 6px; border-radius: 4px; }
  .dossier .frow .sev { font-family: var(--mono); font-size: .58rem; padding: 2px 7px; border-radius: 100px; border: 1px solid var(--hair); color: var(--track); }
  .dossier .chart { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-top: 16px; }
  .dossier .chart span { flex: 1; background: var(--signal); border-radius: 2px 2px 0 0; opacity: .8; }
  .rp-points { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
  .rp-points li { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
  .rp-points .k { width: 28px; height: 28px; flex: none; border-radius: 7px; background: rgba(51,230,196,.12); border: 1px solid rgba(51,230,196,.3); display: grid; place-items: center; }
  .rp-points .k svg { width: 14px; height: 14px; color: var(--signal); }
  .rp-points b { font-weight: 640; }
  .rp-points span { color: var(--graphite); font-size: .9rem; }

  /* ================= TEMPLATES ================= */
  /* §07 was four bordered cards, each holding another bordered box holding
     bounding boxes — three frames deep, so the eye had nothing to land on and
     the four cards competed with each other instead of leading anywhere.
     It is now ONE frame with nothing framed inside it. The section is a loop
     ("configure once, run forever"), so the left column is that loop as a
     numbered sequence separated by hairlines, and the templates themselves are
     a plain list against a single rule. Depth comes from type and space. */
  .tpl-board { display: grid; grid-template-columns: 1.22fr .78fr; gap: clamp(22px, 3vw, 46px);
    padding: clamp(22px, 3vw, 36px); margin-top: 40px; align-items: start; }

  .tpl-steps li { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 17px 0; align-items: start; }
  .tpl-steps li:first-child { padding-top: 0; }
  .tpl-steps li:last-child { padding-bottom: 0; }
  .tpl-steps li + li { border-top: 1px solid var(--hair-2); }
  .tpl-steps .idx { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--signal); padding-top: 4px; }
  .tpl-steps h3 { font-size: 1.06rem; font-weight: 700; letter-spacing: -.02em; }
  .tpl-steps p { color: var(--graphite); font-size: .875rem; margin-top: 5px; max-width: 44ch; }

  .tpl-list { border-left: 1px solid var(--hair); padding-left: clamp(18px, 2.4vw, 32px); }
  .tpl-list .k { font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); }
  .tpl-list ul { margin-top: 12px; }
  .tpl-list li { padding: 11px 0; }
  .tpl-list li + li { border-top: 1px solid var(--hair-2); }
  .tpl-list .t { font-size: .95rem; font-weight: 660; letter-spacing: -.015em; }
  .tpl-list .t b { font-family: var(--mono); font-size: .56rem; font-weight: 600; letter-spacing: .14em;
    color: var(--signal); margin-right: 9px; vertical-align: 1px; }
  .tpl-list .d { color: var(--graphite); font-size: .81rem; margin-top: 3px; }
  @media (max-width: 900px) {
    .tpl-board { grid-template-columns: 1fr; }
    .tpl-list { border-left: 0; border-top: 1px solid var(--hair); padding-left: 0; padding-top: 20px; }
  }

  /* ================= ANALYTICS ================= */
  .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; }
  .kpi { padding: 18px; }
  .kpi .k { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
  .kpi .v { font-size: 1.9rem; font-weight: 820; letter-spacing: -.03em; margin-top: 8px; }
  .kpi .d { font-family: var(--mono); font-size: .66rem; margin-top: 2px; }
  .kpi .d.up { color: var(--signal); } .kpi .d.down { color: var(--track); }
  .kpi canvas { width: 100%; height: 34px; margin-top: 10px; }

  /* ================= DEVELOPERS / API =================
     Same surface ladder as everywhere else. The one new primitive is the code
     block, which is darker than --chassis so it reads as a terminal rather than
     as another card, and scrolls inside itself so a long curl line never makes
     the page scroll sideways. */
  .chip { font-family: var(--mono); font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    border: 1px solid rgba(244,166,60,.42); color: var(--track); background: rgba(244,166,60,.08);
    border-radius: 100px; padding: 3px 9px; white-space: nowrap; }
  .eyebrow .chip { margin-left: 4px; }

  .api-split { display: grid; grid-template-columns: 1.12fr .88fr; gap: 16px; margin-top: 40px; align-items: start; }

  .code { background: #060f11; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
  .code-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--hair); background: var(--chassis); }
  .code-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex: none; }
  .code-head .nm { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
  .code-head .rt { margin-left: auto; font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; color: var(--signal); }
  .code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: var(--mono);
    font-size: .715rem; line-height: 1.78; color: var(--readout); tab-size: 2; }
  .code pre + pre { border-top: 1px solid var(--hair-2); }
  .code .cm { color: var(--graphite); }                 /* comment */
  .code .st { color: var(--signal); }                   /* string / value */
  .code .fl { color: var(--track); }                    /* verb + header name */
  .code .pn { color: var(--graphite); }                 /* punctuation */

  .api-build { display: flex; flex-direction: column; gap: 12px; }
  .api-build li { background: var(--chassis); border: 1px solid var(--hair); border-radius: 12px; padding: 15px 17px; }
  .api-build .t { font-size: .96rem; font-weight: 680; letter-spacing: -.015em; }
  .api-build p { color: var(--graphite); font-size: .845rem; margin-top: 5px; }
  .api-build .ep { font-family: var(--mono); font-size: .6rem; letter-spacing: .05em; color: var(--signal); margin-top: 9px; }

  .api-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
  .api-fact { background: var(--chassis); border: 1px solid var(--hair); border-radius: 12px; padding: 15px 17px; }
  .api-fact .fk { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
  .api-fact .fv { font-size: .855rem; margin-top: 7px; }
  .api-fact .fv b { font-weight: 640; }
  .api-fact code { font-family: var(--mono); font-size: .76rem; color: var(--signal); }

  /* The build-along clip. Hidden until the asset actually exists — the probe in
     the script unhides it — so an unbuilt clip leaves no black hole in the page.
     Everything else here matches the §03 tour frame exactly. */
  .api-clip { margin-top: 16px; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: var(--bezel); }
  .api-clip[hidden] { display: none; }
  .api-clip .frame { position: relative; aspect-ratio: 16 / 9; background: #060f11; }
  .api-clip video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #060f11; }
  .api-clip video::cue { font-family: var(--sans); font-size: .82rem; background: rgba(9,19,22,.86); color: var(--readout); line-height: 1.4; }

  .api-access { display: grid; grid-template-columns: 1.12fr .88fr; gap: 16px; margin-top: 16px; align-items: stretch; }
  .api-panel { background: var(--chassis); border: 1px solid var(--hair); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; }
  /* h2 on /developers, where the page h1 is the page title; the selector keeps
     h3 so nothing that still uses one loses its type. */
  .api-panel h2, .api-panel h3 { font-size: 1.16rem; font-weight: 740; letter-spacing: -.025em; margin-top: 10px; }
  .api-panel > p { color: var(--graphite); font-size: .875rem; margin-top: 8px; max-width: 46ch; }
  .api-panel .hint { font-family: var(--mono); font-size: .6rem; letter-spacing: .04em; color: var(--graphite); margin-top: 14px; }

  .fform { margin-top: 18px; display: flex; flex-direction: column; gap: 11px; }
  .fform label { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); margin-bottom: 6px; }
  .fform input[type="email"], .fform input[type="text"] {
    width: 100%; font: inherit; font-size: .9rem; color: var(--readout); background: var(--bezel);
    border: 1px solid var(--hair); border-radius: 8px; padding: 11px 13px; transition: border-color .2s; }
  .fform input::placeholder { color: rgba(130,149,155,.6); }
  .fform input:hover { border-color: rgba(130,149,155,.28); }
  .fform input:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; border-color: transparent; }
  /* .chk is itself a <label>, so it has to undo the mono/uppercase field-label
     styling above — it is a sentence, not a field name. */
  .fform label.chk { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; cursor: pointer;
    font-family: var(--sans); font-size: .855rem; font-weight: 400; letter-spacing: -.008em; text-transform: none;
    color: var(--graphite); margin-bottom: 0; padding: 2px 0; }
  .fform .chk input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--signal); cursor: pointer; }
  .fform .chk input:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
  .fform .chk b { color: var(--readout); font-weight: 620; }
  .fform button { justify-content: center; margin-top: 3px; }
  .fform .hp { position: absolute; left: -9999px; }
  .fnote { font-size: .76rem; color: var(--graphite); margin-top: 2px; }
  .fdone { font-size: .9rem; color: var(--signal); font-weight: 620; margin-top: 18px; }
  .fdone span { display: block; color: var(--graphite); font-weight: 400; font-size: .845rem; margin-top: 5px; }
  .ferr { font-size: .82rem; color: var(--track); margin-top: 10px; }
  /* auto pins the button to the bottom of the panel, so the shorter MCP card
     ends on the same baseline as the form beside it instead of trailing off. */
  .api-mcp .btn { align-self: flex-start; margin-top: auto; }
  .api-mcp p + p { margin-top: 12px; }

  @media (max-width: 1000px) {
    .api-split, .api-access { grid-template-columns: 1fr; }
    .api-facts { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .api-facts { grid-template-columns: 1fr; }
    .code pre { font-size: .68rem; padding: 14px; }
  }

  /* ================= PRICING ================= */
  .price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; align-items: stretch; }
  .tier { padding: 22px; display: flex; flex-direction: column; }
  .tier.feat { border-color: rgba(51,230,196,.4); }
  .tier .tn { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
  .tier .tp { font-size: 2.1rem; font-weight: 820; letter-spacing: -.03em; margin-top: 10px; }
  .tier .tp small { font-size: .82rem; font-weight: 550; color: var(--graphite); letter-spacing: 0; }
  .tier .tp-sub { font-family: var(--mono); font-size: .62rem; line-height: 15px; letter-spacing: .06em; color: var(--graphite); margin-top: 6px; }
  /* cards without a month-to-month line reserve its box (6px + 15px) so all four stay on one baseline */
  .tier .tp:not(:has(+ .tp-sub)) { margin-bottom: 21px; }
  .tier .td { color: var(--graphite); font-size: .84rem; margin-top: 6px; min-height: 38px; }
  .tier ul { display: flex; flex-direction: column; gap: 9px; margin: 16px 0 20px; }
  .tier li { display: grid; grid-template-columns: auto 1fr; gap: 9px; font-size: .84rem; }
  .tier li svg { width: 14px; height: 14px; color: var(--signal); margin-top: 3px; }
  .tier li .u { font-family: var(--mono); font-size: .78rem; color: var(--graphite); }
  .tier .btn { width: 100%; justify-content: center; margin-top: auto; }
  .price-note { font-family: var(--mono); font-size: .64rem; color: var(--graphite); margin-top: 16px; text-align: center; }

  /* ================= FINAL CTA + FOOTER ================= */
  .final { text-align: center; }
  .final .fq { font-family: var(--mono); font-size: .82rem; color: var(--signal); margin-bottom: 18px; }
  .final h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 840; letter-spacing: -.035em; text-wrap: balance; }
  .final p { color: var(--graphite); max-width: 46ch; margin: 14px auto 26px; }
  footer { border-top: 1px solid var(--hair); }
  .foot { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; padding-block: 26px; }
  .statusbar { width: 100%; border-top: 1px solid var(--hair-2); margin-top: 14px; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 16px;
    font-family: var(--mono); font-size: .64rem; letter-spacing: .05em; color: var(--graphite); }
  .statusbar .ok { color: var(--signal); }

  /* ================= REVEAL ================= */
  .reveal { opacity: 0; transform: translateY(24px); }
  .reveal.in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  [data-stagger] > * { transition-delay: calc(var(--i,0) * 60ms); }

  /* ================= RESPONSIVE ================= */
  @media (max-width: 1000px) {
    .console { grid-template-columns: 1fr; }
    .viewport-wrap { aspect-ratio: 16/10; }
    .duo { grid-template-columns: 1fr; }
    .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
    .c-analyze,.c-search,.c-agent,.c-report,.c-extract,.c-templates { grid-column: span 2; }
    .c-templates { flex-direction: column; align-items: flex-start; }
    .pipe { grid-template-columns: 1fr 1fr; }
    .pnode::after { display: none; }
    .report-split { grid-template-columns: 1fr; }
    .stats, .kpis, .price-grid { grid-template-columns: repeat(2, 1fr); }
    .nav-links { display: none; }
  }
  @media (max-width: 560px) {
    .wrap { padding-inline: 16px; }
    /* Three things share 390px of bar: the mark, the disclosure and the CTA.
       The LIVE pip is the one that carries no navigation, so it goes first. */
    .brand .status, .brand span br { display: none; }
    .brand span { white-space: nowrap; }
    .brand { font-size: .9rem; gap: 8px; }
    .brand .mk { width: 24px; height: 24px; }
    .nav-in { gap: 10px; }
    .nav .btn-primary { padding: 10px 13px; font-size: .86rem; white-space: nowrap; }
    .nav-toggle { padding: 9px 11px; }
    /* The bar's CTA becomes "Start →"; the hero's full-length one is two
       screens away and says the whole thing. */
    .nav .ctaw { display: none; }
    .stats, .kpis, .price-grid, .bento, .pipe { grid-template-columns: 1fr; }
    .c-analyze,.c-search,.c-agent,.c-report,.c-extract,.c-templates { grid-column: span 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .marquee .track { animation: none !important; }
  }

  /* ================================================================
     MULTI-PAGE CHROME
     The site became five real pages (see README "Routing"). Everything
     below is shared furniture: the skip link, the nav's mobile
     disclosure, the column footer, and the prose column the legal and
     story pages set their text in.
     ================================================================ */

  /* Skip link — the first tab stop on every page, visible only when focused. */
  .skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: 8px;
    background: var(--signal); color: var(--bezel); font-weight: 700; font-size: .88rem; transition: top .18s; }
  .skip:focus { top: 12px; }

  /* Current page. A colour change alone would be the only signal, so the
     mono dot carries it too — the same vocabulary the nav's LIVE pip uses. */
  .nav-links a[aria-current="page"] { color: var(--readout); background: var(--chassis); }
  .nav-links a[aria-current="page"]::before { content: "· "; color: var(--signal); }
  .nav-links a:focus-visible, .foot-nav a:focus-visible, .brand:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }

  /* Mobile disclosure. Below 1000px the link row used to simply vanish, which
     was survivable when every destination was an anchor on the page you were
     already reading. With real routes it would strand a phone on whatever page
     it landed on, so the row becomes a panel behind a real button. */
  .nav-toggle { display: none; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--hair);
    border-radius: 8px; background: var(--chassis); font-size: .82rem; font-weight: 640; }
  .nav-toggle:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
  .nav-toggle svg { width: 16px; height: 16px; }
  .nav-toggle .x { display: none; }
  .nav-toggle[aria-expanded="true"] .x { display: block; }
  .nav-toggle[aria-expanded="true"] .m { display: none; }

  @media (max-width: 1000px) {
    .nav-toggle { display: inline-flex; }
    /* `top: 100%`, not a hard 62px: the bar grows taller than its nominal
       height on narrow screens, and a fixed offset would leave the panel
       overlapping the bar it hangs from. */
    .nav-links { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; gap: 2px;
      /* Opaque, not a translucent mix: the panel sits over body copy, and the
         bar's own `color-mix` treatment is legible only because nothing scrolls
         *under* a 62px strip the way a full menu does. */
      padding: 10px 16px 16px; background: var(--bezel); border-bottom: 1px solid var(--hair);
      box-shadow: 0 18px 30px -18px rgba(0,0,0,.9); }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 11px 12px; font-size: .95rem; }
    .nav .btn-ghost { display: none; }
  }

  /* ================= FOOTER (columns) ================= */
  .foot { align-items: flex-start; }
  .foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 28px; flex: 1 1 480px; }
  .foot-col h2 { font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--graphite); margin-bottom: 10px; }
  .foot-nav { display: flex; flex-direction: column; gap: 7px; }
  .foot-nav a { font-size: .85rem; color: var(--graphite); transition: color .2s; }
  .foot-nav a:hover { color: var(--readout); }
  .foot-brand { max-width: 260px; }
  .foot-brand p { color: var(--graphite); font-size: .8rem; margin-top: 10px; }
  @media (max-width: 760px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* ================= PAGE HEAD (sub-pages) ================= */
  .page-head { padding-top: clamp(38px, 5vw, 66px); padding-bottom: clamp(20px, 3vw, 34px); }
  .page-head h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); font-weight: 840; letter-spacing: -.035em;
    line-height: 1.02; text-wrap: balance; margin-top: 14px; max-width: 20ch; }
  .page-head .lede { margin-top: 18px; }
  .crumb { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
  .crumb a:hover { color: var(--readout); }
  .crumb .tk { color: var(--signal); }

  /* ================= PROSE (about, legal) ================= */
  .prose { max-width: 72ch; }
  .prose p { margin-top: 16px; color: #C6D3D5; }
  .prose p.first { font-size: 1.1rem; color: var(--readout); }
  .prose h2 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); font-weight: 760; letter-spacing: -.02em; margin-top: 42px; }
  .prose h3 { font-size: 1rem; font-weight: 700; margin-top: 26px; }
  .prose ul { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
  /* Not a grid: these list items contain inline <strong>/<a>/<code>, and a grid
     would promote every one of them — and every bare text node between them —
     to its own cell, which tore the first draft's sentences into columns. */
  .prose ul li { position: relative; padding-left: 22px; font-size: .93rem; color: #C6D3D5; }
  .prose ul li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--signal); font-family: var(--mono); }
  .prose a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
  .prose code { font-family: var(--mono); font-size: .84em; color: var(--readout); background: var(--chassis);
    border: 1px solid var(--hair); border-radius: 5px; padding: 1px 5px; }
  .prose strong { color: var(--readout); font-weight: 680; }

  /* Legal section numbering, in the mono voice the rest of the site uses for
     machine-ish text. Kept as real headings so the outline is navigable. */
  .prose h2 .n { font-family: var(--mono); font-size: .7em; color: var(--signal); margin-right: .6em; }

  /* Draft banner. These documents are honest drafts and say so in the loudest
     place on the page rather than a footnote nobody reaches. */
  .draft { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 12px;
    border: 1px solid rgba(244,166,60,.36); background: rgba(244,166,60,.07); margin-top: 26px; max-width: 72ch; }
  .draft .k { font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--track); border: 1px solid rgba(244,166,60,.4); border-radius: 5px; padding: 3px 7px; flex: none; margin-top: 2px; }
  .draft p { font-size: .88rem; color: #C6D3D5; margin: 0; }
  .draft p + p { margin-top: 8px; }

  /* An unfilled blank a human still has to fill. Deliberately loud: a wrong
     address in a legal document is worse than a visible gap. */
  .todo { font-family: var(--mono); font-size: .78em; color: var(--track);
    border: 1px dashed rgba(244,166,60,.5); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }

  /* Meta line under a legal heading: effective date, version. */
  .legal-meta { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; color: var(--graphite);
    display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; }

  /* Sub-processor / data table. Scrolls in its own box rather than pushing the
     page sideways on a phone. */
  .tblwrap { max-width: 72ch; margin-top: 18px; overflow-x: auto; border: 1px solid var(--hair); border-radius: 12px; }
  table.dl { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .85rem; }
  table.dl th, table.dl td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--hair-2); vertical-align: top; }
  table.dl th { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--graphite); font-weight: 600; background: var(--chassis); }
  table.dl tr:last-child td { border-bottom: 0; }
  table.dl td:first-child { color: var(--readout); font-weight: 620; }

  /* ================= ABOUT ================= */
  .story { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
  .story-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 86px; }
  .side-card { padding: 18px 20px; }
  .side-card .k { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); }
  .side-card p { font-size: .88rem; color: #C6D3D5; margin-top: 9px; }
  @media (max-width: 900px) { .story { grid-template-columns: 1fr; } .story-side { position: static; } }

  /* ================= CONTACT ================= */
  .contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(22px, 3vw, 40px); align-items: start; }
  .contact-grid .api-panel { height: auto; }
  .routes { display: flex; flex-direction: column; gap: 12px; }
  .route { padding: 18px 20px; }
  .route .k { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); }
  .route h2 { font-size: 1rem; font-weight: 700; margin-top: 8px; }
  .route p { font-size: .87rem; color: var(--graphite); margin-top: 6px; }
  .route a.lnk { color: var(--signal); font-size: .87rem; text-decoration: underline; text-underline-offset: 3px;
    display: inline-block; margin-top: 10px; }
  .fform textarea { width: 100%; background: var(--bezel); border: 1px solid var(--hair); border-radius: 8px;
    color: var(--readout); font: inherit; font-size: .92rem; padding: 11px 12px; min-height: 132px; resize: vertical; }
  .fform textarea:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
  .fform select { width: 100%; background: var(--bezel); border: 1px solid var(--hair); border-radius: 8px;
    color: var(--readout); font: inherit; font-size: .92rem; padding: 11px 12px; }
  @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

  /* ================= CROSS-PAGE CALLOUT ================= */
  .callout { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between;
    padding: 24px 26px; }
  .callout .ct { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); }
  .callout h2 { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 760; letter-spacing: -.02em; margin-top: 8px; }
  .callout p { color: var(--graphite); font-size: .92rem; margin-top: 8px; max-width: 54ch; }

  /* ================= 404 ================= */
  .nf { text-align: center; padding-block: clamp(70px, 12vw, 150px); }
  /* `.num`, not `.code` — `.code` is the API code block and this inherited its
     panel chrome, which drew a card around the numeral. */
  .nf .num { font-family: var(--mono); font-size: clamp(3rem, 12vw, 6rem); font-weight: 700; letter-spacing: -.04em;
    color: var(--chassis); -webkit-text-stroke: 1px var(--hair); }
  .nf h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; margin-top: -.2em; }
  .nf p { color: var(--graphite); max-width: 48ch; margin: 14px auto 26px; }
  .nf .acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }