/* ══════════════════════════════════════════════════════════════════════
   MADISON V2 · layout & components
   ══════════════════════════════════════════════════════════════════════ */

/* ─── shared bits ──────────────────────────────────────────────────── */
.section { padding: var(--section-y) 0; position: relative; }
.section--low { background: var(--surface-container-low); }
.no-grain .grain::after { display: none; }
.motion-restrained .reveal { transition-duration: 480ms; }

.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary-container); flex: none;
  box-shadow: 0 0 0 0 rgba(255,190,56,.55);
  animation: pulseDot 2s var(--ease-io) infinite;
}
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(255,190,56,.5); }
  70% { box-shadow: 0 0 0 9px rgba(255,190,56,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,190,56,0); }
}

.slot-shimmer {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.10) 48%, transparent 64%);
  transform: translateX(-120%);
  animation: sweep 5s var(--ease-io) infinite;
}
.slot-shimmer--slow { animation-duration: 8s; }
@keyframes sweep { 0%,12% { transform: translateX(-120%); } 60%,100% { transform: translateX(120%); } }

/* ─── email capture ─────────────────────────────────────────────────── */
.email-cap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; max-width: 520px; }
.email-cap.is-center { justify-content: center; margin: 0 auto; flex-wrap: nowrap; max-width: 560px; }
@media (max-width: 600px) {
  .email-cap.is-center { flex-wrap: wrap; }
  .email-cap.is-center .btn { width: 100%; justify-content: center; }
}
.email-cap__input {
  flex: 1 1 240px; min-width: 220px; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 500;
  padding: 1rem 1.4rem; border-radius: var(--r-xl); border: 0; color: var(--on-surface);
  background: var(--surface-container-lowest);
  box-shadow: inset 0 0 0 1px var(--ghost-border);
  transition: box-shadow var(--dur-2) var(--ease-out);
}
.email-cap__input::placeholder { color: var(--on-surface-faint); }
.email-cap__input:focus { outline: none; box-shadow: inset 0 0 0 1.5px rgba(130,118,96,.4), 0 0 0 4px var(--primary-fixed); }
.email-cap--dark .email-cap__input {
  background: rgba(255,255,255,.10); color: var(--on-ink);
  box-shadow: inset 0 0 0 1px rgba(246,241,230,.24); backdrop-filter: blur(8px);
}
.email-cap--dark .email-cap__input::placeholder { color: var(--on-ink-variant); }
.email-cap--dark .email-cap__input:focus { box-shadow: inset 0 0 0 1.5px rgba(255,222,168,.6), 0 0 0 4px rgba(255,190,56,.28); }
.email-cap .btn { flex: none; }
.email-cap__done {
  display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 650;
  color: var(--primary); padding: 0.4rem 0;
}
.email-cap__done.is-dark { color: var(--primary-container); }

/* ════════════════ NAV ════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), backdrop-filter var(--dur-2);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; gap: var(--sp-8);
}
.nav__links { display: flex; gap: var(--sp-8); flex: 1; justify-content: center; }
.nav__link {
  font-size: var(--fs-label); font-weight: 550; color: var(--on-surface-variant);
  transition: color var(--dur-1); position: relative;
}
.nav__link:hover { color: var(--on-surface-strong); }
.nav--ink .nav__link { color: var(--on-ink-variant); }
.nav--ink .nav__link:hover { color: var(--on-ink); }
.nav--solid {
  background: rgba(249,249,247,.78);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(26,28,27,.06), 0 12px 30px -24px rgba(26,28,27,.4);
}
.wordmark { transition: color var(--dur-2); }

/* ── mobile hamburger + dropdown menu (revealed ≤960px, see RESPONSIVE) ─ */
.nav__toggle {
  display: none; position: relative; flex: none;
  width: 44px; height: 44px; margin-left: var(--sp-2);
  align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.nav--ink .nav__toggle { color: var(--on-ink); }
.nav--solid .nav__toggle { color: var(--on-surface-strong); }
.nav.is-menu-open .nav__toggle { color: var(--on-surface-strong); }
.nav__toggle-bars, .nav__toggle-bars::before, .nav__toggle-bars::after {
  content: ""; display: block; position: absolute; left: 11px;
  width: 22px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1), background var(--dur-1);
}
.nav__toggle-bars { top: 50%; transform: translateY(-50%); }
.nav__toggle-bars::before { top: -7px; }
.nav__toggle-bars::after  { top: 7px; }
.nav.is-menu-open .nav__toggle-bars { background: transparent; }
.nav.is-menu-open .nav__toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav.is-menu-open .nav__toggle-bars::after  { transform: translateY(-7px) rotate(-45deg); }

