/* =============================================================
   CRINK — EDITORIAL DESIGN SYSTEM
   Inspired by the Crink presentation deck:
   Instrument Serif + Inter, paper background, hairline editorial.
   ============================================================= */

:root {
  /* Editorial palette */
  --ink: #0A0A12;
  --ink-2: #2A2A38;
  --muted: #6B6B7B;
  --line: #E8E6F0;
  --line-soft: #F1EFF7;
  --paper: #FAF8F3;
  --paper-2: #F4F1E9;
  --primary: #5B4BDB;
  --primary-2: #8B5CF6;
  --primary-3: #A78BFA;
  --primary-soft: rgba(91, 75, 219, 0.08);
  /* Warm hairline for the booking option surfaces (brown/clay family). */
  --line-warm: #E4DBCF;
  --primary-softer: rgba(91, 75, 219, 0.04);

  /* Aliases for legacy class names so the cascade keeps working */
  --cream: var(--paper);
  --sage: var(--line-soft);
  --warm-white: var(--paper);
  --mauve: var(--primary);
  --mauve-light: var(--primary-soft);
  --sage-green: var(--primary-2);
  --sage-light: rgba(139, 92, 246, 0.10);
  --text: var(--ink);
  --particle: rgba(91, 75, 219, 0.35);

  /* Functional */
  --ok: #1B6F3A;
  --err: #B42318;
  --shadow-sm: 0 1px 2px rgba(10, 10, 18, 0.04);
  --shadow-md: 0 4px 16px rgba(10, 10, 18, 0.06);
  --shadow-lg: 0 16px 40px rgba(10, 10, 18, 0.08);
  --shadow-xl: 0 28px 60px rgba(10, 10, 18, 0.12);

  /* Typography */
  --serif: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --script: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --quote: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radii — flatter, more editorial */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Longer tail than --ease so the entrance blur resolves gently. */
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --max-w: 1280px;
}

/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

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

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: inherit;
  letter-spacing: -0.01em;
}

[hidden] {
  display: none !important;
}

em {
  font-style: italic;
}

/* Italic serif emphasis — the signature editorial move */
h1 em,
h2 em,
h3 em,
h4 em,
.panel-title em,
.section-heading em,
.therapist-heading em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--primary);
  font-weight: 400;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  z-index: 9999;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 16px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* No more dot-grid — pure paper */
.process-story,
.faq-story {
  position: relative;
  overflow: hidden;
}

/* REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  transition:
    opacity 0.8s var(--ease-entrance),
    transform 0.8s var(--ease-entrance),
    filter 0.8s var(--ease-entrance);
}

.reveal.visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.text-center {
  text-align: center;
}

/* =============================================================
   NAV — minimal editorial bar
   ============================================================= */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--paper) 70%, transparent);
}

#nav {
  pointer-events: auto;
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: var(--max-w);
  height: 64px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 38px;
  width: auto;
}

.nav-cluster {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-links {
  display: none;
  gap: 28px;
}

.nav-links a {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  font-style: italic;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--primary);
}

.nav-reassurance {
  display: none;
}

.nav-book-link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  transition: background 0.2s, transform 0.2s;
  white-space: nowrap;
}

.nav-book-link:hover {
  background: #3f37c9;
  transform: translateY(-1px);
}

@media (min-width: 768px) {
  .nav-book-link {
    height: 40px;
    padding: 0 20px;
  }
}

@media (min-width: 768px) {
  #nav {
    height: 76px;
    padding: 0 32px;
  }

  .logo img {
    height: 48px;
  }

  .nav-links {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .nav-reassurance {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--muted);
    white-space: nowrap;
  }
}

/* =============================================================
   HERO — editorial, lots of negative space
   ============================================================= */
.hero {
  position: relative;
  padding: 32px 20px 0;
  background: var(--paper);
  overflow: hidden;
}

.hero-container {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
  min-width: 0;
}

h1.hero-h1 {
  will-change: filter, transform, opacity;
  font-family: var(--serif);
  font-size: clamp(32px, 6.5vw, 64px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0;
  animation: blurRise 1.15s var(--ease-entrance) 0.12s forwards;
}

h1.hero-h1 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--primary);
  font-weight: 400;
}

.hero-sub {
  font-family: var(--sans);
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 540px;
  opacity: 0;
  animation: softRise 0.85s var(--ease-entrance) 0.36s forwards;
}



.hero-pricing-container {
  display: flex;
  align-items: baseline;
  gap: 16px;
  opacity: 0;
  animation: softRise 0.85s var(--ease-entrance) 0.66s forwards;
}

.hp-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hp-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.hp-price {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
  /* Digits must be fixed-width or the odometer roll jitters horizontally as
     glyph widths change mid-spin. */
  font-variant-numeric: tabular-nums;
}

/* --- Odometer roll -------------------------------------------------------
   The price is region-aware and client-fetched (~1s), but the hero reveals at
   0.7s — so a hardcoded value would sit on screen and then JUMP UP for
   international visitors (1,199 -> 3,000). Showing a low price and then raising
   it is the worst possible direction, so instead each digit is a 0-9 strip that
   rolls DOWN from a high decoy onto the real value: the price is only ever seen
   moving downward, and the decoy is never a legible/claimable number (it's
   spinning digits, not a struck-through offer).

   The strip has exactly 10 children, so digit N sits at translateY(-N*10%) —
   no measurement, no layout thrash, transform-only (compositor-friendly). */
.hp-roll {
  display: inline-flex;
  align-items: flex-start;
}

/* Non-digit chars (₹ and ,) never roll. */
.hp-roll-static {
  display: inline-block;
}

/* One digit place: a viewport onto its strip. */
.hp-roll-slot {
  display: inline-block;
  overflow: hidden;
  height: 1em; /* == line-height:1 on .hp-price */
}

.hp-roll-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
  /* No transition by default — JS opts in, so parking at the decoy doesn't
     animate. */
}

.hp-roll-strip > span {
  height: 1em;
  line-height: 1;
  text-align: center;
}

.hp-roll-strip.is-rolling {
  transition: transform var(--hp-roll-dur, 1100ms) var(--hp-roll-ease);
}

/* Fallback: strong decelerate, no overshoot. Matches the hero's own --ease. */
:root {
  --hp-roll-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* linear() models a real spring settle (cubic-bezier mathematically can't).
   ~90% support; the @supports guard keeps the fallback for the rest. */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --hp-roll-ease: linear(
      0, 0.006, 0.025, 0.101, 0.539 21.4%, 0.721, 0.849, 0.937, 0.991,
      1.023, 1.037 47.6%, 1.041, 1.035, 1.024, 1.011, 1.002, 0.997,
      0.995, 0.997 79.4%, 1.001, 1.002, 1
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Snap to the final value; layout stays identical. */
  .hp-roll-strip,
  .hp-roll-strip.is-rolling {
    transition: none !important;
  }
}

/* The digit strips are aria-hidden (a reader would otherwise announce
   "0123456789" per place), so the real value is exposed here instead. */
.hp-roll-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-intro-video {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-2);
  opacity: 0;
  animation: softRise 0.85s var(--ease-entrance) 0.26s forwards;
}

.anju-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--line-soft);
}

.hero-video-toggle {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.video-play-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  position: relative;
  flex-shrink: 0;
}

.video-play-dot::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  border-left: 7px solid white;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.next-slot-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ok);
  background: none;
  border: 0;
  border-radius: 0;
  opacity: 0;
  animation: softRise 0.85s var(--ease-entrance) 0.46s forwards;
}

.next-slot-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 5px rgba(27, 111, 58, 0.12);
  flex-shrink: 0;
}

/* Trust indicators marquee */
.hero-trust-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 8px 0;
  margin: 4px 0;
  opacity: 0;
  animation: softRise 0.85s var(--ease-entrance) 0.56s forwards;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 16%, black 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 16%, black 84%, transparent 100%);
}

.hero-trust-row {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: trust-marquee var(--trust-duration, 20s) linear infinite;
  will-change: transform;
}

.hero-trust-wrapper:hover .hero-trust-row {
  animation-play-state: paused;
}

@keyframes trust-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-1 * var(--trust-distance, 50%)), 0, 0);
  }
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition: all 0.25s var(--ease);
}

.trust-pill:hover {
  background: var(--primary-soft);
  border-color: var(--primary-3);
  color: var(--primary);
  transform: translateY(-1px);
}

.trust-icon {
  color: var(--primary);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}

.trust-pill:hover .trust-icon {
  transform: scale(1.1);
}

.hero-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 4px;
  width: 100%;
  opacity: 0;
  animation: softRise 0.85s var(--ease-entrance) 0.76s forwards;
}

/* Mobile order: Trust pills → Pricing → CTA → Stats → Care note */
@media (max-width: 979px) {
  .hero-trust-wrapper {
    order: 1;
  }

  .hero-pricing-container {
    order: 2;
  }

  .hero-cta-row {
    order: 3;
  }

  .hero-session-strip {
    order: 4;
  }

  .hero-care-note {
    order: 5;
  }
}

.advisor-link-row {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.5;
}

.advisor-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ok);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}

.advisor-link:hover {
  color: var(--ink);
}

.advisor-link svg {
  color: #25D366;
  flex-shrink: 0;
}

.hero-care-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  opacity: 0;
  animation: softRise 0.85s var(--ease-entrance) 0.86s forwards;
}

.hero-avatar-stack {
  display: flex;
  flex-shrink: 0;
  padding-top: 2px;
}

.hero-avatar-stack img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  object-fit: cover;
  margin-left: -10px;
}

.hero-avatar-stack img:first-child {
  margin-left: 0;
}

.hero-care-note p {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
  max-width: 420px;
}

.hero-session-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  gap: 0;
  opacity: 0;
  animation: softRise 0.85s var(--ease-entrance) 0.96s forwards;
}

.hero-session-strip>div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 16px;
  border-left: 1px solid var(--line);
}

.hero-session-strip>div:first-child {
  border-left: 0;
  padding-left: 0;
}

