/* =========================================================
   IMAGERY INTEGRATION CONCEPT v3 (preview-only)
   Direction from feedback:
   - Cards use the brand ABSTRACT energy backgrounds (not people),
     full-bleed across the TOP of every tile. EVERY card has one.
   - People imagery lives in the hero / section backgrounds only.
   - Hero trust strip text sits on clean canvas (photo fades above it).
   - Vial "Compounded for you" band removed from home (moved to Treatments).
   Reusable, cohesive system intended to roll out site-wide.
   Scoped, additive — no edits to base styles.css.
   ========================================================= */

/* ---- 1. HERO: faces visible, photo extended lower, soft bottom fade kept ----
   The duo photo now shows faces and extends down close to the CTA-button line.
   Bottom fade is pushed lower (feathers out near the bottom) so it still melts
   gently into the canvas while keeping much more of the image visible.
   Left feather preserves clean negative space for the hero copy. */
.hero-art {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 30%, #000 100%),
    linear-gradient(to bottom, #000 74%, transparent 96%) !important;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 30%, #000 100%),
    linear-gradient(to bottom, #000 74%, transparent 96%) !important;
}
/* DESKTOP-REGRESSION FIX (2026-07-01): the rule below used to live here,
   unscoped, and leaked into DESKTOP:
       .hero-art__img { object-position: right 38% !important; }
   It was added to reframe the NEW mobile v5 hero (hf2_home_hero_v5.png), but
   because it was global + !important it also overrode the desktop framing
   (base styles.css sets `.hero-art__img { object-position: right center }`),
   pulling the couple/field photo off-center so a dark portion bled into the
   left, feathered copy zone (the reported "swirly graphic" over the hero copy).
   The desktop framing must stay `right center` (from styles.css), so this rule
   is removed from global scope. Mobile framing is unaffected: every mobile hero
   already sets object-position via the higher-specificity `.hero--imagery
   .hero-art__img` rules inside the @media (max-width:720px/768px) blocks below
   (e.g. the `50% 38%` rule ~line 1671), which win over this selector anyway. */

/* ---- 2. GOAL CARDS: FULL-CARD abstract background ----
   The abstract energy image now fills the ENTIRE card as its background.
   A directional legibility scrim sits on top — heaviest where the text lives
   (top-left, flowing down) and lighter toward the lower-right where the
   abstract energy is most active. All card content is lifted above the scrim
   so every line of copy stays completely legible in both themes. */
.goal-teaser.has-figure {
  position: relative;          /* anchor the absolute background layer */
  overflow: hidden;            /* clip image to the card's rounded corners */
  isolation: isolate;          /* keep stacking context tidy */
}
/* Full-card background image layer */
.goal-figure {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}
.goal-figure picture { display: block; width: 100%; height: 100%; }
.goal-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;  /* keep the calm top, energy reads lower */
  display: block;
  transition: transform .6s ease;
}
.goal-teaser.has-figure:hover .goal-figure img { transform: scale(1.04); }

/* Legibility scrim over the image (LIGHT theme).
   Opaque cream over the text zone, easing toward the lower-right energy.
   Two layers: a vertical wash for the copy column + a soft corner reveal. */
.goal-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(155deg,
      rgba(255,253,247,.86) 0%,
      rgba(255,253,247,.80) 38%,
      rgba(255,253,247,.68) 60%,
      rgba(255,253,247,.48) 100%),
    linear-gradient(0deg,
      rgba(255,253,247,.42) 0%,
      rgba(255,253,247,0) 34%);
}
[data-theme="dark"] .goal-figure::after {
  background:
    linear-gradient(155deg,
      rgba(12,21,18,.85) 0%,
      rgba(12,21,18,.79) 38%,
      rgba(12,21,18,.66) 60%,
      rgba(12,21,18,.44) 100%),
    linear-gradient(0deg,
      rgba(12,21,18,.38) 0%,
      rgba(12,21,18,0) 34%);
}

/* Lift ALL card content above the background + scrim. */
.goal-teaser.has-figure > .protocol-top,
.goal-teaser.has-figure > h3,
.goal-teaser.has-figure > p,
.goal-teaser.has-figure > ul,
.goal-teaser.has-figure > .goal-teaser__ctas {
  position: relative;
  z-index: 1;
}

/* Theme-aware image swap (full-card layer) */
.goal-figure .gfig--dark { display: none; }
[data-theme="dark"] .goal-figure .gfig--light { display: none; }
[data-theme="dark"] .goal-figure .gfig--dark { display: block; }

/* ---- 2b. INTERIOR PAGE BANNERS: cohesive abstract wash ----
   Every interior page header (.page-banner) gets the SAME abstract energy as the
   home cards — a faint, theme-aware wash anchored to the right, masked so it
   fades out across the left where the heading + copy sit. Keeps the whole site
   visually cohesive without competing with the text. Additive only. */
