/* ============================================================
   The Happiness Divide — scroll story styles
   Grounded in & Venture design system.
   ============================================================ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Tweak-wired overrides (set by Tweaks.jsx via JS; safe fallbacks below) */
:root {
  --tw-page-margin: 10vw;
  --tw-section-pad: 160px;
  --tw-narrative-gap: 80vh;
  --tw-display-weight: 300;
  --tw-display-scale: 1;
  --tw-display-tracking: -0.025em;
  --tw-body-size: 16px;
  --tw-body-leading: 1.55;
  --tw-radius: 0px;
  --tw-rule-weight: 1px;
  --tw-reveal-dur: 900ms;
  --tw-bar-dur: 1200ms;
  --tw-pattern-opacity: 0.35;
  --tw-amp-opacity: 0.06;
  --tw-progress-display: block;
  --tw-masthead-display: flex;
  --tw-chapter-accent: var(--color-terracotta);
}

/* Wire page-margin */
section, .wrap, .hero, .chapter, .gender, .platforms, .trust, .trap, .closing, footer.site-foot, .masthead {
  --page-margin-min: var(--tw-page-margin);
}

/* Wire section padding */
.chapter { padding-top: calc(var(--tw-section-pad) + 0px); padding-bottom: calc(var(--tw-section-pad) * 0.5); }
.divide  { padding-bottom: var(--tw-section-pad); }
.platforms, .trust, .closing { padding-top: var(--tw-section-pad); padding-bottom: var(--tw-section-pad); }
.gender  { padding-top: var(--tw-section-pad); padding-bottom: var(--tw-section-pad); }
.trap    { padding-top: calc(var(--tw-section-pad) * 1.1); padding-bottom: calc(var(--tw-section-pad) * 1.1); }

/* Narrative gap */
.cliff__steps { gap: var(--tw-narrative-gap); }

/* Typography wiring */
body { font-size: var(--tw-body-size); line-height: var(--tw-body-leading); }
.hero__title, .chapter__title, .gender__copy h2, .trust__head h2, .trap h2, .closing h2 {
  font-weight: var(--tw-display-weight) !important;
  letter-spacing: var(--tw-display-tracking) !important;
  font-size: calc(clamp(40px, 6vw, 96px) * var(--tw-display-scale));
}
.hero__title { font-size: calc(clamp(56px, 10vw, 168px) * var(--tw-display-scale)) !important; }
.trap h2 { font-size: calc(clamp(44px, 6vw, 104px) * var(--tw-display-scale)) !important; }

/* Radius */
.cliff__vis, .flip-card, .platforms__col { border-radius: var(--tw-radius); }
.tweaks__pill, .tweaks__panel, .tw-preset, .tw-tab, .tw-sw, .tw-color { border-radius: var(--tw-radius); }

/* Rule weight */
.region-row:first-child, .divide__regions + *, .platforms__split, .gen-grid { border-top-width: var(--tw-rule-weight) !important; }
.platforms__split { border-bottom-width: var(--tw-rule-weight) !important; }

/* Reveal duration */
.reveal-up { transition-duration: var(--tw-reveal-dur); }
.region-row .bar .fill, .gauge .track .fill { transition-duration: var(--tw-bar-dur); }

/* Pattern + watermark */
.hero__pattern, .gender__pattern, .trap__pattern { opacity: var(--tw-pattern-opacity); }
.hero__amp { opacity: var(--tw-amp-opacity); }

/* Chrome visibility */
.progress-rail { display: var(--tw-progress-display); }
.masthead { display: var(--tw-masthead-display); }

/* Chapter accent colour */
.chapter__title strong, .trust__head h2 strong, .closing h2 strong, .trap h2 strong,
.gender__copy h2 strong { color: var(--tw-chapter-accent); }

