/* ==========================================================================
   My Health Choice - design system stylesheet
   Extracted from the approved homepage mockup (Option A, 2026-07-05).
   Order: tokens → base → header → components → bands → utilities →
   animations → responsive → reduced motion.
   Read assets/README.md before adding styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. SELF-HOSTED FONTS (security M2 — no pre-consent request to Google)
   Plus Jakarta Sans variable font (weights 400–800 in one file per subset),
   downloaded 2026-07-06 from the Google Fonts CSS API (v12) into
   assets/fonts/. The fonts.googleapis.com <link> + preconnects were removed
   from every page; font-src in _headers is 'self'. Plus Jakarta Sans is
   licensed under the SIL Open Font License 1.1.
   -------------------------------------------------------------------------- */

/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fraunces display serif (10xweb Phase 2, Route A) — static 600 instance of
   the Fraunces variable font (opsz 144 / SOFT 0 / WONK 0 locked), latin
   subset incl. curly quotes/dashes/ellipsis. h1 only, site-wide. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fraunces-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D, U+2026;
}

/* Metric-matched fallback for Fraunces, so the pre-swap layout doesn't shift
   (reduces CLS). Computed from Fraunces-600's OS/2 metrics (unitsPerEm 2000,
   sTypoAscender 1956, sTypoDescender -510, sTypoLineGap 0, xAvgCharWidth
   1009, useTypoMetrics) vs. Georgia's actual OS/2 metrics (unitsPerEm 2048,
   xAvgCharWidth 901): size-adjust = (1009/2000)/(901/2048); ascent/descent/
   line-gap-override = (Fraunces metric / 2000) / size-adjust. */
@font-face {
  font-family: 'Fraunces-fallback';
  src: local('Georgia');
  size-adjust: 114.67%;
  ascent-override: 85.29%;
  descent-override: 22.24%;
  line-gap-override: 0%;
}

/* Metric-matched fallback for Plus Jakarta Sans (CLS guard — the PJS swap was
   the last big layout shift on JS-heavy pages). size-adjust measured
   empirically in-browser (canvas measureText, PJS vs Helvetica = 104.25%);
   ascent/descent from PJS OS/2 (upem 1000, typoAsc 1038, typoDesc -222,
   gap 0) divided by size-adjust. */
@font-face {
  font-family: 'PJS-fallback';
  src: local('Helvetica Neue'), local('Helvetica'), local('Arial');
  size-adjust: 104.25%;
  ascent-override: 99.57%;
  descent-override: 21.29%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   Source of truth: 2 Work/My Health Choice/design/DESIGN.md (vault).
   -------------------------------------------------------------------------- */

:root {
  /* Brand teal (trust) */
  --teal: #1C8C97;
  --teal-action: #147480;
  --teal-link: #0E5A62;
  --teal-deep: #08363B;
  --teal-pale: #E3F1F1;
  --teal-soft: #BFE0E1;

  /* Signature coral - primary CTAs and the logo mark, plus the sanctioned
     DECORATIVE accents from DESIGN.md's coral-400 allowance (H1 accent bar,
     ribbon tick icons, stat digits, step number chips, quote marks).
     Never use coral to rank or highlight a provider. */
  --coral: #C0432A;
  --coral-bright: #FF8366;
  --coral-pale: #FFEDE8;

  /* Rhyme token (10xweb Phase 3, Signature) — the exact translucent coral
     wash used behind the H1 accent word, extracted so every low-opacity
     coral-bright accent-wash in the system shares one value. NOT for solid
     coral text/fills (--coral, --coral-bright stay as-is for those) and NOT
     for the coral-500 (#F2643F) promise-band glow, which is a different hue
     — merging it here would visibly shift that glow's color. */
  --rhyme-accent: rgb(255 131 102 / .32);

  /* Text */
  --ink: #0B2A2E;
  --body: #3D4F50;
  --muted: #566668;

  /* Error red (10xweb Phase 5, Craft) - sanctioned for form validation
     feedback only. Never used decoratively, never used to rank a provider. */
  --error: #C23B30;

  /* Opacity hierarchy (10xweb Phase 3, Signature) — one ink ramp instead of
     three separately-tuned hex greys. Alphas are contrast-verified (see
     assets/README.md / build report): --ink-muted is corrected from an
     initial .58/.62 draft to .65, the minimum that clears 4.5:1 on the
     darkest solid surface (--cool) — .58 measured 3.85:1, a fail. Applies to
     solid surfaces only, never over photos/scrims. */
  --ink-strong: var(--ink);
  --ink-soft: rgb(11 42 46 / .78);
  --ink-muted: rgb(11 42 46 / .65);
  --ink-inverse-strong: rgb(255 255 255 / .96);
  --ink-inverse-soft: rgb(255 255 255 / .74);

  /* Surfaces */
  --white: #FFFFFF;
  --cool: #F4F7F7;
  --warm: #FBF6F3;
  --hairline: #DDE6E6;

  /* Elevation */
  --shadow: 0 20px 60px rgba(8, 54, 59, 0.12);
  --soft-shadow: 0 12px 30px rgba(8, 54, 59, 0.09);

  /* Shape + layout */
  --radius-lg: 16px;
  --radius-md: 12px;
  --container: 1180px;

  /* --------------------------------------------------------------------
     Design-system tokens (additive — 10xweb elevation Phase 1).
     Values captured verbatim from the existing stylesheet: each token is
     the median of its clamp/value cluster, not a redesigned scale. Never
     rename or remove the tokens above this line — a companion design
     system repo syncs from these names.
     -------------------------------------------------------------------- */

  /* Display serif — Phase 2 (Route A). h1 only, site-wide. */
  --font-display: "Fraunces", "Fraunces-fallback", Georgia, serif;

  /* Type scale — clustered from the fluid font-size values already in use */
  --text-display: clamp(2.55rem, 4.7vw, 3.65rem); /* h1 hero */
  --text-title: clamp(2rem, 3.4vw, 2.75rem);       /* section h2s */
  --text-heading: 1.08rem;                          /* h3 / card titles */
  --text-lead: clamp(1.35rem, 2vw, 1.8rem);         /* reviewer quote */
  --text-body: 1rem;                                /* base copy */
  --text-small: 0.9rem;                             /* meta / helper text */
  --text-micro: 0.72rem;                            /* eyebrows / pills */

  /* Spacing — 4px base */
  --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-section: clamp(56px, 6vw + 32px, 80px);

  /* Radius — additions to the existing --radius-lg / --radius-md */
  --radius-sm: 8px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Motion */
  --dur-fast: 160ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --ease-standard: ease;

  /* Shadows — additions to the existing --shadow / --soft-shadow */
  /* --shadow-lift (10xweb Phase 3, Depth) — layered two-part shadow: a
     tight 1px contact-edge layer + the original --soft-shadow diffuse
     layer, so the lifted edge reads crisper without changing the overall
     visual weight of the hover elevation.
     Canonical hover-lift recipe — copy this exact combination for any new
     hoverable card/surface, don't invent variants:
       transform: translateY(-3px);
       box-shadow: var(--shadow-lift);
       transition: transform var(--dur-base) var(--ease-standard),
                   box-shadow var(--dur-base) var(--ease-standard);
     (Some existing components use translateY(-5px) pre-dating this recipe
     — left as-is, not in scope for Phase 3.) */
  --shadow-lift: 0 1px 2px rgba(8, 54, 59, 0.06), 0 12px 30px rgba(8, 54, 59, 0.09); /* common hover elevation */
  --shadow-cta-glow: 0 18px 36px rgba(192, 67, 42, 0.26);   /* coral CTA hover glow */
  --shadow-pill: 0 12px 28px rgba(8, 54, 59, 0.1);          /* floating pill/chip shadow */
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", "PJS-fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink-soft);
  background: var(--white);
  font-size: var(--text-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

/* Global keyboard-focus ring (10xweb Phase 5, Craft). Site-wide default so
   every interactive element gets a visible ring even where a component
   doesn't declare its own :focus-visible rule. Components that already set
   their own 2px teal-action outline (.sort-select, .chip-btn, .th-sort-btn)
   keep matching this pattern, so nothing needs to change there. Mouse/touch
   focus (:focus without :focus-visible) stays silent. */
:focus-visible {
  outline: 2px solid var(--teal-action);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 780px;
  margin-bottom: 22px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.container {
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

.skip-link {
  position: fixed;
  left: 20px;
  top: 12px;
  z-index: 100;
  transform: translateY(-150%);
  padding: 12px 16px;
  color: var(--white);
  background: var(--teal-deep);
  border-radius: 10px;
  font-weight: 700;
}

.skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   3. HEADER + NAV
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(221, 230, 230, 0.72);
  transition: box-shadow var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(8, 54, 59, 0.08);
}

.nav {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6); /* was 22px, snapped */
  transition: min-height var(--dur-base) var(--ease-standard);
}

.site-header.is-scrolled .nav {
  min-height: 62px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  flex: 0 0 auto;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0;
}

.logo svg {
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
}

.logo span {
  white-space: nowrap;
}

.logo strong {
  color: var(--teal-link);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6); /* was 22px, snapped */
  font-size: 0.91rem;
  font-weight: 700;
  color: var(--ink-muted);
}

.nav-links a {
  position: relative;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--teal-action);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-standard);
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--ink);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   4. COMPONENTS (generic, reusable on every page)
   -------------------------------------------------------------------------- */

/* Buttons. Coral is reserved for .btn-primary - never decorate with it. */
.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
}

.btn-primary {
  color: var(--white);
  background: var(--coral);
  box-shadow: 0 14px 26px rgba(192, 67, 42, 0.2);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  box-shadow: var(--shadow-cta-glow);
}

/* Coral fill swallows a teal ring (10xweb Phase 5, Craft) - white reads on
   both the coral fill and whatever surface sits behind it. */
.btn-primary:focus-visible {
  outline-color: var(--white);
}

.btn-secondary {
  color: var(--teal-link);
  background: rgba(255, 255, 255, 0.74);
  border-color: var(--teal-soft);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--white);
  border-color: var(--teal-action);
  box-shadow: var(--shadow-lift);
}