.page-banner { position: relative; isolation: isolate; overflow: hidden; }
.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                 /* sit behind banner content + base gradients */
  background-image: image-set(
    url("./banner-wash-light.webp") type("image/webp"),
    url("./banner-wash-light.jpg") type("image/jpeg"));
  background-image: -webkit-image-set(
    url("./banner-wash-light.webp") type("image/webp"),
    url("./banner-wash-light.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: right center;
  opacity: .26;
  /* Fade the wash out toward the left (text zone) and soften top/bottom edges. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, transparent 34%, #000 78%),
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 72%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, transparent 34%, #000 78%),
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  pointer-events: none;
}
[data-theme="dark"] .page-banner::before {
  background-image: image-set(
    url("./banner-wash-dark.webp") type("image/webp"),
    url("./banner-wash-dark.jpg") type("image/jpeg"));
  background-image: -webkit-image-set(
    url("./banner-wash-dark.webp") type("image/webp"),
    url("./banner-wash-dark.jpg") type("image/jpeg"));
  opacity: .42;
}
/* Keep banner content above the wash. */
.page-banner > * { position: relative; z-index: 1; }
/* The photo layer must sit BELOW content (it's also a direct child). */
.page-banner__photo { z-index: 0 !important; }
.page-banner--photo > .container-wide,
.page-banner--photo > .page-banner-grid { position: relative; z-index: 2; }

/* ---- 2c. KEY-PAGE PHOTO HEROES ----
   Selected high-traffic pages (Treatments, About, Blog) get a real cohesive
   lifestyle photo behind the banner — same masking philosophy as the home hero:
   a directional scrim keeps the left copy fully legible while the photo reveals
   on the right, with a soft bottom fade into the page canvas. Theme-aware.
   When a photo is present we hide the abstract wash so they don't stack. */
.page-banner--photo { padding-block: clamp(var(--space-12), 8vw, var(--space-16)) clamp(var(--space-10), 6vw, var(--space-12)); }
.page-banner--photo::before { display: none; }   /* suppress abstract wash under a photo */
.page-banner__photo {
  position: absolute;
  /* Interior photo heroes now bleed flush to the viewport edges, matching the
     home hero (.hero-art { inset: 0 }). Previously this used
     `inset: clamp(8px, 1.4vw, 20px) clamp(8px, 1.4vw, 20px) 0 0;` to leave a
     small breathing gap so the rounded corners felt like a floating panel,
     but at wider viewports the right-side gap read as a visible ~20px white
     strip that broke the full-width feel of the hero band (reported
     2026-07-01). Going flush is consistent with the home page and removes
     that strip; the border-radius on this element is now visually clipped
     by the viewport edge, which is the intended photo-bleed effect. */
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Kept for the rounded bottom-left corner where the photo feathers into
     the canvas. The top/right corners meet the viewport edge and are clipped. */
  border-radius: var(--radius-2xl, 24px);
}
.page-banner__photo picture { display: block; width: 100%; height: 100%; }
.page-banner__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}
/* ---- 2c-fix. PROTOCOLS HERO PHOTO — RESTORE ABSOLUTE ----
   proto-experiment-continuous.css line 41 (`#main > section > * { position: relative; z-index: 2; }`)
   forces this photo layer into normal flow, where the 3:2 lab image renders ~853px tall
   at 1280px wide and pushes the headline/intro below the fold. Restore the absolute
   photo-hero positioning on the protocols banner so text stays above the fold. */
#main .page-banner--photo .page-banner__photo { position: absolute !important; }
/* Treatments duo hero: the deploy image is pre-cropped to a wide heads-to-chest
   band (~5:1) that matches the banner shape, so faces are always retained.
   Keep the couple to the right; the left feathers out for the headline copy. */
.page-banner--duo .page-banner__photo img {
  object-position: 92% 30%;
}
/* Treatments hero (Round 10): the right-column intro <p> previously sat directly
   over the couple's faces and covered them. It was relocated into the LEFT
   column beneath the h1, so the right side of the band stays clear for the
   couple. Constrain its width so it doesn't stretch the full column, and give it
   a touch of top breathing room. The left scrim already keeps copy legible. */
.page-banner--duo .page-banner__intro {
  max-width: 46ch;
  margin-top: var(--space-5);
  color: var(--color-text-muted, #4a524f);
}
[data-theme="dark"] .page-banner--duo .page-banner__intro {
  color: rgba(238,230,216,.78);
}
@media (max-width: 760px) {
  .page-banner--duo .page-banner__intro { margin-top: var(--space-4); }
}
/* Photo visibility masks: feather the left (copy) + soft bottom fade. */
.page-banner__photo {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 46%, #000 100%),
    linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 46%, #000 100%),
    linear-gradient(to bottom, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* Legibility scrim over the photo (LIGHT): opaque cream left, clearing right.
   A flat uniform veil floor is layered UNDER the directional gradient so that
   right-column body copy (which can sit over the brightest part of the photo)
   keeps a protective translucent layer. The photo stays clearly visible. */
.page-banner--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                  /* scrim sits above photo, below content (z-2) */
  pointer-events: none;
  background:
    linear-gradient(95deg,
      var(--color-bg) 0%,
      var(--color-bg) 30%,
      rgba(248,243,234,.78) 48%,
      rgba(248,243,234,.46) 70%,
      rgba(248,243,234,.34) 100%),
    linear-gradient(to bottom, transparent 60%, var(--color-bg) 100%),
    linear-gradient(rgba(248,243,234,.30), rgba(248,243,234,.30));
}
[data-theme="dark"] .page-banner--photo::after {
  background:
    linear-gradient(95deg,
      var(--color-bg) 0%,
      var(--color-bg) 30%,
      rgba(10,18,16,.82) 48%,
      rgba(10,18,16,.50) 70%,
      rgba(10,18,16,.34) 100%),
    linear-gradient(to bottom, transparent 58%, var(--color-bg) 100%),
    linear-gradient(rgba(10,18,16,.20), rgba(10,18,16,.20));
}
/* Theme-aware photo swap */
.page-banner__photo .pbphoto--dark { display: none; }
[data-theme="dark"] .page-banner__photo .pbphoto--light { display: none; }
[data-theme="dark"] .page-banner__photo .pbphoto--dark { display: block; }
@media (max-width: 760px) {
  /* On narrow screens, ease the photo back so stacked copy stays clean. */
  .page-banner--photo::after {
    background:
      linear-gradient(180deg, var(--color-bg) 0%, rgba(248,243,234,.62) 60%, var(--color-bg) 100%);
  }
  [data-theme="dark"] .page-banner--photo::after {
    background:
      linear-gradient(180deg, var(--color-bg) 0%, rgba(10,18,16,.66) 60%, var(--color-bg) 100%);
  }
}

/* ---- 3. CTA IMAGERY WASH (legible) ----
   Brand-color overlay stays opaque on the copy side (left), fading to reveal the
   photo on the action side (right). Text forced light for guaranteed contrast. */
.cta--imagery .cta-box,
[data-theme="light"] .cta--imagery .cta-box {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  border-color: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.cta-figure {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right 30%;
  display: block;
}
.cta-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, var(--color-primary) 0%, var(--color-primary) 46%, rgba(7,119,109,.80) 64%, rgba(7,119,109,.32) 100%);
}
[data-theme="dark"] .cta-figure::after {
  background:
    linear-gradient(100deg, #0f1d18 0%, #0f1d18 48%, rgba(15,29,24,.90) 66%, rgba(15,29,24,.55) 100%);
}
.cta--imagery .cta-box > .reveal,
.cta--imagery .cta-box > .btn { position: relative; z-index: 1; }
.cta--imagery .cta-box h2,
.cta--imagery .cta-box p,
.cta--imagery .cta-box .label { color: #faf4e8 !important; }

/* ---- 4. REPURPOSED VIAL SECTION (Treatments page) ----
   The vial art is no longer boxed in a rounded card. Instead it is enlarged
   and bled into the RIGHT side of the section, feathered on every edge so it
   dissolves seamlessly into the page canvas — image and background become one.
   Copy stays on the left, fully legible. Theme-aware. */
.vial-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.vial-band .container-wide {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  position: relative;
  z-index: 2;                       /* copy above the bled image */
}
/* The media is now a direct child of .vial-band (not .container-wide) so it
   bleeds all the way to the viewport's right edge, matching the full-bleed
   trail section directly above. Anchored to the section (full width), right:0. */
.vial-band__media {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 52%;                        /* half the full-width section, flush right */
  height: 120%;                      /* mild bleed top & bottom, but not so tall that
                                       the vial cap gets clipped by overflow:hidden */
  z-index: 0;
  pointer-events: none;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.vial-band__media .vial-art { position: absolute; inset: 0; display: block; }
.vial-band__media img {
  width: 100%; height: 100%;
  /* Frame the right portion of the source (the vial + warm glow). Shift the
     vertical anchor slightly down (55%) so the gold crimp cap clears the top
     of the section and stays fully visible while the image still fills the box. */
  object-fit: cover; object-position: 78% 55%; display: block;
  /* Feather every edge so the art melts into the section background. */
  -webkit-mask-image:
    radial-gradient(135% 100% at 70% 50%, #000 30%, rgba(0,0,0,.5) 58%, transparent 84%);
  mask-image:
    radial-gradient(135% 100% at 70% 50%, #000 30%, rgba(0,0,0,.5) 58%, transparent 84%);
}
/* A soft brand-tint veil over the very left edge of the art keeps the copy
   clean if the headline runs long, without hiding the vial. */
.vial-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--color-bg) 24%,
    rgba(248,243,234,.62) 42%,
    rgba(248,243,234,.22) 56%,
    transparent 72%);
}
[data-theme="dark"] .vial-band::before {
  background: linear-gradient(90deg,
    var(--color-bg) 24%,
    rgba(10,18,16,.62) 42%,
    rgba(10,18,16,.22) 56%,
    transparent 72%);
}
.vial-band__media .vial-art--dark { display: none; }
[data-theme="dark"] .vial-band__media .vial-art--light { display: none; }
[data-theme="dark"] .vial-band__media .vial-art--dark { display: block; }
@media (max-width: 820px) {
  .vial-band .container-wide { grid-template-columns: 1fr; }
  .vial-band__media {
    position: relative;
    top: auto; right: auto; transform: none;
    width: 100%; height: 280px;
    margin-top: var(--space-6);
  }
  .vial-band__media img {
    -webkit-mask-image: radial-gradient(110% 90% at 50% 50%, #000 42%, transparent 88%);
    mask-image: radial-gradient(110% 90% at 50% 50%, #000 42%, transparent 88%);
  }
  .vial-band::before {
    background: linear-gradient(180deg, var(--color-bg) 10%, transparent 45%);
  }
  [data-theme="dark"] .vial-band::before {
    background: linear-gradient(180deg, var(--color-bg) 10%, transparent 45%);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Treatments (goals.html) — #offerings trail background + frosted cards
   Round 11. The offerings section is one tall band of 3-column category
   grids. Sparse categories (esp. Sexual Health, 1 card) leave large empty
   cells on the right — dead space. Rather than leave it flat, the whole
   section sits over a tall vertical trail photo (sky/trees up top, an
   active body-weight gym + runners in the middle, nature at the bottom).
   The empty cells reveal the trail; the product cards become the same
   frosted-glass treatment as the home page goal cards so the design
   language carries across pages. A left-to-right scrim protects the
   left-aligned category headings and left-column cards while keeping the
   right side (where dead space concentrates) clear enough to read the
   trail action.
   ────────────────────────────────────────────────────────────────────────── */
/* Round 13: single high-res 16:9 trail image, viewport-locked (fixed) so it
   stays razor-sharp and never morphs as the tall offerings section scrolls.
   The whole cinematic scene shows as one cohesive backdrop the entire way
   down — no sky→trees jump. A left-to-right scrim protects left-aligned copy
   and cards; the right side (where sparse-category dead space concentrates)
   stays clear so the trail reads through. */
#offerings {
  position: relative;
  background-color: #f3ede1;
  background-image:
    linear-gradient(to right,
      rgba(248,243,234,0.86) 0%,
      rgba(248,243,234,0.50) 34%,
      rgba(248,243,234,0.18) 66%,
      rgba(248,243,234,0.12) 100%),
    url("proto/trail_fixed_light.webp");
  background-size: cover, cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed, fixed;
}
[data-theme="dark"] #offerings {
  background-color: #0c1612;
  background-image:
    linear-gradient(to right,
      rgba(9,17,14,0.88) 0%,
      rgba(9,17,14,0.52) 34%,
      rgba(9,17,14,0.20) 66%,
      rgba(9,17,14,0.14) 100%),
    url("proto/trail_fixed_dark.webp");
}
/* Fixed-attachment backgrounds are janky/inert on touch + mobile browsers;
   fall back to a normal scroll-attachment cover there. */
@media (max-width: 820px), (hover: none) {
  #offerings,
  [data-theme="dark"] #offerings { background-attachment: scroll, scroll; }
}
/* Keep all content stacked above the background layer. */
#offerings > .container-wide { position: relative; z-index: 1; }

/* Frosted-glass offering cards — mirrors the home page .goal-card recipe
   (--card-sheen over --surface-translucent, --card-rim border, --card-shadow,
   6px backdrop blur) so the two pages share one card language. Over a busy
   trail the 6px blur softens whatever sits behind each card, keeping titles,
   descriptions, and CTAs legible. */
.offering-card {
  border-color: var(--card-rim) !important;
  background:
    var(--card-sheen),
    var(--surface-translucent) !important;
  box-shadow: var(--card-shadow) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
          backdrop-filter: blur(6px) saturate(1.05);
}
[data-theme="dark"] .offering-card {
  border-color: var(--color-border-dark) !important;
  background:
    linear-gradient(145deg, rgba(255,253,247,0.10), rgba(255,253,247,0.035)),
    rgba(255,255,255,0.045) !important;
}
/* Subtle lift on hover/focus to match the goal-card interactivity. */
.offering-card {
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.offering-card:hover,
.offering-card:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--color-primary) 40%, var(--card-rim)) !important;
}
@media (prefers-reduced-motion: reduce) {
  .offering-card { transition: none; }
  .offering-card:hover, .offering-card:focus-within { transform: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Treatments — glowing section dividers (top + bottom of #offerings)
   Mirrors the protocols page .proto-glow-divider: a 1px gold hairline with a
   soft bilateral glow, so the trail section opens and closes with the same
   divider language used between the protocol page sections.
   ────────────────────────────────────────────────────────────────────────── */
.treatments-glow-divider {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(199,167,101,.22) 14%,
      rgba(199,167,101,.62) 38%,
      rgba(199,167,101,.85) 50%,
      rgba(199,167,101,.62) 62%,
      rgba(199,167,101,.22) 86%,
      transparent 100%);
  box-shadow:
    0 0 10px 1px rgba(199,167,101,.30),
    0 0 22px 3px rgba(199,167,101,.16);
}
[data-theme="dark"] .treatments-glow-divider {
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(214,184,117,.20) 14%,
      rgba(214,184,117,.58) 38%,
      rgba(214,184,117,.86) 50%,
      rgba(214,184,117,.58) 62%,
      rgba(214,184,117,.20) 86%,
      transparent 100%);
  box-shadow:
    0 0 10px 1px rgba(214,184,117,.32),
    0 0 24px 4px rgba(214,184,117,.18);
}
.treatments-glow-divider--top { top: 0; }
.treatments-glow-divider--bottom { bottom: 0; }

/* ──────────────────────────────────────────────────────────────────────────
   Round 15 — category thumbnails on Treatments page headers + frosted header
   Each goal's offerings-group__head now carries the same category image used
   on the homepage goal cards (weight / sexual / recovery / longevity), so a
   goal looks the same everywhere on the site. The thumbnail sits left of the
   pill+description; the whole head gets a frosted-glass backing matching the
   offering cards, so it reads as one consistent card language over the trail.
   ────────────────────────────────────────────────────────────────────────── */
.offerings-group__head {
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--space-4) !important;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3) !important;
  border: 1px solid var(--card-rim) !important;
  border-radius: var(--radius-xl) !important;
  background:
    var(--card-sheen),
    var(--surface-translucent) !important;
  box-shadow: var(--card-shadow) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
          backdrop-filter: blur(6px) saturate(1.05);
}
[data-theme="dark"] .offerings-group__head {
  border-color: var(--color-border-dark) !important;
  background:
    linear-gradient(145deg, rgba(255,253,247,0.10), rgba(255,253,247,0.035)),
    rgba(255,255,255,0.045) !important;
}
/* Inner stack: pill on top, description below, both left-aligned. */
.offerings-group__head > h3,
.offerings-group__head > p { margin: 0; }
.offerings-group__head > h3 { white-space: nowrap; }

/* Thumbnail: rounded square, theme-aware image swap. */
.offerings-group__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  border: 1px solid color-mix(in oklab, var(--color-primary) 18%, transparent);
  box-shadow: 0 4px 10px -4px rgba(27,24,18,.25);
}
.offerings-group__thumb .ogt { position: absolute; inset: 0; display: block; }
.offerings-group__thumb .ogt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offerings-group__thumb .ogt--dark { display: none; }
[data-theme="dark"] .offerings-group__thumb .ogt--light { display: none; }
[data-theme="dark"] .offerings-group__thumb .ogt--dark { display: block; }
.offerings-group:not([id$="weight-management"]):not([id$="sexual-health"]):not([id$="recovery-performance"]):not([id$="longevity"]):not([id$="skin-aesthetic"]) .offerings-group__thumb { display: none; }
@media (max-width: 560px) {
  .offerings-group__thumb { width: 52px; height: 52px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Round 15 — Homepage goal-teaser cards: complete the frosted card loop.
   The .protocol-card base already gives light-mode frosted glass, but the
   goal-teaser cards were missing (a) the dark-mode frosted gradient and
   (b) the hover-lift interactivity that the Treatments offering cards have.
   Mirror those exactly so a goal card looks/behaves the same on the home
   page as a product card does on the Treatments page.
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] .goal-teaser,
[data-theme="dark"] .card-grid .protocol-card {
  border-color: var(--color-border-dark) !important;
  background:
    linear-gradient(145deg, rgba(255,253,247,0.10), rgba(255,253,247,0.035)),
    rgba(255,255,255,0.045) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
          backdrop-filter: blur(6px) saturate(1.05);
}
.goal-teaser,
.card-grid .protocol-card {
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.goal-teaser:hover,
.goal-teaser:focus-within,
.card-grid .protocol-card:hover,
.card-grid .protocol-card:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--color-primary) 40%, var(--card-rim)) !important;
}
@media (prefers-reduced-motion: reduce) {
  .goal-teaser, .card-grid .protocol-card { transition: none; }
  .goal-teaser:hover, .goal-teaser:focus-within,
  .card-grid .protocol-card:hover, .card-grid .protocol-card:focus-within { transform: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Round 15 — Aurora wash on the home "How it works" section.
   A calm, slow-drifting gradient mesh (brand teal + gold + copper) behind the
   four-step process. Ties the calm/text sections into the imagery system
   without photography, so "How it works" reads as premium atmosphere rather
   than a flat slab. Pure CSS blobs, GPU-cheap, both themes. The .container-wide
   sits above (z-index:1); the aurora layer is pinned behind at z-index:0.
   ────────────────────────────────────────────────────────────────────────── */
#how-it-works { position: relative; overflow: hidden; }
#how-it-works > .container-wide { position: relative; z-index: 1; }
.how-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.how-aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  mix-blend-mode: multiply;
  will-change: transform;
}
[data-theme="dark"] .how-aurora__blob {
  opacity: 0.5;
  mix-blend-mode: screen;
}
/* Teal blob, upper-left */
.how-aurora__blob--1 {
  width: 48%;
  height: 130%;
  left: -8%;
  top: -35%;
  background: radial-gradient(circle, #07776d, transparent 70%);
  animation: howAurora1 22s ease-in-out infinite alternate;
}
/* Gold blob, right-center */
.how-aurora__blob--2 {
  width: 44%;
  height: 120%;
  right: -6%;
  top: -20%;
  background: radial-gradient(circle, #c7a765, transparent 70%);
  animation: howAurora2 26s ease-in-out infinite alternate;
}
/* Copper/peach blob, lower-center */
.how-aurora__blob--3 {
  width: 50%;
  height: 110%;
  left: 30%;
  bottom: -45%;
  background: radial-gradient(circle, #e0b9a3, transparent 70%);
  animation: howAurora3 30s ease-in-out infinite alternate;
}
@keyframes howAurora1 { to { transform: translate(28%, 14%) scale(1.12); } }
@keyframes howAurora2 { to { transform: translate(-22%, 18%) scale(1.1); } }
@keyframes howAurora3 { to { transform: translate(-12%, -16%) scale(1.18); } }
@media (prefers-reduced-motion: reduce) {
  .how-aurora__blob { animation: none; }
}
@media (max-width: 720px) {
  .how-aurora__blob { filter: blur(50px); }
}

/* ──────────────────────────────────────────────────────────────────────────
   ROUND 16 — Pathway-detail section: aurora wash + frosted safety-note backing
   Mirrors the #how-it-works treatment: section becomes a positioning context
   with overflow hidden; the aurora layer sits behind at z-index:0 while the
   container-wide content floats above at z-index:1. The disclaimer paragraph
   gets a true frosted-glass card treatment using the shared card tokens.
   ────────────────────────────────────────────────────────────────────────── */
#pathway-detail { position: relative; overflow: hidden; }
#pathway-detail > .container-wide { position: relative; z-index: 1; }
#pathway-detail .how-aurora__blob { opacity: 0.42; }
[data-theme="dark"] #pathway-detail .how-aurora__blob { opacity: 0.4; }

.safety-note--frosted {
  position: relative;
  z-index: 1;
  background: var(--surface-translucent);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid var(--card-rim);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.safety-note--frosted::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card-sheen);
  pointer-events: none;
}
.safety-note--frosted > * { position: relative; z-index: 1; }
.safety-note--frosted::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-gold));
  opacity: 0.7;
}
[data-theme="dark"] .safety-note--frosted { color: rgba(250, 244, 232, 0.72); }
[data-theme="dark"] .safety-note--frosted strong { color: var(--color-text); }
@media (max-width: 720px) {
  .safety-note--frosted {
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   ROUND 17 — Interior pages system treatment (lab-support, peptides, blog, about)
   Extends the established card language to the interior content-card types so
   every page shares one frosted-glass + hover-lift recipe with the home goal
   cards and the Treatments offering cards. Also adds a reusable aurora-wash
   section helper (.section--aurora) so any interior lead section can carry the
   same drifting teal/gold/copper wash as #how-it-works, with the same glowing
   gold dividers used on the Treatments and Protocols pages.
   ────────────────────────────────────────────────────────────────────────── */

/* Frosted-glass + hover-lift for interior content cards. Scoped to
   .interior-system (lab-support, peptides, blog, about) so the treatment only
   lands on the pages in this rollout. Mirrors .offering-card / .goal-teaser:
   card-sheen over surface-translucent, card-rim border, card-shadow, 6px
   backdrop blur; dark mode gets the 145deg translucent gradient. */
.interior-system .faq-card,
.interior-system .principle-card,
.interior-system .about-card,
.interior-system .blog-card {
  border: 1px solid var(--card-rim) !important;
  background:
    var(--card-sheen),
    var(--surface-translucent) !important;
  box-shadow: var(--card-shadow) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
          backdrop-filter: blur(6px) saturate(1.05);
}
[data-theme="dark"] .interior-system .faq-card,
[data-theme="dark"] .interior-system .principle-card,
[data-theme="dark"] .interior-system .about-card,
[data-theme="dark"] .interior-system .blog-card {
  border-color: var(--color-border-dark) !important;
  background:
    linear-gradient(145deg, rgba(255,253,247,0.10), rgba(255,253,247,0.035)),
    rgba(255,255,255,0.045) !important;
}
.interior-system .faq-card,
.interior-system .principle-card,
.interior-system .about-card,
.interior-system .blog-card {
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.interior-system .faq-card:hover,
.interior-system .principle-card:hover,
.interior-system .about-card:hover,
.interior-system .blog-card:hover,
.interior-system .faq-card:focus-within,
.interior-system .principle-card:focus-within,
.interior-system .about-card:focus-within,
.interior-system .blog-card:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--color-primary) 40%, var(--card-rim)) !important;
}
@media (prefers-reduced-motion: reduce) {
  .interior-system .faq-card, .interior-system .principle-card, .interior-system .about-card, .interior-system .blog-card { transition: none; }
  .interior-system .faq-card:hover, .interior-system .principle-card:hover, .interior-system .about-card:hover, .interior-system .blog-card:hover,
  .interior-system .faq-card:focus-within, .interior-system .principle-card:focus-within,
  .interior-system .about-card:focus-within, .interior-system .blog-card:focus-within { transform: none; }
}
@media (max-width: 720px) {
  .interior-system .faq-card, .interior-system .principle-card, .interior-system .about-card, .interior-system .blog-card {
    -webkit-backdrop-filter: blur(4px) saturate(1.04);
            backdrop-filter: blur(4px) saturate(1.04);
  }
}

/* Reusable aurora-wash section: makes the section a positioning context with
   overflow hidden so the .how-aurora blob layer (already defined above) sits
   behind at z-index:0 while the content floats above at z-index:1. Blob opacity
   is dialed back for interior pages so card text stays legible over the wash. */
.section--aurora {
  position: relative;
  overflow: hidden;
}
.section--aurora > .container-wide {
  position: relative;
  z-index: 1;
}
.section--aurora .how-aurora { opacity: 0.9; }
.section--aurora .how-aurora__blob { opacity: 0.4; }
[data-theme="dark"] .section--aurora .how-aurora__blob { opacity: 0.38; }

/* ──────────────────────────────────────────────────────────────────────────
   ROUND 18 — Peptides page revamp PoC ("editorial science" interior template)
   Signature visual modules: (1) peptide-class card grid with media band +
   color-coded evidence badges; (2) graded evidence-ladder visual (descending
   rungs) replacing the flat principle grid; (3) gold-divider rhythm between
   every section. Scoped to the peptides page's existing .interior-system body
   class so nothing leaks to other pages. Reuses .about-card / .principle-card
   frosted-glass + hover-lift + scroll-reveal from Round 17.
   ────────────────────────────────────────────────────────────────────────── */

/* Position sections that carry gold dividers but are NOT .section--aurora,
   so the absolute divider hairlines anchor to the section box. */
.peptides-evidence,
.peptides-faq { position: relative; overflow: hidden; }

/* ---- 18a. Peptide-class card grid ----
   Override the 2-up .about-grid (1.15fr/0.85fr) into an even 2-column grid of
   compact media+body cards. Unset the .large row-span so no card stretches. */
.peptide-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--space-4), 2.2vw, var(--space-6));
}
.peptide-grid .about-card.large { grid-row: auto; padding: var(--space-6); }

