/* ============================================================
   cadence.report — home page · "Console" (2026-08)
   ------------------------------------------------------------
   Direction A · Console from design/landing-shotgun-2026-08 —
   it is a dashboard, so the dashboard is the hero. A real
   `cadence serve` overview render fills the right half of the
   fold inside an app-window frame; headline, both install
   commands and three proof stats sit left. The metronome is
   demoted to an 18px nav mark and never crosses text again.

   Provenance + rationale: design/landing-console-2026-08/DESIGN.md

   Palette: styles/tokens.css, unmodified. That file already
   ships paper-light as the default and espresso-dark under
   `prefers-color-scheme: dark`, so this page follows the OS
   instead of being a fixed dark desk. Every colour here is one
   of its semantic tokens — nothing is hard-coded except the two
   deliberately always-dark console cards, which state both their
   background and their foreground.

   index.html loads styles/tokens.css + this file and nothing
   else. styles/chrome.css and styles/home.css belong to the
   subpages (how-it-works/, leaderboard/) and are not on this
   page's critical path.

   Everything is axis-aligned and flat — no rotate/skew/
   perspective anywhere (tests/landing-page.test.js enforces it).
   ============================================================ */

/* ---------- base ---------- */
html {
  scroll-behavior: smooth;
  /* tokens.css states `color-scheme: dark` inside its prefers-dark block; this is the
     light-side half of the pair, so form controls and scrollbars follow the OS too. */
  color-scheme: light dark;
}
html,
body {
  background: var(--bg);
  color: var(--fg-1);
  font: 400 17px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*,
*::before,
*::after { box-sizing: border-box; }
body { margin: 0; min-width: 320px; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* tokens.css gives <p> its own 15px font and colour; this page states both once, on
   the body, and lets every block that needs a different size say so explicitly. */
p { margin: 0; font: inherit; color: inherit; }
code { font-family: var(--font-mono); font-size: 0.92em; }
hr { border: 0; border-top: 1px solid var(--border-soft); margin: var(--sp-4) 0; }
figure { margin: 0; }
table { border-collapse: collapse; }

:root {
  --wrap: 1200px;
  --gutter: 24px;
}

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

/* ---------- accessibility furniture ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -56px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  background: var(--accent); color: var(--accent-fg);
  border-radius: var(--radius-sm); font: 600 15px/1 var(--font-sans);
}
.skip-link:focus { top: 12px; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- type ----------
   ONE h2 tier. Every section heading on this page is the same size; the only larger type on
   the page is the hero h1 and the two deliberate numeral moments (.pull-num, .popover-num).
   Card titles are Geist, a different family, so they can never read as a smaller h2. */
h1, h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 560;
  font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0;
  letter-spacing: -0.024em;
  line-height: 1.02;
  text-wrap: balance;
  color: var(--fg-1);
}
h1 { font-size: clamp(38px, 4.6vw, 60px); max-width: 15ch; }
h1 em {
  font-style: italic;
  color: var(--accent-soft-fg);
  font-variation-settings: "opsz" 144;
}
h2 { font-size: clamp(29px, 3.2vw, 40px); line-height: 1.06; max-width: 20ch; }
h3 {
  margin: 0;
  font: 600 17px/1.35 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.lede {
  margin-top: var(--sp-5);
  font-size: 18px;
  line-height: 1.58;
  color: var(--fg-2);
  max-width: 54ch;
  text-wrap: pretty;
}

.eyebrow,
.mark {
  font: 600 11px/1.3 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow { color: var(--fg-3); }
.mark { color: var(--accent-soft-fg); }

.head { max-width: 60ch; }
.head .mark,
.head .eyebrow { display: block; margin-bottom: var(--sp-4); }

.footnote {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-soft);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-3);
  max-width: 76ch;
}

.tag-sample {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  font: 500 11px/1.5 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--fg-3);
  white-space: nowrap;
}

