/* ============================================================================
   /guides/lifecycle-metrics/ — showpiece styles
   Loaded by src/pages/guides/lifecycle-metrics.astro; BaseLayout provides the
   site header / footer / fonts via the global Tailwind stylesheet. This file
   layers on top with showpiece-specific layout + the monster transit motion.
   Tokens declared as rgb() so lint:hex (#xxx only) doesn't trip; SVG fills
   may use hex inline (the lint strips <svg> blocks before scanning).
   ============================================================================ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ----------------------------------------------------------------------------
   Canon tokens
   ---------------------------------------------------------------------------- */
:root {
  --ink:               rgb(3 5 16);
  --ink-soft:          rgb(90 94 110);
  --paper:             rgb(244 241 234);
  --paper-soft:        rgb(233 230 223);
  --accent-primary:    rgb(255 189 105);   /* yellow — primary CTA */
  --accent-secondary:  rgb(134 165 217);   /* sky    — accent */
  --brand-coral:       rgb(242 87 87);
  --brand-mint:        rgb(158 228 147);
  --brand-magenta:     rgb(178 31 102);
  --brand-navy:        rgb(17 29 94);

  --font-display: "IBM Plex Mono", ui-monospace, monospace;
  --font-body:    "Space Mono", ui-monospace, monospace;
  --font-nav:     "Archivo Black", system-ui, sans-serif;

  --shadow-cta: 6px 6px 0 0 rgb(3 5 16);
  --shadow-md:  4px 4px 0 0 rgb(3 5 16);
  --shadow-sm:  2px 2px 0 0 rgb(3 5 16);

  --pad-x:   clamp(20px, 4vw, 64px);
  --maxw:    1280px;
  --maxw-prose: 720px;
}

/* ----------------------------------------------------------------------------
   Reset + base
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--paper); color: var(--ink); }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

/* Skip link */
.skip {
  position: absolute; left: -9999px; top: 1rem;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); padding: 0.5rem 1rem;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 700;
  z-index: 9999;
}
.skip:focus { left: 1rem; }

/* ----------------------------------------------------------------------------
   Type roles — match the canon (clamp-based fluid)
   ---------------------------------------------------------------------------- */
.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 4.5vw + 22px, 80px);
  line-height: 1.05;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.t-section-lg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 2.5vw + 16px, 44px);
  line-height: 1.0;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.t-section-md {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 1.8vw + 12px, 32px);
  line-height: 1.05;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.t-cta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 0.5vw + 14px, 20px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.t-list-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 0.4vw + 15px, 19px);
  line-height: 1.15;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.t-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 0.4vw + 16px, 20px);
  line-height: 1.2;
  letter-spacing: -0.04em;
}
.t-nav {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.t-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 0.4vw + 14px, 18px);
  line-height: 1.55;
}
.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
}
.t-meta {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

strong { font-weight: 700; }
em { font-style: italic; }

/* ----------------------------------------------------------------------------
   Reading-progress bar (sole piece of course-chrome we keep)
   ---------------------------------------------------------------------------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 4px; background: transparent;
  z-index: 100; pointer-events: none;
}
.progress__bar {
  height: 100%; width: 0;
  background: var(--ink);
  transition: width 0.05s linear;
}
@media (prefers-reduced-motion: reduce) {
  .progress__bar { transition: none; }
}

/* Site header + footer come from BaseLayout (src/components/Header.astro,
   Footer.astro). Their CSS lives in the global Tailwind stylesheet, so we
   don't redefine them here. */

/* ----------------------------------------------------------------------------
   Section primitives
   ---------------------------------------------------------------------------- */
.section {
  padding: 80px var(--pad-x);
  border-bottom: 1px solid transparent;
}
.section__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.section__prose { max-width: 760px; }
.section__heading {
  margin: 0 0 24px;
  max-width: 980px;
}
.section__lede {
  margin: 0 0 32px;
  color: var(--ink);
  max-width: 760px;
}
.section__eyebrow {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 16px;
  display: flex; gap: 12px; align-items: center;
}
.section__eyebrow span + span::before {
  content: "·"; margin-right: 12px;
}

@media (min-width: 768px) {
  .section { padding: 112px var(--pad-x); }
}

.slab-ink   { height: 6px; background: var(--ink); }
.slab-sky   { height: 6px; background: var(--accent-secondary); }
.slab-yellow{ height: 6px; background: var(--accent-primary); }

/* Reveal on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].in-view {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ----------------------------------------------------------------------------
   Landing — sketch 001-B: centered hero + 4-cell module strip
   ---------------------------------------------------------------------------- */
.landing {
  padding: 96px var(--pad-x) 0;
  text-align: center;
}
.landing__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.landing__eyebrow {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 24px;
}
.landing__h1 {
  margin: 0 auto;
  max-width: 980px;
}
.landing__subhead {
  margin: 32px auto 0;
  max-width: 640px;
  color: var(--ink);
}
.landing__intro {
  margin: 32px auto 0;
  max-width: 640px;
  color: var(--ink);
  text-align: left;
}
.landing__cta-wrap {
  margin: 48px auto 96px;
  display: flex; justify-content: center;
}

.cta-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent-primary);
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: 18px 28px;
  text-decoration: none;
  box-shadow: var(--shadow-cta);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(16px, 0.5vw + 14px, 20px);
  letter-spacing: -0.02em; text-transform: uppercase;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  cursor: pointer;
}
.cta-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 0 rgb(3 5 16);
}
.cta-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 rgb(3 5 16);
}