/* Dark mode toggle (sweeping surface swap) */
html.tw-dark body { background: var(--color-cream); color: var(--color-charcoal); }
html.tw-dark .hero,
html.tw-dark .chapter,
html.tw-dark .divide,
html.tw-dark .cliff,
html.tw-dark .platforms,
html.tw-dark .trust,
html.tw-dark .closing { background: var(--color-cream); }
html.tw-dark .cliff__vis { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
html.tw-dark .platforms__col.sc { background: rgba(255,255,255,0.04); }
html.tw-dark .divide__copy p,
html.tw-dark .chapter__lede,
html.tw-dark .cliff__step p,
html.tw-dark .trust__head p,
html.tw-dark .closing__note p { color: var(--color-ink-60); }

/* Hero alignment variants */
body.tw-hero-center .hero { text-align: center; align-items: center; }
body.tw-hero-center .hero__title,
body.tw-hero-center .hero__lede { margin-left: auto; margin-right: auto; }
body.tw-hero-right .hero { text-align: right; align-items: flex-end; }
body.tw-hero-right .hero__title,
body.tw-hero-right .hero__lede { margin-left: auto; }

/* Density variants */
body.tw-compact p { line-height: 1.4; }
body.tw-compact .hero { min-height: 80vh; padding-top: 80px; padding-bottom: 40px; }
body.tw-roomy .hero { min-height: 110vh; }

/* Grain overlay */
body.tw-grain-on::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.4'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.06;
}
/* Disable grain in the new variants — it muddies the broadsheet/swiss looks */
html[data-variant="newsprint"] body.tw-grain-on::after,
html[data-variant="swiss"] body.tw-grain-on::after { display: none; }

/* =============================
   Tweaks panel (aggressive)
   ============================= */
.tweaks {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 400;
  font-family: "Inter", -apple-system, sans-serif;
  color: #1E1E1E;
}
.tweaks__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1E1E1E;
  color: #FDF7F1;
  border: none;
  padding: 12px 18px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.tweaks__pill:hover { background: var(--color-terracotta); }
.tweaks__pill-dot {
  width: 10px; height: 10px; border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
}
.tweaks.open .tweaks__pill { position: absolute; right: 0; top: -48px; }

.tweaks__panel {
  width: 360px;
  max-height: 80vh;
  background: #FDF7F1;
  color: #1E1E1E;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 20px 60px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tweaks__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.tweaks__h {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.tweaks__sh {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(30,30,30,0.55);
  margin-top: 3px;
}
.tweaks__reset {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.15);
  padding: 6px 12px;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  color: #1E1E1E;
}
.tweaks__reset:hover { background: #1E1E1E; color: #FDF7F1; }

.tw-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
}
.tw-preset {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.15);
  padding: 5px 10px;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #1E1E1E;
  cursor: pointer;
}
.tw-preset:hover { background: #1E1E1E; color: #FDF7F1; border-color: #1E1E1E; }

.tw-tabs {
  display: flex;
  padding: 0 8px;
  gap: 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.tw-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 10px 4px;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(30,30,30,0.5);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tw-tab:hover { color: #1E1E1E; }
.tw-tab.active {
  color: #1E1E1E;
  border-bottom-color: var(--color-terracotta);
}

.tw-scroll {
  overflow-y: auto;
  flex: 1;
  padding: 14px 20px 16px;
}
.tw-scroll::-webkit-scrollbar { width: 6px; }
.tw-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

.tw-group { margin-bottom: 18px; }
.tw-group__title {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.tw-group__body { display: flex; flex-direction: column; gap: 10px; }

.tw-row { display: flex; flex-direction: column; gap: 6px; }
.tw-row__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(30,30,30,0.6);
}
.tw-row__val {
  font-family: "Fira Code", monospace;
  font-size: 11px;
  color: #1E1E1E;
  letter-spacing: 0;
  text-transform: none;
}

.tw-slider {
  width: 100%;
  accent-color: var(--color-terracotta);
}
.tw-select {
  width: 100%;
  padding: 7px 8px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.15);
  color: #1E1E1E;
  cursor: pointer;
}
.tw-color {
  width: 100%;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(0,0,0,0.15);
  background: #FFFFFF;
  cursor: pointer;
}
.tw-swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.tw-sw {
  width: 22px; height: 22px;
  border: 1px solid rgba(0,0,0,0.15);
  cursor: pointer;
  padding: 0;
  transition: transform 120ms;
}
.tw-sw:hover { transform: scale(1.15); }
.tw-sw.active { outline: 2px solid #1E1E1E; outline-offset: 2px; }

.tw-seg {
  display: flex;
  border: 1px solid rgba(0,0,0,0.15);
  overflow: hidden;
}
.tw-seg__btn {
  flex: 1;
  background: #FFFFFF;
  border: none;
  padding: 6px 8px;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(30,30,30,0.6);
  cursor: pointer;
  border-right: 1px solid rgba(0,0,0,0.1);
}
.tw-seg__btn:last-child { border-right: none; }
.tw-seg__btn.active { background: #1E1E1E; color: #FDF7F1; }

.tw-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.15);
  padding: 5px 10px 5px 6px;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #1E1E1E;
}
.tw-toggle__dot {
  width: 10px; height: 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 999px;
}
.tw-toggle.on { background: #1E1E1E; color: #FDF7F1; border-color: #1E1E1E; }
.tw-toggle.on .tw-toggle__dot { background: var(--color-terracotta); }

.tweaks__foot {
  padding: 10px 20px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-family: "Inter", sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(30,30,30,0.5);
  background: rgba(0,0,0,0.02);
}
/* end tweaks panel */

body {
  background: var(--color-cream);
  overflow-x: hidden;
}

/* Reading progress rail — editorial hairline at the top */
.progress-rail {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  z-index: 100;
  pointer-events: none;
}
.progress-rail .fill {
  height: 100%;
  background: var(--color-terracotta);
  width: 0%;
  transition: width 80ms linear;
}

/* Fixed masthead */
.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 20px var(--page-margin-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-meta);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  pointer-events: none;
}
/* Difference blend ONLY in the editorial default — the variants set their own colors */
html[data-variant="editorial"] .masthead,
html:not([data-variant]) .masthead { mix-blend-mode: difference; }
.masthead .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-cream);
}
.masthead .brand svg {
  width: 20px; height: 20px;
}
.masthead .meta {
  color: var(--color-cream);
  opacity: 0.7;
}

