/* ==========================================================================
   HEALTHYSAKE — Design System
   Premium editorial wellness aesthetic. Charcoal / Ivory / Orange.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* --- color tokens --- */
  --charcoal:      #16181a;
  --charcoal-2:    #1f2226;
  --charcoal-3:    #2a2d32;
  --ivory:         #f7f2e9;
  --ivory-2:       #efe7d6;
  --ivory-3:       #e6dcc6;
  --ink:           #16181a;
  --ink-soft:      #4b4d50;
  --paper-ink:     #16181a;
  --orange:        #ff6a2c;
  --orange-dark:   #e6591f;
  --orange-light:  #ffb385;
  --white:         #ffffff;
  --line-dark:     rgba(247,242,233,0.14);
  --line-light:    rgba(22,24,26,0.12);
  --success:       #2f8f5b;

  /* --- type --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- spacing scale --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;
  --space-8: 9rem;

  /* --- misc --- */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 24px;
  --shadow-card: 0 1px 2px rgba(22,24,26,0.06), 0 8px 24px rgba(22,24,26,0.08);
  --shadow-lift: 0 12px 32px rgba(22,24,26,0.16);
  --ease: cubic-bezier(.22,.61,.36,1);
  --container: 1200px;
}

/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
input,select,textarea{ font-family: inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline: 3px solid var(--orange); outline-offset: 2px; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--space-3); }
@media (min-width: 768px){ .container{ padding: 0 var(--space-5); } }

.section{ padding: var(--space-7) 0; }
@media (max-width: 767px){ .section{ padding: var(--space-6) 0; } }

.section--dark{ background: var(--charcoal); color: var(--ivory); }
.section--light{ background: var(--ivory); color: var(--ink); }
.section--paper{ background: var(--ivory-2); color: var(--ink); }

.eyebrow{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  display:flex;
  align-items:center;
  gap: 0.6rem;
  margin-bottom: var(--space-2);
}
.eyebrow::before{ content:''; width: 28px; height: 2px; background: var(--orange); display:inline-block; }

h1, .h1{ font-family: var(--font-display); font-weight: 600; line-height: 1.03; letter-spacing: -0.01em; font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
h2, .h2{ font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3, .h3{ font-family: var(--font-display); font-weight: 600; line-height: 1.15; font-size: clamp(1.3rem, 2vw, 1.7rem); }
.lede{ font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--ink-soft); max-width: 640px; }
.section--dark .lede{ color: rgba(247,242,233,0.72); }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 0.6rem;
  padding: 1.05rem 1.9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  border: none;
  transition: transform .25s var(--ease), filter .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}
.btn-primary{
  background: var(--orange);
  color: #191008;
  box-shadow: 0 8px 20px rgba(255,106,44,0.35);
}
.btn-primary:hover{ filter: brightness(1.06); box-shadow: 0 12px 28px rgba(255,106,44,0.45); transform: translateY(-1px); }
.btn-primary .arrow{ transition: transform .25s var(--ease); }
.btn-primary:hover .arrow{ transform: translateX(6px); }

.btn-ghost{
  background: transparent;
  border: 1.5px solid var(--line-light);
  color: var(--ink);
}
.section--dark .btn-ghost{ border-color: var(--line-dark); color: var(--ivory); }
.btn-ghost:hover{ border-color: var(--orange); color: var(--orange); }

.btn-block{ width:100%; }
.btn-lg{ padding: 1.2rem 2.2rem; font-size: 1.05rem; }

/* ---------- nav ---------- */
.nav{
  position: sticky; top:0; z-index: 60;
  background: rgba(22,24,26,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-dark);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding: 1rem var(--space-3); }
.nav-logo{ font-family: var(--font-display); font-weight:700; font-size:1.25rem; color: var(--ivory); letter-spacing: -0.01em; }
.nav-logo span{ color: var(--orange); }
.nav-cta{ font-size: 0.85rem; padding: 0.75rem 1.3rem; flex-shrink: 0; }
.nav-logo{ min-width: 0; }
@media (max-width: 640px){
  .nav-cta{ display:none; }
  .nav-logo{ font-size: 1.05rem; }
}