.hero-session-strip strong {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(40px, 3.4vw, 52px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero-session-strip>div>span {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
  line-height: 1.45;
}

/* Primary CTA.
   Reference: Headspace's hero CTA is a compact near-black pill with NO
   shadow while its nav button stays brand-coloured; mymind's is a small
   quiet pill. A wide saturated slab under a 38px coloured glow is the
   template-landing-page tell, so the glow, the lift and the arrow are
   gone and the fill moves to ink. The purple stays in the nav button,
   where a brand accent belongs. */
.mobile-book-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  min-height: 56px;
  padding: 0 28px;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  border-radius: var(--r-pill);
  box-shadow: none;
  transition: background 0.2s var(--ease);
  cursor: pointer;
}

.mobile-book-cta:hover {
  background: var(--ink-2);
}

.mobile-book-cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* The arrow read as growth-hack decoration; none of the reference CTAs
   carry one. */
.mobile-book-cta .cta-arrow {
  display: none;
}

@media (min-width: 980px) {
  .hero {
    padding: 24px 32px 28px;
    /* No longer forced to fill the viewport — the section sizes to its
       content and is simply capped so it can never overrun the fold on a
       short screen (the sticky header above it is 76px). */
    min-height: 0;
    max-height: calc(100vh - 76px);
    display: flex;
    align-items: center;
  }

  .hero-container {
    /* The booking panel is a fixed-position modal now, so it no longer
       occupies a column. Left-aligning the survivors would strand ~500px
       of dead space on the right, so the hero recomposes as a single
       centred measure. */
    grid-template-columns: minmax(0, 1fr);
    max-width: 920px;
    gap: 36px;
    /* Centre the column in the taller section rather than pinning it to
       the top, so the headline sits on the optical centre. */
    align-items: center;
    width: 100%;
  }

  .hero-left {
    align-items: center;
    text-align: center;
    gap: 14px;
  }

  /* 64px/0.98 centred over three lines read as a shout. Reference heroes
     in this category (Headspace, mymind) sit near 48px with open leading. */
  h1.hero-h1 {
    font-size: clamp(38px, 3.6vw, 52px);
    line-height: 1.06;
  }

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

  .hero-pricing-block,
  .next-slot-badge {
    justify-content: center;
  }

  /* align-items:center shrink-wraps flex children, so this rule's hairline
     rendered ~490px wide against the 920px stats rule below it. Full width
     keeps the two divider lines on the same measure. */
  .hero-care-note {
    width: 100%;
    justify-content: center;
    text-align: left;
  }

  .hero-care-note p {
    max-width: 420px;
  }

  .hero-session-strip {
    width: 100%;
  }

  .hero-left {
    padding-top: 8px;
    gap: 16px;
  }

  .hero-care-note {
    padding: 10px 0;
    gap: 10px;
  }

  .hero-session-strip {
    padding: 14px 0;
  }

  .hero-cta-row {
    align-items: center;
  }

  .mobile-book-cta {
    width: auto;
    max-width: none;
    min-height: 52px;
    padding: 0 34px;
    font-size: 15.5px;
  }

  .advisor-link-row {
    justify-content: center;
    text-align: center;
  }
}

/* Entrance motion.
   blurRise carries the headline: it resolves out of a soft defocus while
   rising, which reads as the page settling rather than an element sliding
   in. softRise is the same gesture at lower amplitude for everything that
   follows, so the hero lands as one cascade instead of seven separate
   slides. */
@keyframes blurRise {
  from {
    opacity: 0;
    transform: translateY(26px) scale(1.014);
    filter: blur(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes softRise {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Reduced motion: land on the final state immediately. A blur-and-rise
   entrance is exactly the kind of motion this setting exists to suppress,
   and the elements start at opacity:0 — so they must be forced visible,
   not merely un-animated. */
@media (prefers-reduced-motion: reduce) {
  h1.hero-h1,
  .hero-sub,
  .hero-pricing-container,
  .hero-intro-video,
  .next-slot-badge,
  .hero-trust-wrapper,
  .hero-cta-row,
  .hero-care-note,
  .hero-session-strip {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .reveal {
    transition: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .hero-h1 .hc {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Per-character headline reveal (spans injected by splitHeroHeadline()).
   Words are inline-block + nowrap so lines break between words; characters
   are inline-block so they can be transformed. Layout is untouched — only
   transform/opacity/filter animate. */
.hero-h1 .hw {
  display: inline-block;
  white-space: nowrap;
}

.hero-h1 .hc {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(0.4em) scale(1.05);
  animation: charRise 0.62s var(--ease-entrance) forwards;
  animation-delay: calc(140ms + var(--i, 0) * 13ms);
}

@keyframes charRise {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

/* Kept for any rule still referencing it. */
@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================================
   BOOKING COLUMN
   ============================================================= */
.hero-right {
  position: relative;
  width: 100%;
  min-width: 0;
}

.booking-form-column {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}

.booking-inner {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.booking-header-zone {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.booking-top-intro h2 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.05;
}

#booking-subtitle {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 4px;
}

.hold-timer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 8px 12px;
  border-radius: 4px;
  margin-top: 6px;
}

.hold-icon {
  font-size: 14px;
}

#hold-countdown-header {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Progress dots */
.booking-progress {
  display: flex;
  align-items: center;
  margin: 4px 0 6px;
}

.prog-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  position: relative;
}

.prog-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s var(--ease);
}

.prog-step::after {
  content: attr(data-label);
  position: absolute;
  top: 34px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  display: none;
}

.prog-step.active .prog-circle {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  transform: scale(1.05);
}

.prog-step.done .prog-circle {
  background: var(--paper);
  border-color: var(--primary);
  color: var(--primary);
}

.prog-line {
  flex: 1;
  height: 1px;
  background: var(--line);
  margin: 0 4px;
}

.prog-step.done+.prog-line {
  background: var(--primary);
}

@media (min-width: 480px) {
  .prog-step::after {
    display: block;
  }

  .booking-progress {
    margin-bottom: 24px;
  }
}

.booking-mini-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

.booking-mini-summary span::before {
  content: '—';
  color: var(--primary);
  margin-right: 6px;
  font-family: var(--serif);
  font-style: italic;
}

.booking-mini-summary strong {
  color: var(--ink);
  font-weight: 600;
}

.book-global-err {
  font-size: 13px;
  color: var(--err);
  background: rgba(180, 35, 24, 0.06);
  padding: 8px 12px;
  border-left: 2px solid var(--err);
  border-radius: 0;
  opacity: 0;
  transition: opacity 0.3s;
  min-height: 0;
}

.book-global-err:not(:empty) {
  opacity: 1;
  min-height: auto;
}

.booking-steps-container {
  position: relative;
  min-height: 280px;
  min-width: 0;
}

.book-step {
  display: none;
  flex-direction: column;
  gap: 16px;
  animation: fadeStep 0.4s var(--ease);
  min-width: 0;
}

.book-step.active {
  display: flex;
}

@keyframes fadeStep {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.step-header-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-kicker {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--primary);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.step-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.step-desc {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

.step-content-area {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.book-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.btn-next-s,
.btn-pay {
  flex: 1;
  height: 50px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: var(--r-md);
  box-shadow: 0 4px 14px rgba(91, 75, 219, 0.22);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.btn-next-s:hover:not(:disabled),
.btn-pay:hover:not(:disabled) {
  background: #3f37c9;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(91, 75, 219, 0.32);
}

.btn-next-s:disabled,
.btn-pay:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-back-s {
  flex-shrink: 0;
  height: 50px;
  padding: 0 22px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.btn-back-s:hover {
  background: var(--warm-white);
  border-color: var(--ink);
}

.btn-mauve {
  background: var(--primary);
  color: white;
  font-weight: 500;
}

.btn-retry {
  height: 44px;
  padding: 0 20px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--r-md);
}

@media (min-width: 768px) {
  .booking-inner {
    padding: 22px 20px;
    gap: 18px;
  }

  .booking-top-intro h2 {
    font-size: 36px;
  }

  .step-title {
    font-size: 32px;
  }
}

@media (min-width: 1024px) {
  .booking-inner {
    padding: 26px 24px;
  }

  .step-title {
    font-size: 36px;
  }
}

/* Applies to any step that hides its own header — step 4 for the loaded slot UI,
   step 2 while the matching screen is up. */
.book-step.hide-header-meta .step-header-area,
#bs-4.hide-header-meta .step-header-area {
  display: none;
}

/* =============================================================
   STEP 1 — CONCERN OPTIONS
   Full-width option rows, sized against how intake questionnaires
   that convert actually build this step (BetterHelp's matching flow,
   Noom's survey): one column, ~64px hit areas, ~17px labels, and a
   SOLID accent fill on select rather than a faint tint. Each concern
   keeps its own accent (--c) from getConcernClass() in script.js.
   ============================================================= */
.focus-choice {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  border: 0;
}

.fc-card {
  --c: var(--primary);
  --c-wash: rgba(91, 75, 219, 0.055);
  position: relative;
  text-align: left;
  padding: 13px 15px;
  background: var(--paper-2);
  /* Border width is constant across states so selecting never nudges
     layout — the colour is the only thing that changes. */
  border: 1.5px solid var(--line-warm);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'title check'
    'desc  check';
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  cursor: pointer;
  min-height: 62px;
  transition:
    border-color 0.16s ease,
    background 0.16s ease;
}

.fc-card.parenting    { --c: #9E5433; --c-wash: rgba(158, 84, 51, 0.08); }
.fc-card.relationship { --c: #A34A6B; --c-wash: rgba(163, 74, 107, 0.07); }
.fc-card.self         { --c: #5B4BDB; --c-wash: rgba(91, 75, 219, 0.07); }
.fc-card.work         { --c: #2E6F63; --c-wash: rgba(46, 111, 99, 0.07); }

.fc-card-top {
  grid-area: check;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.fc-check {
  grid-area: check;
  width: 21px;
  height: 21px;
  border-radius: 6px;
  border: 1.5px solid var(--line-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  color: transparent;
  background: #fff;
  flex-shrink: 0;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.12s ease;
}

.fc-card h4 {
  grid-area: title;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.25;
  transition: color 0.16s ease;
}

.fc-card p {
  grid-area: desc;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  transition: color 0.16s ease;
}

.fc-card:hover {
  border-color: var(--c);
  background: var(--c-wash);
}

.fc-card:hover .fc-check { border-color: var(--muted); }

.fc-card:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 1px;
}

.fc-card.selected {
  background: var(--c);
  border-color: var(--c);
}

.fc-card.selected h4 { color: #fff; }

.fc-card.selected p { color: rgba(255, 255, 255, 0.88); }

.fc-card.selected .fc-check {
  background: #fff;
  border-color: #fff;
  color: var(--c);
}

@media (min-width: 768px) {
  .focus-choice { gap: 11px; }

  .fc-card {
    padding: 14px 17px;
    min-height: 66px;
  }

  .fc-card h4 { font-size: 17.5px; }
}

/* =============================================================
   STEP 2 — SUB-CONCERN PANEL
   One bordered panel of checkbox rows rather than loose cards, so a
   long interleaved list stays scannable. Each row keeps a leading bar
   in its parent concern's accent, which is what makes a mixed list
   (Parenting + Work topics together) legible at a glance.
   ============================================================= */
.sub-reveal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.sub-reveal-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 2px;
}

.sub-empty {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--line-warm);
  border-left: 3px solid var(--primary);
  border-radius: 10px;
}

.sub-empty strong {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.sub-empty span {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

#sub-concerns-area {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.sub-scroll-wrapper {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.sub-grid {
  display: flex;
  flex-wrap: wrap;
  overflow-x: visible;
  overflow-y: auto;
  scroll-snap-type: none;
  gap: 0;
  padding: 0;
  min-width: 0;
  max-width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--line-warm);
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}

/* Bound the panel on desktop so a 14-topic list can't push the actions
   off screen; it scrolls inside its own frame instead. */
@media (min-width: 980px) {
  .sub-grid { max-height: 46vh; }
}

.sub-chip {
  --c: var(--primary);
  --c-wash: rgba(91, 75, 219, 0.055);
  position: relative;
  flex: 1 1 100%;
  max-width: none;
  min-height: 0;
  text-align: left;
  padding: 12px 14px 13px 44px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-warm);
  border-radius: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
  transition: background 0.14s ease;
}

.sub-chip.parenting    { --c: #9E5433; --c-wash: rgba(158, 84, 51, 0.08); }
.sub-chip.relationship { --c: #A34A6B; --c-wash: rgba(163, 74, 107, 0.07); }
.sub-chip.self         { --c: #5B4BDB; --c-wash: rgba(91, 75, 219, 0.07); }
.sub-chip.work         { --c: #2E6F63; --c-wash: rgba(46, 111, 99, 0.07); }

.sub-grid > .sub-chip:last-child {
  border-bottom: 0;
}

.sub-chip h5 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
  transition: color 0.14s ease;
}

.sub-chip p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  transition: color 0.14s ease;
}

.sub-chip-check {
  position: absolute;
  top: 13px;
  left: 15px;
  right: auto;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--line-warm);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  color: transparent;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.12s ease;
}

.sub-chip:hover {
  background: rgba(74, 52, 40, 0.045);
}

.sub-chip:hover .sub-chip-check { border-color: var(--muted); }

.sub-chip:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: -2px;
}

.sub-chip.selected {
  background: var(--c);
}

.sub-chip.selected h5 { color: #fff; }

.sub-chip.selected p { color: rgba(255, 255, 255, 0.88); }

.sub-chip.selected .sub-chip-check {
  background: #fff;
  border-color: #fff;
  color: var(--c);
}

/* "Other" closes the panel — tinted so the free-text row reads as a
   different kind of answer from the presets above it. */
.other-card {
  cursor: pointer;
  background: rgba(74, 52, 40, 0.07);
  border-bottom: 0;
}

.other-card.selected {
  background: var(--c-wash);
}

.other-textarea {
  width: 100%;
  margin-top: 9px;
  padding: 9px 11px;
  border: 1px solid var(--line-warm);
  border-radius: 7px;
  font-size: 12.5px;
  line-height: 1.5;
  resize: vertical;
  min-height: 62px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.other-textarea::placeholder { color: var(--muted); }

.other-textarea:focus {
  outline: none;
  border-color: var(--c);
  box-shadow: 0 0 0 3px var(--c-wash);
}

/* The panel scrolls vertically, so the horizontal arrows are retired.
   The JS that maintains them is harmless and left untouched. */
.sub-nav-btn {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .fc-card,
  .fc-check,
  .sub-chip,
  .sub-chip-check {
    transition-duration: 0.01ms;
  }
}

/* =============================================================
   STEP 1 / 2 — ACTIONS
   Compact and ink-filled: the accent belongs to the options, not to
   the button, so the eye lands on the choice first.
   ============================================================= */
.btn-next-s {
  height: 44px;
  border-radius: 8px;
  background: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
}

.btn-next-s:hover:not(:disabled) {
  background: var(--ink-2);
  transform: none;
  box-shadow: none;
}

.btn-next-s:disabled {
  opacity: 0.35;
  box-shadow: none;
}

.btn-back-s {
  height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
}

.btn-back-s:hover {
  background: #fff;
  border-color: var(--ink);
}

/* =============================================================
   CALENDAR
   ============================================================= */
.matching-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 44px 20px 48px;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--line);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Therapist-matching animation: a ring of real therapist photos orbiting a
   centred crest while availability loads. */
.mv-stage {
  position: relative;
  width: 236px;
  height: 236px;
  display: grid;
  place-items: center;
  margin-bottom: 30px;
}

.mv-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--line);
}

.mv-ring--outer { inset: 0; }
.mv-ring--inner { inset: 38px; border-color: var(--line-soft); }

/* One bright quadrant sweeping the ring — reads as "working" without the
   jitter of a classic spinner. */
.mv-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--primary);
  animation: spin 2.4s linear infinite;
}

.mv-pulse {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0;
  animation: mv-pulse 3.2s var(--ease) infinite;
}

.mv-pulse:nth-of-type(2) { animation-delay: 1.6s; }

@keyframes mv-pulse {
  0% { transform: scale(1); opacity: 0.1; }
  75% { transform: scale(1.85); opacity: 0; }
  100% { transform: scale(1.85); opacity: 0; }
}

.mv-crest {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-md);
  display: grid;
  place-items: center;
  z-index: 2;
}

.mv-crest svg { width: 30px; height: 30px; display: block; }

.mv-orbit {
  position: absolute;
  inset: 0;
  animation: spin 18s linear infinite;
}

/* --a is the face's angle on the ring. Each face counter-rotates by the same
   duration so the photo stays upright while the track turns. */
.mv-face {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: var(--shadow-md);
  transform: rotate(var(--a)) translate(118px) rotate(calc(-1 * var(--a)));
  opacity: 0;
  animation: mv-upright 18s linear infinite, mv-in 0.5s var(--ease) forwards;
}

.mv-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes mv-upright {
  to { transform: rotate(var(--a)) translate(118px) rotate(calc(-1 * var(--a) - 360deg)); }
}

@keyframes mv-in { to { opacity: 1; } }

.mv-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink);
}

.mv-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 34ch;
}

.mv-status {
  margin-top: 20px;
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--primary);
  font-weight: 500;
}

.mv-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: mv-blink 1.4s var(--ease) infinite;
  flex: none;
}

@keyframes mv-blink {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

.mv-status span { animation: mv-fade 0.4s var(--ease); }

@keyframes mv-fade {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* Determinate bar — an infinite spinner invites "is it stuck?". */
.mv-bar {
  margin-top: 24px;
  width: 150px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}

.mv-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--primary);
  opacity: 0.75;
  transition: width 0.45s var(--ease);
}

@media (max-width: 400px) {
  .mv-stage { width: 200px; height: 200px; }
  .mv-face {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    transform: rotate(var(--a)) translate(100px) rotate(calc(-1 * var(--a)));
  }
  @keyframes mv-upright {
    to { transform: rotate(var(--a)) translate(100px) rotate(calc(-1 * var(--a) - 360deg)); }
  }
}

/* Hold everything still for reduced-motion users. The screen still communicates
   state through the rotating status copy and the progress bar. */
@media (prefers-reduced-motion: reduce) {
  .mv-sweep, .mv-orbit, .mv-face, .mv-pulse, .mv-dot { animation: none !important; }
  .mv-face { opacity: 1; }
  .mv-sweep { opacity: 0.5; }
}

.mode-header h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.mode-header p {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

.schedule-mode-header {
  margin-bottom: 8px;
}

.scarcity-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(180, 95, 6, 0.06);
  border-left: 2px solid #b45309;
  border-radius: 0;
  font-size: 12px;
  color: #92400e;
  font-weight: 500;
}

.fire-icon {
  color: #b45309;
  font-size: 14px;
}

.earliest-slot-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-left: 2px solid var(--ok);
  background: rgba(27, 111, 58, 0.04);
}

.earliest-slot-card span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ok);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.earliest-slot-card strong {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.earliest-slot-card button {
  align-self: flex-start;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s;
}

.earliest-slot-card button:hover {
  background: var(--primary);
}

.booking-grid-s3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 8px;
}

.cal-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px;
}

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 10px;
}

