/* ══════════════════════════════════════════════════
   Airframe · Vendor Landscape Series · Q2 2026
   Shared stylesheet for /research/50-years/*

   ── BRAND RULE · TYPOGRAPHY ─────────────────────────
   Domaine Sans Display:  rendered size ≥ 50px ONLY.
                          Always weight 500 (Medium).
                          Reserved for: page H1s, section
                          headings, big stat callouts.
   PP Neue Montreal:      all other text — body prose,
                          subheads, deks, labels, chart
                          captions, anything < 50px.
                          Weight 400 (body) or 500 (UI).
   PP Neue Montreal Mono: data, hex codes, timestamps,
                          eyebrows, axis labels.
   Brand kit canonical reference:
     ~/Documents/GitHub/airframe/brand-kit
   The 50px floor for Domaine should be added there too.
   ─────────────────────────────────────────────────── */

/* ── FONTS ── */
@font-face { font-family: 'Domaine'; src: url('fonts/DomaineSansDisplay-Light.otf') format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Domaine'; src: url('fonts/DomaineSansDisplay-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Domaine'; src: url('fonts/DomaineSansDisplay-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Domaine'; src: url('fonts/DomaineSansDisplay-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Domaine'; src: url('fonts/DomaineSansDisplay-Thin.otf') format('opentype'); font-weight: 100; font-display: swap; }
/* Domaine Display (serif sibling) — used for bolder display + italic emphasis where
   Domaine Sans Display has no italic-medium weight available. The serif italics
   are the heaviest, most-legible italic option in the brand family. */
@font-face { font-family: 'Domaine'; src: url('fonts/domaine-display-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Domaine'; src: url('fonts/domaine-display-semibold-italic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Domaine'; src: url('fonts/domaine-display-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Domaine'; src: url('fonts/domaine-display-bold-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
/* Map italic at weight 500 to the semibold italic — fills the missing
   Sans-Display italic-medium slot, eliminates system-serif fallback. */
@font-face { font-family: 'Domaine'; src: url('fonts/domaine-display-semibold-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Domaine'; src: url('fonts/domaine-display-regular-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montreal'; src: url('fonts/PPNeueMontreal-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Montreal'; src: url('fonts/PPNeueMontreal-Book.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Montreal'; src: url('fonts/PPNeueMontreal-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'MontrealMono'; src: url('fonts/PPNeueMontrealMono-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --void: #080912;
  --midnight: #0D0F1E;
  --deep: #141628;
  --edge: #1C2038;
  --paper: #FAFAF8;
  --paper-2: #F2F1EE;
  --paper-3: #E8E6E0;
  --rule: #D8D5CE;
  --ink: #0A0A10;
  --ink-2: #1A1A22;
  --ink-dim: rgba(10,10,16,0.68);
  --ink-ghost: rgba(10,10,16,0.32);
  --amber: #D4890F;
  --amber-hi: #F0A020;
  --amber-deep: #A8690A;
  --amber-dim: rgba(212,137,15,0.28);
  --clarity: #F2F1EE;
  --clarity-dim: rgba(242,241,238,0.5);
  --clarity-ghost: rgba(242,241,238,0.14);
}
html, body { background: var(--paper); color: var(--ink); }
body {
  font-family: 'Montreal', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
}
/* Numbers get tabular figures so stat columns align */
.q-val, .callout-val, .vault-val, .mega-num, .mega-stat-num,
.mult-val, .sa-val, .pa-val, .flow-step-val, .pivot-cost-val,
.scale-stat-val, .hub-rs-val, .exp-wave-count, .explorer-year-val,
.dr-stat-val, .labs-val, .lr-val, .pace-val, .vault-stat .val,
.coming-stat-cell .val, .sc-stat strong, .subst-col-val,
.subst-control-val { font-variant-numeric: tabular-nums; font-feature-settings: "kern", "tnum", "lnum"; }
/* Keyboard focus rings — visible but on-brand */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}
html { scroll-behavior: smooth; }
a { color: inherit; text-decoration: none; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 56px; padding: 0 48px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(250,250,248,0.86); backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--paper-3);
}
.nav-back {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-dim);
  display: flex; align-items: center; gap: 10px; transition: color 0.2s;
}
.nav-back:hover { color: var(--amber); }
.nav-back::before { content: '←'; font-size: 13px; }
.nav-logo {
  display: inline-flex; align-items: center; gap: 1px;
}
.nav-lockup { height: 18px; width: auto; display: block; }
/* legacy text fallback — only used if lockup img is missing */
.nav-dot { color: inherit; }
.nav-progress {
  position: absolute; bottom: -1px; left: 0; height: 1px;
  background: var(--amber); width: 0%; transition: width 0.12s linear;
}

.mono { font-family: 'MontrealMono'; font-weight: 400; }
.serif { font-family: 'Montreal'; font-weight: 500; letter-spacing: -0.01em; }
.serif-it { font-family: 'Montreal'; font-weight: 500; font-style: italic; letter-spacing: -0.01em; }
.eyebrow {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(212,137,15,0.85);
  display: inline-flex; align-items: center; gap: 14px;
}
.eyebrow::before {
  content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.55); flex-shrink: 0;
}

/* ── HERO (Part 01 scroll-driven) ── */
.hero-wrap { position: relative; height: 400vh; }
.hero-stage { position: sticky; top: 0; left: 0; right: 0; height: 100vh; overflow: hidden; background: var(--void); }
#hero-chart { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 1; transition: opacity 0.7s ease; }
.hero-grid-floor { position: absolute; bottom: 0; left: 0; right: 0; height: 55%; background-image: transparent; pointer-events: none; z-index: 2; }
.hero-scan { position: absolute; top: 8%; bottom: 14%; width: 1px; background: rgba(212,137,15,0.55); z-index: 3; pointer-events: none; box-shadow: 0 0 22px rgba(212,137,15,0.3); }
.hero-years { position: absolute; bottom: 80px; left: 56px; right: 56px; display: flex; justify-content: space-between; font-family: 'MontrealMono'; font-size: 11px; color: rgba(212,137,15,0.3); letter-spacing: 0.16em; z-index: 4; pointer-events: none; }
.hero-years span { opacity: 0.55; transition: opacity 0.5s, color 0.5s; }
.hero-years span.on { color: var(--amber); opacity: 1; }
.beats { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.beat { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 10vw; opacity: 0; transform: translateY(20px); transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1); pointer-events: none; }
.beat.on { opacity: 1; transform: none; }
.beat .content { max-width: 880px; text-align: center; }
.tag-intro { font-family: 'MontrealMono'; font-size: 14px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(212,137,15,0.85); display: inline-flex; align-items: center; gap: 18px; }
.tag-intro::before, .tag-intro::after { content: ''; width: 56px; height: 1px; background: rgba(212,137,15,0.55); }
.beat#beat-1 .content::after {
  content: 'Scroll to begin ↓';
  position: absolute; left: 50%; bottom: 64px;
  transform: translateX(-50%);
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.28em;
  text-transform: uppercase; color: rgba(212,137,15,0.55);
  animation: scrollHint 2.4s ease-in-out infinite;
}
@keyframes scrollHint {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.55; }
  50% { transform: translate(-50%, 6px); opacity: 0.9; }
}
.b2-eye, .b3-eye { font-family: 'MontrealMono'; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.75); margin-bottom: 28px; }
.b2-hl { font-family: 'Domaine'; font-weight: 600; font-size: clamp(64px, 11vw, 156px); line-height: 0.96; letter-spacing: -0.03em; color: var(--clarity); text-wrap: balance; }
.b2-hl em { font-style: italic; font-weight: 300; color: rgba(242,241,238,0.4); }
.b3-hl { font-family: 'Domaine'; font-weight: 600; font-size: clamp(56px, 9vw, 132px); line-height: 1.0; letter-spacing: -0.03em; }
.b3-hl .from { color: rgba(242,241,238,0.4); font-weight: 300; }
.b3-hl .arrow { color: rgba(212,137,15,0.55); font-weight: 300; padding: 0 0.18em; }
.b3-hl .to { color: var(--amber); font-style: italic; font-weight: 400; }
.b3-sub { font-family: 'Montreal'; font-weight: 300; font-size: 18px; color: var(--clarity-dim); margin-top: 32px; letter-spacing: -0.01em; }
.b4-hl { font-family: 'Domaine'; font-weight: 600; font-size: clamp(56px, 7vw, 104px); line-height: 1.05; letter-spacing: -0.025em; color: var(--clarity); }
.b4-hl strong { color: var(--amber); font-weight: 400; font-style: italic; }
.b4-sub { font-family: 'Montreal'; font-weight: 300; font-size: 18px; color: var(--clarity-dim); margin-top: 32px; letter-spacing: -0.01em; }
.hero-stage.dim #hero-chart { opacity: 0.18; }
.hero-stage.black { background: #000; }
.hero-stage.black #hero-chart { opacity: 0; }

/* ── EDITORIAL FRAME ── */
section.editorial { max-width: 1240px; margin: 0 auto; padding: 0 56px; }
section.editorial.narrow { max-width: 740px; }
section.editorial.mid { max-width: 920px; }

/* ── MASTHEAD ── */
.masthead { padding: 160px 0 80px; border-bottom: 1px solid var(--rule); margin-bottom: 100px; }
.masthead-brand { display: inline-flex; align-items: center; }
.masthead-lockup { height: 28px; width: auto; display: block; }
.masthead-brand .dot { color: inherit; }
.masthead-meta { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-top: 12px; }
.masthead-h1 { font-family: 'Domaine'; font-weight: 600; font-size: clamp(52px, 7vw, 96px); line-height: 1.02; letter-spacing: -0.028em; color: var(--ink); margin-top: 56px; text-wrap: balance; }
.masthead-h1 .num { color: var(--amber); }
.masthead-dek { font-family: 'Montreal'; font-weight: 400; font-style: italic; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-2); margin-top: 32px; max-width: 880px; }
.masthead-byline { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); margin-top: 48px; }
.masthead-byline strong { color: var(--ink); font-weight: 400; }

/* ── QUADRANT ── */
.quadrant-wrap { max-width: 1240px; margin: 0 auto 120px; padding: 0 56px; }
.quadrant-eye { margin-bottom: 28px; }
.quadrant-title { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 16px; max-width: 900px; text-wrap: balance; }
.quadrant-title em { font-weight: 300; font-style: italic; color: var(--ink-dim); }
.quadrant-desc { font-family: 'Montreal'; font-weight: 400; font-size: 17px; line-height: 1.55; color: var(--ink-dim); max-width: 720px; margin-bottom: 56px; }
.quadrant { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.q-cell { background: var(--paper); padding: 56px 48px; position: relative; min-height: 240px; opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.q-cell.on { opacity: 1; transform: none; }
.q-cell:nth-child(2) { transition-delay: 0.08s; }
.q-cell:nth-child(3) { transition-delay: 0.16s; }
.q-cell:nth-child(4) { transition-delay: 0.24s; }
.q-label { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); }
.q-val { font-family: 'Domaine'; font-weight: 600; font-size: clamp(56px, 6vw, 88px); line-height: 1; letter-spacing: -0.03em; color: var(--ink); margin-top: 24px; }
.q-val .unit { color: var(--ink-ghost); font-weight: 300; }
.q-meta { font-family: 'MontrealMono'; font-size: 13px; color: var(--ink-dim); margin-top: 18px; display: flex; justify-content: space-between; align-items: baseline; }
.q-meta .share { color: var(--amber); }
.q-cell.amber .q-val { color: var(--amber); }

/* ── PROSE ── */
.prose-section { max-width: 680px; margin: 0 auto; padding: 0 32px; }
.prose-section.wide { max-width: 880px; }
.section-eye { margin-bottom: 24px; }
.section-h2 { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 56px); line-height: 1.08; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 20px; text-wrap: balance; }
.section-sub { font-family: 'Montreal'; font-weight: 400; font-style: italic; font-size: clamp(19px, 2.1vw, 24px); line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-2); margin-bottom: 48px; }
.prose p { font-family: 'Montreal'; font-weight: 400; font-size: 20px; line-height: 1.7; color: var(--ink-2); margin-bottom: 32px; letter-spacing: -0.005em; }
/* Drop cap — opt-in. Apply .has-dropcap on a .prose block whose first paragraph
   is long enough to wrap the floated capital (≥ ~5 lines). Default is no drop cap
   so short intro paragraphs don't render with a giant orphaned letter. */
.prose.has-dropcap > p:first-child::first-letter {
  font-family: 'Domaine'; font-weight: 600;
  font-size: 3.4em; line-height: 0.86;
  float: left; margin: 0.06em 0.1em 0 0;
  color: var(--ink); padding-right: 2px;
}
.prose p em { font-style: italic; color: var(--ink); }
.prose p strong { font-weight: 500; color: var(--ink); }
.prose .lede { font-family: 'Montreal'; font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 36px; }
.prose .lede em { font-style: italic; color: var(--ink-dim); }
.prose .one-line { font-family: 'Domaine'; font-weight: 600; font-style: italic; font-size: clamp(50px, 5vw, 64px); line-height: 1.15; color: var(--amber); margin: 48px 0; letter-spacing: -0.022em; }
.prose .our-read { border-left: 2px solid var(--amber); padding: 4px 0 4px 28px; margin: 40px 0; }
.prose .our-read strong { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 12px; font-weight: 400; }
.section-gap { height: 120px; }
.section-gap.lg { height: 160px; }
.section-gap.sm { height: 64px; }

/* ── SIDENOTE RAIL (Tufte-style margin notes) ── */
.prose-section.has-sidenotes { position: relative; }
.prose-section.has-sidenotes .prose { position: relative; }
.sn-ref {
  font-family: 'MontrealMono';
  font-size: 0.62em;
  font-weight: 400;
  color: var(--amber);
  vertical-align: super;
  line-height: 0;
  margin: 0 1px 0 2px;
  letter-spacing: 0;
  cursor: pointer;
  text-decoration: none;
}
.sn-ref:hover { color: var(--amber-deep); }
.sidenote {
  float: right;
  clear: right;
  width: 220px;
  margin-right: -260px;
  margin-top: 6px;
  margin-bottom: 18px;
  font-family: 'Montreal';
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-dim);
  letter-spacing: 0;
  padding-left: 14px;
  border-left: 1px solid var(--rule);
}
.sidenote .sn-num {
  font-family: 'MontrealMono';
  font-size: 10px;
  color: var(--amber);
  vertical-align: super;
  margin-right: 4px;
  letter-spacing: 0.04em;
}
.sidenote .sn-src {
  font-family: 'MontrealMono';
  font-size: 10px;
  color: var(--ink-ghost);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-top: 6px;
}
@media (max-width: 1180px) {
  .sidenote {
    float: none;
    clear: both;
    width: auto;
    margin: -12px 0 28px 0;
    padding: 12px 16px;
    background: var(--paper-2);
    border-left: 2px solid var(--amber);
    font-size: 13px;
  }
}

/* ── EDIT TABLES ── */
.edit-table { max-width: 980px; margin: 56px auto; padding: 0 32px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.edit-table .et-row { display: grid; grid-template-columns: 1.2fr 1.5fr 1.5fr 1fr; padding: 22px 0; border-bottom: 1px solid var(--paper-3); align-items: baseline; gap: 24px; }
.edit-table .et-row:last-child { border-bottom: 0; }
.edit-table .et-head { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); }
.edit-table .et-head .et-cell { color: var(--amber); }
.edit-table .et-cell { font-family: 'Montreal'; font-size: 16px; line-height: 1.5; color: var(--ink); }
.edit-table .et-cell.dim { color: var(--ink-dim); font-weight: 300; }
.edit-table .et-cell.mono { font-family: 'MontrealMono'; font-size: 13px; letter-spacing: 0.04em; }
.edit-table .et-cell.amber { color: var(--amber); }
.edit-table.cols-5 .et-row { grid-template-columns: 1.4fr 2.4fr 2.8fr; }
.edit-table.cols-5 .et-head .et-cell { white-space: nowrap; }
.edit-table.cols-5 .et-row .et-cell:nth-child(n+4) { display: none; }
.edit-table.cols-5 .et-row .et-cell:nth-child(2),
.edit-table.cols-5 .et-row .et-cell:nth-child(3) { grid-column: auto !important; }

/* ── LADDER ── */
.ladder-wrap { max-width: 1100px; margin: 80px auto; padding: 0 56px; }
.ladder-cap { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 28px; display: flex; align-items: center; gap: 14px; }
.ladder-cap::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.ladder-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 48px; max-width: 760px; text-wrap: balance; }
.ladder { display: flex; flex-direction: column; gap: 18px; padding: 32px 0; }
.ladder-row { display: grid; grid-template-columns: 200px 1fr 140px 100px; gap: 24px; align-items: center; }
.lr-gen { font-family: 'Montreal'; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }
.lr-bar-track { height: 14px; background: var(--paper-3); position: relative; overflow: hidden; }
.lr-bar { position: absolute; top: 0; left: 0; bottom: 0; background: var(--ink-2); width: 0%; transition: width 1.2s cubic-bezier(0.22,1,0.36,1); }
.lr-bar.amber { background: var(--amber); }
.lr-val { font-family: 'Montreal'; font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--ink-dim); text-align: right; }
.lr-val.amber { color: var(--amber); font-family: 'Montreal'; font-style: italic; font-weight: 500; font-size: 28px; letter-spacing: -0.01em; }
.lr-win { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-dim); text-align: right; }

/* ── CALLOUT ── */
.callout { max-width: 740px; margin: 80px auto; padding: 56px 32px; border-top: 1px solid rgba(212,137,15,0.35); border-bottom: 1px solid rgba(212,137,15,0.35); text-align: center; }
.callout-val { font-family: 'Domaine'; font-weight: 600; font-size: clamp(80px, 11vw, 156px); line-height: 1; letter-spacing: -0.035em; color: var(--amber); }
.callout-lab { font-family: 'MontrealMono'; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-dim); margin-top: 20px; }