/* ---------- urgency bar ---------- */
.urgency-bar{
  background: var(--charcoal-2);
  color: var(--ivory);
  border-bottom: 1px solid var(--line-dark);
  font-size: 0.85rem;
}
.urgency-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 0.9rem 1.6rem;
  padding: 0.7rem var(--space-3);
  text-align:center;
}
.urgency-label{ font-weight:700; letter-spacing:0.04em; text-transform:uppercase; font-size:0.72rem; color: rgba(247,242,233,0.6); }
.urgency-spots{ font-weight:700; color: var(--orange); }
.countdown{ display:flex; gap: 0.4rem; align-items:center; }
.countdown-cell{ display:flex; flex-direction:column; align-items:center; min-width: 2.6rem; }
.countdown-num{ font-variant-numeric: tabular-nums; font-weight:800; font-size:0.95rem; background: var(--charcoal-3); border-radius: 6px; padding: 0.2rem 0.4rem; min-width: 2.4rem; text-align:center; }
.countdown-cell-label{ font-size: 0.58rem; letter-spacing:0.08em; text-transform:uppercase; color: rgba(247,242,233,0.5); margin-top:0.25rem; }
.countdown-colon{ opacity:0.4; font-weight:700; }
.urgency-cta{ padding: 0.55rem 1.1rem; font-size: 0.8rem; }

@media (max-width: 640px){
  .urgency-inner{ font-size:0.78rem; gap:0.6rem 1rem; }
  .urgency-cta{ display:none; }
}

/* ---------- floating label chips (hero) ---------- */
.chip{
  display:inline-flex; align-items:center; gap:0.5rem;
  background: rgba(247,242,233,0.08);
  border: 1px solid var(--line-dark);
  color: var(--ivory);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight:600;
  backdrop-filter: blur(6px);
}
.chip .dot{ width:6px; height:6px; border-radius:50%; background: var(--orange); }

/* ---------- hero ---------- */
.hero{ background: var(--charcoal); color: var(--ivory); position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-6); align-items:center; padding: var(--space-7) 0 var(--space-6); }
@media (max-width: 960px){ .hero-grid{ grid-template-columns:1fr; gap: var(--space-5); padding: var(--space-6) 0 var(--space-5); } }
.hero-copy .lede{ color: rgba(247,242,233,0.75); margin: var(--space-3) 0 var(--space-4); }
.hero-reassure{ margin-top: var(--space-3); display:flex; flex-wrap:wrap; gap: 0.5rem 1.3rem; font-size:0.85rem; color: rgba(247,242,233,0.6); }
.hero-reassure li{ display:flex; align-items:center; gap:0.5rem; }
.hero-reassure li::before{ content:'✓'; color: var(--orange); font-weight:700; }