/* Chips - small teal trust markers */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(28, 140, 151, 0.2);
  border-radius: var(--radius-pill);
  color: var(--teal-link);
  background: rgba(227, 241, 241, 0.72);
  font-size: 0.83rem;
  font-weight: 800;
}

/* Inline text link */
.text-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  color: var(--teal-link);
  font-weight: 800;
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--teal-action);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* Tick list - teal-dot checklist */
.tick-list {
  display: grid;
  gap: var(--space-3);
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.tick-list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--space-3);
  align-items: start;
  color: var(--ink-soft);
  font-weight: 700;
}

.tick-list li::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--teal) 0 4px, transparent 5px),
    var(--teal-pale);
  border: 1px solid rgba(28, 140, 151, 0.18);
}

/* Green-tick list (founder mockup) - inline SVG circle-ticks in the markup */
.ticklist {
  display: grid;
  gap: 14px;
  margin: 22px 0 26px;
  padding: 0;
  list-style: none;
}

.ticklist li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--ink);
  font-weight: 600;
}

.ticklist li svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 2px;
}

/* Section heading - H2 left, short standfirst right */
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: 34px;
}

.section-heading h2,
.sec-head h2 {
  color: var(--ink);
  font-size: var(--text-title);
  line-height: 1.13;
  letter-spacing: 0;
  font-weight: 800;
}

.section-heading h2 {
  max-width: 700px;
  margin-bottom: 0;
}

.section-heading p {
  max-width: 410px;
  margin-bottom: 0;
  color: var(--ink-muted);
  font-weight: 600;
}

/* Eyebrow kicker - small uppercase label above headings (founder mockup).
   Editorial rhythm: one per section head, teal on light, coral on deep teal. */
.eyebrow {
  display: block;
  color: var(--teal-action);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Centered section head with eyebrow (founder mockup). Use .sec-head for
   centered bands, .section-heading for the left/right editorial split. */
.sec-head {
  max-width: 42em;
  margin: 0 auto 44px;
  text-align: center;
}

.sec-head .eyebrow {
  margin-bottom: var(--space-3);
}

.sec-head h2 {
  margin-bottom: var(--space-3);
}

.sec-head p {
  margin-bottom: 0;
  color: var(--ink-muted);
  font-size: 1.02rem;
  font-weight: 600;
}

.story-copy .eyebrow,
.reviewer-copy .eyebrow {
  margin-bottom: var(--space-3);
}

/* Icon tiles - bespoke line icons sit inside these (see README icon rules) */
.condition-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--teal-pale);
  border: 1px solid rgba(28, 140, 151, 0.16);
  color: var(--teal-link);
}

.condition-icon svg {
  width: 26px;
  height: 26px;
  stroke-width: 2;
}

.line-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: var(--radius-lg); /* was 14px, snapped */
  color: var(--teal-link);
  background: var(--teal-pale);
}

.line-icon svg {
  width: 24px;
  height: 24px;
}

/* Condition cards */
.condition-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5); /* was 18px, snapped */
}

.condition-card {
  min-height: 222px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 247, 0.7)),
    radial-gradient(circle at 88% 14%, rgba(191, 224, 225, 0.46), transparent 32%);
  box-shadow: 0 1px 0 rgba(8, 54, 59, 0.02);
  transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}

.condition-card.is-live:hover,
.condition-card.is-live:focus-within {
  transform: translateY(-5px);
  border-color: rgba(28, 140, 151, 0.36);
  box-shadow: var(--shadow-lift);
}

.condition-card h3 {
  margin: 22px 0 8px;
  color: var(--ink);
  font-size: 1.22rem;
  line-height: 1.2;
  font-weight: 800;
}

.condition-card p {
  margin-bottom: var(--space-6);
  color: var(--ink-muted);
  font-size: 0.96rem;
  font-weight: 600;
}

.card-action,
.card-status {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  color: var(--teal-link);
  font-weight: 800;
}

.card-status {
  color: var(--ink-muted);
}

/* Gradient-top condition card variant (founder mockup): teal gradient band
   with a white icon tile. Add .has-band to .condition-card. */
.condition-card.has-band {
  padding: 0;
  overflow: hidden;
}

.condition-band {
  height: 104px;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  background: linear-gradient(130deg, var(--teal), var(--teal-link));
}

.condition-band .condition-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  border-color: transparent;
  background: rgba(255, 255, 255, 0.94);
  color: var(--teal-action);
  box-shadow: 0 1px 3px rgba(11, 42, 46, 0.14);
}

.condition-band .condition-icon svg {
  width: 24px;
  height: 24px;
}

.condition-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 20px;
}

.condition-body h3 {
  margin: 0 0 8px;
}

.condition-body p {
  margin-bottom: 14px;
}

.condition-body .card-action {
  margin-top: auto;
}

/* Numbered steps (founder mockup) - coral number chips via CSS counters */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-2);
  counter-reset: step;
}

.step {
  position: relative;
  padding: 32px 26px 26px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 1px 0 rgba(8, 54, 59, 0.02);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -18px;
  left: 26px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--white);
  background: var(--coral);
  font-size: 1.25rem;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(192, 67, 42, 0.28);
}

.step h3 {
  margin: 12px 0 8px;
  color: var(--ink);
  font-size: var(--text-heading);
  line-height: 1.25;
}

.step p {
  margin-bottom: 0;
  color: var(--ink-muted);
  font-size: 0.96rem;
  font-weight: 600;
}

/* Work strip (3-up icon cards) */
.work-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5); /* was 18px, snapped */
  margin-bottom: 22px;
}

.work-item {
  padding: var(--space-6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.work-item h3 {
  margin-bottom: var(--space-2);
  color: var(--ink);
  font-size: var(--text-heading);
  line-height: 1.25;
}

.work-item p {
  margin-bottom: 0;
  color: var(--ink-muted);
  font-weight: 600;
}

/* Trust cards */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5); /* was 18px, snapped */
}

.trust-card {
  padding: var(--space-6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.trust-kicker {
  margin-bottom: var(--space-2);
  color: var(--teal-link);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trust-card h2,
.trust-card h3 {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.28;
}

.trust-card p {
  margin-bottom: var(--space-3);
  color: var(--ink-muted);
  font-weight: 600;
}

/* Reviewer quote card */
.reviewer-card {
  padding: 28px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, var(--white), var(--cool));
  box-shadow: var(--soft-shadow);
}

.quote-mark {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  color: var(--teal-link);
  border-radius: var(--radius-lg); /* was 18px, snapped */
  background: var(--teal-pale);
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 800;
}

.reviewer-card blockquote {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: var(--text-lead);
  line-height: 1.34;
  font-weight: 800;
}

.reviewer-meta {
  color: var(--ink-muted);
  font-weight: 700;
}

/* GP reviewer quote + avatar byline (founder mockup).
   (.gp-* names: .byline is taken by the journey-page byline strip.) */
.quote {
  margin: 0 0 22px;
  color: var(--ink);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.quote .mk {
  color: var(--coral-bright);
}

.gp-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--space-5);
}

.gp-avatar {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: linear-gradient(135deg, var(--teal), var(--teal-link));
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.gp-who b {
  display: block;
  color: var(--ink);
  font-size: 1rem;
}

.gp-who .text-link {
  min-height: 34px;
  font-size: var(--text-small);
}

/* FAQ accordion - native <details> */
.faq-list {
  display: grid;
  gap: var(--space-3);
  max-width: 860px;
  margin: 0 auto;
}

details {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1px 0 rgba(8, 54, 59, 0.03);
}

summary {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5); /* was 18px, snapped */
  padding: 18px 22px;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  color: var(--teal-link);
  background: var(--teal-pale);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform var(--dur-base) var(--ease-standard);
}

/* Founder mockup: the plus rotates 45deg into a close mark when open */
details[open] summary::after {
  transform: rotate(45deg);
}

details p {
  margin: -2px 22px 22px;
  color: var(--ink-muted);
  font-weight: 600;
}

/* Photo frame - the branded duotone + gradient-fallback imagery pattern.
   The photo is a CSS background layered UNDER teal duotone gradients, so a
   failed image load degrades to an on-brand gradient, never a broken icon.
   Usage: <div class="photo-frame" style="--photo: url(...)"> or a modifier
   class that sets --photo. */
.photo-frame {
  position: relative;
  min-height: 520px;
  border-radius: var(--radius-xl); /* was 28px, snapped */
  overflow: hidden;
  border: 1px solid rgba(221, 230, 230, 0.78);
  box-shadow: var(--shadow);
  background:
    linear-gradient(140deg, rgba(8, 54, 59, 0.2), rgba(28, 140, 151, 0.5)),
    linear-gradient(135deg, var(--teal-pale), var(--warm));
  isolation: isolate;
}

.photo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
  opacity: 1;
  z-index: -1;
}

.photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  z-index: -1;
}

.photo-caption {
  position: absolute;
  left: 22px; /* intentional */
  right: 22px; /* intentional */
  bottom: 22px; /* intentional */
  padding: var(--space-5); /* was 18px, snapped */
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg); /* was 18px, snapped */
  background: rgba(8, 54, 59, 0.58);
  backdrop-filter: blur(14px);
}

.photo-caption strong {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 1.05rem;
  line-height: 1.25;
}

.photo-caption span {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}

/* Form validation feedback (10xweb Phase 5, Craft). Not wired to a live form
   yet - contact.html is mailto-only and search.html treats an empty query as
   a valid browse view, so neither has a real validation path today. Ships as
   a ready pattern for the next form that needs it. */
.field-error {
  display: block;
  margin-top: var(--space-2);
  color: var(--error);
  font-size: var(--text-small);
  font-weight: 700;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--error);
}

/* --------------------------------------------------------------------------
   5. HERO (animated comparison preview)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: clip;
  padding: var(--space-section) 0 64px; /* top was 78px, snapped; bottom 64px kept literal (asymmetric, not part of the section-band pattern) */
  background: var(--warm);
}

/* Soft floating colour blobs behind the hero (founder mockup) */
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  will-change: transform;
}

