/* =========================================================
   BREAK THE I.T.C.H., Demo Microsite
   Tokens & base styles · static HTML/CSS/JS
   ========================================================= */

/* ---------- 0. Self-hosted fonts (v2.5) ----------
   Latin woff2 subsets served from /assets/fonts/ — no third-party font
   requests (privacy posture for a pharma property) and faster LCP than the
   Google Fonts round trip. Weblite migration inherits the files. */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-condensed-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-condensed-500.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-400.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/montserrat-500.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-600.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-700.woff2") format("woff2");
}
/* v4: Inter retired per Au (brand designer) — Montserrat is the body face per
   her typesetting sample; Barlow drops to 400/500 to match ISEEU's lighter cuts */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand palette — v4 (Au, Novartis Visual Guide, Jul 2026): Alabaster-led
     warm surfaces, coral leads as the brand accent, cerulean/sky/jasmine as
     the variety accents, skin/peach tones as washes. One main color per page,
     others accent, per the guide's usage-ratio rule. */
  --color-base: #f8f7f3; /* Alabaster 50% — page background */
  --color-surface-1: #f0eee6; /* Alabaster 100% — alternating sections */
  --color-surface-2: #e8e5d9; /* the guide's darker contrast tint */
  --color-surface-3: #e0ddd0;
  --color-surface-4: #d8d4c6;
  --color-card: #ffffff;
  --color-card-soft: #f4f2ec;

  --color-primary: #b84238; /* v5: deep Novartis Coral — v1's warm interactive role restored (rust → coral per Au). 5.4:1 white, 4.7:1 alabaster */
  --color-primary-hover: #a83a30;
  --color-rust: #a2381c; /* rust (deep warm, kept for accessibility text + compliance footnotes) */
  --color-rust-hover: #852408;
  --color-accent: #ee7067; /* v4: Novartis Light Coral (Visual Guide 100%) */
  --color-accent-hover: #cf5547; /* text-safe deep coral, 4.2:1 on white */
  --color-coral-50: #fbe2e1; /* brand 20% tint */
  --color-coral-100: #f6b7b3; /* brand 50% tint */
  --color-coral-200: #f29b95;
  --color-coral-300: #ee7067;
  /* Warm KV palette: orange + peach + pink */
  --color-orange: #e85d2c;
  --color-orange-soft: #ff7a3d;
  --color-peach: #fdd9b7; /* v4: Novartis Light Peach (100%) */
  --color-peach-soft: #feecdc; /* brand 50% tint */
  --color-pink: #ffa896;
  --color-pink-soft: #ffcec4;
  /* BRAND deep teal, deck swatch 3 (anchor cool tone) */
  --color-teal: #196a8c;
  --color-teal-hover: #134f6a;
  --color-teal-deep: #0d3a52; /* deeper teal for AA Normal contrast on btn--sky */
  --color-teal-soft: #2a85ad;
  --color-teal-50: #dae3ee; /* v4: brand Cerulean 20% tint */
  /* BRAND sky blue — v4: exact Visual Guide values */
  --color-sky: #61c3d9; /* Sky Blue 100% */
  --color-sky-soft: #bee3ee; /* brand 50% tint */
  --color-sky-deep: #4a9cb8;
  --color-cerulean: #0081a8; /* Cerulean 100% — large text/graphics only (3.9:1); interactive stays --color-primary */
  /* BRAND yellow, deck swatch 5 (punctuation accent only) */
  --color-yellow: #fcd769; /* v4: Novartis Jasmine Yellow (100%) */
  --color-yellow-soft: #fdebb4; /* brand 50% tint */
  --color-yellow-deep: #d9a92a;
  --color-yellow-text: #a07a10;
  /* v5.2: section wash leads — the guide's "one main color per section" variety */
  --color-wash-sky: #e9f4f8; /* Sky Blue ~20% */
  --color-wash-jasmine: #fdf6df; /* Jasmine ~20% */ /* v2.1: text-safe ochre, ≥3.6:1 on white/cream (yellow-deep only hits 2:1) */
  /* Taupe, surface counterpart */
  --color-taupe: #6b5a4d;
  --color-taupe-soft: #c9b8a8;
  /* Reusable gradient mixes */
  --gradient-warm: linear-gradient(
    135deg,
    var(--color-pink) 0%,
    var(--color-accent) 50%,
    var(--color-orange) 100%
  );
  --gradient-warm-soft: linear-gradient(
    135deg,
    var(--color-peach-soft) 0%,
    var(--color-pink-soft) 50%,
    var(--color-coral-50) 100%
  );
  --gradient-sunrise: linear-gradient(
    180deg,
    var(--color-coral-50) 0%,
    var(--color-peach-soft) 50%,
    var(--color-pink-soft) 100%
  );
  --gradient-burnt: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    var(--color-orange) 60%,
    var(--color-primary-hover) 100%
  );
  /* Signature brand-moment gradient — v5: warm coral ramp (v1's anthem soul, brand
     values) with one sky bloom as the cool accent. Used once per page maximum. */
  --gradient-anthem:
    radial-gradient(
      ellipse 55% 65% at 85% 12%,
      rgba(97, 195, 217, 0.3),
      transparent 55%
    ),
    linear-gradient(
      160deg,
      var(--color-coral-100) 0%,
      var(--color-accent) 50%,
      var(--color-primary) 100%
    );

  --color-text: #1b2226; /* v2: cool near-black (was warm #1d1b19) */
  --color-text-body: #333b41; /* v7.7: blacker per Hans — 11.4:1 white / 9.8:1 alabaster */
  --color-text-muted: #5c6b72; /* v2: cool muted (was #693938), 4.9:1 on white */
  --color-text-soft: rgba(51, 59, 65, 0.62); /* follows body */

  --color-footer-dark: #134f6a; /* deep teal anchor, brand sign-off */
  --color-footer-text: #e8f1f6;

  --color-border: rgba(210, 214, 214, 0.6);
  --color-border-soft: rgba(210, 214, 214, 0.35);
  --color-border-coral: rgba(
    178,
    192,
    196,
    0.55
  ); /* v2: cool gray-blue border (ISEEU #b2c0c4), was warm coral tint */
  --color-focus: #b84238; /* v5: follows primary */

  /* Status */
  --color-success: #2f7d4e;
  --color-warning: #b56b1f;

  /* Typography — v2.3 split: Montserrat is the brand voice (headings, nav,
     buttons, labels, numerals — the confirmed official brand font); Inter is
     the reading face (paragraphs, ledes, long-form), matching the global
     ISEEU site's own body font. Montserrat is a geometric display face and
     tires the eye in running text. */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:
    "Montserrat", "Helvetica Neue", Arial, sans-serif; /* v4: per Au's typesetting sample */
  /* v2.5: condensed display voice for H1/H2 and hero moments — echoes the
     official condensed wordmark and matches ISEEU global's display font. */
  --font-condensed: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;

  /* Weight map — v2.3: 800 retired (Montserrat extrabold turns blobby; counters
     close up). One job per weight: 700 display/H1/H2 · 600 subheads/buttons/
     strong · 500 UI medium · 400 body. */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 600;
  --fw-xbold: 700;

  /* Fluid type scale — v2.1 recalibration (client: headings too large).
     Modular scale, 1.25 (major third) between heading steps at the desktop cap,
     ceilings roughly halved vs v2: display 72, h1 56, h2 40, h3 28, h4 22.
     Mobile floors sit one step down so hierarchy survives at 360px. */
  --fs-eyebrow: 0.75rem; /* 12 */
  --fs-label: 0.875rem; /* 14 */
  --fs-body: 1rem; /* 16 */
  --fs-body-lg: 1.125rem; /* 18 */
  --fs-lead: 1.25rem; /* 20 */
  --fs-lead-lg: 1.375rem; /* 22 */
  --fs-h4: clamp(1.125rem, 0.6vw + 1rem, 1.375rem); /* 18 → 22 */
  --fs-h3: clamp(1.375rem, 1vw + 1.05rem, 1.75rem); /* 22 → 28 */
  /* v2.6: condensed steps bumped ~20% — Barlow Condensed's narrow forms need
     optical compensation vs the Montserrat-era caps. Montserrat steps (h3/h4)
     unchanged, which widens the display-to-structure contrast. */
  --fs-h2: clamp(
    2.5rem,
    2vw + 1.7rem,
    3.25rem
  ); /* v7.5: 40 → 52 — Barlow floor rule (see DESIGN-SYSTEM §2) */
  --fs-h1: clamp(2.75rem, 4vw + 1.4rem, 5rem); /* v6.1: 44 → 80 (hero bump) */
  --fs-display: clamp(
    3rem,
    5.5vw + 1.5rem,
    6.25rem
  ); /* v6.1: 48 → 100 (hero bump) */

  /* v2.3: metrics retuned for the Montserrat/Inter split. Montserrat's large
     cap height needs more air (tight 1.1 → 1.12) and less negative tracking
     than Jakarta did (−0.04 collided letterforms); Inter reads best at 1.6/1.7. */
  --lh-tight: 1.1; /* v5.2 */
  --lh-snug: 1.25;
  --lh-base: 1.6;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.01em;
  --tracking-tighter: -0.02em;
  --tracking-wide: 0.075em;
  --tracking-wider: 0.1em;

  /* Spacing scale (8pt grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii — v2.2: halved. The 24/32/48 scale read bubbly/toy-like (client flag);
     this scale keeps softness without the cards reading as blobs. Pills stay
     for buttons/chips only. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* Shadows */
  /* v2.9: shadows tinted to the ink/teal hue (was pure black) — tinted shadows
     sit in the palette instead of graying it; opacities nudged +0.01 to hold
     the same perceived depth. */
  --shadow-xs: 0 1px 1px rgba(13, 35, 48, 0.06);
  --shadow-sm:
    0 2px 4px -1px rgba(13, 35, 48, 0.07), 0 1px 2px rgba(13, 35, 48, 0.05);
  --shadow-md:
    0 10px 15px -3px rgba(13, 35, 48, 0.11),
    0 4px 6px -4px rgba(13, 35, 48, 0.11);
  --shadow-lg:
    0 20px 25px -5px rgba(13, 35, 48, 0.11),
    0 8px 10px -6px rgba(13, 35, 48, 0.11);
  --shadow-xl: 0 25px 50px -12px rgba(13, 35, 48, 0.28);

  /* Layout (v2.7.2 narrow experiment reverted — wider read better) */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-pad: clamp(1.25rem, 3vw, 2rem);
  --nav-height: 72px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms;
  --t-med: 240ms;
  --t-slow: 420ms;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Mobile browsers route document scroll through html, not body. Clip here
     too so decorative pseudo-elements can't cause horizontal scroll. */
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(
    --fw-medium
  ); /* v12: Montserrat 500 as the reading weight; 400 ran light on alabaster (Hans) */
  line-height: var(--lh-base);
  color: var(--color-text-body);
  background: var(--color-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures; /* v8 (Bringhurst): real ligatures on for text */
  overflow-x: clip;
  /* Belt-and-braces: ensure body never grows wider than its viewport */
  max-width: 100vw;
}
img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
/* SVGs default to a small inline size so missing explicit dimensions never blow up a layout. Class rules override. */
svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--color-text);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
p {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* v7.6 (a11y): coral focus ring is 2.97:1 on dark surfaces — jasmine ring there */
.footer :focus-visible,
.section--espresso :focus-visible,
.section--teal :focus-visible,
.cta-banner :focus-visible,
.anthem :focus-visible,
.video-banner :focus-visible {
  outline-color: var(--color-yellow);
}
::selection {
  background: var(--color-coral-50);
  color: var(--color-text);
} /* v5: v1 usage */

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top var(--t-fast);
}
.skip-link:focus {
  top: var(--space-4);
}

/* ---------- 3. Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}
.container--wide {
  max-width: var(--container-wide);
}
.section {
  padding-block: clamp(44px, 5.5vw, 80px);
} /* v6.5: compacted per Hans (~20% tighter) */
/* When a section ends with a CTA button row, add extra breathing room so the
   button isn't crammed against the next section boundary. */
.section > .container > .text-center:last-child,
.section > .container--wide > .text-center:last-child,
.section > .container > .mt-12:last-child,
.section > .container--wide > .mt-12:last-child {
  padding-block: var(--space-6) 0;
} /* v2.7: CTA rows kept their breathing room after the left-align declassing */
.section--tight {
  padding-block: clamp(32px, 4vw, 56px);
}
/* v6.2: heroes already carry bottom padding — the following section must not
   stack its full top padding on top of it */
.page-hero + .section {
  padding-top: clamp(24px, 3vw, 40px);
}
.hero + .section {
  padding-top: clamp(32px, 4vw, 56px);
}
.section--surface-1 {
  background: var(--color-surface-1);
}
.section--surface-2 {
  background: var(--color-surface-2);
}
/* v5.2: color-led section washes (client "monochrome" note — whole sections take
   a cool or yellow lead per the brand guide's usage-ratio rule) */
.section--wash-sky {
  background: var(--color-wash-sky);
}
/* v6 (Au): generic building icons on named hospitals read as placeholders — hidden.
   Rule is scoped + reversible; hospital logos slot back in when the client supplies them. */
.section--wash-sky .outbound-card__icon {
  display: none;
}
.section--wash-sky .itch-card__mark {
  --glass-dot: var(--color-cerulean);
} /* Cerulean Sky glass in sky sections */
.section--wash-jasmine {
  background: var(--color-wash-jasmine);
}
/* v5.3: true-white sections — the "white" third of the client's accent trio,
   distinct from the alabaster monochrome canvas */
.section--white {
  background: #ffffff;
}
.section--coral {
  background: linear-gradient(
    158deg,
    var(--color-sky-soft) 0%,
    var(--color-teal-50) 100%
  );
} /* v2: sky wash (class name kept for markup compat) */
/* Dark espresso section, matches the deck's "Identify · Think · Converse · Heal" tile.
   Headings invert to white, lede goes warm cream, eyebrow stays brand coral. */
