/* =========================================================
   3-HOUR GUIDANCE BUSINESS — SALES PAGE
   Vintage editorial. Analog film grain. Warm cream + ink.
   ========================================================= */

/* ============ FONTS ============ */
@font-face {
  font-family: 'IM Fell';
  src: url('assets/fonts/IMFellDWPica-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IM Fell';
  src: url('assets/fonts/IMFellDWPica-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'IM Fell';
  src: url('assets/fonts/IMFellDWPica-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nikita';
  src: url('assets/fonts/Nikita-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ============ TOKENS ============ */
:root {
  /* Warm cream palette */
  --paper:       #efe6d4;
  --paper-2:     #e8dcc3;
  --paper-deep:  #ddcfb0;
  --ink:         #1a1612;
  --ink-2:       #2a2218;
  --ink-soft:    #3a2f22;
  --ink-dim:     #6a5a44;
  /* deep blue-black for dark surfaces (not body text) */
  --dark-bg:     #0f1419;
  --dark-bg-2:   #1a2028;
  --muted:       #8a7a60;

  /* Dark/tonal section — deep blue-black (matching Becoming the Guide) */
  --night:       #0e1218;
  --night-2:     #161a22;
  --night-3:     #1d222c;
  --night-text:  #e5dcc6;
  --night-dim:   #8a8f9a;

  /* Accents */
  --terracotta:  #b4542e;
  --terracotta-2:#c66a3a;
  --terracotta-d:#8c3d1f;
  --olive:       #6b7a4a;
  --ochre:       #c98a3a;

  --accent:      var(--terracotta);
  --accent-2:    var(--terracotta-2);
  --accent-d:    var(--terracotta-d);

  --rule:        rgba(42, 34, 22, 0.18);
  --rule-dark:   rgba(214, 202, 176, 0.18);

  --serif: 'IM Fell', 'EB Garamond', Georgia, serif;
  --sans:  'Inter', 'Söhne', -apple-system, system-ui, sans-serif;
  --hand:  'Nikita', 'Caveat', cursive;
  --hand-alt: 'Kalam', 'Nikita', cursive;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --grain-opacity: 0.32;
  --maxw: 1280px;
  --maxw-text: 720px;
}

/* Kill OpenType ligatures on handwriting fonts — they cause glyph overlap in Nikita */
.hand, .marginalia, .signature-block .sig, .note .sig-block .sig,
.hero-photo .caption, .hero-video .caption, .hero-bg-frame,
.story-collage .photo .caption, .story-aside .photo .caption,
.how-card .pullout, .workplaces .wp .wp-caption {
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0, "hlig" 0;
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0;
}

/* ============ BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
/* Only smooth-scroll for intentional anchor clicks, not focus-driven scrolls */
html.smooth-scroll { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

/* ============ GRAIN (global) ============ */
.grain {
  position: fixed; inset: -20% -20% -20% -20%;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}
@keyframes grainShift {
  /* deprecated — grain is now static */
  0%, 100% { transform: none; }
}

/* ============ REUSABLES ============ */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; position: relative; }
.container-narrow { max-width: 780px; margin: 0 auto; padding: 0 32px; position: relative; }

.serif { font-family: var(--serif); }
.hand  { font-family: var(--hand); }
.micro {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-d);
  margin-bottom: 28px;
  display: flex; align-items: center; gap: 14px;
}
.section-label .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-dim);
}
.night .section-label { color: var(--accent-2); }
.night .section-label .num { color: var(--night-dim); }

.section-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.8vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.section-h em {
  font-style: italic;
  color: var(--accent-d);
}
.night .section-h { color: var(--paper); }
.night .section-h em { color: var(--accent-2); }

/* paper texture (applied to body-level & tonal variants) */
.paper-tex {
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 15% 10%, rgba(201,182,144,0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(140,61,31,0.08) 0%, transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.15  0 0 0 0 0.08  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
}

/* Reveal on scroll */
/* Reveal system — content is VISIBLE by default so no-JS / throttled envs still render.
   JS adds .js-ready to <html> once the observer is set up; that's when we hide + animate in. */
.reveal { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
html.js-ready .reveal:not(.in) { opacity: 0; transform: translateY(14px); }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; }
.reveal.in { opacity: 1 !important; transform: translateY(0) !important; }
/* If JS hasn't loaded or animations are throttled, ensure reveals are visible. */
html.no-anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.no-motion .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* placeholder photo card — warm sepia gradient, no stripes */
.ph {
  position: relative;
  background:
    radial-gradient(ellipse at 35% 20%, rgba(255,240,215,.55) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(140,61,31,.18) 0%, transparent 65%),
    linear-gradient(160deg, #d4c29a 0%, #b8a37a 50%, #9a8564 100%);
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  color: rgba(42,34,22,0.55);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(42,34,22,.15);
}
.ph::after {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.18  0 0 0 0 0.1  0 0 0 0.25 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: .7;
  pointer-events: none;
}
.ph.dark {
  background:
    radial-gradient(ellipse at 35% 20%, rgba(180,84,46,.12) 0%, transparent 55%),
    linear-gradient(160deg, #2a2218 0%, #1a1612 100%);
  color: rgba(214,202,176,0.6);
  border-color: rgba(214,202,176,0.12);
  box-shadow: inset 0 0 60px rgba(0,0,0,.4);
}
.ph.dark::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.85  0 0 0 0 0.75  0 0 0 0.15 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: screen;
}
.ph > * { position: relative; z-index: 1; }
.ph .ph-label { max-width: 80%; line-height: 1.5; }
.ph .ph-tl, .ph .ph-br {
  position: absolute;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  opacity: .7;
}
.ph .ph-tl { top: 10px; left: 12px; }
.ph .ph-br { bottom: 10px; right: 12px; }
.ph.dark .ph-tl, .ph.dark .ph-br { color: var(--night-dim); }

/* Tape strips for collage */
.tape {
  position: absolute;
  width: 100px; height: 22px;
  background: rgba(201,182,144,0.55);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transform: rotate(-4deg);
  z-index: 5;
  backdrop-filter: blur(1px);
}
.tape::before, .tape::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 2px;
  background: repeating-linear-gradient(to bottom, rgba(180,84,46,.15) 0 2px, transparent 2px 5px);
}
.tape::before { left: 3px; }
.tape::after { right: 3px; }

/* ============ NAV ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 32px;
  display: flex; justify-content: space-between; align-items: center;
  transition: background .35s, backdrop-filter .35s, color .35s, padding .35s;
  color: var(--ink);
}
.nav.on-dark { color: var(--night-text); }
.nav.scrolled {
  background: rgba(239, 230, 212, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  padding: 12px 32px;
}
.nav.scrolled.on-dark {
  background: rgba(24, 21, 18, 0.8);
  border-bottom-color: var(--rule-dark);
}
.nav-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  display: flex; align-items: center; gap: 10px;
}
.nav-mark .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-countdown {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
}
.nav.on-dark .nav-countdown { color: var(--night-dim); }
.nav-countdown b { color: var(--accent-d); font-weight: 600; }
.nav.on-dark .nav-countdown b { color: var(--accent-2); }
.nav-cta {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 10px 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-decoration: none;
  transition: all .3s;
  background: transparent;
}
.nav-cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
@media (max-width: 720px) {
  .nav-countdown { display: none; }
  .nav-mark { font-size: 15px; }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 140px 0 80px;
  overflow: hidden;
}

/* Hero text sits over dark gradient — flip to paper/cream for legibility */
.hero .hero-pre { color: rgba(239,230,212,0.78); }
.hero .hero-headline { color: #f4eadb; text-shadow: 0 1px 24px rgba(0,0,0,0.25); }
.hero .hero-headline .h-small { color: rgba(239,230,212,0.92); }
.hero .hero-headline .em { color: var(--accent-2); }
.hero .hero-sub { color: rgba(239,230,212,0.85); }
.hero .hero-proof,
.hero .guides-strip-label { color: rgba(239,230,212,0.65); }
.hero .cta-micro { color: rgba(239,230,212,0.55); }
.hero .hero-status { color: #f4eadb; }
.hero .marginalia { color: rgba(239,230,212,0.55); }

/* full-bleed landscape video backdrop */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-bg-frame {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a1612 0%, #2a2218 50%, #1a1612 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-bg-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 30% 40%, rgba(199,91,44,.12), transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(200,166,106,.08), transparent 60%);
}
.hero-bg-frame .bg-tag-tl,
.hero-bg-frame .bg-tag-tr,
.hero-bg-frame .bg-tag-bl,
.hero-bg-frame .bg-tag-br {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(229,220,198,0.35);
  z-index: 2;
}
.hero-bg-frame .bg-tag-tl { top: 24px; left: 28px; }
.hero-bg-frame .bg-tag-tr { top: 24px; right: 28px; }
.hero-bg-frame .bg-tag-bl { bottom: 24px; left: 28px; }
.hero-bg-frame .bg-tag-br { bottom: 24px; right: 28px; }
.hero-bg-frame .bg-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(229,220,198,0.42);
  text-align: center;
  line-height: 2;
  position: relative;
  z-index: 2;
}
/* Vignette + paper tint so foreground text stays readable */
.hero-bg-vignette {
  position: absolute;
  inset: 0;
  background:
    /* Horizontal gradient: strong behind text on the left, clear on the right */
    linear-gradient(90deg,
      rgba(26,20,16,0.92) 0%,
      rgba(26,20,16,0.85) 20%,
      rgba(26,20,16,0.65) 40%,
      rgba(26,20,16,0.30) 65%,
      rgba(26,20,16,0.08) 85%,
      rgba(26,20,16,0.00) 100%),
    /* Top band for nav legibility + bottom feather for edge fade */
    linear-gradient(180deg, rgba(26,20,16,0.70) 0%, rgba(26,20,16,0.45) 5%, rgba(26,20,16,0.10) 12%, rgba(26,20,16,0.00) 20%, rgba(26,20,16,0.00) 80%, rgba(26,20,16,0.30) 100%);
  pointer-events: none;
}

.hero > .container,
.hero > .hero-sidebar,
.hero > .hero-corner {
  position: relative;
  z-index: 2;
}

.hero-status {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-d);
  background: rgba(180,84,46,0.92);
  color: #f4eadb;
  border-color: transparent;
}
.hero-status .pulse {
  width: 6px; height: 6px; background: #f4eadb;
  border-radius: 50%;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .4; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.25); }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 860px);
  gap: 40px;
  align-items: start;
  margin-top: 48px;
}
.hero-pre {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.hero-pre::before {
  content: '—'; color: var(--accent); margin-right: 10px;
}
.hero-headline {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hero-headline .h-big {
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.92;
  display: block;
}
.hero-headline .h-small {
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.1;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 780px;
  display: block;
}
.hero-headline .em {
  font-style: italic;
  color: var(--accent-d);
}
.hero-headline .underline {
  position: relative;
  display: inline-block;
}
.hero-headline .underline::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -0.02em;
  height: 0.06em;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: under 1.1s cubic-bezier(.6,0,.2,1) 1.2s forwards;
}
@keyframes under { to { transform: scaleX(1); } }

.hero-sub {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 560px;
}
.hero-proof {
  display: flex; align-items: center; gap: 14px;
  margin-top: 20px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hero-proof .rule { width: 32px; height: 1px; background: currentColor; opacity: .5; }

.hero-cta-block { margin-top: 36px; }
.cta-primary {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--accent);
  color: var(--paper);
  padding: 20px 32px;
  border: none;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.cta-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--accent-d);
  transform: translateX(-101%);
  transition: transform .45s cubic-bezier(.6,0,.2,1);
}
.cta-primary:hover::before { transform: translateX(0); }
.cta-primary span, .cta-primary .arrow { position: relative; z-index: 1; }
.cta-primary .arrow {
  font-family: var(--serif);
  font-size: 18px;
  transition: transform .35s;
}
.cta-primary:hover .arrow { transform: translateX(6px); }