.hero-blob.b1 {
  width: 520px;
  height: 520px;
  top: -160px;
  right: -80px;
  background: radial-gradient(circle at 30% 30%, var(--teal-soft), transparent 70%);
  animation: blobFloat1 18s ease-in-out infinite;
}

.hero-blob.b2 {
  width: 420px;
  height: 420px;
  bottom: -140px;
  left: -60px;
  background: radial-gradient(circle at 50% 50%, var(--coral-pale), transparent 70%);
  animation: blobFloat2 22s ease-in-out infinite;
}

.hero-blob.b3 {
  width: 300px;
  height: 300px;
  top: 40%;
  left: 46%;
  background: radial-gradient(circle at 50% 50%, var(--teal-pale), transparent 70%);
  animation: blobFloat1 26s ease-in-out infinite reverse;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(430px, 0.88fr);
  align-items: center;
  gap: 46px;
}

/* H1 accent word: teal word over a low-opacity coral bar (founder mockup) */
.accent {
  position: relative;
  isolation: isolate;
  white-space: nowrap;
  color: var(--teal-action);
}

.accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px; /* was 4px — Fraunces' round display "g"/"y" bowls are deeper
    and fuller than Plus Jakarta Sans' simple descenders; 4px sliced through
    the bowl, -6px clears it so the bar reads as a clean underline. */
  height: 9px;
  border-radius: 4px;
  background: var(--rhyme-accent);
  z-index: -1;
}

.hero-lede {
  max-width: 650px;
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-size: 1.18rem;
  line-height: 1.62;
  font-weight: 500;
}

.independence {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  max-width: 640px;
  margin-bottom: 28px;
  color: var(--ink-muted);
  font-size: 0.98rem;
}

.independence svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: var(--space-1);
  color: var(--teal-action);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: 26px;
}

/* Small reassurance line under the hero CTAs (founder mockup) */
.cta-note {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.hero .hero-actions {
  margin-bottom: 14px;
}

.proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--ink-muted);
  font-size: var(--text-small);
  font-weight: 700;
}

.proof-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.proof-row span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(28, 140, 151, 0.12);
}

.hero-visual {
  position: relative;
  min-height: 480px;
  isolation: isolate;
}

/* Hero anchor: duotone lifestyle photo in a rounded white-bordered frame
   (founder mockup). Composes with .photo-frame for the duotone + fallback. */
.hero-photo {
  position: absolute;
  inset: 8px 8px auto 8px;
  height: 336px;
  min-height: 0;
  border: 5px solid var(--white);
  border-radius: var(--radius-xl); /* was 28px, snapped */
}

/* Floating "Verified" preview card - founder composition, Codex glass finish.
   Deliberately anonymous: no provider name, no real price. */
.card-float {
  position: absolute;
  bottom: 16px;
  left: -6px;
  width: min(68%, 260px);
  padding: 15px 17px;
  border: 1px solid rgba(221, 230, 230, 0.9);
  border-radius: var(--radius-lg); /* was 18px, snapped */
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  z-index: 4;
  animation: floatPill 7s ease-in-out infinite;
}

.cf-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}

.cf-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 9px;
  border: 1px solid rgba(28, 140, 151, 0.18);
  background: linear-gradient(135deg, var(--teal-soft), var(--teal-pale));
}

.cf-lines {
  flex: 1;
  min-width: 0;
}

.cf-bar {
  display: block;
  height: 7px;
  border-radius: 4px;
}

.cf-bar.w1 {
  width: 64%;
  margin-bottom: 6px;
}

.cf-bar.w2 {
  width: 42%;
}

.cf-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  color: var(--teal-link);
  background: var(--teal-pale);
  font-size: var(--text-micro);
  font-weight: 800;
}

.cf-badge svg {
  width: 11px;
  height: 11px;
}

.cf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: 11px;
  border-top: 1px solid var(--hairline);
}

.cf-label {
  height: 7px;
  width: 42%;
  border-radius: 4px;
}

.cf-price {
  color: var(--teal-action);
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Drifting colour orbs behind the floating cards */
.orb {
  position: absolute;
  border-radius: var(--radius-pill);
  filter: blur(18px);
  opacity: 0.82;
  animation: drift 9s ease-in-out infinite alternate;
  z-index: -1;
}

.orb-one {
  width: 260px;
  height: 260px;
  left: 6%;
  top: 8%;
  background: linear-gradient(145deg, rgba(191, 224, 225, 0.92), rgba(28, 140, 151, 0.34));
}

.orb-two {
  width: 225px;
  height: 225px;
  right: 1%;
  top: 18%;
  background: linear-gradient(145deg, rgba(251, 246, 243, 0.95), rgba(227, 241, 241, 0.85));
  animation-delay: -2.5s;
}

.orb-three {
  width: 180px;
  height: 180px;
  left: 24%;
  bottom: 4%;
  background: rgba(227, 241, 241, 0.96);
  animation-delay: -5s;
}

/* Glassmorphic abstract comparison-card previews (deliberately anonymous:
   no provider names, no prices - compliance) */
.comparison-card {
  position: absolute;
  width: min(86%, 430px);
  left: 7%;
  top: 96px;
  padding: var(--space-6); /* was 22px, snapped */
  border: 1px solid rgba(221, 230, 230, 0.9);
  border-radius: var(--radius-lg); /* was 22px, snapped */
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  animation: floatCard 6.5s ease-in-out infinite;
}

.comparison-card:nth-of-type(2) {
  left: auto;
  right: 2%;
  top: 248px;
  width: min(76%, 370px);
  animation-delay: -2s;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 19px;
}

.fake-logo {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-lg); /* was 15px, snapped */
  border: 1px solid rgba(28, 140, 151, 0.18);
  background:
    linear-gradient(135deg, rgba(227, 241, 241, 0.95), rgba(255, 255, 255, 0.7)),
    radial-gradient(circle at 70% 30%, rgba(28, 140, 151, 0.22), transparent 35%);
}

.fake-price {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-size: 1.45rem;
  font-weight: 800;
}

.shimmer {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: #eaf2f2;
}

.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78), transparent);
  animation: shimmer 2.8s ease-in-out infinite;
}

.line-lg {
  width: 72%;
  height: 15px;
  margin-bottom: 13px;
}

.line-md {
  width: 55%;
  height: 12px;
  margin-bottom: 18px;
}

.rating-row {
  display: grid;
  gap: 11px;
}

.metric {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.bar {
  height: 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--teal-soft), var(--teal));
  opacity: 0.86;
}

.bar.short {
  width: 78%;
}

.bar.mid {
  width: 64%;
}

.bar.long {
  width: 92%;
}

/* Floating trust pills */
.trust-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 9px 14px;
  color: var(--teal-link);
  border: 1px solid rgba(191, 224, 225, 0.9);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow-pill);
  font-size: 0.82rem;
  font-weight: 800;
  backdrop-filter: blur(16px);
  animation: floatPill 5.8s ease-in-out infinite;
}

.trust-pill::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(28, 140, 151, 0.12);
}

.pill-one {
  left: auto;
  right: 10px;
  top: -2px;
}

.pill-two {
  right: 6px;
  top: 128px;
  animation-delay: -1.4s;
}

.pill-three {
  left: 12%;
  bottom: 64px;
  animation-delay: -3s;
}

/* --------------------------------------------------------------------------
   6. BANDS
   Rhythm down the page: white → deep-teal ribbon → white → warm → deep-teal
   → cool → white → white → warm-fade → deep-teal CTA → deep-teal footer.
   -------------------------------------------------------------------------- */

.section {
  padding: var(--space-section) 0; /* was 82px, snapped */
}

.cool-band {
  background: var(--cool);
}

.story-band {
  background: var(--warm);
  overflow: clip;
}

/* Deep-teal stat strip under the hero */
.credibility-ribbon {
  background: var(--teal-deep);
  color: var(--white);
}

.ribbon-grid {
  min-height: 96px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.ribbon-item {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 20px 24px;
  background: var(--teal-deep);
}

.ribbon-item strong {
  color: var(--white);
  font-size: 1.24rem;
  line-height: 1.2;
  font-weight: 800;
}

.ribbon-item span {
  color: var(--ink-inverse-soft);
  font-size: 0.86rem;
  font-weight: 700;
}

/* Slim tick ribbon (founder mockup) - qualitative ticks with coral icons.
   The NUMBERS live in the promise band; never duplicate them here. */
.ribbon-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  justify-content: center;
  padding: 15px 0;
  color: var(--teal-soft);
  font-size: 0.92rem;
  font-weight: 700;
}

.ribbon-ticks span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ribbon-ticks svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--coral-bright);
}

/* Story + reviewer split layouts */
.story-grid,
.reviewer-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--space-12);
}

.story-copy h2,
.reviewer-copy h2,
.closing-copy h2 {
  margin-bottom: 18px;
  color: var(--ink);
  font-size: var(--text-title); /* was 2rem/3.4vw/2.85rem fluid max; snapped max 2.85->2.75rem, within tolerance */
  line-height: 1.1;
  letter-spacing: 0;
  font-weight: 800;
}

.story-copy p,
.reviewer-copy p {
  color: var(--ink-soft);
  font-size: 1.05rem;
  font-weight: 600;
}

/* Deep-teal promise band (honest-principles stats).
   Founder mockup: teal-900 to teal-700 gradient + soft coral radial accent. */
.promise-band {
  position: relative;
  overflow: hidden;
  padding: 76px 0;
  color: var(--white);
  background: linear-gradient(135deg, var(--teal-deep), var(--teal-link));
}

.promise-band::after {
  content: "";
  position: absolute;
  top: -160px;
  right: -100px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 100, 63, 0.3), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.promise-band .container {
  position: relative;
  z-index: 1;
}

.promise-band .eyebrow {
  color: var(--coral-bright);
}

.promise-band .sec-head h2 {
  color: var(--white);
}

.promise-band .sec-head p {
  color: var(--ink-inverse-soft);
}

.promise-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.5fr);
  gap: var(--space-8);
  align-items: end;
  margin-bottom: 28px;
}

.promise-head h2 {
  margin-bottom: 0;
  color: var(--white);
  font-size: clamp(2.05rem, 3.5vw, 3rem);
  line-height: 1.08;
  font-weight: 800;
}