.section--espresso {
  background:
    radial-gradient(
      ellipse at 0% 0%,
      rgba(238, 112, 103, 0.16),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 100% 100%,
      rgba(238, 112, 103, 0.09),
      transparent 55%
    ),
    #221a17;
  color: var(--color-footer-text);
}
.section--espresso h1,
.section--espresso h2,
.section--espresso h3,
.section--espresso h4 {
  color: #fff;
}
.section--espresso .lede,
.section--espresso p {
  color: rgba(245, 240, 235, 0.85);
}
.section--espresso .eyebrow {
  color: var(--color-coral-100);
}
.section--espresso .eyebrow::after {
  background: var(--color-orange-soft);
}
/* Override paper-grain pseudo on cream-only surfaces (espresso shouldn't have the cream-multiply grain) */
.section--espresso::before {
  display: none;
}
/* Restore text colors INSIDE white cards inside an espresso section.
   The global espresso overrides above shouldn't bleed into card content. */
.section--espresso .itch-card h1,
.section--espresso .itch-card h2,
.section--espresso .itch-card h3,
.section--espresso .itch-card h4,
.section--espresso .card h2,
.section--espresso .card h3,
.section--espresso .card h4 {
  color: var(--color-text);
}
.section--espresso .itch-card p,
.section--espresso .itch-card .itch-card__body,
.section--espresso .card p {
  color: var(--color-text-body);
}

/* Full-bleed sections: zero out the wrapping section's padding so an edge-to-edge
   panel (like the orange CTA banner) abuts the neighbouring sections directly. */
.section--bleed {
  padding-block: 0;
}
.section--bleed > .container,
.section--bleed > .container--wide {
  padding-inline: 0;
  max-width: none;
}

/* ============================================================
   FULL-BLEED VIDEO BANNER
   ============================================================ */
.video-banner {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .video-banner {
    aspect-ratio: 4 / 5;
  }
}

.video-banner__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.video-banner__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(16, 29, 38, 0.25) 0%,
      rgba(16, 29, 38, 0.55) 100%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(238, 112, 103, 0.22),
      transparent 60%
    );
  z-index: 1;
  pointer-events: none;
}
.video-banner__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  max-width: 720px;
  padding: var(--space-10) var(--container-pad);
}
.video-banner__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-coral-100); /* v6.2 (Au): coral, not yellow */
  margin-bottom: var(--space-4);
}
.video-banner__title {
  font-family: var(--font-condensed); /* v2.5: display voice */
  font-weight: var(--fw-medium); /* v4: Barlow Medium per Au */
  font-size: clamp(
    2.25rem,
    2.5vw + 1.3rem,
    3.75rem
  ); /* v7.5: 36 → 60 — Barlow floor rule */
  letter-spacing: var(--tracking-tighter);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  margin-bottom: var(--space-5);
  /* Balance line lengths so no single word drops alone on a line */
  text-wrap: balance;
}
.video-banner__lede {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.92);
  max-width: 32rem;
  margin-inline: auto;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  /* Avoid orphaned single words at the end of paragraphs */
  text-wrap: pretty;
}

/* Apply widow-prevention to other large display copy too, sitewide hygiene */
.display,
.h1,
.h2,
.h3,
.hero__h1,
.article-hero__title,
.cta-banner h2 {
  text-wrap: balance;
}
.lede,
.body-lg,
.article-intro {
  text-wrap: pretty;
}

/* Small play/pause toggle bottom-right for WCAG control */
.video-banner__toggle {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
}
.video-banner__toggle:hover {
  background: rgba(255, 255, 255, 0.3);
}
.video-banner__toggle svg {
  width: 16px;
  height: 16px;
}
.video-banner__toggle .icon-play {
  display: none;
}
.video-banner__toggle .icon-pause {
  display: block;
}
.video-banner[data-paused="true"] .icon-play {
  display: block;
}
.video-banner[data-paused="true"] .icon-pause {
  display: none;
}

/* Novartis sponsor branding block, sits between the footer column grid and the compliance block */
.footer__sponsor {
  /* v3.1: left-aligned on ALL viewports (was centered mobile / right desktop),
     matching the footer grid and the sitewide left-align system */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  text-align: left;
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__sponsor-label {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: rgba(245, 240, 235, 0.6);
}

/* Logo | rule | address lockup. Stacks on mobile, sits on one row from 768px so
   the vertical rule reads as the divider it is in the Novartis brand sheet. */
.footer__sponsor-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .footer__sponsor-lockup {
    flex-direction: row;
    /* stretch so the divider matches the height of the taller side */
    align-items: stretch;
    gap: var(--space-6);
  }
  /* The divider itself: a border on the address block, so it always spans
     exactly the address height without a spacer element to keep in sync. */
  .footer__sponsor-address {
    border-left: 1px solid rgba(245, 240, 235, 0.35);
    padding-left: var(--space-6);
  }
}
.footer__sponsor-logo {
  height: 36px;
  width: auto;
  /* Novartis SVG is dark on transparent; invert + slight opacity so it reads cleanly on espresso */
  filter: brightness(0) invert(1);
  opacity: 0.92;
  /* Column layout on mobile: align-self is the INLINE axis, so keep the mark
     flush left with the label and address above/below it. */
  align-self: flex-start;
}
@media (min-width: 768px) {
  /* Row layout: the cross axis is vertical here, so this centres the mark
     against the address block as intended. Must come after the base rule. */
  .footer__sponsor-logo {
    align-self: center;
  }
}
.footer__sponsor-address {
  display: flex;
  flex-direction: column;
  font-style: normal;
  font-size: var(--fs-eyebrow);
  line-height: 1.55;
  color: rgba(245, 240, 235, 0.75);
}
.footer__sponsor-address strong {
  font-weight: var(--fw-semibold);
  color: rgba(245, 240, 235, 0.95);
}

/* Numbered citation superscripts (inline) */
.ref-cite {
  font-size: 0.7em;
  line-height: 0;
  position: relative;
  vertical-align: super;
  margin-left: 1px;
}
.ref-cite a {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  padding: 0 2px;
  border-radius: 2px;
  transition: background var(--t-fast);
}
.ref-cite a:hover,
.ref-cite a:focus-visible {
  background: var(--color-coral-50);
}

/* References page bibliography */
.refs-list {
  list-style: none;
  counter-reset: ref-counter;
  padding-left: 0;
  display: grid;
  gap: var(--space-6);
}
.refs-list[start] {
  counter-reset: ref-counter calc(attr(start type(<number>), 6) - 1);
}
.refs-list li {
  counter-increment: ref-counter;
  padding-left: clamp(36px, 4vw, 48px);
  position: relative;
  scroll-margin-top: 96px;
  padding-block: var(--space-5);
  padding-inline-end: 0;
  /* Citations include long unbreakable strings (journal abbreviations, DOIs,
     compound guideline names like EAACI/GA²LEN/EuroGuiDerm/APAAACI); allow
     them to break at any point on narrow viewports rather than overflow. */
  overflow-wrap: anywhere;
  word-break: break-word;
  border-bottom: 1px solid var(--color-border-soft);
}
.refs-list li:last-child {
  border-bottom: 0;
}
.refs-list li::before {
  content: "[" counter(ref-counter) "]";
  position: absolute;
  left: 0;
  top: var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  color: var(--color-primary);
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
}
.refs-list li:target {
  background: var(--color-coral-50);
  outline: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding-inline: var(--space-4);
  padding-inline-start: clamp(40px, 4vw, 52px);
}
.refs-list strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.refs-list em {
  font-style: italic;
  color: var(--color-text);
}
.refs-list a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.refs-list__note {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-soft);
  font-size: var(--fs-label);
  line-height: var(--lh-relaxed);
}
/* Fallback for older browsers that don't support attr(... type) */
@supports not (counter-set: ref-counter 1) {
  .refs-list[start="6"] {
    counter-reset: ref-counter 5;
  }
}

/* Stat card: itch-card variant used in 3-column stat grids (Evidence section).
   Each card uses flex column so the source line always anchors at the bottom,
   regardless of body text length, producing visually parallel cards. */
.stat-card {
  display: flex;
  flex-direction: column;
  position: relative;
}
/* v2.1: yellow left accent bar removed per client feedback (Jul 2026),
   read as a stray element against the card radius. Yellow punctuation
   lives in the eyebrow underline + pills instead. */
.stat-card .itch-card__body {
  flex: 1 1 auto;
}
.stat-card__source {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}

.grid {
  display: grid;
  gap: var(--space-6);
} /* v2.3: 24px within card grids, 32px reserved for section-level gaps */
.grid-2 {
  grid-template-columns: 1fr;
}
.grid-3 {
  grid-template-columns: 1fr;
}
.grid-4 {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stack > * + * {
  margin-top: var(--space-6);
}
.stack-sm > * + * {
  margin-top: var(--space-3);
}
.stack-lg > * + * {
  margin-top: var(--space-8);
}
/* Defensive: any child of a stack or flex/grid container can shrink below its
   intrinsic content width. Prevents long words or nowrap buttons from forcing
   the parent past the viewport edge. */
.stack > *,
.stack-sm > *,
.stack-lg > *,
.hero__actions > *,
.hero__grid > * {
  min-width: 0;
}
.hero__lede,
.lede,
.body-lg {
  overflow-wrap: anywhere;
}

/* ---------- 4. Typography ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display); /* v2.3: brand label voice */
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary);
}
.eyebrow--muted {
  color: var(--color-text-muted);
}

/* v2.5: display voice is Barlow Condensed 700 — echoes the official condensed
   wordmark, matches ISEEU global's display face. Condensed wants zero tracking
   and slightly tighter leading; sizes unchanged (narrower forms read elegant). */
/* v4: Barlow Condensed Medium (500) per Au — matches ISEEU's lighter cuts and
   the logo's condensed feel without the heaviness of 700 */
.display {
  font-family: var(--font-condensed);
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1;
} /* v5.2 */
.h1 {
  font-family: var(--font-condensed);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1;
} /* v6.5: 100% per Hans */
.h2 {
  font-family: var(--font-condensed);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1.05;
}
.h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
}

.lede {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.55; /* v12: 20px standfirst carried body leading; tightened */
  color: var(--color-text-body);
}
.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
}
.text-muted {
  color: var(--color-text-muted);
}
.text-soft {
  color: var(--color-text-soft);
}
/* Brand coral salmon for display-text emphasis only (h1/h2 hero headings).
   Uses --color-accent-hover (darker variant) to pass WCAG AA Large 3:1 on all
   warm surfaces including the coral-50 wash. The lighter brand coral
   (--color-accent) stays intact for gradient/atmospheric/icon use. */
.text-coral {
  color: var(--color-accent-hover);
}

.measure {
  max-width: 65ch;
}
.measure-s {
  max-width: 48ch;
}

/* ---------- 5. Components: buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display); /* v2.3: buttons speak in the brand voice */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  font-size: var(--fs-body);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  transition:
    transform var(--t-fast) var(--ease-out),
    background var(--t-fast),
    color var(--t-fast),
    box-shadow var(--t-fast);
  /* Buttons can wrap on narrow viewports so long labels (e.g. "Begin Your Healing Journey")
     don't push their flex containers wider than the viewport. */
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
}
/* Restore single-line behavior at desktop where labels comfortably fit */
@media (min-width: 768px) {
  .btn {
    white-space: nowrap;
  }
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-lg);
}

.btn--ghost {
  /* v7: secondary role = ink outline sitewide (coral is reserved for primary) */
  border-color: var(--color-text);
  color: var(--color-text);
  background: transparent;
}
.btn--ghost:hover {
  background: var(--color-text);
  color: #fff;
}

.btn--lg {
  padding: 18px 36px;
  font-size: var(--fs-body-lg);
}
.btn--sm {
  padding: 10px 20px;
  font-size: var(--fs-label);
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display); /* v2.3: CTA voice */
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  transition: gap var(--t-fast);
}
.btn-link:hover {
  gap: 12px;
}
.btn-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--t-fast);
}
.btn-link:hover svg {
  transform: translateX(2px);
}

/* ---------- 6. Components: pills, chips, cards ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(
    --color-yellow-soft
  ); /* v2: yellow pill (was coral), ISEEU cue */
  color: var(--color-teal-deep);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  /* v2.3: sentence case — uppercase is reserved for 12px micro-labels (eyebrows, column titles, meta) */
  letter-spacing: 0.01em;
}
.pill svg {
  width: 14px;
  height: 14px;
}
.pill--dark {
  background: rgba(230, 226, 221, 0.2);
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
}

.chip {
  display: inline-block;
  background: var(--color-surface-4);
  color: var(--color-text-body);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
}

.card {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--color-border-soft);
}
.card--soft {
  background: var(--color-card-soft);
}
.card--accent {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
} /* v2.1: left bar removed (crescent artifact) */

/* ---------- 7. Navigation / Header ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 247, 243, 0.88); /* v4: alabaster glass */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border-soft);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
  transition: padding var(--t-med) var(--ease-out); /* v6.3: shrink-on-scroll */
}
.nav[data-shrunk="true"] .nav__inner {
  padding-block: var(--space-2);
}
.nav[data-shrunk="true"] {
  box-shadow: 0 4px 16px -10px rgba(13, 35, 48, 0.14);
}
.nav[data-shrunk="true"] .nav__brand img {
  height: 30px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.nav__brand img {
  height: 38px;
  width: auto;
  display: block;
  transition: height var(--t-med) var(--ease-out);
}
@media (min-width: 1024px) {
  .nav__brand img {
    height: 44px;
  }
  .nav[data-shrunk="true"] .nav__brand img {
    height: 34px;
  }
}
.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-8);
}
.nav__link {
  font-family: var(--font-display); /* v2.3: nav is brand voice */
  font-weight: var(--fw-medium);
  color: var(--color-text-body);
  transition: color var(--t-fast);
  position: relative;
  padding-block: 4px;
}
.nav__link:hover {
  color: var(--color-primary);
}
.nav__link[aria-current="page"] {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}
.nav__cta {
  display: none;
}
.nav__toggle {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.nav__toggle svg {
  width: 24px;
  height: 24px;
}
/* v7.4: hamburger ⇄ X morph (bars rotate through the center; middle bar fades) */
.nav__toggle svg path {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 280ms var(--ease-out),
    opacity 200ms var(--ease-out);
}
.nav__toggle[aria-expanded="true"] svg path:nth-of-type(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] svg path:nth-of-type(2) {
  opacity: 0;
}
.nav__toggle[aria-expanded="true"] svg path:nth-of-type(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (min-width: 1024px) {
  .nav__links {
    display: flex;
  }
  .nav__cta {
    display: inline-flex;
  }
  .nav__toggle {
    display: none;
  }
}

/* Mobile menu drawer
   Drawer slides in from the right and covers the full viewport (including the nav).
   Sits above the nav so the close button isn't obscured. */
.nav__drawer {
  /* v7.4: quality pass — panel opens UNDER the live nav (the toggle stays
     visible and morphs to an X), brand-washed surface, staggered link reveal,
     CTA pinned to the bottom */
  position: fixed;
  top: var(--nav-offset, var(--nav-height));
  right: 0;
  bottom: 0;
  left: 0;
  background:
    radial-gradient(
      ellipse 70% 50% at 90% 0%,
      rgba(253, 217, 183, 0.35),
      transparent 60%
    ),
    radial-gradient(
      ellipse 50% 40% at 5% 100%,
      rgba(251, 226, 225, 0.4),
      transparent 60%
    ),
    var(--color-base);
  padding: var(--space-6) var(--container-pad) var(--space-8);
  transform: translateX(100%);
  opacity: 0.6;
  transition:
    transform 320ms var(--ease-out),
    opacity 320ms var(--ease-out);
  z-index: 60;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.nav__drawer[data-open="true"] {
  transform: translateX(0);
  opacity: 1;
}
.nav__drawer .nav__link {
  display: block;
  padding-block: var(--space-4);
  font-family: var(--font-condensed);
  font-size: 1.75rem;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-soft);
  /* staggered reveal */
  opacity: 0;
  transform: translateY(14px);
}
.nav__drawer[data-open="true"] .nav__link {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 420ms var(--ease-out),
    transform 420ms var(--ease-out),
    color var(--t-fast);
}
.nav__drawer[data-open="true"] .nav__link:nth-of-type(1) {
  transition-delay: 60ms;
}
.nav__drawer[data-open="true"] .nav__link:nth-of-type(2) {
  transition-delay: 110ms;
}
.nav__drawer[data-open="true"] .nav__link:nth-of-type(3) {
  transition-delay: 160ms;
}
.nav__drawer[data-open="true"] .nav__link:nth-of-type(4) {
  transition-delay: 210ms;
}
.nav__drawer[data-open="true"] .nav__link:nth-of-type(5) {
  transition-delay: 260ms;
}
.nav__drawer .nav__link:hover,
.nav__drawer .nav__link[aria-current="page"] {
  color: var(--color-primary);
}
.nav__drawer .btn {
  margin-top: auto; /* pins to the panel base */
  width: 100%;
  opacity: 0;
  transform: translateY(14px);
}
.nav__drawer[data-open="true"] .btn {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 420ms var(--ease-out) 320ms,
    transform 420ms var(--ease-out) 320ms;
}
/* Quiet brand sign-off under the pinned CTA (decorative) */
.nav__drawer::after {
  content: "Finding relief, together.";
  display: block;
  margin-top: var(--space-4);
  font-size: var(--fs-label);
  font-style: italic;
  color: var(--color-text-soft);
}
@media (min-width: 1024px) {
  .nav__drawer {
    display: none;
  }
}

/* ---------- 8. Footer ---------- */
.footer {
  /* v6 (Au): dark grey like the socmed compositions — colors are accents only */
  background:
    radial-gradient(
      ellipse 50% 60% at 92% 8%,
      rgba(252, 215, 105, 0.08),
      transparent 55%
    ),
    linear-gradient(165deg, #262e33 0%, #1b2226 60%, #151b1f 100%);
  color: var(--color-footer-text);
  padding-block: var(--space-16) var(--space-10); /* v6.5 */
  margin-top: var(--space-16);
}
.footer__grid {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}
.footer__brand-name {
  margin-bottom: var(--space-4);
}
.footer__brand-name img {
  height: 56px;
  width: auto;
  display: block;
}
.footer__about {
  color: var(--color-footer-text);
  opacity: 0.85;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  max-width: 42ch;
}
.footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.footer__social a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(230, 226, 221, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--t-fast),
    transform var(--t-fast);
}
.footer__social a:hover {
  background: var(--color-accent);
  transform: translateY(-2px);
}
.footer__social svg {
  width: 18px;
  height: 18px;
}
.footer__col-title {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: #fff;
  margin-bottom: var(--space-4);
}
.footer__col ul li {
  margin-bottom: var(--space-3);
}
.footer__col a {
  color: var(--color-footer-text);
  opacity: 0.7;
  transition:
    opacity var(--t-fast),
    color var(--t-fast);
}
.footer__col a:hover {
  opacity: 1;
  color: var(--color-yellow);
}

.footer__compliance {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: var(--space-4);
  color: rgba(245, 240, 235, 0.7);
  font-size: var(--fs-eyebrow);
  line-height: 1.6;
}
.footer__compliance strong {
  color: rgba(245, 240, 235, 0.9);
  font-weight: var(--fw-semibold);
}
/* FUSE ID (Novartis job code). Set as plain bold text to match the Novartis
   footer template — it was previously a monospace yellow chip, which read as a
   code snippet rather than the compliance identifier it is. */
.footer__jobcode {
  color: rgba(245, 240, 235, 0.9);
  font-weight: var(--fw-semibold);
}

/* ---------- 9. Consent banner ---------- */
.consent {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border);
  z-index: 60;
  display: grid;
  gap: var(--space-4);
  max-width: 720px;
  margin-inline: auto;
  transform: translateY(120%);
  transition: transform var(--t-slow) var(--ease-out);
}
.consent[data-open="true"] {
  transform: translateY(0);
}
.consent__body {
  font-size: var(--fs-label);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
}
.consent__body strong {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}
.consent__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ---------- 10. Modal: leaving-site interstitial + video placeholder ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(16, 29, 38, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med);
}
.modal[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
.modal__card {
  background: var(--color-card);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-8);
  max-width: 520px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-xl);
  transform: translateY(20px) scale(0.98);
  transition: transform var(--t-med) var(--ease-out);
}
.modal[data-open="true"] .modal__card {
  transform: translateY(0) scale(1);
}
.modal__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto var(--space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-coral-50);
  color: var(--color-primary);
}
.modal__icon svg {
  width: 28px;
  height: 28px;
}
.modal__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
}
.modal__body {
  color: var(--color-text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-8);
}
.modal__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* Video placeholder modal */
.modal__video {
  background: linear-gradient(
    160deg,
    var(--color-accent),
    var(--color-primary)
  ); /* v5: warm (v1 usage) */
  border-radius: var(--radius-xl);
  aspect-ratio: 16 / 9;
  max-width: 880px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  padding: var(--space-8);
}

/* ---------- 11. Prototype flag ---------- */
.prototype-flag {
  position: fixed;
  left: 0;
  bottom: 16px; /* v2.7.3: tucked into the corner of the viewport (was 96px up) */
  background: var(--color-text);
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  z-index: 40;
  box-shadow: var(--shadow-md);
  opacity: 0.92;
}

/* ---------- 12. Utilities ---------- */
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-2 {
  gap: var(--space-2);
}
.gap-3 {
  gap: var(--space-3);
}
.gap-4 {
  gap: var(--space-4);
}
.gap-6 {
  gap: var(--space-6);
}

.mt-2 {
  margin-top: var(--space-2);
}
.mt-4 {
  margin-top: var(--space-4);
}
.mt-6 {
  margin-top: var(--space-6);
}
.mt-8 {
  margin-top: var(--space-8);
}
.mt-12 {
  margin-top: var(--space-12);
}

.text-center {
  text-align: center;
}
.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;
}

/* ============================================================
   PAGE: HOME, section-specific styles
   ============================================================ */

/* ---- Hero ---- */
.hero {
  /* v6.9: full-fold hero — content centers in the remaining space and the
     marquee pins to the base, so motion is always in the first viewport */
  padding-top: clamp(20px, 3vw, 36px);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}
/* v7.2: full-fold behaviour is desktop-only — stacked mobile content exceeds
   the viewport naturally, and the min-height just stretched it further */
@media (min-width: 768px) {
  .hero {
    min-height: calc(100dvh - var(--nav-height));
  }
}
.hero > .container {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  width: 100%;
  padding-bottom: clamp(24px, 3vw, 40px);
}
.hero .hero__grid {
  width: 100%;
}
/* v7.2: stacked square imagery caps — full-width 1:1 photos ran to ~690px
   tall on tablets; capped and left-aligned per the layout system */
@media (max-width: 1023px) {
  .hero__photo,
  .split__media {
    max-width: 520px;
  }
}
/* On desktop, cap the photo so hero content + marquee fit a laptop fold */
@media (min-width: 1024px) and (max-height: 900px) {
  .hero__photo {
    max-height: calc(100dvh - 340px);
  }
  .hero__photo img {
    height: 100%;
  }
}
.hero__grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1.15fr 1fr;
  }
}
/* Accent stays inline so text-wrap: balance can choose the best break point.
   Block-display forced "Choose Healing." onto its own line, which then
   broke mid-phrase as "Choose / Healing." with "Choose" orphaned. */
.hero__h1 .accent {
  color: var(--color-accent-hover);
}
.hero__h1 {
  line-height: 1;
} /* v5.3: per Hans */
/* Hero subtitle, emotional payoff below the campaign manifesto H1.
   Display weight but ~55% the size of the H1, in the rust accent color. */
.hero__subtitle {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(
    1.25rem,
    1.2vw + 0.8rem,
    1.75rem
  ); /* v2.1: 20 → 28 (was up to 44) */
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  color: var(
    --color-accent-hover
  ); /* v6: same coral as "Choose Healing" per Au */
  margin-top: var(--space-4);
  text-wrap: balance;
  /* Match the hero entrance stagger */
  opacity: 0;
  transform: translateY(12px);
  animation: heroIn 700ms var(--ease-out) forwards;
  animation-delay: 400ms;
}
.hero__lede {
  max-width: 32rem;
}
.hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
/* v7.3 (mobile button system): paired actions sit side-by-side at equal width;
   three buttons form a tidy 2+1 grid. Buttons may wrap their labels internally
   rather than the row stacking ragged. */
@media (max-width: 767px) {
  .hero__actions,
  .checker__result-actions,
  .err-actions,
  .modal__actions,
  .consent__actions,
  .action-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--space-3);
  }
  .hero__actions .btn,
  .checker__result-actions .btn,
  .err-actions .btn,
  .modal__actions .btn,
  .consent__actions .btn,
  .action-row .btn {
    width: 100%;
    padding-inline: var(--space-4);
  }
}
.hero__proof {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(
    --space-6
  ); /* v7.7: divider line removed — read as a stray rule on the gradient */
  margin-top: var(--space-2);
}
.hero__avatars {
  display: inline-flex;
  align-items: center;
}
.hero__avatars > * + * {
  margin-left: -12px;
}
.hero__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-base);
  object-fit: cover;
}
.hero__avatar--badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-coral-50);
  color: var(--color-primary-hover);
  font-size: 11px;
  font-weight: var(--fw-bold);
}
.hero__proof-text {
  font-size: var(--fs-label);
  color: var(--color-text-body);
}

.hero__photo {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 4 / 3; /* v7.7: hero is landscape-rectangular for column fit; splits stay 1:1 */
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero__quote {
  position: absolute;
  left: clamp(16px, 4%, 24px);
  right: clamp(16px, 4%, 24px);
  bottom: clamp(16px, 4%, 24px);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* v2.1: left accent bar removed (crescent artifact on rounded card) */
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
.hero__quote p {
  color: var(--color-text-body);
  font-size: var(--fs-body);
  line-height: 1.55;
} /* v12: quoted card, tighter */
.hero__quote cite {
  display: block;
  margin-top: var(--space-3);
  color: var(--color-text-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-label);
  font-style: italic;
  letter-spacing: 0;
} /* v6 (Au): quiet tertiary info, italic ink */

/* On narrow viewports the fixed 4:5 photo isn't tall enough to hold the
   long figcaption inside its overflow:hidden frame. Drop the absolute
   positioning so the caption flows naturally below the photo, with a slight
   negative margin for visual continuity. The figure expands to fit. */
@media (max-width: 480px) {
  .hero__photo {
    aspect-ratio: auto;
    overflow: visible;
  }
  .hero__photo img {
    aspect-ratio: 4 / 3; /* v7.7 */
    height: auto;
    border-radius: var(--radius-xl);
  }
  .hero__quote {
    position: static;
    margin: -36px clamp(12px, 4%, 20px) 0;
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.18);
  }
}

/* ---- Section heading ---- */
/* v2.5: left-aligned by default (layout system rule — center is reserved for
   full-bleed media/brand moments: video banner, anthem, CTA banner, modals, 404) */
.section__head {
  text-align: left;
  max-width: 640px;
  margin: 0;
}
.section__head--left {
  text-align: left;
  margin: 0;
} /* legacy alias, same as base */

/* ---- Story cards (Shared Experiences) ---- */
.experiences {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .experiences {
    grid-template-columns: 2fr 1fr;
  }
}
.story-feature {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #1e2c36;
  min-height: 420px;
  box-shadow: var(--shadow-lg);
}
.story-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
}
.story-feature__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8);
}
.story-feature__play {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-xl);
  transition:
    transform var(--t-fast),
    background var(--t-fast);
}
.story-feature__play:hover {
  transform: scale(1.06);
  background: var(--color-primary-hover);
}
.story-feature__play svg {
  width: 32px;
  height: 32px;
  margin-left: 4px;
}
.story-feature__title {
  color: #fff;
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  font-family: var(--font-display);
  max-width: 28ch;
}
.story-feature__label {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.story-column {
  display: grid;
  gap: var(--space-4);
}
.story-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg); /* v7: standard-card tier */
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  display: grid;
  gap: var(--space-3);
}
.story-card__stars {
  display: inline-flex;
  gap: 2px;
  color: #e0a72b;
}
.story-card__stars svg {
  width: 16px;
  height: 16px;
}
.story-card__quote {
  color: var(--color-text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}
.story-card__person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-1);
}
.story-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-coral-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  color: var(--color-primary-hover);
  font-size: var(--fs-label);
}
.story-card__name {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

/* ---- Two-column split (Hindi Lahat / Doctor Guide) ---- */
.split {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split--reverse > :first-child {
    order: 2;
  }
}
/* Outer figure no longer clips so floating tags can sit outside the photo frame.
   The rounded mask + shadow ride on the img directly (or on an explicit inner
   wrapper for variants that need a frame around the photo, like the Doctor Guide teaser). */
.split__media {
  position: relative;
  aspect-ratio: 1 / 1; /* v7: squarish, same system as the hero */
  --parallax-y: 0;
  transform: translate3d(0, calc(var(--parallax-y) * 1px), 0); /* v6.6 */
  will-change: transform;
}
.split__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
/* Inner-wrapper variant (used in Doctor Guide teasers where the figure has its
   own padded frame). The img needs to fill its wrapper or it collapses to its
   intrinsic aspect ratio and leaves dead space below. */
.split__media > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split__tag {
  position: absolute;
  background: var(
    --color-teal
  ); /* v6.2 (Au via Hans): tags are blue; 6:1 with white text */
  color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: var(
    --radius-lg
  ); /* v4: rounded rectangle for one-liners per Au */
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-lg);
  box-shadow: var(--shadow-md);
}
.split__tag--br {
  right: -12px;
  bottom: -16px;
}
.split__tag--tl {
  left: -12px;
  top: -16px;
  background: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-border-coral);
}
.split__pullquote {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  color: var(
    --color-text
  ); /* v6 (Au): ink — italic alone carries the emphasis */
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  margin: var(--space-2) 0;
}
.split__callout {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-coral);
  border-radius: var(--radius-md); /* v7: compact tier */
  padding: var(--space-6);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.split__callout svg {
  width: 26px;
  height: 26px;
  color: var(--color-primary);
  flex: 0 0 26px;
}
.split__callout p {
  color: var(--color-text);
  font-size: var(--fs-label);
  line-height: 1.55;
}
.split__callout strong {
  font-weight: var(--fw-semibold);
}

/* ITCH section header — v2.5: text left, badge right (left-aligned layout system) */
.itch-head {
  display: grid;
  gap: var(--space-10);
  align-items: center;
  grid-template-columns: 1fr;
  justify-items: start;
}
/* v2.9.1: badge centers on mobile (was hugging the left edge with rings clipped) */
.itch-head .brand-badge {
  justify-self: center;
}
@media (min-width: 1024px) {
  .itch-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .itch-head .brand-badge {
    --badge-size: clamp(180px, 16vw, 240px);
    justify-self: end;
  }
}

/* ---- ITCH framework ---- */
.itch {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-top: var(--space-10);
}
@media (min-width: 640px) {
  .itch {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .itch {
    grid-template-columns: repeat(4, 1fr);
  }
}
.itch-card {
  background: var(--color-card);
  border-radius: var(--radius-md);
  padding: var(--space-10) var(--space-8);
  box-shadow: var(--shadow-xs);
  border: 1px solid transparent;
  transition:
    transform var(--t-med) var(--ease-out),
    box-shadow var(--t-med),
    border-color var(--t-fast);
  position: relative;
}
.itch-card:hover,
.itch-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-sky-soft);
}
/* v4: Novartis "glass effect" icon treatment (per the brand icon guideline +
   Au's request) — an offset solid brand dot behind a frosted circle, white
   icon with the existing 2px strokes on top. --glass-dot sets the colorway
   (Coral Peach default; Jasmine Peach and Cerulean Sky variants below). */
.itch-card__mark {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-6);
  transition: transform var(--t-med) var(--ease-out);
}
/* v6 (Au): checker + modal icons share the glass treatment for consistency */
.itch-card__mark,
.modal__icon,
.checker__result-icon {
  border-radius: 50%;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #fff;
}
.itch-card__mark::before,
.modal__icon::before,
.checker__result-icon::before {
  content: "";
  position: absolute;
  inset: -8% 16% 16% -8%;
  border-radius: 50%;
  background: var(--glass-dot, var(--color-accent));
  z-index: -2;
}
.itch-card__mark::after,
.modal__icon::after,
.checker__result-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.65),
    0 2px 6px rgba(13, 35, 48, 0.08);
  z-index: -1;
}
.itch-card__mark svg {
  width: 32px;
  height: 32px;
}
.itch-card:hover .itch-card__mark,
.itch-card:focus-within .itch-card__mark {
  transform: rotate(-6deg) scale(1.05);
}
.itch-card__title {
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
}
.itch-card__body {
  color: var(--color-text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

/* ---- CTA banner: full-bleed saturated teal (v2, was orange), matching the deck Reel panels ---- */
.cta-banner {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 128px) clamp(24px, 5vw, 80px);
  text-align: center;
  /* Break out of any container so the panel spans edge to edge */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
  /* v5: warm ramp restored (v1 signature moment) at brand coral values, one jasmine bloom */
  background:
    radial-gradient(
      ellipse at 82% 15%,
      rgba(252, 215, 105, 0.25),
      transparent 55%
    ),
    linear-gradient(
      135deg,
      var(--color-coral-100) 0%,
      var(--color-accent) 45%,
      var(--color-primary) 100%
    );
}
.cta-banner > * {
  position: relative;
  z-index: 1;
}
.cta-banner h2 {
  color: #fff;
  text-shadow: 0 2px 14px rgba(13, 58, 82, 0.3);
}
.cta-banner p {
  color: rgba(255, 255, 255, 0.95);
}
/* On a saturated background, the primary button reads more strongly inverted: white pill, coral ink */
.cta-banner .btn--primary {
  background: #fff;
  color: var(--color-primary-hover);
}
.cta-banner .btn--primary:hover {
  background: var(--color-coral-50);
}

/* ---- Doctor guide toolkit ---- */
.toolkit {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-2);
}
.toolkit__item {
  background: var(--color-card);
  /* v2.1: left accent bar removed, it bent around the radius into a crescent (client flag) */
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  gap: var(--space-4);
  align-items: center;
  box-shadow: var(--shadow-xs);
}
.toolkit__icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: var(--color-teal); /* v5.2: cool micro-moment in the warm teaser */
}
.toolkit__title {
  font-weight: var(--fw-bold);
  color: var(--color-text);
  font-size: var(--fs-body);
}
.toolkit__sub {
  color: var(--color-text-body);
  font-size: var(--fs-label);
}

/* ---- Content buckets ---- */
.bucket-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-top: var(--space-10);
}
@media (min-width: 640px) {
  .bucket-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .bucket-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.bucket {
  background: var(--color-card-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--color-border-soft);
  transition:
    transform var(--t-fast),
    background var(--t-fast);
}
.bucket:hover {
  transform: translateY(-3px);
  background: #fff;
}
.bucket__num {
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  color: var(
    --color-accent-hover
  ); /* v6 (Au): same coral as the headline accent */
  font-size: 28px;
  letter-spacing: var(--tracking-tight);
}
.bucket__title {
  font-size: var(--fs-lead);
  margin: var(--space-2) 0 var(--space-2);
}
.bucket__body {
  color: var(--color-text-body);
  font-size: var(--fs-label);
}
/* v8 (Norman/Krug): persistent clickability signifier on whole-card links */
.bucket {
  display: flex;
  flex-direction: column;
}
.bucket::after {
  content: "Read →";
  margin-top: var(--space-3);
  color: var(--color-primary);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  transition: transform var(--t-fast) var(--ease-out);
}
.bucket:hover::after {
  transform: translateX(4px);
}

/* ---- Latest from Resources ---- */
.article-strip {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-top: var(--space-10);
}
@media (min-width: 768px) {
  .article-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}
.article-card {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  transition:
    transform var(--t-med),
    box-shadow var(--t-med);
  display: flex;
  flex-direction: column;
}
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.article-card__media {
  position: relative; /* v11: anchors the AI-imagery corner label */
  aspect-ratio: 16/10;
  background: var(--color-coral-50); /* v5: warm placeholder tint (v1 usage) */
  position: relative;
  overflow: hidden;
}
.article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-card__body {
  padding: var(--space-6);
  display: grid;
  gap: var(--space-3);
  flex: 1;
}
.article-card__tag {
  color: var(--color-primary);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.article-card__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}
.article-card__excerpt {
  color: var(--color-text-body);
  font-size: var(--fs-label);
  line-height: var(--lh-relaxed);
}
/* v7.3 (mobile type): content-bearing small text reads at body size on phones;
   14px is reserved for true meta (dates, counts, captions) */
@media (max-width: 767px) {
  .article-card__excerpt,
  .resource-card__excerpt,
  .checker-disclaimer,
  .checker-method,
  .bucket__body {
    font-size: var(--fs-body);
  }
}
.article-card__meta {
  color: var(--color-text-soft);
  font-size: var(--fs-eyebrow);
  margin-top: auto;
}

/* ---- Section heading with eyebrow ---- */
.eyebrow-block {
  display: grid;
  gap: var(--space-3);
}

/* ============================================================
   PAGE: SYMPTOM CHECKER
   ============================================================ */

.checker-page {
  /* v6.4 (Hans): checker joins the unified pink hero cloud — no exceptions */
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 55% 65% at 86% 12%,
      rgba(238, 112, 103, 0.3),
      transparent 55%
    ),
    radial-gradient(
      ellipse 60% 70% at 10% 88%,
      rgba(253, 217, 183, 0.48),
      transparent 60%
    ),
    radial-gradient(
      ellipse 24% 28% at 6% 6%,
      rgba(190, 227, 238, 0.34),
      transparent 55%
    ),
    radial-gradient(
      ellipse 26% 30% at 94% 94%,
      rgba(253, 235, 180, 0.38),
      transparent 55%
    ),
    linear-gradient(155deg, #fdeae6 0%, #f9d3cd 55%, #fbe2e1 100%);
  padding-block: clamp(48px, 6vw, 96px);
  min-height: 70vh;
}
.checker-page__head {
  text-align: left;
  max-width: 760px;
  margin-inline: 0; /* v3.6: left edge shared with the 2-column tool grid below */
  margin-bottom: var(--space-12);
}
.checker-page__head .pill {
  margin-bottom: var(--space-4);
}

.checker-disclaimer {
  background: var(--color-card);
  border: 1px solid var(--color-border-coral); /* v2.1: left accent bar removed */
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  display: flex;
  gap: var(--space-4);
  font-size: var(--fs-label);
  color: var(--color-text-body);
  line-height: var(--lh-relaxed);
  max-width: 760px;
  margin: 0 auto var(--space-10);
}
.checker-disclaimer svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--color-primary);
  margin-top: 2px;
}
.checker-disclaimer strong {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}

/* v3.6: 2-column tool layout — checker main column (3/4) + methodology aside (1/4).
   Stacks to a single column below 1024px, aside after the tool. */
.checker-layout {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .checker-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  }
  /* Aside rides along while the user answers */
  .checker-layout__aside {
    position: sticky;
    top: calc(var(--nav-offset, var(--nav-height)) + 24px);
    transition: top var(--t-med) var(--ease-out);
  } /* v7.1 */
}
/* Inside the layout, the tool fills its column (the 760px centering is retired) */
.checker-layout .checker-disclaimer {
  max-width: none;
  margin: 0 0 var(--space-8);
}
.checker-layout .checker {
  max-width: none;
  margin-inline: 0;
}

/* Methodology note ("How this tool was built") — sidebar card */
.checker-method {
  background: var(--color-card);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  font-size: var(--fs-label);
  color: var(--color-text-body);
}
.checker-method summary {
  font-family: var(--font-display);
  font-size: var(--fs-label);
}
.checker-method__body {
  padding-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}
.checker-method__body p {
  line-height: var(--lh-relaxed);
}

.checker {
  background: var(--color-card);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-md);
  padding: clamp(28px, 5vw, 64px);
  max-width: 760px;
  margin-inline: auto;
}

/* Progress */
.checker__progress {
  margin-bottom: var(--space-8);
  display: grid;
  gap: var(--space-3);
}
.checker__progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
}
/* On the narrowest viewports the two labels collide, stack them so each
   reads on its own line (left-aligned, secondary opacity for the device line). */
@media (max-width: 380px) {
  .checker__progress-meta {
    flex-direction: column;
  }
  .checker__progress-meta > :last-child {
    opacity: 0.75;
  }
}
.checker__progress-bar {
  height: 8px;
  background: var(--color-sky-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.checker__progress-fill {
  height: 100%;
  background: var(--color-primary); /* v2.2: solid, gradient noise removed */
  border-radius: var(--radius-pill);
  width: 0;
  transition: width var(--t-slow) var(--ease-out);
}

/* Step / question, direction-aware slide-deck transitions */
.checker__step {
  display: none;
}
.checker__step[data-active="true"] {
  display: block;
  animation: stepInForward 480ms var(--ease-out);
}
.checker__step[data-active="true"][data-dir="back"] {
  animation-name: stepInBack;
}
.checker__step[data-active="true"][data-dir="initial"] {
  animation: stepInInitial 600ms var(--ease-out);
}
/* v2.4: lateral slide-deck motion replaced with the standard fade + rise
   in both directions — one motion direction sitewide. */
@keyframes stepInForward {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes stepInBack {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes stepInInitial {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.checker__question {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
}
.checker__helper {
  color: var(--color-text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-6);
}

.checker__options {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.checker__option {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  text-align: left;
  background: var(--color-base);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  transition:
    border-color var(--t-fast),
    background var(--t-fast),
    transform var(--t-fast);
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  color: var(--color-text);
  font-weight: var(--fw-medium);
}
.checker__option:hover {
  border-color: var(--color-primary);
  background: #fff; /* v2.4: lateral hover nudge removed */
}
.checker__option[data-selected="true"] {
  border-color: var(--color-primary);
  background: var(--color-coral-50);
}
.checker__option-marker {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--t-fast),
    background var(--t-fast);
}
.checker__option[data-selected="true"] .checker__option-marker {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.checker__option[data-selected="true"] .checker__option-marker::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}
.checker__option-label {
  flex: 1;
}

.checker__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.checker__back {
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
}
.checker__back[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Result */
.checker__result {
  display: none;
}
.checker__result[data-active="true"] {
  display: block;
  animation: stepIn var(--t-slow) var(--ease-out);
}
.checker__result-icon {
  width: 80px;
  height: 80px;
  margin-bottom: var(--space-6);
  /* v6: bg/color come from the shared glass treatment (defined earlier) */
}
.checker__result-icon svg {
  width: 36px;
  height: 36px;
}
.checker__result-label {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}
.checker__result-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3); /* v2.5: normalized (in-card heading) */
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-block: var(--space-3) var(--space-4);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
}
.checker__result-body {
  color: var(--color-text-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-8);
}
.checker__result-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.checker__result-summary {
  background: var(--color-surface-1);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-top: var(--space-4);
}
.checker__result-summary h3 {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.checker__result-summary dl {
  display: grid;
  gap: var(--space-3);
}
.checker__result-summary dt {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  font-size: var(--fs-label);
}
.checker__result-summary dd {
  color: var(--color-text-body);
  font-size: var(--fs-body);
  margin: 0 0 var(--space-2);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-teal-50);
}
.checker__restart {
  margin-top: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
}

/* Surrogate conversion modal */
.modal--surrogate .modal__card {
  max-width: 480px;
}

/* Print: hide interactive chrome so any page prints as a clean document.
   NOTE: this block used to open with `body * { visibility: hidden }`, un-hiding
   only `.checker__result-print` so the symptom checker printed its summary
   alone. That element stopped being rendered in the TypeScript migration
   (1c44c30) and the symptom checker has no print button, so the blanket hide
   matched every page and nothing else ever un-hid — every route, including the
   consultation checklist, printed a blank sheet. The `.checker__result-print`
   rules below are inert (nothing renders that class) and are kept only until
   the summary-print feature is rebuilt or formally dropped. */
@media print {
  .checker__result-print {
    position: absolute;
    inset: 0;
    padding: 40px;
    color: #000;
    background: #fff;
  }
  .checker__result-print h1 {
    font-size: 28px;
    margin: 0 0 12px;
  }
  .checker__result-print h2 {
    font-size: 16px;
    margin: 16px 0 4px;
  }
  .checker__result-print p,
  .checker__result-print dd {
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 8px;
  }
  .checker__result-print dt {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .checker__result-print .pr-disclaimer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #ddd;
    font-size: 11px;
    color: #555;
  }
  .nav,
  .footer,
  .consent,
  .modal,
  .prototype-flag,
  .checker__nav,
  .checker__result-actions,
  .checker__restart {
    display: none !important;
  }
}
.checker__result-print {
  display: none;
}

/* ============================================================
   PAGES: Understanding CSU · Doctor Guide · Find a Doctor
   ============================================================ */

/* Generic page hero — v2.2: flattened to one sky tint + one yellow whisper
   on white, matching the home hero. */
.page-hero {
  padding-block: clamp(32px, 4.5vw, 56px) clamp(36px, 5vw, 64px); /* v6.1: bottom halved — it was stacking with the next section's top padding into a ~215px void */
  /* v6.3: consistency — inner heroes share the home hero's v1 cloud gradient */
  background:
    radial-gradient(
      ellipse 55% 65% at 86% 12%,
      rgba(238, 112, 103, 0.34),
      transparent 55%
    ),
    radial-gradient(
      ellipse 60% 70% at 10% 88%,
      rgba(253, 217, 183, 0.55),
      transparent 60%
    ),
    radial-gradient(
      ellipse 42% 48% at 52% 55%,
      rgba(246, 183, 179, 0.4),
      transparent 60%
    ),
    radial-gradient(
      ellipse 24% 28% at 6% 6%,
      rgba(190, 227, 238, 0.38),
      transparent 55%
    ),
    radial-gradient(
      ellipse 26% 30% at 94% 94%,
      rgba(253, 235, 180, 0.42),
      transparent 55%
    ),
    linear-gradient(155deg, #fdeae6 0%, #f9d3cd 55%, #fbe2e1 100%);
  overflow: hidden;
}
.page-hero__inner {
  max-width: 880px;
  text-align: left; /* v2.5: left-aligned layout system */
  margin: 0;
}
.page-hero__inner--left {
  text-align: left;
  margin: 0;
} /* legacy alias */
.page-hero .eyebrow {
  margin-bottom: var(--space-3);
}
.page-hero h1 {
  margin-bottom: var(--space-5);
}
.page-hero__lede {
  color: var(--color-text-body);
}

/* Two-column content layout (sticky TOC + body) */
.with-toc {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .with-toc {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}
.toc {
  font-size: var(--fs-label);
  background: var(--color-card);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}
/* Sticky behaviour only on desktop where the TOC has its own sidebar column.
   On mobile/tablet the TOC sits in-flow above the article as a normal block. */
@media (min-width: 1024px) {
  .toc {
    position: sticky;
    top: calc(var(--nav-offset, var(--nav-height)) + 24px); /* v7.1 */
    transition: top var(--t-med) var(--ease-out);
    align-self: start;
    background: transparent;
    border: 0;
    padding: 0;
  }
}
.toc__title {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.toc ol {
  display: grid;
  gap: var(--space-2);
  counter-reset: toc;
}
.toc ol li {
  counter-increment: toc;
}
.toc a {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-body);
  transition:
    background var(--t-fast),
    color var(--t-fast);
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0;
}
.toc a:hover {
  background: var(--color-card-soft);
  color: var(--color-primary);
}

/* Long-form content body */
.prose {
  color: var(--color-text-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  max-width: 68ch; /* v2.5: reading measure */
}
.prose > * + * {
  margin-top: var(--space-6);
}
.prose h2 {
  font-size: var(--fs-h3);
  color: var(--color-text);
  margin-top: var(--space-12) !important;
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-tight);
} /* v2.5: normalized (in-article sub-head) */
.prose h2:first-child {
  margin-top: 0 !important;
}
.prose h3 {
  font-size: var(--fs-h3);
  color: var(--color-text);
  margin-top: var(--space-10) !important;
  margin-bottom: var(--space-3);
  letter-spacing: var(--tracking-tight);
}
/* Fourth level, used by the lettered sub-clauses in the legal pages (A.1, B.2 …) */
.prose h4 {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-top: var(--space-8) !important;
  margin-bottom: var(--space-2);
}
.prose p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}
.prose strong {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}
.prose ul:not(.plain) {
  display: grid;
  gap: var(--space-3);
  padding-left: 0;
  list-style: none;
}
.prose ul:not(.plain) li {
  position: relative;
  padding-left: var(--space-6);
}
.prose ul:not(.plain) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Big fact callout */
.fact {
  background: var(--color-surface-2);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 48px);
  /* v2.1: left bar removed (crescent artifact on rounded card) */
  display: grid;
  gap: var(--space-3);
}
.fact__num {
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: clamp(
    2rem,
    2vw + 1.25rem,
    2.75rem
  ); /* v2.1: 32 → 44 (was up to 56) */
  color: var(--color-primary);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
}
.fact__label {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
}
.fact__body {
  color: var(--color-text-body);
  font-size: var(--fs-body-lg);
}

/* Myth vs Truth pairs */
.myth-truth {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .myth-truth {
    grid-template-columns: repeat(2, 1fr);
  }
}
.myth-truth__card {
  border-radius: var(--radius-lg); /* v7: standard-card tier */
  padding: var(--space-8);
  border: 1px solid var(--color-border);
}
.myth-truth__card--myth {
  background: var(--color-surface-2);
  border-color: var(--color-border-coral);
}
.myth-truth__card--truth {
  background: var(--color-card);
  border-color: var(
    --color-teal
  ); /* v6 (Au): red truth read as error; truth is now the blue family */
  border-width: 2px;
}
.myth-truth__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
}
.myth-truth__label--myth {
  color: var(--color-text-muted);
}
.myth-truth__label--truth {
  color: var(--color-teal);
} /* v6 (Au) */
.myth-truth__label svg {
  width: 16px;
  height: 16px;
}
.myth-truth__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: var(--lh-snug);
}
.myth-truth__body {
  color: var(--color-text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

/* Numbered list block */
.steps-list {
  display: grid;
  gap: var(--space-4);
}
.steps-list__item {
  background: var(--color-card);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  border: 1px solid var(--color-border-soft);
}
.steps-list__num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-coral-50);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: var(--fs-body-lg);
  flex: 0 0 44px;
}
.steps-list__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  font-size: var(--fs-h4);
  margin-bottom: var(--space-2);
}
.steps-list__body {
  color: var(--color-text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

/* Section heading helper (for sub-sections inside long pages) */
.section-head {
  margin-bottom: var(--space-8);
}
.section-head__eyebrow {
  color: var(--color-primary);
}

/* Page CTA banner (lighter than cta-banner), v2: sky/yellow wash (was warm gradient) */
.page-cta {
  /* v6.2 (Au ref = anthem/home-hero cloud): pink gradient with jasmine wisp, no blue blob */
  background:
    radial-gradient(
      ellipse 40% 55% at 88% 12%,
      rgba(253, 235, 180, 0.45),
      transparent 60%
    ),
    radial-gradient(
      ellipse 45% 60% at 10% 85%,
      rgba(253, 217, 183, 0.5),
      transparent 60%
    ),
    linear-gradient(135deg, #fdeae6 0%, var(--color-coral-50) 50%, #f9d3cd 100%);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 5vw, 64px);
  text-align: left; /* v2.5: left-aligned layout system */
  position: relative;
  overflow: hidden;
}
.page-cta::before {
  content: "";
  position: absolute;
  inset: -50px -50px auto auto;
  width: 280px;
  height: 280px;
  background: radial-gradient(
    circle at 40% 40%,
    rgba(252, 215, 105, 0.28),
    transparent 60%
  );
  pointer-events: none;
}
.page-cta::after {
  content: "";
  position: absolute;
  left: -60px;
  bottom: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(246, 183, 179, 0.45),
    transparent 65%
  ); /* v6.2: was the stray blue blob */
  pointer-events: none;
}
.page-cta > * {
  position: relative;
  z-index: 1;
}

/* ---- Doctor Guide ---- */
.dg-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .dg-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.dg-card {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
}
.dg-card__num {
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: 28px;
  color: var(--color-accent-hover); /* v6 (Au) */
  letter-spacing: var(--tracking-tight);
}
.dg-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  font-size: var(--fs-h4);
  margin: var(--space-2) 0 var(--space-3);
}
.dg-card__body {
  color: var(--color-text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}
.dg-card__example {
  margin-top: var(--space-4);
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-primary);
  color: var(--color-text);
  font-style: italic;
  font-size: var(--fs-body);
  line-height: 1.5; /* v12: quoted example lines set tighter than prose */
}

/* Vocabulary list (term, then plain-language + Tagalog) */
.vocab {
  background: var(--color-card-soft);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
}
.vocab__row {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .vocab__row {
    grid-template-columns: 1.1fr 2fr 1fr;
    gap: var(--space-6);
    align-items: baseline;
  }
}
.vocab__row:last-child {
  border-bottom: 0;
}
.vocab__term {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  font-size: var(--fs-body-lg);
}
.vocab__desc {
  color: var(--color-text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}
.vocab__tagalog {
  font-size: var(--fs-label);
  color: var(--color-primary);
  font-style: italic;
  font-weight: var(--fw-medium);
}

/* Checklist (printable) */
.checklist {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--color-border-soft);
}
.checklist__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.checklist__group {
  margin-top: var(--space-6);
}
.checklist__group h3 {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.checklist__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--color-border-soft);
}
.checklist__item:last-child {
  border-bottom: 0;
}
.checklist__check {
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  margin-top: 2px;
  cursor: pointer;
  background: #fff;
  transition:
    border-color var(--t-fast),
    background var(--t-fast);
}
.checklist__item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.checklist__item input:checked + .checklist__check {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.checklist__item input:checked + .checklist__check::after {
  content: "";
  width: 6px;
  height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(0, -1px);
}
.checklist__label {
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: 1.5;
  cursor: pointer;
}
.checklist__link {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.checklist__link:hover {
  text-decoration: none;
}
.checklist__item input:checked ~ .checklist__label {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* ---- Find a Doctor ---- */
.outbound-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .outbound-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.outbound-card {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--color-border-soft);
  display: grid;
  gap: var(--space-3);
  transition:
    transform var(--t-fast),
    box-shadow var(--t-fast),
    border-color var(--t-fast);
}
.outbound-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-sky);
}
.outbound-card__head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.outbound-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-coral-50);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.outbound-card__icon svg {
  width: 22px;
  height: 22px;
}
.outbound-card__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  font-size: var(--fs-body-lg);
}
.outbound-card__type {
  color: var(--color-text-muted);
  font-size: var(--fs-label);
}
.outbound-card__body {
  color: var(--color-text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}
.outbound-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-2);
}
.outbound-card__link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--t-fast);
}
.outbound-card:hover .outbound-card__link svg {
  transform: translateX(3px);
}

/* Placeholder state while the society directory links await MLR consent:
   greyed, non-interactive, with a "Coming soon" chip in place of the CTA. */
.outbound-card--soon {
  background: var(--color-surface-2, #f1efec);
  border-color: var(--color-border-soft);
  box-shadow: none;
  cursor: default;
  /* desaturate the whole card so it reads clearly as inactive */
  filter: grayscale(1);
  opacity: 0.7;
}
.outbound-card--soon:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border-soft);
}
.outbound-card__badge {
  justify-self: start;
  margin-top: var(--space-2);
  padding: 4px 12px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide, 0.02em);
}

/* Tips list (Find a Doctor) */
.tips {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .tips {
    grid-template-columns: repeat(2, 1fr);
  }
}
.tip {
  background: var(--color-card-soft);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.tip__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  box-shadow: var(--shadow-xs);
}
.tip__icon svg {
  width: 18px;
  height: 18px;
}
.tip__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  font-size: var(--fs-body-lg);
  margin-bottom: var(--space-2);
}
.tip__body {
  color: var(--color-text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

/* Print-only override for checklist page */
@media print {
  .nav,
  .footer,
  .consent,
  .modal,
  .prototype-flag,
  .page-hero,
  .page-cta,
  .page-meta,
  .checklist__head .btn,
  /* OneTrust injects its own banner markup, which none of the legacy
     `.consent` selectors above match — without this it prints on every page. */
  #onetrust-consent-sdk,
  #onetrust-banner-sdk,
  #ot-sdk-btn-floating {
    display: none !important;
  }

  /* "Print this" on the consultation checklist should yield the checklist
     alone. Without this the sheet runs to 7 pages: hero, conversation
     starters, symptom vocabulary and both CTAs come along for the ride.
     Scoped with :has() so it only bites on a page that actually has a
     checklist — a blanket rule here is what blanked every printed page
     before (see the note on the print block above). */
  body:has(#checklist) main > section:not(#checklist) {
    display: none !important;
  }
  body:has(#checklist) #checklist {
    padding-block: 0 !important;
  }

  /* Scroll-reveal starts elements at opacity:0 and only reveals them when an
     IntersectionObserver fires. Nothing scrolls while printing, so any section
     the reader had not already scrolled past prints as blank space — and
     because the text is still in the document it stays selectable in the PDF,
     which makes the problem easy to miss. Force everything visible. */
  [data-reveal],
  [data-reveal-group] > [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .checklist {
    box-shadow: none;
    border: 1px solid #ccc;
  }
  body {
    background: #fff;
  }
}

/* ============================================================
   ARTICLE TEMPLATE (Resources / Real Stories)
   ============================================================ */

.article-page {
  padding-block: clamp(40px, 6vw, 96px);
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--fs-label);
  color: var(--color-text-body);
  margin-bottom: var(--space-8);
}
.breadcrumbs a {
  color: var(--color-text-body);
  transition: color var(--t-fast);
}
.breadcrumbs a:hover {
  color: var(--color-primary);
}
.breadcrumbs__sep {
  color: var(--color-text-soft);
}
.breadcrumbs__current {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}

.article-hero {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 640px) {
  .article-hero {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-xl);
  }
}
.article-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* v11 (Jul 2026): Novartis GenAI policy — AI-assisted imagery carries a visible
   corner label. Sits top-right on heroes and card media (both are position:relative
   containers); scrim keeps it legible on any photo. */
