/* Bearwall site.css v2 (11/7/26). Tokens v1.2 (SPEC 3) and the v1 component set, then the v2 layer at the end (DESIGN-v2.md). */
@font-face { font-family: "Archivo"; src: url("/assets/v1/fonts/archivo-var-latin.woff2") format("woff2-variations"), url("/assets/v1/fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 400 800; font-stretch: 100% 125%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/v1/fonts/plex-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/v1/fonts/plex-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
/* Metric-matched fallbacks, measured by brand/tools/build_fonts.py (Archivo wdth 100 wght 400 vs Arial; Plex Mono 400 vs Consolas) */
@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 98.56%; ascent-override: 89.08%; descent-override: 21.31%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono Fallback"; src: local("Consolas"), local("Courier New"); size-adjust: 109.13%; ascent-override: 93.92%; descent-override: 25.20%; line-gap-override: 0%; }

:root {
  color-scheme: light;
  --concrete:#ECE9E3; --paper:#F6F4EF; --slab:#D8D4CB; --mortar:#5E5A51; --rebar:#1A1A19; --white:#FFFFFF;
  --signal:#C23A1A; --signal-ink:#A83016;
  --night:#151514; --night-2:#1F1F1D; --night-3:#2A2A27; --grid-night:#232321;
  --stone:#B9B5AC; --stone-2:#9C978D; --signal-night:#FF5A36;
  --rule-strong-light:#7D786E; --rule-strong-dark:#77736A;

  --bg: var(--concrete); --bg-raised: var(--paper); --bg-sunk: var(--slab); --card: var(--white);
  --text: var(--rebar); --text-2: var(--mortar); --text-3: var(--mortar);
  --accent: var(--signal); --accent-text: var(--signal-ink); --on-accent: var(--white);
  --line: var(--slab); --line-strong: var(--rule-strong-light); --grid-line: rgb(216 212 203 / .4);
  --focus: var(--rebar);
  --glass-fill: rgb(236 233 227 / .80); --glass-edge: rgb(255 255 255 / .55); --glass-highlight: rgb(255 255 255 / .50); --glass-solid: var(--paper);
  --edge-slab: 0 3px 0 var(--slab), 0 6px 0 var(--rule-strong-light);
  --edge-slab-hover: 0 2px 0 var(--slab), 0 4px 0 var(--rule-strong-light);
  --edge-slab-press: 0 0 0 var(--slab), 0 3px 0 var(--rule-strong-light);
  --shadow-float: 0 2px 4px rgb(26 26 25 / .06), 0 8px 16px -4px rgb(26 26 25 / .10);
  --shadow-lens: 0 4px 8px rgb(26 26 25 / .06), 0 16px 32px -8px rgb(26 26 25 / .16), 0 32px 64px -16px rgb(26 26 25 / .12);
  --grain: url("/assets/v1/img/grain-light.png");

  --font-sans: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, Consolas, monospace;

  /* type (3.3) */
  --fs-label: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --fs-small: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --fs-note: clamp(1rem, 0.97rem + 0.1vw, 1.0625rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-lede: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  --fs-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --fs-h2: clamp(2rem, 1.3rem + 3vw, 3.75rem);
  --fs-h1: clamp(2.625rem, 1.4rem + 5.4vw, 5.75rem);
  --fs-fig: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --fs-fig-xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);

  /* space (3.4) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --section-pad: clamp(4rem, 2.5rem + 6vw, 8rem);
  --max: 77.5rem; --max-wide: 90rem;

  /* radii (3.5) */
  --r-0: 0; --r-1: 2px; --r-float: 14px; --r-pill: 999px; --r-round: 50%;

  /* touch targets (brand v1.2): every control and stand-alone link is at least this tall */
  --tap: 44px;

  /* motion (3.9) */
  --dur-press: 80ms; --dur-fast: 150ms; --dur-base: 200ms; --dur-step: 240ms; --dur-reveal: 600ms;
  --dur-camera: 600ms; --dur-tilt-in: 900ms; --dur-ambient: 90s; --stagger: 60ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* Dark set, used by the dark theme and by .band-dark sections in either theme */
:root[data-theme="dark"], .band-dark {
  color-scheme: dark;
  --bg: var(--night); --bg-raised: var(--night-2); --bg-sunk: var(--night-3); --card: var(--night-2);
  --text: var(--concrete); --text-2: var(--stone); --text-3: var(--stone-2);
  --accent: var(--signal-night); --accent-text: var(--signal-night); --on-accent: var(--night);
  --line: #2E2E2B; --line-strong: var(--rule-strong-dark); --grid-line: var(--grid-night);
  --focus: var(--signal-night);
  --glass-fill: rgb(21 21 20 / .80); --glass-edge: rgb(255 255 255 / .10); --glass-highlight: rgb(255 255 255 / .08); --glass-solid: var(--night-2);
  --edge-slab: 0 3px 0 var(--night-3), 0 6px 0 #0B0B0A;
  --edge-slab-hover: 0 2px 0 var(--night-3), 0 4px 0 #0B0B0A;
  --edge-slab-press: 0 0 0 var(--night-3), 0 3px 0 #0B0B0A;
  --shadow-float: inset 0 1px 0 rgb(255 255 255 / .06), 0 8px 16px -4px rgb(0 0 0 / .5);
  --shadow-lens: inset 0 1px 0 rgb(255 255 255 / .07), 0 16px 32px -8px rgb(0 0 0 / .6), 0 32px 64px -16px rgb(0 0 0 / .5);
  --grain: url("/assets/v1/img/grain-dark.png");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--night); --bg-raised: var(--night-2); --bg-sunk: var(--night-3); --card: var(--night-2);
    --text: var(--concrete); --text-2: var(--stone); --text-3: var(--stone-2);
    --accent: var(--signal-night); --accent-text: var(--signal-night); --on-accent: var(--night);
    --line: #2E2E2B; --line-strong: var(--rule-strong-dark); --grid-line: var(--grid-night);
    --focus: var(--signal-night);
    --glass-fill: rgb(21 21 20 / .80); --glass-edge: rgb(255 255 255 / .10); --glass-highlight: rgb(255 255 255 / .08); --glass-solid: var(--night-2);
    --edge-slab: 0 3px 0 var(--night-3), 0 6px 0 #0B0B0A;
    --edge-slab-hover: 0 2px 0 var(--night-3), 0 4px 0 #0B0B0A;
    --edge-slab-press: 0 0 0 var(--night-3), 0 3px 0 #0B0B0A;
    --shadow-float: inset 0 1px 0 rgb(255 255 255 / .06), 0 8px 16px -4px rgb(0 0 0 / .5);
    --shadow-lens: inset 0 1px 0 rgb(255 255 255 / .07), 0 16px 32px -8px rgb(0 0 0 / .6), 0 32px 64px -16px rgb(0 0 0 / .5);
    --grain: url("/assets/v1/img/grain-dark.png");
  }
}
/* Inside the dark theme, a dark band lifts one step so the section rhythm survives */
:root[data-theme="dark"] .band-dark { --bg: var(--night-2); --card: var(--night-3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .band-dark { --bg: var(--night-2); --card: var(--night-3); } }

/* Paper objects: readout card, run console, dashboard specimen (and its lens clone). White sheets, light set, every context. */
.on-paper {
  color-scheme: light;
  --bg: var(--white); --bg-raised: var(--white); --bg-sunk: var(--concrete); --card: var(--white);
  --text: var(--rebar); --text-2: var(--mortar); --text-3: var(--mortar);
  --accent: var(--signal); --accent-text: var(--signal); --on-accent: var(--white);
  --line: var(--slab); --line-strong: var(--rule-strong-light); --focus: var(--rebar);
  --edge-slab: 0 3px 0 var(--slab), 0 6px 0 var(--rule-strong-light);
  --edge-slab-hover: 0 2px 0 var(--slab), 0 4px 0 var(--rule-strong-light);
  --edge-slab-press: 0 0 0 var(--slab), 0 3px 0 var(--rule-strong-light);
  background: var(--bg); color: var(--text); box-shadow: var(--edge-slab); border: 1px solid var(--slab);
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html:not([data-motion="paused"]) { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg) var(--grain); color: var(--text); font: 400 var(--fs-body)/1.55 var(--font-sans); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 800; font-stretch: 112%; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: .98; letter-spacing: -.035em; max-width: 13ch; }
h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.03em; max-width: 18ch; }
h3 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -.02em; }
h4 { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -.01em; font-weight: 700; font-stretch: 105%; }
p { text-wrap: pretty; max-width: 64ch; }
strong, b { font-weight: 600; }
a { color: inherit; text-decoration: underline 2px var(--accent); text-underline-offset: 4px; transition: color var(--dur-fast), text-decoration-thickness var(--dur-fast); }
@media (hover: hover) { a:hover { color: var(--accent-text); text-decoration-thickness: 3px; } }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
/* The fixed nav covers the top 68px: html scroll-padding keeps anchors and focused controls clear of it */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--rebar); color: var(--concrete); padding: 12px 16px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.mono, .label, .eyebrow, .tag, .fig, code { font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; }
.label { font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; }
.note { font-size: var(--fs-note); line-height: 1.5; color: var(--text); }
.note.mono { font-family: var(--font-mono); }
.lede { font-size: var(--fs-lede); line-height: 1.5; letter-spacing: -.005em; color: var(--text-2); max-width: 52ch; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; position: relative; }

/* ===== Buttons, links, tags ===== */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 14px 22px; font: 600 1rem/1 var(--font-sans); border-radius: 0; text-decoration: none; cursor: pointer; border: 0; box-shadow: var(--edge-slab);
  transition: translate var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-fast), color var(--dur-fast); }
.btn .i { transition: translate var(--dur-fast) var(--ease-out); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-secondary { background: transparent; color: var(--text); border: 2px solid var(--text); padding: 12px 20px; }
@media (hover: hover) {
  .btn:hover { translate: 0 1px; box-shadow: var(--edge-slab-hover); color: var(--bg); background: var(--text); text-decoration: none; }
  .btn-secondary:hover { color: var(--bg); }
  .btn:hover .i { translate: 3px 0; }
}
.btn:active { translate: 0 3px; box-shadow: var(--edge-slab-press); transition-duration: var(--dur-press); }
.btn-sm { min-height: var(--tap); padding: 10px 16px; font-size: .9375rem; }
.linkbtn { background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--text); font: 500 var(--fs-note)/1.4 var(--font-sans); text-decoration: underline 2px var(--accent); text-underline-offset: 4px; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); }
@media (hover: hover) { .linkbtn:hover { color: var(--accent-text); text-decoration-thickness: 3px; } }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); align-items: center; }
/* Stand-alone links (not inside a sentence) get a full-height hit area */
.actions > a:not(.btn), .builds li > a, .contact-note > a:only-child, .founder-text p > a:only-child, .contact-rows a.val { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }
.tag { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-1); color: var(--text); white-space: nowrap; }
.tag::before { content: ""; width: 8px; height: 8px; flex: none; border: 1.5px solid var(--text); }