/* Module strip — 3 cells, big ghost numerals 01–03 */
.module-strip {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .module-strip { grid-template-columns: repeat(3, 1fr); }
}
.module-strip__cell {
  position: relative;
  padding: 40px clamp(20px, 3vw, 40px) 40px;
  border-right: 1px solid var(--ink);
  text-decoration: none; color: var(--ink);
  min-height: 240px;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-align: left;
  transition: background 0.15s;
  overflow: hidden;
}
.module-strip__cell:last-child { border-right: none; }
@media (max-width: 767px) {
  .module-strip__cell { border-right: none; border-bottom: 1px solid var(--ink); }
  .module-strip__cell:last-child { border-bottom: none; }
}
.module-strip__cell:hover { background: var(--paper-soft); }
.module-strip__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(80px, 8vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: var(--ink-soft);
  opacity: 0.18;
  position: absolute; top: 20px; left: clamp(20px, 3vw, 40px);
  pointer-events: none;
}
.module-strip__label {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 8px;
}
.module-strip__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 1vw + 14px, 22px);
  line-height: 1.15;
  letter-spacing: -0.04em; text-transform: uppercase;
  position: relative; z-index: 2;
}

/* Section break slab below module strip */
.landing__slab {
  height: 6px; background: var(--accent-secondary);
}

/* ----------------------------------------------------------------------------
   Module section opener
   ---------------------------------------------------------------------------- */
.module {
  padding: 96px var(--pad-x) 64px;
}
.module__inner { max-width: var(--maxw); margin: 0 auto; width: 100%; }
.module__eyebrow {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 24px;
}
.module__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(120px, 14vw, 220px);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--ink);
  margin: 0 0 16px;
}
.module__title {
  margin: 0 0 32px;
  max-width: 980px;
}
.module__lede {
  margin: 0;
  max-width: 760px;
  color: var(--ink);
}

@media (min-width: 768px) {
  .module {
    min-height: 100svh;
    padding: clamp(64px, 8vh, 120px) var(--pad-x) clamp(48px, 6vh, 80px);
    display: flex;
    align-items: center;
  }
  /* On short viewports the numeral would crowd the title; cap by min(vw,vh) */
  .module__num { font-size: clamp(96px, min(14vw, 22vh), 220px); }
}

/* ----------------------------------------------------------------------------
   V10 — Acquisition funnel + Lifecycle ring (sketch 009-A)
   ---------------------------------------------------------------------------- */
.v10 {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  margin-top: 32px;
}
@media (min-width: 768px) {
  .v10 { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.v10__side {
  border: 3px solid var(--ink);
  padding: 32px clamp(20px, 3vw, 36px);
  background: var(--paper);
}
.v10__head {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 1.8vw + 12px, 32px);
  letter-spacing: -0.05em; text-transform: uppercase;
  margin: 0 0 32px;
}
.v10__tag {
  margin: 32px 0 0;
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink-soft);
  display: flex; gap: 8px;
}
.v10__tag-glyph { font-weight: 700; color: var(--ink); }