/* ── COHORT ROWS ── */
.cohort-rows { max-width: 1100px; margin: 80px auto; padding: 0 56px; }
.cohort-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 48px; max-width: 760px; text-wrap: balance; }
.cohort-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--paper-3); }
.cohort-row:first-of-type { border-top: 1px solid var(--rule); }
.cr-name { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); letter-spacing: -0.022em; color: var(--ink); }
.cohort-row.amber .cr-name { color: var(--amber); font-style: italic; font-weight: 300; }
.cr-meta { font-family: 'MontrealMono'; font-size: 12px; letter-spacing: 0.06em; color: var(--ink-dim); text-align: right; }
.cr-meta .val { color: var(--ink); font-size: 16px; display: block; margin-top: 4px; font-family: 'Montreal'; font-weight: 400; }
.cohort-row.amber .cr-meta .val { color: var(--amber); }

/* ── ASYMMETRY ── */
.asym-wrap { max-width: 1100px; margin: 100px auto; padding: 0 56px; }
.asym-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 56px; max-width: 760px; text-wrap: balance; }
.asym-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 48px; align-items: center; }
.asym-col { text-align: center; }
.asym-label { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 24px; }
.asym-bar { width: 100%; background: var(--paper-3); position: relative; margin: 0 auto; }
.asym-bar.lg { height: 280px; }
.asym-bar.sm { height: 76px; margin-top: 204px; }
.asym-fill { position: absolute; bottom: 0; left: 0; right: 0; background: var(--amber); height: 100%; }
.asym-fill.muted { background: var(--ink-ghost); }
.asym-val { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5.5vw, 68px); letter-spacing: -0.022em; color: var(--ink); margin-top: 20px; }
.asym-val.amber { color: var(--amber); }
.asym-meta { font-family: 'MontrealMono'; font-size: 12px; letter-spacing: 0.08em; color: var(--ink-dim); margin-top: 10px; }
.asym-mid { font-family: 'Domaine'; font-weight: 600; font-style: italic; font-size: clamp(50px, 5vw, 64px); color: var(--amber); text-align: center; padding: 0 12px; letter-spacing: -0.022em; }
.asym-names { font-family: 'Montreal'; font-weight: 300; font-size: 13px; color: var(--ink-dim); margin-top: 18px; max-width: 380px; margin-left: auto; margin-right: auto; line-height: 1.5; }

/* ── INTERSTITIAL ── */
.interstitial { background: #000; padding: 180px 32px; margin: 120px 0; text-align: center; border-top: 1px solid rgba(212,137,15,0.15); border-bottom: 1px solid rgba(212,137,15,0.15); }
.inter-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 48px; }
.inter-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(56px, 7vw, 112px); line-height: 1.05; letter-spacing: -0.03em; color: var(--clarity); max-width: 1200px; margin: 0 auto; text-wrap: balance; }
.inter-h em { font-style: italic; color: var(--amber); font-weight: 400; }
.inter-h .arr { color: rgba(212,137,15,0.55); padding: 0 0.2em; font-weight: 300; }
.inter-sub { font-family: 'Montreal'; font-weight: 300; font-size: 18px; color: var(--clarity-dim); margin-top: 40px; letter-spacing: -0.005em; }

/* ── JV ── */
.jv-wrap { max-width: 1100px; margin: 100px auto; padding: 0 56px; }
.jv-legend {
  display: grid; grid-template-columns: 260px 1fr 1fr; gap: 32px;
  padding: 14px 0; margin-bottom: 12px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--paper-3);
  font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--amber);
  align-items: center;
}
.jv-leg-head { white-space: nowrap; }
.jv-leg-line { display: none; }
.jv-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 56px; max-width: 800px; text-wrap: balance; }
.jv-diagram { display: flex; flex-direction: column; gap: 64px; padding: 24px 0; }
.jv-row { display: grid; grid-template-columns: 260px 1fr 1fr; gap: 32px; align-items: center; }
.jv-left { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 56px); letter-spacing: -0.022em; color: var(--amber); font-style: italic; }
.jv-left .v { display: block; font-family: 'Montreal'; font-weight: 300; font-size: 14px; color: var(--ink-dim); margin-top: 8px; letter-spacing: 0.04em; font-style: normal; }
.jv-connect { position: relative; min-height: 60px; display: flex; align-items: center; }
.jv-line { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(212,137,15,0.45); }
.jv-mid { font-family: 'MontrealMono'; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); background: var(--paper); padding: 6px 16px; position: relative; z-index: 2; border: 1px solid rgba(212,137,15,0.5); }
.jv-nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.jv-node { font-family: 'Montreal'; font-weight: 400; font-size: 15px; color: var(--ink); padding: 10px 14px; border: 1px solid var(--rule); background: var(--paper); }
.jv-note { grid-column: 1 / -1; font-family: 'Montreal'; font-weight: 300; font-size: 14px; color: var(--ink-dim); margin-top: 8px; line-height: 1.5; }

/* ── METHOD ── */
.method-wrap { max-width: 920px; margin: 100px auto; padding: 0 56px; }
.method-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 12px; text-wrap: balance; }
.method-sub { font-family: 'Montreal'; font-weight: 400; font-style: italic; font-size: 20px; line-height: 1.5; color: var(--ink-2); margin-bottom: 48px; letter-spacing: -0.005em; }
.method-spec { border-top: 1px solid var(--rule); }
.method-row { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--paper-3); }
.method-key { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); }
.method-val { font-family: 'Montreal'; font-weight: 400; font-size: 17px; line-height: 1.55; color: var(--ink); letter-spacing: -0.005em; }

/* ── DOTFIELD ── */
.dotfield-wrap { max-width: 1240px; margin: 120px auto; padding: 0 56px; }
.dotfield-frame { position: relative; border: 1px solid var(--rule); background: var(--paper-2); overflow: hidden; }
.dotfield-header { display: flex; justify-content: space-between; align-items: baseline; padding: 28px 32px; border-bottom: 1px solid var(--rule); font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); }
.dotfield-header .label-amber { color: var(--amber); }
#dotfield { display: block; width: 100%; height: 480px; }
.dotfield-footer { display: flex; justify-content: space-between; align-items: baseline; padding: 20px 32px; border-top: 1px solid var(--rule); }
.dotfield-axis { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.16em; color: var(--ink-dim); }
.dotfield-cta { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); display: inline-flex; align-items: center; gap: 10px; transition: gap 0.2s; }
.dotfield-cta:hover { gap: 14px; }
.dotfield-cap { font-family: 'Montreal'; font-weight: 300; font-size: 14px; color: var(--ink-dim); margin-top: 20px; text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }

/* ── Age-distribution histogram (Part 03) ── */
.agehist-wrap { max-width: 1240px; margin: 100px auto; padding: 0 56px; }
.agehist-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.85); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.agehist-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.55); }
.agehist-h { font-family: 'Montreal'; font-weight: 500; font-size: clamp(28px, 3vw, 36px); line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 40px; max-width: 800px; text-wrap: balance; }
.agehist-frame { background: var(--paper-2); border: 1px solid var(--rule); padding: 32px; }
#agehistChart { display: block; width: 100%; height: 360px; }
.agehist-legend { display: flex; gap: 32px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.agehist-legend-item { display: flex; align-items: center; gap: 10px; }
.agehist-legend-item.amber { color: var(--amber); }
.agehist-swatch { width: 16px; height: 12px; }
.agehist-swatch.public { background: var(--ink-2); }
.agehist-swatch.private { background: var(--amber); }

/* ── PIK / refinancing mechanic (Part 04) ── */
.pik-wrap { max-width: 1100px; margin: 100px auto; padding: 0 56px; }
.pik-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.85); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.pik-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.55); }
.pik-h { font-family: 'Montreal'; font-weight: 500; font-size: clamp(28px, 3vw, 36px); line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 48px; max-width: 800px; text-wrap: balance; }
.pik-steps { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--rule); }
.pik-step { display: grid; grid-template-columns: 80px 1fr 200px; gap: 32px; align-items: center; padding: 28px 32px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.pik-step:last-child { border-bottom: 0; }
.pik-step.terminal { background: rgba(212,137,15,0.04); }
.pik-step-num { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; color: var(--ink-dim); }
.pik-step.terminal .pik-step-num { color: var(--amber); }
.pik-step-name { font-family: 'Montreal'; font-weight: 500; font-size: clamp(20px, 2.2vw, 24px); letter-spacing: -0.012em; color: var(--ink); line-height: 1.3; }
.pik-step.terminal .pik-step-name { color: var(--amber); font-style: italic; }
.pik-step-status { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); text-align: right; }
.pik-step.terminal .pik-step-status { color: var(--amber); }
.pik-foot { font-family: 'Montreal'; font-weight: 400; font-style: italic; font-size: 14px; color: var(--ink-dim); margin-top: 16px; text-align: center; line-height: 1.5; }

@media (max-width: 880px) {
  .agehist-wrap, .pik-wrap { padding-left: 24px; padding-right: 24px; }
  .pik-step { grid-template-columns: 50px 1fr; gap: 16px; padding: 20px 20px; }
  .pik-step > .pik-step-status { grid-column: 1 / -1; padding-left: 66px; text-align: left; }
}

/* ── Pull-quotes (verbatim Paul, lifted into amber Domaine blocks) ── */
.pullquote {
  max-width: 880px; margin: 72px auto;
  padding: 28px 0 28px 56px;
  border-left: 3px solid var(--amber);
  font-family: 'Domaine'; font-weight: 600; font-style: italic;
  font-size: clamp(50px, 5vw, 60px); line-height: 1.18;
  color: var(--amber);
  letter-spacing: -0.022em;
  text-wrap: balance;
  font-feature-settings: "kern", "liga";
}
.pullquote cite {
  display: block; margin-top: 20px;
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-dim); font-style: normal;
}
@media (max-width: 880px) {
  .pullquote { margin: 48px 24px; padding: 20px 0 20px 24px; }
}

/* ── Sticky table-of-contents (Part 01) ── */
.toc {
  position: fixed; left: 32px; top: 50%; transform: translateY(-50%);
  width: 220px; z-index: 50;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.toc.visible { opacity: 1; visibility: visible; pointer-events: auto; }
.toc-lab {
  font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-dim);
  padding-bottom: 14px; margin-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.toc-list { display: flex; flex-direction: column; gap: 2px; }
.toc-item {
  display: grid; grid-template-columns: 28px 1fr; gap: 4px;
  padding: 7px 0 7px 16px; border-left: 1px solid var(--paper-3);
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-dim); text-decoration: none;
  transition: color 0.2s, border-color 0.2s, padding-left 0.2s, background 0.2s;
}
.toc-item:hover { color: var(--ink); border-left-color: var(--ink-dim); }
.toc-item.active {
  color: var(--amber); border-left: 2px solid var(--amber); padding-left: 15px;
}
.toc-num { color: var(--ink-ghost); }
.toc-item.active .toc-num { color: var(--amber); }
.toc-name { line-height: 1.4; }
/* Hide TOC unless viewport has enough side room for it without overlapping
   the centered max-1240 content column. TOC sits left:32 width:200, so
   content column needs to clear 252px on each side → viewport > ~1744px. */
.toc { width: 200px; }
@media (max-width: 1740px) { .toc { display: none; } }
.dotfield-note, .waves-note, .subst-note {
  font-family: 'Montreal'; font-weight: 400; font-style: italic; font-size: 13px;
  line-height: 1.55; color: var(--ink-dim); margin-top: 16px;
  max-width: 760px; margin-left: auto; margin-right: auto;
  text-align: center; letter-spacing: -0.005em;
  padding: 14px 24px 0;
}
.waves-note { max-width: 1100px; }
.subst-note { max-width: 720px; }

/* ── FAQ — collapsible dropdowns ── */
.faq-wrap { max-width: 880px; margin: 120px auto; padding: 0 56px; }
.faq-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 56px; }
.faq-item { border-bottom: 1px solid var(--paper-3); padding: 0; }
.faq-item:first-of-type { border-top: 1px solid var(--rule); }
.faq-item > summary {
  font-family: 'Montreal'; font-weight: 500; font-size: 19px;
  letter-spacing: -0.01em; color: var(--ink);
  padding: 24px 36px 24px 0;
  text-wrap: balance; line-height: 1.4;
  cursor: pointer; list-style: none; position: relative;
  transition: color 0.15s;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: '+'; position: absolute; right: 4px; top: 24px;
  font-family: 'MontrealMono'; font-size: 18px; font-weight: 400;
  color: var(--amber); transition: transform 0.2s, content 0.2s;
}
.faq-item[open] > summary::after { content: '−'; }
.faq-item:hover > summary { color: var(--amber); }
.faq-a {
  font-family: 'Montreal'; font-weight: 400; font-size: 16px;
  line-height: 1.65; color: var(--ink-2); letter-spacing: -0.005em;
  padding: 0 0 28px 0;
}
.faq-a em { color: var(--ink); font-style: italic; }
.faq-a ul { list-style: none; padding-left: 0; margin: 12px 0 0; }
.faq-a ul li { padding-left: 16px; position: relative; margin-bottom: 8px; }
.faq-a ul li::before { content: '·'; position: absolute; left: 4px; color: var(--amber); }

/* ── CLOSING + CTA ROW ── */
.closing-wrap { max-width: 740px; margin: 120px auto 0; padding: 0 32px; }
.closing-sign { font-family: 'Montreal'; font-weight: 500; font-style: italic; font-size: 20px; color: var(--amber); margin-top: 40px; letter-spacing: -0.01em; }
.closing-contact { margin-top: 40px; margin-bottom: 0; font-family: 'MontrealMono'; font-size: 13px; letter-spacing: 0.08em; }
.closing-contact a { color: var(--amber); text-decoration: none; border-bottom: 1px solid rgba(212,137,15,0.35); padding-bottom: 2px; transition: border-color 0.2s; }
.closing-contact a:hover { border-bottom-color: var(--amber); }
.cta-row { max-width: 1240px; margin: 120px auto; padding: 0 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.cta-card { background: var(--paper); padding: 48px 36px; transition: background 0.25s; cursor: pointer; display: flex; flex-direction: column; min-height: 280px; }
.cta-card:hover { background: var(--paper-2); }
.cta-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); margin-bottom: 24px; }
.cta-h { font-family: 'Montreal'; font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 16px; text-wrap: balance; line-height: 1.3; }
.cta-body { font-family: 'Montreal'; font-weight: 400; font-size: 15px; line-height: 1.6; color: var(--ink-2); flex: 1; }
.cta-arr { font-family: 'MontrealMono'; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; transition: gap 0.2s; }
.cta-card:hover .cta-arr { gap: 14px; }

/* ── PAGINATION + FOOTER ── */
.pagination { max-width: 1240px; margin: 120px auto 80px; padding: 0 56px; display: flex; justify-content: space-between; border-top: 1px solid var(--rule); padding-top: 56px; }
.pag-link { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); transition: color 0.2s; }
.pag-link:hover { color: var(--amber); }
footer { background: var(--paper-2); padding: 64px 56px; border-top: 1px solid var(--rule); }
.footer-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 32px; }
.footer-line { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.16em; color: var(--ink-dim); line-height: 1.7; }
.footer-line a { color: var(--amber); }
.footer-brand { display: inline-flex; align-items: center; }
.footer-lockup { height: 22px; width: auto; display: block; }
.footer-brand .dot { color: inherit; }

/* ══════════════════════════════════════════════════
   PART 01 · ADDED VISUAL COMPONENTS
   ══════════════════════════════════════════════════ */

/* Boris Cherny workflow infographic — Anatomy of $160M/emp */
.workflow-wrap { max-width: 1100px; margin: 80px auto; padding: 0 56px; }
.workflow-eye {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
}
.workflow-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.workflow-h {
  font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px);
  line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 40px;
  max-width: 800px; text-wrap: balance;
}
.workflow-h em { font-style: italic; color: var(--amber); font-weight: 300; }
.workflow-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
.workflow-cell {
  background: var(--paper); padding: 32px 24px;
  display: grid;
  grid-template-rows: 28px auto 1fr;
  row-gap: 18px;
  min-height: 240px;
}
.wf-lab {
  font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim);
  align-self: end;
}
.wf-val {
  font-family: 'Domaine'; font-weight: 600; font-size: clamp(44px, 4.4vw, 56px);
  letter-spacing: -0.025em; color: var(--amber); line-height: 1;
  white-space: nowrap;
  align-self: start;
}
.wf-val .unit {
  font-family: 'Montreal'; font-weight: 300; font-size: 0.42em;
  color: var(--ink-2); letter-spacing: -0.01em; padding-left: 6px;
}
.wf-desc {
  font-family: 'Montreal'; font-weight: 400; font-size: 13px; line-height: 1.55;
  color: var(--ink-2);
  align-self: start;
  border-top: 1px solid var(--paper-3);
  padding-top: 16px;
}
.workflow-footer {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.14em;
  color: var(--ink-dim); margin-top: 20px; text-align: right;
}

