/* ================================================================
   Winter FIT 60 · Fit 'n' Healthy
   Palette: obsidian + brand teal · Helvetica
   ================================================================ */

:root{
  /* Ink - colder, deeper than the sibling site's #070b18 */
  --ink:        #05070E;
  --ink-2:      #0A1122;
  --ink-3:      #0F1830;
  --ink-4:      #131E3E;

  /* Frost - icy near-white, not sterile pure white */
  --frost:        #EAF2FF;
  --frost-mute:   rgba(234,242,255,.68);
  --frost-faint:  rgba(234,242,255,.42);
  --frost-ghost:  rgba(234,242,255,.22);

  /* Brand accent - matches the existing Fit 'n' Healthy teal */
  --teal:      #2de0b9;
  --teal-2:    #22c7a7;
  --teal-glow: rgba(45,224,185,.14);

  --stroke:      rgba(234,242,255,.08);
  --stroke-hot:  rgba(234,242,255,.14);

  --radius:   18px;
  --radius-2: 28px;
  --radius-3: 40px;

  --shadow:      0 30px 90px rgba(0,0,0,.45);
  --shadow-hot:  0 30px 120px rgba(45,224,185,.10);

  --max: 1180px;

  --font: Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{min-height:100%}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--font);
  color:var(--frost);
  background: var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings: "cv11","ss01";
  letter-spacing:-.005em;
}
/* Ambient backdrop - one fixed, non-repeating layer so the gradients
   stay anchored to the viewport instead of tiling per screen height */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1100px 700px at 82% -5%, rgba(45,224,185,.12), transparent 60%),
    radial-gradient(900px 620px at -10% 40%, rgba(45,224,185,.06), transparent 55%),
    radial-gradient(700px 500px at 50% 100%, rgba(45,224,185,.05), transparent 60%),
    linear-gradient(180deg, #04060C 0%, var(--ink) 55%, #06091A 100%);
  background-repeat:no-repeat;
}

a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;background:none;border:0;padding:0}
img{max-width:100%;display:block}

/* Snow canvas - pinned to hero region via JS sizing */
#snow{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:1;
  pointer-events:none;
  opacity:.55;
  mix-blend-mode:screen;
}

.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
  position:relative;
  z-index:2;
}

/* ---------- Type ---------- */
.mono{ font-family:var(--font); font-feature-settings:"tnum" on; letter-spacing:.02em }

.display{
  font-family:var(--font);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:.98;
  margin:0;
}
h1.display{ font-size: clamp(44px, 6.4vw, 92px); }
h2.display{ font-size: clamp(36px, 4.8vw, 68px); margin:12px 0 0; }
h2.display.sm{ font-size: clamp(28px, 3.6vw, 44px) }
h2.display.center{ text-align:center }

.accent      { color: var(--teal) }
.accent-ember{ color: var(--teal) }

/* ---------- Hand stroke ----------
   Echo of the handwritten "N" in the logo: one monoline teal gesture with
   round caps, drawn in a single pass. Used twice on the page, no more.   */
.stroked{
  position:relative;
  display:inline-block;
  white-space:nowrap;
}
/* The stroke hangs below the line box, so the heading carrying it
   reserves the space instead of leaning on the paragraph under it. */
.hero-lede h1.display{ margin-bottom:.42em }   /* overrides the 22px at .hero-lede h1 */
.pricing .section-head h2.display{ margin-bottom:.2em }

.hand-stroke{
  position:absolute;
  left:-1%;
  bottom:-.20em;
  width:102%;
  height:.34em;
  overflow:visible;
  color: var(--teal);
  pointer-events:none;
}
.hand-stroke path{
  fill:none;
  stroke:currentColor;
  /* viewBox units: the svg is .34em tall over 34 units, so 6 units
     tracks the font size and stays independent of the word's length */
  stroke-width:6;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:0;
}
/* Held back only while its section is still waiting to scroll in */
.reveal:not(.is-in) .hand-stroke path{ stroke-dashoffset:1 }