.cal-month {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.cal-nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 18px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.cal-nav:hover {
  background: var(--line-soft);
  border-color: var(--ink);
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.cal-weekday {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 6px 0;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-day {
  aspect-ratio: 1;
  background: transparent;
  border: 1px solid transparent;
  font-size: 14px;
  color: var(--muted);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: all 0.15s;
  font-family: var(--serif);
  font-weight: 400;
}

.cal-day.available {
  color: var(--ink);
  cursor: pointer;
  background: var(--paper);
  border-color: var(--line);
}

.cal-day.available:hover {
  border-color: var(--ink);
  background: var(--line-soft);
}

.cal-day.today {
  font-style: italic;
  color: var(--primary);
}

.cal-day.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.slots-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.slots-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px;
}

.slots-header span {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.slots-header strong {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.time-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding: 2px;
}

.time-chip {
  height: 40px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: all 0.15s;
}

.time-chip:hover {
  border-color: var(--ink);
}

.time-chip.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.tz-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin-top: 20px;
}

.muted-note {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.schedule-empty {
  text-align: center;
  padding: 36px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.schedule-empty p {
  font-family: var(--serif);
  font-size: 24px;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.schedule-empty span {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mode-card {
  text-align: left;
  padding: 20px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s;
}

.mode-card:hover {
  border-color: var(--ink);
}

.mode-card.selected {
  background: var(--primary-soft);
  border-color: var(--ink);
}

.mode-icon {
  font-size: 26px;
}

.mode-card h4 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.mode-card p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

@media (min-width: 768px) {
  .booking-grid-s3 {
    grid-template-columns: 1.05fr 1fr;
    gap: 18px;
  }

  .time-chips {
    max-height: 280px;
  }
}

/* =============================================================
   DETAILS FORM
   ============================================================= */
.dt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.prog-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}

.dt-input-wrap {
  display: flex;
}

.dt-input,
.phone-cc {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.2s;
}

.dt-input::placeholder,
.phone-cc::placeholder {
  color: var(--muted);
  font-style: italic;
}

.dt-input:focus,
.phone-cc:focus {
  outline: 0;
  border-color: var(--ink);
  background: var(--paper);
}

.dt-input.error {
  border-color: var(--err);
}

.field-msg {
  min-height: 14px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--err);
}

.phone-row {
  display: flex;
  gap: 8px;
}

.phone-cc {
  flex: 0 0 64px;
  text-align: center;
  font-weight: 500;
}

.phone-num {
  flex: 1;
}

.terms-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 4px;
}

.terms-note a {
  color: var(--primary);
  text-decoration: underline;
}

@media (min-width: 600px) {
  .dt-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* =============================================================
   PAYMENT SUMMARY
   ============================================================= */
.confirm-summary {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-title {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.cs-row,
.cs-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.cs-row span:first-child,
.cs-price span:first-child {
  color: var(--muted);
}

.cs-row span:last-child {
  color: var(--ink);
  font-weight: 500;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: -0.01em;
}

.cs-price {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 4px;
  font-size: 16px;
  align-items: baseline;
}

.cs-price .original {
  text-decoration: line-through;
  color: var(--muted);
  font-weight: 400;
  margin-right: 6px;
}

.cs-price .final {
  color: var(--primary);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  font-style: italic;
  letter-spacing: -0.02em;
}

/* ---- Coupon ---- */
.coupon-section {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  margin-top: 12px;
}

.coupon-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coupon-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.coupon-input-row {
  display: flex;
  gap: 8px;
}

.coupon-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.coupon-input::placeholder {
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted);
}

.coupon-input:focus {
  outline: none;
  border-color: var(--primary);
}

.coupon-apply-btn {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 1px solid var(--primary);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.coupon-apply-btn:hover:not(:disabled) {
  background: var(--primary);
  color: #fff;
}

.coupon-apply-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.coupon-msg {
  font-size: 13px;
  min-height: 1px;
}

.coupon-msg.err {
  color: var(--err);
}

.coupon-msg.ok {
  color: var(--ok);
}

.coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.coupon-applied-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.coupon-applied-code {
  font-size: 14px;
  font-weight: 600;
  color: var(--ok);
  letter-spacing: 0.04em;
}

.coupon-applied-desc {
  font-size: 12px;
  color: var(--muted);
}

.coupon-remove-btn {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}

.coupon-remove-btn:hover {
  color: var(--err);
}

.payment-msg {
  font-size: 13px;
  margin-top: 4px;
}

.payment-msg.ok {
  color: var(--ok);
}

.payment-msg.err {
  color: var(--err);
}

.service-error {
  text-align: center;
  padding: 36px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.service-error-icon {
  font-size: 32px;
}

.service-error h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.service-error p {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
}

/* =============================================================
   FLOATING MOBILE FAB
   ============================================================= */
.floating-book-fab {
  position: fixed;
  z-index: 996;
  bottom: calc(18px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: opacity 0.2s;
  min-height: 56px;
  padding: 0 32px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

@keyframes fabPulse {

  0%,
  76%,
  100% {
    transform: translate(-50%, 0) scale(1);
  }

  82% {
    transform: translate(-50%, -1px) scale(1.03);
  }

  88% {
    transform: translate(-50%, 0) scale(1);
  }
}

@media (max-width: 979px) {
  .floating-book-fab.is-visible {
    display: inline-flex;
  }

  .floating-book-fab.is-visible {
    animation: fabPulse 10s ease-in-out infinite;
  }

  body.sheet-open .floating-book-fab {
    display: none;
  }
}

/* =============================================================
   MOBILE BOOKING SHEET / FULLSCREEN MODAL
   ============================================================= */
#sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 18, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
  z-index: 998;
}

#sheet-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.sheet-handle-bar {
  display: none;
  position: relative;
  padding: 16px 56px 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  align-items: center;
  justify-content: flex-start;
  flex: none;
}

.sheet-pill {
  display: none;
}

.sheet-header-label {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.sheet-close-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.sheet-close-btn:hover {
  background: var(--line-soft);
}

.sheet-close-btn svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 979px) {
  .booking-form-column {
    position: fixed;
    inset: 0;
    transform: translateY(100%);
    transition: transform 0.4s var(--ease);
    border-radius: 0;
    border: 0;
    z-index: 999;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    visibility: hidden;
  }

  .booking-form-column.visible {
    visibility: visible;
  }

  .hero-right.sheet-open .booking-form-column {
    transform: translateY(0);
  }

  .sheet-handle-bar {
    display: flex;
  }

  /* Sheet handle already shows "Book Your First Session"; hide the duplicate
     in-body heading on mobile while keeping it for desktop. */
  .booking-top-intro h2 {
    display: none;
  }

  .booking-inner {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    flex: 1 1 auto;
    min-height: 0;
    padding: 20px 20px 0;
    gap: 14px;
  }

  .booking-steps-container {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 0;
  }

  .book-step {
    flex: 1 0 auto;
    gap: 12px;
  }

  .book-step.active {
    display: flex;
    min-height: 100%;
  }

  .book-step.active .book-actions {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--paper);
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
    margin: auto -20px 0;
    z-index: 5;
    border-top: 1px solid var(--line);
  }

  /* Step 2 — the panel is a single column of rows at every width, so the
     list just grows with the page instead of being height-capped. */
  .sub-chip {
    padding: 11px 12px 12px 42px;
  }

  .sub-chip-check {
    top: 12px;
    left: 13px;
  }

  .fc-card {
    padding: 12px 13px;
    min-height: 60px;
  }

  .fc-card h4 {
    font-size: 16px;
  }

  /* Step 3 — tighten field spacing so the contact form fits one mobile view. */
  .step-content-area {
    gap: 10px;
  }

  .step-header-area {
    gap: 2px;
  }

  /* Reference check (Mobbin, web onboarding modals): Hers, Bolt.new,
     Synthesia and Cohere all reduce progress to a hairline bar or an
     "n/N" counter inside a modal. A five-circle stepper with uppercase
     labels was the loudest element in the panel and cost ~90px of a
     634px dialog, so it shrinks to a quiet row of dots. */
  .prog-step::after {
    display: none;
  }

  .prog-circle {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .prog-step.active .prog-circle {
    transform: none;
  }

  .booking-progress {
    margin: 0 0 2px;
  }

  /* Pipedrive/Hers pattern: the control sits beside the label it belongs
     to, not stranded at the far edge of a 530px row. */
  .fc-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'check title'
      'check desc';
    column-gap: 13px;
    padding-left: 14px;
  }

  .fc-card-top {
    justify-content: flex-start;
  }

  .dt-field {
    gap: 4px;
  }

  .dt-grid {
    gap: 10px;
  }

  .field-msg {
    min-height: 0;
  }

  .field-msg:empty {
    display: none;
  }

  .terms-note {
    margin-top: 2px;
  }

  body.sheet-open {
    overflow: hidden;
  }

  body.sheet-fixed {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
  }
}

/* =============================================================
   SUPPORTERS — editorial logo strip
   ============================================================= */
.supporters-section,
.funds-section {
  padding: 64px 20px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.supporters-inner,
.funds-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.supporters-inner h2,
.funds-inner h2 {
  max-width: 820px;
  font-family: var(--serif);
  font-size: clamp(32px, 5.5vw, 58px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.supporter-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 36px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.supporter-logo {
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.2s;
}

.supporter-logo img {
  width: min(220px, 86%);
  max-height: 80px;
  object-fit: contain;
}

.supporter-logo:hover {
  background: var(--line-soft);
}

.funds-section {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.funds-inner {
  display: grid;
  gap: 16px;
}

.funds-inner p {
  max-width: 640px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-2);
  line-height: 1.55;
}

@media (min-width: 768px) {

  .supporters-section,
  .funds-section {
    padding: 96px 32px;
  }

  .supporter-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .supporter-logo {
    min-height: 144px;
  }
}

/* =============================================================
   BRAND VIDEO
   ============================================================= */
.brand-video-section {
  background: var(--paper);
  padding: 32px 20px 16px;
}

.brand-video-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  aspect-ratio: 16 / 9;
}

.brand-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

@media (min-width: 768px) {
  .brand-video-section {
    padding: 56px 24px 24px;
  }
}

@media (min-width: 1024px) {
  .brand-video-section {
    padding: 80px 32px 32px;
  }
}

.brand-video-section.in-hero {
  padding: 0;
  background: transparent;
  border-top: 0;
  width: 100%;
  margin-bottom: 4px;
  display: flex;
  justify-content: center;
}

.brand-video-section.in-hero .brand-video-wrap {
  border-radius: var(--r-md);
  width: 100%;
  max-width: 280px;
}

/* =============================================================
   FOCUS PANELS — editorial 4-up row with hairlines
   ============================================================= */
.focus-story {
  background: var(--paper);
  padding: 72px 0;
  border-top: 1px solid var(--line);
}

.focus-intro {
  text-align: left;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.section-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--primary);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.section-heading {
  font-family: var(--serif);
  font-size: clamp(42px, 7vw, 88px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.section-heading em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--primary);
  font-weight: 400;
}

.focus-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--max-w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.focus-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 36px 26px;
  min-height: 280px;
  background: var(--paper);
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.3s;
}

.focus-panel:hover {
  background: var(--line-soft);
  z-index: 2;
}

.panel-num {
  position: absolute;
  top: 16px;
  right: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 56px;
  font-weight: 400;
  color: var(--line);
  line-height: 1;
  pointer-events: none;
  letter-spacing: -0.02em;
}

.panel-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.panel-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--primary);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.panel-title {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}

.panel-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 320px;
}

.panel-link {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--primary);
  align-self: flex-start;
  transition: color 0.2s, transform 0.2s;
}

.panel-link:hover {
  color: var(--ink);
  transform: translateX(3px);
}

@media (min-width: 768px) {
  .focus-story {
    padding: 96px 0;
  }

  .focus-intro {
    padding: 0 48px 48px;
  }

  .focus-panel {
    padding: 52px 36px;
    min-height: 360px;
  }

  .panel-title {
    font-size: 48px;
  }

  .panel-desc {
    font-size: 15px;
  }

  .panel-num {
    top: 28px;
    right: 36px;
    font-size: 88px;
  }
}

@media (min-width: 1024px) {
  .focus-panels {
    grid-template-columns: repeat(4, 1fr);
  }

  .focus-panel {
    min-height: 420px;
    padding: 56px 32px;
  }

  /* Prevent title text from running under the ghost number without
     changing the panel-top dimensions (avoids unequal panel sizes) */
  .panel-title {
    max-width: calc(100% - 60px);
  }

  .panel-num {
    font-size: 72px;
    top: 24px;
    right: 28px;
  }
}

/* =============================================================
   PROCESS — editorial flow row, hairlined
   ============================================================= */
.process-story {
  background: var(--paper);
  padding: 72px 32px;
  border-top: 1px solid var(--line);
}

.process-intro {
  text-align: left;
  max-width: var(--max-w);
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.process-intro p {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 540px;
}

.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: var(--max-w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.process-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 0;
  background: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  transition: background 0.2s;
  position: relative;
}

.process-step:hover {
  background: var(--line-soft);
}

.process-step span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 40px;
  color: var(--primary);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}

.process-step h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.05;
}

.process-step p {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 360px;
}

@media (min-width: 768px) {
  .process-story {
    padding: 96px 48px;
  }

  .process-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-left: 1px solid var(--line);
  }

  .process-step {
    padding: 36px 28px;
    border-right: 1px solid var(--line);
  }

  .process-step h3 {
    font-size: 28px;
  }
}

/* =============================================================
   THERAPISTS — editorial row, hairline cards
   ============================================================= */
.therapist-story {
  background: var(--paper);
  padding: 72px 32px;
  border-top: 1px solid var(--line);
}

.therapist-intro-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 0 32px;
  border-bottom: 1px solid var(--line);
}

.therapist-heading {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.therapist-heading em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--primary);
  font-weight: 400;
}

