/* Bearwall tokens v1.2 (SPEC 3; v1.2 adds --tap). Pasted as the first block of site/public/assets/v1/css/site.css. */
@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, .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; }
.wrap-wide { width: min(100% - 2 * var(--gutter), var(--max-wide)); margin-inline: auto; position: relative; }

/* ===== Sections, grounds, lintels, grid hairlines ===== */
.sec { position: relative; isolation: isolate; padding-block: var(--section-pad); background-color: var(--bg); background-image: var(--grain); color: var(--text); }
.g-paper { background-color: var(--bg-raised); }
:root[data-theme="dark"] .g-paper { background-color: #1A1A18; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g-paper { background-color: #1A1A18; } }
.sec-light::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--text); }
.sec-light::after { content: ""; position: absolute; top: 0; left: var(--gutter); width: 3px; height: 30px; background: var(--accent); }
@media (min-width: 1024px) {
  .sec > .wrap::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(-1 * var(--section-pad)); bottom: calc(-1 * var(--section-pad)); pointer-events: none;
    background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to right, var(--grid-line) 1px, transparent 1px);
    background-size: calc((100% + var(--s-5)) / 12) 100%, 1px 100%; background-position: 0 0, 100% 0; background-repeat: repeat-x, no-repeat; }
  .sec.hero > .wrap::before { top: calc(-1 * (56px + 12px + var(--section-pad) * .6)); }
}
.sec-head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); }
.eyebrow { max-width: none; font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); padding-bottom: var(--s-3); border-bottom: 2px solid var(--text); margin-bottom: var(--s-4); }
.sec-head .lede { margin-top: var(--s-1); }

/* ===== 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, .foot-col a { 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); }
.tag-ib::before { background: linear-gradient(to right, var(--text) 50%, transparent 50%); }
.tag-rm::before { border-style: dashed; border-color: var(--text-2); }

/* ===== 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; } }

/* ===== Navigation (6.1) ===== */
.nav { position: fixed; z-index: 50; top: 12px; left: 0; right: 0; pointer-events: none; }
.nav-cap { pointer-events: auto; margin-inline: auto; width: min(100% - 2 * var(--gutter), 72rem); height: 56px; border-radius: var(--r-pill); display: flex; align-items: center; gap: var(--s-4); padding: 0 8px 0 20px; transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.nav-logo { display: flex; align-items: center; min-height: var(--tap); color: var(--text); text-decoration: none; padding: 8px 0; margin-right: auto; }
.lockup { height: 24px; width: auto; color: var(--text); }
.nav-links { display: flex; gap: clamp(.75rem, 1.6vw, 1.75rem); font-size: .9375rem; }
.nav-links a { text-decoration: none; padding: 8px 2px; border-bottom: 2px solid transparent; }
.nav-links a[aria-current="location"] { border-bottom-color: var(--accent); }
@media (hover: hover) { .nav-links a:hover { color: var(--text); border-bottom-color: var(--line-strong); } }
.nav-cta { border-radius: 0; margin-left: var(--s-3); }
.nav-menu { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; cursor: pointer; font-weight: 600; }
@media (max-width: 1099.98px) {
  .js .nav-links, .js .nav-cta { display: none; }
  .js .nav-menu { display: inline-flex; }
  html:not(.js) .nav-cap { height: auto; flex-wrap: wrap; border-radius: var(--r-float); padding: 8px 16px; }
  html:not(.js) .nav-links { flex-wrap: wrap; width: 100%; }
  html:not(.js) .nav-cta { display: 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 (6.2) ===== */
.hero { padding-top: calc(56px + 12px + var(--section-pad) * .6); padding-bottom: var(--s-8); overflow: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-7); --row-gap: var(--s-7); }
.hero-text { position: relative; z-index: 1; display: grid; gap: var(--s-5); align-content: start; }
.hero .plain { font-size: var(--fs-lede); font-weight: 500; line-height: 1.45; color: var(--text); max-width: 40ch; }
.hero .lede { font-size: var(--fs-body); color: var(--text-2); max-width: 56ch; }
.hero .actions { margin-top: var(--s-2); }
.trust { font-family: var(--font-mono); font-size: var(--fs-note); font-weight: 500; letter-spacing: 0; line-height: 1.5; color: var(--text); max-width: 70ch; }
.hero-card { position: relative; z-index: 1; align-self: start; }
.hero-line { grid-row: 2; grid-column: 1; justify-self: end; position: relative; z-index: 0; width: 2px; margin-right: 44px; margin-top: -56px; margin-bottom: calc(-1 * var(--row-gap)); background: var(--accent); }
.spiral { position: absolute; left: 50%; top: 0; width: 140vh; height: 140vh; max-width: none; translate: -50% -50%; pointer-events: none; }
.spiral path { fill: none; stroke: var(--text-2); stroke-opacity: .25; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
@media (max-width: 719.98px) { .spiral path { stroke-opacity: .12; } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="paused"]) .spiral { animation: spin var(--dur-ambient) linear infinite; }
  html:not([data-motion="paused"]) .hero.in-view .spiral { will-change: rotate; }
  .hero:not(.in-view) .spiral, .page-hidden .spiral { animation-play-state: paused; }
}
@keyframes spin { to { rotate: 360deg; } }
.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-row { display: flex; justify-content: flex-end; margin-top: var(--s-5); position: relative; z-index: 1; }
.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; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); }
  .hero-text { grid-column: 1 / 8; grid-row: 1; }
  .hero-card { grid-column: 8 / 13; grid-row: 1; margin-top: var(--s-4); }
  .hero-line { grid-column: 8 / 13; grid-row: 1; margin-top: calc(var(--s-4) - 56px); }
  .hero-stats { grid-row: 2; }
}