/* Hero draws on load, section heads draw when they scroll in */
.hero .hand-stroke path,
.is-in .hand-stroke path{
  animation: inkDraw .8s cubic-bezier(.62,.04,.3,1) .55s both;
}

@keyframes inkDraw{
  from{ stroke-dashoffset:1 }
  to  { stroke-dashoffset:0 }
}

.lead{
  color: var(--frost-mute);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height:1.65;
  margin:0 0 20px;
  max-width: 56ch;
}
.micro{
  color: var(--frost-faint);
  font-size:12.5px;
  line-height:1.55;
  margin:20px 0 0;
}

/* ---------- Pill ---------- */
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 14px;
  border:1px solid var(--stroke-hot);
  border-radius:999px;
  background: linear-gradient(180deg, rgba(234,242,255,.04), rgba(234,242,255,.015));
  color: var(--frost-mute);
  font-family: var(--font);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.dot{
  width:6px;height:6px;border-radius:50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(45,224,185,.14), 0 0 12px rgba(45,224,185,.6);
}

/* ---------- Buttons ---------- */
.btn{
  --btn-py: 12px;
  --btn-px: 18px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: var(--btn-py) var(--btn-px);
  border-radius:999px;
  border:1px solid var(--stroke-hot);
  background: rgba(234,242,255,.03);
  color: var(--frost);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .28s ease;
  font-weight:600;
  font-size:14px;
  letter-spacing:.005em;
  user-select:none;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(234,242,255,.22);
  background: rgba(234,242,255,.06);
}
.btn .arrow{
  transition: transform .2s ease;
  display:inline-block;
}
.btn:hover .arrow{ transform: translateX(3px) }

.btn.small{ --btn-py:10px; --btn-px:14px; font-size:13px }
.btn.lg{ --btn-py:15px; --btn-px:22px; font-size:15px }

.btn.primary{
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-2) 100%);
  border-color: transparent;
  color: #06101b;
  font-weight:700;
  box-shadow: 0 12px 40px rgba(45,224,185,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 50px rgba(45,224,185,.35), inset 0 1px 0 rgba(255,255,255,.45);
  filter: brightness(1.03) saturate(1.02);
}

.btn.ghost{
  background: rgba(234,242,255,.02);
  color: var(--frost);
  border-color: var(--stroke-hot);
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: linear-gradient(180deg, rgba(5,7,14,.72), rgba(5,7,14,.35));
  border-bottom: 1px solid var(--stroke);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand-link{ display:inline-flex }
.logo-img{ height:26px; object-fit:contain; }
.logo-img.sm{ height:22px }
.nav-right{ display:flex; align-items:center; gap:12px }

/* ---------- Hero ---------- */
.hero{
  padding: 90px 0 30px;
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:60px;
  align-items:center;
}
.hero-lede{ position:relative; z-index:2 }
.hero-lede h1{ margin: 22px 0 22px; }
.hero-lede .lead{ margin-bottom: 22px }

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:26px;
}
.checks{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px 22px;
}
.checks li{
  display:flex; align-items:center; gap:9px;
  font-size:13px;
  color: var(--frost-mute);
}
.checks svg{ color: var(--teal); flex-shrink:0 }

/* ---------- Hero figure (the PDF cover) ---------- */
.hero-figure{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
}
.cover-stage{
  position:relative;
  width:100%;
  max-width: 400px;
  perspective: 1400px;
  animation: coverFloat 9s ease-in-out 1.2s infinite;
}

/* bloom that lifts the cover off the obsidian background - brand teal
   up top, shading into the cover's own icy cyan at the base */
