/* Graphban — product marketing + deepdive. Dark-committed (the product is dark-native). */
:root {
  --bg: #0a0c0e;
  --surface: #0d1114;
  --surface-2: #12171b;
  --surface-3: #171c21;
  --line: #1a1f24;
  --line-2: #232a30;
  --line-strong: #2c353c;
  --ink: #e6e9ec;
  --ink-2: #c7ccd1;
  --muted: #8b949e;
  --faint: #5c656e;
  --lime: #c6f24e;
  --lime-hi: #d8ff74;
  --lime-dim: #9db83e;
  --purple: #a78bfa;
  --purple-2: #c9b8ff;
  --st-done: #5fd07a;
  --st-blocked: #ff6b6b;
  --st-next: #7ca2ff;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", "Roboto Mono", monospace;
  --maxw: 1000px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body {
  margin: 0; color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1200px 620px at 82% -10%, rgba(167,139,250,0.07), transparent 60%),
    radial-gradient(1000px 560px at 4% 106%, rgba(198,242,78,0.055), transparent 55%),
    var(--bg);
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }
a { color: var(--lime-dim); text-decoration: none; }
a:hover { color: var(--lime); }
::selection { background: var(--lime); color: var(--bg); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 5px; }
code { font-family: var(--mono); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(12px);
  background: rgba(10,12,14,0.72); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 22px; height: 58px; }