.therapist-nav-btns {
  display: flex;
  gap: 8px;
}

.t-nav-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.t-nav-btn:hover:not(:disabled):not(.is-disabled) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.t-nav-btn.is-disabled,
.t-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.t-nav-btn.is-hidden {
  display: none;
}

.therapist-scroll-track {
  display: flex;
  gap: 20px;
  max-width: var(--max-w);
  margin: 0 auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 32px 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.therapist-scroll-track::-webkit-scrollbar {
  display: none;
}

.t-story-card {
  scroll-snap-align: start;
  flex: 0 0 240px;
  background: linear-gradient(165deg, #FFFFFF 0%, var(--primary-soft) 100%);
  border: 1px solid var(--line);
  padding: 16px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(91, 75, 219, 0.07);
}

.t-story-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary-3);
  box-shadow: 0 14px 32px rgba(91, 75, 219, 0.16);
}

.t-story-initial {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  object-fit: cover;
  filter: grayscale(0.1);
  transition: filter 0.25s;
}

.t-story-card:hover .t-story-initial {
  filter: grayscale(0);
}

.t-story-card h4 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.05;
  margin-top: 4px;
}

.t-story-card .deg {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.t-story-card .spec {
  font-size: 11px;
  color: var(--primary);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: auto;
}

@media (min-width: 768px) {
  .therapist-story {
    padding: 96px 48px;
  }

  .t-story-card {
    flex: 0 0 280px;
    padding: 20px 20px 26px;
  }
}

/* =============================================================
   TESTIMONIAL MARQUEE — editorial pull-quotes
   ============================================================= */
.testimonial-immersive {
  position: relative;
  background: var(--paper);
  padding: 72px 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
}

.testi-bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(160px, 26vw, 380px);
  font-weight: 400;
  color: var(--line);
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
  letter-spacing: -0.04em;
}