/* ===== Glass (3.7) ===== */
.glass { background: var(--glass-fill); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-float); color: var(--text); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--glass-solid); } }
@media (prefers-reduced-transparency: reduce) { .glass { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }

.menu { border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; background: var(--bg); color: var(--text); }
.menu::backdrop { background: rgb(21 21 20 / .6); }
.menu[open] { display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) { html:not([data-motion="paused"]) .menu[open] { animation: sheet-up var(--dur-step) var(--ease-out); } }
@keyframes sheet-up { from { translate: 0 24px; opacity: 0; } }
.menu-top { display: flex; justify-content: space-between; align-items: center; padding: 18px var(--gutter); }
.menu-close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 14px; background: transparent; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); cursor: pointer; font-weight: 600; }
.menu-links { padding: var(--s-4) var(--gutter); display: grid; gap: var(--s-2); overflow-y: auto; flex: 1; }
.menu-links a { font-size: var(--fs-h3); font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; text-decoration: none; display: block; padding: 4px 0; }
.menu-foot { padding: var(--s-5) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom)); }

.hero-stats { grid-column: 1 / -1; border-top: 2px solid var(--text); padding-top: var(--s-5); position: relative; z-index: 1; }
.stats-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); font-size: var(--fs-note); max-width: none; }
.stat-tiles { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--s-5); container-type: inline-size; }
.stat { padding: var(--s-5) 0; border-top: 1px solid var(--line); display: grid; gap: var(--s-2); align-content: start; }
.stat .fig { font-size: var(--fs-fig-xl); font-weight: 500; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.stat .cap { font-size: var(--fs-note); line-height: 1.45; max-width: 30ch; }
.stat .src { font-family: var(--font-mono); font-size: var(--fs-note); color: var(--text); }
@media (min-width: 720px) {
  .stat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* three columns: size the figures to the row so "30 of 30" stays on one line from 720 px up */
  .stat .fig { font-size: min(var(--fs-fig-xl), 5.6cqi); }
  .stat { border-top: 0; padding: 0 var(--s-5); border-left: 1px solid var(--line); }
  .stat:first-child { padding-left: 0; border-left: 0; }
}
.motion-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: transparent; border: 1px solid var(--line-strong); color: var(--text); cursor: pointer; font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.motion-btn .i { width: 16px; height: 16px; }

/* Readout card (paper object) */
.readout { padding: var(--s-5); font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; display: grid; gap: var(--s-4); min-height: 25rem; }
.ro-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding-bottom: var(--s-3); border-bottom: 2px solid var(--text); }
.ro-title { font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.ro-rows > div { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-note); }
.ro-rows dt { color: var(--text-2); }
.ro-rows dd { font-weight: 500; text-align: right; display: inline-flex; align-items: center; gap: 10px; position: relative; }
.ro-rb dd { color: var(--accent); font-size: 1.25rem; }
.ro-write { position: relative; display: inline-block; }
.ro-write::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--text); transform-origin: left; scale: 0 1; }
.ring { width: 22px; height: 22px; }
.ring circle { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 63 63; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: center; }
.ring path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: square; }
.pool { display: inline-grid; justify-items: end; }
.pool > span { grid-area: 1 / 1; transition: opacity var(--dur-fast) var(--ease-out); }
.pool .pool-a { opacity: 0; }
.ro-foot { font-family: var(--font-sans); font-size: var(--fs-note); color: var(--text); line-height: 1.45; }
.ro-foot .linkbtn { position: relative; padding: 0; min-height: 24px; }
.ro-foot .linkbtn::after { content: ""; position: absolute; inset: -10px -8px; } /* 44 px hit area without opening up the line */
/* run animation states, set by main.js */
.readout.ro-pre .ro-rb dd { color: var(--text); }
.readout.ro-pre .ring circle { stroke-dashoffset: 63; }
.readout.ro-pre .ring path { opacity: 0; }
.readout.ro-pre .pool-a { opacity: 1; }
.readout.ro-pre .pool-b { opacity: 0; }
.readout.ro-pre .ro-write { opacity: 0; }
.readout.ro-go .ro-write { opacity: 1; transition: opacity 60ms linear; }
.readout.ro-go .ro-write::after { scale: 1 1; transition: scale 120ms var(--ease-out); }
.readout.ro-go2 .ring circle { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-step) var(--ease-out); }
.readout.ro-go2 .ring path { opacity: 1; transition: opacity 80ms linear var(--dur-step); }
.readout.ro-go2 .ro-rb dd { color: var(--accent); transition: color var(--dur-fast) var(--dur-step); }
.readout.ro-go3 .pool-a { opacity: 0; }
.readout.ro-go3 .pool-b { opacity: 1; }
.card { border-top: 1px solid var(--line-strong); padding-top: var(--s-4); display: grid; gap: var(--s-3); }
.card h3 { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -.01em; font-weight: 700; font-stretch: 105%; }
.card .mono { font-size: var(--fs-note); }
.closing { margin-top: var(--s-8); padding: var(--s-6) 0; border-top: 2px solid var(--text); border-bottom: 1px solid var(--line-strong); display: grid; gap: var(--s-4); }
.closing-h { font-size: var(--fs-h3); font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; line-height: 1.12; max-width: 24ch; }
.closing p:not(.closing-h) { font-size: var(--fs-lede); max-width: 56ch; }

/* ===== How it works (6.4) ===== */
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); container-type: inline-size; }
.how-steps { position: relative; padding-left: 36px; display: grid; }
.how-spine { position: absolute; left: 6px; top: 0; bottom: 0; width: 3px; background: var(--accent); transform-origin: top; scale: 1 1; }
.step { position: relative; display: grid; gap: var(--s-4); align-content: start; padding-bottom: var(--s-8); }
.step-n { font-family: var(--font-mono); font-size: var(--fs-fig); font-weight: 500; line-height: 1.1; color: var(--accent); }
.step h3 { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -.01em; font-weight: 700; font-stretch: 105%; scroll-margin-top: calc(50vh - 88px); }
.step p { color: var(--text); }
.node { position: absolute; left: -36px; top: calc(var(--fs-fig) * 1.1 + var(--s-4) + .3em); width: 15px; height: 15px; border: 2px solid var(--accent); background: var(--bg); transition: background-color var(--dur-step) var(--ease-out); }
.step.is-active .node, .how-static .node { background: var(--accent); }
.loadpath { display: grid; gap: 0; margin: var(--s-3) 0 var(--s-2); font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.lp-line { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
.lp-line li { display: inline-flex; align-items: center; }
.lp-line li + li::before { content: ""; width: clamp(12px, 1.6vw, 24px); height: 3px; background: var(--accent); margin: 0 6px; }
.lp-box { border: 1px solid var(--line-strong); padding: 6px 8px; background: var(--bg); white-space: nowrap; }
.lp-branch { margin: 0 0 0 28px; padding: 18px 0 0 18px; border-left: 3px dashed var(--accent); text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: var(--fs-note); }
.how-wait { margin-top: var(--s-6); font-size: var(--fs-lede); max-width: 60ch; }
.how-console { display: grid; gap: var(--s-3); align-content: start; }
@media (min-width: 1024px) {
  .how-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); }
  .how-steps { --col: calc((100cqw - 11 * var(--s-5)) / 12); grid-column: 1 / 7; padding-left: 0; padding-right: calc(var(--col) + var(--s-5)); }
  .how-spine { left: auto; right: calc(var(--col) / 2 - 1.5px); }
  .step { min-height: 70vh; padding-bottom: var(--s-7); }
  .node { left: auto; right: calc(-1 * (var(--s-5) + var(--col) / 2) - 7.5px); }
  .how-console { grid-column: 7 / 13; position: sticky; top: 88px; max-height: calc(100vh - 112px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 8px; }
}
#how .how-grid { timeline-scope: --steps; }
#how .how-steps { view-timeline: --steps block; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html:not([data-motion="paused"]) .how-spine { animation: spine linear both; animation-timeline: --steps; animation-range: cover 10% cover 80%; }
  }
}
@keyframes spine { from { scale: 1 0; } to { scale: 1 1; } }
.how-spine.js-scale { animation: none !important; transition: scale var(--dur-step) var(--ease-out); }

/* Run console (paper object) */
.console { container-type: inline-size; padding: var(--s-5); display: grid; gap: var(--s-4); min-height: 30rem; }
.console h3 { font-size: var(--fs-h4); font-weight: 700; font-stretch: 105%; letter-spacing: -.01em; }
.con-sub { font-size: var(--fs-note); color: var(--text); }
.run { border-top: 1px solid var(--line); padding: var(--s-3) 0; }
.run summary { cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-note); font-weight: 500; display: flex; gap: 12px; min-height: 44px; align-items: center; }
.run .idx, .tab .idx { color: var(--accent); }
.rows { font-family: var(--font-mono); font-size: var(--fs-note); line-height: 1.45; font-variant-numeric: tabular-nums slashed-zero; }
.row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; }
.row .k { color: var(--text-2); }
.row .ck { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 500; }
.row .ck .ring { width: 20px; height: 20px; }
@container (min-width: 30rem) {
  .row.kv { grid-template-columns: 40% minmax(0, 1fr); }
  .row.kv.vr { grid-template-columns: 40% minmax(0, 1fr) auto; }
  .row .ck { justify-self: end; }
}
.run-foot { font-family: var(--font-mono); font-size: var(--fs-note); color: var(--text); margin-top: var(--s-3); }
.con-ui { display: grid; gap: var(--s-4); }
.con-tabs { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; scrollbar-width: thin; }
.tab { scroll-snap-align: start; flex: none; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); background: var(--white); color: var(--text); cursor: pointer; font: 500 .9375rem/1.25 var(--font-mono); text-align: left; box-shadow: 0 2px 0 var(--slab);
  transition: translate var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-fast); }