/* IBM × Anthropic scale matrix */
.scale-wrap { max-width: 1100px; margin: 100px auto; padding: 0 56px; }
.scale-eye {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
}
.scale-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.scale-h {
  font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px);
  line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 40px;
  max-width: 800px; text-wrap: balance;
}
.scale-h em { font-style: italic; color: var(--amber); font-weight: 300; }
.scale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.scale-col {
  padding: 36px 32px; border: 1px solid var(--rule); background: var(--paper-2);
  display: flex; flex-direction: column;
}
.scale-col.amber {
  background: rgba(212,137,15,0.05); border-color: rgba(212,137,15,0.4);
}
.scale-col-label {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim);
}
.scale-col.amber .scale-col-label { color: var(--amber); }
.scale-name {
  font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px);
  letter-spacing: -0.025em; color: var(--ink); margin-top: 8px; margin-bottom: 8px;
}
.scale-col.amber .scale-name { color: var(--amber); font-style: italic; font-weight: 300; }
.scale-sub {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.12em;
  color: var(--ink-dim); margin-bottom: 32px;
}
.scale-dots {
  display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px;
  padding: 16px 0;
}
.scale-dot { aspect-ratio: 1; background: var(--ink-ghost); }
.scale-col.amber .scale-dot { background: var(--amber); }
.scale-foot {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--paper-3);
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.scale-col.amber .scale-foot { border-top-color: rgba(212,137,15,0.25); }
.scale-stat-lab {
  font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px;
}
.scale-stat-val {
  font-family: 'Montreal'; font-weight: 500; font-size: 22px;
  letter-spacing: -0.01em; color: var(--ink);
}
.scale-col.amber .scale-stat-val { color: var(--amber); }
.scale-key {
  font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-dim); margin-top: 28px;
  display: inline-flex; align-items: center; gap: 10px;
}
.scale-key-dot { width: 8px; height: 8px; background: var(--ink-ghost); display: inline-block; }
.scale-conclusion {
  margin-top: 40px; padding-top: 32px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.scale-conclusion-val {
  font-family: 'Domaine'; font-weight: 600; font-style: italic;
  font-size: clamp(40px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.022em; color: var(--amber);
  text-wrap: balance;
}
.scale-conclusion-lab {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-dim); margin-top: 14px;
}

/* Frontier labs detail */
.labs-wrap { max-width: 1100px; margin: 80px auto 40px; padding: 0 56px; }
.labs-eye {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
}
.labs-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.labs-h {
  font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 56px);
  line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 40px;
  max-width: 760px; text-wrap: balance;
}
.labs-stack {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--rule); padding-top: 28px;
}
.labs-row {
  display: grid; grid-template-columns: 160px 1fr 110px 140px;
  gap: 24px; align-items: center; padding: 14px 0;
  border-bottom: 1px solid var(--paper-3);
}
.labs-row:last-of-type { border-bottom: 1px solid var(--rule); }
.labs-name {
  font-family: 'Montreal'; font-weight: 500; font-size: clamp(20px, 2.2vw, 24px);
  letter-spacing: -0.01em; color: var(--ink);
}
.labs-bar-track { height: 16px; background: var(--paper-3); position: relative; overflow: hidden; }
.labs-bar { position: absolute; top: 0; left: 0; bottom: 0; background: var(--amber); width: 0%; transition: width 1.1s cubic-bezier(0.22,1,0.36,1); }
.labs-val { font-family: 'Montreal'; font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--amber); text-align: right; }
.labs-emp { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.08em; color: var(--ink-dim); text-align: right; }
.labs-emp .n { display: block; color: var(--ink); font-size: 16px; font-family: 'Montreal'; font-weight: 400; margin-bottom: 2px; }
.labs-footer {
  margin-top: 24px; display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 20px; border-top: 1px solid var(--rule);
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.16em;
  color: var(--ink-dim); text-transform: uppercase;
}
.labs-footer-total { color: var(--amber); font-family: 'Montreal'; font-size: 19px; letter-spacing: -0.01em; text-transform: none; font-weight: 500; }

/* responsive */
@media (max-width: 880px) {
  .workflow-wrap, .scale-wrap, .labs-wrap { padding-left: 24px; padding-right: 24px; }
  .workflow-grid { grid-template-columns: 1fr 1fr; }
  .workflow-cell { min-height: 160px; padding: 24px 20px; }
  .scale-grid { grid-template-columns: 1fr; gap: 24px; }
  .scale-dots { grid-template-columns: repeat(24, 1fr); }
  .labs-row { grid-template-columns: 100px 1fr 80px; }
  .labs-row > div:nth-child(4) { display: none; }
  .labs-name { font-size: 20px; }
}

/* ══════════════════════════════════════════════════
   HUB-SPECIFIC
   ══════════════════════════════════════════════════ */
.hub-hero { padding: 160px 56px 80px; max-width: 1240px; margin: 0 auto; }
.hub-brand { display: inline-flex; align-items: center; }
.hub-lockup { height: 24px; width: auto; display: block; }
.hub-brand .dot { color: inherit; }
.hub-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); margin-top: 24px; }
.hub-h1 { font-family: 'Domaine'; font-weight: 600; font-size: clamp(56px, 8vw, 116px); line-height: 1.0; letter-spacing: -0.03em; color: var(--ink); margin-top: 40px; text-wrap: balance; max-width: 1100px; }
.hub-h1 em { font-style: italic; font-weight: 300; color: var(--amber); }
.hub-dek { font-family: 'Montreal'; font-weight: 400; font-style: italic; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-2); margin-top: 40px; max-width: 880px; }
.hub-dek em { font-style: italic; color: var(--amber); }
.hub-cta-row { margin-top: 56px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.hub-cta {
  font-family: 'MontrealMono'; font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink);
  padding: 14px 24px; display: inline-flex; align-items: center; gap: 12px;
  transition: background 0.2s, color 0.2s;
}
.hub-cta:hover { background: var(--ink); color: var(--paper); }
.hub-cta.amber { color: var(--paper); background: var(--amber); border-color: var(--amber); }
.hub-cta.amber:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: var(--paper); }

.series-rail { max-width: 1240px; margin: 80px auto 120px; padding: 0 56px; }
.series-rail-eye { margin-bottom: 32px; }
.series-rail-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 56px; max-width: 880px; text-wrap: balance; }
.series-card-row { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.series-card {
  background: var(--paper); padding: 48px 56px;
  display: grid; grid-template-columns: 120px 1fr 220px; gap: 40px;
  align-items: start; transition: background 0.2s; cursor: pointer;
}
.series-card.linked:hover { background: var(--paper-2); }
.series-card.unlinked { cursor: default; opacity: 0.78; }
.series-num { font-family: 'Domaine'; font-weight: 600; font-size: 56px; letter-spacing: -0.025em; color: var(--amber); font-style: italic; }
.series-card.unlinked .series-num { color: var(--ink-ghost); font-style: normal; }
.series-body .sc-status {
  font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 14px;
}
.series-card.unlinked .sc-status { color: var(--ink-ghost); }
.series-card.unlinked .sc-status::before { content: '· '; }
.sc-title { font-family: 'Domaine'; font-weight: 600; font-size: clamp(32px, 2.8vw, 36px); letter-spacing: -0.022em; color: var(--ink); margin-bottom: 14px; text-wrap: balance; line-height: 1.2; }
.sc-body { font-family: 'Montreal'; font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 640px; }
.sc-stat { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); text-align: right; line-height: 1.6; }
.sc-stat strong { color: var(--amber); font-family: 'Montreal'; font-weight: 500; font-size: 17px; letter-spacing: -0.01em; display: block; margin-bottom: 6px; text-transform: none; }
.series-card.unlinked .sc-stat strong { color: var(--ink); }

/* hub register-substrate teaser */
.hub-register {
  max-width: 1240px; margin: 0 auto 120px; padding: 0 56px;
}
.hub-register-frame {
  background: var(--paper-2); border: 1px solid var(--rule);
  padding: 56px 56px 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px;
  align-items: center;
  text-decoration: none; color: inherit;
  transition: background 0.2s, border-color 0.2s;
}
.hub-register-frame:hover { background: var(--paper); border-color: var(--amber); }
.hub-register-frame:hover .hub-reg-cta { gap: 14px; color: var(--amber-deep); }
a.hub-register-frame .hub-reg-cta { cursor: inherit; }
.hub-reg-left {
  padding-bottom: 56px;
}
.hub-reg-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; }
.hub-reg-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 20px; }
.hub-reg-body { font-family: 'Montreal'; font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--ink-2); margin-bottom: 28px; }
.hub-reg-cta { font-family: 'MontrealMono'; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); display: inline-flex; align-items: center; gap: 10px; transition: gap 0.2s; }
.hub-reg-cta:hover { gap: 14px; }
.hub-reg-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  align-self: stretch;
  margin: -1px -56px -1px 0;
}
.hub-rs-cell { background: var(--paper); padding: 32px 28px; }
.hub-rs-label { font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 12px; }
.hub-rs-val { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 56px); letter-spacing: -0.022em; color: var(--ink); }
.hub-rs-val.amber { color: var(--amber); }
.hub-rs-sub { font-family: 'MontrealMono'; font-size: 12px; color: var(--ink-dim); margin-top: 8px; }

/* ══════════════════════════════════════════════════
   PART 00 — TYPESET PROLOGUE HERO
   ══════════════════════════════════════════════════ */
.p00-hero {
  max-width: 1240px; margin: 0 auto; padding: 96px 56px 64px;
}
.p00-tag {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 56px;
}
.p00-display {
  font-family: 'Domaine'; font-weight: 600; font-size: clamp(44px, 5.6vw, 88px);
  line-height: 1.04; letter-spacing: -0.024em; color: var(--ink);
  text-wrap: balance; max-width: 1100px;
}
.p00-display em {
  font-style: italic; color: var(--amber); font-weight: 400;
}
.p00-display .strike {
  position: relative; color: var(--ink-dim); font-weight: 300;
}
.p00-display .strike::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; background: var(--amber); transform: translateY(-1px);
}
.p00-byline {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-dim); margin-top: 64px;
}
.p00-byline strong { color: var(--ink); font-weight: 400; }

/* ── PART 00 · per-Consequence preview card ──
   Layout: meta row spans the top, headline + stat baseline-align below. */
.cons-tease {
  max-width: 880px; margin: 56px auto 48px;
  padding: 40px 36px;
  background: var(--paper-2);
  border-left: 2px solid var(--amber);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 48px;
  row-gap: 20px;
  align-items: baseline;
}
.cons-tease-meta {
  display: flex; align-items: baseline; gap: 16px;
  min-width: 0; grid-column: 1 / -1;
  border-bottom: 1px solid var(--rule); padding-bottom: 16px;
}
.cons-tease-num {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--amber);
}
.cons-tease-name {
  font-family: 'MontrealMono'; font-weight: 400; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-dim);
}
.cons-tease-h {
  font-family: 'Domaine'; font-weight: 600;
  font-size: clamp(42px, 4.2vw, 50px); line-height: 1.08;
  letter-spacing: -0.022em; color: var(--ink); text-wrap: balance;
  grid-column: 1; grid-row: 2; margin: 0;
}
.cons-tease-stat { text-align: right; min-width: 200px; grid-column: 2; grid-row: 2; align-self: end; }
.cons-tease-val {
  font-family: 'Domaine'; font-weight: 600;
  font-size: clamp(50px, 5vw, 64px); line-height: 1;
  color: var(--amber); letter-spacing: -0.028em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cons-tease-lab {
  font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-dim); margin-top: 14px;
  max-width: 220px; margin-left: auto;
}
@media (max-width: 720px) {
  .cons-tease { grid-template-columns: 1fr; padding: 28px 24px; gap: 20px; }
  .cons-tease-stat { text-align: left; min-width: 0; }
  .cons-tease-lab { margin-left: 0; }
}

/* ══════════════════════════════════════════════════
   PLACEHOLDER PARTS 02-05 — "Coming" hero
   ══════════════════════════════════════════════════ */
.coming-hero {
  max-width: 1240px; margin: 0 auto; padding: 140px 56px 80px;
}
.coming-tag {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 40px;
  display: inline-flex; align-items: center; gap: 14px;
}
.coming-tag::before {
  content: ''; width: 36px; height: 1px; background: var(--amber);
}
.coming-h1 {
  font-family: 'Domaine'; font-weight: 600;
  font-size: clamp(56px, 8vw, 116px); line-height: 1.0; letter-spacing: -0.03em;
  color: var(--ink); text-wrap: balance; max-width: 1100px;
}
.coming-h1 .num { color: var(--amber); font-weight: 300; font-style: italic; padding-right: 0.2em; }
.coming-dek {
  font-family: 'Montreal'; font-weight: 500; font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.35; letter-spacing: -0.015em;
  color: var(--ink-2); margin-top: 40px; max-width: 880px;
}
.coming-stat-row {
  margin-top: 64px; display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  background: var(--rule); border: 1px solid var(--rule);
}
.coming-stat-cell {
  background: var(--paper); padding: 36px 32px;
}
.coming-stat-cell .lab { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 12px; }
.coming-stat-cell .val { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); letter-spacing: -0.028em; color: var(--ink); }
.coming-stat-cell .val.amber { color: var(--amber); }

.coming-preview {
  max-width: 1100px; margin: 0 auto; padding: 80px 56px 0;
}
.coming-preview-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); margin-bottom: 28px; display: flex; align-items: center; gap: 14px; }
.coming-preview-eye::before { content: ''; width: 36px; height: 1px; background: var(--amber); }
.coming-preview-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 56px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 48px; max-width: 760px; text-wrap: balance; }

.coming-notify {
  max-width: 740px; margin: 100px auto 0; padding: 0 32px;
  text-align: center;
}
.coming-notify-h {
  font-family: 'Montreal'; font-weight: 500; font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.022em; color: var(--ink); margin-bottom: 16px;
}
.coming-notify-body {
  font-family: 'Montreal'; font-weight: 400; font-size: 17px; line-height: 1.6;
  color: var(--ink-2); margin-bottom: 36px;
}

/* Preview-specific viz blocks */
.preview-waves {
  display: flex; flex-direction: column; gap: 28px;
  border-top: 1px solid var(--rule); padding-top: 32px;
}
.preview-wave { display: grid; grid-template-columns: 60px 140px 1fr 100px; gap: 24px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--paper-3); }
.pw-num { font-family: 'Montreal'; font-weight: 500; font-style: italic; font-size: 32px; color: var(--ink-dim); }
.pw-name { font-family: 'Montreal'; font-weight: 500; font-size: 19px; color: var(--ink); letter-spacing: -0.01em; }
.pw-years { font-family: 'MontrealMono'; font-size: 12px; letter-spacing: 0.06em; color: var(--ink-dim); }
.pw-status { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); text-align: right; }
.preview-wave.active .pw-num { color: var(--amber); }
.preview-wave.active .pw-status { color: var(--amber); }

.preview-stack {
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--rule); padding-top: 32px;
}
.ps-row { display: grid; grid-template-columns: 200px 1fr 140px; gap: 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--paper-3); }
.ps-row.amber .ps-name { color: var(--amber); font-style: italic; font-weight: 300; }
.ps-row.amber .ps-val { color: var(--amber); }
.ps-name { font-family: 'Montreal'; font-weight: 500; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); }
.ps-track { height: 16px; background: var(--paper-3); position: relative; overflow: hidden; }
.ps-fill { position: absolute; top: 0; left: 0; bottom: 0; background: var(--ink-2); }
.ps-fill.amber { background: var(--amber); }
.ps-val { font-family: 'Montreal'; font-weight: 500; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); text-align: right; }

.preview-watchlist {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
.pwl-cell { background: var(--paper); padding: 24px 28px; display: flex; justify-content: space-between; align-items: baseline; }
.pwl-name { font-family: 'Montreal'; font-weight: 500; font-size: 19px; color: var(--ink); letter-spacing: -0.01em; }
.pwl-cat { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.14em; color: var(--ink-dim); text-transform: uppercase; }

.preview-asym {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 48px; align-items: center;
  padding: 32px 0; border-top: 1px solid var(--rule);
}
.pa-col { text-align: center; }
.pa-label { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 16px; }
.pa-bar { width: 100%; background: var(--paper-3); position: relative; height: 220px; }
.pa-bar.sm { height: 28px; margin-top: 192px; }
.pa-fill { position: absolute; bottom: 0; left: 0; right: 0; height: 100%; background: var(--amber); }
.pa-fill.muted { background: var(--ink-ghost); }
.pa-val { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); letter-spacing: -0.022em; color: var(--ink); margin-top: 20px; }
.pa-val.amber { color: var(--amber); }
.pa-meta { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.08em; color: var(--ink-dim); margin-top: 6px; }
.pa-mid { font-family: 'Montreal'; font-weight: 500; font-style: italic; font-size: clamp(28px, 3.2vw, 44px); color: var(--amber); }

/* ══════════════════════════════════════════════════
   PARTS 02-05 · PREVIEW PAGE COMPONENTS
   ══════════════════════════════════════════════════ */

/* shared part-page hero variants (replaces .coming-hero) */
.part-hero { max-width: 1240px; margin: 0 auto; padding: 140px 56px 80px; }
.part-tag { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--amber); margin-bottom: 40px; display: inline-flex; align-items: center; gap: 14px; }
.part-tag::before { content: ''; width: 36px; height: 1px; background: var(--amber); }
.part-h1 { font-family: 'Domaine'; font-weight: 600; font-size: clamp(56px, 8vw, 132px); line-height: 0.98; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; max-width: 1100px; }
.part-h1 .num { color: var(--amber); font-weight: 300; font-style: italic; padding-right: 0.18em; }
.part-h1 em { font-style: italic; color: var(--amber); font-weight: 400; }
.part-dek { font-family: 'Montreal'; font-weight: 400; font-style: italic; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-2); margin-top: 40px; max-width: 880px; }
.part-byline { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); margin-top: 56px; }
.part-byline strong { color: var(--ink); font-weight: 400; }

/* Part 02 · three-signals card grid */
.signals-wrap { max-width: 1100px; margin: 80px auto; padding: 0 56px; }
.signals-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.signals-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.signals-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 48px; max-width: 800px; text-wrap: balance; }
.signals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.signals-cell { background: var(--paper); padding: 40px 32px; min-height: 260px; display: grid; grid-template-rows: auto 1fr auto; gap: 20px; position: relative; overflow: hidden; }
.signals-cell::after {
  content: ''; position: absolute; left: 32px; right: 32px; bottom: 24px;
  height: 3px;
  background: linear-gradient(to right, var(--amber) 0%, var(--amber) var(--sig-progress, 25%), var(--paper-3) var(--sig-progress, 25%), var(--paper-3) 100%);
}
.signals-cell:nth-child(1) { --sig-progress: 90%; }
.signals-cell:nth-child(2) { --sig-progress: 60%; }
.signals-cell:nth-child(3) { --sig-progress: 30%; }
.signals-cell .sig-meter {
  font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-dim);
  margin-top: 8px;
}
.sig-num { font-family: 'Domaine'; font-weight: 600; font-style: italic; font-size: 56px; line-height: 1; color: var(--amber); margin-bottom: 28px; }
.sig-name { font-family: 'Montreal'; font-weight: 500; font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 16px; }
.sig-desc { font-family: 'Montreal'; font-weight: 400; font-size: 14px; line-height: 1.6; color: var(--ink-2); margin-top: auto; }