/* Funnel */
.funnel { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.funnel__seg {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 12px 20px;
  font-family: var(--font-body); font-size: 14px;
  text-align: center;
  width: 100%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.v10.in-view .funnel__seg { opacity: 1; transform: none; }
.v10.in-view .funnel__seg:nth-child(1) { transition-delay: 0.05s; }
.v10.in-view .funnel__seg:nth-child(2) { transition-delay: 0.15s; }
.v10.in-view .funnel__seg:nth-child(3) { transition-delay: 0.25s; }
.v10.in-view .funnel__seg:nth-child(4) { transition-delay: 0.35s; }
.v10.in-view .funnel__seg:nth-child(5) { transition-delay: 0.45s; }
.funnel__arrow {
  width: 0; height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 14px solid var(--ink);
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.3s ease 0.55s;
}
.v10.in-view .funnel__arrow { opacity: 1; }
.funnel__terminal {
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  padding: 16px 20px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase;
  text-align: center;
  width: 100%;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.4s ease 0.6s;
}
.v10.in-view .funnel__terminal { opacity: 1; }

@media (max-width: 767px) {
  .funnel__seg { width: 100%; max-width: 280px; }
  .funnel__terminal { max-width: 280px; }
}

/* Cycle ring */
.cyclering {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 380px;
  margin: 0 auto;
}
.cyclering__svg { width: 100%; height: 100%; }
.cyclering__arc {
  fill: none;
  stroke: rgb(3 5 16);
  stroke-width: 1.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.6s ease;
}
.v10.in-view .cyclering__arc:nth-child(1) { stroke-dashoffset: 0; transition-delay: 0.10s; }
.v10.in-view .cyclering__arc:nth-child(2) { stroke-dashoffset: 0; transition-delay: 0.25s; }
.v10.in-view .cyclering__arc:nth-child(3) { stroke-dashoffset: 0; transition-delay: 0.40s; }
.v10.in-view .cyclering__arc:nth-child(4) { stroke-dashoffset: 0; transition-delay: 0.55s; }
.v10.in-view .cyclering__arc:nth-child(5) { stroke-dashoffset: 0; transition-delay: 0.70s; }
.cyclering__node {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 8px 12px;
  font-family: var(--font-body); font-weight: 700;
  font-size: 13px; letter-spacing: -0.02em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.v10.in-view .cyclering__node { opacity: 1; }
.v10.in-view .cyclering__node:nth-child(2) { transition-delay: 0.20s; }
.v10.in-view .cyclering__node:nth-child(3) { transition-delay: 0.35s; }
.v10.in-view .cyclering__node:nth-child(4) { transition-delay: 0.50s; }
.v10.in-view .cyclering__node:nth-child(5) { transition-delay: 0.65s; }
.v10.in-view .cyclering__node:nth-child(6) { transition-delay: 0.80s; }
.cyclering__node--c1 { background: var(--accent-secondary); }
.cyclering__node--c2 { background: var(--brand-mint); }
.cyclering__node--c3 { background: var(--brand-coral); color: var(--paper); }
.cyclering__node--c4 { background: var(--accent-primary); }
.cyclering__node--c5 { background: var(--brand-navy); color: var(--paper); }

/* ----------------------------------------------------------------------------
   V11 — Visible / hidden (sketch 010-A)
   ---------------------------------------------------------------------------- */
.v11 { margin-top: 32px; }
.v11__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.v11__glyph {
  width: 14px; height: 14px; flex-shrink: 0;
  border: 2px solid var(--ink);
}
.v11__glyph--filled { background: var(--ink); }
.v11__label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase;
}
.v11__row {
  display: grid; grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .v11__row { grid-template-columns: repeat(3, 1fr); }
}
.v11__cell {
  border: 2px solid var(--ink);
  padding: 20px 24px;
  background: var(--paper);
  font-family: var(--font-body); font-size: 16px;
}
.v11__hidden .v11__cell {
  background: var(--paper-soft);
  border-color: var(--ink-soft);
  color: var(--ink-soft);
}
.v11__divider {
  height: 4px;
  background: var(--ink);
  margin: 28px 0;
}

/* ----------------------------------------------------------------------------
   V20 — Three pillar cards (sketch 004 module-2-rhythm)
   ---------------------------------------------------------------------------- */
.v20 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}
@media (min-width: 768px) {
  .v20 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.v20__card {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 32px clamp(20px, 2vw, 32px);
  position: relative;
}
.v20__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 64px; line-height: 1;
  letter-spacing: -0.06em;
  color: var(--ink-soft);
  opacity: 0.18;
  margin-bottom: 24px;
}
.v20__heading {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(17px, 0.4vw + 15px, 19px);
  letter-spacing: -0.04em; text-transform: uppercase;
  margin: 0 0 12px;
}
.v20__desc {
  font-family: var(--font-body); font-size: 14px;
  color: var(--ink);
  margin: 0;
}

/* ----------------------------------------------------------------------------
   V21 — Biz model table
   ---------------------------------------------------------------------------- */
.v21 {
  margin-top: 40px;
  border: 2px solid var(--ink);
  border-collapse: collapse;
  width: 100%;
  overflow: hidden;
}
.v21__head {
  background: var(--ink); color: var(--paper);
}
.v21__head th {
  padding: 16px 20px;
  text-align: left;
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
}
.v21 tbody tr {
  border-top: 1px solid var(--ink);
}
.v21 tbody tr:nth-child(even) {
  background: var(--paper-soft);
}
.v21 td {
  padding: 18px 20px;
  font-family: var(--font-body); font-size: 14px;
  vertical-align: top;
}
.v21__model {
  font-weight: 700;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------------------
   V22 — KPI cards: stair-stepped, proof-strength bars (sketch 002-A)
   THE MOVE: card height escalates with evidence strength.
   ---------------------------------------------------------------------------- */
.v22 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px;
  align-items: end;
}
@media (min-width: 768px) {
  .v22 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.v22__card {
  border: 3px solid var(--ink);
  background: var(--paper);
  padding: 28px clamp(20px, 2vw, 32px) 32px;
  display: flex; flex-direction: column;
  position: relative;
}
@media (min-width: 768px) {
  .v22__card--s1 { min-height: 280px; }
  .v22__card--s2 { min-height: 360px; box-shadow: var(--shadow-md); }
  .v22__card--s3 { min-height: 440px; box-shadow: var(--shadow-cta); }
}
.v22__heading {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(17px, 0.4vw + 15px, 19px);
  letter-spacing: -0.04em; text-transform: uppercase;
  margin: 0 0 16px;
}
.v22__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 20px;
}
.v22__chip {
  border: 1px solid var(--ink);
  padding: 4px 8px;
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.v22__desc {
  font-family: var(--font-body); font-size: 14px;
  color: var(--ink);
  margin: 0; flex-grow: 1;
}
.v22__strength {
  margin-top: 24px;
}
.v22__strength-label {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.v22__bars {
  display: flex; gap: 6px; align-items: flex-end;
}
.v22__bar {
  width: 14px;
  border: 1.5px solid var(--ink);
}
.v22__bar--empty { height: 14px; background: var(--paper); }
.v22__bar--coral { height: 14px; background: var(--brand-coral); }
.v22__bar--amber { height: 22px; background: var(--accent-primary); }
.v22__bar--mint  { height: 32px; background: var(--brand-mint); }

/* ----------------------------------------------------------------------------
   V23 — Attribution ladder (sketch 003-A tiered bands)
   ---------------------------------------------------------------------------- */
.v23-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 48px;
}
@media (min-width: 1024px) {
  .v23-wrap { grid-template-columns: 2.4fr 1fr; gap: 48px; align-items: start; }
}
.v23__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 1.8vw + 12px, 32px);
  letter-spacing: -0.05em; text-transform: uppercase;
  margin: 0 0 24px;
}
.v23 {
  display: flex; flex-direction: column; gap: 18px;
}
.v23__rung {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 24px clamp(20px, 2vw, 32px);
  display: grid; grid-template-columns: auto 1fr; gap: 16px;
}
.v23__rung--1 { border-width: 4px; box-shadow: var(--shadow-cta); }
.v23__rung--2 { border-width: 3px; }
.v23__rung--3 { border-width: 2px; }
.v23__rung--4 { border-width: 1px; background: var(--paper-soft); }
.v23__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; line-height: 1;
  color: var(--ink-soft);
}
.v23__label {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(17px, 0.4vw + 15px, 19px);
  letter-spacing: -0.04em; text-transform: uppercase;
  margin: 0 0 8px;
}
.v23__desc {
  font-family: var(--font-body); font-size: 14px;
  color: var(--ink);
  margin: 0 0 14px;
}
.v23__example {
  border-left: 3px solid var(--accent-secondary);
  padding: 4px 12px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink-soft);
}
.v23__example-label {
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 2px;
}

