/* Sober Strong — Black + White + Pink
   Aligned with SOBER_STRONG_BRAND_PERSONALITY + STRATEGY_AND_BUILD_GUIDE.
   No cream, no soft pastels, no serifs. Bold sans, high contrast, pink accent.
*/

/* Inter trimmed from 7 weights → 4 (400/600/700/900). JetBrains Mono trimmed
   to 500. If you need a weight back, add it here AND verify it's actually
   referenced in a font-weight rule before paying the download cost. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;600;700;900&family=JetBrains+Mono:wght@500&display=swap');

:root {
  /* Surfaces */
  --bg:        #ffffff;
  --bg-alt:    #f6f6f7;
  --bg-dark:   #0a0a0a;
  --bg-deep:   #1a1a1a;

  /* Type */
  --text:      #0a0a0a;
  --heading:   #0a0a0a;
  --muted:     #5a5a5a;
  --on-dark:   #ffffff;
  --on-dark-muted: rgba(255,255,255,0.65);

  /* Pink (her brand color) + bright accent backups */
  --pink:      #ff3d6e;
  --pink-hot:  #ff1a52;
  --pink-soft: #ffb4c5;
  --magenta:   #d837a3;
  --purple:    #7a3ec4;
  --teal:      #00d4e0;
  --yellow:    #ffd60a;

  --accent:    #ff3d6e;       /* hot pink — primary CTA + accent */
  --accent-dk: #d61f4f;

  /* Structural */
  --border:    #e8e8e8;
  --border-dk: #1f1f1f;
  --shadow:    0 8px 32px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 40px 100px rgba(0, 0, 0, 0.14);

  /* Type stack */
  --display:   'Archivo Black', 'Inter', system-ui, sans-serif;
  --sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono:      'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Surfaces — modern: pure white, near-black, no paper warmth */
  --paper:       #f6f6f7;   /* same as bg-alt — kept for back-compat in any remaining selectors */
  --paper-soft:  #ededee;
  --paper-line:  #e8e8e8;
  --ink-soft:    rgba(10, 10, 10, 0.82);

  /* Layout */
  --maxw:      1280px;
  --radius:    6px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --ease:      cubic-bezier(.2,.7,.2,1);

  /* Gradients (used sparingly — for hero + stats only) */
  --grad-hero: linear-gradient(125deg, #ff3d6e 0%, #d837a3 30%, #7a3ec4 65%, #1a1a1a 100%);
  --grad-text: linear-gradient(90deg, #ff3d6e 0%, #d837a3 50%, #7a3ec4 100%);
  --grad-stat: linear-gradient(180deg, #ff3d6e 0%, #d837a3 50%, #7a3ec4 100%);
}

* { box-sizing: border-box; }
*::selection { background: var(--accent); color: #fff; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

a {
  color: var(--accent-dk);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
/* Underline-on-hover applies to INLINE text links only — never to button-shaped
   anchors (.btn, .nav-cta, .brand, .card). Without this scope, the global
   a:hover would repaint the bottom edge of any ghost/outline button on hover
   and (combined with the old `.btn { border-bottom: 0 !important }`) would
   visually slice the bottom off pill buttons. See coaching/calendar fixes. */
a:not(.btn):not(.nav-cta):not(.brand):not(.card):hover {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   SKIP-TO-CONTENT — keyboard accessibility
   Visible only when focused via Tab. Sits at top of the document so
   screen-reader / keyboard users can bypass the header nav.
   ============================================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 18px;
  background: var(--heading);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  outline: 3px solid var(--accent);
  outline-offset: 0;
}

/* ============================================================
   TYPOGRAPHY — bold, no fluff, no serif
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 900; /* Archivo Black is single-weight; this is for fallback Inter */
  color: var(--heading);
  letter-spacing: -0.035em;
  line-height: .95;
  margin: 0 0 .5em;
  text-transform: none;
}
h1 { font-size: clamp(3rem, 8vw, 7.5rem); }
h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); }
h3 { font-family: var(--sans); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -.02em; line-height: 1.1; }
h4 { font-family: var(--sans); font-weight: 700; font-size: 1.1rem; letter-spacing: -.005em; }

p { margin: 0 0 1.1em; }

.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-feature-settings: "ss01", "zero";
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--accent);
  flex-shrink: 0;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; position: relative; }
.narrow    { max-width: 800px; margin: 0 auto; padding: 0 32px; position: relative; }

@media (max-width: 720px) {
  .container, .narrow { padding: 0 20px; }
}

/* ---------- Reveal-on-scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
[data-reveal="fade"]    { transform: none; }
[data-reveal="left"]    { transform: translateX(-40px); }
[data-reveal="right"]   { transform: translateX(40px); }
[data-reveal="zoom"]    { transform: scale(.94); }
[data-reveal].in-view   { opacity: 1; transform: none; }

[data-stagger] > * {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-stagger].in-view > * { opacity: 1; transform: none; }
[data-stagger].in-view > *:nth-child(1) { transition-delay: .05s; }
[data-stagger].in-view > *:nth-child(2) { transition-delay: .15s; }
[data-stagger].in-view > *:nth-child(3) { transition-delay: .25s; }
[data-stagger].in-view > *:nth-child(4) { transition-delay: .35s; }
[data-stagger].in-view > *:nth-child(5) { transition-delay: .45s; }
[data-stagger].in-view > *:nth-child(6) { transition-delay: .55s; }

/* Word-by-word reveal — JS wraps each word in a span.word.
   Each word slides up from below as the parent .reveal-words enters view. */