/* Part 02 · wave detail (4-wave winners/losers grid) */
.waves-wrap { max-width: 1240px; margin: 100px auto; padding: 0 56px; }
.waves-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.waves-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.waves-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 48px; max-width: 800px; text-wrap: balance; }
.waves-table { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.waves-row { display: grid; grid-template-columns: 80px 260px 1.3fr 1.3fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--paper-3); align-items: baseline; }
.waves-row:last-of-type { border-bottom: 0; }
.waves-row.active { background: rgba(212,137,15,0.04); margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
.wv-roman { font-family: 'Domaine'; font-weight: 600; font-style: italic; font-size: clamp(50px, 5vw, 60px); color: var(--ink-dim); letter-spacing: -0.025em; }
.waves-row.active .wv-roman { color: var(--amber); }
.wv-meta .name { font-family: 'Montreal'; font-weight: 500; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); display: block; margin-bottom: 6px; }
.waves-row.active .wv-meta .name { color: var(--amber); font-style: italic; font-weight: 300; }
.wv-meta .yrs { font-family: 'MontrealMono'; font-size: 12px; letter-spacing: 0.06em; color: var(--ink-dim); }
.wv-lab { font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px; }
.wv-names { font-family: 'Montreal'; font-weight: 400; font-size: 16px; color: var(--ink); line-height: 1.5; }
.wv-names.dim { color: var(--ink-dim); }
.wv-names em { font-style: italic; font-weight: 300; }
.waves-row.active .wv-names.amber { color: var(--amber); }

/* Part 02 · wave pace comparison (II vs IV) */
.pace-wrap { max-width: 880px; margin: 80px auto; padding: 0 56px; }
.pace-row { display: grid; grid-template-columns: 100px 1fr 100px; gap: 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--paper-3); }
.pace-row:first-of-type { border-top: 1px solid var(--rule); }
.pace-row:last-of-type { border-bottom: 1px solid var(--rule); }
.pace-wave { font-family: 'Montreal'; font-weight: 500; font-size: 22px; color: var(--ink); letter-spacing: -0.01em; }
.pace-row.amber .pace-wave { color: var(--amber); }
.pace-track { height: 14px; background: var(--paper-3); position: relative; overflow: hidden; }
.pace-fill { position: absolute; top: 0; left: 0; bottom: 0; background: var(--ink-2); width: 0%; transition: width 1.1s cubic-bezier(0.22,1,0.36,1); }
.pace-fill.amber { background: var(--amber); }
.pace-val { font-family: 'Montreal'; font-weight: 500; font-size: 20px; color: var(--ink-dim); text-align: right; letter-spacing: -0.01em; }
.pace-row.amber .pace-val { color: var(--amber); }

/* Part 03 · vault hero — $5.2T sealed */
.vault-wrap { max-width: 1240px; margin: 64px auto 80px; padding: 0 56px; }
.vault-frame { background: var(--paper-2); border: 1px solid var(--rule); padding: 56px 48px; text-align: center; position: relative; overflow: hidden; }
.vault-frame::before, .vault-frame::after { content: ''; position: absolute; left: 32px; right: 32px; height: 1px; background: rgba(212,137,15,0.45); }
.vault-frame::before { top: 18px; }
.vault-frame::after { bottom: 18px; }
.vault-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--amber); margin-bottom: 40px; }
.vault-val { font-family: 'Domaine'; font-weight: 600; font-size: clamp(120px, 18vw, 240px); line-height: 0.95; letter-spacing: -0.04em; color: var(--amber); font-style: italic; }
.vault-lab { font-family: 'Montreal'; font-weight: 400; font-style: italic; font-size: clamp(19px, 2.1vw, 23px); color: var(--ink-2); margin-top: 16px; letter-spacing: -0.01em; }
.vault-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--rule); max-width: 720px; margin-left: auto; margin-right: auto; }
.vault-stat .lab { font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px; }
.vault-stat .val { font-family: 'Montreal'; font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); color: var(--ink); letter-spacing: -0.01em; }

/* Part 03 · IPO timeline */
.timeline-wrap { max-width: 1100px; margin: 100px auto; padding: 0 56px; }
.timeline-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.timeline-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.timeline-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 48px; max-width: 800px; text-wrap: balance; }
.timeline-track { position: relative; padding: 48px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.timeline-axis { height: 1px; background: var(--rule); position: relative; margin: 32px 0; }
.timeline-mark { position: absolute; top: -10px; width: 1px; height: 20px; background: var(--ink-dim); }
.timeline-mark.amber { background: var(--amber); }
.timeline-mark span { position: absolute; top: -32px; left: 50%; transform: translateX(-50%); font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-dim); white-space: nowrap; }
.timeline-mark.amber span { color: var(--amber); }
.timeline-mark span.below { top: auto; bottom: -32px; }
.timeline-label { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px; }

/* Part 04 · watchlist hero — typeset 8-firm marquee */
.watchlist-hero { max-width: 1240px; margin: 0 auto; padding: 80px 56px 60px; border-bottom: 1px solid var(--rule); }
.watchlist-rows { display: flex; flex-direction: column; gap: 4px; padding: 32px 0 0; }
.watchlist-rec-row { display: grid; grid-template-columns: 60px 1fr 220px 140px; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--paper-3); align-items: baseline; }
.watchlist-rec-row:last-of-type { border-bottom: 1px solid var(--rule); }
.watchlist-rec-row.struck { opacity: 0.55; }
.wlr-num { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em; color: var(--ink-dim); }
.watchlist-rec-row.struck .wlr-num { color: var(--amber); }
.wlr-name { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 56px); letter-spacing: -0.022em; color: var(--ink); position: relative; }
.watchlist-rec-row.struck .wlr-name { color: var(--ink-dim); }
.watchlist-rec-row.struck .wlr-name::after { content: ''; position: absolute; left: 0; right: 0; top: 52%; height: 2px; background: var(--amber); }
.wlr-cat { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.14em; color: var(--ink-dim); text-transform: uppercase; }
.wlr-status { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); text-align: right; }
.watchlist-rec-row.struck .wlr-status { color: var(--amber); }

/* Part 04 · LBO mechanic explainer (3-step flow) */
.mech-wrap { max-width: 1100px; margin: 100px auto; padding: 0 56px; }
.mech-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.mech-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.mech-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 48px; max-width: 800px; text-wrap: balance; }
.mech-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 24px; align-items: stretch; }
.mech-step { background: var(--paper-2); border: 1px solid var(--rule); padding: 32px 28px; display: flex; flex-direction: column; }
.mech-step-num { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; }
.mech-step-h { font-family: 'Montreal'; font-weight: 500; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 12px; }
.mech-step-d { font-family: 'Montreal'; font-weight: 400; font-size: 14px; line-height: 1.55; color: var(--ink-2); margin-top: auto; }
.mech-arr { align-self: center; font-family: 'Montreal'; font-weight: 500; font-size: 36px; color: var(--amber); }

/* Part 05 · scale-asymmetry hero (giant comparison) */
.scale-asym-wrap { max-width: 1240px; margin: 60px auto 80px; padding: 0 56px; }
.scale-asym-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; padding: 56px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sa-col { display: flex; flex-direction: column; padding: 36px 32px; background: var(--paper-2); border: 1px solid var(--rule); }
.sa-col.amber { background: rgba(212,137,15,0.05); border-color: rgba(212,137,15,0.4); }
.sa-lab { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 16px; }
.sa-col.amber .sa-lab { color: var(--amber); }
.sa-val { font-family: 'Domaine'; font-weight: 600; font-size: clamp(72px, 10vw, 128px); line-height: 0.95; letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; }
.sa-col.amber .sa-val { color: var(--amber); font-style: italic; font-weight: 400; }
.sa-desc { font-family: 'Montreal'; font-weight: 400; font-style: italic; font-size: 17px; color: var(--ink-2); margin-top: 16px; line-height: 1.5; letter-spacing: -0.005em; }
.sa-meta { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-dim); margin-top: auto; padding-top: 24px; line-height: 1.7; }
.sa-conclusion { text-align: center; margin-top: 32px; }
.sa-conclusion-val { font-family: 'Domaine'; font-weight: 600; font-style: italic; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; color: var(--amber); letter-spacing: -0.022em; text-wrap: balance; }
.sa-conclusion-lab { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-top: 10px; }

/* Part 05 · services firms grid */
.firms-wrap { max-width: 1100px; margin: 80px auto; padding: 0 56px; }
.firms-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.firms-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.firms-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 48px; max-width: 800px; text-wrap: balance; }
.firms-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.firm-cell { background: var(--paper); padding: 32px 20px; text-align: center; }
.firm-name { font-family: 'Montreal'; font-weight: 500; font-size: clamp(18px, 2vw, 22px); letter-spacing: -0.01em; color: var(--ink); }
.firms-foot { font-family: 'Montreal'; font-weight: 300; font-size: 14px; color: var(--ink-dim); margin-top: 24px; text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; line-height: 1.6; }

/* shared methodology mini-block (used on all preview parts) */
.mini-method { max-width: 920px; margin: 100px auto; padding: 0 56px; }

/* ══════════════════════════════════════════════════
   TRILOGY-GRADE HERO MEGA (Parts 02-05)
   Pattern lifted from /intel/50-years/part-1.html
   ══════════════════════════════════════════════════ */
.mega-hero {
  padding: 72px 56px 64px;
  max-width: 1440px; margin: 0 auto;
  position: relative;
}
.mega-meta-top {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-dim);
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px;
}
.mega-meta-top .dot { color: var(--rule); }
.mega-meta-top .accent { color: var(--amber); }
.mega-wrap {
  display: grid; grid-template-columns: minmax(auto, 1fr) minmax(240px, 380px);
  gap: 48px; align-items: end;
}
.mega-label {
  grid-column: 1 / -1; grid-row: 1;
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 8px;
}
.mega-num {
  grid-column: 1; grid-row: 2;
  font-family: 'Domaine'; font-weight: 600;
  font-size: clamp(120px, 15vw, 220px);
  line-height: 0.86; letter-spacing: -0.045em;
  color: var(--ink); margin: 0;
  white-space: nowrap;
}
/* Range values (Part 05) — narrower size so $5–50T fits on one line */
.mega-num.range { font-size: clamp(88px, 11vw, 168px); letter-spacing: -0.04em; }
.mega-num em { color: var(--amber); font-style: italic; font-weight: 400; }
.mega-num .unit {
  font-style: normal; font-size: 0.45em; font-weight: 400;
  color: var(--amber); margin-left: 0.04em; letter-spacing: -0.02em;
  vertical-align: 0.4em;
}
.mega-sub {
  grid-column: 2; grid-row: 2;
  font-family: 'Domaine'; font-weight: 600;
  font-size: clamp(50px, 5vw, 64px);
  line-height: 1.05; color: var(--ink);
  padding-bottom: 18px;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.mega-sub em { color: var(--amber); font-style: italic; }
.mega-sub span.n { display: block; }
.mega-dek {
  margin-top: 32px;
  font-family: 'Montreal'; font-weight: 400;
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.55; color: var(--ink-2);
  max-width: 70ch; letter-spacing: -0.005em;
}
.mega-dek em { color: var(--amber); font-style: italic; }
.mega-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 36px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.mega-stat-label {
  font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 14px;
}
.mega-stat-num {
  font-family: 'Domaine'; font-weight: 600;
  font-size: clamp(36px, 3.6vw, 48px);
  line-height: 1; color: var(--ink); letter-spacing: -0.02em;
}
.mega-stat-num em {
  font-style: normal; font-size: 0.52em; font-weight: 400;
  color: var(--ink-dim); margin-left: 2px; letter-spacing: 0;
}
.mega-stat-num.amber { color: var(--amber); }
.mega-stat-sub {
  margin-top: 12px; font-family: 'Montreal'; font-size: 14px; line-height: 1.5;
  color: var(--ink-dim); max-width: 26ch; letter-spacing: -0.005em;
}
.mega-byline {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-dim); margin-top: 24px;
}
.mega-byline strong { color: var(--ink); font-weight: 400; }

/* Roman-numeral section marker (lifted from trilogy register-section) */
.roman-section {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 88px 0 24px;
  margin: 88px 0 0;
}
.roman-head {
  max-width: 1240px; margin: 0 auto 56px;
  padding: 0 56px;
  display: grid; grid-template-columns: 140px 1fr; gap: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--paper-3);
}
.roman-num {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--amber);
  padding-top: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.roman-num .roman { color: var(--ink); font-family: 'Domaine'; font-weight: 600; font-style: italic; font-size: 56px; letter-spacing: -0.025em; line-height: 0.9; }
.roman-title {
  font-family: 'Domaine'; font-weight: 600;
  font-size: clamp(50px, 5vw, 64px);
  line-height: 1.05; letter-spacing: -0.022em; color: var(--ink);
  max-width: 22ch;
}
.roman-title em { font-style: italic; color: var(--amber); }
.roman-dek {
  font-family: 'Montreal'; font-weight: 400; font-size: 17px; color: var(--ink-2);
  max-width: 58ch; margin-top: 20px; line-height: 1.6; letter-spacing: -0.005em;
}

@media (max-width: 720px) {
  .mega-hero { padding: 88px 24px 56px; }
  .mega-wrap { grid-template-columns: 1fr; gap: 24px; }
  .mega-num { font-size: clamp(120px, 30vw, 200px); }
  .mega-sub { padding-bottom: 0; }
  .mega-meta-top { margin-bottom: 48px; }
  .mega-stats { grid-template-columns: 1fr 1fr; gap: 32px; padding-top: 32px; margin-top: 56px; }
  .mega-stat-num { font-size: 44px; }
  .roman-head { grid-template-columns: 1fr; gap: 16px; padding: 0 24px 32px; }
  .roman-num .roman { font-size: 36px; }
}

/* ══════════════════════════════════════════════════
   OWNERSHIP EXPLORER (Part 03)
   ══════════════════════════════════════════════════ */
.exp-own { font-family: 'Montreal'; font-weight: 500; font-size: 17px; color: var(--ink); margin-top: 12px; letter-spacing: -0.01em; line-height: 1.35; }
.exp-own-sub { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.08em; color: var(--ink-dim); margin-top: 8px; }

/* ══════════════════════════════════════════════════
   WATCHLIST DRILL-DOWN (Part 04)
   ══════════════════════════════════════════════════ */
.drill-wrap { max-width: 1240px; margin: 100px auto; padding: 0 56px; }
.drill-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.drill-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.drill-h { font-family: 'Montreal'; font-weight: 500; font-size: clamp(28px, 3vw, 36px); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 32px; max-width: 800px; text-wrap: balance; }
.drill-frame { background: var(--paper-2); border: 1px solid var(--rule); }
.drill-rows { display: flex; flex-direction: column; }
.drill-row {
  display: grid; grid-template-columns: 48px 1fr 200px 120px;
  gap: 24px; padding: 22px 32px; align-items: center;
  border-bottom: 1px solid var(--rule); cursor: pointer;
  background: var(--paper); transition: background 0.2s;
  position: relative;
}
.drill-row:hover { background: var(--paper-2); }
.drill-row:last-child { border-bottom: 0; }
.drill-row.open { background: rgba(212,137,15,0.04); }
.dr-num { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em; color: var(--ink-dim); }
.drill-row.open .dr-num { color: var(--amber); }
.dr-name { font-family: 'Montreal'; font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.01em; color: var(--ink); position: relative; }
.drill-row.struck .dr-name { color: var(--ink-dim); }
.drill-row.struck .dr-name::after { content: ''; position: absolute; left: 0; right: 0; top: 52%; height: 2px; background: var(--amber); }
.dr-cat { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.14em; color: var(--ink-dim); text-transform: uppercase; }
.dr-status { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); text-align: right; }
.drill-row.struck .dr-status { color: var(--amber); }
.dr-toggle { font-family: 'Montreal'; font-weight: 500; font-size: 18px; color: var(--amber); text-align: right; transition: transform 0.2s; }
.drill-row.open .dr-toggle { transform: rotate(45deg); }
.drill-details {
  grid-column: 1 / -1;
  padding: 24px 0 0; margin-top: 16px;
  border-top: 1px solid var(--paper-3);
  display: none;
}
.drill-row.open .drill-details { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.dr-stat-lab { font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 6px; }
.dr-stat-val { font-family: 'Montreal'; font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.01em; color: var(--ink); }
.dr-stat-val.amber { color: var(--amber); }
.drill-row.struck .drill-details .dr-stat-val { color: var(--amber); }

/* ══════════════════════════════════════════════════
   SUBSTITUTION SLIDER (Part 05)
   ══════════════════════════════════════════════════ */
.subst-wrap { max-width: 1240px; margin: 100px auto; padding: 0 56px; }
.subst-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.subst-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.subst-h { font-family: 'Montreal'; font-weight: 500; font-size: clamp(28px, 3vw, 36px); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 32px; max-width: 800px; text-wrap: balance; }
.subst-frame { background: var(--paper-2); border: 1px solid var(--rule); padding: 48px; }
.subst-display { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; align-items: end; margin-bottom: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--rule); }
.subst-col { text-align: center; }
.subst-col-lab { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 16px; }
.subst-col-bar { width: 100%; background: var(--paper-3); position: relative; margin: 0 auto 20px; overflow: hidden; }
.subst-col-bar.tall { height: 220px; }
.subst-col-fill { position: absolute; bottom: 0; left: 0; right: 0; height: 0%; transition: height 0.3s cubic-bezier(0.22,1,0.36,1); }
.subst-col-fill.muted { background: var(--ink-ghost); }
.subst-col-fill.amber { background: var(--amber); }
.subst-col-val { font-family: 'Montreal'; font-weight: 500; font-size: clamp(28px, 3vw, 36px); letter-spacing: -0.015em; color: var(--ink); font-variant-numeric: tabular-nums; }
.subst-col-val.amber { color: var(--amber); }
.subst-col-mid { font-family: 'Montreal'; font-weight: 500; font-style: italic; font-size: clamp(28px, 3vw, 36px); color: var(--amber); letter-spacing: -0.015em; }
.subst-control {
  margin-top: 32px;
}
.subst-control-label {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 18px;
}
.subst-control-lab { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); }
.subst-control-val { font-family: 'Montreal'; font-weight: 500; font-style: italic; font-size: 28px; color: var(--amber); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.subst-slider-wrap { position: relative; height: 24px; padding: 8px 0; }
.subst-slider-track {
  position: absolute; top: 50%; left: 0; right: 0; height: 6px;
  background: var(--paper-3); transform: translateY(-50%);
}
.subst-slider-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--amber);
  width: 50%;
}
.subst-slider {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 24px; margin: 0; padding: 0;
  background: transparent; appearance: none; -webkit-appearance: none;
  cursor: ew-resize;
}
.subst-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 24px; background: var(--ink); border: 0; border-radius: 0;
  cursor: ew-resize;
}
.subst-slider::-moz-range-thumb {
  width: 16px; height: 24px; background: var(--ink); border: 0; border-radius: 0;
  cursor: ew-resize;
}
.subst-slider-axis {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.12em;
  color: var(--ink-dim);
}