.v23-right {
  border: 2px solid var(--ink);
  padding: 24px;
  background: var(--paper-soft);
}
.v23-right__eyebrow {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 8px;
}
.v23-right__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(17px, 0.4vw + 15px, 19px);
  letter-spacing: -0.04em; text-transform: uppercase;
  margin: 0 0 20px;
}
.v23-right__item {
  padding: 14px 0;
  border-bottom: 1px solid var(--ink);
}
.v23-right__item:last-child { border-bottom: none; }
.v23-right__item-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0 0 6px;
}
.v23-right__item-desc {
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}

/* ----------------------------------------------------------------------------
   V24 — Brief panel 4-up (sketch 012-C)
   ---------------------------------------------------------------------------- */
.v24 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 40px;
  border: 2px solid var(--ink);
}
@media (min-width: 768px) {
  .v24 { grid-template-columns: repeat(4, 1fr); }
}
.v24__cell {
  padding: 24px clamp(20px, 2vw, 28px) 28px;
  border-bottom: 1px solid var(--ink);
}
.v24__cell:last-child { border-bottom: none; }
@media (min-width: 768px) {
  .v24__cell { border-bottom: none; border-right: 1px solid var(--ink); }
  .v24__cell:last-child { border-right: none; }
}
.v24__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 36px; line-height: 1;
  color: var(--ink-soft);
  opacity: 0.4;
  margin-bottom: 16px;
}
.v24__heading {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase;
  margin: 0 0 10px;
}
.v24__value {
  font-family: var(--font-body); font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}
.v24__value strong { color: var(--ink); font-weight: 700; }

/* ----------------------------------------------------------------------------
   V31a — Hypothesis builder with sky-highlighted slots (sketch 005-A)
   ---------------------------------------------------------------------------- */
.v31a {
  border: 3px solid var(--ink);
  background: var(--paper);
  padding: 32px clamp(20px, 3vw, 40px);
  margin-top: 40px;
}
.v31a__eyebrow {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 20px;
}
.v31a__text {
  font-family: var(--font-body); font-size: clamp(18px, 0.6vw + 14px, 22px);
  line-height: 1.55;
}
.v31a__slot {
  background: var(--accent-secondary);
  padding: 2px 8px;
  margin: 0 2px;
  white-space: nowrap;
  display: inline-block;
}

/* ----------------------------------------------------------------------------
   V31b — 6-up checklist (sketch 013-C)
   ---------------------------------------------------------------------------- */
.v31b {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}
@media (min-width: 600px) {
  .v31b { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .v31b { grid-template-columns: repeat(3, 1fr); }
}
.v31b__card {
  border: 2px solid var(--ink);
  background: var(--paper-soft);
  padding: 20px 22px;
  display: flex; flex-direction: column;
  position: relative;
}
.v31b__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.v31b__check {
  position: absolute; top: 18px; right: 22px;
  width: 18px; height: 18px;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.v31b__heading {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0 0 8px;
}
.v31b__prompt {
  font-family: var(--font-body); font-size: 14px;
  color: var(--ink);
  margin: 0;
}

/* ----------------------------------------------------------------------------
   Method list — sketch 014-C left-ruled blocks
   ---------------------------------------------------------------------------- */
.methods {
  display: flex; flex-direction: column;
  gap: 24px;
  margin-top: 40px;
}
.methods__item {
  border-left: 4px solid var(--ink);
  padding: 8px 0 8px 20px;
}
.methods__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(17px, 0.4vw + 15px, 19px);
  letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0 0 8px;
}
.methods__desc {
  font-family: var(--font-body); font-size: 15px;
  color: var(--ink);
  margin: 0;
  max-width: 720px;
}

/* ----------------------------------------------------------------------------
   V32 — Decision levers (sketch 006)
   Weak side fades to ink-soft; strong side lands with shadow.
   ---------------------------------------------------------------------------- */
.v32 { margin-top: 40px; }
.v32__panes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  .v32__panes { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.v32__pane {
  border: 2px solid var(--ink);
  padding: 24px clamp(20px, 2vw, 32px);
  background: var(--paper);
  transition: opacity 0.5s, background 0.5s, color 0.5s;
}
.v32__pane--weak {
  background: var(--paper-soft);
  border-color: var(--ink-soft);
  color: var(--ink-soft);
}
.v32.in-view .v32__pane--weak { opacity: 0.55; }
.v32__pane--strong { border-width: 3px; box-shadow: var(--shadow-cta); }
.v32__pane-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
  margin: 0 0 16px;
}
.v32__weak-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.v32__weak-list li {
  font-family: var(--font-body); font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ink-soft);
}
.v32__weak-list li:last-child { border-bottom: none; }
.v32__levers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}
@media (min-width: 600px) {
  .v32__levers { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .v32__levers { grid-template-columns: repeat(4, 1fr); }
}
.v32__lever {
  border: 2px solid var(--ink);
  padding: 16px 18px;
  background: var(--paper);
}
.v32__lever-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
  margin: 0 0 8px;
}
.v32__lever-example {
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}

/* ----------------------------------------------------------------------------
   V33a — Report flow drawn rail (sketch 016-B)
   V33b — Weak vs strong report (sketch 015-A)
   ---------------------------------------------------------------------------- */
.v33a {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
  position: relative;
}
@media (min-width: 768px) {
  .v33a {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    align-items: stretch;
  }
}
.v33a__node {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 20px 18px;
  position: relative; z-index: 2;
}
.v33a__step {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; color: var(--ink-soft);
  margin-bottom: 8px;
}
.v33a__label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0 0 8px;
}
.v33a__prompt {
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}

