/* Reset — the artifact host supplies one; a standalone page must carry its own. */
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, figure { margin: 0; }
  img, svg { max-width: 100%; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  /* ── palette: GENERATED by `npm run brand:sync` — edit src/web/theme/palette.ts ── */
  :root {
    --pulley-bg-page          : #06040f;
    --pulley-bg-board         : #0a0816;
    --pulley-bg-card          : #141026;
    --pulley-bg-card-hover    : #1b1533;
    --pulley-border-subtle    : rgba(255,255,255,0.10);
    --pulley-border-strong    : rgba(255,255,255,0.18);
    --pulley-text-primary     : rgba(255,255,255,0.92);
    --pulley-text-secondary   : rgba(255,255,255,0.60);
    --pulley-text-muted       : rgba(255,255,255,0.40);
    --pulley-accent-base      : #8b5cf6;
    --pulley-accent-soft      : rgba(139,92,246,0.15);
    --pulley-accent-ring      : #a78bfa;
    --pulley-accent-fg        : #ffffff;
    --pulley-status-success   : #34d399;
    --pulley-status-success-bg: rgba(52,211,153,0.15);
    --pulley-status-danger    : #fb7185;
    --pulley-status-danger-bg : rgba(251,113,133,0.15);

    /* the site's vocabulary, aliased onto the app's palette (see theme.ts) */
    --ground     : var(--pulley-bg-page);
    --band       : var(--pulley-bg-board);
    --card       : var(--pulley-bg-card);
    --card-raised: var(--pulley-bg-card-hover);
    --line       : var(--pulley-border-subtle);
    --line-strong: var(--pulley-border-strong);
    --ink        : var(--pulley-text-primary);
    --ink-2      : var(--pulley-text-secondary);
    --ink-3      : var(--pulley-text-muted);
    --accent     : var(--pulley-accent-base);
    --accent-soft: var(--pulley-accent-soft);
    --accent-ring: var(--pulley-accent-ring);
    --accent-fg  : var(--pulley-accent-fg);
    --pass       : var(--pulley-status-success);
    --pass-soft  : var(--pulley-status-success-bg);
    --fail       : var(--pulley-status-danger);
    --fail-soft  : var(--pulley-status-danger-bg);
  }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --pulley-bg-page          : #ffffff;
      --pulley-bg-board         : #f9fafb;
      --pulley-bg-card          : #ffffff;
      --pulley-bg-card-hover    : #f3f4f6;
      --pulley-border-subtle    : #e5e7eb;
      --pulley-border-strong    : #d1d5db;
      --pulley-text-primary     : #111827;
      --pulley-text-secondary   : #6b7280;
      --pulley-text-muted       : #9ca3af;
      --pulley-accent-base      : #7c3aed;
      --pulley-accent-soft      : #f5f3ff;
      --pulley-accent-ring      : #8b5cf6;
      --pulley-accent-fg        : #ffffff;
      --pulley-status-success   : #047857;
      --pulley-status-success-bg: #ecfdf5;
      --pulley-status-danger    : #e11d48;
      --pulley-status-danger-bg : #fef2f2;
    }
  }

  :root[data-theme="light"] {
    --pulley-bg-page          : #ffffff;
    --pulley-bg-board         : #f9fafb;
    --pulley-bg-card          : #ffffff;
    --pulley-bg-card-hover    : #f3f4f6;
    --pulley-border-subtle    : #e5e7eb;
    --pulley-border-strong    : #d1d5db;
    --pulley-text-primary     : #111827;
    --pulley-text-secondary   : #6b7280;
    --pulley-text-muted       : #9ca3af;
    --pulley-accent-base      : #7c3aed;
    --pulley-accent-soft      : #f5f3ff;
    --pulley-accent-ring      : #8b5cf6;
    --pulley-accent-fg        : #ffffff;
    --pulley-status-success   : #047857;
    --pulley-status-success-bg: #ecfdf5;
    --pulley-status-danger    : #e11d48;
    --pulley-status-danger-bg : #fef2f2;
  }

  :root[data-theme="dark"] {
    --pulley-bg-page          : #06040f;
    --pulley-bg-board         : #0a0816;
    --pulley-bg-card          : #141026;
    --pulley-bg-card-hover    : #1b1533;
    --pulley-border-subtle    : rgba(255,255,255,0.10);
    --pulley-border-strong    : rgba(255,255,255,0.18);
    --pulley-text-primary     : rgba(255,255,255,0.92);
    --pulley-text-secondary   : rgba(255,255,255,0.60);
    --pulley-text-muted       : rgba(255,255,255,0.40);
    --pulley-accent-base      : #8b5cf6;
    --pulley-accent-soft      : rgba(139,92,246,0.15);
    --pulley-accent-ring      : #a78bfa;
    --pulley-accent-fg        : #ffffff;
    --pulley-status-success   : #34d399;
    --pulley-status-success-bg: rgba(52,211,153,0.15);
    --pulley-status-danger    : #fb7185;
    --pulley-status-danger-bg : rgba(251,113,133,0.15);
  }
  /* ── palette: end generated ── */

  /* The non-colour scale: the site's own, and not downstream of the app — a
     landing page sets type at reading sizes a dense operator console never would. */
  :root {
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    --measure: 62ch;
    --gutter: clamp(20px, 5vw, 48px);
    --max: 1080px;
  }

  body {
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  .wrap {
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* ── type scale ─────────────────────────────────────────── */
  h1, h2, h3 { text-wrap: balance; letter-spacing: -0.022em; line-height: 1.1; }
  h1 { font-size: clamp(38px, 6.2vw, 66px); font-weight: 700; }
  h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 650; }
  h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
  p  { max-width: var(--measure); }

  .eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 18px;
  }
  /* An eyebrow that states the thesis rather than labelling the section.
     The house rule below is "claims are sans" — so this one drops the mono,
     the caps and the tracking that suit a two-word label but fight a sentence. */
  .eyebrow-claim {
    font-family: inherit;
    font-size: clamp(14px, 1.5vw, 16px);
    letter-spacing: -0.005em;
    text-transform: none;
    line-height: 1.4;
    max-width: 34ch;
    margin-bottom: 20px;
  }
  .lede { font-size: clamp(17px, 2vw, 20px); color: var(--ink-2); line-height: 1.55; }

  /* Proof is always mono. Claims are always sans. */
  .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

  /* ── header ─────────────────────────────────────────────── */
  .top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding-block: 22px;
    border-bottom: 1px solid var(--line);
  }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -0.02em; font-size: 17px; }
  .brand svg { display: block; overflow: visible; }
  .top nav { display: flex; align-items: center; gap: 26px; font-size: 14px; }
  .top nav a { color: var(--ink-2); text-decoration: none; }
  .top nav a:hover { color: var(--ink); }
  @media (max-width: 640px) { .top nav .hide-sm { display: none; } }

  /* ── buttons ────────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding-inline: 18px;
    border-radius: 8px; border: 1px solid transparent;
    font-family: var(--sans); font-size: 15px; font-weight: 550;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
  }
  .btn-primary { background: var(--accent); color: var(--accent-fg); }
  .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .btn-ghost { border-color: var(--line-strong); color: var(--ink); }
  .btn-ghost:hover { background: var(--accent-soft); border-color: var(--accent-ring); }
  .btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 3px; border-radius: 6px; }

  /* ── hero ───────────────────────────────────────────────── */
  .hero { display: grid; grid-template-columns: 1fr; gap: 52px; padding-block: clamp(56px, 9vw, 104px); align-items: center; }
  @media (min-width: 940px) { .hero { grid-template-columns: 1.02fr 1fr; gap: 60px; } }
  .hero h1 span { color: var(--accent); }
  .hero .lede { margin-top: 22px; }
  .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
  .hero-note { margin-top: 18px; font-size: 13.5px; color: var(--ink-3); font-family: var(--mono); }

  /* ── the gate readout (the hero's proof panel) ──────────── */
  .readout {
    background: var(--card-raised);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,.30);
    overflow: hidden;
  }
  :root[data-theme="light"] .readout,
  .readout { box-shadow: 0 18px 50px rgba(10,14,25,.14); }
  @media (prefers-color-scheme: dark) { .readout { box-shadow: 0 18px 50px rgba(0,0,0,.45); } }

  .readout-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
    font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  }
  .readout-body { padding: 16px 16px 18px; font-family: var(--mono); font-size: 13px; line-height: 1.85; }
  .row { display: flex; gap: 10px; opacity: 0; animation: rise .5s ease forwards; }
  .row .k { color: var(--ink-3); flex: none; width: 74px; }
  .row .v { color: var(--ink-2); }
  .row .v b { color: var(--ink); font-weight: 600; }
  .row:nth-child(1) { animation-delay: .15s } .row:nth-child(2) { animation-delay: .45s }
  .row:nth-child(3) { animation-delay: .75s } .row:nth-child(4) { animation-delay: 1.05s }
  .row:nth-child(5) { animation-delay: 1.35s } .row:nth-child(6) { animation-delay: 1.9s }
  @keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

  .verdict {
    margin-top: 14px; padding: 12px 14px;
    border: 1px solid var(--pass); background: var(--pass-soft);
    border-radius: 8px; color: var(--pass);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-family: var(--mono); font-size: 13px; font-weight: 600;
    opacity: 0; animation: rise .5s ease 2.3s forwards;
  }
  @media (prefers-reduced-motion: reduce) {
    .row, .verdict { animation: none; opacity: 1; }
    .btn:hover { transform: none; }
  }

  /* ── builds-for strip ───────────────────────────────────── */
  /* Social proof under the hero: every mark is a real project the fleet has
     shipped for, most of them ours — assets live in brand/builds-for/. */
  .builds { padding-block: clamp(36px, 5vw, 56px) 0; }
  .builds-cap {
    font-family: var(--mono); font-size: 12px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 20px;
  }
  .builds-row {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center;
    column-gap: clamp(22px, 3.4vw, 44px); row-gap: 16px;
  }
  .builds-row li {
    display: flex; align-items: center; gap: 9px;
    font-size: 14.5px; font-weight: 550; color: var(--ink-2);
    opacity: .78; transition: opacity .15s ease;
  }
  .builds-row li:hover { opacity: 1; }
  .builds-row img, .builds-row svg { height: 20px; width: auto; display: block; }
  .builds-row img[src$=".png"], .builds-row img[src$="polymode.svg"] { border-radius: 5px; }

  /* ── generic section ────────────────────────────────────── */
  .band { background: var(--band); border-block: 1px solid var(--line); }
  section { padding-block: clamp(64px, 8vw, 100px); }
  .head { margin-bottom: 48px; }
  .head p { margin-top: 16px; }

  /* ── the gate: three mechanisms ─────────────────────────── */
  .mechs { display: grid; gap: 18px; grid-template-columns: 1fr; }
  @media (min-width: 860px) { .mechs { grid-template-columns: repeat(3, 1fr); } }
  .mech {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: 24px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .mech h3 { margin: 0; }
  .mech p { font-size: 15px; color: var(--ink-2); margin: 0; max-width: none; }
  .mech .tag {
    align-self: flex-start; font-family: var(--mono); font-size: 11px;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent); background: var(--accent-soft);
    border: 1px solid var(--accent-ring); border-radius: 5px; padding: 3px 8px;
  }
  .mech code {
    font-family: var(--mono); font-size: 12.5px; color: var(--ink-3);
    border-top: 1px solid var(--line); padding-top: 12px; margin-top: 2px;
    display: block; white-space: pre-wrap;
  }

  /* ── the rope: how it works ─────────────────────────────── */
  .rope { position: relative; padding-left: 46px; display: grid; gap: 40px; }
  .rope::before {
    content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px;
    width: 2px; border-radius: 2px;
    background: linear-gradient(to bottom, var(--accent), var(--line) 82%, transparent);
  }
  .step { position: relative; }
  .step::before {
    content: ""; position: absolute; left: -41px; top: 4px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--ground); border: 2px solid var(--accent);
  }
  .step:last-child::before { border-color: var(--pass); background: var(--pass); }
  .step h3 { margin-bottom: 8px; }
  .step p { color: var(--ink-2); font-size: 15.5px; margin: 0; }
  .step .said { font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin-top: 10px; }

  /* Sections stacked inside one band shouldn't double their padding. */
  section + section { padding-top: clamp(40px, 5vw, 64px); }

  /* ── the loop ───────────────────────────────────────────── */
  .circuit { margin-top: 8px; }
  .circuit svg { width: 100%; height: auto; display: block; }
  .circuit .node { fill: var(--card); stroke: var(--line-strong); stroke-width: 1.2; }
  .circuit .node-gate { fill: var(--accent-soft); stroke: var(--accent); }
  .circuit .node-out  { fill: var(--pass-soft);   stroke: var(--pass); }
  .circuit .node-fix  { fill: var(--fail-soft);   stroke: var(--fail); }
  .circuit .lbl { font-family: var(--mono); font-size: 12px; fill: var(--ink); text-anchor: middle; }
  .circuit .lbl-gate { fill: var(--accent); font-weight: 600; }
  .circuit .lbl-out  { fill: var(--pass);   font-weight: 600; }
  .circuit .lbl-fix  { fill: var(--fail);   font-weight: 600; }
  .circuit .wire { stroke: var(--line-strong); stroke-width: 1.4; fill: none; }
  .circuit .wire-pass { stroke: var(--pass); }
  .circuit .wire-fail { stroke: var(--fail); }
  .circuit .edge { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-3); text-anchor: middle; }

  /* ── the outer loop: escalation, back to the session you already had open ──
     Dotted because it is the exception, and drawn in a neutral ink so it reads
     as a path OUT of the machine rather than another wire inside it.        */
  .circuit .wire-outer {
    stroke: var(--ink-3); stroke-width: 1.3; fill: none;
    stroke-dasharray: 2 5; stroke-linecap: round;
  }
  .circuit .node-you { fill: var(--ground); stroke: var(--ink-3); stroke-dasharray: 3 3; }
  .circuit .lbl-you  { fill: var(--ink-2); }

  /* Revealed on scroll where the browser supports a view timeline; everywhere
     else (and under reduced motion) it is simply always there. No JavaScript. */
  .circuit { view-timeline-name: --circuit; view-timeline-axis: block; }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .circuit .outer {
        opacity: 0;
        animation: outer-in linear both;
        animation-timeline: --circuit;
        animation-range: entry 55% cover 42%;
      }
    }
  }
  @keyframes outer-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  .circuit .edge-strong { font-size: 12px; fill: var(--ink); font-weight: 600; letter-spacing: .04em; }
  .circuit-note {
    margin: 14px auto 0; max-width: none; text-align: center;
    font-family: var(--mono); font-size: 12.5px; color: var(--ink-3);
  }

  .kickers {
    margin-top: 40px; display: grid; gap: 1px;
    background: var(--line); border: 1px solid var(--line);
    border-radius: 10px; overflow: hidden;
    grid-template-columns: 1fr;
  }
  @media (min-width: 760px) { .kickers { grid-template-columns: repeat(3, 1fr); } }
  .kicker {
    background: var(--card); padding: 20px 22px;
    font-family: var(--mono); font-size: 14px; color: var(--ink-2);
  }
  .kicker b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 5px; }
  .kicker.last { color: var(--accent); }
  .kicker.last b { color: var(--accent); }

  /* ── card zero ──────────────────────────────────────────── */
  .mutants {
    background: var(--card-raised); border: 1px solid var(--line);
    border-radius: 12px; overflow: hidden;
    font-family: var(--mono); font-size: 13px;
  }
  .mutants-bar {
    padding: 11px 14px; border-bottom: 1px solid var(--line);
    background: var(--card); color: var(--ink-3); font-size: 12px;
    display: flex; justify-content: space-between; gap: 10px;
  }
  .mut { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .mut .k { flex: 1; color: var(--ink-2); }
  .mut .n { flex: none; color: var(--ink); font-variant-numeric: tabular-nums; }
  .mut.kill .n { color: var(--pass); }
  .mut.live .n { color: var(--fail); }
  .mut.live .k { color: var(--fail); }
  .mut-verdict {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; background: var(--pass-soft);
    color: var(--pass); font-weight: 600;
  }

  /* ── serial vs fleet ────────────────────────────────────── */
  .compare { display: grid; gap: 18px; grid-template-columns: 1fr; }
  @media (min-width: 860px) { .compare { grid-template-columns: 1fr 1fr; } }
  .lane-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: 22px 24px 20px;
    display: flex; flex-direction: column; gap: 18px;
  }
  .lane-card.is-fleet { border-color: var(--accent-ring); background: var(--card-raised); }
  .lane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .lane-head h3 { margin: 0; }
  .lane-head .who { font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
  .tracks { display: flex; flex-direction: column; gap: 7px; }
  .track { display: flex; height: 26px; gap: 3px; }
  .seg {
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
    font-family: var(--mono); font-size: 11px; color: var(--ink-2);
    background: var(--line); border: 1px solid var(--line-strong);
    overflow: hidden; white-space: nowrap;
  }
  .is-fleet .seg { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent); }
  .lane-foot {
    border-top: 1px solid var(--line); padding-top: 14px;
    font-size: 14.5px; color: var(--ink-2); line-height: 1.5;
  }
  .lane-foot b { color: var(--ink); font-weight: 600; }
  .is-fleet .lane-foot b { color: var(--accent); }

  /* ── the load line ──────────────────────────────────────────────────────
     The answer to the only real objection to the fleet, drawn rather than
     asserted: lanes come over a sheave and JOIN the trunk. The one that
     didn't land is shown, not hidden — that is the whole point of it.     */
  .trunk-block { margin-top: 52px; }
  .trunk-block h3 { font-size: clamp(19px, 2.2vw, 23px); font-weight: 650; margin-bottom: 12px; }
  .trunk-block > p { font-size: 15.5px; color: var(--ink-2); }
  .trunk-block > p b { color: var(--ink); font-weight: 600; }

  .trunk { margin-top: 30px; }
  .trunk svg { width: 100%; height: auto; display: block; overflow: visible; }

  .trunk .rail { stroke: var(--line-strong); stroke-width: 2; fill: none; }
  .trunk .lane { stroke: var(--line-strong); stroke-width: 1.4; fill: none; }
  .trunk .commit { fill: var(--ink-3); }
  .trunk .card { fill: var(--ink-2); }

  /* Green joins the load line. Red reaches for it and doesn't arrive. */
  .trunk .rope-land { stroke: var(--pass); stroke-width: 1.7; fill: none; }
  .trunk .rope-lost {
    stroke: var(--fail); stroke-width: 1.6; fill: none;
    stroke-dasharray: 3 4; stroke-linecap: round;
  }
  .trunk .card-lost { fill: var(--ground); stroke: var(--fail); stroke-width: 1.8; }

  /* Where a card lands, there is a sheave. */
  .trunk .sheave-ring { fill: var(--ground); stroke: var(--accent); stroke-width: 1.8; }
  .trunk .sheave-pin  { fill: var(--accent); }

  .trunk .tlbl { font-family: var(--mono); font-size: 11px; fill: var(--ink-2); }
  .trunk .tlbl-dim  { fill: var(--ink-3); font-size: 10px; }
  .trunk .tlbl-lost { fill: var(--fail); }

  .trunk-block .circuit-note code { color: var(--ink); }

  /* ── epic decomposition + dependency chain ──────────────── */
  .split { display: grid; gap: 44px; grid-template-columns: 1fr; align-items: center; }
  @media (min-width: 940px) { .split { grid-template-columns: 1fr 1.05fr; gap: 56px; } }
  .split .head { margin-bottom: 0; }

  .chain {
    background: var(--card-raised); border: 1px solid var(--line);
    border-radius: 12px; overflow: hidden;
    font-family: var(--mono); font-size: 13px;
  }
  .chain-bar {
    padding: 11px 14px; border-bottom: 1px solid var(--line);
    background: var(--card); color: var(--ink-3); font-size: 12px;
    display: flex; justify-content: space-between; gap: 10px;
  }
  .chain-bar b { color: var(--ink); font-weight: 600; }
  .link {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
  }
  .link:last-child { border-bottom: 0; }
  .link .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
  .link .id { flex: none; color: var(--ink-3); width: 34px; }
  .link .what { flex: 1; color: var(--ink); min-width: 0; }
  .link .state { flex: none; font-size: 12px; color: var(--ink-3); text-align: right; }
  .link.done   .dot { background: var(--pass); }
  .link.done   .state { color: var(--pass); }
  .link.run    .dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .link.run    .state { color: var(--accent); }
  .link.wait   .dot { background: transparent; border: 1.5px solid var(--line-strong); }
  .link.wait   .what { color: var(--ink-3); }

  /* ── the night log ──────────────────────────────────────── */
  .night {
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--card-raised); overflow: hidden;
    font-family: var(--mono); font-size: 13.5px;
  }
  .night-row {
    display: flex; gap: 18px; align-items: baseline;
    padding: 13px 20px;
    border-bottom: 1px solid var(--line);
  }
  .night-row:last-child { border-bottom: 0; }
  .night-row .t { flex: none; color: var(--ink-3); font-variant-numeric: tabular-nums; width: 52px; }
  .night-row .e { color: var(--ink-2); }
  .night-row .e b { color: var(--ink); font-weight: 600; }
  .night-row.wake { background: var(--pass-soft); }
  .night-row.wake .t { color: var(--pass); }
  .night-row.wake .e, .night-row.wake .e b { color: var(--pass); font-weight: 600; }
  @media (max-width: 560px) {
    .night-row { flex-direction: column; gap: 4px; }
    .night-row .t { width: auto; }
  }

  /* ── surfaces ───────────────────────────────────────────── */
  .surfaces { display: grid; gap: 18px; grid-template-columns: 1fr; }
  @media (min-width: 860px) { .surfaces { grid-template-columns: repeat(3, 1fr); } }
  .surface {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: 24px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .surface-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .surface h3 { margin: 0; }
  .surface p { font-size: 15px; color: var(--ink-2); margin: 0; max-width: none; }
  .surface pre {
    font-family: var(--mono); font-size: 12.5px; color: var(--ink-3);
    border-top: 1px solid var(--line); padding-top: 12px; margin: 2px 0 0;
    overflow-x: auto;
  }
  .soon {
    flex: none; font-family: var(--mono); font-size: 10.5px;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-3); border: 1px solid var(--line-strong);
    border-radius: 5px; padding: 3px 7px;
  }
  .surface.is-soon { opacity: .72; }

  /* ── proof / receipts ───────────────────────────────────── */
  .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  @media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
  .stat { background: var(--card); padding: 24px 22px; display: flex; flex-direction: column; gap: 6px; }
  .stat .n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
  .stat .l { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
  .stat.is-fail .n { color: var(--fail); }
  .stat.is-pass .n { color: var(--pass); }

  .honest {
    margin-top: 28px; border: 1px solid var(--line); border-left: 3px solid var(--fail);
    background: var(--fail-soft); border-radius: 8px; padding: 20px 22px;
  }
  .honest p { margin: 0; font-size: 15.5px; color: var(--ink-2); max-width: var(--measure); }
  .honest strong { color: var(--ink); font-weight: 600; }

  /* ── closing cta ────────────────────────────────────────── */
  .close { text-align: center; }
  .close p, .close h2 { margin-inline: auto; }
  .close .hero-cta { justify-content: center; }
  .close .hero-note { text-align: center; }

  /* ── footer ─────────────────────────────────────────────── */
  footer {
    border-top: 1px solid var(--line);
    padding-block: 30px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
    font-size: 13.5px; color: var(--ink-3);
  }
  footer .mono { font-size: 12.5px; }

  /* ── the hand-off ───────────────────────────────────────────────────────
     One constant action, five different motives. The action is PINNED and the
     reasons run past it: the rotation made spatial, so the reader sets the pace
     and every reason stays legible instead of one flickering by.            */
  .handoff { display: grid; gap: 40px; align-items: start; }
  .handoff h2 { margin-bottom: 16px; }
  .handoff-sub { color: var(--ink-3); font-size: 15px; }

  .reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .reasons li {
    display: grid; gap: 6px;
    padding: 26px 0;
    border-top: 1px solid var(--line);
  }
  .reasons li:last-child { border-bottom: 1px solid var(--line); }
  .reasons b {
    font-size: clamp(19px, 2.3vw, 25px); font-weight: 650;
    letter-spacing: -0.018em; line-height: 1.25;
    text-wrap: balance;
  }
  /* The economic reason carries the accent — it is the one that bridges to pricing. */
  .reasons li:last-child b { color: var(--accent); }
  .reasons span { color: var(--ink-2); font-size: 15.5px; max-width: var(--measure); }

  @media (min-width: 880px) {
    .handoff { grid-template-columns: 0.82fr 1.18fr; gap: 56px; }
    .handoff-lead { position: sticky; top: 72px; }
    .reasons li:first-child { border-top: none; padding-top: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .handoff-lead { position: static; }
  }

  /* ── pricing ───────────────────────────────────────────────────────────── */
  .plans { display: grid; gap: 20px; grid-template-columns: 1fr; }
  @media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }

  .plan {
    display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--card); padding: 26px 24px 24px;
  }
  .plan-lead { border-color: var(--accent-ring); background: var(--card-raised); }
  .plan .tier { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
  .plan-lead .tier { color: var(--accent); }
  .plan .price {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 34px; font-weight: 600; letter-spacing: -0.03em;
    margin-top: 12px; line-height: 1.1;
  }
  .plan .price small { font-size: 14px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
  .plan .who { color: var(--ink-2); font-size: 15px; margin-top: 10px; min-height: 3em; }
  .plan ul { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
  .plan li { font-size: 14.5px; color: var(--ink-2); display: flex; gap: 9px; align-items: baseline; }
  .plan li::before { content: "—"; color: var(--ink-3); flex: none; }
  .plan li b { color: var(--ink); font-weight: 600; }
  .plan .btn { margin-top: 24px; width: 100%; }
  .plan-foot { margin-top: auto; }

  /* the refusal list — the trust signal, so it gets the page's boldness */
  .refusals { display: grid; gap: 0; margin-top: 8px; }
  .refusals div {
    display: flex; gap: 14px; align-items: baseline;
    padding: 15px 0; border-top: 1px solid var(--line);
    font-size: 15.5px; color: var(--ink-2);
  }
  .refusals div:last-child { border-bottom: 1px solid var(--line); }
  .refusals .mark {
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    flex: none; width: 62px; letter-spacing: 0.04em;
  }
  .refusals .no  { color: var(--pass); }
  .refusals .yes { color: var(--ink-3); }
  .refusals b { color: var(--ink); font-weight: 600; }

  /* the reproduce receipt — evidence, so it is mono */
  .repro { margin-top: 26px; }
  .repro-body { padding: 16px 16px 18px; font-family: var(--mono); font-size: 13px; line-height: 1.85; }
  .repro-body .cmd { color: var(--ink); }
  .repro-body .cmd .sig { color: var(--ink-3); }
  .repro-body .out { color: var(--fail); }
  .repro-body .note { color: var(--ink-3); margin-top: 10px; font-size: 12.5px; }

  .faq { display: grid; gap: 28px; }
  .faq h3 { margin-bottom: 8px; }
  .faq p { color: var(--ink-2); font-size: 15.5px; max-width: var(--measure); }

  /* Enterprise strip — un-carded on purpose. It spans the width the three plans
     share, reading as a shelf beneath the menu rather than a fourth item on it. */
  .enterprise {
    margin-top: 20px;
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 18px 36px;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--card); padding: 24px 26px;
  }
  .enterprise .ent-copy { display: grid; gap: 8px; }
  .enterprise .tier { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
  .enterprise p { margin: 0; font-size: 15px; color: var(--ink-2); max-width: 64ch; }
  .enterprise p b { color: var(--ink); font-weight: 600; }
  .enterprise .btn { flex: none; }

  /* ── the waiting list ───────────────────────────────────────
     The site's only form, and the page's primary call to action. It is a plain
     cross-origin <form> POST because this page ships no JavaScript: the app
     answers with a redirect to thanks.html, so the whole funnel works with
     scripting off. Laid out as a single row on desktop and a stack on narrow
     screens, because a three-control row is the shape that reads as "one
     action" rather than as a form to fill in. */
  /* Sized against the CONTAINER, not the viewport: this form sits in the hero's
     narrow left column on one page and full-width in the closing section on
     another, so a viewport breakpoint gets one of the two wrong every time —
     it clipped the select in the hero at desktop widths. */
  .waitlist { display: grid; gap: 10px; margin-top: 26px; max-width: 44rem; container-type: inline-size; }
  .waitlist-row { display: grid; gap: 10px; grid-template-columns: 1fr; }
  /* Mid: the two inputs pair up and the button takes its own full-width line. */
  @container (min-width: 400px) {
    .waitlist-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .waitlist-row button { grid-column: 1 / -1; }
  }
  /* Wide enough for all three to read as one action. */
  @container (min-width: 620px) {
    .waitlist-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; }
    .waitlist-row button { grid-column: auto; }
  }

  .waitlist input[type="email"], .waitlist input[type="text"], .waitlist select {
    height: 42px; padding-inline: 14px;
    border-radius: 8px; border: 1px solid var(--line-strong);
    background: var(--card); color: var(--ink);
    font-family: var(--sans); font-size: 15px; width: 100%;
    appearance: none;
  }
  .waitlist input::placeholder { color: var(--ink-3); }
  .waitlist input:focus-visible, .waitlist select:focus-visible {
    outline: 2px solid var(--accent-ring); outline-offset: 2px; border-color: var(--accent-ring);
  }
  /* The native arrow disappears with `appearance:none`; draw one back so the
     select still reads as a select. */
  .waitlist select {
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                      linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
    background-position: right 17px center, right 12px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
  }
  .waitlist select option { background: var(--card); color: var(--ink); }
  .waitlist button { width: 100%; justify-content: center; }
  @media (min-width: 620px) { .waitlist button { width: auto; } }

  /* The optional free-text field. Written at the same specificity as the input
     rule above and placed after it, so it can quieten those styles without
     !important. Deliberately lighter than the two controls it sits under: it is
     research, and must not read as another thing you have to fill in first. */
  .waitlist input[type="text"].waitlist-note-input {
    font-size: 14px; background: transparent; border-style: dashed;
  }
  .waitlist input[type="text"].waitlist-note-input:focus-visible {
    background: var(--card); border-style: solid;
  }

  .waitlist-note { font-size: 13.5px; color: var(--ink-3); margin: 0; }
  .waitlist-note b { color: var(--ink-2); font-weight: 600; }

  /* Prose links. Every anchor on the site used to be a .btn or a nav item, so
     the first inline link rendered in the browser's default blue — the one
     colour the palette does not contain. */
  .waitlist-note a, .hero-note a, .lede a {
    color: var(--accent); text-decoration: underline;
    text-underline-offset: 2px; text-decoration-thickness: 1px;
  }
  .waitlist-note a:hover, .hero-note a:hover, .lede a:hover { color: var(--ink); }

  /* The honeypot. Not `display:none` — some bots skip hidden fields, and some
     screen readers would still reach a merely off-screen one, so it is removed
     from the accessibility tree AND from the tab order as well as from view. */
  .waitlist .hp {
    position: absolute; left: -9999px; width: 1px; height: 1px;
    overflow: hidden; opacity: 0; pointer-events: none;
  }