.nav__menu {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4) var(--gutter) var(--sp-6);
  background: rgba(249,249,247,.97);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 20px 44px -22px rgba(26,28,27,.5), 0 1px 0 rgba(26,28,27,.06);
  border-bottom-left-radius: var(--r-2xl); border-bottom-right-radius: var(--r-2xl);
  opacity: 0; transform: translateY(-12px); pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.nav.is-menu-open .nav__menu { opacity: 1; transform: none; pointer-events: auto; }
.nav__menu-link {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  color: var(--on-surface-strong); padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-md); transition: background var(--dur-1);
}
.nav__menu-link:hover, .nav__menu-link:focus-visible { background: var(--surface-container); }
.nav__menu-cta { margin-top: var(--sp-3); width: 100%; justify-content: center; }

.nav__backdrop {
  display: none; position: fixed; inset: 0; z-index: -1;
  background: rgba(20,17,14,.34); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out);
}
.nav.is-menu-open .nav__backdrop { opacity: 1; pointer-events: auto; }

/* ════════════════ HERO ════════════════ */
.hero { position: relative; overflow: hidden; }
.hero__title {
  font-size: var(--fs-hero); line-height: 1.0; letter-spacing: var(--tracking-display);
  font-weight: 800; color: var(--on-surface-strong); margin: 0;
}
.hero__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* A · Full-screen reel (default) — centered headline + email capture */
.hero--reelfull {
  position: relative; min-height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--surface-ink);
}
.hero__center { position: relative; z-index: 2; width: 100%; max-width: 1000px; padding: 100px var(--gutter) 88px; }
.hero--reelfull .hero__title { margin: 0 auto; }
.hero__video-grad--center {
  background:
    radial-gradient(78% 78% at 50% 42%, rgba(15,12,8,.42) 0%, rgba(15,12,8,.74) 100%),
    linear-gradient(180deg, rgba(15,12,8,.72) 0%, rgba(15,12,8,.5) 38%, rgba(15,12,8,.88) 100%);
}
.hero__email { margin-top: var(--sp-10); }
.hero--reelfull .hero__email { display: flex; justify-content: center; }

/* B · Cinematic Reel */
.hero--cinematic { min-height: 100vh; display: flex; align-items: center; background: var(--surface-ink); }
.hero__video {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(120% 90% at 70% 10%, #34291a 0%, #1c1813 55%, #131009 100%);
}
.hero__video-grad {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(15,12,8,.92) 0%, rgba(15,12,8,.62) 42%, rgba(15,12,8,.30) 100%),
              radial-gradient(80% 60% at 80% 30%, rgba(255,190,56,.12), transparent 70%);
}
.hero__filechip {
  position: absolute; right: 22px; bottom: 22px; z-index: 2;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--on-ink-variant); background: rgba(255,255,255,.06);
  padding: 6px 12px; border-radius: var(--r-pill); backdrop-filter: blur(6px);
}
.hero__cine-inner { position: relative; z-index: 2; width: 100%; padding-top: 76px; }
.hero--cinematic .hero__copy, .hero__cine-inner > .reveal { max-width: 720px; }
.hero__scroll-hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2;
  color: var(--on-ink-variant); animation: bob 2.4s var(--ease-io) infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* C · Editorial Split */
