/* ─────────────────────────────────────────────────────────────
     TheSteelOS — platform landing.  Design system: brand/tokens.css
     ───────────────────────────────────────────────────────────── */

  /* Type is self-hosted, not pulled from a font CDN (BRAND §4: own-your-stack,
     CSP-tight). Vendored from @fontsource; latin subsets only.
     Archivo carries both wght and wdth — the wdth axis gives us the "Expanded"
     stamped-plate display cut without shipping a second file. */
  @font-face{
    font-family:'Archivo'; font-style:normal; font-display:swap;
    font-weight:100 900; font-stretch:62% 125%;
    src:url('/assets/fonts/archivo-latin-var.woff2') format('woff2-variations');
  }
  @font-face{
    font-family:'IBM Plex Sans'; font-style:normal; font-display:swap;
    font-weight:100 700;
    src:url('/assets/fonts/plex-sans-latin-var.woff2') format('woff2-variations');
  }
  /* Plex Mono has no variable cut — three static weights cover every use. */
  @font-face{font-family:'IBM Plex Mono'; font-style:normal; font-display:swap; font-weight:400;
    src:url('/assets/fonts/plex-mono-latin-400.woff2') format('woff2')}
  @font-face{font-family:'IBM Plex Mono'; font-style:normal; font-display:swap; font-weight:500;
    src:url('/assets/fonts/plex-mono-latin-500.woff2') format('woff2')}
  @font-face{font-family:'IBM Plex Mono'; font-style:normal; font-display:swap; font-weight:600;
    src:url('/assets/fonts/plex-mono-latin-600.woff2') format('woff2')}

  :root{
    --steel-950:#0b0e13; --steel-900:#10151a; --steel-800:#1b232c; --steel-700:#2a333c;
    --steel-600:#3a434d; --steel-500:#5a636d; --steel-400:#6b7682; --steel-300:#98a2ad;
    --steel-200:#dde2e8; --steel-100:#eef1f4; --steel-50:#f6f7f9; --white:#ffffff;
    --arc:#2f6db0; --arc-ink:#245688; --arc-bright:#5b9bd8;
    --straw:#b7832a; --straw-ink:#8a6314; --straw-bright:#e0aa4a;
    --weld:#ff5a1f; --weld-ink:#c23c0c; --weld-bright:#ff7a3c;
    --mill:#7c5cbf; --mill-ink:#5a3f96; --mill-bright:#a68ae0;
    --positive:#2f8f6b; --positive-ink:#1f6b4f; --positive-bright:#36d399;
    --caution:#c9922b; --caution-ink:#946611;
    --critical:#c0432f; --critical-ink:#9a3423;

    /* themed tokens (light) — the landing is light-first, matching the apps.
       Dark is opt-in via [data-theme="dark"], never forced by the OS. */
    --page:var(--steel-50); --panel:var(--white); --fill:var(--steel-100);
    --line:var(--steel-200); --ink:#0d1218; --body:var(--steel-600); --muted:var(--steel-400);
    --accent:var(--arc); --accent-ink:var(--arc-ink); --accent-bright:var(--arc-bright);
    /* text that sits ON --accent. Arc and violet carry white; straw and weld
       carry dark ink. Product pages override this alongside --accent. */
    --accent-fg:var(--white);
    /* Semantic state colors as TEXT. The base swatches are tuned to be read as
       fills, and fail AA as small type on a light surface (--positive is 4.00:1,
       --caution 2.78:1). These flip to -ink on light, -bright on dark. */
    --pos-text:var(--positive-ink);
    --caution-text:var(--caution-ink);
    --critical-text:var(--critical-ink);
    --dev-text:var(--mill-ink);
    --grid-line:rgba(13,18,24,.05);
    --font-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
    --font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  }
  /* On a dark surface, text must move LIGHTER, not stay mid-grey: --steel-400 on
     --steel-900 is 3.97:1 and fails AA. Everything steps up one rung.
     --accent resolves through --accent-bright so a product page's own accent
     flows into dark mode without the product having to restate it. */
  :root[data-theme="dark"]{
    --page:var(--steel-950); --panel:var(--steel-900); --fill:var(--steel-800);
    --line:var(--steel-700); --ink:#f4f6f8; --body:var(--steel-200); --muted:var(--steel-300);
    --accent:var(--accent-bright); --accent-ink:var(--accent-bright);
    --accent-fg:var(--steel-950);
    --pos-text:var(--positive-bright); --caution-text:var(--caution); --critical-text:#d65a46;
    --dev-text:var(--mill-bright);
    --grid-line:rgba(255,255,255,.045);
  }

  /* ---------- INSTRUMENT BAND ----------
     A dark section. Re-points the themed tokens to their dark values, so every
     component that draws from --panel / --line / --ink / --muted / --accent-ink
     (.caps, .leaks, .flow, .modgrid, .sec-head …) inverts with no extra rules.
     Depth comes from surface contrast, not shadows. Two bands per page, max. */
  .band{
    --page:var(--steel-950); --panel:var(--steel-900); --fill:var(--steel-800);
    --line:var(--steel-700); --ink:#f4f6f8; --body:var(--steel-200); --muted:var(--steel-300);
    --accent:var(--accent-bright); --accent-ink:var(--accent-bright); --accent-fg:var(--steel-950);
    --pos-text:var(--positive-bright); --caution-text:var(--caution); --critical-text:#d65a46;
    --dev-text:var(--mill-bright);
    --grid-line:rgba(255,255,255,.045);
    background:var(--steel-950); color:var(--body); position:relative; overflow:hidden;
  }
  .band-grid{position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
    background-size:44px 44px; mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000,transparent)}
  .band .wrap{position:relative}

  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--page); color:var(--body);
    font-family:var(--font-sans); line-height:1.55; overflow-x:hidden;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  }
  ::selection{background:var(--accent); color:var(--accent-fg)}
  a{color:inherit; text-decoration:none}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px}
  .mono{font-family:var(--font-mono)}
  .eyebrow{
    font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
    color:var(--accent-ink); display:inline-flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:""; width:26px; height:1px; background:var(--accent)}
  h1,h2,h3{font-family:var(--font-display); color:var(--ink); letter-spacing:-.03em; line-height:1.03; text-wrap:balance}

  /* Section rhythm. No universal border — sections separate by tone and by the
     dark bands between them. Three scale tiers on the 8px grid. */
  section{padding:96px 0}
  .sec-lg{padding-top:128px; padding-bottom:128px}
  .sec-fill{background:var(--fill)}
  /* the one case a rule is still needed: two same-tone light plates meeting */
  .sec-rule{border-top:1px solid var(--line)}

  /* ---------- NAV ---------- */
  nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--page) 82%, transparent);
      backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
  .nav-in{display:flex; align-items:center; justify-content:space-between; height:64px}
  .brand{display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:800;
          font-size:1.08rem; letter-spacing:-.02em; color:var(--ink)}
  .mark{width:28px; height:28px; position:relative; display:grid; place-items:center;
        border:2px solid var(--accent); background:linear-gradient(135deg,var(--steel-800),var(--steel-950)); flex-shrink:0}
  .mark::after{content:""; position:absolute; inset:5px; border:1px solid var(--accent-bright); opacity:.55}
  .brand .sfx{font-family:var(--font-mono); font-weight:500; font-size:.62rem; letter-spacing:.24em;
              text-transform:uppercase; color:var(--muted); align-self:center; margin-left:-4px}
  .nav-links{display:flex; align-items:center; gap:28px}
  /* :not(.btn) — otherwise this beats .btn-primary on specificity and paints the
     nav CTA's label muted grey on the accent fill (1.15:1). */
  .nav-links a:not(.btn){font-size:.85rem; color:var(--muted); transition:color .2s}
  .nav-links a:not(.btn):hover{color:var(--ink)}
  .btn{font-family:var(--font-sans); font-size:.86rem; font-weight:600; padding:10px 18px;
       border:1px solid var(--line); color:var(--ink); background:var(--panel); transition:.18s; cursor:pointer; display:inline-block}
  .btn:hover{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
  .btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-fg)}
  .btn-primary:hover{box-shadow:0 10px 30px -10px var(--accent); filter:brightness(1.06)}
  @media(max-width:820px){.nav-links a:not(.btn){display:none}}

  /* ---------- HERO ---------- */
  .hero{position:relative; padding:74px 0 66px; overflow:hidden}
  .hero-grid{position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
    background-size:44px 44px; mask-image:radial-gradient(ellipse 75% 70% at 68% 32%,#000,transparent)}
  .hero-in{position:relative; display:grid; grid-template-columns:1.02fr .98fr; gap:48px; align-items:center}
  .tag{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:.7rem;
       letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:22px}
  .tag .live{width:7px; height:7px; background:var(--accent); box-shadow:0 0 10px var(--accent-bright); animation:pulse 2.2s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
  /* stamped equipment-plate display cut — the Archivo wdth axis (BRAND §4) */
  h1{font-size:clamp(2.5rem,5.4vw,4.1rem); font-weight:900; font-stretch:112%; margin-bottom:22px}
  /* The tint bar is painted as an inline background rather than an absolutely
     positioned ::after, so the phrase may wrap and the bar follows each line. */
  h1 .u{color:var(--accent);
    background:linear-gradient(transparent 62%, color-mix(in srgb,var(--accent) 16%,transparent) 0);
    -webkit-box-decoration-break:clone; box-decoration-break:clone}
  .lede{font-size:1.16rem; max-width:32em; margin-bottom:30px}
  .lede b{color:var(--ink); font-weight:600}
  .cta-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
  .hero-foot{margin-top:28px; display:flex; gap:24px; flex-wrap:wrap; font-family:var(--font-mono);
             font-size:.74rem; color:var(--muted)}
  .hero-foot span{display:flex; align-items:center; gap:8px}
  .hero-foot .t{color:var(--accent)}
  @media(max-width:900px){.hero-in{grid-template-columns:1fr; gap:40px}}

  /* ---------- INSTRUMENT PANEL (signature) ---------- */
  .panel{--pa:var(--arc-bright); background:linear-gradient(180deg,#151b22,#0d1218);
    border:1px solid #222a32; box-shadow:0 40px 90px -50px #000; position:relative}
  .panel::before{content:""; position:absolute; top:-1px; left:22px; right:22px; height:2px;
    background:linear-gradient(90deg,transparent,var(--pa),transparent); transition:background .4s}
  .p-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #222a32}
  .p-head .who{font-family:var(--font-display); font-weight:700; color:#eef1f4; font-size:.95rem; letter-spacing:-.01em}
  .p-head .who .sub{font-family:var(--font-mono); font-weight:400; color:#7d8794; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; display:block; margin-top:2px}
  .p-live{display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:#a9bcd2}
  .p-live i{width:6px; height:6px; border-radius:50%; background:var(--positive-bright); box-shadow:0 0 8px var(--positive-bright)}
  /* a readout that illustrates a target rather than reporting a running system.
     No green dot, no glow — it must not be mistaken for live data. */
  .p-live.ref{color:#7d8794}
  .p-live.ref i{background:#3a434d; box-shadow:none}
  /* toggle */
  .p-toggle{display:flex; gap:0; padding:12px 18px 0}
  .p-toggle button{flex:1; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
    padding:8px 4px; background:#0e1419; border:1px solid #222a32; color:#8b97a4; cursor:pointer; transition:.2s; border-right:none}
  .p-toggle button:last-child{border-right:1px solid #222a32}
  .p-toggle button.on{color:#0d1218; background:var(--pa); border-color:var(--pa); font-weight:600}
  .p-body{padding:16px 18px 6px}
  .readout{display:flex; align-items:center; gap:12px; margin-bottom:11px}
  .readout .lbl{width:104px; flex-shrink:0; font-family:var(--font-mono); font-size:.72rem; color:#c8ced4}
  .bar{flex:1; height:8px; background:#0c1014; border:1px solid #222a32; position:relative; overflow:hidden}
  .bar i{position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,#5a738f,var(--pa));
    transition:width 1s cubic-bezier(.2,.8,.2,1)}
  .readout .val{width:56px; text-align:right; font-family:var(--font-mono); font-size:.72rem; color:#eef1f4; font-variant-numeric:tabular-nums}
  .readout .val.pos{color:var(--positive-bright)}
  .readout .val.acc{color:var(--pa)}
  .p-foot{border-top:1px solid #222a32; padding:13px 18px; display:flex; justify-content:space-between; gap:12px}
  .p-foot .kpi{flex:1}
  .p-foot .kpi .k{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:#7d8794}
  .p-foot .kpi .v{font-family:var(--font-mono); font-size:1.15rem; color:#eef1f4; font-weight:600; font-variant-numeric:tabular-nums; margin-top:3px}
  .p-foot .kpi .v small{font-size:.7rem; color:#8b97a4; font-weight:400}

  /* ---------- TRUST STRIP ---------- */
  .strip{padding:22px 0}
  .strip-in{display:flex; align-items:center; gap:14px 30px; flex-wrap:wrap; justify-content:center}
  .strip-in .t{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
  .strip-in .v{font-family:var(--font-display); font-weight:600; color:var(--body); font-size:.95rem; opacity:.85}

  /* ---------- SECTION HEADS ---------- */
  .sec-head{max-width:44em; margin-bottom:46px}
  .sec-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem); font-weight:800; margin:16px 0 14px}
  .sec-head p{font-size:1.06rem; color:var(--muted)}

  /* ---------- PROBLEM ---------- */
  .leaks{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
  .leak{background:var(--panel); padding:28px 24px}
  .leak .n{font-family:var(--font-mono); font-size:.72rem; color:var(--accent); margin-bottom:14px; letter-spacing:.08em}
  .leak h3{font-size:1.08rem; font-weight:700; color:var(--ink); margin-bottom:9px; letter-spacing:-.01em}
  .leak p{font-size:.92rem; color:var(--muted)}
  @media(max-width:820px){.leaks{grid-template-columns:1fr}}

  /* ---------- PRODUCTS ---------- */
  .prods{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px}
  /* --pc is the product's heat as a FILL (rules, borders, the top edge).
     --pc-text is the same heat as TEXT: the -ink cut on light, -bright on dark.
     Arc and violet fail AA as text on --panel; straw and weld fail on white.
     Never paint small type with --pc. */
  /* flex column so every card's CTA sits on the same baseline regardless of how
     much copy sits above it */
  .prod{--pc:var(--arc); --pc-ink:var(--arc-ink); --pc-bright:var(--arc-bright); --pc-text:var(--pc-ink);
    display:flex; flex-direction:column;
    background:var(--panel); border:1px solid var(--line); padding:30px 28px; position:relative; overflow:hidden; transition:.2s}
  .prod:hover{border-color:var(--pc)}
  .prod::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--pc)}
  .prod .pname{font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--ink); letter-spacing:-.02em; display:flex; align-items:baseline; gap:9px}
  .prod .pname .sfx{font-family:var(--font-mono); font-size:.66rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--pc-text)}
  .prod .role{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--muted); margin:6px 0 16px; text-transform:uppercase}
  .prod p{font-size:.96rem; color:var(--body); margin-bottom:18px}
  .prod ul{list-style:none; display:flex; flex-direction:column; gap:8px}
  .prod li{font-size:.88rem; color:var(--muted); display:flex; gap:10px}
  .prod li::before{content:"▸"; color:var(--pc-text); flex-shrink:0}
  .prod .go{margin-top:auto; padding-top:20px; font-family:var(--font-mono); font-size:.76rem; color:var(--pc-text); display:inline-flex; align-items:center; gap:7px; letter-spacing:.04em; align-self:flex-start}
  .prod-trade{--pc:var(--straw); --pc-ink:var(--straw-ink); --pc-bright:var(--straw-bright)}
  .prod-fab{--pc:var(--weld); --pc-ink:var(--weld-ink); --pc-bright:var(--weld-bright)}
  .prod-mill{--pc:var(--mill); --pc-ink:var(--mill-ink); --pc-bright:var(--mill-bright)}
  :root[data-theme="dark"] .prod,.band .prod{--pc-text:var(--pc-bright)}
  /* a product that exists but has no product surface yet */
  .prod .status{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
    border:1px solid var(--pc); color:var(--pc-text); padding:3px 9px; margin-top:16px; align-self:flex-start}
  .family{margin-top:20px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-family:var(--font-mono); font-size:.72rem; color:var(--muted)}
  .family .chip{border:1px solid var(--line); padding:5px 11px; letter-spacing:.08em; text-transform:uppercase}
  .family .chip.soon{opacity:.6}
  .family a.chip.dev{border-color:var(--mill); color:var(--dev-text); transition:.18s}
  .family a.chip.dev:hover{box-shadow:0 0 0 1px var(--mill)}
  @media(max-width:960px){.prods{grid-template-columns:1fr 1fr}}
  @media(max-width:640px){.prods{grid-template-columns:1fr}}

  /* ---------- AI / CAPABILITY READOUTS ---------- */
  .caps{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px}
  .cap{background:var(--panel); padding:26px 26px; display:flex; gap:18px}
  .cap .ix{font-family:var(--font-mono); font-size:.72rem; color:var(--accent); flex-shrink:0; padding-top:3px; letter-spacing:.06em}
  .cap h3{font-size:1.06rem; font-weight:700; color:var(--ink); margin-bottom:7px; letter-spacing:-.01em}
  .cap p{font-size:.9rem; color:var(--muted)}
  @media(max-width:760px){.caps{grid-template-columns:1fr}}

  /* ---------- ONE SYSTEM ---------- */
  .flow{display:flex; align-items:stretch; gap:0; margin-top:36px; border:1px solid var(--line); overflow-x:auto}
  .flow .node{flex:1; min-width:132px; padding:22px 18px; border-right:1px solid var(--line); position:relative}
  .flow .node:last-child{border-right:none}
  .flow .node .s{font-family:var(--font-mono); font-size:.66rem; color:var(--accent); letter-spacing:.1em}
  .flow .node .t{font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:1rem; margin-top:8px; letter-spacing:-.01em}
  .flow .node .d{font-size:.8rem; color:var(--muted); margin-top:6px}

  /* ---------- QUOTE ---------- */
  .pos-in{display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center}
  .pos-in .q{font-family:var(--font-display); font-size:4.5rem; line-height:.7; color:var(--accent); font-weight:900}
  .pos-in blockquote{font-family:var(--font-display); font-size:clamp(1.3rem,2.6vw,1.95rem); color:var(--ink); font-weight:600; letter-spacing:-.02em; line-height:1.3}
  .pos-in blockquote b{color:var(--accent)}
  @media(max-width:640px){.pos-in{grid-template-columns:1fr; gap:8px}}

  /* ---------- FINAL CTA ---------- */
  .final{text-align:center; position:relative; overflow:hidden}
  .final .glow{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:640px; height:320px;
    background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%); pointer-events:none}
  .final-in{position:relative}
  .final h2{font-size:clamp(1.9rem,4vw,2.8rem); font-weight:800; margin-bottom:16px}
  .final p{font-size:1.1rem; color:var(--body); max-width:34em; margin:0 auto 30px}
  .final .cta-row{justify-content:center}

  /* ---------- FOOTER ---------- */
  footer{padding:40px 0; border-bottom:none}
  .foot-in{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:20px}
  .foot-in .b{font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:1.05rem}
  .foot-in .tl{font-size:.82rem; color:var(--muted); margin-top:6px; max-width:24em}
  .foot-fam{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
  .foot-fam span,.foot-fam a{font-family:var(--font-mono); font-size:.66rem; border:1px solid var(--line); padding:4px 10px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
  .foot-fam span.on{color:var(--ink); border-color:var(--accent)}
  .foot-fam a.dev{border-color:var(--mill); color:var(--dev-text)}
  .foot-fam a:hover{color:var(--ink)}
  .foot-links{display:flex; gap:22px; font-family:var(--font-mono); font-size:.76rem; color:var(--muted)}
  .foot-links a:hover{color:var(--ink)}
  /* legal / identity line — mono hairline, sits under the product family */
  .foot-legal{font-family:var(--font-mono); font-size:.68rem; color:var(--muted); margin-top:14px; letter-spacing:.04em}
  .foot-legal a{color:var(--muted); border-bottom:1px solid transparent; transition:.18s}
  .foot-legal a:hover{color:var(--ink); border-bottom-color:var(--line)}

  @media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important} .bar i{transition:none!important}}

/* ═══════════ shared additions: reveal, forms, nav disclosure ═══════════ */

/* scroll reveal — mechanical rise, staggered via --d */
.rv{opacity:0; transform:translateY(14px); transition:opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d,0ms)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none}}

/* theme toggle — square, hairline, mono glyph. Sits left of the nav CTA. */
.theme-toggle{width:38px; height:38px; padding:0; flex-shrink:0; display:grid; place-items:center;
  background:var(--panel); border:1px solid var(--line); color:var(--muted); cursor:pointer; transition:.18s}
.theme-toggle:hover{color:var(--ink); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.theme-toggle .sun{display:none} .theme-toggle .moon{display:block}
:root[data-theme="dark"] .theme-toggle .sun{display:block}
:root[data-theme="dark"] .theme-toggle .moon{display:none}
/* lives inside .nav-links, so it rides the existing mobile disclosure */
@media(max-width:820px){.theme-toggle{align-self:flex-start}}

/* mobile nav disclosure */
.nav-burger{display:none; background:none; border:1px solid var(--line); width:38px; height:38px; cursor:pointer; position:relative}
.nav-burger i,.nav-burger i::before,.nav-burger i::after{content:""; position:absolute; left:9px; right:9px; height:2px; background:var(--ink); transition:.2s}
.nav-burger i{top:18px}
.nav-burger i::before{top:-6px} .nav-burger i::after{top:6px}
@media(max-width:820px){
  .nav-burger{display:block}
  .nav-links{display:none; position:absolute; top:64px; left:0; right:0; background:var(--page);
    border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; padding:10px 28px 18px; gap:14px}
  .nav-links.open{display:flex}
  .nav-links a{display:block !important; padding:6px 0}
}

/* forms (signup / early access) */
.f-field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px}
.f-field label{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.f-field input,.f-field select{
  height:44px; border:1px solid var(--line); background:var(--panel); color:var(--ink);
  padding:0 13px; font-family:var(--font-sans); font-size:.95rem; border-radius:0; appearance:none;
}
.f-field select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat}
.f-field input:focus,.f-field select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.f-hint{font-size:.78rem; color:var(--muted); margin-top:-10px; margin-bottom:16px}
.f-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}}
.f-err{border-left:2px solid #c0432f; background:color-mix(in srgb,#c0432f 8%,transparent); color:var(--ink); font-size:.88rem; padding:10px 14px; margin-bottom:16px}
.f-ok{border-left:2px solid var(--positive); background:color-mix(in srgb,#2f8f6b 10%,transparent); padding:22px; margin-bottom:6px}
.f-ok b{color:var(--ink)}

/* product chooser cards (signup) */
.choose{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:820px){.choose{grid-template-columns:1fr}}
/* --pc fill / --pc-text text, same split as .prod. Set by class, never inline —
   an inline custom property would outrank the dark-theme correction below. */
.choose .opt{--pc:var(--accent); --pc-text:var(--accent-ink); text-align:left; cursor:pointer; background:var(--panel); border:1px solid var(--line);
  padding:22px; position:relative; transition:.18s; font-family:var(--font-sans)}
.choose .opt-trade{--pc:var(--straw); --pc-text:var(--straw-ink)}
.choose .opt-fab{--pc:var(--weld); --pc-text:var(--weld-ink)}
.choose .opt-mill{--pc:var(--mill); --pc-text:var(--mill-ink)}
:root[data-theme="dark"] .choose .opt-trade{--pc-text:var(--straw-bright)}
:root[data-theme="dark"] .choose .opt-fab{--pc-text:var(--weld-bright)}
:root[data-theme="dark"] .choose .opt-mill{--pc-text:var(--mill-bright)}
.choose .opt::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--pc); opacity:.85}
.choose .opt:hover,.choose .opt.on{border-color:var(--pc); box-shadow:0 0 0 1px var(--pc)}
.choose .opt .nm{font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--ink); display:flex; gap:8px; align-items:baseline}
.choose .opt .nm .sfx{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--pc-text)}
.choose .opt p{font-size:.84rem; color:var(--muted); margin-top:8px}
.choose .opt .st{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; margin-top:12px; display:inline-block; padding:3px 8px; border:1px solid var(--line); color:var(--muted)}
.choose .opt .st.live{color:var(--pos-text); border-color:var(--positive)}
/* deliberately not .live — Mill has no product surface to sign into yet */
.choose .opt .st.dev{color:var(--dev-text); border-color:var(--mill)}

/* stage rail (fabricate page) — fills as you scroll */
.srail{position:relative; margin:40px 0 0; padding-left:26px}
.srail::before{content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px; background:var(--line)}
.srail .fill{position:absolute; left:8px; top:6px; width:2px; background:linear-gradient(180deg,#5a738f,var(--weld)); height:0; transition:height .25s linear}
.srail .st{position:relative; padding:0 0 34px 22px}
.srail .st:last-child{padding-bottom:0}
.srail .st::before{content:""; position:absolute; left:-26px; top:4px; width:14px; height:14px; background:var(--page); border:2px solid var(--line); transition:.3s}
.srail .st.done::before{border-color:var(--weld); background:var(--weld)}
.srail .st .t{font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:1.06rem; letter-spacing:-.01em}
.srail .st .no{font-family:var(--font-mono); font-size:.66rem; color:var(--weld-bright, #ff7a3c); letter-spacing:.1em; margin-right:8px}
.srail .st p{font-size:.9rem; color:var(--muted); margin-top:5px; max-width:34em}

/* cost-stack ledger (trade page) */
.ledger{border:1px solid var(--line); background:var(--panel); font-family:var(--font-mono); font-size:.82rem}
.ledger .lrow{display:flex; justify-content:space-between; gap:14px; padding:11px 16px; border-bottom:1px solid var(--line)}
.ledger .lrow:last-child{border-bottom:none}
.ledger .lrow .k{color:var(--body)} .ledger .lrow .v{color:var(--ink); font-variant-numeric:tabular-nums}
.ledger .lrow.sub .k{color:var(--muted); padding-left:14px}
.ledger .lrow.total{background:var(--fill); font-weight:600}
.ledger .lrow.margin .v{color:var(--pos-text)}

/* ═══════════ product screenshots — framed "instrument glass" ═══════════ */
/* A screenshot sits in a square-cut steel frame with a browser bar; the
   product's heat accent runs along the top edge (one heat per surface). */
.shots{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:8px}
.shots .wide{grid-column:1/-1}
@media(max-width:760px){.shots{grid-template-columns:1fr}}

.shot{--sa:var(--accent); --sa-text:var(--accent-ink); background:var(--panel); border:1px solid var(--line); position:relative}
.shot::before{content:""; position:absolute; top:-1px; left:0; right:0; height:3px; background:var(--sa); z-index:1}
.shot .bar{display:flex; align-items:center; gap:8px; padding:9px 14px; border-bottom:1px solid var(--line); background:var(--fill)}
.shot .bar i{width:9px; height:9px; border-radius:50%; background:var(--steel-300); opacity:.55}
.shot .bar .url{margin-left:10px; font-family:var(--font-mono); font-size:.66rem; color:var(--muted); letter-spacing:.04em;
  border:1px solid var(--line); padding:3px 10px; background:var(--panel); flex:1; max-width:340px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.shot .img{display:block; position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--steel-100)}
.shot .img img{display:block; width:100%; height:100%; object-fit:cover; object-position:top left}
.shot .cap{display:flex; align-items:baseline; gap:12px; padding:13px 16px; border-top:1px solid var(--line)}
.shot .cap .k{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sa-text); flex-shrink:0}
.shot .cap .d{font-size:.86rem; color:var(--muted)}
.shot-trade{--sa:var(--straw); --sa-text:var(--straw-ink)}
.shot-fab{--sa:var(--weld); --sa-text:var(--weld-ink)}
.shot-mill{--sa:var(--mill); --sa-text:var(--mill-ink)}
:root[data-theme="dark"] .shot-trade,.band .shot-trade{--sa-text:var(--straw-bright)}
:root[data-theme="dark"] .shot-fab,.band .shot-fab{--sa-text:var(--weld-bright)}
:root[data-theme="dark"] .shot-mill,.band .shot-mill{--sa-text:var(--mill-bright)}
/* hover: a faint lift, mechanical not floaty */
a.shot{transition:border-color .18s, box-shadow .18s}
a.shot:hover{border-color:var(--sa); box-shadow:0 18px 44px -28px color-mix(in srgb, var(--sa) 60%, #000)}

/* ═══════════ social proof — anonymized voices + real stat readouts ═══════════ */
/* Voices: role+segment attribution only (never a named person/logo). Same square
   steel plate as .prod, but no heat top-edge — proof reads as testimony, not product. */
.voices{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px}
@media(max-width:900px){.voices{grid-template-columns:1fr}}
.voice{background:var(--panel); border:1px solid var(--line); padding:26px 24px; display:flex; flex-direction:column}
.voice .qm{font-family:var(--font-display); font-weight:900; font-size:2.4rem; line-height:.6; color:var(--accent); margin-bottom:14px}
.voice blockquote{font-family:var(--font-display); font-weight:600; font-size:1.04rem; color:var(--ink);
  letter-spacing:-.01em; line-height:1.42; margin-bottom:18px}
.voice .attr{margin-top:auto; border-top:1px solid var(--line); padding-top:14px;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.voice .attr b{display:block; color:var(--accent-ink); font-weight:600; font-size:.82rem;
  letter-spacing:0; text-transform:none; margin-bottom:2px}

/* Stat readouts: mono tabular values on the 4-cell hairline grid. Numbers must be
   REAL — supplied by the operator, not illustrative. Omit a cell rather than fake it. */
.proofstats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); margin-top:40px}
.proofstats .st{background:var(--panel); padding:22px 20px}
.proofstats .st .v{font-family:var(--font-mono); font-size:1.7rem; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.proofstats .st .v small{font-size:.9rem; color:var(--muted); font-weight:400}
.proofstats .st .k{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-top:6px}
@media(max-width:760px){.proofstats{grid-template-columns:1fr 1fr}}

/* ═══════════ accessibility — keyboard focus + skip link ═══════════ */
/* A clear, on-brand focus ring for keyboard users only (mouse clicks unaffected). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
/* Skip-to-content: hidden until focused, then pins to the top-left. */
.skip{position:absolute; left:8px; top:-56px; z-index:100; background:var(--accent); color:var(--accent-fg);
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em; padding:10px 16px; transition:top .15s}
.skip:focus{top:8px}

/* ═══════════ 404 ═══════════ */
.e404{min-height:60vh; display:flex; align-items:center; text-align:center; padding:80px 0}
.e404 .wrap{max-width:640px}
.e404-code{font-family:var(--font-display); font-weight:900; font-stretch:112%;
  font-size:clamp(4.5rem,15vw,8.5rem); line-height:.85; color:var(--accent); letter-spacing:-.04em; margin-bottom:10px}
.e404 h1{font-size:clamp(1.8rem,4.5vw,2.7rem); font-weight:800; margin-bottom:16px}
.e404 p{font-size:1.06rem; color:var(--muted); max-width:34em; margin:0 auto 28px}
.e404 .cta-row{justify-content:center}
.e404-links{margin-top:34px; display:flex; gap:24px; justify-content:center; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.78rem}
.e404-links a{color:var(--muted); border-bottom:1px solid transparent; transition:.18s}
.e404-links a:hover{color:var(--ink); border-bottom-color:var(--accent)}

/* ═══════════ legal / policy pages (privacy, terms) ═══════════ */
.legal-wrap{max-width:760px; margin:0 auto; padding:56px 28px 96px}
.legal-wrap h1{font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800; margin:14px 0 8px}
.legal-wrap .updated{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:30px}
.legal-wrap .intro{font-size:1.06rem; color:var(--body); margin-bottom:8px}
.legal-wrap h2{font-family:var(--font-display); font-weight:700; font-size:1.24rem; color:var(--ink);
  margin:34px 0 12px; letter-spacing:-.01em}
.legal-wrap p,.legal-wrap li{font-size:.97rem; color:var(--body); line-height:1.62}
.legal-wrap p{margin-bottom:12px}
.legal-wrap ul{padding-left:20px; margin-bottom:12px}
.legal-wrap li{margin-bottom:7px}
.legal-wrap strong{color:var(--ink); font-weight:600}
.legal-wrap a{color:var(--accent-ink); border-bottom:1px solid var(--line)}
.legal-wrap a:hover{border-bottom-color:var(--accent)}