.cta-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: all .25s;
}
.cta-secondary:hover { color: var(--accent-d); border-color: var(--accent); }

.cta-micro {
  margin-top: 20px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 440px;
}

.hero-photo {
  position: relative;
  aspect-ratio: 4/5;
  transform: rotate(1.2deg);
}
.hero-photo .frame {
  position: relative;
  width: 100%; height: 100%;
  box-shadow: 0 30px 60px -25px rgba(42,34,22,.35), 0 6px 14px -4px rgba(42,34,22,.18);
}
.hero-photo .tape { top: -10px; left: 30%; }
.hero-photo .caption {
  position: absolute;
  bottom: -38px; right: 0;
  font-family: var(--hand);
  font-size: 22px;
  color: var(--accent-d);
  transform: rotate(-2deg);
  padding: 0 .15em .1em;
  line-height: 1.15;
}

/* sidebar text */
.hero-sidebar {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.4em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.hero-corner {
  position: absolute;
  bottom: 24px; right: 32px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-dim);
  display: flex; align-items: center; gap: 10px;
}
.hero-corner .line { width: 30px; height: 1px; background: currentColor; opacity: .4; }

/* marginalia */
.marginalia {
  position: absolute;
  font-family: var(--hand);
  font-size: 22px;
  color: var(--accent);
  transform: rotate(-4deg);
  line-height: 1.2;
  pointer-events: none;
  max-width: 200px;
}

/* ============ RECOGNITION (prose) ============ */
.recognition .section-h { max-width: 960px; margin-left: auto; margin-right: auto; margin-bottom: 32px; text-align: center; }
.recognition .section-label { justify-content: center; }
.recognition .intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--ink-dim);
  max-width: 640px;
  margin: 0 auto 72px;
  padding-left: 24px;
  border-left: 2px solid var(--accent);
  text-align: left;
}
.stanzas {
  display: grid;
  gap: 60px;
  max-width: 780px;
}
.stanza {
  position: relative;
  padding-left: 72px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink);
}
.stanza .num {
  position: absolute; left: 0; top: 4px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 38px;
  color: var(--accent);
}
.stanza em { color: var(--accent-d); font-style: italic; }
.recognition-closer {
  margin-top: 80px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-dim);
  padding-left: 24px;
  max-width: 640px;
  border-left: 1px solid var(--rule);
}

/* ============ SECTION C — WORLD SHIFTING (dark) ============ */
.night {
  background: var(--night);
  color: var(--night-text);
  padding: 160px 0;
  position: relative;
  overflow: hidden;
}
.night::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(180,84,46,.10) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(107,122,74,.08) 0%, transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
  pointer-events: none;
}
.night > .container { position: relative; z-index: 1; }
.night .section-h { max-width: 1000px; margin-bottom: 48px; }
.night .body {
  max-width: 720px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--night-text);
  opacity: .92;
}
.night .body p { margin-bottom: 1.4em; }
.night .body em { color: var(--accent-2); font-style: italic; }

/* ============ STORY section — dark variant overrides ============ */
.story.night .story-body .prose { color: var(--night-text); }
.story.night .story-body .prose p:first-child::first-letter { color: var(--accent-2); }
.story.night .story-body .prose strong { color: var(--accent-2); }
.story.night .story-body .prose em { color: var(--accent-2); }
.story.night .story-aside .photo { box-shadow: 0 24px 48px -16px rgba(0,0,0,.6); background: #2a241f; }
.story.night .story-aside .photo .caption { color: var(--accent-2); }
.story.night .story-aside .caption { color: var(--night-dim); }
.story.night .aside-stamp .big { color: var(--accent-2); }
.story.night .aside-stamp .stamp-text { color: var(--night-text); }
.story.night .aside-stamp .stamp-text em { color: var(--accent-2); }
.story.night .aside-stats { border-top-color: rgba(239,230,212,0.12); }
.story.night .aside-stats .mono { color: var(--night-dim); }
.story.night .aside-stats .big-num { color: var(--accent-2); }
.story.night .aside-stats .small-cap { color: var(--night-dim); }
.story.night .signature-block { color: var(--night-dim); }
.story.night .signature-block .sig { color: var(--accent-2); }

/* ============ HOW section — dark variant overrides ============ */
.how.night { background: var(--night); padding: 160px 0; }
.how.night .intro { color: var(--night-text); opacity: .85; }
.how.night .how-card {
  background: rgba(255,255,255,0.025);
  border-color: rgba(239,230,212,0.14);
}
.how.night .how-card .num { color: var(--accent-2); }
.how.night .how-card h3 { color: var(--paper); }
.how.night .how-card p { color: var(--night-text); opacity: .88; }
.how.night .how-card .pullout {
  color: var(--accent-2);
  border-top-color: rgba(239,230,212,0.14);
}
.how.night .timeline-header { color: var(--paper); }
.how.night .timeline::before {
  background: repeating-linear-gradient(to right, var(--accent-2) 0 6px, transparent 6px 12px);
  opacity: .5;
}
.how.night .timeline-node::before {
  background: var(--night);
  border-color: var(--accent-2);
  box-shadow: 0 0 0 6px var(--night);
}
.how.night .timeline-node .when { color: var(--accent-2); }
.how.night .timeline-node .what { color: var(--night-text); }
.how.night .timeline-footnote { color: var(--night-dim); }

.pullquote {
  margin: 140px auto 0;
  max-width: 1000px;
  position: relative;
}
.pullquote .mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 140px;
  line-height: 0.2;
  color: var(--accent);
  opacity: .55;
  margin-bottom: 40px;
  display: block;
  padding-left: 20px;
}
.pullquote q {
  display: block;
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 42px);
  font-style: italic;
  line-height: 1.32;
  color: var(--paper);
  max-width: 900px;
  text-wrap: balance;
  quotes: none;
}
.pullquote q::before, .pullquote q::after { content: none; }
.pullquote .attrib {
  margin-top: 32px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--night-dim);
}

/* ============ SECTION D — STORY (paper, collage) ============ */
.story { padding: 160px 0; }
.story .section-h { max-width: 920px; margin-bottom: 80px; }
.story-collage {
  display: grid;
  grid-template-columns: 240px 1fr 220px;
  gap: 40px;
  align-items: start;
  margin-bottom: 80px;
}
.story-collage .photo {
  aspect-ratio: 4/5;
  position: relative;
  box-shadow: 0 22px 44px -18px rgba(42,34,22,.40);
}
.story-collage .photo img { width:100%; height:100%; object-fit: cover; filter: saturate(.8) contrast(1.02); }
.story-collage .photo.a { transform: rotate(-3deg); }
.story-collage .photo.a .tape { top: -12px; left: 20%; }
.story-collage .photo.b { transform: rotate(2deg); margin-top: 40px; }
.story-collage .photo.b .tape { top: -12px; left: 55%; transform: rotate(6deg); }
.story-collage .photo .caption {
  position: absolute;
  bottom: -32px; left: 0;
  font-family: var(--hand);
  font-size: 20px;
  color: var(--accent-d);
  transform: rotate(-2deg);
  white-space: nowrap;
  padding: 0 .15em .1em;
  line-height: 1.15;
}
.story-collage .stamp {
  font-family: var(--serif);
  font-style: italic;
  text-align: center;
  margin-top: 40px;
}
.story-collage .stamp .big {
  font-family: var(--serif);
  font-size: 64px;
  color: var(--accent);
  line-height: 1;
  display: block;
}
.story-collage .stamp .small {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 10px;
}

.story-body {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 320px);
  gap: 80px;
  align-items: start;
}
.story-body .prose {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 620px;
}
.story-body .prose p { margin-bottom: 1.35em; }
.story-body .prose p:first-child::first-letter {
  font-family: var(--serif);
  font-size: 78px;
  float: left;
  line-height: .85;
  padding: 6px 14px 0 0;
  color: var(--accent);
}
.story-body .prose strong { color: var(--accent-d); font-weight: 400; font-style: italic; }

