/* ============================================================
   HITL Journey Map -- v0.1 scaffold styles
   Minimal: typography, spacing, scroll flow, state tokens.
   No polish. No animations. No theme variations beyond tokens.
   Move 5 (fill primary journey) still pending review.
   ============================================================ */

/* ---------- Theme tokens (light default) ---------- */
:root {
  --bg: #fafaf8;
  --bg-elev: #ffffff;
  --ink: #1a1a1a;
  --ink-soft: #555;
  --ink-muted: #676767;
  --rule: #e5e5e2;
  --accent: #2a4d8f;
  --accent-soft: #e8efff;

  /* Hold / flex / break -- temperature, not category */
  --hold-ink: #1f5f3f;
  --hold-bg: #eaf5ee;
  --hold-edge: #b4d9c1;

  --flex-ink: #8a5a0f;
  --flex-bg: #fbf1dd;
  --flex-edge: #e5c78a;

  --break-ink: #8a2a2a;
  --break-bg: #fae8e6;
  --break-edge: #dea09a;

  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;

  --section-pad: 4rem;
  --max-w: 1200px;

  /* ---------- Blueprint tokens (light default) ---------- */
  /* Layer tints: cool neutral family, low saturation so the blueprint
     reads typographically, not as a heatmap. */
  --bp-customer-tint:   #fbfafd;
  --bp-frontstage-tint: #fafbfd;
  --bp-backstage-tint:  #f6f7fa;
  --bp-support-tint:    #f2f4f7;

  /* Layer labels: slightly darker than tints to read as the row's
     identity strip without becoming loud. */
  --bp-customer-label:   #f2eff8;
  --bp-frontstage-label: #eef2f8;
  --bp-backstage-label:  #e9edf3;
  --bp-support-label:    #e5e9ef;

  /* Line of Visibility -- the designed band. Load-bearing visual. */
  --bp-visibility-band:  #fff5df;
  --bp-visibility-edge:  #e5c78a;
  --bp-visibility-ink:   #6e4a0c;
  --bp-visibility-label: #fbecc5;

  /* Approve / Reject path tints on stages 7a / 7b */
  --bp-approve-bg: #eef7f1;
  --bp-reject-bg:  #fbedea;

  /* Bet chip accent colors -- three of the four bets render as
     chips. Bet 04 "Customer never knows" is the Line of Visibility. */
  --bp-chip-1-edge: #b8cde3;
  --bp-chip-1-ink:  #2a4d8f;
  --bp-chip-2-edge: #c9bcd9;
  --bp-chip-2-ink:  #574080;
  --bp-chip-3-edge: #e0b98f;
  --bp-chip-3-ink:  #8a5a2a;
}

body[data-theme="warm"] {
  --bg: #f7f2ea;
  --bg-elev: #fdfaf4;
  --ink: #2a1f14;
  --ink-soft: #4a4035;
  --ink-muted: #685c50;
  --rule: #e8dfd0;
  --accent: #8a5a2a;
  --accent-soft: #f3e5d0;

  /* Semantic inks/backgrounds -- warm-tuned so they sit in the palette
     rather than showing cool borrowed tints. */
  --hold-ink:  #1f5f3f;
  --hold-bg:   #e6ecd7;
  --hold-edge: #b4c49a;

  --flex-ink:  #8a5a0f;
  --flex-bg:   #f6e8cf;
  --flex-edge: #d9b880;

  --break-ink:  #8a2a2a;
  --break-bg:   #f2dfd9;
  --break-edge: #d9a89e;

  /* Blueprint tokens -- warm palette */
  --bp-customer-tint:   #fbf6ec;
  --bp-frontstage-tint: #f9f3e8;
  --bp-backstage-tint:  #f5efe2;
  --bp-support-tint:    #f0e8d9;

  --bp-customer-label:   #f5ecd9;
  --bp-frontstage-label: #f2e8d2;
  --bp-backstage-label:  #ede2c9;
  --bp-support-label:    #e8dcc0;

  --bp-visibility-band:  #fbe9c6;
  --bp-visibility-edge:  #c9a05c;
  --bp-visibility-ink:   #5a3a0a;
  --bp-visibility-label: #f6ddad;

  --bp-approve-bg: #ecf3e5;
  --bp-reject-bg:  #f5e4db;

  --bp-chip-1-edge: #c7a676;
  --bp-chip-1-ink:  #5a3a0a;
  --bp-chip-2-edge: #c9a9a0;
  --bp-chip-2-ink:  #6a3a28;
  --bp-chip-3-edge: #d9ae7f;
  --bp-chip-3-ink:  #8a5a2a;
}

body[data-theme="dark"] {
  --bg: #14161a;
  --bg-elev: #1c1f24;
  --ink: #f0eee8;
  --ink-soft: #b8b6b0;
  --ink-muted: #9c9a94;
  --rule: #2a2d33;
  --accent: #8cb0ff;
  --accent-soft: #1d2a45;

  --hold-ink: #7fd4a3;
  --hold-bg: #1a2a21;
  --hold-edge: #2d5a3e;

  --flex-ink: #e5b762;
  --flex-bg: #2d2517;
  --flex-edge: #5a4520;

  --break-ink: #e89087;
  --break-bg: #2d1a18;
  --break-edge: #5a2a26;

  /* Blueprint tokens -- dark palette */
  --bp-customer-tint:   #1e2128;
  --bp-frontstage-tint: #1f2229;
  --bp-backstage-tint:  #22252d;
  --bp-support-tint:    #26292f;

  --bp-customer-label:   #262a34;
  --bp-frontstage-label: #262b36;
  --bp-backstage-label:  #2a2f39;
  --bp-support-label:    #2d323c;

  --bp-visibility-band:  #3a2e1a;
  --bp-visibility-edge:  #8a6a28;
  --bp-visibility-ink:   #f0dba0;
  --bp-visibility-label: #4a3a1e;

  --bp-approve-bg: #1a2a21;
  --bp-reject-bg:  #2d1c1a;

  --bp-chip-1-edge: #4a6a8f;
  --bp-chip-1-ink:  #a9c4e8;
  --bp-chip-2-edge: #6a5080;
  --bp-chip-2-ink:  #c6b4dc;
  --bp-chip-3-edge: #8a6a40;
  --bp-chip-3-ink:  #e5b985;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--bg);
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Top bar ---------- */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--rule);
  gap: 1.5rem;
}

.top-bar h1 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.top-bar .subtitle {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: 2px;
}

.top-nav {
  display: flex;
  gap: 1.25rem;
}

.nav-link {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.25rem 0;
}
.nav-link:hover { color: var(--ink); }

.theme-pill {
  display: flex;
  background: var(--rule);
  border-radius: 999px;
  padding: 2px;
}
.theme-opt {
  border: none;
  background: transparent;
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-soft);
}
.theme-opt.active {
  background: var(--bg-elev);
  color: var(--ink);
}

/* ---------- Section shell ---------- */
.section {
  padding: var(--section-pad) 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.section-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.35rem;
  font-weight: 600;
}

.section-job {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
  letter-spacing: -0.005em;
}

.section-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.section-lede {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 55ch;
  margin: 0 0 2.5rem;
}

/* ============================================================
   SECTION 2 -- Scale anchor (elevated background)
   ============================================================ */
.section-scale { background: var(--bg-elev); }

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 2rem 0 2.5rem;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.metric-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.metric-label {
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
}

.metric-sub {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

/* Secondary metric row -- visually quieter so the headline trio still reads as trio */
.metric-row-secondary {
  margin-top: -0.5rem;
  margin-bottom: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.metric-row-secondary .metric-num {
  font-size: 2.25rem;
  color: var(--ink-soft);
}
.metric-row-secondary .metric-label {
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.metric-row-secondary .metric-sub {
  font-size: 0.8rem;
}

.thesis-thread {
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--ink);
  max-width: 60ch;
  margin: 2rem 0 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
}

.credibility-footnote {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin: 0;
}

/* ============================================================
   SECTION 1 -- Four bets named (bets grid inside Problem)
   ============================================================ */

.bets-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.bet-card {
  padding: 1.75rem;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bet-num {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  font-weight: 600;
}

.bet-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}

.bet-why, .bet-flex {
  font-size: 0.95rem;
  margin: 0;
  color: var(--ink-soft);
}

.bet-why-label, .bet-flex-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.bet-flex { color: var(--ink); }

.bet-jump {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  align-self: flex-start;
}

/* ============================================================
   SECTION 3 -- Service blueprint (Phase 3)
   7 stages (cols) x 4 layer rows + 3 separator rows
   NNG layer set adapted: Customer Actions, Frontstage, Backstage,
   Support Processes. Three separation lines: Line of Interaction,
   Line of Visibility (the "Customer never knows" bet rendered as
   a designed band), Line of Internal Interaction.
   Grid is flat CSS Grid; no absolute overlays. Responsive behavior
   preserves the 8-column layout above 960px; horizontal scroll below.
   ============================================================ */

.blueprint-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin: 0.25rem 0 1.25rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.bp-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.bp-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid var(--rule);
}

/* Layer-coded color tints for the legend dots. These are
   perceptible but quiet -- the blueprint reads typographically. */
.bp-legend-dot-customer   { background: var(--bp-customer-tint); }
.bp-legend-dot-frontstage { background: var(--bp-frontstage-tint); }
.bp-legend-dot-backstage  { background: var(--bp-backstage-tint); }
.bp-legend-dot-support    { background: var(--bp-support-tint); }
.bp-legend-dot-visibility {
  background: var(--bp-visibility-band);
  border-color: var(--bp-visibility-edge);
}

/* ---------- Section 3 full-width breakout ---------- */
/* Section 3 drops its horizontal padding on the outer <section> so
   the blueprint wrap can bleed to the viewport edge. The
   .section-inner blocks inside still center at max-w. */
.section-journey {
  padding-left: 0;
  padding-right: 0;
}

.section-journey > .section-inner {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.section-inner-post-bp {
  margin-top: 1.75rem;
}

.bp-wrap {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 0 1.5rem;
  margin: 0 0 1rem;
  scroll-margin-top: 72px;
}

.bp-wrap.has-overflow {
  padding-right: 0;
}
.bp-wrap.has-overflow .blueprint {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

/* Right-edge scroll hint shadow */
.bp-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 72px;
  background: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.02) 40%, rgba(0,0,0,0.08) 70%, rgba(0,0,0,0.14) 100%);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.bp-wrap.has-overflow::after { opacity: 1; }
.bp-wrap.scrolled-end::after { opacity: 0; }

body[data-theme="dark"] .bp-wrap::after {
  background: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.38) 70%, rgba(0,0,0,0.55) 100%);
}
body[data-theme="warm"] .bp-wrap::after {
  background: linear-gradient(to right, transparent 0%, rgba(42,31,20,0.03) 40%, rgba(42,31,20,0.10) 70%, rgba(42,31,20,0.18) 100%);
}

/* Floating scroll-arrow buttons */
.bp-scroll-arrow {
  position: fixed;
  z-index: 50;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--bg-elev);
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, color 0.2s, background 0.2s, box-shadow 0.2s;
}
.bp-scroll-arrow:hover {
  color: var(--ink);
  background: var(--bg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.bp-scroll-arrow svg { width: 22px; height: 22px; }
.bp-scroll-left { left: 1rem; }
.bp-scroll-right { right: 1rem; }

.bp-wrap.has-overflow.in-view .bp-scroll-right {
  opacity: 1;
  pointer-events: auto;
}
.bp-wrap.has-overflow.in-view:not(.scrolled-start) .bp-scroll-left {
  opacity: 1;
  pointer-events: auto;
}
.bp-wrap.has-overflow.in-view.scrolled-end .bp-scroll-right {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Blueprint container ---------- */
.blueprint {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  position: relative;
}

.blueprint::-webkit-scrollbar { height: 8px; }
.blueprint::-webkit-scrollbar-track { background: transparent; }
.blueprint::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }

/* Every row subdivides the label column + 8 stage columns.
   min-width: fit-content ensures the grid never compresses below
   its intrinsic width -- horizontal scroll handles narrow viewports. */
.bp-row {
  display: grid;
  grid-template-columns: 200px repeat(8, minmax(220px, 1fr));
  /* NOTE: 8 stage columns = stages 1, 2, 3, 4, 5, 6, 7a, 7b */
  align-items: stretch;
  min-width: fit-content;
  border-bottom: 1px solid var(--rule);
}
.bp-row:last-child { border-bottom: none; }

/* Label column (first col of every row). Sticky so identity stays
   visible when the blueprint scrolls horizontally. */
.bp-label {
  position: sticky;
  left: 0;
  z-index: 4;
  padding: 1.1rem 1.1rem;
  border-right: 1px solid var(--rule);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: center;
}

.bp-lbl-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.bp-lbl-sub {
  font-size: 0.72rem;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  line-height: 1.35;
}

/* ---------- Row 1: Stage headers ---------- */

.bp-stages {
  background: var(--bg);
  border-bottom: 2px solid var(--rule);
}

.bp-stage-corner {
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--bg);
  border-right: 1px solid var(--rule);
}

.bp-stage-head {
  padding: 1.25rem 1.1rem 1rem;
  border-left: 1px solid var(--rule);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  cursor: default;
  outline-offset: -3px;
  position: relative;
  transition: background 0.15s;
}

.bp-stage-head:hover { background: var(--bg-elev); }

/* Stage number as a circular badge -- gives headers visual presence */
.bp-stage-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--bg-elev);
  border: 1.5px solid var(--rule);
  color: var(--ink-soft);
}

.bp-stage-name {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.bp-stage-sub {
  font-size: 0.72rem;
  color: var(--ink-muted);
  font-weight: 500;
  margin-top: 0.05rem;
}

.bp-stage-fork-hint {
  font-size: 0.7rem;
  color: var(--ink-muted);
  font-style: italic;
  margin-top: 0.15rem;
}

/* Stage 5: the pivot. Accent background + bottom bar + filled badge. */
.bp-stage-head-pivot {
  background: var(--accent-soft);
  box-shadow: inset 0 -3px 0 var(--accent);
}
.bp-stage-head-pivot .bp-stage-num {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.bp-stage-head-pivot .bp-stage-name {
  color: var(--accent);
  font-weight: 700;
}

/* Stages 7a / 7b fork headers tint */
.bp-stage-head-approve {
  background: var(--bp-approve-bg);
}
.bp-stage-head-approve .bp-stage-num {
  border-color: var(--hold-edge);
  color: var(--hold-ink);
}

.bp-stage-head-reject {
  background: var(--bp-reject-bg);
}
.bp-stage-head-reject .bp-stage-num {
  border-color: var(--break-edge);
  color: var(--break-ink);
}

/* Stage 6 fork: split-gradient indicator on bottom edge shows the fork */
.bp-stage-head-fork::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(to right, var(--hold-ink) 0%, var(--hold-ink) 50%, var(--break-ink) 50%, var(--break-ink) 100%);
}

/* ---------- Layer rows ---------- */

.bp-layer {
  border-bottom: 1px solid var(--rule);
}

/* Layer-specific tinting on the label */
.bp-layer-customer   .bp-label { background: var(--bp-customer-label); }
.bp-layer-frontstage .bp-label { background: var(--bp-frontstage-label); }
.bp-layer-backstage  .bp-label { background: var(--bp-backstage-label); }
.bp-layer-support    .bp-label { background: var(--bp-support-label); }

/* Subtle full-row tint so layers are distinguishable without being loud */
.bp-layer-customer   .bp-c:not(.bp-c-approve):not(.bp-c-reject) { background: var(--bp-customer-tint); }
.bp-layer-frontstage .bp-c:not(.bp-c-approve):not(.bp-c-reject) { background: var(--bp-frontstage-tint); }
.bp-layer-backstage  .bp-c:not(.bp-c-approve):not(.bp-c-reject) { background: var(--bp-backstage-tint); }
.bp-layer-support    .bp-c:not(.bp-c-approve):not(.bp-c-reject) { background: var(--bp-support-tint); }

/* Cell base: generous padding, clear typographic hierarchy */
.bp-c {
  padding: 1.1rem 1.1rem;
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--ink);
  min-height: 110px;
  position: relative;
  transition: background 0.15s, box-shadow 0.15s;
}

.bp-c-surface {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.bp-c-sub {
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.bp-c-dash {
  font-size: 1.15rem;
  color: var(--ink-muted);
  align-self: flex-start;
}

/* Base empty-cell treatment (non-Support layers use this) */
.bp-c-empty {
  background: transparent;
  opacity: 0.7;
}

/* Support Processes layer: empty cells read as "nothing here by design" --
   thinner row, lighter treatment, quieter tint. Populated cells
   (stages 4 and 7b) keep full presence. */
.bp-layer-support .bp-c {
  min-height: 58px;
  padding: 0.55rem 0.75rem;
}

.bp-layer-support .bp-c-empty {
  opacity: 0.35;
  background: transparent;
  min-height: 42px;
  padding: 0.4rem 0.75rem;
}

.bp-layer-support .bp-c-empty .bp-c-dash {
  font-size: 0.95rem;
  opacity: 1;
}

.bp-layer-support .bp-label {
  min-height: 58px;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* Phase 4 placeholder marker on Customer Actions cells */
.bp-c-placeholder .bp-c-phase-note {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0.7;
  font-weight: 600;
  margin-top: auto;
}

.bp-c-anxiety-anchor .bp-c-surface { color: var(--flex-ink); }

/* ============================================================
   PHASE 4 -- Customer Actions content + Section 4 extras
   ============================================================ */

/* ---------- Framing insight callout (after section-lede) ---------- */
.framing-insight {
  margin: 1.25rem 0 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  max-width: 72ch;
}

.framing-insight-label {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.framing-insight-text {
  font-size: 0.95rem;
  color: var(--ink);
  margin: 0 0 0.35rem;
  line-height: 1.45;
}

.framing-insight-citation {
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin: 0;
  font-style: italic;
}

/* ---------- Anxiety arc at stage 5 ---------- */
.bp-c-stage5-customer {
  /* Stage 5 Customer Actions cell is denser -- let it breathe. */
  min-height: 240px;
  padding: 0.85rem 0.85rem;
}

.anxiety-arc {
  margin-top: 0.6rem;
  padding-top: 0.4rem;
}

.anxiety-arc-track {
  position: relative;
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: visible;
  margin-bottom: 0.4rem;
  background: var(--rule);
}

.anxiety-arc-band {
  display: block;
  height: 100%;
}

.anxiety-arc-band-ok    { flex-basis: 25%; background: var(--hold-ink); opacity: 0.7; border-radius: 999px 0 0 999px; }
.anxiety-arc-band-warn  { flex-basis: 20%; background: var(--flex-ink); opacity: 0.7; }
.anxiety-arc-band-hot   { flex-basis: 25%; background: var(--flex-ink); opacity: 0.95; }
.anxiety-arc-band-break { flex-basis: 30%; background: var(--break-ink); opacity: 0.85; border-radius: 0 999px 999px 0; }

.anxiety-arc-marker {
  position: absolute;
  top: -4px;
  transform: translateX(-50%);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1;
}

.anxiety-arc-marker-45 { color: var(--flex-ink); }
.anxiety-arc-marker-120 { color: var(--break-ink); }

.anxiety-arc-labels {
  display: grid;
  grid-template-columns: 25% 20% 25% 30%;
  gap: 0.15rem;
  font-size: 0.62rem;
  line-height: 1.2;
}

.anxiety-arc-label {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0 0.1rem;
}

.anxiety-arc-label-range {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.anxiety-arc-label-state {
  color: var(--ink-muted);
  font-weight: 600;
}

.anxiety-arc-label-ok .anxiety-arc-label-state    { color: var(--hold-ink); }
.anxiety-arc-label-warn .anxiety-arc-label-state  { color: var(--flex-ink); }
.anxiety-arc-label-hot .anxiety-arc-label-state   { color: var(--flex-ink); }
.anxiety-arc-label-break .anxiety-arc-label-state { color: var(--break-ink); }

.anxiety-arc-citation {
  font-size: 0.65rem;
  color: var(--ink-muted);
  font-style: italic;
  margin: 0.5rem 0 0;
  line-height: 1.35;
}

/* ---------- Quote callouts (anxiety / rejection / completeness) ---------- */
.anxiety-quote,
.rejection-quote,
.completeness-caveat-quote {
  margin: 0.5rem 0 0;
  padding: 0.55rem 0.75rem;
  border-left: 2px solid var(--flex-edge);
  background: var(--bg-elev);
  border-radius: 0 4px 4px 0;
  font-style: italic;
  color: var(--ink);
}

.anxiety-quote-text,
.rejection-quote p,
.completeness-caveat-quote p {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  line-height: 1.4;
}

.anxiety-quote-attrib,
.rejection-quote cite,
.completeness-caveat-quote cite {
  display: block;
  font-size: 0.66rem;
  color: var(--ink-muted);
  font-style: normal;
  letter-spacing: 0.02em;
}

.rejection-quote {
  border-left-color: var(--break-edge);
}

.completeness-caveat-quote {
  border-left-color: var(--hold-edge);
}

/* ---------- Perception gap expandable ---------- */
.perception-gap {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

.perception-gap-summary {
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  background: var(--bg);
  border: 1px dashed var(--rule);
  border-radius: 4px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}

.perception-gap-summary::-webkit-details-marker { display: none; }

.perception-gap-summary::before {
  content: '\25B8';
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform 0.15s;
  color: var(--ink-muted);
}

.perception-gap[open] .perception-gap-summary::before {
  transform: rotate(90deg);
}

.perception-gap-summary-hint {
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 0.7rem;
  margin-left: 0.4rem;
}

.perception-gap-body {
  padding: 0.6rem 0.5rem 0.35rem;
}

.perception-gap-lede {
  margin: 0 0 0.55rem;
  font-size: 0.73rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.perception-gap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  margin-bottom: 0.4rem;
}

.perception-gap-table th,
.perception-gap-table td {
  padding: 0.28rem 0.4rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}

.perception-gap-table thead th {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--ink-muted);
}

.perception-gap-table tbody th {
  font-weight: 600;
}

.perception-gap-worst {
  background: var(--flex-bg);
}

.perception-gap-worst strong { color: var(--break-ink); }

.perception-gap-footnote {
  font-size: 0.62rem;
  color: var(--ink-muted);
  font-style: italic;
  margin: 0;
  line-height: 1.4;
}

/* ---------- Resolution completeness caveat (stage 7a Customer Actions) ---------- */
.completeness-caveat {
  margin-top: 0.5rem;
  padding: 0.55rem 0.65rem;
  background: var(--bg-elev);
  border: 1px solid var(--hold-edge);
  border-radius: 4px;
}

.completeness-caveat-label {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--hold-ink);
  margin-bottom: 0.3rem;
}

.completeness-caveat-text {
  font-size: 0.73rem;
  line-height: 1.4;
  margin: 0 0 0.4rem;
  color: var(--ink);
}

.completeness-caveat-citation {
  font-size: 0.62rem;
  color: var(--ink-muted);
  font-style: italic;
  margin: 0.3rem 0 0;
}

/* ---------- Rejection-path critical CX treatment (stage 7b) ---------- */
.bp-c-reject-critical {
  background: var(--bp-reject-bg) !important;
  border-left: 3px solid var(--break-ink);
  min-height: 240px;
}

.bp-c-risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  padding: 0.2rem 0.5rem;
  background: var(--bg-elev);
  border: 1px solid var(--break-edge);
  border-radius: 3px;
  color: var(--break-ink);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.bp-c-risk-badge-glyph {
  display: inline-flex;
  align-items: center;
  color: var(--break-ink);
}

.rejection-reasons {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--break-edge);
}

.rejection-reasons-label {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--break-ink);
  margin-bottom: 0.25rem;
}

.rejection-reasons-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ink);
}

.rejection-citation {
  margin: 0.4rem 0 0;
  font-size: 0.62rem;
  color: var(--ink-muted);
  font-style: italic;
}

/* ---------- Four-state invisibility model row (below Line of Visibility) ---------- */
.bp-sep-states {
  border-bottom: 1px solid var(--rule);
  background: var(--bp-visibility-label);
}

.bp-sep-states-label {
  background: var(--bp-visibility-label);
  border-right: 1px solid var(--bp-visibility-edge);
  padding: 0.7rem 0.9rem;
}

.bp-sep-states-band {
  grid-column: 2 / -1;
  padding: 0.75rem 1rem 0.85rem;
  background: var(--bg-elev);
}

.invisibility-states {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.invisibility-state {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.invisibility-state-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
}

.invisibility-state-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.invisibility-state-when {
  font-size: 0.65rem;
  color: var(--ink-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.invisibility-state-why {
  font-size: 0.72rem;
  color: var(--ink-soft);
  line-height: 1.35;
}

.invisibility-state-holds {
  border-color: var(--hold-edge);
  background: var(--hold-bg);
}
.invisibility-state-holds .invisibility-state-glyph,
.invisibility-state-holds .invisibility-state-label { color: var(--hold-ink); }

.invisibility-state-flexes {
  border-color: var(--flex-edge);
  background: var(--flex-bg);
}
.invisibility-state-flexes .invisibility-state-glyph,
.invisibility-state-flexes .invisibility-state-label { color: var(--flex-ink); }

.invisibility-state-breaks {
  border-color: var(--break-edge);
  background: var(--break-bg);
}
.invisibility-state-breaks .invisibility-state-glyph,
.invisibility-state-breaks .invisibility-state-label { color: var(--break-ink); }

.invisibility-state-mitigated {
  border-color: var(--hold-edge);
  border-style: dashed;
  background: var(--bg-elev);
}
.invisibility-state-mitigated .invisibility-state-glyph,
.invisibility-state-mitigated .invisibility-state-label { color: var(--hold-ink); opacity: 0.85; }

.invisibility-states-evidence {
  margin: 0.65rem 0 0.3rem;
  font-size: 0.7rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

.invisibility-states-insight {
  margin: 0;
  font-size: 0.72rem;
  color: var(--ink-muted);
  font-style: italic;
  line-height: 1.4;
}

.invisibility-states-insight strong {
  color: var(--ink);
  font-style: normal;
}

/* ---------- Design-implication callout (end of Section 3) ---------- */
.design-implication {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  background: var(--break-bg);
  border-left: 3px solid var(--break-ink);
  border-radius: 4px;
  max-width: 72ch;
}

.design-implication-label {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--break-ink);
  margin-bottom: 0.35rem;
}

.design-implication-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
}

/* ---------- Item value gradient callout (Section 4, Option B starting default) ---------- */
.value-gradient {
  margin: 0 0 1.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.value-gradient-head {
  margin-bottom: 0.85rem;
}

.value-gradient-label {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 0.2rem;
}

.value-gradient-sub {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.value-gradient-bands {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.value-gradient-band {
  padding: 0.65rem 0.75rem;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.value-gradient-band-range {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.value-gradient-band-behavior {
  font-size: 0.72rem;
  color: var(--ink-soft);
  line-height: 1.35;
}

.value-gradient-band-implication {
  margin-top: auto;
  padding-top: 0.3rem;
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-muted);
}

/* Four-band gradient: cool -> warm, low contrast, quiet */
.value-gradient-band-1 { background: var(--hold-bg); }
.value-gradient-band-1 .value-gradient-band-implication { color: var(--hold-ink); }
.value-gradient-band-2 { background: var(--accent-soft); }
.value-gradient-band-2 .value-gradient-band-implication { color: var(--accent); }
.value-gradient-band-3 { background: var(--flex-bg); }
.value-gradient-band-3 .value-gradient-band-implication { color: var(--flex-ink); }
.value-gradient-band-4 { background: var(--break-bg); }
.value-gradient-band-4 .value-gradient-band-implication { color: var(--break-ink); }

.value-gradient-footnote {
  margin: 0.85rem 0 0;
  font-size: 0.7rem;
  color: var(--ink-muted);
  font-style: italic;
  line-height: 1.4;
}

/* Approve / Reject path tints override the layer tint on stages 7a/7b */
.bp-c-approve { background: var(--bp-approve-bg); }
.bp-c-reject  { background: var(--bp-reject-bg); }

/* Hover-highlight across a stage column */
.bp-c.bp-c-stage-hover,
.bp-stage-head.bp-stage-hover {
  box-shadow: inset 0 0 0 2px var(--accent);
  z-index: 2;
}

/* Bet chips on Backstage cells */
.bp-c-bet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.bp-bet-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.22rem 0.6rem;
  border-radius: 10px;
  background: var(--bg-elev);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  white-space: nowrap;
  line-height: 1.4;
}

.bp-bet-chip[data-bet="1"] { border-color: var(--bp-chip-1-edge); color: var(--bp-chip-1-ink); }
.bp-bet-chip[data-bet="2"] { border-color: var(--bp-chip-2-edge); color: var(--bp-chip-2-ink); }
.bp-bet-chip[data-bet="3"] { border-color: var(--bp-chip-3-edge); color: var(--bp-chip-3-ink); }

/* ---------- Stage 5 Backstage: the dense Val Ho cell ---------- */

.bp-c-stage5 {
  background: var(--bg-elev) !important;
  border-left: 1px solid var(--rule);
  box-shadow: inset 0 2px 0 var(--accent);
  cursor: pointer;
}

.bp-c-stage5-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.bp-c-expand-chevron {
  font-size: 0.75rem;
  color: var(--ink-muted);
  transition: transform 0.2s;
}

.bp-c-stage5[aria-expanded="true"] .bp-c-expand-chevron {
  transform: rotate(180deg);
}

.bp-c-stage5-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  margin-top: 0.25rem;
}

.bp-c-stage5-label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.bp-c-stage5-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.bp-c-stage5-list li {
  font-size: 0.75rem;
  color: var(--ink-soft);
  line-height: 1.35;
}

.bp-c-stage5-list-lacks li {
  color: var(--ink);
}

.bp-c-stressor {
  display: block;
  font-size: 0.65rem;
  color: var(--flex-ink);
  font-weight: 600;
  margin-top: 0.1rem;
}

.bp-c-stage5-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.bp-c-ac3-thumb {
  margin-top: 0.5rem;
  padding: 0.55rem 0.65rem;
  border: 1px dashed var(--rule);
  border-radius: 4px;
  background: var(--bg);
  cursor: pointer;
  font: inherit;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.bp-c-ac3-thumb:hover {
  border-color: var(--accent);
  border-style: solid;
}

.bp-c-ac3-thumb-inner {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.bp-c-ac3-thumb-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
}

.bp-c-ac3-thumb-sub {
  font-size: 0.65rem;
  color: var(--ink-muted);
  font-style: italic;
}

.bp-c-stage5-detail {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bp-c-stage5-quote {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink);
  margin: 0;
  line-height: 1.45;
  padding-left: 0.75rem;
  border-left: 2px solid var(--rule);
}

.bp-c-stage5-attrib {
  display: block;
  font-size: 0.7rem;
  color: var(--ink-muted);
  font-style: normal;
  margin-top: 0.3rem;
  letter-spacing: 0.02em;
}

.bp-c-stage5-note {
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.4;
}

/* ---------- Stage 6 fork decoration ---------- */

.bp-c-fork {
  position: relative;
}

.bp-c-fork-split {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.3rem;
}

.bp-c-fork-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
  border-radius: 10px;
  text-transform: uppercase;
}

.bp-c-fork-approve {
  background: var(--hold-bg);
  color: var(--hold-ink);
  border: 1px solid var(--hold-edge);
}

.bp-c-fork-reject {
  background: var(--break-bg);
  color: var(--break-ink);
  border: 1px solid var(--break-edge);
}

/* ---------- Separator rows (Lines of Interaction / Visibility / Internal) ---------- */

.bp-sep {
  border-bottom: 1px solid var(--rule);
}

.bp-sep .bp-label {
  border-right: 1px solid var(--rule);
}

.bp-sep-label {
  padding: 0.6rem 0.9rem;
}

.bp-sep-name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.bp-sep-sub {
  display: block;
  font-size: 0.65rem;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 0.15rem;
}

/* Each separator row uses a single cell that spans stages 2 through 9.
   Achieve that with grid-column: 2 / -1 on the band element and hide
   extra filler rows. */
.bp-sep-band {
  grid-column: 2 / -1;
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--ink-muted);
  background: var(--bg);
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
  min-height: 38px;
}

.bp-sep-internal .bp-sep-band {
  border-top-style: dashed;
  border-bottom-style: dashed;
}

/* Line of Visibility -- the designed band. This IS the "Customer
   never knows" bet. Taller, pigmented band, glyph + label + scope. */
.bp-sep-visibility .bp-label {
  background: var(--bp-visibility-label);
  border-right: 1px solid var(--bp-visibility-edge);
}

.bp-sep-label-visibility .bp-sep-name { color: var(--bp-visibility-ink); }
.bp-sep-label-visibility .bp-sep-sub  { color: var(--bp-visibility-ink); opacity: 0.9; }

.bp-sep-band-visibility {
  background: var(--bp-visibility-band);
  border-top: 1px solid var(--bp-visibility-edge);
  border-bottom: 1px solid var(--bp-visibility-edge);
  min-height: 56px;
  color: var(--bp-visibility-ink);
  padding: 0.7rem 1rem;
  gap: 0.9rem;
  position: relative;
}

.bp-sep-band-glyph {
  flex-shrink: 0;
  color: var(--bp-visibility-ink);
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
}

.bp-sep-band-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}

.bp-sep-band-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  color: var(--bp-visibility-ink);
}

.bp-sep-band-detail {
  font-size: 0.75rem;
  color: var(--bp-visibility-ink);
  opacity: 0.8;
  line-height: 1.4;
}

.bp-sep-band-scope {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bp-visibility-ink);
  opacity: 0.75;
  white-space: nowrap;
}

/* ---------- Blueprint supplementary elements ---------- */

.stage-footnote {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin: 1.5rem 0 0;
}

.phase3-note {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 1.25rem 0 0;
  padding: 0.9rem 1rem;
  background: var(--bg);
  border: 1px dashed var(--rule);
  border-radius: 6px;
  max-width: 72ch;
}

/* Aria-live region: visually hidden, accessible-name only */
.bp-live {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   SECTION 3 -- Visual composition pass (world-class info design)
   Philosophy: everything always visible at full or whisper volume.
   Metrics are visualized, not typeset. Cells are designed micro-
   compositions. Hover foregrounds connections through opacity +
   accent, never through reveal. No content hides behind clicks.
   Supersedes prior simplification-pass rules via cascade order.
   ============================================================ */

/* ---------- Whisper layer: secondary annotations, always on canvas ---------- */
.whisper {
  opacity: 0.5;
  transition: opacity 0.2s ease;
  font-weight: 500;
}

/* ---------- Stage headers: simple story spine ---------- */
.bp-stage-head {
  padding: 1.1rem 1rem 1rem;
  gap: 0.25rem;
  cursor: default;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--rule);
  background: var(--bg);
  transition: background 0.2s;
}
.bp-stage-head:hover { background: var(--bg-elev); }

.bp-stage-narr {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-style: italic;
  letter-spacing: 0.01em;
  margin-top: 0.1rem;
}

/* Stage 5 pivot keeps accent treatment -- this is "the moment" */
.bp-stage-head-pivot { background: var(--accent-soft); }
.bp-stage-head-pivot .bp-stage-num { background: var(--accent); border-color: var(--accent); color: #fff; }
.bp-stage-head-pivot .bp-stage-name { color: var(--accent); font-weight: 700; }

.bp-stage-head-approve { background: var(--bp-approve-bg); }
.bp-stage-head-approve .bp-stage-num { border-color: var(--hold-edge); color: var(--hold-ink); }
.bp-stage-head-reject  { background: var(--bp-reject-bg); }
.bp-stage-head-reject  .bp-stage-num { border-color: var(--break-edge); color: var(--break-ink); }

.bp-stage-head-fork::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(to right, var(--hold-ink) 0%, var(--hold-ink) 50%, var(--break-ink) 50%, var(--break-ink) 100%);
}

/* ---------- Flow ribbon: left-to-right narrative spine ---------- */
.bp-flow {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-width: fit-content;
  height: 36px;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.bp-flow-spacer {
  border-right: 1px solid var(--rule);
  background: var(--bg);
  position: sticky;
  left: 0;
  z-index: 3;
}

.bp-flow-svg { width: 100%; height: 100%; display: block; }
.bp-flow-spine { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: 0.55; }
.bp-flow-branch { fill: none; stroke-width: 2; stroke-linecap: round; opacity: 0.6; }
.bp-flow-branch-approve { stroke: var(--hold-ink); }
.bp-flow-branch-reject  { stroke: var(--break-ink); }

/* ---------- Cell base: designed micro-composition ---------- */
.bp-c {
  padding: 1rem 1rem 1.05rem;
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink);
  min-height: 120px;
  position: relative;
  cursor: default;
  transition: background 0.2s, box-shadow 0.2s;
}

.bp-c-headline {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.bp-c-headline-small {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: 0;
}

.bp-c-sub {
  font-size: 0.76rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.bp-c-dash {
  font-size: 1rem;
  color: var(--ink-muted);
  opacity: 0.3;
  align-self: flex-start;
}

/* Empty cells in non-Support layers */
.bp-c-empty {
  background: transparent !important;
  opacity: 0.5;
  min-height: 120px;
}

/* Simple Frontstage rows (they're narrative echo of Customer actions) */
.bp-c-frontstage-simple {
  min-height: 96px;
}

/* Large visual metric that earns its size */
.bp-c-metric-large {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--hold-ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.bp-c-reject-tint .bp-c-metric-large { color: var(--break-ink); }

/* Risk badge treatment */
.bp-c-risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  padding: 0.18rem 0.55rem;
  background: var(--bg-elev);
  border: 1px solid var(--break-edge);
  border-radius: 4px;
  color: var(--break-ink);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
}

.bp-c-approve-tint { background: var(--bp-approve-bg) !important; }
.bp-c-reject-tint  { background: var(--bp-reject-bg)  !important; }

.bp-c-critical {
  box-shadow: inset 0 0 0 1px var(--break-edge);
}

/* Chips (bet + frontstage) */
.bp-c-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

/* Bet chips: rounded, low-contrast by default, full volume on focus/hover */
.bp-bet-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  white-space: nowrap;
  line-height: 1.4;
  cursor: default;
  transition: box-shadow 0.2s, transform 0.2s;
  opacity: 0.8;
}
.bp-bet-chip:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.bp-bet-chip[data-bet="1"] { border-color: var(--bp-chip-1-edge); color: var(--bp-chip-1-ink); }
.bp-bet-chip[data-bet="2"] { border-color: var(--bp-chip-2-edge); color: var(--bp-chip-2-ink); }
.bp-bet-chip[data-bet="3"] { border-color: var(--bp-chip-3-edge); color: var(--bp-chip-3-ink); }

/* ---------- Stage 5 Backstage: designed composition ---------- */
/* Header row: 37-second radial timer + title */
.bp-c-stage5 {
  background: var(--bg-elev) !important;
  box-shadow: inset 3px 0 0 var(--accent);
  gap: 0.75rem;
  min-height: 120px;
}

.bp-stage5-head {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0.75rem;
  align-items: center;
}

.bp-stage5-lede {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* The 37-second radial timer */
.bp-timer {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-timer-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bp-timer-track {
  fill: none;
  stroke: var(--rule);
  stroke-width: 3;
}

.bp-timer-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 97 157; /* 97 of 157 = roughly 61.5% = 37/60 */
}

.bp-timer-num {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}
.bp-timer-unit {
  font-size: 0.65rem;
  font-weight: 600;
  margin-left: 0.05rem;
}

/* Has/Lacks: visual split with check vs. gap marks */
.bp-has-lacks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--rule);
}

.bp-has-label,
.bp-lacks-label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.bp-has-label { color: var(--hold-ink); }
.bp-lacks-label { color: var(--break-ink); }

.bp-has-list,
.bp-lacks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.bp-has-list li,
.bp-lacks-list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 0.35rem;
  align-items: baseline;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--ink);
}

.bp-has-mark {
  color: var(--hold-ink);
  font-weight: 700;
  font-size: 0.75rem;
}

.bp-lacks-list li {
  grid-template-columns: 14px 1fr;
  grid-template-rows: auto auto;
}

.bp-lacks-mark {
  grid-row: 1;
  color: var(--break-ink);
  font-weight: 700;
  font-size: 0.8rem;
}

.bp-lacks-item {
  grid-row: 1;
  color: var(--ink);
}

.bp-lacks-stresses {
  grid-row: 2;
  grid-column: 2;
  font-size: 0.62rem;
  font-style: italic;
  color: var(--break-ink);
  opacity: 0.7;
}

/* AC3 thumb: compact link-button */
.bp-ac3-thumb {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border: 1px dashed var(--rule);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s, border-style 0.15s, background 0.15s, color 0.15s;
  margin-top: 0.2rem;
}
.bp-ac3-thumb:hover {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Quote block: compact, designed, always visible */
.bp-quote {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-left: 2px solid var(--rule);
  background: transparent;
  font-style: italic;
}
.bp-quote-text { margin: 0; font-size: 0.76rem; line-height: 1.4; color: var(--ink); }
.bp-quote-attrib { display: block; font-size: 0.65rem; color: var(--ink-muted); font-style: normal; letter-spacing: 0.02em; margin-top: 0.3rem; }
.bp-quote-compact { padding: 0.35rem 0.6rem; }
.bp-quote-compact .bp-quote-text { font-size: 0.72rem; }

/* Stage 5 Customer quote = warm tint */
.bp-c-anxiety .bp-quote { border-left-color: var(--flex-edge); }

/* Rejection cell quote = red tint */
.bp-c-critical .bp-quote { border-left-color: var(--break-edge); }

/* Stage 7a completeness caveat quote = green tint */
.completeness-caveat .bp-quote { border-left-color: var(--hold-edge); }

/* ---------- Stage 5 Customer: anxiety arc composition ---------- */
.bp-c-anxiety { gap: 0.6rem; }

.anxiety-arc { margin-top: 0.15rem; }
.anxiety-arc-track {
  position: relative;
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: visible;
  margin-bottom: 0.45rem;
  background: var(--rule);
}
.anxiety-arc-band { display: block; height: 100%; }
.anxiety-arc-band-ok    { flex-basis: 25%; background: var(--hold-ink); opacity: 0.65; border-radius: 999px 0 0 999px; }
.anxiety-arc-band-warn  { flex-basis: 20%; background: var(--flex-ink); opacity: 0.65; }
.anxiety-arc-band-hot   { flex-basis: 25%; background: var(--flex-ink); opacity: 0.95; }
.anxiety-arc-band-break { flex-basis: 30%; background: var(--break-ink); opacity: 0.85; border-radius: 0 999px 999px 0; }

.anxiety-arc-marker {
  position: absolute;
  top: -3px;
  width: 16px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--bg-elev);
  border: 2px solid;
}
.anxiety-arc-marker-45  { border-color: var(--flex-ink); }
.anxiety-arc-marker-120 { border-color: var(--break-ink); }

.anxiety-arc-labels {
  display: grid;
  grid-template-columns: 25% 20% 25% 30%;
  gap: 0.15rem;
  font-size: 0.62rem;
  line-height: 1.25;
}

.anxiety-arc-label {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.anxiety-arc-label-range {
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.anxiety-arc-label-state {
  font-weight: 500;
  opacity: 0.55;
}

.anxiety-arc-label-warn .anxiety-arc-label-range  { color: var(--flex-ink); }
.anxiety-arc-label-hot  .anxiety-arc-label-range  { color: var(--flex-ink); }
.anxiety-arc-label-break .anxiety-arc-label-range { color: var(--break-ink); }

/* Perception gap: tiny always-visible whisper summary; <details> opens full table */
.perception-gap { margin-top: 0.2rem; font-size: 0.72rem; }
.perception-gap-summary {
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  background: var(--bg);
  border: 1px dashed var(--rule);
  border-radius: 4px;
  font-weight: 500;
  color: var(--ink-soft);
  list-style: none;
  font-size: 0.68rem;
}
.perception-gap-summary::-webkit-details-marker { display: none; }
.perception-gap-summary::before {
  content: '\25B8';
  display: inline-block;
  margin-right: 0.35rem;
  transition: transform 0.15s;
  color: var(--ink-muted);
  font-size: 0.8em;
}
.perception-gap[open] .perception-gap-summary::before { transform: rotate(90deg); }
.perception-gap-body { padding: 0.55rem 0.3rem 0.3rem; }
.perception-gap-lede { margin: 0 0 0.55rem; font-size: 0.72rem; line-height: 1.4; color: var(--ink-soft); }
.perception-gap-table { width: 100%; border-collapse: collapse; font-size: 0.7rem; }
.perception-gap-table th, .perception-gap-table td {
  padding: 0.28rem 0.4rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.perception-gap-table thead th {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
}
.perception-gap-worst { background: var(--flex-bg); }
.perception-gap-worst strong { color: var(--break-ink); }
.perception-gap-footnote {
  font-size: 0.6rem;
  color: var(--ink-muted);
  font-style: italic;
  margin: 0.45rem 0 0;
}

/* ---------- Stage 7a completeness caveat ---------- */
.completeness-caveat {
  margin-top: 0.1rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--hold-edge);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.completeness-caveat-label {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--hold-ink);
  opacity: 0.85;
}

.completeness-caveat-text {
  font-size: 0.76rem;
  line-height: 1.4;
  margin: 0;
  color: var(--ink);
}

/* ---------- Stage 7b rejection composition ---------- */
.escalation-reasons {
  margin: 0.2rem 0 0;
  padding-left: 1.15rem;
  font-size: 0.7rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- Stage 6 fork: proportional bar + AHT comparison ---------- */
.bp-c-fork {
  gap: 0.65rem;
  background: var(--bg-elev) !important;
}

.bp-fork-bar {
  display: flex;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.bp-fork-bar-segment {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 0.65rem;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

.bp-fork-bar-approve {
  background: var(--hold-ink);
}

.bp-fork-bar-reject {
  background: var(--break-ink);
}

.bp-fork-bar-num {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.bp-fork-bar-label {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.9;
  margin-top: 0.08rem;
}

/* AHT horizontal comparison */
.bp-aht-compare {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px dashed var(--rule);
}

.bp-aht-label {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-muted);
}

.bp-aht-row {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
}

.bp-aht-name {
  font-weight: 600;
  color: var(--ink);
}

.bp-aht-bar-track {
  height: 6px;
  background: var(--rule);
  border-radius: 999px;
  overflow: hidden;
}

.bp-aht-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.bp-aht-bar-fill-approve { background: var(--hold-ink); }
.bp-aht-bar-fill-reject  { background: var(--break-ink); }

.bp-aht-num {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}

.bp-aht-delta {
  font-size: 0.65rem;
  color: var(--ink-muted);
  font-style: italic;
  margin-top: 0.1rem;
}

/* ---------- Line of Visibility: designed band with inline state pills ---------- */
.bp-sep-visibility .bp-label {
  background: var(--bp-visibility-label);
  border-right: 1px solid var(--bp-visibility-edge);
}
.bp-sep-label-visibility .bp-sep-name { color: var(--bp-visibility-ink); }
.bp-sep-label-visibility .bp-sep-sub  { color: var(--bp-visibility-ink); opacity: 0.9; }

.bp-sep-band-visibility {
  background: var(--bp-visibility-band);
  border-top: 1.5px solid var(--bp-visibility-edge);
  border-bottom: 1.5px solid var(--bp-visibility-edge);
  min-height: 64px;
  color: var(--bp-visibility-ink);
  padding: 0.75rem 1.25rem;
  gap: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.bp-sep-band-glyph {
  flex-shrink: 0;
  color: var(--bp-visibility-ink);
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
}

.bp-sep-band-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bp-visibility-ink);
  flex-shrink: 0;
}

.bp-sep-band-states {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  font-size: 0.72rem;
  color: var(--bp-visibility-ink);
}

.inv-state {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: help;
  padding: 0.1rem 0;
}

.inv-state-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  border: 1.5px solid;
}
.inv-state-holds .inv-state-dot     { background: var(--hold-ink); border-color: var(--hold-ink); }
.inv-state-flexes .inv-state-dot    { background: var(--flex-ink); border-color: var(--flex-ink); }
.inv-state-breaks .inv-state-dot    { background: var(--break-ink); border-color: var(--break-ink); }
.inv-state-mitigated .inv-state-dot { background: transparent; border-color: var(--hold-ink); }

.inv-state-text {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.inv-state-sep {
  color: var(--bp-visibility-ink);
  opacity: 0.4;
}

.bp-sep-band-scope {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bp-visibility-ink);
  opacity: 0.7;
  white-space: nowrap;
  margin-left: auto;
}

/* Line of Internal Interaction: simple dashed separator */
.bp-sep-internal .bp-sep-band {
  min-height: 34px;
  padding: 0.45rem 1.25rem;
  color: var(--ink-muted);
  background: var(--bg);
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
  font-size: 0.72rem;
  display: flex;
  align-items: center;
}

.bp-sep-band-simple {
  font-size: 0.72rem;
  color: var(--ink-muted);
  font-style: italic;
}

/* ---------- Support Processes: minimal by design ---------- */
.bp-layer-support { opacity: 0.88; }
.bp-layer-support .bp-c { min-height: 72px; padding: 0.65rem 1rem; }
.bp-layer-support .bp-c-empty { min-height: 52px; padding: 0.45rem 1rem; opacity: 0.3; }
.bp-layer-support .bp-label { min-height: 72px; padding-top: 0.65rem; padding-bottom: 0.65rem; }
.bp-layer-support .bp-c-dash { font-size: 0.9rem; opacity: 0.5; }

/* ---------- Hover emphasis: whisper -> full volume, columns foreground ---------- */
/* Hovering any cell brings that whole stage column to full volume.
   Whisper elements anywhere in the hovered column shift from 0.5 -> 1. */
.blueprint[data-hover-stage="1"]  .bp-c[data-stage="1"]  .whisper,
.blueprint[data-hover-stage="2"]  .bp-c[data-stage="2"]  .whisper,
.blueprint[data-hover-stage="3"]  .bp-c[data-stage="3"]  .whisper,
.blueprint[data-hover-stage="4"]  .bp-c[data-stage="4"]  .whisper,
.blueprint[data-hover-stage="5"]  .bp-c[data-stage="5"]  .whisper,
.blueprint[data-hover-stage="6"]  .bp-c[data-stage="6"]  .whisper,
.blueprint[data-hover-stage="7a"] .bp-c[data-stage="7a"] .whisper,
.blueprint[data-hover-stage="7b"] .bp-c[data-stage="7b"] .whisper {
  opacity: 1;
}

/* Column accent on hover: subtle left+right inset borders */
.blueprint[data-hover-stage="1"]  .bp-c[data-stage="1"],
.blueprint[data-hover-stage="2"]  .bp-c[data-stage="2"],
.blueprint[data-hover-stage="3"]  .bp-c[data-stage="3"],
.blueprint[data-hover-stage="4"]  .bp-c[data-stage="4"],
.blueprint[data-hover-stage="5"]  .bp-c[data-stage="5"],
.blueprint[data-hover-stage="6"]  .bp-c[data-stage="6"],
.blueprint[data-hover-stage="7a"] .bp-c[data-stage="7a"],
.blueprint[data-hover-stage="7b"] .bp-c[data-stage="7b"] {
  box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent);
  background: var(--bg-elev);
}

.blueprint[data-hover-stage="7a"] .bp-c[data-stage="7a"] { background: var(--bp-approve-bg); }
.blueprint[data-hover-stage="7b"] .bp-c[data-stage="7b"] { background: var(--bp-reject-bg); }

/* Active stage header on hover */
.blueprint[data-hover-stage="1"]  .bp-stage-head[data-stage="1"],
.blueprint[data-hover-stage="2"]  .bp-stage-head[data-stage="2"],
.blueprint[data-hover-stage="3"]  .bp-stage-head[data-stage="3"],
.blueprint[data-hover-stage="4"]  .bp-stage-head[data-stage="4"],
.blueprint[data-hover-stage="5"]  .bp-stage-head[data-stage="5"],
.blueprint[data-hover-stage="6"]  .bp-stage-head[data-stage="6"],
.blueprint[data-hover-stage="7a"] .bp-stage-head[data-stage="7a"],
.blueprint[data-hover-stage="7b"] .bp-stage-head[data-stage="7b"] {
  box-shadow: inset 0 -3px 0 var(--accent);
}

/* ---------- Cross-layer bet highlighting (hover a chip -> highlight its stages) ---------- */
.blueprint[data-bet-highlight="1"] .bp-c[data-bet-ops~="1"],
.blueprint[data-bet-highlight="2"] .bp-c[data-bet-ops~="2"],
.blueprint[data-bet-highlight="3"] .bp-c[data-bet-ops~="3"] {
  box-shadow: inset 0 0 0 2px var(--accent);
  z-index: 2;
}

.blueprint[data-bet-highlight="1"] .bp-bet-chip[data-bet="1"],
.blueprint[data-bet-highlight="2"] .bp-bet-chip[data-bet="2"],
.blueprint[data-bet-highlight="3"] .bp-bet-chip[data-bet="3"] {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--accent);
  transform: translateY(-1px);
}

/* ---------- Scroll-triggered reveal ---------- */
.bp-wrap[data-revealed="false"] .bp-row,
.bp-wrap[data-revealed="false"] .bp-flow {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.bp-wrap[data-revealed="true"] .bp-row,
.bp-wrap[data-revealed="true"] .bp-flow {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.bp-wrap[data-revealed="true"] .bp-row:nth-child(2) { transition-delay: 0.00s; }
.bp-wrap[data-revealed="true"] .bp-flow            { transition-delay: 0.08s; }
.bp-wrap[data-revealed="true"] .bp-row:nth-child(4) { transition-delay: 0.15s; }
.bp-wrap[data-revealed="true"] .bp-row:nth-child(5) { transition-delay: 0.22s; }
.bp-wrap[data-revealed="true"] .bp-row:nth-child(6) { transition-delay: 0.30s; }
.bp-wrap[data-revealed="true"] .bp-row:nth-child(7) { transition-delay: 0.38s; }
.bp-wrap[data-revealed="true"] .bp-row:nth-child(8) { transition-delay: 0.46s; }
.bp-wrap[data-revealed="true"] .bp-row:nth-child(9) { transition-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
  .bp-wrap[data-revealed="false"] .bp-row,
  .bp-wrap[data-revealed="false"] .bp-flow {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- AC3 Lightbox ---------- */

.bp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.bp-lightbox[hidden] {
  display: none;
}

.bp-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.bp-lightbox-panel {
  position: relative;
  background: var(--bg-elev);
  color: var(--ink);
  border-radius: 10px;
  max-width: 880px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  padding: 2rem 2rem 1.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.bp-lightbox-close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.bp-lightbox-close:hover { background: var(--rule); color: var(--ink); }

.bp-lightbox-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

.bp-lightbox-placeholder {
  padding: 2rem;
  border: 1px dashed var(--rule);
  border-radius: 8px;
  text-align: center;
  color: var(--ink-soft);
}

.bp-lightbox-note {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-top: 0.75rem;
  line-height: 1.45;
}

/* ============================================================
   SECTION 4 -- Stress-test comparison (payload)
   ============================================================ */

.matrix-legend {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.state-glyph {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 2px;
}
.state-hold { background: var(--hold-ink); }
.state-flex { background: var(--flex-ink); }
.state-break { background: var(--break-ink); }

.legend-sep { color: var(--ink-muted); }
.legend-note { font-style: italic; color: var(--ink-muted); }

.matrix {
  display: grid;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elev);
}

.matrix-row {
  display: grid;
  grid-template-columns: 220px repeat(3, 1fr);
  border-bottom: 1px solid var(--rule);
}
.matrix-row:last-child { border-bottom: none; }

.matrix-header {
  background: var(--bg);
}

.matrix-corner {
  padding: 1rem;
}

.matrix-col-head {
  padding: 1rem;
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.col-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

.col-sub {
  font-size: 0.75rem;
  color: var(--ink-muted);
}

.matrix-row-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: 1.25rem 1rem;
  background: var(--bg);
  border: none;
  border-right: 1px solid var(--rule);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.matrix-row-head:hover { background: var(--rule); }

.row-num {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-weight: 600;
}

.row-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.row-expand-hint {
  font-size: 0.7rem;
  color: var(--ink-muted);
  font-style: italic;
}

.matrix-cell {
  padding: 1.25rem 1rem;
  border-left: 1px solid var(--rule);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.matrix-cell[data-state="hold"] {
  background: var(--hold-bg);
}
.matrix-cell[data-state="flex"] {
  background: var(--flex-bg);
}
.matrix-cell[data-state="break"] {
  background: var(--break-bg);
}

.cell-state-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  align-self: flex-start;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}
.matrix-cell[data-state="hold"] .cell-state-label {
  color: var(--hold-ink);
  background: var(--bg-elev);
  border: 1px solid var(--hold-edge);
}
.matrix-cell[data-state="flex"] .cell-state-label {
  color: var(--flex-ink);
  background: var(--bg-elev);
  border: 1px solid var(--flex-edge);
}
.matrix-cell[data-state="break"] .cell-state-label {
  color: var(--break-ink);
  background: var(--bg-elev);
  border: 1px solid var(--break-edge);
}

.cell-why {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.45;
}

.matrix-footnote, .matrix-reference {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 1.5rem 0 0;
  max-width: 72ch;
}

.matrix-reference {
  font-style: italic;
  color: var(--ink-muted);
}

/* ============================================================
   SECTION 5 -- Close (Takeaway)
   ============================================================ */

.close-thesis {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.35;
  max-width: 58ch;
  margin: 2rem 0 1.5rem;
  letter-spacing: -0.01em;
}

.close-handoff {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0 0 2.5rem;
}

.close-question {
  padding: 1.75rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
}

.close-question-lede {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.close-question-body {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* ============================================================
   Sidecar
   ============================================================ */

.sidecar {
  padding: var(--section-pad) 1.5rem;
  background: var(--bg-elev);
  border-top: 1px solid var(--rule);
}

.sidecar-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.sidecar-note {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0 0 2rem;
}

.sidecar-block {
  margin-bottom: 1.5rem;
  max-width: 72ch;
}

.sidecar-block h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
}

.sidecar-block p {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}

/* ---------- Footer ---------- */
.footer {
  padding: 2rem 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-muted);
  background: var(--bg);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .metric-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .metric-row-secondary { grid-template-columns: 1fr; }
  .bets-grid { grid-template-columns: 1fr; }
  /* Blueprint continues to scroll horizontally at narrow widths.
     min-width: fit-content on .bp-row handles the column intrinsic
     width; .blueprint's overflow-x: auto handles the scroll. */
  .bp-row {
    grid-template-columns: 160px repeat(8, minmax(200px, 1fr));
  }
  .matrix-row { grid-template-columns: 160px repeat(3, 1fr); }
  .section-title { font-size: 1.5rem; }
  .metric-num { font-size: 2.5rem; }
  .invisibility-states { grid-template-columns: 1fr 1fr; }
  .value-gradient-bands { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .invisibility-states { grid-template-columns: 1fr; }
  .value-gradient-bands { grid-template-columns: 1fr; }
  .bp-scroll-arrow { width: 40px; height: 40px; }
  .bp-scroll-left { left: 0.5rem; }
  .bp-scroll-right { right: 0.5rem; }
}

/* ============================================================
   FULL-PAGE POLISH PASS (cross-section consistency)
   Extends the Section 3 visual-composition philosophy to every
   section: designed data, visual anchors, one visual story per
   section, whisper/full-volume hierarchy, scroll-triggered reveal.
   ============================================================ */

/* ---------- Section rhythm: larger vertical padding, clearer breathing ---------- */
.section {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
  scroll-margin-top: 72px;
}

.section-inner {
  max-width: 1200px;
}

.section-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.section-job {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 1rem;
  letter-spacing: -0.005em;
}

.section-title {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 1.15rem;
  color: var(--ink);
}

.section-lede {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 3rem;
}

/* ============================================================
   SECTION 1 -- Problem hero
   ============================================================ */
.section-problem {
  padding-top: 6.5rem;
  padding-bottom: 6rem;
}

.problem-hero {
  margin-bottom: 4rem;
  max-width: 800px;
}

.problem-thesis {
  font-family: var(--font-display);
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem;
  color: var(--ink);
}

.problem-thesis-accent {
  color: var(--accent);
  font-weight: 700;
}

.problem-lede {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0;
}

/* Bet cards: redesigned as "pillars under load" */
.bets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 0;
}

.bet-card {
  padding: 1.5rem 1.35rem 1.4rem;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.bet-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  border-color: var(--accent);
}

.bet-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.1rem;
}

.bet-num {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  font-weight: 700;
}

/* Load indicator: a thin horizontal bar filled to show the bet at capacity */
.bet-load-indicator {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
  max-width: 90px;
}

.bet-load-bar-fill {
  display: block;
  height: 100%;
  width: var(--load, 100%);
  background: var(--accent);
  border-radius: 999px;
  transform-origin: left center;
}

.bet-card:hover .bet-load-bar-fill {
  animation: bet-load-pulse 1.4s ease-in-out infinite;
}

@keyframes bet-load-pulse {
  0%, 100% { opacity: 0.7; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.05); }
}

.bet-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.2;
  color: var(--ink);
}

.bet-why {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

.bet-flex {
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 0.25rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--rule);
}

/* ============================================================
   SECTION 2 -- Scale as designed data
   ============================================================ */
.section-scale {
  background: var(--bg-elev);
  padding-top: 5.5rem;
  padding-bottom: 5rem;
  padding-left: 0;
  padding-right: 0;
}

/* Match the Section 3 pattern: L/R padding lives on the inner
   wrapper, not the outer shell, so text content aligns identically
   across sections regardless of whether a child needs to bleed to
   the viewport edge. Without this, Section 2 content ends up 24px
   (1.5rem) to the LEFT of Section 3 content on viewports >1200px. */
.section-scale > .section-inner {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Hero: the 23.8% reduction as big type + comparison bars */
.scale-hero {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) 1.2fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
  align-items: center;
}

.scale-hero-metric {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.scale-hero-num {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.scale-hero-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* AHT comparison: two bars, control baseline then HITL reduced */
.aht-comparison {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.aht-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.aht-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.aht-row-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.aht-row-bar {
  position: relative;
  height: 14px;
  background: var(--bg);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.aht-row-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--ink-muted);
  opacity: 0.3;
  animation: aht-fill-in 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.aht-row-fill-accent {
  background: var(--accent);
  opacity: 0.9;
}

.aht-row-num {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.aht-row-delta {
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: 0.2rem;
}

@keyframes aht-fill-in {
  0%   { width: 0 !important; }
  100% { /* computed width retained */ }
}

/* Supporting metrics grid: three cards, each a designed visual */
.scale-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.scale-card {
  padding: 1.5rem 1.4rem 1.4rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
}

.scale-card-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
}

/* 7x multiplier viz: before -> after */
.scale-card-multiplier-visual {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0;
}

.multiplier-before,
.multiplier-after {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.multiplier-after {
  align-items: flex-end;
  text-align: right;
}

.multiplier-num {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.multiplier-unit {
  font-size: 0.95rem;
  font-weight: 600;
  margin-left: 0.1rem;
  opacity: 0.7;
}

.multiplier-before .multiplier-num { color: var(--whisper-ink); }
.multiplier-after  .multiplier-num { color: var(--accent); }

.multiplier-tag {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}

.multiplier-arrow {
  color: var(--accent);
  opacity: 0.7;
}

.scale-card-tag {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-top: 0.25rem;
}

.scale-card-split .scale-card-tag { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); }

/* 52/48 split bar */
.scale-card-split-visual {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.4rem 0 0.2rem;
}

/* Deprecated 52/48 split-bar and legend rules removed. The 52/48
   viz now reuses the unified .scale-ytd-split grid pattern with
   the .scale-split-visual wrapper. */

/* Volume card */
.scale-card-num {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  padding-top: 0.4rem;
}

.scale-card-label {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* ============================================================ */
/* YTD band: five months of operational scale through April 2026 */
/* Separated from the experiment block above with a hairline     */
/* rule and extra top margin. Reuses state tokens (--hold-ink /  */
/* --break-ink) so it visually composes with Section 4 stress    */
/* blocks. No count-up on the 760K headline: it's observational  */
/* scale, not a controlled-experiment hero.                      */
/* ============================================================ */
.scale-ytd {
  margin-top: 3rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.scale-ytd-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 60ch;
}

.scale-ytd-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.scale-ytd-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin: 0;
  flex-wrap: wrap;
}

.scale-ytd-num {
  font-size: 3.25rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
}

.scale-ytd-label {
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 1.15rem;
}

.scale-ytd-sub {
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0.15rem 0 0;
}

/* 34 / 53 / 13 proportional split. The headers, bar, and path cards */
/* all live in ONE CSS grid via subgrid-via-matching-template-columns */
/* so column edges line up perfectly across all three rows. A naive   */
/* flex approach with `flex: 34/53/13` sub-pixel-rounds independently */
/* per row and the edges drift.                                        */
.scale-ytd-split {
  display: grid;
  grid-template-columns: 34fr 53fr 13fr;
  column-gap: 4px;
  row-gap: 0.5rem;
}

/* Per-segment headers absorb the old dot-legend. Alignment does the  */
/* color mapping -- no colored dots needed.                            */
.scale-ytd-split-headers {
  display: contents;
}

.scale-ytd-split-header {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0;
  min-width: 0;
  align-self: end;
}

.scale-ytd-split-header-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scale-ytd-split-header-vol {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.scale-ytd-split-header-other .scale-ytd-split-header-name {
  font-weight: 500;
}

/* The bar itself spans the full grid row so its children hit the     */
/* same columns the headers hit above.                                 */
.scale-ytd-split-bar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: inherit;
  column-gap: inherit;
  height: 42px;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.scale-ytd-split-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: 4px;
}

.scale-ytd-split-seg-hold  { background: var(--hold-ink); }
.scale-ytd-split-seg-flex  { background: var(--flex-ink, #c08a2d); }
.scale-ytd-split-seg-other { background: var(--ink-muted); opacity: 0.55; }

/* Approve/reject variants for the inside-the-numbers 52/48 bar.     */
/* Rendered in the accent (blue) + neutral grey family so the viz    */
/* reads as experiment measurement, visually distinct from the       */
/* value-coded YTD outcome palette (green/amber/red) below.           */
.scale-ytd-split-seg-approve { background: var(--accent); }
.scale-ytd-split-seg-reject  { background: var(--ink-muted); }

.scale-ytd-split-num {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

/* Dark mode: pastel bar segments need dark text, not white, to     */
/* clear AA. Same pastel-disc-dark-glyph pattern used on bet chips. */
body[data-theme="dark"] .scale-ytd-split-seg { color: var(--bg); }

/* Path cards: third row of the same grid. Widths match the bar       */
/* segments automatically because they share grid-template-columns.    */
.scale-ytd-paths {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: inherit;
  column-gap: inherit;
  margin-top: 0.35rem;
}

.scale-ytd-path {
  padding: 1.15rem 1.15rem 1.1rem;
  border-radius: 4px;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  position: relative;
}

.scale-ytd-path-hold { background: color-mix(in srgb, var(--hold-ink) 10%, var(--bg)); }
.scale-ytd-path-flex { background: color-mix(in srgb, var(--flex-ink, #c08a2d) 10%, var(--bg)); }

body[data-theme="warm"] .scale-ytd-path-hold { background: color-mix(in srgb, var(--hold-ink) 13%, var(--bg)); }
body[data-theme="warm"] .scale-ytd-path-flex { background: color-mix(in srgb, var(--flex-ink, #c08a2d) 13%, var(--bg)); }
body[data-theme="dark"] .scale-ytd-path-hold { background: color-mix(in srgb, var(--hold-ink) 14%, var(--bg)); }
body[data-theme="dark"] .scale-ytd-path-flex { background: color-mix(in srgb, var(--flex-ink, #c08a2d) 14%, var(--bg)); }

.scale-ytd-path-spacer {
  /* Empty third grid cell. Keeps the two cards locked to the 34/53   */
  /* segment widths without needing any visual treatment.              */
}

.scale-ytd-path-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Inside-the-numbers 52/48 variant: same grid-based pattern as the   */
/* YTD bar but only two segments.                                      */
.scale-split-visual .scale-ytd-split {
  grid-template-columns: 52fr 48fr;
}

.scale-ytd-path-num {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.scale-ytd-path-hold .scale-ytd-path-num { color: var(--hold-ink); }
.scale-ytd-path-flex .scale-ytd-path-num { color: var(--flex-ink, #c08a2d); }

.scale-ytd-path-delta {
  font-size: 0.78rem;
  line-height: 1.5;
  max-width: 42ch;
}

.scale-ytd-footnote {
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 0.35rem 0 0;
  max-width: 100%;
  text-wrap: balance;
  color: var(--ink-soft);
}

.scale-ytd-footnote cite {
  font-style: normal;
  font-weight: 600;
}

/* Section bridge: the one-sentence transition between Part 2 and the  */
/* Journey. Typographer-first treatment:                                */
/*   - Confident serif roman (not italic at small size)                 */
/*   - Display-scale size to communicate narrative weight               */
/*   - Centered, generous vertical air, no decorative rules             */
/*   - text-wrap: balance so the two-line break lands naturally         */
/* Designed to feel like the beginning of the next chapter, not the    */
/* caption-sized whisper that was sitting between content and footnote. */
.thesis-thread {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.65rem);
  line-height: 1.35;
  color: var(--ink);
  text-align: center;
  max-width: 32ch;
  margin: 4.5rem auto 0.5rem;
  padding: 0;
  border: none;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.credibility-footnote {
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin: 0;
}

/* ============================================================
   SECTION 4 -- Evidence matrix as designed status cards
   ============================================================ */
.section-evidence { padding-top: 5.5rem; padding-bottom: 5.5rem; }

.matrix-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.matrix-legend {
  display: flex;
  gap: 1.25rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
}

.state-glyph {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px var(--bg);
}

.state-hold  { background: var(--hold-ink); }
.state-flex  { background: var(--flex-ink); }
.state-break { background: var(--break-ink); }

.matrix-provenance {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.68rem;
}

.matrix-provenance-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.provenance-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.provenance-dot-measured { background: var(--accent); }
.provenance-dot-analysis { background: var(--ink-muted); opacity: 0.6; }

.matrix {
  display: grid;
  gap: 0.75rem;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.matrix-row {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  gap: 0.75rem;
  border-bottom: none;
}

.matrix-header {
  background: transparent;
}

.matrix-corner {
  padding: 0;
  background: transparent;
}

.matrix-col-head {
  padding: 0.25rem 0 0.5rem;
  background: transparent;
  border-left: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.col-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.col-sub {
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

/* Row head: just a label, no button/expand */
.matrix-row-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: center;
  padding: 1rem 0.25rem 1rem 0;
  background: transparent;
  border: none;
  border-right: none;
  text-align: left;
  cursor: default;
}

.row-num {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  font-weight: 700;
}

.row-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.25;
}

.row-sub {
  font-size: 0.76rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* Cell: designed status card */
.matrix-cell {
  padding: 1.1rem 1.15rem 1rem;
  border-radius: 10px;
  background: var(--bg);
  border: 1.5px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 140px;
  position: relative;
  cursor: default;
  transition: transform 0.2s, box-shadow 0.2s;
}

.matrix-cell:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.matrix-cell[data-state="hold"]  {
  background: var(--hold-bg);
  border-color: var(--hold-edge);
}
.matrix-cell[data-state="flex"]  {
  background: var(--flex-bg);
  border-color: var(--flex-edge);
}
.matrix-cell[data-state="break"] {
  background: var(--break-bg);
  border-color: var(--break-edge);
}

/* Status badge: dot + label, top of each cell */
.cell-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.65rem 0.25rem 0.5rem;
  background: var(--bg-elev);
  border-radius: 999px;
  align-self: flex-start;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.cell-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.cell-status-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.matrix-cell[data-state="hold"]  .cell-status-dot   { background: var(--hold-ink); }
.matrix-cell[data-state="hold"]  .cell-status-label { color: var(--hold-ink); }
.matrix-cell[data-state="flex"]  .cell-status-dot   { background: var(--flex-ink); }
.matrix-cell[data-state="flex"]  .cell-status-label { color: var(--flex-ink); }
.matrix-cell[data-state="break"] .cell-status-dot   { background: var(--break-ink); }
.matrix-cell[data-state="break"] .cell-status-label { color: var(--break-ink); }

.cell-why {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

.cell-provenance {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-top: auto;
  padding-top: 0.4rem;
}

/* Matrix reference: visual AHT comparison, not prose */
.matrix-reference {
  margin-top: 2.5rem;
  padding: 1.5rem 1.6rem;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.matrix-reference-label {
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.matrix-reference-bars {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mref-row {
  display: grid;
  grid-template-columns: 120px 1fr 80px;
  gap: 1rem;
  align-items: center;
}

.mref-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.mref-track {
  height: 14px;
  background: var(--bg);
  border-radius: 7px;
  overflow: hidden;
}

.mref-fill {
  display: block;
  height: 100%;
  border-radius: 7px;
}

.mref-fill-approve { background: var(--hold-ink); opacity: 0.85; }
.mref-fill-reject  { background: var(--break-ink); opacity: 0.85; }

.mref-num {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mref-delta {
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-style: italic;
}

/* ============================================================
   SECTION 5 -- Takeaway as designed conclusion
   ============================================================ */
.section-takeaway {
  background: var(--accent-soft);
  padding-top: 6rem;
  padding-bottom: 6.5rem;
}

.takeaway-hero {
  margin-bottom: 3rem;
  max-width: 780px;
}

.takeaway-statement {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
  color: var(--ink);
}

.takeaway-statement-lede { color: var(--ink-soft); font-weight: 500; }
.takeaway-statement-accent { color: var(--accent); font-weight: 700; }

.takeaway-supporting {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: 52ch;
  margin: 0;
}

.takeaway-question {
  padding: 2rem 2rem 2.1rem;
  background: var(--bg-elev);
  border-radius: 12px;
  border: 1px solid var(--rule);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  max-width: 900px;
}

.takeaway-question-lede {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.65rem;
  font-weight: 700;
}

.takeaway-question-body {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 1.75rem;
}

.takeaway-bets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}

.takeaway-bet {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.8rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.takeaway-bet:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.takeaway-bet-num {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  font-weight: 700;
}

.takeaway-bet-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ============================================================
   Cross-section consistency
   ============================================================ */

/* Every section transitions smoothly to the next */
.section + .section {
  border-top: 1px solid var(--rule);
}

/* Scroll-triggered fade-in for non-blueprint sections */
.section-problem .problem-hero,
.section-problem .bets-grid,
.section-scale .scale-hero,
.section-scale .scale-grid,
.section-scale .thesis-thread,
.section-evidence .matrix,
.section-evidence .matrix-reference,
.section-takeaway .takeaway-hero,
.section-takeaway .takeaway-question {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.section-problem.is-in-view .problem-hero,
.section-problem.is-in-view .bets-grid,
.section-scale.is-in-view .scale-hero,
.section-scale.is-in-view .scale-grid,
.section-scale.is-in-view .thesis-thread,
.section-evidence.is-in-view .matrix,
.section-evidence.is-in-view .matrix-reference,
.section-takeaway.is-in-view .takeaway-hero,
.section-takeaway.is-in-view .takeaway-question {
  opacity: 1;
  transform: translateY(0);
}

.section-problem.is-in-view .bets-grid { transition-delay: 0.18s; }
.section-scale.is-in-view .scale-grid  { transition-delay: 0.15s; }
.section-scale.is-in-view .thesis-thread { transition-delay: 0.3s; }
.section-evidence.is-in-view .matrix-reference { transition-delay: 0.25s; }
.section-takeaway.is-in-view .takeaway-question { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .section-problem .problem-hero,
  .section-problem .bets-grid,
  .section-scale .scale-hero,
  .section-scale .scale-grid,
  .section-scale .thesis-thread,
  .section-evidence .matrix,
  .section-evidence .matrix-reference,
  .section-takeaway .takeaway-hero,
  .section-takeaway .takeaway-question {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Responsive polish
   ============================================================ */
@media (max-width: 960px) {
  .section-title { font-size: 1.85rem; }
  .problem-thesis { font-size: 2.35rem; }
  .takeaway-statement { font-size: 2.2rem; }
  .takeaway-question-body { font-size: 1.4rem; }
  .scale-ytd-paths { flex-direction: column; gap: 0.75rem; }
  .scale-ytd-paths > .scale-ytd-path { flex: 1 1 auto !important; }
  .scale-ytd-path-spacer { display: none; }
  .scale-ytd-split-headers { display: none; }
  .scale-ytd-title { font-size: 1.2rem; }
  .scale-ytd-num { font-size: 2.65rem; }
  .scale-ytd-label { font-size: 1rem; }

  .bets-grid { grid-template-columns: repeat(2, 1fr); }
  .scale-hero { grid-template-columns: 1fr; gap: 2rem; }
  .scale-hero-num { font-size: 3.75rem; }
  .scale-grid { grid-template-columns: 1fr; }
  .matrix-row { grid-template-columns: 1fr; gap: 0.6rem; }
  .matrix-row-head { padding: 0.25rem 0 0.5rem; }
  .takeaway-bets { grid-template-columns: repeat(2, 1fr); }
  .mref-row { grid-template-columns: 90px 1fr 70px; }
}

@media (max-width: 600px) {
  .bets-grid { grid-template-columns: 1fr; }
  .takeaway-bets { grid-template-columns: 1fr; }
  .problem-thesis { font-size: 1.9rem; }
  .scale-hero-num { font-size: 3rem; }
}


/* ============================================================
   MASTER POLISH LAYER  (v0.2 design revision, May 7 2026)
   Supersedes prior rules by cascade order.
   Philosophy:
   - Typographic hierarchy, not containers.
   - Whispers as color tokens (not opacity) so AA contrast holds.
   - One designed visual moment per section.
   - Consistent DNA across bets, metrics, chips, quotes, icons.
   - Sticky stage header using frosted backdrop.
   ============================================================ */

:root {
  /* Whisper ink: muted-but-legible label color. Use instead of opacity.
     Meets WCAG AA body (4.5:1) on --bg in every theme. */
  --whisper-ink: #6a6a6a;
  --whisper-strong: #4a4a4a;

  /* Subtle surface step for sections (pacing) */
  --bg-step: #f4f3ef;

  /* Sticky header backdrop */
  --sticky-bg: rgba(255, 255, 255, 0.82);
  --sticky-border: rgba(26, 26, 26, 0.08);

  /* Refined rule color for hairlines */
  --hairline: rgba(26, 26, 26, 0.08);

  /* Focus ring: solid two-stop ring (spacer in bg, then accent).
     Reads as a deliberate outline rather than a hazy halo, and clears
     WCAG 1.4.11 (3:1 non-text) because --accent is >=5:1 on --bg in
     every theme. */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

body[data-theme="warm"] {
  --whisper-ink: #6e655a;
  --whisper-strong: #50473c;
  --bg-step: #efe8dc;
  --sticky-bg: rgba(253, 250, 244, 0.82);
  --sticky-border: rgba(42, 31, 20, 0.10);
  --hairline: rgba(42, 31, 20, 0.09);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

body[data-theme="dark"] {
  --whisper-ink: #a8a6a0;
  --whisper-strong: #c8c6c0;
  --bg-step: #1a1c22;
  --sticky-bg: rgba(20, 22, 26, 0.82);
  --sticky-border: rgba(240, 238, 232, 0.10);
  --hairline: rgba(240, 238, 232, 0.10);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* ---------- Whisper: replace opacity with color so AA holds ---------- */
.whisper {
  opacity: 1;
  color: var(--whisper-ink);
  font-weight: 500;
  transition: color 0.2s ease;
}

/* When a parent container cascades a specific color (e.g. Line of
   Visibility band, reject badge, eyebrow labels), preserve it. */
.bp-sep-band-visibility .whisper,
.bp-sep-band-visibility .bp-sep-band-scope {
  color: var(--bp-visibility-ink);
  opacity: 0.92;
}

/* Whisper comes to full volume on hover within its stage column */
.blueprint[data-hover-stage="1"]  .bp-c[data-stage="1"]  .whisper,
.blueprint[data-hover-stage="2"]  .bp-c[data-stage="2"]  .whisper,
.blueprint[data-hover-stage="3"]  .bp-c[data-stage="3"]  .whisper,
.blueprint[data-hover-stage="4"]  .bp-c[data-stage="4"]  .whisper,
.blueprint[data-hover-stage="5"]  .bp-c[data-stage="5"]  .whisper,
.blueprint[data-hover-stage="6"]  .bp-c[data-stage="6"]  .whisper,
.blueprint[data-hover-stage="7a"] .bp-c[data-stage="7a"] .whisper,
.blueprint[data-hover-stage="7b"] .bp-c[data-stage="7b"] .whisper {
  color: var(--whisper-strong);
  opacity: 1;
}

/* ---------- Universal focus ring (AA-visible, designed to match) ---------- */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 3px;
}

.bp-c:focus-visible,
.bp-stage-head:focus-visible,
.matrix-cell:focus-visible,
.takeaway-bet:focus-visible,
.bet-card:focus-visible {
  box-shadow: var(--focus-ring);
}

a:focus-visible {
  border-radius: 2px;
}

/* ---------- Top bar: refined mark + title block ---------- */
.top-bar {
  padding: 0.9rem 1.75rem;
  background: var(--sticky-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.top-bar-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
}

body[data-theme="dark"] .top-bar-mark { color: var(--bg); }

.top-bar-title { display: flex; flex-direction: column; line-height: 1.15; }
.top-bar-title h1 { font-size: 0.98rem; letter-spacing: -0.005em; }
.top-bar .subtitle {
  font-size: 0.72rem;
  color: var(--whisper-ink);
  margin-top: 1px;
  letter-spacing: 0.01em;
}

.nav-link {
  font-size: 0.82rem;
  letter-spacing: 0.005em;
  color: var(--whisper-ink);
  transition: color 0.18s;
}
.nav-link:hover { color: var(--ink); }

/* ---------- Section rhythm: designed tempo dense/quiet alternation ---------- */
.section {
  border-bottom: none;
}
.section + .section {
  border-top: 1px solid var(--hairline);
}

/* ---------- Section 1: hero thesis + bets as typographic pillars ---------- */

.bets-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.bet-card {
  padding: 1.5rem 1.4rem 1.35rem;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.bet-card:hover,
.bet-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 10px 30px -15px rgba(42, 77, 143, 0.35);
  transform: translateY(-2px);
}

.bet-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.bet-num {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--whisper-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bet-icon {
  color: var(--accent);
  opacity: 0.8;
  transition: opacity 0.25s;
}
.bet-card:hover .bet-icon,
.bet-card:focus-within .bet-icon { opacity: 1; }

.bet-name {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}

.bet-why {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0.25rem 0 0;
}

.bet-flex {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--whisper-ink);
  font-style: italic;
  margin: 0.35rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hairline);
}

/* ---------- Section 2: scale metrics as designed compositions ---------- */

.section-scale { background: var(--bg-elev); }

.scale-hero-num {
  font-size: 5.25rem;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01", "tnum";
}

.scale-hero-label {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  max-width: 16ch;
}

.scale-card {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 1.5rem 1.4rem 1.35rem;
}

.scale-card-kicker {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: var(--whisper-ink);
  font-weight: 700;
  text-transform: uppercase;
}

.multiplier-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Section bridge: styled to match the existing -statement pattern   */
/* family (.problem-thesis in Part 1, .takeaway-statement in Part 5) */
/* so closers across the page share DNA. Display serif, weight-500   */
/* lede span + weight-700 accent span, left-aligned to match section */
/* content. Base size targets "section capstone" -- smaller than a   */
/* section title, larger than a transition. The .scale-ytd-bridge    */
/* modifier below drops it to internal-bridge scale.                  */
/* Every property declared explicitly to beat legacy cascade.         */
.thesis-thread {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 1.35rem + 0.9vw, 1.95rem);
  line-height: 1.2;
  text-align: left;
  margin: 5rem 0 0;
  max-width: 54ch;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
  padding: 0;
  border: none;
  font-style: normal;
  font-weight: 500;
}

.thesis-thread-lede {
  color: var(--ink-soft);
  font-weight: 500;
}

.thesis-thread-accent {
  color: var(--ink);
  font-weight: 700;
}

/* Internal bridge: same alignment and DNA as the exit capstone but   */
/* smaller and with less vertical air. Size + spacing carry the       */
/* hierarchy (subordinate transition vs section close).                */
.scale-ytd-bridge {
  font-size: clamp(1.2rem, 1rem + 0.5vw, 1.4rem);
  margin: 3rem 0 2.25rem;
}

.credibility-footnote {
  font-size: 0.76rem;
  color: var(--whisper-ink);
  max-width: none;
  margin: 2rem 0 0;
  padding-top: 1rem;
  line-height: 1.55;
  border-top: 1px solid var(--hairline);
}

/* ---------- Section 3: tight hero, flush legend, typographic asides ---------- */

.section-journey { background: var(--bg); }

.section-journey > .section-inner {
  padding-bottom: 0;
}

/* Tight section hero -- cut the 2.5rem section-lede bottom margin. */
.section-journey .section-title {
  margin-bottom: 0.85rem;
}

.section-journey .section-lede {
  margin-bottom: 2rem;
  max-width: 58ch;
}

/* Framing insight: pull-quote, no box. */
.framing-insight {
  margin: 1.75rem 0 2rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  max-width: 68ch;
  padding-left: 1.15rem;
  border-left: 2px solid var(--accent);
}

.framing-insight-text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.framing-insight-lede {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-right: 0.35rem;
}

.framing-insight-citation {
  font-size: 0.72rem;
  color: var(--whisper-ink);
  margin: 0;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* Legend: small-caps horizontal, flush to blueprint top edge. */
.blueprint-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.35rem;
  margin: 0 0 0.65rem;
  padding: 0 1.5rem 0;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--whisper-ink);
  border-top: none;
}

.bp-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1;
}

.bp-legend-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: none;
  background: var(--whisper-ink);
  opacity: 0.7;
}

.bp-legend-dot-customer   { background: #9a8ec7; opacity: 0.85; }
.bp-legend-dot-frontstage { background: #7a99c9; opacity: 0.85; }
.bp-legend-dot-visibility { background: var(--bp-visibility-edge); opacity: 1; }
.bp-legend-dot-backstage  { background: #7a7a8a; opacity: 0.85; }
.bp-legend-dot-support    { background: var(--whisper-ink); opacity: 0.55; }

/* ---------- Sticky stage header ---------- */

.bp-sticky-header {
  position: fixed;
  top: 58px;
  left: 0;
  right: 0;
  z-index: 15;
  background: var(--sticky-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.bp-sticky-header.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.bp-sticky-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  max-width: 100%;
  overflow: hidden;
}

.bp-sticky-label {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.25rem;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--whisper-ink);
  border-right: 1px solid var(--hairline);
  flex-shrink: 0;
  min-width: 160px;
}

.bp-sticky-stages {
  display: flex;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.bp-sticky-stages::-webkit-scrollbar { display: none; }

.bp-sticky-stage {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  font: inherit;
  background: transparent;
  border: none;
  border-right: 1px solid var(--hairline);
  cursor: pointer;
  color: var(--ink-soft);
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 44px;
}

.bp-sticky-stage:last-child { border-right: none; }

.bp-sticky-stage:hover { background: rgba(42, 77, 143, 0.06); color: var(--ink); }
.bp-sticky-stage.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.bp-sticky-stage.is-active .bp-sticky-stage-num { color: var(--accent); }

.bp-sticky-stage-num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--whisper-ink);
  font-variant-numeric: tabular-nums;
  min-width: 1.5ch;
}

.bp-sticky-stage-name {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ---------- Blueprint container polish ---------- */

.blueprint {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.02), 0 14px 40px -20px rgba(26, 26, 26, 0.12);
  background: var(--bg-elev);
}

body[data-theme="dark"] .blueprint {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 18px 44px -18px rgba(0, 0, 0, 0.55);
}

/* Label column refinements */
.bp-label {
  padding: 1rem 1.1rem;
  gap: 0.3rem;
}

.bp-lbl-icon {
  display: inline-flex;
  align-items: center;
  color: var(--whisper-ink);
  margin-bottom: 0.2rem;
  opacity: 0.75;
}

.bp-lbl-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.25;
}

.bp-lbl-sub {
  font-size: 0.68rem;
  letter-spacing: 0.015em;
  line-height: 1.4;
}

/* ---------- Stage 5 hero treatment ---------- */

/* Widen stage 5 proportionally; neighbors shrink slightly.
   Use CSS grid named tracks by overriding the bp-row template at full width. */
.bp-row {
  grid-template-columns:
    200px                         /* label */
    minmax(180px, 0.85fr)         /* 1 */
    minmax(180px, 0.85fr)         /* 2 */
    minmax(180px, 0.85fr)         /* 3 */
    minmax(220px, 1fr)            /* 4 */
    minmax(260px, 1.25fr)         /* 5 (hero) */
    minmax(220px, 1fr)            /* 6 */
    minmax(220px, 1fr)            /* 7a */
    minmax(220px, 1fr);           /* 7b */
}

.bp-flow {
  grid-template-columns: 200px 1fr;
}

/* Stage 5 pivot -- subtle elevation + vertical accent spine. */
.bp-stage-head-pivot {
  background: var(--accent-soft);
  box-shadow: inset 0 -3px 0 var(--accent);
  position: relative;
}

.bp-stage-head-pivot::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 3px;
  background: var(--accent);
  opacity: 0.25;
  border-radius: 0 2px 2px 0;
}

/* Stage 5 backstage vertical accent continues down the column.
   Use fractional tint lift so the hero column reads elevated. */
.blueprint .bp-c[data-stage="5"]:not(.bp-c-empty) {
  background: linear-gradient(to right, rgba(42, 77, 143, 0.035), transparent 12%, transparent 88%, rgba(42, 77, 143, 0.035));
}
body[data-theme="dark"] .blueprint .bp-c[data-stage="5"]:not(.bp-c-empty) {
  background: linear-gradient(to right, rgba(140, 176, 255, 0.06), transparent 12%, transparent 88%, rgba(140, 176, 255, 0.06));
}

/* ---------- Stage header refinements ---------- */

.bp-stage-head {
  padding: 1rem 1rem 0.9rem;
  gap: 0.3rem;
  position: relative;
}

.bp-stage-head-icon-holder {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.bp-stage-icon {
  display: inline-flex;
  align-items: center;
  color: var(--whisper-ink);
  opacity: 0.7;
  transition: color 0.2s, opacity 0.2s;
}

.bp-stage-head:hover .bp-stage-icon,
.bp-stage-head:focus-visible .bp-stage-icon { opacity: 1; color: var(--accent); }

.bp-stage-head-pivot .bp-stage-icon { color: var(--accent); opacity: 0.9; }
.bp-stage-head-approve .bp-stage-icon { color: var(--hold-ink); opacity: 0.9; }
.bp-stage-head-reject .bp-stage-icon { color: var(--break-ink); opacity: 0.9; }

.bp-stage-num {
  width: 28px;
  height: 28px;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  order: 0;
}

.bp-stage-name {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
}

.bp-stage-narr {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  font-style: italic;
  color: var(--whisper-ink);
  margin-top: 0.15rem;
}

/* ---------- Empty cell: soft dot instead of dash ---------- */
.bp-c-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--whisper-ink);
  opacity: 0.3;
  margin: 0.5rem 0 0;
}

body[data-theme="dark"] .bp-c-dot { opacity: 0.45; }

.bp-c-empty {
  opacity: 1;
  background: transparent !important;
}

/* ---------- Frontstage screenshot thumbnails ---------- */

.bp-thumb {
  margin-top: auto;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-self: flex-start;
}

.bp-thumb-frame {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 72px;
  height: 46px;
  padding: 6px 7px;
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(42, 77, 143, 0.06) 0%, rgba(42, 77, 143, 0.02) 100%),
    var(--bg);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 0 0 2px var(--bg-elev), 0 1px 2px rgba(26, 26, 26, 0.05);
  color: var(--whisper-ink);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.bp-thumb-frame::before {
  /* device chrome: a thin top bar line */
  content: '';
  position: absolute;
  top: 6px;
  left: 7px;
  right: 7px;
  height: 2px;
  border-radius: 1px;
  background: var(--hairline);
}

.bp-thumb:hover .bp-thumb-frame,
.bp-thumb:focus-visible .bp-thumb-frame {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 2px var(--bg-elev), 0 4px 10px rgba(42, 77, 143, 0.18);
}

.bp-thumb-approve .bp-thumb-frame {
  background:
    linear-gradient(135deg, rgba(31, 95, 63, 0.10) 0%, rgba(31, 95, 63, 0.02) 100%),
    var(--bg);
}
.bp-thumb-reject .bp-thumb-frame {
  background:
    linear-gradient(135deg, rgba(138, 42, 42, 0.10) 0%, rgba(138, 42, 42, 0.02) 100%),
    var(--bg);
}

.bp-thumb-label { position: relative; z-index: 1; color: inherit; opacity: 1; }

/* ---------- Design implication (post-blueprint): pull-quote, not box ---------- */
.design-implication {
  margin: 2.25rem 0 0.5rem;
  padding: 0 0 0 1.15rem;
  background: transparent;
  border: none;
  border-radius: 0;
  border-left: 2px solid var(--break-ink);
  max-width: 68ch;
  position: relative;
}

.design-implication::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--break-ink);
}

.design-implication-text {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.design-implication-lede {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-right: 0.35rem;
}

.design-implication-citation {
  font-size: 0.72rem;
  color: var(--whisper-ink);
  margin: 0;
  font-style: italic;
}

.stage-footnote {
  font-size: 0.78rem;
  color: var(--whisper-ink);
  margin: 1.5rem 0 0;
  max-width: 68ch;
}

/* ---------- Backstage Stage 5 dense cell refinement ---------- */
.bp-c-stage5 {
  box-shadow: inset 3px 0 0 var(--accent);
  background: var(--bg-elev) !important;
}

.bp-timer-num { color: var(--accent); font-variant-numeric: tabular-nums; }
.bp-has-list li,
.bp-lacks-list li { font-size: 0.72rem; }

.bp-has-label { color: var(--hold-ink); }
.bp-lacks-label { color: var(--break-ink); }

/* ---------- Bet chip refinement ---------- */
.bp-bet-chip {
  font-size: 0.65rem;
  padding: 0.22rem 0.58rem;
  border-radius: 999px;
  letter-spacing: 0.03em;
  background: transparent;
  font-weight: 600;
  opacity: 1;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.bp-bet-chip:hover,
.bp-bet-chip:focus-visible {
  background: var(--bg-elev);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(26, 26, 26, 0.08);
}

/* ---------- Line of Visibility band refinement ---------- */
.bp-sep-band-visibility {
  padding: 0.9rem 1.35rem;
  min-height: 62px;
}

.bp-sep-band-title {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.bp-sep-band-states {
  font-size: 0.74rem;
}

.inv-state-text { font-weight: 600; }
.inv-state-sep { color: var(--bp-visibility-ink); opacity: 0.35; }

/* ---------- Section 4 refinement ---------- */

.section-evidence { background: var(--bg); padding-top: 5.5rem; padding-bottom: 5.5rem; }

.matrix { gap: 0.9rem; }

.matrix-row {
  grid-template-columns: 220px repeat(3, 1fr);
  gap: 0.9rem;
}

.row-label { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.015em; }
.row-num { letter-spacing: 0.18em; font-weight: 700; }
.row-sub { font-size: 0.75rem; color: var(--whisper-ink); font-style: italic; }

.matrix-cell {
  padding: 1.15rem 1.2rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  min-height: 148px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  gap: 0.6rem;
}

.matrix-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(26, 26, 26, 0.18);
}

.matrix-cell[data-state="hold"]  { border-color: var(--hold-edge); background: var(--hold-bg); }
.matrix-cell[data-state="flex"]  { border-color: var(--flex-edge); background: var(--flex-bg); }
.matrix-cell[data-state="break"] {
  border-color: var(--break-edge);
  background: var(--break-bg);
  box-shadow: 0 2px 0 0 var(--break-ink), 0 10px 22px -14px rgba(138, 42, 42, 0.4);
}
.matrix-cell[data-state="break"]:hover {
  box-shadow: 0 2px 0 0 var(--break-ink), 0 12px 26px -12px rgba(138, 42, 42, 0.5);
  transform: translateY(-2px);
}

body[data-theme="dark"] .matrix-cell[data-state="break"] {
  box-shadow: 0 2px 0 0 var(--break-ink), 0 12px 24px -14px rgba(0, 0, 0, 0.6);
}

.cell-status-badge {
  padding: 0.2rem 0.7rem 0.2rem 0.55rem;
  background: var(--bg-elev);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
}

.cell-status-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.cell-why {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}

.matrix-cell[data-state="break"] .cell-why {
  font-weight: 600;
}

.cell-provenance {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--whisper-ink);
  font-weight: 700;
  margin-top: auto;
  padding-top: 0.45rem;
  text-transform: uppercase;
}

.matrix-legend { font-size: 0.78rem; gap: 1.35rem; }
.legend-item { font-weight: 600; color: var(--ink-soft); }

.state-glyph {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 2px var(--bg);
}

.matrix-provenance { font-size: 0.66rem; color: var(--whisper-ink); }

.matrix-reference {
  margin-top: 2.5rem;
  padding: 1.6rem 1.75rem 1.5rem;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

.matrix-reference-label {
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.mref-num, .mref-name { font-variant-numeric: tabular-nums; }
.mref-delta { color: var(--whisper-ink); }

/* ---------- Section 5: typographic, flat, spacious ---------- */

.section-takeaway {
  background: var(--bg-step);
  padding-top: 7rem;
  padding-bottom: 7.5rem;
}

body[data-theme="dark"] .section-takeaway { background: var(--bg-step); }

.takeaway-hero {
  margin-bottom: 3.5rem;
  max-width: 780px;
}

.takeaway-statement {
  font-size: 3.1rem;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0 0 1.25rem;
}

.takeaway-statement-lede { color: var(--ink-soft); font-weight: 500; }
.takeaway-statement-accent { color: var(--accent); font-weight: 700; }

.takeaway-supporting {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: 52ch;
  margin: 0;
}

/* Takeaway question -- flatten. No card inside a card. */
.takeaway-question {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  max-width: 900px;
  margin-top: 1.75rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--hairline);
}

.takeaway-question-lede {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.7rem;
  font-weight: 700;
}

.takeaway-question-body {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 2rem;
  max-width: 24ch;
}

.takeaway-bets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1.25rem;
}

.takeaway-bet {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.9rem 0.5rem 0;
  background: transparent;
  border: none;
  border-radius: 0;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.2s, transform 0.2s;
}

.takeaway-bet + .takeaway-bet {
  border-left: 1px solid var(--hairline);
  padding-left: 1rem;
}

.takeaway-bet:hover,
.takeaway-bet:focus-visible {
  transform: none;
  box-shadow: none;
  color: var(--accent);
}

.takeaway-bet:hover .takeaway-bet-name,
.takeaway-bet:focus-visible .takeaway-bet-name { color: var(--accent); }

.takeaway-bet-num {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--whisper-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.takeaway-bet-name {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
  transition: color 0.2s;
}

/* ---------- Lightbox polish (thumbnail + AC3) ---------- */

.bp-lightbox-panel {
  border-radius: 14px;
  padding: 2rem 2rem 1.75rem;
  border: 1px solid var(--hairline);
  background: var(--bg-elev);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35);
}

.bp-lightbox-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.35rem;
}

.bp-lightbox-sub {
  font-size: 0.82rem;
  color: var(--whisper-ink);
  margin: 0 0 1.25rem;
}

.bp-lightbox-screen {
  margin-bottom: 1rem;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(42, 77, 143, 0.08) 0%, rgba(42, 77, 143, 0.02) 100%),
    var(--bg);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--whisper-ink);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  position: relative;
}

.bp-lightbox-screen::before {
  content: 'Screenshot placeholder';
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

.bp-lightbox-note {
  font-size: 0.8rem;
  color: var(--whisper-ink);
  line-height: 1.5;
  margin: 0;
}

/* ---------- Sidecar polish ---------- */
.sidecar { padding-top: 5rem; padding-bottom: 5rem; }
.sidecar-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.sidecar-block h3 { font-size: 0.92rem; letter-spacing: -0.005em; font-weight: 700; }
.sidecar-block p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; }
.sidecar-block p + p { margin-top: 0.75rem; }

/* ---------- Footer polish ---------- */
.footer {
  border-top: 1px solid var(--hairline);
  color: var(--whisper-ink);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

/* ---------- Sticky scroll arrows: muted when available ---------- */
.bp-scroll-arrow {
  border: 1px solid var(--hairline);
  box-shadow: 0 4px 14px -4px rgba(26, 26, 26, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: var(--sticky-bg);
}

.bp-scroll-arrow:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg-elev);
}

/* ---------- Problem hero polish ---------- */
.section-problem { padding-top: 7rem; padding-bottom: 6.5rem; }

.problem-thesis {
  font-size: 3.4rem;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.problem-lede {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* ---------- Section lede typography harmonization ---------- */
.section-lede { font-size: 1.08rem; line-height: 1.6; max-width: 62ch; color: var(--ink-soft); }
.section-title { font-size: 2.15rem; letter-spacing: -0.025em; }
.section-job {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  font-style: italic;
  color: var(--whisper-ink);
}

.section-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--whisper-ink);
  font-weight: 700;
}

/* ---------- Part label: shared DNA with CS Help Blueprint ----- */
/* 12px uppercase kicker above each section title, with hairline */
/* rule continuing to the right. Visual system-level consistency */
/* across any artifact built on the journey-map-kit.             */
/* --------------------------------------------------------------*/
.section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 0.85rem;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
  max-width: 240px;
}

/* Section-1 hero: label sits above thesis, no trailing rule      */
/* (thesis is display-typography; a ruled kicker visually clashes */
/* with the open-air ambient hero backdrop).                      */
.problem-hero .section-label {
  margin-bottom: 1.25rem;
}
.problem-hero .section-label::after {
  display: none;
}

/* Takeaway: label sits above the statement; match Part 1 no-rule */
.section-takeaway .section-label {
  margin-bottom: 1.5rem;
}
.section-takeaway .section-label::after {
  display: none;
}

/* ---------- Reduced motion: full sweep ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .bp-sticky-header { transition: none; }
  .bet-card:hover { transform: none; }
  .matrix-cell:hover { transform: none; }
  .bp-thumb:hover .bp-thumb-frame { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .bets-grid { grid-template-columns: repeat(2, 1fr); }
  .takeaway-bets { grid-template-columns: repeat(2, 1fr); }
  .takeaway-bet + .takeaway-bet { border-left: none; padding-left: 0; }
  .takeaway-statement { font-size: 2.4rem; }
  .problem-thesis { font-size: 2.3rem; }
  .scale-hero-num { font-size: 3.8rem; }
  .bp-sticky-label { display: none; }
  .bp-sticky-header { top: 56px; }
}

@media (max-width: 600px) {
  .bets-grid { grid-template-columns: 1fr; }
  .takeaway-bets { grid-template-columns: 1fr; }
  .problem-thesis { font-size: 1.9rem; }
  .takeaway-statement { font-size: 1.85rem; }
  .takeaway-question-body { font-size: 1.35rem; }
  .bp-sticky-header { top: 52px; }
}

/* ---------- Accent in warm/dark themes for bet icon + timer ---------- */
body[data-theme="warm"] .bet-icon { color: var(--accent); }
body[data-theme="warm"] .scale-hero-num { color: var(--accent); }
body[data-theme="warm"] .top-bar-mark { background: var(--accent); color: #fdfaf4; }

body[data-theme="dark"] .problem-thesis-accent,
body[data-theme="dark"] .takeaway-statement-accent { color: var(--accent); }
body[data-theme="dark"] .bet-icon { color: var(--accent); }
body[data-theme="dark"] .bp-timer-num { color: var(--accent); }

/* ---------- AA contrast adjustments for special surfaces ---------- */

/* In warm theme, the Line of Visibility band ink on the band bg must clear AA.
   --bp-visibility-ink (#5a3a0a) on --bp-visibility-band (#fbe9c6) = ~7.8:1. OK. */

/* Dark-theme whisper over dark cells */
body[data-theme="dark"] .bp-c .whisper { color: var(--whisper-ink); }
body[data-theme="dark"] .whisper { color: var(--whisper-ink); }

/* ---------- Misc content polish ---------- */

.bp-aht-label { color: var(--whisper-ink); }
.bp-aht-delta { color: var(--whisper-ink); }
.anxiety-arc-label-state { color: var(--whisper-ink); opacity: 1; }
.perception-gap-summary { color: var(--ink-soft); }
.perception-gap-footnote { color: var(--whisper-ink); }
.anxiety-arc-citation { color: var(--whisper-ink); }
.completeness-caveat-label { color: var(--hold-ink); opacity: 1; }

/* Sidecar code tag */
.sidecar code {
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 0.82em;
  padding: 0.1em 0.35em;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  color: var(--ink);
}


/* ---------- Stage head layout: num + icon on same baseline row ---------- */
.bp-stage-head {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 0.55rem;
  row-gap: 0.25rem;
  align-items: center;
}

.bp-stage-head .bp-stage-num {
  grid-column: 1;
  grid-row: 1;
}

.bp-stage-head .bp-stage-icon {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.bp-stage-head .bp-stage-name {
  grid-column: 1 / -1;
  grid-row: 2;
}

.bp-stage-head .bp-stage-narr {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 0;
}

/* Extend grid to three rows for narr */
.bp-stage-head { grid-template-rows: auto auto auto; }


/* ============================================================
   v0.3 DENSITY + CHOREOGRAPHY REVISION  (May 7, 2026)
   Supersedes prior rules.
   Rules:
   - No meta eyebrows. No "section jobs". Title does the work.
   - Whisper = full-volume muted ink. No opacity trick.
   - Interaction vocabulary = 3 behaviors. Everything else off.
   - Section 1 fits in single viewport.
   - Section 5 is a punchy closer, not a landing zone.
   - Sources collapsed by default at the very bottom.
   ============================================================ */

/* ---------- Global: kill choreography ---------- */

/* Whisper is now just a muted body color. No hover reveal. */
.whisper {
  opacity: 1 !important;
  color: var(--whisper-ink);
  font-weight: 500;
}

/* All whisper-column hover foregrounding is off. Content is
   legible at resting state; hover doesn't reveal content. */
.blueprint[data-hover-stage] .bp-c .whisper,
.blueprint[data-hover-stage] .bp-c[data-stage] {
  box-shadow: none !important;
  background: inherit;
}

.blueprint[data-hover-stage] .bp-stage-head { box-shadow: none; }

/* Kill all section scroll-reveal transitions. Page is static.
   Bet chip cross-highlight remains. Sticky header remains. Thumb
   lightbox remains. Nothing else. */
.section-problem .problem-hero,
.section-problem .bets-grid,
.section-problem .bet-row,
.section-scale .scale-hero,
.section-scale .scale-grid,
.section-scale .thesis-thread,
.section-evidence .matrix,
.section-evidence .matrix-reference,
.section-takeaway .takeaway-hero,
.section-takeaway .takeaway-question,
.section-problem.is-in-view .problem-hero,
.section-problem.is-in-view .bets-grid,
.section-problem.is-in-view .bet-row,
.section-scale.is-in-view .scale-hero,
.section-scale.is-in-view .scale-grid,
.section-scale.is-in-view .thesis-thread,
.section-evidence.is-in-view .matrix,
.section-evidence.is-in-view .matrix-reference,
.section-takeaway.is-in-view .takeaway-hero,
.section-takeaway.is-in-view .takeaway-question {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* No count-up. Values render at final value instantly. */
[data-countup] { transition: none; }

/* Blueprint row scroll-reveal off. */
.bp-wrap[data-revealed="false"] .bp-row,
.bp-wrap[data-revealed="false"] .bp-flow,
.bp-wrap[data-revealed="true"] .bp-row,
.bp-wrap[data-revealed="true"] .bp-flow {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* AHT fill-in animation off. */
.aht-row-fill { animation: none !important; }
.bet-card-head .bet-load-bar-fill { animation: none !important; }
.bet-load-bar-fill { animation: none !important; }

/* Bet card hover transform off (no animation on element state). */
.bet-card:hover,
.bet-card:focus-within {
  transform: none;
}

.matrix-cell:hover { transform: none; }
.takeaway-bet:hover, .takeaway-bet:focus-visible { transform: none; }
.bp-thumb:hover .bp-thumb-frame,
.bp-thumb:focus-visible .bp-thumb-frame { transform: none; }

/* Sticky header: instant show/hide, no slide */
.bp-sticky-header {
  transition: opacity 0.15s ease;
  transform: none;
}
.bp-sticky-header.is-visible { transform: none; opacity: 1; }
.bp-sticky-header:not(.is-visible) { transform: none; opacity: 0; }

/* ---------- Section structure: hide all meta labels ---------- */
.section-eyebrow,
.section-job {
  display: none !important;
}

/* ---------- Section 1: single-viewport thesis + inline bet row ---------- */

.section-problem {
  padding-top: 5rem;
  padding-bottom: 6rem;
  min-height: 0;
  display: block;
}

.section-problem > .section-inner {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.problem-hero {
  margin: 0;
  max-width: 900px;
}

.problem-thesis {
  font-size: 3.15rem;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--ink);
}

/* Bet row: four inline columns, no container chrome. */
.bet-row {
  list-style: none;
  margin: 0;
  padding: 1.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1.75rem;
  border-top: 1px solid var(--hairline);
}

.bet-item {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  position: relative;
}

/* Subtle vertical divider between bets, not visual cards. */
.bet-item + .bet-item {
  padding-left: 1.75rem;
  border-left: 1px solid var(--hairline);
  margin-left: -1.75rem;
  padding-left: calc(1.75rem);
}

.bet-item-num {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bet-item-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}

.bet-item-why {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* Cross-highlight: when any bet chip is hovered anywhere on the page,
   the matching bet-item in the hero gets an accent ink treatment. */
.blueprint[data-bet-highlight="1"] ~ * .bet-item[data-bet="1"] .bet-item-num,
.blueprint[data-bet-highlight="2"] ~ * .bet-item[data-bet="2"] .bet-item-num,
.blueprint[data-bet-highlight="3"] ~ * .bet-item[data-bet="3"] .bet-item-num,
.blueprint[data-bet-highlight="4"] ~ * .bet-item[data-bet="4"] .bet-item-num {
  color: var(--accent);
}

/* Active bet-item state: hover highlight removed -- bet names
   stay on --ink so the row doesn't flicker accent-blue on read. */
.bet-item:hover .bet-item-name,
.bet-item:focus-within .bet-item-name {
  color: var(--ink);
}

/* Old bets-grid (card version) hidden now. Keep class rules quiet. */
.bets-grid { display: none; }

/* ---------- Section 2: remove section-job spacing ---------- */
.section-scale .section-title { margin-top: 0; }

/* ---------- Section 3: remove eyebrow spacing ---------- */
.section-journey > .section-inner > .section-title:first-child,
.section-journey .section-title { margin-top: 0; }

.section-journey {
  padding-top: 4.5rem;
}

/* ---------- Blueprint: actor-verb stage tag ---------- */

.bp-stage-actor {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
  display: block;
  padding: 0.18rem 0.45rem;
  background: var(--accent-soft);
  border-radius: 3px;
  align-self: flex-start;
  white-space: nowrap;
}

/* Stage 5 actor pill sits on accent background. */
.bp-stage-head-pivot .bp-stage-actor {
  background: var(--bg-elev);
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(42, 77, 143, 0.22);
}

.bp-stage-head-approve .bp-stage-actor {
  color: var(--hold-ink);
  background: rgba(31, 95, 63, 0.12);
}

.bp-stage-head-reject .bp-stage-actor {
  color: var(--break-ink);
  background: rgba(138, 42, 42, 0.10);
}

body[data-theme="warm"] .bp-stage-actor {
  background: rgba(138, 90, 42, 0.12);
}

body[data-theme="dark"] .bp-stage-actor {
  background: rgba(140, 176, 255, 0.14);
  color: var(--accent);
}

/* Layout: actor tag on its own row above stage num + name */
.bp-stage-head {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  grid-template-rows: auto auto auto;
  column-gap: 0.55rem;
  row-gap: 0.3rem;
  align-items: center;
  padding: 0.75rem 0.95rem 0.85rem;
}

.bp-stage-head .bp-stage-actor {
  grid-column: 1 / -1;
  grid-row: 1;
}

.bp-stage-head .bp-stage-num {
  grid-column: 1;
  grid-row: 2;
}

.bp-stage-head .bp-stage-icon {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
}

.bp-stage-head .bp-stage-name {
  grid-column: 1 / -1;
  grid-row: 3;
  font-size: 0.9rem;
  line-height: 1.25;
  margin-top: 0.05rem;
}

/* Old narr element hidden if any remain */
.bp-stage-narr { display: none; }

/* ---------- Sticky header: actor-verb in the pill too ---------- */
.bp-sticky-stage { padding: 0.55rem 0.85rem; }
.bp-sticky-stage-actor {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.15rem;
}

/* ---------- Pass 4: interaction = 3 behaviors ---------- */

/* 1. Lane row hover expansion -- subtle vertical breathing room */
.bp-layer {
  transition: none;
}
.bp-layer:hover .bp-c {
  /* Row padding hover-breathe removed -- was causing vertical jitter
     as the mouse moved between rows. Hover emphasis now lives in
     column highlight + opacity reveal instead. */
  transition: none;
}
.bp-layer-support:hover .bp-c {
  /* Same -- no padding swell on hover. */
  transition: none;
}

/* 2. Bet chip hover -> cross-reference highlight already wired */

/* 3. Thumb click -> lightbox already wired */

/* Stage head hover box-shadow off (no decorative hover) */
.bp-stage-head:hover { background: transparent; }
.bp-stage-head-pivot:hover { background: var(--accent-soft); }
.bp-stage-head-approve:hover { background: var(--bp-approve-bg); }
.bp-stage-head-reject:hover { background: var(--bp-reject-bg); }

/* ---------- Section 5: compact closer ---------- */

.section-takeaway {
  background: var(--bg-step);
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.section-takeaway > .section-inner {
  max-width: 900px;
}

.takeaway-statement {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 0.65rem;
  color: var(--ink);
  display: block;
}

.takeaway-statement-lede,
.takeaway-statement-accent {
  display: inline;
}

.takeaway-statement-lede { color: var(--ink-soft); font-weight: 500; }
.takeaway-statement-accent { color: var(--accent); font-weight: 700; margin-left: 0.35em; }

.takeaway-supporting {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 2rem;
  max-width: 54ch;
}

.takeaway-question-lede {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 0.45rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
}

.takeaway-question-body {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 1.35rem;
  max-width: 28ch;
}

/* Takeaway bets: flat inline list, no boxes */
.takeaway-bets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1.5rem;
  row-gap: 0.5rem;
}

.takeaway-bets > li {
  padding: 0;
}

.takeaway-bet {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--hairline);
  border-left: none;
  border-radius: 0;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s;
}

.takeaway-bet:hover, .takeaway-bet:focus-visible {
  color: var(--accent);
  transform: none;
  box-shadow: none;
}

.takeaway-bet-num {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.takeaway-bet-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: inherit;
}

/* ---------- Sources: collapsed details ---------- */

.sources {
  padding: 3rem 1.5rem 5rem;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
}

.sources-details {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
}

.sources-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.75rem;
  user-select: none;
}

.sources-summary::-webkit-details-marker { display: none; }

.sources-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.sources-hint {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--whisper-ink);
  font-weight: 600;
  margin-left: auto;
}

.sources-details[open] .sources-hint::before {
  content: 'collapse';
}
.sources-details[open] .sources-hint {
  font-size: 0;
}
.sources-details[open] .sources-hint::before {
  font-size: 0.7rem;
  display: inline;
}

.sources-body {
  padding-top: 1.5rem;
}

.sources-note {
  font-size: 0.82rem;
  color: var(--whisper-ink);
  margin: 0 0 1.5rem;
}

.sources-list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 2rem;
  row-gap: 1rem;
}

.sources-list dt {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  font-weight: 700;
  color: var(--ink);
  padding-top: 0.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: flex-start;
}

/* Qualifier: smaller, whisper-colored sub-label under Part N */
.sources-qualifier {
  font-size: 0.68rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  text-transform: none;
}

/* Back-link: small accented link; hidden visually on hover of      */
/* the whole dt-dd row to feel like an affordance discovered, not  */
/* a permanent ornament. Keyboard-accessible (focus visible).       */
.sources-backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.18s ease, transform 0.18s ease;
  margin-top: 0.2rem;
}

.sources-backlink:hover,
.sources-backlink:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sources-backlink:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 3px;
}

/* ---------- Cross-link flash: highlight landing target ---------- */
/* Fires on both directions: content link -> sources entry, and    */
/* sources back-link -> content element. Brief pulse (accent soft  */
/* wash + border), auto-removes after animation. Composes with     */
/* existing focus ring so keyboard users see the same signal.      */
@keyframes sourceFlash {
  0%   { box-shadow: 0 0 0 0 var(--accent); background-color: var(--accent-soft); }
  50%  { box-shadow: 0 0 0 6px rgba(42, 77, 143, 0); background-color: var(--accent-soft); }
  100% { box-shadow: 0 0 0 0 rgba(42, 77, 143, 0); background-color: transparent; }
}

.source-flash {
  animation: sourceFlash 1.6s ease-out;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .source-flash {
    animation: none;
    background-color: var(--accent-soft);
    transition: background-color 0.6s ease;
  }
}

.sources-list dd {
  margin: 0 0 0.25rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.sources-list dd + dd {
  margin-top: -0.5rem;
}

.sources code {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 0.82em;
  padding: 0.1em 0.35em;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 3px;
}

/* Old sidecar rules retired */
.sidecar, .sidecar-title, .sidecar-note, .sidecar-block {
  /* safe no-ops; markup no longer used */
}

/* ---------- Footer tighten ---------- */
.footer {
  padding: 1.5rem 1.5rem 2rem;
  border-top: 1px solid var(--hairline);
  color: var(--whisper-ink);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .problem-thesis { font-size: 2.3rem; }
  .bet-row { grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; }
  .bet-item + .bet-item { border-left: none; padding-left: 0; margin-left: 0; }
  .bet-item:nth-child(3), .bet-item:nth-child(4) {
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
  }
  .takeaway-statement { font-size: 2rem; }
  .takeaway-bets { grid-template-columns: repeat(2, 1fr); }
  .sources-list { grid-template-columns: 1fr; row-gap: 0.4rem; column-gap: 0; }
  .sources-list dt { padding-top: 0.8rem; }
}

@media (max-width: 600px) {
  .problem-thesis { font-size: 1.8rem; }
  .bet-row { grid-template-columns: 1fr; }
  .bet-item:nth-child(2), .bet-item:nth-child(3), .bet-item:nth-child(4) {
    padding-top: 1.25rem;
    border-top: 1px solid var(--hairline);
  }
  .bet-item + .bet-item { padding-left: 0; border-left: none; margin-left: 0; }
  .takeaway-bets { grid-template-columns: 1fr; }
  .takeaway-statement { font-size: 1.6rem; }
  .takeaway-question-body { font-size: 1.25rem; }
}

/* ---------- Reduced motion: already off globally from above ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ============================================================
   v0.3 cross-bet highlight (the one hover behavior that crosses
   the page). Hovering a bet anywhere highlights every instance.
   ============================================================ */

/* Every "this represents a bet" element */
.bet-item[data-bet],
.bp-bet-chip[data-bet],
.takeaway-bet[data-bet],
.bp-c[data-bet-ops] {
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

/* Dim non-matching bets in Section 1 */
body[data-bet-highlight="1"] .bet-item:not([data-bet="1"]),
body[data-bet-highlight="2"] .bet-item:not([data-bet="2"]),
body[data-bet-highlight="3"] .bet-item:not([data-bet="3"]),
body[data-bet-highlight="4"] .bet-item:not([data-bet="4"]) {
  opacity: 0.45;
}

/* Promote matching bet in Section 1 */
body[data-bet-highlight="1"] .bet-item[data-bet="1"] .bet-item-name,
body[data-bet-highlight="2"] .bet-item[data-bet="2"] .bet-item-name,
body[data-bet-highlight="3"] .bet-item[data-bet="3"] .bet-item-name,
body[data-bet-highlight="4"] .bet-item[data-bet="4"] .bet-item-name { color: var(--accent); }

/* Promote matching cells in blueprint */
.blueprint[data-bet-highlight="1"] .bp-c[data-bet-ops~="1"],
.blueprint[data-bet-highlight="2"] .bp-c[data-bet-ops~="2"],
.blueprint[data-bet-highlight="3"] .bp-c[data-bet-ops~="3"],
body[data-bet-highlight="1"] .bp-c[data-bet-ops~="1"],
body[data-bet-highlight="2"] .bp-c[data-bet-ops~="2"],
body[data-bet-highlight="3"] .bp-c[data-bet-ops~="3"] {
  box-shadow: inset 0 0 0 2px var(--accent);
  background: var(--accent-soft);
}

/* Bet 04: the Line of Visibility band */
body[data-bet-highlight="4"] .bp-sep-band-visibility,
.blueprint[data-bet-highlight="4"] .bp-sep-band-visibility {
  box-shadow: inset 0 0 0 2px var(--bp-visibility-edge);
  filter: saturate(1.15);
}

/* Promote matching chips */
.blueprint[data-bet-highlight="1"] .bp-bet-chip[data-bet="1"],
.blueprint[data-bet-highlight="2"] .bp-bet-chip[data-bet="2"],
.blueprint[data-bet-highlight="3"] .bp-bet-chip[data-bet="3"],
body[data-bet-highlight="1"] .bp-bet-chip[data-bet="1"],
body[data-bet-highlight="2"] .bp-bet-chip[data-bet="2"],
body[data-bet-highlight="3"] .bp-bet-chip[data-bet="3"] {
  background: var(--bg-elev);
  box-shadow: 0 0 0 2px var(--accent);
}

/* Promote matching takeaway bet */
body[data-bet-highlight="1"] .takeaway-bet[href="#bet-1"],
body[data-bet-highlight="2"] .takeaway-bet[href="#bet-2"],
body[data-bet-highlight="3"] .takeaway-bet[href="#bet-3"],
body[data-bet-highlight="4"] .takeaway-bet[href="#bet-4"] { color: var(--accent); }

body[data-bet-highlight="1"] .takeaway-bet[href="#bet-1"] .takeaway-bet-name,
body[data-bet-highlight="2"] .takeaway-bet[href="#bet-2"] .takeaway-bet-name,
body[data-bet-highlight="3"] .takeaway-bet[href="#bet-3"] .takeaway-bet-name,
body[data-bet-highlight="4"] .takeaway-bet[href="#bet-4"] .takeaway-bet-name { color: var(--accent); }

/* Make takeaway-bet nodes also triggers -- add data-bet on them */


/* ============================================================
   Top bar alignment fix: inner content sits inside the same
   1200px container + 1.5rem horizontal padding as every section.
   ============================================================ */
.top-bar {
  padding: 0;
}

.top-bar-inner {
  max-width: var(--max-w, 1200px);
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Sticky stage header should follow the same alignment */
.bp-sticky-inner {
  max-width: var(--max-w, 1200px);
  margin: 0 auto;
}


/* ============================================================
   v0.3.1 fixes
   ============================================================ */

/* Revert top-bar-inner wrapper: no longer used. Top-bar spans full
   viewport again; header alignment returns to prior behavior. */
.top-bar { padding: 0.9rem 1.75rem; }
.top-bar-inner { display: contents; }
.bp-sticky-inner { max-width: none; margin: 0; }

/* Top-bar mark: stroke glyph in ink color, no filled box. */
.top-bar-mark {
  width: auto;
  height: auto;
  background: transparent;
  color: var(--ink);
  padding: 0;
  border-radius: 0;
}

body[data-theme="dark"] .top-bar-mark { color: var(--ink); background: transparent; }
body[data-theme="warm"] .top-bar-mark { color: var(--ink); background: transparent; }

/* Section 5: left-align with the rest of the page. Keep narrow measure
   but anchor it to the left edge of .section-inner, matching where every
   other section's content begins. */
.section-takeaway {
  text-align: left;
}
.section-takeaway > .section-inner {
  max-width: var(--max-w, 1200px);
  margin-left: auto;
  margin-right: auto;
}

/* Individual children get a narrow reading measure, flush-left. */
.takeaway-statement,
.takeaway-supporting,
.takeaway-question-lede,
.takeaway-question-body,
.takeaway-bets {
  max-width: 900px;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}


/* ============================================================
   v0.3.2  Section 4 restructure
   Strategy:
   - Drop per-cell borders, fills, and status badges
   - State becomes a single 3px left accent rule on each cell
   - Break cells carry visual weight through body-text boldness
   - Row 1 headers get more breathing room (table-like not card-like)
   - Payoff ("3.3x") promoted to a display-scale finale
   ============================================================ */

/* Matrix grid: pure table feel, no card. Thin hairlines only. */
.matrix {
  display: grid;
  gap: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  border-top: 1px solid var(--hairline);
}

.matrix-row {
  display: grid;
  grid-template-columns: 220px repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--hairline);
}

.matrix-header {
  background: transparent;
  border-bottom: 1px solid var(--hairline);
}

/* Column headers: muted uppercase label + sub */
.matrix-corner { padding: 0; background: transparent; border: none; }

.matrix-col-head {
  padding: 0.9rem 1.1rem 0.9rem;
  background: transparent;
  border-left: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.col-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}

.col-sub {
  font-size: 0.72rem;
  color: var(--whisper-ink);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Row heads: anchor text, no button, no fill */
.matrix-row-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: center;
  padding: 1.25rem 1.15rem 1.25rem 0;
  background: transparent;
  border: none;
  border-right: none;
  text-align: left;
  cursor: default;
}

.row-num {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.row-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.25;
}

.row-sub {
  font-size: 0.75rem;
  color: var(--whisper-ink);
  font-style: italic;
  font-weight: 500;
}

/* Cells: strip all chrome. State is a 3px left accent rule. */
.matrix-cell {
  padding: 1.25rem 1.35rem 1.25rem 1.1rem;
  background: transparent !important;
  border: none !important;
  border-left: 3px solid var(--hairline) !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  box-shadow: none !important;
  transition: background 0.15s;
}

.matrix-cell:hover { transform: none; box-shadow: none !important; background: rgba(42, 77, 143, 0.025) !important; }

.matrix-cell[data-state="hold"]  { border-left-color: var(--hold-ink) !important; }
.matrix-cell[data-state="flex"]  { border-left-color: var(--flex-ink) !important; }
.matrix-cell[data-state="break"] { border-left-color: var(--break-ink) !important; }

/* Hide the legacy status badges */
.matrix-cell .cell-status-badge,
.matrix-cell .cell-status-dot,
.matrix-cell .cell-status-label,
.matrix-cell .cell-provenance { display: none; }

/* Cell body: Holds/Flexes are body-soft. Breaks carry weight. */
.cell-why {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 500;
  margin: 0;
}

.matrix-cell[data-state="break"] .cell-why {
  color: var(--ink);
  font-weight: 600;
}

/* Dark theme: break cells text still clears AA */
body[data-theme="dark"] .matrix-cell[data-state="break"] .cell-why { color: var(--ink); }

/* ---------- Legend + provenance: tightened ---------- */
.matrix-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
}

.matrix-legend {
  display: flex;
  gap: 1.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--whisper-ink);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--whisper-ink);
}

.legend-item .state-glyph {
  width: 8px;
  height: 8px;
  box-shadow: none;
}

.matrix-provenance {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: var(--whisper-ink);
  letter-spacing: 0.01em;
}

/* ---------- Payoff: "3.3x" as the visual finale ---------- */
.evidence-payoff {
  margin: 3.5rem 0 0;
  padding: 2.25rem 0 0;
  border-top: 1px solid var(--hairline);
  max-width: 860px;
}

.evidence-payoff-eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--break-ink);
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.evidence-payoff-statement {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 1.75rem;
  max-width: 26ch;
}

.evidence-payoff-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 3.1rem;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--break-ink);
  font-variant-numeric: tabular-nums;
  vertical-align: baseline;
  margin-left: 0.25rem;
  position: relative;
  top: 0.22em;
}

.evidence-payoff-unit {
  font-size: 0.55em;
  font-weight: 600;
  margin-left: 0.05em;
  opacity: 0.85;
}

.evidence-payoff-bars {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 720px;
}

.evidence-payoff-bars .mref-row {
  display: grid;
  grid-template-columns: 130px 1fr 80px;
  gap: 1rem;
  align-items: center;
}

.evidence-payoff-bars .mref-name {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}

.evidence-payoff-bars .mref-track {
  height: 10px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
}

.evidence-payoff-bars .mref-fill { display: block; height: 100%; border-radius: 999px; }
.evidence-payoff-bars .mref-fill-approve { background: var(--hold-ink); opacity: 0.85; }
.evidence-payoff-bars .mref-fill-reject  { background: var(--break-ink); opacity: 0.95; }

.evidence-payoff-bars .mref-num {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Legacy .matrix-reference container hidden if any stragglers exist */
.matrix-reference { display: none; }

/* ---------- Cross-bet highlight: still works without filled cells ---------- */
body[data-bet-highlight="1"] .matrix-row[data-bet="1"] .matrix-cell,
body[data-bet-highlight="2"] .matrix-row[data-bet="2"] .matrix-cell,
body[data-bet-highlight="3"] .matrix-row[data-bet="3"] .matrix-cell,
body[data-bet-highlight="4"] .matrix-row[data-bet="4"] .matrix-cell {
  background: rgba(42, 77, 143, 0.045) !important;
}

body[data-bet-highlight] .matrix-row:not([data-bet=""]) .matrix-cell .cell-why {
  transition: color 0.18s;
}

/* Responsive: stack on narrow */
@media (max-width: 960px) {
  .matrix-row { grid-template-columns: 1fr; gap: 0; }
  .matrix-row-head { padding: 1.25rem 0 0.35rem; border-bottom: 1px solid var(--hairline); }
  .matrix-cell { border-left-width: 4px !important; padding-left: 1rem; }
  .matrix-header { display: none; }
  /* Prepend the column name inline on each cell via its aria-colindex */
  .matrix-cell::before {
    content: attr(aria-colindex);
    display: none; /* keep hidden; we rely on row context on mobile */
  }
  .evidence-payoff-statement { font-size: 1.45rem; }
  .evidence-payoff-num { font-size: 2.4rem; }
}


/* ============================================================
   v0.3.3  Section 4 -- stronger column anchors, louder states
   ============================================================ */

/* ---------- Column headers with icons + summary dots ---------- */

.matrix {
  border-top: none;
}

.matrix-row {
  grid-template-columns: 220px repeat(3, 1fr);
}

.matrix-header {
  border-bottom: 2px solid var(--ink);
  border-bottom-color: var(--hairline);
}

body[data-theme="dark"] .matrix-header { border-bottom-color: var(--hairline); }

.matrix-col-head {
  padding: 1.5rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: transparent;
  border-left: 1px solid var(--hairline);
  position: relative;
}

.matrix-col-head:first-of-type { border-left: none; }

/* Voice column gets quiet accent tint to signal where the problem lives */
.matrix-col-head[data-col="voice"] {
  background: rgba(138, 42, 42, 0.035);
}
body[data-theme="dark"] .matrix-col-head[data-col="voice"] {
  background: rgba(232, 144, 135, 0.06);
}

.col-icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--ink);
  margin-bottom: 0.15rem;
  opacity: 0.9;
}

.matrix-col-head[data-col="voice"] .col-icon { color: var(--break-ink); }

.col-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--ink);
}

.col-sub {
  font-size: 0.72rem;
  color: var(--whisper-ink);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-top: -0.1rem;
}

/* Summary pill: 4 dots + count, sits at the bottom of each header */
.col-summary {
  margin-top: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--hairline);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.7rem;
  color: var(--whisper-ink);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.col-summary-dots {
  display: inline-flex;
  gap: 3px;
}

.col-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.col-dot-hold  { background: var(--hold-ink); }
.col-dot-flex  { background: var(--flex-ink); }
.col-dot-break { background: var(--break-ink); }

.col-summary-text { color: var(--ink-soft); font-weight: 600; }

.col-summary-hold .col-summary-text  { color: var(--hold-ink); }
.col-summary-break .col-summary-text { color: var(--break-ink); }

/* ---------- Row headers: no hover, clean anchor text ---------- */

.matrix-row-head {
  padding: 1.35rem 1.5rem 1.35rem 0;
  background: transparent !important;
  border-right: none;
  cursor: default;
  transition: none;
}

.matrix-row-head:hover { background: transparent !important; }

.row-num {
  color: var(--accent);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.row-label {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.25;
  margin-top: 0.15rem;
}

.row-sub {
  font-size: 0.75rem;
  color: var(--whisper-ink);
  font-style: normal;
  font-weight: 500;
  margin-top: 0.1rem;
}

/* ---------- Cells: tinted fills (soft), no borders, state word inline ---------- */

.matrix-cell {
  padding: 1.1rem 1.25rem 1.15rem !important;
  background: transparent !important;
  border: none !important;
  border-left: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  min-height: 0 !important;
  box-shadow: none !important;
  position: relative;
}

/* Hold cells: very soft green tint */
.matrix-cell[data-state="hold"] {
  background: rgba(31, 95, 63, 0.05) !important;
}
body[data-theme="dark"] .matrix-cell[data-state="hold"] {
  background: rgba(127, 212, 163, 0.06) !important;
}

/* Flex cells: soft amber */
.matrix-cell[data-state="flex"] {
  background: rgba(138, 90, 15, 0.06) !important;
}
body[data-theme="dark"] .matrix-cell[data-state="flex"] {
  background: rgba(229, 183, 98, 0.07) !important;
}

/* Break cells: red tint + bottom accent bar so the pattern reads at 10ft */
.matrix-cell[data-state="break"] {
  background: rgba(138, 42, 42, 0.08) !important;
  box-shadow: inset 0 -3px 0 var(--break-ink) !important;
}
body[data-theme="dark"] .matrix-cell[data-state="break"] {
  background: rgba(232, 144, 135, 0.10) !important;
}

/* Inline state word: small caps label, colored, sits above the why */
.cell-state {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

.matrix-cell[data-state="hold"]  .cell-state { color: var(--hold-ink); }
.matrix-cell[data-state="flex"]  .cell-state { color: var(--flex-ink); }
.matrix-cell[data-state="break"] .cell-state { color: var(--break-ink); }

/* Cell body */
.cell-why {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 500;
  margin: 0;
}

.matrix-cell[data-state="break"] .cell-why {
  color: var(--ink);
  font-weight: 600;
}

/* Hide legacy badge markup if any stragglers */
.matrix-cell .cell-status-badge,
.matrix-cell .cell-status-dot,
.matrix-cell .cell-status-label,
.matrix-cell .cell-provenance { display: none; }

/* ---------- Provenance sits below the matrix, quiet footnote ---------- */
.matrix-provenance {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 1rem 0 0;
  padding: 0;
  font-size: 0.7rem;
  color: var(--whisper-ink);
  letter-spacing: 0.01em;
  border: none;
}

.matrix-provenance-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.matrix-meta { display: none; }

/* ---------- Cross-bet highlight: use outline on row, not background ---------- */
body[data-bet-highlight="1"] .matrix-row[data-bet="1"] .matrix-cell,
body[data-bet-highlight="2"] .matrix-row[data-bet="2"] .matrix-cell,
body[data-bet-highlight="3"] .matrix-row[data-bet="3"] .matrix-cell,
body[data-bet-highlight="4"] .matrix-row[data-bet="4"] .matrix-cell {
  filter: saturate(1.3);
  box-shadow: inset 0 0 0 2px var(--accent) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .matrix-row { grid-template-columns: 1fr; gap: 0; }
  .matrix-header { display: none; }
  .matrix-row-head { padding: 1.25rem 0 0.35rem; border-bottom: 1px solid var(--hairline); }
  .matrix-cell { border-left: none !important; padding-left: 1rem !important; }
  .matrix-cell[data-state="break"] { box-shadow: inset 4px 0 0 var(--break-ink) !important; }
  .matrix-cell::before {
    content: attr(aria-colindex);
    display: none;
  }
}


/* ============================================================
   v0.4  Section 4 = evidence-based stress test per bet
         Section 5 = roadmap as answer
   ============================================================ */

/* Old matrix markup is gone from the page. Leave the styles in
   place; they have nothing to render against. */

/* ---------- Section 4 layout ---------- */

.section-evidence { background: var(--bg); padding-top: 5rem; padding-bottom: 5.5rem; }

.bet-stress {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
}

.bet-stress-item {
  padding: 2.25rem 0 2rem;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 220px 1fr;
  column-gap: 3rem;
  row-gap: 1.25rem;
  align-items: start;
}

/* Head column: bet identity rail, anchored left */
.bet-stress-head {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  position: sticky;
  top: 72px;
  padding-top: 0.25rem;
}

.bet-stress-num {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.bet-stress-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0.1rem 0 0;
}

.bet-stress-sub {
  font-size: 0.78rem;
  color: var(--whisper-ink);
  font-weight: 500;
}

/* Body: two-column holds / cracks */
.bet-stress-body {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
}

.stress-col {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--hairline);
}

.stress-col-hold  { border-left-color: var(--hold-ink); }
.stress-col-crack { border-left-color: var(--break-ink); }

.stress-col-label {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--whisper-ink);
  margin: 0;
  line-height: 1;
}

.stress-col-hold .stress-col-label  { color: var(--hold-ink); }
.stress-col-crack .stress-col-label { color: var(--break-ink); }

.stress-col-text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
}

.stress-col-crack .stress-col-text { font-weight: 600; }

.stress-col-evidence {
  font-size: 0.72rem;
  color: var(--whisper-ink);
  font-style: italic;
  margin: 0.15rem 0 0;
  line-height: 1.4;
}

.stress-gap-list {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.stress-gap-list li {
  font-size: 0.76rem;
  padding: 0.22rem 0.65rem;
  border: 1px solid var(--break-edge);
  color: var(--break-ink);
  border-radius: 999px;
  background: transparent;
  font-weight: 600;
}

/* Quote inside the cracks column */
.stress-quote {
  margin: 0.3rem 0 0;
  padding: 0.5rem 0 0.3rem 0.9rem;
  border-left: 2px solid var(--break-edge);
  font-style: italic;
}

.stress-quote-text {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
}

.stress-quote-attrib {
  display: block;
  font-size: 0.68rem;
  color: var(--whisper-ink);
  font-style: normal;
  letter-spacing: 0.01em;
  margin-top: 0.3rem;
}

/* Footer: addressed-by roadmap list */
.bet-stress-foot {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--hairline);
  flex-wrap: wrap;
}

.stress-foot-label {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  padding-top: 0.4rem;
  flex-shrink: 0;
}

.stress-roadmap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  flex: 1;
}

.stress-roadmap-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--bg-elev);
  font-size: 0.78rem;
  color: var(--ink);
}

.stress-roadmap-quarter {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.stress-roadmap-what {
  font-weight: 600;
  color: var(--ink);
}

.stress-roadmap-owner {
  font-size: 0.72rem;
  color: var(--whisper-ink);
  font-style: italic;
}

/* ---------- Payoff stays ---------- */
.evidence-payoff {
  margin: 3.5rem 0 0;
  padding: 2.5rem 0 0;
  border-top: 1px solid var(--hairline);
  max-width: 860px;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .bet-stress-item { grid-template-columns: 1fr; column-gap: 0; row-gap: 1rem; }
  .bet-stress-head { position: static; grid-row: auto; grid-column: 1; }
  .bet-stress-body { grid-column: 1; grid-template-columns: 1fr; row-gap: 1.25rem; }
  .bet-stress-foot { grid-column: 1; }
}

/* ============================================================
   Section 5: roadmap list as answer
   ============================================================ */

.takeaway-question-body { display: none; } /* no question to ask; answer is below */
.takeaway-bets { display: none; }          /* replaced by roadmap-list */

.takeaway-question-lede {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  margin-bottom: 1.25rem;
}

.roadmap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-width: 900px;
  border-top: 1px solid var(--hairline);
}

.roadmap-item {
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  align-items: baseline;
  column-gap: 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline);
}

.roadmap-quarter {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.roadmap-what {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
}

.roadmap-owner {
  font-size: 0.78rem;
  color: var(--whisper-ink);
  font-style: italic;
  white-space: nowrap;
}

.roadmap-bet {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}

.roadmap-bet:hover,
.roadmap-bet:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.roadmap-bet-num {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 960px) {
  .roadmap-item {
    grid-template-columns: 90px 1fr;
    row-gap: 0.35rem;
  }
  .roadmap-owner { grid-column: 2; font-size: 0.74rem; }
  .roadmap-bet   { grid-column: 2; justify-self: start; }
}

/* ============================================================ */
/* Part 5: Typographic roadmap.                                  */
/* Replaces the card-based phase-map (D70). No container chrome. */
/* Phase 1 gets an accent rail + fuller type to mark it as the   */
/* live response to Part 4's cracks. Phases 2-4 run as compact   */
/* ============================================================
   Part 5: Typographic roadmap.
   One stacked pattern -- eyebrow -> name -> body -> chips --
   used five times. Phase 1 gets the accent rail + bigger type
   (it's the live response). Phase 5 sits behind a thin hairline
   gate (it's contingent on Phase 1). No per-phase visual
   variants; consistency is the point.
   ============================================================ */
.roadmap {
  margin: 2.5rem 0 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Phase 1 and Phase 5 stay at the editorial reading measure.          */
.roadmap > .roadmap-phase {
  max-width: 760px;
}

/* "In parallel" row: three columns at >=960px. Bodies and chip rows  */
/* align via flex-column with body flexing to fill, so all three chip */
/* rows land at the same bottom baseline regardless of body length.    */
.roadmap-parallel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.roadmap-parallel > .roadmap-phase {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.roadmap-parallel > .roadmap-phase .roadmap-phase-body {
  flex: 1;
}

@media (max-width: 960px) {
  .roadmap-parallel {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .roadmap-parallel > .roadmap-phase .roadmap-phase-body {
    flex: none;
  }
}

/* "In parallel" group eyebrow -- names the tracks that run alongside */
/* Phase 1. Single eyebrow groups the three parallels visually.        */
.roadmap-group-eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-muted);
  margin: 1.25rem 0 -0.5rem;
  padding: 0;
}

/* Base phase: one consistent stacked pattern -- eyebrow -> name ->   */
/* body -> chips. Phases 2-5 share this rhythm at base scale; Phase   */
/* 1 inherits and promotes (accent rail + bigger name + ink body).    */
/* No separate compact/fragment variants -- one pattern used five     */
/* times keeps the stack feeling like one system.                      */
.roadmap-phase {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0;
  border: none;
  background: transparent;
  position: relative;
}

.roadmap-phase-eyebrow {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.3;
}

.roadmap-phase-eyebrow-status {
  color: var(--accent);
  margin-right: 0.4em;
}

.roadmap-phase-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}

.roadmap-phase-body {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 58ch;
}

.roadmap-phase-bets {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
  padding: 0;
}

/* Gate marker between Phase 4 and Phase 5. Full-width hairline so the */
/* gate reads across the parallels row above. The "gated on Phase 1"   */
/* meaning is carried by structure, not by a separate label.           */
.roadmap-divider {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 0.75rem 0 0.25rem;
  width: 100%;
}

/* Phase 1 (Now): accent rail on the left, bigger type, more air. */
.roadmap-phase-now {
  padding-left: 1.1rem;
  border-left: 2px solid var(--accent);
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

.roadmap-phase-now .roadmap-phase-name {
  font-size: 1.4rem;
  letter-spacing: -0.018em;
}

.roadmap-phase-now .roadmap-phase-body {
  color: var(--ink);
  font-size: 1rem;
}

/* Phase-bet chip: inherits the roadmap-bet visual token so Part 4  */
/* and Part 5 bet chips read as the same element.                    */
.phase-bet {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.phase-bet:hover,
.phase-bet:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.phase-bet:focus-visible {
  box-shadow: var(--focus-ring);
}

.phase-bet[data-bet="1"] { border-color: var(--bet-1-edge); }
.phase-bet[data-bet="2"] { border-color: var(--bet-2-edge); }
.phase-bet[data-bet="3"] { border-color: var(--bet-3-edge); }
.phase-bet[data-bet="4"] { border-color: var(--bet-4-edge); }

.phase-bet:hover[data-bet="1"] { background: var(--bet-1-bg); color: var(--bet-1-ink); }
.phase-bet:hover[data-bet="2"] { background: var(--bet-2-bg); color: var(--bet-2-ink); }
.phase-bet:hover[data-bet="3"] { background: var(--bet-3-bg); color: var(--bet-3-ink); }
.phase-bet:hover[data-bet="4"] { background: var(--bet-4-bg); color: var(--bet-4-ink); }

.phase-bet .bet-sigil {
  color: var(--ink-soft);
}

.phase-bet[data-bet="1"] .bet-sigil { color: var(--bet-1-ink); }
.phase-bet[data-bet="2"] .bet-sigil { color: var(--bet-2-ink); }
.phase-bet[data-bet="3"] .bet-sigil { color: var(--bet-3-ink); }
.phase-bet[data-bet="4"] .bet-sigil { color: var(--bet-4-ink); }

.phase-bet .bet-sigil-icon {
  width: 22px;
  height: 22px;
  background: var(--ink-soft);
  padding: 3px;
  border-radius: 50%;
  color: var(--bg);
}

.phase-bet[data-bet="1"] .bet-sigil-icon { background: var(--bet-1-ink); }
.phase-bet[data-bet="2"] .bet-sigil-icon { background: var(--bet-2-ink); }
.phase-bet[data-bet="3"] .bet-sigil-icon { background: var(--bet-3-ink); }
.phase-bet[data-bet="4"] .bet-sigil-icon { background: var(--bet-4-ink); }

.phase-bet .bet-sigil-num {
  display: none;
}

/* ============================================================
   Section closer template -- "what this artifact contributes"
   Left-aligned to continue the page's editorial rhythm.
   Three beats: anchor at statement scale, one prose paragraph
   that defines it, one forward line. Whitespace does the
   pacing. Big anchor + generous vertical air carries the
   composition. Template-ready for the journey-map-kit.
   ============================================================ */
.takeaway-close {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--hairline);
  max-width: 780px;
}

.takeaway-close-eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 1.5rem;
}

/* Anchor is the gravitational center. Statement-scale display serif */
/* at weight 400 -- light, confident, unadorned. Trailing period      */
/* declares it as a named concept. The size difference vs the         */
/* definition below is what carries the hierarchy, not weight.         */
.takeaway-close-anchor {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.6rem + 1.6vw, 2.8rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 1.75rem;
}

/* Definition as a single prose paragraph. Display serif so it        */
/* visually belongs to the anchor above. Ink-soft to sit quieter than */
/* the anchor. Generous measure (44ch) so line breaks feel natural.   */
.takeaway-close-definition {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 2.25rem;
  max-width: 44ch;
  letter-spacing: -0.008em;
  text-wrap: balance;
}

/* Forward line: body-scale, separated by whitespace only (no         */
/* hairline rule -- the whitespace is the divider). Accent-blue       */
/* "Starting shape:" lead-in; ink body.                                */
.takeaway-close-forward {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 58ch;
  text-wrap: balance;
}

.takeaway-close-forward strong {
  font-weight: 700;
  color: var(--accent);
  margin-right: 0.15em;
}

@media (max-width: 720px) {
  .takeaway-close {
    margin-top: 3rem;
    padding-top: 2rem;
  }
}

@media (max-width: 960px) {
  .roadmap-phase-now .roadmap-phase-name { font-size: 1.25rem; }
  .roadmap-phase-now .roadmap-phase-body { font-size: 0.95rem; }
  .roadmap-phase-name { font-size: 0.98rem; }
  .roadmap-phase-body { font-size: 0.88rem; }
}


/* ============================================================
   v0.4.1  Section 4 density pass
   Collapse the 3-row structure into 2 rows, tighten all rhythm.
   ============================================================ */

.section-evidence { padding-top: 4.5rem; padding-bottom: 4.5rem; }

.bet-stress {
  margin-top: 2rem;
}

.bet-stress-item {
  padding: 1.5rem 0 1.5rem;
  grid-template-columns: 180px 1fr;
  column-gap: 2.5rem;
  row-gap: 0.85rem;
}

/* Left rail: no sticky, tighter */
.bet-stress-head {
  grid-row: 1 / span 2;
  position: static;
  padding-top: 0.1rem;
  gap: 0.2rem;
}

.bet-stress-name {
  font-size: 1.2rem;
  margin-top: 0.05rem;
}

.bet-stress-sub { font-size: 0.74rem; }

/* Body: tighter columns */
.bet-stress-body {
  column-gap: 1.75rem;
}

.stress-col {
  gap: 0.45rem;
  padding-left: 0.95rem;
  border-left-width: 2px;
}

.stress-col-text {
  font-size: 0.9rem;
  line-height: 1.5;
}

.stress-col-evidence {
  font-size: 0.7rem;
  margin-top: 0.05rem;
}

.stress-gap-list { gap: 0.3rem; margin-top: 0.1rem; }
.stress-gap-list li {
  font-size: 0.72rem;
  padding: 0.15rem 0.55rem;
}

.stress-quote {
  margin-top: 0.2rem;
  padding: 0.3rem 0 0.2rem 0.75rem;
}

.stress-quote-text { font-size: 0.85rem; line-height: 1.4; }
.stress-quote-attrib { font-size: 0.66rem; margin-top: 0.2rem; }

/* Addressed-by: inline strip, not a footer row */
.bet-stress-foot {
  padding-top: 0.7rem;
  border-top: 1px dashed var(--hairline);
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.stress-foot-label {
  padding-top: 0;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
}

.stress-roadmap { gap: 0.3rem 0.4rem; }

.stress-roadmap-item {
  padding: 0.25rem 0.55rem 0.25rem 0.5rem;
  font-size: 0.72rem;
  gap: 0.45rem;
  border-radius: 4px;
}

.stress-roadmap-quarter {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
}

.stress-roadmap-what { font-size: 0.76rem; font-weight: 600; }

.stress-roadmap-owner { font-size: 0.68rem; }

/* Payoff tighten */
.evidence-payoff {
  margin-top: 2.5rem;
  padding-top: 2rem;
}

.evidence-payoff-statement {
  font-size: 1.6rem;
  margin-bottom: 1.25rem;
}

.evidence-payoff-num { font-size: 2.6rem; }

@media (max-width: 960px) {
  .bet-stress-item { padding: 1.25rem 0; row-gap: 0.85rem; }
}


/* ============================================================
   v0.4.2  Section 4 clarity pass
   - Column labels render once at the top as a header strip
   - Hold/crack state carried by column position + a single glyph
   - "Roadmap" footer clearly anchored to the block above
   - Tighter text, calmer rhythm
   ============================================================ */

/* Reset prior stress-col-label visibility (we removed them from HTML) */
.stress-col-label { display: none; }

/* ---------- Column header strip ---------- */
.bet-stress-columns {
  display: grid;
  grid-template-columns: 180px 1fr;
  column-gap: 2.5rem;
  margin-top: 2.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hairline);
}

.bet-stress-columns-spacer { grid-column: 1; }

.bet-stress-columns-labels {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.75rem;
}

.bet-stress-col-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
}

.bet-stress-col-label-hold  { color: var(--hold-ink); }
.bet-stress-col-label-crack { color: var(--break-ink); }

.bet-stress-col-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.bet-stress-col-label-hold  .bet-stress-col-dot { background: var(--hold-ink); }
.bet-stress-col-label-crack .bet-stress-col-dot { background: var(--break-ink); }

/* ---------- Bet stress stack (flatten) ---------- */
.bet-stress {
  margin-top: 0;
  border-top: none;
}

.bet-stress-item {
  padding: 1.75rem 0 1.5rem;
  grid-template-columns: 180px 1fr;
  column-gap: 2.5rem;
  row-gap: 1rem;
  border-bottom: 1px solid var(--hairline);
}

.bet-stress-item:last-child { border-bottom: none; }

/* Left rail stays clean */
.bet-stress-head {
  grid-row: 1 / span 2;
  position: static;
  padding-top: 0.15rem;
  gap: 0.25rem;
}

/* ---------- Columns: glyph lives at the top-left of each column ---------- */
.bet-stress-body {
  grid-column: 2;
  grid-row: 1;
  column-gap: 1.75rem;
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.stress-col {
  padding-left: 1rem;
  gap: 0.5rem;
  position: relative;
  border-left: 1px solid var(--hairline);
  border-left-color: var(--hairline);
}

/* Single state glyph at top of column */
.stress-col::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 0.35rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--bg);
}

.stress-col-hold::before  { background: var(--hold-ink); }
.stress-col-crack::before { background: var(--break-ink); }

.stress-col-hold  { border-left-color: var(--hold-ink); }
.stress-col-crack { border-left-color: var(--break-ink); }

.stress-col-text {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
  margin: 0;
}

.stress-col-crack .stress-col-text { font-weight: 600; }

.stress-col-evidence {
  font-size: 0.72rem;
  color: var(--whisper-ink);
  font-style: italic;
  margin: 0.1rem 0 0;
  line-height: 1.4;
}

.stress-gap-list {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.stress-gap-list li {
  font-size: 0.72rem;
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--break-edge);
  color: var(--break-ink);
  border-radius: 999px;
  background: transparent;
  font-weight: 600;
}

.stress-quote {
  margin-top: 0.25rem;
  padding: 0.35rem 0 0.25rem 0.85rem;
  border-left: 2px solid var(--break-edge);
  font-style: italic;
}

.stress-quote-text {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
}

.stress-quote-attrib {
  display: block;
  font-size: 0.66rem;
  color: var(--whisper-ink);
  font-style: normal;
  margin-top: 0.3rem;
  letter-spacing: 0.01em;
}

/* ---------- Roadmap footer: clearly anchored to its block ---------- */
.bet-stress-foot {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0 0;
  margin-top: 0.25rem;
  border-top: none;
  flex-wrap: wrap;
}

/* Label: "→ Roadmap" with arrow glyph */
.stress-foot-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  padding: 0;
  flex-shrink: 0;
}

.stress-foot-arrow { color: var(--accent); opacity: 0.85; }

.stress-roadmap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.4rem;
}

.stress-roadmap-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.65rem;
  background: var(--accent-soft);
  border: none;
  border-radius: 4px;
  font-size: 0.76rem;
  color: var(--ink);
  transition: background 0.15s;
}

body[data-theme="dark"] .stress-roadmap-item {
  background: rgba(140, 176, 255, 0.1);
}

.stress-roadmap-quarter {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.stress-roadmap-what {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}

.stress-roadmap-owner {
  font-size: 0.7rem;
  color: var(--accent);
  font-style: italic;
}

/* Honest-call-out note under roadmap list. Used on Bet 03 to      */
/* acknowledge that Phase 1 does not directly fix the 37s crack.   */
.stress-foot-note {
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 0.6rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--rule);
  max-width: 58ch;
}

/* ---------- Alternating row tint so each bet block reads as one unit ---------- */
.bet-stress-item:nth-child(even) {
  background: linear-gradient(to right, transparent 0, var(--bg-step) 180px, var(--bg-step) 100%);
  margin: 0 calc(-1 * 1.5rem);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-bottom-color: transparent;
}

body[data-theme="dark"] .bet-stress-item:nth-child(even) {
  background: linear-gradient(to right, transparent 0, rgba(240, 238, 232, 0.03) 180px, rgba(240, 238, 232, 0.03) 100%);
}

/* The column label strip needs to visually precede the first block cleanly */
.bet-stress-columns { padding-top: 0.25rem; }

@media (max-width: 960px) {
  .bet-stress-columns { display: none; }
  .bet-stress-item { grid-template-columns: 1fr; padding: 1.25rem 0; }
  .bet-stress-body { grid-column: 1; grid-template-columns: 1fr; row-gap: 1rem; }
  .bet-stress-foot { grid-column: 1; }
  .bet-stress-item:nth-child(even) {
    background: var(--bg-step);
    margin: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}


/* ============================================================
   v0.4.3  Bet 01 as resolved (evidence loop closed)
   ============================================================ */

/* Resolved column uses green rail like Hold, but with a distinct
   list of shipped / dormant items instead of a prose crack. */
.stress-col-resolved {
  border-left-color: var(--hold-ink);
}

.stress-col-resolved::before {
  background: var(--hold-ink);
}

.stress-resolved-list {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.stress-resolved-item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: baseline;
  column-gap: 0.55rem;
  font-size: 0.82rem;
  line-height: 1.4;
}

.stress-resolved-mark {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hold-ink);
  margin-top: 0.1rem;
}

.stress-resolved-what {
  grid-column: 2;
  color: var(--ink);
  font-weight: 600;
}

.stress-resolved-item.stress-resolved-dormant .stress-resolved-what {
  font-weight: 500;
  color: var(--whisper-ink);
}

.stress-resolved-item.stress-resolved-dormant::before {
  content: '';
  grid-column: 1;
  justify-self: center;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--whisper-ink);
  opacity: 0.5;
  margin-top: 0.6em;
}

.stress-resolved-status {
  grid-column: 3;
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

.stress-resolved-shipped .stress-resolved-status { color: var(--hold-ink); }
.stress-resolved-dormant .stress-resolved-status { color: var(--whisper-ink); }

/* ---------- Clear-state footer ("No open work") ---------- */
.bet-stress-foot-clear {
  gap: 0.75rem;
}

.stress-foot-label-clear {
  color: var(--hold-ink);
}

.stress-foot-label-clear .stress-foot-arrow {
  color: var(--hold-ink);
  opacity: 1;
}

.stress-foot-clear-text {
  font-size: 0.78rem;
  color: var(--whisper-ink);
  font-style: italic;
}


/* ============================================================
   v0.4.4  Sticky column headers + modern quote pattern
   ============================================================ */

/* ---------- Sticky column header ---------- */
.bet-stress-columns {
  position: sticky;
  top: 58px;
  z-index: 10;
  background: var(--sticky-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  margin-top: 2.25rem;
  border-bottom: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
  transition: box-shadow 0.2s ease;
}

.bet-stress-columns.is-stuck {
  box-shadow: 0 6px 18px -10px rgba(26, 26, 26, 0.18);
}

body[data-theme="dark"] .bet-stress-columns.is-stuck {
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.5);
}

/* When scrolled past evidence, remove from sticky layer */
.bet-stress-columns[data-sticky-active="false"] {
  position: relative;
  top: auto;
  box-shadow: none;
}

/* Re-assert at small viewports where top chrome is shorter */
@media (max-width: 960px) {
  .bet-stress-columns { top: 54px; }
}
@media (max-width: 600px) {
  .bet-stress-columns { top: 50px; }
}

/* ---------- Modern quote pattern (reusable) ---------- */
/* Replaces the side-rail style. Hanging opening glyph + emphasized
   italic serif body + small-caps attribution. No bars, no borders. */

.stress-quote {
  position: relative;
  margin: 0.4rem 0 0;
  padding: 0;
  border: none;
  padding-left: 1.25rem;
  font-style: normal;
}

.stress-quote::before {
  content: '\201C';           /* left double quotation mark */
  position: absolute;
  left: -0.1rem;
  top: -0.25rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.85rem;
  line-height: 1;
  color: var(--break-ink);
  opacity: 0.55;
  font-style: normal;
}

.stress-quote-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
  margin: 0;
}

.stress-quote-attrib {
  display: block;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--whisper-ink);
  font-style: normal;
  margin-top: 0.5rem;
}

/* Dark theme variant: slightly lighter quote glyph */
body[data-theme="dark"] .stress-quote::before {
  opacity: 0.65;
}


/* ============================================================
   v0.4.5  Sticky header grid alignment + modern quote
   ============================================================ */

/* ---------- Sticky stage header: shares blueprint's column template ---------- */

/* Blueprint rows use:
   grid-template-columns:
     200px                         /* label */
     minmax(180px, 0.85fr)         /* 1 */
     minmax(180px, 0.85fr)         /* 2 */
     minmax(180px, 0.85fr)         /* 3 */
     minmax(220px, 1fr)            /* 4 */
     minmax(260px, 1.25fr)         /* 5 */
     minmax(220px, 1fr)            /* 6 */
     minmax(220px, 1fr)            /* 7a */
     minmax(220px, 1fr);           /* 7b */
*/

.bp-sticky-header .bp-sticky-inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  max-width: none;
  margin: 0;
  padding: 0;
  align-items: stretch;
  gap: 0;
}

.bp-sticky-label-cell {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-right: 1px solid var(--hairline);
  min-height: 48px;
  flex-shrink: 0;
}

.bp-sticky-label-text {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--whisper-ink);
  white-space: nowrap;
}

.bp-sticky-viewport {
  overflow: hidden;
  position: relative;
}

.bp-sticky-row {
  display: grid;
  grid-template-columns:
    minmax(180px, 0.85fr)
    minmax(180px, 0.85fr)
    minmax(180px, 0.85fr)
    minmax(220px, 1fr)
    minmax(260px, 1.25fr)
    minmax(220px, 1fr)
    minmax(220px, 1fr)
    minmax(220px, 1fr);
  min-width: fit-content;
  transform: translateX(0);
}

.bp-sticky-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.65rem 1rem 0.6rem;
  font: inherit;
  background: transparent;
  border: none;
  border-right: 1px solid var(--hairline);
  cursor: pointer;
  text-align: left;
  color: var(--ink-soft);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 48px;
}

.bp-sticky-stage:last-child { border-right: none; }

.bp-sticky-stage:hover { background: rgba(42, 77, 143, 0.05); color: var(--ink); }

.bp-sticky-stage.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.bp-sticky-stage-actor {
  font-size: 0.54rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.bp-sticky-stage-row {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.bp-sticky-stage-num {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--whisper-ink);
  font-variant-numeric: tabular-nums;
}

.bp-sticky-stage.is-active .bp-sticky-stage-num { color: var(--accent); }

.bp-sticky-stage-name {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Old inline sticky-stages removed */
.bp-sticky-stages { display: none; }

/* Narrow widths: keep the label visible, stages scroll inside viewport */
@media (max-width: 960px) {
  .bp-sticky-header .bp-sticky-inner { grid-template-columns: 160px 1fr; }
  .bp-sticky-label-cell { padding: 0.7rem 1rem; }
}

@media (max-width: 600px) {
  .bp-sticky-header .bp-sticky-inner { grid-template-columns: 0 1fr; }
  .bp-sticky-label-cell { display: none; }
}

/* ============================================================
   Modern quote pattern -- sans-serif italic, no rails, no glyphs
   Reusable class set used by .stress-quote and any future quote
   ============================================================ */

.stress-quote {
  position: relative;
  margin: 0.4rem 0 0;
  padding: 0;
  border: none;
  padding-left: 0;
}

.stress-quote::before { content: none; }

.stress-quote-text {
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.005em;
  margin: 0;
  position: relative;
}

.stress-quote-text::before {
  content: '\201C';
  position: absolute;
  left: -0.5em;
  top: -0.05em;
  color: var(--break-ink);
  opacity: 0.45;
  font-weight: 600;
  font-style: normal;
}

.stress-quote-attrib {
  display: block;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--whisper-ink);
  font-style: normal;
  margin-top: 0.55rem;
}

.stress-quote-text strong { font-weight: 600; font-style: italic; }

/* Inside the cracks column, quote text is given a subtle indent so the
   opening " hangs without colliding with the left rail. */
.stress-col-crack .stress-quote-text {
  padding-left: 0.5em;
}


/* ============================================================
   v0.4.6  Sticky header: JS-driven geometry, flex layout
   Override the grid-based attempt. The sticky element now matches
   the blueprint's actual measured column widths at runtime.
   ============================================================ */

.bp-sticky-header .bp-sticky-inner {
  display: flex;
  grid-template-columns: none;
  align-items: stretch;
  width: 100%;
  gap: 0;
  padding: 0;
  margin: 0;
  max-width: none;
}

.bp-sticky-label-cell {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-right: 1px solid var(--hairline);
  background: transparent;
  box-sizing: border-box;
  /* width is set by JS to match blueprint's label column */
}

.bp-sticky-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.bp-sticky-row {
  display: flex;
  min-width: fit-content;
  transform: translateX(0);
  transition: transform 0s;
}

.bp-sticky-stage {
  flex: 0 0 auto;
  box-sizing: border-box;
  /* width is set by JS to match each stage column */
  border-right: 1px solid var(--hairline);
  min-height: 48px;
  padding: 0.6rem 1rem 0.55rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  background: transparent;
  border-top: none;
  border-bottom: none;
  border-left: none;
  cursor: pointer;
  text-align: left;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  font: inherit;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.bp-sticky-stage:last-child { border-right: none; }

.bp-sticky-stage-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}


/* ============================================================
   v0.5  Blueprint overview card + pill nav sticky
   ============================================================ */

.bp-overview {
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 2rem 2.25rem 1.75rem;
  margin: 2.5rem 0 2rem;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.04), 0 8px 24px -16px rgba(26, 26, 26, 0.08);
}

body[data-theme="dark"] .bp-overview {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 14px 30px -16px rgba(0, 0, 0, 0.5);
}

.bp-overview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.bp-overview-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.bp-overview-kicker {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--whisper-ink);
}

.bp-overview-badges { display: inline-flex; gap: 0.4rem; align-items: center; }

.bp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.bp-badge-live {
  background: rgba(31, 95, 63, 0.1);
  color: var(--hold-ink);
}

.bp-badge-live .bp-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hold-ink);
  box-shadow: 0 0 0 3px rgba(31, 95, 63, 0.15);
}

.bp-badge-scope {
  background: var(--accent-soft);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

body[data-theme="dark"] .bp-badge-live  { background: rgba(127, 212, 163, 0.14); }
body[data-theme="dark"] .bp-badge-scope { background: rgba(140, 176, 255, 0.14); }

.bp-overview-actions { display: inline-flex; gap: 0.4rem; }

.bp-overview-action {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.bp-overview-action:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--bg-elev);
}

.bp-overview-action svg { transition: transform 0.25s ease; }
.bp-overview-action[aria-expanded="false"] svg { transform: rotate(180deg); }

.bp-overview-title {
  font-size: 1.85rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 0.55rem;
  color: var(--ink);
}

.bp-overview-lede {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
  max-width: 68ch;
}

/* ---------- Stage progression rail ---------- */

.bp-progression {
  margin: 0.25rem 0 1.5rem;
  padding: 1.5rem 0 0.5rem;
  border-top: 1px solid var(--hairline);
}

.bp-progression-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  position: relative;
}

.bp-progression-track::before {
  content: '';
  position: absolute;
  left: 6.25%;
  right: 6.25%;
  top: 14px;
  height: 2px;
  background: var(--accent);
  opacity: 0.3;
  border-radius: 1px;
}

.bp-progression-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  position: relative;
  z-index: 1;
  padding: 0 0.25rem;
}

.bp-progression-node {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 2px solid var(--hairline);
  color: var(--ink-soft);
  transition: border-color 0.18s, color 0.18s, background 0.18s, transform 0.18s;
}

.bp-progression-step:hover .bp-progression-node {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.bp-progression-label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--whisper-ink);
  line-height: 1.2;
  white-space: nowrap;
}

.bp-progression-step:hover .bp-progression-label { color: var(--accent); }

.bp-progression-pivot .bp-progression-node {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 4px var(--accent-soft);
}
body[data-theme="dark"] .bp-progression-pivot .bp-progression-node { color: var(--bg); }

.bp-progression-fork .bp-progression-node    { border-color: var(--ink-soft); color: var(--ink); }
.bp-progression-approve .bp-progression-node { border-color: var(--hold-ink); color: var(--hold-ink); }
.bp-progression-reject  .bp-progression-node { border-color: var(--break-ink); color: var(--break-ink); }

/* ---------- Stat tiles ---------- */

.bp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

.bp-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0 1.25rem;
  border-left: 1px solid var(--hairline);
}

.bp-stat:first-child { padding-left: 0; border-left: none; }

.bp-stat-label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--whisper-ink);
  line-height: 1;
}

.bp-stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: 0.1rem;
}

.bp-stat-unit {
  font-size: 0.58em;
  font-weight: 600;
  color: var(--ink-soft);
  margin-left: 0.05em;
}

.bp-stat-sub {
  font-size: 0.72rem;
  color: var(--whisper-ink);
  line-height: 1.35;
  font-weight: 500;
}

.bp-stat-warn .bp-stat-value { color: var(--break-ink); }
.bp-stat-warn .bp-stat-unit  { color: var(--break-ink); }

/* ---------- Collapse state ---------- */
.bp-overview.is-collapsed .bp-overview-title,
.bp-overview.is-collapsed .bp-overview-lede,
.bp-overview.is-collapsed .bp-progression,
.bp-overview.is-collapsed .bp-stats { display: none; }

.bp-overview.is-collapsed { padding-bottom: 1.25rem; }

/* ---------- Sticky pill nav  (replaces aligned-column attempt) ---------- */

.bp-sticky-header {
  top: 58px;
  border-bottom: 1px solid var(--hairline);
  background: var(--sticky-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.bp-sticky-header .bp-sticky-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: var(--max-w, 1200px);
  margin: 0 auto;
  padding: 0.5rem 1.5rem;
  box-sizing: border-box;
  grid-template-columns: none;
}

.bp-sticky-label-text {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--whisper-ink);
  white-space: nowrap;
  flex-shrink: 0;
}

.bp-sticky-viewport {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.bp-sticky-viewport::-webkit-scrollbar { display: none; }

.bp-sticky-row {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0;
  min-width: auto;
  transform: none !important;
}

.bp-sticky-stage {
  flex: 0 0 auto;
  padding: 0.35rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  min-height: 30px;
  box-shadow: none;
  width: auto !important;
  min-width: 0 !important;
}

.bp-sticky-stage-actor { display: none; }  /* keep pills compact */

.bp-sticky-stage-row {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

.bp-sticky-stage:hover { background: var(--accent-soft); color: var(--accent); }
.bp-sticky-stage:hover .bp-sticky-stage-num { color: var(--accent); }

.bp-sticky-stage.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.bp-sticky-stage.is-active .bp-sticky-stage-num { color: #fff; }

.bp-sticky-stage-num {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--whisper-ink);
  font-variant-numeric: tabular-nums;
}

.bp-sticky-stage-name {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Hide the label cell wrapper that's no longer used */
.bp-sticky-label-cell { display: none; }

@media (max-width: 960px) {
  .bp-overview { padding: 1.5rem 1.5rem 1.25rem; }
  .bp-overview-title { font-size: 1.5rem; }
  .bp-progression-track { grid-template-columns: repeat(4, 1fr); row-gap: 1rem; }
  .bp-progression-track::before { display: none; }
  .bp-stats { grid-template-columns: repeat(2, 1fr); row-gap: 1.25rem; }
  .bp-stat { padding: 0 0.75rem; }
  .bp-stat:nth-child(3) { border-left: none; padding-left: 0; }
}

@media (max-width: 600px) {
  .bp-progression-track { grid-template-columns: repeat(2, 1fr); }
  .bp-stats { grid-template-columns: 1fr; }
  .bp-stat { border-left: none; padding-left: 0; padding-top: 1rem; border-top: 1px solid var(--hairline); }
  .bp-stat:first-child { padding-top: 0; border-top: none; }
}


/* ============================================================
   v0.5.1  Simplify journey hero
   - Drop the overview card + progression rail + 4 stat tiles
   - Introduce .journey-hero that mirrors .evidence-payoff so the
     blueprint is bookended by matching stat-driven moments.
   ============================================================ */

/* Retire the overview card rules (no markup to render) */
.bp-overview,
.bp-overview-top,
.bp-overview-meta,
.bp-overview-kicker,
.bp-overview-badges,
.bp-overview-actions,
.bp-overview-action,
.bp-overview-title,
.bp-overview-lede,
.bp-progression,
.bp-progression-track,
.bp-progression-step,
.bp-progression-node,
.bp-progression-label,
.bp-progression-pivot,
.bp-progression-fork,
.bp-progression-approve,
.bp-progression-reject,
.bp-stats,
.bp-stat,
.bp-stat-label,
.bp-stat-value,
.bp-stat-unit,
.bp-stat-sub,
.bp-stat-warn,
.bp-badge,
.bp-badge-live,
.bp-badge-dot,
.bp-badge-scope {
  /* no-op; markup is gone */
}

/* ---------- Journey hero: dashboard-style intro to the blueprint ---------- */

.journey-hero {
  margin: 2rem 0 2.25rem;
  padding: 1.75rem 2rem 1.5rem;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  max-width: 860px;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.03), 0 8px 22px -18px rgba(26, 26, 26, 0.08);
}

body[data-theme="dark"] .journey-hero {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 12px 26px -16px rgba(0, 0, 0, 0.4);
}

.journey-hero-eyebrow {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 0.6rem;
  line-height: 1;
}

.journey-hero-statement {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 1.35rem;
  max-width: 58ch;
}

.journey-hero-lede {
  color: var(--ink);
  font-weight: 700;
  margin-right: 0.3rem;
}

.journey-hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 1rem 0 0.4rem;
  border-top: 1px solid var(--hairline);
}

.journey-hero-stat {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  row-gap: 0.1rem;
  align-items: baseline;
  padding: 0 1.25rem 0 0;
}

.journey-hero-stat + .journey-hero-stat {
  padding-left: 1.25rem;
  border-left: 1px solid var(--hairline);
}

.journey-hero-stat-context {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-soft);
  font-weight: 500;
  align-self: center;
}

.journey-hero-stat-value {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
  justify-self: end;
}

.journey-hero-stat-unit {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--ink-soft);
  margin-left: 0.02em;
}

.journey-hero-stat-label {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--font-display);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--whisper-ink);
  justify-self: end;
  line-height: 1;
  margin-top: 0.15rem;
}

/* Semantic color accents on the value */
.journey-hero-stat-hold  .journey-hero-stat-value { color: var(--hold-ink); }
.journey-hero-stat-hold  .journey-hero-stat-unit  { color: var(--hold-ink); }
.journey-hero-stat-break .journey-hero-stat-value { color: var(--break-ink); }
.journey-hero-stat-break .journey-hero-stat-unit  { color: var(--break-ink); }

.journey-hero-citation {
  font-size: 0.7rem;
  color: var(--whisper-ink);
  font-style: italic;
  margin: 0.9rem 0 0;
  line-height: 1.4;
}

/* Hide the old .framing-insight markup if any version remains */
.framing-insight { display: none; }

@media (max-width: 720px) {
  .journey-hero { padding: 1.5rem 1.25rem 1.35rem; }
  .journey-hero-statement { font-size: 1.05rem; }
  .journey-hero-stats { grid-template-columns: 1fr; }
  .journey-hero-stat + .journey-hero-stat {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--hairline);
    padding-top: 1rem;
    margin-top: 0.6rem;
  }
  .journey-hero-stat-value { font-size: 1.75rem; }
}


/* ============================================================
   v0.5.2  Move framing finding to Section 4, clean Section 3 hero
   Section 3 is now pure wayfinding: title, lede, legend, map.
   Section 4 opens with the preamble (framing finding) and closes
   with the payoff (3.3x). Matching bookends.
   ============================================================ */

/* Journey hero markup is gone; retire its styles */
.journey-hero,
.journey-hero-eyebrow,
.journey-hero-statement,
.journey-hero-lede,
.journey-hero-stats,
.journey-hero-stat,
.journey-hero-stat-context,
.journey-hero-stat-value,
.journey-hero-stat-unit,
.journey-hero-stat-label,
.journey-hero-stat-hold,
.journey-hero-stat-break,
.journey-hero-citation { /* no-op, no markup */ }

.journey-hero { display: none; }

/* ---------- Section 3: clean hero rhythm ---------- */
.section-journey .section-lede { max-width: 58ch; margin-bottom: 1.25rem; }
.blueprint-legend { margin-top: 0.5rem; }

/* ---------- Section 4 preamble: dashboard-style intro ---------- */

.evidence-preamble {
  margin: 2.25rem 0 3rem;
  padding: 0.5rem 0 0;
  max-width: 860px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

body[data-theme="dark"] .evidence-preamble {
  box-shadow: none;
}

.evidence-preamble-eyebrow {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 0.6rem;
  line-height: 1;
}

.evidence-preamble-statement {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 1.35rem;
  max-width: 58ch;
}

.evidence-preamble-lede {
  color: var(--ink);
  font-weight: 700;
  margin-right: 0.25rem;
}

.evidence-preamble-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 1rem 0 0.4rem;
  border-top: 1px solid var(--hairline);
}

.evidence-preamble-stat {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  row-gap: 0.1rem;
  align-items: baseline;
  padding: 0 1.25rem 0 0;
}

.evidence-preamble-stat + .evidence-preamble-stat {
  padding-left: 1.25rem;
  border-left: 1px solid var(--hairline);
}

.evidence-preamble-stat-context {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-soft);
  font-weight: 500;
  align-self: center;
}

.evidence-preamble-stat-value {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
  justify-self: end;
}

.evidence-preamble-stat-unit {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--ink-soft);
  margin-left: 0.02em;
}

.evidence-preamble-stat-label {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--font-display);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--whisper-ink);
  justify-self: end;
  line-height: 1;
  margin-top: 0.15rem;
}

.evidence-preamble-stat-hold  .evidence-preamble-stat-value { color: var(--hold-ink); }
.evidence-preamble-stat-hold  .evidence-preamble-stat-unit  { color: var(--hold-ink); }
.evidence-preamble-stat-break .evidence-preamble-stat-value { color: var(--break-ink); }
.evidence-preamble-stat-break .evidence-preamble-stat-unit  { color: var(--break-ink); }

.evidence-preamble-citation {
  font-size: 0.7rem;
  color: var(--whisper-ink);
  font-style: italic;
  margin: 0.9rem 0 0;
  line-height: 1.4;
}

/* Sticky column header for bet stress should now sit below the preamble,
   not under the section title. Already handled by its sticky offset. */
.bet-stress-columns { margin-top: 0.5rem; }

@media (max-width: 720px) {
  .evidence-preamble { padding: 1.5rem 1.25rem 1.35rem; }
  .evidence-preamble-statement { font-size: 1.05rem; }
  .evidence-preamble-stats { grid-template-columns: 1fr; }
  .evidence-preamble-stat + .evidence-preamble-stat {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--hairline);
    padding-top: 1rem;
    margin-top: 0.6rem;
  }
  .evidence-preamble-stat-value { font-size: 1.75rem; }
}


/* ============================================================
   v0.5.3  Strip cluttered lead-in to the blueprint
   - Drop the redundant legend (lanes are labeled in the map)
   - Quiet the sticky pill nav typography (no uppercase name)
   - Tighten section hero rhythm
   ============================================================ */

/* Legend is no longer in the markup */
.blueprint-legend,
.bp-legend-item,
.bp-legend-dot { display: none; }

/* ---------- Section 3 hero rhythm ---------- */
.section-journey { padding-top: 4.5rem; padding-bottom: 0; }

.section-journey .section-inner { padding-bottom: 0.25rem; }

.section-journey .section-title { margin-bottom: 0.75rem; }
.section-journey .section-lede  { margin-bottom: 1.5rem; max-width: 60ch; }

/* ---------- Sticky pill nav: calmer, simpler, single line ---------- */

.bp-sticky-header {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.bp-sticky-header .bp-sticky-inner {
  padding: 0.55rem 1.5rem;
  gap: 1.25rem;
}

.bp-sticky-label-text {
  color: var(--whisper-ink);
  opacity: 0.85;
}

/* Pills: pure type, no boxes at rest. Only the active pill gets a chip. */
.bp-sticky-stage {
  padding: 0.3rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  min-height: 26px;
  gap: 0.35rem;
}

.bp-sticky-stage-row {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}

.bp-sticky-stage-num {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--whisper-ink);
}

.bp-sticky-stage-name {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}

.bp-sticky-stage:hover {
  background: transparent;
  color: var(--ink);
}
.bp-sticky-stage:hover .bp-sticky-stage-num { color: var(--ink); }
.bp-sticky-stage:hover .bp-sticky-stage-name { color: var(--ink); font-weight: 600; }

.bp-sticky-stage.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
  box-shadow: none;
}
.bp-sticky-stage.is-active .bp-sticky-stage-num  { color: var(--accent); }
.bp-sticky-stage.is-active .bp-sticky-stage-name { color: var(--accent); font-weight: 600; }

/* Give the map a tiny breathing room above, below the sticky nav */
.bp-wrap { margin-top: 0.75rem; }

@media (max-width: 720px) {
  .bp-sticky-header .bp-sticky-inner { padding: 0.4rem 1rem; gap: 0.75rem; }
  .bp-sticky-label-text { display: none; }
}


/* ============================================================
   v0.5.4  Sticky Line of Visibility strip
   Docks below the stages nav once the real LoV band has scrolled
   past. Preserves the invisibility bet identity for the rest of
   the scroll through the map. Typographic, no glyphs, no pills.
   ============================================================ */

.bp-sticky-lov {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9;                    /* below the stage nav (z 10) */
  top: 102px;                    /* stack below the top bar + sticky stages */
  background: var(--bp-visibility-band);
  border-top: 1px solid var(--bp-visibility-edge);
  border-bottom: 1px solid var(--bp-visibility-edge);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.2s ease;
}

.bp-sticky-lov.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.bp-sticky-lov-inner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  max-width: var(--max-w, 1200px);
  margin: 0 auto;
  padding: 0.45rem 1.5rem;
  box-sizing: border-box;
  color: var(--bp-visibility-ink);
}

.bp-sticky-lov-eyebrow {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bp-visibility-ink);
  opacity: 0.75;
  white-space: nowrap;
}

.bp-sticky-lov-divider {
  width: 1px;
  height: 14px;
  background: var(--bp-visibility-edge);
  opacity: 0.55;
}

.bp-sticky-lov-title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bp-visibility-ink);
  font-style: italic;
}

.bp-sticky-lov-tag {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bp-visibility-ink);
  opacity: 0.75;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .bp-sticky-lov { top: 94px; }
  .bp-sticky-lov-inner { padding: 0.4rem 1rem; gap: 0.65rem; }
  .bp-sticky-lov-title { font-size: 0.8rem; }
}

@media (max-width: 600px) {
  .bp-sticky-lov-eyebrow,
  .bp-sticky-lov-tag { display: none; }
  .bp-sticky-lov-divider { display: none; }
}


/* ============================================================
   v0.5.4  Line of Visibility band -- keep title in view on H-scroll
   ============================================================ */

/* The band spans grid-column: 2 / -1 (starts past the 200px label).
   Sticky elements' `left` is measured from the .blueprint scroll
   container's origin, so they need to stick at 200px (just past the
   sticky label column) to avoid overlapping it. */

.bp-sep-band-visibility {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: nowrap;
  padding: 0.75rem 1.25rem;
  overflow: visible;
  z-index: 1;
}

.bp-sep-band-visibility .bp-sep-band-glyph,
.bp-sep-band-visibility .bp-sep-band-title,
.bp-sep-band-visibility .bp-sep-band-scope {
  position: sticky;
  z-index: 2;  /* sits above scrolling content, below label column (z:4) */
  background: var(--bp-visibility-band);
  white-space: nowrap;
}

/* Sticky coordinates are measured from .blueprint's scroll-left,
   so we offset past the 200px label column. Each sticky element
   sits next to the previous one with cumulative left offsets. */
.bp-sep-band-visibility .bp-sep-band-glyph {
  left: 200px;
  padding: 0.15rem 0.2rem 0.15rem 1.25rem;
  flex-shrink: 0;
}

.bp-sep-band-visibility .bp-sep-band-title {
  left: 246px; /* 200 label + 18 icon + 1.25rem icon padding-left + gap */
  flex-shrink: 0;
  padding-right: 0.8rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.bp-sep-band-visibility .bp-sep-band-scope {
  left: 530px; /* after the title */
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--bp-visibility-ink);
  opacity: 0.88;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding-right: 1rem;
  mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
}

/* Responsive: narrower label column at <=960px */
@media (max-width: 960px) {
  .bp-sep-band-visibility .bp-sep-band-glyph { left: 160px; }
  .bp-sep-band-visibility .bp-sep-band-title { left: 206px; }
  .bp-sep-band-visibility .bp-sep-band-scope { left: 490px; }
}

/* Retire legacy state pills styling (no markup) */
.bp-sep-band-states,
.inv-state,
.inv-state-dot,
.inv-state-text,
.inv-state-sep { display: none; }



/* ============================================================
   v0.5.5  Scroll arrow placement anchored to blueprint
   ============================================================ */

.bp-wrap { position: relative; }

.bp-scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.bp-scroll-left  { left: 0.5rem; right: auto; }
.bp-scroll-right { right: 0.5rem; left: auto; }

@media (max-width: 600px) {
  .bp-scroll-left  { left: 0.25rem; }
  .bp-scroll-right { right: 0.25rem; }
}


/* ============================================================
   v0.6  Bet Sigil system -- consistent visual lockup per bet
   The sigil is an icon + number pair that identifies each bet
   everywhere it's referenced on the page. Three sizes: sm, md, lg.
   Each bet owns a color drawn from the existing theme palette.
   ============================================================ */

/* ---------- Per-bet color tokens ---------- */
:root {
  --bet-1-ink: var(--bp-chip-1-ink);
  --bet-1-bg:  rgba(42, 77, 143, 0.08);
  --bet-1-edge: var(--bp-chip-1-edge);

  --bet-2-ink: var(--bp-chip-2-ink);
  --bet-2-bg:  rgba(87, 64, 128, 0.08);
  --bet-2-edge: var(--bp-chip-2-edge);

  --bet-3-ink: var(--bp-chip-3-ink);
  --bet-3-bg:  rgba(138, 90, 42, 0.08);
  --bet-3-edge: var(--bp-chip-3-edge);

  --bet-4-ink: var(--bp-visibility-ink);
  --bet-4-bg:  rgba(110, 74, 12, 0.10);
  --bet-4-edge: var(--bp-visibility-edge);
}

body[data-theme="warm"] {
  --bet-1-bg: rgba(90, 58, 10, 0.09);
  --bet-2-bg: rgba(106, 58, 40, 0.09);
  --bet-3-bg: rgba(138, 90, 42, 0.09);
  --bet-4-bg: rgba(90, 58, 10, 0.12);
}

body[data-theme="dark"] {
  --bet-1-bg: rgba(169, 196, 232, 0.18);
  --bet-2-bg: rgba(198, 180, 220, 0.18);
  --bet-3-bg: rgba(229, 185, 133, 0.18);
  --bet-4-bg: rgba(240, 219, 160, 0.22);
}

/* ---------- Dark mode: chip text reads on --ink, color identity stays
              in the icon + border ----------
   Pastel bet inks on a tinted-pastel chip become same-hue-on-same-hue
   in dark mode. At 0.65rem that collapses readability even though the
   luminance contrast is fine. Neutralizing chip text and letting the
   icon + border carry the bet color is a standard dark-chip pattern
   and keeps the bet system visually coherent. */
body[data-theme="dark"] .bp-bet-chip[data-bet="1"],
body[data-theme="dark"] .bp-bet-chip[data-bet="2"],
body[data-theme="dark"] .bp-bet-chip[data-bet="3"],
body[data-theme="dark"] .bp-bet-chip[data-bet="4"],
body[data-theme="dark"] .phase-bet[data-bet]:hover,
body[data-theme="dark"] .roadmap-bet[data-bet]:hover {
  color: var(--ink);
}
/* Icon inside small chips: neutralize so the silhouette reads
   cleanly. At 14px the pastel-on-pastel-tint pairing erases the
   glyph. Silhouettes (figure / fork / stopwatch / eye) are
   distinctive enough to signal bet identity without color. The big
   sigil tiles (.bet-sigil-lg, .bet-item .bet-sigil) still carry the
   colored icon on their tinted disk because they have the scale for
   it to read, and .phase-bet uses an inverse pattern (colored disc
   with glyph carved in --bg) that works on its own. */
body[data-theme="dark"] .bp-bet-chip .bet-sigil-icon,
body[data-theme="dark"] .roadmap-bet .bet-sigil-icon {
  color: var(--ink);
}
/* Preserve the small sigil used inside the Line-of-Visibility sticky
   label -- that one already inverts (icon color = --bg) intentionally. */
/* Sigil number badge inside chip: also neutralize so it doesn't
   disappear against the chip tint. */
body[data-theme="dark"] .bp-bet-chip .bet-sigil-num {
  color: var(--ink-soft);
}

/* ---------- The sigil component ---------- */

.bet-sigil {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  line-height: 1;
  flex-shrink: 0;
  color: var(--ink);
  /* Default (md) size */
  font-size: 0.82rem;
}

.bet-sigil[data-bet="1"] { color: var(--bet-1-ink); }
.bet-sigil[data-bet="2"] { color: var(--bet-2-ink); }
.bet-sigil[data-bet="3"] { color: var(--bet-3-ink); }
.bet-sigil[data-bet="4"] { color: var(--bet-4-ink); }

.bet-sigil-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  /* Icon scales with sigil font-size */
  font-size: 1.25em;
}

.bet-sigil-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  font-size: 0.85em;
  color: currentColor;
}

/* ---------- Sigil sizes ---------- */

.bet-sigil-sm {
  font-size: 0.72rem;
  gap: 0.3em;
}

.bet-sigil-lg {
  /* Display sigil: icon chip with number, stacked above bet name. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--bet-bg, var(--accent-soft));
  box-shadow: inset 0 0 0 1px var(--bet-edge, var(--hairline));
}

.bet-sigil-lg[data-bet="1"] { background: var(--bet-1-bg); box-shadow: inset 0 0 0 1px var(--bet-1-edge); }
.bet-sigil-lg[data-bet="2"] { background: var(--bet-2-bg); box-shadow: inset 0 0 0 1px var(--bet-2-edge); }
.bet-sigil-lg[data-bet="3"] { background: var(--bet-3-bg); box-shadow: inset 0 0 0 1px var(--bet-3-edge); }
.bet-sigil-lg[data-bet="4"] { background: var(--bet-4-bg); box-shadow: inset 0 0 0 1px var(--bet-4-edge); }

.bet-sigil-lg .bet-sigil-icon {
  width: 22px;
  height: 22px;
  font-size: 1rem;
}

.bet-sigil-lg .bet-sigil-num {
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  opacity: 0.85;
}

/* ---------- Section 1: bet row with sigils instead of plain number ---------- */

.bet-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  row-gap: 0.45rem;
  align-items: start;
}

.bet-item .bet-sigil {
  /* Auto-upgraded to lg size in Section 1 for hierarchy */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: flex-start;
}

.bet-item[data-bet="1"] .bet-sigil { background: var(--bet-1-bg); box-shadow: inset 0 0 0 1px var(--bet-1-edge); }
.bet-item[data-bet="2"] .bet-sigil { background: var(--bet-2-bg); box-shadow: inset 0 0 0 1px var(--bet-2-edge); }
.bet-item[data-bet="3"] .bet-sigil { background: var(--bet-3-bg); box-shadow: inset 0 0 0 1px var(--bet-3-edge); }
.bet-item[data-bet="4"] .bet-sigil { background: var(--bet-4-bg); box-shadow: inset 0 0 0 1px var(--bet-4-edge); }

.bet-item .bet-sigil-icon {
  width: 22px;
  height: 22px;
  font-size: 1rem;
}

.bet-item .bet-sigil-num {
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  opacity: 0.85;
}

.bet-item .bet-item-name {
  grid-column: 2;
  grid-row: 1;
}

.bet-item .bet-item-why {
  grid-column: 2;
  grid-row: 2;
}

/* Hide the old num (replaced by sigil but kept for safety) */
.bet-item .bet-item-num { display: none; }

/* ---------- Section 3 blueprint bet chips with sigil ---------- */

.bp-bet-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem 0.25rem 0.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.72rem;
  font-weight: 600;
  background: transparent;
}

.bp-bet-chip[data-bet="1"] { background: var(--bet-1-bg); color: var(--bet-1-ink); border-color: var(--bet-1-edge); }
.bp-bet-chip[data-bet="2"] { background: var(--bet-2-bg); color: var(--bet-2-ink); border-color: var(--bet-2-edge); }
.bp-bet-chip[data-bet="3"] { background: var(--bet-3-bg); color: var(--bet-3-ink); border-color: var(--bet-3-edge); }
.bp-bet-chip[data-bet="4"] { background: var(--bet-4-bg); color: var(--bet-4-ink); border-color: var(--bet-4-edge); }

.bp-bet-chip .bet-sigil-icon {
  width: 14px;
  height: 14px;
  font-size: 0.82rem;
  color: inherit;
}

.bp-bet-chip .bet-sigil-num {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  opacity: 0.9;
}

/* ---------- Section 3 Line of Visibility sigil in label ---------- */

.bp-sep-label-visibility .bp-sep-sub .bet-sigil {
  padding: 0.25rem 0.55rem 0.25rem 0.4rem;
  border-radius: 999px;
  background: var(--bg-elev);
  box-shadow: inset 0 0 0 1px var(--bet-4-edge);
  color: var(--bet-4-ink);
  font-size: 0.7rem;
}

.bp-sep-label-visibility .bp-sep-sub .bet-sigil-icon {
  width: 13px;
  height: 13px;
}

.bp-sep-label-visibility .bp-sep-sub .bet-sigil-num {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
}

/* ---------- Section 4 bet stress head ---------- */

.bet-stress-head {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  row-gap: 0.25rem;
  align-items: start;
  gap: 0;
}

.bet-stress-head .bet-sigil-lg {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: flex-start;
  margin-top: 0.1rem;
}

.bet-stress-head .bet-stress-name {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

.bet-stress-head .bet-stress-sub {
  grid-column: 2;
  grid-row: 2;
}

/* Hide the legacy num */
.bet-stress-head .bet-stress-num { display: none; }

/* Row accent: soft vertical rail on the left of each bet block matching sigil color */
.bet-stress-item[data-bet="1"] .bet-stress-head .bet-stress-name { color: var(--ink); }
.bet-stress-item[data-bet="2"] .bet-stress-head .bet-stress-name { color: var(--ink); }
.bet-stress-item[data-bet="3"] .bet-stress-head .bet-stress-name { color: var(--ink); }
.bet-stress-item[data-bet="4"] .bet-stress-head .bet-stress-name { color: var(--ink); }

/* ---------- Section 5 roadmap-bet chip with sigil ---------- */

.roadmap-bet {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem 0.3rem 0.4rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.roadmap-bet[data-bet="1"] { border-color: var(--bet-1-edge); }
.roadmap-bet[data-bet="2"] { border-color: var(--bet-2-edge); }
.roadmap-bet[data-bet="3"] { border-color: var(--bet-3-edge); }
.roadmap-bet[data-bet="4"] { border-color: var(--bet-4-edge); }

.roadmap-bet:hover[data-bet="1"] { background: var(--bet-1-bg); color: var(--bet-1-ink); }
.roadmap-bet:hover[data-bet="2"] { background: var(--bet-2-bg); color: var(--bet-2-ink); }
.roadmap-bet:hover[data-bet="3"] { background: var(--bet-3-bg); color: var(--bet-3-ink); }
.roadmap-bet:hover[data-bet="4"] { background: var(--bet-4-bg); color: var(--bet-4-ink); }

.roadmap-bet .bet-sigil {
  color: var(--ink-soft);
}

.roadmap-bet[data-bet="1"] .bet-sigil { color: var(--bet-1-ink); }
.roadmap-bet[data-bet="2"] .bet-sigil { color: var(--bet-2-ink); }
.roadmap-bet[data-bet="3"] .bet-sigil { color: var(--bet-3-ink); }
.roadmap-bet[data-bet="4"] .bet-sigil { color: var(--bet-4-ink); }

.roadmap-bet .bet-sigil-icon {
  width: 13px;
  height: 13px;
}

.roadmap-bet .bet-sigil-num {
  font-size: 0.54rem;
  letter-spacing: 0.16em;
}

/* Hide legacy roadmap-bet-num */
.roadmap-bet-num { display: none; }

/* ---------- Cross-bet highlight: promote matching sigil ---------- */

body[data-bet-highlight="1"] .bet-sigil[data-bet="1"],
body[data-bet-highlight="2"] .bet-sigil[data-bet="2"],
body[data-bet-highlight="3"] .bet-sigil[data-bet="3"],
body[data-bet-highlight="4"] .bet-sigil[data-bet="4"] {
  transform: scale(1.03);
  transition: transform 0.2s ease;
}

body[data-bet-highlight] .bet-sigil { transition: transform 0.2s ease; }

@media (max-width: 720px) {
  .bet-item { grid-template-columns: 44px 1fr; column-gap: 0.7rem; }
  .bet-item .bet-sigil { width: 44px; height: 44px; padding: 0.4rem; }
  .bet-item .bet-sigil-icon { width: 18px; height: 18px; }

  .bet-stress-head { grid-template-columns: 44px 1fr; column-gap: 0.7rem; }
  .bet-stress-head .bet-sigil-lg { width: 44px; height: 44px; padding: 0.4rem; }
}


/* ============================================================
   v0.6.1  Sigil recognition pass
   Solve small-size recognition problem by:
   1) Making the Section 1 training sigil bigger and bolder
   2) At small sizes, icon becomes the lead (colored fill on a
      circular ink-matched disc) so the silhouette + color do the
      work. Number sits beside the disc as a secondary ID.
   3) Icon strokes thickened uniformly for weight at any scale.
   ============================================================ */

/* ---------- Stroke weight: bump for visibility at small sizes ---------- */
.bet-sigil-icon path,
.bet-sigil-icon circle,
.bet-sigil-icon line,
.bet-sigil-icon polyline {
  /* currentColor already applied; 1.7 stroke set in SVG symbols */
}

/* Dark mode: pastel inks with low chroma need more stroke weight to
   hold their silhouette. Pushes 1.7 -> 2.0, keeps the line quality
   consistent across themes. */
body[data-theme="dark"] .bet-sigil-icon path,
body[data-theme="dark"] .bet-sigil-icon circle,
body[data-theme="dark"] .bet-sigil-icon line,
body[data-theme="dark"] .bet-sigil-icon polyline {
  stroke-width: 2;
}

/* ---------- Section 1: the training tile (big, bold, colored disc) ---------- */

.bet-item {
  grid-template-columns: 72px 1fr;
  column-gap: 1rem;
  row-gap: 0.5rem;
}

.bet-item .bet-sigil {
  width: 72px;
  height: 72px;
  padding: 0;
  border-radius: 16px;
  flex-direction: column;
  gap: 0;
  position: relative;
  background: var(--bet-1-bg);
  box-shadow: inset 0 0 0 1px var(--bet-1-edge), 0 2px 10px -6px rgba(26, 26, 26, 0.15);
}

.bet-item[data-bet="1"] .bet-sigil { background: var(--bet-1-bg); box-shadow: inset 0 0 0 1px var(--bet-1-edge), 0 2px 10px -6px rgba(42, 77, 143, 0.25); }
.bet-item[data-bet="2"] .bet-sigil { background: var(--bet-2-bg); box-shadow: inset 0 0 0 1px var(--bet-2-edge), 0 2px 10px -6px rgba(87, 64, 128, 0.25); }
.bet-item[data-bet="3"] .bet-sigil { background: var(--bet-3-bg); box-shadow: inset 0 0 0 1px var(--bet-3-edge), 0 2px 10px -6px rgba(138, 90, 42, 0.25); }
.bet-item[data-bet="4"] .bet-sigil { background: var(--bet-4-bg); box-shadow: inset 0 0 0 1px var(--bet-4-edge), 0 2px 10px -6px rgba(110, 74, 12, 0.25); }

/* Dark mode: bump tile saturation on the big Section 1 hero tiles so
   the pastel icon silhouette reads cleanly against a more-pigmented
   disc. Stays soft and editorial -- just deeper tint, not inverse.
   Applies to Section 1 hero tiles and the Section 4 stress-test
   section heads (.bet-sigil-lg). */
body[data-theme="dark"] .bet-item[data-bet="1"] .bet-sigil,
body[data-theme="dark"] .bet-sigil-lg[data-bet="1"] { background: rgba(169, 196, 232, 0.32); }
body[data-theme="dark"] .bet-item[data-bet="2"] .bet-sigil,
body[data-theme="dark"] .bet-sigil-lg[data-bet="2"] { background: rgba(198, 180, 220, 0.32); }
body[data-theme="dark"] .bet-item[data-bet="3"] .bet-sigil,
body[data-theme="dark"] .bet-sigil-lg[data-bet="3"] { background: rgba(229, 185, 133, 0.32); }
body[data-theme="dark"] .bet-item[data-bet="4"] .bet-sigil,
body[data-theme="dark"] .bet-sigil-lg[data-bet="4"] { background: rgba(240, 219, 160, 0.36); }

/* Big tile icon: neutralize to --ink so the glyph silhouette reads
   against the tinted disc. Color identity stays in the disc itself.
   Same pattern we use for small chips, applied to the hero tiles.
   (Duplicated/reinforced at the end of the file to guarantee cascade
   win over later responsive/variant rules.) */
body[data-theme="dark"] .bet-item .bet-sigil-icon,
body[data-theme="dark"] .bet-sigil-lg .bet-sigil-icon {
  color: var(--ink);
}
/* The sigil number overlay (little "01" chip on Section 1 big tile) --
   also neutralize so it doesn't vanish into the disc. */
body[data-theme="dark"] .bet-item .bet-sigil-num,
body[data-theme="dark"] .bet-sigil-lg .bet-sigil-num {
  color: var(--ink);
}

.bet-item .bet-sigil-icon {
  width: 32px;
  height: 32px;
  font-size: 1rem;
  margin-top: 8px;
}

.bet-item .bet-sigil-num {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  opacity: 0.75;
}

/* ---------- Section 4 stress head: match Section 1 sizing ---------- */

.bet-stress-head {
  grid-template-columns: 72px 1fr;
  column-gap: 1rem;
}

.bet-stress-head .bet-sigil-lg {
  width: 72px;
  height: 72px;
  padding: 0;
  border-radius: 16px;
  position: relative;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
}

.bet-stress-head .bet-sigil-lg .bet-sigil-icon {
  width: 32px;
  height: 32px;
  margin-top: 8px;
}

.bet-stress-head .bet-sigil-lg .bet-sigil-num {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  opacity: 0.75;
}

/* ---------- Small sigils: solid color disc so recognition = color + icon ---------- */
/* When sigil appears in a chip or tight inline context, the icon sits
   on a colored disc (filled in the bet's color) for glance recognition.
   The number becomes secondary, set after the disc. */

.bp-bet-chip,
.roadmap-bet,
.bp-sep-label-visibility .bp-sep-sub .bet-sigil {
  /* container chips */
}

.bp-bet-chip .bet-sigil-icon,
.roadmap-bet .bet-sigil-icon {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  color: #fff;
  flex-shrink: 0;
}

body[data-theme="dark"] .bp-bet-chip .bet-sigil-icon,
body[data-theme="dark"] .roadmap-bet .bet-sigil-icon {
  color: var(--bg);
}

.bp-bet-chip[data-bet="1"] .bet-sigil-icon,
.roadmap-bet[data-bet="1"] .bet-sigil-icon { background: var(--bet-1-ink); }
.bp-bet-chip[data-bet="2"] .bet-sigil-icon,
.roadmap-bet[data-bet="2"] .bet-sigil-icon { background: var(--bet-2-ink); }
.bp-bet-chip[data-bet="3"] .bet-sigil-icon,
.roadmap-bet[data-bet="3"] .bet-sigil-icon { background: var(--bet-3-ink); }
.bp-bet-chip[data-bet="4"] .bet-sigil-icon,
.roadmap-bet[data-bet="4"] .bet-sigil-icon { background: var(--bet-4-ink); }

/* Line of Visibility sticky label: same treatment */
.bp-sep-label-visibility .bp-sep-sub .bet-sigil-icon {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: var(--bet-4-ink);
  color: #fff;
  flex-shrink: 0;
}

body[data-theme="dark"] .bp-sep-label-visibility .bp-sep-sub .bet-sigil-icon {
  color: var(--bg);
}

.bp-sep-label-visibility .bp-sep-sub .bet-sigil {
  background: transparent;
  box-shadow: none;
  padding: 0;
  gap: 0.4rem;
}

/* Number in chips sits beside the disc, compact */
.bp-bet-chip .bet-sigil-num,
.roadmap-bet .bet-sigil-num {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  opacity: 0.85;
  color: currentColor;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .bet-item { grid-template-columns: 56px 1fr; column-gap: 0.75rem; }
  .bet-item .bet-sigil { width: 56px; height: 56px; border-radius: 12px; }
  .bet-item .bet-sigil-icon { width: 24px; height: 24px; margin-top: 6px; }
  .bet-item .bet-sigil-num { bottom: 6px; font-size: 0.52rem; }

  .bet-stress-head { grid-template-columns: 56px 1fr; column-gap: 0.75rem; }
  .bet-stress-head .bet-sigil-lg { width: 56px; height: 56px; border-radius: 12px; }
  .bet-stress-head .bet-sigil-lg .bet-sigil-icon { width: 24px; height: 24px; margin-top: 6px; }
  .bet-stress-head .bet-sigil-lg .bet-sigil-num { bottom: 6px; font-size: 0.52rem; }
}


/* ============================================================
   v0.6.2  Sigil balance + small-size recognition
   - Large tiles: center the icon, move number to a corner chip
   - Small chips: drop the number, enlarge the colored disc so the
     icon + color lockup carries the bet ID on its own
   ============================================================ */

/* ---------- Large tile (Section 1 + Section 4): centered icon ---------- */

.bet-item .bet-sigil,
.bet-stress-head .bet-sigil-lg {
  /* Override column stack -- icon centers, number badge floats top-right */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.bet-item .bet-sigil-icon,
.bet-stress-head .bet-sigil-lg .bet-sigil-icon {
  width: 34px;
  height: 34px;
  margin-top: 0;
}

/* Number as a tiny corner chip: non-competing, still present */
.bet-item .bet-sigil-num,
.bet-stress-head .bet-sigil-lg .bet-sigil-num {
  position: absolute;
  top: 6px;
  right: 8px;
  bottom: auto;
  left: auto;
  transform: none;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  opacity: 0.55;
  font-weight: 700;
}

/* ---------- Small inline chips: enlarge the disc, drop the number ---------- */

.bp-bet-chip,
.roadmap-bet {
  padding: 0.28rem 0.7rem 0.28rem 0.35rem;
  gap: 0.5rem;
}

.bp-bet-chip .bet-sigil-icon,
.roadmap-bet .bet-sigil-icon {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
}

/* Hide the redundant number at chip scale -- icon + color + label is enough */
.bp-bet-chip .bet-sigil-num,
.roadmap-bet .bet-sigil-num {
  display: none;
}

/* Line of Visibility sticky label: same treatment */
.bp-sep-label-visibility .bp-sep-sub .bet-sigil-icon {
  width: 22px;
  height: 22px;
  padding: 4px;
}

.bp-sep-label-visibility .bp-sep-sub .bet-sigil-num {
  display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .bet-item .bet-sigil-icon,
  .bet-stress-head .bet-sigil-lg .bet-sigil-icon {
    width: 26px;
    height: 26px;
  }
}


/* ============================================================
   v0.7  Hero redesign
   1. Ambient pulsing infinity backdrop behind the problem section
   2. Bet row upgraded to proper cards with bigger sigil
   3. Kill the cross-bet dim highlight (no affordance, confusing)
   ============================================================ */

/* ---------- Kill the cross-bet dim behavior entirely ---------- */
body[data-bet-highlight="1"] .bet-item:not([data-bet="1"]),
body[data-bet-highlight="2"] .bet-item:not([data-bet="2"]),
body[data-bet-highlight="3"] .bet-item:not([data-bet="3"]),
body[data-bet-highlight="4"] .bet-item:not([data-bet="4"]) {
  opacity: 1;
}

body[data-bet-highlight="1"] .bet-item[data-bet="1"] .bet-item-name,
body[data-bet-highlight="2"] .bet-item[data-bet="2"] .bet-item-name,
body[data-bet-highlight="3"] .bet-item[data-bet="3"] .bet-item-name,
body[data-bet-highlight="4"] .bet-item[data-bet="4"] .bet-item-name {
  color: var(--ink);
}

/* Remove the JS-driven hover scale on sigils */
body[data-bet-highlight="1"] .bet-sigil[data-bet="1"],
body[data-bet-highlight="2"] .bet-sigil[data-bet="2"],
body[data-bet-highlight="3"] .bet-sigil[data-bet="3"],
body[data-bet-highlight="4"] .bet-sigil[data-bet="4"] {
  transform: none;
}

/* ---------- Section 1: ambient infinity backdrop ---------- */

.section-problem {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.problem-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.problem-bg-infinity {
  width: 160%;
  max-width: 1600px;
  height: auto;
  color: var(--accent);
  opacity: 0.12;
  filter: blur(0.3px);
}

body[data-theme="warm"] .problem-bg-infinity { color: var(--accent); opacity: 0.14; }
body[data-theme="dark"]  .problem-bg-infinity { color: var(--accent); opacity: 0.22; }

/* Static base path: very faint guide loop */
.problem-bg-infinity-path-a {
  stroke-width: 1.2;
  opacity: 0.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Animated traveling highlight: dashed stroke rotating along the path.
   stroke-dashoffset animates to create flow. Long dash + long gap = single
   glowing segment traveling the infinity loop continuously. */
.problem-bg-infinity-path-b {
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 120 620;
  animation: infinity-flow 9s linear infinite;
  opacity: 0.9;
  filter: url(#infinity-glow);
}

@keyframes infinity-flow {
  0%   { stroke-dashoffset: 740; }
  100% { stroke-dashoffset: 0; }
}

/* Subtle section-wide pulse so the whole field breathes (2x slower) */
.problem-bg {
  animation: infinity-breath 7s ease-in-out infinite;
}

@keyframes infinity-breath {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 1; }
}

/* Ensure foreground content sits on top of the backdrop */
.section-problem > .section-inner { position: relative; z-index: 1; }

/* Reduced motion: hold a static, unanimated loop */
@media (prefers-reduced-motion: reduce) {
  .problem-bg-infinity-path-b {
    animation: none;
    stroke-dasharray: none;
    opacity: 0.35;
  }
  .problem-bg { animation: none; }
}

/* ---------- Bet card redesign ---------- */

.bet-row {
  list-style: none;
  margin: 0;
  padding: 1.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1rem;
  border-top: 1px solid var(--hairline);
}

.bet-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.5rem 1.35rem 1.4rem;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  /* Remove the v0.3 border-left divider from the flat row */
  border-left: 1px solid var(--hairline) !important;
  padding-left: 1.35rem !important;
  margin-left: 0 !important;
}

.bet-item:hover {
  border-color: var(--hairline);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -18px rgba(26, 26, 26, 0.2);
}

body[data-theme="dark"] .bet-item:hover {
  box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.5);
}

/* Each card picks up a subtle top accent in its bet color */
.bet-item::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 1.25rem;
  right: 1.25rem;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--bet-1-ink);
  opacity: 0.7;
}
.bet-item[data-bet="1"]::before { background: var(--bet-1-ink); }
.bet-item[data-bet="2"]::before { background: var(--bet-2-ink); }
.bet-item[data-bet="3"]::before { background: var(--bet-3-ink); }
.bet-item[data-bet="4"]::before { background: var(--bet-4-ink); }

/* ---------- Sigil as the card hero (bigger, centered, confident) ---------- */

.bet-item .bet-sigil {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  padding: 0;
  position: relative;
  /* backgrounds from v0.6 already applied via data-bet attr selectors */
  flex-shrink: 0;
}

.bet-item .bet-sigil-icon {
  width: 32px;
  height: 32px;
  margin: 0;
  font-size: 1rem;
}

.bet-item .bet-sigil-num {
  position: absolute;
  top: 5px;
  right: 7px;
  bottom: auto;
  left: auto;
  transform: none;
  font-size: 0.48rem;
  letter-spacing: 0.14em;
  opacity: 0.6;
  font-weight: 700;
}

.bet-item-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
}

.bet-item-why {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* Ensure the card sits above the ambient backdrop */
.bet-item { position: relative; z-index: 1; }

@media (max-width: 960px) {
  .bet-row { grid-template-columns: repeat(2, 1fr); row-gap: 1rem; }
  .bet-item::before { left: 1rem; right: 1rem; }
}

@media (max-width: 600px) {
  .bet-row { grid-template-columns: 1fr; }
  .bet-item .bet-sigil { width: 56px; height: 56px; }
  .bet-item .bet-sigil-icon { width: 28px; height: 28px; }
}


/* ============================================================
   v0.7.4  Hero: HTML mesh at real pixel sizes + brighter longer comet
   - Base + lit mesh are HTML/CSS layers (18px cells, exact)
   - Lit mesh CSS-masked to a traveling spotlight, position driven
     by JS using the infinity path's getPointAtLength
   - Comet: longer visible segment, brighter leader, tapered tail
   ============================================================ */

.section-problem {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: 6rem;
  padding-bottom: 6.5rem;
}

.problem-bg {
  position: absolute;
  inset: -10% -5%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  animation: field-pulse 7s ease-in-out infinite;
}

@keyframes field-pulse {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .problem-bg { animation: none; opacity: 0.95; }
}

/* Gradient wash: 4 bet colors woven softly */
.problem-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 70% at 10% 25%, var(--bet-1-bg) 0%, transparent 55%),
    radial-gradient(ellipse 60% 65% at 35% 80%, var(--bet-2-bg) 0%, transparent 55%),
    radial-gradient(ellipse 60% 65% at 70% 20%, var(--bet-3-bg) 0%, transparent 55%),
    radial-gradient(ellipse 65% 70% at 92% 75%, var(--bet-4-bg) 0%, transparent 55%);
  opacity: 1;
}

body[data-theme="dark"] .problem-bg::before { opacity: 1.1; }

/* Comet-reactive color bloom: a second gradient layer that picks up
   whichever bet color is nearest the comet and brightens it. JS sets
   --comet-bet (1-4), --comet-x/--comet-y (px in bg space). */
.problem-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  --comet-x: 50%;
  --comet-y: 50%;
  --comet-color: var(--accent-soft);
  background: radial-gradient(circle 480px at var(--comet-x) var(--comet-y),
    var(--comet-color) 0%,
    var(--comet-color) 10%,
    transparent 60%);
  opacity: 0.55;
  mix-blend-mode: normal;
  transition: opacity 0.8s ease;
}

body[data-theme="dark"] .problem-bg::after { opacity: 0.7; }

/* ---------- HTML mesh layers at real pixel sizes ---------- */

.problem-bg-mesh-base,
.problem-bg-mesh-lit {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, currentColor 1px, transparent 1px),
    linear-gradient(to bottom, currentColor 1px, transparent 1px);
  background-size: 18px 18px;
  color: var(--accent);
}

.problem-bg-mesh-base { opacity: 0.08; }
body[data-theme="warm"] .problem-bg-mesh-base { opacity: 0.09; }
body[data-theme="dark"]  .problem-bg-mesh-base { opacity: 0.14; }

/* Lit mesh: brighter version, masked to a traveling spotlight.
   JS sets --cx / --cy (px) each frame based on path position. */
.problem-bg-mesh-lit {
  opacity: 0.85;
  --cx: 50%;
  --cy: 50%;
  --comet-size: 320px;
  -webkit-mask-image: radial-gradient(circle var(--comet-size) at var(--cx) var(--cy),
                       rgba(0,0,0,1) 0%,
                       rgba(0,0,0,0.85) 20%,
                       rgba(0,0,0,0.5) 45%,
                       rgba(0,0,0,0.2) 70%,
                       rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(circle var(--comet-size) at var(--cx) var(--cy),
                       rgba(0,0,0,1) 0%,
                       rgba(0,0,0,0.85) 20%,
                       rgba(0,0,0,0.5) 45%,
                       rgba(0,0,0,0.2) 70%,
                       rgba(0,0,0,0) 100%);
}

body[data-theme="warm"] .problem-bg-mesh-lit { opacity: 0.92; }
body[data-theme="dark"]  .problem-bg-mesh-lit { opacity: 1; }

/* Hide the SVG that was only used for path definition */
.problem-bg-mesh-mask-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Infinity comet SVG ---------- */

.problem-bg-svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200%;
  min-width: 2000px;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  color: var(--accent);
  overflow: visible;
  z-index: 1;
}

.hitl-inf-guide {
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.09;
}

body[data-theme="dark"] .hitl-inf-guide { opacity: 0.16; }

.hitl-inf-trail {
  color: var(--accent);
  animation: trail-pulse 7s ease-in-out infinite;
}

@keyframes trail-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.25); }
}

body[data-theme="dark"] .hitl-inf-trail { filter: brightness(1.1); }

.hitl-inf-seg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--w, 8);
  opacity: var(--op, 0.4);
  /* Longer visible comet: 160 units on a 780-unit path. The staggered
     delays across 14 segments extend the effective tail even further. */
  stroke-dasharray: 160 620;
  animation: comet-flow 11s linear infinite;
  animation-delay: var(--delay, 0ms);
}

@keyframes comet-flow {
  0%   { stroke-dashoffset: 780; }
  100% { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hitl-inf-seg { animation: none; stroke-dasharray: none; opacity: 0; }
  .hitl-inf-seg:first-child { opacity: 0.22; }
  .hitl-inf-trail { animation: none; }
  .problem-bg-mesh-lit { opacity: 0; }
}

/* ---------- Pointer spotlight mesh ---------- */

.problem-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, currentColor 1px, transparent 1px),
    linear-gradient(to bottom, currentColor 1px, transparent 1px);
  background-size: 18px 18px;
  color: var(--accent);
  opacity: 0;
  --mx: 50%;
  --my: 50%;
  --spot-size: 260px;
  -webkit-mask-image: radial-gradient(circle var(--spot-size) at var(--mx) var(--my),
                       rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 85%);
          mask-image: radial-gradient(circle var(--spot-size) at var(--mx) var(--my),
                       rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 85%);
  transition: opacity 0.35s ease;
  z-index: 2;
}

.section-problem.is-pointer-active .problem-bg-grid { opacity: 0.32; }
body[data-theme="dark"] .section-problem.is-pointer-active .problem-bg-grid { opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  .problem-bg-grid { transition: none; }
}

/* Foreground sits above the backdrop */
.section-problem > .section-inner { position: relative; z-index: 1; }





/* ---------- Bet cards: editorial, not UI-card ---------- */

/* Kill the top accent bar (AI tell) */
.bet-item::before {
  display: none !important;
  content: none !important;
}

.bet-row {
  padding: 2rem 0 0;
  column-gap: 1.5rem;
  border-top: 1px solid var(--hairline);
}

.bet-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.75rem 1.5rem 1.5rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 40%),
    var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  position: relative;
  transition: none;
  transform: none !important;
  border-left: 1px solid var(--hairline) !important;
  padding-left: 1.5rem !important;
  margin-left: 0 !important;
  /* Inner highlight + soft drop, restrained */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(26, 26, 26, 0.04),
    0 12px 32px -24px rgba(26, 26, 26, 0.16);
}

body[data-theme="warm"] .bet-item {
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0.4) 0%, transparent 40%),
    var(--bg-elev);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 240, 0.6),
    0 1px 2px rgba(42, 31, 20, 0.05),
    0 12px 32px -24px rgba(42, 31, 20, 0.16);
}

body[data-theme="dark"] .bet-item {
  background:
    linear-gradient(180deg, rgba(240, 238, 232, 0.03) 0%, transparent 40%),
    var(--bg-elev);
  box-shadow:
    inset 0 1px 0 rgba(240, 238, 232, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 16px 36px -22px rgba(0, 0, 0, 0.5);
}

/* No hover lift. Keep it still and confident. */
.bet-item:hover { transform: none !important; box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(26, 26, 26, 0.04),
    0 12px 32px -24px rgba(26, 26, 26, 0.16); }

/* Editorial corner mark: the bet number as a quiet top-right reference */
.bet-item::after {
  content: attr(data-bet-label);
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--whisper-ink);
  opacity: 0.55;
}

/* Sigil */
.bet-item .bet-sigil {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bet-item .bet-sigil-icon {
  width: 28px;
  height: 28px;
}

/* Hide the in-sigil tiny number -- we've got the editorial corner mark */
.bet-item .bet-sigil-num { display: none; }

.bet-item-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
}

.bet-item-why {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* Responsive */
@media (max-width: 960px) {
  .bet-row { grid-template-columns: repeat(2, 1fr); row-gap: 1.25rem; }
  .problem-bg-infinity { width: 220%; min-width: 1400px; }
}

@media (max-width: 600px) {
  .bet-row { grid-template-columns: 1fr; }
  .bet-item .bet-sigil { width: 48px; height: 48px; }
  .bet-item .bet-sigil-icon { width: 24px; height: 24px; }
  .problem-bg-infinity { width: 280%; min-width: 1100px; }
}


/* ============================================================
   v0.7.5  Hero mesh + comet softening pass
   Everything softer: baseline mesh barely there, lit mesh a
   smoother gradient, comet less contrasty and more transparent.
   Plus restore editorial card accent bar kill (regressed).
   ============================================================ */

/* ---------- Baseline mesh: even softer ---------- */
.problem-bg-mesh-base { opacity: 0.04 !important; }
body[data-theme="warm"] .problem-bg-mesh-base { opacity: 0.05 !important; }
body[data-theme="dark"]  .problem-bg-mesh-base { opacity: 0.08 !important; }

/* ---------- Lit mesh: softer edges, larger pool, less punch ---------- */
.problem-bg-mesh-lit {
  opacity: 0.42 !important;
  --comet-size: 380px !important;
  -webkit-mask-image: radial-gradient(circle var(--comet-size) at var(--cx, 50%) var(--cy, 50%),
                       rgba(0,0,0,0.85) 0%,
                       rgba(0,0,0,0.62) 16%,
                       rgba(0,0,0,0.34) 42%,
                       rgba(0,0,0,0.14) 68%,
                       rgba(0,0,0,0.04) 88%,
                       rgba(0,0,0,0) 100%) !important;
          mask-image: radial-gradient(circle var(--comet-size) at var(--cx, 50%) var(--cy, 50%),
                       rgba(0,0,0,0.85) 0%,
                       rgba(0,0,0,0.62) 16%,
                       rgba(0,0,0,0.34) 42%,
                       rgba(0,0,0,0.14) 68%,
                       rgba(0,0,0,0.04) 88%,
                       rgba(0,0,0,0) 100%) !important;
}

body[data-theme="warm"] .problem-bg-mesh-lit { opacity: 0.5 !important; }
body[data-theme="dark"]  .problem-bg-mesh-lit { opacity: 0.6 !important; }

/* ---------- Guide loop: nearly invisible ---------- */
.hitl-inf-guide {
  stroke-width: 0.8 !important;
  opacity: 0.06 !important;
}

body[data-theme="dark"] .hitl-inf-guide { opacity: 0.12 !important; }

/* ---------- Comet: softer, less contrast ---------- */

.hitl-inf-seg {
  /* stroke-dasharray stays 160 but the segments themselves are less
     punchy -- lower per-segment opacities in the HTML set them */
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Softer glow pulse: tighter range */
}

.hitl-inf-trail {
  animation: trail-pulse-soft 7s ease-in-out infinite;
}

@keyframes trail-pulse-soft {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.12); }
}

body[data-theme="dark"] .hitl-inf-trail { filter: brightness(1.05); }

/* ---------- Cards: re-kill the top accent bar ---------- */
.bet-item::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* And the card corner "01 / 04" label: keep it quiet */
.bet-item::after {
  opacity: 0.35 !important;
}


/* ============================================================
   v0.7.6  Comet: spatial gradient, lower contrast, softer head
   - Shorter per-segment dash so segments are points, not ribbons
   - Wider stagger: segments distribute across the tail length
   - Cycle slowed to 14s so the tail of delays finishes one cycle
   ============================================================ */

.hitl-inf-seg {
  /* Each segment is a short glowing dash. Multiple segments running
     at different delays occupy different path positions simultaneously,
     creating a true spatial opacity gradient from head to tail. */
  stroke-dasharray: 30 750 !important;
  animation-duration: 14s !important;
  animation-timing-function: linear !important;
}

/* Head segment softer still */
.hitl-inf-trail use.hitl-inf-seg:first-child {
  stroke-width: 5;
}

/* Stronger softening via tighter brightness pulse */
.hitl-inf-trail {
  animation: trail-pulse-softer 7s ease-in-out infinite !important;
}

@keyframes trail-pulse-softer {
  0%, 100% { filter: brightness(0.95); }
  50%      { filter: brightness(1.05); }
}

body[data-theme="dark"] .hitl-inf-trail { filter: brightness(1); }


/* ============================================================
   v0.7.7  Comet redo: 3 long-dash strokes + softening wash
   Abandoning the stagger-point approach. 3 overlapping dashes
   blend through the Gaussian glow into one seamless trail.
   A bg-color veil on top drops the overall contrast.
   ============================================================ */

/* ---------- Reset prior multi-segment overrides ---------- */
.hitl-inf-seg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: auto;
  stroke-width: auto;
  opacity: 1;
  animation: none !important;
}

/* Retire the old per-segment delay/width/opacity custom props -- they
   were setting inline styles that still linger on the spec .hitl-inf-seg
   rules. We now style each role separately. */

/* Head: bright core, short dash, travels along the path */
.hitl-inf-head {
  stroke-width: 4.2 !important;
  opacity: 0.7 !important;
  stroke-dasharray: 40 740 !important;
  animation: comet-flow 14s linear infinite !important;
}

/* Mid body: softer, longer dash trailing just behind the head */
.hitl-inf-body {
  stroke-width: 3.4 !important;
  opacity: 0.35 !important;
  stroke-dasharray: 120 660 !important;
  /* Offset so the body dash ends where the head dash begins.
     stroke-dashoffset is in path units. At any t, body sits 40 units
     behind the head. */
  stroke-dashoffset: 0 !important;
  animation: comet-flow-body 14s linear infinite !important;
}

/* Far tail: softest, longest dash, trailing even further */
.hitl-inf-tail {
  stroke-width: 2.8 !important;
  opacity: 0.18 !important;
  stroke-dasharray: 220 560 !important;
  animation: comet-flow-tail 14s linear infinite !important;
}

/* Flow: head runs full cycle 780 -> 0 */
@keyframes comet-flow {
  0%   { stroke-dashoffset: 780; }
  100% { stroke-dashoffset: 0; }
}

/* Body: same cycle but dasharray is longer so it overlaps with head
   by ~80 units. It travels slightly behind because its visible dash
   starts further back on the pattern. */
@keyframes comet-flow-body {
  0%   { stroke-dashoffset: 860; }
  100% { stroke-dashoffset: 80; }
}

/* Tail: even more offset */
@keyframes comet-flow-tail {
  0%   { stroke-dashoffset: 1000; }
  100% { stroke-dashoffset: 220; }
}

/* Beefier glow to blend the 3 strokes into one continuous trail */
.hitl-inf-trail {
  animation: trail-pulse-softer 7s ease-in-out infinite !important;
}

@keyframes trail-pulse-softer {
  0%, 100% { filter: brightness(0.95); }
  50%      { filter: brightness(1.08); }
}

body[data-theme="dark"] .hitl-inf-trail { filter: brightness(1); }

/* ---------- Softening wash: bg-color veil over entire backdrop ----------
   Sits above all backdrop layers (mesh, comet, gradients) and below
   the content. A partial-opacity fill of the page background color
   mixes into everything below, cutting contrast by ~50%. */

.problem-bg-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--bg);
  opacity: 0.5;
}

body[data-theme="warm"] .problem-bg-veil { opacity: 0.45; }
body[data-theme="dark"]  .problem-bg-veil { opacity: 0.45; }

/* Foreground content sits above the veil */
.section-problem > .section-inner { z-index: 5; }


/* ============================================================
   v0.8  Hero: white-hot comet head + blue mist trail + mesh tear
   ============================================================ */

/* Retire prior comet stroke rules, veil, and head segment classes */
.hitl-inf-seg,
.hitl-inf-head,
.hitl-inf-body,
.hitl-inf-tail { all: unset; }

.problem-bg-veil { display: none; }

/* ---------- Distant ethereal infinity (heavy blur, barely there) ---------- */
.hitl-inf-guide {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.12;
}
body[data-theme="dark"] .hitl-inf-guide { opacity: 0.22; stroke-width: 1.8; }

/* ---------- Blue mist trail: 3 stacked strokes, long dashes ---------- */
.hitl-inf-trail {
  color: var(--accent);
  animation: trail-breath 7s ease-in-out infinite;
}

@keyframes trail-breath {
  0%, 100% { filter: brightness(0.95); }
  50%      { filter: brightness(1.08); }
}

.hitl-inf-mist-outer,
.hitl-inf-mist-mid,
.hitl-inf-mist-inner {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: mist-flow 14s linear infinite;
}

/* Outer halo: widest, faintest, longest dash */
.hitl-inf-mist-outer {
  stroke-width: 9;
  opacity: 0.1;
  stroke-dasharray: 200 580;
  animation-delay: -0.2s;
}

/* Mid body: the bulk of the blue mist */
.hitl-inf-mist-mid {
  stroke-width: 5;
  opacity: 0.22;
  stroke-dasharray: 150 630;
  animation-delay: -0.1s;
}

/* Inner trail: brighter thin core that connects to the white-hot head */
.hitl-inf-mist-inner {
  stroke-width: 2;
  opacity: 0.5;
  stroke-dasharray: 80 700;
  animation-delay: 0s;
}

@keyframes mist-flow {
  0%   { stroke-dashoffset: 780; }
  100% { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hitl-inf-trail { animation: none; filter: none; }
  .hitl-inf-mist-outer,
  .hitl-inf-mist-mid,
  .hitl-inf-mist-inner { animation: none; opacity: 0; }
}

/* ---------- White-hot comet head: lens-flare composition ---------- */

.problem-bg-comet-head {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
  /* JS sets --hx / --hy each frame in mesh-layer coords */
  --hx: -9999px;
  --hy: -9999px;
  transform: translate(var(--hx), var(--hy));
  /* Tiny pulse so the flare breathes */
  animation: head-pulse 2.4s ease-in-out infinite;
}

@keyframes head-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .problem-bg-comet-head { animation: none; }
}

/* Core: hot white dot */
.comet-head-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 6px 1px rgba(255, 255, 255, 0.95),
    0 0 14px 3px rgba(200, 225, 255, 0.7),
    0 0 32px 10px rgba(140, 180, 240, 0.4),
    0 0 72px 22px rgba(42, 77, 143, 0.18);
}

body[data-theme="dark"] .comet-head-core {
  box-shadow:
    0 0 8px 2px rgba(255, 255, 255, 1),
    0 0 20px 5px rgba(200, 225, 255, 0.9),
    0 0 44px 14px rgba(140, 180, 240, 0.55),
    0 0 100px 34px rgba(42, 77, 143, 0.28);
}

/* Halo: large soft disc behind the core */
.comet-head-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(180, 210, 255, 0.12) 30%,
    rgba(42, 77, 143, 0.06) 60%,
    transparent 78%);
  filter: blur(6px);
}

body[data-theme="dark"] .comet-head-halo {
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(180, 210, 255, 0.2) 30%,
    rgba(140, 176, 255, 0.1) 60%,
    transparent 78%);
}

/* Lens streaks: classic cross flare. Thin horizontal + vertical rays. */
.comet-head-streak {
  position: absolute;
  left: 50%;
  top: 50%;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 20%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.05) 80%,
    transparent 100%);
  filter: blur(0.5px);
}

.comet-head-streak-h {
  width: 220px;
  height: 2px;
  margin: -1px 0 0 -110px;
}

.comet-head-streak-v {
  width: 2px;
  height: 160px;
  margin: -80px 0 0 -1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 20%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.04) 80%,
    transparent 100%);
}

body[data-theme="dark"] .comet-head-streak {
  background: linear-gradient(to right,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 20%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.08) 80%,
    transparent 100%);
}

body[data-theme="dark"] .comet-head-streak-v {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 20%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.06) 80%,
    transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .comet-head-streak { opacity: 0.35; }
  .comet-head-halo { opacity: 0.4; }
}

/* ---------- Mesh tear: warped duplicate grid, masked around head ---------- */

.problem-bg-mesh-tear {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(to right, currentColor 1px, transparent 1px),
    linear-gradient(to bottom, currentColor 1px, transparent 1px);
  background-size: 18px 18px;
  color: var(--accent);
  opacity: 0;
  /* Subtle skew + scale distortion that reveals only where the head is */
  transform: translate(var(--tx, 0), var(--ty, 0)) skewX(2deg);
  --tx: 0px;
  --ty: 0px;
  --hx: 50%;
  --hy: 50%;
  -webkit-mask-image: radial-gradient(circle 140px at var(--hx) var(--hy),
                       rgba(0,0,0,0.9) 0%,
                       rgba(0,0,0,0.5) 35%,
                       rgba(0,0,0,0.15) 65%,
                       rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(circle 140px at var(--hx) var(--hy),
                       rgba(0,0,0,0.9) 0%,
                       rgba(0,0,0,0.5) 35%,
                       rgba(0,0,0,0.15) 65%,
                       rgba(0,0,0,0) 100%);
  transition: opacity 0.5s ease;
}

.section-problem.is-comet-active .problem-bg-mesh-tear { opacity: 0.35; }
body[data-theme="dark"] .section-problem.is-comet-active .problem-bg-mesh-tear { opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  .problem-bg-mesh-tear { display: none; }
}

/* Ensure the tear layer sits above base mesh but below the lit mesh */
.problem-bg-mesh-base { z-index: 0; }
.problem-bg-mesh-tear { z-index: 1; }
.problem-bg-mesh-lit  { z-index: 2; }
.problem-bg-svg       { z-index: 2; }
.problem-bg-comet-head { z-index: 4; }
.problem-bg-grid      { z-index: 5; }


/* ============================================================
   v0.8.1  JS-painted trail + much softer overall contrast
   ============================================================ */

/* Remove prior 3-stroke mist rules -- no longer used */
.hitl-inf-mist-outer,
.hitl-inf-mist-mid,
.hitl-inf-mist-inner { display: none; }

/* JS-painted trail: each <line> has its own opacity.
   Base color is accent blue, kept at moderate saturation. */
.hitl-comet-trail-g {
  color: var(--accent);
  /* Global damping: the trail max opacity is controlled per-segment in
     JS, but we also cap the whole group here for a final contrast ceiling. */
  opacity: 0.55;
  animation: trail-breath 7s ease-in-out infinite;
}

body[data-theme="warm"] .hitl-comet-trail-g { opacity: 0.6; }
body[data-theme="dark"]  .hitl-comet-trail-g { opacity: 0.85; }

@keyframes trail-breath {
  0%, 100% { filter: brightness(0.95); }
  50%      { filter: brightness(1.08); }
}

/* Softer head core: smaller + less saturated */
.comet-head-core {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  box-shadow:
    0 0 4px 1px rgba(255, 255, 255, 0.7),
    0 0 10px 2px rgba(200, 225, 255, 0.45),
    0 0 24px 8px rgba(140, 180, 240, 0.2),
    0 0 54px 18px rgba(42, 77, 143, 0.1);
}

body[data-theme="dark"] .comet-head-core {
  box-shadow:
    0 0 6px 2px rgba(255, 255, 255, 0.9),
    0 0 16px 4px rgba(200, 225, 255, 0.7),
    0 0 36px 12px rgba(140, 180, 240, 0.4),
    0 0 80px 28px rgba(42, 77, 143, 0.22);
}

/* Softer halo */
.comet-head-halo {
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(180, 210, 255, 0.08) 30%,
    rgba(42, 77, 143, 0.04) 60%,
    transparent 78%);
}

/* Fainter lens streaks in light mode */
.comet-head-streak {
  background: linear-gradient(to right,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 20%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0.03) 80%,
    transparent 100%);
}

.comet-head-streak-h { width: 160px; margin-left: -80px; }
.comet-head-streak-v {
  height: 120px;
  margin-top: -60px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 20%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.03) 80%,
    transparent 100%);
}

/* Mesh tear even softer */
.section-problem.is-comet-active .problem-bg-mesh-tear { opacity: 0.22; }
body[data-theme="dark"] .section-problem.is-comet-active .problem-bg-mesh-tear { opacity: 0.35; }

/* Guide loop quieter */
.hitl-inf-guide {
  stroke-width: 1.2 !important;
  opacity: 0.08 !important;
}
body[data-theme="dark"] .hitl-inf-guide { opacity: 0.18 !important; }


/* ============================================================
   v0.8.2  Trail translucency + head thickness
   ============================================================ */
.hitl-comet-trail-g { opacity: 0.45 !important; }
body[data-theme="warm"] .hitl-comet-trail-g { opacity: 0.48 !important; }
body[data-theme="dark"]  .hitl-comet-trail-g { opacity: 0.7 !important; }


/* ============================================================
   v0.8.3  Continuous ribbon comet
   4 stacked strokes, same timing, varying widths + dash lengths.
   Gaussian blur fuses them into one seamless tapered ribbon.
   ============================================================ */

/* Retire the JS-painted trail */
.hitl-comet-trail-g { display: none !important; }

/* ---------- Ribbon group ---------- */
.hitl-ribbon {
  color: var(--accent);
  opacity: 1;
  animation: ribbon-breath 7s ease-in-out infinite;
}

@keyframes ribbon-breath {
  0%, 100% { filter: brightness(0.95); }
  50%      { filter: brightness(1.08); }
}

/* One stroke, wide, kept at the opacity you liked on the outer layer.
   The stdDev-4 Gaussian blur in #comet-glow does all the softening. */
.hitl-ribbon-main {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 10;
  stroke-dasharray: 340 440;
  opacity: 0.09;
  animation: ribbon-flow-340 14s linear infinite;
}

body[data-theme="warm"] .hitl-ribbon-main { opacity: 0.11; }
body[data-theme="dark"]  .hitl-ribbon-main { opacity: 0.22; }

@keyframes ribbon-flow-340 {
  0%   { stroke-dashoffset: -340; }
  100% { stroke-dashoffset: 440; }
}

@media (prefers-reduced-motion: reduce) {
  .hitl-ribbon-main { animation: none; opacity: 0; }
  .hitl-ribbon { animation: none; }
}

/* ---------- Mesh tear: melt the grid where the head passes ---------- */

/* Distort more aggressively to read as "melting" not just offset */
.problem-bg-mesh-tear {
  transform: translate(var(--tx, 0), var(--ty, 0)) skewX(-3deg) scaleY(1.04);
  filter: blur(0.8px);
}

/* Also make the base mesh appear to dissolve near the head -- a
   CSS mask on the base mesh that CUTS a hole where the head is. */
.problem-bg-mesh-base {
  --hx: 50%;
  --hy: 50%;
  -webkit-mask-image: radial-gradient(circle 120px at var(--hx) var(--hy),
                       rgba(0,0,0,0) 0%,
                       rgba(0,0,0,0.15) 25%,
                       rgba(0,0,0,0.6) 55%,
                       rgba(0,0,0,0.95) 80%,
                       rgba(0,0,0,1) 100%);
          mask-image: radial-gradient(circle 120px at var(--hx) var(--hy),
                       rgba(0,0,0,0) 0%,
                       rgba(0,0,0,0.15) 25%,
                       rgba(0,0,0,0.6) 55%,
                       rgba(0,0,0,0.95) 80%,
                       rgba(0,0,0,1) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .problem-bg-mesh-base {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* Distant infinity: longer and softer per spec */
.hitl-inf-guide {
  stroke-width: 1.8 !important;
  opacity: 0.14 !important;
}
body[data-theme="dark"] .hitl-inf-guide { opacity: 0.24 !important; }


/* ============================================================
   v0.8.4  Tighter grid + softer stroke + JS-driven stroke sync
   ============================================================ */

/* Grid: 14px cells (was 18) */
.problem-bg-mesh-base,
.problem-bg-mesh-lit,
.problem-bg-mesh-tear,
.problem-bg-grid {
  background-size: 14px 14px !important;
}

/* Stroke even more subtle */
.hitl-ribbon-main {
  stroke-width: 9 !important;
  opacity: 0.06 !important;
  /* Animation disabled -- JS now drives stroke-dashoffset directly so
     the stroke and the lens flare head tick on the same clock. */
  animation: none !important;
}

body[data-theme="warm"] .hitl-ribbon-main { opacity: 0.08 !important; }
body[data-theme="dark"]  .hitl-ribbon-main { opacity: 0.16 !important; }


/* ============================================================
   v0.8.5  Longer stroke + flare-to-head lock
   Dash extended so most of the infinity shows. Flare offset is
   handled in JS (sampled slightly ahead to sit at the visible tip
   of the blurred stroke). Stroke dash params set here MUST match
   the DASH_LEN / GAP_LEN constants in app.js.
   ============================================================ */

.hitl-ribbon-main {
  stroke-dasharray: 620 160 !important;
}


/* v0.8.6  Grid even tighter */
.problem-bg-mesh-base,
.problem-bg-mesh-lit,
.problem-bg-mesh-tear,
.problem-bg-grid {
  background-size: 10px 10px !important;
}


/* ============================================================
   v0.8.7  Flare softened, especially in dark mode
   ============================================================ */

/* Core: smaller, gentler bloom. Especially cut the outer rings
   which were the loud glow in dark mode. */
.comet-head-core {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  box-shadow:
    0 0 3px 1px rgba(255, 255, 255, 0.5),
    0 0 8px 2px rgba(200, 225, 255, 0.25),
    0 0 18px 5px rgba(140, 180, 240, 0.12),
    0 0 40px 12px rgba(42, 77, 143, 0.06);
}

body[data-theme="dark"] .comet-head-core {
  box-shadow:
    0 0 4px 1px rgba(255, 255, 255, 0.6),
    0 0 10px 3px rgba(200, 225, 255, 0.35),
    0 0 24px 7px rgba(140, 180, 240, 0.18),
    0 0 56px 16px rgba(42, 77, 143, 0.1);
}

/* Halo: smaller and fainter */
.comet-head-halo {
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -45px;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(180, 210, 255, 0.04) 30%,
    rgba(42, 77, 143, 0.02) 60%,
    transparent 78%);
  filter: blur(8px);
}

body[data-theme="dark"] .comet-head-halo {
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(180, 210, 255, 0.08) 30%,
    rgba(140, 176, 255, 0.04) 60%,
    transparent 78%);
}

/* Lens streaks: shorter, fainter, especially in dark mode */
.comet-head-streak-h { width: 110px; margin-left: -55px; }
.comet-head-streak-v { height: 80px; margin-top: -40px; }

.comet-head-streak {
  background: linear-gradient(to right,
    transparent 0%,
    rgba(255, 255, 255, 0.015) 20%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.015) 80%,
    transparent 100%);
}

.comet-head-streak-v {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.015) 20%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.015) 80%,
    transparent 100%);
}

body[data-theme="dark"] .comet-head-streak {
  background: linear-gradient(to right,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 20%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.03) 80%,
    transparent 100%);
}

body[data-theme="dark"] .comet-head-streak-v {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.025) 20%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.025) 80%,
    transparent 100%);
}

/* Tighten the pulse */
.problem-bg-comet-head {
  animation: head-pulse-soft 2.8s ease-in-out infinite;
}

@keyframes head-pulse-soft {
  0%, 100% { filter: brightness(0.95); }
  50%      { filter: brightness(1.1); }
}


/* ============================================================
   v0.8.8  Stroke fainter + pointer spread larger + comet bloom
   ============================================================ */

/* Stroke even fainter */
.hitl-ribbon-main {
  stroke-width: 9 !important;
  opacity: 0.04 !important;
}
body[data-theme="warm"] .hitl-ribbon-main { opacity: 0.055 !important; }
body[data-theme="dark"]  .hitl-ribbon-main { opacity: 0.11 !important; }

/* Pointer spotlight: larger + more feathered */
.problem-bg-grid {
  --spot-size: 420px !important;
  -webkit-mask-image: radial-gradient(circle var(--spot-size) at var(--mx, 50%) var(--my, 50%),
                       rgba(0,0,0,0.85) 0%,
                       rgba(0,0,0,0.62) 18%,
                       rgba(0,0,0,0.35) 42%,
                       rgba(0,0,0,0.15) 65%,
                       rgba(0,0,0,0.04) 85%,
                       rgba(0,0,0,0) 100%) !important;
          mask-image: radial-gradient(circle var(--spot-size) at var(--mx, 50%) var(--my, 50%),
                       rgba(0,0,0,0.85) 0%,
                       rgba(0,0,0,0.62) 18%,
                       rgba(0,0,0,0.35) 42%,
                       rgba(0,0,0,0.15) 65%,
                       rgba(0,0,0,0.04) 85%,
                       rgba(0,0,0,0) 100%) !important;
}

/* Bet color tokens for the traveling bloom: richer than the card
   backgrounds. The bloom is multiplied against the base gradient so
   it ADDS color where the comet passes. */
:root {
  --bet-1-bloom: rgba(42, 77, 143, 0.25);
  --bet-2-bloom: rgba(87, 64, 128, 0.25);
  --bet-3-bloom: rgba(138, 90, 42, 0.25);
  --bet-4-bloom: rgba(110, 74, 12, 0.3);
}

body[data-theme="warm"] {
  --bet-1-bloom: rgba(90, 58, 10, 0.2);
  --bet-2-bloom: rgba(106, 58, 40, 0.22);
  --bet-3-bloom: rgba(138, 90, 42, 0.22);
  --bet-4-bloom: rgba(90, 58, 10, 0.25);
}

body[data-theme="dark"] {
  --bet-1-bloom: rgba(169, 196, 232, 0.22);
  --bet-2-bloom: rgba(198, 180, 220, 0.22);
  --bet-3-bloom: rgba(229, 185, 133, 0.22);
  --bet-4-bloom: rgba(240, 219, 160, 0.26);
}


/* ============================================================
   v0.8.9  Lit mesh reveal softened
   The grid patch that rides the comet was punching through too hard.
   Drop its opacity significantly and feather the mask edges more.
   ============================================================ */
.problem-bg-mesh-lit {
  opacity: 0.15 !important;
  --comet-size: 340px !important;
  -webkit-mask-image: radial-gradient(circle var(--comet-size) at var(--cx, 50%) var(--cy, 50%),
                       rgba(0,0,0,0.7) 0%,
                       rgba(0,0,0,0.45) 22%,
                       rgba(0,0,0,0.22) 48%,
                       rgba(0,0,0,0.08) 72%,
                       rgba(0,0,0,0.02) 90%,
                       rgba(0,0,0,0) 100%) !important;
          mask-image: radial-gradient(circle var(--comet-size) at var(--cx, 50%) var(--cy, 50%),
                       rgba(0,0,0,0.7) 0%,
                       rgba(0,0,0,0.45) 22%,
                       rgba(0,0,0,0.22) 48%,
                       rgba(0,0,0,0.08) 72%,
                       rgba(0,0,0,0.02) 90%,
                       rgba(0,0,0,0) 100%) !important;
}

body[data-theme="warm"] .problem-bg-mesh-lit { opacity: 0.18 !important; }
body[data-theme="dark"]  .problem-bg-mesh-lit { opacity: 0.28 !important; }


/* ============================================================
   v0.9  Pointer grid matches lit grid opacity
   ============================================================ */
.section-problem.is-pointer-active .problem-bg-grid { opacity: 0.15 !important; }
body[data-theme="warm"] .section-problem.is-pointer-active .problem-bg-grid { opacity: 0.18 !important; }
body[data-theme="dark"]  .section-problem.is-pointer-active .problem-bg-grid { opacity: 0.28 !important; }


/* ============================================================
   v0.9.1  Hero softening + tightening pass
   ============================================================ */

/* Grid: 10px -> 8px for finer lattice */
.problem-bg-mesh-base,
.problem-bg-mesh-lit,
.problem-bg-mesh-tear,
.problem-bg-grid {
  background-size: 8px 8px !important;
}

/* Base mesh even quieter */
.problem-bg-mesh-base { opacity: 0.025 !important; }
body[data-theme="warm"] .problem-bg-mesh-base { opacity: 0.03 !important; }
body[data-theme="dark"]  .problem-bg-mesh-base { opacity: 0.06 !important; }

/* Lit + pointer grid reveal: a touch softer */
.problem-bg-mesh-lit { opacity: 0.12 !important; }
body[data-theme="warm"] .problem-bg-mesh-lit { opacity: 0.14 !important; }
body[data-theme="dark"]  .problem-bg-mesh-lit { opacity: 0.22 !important; }

.section-problem.is-pointer-active .problem-bg-grid { opacity: 0.12 !important; }
body[data-theme="warm"] .section-problem.is-pointer-active .problem-bg-grid { opacity: 0.14 !important; }
body[data-theme="dark"]  .section-problem.is-pointer-active .problem-bg-grid { opacity: 0.22 !important; }

/* Stroke: another step down */
.hitl-ribbon-main { opacity: 0.03 !important; }
body[data-theme="warm"] .hitl-ribbon-main { opacity: 0.045 !important; }
body[data-theme="dark"]  .hitl-ribbon-main { opacity: 0.085 !important; }

/* Comet color bloom: slightly calmer, so the 4-bet gradient breathes without shouting */
.problem-bg::after { opacity: 0.4 !important; }
body[data-theme="dark"] .problem-bg::after { opacity: 0.55 !important; }


/* v0.9.2  Comet: longer dash + slower cycle = nearly static with gentle motion */
.hitl-ribbon-main {
  stroke-dasharray: 720 60 !important;
}


/* ============================================================
   v1.0  Carry the hero's visual DNA across the page
   - Subtle bet-color radial wash behind Section 2 (scale) + Section 5 (takeaway)
   - Pointer-reactive glow on bet cards + stress blocks
   - Section titles get a soft gradient underline
   ============================================================ */

/* ---------- Section 2: soft blue wash behind the hero metric ---------- */
.section-scale {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.section-scale::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 15% 85%, var(--bet-1-bg) 0%, transparent 55%),
    radial-gradient(ellipse 50% 55% at 85% 20%, var(--bet-3-bg) 0%, transparent 55%);
  opacity: 0.6;
}

body[data-theme="dark"] .section-scale::before { opacity: 0.8; }

.section-scale > .section-inner { position: relative; z-index: 1; }

/* ---------- Section 5: soft gold wash tying end back to Bet 04 ---------- */
.section-takeaway {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.section-takeaway::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 65% at 90% 55%, var(--bet-4-bg) 0%, transparent 55%),
    radial-gradient(ellipse 50% 55% at 10% 90%, var(--bet-2-bg) 0%, transparent 55%);
  opacity: 0.5;
}

body[data-theme="dark"] .section-takeaway::before { opacity: 0.7; }

.section-takeaway > .section-inner { position: relative; z-index: 1; }

/* ---------- Gradient underline under major H2s ---------- */
.section-title,
.takeaway-statement {
  position: relative;
}

.section-title::after,
.takeaway-statement::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.6rem;
  width: 64px;
  height: 2px;
  background: linear-gradient(to right,
    var(--accent) 0%,
    var(--accent) 30%,
    transparent 100%);
  opacity: 0.55;
  border-radius: 1px;
}

body[data-theme="dark"] .section-title::after,
body[data-theme="dark"] .takeaway-statement::after { opacity: 0.7; }

/* Takeaway statement needs more room for the underline */
.takeaway-statement { margin-bottom: 1.4rem; }

/* ---------- Pointer-reactive glow inside bet cards ---------- */
.bet-item {
  --pointer-x: 50%;
  --pointer-y: 50%;
  position: relative;
  overflow: hidden;
}

.bet-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 220px at var(--pointer-x) var(--pointer-y),
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.1) 30%,
    transparent 65%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

body[data-theme="dark"] .bet-item::before {
  background: radial-gradient(circle 220px at var(--pointer-x) var(--pointer-y),
    rgba(140, 176, 255, 0.18) 0%,
    rgba(140, 176, 255, 0.06) 30%,
    transparent 65%);
}

.bet-item:hover::before { opacity: 1; }

/* Keep card contents above the glow */
.bet-item > * { position: relative; z-index: 1; }

/* ---------- Pointer-reactive glow inside stress blocks ---------- */
.bet-stress-item {
  --pointer-x: 50%;
  --pointer-y: 50%;
  position: relative;
}

.bet-stress-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 320px at var(--pointer-x) var(--pointer-y),
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.08) 30%,
    transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}

body[data-theme="dark"] .bet-stress-item::before {
  background: radial-gradient(circle 320px at var(--pointer-x) var(--pointer-y),
    rgba(140, 176, 255, 0.15) 0%,
    rgba(140, 176, 255, 0.04) 30%,
    transparent 65%);
}

.bet-stress-item:hover::before { opacity: 1; }

.bet-stress-item > * { position: relative; z-index: 1; }


/* ============================================================
   v1.1  Fully-closed infinity + only the lens flare moves
   ============================================================ */

/* Ribbon becomes a continuous unbroken loop: no dash, no animation */
.hitl-ribbon-main {
  stroke-dasharray: none !important;
  stroke-width: 8 !important;
  opacity: 0.05 !important;
  animation: none !important;
  stroke-dashoffset: 0 !important;
}

body[data-theme="warm"] .hitl-ribbon-main { opacity: 0.065 !important; }
body[data-theme="dark"]  .hitl-ribbon-main { opacity: 0.025 !important; }

/* Distant guide loop no longer needed -- the main ribbon IS the loop */
.hitl-inf-guide { opacity: 0 !important; }


/* ============================================================
   v0.3 EDITORIAL PASS -- Commit A
   Subtractive revisions applied at the end of styles.css so the
   cascade naturally supersedes prior decorative rules. No edits
   to historical blocks, keeping diffs clean and reversible.
   ============================================================ */

/* Header: subtitle date stamp. Small, quiet, same color as subtitle. */
.top-bar .subtitle-dot {
  margin: 0 0.35rem;
  color: var(--ink-muted);
  opacity: 0.6;
}
.top-bar .subtitle-date {
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

/* Section 1 bet cards: kill pointer-tracked glow + corner "01 / 04" label.
   The sigil already shows the bet number. Everything else stays quiet. */
.bet-item::before {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}
.bet-item::after {
  display: none !important;
  content: none !important;
}
/* Restore simple hover: accent title + 1px lift. Shadow softened. */
.bet-item {
  cursor: default;
  overflow: visible;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bet-item:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px -4px rgba(26, 26, 26, 0.08) !important;
}
body[data-theme="dark"] .bet-item:hover {
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.4) !important;
}
.bet-item:hover .bet-item-name,
.bet-item:focus-within .bet-item-name {
  color: var(--ink);
  transition: color 0.18s ease;
}

/* Blueprint: flow spine/fork removed in HTML; keep CSS declarations
   inert in case any stray reference exists in other overrides. */
.bp-flow,
.bp-flow-svg,
.bp-flow-spine,
.bp-flow-branch { display: none !important; }

/* Sticky header alignment: mirror .section-inner's max-width so the pill
   row lives in the same horizontal origin as the blueprint wrap. */
.bp-sticky-header .bp-sticky-inner {
  max-width: var(--max-w, 1200px);
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (max-width: 720px) {
  .bp-sticky-header .bp-sticky-inner {
    padding: 0 1rem;
  }
}


/* v0.3 hero: secondary comet heads.
   Smaller than the primary head, no lens-flare crosshair streaks.
   Rhythm is: primary lead at phase 0, secondaries trail at +1/3 and +2/3.
   Communicates throughput -- not one contact, many in parallel. */
.problem-bg-comet-head-sm {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform: translate(var(--hx, -9999px), var(--hy, -9999px));
  pointer-events: none;
  z-index: 3; /* Below primary head (4), above ribbon (2) */
}

.problem-bg-comet-head-sm .comet-head-core {
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.5);
  opacity: 0.75;
}

body[data-theme="dark"] .problem-bg-comet-head-sm .comet-head-core {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.45);
}

.problem-bg-comet-head-sm .comet-head-halo {
  width: 55px;
  height: 55px;
  opacity: 0.5;
  filter: blur(3px);
}

@media (prefers-reduced-motion: reduce) {
  .problem-bg-comet-head-sm { display: none; }
}


/* Primary comet head: soften further with 3 heads now in the loop.
   Same silhouette, less flare bloom so parallel processing reads
   as rhythm rather than chaos. */
.problem-bg-comet-head[data-head="0"] .comet-head-halo {
  opacity: 0.78;
  filter: blur(1px);
}
.problem-bg-comet-head[data-head="0"] .comet-head-streak {
  opacity: 0.55;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- sticky header column alignment
   CS Help Pages pattern: JS measures each blueprint column and
   writes exact px widths + minWidths to each sticky pill, then
   mirrors bpEl.scrollLeft onto the sticky viewport so pills
   track their columns as the user scrolls the map.
   ============================================================ */

/* Sticky row: flex instead of grid so JS can write exact px widths
   per pill without fighting the template. */
.bp-sticky-header .bp-sticky-row {
  display: flex !important;
  grid-template-columns: none !important;
  min-width: fit-content;
  width: auto;
}

/* Each pill gets its exact blueprint-column width applied inline by JS;
   prevent CSS min/max from overriding. */
.bp-sticky-header .bp-sticky-stage {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 0;
}

/* Viewport is horizontally scrollable only in the sense that we
   scrollLeft it from JS (no user-initiated scroll -- scrollbar hidden). */
.bp-sticky-header .bp-sticky-viewport {
  overflow: hidden;
  position: relative;
}

/* Remove the v0.3 max-w constraint on sticky-inner so it can span the
   same width as .bp-wrap (which breaks out of .section-inner). The
   label cell pins to the left; viewport fills the rest. */
.bp-sticky-header .bp-sticky-inner {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: stretch;
}

/* Mobile: the label cell is hidden at <=600px per the existing rule;
   no change needed. */


/* Sticky viewport flex-fills remaining space after the label cell. */
.bp-sticky-header .bp-sticky-viewport {
  flex: 1 1 auto;
  min-width: 0;
}
.bp-sticky-header .bp-sticky-label-cell {
  flex: 0 0 auto;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- sticky header FINAL
   Earlier rules in the file (lines ~8698-8725) set:
     .bp-sticky-row  display: inline-flex; gap: 0.3rem
     .bp-sticky-stage  width: auto !important; min-width: 0 !important
     .bp-sticky-stage-actor  display: none
   These prevent JS-applied column widths from taking effect and hide
   the actor-verb we want to keep. Override here so JS owns widths and
   the actor verb (phase name) renders.
   ============================================================ */

/* Sticky row: flex, NO gap, so pills sit edge-to-edge aligned to
   blueprint columns which have no gap either. */
.bp-sticky-header .bp-sticky-row {
  display: flex !important;
  gap: 0 !important;
  padding: 0 !important;
  min-width: fit-content;
  width: auto;
  transform: none !important;
}

/* Each pill: JS writes exact px width inline. Override earlier
   !important width/min-width rules so JS wins. */
.bp-sticky-header .bp-sticky-stage {
  flex: 0 0 auto !important;
  width: auto;
  min-width: 0;
  max-width: none;
  border: none !important;
  border-right: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  padding: 0.55rem 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.15rem !important;
  white-space: normal !important;
  text-align: left !important;
  min-height: 48px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bp-sticky-header .bp-sticky-stage:last-child {
  border-right: none !important;
}

/* Restore the actor verb (phase name) as a small eyebrow above the
   stage number + name. This is the 'CS Chatbot gathers' / 'System
   routes' line that identifies who's driving each stage. */
.bp-sticky-header .bp-sticky-stage-actor {
  display: block !important;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--whisper-ink, var(--ink-muted));
  line-height: 1;
  margin-top: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.bp-sticky-header .bp-sticky-stage.is-active .bp-sticky-stage-actor {
  color: var(--accent);
}

.bp-sticky-header .bp-sticky-stage-row {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  max-width: 100%;
  overflow: hidden;
}

.bp-sticky-header .bp-sticky-stage-num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.bp-sticky-header .bp-sticky-stage-name {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Active pill: match CS Help's subtle highlighting pattern --
   accent-soft background, accent text, 2px bottom stripe. No
   pill-rounded fully-colored tab. */
.bp-sticky-header .bp-sticky-stage.is-active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--hairline) !important;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.bp-sticky-header .bp-sticky-stage.is-active .bp-sticky-stage-num,
.bp-sticky-header .bp-sticky-stage.is-active .bp-sticky-stage-name {
  color: var(--accent);
}

/* Sticky inner: flex, no grid template. Label + viewport sit as
   siblings, each with JS-measured width. */
.bp-sticky-header .bp-sticky-inner {
  display: flex !important;
  grid-template-columns: none !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch;
  width: 100%;
}

.bp-sticky-header .bp-sticky-label-cell {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0.55rem 1rem;
  border-right: 1px solid var(--hairline);
  box-sizing: border-box;
  min-height: 48px;
}

.bp-sticky-header .bp-sticky-viewport {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
  min-width: 0;
}

/* Hide the stale "bp-sticky-stages" plural rule's leftovers. */
.bp-sticky-stages { display: none !important; }


/* ============================================================
   v0.3 EDITORIAL PASS -- sticky header DOM-clone approach
   Earlier pill-based overrides are superseded. The sticky now
   contains a literal clone of the .bp-row.bp-stages row so it
   inherits every blueprint layout rule automatically. JS only
   positions the container and pans it via translateX.
   ============================================================ */

/* Sticky container: fixed bar below the top-bar. Clipped overflow so
   the clone can pan via negative translateX without leaking sideways. */
.bp-sticky-header {
  position: fixed;
  top: 58px;
  z-index: 15;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: none !important;
  transition: opacity 0.15s ease;
}

.bp-sticky-header.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Kill any earlier grid/flex/padding rules on .bp-sticky-inner.
   We no longer render an inner wrapper -- the clone sits directly
   in the sticky container. */
.bp-sticky-header .bp-sticky-inner,
.bp-sticky-header .bp-sticky-viewport,
.bp-sticky-header .bp-sticky-label-cell,
.bp-sticky-header .bp-sticky-label-text,
.bp-sticky-header .bp-sticky-row,
.bp-sticky-header .bp-sticky-stage,
.bp-sticky-stages {
  display: none !important;
}

/* The cloned blueprint: uses .blueprint + .bp-row.bp-stages, so it
   inherits the real grid-template-columns + all stage-head styles.
   We just need to null out the real blueprint's container polish
   (border, radius) since we're only showing the one header row. */
.bp-sticky-clone {
  display: block;
  width: 100%;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent;
  will-change: transform;
}

.bp-sticky-clone .bp-row.bp-stages {
  border: none !important;
  background: var(--bg-elev);
}

/* Within the cloned row: compact the stage head cells so the sticky
   bar is only as tall as a single row of labels, not the full hero
   header. Preserve the grid column template inherited from .bp-row. */
.bp-sticky-clone .bp-stage-head {
  padding: 0.55rem 1rem !important;
  gap: 0.25rem !important;
  min-height: 48px;
  cursor: pointer;
  border-bottom: none !important;
  position: relative;
  align-items: flex-start;
}

/* Hide the big stage icon in the sticky clone to keep the bar
   one-line-ish. Keep number, name, and actor verb. */
.bp-sticky-clone .bp-stage-icon {
  display: none !important;
}

/* Sticky clone stage text: slightly smaller than the real blueprint
   header so the bar stays under ~60px tall. */
.bp-sticky-clone .bp-stage-num {
  font-size: 0.75rem !important;
}
.bp-sticky-clone .bp-stage-name {
  font-size: 0.78rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.bp-sticky-clone .bp-stage-actor {
  font-size: 0.55rem !important;
  letter-spacing: 0.18em;
  margin-top: 0.15rem;
}

/* Label column of the clone: pinned identity strip that says "STAGES" */
.bp-sticky-clone .bp-label {
  padding: 0.55rem 1rem !important;
  min-height: 48px;
  display: flex !important;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.6rem !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-muted);
  border-right: 1px solid var(--hairline);
  background: var(--bg-elev);
}

.bp-sticky-clone .bp-label::before {
  content: 'Stages';
}

/* Hide any nested .bp-lbl-* descendants that came along with the
   clone (we're repurposing the label cell). */
.bp-sticky-clone .bp-label > * {
  display: none !important;
}

/* Stage head active state (when a stage is in view) */
.bp-sticky-clone .bp-stage-head.is-active {
  background: var(--accent-soft) !important;
  box-shadow: inset 0 -2px 0 var(--accent) !important;
}
.bp-sticky-clone .bp-stage-head.is-active .bp-stage-num,
.bp-sticky-clone .bp-stage-head.is-active .bp-stage-name,
.bp-sticky-clone .bp-stage-head.is-active .bp-stage-actor {
  color: var(--accent) !important;
}

.bp-sticky-clone .bp-stage-head:hover {
  background: rgba(42, 77, 143, 0.06);
}

/* Kill any pivot/fork/approve/reject decorative treatments from the
   real stage heads so the sticky bar stays uniform. */
.bp-sticky-clone .bp-stage-head-pivot,
.bp-sticky-clone .bp-stage-head-fork,
.bp-sticky-clone .bp-stage-head-approve,
.bp-sticky-clone .bp-stage-head-reject {
  background: var(--bg-elev) !important;
  box-shadow: none !important;
}
.bp-sticky-clone .bp-stage-head-pivot::before {
  display: none !important;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- sticky header scroll mechanism fix
   Previous approach translated the whole clone which dragged the
   label off-screen with the stages. Now the sticky container is
   the scrolling viewport (scrollLeft mirrored from bpEl), and the
   cloned .bp-label uses its existing `position: sticky; left: 0`
   rule to stay pinned while stages pan underneath.
   ============================================================ */

.bp-sticky-header {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.bp-sticky-header::-webkit-scrollbar {
  display: none;
}

/* Clone is now scrolled via its container, not translated. */
.bp-sticky-clone {
  will-change: auto !important;
  transform: none !important;
}

/* Clone's label cell: explicitly re-apply sticky-left behavior in case
   a later rule overrode it. Also bump z-index above stage columns so
   the label always paints on top during scroll. */
.bp-sticky-clone .bp-label {
  position: sticky !important;
  left: 0 !important;
  z-index: 3;
  background: var(--bg-elev) !important;
}

/* Drop any dynamic .is-active treatment on the clone -- we no longer
   track active stage in the sticky. Stage 5 pivot highlight still
   comes through because the clone carries .bp-stage-head-pivot class. */
.bp-sticky-clone .bp-stage-head.is-active {
  background: var(--bg-elev) !important;
  box-shadow: none !important;
}
.bp-sticky-clone .bp-stage-head.is-active .bp-stage-num,
.bp-sticky-clone .bp-stage-head.is-active .bp-stage-name,
.bp-sticky-clone .bp-stage-head.is-active .bp-stage-actor {
  color: inherit !important;
}

/* Re-enable stage 5 pivot treatment in the sticky clone.
   Earlier rule killed it (background: var(--bg-elev) !important). */
.bp-sticky-clone .bp-stage-head-pivot {
  background: var(--accent-soft) !important;
  box-shadow: inset 0 -3px 0 var(--accent) !important;
}
.bp-sticky-clone .bp-stage-head-pivot .bp-stage-num,
.bp-sticky-clone .bp-stage-head-pivot .bp-stage-name {
  color: var(--accent);
}


/* ============================================================
   v0.3 EDITORIAL PASS -- sticky label cell + stage 5 number fix
   1. Use an explicit span for "Stages" instead of ::before pseudo
      (debuggable + immune to later override)
   2. Stage 5 hero treatment in the real blueprint uses an extra
      .bp-stage-head-pivot::before spine that obscured the number
      in the clone. Null it out.
   ============================================================ */

/* Re-enable descendant visibility in the clone label (overrides
   earlier `> * { display: none }` kill). */
.bp-sticky-clone .bp-label > * {
  display: initial !important;
}

.bp-sticky-clone-label-text {
  display: inline-block !important;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-muted);
  line-height: 1;
}

/* Kill the ::before pseudo approach -- superseded by the real span. */
.bp-sticky-clone .bp-label::before {
  content: none !important;
}

/* Stage 5 pivot rendering in the clone: the real blueprint has a
   .bp-stage-head-pivot::before vertical spine (left: 0; width: 3px)
   that can visually clip the number when the cell is compacted.
   Null it out for the sticky clone only. */
.bp-sticky-clone .bp-stage-head-pivot::before {
  display: none !important;
  content: none !important;
}

/* Ensure every stage-num is visible in the clone (including stage 5).
   Some earlier selectors set `color: var(--accent)` only on :hover /
   .is-active paths; make the default explicit. */
.bp-sticky-clone .bp-stage-num {
  display: inline-block !important;
  color: var(--ink-muted);
  visibility: visible !important;
  opacity: 1 !important;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- sticky scroll container fix
   The cloned `.blueprint` element keeps its overflow-x:auto so
   it acts as the scrolling ancestor for the cloned .bp-label's
   position: sticky behavior. Outer .bp-sticky-header is just a
   fixed-position clipping bar; it does not scroll itself.
   ============================================================ */

.bp-sticky-header {
  overflow: hidden !important;
}

.bp-sticky-clone {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}
.bp-sticky-clone::-webkit-scrollbar {
  display: none !important;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- clone sizing fix
   Do NOT size the clone wider than its container. The clone needs
   to stay bounded (width: 100%) so its inner .bp-row overflows,
   which triggers scrollable state + enables position: sticky on
   the label. This mirrors how .blueprint works in the main map.
   ============================================================ */

.bp-sticky-clone {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  box-sizing: border-box;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- stage-num circle restore
   The sticky clone had been overriding .bp-stage-num with
   display: inline-block, which broke the flex centering that
   puts the digit in the middle of the 30x30px circle. Restore
   the real blueprint's circle treatment exactly.
   ============================================================ */

.bp-sticky-clone .bp-stage-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  font-family: var(--font-display);
  font-size: 0.82rem !important;
  font-weight: 700;
  background: var(--bg-elev);
  border: 1.5px solid var(--rule);
  color: var(--ink-soft) !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0;
}

/* Stage 5 pivot: filled accent circle with white digit.
   Re-apply explicitly in the clone so the numeral remains visible. */
.bp-sticky-clone .bp-stage-head-pivot .bp-stage-num {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* Stages 7a and 7b circles adopt their path-tinted border color. */
.bp-sticky-clone .bp-stage-head-approve .bp-stage-num {
  border-color: var(--hold-edge) !important;
  color: var(--hold-ink) !important;
}
.bp-sticky-clone .bp-stage-head-reject .bp-stage-num {
  border-color: var(--break-edge) !important;
  color: var(--break-ink) !important;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- Section 2 compression (Commit B)
   Replaces the 3-card OORW grid + hero block with a compact
   horizontal KPI strip. Deep-dive visuals collapse behind a
   <details> so the headline trio carries first glance.
   Retains the YTD band (that's where the scale-honesty story
   lives and the roadmap tension begins).
   ============================================================ */

/* KPI strip: four metrics in a single responsive row. Each metric
   stacks number + label + sub vertically. No card chrome -- just
   typographic hierarchy. */
.scale-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin: 1.75rem 0 2rem;
  padding: 0;
}

.scale-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.scale-kpi-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.scale-kpi-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.scale-kpi-sub {
  font-size: 0.72rem;
  line-height: 1.4;
}

/* Deep-dive: inline by default. The before/after AHT comparison and
   the 52/48 approve/reject split live here as visible proof behind
   two of the KPIs above. */
.scale-deepdive {
  margin: 2rem 0 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
}

.scale-deepdive-head {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--whisper-ink);
  margin: 0 0 1.25rem;
}

.scale-deepdive-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

/* Eyebrow label sits flush with the top of each viz so the two      */
/* columns align visually even though their bar counts differ.        */
.scale-deepdive-body .scale-split-label,
.scale-deepdive-body .aht-comparison > .scale-split-label {
  margin: 0 0 0.75rem;
}

.scale-deepdive-body .aht-comparison {
  width: 100%;
}

.scale-split-visual {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.scale-split-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--whisper-ink);
  margin: 0 0 0.75rem;
}

@media (max-width: 900px) {
  .scale-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2rem;
  }
  .scale-kpi-num { font-size: 2.1rem; }
  .scale-deepdive-body {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

@media (max-width: 540px) {
  .scale-kpi-strip {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}


/* ============================================================
   v0.3 EDITORIAL PASS -- Customer row amplification (Commit B)
   Without reordering lanes (per D28), we make the customer row
   read first through:
   1. A subtle left-edge accent strip on the Customer Actions
      label that anchors the row identity
   2. Slightly darker label tint so the row reads as "who this
      artifact is about" before "what the system does"
   3. Consistent customer-row cells breathe a bit more -- we
      give them a hair more padding so the row has gentle
      prominence without shouting
   ============================================================ */

/* Left-edge strip on the customer row's label cell */
.bp-layer-customer .bp-label {
  position: sticky;
  left: 0;
  z-index: 4;
}

.bp-layer-customer .bp-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 3px;
  background: var(--accent);
  opacity: 0.5;
  border-radius: 0 2px 2px 0;
}

/* Title on the customer-row label gets slightly heavier emphasis */
.bp-layer-customer .bp-lbl-title {
  color: var(--ink);
  font-weight: 700;
}

/* Label backdrop tint: a touch more saturated than the row tint so the
   left column reads as the identity strip for the row it anchors. */
.bp-layer-customer .bp-label {
  background: var(--bp-customer-label);
}

/* Customer row cells: breathe a bit more so the top row feels a hair
   heavier on the page without adding chrome. Non-anxiety cells only. */
.bp-layer-customer .bp-c:not(.bp-c-anxiety):not(.bp-c-critical) {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* The customer-row headline sits a touch larger than default cell text
   so the row reads first. Does not affect anxiety arc cell or critical
   risk cell which have their own hierarchy. */
.bp-layer-customer .bp-c:not(.bp-c-anxiety):not(.bp-c-critical) .bp-c-headline {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- Acronym tooltip treatment (Commit C)
   First-in-body occurrences of each acronym wrap in <abbr>. The
   title attr carries the expansion. Subtle underline signals
   "more context on hover" without adding visual freight.
   ============================================================ */

abbr[title] {
  text-decoration: underline dotted var(--ink-muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: help;
  font-variant: inherit;
  letter-spacing: inherit;
}

abbr[title]:hover,
abbr[title]:focus {
  text-decoration-color: var(--accent);
  color: inherit;
}

body[data-theme="dark"] abbr[title] {
  text-decoration-color: var(--ink-muted);
}

/* Don't show the dotted underline on abbr inside display titles, bets,
   and other emphasis spots where it would add noise. */
.problem-thesis abbr[title],
.section-title abbr[title],
.bet-item-name abbr[title],
.takeaway-statement abbr[title] {
  text-decoration: none;
}


/* Stage 5 surface description: single quiet line replaces the has/lacks
   two-column grid (Commit C follow-up). The gap story now lives in
   Section 4 bet 01, which is where the "so what" lands. */
.bp-stage5-surface {
  margin: 0.75rem 0 0.5rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 100%;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- preview button affordances
   The AC3 "see review screen" button and the Frontstage screenshot
   thumbs were too subtle; readers didn't know they were clickable.
   Stronger affordance: solid border, expand-icon glyph, clear label,
   hover + focus states that feel actionable. Keeps the lightbox as
   the single preview pattern (one mental model) instead of adding
   flyovers or in-cell expansion which would destabilize the grid
   and fracture screen-reader semantics.
   ============================================================ */

.bp-ac3-thumb {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.5rem 0.85rem 0.5rem 0.75rem;
  border: 1px solid var(--rule) !important;
  border-style: solid !important;
  border-radius: 6px;
  background: var(--bg-elev);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
  margin-top: 0.5rem;
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.03);
}

.bp-ac3-thumb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.bp-ac3-thumb-label {
  color: var(--ink);
}

.bp-ac3-thumb-hint {
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  font-weight: 500;
  border-left: 1px solid var(--rule);
  padding-left: 0.55rem;
  margin-left: 0.15rem;
}

.bp-ac3-thumb:hover,
.bp-ac3-thumb:focus-visible {
  border-color: var(--accent) !important;
  background: var(--accent-soft);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -6px rgba(42, 77, 143, 0.35);
}

.bp-ac3-thumb:hover .bp-ac3-thumb-label,
.bp-ac3-thumb:focus-visible .bp-ac3-thumb-label {
  color: var(--accent);
}

.bp-ac3-thumb:hover .bp-ac3-thumb-icon,
.bp-ac3-thumb:focus-visible .bp-ac3-thumb-icon {
  background: var(--accent);
  color: #fff;
}

.bp-ac3-thumb:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.03);
}

/* Frontstage screenshot thumbs: same logic. Add a small expand glyph
   overlay at the top-right of each thumb frame so the "click to open"
   intent reads at a glance. Clearer hover treatment too. */
.bp-thumb-frame {
  position: relative;
  cursor: pointer;
}

.bp-thumb-frame::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background:
    linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
    var(--accent) border-box;
  border: 1px solid transparent;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9V3h6'/><path d='M21 9V3h-6'/><path d='M3 15v6h6'/><path d='M21 15v6h-6'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  opacity: 0.55;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.bp-thumb:hover .bp-thumb-frame::after,
.bp-thumb:focus-visible .bp-thumb-frame::after {
  opacity: 1;
  transform: scale(1.1);
}

.bp-thumb:hover .bp-thumb-frame,
.bp-thumb:focus-visible .bp-thumb-frame {
  border-color: var(--accent);
  box-shadow: 0 3px 8px -4px rgba(42, 77, 143, 0.25);
}

/* Dark theme tweak for the AC3 button -- keep the accent soft bg legible */
body[data-theme="dark"] .bp-ac3-thumb {
  background: var(--bg-elev);
}

body[data-theme="dark"] .bp-ac3-thumb:hover,
body[data-theme="dark"] .bp-ac3-thumb:focus-visible {
  background: rgba(140, 176, 255, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .bp-ac3-thumb,
  .bp-thumb-frame::after {
    transition: none !important;
  }
  .bp-ac3-thumb:hover,
  .bp-ac3-thumb:focus-visible,
  .bp-thumb-frame::after {
    transform: none !important;
  }
}


/* ============================================================
   v0.3 EDITORIAL PASS -- preview affordances aligned to CS Help
   Supersedes the D49 affordance layer with the canonical pattern
   from CS Help Blueprint:
     1. Screenshot-shaped thumbnails (not text pills)
     2. A 28x28 round expand-icon overlay in the top-left, always
        visible, solid bg + hairline border, diagonal-arrows glyph
     3. Thumbnail lifts -3px on hover + focus-visible with shadow
     4. Square-ish aspect ratio, rounded-corner container
   One preview pattern across both the HITL blueprint and CS Help.
   ============================================================ */

/* ---- Frontstage thumbs: rework as CS-Help-style screenshot frames ---- */
.bp-thumb {
  margin-top: auto;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-self: flex-start;
}

.bp-thumb-frame {
  position: relative !important;
  display: inline-flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  width: 120px !important;
  height: 78px !important;
  padding: 0.55rem 0.6rem 0.5rem !important;
  border-radius: 6px !important;
  background:
    linear-gradient(135deg, rgba(42, 77, 143, 0.05) 0%, rgba(42, 77, 143, 0.01) 100%),
    var(--bg-elev) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.04) !important;
  color: var(--ink-muted);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.2s;
  overflow: hidden;
}

/* The CS-Help diagonal-expand glyph overlay -- round, top-left, always on */
.bp-thumb-frame::before {
  content: '' !important;
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  right: auto !important;
  width: 24px !important;
  height: 24px !important;
  background-color: var(--bg-elev) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 50% !important;
  z-index: 3 !important;
  opacity: 1 !important;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Supersedes the prior top-right `::after` glyph I added earlier */
.bp-thumb-frame::after {
  display: none !important;
  content: none !important;
}

.bp-thumb:hover .bp-thumb-frame,
.bp-thumb:focus-visible .bp-thumb-frame {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(42, 77, 143, 0.18) !important;
  border-color: var(--accent) !important;
}

.bp-thumb:hover .bp-thumb-frame::before,
.bp-thumb:focus-visible .bp-thumb-frame::before {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") !important;
}

/* Keyboard focus outline (separate from the hover treatment) */
.bp-thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Approve / Reject path tints -- keep them subtle */
.bp-thumb-approve .bp-thumb-frame {
  background:
    linear-gradient(135deg, rgba(31, 95, 63, 0.10) 0%, rgba(31, 95, 63, 0.02) 100%),
    var(--bg-elev) !important;
}
.bp-thumb-reject .bp-thumb-frame {
  background:
    linear-gradient(135deg, rgba(138, 42, 42, 0.10) 0%, rgba(138, 42, 42, 0.02) 100%),
    var(--bg-elev) !important;
}

.bp-thumb-label {
  position: relative;
  z-index: 1;
  color: var(--ink-muted);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Dark theme: adjust glyph color so it reads on dark surface */
body[data-theme="dark"] .bp-thumb-frame::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
}

/* ---- AC3 preview: same pattern, scaled up. Shape it as a screenshot
   frame too, not a pill. Visually unifies with the Frontstage thumbs. ---- */
.bp-ac3-thumb {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  align-self: flex-start !important;
  width: 180px !important;
  min-height: 90px !important;
  padding: 0.55rem 0.6rem 0.55rem !important;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--hairline) !important;
  border-radius: 6px !important;
  background:
    linear-gradient(135deg, rgba(42, 77, 143, 0.05) 0%, rgba(42, 77, 143, 0.01) 100%),
    var(--bg-elev) !important;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.2s;
  margin-top: 0.55rem;
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.04) !important;
  overflow: hidden;
}

.bp-ac3-thumb::before {
  content: '' !important;
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  width: 28px !important;
  height: 28px !important;
  background-color: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Kill the inline SVG icon + hint pill from the earlier D49 build -- we're
   using the CS-Help round-corner glyph overlay instead. */
.bp-ac3-thumb-icon,
.bp-ac3-thumb-hint {
  display: none !important;
}

.bp-ac3-thumb-label {
  color: var(--ink-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bp-ac3-thumb:hover,
.bp-ac3-thumb:focus-visible {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(42, 77, 143, 0.18) !important;
  border-color: var(--accent) !important;
  background:
    linear-gradient(135deg, rgba(42, 77, 143, 0.10) 0%, rgba(42, 77, 143, 0.03) 100%),
    var(--bg-elev) !important;
}

.bp-ac3-thumb:hover::before,
.bp-ac3-thumb:focus-visible::before {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
}

.bp-ac3-thumb:hover .bp-ac3-thumb-label,
.bp-ac3-thumb:focus-visible .bp-ac3-thumb-label {
  color: var(--accent);
}

.bp-ac3-thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

body[data-theme="dark"] .bp-ac3-thumb::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .bp-thumb-frame,
  .bp-thumb-frame::before,
  .bp-ac3-thumb,
  .bp-ac3-thumb::before {
    transition: none !important;
  }
  .bp-thumb:hover .bp-thumb-frame,
  .bp-thumb:focus-visible .bp-thumb-frame,
  .bp-ac3-thumb:hover,
  .bp-ac3-thumb:focus-visible {
    transform: none !important;
  }
}


/* ============================================================
   v0.3 EDITORIAL PASS -- expand patterns aligned to CS Help
   Three moves:
   1. Perception gap: was a <details> table inside a blueprint
      column (content wouldn't fit, expand-in-cell destabilized
      the grid). Now a clean inline 3-row strip that's always
      visible. No expansion. Bars render the gap visually.
   2. Scale deep-dive summary: restyled to match CS Help's
      "Show all sources" rotating-chevron pill button (native
      <details> keeps keyboard a11y intact).
   3. Sources summary: same treatment for consistency.
   ============================================================ */

/* ---- Perception gap: clean inline strip (supersedes prior details/table) ---- */
.perception-gap {
  margin-top: 0.55rem;
  padding: 0.55rem 0.65rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-size: 0.72rem;
}

.perception-gap-label {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--whisper-ink);
  margin-bottom: 0.4rem;
}

.perception-gap-rows {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.perception-gap-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr 2.5rem;
  align-items: center;
  column-gap: 0.5rem;
  line-height: 1.2;
}

.perception-gap-name {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.perception-gap-bar {
  position: relative;
  height: 6px;
  background: var(--rule);
  border-radius: 3px;
  overflow: hidden;
}

.perception-gap-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--flex-ink);
  border-radius: 3px;
  opacity: 0.75;
}

.perception-gap-row-worst .perception-gap-fill {
  background: var(--break-ink);
  opacity: 0.85;
}

.perception-gap-val {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--flex-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.perception-gap-row-worst .perception-gap-val {
  color: var(--break-ink);
}

.perception-gap-note {
  margin: 0.45rem 0 0;
  font-size: 0.6rem;
  color: var(--whisper-ink);
  line-height: 1.4;
}

/* Kill any stale .perception-gap-summary / -body / -table rules that could
   still cascade from older blocks in this file. */
.perception-gap-summary,
.perception-gap-body,
.perception-gap-table,
.perception-gap-lede,
.perception-gap-footnote {
  display: none !important;
}

/* ---- CS Help rotating-chevron pill button, applied to the Sources
   <details> block. Native <details>/<summary> keeps keyboard a11y and
   browser-managed aria-expanded semantics; this is styling only.
   (Previously also covered the scale-deepdive <details>, now inline.) */
.sources-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Kill native disclosure markers across browsers */
.sources-summary::-webkit-details-marker { display: none; }
.sources-summary::marker { content: ''; }

/* CS-Help chevron: 7x7 corner made from border-right + border-bottom,
   rotated 45deg. Rotates to -135deg when expanded. */
.sources-summary::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.3s ease;
  margin-left: 0.25rem;
}

.sources-details[open] .sources-summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.sources-summary:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 2px 6px rgba(42, 77, 143, 0.15);
}

.sources-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The "expand" hint text is redundant now that the chevron carries the
   affordance. Hide it. */
.sources-hint {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .sources-summary::after {
    transition: none;
  }
}




/* ============================================================
   v0.3 EDITORIAL PASS -- stage header visual rebuild
   Adapts CS Help Pages canonical stage treatment (`.sn` + `.sa`)
   as the baseline vocabulary, extended for HITL's dedicated
   stage header row. Result: both artifacts share the same
   number badge + stage name language. HITL adds actor verb and
   per-stage state tints (pivot, approve, reject) because its
   service blueprint carries more orientation data than CS Help's
   inline step labels.

   The sticky header auto-inherits this via the clone mechanism --
   no separate sticky overrides needed.
   ============================================================ */

/* Stage header cell: CS Help vertical rhythm + HITL's multi-line layout.
   Grid layout: row 1 = number + icon lockup, row 2 = stage name, row 3 = actor. */
.bp-stage-head {
  display: grid !important;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto auto;
  align-items: start;
  justify-items: start;
  gap: 0.25rem 0.5rem !important;
  padding: 1rem 1rem 0.95rem !important;
  background: var(--bg-elev) !important;
  border-top: 3px solid transparent !important;
  border-left: 1px solid var(--hairline) !important;
  border-bottom: 1px solid var(--rule) !important;
  position: relative;
  cursor: default;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.bp-stage-head:first-of-type {
  border-left: none !important;
}

/* Row 1: number + icon inline lockup */
.bp-stage-head .bp-stage-num {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  border-radius: 50% !important;
  background: var(--bg) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--ink-muted) !important;
  font-family: var(--font-display);
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0;
  flex-shrink: 0;
  margin: 0;
}

.bp-stage-head .bp-stage-icon {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  opacity: 0.75;
  flex-shrink: 0;
  align-self: center;
}

.bp-stage-head .bp-stage-icon svg {
  display: block;
}

/* Row 2: stage name spans all columns */
.bp-stage-head .bp-stage-name {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  font-family: var(--font-display);
  font-size: 0.94rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em;
  margin: 0.2rem 0 0;
  max-width: 100%;
}

/* Row 3: actor verb eyebrow, muted small-caps */
.bp-stage-head .bp-stage-actor {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  font-family: var(--font-display);
  font-size: 0.58rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  color: var(--whisper-ink) !important;
  line-height: 1.1;
  margin-top: 0.1rem;
}

/* Stage 5 pivot: CS-Help's active-state vocabulary adapted with HITL
   accent. Filled accent number, 2px accent top bar, subtle bg lift. */
.bp-stage-head-pivot {
  background: var(--accent-soft) !important;
  border-top-color: var(--accent) !important;
}

.bp-stage-head-pivot .bp-stage-num {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.bp-stage-head-pivot .bp-stage-name {
  color: var(--accent) !important;
  font-weight: 700 !important;
}

.bp-stage-head-pivot .bp-stage-icon {
  color: var(--accent);
  opacity: 0.9;
}

.bp-stage-head-pivot .bp-stage-actor {
  color: var(--accent) !important;
  opacity: 0.85;
}

/* Legacy pivot vertical spine (was ::before) -- suppressed. The new
   border-top accent bar carries the same signal cleanly at all widths. */
.bp-stage-head-pivot::before {
  display: none !important;
  content: none !important;
}

/* Stage 7a approve: hold-edge top bar + hold-colored number border.
   Subtle path tint on the cell bg. */
.bp-stage-head-approve {
  background: linear-gradient(to bottom, var(--bg-elev) 0%, var(--bp-approve-bg) 100%) !important;
  border-top-color: var(--hold-edge) !important;
}

.bp-stage-head-approve .bp-stage-num {
  border-color: var(--hold-edge) !important;
  color: var(--hold-ink) !important;
}

.bp-stage-head-approve .bp-stage-icon {
  color: var(--hold-ink);
  opacity: 0.85;
}

/* Stage 7b reject: break-edge top bar + break-colored number border. */
.bp-stage-head-reject {
  background: linear-gradient(to bottom, var(--bg-elev) 0%, var(--bp-reject-bg) 100%) !important;
  border-top-color: var(--break-edge) !important;
}

.bp-stage-head-reject .bp-stage-num {
  border-color: var(--break-edge) !important;
  color: var(--break-ink) !important;
}

.bp-stage-head-reject .bp-stage-icon {
  color: var(--break-ink);
  opacity: 0.85;
}

/* Stage header column corner (label cell, first col of stage row) */
.bp-stage-corner {
  background: var(--bg-elev) !important;
  border-bottom: 1px solid var(--rule) !important;
  border-right: 1px solid var(--rule) !important;
}

/* Dark theme polish: keep the badge readable on dark backgrounds */
body[data-theme="dark"] .bp-stage-head {
  background: var(--bg-elev) !important;
}

body[data-theme="dark"] .bp-stage-head .bp-stage-num {
  background: var(--bg) !important;
  border-color: var(--rule) !important;
  color: var(--ink-soft) !important;
}

body[data-theme="dark"] .bp-stage-head-pivot .bp-stage-num {
  color: var(--bg) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bp-stage-head { transition: none !important; }
}


/* ============================================================
   v0.3 EDITORIAL PASS -- splash effect + column highlight
   Adapts CS Help Pages' canonical patterns:
     1. Stage header row has a "Stages" label cell on the left
     2. Column crosshair highlight on hover (whole column tints)
     3. Animated splash: gradient bar grows from the top of the
        stage-head cell down to full height when column is active
     4. Opacity reveal on Frontstage / Backstage / Support cells
     5. Scroll-margin-top so sticky-nav jumps don't clip content
   Ported from `.col-highlight`, `.bp-journey .bp-c::before`,
   and the `.bp-back .bp-c:hover` opacity pattern in CS Help.
   ============================================================ */

/* ---- Stage corner: inherits all .bp-label styling (icon + title + sub
   pattern) so it reads consistent with the other row labels. No special
   rules needed beyond the normal .bp-label cascade. ---- */

/* ---- Splash effect on stage header cells ----
   Injected as a real <span class="bp-stage-splash"> element by JS so we
   don't collide with the existing ::after pseudo on .bp-stage-head-fork
   (stage 6 already uses ::after for its split-gradient fork indicator).
   The splash grows from top to full height when its column is highlighted.
   Color is driven by --col-glow per-stage. */
.bp-stage-head {
  position: relative;
  overflow: hidden;
}

.bp-stage-splash {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  background: linear-gradient(180deg, var(--col-glow, var(--accent)) 0%, transparent 100%);
  opacity: 0.14;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.bp-stage-head.col-highlight .bp-stage-splash {
  transform: scaleY(1);
}

/* Per-stage --col-glow variables. Default is accent; pivot/approve/reject
   override with their path-specific hue. */
.bp-stage-head { --col-glow: var(--accent); }
.bp-stage-head-approve { --col-glow: var(--hold-ink); }
.bp-stage-head-reject { --col-glow: var(--break-ink); }

/* Stage head content sits above the splash */
.bp-stage-head > *:not(.bp-stage-splash) {
  position: relative;
  z-index: 1;
}

/* ---- Column crosshair highlight on data-row cells ----
   Uses !important because layer-specific rules (e.g. .bp-layer-backstage
   .bp-c) already declare backgrounds that would otherwise win. The tint
   is deliberately subtle so it reads as a "same column" marker, not a
   loud selection. */
.blueprint .bp-c.col-highlight {
  background-color: rgba(42, 77, 143, 0.07) !important;
  transition: background-color 0.2s ease;
}

/* Approve-path cells (stage 7a) get a warmer on-hold column tint so the
   highlight sits close to the cell's existing green wash instead of
   introducing a blue that fights it. */
.blueprint .bp-c-approve-tint.col-highlight,
.blueprint .bp-c[data-stage="7a"].col-highlight {
  background-color: rgba(31, 95, 63, 0.08) !important;
}

/* Reject-path cells (stage 7b) get a warmer on-break column tint. */
.blueprint .bp-c-reject-tint.col-highlight,
.blueprint .bp-c[data-stage="7b"].col-highlight {
  background-color: rgba(138, 42, 42, 0.08) !important;
}

/* Dark theme: lighter tint instead of darker */
body[data-theme="dark"] .blueprint .bp-c.col-highlight {
  background-color: rgba(140, 176, 255, 0.07) !important;
}
body[data-theme="dark"] .blueprint .bp-c-approve-tint.col-highlight,
body[data-theme="dark"] .blueprint .bp-c[data-stage="7a"].col-highlight {
  background-color: rgba(127, 212, 163, 0.08) !important;
}
body[data-theme="dark"] .blueprint .bp-c-reject-tint.col-highlight,
body[data-theme="dark"] .blueprint .bp-c[data-stage="7b"].col-highlight {
  background-color: rgba(232, 144, 135, 0.08) !important;
}

/* Warm theme: warmer tint */
body[data-theme="warm"] .blueprint .bp-c.col-highlight {
  background-color: rgba(138, 90, 42, 0.06) !important;
}
body[data-theme="warm"] .blueprint .bp-c-approve-tint.col-highlight,
body[data-theme="warm"] .blueprint .bp-c[data-stage="7a"].col-highlight {
  background-color: rgba(31, 95, 63, 0.08) !important;
}
body[data-theme="warm"] .blueprint .bp-c-reject-tint.col-highlight,
body[data-theme="warm"] .blueprint .bp-c[data-stage="7b"].col-highlight {
  background-color: rgba(138, 42, 42, 0.08) !important;
}

/* Line of Visibility band doesn't participate in column highlighting --
   it's a row-spanning designed element, not per-stage content */
.bp-sep-band.col-highlight,
.bp-sep.col-highlight .bp-sep-band,
.bp-sep-band-visibility.col-highlight {
  background-color: inherit !important;
}

/* ---- Hover reveal on Frontstage / Backstage / Support cells ----
   CS Help pattern: these rows sit at 0.85 opacity by default; hovered
   cells lift to full. HITL uses a subtler shift (0.92 -> 1) because
   the cells carry more primary content than CS Help's versions. */
.bp-layer-frontstage .bp-c,
.bp-layer-backstage .bp-c,
.bp-layer-support .bp-c {
  opacity: 0.95;
  transition: opacity 0.2s ease;
}

.bp-layer-frontstage .bp-c:hover,
.bp-layer-backstage .bp-c:hover,
.bp-layer-support .bp-c:hover {
  opacity: 1;
}

/* Customer Actions row stays fully opaque -- it's the hero row */
.bp-layer-customer .bp-c { opacity: 1; }

/* ---- Scroll-margin-top fix: sticky header + top bar clip the Customer
   Actions row when a stage anchor is clicked. Push the anchor target
   down so content lands below both bars. Top bar is 58px, sticky
   adds another ~76px = 134px; add a touch of air. ---- */
.bp-stage-head,
#stage-1, #stage-2, #stage-3, #stage-4, #stage-5, #stage-6, #stage-7a, #stage-7b {
  scroll-margin-top: 150px;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- default stage-head top edge
   Stages 5, 7a, 7b have colored top borders (accent, hold-edge,
   break-edge) that signal pivot / approve / reject. Stages 1-4
   and 6 had `border-top: 3px solid transparent`, which left a
   3px dead band visible on hover. Fill it with a whisper-level
   left-to-right accent gradient so the top edge is a continuous
   flow line across every stage. Colored bars still dominate on
   5/7a/7b; defaults sit quietly.
   ============================================================ */

/* Apply the whisper directly as a border-image on the top 3px strip so it
   renders in the same layer as the solid colored borders on stages
   5/7a/7b. This fills the 3px gap that was otherwise transparent on
   stages 1-4 and 6. */
.bp-stage-head:not(.bp-stage-head-pivot):not(.bp-stage-head-approve):not(.bp-stage-head-reject) {
  border-top: 3px solid transparent !important;
  border-image: linear-gradient(
    90deg,
    rgba(42, 77, 143, 0) 0%,
    rgba(42, 77, 143, 0.35) 50%,
    rgba(42, 77, 143, 0) 100%
  ) 1 !important;
  border-image-slice: 1 !important;
  border-image-width: 3px 0 0 0 !important;
}

/* Warm theme: tint the whisper gradient warm */
body[data-theme="warm"] .bp-stage-head:not(.bp-stage-head-pivot):not(.bp-stage-head-approve):not(.bp-stage-head-reject) {
  border-image: linear-gradient(
    90deg,
    rgba(138, 90, 42, 0) 0%,
    rgba(138, 90, 42, 0.32) 50%,
    rgba(138, 90, 42, 0) 100%
  ) 1 !important;
  border-image-slice: 1 !important;
  border-image-width: 3px 0 0 0 !important;
}

/* Dark theme: lighter, cooler whisper */
body[data-theme="dark"] .bp-stage-head:not(.bp-stage-head-pivot):not(.bp-stage-head-approve):not(.bp-stage-head-reject) {
  border-image: linear-gradient(
    90deg,
    rgba(140, 176, 255, 0) 0%,
    rgba(140, 176, 255, 0.32) 50%,
    rgba(140, 176, 255, 0) 100%
  ) 1 !important;
  border-image-slice: 1 !important;
  border-image-width: 3px 0 0 0 !important;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- retire legacy sticky-clone overrides
   Earlier builds (D49-D51) had clone-specific visual overrides
   (compressed padding, smaller type, killed pivot/approve/reject
   treatments) that now fight D54's unified header treatment.
   Per D53 -- sticky should inherit the full-size header -- reset
   those overrides so the clone visually IS the full header.
   ============================================================ */

/* Undo clone padding compression. Inherit full-size padding (1rem from
   .bp-stage-head). */
.bp-sticky-clone .bp-stage-head {
  padding: 1rem 1rem 0.95rem !important;
  gap: 0.25rem 0.5rem !important;
  min-height: auto !important;
  align-items: start !important;
  border-bottom: 1px solid var(--rule) !important;
}

/* Re-enable the stage icon in the clone (was display: none in earlier build) */
.bp-sticky-clone .bp-stage-icon {
  display: inline-flex !important;
}

/* Undo compressed typography -- inherit full-size sizes */
.bp-sticky-clone .bp-stage-num {
  font-size: 0.8rem !important;
}
.bp-sticky-clone .bp-stage-name {
  font-size: 0.94rem !important;
}
.bp-sticky-clone .bp-stage-actor {
  display: block !important;
  font-size: 0.58rem !important;
}

/* Undo the "kill pivot/fork/approve/reject decorative treatments" rule
   that was making the sticky bar visually uniform. We now want them to
   match the full header, because the full header is the baseline. */
.bp-sticky-clone .bp-stage-head-pivot,
.bp-sticky-clone .bp-stage-head-fork,
.bp-sticky-clone .bp-stage-head-approve,
.bp-sticky-clone .bp-stage-head-reject {
  background: inherit !important;
  box-shadow: none !important;
}

/* Re-apply the pivot border-top (was replaced with inset box-shadow).
   Now the clone carries the same border-top-colored 3px bar as the
   full-size stage head. */
.bp-sticky-clone .bp-stage-head-pivot {
  background: var(--accent-soft) !important;
  border-top-color: var(--accent) !important;
}

/* Re-apply pivot vertical spine suppression -- we don't want it even
   in the clone */
.bp-sticky-clone .bp-stage-head-pivot::before {
  display: none !important;
  content: none !important;
}

/* Stage 7a / 7b path tints in the clone, same as the full-size header */
.bp-sticky-clone .bp-stage-head-approve {
  background: linear-gradient(to bottom, var(--bg-elev) 0%, var(--bp-approve-bg) 100%) !important;
  border-top-color: var(--hold-edge) !important;
}

.bp-sticky-clone .bp-stage-head-reject {
  background: linear-gradient(to bottom, var(--bg-elev) 0%, var(--bp-reject-bg) 100%) !important;
  border-top-color: var(--break-edge) !important;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- top nav adapted to CS Help pattern
   - Pill-shaped nav links with padding + border-radius
   - Muted at rest, subtle bg on hover, same bg pinned on active
   - Smooth-scroll on html
   - Subtitle dot/date kept out of header (moved to footer)
   ============================================================ */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Nav link: CS Help pill style. Overrides the older .nav-link rules
   at lines 226 and 4355 with stronger selectors. */
.top-bar .top-nav .nav-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-decoration: none;
  padding: 0.4rem 0.85rem;
  border-radius: 5px;
  letter-spacing: 0.005em;
  transition: color 0.2s ease, background 0.2s ease;
}

.top-bar .top-nav .nav-link:hover,
.top-bar .top-nav .nav-link:focus-visible {
  color: var(--ink);
  background: var(--accent-soft);
}

.top-bar .top-nav .nav-link.nav-active {
  color: var(--ink);
  background: var(--accent-soft);
}

.top-bar .top-nav .nav-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Title: CS Help uses a lighter weight (400) for the wordmark + a
   subtitle right after. Tighten HITL to match. */
.top-bar h1 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

.top-bar .subtitle {
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-top: 0;
  font-weight: 400;
  letter-spacing: 0;
}

.top-bar-title {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* Footer: keep tidy, match the quiet tone */
.footer p {
  font-size: 0.72rem;
  color: var(--ink-muted);
}


/* ============================================================
   v0.3 EDITORIAL PASS -- top-bar nav position + theme pill
   Adapts CS Help Pages:
   - .top-bar-left gets margin-right: auto so title stays left
     and nav + theme pill group on the right
   - Theme pill becomes icon buttons with a sliding .theme-pill-bg
     indicator instead of three text labels
   ============================================================ */

/* Push title left, everything else right (CS Help pattern) */
.top-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-right: auto;
}

/* Right group: nav + theme pill sit together on the right */
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.top-bar-right .top-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ---- Theme pill: CS-Help icon-button pattern with sliding bg ---- */

.top-bar-right .theme-pill {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 50px;
  padding: 3px;
  position: relative;
}

.top-bar-right .theme-pill-bg {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
  pointer-events: none;
}

.top-bar-right .theme-opt {
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  position: relative;
  z-index: 1;
  transition: color 0.2s ease;
  padding: 0;
  font: inherit;
}

.top-bar-right .theme-opt:hover { color: var(--ink); }
.top-bar-right .theme-opt.active { color: var(--ink); }

.top-bar-right .theme-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Dark theme: pill bg adapts */
body[data-theme="dark"] .top-bar-right .theme-pill {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--rule);
}

body[data-theme="dark"] .top-bar-right .theme-pill-bg {
  background: var(--bg-elev);
  border-color: var(--rule);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Warm theme */
body[data-theme="warm"] .top-bar-right .theme-pill {
  background: rgba(255, 255, 255, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .top-bar-right .theme-pill-bg { transition: none; }
}


/* ============================================================
   v0.3 EDITORIAL PASS -- Sources left-aligned
   Sources was centered via margin: 0 auto on .sources-details,
   which read as a call-to-action rather than a quiet footnote.
   Left-align the pill and its expanded content so Sources reads
   as provenance living at the bottom-left edge of the page, not
   a centerpiece.
   ============================================================ */

.sources-details {
  max-width: none !important;
  margin: 0 !important;
}

/* The section-inner wrapper around sources already constrains to
   the 1200px max-width. Keep the sources details left-aligned
   inside that constraint rather than re-centering. */
.sources > .section-inner {
  text-align: left;
}

/* Keep the pill button aligned to the section's left edge */
.sources-details .sources-summary {
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- LoV thin line + stage 6 secondary tint
   Per direction: drop the loud yellow pigmented band and render
   the Line of Visibility as a thin designed line, matching CS
   Help's quieter border-driven pattern. Keep the row-label
   carrying the bet-04 chip (now using the same .bp-bet-chip
   class as bets 01/02/03 elsewhere). Stage 6 gets a soft amber
   column-of-interest tint so the decide moment reads as
   important alongside stage 5's pivot treatment, but at lower
   saturation so the two don't compete.
   ============================================================ */

/* ---- LoV row: retire pigmented band, keep the structural row ---- */
.bp-sep.bp-sep-visibility {
  background: transparent !important;
  min-height: auto;
}

/* Row label: inherit standard .bp-label styling now that we use
   .bp-lbl-icon + .bp-lbl-title + .bp-lbl-sub like other rows */
.bp-sep-label.bp-sep-label-visibility {
  background: var(--bg-elev) !important;
  border-right: 1px solid var(--rule) !important;
  padding: 0.7rem 1rem !important;
  min-height: auto;
}

.bp-sep-label-visibility .bp-lbl-icon {
  color: var(--flex-ink);
  opacity: 0.9;
}

.bp-sep-label-visibility .bp-lbl-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--flex-ink);
  letter-spacing: 0.01em;
}

/* Nest the bet-04 chip inside the sub line */
.bp-sep-label-visibility .bp-lbl-sub .bp-bet-chip {
  display: inline-flex;
  margin-top: 0.15rem;
}

/* ---- Band -> thin designed line ---- */
.bp-sep-band-visibility {
  background: var(--bg-elev) !important;
  border: none !important;
  padding: 0.6rem 1.25rem !important;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  position: relative;
}

/* Kill the old band children */
.bp-sep-band-visibility .bp-sep-band-glyph,
.bp-sep-band-visibility .bp-sep-band-title {
  display: none !important;
}

/* The line itself: 1.5px amber rule, full width of the cell */
.bp-sep-band-line {
  display: block;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    rgba(201, 160, 92, 0) 0%,
    rgba(201, 160, 92, 0.55) 4%,
    rgba(201, 160, 92, 0.55) 96%,
    rgba(201, 160, 92, 0) 100%
  );
  border-radius: 1px;
  width: 100%;
}

/* Scope note under the line */
.bp-sep-band-scope {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.005em;
  color: var(--flex-ink);
  opacity: 0.75;
  line-height: 1.45;
  margin: 0;
  font-weight: 500;
}

/* Dark theme: reduce amber saturation */
body[data-theme="dark"] .bp-sep-band-line {
  background: linear-gradient(
    90deg,
    rgba(229, 183, 98, 0) 0%,
    rgba(229, 183, 98, 0.45) 4%,
    rgba(229, 183, 98, 0.45) 96%,
    rgba(229, 183, 98, 0) 100%
  );
}

body[data-theme="dark"] .bp-sep-band-scope,
body[data-theme="dark"] .bp-sep-label-visibility .bp-lbl-title,
body[data-theme="dark"] .bp-sep-label-visibility .bp-lbl-icon {
  color: var(--flex-ink);
}

/* Warm theme: slightly deeper amber */
body[data-theme="warm"] .bp-sep-band-line {
  background: linear-gradient(
    90deg,
    rgba(138, 90, 42, 0) 0%,
    rgba(138, 90, 42, 0.45) 4%,
    rgba(138, 90, 42, 0.45) 96%,
    rgba(138, 90, 42, 0) 100%
  );
}

/* ---- Stage 6: secondary column-of-interest treatment ----
   Stage 5 owns the pivot accent (One Associate + 37 Seconds converge).
   Stage 6 owns bet-02 One Decision -- purple, the same hue family as
   the bet-02 chip. Light wash on cells + purple top bar on the header
   so the column reads as "this is where One Decision lives."
   Uses !important because .bp-layer-* rules set `background:` shorthand
   which would blow away background-image alone. */
.blueprint .bp-c[data-stage="6"]:not(.bp-c-empty) {
  background-image: linear-gradient(
    to bottom,
    rgba(87, 64, 128, 0.1) 0%,
    rgba(87, 64, 128, 0.04) 100%
  ) !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

body[data-theme="warm"] .blueprint .bp-c[data-stage="6"]:not(.bp-c-empty) {
  background-image: linear-gradient(
    to bottom,
    rgba(106, 58, 40, 0.1) 0%,
    rgba(106, 58, 40, 0.04) 100%
  ) !important;
}

body[data-theme="dark"] .blueprint .bp-c[data-stage="6"]:not(.bp-c-empty) {
  background-image: linear-gradient(
    to bottom,
    rgba(198, 180, 220, 0.12) 0%,
    rgba(198, 180, 220, 0.04) 100%
  ) !important;
}

/* Stage 6 header: full-cell purple gradient wash, mirroring the pattern
   used by 7a/7b (`linear-gradient(to bottom, bg-elev 0%, path-bg 100%)`).
   Stage 6 owns One Decision, so the column header carries bet-02's
   purple as its full-cell wash -- same visual weight as approve/reject,
   reads as a significant column like 5/7a/7b. */
.bp-stage-head.bp-stage-head-fork:not(.bp-stage-head-pivot):not(.bp-stage-head-approve):not(.bp-stage-head-reject),
.bp-stage-head[data-stage="6"]:not(.bp-stage-head-pivot):not(.bp-stage-head-approve):not(.bp-stage-head-reject) {
  background: linear-gradient(to bottom, var(--bg-elev) 0%, rgba(87, 64, 128, 0.14) 100%) !important;
  border-top: 3px solid transparent !important;
  border-image-source: linear-gradient(
    90deg,
    rgba(87, 64, 128, 0.35) 0%,
    rgba(87, 64, 128, 0.85) 50%,
    rgba(87, 64, 128, 0.35) 100%
  ) !important;
  border-image-slice: 1 !important;
  border-image-width: 3px 0 0 0 !important;
  border-image-repeat: stretch !important;
}

body[data-theme="warm"] .bp-stage-head.bp-stage-head-fork:not(.bp-stage-head-pivot):not(.bp-stage-head-approve):not(.bp-stage-head-reject),
body[data-theme="warm"] .bp-stage-head[data-stage="6"]:not(.bp-stage-head-pivot):not(.bp-stage-head-approve):not(.bp-stage-head-reject) {
  background: linear-gradient(to bottom, var(--bg-elev) 0%, rgba(106, 58, 40, 0.14) 100%) !important;
  border-image-source: linear-gradient(
    90deg,
    rgba(106, 58, 40, 0.35) 0%,
    rgba(106, 58, 40, 0.85) 50%,
    rgba(106, 58, 40, 0.35) 100%
  ) !important;
}

body[data-theme="dark"] .bp-stage-head.bp-stage-head-fork:not(.bp-stage-head-pivot):not(.bp-stage-head-approve):not(.bp-stage-head-reject),
body[data-theme="dark"] .bp-stage-head[data-stage="6"]:not(.bp-stage-head-pivot):not(.bp-stage-head-approve):not(.bp-stage-head-reject) {
  background: linear-gradient(to bottom, var(--bg-elev) 0%, rgba(198, 180, 220, 0.16) 100%) !important;
  border-image-source: linear-gradient(
    90deg,
    rgba(198, 180, 220, 0.3) 0%,
    rgba(198, 180, 220, 0.75) 50%,
    rgba(198, 180, 220, 0.3) 100%
  ) !important;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- LoV: CS Help top-stroke pattern
   Supersedes the prior gradient-line approach. Now:
   - 2px amber top stroke across the whole row (matches CS Help's
     `.bp-journey .bp-c { border-top: 3px solid }` vocabulary)
   - Very subtle amber bg tint (alpha ~0.04, matches CS Help's
     `.jc-bad { background: rgba(..., 0.04) }`)
   - Tighter row height
   - Bet 04 chip inline with the scope copy in the band, centered
     vertically; left-hand label keeps just icon + title
   ============================================================ */

/* Row: continuous top stroke across label + band, subtle amber wash */
.bp-sep.bp-sep-visibility {
  background: rgba(201, 160, 92, 0.04) !important;
  border-top: 2px solid rgba(201, 160, 92, 0.55) !important;
  min-height: auto;
}

/* Left label: tighter padding, inherits the tint. Icon + title only. */
.bp-sep-label.bp-sep-label-visibility {
  background: transparent !important;
  border-right: 1px solid var(--rule) !important;
  padding: 0.5rem 1rem !important;
  min-height: auto;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.45rem !important;
}

.bp-sep-label-visibility .bp-lbl-icon {
  color: var(--flex-ink);
  opacity: 0.9;
}

.bp-sep-label-visibility .bp-lbl-title {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--flex-ink) !important;
  letter-spacing: 0.01em;
}

/* Band: chip + scope text inline, vertically centered */
.bp-sep-band.bp-sep-band-visibility {
  background: transparent !important;
  border: none !important;
  padding: 0.5rem 1.25rem !important;
  min-height: auto;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.9rem !important;
}

.bp-sep-band-visibility .bp-bet-chip {
  flex-shrink: 0;
}

.bp-sep-band-visibility .bp-sep-band-scope {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  letter-spacing: 0.005em;
  color: var(--flex-ink);
  opacity: 0.85;
  line-height: 1.45;
  margin: 0;
  font-weight: 500;
}

/* Kill the old gradient line + old band-glyph/title leftovers */
.bp-sep-band-line,
.bp-sep-band-visibility .bp-sep-band-glyph,
.bp-sep-band-visibility .bp-sep-band-title {
  display: none !important;
}

/* Warm theme: deeper amber */
body[data-theme="warm"] .bp-sep.bp-sep-visibility {
  background: rgba(138, 90, 42, 0.05) !important;
  border-top-color: rgba(138, 90, 42, 0.55) !important;
}

/* Dark theme: reduced-saturation amber */
body[data-theme="dark"] .bp-sep.bp-sep-visibility {
  background: rgba(229, 183, 98, 0.05) !important;
  border-top-color: rgba(229, 183, 98, 0.45) !important;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- icons refined
   Per journey-map designer lens: stage icons were decorative
   freight (number + name + actor verb carry stage identity
   cleanly). Row label icons ARE load-bearing -- they anchor
   the identity of a row that repeats across 8 columns. So:

   1. Drop stage header icons entirely (they competed with the
      bet sigils' filled, colored, meaningful iconography slot)
   2. Strengthen row label icons: 14x14, full opacity, thin
      outline -- clear visual vocabulary distinct from bets'
      filled sigils
   ============================================================ */

/* Hide all stage header icons in both the non-sticky header and
   the sticky clone. Number + name + actor verb carry the stage. */
.bp-stage-head .bp-stage-icon,
.bp-sticky-clone .bp-stage-head .bp-stage-icon {
  display: none !important;
}

/* Row label icons: step up from muted 12x12 to confident 14x14.
   Thin outline stays intentional -- it's the visual differentiator
   from the filled, colored bet sigils. */
.bp-label .bp-lbl-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  opacity: 1;
}

.bp-label .bp-lbl-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Layer-specific icon tinting -- inherits layer identity color
   tokens so each row's icon reads as part of its visual family. */
.bp-layer-customer   .bp-label .bp-lbl-icon { color: var(--bp-chip-1-ink); opacity: 0.85; }
.bp-layer-frontstage .bp-label .bp-lbl-icon { color: var(--ink-soft); opacity: 0.9; }
.bp-layer-backstage  .bp-label .bp-lbl-icon { color: var(--ink-soft); opacity: 0.9; }
.bp-layer-support    .bp-label .bp-lbl-icon { color: var(--ink-muted); opacity: 0.8; }

/* Line of Visibility icon: inherits amber flex-ink from the row's
   visual vocabulary. Full opacity since this row carries bet 04. */
.bp-sep-label-visibility .bp-lbl-icon {
  color: var(--flex-ink);
  opacity: 0.95;
}

/* Stages corner icon: muted, it's a pure row-header marker */
.bp-stage-corner .bp-lbl-icon {
  color: var(--whisper-ink);
  opacity: 0.9;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- row label icons as designed tiles
   Per visual design + journey-map expert lens: current icons read
   as loose glyphs. World-class blueprints (NNG, Stripe, IBM Carbon)
   wrap row-label icons in small tiles that give the mark presence
   and carry per-row semantic color.

   Treatment:
   - 28x28 rounded tile (6px radius) with hairline border
   - Per-layer tile bg + border + glyph tint
   - 14x14 glyph centered inside, 1.6px stroke
   - Grid layout for .bp-label: tile + title inline on row 1,
     sub-line full-width on row 2 below (proper lockup, not stack)
   - Bet sigils remain filled/colored (meaningful); row tiles are
     outline-glyph-in-tinted-tile (orientation). Two distinct slots.
   ============================================================ */

/* Label cell: grid layout. Tile (col 1 row 1) + title (col 2 row 1)
   baseline-aligned. Sub-line spans full width on row 2. */
.bp-label {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 0.65rem !important;
  row-gap: 0.35rem !important;
}

.bp-label .bp-lbl-icon {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  border-radius: 6px !important;
  background: rgba(26, 26, 26, 0.04);
  border: 1px solid rgba(26, 26, 26, 0.08);
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
  opacity: 1 !important;
}

.bp-label .bp-lbl-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block;
}

.bp-label .bp-lbl-title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
}

.bp-label .bp-lbl-sub {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
}

/* ---- Per-layer tile vocabulary ----
   Each row's tile carries the layer's semantic color at low
   saturation. Glyph tint picks up the same hue family. Creates
   an identity signal without shouting. */

/* Customer Actions: bet-01 blue tint (hero row, customers are subject) */
.bp-layer-customer .bp-label .bp-lbl-icon {
  background: rgba(42, 77, 143, 0.08);
  border-color: rgba(42, 77, 143, 0.2);
  color: var(--bp-chip-1-ink);
}

/* Frontstage: neutral cool */
.bp-layer-frontstage .bp-label .bp-lbl-icon {
  background: rgba(26, 26, 26, 0.04);
  border-color: rgba(26, 26, 26, 0.12);
  color: var(--ink-soft);
}

/* Backstage: deeper neutral */
.bp-layer-backstage .bp-label .bp-lbl-icon {
  background: rgba(26, 26, 26, 0.05);
  border-color: rgba(26, 26, 26, 0.15);
  color: var(--ink-soft);
}

/* Support Processes: most muted */
.bp-layer-support .bp-label .bp-lbl-icon {
  background: rgba(26, 26, 26, 0.03);
  border-color: rgba(26, 26, 26, 0.08);
  color: var(--ink-muted);
}

/* Line of Visibility: amber tint -- same token family as the LoV
   row's top stroke. The tile is part of bet 04's visual vocabulary. */
.bp-sep-label-visibility .bp-lbl-icon {
  background: rgba(201, 160, 92, 0.12) !important;
  border-color: rgba(201, 160, 92, 0.35) !important;
  color: var(--flex-ink) !important;
}

/* Stages corner: pure row-header marker, neutral */
.bp-stage-corner .bp-lbl-icon {
  background: rgba(26, 26, 26, 0.04) !important;
  border-color: rgba(26, 26, 26, 0.1) !important;
  color: var(--ink-muted) !important;
}

/* ---- LoV row needs row-aligned flex since it has no sub-line ---- */
.bp-sep-label.bp-sep-label-visibility {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  column-gap: 0.65rem !important;
  row-gap: 0 !important;
}

.bp-sep-label-visibility .bp-lbl-title {
  grid-column: 2;
  grid-row: 1;
}

/* ---- Dark theme: adjust tile bg/border so tiles remain legible ---- */
body[data-theme="dark"] .bp-label .bp-lbl-icon {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

body[data-theme="dark"] .bp-layer-customer .bp-label .bp-lbl-icon {
  background: rgba(140, 176, 255, 0.12);
  border-color: rgba(140, 176, 255, 0.3);
  color: var(--bp-chip-1-ink);
}

body[data-theme="dark"] .bp-sep-label-visibility .bp-lbl-icon {
  background: rgba(229, 183, 98, 0.15) !important;
  border-color: rgba(229, 183, 98, 0.35) !important;
}

/* ---- Warm theme: adjust for warm palette ---- */
body[data-theme="warm"] .bp-layer-customer .bp-label .bp-lbl-icon {
  background: rgba(106, 58, 40, 0.1);
  border-color: rgba(106, 58, 40, 0.25);
  color: var(--bp-chip-1-ink);
}

body[data-theme="warm"] .bp-sep-label-visibility .bp-lbl-icon {
  background: rgba(138, 90, 42, 0.12) !important;
  border-color: rgba(138, 90, 42, 0.35) !important;
  color: var(--bp-chip-1-ink) !important;
}

/* ---- Sticky clone inherits all of this via the clone mechanism ----
   But the clone's label cell (`.bp-sticky-clone .bp-label`) had an
   earlier override in D54 that used display:flex. Reset to match
   the new grid layout so tiles align identically in the sticky. */
.bp-sticky-clone .bp-label {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 0.65rem !important;
  row-gap: 0.35rem !important;
  align-items: center !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bp-label .bp-lbl-icon { transition: none !important; }
}


/* ============================================================
   v0.3 EDITORIAL PASS -- unify bet sigils as circles
   Row label tiles (just added) use rounded squares. Bet chips
   in the blueprint already use circles. To keep the visual
   vocabulary unambiguous -- CIRCLES = bets, SQUARES = structure
   -- convert the Section 1 hero bet cards and the Section 4
   stress-block bet sigils from rounded squares to circles.
   Filled + colored + white glyph stays; only shape changes.
   ============================================================ */

/* All bet sigil containers become circles */
.bet-sigil,
.bet-sigil-sm,
.bet-sigil-lg,
.bet-item .bet-sigil,
.bet-stress-head .bet-sigil-lg {
  border-radius: 50% !important;
}

/* Narrow-viewport overrides from earlier declarations used border-radius: 12px;
   also force circle at those breakpoints */
@media (max-width: 720px) {
  .bet-item .bet-sigil,
  .bet-stress-head .bet-sigil-lg {
    border-radius: 50% !important;
  }
}


/* ============================================================
   v0.3 EDITORIAL PASS -- Customer Actions tile neutralized
   The Customer Actions row-tile was using bet-01 blue tokens
   which accidentally implies "this row is owned by bet 01."
   But bet 01 (One Associate) is about the CSA specialist, not
   the customer. Row tiles should carry layer identity, not
   bet semantics. Swap to a neutral warm tone that still gives
   the row a bit of prominence without conflicting with the
   bet vocabulary.
   ============================================================ */

.bp-layer-customer .bp-label .bp-lbl-icon {
  background: rgba(26, 26, 26, 0.05) !important;
  border-color: rgba(26, 26, 26, 0.12) !important;
  color: var(--ink-soft) !important;
}

body[data-theme="dark"] .bp-layer-customer .bp-label .bp-lbl-icon {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--ink-soft) !important;
}

body[data-theme="warm"] .bp-layer-customer .bp-label .bp-lbl-icon {
  background: rgba(42, 31, 20, 0.05) !important;
  border-color: rgba(42, 31, 20, 0.14) !important;
  color: var(--ink-soft) !important;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- sticky scroll sync fix + perf
   `html { scroll-behavior: smooth }` causes programmatic
   scrollLeft assignments on the sticky clone to smooth-
   interpolate, lagging the real blueprint scroll. Force auto
   on the clone so scrollLeft jumps instantly. The page-level
   smooth scroll for nav jumps still works unchanged.
   ============================================================ */

.bp-sticky-clone {
  scroll-behavior: auto !important;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- hover jitter fix
   .bp-stage-head had `transition: background 0.15s` which
   animates the `background-image` gradient position too,
   causing layout paint thrash on hover. Narrow to color-only.
   ============================================================ */

.bp-stage-head {
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.blueprint .bp-c.col-highlight {
  transition: background-color 0.2s ease !important;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- sigil number positioning for circles
   When the sigil container was a rounded square, the corner
   number chip (.bet-sigil-num) sat at top: 6px; right: 6px
   comfortably in the corner. After circling the container,
   that position falls outside the visible circle. Move the
   number so it sits inside the circle and reads cleanly.
   ============================================================ */

/* Section 1 hero + Section 4 stress head: circle sigils with corner nums.
   Tuck the number inside the circle's top-right arc by shifting toward
   center and elevating with a contrasting chip background. */
.bet-item .bet-sigil-num,
.bet-stress-head .bet-sigil-lg .bet-sigil-num {
  position: absolute;
  top: 4px !important;
  right: 4px !important;
  bottom: auto !important;
  font-size: 0.5rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 5px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  border-radius: 999px;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

body[data-theme="dark"] .bet-item .bet-sigil-num,
body[data-theme="dark"] .bet-stress-head .bet-sigil-lg .bet-sigil-num {
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a1a;
}

/* Section 5 phase-map mini sigils are at 24-28px; number would be too cramped
   inside a circle that small. Hide the number there since the sigil is
   paired with the bet name text right next to it anyway. */
.phase-bet .bet-sigil-num,
.bp-bet-chip .bet-sigil-num,
.bp-sep-label-visibility .bet-sigil-num {
  /* already set elsewhere; explicit reaffirmation */
}


/* ============================================================
   v0.3 EDITORIAL PASS -- hero comet node visibility balance
   Light / warm: secondary nodes were nearly invisible; raise
   them to match the primary. Dark: primary was visibly bright
   compared to the softer secondaries; soften the primary to
   match secondaries (the "all three equal at the soft level").
   ============================================================ */

/* Light + warm: secondary heads match the primary */
.problem-bg-comet-head-sm .comet-head-core {
  width: 6px !important;
  height: 6px !important;
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.85) !important;
  opacity: 1 !important;
}

.problem-bg-comet-head-sm .comet-head-halo {
  width: 90px !important;
  height: 90px !important;
  opacity: 0.78 !important;
  filter: blur(1px) !important;
}

/* Dark: all three (primary + secondaries) soften to the original
   secondary-level visibility. Keeps the hero atmospheric at night. */
body[data-theme="dark"] .problem-bg-comet-head[data-head="0"] .comet-head-core,
body[data-theme="dark"] .problem-bg-comet-head-sm .comet-head-core {
  width: 3px !important;
  height: 3px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.45) !important;
  opacity: 0.75 !important;
}

body[data-theme="dark"] .problem-bg-comet-head[data-head="0"] .comet-head-halo,
body[data-theme="dark"] .problem-bg-comet-head-sm .comet-head-halo {
  width: 55px !important;
  height: 55px !important;
  opacity: 0.5 !important;
  filter: blur(3px) !important;
}

/* Dark mode also softens the crosshair streaks on the primary head */
body[data-theme="dark"] .problem-bg-comet-head[data-head="0"] .comet-head-streak {
  opacity: 0.25 !important;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- jitter + redundancy + icon cleanup
   Per expert-lens review:
   1. Cell-level opacity hover was causing the jitter -- a 5%
      opacity shift on every cell as the mouse moved created a
      constant paint pulse. Remove entirely.
   2. Section 1 hero + Section 4 stress circle-sigil numbers:
      redundant with the bet name sitting next to them. Hide.
   3. Stage name + actor-verb eyebrow are often redundant
      ("CS Chatbot gathers" under "CS Chatbot gathers context").
      Drop the eyebrow; the stage name already carries the
      actor. World-class blueprints show one stage label.
   ============================================================ */

/* 1. Kill the cell hover opacity jitter */
.bp-layer-frontstage .bp-c,
.bp-layer-backstage .bp-c,
.bp-layer-support .bp-c {
  opacity: 1 !important;
  transition: none !important;
}

.bp-layer-frontstage .bp-c:hover,
.bp-layer-backstage .bp-c:hover,
.bp-layer-support .bp-c:hover {
  opacity: 1 !important;
}

/* 2. Remove sigil numbers from hero + stress circles */
.bet-item .bet-sigil-num,
.bet-stress-head .bet-sigil-lg .bet-sigil-num {
  display: none !important;
}

/* 3. Hide the stage actor-verb eyebrow -- stage name carries the actor */
.bp-stage-head .bp-stage-actor {
  display: none !important;
}


/* ============================================================
   v0.3 EDITORIAL PASS -- stage 5 number unfilled + Backstage
   row lines. Stage 5's accent-filled number badge was the only
   one treated differently, reading heavier than intended. Dial
   back to the standard outline-circle treatment so all stage
   numbers are consistent; the pivot's accent top stroke + bg
   wash already mark it as the hero. Backstage row gets subtle
   top + bottom rules to distinguish it as the load-bearing
   layer where bets converge.
   ============================================================ */

/* Stage 5 pivot: number matches the other stages (outline circle,
   no accent fill). The pivot's accent top stroke + accent-soft cell
   background still mark it as the hero. */
.bp-stage-head-pivot .bp-stage-num {
  background: var(--bg) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--ink-muted) !important;
}

body[data-theme="dark"] .bp-stage-head-pivot .bp-stage-num {
  background: var(--bg) !important;
  border-color: var(--rule) !important;
  color: var(--ink-soft) !important;
}

/* Backstage row gets subtle top + bottom rules so it reads as the
   load-bearing layer where stages 5 and 6 bets converge. Quiet
   hairline treatment -- not decoration, just structural marker. */
.bp-row.bp-layer-backstage {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* ============================================================
   Dark-mode bet icons -- unified treatment
   All bet sigil icons (big tiles, chips, roadmap pills, everything)
   render as off-white --ink glyphs on their tinted disc. Disc color
   carries bet identity; glyph silhouette reads cleanly. Placed at
   end of file with !important to guarantee cascade priority over
   the many mid-file redeclarations.
   ============================================================ */
body[data-theme="dark"] .bet-sigil-icon {
  color: var(--ink) !important;
  background: transparent !important;
}

/* Number badges inside tiles/chips -- also neutral so they read. */
body[data-theme="dark"] .bet-item .bet-sigil-num,
body[data-theme="dark"] .bet-sigil-lg .bet-sigil-num {
  color: var(--ink);
}

/* Exception: Line-of-Visibility sticky label is a numbered badge,
   not a chip -- keep its colored disc + dark glyph treatment. */
body[data-theme="dark"] .bp-sep-label-visibility .bp-sep-sub .bet-sigil-icon {
  background: var(--bet-4-ink) !important;
  color: var(--bg) !important;
}

/* ============================================================
   Back-to-top FAB
   Appears bottom-right when scrolled past ~80vh. Themed for all
   three palettes. Uses --bg-elev surface + --accent stroke so the
   button reads as native UI chrome, not a decorative element.
   ============================================================ */
.btt {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 9990;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev);
  color: var(--accent);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 14px -6px rgba(26, 26, 26, 0.12),
              0 1px 3px rgba(26, 26, 26, 0.06);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease,
              background 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, box-shadow 0.2s ease;
}

.btt.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.btt:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 6px 18px -6px rgba(42, 77, 143, 0.28),
              0 1px 3px rgba(26, 26, 26, 0.08);
  transform: translateY(-2px);
}

.btt:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btt svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* Warm theme: warm shadow tint + warm hover bg */
body[data-theme="warm"] .btt {
  box-shadow: 0 4px 14px -6px rgba(42, 31, 20, 0.12),
              0 1px 3px rgba(42, 31, 20, 0.06);
}
body[data-theme="warm"] .btt:hover {
  box-shadow: 0 6px 18px -6px rgba(138, 90, 42, 0.28),
              0 1px 3px rgba(42, 31, 20, 0.08);
}

/* Dark theme: deeper shadow, accent glow on hover */
body[data-theme="dark"] .btt {
  box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.5),
              0 1px 3px rgba(0, 0, 0, 0.3);
}
body[data-theme="dark"] .btt:hover {
  background: var(--accent-soft);
  box-shadow: 0 6px 20px -6px rgba(140, 176, 255, 0.35),
              0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btt { transition: opacity 0.15s ease; transform: none !important; }
  .btt:hover { transform: none !important; }
}

@media (max-width: 720px) {
  .btt { right: 1rem; bottom: 1rem; width: 40px; height: 40px; }
  .btt svg { width: 16px; height: 16px; }
}


/* ============================================================
   D75 -- Dark-mode bet chip label legibility (blueprint + roadmap)
   A later cascade layer (~line 9818) re-set chip text to
   --bet-N-ink, undoing D58's neutralization. Enforced here at
   end-of-file so the chip label reads as --ink in dark (not
   pastel-on-pastel). Icon keeps its colored-disc + dark-glyph
   treatment -- only chip text + border are tuned.
   ============================================================ */
body[data-theme="dark"] .bp-bet-chip[data-bet="1"],
body[data-theme="dark"] .bp-bet-chip[data-bet="2"],
body[data-theme="dark"] .bp-bet-chip[data-bet="3"],
body[data-theme="dark"] .bp-bet-chip[data-bet="4"],
body[data-theme="dark"] .roadmap-bet[data-bet="1"],
body[data-theme="dark"] .roadmap-bet[data-bet="2"],
body[data-theme="dark"] .roadmap-bet[data-bet="3"],
body[data-theme="dark"] .roadmap-bet[data-bet="4"],
body[data-theme="dark"] .phase-bet[data-bet="1"],
body[data-theme="dark"] .phase-bet[data-bet="2"],
body[data-theme="dark"] .phase-bet[data-bet="3"],
body[data-theme="dark"] .phase-bet[data-bet="4"] {
  color: var(--ink);
}

/* Borders bumped from the default 18%-ish --bet-N-edge tokens to
   fully saturated --bet-N-ink so the chip outline reads as a
   definite color identifier against the dark surface. Subtle
   but enough to distinguish chips at a glance. */
body[data-theme="dark"] .bp-bet-chip[data-bet="1"],
body[data-theme="dark"] .roadmap-bet[data-bet="1"],
body[data-theme="dark"] .phase-bet[data-bet="1"] { border-color: color-mix(in srgb, var(--bet-1-ink) 55%, transparent); }
body[data-theme="dark"] .bp-bet-chip[data-bet="2"],
body[data-theme="dark"] .roadmap-bet[data-bet="2"],
body[data-theme="dark"] .phase-bet[data-bet="2"] { border-color: color-mix(in srgb, var(--bet-2-ink) 55%, transparent); }
body[data-theme="dark"] .bp-bet-chip[data-bet="3"],
body[data-theme="dark"] .roadmap-bet[data-bet="3"],
body[data-theme="dark"] .phase-bet[data-bet="3"] { border-color: color-mix(in srgb, var(--bet-3-ink) 55%, transparent); }
body[data-theme="dark"] .bp-bet-chip[data-bet="4"],
body[data-theme="dark"] .roadmap-bet[data-bet="4"],
body[data-theme="dark"] .phase-bet[data-bet="4"] { border-color: color-mix(in srgb, var(--bet-4-ink) 55%, transparent); }

/* Small sigil-num badge on the chip stays on --ink-soft so it
   reads as quiet tabular number, not competing with the label. */
body[data-theme="dark"] .bp-bet-chip .bet-sigil-num,
body[data-theme="dark"] .roadmap-bet .bet-sigil-num {
  color: var(--ink-soft);
}


/* ============================================================
   D78 -- Part 4 Evidence simplification pass
   Four bets each compressed to: header -> hold/crack -> phase chip.
   Preamble and payoff share the same visual DNA so the section
   bookends visually. Everything else (sub-labels, per-column
   citations, owner names, roadmap-item lists, alternating tints,
   custom arrow icons, "Evidence loop closed" complex state)
   was cut. Placed at end of file to win cascade over the layered
   density / clarity / quote passes above.
   ============================================================ */

/* ---------- Preamble + Payoff: matching bookend component ---------- */
.evidence-preamble,
.evidence-payoff {
  max-width: 900px;
  margin: 2.5rem 0 0;
  padding: 2rem 0 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-top: 1px solid var(--hairline);
}

.evidence-payoff {
  margin: 3rem 0 0;
  padding-top: 2.25rem;
}

.evidence-preamble-eyebrow,
.evidence-payoff-eyebrow {
  display: none; /* eyebrows cut -- the section title does that work */
}

.evidence-preamble-statement,
.evidence-payoff-statement {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.35;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0 0 1.75rem;
  max-width: 56ch;
  text-wrap: balance;
}

.evidence-preamble-lede,
.evidence-payoff-lede {
  color: var(--ink);
  font-weight: 700;
}

/* Two-stat comparison -- same pattern in preamble and payoff.
   Stat context / big value / small label, stacked, aligned on a
   horizontal baseline. Equal widths. */
.evidence-preamble-stats,
.evidence-payoff-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  border: none;
}

.evidence-preamble-stat,
.evidence-payoff-stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0 2rem 0 0;
  border: none;
}

.evidence-preamble-stat + .evidence-preamble-stat,
.evidence-payoff-stat + .evidence-payoff-stat {
  padding-left: 2rem;
  padding-right: 0;
  border-left: 1px solid var(--hairline);
}

.evidence-preamble-stat-context,
.evidence-payoff-stat-context {
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.4;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-body);
}

.evidence-preamble-stat-value,
.evidence-payoff-stat-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.evidence-preamble-stat-unit,
.evidence-payoff-stat-unit {
  font-size: 0.48em;
  font-weight: 600;
  color: var(--ink-soft);
  margin-left: 0.12em;
  letter-spacing: 0;
}

.evidence-preamble-stat-label,
.evidence-payoff-stat-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--whisper-ink);
  line-height: 1.3;
}

/* Semantic value color on the hold/break variants */
.evidence-preamble-stat-hold  .evidence-preamble-stat-value { color: var(--hold-ink); }
.evidence-preamble-stat-break .evidence-preamble-stat-value { color: var(--break-ink); }
.evidence-payoff-stat-hold    .evidence-payoff-stat-value   { color: var(--hold-ink); }
.evidence-payoff-stat-break   .evidence-payoff-stat-value   { color: var(--break-ink); }

.evidence-preamble-citation,
.evidence-payoff-citation {
  font-size: 0.75rem;
  color: var(--whisper-ink);
  margin: 1.5rem 0 0;
  font-style: italic;
  line-height: 1.4;
  font-weight: 400;
}

/* Old payoff-specific markup: neutralize */
.evidence-payoff-num,
.evidence-payoff-unit { display: none; }
.evidence-payoff-bars { display: none; }

/* ---------- Column header strip ---------- */
.bet-stress-columns {
  position: sticky;
  top: 58px;
  z-index: 10;
  display: grid;
  grid-template-columns: 220px 1fr;
  column-gap: 2.5rem;
  padding: 0.7rem 0;
  margin: 2.25rem 0 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--sticky-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.bet-stress-columns-spacer { grid-column: 1; }

.bet-stress-columns-labels {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
}

.bet-stress-col-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
}

.bet-stress-col-label-hold  { color: var(--hold-ink); }
.bet-stress-col-label-crack { color: var(--break-ink); }

.bet-stress-col-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bet-stress-col-label-hold  .bet-stress-col-dot { background: var(--hold-ink); }
.bet-stress-col-label-crack .bet-stress-col-dot { background: var(--break-ink); }

/* ---------- Bet stress stack ---------- */
.bet-stress {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: none;
}

.bet-stress-item {
  padding: 2rem 0 1.75rem;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 180px 1fr;
  column-gap: 2.5rem;
  row-gap: 1.25rem;
  align-items: start;
  background: transparent !important;
  margin: 0 !important;
}

.bet-stress-item:last-child { border-bottom: none; }

/* Head: sigil + name only. Sub-label and num-eyebrow cut. */
.bet-stress-head {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: sticky;
  top: 130px; /* clears the sticky column label strip */
  padding-top: 0.15rem;
}

.bet-stress-num { display: none; }
.bet-stress-sub { display: none; }

.bet-stress-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

/* Body: two columns, each a paragraph + optional quote/list.
   One subtle rail per column carries the hold/crack state. */
.bet-stress-body {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
}

.stress-col {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-left: 1rem;
  border-left: 2px solid var(--hairline);
  border-radius: 0;
  background: transparent;
}

.stress-col-hold  { border-left-color: var(--hold-ink); }
.stress-col-crack { border-left-color: var(--break-ink); }

/* Neutralize the ::before dot from the clarity pass */
.stress-col::before { display: none !important; content: none !important; }

.stress-col-label { display: none; }

.stress-col-text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
  margin: 0;
  max-width: 44ch;
}

.stress-col-crack .stress-col-text { font-weight: 500; }

/* Per-column citations cut -- citation lives in the preamble/payoff */
.stress-col-evidence { display: none; }

/* ---------- Quote: hanging glyph, serif italic, small-cap attrib ---------- */
.stress-quote {
  position: relative;
  margin: 0.15rem 0 0;
  padding: 0.35rem 0 0 1.4rem;
  border: none;
  font-style: normal;
  max-width: 44ch;
}

.stress-quote::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.85rem;
  line-height: 1;
  color: var(--break-ink);
  opacity: 0.5;
  font-style: normal;
}

.stress-quote-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
  margin: 0;
}

.stress-quote-text::before { content: ''; }
.stress-quote-text::after { content: ''; }

.stress-quote-attrib {
  display: block;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--whisper-ink);
  font-style: normal;
  margin-top: 0.5rem;
}

body[data-theme="dark"] .stress-quote::before { opacity: 0.65; }

/* ---------- Resolved list (Bet 01 only) ---------- */
.stress-resolved-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.stress-resolved-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 0.75rem;
  font-size: 0.84rem;
  line-height: 1.4;
}

.stress-resolved-what {
  color: var(--ink);
  font-weight: 600;
}

.stress-resolved-item.stress-resolved-dormant .stress-resolved-what {
  font-weight: 500;
  color: var(--whisper-ink);
}

.stress-resolved-status {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

.stress-resolved-shipped .stress-resolved-status { color: var(--hold-ink); }
.stress-resolved-dormant .stress-resolved-status { color: var(--whisper-ink); }

.stress-resolved-mark { display: none; }
.stress-resolved-item.stress-resolved-dormant::before { display: none; content: none; }

/* ---------- Footer: one chip link to the Phase, or "Evidence loop closed" ---------- */
.bet-stress-foot {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border: none;
  margin-top: 0;
}

/* Roadmap-item lists cut -- the detail lives in Part 5 */
.stress-roadmap,
.stress-foot-label,
.stress-foot-note,
.stress-foot-arrow,
.bet-stress-foot-clear .stress-foot-clear-text,
.bet-stress-foot-clear .stress-foot-label-clear {
  display: none !important;
}

.stress-foot-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--accent-soft);
  background: var(--accent-soft);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--accent);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.stress-foot-chip:hover,
.stress-foot-chip:focus-visible {
  border-color: var(--accent);
  background: var(--bg);
  color: var(--accent);
  outline: none;
}

.stress-foot-chip:focus-visible {
  box-shadow: var(--focus-ring);
}

.stress-foot-chip::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.8;
}

/* Bet 01 "Evidence loop closed" -- same chip shape, hold-ink colors */
.stress-foot-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--hold-ink) 25%, transparent);
  background: color-mix(in srgb, var(--hold-ink) 8%, transparent);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--hold-ink);
}

.stress-foot-status::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .bet-stress-columns { display: none; }
  .bet-stress-item {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 1rem;
    padding: 1.5rem 0;
  }
  .bet-stress-head {
    position: static;
    grid-row: auto;
    grid-column: 1;
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
  }
  .bet-stress-body {
    grid-column: 1;
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }
  .bet-stress-foot { grid-column: 1; }

  .evidence-preamble-stats,
  .evidence-payoff-stats {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .evidence-preamble-stat + .evidence-preamble-stat,
  .evidence-payoff-stat + .evidence-payoff-stat {
    padding-left: 0;
    padding-top: 1.25rem;
    border-left: none;
    border-top: 1px solid var(--hairline);
  }
}


/* ============================================================
   D79 -- Part 4 polish pass
   Four fixes on D78 after user review:
   1. Bet sigil top-aligned to row, independent of name length
   2. Alternating row tint restored (groups each bet visually)
   3. Hold/crack column rails equal height (stretch)
   4. Preamble/payoff stat pairing balanced (context max-width +
      pair gap tightened + /5 unit dropped)
   ============================================================ */

/* 1. Bet sigil top-alignment -- fixed position in the head row */
.bet-stress-head {
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.25rem;
  position: sticky;
  top: 130px;
}

.bet-stress-head .bet-sigil {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.bet-stress-head .bet-stress-name {
  flex: 1;
  min-width: 0;
  padding-top: 0.3rem;
}

/* 2. Alternating row tint -- restored, bleeds to section edge */
.bet-stress-item:nth-child(even) {
  background: var(--bg-step) !important;
  margin: 0 calc(-1 * 1.5rem) !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  border-bottom-color: transparent !important;
}

body[data-theme="dark"] .bet-stress-item:nth-child(even) {
  background: rgba(240, 238, 232, 0.025) !important;
}

/* Preserve the column-label strip's tint above the first even row */
.bet-stress-columns { background: var(--sticky-bg); }

/* 3. Hold/crack column rails stretch to equal height */
.bet-stress-body {
  align-items: stretch;
}

.stress-col {
  min-height: 100%;
}

/* 4. Preamble + payoff stat pair balanced */

/* Drop the /5 CSAT unit -- just "5" and "2" read cleaner */
.evidence-preamble-stat-unit { display: none; }

/* Constrain context line so both stats wrap at the same width */
.evidence-preamble-stat-context,
.evidence-payoff-stat-context {
  max-width: 20ch;
  min-height: 2.8em; /* reserve two lines so numbers align horizontally */
}

/* Tighten the gap between stats so they read as a pair, not a split */
.evidence-preamble-stats,
.evidence-payoff-stats {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 620px;
}

.evidence-preamble-stat,
.evidence-payoff-stat {
  padding: 0 1.5rem 0 0;
}

.evidence-preamble-stat + .evidence-preamble-stat,
.evidence-payoff-stat + .evidence-payoff-stat {
  padding-left: 1.5rem;
}

@media (max-width: 960px) {
  .bet-stress-item:nth-child(even) {
    margin: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .evidence-preamble-stat-context,
  .evidence-payoff-stat-context {
    max-width: none;
    min-height: 0;
  }
}


/* ============================================================
   D80 -- Preamble + Payoff stat typography recomposition
   User flagged the floating context above the number as
   disconnected and the missing /5 as missing scale context.
   Rebuilt as: big number left + /5 below it + scenario inline
   to its right + metric label under the number.
   Scenario now reads as bound to the number ("5 out of 5,
   when you wait 95s and get the refund"), matching the
   Part 2 "760K HITL reviews" inline-phrase rhythm.
   ============================================================ */

/* Restore the /5 unit -- it's the scale context */
.evidence-preamble-stat-unit { display: block !important; }

/* Each stat becomes a 2-col grid: big number/scale on the left,
   scenario on the right, metric label spans below the number. */
.evidence-preamble-stat,
.evidence-payoff-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.9rem;
  row-gap: 0.5rem;
  padding: 0 1.5rem 0 0;
  align-items: start;
}

.evidence-preamble-stat + .evidence-preamble-stat,
.evidence-payoff-stat + .evidence-payoff-stat {
  padding-left: 1.75rem;
  border-left: 1px solid var(--hairline);
}

/* Big number anchor: left column, row 1. Unit hangs below it as
   a scale marker -- smaller, quieter, aligned to number's left. */
.evidence-preamble-stat-value,
.evidence-payoff-stat-value {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 2rem + 2vw, 3.75rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

.evidence-preamble-stat-unit,
.evidence-payoff-stat-unit {
  font-size: 0.32em;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0;
  margin: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Scenario text bound to the number's right. Baseline-aligned to
   the digit's x-height so it reads as the story that produced the
   number. Max-width + min-height reserves 2 lines -- both sides
   then mirror vertically regardless of wrap. */
.evidence-preamble-stat-context,
.evidence-payoff-stat-context {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.008em;
  max-width: 18ch;
  min-height: 2.7em;
  margin: 0;
  padding-top: 0.4rem;
  text-transform: none;
  font-style: normal;
}

/* Metric label: under the number, left-aligned to its left edge,
   small tracked uppercase. */
.evidence-preamble-stat-label,
.evidence-payoff-stat-label {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--whisper-ink);
  margin: 0;
  line-height: 1.3;
}

@media (max-width: 720px) {
  .evidence-preamble-stat,
  .evidence-payoff-stat {
    column-gap: 0.7rem;
  }
  .evidence-preamble-stat-context,
  .evidence-payoff-stat-context {
    max-width: none;
    min-height: 0;
    padding-top: 0.5rem;
  }
}


/* ============================================================
   D81 -- Inline number-unit pattern (replaces D80 stacked /5)
   Stacked /5 read as unfinished because the page has no
   stacked-fraction precedent. The KPI strip, YTD num, and path
   stats all render unit + number inline, same font.
   Brought evidence stats into that system: unit inline to the
   right of the number, same font, same weight, same ink, 50%
   size, baseline-aligned. Reads as a secondary scale marker
   of the same typographic family -- finished, not decorative.
   ============================================================ */

.evidence-preamble-stat-value,
.evidence-payoff-stat-value {
  flex-direction: row;
  align-items: baseline;
  gap: 0.05em;
  font-weight: 700;
  line-height: 1;
}

/* Preamble /5 denominator: secondary scale marker, subordinate to  */
/* the digit. Lighter ink-soft at 50% size, baseline-aligned.         */
.evidence-preamble-stat-unit {
  display: inline-block !important;
  font-family: var(--font-display);
  font-size: 0.5em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
  margin: 0 0 0 0.02em;
  font-variant-numeric: tabular-nums;
  font-style: normal;
  opacity: 1;
}

/* Payoff "min" unit: integrated measurement unit (matches the       */
/* Part 2 .scale-ytd-path-num "4.8 min" convention). Full-size       */
/* inline with the number.                                            */
.evidence-payoff-stat-unit {
  display: inline-block !important;
  font-family: var(--font-display);
  font-size: 0.55em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: inherit;
  margin: 0 0 0 0.22em;
  font-variant-numeric: tabular-nums;
  font-style: normal;
  opacity: 1;
}

/* Unit stays neutral ink-soft (not semantic-colored) so it reads as
   a scale marker of the number rather than competing for saturation.
   Clean AA across themes and lets the colored digit stay the star. */

/* Payoff's " min" unit needs a word space before it, preamble's
   "/5" doesn't. Handle via margin-left tuning per variant. */


/* ============================================================
   D82 -- Part 4 column typography + quote system cleanup
   Concerns addressed:
   1. Body text in hold/crack columns read as generic -- promote
      to display-serif sans with composed tracking
   2. Fully-red crack column = three red signals (rail, dot,
      quote glyph) -- red fatigue. State now lives in one small
      glyph at the top; rails neutralize to hairline.
   3. Quote was Georgia serif (foreign to the page's sans system)
      -- rebuild as italic sans with a restrained turn-arrow lead
      so the quote reads as editorial voice in-system.
   ============================================================ */

/* 1. Both rails neutral. State carried by a single marker glyph. */
.stress-col {
  border-left: 1px solid var(--hairline);
  padding-left: 1.1rem;
  padding-top: 0.2rem;
  position: relative;
}

.stress-col-hold,
.stress-col-crack {
  border-left-color: var(--hairline);
}

/* Remove the old ::before colored disc from the clarity pass */
.stress-col::before {
  display: none !important;
  content: none !important;
}

/* State marker: small glyph floated inside the column, on its      */
/* own line above the text. Green check for hold, red dot for       */
/* crack. The only color in the column body.                          */
.stress-col::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 0 0.65rem;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.stress-col-hold::after {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4' stroke='%231f5f3f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  width: 12px;
  height: 12px;
  border-radius: 0;
}

.stress-col-crack::after {
  background-color: var(--break-ink);
}

/* Dark-mode state markers use pastel semantic tokens */
body[data-theme="dark"] .stress-col-hold::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4' stroke='%237fd4a3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

body[data-theme="dark"] .stress-col-crack::after {
  background-color: var(--break-ink);
}

/* Warm-mode hold uses the warm hold-ink color */
body[data-theme="warm"] .stress-col-hold::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4' stroke='%231f5f3f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

/* 2. Column body text: composed editorial treatment (not generic) */
.stress-col-text {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.008em;
  margin: 0;
  max-width: 44ch;
}

.stress-col-crack .stress-col-text { font-weight: 500; }

/* 3. Quote: sans italic, lead-arrow indent, no Georgia serif glyph */
.stress-quote {
  position: relative;
  margin: 0.75rem 0 0;
  padding: 0.75rem 0 0 1.35rem;
  border: none;
  border-top: 1px solid var(--hairline);
  font-style: normal;
  max-width: 44ch;
}

.stress-quote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.1rem;
  width: 0.85rem;
  height: 1px;
  background: var(--break-ink);
  opacity: 0.5;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  color: inherit;
}

.stress-quote-text {
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.008em;
  margin: 0;
}

.stress-quote-text::before { content: ''; }
.stress-quote-text::after  { content: ''; }

.stress-quote-attrib {
  display: block;
  font-family: var(--font-display);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--whisper-ink);
  font-style: normal;
  margin-top: 0.5rem;
}

body[data-theme="dark"] .stress-quote::before { opacity: 0.7; }

/* Resolved list typography aligns with the column text system */
.stress-resolved-what {
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
}


/* ============================================================
   D83 -- Part 4 header ownership + marker inline + density
   1. Header claims the columns below it with a colored top
      strip per side, so hold/crack state is owned at the top
      not floating below
   2. State markers move inline -- lead-glyph for the first
      sentence, no more floating orphan above the text
   3. Tighten vertical padding so rows don't waste space
   ============================================================ */

/* 1. Column header: colored strip + clean label ---------------------- */

.bet-stress-columns {
  padding: 0;
  grid-template-columns: 180px 1fr;
  column-gap: 2.5rem;
  background: var(--sticky-bg);
  border-top: none;
  border-bottom: 1px solid var(--hairline);
  margin: 2.25rem 0 0;
}

.bet-stress-columns-labels {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
  padding: 0;
  position: relative;
}

.bet-stress-col-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 0 0.75rem 1.1rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  position: relative;
  border-top: 2px solid transparent;
}

.bet-stress-col-label-hold {
  color: var(--hold-ink);
  border-top-color: var(--hold-ink);
}

.bet-stress-col-label-crack {
  color: var(--break-ink);
  border-top-color: var(--break-ink);
}

/* Keep the dot -- small, visibly paired with the label */
.bet-stress-col-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bet-stress-col-label-hold  .bet-stress-col-dot { background: var(--hold-ink); }
.bet-stress-col-label-crack .bet-stress-col-dot { background: var(--break-ink); }

/* Hairline between label cells so the two columns read as tabs */
.bet-stress-col-label + .bet-stress-col-label {
  border-left: 1px solid var(--hairline);
  margin-left: -1px;
}

/* Fix sticky clip: ensure the header sits above the item rows */
.bet-stress-columns { z-index: 20; }

/* 2. Markers move inline as first-letter-of-first-sentence glyph ---- */

/* Neutralize the D82 floating ::after marker */
.stress-col::after {
  display: none !important;
  content: none !important;
}

/* New lead glyph: ::before on the first text element in each column,
   inline-flex so it sits on the baseline of the opening word */
.stress-col-text::before {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  margin-right: 0.55em;
  vertical-align: 0.06em;
  flex-shrink: 0;
  background: currentColor;
}

.stress-col-hold .stress-col-text::before {
  content: '';
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4' stroke='%231f5f3f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 0;
  width: 0.82em;
  height: 0.82em;
  vertical-align: -0.04em;
  margin-right: 0.45em;
}

.stress-col-crack .stress-col-text::before {
  content: '';
  background: var(--break-ink);
}

body[data-theme="dark"] .stress-col-hold .stress-col-text::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4' stroke='%237fd4a3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

body[data-theme="warm"] .stress-col-hold .stress-col-text::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4' stroke='%231f5f3f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

/* Column no longer needs top padding for the floating marker */
.stress-col {
  padding-top: 0;
  padding-left: 1rem;
}

/* 3. Tighten vertical density -------------------------------------- */

.bet-stress-item {
  padding: 1.5rem 0 1.25rem;
  row-gap: 0.75rem;
}

.bet-stress-item:nth-child(even) {
  padding-top: 1.5rem !important;
  padding-bottom: 1.25rem !important;
}

.stress-col {
  gap: 0.55rem;
}

.stress-col-text {
  line-height: 1.5;
  font-size: 0.95rem;
}

.stress-quote {
  margin: 0.55rem 0 0;
  padding-top: 0.55rem;
}

.bet-stress-foot {
  padding-top: 0.35rem;
}


/* ============================================================
   D84 -- Part 4 header extends to match even-row bleed
   Even rows (D79) bleed 1.5rem past .section-inner on each
   side via negative margins. The sticky header didn't, so it
   read as visually shorter than the alternating tint
   underneath. Extending the header to the same bleed brings
   the two into alignment -- one consistent rail width.
   ============================================================ */

.bet-stress-columns {
  margin-left: calc(-1 * 1.5rem);
  margin-right: calc(-1 * 1.5rem);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

/* The item rows themselves also need explicit width match to the
   bleed so on odd rows (no tint) the rails align too. */
.bet-stress {
  margin-left: calc(-1 * 1.5rem);
  margin-right: calc(-1 * 1.5rem);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

/* Even rows now inherit parent container width -- no more double   */
/* negative-margin bleed needed, the stack has it already.           */
.bet-stress-item:nth-child(even) {
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.25rem !important;
  background: var(--bg-step) !important;
  border-bottom-color: transparent !important;
}

body[data-theme="dark"] .bet-stress-item:nth-child(even) {
  background: rgba(240, 238, 232, 0.025) !important;
}

/* Even rows need a side-extension now that .bet-stress handles the  */
/* page-edge bleed. Use box-shadow to extend the tint horizontally   */
/* without messing with flow-width.                                   */
.bet-stress-item:nth-child(even) {
  box-shadow:
    -1.5rem 0 0 0 var(--bg-step),
     1.5rem 0 0 0 var(--bg-step);
}

body[data-theme="dark"] .bet-stress-item:nth-child(even) {
  box-shadow:
    -1.5rem 0 0 0 rgba(240, 238, 232, 0.025),
     1.5rem 0 0 0 rgba(240, 238, 232, 0.025);
}

@media (max-width: 960px) {
  .bet-stress-columns,
  .bet-stress {
    margin-left: calc(-1 * 1rem);
    margin-right: calc(-1 * 1rem);
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .bet-stress-item:nth-child(even) {
    box-shadow:
      -1rem 0 0 0 var(--bg-step),
       1rem 0 0 0 var(--bg-step);
  }
  body[data-theme="dark"] .bet-stress-item:nth-child(even) {
    box-shadow:
      -1rem 0 0 0 rgba(240, 238, 232, 0.025),
       1rem 0 0 0 rgba(240, 238, 232, 0.025);
  }
}


/* ============================================================
   D85 -- Part 5 capstone composition
   The takeaway statement was compressed into a 900px reading
   measure with ~300px of dead right-side space at desktop, and
   wrapping was viewport-dependent. Three moves:
   1. Statement breaks to two deliberate lines (not fluid wrap)
   2. Max-width expanded so the statement claims the page
   3. Supporting paragraph picks up a Part 1 recall callback
      ("Four bets. Three hold. One flexes.") -- closes the loop
   ============================================================ */

/* 1. Force two-line break -- deliberate, not responsive */
.takeaway-statement-lede,
.takeaway-statement-accent {
  display: inline-block !important;
  margin-left: 0 !important;
}

.takeaway-statement-break {
  display: block;
  line-height: 0;
  height: 0;
  overflow: hidden;
}

/* 2. Expand max-width so the statement claims page width.
   The .takeaway-statement, .takeaway-supporting, .takeaway-bets
   rule at line ~6414 caps them at 900px. Override for the statement
   and give supporting its own narrower measure. */
.section-takeaway .takeaway-statement {
  max-width: min(1150px, 100%);
}

.section-takeaway .takeaway-supporting {
  max-width: 720px;
}

/* Line-height tuning for the two-line break */
.takeaway-statement {
  line-height: 1.05;
}

/* Small vertical air between the two lines */
.takeaway-statement-accent {
  margin-top: 0.15em;
}

/* 3. Supporting callback: the Part 1 recall as a lede phrase */
.takeaway-supporting-callback {
  display: inline;
  font-weight: 700;
  color: var(--ink);
  margin-right: 0.25em;
}

/* Supporting body text now ink-soft so the callback pops */
.section-takeaway .takeaway-supporting {
  color: var(--ink-soft);
  font-weight: 500;
  line-height: 1.55;
}

.section-takeaway .takeaway-supporting .takeaway-supporting-callback + * {
  font-weight: 500;
}


/* ============================================================
   D86 -- Takeaway close block, brought into system
   Previous D74 version rivaled the Part 5 capstone for scale
   and didn't use the page's established visual vocabulary.
   Three moves:
   1. Anchor subordinate to capstone (1.6-1.9rem, was 2.1-2.8)
   2. Two conditions render as separate lines with Part 4's
      inline state-marker glyphs (hold check / break dot)
   3. Forward line adopts thesis-thread bridge DNA so it reads
      as a page-wide forward-look, not a quiet footer
   ============================================================ */

/* 1. Anchor shrinks -- subordinate to the takeaway statement above */
.takeaway-close-anchor {
  font-size: clamp(1.6rem, 1.35rem + 0.7vw, 1.9rem);
  margin: 0 0 1.5rem;
}

/* 2. Conditions: two separate lines with inline state markers.
      Echoes Part 4's inline lead-glyph pattern so the close
      visually rhymes with the stress-test columns above. */

/* Hide the old single-paragraph definition block */
.takeaway-close-definition {
  display: none;
}

.takeaway-close-conditions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0 0 2rem;
  max-width: 58ch;
}

.takeaway-close-condition {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink);
  margin: 0;
  padding-left: 1.4rem;
  position: relative;
}

/* Inline marker same SVG-check pattern as Part 4 stress columns */
.takeaway-close-condition::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.75em;
  height: 0.75em;
  background-repeat: no-repeat;
  background-size: contain;
}

.takeaway-close-condition-hold::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4' stroke='%231f5f3f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.takeaway-close-condition-surface::before {
  width: 0.6em;
  height: 0.6em;
  top: 0.55em;
  border-radius: 50%;
  background: var(--break-ink);
}

body[data-theme="dark"] .takeaway-close-condition-hold::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4' stroke='%237fd4a3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

body[data-theme="warm"] .takeaway-close-condition-hold::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4' stroke='%231f5f3f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

/* 3. Forward line picks up thesis-thread bridge DNA.
      The lede/accent spans already exist page-wide for bridges.
      Sized up from 0.95rem to bridge-line rhythm. */
.takeaway-close-forward {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
  text-wrap: balance;
  letter-spacing: -0.008em;
}

/* Override the old <strong> treatment -- spans now carry the hit */
.takeaway-close-forward strong {
  font-weight: 500;
  color: inherit;
  margin-right: 0;
}

/* Local lede/accent tuning inside the closer: lede is the setup     */
/* (ink-soft weight 500, quieter), accent is the landing (accent     */
/* blue weight 700, emphatic). Matches Part 2 bridges.                */
.takeaway-close-forward .thesis-thread-lede {
  color: var(--ink-soft);
  font-weight: 500;
}

.takeaway-close-forward .thesis-thread-accent {
  color: var(--accent);
  font-weight: 700;
}


/* ============================================================
   D92 -- Interaction polish + reading-path gradient
   Five fixes in one pass:
   1. Nav-active gets a filled accent background (was soft tint,
      same as hover, so no visible "current section" signal)
   2. Back-to-top FAB already exists -- verified working
   3. Phase-bet anchor jumps land at top of target row
      (scroll-margin-top added to bet-stress-item)
   4. bp-bet-chip hover transform removed -- chips are labels,
      not actions, so the hover-lift implied interactivity that
      didn't exist
   5. Stage-head reading-path gradient across stages 1-5 so the
      eye sweeps left-to-right toward the CSA review moment
      (Stage 5 is the "Specialist reads the case" climax)
   ============================================================ */

/* 1. Nav-active: filled accent, distinct from hover */
.top-bar .top-nav .nav-link.nav-active {
  color: #fff;
  background: var(--accent);
}

body[data-theme="dark"] .top-bar .top-nav .nav-link.nav-active {
  color: var(--bg);
  background: var(--accent);
}

.top-bar .top-nav .nav-link.nav-active:hover,
.top-bar .top-nav .nav-link.nav-active:focus-visible {
  color: #fff;
  background: var(--accent);
}

body[data-theme="dark"] .top-bar .top-nav .nav-link.nav-active:hover,
body[data-theme="dark"] .top-bar .top-nav .nav-link.nav-active:focus-visible {
  color: var(--bg);
  background: var(--accent);
}

/* 3. Anchor jumps to Part 4 bet cards land at top of row */
.bet-stress-item {
  scroll-margin-top: 160px;
}

/* 4. Remove bp-bet-chip hover transform (and focus-visible lift).
      Chips are labels linking to their bet card, not mini-buttons.
      Keep opacity + bg-elev change so the affordance still reads. */
.bp-bet-chip:hover,
.bp-bet-chip:focus-visible {
  transform: none !important;
  box-shadow: none !important;
}

/* Similarly quiet the phase-bet and roadmap-bet hover lift */
.phase-bet:hover,
.phase-bet:focus-visible,
.roadmap-bet:hover,
.roadmap-bet:focus-visible {
  transform: none !important;
}

/* 5. Reading-path gradient: stages 1-5 receive a persistent
      top-strip that deepens left-to-right toward Stage 5. Draws
      the eye along the spine to the "Specialist reads the case"
      moment. Stage 5 is the focal point of the HITL review.
      Stages 6, 7a, 7b (after the CSA decision) don't participate.
      NOTE: Stage 5 also has .bp-stage-head-pivot with a legacy
      ::before suppression via !important (line ~13540). We reuse
      the ::before pseudo here for the gradient tint, so we need
      !important to un-suppress it on the matching stage. */
.bp-stage-head[data-stage="1"],
.bp-stage-head[data-stage="2"],
.bp-stage-head[data-stage="3"],
.bp-stage-head[data-stage="4"],
.bp-stage-head[data-stage="5"] {
  position: relative;
}

.bp-stage-head[data-stage="1"]::before,
.bp-stage-head[data-stage="2"]::before,
.bp-stage-head[data-stage="3"]::before,
.bp-stage-head[data-stage="4"]::before,
.bp-stage-head[data-stage="5"]::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, var(--path-tint, transparent) 0%, transparent 85%);
  opacity: 1;
  border-radius: inherit;
}

/* The sticky clone shouldn't carry the sweep -- keep it clean. */
.bp-sticky-clone .bp-stage-head[data-stage="1"]::before,
.bp-sticky-clone .bp-stage-head[data-stage="2"]::before,
.bp-sticky-clone .bp-stage-head[data-stage="3"]::before,
.bp-sticky-clone .bp-stage-head[data-stage="4"]::before,
.bp-sticky-clone .bp-stage-head[data-stage="5"]::before {
  display: none !important;
  content: none !important;
}

/* Per-stage tint: translucent accent, deepening toward stage 5.   */
/* Each tint = rgba of accent at stepped alpha so the five columns */
/* form a perceptual left-to-right sweep.                           */
.bp-stage-head[data-stage="1"] { --path-tint: color-mix(in srgb, var(--accent) 4%, transparent); }
.bp-stage-head[data-stage="2"] { --path-tint: color-mix(in srgb, var(--accent) 8%, transparent); }
.bp-stage-head[data-stage="3"] { --path-tint: color-mix(in srgb, var(--accent) 12%, transparent); }
.bp-stage-head[data-stage="4"] { --path-tint: color-mix(in srgb, var(--accent) 18%, transparent); }
.bp-stage-head[data-stage="5"] { --path-tint: color-mix(in srgb, var(--accent) 26%, transparent); }

/* Stage head content sits above the path tint */
.bp-stage-head[data-stage="1"] > *:not(.bp-stage-splash),
.bp-stage-head[data-stage="2"] > *:not(.bp-stage-splash),
.bp-stage-head[data-stage="3"] > *:not(.bp-stage-splash),
.bp-stage-head[data-stage="4"] > *:not(.bp-stage-splash),
.bp-stage-head[data-stage="5"] > *:not(.bp-stage-splash) {
  position: relative;
  z-index: 1;
}

/* Dark mode: use the pastel accent for the sweep */
body[data-theme="dark"] .bp-stage-head[data-stage="1"] { --path-tint: color-mix(in srgb, var(--accent) 6%, transparent); }
body[data-theme="dark"] .bp-stage-head[data-stage="2"] { --path-tint: color-mix(in srgb, var(--accent) 10%, transparent); }
body[data-theme="dark"] .bp-stage-head[data-stage="3"] { --path-tint: color-mix(in srgb, var(--accent) 15%, transparent); }
body[data-theme="dark"] .bp-stage-head[data-stage="4"] { --path-tint: color-mix(in srgb, var(--accent) 22%, transparent); }
body[data-theme="dark"] .bp-stage-head[data-stage="5"] { --path-tint: color-mix(in srgb, var(--accent) 30%, transparent); }


/* ============================================================
   D94 -- Gradient fix + warm-theme semantic chart colors
   1. Per-stage solid top accent bar on each header cell.
      Color steps left-to-right across stages 1-5 toward the
      Stage 5 peak, matching CS Help's reading-path DNA.
   2. Retune --hold-ink / --flex-ink / --break-ink in warm so
      Section 2 chart colors feel distinct from light theme.
   ============================================================ */

/* 1. Kill earlier attempts from D92/D93/D94-v1 */
.bp-stage-head[data-stage="1"]::before,
.bp-stage-head[data-stage="2"]::before,
.bp-stage-head[data-stage="3"]::before,
.bp-stage-head[data-stage="4"]::before,
.bp-stage-head[data-stage="5"]::before {
  display: none !important;
  content: none !important;
}

.bp-row.bp-stages {
  background: var(--bg) !important; /* reset -- per-cell borders carry the sweep */
}

.bp-sticky-clone .bp-row.bp-stages {
  background: var(--bg-elev) !important;
}

/* Per-cell solid top accent bar. Each stage gets its own color
   stepped toward peak accent at Stage 5. A 3px band at the top of
   each header cell. Because the cell's background: var(--bg) sits
   ABOVE row-level gradients, the cleanest reliable path is to use
   box-shadow inset on the top edge per stage cell.              */
.bp-stage-head[data-stage="1"] { box-shadow: inset 0 3px 0 0 color-mix(in srgb, var(--accent) 8%, var(--bg)) !important; }
.bp-stage-head[data-stage="2"] { box-shadow: inset 0 3px 0 0 color-mix(in srgb, var(--accent) 18%, var(--bg)) !important; }
.bp-stage-head[data-stage="3"] { box-shadow: inset 0 3px 0 0 color-mix(in srgb, var(--accent) 32%, var(--bg)) !important; }
.bp-stage-head[data-stage="4"] { box-shadow: inset 0 3px 0 0 color-mix(in srgb, var(--accent) 50%, var(--bg)) !important; }
.bp-stage-head[data-stage="5"] { box-shadow: inset 0 3px 0 0 var(--accent) !important; }

/* Sticky clone: no sweep -- the condensed top bar doesn't need it */
.bp-sticky-clone .bp-stage-head[data-stage="1"],
.bp-sticky-clone .bp-stage-head[data-stage="2"],
.bp-sticky-clone .bp-stage-head[data-stage="3"],
.bp-sticky-clone .bp-stage-head[data-stage="4"],
.bp-sticky-clone .bp-stage-head[data-stage="5"] {
  box-shadow: none !important;
}

/* 2. Warm-theme semantic color retune.
   Light uses: hold #1f5f3f (deep green) / flex #8a5a0f (amber) /
               break #8a2a2a (oxblood red).
   Warm was inheriting the same values which made its YTD bar
   look identical to light. Retuned to warmer interpretations:
     - hold: sage/olive (green shifted toward warm undertone)
     - flex: burnt sienna (closer to the warm accent amber)
     - break: terracotta (red with warm undertone, less oxblood) */
body[data-theme="warm"] {
  --hold-ink:  #4e6b38;
  --hold-bg:   #dfe7c9;
  --hold-edge: #9fb482;

  --flex-ink:  #a36528;
  --flex-bg:   #f4e1c2;
  --flex-edge: #d0a468;

  --break-ink:  #9e3d2a;
  --break-bg:   #f0d8cd;
  --break-edge: #d29c87;
}


/* ============================================================
   D96 reverted -- splash restored
   User clarified the column-hover splash effect is intentional.
   The feathered line was NOT coming from the splash -- source
   still being traced in D97.
   ============================================================ */


/* ============================================================
   D97 -- Hide bp-stage-splash at rest without breaking hover
   The hover column-glow is load-bearing per user. But at rest,
   transform: scaleY(0) with top transform-origin leaves a
   sub-pixel feathered sliver at the top of every cell.
   Switch the rest-state hiding from scaleY to opacity + height
   clipping so there's literally zero paint at rest.
   ============================================================ */

.bp-stage-splash {
  opacity: 0 !important;
  transform: scaleY(1) !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity !important;
}

.bp-stage-head.col-highlight .bp-stage-splash {
  opacity: 0.14 !important;
}


/* ============================================================
   D98 -- Remove blueprint's top hairline border
   User's "feathered line above the sweep bar" was the
   .blueprint container's 1px top border (4754). Drop just the
   top edge so the D95 sweep bar reads as the topmost paint in
   the blueprint. Keep the left/right/bottom border so the
   container still has a frame.
   ============================================================ */
.blueprint {
  border-top: none !important;
}


/* ============================================================
   D99 -- Stage-head top bar: solid stepped sweep, no feathering
   Root cause of the persistent "feathered line above the sweep
   bar":
     1. .bp-stage-head declares `border-top: 3px solid transparent`
        at line 13432.
     2. A later rule (line 13765) paints a border-image whose
        gradient is rgba(0) at the ends and rgba(0.35) in the
        middle -- a literal feathered stroke on that 3px border.
     3. Stage 6 has its own feathered border-image at line 14262.
     4. D95 stacked a 3px inset box-shadow ABOVE the border-image,
        so the user saw two horizontal strokes: the D95 bar plus
        the feather above it.

   Fix:
     a. Null out border-image on every stage head (default + fork).
     b. Remove D95's box-shadow sweep (redundant with border-top).
     c. Paint a solid stepped accent color into the existing 3px
        border-top on stages 1-5, peaking at full accent on 5.
     d. Stage 6 gets a solid rule-color top edge; 7a/7b keep their
        existing hold-edge / break-edge colors (declared at 13431
        via .bp-stage-head-approve / -reject class rules).
   ============================================================ */

/* a. Kill feathered border-image on default heads */
.bp-stage-head:not(.bp-stage-head-pivot):not(.bp-stage-head-approve):not(.bp-stage-head-reject) {
  border-image: none !important;
  border-image-source: none !important;
  border-image-slice: 0 !important;
  border-image-width: 0 !important;
  border-image-repeat: stretch !important;
}

/* a. Kill feathered border-image on fork (stage 6) specifically */
.bp-stage-head[data-stage="6"] {
  border-image: none !important;
  border-image-source: none !important;
  border-image-slice: 0 !important;
  border-image-width: 0 !important;
}

/* b. Remove D95 inset box-shadow sweep on stages 1-5 (border-top
      now carries the sweep; the shadow was doubling up). */
.bp-stage-head[data-stage="1"],
.bp-stage-head[data-stage="2"],
.bp-stage-head[data-stage="3"],
.bp-stage-head[data-stage="4"],
.bp-stage-head[data-stage="5"] {
  box-shadow: none !important;
}

/* c. Solid stepped top border across stages 1-5.
      Mix against --bg-elev (stage head background) so the lightest
      steps still read cleanly without looking washed out. */
.bp-stage-head[data-stage="1"] {
  border-top: 3px solid color-mix(in srgb, var(--accent) 14%, var(--bg-elev)) !important;
}
.bp-stage-head[data-stage="2"] {
  border-top: 3px solid color-mix(in srgb, var(--accent) 30%, var(--bg-elev)) !important;
}
.bp-stage-head[data-stage="3"] {
  border-top: 3px solid color-mix(in srgb, var(--accent) 50%, var(--bg-elev)) !important;
}
.bp-stage-head[data-stage="4"] {
  border-top: 3px solid color-mix(in srgb, var(--accent) 72%, var(--bg-elev)) !important;
}
.bp-stage-head[data-stage="5"] {
  border-top: 3px solid var(--accent) !important;
}

/* d. Stage 6 fork: neutral rule-color divider so the story reads
      "the sweep peaked at 5, now the flow forks." */
.bp-stage-head[data-stage="6"] {
  border-top: 3px solid var(--rule) !important;
}

/* Sticky clone inherits these rules automatically via class match.
   Explicitly re-assert on the clone so nothing from earlier clone
   overrides (13817) accidentally wins. */
.bp-sticky-clone .bp-stage-head[data-stage="1"] {
  border-top: 3px solid color-mix(in srgb, var(--accent) 14%, var(--bg-elev)) !important;
  box-shadow: none !important;
}
.bp-sticky-clone .bp-stage-head[data-stage="2"] {
  border-top: 3px solid color-mix(in srgb, var(--accent) 30%, var(--bg-elev)) !important;
  box-shadow: none !important;
}
.bp-sticky-clone .bp-stage-head[data-stage="3"] {
  border-top: 3px solid color-mix(in srgb, var(--accent) 50%, var(--bg-elev)) !important;
  box-shadow: none !important;
}
.bp-sticky-clone .bp-stage-head[data-stage="4"] {
  border-top: 3px solid color-mix(in srgb, var(--accent) 72%, var(--bg-elev)) !important;
  box-shadow: none !important;
}
.bp-sticky-clone .bp-stage-head[data-stage="5"] {
  border-top: 3px solid var(--accent) !important;
  box-shadow: none !important;
}
.bp-sticky-clone .bp-stage-head[data-stage="6"] {
  border-top: 3px solid var(--rule) !important;
  box-shadow: none !important;
}


/* ============================================================
   D100 -- Warm theme chart inks: push further from light
   D94 retune was directionally right but too subtle; user
   reported Section 2 warm YTD still reads like light. Bump hue
   shift + saturation so hold/flex/break sit clearly in warm
   territory rather than as tints of light's values.
   ============================================================ */

body[data-theme="warm"] {
  /* Olive-sage: shifted further toward yellow-green */
  --hold-ink:  #5a7230;
  --hold-bg:   #e9efd2;
  --hold-edge: #a5b878;

  /* Burnt orange: brighter + warmer than light's amber */
  --flex-ink:  #b35a1a;
  --flex-bg:   #f8dfb8;
  --flex-edge: #da9a50;

  /* Terracotta: orange-red, distinct from light's oxblood */
  --break-ink:  #b33722;
  --break-bg:   #f3d2c4;
  --break-edge: #d9937a;
}

/* Last updated: May 13, 2026 */


/* ============================================================
   D103 -- Frontstage cell merge across stages 4-6
   The customer sees the same chatbot screen across stage 4
   (routes to DART, wait begins), stage 5 (CSA reviews), and
   stage 6 (CSA clicks approve/reject -- customer still sees
   wait screen until resolution renders at stage 7a).
   Merge the three frontstage cells into one spanning three
   grid columns so the screenshot represents the continuous
   state rather than implying three distinct screens.

   The merged cell sits at aria-colindex="5" with data-stage
   "4-5-6". CSS spans the next two grid columns as well.
   ============================================================ */
.bp-layer-frontstage .bp-c[data-stage="4-5-6"] {
  grid-column: span 3 !important;
}


/* ============================================================
   D104 -- Column-highlight selectors updated for the span cell
   Earlier rules target .bp-c[data-stage="N"] for crosshair
   highlight. With the 4-5-6 merge, the cell no longer matches
   stage="4", "5", or "6" exactly. Add data-stage="4-5-6" to the
   match set so hovering any of those columns still lights up
   the merged frontstage cell.
   ============================================================ */
.blueprint[data-hover-stage="4"] .bp-c[data-stage="4-5-6"],
.blueprint[data-hover-stage="5"] .bp-c[data-stage="4-5-6"],
.blueprint[data-hover-stage="6"] .bp-c[data-stage="4-5-6"] {
  background-color: rgba(42, 77, 143, 0.07) !important;
}

body[data-theme="dark"] .blueprint[data-hover-stage="4"] .bp-c[data-stage="4-5-6"],
body[data-theme="dark"] .blueprint[data-hover-stage="5"] .bp-c[data-stage="4-5-6"],
body[data-theme="dark"] .blueprint[data-hover-stage="6"] .bp-c[data-stage="4-5-6"] {
  background-color: rgba(140, 176, 255, 0.07) !important;
}

body[data-theme="warm"] .blueprint[data-hover-stage="4"] .bp-c[data-stage="4-5-6"],
body[data-theme="warm"] .blueprint[data-hover-stage="5"] .bp-c[data-stage="4-5-6"],
body[data-theme="warm"] .blueprint[data-hover-stage="6"] .bp-c[data-stage="4-5-6"] {
  background-color: rgba(138, 90, 42, 0.06) !important;
}

/* Last updated: May 13, 2026 */


/* ============================================================
   D105 -- Screenshot lightbox (CS Help pattern port)
   Replaces the D58-era simple .bp-lightbox panel. Floating pill
   header with prev/next arrows, dot indicators for step nav,
   side-by-side multi-image layout, keyboard nav (arrows + Esc),
   keyboard hint. Class names match CS Help verbatim so the JS
   port drops in without refactor.

   Sticky header clone overlay uses z-index 15. Top bar is 20.
   Lightbox overlay must sit above both -- z-index 99999.
   ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0);
  cursor: pointer;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  visibility: hidden;
  pointer-events: none;
  transition: background 0.3s ease, visibility 0s 0.35s;
}
.lightbox.open {
  visibility: visible;
  pointer-events: auto;
  background: rgba(0,0,0,0.85);
  transition: background 0.3s ease, visibility 0s 0s;
}

.lb-keyboard-hint {
  position: fixed;
  top: 28px;
  left: 24px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  padding: 6px 14px;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 100002;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.lb-keyboard-hint kbd {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 10px;
  color: rgba(255,255,255,0.75);
  margin: 0 1px;
}
.lb-hint-visible { opacity: 1; }

/* Hide top bar and the blueprint sticky header when lightbox is open */
body:has(.lightbox.open) .top-bar,
body:has(.lightbox.open) .bp-sticky-header {
  opacity: 0;
  pointer-events: none;
}

/* Floating pill header */
.lightbox-header {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 20px;
  z-index: 100001;
  pointer-events: none;
}
.lb-pill {
  display: flex;
  align-items: stretch;
  background: rgba(0,0,0,0.75);
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  pointer-events: auto;
  width: 460px;
  max-width: calc(100vw - 120px);
  overflow: hidden;
  position: relative;
}
.lb-header-center {
  flex: 1;
  text-align: center;
  min-width: 0;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lb-step-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
}
.lb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.lb-dot:hover { background: rgba(255,255,255,0.5); transform: scale(1.3); }
.lb-dot-visited { background: rgba(255,255,255,0.45); }
.lb-dot-active { background: #fff; }
.lb-dot-active:hover { background: #fff; }

.lb-step-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  line-height: 1.3;
}
.lb-step-num {
  font-family: var(--font-display);
  font-weight: 400;
  color: rgba(255,255,255,0.75);
}
.lb-step-name { font-weight: 600; }
.lb-step-desc {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  line-height: 1.3;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.lb-pill-nav {
  width: 44px;
  min-width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
  margin: auto 6px;
}
.lb-pill-nav:hover { background: rgba(255,255,255,0.1); color: #fff; }

.lb-close-float {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: auto;
  transition: background 0.2s, color 0.2s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100003;
}
.lb-close-float:hover { background: rgba(0,0,0,0.8); color: #fff; }

.lb-top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.lb-top-row > * { pointer-events: auto; }

.lb-no-img {
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  font-style: italic;
  padding: 80px 40px;
  text-align: center;
}

.lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 100px 40px 40px;
  transform: scale(0.98);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.2s ease;
  margin: auto;
  min-width: min-content;
  will-change: opacity, transform;
}
.lightbox.open .lightbox-content {
  transform: scale(1);
  opacity: 1;
}
.lightbox-imgs {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}
.lightbox-imgs img {
  height: 75vh;
  width: auto;
  max-width: none;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
  object-fit: contain;
  flex-shrink: 0;
}
.lightbox-imgs img.lightbox-single {
  height: auto;
  max-height: 80vh;
  max-width: 90vw;
}

/* ============================================================
   D106 -- In-cell thumbnail images (replaces bp-thumb button)
   Replaces the designed-frame placeholder .bp-thumb with real
   image thumbs. Mirrors CS Help's .ev-img pattern but scoped
   inside blueprint cells.
   ============================================================ */

.bp-thumb-img {
  position: relative;
  margin-top: 0.5rem;
  border-radius: 6px;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.bp-thumb-img img {
  width: 100%;
  height: auto;
  max-height: 200px;
  display: block;
  object-fit: contain;
  object-position: top;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border: 1px solid var(--hairline);
  background: var(--bg);
}

.bp-thumb-img:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.bp-thumb-img:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Backstage thumbnail variant: AC3 UI is wider / less tall */
.bp-thumb-img-backstage img {
  max-height: 160px;
  object-position: center top;
}

/* Multi-image set indicator (ported from CS Help .ev-set-badge) */
.ev-set { position: relative; }
.ev-set-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  padding: 3px 8px;
  border-radius: 14px;
  pointer-events: none;
  z-index: 2;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* Dark theme: lightbox pill should stay light-on-dark by design */
body[data-theme="dark"] .ev-set-badge {
  color: var(--ink-soft);
  background: var(--bg-elev);
  border-color: var(--rule);
}

/* Last updated: May 13, 2026 */


/* ============================================================
   D108 -- Frontstage row alignment + column 3 width
   1. Bottom-anchor .bp-thumb-img so thumbnails always sit on
      the same baseline within each cell, regardless of how
      many lines of text wrap above them.
   2. Pin a fixed image height so col 4-5 (merged) and col 7a/7b
      thumbs land on the same row instead of varying by image
      aspect ratio.
   3. Widen column 3 so "Let me look into this" stops wrapping.
   ============================================================ */

/* 1 + 2: Anchor and height */
.bp-layer-frontstage .bp-thumb-img,
.bp-layer-backstage .bp-thumb-img {
  margin-top: auto !important;
  width: 100%;
}

.bp-layer-frontstage .bp-thumb-img img,
.bp-layer-backstage .bp-thumb-img img {
  height: 220px !important;
  max-height: 220px !important;
  width: 100%;
  object-fit: cover !important;
  object-position: top center !important;
}

/* Backstage AC3 thumb is wider than tall -- crop to a flatter
   landscape so it sits on the same baseline as the frontstage
   chatbot screens above. */
.bp-layer-backstage .bp-thumb-img-backstage img {
  height: 180px !important;
  max-height: 180px !important;
  object-fit: cover !important;
  object-position: top left !important;
}

/* 3: Widen column 3 (the chatbot-thinking column) so the headline
   "Let me look into this" doesn't wrap into two lines and shift
   the row's vertical rhythm. Also tighten cols 1-2 slightly so the
   row width budget stays the same. */
.bp-row {
  grid-template-columns:
    200px                         /* label */
    minmax(170px, 0.78fr)         /* 1 */
    minmax(170px, 0.78fr)         /* 2 */
    minmax(210px, 1.05fr)         /* 3 -- widened */
    minmax(220px, 1fr)            /* 4 */
    minmax(260px, 1.25fr)         /* 5 (hero) */
    minmax(220px, 1fr)            /* 6 */
    minmax(220px, 1fr)            /* 7a */
    minmax(220px, 1fr) !important;/* 7b */
}

/* Last updated: May 13, 2026 */


/* ============================================================
   D108b -- Merged span cell thumbnail width
   The .bp-c[data-stage="4-5-6"] cell spans 3 grid columns so
   "width: 100%" on its inner image would be 3x wider than the
   single-column thumbs to the left and right. Cap the image
   width so the merged thumb visually matches the others while
   the cell text + sub-line breathe across the full span.
   ============================================================ */
.bp-layer-frontstage .bp-c[data-stage="4-5-6"] .bp-thumb-img {
  width: auto !important;
  max-width: 33% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.bp-layer-frontstage .bp-c[data-stage="4-5-6"] .bp-thumb-img img {
  width: 100%;
  height: 220px !important;
  max-height: 220px !important;
  object-fit: cover !important;
  object-position: top center !important;
}

/* Last updated: May 13, 2026 */


/* ============================================================
   D109 -- Uniform thumbnail rendering across all cells
   Replaces D108's mixed cover/contain heights. One rule, applied
   uniformly: every thumbnail is 200px tall, scaled to fit the
   full screen with object-fit: contain. Cell background fills
   any letterbox space cleanly. Honest about each screen.
   ============================================================ */

.bp-layer-frontstage .bp-thumb-img img,
.bp-layer-backstage .bp-thumb-img img {
  height: 200px !important;
  max-height: 200px !important;
  width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: var(--bg) !important;
}

/* The merged frontstage cell spans 3 columns. Cap the inner thumb
   container at ~32% so the image visually matches the
   single-column thumbs to its left and right. */
.bp-layer-frontstage .bp-c[data-stage="4-5-6"] .bp-thumb-img {
  width: 32% !important;
  max-width: 220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ============================================================
   D113 -- CS Help expand-glyph overlay on every thumbnail
   Mirrors CS Help's `.ss-cell .ev-img::before` pattern: a small
   round badge at top-left with the diagonal expand SVG. Tells
   the reader the thumbnail is clickable and opens larger.
   Colored against HITL tokens (whisper-ink stroke, bg-elev
   button background, hairline border).
   ============================================================ */
.bp-thumb-img {
  position: relative;
}
.bp-thumb-img::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 26px;
  height: 26px;
  background-color: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606060' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3;
  pointer-events: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.bp-thumb-img:hover::before,
.bp-thumb-img:focus-within::before {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
}
body[data-theme="dark"] .bp-thumb-img::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
}


/* ============================================================
   D110 -- Customer row anxiety block spans stages 4-5-6
   ============================================================ */

.bp-layer-customer .bp-c[data-stage="4-5-6"] {
  grid-column: span 3 !important;
}


/* ============================================================
   D111 (final) -- Backstage stages 5+6 merged into one cell
   Same pattern as the frontstage 4-5-6 merge: one .bp-c that
   spans 2 grid columns, with internal 2-column flex layout for
   the distinct narrative beats (stage 5 read, stage 6 click)
   and a shared AC3 thumbnail at the bottom that spans the cell
   width. No grid-row trickery. Auto-flow stays sane.
   ============================================================ */

.bp-layer-backstage .bp-c[data-stage="5-6"] {
  grid-column: span 2 !important;
  display: flex !important;
  flex-direction: column;
  gap: 0.75rem;
}

.bp-layer-backstage .bp-c[data-stage="5-6"] .bp-merged-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.bp-layer-backstage .bp-c[data-stage="5-6"] .bp-merged-col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0; /* let internal content wrap rather than blow grid */
}

/* Internal divider between the two narrative beats so reading
   stays clean despite the merge. */
.bp-layer-backstage .bp-c[data-stage="5-6"] .bp-merged-col-stage6 {
  border-left: 1px solid var(--hairline);
  padding-left: 1rem;
}

/* Shared thumbnail: full-width inside the merged cell, anchored
   at the bottom with a label centered below. */
.bp-thumb-img-merged {
  margin-top: auto;
  width: 100%;
  position: relative;
}

.bp-thumb-img-merged img {
  height: 200px !important;
  max-height: 200px !important;
  width: 100% !important;
  object-fit: contain !important;
  background: var(--bg) !important;
}

.bp-thumb-img-merged-label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 0.4rem;
  text-align: center;
}


/* ============================================================
   D112 (final) -- Line of Visibility band anchored to stages 4-7a
   The band sits at grid-column 5 / 9 (stages 4 through 7a).
   Defeat all prior sticky-positioning rules from earlier builds
   that targeted .bp-sep-band-visibility's children with explicit
   left: offsets.
   ============================================================ */

.bp-sep-band.bp-sep-band-anchored {
  grid-column: 5 / 8 !important; /* stages 4 (col 5) through 6 (col 7); end-line 8 = right edge of stage 6 */
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.5rem 0.75rem !important;
  padding: 0.85rem 1rem !important;
  background: var(--bp-visibility-band) !important;
  border-top: 1px solid var(--bp-visibility-edge) !important;
  border-bottom: 1px solid var(--bp-visibility-edge) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  left: auto !important;
  z-index: auto !important;
  min-height: auto !important;
}

.bp-sep-band.bp-sep-band-anchored .bp-sep-band-anchor {
  display: contents !important;
}

.bp-sep-band.bp-sep-band-anchored .bp-bet-chip,
.bp-sep-band.bp-sep-band-anchored .bp-sep-band-scope {
  position: static !important;
  left: auto !important;
  top: auto !important;
}

.bp-sep-band.bp-sep-band-anchored .bp-bet-chip {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.bp-sep-band.bp-sep-band-anchored .bp-sep-band-scope {
  display: inline-flex !important;
  align-items: center !important;
}

.bp-sep-band.bp-sep-band-anchored::before {
  display: none !important;
  content: none !important;
}

/* Last updated: May 13, 2026 */


/* ============================================================
   D115 -- Column-highlight selectors for the backstage 5-6 merge
   ============================================================ */
.blueprint[data-hover-stage="5"] .bp-c[data-stage="5-6"],
.blueprint[data-hover-stage="6"] .bp-c[data-stage="5-6"] {
  background-color: rgba(42, 77, 143, 0.07) !important;
}
body[data-theme="dark"] .blueprint[data-hover-stage="5"] .bp-c[data-stage="5-6"],
body[data-theme="dark"] .blueprint[data-hover-stage="6"] .bp-c[data-stage="5-6"] {
  background-color: rgba(140, 176, 255, 0.07) !important;
}
body[data-theme="warm"] .blueprint[data-hover-stage="5"] .bp-c[data-stage="5-6"],
body[data-theme="warm"] .blueprint[data-hover-stage="6"] .bp-c[data-stage="5-6"] {
  background-color: rgba(138, 90, 42, 0.06) !important;
}

/* Last updated: May 13, 2026 */


/* ============================================================
   D116 (final) -- Identical AC3 thumbnail rendering in both cells
   Stage 4 lobby and stages 5-6 review screen render at the same
   physical size with the same caption pattern. The merged 5-6
   cell is wider (2 columns) so we explicitly cap and center the
   thumbnail so its size matches stage 4's single-column thumbnail.
   ============================================================ */

/* Common backstage thumbnail rendering -- one rule, both cells */
.bp-layer-backstage .bp-thumb-img-backstage {
  width: 100%;
  max-width: 280px;
  margin: 0.5rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bp-layer-backstage .bp-thumb-img-backstage img {
  height: 180px !important;
  max-height: 180px !important;
  width: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  background: var(--bg) !important;
  display: block;
  border-radius: 4px;
  border: 1px solid var(--hairline);
}

/* Cell must clip thumbnail overflow so a wide image never bleeds
   into the next column. */
.bp-layer-backstage > .bp-c {
  overflow: hidden;
}

/* No hover transform on backstage thumbs -- the lift was pushing
   the image visually into the adjacent cell. The expand-glyph
   already signals interactivity. */
.bp-layer-backstage .bp-thumb-img-backstage:hover,
.bp-layer-backstage .bp-thumb-img-backstage:focus-within {
  transform: none !important;
  box-shadow: none !important;
}

/* Caption sits below the image, identical pattern in both cells */
.bp-thumb-img-caption {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 0.4rem;
  text-align: center;
}

/* Last updated: May 13, 2026 */


/* ============================================================
   D117 -- Polish pass: nav scroll, Part 5 chip parity, chart
            theme-token refinement
   ============================================================ */

/* 1. Nav anchor jump fix: increase scroll-margin-top on every
      <section> so #scale (and others) lands cleanly below the
      sticky top bar. Top bar is ~58-65px depending on padding;
      use 90px for a comfortable air gap above section labels. */
.section[id] {
  scroll-margin-top: 90px !important;
}


/* 2. Part 5 phase-bet chips: match the visual treatment of the
      blueprint .bp-bet-chip so the same bet reads as the same
      element across map and roadmap. Map chips are filled with
      the bet's `bg` token at rest; the phase-bet was gray at rest
      with bet color only on hover. Reconcile to the map's pattern. */

.phase-bet,
.roadmap-bet {
  background: var(--bg-elev) !important;
  border-color: transparent !important;
}

.phase-bet[data-bet="1"],
.roadmap-bet[data-bet="1"] {
  background: var(--bet-1-bg) !important;
  color: var(--bet-1-ink) !important;
  border-color: var(--bet-1-edge) !important;
}
.phase-bet[data-bet="2"],
.roadmap-bet[data-bet="2"] {
  background: var(--bet-2-bg) !important;
  color: var(--bet-2-ink) !important;
  border-color: var(--bet-2-edge) !important;
}
.phase-bet[data-bet="3"],
.roadmap-bet[data-bet="3"] {
  background: var(--bet-3-bg) !important;
  color: var(--bet-3-ink) !important;
  border-color: var(--bet-3-edge) !important;
}
.phase-bet[data-bet="4"],
.roadmap-bet[data-bet="4"] {
  background: var(--bet-4-bg) !important;
  color: var(--bet-4-ink) !important;
  border-color: var(--bet-4-edge) !important;
}

/* Hover state: lift via slightly stronger border, no color flip
   (color is already the bet's at rest). */
.phase-bet:hover[data-bet],
.phase-bet:focus-visible[data-bet],
.roadmap-bet:hover[data-bet],
.roadmap-bet:focus-visible[data-bet] {
  background: var(--bg-elev) !important;
  outline: none;
  box-shadow: 0 1px 0 currentColor;
}

/* Phase-bet sigil colors should match the chip ink */
.phase-bet[data-bet="1"] .bet-sigil { color: var(--bet-1-ink) !important; }
.phase-bet[data-bet="2"] .bet-sigil { color: var(--bet-2-ink) !important; }
.phase-bet[data-bet="3"] .bet-sigil { color: var(--bet-3-ink) !important; }
.phase-bet[data-bet="4"] .bet-sigil { color: var(--bet-4-ink) !important; }


/* 3. Section 3 charts: theme-aware refinement. The fork bar, AHT
      bars, anxiety arc, and perception gap already use the right
      semantic tokens. Add explicit dark + warm overrides where
      missing so contrast holds across all three themes. */

/* Anxiety arc bands: dark theme uses pastel hold/flex/break. The
   default opacity 0.65/0.95/0.85 was tuned for light. Bump up so
   the bands read at AA on dark. */
body[data-theme="dark"] .anxiety-arc-band-ok    { opacity: 0.85; }
body[data-theme="dark"] .anxiety-arc-band-warn  { opacity: 0.85; }
body[data-theme="dark"] .anxiety-arc-band-hot   { opacity: 1; }
body[data-theme="dark"] .anxiety-arc-band-break { opacity: 1; }

/* Fork bar: dark mode pastel inks need dark text overlay so the
   percent labels stay legible. Already covered by .scale-ytd-split-seg
   pattern; mirror it here for the fork bar. */
body[data-theme="dark"] .bp-fork-bar-segment .bp-fork-bar-num,
body[data-theme="dark"] .bp-fork-bar-segment .bp-fork-bar-label {
  color: var(--bg) !important;
}

/* AHT bars: dark mode track is too pale against pastel fills. Deepen. */
body[data-theme="dark"] .bp-aht-bar-track {
  background: var(--rule);
}

/* Perception gap: ensure the worst-case fill stays bright in warm
   theme (warm break-ink is terracotta, fades into bg without an
   opacity bump). */
body[data-theme="warm"] .perception-gap-row-worst .perception-gap-fill {
  opacity: 0.95;
}

/* Last updated: May 13, 2026 */


/* ============================================================
   D118 -- Accessibility pass: fork bar labels + Part 5 dark chips
   ============================================================ */

/* 1. Fork bar text -- bump size and weight so the small percentages
      and labels actually read on the colored backgrounds. AA was
      passing on paper (white on hold-ink ~7.5:1, on break-ink ~6.4:1)
      but at 0.58rem the white text was visually mushy. */

.bp-fork-bar-segment {
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.bp-fork-bar-num {
  font-size: 1.05rem !important; /* was 0.95rem */
  font-weight: 800 !important;   /* was 700 */
  letter-spacing: -0.005em !important;
}

.bp-fork-bar-label,
.bp-fork-bar-label.whisper,
.bp-fork-bar-segment .bp-fork-bar-label {
  font-size: 0.65rem !important; /* was 0.58rem */
  font-weight: 700 !important;   /* was 600 */
  opacity: 1 !important;          /* was 0.9 */
  letter-spacing: 0.08em !important;
  color: #fff !important;         /* override .whisper's ink */
}

/* Dark theme: dark text on pastel hold/break backgrounds */
body[data-theme="dark"] .bp-fork-bar-approve,
body[data-theme="dark"] .bp-fork-bar-reject {
  color: var(--bg) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

body[data-theme="dark"] .bp-fork-bar-approve .bp-fork-bar-label,
body[data-theme="dark"] .bp-fork-bar-reject .bp-fork-bar-label {
  color: var(--bg) !important;
}


/* 2. Part 5 phase-bet / roadmap-bet chips: match the map's
      .bp-bet-chip pattern exactly. No invention. The map chips
      use bg/ink/edge tokens directly and they're readable across
      themes already; the Part 5 chips should do the same. */

.phase-bet,
.roadmap-bet {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
}

.phase-bet[data-bet="1"],
.roadmap-bet[data-bet="1"] {
  background: var(--bet-1-bg) !important;
  color: var(--bet-1-ink) !important;
  border-color: var(--bet-1-edge) !important;
}
.phase-bet[data-bet="2"],
.roadmap-bet[data-bet="2"] {
  background: var(--bet-2-bg) !important;
  color: var(--bet-2-ink) !important;
  border-color: var(--bet-2-edge) !important;
}
.phase-bet[data-bet="3"],
.roadmap-bet[data-bet="3"] {
  background: var(--bet-3-bg) !important;
  color: var(--bet-3-ink) !important;
  border-color: var(--bet-3-edge) !important;
}
.phase-bet[data-bet="4"],
.roadmap-bet[data-bet="4"] {
  background: var(--bet-4-bg) !important;
  color: var(--bet-4-ink) !important;
  border-color: var(--bet-4-edge) !important;
}

/* Hover state: subtle border darken, no background flip. Matches
   map chip behavior where the chip is already at full color rest. */
.phase-bet:hover[data-bet],
.phase-bet:focus-visible[data-bet],
.roadmap-bet:hover[data-bet],
.roadmap-bet:focus-visible[data-bet] {
  outline: none;
  box-shadow: 0 0 0 1px currentColor;
}

/* Sigil ink matches chip ink so the icon glyph stays consistent
   with the chip's color identity. */
.phase-bet[data-bet="1"] .bet-sigil { color: var(--bet-1-ink) !important; }
.phase-bet[data-bet="2"] .bet-sigil { color: var(--bet-2-ink) !important; }
.phase-bet[data-bet="3"] .bet-sigil { color: var(--bet-3-ink) !important; }
.phase-bet[data-bet="4"] .bet-sigil { color: var(--bet-4-ink) !important; }
.roadmap-bet[data-bet="1"] .bet-sigil { color: var(--bet-1-ink) !important; }
.roadmap-bet[data-bet="2"] .bet-sigil { color: var(--bet-2-ink) !important; }
.roadmap-bet[data-bet="3"] .bet-sigil { color: var(--bet-3-ink) !important; }
.roadmap-bet[data-bet="4"] .bet-sigil { color: var(--bet-4-ink) !important; }

/* Last updated: May 13, 2026 */


/* ============================================================
   D119 -- Bet chip text contrast in dark mode (token-level fix)
   The bet-N-ink tokens were pastel-on-pastel-wash in dark, which
   technically passed AA but rendered as dim color-on-color.
   User couldn't read them in Part 5 chips and rightly noted the
   same issue exists across map chips by the same tokens.

   Fix: in dark mode, chip TEXT becomes near-white. The bg + border
   carry the bet-color identity. Sigil glyph stays in the bet ink
   so the icon disc on the chip's left still reads colorfully.
   This applies uniformly to .bp-bet-chip (map), .phase-bet
   (Part 5 roadmap), and .roadmap-bet (Part 5 footer).

   Also brightens the chip background slightly (0.18 -> 0.28 alpha)
   so the chip itself reads as a distinct token on the dark page,
   not a barely-visible wash.
   ============================================================ */

body[data-theme="dark"] {
  /* Brighter chip backgrounds so the chip itself is visible on
     the dark page bg. */
  --bet-1-bg: rgba(169, 196, 232, 0.32);
  --bet-2-bg: rgba(198, 180, 220, 0.32);
  --bet-3-bg: rgba(229, 185, 133, 0.32);
  --bet-4-bg: rgba(240, 219, 160, 0.36);
}

/* In dark mode, chip text uses the page's primary ink color
   (near-white) so labels read clearly. The bet color identity
   comes from the chip background + border + sigil glyph. */
body[data-theme="dark"] .bp-bet-chip[data-bet="1"],
body[data-theme="dark"] .bp-bet-chip[data-bet="2"],
body[data-theme="dark"] .bp-bet-chip[data-bet="3"],
body[data-theme="dark"] .bp-bet-chip[data-bet="4"],
body[data-theme="dark"] .phase-bet[data-bet="1"],
body[data-theme="dark"] .phase-bet[data-bet="2"],
body[data-theme="dark"] .phase-bet[data-bet="3"],
body[data-theme="dark"] .phase-bet[data-bet="4"],
body[data-theme="dark"] .roadmap-bet[data-bet="1"],
body[data-theme="dark"] .roadmap-bet[data-bet="2"],
body[data-theme="dark"] .roadmap-bet[data-bet="3"],
body[data-theme="dark"] .roadmap-bet[data-bet="4"] {
  color: var(--ink) !important; /* near-white in dark theme */
}

/* Sigil glyph keeps the bet's pastel ink so the icon stays
   color-coded against the chip background. */
body[data-theme="dark"] .bp-bet-chip[data-bet="1"] .bet-sigil,
body[data-theme="dark"] .phase-bet[data-bet="1"] .bet-sigil,
body[data-theme="dark"] .roadmap-bet[data-bet="1"] .bet-sigil {
  color: var(--bet-1-ink) !important;
}
body[data-theme="dark"] .bp-bet-chip[data-bet="2"] .bet-sigil,
body[data-theme="dark"] .phase-bet[data-bet="2"] .bet-sigil,
body[data-theme="dark"] .roadmap-bet[data-bet="2"] .bet-sigil {
  color: var(--bet-2-ink) !important;
}
body[data-theme="dark"] .bp-bet-chip[data-bet="3"] .bet-sigil,
body[data-theme="dark"] .phase-bet[data-bet="3"] .bet-sigil,
body[data-theme="dark"] .roadmap-bet[data-bet="3"] .bet-sigil {
  color: var(--bet-3-ink) !important;
}
body[data-theme="dark"] .bp-bet-chip[data-bet="4"] .bet-sigil,
body[data-theme="dark"] .phase-bet[data-bet="4"] .bet-sigil,
body[data-theme="dark"] .roadmap-bet[data-bet="4"] .bet-sigil {
  color: var(--bet-4-ink) !important;
}

/* Last updated: May 13, 2026 */


/* ============================================================
   D120 -- Section anchor jumps land at content, not at padding
   .section has padding-top of 5.5rem (~88px), so default anchor
   scroll lands at the section's box edge, then the user sees
   88px of padding before content. JS-side fix in app.js: nav
   clicks intercept and scroll to the section's first content
   element (.section-label) instead of the section box. This
   CSS rule kept as a safety net for direct hash-URL loads
   (page open with #scale in URL bar).
   ============================================================ */

.section[id] {
  scroll-margin-top: 110px !important;
}

/* Section 2 has padding-top of 5.5rem (~88px) plus the standard
   ~22px we want as visual air below the top bar = 110px total.
   Other sections share .section padding so 110px is uniform. */

/* Last updated: May 13, 2026 */


/* ============================================================
   D122 -- Page footer (CS Help pattern, HITL tokens)
   Replaces the v0.3 single-line footer with the CS Help footer
   structure: thanks, back-to-top link, author credit with handle,
   org + updated-date meta line.
   ============================================================ */

.page-footer {
  margin: 0;
  padding: 0;
  background: var(--bg-elev);
  border-top: 1px solid var(--rule);
}

.page-footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 48px 48px;
  text-align: center;
}

.page-footer .footer-thanks {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink-muted);
  margin-bottom: 16px;
  font-style: italic;
}

.page-footer .footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

.page-footer .footer-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
}

.page-footer .footer-link:hover {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--accent);
}

.page-footer .footer-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.page-footer .footer-credits-line {
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
  margin-bottom: 8px;
}

.page-footer .footer-credit {
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s;
}

.page-footer .footer-credit:hover {
  color: var(--ink);
}

.page-footer .footer-alias {
  font-weight: 400;
  color: var(--ink-muted);
}

.page-footer .footer-meta {
  font-size: 13px;
  color: var(--ink-muted);
  opacity: 0.65;
}


/* ============================================================
   D123 -- Soften the dark-mode infinity loop
   Was 0.22 opacity; light is 0.18 default and warm is 0.14.
   Bring dark in line by dropping to 0.12 so the loop reads as
   ambient backdrop, not a competing visual. The hero comet and
   gradient wash already carry the visual energy in dark mode.
   ============================================================ */

body[data-theme="dark"] .problem-bg-infinity {
  opacity: 0.12 !important;
}

/* Last updated: May 14, 2026 */


/* ============================================================
   D124 -- Dark mode hero: dampen the entire comet/loop system
   Multiple build phases brightened the dark-mode comet head,
   halo, lens streaks, and trail strokes. User reported the loop
   still reads too prominently in dark vs the muted treatment in
   light/warm. Single dampening pass via per-layer overrides.
   ============================================================ */

/* Comet head core: cut bloom by ~50% */
body[data-theme="dark"] .comet-head-core {
  box-shadow:
    0 0 2px 1px rgba(255, 255, 255, 0.3) !important,
    0 0 6px 2px rgba(200, 225, 255, 0.15) !important,
    0 0 14px 4px rgba(140, 180, 240, 0.08) !important,
    0 0 32px 10px rgba(42, 77, 143, 0.04) !important;
}

/* Halo: cut visible alpha values */
body[data-theme="dark"] .comet-head-halo {
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(180, 210, 255, 0.03) 30%,
    rgba(140, 176, 255, 0.015) 60%,
    transparent 78%) !important;
}

/* Lens streaks: barely visible */
body[data-theme="dark"] .comet-head-streak {
  background: linear-gradient(to right,
    transparent 0%,
    rgba(255, 255, 255, 0.01) 20%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.01) 80%,
    transparent 100%) !important;
}
body[data-theme="dark"] .comet-head-streak-v {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.01) 20%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.01) 80%,
    transparent 100%) !important;
}

/* JS-painted trail lines: shrink overall opacity */
body[data-theme="dark"] .problem-bg-svg line,
body[data-theme="dark"] .problem-bg-svg path {
  opacity: 0.5 !important;
}

/* Distant guide loop: keep at 0 (already faded) */
body[data-theme="dark"] .hitl-inf-guide {
  opacity: 0 !important;
}

/* The .problem-bg::before gradient wash and ::after comet-color
   bloom layers also brighten in dark mode. Bring them down to
   match the muted feel of warm/light. */
body[data-theme="dark"] .problem-bg::before {
  opacity: 0.5 !important;
}

body[data-theme="dark"] .problem-bg::after {
  opacity: 0.3 !important;
}

/* Last updated: May 14, 2026 */


/* ============================================================
   D125 -- Animation pass
   Pattern: every animated element has data-anim="<kind>" set by
   JS. CSS rules apply the resting (hidden / pre-animation) state.
   data-anim-active="true" triggers the transition to natural state.

   Reduced motion: an early rule short-circuits everything to
   instant final state.
   ============================================================ */

/* Stagger via CSS custom property derived from data-anim-stagger. */
[data-anim-stagger="0"] { --anim-delay: 0ms; }
[data-anim-stagger="1"] { --anim-delay: 60ms; }
[data-anim-stagger="2"] { --anim-delay: 120ms; }
[data-anim-stagger="3"] { --anim-delay: 180ms; }
[data-anim-stagger="4"] { --anim-delay: 240ms; }
[data-anim-stagger="5"] { --anim-delay: 300ms; }
[data-anim-stagger="6"] { --anim-delay: 360ms; }
[data-anim-stagger="7"] { --anim-delay: 420ms; }
[data-anim-stagger="8"] { --anim-delay: 480ms; }

/* Default: fade-up reveal */
[data-anim="fade-up"],
[data-anim="kpi"],
[data-anim="phase"] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}

[data-anim="fade-up"][data-anim-active="true"],
[data-anim="kpi"][data-anim-active="true"],
[data-anim="phase"][data-anim-active="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* Bar grow: scale horizontally from 0 width. Used for fork bar
   segments, AHT fills, anxiety arc bands, perception gap fills,
   YTD split segments. */
[data-anim="bar-grow"] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--anim-delay, 0ms);
  will-change: transform;
}
[data-anim="bar-grow"][data-anim-active="true"] {
  transform: scaleX(1);
}

/* 37s timer dial: stroke-dashoffset animates from full-circle to
   the 97/157 partial. Targets the parent .bp-timer wrapper (which
   carries data-anim="dial"); the inner <circle.bp-timer-fill> is
   what actually animates. */
.bp-timer[data-anim="dial"] .bp-timer-fill {
  stroke-dasharray: 97 157;
  stroke-dashoffset: 157;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.bp-timer[data-anim="dial"][data-anim-active="true"] .bp-timer-fill {
  stroke-dashoffset: 0;
}

/* Comet sweep across the stage header row when the journey
   blueprint scrolls into view. A pseudo-element line travels
   left to right behind the row. */
[data-anim="sweep-row"] {
  position: relative;
}
[data-anim="sweep-row"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    rgba(42, 77, 143, 0) 0%,
    rgba(42, 77, 143, 0.45) 30%,
    rgba(42, 77, 143, 0.9) 50%,
    rgba(42, 77, 143, 0.45) 70%,
    rgba(42, 77, 143, 0) 100%
  );
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}
body[data-theme="warm"] [data-anim="sweep-row"]::after {
  background: linear-gradient(90deg,
    rgba(138, 90, 42, 0) 0%,
    rgba(138, 90, 42, 0.4) 30%,
    rgba(138, 90, 42, 0.85) 50%,
    rgba(138, 90, 42, 0.4) 70%,
    rgba(138, 90, 42, 0) 100%);
}
body[data-theme="dark"] [data-anim="sweep-row"]::after {
  background: linear-gradient(90deg,
    rgba(140, 176, 255, 0) 0%,
    rgba(140, 176, 255, 0.4) 30%,
    rgba(140, 176, 255, 0.9) 50%,
    rgba(140, 176, 255, 0.4) 70%,
    rgba(140, 176, 255, 0) 100%);
}

[data-anim="sweep-row"][data-anim-active="true"]::after {
  animation: hitl-sweep-row 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

@keyframes hitl-sweep-row {
  0%   { width: 0;    left: 0;    opacity: 0; }
  10%  { width: 25%;  left: 0;    opacity: 1; }
  100% { width: 25%;  left: 100%; opacity: 0; }
}

/* Reduced motion: skip every animation, show final state instantly. */
@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  [data-anim="bar-grow"] {
    transform: scaleX(1) !important;
  }
  [data-anim="dial"] .bp-timer-fill,
  .bp-timer[data-anim="dial"] .bp-timer-fill {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  [data-anim="sweep-row"]::after {
    display: none !important;
  }
}

/* Last updated: May 14, 2026 */


/* ============================================================
   D126 -- "Bets" column header in Section 4 stress test
   The disc-and-name column on the left of each stress-test row
   identifies a bet, but the column had no header. Reader landing
   fresh might not know what those are. Add "Bets" eyebrow above
   the disc column, matching the visual treatment of "Holds today"
   and "Cracks under research" but in neutral ink (these aren't
   evidence states, they're row identities).
   ============================================================ */

.bet-stress-columns-spacer {
  display: flex;
  align-items: stretch;
}

.bet-stress-col-label-bets {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-muted);
  border-top: 2px solid var(--hairline);
  flex: 1;
  width: 100%;
}

/* Last updated: May 14, 2026 */


/* ============================================================
   D127 -- Column header strip alignment fix
   D126 changed the parent grid-template-columns from `220px 1fr`
   to `180px 1fr` so the Bets header sits in a column that matches
   the bet identity rail width below. With both .bet-stress-columns
   and .bet-stress-item sharing `180px 1fr / column-gap: 2.5rem`
   parent grids and `1fr 1fr / column-gap: 2rem` inner labels grids,
   the Holds/Cracks header borders now align with the body cells
   below them.
   ============================================================ */

/* Last updated: May 14, 2026 */


/* ============================================================
   D128 -- Holds/Cracks header borders inset to match content edges
   The border-top-color rails on .bet-stress-col-label-hold and
   -crack span the full grid cell. Each label has padding-left
   1.1rem before the dot/text. So the border starts 1.1rem to the
   LEFT of where the visible content begins, which makes it look
   like it breaks out to the left.

   Fix: convert the border-top into an inset box-shadow that only
   spans the content area (after the padding). And the right edge
   ends at the natural content edge too, matching the body cells.
   ============================================================ */

.bet-stress-col-label-hold,
.bet-stress-col-label-crack {
  border-top-color: transparent !important; /* hide the full-width border */
  position: relative;
}

.bet-stress-col-label-hold::before,
.bet-stress-col-label-crack::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
}

.bet-stress-col-label-hold::before  { background: var(--hold-ink); }
.bet-stress-col-label-crack::before { background: var(--break-ink); }

/* The inter-label hairline (border-left) on the second column
   was creating visual asymmetry. Drop it; the labels read clearly
   from their dots + colored bars alone. */
.bet-stress-col-label + .bet-stress-col-label {
  border-left: none !important;
  margin-left: 0 !important;
}

/* Last updated: May 14, 2026 */


/* ============================================================
   D129 -- Hold/Crack labels: edge-to-edge in their grid cells
   The label's left padding (1.1rem) was pushing the dot+text in
   from the left, but the cell's grid track starts at the body's
   stress-col left edge. We want the colored bar AND text to align
   with the body content directly underneath.

   Body cells (.stress-col) have padding-left: 1rem. So the label
   needs the same padding-left to align text with body content,
   AND the colored bar needs to inset by that same amount on the
   left only (so it starts where the text starts, not at the
   grid cell's left edge).

   Right side: the bar should end at the grid cell's right edge,
   matching the body cell's natural right edge.
   ============================================================ */

.bet-stress-col-label-hold,
.bet-stress-col-label-crack {
  padding: 0.75rem 0 0.75rem 1rem !important; /* match .stress-col padding-left */
}

.bet-stress-col-label-hold::before,
.bet-stress-col-label-crack::before {
  left: 0 !important;
  right: 0 !important;
}

/* Last updated: May 14, 2026 */


/* ============================================================
   D130 -- Tightened sign-off + sources + credits block
   "Thanks for reading" sits above the sources sidecar; sources
   stays as the collapsed details; credit line sits below.
   All left-aligned, no visual block separation between sources
   and footer credit.
   ============================================================ */

.page-footer {
  background: var(--bg-elev);
  border-top: 1px solid var(--rule);
  padding: 0;
}

.page-footer > .section-inner {
  max-width: var(--max-w, 1200px);
  margin: 0 auto;
  padding: 3rem 1.5rem 2.5rem;
  text-align: left;
}

.page-footer .footer-thanks {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 1.5rem;
  text-align: left;
}

.page-footer .sources-details {
  margin: 0 0 2rem !important;
}

.page-footer .footer-credits-line {
  font-size: 13px;
  color: var(--ink-muted);
  text-align: left;
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

/* No more separate links row; the back-to-top FAB carries the
   back-to-top action, and the sticky header has the nav for
   any specific section jump. */
.page-footer .footer-links { display: none; }

/* Last updated: May 14, 2026 */


/* ============================================================
   D131 -- Map-only view toggle
   Two reading modes:
     1. Default narrative -- all sections visible
     2. Map only -- body[data-view="map"] hides every section
        except the journey, plus the section nav

   Toggle: top-bar button (visible) + keyboard `m` (power users).
   `Esc` always exits map mode.
   Persists via localStorage; URL ?view=map enters at load.
   ============================================================ */

/* The toggle button mirrors the theme-pill rhythm: same height
   (34px), same border radius, sits next to it. Active state =
   accent fill + white glyph (matches nav-active). */
.view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 34px;
  padding: 0 0.7rem;
  margin-left: 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.view-toggle svg {
  flex-shrink: 0;
  opacity: 0.8;
}

.view-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.view-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.view-toggle[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

body[data-theme="dark"] .view-toggle[aria-pressed="true"] {
  color: var(--bg);
}

.view-toggle[aria-pressed="true"] svg {
  opacity: 1;
}

/* In map-only mode, the toggle compresses to icon-only so it's
   smaller and more obviously a "currently active" pill. */
body[data-view="map"] .view-toggle .view-toggle-label {
  display: none;
}

body[data-view="map"] .view-toggle {
  padding: 0 0.5rem;
  width: 34px;
}

/* Map-only mode: hide every section except journey, plus the
   section nav (which references sections that are no longer
   visible in this mode). Top bar + theme pill + view toggle stay. */
body[data-view="map"] .section:not(.section-journey),
body[data-view="map"] .top-nav,
body[data-view="map"] .page-footer,
body[data-view="map"] .btt {
  display: none !important;
}

/* Section 3 keeps everything: stage headers, blueprint grid, lede,
   sticky clone, AC3 thumbnail strip, all bet chips inside cells,
   visibility band. The map IS the artifact in this mode. */

/* Make Section 3 fill more of the viewport vertically when alone
   (since adjacent sections aren't pushing space). */
body[data-view="map"] .section-journey {
  padding-top: 1.5rem !important;
  padding-bottom: 2rem !important;
}

body[data-view="map"] .section-journey > .section-inner {
  padding-bottom: 0;
}

/* In map-only mode, the "Part 3 · Journey" eyebrow becomes
   misleading -- there's no Part 1, 2, 4, or 5 to anchor it
   against. Hide it. The section-title and section-lede stay
   so the map still has context. */
body[data-view="map"] .section-journey .section-label {
  display: none;
}

/* Reduced motion: instant transition between modes. Default is
   already instant since we're toggling display: none. */

/* Last updated: May 14, 2026 */


/* ============================================================
   D132 -- Part 1 bet tiles: mute interactive affordances
   Peer feedback: tiles signal clickability via hover lift +
   gradient, but they're not clickable. User decision: keep
   them as static info blocks but preserve hero treatment.

   Strip:
   - hover transform (translateY)
   - hover box-shadow change
   - pointer glow ::before pseudo
   - cursor: pointer (use default)
   Keep:
   - card chrome (border, background, sigil disc)
   - typographic hierarchy
   - sigil colors per bet
   ============================================================ */

.bet-item,
.bet-item:hover,
.bet-item:focus-within {
  transform: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(26, 26, 26, 0.04) !important;
  cursor: default !important;
}

body[data-theme="dark"] .bet-item,
body[data-theme="dark"] .bet-item:hover,
body[data-theme="dark"] .bet-item:focus-within {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.bet-item:hover .bet-item-name,
.bet-item:focus-within .bet-item-name {
  color: var(--ink) !important;
}

/* Kill the pointer-glow ::before */
.bet-item::before {
  display: none !important;
}

/* Last updated: May 14, 2026 */


/* ============================================================
   D133 -- High-traffic acronym spell-outs (Part 1 thesis)
   The problem-thesis-spell span sits inline after HITL with
   a smaller, quieter treatment so the eye reads "Four bets
   built HITL (human-in-the-loop)" as one phrase. Same pattern
   could be applied across the Kit when an acronym needs first-
   use definition without breaking the editorial flow.
   ============================================================ */

.problem-thesis-spell {
  font-size: 0.5em;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0;
  text-transform: none;
  font-style: italic;
  margin-left: 0.15em;
  vertical-align: middle;
}

/* Last updated: May 14, 2026 */


/* ============================================================
   D134 -- Part 2 YTD section: visually subordinate to KPI hero
   Peer feedback: the 760K hero number competes with the 4 KPI
   tiles above. The KPI strip is the section's hero (A/B test
   findings); the YTD subsection is "5 months later" continuation
   evidence, not a parallel hero.

   Fix: scale down the 760K number, add an eyebrow that frames
   the YTD section as continuation, soften the title typography.
   ============================================================ */

.scale-ytd-eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-muted);
  margin: 0 0 0.8rem;
  line-height: 1;
}

.scale-ytd-num {
  /* Was 3.25rem in D54; scale down so KPI numbers above stay
     hero. YTD num is supporting evidence, not a competing hero. */
  font-size: 2.4rem !important;
  font-weight: 700 !important;
}

.scale-ytd-label {
  /* Adjacent label rebalances to match the smaller number. */
  font-size: 0.95rem !important;
  color: var(--ink-soft) !important;
  font-weight: 500 !important;
}

/* Last updated: May 14, 2026 */


/* ============================================================
   D135 -- Part 3 implications: elevated to stated conclusions
   Peer feedback: the two design-implication asides ("Rejection
   needs a visible path to a human" and "Invisibility isn't a
   universal contract") felt lost as quiet asides under the map.
   User decision: keep them below Part 3 (natural reading transition
   from map to measurement) but elevate visual treatment to match
   Part 5's takeaway-close. Eyebrow + anchor heading + body + cite.
   ============================================================ */

.part3-implications {
  margin: 4rem 0 0;
  padding: 2.5rem 0 4rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.part3-implications-eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1;
}

.part3-implications-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
  align-items: start;
}

.design-implication {
  margin: 0;
  padding: 0 0 0 1.25rem;
  background: transparent;
  border: none;
  border-left: 2px solid var(--accent);
  max-width: 60ch;
}

.design-implication + .design-implication {
  border-left: 2px solid var(--accent);
  padding-left: 3rem;
}

.design-implication-anchor {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.65rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 0.75rem;
}

.design-implication-anchor::before {
  content: none !important;
  display: none !important;
}

/* Suppress the legacy red dot painted on .design-implication itself
   (was a left-rail accent treatment). The new side-by-side pair
   layout uses a vertical hairline between cells, no dots. */
.part3-implications .design-implication::before {
  content: none !important;
  display: none !important;
}

.design-implication-text {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 0.85rem;
}

.design-implication-citation {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.45;
  max-width: 56ch;
}

@media (max-width: 720px) {
  .part3-implications {
    margin-top: 3rem;
    padding-top: 2rem;
    gap: 1.75rem;
  }
  .part3-implications-pair {
    grid-template-columns: 1fr;
    row-gap: 2.25rem;
    column-gap: 0;
  }
  .design-implication + .design-implication {
    padding-left: 1.25rem;
    padding-top: 0;
    border-top: none;
  }
}

/* Last updated: May 14, 2026 */


/* ============================================================
   D136 -- Deepdive disclosure: match Sources sidecar treatment
   The page already has one disclosure pattern (the Sources &
   methodology pill at the bottom). Visual consistency: the
   "See the launch-experiment bars" disclosure under the KPI
   strip uses the same vocabulary -- pill, chevron, hover
   accent fill.
   ============================================================ */

.scale-deepdive-disclosure {
  margin: 1.5rem 0 0;
  max-width: none;
}

.scale-deepdive-disclosure-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.scale-deepdive-disclosure-summary::-webkit-details-marker { display: none; }
.scale-deepdive-disclosure-summary::marker { content: ''; }

.scale-deepdive-disclosure-summary::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.3s ease;
  margin-left: 0.25rem;
}

.scale-deepdive-disclosure[open] .scale-deepdive-disclosure-summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.scale-deepdive-disclosure-summary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 2px 6px rgba(42, 77, 143, 0.15);
}

.scale-deepdive-disclosure-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.scale-deepdive-disclosure-body {
  margin-top: 1.75rem;
  padding-top: 0;
  border-top: none;
}

/* Inside the disclosure, suppress the .scale-deepdive's own
   border-top + padding-top; the disclosure container already
   provides the visual separation via its own spacing. */
.scale-deepdive-disclosure .scale-deepdive {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .scale-deepdive-disclosure-summary::after {
    transition: none;
  }
}

/* Last updated: May 14, 2026 */


/* ============================================================
   D137 -- Bridge separator: line moves above the bridge sentence
   The hairline before .scale-ytd was sitting between the bridge
   ("Five months later, the numbers held") and the 760K hero.
   That made the bridge feel attached to the launch experiment
   above. Bridge belongs WITH the YTD subsection -- the line
   should mark the transition point, not split the bridge from
   what it bridges to.
   ============================================================ */

.scale-ytd {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.scale-ytd-bridge {
  margin-top: 3rem !important;
  padding-top: 0 !important;
  border-top: none;
}

/* Last updated: May 14, 2026 */


/* ============================================================
   D138 -- OORTW qualifier as a footnote, not a lede
   The qualifier was inheriting .section-lede sizing (1.08rem,
   line-height 1.6) which gave it the same weight as the main
   lede above. It's a footnote, not a co-lede. Treat it that way:
   smaller, single-line, muted ink, sits tucked under the lede.
   ============================================================ */

.section-lede-footnote {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-muted);
  margin: 0.4rem 0 0;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 720px) {
  .section-lede-footnote {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* Last updated: May 14, 2026 */