/* The standalone call-to-action link. Its hit area is 44 px tall, so it is never used inline
   inside running prose — a 44 px inline-flex box mid-sentence breaks the line rhythm, and
   WCAG 2.5.8 exempts inline-in-text targets anyway. The rule stays on the text, where a reader
   expects it: an inset box-shadow on the 44 px box draws the underline a line and a half low. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 500;
  color: var(--accent-soft-fg);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.link-arrow:hover { text-decoration-color: var(--accent); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; --btn-pad: 20px; padding: 0 var(--btn-pad);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: 600 15px/1 var(--font-sans); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.btn-accent { background: var(--accent); color: var(--accent-fg); }
.btn-accent:hover { background: color-mix(in srgb, var(--accent) 86%, var(--fg-1)); }
.btn-outline { background: transparent; color: var(--fg-1); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--fg-1); }

/* ---------- copyable command chip ----------
   scripts/home.js binds every [data-command]; the chip keeps that contract. The command itself
   never breaks mid-token — it stays on one line and scrolls inside its own box. */
.cmd-chip {
  position: relative;
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 48px; padding: 0 14px;
  background: transparent; border: 0; border-radius: 0;
  text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.cmd-chip + .cmd-chip { border-top: 1px solid var(--border-soft); }
.cmd-chip:hover { background: var(--bg-muted); }
.cmd-chip .prompt { color: var(--accent); font: var(--type-mono); flex: none; }
.cmd-chip code {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; color: var(--fg-1);
  white-space: nowrap; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.cmd-chip-icon { flex: none; display: inline-flex; color: var(--fg-4); }
.cmd-chip:hover .cmd-chip-icon { color: var(--fg-2); }
/* The confirmation sits on top of the copy icon rather than beside it: in flow it would hold
   ~55 px of the row open for a label that is invisible 99 % of the time, and at 390 px that is
   the difference between the brew command fitting and being clipped. */
.cmd-chip-done {
  position: absolute; right: 14px; top: 50%; margin-top: -6px;
  font: 500 12px/1 var(--font-mono); color: var(--success);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard);
}
.cmd-chip.is-copied .cmd-chip-done { opacity: 1; }
.cmd-chip.is-copied .cmd-chip-icon { opacity: 0; }

.install-block {
  margin-top: var(--sp-6);
  max-width: 460px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elev-1);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ============================================================
   NAV — the only place the metronome still appears, at 18px
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-inner {
  display: flex; align-items: center; gap: var(--sp-8);
  height: 64px;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px;
  font-family: var(--font-display); font-weight: 560; font-size: 22px;
  letter-spacing: -0.01em; font-variation-settings: "opsz" 32;
  color: var(--fg-1);
}
/* The metronome, at its final size: a mark beside the wordmark, in ink so the one accent in
   the bar stays the Install CTA. Nothing on this page draws it larger, and nothing draws it
   behind or across text. */
.brand-mark { width: 22px; height: 22px; flex: none; color: var(--fg-1); }
.nav-links { display: flex; gap: var(--sp-6); flex: 1; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 500; color: var(--fg-2);
}
.nav-links a:hover { color: var(--fg-1); }
.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-actions .btn { min-height: 44px; --btn-pad: 16px; font-size: 14px; }
.nav-toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; color: var(--fg-1);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer;
}

/* ============================================================
   BANDS — the page rhythm
   ------------------------------------------------------------
   Four band types alternate so the page never reads as ten
   identical full-width stripes: plain, sunken (a recessed
   surface with hairlines), strip (a thin full-bleed rule) and
   the hero. Composition alternates left/right with it.
   ============================================================ */
.band { padding: clamp(56px, 6.4vw, 96px) 0; }
.band-tight { padding-top: clamp(28px, 3vw, 44px); }
.band-sunken {
  background: var(--bg-sunken);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

/* ---------- hero ---------- */
.hero { padding: clamp(36px, 5vw, 76px) 0 clamp(44px, 5vw, 80px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--accent-soft-fg);
}
.hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft-bg);
}
.hero h1 { margin-top: var(--sp-5); }
.hero .lede { max-width: 46ch; }
.cta-line { margin-top: var(--sp-5); }

.stat-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-soft);
}
.stat-row .stat b {
  display: block;
  font-family: var(--font-display); font-weight: 560; font-size: 27px; line-height: 1.1;
  letter-spacing: -0.02em; color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.stat-row .stat span {
  display: block; margin-top: 2px;
  font: 400 11px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-3);
}