.reveal-words .word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Headlines use line-height: .95 (tighter than 1), so the .word-mask box
     doesn't have room for descenders (g, p, y, q, j) — overflow: hidden
     clips their tails. Pad the bottom by .18em to expose descenders, then
     pull layout back up with an equal negative margin so headline line
     spacing is unaffected. This trick gives clip-room without inflating
     the inline-block's contribution to line height. */
  padding-bottom: .18em;
  margin-bottom: -.18em;
}
.reveal-words .word {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform .9s var(--ease), opacity .9s var(--ease);
}
.reveal-words.in-view .word { transform: none; opacity: 1; }
.reveal-words.in-view .word:nth-child(1)  { transition-delay: .04s; }
.reveal-words.in-view .word:nth-child(2)  { transition-delay: .10s; }
.reveal-words.in-view .word:nth-child(3)  { transition-delay: .16s; }
.reveal-words.in-view .word:nth-child(4)  { transition-delay: .22s; }
.reveal-words.in-view .word:nth-child(5)  { transition-delay: .28s; }
.reveal-words.in-view .word:nth-child(6)  { transition-delay: .34s; }
.reveal-words.in-view .word:nth-child(7)  { transition-delay: .40s; }
.reveal-words.in-view .word:nth-child(8)  { transition-delay: .46s; }
.reveal-words.in-view .word:nth-child(9)  { transition-delay: .52s; }
.reveal-words.in-view .word:nth-child(10) { transition-delay: .58s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-stagger] > * { opacity: 1; transform: none !important; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   NAV — minimalist FitFlow style (just wordmark)
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  transition: background .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(250, 246, 240, 0.85);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px 32px;
  gap: 24px;
}
@media (max-width: 480px) {
  .nav { padding: 20px 18px; gap: 12px; }
  .brand { font-size: 1.15rem; }
  .brand-mark { width: 26px; height: 26px; }
}
.brand {
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: -.03em;
  color: var(--heading);
  border-bottom: 0;
  display: flex; align-items: center; gap: 10px;
  transition: color .3s var(--ease);
  text-transform: uppercase;
  white-space: nowrap;
}
/* Home page sits over the dark hero photo — flip brand to white until scroll. */
body.has-dark-hero .site-header:not(.scrolled) .brand { color: #fff; }
.brand-mark {
  width: 32px; height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.nav-links {
  display: flex; gap: 32px; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.nav-links a {
  font-size: .9rem;
  font-weight: 500;
  border-bottom: 0;
  color: var(--text);
  transition: color .3s var(--ease);
  white-space: nowrap;
}
body.has-dark-hero .site-header:not(.scrolled) .nav-links a { color: rgba(255,255,255,0.92); }
.nav-links a:hover { color: var(--accent); }
.nav-links a.active { color: var(--accent); }

.nav-cta {
  background: #fff;
  color: var(--heading) !important;
  padding: 10px 18px 10px 22px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  border: 0;
  transition: background .25s var(--ease), transform .15s var(--ease);
}
.nav-cta::after { display: none !important; }
.nav-cta .arrow-circle {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--heading);
  color: #fff;
  display: grid; place-items: center;
  font-size: .8rem;
  transition: transform .25s var(--ease);
}
.nav-cta:hover { transform: translateY(-1px); }
.nav-cta:hover .arrow-circle { transform: rotate(45deg); background: var(--accent); }

.nav-toggle {
  display: none;
  background: none; border: 0;
  cursor: pointer;
  width: 44px; height: 44px;
  position: relative;
  z-index: 70;                  /* above .nav-links overlay (55) and grain (200 but pointer-events:none) */
  padding: 0;
  pointer-events: auto;         /* belt-and-suspenders against any inherited pointer-events: none */
  touch-action: manipulation;   /* removes iOS 300ms tap delay + prevents double-tap zoom on the icon */
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: var(--heading);
  border-radius: 2px;
  transition: transform .3s var(--ease), top .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
body.has-dark-hero .site-header:not(.scrolled) .nav-toggle span { background: #fff; }
body.menu-open .nav-toggle span { background: var(--heading); }
body.menu-open .nav-toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

@media (max-width: 1100px) {
  .nav-toggle { display: block; }

  /* Full-screen overlay menu */
  .nav-links {
    position: fixed;
    inset: 0;
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 32px;
    gap: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;          /* hard-hide so touch events absolutely cannot land on it when closed (iOS Safari treats opacity:0 elements as interactive otherwise) */
    transition: opacity .35s var(--ease), visibility 0s linear .35s;
    z-index: 55;
  }
  body.menu-open .nav-links {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity .35s var(--ease), visibility 0s linear 0s;
  }
  .nav-links li {
    list-style: none;
    width: 100%;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  body.menu-open .nav-links li { opacity: 1; transform: none; }
  body.menu-open .nav-links li:nth-child(1) { transition-delay: .12s; }
  body.menu-open .nav-links li:nth-child(2) { transition-delay: .18s; }
  body.menu-open .nav-links li:nth-child(3) { transition-delay: .24s; }
  body.menu-open .nav-links li:nth-child(4) { transition-delay: .30s; }
  body.menu-open .nav-links li:nth-child(5) { transition-delay: .36s; }
  body.menu-open .nav-links li:nth-child(6) { transition-delay: .42s; }
  body.menu-open .nav-links li:nth-child(7) { transition-delay: .48s; }
  .nav-links a {
    display: block;
    width: 100%;
    padding: 24px 0;
    font-family: var(--display);
    font-size: 2.2rem;
    letter-spacing: -.03em;
    color: var(--heading) !important;
    border-bottom: 0;
    text-transform: uppercase;
  }
  .nav-links a.nav-cta {
    background: transparent !important;
    color: var(--accent) !important;
    padding: 24px 0;
    border-radius: 0;
    justify-content: flex-start;
  }
  .nav-links a.nav-cta .arrow-circle {
    margin-left: auto;
    background: var(--accent);
    color: #fff;
  }
  body.menu-open { overflow: hidden; }
}

/* ============================================================
   BUTTONS — pill with arrow circle (FitFlow style)
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 22px 16px 28px;
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  border: 0;                 /* default: no border. Ghost variants restore a 2px border below — that's why we DON'T use !important on border-bottom: variants must be able to override. */
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  font-family: var(--sans);
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .08em;
  line-height: 1;            /* tight line-box so uppercase glyphs don't push the visual baseline off-center inside the pill */
  min-height: 56px;          /* consistent tap target; prevents collapse below arrow-circle height */
  box-sizing: border-box;
}
.btn:hover { transform: translateY(-2px); }
.btn .arrow-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .85rem;
  transition: transform .35s var(--ease), background .25s var(--ease);
}
.btn:hover .arrow-circle { transform: rotate(45deg); }

/* Primary = pink. The most visible CTA on the site. */
.btn-primary { background: var(--accent); color: #fff; padding-right: 8px; box-shadow: 0 8px 24px rgba(255, 61, 110, .3); }
.btn-primary .arrow-circle { background: #fff; color: var(--accent); }
.btn-primary:hover { background: var(--accent-dk); box-shadow: 0 16px 40px rgba(255, 61, 110, .45); }

/* Dark = solid black */
.btn-dark { background: var(--bg-dark); color: #fff; padding-right: 8px; }
.btn-dark .arrow-circle { background: var(--accent); color: #fff; }
.btn-dark:hover { background: var(--accent); }
.btn-dark:hover .arrow-circle { background: #fff; color: var(--accent); }

/* Accent = same as primary (alias for clarity in copy) */
.btn-accent { background: var(--accent); color: #fff; padding-right: 8px; box-shadow: 0 8px 24px rgba(255, 61, 110, .35); }
.btn-accent .arrow-circle { background: #fff; color: var(--accent); }
.btn-accent:hover { background: var(--accent-dk); box-shadow: 0 16px 40px rgba(255, 61, 110, .5); }

/* Ghost = outlined black */
.btn-ghost { background: transparent; color: var(--heading); border: 2px solid currentColor; padding: 14px 24px; }
.btn-ghost:hover { background: var(--heading); color: #fff; }

/* Ghost on dark backgrounds */
.btn-ghost-light { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.45); padding: 14px 24px; }
.btn-ghost-light:hover { background: #fff; color: var(--heading); border-color: #fff; }

/* ============================================================
   SECTIONS
   ============================================================ */
section { padding: 140px 0; position: relative; }
section.tight { padding: 80px 0; }
.section-warm { background: var(--bg-alt); }     /* was cream → light gray */
.section-deep { background: #efefef; }
.section-dark { background: var(--bg-dark); color: var(--on-dark); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark a { color: var(--accent); }
.section-dark .eyebrow { color: var(--accent); }
.section-dark p { color: var(--on-dark-muted); }

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 80px;
}
.section-head .eyebrow { display: inline-block; }
.section-head p {
  color: var(--muted);
  font-size: 1.02rem;
  max-width: 520px;
  margin: 18px auto 0;
}

@media (max-width: 880px) {
  section { padding: 72px 0; }
  section.tight { padding: 48px 0; }
  .section-head { margin-bottom: 48px; }
}
@media (max-width: 480px) {
  section { padding: 56px 0; }
  .section-head { margin-bottom: 36px; }
}

/* ============================================================
   HERO — full-bleed editorial
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 760px;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: flex-end;
  padding: 0 0 60px;
  background: #14101a;
}

/* Full-bleed photo. The photo div is taller than the hero (140%) so JS can
   translate it on the Y axis to "scroll through" Meghan as the user scrolls.
   Using transform: translate3d() instead of background-position keeps it
   GPU-composited (smooth 60fps, no CPU repaint per frame). */
.hero-photo {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 140%;
  /* 1920w derivative (~850KB) — original DSC02379.jpg was 25MB. */
  background-image: url('../photos/meghan-hero-1920.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Brand-gradient + bottom darken live on .hero (NOT .hero-photo) so they stay
   pinned to the hero and don't translate with the photo. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg,
    rgba(236, 95, 136, .42) 0%,
    rgba(193, 78, 156, .28) 30%,
    rgba(138, 79, 198, .22) 55%,
    rgba(91, 127, 196, .22) 78%,
    rgba(70, 163, 192, .28) 100%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(20, 16, 26, .15) 0%,
    rgba(20, 16, 26, 0) 22%,
    rgba(20, 16, 26, 0) 55%,
    rgba(20, 16, 26, .55) 100%);
  pointer-events: none;
}

/* Foreground content sits above the gradient overlays. */
.hero-trust, .hero-display, .hero-meta, .hero-grain { z-index: 2; }

@media (max-width: 880px) {
  /* On mobile, narrower screen + tall photo means cover already shows full
     head. Reduce the parallax extra-height to keep it gentle, AND swap to
     the 880w derivative (~180KB) so mobile doesn't download the 850KB
     desktop hero unnecessarily. */
  .hero-photo {
    height: 120%;
    background-image: url('../photos/meghan-hero-880.jpg');
  }
}
.hero-grain {
  position: absolute;
  inset: 0;
  opacity: .15;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Liquid Glass trust-bar pill — clickable, animated shine, links to YouTube.
   Spec: docs/superpowers/specs/2026-05-25-liquid-glass-trust-bar-design.md */
.hero-trust {
  position: absolute;
  top: 110px; left: 32px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .005em;
  color: rgba(255,255,255,.95);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 4px 24px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.25);
  transition:
    transform .25s cubic-bezier(.2,.7,.2,1),
    border-color .25s ease,
    box-shadow .25s ease;
}
/* Convex top-edge gloss — gives the pill 3D dimensionality */
.hero-trust::before {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent);
  border-radius: 999px 999px 0 0;
  pointer-events: none;
}
/* Shine sweep — diagonal white band travels across every 5s */
.hero-trust::after {
  content: "";
  position: absolute;
  top: 0; left: -110%;
  width: 55%; height: 100%;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,.55) 50%,
    transparent 70%);
  pointer-events: none;
  animation: hero-trust-shimmer 5s ease-in-out infinite;
}
@keyframes hero-trust-shimmer {
  0%, 18%   { left: -110%; }
  60%, 100% { left: 110%; }
}
.hero-trust:hover {
  transform: translateY(-1px) scale(1.02);
  border-color: rgba(255,255,255,.38);
  box-shadow:
    0 6px 32px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.25);
}
.hero-trust:focus-visible {
  outline: 2px solid rgba(255,255,255,.95);
  outline-offset: 3px;
}
.hero-trust .stars {
  color: var(--rose);
  letter-spacing: 1px;
  font-size: .9rem;
}
@media (max-width: 880px) {
  /* On mobile, take the pill out of absolute positioning so it doesn't sit
     over Meghan's face. Let it flow into the bottom content stack, just
     above the headline. */
  .hero-trust {
    position: static;
    align-self: flex-start;
    margin: 0 20px 20px;
    font-size: .72rem;
    padding: 8px 16px;
  }
  .hero-trust .stars { font-size: .8rem; }
}
/* Vestibular-safe fallback — kill the perpetual motion, keep the glass */
@media (prefers-reduced-motion: reduce) {
  .hero-trust::after { animation: none; opacity: 0; }
  .hero-trust { transition: none; }
}

.hero-display {
  font-family: var(--display);
  font-size: clamp(2.8rem, 9vw, 8.5rem);
  line-height: .92;
  letter-spacing: -.045em;
  color: #fff;
  text-wrap: balance;
  margin: 0;
  position: relative;
  z-index: 2;
  padding: 0 32px;
  max-width: var(--maxw);
  text-shadow: 0 4px 40px rgba(0, 0, 0, .35);
  text-transform: uppercase;
}
@media (max-width: 880px) {
  .hero-display { font-size: clamp(1.9rem, 8.5vw, 3.6rem); word-break: break-word; overflow-wrap: break-word; }
}
@media (max-width: 380px) {
  .hero-display { font-size: clamp(1.65rem, 8vw, 2.6rem); padding: 0 16px; }
}

.hero-meta {
  position: absolute;
  bottom: 80px; right: 32px;
  z-index: 2;
  text-align: right;
  max-width: 360px;
}
.hero-meta p {
  color: rgba(255,255,255,.92);
  font-size: .98rem;
  line-height: 1.45;
  margin: 0 0 18px;
}

@media (max-width: 880px) {
  .hero {
    min-height: 100svh;
    padding-bottom: 32px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
  }
  .hero-display {
    padding: 0 20px;
    margin-bottom: 24px;
    max-width: 100%;
    text-shadow: 0 4px 24px rgba(20,16,26,.4);
  }
  .hero-meta {
    position: static;
    max-width: none;
    padding: 0 20px;
    text-align: left;
  }
  .hero-meta p { font-size: .92rem; margin-bottom: 16px; }
  .hero-meta .btn { width: auto; max-width: 100%; align-self: flex-start; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px 0;
  background: var(--bg-dark);
  color: var(--on-dark);
  overflow: hidden;
  position: relative;
}
.marquee .marquee-label { color: var(--on-dark-muted); }
.marquee-track span { color: #fff; }
.marquee-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-bottom: 18px;
}
.marquee-track {
  display: flex;
  gap: 80px;
  width: max-content;
  animation: scroll 40s linear infinite;
  white-space: nowrap;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  color: #fff;
  letter-spacing: -.02em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 18px;
}
.marquee-track span::after {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 4px;
  flex-shrink: 0;
}
@keyframes scroll { to { transform: translateX(-50%); } }
.marquee::before, .marquee::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 100px; z-index: 1; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-dark), transparent); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, var(--bg-dark), transparent); }
@media (max-width: 720px) {
  .marquee-track { gap: 48px; animation-duration: 28s; }
  .marquee-track span { font-size: 1.2rem; gap: 14px; }
  .marquee::before, .marquee::after { width: 40px; }
}

/* ============================================================
   ABOUT (centered, like FitFlow's "Your Fitness, Your Flow.")
   ============================================================ */
.about-block {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.display-line {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.display-line .accent {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-block p {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 580px;
  margin: 28px auto 0;
}

/* Stacked photo carousel under the headline */
.stacked {
  position: relative;
  margin: 60px auto 0;
  max-width: 320px;
  height: 440px;
}
.stacked-card {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(160deg, var(--rose) 0%, var(--accent) 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: transform .5s var(--ease);
}
.stacked-card:nth-child(1) { transform: rotate(-6deg) translate(-20px, 8px); background: linear-gradient(160deg, var(--teal), var(--indigo)); opacity: .85; }
.stacked-card:nth-child(2) { transform: rotate(4deg) translate(20px, 4px); background: linear-gradient(160deg, var(--purple), var(--magenta)); opacity: .9; }
.stacked-card:nth-child(3) {
  transform: rotate(-1deg);
  background-image: url('../photos/meghan-hero-1920.jpg');
  background-size: cover;
  background-position: center 22%;
  background-repeat: no-repeat;
}
.stacked-card:nth-child(3)::before {
  /* Subtle gradient wash to keep the Founder label readable */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(20,16,26,.55) 100%);
}
.stacked:hover .stacked-card:nth-child(1) { transform: rotate(-12deg) translate(-60px, 18px); }
.stacked:hover .stacked-card:nth-child(2) { transform: rotate(10deg) translate(60px, 12px); }

.stacked-card-meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 24px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.45));
  color: #fff;
}
.stacked-card-meta h4 { color: #fff; font-size: 1.4rem; margin: 0; font-weight: 800; }
.stacked-card-meta span {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,.85);
}
.stacked-plus {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--heading);
  display: grid; place-items: center;
  font-size: 1rem;
  font-weight: 600;
  z-index: 2;
}

/* Massive ghost text behind stacked cards */
.ghost-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: clamp(4rem, 12vw, 11rem);
  line-height: .9;
  letter-spacing: -.05em;
  color: rgba(10, 10, 10, .055);
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
  z-index: 0;
  text-transform: uppercase;
}
.about-stage {
  position: relative;
  margin-top: 80px;
  min-height: 520px;
  display: grid;
  place-items: center;
}
@media (max-width: 720px) {
  .about-stage { margin-top: 56px; min-height: 420px; }
  .stacked { max-width: 260px; height: 360px; }
  .ghost-text { font-size: clamp(3.5rem, 18vw, 6rem); }
}

/* ============================================================
   STATS — typographic ledger, ascending scale, no gradient
   ============================================================ */
.section-stats { background: var(--bg); }

.stats-ledger {
  max-width: 1080px;
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}
.stat-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 32px 0 28px;
  border-bottom: 1px solid var(--border);
}
.stat-eyebrow {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  padding-top: 16px;
  font-feature-settings: "ss01", "zero";
}
.stat-row .stat-num {
  font-family: var(--display);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.045em;
  color: var(--heading);
  margin: 0;
  text-transform: uppercase;
}
.stat-row .stat-num .suffix {
  font-size: .42em;
  color: var(--muted);
  margin-left: 6px;
  letter-spacing: -.02em;
  font-weight: 800;
}
/* Ascending scale — eye lands on $36K */
.stat-small  .stat-num { font-size: clamp(3rem, 7vw, 5.4rem); }
.stat-medium .stat-num { font-size: clamp(4rem, 10vw, 7.6rem); }
.stat-large  .stat-num { font-size: clamp(5rem, 14vw, 10.5rem); color: var(--accent); }

.stats-attribution {
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-size: .88rem;
  font-style: italic;
  color: var(--muted);
  margin: 18px 0 0;
  text-align: right;
}

@media (max-width: 720px) {
  .stats-ledger { margin-top: 36px; }
  .stat-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 22px 0 18px;
  }
  .stat-eyebrow { padding-top: 0; font-size: .66rem; letter-spacing: .16em; }
}

/* ============================================================
   BEFORE / AFTER STORIES
   ============================================================ */
.beforeafter {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: center;
}
.beforeafter h2 { margin-bottom: .35em; }
.beforeafter h2 .accent { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.beforeafter p { color: var(--muted); font-size: 1rem; max-width: 380px; }

.ba-frame {
  background: #fff;
  border-radius: 24px;
  box-shadow: var(--shadow-xl);
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.ba-frame .ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/9;
}
.ba-frame .ba-pane {
  background: linear-gradient(135deg, #b8a48b, #6b5d54);
  position: relative;
}
.ba-frame .ba-pane.before {
  background:
    radial-gradient(circle at 50% 60%, rgba(255,200,160,.4), transparent 60%),
    linear-gradient(135deg, #8a7a6b, #5a4a3e);
}
.ba-frame .ba-pane.after {
  background:
    radial-gradient(circle at 50% 60%, rgba(255,220,180,.5), transparent 60%),
    linear-gradient(135deg, #d4a98a, #a06a4d);
}
.ba-frame .ba-pane::after {
  content: attr(data-label);
  position: absolute;
  top: 16px; left: 16px;
  background: rgba(255,255,255,.92);
  color: var(--heading);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ba-handle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
  font-weight: 700;
  font-size: .9rem;
  color: var(--heading);
}
.ba-divider {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 14px rgba(0,0,0,.2);
}
.ba-arrows {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  display: grid; place-items: center;
  font-size: .85rem;
  color: var(--heading);
  box-shadow: var(--shadow);
}
.ba-arrows.left { left: -14px; }
.ba-arrows.right { right: -14px; }

@media (max-width: 880px) { .beforeafter { grid-template-columns: 1fr; } }

/* ============================================================
   PROGRAM CARDS (FitFlow alt-row style)
   ============================================================ */
.program-card {
  background: #fff;
  border-radius: 28px;
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 40px;
  align-items: center;
  box-shadow: 0 4px 24px rgba(50, 30, 20, 0.06);
  margin-bottom: 16px;
  position: relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  overflow: hidden;
}
.program-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.program-card .corner-arrow {
  position: absolute;
  top: 24px; right: 28px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: grid; place-items: center;
  color: var(--muted);
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  font-size: .95rem;
  z-index: 2;
}
.program-card:hover .corner-arrow { transform: rotate(45deg); background: var(--accent); color: #fff; border-color: var(--accent); }

.program-card h3 { font-size: 1.7rem; margin-bottom: .5em; }
.program-card .lead {
  color: var(--muted);
  font-size: .96rem;
  margin-bottom: 22px;
  max-width: 560px;
}
.program-card .checks { margin: 0; }

.program-icon {
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--pink), var(--accent) 60%, var(--magenta));
  display: grid; place-items: center;
  font-size: 5rem;
  color: #fff;
  box-shadow: 0 30px 60px rgba(236, 95, 136, .35);
  position: relative;
  transition: transform .6s var(--ease);
  animation: floaty 6s ease-in-out infinite;
}
.program-card:hover .program-icon { transform: scale(1.06) rotate(-6deg); }
.program-icon.alt-1 { background: radial-gradient(circle at 30% 30%, var(--teal), var(--indigo)); box-shadow: 0 30px 60px rgba(70, 163, 192, .35); animation-delay: -2s; }
.program-icon.alt-2 { background: radial-gradient(circle at 30% 30%, var(--purple), var(--indigo)); box-shadow: 0 30px 60px rgba(138, 79, 198, .35); animation-delay: -4s; }
.program-icon.alt-3 { background: radial-gradient(circle at 30% 30%, var(--rose), var(--accent-dk)); box-shadow: 0 30px 60px rgba(196, 60, 105, .35); }

@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

@media (max-width: 880px) {
  .program-card { grid-template-columns: 1fr; padding: 32px 24px 36px; gap: 24px; border-radius: 22px; }
  .program-card .lead { font-size: .92rem; margin-bottom: 18px; }
  .program-icon { width: 120px; height: 120px; font-size: 2.6rem; margin: 0; order: -1; }
  .program-card .corner-arrow { top: 20px; right: 20px; width: 32px; height: 32px; }
}

/* ============================================================
   CHECKS
   ============================================================ */
.checks {
  list-style: none; padding: 0; margin: 0 0 24px;
}
.checks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: .96rem;
  color: var(--text);
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .15;
}
.checks li::after {
  content: "✓";
  position: absolute;
  left: 4px; top: 4px;
  font-size: .7rem;
  color: var(--accent);
  font-weight: 700;
}

/* ============================================================
   "DESIGNED FOR YOU" closer
   ============================================================ */
.closer {
  text-align: center;
  padding: 100px 0 60px;
}
.closer .super { font-size: 1rem; color: var(--muted); margin-bottom: 16px; }
.closer h2 {
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  letter-spacing: -.045em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0;
  text-transform: uppercase;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 26px 0;
}
.faq-item summary {
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.015em;
  color: var(--heading);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  transition: color .2s var(--ease);
}
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.6rem;
  color: var(--accent);
  transition: transform .3s var(--ease);
  font-family: var(--sans);
  font-weight: 300;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body {
  margin-top: 14px;
  color: var(--muted);
  font-size: 1rem;
  animation: fadeSlide .4s var(--ease);
}
@keyframes fadeSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq-source { font-size: .82rem; color: var(--muted); font-style: italic; }

/* ============================================================
   PULL QUOTE
   ============================================================ */
.pull-quote {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--heading);
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}
/* Solid pink — no gradient. Pink demoted from decorative to functional. */
.pull-quote .accent {
  color: var(--accent);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}

.pull-quote-attrib {
  text-align: right;
  color: var(--on-dark-muted);
  margin: 32px auto 0;
  max-width: 980px;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ============================================================
   OPT-IN
   ============================================================ */
.optin {
  background: var(--heading);
  color: #f5ecdd;
  border-radius: 32px;
  padding: 88px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 720px) {
  .optin { padding: 56px 24px; border-radius: 22px; }
  .optin h2 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
}
/* Decorative orbs removed — pink reserved for CTA, type carries the section.
   A single hairline rule sits behind the headline as quiet structure. */
.optin::before {
  content: "";
  position: absolute;
  top: 56px; left: 56px; right: 56px;
  height: 1px;
  background: rgba(255,255,255,.12);
  pointer-events: none;
}
@media (max-width: 720px) {
  .optin::before { top: 36px; left: 24px; right: 24px; }
}
.optin > * { position: relative; z-index: 1; }
.optin h2 {
  color: #fff;
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  margin-bottom: .25em;
  text-transform: uppercase;
  letter-spacing: -.03em;
}
.optin p { color: rgba(245, 236, 221, 0.78); max-width: 540px; margin: 0 auto 32px; font-size: 1.05rem; }
.optin-form {
  display: flex;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.optin-form input {
  flex: 1 1 240px;
  padding: 16px 20px;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-size: .98rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--heading);
  transition: box-shadow .25s var(--ease);
}
.optin-form input:focus { outline: 0; box-shadow: 0 0 0 3px var(--accent); }
.optin small { display: block; margin-top: 16px; color: rgba(245, 236, 221, 0.78); font-size: .82rem; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  padding: 180px 0 80px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.page-hero h1 {
  font-size: clamp(3rem, 7vw, 6rem);
  text-transform: uppercase;
  line-height: .92;
}
.page-hero p.lede {
  font-size: 1.2rem;
  color: var(--muted);
  max-width: 640px;
  margin-top: 24px;
}

/* ============================================================
   GENERIC CARD (used on inner pages)
   ============================================================ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 880px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; gap: 32px; }
}

.card {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  display: block;
  border-bottom: 0 !important;
  color: var(--text);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card-thumb {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--pink), var(--magenta));
  position: relative;
  overflow: hidden;
}
.card-thumb::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.4) 100%);
  z-index: 1;
}
.card-thumb.alt-1 { background: linear-gradient(135deg, var(--teal), var(--indigo)); }
.card-thumb.alt-2 { background: linear-gradient(135deg, var(--purple), var(--magenta)); }
.card-thumb.alt-3 { background: linear-gradient(135deg, var(--accent), var(--purple)); }
.card-thumb.alt-4 { background: linear-gradient(135deg, var(--indigo), var(--magenta)); }
.card-thumb.alt-5 { background: linear-gradient(135deg, var(--rose-2), var(--accent), var(--purple)); }
.card-thumb {
  transition: transform .6s var(--ease);
}
.card:hover .card-thumb { transform: scale(1.04); }

/* Real YouTube thumbnail (replaces the gradient placeholder when data is live) */
.yt-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-deep);
}
.yt-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.card:hover .yt-thumb img,
.yt-featured:hover img { transform: scale(1.05); }
.yt-duration {
  position: absolute;
  right: 10px; bottom: 10px;
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 600;
  font-family: var(--sans);
  letter-spacing: 0;
}
.yt-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: var(--accent);
  display: grid; place-items: center;
  font-size: 1.6rem;
  opacity: 0;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.yt-featured:hover .yt-play,
.card:hover .yt-play { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }

.yt-featured {
  display: block;
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border-bottom: 0 !important;
}
.yt-featured img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.card-thumb-label {
  position: absolute;
  inset: auto 18px 18px 18px;
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  z-index: 2;
}
.card-body { padding: 24px 26px 28px; }
.card-meta {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 600;
}
.card h3 { font-size: 1.3rem; margin-bottom: .35em; transition: color .25s var(--ease); }
.card:hover h3 { color: var(--accent); }
.card p { color: var(--muted); font-size: .95rem; margin: 0; }
.card .read-more {
  display: inline-flex; gap: 6px; align-items: center;
  margin-top: 16px;
  color: var(--accent);
  font-size: .9rem;
  font-weight: 600;
  border-bottom: 0;
}
.card .read-more .arrow { transition: transform .25s var(--ease); }
.card:hover .read-more .arrow { transform: translateX(4px); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--heading);
  color: rgba(245, 236, 221, 0.72);
  padding: 100px 0 32px;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 90%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.footer-mega {
  font-family: var(--display);
  font-size: clamp(2.6rem, 11vw, 12rem);
  line-height: .92;
  letter-spacing: -.05em;
  color: #fff;
  margin: 0 0 60px;
  text-wrap: balance;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .footer-mega { margin-bottom: 40px; }
}
.footer-mega .accent {
  color: var(--accent);
}
.site-footer h4 { color: #fff; font-family: var(--sans); font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; }
.site-footer a { color: rgba(245, 236, 221, 0.88); }
.site-footer a:hover { color: var(--rose); border-bottom: 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(245, 236, 221, 0.12);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; font-size: .92rem; }
/* "Coming soon" placeholders that aren't yet linkable. */
.footer-pending {
  color: rgba(245, 236, 221, 0.55);
  font-style: italic;
  font-size: .88rem;
}
/* Mobile footer — the 4-col grid crams each link column to ~80px
   on phones, wrapping every multi-word link onto 3+ lines. At
   small widths drop to 2-col (brand + link group on top, two link
   groups below), and to 1-col single-stack at the smallest sizes. */
@media (max-width: 880px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 28px;
    padding-bottom: 32px;
  }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid li { font-size: .98rem; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-grid > div:first-child { grid-column: 1; }
}
.footer-bottom {
  padding-top: 28px;
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  font-size: .82rem;
  color: rgba(245, 236, 221, 0.78);
}
.footer-disclaimer {
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: 10px;
  background: rgba(255, 214, 10, 0.04);
  border: 1px solid rgba(255, 214, 10, 0.14);
  border-left: 3px solid var(--yellow);
}
.footer-disclaimer p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.55;
  color: rgba(245, 236, 221, 0.72);
}
.footer-disclaimer strong { color: var(--yellow); font-weight: 700; }
.tagline {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .95rem;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 14px;
  letter-spacing: 0;
}

/* ============================================================
   PREVIEW / utility
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--rose));
  z-index: 100;
  transition: width .1s linear;
}

/* ============================================================
   COACHING / OFFER (compatibility for inner pages)
   ============================================================ */
.offer-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 44px 36px;
  box-shadow: var(--shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.offer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.offer-card .price {
  font-family: var(--display);
  font-size: 3.2rem;
  letter-spacing: -.04em;
  color: var(--heading);
  margin-bottom: 0;
  line-height: 1;
}
.offer-card .price small {
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
  display: block;
  margin-top: 6px;
}

/* Episode list (podcast page) */
.episodes { display: flex; flex-direction: column; }
.episode {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  transition: transform .25s var(--ease);
}
.episode:hover { transform: translateX(8px); }
.episode-thumb { aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; }
.episode-num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .82rem;
  color: var(--accent);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.episode h3 { margin: 4px 0; font-size: 1.4rem; transition: color .2s var(--ease); }
.episode:hover h3 { color: var(--accent); }
.episode-meta { font-size: .9rem; color: var(--muted); }
.episode-play {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  color: #fff;
  font-size: 1.1rem;
  border: 0;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.episode:hover .episode-play { transform: scale(1.12); background: var(--accent-dk); }
@media (max-width: 720px) {
  .episode { grid-template-columns: 100px 1fr; }
  .episode-play { display: none; }
}

/* Blog post list */
.post-list { display: flex; flex-direction: column; gap: 32px; }
.post-item {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.post-item:last-child { border-bottom: 0; }
.post-thumb { aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; }
.post-meta { font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.post-item h3 { margin: 0 0 8px; font-size: 1.6rem; transition: color .2s var(--ease); }
.post-item:hover h3 { color: var(--accent); }
.post-item p { color: var(--muted); margin: 0 0 12px; }
@media (max-width: 720px) { .post-item { grid-template-columns: 1fr; } }

/* Lead magnet mock */
.guide-mock {
  aspect-ratio: 3/4;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.7)),
    linear-gradient(135deg, var(--accent), var(--purple));
  border-radius: 8px;
  box-shadow: var(--shadow-xl);
  padding: 36px 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  transform: rotate(-3deg);
  transition: transform .5s var(--ease);
  max-width: 360px;
  margin: 0 auto;
}
.guide-mock:hover { transform: rotate(0deg) scale(1.04); }

/* Video embed — used on resources page in place of guide-mock */
.video-embed {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: var(--bg-deep);
  max-width: 560px;
  margin: 0 auto;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Lite-YouTube facade — clean thumbnail + play button, swaps to iframe on click */
.lite-yt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  display: block;
}
.lite-yt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 28%, transparent 72%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
}
.lite-yt-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  display: grid;
  place-items: center;
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
  transition: transform .25s var(--ease), background-color .25s var(--ease);
  z-index: 1;
}
.lite-yt:hover .lite-yt-play,
.lite-yt:active .lite-yt-play,
.lite-yt:focus-visible .lite-yt-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--accent);
}
.lite-yt-play svg {
  width: 30px;
  height: 30px;
  fill: #000;
  margin-left: 4px;
  transition: fill .25s var(--ease);
}
.lite-yt:hover .lite-yt-play svg,
.lite-yt:active .lite-yt-play svg,
.lite-yt:focus-visible .lite-yt-play svg { fill: #fff; }
/* Inset box-shadow instead of outline — parent has overflow:hidden which
   would clip an outside outline, hiding the focus indicator. */
.lite-yt:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 3px var(--accent);
}