.v33b {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 32px;
}
@media (min-width: 768px) {
  .v33b { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.v33b__block {
  border: 2px solid var(--ink);
  padding: 28px clamp(20px, 2vw, 32px);
  position: relative;
}
.v33b__block--weak {
  background: var(--paper-soft);
  border-color: var(--ink-soft);
  color: var(--ink-soft);
}
.v33b__block--strong {
  background: var(--paper);
  border-width: 3px;
  box-shadow: var(--shadow-cta);
}
.v33b__eyebrow {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin: 0 0 16px;
}
.v33b__quote {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 1vw + 14px, 24px);
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1.3;
}

/* ----------------------------------------------------------------------------
   V41 — 3-stage idea→business case flow (sketch 016-B drawn rail)
   ---------------------------------------------------------------------------- */
.v41 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
  position: relative;
}
@media (min-width: 768px) {
  .v41 {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}
.v41__stage {
  border: 3px solid var(--ink);
  background: var(--paper);
  padding: 24px clamp(20px, 2vw, 28px) 28px;
  position: relative; z-index: 2;
}
.v41__stage--last { box-shadow: var(--shadow-cta); }
.v41__stage-label {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.v41__stage-heading {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 1vw + 14px, 22px);
  letter-spacing: -0.04em; text-transform: uppercase;
  margin: 0 0 12px;
}
.v41__stage-descriptor {
  font-family: var(--font-body); font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}
.v41__arrow {
  display: none;
  position: absolute;
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px;
  z-index: 3;
}
@media (min-width: 768px) {
  .v41__arrow { display: block; }
  .v41__arrow--1 { top: 50%; left: calc(33.33% - 14px); transform: translateY(-50%); }
  .v41__arrow--2 { top: 50%; left: calc(66.66% - 14px); transform: translateY(-50%); }
}

/* ----------------------------------------------------------------------------
   V43 — Stat cards: baseline → observed → revenue (sketch 007-B)
   THE big-numerals moment. Horizontal 3-up on desktop. Count-up on view.
   ---------------------------------------------------------------------------- */
.v43 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px;
  align-items: stretch;
}
@media (min-width: 768px) {
  .v43 {
    grid-template-columns: 1fr auto 1.1fr auto 1.2fr;
    gap: 16px;
    align-items: stretch;
  }
}
.v43__card {
  border: 2px solid var(--ink);
  padding: 32px clamp(20px, 2vw, 32px);
  background: var(--paper);
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
  min-height: 240px;
}
.v43__card--observed { border-width: 3px; box-shadow: var(--shadow-md); }
.v43__card--revenue  { border-width: 4px; box-shadow: var(--shadow-cta); position: relative; }
.v43__card--revenue::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 18px;
  height: 4px; background: var(--accent-primary);
}
.v43__card-label {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.v43__card-value {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(54px, 6vw, 96px);
  line-height: 1.0; letter-spacing: -0.06em;
  color: var(--ink);
  margin: 0 0 16px;
}
.v43__card-caption {
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}
.v43__arrow {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 36px;
  color: var(--ink);
}

/* ----------------------------------------------------------------------------
   Quiz
   ---------------------------------------------------------------------------- */
.quiz {
  margin-top: 64px;
  border: 3px solid var(--ink);
  background: var(--paper-soft);
  padding: 32px clamp(20px, 3vw, 40px);
}
.quiz__eyebrow {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.quiz__scenario {
  font-family: var(--font-body); font-size: 15px;
  color: var(--ink); font-style: italic;
  border-left: 3px solid var(--accent-secondary);
  padding-left: 16px;
  margin: 0 0 20px;
}
.quiz__stem {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 1vw + 14px, 24px);
  letter-spacing: -0.03em; line-height: 1.3;
  margin: 0 0 24px;
}
.quiz__options {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.quiz__option {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 16px 20px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: var(--font-body); font-size: 15px;
  display: flex; gap: 14px; align-items: flex-start;
  transition: background 0.15s, border-color 0.15s;
}
.quiz__option:hover { background: var(--paper-soft); }
.quiz__option-mark {
  width: 18px; height: 18px;
  border: 2px solid var(--ink);
  background: var(--paper);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
}
.quiz__option.is-selected .quiz__option-mark {
  background: var(--ink);
}
.quiz__option.is-correct {
  background: var(--brand-mint);
  border-width: 3px;
}
.quiz__option.is-incorrect {
  background: var(--paper-soft);
  border-color: var(--ink-soft);
  color: var(--ink-soft);
}
.quiz__option.is-correct.is-selected .quiz__option-mark {
  background: var(--ink);
}
.quiz__option:disabled { cursor: default; }

.quiz__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.quiz__btn {
  border: 3px solid var(--ink);
  background: var(--accent-primary);
  padding: 12px 20px;
  cursor: pointer;
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}
.quiz__btn:disabled {
  background: var(--paper-soft); cursor: not-allowed; box-shadow: none;
}
.quiz__btn--ghost {
  background: var(--paper);
}
.quiz__explanation {
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--paper);
  border-left: 4px solid var(--accent-primary);
  font-family: var(--font-body); font-size: 14px;
  line-height: 1.55;
  display: none;
}
.quiz__explanation.is-visible { display: block; }

/* ----------------------------------------------------------------------------
   Module nav (prev / next)
   ---------------------------------------------------------------------------- */
.modnav {
  margin-top: 80px;
  border-top: 1px solid var(--ink);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.modnav a {
  text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.modnav__label {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.18em; color: var(--ink-soft);
  display: block; margin-bottom: 4px;
}
.modnav__title { max-width: 220px; }

/* ----------------------------------------------------------------------------
   Inline callouts / definitions
   ---------------------------------------------------------------------------- */
.callout {
  border-left: 4px solid var(--accent-primary);
  background: var(--paper-soft);
  padding: 16px 20px;
  font-family: var(--font-body); font-size: 14px;
  font-style: italic;
  color: var(--ink);
  margin: 32px 0;
}
.inline-def {
  border-bottom: 2px dotted var(--accent-secondary);
  cursor: help;
}

blockquote {
  margin: 24px 0;
  padding: 16px 24px;
  border-left: 4px solid var(--ink);
  font-family: var(--font-body); font-style: italic;
  font-size: 17px; line-height: 1.5;
  color: var(--ink);
}

/* ----------------------------------------------------------------------------
   Prose
   ---------------------------------------------------------------------------- */
.prose p {
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.7;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 720px;
}
.prose p:last-child { margin-bottom: 0; }
.prose ol, .prose ul {
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.7;
  color: var(--ink);
  margin: 0 0 24px;
  padding-left: 24px;
  max-width: 720px;
}
.prose ol li, .prose ul li { margin-bottom: 10px; }
.prose strong { font-weight: 700; }

/* ----------------------------------------------------------------------------
   Conclusion — journey map (sketch 008-C vertical timeline)
   ---------------------------------------------------------------------------- */
.journey {
  margin-top: 56px;
  position: relative;
  padding-left: 36px;
}
.journey::before {
  content: "";
  position: absolute;
  top: 12px; bottom: 12px; left: 12px;
  width: 2px; background: var(--ink);
}
.journey__node {
  position: relative;
  margin-bottom: 24px;
}
.journey__node::before {
  content: "";
  position: absolute;
  top: 28px; left: -30px;
  width: 14px; height: 14px;
  background: var(--paper); border: 2px solid var(--ink);
}
.journey__card {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 24px clamp(20px, 2vw, 32px);
}
.journey__card-eyebrow {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 8px;
}
.journey__card-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 0.6vw + 14px, 22px);
  letter-spacing: -0.04em; text-transform: uppercase;
  margin: 0 0 8px;
}
.journey__card-takeaway {
  font-family: var(--font-body); font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}
.journey__node--end::before {
  background: var(--accent-primary);
  border-color: var(--ink);
}
.journey__end {
  display: inline-flex; align-items: center; gap: 8px;
  border: 3px solid var(--ink);
  background: var(--accent-primary);
  padding: 12px 18px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  margin-top: 6px;
}

.conclusion {
  padding: 96px var(--pad-x) 64px;
}
.conclusion__inner { max-width: var(--maxw); margin: 0 auto; }
.conclusion__h2 { margin: 0 0 32px; max-width: 980px; }
.conclusion__closing {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 1vw + 16px, 28px);
  letter-spacing: -0.04em; line-height: 1.3;
  margin: 56px 0 0;
  max-width: 760px;
}
.conclusion__ctas {
  margin: 56px 0 0;
  display: flex; flex-wrap: wrap; gap: 14px;
}
.conclusion__cta {
  border: 3px solid var(--ink);
  background: var(--paper);
  padding: 14px 22px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  transition: background 0.15s;
}
.conclusion__cta:hover { background: var(--accent-primary); }
.conclusion__cta--primary {
  background: var(--accent-primary);
  box-shadow: var(--shadow-sm);
}

