/* ==================================================================
   PROVEN - single-file build (v2)
   Wide 90% layout · alternating black/white sections stacked as
   overlapping rounded cards · scroll-triggered glass nav · bolder
   display type · color-always niche tiles · squarer coach cards ·
   redesigned square/rounded process steps.
   ================================================================== */

/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
 --color-white: #FFFFFF;
 --color-paper: #F4F8F1;
 --color-card: #E7F0E1;
 --color-card-deep: #D7E7CD;
 --color-ink: #102A20;
 --color-black: #0B2118;
 --color-charcoal: #14332A;
 --color-line: rgba(16, 42, 32, 0.14);
 --color-muted: rgba(16, 42, 32, 0.62);
 --color-faint: rgba(16, 42, 32, 0.42);

  /* Section-card spacing - every section is its own rounded
     card with a visible gap (page background) around it,
     rather than an overlapping stack. Same gap value used
     top and sides, so the inset reads as even on all edges. */
 --section-gap: 1.5rem;
 --radius-section: 32px;

 --color-dark-text: #FFFFFF;
 --color-dark-muted: rgba(255, 255, 255, 0.68);
 --color-dark-line: rgba(255, 255, 255, 0.14);

 --color-verified: #9BAE6A;
 --color-neon: #CBFF3D;
 --color-neon-ink: #102A20;

 /* Light lime accent - pale tint used for badges, chips and secondary
    light surfaces, kept in the same green family as the lime accent */
 --color-sky: #E4F5C8;
 --color-sky-deep: #CDEBA0;

  /* Programme-library / testimonial accents - a single monochrome
     green ramp (light lime -> deep forest) instead of a rainbow of
     unrelated hues, so both sections read as "shades of the brand
     green" rather than a multicolor palette. */
 --accent-1: #CBFF3D; /* bright lime */
 --accent-2: #3F8F5A; /* mid green */
 --accent-3: #2C6B47; /* deep green */
 --accent-4: #163826; /* forest */
 --accent-5: #D7F2C5; /* pale mint */

  /* Glass - white frosted, used only for the floating nav pill */
 --glass-bg: rgba(255, 255, 255, 0.94);
 --glass-bg-strong: #FFFFFF;
 --glass-border: transparent;
 --glass-blur: none;

  /* Type - bold, rounded, friendly display face + a clean body face */
 --font-display: Arial, -apple-system, BlinkMacSystemFont, sans-serif;
 --font-body: 'Helvetica Neue', Helvetica, Arial, -apple-system, BlinkMacSystemFont, sans-serif;

 --fs-hero: clamp(3.5rem, 8.5vw, 8rem);
 --fs-h2: clamp(2rem, 3.2vw + 1rem, 3.5rem);
 --fs-h3: 1.65rem;
 --fs-body: 1.125rem;
 --fs-small: 0.975rem;
 --fs-eyebrow: 0.8rem;

  /* Spacing scale */
 --space-xs: 0.5rem;
 --space-sm: 1rem;
 --space-md: 2.25rem;
 --space-lg: 5rem;
 --space-xl: 7.5rem;
 --card-pad: 2.5rem;

  /* Radius - flat/full-pill language: buttons, nav, chips and badges
     are true pills; cards use big, consistent superellipse-style
     rounding instead of sharp or barely-rounded corners. */
 --radius-pill: 999px;
 --radius-chip: 999px;
 --radius-card: 20px;
 --radius-card-lg: 28px;
 --radius-xl: 40px;

  /* No shadows anywhere - flat design only. These are kept as no-op
     tokens so any lingering reference resolves to a flat surface. */
 --shadow-card: none;
 --shadow-card-dark: none;
 --shadow-nav: none;
 --raised-sm: none;
 --raised-md: none;
 --raised-lg: none;
 --pressed: none;
 --raised-dark-sm: none;
 --raised-dark-md: none;
 --raised-dark-lg: none;
 --pressed-dark: none;
 --raised-neon-sm: none;
 --raised-neon-md: none;
 --pressed-neon: none;

  /* Layout - wide, 90% of viewport, capped on very large screens */
 --max-width: 1600px;
 --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   RESET + BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
 -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-sm);
}

/* Heavier, bolder display type throughout */
h1 { font-size: var(--fs-hero); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p { margin: 0 0 var(--space-sm); font-weight: 500; }

.accent { color: var(--color-faint); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}
.section-dark :focus-visible { outline-color: var(--color-white); }

/* Wide 90%-of-viewport container, capped for ultra-wide screens */
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}

.section { padding: var(--space-xl) 0; }
.section-tight { padding: var(--space-lg) 0; }

/* ============================================
   ALTERNATING SECTION COLOR SYSTEM
   Every section down the page is explicitly
   black or white - contextual overrides below
   make existing components "just work" in
   either context without per-component markup.
   ============================================ */
.section-dark, .section-bright {
  border-radius: var(--radius-section);
}
.section-dark { background: var(--color-black); color: var(--color-dark-text); }
.section-bright { background: var(--color-white); color: var(--color-ink); }

.section-dark h2, .section-dark h3 { color: var(--color-dark-text); }
.section-dark .eyebrow { color: var(--color-dark-muted); }
.section-dark .lede { color: rgba(255, 255, 255, 0.78); }
.section-dark .muted { color: rgba(255, 255, 255, 0.6); }
.section-dark .hero-microcopy { color: rgba(255, 255, 255, 0.6); }

.section-dark .feature-card { background: var(--color-charcoal); border: 1px solid var(--color-dark-line); }
.section-dark .feature-card .icon { background: var(--color-neon); color: var(--color-neon-ink); }

.section-dark .btn-secondary { border-color: rgba(255, 255, 255, 0.55); color: var(--color-dark-text); }
.section-dark .btn-secondary:hover { background: var(--color-white); color: var(--color-ink); }
.section-dark .btn-primary { background: var(--color-white); color: var(--color-ink); }
.section-dark .btn-primary:hover { box-shadow: none; }
.section-dark .carousel-btn { background: var(--color-charcoal); color: var(--color-dark-text); box-shadow: none; }
.section-dark .carousel-btn:hover { box-shadow: none; background: var(--color-charcoal); color: var(--color-dark-text); }
.section-dark .carousel-btn:active { box-shadow: none; background: var(--color-white); color: var(--color-ink); }

.section-dark .faq-item { border-color: var(--color-dark-line); }
.section-dark .faq-question { color: var(--color-dark-text); }
.section-dark .faq-question .plus { border-color: rgba(255,255,255,0.55); color: var(--color-dark-text); }
.section-dark .faq-answer p { color: rgba(255, 255, 255, 0.72); }

.section-dark .stat-bar { border-color: var(--color-dark-line); color: rgba(255, 255, 255, 0.6); }
.section-dark .stat-bar strong, .section-dark .stat-static { color: var(--color-dark-text); }

.section-dark .badge-outline { border-color: rgba(255,255,255,0.55); color: var(--color-dark-text); }
.section-dark .badge-glass { background: rgba(255,255,255,0.12); border-color: var(--color-dark-line); color: var(--color-dark-text); }