.cover-glow{
  position:absolute;
  inset: -16% -18% -12%;
  border-radius: 50%;
  background:
    radial-gradient(52% 46% at 50% 40%, rgba(45,224,185,.26), transparent 70%),
    radial-gradient(58% 50% at 60% 76%, rgba(56,170,248,.20), transparent 72%),
    radial-gradient(46% 42% at 34% 88%, rgba(56,189,248,.12), transparent 74%);
  filter: blur(26px);
  pointer-events:none;
  z-index:0;
}

/* stacked sheets behind the cover - reads as a multi-page PDF */
.cover::before,
.cover::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(180deg, #dfe8f4, #aebccf);
  z-index:-1;
}
.cover::before{ transform: translate3d(-14px, 10px, -34px) rotate(-3.2deg); opacity:.34 }
.cover::after { transform: translate3d(-7px,  5px, -18px) rotate(-1.5deg); opacity:.6 }

.cover{
  position:relative;
  z-index:1;
  border-radius: 16px;
  transform-style: preserve-3d;
  transform: rotateY(-11deg) rotateX(3deg) rotate(1.4deg);
  box-shadow:
    0 2px 0 rgba(255,255,255,.35) inset,
    0 34px 70px -24px rgba(0,0,0,.75),
    0 60px 130px -40px rgba(56,178,240,.30);
  transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    box-shadow .55s cubic-bezier(.22,.61,.36,1);
  animation: coverIn 1.1s cubic-bezier(.2,.7,.2,1) backwards .15s;
}
.cover-img{
  display:block;
  width:100%;
  height:auto;
  border-radius: inherit;
}

/* glass sheen across the page */
.cover-sheen{
  position:absolute; inset:0;
  border-radius: inherit;
  background: linear-gradient(112deg,
    rgba(255,255,255,.30) 0%,
    rgba(255,255,255,.05) 24%,
    transparent 46%,
    rgba(5,7,14,.09) 78%,
    rgba(5,7,14,.16) 100%);
  opacity:.75;
  pointer-events:none;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1);
}
/* left binding edge - gives the sheet physical thickness */
.cover-edge{
  position:absolute;
  top:0; bottom:0; left:0;
  width:12px;
  border-radius: 16px 3px 3px 16px;
  background: linear-gradient(90deg,
    rgba(5,7,14,.55) 0%,
    rgba(5,7,14,.22) 40%,
    rgba(255,255,255,.22) 72%,
    transparent 100%);
  pointer-events:none;
}

.cover:hover{
  transform: rotateY(-5deg) rotateX(1.5deg) rotate(.6deg) translateY(-8px);
  box-shadow:
    0 2px 0 rgba(255,255,255,.35) inset,
    0 42px 84px -24px rgba(0,0,0,.78),
    0 70px 150px -40px rgba(56,178,240,.40);
}
.cover:hover .cover-sheen{ opacity:.45 }

@keyframes coverIn{
  0%   { opacity:0; transform: rotateY(-18deg) rotateX(5deg) rotate(3deg) translateY(26px) }
  100% { opacity:1 }
}
@keyframes coverFloat{
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-12px) }
}

/* ---------- Stats bar ---------- */
.stats-bar{
  margin-top: 60px;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(234,242,255,.02), rgba(234,242,255,.005));
}
.stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 22px 0;
}
.stat{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 8px 0;
  position:relative;
  gap: 6px;
}
.stat:not(:last-child)::after{
  content:"";
  position:absolute; right:0; top:18px; bottom:18px;
  width:1px; background: var(--stroke);
}
.stat .num{ font-size: 24px; font-weight:500; letter-spacing:.02em; color: var(--frost) }
.stat .label{
  font-family: var(--font);
  font-size:10.5px;
  color: var(--frost-faint);
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
}

/* ---------- Section base ---------- */
section{
  padding: 100px 0;
  position:relative;
}
.section-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
  margin: 0 auto 56px;
  max-width: 720px;
}
.section-sub{
  color: var(--frost-mute);
  font-size:15px;
  line-height:1.7;
  margin:14px 0 0;
  max-width: 60ch;
}

