/* ═══════════════════════════════════════════════════════════════════════════════════════
   MODELOMETER, design system v5 · "The Record"
   Warm ivory ground, warm ink, and Urbanist across the whole type system (weight and tracking
   carry the hierarchy, for consistency with the wider brand). One governing rule: colour is
   reserved for DATA, so the only saturated marks on a page are the measurements themselves.
   The chrome is warm monochrome
   with a single brass accent used sparingly. Light and print first (the attestation PDF is the
   canonical artifact). Zero libraries; motion is GPU-composited and reduced-motion-safe.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── typeface: Urbanist (one geometric-sans family across the whole system, for brand
      consistency; hierarchy comes from weight and tracking, not a second face) ──────────── */
@font-face{
  font-family:"Urbanist Var";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/urbanist-var.woff2") format("woff2-variations");
}
@font-face{
  font-family:"Urbanist Var";
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/urbanist-var-italic.woff2") format("woff2-variations");
}

/* ── tokens ───────────────────────────────────────────────────────────────────────────── */
/* "The Record": warm ivory paper, warm ink, a single brass accent for fine detailing, and a
   stance scale that is the ONLY saturated colour on the page. Light is canonical (the money
   artifacts print light); dark is a warm opt-in via [data-theme="dark"]. */
:root{
  color-scheme:light;
  --font-body:"Urbanist Var","Urbanist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:"Urbanist Var","Urbanist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --page:#f4f0e7; --surface:#fdfbf5; --surface-2:#ece5d6;
  --ink:#221e18; --dim:rgba(34,30,24,.66); --faint:rgba(34,30,24,.44);
  --rule:rgba(34,30,24,.12); --rule-strong:rgba(34,30,24,.24);
  --grid-minor:rgba(34,30,24,.022); --grid-major:rgba(34,30,24,.046);
  --nav-bg:rgba(244,240,231,.80);
  --terminal:#211d17; --terminal-ink:#ece5d6;
  /* the single brass accent: rules, marks, faint washes, focus. Never a large fill. */
  --accent:#9c7a3c; --accent-dim:rgba(156,122,60,.5); --accent-wash:rgba(156,122,60,.10);
  --accent-2:#b5794e;                                   /* warm second tone, hero aura only */
  --grad-accent:linear-gradient(135deg,#b7924b 0%,#9c7a3c 58%,#836531 100%);
  --grad-ink:linear-gradient(176deg,#221e18 0%,#5a5044 132%);
  --tint:rgba(156,122,60,.06);
  /* colour reserved for DATA: stance diverging scale, tuned for warm paper (1 permissive to
     5 restrictive, validated D-26) */
  --s1:#2b6ca6; --s2:#6b9cc6; --s3:#9a8f79; --s4:#d6885b; --s5:#b3432f;
  --sR:#221e18;
  --good:#3f7a37; --warn-ink:#7a561e; --warn-bg:rgba(196,150,40,.15); --critical:#b3432f;
  /* elevation, warm-tinted, layered */
  --e1:0 1px 2px rgba(50,38,24,.06),0 2px 6px -2px rgba(50,38,24,.08);
  --e2:0 2px 4px rgba(50,38,24,.06),0 12px 26px -12px rgba(50,38,24,.15);
  --e3:0 10px 22px -8px rgba(50,38,24,.14),0 30px 56px -24px rgba(40,30,18,.24);
  --ring:0 0 0 1px rgba(34,30,24,.05);
  --shadow:var(--e2);
  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.4,.5,1);
  --dur-1:.16s; --dur-2:.34s; --dur-3:.72s;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#181510; --surface:#211d17; --surface-2:#2a251d;
  --ink:#f0ebe0; --dim:rgba(240,235,224,.62); --faint:rgba(240,235,224,.38);
  --rule:rgba(240,235,224,.12); --rule-strong:rgba(240,235,224,.26);
  --grid-minor:rgba(240,235,224,.028); --grid-major:rgba(240,235,224,.06);
  --nav-bg:rgba(24,21,16,.74);
  --terminal:#120f0b; --terminal-ink:#e6ddca;
  --accent:#c39a54; --accent-dim:rgba(195,154,84,.5); --accent-wash:rgba(195,154,84,.12);
  --accent-2:#c98a5c;
  --grad-accent:linear-gradient(135deg,#d3ab63 0%,#c39a54 58%,#a97f3f 100%);
  --grad-ink:linear-gradient(176deg,#f0ebe0 0%,#b3a892 132%);
  --tint:rgba(195,154,84,.08);
  --s1:#4a90cf; --s2:#7fb0da; --s3:#a99e86; --s4:#e0a06f; --s5:#d05a44;
  --sR:#f0ebe0;
  --good:#5aa84f; --warn-ink:#e2c081; --warn-bg:rgba(196,150,40,.12); --critical:#d05a44;
  --e1:0 1px 2px rgba(0,0,0,.4),0 2px 8px -3px rgba(0,0,0,.5);
  --e2:0 2px 6px rgba(0,0,0,.42),0 16px 34px -14px rgba(0,0,0,.62);
  --e3:0 12px 28px -10px rgba(0,0,0,.55),0 36px 64px -26px rgba(0,0,0,.72);
  --ring:0 0 0 1px rgba(240,235,224,.06);
  --shadow:var(--e2);
}

/* ── reset & base ─────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--page);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15.5px;
  font-weight:430;
  line-height:1.62;
  font-feature-settings:normal;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
::selection{background:var(--ink);color:var(--page)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ── canvas: one restrained blueprint grid ───────────────────────────────────────────────
   Glows, vignette, and crop marks were removed (panel charter 11, data surfaces carry no
   decoration; the money artifacts are light and print clean). */
.grid-layer{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--grid-minor) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px),
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px);
  background-size:56px 56px,56px 56px,280px 280px,280px 280px;
}

/* the living record as ambient substrate: a rule-30 field seeded by the chain head, drawn
   under the whole page (progressive enhancement, JS only). Content rides opaque plates above
   it; the field breathes in the margins and the open bands. */
.record-field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:none}
html.js .record-field{display:block}

.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 32px}
main.wrap{padding-bottom:96px}

/* ── type: one Urbanist scale, hierarchy from weight + tracking ──────────────────────────── */
h1,h2,h3,.display{font-family:var(--font-display);font-weight:680;letter-spacing:-.02em;line-height:1.12}
h2{font-size:25px;margin:62px 0 18px;font-weight:680;letter-spacing:-.018em}
h2 .h-index{color:var(--faint);font-weight:600;margin-right:10px;font-variant-numeric:tabular-nums}
h3{font-size:17px;margin:28px 0 10px;font-weight:680;letter-spacing:-.012em}
p{max-width:68ch}
.display{font-size:clamp(40px,5.3vw,62px);font-weight:720;letter-spacing:-.03em;line-height:1.04}
.display .soft{font-weight:360;letter-spacing:-.024em}
.eyebrow{
  font-size:11px;font-weight:720;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);
}
.eyebrow .acc{color:var(--accent)}
.dim{color:var(--dim)}
.faint{color:var(--faint)}
.small{font-size:13px}
.micro{font-size:11.5px}
.mono{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
.num{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.accent{color:var(--accent)}

/* ── nav ──────────────────────────────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:10;
  background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);
  backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid var(--rule);
}
.nav-inner{
  max-width:1080px;margin:0 auto;padding:0 32px;
  display:flex;align-items:center;gap:28px;height:58px;
}
.wordmark{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:740;font-size:18px;letter-spacing:-.022em}
.wordmark .mark-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.nav-links{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav-links a{color:var(--dim);font-size:13.5px;font-weight:520;transition:color .15s ease}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a.api-link{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;color:var(--dim);
  border:1px solid var(--rule);padding:5px 10px;border-radius:6px;
}
.nav-links a.api-link:hover{border-color:var(--rule-strong);color:var(--ink)}

/* ── status card / stat tiles ─────────────────────────────────────────────────────────── */
.statgrid{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin:44px 0 0;
  background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  box-shadow:var(--e1);overflow:hidden;
}
.stat{padding:18px 22px 20px;border-left:1px solid var(--rule)}
.stat:first-child{border-left:none}
.stat .k{font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.stat .v{font-size:24px;font-weight:620;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.stat .v .unit{font-size:13px;color:var(--dim);font-weight:520;margin-left:4px;letter-spacing:0}
.stat .v.mono-v{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:15px;font-weight:560;padding-top:5px}

/* ── chips & pills ────────────────────────────────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:640;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--rule-strong);border-radius:999px;
  padding:4px 11px;white-space:nowrap;vertical-align:middle;
}
.chip.mono-chip{font-family:ui-monospace,"SF Mono",Menlo,monospace;text-transform:none;letter-spacing:.02em;font-size:11px}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none}
.chip.ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent)}
.chip.ok .dot{background:var(--good)}
.chip.bad{color:var(--critical);border-color:color-mix(in srgb,var(--critical) 45%,transparent)}
.chip.bad .dot{background:var(--critical)}
.chip.gap-chip{color:var(--faint);border-style:dashed}
.chip.live{color:var(--accent);border-color:var(--accent-dim)}
.chip.live .dot{background:var(--accent)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ── banner (staleness / notices) ─────────────────────────────────────────────────────── */
.banner{
  display:flex;gap:12px;align-items:baseline;
  /* tint composited over opaque paper, so the blueprint grid never shows through */
  background:linear-gradient(var(--warn-bg),var(--warn-bg)),var(--surface);
  color:var(--warn-ink);
  border:1px solid color-mix(in srgb,var(--warn-ink) 30%,transparent);
  border-radius:10px;padding:12px 16px;margin:28px 0 0;font-size:13.5px;
}
.banner .b-mark{font-weight:700}
.banner.synth{border-style:dashed}
.banner.synth .b-mark{font-weight:800;letter-spacing:.12em}

/* ── cards & tables ───────────────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-pad{padding:22px 26px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:13.5px}
thead th{
  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);padding:14px 14px 10px;border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
tbody td{padding:13px 14px;border-bottom:1px solid var(--rule);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:var(--accent-wash)}
tr.row-gap{opacity:.55}
tr.row-gap:hover{background:transparent}
td.first,th.first{padding-left:26px}
td.last,th.last{padding-right:26px}
.seat-cell .s-id{font-weight:600;font-size:14px;letter-spacing:-.01em}
.seat-cell .s-id a:hover{color:var(--accent)}
.seat-cell .s-name{color:var(--faint);font-size:12px;margin-top:2px}
.q-line{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.val{font-variant-numeric:tabular-nums;font-weight:560}
.val-sub{color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums}
.domain-row td{
  padding:20px 14px 8px;border-bottom:1px solid var(--rule);
  font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);
}
.domain-row:hover{background:transparent!important}

/* ── stance dot plot (SVG) ────────────────────────────────────────────────────────────── */
.dotplot{display:block}
.dotplot .axis{stroke:var(--rule-strong);stroke-width:1}
.dotplot .tick{stroke:var(--rule-strong);stroke-width:1}
.dotplot .tick-mid{stroke:var(--faint);stroke-width:1}
.dotplot .whisker{stroke-width:2;stroke-linecap:round;opacity:.55}
.dotplot .mean{stroke:var(--surface);stroke-width:1.5}
.dotplot .axlab{fill:var(--faint);font-size:8.5px;font-family:inherit}
.plotcell{display:flex;align-items:center;gap:12px}
.plotcell .plotval{font-variant-numeric:tabular-nums;font-weight:620;font-size:14px;min-width:44px;text-align:right}
.plotcell .plotval .se{display:block;font-weight:480;font-size:10.5px;color:var(--faint)}

/* ── distribution bar ─────────────────────────────────────────────────────────────────── */
.distbar{display:flex;gap:2px;width:112px;height:12px;align-items:stretch}
.distbar .seg{border-radius:2.5px;min-width:0}
.distbar .seg:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}
.distbar .seg:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}
.seg.s1{background:var(--s1)}.seg.s2{background:var(--s2)}.seg.s3{background:var(--s3)}
.seg.s4{background:var(--s4)}.seg.s5{background:var(--s5)}
.seg.sR{background:var(--sR);opacity:.85}
.legend{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:14px}
.legend .li{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--dim)}
.legend .sw{width:10px;height:10px;border-radius:3px;flex:none}

/* ── terminal block ───────────────────────────────────────────────────────────────────── */
.terminal{
  background:var(--terminal);color:var(--terminal-ink);
  border:1px solid var(--rule-strong);border-radius:10px;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.7;
  padding:16px 18px;overflow-x:auto;white-space:pre;
}
.terminal .t-prompt{color:var(--accent);user-select:none}
.terminal .t-out{opacity:.62}

/* ── cite block ───────────────────────────────────────────────────────────────────────── */
.cite{
  border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:10px;background:var(--surface);
  padding:14px 18px;margin:40px 0 0;font-size:12.5px;color:var(--dim);
  line-height:1.75;
}
.cite .c-label{font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:4px}
.cite .mono{word-break:break-all}

/* ── hero ─────────────────────────────────────────────────────────────────────────────── */
.hero{padding:88px 0 0}
.hero .eyebrow{margin-bottom:22px}
.hero .display{max-width:17ch}
.hero .display .soft{color:var(--dim)}
.hero .sub{margin-top:20px;font-size:16.5px;color:var(--dim);max-width:56ch;line-height:1.65}
.hero .heroline{display:flex;gap:14px;align-items:center;margin-top:26px;flex-wrap:wrap}

/* ── section head ─────────────────────────────────────────────────────────────────────── */
.sec-head{display:flex;align-items:baseline;gap:14px;margin:72px 0 16px}
.sec-head h2{margin:0}
.sec-head .sec-note{color:var(--faint);font-size:12.5px}
.sec-head .sec-right{margin-left:auto;font-size:12.5px}
.sec-head .sec-right a{color:var(--dim);border-bottom:1px solid var(--rule-strong);padding-bottom:1px}
.sec-head .sec-right a:hover{color:var(--ink);border-color:var(--ink)}

/* ── seat masthead ────────────────────────────────────────────────────────────────────── */
.masthead{padding:72px 0 0}
.masthead .seat-id{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:clamp(30px,4.2vw,44px);font-weight:640;letter-spacing:-.02em;line-height:1.1;
}
.masthead .seat-sub{margin-top:10px;color:var(--dim);font-size:15px}
.masthead .chips{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.note{
  border-left:2px solid var(--rule-strong);padding:2px 0 2px 16px;
  color:var(--dim);font-size:13px;max-width:64ch;margin:22px 0 0;
}

/* ── prose (methodology / about) ──────────────────────────────────────────────────────── */
.prose{max-width:720px}
.prose p{margin:14px 0;color:var(--dim);font-size:15px;line-height:1.75}
.prose p strong,.prose p b{color:var(--ink);font-weight:600}
.prose .lede{font-size:19px;line-height:1.6;color:var(--ink);font-weight:460}
.prose section{border-top:1px solid var(--rule);padding:34px 0 8px;margin-top:34px}
.prose section:first-of-type{border-top:none;margin-top:8px}
.prose .sec-eyebrow{display:flex;gap:12px;align-items:baseline;margin-bottom:6px}
.prose .sec-eyebrow .n{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;color:var(--accent)}
.pull{
  border-left:3px solid var(--accent);padding:6px 0 6px 22px;margin:44px 0;
  font-size:21px;font-weight:560;letter-spacing:-.015em;line-height:1.45;max-width:30ch;
}
.pull .attr{display:block;margin-top:10px;font-size:12px;color:var(--faint);font-weight:520;letter-spacing:.08em}

/* ── principles grid (about) ──────────────────────────────────────────────────────────── */
.principles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0 8px}
.principle{border:1px solid var(--rule);border-radius:12px;padding:18px 20px;background:var(--surface)}
.principle .p-k{font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.principle p{font-size:13px;color:var(--dim);line-height:1.65;margin:0}

/* ── fingerprint cards (the 8-vector, methodology §2.2) ───────────────────────────────── */
.fp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:4px}
.fp-card{
  background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  box-shadow:var(--shadow);padding:16px 18px 14px;display:block;color:inherit;
  transition:border-color .15s ease, transform .15s ease;
}
a.fp-card:hover{border-color:var(--accent-dim);transform:translateY(-1px);text-decoration:none}
.fp-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.fp-head .fp-id{font-weight:640;font-size:14.5px;letter-spacing:-.01em}
.fp-head .fp-name{color:var(--faint);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-head .fp-mean{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:620;font-size:13px}
.fp-row{display:flex;align-items:center;gap:9px;padding:2.5px 0}
.fp-row .fp-lab{width:76px;flex:none;font-size:10px;font-weight:640;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.fp-track{position:relative;flex:1;height:12px}
.fp-track .fp-axis{position:absolute;left:0;right:0;top:5.5px;height:1px;background:var(--rule)}
.fp-track .fp-mid{position:absolute;left:50%;top:2px;width:1px;height:8px;background:var(--rule-strong)}
.fp-track .fp-se{position:absolute;top:5px;height:2px;border-radius:2px;opacity:.45}
.fp-track .fp-dot{position:absolute;top:2px;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--surface)}
.fp-track .fp-none{position:absolute;left:0;right:0;top:1px;font-size:9px;color:var(--faint);letter-spacing:.12em;text-transform:uppercase}
.fp-foot{margin-top:10px;display:flex;gap:10px;align-items:center;font-size:10.5px;color:var(--faint)}
.fp-card.fp-gap{opacity:.55}
.fp-wide .fp-row .fp-lab{width:170px;font-size:10.5px}
.fp-wide .fp-row{padding:5px 0}

/* ── divergence / spread ──────────────────────────────────────────────────────────────── */
.spread-track{position:relative;display:inline-block;width:150px;height:14px;vertical-align:middle}
.spread-track .sp-axis{position:absolute;left:0;right:0;top:6.5px;height:1px;background:var(--rule)}
.spread-track .sp-range{position:absolute;top:5px;height:4px;border-radius:3px;background:var(--accent);opacity:.6}
.spread-track .sp-dot{position:absolute;top:3px;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--surface)}
.spread-val{font-variant-numeric:tabular-nums;font-weight:640}
.qcode a{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:620;font-size:13.5px}
.qcode a:hover{color:var(--accent)}

/* ── anchors (the instrument's own text) ──────────────────────────────────────────────── */
.anchors{margin:18px 0 0;display:grid;gap:10px;max-width:760px}
.anchor{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--rule);border-radius:11px;padding:13px 16px;
}
.anchor .a-n{
  flex:none;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;
}
.anchor .a-n.n3{color:var(--page)}
.anchor p{margin:2px 0 0;font-size:13.5px;color:var(--dim);line-height:1.55}
.axis-caption{display:flex;justify-content:space-between;max-width:760px;margin-top:10px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ── willingness frontier bars (R1/R2/D) ──────────────────────────────────────────────── */
.will-row{display:flex;align-items:center;gap:12px;padding:6px 0}
.will-row .w-lab{width:170px;flex:none;font-size:10.5px;font-weight:640;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.will-bar{flex:1;display:flex;gap:2px;height:10px;max-width:340px}
.will-bar span{border-radius:2.5px}
.will-bar .w-r1{background:var(--s5)}
.will-bar .w-r2{background:var(--s4)}
.will-bar .w-d{background:var(--s2)}
.will-bar .w-rest{background:var(--surface-2)}
.will-val{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums;width:150px;flex:none}

/* ── domain grid (methodology) ────────────────────────────────────────────────────────── */
.domain-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 8px;max-width:760px}
.domain-cell{border:1px solid var(--rule);border-radius:11px;padding:13px 16px;background:var(--surface)}
.domain-cell .d-k{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.domain-cell p{margin:0;font-size:12.5px;color:var(--dim)}

/* ── buttons & CTAs ───────────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;font-weight:620;font-size:13.5px;letter-spacing:-.01em;
  padding:10px 20px;border-radius:9px;border:1px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease;cursor:default;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px -8px var(--accent-dim)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn.ghost:hover{border-color:var(--ink);box-shadow:none}
.cta-note{font-size:11px;color:var(--faint);margin-top:8px}
.quiet-cta{
  display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  border:1px solid var(--rule);border-radius:12px;background:var(--surface);
  padding:16px 20px;margin-top:40px;
}
.quiet-cta p{margin:0;font-size:13.5px;color:var(--dim);max-width:56ch}

/* ── pricing tiers ────────────────────────────────────────────────────────────────────── */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:8px}
.tier{
  background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  box-shadow:var(--shadow);padding:22px 24px;display:flex;flex-direction:column;gap:0;
}
.tier.hot{border-color:var(--accent-dim)}
.tier .t-k{font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.tier h3{margin:0 0 2px;font-size:19px}
.tier .t-price{font-size:30px;font-weight:660;letter-spacing:-.025em;font-variant-numeric:tabular-nums;margin:10px 0 2px}
.tier .t-price .per{font-size:13px;color:var(--dim);font-weight:480;letter-spacing:0}
.tier .t-sub{font-size:12.5px;color:var(--faint);margin-bottom:14px}
.tier ul{list-style:none;margin:0 0 18px;padding:0}
.tier li{font-size:13px;color:var(--dim);padding:6px 0 6px 22px;position:relative;border-top:1px solid var(--rule)}
.tier li::before{content:"·";position:absolute;left:4px;color:var(--accent);font-weight:700}
.tier .t-cta{margin-top:auto}
.founding{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  border:1px dashed var(--accent-dim);border-radius:12px;padding:14px 18px;margin-top:16px;
  background:linear-gradient(var(--accent-wash),var(--accent-wash)),var(--surface);
}
.founding p{margin:0;font-size:13px;color:var(--dim)}
.founding .f-price{font-weight:660;color:var(--ink);font-variant-numeric:tabular-nums}

/* ── answer-first block (GEO) ─────────────────────────────────────────────────────────── */
.answer-box{
  border-left:3px solid var(--accent);background:var(--surface);
  border-radius:0 12px 12px 0;padding:16px 20px;margin:30px 0 0;max-width:74ch;
}
.answer-box p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink)}
.answer-box .a-k{font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px}
.updated{font-size:11px;color:var(--faint);letter-spacing:.06em}

/* ── breadcrumbs ──────────────────────────────────────────────────────────────────────── */
.crumbs{display:flex;gap:8px;align-items:center;font-size:11.5px;color:var(--faint);margin:26px 0 -44px}
.crumbs a{color:var(--dim);border-bottom:1px solid var(--rule)}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.5}

/* ── FAQ / glossary ───────────────────────────────────────────────────────────────────── */
.qa{border-top:1px solid var(--rule);padding:22px 0}
.qa h3{margin:0 0 8px;font-size:16px;letter-spacing:-.015em}
.qa p{margin:0;font-size:14px;color:var(--dim);line-height:1.7;max-width:72ch}
.qa p + p{margin-top:8px}
.gloss{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.gloss .g{border:1px solid var(--rule);border-radius:11px;background:var(--surface);padding:13px 16px}
.gloss .g dt{font-size:12.5px;font-weight:650;margin-bottom:4px}
.gloss .g dd{margin:0;font-size:12.5px;color:var(--dim);line-height:1.6}

/* ── diff card (frozen format, monospace artifact) ────────────────────────────────────── */
.diffcard{
  background:var(--terminal);color:var(--terminal-ink);
  border:1px solid var(--rule-strong);border-radius:12px;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;line-height:1.8;
  padding:20px 22px;overflow-x:auto;white-space:pre;position:relative;
}
.diffcard .d-add{color:var(--s5)}
.diffcard .d-head{color:var(--accent);font-weight:600}
.diffcard .d-dim{opacity:.55}
.illustrative{
  position:absolute;top:14px;right:16px;
  font-size:9.5px;font-weight:700;letter-spacing:.22em;color:var(--warn-ink);
  border:1px dashed color-mix(in srgb,var(--warn-ink) 50%,transparent);border-radius:6px;padding:3px 8px;
  background:var(--warn-bg);
}

/* ── footer sitemap ───────────────────────────────────────────────────────────────────── */
.foot-map{display:flex;gap:40px;flex-wrap:wrap;margin:26px 0 6px;padding-top:22px;border-top:1px solid var(--rule)}
.foot-map .fm-col{min-width:120px}
.foot-map .fm-k{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.foot-map a{display:block;font-size:12.5px;color:var(--dim);border:none;padding:3px 0}
.foot-map a:hover{color:var(--ink)}

/* ── footer: an opaque closing plate, so the blueprint grid never runs through it ───────── */
footer{background:var(--surface);border-top:1px solid var(--rule-strong);margin-top:96px;position:relative;z-index:1}
.foot-inner{max-width:1080px;margin:0 auto;padding:34px 32px 46px;font-size:12.5px;color:var(--faint);line-height:1.8}
.foot-inner .f-row{display:flex;gap:26px;flex-wrap:wrap;justify-content:space-between}
.foot-inner .f-col{max-width:52ch}
.foot-inner .f-col a{color:var(--dim);border-bottom:1px solid var(--rule)}
.foot-inner a{color:var(--dim)}
.foot-inner a:hover{color:var(--ink)}
.foot-mark{display:flex;align-items:center;gap:8px;color:var(--dim);font-weight:620;font-size:13px;margin-bottom:8px}
.foot-mark .mark-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* ── responsive ───────────────────────────────────────────────────────────────────────── */
@media (max-width:880px){
  .tiers{grid-template-columns:1fr}
  .gloss{grid-template-columns:1fr}
  .fp-grid{grid-template-columns:1fr}
  .domain-grid{grid-template-columns:1fr}
  .will-row .w-lab{width:110px}
  .statgrid{grid-template-columns:1fr 1fr}
  .stat{border-left:none;border-top:1px solid var(--rule)}
  .stat:nth-child(-n+2){border-top:none}
  .stat:nth-child(even){border-left:1px solid var(--rule)}
  .principles{grid-template-columns:1fr}
  .wrap,.nav-inner{padding-left:20px;padding-right:20px}
  .nav-links{gap:14px}
  .nav-links a:not(.api-link){display:none}
  table{font-size:12.5px}
  td.first,th.first{padding-left:14px}
  td.last,th.last{padding-right:14px}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   v3 · ELEVATION, TEXTURE & MOTION, richness on the narrative chrome, calm on the data.
   Everything here is GPU-composited (opacity/transform only), reduced-motion-safe, and
   degrades to a fully-visible static page with zero JavaScript. No libraries, no images.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── premium paper: a fine grain + a hero-scoped aurora that fades before the data ─────── */
body::before{
  content:"";position:fixed;inset:0 0 auto 0;height:min(780px,74vh);z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 80% at 15% -12%, color-mix(in srgb,var(--accent) 34%,transparent), transparent 60%),
    radial-gradient(52% 70% at 92% -8%, color-mix(in srgb,var(--accent-2) 28%,transparent), transparent 62%),
    radial-gradient(46% 56% at 60% -2%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 72%);
  opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.42;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::after{opacity:.5;mix-blend-mode:overlay}

/* ── keyframes ─────────────────────────────────────────────────────────────────────────── */
@keyframes riseIn{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes auraDrift{to{transform:translate3d(0,-16px,0) scale(1.07)}}
@keyframes ringOut{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
  70%,100%{box-shadow:0 0 0 9px transparent}}

/* ── refined marks & accents ───────────────────────────────────────────────────────────── */
.wordmark .mark-dot,.foot-mark .mark-dot{background:var(--grad-accent)}
.eyebrow .acc{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head h2::after{content:"";display:block;width:38px;height:3px;margin-top:12px;border-radius:3px;
  background:var(--grad-accent);opacity:.9}
::selection{background:color-mix(in srgb,var(--accent) 88%,#000);color:#fff}
:root{scrollbar-color:var(--rule-strong) transparent}

/* ── nav: layered glass that gains a shadow on scroll ──────────────────────────────────── */
.nav{transition:box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2),background var(--dur-2)}
.nav.scrolled{box-shadow:var(--e1);border-bottom-color:var(--rule-strong)}
.nav-links a:not(.api-link){position:relative}
.nav-links a:not(.api-link)::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;
  border-radius:2px;background:var(--grad-accent);transition:right var(--dur-2) var(--ease-out)}
.nav-links a:not(.api-link):hover::after,.nav-links a[aria-current="page"]::after{right:0}
.api-link{transition:border-color var(--dur-1),color var(--dur-1),transform var(--dur-1)}
.api-link:hover{transform:translateY(-1px)}

/* ── hero / masthead: confident load entrance (CSS-only) ───────────────────────────────── */
.hero .display,.masthead .seat-id,.masthead .display{letter-spacing:-.036em}
@media (prefers-reduced-motion:no-preference){
  .hero .hero-copy > *,.masthead > *{animation:riseIn var(--dur-3) var(--ease-out) both}
  .hero .hero-copy > *:nth-child(1),.masthead > *:nth-child(1){animation-delay:.02s}
  .hero .hero-copy > *:nth-child(2),.masthead > *:nth-child(2){animation-delay:.10s}
  .hero .hero-copy > *:nth-child(3),.masthead > *:nth-child(3){animation-delay:.18s}
  .hero .hero-copy > *:nth-child(4),.masthead > *:nth-child(4){animation-delay:.26s}
  body::before{animation:auraDrift 26s var(--ease-out) infinite alternate;transform-origin:50% 0}
}
.hero .chip.live .dot{box-shadow:0 0 0 0 transparent}
@media (prefers-reduced-motion:no-preference){
  .hero .chip.live .dot{animation:ringOut 2.8s var(--ease-out) infinite}
}

/* ── elevation & hover across surfaces ─────────────────────────────────────────────────── */
.card,.tier,.fp-card,.principle,.domain-cell,.gloss .g,.quiet-cta,.founding,.answer-box{
  box-shadow:var(--e1);
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),
             border-color var(--dur-2) var(--ease-out);
}
/* lit top edge, the "surface catching light" tell */
.card,.tier,.principle,.gloss .g,.quiet-cta{position:relative}
.card::before,.tier::before,.principle::before,.quiet-cta::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);mix-blend-mode:normal;
}
:root[data-theme="dark"] .card::before,:root[data-theme="dark"] .tier::before,
:root[data-theme="dark"] .principle::before,:root[data-theme="dark"] .quiet-cta::before{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
/* marketing cards lift; data cards stay calm (just a soft shadow deepen) */
.tier:hover,.principle:hover,.quiet-cta:hover,.gloss .g:hover,a.fp-card:hover{
  transform:translateY(-4px);box-shadow:var(--e3);border-color:var(--accent-dim);
}
.card:hover{box-shadow:var(--e2)}
.tier.hot{border-color:transparent;background:
  linear-gradient(var(--surface),var(--surface)) padding-box,
  var(--grad-accent) border-box;border:1.5px solid transparent;
  box-shadow:var(--e2),0 18px 44px -20px var(--accent-dim)}
.tier.hot::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(80% 40% at 50% 0%,var(--tint),transparent 70%)}
.tier.hot:hover{box-shadow:var(--e3),0 22px 52px -22px var(--accent-dim)}

/* ── buttons: gradient fill, shadow bloom, tactile press ───────────────────────────────── */
.btn{background:var(--ink);color:var(--page);box-shadow:0 1px 2px rgba(34,30,24,.16),0 10px 22px -12px rgba(34,30,24,.42);
  transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),background var(--dur-2)}
.btn:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(34,30,24,.18),0 16px 32px -12px rgba(34,30,24,.5)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.ghost{background:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--tint);transform:translateY(-2px);box-shadow:var(--e1)}