.guide-mock-title {
  font-family: var(--display);
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--heading);
  text-transform: uppercase;
}
.guide-mock-foot {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* ============================================================
   SECTION WAYFINDERS — page-number marks in the left margin
   ============================================================ */
section[data-section-num] { position: relative; }
section[data-section-num]:not(.hero)::before {
  content: attr(data-section-num);
  position: absolute;
  top: 56px;
  left: max(24px, calc((100% - var(--maxw)) / 2 - 56px));
  font-family: var(--sans);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .26em;
  color: var(--muted);
  z-index: 3;
  padding-left: 28px;
}
section[data-section-num]:not(.hero)::after {
  content: "";
  position: absolute;
  top: 64px;
  left: max(24px, calc((100% - var(--maxw)) / 2 - 56px));
  width: 18px;
  height: 1px;
  background: var(--accent);
  z-index: 3;
}
.section-dark[data-section-num]::before { color: rgba(255,255,255,.55); }
.section-dark[data-section-num]::after  { background: var(--accent); }

@media (max-width: 1180px) {
  section[data-section-num]:not(.hero)::before,
  section[data-section-num]:not(.hero)::after { display: none; }
}

/* Left-anchored section heads (replaces centered for editorial rhythm) */
.section-head-left {
  text-align: left;
  max-width: 720px;
  margin: 0 0 64px;
}
.section-head-left p {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 540px;
  margin: 18px 0 0;
}
@media (max-width: 720px) {
  .section-head-left { margin-bottom: 36px; }
}

/* ============================================================
   HERO RAIL — vertical wayfinder on the left edge
   ============================================================ */
.hero-rail {
  position: absolute;
  top: 0; bottom: 0;
  left: 32px;
  width: 1px;
  background: rgba(255,255,255,.18);
  z-index: 2;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.hero-rail span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
  white-space: nowrap;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .32em;
  color: rgba(255,255,255,.7);
  background: rgba(20,16,26,.0);
  padding: 4px 12px;
  text-transform: uppercase;
}
.hero-rail::before, .hero-rail::after {
  content: "";
  position: absolute;
  left: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.hero-rail::before { top: 110px; }
.hero-rail::after  { bottom: 80px; }
@media (max-width: 880px) {
  .hero-rail { display: none; }
}

/* Hero meta breathing room */
.hero-meta { max-width: 400px; }
@media (max-width: 880px) {
  .hero-meta { max-width: none; }
}

/* ============================================================
   PATHWAYS — asymmetric editorial routing (replaces .bento)
   ============================================================ */
.pathways {
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: 16px;
  grid-auto-rows: auto;
}

.path-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 36px 36px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  overflow: hidden;
}
.path-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.path-num {
  position: absolute;
  top: 24px;
  right: 28px;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--muted);
}
.path-card .eyebrow { margin-bottom: 14px; }
.path-card h3 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--heading);
  margin: 0 0 12px;
  max-width: 22ch;
}
.path-card p {
  color: var(--muted);
  font-size: .98rem;
  margin: 0 0 22px;
}
.path-card .btn { margin-top: 4px; }
.path-card::before {
  content: "";
  position: absolute;
  top: 36px; left: 36px;
  width: 32px; height: 2px;
  background: var(--accent);
}
.path-card.path-feature::before,
.path-card.path-reset::before { background: var(--accent); }