.testimonial-immersive .therapist-intro {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  text-align: left;
}

.testimonial-immersive .therapist-intro h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.testimonial-immersive .therapist-intro h2 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--primary);
  font-weight: 400;
}

.testimonial-immersive .video-header {
  margin-bottom: 32px;
}

.stage {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 32px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee var(--marquee-duration, 60s) linear infinite;
  will-change: transform;
}

.testimonial-immersive:hover .track {
  animation-play-state: paused;
}

@keyframes marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-1 * var(--marquee-distance, 50%)), 0, 0);
  }
}

.card.quote {
  flex: 0 0 360px;
  background: var(--paper);
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: none;
  position: relative;
}

.card.quote::before {
  content: '"';
  font-family: var(--serif);
  font-style: italic;
  font-size: 64px;
  color: var(--primary);
  line-height: 0.6;
  margin-bottom: -10px;
}

.quote-text {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  font-style: normal;
  letter-spacing: 0;
}

.name-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--primary);
  font-weight: 400;
  letter-spacing: 0;
  margin-top: auto;
}

@media (min-width: 768px) {
  .testimonial-immersive {
    padding: 96px 0;
  }

  .card.quote {
    flex: 0 0 420px;
    padding: 32px 40px;
  }

  .quote-text {
    font-size: 16px;
  }
}

/* =============================================================
   VIDEO REELS
   ============================================================= */
.video-story {
  background: var(--paper);
  padding: 72px 32px;
  border-top: 1px solid var(--line);
}

.video-header {
  max-width: var(--max-w);
  margin: 0 auto 32px;
  text-align: left;
}

.video-header .therapist-intro {
  text-align: left;
}

.video-header .therapist-intro h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.video-header .therapist-intro h2 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--primary);
  font-weight: 400;
}

.reel-grid {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.reel-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
}

.reel-embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
}

.reel-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.reel-card-footer {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--line);
}

.reel-caption {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.reel-caption-icon {
  flex-shrink: 0;
}

.reel-caption-icon svg {
  width: 28px;
  height: 28px;
}

.reel-caption-user {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: block;
}

.reel-caption-text {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 2px;
  line-height: 1.55;
}

.reel-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.reel-action-btns {
  display: flex;
  gap: 14px;
}

.reel-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink);
  opacity: 0.7;
  transition: opacity 0.2s;
}

.reel-btn:hover {
  opacity: 1;
  color: var(--primary);
}

.reel-btn svg {
  width: 18px;
  height: 18px;
}

.reel-open-btn {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--primary);
  font-weight: 400;
}

.reel-open-btn:hover {
  color: var(--ink);
}

@media (min-width: 768px) {
  .video-story {
    padding: 96px 48px;
  }

  .reel-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 880px;
  }

  .reel-card {
    max-width: none;
  }
}

/* =============================================================
   FAQ
   ============================================================= */
.faq-story {
  background: var(--paper);
  padding: 72px 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: var(--max-w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.faq-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.faq-aside h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.faq-aside h2 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--primary);
  font-weight: 400;
}

.faq-aside p {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 360px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 48px;
  padding: 0 26px;
  border: 1px solid var(--primary);
  color: var(--primary);
  background: transparent;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}

.hero-cta:hover {
  background: var(--primary);
  color: #fff;
}

.faq-items {
  display: flex;
  flex-direction: column;
}

.faq-s-item {
  border-top: 1px solid var(--line);
  padding: 22px 0;
  list-style: none;
}

.faq-s-item:first-child {
  border-top: 0;
}

.faq-s-q {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  line-height: 1.25;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.faq-s-q::-webkit-details-marker {
  display: none;
}

.faq-s-q::marker {
  content: '';
}

.faq-s-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  transition: transform 0.3s var(--ease);
}

.faq-s-a {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.65;
  margin-top: 12px;
  max-width: 720px;
  display: none;
}

.faq-s-item[open] .faq-s-a {
  display: block;
  animation: faqIn 0.3s var(--ease);
}

.faq-s-item[open] .faq-s-icon {
  transform: rotate(45deg);
}

@keyframes faqIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 768px) {
  .faq-story {
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
    padding: 96px 48px;
  }

  .faq-s-q {
    font-size: 26px;
  }

  .faq-s-item {
    padding: 28px 0;
  }
}

/* =============================================================
   FOOTER — minimal editorial
   ============================================================= */
.footer-story {
  background: var(--ink);
  color: var(--paper);
  padding: 40px 32px 24px;
  border-top: 1px solid var(--ink);
}

.footer-container {
  max-width: var(--max-w);
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-col {
  grid-column: 1 / -1;
}

.footer-logo img {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
}

@media (min-width: 768px) {
  .footer-logo img {
    height: 44px;
  }
}

.footer-desc {
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.65;
  margin-top: 10px;
  max-width: 360px;
}

.footer-col h4 {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  margin-bottom: 10px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-links a {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--paper);
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--primary-3);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  align-items: flex-start;
}

.copyright {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
}

.footer-social {
  display: flex;
  gap: 14px;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  transition: all 0.2s;
}

.footer-social a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--paper);
}

@media (min-width: 768px) {
  .footer-story {
    padding: 56px 48px 28px;
  }

  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 28px;
  }

  .brand-col {
    grid-column: auto;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* =============================================================
   BOOKING SUCCESS
   ============================================================= */
.booking-success {
  text-align: left;
  padding: 48px 20px;
}

.booking-success-logo {
  height: 30px;
  width: auto;
  margin: 0 0 36px;
  opacity: 0.8;
}

.booking-success-title {
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}

.booking-success-title em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--primary);
  font-weight: 400;
}

.booking-success-copy {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 460px;
  margin: 0 0 40px;
}

.booking-success-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 26px;
  text-align: left;
  max-width: 460px;
  margin: 0 0 40px;
}

.booking-success-card h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 18px;
  color: var(--muted);
  font-weight: 600;
}

.success-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  font-size: 14px;
  align-items: baseline;
}

.success-row span:first-child {
  color: var(--muted);
}

.success-row span:last-child {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  text-align: right;
  letter-spacing: -0.01em;
}

.success-row .paid {
  color: var(--primary);
  font-style: italic;
}

.success-ids {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 18px;
}

.success-ids .success-row {
  font-size: 11px;
  margin-bottom: 4px;
}

.success-ids .success-row span:last-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.success-ids code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
}

.success-home-link {
  display: inline-block;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.exit-options {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.exit-option {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  text-align: left;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  background: var(--paper);
  color: var(--ink);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}

.exit-option:hover {
  border-color: var(--ink);
  background: var(--line-soft);
}

.exit-option-dot {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  position: relative;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.exit-option-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--primary);
  transform: scale(0);
  transition: transform 0.2s var(--ease);
}

.exit-option.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--ink);
}

.exit-option.selected .exit-option-dot {
  border-color: var(--primary);
}

.exit-option.selected .exit-option-dot::after {
  transform: scale(1);
}

.exit-other-text {
  width: 100%;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  resize: vertical;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  transition: border-color 0.2s var(--ease);
}

.exit-other-text:focus {
  outline: none;
  border-color: var(--primary);
}

/* =============================================================
   PAYMENT FAILED MODAL
   ============================================================= */
.payment-failed-modal[hidden] {
  display: none;
}

.payment-failed-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.payment-failed-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 18, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.payment-failed-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 540px);
  max-height: 92vh;
  background: var(--paper);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xl);
  text-align: left;
  animation: pfRise 0.32s var(--ease);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.payment-failed-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 48px 32px 20px;
}

/* Two-step machinery */
.pf-step[hidden] {
  display: none;
}

.pf-step {
  animation: pfStepIn 0.32s var(--ease);
}

.pf-step-sub {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

.payment-failed-actions .pf-actions-group[hidden] {
  display: none;
}

.payment-failed-actions .pf-actions-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: pfStepIn 0.32s var(--ease);
}

/* Stepper pips — show progress through the two steps */
.pf-stepper {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 4;
}

.pf-step-pip {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  transition: background 0.25s var(--ease), width 0.25s var(--ease);
}

.payment-failed-modal[data-step="reason"] .pf-step-pip--1 {
  background: var(--ink);
}

.payment-failed-modal[data-step="help"] .pf-step-pip--1 {
  background: var(--primary);
}

.payment-failed-modal[data-step="help"] .pf-step-pip--2 {
  background: var(--ink);
  width: 28px;
}

/* When skipping straight to help (payment-failed), hide stepper entirely */
.payment-failed-modal[data-single-step="1"] .pf-stepper {
  display: none;
}

/* Continue button (step 1 primary). Compound selector beats the
   .payment-failed-primary WhatsApp-green declaration later in this file
   without needing to reorder rules. */
.payment-failed-primary.pf-continue {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}