.img-ai-note {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: rgba(27, 34, 38, 0.62);
  padding: 3px 8px;
  border-radius: 999px;
  pointer-events: none;
  max-width: calc(100% - 16px);
}

.article-hero__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 40% 50% at 12% 18%,
      rgba(245, 200, 73, 0.18),
      transparent 55%
    ),
    radial-gradient(
      ellipse 45% 55% at 88% 82%,
      rgba(25, 106, 140, 0.3),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      rgba(16, 29, 38, 0.1) 0%,
      rgba(16, 29, 38, 0.72) 100%
    ),
    linear-gradient(
      135deg,
      rgba(231, 107, 92, 0.22) 0%,
      rgba(231, 107, 92, 0) 60%
    );
}
.article-hero__content {
  position: absolute;
  left: clamp(24px, 4vw, 48px);
  right: clamp(24px, 4vw, 48px);
  bottom: clamp(24px, 4vw, 48px);
  color: #fff;
  display: grid;
  gap: var(--space-4);
}
.article-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.article-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(199, 226, 236, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em; /* v2.3: sentence case */
}
.article-hero__readtime {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
}
.article-hero__readtime svg {
  width: 14px;
  height: 14px;
}
.article-hero__title {
  font-family: var(--font-condensed); /* v2.5: display voice */
  font-weight: var(--fw-medium); /* v4: Barlow Medium per Au */
  letter-spacing: 0;
  font-size: clamp(
    2rem,
    2.4vw + 1.1rem,
    3rem
  ); /* v7.5: 32 → 48 — Barlow floor rule */
  line-height: 1.05;
  color: #fff;
  max-width: 22ch;
}
.article-hero__title .accent {
  color: var(--color-yellow-soft);
} /* v2: yellow accent on dark hero photo */

/* Article body */
.article-body {
  max-width: 660px; /* v2.5: ~68ch at 18px Inter (720px ran past the comfortable measure) */
  margin: clamp(40px, 6vw, 64px) auto 0;
}
/* v3.1: left-anchored variant — used where the reading column sits under a
   left-aligned page-hero (References), so their left edges line up. Article
   pages keep the centered column: their hero is a full-bleed media card,
   which is a documented center exception. */
.article-body--left {
  margin-inline: 0;
}
.article-intro {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--space-8);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  font-size: clamp(1.125rem, 1vw + 0.95rem, 1.5rem);
  line-height: 1.35; /* v12: display-size opener, tighter than body leading */
  margin-bottom: var(--space-12);
}

.article-section {
  margin-block: clamp(32px, 5vw, 56px);
}
.article-section h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3); /* v2.5: normalized to token (in-article sub-head) */
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-5);
}
.article-section h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-8) 0 var(--space-3);
}
/* Body paragraphs. The second selector covers paragraphs that sit directly in
   .article-body rather than inside an .article-section — the narrative openers
   that run between the .article-intro and the first section. Without it they
   fall back to browser defaults: no measure, no colour, no reading size.
   .article-intro is excluded; it has its own display treatment above. */
.article-section p,
.article-body > p:not(.article-intro):not(.article-jobcode) {
  color: var(--color-text-body);
  font-size: var(--fs-body-lg);
  line-height: 1.65; /* v12: 18px reading text, a touch tighter than 1.7 */
  margin-bottom: var(--space-4);
}
.article-section p:last-child {
  margin-bottom: 0;
}
.article-section strong {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}
.article-section ul {
  display: grid;
  gap: var(--space-3);
  padding-left: 0;
  list-style: none;
  margin-bottom: var(--space-4);
}
.article-section ul li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
}
.article-section ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Pull-quote card (coral filled) */
.pullquote-card {
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-2xl);
  padding: clamp(32px, 5vw, 48px);
  margin-block: clamp(32px, 5vw, 48px);
  position: relative;
  overflow: hidden;
}
.pullquote-card__mark {
  position: absolute;
  top: clamp(16px, 3vw, 28px);
  left: clamp(20px, 3vw, 32px);
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: 80px;
  line-height: 0.7;
  color: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
/* v8 (Bringhurst): optical margins — let opening quotes hang into the margin */
.pullquote-card__body,
.split__pullquote,
.dg-card__example,
blockquote {
  hanging-punctuation: first last;
}
.pullquote-card__body {
  position: relative;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(
    1.25rem,
    1vw + 0.9rem,
    1.5rem
  ); /* v2.1: 20 → 24 (was up to 30) */
  line-height: var(--lh-snug);
  margin-bottom: var(--space-6);
  letter-spacing: var(--tracking-tight);
}
.pullquote-card__cite {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-style: normal;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: rgba(
    255,
    255,
    255,
    0.92
  ); /* v2: lifted from coral-50 for contrast on the coral card */
}

/* Captioned image */
.figure-card {
  background: var(--color-card-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-2);
  margin-block: clamp(24px, 4vw, 40px);
}
.figure-card__media {
  border-radius: var(
    --radius-md
  ); /* v7: concentric (outer 18 − inset 8 ≈ 10) */
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.figure-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.figure-card figcaption {
  color: var(--color-text-soft);
  font-size: var(--fs-eyebrow);
  padding: var(--space-3) var(--space-4) var(--space-2);
}

/* Bento CTA (white card, text + colored square) */
.bento-cta {
  background: var(--color-surface-3);
  border-radius: var(--radius-2xl);
  padding: 4px;
  margin-block: clamp(40px, 5vw, 64px);
}
.bento-cta__inner {
  background: var(--color-card);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 40px);
  display: grid;
  gap: var(--space-8);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .bento-cta__inner {
    grid-template-columns: 1.4fr 1fr;
  }
}
.bento-cta__eyebrow {
  color: var(--color-primary);
}
.bento-cta__title {
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: clamp(1.5rem, 1.5vw + 1rem, 1.875rem);
  line-height: 1.2;
  color: var(--color-text);
  margin: var(--space-2) 0 var(--space-3);
}
.bento-cta__body {
  color: var(--color-text-body);
  font-size: var(--fs-body);
  margin-bottom: var(--space-5);
}
.bento-cta__art {
  aspect-ratio: 1 / 1;
  background: var(--color-coral-50);
  border-radius: var(--radius-2xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.bento-cta__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    137deg,
    rgba(184, 66, 56, 0.12) 0%,
    rgba(184, 66, 56, 0) 100%
  );
}
.bento-cta__art svg {
  width: 64px;
  height: 64px;
  color: var(--color-primary);
  position: relative;
}

/* References section */
.references {
  margin-top: clamp(32px, 5vw, 48px);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-label);
  color: var(--color-text-soft);
}
.references h3 {
  font-size: var(--fs-eyebrow);
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.references ol {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-5);
  list-style: decimal;
}
.references li {
  line-height: 1.5;
}

/* Medical disclaimer block (per-article) */
.article-disclaimer {
  background: var(--color-surface-1);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-8);
  font-size: var(--fs-label);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body); /* v2.1: left accent bar removed */
}

/* "More from the community" section */
.next-section {
  max-width: 1216px;
  margin: clamp(64px, 8vw, 96px) auto 0;
  padding-top: clamp(40px, 6vw, 80px);
  border-top: 1px solid var(--color-border);
}
.next-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}
.next-section__head h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3); /* v2.5: normalized to token (nested heading) */
}
.next-section__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .next-section__grid {
    grid-template-columns: 1.1fr 1fr;
  }
}

.up-next {
  display: grid;
  gap: var(--space-4);
}
.up-next__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-2xl);
  overflow: hidden;
}
.up-next__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.up-next__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em; /* v2.3: sentence case */
  color: var(--color-text);
}
.up-next__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  color: var(--color-text);
  margin-top: var(--space-3);
}
.up-next__excerpt {
  color: var(--color-text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

/* Community insight panel */
.insight {
  background: var(--color-surface-1);
  border-radius: var(--radius-2xl);
  padding: clamp(24px, 4vw, 40px);
  display: grid;
  gap: var(--space-6);
}
.insight__head {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.insight__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-coral-50);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
}
.insight__icon svg {
  width: 22px;
  height: 22px;
}
.insight__heading {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  font-size: var(--fs-body-lg);
}
.insight__body {
  color: var(--color-text-body);
  font-size: var(--fs-label);
  line-height: var(--lh-relaxed);
}
.insight__tags {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.insight__tag {
  background: var(--color-surface-4);
  color: var(--color-text-body);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
}
.insight__did {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-coral);
  font-size: var(--fs-label);
  line-height: var(--lh-relaxed);
}
.insight__did-label {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--fw-semibold);
  color: var(--color-text-soft);
  display: block;
  margin-bottom: var(--space-2);
}
.insight__did-body {
  color: var(--color-text-body);
}

/* ============================================================
   PAGE: RESOURCES HUB
   ============================================================ */

/* v3.3: sticky toolbar — search + filters ride below the nav while the grid
   scrolls. Translucent surface + blur (nav treatment), full available while
   browsing on every viewport. */
.resources-toolbar {
  position: sticky;
  top: var(--nav-offset, var(--nav-height)); /* v7.1: tracks the shrunk nav */
  transition: top var(--t-med) var(--ease-out);
  z-index: 40; /* below the nav (50) */
  /* v6.2: tone matches the section surface (was a lighter slab that read as a
     detached white bar); hairline + blur only announce themselves when stuck */
  background: rgba(240, 238, 230, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-block: var(--space-4);
  margin-inline: calc(-1 * var(--container-pad));
  padding-inline: var(--container-pad);
  border-bottom: 1px solid var(--color-border-soft);
  margin-bottom: var(--space-10);
}
.resources-tools {
  display: grid;
  gap: var(--space-4);
  /* v3.3: article count sits beside the search on all viewports — keeps the
     sticky bar compact on mobile */
  grid-template-columns: 1fr auto;
  margin-bottom: var(--space-3);
  align-items: center;
}

.resources-search {
  position: relative;
}
.resources-search input {
  width: 100%;
  background: var(--color-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 14px 20px 14px 48px;
  font-size: var(--fs-body);
  color: var(--color-text);
  font-family: var(--font-body);
  transition:
    border-color var(--t-fast),
    box-shadow var(--t-fast);
}
.resources-search input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(184, 66, 56, 0.12); /* v5: follows coral primary */
}
.resources-search input::placeholder {
  color: var(--color-text-soft);
}
.resources-search svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.resources-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-label);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
  justify-content: flex-start; /* v3.1: left on mobile like everything else */
}
@media (min-width: 1024px) {
  .resources-meta {
    justify-content: flex-end;
  } /* sits opposite the search field */
}

.resources-filters {
  display: flex;
  gap: var(--space-2);
  /* v3.3: one swipeable row instead of wrapping — keeps the sticky bar short;
     scrollbar hidden, pills stay full-size touch targets */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0;
}
.resources-filters::-webkit-scrollbar {
  display: none;
}
.resources-filter {
  white-space: nowrap;
  flex-shrink: 0;
}
.resources-filter {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-text-body);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  font-family: var(--font-body);
  transition: all var(--t-fast);
  cursor: pointer;
}
.resources-filter:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.resources-filter[data-active="true"] {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.resources-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .resources-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .resources-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.resource-card {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  display: flex;
  flex-direction: column;
  transition:
    transform var(--t-med),
    box-shadow var(--t-med);
  position: relative;
}
.resource-card a {
  display: contents;
}
.resource-card--linked:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.resource-card--soon {
  background: var(--color-surface-1);
  opacity: 0.85;
}
.resource-card__media {
  aspect-ratio: 16 / 10;
  background: var(--color-coral-50); /* v5: warm placeholder tint (v1 usage) */
  position: relative;
  overflow: hidden;
}
.resource-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.resource-card__soon {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: rgba(22, 34, 43, 0.88);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em; /* v2.3: sentence case */
}
.resource-card__body {
  padding: var(--space-6);
  display: grid;
  gap: var(--space-3);
  flex: 1;
}
.resource-card__tag {
  color: var(--color-primary);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.resource-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}
.resource-card__excerpt {
  color: var(--color-text-body);
  font-size: var(--fs-label);
  line-height: var(--lh-relaxed);
}
.resource-card__meta {
  color: var(--color-text-soft);
  font-size: var(--fs-eyebrow);
  margin-top: auto;
}

.resources-empty {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  color: var(--color-text-muted);
  background: var(--color-card-soft);
  border-radius: var(--radius-lg);
}

/* ============================================================
   UX POLISH: reading bar · FAB · toast · drawer close
   ============================================================ */

/* Reading progress bar (article pages) */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-coral-50);
  z-index: 55;
}
.reading-progress__bar {
  height: 100%;
  background: var(--color-primary); /* v2.2: solid */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 80ms linear;
}

/* Scroll-to-top FAB */
.fab {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 45;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition:
    opacity var(--t-med),
    transform var(--t-med) var(--ease-out),
    background var(--t-fast);
}
.fab[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fab:hover {
  background: var(--color-primary-hover);
}
.fab svg {
  width: 20px;
  height: 20px;
}

/* Toast (copy-link confirmation, etc.) */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-12);
  transform: translateX(-50%) translateY(20px);
  background: var(--color-text);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-xl);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--t-med),
    transform var(--t-med) var(--ease-out);
}
.toast[data-open="true"] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile drawer close button, sits at top-right of the drawer, above the nav */
.nav__drawer-close {
  display: none; /* v7.4: the nav toggle stays visible above the drawer and morphs to an X */
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-card);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-soft);
  z-index: 61;
}
.nav__drawer-close svg {
  width: 20px;
  height: 20px;
  color: var(--color-text);
}
.nav__drawer-close:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.nav__drawer-close:hover svg {
  color: #fff;
}
@media (min-width: 1024px) {
  .nav__drawer-close {
    display: none;
  }
}

