@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

:root {
  /* ── COLOR SYSTEM ── */
  --color-bg:           #F7F2EA;   /* warm off-white — default page background */
  --color-surface:      #FDFAF5;   /* cards, elevated containers */
  --color-surface-warm: #EDE0CC;   /* testimonial sections, warm emphasis */
  --color-text:         #2C1F0E;   /* primary body text — deep umber */
  --color-text-secondary: #6B4C2A; /* secondary text, descriptions */
  --color-text-muted:   #6E6355;  /* WCAG AA: 5.3:1 on --color-bg */   /* labels, hints, timestamps */
  --color-accent:       #437260;   /* sage green — CTAs, active states, eyebrows. WCAG AA: 4.94:1 as text on --color-bg; white-on-accent 5.51:1 */
  --color-accent-dark:  #325549;   /* hover state for accent */
  --color-logo:         #394742;   /* deep green from the logo mark — section headings */
  --color-logo-pale:    #EEF2F0;   /* very light tint of the logo green */
  --color-gold:         #C4A882;   /* warm gold — highlights, borders, tertiary accent (never used as text) */
  --color-border:       #D4C4A8;
  --color-border-light: rgba(212, 196, 168, 0.6);   /* decorative borders — cards, dividers, rules */
  --color-border-strong: #9E855C;  /* interactive control boundaries (form fields) — WCAG 1.4.11: 3.16:1 on --color-bg, 3.38:1 on --color-surface */
  --color-dark:         #1A2535;   /* dark navy — hero backgrounds, dark sections, footer */
  --color-dark-warm:    #2A2420;   /* warm charcoal — Counselling page ONLY */

  /* ── LEGACY COMPATIBILITY ALIASES ── */
  --color-earth-900:    var(--color-text);
  --color-earth-800:    #4A3520;
  --color-earth-700:    var(--color-text-secondary);
  --color-earth-500:    var(--color-text-muted);
  --color-earth-300:    var(--color-gold);
  --color-earth-100:    var(--color-surface-warm);
  --color-earth-50:     var(--color-bg);
  --color-accent-light:  #7BAE9E;
  --color-accent-pale:   #D4E8E3;
  --color-surface-alt:   var(--color-surface-warm);
  --color-border-subtle: var(--color-surface-warm);
  --color-text-primary:   var(--color-text);
  --color-text-inverse:   var(--color-bg);

  /* ── TYPOGRAPHY ── */
  /* Single typeface across the site — Poppins, matching the logo */
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Poppins has a high x-height and reads larger than the previous serif.
     Scale is a ~1.25 modular ladder capped for Poppins: 22/28/36/48/56.
     One fixed scale for every page — do not override per-page. */
  --text-display-2xl: clamp(2.375rem, 1.75rem + 2.8vw, 3.5rem);  /* 38px → 56px */
  --text-display-xl:  clamp(2rem, 1.6rem + 1.8vw, 3rem);         /* 32px → 48px */
  --text-display-lg:  clamp(1.7rem, 1.42rem + 1.25vw, 2.25rem);  /* 27px → 36px */
  --text-display-md:  clamp(1.45rem, 1.28rem + 0.75vw, 1.75rem); /* 23px → 28px */
  --text-display-sm:  clamp(1.2rem, 1.13rem + 0.3vw, 1.375rem);  /* 19px → 22px */

  --text-body-lg:  1.125rem; /* 18px — Poppins optical equivalent of old 20px */
  --text-body-md:  1rem;     /* 16px */
  --text-body-sm:  0.875rem; /* 14px */
  --text-label-lg: 0.875rem; /* 14px */
  --text-label-sm: 0.75rem;  /* 12px */

  --leading-tight:  1.2;     /* 1.2 for display text */
  --leading-snug:   1.35;
  --leading-normal: 1.6;     /* 1.6 for body text */
  --leading-loose:  1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.1em;

  /* ── SPACING SYSTEM ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 240px;

  /* Section spacing aliases used by page-level compositions.
     Keep these as clamp() values so long pages stay breathable on desktop
     without creating oversized gaps on mobile. */
  --section-padding-sm: clamp(var(--space-6), 5vw, var(--space-8));
  --section-padding-md: clamp(var(--space-7), 7vw, var(--space-9));
  --section-padding: clamp(var(--space-8), 8vw, var(--space-10));
  --section-padding-lg: clamp(var(--space-9), 10vw, var(--space-11));
  --section-padding-xl: clamp(var(--space-10), 12vw, var(--space-12));

  /* ── BORDER RADIUS ── */
  --radius-xs: 4px;
  --radius-sm: 8px;    /* workhorse — cards, buttons, inputs */
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px; /* true circles & pills — avatars, dots, bars */
  --radius-pill: 999px;

  /* ── ANIMATION & MOTION ── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* ── STATE COLORS (AA on --color-bg and --color-surface) ── */
  --color-success:      #356E4F;
  --color-success-soft: #E2EDE6;
  --color-warning:      #7A5115;
  --color-warning-soft: #F3E8D3;
  --color-error:        #96412A;
  --color-error-soft:   #F5E2DA;

  /* ── ELEVATION (warm umber shadows, never pure black) ── */
  --shadow-xs: 0 1px 2px rgba(44, 31, 14, 0.05);
  --shadow-sm: 0 4px 14px rgba(44, 31, 14, 0.06);
  --shadow-md: 0 10px 30px rgba(44, 31, 14, 0.07);
  --shadow-lg: 0 16px 40px rgba(44, 31, 14, 0.10);
}

/* ── HINDI (Devanagari) TYPE ADJUSTMENTS ──
   Poppins has no Devanagari glyphs, so Hindi falls back to a system
   Devanagari face that renders visibly larger and heavier than Poppins at
   the same px. Scale the whole type ladder down ~11% for lang="hi" so the
   Hindi pages read at the same optical weight as English, and give display
   headings a touch more line-height so upper/lower matras don't crowd. */
html[lang="hi"] {
  --text-display-2xl: clamp(2.1rem, 1.55rem + 2.5vw, 3.1rem);
  --text-display-xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.6rem);
  --text-display-lg:  clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --text-display-md:  clamp(1.3rem, 1.15rem + 0.65vw, 1.55rem);
  --text-display-sm:  clamp(1.08rem, 1.02rem + 0.28vw, 1.22rem);

  --text-body-lg:  1rem;      /* 16px */
  --text-body-md:  0.9rem;    /* ~14.4px */
  --text-body-sm:  0.8rem;    /* ~12.8px */
  --text-label-lg: 0.8rem;
  --text-label-sm: 0.7rem;

  --leading-tight: 1.3;       /* extra room for Devanagari matras in headings */
}

/* Hindi headings previously sat at 400 on the theory that the Devanagari
   fallback reads heavier than Poppins. In practice they read lighter than the
   Latin pages, which set headings at 500 — so carry Hindi headings above that
   to restore the hierarchy.

   !important is deliberate and load-bearing here: most headings in the page
   markup carry an inline font-weight (h1/h2 at 400, h3–h5 at 500) tuned for
   Poppins, and inline styles beat any selector. Without it this rule would
   silently miss the majority of Hindi headings. Scoped to lang="hi", so the
   Latin pages keep their inline weights untouched. */
html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3,
html[lang="hi"] h4,
html[lang="hi"] h5 {
  font-weight: 600 !important;
}

/* The ~9% downscale above is right for running text and headings, where the
   Devanagari fallback does render larger. It is wrong at label sizes: most of
   a Devanagari glyph's height sits in the matras above and below, so the
   letterform core is proportionally smaller than Latin and the nav ended up
   visibly undersized next to the Latin wordmark. Hold the header/footer
   chrome at the same absolute sizes every other language uses. */
html[lang="hi"] .nav-link {
  font-size: 0.875rem;         /* = default --text-label-lg (14px) */
}
html[lang="hi"] .dropdown-item {
  font-size: 0.875rem;         /* = default --text-body-sm (14px) */
}
html[lang="hi"] .dropdown-item-hint {
  font-size: 0.75rem;          /* = default --text-label-sm (12px) */
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  background-color: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, picture, svg {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Page Mount Fade-in */
.fade-in > main {
  animation: fadeIn var(--duration-slow) var(--ease-decelerate) forwards;
}

.fade-in > .header-nav {
  animation: headerFadeIn var(--duration-slow) var(--ease-decelerate) forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes headerFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── LAYOUT & CONTAINER ── */
/* ── CONTAINER WIDTH SCALE ──
   One standardized set of section widths. Prefer these tokens (or the
   .container--* modifiers) over ad-hoc inline max-width values so section
   edges stay aligned down the page. */
:root {
  --w-narrow:  560px;   /* forms, single CTAs, tight centered callouts */
  --w-text:    760px;   /* reading / text-led sections (~68ch at 18px) */
  --w-content: 1040px;  /* multi-column, cards, media rows */
  --w-wide:    1200px;  /* full-width composed sections, galleries */
}

.container {
  width: 100%;
  max-width: var(--w-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.container--narrow  { max-width: var(--w-narrow); }
.container--text    { max-width: var(--w-text); }
.container--content { max-width: var(--w-content); }
.container--wide    { max-width: var(--w-wide); }

@media (min-width: 768px) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* Default rhythm for bare <section>s (homepage, About). A low vw coefficient
   keeps the padding from ballooning on wide screens — where two stacked
   sections would otherwise double into a ~190px gap — while staying capped at
   a consistent --space-7 so the rhythm reads even. Pages that set their own
   section padding are unaffected. */
section {
  padding-top: clamp(var(--space-6), 3vw, var(--space-7));
  padding-bottom: clamp(var(--space-6), 3vw, var(--space-7));
}

.asymmetric-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 1024px) {
  .asymmetric-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-8);
  }
  .asymmetric-grid.reverse {
    grid-template-columns: 1fr 1.4fr;
  }
}

/* ── TYPOGRAPHY STYLES ── */
h1, h2, h3, h4, .font-serif {
  font-family: var(--font-display);
  /* Poppins needs medium weight at display sizes — 400 reads thin and
     flattens the hierarchy the serif used to carry */
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-earth-800);
  letter-spacing: var(--tracking-tight);
}

h1 {
  font-size: var(--text-display-md); /* 34px */
}

@media (min-width: 768px) {
  h1 {
    font-size: var(--text-display-lg); /* 44px */
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: var(--text-display-xl); /* 56px */
  }
}

h2 {
  font-size: var(--text-display-md);
  color: var(--color-logo);
}

@media (min-width: 768px) {
  h2 {
    font-size: var(--text-display-lg);
  }
}

h3 {
  font-size: var(--text-display-sm);
  font-weight: 500;
  color: var(--color-logo);
}

@media (min-width: 768px) {
  h3 {
    font-size: var(--text-display-md);
  }
}

p {
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

p.lead {
  font-size: var(--text-body-lg);
  line-height: 1.55; /* body text needs ≥1.5 for comfortable reading */
  color: var(--color-text-secondary);
}

p.muted {
  color: var(--color-text-muted);
}

.section-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  /* accent (#4A7C6F) on cream is 4.28:1 — just under AA for small text.
     accent-dark reads 7.44:1. Dark heroes override with accent-light. */
  color: var(--color-accent-dark);
  margin-bottom: var(--space-3);
  display: block;
}

/* Optional leading icon inside a section eyebrow. Switches the label to an
   inline flex row so the glyph and text share a baseline-like alignment. */
.section-eyebrow:has(> [data-lucide]) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.section-eyebrow > [data-lucide] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke-width: 2;
}

/* ── Programme detail section primitives ──────────────────────────────
   Reusable composition rules for long-form programme pages. */
.programme-intro-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--space-8);
  align-items: center;
}
.programme-section-guide {
  position: fixed;
  top: 50%;
  right: max(24px, calc((100vw - var(--w-wide)) / 2 - 126px));
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-border);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--duration-base) var(--ease-standard), visibility var(--duration-base) var(--ease-standard);
}
.programme-section-guide.is-visible { visibility: visible; opacity: 1; }
.programme-section-guide__label {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.programme-section-guide a {
  position: relative;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  padding: 5px 0;
  transition: color var(--duration-base) var(--ease-standard);
}
.programme-section-guide a::before {
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--space-3) - 1px);
  width: 2px;
  height: 0;
  background: var(--color-accent);
  content: '';
  transform: translateY(-50%);
  transition: height var(--duration-base) var(--ease-standard);
}
.programme-section-guide a:hover { color: var(--color-accent-dark); }
.programme-section-guide a[aria-current="true"] { color: var(--color-accent-dark); font-weight: 700; }
.programme-section-guide a[aria-current="true"]::before { height: 16px; }
@media (max-width: 1440px) {
  .programme-section-guide { right: 32px; }
}
.programme-overview { padding-top: var(--space-7); padding-bottom: var(--section-padding-sm); }
.programme-overview .section-eyebrow { margin-bottom: var(--space-3); }
.programme-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: var(--space-6) 0; background: var(--color-border); border: 1px solid var(--color-border); }
.programme-fact { background: var(--color-logo-pale); padding: var(--space-4); }
.programme-fact dt { color: var(--color-text-muted); font-size: var(--text-label-sm); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-bottom: var(--space-1); }
.programme-fact dd { color: var(--color-text-primary); font-size: var(--text-body-sm); font-weight: 600; margin: 0; }
.programme-practitioner-note { border-left: 2px solid var(--color-accent); padding-left: var(--space-4); margin: var(--space-6) 0 0; }
.programme-practitioner-note p { font-family: var(--font-display); font-size: 17px; font-style: italic; color: var(--color-text-secondary); line-height: var(--leading-loose); margin-bottom: 0; }
.programme-profile-section { background: linear-gradient(135deg, var(--color-accent-pale), var(--color-bg)); padding: var(--space-7) 0 var(--space-8); border-top: 1px solid var(--color-border-subtle); }
.programme-profile-section .assessment-card { margin: var(--space-5) auto 0; }
.sleep-recognition { padding: var(--section-padding-md) 0; }
.sleep-recognition__intro { max-width: var(--w-text); margin: 0 auto; }
.sleep-recognition__intro h2 { font-family: var(--font-display); font-size: var(--text-display-md); font-weight: 400; line-height: var(--leading-tight); color: var(--color-text-primary); margin-bottom: var(--space-3); }
.sleep-recognition__intro > p { max-width: 680px; color: var(--color-text-secondary); font-size: var(--text-body-lg); margin-bottom: 0; }
.sleep-recognition__patterns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); max-width: var(--w-wide); margin: var(--space-7) auto 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.sleep-recognition__patterns p { display: grid; gap: var(--space-2); padding: var(--space-5) 0; margin: 0; color: var(--color-text-secondary); font-size: var(--text-body-sm); line-height: var(--leading-normal); }
.sleep-recognition__patterns p + p { border-left: 1px solid var(--color-border); padding-left: var(--space-5); }
.sleep-recognition__patterns strong { color: var(--color-accent-dark); font-size: var(--text-label-sm); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.stress-hero { min-height: min(76vh, 720px); }
.posture-hero { min-height: min(76vh, 720px); }
.metabolism-hero { min-height: min(76vh, 720px); }
.meditation-hero { min-height: min(76vh, 720px); }
.meditation-hero .programme-hero-heading { max-width:650px; margin-bottom:var(--space-5); }
.meditation-hero .programme-hero-heading em { display:block; margin-top:var(--space-1); }
@media (min-width:1024px) { .meditation-hero .programme-hero-heading { font-size:clamp(48px,4.35vw,60px); } }
.stress-hero .programme-hero-heading { max-width: 690px; margin-bottom: var(--space-5); }
.stress-hero .programme-hero-heading em { display: block; margin-top: var(--space-1); }
@media (min-width: 1024px) {
  .stress-hero .programme-hero-heading { font-size: clamp(48px, 4.35vw, 60px); }
}
.stress-recognition { background: linear-gradient(135deg, var(--color-accent-pale), var(--color-bg)); border-top: 1px solid var(--color-border-subtle); padding: var(--section-padding-md) 0; }
.stress-recognition__intro { max-width: var(--w-text); margin: 0 auto; }
.stress-recognition__intro h2 { font-family: var(--font-display); font-size: var(--text-display-md); font-weight: 400; line-height: var(--leading-tight); color: var(--color-text-primary); margin-bottom: var(--space-3); }
.stress-recognition__intro > p { max-width: 700px; color: var(--color-text-secondary); font-size: var(--text-body-lg); margin-bottom: 0; }
.stress-recognition__patterns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); max-width: var(--w-wide); margin: var(--space-7) auto 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.stress-recognition__patterns p { display: grid; gap: var(--space-2); padding: var(--space-5) 0; margin: 0; color: var(--color-text-secondary); font-size: var(--text-body-sm); line-height: var(--leading-normal); }
.stress-recognition__patterns p + p { border-left: 1px solid var(--color-border); padding-left: var(--space-5); }
.stress-recognition__patterns strong { color: var(--color-accent-dark); font-size: var(--text-label-sm); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.stress-phase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: var(--space-7); background: var(--color-border); border: 1px solid var(--color-border); }
.stress-phase-grid--three { grid-template-columns: repeat(3, 1fr); }
.stress-phase-grid article { background: var(--color-bg); padding: var(--space-5); }
.stress-phase-grid span { display: block; color: var(--color-accent-dark); font-size: var(--text-label-sm); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-bottom: var(--space-3); }
.stress-phase-grid h3 { font-family: var(--font-display); font-size: var(--text-display-sm); font-weight: 400; color: var(--color-text-primary); margin-bottom: var(--space-2); }
.stress-phase-grid p { color: var(--color-text-secondary); font-size: var(--text-body-sm); line-height: var(--leading-normal); margin: 0; }
.posture-hero { min-height: min(76vh, 720px); }
.posture-hero .programme-hero-heading { max-width: 690px; margin-bottom: var(--space-5); }
.posture-hero .programme-hero-heading em { display: block; margin-top: var(--space-1); }
.posture-recognition { background: linear-gradient(135deg, var(--color-accent-pale), var(--color-bg)); border-top: 1px solid var(--color-border-subtle); padding: var(--section-padding-md) 0; }
.posture-recognition__intro { max-width: var(--w-text); margin: 0 auto; }
.posture-recognition__intro h2 { font-family: var(--font-display); font-size: var(--text-display-md); font-weight: 400; line-height: var(--leading-tight); color: var(--color-text-primary); margin-bottom: var(--space-3); }
.posture-recognition__intro > p { max-width: 700px; color: var(--color-text-secondary); font-size: var(--text-body-lg); margin-bottom: 0; }
.posture-recognition__patterns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); max-width: var(--w-wide); margin: var(--space-7) auto 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.posture-recognition__patterns p { display: grid; gap: var(--space-2); padding: var(--space-5) 0; margin: 0; color: var(--color-text-secondary); font-size: var(--text-body-sm); line-height: var(--leading-normal); }
.posture-recognition__patterns p + p { border-left: 1px solid var(--color-border); padding-left: var(--space-5); }
.posture-recognition__patterns strong { color: var(--color-accent-dark); font-size: var(--text-label-sm); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.posture-closing { background: var(--color-dark); border-top: 1px solid rgba(247, 242, 234, 0.14); padding: var(--space-8) 0; text-align: center; }
.posture-closing__inner { max-width: 680px; }
.posture-closing .section-eyebrow { color: var(--color-accent-light); margin-bottom: var(--space-3); }
.posture-closing h2 { font-family: var(--font-display); font-size: var(--text-display-md); font-weight: 400; line-height: var(--leading-tight); color: var(--color-bg); margin-bottom: var(--space-3); }
.posture-closing p { color: rgba(247, 242, 234, 0.72); font-size: var(--text-body-md); line-height: var(--leading-normal); margin: 0 auto var(--space-6); max-width: 560px; }
.metabolism-recognition { background: linear-gradient(135deg, var(--color-accent-pale), var(--color-bg)); padding: var(--section-padding-md) 0; }
.metabolism-recognition__intro { max-width: var(--w-text); margin: 0 auto; }.metabolism-recognition h2 { font-family: var(--font-display); font-size: var(--text-display-md); font-weight: 400; line-height: var(--leading-tight); margin-bottom: var(--space-3); }.metabolism-recognition__intro > p { max-width: 700px; color: var(--color-text-secondary); font-size: var(--text-body-lg); }.metabolism-recognition__patterns { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); max-width:var(--w-wide); margin:var(--space-7) auto 0; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }.metabolism-recognition__patterns p { display:grid; gap:var(--space-2); padding:var(--space-5) 0; margin:0; color:var(--color-text-secondary); font-size:var(--text-body-sm); }.metabolism-recognition__patterns p+p { border-left:1px solid var(--color-border); padding-left:var(--space-5); }.metabolism-recognition__patterns strong { color:var(--color-accent-dark); font-size:var(--text-label-sm); letter-spacing:var(--tracking-wider); text-transform:uppercase; }
.programme-method-section { background-color: var(--color-surface); border-top: 1px solid var(--color-border-subtle); padding-top: var(--section-padding-sm); padding-bottom: var(--space-6); }
.programme-timeline-section { background-color: var(--color-surface); }
.programme-investment-section { background-color: var(--color-logo-pale); }
.programme-investment-preview { background: var(--color-dark); padding: var(--space-7) 0; }
.programme-investment-preview__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-6); max-width: var(--w-text); }
.programme-investment-preview .section-eyebrow, .programme-investment-preview h2 { color: var(--color-bg); }
.programme-investment-preview p { color: rgba(247, 242, 234, 0.72); margin: var(--space-2) 0 0; }
.programme-investment-preview__price { text-align: right; }
.programme-investment-preview__price strong { color: var(--color-accent-light); display: block; font-family: var(--font-display); font-size: var(--text-display-md); font-weight: 400; }
.programme-investment-preview__price a { display: inline-block; color: var(--color-bg); font-size: var(--text-body-sm); margin-top: var(--space-2); }
@media (max-width: 820px) {
  .programme-intro-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .programme-section-guide { display: none; }
  .programme-facts { grid-template-columns: 1fr; }
  .programme-investment-preview__inner { grid-template-columns: 1fr; }
  .programme-investment-preview__price { text-align: left; }
  .sleep-recognition__patterns { grid-template-columns: 1fr; gap: 0; margin-top: var(--space-6); }
  .sleep-recognition__patterns p { padding: var(--space-4) 0; }
  .sleep-recognition__patterns p + p { border-left: 0; border-top: 1px solid var(--color-border); padding-left: 0; }
  .stress-recognition__patterns { grid-template-columns: 1fr; gap: 0; margin-top: var(--space-6); }
  .stress-recognition__patterns p { padding: var(--space-4) 0; }
  .stress-recognition__patterns p + p { border-left: 0; border-top: 1px solid var(--color-border); padding-left: 0; }
  .stress-phase-grid { grid-template-columns: 1fr; }
  .stress-phase-grid--three { grid-template-columns: 1fr; }
  .posture-recognition__patterns { grid-template-columns: 1fr; gap: 0; margin-top: var(--space-6); }
  .posture-recognition__patterns p { padding: var(--space-4) 0; }
  .posture-recognition__patterns p + p { border-left: 0; border-top: 1px solid var(--color-border); padding-left: 0; }
}

/* Consistent disclosure behaviour across programme content. */
details > summary::marker,
details > summary::-webkit-details-marker { display: none; }
details summary i,
details summary svg { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
details[open] summary i,
details[open] summary svg { transform: rotate(180deg); }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard);
}

a:hover {
  color: var(--color-accent-dark);
}

/* ── GLOBAL HEADER & NAVIGATION ── */
.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid transparent;
  z-index: 100;
  transition: background-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

.header-nav.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--color-border-subtle);
  box-shadow: var(--shadow-sm); /* Subtle shadow using text primary color tone */
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  /* Match the body content width so the navbar aligns with the page below it.
     With the booking CTA removed, the menu (logo + 6 items + language switcher)
     fits on one line within this width. Below 1280px the hamburger drawer shows. */
  max-width: var(--w-wide);
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.logo-img {
  height: 52px;
  width: auto;
  display: block;
}

.logo-dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-accent);
  border-radius: 50%;
  margin-left: 2px;
  margin-top: 10px; /* Aligned visually */
  position: relative;
  display: inline-block;
}

.logo-dot-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: var(--color-accent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.logo:hover .logo-dot-glow {
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

.footer-logo {
  font-family: 'Freight Display Pro', var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.desktop-menu {
  display: none;
  align-items: center;
  gap: 16px;
}

/* Show the full horizontal menu only once it fits on one line; below this the
   hamburger drawer is used. The menu needs ~1256px (logo + 7 items + CTA +
   language switcher), so 1024px was too narrow and forced items to wrap. */
@media (min-width: 1280px) {
  .desktop-menu {
    display: flex;
  }
}

.nav-link {
  font-family: var(--font-body);
  font-size: var(--text-label-lg);
  font-weight: 500;
  color: var(--color-text-secondary);
  position: relative;
  padding: var(--space-2) 0;
  white-space: nowrap;
  transition: color var(--duration-base) var(--ease-standard);
}

/* Keep the CTA button and language label on a single line in the nav. */
.desktop-menu .btn,
.lang-switch span {
  white-space: nowrap;
}

/* Vertical divider setting the language switcher apart from the nav links. */
.desktop-menu .lang-switch {
  border-left: 1px solid var(--color-border);
  padding-left: 20px;
  margin-left: 4px;
}

/* The switcher sits at the right end of the nav, so anchor its menu to the
   trigger's right edge instead of centring it — otherwise it overhangs left.
   Extra specificity (parent .desktop-menu) so these win over the generic
   .nav-dropdown:hover rule that re-applies translateX(-50%) on hover. */
.desktop-menu .lang-switch .dropdown-menu {
  left: auto;
  right: 0;
  transform: translateY(10px);
}
.desktop-menu .lang-switch:hover .dropdown-menu {
  transform: translateY(0);
}

.nav-link:hover {
  color: var(--color-earth-900);
}

.nav-link.active {
  color: var(--color-accent);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-standard);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

/* Programmes Dropdown menu */
.nav-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 320px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-base) var(--ease-standard);
  display: grid;
  gap: var(--space-2);
  z-index: 101;
}

.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-section {
  display: grid;
  gap: 2px;
}

.dropdown-title {
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: var(--space-1);
  padding: var(--space-1) var(--space-3) 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 13px;
  color: var(--color-text-primary);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
  text-decoration: none;
}

.dropdown-item:hover {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
}

.dropdown-item-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--color-text-muted);
  opacity: 0.75;
}

.dropdown-item-icon i,
.dropdown-item-icon svg {
  width: 15px;
  height: 15px;
}

.dropdown-item-text {
  flex: 1 1 auto;
  display: block;
  font-weight: 500;
  line-height: 1.25;
}

.dropdown-item-chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.dropdown-item:hover .dropdown-item-chevron {
  opacity: 1;
  transform: translateX(0);
}

.dropdown-divider {
  border-top: 1px solid var(--color-border-light);
  margin-top: 2px;
  padding-top: var(--space-2);
}

.dropdown-item-all {
  color: var(--color-accent);
}

.dropdown-item-all .dropdown-item-text {
  color: var(--color-accent);
}

.dropdown-item-all:hover {
  background-color: var(--color-accent-pale);
}

.dropdown-item-all .dropdown-item-chevron {
  color: var(--color-accent);
}

.menu-btn {
  background: none;
  border: none;
  color: var(--color-earth-900);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1280px) {
  .menu-btn {
    display: none;
  }
}

/* Mobile Nav Drawer Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh; /* Better for mobile browsers with address bars */
  background-color: var(--color-logo); /* Lighter earth green (logo green) */
  z-index: 200;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain; /* Prevent scrolling the body behind it */
  -webkit-overflow-scrolling: touch;
  transition: opacity var(--duration-base) var(--ease-standard),
              visibility var(--duration-base) var(--ease-standard);
}

.mobile-menu-overlay > * {
  flex-shrink: 0; /* Ensure contents don't squish, forcing the scrollbar */
}

.mobile-menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  /* Light strip so the brand-green logo reads; the dark drawer green is
     nearly the logo's own green, so it would otherwise blend in. */
  background-color: #ffffff;
  padding: 0 var(--space-6);
  margin-bottom: var(--space-6);
}

.mobile-menu-header .logo {
  color: var(--color-text);
}

.close-btn {
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: auto;
  padding: 0 var(--space-6) var(--space-6);
}

.mobile-nav-link {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  color: var(--color-text-inverse);
}

.mobile-nav-link:hover, .mobile-nav-link.active {
  color: var(--color-accent-light);
}

.mobile-nav-submenu {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-4);
  margin-top: var(--space-2);
}

.mobile-submenu-item {
  font-size: var(--text-body-md);
  color: var(--color-earth-300);
}

.mobile-submenu-item:hover {
  color: var(--color-text-inverse);
}

/* Enforce regular/medium font weights on bold elements globally */
strong, b {
  font-weight: 500;
}

/* Elevation is deliberate and warm-tinted — see --shadow-* tokens.
   (A previous global box-shadow:none !important nuke lived here; it also
   disabled form focus rings.) */

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-label-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-surface);
}

.btn-primary:hover {
  background-color: var(--color-accent-dark);
  color: #FDFAF5;
}

.btn-secondary {
  border: 1px solid var(--color-accent);
  background-color: transparent;
  color: var(--color-accent);
}

.btn-secondary:hover {
  background-color: var(--color-accent-pale);
  color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

.btn-ghost {
  border: 1px solid #ffffff;
  color: #ffffff;
  background-color: transparent;
}

.btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.btn-text {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.btn-text:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
  transform: none;
}

.btn-full {
  width: 100%;
}

/* ── FORMS & INPUTS ── */
.form-group {
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
}

.form-label {
  font-family: var(--font-body);
  font-size: var(--text-label-lg);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.form-control {
  width: 100%;
  height: 48px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

textarea.form-control {
  height: auto;
  min-height: 120px;
  resize: vertical;
}

.form-control::placeholder {
  color: var(--color-text-muted);
}

.form-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-pale);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.form-check-input {
  margin-top: 3px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.form-error-msg {
  font-size: var(--text-body-sm);
  color: var(--color-error);
  margin-top: var(--space-1);
}

/* Honeypot. Taken out of the layout and off the accessibility tree entirely —
   never `display: none`, which some bots detect and skip. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Note beside a quote-based price band (see BANDS in src/data/pricing.mjs). */
.price-card__band-note {
  display: block;
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Testimonial "read the full recommendation" toggle.
   Several recommendations run past 250 words. The carousel shows the opening
   paragraph and keeps the rest in a <details> — native disclosure, so it is
   keyboard-operable and screen-reader-announced without any JS, and the full
   text stays in the DOM for search engines. */
.tst-more {
  margin-bottom: var(--space-3);
}
.tst-more__toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 600;
  font-style: normal;
  color: var(--color-accent);
  list-style: none;
  padding: var(--space-2) 0;
}
.tst-more__toggle::-webkit-details-marker { display: none; }
.tst-more__toggle::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.tst-more[open] > .tst-more__toggle::after {
  transform: rotate(-135deg) translateY(-0.1em);
}
.tst-more__toggle:hover,
.tst-more__toggle:focus-visible {
  color: var(--color-accent-dark, var(--color-accent));
  text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
  .tst-more__toggle::after { transition: none; }
}

@keyframes formShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.form-control.is-invalid {
  border-color: var(--color-error);
  animation: formShake 0.4s var(--ease-standard);
}

/* ── PROGRAMME CARDS ── */
.programmes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .programmes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.programme-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.programme-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lg);
}

.programme-img-container {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
  background-color: var(--color-earth-100);
}

/* Legibility scrim so the label reads over any photo */
.programme-img-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 12, 10, 0.72) 0%,
    rgba(10, 12, 10, 0.28) 32%,
    rgba(10, 12, 10, 0) 60%
  );
  pointer-events: none;
}

.programme-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  transition: transform var(--duration-slower) var(--ease-standard);
}

.programme-card:hover .programme-img {
  transform: scale(1.05);
}

.programme-img-label {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-4);
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.programme-content {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.programme-modality {
  font-size: var(--text-label-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.programme-title {
  font-size: var(--text-display-sm);
  margin-bottom: var(--space-2);
}

.programme-outcome {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  line-height: var(--leading-snug);
}

.programme-meta {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  justify-content: space-between;
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

.programme-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.programme-card-link {
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 500;
  color: var(--color-accent);
}

.programme-card:hover .programme-card-link {
  color: var(--color-accent-dark);
}

.programme-card-link i {
  transition: transform var(--duration-fast) var(--ease-standard);
}

.programme-card:hover .programme-card-link i {
  transform: translateX(4px);
}

/* ── TESTIMONIAL DISPLAY ── */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.testimonial-block {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-6);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonial-quote {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--color-earth-800);
  margin-bottom: var(--space-5);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-4);
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--color-earth-100);
  object-fit: cover;
}

.testimonial-info {
  display: flex;
  flex-direction: column;
}

.testimonial-name {
  font-size: var(--text-body-md);
  font-weight: 700;
  color: var(--color-earth-900);
}

.testimonial-role {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

/* ── FLOATING WHATSAPP BUTTON ──
   Sits above .mobile-sticky-cta, which is fixed to bottom:0 on screens under
   1024px. The default on mobile clears that bar; :has() pulls the button back
   down on pages that don't have one. Doing it in that order matters — where
   :has() is unsupported the result is a harmless gap, never a button sitting
   on top of the primary CTA. */
.wa-fab {
  position: fixed;
  right: var(--space-4, 16px);
  bottom: 88px; /* clears .mobile-sticky-cta */
  z-index: 98;  /* below the sticky CTA (99) and the nav */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  background-color: #25d366;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
body:not(:has(.mobile-sticky-cta)) .wa-fab {
  bottom: var(--space-4, 16px);
}
.wa-fab:hover,
.wa-fab:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  color: #fff;
}
.wa-fab:focus-visible {
  outline: 3px solid var(--color-accent, #4a7c6f);
  outline-offset: 3px;
}
.wa-fab__icon { flex: 0 0 auto; }

/* Narrow phones: drop to a circular icon so the button can't crowd content
   or the sticky CTA. The accessible name still comes from aria-label. */
@media (max-width: 480px) {
  .wa-fab {
    padding: 14px;
    gap: 0;
  }
  .wa-fab__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (min-width: 1024px) {
  .wa-fab { bottom: var(--space-5, 24px); right: var(--space-5, 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
  .wa-fab:hover,
  .wa-fab:focus-visible { transform: none; }
}

@media print {
  .wa-fab { display: none; }
}

/* ── STICKY BOTTOM MOBILE CTA ── */
.mobile-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-5);
  display: flex;
  justify-content: center;
  z-index: 99;
}

@media (min-width: 1024px) {
  .mobile-sticky-cta {
    display: none;
  }
}

/* ── AUDIENCE TOGGLE SECTION ── */
.audience-toggle-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.audience-toggle-btn {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border-strong);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-label-lg);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-standard);
  border-radius: var(--radius-sm);
}

.audience-toggle-btn.active {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}

/* ── ASSESS INTERACTIVE TOOL ── */
.assess-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  max-width: 700px;
  margin: 0 auto;
}

.assess-progress {
  height: 4px;
  background-color: var(--color-earth-100);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.assess-progress-bar {
  height: 100%;
  width: 0%;
  background-color: var(--color-accent);
  transition: width var(--duration-base) var(--ease-standard);
}

.question-container {
  display: none;
}

.question-container.active {
  display: block;
  animation: fadeIn var(--duration-base) var(--ease-decelerate);
}

.question-text {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  margin-bottom: var(--space-5);
}

.options-list {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.option-btn {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  padding: var(--space-4);
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  transition: all var(--duration-fast) var(--ease-standard);
}

.option-btn:hover {
  background-color: var(--color-earth-100);
  border-color: var(--color-accent-light);
}

.option-btn.selected {
  background-color: var(--color-accent-pale);
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
  font-weight: 500;
}

.assess-nav {
  display: flex;
  justify-content: space-between;
}

.assess-results-card {
  display: none;
  animation: fadeIn var(--duration-slow) var(--ease-decelerate);
}

.assess-results-card.active {
  display: block;
}

.results-score-circle {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent-pale);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: var(--space-4) auto var(--space-6);
  border: 2px solid var(--color-accent);
}

.results-score-val {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  color: var(--color-accent-dark);
  font-weight: bold;
}

.results-score-label {
  font-size: var(--text-label-sm);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.breakdown-label {
  font-weight: 500;
}

.breakdown-bar-bg {
  height: 8px;
  background-color: var(--color-earth-100);
  border-radius: var(--radius-full);
  width: 60%;
  overflow: hidden;
}

.breakdown-bar-fill {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
}

/* ── STREAK TRACKER & DASHBOARD ── */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1.8fr 1fr;
    gap: var(--space-8);
  }
}

.dashboard-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.streak-widget {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background-color: var(--color-accent-pale);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent-light);
}

.streak-icon {
  font-size: var(--text-display-md);
  color: var(--color-accent-dark);
}

.streak-count {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  color: var(--color-accent-dark);
  font-weight: 700;
}

/* ── FOOTER ── */
.global-footer {
  margin-top: auto;
  background-color: #1b2e27; /* Darker earthy green */
  color: var(--color-text-inverse);
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.global-footer p {
  color: var(--color-accent-pale) !important;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.5fr repeat(3, 1fr);
  }
}

.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-logo {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-4);
}

.footer-logo .logo-img {
  height: 46px;
}

.footer-col-title {
  font-family: var(--font-body);
  font-size: var(--text-label-lg);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-wider);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-link {
  font-size: var(--text-body-sm);
  color: var(--color-accent-pale);
  transition: color var(--duration-fast) var(--ease-standard);
}

.footer-link:hover {
  color: var(--color-text-inverse);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-accent-pale);
  transition: color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.footer-social-link:hover {
  color: var(--color-text-inverse);
  background-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.footer-social-link i,
.footer-social-link svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.6;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-body-sm);
  color: var(--color-accent-pale);
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
  }
}

/* ── HERO WAVES SECTION ── */
.hero-waves-section {
  position: relative;
  width: 100%;
  /* Immersive full-height hero in line with current yoga/wellness standards:
     ~88vh so the imagery fills the viewport while still hinting at content
     below, capped at 820px so it never balloons on tall/ultrawide displays.
     Mobile releases this to follow content height (see media query below). */
  min-height: min(88vh, 820px);
  background-color: #0c0c0c;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

#hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;
  z-index: 1;
  pointer-events: none;
}

.hero-waves-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  /* Same fade curve as the About hero (solid → clear across the left ~two
     thirds) so the photo resolves into a solid text panel the same way. */
  background: linear-gradient(
    to right,
    rgba(8, 8, 12, 0.96) 0%,
    rgba(8, 8, 12, 0.9) 30%,
    rgba(8, 8, 12, 0.55) 50%,
    rgba(8, 8, 12, 0) 66%
  );
  pointer-events: none;
}

.hero-waves-container {
  position: relative;
  z-index: 3;
  width: 100%;
  color: var(--color-bg);
}

.hero-main-content {
  text-align: left;
  max-width: 560px;
}

.hero-main-content .lead {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.hero-main-content > div:last-child {
  justify-content: flex-start !important;
}

@media (max-width: 992px) {
  /* Release the fixed ratio so the box follows content height on smaller
     screens (matches the About hero's mobile behaviour). */
  .hero-waves-section {
    aspect-ratio: auto;
    min-height: 78vh;
  }

  #hero-bg-image {
    object-position: 5% center;
  }

  .hero-waves-overlay {
    background: linear-gradient(
      to bottom,
      rgba(8, 8, 12, 0.7) 0%,
      rgba(8, 8, 12, 0.55) 40%,
      rgba(8, 8, 12, 0.9) 100%
    );
  }

  .hero-main-content {
    text-align: center;
    max-width: 100%;
  }

  .hero-main-content > div:last-child {
    justify-content: center !important;
  }
}

/* ─── Programme opening-statement hero (full-bleed image, fixed height) ─── */
/* The rotating photo covers the whole hero; a left-side scrim darkens the
   negative space so the copy stays legible. Images are composed subject-right,
   so the copy sits on the left half over the scrim. */
.programme-hero {
  position: relative;
  display: block;
  /* Unified with the home/About heroes: viewport-scaled and capped. min-height
     (not a fixed height) lets the copy push it taller without clipping. */
  min-height: min(88vh, 820px);
  padding: 0;
  overflow: hidden;
  background-color: var(--hero-fallback, #12140d);
}

.programme-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #0a0a0a;
}

.programme-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}

/* Left-side scrim for text legibility (copy sits on the left half) */
.programme-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(8, 8, 10, 0.92) 0%,
    rgba(8, 8, 10, 0.72) 34%,
    rgba(8, 8, 10, 0.25) 62%,
    rgba(8, 8, 10, 0) 100%
  );
}

.programme-hero-panel {
  position: relative;
  z-index: 2;
  /* Inherit the hero's min-height so the panel fills the box and vertically
     centres the copy even though the hero is now min-height (not fixed). */
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  /* Align the copy's left edge with the logo / container content edge (same as
     the About hero), instead of a fixed inset. */
  padding-top: 0;
  padding-bottom: 0;
  padding-right: var(--space-6);
  padding-left: max(var(--space-6), calc(50% - var(--w-wide) / 2 + var(--space-6)));
}

.programme-hero-content {
  width: 50%;
  max-width: 50%;
  margin-right: auto;
  text-align: left;
}

.programme-hero-content .section-eyebrow {
  color: var(--color-accent-light);
  margin-bottom: var(--space-5);
}

.programme-hero-heading {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-bg);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .programme-hero-heading {
    font-size: var(--text-display-lg);
  }
}

@media (min-width: 1024px) {
  .programme-hero-heading {
    font-size: var(--text-display-xl);
  }
}

.programme-hero-heading em {
  color: var(--color-accent-light);
}

.programme-hero-content .lead {
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
  color: rgba(247, 242, 234, 0.75);
  max-width: 600px;
  margin-bottom: 0;
}
.sleep-hero { min-height: min(76vh, 720px); }
.sleep-hero .programme-hero-heading { max-width: 650px; margin-bottom: var(--space-5); }
.sleep-hero .programme-hero-heading em { display: block; margin-top: var(--space-1); }
.stress-hero { min-height: min(76vh, 720px); }
@media (min-width: 1024px) {
  .sleep-hero .programme-hero-content { width: 60%; max-width: 60%; }
  .sleep-hero .programme-hero-heading { font-size: clamp(48px, 4.35vw, 60px); }
  .sleep-hero__title-line { white-space: nowrap; }
}

.programme-hero-content > div:last-child {
  display: flex;
  justify-content: flex-start;
}

.corporate-hero .section-eyebrow {
  color: var(--color-accent-light) !important;
}

.corporate-hero h1 {
  color: var(--color-bg) !important;
}

.corporate-hero p {
  color: var(--color-earth-100) !important;
}

/* About hero sits on a light photographed wall (no gradient), so its copy is
   dark ink with a green eyebrow for contrast. */
.about-hero-eyebrow {
  color: var(--color-accent-dark) !important;
}

.about-hero h1 {
  color: var(--color-text) !important;
}

.about-hero-lead {
  color: var(--color-text-secondary) !important;
}

.about-hero-name {
  color: var(--color-accent-dark) !important;
}

@media (max-width: 820px) {
  .about-hero-inner,
  .corporate-hero .hero-two-col > div:first-child {
    text-align: center;
  }
}

@media (max-width: 820px) {
  .programme-hero {
    height: auto;
    min-height: 80vh;
  }

  .programme-hero-media::after {
    background: linear-gradient(
      to bottom,
      rgba(8, 8, 10, 0.35) 0%,
      rgba(8, 8, 10, 0.7) 55%,
      rgba(8, 8, 10, 0.92) 100%
    );
  }

  .programme-hero-panel {
    justify-content: flex-start;
    padding: clamp(40px, 10vw, 80px) var(--space-5);
  }

  .programme-hero-content {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    text-align: center;
  }

  .programme-hero-content > div:last-child {
    justify-content: center;
  }
}

/* ── Tonal depth — relief for flat fills ─────────────────────────────
   background-image layers compose with inline background-color, so these
   apply sitewide without touching per-page inline styles. */

/* Flat dark sections: faint sage glow from the top instead of a dead fill */
section[style*="background-color: var(--color-dark)"] {
  background-image: radial-gradient(
    120% 75% at 50% 0%,
    rgba(123, 174, 158, 0.09),
    transparent 62%
  );
}

/* Warm emphasis bands: soft edge shading so they meet neighbours gently */
section[style*="var(--color-surface-warm)"] {
  background-image: linear-gradient(
    to bottom,
    rgba(44, 31, 14, 0.035),
    transparent 10%,
    transparent 90%,
    rgba(44, 31, 14, 0.035)
  );
}

/* Primary buttons: a whisper of vertical light for tactile depth */
.btn-primary {
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.10),
    rgba(0, 0, 0, 0.06)
  );
}

/* Header modification overlaying dark hero */
.header-nav.on-dark-hero {
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

.header-nav.on-dark-hero .nav-link {
  color: rgba(247, 242, 234, 0.85);
}

.header-nav.on-dark-hero .nav-link:hover {
  color: #fff;
}

.header-nav.on-dark-hero .nav-link.active {
  color: var(--color-accent-light);
}

.header-nav.on-dark-hero .nav-link.active::after {
  background-color: var(--color-accent-light);
}

.header-nav.on-dark-hero .menu-btn {
  color: var(--color-bg);
}

/* Logo display selectors */
.logo .logo-light {
  display: none;
}
.logo .logo-dark {
  display: block;
}

.header-nav.on-dark-hero .logo .logo-light {
  display: block !important;
}
.header-nav.on-dark-hero .logo .logo-dark {
  display: none !important;
}

/* Restore logo when scrolled even on homepage */
.header-nav.on-dark-hero.scrolled {
  background-color: rgba(247, 242, 234, 0.96);
  border-bottom-color: var(--color-border);
}

.header-nav.on-dark-hero.scrolled .nav-link {
  color: var(--color-text-secondary);
}

.header-nav.on-dark-hero.scrolled .nav-link:hover {
  color: var(--color-earth-900);
}

.header-nav.on-dark-hero.scrolled .nav-link.active {
  color: var(--color-accent);
}

.header-nav.on-dark-hero.scrolled .nav-link.active::after {
  background-color: var(--color-accent);
}

.header-nav.on-dark-hero.scrolled .menu-btn {
  color: var(--color-text-primary);
}

.header-nav.on-dark-hero.scrolled .logo .logo-light {
  display: none !important;
}
.header-nav.on-dark-hero.scrolled .logo .logo-dark {
  display: block !important;
}

/* ── 7 MOVEMENTS FRAMEWORK COMPONENT STYLES ── */

/* Movement 3: Breathing Timer */
.breathing-card {
  max-width: 600px;
  margin: 0 auto;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-6);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.breathing-stage-container {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.breathing-circle-wrapper {
  position: relative;
  width: 220px;
  height: 220px;
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.breathing-circle-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--color-surface-alt);
  opacity: 0.4;
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  z-index: 1;
}

/* Breathing states */
.breathing-circle-wrapper.inhale .breathing-circle-bg {
  transform: scale(1.35);
  background-color: var(--color-accent-light);
  opacity: 0.7;
}

.breathing-circle-wrapper.hold .breathing-circle-bg {
  transform: scale(1.35);
  background-color: var(--color-accent);
  opacity: 0.85;
}

.breathing-circle-wrapper.exhale .breathing-circle-bg {
  transform: scale(1.0);
  background-color: var(--color-accent-light);
  opacity: 0.4;
}

.breathing-circle-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  transform: rotate(-90deg);
}

.breathing-circle-progress {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 4;
  stroke-dasharray: 628; /* 2 * PI * 100 */
  stroke-dashoffset: 628;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear;
}

.breathing-circle-track {
  fill: none;
  stroke: rgba(212, 196, 168, 0.3);
  stroke-width: 4;
}

.breathing-instructions {
  position: relative;
  z-index: 3;
  font-family: var(--font-body);
  font-weight: 500;
}

.breathing-phase {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.breathing-counter {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
}

.breathing-prompt {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-style: italic;
  line-height: var(--leading-snug);
  max-width: 440px;
  margin: 0 auto;
}

.btn-breathing-control {
  background-color: var(--color-text-primary);
  color: var(--color-bg);
  border: none;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-label-lg);
  font-weight: bold;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.3s ease;
  z-index: 3;
}

.btn-breathing-control:hover {
  background-color: var(--color-accent-dark);
}

/* Movement 4: Horizontal Scrolling Timeline */
.timeline-outer {
  width: 100%;
  position: relative;
  margin: var(--space-6) 0;
}

.timeline-horizontal {
  display: flex;
  overflow-x: auto;
  gap: var(--space-6);
  padding: var(--space-5) 0 var(--space-6) 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.timeline-horizontal::-webkit-scrollbar {
  height: 6px;
}

.timeline-horizontal::-webkit-scrollbar-track {
  background: transparent;
}

.timeline-horizontal::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: var(--radius-sm);
}

.timeline-card {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  transition: transform 0.3s var(--ease-standard), box-shadow 0.3s var(--ease-standard);
}

.timeline-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
}

.timeline-number {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: 700;
  color: var(--color-accent-light);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.timeline-week {
  font-size: var(--text-label-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.timeline-title {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  font-weight: 500;
}

.timeline-description {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* Movement 4: Horizontal Scrolling Timeline */
.timeline-path-container {
  position: relative;
  width: 100%;
  margin: var(--space-6) 0;
}

.timeline-scroll-wrapper {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4) 0;
}

.timeline-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

.timeline-nodes-row {
  display: flex;
  position: relative;
  padding: var(--space-4) 0;
  min-width: 1000px;
  justify-content: space-between;
}

/* Connecting Line */
.timeline-nodes-row::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-border);
  z-index: 1;
}

.timeline-node {
  flex: 0 0 150px;
  text-align: center;
  position: relative;
  z-index: 2;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  padding: 0;
}

.timeline-node-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-bg);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-body-md);
  font-weight: 600;
  color: var(--color-text-muted);
  transition: all var(--duration-base) var(--ease-standard);
}

.timeline-node:hover .timeline-node-circle {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.timeline-node.active .timeline-node-circle {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
  box-shadow: 0 0 0 6px var(--color-accent-pale);
}

.timeline-node-label {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wider);
  display: block;
}

.timeline-node.active .timeline-node-label {
  color: var(--color-accent-dark);
}

.timeline-node-theme {
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  display: block;
  margin-top: 2px;
}

/* Detail panels styling */
.timeline-panels-container {
  margin-top: var(--space-6);
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  position: relative;
}

.timeline-panels-container::-webkit-scrollbar {
  display: none;
}

.timeline-panel {
  display: block;
  flex: 0 0 100%;
  scroll-snap-align: start;
  box-sizing: border-box;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}

.timeline-panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .timeline-panel-grid {
    grid-template-columns: 1.4fr 1fr;
  }
}

.timeline-panel-text p {
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  font-size: var(--text-body-md);
  margin-bottom: var(--space-4);
}

.timeline-panel-practices h4 {
  font-family: var(--font-body);
  font-size: var(--text-label-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-dark);
  margin-bottom: var(--space-3);
}

.timeline-panel-practices ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: var(--space-4);
}

.timeline-panel-practices li {
  margin-bottom: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  padding-left: var(--space-4);
  position: relative;
}

.timeline-panel-practices li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.timeline-panel-expectation {
  font-size: var(--text-body-sm);
  font-style: italic;
  color: var(--color-text-muted);
  border-top: 1px dashed var(--color-border-subtle);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}

/* Mobile responsive adjustments for horizontal timeline stepper */
@media (max-width: 768px) {
  .timeline-scroll-wrapper {
    padding: var(--space-2) 0;
  }
  .timeline-nodes-row {
    min-width: 720px; /* Stepper scrolls horizontally on small screens */
    flex-direction: row;
    justify-content: space-between;
    padding: var(--space-3) 0;
  }
  .timeline-nodes-row::before {
    display: block; /* Keep connecting line horizontal */
    top: 24px;
  }
  .timeline-node {
    flex: 0 0 110px;
  }
  .timeline-node-circle {
    width: 40px;
    height: 40px;
    font-size: var(--text-body-sm);
    margin: 0 auto var(--space-1);
  }
  .timeline-node-label {
    font-size: 10px;
  }
  .timeline-node-theme {
    font-size: 11px;
    margin-top: 1px;
  }
  .timeline-node.active .timeline-node-circle {
    box-shadow: 0 0 0 4px var(--color-accent-pale);
  }
}

/* ── SLEEP RESTORE V2 EXTRA STYLES ── */

/* Canvas Hero Section */
.canvas-hero-section {
  position: relative;
  overflow: hidden;
  background-color: #1A2535;
  color: #F7F2EA;
}

.canvas-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.canvas-hero-content {
  position: relative;
  z-index: 2;
}

.canvas-hero-content h1,
.canvas-hero-content .canvas-hero-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-display-sm); /* 26px on mobile */
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
  color: #ffffff;
  font-weight: 400;
}

.canvas-hero-content p {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-body-md); /* 16px body font */
  line-height: var(--leading-loose);
  margin-bottom: var(--space-5);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
}

.canvas-hero-content p.hero-highlight {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-display-sm); /* 26px on mobile */
  line-height: var(--leading-snug);
  margin-bottom: 0;
  color: #ffffff;
  font-weight: 400;
}

@media (min-width: 480px) {
  .canvas-hero-content h1,
  .canvas-hero-content .canvas-hero-title,
  .canvas-hero-content p.hero-highlight {
    font-size: var(--text-display-md); /* 34px on larger mobile/tablet */
  }
}

@media (min-width: 768px) {
  .canvas-hero-content h1,
  .canvas-hero-content .canvas-hero-title,
  .canvas-hero-content p.hero-highlight {
    font-size: var(--text-display-md); /* Kept at 34px on desktop to match counselling */
  }
}

/* Sleep Pattern Analyser Step Card */
.assessment-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  max-width: 680px;
  margin: var(--space-6) auto;
  box-shadow: var(--shadow-md);
}

.assessment-progress-container {
  width: 100%;
  height: 4px;
  background-color: var(--color-border-subtle);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
  overflow: hidden;
}

.assessment-progress-bar {
  height: 100%;
  width: 0%;
  background-color: var(--color-accent);
  transition: width 0.4s var(--ease-standard);
}

.assessment-step {
  display: none;
}

.assessment-step.active {
  display: block;
  animation: stepFadeIn 0.4s var(--ease-standard) forwards;
}

@keyframes stepFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.assessment-question {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  color: var(--color-earth-800);
  margin-bottom: var(--space-4);
  line-height: var(--leading-snug);
}

.assessment-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .assessment-options {
    grid-template-columns: 1fr 1fr;
  }
}

.assessment-option-btn {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  width: 100%;
}

.assessment-option-btn:hover {
  background-color: var(--color-earth-50);
  border-color: var(--color-accent);
}

.assessment-option-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-pale);
  border-color: var(--color-accent);
}

/* Results Card */
.results-card {
  display: none;
}

.results-card.active {
  display: block;
  animation: stepFadeIn 0.6s var(--ease-standard) forwards;
}

.results-header-box {
  background-color: var(--color-surface);
  border-left: 4px solid var(--color-accent);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.results-profile-title {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  color: var(--color-accent-dark);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.results-insights-title {
  font-family: var(--font-body);
  font-size: var(--text-label-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-2);
}

.results-insight-item {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  line-height: var(--leading-normal);
  padding-left: var(--space-4);
  position: relative;
}

.results-insight-item::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: bold;
}

.share-checkbox-container {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* Details Card V2 */
.programme-details-v2-card {
  max-width: 480px;
  margin: 0 auto;
  border-left: 2px solid var(--color-accent);
  background-color: #FDFAF5;
  padding: var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  border-right: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-md);
}

/* FAQ Overrides for Sleep */
.faq-accordion-container {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.faq-accordion-container details {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  overflow: visible;
  transition: none;
}

.faq-accordion-container details[open] {
  border-bottom: 1px solid var(--color-border);
}

.faq-accordion-container summary {
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--text-display-sm); /* Cormorant Garamond 26px */
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  outline: none;
  user-select: none;
}

.faq-accordion-container summary::-webkit-details-marker {
  display: none;
}

.faq-accordion-container .faq-content {
  padding: 0 0 var(--space-4) 0;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 16px; /* DM Sans 16px */
  line-height: var(--leading-normal);
}

/* Sticky Hero Layout */
.sticky-hero-container {
  position: -webkit-sticky;
  position: sticky;
  top: 0; /* Sticks exactly at the top of the viewport */
  width: 100%; /* Explicitly set width to full parent track width */
  height: 100vh; /* Cover full viewport height */
  padding-top: 80px; /* Offset to center content below the header nav */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #1A2535;
  box-sizing: border-box;
  z-index: 5;
}

/* Sleep Hero Phrase Animation */
.hero-phrase {
  opacity: 0.15;
  transition: opacity 0.3s ease-out;
  display: inline;
}

/* Instantly reveal all phrases if bypassed */
.canvas-hero-content.revealed-all .hero-phrase {
  opacity: 1 !important;
}

/* ==========================================================================
   STRESS RESET V2 SPECIFIC COMPONENT STYLES
   ========================================================================== */

/* Stress Reset Hero Video Background */
.video-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}

/* Custom Range Inputs/Sliders for Stress Load Calculator */
.stress-slider-group {
  margin-bottom: var(--space-5);
  text-align: left;
}

.stress-slider-group label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-earth-900);
  margin-bottom: 2px;
}

.stress-slider-group .slider-subtext {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.stress-slider-container {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.stress-slider-container input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-sm);
  background: var(--color-border);
  outline: none;
  cursor: pointer;
}

/* Chrome, Safari, Opera, Edge */
.stress-slider-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent); /* Sage green */
  border: 2px solid var(--color-bg);
  box-shadow: var(--shadow-md);
  transition: transform 0.1s ease;
}

.stress-slider-container input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.stress-slider-container input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(0.95);
}

/* Firefox */
.stress-slider-container input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-bg);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.stress-slider-container input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.1);
}

.stress-slider-container input[type="range"]::-moz-range-thumb:active {
  transform: scale(0.95);
}

.stress-slider-val {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: 600;
  color: var(--color-earth-900);
  min-width: 70px;
  text-align: right;
}

.stress-slider-insight {
  margin-top: var(--space-2);
  font-size: var(--text-body-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  min-height: 40px; /* Prevent layout shift */
}

/* Compound Stress Load Progress Bar */
.compound-bar-container {
  margin-top: var(--space-6);
  margin-bottom: var(--space-8);
  position: relative;
  text-align: left;
}

.compound-bar-label {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-earth-800);
  margin-bottom: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.compound-bar-track {
  width: 100%;
  height: 16px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, 
    #4A7C6F 0%,   /* Sage (Mild) */
    #4A7C6F 30%, 
    #C4A882 30%,  /* Gold (Moderate) */
    #C4A882 50%, 
    #D48C46 50%,  /* Amber (Elevated) */
    #D48C46 75%, 
    #B35D43 75%,  /* Red-Brown (Severe) */
    #B35D43 100%
  );
  position: relative;
}

.compound-indicator-wrapper {
  position: absolute;
  top: 100%;
  left: 0%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
  transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}

.compound-indicator-arrow {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--color-earth-900);
}

.compound-indicator-text {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  background-color: var(--color-earth-900);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  margin-top: 2px;
  white-space: nowrap;
}

.compound-zones-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  padding: 0 4px;
}

.compound-zones-labels span {
  width: 25%;
  text-align: center;
}
.compound-zones-labels span:first-child { text-align: left; }
.compound-zones-labels span:last-child { text-align: right; }

/* Stress Results Card styling */
.stress-results-card {
  display: none;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  text-align: left;
  margin-top: var(--space-6);
  animation: panelFadeIn 0.5s var(--ease-standard) forwards;
}

.stress-results-title {
  font-family: var(--font-body);
  font-size: var(--text-label-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent-dark);
  margin-bottom: var(--space-2);
}

.stress-results-profile {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  color: var(--color-earth-900);
  margin-bottom: var(--space-4);
}

.stress-results-body {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-5);
}

