/* ═══════════════════════════════════════════════════
   SOFT CYCLE LANDING PAGE — Somatic Design System
   Parasympathetic-inducing UI. No stark black/white.
   ═══════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─── */
:root {
  /* Grounding Palette — No #000 or #FFF */
  --sc-charcoal-deep:   #1A1F1D;
  --sc-charcoal:        #2C302E;
  --sc-forest-deep:     #222A26;
  --sc-forest-muted:    #2E3B34;

  /* Text — Soft, muted, low-strain */
  --sc-cream:           #F9F8F2;  /* was #F4F4F0 — aligned to §3 */
  --sc-cream-soft:      #E8E6DF;
  --sc-text-muted:      #A8A59E;
  /* Every user of this token sits on a DARK surface (.sc-faq disclaimer,
     hero VSL label, scroll cue), so it has to go LIGHTER to gain contrast,
     not darker. #7D7B76 read 3.48 on rgb(34,42,38). */
  /* Split by surface 2026-08-02. One value served both the hero VSL label
     (on cream) and .sc-disclaimer (on charcoal); correcting it for either
     one broke the other, twice. Muted tokens need both variants. */
  --sc-text-subtle:         #71706B;   /* on LIGHT  (4.5 on cream) */
  --sc-text-subtle-on-dark: #918F89;   /* on DARK   (4.5 on charcoal) */

  /* Accent — Clinical warmth */
  --sc-sage:            #8A9A90;
  --sc-sage-muted:      #768A7D;
  --sc-warm-gold:       #C4A87A;

  /* Typography */
  --sc-font-serif:      'Playfair Display', Georgia, 'Times New Roman', serif;
  --sc-font-sans:       'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sc-font-script:     'Caveat', cursive;

  /* Fluid type scale */
  --sc-fs-eyebrow:      clamp(0.65rem, 0.5vw + 0.3rem, 0.8rem);
  --sc-fs-headline:     clamp(2rem, 4.5vw + 0.5rem, 4.25rem);
  --sc-fs-subheadline:  clamp(0.95rem, 1vw + 0.4rem, 1.2rem);

  /* Spacing */
  --sc-gutter:          clamp(1rem, 2vw, 2rem);

  /* Shape */
  --sc-radius-vsl:      28px;

  /* Motion — Somatic: slow, fluid, no snaps */
  --sc-ease:            cubic-bezier(0.2, 0.8, 0.2, 1);
  --sc-ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --sc-duration-med:    0.8s;
  --sc-duration-fast:   0.4s;
}


/* ─── RESET & BASE ─── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--sc-font-sans);
  background-color: var(--sc-charcoal-deep);
  color: var(--sc-cream);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

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

ul {
  list-style: none;
}


/* ═══════════════════════════════════════════════════
   HERO SECTION — Somatic Intervention
   ═══════════════════════════════════════════════════ */
.sc-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* was calc(5rem + 60px) top / 0 bottom — a fixed, non-viewport-relative
     top pad plus zero bottom pad. Combined with overflow:hidden below,
     this was clipping ~116px of real content (the scroll-cue) at desktop
     widths: scrollHeight (1385px) exceeded the rendered box (1269px).
     Clamped dvh padding on both edges per SKILL_02's Aman Rule fixes both
     the clipping and the flat non-fluid top value. */
  padding: clamp(6rem, 14svh, 8rem) var(--sc-gutter) clamp(2rem, 4svh, 3rem);
  overflow: visible;

  /* Grounding gradient — dark slate → deep forest */
  background:
    linear-gradient(
      175deg,
      var(--sc-charcoal) 0%,
      #242B27 30%,
      var(--sc-forest-deep) 60%,
      var(--sc-forest-muted) 100%
    );
}

/* ─── Ambient Breathing Orbs ─── */
.sc-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.35;
  pointer-events: none;
  will-change: transform, opacity;
}

.sc-hero__orb--1 {
  width: 600px;
  height: 600px;
  top: -15%;
  left: -10%;
  background: radial-gradient(circle, rgba(138, 154, 144, 0.25) 0%, transparent 70%);
  animation: sc-orb-drift-1 18s var(--sc-ease) infinite alternate;
}

.sc-hero__orb--2 {
  width: 500px;
  height: 500px;
  bottom: -10%;
  right: -8%;
  background: radial-gradient(circle, rgba(196, 168, 122, 0.15) 0%, transparent 70%);
  animation: sc-orb-drift-2 22s var(--sc-ease) infinite alternate;
}