.tab[aria-selected="true"] { background: var(--rebar); color: var(--white); border-color: var(--rebar); }
.tab[aria-selected="true"] .idx { color: #FF8A6E; }
@media (hover: hover) { .tab:hover { translate: 0 1px; box-shadow: 0 1px 0 var(--slab); } }
.tab:active { translate: 0 2px; box-shadow: none; }
@container (min-width: 52rem) {
  .con-ui { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
  .con-tabs { flex-direction: column; overflow: visible; padding: 0; }
  .tab { width: 100%; }
}
.con-pane { container-type: inline-size; display: grid; gap: var(--s-3); min-height: 19rem; view-transition-name: console-pane; }
.con-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.con-prompt { font-family: var(--font-mono); font-size: var(--fs-note); font-weight: 500; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 3px; gap: 2px; background: var(--white); }
.seg button { min-height: var(--tap); min-width: var(--tap); padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; cursor: pointer; font: 500 .875rem/1 var(--font-mono); letter-spacing: .04em; color: var(--text); }
.seg button[aria-checked="true"] { background: var(--rebar); color: var(--white); }
.con-frame { width: 100%; max-width: 100%; margin-inline: auto; container-type: inline-size; view-transition-name: device-frame; border: 1px dashed transparent; transition: max-width var(--dur-step) var(--ease-in-out); }
.con-frame.dev-narrow { border-color: var(--line-strong); padding: 0 12px; }
.con-frame .row { opacity: 1; }
.con-frame .row.pre { opacity: 0; translate: 0 6px; }
.con-frame .row.in { opacity: 1; translate: 0 0; transition: opacity var(--dur-step) var(--ease-out), translate var(--dur-step) var(--ease-out); }
.con-frame .ring circle { transition: stroke-dashoffset var(--dur-step) var(--ease-out); }
.con-frame .row.pre .ring circle { stroke-dashoffset: 63; }
.approve { border: 2px solid var(--text); padding: var(--s-4); display: grid; gap: var(--s-4); margin: var(--s-2) 0; }
.approve p { font-family: var(--font-mono); font-size: var(--fs-note); font-weight: 500; }
.approve .label { color: var(--text-2); }
.con-hint { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-2); letter-spacing: .02em; }
.band-dark .con-hint { color: var(--text-2); }
.console.upgraded .con-static { display: none; }
.console:not(.upgraded) .con-ui { display: none; }

/* ===== Ledger (6.5) ===== */
.legend { display: grid; gap: var(--s-4); margin-bottom: var(--s-5); }
.legend li { display: grid; gap: var(--s-2); justify-items: start; font-size: var(--fs-note); }
.legend-note { font-size: var(--fs-note); margin-bottom: var(--s-7); }
@media (min-width: 1024px) { .legend { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-5); } }
.ledger { width: 100%; border-collapse: collapse; font-size: var(--fs-note); line-height: 1.5; }
.ledger caption { text-align: left; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); padding-bottom: var(--s-3); }
.ledger thead th { text-align: left; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 10px 16px 10px 0; border-bottom: 2px solid var(--text); }
.ledger td, .ledger tbody th { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line-strong); }
.ledger tbody th[scope="row"] { font-weight: 600; font-family: var(--font-sans); }
.ledger .grp th { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); padding-top: var(--s-6); border-bottom: 1px solid var(--text); }
.ledger col.c1 { width: 22%; } .ledger col.c2 { width: 34%; } .ledger col.c3 { width: 30%; } .ledger col.c4 { width: 14%; }
@media (max-width: 719.98px) {
  .ledger, .ledger tbody, .ledger tr, .ledger td, .ledger th { display: block; width: 100%; }
  .ledger colgroup { display: none; }
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ledger tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--line-strong); }
  .ledger tr.grp { padding: 0; border: 0; }
  .ledger td, .ledger tbody th[scope="row"] { border: 0; padding: 4px 0; }
  .ledger tbody th[scope="row"] { font-size: var(--fs-h4); }
  .ledger td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-top: var(--s-2); }
}
.block h3 { font-size: var(--fs-h4); font-weight: 700; font-stretch: 105%; letter-spacing: -.01em; margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 2px solid var(--text); }
.dlist > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding: var(--s-4) 0; border-bottom: 1px solid var(--line-strong); }
.dlist dt { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text); padding-top: 3px; }
.dlist dd { font-size: var(--fs-body); line-height: 1.5; }
@media (min-width: 720px) { .dlist > div { grid-template-columns: 180px minmax(0, 1fr); gap: var(--s-5); } }
.vendors { width: 100%; border-collapse: collapse; font-size: var(--fs-note); }
.vendors th, .vendors td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line-strong); }
.vendors thead th { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid var(--text); }
.tscroll { overflow-x: auto; }
@media (max-width: 719.98px) {
  .vendors, .vendors tbody, .vendors tr, .vendors th, .vendors td { display: block; width: 100%; }
  .vendors thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vendors tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--line-strong); }
  .vendors tbody th, .vendors td { border: 0; padding: 2px 0; }
  .vendors tbody th[scope="row"] { font-weight: 600; }
  .vendors td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-top: var(--s-2); }
}
.after-table { margin-top: var(--s-4); font-size: var(--fs-note); }
.wave { position: relative; flex: 1 1 12rem; min-width: 0; max-width: 28rem; height: 40px; --p: 0; }
.wave .bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.wave .bars span { flex: 1 1 0; min-height: 3px; height: calc(var(--h) * 100%); background: var(--text-2); opacity: .55; }
.wave .fill { clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0); }
.wave .fill span { background: var(--signal-night); opacity: 1; }
@media (forced-colors: active) { .wave .bars span { background: CanvasText; opacity: 1; } .wave .fill span { background: Highlight; } }
.tally-blocks { display: grid; gap: var(--s-6); margin-top: var(--s-8); }
.tally-blocks > div { border-top: 1px solid var(--line-strong); padding-top: var(--s-4); display: grid; gap: var(--s-3); align-content: start; justify-items: start; }
.tally-blocks h3 { font-size: var(--fs-h4); font-weight: 700; font-stretch: 105%; letter-spacing: -.01em; }
@media (min-width: 1024px) { .tally-blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-5); } }
.rules { margin-top: var(--s-8); }
.rules .label { color: var(--text-2); margin-bottom: var(--s-4); }
.rule { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding: var(--s-4) 0; border-bottom: 1px solid var(--line-strong); align-items: center; }
.rule .join { height: 3px; width: 48px; background: var(--accent); }
.rule .to { font-weight: 600; }
@media (min-width: 720px) { .rule { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: var(--s-4); } .rule .join { width: 100%; } }
.foot-note { margin-top: var(--s-5); font-size: var(--fs-note); }

/* ===== Pricing and terms (6.8) ===== */
.svc-grid { display: grid; gap: var(--s-8); grid-template-areas: "offer" "terms" "also"; }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); grid-template-areas: "offer terms" "also also"; } }
.offer { grid-area: offer; display: grid; gap: var(--s-5); align-content: start; }
.terms { grid-area: terms; align-content: start; }
.offer > .label, .terms > .label { color: var(--text-2); }
.offer h3 { font-size: var(--fs-h3); }
.steps4 { display: grid; gap: var(--s-4); counter-reset: s; }
.steps4 li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line-strong); }
.steps4 li::before { counter-increment: s; content: "0" counter(s); font-family: var(--font-mono); font-weight: 500; color: var(--accent-text); font-size: var(--fs-note); padding-top: 2px; }
.price { position: relative; background: var(--bg-raised); border: 1px solid var(--line); padding: calc(var(--s-5) + 6px) var(--s-5) var(--s-5); display: grid; gap: var(--s-3); }
.price::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 6px; background: var(--text); }
.price .label { color: var(--text-2); }
.also { grid-area: also; background: var(--bg-raised); border: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 3rem); display: grid; gap: var(--s-6); grid-template-areas: "head" "builds" "specimen" "notes" "advisory"; }
.also-head { grid-area: head; display: grid; gap: var(--s-3); }
.also-head .label { color: var(--text-2); }
.also-head p { max-width: 60ch; }
.builds { grid-area: builds; display: grid; gap: var(--s-5); }
.builds li { display: grid; gap: var(--s-2); align-content: start; border-top: 1px solid var(--line-strong); padding-top: var(--s-3); }
.builds h4 { font-size: var(--fs-body); font-weight: 700; font-stretch: 105%; }
.builds p { font-size: var(--fs-note); }
.builds a { font-size: var(--fs-note); justify-self: start; }
@media (min-width: 720px) { .builds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .also { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); grid-template-areas: "head head head head head head head head head head head head" "builds builds builds builds builds builds builds builds builds builds builds builds" "specimen specimen specimen specimen specimen specimen specimen specimen notes notes notes notes" "advisory advisory advisory advisory advisory advisory advisory advisory advisory advisory advisory advisory"; }
  .builds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.notes { grid-area: notes; display: grid; gap: var(--s-4); align-content: start; justify-items: start; }
.advisory { grid-area: advisory; border-top: 1px solid var(--line-strong); padding-top: var(--s-4); font-size: var(--fs-body); max-width: none; }
.advisory .adv-label { margin-right: var(--s-3); color: var(--text-2); }

/* Specimen (paper object) */
.specimen-wrap { grid-area: specimen; position: relative; max-height: 26rem; overflow: hidden; border-radius: var(--r-float);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
.specimen { container-type: inline-size; padding: var(--s-5); font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; }
.sp-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding-bottom: var(--s-3); border-bottom: 2px solid var(--text); margin-bottom: var(--s-4); }
.sp-head .label { color: var(--text); }
.tiles { display: grid; gap: var(--s-4); }
.tile { border: 1px solid var(--line); padding: var(--s-4); display: grid; gap: var(--s-2); align-content: start; font-size: var(--fs-note); }
.tile .t { font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.tile .v { font-size: var(--fs-fig); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }
.tile .s { color: var(--text-2); }
.bars { display: grid; gap: 8px; margin-top: var(--s-2); }
.bar { display: grid; gap: 4px; }
.bar .bl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline; }
.bar .bl > span:last-child { white-space: nowrap; text-align: right; }
.bar .flag { display: inline-block; margin-left: 4px; padding: 0 4px; border: 1px solid currentColor; font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.35; color: var(--accent-text); white-space: nowrap; }
.bar svg { width: 100%; height: 8px; }
.bar rect.bg { fill: var(--concrete); }
.bar rect.fg { fill: var(--rebar); }
.bar.hi rect.fg { fill: var(--signal); }
@container (min-width: 36rem) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@container (min-width: 56rem) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tile:last-child:nth-child(odd) { grid-column: auto / span 2; } }
@media (max-width: 479.98px) {
  .also { padding: var(--s-5) var(--s-3); }
  .specimen { padding: var(--s-3); }
  .tiles { gap: 0; }
  .tile { border: 0; border-top: 1px solid var(--line); padding: var(--s-4) 0; }
  .tile:first-child { border-top: 0; padding-top: 0; }
}
.lens { position: absolute; left: 0; top: 0; z-index: 5; width: 180px; height: 180px; border-radius: var(--r-round); overflow: hidden; pointer-events: none; border: 2px solid var(--rebar); box-shadow: var(--shadow-lens); background: var(--white); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.lens.on { opacity: 1; }
.lens .lens-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.full { border: 0; padding: 0; width: min(100% - 2 * var(--gutter), 72rem); max-height: calc(100% - 2 * var(--gutter)); background: var(--paper); color: var(--rebar); box-shadow: var(--shadow-lens); }
.full::backdrop { background: rgb(21 21 20 / .7); }
.full-top { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--paper); border-bottom: 1px solid var(--slab); }
.full-top h2 { font-size: var(--fs-h4); font-weight: 700; font-stretch: 105%; max-width: none; letter-spacing: -.01em; }
.full-body { overflow: auto; touch-action: pinch-zoom pan-x pan-y; padding: var(--s-5); }
.full-body .specimen { width: 1280px; font-size: 125%; }
/* O10 (11/7/26): no photo at launch, so a typographic card, not a photo slot. Square structure on a slab edge, one Signal load-path line. */
.fcard { position: relative; max-width: 360px; align-self: start; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--edge-slab); padding: var(--s-6) var(--s-5) var(--s-5) calc(var(--s-5) + 9px); display: grid; gap: var(--s-4); }
.fcard::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: -1px; width: 3px; background: var(--accent); }
.fcard .name { font-size: var(--fs-h3); font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; line-height: 1.1; }
.fcard .creds { gap: var(--s-2); }
.founder-text { display: grid; gap: var(--s-5); align-content: start; }
.creds { display: grid; gap: 4px; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.founder-text .first { font-size: var(--fs-lede); font-weight: 600; }
.entity-line { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text); letter-spacing: .02em; }
@media (min-width: 1024px) { .fcard { grid-column: 1 / 6; max-width: none; } .founder-text { grid-column: 6 / 13; } }