.story-aside {
  position: sticky; top: 110px;
  display: flex; flex-direction: column; gap: 32px;
}
.story-aside .photo {
  aspect-ratio: 4/5;
  position: relative;
  box-shadow: 0 20px 40px -16px rgba(14,18,24,.35);
  background: var(--paper-2);
}
.story-aside .photo.photo-a { transform: rotate(-1.8deg); }
.story-aside .photo.photo-b { transform: rotate(1.5deg); }
.story-aside .photo .tape {
  position: absolute; top: -14px; left: 22%;
  width: 80px; height: 22px;
  background: rgba(214,180,120,.55);
  border: 1px solid rgba(120,90,50,.15);
  transform: rotate(-4deg);
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
.story-aside .photo.photo-b .tape { left: 55%; transform: rotate(5deg); }
.story-aside .photo img { width:100%; height:100%; object-fit: cover; filter: saturate(.82) contrast(1.02); }
.story-aside .photo .caption {
  position: absolute;
  bottom: -26px; left: 6px;
  font-family: var(--hand);
  font-size: 20px;
  color: var(--accent-d);
  white-space: nowrap;
}
.story-aside .caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.5;
}
.story-aside .caption::before { content: '' }

.aside-stamp {
  text-align: center;
  padding: 12px 0 4px;
}
.aside-stamp .big {
  font-family: var(--serif);
  font-size: 36px;
  color: var(--accent);
  letter-spacing: -2px;
  display: block;
  line-height: 1;
}
.aside-stamp .stamp-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--ink);
  line-height: 1.4;
  margin-top: 10px;
}
.aside-stamp .stamp-text em {
  color: var(--accent-d);
  font-style: italic;
}

.aside-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 14px;
  margin-top: 14px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.aside-stats .mono {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 4px;
}
.aside-stats .big-num {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--accent-d);
  line-height: 1;
}
.aside-stats .small-cap {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.4;
  margin-top: 4px;
}

.signature-block {
  margin-top: 60px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
}
.signature-block .sig {
  font-family: var(--hand);
  font-style: normal;
  font-size: 58px;
  color: var(--accent-d);
  line-height: 1.1;
  margin: 10px 0;
  padding: 0 .2em .18em;
  transform: rotate(-3deg);
  display: inline-block;
  overflow: visible;
}
.signature-block .where {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-dim);
}

/* ============ SECTION E — COACH ≠ GUIDE (bento) ============ */
.contrast { padding: 160px 0; background: var(--paper-2); }
.contrast .section-h { max-width: 980px; margin-bottom: 40px; }
.contrast .hook {
  max-width: 720px;
  margin-bottom: 72px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.contrast .hook blockquote {
  font-style: italic;
  color: var(--accent-d);
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--accent);
  margin-bottom: 1.3em;
}
.bento {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  grid-template-rows: auto auto;
  gap: 18px;
}
.bento .card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 36px 32px;
  position: relative;
  transition: transform .4s ease, box-shadow .4s ease;
}
.bento .card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(42,34,22,.28); }
.bento .card .idx {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  margin-bottom: 18px;
  display: flex; justify-content: space-between;
}
.bento .card .idx .glyph { color: var(--accent); font-size: 14px; font-family: var(--serif); }
.bento .card .pair { display: grid; gap: 18px; }
.bento .card .pair .label {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.bento .card .pair .coach .label { color: var(--ink-dim); }
.bento .card .pair .guide .label { color: var(--accent-d); }
.bento .card .pair .line {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
}
.bento .card .pair .coach .line { color: var(--muted); }
.bento .card .divider {
  height: 1px;
  background: var(--rule);
  margin: 2px 0;
}

.bento .card.big {
  grid-column: span 1;
  grid-row: span 2;
  background: var(--dark-bg);
  color: var(--night-text);
  border-color: var(--dark-bg);
  padding: 44px 36px;
  display: flex; flex-direction: column;
  gap: 24px;
}
.bento .card.big .title {
  font-family: var(--serif);
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.1;
  color: var(--paper);
  letter-spacing: -0.01em;
}
.bento .card.big p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--night-text);
  opacity: .88;
}
.bento .card.big .archetypes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(214,202,176,.18);
}
.bento .card.big .arch {
  font-family: var(--serif);
  font-size: 14.5px;
  color: var(--night-text);
}
.bento .card.big .arch .symbol {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent-2);
  font-size: 22px;
  margin-bottom: 2px;
}
.bento .card.big em {
  color: var(--accent-2);
  font-style: italic;
}
.contrast .closer {
  margin-top: 80px;
  max-width: 780px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ============ SECTION F — TWO PATHS ============ */
.paths { padding: 160px 0; background: var(--paper); }
.paths .section-h { max-width: 800px; margin-bottom: 72px; }
.paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.paths-col {
  padding: 48px 40px;
  position: relative;
}
.paths-col + .paths-col { border-left: 1px solid var(--rule); }
.paths-col .tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-dim);
  margin-bottom: 10px;
  display: block;
}
.paths-col h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 28px;
  color: var(--ink);
}
.paths-col.b h3 { color: var(--accent-d); }
.paths-col p {
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.65;
  margin-bottom: 1.2em;
}
.paths-col.a p { color: var(--muted); }
.paths-col.b p { color: var(--ink); }
.paths-closer {
  margin-top: 64px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.paths-closer::before, .paths-closer::after {
  content: ''; display: inline-block; width: 40px; height: 1px; background: var(--accent); vertical-align: middle; margin: 0 16px;
}

/* ============ SECTION G — HOW IT WORKS (bento + timeline + video) ============ */
.how { padding: 160px 0; background: var(--paper-2); }
.how .section-h { max-width: 800px; margin-bottom: 32px; }
.how .intro {
  max-width: 640px;
  margin-bottom: 64px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
}
.how-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 120px;
}
.how-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 18px;
}
.how-card .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 42px;
  color: var(--accent);
  line-height: 1;
}
.how-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
}
.how-card p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.how-card .pullout {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--hand);
  font-size: 20px;
  color: var(--accent-d);
  transform: rotate(-1deg);
}

.timeline-header {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.15;
  margin-bottom: 48px;
  max-width: 720px;
}
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 40px;
  margin-bottom: 48px;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 52px; left: 2%; right: 2%;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--accent) 0 6px, transparent 6px 12px);
  opacity: .6;
}
.timeline-node {
  position: relative;
  padding-top: 36px;
}
.timeline-node::before {
  content: '';
  position: absolute; top: 6px; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 6px var(--paper-2);
}
.timeline-node .when {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent-d);
  margin-bottom: 10px;
}
.timeline-node .what {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}
.timeline-footnote {
  margin-top: 48px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  color: var(--ink-dim);
  max-width: 720px;
}

.video-block { margin-top: 120px; }
.video-section { padding: 120px 0 140px; background: var(--paper); }
.video-section .video-block { margin-top: 0; text-align: center; }
.video-section .video-block > p {
  max-width: 680px;
  margin: 0 auto 36px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.video-section .video-block h3 { text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  .video-section { padding: 70px 0 80px; }
}
.video-block h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 36px);
  margin-bottom: 18px;
}
.video-block p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 640px;
  margin-bottom: 32px;
}
.video-frame {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--night);
  border: 1px solid var(--rule);
  overflow: hidden;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.video-frame .tape { top: -10px; left: 45%; }
.video-frame .play {
  width: 86px; height: 86px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
  font-size: 28px;
  transition: transform .35s;
  z-index: 2;
}
.video-frame:hover .play { transform: scale(1.08); }
.video-frame .label {
  position: absolute;
  bottom: 18px; left: 22px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--night-text);
  opacity: .7;
}
.video-frame .ph {
  position: absolute; inset: 0;
  border: none;
}

/* ============ COUPON BANNER (above tier grid) ============ */
.coupon-banner {
  max-width: 860px;
  margin: 0 auto 40px;
  position: relative;
}
.coupon-banner::before,
.coupon-banner::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px dashed rgba(180,84,46,0.4);
  z-index: 2;
}
.coupon-banner::before { left: -9px; }
.coupon-banner::after { right: -9px; }
.coupon-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 20px 32px;
  background: linear-gradient(135deg, rgba(180,84,46,0.08) 0%, rgba(198,106,58,0.12) 100%);
  border: 1.5px dashed rgba(180,84,46,0.5);
  border-radius: 2px;
}
.coupon-inner::before {
  content: '';
  position: absolute;
  left: 50%; top: 8px; bottom: 8px;
  width: 1px;
  border-left: 1px dashed rgba(180,84,46,0.22);
  transform: translateX(-1px);
}
.coupon-left { display: flex; flex-direction: column; gap: 6px; }
.coupon-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.coupon-code {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent-d);
  background: var(--paper);
  padding: 6px 14px;
  border: 1px solid rgba(180,84,46,0.35);
  border-radius: 2px;
  display: inline-block;
  width: max-content;
}
.coupon-mid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.coupon-off {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--accent-d);
  line-height: 1;
}
/* IM Fell italic renders $ as a stylized M-glyph; .dol restores a normal $ */
.dol {
  font-style: normal !important;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-right: 0.04em;
}
.coupon-deadline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
}
.coupon-deadline strong { color: var(--accent-d); font-weight: 500; font-style: normal; }
.coupon-copy {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 14px 20px;
  background: var(--accent);
  color: var(--paper);
  border: none;
  cursor: pointer;
  transition: background .3s;
  border-radius: 2px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.coupon-copy:hover { background: var(--accent-d); }
.coupon-copy .copy-done {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-d);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.coupon-copy.copied .copy-done { opacity: 1; }

.inline-code {
  font-family: var(--mono);
  font-size: 0.88em;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  background: rgba(180,84,46,0.12);
  border: 1px solid rgba(180,84,46,0.28);
  color: var(--accent-d);
  border-radius: 2px;
}

@media (max-width: 720px) {
  .coupon-inner {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 22px;
    text-align: center;
  }
  .coupon-inner::before { display: none; }
  .coupon-left, .coupon-mid { align-items: center; text-align: center; }
}

/* ============ EXIT-INTENT MODAL ============ */
.exit-modal {
  position: fixed; inset: 0;
  z-index: 9999;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.exit-modal.open { display: flex; animation: exitFade .35s ease; }
.exit-backdrop {
  position: absolute; inset: 0;
  background: rgba(14, 10, 6, 0.78);
  backdrop-filter: blur(6px);
}
.exit-panel {
  position: relative;
  max-width: 540px;
  width: 100%;
  background: var(--paper);
  padding: 56px 48px 40px;
  text-align: center;
  border: 1px solid var(--rule);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,0.5);
  animation: exitRise .45s cubic-bezier(.2,.7,.2,1);
}
.exit-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 2px;
  background: var(--accent);
}
.exit-close {
  position: absolute; top: 14px; right: 16px;
  width: 36px; height: 36px;
  font-size: 24px;
  background: transparent;
  border: none;
  color: var(--ink-dim);
  cursor: pointer;
  line-height: 1;
  transition: color .2s;
}
.exit-close:hover { color: var(--accent); }
.exit-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent-d);
  margin-bottom: 14px;
}
.exit-panel h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  margin-bottom: 16px;
  color: var(--ink);
}
.exit-panel h3 em { font-style: italic; color: var(--accent-d); }
.exit-panel p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.exit-panel p em { font-style: italic; color: var(--accent-d); }
.exit-panel .btg-fallback { margin-bottom: 16px; }
.exit-micro {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-dim);
  margin: 0;
}
@keyframes exitFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes exitRise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
  .exit-panel { padding: 44px 26px 30px; }
}