/* ---------- Two-column pattern ---------- */
.two-col{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 60px;
  align-items:start;
}
.two-col-lede h2{ margin-top: 14px }
.two-col-body .lead{ margin-bottom: 22px }

.program-list{
  list-style:none; padding:0; margin: 0 0 12px;
  display:grid; gap:10px;
}
.program-list li{
  display:flex; align-items:center; gap:12px;
  color: var(--frost);
  font-size:14.5px;
}
.check-icon{
  width:22px; height:22px; flex-shrink:0;
  border-radius:50%;
  display:grid; place-items:center;
  background: rgba(45,224,185,.14);
  color: var(--teal);
  font-weight:800;
  font-size:11px;
  font-family: var(--font);
  border: 1px solid rgba(45,224,185,.22);
}

/* ---------- Specs (What You Get) - spec-sheet aesthetic ---------- */
.specs{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.spec{
  position:relative;
  padding: 26px 24px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(234,242,255,.03), rgba(234,242,255,.005));
  transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .4s ease;
  overflow:hidden;
}
.spec::before{
  /* thin top hairline in ice-cyan */
  content:"";
  position:absolute;
  top:0; left:24px; right:24px;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  opacity:.25;
  transition: opacity .28s ease;
}
.spec:hover{
  transform: translateY(-4px);
  border-color: rgba(45,224,185,.24);
  background: linear-gradient(180deg, rgba(45,224,185,.04), rgba(234,242,255,.01));
  box-shadow: 0 30px 60px rgba(45,224,185,.06);
}
.spec:hover::before{ opacity:.7 }

.spec-head{
  display:flex; align-items:baseline; gap:16px;
  margin: 0 0 12px;
}
.spec-num{
  font-size:12px;
  letter-spacing:.16em;
  color: var(--frost-faint);
}
.spec h3{
  font-family: var(--font);
  font-weight:700;
  font-size:22px;
  letter-spacing:-.02em;
  margin:0;
}
.spec p{
  margin: 0 0 14px;
  color: var(--frost-mute);
  font-size:14px;
  line-height:1.6;
}
.mini{ list-style:none; padding:0; margin:0; display:grid; gap:8px }
.mini li{
  display:flex; align-items:center; gap:10px;
  color: var(--frost-faint);
  font-size:12.5px;
}
.mini-dot{
  width:5px; height:5px; border-radius:50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(45,224,185,.10);
  flex-shrink:0;
}
.spec.highlight{
  background: linear-gradient(180deg, rgba(45,224,185,.10), rgba(45,224,185,.03));
  border-color: rgba(45,224,185,.22);
}
.spec.highlight::before{
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  opacity:.5;
}
.spec.highlight:hover{
  border-color: rgba(45,224,185,.38);
  box-shadow: 0 30px 60px rgba(45,224,185,.08);
}
.spec.highlight .mini-dot{
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(45,224,185,.14);
}
.spec-tag{
  position:absolute;
  top: 18px; right: 18px;
  padding: 4px 10px;
  border-radius:999px;
  background: rgba(45,224,185,.14);
  color: var(--teal-2);
  border:1px solid rgba(45,224,185,.28);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* ---------- Evolution phases ---------- */
.phases{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 8px;
  max-width: 780px;
  margin: 0 auto;
}
.phase{
  display:grid;
  grid-template-columns: 60px 1fr;
  gap: 26px;
  padding: 22px 4px 22px 4px;
  align-items:start;
  position:relative;
}
.phase-rail{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.phase-n{
  width: 42px; height: 42px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(45,224,185,.10);
  border:1px solid rgba(45,224,185,.24);
  color: var(--teal);
  font-size:13px;
  font-weight:700;
  z-index:2;
}
.phase-line{
  width:1px;
  flex:1;
  background: linear-gradient(180deg, rgba(45,224,185,.4), rgba(45,224,185,.06));
  margin-top: 6px;
  min-height: 40px;
}
.phase-line.last{ display:none }
.phase-body{
  padding-top: 4px;
}
.phase-meta{
  color: var(--frost-faint);
  font-size:11px;
  letter-spacing:.16em;
  margin-bottom: 6px;
}
.phase-body h3{
  font-family: var(--font);
  font-weight:700;
  font-size: 26px;
  letter-spacing:-.02em;
  margin: 0 0 8px;
}
.phase-body p{
  color: var(--frost-mute);
  font-size:15px;
  line-height:1.65;
  margin:0;
}

/* ---------- Sample meal card ---------- */
.meal-card{
  border-radius: var(--radius-2);
  border: 1px solid var(--stroke-hot);
  background:
    radial-gradient(600px 240px at 100% 0%, rgba(45,224,185,.08), transparent 60%),
    linear-gradient(180deg, rgba(234,242,255,.03), rgba(234,242,255,.008));
  padding: 26px 26px 22px;
  box-shadow: var(--shadow);
}
.meal-head{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--stroke-hot);
  font-size:11px;
  letter-spacing:.16em;
  color: var(--frost-faint);
}
.meal-head .kcal{ color: var(--teal) }
.meal-row{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--stroke);
  align-items:start;
}
.meal-row:last-of-type{ border-bottom:0 }
.meal-slot{
  font-size:11px;
  letter-spacing:.16em;
  color: var(--frost-faint);
  padding-top:3px;
}
.meal-row p{
  margin:0;
  color: var(--frost);
  font-size:14px;
  line-height:1.55;
}
.meal-foot{
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
  margin-top:6px;
  text-align:right;
  font-size:11px;
  letter-spacing:.16em;
  color: var(--teal);
}