.promise-head p {
  margin-bottom: 0;
  color: var(--ink-inverse-soft);
  font-weight: 700;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.stat-card {
  min-height: 162px;
  padding: 24px 22px;
  border: 1px solid rgba(191, 224, 225, 0.24);
  border-radius: var(--radius-lg); /* was 18px, snapped */
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
}

.stat-card strong {
  display: block;
  margin-bottom: 10px;
  color: var(--white);
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Coral-accented digits inside the stats (founder mockup) */
.stat-card strong b {
  color: var(--coral-bright);
  font-weight: 800;
}

.stat-card span {
  color: var(--ink-inverse-soft);
  font-weight: 700;
}

.reviewer-band {
  background: var(--white);
}

.faq {
  background: linear-gradient(180deg, var(--white), var(--warm));
}

/* Full-bleed photographic closing CTA */
.closing-cta {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: var(--teal-deep);
  isolation: isolate;
}

.closing-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(120% 135% at 50% 48%, rgba(8, 54, 59, 0.66) 0%, rgba(8, 54, 59, 0.42) 46%, rgba(8, 54, 59, 0.12) 100%),
    var(--photo);
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.closing-copy {
  max-width: 720px;
  padding: 96px 0;
}

.closing-copy h2 {
  color: var(--white);
  text-shadow: 0 1px 2px rgba(8, 54, 59, 0.55), 0 3px 22px rgba(8, 54, 59, 0.5);
}

.closing-copy p {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  font-weight: 700;
  text-shadow: 0 1px 14px rgba(8, 54, 59, 0.55);
}

/* Centered closing CTA variant (founder mockup) */
.closing-copy.is-centered {
  margin: 0 auto;
  text-align: center;
}

.closing-copy.is-centered p {
  margin-left: auto;
  margin-right: auto;
}

.closing-copy.is-centered .hero-actions {
  justify-content: center;
}

/* Centered link row under a band's cards */
.band-link {
  margin-top: 10px;
  text-align: center;
}

/* Footer */
.site-footer {
  padding: 60px 0 36px;
  color: rgba(255, 255, 255, 0.82);
  background: var(--teal-deep);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(4, minmax(128px, 0.55fr));
  gap: var(--space-8);
  margin-bottom: 36px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  color: var(--white);
  font-weight: 800;
}

.footer-logo svg {
  width: 38px;
  height: 38px;
}

.footer-logo strong {
  color: var(--teal-soft);
}

.footer-brand p {
  max-width: 480px;
  margin-bottom: 0;
}

.footer-col h2,
.footer-col h3 {
  margin-bottom: 13px;
  color: var(--white);
  font-size: 0.94rem;
}

.footer-col a {
  display: block;
  width: fit-content;
  min-height: 36px;
  color: var(--ink-inverse-soft);
  font-weight: 600;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.footer-bottom {
  display: grid;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--ink-inverse-soft);
  font-size: 0.88rem;
}

/* Deep-teal bands swallow the default teal-action ring (10xweb Phase 5,
   Craft) - white reads on --teal-deep / the promise-band gradient / the
   credibility ribbon. Scoped to the actual band classes, not a blanket
   dark-surface rule. */
.promise-band :focus-visible,
.closing-cta :focus-visible,
.site-footer :focus-visible,
.credibility-ribbon :focus-visible {
  outline-color: var(--white);
}

/* --------------------------------------------------------------------------
   7. UTILITIES - scroll reveal
   Default state is fully visible (no-JS safe). mhc.js adds .reveal-ready to
   <body> only after marking above-the-fold items .is-visible, so nothing
   flashes and nothing is ever gated on JS.
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 1;
  transform: none;
}

.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms ease, transform 560ms ease;
}

.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   8. ANIMATIONS
   -------------------------------------------------------------------------- */

@keyframes drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(18px, -18px, 0) scale(1.04);
  }
}

@keyframes floatCard {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-14px) rotate(1deg);
  }
}

@keyframes floatPill {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

@keyframes blobFloat1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-30px, 24px) scale(1.06);
  }
}

@keyframes blobFloat2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(28px, -22px) scale(1.08);
  }
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1050px) {
  .nav-links {
    display: none;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 480px;
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
  }

  .condition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .section {
    padding: 64px 0;
  }

  .section-heading {
    display: block;
  }

  .section-heading h2 {
    margin-bottom: 14px;
  }

  .work-strip,
  .trust-grid,
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .ribbon-grid,
  .promise-head,
  .story-grid,
  .reviewer-grid {
    grid-template-columns: 1fr;
  }

  .story-grid .photo-frame {
    order: -1;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 28px, var(--container));
  }

  .nav {
    min-height: 68px;
  }

  .logo span {
    font-size: 0.94rem;
  }

  .nav-actions .btn {
    padding: 0 13px;
    font-size: 0.86rem;
  }

  .hero {
    padding: 54px 0 48px;
  }

  h1 {
    font-size: clamp(2.35rem, 12vw, 3rem);
  }

  .hero-lede {
    font-size: 1.04rem;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-visual {
    min-height: 420px;
  }

  .hero-photo {
    height: 272px;
  }

  .card-float {
    left: 0;
    bottom: 24px;
    width: min(78%, 240px);
  }

  .pill-one {
    right: 4px;
  }

  .pill-two {
    top: 96px;
    right: 0;
  }

  .comparison-card {
    left: 0;
    top: 86px;
    width: 88%;
    padding: var(--space-5); /* was 18px, snapped */
  }

  .comparison-card:nth-of-type(2) {
    right: 0;
    top: 225px;
    width: 82%;
  }

  .metric {
    grid-template-columns: 88px 1fr;
  }

  .condition-grid,
  .work-strip,
  .trust-grid,
  .ribbon-grid,
  .stat-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .photo-frame,
  .reviewer-photo {
    min-height: 360px;
  }

  .promise-band {
    padding: 58px 0;
  }

  .closing-copy {
    padding: 72px 0;
  }
}

/* --------------------------------------------------------------------------
   10. SUBPAGES - page hero, legal prose, tables, note card, depth ladder
   Used by how-we-work.html and the legal pages (privacy / terms / cookies).
   -------------------------------------------------------------------------- */

/* Compact hero band for content + legal pages */
.page-hero {
  padding: 66px 0 54px;
  background:
    radial-gradient(circle at 9% 9%, rgba(227, 241, 241, 0.95), transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f8fbfb 52%, var(--warm) 100%);
}

.page-kicker {
  margin-bottom: 14px;
  color: var(--teal-link);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-hero h1 {
  max-width: 820px;
  margin-bottom: var(--space-4);
  font-size: clamp(2.2rem, 4vw, 3.1rem);
}

.page-lede {
  max-width: 700px;
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-size: 1.12rem;
  line-height: 1.62;
  font-weight: 500;
}

.page-meta {
  margin-bottom: 0;
  color: var(--ink-muted);
  font-size: var(--text-small);
  font-weight: 600;
}

/* Legal layout - sticky "on this page" rail + prose column */
.legal-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.toc {
  position: sticky;
  top: 96px;
}

.toc h2 {
  margin-bottom: 10px;
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.toc a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding-left: 12px;
  border-left: 2px solid var(--hairline);
  color: var(--ink-muted);
  font-size: 0.86rem;
  font-weight: 700;
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

.toc a:hover,
.toc a:focus-visible {
  color: var(--teal-link);
  border-left-color: var(--teal-action);
}

/* Prose - readable legal/content text on the design system's scale */
.legal-prose {
  max-width: 720px;
}

.legal-prose h2 {
  margin: 44px 0 12px;
  color: var(--ink);
  font-size: 1.32rem;
  line-height: 1.25;
  font-weight: 800;
  scroll-margin-top: 96px;
}

.legal-prose h2:first-child {
  margin-top: 0;
}

.legal-prose h3 {
  margin: 26px 0 8px;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 800;
}

.legal-prose p,
.legal-prose li {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.72;
  font-weight: 500;
}

.legal-prose p {
  margin-bottom: 14px;
}

.legal-prose ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal-prose li {
  margin-bottom: 6px;
}

.legal-prose a {
  color: var(--teal-link);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.legal-prose a:hover,
.legal-prose a:focus-visible {
  color: var(--teal-action);
}

.legal-prose strong {
  color: var(--ink);
}

/* Data tables - wrapped so wide tables scroll inside their own container */
.legal-layout > * { min-width: 0; } /* let tables scroll inside the column, not the page */
.legal-table {
  margin: 6px 0 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow-x: auto;
  background: var(--white);
}

.legal-table table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.legal-table th {
  padding: 12px 14px;
  color: var(--teal-link);
  background: var(--teal-pale);
  font-weight: 800;
  text-align: left;
}

.legal-table td {
  padding: 12px 14px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-soft);
  font-weight: 500;
  vertical-align: top;
  line-height: 1.6;
}

/* Note card - the ONE calm compliance/status note a page may carry.
   Teal, not amber: informative, never alarming. Max one per page. */
.note-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  max-width: 720px;
  margin: 26px 0;
  padding: 20px 22px;
  border: 1px solid rgba(28, 140, 151, 0.24);
  border-radius: var(--radius-lg);
  background: var(--teal-pale);
}

.note-card .line-icon {
  margin-bottom: 0;
  background: var(--white);
}

.note-card p {
  margin-bottom: 0;
  color: var(--teal-link);
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 600;
}

.note-card strong {
  color: var(--teal-deep);
}

/* Depth ladder - how much detail each level of the site may show.
   Three steps, deepening teal, increasing indent. how-we-work.html only. */
.ladder {
  display: grid;
  gap: var(--space-3);
  margin-top: 26px;
}

.ladder-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: 18px 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.ladder-step:nth-child(2) {
  margin-left: clamp(0px, 4vw, 34px);
  background: var(--cool);
}

.ladder-step:nth-child(3) {
  margin-left: clamp(0px, 8vw, 68px);
  border-color: rgba(28, 140, 151, 0.3);
  background: var(--teal-pale);
}

.ladder-step .line-icon {
  margin-bottom: 0;
  background: var(--white);
  border: 1px solid rgba(28, 140, 151, 0.16);
}

.ladder-step h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
}