.peptide-class-card {
  display: flex;
  flex-direction: column;
  padding: 0 !important;          /* media bleeds to the card rim; body sets its own */
  overflow: hidden;              /* clip the media to the rounded card corner */
}
.peptide-class-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  overflow: hidden;
  border-bottom: 1px solid var(--card-rim);
}
.peptide-class-card__media .ogt { position: absolute; inset: 0; display: block; }
.peptide-class-card__media .ogt img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.peptide-class-card:hover .peptide-class-card__media .ogt img,
.peptide-class-card:focus-within .peptide-class-card__media .ogt img { transform: scale(1.05); }
.peptide-class-card__media .ogt--dark { display: none; }
[data-theme="dark"] .peptide-class-card__media .ogt--light { display: none; }
[data-theme="dark"] .peptide-class-card__media .ogt--dark { display: block; }
/* Soft scrim keeps imagery legible at the badge edge without dulling it. */
.peptide-class-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,18,16,0.10) 0%, transparent 38%, transparent 64%, rgba(10,18,16,0.18) 100%);
}
[data-theme="dark"] .peptide-class-card__media::after {
  background: linear-gradient(180deg, rgba(10,18,16,0.22) 0%, transparent 40%, transparent 60%, rgba(10,18,16,0.34) 100%);
}

.peptide-class-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  flex: 1 1 auto;
}
.peptide-class-card__body h3 { margin-bottom: 0; }
.peptide-class-card__body p { margin-bottom: 0; }
.peptide-class-card__body .btn { align-self: flex-start; margin-top: var(--space-2); }

/* ---- 18b. Evidence badges ----
   Pill-shaped, color-coded by evidence tier. Teal = strongest (Level I),
   gold = Level II, copper = Level III, muted slate = preclinical (IV–V). */