.mark { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.mark:hover { color: var(--ink); }
.logo { width: 27px; height: 27px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: linear-gradient(150deg, #c6f24e, #8fd12e); box-shadow: 0 0 0 1px rgba(198,242,78,.35), 0 5px 16px rgba(198,242,78,.16); }
.mark .sub { font-family: var(--mono); font-size: 9px; letter-spacing: .6px; text-transform: uppercase; color: var(--faint); display: block; line-height: 1; margin-top: 2px; }
.nav .spacer { flex: 1; }
.nav a.navlink { color: var(--muted); font-size: 14px; }
.nav a.navlink:hover { color: var(--ink); }
/* Was an inline style, which outranks the stylesheet — so the mobile rule that hides
   navlinks could not touch it and GitHub stayed in row 1, squeezing the mark against
   the CTA. Declared here, before that media query, so source order lets it win. */
.nav a.navlink.gh { display: inline-flex; align-items: center; gap: 6px; }
.nav .navlink.back { font-family: var(--mono); font-size: 12px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; border-radius: 10px;
  padding: 11px 18px; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: transform .12s ease, background .15s ease, border-color .15s ease; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--lime); color: #0a0c0e; }
.btn-primary:hover { background: var(--lime-hi); transform: translateY(-1px); color: #0a0c0e; }
.btn-ghost { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--line-strong); transform: translateY(-1px); color: var(--ink); }
.btn.sm { padding: 8px 13px; font-size: 13.5px; }

/* Eyebrow / headings */
.eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lime-dim); margin: 0 0 14px; }
h1 { font-size: clamp(38px, 6.6vw, 66px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 760; margin: 0 0 22px; text-wrap: balance; }
h1 em { font-style: normal; color: var(--lime); }
h2 { font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -0.02em; font-weight: 700; margin: 0 0 16px; text-wrap: balance; }
h3 { font-size: 16px; font-weight: 650; margin: 0 0 6px; letter-spacing: -0.01em; }
p { margin: 0 0 16px; color: var(--ink-2); }
.section-lede { color: var(--muted); font-size: 17.5px; max-width: 62ch; }
strong { color: var(--ink); font-weight: 640; }
.inline-code { font-family: var(--mono); font-size: .86em; color: var(--purple-2); background: rgba(167,139,250,0.1); border: 1px solid rgba(167,139,250,0.16); padding: 1px 5px; border-radius: 5px; }

section { padding: 66px 0; }
.divider { border-top: 1px solid var(--line); }

/* Hero */
.hero { padding: 84px 0 30px; }
.hero .lede { font-size: clamp(17px, 2.1vw, 21px); color: var(--ink-2); max-width: 56ch; margin: 0 0 30px; }
.btnrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-meta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.pill { font-family: var(--mono); font-size: 11.5px; color: var(--muted); border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 8px; padding: 5px 10px; font-variant-numeric: tabular-nums; }
.pill b { color: var(--ink); font-weight: 600; }

/* Terminal card */
.terminal { border: 1px solid var(--line-2); background: var(--surface); border-radius: 13px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.4); margin-top: 34px; }
.terminal .bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.terminal .bar .dot { width: 10px; height: 10px; border-radius: 50%; }
.terminal .bar .t { margin-left: 8px; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.terminal pre { margin: 0; padding: 18px 18px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.terminal .c-key { color: var(--lime); } .terminal .c-str { color: var(--purple-2); } .terminal .c-cm { color: var(--faint); } .terminal .c-fn { color: var(--st-next); }

/* The loop */
.loop { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-top: 8px; }
.loop .step { flex: 1 1 150px; min-width: 150px; border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 12px; padding: 14px; position: relative; }
.loop .step .op { font-family: var(--mono); font-size: 12.5px; color: var(--lime); margin-bottom: 4px; }
.loop .step .d { font-size: 12.5px; color: var(--muted); }
.loop .arrow { align-self: center; color: var(--faint); flex: none; }
.loop .step.accent { border-color: rgba(198,242,78,.35); }
.loop .step.purple { border-color: rgba(167,139,250,.35); }
.loop .step.purple .op { color: var(--purple-2); }
.loopback { margin-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--faint); display: flex; align-items: center; gap: 8px; }
.loopback svg { color: var(--lime-dim); }

/* Pillars */
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.pillar { border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 14px; padding: 22px; }
.pillar .k { font-family: var(--mono); font-size: 11px; color: var(--lime); border: 1px solid rgba(198,242,78,.3); border-radius: 6px; padding: 3px 8px; display: inline-block; margin-bottom: 12px; }
.pillar h3 { font-size: 17px; margin-bottom: 8px; }
.pillar p { font-size: 14px; color: var(--muted); margin: 0; }
.pillar p b { color: var(--ink-2); }

/* Feature list */
.feats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.feat { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 18px; }
.feat .ic { color: var(--lime-dim); margin-bottom: 10px; }
.feat h3 { font-size: 15px; }
.feat p { font-size: 13.5px; color: var(--muted); margin: 0; }

/* Signup */
.signup { border: 1px solid var(--line-2); border-radius: 18px; padding: 40px; background:
  radial-gradient(600px 300px at 100% 0%, rgba(198,242,78,0.06), transparent 60%), var(--surface); }
.signup h2 { margin-bottom: 10px; }
.signup .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; max-width: 480px; }
.signup input { flex: 1 1 240px; height: 46px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); padding: 0 15px; font-size: 15px; font-family: var(--sans); outline: none; }
.signup input.wide { flex-basis: 100%; }
.signup input:focus { border-color: var(--line-strong); }
.signup .note { font-size: 12.5px; color: var(--faint); margin-top: 14px; }
.signup .thanks { display: none; margin-top: 18px; padding: 16px 18px; border: 1px solid rgba(198,242,78,.3); background: rgba(198,242,78,0.06); border-radius: 12px; color: var(--ink-2); }
.signup .thanks strong { color: var(--lime); }