/* ---------- Coach ---------- */
.coach-card{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  align-items:center;
  padding: 44px;
  max-width: 940px;
  margin: 0 auto;
  border-radius: var(--radius-2);
  border: 1px solid var(--stroke-hot);
  background:
    radial-gradient(600px 260px at 0% 0%, rgba(45,224,185,.08), transparent 55%),
    linear-gradient(180deg, rgba(234,242,255,.03), rgba(234,242,255,.008));
  box-shadow: var(--shadow);
}
.coach-avatar{
  width: 180px; height:180px;
  border-radius: 50%;
  display:grid; place-items:center;
  background:
    radial-gradient(140px 140px at 30% 30%, rgba(45,224,185,.20), transparent 60%),
    linear-gradient(135deg, var(--ink-3), var(--ink-2));
  border: 1px solid rgba(45,224,185,.22);
  color: var(--teal);
  font-size: 34px;
  letter-spacing:.08em;
  font-weight:500;
  box-shadow: 0 20px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(234,242,255,.06);
  position:relative;
  overflow:hidden;
}
/* The photo covers the JLC monogram, which stays underneath as the fallback
   if assets/img/coach.jpg is missing (script.js drops the broken <img>). */
.coach-avatar img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.coach-body h2{ margin: 12px 0 14px }
/* Fill the column and drop the trailing margin, so the text block
   sits optically centred against the avatar */
.coach-body .lead{ max-width:none; margin-bottom:0 }

/* ---------- Pricing ---------- */
.pricing{ padding-bottom: 40px }
.price-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 920px;
  margin: 0 auto;
}
/* Each version owns an accent colour so the two cards read apart instantly:
   brand teal for the male version, icy violet for the female one. */
.price-card[data-ver="male"]{
  --accent:      var(--teal);
  --accent-soft: rgba(45,224,185,.14);
  --accent-line: rgba(45,224,185,.26);
  --accent-edge: rgba(45,224,185,.48);
  --accent-wash: rgba(45,224,185,.10);
}
.price-card[data-ver="female"]{
  --accent:      #9e8cff;
  --accent-soft: rgba(158,140,255,.16);
  --accent-line: rgba(158,140,255,.28);
  --accent-edge: rgba(158,140,255,.50);
  --accent-wash: rgba(158,140,255,.11);
}