/* Row 1 — full-width feature card */
.path-feature {
  grid-column: 1 / -1;
  background: var(--bg-dark);
  color: var(--on-dark);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 56px 48px;
  border-color: var(--bg-dark);
}
.path-feature .path-num { color: rgba(255,255,255,.55); }
.path-feature h3 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  letter-spacing: -.035em;
  color: #fff;
  line-height: 1;
  text-transform: uppercase;
  max-width: 18ch;
}
.path-feature p { color: var(--on-dark-muted); font-size: 1.04rem; max-width: 44ch; }
.path-feature::before { background: var(--accent); }

.path-feature-mock {
  display: grid;
  place-items: center;
}
.guide-mock-mini {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 3/4;
  background: #fff;
  color: var(--heading);
  border-radius: 6px;
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: rotate(-4deg);
  transition: transform .5s var(--ease);
  position: relative;
}
.path-feature:hover .guide-mock-mini { transform: rotate(0deg) scale(1.03); }
.guide-mock-mini::before {
  content: "";
  position: absolute;
  top: 18px; left: 24px; right: 24px;
  height: 2px;
  background: var(--accent);
}
.gm-eyebrow {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
}
.gm-title {
  font-family: var(--display);
  font-size: 2rem;
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--heading);
}
.gm-foot {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

/* Row 2 — 60/40 */
.path-content { grid-column: 1 / 2; }
.path-triggers { grid-column: 2 / 3; }

.path-triggers {
  position: relative;
  padding: 40px 36px;
  background: transparent;
  border: 0;
}
.path-triggers .path-num {
  position: static;
  display: block;
  margin-bottom: 12px;
}
.path-triggers .eyebrow { margin-bottom: 18px; }
.trigger-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  border-top: 1px solid var(--border);
}
.trigger-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  color: var(--heading);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}
.trigger-list li::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.trigger-foot {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--heading);
  font-size: 1rem;
  margin: 18px 0 0;
}
.path-triggers:hover { transform: none; box-shadow: none; }