.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.section-header { max-width: 820px; margin: 0 0 var(--space-md); }
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-header.center .eyebrow::before { display: none; }

.lede { font-size: 1.375rem; font-weight: 500; line-height: 1.5; color: rgba(16, 42, 32, 0.76); }

.text-center { text-align: center; }
.muted { color: rgba(16, 42, 32, 0.62); font-weight: 500; }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 2.1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--color-ink); color: var(--color-white); box-shadow: none; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: none; }
.btn-primary:active { box-shadow: none; }

.btn-secondary { background: transparent; color: var(--color-ink); border: 1.5px solid var(--color-ink); }
.btn-secondary:hover { transform: translateY(-2px); background: var(--color-ink); color: var(--color-white); box-shadow: none; }

.btn-on-dark { background: var(--color-white); color: var(--color-ink); box-shadow: none; }
.btn-on-dark:hover { transform: translateY(-2px); box-shadow: none; }
.btn-on-dark:active { box-shadow: none; }

.btn-outline-dark { background: transparent; color: var(--color-dark-text); border: 1.5px solid rgba(255,255,255,0.45); }
.btn-outline-dark:hover { border-color: var(--color-dark-text); transform: translateY(-2px); box-shadow: none; }

.btn-neon { background: var(--color-neon); color: var(--color-neon-ink); box-shadow: none; }
.btn-neon:hover { transform: translateY(-2px); box-shadow: none; }
.btn-neon:active { box-shadow: none; }

/* Accent (neon) button - used for the primary "Find My Coach" CTAs */
.btn-accent { background: var(--color-neon); color: var(--color-neon-ink); box-shadow: none; }
.btn-accent:hover { transform: translateY(-2px); box-shadow: none; }
.btn-accent:active { box-shadow: none; }

.btn-glass {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
 -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  color: var(--color-ink);
  box-shadow: none;
}
.btn-glass:hover { transform: translateY(-2px); box-shadow: none; }

.btn-block { width: 100%; }
.btn-sm { padding: 0.7rem 1.5rem; font-size: var(--fs-small); }

.hero-microcopy { display: block; margin-top: var(--space-sm); font-size: var(--fs-small); color: rgba(16, 42, 32,0.6); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* ============================================
   NAV - transparent over the hero, becomes a
   dark frosted glass bar on scroll. Full 90%
   width at all times, like the rest of the page.
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
}

.nav-inner {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 1.5rem 0;
  background: transparent;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  box-shadow: none;
  transition: padding 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), margin-top 0.4s var(--ease);
}

.nav.is-scrolled .nav-inner {
  margin-top: 0.85rem;
  padding: 0.9rem 1.75rem;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px) saturate(160%);
 -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-color: transparent;
  box-shadow: none;
}
.nav.is-scrolled .nav-links a { color: var(--color-ink); }
.nav.is-scrolled .logo span { color: var(--color-muted); }
.nav.is-scrolled .nav-toggle span,
.nav.is-scrolled .nav-toggle span::before,
.nav.is-scrolled .nav-toggle span::after { background: var(--color-ink); }

.nav-cta { padding: 0.8rem 1.85rem; }

/* Force the always-dark pill treatment for pages whose hero/top
   section is a bright/white background (e.g. coach profile pages) -
   the default transparent nav relies on white text sitting over a
   dark hero image, which disappears on a white section. */
.nav-force-dark .nav-inner {
  margin-top: 0.85rem;
  padding: 0.9rem 1.75rem;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-color: transparent;
  box-shadow: none;
}
.nav-force-dark .nav-links a { color: var(--color-ink); }
.nav-force-dark .logo span { color: var(--color-muted); }
.nav-force-dark .nav-toggle span,
.nav-force-dark .nav-toggle span::before,
.nav-force-dark .nav-toggle span::after { background: var(--color-ink); }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0;
  text-decoration: none;
  color: #0A1A13;
}

.logo-mark { width: 22px; height: 22px; flex-shrink: 0; color: #0A1A13; }
.logo span { color: var(--color-muted); }

.nav-links { display: flex; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }

.nav-links a {
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 500;
  color: #FFFFFF;
  opacity: 0.82;
  transition: opacity 0.15s ease;
}
.nav-links a:hover { opacity: 1; }

.nav-actions { display: flex; align-items: center; gap: var(--space-sm); }
.nav-cta { background: var(--color-neon); color: var(--color-neon-ink) !important; box-shadow: none; }
.nav-cta:hover { transform: translateY(-2px); box-shadow: none; }
.nav-cta:active { transform: translateY(0); box-shadow: none; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; width: 34px; height: 34px; padding: 0; position: relative; }

.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  height: 1.5px;
  background: #FFFFFF;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle span { top: 16px; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 5.5rem var(--space-md) var(--space-md);
  background: var(--glass-bg-strong);
  backdrop-filter: none;
 -webkit-backdrop-filter: none;
  position: fixed;
  inset: 0;
  z-index: 190;
}

.mobile-menu.is-open { display: flex; }

.mobile-menu a:not(.btn) { text-decoration: none; color: var(--color-ink); font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; }
.mobile-menu .btn { text-align: center; }

/* ============================================
   HERO - full-bleed photo, content centered,
   oversized upright serif type, nav floats
   directly over the top of the photo
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-dark-text);
  overflow: hidden;
  /* Starts full-bleed (cancels the page wrapper's side inset) with
     square corners; JS (initHeroShrink) animates margin/border-radius
     toward the standard section-card inset as the page scrolls. */
  margin: 0 calc(-1 * var(--section-gap));
  border-radius: 0;
  will-change: margin, border-radius;
}

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.42) 0%, rgba(10,10,10,0.22) 30%, rgba(10,10,10,0.5) 100%);
}

.hero-content { position: relative; z-index: 1; width: 100%; padding: calc(var(--space-xl) + 2rem) 0 var(--space-lg); }
.hero-content .container { max-width: 1100px; margin: 0 auto; }

.hero-content .eyebrow { color: var(--color-dark-muted); justify-content: center; }
.hero-content .eyebrow::before { display: none; }

.hero h1 {
  margin: 0 auto var(--space-sm);
  color: var(--color-dark-text);
  width: 100%;
  max-width: 1000px;
}

.hero .lede { max-width: 620px; margin: 0 auto var(--space-md); color: rgba(255,255,255,0.88); font-size: 1.3rem; font-weight: 500; }

.hero .cta-row { justify-content: center; }

/* floating verification chips */
.chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: var(--space-md) auto 0; max-width: 820px; }

.chip {
  font-size: var(--fs-small);
  font-weight: 500;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: none;
 -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--color-dark-text);
}

/* The default .chip is styled for a dark hero backdrop (translucent
   white pill + white text). On a bright/white section that combination
   is nearly invisible - it was showing up as a big dead gap rather than
   visible tags. Give it real contrast in that context. */
.section-bright .chip {
  background: var(--color-white);
  border-color: transparent;
  color: var(--color-ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.section-dark .chip:not(.hero .chip) {
  background: var(--color-charcoal);
  border-color: var(--color-dark-line);
  box-shadow: none;
}

/* ============================================
   STAT BAR
   ============================================ */
.stat-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-small);
  color: var(--color-muted);
}

.stat-bar.no-rules {
  border: none;
  border-radius: var(--radius-card-lg);
  background: var(--color-neon);
  box-shadow: none;
  padding: var(--space-md) 2.5rem;
  margin: var(--space-sm) 0;
}
.stat-bar.no-rules.stat-bar-left { justify-content: flex-start; flex-wrap: wrap; column-gap: 2.5rem; row-gap: var(--space-sm); }
.stat-bar.no-rules strong, .stat-bar.no-rules .stat-static { color: var(--color-neon-ink) !important; }
.stat-bar.no-rules .stat span { color: rgba(10,10,10,0.68) !important; }
.stat-bar.no-rules.stat-bar-left .stat { text-align: left; min-width: 0; }

/* Full-bleed neon credit strip: the section itself carries the neon
   background edge-to-edge, so the inner bar drops its own background/
   radius/shadow/margin and just centers the stat items. */
.neon-strip {
  background: var(--color-neon);
}
.stat-bar.no-rules.stat-bar-fluid {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  margin: 0;
  padding: var(--space-sm) 0;
}
.stat-bar strong { color: var(--color-ink); font-family: var(--font-display); font-weight: 600; font-size: 1.5em; display: block; }
.stat-static { font-family: var(--font-display); font-weight: 600; font-size: 1.5em; display: block; }
.stat { text-align: center; }

/* Keep all stats on a single row even on narrow screens - shrink
   type and gaps instead of wrapping the 4th item to its own line. */
@media (max-width: 640px) {
  .stat-bar { flex-wrap: nowrap; gap: 0.5rem; justify-content: space-between; }
  .stat { flex: 1 1 0; min-width: 0; }
  .stat-bar strong, .stat-static { font-size: 1.15em; white-space: nowrap; }
  .stat span { font-size: 0.72rem; line-height: 1.25; display: block; }
  /* .stat-bar-left (e.g. the "Free / 5 Days / 15%" and "560+ / 5.0 / 6+"
     rows) uses a much bigger gap for its desktop left-aligned layout.
     That rule has higher specificity than the nowrap rule above, so it
     was winning even on mobile and forcing the whole row - and the
     grid column containing it - wider than the screen. Reset it here
     with equal specificity so it wraps into a tidy 2-3 line layout
     instead of overflowing. */
  .stat-bar.no-rules.stat-bar-left { flex-wrap: wrap; column-gap: 2rem; row-gap: var(--space-sm); justify-content: flex-start; }
  .stat-bar.no-rules.stat-bar-left .stat { flex: 1 1 40%; min-width: 120px; text-align: left; }
  .stat-bar.no-rules { padding: var(--space-sm) 1.5rem; }
  /* Text-only statement sections (no photo) feel cramped with the
     tightened 36px section padding - give them extra room to breathe. */
  #problem { padding: var(--space-lg) 0; }
  #problem .lede { margin-bottom: var(--space-sm); }
}
@media (max-width: 420px) {
  .stat-bar strong, .stat-static { font-size: 0.95em; }
  .stat span { font-size: 0.62rem; }
}

.trust-item { padding: var(--space-md); border-radius: var(--radius-card-lg); }

/* ============================================
   GLASS / CONTENT CARDS
   ============================================ */
.card {
  background: var(--color-card);
  border-radius: var(--radius-card-lg);
  padding: var(--space-md);
  box-shadow: none;
}

.card-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
 -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card-lg);
  padding: var(--space-sm) var(--space-md);
  box-shadow: none;
  color: var(--color-ink);
}

.card-glass .eyebrow { color: var(--color-muted); }
.card-glass .eyebrow::before { background: var(--color-muted); }

/* ============================================
   SIDE PHOTO - a single rounded photo card
   used to pair a section's text with an image
   ============================================ */
.side-photo { position: relative; border-radius: var(--radius-card-lg); overflow: hidden; box-shadow: none; aspect-ratio: 4 / 3.6; }
.side-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================
   GRIDS
   ============================================ */
.grid { display: grid; gap: var(--space-md); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

/* ============================================
   FEATURE CARDS
   ============================================ */
.feature-card { background: var(--color-card); border-radius: var(--radius-card-lg); padding: var(--card-pad); }

.feature-card .icon {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-white);
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
  box-shadow: none;
}
.section-dark .feature-card .icon { box-shadow: none; }

.step-number { font-family: var(--font-display); font-weight: 600; font-size: 2.5rem; color: var(--color-faint); display: block; margin-bottom: var(--space-xs); }

/* ============================================
   PROCESS - big square rounded cards, image
   on top, copy below. Replaces the old tabbed
   interaction with something simpler and bolder.
   ============================================ */
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }

.process-card {
  background: var(--color-ink);
  color: var(--color-dark-text);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  box-shadow: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.process-card:hover { transform: translateY(-8px); box-shadow: none; }

.process-card-media { aspect-ratio: 1 / 1; background-size: cover; background-position: center; }

.process-card-body { padding: var(--card-pad); }
.process-card .step-number { color: var(--color-neon); }
.process-card h3 { color: var(--color-dark-text); }
.process-card p { color: rgba(255,255,255,0.72); margin: 0; }

/* ============================================
   NICHE TILES - always full color; hover only
   raises the card, never desaturates
   ============================================ */
.niche-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  aspect-ratio: 4 / 4.6;
  background-color: var(--color-card);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-white);
  box-shadow: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.niche-card:hover { transform: translateY(-8px); box-shadow: none; }

.niche-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.06) 35%, rgba(10,10,10,0.88) 100%);
}

.niche-card::after {
  content: "↗";
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  backdrop-filter: none;
 -webkit-backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1;
}
.niche-card:hover::after { opacity: 1; transform: translateY(0); }

.niche-card-body { position: relative; z-index: 1; padding: var(--card-pad) 1.6rem 1.6rem; }

.niche-card h3 { margin-bottom: 0.35rem; font-size: 1.3rem; color: var(--color-white); }
.niche-card p { margin: 0; font-size: var(--fs-small); color: rgba(255,255,255,0.82); }

/* Honest status tag on each niche tile: what's actually live today
   versus what's opening soon, so no tile implies a roster that
   doesn't exist yet. */
.niche-card-tag {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 2;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
}
.niche-card-tag.is-live { background: var(--color-neon); color: var(--color-neon-ink); }
.niche-card-tag.is-soon { background: rgba(16, 42, 32,0.5); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--color-white); border: 1px dashed rgba(255,255,255,0.5); }

/* ============================================
   BADGES
   ============================================ */
.badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--fs-small); font-weight: 600; padding: 0.35rem 0.9rem; border-radius: var(--radius-pill); background: var(--color-black); color: var(--color-dark-text); }
.badge-glass { background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); color: var(--color-ink); }
.badge-outline { background: transparent; border: 1.5px solid var(--color-ink); color: var(--color-ink); }
.badge-popular { background: var(--color-ink); color: var(--color-white); }
.badge-soon { background: var(--color-white); color: var(--color-ink); border: 1px dashed var(--color-faint); }
.stars { color: var(--color-verified); letter-spacing: 2px; }

.icon-svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trust-item .icon .icon-svg { width: 18px; height: 18px; }
.coach-card .mark .icon-svg { width: 16px; height: 16px; }

/* ============================================
   COACH DIRECTORY CARDS - squarish photo,
   wider card (3-up grid), always-white card
   so it pops on either a black or white section
   ============================================ */
.coach-card {
  background: var(--color-white);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.coach-card:hover { transform: translateY(-6px); box-shadow: none; }

.coach-card .photo {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  position: relative;
  filter: contrast(1.05);
  transition: filter 0.4s ease;
}
.coach-card:hover .photo { filter: contrast(1.02); }
.coach-card .photo .badge { position: absolute; top: var(--space-xs); left: var(--space-xs); }

.coach-card .mark {
  position: absolute;
  bottom: var(--space-xs);
  right: var(--space-xs);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
 -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.coach-card:hover .mark { opacity: 1; transform: translateY(0); }

.coach-card .body { padding: var(--space-sm) 1.4rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.coach-card h3 { margin-bottom: 0.15rem; font-size: 1.2rem; }
.coach-card .tags { font-size: 0.8rem; color: var(--color-muted); margin-bottom: var(--space-xs); }
.coach-card .meta { font-size: 0.8rem; color: var(--color-muted); margin-top: auto; }
.coach-grid.grid-4 { gap: var(--space-sm); }

.coach-card.coming-soon .photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  color: var(--color-faint);
  font-size: 1.3rem;
  position: relative;
  overflow: hidden;
}
.coach-card.coming-soon .photo::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background: radial-gradient(circle at 30% 20%, currentColor, transparent 60%);
}
.coach-card.coming-soon .photo-icon {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}
.coach-card.coming-soon .photo-icon .icon-svg { width: 28px; height: 28px; color: var(--color-ink); }
.coach-card.coming-soon .photo-label { position: relative; font-size: 0.8rem; color: var(--color-faint); letter-spacing: 0.04em; text-transform: uppercase; }
.coach-card.coming-soon.tint-1 .photo { background: linear-gradient(155deg, var(--color-card) 0%, var(--color-card-deep) 100%); color: var(--accent-2); }
.coach-card.coming-soon.tint-2 .photo { background: linear-gradient(155deg, var(--color-card) 0%, var(--color-card-deep) 100%); color: var(--accent-3); }
.coach-card.coming-soon.tint-3 .photo { background: linear-gradient(155deg, var(--color-card) 0%, var(--color-card-deep) 100%); color: var(--accent-4); }

/* Coach cards are white cards that sit inside a dark (.section-dark)
   section. The global .section-dark .btn-primary override swaps
   primary buttons to a white fill for contrast against the black
   section background - but that makes the button blend into the
   white coach card itself. Force it back to solid black/white here. */
.section-dark .coach-card .btn-primary { background: var(--color-ink); color: var(--color-white); }

/* Booking card sits as a white card inside a dark section - the global
   .section-dark .btn-secondary override (white outline/text) disappears
   against its white background. Force a solid dark-green fill with
   white text instead, regardless of section context. */
.booking-card .btn-secondary { background: var(--color-ink); color: var(--color-white); border-color: var(--color-ink); }
.booking-card .btn-secondary:hover { background: var(--color-charcoal); color: var(--color-white); border-color: var(--color-charcoal); }

/* ============================================
   OVERLAPPING DUO-PHOTO CARD - full color
   ============================================ */
.accountability {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.duo-photo { position: relative; max-width: 420px; aspect-ratio: 4/3.4; margin: 0 auto; }

.duo-photo img {
  position: absolute;
  border-radius: var(--radius-card-lg);
  box-shadow: none;
  object-fit: cover;
}

.duo-photo img.back { top: 0; left: 0; width: 72%; height: 78%; }
.duo-photo img.front {
  bottom: 0;
  right: 0;
  width: 58%;
  height: 55%;
  border: 5px solid var(--color-paper);
}

.featured-photo {
  display: block;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-card-lg);
  box-shadow: none;
  margin: 0 auto;
}

/* Coach hero grid - give the portrait more room than the default
   50/50 accountability split used elsewhere. */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-lg);
  align-items: center;
}

.hero-photo-wrap { position: relative; }

/* The overlay duplicates the name/tagline on top of the photo -
   only shown on mobile, where the image leads and the plain-text
   heading (.hero-desktop-only) is hidden instead. */
.hero-photo-overlay {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card-lg);
  padding: var(--space-md);
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.5rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.85) 100%);
  color: var(--color-white);
}
.hero-photo-overlay h1 { color: var(--color-white); font-size: clamp(2rem, 9vw, 2.6rem); margin: 0; }
.hero-photo-overlay-tagline { color: rgba(255,255,255,0.85); font-weight: 500; margin: 0; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .hero-grid .featured-photo { max-width: none; aspect-ratio: 4 / 4.6; }

  /* Image (with overlaid name) leads, text column follows */
  .hero-photo-wrap { order: -1; }
  .hero-photo-overlay { display: flex; }
  .hero-desktop-only { display: none; }

  /* Reorder what follows the photo: buttons, then bio description,
     then chips, then the star rating line. */
  .hero-text { display: flex; flex-direction: column; }
  .hero-order-buttons { order: 1; }
  .hero-order-bio { order: 2; }
  .hero-order-chips { order: 3; }
  .hero-order-stars { order: 4; }
}

.hero-bio {
  margin: var(--space-sm) 0 var(--space-md);
  max-width: 560px;
  color: var(--color-muted);
  line-height: 1.6;
}

/* ============================================
   CAROUSEL
   ============================================ */
.carousel-wrap { position: relative; }
.carousel { display: flex; align-items: stretch; gap: var(--space-sm); overflow-x: auto; scroll-snap-type: x mandatory; padding: 2rem 10px 4rem; margin: 0 -10px -1.75rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; flex: 0 0 auto; width: min(88vw, 380px); }

.carousel-nav { display: flex; gap: 0.6rem; justify-content: flex-end; margin-bottom: var(--space-xs); }
.carousel-btn { width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--color-card); color: var(--color-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: none; transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease; }
.carousel-btn:hover { transform: translateY(-2px); box-shadow: none; }
.carousel-btn:active { transform: translateY(0); box-shadow: none; background: var(--color-ink); color: var(--color-white); }

/* ============================================
   PROGRAMME CARDS - subtler, dark-appropriate
   shadow (this section now sits on black)
   ============================================ */
.programme-card {
  background: var(--color-white);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.programme-card:hover { transform: translateY(-6px); box-shadow: none; }

.programme-card-media {
  height: 190px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.programme-card-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--accent, var(--color-neon)); }

.programme-card-body { padding: var(--card-pad); display: flex; flex-direction: column; flex: 1; gap: 0.2rem; }
.programme-card .step-number { font-size: 1.6rem; margin-bottom: 0.25rem; }
.programme-card .label { font-size: var(--fs-small); font-weight: 700; color: var(--color-ink); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.15rem; }
.programme-card .label::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--color-neon)); margin-right: 0.4rem; }
.programme-card h3 { margin-bottom: 0.35rem; color: var(--color-ink); }
.programme-card p { font-size: var(--fs-small); color: rgba(16,42,32,0.7); }
.programme-card .price-meta { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-ink); margin-top: auto; }

/* ============================================
   TESTIMONIAL CARD
   ============================================ */
.testimonial-card { background: var(--color-card); border-radius: var(--radius-card-lg); padding: var(--card-pad); height: 100%; min-height: 340px; display: flex; flex-direction: column; box-shadow: none; }
.testimonial-card .result-tag { font-weight: 700; color: var(--color-ink); margin-bottom: var(--space-xs); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; }
.testimonial-card .quote { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; line-height: 1.45; flex: 1; }
.testimonial-card .meta { display: flex; align-items: center; gap: 0.6rem; margin-top: var(--space-sm); font-size: var(--fs-small); color: var(--color-muted); }

.avatar-initial { width: 40px; height: 40px; border-radius: 50%; background: var(--color-ink); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-weight: 600; font-family: var(--font-display); flex-shrink: 0; border: 2px solid rgba(255,255,255,0.4); }

/* Neon testimonial variants */
.testimonial-card.neon-lime   { background: var(--accent-1); color: var(--color-ink); box-shadow: none; }
.testimonial-card.neon-blue   { background: var(--accent-2); color: var(--color-white); box-shadow: none; }
.testimonial-card.neon-coral  { background: var(--accent-3); color: var(--color-white); box-shadow: none; }
.testimonial-card.neon-violet { background: var(--accent-4); color: var(--color-white); box-shadow: none; }
.testimonial-card.neon-amber  { background: var(--accent-5); color: var(--color-ink); box-shadow: none; }

.testimonial-card.neon-lime .result-tag,
.testimonial-card.neon-amber .result-tag { color: var(--color-ink); }
.testimonial-card.neon-blue .result-tag,
.testimonial-card.neon-coral .result-tag,
.testimonial-card.neon-violet .result-tag { color: var(--color-white); }

.testimonial-card.neon-lime .meta,
.testimonial-card.neon-amber .meta { color: rgba(16, 42, 32,0.65); }
.testimonial-card.neon-blue .meta,
.testimonial-card.neon-coral .meta,
.testimonial-card.neon-violet .meta { color: rgba(255,255,255,0.8); }

.testimonial-card.neon-lime .avatar-initial,
.testimonial-card.neon-amber .avatar-initial { background: var(--color-ink); color: var(--color-white); }
.testimonial-card.neon-blue .avatar-initial,
.testimonial-card.neon-coral .avatar-initial,
.testimonial-card.neon-violet .avatar-initial { background: var(--color-ink); color: var(--color-white); }

/* ============================================
   TRUST GRID
   ============================================ */
.trust-item h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.trust-item p { font-size: var(--fs-small); color: rgba(255,255,255,0.68); margin: 0; }
.trust-item .icon { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--color-neon); color: var(--color-neon-ink); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: var(--space-sm); box-shadow: none; }

/* ============================================
   SECTION TRANSITIONS - every section overlaps
   the previous with rounded top corners, like a
   card sliding up over it. Reinforces the strict
   black/white alternation with a consistent,
   premium "stacked cards" rhythm.
   ============================================ */
.stack-top {
  position: relative;
  z-index: 2;
  margin-top: var(--section-gap);
  border-radius: var(--radius-section);
  overflow: hidden;
  box-shadow: none;
}

/* ============================================
   STATEMENT SECTION - supports both a dark and
   a light (white) variant for the alternation
   ============================================ */
.statement-section { padding: var(--space-xl) 0; text-align: center; }
.statement-section.is-dark { background: var(--color-black); color: var(--color-dark-text); }
.statement-section.is-dark h2 { color: var(--color-dark-text); }
.statement-section.is-light { background: var(--color-white); color: var(--color-ink); }
.statement-section.is-light h2 { color: var(--color-ink); }
.statement-section h2 { font-weight: 700; max-width: 900px; margin: 0 auto var(--space-md); }

/* ============================================
   FAQ
   ============================================ */
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-question { width: 100%; background: none; border: none; text-align: left; padding: var(--space-sm) 0; font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--color-ink); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.faq-question .plus { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: var(--color-card); box-shadow: none; font-size: 1rem; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.faq-item.is-open .faq-question .plus { transform: rotate(45deg); box-shadow: none; }
.section-dark .faq-question .plus { background: var(--color-charcoal); box-shadow: none; }
.section-dark .faq-item.is-open .faq-question .plus { box-shadow: none; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
.faq-answer p { padding-bottom: var(--space-sm); color: rgba(16, 42, 32,0.72); max-width: 640px; }

/* ============================================
   WAITLIST
   ============================================ */
.waitlist { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.waitlist form { display: flex; gap: 0.6rem; flex: 1; min-width: 260px; flex-wrap: wrap; }
.waitlist input { flex: 1; min-width: 200px; padding: 0.9rem 1.3rem; border-radius: var(--radius-pill); border: 1.5px solid var(--color-dark-line); background: transparent; color: var(--color-dark-text); font-family: var(--font-body); font-size: var(--fs-body); }
.waitlist input::placeholder { color: rgba(255,255,255,0.45); }
.waitlist input:focus-visible { outline-offset: 0; }
.form-note { font-size: var(--fs-small); color: rgba(255,255,255,0.6); width: 100%; margin-top: 0.4rem; }

/* ============================================
   FOOTER - repeats the hero's oversized
   statement over a full-bleed photo, then
   drops into the link columns
   ============================================ */
.footer-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-dark-text);
  overflow: hidden;
}

.footer-hero .hero-media img { filter: grayscale(1) contrast(1.05); }

.footer-hero-content { position: relative; z-index: 1; width: 100%; padding: var(--space-xl) 0 var(--space-lg); }
.footer-hero h2 { font-weight: 600; color: var(--color-dark-text); max-width: 900px; margin-bottom: var(--space-md); }

.footer {
  position: relative;
  background: var(--color-black);
  color: var(--color-dark-text);
  padding: var(--space-xl) 0 var(--space-md);
}

.footer a { color: var(--color-dark-text); opacity: 0.72; text-decoration: none; font-size: var(--fs-small); }
.footer a:hover { opacity: 1; }

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-md); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-dark-line); }

.footer-logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin-bottom: var(--space-xs); }
.footer-logo span { color: var(--color-dark-muted); }
.footer p.tagline { opacity: 0.62; font-size: var(--fs-small); max-width: 320px; }
.footer h4 { font-family: var(--font-body); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.5; margin-bottom: var(--space-sm); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-social { display: flex; gap: 0.75rem; margin-top: var(--space-sm); }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--color-charcoal); box-shadow: none; display: flex; align-items: center; justify-content: center; font-size: var(--fs-small); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.footer-social a:hover { transform: translateY(-2px); box-shadow: none; }
.footer-social a:active { transform: translateY(0); box-shadow: none; }

.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: space-between; align-items: center; padding-top: var(--space-md); font-size: var(--fs-small); opacity: 0.55; }
.footer-bottom .legal-links { display: flex; gap: var(--space-sm); }

/* ============================================
   HEAVY SCROLL + BLEND-MODE CURSOR
   ============================================ */
#scroll-container { width: 100%; box-sizing: border-box; padding: 0 var(--section-gap) var(--section-gap); }
html.heavy-scroll-active #scroll-container {
  position: fixed;
  top: 0;
  left: 0;
  will-change: transform;
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease, width 0.2s ease, height 0.2s ease, margin 0.2s ease;
}
.cursor-dot.is-visible { opacity: 1; }
.cursor-dot.is-active { width: 46px; height: 46px; margin: -23px 0 0 -23px; }

@media (pointer: coarse) {
  .cursor-dot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-dot { display: none; }
}


.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================
   COACH PROFILE PAGE - shared components
   ============================================ */

/* Breadcrumb row, sits at the top of the Coach Hero section */
/* Clear the fixed nav pill: on coach pages the hero is the very first
   thing in the flow, so it needs extra top padding beyond the default
   .section padding or the breadcrumb sits underneath the nav bar. */
#top > .section-bright:first-child { padding-top: calc(var(--space-xl) + 20px); }
@media (max-width: 640px) {
  #top > .section-bright:first-child { padding-top: calc(var(--space-lg) + 70px); }
}

.breadcrumb { display: flex; align-items: center; gap: 0.45rem; font-size: var(--fs-small); color: var(--color-muted); flex-wrap: wrap; margin-bottom: var(--space-md); }
.breadcrumb a { color: var(--color-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-ink); }
.breadcrumb .sep { color: var(--color-faint); }
.breadcrumb .current { color: var(--color-ink); font-weight: 600; }

/* Video intro block */
.video-block { position: relative; border-radius: var(--radius-card-lg); overflow: hidden; aspect-ratio: 16/10; background-size: cover; background-position: center; box-shadow: none; }
.video-block .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: var(--color-neon); color: var(--color-neon-ink); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: none; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.video-block:hover .play-btn { transform: translate(-50%, -50%) scale(1.08); }
.video-block .play-btn:active { box-shadow: none; }
.video-block .video-tag { position: absolute; bottom: var(--space-sm); left: var(--space-sm); background: rgba(16, 42, 32,0.7); color: #fff; font-size: var(--fs-small); font-weight: 600; padding: 0.35rem 0.85rem; border-radius: var(--radius-pill); }

/* Offer cards (1:1 coaching formats) - white cards on dark section */
.offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); align-items: stretch; }
.offer-card {
  position: relative;
  background: var(--color-white);
  color: var(--color-ink);
  border-radius: var(--radius-card-lg);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.offer-card:hover { transform: translateY(-6px); box-shadow: none; }
.offer-card.is-popular { outline: 2px solid var(--color-neon); }
.offer-card .badge-popular { position: absolute; top: -14px; right: var(--space-sm); }
.offer-card .offer-format { font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); margin-bottom: 0.15rem; }
.offer-card h3 { font-size: 1.3rem; margin-bottom: 0.35rem; }
.offer-card .offer-desc { font-size: var(--fs-small); color: var(--color-muted); margin-bottom: var(--space-sm); }
.offer-card ul { list-style: none; padding: 0; margin: 0 0 var(--space-sm); display: flex; flex-direction: column; gap: 0.5rem; }
.offer-card ul li { font-size: var(--fs-small); padding-left: 1.4rem; position: relative; line-height: 1.4; }
.offer-card ul li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 9px; height: 9px; border-radius: 50%; background: var(--color-neon); }
.offer-card .offer-line { font-size: var(--fs-small); font-weight: 600; margin-bottom: var(--space-sm); flex: 1; }
.offer-card .offer-price { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; margin-bottom: var(--space-sm); }
.offer-card .offer-price small { font-family: var(--font-body); font-weight: 500; font-size: 0.55em; color: var(--color-muted); }

/* Transformation gallery cards */
.transformation-card { background: var(--color-white); border-radius: var(--radius-card-lg); overflow: hidden; box-shadow: none; height: 100%; display: flex; flex-direction: column; }
.transformation-card-media { height: 220px; background-size: cover; background-position: center; position: relative; }
.transformation-card-media .result-tag { position: absolute; bottom: var(--space-xs); left: var(--space-xs); background: var(--color-neon); color: var(--color-neon-ink); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.35rem 0.8rem; border-radius: var(--radius-pill); }
.transformation-card-body { padding: var(--card-pad); display: flex; flex-direction: column; flex: 1; }
.transformation-card-body .quote { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; line-height: 1.45; flex: 1; color: var(--color-ink); }
.transformation-card-body .meta { margin-top: var(--space-sm); font-size: var(--fs-small); color: var(--color-muted); font-weight: 600; }

/* Booking / available slots card */
.booking-card { background: var(--color-white); color: var(--color-ink); border-radius: var(--radius-card-lg); padding: var(--card-pad); box-shadow: none; }
.booking-card h4 { margin-bottom: 0.1rem; }
.booking-card .booking-sub { font-size: var(--fs-small); color: var(--color-muted); margin-bottom: var(--space-sm); }
.slot-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: var(--space-sm); }
.slot-item { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border: 1px solid var(--color-line); border-radius: var(--radius-card); font-size: var(--fs-small); font-weight: 600; }
.slot-item .slot-status { font-size: 0.78rem; font-weight: 700; padding: 0.2rem 0.65rem; border-radius: var(--radius-pill); background: rgba(245,130,31,0.28); color: var(--color-ink); }
.slot-item .slot-status.is-limited { background: rgba(255,111,145,0.25); }

/* Credential mini-stat row inside the About section */
.credential-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-sm) 0 var(--space-md); }
.credential-row .credential-pill {
  background: var(--color-card);
  color: var(--color-ink) !important;
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.1rem;
  font-size: var(--fs-small);
  font-weight: 600;
  box-shadow: none;
}
.credential-row .credential-pill span { display: block; font-size: 0.72rem; font-weight: 500; color: var(--color-muted) !important; text-transform: uppercase; letter-spacing: 0.04em; }


@media (min-width: 768px) { .carousel > * { width: 400px; } }

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
  .offer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .accountability { grid-template-columns: 1fr; gap: var(--space-md); }
  .accountability .duo-photo, .accountability .side-photo { order: -1; }
  .process-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .container { width: 92%; }
  .nav-links, .nav-actions .btn-secondary { display: none; }
  .nav-toggle { display: block; }
  .nav-inner { padding: 1.1rem 0; gap: 0.6rem; }
  .nav.is-scrolled .nav-inner { padding: 0.75rem 1.25rem; }
  .nav-cta { padding: 0.75rem 1.2rem; font-size: 0.85rem; }
  .logo { font-size: 1.05rem; }
  .hero-order-buttons.cta-row .btn { width: 100%; }
  /* Site-wide: a lone CTA (no sibling button to sit beside) reads
     better as a full-width tap target on mobile. Applied explicitly
     via .btn-block-mobile to standalone buttons, and generically to
     any .cta-row that only ever contains one button. */
  .btn-block-mobile { width: 100%; text-align: center; }
  .cta-row > .btn:only-child { width: 100%; text-align: center; }
  /* Cards stack fully on top of each other on mobile - no side-by-side columns */
  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
  .offer-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section, .section-tight { padding: var(--space-md) 0; }
  .stack-top { margin-top: 1rem; border-radius: 22px; }
  #scroll-container { padding: 0 1rem 1rem; }
  h1 { font-size: clamp(2.5rem, 12vw, 3.5rem); }
  /* The lifestyle photo reorders above the text on mobile (see the
     900px breakpoint below) - give it less top padding to sit closer
     to the section above, and make it noticeably taller so it reads
     as a real visual moment instead of a short, squashed strip. */
  .about-story { padding-top: var(--space-sm); }
  .accountability .side-photo { aspect-ratio: 4 / 5; margin-bottom: var(--space-sm); }
  .hero-grid { gap: var(--space-sm); }
  .accountability { gap: var(--space-sm); }
}

@media (max-width: 480px) {
  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
}

/* Reduced motion respected */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after,
  .niche-card, .coach-card, .coach-card .photo, .coach-card .mark, .process-card, .faq-answer { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==================================================================
   EMBOSSED / RAISED DESIGN SYSTEM
   A subtle "pressed metal" language - soft raised highlight on top,
   deeper shadow below, neon glow accents on dark surfaces. Applied
   across cards, pills and buttons site-wide for a consistent,
   slightly tactile feel instead of flat fills.
   ================================================================== */
:root {
  --emboss-light: none;
  --emboss-dark: none;
  --emboss-neon-glow: none;
  --emboss-light-pressed: none;
  --emboss-dark-pressed: none;
}

.feature-card {
  box-shadow: none;
  border: 1px solid rgba(16, 42, 32,0.05);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.feature-card:hover { transform: translateY(-4px); }
.section-dark .feature-card { box-shadow: none; }

.trust-item { background: rgba(255,255,255,0.03); box-shadow: none; border: 1px solid var(--color-dark-line); }

.offer-card { box-shadow: none; }
.offer-card.is-popular { box-shadow: none; }

.booking-card { box-shadow: none; }

/* Extend the same embossed language to every other card/pill/input
   surface on the site, so the "raised" treatment is consistent
   end-to-end rather than limited to a handful of components. */
.testimonial-card:not([class*="neon-"]) { box-shadow: none; }
.side-photo, .duo-photo img.front, .video-block, .transformation-card { box-shadow: none; }
.coach-card, .niche-card, .process-card { box-shadow: none; }
.card-glass { box-shadow: none; }
.faq-item { border-radius: var(--radius-card-lg); padding: 0 var(--space-sm); margin-bottom: 0.6rem; border-bottom: none; background: var(--color-white); box-shadow: none; }
.section-dark .faq-item { background: var(--color-charcoal); box-shadow: none; border: 1px solid var(--color-dark-line); }
.waitlist input { box-shadow: none; border-color: transparent; }
.waitlist .btn-neon { box-shadow: none; }
.slot-item { box-shadow: none; border: none; }
.expertise-card { box-shadow: none; }

/* ==================================================================
   EXPERTISE - SPLIT PANEL CARDS
   Light text panel + dark accent panel, alternating neon accent
   per card. Mirrors the "How Precision" reference layout: a plain
   info half next to a raised dark half with a glowing ring motif.
   ================================================================== */
.expertise-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }

.expertise-card {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  background: var(--color-card);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  box-shadow: none;
}

.expertise-card-body { padding: var(--card-pad); }
.expertise-card-body h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.expertise-card-body p { margin-bottom: 0.85rem; }
.expertise-fit { font-size: var(--fs-small); font-weight: 600; color: var(--color-ink); }

.expertise-card-panel {
  position: relative;
  background: var(--color-ink);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: var(--space-md);
  box-shadow: none;
}
.expertise-card-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 38%, var(--accent, var(--color-neon)) 0%, transparent 68%);
  opacity: 0.18;
  pointer-events: none;
}

.icon-ring {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px dashed var(--accent, var(--color-neon));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, var(--color-neon));
}
.icon-ring .icon-svg { width: 26px; height: 26px; }

.chip-neon {
  background: var(--accent, var(--color-neon));
  color: var(--color-neon-ink);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  text-align: center;
}

@media (max-width: 900px) {
  .expertise-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .expertise-card { grid-template-columns: 1fr; }
  .expertise-card-panel { flex-direction: row; justify-content: flex-start; padding: var(--space-sm) var(--card-pad); }
}

/* ==================================================================
   TESTIMONIAL SCREENSHOT GALLERY - true masonry.
   Uses CSS multi-column layout so images of any size (portrait,
   landscape, tall chat screenshots) pack edge-to-edge with no
   leftover gaps, each shown at full width and its own natural
   height (never stretched or cropped).
   ================================================================== */
.gallery-grid {
  column-count: 5;
  column-gap: 6px;
}

.gallery-slot {
  position: relative;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 6px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-card);
  border: 1.5px dashed var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
}
.section-dark .gallery-slot { background: var(--color-charcoal); border-color: var(--color-dark-line); }

.gallery-slot img {
  display: block;
  width: 100%;
  height: auto;
}
.gallery-slot:has(img) { border-style: solid; border-color: transparent; padding: 0; }

.gallery-slot-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-faint);
  text-align: center;
  padding: 1.4rem 0.5rem;
}
.section-dark .gallery-slot-label { color: rgba(255,255,255,0.35); }

@media (max-width: 900px) {
  .gallery-grid { column-count: 3; }
}
@media (max-width: 560px) {
  .gallery-grid { column-count: 2; column-gap: 4px; }
  .gallery-slot { margin-bottom: 4px; }
}

/* ==================================================================
   BOOKING CARD - circular coach avatar (replaces the time-slot list
   for a simpler single-CTA booking card)
   ================================================================== */
.booking-avatar-wrap { display: flex; justify-content: center; margin-bottom: var(--space-sm); }
.booking-avatar {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: none;
  border: 3px solid var(--color-white);
}
.booking-card { text-align: center; }
.booking-card .btn-block { margin-top: var(--space-sm); }

/* ==================================================================
   COURSE / PRODUCT LANDING PAGE - shared components
   (used by course pages e.g. Active Start, Strength Foundation...)
   ================================================================== */

/* Course tag - "Course 1 of 5 · Complete Beginner · 4 Weeks" */
.course-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}
.course-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-neon); flex-shrink: 0; }

/* Feature check row under the hero H1 */
.feature-check-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin: var(--space-sm) 0; }
.feature-check-row span { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-small); font-weight: 600; }
.feature-check-row span::before { content: "✓"; color: var(--color-ink); background: var(--color-neon); width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.65rem; flex-shrink: 0; }

/* Price block - strike-through + new price + savings, used in hero
   and in the pricing card */
.price-block { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin: var(--space-sm) 0 0.35rem; }
.price-block .price-old { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--color-faint); text-decoration: line-through; }
.price-block .price-new { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; color: var(--color-ink); }
.price-block .price-save { font-size: var(--fs-small); font-weight: 700; background: var(--color-neon); color: var(--color-neon-ink); padding: 0.25rem 0.7rem; border-radius: var(--radius-pill); }
.section-dark .price-block .price-new { color: var(--color-dark-text); }
.price-perday { font-size: var(--fs-small); color: var(--color-muted); margin-bottom: var(--space-sm); }

/* Countdown timer */
.countdown-label { font-size: var(--fs-small); font-weight: 700; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.4rem; }
.countdown { display: flex; gap: 0.6rem; margin-bottom: var(--space-sm); }
.countdown .cd-unit { background: var(--color-ink); color: var(--color-white); border-radius: var(--radius-chip); padding: 0.5rem 0.2rem; width: 62px; text-align: center; }
.section-dark .countdown .cd-unit { background: var(--color-white); color: var(--color-ink); }
.countdown .cd-unit strong { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.countdown .cd-unit span { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }

/* Week track - 4/5-step visual under the hero image */
.week-track { display: flex; gap: 0.6rem; margin-top: var(--space-sm); }
.week-step { flex: 1; background: var(--color-white); border-radius: var(--radius-card); padding: 0.75rem 0.6rem; box-shadow: none; text-align: center; }
.week-step .wk { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--color-muted); margin-bottom: 0.2rem; }
.week-step .wk-label { display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 0.1rem; }
.week-step .wk-sub { display: block; font-size: 0.72rem; color: var(--color-muted); }
@media (max-width: 640px) { .week-track { flex-wrap: wrap; } .week-step { min-width: calc(50% - 0.3rem); } }

/* "Is this for you" fit checklist - two column, yes/no */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.fit-col { background: var(--color-white); border-radius: var(--radius-card-lg); padding: var(--card-pad); box-shadow: none; }
.fit-col h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: var(--space-sm); }
.fit-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.fit-col li { position: relative; padding-left: 1.6rem; font-size: var(--fs-small); line-height: 1.5; }
.fit-yes li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--color-neon-ink); background: var(--color-neon); width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; }
.fit-no { opacity: 0.85; }
.fit-no li::before { content: "✕"; position: absolute; left: 0; top: 0; color: var(--color-muted); border: 1.5px solid var(--color-line); width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; }
@media (max-width: 900px) { .fit-grid { grid-template-columns: 1fr; } }

/* Price comparison table */
.price-table { width: 100%; border-collapse: collapse; margin: var(--space-sm) 0; }
.price-table td { padding: 0.75rem 0; border-bottom: 1px solid var(--color-line); font-size: var(--fs-small); }
.price-table td:last-child { text-align: right; font-weight: 700; font-family: var(--font-display); }
.price-table tr.highlight td { color: var(--color-ink); font-weight: 700; }
.section-dark .price-table td { border-color: var(--color-dark-line); }

/* Guarantee strip */
.guarantee-strip { display: flex; align-items: center; gap: 0.85rem; background: var(--color-card); border-radius: var(--radius-card-lg); padding: 1.1rem 1.4rem; margin: var(--space-sm) 0; }
.section-dark .guarantee-strip { background: var(--color-charcoal); }
.guarantee-strip .icon-ring { flex-shrink: 0; width: 44px; height: 44px; }
.guarantee-strip p { margin: 0; font-size: var(--fs-small); font-weight: 600; }

/* Bundle upsell banner */
.bundle-banner { background: var(--color-ink); color: var(--color-white); border-radius: var(--radius-card-lg); padding: var(--card-pad); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.bundle-banner h3 { color: var(--color-white); margin-bottom: 0.3rem; }
.bundle-banner p { color: rgba(255,255,255,0.72); margin-bottom: 0; max-width: 520px; }
.bundle-banner .bundle-price { text-align: right; flex-shrink: 0; }
.bundle-banner .bundle-price .old { text-decoration: line-through; color: rgba(255,255,255,0.5); font-size: 0.95rem; margin-right: 0.4rem; }
.bundle-banner .bundle-price .new { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; }
.bundle-banner .bundle-price .save { display: block; font-size: 0.75rem; color: var(--color-neon); font-weight: 700; }

/* Related-course picker grid (bottom of page) */
.course-pick-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-sm); }
.course-pick { background: var(--color-paper); border-radius: var(--radius-card-lg); padding: 1.4rem; box-shadow: none; position: relative; height: 100%; display: flex; flex-direction: column; transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease); }
.course-pick:hover { transform: translateY(-3px); box-shadow: none; }
.course-pick.is-current { outline: none; box-shadow: none; border: 2px solid var(--color-ink); background: var(--color-paper); }
.course-pick.is-current:hover { transform: none; box-shadow: none; }
.course-pick .pin { position: absolute; top: -12px; left: 1.2rem; background: var(--color-neon); color: var(--color-neon-ink); font-size: 0.68rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); }
.course-pick .level { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); margin-bottom: 0.3rem; }
.course-pick h4 { font-size: 1.05rem; margin-bottom: 0.3rem; color: var(--color-ink); }
.course-pick p { font-size: 0.85rem; color: var(--color-muted); flex: 1; margin-bottom: 0.6rem; }
.course-pick .foot { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 0.95rem; color: var(--color-ink); }
@media (max-width: 1100px) { .course-pick-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .course-pick-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .course-pick-grid { grid-template-columns: 1fr; } }

/* Sticky mobile CTA bar - always-visible bottom bar on small screens,
   the single highest-leverage conversion lever on a long course page */
.sticky-mobile-cta { display: none; }
@media (max-width: 900px) {
  .sticky-mobile-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--glass-border);
    padding: 0.7rem 1rem; padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
    box-shadow: none;
  }
  .sticky-mobile-cta .smc-price { line-height: 1.15; }
  .sticky-mobile-cta .smc-price strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
  .sticky-mobile-cta .smc-price span { display: block; font-size: 0.68rem; color: var(--color-muted); text-decoration: line-through; }
  .sticky-mobile-cta .btn { padding: 0.75rem 1.3rem; font-size: 0.9rem; white-space: nowrap; }
  body { padding-bottom: 66px; }
}