.ladder-step p {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
  font-weight: 500;
}

@media (max-width: 960px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .toc {
    position: static;
  }

  .toc a {
    min-height: 40px;
  }
}

@media (max-width: 640px) {
  .page-hero {
    padding: 48px 0 42px;
  }

  .legal-prose h2 {
    margin-top: 36px;
  }

  .ladder-step,
  .note-card {
    grid-template-columns: 1fr;
  }

  .ladder-step:nth-child(2),
  .ladder-step:nth-child(3) {
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   11. REDUCED MOTION (non-negotiable)
   -------------------------------------------------------------------------- */

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

  .reveal,
  .reveal-ready .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   12. JOURNEY PAGES - condition.html / compare.html / prescription.html
   Shared components for the user-journey layer. Same tokens, same calm.
   Coral stays reserved for one primary action per view.
   -------------------------------------------------------------------------- */

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  color: var(--ink-muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.breadcrumb a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--teal-link);
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.crumb-sep {
  color: var(--teal-soft);
}

/* Compact page hero for journey pages */
.journey-hero {
  padding: 44px 0 56px;
  background:
    radial-gradient(circle at 8% 4%, rgba(227, 241, 241, 0.92), transparent 38%),
    linear-gradient(150deg, #ffffff 0%, #f8fbfb 58%, var(--warm) 100%);
}

.journey-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.55fr);
  align-items: center;
  gap: 44px;
}

.journey-head {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: 18px;
}

.journey-head h1 {
  margin-bottom: 0;
  font-size: clamp(2.2rem, 4vw, 3.1rem);
}

.condition-icon.lg {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: var(--radius-lg); /* was 19px, snapped */
}

.condition-icon.lg svg {
  width: 32px;
  height: 32px;
}

.journey-lede {
  max-width: 660px;
  margin-bottom: var(--space-5);
  color: var(--ink-soft);
  font-size: 1.12rem;
  line-height: 1.62;
  font-weight: 500;
}

/* "At a glance" side panel */
.journey-panel {
  padding: 26px;
  border: 1px solid rgba(221, 230, 230, 0.9);
  border-radius: var(--radius-lg); /* was 22px, snapped */
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(14px);
}

.journey-panel h2 {
  margin-bottom: var(--space-4);
  color: var(--teal-link);
  font-size: var(--text-small);
  font-weight: 800;
}

.journey-panel ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-panel li {
  display: grid;
  gap: 1px;
}

.journey-panel li + li {
  padding-top: 13px;
  border-top: 1px solid var(--hairline);
}

.journey-panel strong {
  color: var(--ink);
  font-size: 1.32rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.journey-panel span {
  color: var(--ink-muted);
  font-size: 0.88rem;
  font-weight: 700;
}

/* C8 sponsored band: the persistent "Ad" chip every sponsored card carries.
   Neutral ink-on-grey — deliberately NOT coral or teal, so a paid slot can
   never borrow brand emphasis. Rendered only when SPONSORED_SLOTS has
   verified entries (empty at launch). */
.ad-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--ink-muted);
  background: var(--cool);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sponsored-band .provider-card {
  margin-top: var(--space-3);
}

/* Small pills: prescription marker + dose tags */
.rx-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid rgba(28, 140, 151, 0.24);
  border-radius: var(--radius-pill);
  color: var(--teal-link);
  background: var(--teal-pale);
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.dose-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.dose-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 11px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--ink-muted);
  background: var(--white);
  font-size: 0.79rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Treatment option cards (condition page) */
.treatment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5); /* was 18px, snapped */
}

.treatment-card {
  min-height: 208px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 247, 0.7)),
    radial-gradient(circle at 88% 14%, rgba(191, 224, 225, 0.4), transparent 32%);
  box-shadow: 0 1px 0 rgba(8, 54, 59, 0.02);
  transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}

.treatment-card:hover,
.treatment-card:focus-within {
  transform: translateY(-5px);
  border-color: rgba(28, 140, 151, 0.36);
  box-shadow: var(--shadow-lift);
}

.treatment-card h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 800;
}