/* Deepdive-specific */
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.toc a { font-family: var(--mono); font-size: 12px; color: var(--muted); border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 8px; padding: 5px 10px; }
.toc a:hover { color: var(--ink); border-color: var(--line-strong); }
.callout { border-left: 2px solid var(--lime); background: rgba(198,242,78,0.05); border-radius: 0 11px 11px 0; padding: 16px 18px; margin: 20px 0; }
.callout h3 { color: var(--lime); }
.callout p { color: var(--ink-2); margin: 0; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: 13px; margin: 8px 0; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 13.5px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--faint); background: var(--surface-2); font-weight: 500; }
tbody tr:last-child td { border-bottom: none; }
td.mono { font-family: var(--mono); font-size: 12.5px; color: var(--purple-2); white-space: nowrap; }
td.rev { font-family: var(--mono); color: var(--lime-dim); white-space: nowrap; }
.grouprow td { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--lime-dim); background: var(--surface); }
.ro, .wr { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.ro { color: var(--faint); } .wr { color: var(--lime-dim); }
ul.tight { margin: 0 0 16px; padding-left: 20px; color: var(--ink-2); }
ul.tight li { margin: 6px 0; }
ul.tight li b { color: var(--ink); }

/* ── Nav rail (the four mechanism pages, read as one item) ───────────── */
.navrail { display: flex; align-items: center; gap: 10px; }
.navrail a { font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.navrail a:hover { color: var(--ink); }
.navrail a + a::before { content: "·"; color: var(--faint); margin-right: 10px; }
.navrail a[aria-current="page"] { color: var(--lime); }

/* ── Responsive toggles ──────────────────────────────────────────────
   SVG elements honour display:none, which is what makes the
   degrade-by-subtraction figures work. */
.only-sm { display: none; }
@media (max-width: 720px) { .hide-sm { display: none !important; } .only-sm { display: initial; } }

/* ── Grids ───────────────────────────────────────────────────────────
   The bare grids .pillars and .feats each re-declare; new sections use
   these and leave those two untouched as skins. */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wrap.wide { max-width: 1180px; }

/* ── Figures ─────────────────────────────────────────────────────────
   Every figcaption states the single idea. If a caption can't be written
   in one sentence, the figure is doing two jobs and should be split. */
.fig { border: 1px solid var(--line-2); background: var(--surface); border-radius: 14px; padding: 22px; margin: 26px 0; }
.fig > svg { width: 100%; height: auto; display: block; }
.fig figcaption { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.fig figcaption b { color: var(--ink-2); font-weight: 620; }
.fig.scroll { overflow-x: auto; }
.fig.plain { border: none; background: none; padding: 0; }
/* Wide figure / tall twin swap. These must out-specify `.fig > svg`, which sets
   display:block on every figure svg — a bare `.fig-tall { display:none }` loses
   to it and both variants render at once. */
.fig > svg.fig-tall { display: none; }
@media (max-width: 720px) {
  .fig > svg.fig-wide { display: none; }
  .fig > svg.fig-tall { display: block; }
}

/* ── SVG diagram tokens ──────────────────────────────────────────────
   The colour law. Purple = the codebase. Lime = the agent. Blue = the
   human. Red = a refusal. Hatch = an absence. Green is the VILLAIN and
   appears exactly twice on the site — a page whose thesis is "green
   means nothing" cannot spend green on itself.
   Diagrams style themselves from here, never from inline fill=/stroke=,
   which is what keeps seventeen hand-built figures re-themeable in one
   edit. */
.sv-node { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1.5; }
.sv-node.code    { fill: rgba(167,139,250,.12); stroke: var(--purple); }
.sv-node.agent   { fill: rgba(198,242,78,.12);  stroke: var(--lime); }
.sv-node.human   { fill: rgba(124,162,255,.12); stroke: var(--st-next); }
.sv-node.absent  { fill: url(#absent); stroke: var(--st-blocked); stroke-dasharray: 4 3; }
.sv-node.stale   { fill: var(--surface-2); stroke: var(--faint); stroke-dasharray: 4 3; }
.sv-node.villain { fill: rgba(95,208,122,.16); stroke: var(--st-done); }
.sv-node.refuse  { fill: rgba(255,107,107,.09); stroke: var(--st-blocked); }
.sv-edge { fill: none; stroke: var(--line-strong); stroke-width: 2; marker-end: url(#arrow); }
.sv-edge.agent   { stroke: var(--lime-dim); marker-end: url(#arrow-agent); }
.sv-edge.refuse  { stroke: var(--st-blocked); marker-end: url(#arrow-refuse); }
.sv-edge.derived { stroke: var(--purple); stroke-dasharray: 5 4; marker-end: url(#arrow-code); }
.sv-edge.human   { stroke: var(--st-next); stroke-dasharray: 6 4; marker-end: url(#arrow-human); }
.sv-edge.ghost   { stroke: var(--faint); stroke-dasharray: 3 3; stroke-width: 1.5; marker-end: none; }
.sv-edge.bare    { marker-end: none; }
.sv-lbl { font-family: var(--mono); font-size: 18px; fill: var(--muted); }
.sv-lbl.key   { fill: var(--lime); }
.sv-lbl.code  { fill: var(--purple-2); }
.sv-lbl.human { fill: var(--st-next); }
.sv-lbl.warn  { fill: var(--st-blocked); }
.sv-lbl.dim   { fill: var(--faint); }
.sv-lbl.ink   { fill: var(--ink-2); }
.sv-lbl.sans  { font-family: var(--sans); }
.sv-lbl.big   { font-size: 23px; fill: var(--ink); }
.sv-lbl.mid   { font-size: 20px; }
.sv-lbl.end   { text-anchor: end; }
.sv-lbl.ctr   { text-anchor: middle; }
.sv-track { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; }
.sv-gate   { stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; }
.sv-stop   { stroke: var(--st-blocked); stroke-width: 4.5; stroke-linecap: round; }
.sv-strike { stroke: var(--st-blocked); stroke-width: 2.5; stroke-linecap: round; }
.sv-tx     { fill: none; stroke: var(--lime); stroke-width: 1.5; stroke-dasharray: 7 5; opacity: .7; }
.sv-panel  { fill: rgba(255,255,255,.014); stroke: var(--line); stroke-width: 1.5; }

/* ── Signature block: what a tool does, and what it refuses ─────────── */
.sig { border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 11px; padding: 14px 16px; margin: 20px 0; font-family: var(--mono); font-size: 13px; line-height: 1.6; }
.sig .fn { color: var(--lime); }
.sig .ar { color: var(--ink-2); }
.sig .rf { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--st-blocked); }
.sig .rf b { color: var(--st-blocked); font-weight: 600; }
.sig .ok { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--lime-dim); }

/* ── Inline state chips — share the .sv-* palette exactly, which is what
      stops prose and diagrams drifting apart within a week. ─────────── */
.state { font-family: var(--mono); font-size: 11.5px; border-radius: 6px; padding: 2px 7px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.state.ok       { color: var(--lime); border-color: rgba(198,242,78,.32); background: rgba(198,242,78,.07); }
.state.deferred { color: var(--st-next); border-color: rgba(124,162,255,.32); }
.state.absent   { color: var(--st-blocked); border-color: rgba(255,107,107,.3); background: rgba(255,107,107,.06); }
.state.refused  { color: var(--st-blocked); border-color: rgba(255,107,107,.4); background: rgba(255,107,107,.09); }
.state.stale    { color: var(--faint); border-style: dashed; }
.state.code     { color: var(--purple-2); border-color: rgba(167,139,250,.28); }

/* ── Callout variants (extensions, not a fork) ───────────────────────── */
.callout.refuse { border-left-color: var(--st-blocked); background: rgba(255,107,107,0.05); }
.callout.refuse h3 { color: var(--st-blocked); }
.callout.human { border-left-color: var(--st-next); background: rgba(124,162,255,0.05); }
.callout.human h3 { color: var(--st-next); }
.callout.quiet { border-left-color: var(--line-strong); background: transparent; }
.callout.quiet p { color: var(--muted); font-size: 14px; }

/* ── Ladder (independence, promotion) ────────────────────────────────── */
.ladder { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; counter-reset: rung; }
.rung { border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 11px; padding: 13px 16px; display: flex; gap: 14px; align-items: baseline; }
.rung::before { counter-increment: rung; content: counter(rung); font-family: var(--mono); font-size: 11px; color: var(--faint); flex: none; }
.rung .w { font-family: var(--mono); font-size: 13px; color: var(--lime); }
.rung .d { font-size: 13.5px; color: var(--muted); }
.rung.refuse { border-color: rgba(255,107,107,.3); background: rgba(255,107,107,.05); }
.rung.refuse .w { color: var(--st-blocked); }
.rung.refuse::before { content: "✕"; color: var(--st-blocked); }

/* ── Stat tiles ──────────────────────────────────────────────────────── */
.stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0; }
.stat { flex: 1 1 150px; border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 12px; padding: 16px 18px; }
.stat .n { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat .n.warn { color: var(--st-blocked); }
.stat .n.agent { color: var(--lime); }
.stat .l { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.stat .as { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-top: 4px; }

/* ── The seams list — a list, not a table, because the one section that
      most needs reading on a phone must not scroll sideways. ────────── */
.seams { list-style: none; margin: 20px 0 0; padding: 0; }
.seams li { border-top: 1px solid var(--line); padding: 15px 0; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.seams li:last-child { border-bottom: 1px solid var(--line); }
.seams .tag { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .7px; border: 1px solid var(--line-2); border-radius: 5px; padding: 2px 7px; flex: none; color: var(--muted); }
.seams .tag.unrun   { color: var(--st-blocked); border-color: rgba(255,107,107,.35); }
.seams .tag.filed   { color: var(--st-next); border-color: rgba(124,162,255,.35); }
.seams .tag.partial { color: var(--lime-dim); border-color: rgba(198,242,78,.3); }
/* A deliberate limit, not a defect. Muted on purpose — it should not read as a
   promise that it will change. */
.seams .tag.wontfix { color: var(--faint); border-color: var(--line-2); }
.seams .tag.none    { color: var(--faint); border-style: dashed; }
.seams .b { flex: 1 1 320px; font-size: 14.5px; color: var(--ink-2); }
.seams .b b { color: var(--ink); }
.seams .b .src { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-top: 5px; }

/* ── Sub-page furniture ──────────────────────────────────────────────── */
.thesis-line { border-left: 2px solid var(--lime); padding: 4px 0 4px 16px; font-size: 18px; color: var(--ink); margin: 0 0 26px; max-width: 58ch; }
.thesis-line b { color: var(--lime); font-weight: 600; }
.nextprev { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 26px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.nextprev a { font-size: 14.5px; }
.nextprev .k { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--faint); display: block; }
.nextprev .spacer { flex: 1; }

/* ── Two postures (a thin skin over .loop — inherits its arrow rotation) */
.gates { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.gate { flex: 1 1 160px; border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 12px; padding: 14px; }
.gate .op { font-family: var(--mono); font-size: 12.5px; color: var(--lime); margin-bottom: 6px; }
.gate .d { font-size: 12.5px; color: var(--muted); }
.gate .n1 { font-size: 12px; color: var(--ink-2); margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.gate .n1 b { color: var(--lime-dim); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; display: block; margin-bottom: 3px; }
.posture { border: 1px solid var(--line-2); background: var(--surface); border-radius: 13px; padding: 18px 20px; }
.posture h3 { color: var(--ink); font-size: 15.5px; }
.posture p { font-size: 13.5px; color: var(--muted); margin: 0; }

/* ── Legend (the code-graph key) ─────────────────────────────────────── */
.legend { display: flex; flex-direction: column; gap: 9px; }
.legend .h { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--lime-dim); margin-bottom: 3px; }
.legend .row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.legend .sw { width: 22px; height: 14px; border-radius: 4px; flex: none; }

/* ── Misc ────────────────────────────────────────────────────────────── */
.badge { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .7px; border-radius: 6px; padding: 3px 9px; border: 1px solid var(--line-2); color: var(--muted); }
.badge.beta { color: var(--st-next); border-color: rgba(124,162,255,.4); background: rgba(124,162,255,.06); }
.terminal.term-tight { margin-top: 0; }
.tablewrap.narrow table { min-width: 0; }
.stale-note { display: none; }
body.stale .stale-note { display: block; }
.stale-note .asof { font-family: var(--mono); color: var(--ink-2); }

footer { border-top: 1px solid var(--line); padding: 40px 0; margin-top: 40px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; color: var(--muted); font-size: 14px; }
footer .spacer { flex: 1; }
footer a { color: var(--muted); } footer a:hover { color: var(--ink); }
footer .mono { font-family: var(--mono); font-size: 12px; color: var(--faint); }

@media (max-width: 720px) {
  .pillars, .feats, .grid2, .grid3 { grid-template-columns: 1fr; }
  .loop .arrow { transform: rotate(90deg); }
  .hero { padding-top: 56px; }
  .signup { padding: 28px 22px; }
  section { padding: 48px 0; }
  .fig { padding: 14px; margin: 20px 0; }

  /* Two-row nav. The old rule hid every navlink, which on a six-page site
     made the sub-pages unreachable from a phone. Row 1 is the mark and the
     CTA; row 2 is the rail, scrollable. No JS. */
  .nav .wrap { height: auto; min-height: 58px; flex-wrap: wrap; gap: 0 14px; padding-top: 11px; }
  .nav .spacer { display: none; }
  .nav a.navlink:not(.back) { display: none; }
  .nav .mark { margin-right: auto; }
  .navrail { flex-basis: 100%; order: 9; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding: 9px 0 10px; margin-top: 9px; border-top: 1px solid var(--line); }
  .navrail::-webkit-scrollbar { display: none; }
  .navrail { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
             mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }

  .stat { flex-basis: 100%; }
  .stat .n { font-size: 29px; }
  .thesis-line { font-size: 16.5px; }
}

/* ---- What's new -------------------------------------------------------------
   Reads graphban/changelog.json. Same posture as facts.json: if the fetch fails
   the trigger hides itself rather than opening an empty dialog, because a
   "What's new" that opens onto nothing is worse than one that isn't there.
   Uses <dialog>, so Escape, focus containment and the backdrop are the
   platform's job rather than ours. */
.wn-trigger { position: relative; }
.wn-trigger[hidden] { display: none; }
.wn-dot {
  position: absolute; top: -2px; right: -8px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--lime);
}
.wn {
  width: min(620px, calc(100vw - 32px)); max-height: min(78vh, 720px);
  padding: 0; border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--surface); color: var(--ink);
}
.wn::backdrop { background: rgba(6, 8, 10, .72); backdrop-filter: blur(3px); }
.wn-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface); border-radius: 14px 14px 0 0;
}
.wn-head h2 { font-size: 17px; margin: 0; letter-spacing: -.01em; }
.wn-head .sub { color: var(--faint); font-family: var(--mono); font-size: 11.5px; }
.wn-close {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 20px; line-height: 1; padding: 2px 6px;
}
.wn-close:hover { color: var(--ink); }
.wn-body { overflow-y: auto; padding: 6px 22px 20px; }
.wn-entry { padding: 16px 0; border-bottom: 1px solid var(--line); }
.wn-entry:last-child { border-bottom: 0; }
.wn-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.wn-date { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.wn-tag {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--muted);
}
.wn-tag[data-tag="fleet"]   { color: var(--lime-dim); border-color: #3d4a1f; }
.wn-tag[data-tag="graph"]   { color: var(--purple); border-color: #3b3357; }
.wn-tag[data-tag="fix"]     { color: var(--st-next); border-color: #2c3a5c; }
.wn-tag[data-tag="proof"]   { color: var(--st-done); border-color: #24462f; }
.wn-tag[data-tag="honesty"] { color: var(--ink-2); border-color: var(--line-strong); }
.wn-tag[data-tag="memory"]  { color: var(--purple); border-color: #3b3357; }
.wn-tag[data-tag="run"]     { color: var(--st-done); border-color: #24462f; }
.wn-entry h3 { font-size: 14.5px; margin: 0 0 5px; letter-spacing: -.005em; }
.wn-entry p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--ink-2); }
.wn-foot {
  padding: 14px 22px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--faint);
}
.wn-foot a { color: var(--muted); }
@media (max-width: 560px) { .wn-head, .wn-body, .wn-foot { padding-left: 16px; padding-right: 16px; } }

/* ── The Product menu ────────────────────────────────────────────────
      Six feature pages sat flat in the rail and it read as a sitemap
      rather than a choice. CSS only: `:focus-within` keeps it operable
      from the keyboard, and a `<details>` would animate its own marker
      and close on the first click inside. Hover OR focus opens it, so a
      pointer and a tab key reach the same menu. */
.menu { position: relative; display: inline-flex; align-items: center; }
.menu > summary, .menu > .menu-label {
  color: var(--muted); font-size: 14px; cursor: default; display: inline-flex;
  align-items: center; gap: 5px; list-style: none; padding: 6px 0;
}
.menu:hover > .menu-label, .menu:focus-within > .menu-label { color: var(--ink); }
.menu-label::after { content: "▾"; font-size: 10px; color: var(--faint); }
.menu-items {
  position: absolute; top: 100%; left: -14px; min-width: 208px; padding: 7px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  display: flex; flex-direction: column; gap: 1px;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s, transform .12s;
}
.menu:hover .menu-items, .menu:focus-within .menu-items { opacity: 1; visibility: visible; transform: none; }
.menu-items a { padding: 8px 11px; border-radius: 8px; font-size: 13.5px; color: var(--ink-2); }
.menu-items a:hover, .menu-items a:focus-visible { background: var(--surface-3); color: var(--ink); }
.menu-items a .d { display: block; font-size: 11.5px; color: var(--faint); margin-top: 1px; }
/* The menu is a pointer/keyboard affordance; on a phone the rail already
   lists the pages, so it would be a second copy that opens on tap. */
@media (max-width: 720px) { .menu { display: none; } }