/* ===== Southeast map (6.10, 8) ===== */
.map-panel { position: relative; width: 100%; aspect-ratio: 4 / 5; background: var(--bg); border: 1px solid var(--line); container-type: size; overflow: hidden; }
@media (min-width: 1024px) { .map-panel { aspect-ratio: 16 / 10; } }
.se-stage { position: absolute; inset: 0; margin: auto; width: min(100cqw, 100cqh * var(--se-ratio, .95)); aspect-ratio: var(--se-ratio, .95); }
.se-svg { width: 100%; height: 100%; overflow: hidden; touch-action: pan-y; }
.se-ctx path { fill: var(--night-3); }
.se-st { fill: var(--concrete); stroke: #151514; stroke-width: .75; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 0 #8A857B) drop-shadow(0 2px 0 #77736A) drop-shadow(0 2px 0 #5E5A51); cursor: pointer; transition: translate var(--dur-base) var(--ease-out), filter var(--dur-base); }
.se-st.sel { translate: 0 -3px; filter: drop-shadow(0 3px 0 #8A857B) drop-shadow(0 3px 0 #77736A) drop-shadow(0 3px 0 #5E5A51); }
.se-sel path { fill: none; stroke: #FF5A36; stroke-width: 1.5; vector-effect: non-scaling-stroke; translate: 0 -3px; }
.se-stems line { stroke: #FF5A36; stroke-width: 2; vector-effect: non-scaling-stroke; }
.se-labels, .pins { position: absolute; inset: 0; pointer-events: none; }
.se-lab { position: absolute; translate: -50% -50%; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; color: var(--mortar); pointer-events: none; } /* Mortar, not Stone: the labels sit on the Concrete slabs (5.67:1) */
.pins li { position: absolute; width: 0; height: 0; margin-top: -12px; }
.map-panel.is-3d .se-stage { width: 100%; height: 100%; aspect-ratio: auto; }
.map-panel.is-3d .pins li, .map-panel.is-3d .se-lab { left: 0 !important; top: 0 !important; margin-top: 0; }
.map-panel.is-3d .se-stems { display: none; }
.se-group { position: absolute; inset: 0; outline-offset: -3px; }
.map-panel.is-3d .se-group { pointer-events: none; }
.pin { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto; display: grid; place-items: center; }
.pin::before { content: ""; width: 12px; height: 12px; background: var(--signal); box-shadow: 0 0 0 2px var(--rebar); transition: width var(--dur-fast), height var(--dur-fast), box-shadow var(--dur-fast); }
.pin[aria-expanded="true"]::before { width: 16px; height: 16px; background: var(--rebar); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--signal); }
.pin:focus-visible { outline: 2px solid var(--rebar); outline-offset: 0; box-shadow: 0 0 0 4px var(--white); }
.pin:disabled { cursor: default; }
/* Narrow maps: a 28 px hit box keeps each pin's centre clear of its neighbour (Orlando and Tampa sit 23 px apart at 390) */
@media (max-width: 519.98px) { .pin { width: 28px; height: 28px; left: -14px; top: -14px; } }
.map-panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 300ms var(--ease-out); touch-action: pan-y; }
.map-panel canvas.on { opacity: 1; }
.map-panel.is-3d .se-svg { visibility: hidden; }
.map-panel.touch-on canvas { touch-action: none; }
.mapbar { position: absolute; z-index: 3; top: 12px; left: 12px; right: 12px; border-radius: var(--r-float); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 10px; }
.mapbar.solid { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
.mapbar .ctl { min-width: 44px; min-height: 44px; padding: 0 10px; display: inline-grid; place-items: center; background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; color: var(--text); font: 500 .875rem/1 var(--font-mono); letter-spacing: .04em; }
@media (hover: hover) { .mapbar .ctl:hover { border-color: var(--line-strong); } }
.mapbar .ctl:disabled { opacity: .4; cursor: default; }
.mapbar .ctl[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.mapbar .count { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; color: var(--text-2); }
.mapbar .sname { font-weight: 700; font-stretch: 105%; font-size: 1rem; min-width: 9.5rem; }
.mapbar .div { display: block; width: 1px; align-self: stretch; background: var(--line-strong); margin: 4px 2px; }
.mapbar .facts { flex-basis: 100%; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text); padding: 2px 4px 4px; letter-spacing: .02em; }
.pincard { position: absolute; z-index: 4; width: 280px; max-width: calc(100% - 24px); background: var(--glass-solid); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-float); box-shadow: var(--shadow-float); padding: var(--s-4); display: grid; gap: var(--s-2); container-type: inline-size; }
.pincard h3 { font-size: var(--fs-h4); font-weight: 700; font-stretch: 105%; letter-spacing: -.01em; padding-right: 44px; }
.pincard p { font-size: var(--fs-note); }
.pincard .x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: var(--text); }
@media (max-width: 719.98px) { .pincard { left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; max-width: none; } }
.map-hint { margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-2); letter-spacing: .02em; }

/* Phones: the map's control bar sits above the map instead of over it (it wraps to more rows there) */
@media (max-width: 719.98px) {
  .map-panel { aspect-ratio: auto; container-type: inline-size; display: flex; flex-direction: column; }
  .mapbar { position: relative; top: auto; left: auto; right: auto; margin: 8px; }
  .mapbar .sname { min-width: 0; flex: 1 0 auto; }
  .mapbar .div { display: none; }
  .mapbar .count { display: none; }
  .map-panel.card-open .mapbar .facts { display: none; }
  .se-group { position: relative; inset: auto; width: 100%; aspect-ratio: var(--se-ratio, .95); }
  .se-stage, .map-panel.is-3d .se-stage { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; }
  .map-panel canvas { top: auto; bottom: 0; height: calc(100cqw / var(--se-ratio, .95)); }
  .ledger caption { display: block; width: 100%; }
  
  
  
  
  
  
}

/* ===== FAQ (6.11) ===== */
.faq { border-top: 2px solid var(--text); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-5) 0; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: var(--fs-h4); font-weight: 700; font-stretch: 105%; letter-spacing: -.01em; }
.faq summary .i { width: 24px; height: 24px; transition: rotate var(--dur-fast) var(--ease-out); }
.faq details[open] summary .i { rotate: 45deg; }
.faq .ans { padding: 0 0 var(--s-6); max-width: 64ch; }