.treatment-meta {
  margin: 12px 0 0;
  color: var(--ink-muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.treatment-foot {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.from-price {
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1.1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.from-price .price-unit {
  color: var(--ink-muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.from-price small {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

/* Prescription-only options panel (the condition page's one compliance note) */
.rx-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-top: var(--space-6); /* was 22px, snapped */
  padding: 32px 34px;
  border-radius: var(--radius-xl); /* was 22px, snapped — big panel */
  color: var(--white);
  background:
    radial-gradient(circle at 86% 8%, rgba(28, 140, 151, 0.42), transparent 42%),
    var(--teal-deep);
  box-shadow: var(--shadow);
}

.rx-panel-copy {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.rx-panel .rx-chip {
  border-color: rgba(255, 255, 255, 0.26);
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}

.rx-panel h2,
.rx-panel h3 {
  margin: 2px 0 0;
  color: var(--white);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.22;
  font-weight: 800;
}

.rx-panel p {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-inverse-soft);
  font-weight: 600;
}

/* Reviewer byline strip */
.byline-band {
  padding: 24px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--white);
}

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  color: var(--ink-soft);
  font-size: 0.93rem;
  font-weight: 700;
}

.byline-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  color: var(--teal-link);
  background: var(--teal-pale);
  border: 1px solid rgba(28, 140, 151, 0.16);
}

.byline-mark svg {
  width: 19px;
  height: 19px;
}

.byline .text-link {
  min-height: 44px;
}

/* Cross-links to other conditions */
.xlink-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

a.chip {
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

a.chip:hover,
a.chip:focus-visible {
  border-color: var(--teal-action);
  background: var(--white);
  box-shadow: var(--shadow-lift);
}

/* The prescription acknowledgement gate (one per browser session) */
.gate-band {
  padding: 88px 0 104px;
  background:
    radial-gradient(circle at 10% 0%, rgba(227, 241, 241, 0.92), transparent 42%),
    linear-gradient(150deg, #ffffff 0%, #f8fbfb 58%, var(--warm) 100%);
}

.gate-card {
  max-width: 660px;
  margin: 0 auto;
  padding: 42px 44px;
  border: 1px solid rgba(221, 230, 230, 0.9);
  border-radius: var(--radius-xl); /* was 26px, snapped */
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
}

.gate-card .line-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
}

.gate-card h2 {
  /* a11y-check.js fix: this heading was an <h1> until the dispensing gate
     interstitial was found to carry two <h1>s in static markup (this one +
     the page title h1 below it, mutually exclusive via [hidden] but both
     present in source). Demoted to h2 for exactly-one-h1 correctness; every
     declaration the bare h1 rule contributed (font-family, color, weight,
     letter-spacing) is restated here so the visual result is unchanged. */
  max-width: none;
  margin-bottom: 14px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.gate-card p {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
  font-weight: 500;
}

.gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: 28px;
}

.gate-note {
  margin-top: var(--space-5); /* was 18px, snapped */
  color: var(--ink-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Compare page header */
.compare-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
}

.compare-title h1 {
  margin: 10px 0 8px;
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
}

.compare-context {
  margin-bottom: var(--space-4);
  color: var(--ink-muted);
  font-size: 0.98rem;
  font-weight: 700;
}

.lane-line {
  max-width: 640px;
  margin: 16px 0 0;
  color: var(--ink-muted);
  font-size: 0.95rem;
  font-weight: 600;
}

.from-card {
  flex: 0 0 auto;
  display: grid;
  gap: 3px;
  padding: 20px 24px;
  border: 1px solid rgba(221, 230, 230, 0.9);
  border-radius: var(--radius-lg); /* was 18px, snapped */
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--soft-shadow);
  text-align: right;
}

.from-card strong {
  color: var(--ink);
  font-size: 1.55rem;
  line-height: 1.1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.from-card span {
  color: var(--ink-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

/* The single combined transparency note (one calm block, never stacked) */
.note-panel {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-4);
  margin-bottom: 30px;
  padding: 20px 24px;
  border: 1px solid rgba(28, 140, 151, 0.18);
  border-radius: var(--radius-lg);
  background: var(--teal-pale);
}

.note-panel .line-icon {
  margin-bottom: 0;
  background: rgba(255, 255, 255, 0.72);
}

.note-panel h2 {
  margin-bottom: var(--space-1);
  color: var(--ink);
  font-size: 0.99rem;
  font-weight: 800;
}

.note-panel p {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 600;
}

/* Filter / sort rail + results layout */
.compare-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
  gap: 34px;
}

.rail {
  position: sticky;
  top: 96px;
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.rail > h2 {
  margin-bottom: -8px;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 800;
}

.rail-group {
  display: grid;
  gap: 10px;
}

.rail-label {
  color: var(--ink-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.dose-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dose-chip {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  background: var(--white);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.dose-chip:hover,
.dose-chip:focus-visible {
  border-color: rgba(28, 140, 151, 0.4);
}

.dose-chip[aria-pressed="true"] {
  color: var(--teal-link);
  border-color: rgba(28, 140, 151, 0.44);
  background: var(--teal-pale);
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  color: var(--ink-soft);
  font-size: 0.93rem;
  font-weight: 700;
  cursor: pointer;
}

.toggle-row input {
  width: 19px;
  height: 19px;
  margin: 0;
  accent-color: var(--teal-action);
  cursor: pointer;
}

/* Eligibility flow shell (weight-loss intake — bmi-tool.js step controller) */
.elig-progress { display: flex; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.elig-progress li { position: relative; flex: 1; height: 6px; border-radius: 999px; background: var(--hairline); overflow: hidden; }
.elig-progress li[aria-current="step"],
.elig-progress li.is-done { background: var(--teal-action); }
.elig-step[hidden] { display: none; }
.elig-nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 22px; }
.elig-verdict-head { margin: 0 0 6px; font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.elig-verdict-head.tone-ok { color: var(--teal-deep); }
.elig-verdict-head.tone-mid { color: #7A5A18; }
.elig-verdict-head.tone-low { color: var(--teal-link); }
.elig-warn { margin: 14px 0 0; padding: 12px 16px; border-radius: var(--radius-md); background: #F6ECD9; color: #7A5A18; font-weight: 700; }
.elig-save { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.elig-linkbtn { display: inline; background: none; border: none; padding: 0; margin: 0; cursor: pointer; font: inherit; }

/* Rail explainer overrides the global FAQ <details> chrome */
.rail details {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.rail summary {
  min-height: 40px;
  padding: 0;
  color: var(--teal-link);
  font-size: 0.86rem;
  font-weight: 800;
}

.rail summary::after {
  width: 24px;
  height: 24px;
  font-size: 1.05rem;
}

.rail details p {
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 0.86rem;
  font-weight: 600;
}

.sort-select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  color: var(--ink);
  background: var(--white);
  font-family: inherit;
  font-size: 0.93rem;
  font-weight: 700;
  cursor: pointer;
}

.sort-select:focus-visible {
  outline: 2px solid var(--teal-action);
  outline-offset: 2px;
}

/* Sort-basis line - the on-screen statement of the ordering rule */
.basis-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  margin: 0 0 16px;
  color: var(--ink-muted);
  font-size: var(--text-small);
  font-weight: 700;
}

.basis-line strong {
  color: var(--teal-link);
  font-weight: 800;
}

/* Provider result cards - identical for every provider, by design */
.provider-list {
  display: grid;
  gap: var(--space-4);
}

.provider-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px;
  padding: 24px 26px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}

.provider-card:hover,
.provider-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(28, 140, 151, 0.32);
  box-shadow: var(--shadow-lift);
}

.provider-card h3 {
  margin: 0 0 3px;
  color: var(--ink);
  font-size: 1.16rem;
  line-height: 1.2;
  font-weight: 800;
}

.provider-treatment {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 14px 0 13px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
}

.pill svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.pill.on {
  color: var(--teal-link);
  background: var(--teal-pale);
  border: 1px solid rgba(28, 140, 151, 0.18);
}

.pill.off {
  color: var(--ink-muted);
  background: var(--cool);
  border: 1px solid var(--hairline);
}

.verify-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-size: 0.84rem;
  font-weight: 700;
}

.verify-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  color: var(--teal-link);
}

.verify-link:hover,
.verify-link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.quiet-note {
  color: var(--ink-muted);
  font-weight: 600;
}

.freshness {
  margin: 10px 0 0;
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.card-side {
  display: grid;
  align-content: space-between;
  justify-items: end;
  gap: var(--space-4);
  min-width: 186px;
  text-align: right;
}

.price-line {
  margin: 0;
}

.price-amount {
  color: var(--ink);
  font-size: 1.68rem;
  line-height: 1.05;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.price-unit {
  color: var(--ink-muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.card-cta {
  font-size: 0.92rem;
}

.no-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  font-size: 0.88rem;
  font-weight: 700;
}

/* Prescription-lane treatment rows */
.rx-list {
  display: grid;
  gap: 14px;
}

.rx-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px;
  padding: 24px 26px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}

.rx-item:hover,
.rx-item:focus-within {
  transform: translateY(-3px);
  border-color: rgba(28, 140, 151, 0.32);
  box-shadow: var(--shadow-lift);
}

.rx-item-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 10px;
}

.rx-item h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.16rem;
  line-height: 1.2;
  font-weight: 800;
}

.rx-item .dose-row {
  margin-bottom: var(--space-3);
}

.rx-item .treatment-meta {
  margin: 0;
}

/* Calm empty / not-found states */
.empty-state {
  padding: 46px 28px;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--cool);
  text-align: center;
}

.empty-state h3 {
  margin-bottom: 6px;
  color: var(--ink);
  font-size: var(--text-heading);
}

.empty-state p {
  margin-bottom: var(--space-4);
  color: var(--ink-muted);
  font-weight: 600;
}

/* Journey pages - responsive */
@media (max-width: 1050px) {
  .journey-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .journey-panel {
    max-width: 560px;
  }

  .journey-panel ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .journey-panel li + li {
    padding-top: 0;
    padding-left: 16px;
    border-top: none;
    border-left: 1px solid var(--hairline);
  }

  .compare-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6); /* was 22px, snapped */
  }

  .rail {
    position: static;
  }

  .treatment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .compare-head {
    display: block;
  }

  .from-card {
    display: inline-grid;
    margin-top: var(--space-5);
    text-align: left;
  }

  .rx-panel {
    grid-template-columns: 1fr;
    justify-items: start;
    padding: 28px;
  }
}

@media (max-width: 640px) {
  .journey-hero {
    padding: 34px 0 44px;
  }

  .journey-head {
    align-items: start;
  }

  .journey-panel ul {
    grid-template-columns: 1fr;
  }

  .journey-panel li + li {
    padding-left: 0;
    padding-top: 13px;
    border-left: none;
    border-top: 1px solid var(--hairline);
  }

  .treatment-grid {
    grid-template-columns: 1fr;
  }

  .provider-card,
  .rx-item {
    grid-template-columns: 1fr;
    gap: var(--space-5); /* was 18px, snapped */
  }

  .card-side {
    justify-items: start;
    text-align: left;
  }

  .card-side .btn {
    width: 100%;
  }

  .gate-card {
    padding: 30px 24px;
  }

  .gate-actions .btn {
    width: 100%;
  }

  .note-panel {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   11. v2.1 CONSOLIDATED COMPONENTS
   Rules promoted from per-page <style> blocks during the site-wide
   integration pass (2026-07-06). Sources noted per group; the page-scoped
   blocks they replace have been deleted. Truly single-page rules stay on
   their pages.
   -------------------------------------------------------------------------- */

/* Condition-hub helpers — shared by weight-loss.html, mens-health.html,
   hair-loss.html (and the .legal-prose ol rules also by
   weight-loss-without-gp.html). mhc.css styled .legal-prose ul but not ol. */
.byline .hub-author { color: var(--ink-muted); font-weight: 600; }
.legal-prose ol { margin: 0 0 16px; padding-left: 24px; }
.legal-prose ol > li { margin-bottom: 14px; }
.legal-prose .cite-list li { font-size: var(--text-small); }
.legal-prose .hub-cta { margin: 20px 0 6px; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }

/* Reviewer byline link — every editorial byline's reviewer name links to
   reviewer-ashish.html (B9.3). Inherits the byline's colour/weight so the
   rendered text stays identical; underline marks it as a link. */
.reviewer-link {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.reviewer-link:hover,
.reviewer-link:focus-visible { color: var(--teal-link); }

/* Reviewer-profile head — reviewer-ashish.html (large initials avatar +
   registration rows). */
.profile-head .gp-avatar { width: 92px; height: 92px; font-size: 1.9rem; font-weight: 800; }
.profile-head .gp-who b { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.profile-head .gp-who span { color: var(--ink-muted); font-weight: 600; }
.reg-rows { margin: 0; }
.reg-rows div { display: flex; justify-content: space-between; gap: var(--space-5); /* was 18px, snapped */ padding: 11px 0; border-top: 1px solid var(--hairline); }
.reg-rows div:first-child { border-top: 0; padding-top: 0; }
.reg-rows dt { color: var(--ink-muted); font-weight: 600; font-size: var(--text-small); }
.reg-rows dd { margin: 0; color: var(--ink); font-weight: 700; font-size: var(--text-small); text-align: right; }

/* B6/B7 comparison-template shared components — used verbatim by
   medexpress-vs-cloud-pharmacy.html (B6) and review-medexpress.html (B7).
   Template-specific rules (.vs-table, .fact-box, .rating-unit, .dual-cta,
   .sticky-cta, column-count overrides…) remain page-scoped. */
.verdict-callout { background: var(--cool); border-left: 4px solid var(--teal); border-radius: var(--radius-lg); padding: 26px 30px; }
.verdict-callout .eyebrow { display: block; margin-bottom: 10px; }
.verdict-callout p { margin: 0 0 12px; color: var(--ink-soft); font-size: 1.08rem; line-height: 1.65; max-width: 72ch; }
.verdict-callout p:last-child { margin-bottom: 0; }
.disclosure-chip { display: flex; gap: 10px; align-items: flex-start; background: var(--warm); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 14px 18px; font-size: 0.92rem; color: var(--ink-soft); max-width: 720px; }
.disclosure-chip svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--teal-link); }
.procon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.procon-card { border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 26px; background: var(--white); }
.procon-card h3 { margin: 0 0 14px; font-size: 1.15rem; color: var(--ink); }
.plainlist { list-style: none; margin: 0; padding: 0; }
.plainlist li { position: relative; padding: 3px 0 3px 26px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.plainlist li svg { position: absolute; left: 0; top: 7px; width: 16px; height: 16px; color: var(--teal-link); }
.choose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.choose-card { border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 24px; background: var(--white); }
.choose-card h3 { margin: 0 0 8px; font-size: 1.02rem; color: var(--ink); }
.choose-card p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.55; }
.cta-caption { margin: 0; font-size: 0.84rem; color: var(--ink-muted); }
@media (max-width: 720px) {
  .procon-grid,
  .choose-grid { grid-template-columns: 1fr; }
}

/* Homepage guides strip — a centred row of .text-link arrows under the
   condition grid (band-link's multi-link sibling). */
.band-links {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 34px;
}

/* Dispensing-price table (B8 lane) — replaces the inline styles the lane's
   render script used to emit. Flat and factual by design: no highlight rows,
   no provider tinting. */
.dispensing-table-wrap { overflow-x: auto; }
.dispensing-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.dispensing-table th {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(8, 54, 59, 0.14);
  font-size: 0.92rem;
  color: var(--ink);
}
.dispensing-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(8, 54, 59, 0.08);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONDITION-LEVEL COMPARE PAGE (wireframe 4a) — controls + desktop table.
   The condition is the page; the treatment is a filter; the desktop table and
   the mobile provider cards render the same rows (this block owns the swap).
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ── Controls ─────────────────────────────────────────────────────────── */
.compare-controls {
  display: grid;
  gap: var(--space-4);
  margin-bottom: 22px;
}

.control-label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--ink-muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 7px 15px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--teal-link);
  font-family: inherit;
  font-size: var(--text-small);
  font-weight: 800;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.chip-btn:hover { border-color: var(--teal-soft); }
.chip-btn:focus-visible { outline: 2px solid var(--teal-action); outline-offset: 2px; }

.chip-btn.is-active {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: var(--white);
}

.chip-rx { color: var(--coral); font-weight: 800; }
.chip-btn.is-active .chip-rx { color: var(--coral-bright); }

.control-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.control-bar .control-group {
  display: grid;
  gap: 7px;
  align-content: start;
}

.control-bar .control-label { margin-bottom: 0; }
.control-bar .toggle-row { margin: 0; }
.control-sort { margin-left: auto; }

.btn-small {
  min-height: 40px;
  padding: 8px 16px;
  font-size: 0.86rem;
}

/* ── Desktop comparison table ─────────────────────────────────────────── */
.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.compare-table thead th {
  text-align: left;
  padding: 13px 16px;
  color: var(--ink-muted);
  font-size: var(--text-micro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--teal-pale);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}

.compare-table tbody th,
.compare-table tbody td {
  padding: var(--space-4);
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  font-weight: 600;
  color: var(--ink);
}

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

.compare-table tbody tr.is-lowest { background: var(--coral-pale); }

.cell-provider { min-width: 150px; }
.provider-name { display: block; font-size: 1rem; font-weight: 800; color: var(--ink); }
.cell-provider .provider-treatment { display: block; margin-top: 2px; }

.lowest-tag {
  display: inline-block;
  margin-top: 7px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--coral);
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.type-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Prescription-only = NHS blue with white text (no ℞ glyph). */
.type-pom { background: #005EB8; color: #FFFFFF; }
.type-p   { background: var(--teal-pale); color: var(--teal-link); }
.type-gsl { background: rgba(86, 102, 104, 0.12); color: var(--ink-muted); }

.compare-table .feature-pills { margin: 0; }
.compare-table .verify-row { margin: 0; gap: 6px; }
.cell-price { white-space: nowrap; }
.cell-price .price-line { margin: 0; }
.cell-price .freshness { margin-top: 4px; }
.cell-cta { text-align: right; white-space: nowrap; }

.empty-cell {
  padding: 30px 16px !important;
  text-align: center;
  color: var(--ink-muted);
  font-weight: 700;
}

/* Loading skeleton (10xweb Phase 5, Craft). Static rows in the page's HTML,
   shown only until the page script's first render() replaces the whole
   <table> innerHTML (thead + tbody together - see renderTable() in
   compare.html). On a fast synchronous run the skeleton never gets a visible
   frame; it exists for the slow-network / deferred-script case. Every row is
   IDENTICAL - compliance requires no row read as emphasized while loading. */
.table-skeleton td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--hairline);
}

.table-skeleton tr:last-child td { border-bottom: 0; }

/* Auto-disabled (static, opacity 0.55) by the global reduced-motion guard
   (section 11), which zeroes animation-duration/iteration-count site-wide. */
.skel-bar {
  height: 14px;
  border-radius: var(--radius-sm);
  background: var(--hairline);
  animation: skeletonPulse 1.2s ease-in-out infinite;
}

@keyframes skeletonPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ── Desktop shows the table; mobile shows the cards ──────────────────── */
.compare-table-wrap { display: block; }
.provider-list { display: none; }

.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.card-head h3 { margin: 0; }
.type-row { margin: 8px 0 2px; }

@media (max-width: 900px) {
  .compare-table-wrap { display: none; }
  .provider-list { display: grid; }
  .control-sort { margin-left: 0; }
  .control-bar { gap: 14px 20px; }
}

/* ── Filter rail: compact chip groups + sort under the filters ─────────── */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-btn.small {
  min-height: 34px;
  padding: 5px 12px;
  font-size: 0.82rem;
}
.rail .chip-row.small { gap: 7px; }
.rail-sort { border-top: 1px solid var(--hairline); padding-top: 18px; }
.rail-sort .sort-select { width: 100%; }

/* ── Provider logo avatar (licensed logo if present, else monogram) ────── */
.prov-logo {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-md); /* was 11px, snapped */
  overflow: hidden;
  background: var(--teal-pale);
  border: 1px solid var(--hairline);
}
.prov-mono {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--teal-link);
  letter-spacing: 0.02em;
}
.prov-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: var(--white);
  padding: var(--space-1);
}
/* Keep the cell a real table-cell (never display:flex on a <th>, or its row
   border stops aligning with the other columns). Flex an inner wrapper instead. */
.cell-provider { min-width: 190px; }
.prov-wrap { display: flex; align-items: flex-start; gap: var(--space-3); }
.prov-text { display: flex; flex-direction: column; }

/* ── Treatment column cell (neutral monogram + name; never a brand logo) ─ */
.cell-treatment { min-width: 130px; }
.treat-cell { display: inline-flex; align-items: center; gap: 9px; }
.treat-mono {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  background: rgba(86, 102, 104, 0.1);
  color: var(--ink-muted);
  font-size: var(--text-micro);
  font-weight: 800;
}
.treat-name { font-weight: 700; color: var(--ink); }

/* Mobile card: avatar sits beside the provider name. */
.card-head .prov-logo { width: 38px; height: 38px; }

/* ── Compact the (up to 9-column) table so Price + CTA stay in view ─────── */
.compare-table { font-size: 0.86rem; }
.compare-table thead th { padding: 11px 12px; font-size: 0.68rem; }
.compare-table tbody th,
.compare-table tbody td { padding: 12px; }
.compare-table .feature-pills { flex-direction: column; align-items: flex-start; gap: 5px; }
.compare-table .pill { padding: 3px 8px; font-size: var(--text-micro); }
.compare-table .verify-row { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.compare-table .verify-link,
.compare-table .cell-verify .quiet-note { font-size: 0.74rem; }
.cell-provider { min-width: 150px; }
.compare-table .prov-wrap { gap: 10px; }
.prov-logo { width: 38px; height: 38px; }
.cell-treatment { min-width: 104px; }
.cell-rating { white-space: nowrap; }
.cell-cta .card-cta { padding: 9px 14px; font-size: 0.82rem; white-space: nowrap; }
.cell-price .price-amount { font-size: 1.05rem; }

/* The comparison page gets a wider container so the full-width table (up to 9
   columns on the All-treatments view) fits without horizontal scrolling. */
.compare-page .container { width: min(1360px, calc(100% - 40px)); }

/* Reserve at least a viewport of height before the JS table renders so the
   footer never paints high and then jumps down (CLS guard). */
.compare-page { min-height: 100vh; }

/* ── Horizontal filter bar (replaces the old left rail) ────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
  margin-bottom: 22px;
  padding: 16px 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.filter-item { display: grid; gap: var(--space-2); align-content: start; }
/* A display value on .filter-item would otherwise defeat the [hidden] attribute
   (used to drop the Type group on a single treatment, and the empty band group). */
.filter-item[hidden] { display: none; }
.filter-item .sort-select { min-width: 130px; }
.filter-clear { margin-left: auto; align-self: center; }

/* Compact checkbox "chips" for Features / Verification in the bar. */
.toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 12px 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.toggle-chip input { accent-color: var(--teal-action); }
.toggle-chip:hover { border-color: var(--teal-soft); }

/* ── Results head: count on the left, Sort-by on the right ─────────────── */
.results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 14px;
}
.results-head .basis-line { margin: 0; }
.sort-control { display: flex; align-items: center; gap: 10px; }
.sort-control .control-label { margin-bottom: 0; white-space: nowrap; }
.sort-control .sort-select { min-width: 190px; }

/* ── Sortable column headers ───────────────────────────────────────────── */
.compare-table thead th.th-sort { padding: 0; }
.th-sort-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 11px 12px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}
.col-price .th-sort-btn { justify-content: flex-start; }
.th-sort-btn:hover { color: var(--teal-link); }
.th-sort-btn:focus-visible { outline: 2px solid var(--teal-action); outline-offset: -2px; }
.compare-table thead th.is-sorted { color: var(--teal-link); background: var(--teal-soft); }
.sort-arrow { font-size: 0.66rem; }

@media (max-width: 900px) {
  .filter-clear { margin-left: 0; }
  .results-head { justify-content: flex-start; }
}

/* ==========================================================================
   IMAGERY + MOTION PASS (2026-07-10)
   Adds photos to condition cards, condition/hub/page heroes and marketing
   sections. Everything composes with the existing .photo-frame duotone +
   gradient-fallback system, so a missing/late image degrades to an on-brand
   gradient. Ambient motion is covered by the global prefers-reduced-motion
   guard above (the universal *,::before,::after rule neutralises it).
   ========================================================================== */

/* Condition card: photo behind the teal band, icon chip stays legible on top.
   The teal gradient sits OVER the photo so white icon + AA contrast hold. */
.condition-band.has-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(130deg, rgba(28, 140, 151, 0.72), rgba(31, 138, 151, 0.60)),
    linear-gradient(130deg, var(--teal), var(--teal-link)); /* fallback */
}
.condition-band.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
  transition: transform var(--dur-slow) var(--ease-standard);
}
@media (hover: hover) {
  .condition-card:hover .condition-band.has-photo::before { transform: scale(1.05); }
}

/* Condition landing hero (compare.html) + generic page/hub hero media column. */
.journey-media {
  min-height: 210px;
  margin-top: var(--space-6); /* was 22px, snapped */
}
@media (max-width: 860px) {
  .journey-media { min-height: 150px; }
}

/* Ambient Ken Burns — large hero frames only, never the 104px card bands.
   Auto-disabled by the global reduced-motion guard. */
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}
.photo-frame.kb::before {
  animation: kenburns 24s ease-in-out infinite alternate;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   FULL-BLEED PHOTO HERO (condition landing + content-page heroes)
   The image IS the hero: it fills the section behind a dark gradient scrim,
   with the heading text overlaid in white. Replaces the earlier thin photo
   band. Degrades to a deep-teal fill if the image is missing.
   -------------------------------------------------------------------------- */
.photo-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background: var(--teal-deep);
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* grow with width so a very wide window doesn't crush the image into a thin
     band that crops faces; capped so it never dominates tall/short screens. */
  min-height: clamp(440px, 34vw, 580px);
}
.photo-hero > .container {
  position: relative;
  z-index: 1;
  padding-top: 30px;
  padding-bottom: 40px;
}
/* image layer (scalable for Ken Burns) + gradient scrim (fixed).
   --hero-focus sets the focal point (background-position) per image so the
   subject stays framed as the hero re-crops across window sizes. */