/* ---------- the app window: the real product, in the fold ---------- */
.app-window {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-elev-1);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.app-titlebar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border-soft);
}
.app-dots { display: inline-flex; gap: 6px; flex: none; }
.app-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.app-addr {
  margin: 0 auto;
  font: var(--type-mono-sm); color: var(--fg-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-window img { width: 100%; }
.app-caption { margin-top: 12px; font-size: 13px; color: var(--fg-3); }

/* ---------- the full-bleed spec strip ---------- */
.spec-strip {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-elev-1);
}
.spec-strip-in {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px var(--sp-8);
  padding: 15px var(--gutter);
  font: 400 11px/1.5 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-3); text-align: center;
}
.spec-strip-in b { color: var(--accent-soft-fg); font-weight: 600; }

/* ---------- install rail ---------- */
.rail-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--sp-6) clamp(28px, 4vw, 64px);
  align-items: center;
}
.rail-steps { display: grid; gap: 8px; min-width: 0; }
.rail-steps li {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  min-height: 46px; padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev-1);
  font-family: var(--font-mono); font-size: 14px; color: var(--fg-1);
}
.rail-steps li code {
  min-width: 0; white-space: nowrap; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.rail-n {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft-bg); color: var(--accent-soft-fg);
  font: 600 11px/1 var(--font-mono);
}
.rail-foot { margin-top: var(--sp-4); font-size: 14px; color: var(--fg-3); }
.rail-foot code { color: var(--fg-2); }

/* ---------- the three views: a jump index built from real renders ---------- */
.view-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-10);
}
.view-card {
  display: block; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-elev-1); box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.view-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
/* The crop is a window onto the real render, held at a scale where the UI is still readable —
   `object-fit: cover` on a 2592 px-wide shot would shrink it to an unreadable smear. */
.view-shot { --shot-zoom: 168%; height: 196px; overflow: hidden; border-bottom: 1px solid var(--border-soft); }
.view-shot img { width: var(--shot-zoom); max-width: none; }
/* allocation-2x is already a cropped detail panel (1062 px wide, not a full 2592 px view). At
   the zoom the two full views need it loses its own labels, and at plain 100 % it is shorter
   than the card window — so this one fills the window instead, anchored top-left. */
.view-shot-fit img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.view-cap { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px 6px; }
.view-cap h3 { font-size: 16px; }
.view-cap .go { margin-left: auto; color: var(--accent); font-size: 15px; }
.view-card p { padding: 0 16px 16px; font-size: 14px; line-height: 1.5; color: var(--fg-3); }

/* ============================================================
   01 THE CHAIN — a sticky left rail against a 2×2 tile grid
   ============================================================ */
.chain-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.chain-rail { position: sticky; top: 96px; }
.chain {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.tile {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-elev-1); box-shadow: var(--shadow-sm);
}
.tile-label {
  display: flex; align-items: center; gap: 8px;
  font: 600 11px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-2);
}
.tile-num {
  font-family: var(--font-display); font-weight: 560; font-size: 44px; line-height: 1.02;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.tile-num small { font-size: 0.42em; font-weight: 500; color: var(--fg-3); }
.num-ember { color: var(--accent-soft-fg); }
.num-olive { color: var(--success); }
.sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; flex: none; }
.sw-ember { background: var(--accent); }
.sw-olive { background: var(--success); }
.spark { width: 100%; height: 38px; overflow: visible; }
.spark-line { stroke-width: 2; fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.area-ember { fill: var(--accent); fill-opacity: 0.24; }
.area-olive { fill: var(--success); fill-opacity: 0.2; }
.line-ember { stroke: var(--accent); }
.line-olive { stroke: var(--success); }
.bar { display: flex; height: 10px; gap: 2px; margin: 13px 0 11px; border-radius: 3px; overflow: hidden; }
.bar i { display: block; }
.bar-olive { background: var(--success); }
.bar-ember { background: var(--accent); }
.tile-foot {
  margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border-soft);
  font: 400 13px/1.5 var(--font-mono); color: var(--fg-2);
}
.tile-def { font-size: 13.5px; line-height: 1.45; color: var(--fg-3); }

/* ============================================================
   RENDERS — every product image on this page is a real render
   ============================================================ */
.render img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elev-1);
  box-shadow: var(--shadow-md);
}
.render figcaption {
  margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--fg-3);
}
.render-wide { margin-top: var(--sp-8); }
.render-inset { margin-bottom: var(--sp-4); }
.render-inset img { box-shadow: none; }

.callouts {
  display: flex; flex-wrap: wrap; gap: 8px var(--sp-6);
  margin-top: var(--sp-4);
  font: 400 13px/1.5 var(--font-mono); color: var(--fg-3);
}
.callouts b { color: var(--fg-1); font-weight: 600; }

/* ============================================================
   03 TWO LEDGERS
   ============================================================ */
.ledgers {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5); margin-top: var(--sp-10); align-items: start;
}
.card {
  padding: var(--sp-6);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-elev-1); box-shadow: var(--shadow-sm);
}
.ledger-title {
  display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-4);
  font: 600 12px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-1);
}
.ledger-title em {
  font-family: var(--font-display); font-style: italic; font-size: 13px;
  letter-spacing: 0; text-transform: none; color: var(--fg-3);
}
.ledger-rows li {
  padding: 11px 0; border-bottom: 1px solid var(--border-soft);
}
.ledger-rows li:last-child { border-bottom: 0; }
.ledger-rows b { display: block; font-size: 14.5px; font-weight: 600; color: var(--fg-1); }
.ledger-rows span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--fg-3); }

.bridge {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: var(--sp-8); padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-muted);
  font: 400 13px/1.6 var(--font-mono); color: var(--fg-2);
}
.bridge b { color: var(--fg-1); letter-spacing: 0.08em; }
.ledger-note { margin-top: var(--sp-4); font-size: 14px; line-height: 1.55; color: var(--fg-3); max-width: 76ch; }

/* ============================================================
   INSIGHTS — five cards, then one numeral moment beside a render
   ============================================================ */
.insight-row {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-4); margin-top: var(--sp-8);
}
.insight { display: flex; flex-direction: column; gap: 7px; padding: var(--sp-5); }
.insight p { font-size: 13.5px; line-height: 1.45; color: var(--fg-2); }
.insight code {
  background: var(--bg-muted); border-radius: var(--radius-xs); padding: 1px 5px; color: var(--fg-1);
}
.insight-quote {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-soft);
  font-family: var(--font-display); font-style: italic; font-size: 14px;
  color: var(--accent-soft-fg); font-variation-settings: "opsz" 18;
}
.insight-proof {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 3vw, 52px);
  margin-top: var(--sp-10); align-items: center;
}
.pull-num {
  font-family: var(--font-display); font-weight: 560; font-size: clamp(56px, 6vw, 84px);
  line-height: 0.92; letter-spacing: -0.035em; color: var(--accent-soft-fg);
  font-variant-numeric: tabular-nums;
}
.pull-num small { font-size: 0.4em; color: var(--fg-3); }
.pull-body { margin-top: var(--sp-4); font-size: 16px; line-height: 1.55; color: var(--fg-2); max-width: 34ch; }
.verdict-line {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border-soft);
  font-family: var(--font-display); font-style: italic; font-size: 18px; line-height: 1.45;
  color: var(--fg-1); font-variation-settings: "opsz" 24; max-width: 34ch;
}

/* ============================================================
   04 PLAN VALUE · 05 COMPANION — the two split bands
   ============================================================ */
.split {
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.split-flip { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
.split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split-copy, .split-visual { min-width: 0; }
/* The one flipped band shows its render on the left at desktop widths. The flip is CSS only:
   the copy stays first in the DOM, so the section's heading is still announced (and read on a
   narrow screen) before the figure it introduces. */
@media (min-width: 901px) {
  .split-flip .split-visual { order: -1; }
}

.proof-grid { display: grid; gap: var(--sp-4); }
.proof { display: flex; flex-direction: column; gap: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 5px 10px; border-radius: var(--radius-pill);
  font: 600 11px/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.chip-celebrate { background: var(--moss-100); color: var(--olive-ink); }
.chip-warning { background: var(--danger-soft-bg); color: var(--danger-ink); }
.proof-text { font-size: 15.5px; line-height: 1.5; color: var(--fg-2); }
.proof-text b { font-weight: 600; color: var(--fg-1); }
.t-danger { color: var(--danger-ink); }
.proof-stats { flex-direction: row; flex-wrap: wrap; gap: var(--sp-4) var(--sp-10); }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-label { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--fg-3); }
.stat-num {
  font-family: var(--font-display); font-weight: 560; font-size: 30px; line-height: 1.1;
  letter-spacing: -0.02em; color: var(--fg-1); font-variant-numeric: tabular-nums;
}
.stat-num small { font-size: 0.5em; color: var(--fg-3); font-weight: 500; }

/* menu-bar popover — an HTML/CSS mock of the companion, always in the app's own light chrome */
.menubar {
  margin-top: var(--sp-6);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-md); max-width: 420px;
}
.menubar-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 7px 12px; background: var(--bg-muted);
  border-bottom: 1px solid var(--border-soft);
  font: 400 12px/1.4 var(--font-sans); color: var(--fg-2);
}
.menubar-item { display: inline-flex; align-items: center; gap: 6px; }
.menubar-item-active { font-family: var(--font-mono); font-weight: 600; color: var(--fg-1); }
.menubar-item-active svg { color: var(--accent); }
.popover { padding: 16px 18px 14px; background: var(--bg-elev-1); }
.popover-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border-soft);
}
.popover-num {
  font-family: var(--font-display); font-weight: 560; font-size: 30px; line-height: 1;
  letter-spacing: -0.02em; color: var(--fg-1);
}
.popover-num small { font-size: 0.55em; color: var(--fg-3); font-weight: 400; }
.popover-num em {
  font-style: italic; font-weight: 400; font-size: 15px; color: var(--fg-3);
  margin-left: 8px; font-variation-settings: "opsz" 18;
}
.popover-btn {
  padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: 500 12px/1.2 var(--font-mono); color: var(--fg-2); background: var(--bg-muted);
}
.popover-rows li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; color: var(--fg-2);
}
.popover-rows li span:last-child { font: 400 12px/1.4 var(--font-mono); color: var(--fg-3); }
.popover-nudge { display: grid; gap: 4px; padding-top: 12px; }
.popover-nudge-label {
  font: 600 10px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-soft-fg);
}
.popover-nudge-text {
  font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--fg-1);
  font-variation-settings: "opsz" 18;
}
.popover-nudge-text b { font-style: normal; font-weight: 600; }

.ticks { display: grid; gap: 9px; margin-top: var(--sp-6); }
.ticks li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--success); font: 700 14px/1.5 var(--font-sans);
}
.ticks li b { color: var(--fg-1); }

/* ============================================================
   06 THE NETWORK BOUNDARY
   ============================================================ */
.boundary {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-elev-1); overflow: hidden;
}
.boundary-col { padding: 4px var(--sp-5); }
.boundary-col-no { border-left: 1px solid var(--border); }
.boundary-col li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--border-soft);
  font-size: 14.5px; line-height: 1.5; color: var(--fg-2);
}
.boundary-col li:last-child { border-bottom: 0; }
.boundary-col code {
  background: var(--bg-muted); border-radius: var(--radius-xs); padding: 1px 5px;
  color: var(--fg-1); white-space: nowrap;
}
.boundary-foot {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border-soft);
  font: 400 12.5px/1.7 var(--font-mono); color: var(--fg-3);
}
.boundary-foot code { font-size: inherit; color: var(--fg-1); }

/* icons — borders and clip only, nothing rotated */
.ico-check, .ico-cross, .ico-cube, .ico-pulse, .ico-bridge, .ico-warn, .ico-lock {
  flex: none; display: inline-block; width: 16px; height: 16px; margin-top: 2px;
}
.ico-check {
  background: var(--success); border-radius: 50%; color: var(--bg-elev-1);
  text-align: center; font: 700 10px/16px var(--font-sans);
}
.ico-check::after { content: "✓"; }
.tile-label .ico-check { width: 13px; height: 13px; margin-top: 0; line-height: 13px; font-size: 8px; }
.ico-cross { color: var(--danger-ink); text-align: center; font: 700 13px/16px var(--font-sans); }
.ico-cross::after { content: "✕"; }
.ico-cube { border: 2px solid var(--accent-soft-fg); border-radius: 3px; position: relative; }
.ico-cube::after { content: ""; position: absolute; inset: 3px; border: 1px solid var(--accent-soft-fg); border-radius: 1px; }
.ico-pulse { border-bottom: 2px solid var(--success); position: relative; height: 10px; margin-top: 4px; }
.ico-pulse::after {
  content: ""; position: absolute; left: 5px; bottom: -2px; width: 6px; height: 10px;
  border-left: 2px solid var(--success); border-right: 2px solid var(--success); border-top: 2px solid var(--success);
}
.ico-bridge { border-top: 2px solid var(--fg-2); position: relative; height: 10px; margin-top: 3px; }
.ico-bridge::before, .ico-bridge::after { content: ""; position: absolute; top: 0; width: 2px; height: 10px; background: var(--fg-2); }
.ico-bridge::before { left: 3px; }
.ico-bridge::after { right: 3px; }
.ico-warn { width: 14px; height: 14px; border: 2px solid var(--danger-ink); border-radius: 50%; position: relative; margin-top: 0; }
.ico-warn::after { content: ""; position: absolute; left: 4px; top: 2px; width: 2px; height: 5px; background: var(--danger-ink); }
.ico-lock { width: 12px; height: 14px; border: 2px solid currentColor; border-radius: 3px; position: relative; margin-top: 0; }
.ico-lock::before {
  content: ""; position: absolute; left: 1px; top: -7px; width: 6px; height: 6px;
  border: 2px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0;
}