@media (max-width: 880px) {
  .drill-wrap, .subst-wrap { padding-left: 24px; padding-right: 24px; }
  .drill-row { grid-template-columns: 40px 1fr 80px; gap: 12px; padding: 18px 20px; }
  .drill-row > div:nth-child(3) { display: none; }
  .drill-row.open .drill-details { grid-template-columns: 1fr 1fr; }
  .subst-frame { padding: 24px; }
  .subst-display { grid-template-columns: 1fr; gap: 24px; }
}

/* ══════════════════════════════════════════════════
   COHORT GROWTH LINE CHART
   ══════════════════════════════════════════════════ */
.growth-wrap { max-width: 1240px; margin: 100px auto; padding: 0 56px; }
.growth-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.growth-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.growth-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 48px; max-width: 800px; text-wrap: balance; }
.growth-frame { background: var(--paper-2); border: 1px solid var(--rule); padding: 32px; position: relative; }
#growthChart { display: block; width: 100%; height: 420px; }
.growth-legend {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.growth-legend-item { display: flex; flex-direction: column; gap: 6px; }
.growth-legend-line { display: flex; align-items: center; gap: 10px; font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
.growth-legend-swatch { width: 24px; height: 2px; background: var(--ink-dim); }
.growth-legend-item.amber .growth-legend-swatch { background: var(--amber); height: 3px; }
.growth-legend-item.amber .growth-legend-line { color: var(--amber); }
.growth-legend-stat { font-family: 'Montreal'; font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.growth-legend-item.amber .growth-legend-stat { color: var(--amber); }
.growth-legend-name { font-family: 'Montreal'; font-weight: 400; font-size: 12px; line-height: 1.4; color: var(--ink-dim); }

@media (max-width: 880px) {
  .growth-wrap { padding-left: 24px; padding-right: 24px; }
  .growth-frame { padding: 20px; }
  .growth-legend { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ══════════════════════════════════════════════════
   INTERACTIVE EXPLORER (Part 02+ data scrubber)
   ══════════════════════════════════════════════════ */
.explorer-wrap { max-width: 1240px; margin: 120px auto; padding: 0 56px; }
.explorer-eye {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
}
.explorer-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.explorer-h {
  font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px);
  line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 48px;
  max-width: 800px; text-wrap: balance;
}
.explorer {
  background: var(--paper-2); border: 1px solid var(--rule);
}
.explorer-control {
  padding: 40px 48px 32px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.explorer-year-display {
  display: flex; align-items: baseline; gap: 24px;
  margin-bottom: 28px;
}
.explorer-year-lab {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-dim);
}
.explorer-year-val {
  font-family: 'Domaine'; font-weight: 600; font-style: italic;
  font-size: clamp(56px, 7vw, 96px); line-height: 0.95;
  letter-spacing: -0.035em; color: var(--amber);
}
.explorer-year-active-wave {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-dim);
  margin-left: auto;
}
.explorer-year-active-wave strong { color: var(--amber); font-family: 'Montreal'; font-weight: 500; text-transform: none; letter-spacing: -0.01em; font-size: 16px; display: block; margin-top: 4px; }
.explorer-scrubber {
  position: relative; height: 24px; padding: 8px 0;
}
.explorer-scrubber-track {
  position: absolute; top: 50%; left: 0; right: 0; height: 6px;
  background: var(--paper-3); transform: translateY(-50%);
}
.explorer-scrubber-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--amber);
  width: 100%;
}
.explorer-scrubber-input {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 24px; margin: 0; padding: 0;
  background: transparent; appearance: none; -webkit-appearance: none;
  cursor: ew-resize;
}
.explorer-scrubber-input::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 24px; background: var(--ink); border: 0;
  border-radius: 0; cursor: ew-resize;
}
.explorer-scrubber-input::-moz-range-thumb {
  width: 16px; height: 24px; background: var(--ink); border: 0;
  border-radius: 0; cursor: ew-resize;
}
.explorer-axis {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.12em;
  color: var(--ink-dim);
}
.explorer-waves {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule);
}
.exp-wave {
  background: var(--paper); padding: 36px 32px;
  display: flex; flex-direction: column; min-height: 280px;
  transition: background 0.3s;
}
.exp-wave.active { background: rgba(212,137,15,0.05); }
.exp-wave-roman {
  font-family: 'Domaine'; font-weight: 600; font-style: italic;
  font-size: clamp(50px, 5vw, 60px); color: var(--ink-dim);
  letter-spacing: -0.028em; line-height: 1;
}
.exp-wave.active .exp-wave-roman { color: var(--amber); }
.exp-wave-name {
  font-family: 'Montreal'; font-weight: 500; font-size: 17px;
  letter-spacing: -0.01em; color: var(--ink); margin-top: 12px;
  line-height: 1.35;
}
.exp-wave-yrs {
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-dim); margin-top: 8px;
}
.exp-wave-stat {
  margin-top: auto; padding-top: 32px;
}
.exp-wave-stat-lab {
  font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 4px;
}
.exp-wave-count {
  font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 64px);
  line-height: 1; letter-spacing: -0.028em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.exp-wave.active .exp-wave-count { color: var(--amber); }
.exp-wave-value {
  font-family: 'Montreal'; font-weight: 500; font-size: 18px;
  letter-spacing: -0.01em; color: var(--ink); margin-top: 14px;
  font-variant-numeric: tabular-nums;
}
.exp-wave.active .exp-wave-value { color: var(--amber); }
.explorer-footer {
  padding: 20px 48px;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.14em;
  color: var(--ink-dim); text-transform: uppercase;
}
.explorer-footer-hint { color: var(--amber); }

@media (max-width: 880px) {
  .explorer-wrap { padding-left: 24px; padding-right: 24px; }
  .explorer-control { padding: 28px 24px 24px; }
  .explorer-footer { padding: 16px 24px; }
  .explorer-year-display { flex-direction: column; gap: 12px; }
  .explorer-year-active-wave { margin-left: 0; }
  .explorer-waves { grid-template-columns: 1fr 1fr; }
  .exp-wave { padding: 24px 20px; min-height: 220px; }
}

/* ══════════════════════════════════════════════════
   ENRICHMENT VISUALS (Parts 02-05 round 2)
   ══════════════════════════════════════════════════ */

/* Part 02 · Buyer-rung climb (6-rung ladder) */
.rungs-wrap { max-width: 920px; margin: 100px auto; padding: 0 56px; }
.rungs-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.rungs-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.rungs-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 48px; max-width: 800px; text-wrap: balance; }
.rungs-list { display: flex; flex-direction: column-reverse; gap: 0; position: relative; padding-left: 80px; }
.rungs-list::before {
  content: ''; position: absolute; left: 32px; top: 24px; bottom: 24px;
  width: 1px; background: rgba(212,137,15,0.4);
}
.rung-row { display: grid; grid-template-columns: 1fr 90px; gap: 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--paper-3); position: relative; }
.rung-row:last-of-type { border-bottom: 1px solid var(--rule); }
.rung-row::before {
  content: ''; position: absolute; left: -57px; top: 50%;
  width: 12px; height: 12px; background: var(--paper); border: 1px solid var(--ink-dim);
  transform: translateY(-50%) rotate(45deg);
}
.rung-row.amber::before { background: var(--amber); border-color: var(--amber); }
.rung-row.shift {
  background: rgba(212,137,15,0.04);
  margin: 8px -16px;
  padding-left: 16px; padding-right: 16px;
  border: 1px solid rgba(212,137,15,0.35);
}
.rung-row.shift::before { background: var(--amber); border-color: var(--amber); width: 16px; height: 16px; left: -59px; }
.rung-name { font-family: 'Montreal'; font-weight: 500; font-size: clamp(18px, 2.1vw, 22px); letter-spacing: -0.01em; color: var(--ink); }
.rung-row.dim .rung-name { color: var(--ink-dim); font-weight: 300; }
.rung-row.amber .rung-name { color: var(--amber); font-style: italic; font-weight: 300; }
.rung-era { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-dim); text-align: right; }
.rung-shift-label {
  position: absolute; left: -180px; top: 50%; transform: translateY(-50%);
  font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--amber); white-space: nowrap;
}

/* Part 02 · 4-wave compressed timeline ribbon */
.ribbon-wrap { max-width: 1100px; margin: 80px auto 100px; padding: 0 56px; }
.ribbon-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.ribbon-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.ribbon-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 56px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 48px; max-width: 760px; text-wrap: balance; }
.ribbon { position: relative; padding: 56px 0 32px; }
.ribbon-axis { position: relative; height: 1px; background: var(--rule); margin-bottom: 32px; }
.ribbon-year { position: absolute; top: -10px; transform: translateX(-50%); width: 1px; height: 20px; background: var(--ink-dim); }
.ribbon-year span { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-family: 'MontrealMono'; font-size: 11px; color: var(--ink-dim); letter-spacing: 0.08em; white-space: nowrap; }
.ribbon-waves { position: relative; height: 212px; }
.ribbon-bar {
  position: absolute; height: 10px;
  background: var(--paper-2); border-top: 2px solid var(--ink-dim);
}
.ribbon-bar.amber { background: rgba(212,137,15,0.14); border-top-color: var(--amber); }
.ribbon-bar-label {
  position: absolute;
  font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.12em;
  color: var(--ink-dim); text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 12px;
}
.ribbon-bar-label > span { white-space: nowrap; flex: 0 0 auto; }
.ribbon-bar-label.amber { color: var(--amber); }
.ribbon-bar-label .wave-num { font-family: 'Domaine'; font-weight: 600; font-style: italic; font-size: 18px; letter-spacing: -0.015em; text-transform: none; }
.ribbon-bar-label .yrs { font-family: 'MontrealMono'; font-size: 10px; opacity: 0.7; }

/* Part 03 · Tool-vendor vs Work-vendor metrics */
.metrics-wrap { max-width: 1100px; margin: 100px auto; padding: 0 56px; }
.metrics-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.metrics-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.metrics-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 48px; max-width: 800px; text-wrap: balance; }
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.metrics-col { padding: 32px; border: 1px solid var(--rule); background: var(--paper); }
.metrics-col.amber { background: rgba(212,137,15,0.04); border-color: rgba(212,137,15,0.4); }
.metrics-col-h { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 6px; }
.metrics-col.amber .metrics-col-h { color: var(--amber); }
.metrics-col-name { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 56px); letter-spacing: -0.022em; color: var(--ink); margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--paper-3); line-height: 1.05; }
.metrics-col.amber .metrics-col-name { color: var(--amber); font-style: italic; font-weight: 300; border-bottom-color: rgba(212,137,15,0.25); }
.metrics-list { display: flex; flex-direction: column; gap: 18px; }
.metrics-item { font-family: 'Montreal'; font-weight: 400; font-size: 17px; line-height: 1.6; color: var(--ink-2); padding-left: 22px; position: relative; }
.metrics-item::before { content: ''; position: absolute; left: 0; top: 11px; width: 12px; height: 1px; background: var(--ink-dim); }
.metrics-col.amber .metrics-item::before { background: var(--amber); }

/* Part 03 · 12 SaaS pure-plays grid */
.saas-grid-wrap { max-width: 1100px; margin: 100px auto; padding: 0 56px; }
.saas-grid-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.saas-grid-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.saas-grid-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 56px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 40px; max-width: 760px; text-wrap: balance; }
.saas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.saas-cell { background: var(--paper); padding: 28px 24px; text-align: center; }
.saas-name { font-family: 'Montreal'; font-weight: 500; font-size: clamp(18px, 2vw, 22px); letter-spacing: -0.01em; color: var(--ink); }
.saas-grid-foot { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.16em; color: var(--ink-dim); margin-top: 24px; text-align: right; text-transform: uppercase; }
.saas-grid-foot strong { color: var(--amber); font-family: 'Montreal'; font-size: 19px; letter-spacing: -0.01em; text-transform: none; font-weight: 500; }

/* Part 04 · Coupa repricing flow (3-step) */
.flow-wrap { max-width: 1100px; margin: 100px auto; padding: 0 56px; }
.flow-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.flow-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.flow-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 56px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 48px; max-width: 760px; text-wrap: balance; }
.flow-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 24px; align-items: stretch; }
.flow-step { padding: 36px 28px; border: 1px solid var(--rule); background: var(--paper); display: flex; flex-direction: column; min-height: 220px; }
.flow-step.amber { background: rgba(212,137,15,0.05); border-color: rgba(212,137,15,0.5); }
.flow-step.struck { opacity: 0.7; }
.flow-step-lab { font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 16px; }
.flow-step.amber .flow-step-lab { color: var(--amber); }
.flow-step-val { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5.5vw, 64px); line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.flow-step.amber .flow-step-val { color: var(--amber); }
.flow-step.struck .flow-step-val { text-decoration: line-through; text-decoration-color: var(--amber); text-decoration-thickness: 2px; }
.flow-step-desc { font-family: 'Montreal'; font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-top: auto; padding-top: 20px; }
.flow-arrow { align-self: center; font-family: 'Montreal'; font-weight: 500; font-size: 32px; color: var(--amber); }
.flow-conclusion { margin-top: 32px; text-align: center; font-family: 'Montreal'; font-weight: 500; font-style: italic; font-size: clamp(20px, 2.4vw, 30px); color: var(--amber); letter-spacing: -0.015em; }

/* Part 04 · Switching-cost pivot */
.pivot-wrap { max-width: 1100px; margin: 100px auto; padding: 0 56px; }
.pivot-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.pivot-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.pivot-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 56px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 48px; max-width: 800px; text-wrap: balance; }
.pivot-grid { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 24px; align-items: stretch; }
.pivot-col { padding: 36px 32px; border: 1px solid var(--rule); background: var(--paper-2); display: flex; flex-direction: column; }
.pivot-col.amber { background: rgba(212,137,15,0.04); border-color: rgba(212,137,15,0.45); }
.pivot-lab { font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 12px; }
.pivot-col.amber .pivot-lab { color: var(--amber); }
.pivot-buyer { font-family: 'Montreal'; font-weight: 500; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.01em; color: var(--ink); margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--paper-3); }
.pivot-col.amber .pivot-buyer { color: var(--amber); font-style: italic; font-weight: 300; border-bottom-color: rgba(212,137,15,0.25); }
.pivot-cost-lab { font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px; }
.pivot-cost-val { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 56px); letter-spacing: -0.022em; color: var(--ink); }
.pivot-col.amber .pivot-cost-val { color: var(--amber); }
.pivot-note { font-family: 'Montreal'; font-weight: 300; font-size: 14px; line-height: 1.55; color: var(--ink-2); margin-top: auto; padding-top: 24px; }
.pivot-pivot { align-self: center; font-family: 'Montreal'; font-weight: 500; font-style: italic; font-size: 28px; color: var(--amber); text-align: center; letter-spacing: -0.022em; }
.pivot-pivot span { display: block; font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.22em; color: var(--amber); text-transform: uppercase; margin-top: 6px; font-style: normal; }

/* Part 05 · 10× multipliers */
.mults-wrap { max-width: 1100px; margin: 100px auto; padding: 0 56px; }
.mults-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.mults-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.mults-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 60px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 48px; max-width: 800px; text-wrap: balance; }
.mults-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.mult-cell { background: var(--paper); padding: 56px 40px; text-align: center; }
.mult-val { font-family: 'Domaine'; font-weight: 600; font-style: italic; font-size: clamp(80px, 10vw, 144px); line-height: 1; letter-spacing: -0.04em; color: var(--amber); }
.mult-lab { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-top: 20px; }

/* Part 05 · Services categories tile list */
.servcats-wrap { max-width: 1100px; margin: 100px auto; padding: 0 56px; }
.servcats-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.servcats-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); }
.servcats-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(50px, 5vw, 56px); line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 40px; max-width: 760px; text-wrap: balance; }
.servcats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.servcat-cell { background: var(--paper); padding: 24px 20px; text-align: center; font-family: 'Montreal'; font-weight: 500; font-size: clamp(15px, 1.6vw, 18px); letter-spacing: -0.01em; color: var(--ink); }
/* 11 categories in 4 cols → 2 full rows + 3 items. Last row's third cell
   stretches to fill the trailing slot, eliminating the visual orphan. */
.servcats-grid .servcat-cell:last-child { grid-column: span 2; }