/* ===== Contact (6.12) ===== */
.contact-rows { border-top: 2px solid var(--text); margin-top: var(--s-6); }
.contact-rows > div { display: grid; gap: var(--s-2) var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); align-items: center; }
.contact-rows dt { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.contact-rows dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.contact-rows .val { font-size: var(--fs-h4); font-weight: 700; font-stretch: 105%; user-select: all; }
@media (min-width: 720px) { .contact-rows > div { grid-template-columns: 160px minmax(0, 1fr); } }
.contact-note { margin-top: var(--s-5); font-size: var(--fs-note); max-width: 64ch; }
html:not(.js) .js-only { display: none !important; }

/* ===== Reveals (7.2) ===== */
.reveal { opacity: 1; translate: none; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html:not([data-motion="paused"]) .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  }
  html:not([data-motion="paused"]) .reveal.pre { opacity: 0; translate: 0 16px; }
  html:not([data-motion="paused"]) .reveal.pre.in { animation: rise var(--dur-reveal) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
}
@keyframes rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

/* ===== Reduced motion / paused ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; }
  .how-spine { scale: 1 1 !important; }
}
html[data-motion="paused"] .con-frame, html[data-motion="paused"] .faq summary .i { transition: none; }

/* ===== Small pages ===== */
.page { padding-top: calc(56px + 12px + var(--section-pad) * .6); min-height: 70vh; }
.narrow { width: min(100% - 2 * var(--gutter), 44rem); margin-inline: auto; }
.prose { display: grid; gap: var(--s-5); }
.prose h1 { margin-bottom: var(--s-3); }
.prose h2 { font-size: var(--fs-h3); max-width: none; margin-top: var(--s-5); }

/* ===== Forced colors ===== */
@media (forced-colors: active) {
  .glass, .mapbar, .pincard { background: Canvas; border-color: CanvasText; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .btn, .on-paper { box-shadow: none; border: 1px solid CanvasText; }
  .sec > .wrap::before, body, .sec { background-image: none; }
  
  .ring circle, .ring path { stroke: Highlight; }
  .tag::before { forced-color-adjust: none; border-color: CanvasText; }
}

/* ===== Print (7.9) ===== */
@media print {
  :root, .band-dark, .on-paper { --bg: #fff; --bg-raised: #fff; --card: #fff; --text: #1A1A19; --text-2: #1A1A19; --line: #bbb; --line-strong: #888; --accent: #1A1A19; --accent-text: #1A1A19; }
  body, .sec { background: #fff !important; color: #1A1A19; }
  .nav, .menu, .map-panel, .map-hint, .con-ui, .con-hint, .controls, .skip, .sec > .wrap::before, .lens, .notes .btn { display: none !important; }
  .js .con-static { display: block !important; }
  .reveal, .reveal.pre { animation: none !important; opacity: 1 !important; translate: none !important; }
  .how-console { position: static; max-height: none; }
  .step { min-height: 0; }
  .faq details > *:not(summary) { display: block; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  .on-paper, .btn { box-shadow: none; }
}

/* =====================================================================================
   v2 (DESIGN-v2.md, SPEC-v2.md): hamol chrome + Stellar flow on the Load-bearing palette.
   Everything above this line is the v1 component set (readout,
   console, ledger, map, specimen, FAQ), kept as is; everything below sets the v2 grounds, type, chrome and home sections.
   ===================================================================================== */
@font-face { font-family: "Instrument Serif"; src: url("/assets/v2/fonts/instrument-serif-italic-latin.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Georgia Italic sized to Instrument Serif Italic's advance widths and vertical metrics (measured 11/7/26), so the swap does not shift layout */
@font-face { font-family: "Instrument Serif Fallback"; src: local("Georgia Italic"), local("Georgia-Italic"); font-style: italic; size-adjust: 79.03%; ascent-override: 125.27%; descent-override: 39.23%; line-gap-override: 0%; }

:root {
  /* DESIGN-v2 3: the one accent token. Set it to var(--font-sans) to switch every accent back to Archivo. */
  --accent-serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif;
  --ease-v2: cubic-bezier(.2, .7, .2, 1);
  --nav-h: 84px;
  --fs-eyebrow: .875rem; /* 14 px floor (SPEC 3.13) */
  --fs-title: clamp(2.25rem, 1.15rem + 3.6vw, 4.5rem);
  --fs-display: clamp(2.625rem, 1.2rem + 5vw, 6rem);
  --fs-statement: clamp(2rem, .85rem + 4.3vw, 5.25rem);
  --sec-gap: clamp(5.5rem, 3.2rem + 5.4vw, 8.5rem);
  --pill-line: rgb(236 233 227 / .14);
}
html { scroll-padding-top: calc(var(--nav-h) + 8px); }

/* ---- Type ---- */
.ser { font-family: var(--accent-serif); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: -.005em; font-size: 1.06em; line-height: .9; }
h2 { font-size: var(--fs-title); font-weight: 400; font-stretch: 100%; line-height: 1.04; letter-spacing: -.035em; max-width: 19ch; }
.eyebrow { max-width: none; font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); line-height: 1.3; margin-bottom: var(--s-5); }
.sub-title { font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3.25rem); max-width: 22ch; margin-bottom: var(--s-6); }
.sub-lede { margin: calc(-1 * var(--s-3)) 0 var(--s-7); }
.src-label { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); line-height: 1.2; }

/* ---- Grounds ---- */
.sec { position: relative; isolation: isolate; padding-block: var(--sec-gap); background-color: var(--bg); background-image: var(--grain); color: var(--text); }
.sec + .sec:not(.band-dark):not(.page-head) { padding-top: calc(var(--sec-gap) * .5); }
.band-dark + .sec:not(.band-dark), .sec:not(.band-dark) + .band-dark { padding-top: var(--sec-gap); }
.pg-home .hero, .pg-home .gap-sec, .pg-home .journey-sec { --bg: var(--night); }

/* ---- Pills (DESIGN-v2 3) ---- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--tap); padding: 10px 20px; border-radius: var(--r-pill); border: 1px solid transparent;
  font: 500 .9375rem/1.1 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), translate var(--dur-base) var(--ease-v2); }
.pill .i { width: 18px; height: 18px; transition: translate var(--dur-base) var(--ease-v2); }
.pill-solid { background: var(--text); color: var(--bg); }
.pill-outline { background: transparent; color: var(--text); border-color: color-mix(in srgb, var(--text) 55%, transparent); }
.pill-lg { min-height: 56px; padding: 16px 28px; font-size: 1rem; }
.pill-sm { min-height: var(--tap); padding: 8px 16px; font-size: .875rem; }
@media (hover: hover) {
  .pill-solid:hover { background: var(--accent); color: var(--on-accent); text-decoration: none; }
  .pill-outline:hover { background: var(--text); color: var(--bg); border-color: var(--text); text-decoration: none; }
  .pill:hover .i { translate: 2px -2px; }
}
.pill:active { translate: 0 1px; transition-duration: var(--dur-press); }

/* ---- Nav (hamol chrome: wordmark left, centered glass pill, solid pill CTA right) ---- */
.nav { position: fixed; z-index: 50; inset: 0 0 auto; height: var(--nav-h); padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-4); pointer-events: none; color: var(--text); }
.nav > * { pointer-events: auto; }
.nav-logo { justify-self: start; display: inline-flex; align-items: center; min-height: var(--tap); padding: 8px 14px; margin-left: -14px; border-radius: var(--r-pill); color: var(--text); text-decoration: none; transition: background-color var(--dur-base), box-shadow var(--dur-base); }
.nav.scrolled .nav-logo { background: color-mix(in srgb, var(--bg) 72%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.lockup { height: 24px; width: auto; color: var(--text); }
.nav-pill { border-radius: var(--r-pill); padding: 4px; background: color-mix(in srgb, var(--bg) 58%, transparent); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.nav-links { display: flex; gap: 2px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: var(--r-pill); color: var(--text); text-decoration: none; font-size: .9375rem; transition: background-color var(--dur-fast); }
.nav-links a[aria-current="page"] { background: color-mix(in srgb, var(--text) 13%, transparent); }
@media (hover: hover) { .nav-links a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } }
.nav-end { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: var(--s-3); }
.nav-menu { display: none; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 16px; border: 1px solid color-mix(in srgb, var(--text) 30%, transparent); border-radius: var(--r-pill); background: color-mix(in srgb, var(--bg) 58%, transparent); color: var(--text); cursor: pointer; font-weight: 500; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (max-width: 1099.98px) {
  .js .nav-pill { display: none; }
  .js .nav-menu { display: inline-flex; }
  html:not(.js) .nav { height: auto; padding-block: 12px; grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  html:not(.js) .nav-pill { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  html:not(.js) .nav-links { flex-wrap: wrap; }
}
@media (max-width: 719.98px) { .js .nav-cta { display: none; } }
.nav-cta { transition: opacity var(--dur-base) var(--ease-v2), visibility var(--dur-base); }
.nav.cta-hidden .nav-cta { opacity: 0; visibility: hidden; }
@media (forced-colors: active) { .nav-pill, .nav-menu, .nav.scrolled .nav-logo { border: 1px solid CanvasText; background: Canvas; } }
.menu .pill-solid { width: 100%; }

/* Chapter counter, fixed bottom right on home: difference blend keeps it legible on both grounds */
.chapter { position: fixed; z-index: 40; right: var(--gutter); bottom: 22px; display: none; align-items: center; gap: 12px; margin: 0; max-width: none;
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; color: #ECE9E3; mix-blend-mode: difference; pointer-events: none; }
.chapter::before { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .55; }
.chapter .ch-of { opacity: .6; }
@media (min-width: 1024px) { .chapter { display: flex; } }
@media (forced-colors: active) { .chapter { mix-blend-mode: normal; color: CanvasText; } }

/* ---- Hero (DESIGN-v2 2.2): dark ground, slab horizon, bottom-left headline, floating card stack ---- */
.hero { min-height: max(680px, 100svh); padding-top: calc(var(--nav-h) + var(--s-5)); padding-bottom: var(--s-4); display: grid; grid-template-rows: 1fr auto; overflow: clip; }
.horizon { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 30%; perspective: 460px; perspective-origin: 50% 0; overflow: hidden; pointer-events: none; }
.floor { position: absolute; left: -70%; right: -70%; top: 0; height: 320%; transform-origin: 50% 0; transform: rotateX(var(--floor-tilt, 79deg)) translateY(var(--floor-shift, 0px));
  background: url("/assets/v2/img/floor-planks.svg") 50% 0 / 150px auto repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 34%, transparent 78%); mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 34%, transparent 78%); }
.horizon::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent 4%, rgb(236 233 227 / .18) 30%, rgb(236 233 227 / .32) 50%, rgb(236 233 227 / .18) 70%, transparent 96%); }
.hero::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: calc(30% - 160px); height: 320px; background: radial-gradient(52% 50% at 50% 50%, rgb(236 233 227 / .11), transparent 72%); pointer-events: none; }
.hero::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(to top, var(--bg), transparent); pointer-events: none; }
.hero-grid { display: grid; gap: var(--s-7); align-items: end; align-content: end; }
.hero-text { display: grid; gap: var(--s-5); align-content: end; justify-items: start; }
.kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.kinds li { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--pill-line); border-radius: var(--r-pill); background: color-mix(in srgb, var(--bg) 58%, transparent);
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.hero h1 { max-width: 12ch; }
.hero h1 .ser { font-size: 1.04em; letter-spacing: -.01em; }
.hero .plain { font-size: var(--fs-lede); font-weight: 400; line-height: 1.45; color: var(--text); max-width: 42ch; }
.trust { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .04em; line-height: 1.5; color: var(--text-2); }
.tlink { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); color: var(--text); text-decoration: none; font-weight: 500; border-bottom: 1px solid color-mix(in srgb, var(--text) 40%, transparent); }
.tlink .i { width: 18px; height: 18px; transition: translate var(--dur-base) var(--ease-v2); }
@media (hover: hover) { .tlink:hover { color: var(--text); border-bottom-color: var(--text); } .tlink:hover .i { translate: 3px 0; } }
.hero .actions { gap: var(--s-4) var(--s-6); }
.stack { position: relative; display: grid; gap: var(--s-4); align-content: end; justify-items: stretch; }
.stack .readout { position: relative; z-index: 2; border-radius: var(--r-float); box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 24px 48px -16px rgb(0 0 0 / .55), 0 2px 0 var(--slab); padding: var(--s-4) var(--s-5) var(--s-4); gap: var(--s-3); min-height: 0; }
.stack .ro-rows > div { padding: 6px 0; }
.ask-card { position: relative; z-index: 1; border-radius: var(--r-float); padding: var(--s-5); display: grid; gap: 4px; color: var(--text);
  background: color-mix(in srgb, var(--night-2) 78%, transparent); border: 1px solid var(--pill-line); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 24px 48px -16px rgb(0 0 0 / .6);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.ask-label { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--text); padding-bottom: var(--s-3); margin-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.ask-card .who { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-top: var(--s-2); }
.ask-card .ask { font-size: var(--fs-body); font-weight: 700; font-stretch: 105%; letter-spacing: -.01em; }
.ask-card .ans { font-size: var(--fs-note); line-height: 1.5; font-variant-numeric: tabular-nums; }
.ask-card .say { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-3); }
.ask-card .say[hidden] { display: none; }
.ask-card .meta { font-family: var(--font-mono); font-size: var(--fs-label); line-height: 1.5; color: var(--text-2); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.stack-end { display: grid; justify-items: end; gap: var(--s-2); margin-top: var(--s-2); }
.cta-hint { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .02em; color: var(--text-2); }
.edge-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-5); }
/* The hint sits on the counter's baseline, 22 px from the bottom, outside the flow */
@media (min-width: 720px) { .hero { padding-bottom: 64px; } .hero .edge-row { position: absolute; left: 0; right: 0; bottom: 22px; margin-top: 0; } }
.hint { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .04em; color: var(--text-2); }
.hint .i { width: 16px; height: 16px; }
@media (min-width: 720px) {
  .hero .actions .hero-cta { display: none; }
}
@media (min-width: 720px) and (max-width: 1199.98px) {
  .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .stack-end { grid-column: 1 / -1; }
}
/* From 1200 px: the Stellar stack. The paper card floats over the glass card; the glass card's top tucks under it. */
@media (min-width: 1200px) {
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 4.5rem); }
  .hero h1 { font-size: clamp(3.5rem, .6rem + 4.6vw, 5.25rem); max-width: 13ch; }
  .stack { width: 100%; max-width: 31rem; justify-self: end; gap: 0; }
  .stack .readout { margin-left: 3rem; }
  .stack .ro-rows > div { font-size: .875rem; gap: var(--s-3); }
  .stack .ro-rows dt, .stack .ro-rows dd { white-space: nowrap; }
  .stack .ro-rb dd { font-size: 1rem; gap: 6px; }
  .stack .ro-rb .ring { width: 18px; height: 18px; }
  .stack .ro-rows > div { padding: 5px 0; }
  .stack .ro-head { padding-bottom: var(--s-2); }
  .stack .ro-foot { font-size: .8125rem; line-height: 1.4; }
  /* the glass card tucks under the paper card; its labels sit in a column beside the words */
  .ask-card { margin: -72px 3rem 0 0; padding: calc(72px + var(--s-3)) var(--s-4) var(--s-4); grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--s-4); row-gap: 6px; align-items: baseline; }
  .ask-card .ask-label, .ask-card .say, .ask-card .meta { grid-column: 1 / -1; }
  .ask-label { padding-bottom: var(--s-2); margin-bottom: 2px; }
  .ask-card .who { margin-top: 0; }
  .ask-card .meta { font-family: var(--font-sans); font-size: .8125rem; margin-top: var(--s-2); padding-top: var(--s-2); }
  .ask-card .say { margin-top: var(--s-2); }
  .stack-end { margin-top: var(--s-4); }
}
@media (max-width: 719.98px) {
  .hero { min-height: 0; }
  .horizon { height: 30%; }
  .stack-end { display: none; }
  .edge-row { display: none; }
}

/* ---- The gap (6.3): four pairs, a Signal break between the done and the undone ---- */
.gap-sec h2 { max-width: 20ch; }
.gaps { display: grid; margin-top: var(--s-8); border-top: 1px solid var(--line-strong); }
.gaps li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .45em; padding: var(--s-5) 0; border-bottom: 1px solid var(--line-strong);
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3.25rem); font-weight: 300; font-stretch: 100%; letter-spacing: -.035em; line-height: 1.05; }
.gaps .g-b { color: var(--text-2); }
.gaps .g-b::before { content: ""; display: inline-block; width: .9em; height: 1px; margin-right: .45em; vertical-align: .3em; background: var(--accent); }
.gap-line { margin-top: var(--s-6); font-size: var(--fs-lede); line-height: 1.5; color: var(--text-2); max-width: 46ch; }
@media (min-width: 1024px) { .gaps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); } }

/* ---- The path, A to E (6.4): the plain list with the load path as its left border (DESIGN-v2 4 fallback) ---- */
.journey-sec { overflow: clip; }
.j-grid { display: grid; gap: var(--s-7); }
.j-head h2 { max-width: 16ch; }
.journey { position: relative; display: grid; border-left: 1px solid var(--accent); }
.j-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--s-4); row-gap: var(--s-2); padding: 0 0 var(--s-7) var(--s-5); align-items: start; }
.j-step:last-child { padding-bottom: 0; }
.j-step::before { content: ""; position: absolute; left: -5px; top: 18px; width: 9px; height: 9px; background: var(--bg); border: 1px solid var(--accent); rotate: 45deg; }
.j-block { grid-row: 1 / span 3; width: 48px; height: 48px; margin-top: 2px; position: relative;
  background: conic-gradient(from 225deg at 50% 50%, #8A857B 0 25%, #5E5A51 0 50%, #3A3936 0 75%, #77736A 0); clip-path: polygon(50% 0, 100% 28%, 100% 72%, 50% 100%, 0 72%, 0 28%); }
.j-block::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgb(255 255 255 / .18), transparent 45%); clip-path: inherit; }
.j-step h3 { grid-column: 2; font-size: var(--fs-h3); font-weight: 400; font-stretch: 100%; letter-spacing: -.025em; line-height: 1.1; }
.j-letter { font-family: var(--font-mono); font-size: .5em; font-weight: 500; letter-spacing: .08em; color: var(--accent); vertical-align: .45em; margin-right: .5em; }
.j-step > p, .j-step > .loadpath, .j-step > .j-tags { grid-column: 2; color: var(--text-2); max-width: 52ch; }
.j-step .loadpath { margin-top: var(--s-3); }
.journey .lp-box { background: var(--night-2); }
.journey .lp-branch { color: var(--text); }
.j-tags { margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .04em; line-height: 1.6; color: var(--text); }
.j-more { margin-top: var(--s-5); font-size: var(--fs-note); }
.j-more a { display: inline-flex; align-items: center; min-height: var(--tap); }
.jseq-panel .j-tags { margin-top: var(--s-4); }
.j-foot { display: grid; gap: var(--s-4); align-content: start; }
.edge-label { position: absolute; right: calc(var(--gutter) * .6); top: 50%; translate: 50% -50%; rotate: 90deg; margin: 0; max-width: none; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); pointer-events: none; }
.edge-label::after { content: ""; display: inline-block; width: 64px; height: 1px; margin-left: 16px; vertical-align: middle; background: var(--accent); }
@media (max-width: 1023.98px) { .edge-label { display: none; } }
@media (min-width: 1024px) {
  .j-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head list" "foot list"; column-gap: clamp(2rem, 6vw, 7rem); align-items: start; }
  .j-head { grid-area: head; position: sticky; top: calc(var(--nav-h) + var(--s-6)); }
  .journey { grid-area: list; }
  .j-foot { grid-area: foot; align-self: end; }
}
/* Step 2 mounts the sequence here; until then it stays hidden and the list above is the whole section */
.jseq[hidden], .jseq-all[hidden] { display: none !important; }

/* ---- The turn to light and the statement (DESIGN-v2 2.4, 2.5) ---- */
.statement-wrap { text-align: center; }
.statement-wrap .eyebrow { margin-bottom: var(--s-6); }
.statement-wrap + .split { margin-top: var(--sec-gap); }
@media (min-width: 1024px) { .who-sec .map-panel { aspect-ratio: 1 / 1; } }
.statement { font-size: var(--fs-statement); font-weight: 400; font-stretch: 100%; line-height: 1.12; letter-spacing: -.04em; max-width: 21ch; margin-inline: auto; text-wrap: balance; }
.statement .ser { font-size: 1.08em; }
.chip { display: inline-block; height: .74em; width: auto; aspect-ratio: 5 / 3; vertical-align: -.04em; margin: 0 .06em; border-radius: clamp(6px, .14em, 14px); object-fit: cover; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -8px rgb(26 26 25 / .4); }
.statement-line { margin: var(--s-7) auto 0; max-width: 48ch; font-size: var(--fs-lede); line-height: 1.5; color: var(--text-2); }

/* ---- Split sections: title, list rows, a large visual (DESIGN-v2 2.6) ---- */
.split { display: grid; gap: var(--s-7); }
.split h2 { max-width: 16ch; }
.split-text { display: grid; align-content: start; }
.rows-label { margin-top: var(--s-7); font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); scroll-margin-top: calc(var(--nav-h) + 24px); }
.lrows { margin-top: var(--s-3); border-top: 1px solid var(--line-strong); }
.lrows a { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 2px var(--s-4); min-height: 64px; padding: var(--s-3) 0; border-bottom: 1px solid var(--line-strong); color: var(--text); text-decoration: none; transition: border-color var(--dur-fast); }
.lr-name { font-size: var(--fs-h4); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.lr-sub { grid-column: 1; grid-row: 2; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .02em; color: var(--text-2); }
.lrows .i { grid-column: 2; grid-row: 1 / span 2; }
.lrows .i { width: 24px; height: 24px; transition: translate var(--dur-base) var(--ease-v2); }
.lrows a:focus-visible { outline-offset: 4px; }
@media (hover: hover) { .lrows a:hover { color: var(--text); border-bottom-color: var(--text); } .lrows a:hover .i { translate: 4px 0; color: var(--accent-text); } }
.muted { margin-top: var(--s-6); font-size: var(--fs-note); line-height: 1.6; color: var(--text-2); max-width: 52ch; }
.split-actions { margin-top: var(--s-5); }
.quiet { margin-top: var(--s-6); font-size: var(--fs-label); line-height: 1.6; color: var(--text-2); max-width: 60ch; }
.split-visual { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.visual-card { position: relative; border-radius: var(--r-float); overflow: hidden; background-color: var(--night); background-image: var(--grain); color: var(--text); }
.visual-card .map-panel { border: 0; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
  .split-visual { position: sticky; top: calc(var(--nav-h) + var(--s-5)); padding-right: 72px; }
}

/* ---- Pair sections: title left, short content right (security, founder, secondary blocks) ---- */
.pair { display: grid; gap: var(--s-6); }
.pair-head h2 { max-width: 14ch; }
.pair-link { margin-top: var(--s-5); font-size: var(--fs-note); }
.pair-link a { display: inline-flex; align-items: center; min-height: var(--tap); }
.tlist { border-top: 1px solid var(--text); counter-reset: t; }
.tlist li { position: relative; padding: var(--s-4) 0 var(--s-4) 3rem; border-bottom: 1px solid var(--line-strong); font-size: var(--fs-lede); line-height: 1.45; }
.tlist li::before { counter-increment: t; content: "0" counter(t); position: absolute; left: 0; top: calc(var(--s-4) + .5em); font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; line-height: 1; color: var(--accent-text); }
.founder-body { display: grid; gap: var(--s-6); align-items: start; }
.founder-body .fcard, .founder-body .founder-text { grid-column: auto; }
.fcard { border-radius: var(--r-float); max-width: none; }
.fcard::before { border-radius: var(--r-float) 0 0 var(--r-float); }
@media (min-width: 720px) { .founder-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1024px) { .pair { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 7rem); } }

.trust-sec h2 { max-width: 20ch; }
.trust-grid { display: grid; gap: var(--s-8); margin-top: var(--s-7); align-items: start; }
.trust-sec .founder-body { grid-template-columns: none; gap: var(--s-5); }
.trust-sec .founder-text { gap: var(--s-3); }
@media (min-width: 1024px) { .trust-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2.5rem, 6vw, 6rem); } }

/* ---- Closing CTA (DESIGN-v2 2.8): back to dark ---- */
.close-title { font-size: var(--fs-display); line-height: 1; letter-spacing: -.045em; max-width: 14ch; }
.close-sec .lede { margin-top: var(--s-6); max-width: 46ch; }
.close-sec .contact-rows { margin-top: var(--s-8); border-top: 1px solid var(--line-strong); }
.close-sec .contact-rows .val { font-weight: 500; font-stretch: 100%; }
.sys-in { width: min(100%, 26rem); min-height: var(--tap); padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; color: var(--text); font: 400 var(--fs-body)/1.3 var(--font-sans); }
.sys-in::placeholder { color: var(--text-2); opacity: 1; }
.sys-in:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sys-note { flex-basis: 100%; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-2); letter-spacing: .02em; }
.contact-last { margin-top: var(--s-4); font-size: var(--fs-note); color: var(--text-2); }
.close-band .close-actions { margin-top: var(--s-6); }

/* ---- Footer (DESIGN-v2 2.8: minimal; the legal line and controls stay) ---- */
.footer { padding-block: var(--s-8) var(--s-6); background-color: var(--bg); background-image: var(--grain); color: var(--text); border-top: 1px solid var(--line); }
.foot-top { display: grid; gap: var(--s-5); align-items: start; }
.foot-logo { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text); text-decoration: none; justify-self: start; }
.foot-logo .lockup { height: 28px; }
.foot-entity { color: var(--text-2); font-size: var(--fs-note); max-width: 56ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); font-size: var(--fs-note); }
.foot-links a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration-thickness: 1px; }
@media (min-width: 1024px) { .foot-top { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--s-7); } .foot-links { justify-content: flex-end; max-width: 26rem; } }
.controls { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.controls .label { color: var(--text-2); margin-right: var(--s-3); }
.controls .motion-btn { border-radius: var(--r-pill); }
.seg-dark { background: transparent; border-color: var(--line-strong); }
.seg-dark button { color: var(--text); }
.seg-dark button[aria-checked="true"] { background: var(--text); color: var(--bg); }
.legal { margin-top: var(--s-5); font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-2); line-height: 1.6; max-width: 110ch; }