/* ============================================================
   07 LEADERBOARD · 08 COMPARISON — the two tables
   ============================================================ */
.rules { display: grid; gap: 8px; margin-top: var(--sp-5); }
.rules li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.rules li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px;
  border-radius: 2px; background: var(--accent);
}
.rules b { color: var(--fg-1); }
.ribbon {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 12px; padding: 8px 14px;
  background: var(--accent); color: var(--accent-fg); border-radius: var(--radius-sm);
  font: 600 12px/1.4 var(--font-mono);
}
.table-scroll {
  /* position: relative is load-bearing, not decoration: each table carries a
     `<caption class="visually-hidden">`, which is position:absolute. Without a positioned
     scroller its containing block is the initial one, so it escapes this box's clipping and
     drags the table's full intrinsic width onto the viewport — 26 px of sideways scroll at
     390 px, on a page that must have none. */
  position: relative;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-elev-1);
}
.board, .matrix { width: 100%; font-size: 14px; }
.board th, .board td, .matrix th, .matrix td {
  padding: 10px 12px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--border-soft);
}
.board thead th, .matrix thead th {
  font: 600 11px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-3); background: var(--bg-muted);
}
.board tbody td:first-child { font-family: var(--font-display); font-size: 17px; font-weight: 560; }
.board td:nth-child(2) { font: 400 13px/1.5 var(--font-mono); }
.board .num, .matrix td { text-align: center; }
.board .num { font: 400 13px/1.5 var(--font-mono); }
.board tbody tr:last-child td { border-bottom: 0; }
.held td { color: var(--fg-3); }
.held-handle { letter-spacing: 0.15em; color: var(--fg-4); }
.held-note { margin-left: 6px; font-size: 11px; color: var(--fg-3); }
.held:nth-child(3) td { border-bottom: 1px dashed var(--border-strong); }
.badge-verified {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px; vertical-align: middle;
  border-radius: 50%; background: var(--success); color: var(--bg-elev-1);
  font: 700 10px/1 var(--font-sans);
}
.tiers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.tiers-label {
  font: 600 11px/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3); margin-right: 4px;
}
.tier {
  padding: 5px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font: 500 13px/1.2 var(--font-sans); color: var(--fg-2);
}
.tier-top { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }

.matrix th[scope="row"] { font-weight: 500; color: var(--fg-1); white-space: normal; min-width: 190px; }
.matrix td[data-mark="yes"] { color: var(--success); font-weight: 700; }
.matrix td[data-mark="no"] { color: var(--fg-4); }
.matrix td:nth-child(2) { background: var(--accent-soft-bg); }
.matrix tbody tr:last-child td, .matrix tbody tr:last-child th { border-bottom: 0; }

/* ============================================================
   09 TEAM · 10 INSTALL — the closing pair
   ============================================================ */
.close-pair {
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: var(--sp-5); align-items: stretch;
}
.close-pair > section { display: flex; flex-direction: column; }
.close-pair .lede { font-size: 16px; }
/* The install card is deliberately always dark — a console on the page, whichever theme is on.
   It states both colours so it never inherits a light foreground from the dark-mode tokens. */