/* responsive */
@media (max-width: 880px) {
  .rungs-wrap, .ribbon-wrap, .metrics-wrap, .saas-grid-wrap, .flow-wrap, .pivot-wrap, .mults-wrap, .servcats-wrap { padding-left: 24px; padding-right: 24px; }
  .metrics-grid { grid-template-columns: 1fr; }
  .saas-grid { grid-template-columns: repeat(2, 1fr); }
  .flow-steps { grid-template-columns: 1fr; gap: 16px; }
  .flow-arrow { transform: rotate(90deg); }
  .pivot-grid { grid-template-columns: 1fr; gap: 16px; }
  .pivot-pivot { transform: rotate(90deg); }
  .mults-grid { grid-template-columns: 1fr; }
  .servcats-grid { grid-template-columns: repeat(2, 1fr); }
  .rung-shift-label { display: none; }
  .ribbon-waves { height: 200px; }
  .ribbon-bar { height: 8px; }
  .ribbon-bar-label { font-size: 9px; gap: 8px; }
  .ribbon-bar-label .wave-num { font-size: 14px; }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */
@media (max-width: 880px) {
  nav { padding: 0 24px; height: 52px; }
  section.editorial, .quadrant-wrap, .ladder-wrap, .cohort-rows, .asym-wrap, .jv-wrap, .method-wrap, .dotfield-wrap, .faq-wrap, .closing-wrap, .pagination, .cta-row, .hub-hero, .series-rail, .hub-register, .p00-hero, .coming-hero, .coming-preview, .coming-notify { padding-left: 24px; padding-right: 24px; }
  .masthead { padding: 96px 0 56px; margin-bottom: 64px; }
  .quadrant { grid-template-columns: 1fr; }
  .q-cell { padding: 40px 28px; min-height: 180px; }
  .ladder-row { grid-template-columns: 120px 1fr 90px; }
  .lr-win { display: none; }
  .cohort-row { grid-template-columns: 1.4fr 1fr; gap: 12px; }
  .cohort-row > div:nth-child(3), .cohort-row > div:nth-child(4) { display: none; }
  .asym-grid { grid-template-columns: 1fr; gap: 32px; }
  .asym-bar.sm { margin-top: 0; }
  .jv-row { grid-template-columns: 1fr; gap: 24px; }
  .jv-connect { min-height: 30px; }
  .method-row { grid-template-columns: 1fr; gap: 8px; }
  .edit-table .et-row, .edit-table.cols-5 .et-row { grid-template-columns: 1fr; gap: 8px; }
  .edit-table .et-head { display: none; }
  .cta-row { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .hero-wrap { height: 320vh; }
  .hero-years { left: 24px; right: 24px; font-size: 9px; }
  .interstitial { padding: 100px 24px; margin: 64px 0; }
  .series-card { grid-template-columns: 60px 1fr; }
  .series-card .sc-stat { display: none; }
  .hub-register-frame { grid-template-columns: 1fr; gap: 0; padding: 32px 32px 0; }
  .hub-reg-stats { margin: 32px -32px 0; }
  .preview-wave { grid-template-columns: 40px 1fr 90px; gap: 16px; }
  .preview-wave .pw-years { display: none; }
  .ps-row { grid-template-columns: 120px 1fr 90px; gap: 16px; }
  .ps-name { font-size: 18px; }
  .preview-watchlist { grid-template-columns: 1fr; }
  .preview-asym { grid-template-columns: 1fr; gap: 32px; }
  .pa-bar.sm { margin-top: 0; }
  .part-hero, .signals-wrap, .waves-wrap, .pace-wrap, .vault-wrap, .timeline-wrap, .watchlist-hero, .mech-wrap, .scale-asym-wrap, .firms-wrap, .mini-method { padding-left: 24px; padding-right: 24px; }
  .signals-grid { grid-template-columns: 1fr; }
  .waves-row { grid-template-columns: 60px 1fr; }
  .waves-row > div:nth-child(3), .waves-row > div:nth-child(4) { grid-column: 1 / -1; padding-left: 60px; }
  .vault-stats { grid-template-columns: 1fr; gap: 24px; }
  .watchlist-rec-row { grid-template-columns: 40px 1fr; gap: 12px; }
  .watchlist-rec-row > div:nth-child(3), .watchlist-rec-row > div:nth-child(4) { grid-column: 1 / -1; padding-left: 52px; text-align: left; }
  .mech-steps { grid-template-columns: 1fr; gap: 16px; }
  .mech-arr { transform: rotate(90deg); }
  .scale-asym-grid { grid-template-columns: 1fr; gap: 24px; }
  .firms-list { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════
   DOMAINE-FREQUENCY REDUCTION — global overrides
   ══════════════════════════════════════════════════
   This block must remain at the END of the file so it wins
   the cascade against the base rules above (same specificity).
   Pattern: Domaine reserved for ~5 protected moments per page;
   everything else uses Montreal Medium at smaller display sizes.
   Lifted from the Part 03 trial (signed off Q2 2026).

   Domaine RETAINED on: .masthead-h1, .part-h1, .hub-h1, .p00-display,
   .coming-h1, .mega-num, .vault-val, .callout-val, .explorer-year-val,
   .inter-h, .b2-hl, .b3-hl, .b4-hl, .q-val, .mult-val, .sa-val,
   .prose .one-line, .hero-mega
   ══════════════════════════════════════════════════ */

.section-h2 { font-family: 'Montreal'; font-weight: 500; font-size: clamp(28px, 3vw, 36px); letter-spacing: -0.015em; line-height: 1.2; }
.mega-sub { font-family: 'Montreal'; font-weight: 500; font-size: clamp(28px, 3vw, 36px); letter-spacing: -0.015em; line-height: 1.2; }
.mega-sub em { font-family: 'Montreal'; font-style: italic; font-weight: 500; }
.mega-stat-num { font-family: 'Montreal'; font-weight: 500; font-size: clamp(32px, 3.4vw, 40px); letter-spacing: -0.015em; }
.mega-stat-num em { font-size: 0.55em; }

.ladder-h, .cohort-h, .asym-h, .jv-h, .method-h, .faq-h,
.signals-h, .waves-h, .timeline-h, .ribbon-h, .rungs-h,
.growth-h, .workflow-h, .scale-h, .labs-h,
.metrics-h, .saas-grid-h, .flow-h, .pivot-h,
.mults-h, .servcats-h, .firms-h, .mech-h,
.drill-h, .subst-h, .explorer-h,
.hub-reg-h, .series-rail-h, .coming-preview-h {
  font-family: 'Montreal'; font-weight: 500; font-size: clamp(28px, 3vw, 36px); letter-spacing: -0.015em; line-height: 1.2;
}

.cr-name, .scale-name, .wlr-name, .pwl-name,
.pa-val, .flow-step-val, .metrics-col-name, .pivot-buyer,
.jv-left, .exp-wave-roman, .exp-wave-count,
.hub-rs-val, .coming-stat-cell .val, .sc-title,
.lr-val.amber, .asym-mid, .asym-val,
.wv-roman, .sig-num, .sa-conclusion-val, .mech-arr,
.firm-name, .saas-name {
  font-family: 'Montreal'; font-weight: 500;
}

.cr-name { font-size: clamp(28px, 3vw, 36px); letter-spacing: -0.018em; font-style: normal; }
.scale-name { font-size: clamp(26px, 2.8vw, 32px); letter-spacing: -0.015em; font-style: normal; }
.wlr-name { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.012em; font-style: normal; }
.pwl-name { font-size: 19px; letter-spacing: -0.01em; font-style: normal; }
.pa-val { font-size: clamp(32px, 3.4vw, 40px); letter-spacing: -0.015em; font-style: normal; }
.flow-step-val { font-size: clamp(32px, 3.4vw, 44px); letter-spacing: -0.015em; font-style: normal; }
.metrics-col-name { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.012em; line-height: 1.15; font-style: normal; }
.pivot-buyer { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.012em; font-style: normal; }
.jv-left { font-size: clamp(22px, 2.4vw, 28px); font-style: italic; letter-spacing: -0.012em; }
.exp-wave-roman { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.01em; font-style: normal; }
.exp-wave-count { font-size: clamp(32px, 3.4vw, 40px); letter-spacing: -0.015em; font-style: normal; }
.hub-rs-val { font-size: clamp(28px, 3vw, 36px); letter-spacing: -0.015em; font-style: normal; }
.coming-stat-cell .val { font-size: clamp(32px, 3.4vw, 40px); letter-spacing: -0.015em; font-style: normal; }
.sc-title { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.012em; line-height: 1.2; font-style: normal; }
.lr-val.amber { font-size: 22px; font-style: italic; letter-spacing: -0.01em; color: var(--amber); }
.asym-mid { font-size: clamp(28px, 3vw, 36px); font-style: italic; letter-spacing: -0.015em; color: var(--amber); }
.asym-val { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.015em; font-style: normal; }
.asym-val.amber { color: var(--amber); }
.wv-roman { font-size: clamp(24px, 2.6vw, 32px); font-style: italic; letter-spacing: -0.018em; }
.sig-num { font-size: 32px; font-style: italic; letter-spacing: -0.015em; }
.sa-conclusion-val { font-size: clamp(24px, 2.6vw, 30px); font-style: italic; letter-spacing: -0.012em; color: var(--amber); }
.mech-arr { font-size: 28px; letter-spacing: 0; }
.firm-name { font-size: clamp(18px, 2vw, 22px); letter-spacing: -0.01em; font-style: normal; }
.saas-name { font-size: clamp(17px, 1.8vw, 21px); letter-spacing: -0.01em; font-style: normal; }

.quadrant-title { font-family: 'Montreal'; font-weight: 500; font-size: clamp(28px, 3vw, 36px); letter-spacing: -0.015em; line-height: 1.2; }
.quadrant-title em { font-family: 'Montreal'; font-style: italic; font-weight: 500; color: var(--ink-dim); }

/* ════════════════════════════════════════════════════════════════════════════
   Paul-MD port additions — Our-read paragraph block, cohort table emphasis,
   three-ways CTA spacing. Added 2026-05-19 with the Paul-MD body rebuild.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Our-read block: longer-form paragraph pullquote (Paul "Our read." rule) ── */
.pullquote.our-read {
  font-family: 'Montreal'; font-weight: 400; font-style: italic;
  font-size: 19px; line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 760px;
  padding: 28px 0 28px 36px;
  text-wrap: pretty;
}
.our-read-eye {
  font-family: 'MontrealMono'; font-style: normal; font-weight: 400;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 16px; display: block;
}
@media (max-width: 880px) {
  .pullquote.our-read { font-size: 17px; padding: 20px 0 20px 20px; }
}

/* ── Cohort table emphasis row (amber-row for the VC-private highlighted line) ── */
.edit-table.cohort-table .et-row.amber-row {
  background: rgba(212, 137, 15, 0.05);
  border-bottom-color: rgba(212, 137, 15, 0.25);
}
.edit-table.cohort-table .et-row.amber-row .et-cell strong { font-weight: 500; }
.edit-table.cohort-table .et-row.amber-row .et-cell.amber strong { color: var(--amber); }

/* Explicit 5-column grid so the inline `grid-column: span 2` cells (Part 03's
   "Who can buy it" col, Part 04's "PE cohort" col) land predictably. Without
   this, the default 4-col grid grows an implicit 5th track which is
   inconsistent across rows. */
.edit-table.cohort-table .et-row {
  grid-template-columns: 1.4fr 1.2fr 1.2fr 1fr 1.2fr;
}
.edit-table.cohort-table .et-head .et-cell { white-space: nowrap; }
.edit-table.cohort-table .et-cell { line-height: 1.55; }
.edit-table.cohort-table .et-row > .et-cell:first-child.mono { letter-spacing: 0.05em; }

/* ── Three-ways CTA grid (3-column on desktop, stacks on mobile) ── */
.cta-row.three-ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 80px auto 40px;
  padding: 0 32px;
}
@media (max-width: 880px) {
  .cta-row.three-ways {
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 56px 24px 32px;
    padding: 0;
  }
}

/* ── Watchlist drill-down: per-deal context paragraph (Part 04) ── */
.drill-details .drill-note {
  grid-column: 1 / -1;
  font-family: 'Montreal', system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  padding: 18px 0 4px;
  margin-top: 12px;
  border-top: 1px solid var(--paper-3);
  max-width: 78ch;
}
@media (max-width: 880px) {
  .drill-details .drill-note { font-size: 14px; padding-top: 14px; }
}

/* ── Methodology context paragraph (Part 01 — "We built it because…") ── */
.method-wrap .method-context {
  font-family: 'Montreal', system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 68ch;
  margin: 0 0 32px;
  letter-spacing: -0.003em;
}

/* ── amber-cell variant for methodology stat tiles (Part 02) ── */
.mult-cell.amber-cell .mult-val { color: var(--amber); }
.mult-cell.amber-cell .mult-lab { color: var(--amber); opacity: 0.85; }

/* ════════════════════════════════════════════════════════════════════════════
   FIGURE 01 · The same transaction, three pricing perspectives (Part 00)
   Pure CSS bar comparison · $2-5M / $5-15M / $25-50M ratios visible.
   ════════════════════════════════════════════════════════════════════════════ */

.perspectives-figure {
  max-width: 1080px;
  margin: 56px auto 32px;
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--rule);
  position: relative;
}
.perspectives-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 18px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--paper-3);
  font-family: 'MontrealMono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.perspectives-id { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.pf-num { color: var(--amber); font-weight: 500; }
.pf-title { color: var(--ink); }
.pf-sep { color: var(--paper-3); }
.perspectives-source { color: var(--ink-dim); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }

.perspectives-chart {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 8px 0 24px;
}
.pf-row {
  display: grid;
  grid-template-columns: 240px 1fr 110px 260px;
  gap: 24px;
  align-items: center;
}
.pf-label-eye {
  font-family: 'MontrealMono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 4px;
}
.pf-label-name {
  font-family: 'Montreal', system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.pf-bar-wrap {
  height: 56px;
  background: var(--paper-2);
  border: 1px solid var(--paper-3);
  position: relative;
}
.pf-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--bar-pct);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.pf-bar-saas { background: var(--ink); }
.pf-bar-ai { background: var(--amber); }
.pf-bar-labor { background: var(--amber-deep); }
/* Bar value lives in its OWN grid column (col 3 of pf-row) — always legible
   on paper background, never clipped by narrow bars. */
.pf-bar-val {
  font-family: 'Domaine', serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--ink);
  letter-spacing: -0.018em;
  white-space: nowrap;
  text-align: left;
}
.cb-val, .mega-stat-num, .vault-val, .cons-tease-val,
.sa-val, .ladder-cap, .mult-val, .pace-val, .sig-num,
.q-val, .callout-val, .firm-name, .mega-num,
.lr-val, .cr-num, .b3-hl, .b4-hl,
.exp-wave-count, .exp-wave-value,
.subst-col-val, .subst-col-mid,
.wlc-status-val, .wlc-meta-val,
.reg-name-line, .reg-c-val, .register-stat-val, .register-year-val, .register-counter-num {
  white-space: nowrap;
}
.pf-note {
  font-family: 'Montreal', system-ui, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-dim);
  letter-spacing: -0.003em;
}
.pf-note strong { color: var(--amber); font-weight: 500; }

.perspectives-foot {
  border-top: 1px solid var(--paper-3);
  padding-top: 18px;
  font-family: 'Montreal', system-ui, sans-serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 64ch;
  margin: 0 auto;
  text-align: center;
  letter-spacing: -0.003em;
}