.hero--split { min-height: 100vh; }
.hero__split-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 100vh; }
.hero__split-copy { display: flex; align-items: center; padding: calc(76px + 40px) 0 60px; }
.hero__split-media { position: relative; padding: 18px 18px 18px 0; }
.hero__split-media > .video-slot { height: 100%; }
.hero__split-media::before {
  content: ""; position: absolute; inset: 18px 18px 18px 0; z-index: 2; pointer-events: none;
  border-radius: 0; box-shadow: inset 0 0 0 2px rgba(255,190,56,.35);
}

/* ════════════════ STORIES ════════════════ */
.stories__grid {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px, 6vw, 96px); align-items: center;
}
.stories__title { font-size: var(--fs-display); margin: var(--sp-5) 0 var(--sp-6); }
.stories__body { font-size: var(--fs-body-lg); line-height: 1.6; color: var(--on-surface-variant); max-width: 30ch; }
.stories__media { position: relative; }
.stories__reel { padding: 14px; }
.stories__sticker {
  position: absolute; right: -14px; top: 26px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-container-lowest); color: var(--on-surface);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; font-weight: 500;
  padding: 9px 14px; border-radius: var(--r-pill); box-shadow: var(--shadow-card);
}

/* ════════════════ METHOD ════════════════ */
.method__head { max-width: 760px; margin: 0 auto var(--sp-24); text-align: center; }
.method__title { font-size: var(--fs-display); }
.method__intro {
  margin-top: var(--sp-6); margin-left: auto; margin-right: auto; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.32; letter-spacing: var(--tracking-tight);
  color: var(--on-surface-variant); max-width: 30ch;
}
.method__pillars { display: flex; flex-direction: column; gap: clamp(80px, 11vw, 160px); }
.pillar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.pillar--flip .pillar__media { order: 2; }
.pillar__copy { max-width: 460px; }
.pillar--flip .pillar__copy { justify-self: end; }
.pillar__num {
  font-family: var(--font-mono); font-weight: 600; font-size: 15px;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  color: var(--on-primary-container); background: var(--gold-grad);
  box-shadow: 0 14px 30px -10px rgba(255,190,56,.6), inset 0 1px 0 rgba(255,255,255,.4);
  margin-bottom: var(--sp-6);
}
.pillar__title { font-size: var(--fs-headline); margin-bottom: var(--sp-5); }
.pillar__body { font-size: var(--fs-body-lg); line-height: 1.62; color: var(--on-surface-variant); }

/* infographic frame */
.ig {
  position: relative;
  background: var(--surface-container-lowest);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
  padding: var(--sp-10) var(--sp-8) var(--sp-8);
}
.ig__caption {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  font-size: var(--fs-label); color: var(--on-surface-variant); text-align: center;
  border-top: 1px solid var(--ghost-border);
}
.const .ig__caption { position: relative; z-index: 4; }
.ig__caption strong { color: var(--on-surface-strong); font-weight: 700; }

/* ── constellation ── */
.const__stage { position: relative; height: 380px; }
.const__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Dash is set well above the rendered line length: with non-scaling-stroke
   under the preserveAspectRatio="none" stretch, a dash of 100 (== pathLength)
   falls short of the chip and leaves a white gap, so use 280 to cover fully. */
.const__line {
  stroke: var(--primary-fixed-dim); stroke-width: 1.4; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-dasharray: 280; stroke-dashoffset: 280; opacity: 0;
}
.reveal.is-in .const__line { animation: constDraw 1000ms var(--ease-out) forwards; }
@keyframes constDraw { 0% { stroke-dashoffset: 280; opacity: 0; } 30% { opacity: .9; } 100% { stroke-dashoffset: 0; opacity: .85; } }

.const__chip {
  position: absolute; transform: translate(-50%,-50%) scale(.8); opacity: 0;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
  padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--surface-container-lowest); color: var(--on-surface-strong);
  box-shadow: inset 0 0 0 1px var(--primary-fixed), 0 3px 10px -8px rgba(124,88,0,.3);
}
.reveal.is-in .const__chip { animation: chipIn 560ms var(--ease-out) var(--d) forwards; }
@keyframes chipIn { to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }

/* The core box is sized to the frame only, so its centre lands exactly on the
   point (50,50) where every line converges. The label is taken out of flow so
   it can't push the bulb off that centre. */
.const__core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3;
}
.const__core-glow {
  position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255,190,56,.5) 0%, rgba(255,190,56,0) 60%);
  animation: coreBreath 3.4s var(--ease-io) infinite;
}
@keyframes coreBreath { 0%,100% { transform: scale(.92); opacity: .8; } 50% { transform: scale(1.1); opacity: 1; } }
.const__core-frame {
  width: 78px; height: 78px; border-radius: 22px; display: grid; place-items: center;
  background: var(--gold-grad); color: var(--on-primary-container); position: relative;
  box-shadow: var(--gold-glow), inset 0 2px 0 rgba(255,255,255,.45);
}
.const__core-label {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 10px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--primary); white-space: nowrap;
}

/* ── two paths ── */
.paths { display: flex; flex-direction: column; gap: var(--sp-8); }
.paths__lane { padding: var(--sp-5) 0; }
.paths__lane--diy { padding: var(--sp-6) var(--sp-2) var(--sp-8); }
.paths__lane-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--on-surface-faint); margin-bottom: var(--sp-6);
}
.paths__lane-label--gold { color: var(--primary); }
.paths__diy-track { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 6px; }
.paths__node {
  font-size: 12.5px; font-weight: 550; color: var(--on-secondary-container);
  background: var(--surface-container); padding: 7px 12px; border-radius: var(--r-md);
}
.paths__node.is-up { transform: translateY(-4px); }
.paths__node.is-down { transform: translateY(4px); }
.paths__arrow { color: var(--on-surface-faint); flex: none; }
.paths__end--meh {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--on-secondary-container);
  background: var(--surface-container-high); padding: 8px 14px; border-radius: var(--r-pill);
  margin-left: 4px;
}
.paths__lane--madison {
  background: linear-gradient(120deg, rgba(255,222,168,.30), rgba(255,190,56,.12));
  border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-6) var(--sp-8);
}
.paths__mad-track { display: flex; align-items: center; gap: var(--sp-3); }
.paths__mad-node {
  font-size: 14px; font-weight: 650; color: var(--on-surface-strong);
  background: var(--surface-container-lowest); padding: 12px 18px; border-radius: var(--r-lg);
  box-shadow: 0 8px 20px -12px rgba(124,88,0,.4); white-space: nowrap;
}
.paths__mad-node--gold {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold-grad); color: var(--on-primary-container);
  box-shadow: 0 14px 30px -12px rgba(255,190,56,.7);
}
.paths__mad-line { position: relative; flex: 1; height: 3px; border-radius: 3px; background: var(--primary-fixed); overflow: visible; min-width: 40px; }
.paths__mad-dot {
  position: absolute; top: 50%; left: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--primary-container); transform: translate(-50%,-50%);
  box-shadow: 0 0 0 4px rgba(255,190,56,.25);
}
.reveal.is-in .paths__mad-dot { animation: travel 2.4s var(--ease-io) infinite; }
@keyframes travel { 0% { left: 0; } 60%,100% { left: 100%; } }

/* ── effect chart ── */
.chart__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-10); }
.chart__title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--on-surface-strong); }
.chart__sub { font-size: 13px; color: var(--on-surface-faint); margin-top: 3px; }
.seg { display: inline-flex; background: var(--surface-container); border-radius: var(--r-pill); padding: 4px; gap: 2px; }
.seg__btn {
  border: 0; background: transparent; font-family: var(--font-body); font-weight: 600; font-size: 13px;
  color: var(--on-surface-variant); padding: 8px 16px; border-radius: var(--r-pill); transition: all var(--dur-2) var(--ease-out);
}
.seg__btn.is-active { background: var(--surface-container-lowest); color: var(--on-surface-strong); box-shadow: 0 4px 12px -4px rgba(26,28,27,.18); }
.chart__plot { position: relative; height: 280px; margin-bottom: 64px; }
.chart__grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--ghost-border); }
.chart__bars { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(28px, 8%, 72px); height: 100%; }
.bar-col { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; width: clamp(72px, 16%, 96px); }
.bar-val { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--on-secondary-container); margin-bottom: 10px; }
.bar-val--gold { color: var(--primary); }
.bar { width: 100%; border-radius: 16px 16px 6px 6px; transition: height 1000ms var(--ease-out); min-height: 4px; }
.bar--rational { background: var(--surface-container-highest); box-shadow: inset 0 0 0 1px var(--ghost-border); }
.bar--emotional { background: var(--gold-grad); box-shadow: 0 16px 36px -14px rgba(255,190,56,.7), inset 0 2px 0 rgba(255,255,255,.4); }
.bar-label { position: absolute; top: 100%; margin-top: 14px; text-align: center; font-size: 13px; font-weight: 650; color: var(--on-surface); line-height: 1.2; }
.bar-label span { font-weight: 500; color: var(--on-surface-faint); }
.chart__multiple { align-self: center; }
.chart__multiple span {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--primary);
  background: var(--primary-fixed); padding: 6px 12px; border-radius: var(--r-pill); white-space: nowrap;
}
.chart__source { font-size: 12px; color: var(--on-surface-faint); }
.chart__source em { font-style: italic; }

/* ════════════════ HOW IT WORKS ════════════════ */
.how__head { max-width: 820px; margin-bottom: var(--sp-20); }
.how__title { font-size: var(--fs-display); margin-top: var(--sp-5); }
.how__flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.how__line { position: absolute; top: 86px; left: 12%; right: 12%; height: 2px; background: var(--surface-container-highest); border-radius: 2px; }
.how__line-fill { position: absolute; inset: 0; width: 0; background: var(--gold-grad); border-radius: 2px; transition: width 1400ms var(--ease-out); }
.how__line-fill::after {
  content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  border-left: 8px solid var(--primary-container); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.reveal.is-in .how__line-fill, .how__flow.is-in .how__line-fill { width: 100%; }
.step { position: relative; text-align: center; padding: 0 var(--sp-2); }
.step__bubble {
  font-family: var(--font-mono); font-weight: 600; font-size: 13px;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto var(--sp-5);
  color: var(--on-primary-container); background: var(--gold-grad); position: relative; z-index: 2;
  box-shadow: 0 10px 24px -8px rgba(255,190,56,.7), 0 0 0 6px var(--surface);
}
.step__icon { width: 56px; height: 56px; border-radius: var(--r-lg); display: grid; place-items: center; margin: 0 auto var(--sp-5); background: var(--surface-container-low); color: var(--primary); }
.step__label { font-size: var(--fs-title); margin-bottom: var(--sp-3); }
.step__body { font-size: var(--fs-label); color: var(--on-surface-variant); line-height: 1.5; max-width: 26ch; margin: 0 auto; }
.how__closing { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: var(--tracking-tight); margin-top: var(--sp-20); color: var(--on-surface-strong); }

/* ════════════════ PROOF ════════════════ */
.proof__head { margin-bottom: var(--sp-16); }
.proof__title { font-size: var(--fs-display); margin-top: var(--sp-5); }
.proof__pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-6); align-items: center; }
.proof__col { position: relative; }
.proof__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-bottom: var(--sp-4); }
.proof__tag--before { color: var(--on-surface-faint); }
.proof__tag--after { color: var(--primary); }
.proof__after { padding: 12px; }
.proof__vs { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-container-lowest); color: var(--primary); box-shadow: var(--shadow-card); margin-top: 22px; }
.proof__note { margin-top: var(--sp-10); text-align: center; font-size: var(--fs-label); color: var(--on-surface-faint); max-width: 56ch; margin-left: auto; margin-right: auto; }

/* ════════════════ FINAL CTA ════════════════ */
.final { position: relative; overflow: hidden; background: var(--surface-ink); color: var(--on-ink); padding: clamp(96px, 13vw, 168px) 0; text-align: center; }
.final__glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 70% at 50% 0%, rgba(255,190,56,.20) 0%, transparent 58%),
             radial-gradient(40% 50% at 50% 110%, rgba(255,190,56,.10), transparent 60%); }