.console-card {
  background: #1A1612; color: #F2E8D4;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.console-card h2, .console-card .mark { color: #F2E8D4; }
.console-card .mark { color: #E5B655; }
.console-card .lede { color: #BDB09A; }
.steps { display: grid; gap: 8px; margin-top: var(--sp-6); min-width: 0; }
.steps li {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  min-height: 46px; padding: 0 14px;
  background: #14110D; border: 1px solid #3A2F24; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 14px; color: #F2E8D4;
}
.steps code { min-width: 0; white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.step-n {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #3A2E1B; color: #F2CA73; font: 600 11px/1 var(--font-mono);
}
.steps-alt { margin-top: 12px; font: 400 12px/1.6 var(--font-mono); color: #8F8574; }
.steps-alt code { color: #F2E8D4; }
.install-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: var(--sp-6); }
.console-card .btn-outline { color: #F2E8D4; border-color: #544432; }
.console-card .btn-outline:hover { border-color: #F2E8D4; }
.close-pair .card-cta { margin-top: auto; padding-top: var(--sp-6); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: var(--sp-10) 0 var(--sp-12);
  border-top: 1px solid var(--border-soft);
  background: var(--bg-sunken);
}
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-5) var(--sp-8);
}
.footer .brand { font-size: 24px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px var(--sp-6); }
.footer-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; color: var(--fg-2);
}
.footer-links a:hover { color: var(--fg-1); }
.footer-note { width: 100%; font-size: 13px; color: var(--fg-3); }

/* ============================================================
   LAUNCH TOGGLE (meta name="cadence-launch") — scripts/home.js
   ============================================================ */
:root:not([data-launch="public"]) .launch-public { display: none !important; }
:root[data-launch="public"] .launch-private { display: none !important; }
.launch-note {
  margin-top: var(--sp-5);
  font-family: var(--font-display); font-style: italic; font-size: 16px; line-height: 1.5;
  color: var(--fg-2); font-variation-settings: "opsz" 18; max-width: 44ch;
}

/* ============================================================
   UI TOUR (scripts/tour.js) + MOTION TOGGLE (scripts/motion.js)
   ------------------------------------------------------------
   The tour is the only looping motion left on the page — the
   metronome no longer swings anywhere. WCAG 2.2.2 still applies,
   so the toggle stays and now stops the tour.
   ============================================================ */
.tour-stage { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.tour-stage picture {
  display: block; margin: 0;
  transition: transform 1400ms var(--ease-standard); will-change: transform;
}
.tour-stage.is-zoomed picture { transform: scale(var(--tour-scale, 1.6)); }
.tour-cursor {
  position: absolute; width: 22px; height: 22px; margin: -2px 0 0 -2px;
  pointer-events: none; opacity: 0; z-index: 3;
  transition: left 1500ms var(--ease-standard), top 1500ms var(--ease-standard),
              opacity 420ms var(--ease-standard), transform 240ms var(--ease-standard);
}
.tour-cursor.is-on { opacity: 1; }
.tour-cursor.is-pressed { transform: scale(0.82); }
.tour-cursor svg { width: 100%; height: 100%; }
.tour-ripple {
  position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border: 2px solid var(--accent); border-radius: 50%;
  pointer-events: none; z-index: 2;
  animation: tour-ripple 900ms var(--ease-standard) forwards;
}

.motion-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--bg-elev-1); color: var(--fg-2);
  border: 1px solid var(--border); border-radius: 50%;
  box-shadow: var(--shadow-md); cursor: pointer; opacity: 0.8;
  transition: opacity var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.motion-toggle:hover, .motion-toggle:focus-visible { opacity: 1; color: var(--fg-1); border-color: var(--border-strong); }
.motion-toggle svg { width: 15px; height: 15px; fill: currentColor; }

/* Motion off is exactly what the page ships without JS: every render a still screenshot. */
html[data-motion="off"] .tour-cursor,
html[data-motion="off"] .tour-ripple { display: none !important; }
html[data-motion="off"] .tour-stage picture { transition: none; transform: none !important; }

/* draw-in for the chain sparklines, wipe-in for the score — scripts/home.js adds .is-in */
.js .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .is-in .draw { animation: draw-in 1100ms var(--ease-standard) forwards; }
.js .score-figure img { clip-path: inset(0 100% 0 0); }
.js .score-figure.is-in img { animation: wipe-in 900ms var(--ease-standard) forwards; }

@keyframes draw-in { to { stroke-dashoffset: 0; } }
@keyframes wipe-in { to { clip-path: inset(0 0 0 0); } }
@keyframes tour-ripple {
  from { opacity: 0.9; transform: scale(0.4); }
  to { opacity: 0; transform: scale(1.9); }
}

[data-countup] { font-variant-numeric: tabular-nums; }

/* ============================================================
   Semantic accents that must survive the token flip
   ------------------------------------------------------------
   tokens.css redefines --danger / --moss-500 under
   `@media (prefers-color-scheme: dark)` at `:root:not([data-theme="light"])`
   (specificity 0-2-0). These two pairs are read as *text* on a
   light surface, where the dark-mode values drop below 4.5:1 —
   so they are declared as their own tokens at matching
   specificity, per theme, instead of borrowing the flipped ones.
   ============================================================ */
:root:root {
  --danger-ink: #A63F26;
  --danger-soft-bg: #F5D4C2;
  --olive-ink: #4E5C35;
  --moss-100: #DDE3CC;
}
@media (prefers-color-scheme: dark) {
  :root:root:not([data-theme="light"]) {
    --danger-ink: #E8907A;
    --danger-soft-bg: #3A211A;
    --olive-ink: #B6C79A;
    --moss-100: #29321D;
  }
}

/* ============================================================
   Responsive — mobile-first behaviour is expressed by collapsing
   every multi-column grid; nothing ever scrolls the page
   horizontally, the two tables scroll inside their own box.
   ============================================================ */
@media (max-width: 1100px) {
  .insight-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .view-cards { gap: var(--sp-4); }
  .view-shot { height: 168px; }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .band { padding: 52px 0; }

  /* Without JavaScript there is no toggle, so the links simply wrap onto a second row under
     the brand — which needs a bar that is allowed to wrap and to grow. With JS the links
     collapse behind the toggle and the bar is pinned back to a single 60 px row. */
  .nav-inner { height: auto; min-height: 60px; flex-wrap: wrap; gap: 10px 16px; padding-top: 10px; padding-bottom: 10px; }
  .nav-links { order: 3; flex: 0 0 100%; width: 100%; flex-wrap: wrap; gap: 0 18px; }
  .js .nav-inner { height: 60px; min-height: 0; flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; }
  .js .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; padding: 4px 20px 12px;
    background: var(--bg); border-bottom: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
  }
  .js .nav-links a { border-bottom: 1px solid var(--border-soft); }
  .js .nav-links a:last-child { border-bottom: 0; }
  .js .nav.is-open .nav-links { display: flex; }
  .js .nav-toggle { display: inline-flex; }

  .hero-grid,
  .rail-grid,
  .chain-grid,
  .split,
  .split-flip,
  .split-even,
  .ledgers,
  .insight-proof,
  .close-pair,
  .view-cards { grid-template-columns: minmax(0, 1fr); }
  .chain-rail { position: static; }
  .install-block { max-width: none; }
  .hero .btn, .install-ctas .btn { width: 100%; }
  .view-shot { height: 200px; }
  .insight-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boundary { grid-template-columns: minmax(0, 1fr); }
  .boundary-col-no { border-left: 0; border-top: 1px solid var(--border); }
  .menubar { max-width: none; }
}

@media (max-width: 520px) {
  h1 { font-size: clamp(34px, 9.4vw, 42px); }
  /* `brew install lubosxyz/tap/cadence` is 33 unbreakable characters; at 13 px it fits the
     chip whole at 360 px instead of scrolling the last two off the end. */
  .cmd-chip code, .rail-steps li code, .steps code { font-size: 13px; }
  .chain, .insight-row { grid-template-columns: minmax(0, 1fr); }
  .stat-row { gap: var(--sp-4) var(--sp-6); }
  .spec-strip-in { gap: 8px var(--sp-5); letter-spacing: 0.08em; }
  .callouts { gap: 6px var(--sp-4); }
  .view-shot { height: 172px; }
}

/* ============================================================
   Motion — the UI tour, the sparkline draw-in, the score wipe
   and the leverage count-up. All off under
   prefers-reduced-motion; the two the toggle owns are scoped
   html:not([data-motion="on"]) so an explicit opt-in wins.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .draw { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; }
  .js .score-figure img { clip-path: none; animation: none !important; }
  .cmd-chip-done { transition: none; }
  html:not([data-motion="on"]) .tour-stage picture { transition: none; transform: none !important; }
  html:not([data-motion="on"]) .tour-cursor,
  html:not([data-motion="on"]) .tour-ripple { display: none !important; }
}