.payment-failed-primary.pf-continue:hover:not(:disabled) {
  background: #000;
}

.payment-failed-primary.pf-continue:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  background: var(--ink);
}

/* Skip link on step 1 */
.pf-skip {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  padding: 8px 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
  transition: color 0.2s, text-decoration-color 0.2s;
}

.pf-skip:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

/* Back link on step 2 (only visible when arrived from step 1) */
.pf-back {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  padding: 6px 10px;
  cursor: pointer;
  transition: color 0.2s;
}

.pf-back:hover {
  color: var(--ink);
}

.pf-back[hidden] {
  display: none;
}

@keyframes pfRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pfStepIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.payment-failed-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: var(--paper);
  transition: background 0.2s, color 0.2s;
  z-index: 5;
}

.payment-failed-close:hover {
  background: var(--line-soft);
  color: var(--ink);
}

.payment-failed-icon {
  width: 56px;
  height: 56px;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
}

.payment-failed-kicker {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--primary);
  font-weight: 400;
  margin-bottom: 10px;
  letter-spacing: 0;
  text-transform: none;
}

.payment-failed-modal h2 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 14px;
}

.payment-failed-modal p {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
}

.payment-failed-bullets {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 18px;
  background: var(--line-soft);
  border-left: 2px solid var(--primary);
  border-radius: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-failed-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  font-family: var(--sans);
  font-style: normal;
}

.pf-tick {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(27, 111, 58, 0.18);
  color: var(--ok);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.payment-failed-reason {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 4px;
  background: var(--line-soft);
  border-left: 2px solid var(--line);
  font-size: 13px;
  color: var(--ink);
  font-style: normal;
  font-family: var(--sans);
}

.payment-failed-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 28px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper);
  flex: none;
}

.payment-failed-actions[hidden] {
  display: none;
}

.payment-failed-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 24px;
  background: #25D366;
  color: white;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: background 0.2s;
}

.payment-failed-primary:hover {
  background: #1ebe5a;
}

.payment-failed-secondary {
  min-height: 48px;
  padding: 0 24px;
  background: transparent;
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  border: 1px solid var(--primary);
  transition: background 0.2s, color 0.2s;
}

.payment-failed-secondary:hover {
  background: var(--primary);
  color: #fff;
}

.payment-failed-foot {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  text-align: left;
}

.payment-failed-foot a {
  color: var(--primary);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.payment-failed-foot a:hover {
  color: var(--ink);
}

body.pf-modal-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .payment-failed-modal {
    padding: 0;
  }

  .payment-failed-panel {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: 0;
  }

  .payment-failed-scroll {
    padding: 44px 20px 16px;
  }

  .payment-failed-actions {
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  }

  .payment-failed-modal h2 {
    font-size: 26px;
  }

  .payment-failed-close {
    width: 40px;
    height: 40px;
    top: 12px;
    right: 12px;
  }

  .payment-failed-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
  }

  .pf-stepper {
    top: 18px;
  }

  .exit-option {
    font-size: 14.5px;
    min-height: 50px;
    padding: 12px 14px;
  }
}

/* =============================================================
   THERAPIST MODAL
   ============================================================= */
.t-modal {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  padding: 16px;
}

.t-modal.show {
  opacity: 1;
}

.t-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 18, 0.65);
  backdrop-filter: blur(4px);
}

.t-modal-container {
  position: relative;
  background: var(--paper);
  border-radius: var(--r-lg);
  max-width: 920px;
  width: 100%;
  max-height: 92vh;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  z-index: 1;
  transform: translateY(20px);
  transition: transform 0.3s var(--ease);
}

.t-modal.show .t-modal-container {
  transform: translateY(0);
}

.t-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s;
}

.t-modal-close:hover {
  background: var(--line-soft);
}

.t-modal-content {
  display: grid;
  grid-template-columns: 1fr;
  max-height: 92vh;
  overflow-y: auto;
}