/* Path-content "watch+listen" link row */
.path-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.path-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  color: var(--heading);
  font-family: var(--sans);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  border-bottom-width: 1.5px;
}
.path-links a .arrow-circle {
  width: 26px; height: 26px;
  background: var(--heading);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .76rem;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.path-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.path-links a:hover .arrow-circle {
  background: var(--accent);
  transform: rotate(45deg);
}

/* Row 3 — 40/60 (asymmetric flip) */
.path-workbook { grid-column: 1 / 2; }
.path-reset    { grid-column: 2 / 3; }

.path-reset {
  background: var(--bg-dark);
  color: var(--on-dark);
  border-color: var(--bg-dark);
  padding: 48px 40px;
}
.path-reset .path-num { color: rgba(255,255,255,.55); }
.path-reset h3 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: #fff;
  line-height: .98;
  max-width: 18ch;
}
.path-reset p { color: var(--on-dark-muted); }
.path-reset::before { background: var(--accent); }

.path-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--heading);
  text-decoration: none;
  border-bottom: 0 !important;
  transition: color .25s var(--ease);
}
.path-link-arrow .arrow-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  font-size: .85rem;
  transition: transform .35s var(--ease);
}
.path-link-arrow:hover { color: var(--accent); }
.path-link-arrow:hover .arrow-circle { transform: rotate(45deg); }