/* ----------------------------------------------------------------------------
   Small helpers
   ---------------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.kicker {
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
}

[id^="module-"], [id^="section-"], #conclusion {
  scroll-margin-top: 24px;
}

/* ----------------------------------------------------------------------------
   Transit zones — the jonstermonster walks a dashed path between modules
   Triggered by IntersectionObserver. Same animation runs whether the user
   scrolls into the transit manually or clicks "Next module" (smooth-scroll
   passes through the transit, IO fires).
   ---------------------------------------------------------------------------- */
.guide-page { position: relative; }

/* §2 transit redesign: taller zones, curving SVG path, scroll-bound monster
   - JS in script.js drives .transit__monster's left/top in % along the path
     using getPointAtLength() as a function of scroll progress through the
     transit zone. CSS sets up positioning + the wiggle wrap.
   - Path-wrap is wide enough that the S-curve has visible horizontal swing. */
.transit {
  position: relative;
  height: 800px;
  margin: 0;
  background: var(--paper);
  overflow: hidden;
}
@media (max-width: 767px) {
  .transit { height: 480px; }
}

.transit__path-wrap {
  position: absolute;
  top: 48px; bottom: 48px; left: 50%;
  width: min(240px, 60vw);
  transform: translateX(-50%);
}
@media (max-width: 767px) {
  .transit__path-wrap { top: 32px; bottom: 32px; width: min(160px, 70vw); }
}
.transit__path {
  width: 100%; height: 100%;
  display: block;
  overflow: visible;
}
.transit__path-line {
  stroke: rgb(3 5 16);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 8 6;
  vector-effect: non-scaling-stroke;
}
/* The path's visibility is driven by JS via clip-path inset() on the <svg>
   so the dashed line appears as the monster walks past it (and disappears
   when scrolling back up). See script.js transit handler. */