@keyframes sc-orb-drift-1 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.3; }
  50%  { transform: translate(30px, 20px) scale(1.05); opacity: 0.4; }
  100% { transform: translate(-15px, 35px) scale(0.97); opacity: 0.25; }
}

@keyframes sc-orb-drift-2 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.2; }
  50%  { transform: translate(-20px, -15px) scale(1.08); opacity: 0.3; }
  100% { transform: translate(25px, -10px) scale(0.95); opacity: 0.15; }
}


/* ─── Content Container ─── */
.sc-hero__container {
  position: relative;
  z-index: 2;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ─── Eyebrow ─── */
.sc-hero__eyebrow {
  display: inline-block;
  font-family: var(--sc-font-sans);
  font-size: var(--sc-fs-eyebrow);
  font-weight: 500;
  color: var(--sage-deep, #5A6457);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  position: relative;
  padding: 0.4rem 1.25rem;
}

/* Subtle pill border around eyebrow */
.sc-hero__eyebrow::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(138, 154, 144, 0.2);
  border-radius: 100px;
  pointer-events: none;
}

/* ─── Headline ─── */
.sc-hero__headline {
  font-family: var(--sc-font-serif);
  font-size: var(--sc-fs-headline);
  font-weight: 600;
  line-height: 1.15;
  color: var(--sc-cream);
  letter-spacing: -0.01em;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.sc-hero__headline-em {
  font-style: italic;
  font-weight: 400;
  color: var(--sc-cream-soft);
  /* Subtle warmth on the emphasis */
  background: linear-gradient(135deg, var(--sc-cream-soft), var(--sc-warm-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Subheadline ─── */
.sc-hero__subheadline {
  max-width: var(--measure, 68ch);
  font-family: var(--sc-font-sans);
  font-size: var(--sc-fs-subheadline);
  font-weight: 300;
  line-height: 1.7;
  color: var(--sc-text-muted);
  max-width: 640px;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}


/* ═══════════════════════════════════════════════════
   VSL CONTAINER — Neuroception of Safety via Shape
   Organic curves. Diffuse premium shadow. No sharp angles.
   ═══════════════════════════════════════════════════ */
.sc-hero__vsl-wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.sc-hero__vsl {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--sc-radius-vsl);
  overflow: hidden;
  background: linear-gradient(145deg, #1E2422, #252D29);

  /* Premium diffuse shadow — lifted object effect */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 24px 80px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(138, 154, 144, 0.06),
    inset 0 1px 0 rgba(244, 244, 240, 0.04);

  transition: box-shadow var(--sc-duration-med) var(--sc-ease),
              transform var(--sc-duration-med) var(--sc-ease);
}

/* The -2px lift was removed 2026-08-07. It read as feedback back when this
   frame held a play button; now it holds the player itself, and shifting the
   whole thing upward as she reaches for the controls moves the target under
   her cursor. The shadow bloom stays — that is atmosphere, not a promise. */
.sc-hero__vsl:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 32px 100px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(138, 154, 144, 0.1),
    inset 0 1px 0 rgba(244, 244, 240, 0.06);
}

/* VSL Iframe/Video (when activated) */
.sc-hero__vsl iframe,
.sc-hero__vsl video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--sc-radius-vsl);
}


/* ═══════════════════════════════════════════════════
   SCROLL CUE — Unpressured, Gentle, Slow-Pulsing
   ═══════════════════════════════════════════════════ */
/* Now an <a>, not a decorative div — it needs link resets and a visible focus
   ring. Hover is only a bonus here; the label is the affordance on touch. */
.sc-hero__scroll-cue {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: 0.5rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 16px;
}

.sc-hero__scroll-cue:hover .sc-hero__scroll-text,
.sc-hero__scroll-cue:focus-visible .sc-hero__scroll-text {
  opacity: 1;
}

.sc-hero__scroll-cue:focus-visible {
  outline: 1px solid var(--sc-text-subtle);
  outline-offset: 8px;
}

.sc-hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--sc-text-subtle), transparent);
  animation: sc-scroll-pulse 3.5s var(--sc-ease) infinite;
}

.sc-hero__scroll-arrow {
  width: 20px;
  height: 20px;
  color: var(--sc-text-subtle);
  animation: sc-scroll-pulse 3.5s var(--sc-ease) infinite;
  animation-delay: 0.3s;
}

.sc-hero__scroll-text {
  font-family: var(--sc-font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--sc-text-subtle);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity 0.8s var(--sc-ease);
}