/* Pathways — mobile collapse */
@media (max-width: 880px) {
  .pathways { grid-template-columns: 1fr; }
  .path-feature {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 28px;
  }
  .path-feature-mock { order: -1; }
  .guide-mock-mini {
    max-width: 220px;
    /* Gentler tilt on mobile so corners don't crowd the card edges. */
    transform: rotate(-2deg);
  }
  .path-content, .path-triggers, .path-workbook, .path-reset { grid-column: 1 / -1; }
  .path-card { padding: 32px 24px 28px; }
  .path-triggers { padding: 24px 4px; }
}

/* ============================================================
   90-DAY RESET — phase tile stack with bold/modern visuals
   Each tile = progress bar (12 segments) + big number + glyph + content
   ============================================================ */
.phase-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.phase-tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px 28px 26px;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr 72px;
  grid-template-rows: auto auto;
  column-gap: 22px;
  row-gap: 18px;
  align-items: center;
}
.phase-tile:hover {
  transform: translateX(8px);
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(255, 61, 110, .08);
}

/* Row 1: 12-segment progress strip spans all 3 columns */
.phase-progress {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  height: 6px;
}
.phase-progress span {
  display: block;
  background: var(--paper-line);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: background .3s var(--ease);
}
.phase-progress span.is-on { background: var(--accent); }
.phase-progress span.is-done { background: var(--heading); }