.transit__path {
  clip-path: inset(0 0 100% 0);  /* hidden until JS unclips */
}

.transit__monster {
  position: absolute;
  /* JS sets left + top in % each frame. Default to top of path so first paint
     doesn't show the monster at 0,0 of the wrap. No wiggle — the monster is
     static (relatively), translated to whichever path point JS commands. */
  left: 50%; top: 0%;
  width: 88px; height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  filter: drop-shadow(3px 3px 0 rgb(3 5 16 / 0.25));
  will-change: left, top;
}
@media (max-width: 767px) {
  .transit__monster { width: 60px; }
}
.transit.is-active .transit__monster {
  opacity: 1;
}

/* Reduced motion: monster parked at end of path; path fully revealed */
@media (prefers-reduced-motion: reduce) {
  .transit__monster, .transit.is-active .transit__monster {
    transition: none;
    opacity: 1;
    top: 100%;
    transform: translate(-50%, -100%);
  }
  .transit__path { clip-path: none; }
}

/* Next-module CTA hover stamp */
.modnav__next {
  text-align: right;
}
.modnav__next:hover .modnav__title {
  border-bottom: 2px solid var(--ink);
}

/* §9 V31a/V31b breathing room */
#section-3-1 .v31b { margin-top: 80px; }
#section-3-1 .v31a + .prose { margin-top: 80px; }


/* ----------------------------------------------------------------------------
   §5 — V11 hidden-impact pulsate (section 1.3)
   Slow opacity oscillation on the "hidden impact" cells (0.7 → 0.9).
   Stagger applied — reads as organic fadewave rather than uniform blink.
   prefers-reduced-motion: lands at static 0.8 with no animation.
   ---------------------------------------------------------------------------- */
.v11__hidden .v11__cell {
  animation: hidden-pulse 2.4s ease-in-out infinite alternate;
}
.v11__hidden .v11__cell:nth-child(2) { animation-delay: 0.4s; }
.v11__hidden .v11__cell:nth-child(3) { animation-delay: 0.8s; }

@keyframes hidden-pulse {
  from { opacity: 0.7; }
  to   { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .v11__hidden .v11__cell {
    animation: none;
    opacity: 0.8;
  }
}

/* ----------------------------------------------------------------------------
   §6 — Orphan-letter prose-wrap fix (section 1.4)
   The global .prose > p:first-of-type::first-letter rule in tailwind.input.css
   floats a large drop-cap, which causes text in the single short paragraph of
   section 1.4 to wrap around the float — "impact" lands in the indented gutter
   rather than at the full left margin. Fix: suppress the float for that section
   only, so the paragraph renders as a normal inline block. Drop-caps in other
   sections (1.1 "Acquisition", 3.4 "Sometimes", etc.) are unaffected.
   ---------------------------------------------------------------------------- */
#section-1-4 .prose > p:first-of-type::first-letter {
  float: none;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  font-weight: inherit;
  padding: 0;
  color: inherit;
  text-transform: none;
}

/* ----------------------------------------------------------------------------
   §11 — Floating module-nav dot rail (desktop ≥1024px) + keyboard [ / ]
   Rail is hidden by default and fades in once the user scrolls past the
   landing. Mobile hides it entirely (display: none also removes from a11y
   tree, which is appropriate — scrolling is the primary nav on phones).
   ---------------------------------------------------------------------------- */
.modnav-rail {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.modnav-rail.is-visible {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 1023px) {
  .modnav-rail { display: none; }
}
.modnav-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.modnav-rail__dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.modnav-rail__dot:hover,
.modnav-rail__dot:focus-visible {
  transform: scale(1.2);
  background: var(--paper-soft);
  outline: none;
}
.modnav-rail__dot.is-current {
  background: var(--accent-secondary);
  transform: scale(1.2);
}
@media (prefers-reduced-motion: reduce) {
  .modnav-rail,
  .modnav-rail__dot { transition: none; }
}