.evidence-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.34rem 0.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1;
}
.evidence-badge--i {
  color: #0a6b5f;
  background: color-mix(in oklab, #07776d 14%, transparent);
  border-color: color-mix(in oklab, #07776d 34%, transparent);
}
.evidence-badge--ii {
  color: #8a6a24;
  background: color-mix(in oklab, #c7a765 16%, transparent);
  border-color: color-mix(in oklab, #c7a765 36%, transparent);
}
.evidence-badge--iii {
  color: #9a5a32;
  background: color-mix(in oklab, #e0b9a3 20%, transparent);
  border-color: color-mix(in oklab, #e0b9a3 42%, transparent);
}
.evidence-badge--iv {
  color: #5a625e;
  background: color-mix(in oklab, #6b7570 14%, transparent);
  border-color: color-mix(in oklab, #6b7570 30%, transparent);
}
[data-theme="dark"] .evidence-badge--i { color: #8fd9cd; }
[data-theme="dark"] .evidence-badge--ii { color: #e6cf94; }
[data-theme="dark"] .evidence-badge--iii { color: #e6b48f; }
[data-theme="dark"] .evidence-badge--iv { color: #aeb8b3; }

/* ---- 18c. Graded evidence ladder ----
   A vertical stack of rungs. Each rung = a meter column (level label + a bar
   whose width descends with evidence strength) + a text column. The bar
   gradient and opacity step down each tier so the ladder visually descends. */
.evidence-ladder {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-2), 1.2vw, var(--space-3));
  margin-top: var(--space-6);
}
.principle-list--duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-6);
}

.principle-card--rung {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) 1.3fr;
  align-items: center;
  gap: clamp(var(--space-4), 2.4vw, var(--space-7));
  padding: clamp(var(--space-4), 2vw, var(--space-6)) !important;
}
.evidence-rung__meter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}
.evidence-level {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  border: 1px solid transparent;
  line-height: 1;
}
.evidence-level--i    { color: #0a6b5f; background: color-mix(in oklab, #07776d 14%, transparent); border-color: color-mix(in oklab, #07776d 34%, transparent); }
.evidence-level--ii   { color: #8a6a24; background: color-mix(in oklab, #c7a765 16%, transparent); border-color: color-mix(in oklab, #c7a765 36%, transparent); }
.evidence-level--iii  { color: #9a5a32; background: color-mix(in oklab, #e0b9a3 20%, transparent); border-color: color-mix(in oklab, #e0b9a3 42%, transparent); }
.evidence-level--iv   { color: #5a625e; background: color-mix(in oklab, #6b7570 14%, transparent); border-color: color-mix(in oklab, #6b7570 30%, transparent); }
[data-theme="dark"] .evidence-level--i   { color: #8fd9cd; }
[data-theme="dark"] .evidence-level--ii  { color: #e6cf94; }
[data-theme="dark"] .evidence-level--iii { color: #e6b48f; }
[data-theme="dark"] .evidence-level--iv  { color: #aeb8b3; }

.evidence-rung__bar {
  width: var(--rung-w, 100%);
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary, #07776d), var(--color-gold, #c7a765));
  box-shadow: 0 0 12px -2px color-mix(in oklab, var(--color-gold, #c7a765) 60%, transparent);
}
.principle-card--rung[data-level="1"] .evidence-rung__bar { opacity: 1; }
.principle-card--rung[data-level="2"] .evidence-rung__bar { opacity: 0.82; }
.principle-card--rung[data-level="3"] .evidence-rung__bar { opacity: 0.64; }
.principle-card--rung[data-level="4"] .evidence-rung__bar {
  opacity: 0.46;
  background: linear-gradient(90deg, color-mix(in oklab, var(--color-gold, #c7a765) 60%, transparent), color-mix(in oklab, var(--color-gold, #c7a765) 24%, transparent));
}
[data-theme="dark"] .evidence-rung__bar {
  box-shadow: 0 0 14px -2px color-mix(in oklab, var(--color-gold, #c7a765) 55%, transparent);
}

.evidence-rung__text h3 { margin-bottom: var(--space-2); }
.evidence-rung__text p { margin-bottom: 0; }

/* Axis caption beneath the ladder: strongest ← → preclinical. */
.evidence-ladder__axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-4);
  padding-inline: 0.25rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #4a524f);
}
[data-theme="dark"] .evidence-ladder__axis { color: rgba(238,230,216,0.6); }
.evidence-ladder__axis span:first-child { color: color-mix(in oklab, var(--color-primary, #07776d) 80%, var(--color-text, #111817)); }

/* ---- 18d. Responsive ---- */
@media (max-width: 760px) {
  .peptide-grid { grid-template-columns: 1fr; }
  .principle-list--duo { grid-template-columns: 1fr; }
  .principle-card--rung {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: flex-start;
  }
  .evidence-rung__meter { flex-direction: row; align-items: center; gap: var(--space-3); width: 100%; }
  .evidence-rung__bar { flex: 1 1 auto; width: var(--rung-w, 100%); max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .peptide-class-card__media .ogt img { transition: none; }
  .peptide-class-card:hover .peptide-class-card__media .ogt img,
  .peptide-class-card:focus-within .peptide-class-card__media .ogt img { transform: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   ROUND 18b — Content-appropriate signatures for Lab Tests, About, Blog.
   Each page gets a module that fits its content (not a copy of the peptides
   evidence ladder): Lab Tests = connected process timeline; About = numbered
   values manifesto; Blog = tag-spacing fix. Plus glowing gold dividers between
   every section on Lab Tests and About to match the peptides rhythm.
   ────────────────────────────────────────────────────────────────────────── */

/* Position sections that carry glowing dividers but are NOT .section--aurora,
   so the absolute divider hairlines anchor to the section box. */
.lab-faq,
.about-principles,
.about-faq { position: relative; overflow: hidden; }

/* ---- 18b-1. Lab Tests: connected process timeline ----
   The how-grid is a 4-step clinician workflow. Turn the step-number badges into
   "stations" sitting on a glowing gold rail at the top edge of each card, so
   the process reads as a connected journey rather than four disconnected tiles.
   Markup is untouched; the rail is a ::before on the grid, the step-numbers
   become absolute nodes with a solid ground that masks the rail behind them. */
.how-grid--timeline {
  position: relative;
  /* breathing room above the cards so the node badges (which lift to sit on the
     rail) never collide with the section head above. */
  margin-top: var(--space-7);
}
.how-grid--timeline::before {
  content: "";
  position: absolute;
  /* step-number center = card padding-top (space-6) + half badge (1.125rem) */
  top: calc(var(--space-6, 1.5rem) + 1.125rem);
  left: 6%;
  right: 6%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(199,167,101,.30) 10%,
      rgba(199,167,101,.70) 38%,
      rgba(199,167,101,.70) 62%,
      rgba(199,167,101,.30) 90%,
      transparent 100%);
  box-shadow: 0 0 10px 1px rgba(199,167,101,.22);
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] .how-grid--timeline::before {
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(214,184,117,.26) 10%,
      rgba(214,184,117,.64) 38%,
      rgba(214,184,117,.64) 62%,
      rgba(214,184,117,.26) 90%,
      transparent 100%);
  box-shadow: 0 0 12px 1px rgba(214,184,117,.24);
}
.how-grid--timeline .step {
  position: relative;
  z-index: 1;                       /* card body sits above the rail layer */
}
.how-grid--timeline .step-number {
  position: absolute;
  top: 0;
  left: var(--space-6, 1.5rem);
  transform: translateY(-50%);
  margin-bottom: 0;                 /* override the base margin so it lifts to the rail */
  /* Solid ground masks the rail behind the badge; gold ring reads as a station. */
  background: var(--color-surface, #fffdf7);
  border: 1.5px solid var(--color-gold, #c7a765);
  color: color-mix(in oklab, var(--color-gold, #c7a765) 60%, var(--color-text, #111817));
  box-shadow:
    0 0 0 4px var(--color-bg, #f8f3ea),
    0 0 14px -2px rgba(199,167,101,.55);
  z-index: 2;
}
[data-theme="dark"] .how-grid--timeline .step-number {
  background: var(--color-surface, #122019);
  color: var(--color-gold, #d6b875);
  box-shadow:
    0 0 0 4px var(--color-bg, #0a1210),
    0 0 16px -2px rgba(214,184,117,.50);
}
/* Step body needs top padding so it clears the lifted badge. */
.how-grid--timeline .step h3 { margin-top: var(--space-7); }
/* Responsive: drop the rail when the grid collapses to 1 column. */
@media (max-width: 720px) {
  .how-grid--timeline::before { display: none; }
  .how-grid--timeline .step-number {
    position: static;
    transform: none;
    margin-bottom: var(--space-6);
    box-shadow: 0 0 0 0 transparent;
  }
  .how-grid--timeline .step h3 { margin-top: 0; }
}

/* ---- 18b-2. About: numbered values manifesto ----
   The flat 6-card principle grid becomes a "manifesto" — each principle gets a
   small gold ordinal label (01 / 06) above its title via CSS counters, so the
   section reads as a credo rather than a generic feature grid. No markup
   changes; counters + ::before do all the work. */
.principle-list--manifesto {
  counter-reset: yhx-principle;
}
.principle-list--manifesto .principle-card {
  counter-increment: yhx-principle;
  position: relative;
}
.principle-list--manifesto .principle-card::before {
  content: counter(yhx-principle, decimal-leading-zero) " / 06";
  display: block;
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold, #c7a765);
  margin-bottom: var(--space-3);
  opacity: 0.92;
}
[data-theme="dark"] .principle-list--manifesto .principle-card::before {
  color: var(--color-gold, #d6b875);
}
.principle-list--manifesto .principle-card h3 {
  margin-top: 0;
}

/* ---- 18b-3. Blog: tag-spacing fix ----
   The category tags (.blog-card-tags > .tag) had no container layout, so the
   pill-shaped spans touched and ran together. Make the tag row a wrapping flex
   with a small gap. Scoped to .interior-system so it only touches the blog. */
.interior-system .blog-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--space-3);
}
.interior-system .blog-card-tags .tag {
  display: inline-block;
}

/* ============================================================
   ROUND 19 — biokits punch-up + blog slim hero + lab collapse
   ============================================================ */

/* --- Blog hero: compact so the page invites scrolling --- */
.page-banner--slim {
  padding-block: clamp(var(--space-8), 4.2vw, var(--space-10)) !important;
}
.page-banner--slim h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); }
.page-banner--slim .page-banner-grid { align-items: center; gap: clamp(var(--space-6), 3vw, var(--space-10)); }
@media (max-width: 860px) {
  .page-banner--slim { padding-block: clamp(var(--space-7), 9vw, var(--space-9)) !important; }
}

/* --- biokits: bring the Lab Tests page into the editorial system --- */
.interior-system .lab-groups { gap: clamp(var(--space-6), 2.4vw, var(--space-8)); }
.interior-system .bio-card.lab-group {
  background: var(--card-sheen), var(--surface-translucent);
  border: 1px solid var(--card-rim);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 2vw, var(--space-8));
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.interior-system .bio-card.lab-group:hover {
  border-color: color-mix(in oklab, var(--color-gold) 55%, transparent);
  box-shadow: var(--card-shadow), 0 0 0 1px color-mix(in oklab, var(--color-gold) 18%, transparent);
}
.interior-system .bio-card.lab-group > h3 {
  font-family: var(--font-serif, "Instrument Serif", serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.interior-system .lab-group--wide { grid-column: 1 / -1; }

/* ordinal eyebrow on each lab group (auto-numbered) */
.interior-system .lab-groups { counter-reset: labgroup; }
.interior-system .bio-card.lab-group { counter-increment: labgroup; }
.interior-system .bio-card.lab-group > h3::before {
  content: counter(labgroup, decimal-leading-zero) " / 09";
  display: block;
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

/* --- Lab chip collapse UI --- */
.interior-system .lab-list { gap: 0.5rem 0.5rem; }
.lab-list__overflow {
  width: 100%;
}
.lab-list__overflow[hidden] { display: none; }
.lab-list__overflow:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.lab-list__toggle {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  padding: 0.45rem 0.95rem;
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  background: color-mix(in oklab, var(--color-primary) 9%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-primary) 26%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.lab-list__toggle:hover {
  background: color-mix(in oklab, var(--color-primary) 16%, transparent);
  border-color: color-mix(in oklab, var(--color-primary) 45%, transparent);
}
.lab-list__toggle-icon {
  transition: transform 0.3s ease;
}
.lab-list__toggle.is-open .lab-list__toggle-icon {
  transform: rotate(180deg);
}

/* frosted lab chips inside the editorial system */
.interior-system .lab-chip {
  background: color-mix(in oklab, var(--color-surface) 72%, transparent);
  border: 1px solid var(--card-rim);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.interior-system .lab-chip:hover {
  border-color: color-mix(in oklab, var(--color-gold) 60%, transparent);
  background: color-mix(in oklab, var(--color-gold) 12%, var(--color-surface));
}

/* ============================================================
   ROUND 19b — blog hero "lean": slimmer, text left, photo right
   ============================================================ */
.page-banner--lean {
  padding-block: clamp(var(--space-16), 9vw, var(--space-24)) clamp(var(--space-7), 3vw, var(--space-9)) !important;
}
.page-banner--lean h1 { font-size: clamp(2rem, 4vw, 2.85rem); }
.page-banner-grid--lean {
  align-items: center;
  display: block;
}
.page-banner-grid--lean .page-banner__lede {
  max-width: 60ch;
}
.page-banner--lean .page-banner__intro {
  margin-top: var(--space-3);
  font-size: var(--text-base);
  line-height: 1.55;
  max-width: 58ch;
}
/* Let the photo breathe on the right: keep the directional scrim but
   pull it tighter so the right ~55% of the banner reads as photo. */
.page-banner--lean::after {
  background:
    linear-gradient(96deg,
      var(--color-bg) 0%,
      var(--color-bg) 46%,
      rgba(248,243,234,.78) 60%,
      rgba(248,243,234,.34) 78%,
      rgba(248,243,234,.12) 100%),
    linear-gradient(to bottom, transparent 64%, var(--color-bg) 100%),
    linear-gradient(rgba(248,243,234,.18), rgba(248,243,234,.18));
}
[data-theme="dark"] .page-banner--lean::after {
  background:
    linear-gradient(96deg,
      var(--color-bg) 0%,
      var(--color-bg) 34%,
      rgba(10,18,16,.76) 50%,
      rgba(10,18,16,.34) 70%,
      rgba(10,18,16,.12) 100%),
    linear-gradient(to bottom, transparent 62%, var(--color-bg) 100%),
    linear-gradient(rgba(10,18,16,.16), rgba(10,18,16,.16));
}
@media (max-width: 760px) {
  .page-banner--lean .page-banner__lede { max-width: 100%; }
  .page-banner--lean::after {
    background:
      linear-gradient(180deg, var(--color-bg) 0%, rgba(248,243,234,.66) 58%, var(--color-bg) 100%);
  }
  [data-theme="dark"] .page-banner--lean::after {
    background:
      linear-gradient(180deg, var(--color-bg) 0%, rgba(10,18,16,.66) 58%, var(--color-bg) 100%);
  }
}

/* ============================================================
   ROUND 20 — homepage targeted enhancement
   • how-it-works: subtle photo backdrop for depth (matches CTA/interiors)
   • trust-signals: frosted-glass cards (matches interior frosted cards)
   • scroll-margin so anchor jumps clear the sticky nav
   ============================================================ */
#how-it-works,
#glp1-showcase,
#goal-teasers,
#start,
#trust-signals { scroll-margin-top: 92px; }

#how-it-works { position: relative; overflow: hidden; }
#how-it-works .how-photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#how-it-works .how-photo picture { display: block; width: 100%; height: 100%; }
#how-it-works .how-photo img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.20;
  mix-blend-mode: soft-light;
}
[data-theme="dark"] #how-it-works .how-photo img {
  opacity: 0.18;
  mix-blend-mode: soft-light;
}
#how-it-works .how-photo .how-photo__dark { display: none; }
[data-theme="dark"] #how-it-works .how-photo .how-photo__light { display: none; }
[data-theme="dark"] #how-it-works .how-photo .how-photo__dark { display: block; }
#how-it-works .how-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--color-bg) 0%, transparent 14%, transparent 86%, var(--color-bg) 100%),
    linear-gradient(96deg, var(--color-bg) 0%, transparent 48%, var(--color-bg) 94%);
  opacity: 0.7;
}
[data-theme="dark"] #how-it-works .how-photo::after { opacity: 0.78; }
#how-it-works .how-aurora { z-index: 1; }
#how-it-works > .container-wide { position: relative; z-index: 2; }

#trust-signals .trust-item {
  position: relative;
  overflow: hidden;
  background: var(--surface-translucent);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid var(--card-rim);
  box-shadow: var(--card-shadow);
}
#trust-signals .trust-item::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--card-sheen);
}
#trust-signals .trust-item > * { position: relative; z-index: 1; }

/* ============================================================
   ROUND 21 — Full-page blue & copper aurora wash on interior pages.
   Extends the peptides-page teal/gold/copper drifting mesh so it flows
   the entire page length (under the hero) on biokits, peptides, blog,
   and about. Augments the fixed body::before page-canvas with prominent
   radial glows positioned down the full scroll. Static (GPU-cheap); the
   per-section animated .how-aurora layers still drift where present.
   ============================================================ */
body.interior-system::before {
  background:
    /* blue/teal glows */
    radial-gradient(60% 40% at 12% 8%, rgba(10, 146, 133, 0.22), transparent 60%),
    radial-gradient(55% 38% at 88% 30%, rgba(7, 127, 115, 0.18), transparent 62%),
    radial-gradient(50% 36% at 20% 62%, rgba(10, 146, 133, 0.16), transparent 60%),
    radial-gradient(60% 40% at 82% 88%, rgba(7, 127, 115, 0.20), transparent 60%),
    /* copper/gold glows */
    radial-gradient(45% 34% at 76% 14%, rgba(224, 185, 163, 0.20), transparent 60%),
    radial-gradient(48% 36% at 14% 46%, rgba(199, 167, 101, 0.16), transparent 62%),
    radial-gradient(50% 38% at 86% 58%, rgba(224, 185, 163, 0.18), transparent 60%),
    radial-gradient(46% 34% at 24% 92%, rgba(199, 167, 101, 0.16), transparent 60%),
    /* base canvas */
    var(--page-canvas);
}
[data-theme="light"] body.interior-system::before {
  background:
    radial-gradient(60% 40% at 12% 8%, rgba(7, 119, 109, 0.14), transparent 60%),
    radial-gradient(55% 38% at 88% 30%, rgba(7, 119, 109, 0.10), transparent 62%),
    radial-gradient(50% 36% at 20% 62%, rgba(7, 119, 109, 0.10), transparent 60%),
    radial-gradient(60% 40% at 82% 88%, rgba(7, 119, 109, 0.12), transparent 60%),
    radial-gradient(45% 34% at 76% 14%, rgba(199, 167, 101, 0.16), transparent 60%),
    radial-gradient(48% 36% at 14% 46%, rgba(199, 167, 101, 0.12), transparent 62%),
    radial-gradient(50% 38% at 86% 58%, rgba(224, 185, 163, 0.16), transparent 60%),
    radial-gradient(46% 34% at 24% 92%, rgba(199, 167, 101, 0.12), transparent 60%),
    var(--page-canvas);
}

/* ──────────────────────────────────────────────────────────────────────────
   ROUND 22 — Hero microcopy mobile readability. On phones the hero disclaimer
   sits over the hero image and --color-text-faint (#6c7773 / #9b9a91) loses
   contrast against bright sky and dark foliage. Bump to --color-text-muted,
   add a soft text-shadow scrim, and keep the inline link legible.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .hero-microcopy {
    color: var(--color-text-muted);
    text-shadow: 0 1px 8px rgba(248, 243, 234, 0.55), 0 1px 2px rgba(248, 243, 234, 0.35);
  }
  [data-theme="dark"] .hero-microcopy {
    text-shadow: 0 1px 10px rgba(10, 18, 16, 0.7), 0 1px 3px rgba(10, 18, 16, 0.5);
  }
  .hero-microcopy a {
    color: var(--color-text);
    text-decoration-color: color-mix(in oklab, var(--color-primary) 70%, transparent);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   ROUND 23 — MOBILE PREMIUM POLISH
   Goal: make mobile as stunning as desktop (or more). All rules scoped to
   phones (max-width: 720px) unless noted. Preview-only overlay.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── 23a. Hero frosted copy panel ────────────────────────────────────────────
   On phones the hero copy overlays the couple image and loses contrast.
   Wrap the copy in a frosted-glass panel so it always reads cleanly. */
@media (max-width: 720px) {
  .hero--imagery .hero-copy {
    position: relative;
    z-index: 3;
    background: color-mix(in oklab, var(--surface) 78%, transparent);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid var(--card-rim, color-mix(in oklab, var(--primary) 14%, transparent));
    border-radius: 18px;
    padding: clamp(var(--space-5), 5vw, var(--space-6)) clamp(var(--space-5), 6vw, var(--space-6));
    margin-top: var(--space-2);
    box-shadow: 0 18px 48px -20px rgba(10, 18, 16, 0.28);
  }
  [data-theme="dark"] .hero--imagery .hero-copy {
    background: color-mix(in oklab, var(--surface) 62%, transparent);
    box-shadow: 0 18px 48px -18px rgba(0, 0, 0, 0.5);
  }
  .hero--imagery .hero-microcopy { color: var(--color-text-muted); text-shadow: none; }
  .hero--imagery .hero-microcopy a { color: var(--color-primary); }
  .hero--imagery .hero-actions .btn { width: 100%; }
  .hero--imagery .hero-trust { margin-top: var(--space-6); }
}

/* ── 23b. Sticky bottom CTA bar (mobile only) ───────────────────────────────
   Injected by mobile-enhance.js. Slides up after hero; hides at footer and
   on fast scroll-down. */
.mobile-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999990;
  display: none; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-top: 1px solid var(--card-rim, color-mix(in oklab, var(--primary) 14%, transparent));
  box-shadow: 0 -12px 36px -18px rgba(10, 18, 16, 0.22);
  transform: translateY(110%); opacity: 0;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.mobile-cta-bar.is-visible { transform: translateY(0); opacity: 1; }
.mobile-cta-bar__label { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.mobile-cta-bar__label .eyebrow { font-size: 0.6rem; letter-spacing: 0.14em; margin: 0 0 2px; color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-cta-bar__label strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--text-base); line-height: 1.15; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-cta-bar .btn { flex: 1 1 auto; min-width: 0; min-height: 48px; padding-inline: var(--space-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-sm); }
@media (min-width: 721px) { .mobile-cta-bar { display: none !important; } }
@media (max-width: 720px) { .mobile-cta-bar { display: flex; } }
body.mcb-pad { padding-bottom: 88px; }

/* ── 23c. SalesCloser launcher — auto-hide on scroll ───────────────────────── */
.sc-launcher { transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease !important; }
.sc-launcher.sc-launcher--hidden { transform: translateY(140%) !important; opacity: 0 !important; pointer-events: none !important; }
body.mcb-active .sc-launcher { bottom: 76px !important; }
body.sc-panel-open .mobile-cta-bar { transform: translateY(110%); opacity: 0; pointer-events: none; }

/* ── 23d. Goal-card / offering carousel (mobile) ───────────────────────────── */
@media (max-width: 720px) {
  .offerings-grid,
  .offerings-group__cards,
  .goal-grid,
  .card-grid {
    display: flex !important; flex-wrap: nowrap; overflow-x: auto;
    scroll-snap-type: x mandatory; gap: var(--space-3) !important;
    padding-bottom: var(--space-3);
    margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .offerings-grid::-webkit-scrollbar,
  .offerings-group__cards::-webkit-scrollbar,
  .goal-grid::-webkit-scrollbar,
  .card-grid::-webkit-scrollbar { display: none; }
  .offerings-grid > *,
  .offerings-group__cards > *,
  .goal-grid > *,
  .card-grid > * { flex: 0 0 78%; max-width: 78%; scroll-snap-align: start; }
}

/* ── 23e. Animated section dividers ────────────────────────────────────────── */
.section-divider::before,
.section-divider::after { transform-origin: left center; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.section-divider:not(.is-divider-seen)::before,
.section-divider:not(.is-divider-seen)::after { transform: scaleX(0); }

/* ── 23f. Goals page gap fix ───────────────────────────────────────────────── */
@media (max-width: 720px) {
  #pathway-detail .section-aside--boxed,
  #pathway-detail .section-copy { margin-top: var(--space-4); }
  #pathway-detail .section-head { gap: var(--space-4); }
  #pathway-detail { padding-block: var(--space-10); }
}

/* ── 23g. Tap micro-interactions ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .btn { transition: transform 0.12s ease, background-color 0.2s ease, box-shadow 0.2s ease; }
  .btn:active { transform: scale(0.97); }
  .offering-card:active, .goal-card:active, .protocol-card:active, .hero-trust__item:active { transform: scale(0.98); transition: transform 0.12s ease; }
}

/* ── 23h. Compact mobile header CTA ────────────────────────────────────────── */
@media (max-width: 720px) {
  .nav-actions .btn-primary { min-height: 40px; padding-inline: var(--space-3); font-size: var(--text-xs); }
  .brand-word { font-size: 1.3rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ROUND 24 — MOBILE ISSUE FIXES (user-reported)
   1. Home hero: drop the opaque frosted card that covered the couple; go
      full-bleed image with a left legibility scrim (matches desktop).
   2. Home trust strip: wrap in a frosted panel so it reads as intentional.
   3. Protocols banner: served by HTML (now a photo banner) — object-position.
   4a. Home #start (cta--imagery): shorter card, lighter right reveal so the
       person shows, auto-width button.
   4b. Protocols #start: side-by-side buttons, shorter card.
   5. Peptide class cards: name chip on the image top-right.
   6. About hero: keep the subject's head in frame on mobile.
   7. Treatments (goals) duo hero: mobile object-position for the couple.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── 24-1. Home hero — full-bleed image + left scrim, no opaque card ───────── */
@media (max-width: 720px) {
  .hero--imagery .hero-canvas { top: 0; height: 100%; }
  .hero--imagery .hero-art__img { object-fit: cover; object-position: 72% 40%; }
  .hero--imagery .hero-art {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%) !important;
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .hero--imagery .hero-grid { position: relative; min-height: clamp(520px, 118vw, 680px); }
  .hero--imagery .hero-grid::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(100deg, var(--color-bg) 0%, rgba(248,243,234,.90) 24%, rgba(248,243,234,.36) 56%, transparent 80%);
  }
  [data-theme="dark"] .hero--imagery .hero-grid::before {
    background: linear-gradient(100deg, var(--color-bg) 0%, rgba(10,18,16,.92) 24%, rgba(10,18,16,.42) 56%, transparent 80%);
  }
  .hero--imagery .hero-copy {
    position: relative; z-index: 3;
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: none; border-radius: 0; padding: 0; box-shadow: none; margin-top: 0;
  }
  [data-theme="dark"] .hero--imagery .hero-copy { background: transparent; box-shadow: none; }
  .hero--imagery .hero-copy .eyebrow { margin-bottom: var(--space-3); }
  .hero--imagery .hero-copy h1 { margin-top: 0; }
  .hero--imagery .hero-microcopy { color: var(--color-text-muted); text-shadow: none; }
  .hero--imagery .hero-microcopy a { color: var(--color-primary); }
}

/* ── 24-2. Home trust strip — frosted panel ────────────────────────────────── */
@media (max-width: 720px) {
  .hero-trust {
    background: color-mix(in oklab, var(--surface) 74%, transparent);
    backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1);
    border: 1px solid var(--card-rim, color-mix(in oklab, var(--primary) 14%, transparent));
    border-radius: 18px;
    padding: var(--space-5) var(--space-5) var(--space-6);
    margin-inline: var(--space-4);
    margin-top: var(--space-8);
    box-shadow: 0 14px 40px -22px rgba(10,18,16,.24);
  }
  [data-theme="dark"] .hero-trust {
    background: color-mix(in oklab, var(--surface) 58%, transparent);
    box-shadow: 0 14px 40px -18px rgba(0,0,0,.5);
  }
  .hero-trust__item { padding: var(--space-2) 0; }
}

/* ── 24-3. Protocols photo banner object-position ─────────────────────────── */
.page-banner--protocols .page-banner__photo img { object-position: 62% 52%; }

/* ── 24-4a. Home #start (cta--imagery) — shorter card, reveal the person ───── */
@media (max-width: 720px) {
  .cta--imagery .cta-box { padding: clamp(var(--space-5), 5vw, var(--space-6)); gap: var(--space-4); }
  .cta--imagery .cta-figure img { object-position: 80% 32%; }
  .cta--imagery .cta-figure::after {
    background: linear-gradient(100deg, var(--color-primary) 0%, var(--color-primary) 38%, rgba(7,119,109,.52) 60%, rgba(7,119,109,.16) 100%);
  }
  [data-theme="dark"] .cta--imagery .cta-figure::after {
    background: linear-gradient(100deg, #0f1d18 0%, #0f1d18 40%, rgba(15,29,24,.52) 62%, rgba(15,29,24,.20) 100%);
  }
  .cta--imagery .cta-box .btn { width: auto; align-self: start; }
}

/* =====================================================================
   ROUND 32 — POLISH (mobile)  [imagery-integration.css?v=...r42]
   ---------------------------------------------------------------------
   Six-issue polish pass. This block is appended LAST so it wins on
   source order at equal specificity. Everything here is gated to
   phones (<=768px); desktop is untouched.
   Issues handled below:
     1  Home hero — lower the copy so the eyebrow pill never rides up
        into the couple on tall phones (and keep the scrim behind text).
     2  Home 4-point trust box — opaque, theme-aware surface so all four
        items are legible (was dark-on-dark over the hero scrim).
     4a Treatments — hide the "Explore options by goal." heading.
     4b Treatments hero — fade the photo's hard bottom edge into the bg.
     4c Treatments — restyle the "Show all N options" toggle so it sits
        inset/centered inside the ROUND 31 rounded card.
   (Issues 3, 5, 6 were solved elsewhere: card_weight swap above,
    protocols hero-bg v2 swap above, and the site-wide inline theme
    loader injected into every page's <head>.)
   ===================================================================== */
@media (max-width: 768px) {

  /* ---- ISSUE 1. Home hero — sink the copy into the lower third -------
     The copy grid is already bottom-anchored (justify-content:flex-end,
     min-height:78vh — see A3 ~line 2194). On TALL phones the hero grows,
     so the top of the copy (the "Science-forward … Nationwide" eyebrow
     pill) crept up far enough to sit over the couple's heads.
     Fix, two independent levers so it holds across aspect ratios:
       (a) pan the framing DOWN a touch (larger object-position Y with
           object-fit:cover shows more of the path below, which lifts the
           couple UP in frame, away from the bottom copy zone); and
       (b) add breathing room under the copy and cap the copy block so it
           stays parked in the lower third instead of stretching upward. */
  .hero--imagery .hero-art__img {
    object-position: 50% 38% !important;   /* center on the couple (image 22-52%) → sits in visible upper hero, above the card */
  }
  /* ROUND 32.1 — REVERTED. This block tried to fix the pill-over-heads
     overlap by forcing a 92vh hero height + align-items:end to anchor copy
     to the bottom. It did not fully solve the overlap (the landscape couple
     image can't be reframed via object-position once object-fit:cover fills
     the portrait hero), and the tall min-height caused layout side-effects.
     Reverted to the ROUND 31 state; the overlap is addressed separately. */

  /* ---- ISSUE 2. Home 4-point trust box — opaque, legible surface -----
     The box (.hero-trust: Clinician-led review / Compounded to you /
     Follow-up built in / Science-forward) was a translucent frosted panel
     (24-2 ~line 1606 uses a 58–74% surface mix). Over the dark hero scrim
     the dark item text went dark-on-dark for 3 of 4 rows. Per the spec's
     preferred option (b), give the box a SOLID theme-aware surface so its
     text is readable regardless of what's behind it, in BOTH themes. */
  .hero--imagery .hero-trust {
    background: var(--color-surface) !important;   /* opaque: cream / deep-green */
    -webkit-backdrop-filter: none !important;      /* frosting no longer needed */
    backdrop-filter: none !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 16px !important;
    padding: 1.1rem 1.25rem !important;
    margin: var(--space-5) var(--space-4) 0 !important;
    box-shadow: 0 14px 40px -22px rgba(10, 18, 16, 0.35) !important;
  }
  /* Force the item text back to the readable on-surface tokens (the hero
     scrim rules ~line 2316 tint hero-copy text cream; the trust box is a
     separate opaque panel, so its text must use normal fg colors). */
  .hero--imagery .hero-trust,
  .hero--imagery .hero-trust__item,
  .hero--imagery .hero-trust__item * {
    color: var(--color-text) !important;
    text-shadow: none !important;
  }
  .hero--imagery .hero-trust__item .hero-trust__title,
  .hero--imagery .hero-trust__item strong {
    color: var(--color-text) !important;
  }
  .hero--imagery .hero-trust__item .hero-trust__sub,
  .hero--imagery .hero-trust__item small {
    color: var(--color-text-muted) !important;
  }
  /* keep the little icon marks on-brand rather than inheriting text color */
  .hero--imagery .hero-trust__item svg {
    color: var(--color-primary) !important;
  }

  /* ---- ISSUE 4a. Treatments — hide "Explore options by goal." --------
     Redundant on mobile (the categories are self-evident once you scroll).
     The heading is the #offerings section title; hide it on phones only. */
  #offerings .section-head .section-title,
  #offerings .section-head .section-title * {
    display: none !important;
  }

  /* ---- ISSUE 4b. Treatments hero — fade the hard bottom edge ---------
     ROUND 29c (~line 2488) made the duo-hero photo a full-bleed cover and
     removed its mask (mask-image:none), which left a hard horizontal seam
     where the photo meets the offerings section. Re-introduce a clean
     fade — but as a gradient OVERLAY on the photo's own ::after, blending
     into the page bg, so there's no reintroduced layout gap (the mask had
     caused). NB: .page-banner--duo::after is the LEFT-side copy scrim, so
     we target the photo element's ::after specifically. */
  .page-banner--duo .page-banner__photo {
    position: relative !important;   /* anchor the ::after fade */
  }
  .page-banner--duo .page-banner__photo::after {
    content: "" !important;
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    height: 38%;                     /* bottom band only */
    background: linear-gradient(to bottom,
      transparent 0%,
      var(--color-bg) 100%) !important;   /* melt into the page canvas */
    pointer-events: none;
    z-index: 1;
  }

  /* ---- ISSUE 4c. Treatments — inset, centered "Show all N options" ----
     The toggle (injected by goal-filter.js right after .offerings-grid,
     inside the ROUND 31 rounded card) was full-bleed with a square bottom
     border, so it fought the card's 24px rounded corners and 12px inner
     padding. Re-seat it as a neat inset pill that lines up with the card
     padding, centered, comfortable tap target, with a chevron. */
  .offerings-grid__toggle {
    margin: 0.25rem 12px 12px !important;   /* match ROUND 31 card padding */
    width: auto !important;                  /* inset, not full-bleed */
    min-height: 44px !important;             /* solid tap target */
    padding: 0.7rem 1.1rem !important;
    background: var(--color-surface-2, var(--color-surface)) !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 999px !important;         /* clean pill, not a square bar */
    box-shadow: none !important;
  }
  /* keep the chevron (▾) that the base rule adds; just ensure it rotates
     when expanded. The base uses `+ .offerings-grid__toggle::after`; the
     button sits AFTER the grid, so the expanded state lives on the grid. */
  .offerings-grid--expanded + .offerings-grid__toggle::after {
    transform: rotate(180deg) !important;
  }
  .offerings-grid__toggle:active {
    background: var(--surface-translucent-2, rgba(0, 0, 0, 0.05)) !important;
  }
}

/* ── 24-4b. Protocols #start — side-by-side buttons, shorter card ──────────── */
@media (max-width: 720px) {
  #start.cta--centered .cta-box { padding: clamp(var(--space-5), 5vw, var(--space-6)); gap: var(--space-4); }
  #start.cta--centered .cta-box__actions { display: flex; gap: var(--space-3); }
  #start.cta--centered .cta-box__actions .btn { width: auto; flex: 1 1 0; min-width: 0; }
}

/* ── 24-5. Peptide class card — name chip on image top-right ───────────────── */
.peptide-class-card__media { position: relative; }
.peptide-class-card__name {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2;
  max-width: 72%;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-bg) 80%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--card-rim, color-mix(in oklab, var(--primary) 18%, transparent));
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-xs); line-height: 1.2; letter-spacing: 0.01em;
  color: var(--color-text); text-align: right;
  box-shadow: 0 6px 18px -10px rgba(10,18,16,.3);
}
[data-theme="dark"] .peptide-class-card__name {
  background: color-mix(in oklab, var(--surface) 72%, transparent);
}

/* ── 24-6. About hero — keep subject's head in frame on mobile ─────────────── */
@media (max-width: 760px) {
  .page-banner--about .page-banner__photo img { object-position: 78% 24%; }
}

/* ── 24-7. Treatments (goals) duo hero — couple positioning on mobile ──────── */
@media (max-width: 760px) {
  .page-banner--duo .page-banner__photo img { object-position: 78% 42%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ROUND 25 — MOBILE REFINEMENTS (user round 2)
   1. Home hero: show the WHOLE image (contain), copy below it, disclaimer
      sitting just above the trust strip.
   2. Current Offerings: category thumbnail becomes a full-width banner that
      pans leftward as you scroll the card carousel (traverses the whole image).
   3. Protocols Core Protocols section-head: merge the boxed aside into the h2
      block, kill the staggered empty space, pull the cards up.
   4. Peptide class card name chip: move to top-left, left-justified.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── 25-1. Home hero — full-bleed cover image, copy pushed down clear of faces
   User round 2: keep the full-bleed hero image WITH the overlay (the way it was
   before the "contain" experiment), but push the copy block DOWN so the headline
   no longer sits over the couple's faces (upper-right). Disclaimer ends just
   above the trust strip. */
@media (max-width: 720px) {
  .hero--imagery .hero-canvas { top: 0; height: 100%; position: absolute; inset: 0 0 0 0; z-index: 0; overflow: hidden; }
  .hero--imagery .hero-art__img {
    object-fit: cover !important; object-position: 78% 30% !important;
    width: 100%; height: 100%; animation: none !important;
  }
  .hero--imagery .hero-art {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%) !important;
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .hero--imagery .hero-grid {
    position: relative; min-height: clamp(580px, 122vw, 760px);
    align-items: end !important;
    padding-top: var(--space-10); padding-bottom: var(--space-2);
  }
  .hero--imagery .hero-grid::before {
    content: ""; position: absolute; z-index: 2; pointer-events: none;
    /* Break OUT of the container-wide column so the wash bleeds to the viewport
       edges and never reads as a placed box. */
    top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
    /* Soft left-leaning wash, feathered — never a hard box. Rises to just above
       the pill so the copy reads as sitting on a faded blur, not a panel. */
    background:
      radial-gradient(120% 70% at 18% 92%, rgba(248,243,234,.72) 0%, rgba(248,243,234,.34) 26%, transparent 52%),
      linear-gradient(100deg, rgba(248,243,234,.5) 0%, rgba(248,243,234,.22) 30%, transparent 56%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 78%);
            mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 78%);
  }
  [data-theme="dark"] .hero--imagery .hero-grid::before {
    background:
      radial-gradient(120% 70% at 18% 92%, rgba(10,18,16,.72) 0%, rgba(10,18,16,.34) 26%, transparent 52%),
      linear-gradient(100deg, rgba(10,18,16,.5) 0%, rgba(10,18,16,.22) 30%, transparent 56%);
  }
  /* Bottom wash: full-bleed, soft, faded blur that fades to transparent well
     before the faces. Peak stays translucent so it never reads as a solid box. */
  .hero--imagery .hero-grid::after {
    content: ""; position: absolute; z-index: 2; pointer-events: none;
    top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
    background: linear-gradient(to top,
      rgba(248,243,234,.62) 0%,
      rgba(248,243,234,.5) 22%,
      rgba(248,243,234,.3) 44%,
      rgba(248,243,234,.12) 62%,
      transparent 76%);
  }
  [data-theme="dark"] .hero--imagery .hero-grid::after {
    background: linear-gradient(to top,
      rgba(10,18,16,.62) 0%,
      rgba(10,18,16,.5) 22%,
      rgba(10,18,16,.3) 44%,
      rgba(10,18,16,.12) 62%,
      transparent 76%);
  }
  .hero--imagery .hero-copy {
    position: relative; z-index: 3;
    background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border: none; border-radius: 0; padding: 0; box-shadow: none; margin-top: 0;
  }
  [data-theme="dark"] .hero--imagery .hero-copy { background: transparent !important; box-shadow: none; }
  .hero--imagery .hero-copy .eyebrow { margin-bottom: var(--space-3); }
  .hero--imagery .hero-copy h1 { margin-top: 0; }
  .hero--imagery .hero-actions .btn { width: auto; }
  .hero--imagery .hero-microcopy { color: var(--color-text-muted); text-shadow: none; }
  .hero--imagery .hero-microcopy a { color: var(--color-primary); }
  .hero--imagery .hero-trust { margin-top: var(--space-5); }
}

/* ── 25-2. Current Offerings — trail BACKGROUND pans with card scroll ──────
   The full-bleed trail photo (the woman/runners) on #offerings pans leftward
   as the card carousel advances, traversing the whole image and reversing on
   scroll back. The small category thumbnail stays as-is (no pan on it). */
@media (max-width: 720px) {
  #offerings { background-size: cover, cover; }
}

/* ── 25-3. Protocols HERO — merge intro into heading box + pull Core Protocols up
   User round 2: the hero had two stacked frosted boxes (heading + lower-right
   intro) with blank space below. Merge the intro text INTO the heading box
   (JS moves .page-banner__intro into the heading <div> on mobile), strip the
   banner's bottom blank space, and pull the Core Protocols section up. */
@media (max-width: 720px) {
  /* Intro now lives inside the heading card; match the font treatment other
     page heroes use (text-lg DM Sans, muted) so it reads consistently. */
  .page-banner--protocols .page-banner__intro.intro-merged {
    margin-top: var(--space-4) !important;
    margin-left: 0 !important;
    max-width: none !important;
    width: auto !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-lg) !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    color: var(--color-text-muted) !important;
  }
  [data-theme="dark"] .page-banner--protocols .page-banner__intro.intro-merged { color: rgba(238,230,216,.78) !important; }
  /* Kill the blank space below the merged hero card. */
  .page-banner--protocols { padding-bottom: var(--space-4) !important; }
  /* Pull the Core Protocols section up into the freed space. */
  .section--protocols-core { padding-top: clamp(var(--space-6), 6vw, var(--space-8)) !important; }
}

/* ── 25-4. Peptide class card name chip — top-left, left-justified, +50% size ─ */
.peptide-class-card__name {
  right: auto; left: var(--space-3);
  text-align: left;
  font-size: calc(var(--text-xs) * 1.5) !important;
  padding: 9px 18px !important;
  line-height: 1.2 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   ROUND 28 — MOBILE REFORMAT (root-cause fixes for user-reported mobile issues)
   Goals/treatments (goals.html) + protocols (protocols.html) carousels + heroes.
   ───────────────────────────────────────────────────────────────────────────
   Problem summary:
   • Horizontal "white edge" bleed — the full-bleed carousel (negative margin)
     and 100vw pseudo-elements let the whole page scroll sideways.
   • Cards drift vertically while swiping horizontally — no touch-action lock,
     and overflow-y computed to `auto` clipped card top borders/shadows.
   • Background trail pan too aggressive (0→100% of a wide image).
   • Treatments #offerings header repeats hero info and sits over the trail image.
   Fixes below. All scoped to max-width: 720px unless noted. ─────────────── */

/* ── 28-1. Global horizontal-overflow lock.
   `clip` (not `hidden`) so we don't create a scroll container that breaks
   position: sticky inside. Kills the white-edge sideways drift at the source. */
html, body { overflow-x: clip; max-width: 100%; }
#main { overflow-x: clip; }
#offerings, .offerings-group { overflow-x: clip; }

/* ── 28-2. Horizontal card carousel — robust scroll-snap.
   Replaces the brittle transform pattern. touch-action: pan-x locks the swipe
   to horizontal so a diagonal gesture can't move cards vertically; overflow-y:
   clip stops any vertical scroll inside the row (the prior `auto` computed
   value is what clipped card top borders/shadows). padding-block gives the
   box-shadow + border room so nothing visually clips. ─────────────────────── */
@media (max-width: 720px) {
  .offerings-grid,
  .offerings-group__cards,
  .goal-grid {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: clip;            /* lock vertical — no up/down card drift */
    touch-action: pan-x;        /* only horizontal gestures drive the carousel */
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-4);
    gap: var(--space-3) !important;
    align-items: stretch;
    padding-block: var(--space-2);   /* room for card top border + shadow */
    margin-inline: calc(-1 * var(--space-4));
    padding-inline: var(--space-4);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .offerings-grid::-webkit-scrollbar,
  .offerings-group__cards::-webkit-scrollbar,
  .goal-grid::-webkit-scrollbar { display: none; }
  .offerings-grid > *,
  .offerings-group__cards > *,
  .goal-grid > * {
    flex: 0 0 80%; max-width: 80%; scroll-snap-align: start;
  }
  /* Protocol / pathway cards (.card-grid) are a VERTICAL stack on mobile —
     they scroll with the page (pan-y), never horizontally. This stops the
     both-axis drift the user saw on the protocols page. */
  .card-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
    touch-action: pan-y;
    overflow: visible;
  }
  .card-grid > * { max-width: 100% !important; flex: none !important; }
}

/* ── 28-3. Treatments #offerings header — surface, not floating over trail.
   Hide the redundant aside box (it repeats the hero intro) and sit the
   "Explore options by goal" heading on a frosted surface so it reads cleanly. */
@media (max-width: 720px) {
  #offerings .section-head .section-aside--boxed { display: none; }
  #offerings .section-head .section-title {
    background: var(--color-surface);
    display: inline-block;
    padding: 0.15em 0.4em;
    border-radius: 6px;
    box-shadow: 0 1px 10px rgba(0,0,0,0.06);
  }
  [data-theme="dark"] #offerings .section-head .section-title {
    background: rgba(18,32,25,0.82);
    box-shadow: 0 1px 10px rgba(0,0,0,0.35);
  }
}

/* ── 28-4. Sticky CTA + SalesCloser launcher spacing.
   Stop the sticky bar overlapping the last row of buttons and the launcher
   overlapping footer/copyright text. */
@media (max-width: 720px) {
  body.mcb-pad { padding-bottom: 96px; }            /* room for sticky bar */
  /* why: on the treatments/goals page, ensure the last offerings-group has
     enough breathing room below it so its final card (and the Show-less
     toggle) never tucks behind the sticky CTA bar after expanding. */
  #main > section:last-of-type { padding-bottom: calc(var(--space-10) + 64px) !important; }
  .mobile-cta-bar ~ footer,
  footer { padding-bottom: var(--space-8) !important; }
  .sc-launcher { bottom: 96px !important; }          /* clear sticky bar + footer text */
  body:not(.mcb-active) .sc-launcher { bottom: 20px !important; }
}

/* ── 28-5. Goal filter — horizontal scroll row (not a wrapped stack).
   The 6 pills (All, Weight, Sexual Health, Recovery, Longevity, Skin & Aesthetic)
   were wrapping to 4 rows on mobile. Make them a single scrollable row. */
@media (max-width: 720px) {
  .goal-filter {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: clip;
    touch-action: pan-x;
    scroll-snap-type: x proximity;
    gap: var(--space-2) !important;
    margin-inline: calc(-1 * var(--space-4));
    padding-inline: var(--space-4);
    padding-bottom: var(--space-2);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .goal-filter::-webkit-scrollbar { display: none; }
  .goal-filter__chip {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

/* ── 28-6. Treatments (goals) duo hero — stop text covering the couple.
   On portrait phones the headline + intro wrapped full-width and overlapped
   the couple's chests/faces. Constrain the text column to the left ~60% so the
   couple on the right stays clear, and strengthen the left scrim for legibility. */
@media (max-width: 720px) {
  .page-banner--duo .page-banner-grid > div {
    max-width: 60%;
  }
  .page-banner--duo .page-banner__intro {
    max-width: 60%;
  }
  .page-banner--duo::after {
    /* stronger left-side scrim so the narrower text reads cleanly */
    background: linear-gradient(90deg,
      rgba(248,243,234,0.94) 0%,
      rgba(248,243,234,0.82) 36%,
      rgba(248,243,234,0.30) 58%,
      transparent 72%) !important;
  }
  [data-theme="dark"] .page-banner--duo::after {
    background: linear-gradient(90deg,
      rgba(9,17,14,0.94) 0%,
      rgba(9,17,14,0.82) 36%,
      rgba(9,17,14,0.30) 58%,
      transparent 72%) !important;
  }
}

/* ── 28-7. Protocols hero — give the lab photo visible height on mobile.
   The banner photo was rendering behind the text card with only ~40px visible.
   Raise the banner min-height and pin the text card lower so the photo reads. */
@media (max-width: 720px) {
  .page-banner--protocols {
    min-height: clamp(440px, 92vw, 560px) !important;
    padding-top: clamp(var(--space-14), 30vw, var(--space-20)) !important;
  }
  .page-banner--protocols .page-banner-grid { align-items: end; }
}

/* =====================================================================
   ===== ROUND 29 — MOBILE REVAMP (≤768px) =============================
   =====================================================================
   Goal: move the mobile layout from horizontal carousels + text-over-face
   heroes to the Hims / Function / Levels pattern:
     • Treatments & Protocols cards → vertical FULL-WIDTH list rows
       (edge-to-edge, border-bottom separators, chevron affordance).
     • Home hero → text anchored to a BOTTOM safe zone on a gradient scrim
       so the headline never lands on a person's face (the #1 complaint).
     • Protocols hero → un-truncate the headline + scrim behind the text.
     • Bottom CTA → person visible (image band above text, not overlaid).

   Specificity notes:
     • This block is intentionally LAST in the file, so on the 0–720px range
       it overrides the Round 23/24/25/28 carousel rules on equal-specificity
       ties. Where an earlier round used `!important` we match it here.
     • `#main` is used on the protocols selectors to beat the ID-based rules
       in proto-experiment-continuous.css.
     • Breakpoint is 768px (a superset of the earlier 720px rules) so the new
       layout also covers the 721–768px band.
   Theme: default :root = dark; [data-theme="light"] = light. We reference the
   real design tokens (--color-bg / --color-surface / --color-text /
   --color-border) rather than the generic names in the spec draft.
   ===================================================================== */
@media (max-width: 768px) {

  /* ---- A1. TREATMENTS (goals.html) — vertical full-width card rows ---- */

  /* why: kill the horizontal scroll-snap carousel; stack groups & cards
     vertically as a single edge-to-edge column (Hims-style list). */
  .offerings-grid,
  .offerings-group__cards {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: 100%;
    overflow: visible !important;      /* why: no horizontal scroll region */
    overflow-x: visible !important;
    touch-action: auto !important;     /* why: page scrolls normally, no pan-x lock */
    scroll-snap-type: none !important;
    margin-inline: 0 !important;       /* why: undo the negative-margin bleed from R28 */
    padding-inline: 0 !important;
    padding-block: 0 !important;
  }

  /* why: each card is a full-width row, not a 78–80% snap slide */
  .offerings-grid > *,
  .offerings-group__cards > * {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: none !important;
  }

  /* why: the card itself becomes a tappable list row — edge-to-edge, square
     corners, hairline separator, room on the right for the chevron. */
  .offering-card {
    position: relative;
    display: block;
    width: 100%;
    min-height: 64px;                  /* why: comfortable 44px+ tap target */
    margin: 0 !important;
    padding: 1.1rem 2.5rem 1.1rem 1.25rem !important;  /* right pad = chevron gutter */
    border: none !important;
    border-bottom: 1px solid var(--color-border) !important;  /* hairline between rows */
    border-radius: 0 !important;       /* why: rows butt together, not floating cards */
    background: transparent !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease;
  }
  [data-theme="dark"] .offering-card {
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
  }

  /* why: chevron affordance on the trailing edge signals "opens details" */
  .offering-card::after {
    content: "\203A";                  /* › */
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--color-text-muted, #65716d);
    pointer-events: none;              /* why: never intercept taps on the row */
  }

  /* why: active feedback when a row is pressed (paired with JS .is-pressed) */
  .offering-card.is-pressed,
  .offering-card:active {
    background: var(--surface-translucent-2, rgba(0, 0, 0, 0.04)) !important;
  }

  /* why: tighten the inner content so it reads as one clean row, not a card */
  .offering-card .offering-card__top { margin-bottom: 0.35rem; }
  .offering-card h4 { margin: 0 0 0.15rem; }
  .offering-card p { margin: 0.15rem 0 0.6rem; }
  .offering-card .offering-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.4rem;
  }

  /* why: keep the group container from re-introducing an x-scroll context */
  #offerings .offerings-grid { scrollbar-width: none; }
  #offerings .offerings-grid::-webkit-scrollbar { display: none; }

  /* ---- A1b. Goal-filter pills — horizontal strip, no right overflow ---- */
  .goal-filter {
    display: flex !important;
    flex-wrap: nowrap !important;
    padding: 0 1.25rem !important;          /* why: inset both edges, no bleed */
    margin-inline: 0 !important;
    overflow-x: auto !important;
    overflow-y: clip !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
    scrollbar-width: none;                  /* why: hide scrollbar (Firefox) */
  }
  .goal-filter::-webkit-scrollbar { display: none; }  /* hide scrollbar (WebKit) */
  .goal-filter__chip {
    flex: 0 0 auto !important;              /* why: pills never wrap or shrink */
    white-space: nowrap;
    scroll-snap-align: start;
  }

  /* ---- A2. PROTOCOLS (protocols.html) — vertical full-width card rows ----
     #main beats proto-experiment-continuous.css ID selectors. */

  /* why: force a single-column flex list (undo R28 grid) */
  #main .card-grid,
  .card-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    grid-template-columns: none !important;
    touch-action: auto !important;
    overflow: visible !important;
  }

  /* why: each protocol card = full-width row with a hairline separator */
  #main .card-grid .protocol-card,
  .card-grid .protocol-card {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    padding: 1.15rem 2.5rem 1.15rem 1.25rem !important;
    border: none !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 64px;
    transition: background-color 0.15s ease;
  }
  [data-theme="dark"] #main .card-grid .protocol-card,
  [data-theme="dark"] .card-grid .protocol-card {
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
  }

  /* why: chevron affordance to match the treatments rows */
  #main .card-grid .protocol-card::after,
  .card-grid .protocol-card::after {
    content: "\203A";
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--color-text-muted, #65716d);
    pointer-events: none;
  }
  #main .card-grid .protocol-card.is-pressed,
  .card-grid .protocol-card:active {
    background: var(--surface-translucent-2, rgba(0, 0, 0, 0.04)) !important;
  }

  /* why: if a protocol card ever carries a hero image, keep it from zoom-cropping
     awkwardly — constrain to a tidy 16/9 media block. (No image today; safe.) */
  .protocol-card img,
  .protocol-card .card-media {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    border-radius: 8px;
  }

  /* why: un-truncate the protocols hero headline — the R28 min-height + big
     top-pad pushed the H1 off-screen. Let content define height, cap at 38vh. */
  #main .page-banner--protocols,
  .page-banner--protocols {
    min-height: 38vh !important;
    padding-top: 1.5rem !important;
  }
  .page-banner--protocols .page-banner-grid > div h1,
  #main .page-banner--protocols h1 {
    padding-top: 1.5rem;
    min-height: auto !important;
  }

  /* why: gradient scrim behind the protocols hero text so cards/photo never
     bury a face — opaque page color at the base fading up to transparent. */
  .page-banner--protocols::after {
    content: "";
    position: absolute;
    inset: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);       /* full-bleed pattern — no overflow */
    background: linear-gradient(to top,
      var(--color-bg) 6%,
      rgba(0, 0, 0, 0.30) 40%,
      transparent 62%);
    z-index: 0;                        /* behind the text, above the photo */
    pointer-events: none;
  }
  .page-banner--protocols .page-banner-grid { position: relative; z-index: 1; }

  /* ---- A3. HOME HERO (index.html) — text in a BOTTOM safe zone ----
     why: anchor the copy to the bottom on a gradient scrim so the headline
     never overlays the couple's faces (upper-center). The prior "constrain
     to 60% width" approach failed; bottom-anchoring is the fix. */
  .hero--imagery {
    position: relative;
    min-height: 78vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;   /* text anchored to bottom */
  }

  /* why: hf2_home_hero_v5.png is a 9:16 portrait shot from a low angle so the
     athletic couple FROM BEHIND naturally occupies the upper-middle of the
     frame (heads ~22%, feet ~52%), with sky above for the headline and empty
     coastal dunes below (which the content card covers). object-position Y=38%
     centers the rendered hero on the couple so they land in the VISIBLE upper
     zone — above the bottom card — instead of being pushed down behind it. */
  .hero--imagery .hero-art__img {
    object-position: 50% 38% !important;
  }
  /* why: drop the mask feather — the new bottom scrim handles legibility */
  .hero--imagery .hero-art {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* why: retire the R25 grid washes so we don't stack competing scrims */
  .hero--imagery .hero-grid::before,
  .hero--imagery .hero-grid::after {
    display: none !important;
  }

  /* why: one bottom-up scrim on the hero itself — opaque page color at the
     base, a mid dark band for contrast, transparent by 62% up (clear of faces) */
  .hero--imagery::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
      var(--color-bg) 8%,
      rgba(0, 0, 0, 0.35) 38%,
      transparent 62%);
    z-index: 1;
    pointer-events: none;
  }

  /* why: the copy grid sits in the bottom safe zone, above the scrim */
  .hero--imagery .hero-grid {
    position: relative;
    z-index: 2;
    min-height: 0 !important;
    align-items: stretch !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .hero--imagery .hero-copy {
    position: relative;
    z-index: 2;
    padding: 2rem 1.25rem 2.5rem !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  /* why: trust strip flows below the copy on the opaque scrim base */
  .hero--imagery .hero-trust {
    position: relative;
    z-index: 2;
  }

  /* ---- A4. BOTTOM CTA (index.html #start.cta--imagery) — person visible ----
     why: stop the brand wash from burying the person. Stack vertically: image
     band on top, text below in normal flow, full-width button. */
  .cta--imagery .cta-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    overflow: visible !important;
  }
  .cta--imagery .cta-figure {
    position: relative !important;     /* was absolute inset:0 (overlay) */
    inset: auto !important;
    order: -1;                         /* image band on top */
    width: 100%;
    min-height: 42vh;                  /* why: enough height for the person to read */
    border-radius: 12px;
    overflow: hidden;
  }
  .cta--imagery .cta-figure img {
    object-position: center !important;  /* why: center the subject in the band */
  }
  .cta--imagery .cta-figure::after {
    display: none !important;          /* why: remove heavy scrim so person shows */
  }
  /* why: text is now on the page canvas, not the dark photo — restore readable
     colors (the base rule forced them light for the overlay). */
  .cta--imagery .cta-box h2,
  .cta--imagery .cta-box p {
    color: var(--color-text) !important;
  }
  .cta--imagery .cta-box .label {
    color: var(--color-primary) !important;
  }
  .cta--imagery .cta-box > .reveal { position: relative; z-index: 1; }
  .cta--imagery .cta-box .btn {
    width: 100% !important;            /* full-width primary action */
    align-self: stretch !important;
  }

  /* ---- A5. Global mobile hygiene (reassert) ----
     why: belt-and-suspenders — keep horizontal overflow clipped and tap targets
     comfortable even as the layout above changes. (html/body overflow-x:clip is
     set in Round 28 line ~1818; kept intact.) */
  .offering-card a,
  .protocol-card a,
  .goal-filter__chip,
  .cta--imagery .cta-box .btn {
    min-height: 44px;                  /* 44px+ tap targets */
  }

  /* ===== ROUND 29b — QA FIXes ======================================== */

  /* ---- Fix 1. Home hero headline was dark charcoal on a dark atmospheric
     image → unreadable. Force the hero copy LIGHT and strengthen the bottom
     scrim so the lower ~55% of the hero is dark enough for light text. ---- */

  /* why: the atmospheric image is dark; the R25 charcoal text is invisible on
     it. Force all hero copy to a light cream regardless of theme. */
  .hero--imagery .hero-copy .eyebrow,
  .hero--imagery .hero-copy h1,
  .hero--imagery .hero-copy .hero-accent,
  .hero--imagery .hero-copy .lead,
  .hero--imagery .hero-copy .hero-microcopy {
    color: #fffdf7 !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);   /* lift text off the photo */
  }
  /* why: keep the teal script line legible but on-brand — a lighter teal reads
     on the dark scrim; the first (formerly charcoal) line is now cream above. */
  .hero--imagery .hero-copy .hero-accent,
  .hero--imagery .hero-copy .hero-accent__line {
    color: var(--color-gold, #d6b875) !important;
  }
  /* why: microcopy stays readable but a touch softer than the headline */
  .hero--imagery .hero-copy .hero-microcopy { color: rgba(255, 253, 247, 0.86) !important; }
  .hero--imagery .hero-copy .hero-microcopy a { color: var(--color-gold, #d6b875) !important; }
  /* why: the sole CTA must pop on the dark scrim */
  .hero--imagery .hero-actions .btn { box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5); }

  /* why: raise the opaque band so light text always lands on a dark base; the
     page bg is fully opaque at the very bottom for a clean seam into the canvas. */
  .hero--imagery::after {
    background: linear-gradient(to top,
      var(--color-bg) 0%,
      rgba(10, 18, 16, 0.92) 30%,
      rgba(10, 18, 16, 0.55) 55%,
      transparent 78%) !important;
  }

  /* ---- Fix 2. Content cards peeked under the sticky site header, and the
     header was semi-transparent so content bled through behind it. ---- */

  /* why: anchor scrolls / in-page nav clear the sticky header instead of
     tucking the target under it. ALSO add bottom scroll-padding so the last
     offering cards aren't hidden behind the sticky mobile CTA bar when a user
     expands a category or scrolls to the end of a section. */
  html { scroll-padding-top: 72px; scroll-padding-bottom: 96px; }

  /* why: make the sticky header OPAQUE on mobile so cards never show through
     it (the base rule uses an 80% color-mix + blur that let content bleed). */
  .site-header,
  .site-header.is-scrolled {
    background: var(--color-bg) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--color-border) !important;
  }

  /* ---- Fix 3. Sticky bottom CTA bar: semi-transparent bg bled page text
     through, and the two-line layout truncated the button. Make it OPAQUE and
     lock a clean single row (label flex:1 + button) that can't truncate. ---- */
  .mobile-cta-bar {
    background: var(--color-surface) !important;   /* opaque — no bleed-through */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-top: 1px solid var(--color-border) !important;
    /* single row, vertically centered, tall enough for the 48px button + pad */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    min-height: 64px;
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)) !important;
    z-index: 999995 !important;                     /* above all page content */
  }
  /* why: label takes the remaining width and ellipsizes; never pushes the button off */
  .mobile-cta-bar__label { flex: 1 1 auto !important; min-width: 0; }
  /* why: button sizes to its content on the right, full height, never truncated */
  .mobile-cta-bar .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 48px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }

  /* ---- Fix 4. Goal-filter: last pill ("Recovery") clipped at the right edge
     when scrolled to the end. Add trailing scroll padding + a spacer. ---- */
  .goal-filter {
    scroll-padding-right: 2rem;
    padding-right: 2rem !important;    /* reassert trailing inset */
  }
  /* why: a zero-height trailing spacer guarantees breathing room past the last
     pill so it's never flush against (or clipped by) the container edge. */
  .goal-filter::after {
    content: "";
    flex: 0 0 2rem;
    width: 2rem;
    align-self: stretch;
  }
  /* why: a little gap between chips so the last one reads as a complete pill,
     not something cut off mid-edge. */
  .goal-filter__chip {
    margin-right: 0.5rem !important;
  }

  /* ---- Fix 5. Protocols card text (e.g. "Recovery & Performance") sat in
     teal/blue over the busy blurred people-background → hard to read. Give the
     card list a solid-ish surface backdrop so all text sits on calm color. ---- */
  #main .card-grid,
  .card-grid {
    background: color-mix(in oklab, var(--color-surface) 92%, transparent) !important;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden !important;         /* clip row separators to the radius */
    padding: 0 !important;
    box-shadow: var(--shadow-md, 0 14px 34px rgba(0, 0, 0, 0.18));
  }
  /* why: body copy inside protocol cards uses the readable text color (not the
     teal link/accent tone) against the new surface backdrop. */
  #main .card-grid .protocol-card p,
  .card-grid .protocol-card p {
    color: var(--color-text) !important;
  }
  #main .card-grid .protocol-card h3,
  .card-grid .protocol-card h3 {
    color: var(--color-text) !important;
  }
  /* why: last row shouldn't draw a separator against the container's own border */
  #main .card-grid .protocol-card:last-child,
  .card-grid .protocol-card:last-child {
    border-bottom: none !important;
  }

  /* ---- B1. Expandable offerings ("show more") — mobile ---------------- */
  /* why: long treatment lists (4–5 options) get overwhelming on a phone;
     show the first 3 rows, hide the rest behind a full-width toggle. */
  .offerings-grid .offering-card--extra { display: none !important; }
  .offerings-grid--expanded .offering-card--extra { display: block !important; }

  .offerings-grid__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 48px;                    /* why: comfortable 44px+ tap target */
    margin: 0 0 0.25rem;
    padding: 0.85rem 1.25rem;
    background: var(--color-surface);
    color: var(--color-primary);
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    font: 600 var(--text-sm, 0.9rem) / 1.2 var(--font-display, inherit);
    letter-spacing: 0.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .offerings-grid__toggle::after {
    content: "\25BE";                    /* ▾ */
    font-size: 0.9em;
    line-height: 1;
    transition: transform 0.2s ease;
  }
  .offerings-grid--expanded + .offerings-grid__toggle::after {
    transform: rotate(180deg);
  }
  .offerings-grid__toggle:active {
    background: var(--surface-translucent-2, rgba(0, 0, 0, 0.04));
  }

  /* ===== ROUND 29c — hf2 imagery + layout fixes ====================== */

  /* ---- ISSUE 2. TREATMENTS HERO (goals.html) — image FILLs the section ----
     why: on mobile the duo-hero photo was INSET (rounded corners + top/right
     gap) and its bottom ~38% faded to transparent via a CSS mask, leaving an
     odd page-color GAP below the image before the offerings section. Make the
     hf2_treatments_bg texture a true full-bleed COVER fill: kill the inset,
     the radius, and the mask so the hero reads as one solid band, no gap. */
  #main .page-banner--duo .page-banner__photo,
  .page-banner--duo .page-banner__photo {
    inset: 0 !important;                    /* full-bleed — no rounded inset */
    border-radius: 0 !important;
    -webkit-mask-image: none !important;    /* kill bottom fade that made the gap */
    mask-image: none !important;
  }
  .page-banner--duo .page-banner__photo img {
    object-position: center center !important;  /* bokeh texture: center is safe */
  }
  /* why: define the hero height and trim bottom padding so the filled image
     flows straight into the offerings section below with no leftover gap. */
  .page-banner--duo.page-banner--photo {
    min-height: clamp(300px, 62vw, 420px) !important;
    padding-bottom: var(--space-6) !important;
  }
  /* why: the intro <p> was removed (Issue 2) and the bg is now a people-free
     texture, so the headline no longer needs the old 60% face-avoidance clamp
     (rule 28-6) — let it use full width for a cleaner headline. */
  .page-banner--duo .page-banner-grid > div {
    max-width: 100% !important;
  }

  /* ---- ISSUE 3. CATEGORY CARD HEADS — title/pill on top, description below ----
     why: .offerings-group__head is display:flex + row with THREE direct children
     (thumb, <h3>, <p>), so the description <p> sat BESIDE the title instead of
     under it. Switch the head to a vertical COLUMN on mobile so EVERY category
     (Weight Management, Recovery, Longevity, Skin & Aesthetic, Sexual Health)
     reads identically: thumbnail, then title/pill on top, then full-width
     description wrapping below. Consistent across all categories. */
  .offerings-group__head {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: var(--space-2, 0.5rem) !important;
  }
  /* why: allow the title to wrap in the narrow column (base rule forced nowrap) */
  .offerings-group__head > h3 { white-space: normal !important; }
  /* why: description spans the full card width beneath the title */
  .offerings-group__head > p { width: 100% !important; }
  /* ===== END ROUND 29c =============================================== */

  /* ===== END ROUND 29b =============================================== */

  /* ═════════════════════════════════════════════════════════════════════
     ROUND 30 — MOBILE BG/FG CLEANUP (goals.html + shared)  [inside ≤768px]
     ---------------------------------------------------------------------
     WHY: on phones the Treatments page stacks the offerings as an edge-to-edge
     list of (transparent) rows, but the #offerings section still carried the
     tall "trail" photo as a fixed/cover background. Transparent list rows over
     a busy photo = background-vs-foreground collision and poor legibility.
     Trust-and-conversion intent: replace interior section imagery/atmospherics
     with clean, calm solid surfaces so copy + CTAs lead.

     KEEP: the hero image (hf2_treatments_bg.png, handled in ROUND 29c) and any
     bottom-CTA imagery. STRIP (mobile only): the #offerings trail photo, the
     gold glow dividers, and the #pathway-detail aurora blobs.

     DESKTOP UNTOUCHED: every rule below is inside @media (max-width:768px);
     wide viewports keep the richer layered treatment.
     ═════════════════════════════════════════════════════════════════════ */

  /* 1. #offerings — drop the trail background image (both themes) and sit the
        list on a clean page-color surface. */
  #offerings,
  [data-theme="dark"] #offerings {
    background-image: none !important;
    background-color: var(--color-bg) !important;
  }

  /* 2. Remove decorative bands that framed the trail section — the gold glow
        dividers (top/bottom of #offerings) read as leftover chrome once the
        photo is gone. */
  .treatments-glow-divider { display: none !important; }

  /* 3. #pathway-detail — hide the animated teal/gold aurora blobs so the
        pathway copy sits on a clean surface, not a drifting glow. */
  #pathway-detail .how-aurora,
  #pathway-detail .how-aurora__blob { display: none !important; }

  /* 4. Flatten any interior heading glow/shadow on the now-clean surfaces
        (defensive — keeps section titles crisp, never muddy). */
  #offerings .section-title,
  #pathway-detail .section-title,
  #get-started .section-title { text-shadow: none !important; }

  /* 5. Vertical rhythm: even breathing room between the clean interior
        sections (trust through space, not decoration). */
  #offerings,
  #pathway-detail,
  #get-started {
    padding-top: var(--space-7, 2.5rem) !important;
    padding-bottom: var(--space-7, 2.5rem) !important;
  }

  /* ═════════════════════════════════════════════════════════════════════
     ROUND 31 — IMAGE-LED CARDS (MOBILE)  [inside ≤768px]
     ---------------------------------------------------------------------
     WHY: shift the Treatments cards from text-heavy list rows to an
     image-led, Ro-style pattern — each goal CATEGORY becomes a single
     image-dominant card: a large category photo/render on top (~57% of the
     card), then the bold title, ONE short benefit line, and the product
     rows (each still carrying its "Start clinician review" CTA). The
     multi-sentence per-product descriptions and form badges are hidden on
     mobile to cut clutter; the image + one benefit line carry the message.

     HOW THE PER-CATEGORY IMAGE MAP IS WIRED (CSS-only, no HTML change):
     each `.offerings-group` already carries a `data-goal="…"` hook, so we
     paint the category image on `.offerings-group::before` selected by that
     attribute. Product renders for the pharma categories, from-behind
     lifestyle imagery for the outcome categories:
        weight-management     → product_vial_render.png   (GLP-1 render)
        recovery-performance  → card_recovery.png         (coastal run)
        longevity             → card_longevity.png        (mountain hike)
        skin-aesthetic        → card_skin.png             (calm spa)
        sexual-health         → card_sexual.png           (beach walk)
     (No standalone Peptides group exists in this markup — peptides are
     distributed across the categories above — so product_capsules_render.png
     is used on the Protocols page instead, not here.)

     ROUND 30 CLEAN SURFACES PRESERVED: the page/section backgrounds stay
     clean (#offerings bg was already flattened in ROUND 30); imagery here
     lives ONLY inside the card, never behind the page.

     DESKTOP UNTOUCHED: every rule is inside @media (max-width:768px).
     ═════════════════════════════════════════════════════════════════════ */

  /* 31.1 — each goal category = one image-led card (rounded, clean surface,
     overflow hidden so the top image band inherits the rounded top corners) */
  #offerings .offerings-group {
    position: relative;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 24px !important;              /* spec: ~22–28px */
    overflow: hidden !important;                 /* clips image to rounded top */
    box-shadow: var(--shadow-md, 0 6px 24px rgba(0, 0, 0, 0.08)) !important;
    margin: 0 0 var(--space-5, 1.5rem) !important;
    padding: 0 !important;
  }

  /* 31.2 — reserved image band at the top of the card (~57% of card height),
     full-bleed; the per-category background-image is set just below. */
  #offerings .offerings-group::before {
    content: "";
    display: block;
    width: 100%;
    height: 210px;                               /* ~55–60% of the card */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--color-surface-2, #efe7d6);  /* fallback tone */
  }

  /* 31.3 — per-category image map (keyed off the existing data-goal hook) */
  #offerings .offerings-group[data-goal="weight-management"]::before {
    /* ROUND 32 swap: product render → lifestyle image (fit person from behind
       walking a park path) to match the other outcome-led category cards. */
    background-image: url("./revamp/card_weight.png");
  }
  #offerings .offerings-group[data-goal="recovery-performance"]::before {
    background-image: url("./revamp/card_recovery.png");
  }
  #offerings .offerings-group[data-goal="longevity"]::before {
    background-image: url("./revamp/card_longevity.png");
  }
  #offerings .offerings-group[data-goal="skin-aesthetic"]::before {
    background-image: url("./revamp/card_skin.png");
  }
  #offerings .offerings-group[data-goal="sexual-health"]::before {
    background-image: url("./revamp/card_sexual.png");
  }

  /* 31.4 — text area below the image: hide the now-redundant round thumb,
     pad ~18px, promote the title, keep the head <p> as the ONE benefit line.
     (The stacked title-above-description head layout from ROUND 29c stays.) */
  #offerings .offerings-group__thumb { display: none !important; }
  #offerings .offerings-group__head {
    padding: 18px 18px 4px !important;
    background: transparent !important;
  }
  #offerings .offerings-group__head > h3 {
    font-size: 1.15rem !important;               /* spec: ~1.1rem bold title */
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 0.3rem !important;
  }
  #offerings .offerings-group__head > p {
    color: var(--color-text-muted) !important;   /* muted benefit line */
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  /* 31.5 — declutter the product rows inside each card: drop the multi-
     sentence descriptions and the form badges on mobile; keep each row's
     title + its "Start clinician review" CTA (the single primary action). */
  #offerings .offering-card > p,
  #offerings .offering-card .offering-card__top { display: none !important; }
  #offerings .offerings-grid { padding: 0 12px 12px !important; }
  #offerings .offering-card {
    padding-left: 0.5rem !important;
    padding-right: 2rem !important;              /* keep chevron gutter */
  }

  /* 31.6 — compliance stays visible & legible on the clean surface (never
     hidden): the "How offerings work" safety note ~13px with good rhythm. */
  #offerings .safety-note {
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: var(--color-text-muted) !important;
  }

  /* 31.7 — HOME HERO (index.html): trim copy to headline + single CTA for
     Ro-style focus. The hero keeps its from-behind couple image
     (hf2_home_hero.png) and shows only: eyebrow + headline + primary
     "Check Your Eligibility" CTA. Hide the secondary intro paragraph
     (.hero-copy .lead) on mobile so image + headline + one CTA lead.
     COMPLIANCE KEPT: .hero-microcopy carries the "Prescriptions aren't
     guaranteed…" clause, so it stays visible (never hide compliance) —
     just tightened to a small, legible line. */
  .hero--imagery .hero-copy .lead { display: none !important; }
  .hero--imagery .hero-microcopy {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

}
/* ===== END ROUND 29 ================================================== */


/* ===== Expandable offerings ("show more") — desktop / base =========== */
/* why: same progressive-disclosure behavior on wider viewports; extra
   cards stay hidden until the centered pill toggle is activated. */
.offering-card--extra { display: none; }
.offerings-grid--expanded .offering-card--extra { display: block; }

.offerings-grid__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: var(--space-3, 1rem) auto 0;
  padding: 0.7rem 1.5rem;
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font: 600 var(--text-sm, 0.9rem) / 1.2 var(--font-display, inherit);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* why: the toggle is a block-level sibling after the grid — center it */
.offerings-group .offerings-grid__toggle { display: flex; width: max-content; }

.offerings-grid__toggle::after {
  content: "\25BE";                      /* ▾ */
  font-size: 0.9em;
  line-height: 1;
  transition: transform 0.2s ease;
}
.offerings-grid--expanded + .offerings-grid__toggle::after {
  transform: rotate(180deg);
}
.offerings-grid__toggle:hover {
  background: var(--color-surface-2, var(--color-surface));
  border-color: var(--color-primary);
}
.offerings-grid__toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}


/* ===== Lifestyle pull-in imagery (Hims-style) ======================== */
/* why: a single tasteful lifestyle photo per section, full-width with a
   short caption, matching the site's rounded-corner + soft-shadow language. */
.section-pullin {
  margin: var(--space-4, 2rem) 0 0;
}
.section-pullin picture,
.section-pullin img {
  display: block;
  width: 100%;
}
.section-pullin img {
  height: auto;
  max-height: 480px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: var(--shadow-md, 0 12px 32px rgba(0, 0, 0, 0.12));
}
.section-pullin figcaption {
  margin-top: 0.75rem;
  color: var(--color-text-muted, #65716d);
  font-size: var(--text-sm, 0.9rem);
  line-height: 1.4;
  text-align: center;
}

/* why: split variant pairs the image with its caption side-by-side on wide
   viewports; stacks on smaller screens (handled by the mobile rule below). */
@media (min-width: 769px) {
  .section-pullin--split {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
    gap: var(--space-4, 2rem);
  }
  .section-pullin--split img { max-height: 380px; }
  .section-pullin--split figcaption {
    margin-top: 0;
    text-align: left;
    font-size: var(--text-base, 1rem);
  }
}


/* ===== ISSUE 5 — Protocols page section backgrounds — RELOCATED (2026-07-01) =====
   DESKTOP-REGRESSION FIX: the "ISSUE 5" rules that used to live here targeted
   `#main > section:nth-of-type(N)::before/::after`. That selector was assumed to
   be inert off the protocols page ("only renders where proto CSS establishes
   content:\"\""), but that assumption was WRONG: EVERY page uses <main id="main">,
   and on the HOMEPAGE the hero is `#main > section:nth-of-type(1)`, whose ::before
   already has `content:""` from `.hero::before` (styles.css). So this file was
   painting the protocols dark water-ripple PNG (hf2_protocols_hero_bg_v2.png)
   onto the HOMEPAGE hero ::before — the reported dark swirl bleeding up from the
   bottom-left over the hero copy. Divider sections (2/3/4) were likewise at risk
   via `.section-divider::before`.
   These rules are protocols-only, so they now live at the END of
   proto-experiment-continuous.css, which ONLY protocols.html loads. They still
   win over proto's own background rules (later in source + !important + equal
   specificity), so the protocols page is visually unchanged, while every other
   page's `#main > section` pseudo-elements are no longer touched. */