@keyframes sc-scroll-pulse {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 0.7; transform: translateY(6px); }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Mobile First Refinements
   ═══════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 768px) {

  .sc-hero {
    padding-top: calc(4rem + 50px);
  }

  .sc-hero__headline {
    font-size: clamp(1.75rem, 6vw + 0.3rem, 3rem);
  }

  .sc-hero__subheadline {
    font-size: clamp(0.9rem, 1vw + 0.4rem, 1.05rem);
    padding: 0 0.5rem;
    margin-bottom: 2.5rem;
  }

  .sc-hero__vsl {
    border-radius: 20px;
  }

  .sc-hero__orb--1 {
    width: 350px;
    height: 350px;
  }

  .sc-hero__orb--2 {
    width: 300px;
    height: 300px;
  }
}

/* Mobile */
@media (max-width: 480px) {

  .sc-hero {
    padding-top: calc(3.5rem + 40px);
    min-height: 100svh;
  }

  .sc-hero__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    padding: 0.4rem 1rem;
    margin-bottom: 1.25rem;
  }

  .sc-hero__headline {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
    margin-bottom: 1.25rem;
  }

  .sc-hero__subheadline {
    font-size: 0.9rem;
    line-height: 1.65;
    margin-bottom: 2rem;
    padding: 0 0.25rem;
  }

  .sc-hero__vsl {
    border-radius: 16px;
  }

  .sc-hero__scroll-cue {
    margin-top: 2rem;
  }

  .sc-hero__scroll-line {
    height: 28px;
  }

  .sc-hero__orb--1 {
    width: 250px;
    height: 250px;
    top: -8%;
    left: -15%;
  }

  .sc-hero__orb--2 {
    width: 200px;
    height: 200px;
    bottom: -5%;
    right: -12%;
  }
}

/* Large screens */
@media (min-width: 1400px) {
  .sc-hero__container {
    max-width: 900px;
  }

  .sc-hero__vsl-wrap {
    max-width: 800px;
  }
}


/* ═══════════════════════════════════════════════════
   ACCESSIBILITY — Reduced Motion
   ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .sc-hero__orb--1,
  .sc-hero__orb--2 {
    animation: none;
  }

  .sc-hero__scroll-line,
  .sc-hero__scroll-arrow {
    animation: none;
    opacity: 0.5;
  }

  .sc-hero__vsl,
  .sc-bento__card,
  .sc-empathy__image-wrap,
  .sc-pillar,
  .sc-preview__thumb,
  .sc-timeline__card,
  .sc-acc__body,
  .sc-guide__link {
    transition: none !important;
  }
}

/* Global focus-visible for keyboard accessibility */
*:focus-visible {
  outline: 2px solid var(--sc-sage);
  outline-offset: 3px;
}


/* ═══════════════════════════════════════════════════
   SHARED COMPONENTS
   ═══════════════════════════════════════════════════ */