.hero-visual{ position:relative; }
.hero-photo-frame{
  position:relative; border-radius: var(--radius-l); overflow:hidden;
  aspect-ratio: 4/5; background: linear-gradient(155deg, #2a2d32, #1a1c1f);
  border: 1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.placeholder-tag{
  /* Self-contained contrast (own dark backdrop) so it reads clearly on any
     section background — dark, paper, or light — not just the dark hero. */
  color: rgba(247,242,233,0.85); font-size:0.85rem; font-weight:600; letter-spacing:0.03em;
  background: rgba(22,24,26,0.6);
  border: 1px dashed rgba(247,242,233,0.35); border-radius: var(--radius-s); padding: var(--space-3);
  margin: var(--space-3);
}
.hero-float-chip{ position:absolute; }
.hero-float-chip.c1{ top: 8%; left: -6%; }
.hero-float-chip.c2{ bottom: 20%; right: -4%; }
.hero-float-chip.c3{ bottom: 6%; left: 4%; }
@media (max-width: 640px){ .hero-float-chip{ position:static; margin: 0.4rem 0.4rem 0 0; } .hero-float-wrap{ display:flex; flex-wrap:wrap; margin-top: var(--space-3); } }
@media (min-width: 641px){ .hero-float-wrap{ display:contents; } }

.credential-strip{ display:flex; flex-wrap:wrap; gap: 0.6rem 1.6rem; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line-dark); }
.credential-item{ font-size: 0.82rem; color: rgba(247,242,233,0.55); font-weight:600; letter-spacing:0.01em; }

/* ---------- video / VSL ---------- */
.video-frame{
  position:relative; border-radius: var(--radius-l); overflow:hidden; aspect-ratio: 16/9;
  background: linear-gradient(155deg,#242629,#17181a);
  border: 1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.play-btn{
  width: 84px; height:84px; border-radius:50%; background: var(--orange);
  display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 30px rgba(255,106,44,0.45);
  transition: transform .25s var(--ease);
}
.video-frame:hover .play-btn{ transform: scale(1.06); }
.play-btn::after{ content:''; border-left: 20px solid #191008; border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:5px; }
.video-embed-portrait{ position:relative; aspect-ratio: 9/16; max-width: 380px; margin: 0 auto; border-radius: var(--radius-l); overflow:hidden; border: 1px solid var(--line-dark); background: #000; }
.video-embed-portrait iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.testi-video-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.testi-video-card{ text-align:center; }
.testi-video-frame{ position:relative; aspect-ratio: 9/16; border-radius: var(--radius-m); overflow:hidden; border: 1px solid var(--line-light); background:#000; box-shadow: var(--shadow-card); }
.testi-video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.testi-video-name{ margin-top: 0.7rem; font-weight:700; font-size:0.95rem; }

.coach-photo-strip{ max-width: 320px; margin: 0 auto; }
.coach-photo-strip img{ width:100%; border-radius: var(--radius-l); box-shadow: var(--shadow-card); }

.video-points{ display:grid; grid-template-columns: repeat(2,1fr); gap: 0.9rem 2rem; margin-top: var(--space-4); }
@media (max-width:640px){ .video-points{ grid-template-columns:1fr; } }
.video-points li{ display:flex; gap:0.7rem; font-size:0.98rem; color: rgba(247,242,233,0.78); }
.video-points li::before{ content:'—'; color: var(--orange); font-weight:700; flex-shrink:0; }

/* ---------- narrative / I see you ---------- */
.narrative{ max-width: 760px; }
.narrative p{ font-size: clamp(1.05rem,1.6vw,1.25rem); line-height:1.7; color: var(--ink-soft); margin-bottom: 1.1rem; }
.narrative p.emph{ color: var(--ink); font-weight:600; }

/* ---------- bento grid ---------- */
.bento{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-5); }
@media (max-width: 900px){ .bento{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .bento{ grid-template-columns: 1fr; } }
.bento-card{
  background: var(--white); border-radius: var(--radius-m); padding: var(--space-4);
  box-shadow: var(--shadow-card); border: 1px solid var(--line-light);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bento-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.bento-num{ font-family: var(--font-display); font-size:0.95rem; color: var(--orange); font-weight:700; margin-bottom: 0.8rem; }
.bento-card h3{ margin-bottom: 0.5rem; }
.bento-card p{ color: var(--ink-soft); font-size:0.96rem; line-height:1.5; }

.section--dark .bento-card{ background: var(--charcoal-2); border-color: var(--line-dark); }
.section--dark .bento-card p{ color: rgba(247,242,233,0.68); }
.section--dark .bento-card h3{ color: var(--ivory); }

/* ---------- outcome grid ---------- */
.outcome-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3); margin-top: var(--space-5); }
@media (max-width: 900px){ .outcome-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .outcome-grid{ grid-template-columns: 1fr; } }
.outcome-card{
  border-radius: var(--radius-m); padding: var(--space-4); text-align:center;
  background: var(--ivory-2); border: 1px solid var(--line-light);
}
.outcome-icon{ width:48px; height:48px; margin: 0 auto 0.9rem; border-radius:50%; background: rgba(255,106,44,0.12); display:flex; align-items:center; justify-content:center; }
.outcome-icon .dot{ width:12px; height:12px; border-radius:50%; background: var(--orange); }
.outcome-card h3{ font-size:1.1rem; }

/* ---------- testimonials ---------- */
.testi-wrap{ display:grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-4); margin-top: var(--space-5); }
@media (max-width: 900px){ .testi-wrap{ grid-template-columns:1fr; } }
.testi-featured{
  background: var(--white); border-radius: var(--radius-l); overflow:hidden; border:1px solid var(--line-light); box-shadow: var(--shadow-card);
}
.testi-featured-photo{ aspect-ratio: 16/10; background: linear-gradient(155deg,#efe7d6,#e6dcc6); display:flex; align-items:center; justify-content:center; }
.testi-featured-body{ padding: var(--space-4); }
.testi-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width:560px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{ background: var(--white); border-radius: var(--radius-m); padding: var(--space-3); border:1px solid var(--line-light); box-shadow: var(--shadow-card); }
.testi-avatar{ width:44px; height:44px; border-radius:50%; background: var(--ivory-3); display:flex; align-items:center; justify-content:center; font-weight:700; font-family: var(--font-display); color: var(--orange); margin-bottom:0.8rem; }
.testi-name{ font-weight:700; font-size:0.95rem; }
.testi-role{ font-size:0.8rem; color: var(--ink-soft); margin-bottom:0.6rem; }
.testi-quote{ font-size:0.92rem; color: var(--ink-soft); line-height:1.5; }
.testi-result{ display:inline-block; margin-top:0.7rem; font-size:0.76rem; font-weight:700; color: var(--orange-dark); background: rgba(255,106,44,0.1); padding:0.3rem 0.6rem; border-radius:999px; }

/* ---------- comparison ---------- */
.compare{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-5); }
@media (max-width: 767px){ .compare{ grid-template-columns:1fr; } }
.compare-col{ border-radius: var(--radius-l); padding: var(--space-4); }
.compare-old{ background: var(--charcoal-2); border: 1px solid var(--line-dark); }
.compare-new{ background: var(--orange); }
.compare-title{ font-family: var(--font-display); font-size:1.3rem; margin-bottom: var(--space-3); }
.compare-old .compare-title{ color: rgba(247,242,233,0.6); }
.compare-new .compare-title{ color: #1c1006; }
.compare-list li{ padding: 0.7rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); display:flex; gap:0.7rem; font-size:0.98rem; }
.compare-old .compare-list li{ color: rgba(247,242,233,0.7); }
.compare-old .compare-list li::before{ content:'×'; color:#8a8d92; font-weight:700; }
.compare-new .compare-list{ }
.compare-new .compare-list li{ color:#1c1006; border-bottom-color: rgba(0,0,0,0.1); font-weight:600; }
.compare-new .compare-list li::before{ content:'✓'; font-weight:800; }

/* ---------- process steps ---------- */
.process-flow{ display:flex; flex-wrap:wrap; align-items:center; gap: 0.6rem; margin-top: var(--space-5); }
.process-step{ background: var(--white); border:1px solid var(--line-light); border-radius:999px; padding: 0.8rem 1.4rem; font-weight:700; font-size:0.92rem; box-shadow: var(--shadow-card); }
.process-arrow{ color: var(--orange); font-weight:700; font-size:1.2rem; }
@media (max-width:640px){ .process-flow{ flex-direction:column; align-items:flex-start; } .process-arrow{ transform: rotate(90deg); align-self:flex-start; margin-left:1.4rem; } }

/* ---------- kaizen story (scroll) ---------- */
.kaizen-story{ margin-top: var(--space-6); }
.kaizen-track{ display:flex; flex-direction:column; gap: var(--space-2); max-width: 620px; margin: 0 auto; }
.kaizen-node{
  display:flex; align-items:center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-m);
  border: 1px solid var(--line-dark); opacity: 0.4; transition: opacity .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
.kaizen-node.active{ opacity:1; border-color: var(--orange); background: rgba(255,106,44,0.08); }
.kaizen-node-index{ width: 40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; background: var(--charcoal-3); color: rgba(247,242,233,0.5); flex-shrink:0; transition: background .5s var(--ease), color .5s var(--ease); }
.kaizen-node.active .kaizen-node-index{ background: var(--orange); color:#1c1006; }
.kaizen-node-label{ font-family: var(--font-display); font-size:1.15rem; color: rgba(247,242,233,0.55); transition: color .5s var(--ease); }
.kaizen-node.active .kaizen-node-label{ color: var(--ivory); }
.kaizen-connector{ width:2px; height: 22px; background: var(--line-dark); margin-left: 20px; }

/* ---------- pillars ---------- */
.pillars{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-3); margin-top: var(--space-5); position:relative; }
@media (max-width: 900px){ .pillars{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .pillars{ grid-template-columns: 1fr; } }
.pillar-card{ background: var(--white); border-radius: var(--radius-m); padding: var(--space-4); border:1px solid var(--line-light); box-shadow: var(--shadow-card); text-align:center; }
.pillar-num{ font-family: var(--font-display); color: var(--orange); font-weight:700; font-size:0.9rem; margin-bottom:0.6rem; }
.pillar-hub{ text-align:center; margin-top: var(--space-4); font-family: var(--font-display); font-size:1.1rem; color: var(--ink-soft); }
.pillar-hub b{ color: var(--orange-dark); }
.section--dark .pillar-hub{ color: rgba(247,242,233,0.75); }
.section--dark .pillar-hub b{ color: var(--orange); }

/* ---------- indian food ---------- */
.food-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-2); margin-top: var(--space-5); }
@media (max-width: 767px){ .food-grid{ grid-template-columns: repeat(2,1fr); } }
.food-tile{ aspect-ratio: 1/1; min-width:0; border-radius: var(--radius-m); background: linear-gradient(155deg,#efe7d6,#e6dcc6); display:flex; align-items:center; justify-content:center; text-align:center; border:1px solid var(--line-light); }
.food-tile span{ font-weight:700; font-size:0.85rem; color: var(--ink-soft); letter-spacing:0.04em; text-transform:uppercase; }

/* ---------- personalization inputs ---------- */
.inputs-cloud{ display:flex; flex-wrap:wrap; gap:0.7rem; justify-content:center; margin-top: var(--space-5); }
.input-pill{ background: var(--white); border:1px solid var(--line-light); border-radius:999px; padding:0.7rem 1.3rem; font-weight:600; font-size:0.9rem; box-shadow: var(--shadow-card); }
.inputs-down{ text-align:center; font-size:1.6rem; color: var(--orange); margin: var(--space-3) 0; }
.plan-result{ max-width: 420px; margin: 0 auto; text-align:center; background: var(--charcoal); color: var(--ivory); border-radius: var(--radius-l); padding: var(--space-4); }

/* ---------- timeline (phases) ---------- */
.phase-timeline{ display:flex; gap: var(--space-3); margin-top: var(--space-6); position:relative; }
@media (max-width: 900px){ .phase-timeline{ flex-direction:column; } }
.phase-timeline::before{ content:''; position:absolute; top: 28px; left:0; right:0; height:2px; background: var(--line-light); }
@media (max-width: 900px){ .phase-timeline::before{ display:none; } }
.phase-card{ flex:1; position:relative; padding-top: var(--space-4); }
.phase-marker{ position:absolute; top:0; left:0; width:56px; height:56px; border-radius:50%; background: var(--white); border: 2px solid var(--orange); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; color: var(--orange-dark); z-index:2; }
.phase-body{ background: var(--white); border-radius: var(--radius-m); padding: var(--space-4); border:1px solid var(--line-light); box-shadow: var(--shadow-card); margin-top: var(--space-2); }
.phase-body h3{ margin-bottom:0.6rem; }
.phase-body ul li{ font-size:0.92rem; color: var(--ink-soft); padding: 0.35rem 0; display:flex; gap:0.5rem; }
.phase-body ul li::before{ content:'—'; color: var(--orange); }

/* ---------- process visual (dark) ---------- */
.vertical-flow{ display:flex; flex-direction:column; align-items:center; gap: 0.6rem; margin-top: var(--space-5); }
.vf-node{ background: var(--charcoal-2); border:1px solid var(--line-dark); border-radius:999px; padding: 0.9rem 1.8rem; font-weight:700; }
.vf-arrow{ color: var(--orange); font-size:1.3rem; }

/* ---------- coach ---------- */
.coach-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-6); align-items:center; margin-top: var(--space-5); }
@media (max-width: 900px){ .coach-grid{ grid-template-columns:1fr; gap: var(--space-4); } }
.coach-photo{ aspect-ratio: 4/5; border-radius: var(--radius-l); background: linear-gradient(155deg,#efe7d6,#e6dcc6); }
.coach-role-tags{ display:flex; gap:0.6rem; margin: var(--space-3) 0; flex-wrap:wrap; }
.coach-role-tag{ font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding: 0.4rem 0.8rem; border-radius:999px; background: rgba(255,106,44,0.1); color: var(--orange-dark); }

/* ---------- proof strip (screenshots) ---------- */
.proof-strip{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-2); margin-top: var(--space-5); }
@media (max-width: 900px){ .proof-strip{ grid-template-columns: repeat(2,1fr); } }
.proof-tile{ aspect-ratio: 9/16; min-width:0; border-radius: var(--radius-m); background: var(--ivory-2); border:1px dashed var(--line-light); display:flex; align-items:center; justify-content:center; padding: var(--space-2); text-align:center; cursor:pointer; }

/* ---------- who for / not for ---------- */
.for-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-3); margin-top: var(--space-5); }
@media (max-width: 900px){ .for-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .for-grid{ grid-template-columns: 1fr; } }
.for-card{ background: var(--white); border-radius: var(--radius-m); padding: var(--space-4); border: 1px solid var(--line-light); box-shadow: var(--shadow-card); }
.for-card h3{ font-size:1.05rem; margin-bottom:0.5rem; color: var(--orange-dark); }
.for-card p{ font-size:0.92rem; color: var(--ink-soft); line-height:1.5; }

.notfor-wrap{ display:grid; grid-template-columns:1fr 1fr; gap: var(--space-4); margin-top: var(--space-5); }
@media (max-width:767px){ .notfor-wrap{ grid-template-columns:1fr; } }
.notfor-card{ border-radius: var(--radius-l); padding: var(--space-4); }
.notfor-card.no{ background: var(--charcoal-2); border:1px solid var(--line-dark); }
.notfor-card.yes{ background: var(--ivory-2); border: 1px solid var(--line-light); }
.notfor-card h3{ margin-bottom: var(--space-3); font-size:1.15rem; }
.notfor-card.no h3{ color: rgba(247,242,233,0.85); }
.notfor-card ul li{ padding: 0.55rem 0; font-size:0.96rem; display:flex; gap:0.6rem; }
.notfor-card.no ul li{ color: rgba(247,242,233,0.65); }
.notfor-card.no ul li::before{ content:'×'; color:#8a8d92; font-weight:700; }
.notfor-card.yes ul li::before{ content:'✓'; color: var(--orange-dark); font-weight:700; }

/* ---------- FAQ ---------- */
.faq-list{ max-width: 780px; margin: var(--space-5) auto 0; }
.faq-item{ border-bottom: 1px solid var(--line-light); }
.faq-q{
  width:100%; background:none; border:none; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-3);
  padding: var(--space-3) 0.2rem; font-family: var(--font-display); font-size:1.05rem; font-weight:600; color: var(--ink);
}
.faq-q .plus{ flex-shrink:0; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line-light); display:flex; align-items:center; justify-content:center; position:relative; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.faq-q .plus::before, .faq-q .plus::after{ content:''; position:absolute; background: var(--ink-soft); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.faq-q .plus::before{ width:12px; height:2px; }
.faq-q .plus::after{ width:2px; height:12px; }
.faq-item[aria-expanded="true"] .plus{ border-color: var(--orange); transform: rotate(45deg); }
.faq-item[aria-expanded="true"] .plus::before, .faq-item[aria-expanded="true"] .plus::after{ background: var(--orange); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.faq-a-inner{ padding: 0 0.2rem var(--space-3); color: var(--ink-soft); line-height:1.6; max-width: 640px; }

/* ---------- final CTA sections ---------- */
.final-emotional{ text-align:center; }
.final-emotional .h1{ max-width: 900px; margin: 0 auto var(--space-4); }

/* ---------- footer ---------- */
.site-footer{ background: var(--charcoal); color: rgba(247,242,233,0.55); padding: var(--space-4) 0; border-top: 1px solid var(--line-dark); }
.footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap: var(--space-2); font-size:0.85rem; }
.footer-links{ display:flex; gap: var(--space-3); flex-wrap:wrap; }
.footer-links a:hover{ color: var(--orange); }
.footer-disclaimer{ font-size:0.76rem; color: rgba(247,242,233,0.35); margin-top: var(--space-2); max-width: 900px; }

/* ---------- modal ---------- */
.modal-overlay{
  position: fixed; inset:0; background: rgba(16,17,19,0.68); backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center; padding: var(--space-3);
  opacity:0; pointer-events:none; transition: opacity .3s var(--ease); z-index: 100;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-box{
  background: var(--ivory); border-radius: var(--radius-l); max-width: 460px; width:100%;
  padding: var(--space-5) var(--space-4); position:relative; box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  transform: translateY(16px) scale(0.98); transition: transform .35s var(--ease);
}
.modal-overlay.open .modal-box{ transform: translateY(0) scale(1); }
.modal-close{ position:absolute; top: var(--space-3); right: var(--space-3); width:36px; height:36px; border-radius:50%; background: rgba(22,24,26,0.06); border:none; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.modal-close:hover{ background: rgba(22,24,26,0.12); }

/* ---------- forms ---------- */
.field{ margin-bottom: var(--space-3); text-align:left; }
.field label{ display:block; font-size:0.8rem; font-weight:700; letter-spacing:0.02em; text-transform:uppercase; color: var(--ink-soft); margin-bottom: 0.45rem; }
.field input{
  width:100%; padding: 0.95rem 1.05rem; border-radius: var(--radius-s); border: 1.5px solid var(--line-light);
  background: var(--white); font-size:1rem; color: var(--ink); transition: border-color .2s var(--ease);
}
.field input:focus{ border-color: var(--orange); }
.field-error{ font-size:0.78rem; color:#c0392b; margin-top: 0.4rem; display:none; }
.field.invalid input{ border-color:#c0392b; }
.field.invalid .field-error{ display:block; }
.form-note{ font-size:0.78rem; color: var(--ink-soft); text-align:center; margin-top: var(--space-2); line-height:1.5; }

/* ---------- compact CTA countdown (sits directly under a button) ---------- */
.cta-countdown{ margin-top:0.7rem; display:flex; align-items:center; justify-content:center; gap:0.4rem; font-size:0.78rem; color: var(--ink-soft); }
.cta-countdown-time{ font-variant-numeric: tabular-nums; font-weight:700; color: var(--orange-dark); }
.section--dark .cta-countdown, .hero .cta-countdown{ color: rgba(247,242,233,0.55); }
.section--dark .cta-countdown-time, .hero .cta-countdown-time{ color: var(--orange); }

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{
  position: fixed; left:0; right:0; bottom:0; z-index: 70;
  background: var(--ivory); border-top: 1px solid var(--line-light);
  padding: 0.8rem var(--space-3); box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
  transform: translateY(120%); transition: transform .35s var(--ease);
}
.sticky-cta.show{ transform: translateY(0); }
@media (min-width: 901px){ .sticky-cta{ display:none; } }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform: translateY(0); }

/* ---------- simple page hero (page 2/3/4) ---------- */
.simple-hero{ background: var(--charcoal); color: var(--ivory); text-align:center; padding: var(--space-6) 0 var(--space-5); }
.simple-hero .lede{ margin: var(--space-2) auto 0; color: rgba(247,242,233,0.72); }

.form-page-wrap{ max-width: 480px; margin: 0 auto; }
.form-card{ background: var(--white); border-radius: var(--radius-l); padding: var(--space-5) var(--space-4); box-shadow: var(--shadow-card); border:1px solid var(--line-light); margin-top: var(--space-4); position:relative; z-index:5; }

/* schedule page */
.schedule-grid{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-5); align-items:start; margin-top: var(--space-5); }
@media (max-width: 900px){ .schedule-grid{ grid-template-columns:1fr; } }
.agenda-list li{ display:flex; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--line-light); }
.agenda-num{ font-family: var(--font-display); color: var(--orange); font-weight:700; flex-shrink:0; }
.calendly-frame-wrap{ height: clamp(700px, calc(100vh - 220px), 980px); border-radius: var(--radius-l); overflow:hidden; border: 1px solid var(--line-light); background: var(--white); }
.calendly-frame-wrap iframe{ height:100% !important; min-height:100% !important; }
@media (max-width: 767px){ .calendly-frame-wrap{ height: 680px; } }
.calendly-fallback{ text-align:center; padding: var(--space-6) var(--space-3); }

/* confirmation */
.confirm-check{ width:76px; height:76px; border-radius:50%; background: rgba(47,143,91,0.12); display:flex; align-items:center; justify-content:center; margin: 0 auto var(--space-3); }
.confirm-steps{ max-width: 560px; margin: var(--space-5) auto 0; }
.confirm-steps li{ display:flex; gap: var(--space-3); padding: var(--space-2) 0; }
.confirm-num{ width:32px; height:32px; border-radius:50%; background: var(--orange); color:#1c1006; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0.9rem; }

/* grid children default to min-width:auto, which can force overflow when
   content (esp. aspect-ratio boxes) has a large intrinsic min size */
.bento > *, .outcome-grid > *, .pillars > *, .food-grid > *, .for-grid > *,
.testi-grid > *, .proof-strip > *, .phase-timeline > *, .compare > *, .notfor-wrap > *{
  min-width: 0;
}

/* utility */
.mt-0{ margin-top:0 !important; }
.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }