/* =============================================================
   PrevMed Health — Primary Stylesheet
   Palette: Fred's Brand (default)
   Version: 1.0 | April 2026
   Implements: NFR-DESIGN-01 through NFR-DESIGN-05
   ============================================================= */

/* =============================================================
   SECTION INDEX — line numbers map page-section IDs to the CSS
   headers that own their primary rule clusters. Grep
   "SECTION: <id>" or "SECTIONS: <id>" to jump straight there.

   Cross-page utilities (buttons, layouts, nav, footer, eyebrow,
   trust bar) live above the per-section blocks and are reused
   wherever they're referenced. Grep within those blocks to see
   which sections consume them.

   Canonical mapping (HTML id → CSS header):

   home page:
     hero               →  11. HERO SECTION
     pain-voc           →  12. PAIN / VOC CAROUSEL
     problem            →  13. PROBLEM SECTION
     cta-band-1         →   8. CTA BAND  (shared)
     patient-zero      →  14. PATIENT ZERO / DR. BREWER STORY
     credentials        →  15. CREDENTIALS / STATS BAR  (shared with the-numbers)
     testimonials       →  16. TESTIMONIALS GRID
     lifestyle-first    →  17. LIFESTYLE FIRST / PILLAR GRID
     lab-entry          →  18. LAB TEST ENTRY / ROI BOX
     cta-band-2         →   8. CTA BAND  (shared)
     the-numbers        →  15. CREDENTIALS / STATS BAR  (shared with credentials)
     is-this-for-you    →  19. "IS THIS FOR YOU"
     faq-preview        →  20. FAQ PREVIEW ACCORDION
     pricing-preview    →  21. PRICING / PACKAGES PREVIEW
     final-cta          →  22. FINAL CTA
     nurture            →  23. NURTURE / EMAIL CAPTURE
     featured-video     →  24. FEATURED VIDEO

   subpages:
     about-*            →  reuses home page blocks (hero, patient-zero,
                            lifestyle-first, video, final-cta)
     team-hero, team-final-cta  →  reuses 11. HERO + 22. FINAL CTA
     team-tiers         →  36. TEAM PICKER INTERACTION
     team-members       →  33. TEAM CAROUSEL SECTION
     faq-*              →  20. FAQ PREVIEW ACCORDION
     blog-*, post-*     →  minimal page-specific CSS; mostly reuses utilities
     shop-products      →  minimal page-specific CSS; mostly reuses utilities

   For the canonical, human-readable Section Index across HTML +
   JSON + assets, see docs/SECTION-INDEX.md.
   ============================================================= */

/* ============================================================
   1. CSS CUSTOM PROPERTIES / DESIGN TOKENS (FFD 5.1)
   ============================================================ */

:root {
  /* ============================================
     COLORS — NFR-DESIGN-01
     From Fred's Brand Style Guide (April 2026)
     ============================================ */

  /* Primary palette — BlueSteel brand update */
  --primary-dark: #010B2C;
  --primary-dark-rgb: 1, 11, 44;
  --primary-mid: #0D1B4B;
  --primary-light: #FFFFFF;
  --slate: #768A96;
  --sky: #608BEE;
  --white: #FFFFFF;

  /* Text */
  --text: #1A2130;
  --text-mid: #44576D;
  --text-light: #768A96;
  --text-body-on-dark: rgba(255, 255, 255, 0.85);
  --text-muted-on-dark: rgba(255, 255, 255, 0.6);

  /* Accent — contextual variables */
  --accent-on-dark: #608BEE;       /* vivid blue — CTAs on dark backgrounds */
  --accent-on-light: #608BEE;      /* vivid blue — CTAs on light backgrounds */
  --accent-tint: rgba(96, 139, 238, 0.12);

  /* Default accent (dark context — hero loads first) */
  --accent: var(--accent-on-dark);
  --accent-rgb: 96, 139, 238;

  /* Borders */
  --border-light: rgba(118, 138, 150, 0.3);

  /* Header / Footer */
  --footer-bg: #010B2C;

  /* ============================================
     TYPOGRAPHY — NFR-DESIGN-02
     ============================================ */

  /* Commercial fonts declared; fallbacks render until .woff2 files arrive from Fred */
  --font-headline: 'Degular', Georgia, serif;
  --font-body: 'Museo Sans Cond', 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* Font sizes — fluid scaling, 1rem floor */
  --font-h1: clamp(2.2rem, 5vw, 3.6rem);
  --font-h2: clamp(2.0rem, 4.2vw, 3.1rem);
  --font-h3: clamp(1.75rem, 3.6vw, 2.6rem);
  --font-h4: 1.15rem;                       /* CMS-editable; flat (no clamp) */
  --font-body-size: clamp(1.1rem, 1.6vw, 1.2rem);
  --font-body-small: 0.9rem;                /* CMS-editable; card bodies, sub-text */
  --font-eyebrow: 0.75rem;                  /* CMS-editable; .section-label small caps */
  --font-hero-note: 0.88rem;                /* CMS-editable; .hero-note italic line */
  --font-trust-item: 0.85rem;               /* CMS-editable; trust-bar badges */
  --font-cta-band-note: 0.9rem;             /* CMS-editable; .cta-band-note + .cta-band-support */
  --font-stat: clamp(2rem, 5vw, 3rem);
  --font-label: 0.63rem;                    /* CMS-editable; tiny mono small-caps */

  /* Line heights */
  --lh-headline: 1.15;
  --lh-body: 1.7;

  /* ============================================
     SPACING — NFR-DESIGN-03
     ============================================ */

  --container-max: 860px;
  --page-pad: 24px;
  --section-pad: 80px;
  --nav-height: 64px;

  /* ============================================
     UI
     ============================================ */

  --radius: 2px;
  --radius-lg: 4px;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================
     UTILITY / WARNING COLORS (non-brand)
     Used for placeholder notices and dev markers
     ============================================ */

  --warning-bg: #FFF3CD;
  --warning-border: #FFC107;
  --warning-text: #856404;
  --fred-bg: #FFF9C4;
  --fred-border: #F9A825;
  --fred-text: #5D4037;
}

/* Section-scoped accent variable — overrides --accent per background context */
.section-dark {
  --accent: var(--accent-on-dark);
  --accent-rgb: 170, 199, 216;
}

.section-light {
  --accent: var(--accent-on-light);
  --accent-rgb: 41, 53, 60;
}

/* On light sections the btn-primary background is dark (#29353C),
   so the text must flip to white — otherwise dark-on-dark is invisible */
.section-light .btn-primary {
  color: var(--white);
}

.section-light .btn-outline:hover {
  color: var(--white);
}


/* ============================================================
   2. RESETS & BASE
   ============================================================ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  color: var(--text);
  background: var(--white);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul, ol {
  list-style: none;
}

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

button {
  font-family: inherit;
}

/* ============================================================
   3. UTILITIES
   ============================================================ */

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Section backgrounds */
.section-dark {
  background: var(--primary-dark);
  color: var(--text-body-on-dark);
}

.section-light {
  background: var(--primary-light);
  color: var(--text);
}

.section-blue {
  /* Darkened from #608BEE for WCAG AA: white text on #608BEE was only
     ~3.2:1; #4060C8 lifts it to ~5.6:1. The #608BEE accent (buttons, hero
     glow via --accent-on-dark) is intentionally left unchanged. */
  background: #4060C8;
  color: #ffffff;
  --accent: var(--accent-on-dark);
  --accent-rgb: 255, 255, 255;
}

.section-blue .section-label {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.section-blue h2,
.section-blue h3 {
  color: #ffffff;
}

.section-blue p,
.section-blue li {
  color: rgba(255, 255, 255, 0.9);
}

.section-blue .btn-primary {
  background: #ffffff;
  color: #608BEE;
}

.section-blue .btn-primary:hover {
  background: rgba(255, 255, 255, 0.88);
}

/* Section container */
.section-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-pad) var(--page-pad);
}

/* Scroll depth markers (invisible) */
.scroll-marker {
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* Fred placeholder highlight — visible marker for Fred's pending content */
.fred-placeholder {
  display: inline-block;
  background: var(--fred-bg);
  border: 1px dashed var(--fred-border);
  color: var(--fred-text);
  padding: 0.15em 0.4em;
  border-radius: var(--radius);
  font-style: normal;
  font-size: 0.9em;
}

/* Section subtitle */
.section-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  color: var(--text-muted-on-dark);
  margin-top: 0.75rem;
  line-height: var(--lh-body);
}

.section-intro {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  color: var(--text-mid);
  line-height: var(--lh-body);
  margin-top: 1.5rem;
  max-width: 700px;
}

/* ============================================================
   4. SKIP NAV (FFD 2.1)
   ============================================================ */

.skip-nav {
  position: absolute;
  top: -100%;
  left: var(--page-pad);
  z-index: 9999;
  background: var(--accent-on-dark);
  color: var(--primary-dark);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  text-decoration: none;
  border-radius: var(--radius);
  transition: top 0.2s ease;
}

.skip-nav:focus {
  top: 1rem;
}


/* ============================================================
   5. NAVIGATION (FFD 2.2)
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--footer-bg);
  height: var(--nav-height);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.site-nav {
  position: relative;
  height: 100%;
}

.nav-container {
  max-width: calc(var(--container-max) + 200px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-pad);
  height: 100%;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  /* Clip the PNG's built-in whitespace so only the text portion shows */
  overflow: hidden;
  height: var(--nav-height);
}

/* PNG is black-on-white — invert to white for dark backgrounds.
   Height is set large so the logo text fills a readable size inside the nav;
   the parent overflow:hidden clips the surrounding whitespace. */
.nav-logo-img {
  height: 210px;
  width: auto;
  filter: brightness(0) invert(1);
  display: block;
  flex-shrink: 0;
}

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

/* Text fallback (keep in case img fails to load) */
.nav-logo-text {
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
}

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
}

.nav-link {
  color: var(--text-muted-on-dark);
  font-family: var(--font-body);
  font-size: 0.875rem;
  text-decoration: none;
  letter-spacing: 0.02em;
  padding-bottom: 2px;
  /* Keep multi-word labels ("Our Services", "Clinical Programs") on one
     line — without this the flex row breaks them mid-phrase when space is
     tight. The container is width-capped (see .nav-container), so the row
     is sized to fit via the gap + breakpoints below rather than by shrinking. */
  white-space: nowrap;
  transition: color var(--transition);
}

.nav-link:hover,
.nav-link.active {
  color: var(--white);
}

.nav-link.active {
  border-bottom: 2px solid var(--accent-on-dark);
}

.nav-link:focus-visible,
.nav-logo:focus-visible {
  outline: 2px solid var(--accent-on-dark);
  outline-offset: 2px;
}

/* Nav CTA item */
.nav-cta-item {
  flex-shrink: 0;
}

.btn-nav {
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle-bar {
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: block;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--accent-on-dark);
  outline-offset: 2px;
}

/* Mobile + tablet/narrow-desktop nav — collapse to the hamburger at
   <=1024px. With 9 top-level links + the CTA button and a 210px-wide logo
   inside a 1060px-capped container, the horizontal row only fits once the
   container is at (or near) its max width; below that it belongs in the menu. */
@media (max-width: 1024px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--primary-dark);
    padding: var(--page-pad);
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 100;
  }

  .nav-links .nav-link {
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top: none;
    width: 100%;
    display: block;
    font-size: 1rem;
    /* In the stacked dropdown, nowrap (set on the base .nav-link for the
       horizontal desktop row) has no purpose and would overflow a long
       label — let menu items wrap normally here. */
    white-space: normal;
  }

  .nav-links .nav-link.active {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
  }

  .nav-cta-item {
    padding: 1rem 0 0.25rem;
  }

  .nav-cta-item .btn-nav {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
  }

  /* When nav is open */
  .site-nav.nav-open .nav-links {
    display: flex;
  }

  /* Hamburger → X animation */
  .site-nav.nav-open .nav-toggle-bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .site-nav.nav-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .site-nav.nav-open .nav-toggle-bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}

/* Sub-capped desktop — viewports 1025-1060px, where the nav container has
   not yet reached its 1060px max width so the row budget is tightest.
   Pull the gap in (text size unchanged) to keep all items on one line. */
@media (min-width: 1025px) and (max-width: 1060px) {
  .nav-links {
    gap: 0.6rem;
  }
}


/* ============================================================
   6. FOOTER (FFD 2.3)
   ============================================================ */

.site-footer {
  background: var(--footer-bg);
  color: var(--text-muted-on-dark);
}

.footer-container {
  max-width: calc(var(--container-max) + 100px);
  margin: 0 auto;
  padding: 1.25rem var(--page-pad) 2rem;
}

/* Footer top */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-logo {
  display: inline-block;
}

.footer-logo-text {
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
}

.footer-tagline {
  font-family: var(--font-body);
  font-size: var(--font-body-small);
  color: var(--text-muted-on-dark);
  margin-top: 0.5rem;
  max-width: 280px;
  line-height: 1.5;
}

.footer-signup {
  flex: 0 1 380px;
}

.footer-signup-label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-muted-on-dark);
  margin-bottom: 0.75rem;
}

.footer-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  position: relative;
}

.footer-form input[type="email"] {
  flex: 1;
  min-width: 180px;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
}

.footer-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.footer-form input[type="email"]:focus {
  outline: 2px solid var(--accent-on-dark);
  outline-offset: 1px;
}

/* Footer nav */
.footer-nav {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  list-style: none;
  padding: 0;
}

.footer-links a {
  color: var(--text-muted-on-dark);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color var(--transition);
}

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

/* Footer channels — 6-icon social bar, flex-wrap so it reflows on narrow viewports */
.footer-channels {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
}

.footer-channel-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted-on-dark);
  font-family: var(--font-body);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color var(--transition);
}

.footer-channel-link:hover {
  color: var(--white);
}

.footer-channel-link svg {
  flex-shrink: 0;
}

/* Footer legal */
.footer-legal {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  list-style: none;
  padding: 0;
}

.footer-legal-links a {
  color: var(--text-muted-on-dark);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color var(--transition);
}

.footer-legal-links a:hover {
  color: var(--white);
}

.footer-copyright {
  color: var(--text-muted-on-dark);
  font-size: 0.8rem;
  margin-top: 1rem;
}

/* Honeypot */
.honeypot {
  position: absolute;
  left: -9999px;
  height: 0;
  width: 0;
  overflow: hidden;
  opacity: 0;
}

/* Mobile footer */
@media (max-width: 600px) {
  .footer-container {
    padding: 1rem var(--page-pad);
  }
  .footer-logo-img {
    width: 140px;
  }
  .footer-top {
    flex-direction: column;
    gap: 1rem;
  }
  .footer-tagline {
    max-width: none;
    font-size: 0.82rem;
    white-space: nowrap;
  }
  .footer-signup {
    flex: none;
    width: 100%;
  }
  .footer-nav {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
  }
}


/* ============================================================
   7. SECTION LABEL / EYEBROW (FFD 2.4)
   ============================================================ */

.section-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 1rem;
}


/* ============================================================
   8. CTA BAND (FFD 2.5)
   [SECTIONS: cta-band-1, cta-band-2 (home) — and CTA bands on every other page that uses .cta-band]
   ============================================================ */

.cta-band {
  background: var(--primary-dark);
  padding: 3.5rem var(--page-pad);
  text-align: center;
}

.cta-band-container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.cta-band-note {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--text-muted-on-dark);
  font-size: var(--font-cta-band-note);
  margin-bottom: 1rem;
}

.section-blue .cta-band-note {
  color: rgba(255, 255, 255, 0.75);
}

.cta-band-heading {
  font-family: var(--font-headline);
  font-size: clamp(1.65rem, 2.8vw, 1.8rem);
  font-weight: 700;
  color: var(--white);
  line-height: var(--lh-headline);
  margin-bottom: 1.5rem;
}

.cta-band-support {
  font-family: var(--font-body);
  font-size: var(--font-cta-band-note);
  color: var(--text-muted-on-dark);
  margin-top: 1rem;
}

.cta-band-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cta-band-list li {
  position: relative;
  padding-left: 1.25rem;
}

.cta-band-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent-on-dark);
  font-weight: 700;
}


/* ============================================================
   9. TRUST BAR (FFD 2.6)
   [Used by: hero + final-cta trust bars on the home page; mirrored on other pages]
   ============================================================ */

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  justify-content: center;
  margin-top: 2rem;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--font-trust-item);
  color: var(--text-muted-on-dark);
  white-space: nowrap;
}

.trust-icon {
  color: var(--accent);
  flex-shrink: 0;
}

.section-blue .trust-icon {
  color: #010B2C;
}


/* ============================================================
   10. BUTTON COMPONENTS (FFD 2.7)
   ============================================================ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: var(--primary-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.875rem 2rem;
  border-radius: var(--radius);
  text-decoration: none;
  border: 2px solid var(--accent);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 44px;
  line-height: 1.2;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.875rem 2rem;
  border-radius: var(--radius);
  text-decoration: none;
  border: 2px solid var(--accent);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  min-height: 44px;
  line-height: 1.2;
}

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

.btn-outline:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-small {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
}

/* Enlarged CTA — used for the priority "Become a Patient" buttons
   emphasized in the Rev1 markup (hero, CTA band, final CTA, video). */
.btn-xl {
  font-size: 1.15rem;
  padding: 1.125rem 2.75rem;
  min-height: 56px;
}


/* ============================================================
   11. HERO SECTION (FFD 3.1)
   [SECTION: hero | page: home  (also used by .subpage-hero on other pages)]
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem var(--page-pad) var(--section-pad);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: #010B2C;
  z-index: 0;
  overflow: hidden;
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(ellipse at 65% 45%, rgba(87, 148, 255, 0.65) 0%, transparent 50%),
    radial-gradient(ellipse at 25% 70%, rgba(96, 139, 238, 0.30) 0%, transparent 45%);
  animation: heroGlow 8s ease-in-out infinite;
  will-change: transform, opacity;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: -30%;
  background: radial-gradient(ellipse at 50% 30%, rgba(55, 100, 220, 0.30) 0%, transparent 55%);
  animation: heroGlow 8s ease-in-out infinite reverse;
  animation-delay: -4s;
  will-change: transform, opacity;
}

@keyframes heroGlow {
  0%, 100% {
    transform: scale(1) translate(0%, 0%);
    opacity: 0.85;
  }
  33% {
    transform: scale(1.08) translate(4%, -4%);
    opacity: 1;
  }
  66% {
    transform: scale(0.96) translate(-3%, 4%);
    opacity: 0.75;
  }
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(1, 11, 44, 0.60) 0%,
    rgba(1, 11, 44, 0.10) 45%,
    rgba(1, 11, 44, 0.60) 100%
  );
  z-index: 1;
}

.hero-container {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: center;
}

.hero-badge {
  display: inline-block;
  border: 1px solid var(--accent-on-dark);
  color: var(--accent-on-dark);
  padding: 0.375rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 2rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
}

.hero-headline {
  font-family: var(--font-headline);
  font-size: var(--font-h1);
  font-weight: 900;
  color: var(--white);
  line-height: var(--lh-headline);
  margin-bottom: 1.5rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.hero-headline em {
  font-style: italic;
  color: var(--accent-on-dark);
}

.hero-subhead {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.6vw, 1.15rem);
  color: var(--text-muted-on-dark);
  line-height: var(--lh-body);
  max-width: 600px;
  margin: 0 auto 2rem;
}

.hero-ctas {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.hero-note {
  font-family: var(--font-body);
  font-size: var(--font-hero-note);
  font-style: italic;
  color: var(--text-muted-on-dark);
  margin-bottom: 2rem;
}

/* Hero portrait — hidden below desktop, shown as full-height cutout on the right at >=1024px */
.hero-portrait {
  display: none;
}

/* Portrait column wrapper — stacks the portrait with the trust bar beneath
   it (trust bar relocated under Dr. Brewer per the Rev1 markup). */
.hero-portrait-col {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .hero-portrait-col {
    align-self: start;
    gap: 1.25rem;
  }

  .hero-portrait-col .trust-bar {
    margin-top: 0;
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .hero-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(440px, 44vw, 700px);
    align-items: center;
    gap: 2rem;
    text-align: left;
    max-width: min(1500px, calc(100vw - 3rem));
  }

  .hero-content {
    max-width: 720px;
  }

  .hero-content .hero-headline,
  .hero-content .hero-subhead {
    margin-left: 0;
    margin-right: 0;
  }

  .hero-content .hero-ctas {
    justify-content: flex-start;
  }

  .hero-content .trust-bar {
    justify-content: flex-start;
  }

  .hero-portrait {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 5rem);
    object-fit: contain;
    object-position: top right;
    align-self: start;
    margin-top: 1.5rem; /* aligns top of head with the H1 line, below the eyebrow */
    pointer-events: none;
    user-select: none;
  }
}

@media (max-width: 768px) {
  .hero-ctas {
    flex-direction: column;
    align-items: center;
  }

  .hero-ctas .btn-primary,
  .hero-ctas .btn-outline {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
}

/* Global mobile section padding reduction */
@media (max-width: 767px) {
  :root {
    --section-pad: 2.5rem;
  }
}


/* ============================================================
   12. PAIN / VOC CAROUSEL (FFD 3.2)
   [SECTION: pain-voc | page: home]
   ============================================================ */

.pain-section {
  padding: var(--section-pad) 0;
}

.pain-section .section-container {
  padding-bottom: 2rem;
}

@media (max-width: 767px) {
  /* pain-section has both section padding + container padding — zero container top to avoid doubling */
  .pain-section .section-container {
    padding-top: 0;
  }
}

.pain-section h2 {
  font-family: var(--font-headline);
  font-size: var(--font-h2);
  font-weight: 900;
  color: var(--text);
  line-height: var(--lh-headline);
  margin-top: 0;
}

.pain-carousel-wrapper {
  max-width: 100%;
  overflow: hidden;
  padding: 0 var(--page-pad);
}

.pain-carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}

.pain-carousel::-webkit-scrollbar {
  display: none;
}

.pain-carousel:active {
  cursor: grabbing;
}

.pain-carousel-track {
  display: flex;
  width: max-content;
}

.pain-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  padding: 2rem;
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  background: var(--primary-light);
}

.pain-card:last-child {
  border-right: none;
}

.pain-card-quote {
  font-family: var(--font-headline);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: 1rem;
  quotes: none;
  font-style: italic;
}

.pain-card-body {
  font-family: var(--font-body);
  font-size: var(--font-body-small);
  color: var(--text-mid);
  line-height: var(--lh-body);
  flex-grow: 1;
}

.pain-card-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-on-light);
  background: rgba(41, 53, 60, 0.08);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
  margin-top: 1rem;
  align-self: flex-start;
}

.pain-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--page-pad) 1.5rem;
}

.carousel-arrow {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition);
  color: var(--text);
}

.carousel-arrow:hover {
  border-color: var(--accent-on-light);
}

.carousel-arrow:focus-visible {
  outline: 2px solid var(--accent-on-light);
  outline-offset: 2px;
}

.carousel-hint {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-light);
}


/* ============================================================
   13. PROBLEM SECTION (FFD 3.3)
   [SECTION: problem | page: home]
   ============================================================ */

.problem-section h2 {
  font-family: var(--font-headline);
  font-size: var(--font-h2);
  font-weight: 900;
  color: var(--white);
  line-height: var(--lh-headline);
  margin-bottom: 1.5rem;
}

.problem-body p {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  color: var(--text-body-on-dark);
  line-height: var(--lh-body);
  margin-bottom: 1.25rem;
}

.problem-body strong {
  color: var(--white);
}

.alone-callout {
  border-left: 3px solid var(--accent-on-dark);
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  background: rgba(170, 199, 216, 0.08);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.alone-callout p {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.15rem);
  color: var(--white);
  line-height: 1.5;
  margin: 0;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 2.5rem 0;
  background: rgba(255, 255, 255, 0.1);
}

.stat-item {
  background: var(--primary-dark);
  padding: 2rem;
  text-align: center;
}

.stat-number {
  display: block;
  font-family: var(--font-headline);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--accent-on-dark);
  line-height: 1;
  margin-bottom: 0.75rem;
}

.stat-number-text {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
}

.stat-description {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-muted-on-dark);
  line-height: 1.5;
}

/* Credentials stat boxes — blue on dark background */
.credentials-section .stat-item {
  background: #608BEE;
}

.credentials-section .stat-number {
  color: #ffffff;
}

.credentials-section .stat-description {
  color: rgba(255, 255, 255, 0.9);
}

.problem-close {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  color: var(--text-body-on-dark);
  line-height: var(--lh-body);
}

.problem-close strong {
  color: var(--accent-on-dark);
}

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

/* Stats 4-column variant (problem section has 4 stats) */
.stat-grid-4 {
  grid-template-columns: repeat(2, 1fr);
}

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


/* ============================================================
   14. PATIENT ZERO / DR. BREWER STORY (FFD 3.4)
   [SECTION: patient-zero | page: home  (also: about-patient-zero on about page)]
   ============================================================ */

.patient-zero-section h2 {
  font-family: var(--font-headline);
  font-size: var(--font-h2);
  font-weight: 900;
  color: var(--text);
  line-height: var(--lh-headline);
  margin-bottom: 1.5rem;
}

.patient-zero-content {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-top: 1.5rem;
}

.patient-zero-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  display: block;
}

.photo-placeholder {
  width: 100%;
  aspect-ratio: 4/5;
  background: var(--primary-dark);
  border: 2px dashed var(--slate);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--text-muted-on-dark);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-align: center;
  padding: 1rem;
}

.photo-placeholder-icon {
  font-size: 2rem;
  opacity: 0.4;
}

.patient-zero-narrative p {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  color: var(--text-mid);
  line-height: var(--lh-body);
  margin-bottom: 0.85rem;
}

.patient-zero-narrative p:last-child {
  margin-bottom: 0;
}

.patient-zero-creds {
  font-size: 0.9rem !important;
  color: var(--text-light) !important;
  margin-top: 0.5rem;
}

.result-callout {
  background: var(--primary-dark);
  color: var(--white);
  border-left: 3px solid var(--accent-on-dark);
  padding: 1.25rem 1.75rem;
  margin: 1.5rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .patient-zero-content {
    grid-template-columns: 1fr;
  }

  .patient-zero-image {
    text-align: center;
  }

  .patient-zero-photo,
  .photo-placeholder {
    max-width: 240px;
    margin: 0 auto;
  }
}


/* ============================================================
   15. CREDENTIALS / STATS BAR (FFD 3.5)
   [SECTIONS: credentials, the-numbers | page: home  (uses .stat-grid-3 + .stat-grid-4)]
   ============================================================ */

.credentials-section {
  padding: 3rem var(--page-pad);
}

.credentials-section .section-container {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.stat-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 600px) {
  .stat-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-grid-3 .stat-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}


/* ============================================================
   16. TESTIMONIALS GRID (FFD 3.6)
   [SECTION: testimonials | page: home]
   ============================================================ */

.testimonials-section h2 {
  font-family: var(--font-headline);
  font-size: var(--font-h2);
  font-weight: 900;
  color: var(--text);
  line-height: var(--lh-headline);
  margin-bottom: 0;
}

.testi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.testi-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

.testi-quote-mark {
  font-family: var(--font-headline);
  font-size: 3rem;
  color: var(--accent-on-light);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.testi-body {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.testi-author {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.testi-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}

.testi-context {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-light);
}

.testi-fred-note {
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-light);
}

/* ---- Mobile carousel wrapper (shared by testimonials + pillars) ---- */
.mobile-carousel-wrap {
  position: relative;
}

.mobile-carousel-prev,
.mobile-carousel-next {
  display: none; /* hidden on desktop */
}

@media (max-width: 767px) {
  /* Show prev/next buttons */
  .mobile-carousel-prev,
  .mobile-carousel-next {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--primary-dark);
    color: var(--white);
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: opacity var(--transition);
  }

  .mobile-carousel-prev { left: 0; }
  .mobile-carousel-next { right: 0; }

  .mobile-carousel-prev:hover,
  .mobile-carousel-next:hover { opacity: 0.8; }

  /* Testimonials carousel on mobile */
  .testi-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    margin-top: 2.5rem;
    padding-bottom: 0.5rem;
  }

  .testi-grid::-webkit-scrollbar { display: none; }

  .testi-grid .testi-card {
    flex: 0 0 calc(100vw - 72px);
    scroll-snap-align: start;
    margin-right: 1rem;
  }

  .testi-grid .testi-card:last-child {
    margin-right: 0;
    scroll-snap-align: end;
  }

  /* Pillar carousel on mobile */
  .pillar-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    margin-top: 2.5rem;
    background: transparent;
    padding-bottom: 0.5rem;
  }

  .pillar-grid::-webkit-scrollbar { display: none; }

  .pillar-grid .pillar {
    flex: 0 0 calc(100vw - 72px);
    scroll-snap-align: start;
    margin-right: 1px;
    border: 1px solid var(--border-light);
  }

  .pillar-grid .pillar:last-child { margin-right: 0; }
}


/* ============================================================
   17. LIFESTYLE FIRST / PILLAR GRID (FFD 3.7)
   [SECTION: lifestyle-first | page: home  (also about-lifestyle-first on about page)]
   ============================================================ */

.lifestyle-section h2 {
  font-family: var(--font-headline);
  font-size: var(--font-h2);
  font-weight: 900;
  color: var(--text);
  line-height: var(--lh-headline);
  margin-bottom: 0.5rem;
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 2.5rem;
  background: var(--border-light);
}

.pillar {
  background: var(--primary-light);
  padding: 2rem;
}

.pillar-number {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-on-light);
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

.pillar-title {
  font-family: var(--font-headline);
  font-size: var(--font-h4);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.pillar-subtitle {
  font-family: var(--font-body);
  font-size: var(--font-body-small);
  color: var(--text-light);
  margin-bottom: 0.5rem;
  font-style: italic;
}

.pillar-description {
  font-family: var(--font-body);
  font-size: var(--font-body-small);
  color: var(--text-mid);
  line-height: var(--lh-body);
}

.pillar-cta {
  margin-top: 2.5rem;
  text-align: center;
}


/* ============================================================
   18. LAB TEST ENTRY / ROI BOX (FFD 3.8)
   [SECTION: lab-entry | page: home]
   ============================================================ */

.roi-section h2 {
  font-family: var(--font-headline);
  font-size: var(--font-h2);
  font-weight: 900;
  color: var(--text);
  line-height: var(--lh-headline);
  margin-bottom: 1rem;
}

.roi-intro {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  color: var(--text-mid);
  line-height: var(--lh-body);
  max-width: 620px;
}

.roi-box {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin: 2.5rem auto;
  max-width: 560px;
}

.roi-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.75rem 0;
}

.roi-label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-mid);
}

.roi-value {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  text-align: right;
  flex-shrink: 0;
  margin-left: 1rem;
}

.roi-divider {
  height: 1px;
  background: var(--border-light);
  margin: 0.5rem 0;
}

.roi-line-final {
  padding-top: 1rem;
}

.roi-line-final .roi-value {
  color: var(--accent-on-light);
  font-size: 1.3rem;
}

.heartreveal-block {
  margin-top: 2.5rem;
  padding: 2rem;
  background: var(--primary-light);
  border-left: 3px solid var(--accent-on-light);
  border-radius: var(--radius-lg);
}

.heartreveal-name {
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.heartreveal-tagline {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-mid);
  margin-bottom: 0.75rem;
}

.heartreveal-body {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.heartreveal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.heartreveal-list li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  padding-left: 1.25rem;
  position: relative;
}

.heartreveal-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent-on-light);
  font-weight: 700;
}

.roi-cta {
  text-align: center;
  margin-top: 2rem;
}

.roi-support {
  text-align: center;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-mid);
  margin-top: 1rem;
}


/* ============================================================
   19. "IS THIS FOR YOU" SECTION (FFD 3.9)
   [SECTION: is-this-for-you | page: home]
   ============================================================ */

.fit-section h2 {
  font-family: var(--font-headline);
  font-size: var(--font-h2);
  font-weight: 900;
  color: var(--text);
  line-height: var(--lh-headline);
  margin-bottom: 0;
}

/* Tighter section padding so whole section fits on one laptop screen */
.fit-section .section-container {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* Score counter layout */
.fit-intro {
  color: var(--text-mid);
  font-size: var(--font-body-size);
  margin-top: 0.5rem;
}

.fit-intro-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #608BEE;
  color: white;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  vertical-align: middle;
  margin-right: 2px;
  line-height: 1;
}

.fit-score-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 3rem;
  align-items: start;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .fit-score-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Checklist — scrolls internally, slightly taller than the score panel */
.fit-checklist-wrap {
  position: relative;
}

.fit-checklist-wrap::after {
  content: '↓ scroll to see more';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.97) 55%);
  pointer-events: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: opacity 0.2s;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(0,0,0,0.4);
  letter-spacing: 0.05em;
}

.fit-checklist-wrap.scrolled-to-end::after {
  opacity: 0;
}

.fit-checklist {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #608BEE rgba(96,139,238,0.15);
  padding-right: 4px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--white);
}

.fit-check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem 0.75rem;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.15s;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  color: var(--text-mid);
  line-height: 1.5;
}

.fit-check-item:last-child {
  border-bottom: none;
}

.fit-check-item:hover {
  background: rgba(96, 139, 238, 0.06);
  color: var(--text);
}

.fit-check-item.is-checked {
  color: var(--text);
  background: rgba(96, 139, 238, 0.08);
}

/* Hide native checkbox */
.fit-check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Custom checkbox */
.fit-check-box {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-light);
  border-radius: 4px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15em;
  transition: all 0.15s;
}

.fit-check:checked + .fit-check-box {
  background: #608BEE;
  border-color: #608BEE;
}

.fit-check:checked + .fit-check-box::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* Score panel — sticky on desktop */
.fit-score-panel {
  position: sticky;
  top: calc(var(--nav-height) + 1.5rem);
  background: var(--primary-dark);
  color: var(--white);
  border-radius: var(--radius-lg, 12px);
  padding: 2rem;
  text-align: center;
}

.fit-score-count {
  font-family: var(--font-headline);
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 1rem;
}

.fit-score-num {
  color: #608BEE;
}

.fit-score-denom {
  font-size: 1.5rem;
  color: rgba(255,255,255,0.4);
}

.fit-score-bar-track {
  height: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.fit-score-bar-fill {
  height: 100%;
  background: #608BEE;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.fit-score-message {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.fit-score-cta {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}
.fit-score-cta.is-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease, visibility 0s;
}

/* Not-for section */
.fit-not-for {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-light);
}

.fit-not-for-label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fit-not-for ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

.fit-not-for li {
  font-size: 0.9rem;
  color: var(--text-light);
  padding-left: 1rem;
  position: relative;
}

.fit-not-for li::before {
  content: '×';
  position: absolute;
  left: 0;
  color: var(--text-light);
}


/* ============================================================
   20. FAQ PREVIEW ACCORDION (FFD 3.10)
   [SECTION: faq-preview | page: home  (also faq-* sections on faq page)]
   ============================================================ */

.faq-section h2 {
  font-family: var(--font-headline);
  font-size: var(--font-h2);
  font-weight: 900;
  color: var(--text);
  line-height: var(--lh-headline);
  margin-bottom: 0;
}

.faq-list {
  margin-top: 2rem;
  max-width: 700px;
}

.faq-item {
  border-bottom: 1px solid var(--border-light);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  min-height: 44px;
}

.faq-question:focus-visible {
  outline: 2px solid var(--accent-on-light);
  outline-offset: 2px;
}

.faq-question-text {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  padding-right: 1rem;
}

.faq-icon {
  font-family: var(--font-body);
  font-size: 1.5rem;
  color: var(--accent-on-light);
  flex-shrink: 0;
  transition: transform 0.3s ease;
  width: 24px;
  text-align: center;
  line-height: 1;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 0 1.5rem;
}

.faq-answer[hidden] {
  display: none;
}

.faq-answer p {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  color: var(--text-mid);
  line-height: var(--lh-body);
  margin-bottom: 0.75rem;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-see-all {
  display: inline-block;
  margin-top: 2rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--accent-on-light);
  text-decoration: none;
}

.faq-see-all:hover {
  text-decoration: underline;
}


/* ============================================================
   21. PRICING / PACKAGES PREVIEW (FFD 3.11)
   [SECTION: pricing-preview | page: home]
   ============================================================ */

.pricing-section h2 {
  font-family: var(--font-headline);
  font-size: var(--font-h2);
  font-weight: 900;
  color: var(--white);
  line-height: var(--lh-headline);
  margin-bottom: 0.5rem;
}

/* Pricing section gets a wider container so 3 cards breathe */
.pricing-section .section-container {
  max-width: 1100px;
  padding-bottom: 2.5rem;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
  width: 100%;
}

.price-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

.price-card-featured {
  border-color: var(--accent-on-dark);
  border-width: 2px;
}

.price-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-on-dark);
  color: var(--primary-dark);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 1rem;
  border-radius: var(--radius);
  white-space: nowrap;
}

.price-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-on-dark);
  margin-bottom: 0.75rem;
  white-space: nowrap;
}

.price-amount {
  display: block;
  font-family: var(--font-headline);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.price-period {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-muted-on-dark);
  margin-bottom: 1.5rem;
}

.price-note {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted-on-dark);
  margin-bottom: 1.5rem;
}

.price-features {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
  flex-grow: 1;
}

.price-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-body-on-dark);
  line-height: 1.4;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.price-feature:last-child {
  border-bottom: none;
}

.price-check {
  color: var(--accent-on-dark);
  flex-shrink: 0;
  font-weight: 700;
}

.price-feature-note {
  font-size: 0.8rem;
  color: var(--text-muted-on-dark);
  font-style: italic;
  padding-top: 0.25rem;
}

.price-card .btn-primary,
.price-card .btn-outline {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

.pricing-note {
  text-align: center;
  margin-top: 2rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-muted-on-dark);
}

.pricing-note a {
  color: var(--accent-on-dark);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .pricing-note a {
    display: block;
    font-size: var(--font-h2);
    margin-top: 0.75rem;
    line-height: var(--lh-headline);
  }
}

/* ── Hero-style dark section (same glow as hero, used for Care Plans etc) ── */
.section-hero-style {
  background: #010B2C;
  color: var(--text-body-on-dark);
  position: relative;
  overflow: hidden;
}

.section-hero-style::before {
  content: '';
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(87, 148, 255, 0.45) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 70%, rgba(96, 139, 238, 0.20) 0%, transparent 45%);
  animation: heroGlow 8s ease-in-out infinite;
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 0;
}

.section-hero-style .section-container {
  position: relative;
  z-index: 1;
}

/* ── Price cards on section-blue ──────────────────────────────
   Cards flip to white so they read against the blue background.
   All blue/transparent colours inside are re-scoped to dark.
   ──────────────────────────────────────────────────────────── */
.section-blue .section-subtitle {
  color: rgba(255, 255, 255, 0.9);
}

.section-blue .price-card {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.section-blue .price-card-featured {
  border-color: #010B2C;
  border-width: 2px;
}

.section-blue .price-badge {
  background: #010B2C;
  color: #ffffff;
}

.section-blue .price-label {
  color: #010B2C;
}

.section-blue .price-period,
.section-blue .price-note {
  color: #768A96;
}

.section-blue .price-feature {
  color: #1A2130;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.section-blue .price-check {
  color: #608BEE;
}

.section-blue .price-feature-note {
  color: #768A96;
}

.section-blue .pricing-note {
  color: rgba(255, 255, 255, 0.85);
}

.section-blue .pricing-note a {
  color: #ffffff;
  text-decoration: underline;
}

/* Buttons inside white cards need to be dark, not the default white */
.section-blue .price-card .btn-primary {
  background: #010B2C;
  color: #ffffff;
}

.section-blue .price-card .btn-primary:hover {
  background: #0D1B4B;
}

.section-blue .price-card .btn-outline {
  border-color: #010B2C;
  color: #010B2C;
  background: transparent;
}

.section-blue .price-card .btn-outline:hover {
  background: #010B2C;
  color: #ffffff;
}

@media (max-width: 768px) {
  .price-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ============================================================
   22. FINAL CTA (FFD 3.12)
   [SECTION: final-cta | page: home  (also final-CTAs on other pages: about-final-cta, team-final-cta, faq-final-cta)]
   ============================================================ */

.final-cta {
  position: relative;
  padding: 4rem var(--page-pad);
  text-align: center;
  overflow: hidden;
}

/* section-container inside final-cta would add double vertical padding — zero it out */
.final-cta .section-container {
  padding-top: 0;
  padding-bottom: 0;
}

.final-cta-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(170, 199, 216, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.final-cta-content {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
}

.final-cta-heading {
  font-family: var(--font-headline);
  font-size: var(--font-h2);
  font-weight: 900;
  color: var(--white);
  line-height: var(--lh-headline);
  margin-bottom: 1.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.final-cta-heading em {
  font-style: italic;
  color: var(--accent-on-dark);
}

.section-blue .final-cta-heading em {
  color: #010B2C;
}

.final-cta-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.6vw, 1.15rem);
  color: var(--text-muted-on-dark);
  line-height: var(--lh-body);
  max-width: 560px;
  margin: 0 auto 2rem;
}


/* ============================================================
   23. NURTURE / EMAIL CAPTURE (FFD 3.13)
   [SECTION: nurture | page: home]
   ============================================================ */

.nurture-section h2 {
  font-family: var(--font-headline);
  font-size: var(--font-h2);
  font-weight: 900;
  color: var(--text);
  line-height: var(--lh-headline);
  margin-bottom: 1rem;
}

.nurture-section p {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  color: var(--text-mid);
  line-height: var(--lh-body);
  max-width: 560px;
  margin-bottom: 2rem;
}

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

.nurture-container p {
  margin-left: auto;
  margin-right: auto;
}

.nurture-form {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}

.nurture-form input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
}

.nurture-form input[type="email"]:focus {
  outline: 2px solid var(--accent-on-light);
  outline-offset: 1px;
}

@media (max-width: 480px) {
  .nurture-form {
    flex-direction: column;
    align-items: stretch;
  }

  .nurture-form .btn-primary {
    justify-content: center;
  }
}


/* ============================================================
   24. FEATURED VIDEO (FFD 3.14)
   [SECTION: featured-video | page: home  (also about-youtube on about page)]
   ============================================================ */

.video-section h2 {
  font-family: var(--font-headline);
  font-size: var(--font-h2);
  font-weight: 900;
  color: var(--text);
  line-height: var(--lh-headline);
  margin-bottom: 1rem;
}

.video-section p {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  color: var(--text-mid);
  line-height: var(--lh-body);
}

.video-embed {
  margin-top: 2rem;
}

.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius);
}

.video-responsive iframe,
.video-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-dark);
}

.video-placeholder {
  position: absolute;
  inset: 0;
  background: var(--primary-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--text-muted-on-dark);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-align: center;
}

.video-placeholder-icon {
  font-size: 3rem;
  opacity: 0.3;
}

.video-channel-cta {
  text-align: center;
  margin-top: 2rem;
}


/* ============================================================
   25. SECTION-LEVEL H2 DEFAULTS (for light sections)
   ============================================================ */

.section-light h2 {
  color: var(--text);
}

.section-dark h2 {
  color: var(--white);
}


/* ============================================================
   26. LEGAL PLACEHOLDER
   ============================================================ */

.legal-placeholder-notice {
  background: var(--warning-bg);
  border: 2px solid var(--warning-border);
  padding: 2rem;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--warning-text);
  text-align: center;
  margin: 2rem 0;
}


/* ============================================================
   27. NOSCRIPT FALLBACKS
   ============================================================ */

noscript .nav-links-noscript {
  display: flex !important;
}


/* ============================================================
   28. SHARED PAGE-LEVEL UTILITIES
   (clinical-packages.html + labs.html shared components)
   ============================================================ */

/* Hero background placeholder — dark tinted area behind hero text */
.hero-bg-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(41, 53, 60, 0.95) 0%, rgba(68, 87, 109, 0.9) 100%);
  pointer-events: none;
  z-index: 0;
}

.hero-section {
  position: relative;
}

.hero-section .section-container {
  position: relative;
  z-index: 1;
}

/* Hero note — small text below primary CTA */
.hero-note {
  margin-top: 1rem;
  font-size: var(--font-hero-note);
  color: var(--text-muted-on-dark);
  font-style: italic;
}

.hero-note .link-inline {
  color: var(--accent-on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Inline links (body copy anchors) */
.link-inline {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
  transition: opacity var(--transition);
}

.link-inline:hover {
  opacity: 0.75;
}

/* Prose blocks — long-form copy containers */
.prose-block {
  max-width: 680px;
}

.prose-block p {
  color: inherit;
  line-height: var(--lh-body);
  margin-bottom: 1rem;
}

.prose-block p:last-child {
  margin-bottom: 0;
}

.section-dark .prose-block p {
  color: var(--text-body-on-dark);
}

.prose-emphasis {
  font-weight: 600;
  color: var(--accent);
}

/* Section CTA — centered button block */
.section-cta {
  margin-top: 2.5rem;
}

/* Final CTA dual-button layout */
.final-cta-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

@media (max-width: 540px) {
  .final-cta-buttons {
    flex-direction: column;
  }
}

/* Downsell dual-button layout */
.downsell-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

@media (max-width: 540px) {
  .downsell-ctas {
    flex-direction: column;
  }
}

/* Form base styles — used by labs-form, nurture-form extended forms */
.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.35rem;
  letter-spacing: 0.01em;
}

.form-optional {
  font-weight: 400;
  color: var(--text-light);
  font-size: 0.8rem;
}

.form-required {
  color: #c0392b;
  font-weight: 700;
  margin-left: 1px;
}

.form-privacy-note {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 0.75rem;
}

.form-confirm-note {
  font-size: 0.9rem;
  color: var(--text-mid);
  margin-top: 1rem;
  font-style: italic;
}

/* Honeypot — visually hidden, not display:none (bots still fill it) */
.honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
  tab-size: 0;
}

/* Testi card dark variant */
.testi-card-dark {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-body-on-dark);
}

.testi-card-dark .testi-body {
  color: var(--text-body-on-dark);
}

.testi-card-dark .testi-name {
  color: var(--white);
}

.testi-card-dark .testi-context {
  color: var(--text-muted-on-dark);
}

.testi-card-dark .testi-quote-mark {
  color: var(--accent-on-dark);
}

/* Testi avatar initials circle */
.testi-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-mid);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.section-light .testi-avatar {
  background: var(--primary-light);
  color: var(--text);
}

/* Mini proof grid (small social proof inline blocks) */
.mini-proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.mini-proof-card {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.section-light .mini-proof-card {
  background: var(--primary-light);
  border-color: var(--border-light);
}

.mini-proof-headshot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-mid);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
}

.mini-proof-quote {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: var(--lh-body);
  color: var(--text-body-on-dark);
  font-style: italic;
}

.section-light .mini-proof-quote {
  color: var(--text-mid);
}

.mini-proof-cite {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mini-proof-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--white);
}

.section-light .mini-proof-name {
  color: var(--text);
}

.mini-proof-context {
  font-size: 0.78rem;
  color: var(--text-muted-on-dark);
}

.section-light .mini-proof-context {
  color: var(--text-light);
}

/* Nurture form — extended layout (with row + field wrappers) */
.nurture-inner {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.nurture-inner .nurture-form {
  max-width: none;
  text-align: left;
}

.nurture-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 540px) {
  .nurture-form-row {
    grid-template-columns: 1fr;
  }
}

.nurture-form-field {
  display: flex;
  flex-direction: column;
}

.nurture-form-field input[type="text"],
.nurture-form-field input[type="email"] {
  padding: 0.875rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
}

.nurture-form-field input:focus {
  outline: 2px solid var(--accent-on-light);
  outline-offset: 1px;
}

/* Price best-for line under pricing tiers */
.price-best-for {
  font-size: 0.78rem;
  color: var(--text-muted-on-dark);
  font-style: italic;
  margin-top: 0.35rem;
  margin-bottom: 0.75rem;
  display: block;
}


/* ============================================================
   33. TEAM CAROUSEL SECTION
   [SECTION: team-members | page: team]
   ============================================================ */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Mobile carousel override */
@media (max-width: 767px) {
  .team-carousel-wrap .team-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 0.5rem;
    margin-top: 1rem;
  }

  .team-carousel-wrap .team-card {
    flex: 0 0 calc(100vw - 96px);
    scroll-snap-align: start;
  }
}

.team-card {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--border-light);
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.team-photo-wrap {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 1rem;
}

.team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-photo-placeholder-wrap {
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-photo-placeholder {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--primary-mid);
  line-height: 1;
}

.team-name {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.team-role {
  font-size: 0.78rem;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.75rem;
}

.team-bio {
  font-size: 0.875rem;
  color: var(--text-mid);
  line-height: var(--lh-body);
  margin: 0;
  text-align: left;
}

.team-link-row {
  margin-top: 2rem;
  text-align: center;
}


/* ============================================================
   34. HERO BODY SPACER
   ============================================================ */

.hero-body--spaced {
  margin-bottom: 2rem;
}


/* ============================================================
   35. TESTIMONIALS FADE CAROUSEL
   ============================================================ */

.testi-carousel {
  margin-top: 2rem;
}

.testi-carousel-track {
  position: relative;
  min-height: 260px;
  display: flex;
  align-items: stretch;
}

/* All items hidden by default */
.testi-carousel-track [data-carousel-item] {
  display: none;
  opacity: 0;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  transition: opacity 0.35s ease;
}

/* Active item visible */
.testi-carousel-track [data-carousel-item].is-active {
  display: flex;
  opacity: 1;
}

.testi-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.testi-carousel-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: background var(--transition), border-color var(--transition);
  flex-shrink: 0;
}

.testi-carousel-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Light section variant */
.section-light .testi-carousel-btn {
  border-color: var(--border-light);
  background: var(--white);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.section-light .testi-carousel-btn:hover {
  background: var(--primary-light);
}

.testi-carousel-dots {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.testi-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), transform var(--transition);
}

.testi-dot.is-active {
  background: var(--accent-on-dark);
  transform: scale(1.35);
}

.section-light .testi-dot {
  background: var(--border-light);
}

.section-light .testi-dot.is-active {
  background: var(--accent-on-light);
}


/* ============================================================
   36. TEAM PICKER INTERACTION
   [SECTION: team-tiers | page: team]
   ============================================================ */

.team-picker {
  margin-top: 2rem;
}

/* Thumbnail row */
.team-thumbs {
  display: flex;
  gap: 0;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  scrollbar-width: none;
}

.team-thumbs::-webkit-scrollbar {
  display: none;
}

.team-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.5rem 1rem;
  flex-shrink: 0;
  transition: opacity var(--transition);
}

.team-thumb:not(.is-active) {
  opacity: 0.55;
}

.team-thumb:hover {
  opacity: 0.85;
}

.team-thumb-img-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid transparent;
  transition: border-color 0.25s ease, transform 0.25s ease;
  background: var(--primary-light);
  flex-shrink: 0;
}

.team-thumb.is-active .team-thumb-img-wrap {
  border-color: var(--accent-on-light);
  transform: scale(1.1);
}

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

.team-thumb-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary-mid);
}

.team-thumb-name {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--text-mid);
  font-weight: 500;
  white-space: nowrap;
}

.team-thumb.is-active .team-thumb-name {
  color: var(--text);
  font-weight: 700;
}

/* Profile detail card */
.team-profiles {
  position: relative;
  min-height: 180px;
}

.team-profile {
  display: none;
}

.team-profile.is-active {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 2rem;
  align-items: flex-start;
  padding: 2rem;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  animation: teamReveal 0.3s ease both;
}

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

@media (max-width: 540px) {
  .team-profile.is-active {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.team-profile-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.team-profile-initials {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 2.5rem;
  color: var(--primary-mid);
}

.team-profile-name {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 0.2rem;
  line-height: 1.2;
}

.team-profile-role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  margin-bottom: 1rem;
}

.team-profile-bio {
  font-size: 0.95rem;
  color: var(--text-mid);
  line-height: var(--lh-body);
  margin: 0;
}


/* ============================================================
   37. SECTION BACKGROUND VARIANTS
   ============================================================ */

/* Slight warm tint for sections that need visual differentiation */
.section-light-tint {
  background: #F0EEE9;
}

/* Mid-dark — for digital twin (slightly lighter than primary-dark) */
.section-mid-dark {
  background: var(--primary-mid);
}

.section-mid-dark .section-label {
  color: rgba(255, 255, 255, 0.6);
}

.section-mid-dark h2 {
  color: var(--white);
}

.section-mid-dark .digital-twin-sub,
.section-mid-dark .digital-twin-features li,
.section-mid-dark .digital-twin-features li::before,
.section-mid-dark .form-label-on-dark,
.section-mid-dark .form-privacy-on-dark {
  color: rgba(255, 255, 255, 0.85);
}

/* Deep dark — for final CTA, darker than primary-dark */
.section-deep-dark {
  background: var(--footer-bg);
}

/* Digital Twin product name highlight */
.digital-twin-name {
  color: var(--accent-on-dark);
  font-style: italic;
}


/* ============================================================
   SUBPAGE COMPONENTS — Team, About, FAQ
   ============================================================ */

/* Gold accent token — used for statin callout only */
:root {
  --accent-gold: #C9A959;
  --accent-gold-tint: rgba(201, 169, 89, 0.08);
}

/* ----- Subpage hero (team, about, faq) ----- */
.subpage-hero {
  padding: calc(var(--nav-height) + 3rem) 0 var(--section-pad);
  text-align: center;
}

.subpage-hero .section-container {
  padding-top: 0;
}

.subpage-hero h1 {
  font-family: var(--font-headline);
  font-size: var(--font-h1);
  font-weight: 900;
  line-height: var(--lh-headline);
  color: var(--white);
  margin: 0.75rem 0 1.25rem;
}

.subpage-hero .subpage-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--text-muted-on-dark);
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
}

.subpage-hero .subpage-intro {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  color: var(--text-muted-on-dark);
  line-height: 1.7;
  max-width: 720px;
  margin: 1.5rem auto 0;
}

.subpage-hero-photo {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1.5rem;
  display: block;
  border: 3px solid rgba(255,255,255,0.15);
}

/* ----- Team grid ----- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}

@media (max-width: 767px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.team-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.25rem;
  align-items: start;
}

/* Empty team slots (data-cms-member-slot with no name in CMS) are
   marked `hidden` on the <article>. Default UA stylesheet sets
   `[hidden] { display: none }`, but our `.team-card { display: grid }`
   above overrides it. Higher-specificity rule below restores the hide. */
.team-card[hidden] {
  display: none;
}

@media (max-width: 480px) {
  .team-card {
    grid-template-columns: 96px 1fr;
    gap: 1rem;
  }
}

.team-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(96, 139, 238, 0.12);
  border: 2px solid var(--border-light, rgba(0,0,0,0.08));
}

.section-dark .team-photo {
  border-color: rgba(255,255,255,0.15);
}

@media (max-width: 480px) {
  .team-photo { width: 96px; height: 96px; }
}

/* Placeholder photo block (for [FRED] headshots) */
.team-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: rgba(96, 139, 238, 0.75);
  background: rgba(96, 139, 238, 0.08);
  text-align: center;
  padding: 0.5rem;
  line-height: 1.25;
}

.section-dark .team-photo-placeholder {
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.04);
}

.team-name {
  font-family: var(--font-headline);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.25rem;
}

.section-dark .team-name { color: var(--white); }

.team-title {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-on-light);
  margin-bottom: 0.75rem;
}

.section-dark .team-title { color: var(--accent-on-dark); }

.team-bio p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 0.75rem;
}

.section-dark .team-bio p { color: var(--text-muted-on-dark); }

.team-bio p:last-child { margin-bottom: 0; }

.team-credentials {
  list-style: none;
  padding: 0.75rem 0 0;
  margin: 0.5rem 0 0;
  border-top: 1px solid var(--border-light, rgba(0,0,0,0.08));
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-light);
}

.section-dark .team-credentials {
  border-top-color: rgba(255,255,255,0.1);
  color: var(--text-muted-on-dark);
}

.team-credentials li {
  padding: 0.2rem 0;
}

.team-card-cta {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent-on-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.section-dark .team-card-cta { color: var(--accent-on-dark); }

.team-card-cta:hover { text-decoration: none; }

/* Team member inline quote (e.g. Dr. Solano) */
.team-bio-quote {
  font-style: italic;
  border-left: 2px solid var(--accent-on-light);
  padding-left: 0.75rem;
  margin: 0.5rem 0;
}

.section-dark .team-bio-quote {
  border-left-color: var(--accent-on-dark);
}

/* Compact team card — 1-sentence summary + "Read more" dialog trigger */
.team-summary {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0.5rem 0 0.75rem;
}

.section-dark .team-summary { color: var(--text-muted-on-dark); }

.team-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent-on-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 32px;
}

.section-dark .team-read-more { color: var(--accent-on-dark); }

.team-read-more:hover { text-decoration: none; }

.team-read-more:focus-visible {
  outline: 2px solid var(--accent-on-light);
  outline-offset: 2px;
  border-radius: 2px;
}
.section-dark .team-read-more:focus-visible {
  outline-color: var(--accent-on-dark);
}

/* Team dialog modal (uses native <dialog>) */
.team-dialog {
  border: none;
  padding: 0;
  max-width: 640px;
  width: 92vw;
  max-height: 88vh;
  border-radius: var(--radius-lg, 8px);
  background: var(--white);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(1, 11, 44, 0.35);
  overflow: hidden;
  /* explicit center — some browsers don't center predictably */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.team-dialog::backdrop {
  background: rgba(1, 11, 44, 0.65);
  backdrop-filter: blur(2px);
}

.team-dialog[open] {
  animation: teamDialogIn 0.2s ease-out;
}

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

.team-dialog-inner {
  max-height: 88vh;
  overflow-y: auto;
  padding: 1.5rem 1.75rem 2rem;
  position: relative;
}

.team-dialog-close {
  position: sticky;
  top: 0;
  float: right;
  margin: -0.5rem -0.5rem 0 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-mid);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  z-index: 2;
}

.team-dialog-close:hover {
  color: var(--text);
  background: rgba(0,0,0,0.05);
}

.team-dialog-close:focus-visible {
  outline: 2px solid var(--accent-on-light);
  outline-offset: 2px;
}

.team-dialog-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  display: block;
  background: rgba(96, 139, 238, 0.12);
}

.team-dialog-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(96, 139, 238, 0.75);
  background: rgba(96, 139, 238, 0.08);
  text-align: center;
}

.team-dialog h3 {
  font-family: var(--font-headline);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  margin: 0 0 0.25rem;
  color: var(--text);
}

.team-dialog .team-title {
  text-align: center;
  margin-bottom: 1.25rem;
  color: var(--accent-on-light);
}

.team-dialog .team-bio p {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}

.team-dialog .team-bio p:last-child { margin-bottom: 0; }

.team-dialog .team-credentials {
  border-top: 1px solid rgba(0,0,0,0.08);
  color: var(--text-light);
  margin-top: 1.25rem;
  padding-top: 1rem;
}

.team-dialog .team-bio-quote {
  border-left-color: var(--accent-on-light);
  color: var(--text);
}

/* ----- Tier access table (team page) ----- */
.tier-table-wrap {
  margin: 1.5rem 0 1rem;
  overflow-x: auto;
}

.tier-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.95rem;
  min-width: 540px;
}

.tier-table th,
.tier-table td {
  text-align: left;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.1));
  vertical-align: top;
}

.tier-table thead th {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
  font-weight: 600;
  border-bottom: 2px solid var(--accent-on-light);
  background: transparent;
}

.tier-table tbody th {
  font-weight: 700;
  color: var(--text);
  width: 28%;
}

.tier-table tbody tr:last-child th,
.tier-table tbody tr:last-child td {
  border-bottom: none;
}

.section-dark .tier-table th,
.section-dark .tier-table td {
  border-bottom-color: rgba(255,255,255,0.1);
  color: var(--white);
}
.section-dark .tier-table thead th {
  color: var(--text-muted-on-dark);
  border-bottom-color: var(--accent-on-dark);
}

/* ----- Credentials quick-reference table (about page) ----- */
.credentials-table-wrap {
  margin: 2rem 0;
  overflow-x: auto;
}

.credentials-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.95rem;
  min-width: 420px;
}

.credentials-table th,
.credentials-table td {
  text-align: left;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  vertical-align: top;
  color: var(--white);
}

.credentials-table th {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-on-dark);
  font-weight: 600;
  width: 38%;
}

.credentials-table tr:last-child th,
.credentials-table tr:last-child td {
  border-bottom: none;
}

.section-light .credentials-table th,
.section-light .credentials-table td {
  border-bottom-color: rgba(0,0,0,0.1);
  color: var(--text);
}
.section-light .credentials-table th {
  color: var(--accent-on-light);
}

/* ----- Statin callout (about page) ----- */
.statin-callout {
  border-left: 4px solid var(--accent-gold);
  background: var(--accent-gold-tint);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  font-family: var(--font-headline);
  font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.6;
  color: var(--white);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.section-light .statin-callout {
  color: var(--text);
  background: var(--accent-gold-tint);
}

.statin-callout p {
  margin: 0;
}

/* ----- About page narrative sections ----- */
.about-narrative p {
  margin: 0 0 1.25rem;
  line-height: 1.7;
  font-size: var(--font-body-size);
}

.about-narrative p:last-child { margin-bottom: 0; }

.section-dark .about-narrative p { color: var(--text-muted-on-dark); }

/* ABOUT-4b sub-section blocks (HeartReveal, Digital Twin) */
.subsection-block {
  margin-top: 2.5rem;
}

.subsection-block:first-of-type {
  margin-top: 2rem;
}

.subsection-heading {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.section-dark .subsection-heading { color: var(--white); }

.subsection-heading-status {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  margin-left: 0.5rem;
  border-radius: 2px;
  color: var(--accent-on-dark);
  background: rgba(96, 139, 238, 0.15);
  vertical-align: middle;
}

/* ----- FAQ list — native <details> accordion (faq.html) ----- */
.faq-list {
  margin: 1.5rem 0 0;
}

.faq-list-item {
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.1));
  padding: 0;
}

.section-dark .faq-list-item {
  border-bottom-color: rgba(255,255,255,0.12);
}

.faq-list-item:first-child {
  border-top: 1px solid var(--border-light, rgba(0,0,0,0.1));
}
.section-dark .faq-list-item:first-child {
  border-top-color: rgba(255,255,255,0.12);
}

.faq-list-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 2.5rem 1.1rem 0;
  font-family: var(--font-headline);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.faq-list-item > summary::-webkit-details-marker { display: none; }

.section-dark .faq-list-item > summary { color: var(--white); }

.faq-list-item > summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-headline);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-on-light);
  transition: transform 0.2s ease;
}

.section-dark .faq-list-item > summary::after {
  color: var(--accent-on-dark);
}

.faq-list-item[open] > summary::after {
  content: '×';
  transform: translateY(-50%) rotate(0deg);
}

.faq-list-item > summary:focus-visible {
  outline: 2px solid var(--accent-on-light);
  outline-offset: 2px;
  border-radius: 2px;
}
.section-dark .faq-list-item > summary:focus-visible {
  outline-color: var(--accent-on-dark);
}

.faq-list-answer {
  padding: 0 2.5rem 1.25rem 0;
}

.faq-list-answer p {
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.7;
}

.faq-list-answer p:last-child { margin-bottom: 0; }

.section-dark .faq-list-answer p { color: var(--text-muted-on-dark); }

.faq-list-answer a {
  color: var(--accent-on-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.section-dark .faq-list-answer a {
  color: var(--accent-on-dark);
}

/* ----- Generic "category" section header spacing ----- */
.faq-category + .faq-category {
  margin-top: 0;
}

/* ----- Final CTA block (subpage bottom) ----- */
.subpage-final-cta {
  text-align: center;
}

.subpage-final-cta h2 {
  margin-bottom: 1rem;
}

.subpage-final-cta p {
  max-width: 620px;
  margin: 0 auto 1.75rem;
  font-size: var(--font-body-size);
  line-height: 1.6;
}

.subpage-final-cta .btn-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 520px) {
  .subpage-final-cta .btn-row {
    flex-direction: column;
    align-items: stretch;
  }
  .subpage-final-cta .btn-row .btn-primary,
  .subpage-final-cta .btn-row .btn-outline {
    width: 100%;
  }
}


/* ============================================================
   .section-blue OVERRIDES — for new subpage components
   On a #608BEE background, the default --accent-on-dark (#608BEE)
   becomes invisible. Re-color accents to white or dark navy.
   ============================================================ */

/* Subpage hero on blue */
.section-blue.subpage-hero .subpage-subtitle,
.section-blue.subpage-hero .subpage-intro {
  color: rgba(255, 255, 255, 0.9);
}
.section-blue.subpage-hero .subpage-hero-photo {
  border-color: rgba(255, 255, 255, 0.4);
}

/* Team cards on blue */
.section-blue .team-name { color: #ffffff; }
.section-blue .team-title { color: #010B2C; }
.section-blue .team-summary { color: rgba(255, 255, 255, 0.9); }
.section-blue .team-bio p { color: rgba(255, 255, 255, 0.9); }
.section-blue .team-photo { border-color: rgba(255, 255, 255, 0.25); }
.section-blue .team-photo-placeholder {
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
}
.section-blue .team-credentials {
  border-top-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
}
.section-blue .team-card-cta,
.section-blue .team-read-more {
  color: #ffffff;
}
.section-blue .team-read-more:focus-visible,
.section-blue .team-card-cta:focus-visible {
  outline-color: #ffffff;
}
.section-blue .team-bio-quote {
  border-left-color: #010B2C;
  color: #ffffff;
}

/* Tier table (if ever placed in a blue section) */
.section-blue .tier-table th,
.section-blue .tier-table td {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.section-blue .tier-table thead th {
  color: rgba(255, 255, 255, 0.85);
  border-bottom-color: #010B2C;
}

/* Credentials table on blue */
.section-blue .credentials-table th { color: #ffffff; }
.section-blue .credentials-table td { color: #ffffff; }
.section-blue .credentials-table th,
.section-blue .credentials-table td {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* About narrative on blue */
.section-blue .about-narrative p { color: rgba(255, 255, 255, 0.95); }

/* About sub-section blocks (HeartReveal, Digital Twin) */
.section-blue .subsection-heading { color: #ffffff; }
.section-blue .subsection-heading-status {
  color: #010B2C;
  background: rgba(255, 255, 255, 0.85);
}

/* Statin callout on blue: still gold border, but ensure text contrast */
.section-blue .statin-callout {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border-left-color: var(--accent-gold);
}
.section-blue .statin-callout p {
  /* full white (not the 0.9 body default) to clear AA on the faint overlay */
  color: #ffffff;
}

/* FAQ list on blue */
.section-blue .faq-list-item,
.section-blue .faq-list-item:first-child {
  border-color: rgba(255, 255, 255, 0.25);
}
.section-blue .faq-list-item > summary { color: #ffffff; }
.section-blue .faq-list-item > summary::after { color: #ffffff; }
.section-blue .faq-list-item > summary:focus-visible { outline-color: #ffffff; }
.section-blue .faq-list-answer p { color: rgba(255, 255, 255, 0.92); }
.section-blue .faq-list-answer a {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* btn-outline on blue (existing pattern matched to white-on-blue) */
.section-blue .btn-outline {
  color: #ffffff;
  border-color: #ffffff;
}
.section-blue .btn-outline:hover {
  background: #ffffff;
  color: #608BEE;
}

/* Biomarker slider cards (labs page) */
.biomarker-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 1rem;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.3) transparent;
}

.biomarker-slider::-webkit-scrollbar { height: 4px; }
.biomarker-slider::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; }

.biomarker-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-lg, 8px);
  padding: 1.5rem;
}

.biomarker-card h3 {
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1rem;
}

.biomarker-card ul {
  list-style: none;
  padding: 0;
}

.biomarker-card li {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.9);
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.biomarker-card li:last-child { border-bottom: none; }

.biomarker-card li strong {
  color: #ffffff;
  display: block;
  margin-bottom: 0.15rem;
}

@media (max-width: 767px) {
  .biomarker-card { flex: 0 0 calc(100vw - 72px); }
}

/* Testimonial slider (labs social proof) */
.testi-slider {
  position: relative;
}

.testi-slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 1rem;
  scrollbar-width: none;
}

.testi-slider-track::-webkit-scrollbar { display: none; }

.testi-slider .testi-card {
  flex: 0 0 calc(100% - 2rem);
  scroll-snap-align: center;
  max-width: 520px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .testi-slider .testi-card { flex: 0 0 460px; }
}

.testi-slider-nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.25rem;
}

.testi-slider-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  background: var(--white);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testi-slider-btn:hover { background: rgba(0,0,0,0.05); }

/* CP testimonials: white card on blue section — square photo + wider text block, same height */
.testi-card-landscape {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem;
  max-width: 540px;
  margin: 0 auto;
  align-items: stretch;
  background: transparent;
}

.testi-card-landscape .testi-photo-square {
  width: 200px;
  height: 200px;
  object-fit: cover;
  display: block;
  border: 3px solid #608BEE;
  border-radius: var(--radius-lg, 8px);
  box-sizing: border-box;
}

.testi-card-landscape .testi-quote-side {
  height: 200px;
  background: var(--white);
  border-radius: var(--radius-lg, 8px);
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.testi-card-landscape .testi-quote-mark {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  color: #608BEE;
  line-height: 0.8;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.testi-card-landscape .testi-body {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.testi-card-landscape .testi-name {
  color: var(--text);
  font-weight: 700;
  font-size: 0.92rem;
  display: block;
  line-height: 1.2;
  font-style: normal;
}

.testi-card-landscape .testi-context {
  color: #608BEE;
  font-size: 0.82rem;
  display: block;
  margin-top: 0.2rem;
  font-style: normal;
}

@media (max-width: 560px) {
  .testi-card-landscape {
    grid-template-columns: 1fr;
    max-width: 320px;
    gap: 0.75rem;
  }
  .testi-card-landscape .testi-photo-square {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .testi-card-landscape .testi-quote-side {
    height: auto;
    min-height: 180px;
  }
}

/* Comparison table on blue: HeartReveal col header matches Standard */
.section-blue .comparison-col-heartreveal {
  color: var(--text-muted-on-dark);
}
.section-blue .comparison-table td:last-child {
  color: rgba(255, 255, 255, 0.95);
}

/* About page: credentials table sits directly on the (dark) blue -> white.
   (about-narrative p already inherits white from the .section-blue rules.) */
.page-about .section-blue .credentials-table td,
.page-about .section-blue .credentials-table th {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* Team page: section header sits on the (dark) blue -> white. Team cards have a
   white background (.team-card), so their text stays dark navy. */
.page-team .section-blue h2,
.page-team .section-blue .section-label,
.page-team .section-blue .section-intro {
  color: #ffffff;
}
.page-team .section-blue .team-name,
.page-team .section-blue .team-summary,
.page-team .section-blue .team-read-more,
.page-team .section-blue .team-bio p,
.page-team .section-blue .team-credentials {
  color: #010B2C;
}

.page-team .section-blue .team-photo {
  border-color: rgba(1, 11, 44, 0.25);
}

.page-team .section-blue .team-credentials {
  border-top-color: rgba(1, 11, 44, 0.2);
}

.page-team .section-blue .team-read-more:focus-visible {
  outline-color: #010B2C;
}


/* ============================================
   SHOP PAGE — Shopify Buy Button container
   ============================================ */

.shop-section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }

.shop-heading {
  font-family: var(--font-headline);
  font-size: var(--font-h1);
  color: var(--text);
  line-height: var(--lh-headline);
  margin-bottom: 1rem;
}

.shop-intro {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  color: var(--text-mid);
  line-height: var(--lh-body);
  margin-bottom: 3rem;
  max-width: 640px;
}

#shopify-collection-embed {
  min-height: 400px; /* Prevents layout shift while Shopify script loads */
}

/* Optional: if Shopify's default grid is too wide, constrain it */
#shopify-collection-embed .shopify-buy__collection {
  max-width: 100%;
}


/* ============================================
   BLOG INDEX PAGE — blog.html
   ============================================ */

.blog-hero {
  padding-top: calc(var(--nav-height) + var(--section-pad));
  padding-bottom: var(--section-pad);
}

.blog-hero-heading {
  font-family: var(--font-headline);
  font-size: var(--font-h1);
  color: var(--primary-light);
  line-height: var(--lh-headline);
  margin-bottom: 1rem;
}

.blog-hero-heading em {
  font-style: italic;
  color: var(--accent-on-dark);
}

.blog-hero-subhead {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  color: var(--text-body-on-dark);
  line-height: var(--lh-body);
  max-width: 640px;
}

/* Article grid */
.blog-grid-section {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.blog-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  background: var(--white);
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.blog-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.blog-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.blog-card-body {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-date {
  font-family: var(--font-mono);
  font-size: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  display: block;
  margin-bottom: 0.5rem;
}

.blog-card-title {
  font-family: var(--font-headline);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  color: var(--text);
  line-height: 1.3;
  margin: 0 0 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-excerpt {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-mid);
  line-height: 1.5;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-read-more {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-on-light);
}

/* Loading state */
.blog-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 0;
  font-family: var(--font-body);
  color: var(--text-light);
}

.blog-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 0;
  font-family: var(--font-body);
  color: var(--text-light);
}

/* Pagination */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.blog-page-indicator {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-mid);
}


/* ============================================
   BLOG POST PAGE — blog-post.html
   ============================================ */

.post-hero {
  padding-top: calc(var(--nav-height) + var(--section-pad));
  padding-bottom: var(--section-pad);
}

.post-breadcrumb {
  margin-bottom: 1.5rem;
}

.post-breadcrumb-link {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--accent-on-dark);
  text-decoration: none;
  transition: opacity var(--transition);
}

.post-breadcrumb-link:hover {
  opacity: 0.8;
}

.post-hero-heading {
  font-family: var(--font-headline);
  font-size: var(--font-h1);
  color: var(--primary-light);
  line-height: var(--lh-headline);
  margin-bottom: 1rem;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted-on-dark);
  margin-bottom: 2rem;
}

.post-meta span::after {
  content: '\00b7';
  margin-left: 1rem;
}

.post-meta span:last-child::after {
  content: none;
}

.post-featured-image {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-top: 1rem;
}

/* Post body — article content container */
.post-body {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

.post-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

/* Typography for Shopify-injected HTML content */
.post-content {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  color: var(--text);
  line-height: var(--lh-body);
}

.post-content h2 {
  font-family: var(--font-headline);
  font-size: var(--font-h2);
  color: var(--text);
  line-height: var(--lh-headline);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.post-content h3 {
  font-family: var(--font-headline);
  font-size: var(--font-h3);
  color: var(--text);
  line-height: var(--lh-headline);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.post-content p {
  margin-bottom: 1.25rem;
}

.post-content ul,
.post-content ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.post-content li {
  margin-bottom: 0.5rem;
}

.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: 1.5rem 0;
}

.post-content blockquote {
  border-left: 3px solid var(--accent-on-light);
  padding-left: 1.25rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--text-mid);
}

.post-content a {
  color: var(--accent-on-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-content a:hover {
  opacity: 0.8;
}

/* Loading state */
.post-loading {
  text-align: center;
  padding: 3rem 0;
  font-family: var(--font-body);
  color: var(--text-light);
}


/* ============================================
   STATIC BLOG POST — /blog/[slug].html
   Per planning/blog-migration-research-v1.0.md §3.2.
   ============================================ */

/* Hero block (sits inside .subpage-hero / section-dark).
   All hero content shares the same max-width so breadcrumb, eyebrow,
   H1, dek, and byline align to the same left+right edges (no jagged
   widths on desktop). */
.post-hero .section-container > * {
  max-width: 760px;
}

.post-breadcrumb {
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.post-breadcrumb a {
  color: var(--accent-on-dark);
  text-decoration: none;
}

.post-breadcrumb a:hover {
  text-decoration: underline;
}

.post-dek {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--text-body-on-dark);
  line-height: 1.5;
  margin: 0 0 2rem;
}

.post-byline {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1.5rem;
}

.post-author-thumb {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--white);
}

.post-byline-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: var(--font-body);
  line-height: 1.4;
}

.post-byline-name {
  color: var(--white);
  font-size: 0.95rem;
}

.post-byline-name strong {
  font-weight: 600;
}

.post-byline-meta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted-on-dark);
}

/* Hero image — sits between hero block and body */
.post-hero-image-wrap {
  margin: 0;
  padding: 0;
  background: var(--white);
}

.post-hero-image {
  display: block;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  height: auto;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Body — readable prose column inside the standard container.
   760px gives ~78 chars/line at the body font — slightly wider than
   the textbook 65-char ideal so desktop readers don't get a scroll
   tunnel on long posts, but still narrower than the 860px site
   container. */
.post-body {
  padding-top: 3rem;
  padding-bottom: var(--section-pad);
}

.post-prose {
  max-width: 760px;
  margin: 0 auto;
}

/* Slightly larger body type than the site default — the site default
   serves dense marketing copy; long-form prose reads better at +1px. */
.post-prose.post-content {
  font-size: clamp(1.02rem, 1.45vw, 1.1rem);
  line-height: 1.7;
}

/* The body content typography reuses .post-content (already styled
   for the legacy Shopify blog-post page — see ~line 5808). */

/* Mid-body inline CTA — appears once around 60% through the body */
.post-inline-cta {
  margin: 2.5rem 0;
  padding: 1.5rem 1.5rem 1.75rem;
  border-left: 4px solid var(--accent-on-light);
  background: #F5F7FB;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.post-inline-cta-text {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 1rem;
}

.post-inline-cta .btn-primary {
  margin: 0;
}

/* End-of-post disclaimer */
.post-disclaimer {
  max-width: 760px;
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-light);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.5;
}

/* Mobile tightening */
@media (max-width: 520px) {
  .post-byline {
    gap: 0.75rem;
  }
  .post-author-thumb {
    width: 48px;
    height: 48px;
  }
  .post-byline-name {
    font-size: 0.9rem;
  }
}


/* ============================================
   STATIC BLOG INDEX — blog.html (rebuilt against manifest)
   Per planning/blog-migration-research-v1.0.md §3.3 (architecture
   scales to ~100 posts: tag filter + grid + future "Load more"
   slot).
   ============================================ */

/* Wider container for the blog index — the standard 860px feels
   cramped at 9 cards and would look outright stark at 30+. Cap at
   1200px so the grid breathes on desktop without falling apart on
   ultrawide. */
.blog-grid-section .section-container {
  max-width: 1200px;
}

/* Tag filter strip — the basic "industry-standard" blog navigation
   pattern (chips that filter the grid). Lives above the featured
   card so it doesn't get scrolled past on long indexes. Designed
   to scale to ~8-10 chips and stay horizontally scrollable on
   mobile.

   Filter logic lives in js/main.js §13. The "All" chip is the
   default-active state. Cards declare their tags via data-tag
   (space-separated); JS toggles .is-hidden when a non-matching
   chip is active. */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  align-items: center;
}

.blog-filter-label {
  font-family: var(--font-mono);
  font-size: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mid);
  margin-right: 0.5rem;
}

.blog-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border-light);
  border-radius: 999px;  /* pill */
  background: var(--white);
  color: var(--text-mid);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.blog-filter-chip:hover {
  border-color: var(--accent-on-light);
  color: var(--accent-on-light);
}

.blog-filter-chip.is-active {
  background: var(--accent-on-light);
  border-color: var(--accent-on-light);
  color: var(--white);
}

.blog-filter-chip:focus-visible {
  outline: 2px solid var(--accent-on-dark);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .blog-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-left: calc(-1 * var(--page-pad));
    margin-right: calc(-1 * var(--page-pad));
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
    scrollbar-width: thin;
  }
  .blog-filter-chip {
    flex-shrink: 0;
  }
}

/* Cards hidden by filter */
.blog-featured.is-hidden,
.blog-card.is-hidden {
  display: none !important;
}

/* Empty state when filter matches no posts */
.blog-empty-filter {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-mid);
  display: none;  /* JS shows when no cards visible */
}

.blog-empty-filter.is-visible {
  display: block;
}

/* Featured card — large image-left/title-right (stacks on mobile) */
.blog-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 3rem;
  transition: box-shadow var(--transition), transform var(--transition);
}

.blog-featured:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.blog-featured-link {
  display: contents;
  text-decoration: none;
  color: inherit;
}

.blog-featured-image {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  display: block;
}

.blog-featured-body {
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-featured-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-on-light);
  margin-bottom: 0.75rem;
}

.blog-featured-title {
  font-family: var(--font-headline);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  color: var(--text);
  line-height: 1.25;
  margin: 0 0 0.85rem;
}

.blog-featured-dek {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--text-mid);
  margin: 0 0 1.25rem;
}

.blog-featured-read-more {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-on-light);
}

@media (max-width: 720px) {
  .blog-featured {
    grid-template-columns: 1fr;
  }
  .blog-featured-image {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .blog-featured-body {
    padding: 1.5rem 1.5rem 1.75rem;
  }
}

/* Standard card dek — used by the 8 non-featured cards */
.blog-card-dek {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-mid);
  margin: 0 0 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-on-light);
  display: block;
  margin-bottom: 0.4rem;
}

/* Read-more pinned to bottom of the card so all cards line up
   regardless of title/dek length. */
.blog-card .blog-card-read-more {
  margin-top: auto;
}


/* ============================================
   LEGAL PAGES — privacy.html, terms.html,
   disclaimer.html, cookies.html
   [SECTION: legal | page: privacy + terms + disclaimer + cookies]

   Plain-text-heavy pages with a centered max-width container,
   draft-notice callout, and emergency-call-out variant. All four
   pages use section-light and a uniform .legal-container so the
   reading experience matches across them.
   ============================================ */

.page-legal main {
  background-color: var(--bg-light, #ffffff);
}

.legal-hero,
.legal-section {
  padding: 3rem var(--page-pad, 1.5rem);
}

.legal-hero {
  padding-top: 4rem;
  padding-bottom: 2rem;
}

/* First content section sits flush against the hero. */
.legal-hero + .legal-section {
  padding-top: 1rem;
}

.legal-container {
  max-width: 760px;
  margin: 0 auto;
}

.legal-container .section-label {
  font-family: var(--font-mono);
  font-size: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-on-light, #608BEE);
  display: block;
  margin-bottom: 0.6rem;
}

.legal-container h1 {
  font-family: var(--font-headline);
  font-size: var(--font-h1, 2.25rem);
  line-height: 1.15;
  color: var(--text-dark, #010B2C);
  margin: 0 0 0.5rem;
}

.legal-container h2 {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--text-dark, #010B2C);
  margin: 0 0 0.75rem;
}

.legal-container h3 {
  font-family: var(--font-headline);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--text-dark, #010B2C);
  margin: 1.5rem 0 0.5rem;
}

.legal-container p,
.legal-container li {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-mid, #2d3a55);
}

.legal-container p {
  margin: 0 0 1rem;
}

.legal-container ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.legal-container li {
  margin: 0 0 0.5rem;
}

.legal-container a {
  color: var(--accent-on-light, #608BEE);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.legal-container a:hover,
.legal-container a:focus {
  color: var(--text-dark, #010B2C);
}

.legal-container code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 0.1rem 0.35rem;
  background-color: rgba(96, 139, 238, 0.08);
  border-radius: 3px;
}

/* Small muted line under the H1 — last-updated + effective date. */
.legal-meta {
  font-family: var(--font-mono);
  font-size: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #5b6781);
  margin: 0 0 1.5rem;
}

/* Lead paragraph after the draft notice — slightly larger. */
.legal-intro {
  font-size: 1.05rem !important;
  color: var(--text-dark, #010B2C) !important;
}

/* DRAFT — pending attorney review callout. Amber/gold border + bg
   so attorneys see at-a-glance that the document is not final. */
.legal-draft-notice {
  background-color: #FFF8E5;
  border-left: 4px solid #E0A800;
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
  border-radius: 4px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-dark, #010B2C);
}

.legal-draft-notice strong {
  display: block;
  margin-bottom: 0.25rem;
  color: #7A5C00;
}

/* HIPAA section — slight visual distinction so it's easy to find
   from inbound anchor links (privacy.html#hipaa-notice). */
.legal-hipaa {
  border-top: 1px solid #D6DCEA;
  background-color: #F8FAFD;
}

/* Emergency callout on the medical disclaimer page — high-priority,
   draws the eye. Red-tinted left border. */
.legal-emergency .legal-container {
  border-left: 4px solid #C53030;
  padding-left: 1rem;
}

.legal-emergency h2 {
  color: #C53030;
}

/* Reduce side padding on small screens so the reading column
   keeps its narrow line-length without crowding the edges. */
@media (max-width: 600px) {
  .legal-hero,
  .legal-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .legal-container h1 {
    font-size: 1.75rem;
  }

  .legal-container h2 {
    font-size: 1.2rem;
  }
}


/* ============================================================
   REVIEW NOTES (Jack, 2026-06) — readability + sizing tweaks
   ============================================================ */

/* #3 Home hero — bigger sub-copy + a bigger primary CTA so the next step is obvious */
.hero-byline  { font-size: clamp(1.1rem, 1.7vw, 1.25rem); line-height: 1.5; }
.hero-subhead { font-size: clamp(1.2rem, 2vw, 1.35rem); }
.hero .btn-xl { font-size: 1.3rem; padding: 1.25rem 3rem; min-height: 64px; }

/* #4 Home hero — show Dr. Brewer's photo on mobile/tablet, below the CTA */
@media (max-width: 1023px) {
  .hero-portrait {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 1.75rem auto 0;
  }
}

/* #5 Home Clinical Program cards — bigger text + consistent dark CTAs.
   (section flips to section-blue in the HTML so the white cards read clearly) */
#pricing-preview .price-label    { font-size: 1.2rem; }
#pricing-preview .price-period   { font-size: 1.05rem; }
#pricing-preview .price-best-for { font-size: 1rem; font-style: normal; color: #1A2130; line-height: 1.5; }
#pricing-preview .price-card .btn-primary { font-size: 1.05rem; padding: 1rem 1.5rem; }

/* #6 About credentials — bigger, higher-contrast text on the blue background */
#about-credentials .about-narrative p { font-size: 1.15rem; }
#about-credentials .credentials-table { font-size: 1.05rem; }
#about-credentials .credentials-table th { font-size: 0.92rem; color: #ffffff; }
#about-credentials .credentials-table td { color: #ffffff; }

/* ============================================================
   COOKIE CONSENT BANNER (js/consent.js — GA4 consent gate)
   ============================================================ */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: var(--primary-dark);
  color: #ffffff;
  padding: 1rem var(--page-pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem 1.5rem;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.cookie-consent-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 70ch;
}
.cookie-consent-text a { color: var(--accent-on-dark); text-decoration: underline; }
.cookie-consent-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.cookie-btn {
  font-family: var(--font-body);
  font-size: 0.875rem;
  padding: 0.55rem 1.4rem;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition);
}
.cookie-accept { background: #ffffff; color: var(--primary-dark); border-color: #ffffff; font-weight: 600; }
.cookie-accept:hover { background: rgba(255, 255, 255, 0.88); }
.cookie-decline { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.55); }
.cookie-decline:hover { background: rgba(255, 255, 255, 0.12); }
.cookie-btn:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 2px; }
@media (max-width: 600px) {
  .cookie-consent { flex-direction: column; text-align: center; gap: 0.75rem; }
  .cookie-consent-actions { width: 100%; justify-content: center; }
}