/* ── chips: gentle depth; the "live" ring is a soft static halo, never a pulse on data ──── */
.chip{background:linear-gradient(var(--surface),color-mix(in srgb,var(--surface-2) 60%,var(--surface)));
  box-shadow:var(--ring);transition:border-color var(--dur-1),color var(--dur-1),transform var(--dur-1)}
.chip.live{box-shadow:0 0 0 4px var(--accent-wash)}

/* ── stat tiles: quiet elevation, gradient-ink values, hover lift ──────────────────────── */
.stat{transition:background var(--dur-2) var(--ease-out)}
.stat:hover{background:var(--tint)}
.stat .v{background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .v .unit{-webkit-text-fill-color:var(--dim);color:var(--dim)}

/* ── links in prose/section headers: animated underline draw ───────────────────────────── */
.sec-head .sec-right a,.foot-inner a,.foot-map a{background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--dur-2) var(--ease-out),color var(--dur-1)}
.sec-head .sec-right a:hover,.foot-inner a:hover,.foot-map a:hover{background-size:100% 1.5px}

/* ── scroll-reveal: content is visible by default; JS opts blocks into a fade-up ───────── */
@media (prefers-reduced-motion:no-preference){
  html.js :is(.sec-head,.card,.principles,.quiet-cta,.answer-box,.cite,.founding,.domain-grid,
               .gloss,.diffcard,.terminal,.banner:not(.synth)){
    opacity:0;transform:translateY(22px);
    transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);
  }
  html.js :is(.sec-head,.card,.principles,.quiet-cta,.answer-box,.cite,.founding,.domain-grid,
               .gloss,.diffcard,.terminal,.banner:not(.synth)).in{opacity:1;transform:none}
  /* staggered children in the showcase grids + stat row */
  html.js :is(.fp-grid,.tiers,.statgrid) > *{opacity:0;transform:translateY(20px);
    transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
  html.js :is(.fp-grid,.tiers,.statgrid).in > *{opacity:1;transform:none}
  html.js :is(.fp-grid,.tiers,.statgrid).in > *:nth-child(2){transition-delay:.05s}
  html.js :is(.fp-grid,.tiers,.statgrid).in > *:nth-child(3){transition-delay:.10s}
  html.js :is(.fp-grid,.tiers,.statgrid).in > *:nth-child(4){transition-delay:.15s}
  html.js :is(.fp-grid,.tiers,.statgrid).in > *:nth-child(5){transition-delay:.20s}
  html.js :is(.fp-grid,.tiers,.statgrid).in > *:nth-child(n+6){transition-delay:.25s}
}