/* 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; }
.readout.ro-done .ro-write::after { scale: 0 1; transition: scale 200ms; }

/* ===== Problem (6.3) ===== */
.q-label { margin-bottom: var(--s-5); color: var(--text-2); }
.questions { display: grid; gap: var(--s-7); }
.question { display: grid; gap: var(--s-4); align-content: start; }
.q-num { font-family: var(--font-mono); font-size: var(--fs-fig-xl); font-weight: 500; line-height: 1; color: var(--accent); }
.g-paper .q-num { color: var(--signal); }
:root[data-theme="dark"] .g-paper .q-num { color: var(--signal-night); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g-paper .q-num { color: var(--signal-night); } }
.q-text { font-size: var(--fs-h3); font-weight: 800; font-stretch: 112%; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
@media (min-width: 1024px) { .q-text { min-height: 2.24em; } }
.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; }
.last-line { margin-top: var(--s-7); font-size: var(--fs-lede); line-height: 1.5; max-width: 56ch; }
@media (min-width: 1024px) { .questions { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-5); } }

/* ===== 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); }
}
.roadmap { 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; }
.roadmap .tag { margin-right: var(--s-3); vertical-align: 2px; }

/* ===== Security (6.6) and terms definition lists ===== */
.sec-blocks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
.sec-blocks > * { min-width: 0; }
.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; }
.dlist .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
@media (min-width: 720px) { .dlist > div { grid-template-columns: 180px minmax(0, 1fr); gap: var(--s-5); } }
@media (min-width: 1024px) { .sec-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); } .block-c { grid-column: 1 / -1; } }
.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); }

/* ===== Tally (6.7) ===== */
.exchange { background: var(--card); border: 1px solid var(--line); box-shadow: var(--edge-slab); padding: var(--s-6); display: grid; gap: var(--s-3); max-width: 60rem; }
.exchange .who { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.exchange .ask { font-size: var(--fs-h4); font-weight: 700; font-stretch: 105%; margin-bottom: var(--s-4); }
.exchange .ans { font-size: var(--fs-lede); line-height: 1.5; font-variant-numeric: tabular-nums; }
.exchange .meta { font-family: var(--font-mono); font-size: var(--fs-note); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.exchange .say { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-2); }
.exchange .say[hidden] { display: none; }
.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; } }
.exchange .mic {font-family: var(--font-mono); font-size: var(--fs-note); color: var(--text-2); letter-spacing: 0; }
.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; }
.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%; }

/* ===== Founder (6.9) ===== */
.founder-grid { display: grid; gap: var(--s-7); }
/* 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) { .founder-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); } .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 .go3d { border: 1.5px solid var(--text); border-radius: 0; padding: 0 14px; font-family: var(--font-sans); font-weight: 600; font-size: .9375rem; letter-spacing: 0; }
.mapbar .go3d.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.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; }
.map-cap { margin-top: var(--s-2); font-size: var(--fs-note); }
.se-table { margin-top: var(--s-6); width: 100%; border-collapse: collapse; font-size: var(--fs-note); }
.se-table 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); }
.se-table th, .se-table td { text-align: left; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line-strong); vertical-align: top; }
.se-table thead th { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid var(--text); }
.se-table td.num { font-family: var(--font-mono); }


/* 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%; }
  .se-table, .se-table tbody, .se-table tr, .se-table th, .se-table td { display: block; width: 100%; }
  .se-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .se-table caption { display: block; }
  .se-table tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--line-strong); }
  .se-table th, .se-table td { border: 0; padding: 2px 0; }
  .se-table td[data-label]::before { content: attr(data-label) ": "; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
}

/* ===== 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; }

/* ===== Footer (6.13) ===== */
.footer { padding-top: var(--s-8); padding-bottom: 0; overflow: clip; border-top: 1px solid var(--line); }
.foot-grid { display: grid; gap: var(--s-7); }
.foot-brand { display: grid; gap: var(--s-4); align-content: start; }
.foot-brand .lockup { height: 32px; }
.foot-brand p { color: var(--text-2); font-size: var(--fs-note); max-width: 46ch; }
.foot-col .foot-h { max-width: none; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-bottom: var(--s-3); font-stretch: 100%; }
.foot-col ul { display: grid; gap: 0; font-size: var(--fs-note); }
.foot-col li { display: flex; align-items: center; min-height: var(--tap); }
.foot-col a { text-decoration-thickness: 1px; }
.foot-cols { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); container-type: inline-size; }
@media (min-width: 1024px) { .foot-grid { grid-template-columns: 5fr 7fr; column-gap: var(--s-7); } }
.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); }
.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; }
.bigword { margin-top: var(--s-7); width: 100%; max-width: 120rem; margin-inline: auto; color: var(--card); margin-bottom: -6.2vw; }
.bigword svg { width: 100%; height: auto; }

/* ===== 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, .exchange { box-shadow: none; border: 1px solid CanvasText; }
  .sec > .wrap::before, .bigword, .spiral, body, .sec { background-image: none; }
  .bigword { display: 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, .spiral, .hero-line, .map-panel, .map-hint, .con-ui, .con-hint, .bigword, .motion-row, .controls, .skip, .sec > .wrap::before, .sec-light::after, .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, .exchange { box-shadow: none; }
}