.photo-hero .hero-bg-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--photo);
  background-size: cover;
  background-position: var(--hero-focus, 50% 28%);
  animation: kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}
.photo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    177deg,
    rgba(8, 54, 59, 0.52) 0%,
    rgba(8, 54, 59, 0.14) 28%,
    rgba(8, 54, 59, 0.55) 66%,
    rgba(8, 54, 59, 0.89) 100%);
}
/* light text treatments inside the hero */
.photo-hero .breadcrumb { color: rgba(255, 255, 255, 0.88); margin-bottom: 0; text-shadow: 0 1px 10px rgba(8, 42, 46, 0.5); }
.photo-hero .breadcrumb a { color: rgba(255, 255, 255, 0.94); }
.photo-hero .breadcrumb .crumb-sep { color: rgba(255, 255, 255, 0.5); }
.photo-hero .page-kicker,
.photo-hero .eyebrow { color: rgba(255, 255, 255, 0.85); }
.photo-hero h1 { color: var(--white); text-shadow: 0 1px 24px rgba(8, 42, 46, 0.35); }
.photo-hero .page-lede,
.photo-hero .compare-context { color: rgba(255, 255, 255, 0.92); }
.photo-hero .page-meta { color: rgba(255, 255, 255, 0.72); }

/* condition landing hero: breadcrumb pinned top, title + price card at bottom */
.condition-hero { justify-content: space-between; }
.condition-hero > .container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: var(--space-6); /* was 22px, snapped */
}
.condition-hero .compare-title h1 { margin-top: 0; }

@media (max-width: 760px) {
  .photo-hero { min-height: 360px; }
  .condition-hero .compare-head { flex-direction: column; align-items: flex-start; gap: var(--space-5); /* was 18px, snapped */ }
  .condition-hero .from-card { text-align: left; }
}

/* grid-layout hero (bmi tool): keep the 2-col grid + "at a glance" panel over
   the photo instead of bottom-pinning a single column. */
.photo-hero.hero-grid-photo { display: block; min-height: 0; }
.photo-hero.hero-grid-photo > .container { padding-top: 42px; padding-bottom: 50px; }
.photo-hero .journey-lede { color: rgba(255, 255, 255, 0.92); }
.photo-hero .proof-row span { color: rgba(255, 255, 255, 0.85); }

/* ==========================================================================
   HERO VARIANT B — "editorial trust" (branch hero-variant-b)
   Divergent homepage hero. Replaces Variant A's float-and-blobs composition
   (whose CSS above stays dormant on this branch) with a calm full-bleed
   photographic hero reusing the site's .photo-hero duotone/scrim machinery:
   copy sits in the photo's quiet left corridor over a strengthened
   left-weighted scrim, then breaks straight to the credibility ribbon.
   The anonymised comparison card (originally docked at the hero base) was
   removed 2026-07-10 — compliance stripped its provider/price content to a
   contentless ghost that only echoed the chips + ribbon; the .card-dock and
   card-dock-scoped rules were deleted with it. No blobs, no orbs, no float or
   shimmer animation, no Ken Burns — the stillness is the point.
   ========================================================================== */

.hero--editorial {
  /* the docked panel hangs below the section edge */
  overflow: visible;
  min-height: clamp(540px, 44vw, 680px);
}

/* No Ken Burns on the homepage hero: calmer, and required — with overflow
   visible the scaled image layer would bleed outside the section. */
.hero--editorial .hero-bg-photo {
  animation: none;
  will-change: auto;
}

/* Strengthened, left-weighted scrim. The photo's quiet zone (the blurred
   sunlit pavement corridor) is BRIGHT, so the stock .photo-hero scrim isn't
   enough for body copy. Two layers: a horizontal wash that carries the text
   column (composited alpha ≈ 0.75–0.85 of --teal-deep across the copy zone,
   holding white body text at/above AA even over the brightest patches) and a
   vertical layer that keeps the top airy and grounds the base for the dock. */
.hero--editorial.photo-hero::after {
  background:
    linear-gradient(92deg,
      rgba(8, 54, 59, 0.90) 0%,
      rgba(8, 54, 59, 0.72) 46%,
      rgba(8, 54, 59, 0.12) 80%,
      rgba(8, 54, 59, 0.04) 100%),
    linear-gradient(177deg,
      rgba(8, 54, 59, 0.30) 0%,
      rgba(8, 54, 59, 0.16) 30%,
      rgba(8, 54, 59, 0.58) 100%);
}

.hero--editorial > .container {
  padding-top: 96px;
  padding-bottom: 96px;
}

.hero--editorial .hero-ed-copy {
  max-width: 620px;
}

/* White text tiers over the scrim (h1 is already handled by .photo-hero) */
.hero--editorial .hero-lede {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(8, 42, 46, 0.45);
}

.hero--editorial .independence {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 10px rgba(8, 42, 46, 0.45);
}

.hero--editorial .independence svg {
  color: var(--teal-soft);
}

.hero--editorial .cta-note {
  color: var(--ink-inverse-soft);
  text-shadow: 0 1px 10px rgba(8, 42, 46, 0.45);
}

/* Trust chips restyled for the dark context: quiet outlined glass, no teal-
   on-light fill (which would muddy over the photo). */
.hero--editorial .chip {
  color: var(--ink-inverse-strong);
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(8, 54, 59, 0.32);
  backdrop-filter: blur(6px);
}

/* H1 accent over the dark scrim: the teal word fails contrast on deep teal,
   so the word goes white and the coral rhyme-bar steps up from its light-
   context opacity (0.32) to read against the dark ground. */
.hero--editorial .accent {
  color: var(--white);
}

.hero--editorial .accent::after {
  background: rgba(255, 131, 102, 0.52);
}

@media (max-width: 860px) {
  .hero--editorial {
    min-height: 520px;
  }

  .hero--editorial > .container {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  /* Single-column: copy spans the full width, so swap the left-weighted
     wash for a uniform strengthened vertical scrim (stock values, deepened
     in the copy zone). */
  .hero--editorial.photo-hero::after {
    background: linear-gradient(180deg,
      rgba(8, 54, 59, 0.62) 0%,
      rgba(8, 54, 59, 0.72) 42%,
      rgba(8, 54, 59, 0.9) 100%);
  }
}

/* Rotating homepage hero */

/* Two stacked .hero-bg-photo layers crossfade between condition photos
   (assets/hero-rotate.js). The editorial variant already disables Ken Burns
   on .hero-bg-photo above ("the stillness is the point") - a plain opacity
   crossfade keeps that calm feel rather than fighting it with motion.
   First layer visible by default so the hero is a normal static weight-loss
   image with JS off or before hero-rotate.js runs. */
.hero--editorial [data-hero-layer] {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero--editorial [data-hero-layer].is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero--editorial [data-hero-layer] {
    transition: none;
  }
}

/* Pause/play control (WCAG 2.2.2) - injected by hero-rotate.js only once
   rotation actually starts, so it never appears with JS off or when
   prefers-reduced-motion holds the hero on a single static slide. */
.hero-rotate-toggle {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  background: rgba(8, 54, 59, 0.4);
  backdrop-filter: blur(6px);
  color: var(--white);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}

.hero-rotate-toggle:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(8, 54, 59, 0.58);
}

.hero--editorial .hero-rotate-toggle:focus-visible {
  outline-color: var(--white);
}

.hero-rotate-toggle svg {
  width: 18px;
  height: 18px;
}

.hero-rotate-toggle .icon-play {
  display: none;
}

.hero-rotate-toggle[aria-pressed="true"] .icon-pause {
  display: none;
}

.hero-rotate-toggle[aria-pressed="true"] .icon-play {
  display: block;
}

@media (max-width: 760px) {
  .hero-rotate-toggle {
    right: 14px;
    bottom: 14px;
  }
}

/* Compare: dose-ladder groups */
.dose-tag-summary {
  font-weight: 800;
  color: var(--ink);
}

.dose-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--teal-link);
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}

.dose-toggle-btn:hover,
.dose-toggle-btn:focus-visible {
  border-color: rgba(28, 140, 151, 0.4);
  background: var(--teal-pale);
}

.dose-toggle-icon svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-fast) var(--ease-standard);
}

.dose-toggle-btn[aria-expanded="true"] .dose-toggle-icon svg {
  transform: rotate(180deg);
}

/* Per-dose sub-rows: visually nested under the collapsed primary row via a
   subtle background + left rule on the provider cell — never a repeat of the
   provider name, so a sub-row is never mistaken for a second provider. */
.dose-subrow th,
.dose-subrow td {
  background: var(--cool);
}

.dose-subrow .cell-provider {
  padding-left: calc(var(--space-4) + 22px);
  border-left: 3px solid var(--teal-pale);
}

.cell-sub-blank {
  padding: var(--space-4);
}

.dose-tag-sub {
  color: var(--ink);
  background: var(--white);
}

/* Mobile: same grouping via a native <details> — free keyboard support and
   an implicit accessible name from the <summary> text, no extra JS needed. */
.provider-card-grouped .dose-details {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.provider-card-grouped .dose-details summary {
  cursor: pointer;
  color: var(--teal-link);
  font-weight: 800;
  font-size: 0.88rem;
  list-style: none;
}

.provider-card-grouped .dose-details summary::-webkit-details-marker {
  display: none;
}

.provider-card-grouped .dose-details summary::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-fast) var(--ease-standard);
}

.provider-card-grouped .dose-details[open] summary::before {
  transform: rotate(45deg);
}

.dose-details-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.dose-detail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--cool);
}

.dose-detail-row .price-line {
  margin: 0;
}