/* Generic section */
section {
  position: relative;
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--page-margin-min);
}

/* ========== HERO ========== */
.hero {
  min-height: 100vh;
  background: var(--color-cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding: 120px var(--page-margin-min) 80px;
  overflow: hidden;
}
.hero__eyebrow {
  font-family: var(--font-meta);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-terracotta);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero__eyebrow .dash {
  width: 40px; height: 1px; background: var(--color-terracotta);
}
.hero__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(56px, 10vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--color-charcoal);
  max-width: 14ch;
}
.hero__title em {
  font-style: normal;
  font-weight: 700;
  color: var(--color-terracotta);
}
.hero__lede {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.45;
  color: var(--color-ink-60);
  max-width: 52ch;
  margin-top: 56px;
}
.hero__meta {
  position: absolute;
  bottom: 40px;
  left: var(--page-margin-min);
  right: var(--page-margin-min);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.hero__scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.hero__scroll .line {
  width: 1px;
  height: 44px;
  background: var(--color-charcoal);
  animation: scroll-line 1.8s var(--ease-standard) infinite;
  transform-origin: top;
}
@keyframes scroll-line {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.01% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.hero__pattern {
  position: absolute;
  bottom: -80px;
  left: 0;
  right: 0;
  height: 340px;
  opacity: 0.35;
  pointer-events: none;
}
.hero__pattern svg, .hero__pattern img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* Ampersand mark in hero */
.hero__amp {
  position: absolute;
  right: var(--page-margin-min);
  top: 18vh;
  width: min(34vw, 440px);
  opacity: 0.06;
  pointer-events: none;
  filter: grayscale(1) brightness(1.15) contrast(0.6);
  mix-blend-mode: multiply;
}
.hero__amp svg, .hero__amp img { width: 100%; height: auto; }

/* ========== ACT HEADER (chapter plate) ========== */
.chapter {
  padding: 160px var(--page-margin-min) 80px;
  background: var(--color-cream);
}
.chapter__num {
  font-family: var(--font-meta);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: 24px;
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.chapter__num .slash {
  color: var(--color-sand-deep);
}
.chapter__title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--color-charcoal);
  margin: 0;
  max-width: 18ch;
}
.chapter__title strong {
  font-weight: 700;
  color: var(--color-terracotta);
}
.chapter__lede {
  margin-top: 36px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-ink-60);
  max-width: 58ch;
  font-weight: 300;
}