@media (max-width: 880px) {
  .perspectives-figure { padding: 22px 18px; margin: 40px auto 24px; }
  .perspectives-head { font-size: 10px; gap: 12px; }
  .perspectives-chart { gap: 24px; }
  .pf-row { grid-template-columns: 1fr; gap: 10px; }
  .pf-label-name { font-size: 15px; }
  .pf-bar-wrap { height: 48px; }
  .pf-bar { padding-right: 12px; }
  .pf-bar-val { font-size: 22px; }
  .pf-note { font-size: 12px; }
  .perspectives-foot { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   FIGURE 03 · Capital structure cascade (Part 04)
   $1.14T → $903B → $66B → $46.9B → $5.1B · narrowing waterfall bands.
   ════════════════════════════════════════════════════════════════════════════ */

.cascade-figure {
  max-width: 1080px;
  margin: 72px auto 40px;
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.cascade-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 18px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--paper-3);
  font-family: 'MontrealMono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.cascade-id { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.cf-num { color: var(--amber); font-weight: 500; }
.cf-title { color: var(--ink); }
.cf-sep { color: var(--paper-3); }
.cascade-source { color: var(--ink-dim); }

.cascade-stack { display: flex; flex-direction: column; gap: 2px; align-items: stretch; }
.cascade-band {
  width: 100%;
  margin: 0 auto;
  padding: 14px 24px 14px 32px;
  background: var(--ink);
  color: #F3F3F6;
  border-left: 3px solid var(--amber);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 24px;
  align-items: center;
  transition: border-left-width 0.18s ease;
}
/* Proportional cascade indicator — bottom-edge amber bar shrinks band-by-band.
   Reads as a clean "this is X% of the band above" cue without cutting through
   the text content like a full-height fill would. */
.cascade-band::before {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: var(--w, 100%);
  background: var(--amber);
  pointer-events: none;
  z-index: 0;
  transition: width 0.6s cubic-bezier(0.22,1,0.36,1);
}
.cascade-band::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(212,137,15,0.18);
  pointer-events: none;
  z-index: 0;
}
.cascade-band > * { position: relative; z-index: 1; }
.cascade-band > .cb-eye { grid-column: 1; grid-row: 1; margin: 0; }
.cascade-band > .cb-row { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
.cascade-band > .cb-note { grid-column: 1; grid-row: 2; margin: 4px 0 0; }
.cascade-band:hover { border-left-width: 6px; padding-left: 29px; }
.cascade-band:hover .cb-val { color: var(--amber-hi); }
.cascade-band-1 { background: #0A0A10; }
.cascade-band-2 { background: #0D0F1E; }
.cascade-band-3 { background: #141628; }
.cascade-band-4 { background: #1C2038; }
.cascade-band-5 { background: #1C2038; }

.cb-eye {
  font-family: 'MontrealMono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243, 243, 246, 0.6);
  margin-bottom: 4px;
}
.cb-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.cb-val {
  font-family: 'Domaine', serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.022em;
  color: #F3F3F6;
  line-height: 1;
}
.cb-count {
  font-family: 'MontrealMono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(243, 243, 246, 0.7);
}
.cb-note {
  font-family: 'Montreal', system-ui, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(243, 243, 246, 0.65);
  letter-spacing: -0.003em;
  max-width: 64ch;
}

.cascade-arrow {
  text-align: center;
  font-family: 'MontrealMono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 3px 0;
  font-style: normal;
}

.cascade-foot {
  border-top: 1px solid var(--paper-3);
  padding-top: 22px;
  margin-top: 24px;
  font-family: 'Montreal', system-ui, sans-serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (max-width: 880px) {
  .cascade-figure { padding: 22px 18px; margin: 56px auto 28px; }
  .cascade-head { font-size: 10px; gap: 12px; }
  .cascade-band { padding: 14px 16px; }
  .cb-val { font-size: 28px; }
  .cb-note { font-size: 12px; }
  .cascade-arrow { font-size: 9px; padding: 6px 0; }
  .cascade-foot { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   FIGURE 02 · Vendor density across fifty-two years (Part 02)
   Dark editorial frame with five-year-bucket histogram + wave overlays.
   ════════════════════════════════════════════════════════════════════════════ */

.density-figure {
  max-width: 1200px;
  margin: 80px auto 32px;
  padding: 32px 32px 28px;
  background: #0D0F1E;
  color: #F3F3F6;
  border: 1px solid #1C2038;
  position: relative;
}
.density-figure-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 18px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(243, 243, 246, 0.08);
  font-family: 'MontrealMono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.density-figure-id { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.df-num { color: #F3F3F6; font-weight: 500; }
.df-title { color: rgba(243, 243, 246, 0.55); }
.df-sep { color: rgba(243, 243, 246, 0.25); }
.density-figure-source { color: rgba(243, 243, 246, 0.55); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }

.density-figure-chart-wrap {
  width: 100%;
  height: 280px;
  margin-bottom: 12px;
}
#densityChart { width: 100%; height: 100%; display: block; }

.density-figure-waves {
  position: relative;
  margin-top: 14px;
  padding: 16px 24px 8px;
  border-top: 1px solid rgba(243, 243, 246, 0.08);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(243, 243, 246, 0.08);
}
.df-wave {
  position: static !important;
  width: auto !important;
  left: auto !important;
  font-family: 'MontrealMono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(243, 243, 246, 0.55);
  padding: 10px 12px 6px;
  background: #0A0A10;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.df-wave .df-wave-roman { color: #F3F3F6; font-weight: 500; margin-right: 4px; }
.df-wave.amber { color: #F0A020; border-top-color: rgba(212, 137, 15, 0.55); }
.df-wave.amber .df-wave-roman { color: #F0A020; }

@media (max-width: 1080px) {
  .density-figure { padding: 24px 20px 20px; margin: 56px auto 24px; }
  .density-figure-chart-wrap { height: 240px; }
  .df-wave { font-size: 10px; padding-top: 8px; }
  .density-figure-waves { min-height: 80px; }
}
@media (max-width: 720px) {
  .density-figure { padding: 20px 16px 16px; }
  .density-figure-head { font-size: 10px; gap: 12px; }
  .density-figure-chart-wrap { height: 200px; }
  /* On narrow widths, stack wave labels instead of overlapping the bucket axis */
  .density-figure-waves { display: flex; flex-direction: column; gap: 4px; min-height: auto; }
  .df-wave { position: static; width: auto !important; left: auto !important; padding-top: 4px; border-top: 0; font-size: 10px; }
  .df-wave + .df-wave { border-top: 1px solid rgba(243,243,246,0.08); padding-top: 6px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   4-waves table vendor chips (Part 02)
   Each named winner/loser gets a small logo + name chip.
   ════════════════════════════════════════════════════════════════════════════ */

.wv-names {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.vendor-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-family: 'Montreal', system-ui, sans-serif;
}
.vc-logo {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1px solid var(--rule);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.vc-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
.vc-logo-fb {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-family: 'Domaine', serif;
  font-weight: 600;
  font-size: 11px;
  color: var(--ink);
  background: var(--paper-2);
}
.vc-name {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: inherit;
}
.wv-names.dim .vc-name { color: var(--ink-dim); font-weight: 400; }
.wv-names.amber .vc-name { color: var(--amber); }

@media (max-width: 880px) {
  .wv-names { gap: 6px 12px; }
  .vc-logo { width: 16px; height: 16px; }
  .vc-name { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   THE REGISTER · scrubable, year-filtered (Part 01)
   Left rail with big-year display, KPIs, search, horizontal year scrubber.
   Right side: full vendor table with logos + ownership + dept + industry.
   ════════════════════════════════════════════════════════════════════════════ */

.register-wrap {
  max-width: 1280px;
  margin: 88px auto 56px;
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--rule);
  position: relative;
}
.register-frame-top {
  position: absolute;
  top: -1px; left: -1px;
  width: 36px; height: 36px;
  border-top: 2px solid var(--amber);
  border-left: 2px solid var(--amber);
  pointer-events: none;
}

.register-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 32px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--paper-3);
}
.register-head-left { max-width: 64ch; }
.register-section-num {
  font-family: 'MontrealMono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
}
.register-dek {
  font-family: 'Montreal', system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.003em;
}
.register-head-right { flex-shrink: 0; }
.register-counter {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'MontrealMono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  font-size: 11px;
}
.register-counter-num {
  font-family: 'Domaine', serif;
  font-weight: 600;
  font-style: italic;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-transform: none;
}
.register-counter-lab { font-size: 11px; }

.register-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  min-height: 600px;
}
.register-rail {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-right: 24px;
  border-right: 1px solid var(--paper-3);
}
.register-year-display {
  font-family: 'Domaine', serif;
  font-weight: 300;
  font-style: italic;
}
.register-year-val {
  font-size: clamp(72px, 9vw, 116px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.register-stats {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--paper-3);
}
.register-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--paper-3);
  font-family: 'MontrealMono', monospace;
}
.register-stat-lab {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.register-stat-val {
  font-family: 'Montreal', system-ui, sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.register-search-wrap {
  position: relative;
}
.register-search-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  font-family: 'MontrealMono', monospace;
  color: var(--ink-dim);
  font-size: 14px;
  pointer-events: none;
}
.register-search {
  width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 10px 14px 10px 34px;
  font-family: 'Montreal', system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.003em;
  border-radius: 0;
}
.register-search:focus { outline: none; border-color: var(--amber); }
.register-search::placeholder { color: var(--ink-dim); font-style: italic; }

.register-scrubber-wrap { margin-top: auto; padding-top: 16px; position: relative; }
.register-scrubber-track {
  position: relative;
  height: 4px;
  background: var(--paper-3);
  margin: 14px 0;
}
.register-scrubber-fill {
  position: absolute; left: 0; top: 0;
  height: 100%;
  width: 100%;
  background: var(--amber);
  transition: width 0.05s linear;
}
.register-scrubber-thumb {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  background: var(--ink);
  border: 2px solid var(--amber);
  pointer-events: none;
  display: none; /* hidden — using native range thumb instead */
}
.register-scrubber-input {
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  height: 22px;
  margin: -13px 0 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  z-index: 2;
}
.register-scrubber-input::-webkit-slider-runnable-track { background: transparent; height: 22px; }
.register-scrubber-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px;
  background: var(--ink);
  border: 2px solid var(--amber);
  cursor: grab;
  border-radius: 0;
}
.register-scrubber-input::-moz-range-thumb {
  width: 14px; height: 14px;
  background: var(--ink);
  border: 2px solid var(--amber);
  cursor: grab;
  border-radius: 0;
}
.register-scrubber-axis {
  display: flex;
  justify-content: space-between;
  font-family: 'MontrealMono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  margin-top: 14px;
}

/* ── Table ── */
.register-table-wrap {
  min-width: 0;
  overflow: hidden;
}
.register-thead {
  display: grid;
  grid-template-columns: 28px minmax(220px, 2fr) 100px 1.5fr 1.2fr 1.1fr 100px 110px;
  gap: 18px;
  padding: 0 0 12px 12px;
  border-bottom: 1px solid var(--ink);
  font-family: 'MontrealMono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.register-th-num { text-align: right; }
.register-rows {
  /* No inner scroll — page scrolls past the register as one continuous flow.
     ROW_LIMIT=16 caps the section height naturally. */
}
.register-row {
  display: grid;
  grid-template-columns: 28px minmax(220px, 2fr) 100px 1.5fr 1.2fr 1.1fr 100px 110px;
  gap: 18px;
  padding: 14px 0 14px 12px;
  border-bottom: 1px solid var(--paper-3);
  align-items: center;
  font-family: 'Montreal', system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.003em;
  position: relative;
  cursor: pointer;
  transition: background 0.12s;
}
.reg-c-rank { font-family: 'MontrealMono', monospace; font-size: 11px; color: var(--ink-dim); letter-spacing: 0.04em; }
.reg-c-people { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-c-people a { color: var(--ink); border-bottom: 1px dotted var(--paper-3); }
.reg-c-people a:hover { color: var(--amber); border-bottom-color: var(--amber); }
.reg-more { font-family: 'MontrealMono', monospace; font-size: 10px; color: var(--ink-dim); }
.register-th-rank, .register-th-people { text-align: left; }
.register-th-num { text-align: right; }
.reg-c-num { text-align: right; }
.register-row:hover { background: var(--paper-2); }
.register-row.reg-row-amber { background: rgba(212,137,15,0.06); }
.register-row.reg-row-amber:hover { background: rgba(212,137,15,0.1); }
.register-row.reg-row-new::before {
  content: '';
  position: absolute;
  left: -1px; top: 0; bottom: 0;
  width: 3px; background: var(--amber);
}

.reg-cell { min-width: 0; }
.reg-c-name { display: flex; align-items: center; gap: 12px; }
.reg-logo-wrap {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--rule);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.reg-logo {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}
.reg-logo-fb {
  display: none;
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  font-family: 'Domaine', serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper-2);
}
.reg-name-text { min-width: 0; }
.reg-name-line {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reg-domain {
  font-family: 'MontrealMono', monospace;
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reg-own-badge {
  display: inline-block;
  padding: 2px 6px;
  font-family: 'MontrealMono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--paper-2);
  color: var(--ink-dim);
  font-weight: 400;
  border-radius: 2px;
  vertical-align: middle;
}
.reg-own-badge.reg-own-public { color: #1d5731; background: rgba(38, 154, 73, 0.08); }
.reg-own-badge.reg-own-private { color: var(--amber); background: rgba(212,137,15,0.08); }
.reg-own-badge.reg-own-pe { color: #5e2683; background: rgba(94, 38, 131, 0.08); }
.reg-own-badge.reg-own-acquired { color: var(--ink-dim); background: var(--paper-3); }

.reg-c-num {
  text-align: right;
  font-family: 'MontrealMono', monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
}
.reg-c-val { font-family: 'Montreal', system-ui, sans-serif; font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; }
.register-row.reg-row-amber .reg-c-val { color: var(--amber); }
.reg-c-cat {
  font-size: 12px;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.register-more {
  padding: 18px 0 8px;
  font-family: 'MontrealMono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
}
.register-more a { color: var(--amber); text-decoration: none; border-bottom: 1px solid var(--amber); padding-bottom: 1px; }
.register-empty {
  padding: 60px 0;
  text-align: center;
  font-family: 'Montreal', system-ui, sans-serif;
  font-style: italic;
  color: var(--ink-dim);
  font-size: 14px;
}

.register-foot {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--paper-3);
  display: flex;
  justify-content: center;
  gap: 14px;
  font-family: 'MontrealMono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  flex-wrap: wrap;
}
.register-foot-dot { color: var(--paper-3); }

@media (max-width: 1100px) {
  .register-wrap { padding: 24px; }
  .register-body { grid-template-columns: 220px 1fr; gap: 24px; }
  .register-rail { padding-right: 18px; gap: 18px; }
  .register-year-val { font-size: clamp(56px, 8vw, 80px); }
  .register-thead, .register-row { grid-template-columns: minmax(180px, 2fr) 80px 80px 100px 90px 90px; gap: 10px; font-size: 12px; }
  .reg-logo-wrap { width: 32px; height: 32px; }
}
@media (max-width: 880px) {
  .register-wrap { padding: 20px; margin: 56px auto; }
  .register-head { flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; }
  .register-head-right .register-counter-num { font-size: 24px; }
  .register-body { grid-template-columns: 1fr; gap: 24px; }
  .register-rail { padding-right: 0; padding-bottom: 24px; border-right: 0; border-bottom: 1px solid var(--paper-3); flex-direction: column; gap: 18px; }
  .register-year-display { display: flex; align-items: baseline; gap: 16px; }
  .register-year-val { font-size: 64px; }
  .register-stats { flex-direction: row; flex-wrap: wrap; gap: 0 24px; border-top: 0; }
  .register-stat { flex-direction: column; align-items: flex-start; flex: 1; min-width: 100px; padding: 8px 0; gap: 4px; }
  .register-thead { display: none; }
  .register-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name val"
      "cat  num";
    gap: 4px 12px;
    padding: 14px 0;
    align-items: start;
  }
  .reg-c-name { grid-area: name; }
  .reg-c-val { grid-area: val; text-align: right; font-size: 16px; }
  .reg-c-num:not(.reg-c-val) { display: none; }
  .reg-c-cat { grid-area: cat; padding-top: 2px; padding-left: 48px; font-size: 11px; }
  .reg-c-cat:nth-child(6) { display: none; }
  .register-foot { font-size: 9px; gap: 8px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   Old register teaser styles below — kept for reference, no longer used.
   ──────────────────────────────────────────────────────────────────────────── */

.rtable-wrap {
  max-width: 1200px;
  margin: 80px auto 56px;
  padding: 0 32px;
}
.rtable-head { margin-bottom: 28px; }
.rtable-eye {
  font-family: 'MontrealMono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 12px;
}
.rtable-h {
  font-family: 'Montreal', system-ui, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  max-width: 42em;
  text-wrap: balance;
}

.rtable-controls {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.rtable-search-wrap { flex: 0 0 auto; min-width: 280px; }
.rtable-search {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 10px 14px;
  font-family: 'Montreal', system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.003em;
  border-radius: 0;
}
.rtable-search:focus {
  outline: none;
  border-color: var(--amber);
}
.rtable-search::placeholder { color: var(--ink-dim); }

.rtable-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.rtable-chip {
  background: transparent;
  border: 1px solid var(--rule);
  font-family: 'MontrealMono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 8px 12px;
  cursor: pointer;
  transition: color 0.16s, border-color 0.16s, background 0.16s;
  border-radius: 0;
}
.rtable-chip:hover { color: var(--ink); border-color: var(--ink); }
.rtable-chip.active {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.rtable-frame {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.rtable-thead {
  display: grid;
  grid-template-columns: 40px minmax(220px, 1.8fr) 80px minmax(120px, 1.2fr) 80px 100px 110px;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-family: 'MontrealMono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.rtable-th-num { text-align: right; }
.rtable-th-rank { text-align: left; }
.rtable-rows { display: flex; flex-direction: column; }

.rtable-row {
  display: grid;
  grid-template-columns: 40px minmax(220px, 1.8fr) 80px minmax(120px, 1.2fr) 80px 100px 110px;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--paper-3);
  align-items: center;
  font-family: 'Montreal', system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.003em;
}
.rtable-row:last-child { border-bottom: 0; }
.rtable-row.rt-row-amber { background: rgba(212,137,15,0.04); }

.rt-cell { min-width: 0; }
.rt-rank {
  font-family: 'MontrealMono', monospace;
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
}
.rt-name { display: flex; gap: 12px; align-items: center; }
.rt-logo-wrap {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--rule);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.rt-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
.rt-logo-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-family: 'Domaine', serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  background: var(--paper-2);
}
.rt-name-text { min-width: 0; }
.rt-name-line {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rt-domain {
  font-family: 'MontrealMono', monospace;
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rt-num {
  text-align: right;
  font-family: 'MontrealMono', monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.rt-val { font-weight: 500; color: var(--ink); font-family: 'Montreal', system-ui, sans-serif; font-size: 14px; letter-spacing: -0.005em; }
.rtable-row.rt-row-amber .rt-val { color: var(--amber); }
.rt-cat { font-size: 13px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-own { text-align: right; }
.rt-own-badge {
  display: inline-block;
  padding: 4px 8px;
  font-family: 'MontrealMono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  white-space: nowrap;
}
.rt-own-badge.rt-own-public { color: var(--ink); border-color: var(--ink); }
.rt-own-badge.rt-own-private { color: var(--amber); border-color: var(--amber); }
.rt-own-badge.rt-own-pe { color: var(--ink-dim); border-color: var(--ink-dim); }
.rt-own-badge.rt-own-acquired { color: var(--ink-dim); border-color: var(--paper-3); opacity: 0.7; }

.rtable-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 16px;
  font-family: 'MontrealMono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.rtable-foot-cta {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 2px;
}
.rtable-foot-cta:hover { color: var(--ink); border-color: var(--ink); }

@media (max-width: 1000px) {
  .rtable-thead, .rtable-row { grid-template-columns: 32px minmax(180px, 2fr) 70px minmax(0, 1fr) 70px 90px 100px; gap: 12px; font-size: 13px; }
  .rt-cat { font-size: 12px; }
}
@media (max-width: 760px) {
  .rtable-wrap { padding: 0 20px; }
  .rtable-thead { display: none; }
  .rtable-row {
    grid-template-columns: 36px 1fr auto;
    grid-template-areas:
      "rank name val"
      ".    cat  num1"
      ".    own  num2";
    gap: 4px 12px;
    padding: 16px 0;
    align-items: start;
  }
  .rt-rank { grid-area: rank; padding-top: 4px; }
  .rt-name { grid-area: name; }
  .rt-cat { grid-area: cat; font-size: 12px; padding-top: 2px; }
  .rt-own { grid-area: own; text-align: left; padding-top: 4px; }
  .rt-val { grid-area: val; text-align: right; font-size: 16px; font-weight: 500; }
  /* Hide founded year and headcount on smallest mobile — they're available at desktop */
  .rt-num:not(.rt-val) { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PE Watchlist · full editorial table (Part 04)
   9 deals, all visible at-a-glance, with Clearbit logos.
   ════════════════════════════════════════════════════════════════════════════ */

.watchlist-wrap {
  max-width: 1080px;
  margin: 72px auto 56px;
  padding: 0 32px;
}
.watchlist-eye {
  font-family: 'MontrealMono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 14px;
}
.watchlist-h {
  font-family: 'Montreal', system-ui, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 38em;
  margin: 0 0 40px;
  text-wrap: balance;
}
.watchlist-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--rule);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.watchlist-rows > .watchlist-card { background: var(--paper); }
/* odd number of cards (9 named deals): make the last one span both columns
   so we don't see the rule-color background through an empty grid cell. */
.watchlist-rows > .watchlist-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 900px) { .watchlist-rows { grid-template-columns: 1fr; } }
.watchlist-foot {
  font-family: 'Montreal', system-ui, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin-top: 24px;
  max-width: 56em;
  font-style: italic;
}

.watchlist-card {
  display: block;
  padding: 22px 22px 24px;
  border-bottom: none;
  position: relative;
}
.watchlist-card.struck {
  background: rgba(212, 137, 15, 0.04);
}

.wlc-header {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 16px;
  align-items: start;
  margin-bottom: 14px;
}

.wlc-logo-wrap {
  width: 48px;
  height: 48px;
  border: 1px solid var(--rule);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.wlc-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
.wlc-logo-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-family: 'Domaine', serif;
  font-weight: 600;
  font-size: 28px;
  color: var(--ink);
  background: var(--paper-2);
}

.wlc-id { min-width: 0; }
.wlc-num {
  font-family: 'MontrealMono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.wlc-name {
  font-family: 'Montreal', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 4px;
}
.watchlist-card.struck .wlc-name {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(212, 137, 15, 0.55);
  color: var(--ink-dim);
}
.wlc-cat {
  font-family: 'MontrealMono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}

.wlc-status {
  text-align: right;
  max-width: 160px;
  padding-top: 8px;
}
.wlc-status-lab {
  font-family: 'MontrealMono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 4px;
}
.wlc-status-val {
  font-family: 'Montreal', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.wlc-status.struck-status .wlc-status-val {
  color: var(--amber);
}

.wlc-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--paper-3);
  border-bottom: 1px solid var(--paper-3);
  margin-bottom: 14px;
}
.wlc-meta-cell { min-width: 0; overflow: hidden; }
.wlc-meta-lab {
  font-family: 'MontrealMono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wlc-meta-val {
  font-family: 'Montreal', system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.003em;
}

.wlc-body {
  font-family: 'Montreal', system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.003em;
  margin: 0;
}

@media (max-width: 880px) {
  .watchlist-wrap { padding: 0 20px; margin: 48px auto; }
  .watchlist-card { padding: 22px 0 26px; }
  .watchlist-card.struck { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  .wlc-header {
    grid-template-columns: 48px 1fr;
    grid-template-areas: "logo id" "status status";
    gap: 16px;
    margin-bottom: 18px;
  }
  .wlc-logo-wrap { width: 48px; height: 48px; grid-area: logo; }
  .wlc-id { grid-area: id; }
  .wlc-status {
    grid-area: status;
    text-align: left;
    max-width: none;
    padding-top: 8px;
    border-top: 1px solid var(--paper-3);
    margin-top: 4px;
  }
  .wlc-name { font-size: 22px; }
  .wlc-meta {
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    padding: 14px 0;
  }
  .wlc-body { font-size: 14.5px; }
}

/* ── Cohort tables on mobile: card-per-row with first cell as label ── */
@media (max-width: 880px) {
  .edit-table.cohort-table {
    padding: 0 20px;
    margin: 40px auto;
  }
  .edit-table.cohort-table .et-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 16px 0 !important;
    align-items: start;
  }
  /* Drop the header row on mobile — each row carries its own label via first cell */
  .edit-table.cohort-table .et-head { display: none !important; }
  /* Reset any inline grid-column span (Part 03 'Who can buy' col, Part 04 'Era' col) */
  .edit-table.cohort-table .et-cell[style*="grid-column"] {
    grid-column: 1 / -1 !important;
  }
  /* First cell of each data row becomes the cohort/era label */
  .edit-table.cohort-table .et-row > .et-cell:first-child,
  .edit-table.cohort-table .et-row > .et-cell.mono:first-child {
    font-family: 'MontrealMono', monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 2px;
    line-height: 1.4;
  }
  /* Amber-row label stays amber-emphasized */
  .edit-table.cohort-table .et-row.amber-row > .et-cell:first-child { color: var(--amber); }
  /* Default data cell size */
  .edit-table.cohort-table .et-cell {
    font-size: 14px;
    line-height: 1.5;
  }
  /* "Who can buy it" / context cells with .dim modifier — keep readable but quieter */
  .edit-table.cohort-table .et-cell.dim {
    font-size: 13px;
    color: var(--ink-dim);
    margin-top: 2px;
  }
}

/* ═══════════ Part 04 · Three assumptions bending at once ═══════════ */
.assumptions-wrap { max-width: 1100px; margin: 56px auto 32px; padding: 0 56px; }
.assumptions-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px; }
.assumptions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.assumptions-cell { background: var(--paper); padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; min-height: 240px; }
.as-num { font-family: 'Domaine'; font-weight: 600; font-style: italic; font-size: 28px; color: var(--amber); line-height: 1; }
.as-name { font-family: 'Montreal'; font-weight: 500; font-size: 17px; line-height: 1.3; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; }
.as-was, .as-now { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--paper-3); }
.as-was .lab, .as-now .lab { font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
.as-was .val { font-family: 'Montreal'; font-weight: 500; font-size: 16px; color: var(--ink-2); letter-spacing: -0.005em; }
.as-now .val { font-family: 'Montreal'; font-weight: 500; font-size: 16px; color: var(--amber); letter-spacing: -0.005em; }
.as-was .val em, .as-now .val em { font-family: 'Montreal'; font-style: italic; font-weight: 400; font-size: 13px; color: var(--ink-dim); margin-left: 6px; letter-spacing: 0; }
.as-now .val em { color: var(--ink-dim); }

/* ═══════════ Part 03 · Access figure · $511B vs $1.9T ═══════════ */
.access-figure { max-width: 1100px; margin: 80px auto; padding: 0 56px; }
.access-eye { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 24px; }
.access-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(32px, 3vw, 38px); line-height: 1.2; letter-spacing: -0.018em; color: var(--ink); margin-bottom: 40px; max-width: 880px; text-wrap: balance; }
.access-rows { display: flex; flex-direction: column; gap: 20px; padding: 24px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.access-row { display: grid; grid-template-columns: 260px 1fr 100px 280px; gap: 24px; align-items: center; }
.access-row .lab { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
.access-row.amber .lab { color: var(--amber); }
.access-row .bar { height: 26px; background: var(--paper-3); position: relative; overflow: hidden; }
.access-row .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink-2); }
.access-row.amber .fill { background: var(--amber); }
.access-row .val { font-family: 'Domaine'; font-weight: 600; font-style: italic; font-size: 36px; color: var(--ink); text-align: right; }
.access-row.amber .val { color: var(--amber); }
.access-row .meta { font-family: 'MontrealMono'; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }

/* ═══════════ Part 02 · AI labs vs SaaS pure-plays · $1.9T vs $511B ═══════════ */
.ai-vs-saas { display: flex; flex-direction: column; gap: 24px; padding: 20px 0; }
.ai-vs-saas-row { display: grid; grid-template-columns: 220px 1fr 100px; gap: 24px; align-items: center; }
.ai-vs-saas-row .lab { font-family: 'MontrealMono'; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
.ai-vs-saas-row.amber .lab { color: var(--amber); }
.ai-vs-saas-row .bar { height: 22px; background: var(--paper-3); position: relative; overflow: hidden; }
.ai-vs-saas-row .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink-2); }
.ai-vs-saas-row.amber .fill { background: var(--amber); }
.ai-vs-saas-row .val { font-family: 'Domaine'; font-weight: 600; font-style: italic; font-size: 32px; color: var(--ink); text-align: right; }
.ai-vs-saas-row.amber .val { color: var(--amber); }
.ai-vs-saas-foot { font-family: 'Montreal'; font-size: 12px; color: var(--ink-dim); padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--paper-3); line-height: 1.55; }

/* ═══════════════════════════════════════════════════════════════
   PART 05 · UNIT-ECONOMICS FIGURE
   500-agent contact center: seat-priced vs work-priced vs labor displaced
   ═══════════════════════════════════════════════════════════════ */
.unit-econ-figure { max-width: 1080px; margin: 56px auto 32px; padding: 32px; background: var(--paper); border: 1px solid var(--rule); }
.unit-econ-head { display: flex; gap: 12px; align-items: baseline; padding-bottom: 18px; margin-bottom: 28px; border-bottom: 1px solid var(--paper-3); font-family: 'MontrealMono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; flex-wrap: wrap; }
.ue-num { color: var(--amber); font-weight: 500; }
.ue-title { color: var(--ink); }
.ue-sep { color: var(--paper-3); }
.unit-econ-rows { display: flex; flex-direction: column; gap: 32px; padding: 8px 0 24px; }
.ue-row { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: center; }
.ue-eye { font-family: 'MontrealMono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 4px; }
.ue-name { font-family: 'Montreal', system-ui, sans-serif; font-weight: 500; font-size: 16px; line-height: 1.25; letter-spacing: -0.005em; color: var(--ink); }
.ue-bar-wrap { height: 56px; background: var(--paper-2); border: 1px solid var(--paper-3); position: relative; }
.ue-bar { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 16px; transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.ue-bar-saas { background: var(--ink); }
.ue-bar-ai { background: var(--amber); }
.ue-bar-labor { background: var(--amber-deep); }
.ue-val { font-family: 'Domaine', serif; font-weight: 600; font-style: italic; font-size: clamp(20px, 2.2vw, 26px); color: var(--paper); letter-spacing: -0.018em; white-space: nowrap; }
/* Narrow SaaS-era bar can't contain its $2M label inside the bar at 4% width,
   so the value pops outside-right of the bar in dark ink against the light track. */
.ue-bar-saas .ue-val { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 14px; color: var(--ink); }

/* ── SERVICES-VERTICAL GRID (Piece 3) ── named verticals with confidence tier ── */
.services-grid-wrap { max-width: 1200px; margin: 80px auto; padding: 0 56px; }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--rule); border: 1px solid var(--rule); margin-top: 40px; }
.sv-cell { background: var(--paper); padding: 32px 24px; display: flex; flex-direction: column; gap: 10px; min-height: 180px; }
.sv-conf { font-family: 'MontrealMono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 4px; }
.sv-cell.sv-tight .sv-conf { color: var(--ink); }
.sv-cell.sv-medium .sv-conf { color: var(--ink-dim); }
.sv-cell.sv-speculative .sv-conf { color: var(--mist); font-style: italic; }
.sv-cell.sv-total .sv-conf { color: var(--amber); }
.sv-name { font-family: 'Montreal', system-ui, sans-serif; font-weight: 500; font-size: 16px; line-height: 1.3; color: var(--ink); letter-spacing: -0.005em; }
.sv-val { font-family: 'Domaine', serif; font-weight: 600; font-size: 32px; line-height: 1; letter-spacing: -0.025em; color: var(--ink); margin: 4px 0; }
.sv-val em { font-style: normal; font-size: 0.62em; font-weight: 600; color: var(--ink-dim); margin-left: 1px; }
.sv-val.amber { color: var(--amber); }
.sv-val.amber em { color: var(--amber); }
.sv-desc { font-family: 'Montreal', system-ui, sans-serif; font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--ink-dim); margin-top: auto; letter-spacing: -0.003em; }
.sv-cell.sv-total { background: var(--paper-2); }
/* Toggle affordance — each .sv-cell that is a <label> becomes clickable; checkbox lives top-right */
label.sv-cell { cursor: pointer; position: relative; transition: opacity 0.25s ease, background 0.25s ease, border-color 0.25s ease; border: 1px solid transparent; }
label.sv-cell:hover { background: var(--paper-2); border-color: var(--amber); }
.sv-toggle { position: absolute; top: 18px; right: 18px; width: 22px; height: 22px; accent-color: var(--amber); cursor: pointer; margin: 0; }
.sv-cell.is-off { opacity: 0.38; }
.sv-cell.is-off .sv-val { color: var(--ink-dim); }
.services-grid-hint { display: inline-flex; align-items: center; gap: 10px; font-family: 'MontrealMono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; padding: 8px 14px; background: rgba(212,137,15,0.08); border: 1px solid rgba(212,137,15,0.3); border-radius: 0; }
.services-grid-hint::before { content: '↓'; font-family: 'Montreal'; font-size: 14px; font-weight: 500; letter-spacing: 0; }
#walletTotal { transition: color 0.2s ease; }
@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } .services-grid-wrap { padding: 0 24px; } }

/* ── NAMED-VPE STRIP (Piece 1) ── companies plotted against the cohort ladder above ── */
.named-vpe-wrap { max-width: 1100px; margin: 56px auto 80px; padding: 0 56px; }
.vpe-eye { font-family: 'MontrealMono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(212,137,15,0.7); margin-bottom: 16px; display: flex; align-items: center; gap: 14px; }
.vpe-eye::before { content: ''; width: 36px; height: 1px; background: rgba(212,137,15,0.45); flex-shrink: 0; }
.vpe-h { font-family: 'Domaine'; font-weight: 600; font-size: clamp(28px, 3vw, 36px); line-height: 1.2; letter-spacing: -0.022em; color: var(--ink); margin: 0 0 36px 0; max-width: 820px; text-wrap: balance; }
.named-vpe-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--rule); border: 1px solid var(--rule); }
.vpe-cell { background: var(--paper); padding: 28px 22px; display: flex; flex-direction: column; gap: 8px; min-height: 180px; }
.vpe-cell.vpe-amber { background: var(--paper-2); }
.vpe-era { font-family: 'MontrealMono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); }
.vpe-cell.vpe-amber .vpe-era { color: var(--amber); }
.vpe-name { font-family: 'Montreal', system-ui, sans-serif; font-weight: 500; font-size: 18px; line-height: 1.2; color: var(--ink); letter-spacing: -0.005em; margin-top: 2px; }
.vpe-val { font-family: 'Domaine', serif; font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: -0.025em; color: var(--ink); margin: 4px 0 6px 0; }
.vpe-val em { font-style: normal; font-size: 0.55em; font-weight: 600; color: var(--ink-dim); margin-left: 1px; }
.vpe-val.amber { color: var(--amber); }
.vpe-val.amber em { color: var(--amber); }
.vpe-note { font-family: 'Montreal', system-ui, sans-serif; font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--ink-dim); margin-top: auto; letter-spacing: -0.003em; }
.vpe-foot { font-family: 'Montreal', system-ui, sans-serif; font-style: italic; font-size: 14px; line-height: 1.55; color: var(--ink-dim); margin: 24px auto 0; text-align: center; max-width: 64ch; letter-spacing: -0.003em; }
@media (max-width: 1024px) { .named-vpe-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .named-vpe-grid { grid-template-columns: 1fr; } .named-vpe-wrap { padding: 0 24px; } }

/* ── PUBLISHER NOTE · context framing at top of each piece ── */
.publisher-note {
  max-width: 760px;
  margin: 32px auto 56px;
  padding: 22px 28px;
  border-left: 2px solid var(--rule);
  font-family: 'Montreal', system-ui, sans-serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-dim);
  letter-spacing: -0.003em;
}
.publisher-note .pn-eye {
  font-family: 'MontrealMono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
  font-style: normal;
  display: block;
}
.publisher-note strong { color: var(--ink); font-style: normal; font-weight: 500; }
.publisher-note p { margin: 0 0 10px; }
.publisher-note p:last-child { margin-bottom: 0; }
@media (max-width: 720px) { .publisher-note { margin: 24px 24px 40px; padding: 18px 22px; } }
.unit-econ-foot { border-top: 1px solid var(--paper-3); padding-top: 18px; font-family: 'Montreal', system-ui, sans-serif; font-style: italic; font-size: 14px; line-height: 1.55; color: var(--ink-dim); max-width: 64ch; margin: 0 auto; text-align: center; letter-spacing: -0.003em; }

.mega-sub.mega-sub-long { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.12; padding-bottom: 8px; }
.mega-sub.mega-sub-long em { font-style: italic; color: var(--amber); font-weight: 600; }

/* ── 9-WAVE TIMELINE (Piece 3 v2) ── */
.nine-wave-wrap { max-width: 1100px; margin: 56px auto; padding: 0 56px; }
.nine-wave-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.nw-cell {
  background: var(--paper);
  padding: 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 140px;
}
.nw-cell.amber-cell { background: rgba(212,137,15,0.06); border-top: 2px solid var(--amber); padding-top: 22px; }
.nw-num { font-family: 'MontrealMono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
.nw-cell.amber-cell .nw-num { color: var(--amber); }
.nw-name { font-family: 'Montreal'; font-weight: 500; font-size: 14px; line-height: 1.3; color: var(--ink); letter-spacing: -0.005em; }
.nw-yr { font-family: 'MontrealMono', monospace; font-size: 11px; color: var(--ink-dim); margin-top: auto; }
.nine-wave-foot { font-family: 'Montreal'; font-style: italic; font-size: 13px; color: var(--ink-dim); margin-top: 16px; text-align: center; }
@media (max-width: 1024px) {
  .nine-wave-grid { grid-template-columns: repeat(3, 1fr); }
}