/* ════════════════════════════════════════════════════════════════════
   Netspaces Wallet — case page (iteration 3)
   Bespoke layout; same brand identity as jonatanzyl.com
   Two acts: the bet in daylight (folds 1–4, dense with period
   artifacts), the runway months in the dark (folds 5–7), the result
   at first light (fold 8).
   ════════════════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts (latin subset, variable weight) ─────────────── */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Hash navigation: keep anchor targets clear of the sticky nav. */
[id] { scroll-margin-top: 5rem; }

body {
  font-family: "Geist", system-ui, sans-serif;
  background: #fff;
  color: #0a0a0a;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img { max-width: 100%; height: auto; display: block; }
figure video { max-width: 100%; width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: inherit; }

::selection { background: #0a0a0a; color: #fff; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e5e5e5; border-radius: 3px; }

.font-mono, code, pre, .kicker, .meta-label, .fig-caption, .breadcrumb a,
.next-case-meta, .site-footer, .ledger-row, .curve-label, .curve-marker-label,
.ep-label, .bet-aside, .result-echo, .step-n, .decision-tag, .seq-n,
.pyr-tag { font-family: "Geist Mono", monospace; }

/* ── Accessibility helpers ─────────────────────────────────────────── */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 200;
  background: #fff; color: #0a0a0a; border: 1px solid #0a0a0a;
  padding: 0.6rem 1rem; font: 500 0.875rem "Geist Mono", monospace;
  text-decoration: none; transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }

a:focus-visible, button:focus-visible {
  outline: 2px solid #0a0a0a;
  outline-offset: 3px;
}
.fold-dark a:focus-visible, .fold-dark button:focus-visible {
  outline-color: #f5f5f5;
}

/* ── Page frame (matches site container) ───────────────────────────── */

.page-frame {
  max-width: 1400px;
  margin: 0 auto;
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  position: relative;
}

/* ── Nav ───────────────────────────────────────────────────────────── */

.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.95);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid #e5e5e5;
}
.site-nav-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.5rem; position: relative;
}
.site-nav-links { display: flex; align-items: center; gap: 2rem; }
.site-nav a {
  font: 400 0.75rem "Geist Mono", monospace;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: #6b6b6b; text-decoration: none;
  transition: color 0.2s ease;
}
.site-nav a:hover { color: #0a0a0a; }
.site-nav .site-wordmark {
  position: absolute; left: 50%; transform: translateX(-50%);
  font: 600 0.875rem "Geist", system-ui, sans-serif;
  letter-spacing: -0.02em; color: #0a0a0a;
  text-transform: none;
}
.nav-about { display: none; }

/* ── Breadcrumb ────────────────────────────────────────────────────── */

.breadcrumb {
  border-bottom: 1px solid #f0f0f0;
  padding: 1rem 1.5rem;
}
.breadcrumb a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.75rem; color: #6b6b6b; text-decoration: none;
  transition: color 0.2s ease;
}
.breadcrumb a:hover { color: #0a0a0a; }

/* ── Shared fold scaffolding ───────────────────────────────────────── */

.fold { padding: 6rem 1.5rem; }
.fold-dark { background: #0a0a0a; color: #f5f5f5; }
.fold-dark ::selection { background: #f5f5f5; color: #0a0a0a; }

.kicker {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: #6b6b6b; margin-bottom: 2.25rem;
}
.kicker-dark { color: #8f8f8f; }

.fold-heading {
  font-size: clamp(1.9rem, 4.2vw, 3.9rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.05;
  max-width: 21ch; margin-bottom: 2rem;
  text-wrap: balance;
}
.fold-heading-dark { color: #f5f5f5; }

.fold-copy {
  font-size: 1.0625rem; line-height: 1.75; color: #404040;
  max-width: 38rem;
}
.fold-copy + .fold-copy { margin-top: 1.5rem; }
.fold-copy-dark { color: #a3a3a3; }
.fold-copy code { font-size: 0.85em; padding: 0.08em 0.35em; background: #f1f1f1; border: 1px solid #e5e5e5; }
.fold-copy-dark code { background: #1a1a1a; border-color: #2a2a2a; }

.fig-caption {
  font-size: 0.75rem; line-height: 1.7; color: #6b6b6b;
}
.fold-dark .fig-caption { color: #8f8f8f; }
figcaption.fig-caption { margin-top: 0.9rem; }

/* Press coverage as quiet inline links: same mono voice as captions,
   one anchored screenshot stays (the 82-year-old on G1). */
.press-link {
  font-family: "Geist Mono", monospace;
  font-size: 0.75rem; line-height: 1.8; color: #6b6b6b;
  max-width: 26rem;
}
.press-anchor {
  color: #0a0a0a; text-decoration: underline;
  text-decoration-color: #c9c9c9; text-underline-offset: 3px;
  white-space: nowrap;
}
.press-anchor:hover { text-decoration-color: #0a0a0a; }
.result .press-link { color: #6f6759; }
.result .press-anchor { color: #171512; text-decoration-color: #d5cbb8; }
.result .press-anchor:hover { text-decoration-color: #171512; }
.press-sep { color: #b5b5b5; padding: 0 0.35rem; }

/* Browser screenshots and diagram plates get a hairline edge so their
   own white backgrounds read as artifacts, not page. */
.shot { border: 1px solid #e5e5e5; }
.fold-dark .shot { border-color: #2a2a2a; }

/* ══ FOLD 1 · HOOK ═════════════════════════════════════════════════ */

.hero {
  min-height: max(86vh, 40rem);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 4rem;
  padding-top: 5rem; padding-bottom: 3.5rem;
}
.hero .kicker { margin-bottom: 2.25rem; }

.hero-grid { display: flex; flex-direction: column; gap: 3rem; }

.hero-headline {
  font-size: clamp(2.9rem, 8.2vw, 7.5rem);
  font-weight: 600; letter-spacing: -0.045em; line-height: 0.98;
  color: #0a0a0a;
}
.mask { display: block; overflow: hidden; }
.hero-line { display: block; will-change: transform; }

.hero-support {
  margin-top: 2.5rem;
  font-size: clamp(1.05rem, 1.7vw, 1.375rem);
  font-weight: 400; letter-spacing: -0.01em; line-height: 1.55;
  color: #525252;
  max-width: 33rem;
  text-wrap: balance;
}

.hero-figure { max-width: 34rem; }
.hero-figure img { width: 100%; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 2rem 4.5rem;
  border-top: 1px solid #ececec;
  padding-top: 1.75rem;
}
.meta-label {
  display: block; font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.15em; color: #6b6b6b; margin-bottom: 0.45rem;
}
.meta-value { font-size: 0.9375rem; color: #404040; }

/* ══ FOLD 2 · THE BET ══════════════════════════════════════════════ */

.bet { padding-top: 7rem; padding-bottom: 8rem; }

.bet-story {
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  font-weight: 600; letter-spacing: -0.025em; line-height: 1.25;
  color: #0a0a0a;
  max-width: 28ch;
  text-wrap: pretty;
  margin-top: 2.25rem;
}
.bet-first {
  display: block;
  margin-top: 1.4rem;
  font-size: 0.58em;
  font-weight: 500; letter-spacing: 0.01em;
  color: #767676;
}

.bet-press { margin-top: 3.5rem; max-width: 58rem; }

.bet-row {
  margin-top: 4rem;
  display: flex; flex-direction: column; gap: 3rem;
}
.bet-mortgage { max-width: 26rem; }
.bet-launch { max-width: 13rem; }
.bet-aside {
  font-size: 0.72rem; line-height: 1.7; color: #6b6b6b;
  max-width: 19rem;
}

/* ══ STEP-THROUGH (folds 3 and 4 share the grammar) ════════════════ */

.steps {
  margin-top: 4rem;
  display: flex; flex-wrap: wrap;
  gap: 3rem 1.75rem;
  align-items: flex-end;
}
.step-phone {
  width: min(272px, 100%);
  margin: 0 auto;
}
.step-phone img { width: 100%; }
.step-cap { display: block; margin-top: 1.1rem; }
.step-n {
  display: block;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: #0a0a0a; margin-bottom: 0.45rem;
}
.step-sub { display: block; font-size: 0.78rem; line-height: 1.6; color: #6b6b6b; max-width: 17rem; }

.steps-caption { margin-top: 2rem; }

/* fold 4: the decision step is the emphasized one */
.step-decision { width: min(318px, 100%); position: relative; }
.decision-tag {
  display: inline-block;
  background: #0a0a0a; color: #fff;
  font-size: 0.6563rem; text-transform: uppercase; letter-spacing: 0.16em;
  padding: 0.4rem 0.7rem;
  margin-bottom: 1rem;
}
.step-decision .step-n { font-weight: 500; }
.step-decision .step-sub { color: #404040; }

/* ══ FOLD 3 · THE AIRDROP ══════════════════════════════════════════ */

.airdrop { padding-top: 7rem; padding-bottom: 8rem; }

.airdrop-stage {
  margin-top: 3.5rem;
  display: flex; flex-direction: column; gap: 3rem;
}
.airdrop-lp { max-width: 52rem; }
.airdrop-arcuri { max-width: 24rem; }

.airdrop-note {
  margin-top: 3.5rem;
  font-size: 1.0625rem; line-height: 1.75; color: #404040;
  max-width: 38rem;
  border-left: 2px solid #0a0a0a;
  padding-left: 1.4rem;
}

/* ══ FOLD 4 · THE RESERVATION ══════════════════════════════════════ */

.tradeoff { padding-top: 7rem; padding-bottom: 8rem; }

.tradeoff-poster {
  font-size: clamp(2.1rem, 5.2vw, 4.9rem);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.02;
  color: #0a0a0a; max-width: 14ch;
  margin-bottom: 2rem;
  text-wrap: balance;
}

.waitlist { margin-top: 5rem; max-width: 44rem; }

/* ══ FOLD 5 · THE LEDGER (the hinge: night begins) ═════════════════ */

.ledger {
  padding-top: clamp(9rem, 26vh, 16rem);
  padding-bottom: clamp(9rem, 26vh, 16rem);
}

.ledger-block { max-width: 40rem; margin: 0 auto; }

.ledger-rows { display: flex; flex-direction: column; gap: 1.15rem; margin-top: 3.5rem; }
.ledger-row {
  display: flex; align-items: baseline; gap: 0.9rem;
  font-size: 0.875rem;
}
.ledger-row .l-label { color: #8f8f8f; white-space: nowrap; }
.ledger-leader { flex: 1; border-bottom: 1px dotted #333; transform: translateY(-0.25em); }
.ledger-row .l-value {
  color: #6b9dff; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ledger-verdict { margin-top: 5.5rem; }
.ledger-verdict p {
  font-size: clamp(1.7rem, 4vw, 3.1rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.15;
  color: #ff4640;
}
.ledger-verdict p + p { margin-top: 0.5rem; }

/* ══ FOLD 6 · THE DIAGNOSIS ════════════════════════════════════════ */

.chasm { padding-top: 7rem; padding-bottom: 8rem; }

.curve-figure {
  margin-top: 3.5rem;
  position: relative;
}
.curve-canvas { position: relative; }
.curve-figure svg { width: 100%; height: auto; display: block; }
.curve-stroke { stroke: #e5e5e5; stroke-width: 2; fill: none; }
.curve-fill { fill: rgba(245,245,245,0.06); }
.curve-hair { stroke: #2c2c2c; stroke-width: 1; }
.curve-base { stroke: #3a3a3a; stroke-width: 1; }
.curve-gapline { stroke: #3a3a3a; stroke-width: 1; stroke-dasharray: 3 5; }
.curve-dot { fill: #f5f5f5; }
.curve-callout { stroke: #6b6b6b; stroke-width: 1; }

.curve-label {
  position: absolute;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #8f8f8f;
  transform: translateX(-50%);
  bottom: 0;
  white-space: nowrap;
}
.curve-label-gap { color: #f5f5f5; }
.curve-marker-label {
  position: absolute;
  font-size: 0.6875rem; letter-spacing: 0.08em;
  color: #f5f5f5;
  transform: translateX(-50%);
  white-space: nowrap;
}
.curve-caption { margin-top: 2.5rem; }

/* the revenue pyramid, inverted then upright */
.pyr {
  margin-top: 5.5rem;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.5rem;
}
.pyr-state { width: min(17rem, 74vw); text-align: center; }
.pyr-state svg { width: 100%; height: auto; display: block; }
.pyr-outline { stroke: #e5e5e5; stroke-width: 1.5; fill: none; }
.pyr-divider { stroke: #4a4a4a; stroke-width: 1; stroke-dasharray: 4 4; }
.pyr-tint { fill: rgba(107,157,255,0.13); }
.pyr-label {
  font-family: "Geist Mono", monospace;
  font-size: 13px; letter-spacing: 0.08em;
  fill: #e5e5e5; text-transform: uppercase;
}
.pyr-label-dim { fill: #8f8f8f; }
.pyr-tag {
  display: block; margin-top: 1rem;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: #8f8f8f;
}
.pyr-arrow { color: #6b6b6b; display: flex; }
.pyr-arrow svg { transform: rotate(90deg); }
.pyr-caption { margin-top: 1.75rem; }

/* ══ FOLD 7 · THE BUILD ════════════════════════════════════════════ */

.arch { padding-top: 7rem; padding-bottom: 8rem; }

.seq {
  margin-top: 4.5rem;
  display: flex; flex-direction: column;
  gap: 4.5rem;
  counter-reset: none;
}
.seq-head {
  display: flex; align-items: baseline; gap: 1rem;
  margin-bottom: 1.5rem;
}
.seq-n {
  font-size: 0.6875rem; letter-spacing: 0.16em; color: #8f8f8f;
}
.seq-title {
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em;
  color: #e5e5e5;
}
.seq-item figure { max-width: 62rem; }
.seq-half figure { max-width: 34rem; }

/* ══ FOLD 8 · THE RESULT (first light) ═════════════════════════════ */

.result {
  background: #faf7f0; color: #171512;
  padding-top: 8rem; padding-bottom: 7rem;
}
.result ::selection { background: #171512; color: #faf7f0; }
.result .kicker { color: #6f6759; }
.result .fig-caption { color: #6f6759; }
.result .shot { border-color: #e3dccd; }

.result-hero { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem; }
.result-number {
  font-size: clamp(7rem, 24vw, 20rem);
  font-weight: 600; letter-spacing: -0.055em; line-height: 0.85;
  color: #171512;
}
.result-gloss {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.55; color: #4a443a;
  max-width: 21ch;
  text-wrap: pretty;
}
.result-gloss strong { color: #171512; font-weight: 600; }

.result-body {
  display: flex; flex-direction: column; gap: 3.5rem;
}
.result-map { max-width: 34rem; }
.result-map img { width: 100%; }
/* The map animation is rendered on #f9f9f9; multiply melts that into the
   fold's cream background so only the dots read. */
.map-motion { mix-blend-mode: multiply; filter: brightness(1.025); }
.map-static { display: none; }
@media (prefers-reduced-motion: reduce) {
  .map-motion { display: none; }
  .map-static { display: block; }
}

.result-lines {
  font-size: 1.0625rem; line-height: 1.75; color: #4a443a;
  max-width: 36rem;
}
.result-echo {
  margin-top: 2rem;
  font-size: 0.875rem; color: #171512;
}
.result-press { margin-top: 3rem; max-width: 26rem; }

.epilogue {
  margin-top: 6rem;
  border: 1px solid #e3dccd;
  padding: 2rem 2rem 2.25rem;
}
.ep-label {
  display: block;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: #6f6759; margin-bottom: 1rem;
}
.ep-text { font-size: 0.9375rem; line-height: 1.75; color: #5a5347; max-width: 40rem; }
.ep-press {
  margin-top: 2rem;
  display: flex; flex-wrap: wrap; gap: 1.75rem;
}
.ep-press figure { flex: 1 1 15rem; max-width: 19rem; }

/* ══ CLOSER + FOOTER ═══════════════════════════════════════════════ */

.next-case { border-top: 1px solid #e5e5e5; background: #fff; }
.next-case-inner { padding: 3rem 1.5rem 3.5rem; }
.next-case-inner .kicker { margin-bottom: 1.75rem; display: block; }
.next-case-link {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  text-decoration: none;
}
.next-case-title {
  display: block;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600;
  letter-spacing: -0.02em; color: #0a0a0a;
  margin-bottom: 0.3rem;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.next-case-meta { font-size: 0.75rem; color: #6b6b6b; }
.next-case-link svg { color: #a3a3a3; margin-top: 0.5rem; transition: color 0.2s ease, transform 0.2s ease; flex-shrink: 0; }
.next-case-link:hover .next-case-title { transform: translateX(4px); }
.next-case-link:hover svg { color: #0a0a0a; transform: translate(2px,-2px); }

.site-footer {
  border-top: 1px solid #e5e5e5;
  padding: 2rem 1.5rem;
  display: flex; justify-content: flex-end;
  font-size: 0.75rem; color: #767676;
  background: #fff;
}

/* ── Breakpoints ───────────────────────────────────────────────────── */

/* Mobile: headline masks would strand words at 390px; wrap naturally. */
@media (max-width: 767px) {
  .hero-headline .mask, .hero-headline .hero-line { display: inline; }
  .hero-headline { text-wrap: balance; }
  /* at phone width the segment labels collide; the chasm is the one
     that matters, and the caption names the rest */
  .curve-label { display: none; }
  .curve-label-gap { display: block; }
  /* phones stack and enter one at a time with natural scroll */
  .steps { flex-direction: column; align-items: center; }
  .step-phone { margin: 0; }
  .step-decision { width: min(318px, 100%); }
}

@media (min-width: 768px) {
  .site-nav-inner { padding: 1rem 2.5rem; }
  .nav-about { display: block; }
  .breadcrumb { padding: 1rem 2.5rem; }
  .fold { padding-left: 2.5rem; padding-right: 2.5rem; }
  .hero { padding-top: 6.5rem; padding-bottom: 4rem; }
  .next-case-inner { padding: 3.5rem 2.5rem 4rem; }
  .site-footer { padding: 2rem 2.5rem; }

  .step-phone { margin: 0; width: clamp(200px, 21vw, 272px); }
  .step-decision { width: clamp(240px, 25vw, 318px); }

  .bet-row { flex-direction: row; align-items: flex-end; gap: 3.5rem; }
  .bet-aside { align-self: flex-end; padding-bottom: 0.2rem; }

  .airdrop-stage { flex-direction: row; align-items: flex-end; gap: 3rem; }
  .airdrop-lp { flex: 1.9; }
  .airdrop-arcuri { flex: 1; }

  .pyr { flex-direction: row; align-items: center; justify-content: center; gap: 3.5rem; }
  .pyr-arrow svg { transform: none; }
  .pyr-caption { text-align: center; }

  .ep-press figure { flex: 0 1 auto; width: 17rem; }

  .result-body { flex-direction: row; align-items: flex-start; gap: 5rem; }
  .result-map { flex: 1.2; }
  .result-side { flex: 1; }
}

/* ── ≥1100: full-canvas fold compositions ──────────────────────────── */

@media (min-width: 1100px) {

  /* Fold 1 — the promise left, the wallet right. */
  .hero-grid {
    flex-direction: row; align-items: flex-end; gap: 4rem;
  }
  .hero-top { flex: 1.15; }
  .hero-figure { flex: 1; max-width: 33rem; }

  /* Fold 2 — the story left, the national press dominant right; the
     supporting proofs settle in a quieter row beneath. */
  .bet {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 4.5rem;
  }
  .bet > .kicker { grid-column: 1 / -1; }
  .bet > .fold-heading { grid-column: 1 / -1; }
  .bet-copy { grid-column: 1; }
  .bet-press { grid-column: 2; margin-top: 0; align-self: start; }
  .bet-row { grid-column: 1 / -1; margin-top: 5rem; }

  /* Fold 3 — heading left, copy right; the landing page and the reach
     share a stage; the flow runs the full canvas. */
  .airdrop {
    display: grid;
    grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr);
    column-gap: 4rem;
    align-items: end;
  }
  .airdrop > .kicker { grid-column: 1 / -1; }
  .airdrop > .fold-heading { grid-column: 1; margin-bottom: 0; max-width: 15ch; }
  .airdrop-copy { grid-column: 2; margin-bottom: 0.4rem; }
  .airdrop > .airdrop-stage, .airdrop > .steps,
  .airdrop > .steps-caption, .airdrop > .airdrop-note { grid-column: 1 / -1; }

  /* Fold 4 — the sentence left, the reasoning right, the flow staged
     across the full canvas with the decision step held larger. */
  .tradeoff {
    display: grid;
    grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr);
    column-gap: 4rem;
    align-items: end;
  }
  .tradeoff > .kicker { grid-column: 1 / -1; }
  .tradeoff > .tradeoff-poster { grid-column: 1; margin-bottom: 0; }
  .tradeoff-copy { grid-column: 2; margin-bottom: 0.4rem; }
  .tradeoff > .steps, .tradeoff > .steps-caption,
  .tradeoff > .waitlist { grid-column: 1 / -1; }

  /* Fold 6 — copy left, the curve takes the rest of the canvas. */
  .chasm {
    display: grid;
    grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr);
    column-gap: 4rem;
    align-items: end;
  }
  .chasm > .kicker { grid-column: 1 / -1; }
  .chasm > .fold-heading { grid-column: 1; margin-bottom: 0; max-width: 16ch; }
  .chasm-copy { grid-column: 2; margin-bottom: 0.4rem; }
  .chasm > .curve-figure, .chasm > .curve-caption,
  .chasm > .pyr, .chasm > .pyr-caption { grid-column: 1 / -1; }
  .curve-caption { margin-top: 2rem; }

  /* Fold 7 — heading left, copy right; the sequence alternates so the
     order reads as an argument, not a gallery. */
  .arch {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    column-gap: 4rem;
    align-items: end;
  }
  .arch > .kicker { grid-column: 1 / -1; }
  .arch > .fold-heading { grid-column: 1; margin-bottom: 0; max-width: 16ch; }
  .arch-copy { grid-column: 2; margin-bottom: 0.4rem; }
  .arch > .seq { grid-column: 1 / -1; }
  .seq { gap: 5.5rem; }
  .seq-half { align-self: flex-start; width: min(34rem, 60%); }
  .seq-half + .seq-half { align-self: flex-end; }

  /* Fold 8 — the number and its gloss share one line of sight;
     the map answers from the left, the press from the right. */
  .result-hero {
    flex-direction: row; align-items: flex-end; gap: 4rem;
    margin-bottom: 5rem;
  }
  .result-gloss { padding-bottom: 2.2rem; }
  .result-map { max-width: 38rem; }
}

/* ── Reduced motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}