/* ========== ACT 1 — THE DIVIDE ========== */
.divide {
  background: var(--color-cream);
  padding: 80px 0 160px;
}
.divide__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 96px;
  align-items: start;
}
.divide__copy h3 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-charcoal);
  margin: 0 0 24px;
}
.divide__copy p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-ink-60);
  max-width: none;
}
.divide__regions {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.region-row {
  display: grid;
  grid-template-columns: 1.5fr 3fr 0.8fr;
  gap: 16px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-ink-12);
  font-family: var(--font-sans);
}
.region-row:first-child {
  border-top: 2px solid var(--color-charcoal);
  padding-top: 16px;
}
.region-row .name {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-charcoal);
}
.region-row .name small {
  display: block;
  font-family: var(--font-meta);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sand-deep);
  margin-top: 4px;
}
.region-row .bar {
  position: relative;
  height: 2px;
  background: var(--color-sand);
}
.region-row .bar .fill {
  position: absolute;
  top: -5px;
  height: 12px;
  width: 0%;
  background: var(--color-terracotta);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.2s var(--ease-standard);
}
.region-row.reveal .bar .fill { transform: scaleX(1); }
.region-row .bar.negative .fill { background: var(--color-terracotta); }
.region-row .bar.positive .fill { background: var(--color-charcoal); }
.region-row .value {
  font-family: var(--font-meta);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-charcoal);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.region-row.negative .value { color: var(--color-terracotta); }

/* ========== ACT 2 — THE 7-HOUR CLIFF (scrolly sticky) ========== */
.cliff {
  background: var(--color-cream);
  position: relative;
}
.cliff__scrolly {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  padding: 120px var(--page-margin-min);
  align-items: start;
}
.cliff__steps {
  display: flex;
  flex-direction: column;
  gap: 80vh;
  padding: 30vh 0;
}
.cliff__step {
  min-height: 40vh;
}
.cliff__step .label {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: 20px;
}
.cliff__step h3 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(32px, 3.5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-charcoal);
  margin: 0 0 24px;
}
.cliff__step h3 strong { font-weight: 700; color: var(--color-terracotta); }
.cliff__step p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-ink-60);
}

.cliff__vis {
  position: sticky;
  top: 10vh;
  height: 80vh;
  background: var(--color-white);
  border: 1px solid var(--color-ink-12);
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
}
.cliff__vis-eyebrow {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-sand-deep);
  margin-bottom: 8px;
}
.cliff__vis-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  color: var(--color-charcoal);
  margin-bottom: 48px;
  line-height: 1.25;
}
.cliff__vis-chart {
  flex: 1;
  position: relative;
}
.cliff__n {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sand-deep);
  text-align: right;
}
.cliff__n strong {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-charcoal);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 2px;
}

/* ========== ACT 3 — GENDER GAP ========== */
.gender {
  background: var(--color-charcoal);
  color: var(--color-cream);
  padding: 160px var(--page-margin-min);
  position: relative;
  overflow: hidden;
}
.gender__pattern {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 280px;
  opacity: 0.12;
  pointer-events: none;
}
.gender__pattern img { width: 100%; height: 100%; object-fit: cover; }
.gender__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.gender__copy .eyebrow {
  color: var(--color-terracotta-soft);
  margin-bottom: 24px;
}
.gender__copy h2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(44px, 5vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--color-cream);
  margin: 0 0 32px;
}
.gender__copy h2 strong {
  font-weight: 700;
  color: var(--color-terracotta-soft);
}
.gender__copy p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-cream-on-dark-70);
  max-width: 46ch;
}