.price-card{
  position:relative;
  overflow:hidden;
  padding: 30px 28px 28px;
  border-radius: var(--radius-2);
  border: 1px solid var(--accent-line);
  background:
    radial-gradient(620px 280px at 100% 0%, var(--accent-wash), transparent 62%),
    linear-gradient(180deg, rgba(234,242,255,.04), rgba(234,242,255,.01));
  box-shadow: var(--shadow);
  transition: border-color .28s ease, transform .28s ease, box-shadow .4s ease;
}
.price-card > *{ position:relative; z-index:1 }
/* Oversized version initial, watermarked beside the price */
.price-card::before{
  content: attr(data-glyph);
  position:absolute;
  top:76px; right:22px;
  z-index:0;
  font-size:150px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  color: var(--accent);
  opacity:.09;
  pointer-events:none;
}
.price-card:hover{
  transform: translateY(-3px);
  border-color: var(--accent-edge);
  box-shadow: 0 40px 100px var(--accent-wash);
}
.price-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--stroke-hot);
}
.price-badge{
  width:48px; height:48px; flex-shrink:0;
  border-radius:15px;
  display:grid; place-items:center;
  font-size:21px;
  font-weight:700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.price-title{
  margin:0;
  font-size:21px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
  color: var(--frost);
}
.price-code{
  display:block;
  margin-top:4px;
  font-size:11px;
  letter-spacing:.16em;
  color: var(--accent);
}
.price-card .check-icon{
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-line);
}

.price-amount{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin: 22px 0 18px;
}
.currency{
  font-size:32px;
  color: var(--frost-mute);
  font-weight:500;
}
.amount{
  font-family: var(--font);
  font-size: 92px;
  font-weight:700;
  letter-spacing:-.05em;
  line-height:1;
  color: var(--frost);
}
.price-list{
  list-style:none; padding:0; margin: 0 0 22px;
  display:grid; gap:10px;
}
.price-list li{
  display:flex; align-items:center; gap:11px;
  color: var(--frost);
  font-size:14px;
}
.paypal-slot{
  min-height: 46px;
  margin: 6px 0 14px;
  border-radius: 12px;
  overflow:hidden;
}
/* PayPal expands its guest card form inside this slot (measured: 390px wide,
   the slot's own width). The form's iframe carries no background, so it
   composites onto the dark price card and PayPal's near-black labels
   ("Billing address", the 18-years consent line) vanish into it.

   script.js adds .is-form once the slot grows past button height, handing the
   form the white surface it is designed for. Keyed off the slot's own height
   rather than PayPal's class names, which are generated and change per SDK
   build - selectors written against them have already failed twice here. */
.paypal-slot.is-form{
  background: #fff;
  padding: 12px;
  border-radius: 14px;
}

/* PayPal mounts its checkout / guest card form in a fixed, full-viewport
   <div class="paypal-checkout-sandbox" id="paypal-overlay-...">, holding an
   iframe. Neither carries a background, so the form composites straight onto
   this page's dark canvas and PayPal's near-black labels ("Billing address",
   the 18-years consent line) disappear into it.

   Checked against PayPal's live DOM: these iframes carry NO src attribute, so
   any iframe[src*="paypal.com"] rule never matches - the container class and
   the zoid iframe names are the only reliable hooks. Painting the container
   white guarantees an opaque surface no matter what PayPal renders inside it.

   The button stack is deliberately excluded: it is .paypal-buttons > iframe
   named __zoid__paypal_buttons, matched by none of these selectors, so the
   pills stay transparent and flush on the dark price card. */
.paypal-checkout-sandbox,
.paypal-checkout-sandbox iframe,
div[id^="paypal-overlay"],
div[id^="paypal-overlay"] iframe,
iframe[name*="paypal_checkout"],
iframe[name*="card_form"],
iframe[name*="card_fields"]{
  background: #fff !important;
}
.fineprint{
  color: var(--frost-faint);
  font-size:11.5px;
  line-height:1.55;
  margin:0;
  text-align:center;
}