.sc-eyebrow {
  display: inline-block;
  font-family: var(--sc-font-sans);
  font-size: var(--fs-micro, 0.75rem);
  font-weight: 500;
  color: var(--sage-deep, #5A6457);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.sc-eyebrow--rose { color: var(--sc-warm-gold); }

.sc-body {
  font-family: var(--sc-font-sans);
  font-size: var(--sc-fs-subheadline);
  font-weight: 300;
  line-height: 1.7;
  color: var(--sc-text-muted);
}

.sc-note {
  font-style: italic;
  opacity: 0.7;
  margin-top: 0.75rem;
}


/* ═══════════════════════════════════════════════════
   S2: SOMATIC EMPATHY — Warm Stone Validation
   ═══════════════════════════════════════════════════ */
.sc-empathy {
  position: relative;
  background: linear-gradient(180deg, #F4F2EE 0%, #EAE6DF 100%);
  padding-top: 0;   /* wave handles the top transition */
  padding-bottom: 0;
}

/* Fluid asymmetrical wave — dark hero into warm stone */
.sc-empathy__wave-top {
  position: relative;
  width: 100%;
  height: clamp(80px, 10vw, 160px);
  overflow: hidden;
  background: transparent;
  line-height: 0;
  margin-bottom: clamp(2rem, 5vw, 4rem);   /* wave spacing unit */
}

.sc-empathy__wave-top svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Editorial offset grid */
.sc-empathy__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sc-gutter);
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
}

/* Image column */
.sc-empathy__image-col {
  position: relative;
}

.sc-empathy__image-wrap {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sc-empathy__image-wrap:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.sc-empathy__image-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Copy column — constrained for cognitive load reduction */
.sc-empathy__copy-col {
  max-width: 550px;
}

.sc-empathy__heading {
  font-family: var(--sc-font-serif);
  font-size: clamp(1.75rem, 3vw + 0.5rem, 2.75rem);
  font-weight: 500;
  color: #2C302E;
  line-height: 1.2;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: -0.01em;
}

.sc-empathy__body {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.sc-empathy__body p {
  font-family: var(--sc-font-sans);
  font-size: clamp(0.925rem, 0.6vw + 0.5rem, 1.05rem);
  font-weight: 300;
  line-height: 1.8;
  color: #4A4A46;
  margin: 0;
  border-left: 1px solid #C0B9AF;
  padding-left: 24px;
}

/* ---- Responsive: Empathy Section ---- */
@media (max-width: 900px) {
  .sc-empathy__inner {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
  }

  .sc-empathy__image-col {
    order: -1;
  }

  .sc-empathy__image-wrap {
    max-width: 480px;
    margin: 0 auto;
  }

  .sc-empathy__copy-col {
    max-width: 100%;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .sc-empathy__wave-top {
    height: 60px;
    margin-bottom: 1.5rem;
  }

  .sc-empathy__heading {
    font-size: 1.5rem;
  }

  .sc-empathy__wave-bottom {
    height: 50px;
  }
}

/* Bottom wave: warm stone → dark */
.sc-empathy__wave-bottom {
  position: relative;
  width: 100%;
  height: clamp(60px, 8vw, 120px);
  overflow: hidden;
  line-height: 0;
  margin-top: clamp(2rem, 5vw, 4rem);      /* was 3-5rem — matched to the wave unit */
}

.sc-empathy__wave-bottom svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* ═══════════════════════════════════════════════════
   S3: BENTO GRID — Mechanism & Curriculum
   ═══════════════════════════════════════════════════ */
.sc-bento {
  position: relative;
  background: #FAFAFA;
  padding-top: 0;
  padding-bottom: clamp(5rem, 10vw, 8rem);
}

/* Wave: taupe → clinical white */
.sc-bento__wave-top {
  position: relative;
  width: 100%;
  height: clamp(60px, 8vw, 120px);
  overflow: hidden;
  line-height: 0;
  margin-bottom: clamp(2rem, 5vw, 4rem);   /* was 2-3.5rem — matched to the wave unit */
}

.sc-bento__wave-top svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Header Architecture */
.sc-bento__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto clamp(2rem, 5vw, 4rem);   /* was 2.5-4rem — matched to the wave unit */
  padding: 0 var(--sc-gutter);
}

.sc-bento__kicker {
  display: inline-block;
  font-family: var(--sc-font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: #666C69;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.sc-bento__headline {
  font-family: var(--sc-font-serif);
  font-size: clamp(1.75rem, 3vw + 0.5rem, 2.75rem);
  font-weight: 500;
  color: #2C302E;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.sc-bento__sub {
  max-width: var(--measure, 68ch);
  font-family: var(--sc-font-sans);
  font-size: clamp(0.9rem, 0.6vw + 0.5rem, 1.05rem);
  font-weight: 300;
  line-height: 1.75;
  color: #5A5A56;
  max-width: 600px;
  margin: 0 auto;
}

/* Bento Grid — strict 3-column */
.sc-bento__grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--sc-gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Card — hero spans 2 columns, full row height */
.sc-bento__card--hero {
  grid-column: span 2;
}

/* Card base — split panel: art on top, text below */
.sc-bento__card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
  border: 1px solid #F0EFEA;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.sc-bento__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.08);
}

/* Art container — warm taupe, fills top half, top-only border radius */
.sc-bento__art {
  background: #F4F2EE;
  border-radius: 24px 24px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
  /* 50% of card height — flex-basis enforces equal split */
  flex: 0 0 auto;
  min-height: 200px;
}

/* Hero art taller to feel like a banner */
.sc-bento__card--hero .sc-bento__art {
  min-height: 220px;
}

.sc-bento__art svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}

/* Hero card has wider SVG */
.sc-bento__card--hero .sc-bento__art svg {
  max-width: 560px;
}

/* Text area — white, generous padding, grows to fill remaining half */
.sc-bento__text {
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: #FFFFFF;
}

/* Card typography */
.sc-bento__card-title {
  font-family: var(--sc-font-serif);
  font-size: clamp(20px, 1.5vw + 10px, 24px);
  font-weight: 600;
  color: #2C302E;
  margin-bottom: 0.6rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.sc-bento__card-desc {
  max-width: var(--measure, 68ch);
  font-family: var(--sc-font-sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: #595D5B;
  flex-grow: 1;
}

/* ---- Responsive: Bento Grid ---- */
@media (max-width: 900px) {
  .sc-bento__grid {
    grid-template-columns: 1fr 1fr;
  }

  .sc-bento__card--hero {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .sc-bento__grid {
    grid-template-columns: 1fr;
  }

  .sc-bento__card--hero {
    grid-column: span 1;
  }

  .sc-bento__text {
    padding: 24px;
  }

  .sc-bento__card-title {
    font-size: 20px;
  }

  .sc-bento__art {
    min-height: 140px;
    padding: 1.25rem;
  }

  .sc-bento__wave-top {
    height: 50px;
  }
}


/* ═══════════════════════════════════════════════════
   S3.5: FREE PREVIEW — Experiential Proof
   ═══════════════════════════════════════════════════ */
.sc-preview {
  padding: clamp(4rem, 8vw, 7rem) var(--sc-gutter);
  background: #FAFAFA;
  text-align: center;
}

.sc-preview__inner {
  max-width: 860px;
  margin: 0 auto;
}

.sc-preview__title {
  font-family: var(--sc-font-serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #2C302E;
  line-height: 1.25;
  margin-bottom: 1.25rem;
}

.sc-preview__body {
  max-width: var(--measure, 68ch);
  font-family: var(--sc-font-sans);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  color: #5A5A5A;
  line-height: 1.75;
  max-width: 650px;
  margin: 0 auto 2.5rem;
}

/* ── Premium Video Player ── */
.sc-preview__player {
  position: relative;
  max-width: 800px;
  margin: 0 auto 1.5rem;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.06);
  aspect-ratio: 16 / 9;
  background: #E8E5E0;
  /* cursor:pointer removed 2026-08-07 with the thumbnail and play button.
     The frame is no longer a control; the player inside it is. */
}

.sc-preview__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
}

.sc-preview__player:hover .sc-preview__thumb {
  transform: scale(1.02);
  filter: brightness(0.92);
}

/* ── Custom Play Button ── */
.sc-preview__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border: none;
  background: rgba(244, 242, 238, 0.25);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.4s ease,
              box-shadow 0.4s ease;
  z-index: 2;
}

.sc-preview__play svg {
  width: 64px;
  height: 64px;
  display: block;
  margin: 0 auto;
}

.sc-preview__play:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(244, 242, 238, 0.4);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.sc-preview__play:active {
  transform: translate(-50%, -50%) scale(0.96);
}

/* When playing, hide thumbnail and button */
.sc-preview__player.is-playing .sc-preview__thumb,
.sc-preview__player.is-playing .sc-preview__play {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.sc-preview__player.is-playing iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 24px;
}

/* The bridge back to the offer after the free sample. Deliberately not
   italic like .sc-preview__micro below — that reads as a caveat, and this is
   an invitation. Same measure and centring so the two stack as one column. */
.sc-preview__bridge {
  max-width: var(--measure, 68ch);
  margin: 1.25rem auto 0;
  font-family: var(--sc-font-sans);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.75;
  color: #6E6A66;
}

/* ── Micro-copy objection blaster ── */
.sc-preview__micro {
  max-width: var(--measure, 68ch);
  font-family: var(--sc-font-sans);
  font-size: 0.82rem;
  color: #6E6A66;
  font-style: italic;
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
  letter-spacing: 0.01em;
}


/* ═══════════════════════════════════════════════════
   S5: FOUNDER AUTHORITY — The Guide
   ═══════════════════════════════════════════════════ */
.sc-guide {
  padding: 120px var(--sc-gutter);
  background: #F4F2EE;
}

.sc-guide__grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: 64px;
  align-items: center;
}

/* ── Editorial Portrait ── */
.sc-guide__portrait-wrap {
  position: relative;
}

.sc-guide__portrait {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 200px 200px 16px 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.05);
}

/* ── Authority Copy ── */
.sc-guide__content {
  text-align: left;
}

.sc-guide__content .sc-eyebrow {
  text-align: left;
  margin-bottom: 1.5rem;
}

.sc-guide__quote {
  font-family: var(--sc-font-serif);
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-style: italic;
  font-weight: 400;
  color: #2C302E;
  line-height: 1.35;
  margin: 0 0 2rem;
  padding: 0;
  border: none;
}

.sc-guide__bio {
  margin-bottom: 2rem;
}

.sc-guide__bio p {
  font-family: var(--sc-font-sans);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  color: #595D5B;
  line-height: 1.75;
  margin: 0 0 1rem;
}

.sc-guide__bio p:last-child {
  margin-bottom: 0;
}

/* ── Signature ── */
.sc-guide__signature {
  display: block;
  font-family: var(--sc-font-script);
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  font-weight: 500;
  color: #2C302E;
  margin-top: 2rem;
  line-height: 1;
}

.sc-guide__credentials {
  display: block;
  font-family: var(--sc-font-sans);
  font-size: 0.8rem;
  color: #6A6F6D;
  letter-spacing: 0.5px;
  margin-top: 0.4rem;
}

.sc-guide__link {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--sc-font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: #595D5B;
  text-decoration: none;
  border-bottom: 1px solid rgba(89, 93, 91, 0.3);
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.sc-guide__link:hover {
  color: #2C302E;
  border-color: #2C302E;
}


/* ═══════════════════════════════════════════════════
   S8: THE PROCESS & CLINICAL PROMISE
   ═══════════════════════════════════════════════════ */
.sc-process {
  padding: 100px var(--sc-gutter);
  background: #FCFAF8;
}

.sc-process__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* The 3-step "From enrollment to ease" block was removed 2026-08-05, and
   .sc-process__title / .sc-process__steps / .sc-step* went with it.
   The timeline below is now this section's opening beat. */

/* ── Part B: The Clinical Promise ── */
.sc-timeline {
  /* No longer separating this from the 3-step block above it. */
  margin-top: 0;
  text-align: center;
}

.sc-timeline__title {
  font-family: var(--sc-font-serif);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 500;
  color: #2C302E;
  margin-bottom: 2.5rem;
  line-height: 1.25;
}

.sc-timeline__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: left;
}

.sc-timeline__card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.03);
}

.sc-timeline__phase {
  display: block;
  font-family: var(--sc-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #8C9A8E;
  margin-bottom: 0.75rem;
}

.sc-timeline__card-title {
  font-family: var(--sc-font-serif);
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  font-weight: 500;
  color: #2C302E;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.sc-timeline__card-desc {
  font-family: var(--sc-font-sans);
  font-size: 0.88rem;
  color: #595D5B;
  line-height: 1.65;
}


/* ═══════════════════════════════════════════════════
   S4: SCIENCE
   ═══════════════════════════════════════════════════ */
.sc-science { padding: clamp(5rem, 10vw, 10rem) var(--sc-gutter); background: var(--sc-forest-deep); text-align: center; }
.sc-science__inner { max-width: 1100px; margin: 0 auto; }
.sc-science__title { font-family: var(--sc-font-serif); font-size: clamp(1.5rem, 3vw + 0.5rem, 2.75rem); font-weight: 500; color: var(--sc-cream); margin-bottom: 1rem; }
.sc-science__sub { max-width: 640px; margin: 0 auto 3.5rem; }
.sc-science__pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

/* `1fr` bottoms out at min-content, not at zero: below ~900px the three
   pillars stop shrinking and the third one is pushed outside the viewport,
   where an ancestor clips it and no scrollbar can reach it. Collapse the
   track count instead of relying on the columns to yield. */
@media (max-width: 900px) {
  .sc-science__pillars { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

@media (max-width: 600px) {
  .sc-science__pillars { grid-template-columns: 1fr; gap: 1.25rem; }
}

.sc-pillar {
  background: rgba(44, 48, 46, 0.5);
  border: 1px solid rgba(138, 154, 144, 0.1);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: left;
  transition: border-color var(--sc-duration-med) var(--sc-ease), transform var(--sc-duration-med) var(--sc-ease);
}

.sc-pillar:hover { border-color: rgba(138, 154, 144, 0.25); transform: translateY(-4px); }
.sc-pillar__icon { width: 40px; height: 40px; margin-bottom: 1.5rem; color: var(--sc-sage); }
.sc-pillar__icon svg { width: 100%; height: 100%; }
.sc-pillar__title { font-family: var(--sc-font-serif); font-size: 1.15rem; font-weight: 500; color: var(--sc-cream); margin-bottom: 0.75rem; }
.sc-pillar__body { font-family: var(--sc-font-sans); font-size: 0.9rem; font-weight: 300; line-height: 1.7; color: var(--sc-text-muted); }


/* ═══════════════════════════════════════════════════
   S5: CURRICULUM — Accordion
   ═══════════════════════════════════════════════════ */
.sc-curriculum { padding: clamp(5rem, 10vw, 10rem) var(--sc-gutter); background: var(--sc-charcoal-deep); text-align: center; }
.sc-curriculum__inner { max-width: 760px; margin: 0 auto; }
.sc-curriculum__title { font-family: var(--sc-font-serif); font-size: clamp(1.5rem, 3vw + 0.5rem, 2.75rem); font-weight: 500; color: var(--sc-cream); margin-bottom: 0.75rem; }
.sc-curriculum__sub { margin-bottom: 3rem; }

.sc-acc { border-bottom: 1px solid rgba(138, 154, 144, 0.12); text-align: left; }

.sc-acc button {
  width: 100%; background: none; border: none; color: var(--sc-cream);
  font-family: var(--sc-font-sans); font-size: clamp(0.9rem, 0.8vw + 0.4rem, 1.05rem);
  font-weight: 400; padding: 1.25rem 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  transition: color var(--sc-duration-fast) var(--sc-ease);
}

.sc-acc button:hover { color: var(--sc-sage); }
.sc-acc__icon { font-size: 1.25rem; font-weight: 300; color: var(--sc-sage); transition: transform var(--sc-duration-fast) var(--sc-ease); flex-shrink: 0; }
.sc-acc.is-open .sc-acc__icon { transform: rotate(45deg); }
.sc-acc__body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height var(--sc-duration-med) var(--sc-ease), opacity var(--sc-duration-med) var(--sc-ease); }
.sc-acc__body p { font-family: var(--sc-font-sans); font-size: 0.9rem; font-weight: 300; line-height: 1.7; color: var(--sc-text-muted); padding-bottom: 1.25rem; }
.sc-acc__meta { display: block; font-family: var(--sc-font-sans); font-size: 0.75rem; font-weight: 500; color: var(--sc-sage-muted); letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: 1.25rem; }

.sc-curriculum__boundary {
  margin-top: 2.5rem; padding: 1.5rem 2rem;
  background: rgba(138, 154, 144, 0.06); border: 1px solid rgba(138, 154, 144, 0.1);
  border-radius: 16px; font-family: var(--sc-font-sans); font-size: 0.9rem;
  font-weight: 300; line-height: 1.7; color: var(--sc-text-muted); text-align: center;
}

.sc-curriculum__boundary strong { color: var(--sc-cream); }


/* ═══════════════════════════════════════════════════
   S6: PROMISE
   ═══════════════════════════════════════════════════ */
.sc-promise { padding: clamp(5rem, 10vw, 8rem) var(--sc-gutter); background: #262626; }
.sc-promise__inner { max-width: 1200px; margin: 0 auto; text-align: left; }

.sc-promise__eyebrow {
  display: block;
  font-family: var(--sc-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: #C0AB8E;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.sc-promise__title { font-family: var(--sc-font-serif); font-size: clamp(2rem, 3vw + 1rem, 2.75rem); font-weight: 400; color: #FFFFFF; margin-bottom: 3.5rem; }

.sc-promise__list { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 2rem 3rem; 
  list-style: none; 
  padding: 0; 
  margin: 0 0 5rem 0; 
}

.sc-promise__item {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-family: var(--sc-font-sans); font-size: 0.95rem;
  font-weight: 300; line-height: 1.6; color: #B3B5B4;
}

/* 7 items don't divide evenly into the 3-col/2-col grid below — this one
   spans the full row (works at any column count, no per-breakpoint override
   needed) instead of leaving a short last row. The measure cap matters here
   specifically: at full row width the line would otherwise run past 100
   characters. Same token every other measure-capped element on this page
   already uses. */
.sc-promise__item--full {
  grid-column: 1 / -1;
  max-width: var(--measure, 68ch);
}

.sc-promise__check { flex-shrink: 0; color: #E5E7EB; margin-top: 3px; width: 14px; height: 14px; }
.sc-promise__check svg { width: 100%; height: 100%; stroke-width: 1.5; }

.sc-promise__extras { margin-top: 3rem; }
.sc-promise__extras-title { font-family: var(--sc-font-sans); font-size: 0.75rem; font-weight: 600; color: #C0AB8E; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1.5rem; }
.sc-promise__extras-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.sc-promise__extra { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sc-font-sans); font-size: 0.85rem; font-weight: 300; color: #8A8F8D; }
.sc-promise__extra svg { width: 14px; height: 14px; flex-shrink: 0; color: #878F8C; }
.sc-promise__extra:not(:last-child)::after { content: "·"; margin-left: 0.75rem; color: #6D7371; }

.sc-not-for { margin-top: 5rem; text-align: left; }
.sc-not-for__title { font-family: var(--sc-font-sans); font-size: 0.75rem; font-weight: 600; color: #C0AB8E; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 2rem; }
.sc-not-for__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 4rem; margin-bottom: 2.5rem; }
.sc-not-for__item { display: flex; align-items: flex-start; gap: 0.75rem; font-family: var(--sc-font-sans); font-size: 0.95rem; font-weight: 300; line-height: 1.6; color: #8A8F8D; }
.sc-not-for__item em { color: #B3B5B4; font-style: italic; }
.sc-not-for__x { flex-shrink: 0; width: 12px; height: 12px; margin-top: 4px; color: #6D7371; }
.sc-not-for__x svg { width: 100%; height: 100%; stroke-width: 1.5; }
.sc-not-for__note { font-family: var(--sc-font-sans); font-size: 0.9rem; font-weight: 300; font-style: italic; color: #878F8C; max-width: var(--measure, 68ch); margin-inline: auto; }

@media (max-width: 900px) {
  .sc-promise__list { grid-template-columns: repeat(2, 1fr); }
  .sc-not-for__list { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 600px) {
  .sc-promise__list { grid-template-columns: 1fr; gap: 1.5rem; }
  .sc-promise__extra:not(:last-child)::after { display: none; }
}



/* ═══════════════════════════════════════════════════
   S11: FAQ
   ═══════════════════════════════════════════════════ */
.sc-faq { padding: clamp(5rem, 10vw, 10rem) var(--sc-gutter); background: var(--sc-forest-deep); }
.sc-faq__inner { max-width: 760px; margin: 0 auto; }
.sc-faq__title { font-family: var(--sc-font-serif); font-size: clamp(1.5rem, 3vw + 0.5rem, 2.75rem); font-weight: 500; color: var(--sc-cream); text-align: center; margin-bottom: 3rem; }
.sc-disclaimer { margin-top: 2.5rem; font-family: var(--sc-font-sans); font-size: 0.78rem; font-weight: 300; color: var(--sc-text-subtle-on-dark); text-align: center; line-height: 1.6; max-width: var(--measure, 68ch); margin-inline: auto; }


/* ═══════════════════════════════════════════════════
   RESPONSIVE — Sections
   ═══════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .sc-timeline__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {

  .sc-preview__player { border-radius: 16px; }
  .sc-preview__play { width: 64px; height: 64px; }
  .sc-preview__play svg { width: 52px; height: 52px; }

  .sc-guide { padding: 80px var(--sc-gutter); }
  .sc-guide__grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .sc-guide__portrait { max-width: 320px; margin: 0 auto; border-radius: 160px 160px 16px 16px; }
  .sc-guide__content { text-align: center; }
  .sc-guide__content .sc-eyebrow { text-align: center; }
  .sc-timeline__grid { grid-template-columns: 1fr; }
}

/* Footer disclaimer — removed 2026-08-07.
   This rule restated style.css's .footer__disclaimer verbatim and added one
   thing: opacity 0.5. The disclaimer inherits rgba(42,42,42,0.67) from
   .footer__bottom, so halving it landed the required medical disclaimer near
   0.33 alpha at 12px — legible on 10 pages, a grey whisper on this one.
   The footer is styled in style.css only; see the banner above .footer there. */


/* ── Short viewport (phone in landscape) — see style.css for the full why ──
   The cap goes on .sc-hero__vsl-wrap because that is what carries the
   max-width here; .sc-hero__vsl is width:100% of it and keeps the ratio.
   .sc-preview__player gets the same treatment — a free-sample video taller
   than the screen is the same bug, just further down the page. */
@media (max-height: 480px) and (orientation: landscape) {
  .sc-hero {
    min-height: 0;
    padding-block: clamp(1.5rem, 6svh, 2.5rem) clamp(1rem, 4svh, 1.5rem);
  }

  .sc-hero__vsl-wrap,
  .sc-preview__player {
    width: min(100%, calc(60svh * 16 / 9));
    margin-inline: auto;
  }
}