/* ── observatory: the equation wall + figure plates (analytics) ────────────────────────── */
.eqwall{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px;margin-top:16px}
.eqcard{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:14px 16px 13px;
  box-shadow:var(--e1);display:flex;flex-direction:column;gap:7px}
.eqcard .eqbox{min-height:32px;display:flex;align-items:center}
.eqsvg{height:1.55em;width:auto;max-width:100%}
.eqcard .eqname{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.eqcard .eqdef{font-size:12px;color:var(--dim);line-height:1.5}
.eqcard .eqref{font-size:10px;color:var(--faint);letter-spacing:.04em;margin-top:auto}

.figure{background:var(--viz-surface);border:1px solid var(--rule);border-radius:14px;
  padding:18px 20px 15px;box-shadow:var(--e1);margin-top:8px;position:relative;overflow:visible}
.fig-svg{width:100%;height:auto;display:block}
.fig-cap{margin-top:12px;font-size:12.5px;color:var(--dim);line-height:1.55;
  border-top:1px solid var(--rule);padding-top:11px}
.fig-cap .fignum{font-family:var(--font-body);font-weight:700;color:var(--ink);letter-spacing:.02em}
.fig-cap b{color:var(--ink);font-weight:600}
.fig-method{font-size:10.5px;color:var(--faint);margin-top:5px;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.01em}
.fig-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.fig-stat{display:inline-flex;gap:14px;flex-wrap:wrap;margin-top:2px}
.fig-stat .fs{font-size:11.5px;color:var(--dim)}
.fig-stat .fs b{font-family:var(--font-body);color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:880px){.fig-2{grid-template-columns:1fr}}
.fig-stack{display:flex;flex-direction:column;gap:14px}

/* ── the interactive chart system: validated 7-color palette + themed SVG marks ──────────
   Charts follow Paper/Ink through these tokens (a single swap re-themes every figure). The
   seven categorical hues are CVD-validated in both modes; the stance scale stays diverging;
   magnitude heatmaps use one warm sequential ramp. Marks carry data-tip for the hover layer. */
:root{
  --s0:#d1692e; --s1:#2b6ca6; --s2:#6d8f2b; --s3:#a8497f; --s4:#a67c1c; --s5:#1b9e8a; --s6:#4a4ea2;
  --viz-surface:#fbf8f1; --viz-grid:#e7dfce; --viz-muted:#8a8069;
  --viz-band:rgba(156,122,60,.20); --st-critical:#b3432f;
}
:root[data-theme="dark"]{
  --s0:#d17b41; --s1:#5a97cf; --s2:#7fa23f; --s3:#c66d99; --s4:#b0882c; --s5:#26a48e; --s6:#797cd6;
  --viz-surface:#1b1712; --viz-grid:#342e23; --viz-muted:#9a8f79;
  --viz-band:rgba(195,154,84,.22); --st-critical:#d05a44;
}
.viz{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font-body)}
.viz text{fill:var(--viz-muted);font-size:11px}
.viz .ax{fill:var(--viz-muted);font-size:12px}
.viz .ax.cap,.viz .ax.vcap{font-size:11px;letter-spacing:.02em}
.viz .ax.nullc{font-size:9.5px}
.viz .lbl{fill:var(--dim);font-size:12.5px}
.viz .val{fill:var(--ink);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.viz .pt{fill:var(--dim);font-size:12px;font-weight:600}
.viz .pttl{fill:var(--ink);font-size:12px;font-weight:680}
.viz .cellv{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.viz .rlab,.viz .clab{fill:var(--viz-muted);font-size:11.5px}
.viz .rlab.mono{font-family:ui-monospace,Menlo,monospace;fill:var(--ink)}
.viz .rlab2{fill:var(--viz-muted);font-size:9.5px}
.viz .gml{fill:var(--accent);font-size:11px;font-weight:600}
.viz .obsl{fill:var(--st-critical);font-size:11px;font-weight:600}
.viz .floorl{fill:var(--st-critical);font-size:10.5px}
.viz .n10l{fill:var(--ink);font-size:11px;font-weight:600}
.viz .segv{font-size:11px;font-weight:700}
.viz .statbox{fill:var(--ink);font-size:11.5px;font-weight:600}
/* strokes & fills */
.viz .grid{stroke:var(--viz-grid);stroke-width:1}
.viz .edge{stroke:var(--viz-muted);stroke-width:2;stroke-linecap:round;opacity:.4}
.viz .dot{stroke:var(--viz-surface);stroke-width:2}
.viz .pt-dot,.viz .cell-dot{stroke:var(--viz-surface);stroke-width:1.5}
.viz .hit{cursor:pointer}
.viz .cell{stroke:none}
.viz line.diag{stroke:var(--viz-grid);stroke-width:1.5}
.viz .cell.diag{fill:color-mix(in srgb,var(--viz-muted) 13%,transparent)}
.viz .refmark{fill:var(--ink);stroke:var(--viz-surface);stroke-width:1}
.viz .band{fill:var(--accent);opacity:.12}
.viz .null{stroke:var(--viz-muted);stroke-width:1;opacity:.7}
.viz .gmean{stroke:var(--accent);stroke-width:1.4;stroke-dasharray:5 4;opacity:.85}
.viz .ci{stroke-width:3;stroke-linecap:round}
.viz .ridge-fill{opacity:.14;stroke:none}
.viz .ridge-line{stroke-width:2;stroke-linejoin:round;fill:none}
.viz .rdot{stroke:var(--viz-surface);stroke-width:1.5}
.viz .rgrid{fill:none;stroke:var(--viz-grid);stroke-width:1}
.viz .rspoke{stroke:var(--viz-grid);stroke-width:1}
.viz .rfill{opacity:.16;stroke:none}
.viz .rline{fill:none;stroke-width:2;stroke-linejoin:round}
.viz .bar,.viz .seg{stroke:none}
.viz .bar.seq{fill:var(--s4)}
.viz .obs{stroke:var(--st-critical);stroke-width:2}
.viz .mde-band{fill:var(--viz-band);stroke:none}
.viz .mde-line{stroke:var(--accent);stroke-width:2.4;fill:none;stroke-linejoin:round}
.viz .floor{stroke:var(--st-critical);stroke-width:1.2;stroke-dasharray:5 4}
.viz .nmark{stroke:var(--viz-muted);stroke-width:1;stroke-dasharray:2 3;opacity:.7}
.viz .n10{fill:var(--ink);stroke:var(--viz-surface);stroke-width:1.5}
.viz .dendro{fill:none;stroke:var(--viz-muted);stroke-width:1.3;opacity:.55}
.viz .domsep{stroke:var(--viz-muted);stroke-width:1.4;opacity:.28}
.viz .mark{transition:opacity .12s ease}
.viz:has(.mark:hover) .mark:not(:hover){opacity:.3}
.viz-scatter{max-width:390px;margin:0 auto}
.viz-stack{max-width:640px}
/* small multiples + radar grid + legend */
.sm-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}
.sm{margin:0;flex:0 1 210px;min-width:190px;border:1px solid var(--rule);border-radius:10px;
  padding:8px 10px 6px;position:relative;background:var(--viz-surface)}
.sm .pflag{position:absolute;top:11px;right:11px;font-size:8.5px;font-weight:720;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;border:1px solid var(--rule);color:var(--viz-muted)}
.sm .pflag.warn{color:var(--st-critical);border-color:color-mix(in srgb,var(--st-critical) 45%,transparent)}
.radar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:8px;margin-top:4px}
.radar-grid .viz-radar{border:1px solid var(--rule);border-radius:10px;padding:6px;background:var(--viz-surface)}
.viz-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px}
.viz-legend .vk{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dim)}
.viz-legend .vk i{width:13px;height:13px;border-radius:3px;display:inline-block;flex:none}
.viz-tip{position:fixed;z-index:60;pointer-events:none;background:var(--ink);color:var(--page);
  font-size:12px;font-weight:600;padding:6px 9px;border-radius:7px;opacity:0;transform:translateY(2px);
  transition:opacity .1s;box-shadow:0 8px 20px rgba(0,0,0,.30);white-space:nowrap;max-width:300px}
.viz-tip.on{opacity:1;transform:none}
@media print{.viz-tip{display:none!important}}

/* ── the living record: rule-30 motif seeded by the chain head (motif.py) ────────────────
   The hub site plays the Game of Life; the instrument records it, one generation per row.
   Cells are monochrome ink (colour stays reserved for data); the brass scan-line is the
   writing head. Pure CSS animation, reduced-motion safe, hidden from print. */
:root{--motif-cell:rgba(34,30,24,.52); --field-cell:rgba(34,30,24,.030)}
:root[data-theme="dark"]{--motif-cell:rgba(240,235,224,.44); --field-cell:rgba(240,235,224,.038)}

/* ── the hero: clean copy on the calm field (the automaton is no longer behind the text) ── */
.hero{position:relative}
.hero .hero-copy{max-width:760px}

/* ── the living record: one dedicated, contained window ───────────────────────────────────
   The ambient field carries the signature quietly everywhere, with no controls. Here, in its
   own frame, the automaton runs slowly and you can click to fork the record. This is the only
   place with a control, and the only control is restore. */
.living-record{margin:60px 0 4px}
.lr-head{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;margin-bottom:20px}
.lr-head .eyebrow{font-size:11px;letter-spacing:.2em}
.lr-head .lr-sub{font-size:13px;color:var(--dim)}
.lr-body{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:40px;align-items:center}
.motif{background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  box-shadow:var(--e2);overflow:hidden;position:relative;margin:0}
.motif-frame{position:relative;line-height:0}
.motif-canvas,.motif .motif-svg{display:block;width:100%;height:312px;margin:0}
.motif-canvas{cursor:crosshair}
.motif-cap{display:flex;align-items:baseline;gap:8px 14px;flex-wrap:wrap;
  padding:12px 16px 13px;border-top:1px solid var(--rule);
  font-size:11.5px;color:var(--faint);line-height:1.58}
.motif-cap .motif-status{color:var(--dim);flex:1 1 22ch;min-width:0}
.motif-cap .mono{color:var(--dim)}
.motif-hint{flex-basis:100%;color:var(--faint)}
/* the three-beat reader, beside the window: teach the field so people can appreciate it */
.record-read{display:flex;flex-direction:column;gap:22px}
.record-read .rd{display:flex;gap:13px;align-items:flex-start}
.record-read .rd-n{font-family:var(--font-display);font-weight:720;font-size:13px;
  color:var(--accent);font-variant-numeric:tabular-nums;padding-top:1px;flex:none}
.record-read p{font-size:13px;line-height:1.62;color:var(--dim);max-width:44ch}
.record-read .rd b{color:var(--ink);font-weight:680}
.record-read .mono{color:var(--dim)}
/* the strip variant: a record fingerprint under interior mastheads */
.motif-strip{display:flex;align-items:center;gap:14px;margin:26px 0 0;
  background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  box-shadow:var(--e1);overflow:hidden;padding:9px 14px}
.motif-strip .motif-svg{height:26px;flex:1;min-width:0;width:auto}
.motif-strip .ms-cap{font-size:9.5px;color:var(--faint);letter-spacing:.05em;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .mrow{opacity:0;animation:motifRow .5s var(--ease-out) forwards;
    animation-delay:calc(var(--i)*var(--rms,55ms))}
}
@keyframes motifRow{to{opacity:1}}
.mbtn{font-family:var(--font-body);font-size:9.5px;font-weight:720;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);background:transparent;
  border:1px solid var(--rule-strong);border-radius:999px;padding:3px 10px;cursor:pointer;
  transition:color var(--dur-1),border-color var(--dur-1),transform var(--dur-1)}
.mbtn:hover{color:var(--ink);border-color:var(--ink);transform:translateY(-1px)}
.mbtn-restore{color:var(--critical);border-color:color-mix(in srgb,var(--critical) 50%,transparent)}
.mbtn-restore:hover{color:var(--critical);border-color:var(--critical)}
@media (max-width:900px){
  .lr-body{grid-template-columns:1fr;gap:26px}
  .motif-canvas,.motif .motif-svg{height:240px}
  .motif-strip .ms-cap{display:none}
}

/* ── theme toggle: Paper / Ink ───────────────────────────────────────────────────────────── */
.theme-toggle{display:inline-flex;align-items:center;gap:7px;background:transparent;
  border:1px solid var(--rule-strong);border-radius:999px;padding:5px 11px;cursor:pointer;
  color:var(--dim);font-family:var(--font-body);font-size:10.5px;font-weight:720;
  letter-spacing:.14em;text-transform:uppercase;
  transition:color var(--dur-1),border-color var(--dur-1),transform var(--dur-1)}
.theme-toggle:hover{color:var(--ink);border-color:var(--ink);transform:translateY(-1px)}
.tt-dot{width:9px;height:9px;border-radius:50%;background:var(--ink);flex:none}
.tt-label::after{content:"Ink"}
:root[data-theme="dark"] .tt-label::after{content:"Paper"}
:root[data-theme="dark"] .tt-dot{background:var(--page);box-shadow:0 0 0 1px var(--faint)}

/* ── actions strip (W4-1): quantified silence, one state per seat per occasion ──────────── */
.actions-strip{margin:18px 0 8px}
.as-head{display:flex;align-items:baseline;gap:14px;padding:0 2px 12px;flex-wrap:wrap}
.as-when{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;font-weight:700;
  letter-spacing:.04em;color:var(--faint);white-space:nowrap}
.as-line{font-size:14.5px;font-weight:560;color:var(--ink);line-height:1.4}
.as-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:10px}
.as-cell{position:relative;border:1px solid var(--rule);border-radius:11px;
  background:linear-gradient(var(--surface),color-mix(in srgb,var(--surface-2) 45%,var(--surface)));
  padding:12px 13px 11px;box-shadow:var(--e1);
  border-left:3px solid var(--faint)}
.as-cell.act-ok{border-left-color:var(--good)}
.as-cell.act-watch{border-left-color:var(--warn-ink)}
.as-cell.act-conf{border-left-color:var(--critical)}
.as-cell.act-base{border-left-color:var(--accent)}
.as-top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.as-state{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.act-ok .as-state{color:var(--good)}
.act-watch .as-state{color:var(--warn-ink)}
.act-conf .as-state{color:var(--critical)}
.act-base .as-state{color:var(--accent)}
.as-seat{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;font-weight:640;
  color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-stat{margin-top:9px;font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.as-stat .as-k{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-right:5px}
.as-stat .as-num{font-weight:680}
.as-stat .as-sub{color:var(--faint);font-size:11px}
.as-foot{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;font-size:10.5px;color:var(--dim);
  font-variant-numeric:tabular-nums}
.as-foot .as-e{color:var(--faint);border:1px solid var(--rule);border-radius:5px;padding:0 5px;
  font-family:ui-monospace,"SF Mono",Menlo,monospace}
.as-gaps{margin-top:10px;font-size:11.5px;color:var(--faint)}
.as-note{margin-top:12px;font-size:11.5px;line-height:1.55;color:var(--faint);max-width:760px}
.as-note a{color:var(--dim);border-bottom:1px solid var(--rule)}
.as-note a:hover{color:var(--ink);border-color:var(--ink)}

/* ── print: attestation-grade (light, ink-economical, links resolved) ───────────────────
   The monthly attestation PDF is the canonical money artifact; every page is built to fall
   cleanly onto paper, no fixed chrome, no decoration, URLs printed after content links. */
@media print{
  /* print is ALWAYS paper, even when the screen theme is Ink (attribute selector would
     otherwise out-rank the bare :root override) */
  :root,:root[data-theme="dark"]{
    --page:#fff; --surface:#fff; --surface-2:#fff; --ink:#000; --dim:#2a2a2a; --faint:#555;
    --rule:#c9c9c9; --rule-strong:#8f8f8f; --accent:#0b3d91; --accent-wash:#eef2fb;
    --nav-bg:#fff; --terminal:#fff; --terminal-ink:#000; --shadow:none;
    --motif-cell:#777; --tint:#f4f4f4; --grad-ink:none; --grad-accent:none;
  }
  .theme-toggle,.motif-frame::after,.motif-controls,.motif-canvas{display:none!important}
  .motif-svg{display:block!important}
  .mrow{opacity:1!important;animation:none!important}
  html,body{background:#fff;color:#000}
  body{font-size:10.5pt;-webkit-print-color-adjust:economy;print-color-adjust:economy}
  .grid-layer,.record-field,body::before,body::after{display:none!important}
  *{animation:none!important}
  /* reveal + gradient-text safety: everything solid and visible on paper */
  html.js :is(.sec-head,.card,.principles,.quiet-cta,.answer-box,.cite,.founding,.domain-grid,
              .gloss,.diffcard,.terminal,.banner),
  html.js :is(.fp-grid,.tiers,.statgrid) > *{opacity:1!important;transform:none!important}
  .stat .v,.eyebrow .acc{-webkit-text-fill-color:#000!important;color:#000!important;background:none!important}
  .sec-head h2::after,.nav-links a::after{display:none!important}
  .tier.hot{border:1px solid #000!important;background:#fff!important}
  .nav{position:static;background:#fff;border-bottom:1px solid #000}
  .nav-links{display:none}
  .wordmark{font-size:14pt}
  main.wrap{padding-bottom:0}
  a{color:#000}
  .card,.tier,.fp-card,.principle,.domain-cell,.anchor,.gloss .g,.quiet-cta,.figure,.eqcard{
    box-shadow:none;border:1px solid #bbb;break-inside:avoid;
  }
  .figure{background:#fff!important}
  .banner.synth{border:1.5px dashed #000;background:#fff;color:#000}
  .banner.synth .b-mark{color:#000}
  .btn{background:#fff;color:#000;border:1px solid #000}
  .terminal,.diffcard{background:#fff;color:#000;border:1px solid #999}
  .sec-head,.masthead,.hero{break-after:avoid}
  h1,h2,h3{break-after:avoid}
  /* resolve content links to their destination on paper; leave chrome links bare */
  .prose a[href^="http"]::after,.cite a[href^="http"]::after,.answer-box a[href^="http"]::after{
    content:" (" attr(href) ")";font-size:8.5pt;color:#555;word-break:break-all;
  }
  footer{margin-top:20px;border-top:1px solid #000}
  .foot-map{display:none}
}

/* ── AR-Mom findings-first + caption engine (prose auto-written from the data) ────────── */
.findings{margin:22px 0 30px}
.findings .sec-head{border:none;margin-bottom:6px}
.tldr{border-left:2px solid var(--accent);padding:2px 0 2px 16px;margin:6px 0 14px}
.tldr .row{margin:7px 0;font-size:15.5px;line-height:1.55}
.tldr b{font-weight:700}
.finding-lead{font-size:18px;line-height:1.5;margin:8px 0 10px;max-width:76ch;font-weight:460}
.sowhat{margin:8px 0}
.sowhat p{font-size:15.5px;line-height:1.55;margin:6px 0;max-width:78ch}
.badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:100px;vertical-align:middle}
.badge.pre{background:var(--warn-bg);color:var(--warn-ink);border:1px solid rgba(156,122,60,.35)}
.badge.insuf{background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 5px,#e3dccb 5px,#e3dccb 10px);
  color:var(--faint);border:1px dashed var(--rule-strong)}
.mom-term{border-bottom:1px dotted var(--accent);cursor:help}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);
  color:var(--surface);padding:9px 16px;border-radius:100px;font-size:13px;opacity:0;
  transition:opacity .2s;pointer-events:none;z-index:60}
.toast.show{opacity:1}
/* compact findings-first layout (less prose, KPI-style cards + collapsible detail) */
.finding-lead{font-size:21px;line-height:1.4;font-weight:500;margin:10px 0 4px;max-width:74ch;letter-spacing:-.01em}
.findings .sec-right .btn{padding:6px 14px;font-size:12px}
.find-cards{margin:16px 0 4px}
.find-status{margin:14px 0 2px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.find-more{margin-top:12px}
.find-more summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:13px;list-style:none}
.find-more summary::-webkit-details-marker{display:none}
.find-more summary::before{content:"\25B8  "}
.find-more[open] summary::before{content:"\25BE  "}
.find-detail{border-left:2px solid var(--rule);padding:2px 0 2px 15px;margin-top:10px}
.find-detail p{max-width:80ch;margin:8px 0;font-size:14.5px;line-height:1.55;color:var(--dim)}
/* ── writing / explainers (AEO/SEO content section) ──────────────────────────────────── */
.article-list{display:grid;gap:14px;margin-top:26px}
.article-card{display:block;border:1px solid var(--rule);border-radius:14px;background:var(--surface);
  padding:20px 22px;box-shadow:var(--e1);transition:transform var(--dur-2,.18s) var(--ease-out,ease),
  box-shadow var(--dur-2,.18s) var(--ease-out,ease),border-color var(--dur-2,.18s) var(--ease-out,ease)}
.article-card:hover{border-color:var(--accent);box-shadow:var(--e2);transform:translateY(-2px)}
.article-card .ac-kick{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}
.article-card h2{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:0 0 8px;color:var(--ink)}
.article-card .ac-dek{color:var(--dim);font-size:14.5px;line-height:1.55;margin:0 0 10px;max-width:78ch}
.article-card .ac-more{font-size:13px;font-weight:600;color:var(--accent)}
.article-body{max-width:72ch}
.article-body h2{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:30px 0 10px}
.article-body p{margin:12px 0;line-height:1.72}
.article-faq{margin-top:34px;border-top:1px solid var(--rule);padding-top:10px}
.article-faq .faq-q{margin:16px 0}
.article-faq .faq-qq{font-weight:650;margin:0 0 4px}
.article-faq .faq-aa{color:var(--dim);margin:0;line-height:1.6}
.article-related{margin-top:30px;display:flex;flex-direction:column;gap:4px;max-width:72ch}
.article-related a{color:var(--ink);border-bottom:1px solid var(--rule);padding:7px 0;font-weight:500}
.article-related a:hover{color:var(--accent);border-color:var(--accent)}

/* ── MOM-SITE-1 W1: readability + motion discipline ──────────────────────────────────────
   Liquid-glass legibility floor: the ambient rule-30 field and blueprint grid are decoration,
   so on small screens (where text density is highest and the field adds least) they recede,
   and for reduced-motion viewers every animation and the field itself are frozen. Text never
   competes with the field. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .record-field{opacity:.45}   /* the field JS already draws one static frame; soften it further */
}
@media (max-width:640px){
  .record-field{opacity:.45}
  .grid-layer{opacity:.55}
}

/* ── MOM-SITE-1 W3: pricing request / qualification forms (no backend, mailto compose) ─── */
.req-wrap{margin:22px 0 8px}
.req-form{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:22px 24px;box-shadow:var(--e1);max-width:720px}
.req-title{font-family:var(--font-display);font-weight:680;font-size:18px;letter-spacing:-.01em;margin:0 0 14px}
.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.req-form label{display:block;font-size:12px;font-weight:650;letter-spacing:.02em;color:var(--dim);margin:10px 0 0}
.req-form .req-full{grid-column:1 / -1}
.req-form input,.req-form textarea{width:100%;margin-top:5px;padding:9px 11px;font:inherit;font-size:14px;
  color:var(--ink);background:var(--page);border:1px solid var(--rule-strong);border-radius:9px}
.req-form input:focus,.req-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.req-form textarea{resize:vertical;min-height:64px}
.req-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
@media (max-width:560px){.req-grid{grid-template-columns:1fr}}