.stress-results-insights-header {
  font-family: var(--font-body);
  font-size: var(--text-body-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-earth-800);
  margin-bottom: var(--space-3);
  letter-spacing: var(--tracking-wider);
}

.stress-insight-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: var(--space-5);
}

.stress-insight-item {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.stress-insight-item::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: bold;
}

/* Dual Column Pricing Cards */
.pricing-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

@media (min-width: 768px) {
  .pricing-cards-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.pricing-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent) !important;
}

.pricing-card-header {
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  text-align: left;
}

.pricing-card-type {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent-dark);
}

.pricing-card-title {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  color: var(--color-earth-900);
  margin-top: var(--space-1);
  margin-bottom: 0;
}

.pricing-card-price {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  color: var(--color-earth-900);
  margin-top: var(--space-2);
}

.pricing-card-details {
  list-style: none;
  padding-left: 0;
  text-align: left;
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

.pricing-card-details li {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--color-border-subtle);
  display: flex;
  justify-content: space-between;
}

.pricing-card-details li span.detail-label {
  color: var(--color-text-muted);
}

.pricing-card-details li span.detail-val {
  font-weight: 600;
  color: var(--color-earth-900);
  text-align: right;
}

.pricing-card-details li.detail-bullets-header {
  font-weight: 700;
  color: var(--color-earth-800);
  border-bottom: none;
  padding-top: var(--space-3);
  padding-bottom: var(--space-1);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: var(--tracking-wider);
}

.pricing-card-details li.detail-bullet {
  padding-left: var(--space-4);
  position: relative;
  border-bottom: none;
  display: block;
}

.pricing-card-details li.detail-bullet::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: bold;
}

/* ============================================================
   UNIFIED PRICE CARD SYSTEM
   One card design shared across every programme page.
   - .price-card-grid            wrapper (centres a single card)
   - .price-card-grid.is-tiers   two cards side by side (e.g. Individual / Corporate)
   - .price-card--featured       highlighted tier
   ============================================================ */
.price-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 520px;
  margin: 0 auto;
}

.price-card-grid.is-tiers {
  max-width: var(--w-content);
  gap: var(--space-6);
}

@media (min-width: 820px) {
  .price-card-grid.is-tiers {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease;
}

.price-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Slim gradient rule along the top edge */
.price-card__accent {
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
  flex-shrink: 0;
}

.price-card--featured {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lg);
}

.price-card__badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-dark);
  background-color: var(--color-accent-pale);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.price-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-6);
}

.price-card__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent-dark);
  margin-bottom: var(--space-2);
}

.price-card__title {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-4);
}

.price-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-display);
  margin-bottom: var(--space-2);
}

.price-card__amount {
  font-size: var(--text-display-lg);
  font-weight: 600;
  color: var(--color-accent-dark);
  line-height: 1;
}

.price-card__suffix {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 400;
  color: var(--color-text-muted);
}

.price-card__price-note {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-accent-dark);
  margin: 0 0 var(--space-2);
}

.price-card__specs {
  list-style: none;
  padding: var(--space-5) 0 0;
  margin: var(--space-4) 0 var(--space-5);
  border-top: 1px solid var(--color-border-light);
  display: grid;
  gap: var(--space-3);
}

.price-card__spec {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-body-sm);
  line-height: var(--leading-snug);
}

.price-card__spec-label {
  color: var(--color-text-muted);
  font-weight: 500;
  flex-shrink: 0;
}

.price-card__spec-value {
  color: var(--color-text-primary);
  font-weight: 500;
  text-align: right;
}

.price-card__includes {
  border-top: 1px dashed var(--color-border);
  padding-top: var(--space-4);
  margin-bottom: var(--space-5);
}

.price-card__includes-title {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-earth-800);
  margin-bottom: var(--space-3);
}

.price-card__includes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.price-card__includes-list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}

.price-card__includes-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.price-card__actions {
  margin-top: auto;
  display: grid;
  gap: var(--space-3);
  text-align: center;
  padding-top: var(--space-2);
}

.price-card__secondary {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.price-card__secondary:hover {
  color: var(--color-accent-dark);
}

/* Dark-section variant — same structure, inverted palette
   (Posture Reset, Counselling sit on dark backgrounds) */
.price-card--dark {
  background-color: var(--color-dark-warm);
  border-color: rgba(255, 255, 255, 0.12);
}

.price-card--dark .price-card__title,
.price-card--dark .price-card__spec-value {
  color: #F7F2EA;
}

.price-card--dark .price-card__eyebrow,
.price-card--dark .price-card__amount,
.price-card--dark .price-card__price-note {
  color: var(--color-accent-light);
}

.price-card--dark .price-card__suffix,
.price-card--dark .price-card__spec-label,
.price-card--dark .price-card__includes-list li {
  color: rgba(247, 242, 234, 0.72);
}

.price-card--dark .price-card__includes-title {
  color: rgba(247, 242, 234, 0.9);
}

.price-card--dark .price-card__specs {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.price-card--dark .price-card__includes {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.price-card--dark .price-card__secondary {
  color: rgba(247, 242, 234, 0.8);
}

.price-card--dark .price-card__secondary:hover {
  color: #ffffff;
}

/* 8-Week timeline stepper nodes row override */
.timeline-nodes-row.eight-weeks {
  min-width: 1200px;
}

@media (max-width: 768px) {
  .timeline-nodes-row.eight-weeks {
    min-width: 960px;
  }
}

/* ── TESTIMONIAL CAROUSEL ── */
.testimonial-carousel-container {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.carousel-main-wrapper {
  position: relative;
  width: 100%;
  padding: 0 56px;
  box-sizing: border-box;
}

.carousel-track-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  gap: var(--space-5);
  transition: transform var(--duration-slower) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.testimonial-card {
  flex: 0 0 100%;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  padding: var(--space-6);
  border-radius: var(--radius-sm);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  min-height: 290px;
}

.testimonial-card .quote-icon {
  position: absolute;
  top: var(--space-2);
  left: var(--space-4);
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}

.testimonial-card .testimonial-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-body-md);
  color: var(--color-earth-900);
  line-height: 1.55;
  margin-bottom: var(--space-5);
  position: relative;
  z-index: 2;
}

.testimonial-card .testimonial-author {
  display: flex;
  align-items: center;
  margin-top: auto;
}

.testimonial-card .testimonial-name {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-earth-900);
  display: block;
  font-size: var(--text-body-sm);
}

.testimonial-card .testimonial-role {
  font-family: var(--font-body);
  color: var(--color-text-secondary);
  display: block;
  font-size: var(--text-label-sm);
  margin-top: 2px;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-earth-900);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all var(--duration-fast) var(--ease-standard);
  padding: 0;
}

.carousel-btn:hover {
  background-color: var(--color-accent-pale);
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

.carousel-btn.prev {
  left: 0;
}

.carousel-btn.next {
  right: 0;
}

.carousel-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: var(--color-border-subtle);
  color: var(--color-earth-300);
}

.carousel-dots {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-6);
  justify-content: center;
  align-items: center;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}

.carousel-dot.active {
  background-color: var(--color-accent);
  width: 20px;
}

@media (min-width: 992px) {
  .testimonial-card {
    flex: 0 0 calc(50% - (var(--space-5) / 2));
    min-height: 250px;
  }
}

@media (max-width: 576px) {
  .testimonial-carousel-container {
    padding: 0 var(--space-3);
  }
  .carousel-btn {
    display: none; /* hide arrow buttons on small mobile devices to maximize space, swipe acts as primary navigation */
  }
}

/* ─── WEEK TABS TIMELINE ─── */
.week-tabs-section {
  background-color: var(--color-bg);
  padding: 96px 0 80px;
  border-top: 1px solid var(--color-border-subtle);
}

.week-tabs-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-8);
  gap: var(--space-4);
}

.week-tabs-eyebrow {
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-3);
}

.week-tabs-title {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: 400;
  color: var(--color-earth-900);
  margin: 0;
  line-height: 1.1;
}

.week-tabs-nav {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.week-nav-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-primary);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  line-height: 1;
}

.week-nav-btn:hover {
  background-color: var(--color-earth-100);
  border-color: var(--color-accent);
}

.week-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.week-tabs-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.week-tabs-row::-webkit-scrollbar {
  display: none;
}

.week-tab {
  flex: 0 0 auto;
  min-width: 110px;
  padding: var(--space-3) var(--space-3);
  border: 1px solid var(--color-border);
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.week-tab:hover {
  border-color: var(--color-accent);
}

.week-tab.active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.week-tab-label {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.week-tab.active .week-tab-label {
  color: rgba(255,255,255,0.75);
}

.week-tab-theme {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-body-md);
  font-weight: 400;
  color: var(--color-text-secondary);
}

.week-tab.active .week-tab-theme {
  color: #ffffff;
}

.week-tabs-divider {
  height: 1px;
  background-color: rgba(255,255,255,0.1);
  margin: var(--space-6) 0;
}

.week-content-panels {
  position: relative;
}

.week-content-card {
  display: none;
  background-color: #F7F2EA;
  border-radius: 6px;
  padding: var(--space-8);
}

.week-content-card.active {
  display: block;
}

.week-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media (min-width: 768px) {
  .week-content-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 0;
  }
}

.week-content-left {
  padding-right: var(--space-7);
}

@media (max-width: 767px) {
  .week-content-left {
    padding-right: 0;
  }
}

.week-content-title {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: 400;
  color: var(--color-earth-900);
  margin-bottom: var(--space-5);
  line-height: 1.2;
}

.week-content-left p {
  font-size: var(--text-body-md);
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.week-content-left p:last-child {
  margin-bottom: 0;
}

.week-content-right {
  border-left: 1px solid var(--color-border-subtle);
  padding-left: var(--space-7);
}

@media (max-width: 767px) {
  .week-content-right {
    border-left: none;
    border-top: 1px solid var(--color-border-subtle);
    padding-left: 0;
    padding-top: var(--space-6);
  }
}

.week-practices-label {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.week-practices-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6) 0;
}