/* Article action bar (share / copy link) */
.article-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-block: var(--space-8);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.article-actions__label {
  font-size: var(--fs-label);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
  margin-right: auto;
}
.article-actions__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-body);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  transition: all var(--t-fast);
}
.article-actions__btn:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.article-actions__btn svg {
  width: 16px;
  height: 16px;
}

.article-jobcode {
  margin-top: var(--space-4);
  font-size: var(--fs-eyebrow); /* 12px — a compliance mark, not reading copy */
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}

/* ============================================================
   BRAND EXPRESSION: grain texture + circular badge
   ============================================================ */

/* v2.2: paper-grain noise texture removed (quality pass — muddied the cream
   surfaces; flat surfaces read cleaner). Positioning contexts kept for layout. */
.section--surface-1,
.section--surface-2,
.page-hero {
  position: relative;
}
.section--surface-1 > *,
.section--surface-2 > *,
.page-hero > * {
  position: relative;
  z-index: 1;
}

/* Circular brand badge, campaign mark on a pink-to-orange radial gradient.
   Width and height are locked to the same clamp so the rings can't drift into an ellipse. */
.brand-badge {
  --badge-size: clamp(220px, 22vw, 320px);
  width: var(--badge-size);
  height: var(--badge-size);
  background: var(--color-primary-hover);
  border-radius: 50%;
  padding: clamp(18px, 2vw, 28px);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 30px 60px -20px rgba(120, 40, 32, 0.4);
  flex-shrink: 0;
}
.brand-badge__disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* v5: warm coral radial per Au's social-feed logo circle (brand values) */
  background:
    radial-gradient(
      ellipse at 70% 25%,
      rgba(252, 215, 105, 0.3),
      transparent 45%
    ),
    radial-gradient(
      circle at 30% 30%,
      var(--color-coral-100) 0%,
      var(--color-accent) 55%,
      var(--color-primary) 100%
    );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 44px);
  position: relative;
  overflow: hidden;
}
.brand-badge__disc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 25% 25%,
    rgba(255, 255, 255, 0.28),
    transparent 60%
  );
}
.brand-badge__disc img {
  position: relative;
  width: 78%;
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(120, 40, 32, 0.35));
}
/* v2.4: ambient float + rotation removed (motion standardization — entrances
   only, no perpetual decorative movement). Class kept for markup compat. */
.brand-badge--floating {
  animation: none;
}

/* ============================================================
   MOTION SYSTEM
   ============================================================ */

/* Scroll-triggered reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal][data-reveal-in="true"] {
  opacity: 1;
  transform: translateY(0);
}
/* v2.4: directional variants (left/right/scale) collapsed into the single
   standard entrance — fade + rise. One motion direction sitewide (client flag:
   mixed directions read as unsystematic). Markup keeps its data-reveal values;
   they all resolve to the same movement. */
[data-reveal="left"],
[data-reveal="right"],
[data-reveal="scale"] {
  transform: translateY(24px);
}
[data-reveal="left"][data-reveal-in="true"],
[data-reveal="right"][data-reveal-in="true"],
[data-reveal="scale"][data-reveal-in="true"] {
  transform: translateY(0);
}

/* Stagger children inside a [data-reveal-group] */
[data-reveal-group] > [data-reveal] {
  transition-delay: 0ms;
}
[data-reveal-group][data-reveal-in="true"] > [data-reveal]:nth-child(1) {
  transition-delay: 60ms;
}
[data-reveal-group][data-reveal-in="true"] > [data-reveal]:nth-child(2) {
  transition-delay: 140ms;
}
[data-reveal-group][data-reveal-in="true"] > [data-reveal]:nth-child(3) {
  transition-delay: 220ms;
}
[data-reveal-group][data-reveal-in="true"] > [data-reveal]:nth-child(4) {
  transition-delay: 300ms;
}
[data-reveal-group][data-reveal-in="true"] > [data-reveal]:nth-child(5) {
  transition-delay: 380ms;
}
[data-reveal-group][data-reveal-in="true"] > [data-reveal]:nth-child(6) {
  transition-delay: 460ms;
}

/* Hero entrance stagger (runs on load, no scroll required) */
.hero__grid > * {
  opacity: 0;
  transform: translateY(16px);
  animation: heroIn 800ms var(--ease-out) forwards;
}
.hero__grid > *:nth-child(1) {
  animation-delay: 100ms;
}
.hero__grid > *:nth-child(2) {
  animation-delay: 280ms;
}
.hero .pill,
.hero__h1,
.hero__lede,
.hero__actions,
.hero__proof {
  opacity: 0;
  transform: translateY(12px);
  animation: heroIn 700ms var(--ease-out) forwards;
}
.hero .pill {
  animation-delay: 200ms;
}
.hero__h1 {
  animation-delay: 320ms;
}
.hero__lede {
  animation-delay: 480ms;
}
.hero__actions {
  animation-delay: 600ms;
}
.hero__proof {
  animation-delay: 720ms;
}
@keyframes heroIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* v2.4: perpetual breathing pulse on the play button removed (motion
   standardization). The existing hover scale remains as the affordance. */
.story-feature {
  position: relative;
}
.story-feature__play {
  position: relative;
}

/* Counter (animated +2.4k etc.), uses tabular-nums for stable width */
[data-count-to] {
  font-variant-numeric: tabular-nums;
}
/* v2.5: stable digits wherever numbers update or align in columns */
.checker__progress-meta,
.fact__num,
.stat-card__source {
  font-variant-numeric: tabular-nums lining-nums;
}

/* View Transitions API: body cross-fades, persistent elements morph */
@view-transition {
  navigation: auto;
}
/* v6.8: universal page-enter — main content rises in on every load, in every
   browser. The View Transitions fade-through below layers on top in Chromium;
   both move the same direction so they read as one gesture. */
main {
  animation: vtEnter 460ms var(--ease-out);
}

/* v6.7: premium fade-through — outgoing page lifts away quickly, incoming
   rises in on the standard easing. Nav/FAB/consent morph independently below. */
::view-transition-old(root) {
  animation: vtLeave 200ms var(--ease-out) forwards;
}
::view-transition-new(root) {
  animation: vtEnter 380ms var(--ease-out) 70ms both;
}
@keyframes vtLeave {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes vtEnter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Persistent elements: continuous identity across navigations.
   The browser snapshots these separately from root and interpolates between positions.
   When the position stays the same (sticky nav, fixed FAB), the result feels like
   one app instead of separate documents. */
.nav {
  view-transition-name: site-nav;
}
.nav__brand img {
  view-transition-name: brand-logo;
}
.fab {
  view-transition-name: scroll-fab;
}
.consent {
  view-transition-name: consent-banner;
}

::view-transition-group(site-nav),
::view-transition-group(brand-logo),
::view-transition-group(scroll-fab),
::view-transition-group(consent-banner) {
  animation-duration: 280ms;
  animation-timing-function: var(--ease-out);
}
/* Shorter fade on the snapshots themselves to minimise double-render flash */
::view-transition-old(site-nav),
::view-transition-new(site-nav),
::view-transition-old(brand-logo),
::view-transition-new(brand-logo) {
  animation-duration: 140ms;
}

/* Smooth icon micro-spin on hover (e.g. arrow links) */
.btn-link svg {
  transition: transform var(--t-fast) var(--ease-out);
}
.btn-link:hover svg {
  transform: translateX(4px);
}

/* Hover lift on outbound + article cards uses a subtle inner sheen */
.outbound-card,
.article-card,
.resource-card--linked,
.bucket,
.dg-card {
  position: relative;
  isolation: isolate;
}

/* ============================================================
   SIGNATURE LAYER: ambient motion + micro-interactions + type presence
   ============================================================ */

/* ---- Hero backdrop ----
   v2.2: flattened. One quiet sky tint + one yellow whisper on white; the
   drifting blur orbs are gone (quality pass — layered gradient noise read
   as low-craft). Premium = restraint. */
.hero {
  position: relative;
  overflow: hidden;
  /* v6 (Au, section notes): the v1 first-fold gradient restored at brand values —
     pink/coral cloud with faint sky + jasmine corner wisps, per her reference */
  background:
    radial-gradient(
      ellipse 55% 65% at 86% 12%,
      rgba(238, 112, 103, 0.34),
      transparent 55%
    ),
    radial-gradient(
      ellipse 60% 70% at 10% 88%,
      rgba(253, 217, 183, 0.55),
      transparent 60%
    ),
    radial-gradient(
      ellipse 42% 48% at 52% 55%,
      rgba(246, 183, 179, 0.4),
      transparent 60%
    ),
    radial-gradient(
      ellipse 24% 28% at 6% 6%,
      rgba(190, 227, 238, 0.38),
      transparent 55%
    ),
    radial-gradient(
      ellipse 26% 30% at 94% 94%,
      rgba(253, 235, 180, 0.42),
      transparent 55%
    ),
    linear-gradient(155deg, #fdeae6 0%, #f9d3cd 55%, #fbe2e1 100%);
}
.hero > * {
  position: relative;
  z-index: 1;
}

/* ---- Ambient: rotating dual rings around brand badge ---- */
.brand-badge::before,
.brand-badge::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.brand-badge::before {
  inset: -18px;
  border: 1.5px dashed rgba(238, 112, 103, 0.45);
}
.brand-badge::after {
  inset: -34px;
  border: 1px dotted rgba(217, 169, 42, 0.35);
}
/* v2.4: ring rotation removed — rings stay as static decoration */

/* ---- Hero photo parallax (JS-driven via --parallax-y var) ---- */
.hero__photo {
  --parallax-y: 0;
  transform: translate3d(0, calc(var(--parallax-y) * 1px), 0);
  will-change: transform;
}

/* v2.2: traveling gradient wash on button hover removed (client flag,
   read as gimmicky). Hover is now a simple darken + the existing 1px lift. */

/* ---- Micro-interaction: animated underline on text links ---- */
.link-underline {
  position: relative;
  display: inline;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 320ms var(--ease-out);
}
.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
}

/* Apply automatically to footer links + breadcrumbs */
.footer__col a,
.breadcrumbs a {
  position: relative;
  display: inline-block;
}
.footer__col a::after,
.breadcrumbs a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 320ms var(--ease-out);
}
.footer__col a:hover::after,
.breadcrumbs a:hover::after {
  transform: scaleX(1);
}

/* (3D tilt removed: not portable to Weblight. Standard hover-lift retained.) */

/* ============================================================
   BRAND DECK ALIGNMENT, sky/taupe surfaces, anthem panel, sky button,
   color-differentiated ITCH cards
   ============================================================ */

/* DEPRECATED v7: btn--sky and btn--teal have no live usage (anthem moved to
   btn--gradient-brand). Kept dormant for rollback only — do not use in new work.
   Sky button, small pill in the brand's signature soft blue.
   Matches the BREAKTHEITCH.COM button pattern across the deck KVs.
   Text uses --color-teal-deep so contrast passes WCAG AA Normal (5.4:1) at
   any button size, not just the AA Large cutoff. */
.btn--sky {
  background: var(--color-sky);
  color: var(--color-teal-deep);
  border: 1px solid rgba(13, 58, 82, 0.22);
}
.btn--sky:hover {
  background: var(--color-sky-deep);
  color: #fff;
}
.btn--sky::before {
  display: none;
}

/* Teal button, the deck's deep-blue anchor moment. Use for secondary anchors
   where the warm coral btn would compete (e.g. on coral/peach backgrounds). */
.btn--teal {
  background: var(--color-teal);
  color: #fff;
}
.btn--teal:hover {
  background: var(--color-teal-hover);
  color: #fff;
}
.btn--teal::before {
  display: none;
}

/* v6 (Au): the socmed coral-light → cerulean gradient pill (anthem CTA) */
.btn--gradient-brand {
  background: linear-gradient(
    90deg,
    var(--color-coral-100) 0%,
    var(--color-sky) 100%
  );
  color: var(--color-teal-deep); /* 5.5:1+ across the gradient */
  border: 1px solid rgba(13, 58, 82, 0.15);
}
.btn--gradient-brand:hover {
  filter: saturate(1.15);
  transform: translateY(-1px);
}

/* Brand utility colors (deck-aligned) */
.text-teal {
  color: var(--color-teal);
}
.text-yellow {
  color: var(--color-yellow-text);
} /* v2.1: text-safe ochre */

/* Yellow accent rule, small punctuation moments only (numbered list markers,
   pull-quote bars, divider caps). Never as text color on white. */
.accent-rule {
  display: inline-block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-yellow);
  vertical-align: middle;
}

/* Deep teal section variant, the brand's anchoring cool-tone surface.
   Counterpart to .section--espresso. Use for a single moment per page max. */
.section--teal {
  /* v2.2: coral radial dropped, one yellow whisper kept */
  background:
    radial-gradient(
      ellipse 60% 70% at 90% 15%,
      rgba(245, 200, 73, 0.14),
      transparent 55%
    ),
    linear-gradient(
      165deg,
      var(--color-teal-soft) 0%,
      var(--color-teal) 55%,
      var(--color-teal-hover) 100%
    );
  color: rgba(232, 241, 246, 0.92);
}
.section--teal h1,
.section--teal h2,
.section--teal h3,
.section--teal h4 {
  color: #fff;
}
.section--teal .lede,
.section--teal p {
  color: rgba(232, 241, 246, 0.88);
}
.section--teal .eyebrow {
  color: var(--color-yellow);
}
/* (eyebrow underline removed sitewide, v2.4) */
.section--teal::before {
  display: none;
}
.section--teal .text-coral {
  color: var(--color-yellow);
}
.section--teal a:not(.btn) {
  color: var(--color-sky-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.section--teal a:not(.btn):hover {
  color: var(--color-yellow);
}
/* Cards on teal sections need lifted contrast */
.section--teal .itch-card h1,
.section--teal .itch-card h2,
.section--teal .itch-card h3,
.section--teal .itch-card h4,
.section--teal .card h2,
.section--teal .card h3,
.section--teal .card h4 {
  color: var(--color-text);
}
.section--teal .itch-card p,
.section--teal .itch-card .itch-card__body,
.section--teal .card p {
  color: var(--color-text-body);
}
.section--teal .itch-card,
.section--teal .card {
  box-shadow:
    0 16px 36px -10px rgba(0, 0, 0, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   BRAND MICRO-DETAILS, measured blue + yellow punctuation moments
   ============================================================ */

/* 1. Brand teal inline body links, cool brand anchor in long-form reading.
   Uses --color-teal (#196a8c) which gives 5.46:1 contrast on white/cream,
   comfortably above WCAG AA Normal 4.5:1. Scoped to prose/article bodies
   and references list so primary CTAs stay rust. */
.article-section a:not(.btn):not(.btn-link),
.article-body > p a:not(.btn):not(.btn-link),
.prose a:not(.btn):not(.btn-link),
.refs-list a:not(.btn):not(.btn-link) {
  color: var(--color-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition:
    color var(--t-fast),
    text-decoration-color var(--t-fast);
}
.article-section a:not(.btn):not(.btn-link):hover,
.article-body > p a:not(.btn):not(.btn-link):hover,
.prose a:not(.btn):not(.btn-link):hover,
.refs-list a:not(.btn):not(.btn-link):hover {
  color: var(--color-teal-hover);
  text-decoration-color: var(--color-yellow);
}
/* Inline button that opens the OneTrust preference centre from the privacy
   policy body. A <button> for accessibility, painted to match the surrounding
   .prose inline links so it reads as body copy, not a CTA. */
.cookie-settings-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--color-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition:
    color var(--t-fast),
    text-decoration-color var(--t-fast);
}
.cookie-settings-link:hover {
  color: var(--color-teal-hover);
  text-decoration-color: var(--color-yellow);
}

/* Citation superscript anchors stay rust so they read as compliance markers, not links */
.ref-cite a {
  color: inherit;
  text-decoration: none;
}

/* 2. Sky-soft tint on Symptom Checker progress track (the unfilled portion),
   cool/clinical track + warm fill = reads as brand spectrum + clear progress signal */
.checker__progress-bar {
  background: var(--color-sky-soft);
}

/* 3. Yellow caret marker on disclosure widgets (FAQ summaries, "what to expect" panels).
   Replaces the default UA triangle with a brand-yellow chevron. */
details > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 28px;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
details > summary::-webkit-details-marker {
  display: none;
}
details > summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: calc(50% - 5px);
  width: 8px;
  height: 8px;
  /* Interactive UI: needs 3:1. Teal (#196a8c) gives 5.46:1 on white card. */
  border-right: 2px solid var(--color-teal);
  border-bottom: 2px solid var(--color-teal);
  transform: rotate(45deg);
  transition: transform 240ms var(--ease-out);
}
details[open] > summary::after {
  transform: rotate(225deg);
  top: calc(50% - 2px);
}

/* 4. TOC states — v3.2: left accent strip removed (bent around the radius into
   a crescent, client flag). Active section = clean teal-tint fill, wired to a
   scrollspy in main.js. */
.toc a:hover {
  background: var(--color-card-soft);
  color: var(--color-teal);
}
.toc a[aria-current="true"],
.toc a.is-active {
  color: var(--color-teal);
  background: var(--color-teal-50);
  font-weight: var(--fw-semibold);
}
.toc a.is-active::before {
  color: var(--color-teal);
}

/* 5. Yellow accent dot before each footer compliance label (Medical disclaimer,
   Non-promotional, Data Privacy, etc). Resolves the wall-of-small-text feel. */
.footer__compliance p {
  position: relative;
  padding-left: 16px;
}
.footer__compliance p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-yellow);
}
/* The copyright + job code line closes the block rather than being one of the
   labelled compliance statements, so it carries no accent dot. */
.footer__compliance p.footer__legal {
  padding-left: 0;
}
.footer__compliance p.footer__legal::before {
  content: none;
}

/* ============================================================
   FIRST-IMPRESSION ACCENTS, blue + yellow micro-moments threaded
   through the hero + Evidence section. All shifts are <6px.
   ============================================================ */

/* (v7: ink ghost is now the sitewide secondary — hero override folded into the base) */

/* 2. Hero pill heart icon, kept in the warm brand family for visibility on the
   light coral-100 pill background. Yellow had insufficient contrast (1.58:1)
   against coral-100; the yellow brand moment is preserved via the eyebrow
   accent dot one level up. */
.hero .pill svg {
  color: var(--color-primary);
}

/* (v6: hero cite is quiet italic ink per Au — teal override removed) */

/* v2.4: section-head eyebrow accent dot removed with the eyebrow-underline cleanup. */

/* Taupe section, warm brown surface, deck's "Think beyond okay lang" treatment.
   Body copy goes warm cream, headings stay light. */
.section--taupe {
  background:
    radial-gradient(
      ellipse at 0% 0%,
      rgba(255, 168, 150, 0.08),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 100% 100%,
      rgba(232, 93, 44, 0.06),
      transparent 55%
    ),
    var(--color-taupe);
  color: rgba(245, 240, 235, 0.85);
}
.section--taupe h1,
.section--taupe h2,
.section--taupe h3,
.section--taupe h4 {
  color: #fff;
}
.section--taupe .lede,
.section--taupe p {
  color: rgba(245, 240, 235, 0.85);
}
.section--taupe .eyebrow {
  color: var(--color-peach-soft);
}
.section--taupe .eyebrow::after {
  background: var(--color-peach-soft);
}
.section--taupe::before {
  display: none;
}
.section--taupe .text-coral {
  color: var(--color-peach-soft);
}

/* v2.2: the four-tone ITCH card faces (cream/peach/coral/sky) collapsed to
   uniform white — the multicolor row was a major source of the "too many
   colors" read. Step identity comes from the icon + numbered order instead. */
.itch-card--tone-cream,
.itch-card--tone-peach,
.itch-card--tone-coral,
.itch-card--tone-sky {
  background: var(--color-card);
}
/* v4: glass colorways per the icon guideline */
.itch-card--tone-cream .itch-card__mark,
.itch-card--tone-coral .itch-card__mark {
  --glass-dot: var(--color-accent);
} /* Coral Peach */
.itch-card--tone-peach .itch-card__mark {
  --glass-dot: var(--color-yellow);
} /* Jasmine Peach */
.itch-card--tone-sky .itch-card__mark {
  --glass-dot: var(--color-cerulean);
} /* Cerulean Sky */

/* When ITCH cards live in an espresso section, give them a subtle inner shadow
   to lift them off the dark background visually */
.section--espresso .itch-card--tone-cream,
.section--espresso .itch-card--tone-peach,
.section--espresso .itch-card--tone-coral,
.section--espresso .itch-card--tone-sky {
  box-shadow:
    0 12px 28px -8px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   CAMPAIGN ANTHEM PANEL, full-bleed atmospheric KV moment
   The orange + soft-sky cloud gradient with the BREAK-ITCH wordmark centered.
   Matches deck image 26 exactly. Use as the closing brand moment / CTA banner. */
.anthem {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  background: var(--gradient-anthem);
  padding: clamp(64px, 8vw, 112px) clamp(24px, 5vw, 80px); /* v6.5: compacted */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  isolation: isolate;
}
/* v2.2: drifting orbs removed with the quality pass; the panel's single
   gradient carries the brand moment on its own. */
.anthem > * {
  position: relative;
  z-index: 1;
}
.anthem__wordmark {
  width: clamp(280px, 50vw, 720px);
  height: auto;
  filter: brightness(0) invert(1) opacity(0.95)
    drop-shadow(0 2px 24px rgba(120, 40, 32, 0.3));
  margin-bottom: var(--space-8);
}
.anthem__lede {
  color: #fff;
  font-size: clamp(1.125rem, 1.2vw + 0.9rem, 1.5rem);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-medium);
  max-width: 42rem;
  text-shadow: 0 2px 16px rgba(120, 40, 32, 0.35);
  margin-bottom: var(--space-8);
}

/* ---- Micro-interaction: animated checkmark draw on Symptom Checker ---- */
.checker__option-marker svg {
  width: 14px;
  height: 14px;
  color: #fff;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 380ms cubic-bezier(0.65, 0, 0.35, 1) 80ms;
}
.checker__option[data-selected="true"] .checker__option-marker svg {
  stroke-dashoffset: 0;
}
/* Hide the old pseudo-element marker when SVG-based marker present */
.checker__option[data-selected="true"] .checker__option-marker:has(svg)::after {
  display: none;
}

/* ---- Micro-interaction: toast check icon ---- */
.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.toast__icon {
  width: 18px;
  height: 18px;
  color: var(--color-yellow);
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 420ms cubic-bezier(0.65, 0, 0.35, 1) 220ms;
}
.toast[data-open="true"] .toast__icon {
  stroke-dashoffset: 0;
}

/* v2.4: eyebrow underline + yellow accent dots removed (client flag — read as
   stray lines under the labels). Eyebrows are now clean uppercase micro-labels;
   yellow's remaining roles are pills, numerals, and rating moments. */
.eyebrow {
  position: relative;
  display: inline-block;
}

/* ---- Type presence: drop cap on article intro ---- */
.article-intro::first-letter {
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: 4.2em;
  line-height: 0.82;
  float: left;
  margin: 0.05em 0.12em 0 0;
  color: var(--color-primary);
  letter-spacing: -0.05em;
}

/* ============================================================
   DIALECT ROTATOR — v2 client request (Jul 2026)
   Cycles the word "kati" through PH dialect variants in the
   "Hindi lahat ng…" headline. Local-centricity moment.
   Degrades gracefully: no JS → static first word. Dialect term
   list is [MLR-PENDING] regional/medical confirmation.
   ============================================================ */
.dialect-rotator {
  /* v2.8.1: inline-grid + hidden sizer spans (injected by JS) reserve the width
     of the LONGEST term, so the headline never reflows as words swap. The
     active word centers over a constant-width underline. */
  display: inline-grid;
  justify-items: center;
  position: relative;
  /* z-index creates a stacking context so the ::after underline (z-index -1)
     stays inside this element, behind the word but above section backgrounds */
  z-index: 0;
  color: var(--color-primary);
  white-space: nowrap;
}
.dialect-rotator__word {
  grid-area: 1 / 1;
}
.dialect-rotator__sizer {
  display: contents;
}
.dialect-rotator__sizer span {
  grid-area: 1 / 1;
  visibility: hidden;
  pointer-events: none;
}
/* Hand-drawn-style yellow marker underline anchors the rotating word */
.dialect-rotator::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.02em;
  height: 0.18em;
  border-radius: 2px;
  background: var(
    --color-coral-100
  ); /* v6 (Au): coral, ties to the section's coral accents */
  opacity: 0.8;
  z-index: -1;
}
.dialect-rotator__word {
  display: inline-block;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 320ms var(--ease-out),
    transform 320ms var(--ease-out);
}
.dialect-rotator__word[data-out="true"] {
  opacity: 0;
  transform: translateY(-0.35em);
}
.dialect-rotator__word[data-in="true"] {
  opacity: 0;
  transform: translateY(0.35em);
  transition: none;
}
/* Reduced motion: JS also checks the media query and pins the first term */
@media (prefers-reduced-motion: reduce) {
  .dialect-rotator__word {
    transition: none !important;
  }
}

/* v6.6 — Ken Burns: imperceptible slow zoom on clipped photography.
   Applied ONLY where a clipping container exists (unclipped split images
   get parallax instead). Ambient-tier member. */
.hero__photo img,
.article-hero__img,
.up-next__media img,
.figure-card__media img {
  animation: kenBurns 32s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenBurns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}

/* v6.6 — ITCH framework marquee divider (pauses on hover; static under
   reduced motion via the global kill switch). Ambient-tier member. */
.marquee {
  overflow: hidden;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: var(--space-5);
  border-block: 1px solid var(--color-border-soft);
  background: var(--color-base);
}
/* v6.8: marquee sits anchored under the hero; the section after it opens tight */
.marquee + .section {
  padding-top: clamp(32px, 4vw, 56px);
}
.marquee--hero {
  margin-top: auto; /* pins to the hero base */
  background: rgba(253, 247, 244, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 0;
  position: relative;
  z-index: 1;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 42s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__track span {
  font-family: var(--font-condensed);
  font-weight: var(--fw-medium);
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); /* v7.5 */
  color: var(--color-accent-hover);
  white-space: nowrap;
  /* v6.7: spacing lives INSIDE the repeating unit (uniform &ensp; separators),
     so the loop seam is indistinguishable from the internal rhythm */
}
/* v10 (Jul 2026): I·T·C·H initials emphasized per Doc Carlo. v10.2: coral-on-coral
   read too subtle (Hans) — initials now INK against the coral words, the same
   ink+coral emphasis pairing as the hero. Weight stays 500 (no synthetic bold). */
.marquee__track b {
  font-weight: inherit;
  color: var(--color-text);
}
/* v10.1: same emphasis on the shared-path card titles (Identify/Think/Converse/Heal) */
.itch-cap {
  font-weight: inherit;
  color: var(--color-primary);
}
@keyframes marqueeScroll {
  to {
    transform: translateX(-50%);
  }
}

/* ============================================================
   AMBIENT TIER (v6.3) — the one sanctioned class of perpetual motion.
   A slow warm-cloud layer drifts over hero surfaces and the anthem
   (35–45s, transform-only, alternate) — perceptible as "alive", not as
   "animation". Membership is closed: heroes, anthem, dialect rotator.
   ============================================================ */
.checker-page > .container {
  position: relative;
  z-index: 1;
}
.hero::after,
.page-hero::after,
.checker-page::after,
.anthem::after {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(
      ellipse 30% 35% at 32% 30%,
      rgba(238, 112, 103, 0.16),
      transparent 55%
    ),
    radial-gradient(
      ellipse 26% 30% at 70% 66%,
      rgba(253, 217, 183, 0.2),
      transparent 55%
    ),
    radial-gradient(
      ellipse 20% 24% at 55% 20%,
      rgba(190, 227, 238, 0.12),
      transparent 55%
    );
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  animation: ambientDrift 38s ease-in-out infinite alternate;
}
.anthem::after {
  animation-duration: 46s;
}
@keyframes ambientDrift {
  from {
    transform: translate3d(-2.5%, -1.5%, 0) scale(1);
  }
  to {
    transform: translate3d(2.5%, 2%, 0) scale(1.07);
  }
}

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