/* ============ SECTION K2 — BECOMING THE GUIDE (email capture) ============ */
.btg { padding: 120px 0 140px; background: var(--paper); }
.btg-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.btg-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent-d);
  margin-bottom: 18px;
}
.btg-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.1;
  margin-bottom: 22px;
  color: var(--ink);
}
.btg-h em { font-style: italic; color: var(--accent-d); }
.btg-intro {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink-soft);
  margin-bottom: 36px;
}
.btg-intro em { font-style: italic; color: var(--accent-d); }
.btg-form { margin-bottom: 18px; }
.btg-fallback {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 520px; margin: 0 auto;
}
.btg-fallback input[type="text"],
.btg-fallback input[type="email"],
.btg-fallback .formkit-input {
  font-family: var(--sans);
  font-size: 15px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
  min-width: 0;
  width: 100%;
}
.btg-fallback input:focus {
  outline: none;
  border-color: var(--accent);
}
.btg-fallback button[type="submit"],
.btg-fallback .formkit-submit {
  grid-column: 1 / -1; /* full width below the two inputs */
}
@media (max-width: 480px) {
  .btg-fallback { grid-template-columns: 1fr; }
}
.btg-fallback button {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 16px 26px;
  background: var(--accent);
  color: var(--paper);
  border: none;
  cursor: pointer;
  transition: background .3s;
  border-radius: 2px;
}
.btg-fallback button:hover { background: var(--accent-d); }
.btg-micro {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-dim);
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
@media (max-width: 640px) {
  .btg { padding: 80px 0 90px; }
}

/* ============ SECTION B2 — THE VOICES (pain grid) ============ */
.pain-grid {
  padding: 140px 0 160px;
  background: var(--paper);
  position: relative;
}
.pain-grid::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180,84,46,0.22), transparent);
}
.pain-grid .section-h { max-width: 820px; margin-bottom: 20px; }
.pain-grid .intro {
  max-width: 640px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
  margin-bottom: 64px;
  line-height: 1.55;
}
.voices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.voice-card {
  position: relative;
  padding: 44px 40px 40px;
  background: #e8ddbe;
  border: 1px solid rgba(180,84,46,0.16);
  transition: background .3s ease, border-color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.voice-card::after {
  /* subtle top-left corner mark */
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 28px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  opacity: 0.35;
  transition: opacity .3s ease, width .3s ease, height .3s ease;
}
.voice-card:hover {
  background: #ede1c2;
  border-color: rgba(180,84,46,0.38);
  transform: translateY(-3px);
  box-shadow: 0 20px 44px -26px rgba(40, 28, 14, 0.35);
}
.voice-card:hover::after {
  opacity: 0.7;
  width: 36px; height: 36px;
}
.voice-card .voice-num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent-d);
  margin-bottom: 20px;
}
.voice-card .voice-sym {
  position: absolute;
  top: 34px;
  right: 32px;
  font-family: var(--serif);
  font-size: 28px;
  color: var(--accent);
  opacity: 0.55;
  line-height: 1;
  transition: opacity .3s ease, transform .3s ease;
}
.voice-card:hover .voice-sym {
  opacity: 0.85;
  transform: scale(1.06);
}
.voice-card .voice-head {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 2vw, 25px);
  line-height: 1.28;
  color: var(--ink);
  margin: 0 0 22px;
  padding: 0;
  border: none;
  text-wrap: balance;
}
.voice-card .voice-body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-soft);
  margin: 0;
}
.voices-closer {
  margin: 80px auto 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--ink-soft);
  max-width: 720px;
  line-height: 1.55;
}

@media (max-width: 1024px) {
  .voices-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .voice-card { padding: 40px 34px 34px; }
}
@media (max-width: 640px) {
  .pain-grid { padding: 90px 0 100px; }
  .voices-grid { grid-template-columns: 1fr; gap: 16px; }
  .voice-card { padding: 36px 28px 30px; }
  .voice-card .voice-head { font-size: 21px; }
  .voice-card .voice-sym { font-size: 22px; top: 28px; right: 24px; }
  .voices-closer { margin-top: 56px; font-size: 18px; }
}

/* ============ SECTION H — INSIDE (accordion) ============ */
.inside { padding: 160px 0; background: var(--paper); }
.inside .section-h { max-width: 900px; margin-bottom: 32px; }
.inside .intro {
  max-width: 720px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 72px;
}
.inside-group-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-d);
  margin: 64px 0 24px;
  display: flex; align-items: center; gap: 14px;
}
.inside-group-label::before {
  content: ''; width: 28px; height: 1px; background: var(--accent);
}
.inside-group-label:first-child { margin-top: 0; }

.accordion { border-top: 1px solid var(--rule); }
.acc-item { border-bottom: 1px solid var(--rule); }
.acc-head {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 28px 4px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  color: inherit;
  transition: background .3s;
}
.acc-head:hover { background: rgba(180,84,46,0.04); }
.acc-head .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
}
.acc-head .title {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
}
.acc-head .title .sub {
  display: block;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-dim);
  margin-top: 4px;
  font-weight: 400;
}
.acc-head .toggle {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 20px;
  color: var(--accent);
  transition: transform .35s;
  flex-shrink: 0;
}
.acc-item.open .acc-head .toggle { transform: rotate(45deg); }
.acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease;
}
.acc-body-inner {
  padding: 0 4px 28px 84px;
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 760px;
}
.acc-body-inner em, .acc-body-inner i {
  color: var(--accent-d);
  font-style: italic;
}

/* Premium panel */
.premium-panel {
  margin-top: 80px;
  background: var(--dark-bg);
  color: var(--night-text);
  padding: 60px 48px;
  border: 1px solid var(--ink);
  position: relative;
}
.premium-panel::before {
  content: 'PREMIUM';
  position: absolute;
  top: -11px; left: 32px;
  background: var(--paper);
  color: var(--accent-d);
  padding: 4px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
}
.premium-panel .premium-head {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 36px);
  margin-bottom: 16px;
  color: var(--paper);
}
.premium-panel .scarcity {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--night-dim);
  margin-bottom: 40px;
  max-width: 680px;
}
.premium-items { display: grid; gap: 28px; margin-bottom: 40px; }
.premium-item {
  padding: 24px 0;
  border-top: 1px solid rgba(214,202,176,.15);
}
.premium-item h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--paper);
  margin-bottom: 12px;
}
.premium-item p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
  color: var(--night-text);
  opacity: .88;
}
.premium-testimonial {
  padding: 24px 0 0;
  border-top: 1px solid rgba(214,202,176,.15);
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--paper);
}
.premium-testimonial .who {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
}

/* ============ SECTION I — PROOF ============ */
.proof { padding: 160px 0; background: var(--paper-2); }
.proof .section-h { max-width: 800px; margin-bottom: 72px; }

/* ============ MONEY CASE STUDIES — 6-card grid ============ */
.money-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1180px;
  margin: 0 auto 48px;
}
.money-card {
  position: relative;
  padding: 40px 36px 34px;
  background: #efe6d4;
  border: 1px solid rgba(180,84,46,0.14);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color .3s, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.money-card:hover {
  border-color: rgba(180,84,46,0.32);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(40, 28, 14, 0.3);
}
.money-head-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(180,84,46,0.18);
}
.money-avatar {
  width: 60px; height: 60px;
  flex: 0 0 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(180,84,46,0.22);
  background: var(--paper-deep, #e1d5b6);
  display: block;
}
.money-ident {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.money-ident strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  color: var(--ink);
  line-height: 1.2;
}
.money-ident .role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-d);
  line-height: 1.3;
}

.money-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.money-stat .before {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  line-height: 1.25;
  color: var(--ink-soft);
  opacity: 0.6;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(180,84,46,0.4);
}
.money-stat .arrow {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--accent);
  line-height: 1;
  margin: 2px 0;
}
.money-stat .after {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 32px);
  line-height: 1.1;
  color: var(--accent-d);
  letter-spacing: -0.01em;
}

.money-body {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
.money-body em { font-style: italic; color: var(--accent-d); }

.money-quote {
  margin: auto 0 0;
  padding: 16px 0 0;
  border-top: 1px dashed rgba(180,84,46,0.22);
}
.money-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--accent-d);
  margin: 0;
}
.money-quote p::before { content: '"'; margin-right: 2px; }
.money-quote p::after { content: '"'; margin-left: 2px; }