.week-practices-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.week-practices-list li::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%234A7C6F' stroke-width='1.5'/%3E%3Cpath d='M5 8l2 2 4-4' fill='none' stroke='%234A7C6F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ── MARQUEE ANIMATION ── */
.marquee-wrapper {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
}
.marquee-content {
  display: inline-block;
  animation: marquee 30s linear infinite;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── TESTIMONIAL CAROUSEL ── */
.testimonial-carousel {
  position: relative;
  overflow: hidden;
  padding-bottom: 2rem;
}
.testimonial-track {
  /* Show only the active slide so the section height follows its content
     instead of being locked to the tallest testimonial. */
  display: block;
  width: 100%;
  transform: none !important;
}
.testimonial-slide {
  display: none;
  width: 100%;
  padding: 0 var(--space-4);
  box-sizing: border-box;
  animation: testimonialFade 0.5s var(--ease-standard);
}
.testimonial-slide.active {
  display: block;
}
@keyframes testimonialFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.carousel-controls {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

/* Homepage testimonial controls use .prev-btn/.next-btn rather than the
   positioned card-carousel classes above. Keep them in normal flow so the
   two controls cannot overlap in the middle of the quote. */
.testimonial-carousel > .carousel-controls .carousel-btn {
  position: static;
  transform: none;
  z-index: auto;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

@media (max-width: 768px) {
  .testimonial-carousel {
    max-width: 100% !important;
  }
}
.carousel-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: all var(--duration-fast) var(--ease-standard);
}
.carousel-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background-color: var(--color-accent-pale);
}

/* ── FORM SUCCESS / ERROR ANIMATIONS ── */
@keyframes successFade {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.form-success-message {
  animation: successFade 0.5s var(--ease-standard) forwards;
}

/* ── HERO ENTRANCE ── */
.hero-stagger > * {
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-standard) forwards;
}
.hero-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.hero-stagger > *:nth-child(2) { animation-delay: 0.25s; }
.hero-stagger > *:nth-child(3) { animation-delay: 0.4s; }
.hero-stagger > *:nth-child(4) { animation-delay: 0.55s; }
.hero-stagger > *:nth-child(5) { animation-delay: 0.70s; }

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── ACCESSIBILITY ── */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 1000;
  background-color: var(--color-dark);
  color: var(--color-bg);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 500;
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus {
  top: var(--space-2);
}

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

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

/* Symptom hint inside the programmes dropdown */
.dropdown-item-hint {
  display: block;
  font-size: var(--text-label-sm);
  color: var(--color-text-muted);
  font-weight: 400;
  margin-top: 2px;
  line-height: 1.3;
}

/* Programme intro: text + image two-column (shared by programme pages) */
.intro-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 768px) {
  .intro-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ── PROGRAMME PAGE PROGRESSIVE DISCLOSURE ── */
.week-accordion {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-6);
  text-align: left;
}
.week-accordion details {
  border-bottom: 1px solid var(--color-border);
}
.week-accordion summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-2);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body-md);
  color: var(--color-earth-900);
  list-style: none;
}
.week-accordion summary::-webkit-details-marker { display: none; }
.week-accordion summary::after {
  content: '+';
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--color-accent);
  flex-shrink: 0;
}
.week-accordion details[open] > summary::after { content: '−'; }
.week-accordion summary:hover { color: var(--color-accent-dark); }
.week-accordion .week-label {
  font-size: var(--text-label-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
  font-weight: 500;
}
.week-accordion .week-body {
  padding: var(--space-2) var(--space-2) var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 768px) {
  .week-accordion .week-body {
    grid-template-columns: 1.4fr 1fr;
    gap: 0;
  }
}

/* Divider treatment for sleep-restore's timeline-panel columns inside the accordion */
.week-body .timeline-panel-text {
  padding-right: var(--space-7);
}
.week-body .timeline-panel-practices {
  border-left: 1px solid var(--color-border-subtle);
  padding-left: var(--space-7);
}
@media (max-width: 767px) {
  .week-body .timeline-panel-text {
    padding-right: 0;
  }
  .week-body .timeline-panel-practices {
    border-left: none;
    border-top: 1px solid var(--color-border-subtle);
    padding-left: 0;
    padding-top: var(--space-6);
  }
}

.mechanism-expand {
  margin-top: var(--space-5);
}
.mechanism-expand > summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body-sm);
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 2px;
}
.mechanism-expand > summary::-webkit-details-marker { display: none; }
.mechanism-expand > summary::after { content: '  ↓'; }
.mechanism-expand[open] > summary::after { content: '  ↑'; }
.mechanism-expand > summary:hover { color: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.mechanism-expand .mechanism-body { margin-top: var(--space-5); }


/* ── COMPONENT STATE POLISH ── */
.btn-primary {
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover {
  box-shadow: var(--shadow-sm);
}
.btn:active {
  transform: translateY(0);
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}




/* Dynamic pricing: keep a subtle placeholder while /js/pricing.js resolves
   the visitor country + live FX, so price spans do not flash empty. */
[data-price]:empty::after{content:"\2026";color:var(--color-text-muted);opacity:.4}
html.pricing-ready [data-price]:empty::after{content:none}

/* ── COOKIE CONSENT BANNER ──
   Sits above the sticky mobile CTA and the WhatsApp button, since it must be
   answerable before the page is used. Hidden via the [hidden] attribute so it
   is absent for anyone who has already chosen. */
.consent-banner[hidden] { display: none; }
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background-color: var(--color-dark, #1a2535);
  color: var(--color-bg, #f7f2ea);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-4) var(--space-5);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.22);
}
.consent-banner__inner {
  max-width: var(--w-text, 1100px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-6, 2rem);
  justify-content: space-between;
}
.consent-banner__text {
  margin: 0;
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: rgba(247, 242, 234, 0.86);
}
.consent-banner__text a {
  color: var(--color-accent-light, #8fbcae);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.consent-banner__actions {
  display: flex;
  gap: var(--space-3);
  flex: 0 0 auto;
}

/* Compact, banner-scoped buttons: the global .btn is sized for page CTAs and
   looks oversized and heavy in a cookie bar. These read as a clear
   accept/decline pair against the dark surface. */
.consent-banner__btn {
  appearance: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 500;
  line-height: 1;
  padding: 10px 20px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid transparent;
  transition: background-color var(--duration-fast, 0.15s) var(--ease-standard, ease),
              border-color var(--duration-fast, 0.15s) var(--ease-standard, ease),
              color var(--duration-fast, 0.15s) var(--ease-standard, ease);
}
.consent-banner__btn:focus-visible {
  outline: 2px solid var(--color-accent-light, #8fbcae);
  outline-offset: 2px;
}
.consent-banner__btn--accept {
  background-color: var(--color-accent, #4a7c6f);
  color: #fff;
}
.consent-banner__btn--accept:hover {
  background-color: var(--color-accent-light, #5c9082);
}
.consent-banner__btn--decline {
  background-color: transparent;
  color: rgba(247, 242, 234, 0.9);
  border-color: rgba(247, 242, 234, 0.28);
}
.consent-banner__btn--decline:hover {
  border-color: rgba(247, 242, 234, 0.6);
  background-color: rgba(247, 242, 234, 0.06);
}

@media (max-width: 640px) {
  .consent-banner { padding: var(--space-4); }
  .consent-banner__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .consent-banner__text { max-width: none; }
  .consent-banner__actions { justify-content: flex-end; }
}

@media (max-width: 400px) {
  .consent-banner__actions .consent-banner__btn { flex: 1 1 auto; text-align: center; }
}

/* ── SCOPE OF PRACTICE / CRISIS NOTICE ──
   Informational, not a warning. Someone who needs the numbers below is not
   helped by an alarming red panel, so this uses the calm surface tone and
   normal body type. */
.scope-notice {
  background-color: var(--color-surface-warm, #f2ede4);
  border-top: 1px solid var(--color-border);
  padding: var(--section-padding-md, 3rem) 0;
}
.scope-notice__inner { max-width: var(--w-text); }
.scope-notice__title {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  margin-bottom: var(--space-3);
}
.scope-notice__body {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-5);
}
.scope-notice__crisis {
  background-color: var(--color-accent-pale, #e8f0ed);
  border: 1px solid rgba(74, 124, 111, 0.15);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}
.scope-notice__crisis-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body-sm);
  color: var(--color-accent-dark, #35594f);
  margin-bottom: var(--space-2);
}
.scope-notice__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: var(--leading-loose);
}
.scope-notice__hours { color: var(--color-text-secondary); }
.scope-notice__note {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ── FOOTER MEDICAL DISCLAIMER ── */
.footer-disclaimer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  /* Equal space above and below the text within its band (between this rule
     and the footer-bottom rule below); previously it was padded only on top,
     so the text sat jammed against the lower divider. */
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  margin-top: var(--space-4);
}
.footer-disclaimer p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  color: var(--color-earth-300, #b8b0a4);
  line-height: var(--leading-snug);
  max-width: 90ch;
}

/* ── REFUND TRUST BADGE (near programme CTAs) ── */
/* Block, not flex: as flex, the trailing <a> became its own item and, once the
   sentence wrapped, got stranded to the right of the text instead of following
   it. As a block the icon leads inline and the text + link flow as one run. */
.refund-badge {
  display: block;
  margin: var(--space-3) 0 0;
  max-width: 52ch;
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}
.refund-badge svg {
  display: inline;
  vertical-align: -2px;
  margin-right: 6px;
  color: var(--color-accent);
}
.refund-badge a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* ── INLINE NUTRITION NOTE (metabolism programme) ── */
.nutrition-note {
  border-left: 3px solid var(--color-accent, #4a7c6f);
  background-color: var(--color-surface-warm, #f2ede4);
  padding: var(--space-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.nutrition-note__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body-sm);
  margin-bottom: var(--space-2);
}
.nutrition-note__body {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin: 0;
}

/* ── PROGRAMME HERO CTA ROW ──
   The primary CTA and the "See pricing" jump link on one line, wrapping to a
   stack only when the row can't fit. Each button keeps its text on a single
   line. */
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.hero-cta-row .btn { white-space: nowrap; }

/* Outline "See pricing" button. Two variants because no single colour reads on
   both a dark photographic hero and a light cream section: the default is the
   accent for light backgrounds; --on-dark is a light outline for the image
   heroes. The page tags itself with the right one. */
.btn-see-pricing {
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  background: transparent;
}
.btn-see-pricing:hover,
.btn-see-pricing:focus-visible {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
}
.btn-see-pricing--on-dark {
  border-color: rgba(247, 242, 234, 0.5);
  color: var(--color-bg);
}
.btn-see-pricing--on-dark:hover,
.btn-see-pricing--on-dark:focus-visible {
  background: rgba(247, 242, 234, 0.14);
  color: var(--color-bg);
}

/* Refund reassurance relocated beneath the pricing cards. */
.refund-badge--under-pricing {
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-6);
  text-align: center;
}

/* ── FREE TOOLS CATALOGUE ──
   Page-specific structure lives with the catalogue; these shared finishing
   rules keep its calls-to-action and responsive behaviour aligned with the
   site system in every language. */
.inst-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.inst-hero-action,
.inst-flagship-band .cta,
.deep-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  box-sizing: border-box;
  padding: 12px 24px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-xs);
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.inst-hero-action:hover,
.inst-flagship-band .cta:hover,
.deep-cta:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #fff;
}
.inst-hero-action--secondary {
  background: transparent;
  color: var(--color-accent-dark);
}
.inst-hero-action--secondary:hover {
  background: var(--color-accent-pale);
  border-color: var(--color-accent-dark);
  color: var(--color-accent-dark);
}
.inst-hero-action:focus-visible,
.inst-flagship-band .cta:focus-visible,
.deep-cta:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  /* The desktop flat-lay places the object detail behind mobile copy. A calm,
     text-first hero is clearer and lets the tools themselves provide the
     product imagery further down the page. */
  .inst-hero {
    min-height: 0;
    padding: var(--space-9) 0 var(--space-8);
    background-image: none;
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .inst-hero-inner { max-width: 38rem; }
  .inst-hero h1 { max-width: 19ch; }
  .inst-hero-lead { max-width: 42ch; }
}

@media (max-width: 900px) {
  /* Keep the detailed cards scannable rather than turning each into a full
     article before the visitor reaches its action. */
  .deep-gets li:nth-child(n + 4) { display: none; }
}

/* ── FREE TOOLS: UNIFIED CATALOGUE ARCHITECTURE ──
   Three compact checks, one featured assessment, and the advanced tools now
   use the same card language: warm panel, fine border, quiet index, clear
   outcome and one consistent action. Size signals depth; it no longer changes
   the visual system. */
.inst-ledger .container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.inst-ledger .ledger-group-label,
.deep-section .ledger-group-label { grid-column: 1 / -1; }
.inst-ledger .ledger-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  align-content: start;
  gap: var(--space-3);
  min-height: 250px;
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}
.inst-ledger .ledger-group-label + .ledger-row { margin-top: 0; }
.inst-ledger .ledger-row:last-of-type { border-bottom: 1px solid var(--color-border); }
.inst-ledger .ledger-row:hover {
  background: var(--color-surface);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}
.inst-ledger .ledger-index {
  grid-row: 1 / span 2;
  font-size: var(--text-display-sm);
  color: var(--color-gold);
}
.inst-ledger .ledger-main h3 { font-size: var(--text-body-lg); }
.inst-ledger .ledger-main p { max-width: none; }
.inst-ledger .ledger-meta {
  grid-column: 2;
  align-self: end;
  gap: var(--space-1);
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--color-border-subtle);
  border-left: 0;
}
.inst-ledger .ledger-go { display: none; }

/* The flagship is a featured catalogue card, not a separate visual universe. */
.inst-flagship-band {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--color-text);
  overflow: visible;
}
.inst-flagship-band .container {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 0;
  margin-top: var(--space-7);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.inst-flagship-band .container > div:first-of-type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-7);
}
.inst-flagship-band .eyebrow-dark { color: var(--color-accent-dark); }
.inst-flagship-band h2 { color: var(--color-earth-900); }
.inst-flagship-band p { color: var(--color-text-secondary); }
.inst-flagship-band .meta span {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
.inst-flagship-visual {
  order: -1;
  min-height: 300px;
  padding: var(--space-7) var(--space-6);
  border-right: 1px solid var(--color-border-subtle);
  background: var(--color-surface-warm);
}
.flagship-ghost-index { display: none; }
#hub-radar polygon.g { stroke: rgba(67, 114, 96, 0.22); }
#hub-radar line { stroke: rgba(67, 114, 96, 0.14); }
#hub-radar .s { fill: rgba(67, 114, 96, 0.14); stroke: var(--color-accent); }

/* Advanced tools retain their richer product preview but use the same visual
   direction every time; alternating the card layout made the scan path jump. */
.deep-feature,
.deep-feature.rev { grid-template-columns: 0.85fr 1.15fr; }
.deep-feature.rev .deep-visual {
  order: initial;
  border-right: 1px solid var(--color-border-subtle);
  border-left: 0;
}

@media (max-width: 900px) {
  .inst-ledger .container { grid-template-columns: 1fr; }
  .inst-ledger .ledger-row { min-height: 0; }
  .inst-flagship-band .container { grid-template-columns: 1fr; }
  .inst-flagship-visual {
    min-height: 200px;
    border-right: 0;
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .inst-flagship-band .container > div:first-of-type { padding: var(--space-6); }
  .deep-feature.rev .deep-visual {
    order: initial;
    border-right: 0;
    border-bottom: 1px solid var(--color-border-subtle);
  }
}

/* ── RECOVERY INDEX: SHARED TOOL SHELL ──
   The assessment is deliberately detailed, but it belongs to the same calm
   catalogue as the tools that lead into it. These overrides replace the
   microsite-like palette and controls with the site’s shared tokens. */
.npri {
  --ink: var(--color-bg);
  --ink-2: var(--color-surface);
  --surface: var(--color-surface);
  --warm: var(--color-surface-warm);
  --hairline: var(--color-border);
  --hairline-soft: var(--color-border-light);
  --tx: var(--color-text);
  --tx-2: var(--color-text-secondary);
  --tx-3: var(--color-text-muted);
  --sage: var(--color-accent);
  --sage-text: var(--color-accent-dark);
  --sage-dim: color-mix(in srgb, var(--color-accent) 30%, transparent);
  --gold: var(--color-border-strong);
  --gold-line: var(--color-gold);
  --serif: var(--font-display);
  --sans: var(--font-body);
  background: var(--color-bg);
  font-weight: 400;
}
.npri .frame { max-width: var(--w-content); padding: 0 var(--space-5); }
.npri .intro { padding: var(--section-padding-sm) 0; }
.npri .intro-grid {
  grid-template-columns: 0.85fr 1.15fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.npri .intro-grid > div:first-child {
  order: 2;
  padding: clamp(var(--space-6), 5vw, var(--space-8));
}
.npri .intro-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  padding: var(--space-6);
  background: var(--color-surface-warm);
  border-right: 1px solid var(--color-border-subtle);
}
.npri .intro-visual svg { max-width: 330px; }
.npri .eyebrow,
.npri .q-cat,
.npri .sec-label { color: var(--color-accent-dark); }
.npri h1.title {
  font-size: clamp(34px, 4.4vw, 52px);
  letter-spacing: var(--tracking-tight);
}
.npri .intro-lead { font-size: var(--text-body-md); line-height: var(--leading-normal); }
.npri .intro-meta { gap: var(--space-5); margin-top: var(--space-6); padding-top: var(--space-5); }
.npri .btn-np {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  box-sizing: border-box;
  margin-top: var(--space-6);
  padding: 12px 24px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-xs);
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-body-sm);
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.2;
  text-transform: none;
}
.npri .btn-np:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #fff; transform: none; }
.npri .btn-np-ghost { background: transparent; color: var(--color-accent-dark); border-color: var(--color-accent); }
.npri .btn-np-ghost:hover { background: var(--color-accent-pale); color: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.npri .btn-np:focus-visible,
.npri .opt:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 3px; }
.npri .fine { margin-top: var(--space-5); }

.npri .assess { padding: var(--section-padding-sm) 0 var(--section-padding-md); }
.npri .assess-grid { gap: var(--space-7); }
.npri .q-card {
  margin-top: var(--space-6);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}
.npri .q-text { font-size: clamp(24px, 3vw, 32px); }
.npri .opts { margin-top: var(--space-5); gap: var(--space-2); }
.npri .opt {
  border-color: var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-weight: 400;
}
.npri .opt:hover,
.npri .opt:focus-visible { border-color: var(--color-accent); background: var(--color-surface); transform: none; box-shadow: var(--shadow-xs); }
.npri .opt.chosen { border-color: var(--color-accent); background: var(--color-accent-pale); box-shadow: inset 3px 0 0 var(--color-accent); }
.npri .live {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.npri .res-head,
.npri .cta-panel {
  border-color: var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.npri .res-head { background: var(--color-surface); }
.npri .traj-cell { border-color: var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--shadow-xs); }
.npri .traj-cell.mid { background: color-mix(in srgb, var(--color-accent-pale) 45%, var(--color-surface)); }
.npri .traj-cell.right { background: color-mix(in srgb, var(--color-surface-warm) 60%, var(--color-surface)); }
.npri .cta-panel { background: var(--color-surface-warm); }

@media (max-width: 860px) {
  .npri .intro-grid { grid-template-columns: 1fr; }
  .npri .intro-grid > div:first-child { order: initial; }
  .npri .intro-visual { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--color-border-subtle); }
  .npri .intro-visual svg { max-width: 240px; }
}

/* ── FREE TOOLS: EDITORIAL INDEX ──
   Tools are not software products in a marketplace. The page now reads as a
   considered index: no card grid, no mock browser chrome, just a clear order,
   useful detail and restrained visual evidence. */
.inst-ledger .container { display: block; }
.inst-ledger .ledger-group-label,
.deep-section .ledger-group-label { display: flex; }
.inst-ledger .ledger-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 220px 48px;
  min-height: 0;
  margin: 0;
  padding: var(--space-6) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.inst-ledger .ledger-row:last-of-type { border-bottom: 1px solid var(--color-border); }
.inst-ledger .ledger-row:hover { border-color: var(--color-border); background: transparent; box-shadow: none; }
.inst-ledger .ledger-index { grid-row: auto; font-size: var(--text-display-sm); color: var(--color-border-strong); }
.inst-ledger .ledger-main h3 { font-size: var(--text-display-sm); }
.inst-ledger .ledger-meta {
  grid-column: auto;
  align-self: center;
  padding: 0 0 0 var(--space-5);
  border-top: 0;
  border-left: 1px solid var(--color-border);
}
.inst-ledger .ledger-go { display: flex; }

/* The flagship is a measured editorial interruption, not a card. */
.inst-flagship-band { margin: var(--section-padding-sm) 0; background: var(--color-dark); color: var(--color-bg); }
.inst-flagship-band .container {
  grid-template-columns: 1.1fr 0.9fr;
  margin-top: 0;
  padding-top: var(--section-padding-sm);
  padding-bottom: var(--section-padding-sm);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.inst-flagship-band .container > div:first-of-type { order: initial; padding: 0; }
.inst-flagship-visual { order: initial; min-height: 0; padding: 0; border: 0; background: transparent; }
.inst-flagship-band .eyebrow-dark { color: var(--color-accent-light); }
.inst-flagship-band h2 { color: var(--color-bg); }
.inst-flagship-band p { color: rgba(247, 242, 234, 0.72); }
.inst-flagship-band .meta span { color: rgba(247, 242, 234, 0.72); border-color: rgba(247, 242, 234, 0.18); }
.inst-flagship-band .cta { background: var(--color-accent-light); border-color: var(--color-accent-light); color: var(--color-dark); }
.inst-flagship-band .cta:hover { background: transparent; border-color: var(--color-accent-light); color: var(--color-accent-light); }

/* Advanced tools use the same index rhythm. The product name and outcome do
   the work; thumbnail screenshots and browser-window decoration are removed. */
.deep-feature,
.deep-feature.rev {
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: 0;
  padding: var(--space-7) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.deep-feature:hover { border-color: var(--color-border); box-shadow: none; }
.deep-visual,
.deep-feature.rev .deep-visual {
  order: initial;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.deep-visual .idx { position: static; color: var(--color-border-strong); font-size: var(--text-display-lg); }
.shot-frame { display: none; }
.deep-body { padding: 0; }
.deep-feature.rev .deep-visual { border: 0; }
.deep-feature:last-child { border-bottom: 1px solid var(--color-border); }

@media (max-width: 900px) {
  .inst-ledger .ledger-row { grid-template-columns: 44px minmax(0, 1fr); }
  .inst-ledger .ledger-meta { grid-column: 2; padding: 0; border: 0; }
  .inst-ledger .ledger-go { display: none; }
  .inst-flagship-band .container { grid-template-columns: 1fr; }
  .inst-flagship-visual { order: -1; padding-bottom: var(--space-5); }
  .deep-feature,
  .deep-feature.rev { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6) 0; }
}

/* The tools index starts with a concise orientation, not a billboard. */
.inst-hero {
  min-height: 0;
  padding: var(--space-9) 0 var(--space-8);
  background-image: none;
  border-bottom: 1px solid var(--color-border-subtle);
}
.inst-hero-inner { max-width: 680px; }
.inst-hero h1 { font-size: var(--text-display-lg); max-width: 18ch; }
.inst-hero-lead { max-width: 48ch; }
.inst-hero-actions { margin-top: var(--space-5); }
.inst-hero-action--secondary {
  min-height: auto;
  padding: 12px 0;
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.inst-hero-action--secondary:hover {
  background: transparent;
  border-color: transparent;
  color: var(--color-accent-dark);
}

/* One expanded index row gives the deeper assessment prominence without
   abandoning the visual grammar of the rest of the page. */
.inst-flagship-band { margin: 0; background: transparent; color: var(--color-text); }
.inst-flagship-band .container {
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-7) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.inst-flagship-band .container > div:first-of-type { order: initial; padding: 0; }
.inst-flagship-visual { order: initial; display: flex; min-height: 0; padding: 0; background: transparent; }
.inst-flagship-visual svg { width: 110px; height: 110px; }
.inst-flagship-band .eyebrow-dark { color: var(--color-accent-dark); }
.inst-flagship-band h2 { color: var(--color-text); font-size: var(--text-display-md); }
.inst-flagship-band p { color: var(--color-text-secondary); }
.inst-flagship-band .meta span { color: var(--color-text-muted); border-color: var(--color-border); }
.inst-flagship-band .cta { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.inst-flagship-band .cta:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #fff; }

@media (max-width: 900px) {
  .inst-hero { padding: var(--space-8) 0 var(--space-7); }
  .inst-hero h1 { max-width: 20ch; }
  .inst-flagship-band .container { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6) 0; }
  .inst-flagship-visual { order: initial; padding: 0; }
  .inst-flagship-visual svg { width: 44px; height: 44px; }
}

/* Final catalogue rule: every instrument is one entry in the same index.
   Depth changes the copy, never the layout or visual treatment. */
.inst-flagship-band .container,
.deep-feature,
.deep-feature.rev {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-5);
  margin: 0;
  padding: var(--space-6) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.inst-flagship-band .container { border-bottom: 0; }
.inst-flagship-visual {
  position: relative;
  width: auto;
  min-height: 0;
  overflow: visible;
}
.inst-flagship-visual svg { display: none; }
.inst-flagship-visual::before {
  content: '04';
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: 500;
  color: var(--color-border-strong);
  line-height: 1.25;
}
.inst-flagship-band .container > div:first-of-type,
.deep-body { padding: 0; }
.inst-flagship-band h2,
.deep-body h3 { font-size: var(--text-display-sm); line-height: 1.25; }
.inst-flagship-band p,
.deep-body > p { max-width: 58ch; margin-bottom: var(--space-4); }
.inst-flagship-band .meta { margin-bottom: var(--space-4); }
.inst-flagship-band .meta span { padding: 4px 10px; }
.deep-gets { display: none; }
.deep-foot {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
}
.deep-specs { flex: 1 1 auto; }
.deep-cta { flex: 0 0 auto; }
.deep-section { padding-bottom: var(--section-padding-sm); }
.deep-section .ledger-group-label { margin-top: var(--space-8); }

@media (max-width: 900px) {
  .inst-flagship-band .container,
  .deep-feature,
  .deep-feature.rev { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6) 0; }
  .deep-foot { align-items: flex-start; flex-direction: column; }
}