.gauge {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 36px;
}
.gauge .label {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-cream-on-dark-70);
  text-align: right;
}
.gauge .label strong {
  display: block;
  color: var(--color-cream);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 2px;
}
.gauge .track {
  position: relative;
  height: 56px;
  background: rgba(253,247,241,0.08);
}
.gauge .track .fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--color-terracotta);
  width: 0%;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.4s var(--ease-standard), width 1.4s var(--ease-standard);
}
.gauge.reveal .track .fill { transform: scaleX(1); }
.gauge .track .val {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-cream);
  font-variant-numeric: tabular-nums;
}
.gauge.light .track .fill { background: var(--color-sand); }
.gauge.light .track .val { color: var(--color-charcoal); }

.gap-callout {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(253,247,241,0.18);
  display: flex;
  gap: 32px;
  align-items: baseline;
}
.gap-callout .num {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 88px;
  line-height: 1;
  color: var(--color-terracotta-soft);
  letter-spacing: -0.03em;
}
.gap-callout .txt {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-cream-on-dark-70);
  max-width: 28ch;
}

/* ========== ACT 4 — TWO SPECIES OF PLATFORM ========== */
.platforms {
  background: var(--color-cream);
  padding: 160px var(--page-margin-min);
}
.platforms__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 80px;
  border-top: 2px solid var(--color-charcoal);
  border-bottom: 2px solid var(--color-charcoal);
}
.platforms__col {
  padding: 56px 48px;
  position: relative;
  min-height: 520px;
}
.platforms__col.sc { background: var(--color-white); }
.platforms__col.ac { background: var(--color-terracotta); color: var(--color-cream); border-left: 2px solid var(--color-charcoal); }
.platforms__col .tag {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-sand-deep);
  margin-bottom: 14px;
}
.platforms__col.ac .tag { color: rgba(253,247,241,0.7); }
.platforms__col h3 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.platforms__col.sc h3 { color: var(--color-charcoal); }
.platforms__col.sc h3 strong { color: var(--color-charcoal); font-weight: 700; }
.platforms__col.ac h3 { color: var(--color-cream); }
.platforms__col.ac h3 strong { color: var(--color-cream); font-weight: 700; }
.platforms__col p {
  font-size: 16px;
  line-height: 1.55;
  max-width: 38ch;
}
.platforms__col.sc p { color: var(--color-ink-60); }
.platforms__col.ac p { color: var(--color-cream-on-dark-70); }

.platforms__list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.platforms__list .item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--color-ink-12);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
}
.platforms__col.ac .item { border-top-color: rgba(253,247,241,0.2); }
.platforms__list .item .meta {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--color-sand-deep);
}
.platforms__col.ac .item .meta { color: rgba(253,247,241,0.7); }

.platforms__verdict {
  position: absolute;
  bottom: 24px;
  left: 48px;
  right: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--color-ink-12);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.platforms__col.sc .platforms__verdict { color: var(--color-charcoal); border-top-color: var(--color-charcoal); }
.platforms__col.ac .platforms__verdict { color: var(--color-cream); border-top-color: var(--color-cream); }
.platforms__verdict .arrow { color: inherit; margin-right: 10px; font-family: var(--font-meta); }

/* ========== ACT 5 — TRUST / GENERATION ========== */
.trust {
  background: var(--color-cream);
  padding: 160px var(--page-margin-min);
}
.trust__head {
  max-width: 64ch;
  margin-bottom: 96px;
}
.trust__head h2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--color-charcoal);
  margin: 0 0 28px;
}
.trust__head h2 strong { font-weight: 700; color: var(--color-terracotta); }
.trust__head p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-ink-60);
  max-width: 54ch;
}

.gen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 2px solid var(--color-charcoal);
}
.gen-cell {
  padding: 48px 40px 56px;
  border-right: 1px solid var(--color-ink-12);
  position: relative;
  min-height: 380px;
}
.gen-cell:last-child { border-right: none; }
.gen-cell .tag {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-sand-deep);
  margin-bottom: 4px;
}
.gen-cell h3 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 40px;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--color-charcoal);
  margin: 0 0 32px;
}
.gen-cell h3 strong { font-weight: 700; }
.gen-cell .arrow-chart {
  height: 120px;
  position: relative;
  margin-bottom: 24px;
}
.gen-cell .arrow-chart svg { width: 100%; height: 100%; }
.gen-cell .arrow-chart .path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 1.6s var(--ease-standard);
}
.gen-cell.reveal .arrow-chart .path { stroke-dashoffset: 0; }
.gen-cell .delta {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.gen-cell.neg .delta { color: var(--color-terracotta); }
.gen-cell.midneg .delta { color: var(--color-sand-deep); }
.gen-cell.pos .delta { color: var(--color-charcoal); }
.gen-cell .note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-ink-60);
  max-width: 32ch;
}