.final__inner { position: relative; z-index: 1; }
.final__title { font-size: clamp(2.2rem, 5vw, 4rem); color: var(--on-ink); letter-spacing: var(--tracking-display); max-width: 18ch; margin: 0 auto; }
/* italic accent ("share") leans past its advance width; right padding extends
   the background-clip:text paint box so the trailing stroke isn't clipped, and
   the negative margin cancels it so spacing before the following comma is
   unchanged. Same technique as .hero__title .italic-accent above. */
.final__title .italic-accent {
  font-style: italic;
  display: inline-block;
  padding-right: 0.3em;
  margin-right: -0.3em;
}
.final__sub { font-size: var(--fs-body-lg); color: var(--on-ink-variant); margin: var(--sp-6) auto 0; max-width: 44ch; }
.final__cta { margin-top: var(--sp-10); display: flex; justify-content: center; }
.final__meta { margin-top: var(--sp-8); font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-variant); }

/* ════════════════ FOOTER ════════════════ */
.footer { background: var(--surface-container-highest); padding: var(--sp-20) 0 var(--sp-10); }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-12); }
.footer__brand { max-width: 360px; }
.footer__tag { margin-top: var(--sp-5); font-family: var(--font-display); font-style: italic; font-size: var(--fs-body-lg); color: var(--on-surface-variant); line-height: 1.45; }
.footer__cols { display: flex; gap: var(--sp-16); justify-content: flex-end; }
.footer__col { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__col-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-surface-faint); margin-bottom: var(--sp-2); }
.footer__col a { font-size: var(--fs-label); color: var(--on-surface-variant); transition: color var(--dur-1); }
.footer__col a:hover { color: var(--primary); }
.footer__base { margin-top: var(--sp-16); padding-top: var(--sp-6); border-top: 1px solid var(--ghost-border); display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; font-size: 13px; color: var(--on-surface-faint); }

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width: 960px) {
  .nav__links { display: none; }
  /* swap the inline CTA for the hamburger; the CTA lives inside the menu */
  .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__menu { display: flex; }
  .nav__backdrop { display: block; }
  /* opening the menu over the hero: give the bar a solid backdrop to match
     the dropdown, regardless of scroll position */
  .nav.is-menu-open {
    background: rgba(249,249,247,.97);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
  }
  .nav.is-menu-open .wordmark { color: var(--on-surface-strong); }
  .hero__grid, .stories__grid, .pillar, .pillar--flip .pillar__media,
  .hero__split-grid, .footer__inner { grid-template-columns: 1fr; }
  .pillar--flip .pillar__media { order: 0; }
  .pillar--flip .pillar__copy { justify-self: start; }
  .pillar__copy, .stories__body { max-width: none; }
  /* let the stacked grid track shrink to the viewport: without this, the
     "two paths" diagram's min-content (nowrap nodes + connector) inflates the
     1fr track and drags the body copy past the right edge. */
  .pillar__media, .pillar__copy { min-width: 0; }
  .hero__split-grid { min-height: auto; }
  .hero__split-media { padding: 0; min-height: 60vh; }
  .hero__split-media::before { inset: 0; }
  .how__flow { grid-template-columns: 1fr 1fr; gap: var(--sp-10) var(--sp-6); }
  .how__line { display: none; }
  .footer__cols { justify-content: flex-start; gap: var(--sp-12); }
}
@media (max-width: 600px) {
  .how__flow { grid-template-columns: 1fr; }
  .proof__pair { grid-template-columns: 1fr; }
  .proof__vs { margin: -6px auto; transform: rotate(90deg); }
  .stories__sticker { right: 8px; }
  .hero__reel-tag { left: 8px; }
  .const { min-height: 380px; }
  .const__chip { font-size: 10px; padding: 5px 9px; }
  .chart__bars { gap: 18px; }
  .final__sub { padding: 0 12px; }
  /* the "two paths" infographic: tighten padding + the Madison track so the
     "Paste URL → Finished ad" row fits the narrow card without clipping. */
  .ig { padding: var(--sp-8) var(--sp-5) var(--sp-6); }
  .paths__lane--madison { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
  .paths__mad-track { gap: var(--sp-2); }
  .paths__mad-node { padding: 10px 13px; font-size: 13px; }
  .paths__mad-node--gold { padding: 10px 14px; }
  .paths__mad-line { min-width: 16px; }
  /* the short 16/9 proof slot leaves no room for the decorative filename chip,
     which collides with the centered caption — drop it on small screens. */
  .video-slot__file { display: none; }
  /* on narrow phones the 16/9 slot is too short for the play button + caption,
     so the centred content overflowed and the slot's overflow:hidden clipped
     the play circle. Use a taller ratio for the room instead of a min-height:
     a fixed height with the inline 16/9 ratio derives a ~356px min WIDTH that
     inflates the grid column and pushes the cards off-screen. !important is
     needed to beat the inline style="aspect-ratio:16/9". */
  .proof__col .video-slot { aspect-ratio: 4 / 3 !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   SITE ADAPTATIONS — real assets, inline-SVG icons, static VideoSlot
   (the prototype rendered these via React inline styles; ported to CSS
   so the live site ships zero external scripts)
   ══════════════════════════════════════════════════════════════════════ */

/* lucide-style inline icons inherit text color & sit on the baseline */
svg.icon { display: inline-flex; vertical-align: middle; flex: none; }

/* real hero video fills the reel behind the centered headline */
.hero__video-el {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero__video > .slot-shimmer, .hero__video > .hero__video-grad { z-index: 1; }

/* real showcase reel inside the Stories glass panel */
.stories__reel-video {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  object-fit: cover; border-radius: calc(var(--r-2xl) - 6px);
  background: var(--surface-ink);
}

/* ── VideoSlot (labelled placeholder) — ported from shared.jsx ───────── */
.video-slot {
  position: relative; overflow: hidden; border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card); color: var(--on-surface);
}
.video-slot--light {
  background: radial-gradient(130% 130% at 25% 0%, #fff 0%, #efece4 60%, #e7e1d2 100%);
}
.video-slot--dark {
  background: radial-gradient(120% 120% at 30% 10%, #2b261c 0%, #161310 70%);
  color: var(--on-ink);
}
.video-slot__inner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-4);
  text-align: center; padding: var(--sp-6);
}
.video-slot__play {
  width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-grad); color: var(--on-primary);
  box-shadow: 0 14px 34px -10px rgba(255,190,56,.65);
}
.video-slot__play svg { margin-left: 3px; }
.video-slot__label {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; color: var(--on-surface-faint);
}
.video-slot--dark .video-slot__label { color: var(--on-ink-variant); }
.video-slot__sub { font-size: var(--fs-label); max-width: 280px; color: var(--on-surface-variant); }
.video-slot--dark .video-slot__sub { color: var(--on-ink-variant); }
.video-slot__file {
  position: absolute; left: 14px; bottom: 14px; padding: 5px 10px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  background: rgba(20,17,14,.06); color: var(--on-surface-faint); backdrop-filter: blur(6px);
}
.video-slot--dark .video-slot__file { background: rgba(255,255,255,.08); color: var(--on-ink-variant); }

/* waitlist submit feedback line under the hero email field */
.hero__msg {
  margin-top: var(--sp-4); min-height: 1.4em; font-size: var(--fs-label);
  font-weight: 600; color: var(--on-ink); text-align: center;
}
.hero__msg.is-ok { color: var(--primary-container); }
.hero__msg.is-err { color: #ff9b8a; }

/* italic accent words (e.g. "feel") lean past their advance width, so
   background-clip:text paints only up to the box and clips the trailing
   stroke when the word lands at a line end. inline-block + generous right
   padding extends the gradient paint box to cover the full italic glyph;
   the negative margin cancels the padding so word spacing is unchanged.
   The same clipping hits descenders vertically (the "g" in "something")
   because line-height:1.0 leaves no room below the baseline — bottom
   padding extends the paint box down, cancelled by a negative margin. */
.hero__title .italic-accent {
  display: inline-block;
  padding-right: 0.3em;
  margin-right: -0.22em;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}