.money-closer {
  max-width: 680px;
  margin: 0 auto 64px;
  text-align: center;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.money-closer em { font-style: italic; }

/* Honest-note card — sits as 6th card in the money grid */
.money-card.note-card {
  background: #3a2f22;
  border-color: rgba(198,106,58,0.35);
  color: var(--paper);
  padding: 44px 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.money-card.note-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(198,106,58,0.7), transparent);
}
.money-card.note-card .note-glyph {
  position: absolute;
  top: 28px; right: 28px;
  font-family: var(--serif);
  font-size: 46px;
  color: var(--accent-2);
  opacity: 0.45;
  line-height: 1;
}
.money-card.note-card .note-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-right: 60px; /* leave room for glyph */
}
.money-card.note-card .note-head {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.14;
  color: var(--paper);
  margin: 0;
  text-wrap: balance;
}
.money-card.note-card .note-head em {
  font-style: italic;
  color: var(--accent-2);
}
.money-card.note-card .note-body {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(239,230,212,0.82);
  margin: 0;
}
.money-card.note-card .note-quote {
  padding-top: 16px;
  border-top: 1px dashed rgba(239,230,212,0.2);
}
.money-card.note-card .note-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--accent-2);
}
.money-card.note-card:hover {
  border-color: rgba(198,106,58,0.55);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1024px) {
  .money-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .money-card { padding: 34px 28px 28px; }
  .money-avatar { width: 52px; height: 52px; flex-basis: 52px; }
}
@media (max-width: 640px) {
  .money-grid { grid-template-columns: 1fr; gap: 18px; }
  .money-card { padding: 32px 24px 26px; }
}

/* ============ WINS WALL — real screenshots collage ============ */
.wins-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto 56px;
}
.wins-wall .win-card {
  position: relative;
  margin: 0;
  padding: 14px 14px 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 36px -20px rgba(40,28,14,0.25);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wins-wall .win-card:hover {
  transform: translateY(-4px) rotate(0deg) !important;
  box-shadow: 0 28px 56px -22px rgba(40,28,14,0.35);
  z-index: 2;
}
.wins-wall .win-card.angled-l { transform: rotate(-1.2deg); }
.wins-wall .win-card.angled-r { transform: rotate(1.1deg); }
.wins-wall .win-card img {
  width: 100%;
  display: block;
  background: #e8ddbe;
  object-fit: cover;
  object-position: top center;
  max-height: 380px;
}
.wins-wall .win-card .win-tape {
  position: absolute;
  top: -12px; left: 36%;
  width: 80px; height: 22px;
  background: rgba(214,180,120,0.55);
  border: 1px solid rgba(120,90,50,0.15);
  transform: rotate(-4deg);
  z-index: 3;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.wins-wall .win-card.angled-r .win-tape { left: 52%; transform: rotate(5deg); }
.wins-wall .win-card figcaption {
  padding: 14px 8px 16px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-dim);
  text-align: left;
  line-height: 1.4;
}
.wins-wall .win-card figcaption strong {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-d);
  font-weight: 500;
  margin-right: 6px;
}

.wins-stripe-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 900px;
  margin: 0 auto 96px;
}
.wins-stripe-row .win-strip {
  margin: 0;
  padding: 10px 14px;
  background: #0d1016;
  border: 1px solid rgba(239,230,212,0.08);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.3);
}
.wins-stripe-row .win-strip img {
  width: 100%;
  height: auto;
  max-height: 56px;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .wins-wall { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .wins-stripe-row { grid-template-columns: 1fr; gap: 12px; max-width: 480px; }
}
@media (max-width: 640px) {
  .wins-wall { grid-template-columns: 1fr; gap: 18px; }
  .wins-wall .win-card.angled-l,
  .wins-wall .win-card.angled-r { transform: rotate(0); }
  .wins-wall .win-card img { max-height: 460px; }
}

.results-collage {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
  margin-bottom: 120px;
  max-width: 1100px;
}
.results-collage .r-card {
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--rule);
  position: relative;
  box-shadow: 0 20px 40px -22px rgba(42,34,22,.22);
}
.results-collage .r-card.tall { grid-row: span 2; }
.results-collage .r-card.angled-l { transform: rotate(-1.8deg); }
.results-collage .r-card.angled-r { transform: rotate(1.4deg); }
.results-collage .r-card .tape { top: -12px; left: 30%; }
.r-card .r-num {
  font-family: var(--serif);
  font-size: clamp(38px, 4vw, 54px);
  color: var(--accent-d);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.r-card .r-who {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 6px;
}
.r-card .r-note {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  line-height: 1.5;
}
.r-card.stripe {
  background: linear-gradient(135deg, var(--paper) 0%, var(--paper-deep) 100%);
}
.r-card.dark {
  background: var(--dark-bg);
  color: var(--night-text);
  border-color: var(--dark-bg);
}
.r-card.dark .r-num { color: var(--accent-2); }
.r-card.dark .r-who { color: var(--paper); }
.r-card.dark .r-note { color: var(--night-dim); }
.r-card .stamp {
  position: absolute;
  top: 14px; right: 14px;
  width: 64px; height: 64px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  color: var(--accent-d);
  text-align: center;
  line-height: 1.1;
  transform: rotate(-8deg);
  opacity: .85;
}

.hero-testimonial {
  max-width: 960px;
  margin: 0 auto 120px;
  padding: 60px 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.hero-testimonial .q-mark {
  position: absolute;
  top: 40px; left: -20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 120px;
  line-height: 0.3;
  color: var(--accent);
  opacity: .4;
}
.hero-testimonial q {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.45;
  color: var(--ink);
  quotes: none;
  text-wrap: balance;
}
.hero-testimonial q p { margin-bottom: 1.1em; }
.hero-testimonial q::before, .hero-testimonial q::after { content: none; }
.hero-testimonial .attrib {
  margin-top: 32px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-d);
  font-weight: 600;
}

.stories-header {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 34px);
  margin-bottom: 48px;
  max-width: 600px;
}
.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 120px;
}
.story-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .35s ease;
}
.story-card:hover { transform: translateY(-4px); }
.story-card .avatar {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--accent-d);
}
.story-card h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
}
.story-card h4 .name { font-style: italic; color: var(--accent-d); }
.story-card p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.story-card em, .story-card q {
  font-style: italic;
  color: var(--accent-d);
  quotes: '"' '"';
}
.story-card .tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-dim);
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

/* Case-study layout (upgraded story card) */
.story-card.case-study {
  padding: 0;
  overflow: hidden;
  gap: 0;
}
.case-photo {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--paper-deep, #e1d5b6);
  overflow: hidden;
}
.case-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
  transition: transform .6s ease;
}
.case-study:hover .case-photo img { transform: scale(1.03); }
.case-photo .case-tag {
  position: absolute;
  bottom: 14px; left: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(26,20,16,0.78);
  padding: 6px 10px;
  backdrop-filter: blur(4px);
}
.case-result {
  padding: 26px 28px 16px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
.case-result .case-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 3.4vw, 44px);
  line-height: 1;
  color: var(--accent-d);
  letter-spacing: -0.01em;
}
.case-result .case-period {
  margin-top: 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
}
.case-body {
  padding: 22px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.case-body .case-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
  color: var(--accent-d);
  margin: 0;
}
.case-body p { margin: 0; }

.senja-block {
  margin: 0 auto 120px;
  padding: 48px;
  background: var(--paper);
  border: 1px dashed var(--rule);
  text-align: center;
}
.senja-block .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  margin-bottom: 10px;
}
.senja-block .hd {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.quote-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}
.q-mini {
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}
.q-mini q {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink);
  quotes: '"' '"';
}
.q-mini .who {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-d);
}
.aggregate {
  margin-top: 72px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-dim);
}
.aggregate .stars {
  display: inline-block;
  margin-right: 8px;
  color: var(--accent);
  font-size: 16px;
  letter-spacing: 0.2em;
}

/* ============ SECTION J — INVESTMENT ============ */
.invest { padding: 160px 0; background: var(--paper); position: relative; }
.invest .section-h { text-align: center; max-width: 780px; margin: 0 auto 24px; }
.invest .intro {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 80px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
}
.tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1080px;
  margin: 0 auto 72px;
}
.tier {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 48px 40px;
  position: relative;
  display: flex; flex-direction: column;
  transition: transform .35s ease, box-shadow .35s ease;
}
.tier:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -25px rgba(42,34,22,.25); }
.tier.premium {
  background: var(--dark-bg);
  color: var(--night-text);
  border-color: var(--dark-bg);
}
.tier .ribbon {
  position: absolute;
  top: 0; right: 32px;
  transform: translateY(-50%);
  background: var(--accent);
  color: var(--paper);
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
}
.tier .tier-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-dim);
  margin-bottom: 12px;
}
.tier.premium .tier-label { color: var(--night-dim); }
.tier .tier-name {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.tier.premium .tier-name { color: var(--paper); }
.tier .price-row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px;
  margin-bottom: 6px;
}
.tier .price {
  font-family: var(--serif);
  font-size: 54px;
  color: var(--accent-d);
  line-height: 1;
  letter-spacing: -0.02em;
}
.tier.premium .price { color: var(--accent-2); }
.tier .price-was {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--ink-dim);
  text-decoration: line-through;
}
.tier.premium .price-was { color: var(--night-dim); }
.tier .code-hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-dim);
  margin-bottom: 32px;
}
.tier.premium .code-hint { color: var(--night-dim); }
.tier .code-hint code {
  font-family: var(--mono);
  font-size: 12px;
  padding: 2px 8px;
  background: rgba(180,84,46,.10);
  color: var(--accent-d);
  letter-spacing: 0.1em;
}
.tier.premium .code-hint code { color: var(--accent-2); background: rgba(198,106,58,.12); }

.tier .includes {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: grid; gap: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}
.tier.premium .includes { border-top-color: rgba(214,202,176,.18); }
.tier .includes li {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  padding-left: 22px;
  position: relative;
}
.tier .includes li::before {
  content: '×';
  position: absolute; left: 0; top: 0;
  font-family: var(--serif);
  color: var(--accent);
  font-size: 18px;
  font-style: italic;
}
.tier.premium .includes li { color: var(--night-text); }
.tier.premium .includes li::before { color: var(--accent-2); }

.tier .cta-tier {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--accent);
  color: var(--paper);
  padding: 22px 26px;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: auto;
  transition: background .3s;
  border: none;
  width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.tier .cta-tier:hover { background: var(--accent-d); }
.tier.premium .cta-tier { background: var(--accent-2); color: var(--ink); }
.tier.premium .cta-tier:hover { background: var(--paper); }
.tier .cta-tier .arrow {
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
}
.tier .spots {
  margin-top: 16px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--night-dim);
  text-align: center;
}
.tier .spots b { color: var(--accent-2); font-weight: 400; }

/* Countdown */
.countdown {
  margin: 0 auto;
  max-width: 920px;
  padding: 40px 48px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  text-align: center;
}
.countdown.big {
  padding: 56px 48px;
}
.countdown .cd-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-d);
  margin-bottom: 20px;
}
.countdown .cd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 680px;
  margin: 0 auto;
}
.cd-unit {
  display: flex; flex-direction: column; gap: 6px;
}
.cd-unit .n {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cd-unit .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-dim);
}
.countdown .note {
  margin-top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-dim);
}

/* ============ SECTION K — FAQ ============ */
.faq { padding: 160px 0; background: var(--paper-2); }
.faq .section-h { max-width: 800px; margin-bottom: 64px; }
.faq-accordion { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 26px 4px;
  cursor: pointer;
  background: none; border: none;
  width: 100%;
  text-align: left;
  color: inherit;
  transition: background .3s;
}
.faq-head:hover { background: rgba(180,84,46,.04); }
.faq-head .q {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.35;
  color: var(--ink);
}
.faq-head .t {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--accent);
  transition: transform .35s;
  line-height: .6;
  align-self: center;
}
.faq-item.open .faq-head .t { transform: rotate(45deg); }
.faq-body { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.faq-body-inner {
  padding: 0 4px 28px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 820px;
}
.faq-body-inner em, .faq-body-inner i { color: var(--accent-d); font-style: italic; }
.faq-body-inner p { margin-bottom: 1em; }

/* ============ SECTION L — PERSONAL NOTE + FINAL ============ */
.note {
  background: var(--night);
  color: var(--night-text);
  padding: 160px 0 80px;
  position: relative;
}
.note::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(180,84,46,.1) 0%, transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
  pointer-events: none;
}
.note .container-narrow { position: relative; z-index: 1; }
.note .section-h {
  color: var(--paper);
  max-width: 700px;
  margin-bottom: 56px;
}
.note .letter {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.7;
  color: var(--night-text);
  max-width: 62ch;
}
.note .letter p { margin-bottom: 1.2em; }
.note .letter em, .note .letter i { color: var(--accent-2); font-style: italic; }
.note .letter .ital {
  display: block; margin-top: 1.5em;
  font-size: 18px;
}
.note .sig-block {
  margin-top: 48px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--night-dim);
}
.note .sig-block .sig {
  font-family: var(--hand);
  font-style: normal;
  font-size: 58px;
  color: var(--accent-2);
  display: inline-block;
  transform: rotate(-3deg);
  margin: 8px 0;
  line-height: 1.1;
  padding: 0 .2em .18em;
  overflow: visible;
}

.final-cta {
  margin-top: 120px;
  padding: 80px 48px;
  background: var(--night-2);
  border: 1px solid rgba(214,202,176,.12);
  text-align: center;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.final-cta .section-h {
  margin: 0 auto 48px;
  max-width: 700px;
  color: var(--paper);
}
.final-cta .cd-label { color: var(--accent-2); }
.final-cta .cd-unit .n { color: var(--paper); }
.final-cta .cd-unit .l { color: var(--night-dim); }
.final-cta .final-ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 760px;
  margin: 56px auto 0;
}
.final-cta .cta-tier {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  transition: all .3s;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
}
.final-cta .cta-tier.core {
  background: var(--accent); color: var(--paper); border: none;
}
.final-cta .cta-tier.core:hover { background: var(--accent-d); }
.final-cta .cta-tier.prem {
  background: transparent; color: var(--accent-2); border: 1px solid var(--accent-2);
}
.final-cta .cta-tier.prem:hover { background: var(--accent-2); color: var(--ink); }
.final-cta .final-micro {
  margin-top: 36px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--night-dim);
}

/* ============ FOOTER ============ */
.footer {
  background: var(--night);
  color: var(--night-dim);
  padding: 48px 32px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans);
  font-size: 12px;
  flex-wrap: wrap; gap: 18px;
  border-top: 1px solid rgba(214,202,176,.08);
}
.footer a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.footer a:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); }

/* ============ STICKY MOBILE CTA ============ */
.sticky-cta {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 60;
  display: none;
  background: var(--accent);
  color: var(--paper);
  padding: 14px 18px;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.4);
  justify-content: space-between;
  align-items: center;
}

/* ============ TWEAKS PANEL ============ */
.tweaks {
  position: fixed;
  right: 20px; bottom: 20px;
  width: 280px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 20px;
  z-index: 90;
  font-family: var(--sans);
  font-size: 12px;
  box-shadow: 0 20px 40px -12px rgba(42,34,22,.35);
  display: none;
}
.tweaks.open { display: block; }
.tweaks h4 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  margin-bottom: 12px;
  color: var(--accent-d);
}
.tweaks .field { margin-top: 14px; }
.tweaks .field label {
  display: block; margin-bottom: 6px;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-dim);
}
.tweaks select, .tweaks input[type=range] {
  width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 6px 8px;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink);
}
.tweaks .swatches { display: flex; gap: 8px; }
.tweaks .sw {
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .2s, border-color .2s;
}
.tweaks .sw:hover { transform: scale(1.1); }
.tweaks .sw.active { border-color: var(--ink); }
.tweaks .toggle { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ink); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-photo { max-width: 380px; margin-top: 24px; }
  .hero-sidebar { display: none; }

  .bento { grid-template-columns: 1fr 1fr; }
  .bento .card.big { grid-column: span 2; grid-row: auto; }

  .how-bento { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr 1fr; gap: 48px 32px; }
  .timeline::before { display: none; }
  .stories-grid { grid-template-columns: 1fr; }
  .results-collage { grid-template-columns: 1fr 1fr; }
  .results-collage .r-card.tall { grid-row: auto; }
  .tier-grid { grid-template-columns: 1fr; }
  .paths-grid { grid-template-columns: 1fr; }
  .paths-col + .paths-col { border-left: none; border-top: 1px solid var(--rule); }
  .quote-grid { grid-template-columns: 1fr; }
  .story-body { grid-template-columns: 1fr minmax(220px, 260px); gap: 40px; }
  .story-aside { position: static; }
  .story-collage { grid-template-columns: 1fr 1fr; }
  .story-collage .stamp { grid-column: 1 / -1; }
  .final-cta .final-ctas { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  section { padding: 96px 0 !important; }
  body { font-size: 16px; }
  .container, .container-narrow { padding: 0 22px; }
  /* Hide persistent top nav on mobile — sticky CTA at bottom is enough */
  .nav { display: none !important; }
  .hero { padding: 80px 0 60px; }
  .hero-pre { font-size: 18px; }
  .hero-sub { font-size: 17px; }

  /* Mobile: Nik sits slightly right of frame center — 65% keeps him visible
     without pushing him off-screen or hiding the left context */
  .hero-bg-frame .hero-bg-video {
    object-position: 65% center !important;
  }
  /* Mobile: darken the top-half gradient further so hero copy stays legible;
     keep the bottom clear where Nik is visible. */
  .hero-bg-vignette {
    background:
      linear-gradient(180deg,
        rgba(26,20,16,0.96) 0%,
        rgba(26,20,16,0.88) 35%,
        rgba(26,20,16,0.70) 58%,
        rgba(26,20,16,0.38) 80%,
        rgba(26,20,16,0.12) 100%);
  }

  /* Story on mobile: stack single column, photos ABOVE the prose */
  .story-body { grid-template-columns: 1fr !important; gap: 48px !important; }
  .story-aside { order: -1; position: static !important; }
  .story-aside .aside-stats { grid-template-columns: 1fr 1fr; }

  .bento { grid-template-columns: 1fr; }
  .bento .card.big { grid-column: auto; }

  .results-collage { grid-template-columns: 1fr; }
  .stanza { font-size: 19px; padding-left: 56px; }
  .stanza .num { font-size: 30px; }

  .acc-head { grid-template-columns: 40px 1fr auto; gap: 14px; }
  .acc-head .title { font-size: 18px; }
  .acc-head .title .sub { font-size: 13px; }
  .acc-body-inner { padding-left: 54px; font-size: 15.5px; }

  .cd-unit .n { font-size: 36px; }
  .countdown { padding: 28px 20px; }
  .countdown.big { padding: 36px 20px; }

  .premium-panel { padding: 44px 26px; }
  .final-cta { padding: 48px 22px; }

  .sticky-cta { display: flex; }
  .nav-cta { display: none; }

  .tier { padding: 36px 26px; }
  .tier .price { font-size: 42px; }

  .tweaks { width: calc(100% - 24px); right: 12px; bottom: 12px; }

  .quote-grid { gap: 8px; }
  .paths-col { padding: 36px 26px; }

  .story-collage { grid-template-columns: 1fr; gap: 60px; }
  .story-collage .photo.b { margin-top: 0; }
  .pullquote { margin-top: 80px; }
  .pullquote .mark { font-size: 90px; }

  .marginalia { display: none; }
}


/* =========================================================
   V2 ADDITIONS — atmospheric hero video, editorial cards,
   carousel, path contrast, work-places grid, drop caps.
   ========================================================= */

/* ---- HERO atmospheric video (replaces polaroid) ---- */
.hero-video {
  position: relative;
  aspect-ratio: 4/5;
  max-width: 420px;
  transform: rotate(0.8deg);
  margin-top: 12px;
}
.hero-video .video-frame {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 2px;
  box-shadow:
    0 40px 80px -30px rgba(26,22,18,.55),
    0 10px 24px -6px rgba(26,22,18,.28),
    inset 0 0 0 1px rgba(214,202,176,.08);
  overflow: hidden;
}
.hero-video .video-frame .ph {
  position: absolute; inset: 0;
  border: none;
  padding: 32px;
}
.hero-video .play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(239,230,212,0.92);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: transform .3s ease;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.5);
  z-index: 2;
}
.hero-video .play:hover { transform: translate(-50%,-50%) scale(1.08); }
.hero-video .play span { margin-left: 4px; }
.hero-video .caption {
  position: absolute;
  bottom: -38px; right: 0;
  font-family: var(--hand);
  font-size: 22px;
  color: var(--accent-d);
  transform: rotate(-2deg);
  padding: 0 .15em .1em;
  line-height: 1.15;
}
.hero-video .tape {
  top: -10px; left: 30%;
}
@media (max-width: 900px) {
  .hero-video { max-width: 380px; margin: 24px auto 0; }
}

/* ---- RECOGNITION — dark editorial cards ---- */
.recognition {
  background: var(--night);
  color: var(--night-text);
  padding: 140px 0;
  position: relative;
}
.recognition::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse at top, rgba(200,166,106,.04), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(199,91,44,.03), transparent 70%);
  pointer-events: none;
}
.recognition .container-narrow { position: relative; }
.recognition .section-label { color: var(--accent-2); }
.recognition .section-label .num { color: var(--accent-2); }
.recognition .section-h { color: var(--night-text); }
.recognition .section-h em { color: var(--accent-2); }
.recognition .intro { color: var(--night-dim); }
.recognition-closer { color: var(--night-dim); border-color: rgba(200,166,106,.18) !important; }
.recognition-closer em { color: var(--accent-2); }

.recognition .stanzas {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  margin-top: 70px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.recognition .stanza {
  position: relative;
  padding: 56px 40px 40px;
  background: var(--night-2);
  border: 1px solid rgba(200,166,106,.14);
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--night-text);
  display: flex; flex-direction: column;
  gap: 20px;
  min-height: 460px;
}
.recognition .stanza::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 3px;
  background: var(--accent-2);
}
.recognition .stanza::after {
  content: '';
  position: absolute;
  top: 7px; left: 24px; right: 24px;
  height: 1px;
  background: var(--accent-2);
  opacity: .4;
}
.recognition .stanza .sym {
  font-family: var(--serif);
  font-size: 48px;
  color: var(--accent-2);
  line-height: 1;
  align-self: flex-start;
}
.recognition .stanza .glyph-meaning {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--night-dim);
  margin-top: -14px;
  display: block;
}
.recognition .stanza .num {
  display: block;
  position: static;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 0;
  transform: none;
}
.recognition .stanza em { color: var(--accent-2); font-style: italic; }
.recognition .stanza .cap {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
  color: var(--paper);
  margin-bottom: 2px;
}
.recognition .stanza .foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(200,166,106,.2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--night-dim);
}
@media (max-width: 900px) {
  .recognition .stanzas { grid-template-columns: 1fr; gap: 20px; }
}

/* ---- WORLD SHIFTING — carousel chapters ---- */
.shift-carousel {
  margin-top: 56px;
  position: relative;
}
.shift-track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 20px 4px 40px;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.shift-track:active { cursor: grabbing; }
.shift-track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
/* Fade edges on mobile so users see there's more to swipe */
.shift-carousel::before,
.shift-carousel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 2;
  transition: opacity .3s;
}
.shift-carousel::before {
  left: 0;
  background: linear-gradient(90deg, var(--night) 0%, transparent 100%);
}
.shift-carousel::after {
  right: 0;
  background: linear-gradient(-90deg, var(--night) 0%, transparent 100%);
}
.shift-hint {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 3;
  padding: 8px 14px;
  background: rgba(180,84,46,0.85);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 999px;
  pointer-events: none;
  animation: shiftHintPulse 2.4s ease-in-out 1s 2 forwards;
  opacity: 0;
}
@keyframes shiftHintPulse {
  0% { opacity: 0; transform: translate(12px, -50%); }
  25% { opacity: 1; transform: translate(0, -50%); }
  60% { opacity: 1; transform: translate(-6px, -50%); }
  100% { opacity: 0; transform: translate(-20px, -50%); }
}
.shift-track::-webkit-scrollbar { height: 6px; }
.shift-track::-webkit-scrollbar-track { background: rgba(214,202,176,.08); }
.shift-track::-webkit-scrollbar-thumb { background: rgba(214,202,176,.28); border-radius: 3px; }
.shift-chapter {
  flex: 0 0 calc(50% - 14px);
  min-width: 380px;
  scroll-snap-align: start;
  background: rgba(214,202,176,0.04);
  border: 1px solid rgba(214,202,176,0.14);
  padding: 40px 36px;
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
}
.shift-chapter::before {
  content: '';
  position: absolute;
  top: 0; left: 28px; right: 28px;
  height: 2px;
  background: rgba(214,202,176,0.3);
}
.shift-chapter .chap-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--night-dim);
}
.shift-chapter .chap-sym {
  font-family: var(--serif);
  font-size: 46px;
  color: var(--accent-2);
  line-height: 1;
  margin-top: -6px;
}
.shift-chapter .chap-meaning {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--night-dim);
  margin-top: -14px;
  display: block;
}
.shift-chapter .chap-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--night-text);
  line-height: 1.25;
}
.shift-chapter .chap-body {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
  color: var(--night-dim);
}
.shift-chapter .chap-body em { color: var(--accent-2); font-style: italic; }
.shift-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding: 0 4px;
}
.shift-nav .dots {
  display: flex; gap: 8px;
}
.shift-nav .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(214,202,176,0.2);
  border: none;
  cursor: pointer;
  transition: background .2s;
}
.shift-nav .dot.on { background: var(--accent-2); }
.shift-nav .arrows { display: flex; gap: 10px; }
.shift-nav .arrow-btn {
  width: 42px; height: 42px;
  border: 1px solid rgba(214,202,176,0.2);
  background: transparent;
  color: var(--night-text);
  font-family: var(--serif);
  font-size: 18px;
  cursor: pointer;
  transition: all .2s;
}
.shift-nav .arrow-btn:hover {
  background: rgba(214,202,176,0.08);
  border-color: rgba(214,202,176,0.4);
}
@media (max-width: 900px) {
  .shift-chapter { flex: 0 0 85%; min-width: 0; padding: 32px 24px; }
}

/* ---- COACH ≠ GUIDE — card variants ---- */
.bento .card.dark-card {
  background: var(--night);
  color: var(--night-text);
  border-color: rgba(214,202,176,0.12);
}
.bento .card.dark-card .label { color: var(--night-dim); }
.bento .card.dark-card .line { color: var(--night-text); }
.bento .card.dark-card .divider { background: rgba(214,202,176,0.14); }
.bento .card.dark-card .idx { color: var(--night-dim); }
.bento .card.dark-card em { color: var(--accent-2) !important; }
.bento .card .big-glyph {
  position: absolute;
  top: 24px; right: 28px;
  font-family: var(--serif);
  font-size: 54px;
  color: var(--accent-d);
  opacity: .85;
  line-height: 1;
}
.bento .card.dark-card .big-glyph { color: var(--accent-2); }

/* ---- TWO PATHS — dark vs light contrast ---- */
.paths-col.a {
  background: var(--paper-2);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
}
.paths-col.a h3 { color: var(--ink); }
.paths-col.a .tag {
  background: rgba(42,34,22,.08);
  color: var(--ink-dim);
  border-color: var(--rule);
}
.paths-col.b {
  background: var(--night);
  color: var(--night-text);
  border: 1px solid rgba(214,202,176,0.14);
  box-shadow: 0 30px 80px -30px rgba(26,22,18,.5);
}
.paths-col.b h3 { color: var(--night-text); }
.paths-col.b p { color: var(--night-dim); }
.paths-col.b em { color: var(--accent-2) !important; font-style: italic; }
.paths-col.b strong { color: var(--night-text); }
.paths-col.b .tag {
  background: rgba(214,202,176,0.06);
  color: var(--accent-2);
  border-color: rgba(214,202,176,0.22);
}

/* ---- WORK-PLACES quad grid ---- */
.workplaces {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 56px 0 72px;
}
.workplaces .wp {
  position: relative;
  aspect-ratio: 4/5;
}
.workplaces .wp .ph {
  width: 100%; height: 100%;
  padding: 18px;
}
.workplaces .wp .wp-caption {
  position: absolute;
  bottom: -38px; left: 0;
  font-family: var(--hand);
  font-size: 30px;
  font-weight: 500;
  color: var(--accent-d);
  transform: rotate(-1.2deg);
  padding: 0 .15em .15em;
  line-height: 1.1;
  white-space: nowrap;
  transform-origin: left bottom;
  letter-spacing: 0.01em;
}
.workplaces .wp:nth-child(even) { transform: rotate(0.8deg); }
.workplaces .wp:nth-child(odd) { transform: rotate(-0.6deg); }
.workplaces-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  margin-bottom: 10px;
}
.workplaces-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--ink);
  text-align: center;
  margin-bottom: 6px;
}
@media (max-width: 900px) {
  .workplaces { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
}

/* ---- DROP CAPS for editorial prose ---- */
.story-body .prose > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  float: left;
  font-size: 72px;
  line-height: .88;
  padding: 6px 10px 0 0;
  color: var(--accent-d);
}

/* ---- IMPLEMENTATION SECRETS split spacing ---- */
.premium-items .premium-item + .premium-item { margin-top: 24px; }

/* ---- REAL IMAGE INTEGRATION ---- */
/* Hero background portrait */
.hero-bg-frame .hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.55;
  filter: saturate(0.85) contrast(1.05);
  z-index: 0;
}
/* Hero background video — base rule so it actually fills the frame.
   Without this, the video renders at intrinsic 1920x1080 static-positioned
   and overflows (only "centered" by accident on wide viewports). */
.hero-bg-frame .hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}
.hero-bg-frame .bg-tag-tl,
.hero-bg-frame .bg-tag-tr,
.hero-bg-frame .bg-tag-bl,
.hero-bg-frame .bg-tag-br {
  z-index: 2;
  color: rgba(244, 239, 230, 0.7);
}

/* Workplaces: image fills the card with gentle photo treatment */
.workplaces .wp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  filter: saturate(0.88) contrast(1.03);
  box-shadow: 0 6px 20px rgba(30, 26, 20, 0.08);
  display: block;
}

/* Story aside photos — images inherit the existing .photo frame */
.story-aside .photo { overflow: hidden; border-radius: 4px; }
.story-aside .photo img { display: block; border-radius: 4px; }

/* ---- HERO · guides avatar strip ---- */
.guides-strip {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guides-avatars {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.guides-avatars img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--paper, #f4efe6);
  margin-left: -10px;
  box-shadow: 0 2px 6px rgba(30, 26, 20, 0.12);
  transition: transform .2s ease;
}
.guides-avatars img:first-child { margin-left: 0; }
.guides-avatars img:hover {
  transform: translateY(-3px);
  z-index: 2;
}
.guides-strip-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint, #b5a994);
  font-style: italic;
}
@media (max-width: 520px) {
  .guides-avatars img { width: 32px; height: 32px; margin-left: -8px; }
  .guides-avatars img:nth-child(n+11) { display: none; }
}

/* ---- INSIDE · heading row (text left · course image right) ---- */
.inside-intro {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  margin: 4px 0 56px;
}
.inside-intro-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(30, 26, 20, 0.12);
}
@media (max-width: 820px) {
  .inside-intro {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .inside-intro-img img { max-width: 480px; margin: 0 auto; }
}

/* ---- PREMIUM · stacked rows (image left · text right), dark panel context ---- */
.premium-rows {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 8px;
}
.premium-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid rgba(214, 202, 176, 0.1);
}
.premium-row:last-child { border-bottom: none; }
.premium-row-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
}
.premium-row-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.premium-row-text .premium-num {
  font-family: var(--hand, 'Caveat', cursive);
  font-size: 22px;
  color: var(--accent-2, #c66a3a);
  display: block;
  margin-bottom: 6px;
}
.premium-row-text h4 {
  font-family: var(--serif, Georgia, serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: 10px;
  color: var(--paper, #f4efe6);
}
.premium-row-text p {
  color: var(--night-dim, rgba(214, 202, 176, 0.75));
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 0;
}
@media (max-width: 720px) {
  .premium-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .premium-row-img { aspect-ratio: 16/10; max-width: 360px; }
}

/* ---- BONUS ROWS (image left · description right) ---- */
.bonus-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 24px;
}
.bonus-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule, rgba(44,36,24,.12));
}
.bonus-row:last-child { border-bottom: none; }
.bonus-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(44, 36, 24, 0.04);
}
.bonus-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bonus-text .bonus-num {
  font-family: var(--hand, 'Caveat', cursive);
  font-size: 22px;
  color: var(--accent, #b4542e);
  display: block;
  margin-bottom: 6px;
}
.bonus-text .bonus-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: 8px;
}
.bonus-text .bonus-sub {
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint, #b5a994);
  margin-bottom: 12px;
}
.bonus-text p {
  color: var(--ink-dim, #7a6e5e);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 0;
}
@media (max-width: 720px) {
  .bonus-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .bonus-img { aspect-ratio: 16/10; max-width: 360px; }
}

/* ---- PREMIUM · mockup inside items ---- */
.premium-mockup {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 16px;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* ---- LIVE YOUTUBE embed inside the video-frame ---- */
.video-frame.video-live { cursor: default; }
.video-frame.video-live iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-frame.video-live .play,
.video-frame.video-live .ph,
.video-frame.video-live .label { display: none; }

/* ---- SENJA embed container breathing room ---- */
.senja-block .senja-embed {
  margin-top: 12px;
  min-height: 1px;
}

/* ---- THRIVECART trigger: no default wrapper styling ---- */
.tc-v2-embeddable-trigger {
  display: block;
  width: 100%;
}
.tc-v2-embeddable-trigger .cta-tier { cursor: pointer; }

/* ---- THRIVECART embed target: always hidden (overlay checkout) ---- */
.tc-v2-embeddable-target {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Prevent body/html from growing past actual content */
html, body {
  overflow-x: hidden;
}

/* ---- Money / dollar-amount typography (fixes italic "$" looking like "M") ---- */
.money {
  font-style: normal;
  font-weight: 500;
  color: var(--accent-d);
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0.01em;
  /* Use the serif but upright so $ glyph renders properly */
  font-family: var(--serif);
}

/* ---- Handwritten full signature ---- */
.signature-block .sig,
.sig-block .sig {
  font-family: var(--hand);
  font-size: 44px;
  line-height: 1;
  color: var(--ink);
  margin: 10px 0 0;
  display: inline-block;
  transform: rotate(-1deg);
}
.sig-block .sig {
  color: var(--paper);
}

/* ---- YouTube video: smaller, with a soft warm glow ---- */
.video-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.video-block .video-frame {
  max-width: 620px;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(180, 84, 46, 0.18),
    0 20px 60px -20px rgba(180, 84, 46, 0.45),
    0 40px 120px -40px rgba(180, 84, 46, 0.35),
    0 0 0 12px rgba(180, 84, 46, 0.04);
  transition: box-shadow 0.4s ease;
}
.video-block .video-frame:hover {
  box-shadow:
    0 0 0 1px rgba(180, 84, 46, 0.28),
    0 24px 70px -20px rgba(180, 84, 46, 0.55),
    0 50px 140px -40px rgba(180, 84, 46, 0.45),
    0 0 0 14px rgba(180, 84, 46, 0.06);
}
.video-block .video-frame iframe,
.video-block .video-frame .ph {
  border-radius: 8px;
}
.video-block .video-frame .tape { display: none; }

/* ---- Countdown footer note: de-emphasize, don't nest inside the big box ---- */
.countdown .note {
  display: block;
  margin-top: 20px;
  font-family: var(--mono, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  line-height: 1.6;
  font-weight: 400;
  text-align: center;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  background: transparent;
  padding: 0;
  border: none;
}
.night .countdown .note { color: var(--night-dim, rgba(214, 202, 176, 0.7)); }

/* ---- MOCKUP DEPTH: subtle 3D-tangible glow + shadow on what's-included images ---- */
.bonus-img,
.premium-row-img,
.inside-intro-img img {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 0 0 1px rgba(44, 36, 24, 0.08),
    0 2px 4px rgba(44, 36, 24, 0.04),
    0 8px 20px -4px rgba(180, 84, 46, 0.14),
    0 22px 44px -12px rgba(44, 36, 24, 0.22);
  transition: transform 0.35s cubic-bezier(.2,.7,.3,1), box-shadow 0.35s;
}
.premium-row-img {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 0 0 1px rgba(214, 202, 176, 0.1),
    0 10px 30px -6px rgba(0, 0, 0, 0.45),
    0 24px 60px -12px rgba(180, 84, 46, 0.28);
}
.bonus-img:hover,
.premium-row-img:hover,
.inside-intro-img img:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 0 0 1px rgba(44, 36, 24, 0.12),
    0 4px 8px rgba(44, 36, 24, 0.06),
    0 14px 28px -4px rgba(180, 84, 46, 0.2),
    0 30px 60px -14px rgba(44, 36, 24, 0.3);
}

/* ---- IMPLEMENTATION SECRETS · fix number visibility ---- */
/* Nikita (handwritten) renders single-letter Roman numerals invisibly
   on dark backgrounds. Use serif italic, larger and brighter, instead. */
.premium-row-text .premium-num {
  display: block !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent-2, #c66a3a);
  margin: 0 0 14px;
  padding-top: 4px;
  opacity: 1;
}
.premium-row { align-items: flex-start; }
.premium-row-text { padding-top: 4px; }

/* ---- BENEFIT LEAD sentence (why you should care) ---- */
.benefit-lead {
  font-family: var(--serif, Georgia, serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--accent-d, #8c3d1f);
  padding: 10px 0 10px 16px;
  border-left: 2px solid var(--accent, #b4542e);
  margin-bottom: 14px !important;
  background: rgba(180, 84, 46, 0.035);
}
.benefit-lead.dark {
  color: var(--paper, #f4efe6);
  border-left-color: var(--accent-2, #c66a3a);
  background: rgba(198, 106, 58, 0.08);
}

/* ---- WORKPLACES: single shared caption under the quad ---- */
.workplaces-single-caption {
  margin-top: 56px !important;
  text-align: center;
  font-family: var(--hand, 'Caveat', cursive);
  font-size: 22px;
  line-height: 1.6;
  color: var(--accent-d, #8c3d1f);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-style: normal;
  transform: rotate(-0.3deg);
}

/* ---- WISDOM ECONOMY carousel: tighten space ---- */
.night .shift-carousel { margin-top: 32px !important; }

/* ---- MOVING GRAIN (16mm film feel): animate noise position ---- */
.grain {
  animation: grain-shift 0.8s steps(8) infinite;
  will-change: transform;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-2%, -3%); }
  24%  { transform: translate(-5%, 2%); }
  36%  { transform: translate(3%, -4%); }
  48%  { transform: translate(-3%, 5%); }
  60%  { transform: translate(2%, 3%); }
  72%  { transform: translate(-4%, -2%); }
  84%  { transform: translate(3%, 4%); }
  100% { transform: translate(0, 0); }
}
/* grain must be oversized so translate doesn't show edges */
.grain {
  top: -5%; left: -5%; right: -5%; bottom: -5%;
  width: 110%; height: 110%;
}
/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}