/* ---------- FAQ ---------- */
.faq-list{
  max-width: 780px;
  margin: 0 auto;
  border-top: 1px solid var(--stroke);
}
.faq-item{
  border-bottom: 1px solid var(--stroke);
}
.faq-item summary{
  list-style:none;
  display:grid;
  grid-template-columns: 40px 1fr 24px;
  gap: 16px;
  align-items:center;
  padding: 22px 4px;
  cursor: pointer;
  color: var(--frost);
  font-size: 16px;
  font-weight:500;
  transition: color .18s ease;
  letter-spacing:-.005em;
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary:hover{ color: var(--teal) }
.faq-item summary .mono{
  font-size:12px;
  letter-spacing:.14em;
  color: var(--frost-faint);
}
.faq-item summary:hover .mono{ color: var(--teal) }
.faq-item .chev{
  font-size:22px;
  font-weight:300;
  color: var(--frost-faint);
  text-align:center;
  transition: transform .28s ease, color .18s ease;
}
.faq-item[open] summary{ color: var(--teal) }
.faq-item[open] .chev{ transform: rotate(45deg); color: var(--teal) }
.faq-item p{
  margin: 0 0 22px 56px;
  color: var(--frost-mute);
  font-size:14.5px;
  line-height:1.7;
  max-width: 62ch;
}

/* ---------- Footer ---------- */
footer{
  padding: 34px 0 44px;
  border-top: 1px solid var(--stroke);
  color: var(--frost-mute);
  font-size:12.5px;
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.footer-brand{ display:flex; align-items:center; gap:12px }
.social{ display:flex; gap:10px }
.social a{
  width:34px;height:34px;border-radius:12px;
  display:grid; place-items:center;
  background: rgba(234,242,255,.03);
  border:1px solid var(--stroke);
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.social a:hover{
  color: var(--teal);
  border-color: rgba(45,224,185,.24);
  background: rgba(45,224,185,.06);
}

/* ---------- Reveal animations ---------- */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-in{
  opacity:1;
  transform: translateY(0);
}

/* Hero H1 entrance */
.hero .display{
  animation: heroIn 1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes heroIn{
  0%   { opacity:0; transform: translateY(12px) }
  100% { opacity:1; transform: translateY(0)   }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .hero-grid,
  .two-col,
  .price-grid,
  .coach-card{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .specs{ grid-template-columns: 1fr }
  .stats{ grid-template-columns: repeat(2,1fr); gap: 22px 0 }
  .stat:nth-child(2)::after{ display:none }
  .hero-figure{ margin-top: 6px }
  .cover-stage{ max-width: 330px; margin: 0 auto }
  .coach-card{ gap: 28px; padding: 36px }
  .coach-avatar{ width:150px;height:150px;font-size:28px; justify-self:center }
  .checks{ grid-template-columns: 1fr }
  section{ padding: 70px 0 }
  .section-head{ margin-bottom: 40px }
}

@media (max-width: 600px){
  .hero{ padding: 60px 0 20px }
  .stats-bar{ margin-top: 40px }
  .stats{ padding: 16px 0 }
  .stat .num{ font-size: 20px }
  .price-amount .amount{ font-size: 72px }
  .meal-row{ grid-template-columns: 80px 1fr; gap:14px }
  .coach-card{ padding: 26px }
  .hero-lede h1{ font-size: 44px }
  .hero-lede h1.display{ margin-bottom: 28px }   /* room for the hand stroke */
  .cover-stage{ max-width: 270px }
  .cover{ transform: rotateY(-7deg) rotate(1deg) }
  .cover:hover{ transform: rotateY(-7deg) rotate(1deg) }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #snow{ display:none }
  .cover-stage{ animation:none }
  .reveal{ opacity:1; transform:none }
}