/* Active (is-on) segments get a flowing highlight sweep — gives the bar
   a "live, in progress" feel. A bright stripe sweeps left-to-right
   continuously across each lit segment. */
.phase-progress span.is-on::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.65) 50%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: phase-sweep 2.6s linear infinite;
}
/* Stagger the sweep across the 4 active segments per tile so it reads
   as one wave traveling through the active phase, not 4 in unison. */
.phase-progress span.is-on:nth-of-type(2)::after { animation-delay: .15s; }
.phase-progress span.is-on:nth-of-type(3)::after { animation-delay: .30s; }
.phase-progress span.is-on:nth-of-type(4)::after { animation-delay: .45s; }
.phase-progress span.is-on:nth-of-type(5)::after { animation-delay: .15s; }
.phase-progress span.is-on:nth-of-type(6)::after { animation-delay: .30s; }
.phase-progress span.is-on:nth-of-type(7)::after { animation-delay: .45s; }
.phase-progress span.is-on:nth-of-type(8)::after { animation-delay: .60s; }
.phase-progress span.is-on:nth-of-type(9)::after { animation-delay: .15s; }
.phase-progress span.is-on:nth-of-type(10)::after { animation-delay: .30s; }
.phase-progress span.is-on:nth-of-type(11)::after { animation-delay: .45s; }
.phase-progress span.is-on:nth-of-type(12)::after { animation-delay: .60s; }
.phase-tile:nth-child(2) .phase-progress span.is-on::after { animation-delay: .8s; }
.phase-tile:nth-child(3) .phase-progress span.is-on::after { animation-delay: 1.6s; }
@keyframes phase-sweep {
  0%   { transform: translateX(-100%); }
  60%, 100% { transform: translateX(120%); }
}

/* Liquid wave fill animation on the circle glyph. The wave path is wider
   than the SVG viewBox so the horizontal slide loop reads as continuous. */
.phase-glyph .phase-wave {
  animation: phase-wave-flow 4.5s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.phase-tile:nth-child(2) .phase-wave { animation-duration: 5.2s; animation-delay: -1.6s; }
.phase-tile:nth-child(3) .phase-wave { animation-duration: 3.8s; animation-delay: -2.4s; }
@keyframes phase-wave-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-40px); }  /* one wavelength of the path */
}

@media (prefers-reduced-motion: reduce) {
  .phase-progress span {
    transform: none;
    opacity: 1;
    transition: none;
  }
  .phase-progress span.is-on::after { animation: none; opacity: 0; }
  .phase-glyph .phase-wave { animation: none; }
}

/* Row 2 col 1: massive "01" chapter number */
.phase-major-num {
  font-family: var(--display);
  font-weight: 900;
  font-size: 3.4rem;
  line-height: .85;
  letter-spacing: -.04em;
  color: var(--accent);
  margin: 0;
  grid-column: 1 / 2;
  align-self: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Row 2 col 2: phase content (mono tag + title + body) */
.phase-tile-body {
  grid-column: 2 / 3;
  align-self: center;
}
.phase-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}
.phase-num {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  font-feature-settings: "zero";
}
.phase-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.phase-weeks {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-feature-settings: "zero";
}
.phase-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--heading);
  margin: 0 0 6px;
}
.phase-tile p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.45;
}

/* Row 2 col 3: geometric fill-state glyph */
.phase-glyph {
  grid-column: 3 / 4;
  width: 72px;
  height: 72px;
  align-self: center;
  justify-self: end;
  display: block;
}
.phase-glyph svg { width: 100%; height: 100%; display: block; }