.trust__sub {
  margin-top: 96px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding-top: 64px;
  border-top: 1px solid var(--color-ink-12);
}
.sub-stat .n {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(48px, 4.5vw, 72px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--color-terracotta);
  margin-bottom: 16px;
}
.sub-stat .n strong { font-weight: 700; }
.sub-stat .lbl {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-ink-60);
  max-width: 28ch;
}

/* ========== ACT 6 — COLLECTIVE TRAP ========== */
.trap {
  background: var(--color-terracotta);
  color: var(--color-cream);
  padding: 180px var(--page-margin-min);
  position: relative;
  overflow: hidden;
}
.trap__pattern {
  position: absolute;
  top: -40px; left: 0; right: 0;
  height: 260px;
  opacity: 0.14;
  pointer-events: none;
}
.trap__pattern img { width: 100%; height: 100%; object-fit: cover; }
.trap .wrap { position: relative; z-index: 2; }
.trap__kicker {
  font-family: var(--font-meta);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(253,247,241,0.75);
  margin-bottom: 28px;
}
.trap h2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(44px, 6vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--color-cream);
  margin: 0 0 64px;
  max-width: 20ch;
}
.trap h2 strong { font-weight: 700; }

.trap__flip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-top: 80px;
  align-items: start;
}
.flip-card {
  border: 1px solid rgba(253,247,241,0.22);
  padding: 40px 40px 48px;
  min-height: 340px;
  position: relative;
}
.flip-card .scenario {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(253,247,241,0.7);
  margin-bottom: 20px;
}
.flip-card h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: var(--color-cream);
  margin: 0 0 36px;
  max-width: 24ch;
}
.flip-card .price {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(64px, 8vw, 136px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-cream);
  margin-bottom: 20px;
}
.flip-card .price strong { font-weight: 700; }
.flip-card .price .sign { font-weight: 300; opacity: 0.8; }
.flip-card .caption {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(253,247,241,0.8);
  max-width: 32ch;
}
.flip-card.pay .price {
  color: var(--color-cream);
}
.flip-card.pay::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  border: 2px solid var(--color-cream);
  pointer-events: none;
}

.trap__quote {
  margin-top: 96px;
  padding-top: 48px;
  border-top: 1px solid rgba(253,247,241,0.3);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
}
.trap__quote .attr {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(253,247,241,0.7);
}
.trap__quote blockquote {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-cream);
  margin: 0;
  max-width: 40ch;
}

/* ========== CLOSING ========== */
.closing {
  background: var(--color-cream);
  padding: 180px var(--page-margin-min) 120px;
}
.closing__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 96px;
  align-items: start;
}
.closing__eyebrow {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: 28px;
}
.closing h2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-charcoal);
  margin: 0;
}
.closing h2 strong { font-weight: 700; color: var(--color-terracotta); }
.closing__notes {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.closing__note {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-ink-12);
}
.closing__note:last-child { border-bottom: none; }
.closing__note .n {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: 12px;
}
.closing__note h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: var(--color-charcoal);
  margin: 0 0 12px;
}
.closing__note p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink-60);
  max-width: 58ch;
}

/* ========== FOOTER ========== */
footer.site-foot {
  background: var(--color-charcoal);
  color: var(--color-cream);
  padding: 96px var(--page-margin-min) 48px;
  position: relative;
}
footer.site-foot .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 64px;
  margin-bottom: 96px;
}
footer.site-foot h6 {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(253,247,241,0.5);
  margin: 0 0 16px;
}
footer.site-foot p, footer.site-foot a {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-cream-on-dark-70);
  margin: 0 0 8px;
  text-decoration: none;
}
footer.site-foot .bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(253,247,241,0.2);
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(253,247,241,0.5);
}

/* ========== Reveal base ========== */
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease-standard), transform 900ms var(--ease-standard);
}
.reveal-up.in { opacity: 1; transform: translateY(0); }

.reveal-up.delay-1 { transition-delay: 100ms; }
.reveal-up.delay-2 { transition-delay: 200ms; }
.reveal-up.delay-3 { transition-delay: 300ms; }
.reveal-up.delay-4 { transition-delay: 400ms; }

/* ========== Responsive ========== */
@media (max-width: 980px) {
  :root { --page-margin-min: 6vw; }
  .divide__grid,
  .cliff__scrolly,
  .gender__grid,
  .trust__sub,
  .gen-grid,
  .trap__flip,
  .trap__quote,
  .closing__grid,
  footer.site-foot .grid { grid-template-columns: 1fr; gap: 48px; }
  .platforms__split { grid-template-columns: 1fr; }
  .platforms__col.ac { border-left: none; border-top: 2px solid var(--color-charcoal); }
  .cliff__vis { position: relative; top: auto; height: 420px; }
  .cliff__steps { gap: 30vh; padding: 40px 0; }
  .gen-cell { border-right: none; border-bottom: 1px solid var(--color-ink-12); }
  .hero__amp { display: none; }
}

/* ========== Phone breakpoint ========== */
@media (max-width: 600px) {
  :root {
    --tw-section-pad: 96px;
    --tw-narrative-gap: 60vh;
    --tw-page-margin: 6vw;
  }

  /* Tighten outer rhythm */
  .chapter { padding-top: 80px; padding-bottom: 48px; }
  .divide  { padding-bottom: 80px; }
  .platforms, .trust, .closing,
  .gender, .trap { padding-top: 80px; padding-bottom: 80px; }

  /* Hero — keep dramatic but breathe on phones */
  .hero { min-height: 92vh; padding-top: 96px; padding-bottom: 48px; }
  .hero__title { font-size: clamp(48px, 14vw, 84px) !important; line-height: 0.96 !important; }
  .hero__lede { font-size: 17px; max-width: 100%; }
  .hero__eyebrow { font-size: 10px; }
  .hero__meta { font-size: 10px; }

  /* Section heads */
  .chapter__title,
  .gender__copy h2,
  .trust__head h2,
  .trap h2,
  .closing h2 { font-size: clamp(34px, 9vw, 56px) !important; line-height: 1.05 !important; }

  /* Cliff chart fits a phone viewport */
  .cliff__vis { height: 320px; padding: 16px; }
  .cliff__step h3 { font-size: 22px; }
  .cliff__step p { font-size: 15px; }

  /* Platforms split — already 1col, tune spacing */
  .platforms__col { padding: 40px 24px; }
  .platforms__col h3 { font-size: 26px; }
  .platforms__col.ac { border-top-width: 2px; }

  /* Generations grid — reduce vertical bulk per cell */
  .gen-cell { padding: 32px 0; }

  /* Trap */
  .trap__quote { font-size: 22px; line-height: 1.35; }

  /* Footer compactness */
  footer.site-foot { padding: 64px 0 48px; }

  /* Masthead — slim on phone */
  .masthead { padding: 14px 6vw; font-size: 10px; }
  .masthead .meta { display: none; }

  /* Tweaks panel — fit the viewport */
  .tweaks { right: 12px; bottom: 12px; left: 12px; }
  .tweaks__pill {
    position: relative;
    margin-left: auto;
    padding: 10px 14px;
    font-size: 10px;
  }
  .tweaks__panel {
    width: 100%;
    max-height: 70vh;
  }
  .tweaks.open .tweaks__pill { top: -44px; right: 0; }

  /* Progress rail thinner */
  .progress-rail { height: 2px; }

  /* Hide decorative ampersand watermark and reduce pattern noise */
  .hero__amp { display: none; }
  .hero__pattern,
  .gender__pattern,
  .trap__pattern { opacity: calc(var(--tw-pattern-opacity) * 0.6); }
}