/* ---- Secondary pages (DESIGN-v2 2, last paragraph) ---- */
.page-head { padding-top: calc(var(--nav-h) + clamp(3rem, 1.5rem + 5vw, 7rem)); padding-bottom: var(--s-6); }
.page-head h1 { font-size: var(--fs-display); font-weight: 400; font-stretch: 100%; letter-spacing: -.045em; line-height: 1; max-width: 15ch; }
.page-head h1 .ser { font-size: 1.04em; }
.page-head .lede { margin-top: var(--s-6); }
.page-head .note { margin-top: var(--s-5); }
.page-404 { min-height: 70vh; }
.page-404 .actions { margin-top: var(--s-6); }
.onpage { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-7); }
.onpage a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); text-decoration: none; font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .06em; }
@media (hover: hover) { .onpage a:hover { background: var(--text); color: var(--bg); } }
.gapcards { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .gapcards { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-5); } }
.closing { margin-top: var(--s-8); }
.hero-stats { margin-top: var(--s-8); border-top: 1px solid var(--text); }
.stats-head .src-label { margin-right: var(--s-2); }
.step-n { font-size: var(--fs-h3); }
.tally-blocks { grid-template-columns: none; }
@media (min-width: 1024px) { .tally-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tally-blocks a { display: inline-flex; align-items: center; min-height: var(--tap); }
.builds h3 { font-size: var(--fs-body); font-weight: 700; font-stretch: 105%; letter-spacing: 0; }
.also { border-radius: var(--r-float); }
.specimen { border-radius: var(--r-float); }
.faq-sec { padding-top: var(--s-5); }
.prose-sec { padding-top: var(--s-5); }
.prose h2 { font-size: var(--fs-h3); max-width: none; margin-top: var(--s-5); }
.dlist > div:first-child { border-top: 1px solid var(--text); }

/* ---- Status tags (SPEC-v2 8.4): text first, shape second, color third ---- */
.tag::before { background: var(--text); }
.tag-setup::before { background: linear-gradient(to right, var(--text) 50%, transparent 50%); }
.tag-learns::before { background: linear-gradient(135deg, var(--text) 50%, transparent 50%); }
.tag-scoped::before { background: none; border-style: dashed; border-color: var(--text-2); }
.legend { margin-top: 0; }
.scoped { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px dashed var(--line-strong); font-size: var(--fs-body); max-width: none; }
.scoped .tag { margin-right: var(--s-3); vertical-align: 2px; }

/* =====================================================================================
   v2 motion (DESIGN-v2 2.1, 2.3, 2.5, 2.6, 4). Transform and opacity only, native scroll.
   Every rule that hides or moves anything sits under prefers-reduced-motion: no-preference and
   html:not([data-motion="paused"]); without JS, with reduced motion or with Pause motion, everything shows at rest.
   ===================================================================================== */
[data-reveal] { --reveal-ease: var(--ease-v2); }

/* ---- 1. Wordmark reveal: lintel, wall, then the red load path; the overlay lifts. 700 ms in all. ---- */
.intro { display: none; }
.intro-mark { width: 72px; height: 72px; overflow: visible; }
.intro-mark rect { fill: #ECE9E3; transform-box: fill-box; }
.intro-mark .in-p { fill: #FF5A36; }
@media (prefers-reduced-motion: no-preference) {
  html.intro-on:not([data-motion="paused"]) .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: #151514; pointer-events: none;
    animation: intro-lift 240ms cubic-bezier(.7, 0, .3, 1) 460ms both; }
  html.intro-on .in-l { transform-origin: 50% 50%; animation: intro-x 200ms var(--ease-v2) both; }
  html.intro-on .in-w { transform-origin: 50% 0; animation: intro-y 200ms var(--ease-v2) 130ms both; }
  html.intro-on .in-p { transform-origin: 50% 0; animation: intro-y 200ms var(--ease-v2) 270ms both; }
  /* The hero stack lands after the overlay lifts on a first visit, at once otherwise */
  html.intro-on:not([data-motion="paused"]) .stack > * { animation-delay: calc(560ms + var(--i, 0) * 90ms); }
}
@keyframes intro-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes intro-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes intro-lift { from { transform: none; opacity: 1; } to { transform: translateY(-100%); opacity: 0; visibility: hidden; } }

/* ---- 2. Hero: the card stack lands, then floats; the floor is moved by main.js on scroll ---- */
.floor { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="paused"]) .stack > * { animation: stack-in 800ms var(--ease-v2) calc(80ms + var(--i, 0) * 90ms) both; }
  html:not([data-motion="paused"]) .stack > .readout { --i: 0; }
  html:not([data-motion="paused"]) .stack > .ask-card { --i: 1; }
  html:not([data-motion="paused"]) .stack > .stack-cta { --i: 2; }
  @media (min-width: 1024px) and (hover: hover) {
    html:not([data-motion="paused"]) .stack > article { animation-name: stack-in, stack-float; animation-duration: 800ms, 7s; animation-timing-function: var(--ease-v2), ease-in-out;
      animation-iteration-count: 1, infinite; animation-direction: normal, alternate; animation-fill-mode: both, none; }
    html:not([data-motion="paused"]) .stack > .ask-card { animation-delay: calc(80ms + 90ms), -3.5s; }
    html.intro-on:not([data-motion="paused"]) .stack > .ask-card { animation-delay: 650ms, -3.5s; }
    html.page-hidden .stack > article { animation-play-state: paused; }
  }
}
@keyframes stack-in { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes stack-float { from { translate: 0 -5px; } to { translate: 0 5px; } }

/* ---- 3. Section reveals: scroll-driven where supported (view()), timed by IntersectionObserver otherwise (html.rv-io) ---- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html:not([data-motion="paused"]) .rv { animation: rv-rise both var(--ease-v2); animation-timeline: view(); animation-range: entry 0% entry 60%; }
    html:not([data-motion="paused"]) .rv-row { animation-name: rv-slide; animation-range: entry 0% entry 70%; }
  }
  html.rv-io:not([data-motion="paused"]) .rv:not(.in) { opacity: 0; transform: translateY(28px); }
  html.rv-io:not([data-motion="paused"]) .rv-row:not(.in) { transform: translateX(-56px); }
  html.rv-io:not([data-motion="paused"]) .rv.in.rv-t { transition: opacity 700ms var(--ease-v2), transform 800ms var(--ease-v2); transition-delay: calc(var(--i, 0) * 75ms); }
}
@keyframes rv-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes rv-slide { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } }

/* ---- 4. The statement: lines rise from a mask one by one, chips scale in from .92 (main.js splits the lines) ---- */
.statement .ln { display: block; }
.statement .ln-in { display: inline-block; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="paused"]) .statement .ln { overflow: clip; overflow-clip-margin: .14em; view-timeline: --ln block; }
  @supports (animation-timeline: view()) {
    html:not([data-motion="paused"]) .statement .ln-in { animation: ln-up both var(--ease-v2); animation-timeline: --ln; animation-range: entry 30% cover 42%; }
    html:not([data-motion="paused"]) .statement .chip { animation: chip-in both var(--ease-v2); animation-timeline: --ln; animation-range: entry 60% cover 50%; }
  }
  html.rv-io:not([data-motion="paused"]) .statement:not(.in) .ln-in { transform: translateY(125%); }
  html.rv-io:not([data-motion="paused"]) .statement:not(.in) .chip { opacity: 0; transform: scale(.92); }
  html.rv-io:not([data-motion="paused"]) .statement.in .ln-in { transition: transform 900ms var(--ease-v2) calc(var(--i, 0) * 90ms); }
  html.rv-io:not([data-motion="paused"]) .statement.in .chip { transition: opacity 600ms var(--ease-v2) calc(var(--i, 0) * 90ms + 300ms), transform 700ms var(--ease-v2) calc(var(--i, 0) * 90ms + 300ms); }
}
@keyframes ln-up { from { transform: translateY(125%); } to { transform: none; } }
@keyframes chip-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* ---- 5. Works with your system: the visual swaps with the hovered or focused row ---- */

/* ---- 6. Chapter counter: the number rolls in ---- */
.chapter .ch-now { display: inline-block; }