.t-modal-left {
  background: var(--paper-2);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.t-modal-left img {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  object-fit: cover;
}

.t-modal-right {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.t-modal-right h2 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.04;
}

.modal-deg {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--primary);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.modal-info-scroll {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
}

.modal-section h4 {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 8px;
}

.modal-section p {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .t-modal-content {
    grid-template-columns: 0.85fr 1fr;
  }

  .t-modal-left {
    padding: 40px;
  }

  .t-modal-left img {
    max-width: 100%;
  }

  .t-modal-right {
    padding: 44px 40px;
  }

  .t-modal-right h2 {
    font-size: 40px;
  }
}

/* =============================================================
   MOBILE-FIRST TUNING (≤ 600px)
   ============================================================= */
@media (max-width: 600px) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .hero {
    padding: 12px 16px 0;
  }

  .hero-left {
    gap: 10px;
    text-align: left;
    align-items: flex-start;
  }

  .hero-pricing-container {
    justify-content: flex-start;
  }

  .hero-care-note {
    align-items: flex-start;
    text-align: left;
  }

  .hero-care-note p {
    margin: 0;
  }

  .hero-session-strip>div {
    text-align: left;
    align-items: flex-start;
    padding: 0 10px;
  }

  .hero-intro-video {
    margin: 0;
  }

  h1.hero-h1 {
    font-size: clamp(26px, 7.5vw, 38px);
    line-height: 1.02;
  }

  .hp-label {
    font-size: 10px;
  }

  .hp-price {
    font-size: 28px;
  }

  .hero-care-note {
    gap: 10px;
    padding: 10px 0;
  }

  .hero-care-note p {
    font-size: 13px;
    line-height: 1.45;
  }

  .hero-avatar-stack img {
    width: 26px;
    height: 26px;
  }

  .hero-session-strip {
    padding: 12px 0;
    gap: 0;
  }

  .hero-session-strip strong {
    font-size: clamp(22px, 6vw, 30px);
  }

  .hero-session-strip>div>span {
    font-size: 10px;
    line-height: 1.35;
  }

  .mobile-book-cta {
    min-height: 50px;
    font-size: 15px;
    padding: 0 20px;
  }

  .section-heading,
  .therapist-heading,
  .faq-aside h2,
  .video-header .therapist-intro h2,
  .testimonial-immersive .therapist-intro h2,
  .supporters-inner h2 {
    font-size: clamp(36px, 9vw, 52px);
    line-height: 1;
  }

  .focus-story,
  .process-story,
  .therapist-story,
  .video-story,
  .testimonial-immersive,
  .supporters-section,
  .faq-story {
    padding: 56px 20px;
  }

  .focus-story {
    padding: 56px 0;
  }

  .focus-intro {
    padding: 0 20px 28px;
  }

  .process-intro {
    margin-bottom: 24px;
  }

  .therapist-intro-row {
    padding: 0 0 20px;
  }

  .video-header {
    margin-bottom: 24px;
  }

  .testimonial-immersive .therapist-intro {
    padding: 0 20px;
  }

  .focus-panel {
    padding: 28px 20px;
    min-height: 240px;
    gap: 14px;
  }

  .panel-desc {
    font-size: 14px;
    line-height: 1.55;
  }

  .panel-num {
    font-size: 48px;
    top: 12px;
    right: 16px;
  }

  .panel-title {
    font-size: 28px;
  }

  .panel-link {
    font-size: 16px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  .process-step {
    padding: 24px 20px;
  }

  .process-step h3 {
    font-size: 22px;
  }

  .process-step p {
    font-size: 14px;
  }

  .process-step span {
    font-size: 32px;
  }

  .faq-aside p {
    font-size: 16px;
  }

  .faq-s-q {
    font-size: 19px;
    min-height: 48px;
    padding: 4px 0;
  }

  .faq-s-a {
    font-size: 15px;
    line-height: 1.55;
  }

  .faq-s-item {
    padding: 18px 0;
  }

  .hero-cta {
    height: 46px;
    font-size: 12px;
    padding: 0 22px;
  }

  .therapist-scroll-track {
    gap: 14px;
    padding: 24px 4px;
  }

  .t-story-card {
    flex: 0 0 70vw;
    max-width: 260px;
    padding: 14px 14px 20px;
  }

  .t-story-card h4 {
    font-size: 19px;
  }

  .footer-grid {
    gap: 18px 16px;
    padding-bottom: 18px;
  }

  .footer-links a {
    padding: 2px 0;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
  }

  .sheet-handle-bar {
    padding: 14px 56px 14px 18px;
  }

  .floating-book-fab {
    min-height: 54px;
    padding: 0 28px;
    font-size: 14px;
    letter-spacing: 0.02em;
  }

  .reel-grid {
    gap: 22px;
  }

  .reel-card {
    max-width: 100%;
  }

  .card.quote {
    flex: 0 0 300px;
    padding: 22px 24px;
  }

  .quote-text {
    font-size: 17px;
  }

  .supporter-strip {
    gap: 0;
    margin-top: 28px;
  }

  .supporter-logo {
    min-height: 100px;
  }

  .supporter-logo img {
    max-height: 60px;
  }

  .section-label {
    font-size: 15px;
    letter-spacing: 0;
  }

  .terms-note {
    font-size: 12px;
    line-height: 1.55;
  }
}

/* Prevent iOS Safari auto-zoom + larger tap targets */
@media (max-width: 979px) {

  .dt-input,
  .phone-cc,
  input,
  textarea,
  select {
    font-size: 16px;
  }

  .dt-input,
  .phone-cc {
    height: 52px;
  }

  .btn-next-s,
  .btn-pay,
  .btn-back-s {
    height: 52px;
    font-size: 15px;
  }

  .book-actions {
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Marquees are content carriers, not decorative motion. The universal rule
     above flattens them to a single 0.01ms iteration, which leaves the track
     parked at translate(-distance) — content scrolls off-screen and never
     comes back. Re-enable the looping animation here so reduce-motion users
     still see the testimonials and hero pills. The shimmer/rise effects
     elsewhere remain suppressed. */
  .track {
    animation: marquee var(--marquee-duration, 60s) linear infinite !important;
    animation-iteration-count: infinite !important;
    animation-duration: var(--marquee-duration, 60s) !important;
  }

  .hero-trust-row {
    animation: trust-marquee var(--trust-duration, 20s) linear infinite !important;
    animation-iteration-count: infinite !important;
    animation-duration: var(--trust-duration, 20s) !important;
  }

}

@media print {

  #nav,
  .footer-social,
  .booking-form-column,
  #sheet-backdrop,
  .mobile-book-cta,
  .reel-grid,
  .therapist-nav-btns,
  .testimonial-immersive {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  a {
    color: black;
    text-decoration: underline;
  }
}

@media (pointer: coarse) {

  .nav-links a,
  .footer-links a,
  .reel-btn,
  .t-nav-btn,
  .sub-nav-btn,
  .cal-nav,
  .panel-link,
  .nav-book-link,
  .advisor-link,
  .skip-link {
    min-height: 44px;
  }

  .faq-s-q {
    min-height: 48px;
  }

  .focus-panel {
    -webkit-tap-highlight-color: rgba(91, 75, 219, 0.08);
  }
}

/* =============================================================
   BOOKING MODAL — desktop (>=980px)
   The panel is opened from the hero CTA / any "Match your therapist"
   link. openBookingSheet() reparents .hero-right to <body>, so these
   rules must not assume it still sits inside .hero.
   Mobile (<=979px) keeps its own bottom-sheet rules further down.
   ============================================================= */
@media (min-width: 980px) {
  .hero-right {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.24s var(--ease),
      visibility 0.24s var(--ease);
  }

  .hero-right.sheet-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .booking-form-column {
    width: 100%;
    max-width: 580px;
    /* Definite height, not just a cap: with an auto height the panel sized
       to ~630px and left the last option clipped under the action bar
       while 160px of viewport sat unused. */
    height: min(88vh, 780px);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    transform: translateY(12px) scale(0.985);
    transition: transform 0.28s var(--ease);
  }

  .hero-right.sheet-open .booking-form-column {
    transform: none;
  }

  /* The panel header carries the title + close control, so the in-body
     heading would be a duplicate (same reasoning as the mobile sheet). */
  .sheet-handle-bar {
    display: flex;
  }

  .booking-top-intro h2 {
    display: none;
  }

  .booking-inner {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* The sticky action bar supplies the bottom padding instead. */
    padding-bottom: 0;
  }

  /* The panel header already says "Book Your First Session", and each step
     states its own question — the standing subtitle just repeated the step
     title verbatim. */
  #booking-subtitle {
    display: none;
  }

  /* The step type scale was set for a full hero column. Inside a 580px
     modal a 36px title wrapped to two lines and pushed half the options
     below the fold, so it is retuned to the panel. */
  .step-title {
    font-size: 22px;
    line-height: 1.22;
  }

  .step-kicker {
    font-size: 13px;
  }

  .step-desc {
    font-size: 13px;
  }

  .booking-header-zone {
    gap: 10px;
  }

  .booking-inner {
    gap: 14px;
  }

  .step-header-area {
    gap: 2px;
  }

  /* Without this the primary action sits below the fold on a 900px-tall
     window: you had to scroll the panel to find "Next". */
  .booking-steps-container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .book-step.active {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .book-step.active .book-actions {
    position: sticky;
    bottom: 0;
    /* auto top margin pins the action bar to the bottom of the panel on
       short steps; sticky handles the tall, scrolling ones. */
    margin: auto -24px 0;
    padding: 14px 24px 18px;
    background: #fff;
    border-top: 1px solid var(--line-warm);
    z-index: 5;
  }

  body.sheet-open {
    overflow: hidden;
  }

  body.sheet-fixed {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
  }
}

/* =============================================================
   PRIMARY BUTTON — one style, three places
   The header CTA, the hero CTA and the booking dialog's Next are the
   same action, so they read identically: ink fill, reduced radius, and
   equal padding on all four sides. Declared last so it outranks the
   per-component rules above.
   ============================================================= */
.nav-book-link,
.mobile-book-cta,
.btn-next-s {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 0;
  padding: 16px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: none;
  transition: background 0.2s var(--ease);
  cursor: pointer;
}

.nav-book-link:hover,
.mobile-book-cta:hover,
.btn-next-s:hover:not(:disabled) {
  background: var(--ink-2);
  transform: none;
  box-shadow: none;
}

.nav-book-link:focus-visible,
.mobile-book-cta:focus-visible,
.btn-next-s:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.btn-next-s:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* The nav sits in a 76px bar, so it takes the same treatment one step down. */
.nav-book-link {
  padding: 12px;
  font-size: 13.5px;
  white-space: nowrap;
}

/* Price sits under the CTA as an objection-handler, not as a display
   number mid-hero. It rides .hero-cta-row's entrance, so it adds no new
   opening transition. */
.hero-price-note {
  margin-top: -2px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
  letter-spacing: 0;
}

.hero-price-note strong {
  color: var(--ink);
  font-weight: 600;
}

/* The odometer hook (.hp-price) still carries the old 44px serif hero-price
   sizing. Under the CTA the figure is supporting copy, so it takes the note's
   own type — tabular-nums stays, or the digits jitter horizontally mid-roll. */
.hero-price-note .hp-price {
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  letter-spacing: inherit;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   SCROLLBARS — one treatment everywhere
   Thumb only: the track, the stepper buttons and the corner are all
   transparent, so what you see is just the scrubber. The thumb is a
   translucent tint of the brown used on the booking frame, so it reads
   correctly on both the paper ground and the white panels rather than
   the OS default grey.

   Horizontal carousels (.therapist-scroll-track, and any other rule that
   sets scrollbar-width:none) keep their own hidden bars — they are driven
   by arrow buttons and a visible bar there would be noise.
   ============================================================= */
:root {
  --scrollbar-thumb: rgba(74, 52, 40, 0.3);
  --scrollbar-thumb-hover: rgba(74, 52, 40, 0.48);
}

/* scrollbar-color inherits; scrollbar-width does NOT, so the colour comes
   from html and the width is applied universally. The universal selector is
   (0,0,0), so any class that opts out (e.g. .therapist-scroll-track's
   scrollbar-width:none) still wins. */
html {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

* {
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: transparent;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 999px;
  /* Transparent border + padding-box clip insets the thumb so it floats
     rather than filling the gutter edge to edge. */
  border: 3px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/* Kill the arrow buttons at each end. */
::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* =============================================================
   HERO SCALE — desktop
   The hero is a full viewport section now, so the content was sitting
   small in a lot of air. Everything steps up together (headline, badge,
   chips, CTA, price, care note, stats) and the measure widens to match,
   so the proportions hold rather than just the type growing.
   Declared last so it outranks the base sizes above.
   ============================================================= */
@media (min-width: 980px) {
  .hero-container {
    max-width: 1040px;
  }

  .hero-left {
    gap: 18px;
  }

  h1.hero-h1 {
    font-size: clamp(42px, 4.4vw, 62px);
    line-height: 1.05;
  }

  .next-slot-badge {
    font-size: 18px;
    gap: 12px;
    padding: 10px 0;
  }

  .hero-trust-row {
    gap: 18px;
  }

  .trust-pill {
    padding: 11px 20px;
    font-size: 15px;
    gap: 10px;
  }

  .trust-icon {
    width: 16px;
    height: 16px;
  }

  .mobile-book-cta {
    padding: 20px;
    font-size: 17.5px;
  }

  .hero-price-note {
    font-size: 15px;
  }

  .hero-care-note {
    gap: 16px;
    padding: 18px 0;
  }

  .hero-care-note p {
    font-size: 16.5px;
    max-width: 480px;
  }

  .hero-avatar-stack img {
    width: 46px;
    height: 46px;
  }

  .hero-session-strip {
    padding: 26px 0;
  }

  .hero-session-strip strong {
    font-size: clamp(46px, 4vw, 62px);
  }

  .hero-session-strip > div > span {
    font-size: 14.5px;
  }
}

/* =============================================================
   DIALOG + HERO ADJUSTMENTS
   ============================================================= */

/* 1. "Step n of 5" duplicated the progress dots directly above it. */
.step-kicker {
  display: none;
}

@media (min-width: 980px) {
  /* 2. The panel no longer scrolls: it sizes to its content, and the
     overlay behind it takes any overflow on short viewports. The step-2
     topic list keeps its own cap so a 14-row step cannot make the panel
     taller than the screen. */
  .hero-right {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .booking-form-column {
    height: auto;
    max-height: none;
  }

  .booking-inner {
    overflow-y: visible;
    overscroll-behavior: auto;
  }

  .book-step.active .book-actions {
    position: static;
    margin: 18px -24px 0;
  }

  /* 4. Previous step-up overshot; this pulls the scale back about a third
     of the way toward the original. */
  .hero-container {
    max-width: 1000px;
  }

  h1.hero-h1 {
    font-size: clamp(40px, 4vw, 56px);
    max-width: 780px;
    margin-inline: auto;
  }

  .next-slot-badge {
    font-size: 17px;
  }

  .hero-trust-wrapper {
    max-width: 760px;
    margin-inline: auto;
  }

  .trust-pill {
    padding: 10px 18px;
    font-size: 14px;
  }

  .mobile-book-cta {
    padding: 18px;
    font-size: 16.5px;
  }

  .hero-price-note {
    font-size: 14.5px;
  }

  .hero-care-note p {
    font-size: 15.5px;
  }

  .hero-avatar-stack img {
    width: 44px;
    height: 44px;
  }

  .hero-session-strip strong {
    font-size: clamp(44px, 3.7vw, 56px);
  }

  .hero-session-strip > div > span {
    font-size: 14px;
  }
}


/* =============================================================
   MOBILE HERO
   Matches the desktop treatment: full-height section, centred column,
   intro video leading above the headline. The mobile header is 64px
   (not the desktop 76px), so the height calc differs.
   ============================================================= */
@media (max-width: 979px) {
  .hero {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    padding: 24px 16px 28px;
  }

  .hero-container {
    width: 100%;
    align-items: center;
  }

  .hero-left {
    align-items: center;
    text-align: center;
    gap: 16px;
  }

  h1.hero-h1 {
    font-size: clamp(30px, 8.4vw, 40px);
    line-height: 1.08;
    max-width: 18ch;
    margin-inline: auto;
  }

  .next-slot-badge {
    font-size: 15px;
    justify-content: center;
  }

  .hero-cta-row {
    align-items: center;
  }

  .hero-price-note {
    text-align: center;
  }

  .hero-care-note {
    justify-content: center;
  }

  /* Video leads the column. Everything after it carries an explicit order
     in the block above, so a negative order keeps it first regardless. */
  .hero-intro-video {
    order: -1;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 14px 36px rgba(10, 10, 18, 0.14);
  }
}

/* Video chrome — quieter than the bordered box it replaces. */
.hero-intro-video {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(10, 10, 18, 0.1);
}

.hero-video-toggle {
  left: 10px;
  bottom: 10px;
  min-height: 36px;
  padding: 0 14px 0 10px;
  gap: 9px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(10, 10, 18, 0.18);
  font-size: 12.5px;
  border: 0;
}

.video-play-dot {
  background: var(--ink);
}

/* =============================================================
   MOBILE HERO
   Matches the desktop treatment: full-height section, centred column,
   intro video leading above the headline. The mobile header is 64px
   (not the desktop 76px), so the height calc differs.
   ============================================================= */
@media (max-width: 979px) {
  .hero {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    padding: 24px 16px 28px;
  }

  .hero-container {
    width: 100%;
    align-items: center;
  }

  .hero-left {
    align-items: center;
    text-align: center;
    gap: 16px;
  }

  h1.hero-h1 {
    font-size: clamp(30px, 8.4vw, 40px);
    line-height: 1.08;
    max-width: 18ch;
    margin-inline: auto;
  }

  .next-slot-badge {
    font-size: 15px;
    justify-content: center;
  }

  .hero-cta-row {
    align-items: center;
  }

  .hero-price-note {
    text-align: center;
  }

  .hero-care-note {
    justify-content: center;
  }

  /* Video leads the column and fills the measure. Everything after it
     carries an explicit order in the mobile-order block above, so a
     negative order keeps it first regardless of that. */
  .hero-intro-video {
    order: -1;
    width: 100%;
    max-width: 100%;
  }
}

/* =============================================================
   INTRO VIDEO DIALOG
   Same modal language as the booking panel: dimmed backdrop, centred
   shell, squared-off close control. Works at every width — the shell
   just tracks the viewport instead of switching to a sheet.
   ============================================================= */
.video-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 18, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.24s var(--ease-entrance),
    visibility 0.24s var(--ease-entrance);
}

.video-dialog-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.video-dialog-shell {
  position: relative;
  width: 100%;
  /* Derive the width cap from the available height so the 16:9 box always
     fits. Capping height instead just clipped the bottom of the picture,
     because the ratio box keeps its size and overflow:hidden hides the rest. */
  max-width: min(880px, calc((100vh - 140px) * 16 / 9));
  transform: translateY(12px) scale(0.985);
  transition: transform 0.28s var(--ease-entrance);
}

.video-dialog-backdrop.is-open .video-dialog-shell {
  transform: none;
}

.video-dialog-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.video-dialog-close {
  position: absolute;
  /* Plyr's wrapper creates its own stacking context inside the shell, so the
     close control has to be lifted above it or it disappears behind the
     player — which is exactly what happened on mobile, where the button sits
     inside the frame rather than above it. */
  z-index: 5;
  top: -46px;
  right: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}

.video-dialog-close:hover {
  background: rgba(255, 255, 255, 0.24);
}

.video-dialog-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

body.video-dialog-open {
  overflow: hidden;
}

/* On short/narrow screens the close control moves inside the frame — there
   is no room above it. */
@media (max-width: 640px), (max-height: 520px) {
  .video-dialog-backdrop {
    padding: 16px;
  }

  .video-dialog-close {
    top: 10px;
    right: 10px;
    background: rgba(10, 10, 18, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-dialog-backdrop,
  .video-dialog-shell {
    transition: none !important;
  }

  .video-dialog-shell {
    transform: none !important;
  }
}

/* The hero already carries the Anju intro (tile + dialog) on mobile, so the
   standalone brand-video section below it is the same film a second time.
   Desktop keeps it — there the hero tile is small and the section still
   earns its place. */
/* Redundant at every width now: the hero carries the intro film itself.
   JS relocates this section into the hero on mobile and tags it .in-hero
   (0,2,0), so the bare class selector alone loses the cascade. */
.brand-video-section,
.brand-video-section.in-hero {
  display: none;
}

/* =============================================================
   DESKTOP HERO — two columns
   Copy runs left on its own measure, the intro film sits right at full
   size and plays inline (no dialog above 980px). .hero-left becomes the
   grid: every child takes column 1, the video takes column 2 and spans
   the full height so it centres against the whole stack.
   ============================================================= */
@media (min-width: 980px) {
  .hero-container {
    max-width: 1300px;
  }

  /* The copy stays a flex column and simply reserves the right-hand gutter;
     the film is absolutely positioned into it. A grid span was the obvious
     move but `grid-row: 1 / -1` resolves against the EXPLICIT grid — with no
     grid-template-rows there is none, so the video occupied row 1 alone and
     inflated it to its own height, opening a ~380px void under the headline.
     Absolute positioning sidesteps that and does not care how many blocks
     the left column holds. */
  .hero-left {
    position: relative;
    padding-right: 716px;
    align-items: flex-start;
    text-align: left;
    gap: 13px;
    /* The film is absolutely positioned, so it contributes no height. This
       reserves it, otherwise a film taller than the copy would spill over
       the stats band underneath. */
    min-height: var(--hero-video-h);
    justify-content: center;
  }

  .hero-intro-video {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    /* Definite height (from the ratio) + auto block margins centres it
       without a transform, which would fight the softRise entrance. */
    margin-block: auto;
    width: 660px;
    max-width: 660px;
    /* Taller frame than the 16:9 source; .anju-video is object-fit:cover,
       so the sides crop and the centred subject is preserved. */
    height: var(--hero-video-h);
    aspect-ratio: auto;
  }

  /* Undo the centred treatment now that the column is left-aligned. */
  h1.hero-h1 {
    max-width: none;
    margin-inline: 0;
    font-size: clamp(38px, 3.4vw, 50px);
  }

  .next-slot-badge {
    justify-content: flex-start;
  }

  .hero-trust-wrapper {
    max-width: none;
    margin-inline: 0;
  }

  .hero-trust-row {
    justify-content: flex-start;
  }

  .hero-cta-row {
    align-items: flex-start;
  }

  .hero-price-note {
    text-align: left;
  }

  .hero-care-note {
    justify-content: flex-start;
    text-align: left;
  }

  .advisor-link-row {
    justify-content: flex-start;
    text-align: left;
  }

}

/* =============================================================
   BOOK DOCK — fixed bottom bar
   Mirrors the header: a fixed strip that fades into the page instead of
   sitting on a hard edge. The gradient runs from the paper ground up to
   transparent so content scrolls out under it rather than being cut off.
   Holds the primary CTA, styled identically to the hero and dialog ones.
   ============================================================= */
.book-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  padding: 44px 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(
    to top,
    var(--paper) 0%,
    var(--paper) 58%,
    rgba(250, 248, 243, 0) 100%
  );
  /* The bar itself must never swallow clicks on the content behind its
     transparent upper half. */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.28s var(--ease-entrance),
    transform 0.28s var(--ease-entrance),
    visibility 0.28s var(--ease-entrance);
}

.book-dock.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.floating-book-fab {
  /* Neutralise the legacy standalone-pill rules: the dock owns position
     now, and fabPulse re-applied translateX(-50%) every cycle, which with
     static positioning dragged the button half its width off-screen. */
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  animation: none;
  pointer-events: auto;
  width: 100%;
  max-width: 460px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 0;
  padding: 16px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}

.floating-book-fab:hover {
  background: var(--ink-2);
  transform: none;
  box-shadow: none;
}

.floating-book-fab:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* The old standalone-pill rules positioned the button itself; the dock owns
   position now, so neutralise them wherever they still apply. */
.floating-book-fab.is-visible {
  position: static;
  transform: none;
  animation: none;
}

/* The booking sheet already covers the screen; the dock underneath it would
   only show its gradient edge. */
body.sheet-open .book-dock {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .book-dock {
    transition: none !important;
    transform: none !important;
  }
}

/* =============================================================
   HERO VIDEO PLAY CONTROL
   Replaces the bottom-left "Watch Anju's intro" pill with a centred
   white play button. The label text is hidden rather than removed —
   the button keeps its aria-label, so the control is still announced.
   ============================================================= */
.hero-video-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  min-height: 0;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 24px rgba(10, 10, 18, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.22s var(--ease),
    background 0.22s var(--ease);
}

.hero-video-toggle:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

.hero-video-toggle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* The text label is the only unclassed span in the button. */
.hero-video-toggle span:not(.video-play-dot) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The dot becomes the play glyph: a CSS triangle, nudged right so it reads
   optically centred inside the circle. */
.video-play-dot {
  width: 0;
  height: 0;
  border-radius: 0;
  background: transparent;
  border-left: 20px solid var(--ink);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  margin-left: 6px;
}

@media (max-width: 979px) {
  .hero-video-toggle {
    width: 62px;
    height: 62px;
  }

  .video-play-dot {
    border-left-width: 16px;
    border-top-width: 10px;
    border-bottom-width: 10px;
    margin-left: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-toggle,
  .hero-video-toggle:hover {
    transition: none !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* =============================================================
   HEADER — button scale + mobile logo
   ============================================================= */
.nav-book-link {
  padding: 15px 20px;
  font-size: 15px;
}

@media (max-width: 979px) {
  /* The wordmark was 38px against a 64px bar — too dominant next to the CTA
     now that the button carries more weight. */
  .logo img {
    height: 28px;
  }

  .nav-book-link {
    padding: 13px 16px;
    font-size: 14px;
  }
}

/* =============================================================
   HERO STATS BAND
   Lifted out of .hero-left (which reserves the right gutter for the film)
   so it runs the full hero measure, underneath both the copy and the video.
   ============================================================= */
:root {
  --hero-video-h: 528px;
}

@media (min-width: 980px) {
  .hero-container {
    row-gap: 26px;
  }

  .hero-session-strip {
    width: 100%;
    grid-column: 1 / -1;
  }
}

/* =============================================================
   PLYR
   Theming only, via Plyr's own custom properties. The dialog player gets
   NO layout CSS — Plyr's ratio wrapper sizes it and anchors the control
   bar. Overriding that wrapper is exactly what pushed the seek bar outside
   the player (so drags hit the backdrop and closed the dialog) and clipped
   the picture in fullscreen.

   The hero TILE is the one exception: it is a cropped 5:4 window onto a
   16:9 film, so its wrapper is forced to fill — and crucially the ratio
   padding is zeroed, otherwise the wrapper doubles in height and its auto
   margins push the picture up out of the frame.
   ============================================================= */
:root {
  --plyr-color-main: var(--ink);
  --plyr-video-background: #000;
  --plyr-video-control-color: #fff;
  --plyr-video-control-color-hover: #fff;
  --plyr-control-radius: 8px;
  --plyr-range-track-height: 4px;
  --plyr-range-thumb-height: 13px;
  --plyr-control-spacing: 11px;
  --plyr-font-family: var(--sans);
  --plyr-font-size-small: 12px;
  --plyr-font-size-base: 13px;
  --plyr-tooltip-background: var(--ink);
  --plyr-tooltip-color: #fff;
  --plyr-tooltip-radius: 6px;
  --plyr-video-controls-background: linear-gradient(
    transparent,
    rgba(10, 10, 18, 0.75)
  );
}

.video-dialog-shell .plyr {
  border-radius: 14px;
  overflow: hidden;
}

/* Hero tile: cropped fill. */
.hero-intro-video .plyr {
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: inherit;
}

.hero-intro-video .plyr__video-wrapper {
  height: 100%;
  width: 100%;
  padding-bottom: 0 !important;
  aspect-ratio: auto !important;
  margin: 0;
  position: relative;
}

.hero-intro-video .plyr video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-intro-video .plyr__control--overlaid {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  border: 0;
  padding: 20px;
}