/* Mobile: collapse columns. Glyph moves to top-right, number stays prominent. */
@media (max-width: 720px) {
  .phase-tile {
    grid-template-columns: 56px 1fr;
    column-gap: 16px;
    padding: 20px 22px 22px;
  }
  .phase-progress { grid-column: 1 / -1; }
  .phase-major-num {
    font-size: 2.6rem;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  .phase-tile-body {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  .phase-glyph {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    width: 44px;
    height: 44px;
    justify-self: end;
    align-self: start;
  }
  .phase-tile-body { padding-right: 56px; }
}

/* ============================================================
   DAMAGING ADMISSION — quiet emphasis upgrade
   ============================================================ */
.section-admission p:not(.eyebrow) span[style*="--accent"],
.section-admission p:not(.eyebrow) .accent {
  position: relative;
  display: inline-block;
}
.section-admission p:not(.eyebrow) span[style*="--accent"]::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px;
  bottom: 2px;
  height: 8px;
  background: var(--accent);
  opacity: .35;
  z-index: -1;
  border-radius: 2px;
  transform: skewX(-12deg);
}

/* ============================================================
   BOLD MODERN — sharp blocks, monospace micro-typography, confident scale.
   No serif. No paper. No marginalia. No nostalgia.
   ============================================================ */

/* --- Site-wide grain, dialed way down. Atmospheric only, not tactile.
   Sits above everything except modal UI. --- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .018;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 320px 320px;
}

/* --- Block highlight. Wraps emphasized words in a solid pink block.
   The block sits behind the text via ::before so it doesn't disturb
   layout. Used in place of underlines for inline emphasis. --- */
.block-mark {
  position: relative;
  display: inline-block;
  padding: .04em .22em;
  color: #fff;
  background: var(--accent);
  line-height: 1;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.block-mark--dark { background: var(--bg-dark); color: #fff; }
.block-mark--outline {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* --- Inline highlighter. Lighter alternative — leaves the text its
   original color but adds a flat pink slab behind the baseline. Reads
   modern, not hand-drawn. --- */
.slab {
  position: relative;
  display: inline-block;
  padding: 0 .08em;
}
.slab::before {
  content: "";
  position: absolute;
  left: -.04em; right: -.04em;
  bottom: .04em;
  height: .38em;
  background: var(--accent);
  z-index: -1;
}
.slab--strong::before { height: .58em; }
.slab--full::before { top: -.04em; bottom: -.04em; height: auto; }

/* --- Mono micro-typography. JetBrains Mono for the tiny labels: stat
   eyebrows, timestamps, version tags, build-info-style attribution.
   This is the modern equivalent of an italic serif — feels technical
   and intentional. --- */
.mono {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: .04em;
  font-feature-settings: "ss01", "ss02", "ss05", "zero";
}
.mono-eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-feature-settings: "zero", "ss01";
}
.mono-tag {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
}
.mono-tag::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
}

/* --- Lede paragraph. Bigger, denser, modern. Used on inner pages
   under the page hero. --- */
.lede {
  font-family: var(--sans);
  font-size: 1.28rem;
  line-height: 1.42;
  color: var(--ink-soft);
  max-width: 640px;
  font-weight: 400;
}
.lede strong { font-weight: 700; color: var(--heading); }

@media (max-width: 720px) {
  .lede { font-size: 1.08rem; line-height: 1.45; }
}

/* --- Promote specific existing micro-typography moments to MONO. --- */
.stats-attribution {
  font-family: var(--mono);
  font-weight: 500;
  font-style: normal;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: none;
}
.pull-quote-attrib {
  font-family: var(--mono);
  font-weight: 500;
  font-style: normal;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
@media (max-width: 720px) {
  .pull-quote-attrib {
    text-align: center;
    font-size: .76rem;
    margin-top: 22px;
  }
}
.footer-bottom > div:first-child {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .06em;
}

/* --- Ticker line. Inline mono row used under the hero or above sections
   for data-driven micro-content. Monospace, dot separators, all caps. --- */
.ticker {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.ticker .tick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ticker .tick::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
}
.section-dark .ticker { color: rgba(255,255,255,.6); }

/* --- Big block stat row. For oversized "fact" moments — the bigger the
   better. Used as a modern replacement for the hand-drawn ink-circle
   emphasis. --- */
.fact-block {
  display: inline-flex;
  align-items: baseline;
  gap: .18em;
  padding: 0;
  font-family: var(--display);
  letter-spacing: -.045em;
  line-height: .9;
}

/* --- Modern card surfaces. Sharper corners, harder shadow, no warm paper.
   Keep the variable for back-compat but render as clean white/gray. --- */
.surface-white {
  background: #fff;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.surface-dark {
  background: var(--bg-dark);
  color: #fff;
  border-radius: 6px;
}

/* --- Reduced-motion respect. --- */
@media (prefers-reduced-motion: reduce) {
  body::before { opacity: .012; }
}

/* ============================================================
   LEAD-CAPTURE MODAL — shared across the site
   Owned by main.js (createLeadModal). Any page that loads
   main.js gets the modal injected into the body, and any
   element with [data-lead-cta] triggers it.

   Attribute API on the trigger:
     data-source             — Kit tag for the subscriber
     data-redirect           — URL to open after successful submit
     data-newtab             — "false" to redirect in same tab (default: new tab)
     data-unlock-key         — localStorage key to set to "1" before redirect
                               (used for the calendar gate so a homepage opt-in
                               unlocks the gated calendar page automatically)
     data-modal-eyebrow      — mono uppercase label above the title
     data-modal-title        — display heading inside the modal
     data-modal-sub          — explanatory paragraph
     data-modal-submit       — submit-button label
     data-modal-success-title / -body — thank-you view copy (no-redirect path)
   ============================================================ */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.lead-modal[hidden] { display: none; }
.lead-modal.is-open { opacity: 1; }
body.lead-modal-open { overflow: hidden; }

.lead-modal-card {
  position: relative;
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 40px);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 40px 100px rgba(0,0,0,.4);
  transform: translateY(12px) scale(.985);
  transition: transform .3s var(--ease);
}
.lead-modal.is-open .lead-modal-card {
  transform: translateY(0) scale(1);
}

.lead-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  /* 44x44 meets WCAG 2.5.5 minimum tap target. */
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--bg-alt);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s var(--ease), color .2s var(--ease);
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
}
.lead-modal-close:hover { background: #111; color: #fff; }
.lead-modal-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lead-modal-eyebrow {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
  font-weight: 700;
}
.lead-modal-title {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.8vw, 1.8rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.lead-modal-sub {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.5;
  margin: 0 0 24px;
}

.lead-form { display: flex; flex-direction: column; gap: 14px; }
.lead-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) { .lead-row-2 { grid-template-columns: 1fr; } }
.lead-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lead-field-label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.lead-field-label em {
  font-style: normal;
  color: var(--accent);
  margin-left: 4px;
}
.lead-field-opt {
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  font-weight: 400;
  font-family: var(--sans, system-ui);
  font-size: .78rem;
  margin-left: 6px;
}
.lead-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: #111;
  font-size: .98rem;
  font-family: inherit;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  min-width: 0;
}
.lead-field input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 61, 110, .15);
}
.lead-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .88rem;
  line-height: 1.45;
  color: #444;
  cursor: pointer;
}
.lead-check input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
.lead-check strong { color: #111; font-weight: 600; }
.lead-check-legal {
  display: block;
  margin-top: 6px;
  font-size: .72rem;
  line-height: 1.45;
  color: var(--muted);
}
.lead-check-legal a {
  color: inherit;
  text-decoration: underline;
}
.lead-form-error {
  background: rgba(255, 61, 110, .08);
  border: 1px solid rgba(255, 61, 110, .35);
  color: var(--accent-dk);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .88rem;
  margin: 0;
}
.lead-submit {
  margin-top: 6px;
  width: 100%;
  justify-content: center;
}
.lead-fineprint {
  font-size: .78rem;
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.45;
  text-align: center;
}
.lead-thanks {
  text-align: center;
  padding: 8px 0 4px;
}
.lead-thanks-icon {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  background: rgba(110, 145, 120, .14);
  border: 2px solid #3f6650;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #3f6650;
  font-size: 1.6rem;
  font-weight: 700;
}
.lead-thanks h3 {
  font-family: var(--display);
  font-size: 1.4rem;
  margin: 0 0 12px;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.lead-thanks p {
  color: var(--muted);
  margin: 0 0 20px;
  line-height: 1.55;
}