/* ---- 7. The journey sequence (DESIGN-v2 2.3). journey.js sets .jseq-on on desktop with WebGL2; the list stays for readers ---- */
.jseq-on .j-grid { display: block; }
.jseq-on .j-head { position: static; }
.jseq-on .journey { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.jseq-on .j-after { margin-top: var(--s-7); }
.jseq-on > .edge-label { display: none; }
.jseq-pin { position: relative; height: calc(100vh + (var(--n, 5) - 1) * 56vh); margin-top: var(--s-7); }
.jseq-sticky { position: sticky; top: 0; height: 100vh; overflow: clip; }
.jseq-sticky::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(38% 46% at 60% 50%, rgb(236 233 227 / .07), transparent 70%); }
.jseq { position: absolute; inset: 0; }
.jseq canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.jseq canvas.drag { cursor: grabbing; }
.jseq-panel { position: absolute; left: calc((100% - min(100% - 2 * var(--gutter), var(--max))) / 2); top: 50%; translate: 0 -50%; width: min(36vw, 32rem); pointer-events: none; }
.jseq-panel .eyebrow { margin-bottom: var(--s-5); }
.jp-title { display: flex; align-items: center; gap: .35em; max-width: none; font-size: clamp(2.75rem, 1.4rem + 3.4vw, 5rem); font-weight: 300; font-stretch: 100%; line-height: 1; letter-spacing: -.045em; color: var(--text); }
.jp-title .i { width: .6em; height: .6em; flex: none; stroke-width: 1; }
.jp-body { margin-top: var(--s-5); color: var(--text-2); font-size: var(--fs-body); line-height: 1.55; max-width: 40ch; }
.jp-body .loadpath { margin-top: var(--s-4); }
.jp-body .lp-box { background: var(--night-2); }
.jp-body .lp-branch { color: var(--text); }
.jseq-labels { position: absolute; inset: 0; pointer-events: none; }
.jl { position: absolute; left: 0; top: 0; white-space: nowrap; font: 500 var(--fs-label)/1.2 var(--font-mono); letter-spacing: .04em; color: var(--text); opacity: 0; transition: color var(--dur-base); }
.jl b { font-weight: 500; color: var(--accent); margin-right: .6em; }
.jl:not(.on) { color: var(--text-2); }
.jseq-hint { position: absolute; left: calc((100% - min(100% - 2 * var(--gutter), var(--max))) / 2); bottom: 22px; margin: 0; max-width: none;
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .04em; color: var(--text-2); }
.jseq-sticky .edge-label { display: block; position: absolute; right: calc(var(--gutter) * .6); top: 50%; }
.jseq-all { position: absolute; left: 50%; bottom: 7px; translate: -50% 0; /* centred on the 22 px baseline of the hint and the counter */ z-index: 2; background: color-mix(in srgb, var(--bg) 58%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html:not(.js) .jseq-pin { display: none; }

/* ---- View transitions (SPEC-v2 12.3) ---- */
@view-transition { navigation: auto; }
.nav-logo { view-transition-name: lockup; }
.page-head h1 { view-transition-name: page-title; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
html[data-motion="paused"]::view-transition-group(*), html[data-motion="paused"]::view-transition-old(*), html[data-motion="paused"]::view-transition-new(*) { animation: none !important; }

/* =====================================================================================
   Review fixes 11/7/26 (fidelity, QA and buyer lenses). Later rules here override the layers above.
   ===================================================================================== */
main:focus { outline: none; }
.nw { white-space: nowrap; }

/* Hero: one concrete line under the sub; the Replay control sits in the card header in the label face (B2, B9, QA-10) */
.hero .does { font-size: var(--fs-body); line-height: 1.5; color: var(--text); max-width: 44ch; }
.ro-tools { display: inline-flex; align-items: center; gap: var(--s-4); }
.ro-head .ro-replay { position: relative; min-height: 24px; padding: 0; font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration-thickness: 1px; }
.ro-head .ro-replay::after { content: ""; position: absolute; inset: -10px -10px; } /* 44 px hit area */
.ro-head .ro-replay[hidden] { display: none; }
.stack .ro-foot { font-size: .875rem; line-height: 1.45; } /* 14 px floor (QA-5) */
/* Ask Tally: the question and the play control; the spoken answer stays as the button's description (DF-03) */
.ask-card:has(.say:not([hidden])) .ans { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ask-card .meta { font-size: .875rem; }
@media (min-width: 1200px) {
  .ask-card:has(.say:not([hidden])) .say { grid-column: 2; margin-top: 0; }
  .ask-card .meta { font-size: .875rem; }
}
@media (max-width: 719.98px) {
  /* Phone hero (DF-04): the readout keeps its key rows; the Ask card stays on desktop and on How it works (#tally) */
  .stack .ro-rows > div:nth-child(5), .stack .ro-rows > div:nth-child(6) { display: none; }
  .stack .ask-card { display: none; }
  .hero-text { gap: var(--s-4); }
  .hero-grid { gap: var(--s-6); }
}

/* Accents never split across lines; the closing accent's italic f gets room at a line start (DF-05) */
.close-title .ser, .page-head h1 .ser, .split h2 .ser { white-space: nowrap; }
.close-title .ser { padding-left: .1em; }

/* Load path on phones: a vertical stack, the held branch off the first box (DF-06) */
@media (max-width: 719.98px) {
  .loadpath { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: start; }
  .lp-line { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; row-gap: 0; }
  .lp-line li { flex-direction: column; align-items: flex-start; }
  .lp-line li + li::before { width: 3px; height: 12px; margin: 0 0 0 18px; }
  .lp-branch { grid-column: 2; grid-row: 1; margin: 16px 0 0; padding: 6px 0 0; border-left: 0; border-top: 3px dashed var(--accent); }
}

/* Step letters keep the 14 px floor (DF-09, QA-5) */
.j-letter { font-size: max(14px, .5em); }

/* Who it's for: static work rows, the systems lead in body colour, a visual that follows the rows (DF-07, B3, B4) */
.lrows .lr { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 2px; min-height: 64px; padding: var(--s-3) 0; border-bottom: 1px solid var(--line-strong); }
.sys-lead { margin-top: var(--s-3); font-size: var(--fs-body); line-height: 1.55; color: var(--text); max-width: 46ch; }
.sys-lead + .lrows { margin-top: var(--s-5); }
.vis-stack { display: grid; }
.vis-stack > * { grid-area: 1 / 1; min-width: 0; }
.vis-sys { display: none; }
.sys-svg { display: block; width: 100%; height: 100%; }
.sys-svg text { font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: .08em; fill: var(--text); text-anchor: middle; }
.sys-svg .sys-cap { text-anchor: start; font-size: 14px; letter-spacing: .18em; fill: var(--text-2); }
.sys-in rect { fill: var(--night-2); stroke: var(--line-strong); }
.sys-feed path { fill: none; stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 3 6; }
.sys-path rect { fill: var(--night-3); stroke: var(--text-2); }
.sys-line { stroke: var(--accent); stroke-width: 1.5; }
.sys-held path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 6; }
.sys-held text { font-size: 13px; fill: var(--text-2); }
@media (min-width: 1024px) {
  .js .vis-sys { display: block; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 360ms var(--ease-v2), visibility 0s linear 360ms; }
  .js .vis-map, .js .split-visual .map-hint { transition: opacity 360ms var(--ease-v2); }
  .js [data-view="sys"] .vis-sys { opacity: 1; visibility: visible; transition: opacity 360ms var(--ease-v2); }
  .js [data-view="sys"] .vis-map, .js [data-view="sys"] .map-hint { opacity: 0; pointer-events: none; }
}

/* Secondary pages: one type voice below the fold (DF-08) */
.gapcards .card h3, .step h3 { font-size: var(--fs-h3); font-weight: 400; font-stretch: 100%; letter-spacing: -.025em; line-height: 1.12; }
.closing { border-top: 1px solid var(--line-strong); }
.closing-h { font-weight: 400; font-stretch: 100%; letter-spacing: -.025em; }
.how-console .console { --bg: var(--paper); --bg-raised: var(--paper); --card: var(--paper); background: var(--paper); border-radius: var(--r-float); border: 1px solid var(--slab); box-shadow: none; }
.console h3, .tally-blocks h3, .builds h3 { font-weight: 500; font-stretch: 100%; }
.price { border-radius: var(--r-float); border: 1px solid var(--line); padding-top: var(--s-5); }
.price::before { display: none; }
.ledger thead th, .ledger .grp th { border-bottom: 1px solid var(--line-strong); }
.ledger tbody th[scope="row"] { font-weight: 400; font-size: var(--fs-h4); letter-spacing: -.01em; line-height: 1.25; }
.ledger td, .ledger tbody th { padding-block: 18px; }

/* Founder card: name at the light title scale, credentials in sentence case (DF-12) */
.fcard { background: var(--bg-raised); box-shadow: none; border: 1px solid var(--line); padding: var(--s-6) var(--s-5) var(--s-5); gap: var(--s-3); }
.fcard::before { display: none; }
.fcard .creds { color: var(--text-2); }
.fcard .name { font-size: var(--fs-h3); font-weight: 400; font-stretch: 100%; letter-spacing: -.025em; line-height: 1.1; }
.fcard .creds-body { display: grid; gap: var(--s-2); font-family: var(--font-sans); font-size: var(--fs-note); font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.5; }

/* Dark theme on home: the hero, path and close keep the darkest ground; the formerly light chapters sit one step up (DF-13) */
:root[data-theme="dark"] .pg-home main > .sec.band-dark { --bg: var(--night); }
:root[data-theme="dark"] .pg-home .who-sec, :root[data-theme="dark"] .pg-home .trust-sec { --bg: var(--night-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-home main > .sec.band-dark { --bg: var(--night); }
  :root:not([data-theme="light"]) .pg-home .who-sec, :root:not([data-theme="light"]) .pg-home .trust-sec { --bg: var(--night-2); }
}

/* Shorter pin: about 30% less scroll per stop (DF-14) */
.jseq-pin { height: calc(100vh + (var(--n, 5) - 1) * 39vh); }
.jl { display: grid; grid-template-columns: auto auto; column-gap: 0; }
.jl i { grid-column: 2; font-style: normal; color: var(--text-2); margin-top: 3px; }
.jseq-panel .jp-title { display: block; }
.jp-go { display: inline-flex; vertical-align: .05em; margin-left: .3em; color: var(--text); pointer-events: auto; }
.jp-go .i { width: .6em; height: .6em; stroke-width: 1; }

/* Map: no second counter, arrows right, FL clear of the Georgia line (DF-11) */
.mapbar .sname { margin-right: auto; }
.se-lab[data-abbr="FL"] { translate: calc(-50% + 16px) calc(-50% + 34px); }

/* Contact: the side offer stays quiet (B7) */
.contact-last { margin-top: var(--s-6); font-size: var(--fs-label); }

/* No JS on phones: no nav pill over the page (QA-4); the footer carries the links */
@media (max-width: 719.98px) {
  html:not(.js) .nav { position: absolute; }
  html:not(.js) .nav-pill { display: none; }
  html:not(.js) .nav-cta { display: none; }
}
/* No JS: nothing sets the nav's ground, so on home (dark hero) it takes the dark set from the start */
html:not(.js) .pg-home .nav { color-scheme: dark; --bg: var(--night); --text: var(--concrete); --text-2: var(--stone); }

@media print {
  .nav, .chapter, .horizon, .edge-row, .jseq, .jseq-all, .edge-label { display: none !important; }
  .hero { min-height: 0; }
  .visual-card { background: #fff; }
}

/* ---- Growth pages (SPEC-growth A to C, 11/7/26): founder, advisory, guides, footer Solutions column ---- */
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-6); }
.prose .ticks, .prose .steps-list { display: grid; gap: var(--s-3); }
.prose .ticks li { position: relative; padding-left: 1.75rem; }
.prose .ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 2px; background: var(--accent); }
.prose .steps-list { counter-reset: st; }
.prose .steps-list li { counter-increment: st; position: relative; padding-left: 2.5rem; }
.prose .steps-list li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: .2em; font: 500 var(--fs-label)/1.4 var(--font-mono); letter-spacing: .06em; color: var(--accent-text); }
.prose .note { color: var(--text-2); }
.prose a, .dlist dd a, .ref-row a:not(.pill) { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.guide-qa .faq, .related .lrows { margin-top: var(--s-5); }
.related .label { color: var(--text-2); }
.founder-cred { font-size: var(--fs-h4); font-weight: 500; letter-spacing: -.01em; line-height: 1.3; max-width: 30ch; margin-top: var(--s-5); }
.pair-head .note { margin-top: var(--s-4); color: var(--text-2); max-width: 42ch; }
.checks { display: grid; gap: 0 var(--s-6); counter-reset: ck; border-top: 1px solid var(--text); }
.checks li { counter-increment: ck; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--line-strong); }
.checks li::before { content: counter(ck, decimal-leading-zero); font: 500 var(--fs-label)/1.6 var(--font-mono); letter-spacing: .06em; color: var(--accent-text); }
@media (min-width: 1024px) { .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ref-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line-strong); }
.ref-line { font-size: var(--fs-lede); font-weight: 500; letter-spacing: -.01em; }
.founder-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.founder-links a:not(.pill) { display: inline-flex; align-items: center; min-height: var(--tap); }
.diag-contact { margin-top: var(--s-8); }
.contact-rows dd .val + .val { margin-left: 0; }
.foot-sol { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); display: grid; gap: var(--s-3); }
.foot-sol .label { color: var(--text-2); }
.foot-sol ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); font-size: var(--fs-note); }
.foot-sol a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration-thickness: 1px; }
@media (min-width: 1024px) { .foot-sol { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-7); align-items: baseline; } }
/* Phones: the nowrap serif tail ("for flooring contractors") ran 8px into the 16px gutter at 390; tighten it to fit */
@media (max-width: 430px) { .page-head h1 .ser { font-size: 1em; letter-spacing: -.025em; } }