/* EXPERIMENT A — CONTINUOUS EVOLVING BACKGROUND (Protocols page)
   One tall lifestyle image fixed behind the whole page, revealed through the
   sections as you scroll. Heavily faded so all text stays legible. */
#main {
  position: relative;
  isolation: isolate;
}
/* Each section is the positioning context for its own purpose-built image, so a
   person's face always lands in that section's open zone (never sliced by a card
   edge or hidden behind a centered card). Read together they keep the calm,
   continuous editorial scroll. */
#main > section {
  position: relative;
  background: transparent !important;
}
#main > section.section-dark { background: rgba(10,18,16,.0) !important; }

/* Per-section image layer + gentle unifying veil.
   NOTE: several sections carry .section-divider, whose own ::before draws a 1px
   hairline (top:0; height:1px; width:min(...); transform:translateX(-50%);
   background:<line gradient>) and whose ::after draws a warm bloom. We reuse the
   SAME ::before for the image, so we must forcibly reset all of that geometry to
   full-bleed and override its line background. The ::after becomes the unifying
   veil. Positive z-index keeps the layers above the page's opaque body bg
   (negative z-index hid them behind the cream/dark canvas before). */
#main > section::before,
#main > section::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  pointer-events: none !important;
  border-radius: 0 !important;
}
#main > section { z-index: 0; }
#main > section > * { position: relative; z-index: 2; }
#main > section::before {
  z-index: 0 !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: .85 !important;               /* people/faces clearly visible */
}
#main > section::after {
  z-index: 1 !important;
  background: rgba(248,243,234,.12) !important;  /* light unifying tint */
}
/* Light slices — section order (Get-Started section removed): 1 hero · 2 core · 3 combination · 4 cta.
   File names keep their original suffixes: sec1=core, sec3=combination, sec4=cta (sec2/get-started retired). */
#main > section:nth-of-type(1)::before { background-image: url("./proto/cont-light-hero.webp"); }
#main > section:nth-of-type(2)::before { background-image: url("./proto/cont-light-sec1.webp"); }
#main > section:nth-of-type(3)::before { background-image: url("./proto/cont-light-sec3.webp"); }
#main > section:nth-of-type(4)::before { background-image: url("./proto/cont-dark-sec4.webp"); }
/* Continuous-scroll look: the divider hairline + bloom are gone automatically —
   we have repurposed the divider's own ::before (now the full-bleed image) and
   ::after (now the unifying veil), overriding their line/bloom backgrounds. So
   there is intentionally NO display:none here (that previously nuked the image
   pseudo-element on every .section-divider section, leaving them blank). */

/* Frosted-glass cards: image flows THROUGH them so it reads as one background.
   The standalone safety-note paragraph is also boxed here so it stops floating
   illegibly over the imagery. */
#main .protocol-card,
#main .combo-card,
#main .section-aside--boxed,
#main .get-started-card,
#main .safety-note {
  background: rgba(255,253,247,.66) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
          backdrop-filter: blur(8px) saturate(1.05);
  border-color: rgba(199,167,101,.28) !important;
}
/* Give the bare safety-note real card padding + a border so it reads as a panel.
   This note lives inside the dark combination section, so it inherits LIGHT text
   — which is illegible on the light frosted card. Force readable colors per theme. */
#main .safety-note {
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem) !important;
  border: 1px solid rgba(199,167,101,.28) !important;
  border-radius: var(--radius-xl, 16px) !important;
  color: #2a322f !important;
}
#main .safety-note strong { color: #111817 !important; }
[data-theme="dark"] #main .protocol-card,
[data-theme="dark"] #main .combo-card,
[data-theme="dark"] #main .section-aside--boxed,
[data-theme="dark"] #main .get-started-card,
[data-theme="dark"] #main .safety-note {
  background: rgba(18,32,25,.66) !important;
  border-color: rgba(214,184,117,.22) !important;
}
[data-theme="dark"] #main .safety-note {
  border: 1px solid rgba(214,184,117,.22) !important;
  color: #d7cdbc !important;
}

/* ── Core-protocols grid normalization (desktop) ──────────────────────────────
   BUG: styles.css sets the base `.card-grid` to a 3-column track
   (`repeat(3, minmax(0,1fr))`) but also gives the "Metabolic Reset" card
   `.protocol-card.featured { grid-column: span 2; }`. In the 3-col desktop grid
   that made the featured card 2/3 of the row width while its sibling took 1/3,
   so the top row had two UNEQUAL cards, the vertical gutters no longer lined up
   with the 3 equal cards on the bottom row, and the rows had mismatched heights.

   FIX: normalize the featured card back to a single column so all five protocol
   cards share one uniform 3-column grid — equal widths, aligned gutters, and
   (via grid's default `align-items: stretch`) equal heights per row. We keep the
   Featured/Clinician-led badges on the card; only its column SPAN is reset.

   Scope: desktop only (min-width: 1081px). Below 1080px styles.css already
   resets the span to 1 and the layout drops to 2-col / 1-col, so the mobile and
   tablet stacks are intentionally left untouched. This file loads after
   styles.css, and the `#main .card-grid` prefix out-specifies the base rule. */
@media (min-width: 1081px) {
  #main .card-grid .protocol-card.featured {
    grid-column: span 1;
  }
}
[data-theme="dark"] #main .safety-note strong { color: #eee6d8 !important; }

/* Section headings & intro copy sit DIRECTLY over the now-prominent image
   (outside the frosted cards), so give them a soft local scrim + shadow so
   they stay crisp without dimming the surrounding people imagery. */
#main > section > .container-wide > .section-heading,
#main > section > .container-wide > header,
#main > section .section-heading,
#main > section .eyebrow,
#main > section > .container-wide > p {
  position: relative;
}
#main > section .section-heading h2,
#main > section .section-heading p,
#main > section h2.section-title,
#main > section .eyebrow {
  text-shadow: 0 1px 2px rgba(248,243,234,.85), 0 0 14px rgba(248,243,234,.65);
}
[data-theme="dark"] #main > section .section-heading h2,
[data-theme="dark"] #main > section .section-heading p,
[data-theme="dark"] #main > section h2.section-title,
[data-theme="dark"] #main > section .eyebrow {
  text-shadow: 0 1px 2px rgba(8,14,12,.9), 0 0 16px rgba(8,14,12,.7);
}

/* Dark theme: swap in the dark slices + a deeper unifying tint. */
[data-theme="dark"] #main > section::before { opacity: .80 !important; }
[data-theme="dark"] #main > section:nth-of-type(1)::before { background-image: url("./proto/cont-dark-hero.webp"); }
[data-theme="dark"] #main > section:nth-of-type(2)::before { background-image: url("./proto/cont-dark-sec1.webp"); }
[data-theme="dark"] #main > section:nth-of-type(3)::before { background-image: url("./proto/cont-dark-sec3.webp"); }
[data-theme="dark"] #main > section:nth-of-type(4)::before { background-image: url("./proto/cont-dark-sec4.webp"); }
[data-theme="dark"] #main > section::after { background: rgba(10,18,16,.22) !important; }

/* ──────────────────────────────────────────────────────────────────────────
   Round 6 refinements
   ────────────────────────────────────────────────────────────────────────── */

/* Per-section crop anchors so each subject's face lands in an open zone.
   background-position Y tuned per image content. */
#main > section:nth-of-type(2)::before { background-position: 50% 18% !important; }  /* core: man + bowl sits high */
#main > section:nth-of-type(3)::before { background-position: 50% 0% !important; }  /* combination: woman's face is high in the new image — anchor to top so it stays visible above the cards */
#main > section:nth-of-type(4)::before { background-position: 50% 45% !important; }  /* cta: full-body male on right third — anchor so head & feet stay in frame */

/* CTA section is tall enough to show the man's FULL BODY (head to feet). The
   previous short band over-cropped him to a head-and-shoulders zoom. A standing
   body needs vertical room, so min-height gives the figure space while the
   centered frosted card stays legible over the soft left negative space. */
#main > section.cta--centered {
  min-height: 660px !important;
  display: flex !important;
  align-items: center !important;
}
#main > section.cta--centered > .container-wide { width: 100%; }

/* CTA image: the light-mode crop was cutting the man off, while the dark image
   frames his full body perfectly. Per direction, BOTH themes now use the dark
   image; light mode lifts it via a brightness/contrast filter so it reads as a
   warm golden-hour scene on the cream canvas instead of a dark slab. Dark mode
   uses the image as-is (filter: none). */
[data-theme="light"] #main > section:nth-of-type(4)::before {
  filter: brightness(1.55) contrast(0.9) saturate(0.92) !important;
}
[data-theme="dark"] #main > section:nth-of-type(4)::before {
  filter: none !important;
}

/* CTA card (Image 4): frosted + semi-transparent like the other cards, shorter,
   single-column and fully centered (eyebrow, heading, copy, and both buttons). */
#main .cta--centered .cta-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: var(--space-5) !important;
  max-width: 720px !important;
  margin-inline: auto !important;
  padding: var(--space-8) var(--space-8) !important;   /* shorter than the tall default */
  background: rgba(255,253,247,.66) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.05) !important;
          backdrop-filter: blur(8px) saturate(1.05) !important;
  border: 1px solid rgba(199,167,101,.28) !important;
  border-radius: var(--radius-2xl, 24px) !important;
  box-shadow: 0 18px 44px -26px rgba(36,30,16,.38) !important;
  color: #111817 !important;
}
#main .cta--centered .cta-box__copy { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
#main .cta--centered .cta-box h2 { margin: 0 !important; max-width: 22ch; }
#main .cta--centered .cta-box p { margin: 0 !important; }
#main .cta--centered .cta-box .label { color: var(--color-primary) !important; }
#main .cta--centered .cta-box__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
[data-theme="dark"] #main .cta--centered .cta-box {
  background: rgba(18,32,25,.66) !important;
  border-color: rgba(214,184,117,.22) !important;
  color: #eee6d8 !important;
}
[data-theme="dark"] #main .cta--centered .cta-box h2 { color: #eee6d8 !important; }
[data-theme="dark"] #main .cta--centered .cta-box p { color: rgba(238,230,216,.74) !important; }
[data-theme="light"] #main .cta--centered .cta-box h2 { color: #111817 !important; }
[data-theme="light"] #main .cta--centered .cta-box p { color: #3a423f !important; }

/* ──────────────────────────────────────────────────────────────────────────
   Round 7 refinements
   ────────────────────────────────────────────────────────────────────────── */

/* Image 1 — HERO right-side intro text legibility.
   The hero (.page-banner) right column is a bare <p> with no card, so its muted
   gray text floated illegibly over the bright stretching-woman image. Frost the
   heading block AND the intro paragraph the same way the rest of the page's
   panels are frosted, so the copy reads cleanly while the image stays visible. */
#main > section.page-banner .page-banner-grid > div,
#main > section.page-banner .page-banner-grid > p {
  background: rgba(255,253,247,.72) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
          backdrop-filter: blur(8px) saturate(1.05);
  border: 1px solid rgba(199,167,101,.28) !important;
  border-radius: var(--radius-xl, 16px) !important;
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem) !important;
  box-shadow: 0 14px 34px -24px rgba(36,30,16,.34) !important;
}
#main > section.page-banner .page-banner-grid > div .eyebrow,
#main > section.page-banner .page-banner-grid > div h1 {
  text-shadow: none !important;
}
#main > section.page-banner .page-banner-grid > div h1 { color: #111817 !important; }
#main > section.page-banner .page-banner-grid > p {
  color: #2a322f !important;
}
[data-theme="dark"] #main > section.page-banner .page-banner-grid > div,
[data-theme="dark"] #main > section.page-banner .page-banner-grid > p {
  background: rgba(18,32,25,.72) !important;
  border-color: rgba(214,184,117,.22) !important;
}
[data-theme="dark"] #main > section.page-banner .page-banner-grid > div h1 { color: #eee6d8 !important; }
[data-theme="dark"] #main > section.page-banner .page-banner-grid > p { color: #d7cdbc !important; }

/* Image 3 (R7b) — the stretching woman's face was still clipped by the right card.
   Per request: make BOTH hero cards ~20% smaller so they take up less of the band
   and her face stays fully clear. Shrink type + padding to ~80% and cap each card's
   width so the right card no longer reaches up/over her face. Anchor image to top. */
#main > section:nth-of-type(1)::before { background-position: 50% 0% !important; }
#main > section.page-banner .page-banner-grid {
  align-items: start !important;          /* cards hug the top, open space below */
}
/* Make each card physically ~20% smaller WITHOUT transforms (which caused
   overflow): cut padding ~20% and type ~20%, and cap the cards' widths so the
   right intro card no longer reaches over to the woman's face. The right card is
   also pinned to its column's right edge and narrowed so it clears her entirely. */
#main > section.page-banner .page-banner-grid > div,
#main > section.page-banner .page-banner-grid > p {
  padding: 0.95rem 1.15rem !important;    /* ~20% less than 1.25/1.5rem */
}
#main > section.page-banner .page-banner-grid > div h1 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important;  /* ~20% smaller heading */
  line-height: 1.12 !important;
}
#main > section.page-banner .page-banner-grid > div .eyebrow { font-size: .72rem !important; }
#main > section.page-banner .page-banner-grid > p {
  font-size: .92rem !important;           /* ~20% smaller body copy */
  line-height: 1.45 !important;
  width: max-content !important;
  max-width: 30ch !important;             /* narrow so it clears the woman on the right */
  margin-left: auto !important;           /* pin to the column's right edge */
  margin-top: 2.6rem !important;          /* drop it below the woman's face */
}

/* Image 2 — CORE section: photo fills the section; its bottom ~22% is blurred
   and dissolves into a warm PEACH fill that is pulled UP from the
   section-divider glow below. Per direction: blur the bottom of the image and
   move the orange/peach color (from the area below the image) up to the bottom
   of the image so the two blend. ::after becomes a bottom blur strip —
   backdrop-filter blurs the image showing through, and a peach gradient tints it
   and fades to solid peach at the very bottom, flowing into the divider glow +
   next section with no hard edge. */
#main > section:nth-of-type(2)::before {
  -webkit-mask-image: none !important;
          mask-image: none !important;
  opacity: .96 !important;
}
#main > section:nth-of-type(2) {
  background: linear-gradient(to bottom,
      #f7f4eb 0%, #f4ece0 50%, #ecd6b6 80%, #e4c290 100%) !important;
}
[data-theme="dark"] #main > section:nth-of-type(2) {
  background: linear-gradient(to bottom,
      #0b0b08 0%, #15110a 50%, #2c1f0e 80%, #3d2810 100%) !important;
}
#main > section:nth-of-type(2)::after {
  top: auto !important;
  bottom: 0 !important;
  height: 24% !important;
  background: linear-gradient(to bottom,
      rgba(228,194,144,0) 0%,
      rgba(228,194,144,.50) 55%,
      rgba(228,194,144,.92) 100%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.08);
          backdrop-filter: blur(7px) saturate(1.08);
}
[data-theme="dark"] #main > section:nth-of-type(2)::after {
  background: linear-gradient(to bottom,
      rgba(61,40,16,0) 0%,
      rgba(61,40,16,.52) 55%,
      rgba(61,40,16,.92) 100%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.05);
          backdrop-filter: blur(7px) saturate(1.05);
}

/* ──────────────────────────────────────────────────────────────────────────
   Glowing section dividers (Round 8)
   A thin hairline with a soft glow sits at each section boundary (top of
   sections 2, 3, 4) so the image-to-image transitions read as intentional,
   cleanly separated beats instead of abrupt photo edges. Theme-aware:
   warm gold on cream (light) / warm gold on deep green-black (dark). */
#main .proto-glow-divider {
  position: absolute;
  top: 0;
  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),
    0 -1px 6px 0 rgba(248,243,234,.45);
}
[data-theme="dark"] #main .proto-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),
    0 -1px 6px 0 rgba(7,127,115,.30);
}

/* ──────────────────────────────────────────────────────────────────────────
   Round 9 refinements
   ────────────────────────────────────────────────────────────────────────── */

/* Combination-section chips (pill-boxes) were hard to read over the frosted
   dark cards — faint fill + low-alpha text. Lift contrast in both themes:
   more opaque chip surface, brighter/bolder text, a clearer border. Cards stay
   frosted; only the chips gain legibility. */
#main .combo-card .chip {
  font-weight: 800 !important;
  min-height: 34px !important;
  padding: var(--space-2) var(--space-3) !important;
}
[data-theme="light"] #main .combo-card .chip {
  background: rgba(255,253,247,.92) !important;
  border-color: rgba(199,167,101,.45) !important;
  color: #2a322f !important;
}
[data-theme="dark"] #main .combo-card .chip {
  background: rgba(238,230,216,.14) !important;
  border-color: rgba(214,184,117,.40) !important;
  color: rgba(250,244,232,.96) !important;
}

/* Bottom notes row: the "Combinations are framed..." callout (formerly top-
   right of the section-head) now sits at the bottom of the Combination section
   alongside the safety-note, side by side. The aside is the shorter framing
   note; the safety-note is the longer disclaimer. They share a baseline top
   edge and stack on narrow viewports. */
/* Bottom notes (Round 10): previously a flex row with a 40% aside + gap
   space-5, which did NOT match the combo-grid's 2-equal-column track (gap
   space-4) sitting directly above. The two notes therefore drifted out of
   column alignment with the cards. Mirror the combo-grid exactly (two equal
   columns, same gap) so the framing note lines up under the left card column
   and the safety disclaimer lines up under the right card column — right edge
   flush with the cards above it. */
.proto-bottom-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.proto-bottom-notes__aside {
  align-self: start;          /* short framing note hugs the top of its column */
  margin: 0 !important;
}
.proto-bottom-notes__safety {
  margin-top: 0 !important;
}
@media (max-width: 860px) {
  .proto-bottom-notes { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Round 10 refinements
   ────────────────────────────────────────────────────────────────────────── */

/* Label pills (• CORE PROTOCOLS / • COMBINATION PROTOCOLS) sit DIRECTLY over
   the bright section photos with no frosted card behind them, so the default
   10%-teal translucent fill + faint teal border render almost invisibly and
   the badge reads as plain faint text. Give the bare section-head labels an
   opaque, theme-aware badge surface with a solid accent border + soft shadow
   so they stay crisp over any imagery. (The CTA "Start with a goal" label
   lives inside the frosted cta-box, so it is intentionally NOT targeted here —
   it already has its own legible treatment.) */
#main > section .section-head .label {
  background: rgba(255,253,247,.94) !important;
  border: 1px solid rgba(7,119,109,.60) !important;
  color: #076a60 !important;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px -3px rgba(36,30,16,.28);
}
[data-theme="dark"] #main > section .section-head .label {
  background: rgba(18,32,25,.94) !important;
  border: 1px solid rgba(214,184,117,.58) !important;
  color: #57dcc8 !important;
  box-shadow: 0 2px 8px -3px rgba(0,0,0,.45);
}

/* ══════════════════════════════════════════════════════════════════════════
   ROUND 30 — MOBILE BG/FG CLEANUP (protocols.html)  [MOBILE ONLY ≤768px]
   ----------------------------------------------------------------------------
   WHY: on phones the per-section "continuous people/texture" background layers
   (this file's `#main > section::before` images + `::after` veils, plus the
   imagery-integration.css Issue-5 overrides that repaint sections 2 & 3) collide
   with the single-column reflowed content — busy imagery behind text/cards reads
   cluttered and hurts legibility. Trust-and-conversion intent: clean, calm,
   professional surfaces so the eye goes to the copy and the CTA.

   SCOPE: interior sections only — 2 (Core protocols) and 3 (Combination
   protocols). The hero (section 1, molecular lattice) and the bottom CTA
   (section 4, aspirational couple + gradient veil) intentionally KEEP their
   imagery. Everything here is inside @media (max-width:768px), so DESKTOP is
   untouched and keeps its richer layered treatment.

   CASCADE: this file loads AFTER imagery-integration.css, so these rules (same
   `#main > section:nth-of-type()` specificity + !important) win over both this
   file's own base layers and the Issue-5 overrides on mobile.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1. Remove the image + veil pseudo-layers on the two interior sections.
        content:none collapses the pseudo box; display/background belt-and-braces. */
  #main > section:nth-of-type(2)::before,
  #main > section:nth-of-type(2)::after,
  #main > section:nth-of-type(3)::before,
  #main > section:nth-of-type(3)::after,
  [data-theme="dark"] #main > section:nth-of-type(2)::before,
  [data-theme="dark"] #main > section:nth-of-type(2)::after,
  [data-theme="dark"] #main > section:nth-of-type(3)::before,
  [data-theme="dark"] #main > section:nth-of-type(3)::after {
    content: none !important;
    background: none !important;
    display: none !important;
  }

  /* 2. Give those sections a clean solid surface. The (--color-bg / --color-text)
        token pair is theme-aware, so contrast stays correct in BOTH themes:
        light = cream bg + ink text; dark = deep-green bg + light text. This also
        overrides the base `.section-dark` transparent bg so section 3 no longer
        relies on the (now-removed) image to look intentional. */
  #main > section:nth-of-type(2),
  #main > section:nth-of-type(3),
  #main > section.section-dark {
    background: var(--color-bg) !important;
  }

  /* 3. Flatten the heading halo/glow. The cream/ink text-shadow (added so type
        could sit over the busy photos) reads as muddy on a clean surface — e.g.
        "Structured protocol blueprints." Clean type on clean color instead. */
  #main > section:nth-of-type(2) .section-heading h2,
  #main > section:nth-of-type(3) .section-heading h2,
  #main > section:nth-of-type(2) .section-heading p,
  #main > section:nth-of-type(3) .section-heading p,
  #main > section:nth-of-type(2) h2.section-title,
  #main > section:nth-of-type(3) h2.section-title,
  #main > section:nth-of-type(2) .eyebrow,
  #main > section:nth-of-type(3) .eyebrow {
    text-shadow: none !important;
  }

  /* 4. Cards + the compliance note were translucent (.66) so the section image
        could flow THROUGH them. No image now → make them fully opaque surface
        for maximum clarity/trust, and drop the backdrop blur (nothing to blur).
        This keeps the "Educational blueprints — not prescriptions." disclaimer
        (section 3) fully legible on a clean surface. */
  #main > section:nth-of-type(2) .protocol-card,
  #main > section:nth-of-type(2) .combo-card,
  #main > section:nth-of-type(2) .section-aside--boxed,
  #main > section:nth-of-type(3) .protocol-card,
  #main > section:nth-of-type(3) .combo-card,
  #main > section:nth-of-type(3) .section-aside--boxed,
  #main > section:nth-of-type(3) .safety-note {
    background: var(--color-surface) !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }

  /* 5. Vertical rhythm: generous, even breathing room between the now-clean
        sections (trust through space, not decoration). */
  #main > section:nth-of-type(2),
  #main > section:nth-of-type(3) {
    padding-top: var(--space-7, 2.5rem) !important;
    padding-bottom: var(--space-7, 2.5rem) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ROUND 31 — IMAGE-LED PROTOCOL CARDS (MOBILE ONLY ≤768px)
   ----------------------------------------------------------------------------
   WHY: match the Treatments page's Ro-style, image-led direction on Protocols.
   ROUND 30 already stripped the busy per-SECTION background layers and made the
   cards opaque on a clean surface. Here we give each card a small visual accent:
   a thin full-bleed IMAGE STRIP (~130px) across the top of every protocol card
   (section 2) and combination card (section 3). The image only lives on the
   card's top strip — the page/section backgrounds stay the clean cream/dark
   surfaces from ROUND 30 (no busy backgrounds return).

   HOW THE PATHWAY IMAGE MAP IS WIRED: each card now carries a `data-pathway`
   hook (added in protocols.html), so we paint the pathway image on the card's
   `::before` selected by that attribute — the same category imagery used on
   Treatments:
        metabolic  → product_vial_render.png     (GLP-1 render)
        recovery   → card_recovery.png           (coastal run)
        longevity  → card_longevity.png          (mountain hike)
        aesthetic  → card_skin.png               (calm spa)
        sexual     → card_sexual.png             (beach walk)
   Combo cards are keyed to their PRIMARY pathway (e.g. "Metabolic + Recovery"
   → metabolic). product_capsules_render.png is available as a peptides render
   but no card maps to it here.

   This file loads AFTER imagery-integration.css and this ROUND 31 block sits
   after ROUND 30 in source, so at equal specificity + !important it wins.
   DESKTOP UNTOUCHED: everything is inside @media (max-width:768px).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1. Make each card a rounded, clipped container and reserve room at the top
        for the image strip (padding-top clears the absolutely-positioned strip
        so title/benefit/chips flow cleanly below it — no overlap). */
  #main > section:nth-of-type(2) .protocol-card,
  #main > section:nth-of-type(3) .combo-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    padding-top: 150px !important;   /* 130px strip + ~20px breathing room */
  }

  /* 2. The full-bleed image strip itself — spans the card's rounded top edge. */
  #main > section:nth-of-type(2) .protocol-card::before,
  #main > section:nth-of-type(3) .combo-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 130px !important;        /* spec: ~120–140px thin strip */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: var(--color-surface-2, #efe7d6) !important;  /* fallback */
    z-index: 0 !important;
  }

  /* 3. Per-pathway image map (keyed off the data-pathway hook on each card). */
  #main .protocol-card[data-pathway="metabolic"]::before,
  #main .combo-card[data-pathway="metabolic"]::before {
    background-image: url("./revamp/product_vial_render.png") !important;
  }
  #main .protocol-card[data-pathway="recovery"]::before,
  #main .combo-card[data-pathway="recovery"]::before {
    background-image: url("./revamp/card_recovery.png") !important;
  }
  #main .protocol-card[data-pathway="longevity"]::before,
  #main .combo-card[data-pathway="longevity"]::before {
    background-image: url("./revamp/card_longevity.png") !important;
  }
  #main .protocol-card[data-pathway="aesthetic"]::before,
  #main .combo-card[data-pathway="aesthetic"]::before {
    background-image: url("./revamp/card_skin.png") !important;
  }
  #main .protocol-card[data-pathway="sexual"]::before,
  #main .combo-card[data-pathway="sexual"]::before {
    background-image: url("./revamp/card_sexual.png") !important;
  }

  /* 4. Keep the compliance disclaimer fully visible & legible on its clean
        surface (never hidden): "Educational blueprints — not prescriptions." */
  #main > section:nth-of-type(3) .safety-note {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
}

/* ===== ISSUE 5 — Protocols per-section background swaps (RELOCATED 2026-07-01) =====
   These rules were moved here from imagery-integration.css. They MUST stay
   protocols-only: they target `#main > section:nth-of-type(N)::before/::after`,
   which also matches the HOMEPAGE hero + divider sections (every page uses
   <main id="main">). Living in this file — loaded ONLY by protocols.html — keeps
   them off every other page. They still override proto's own per-section
   background/opacity/veil rules above (later in source + !important + equal-or-
   higher specificity), so the protocols page renders exactly as before.
   Paths are unchanged: this file also lives in assets/imagery/, so `./revamp/...`
   resolves to the same assets as it did in imagery-integration.css.
   Section order: 1 hero · 2 core · 3 combination · 4 cta. */

/* Sections 2 (core) + 3 (combinations): swap the busy people photos for the
   subtle dark section texture, and drop opacity so text/cards sit on calm color. */
#main > section:nth-of-type(2)::before,
#main > section:nth-of-type(3)::before,
[data-theme="dark"] #main > section:nth-of-type(2)::before,
[data-theme="dark"] #main > section:nth-of-type(3)::before {
  background-image: url("./revamp/hf2_protocols_section_bg.png") !important;
  opacity: 0.32 !important;              /* subtle — keep interior copy readable */
}

/* Bottom CTA (section 4): swap to the aspirational couple-from-behind at a sunset
   overlook. Slightly more presence than the interior texture since it's a feature
   moment, but still veiled below for the CTA copy/buttons. */
#main > section:nth-of-type(4)::before,
[data-theme="dark"] #main > section:nth-of-type(4)::before {
  background-image: url("./revamp/hf2_protocols_bottom.png") !important;
  background-position: center 30% !important;  /* keep the couple/horizon framed */
  opacity: 0.6 !important;
}

/* Hero (section 1): replace the continuous-people hero layer with the dark
   water-ripple abstract bg (ROUND 32 swap — hf2_protocols_hero_bg_v2.png;
   matches the mobile <picture> swap so the hero reads consistently on every
   breakpoint, not the retired people photo or the old molecular lattice). */
#main > section:nth-of-type(1)::before,
[data-theme="dark"] #main > section:nth-of-type(1)::before {
  background-image: url("./revamp/hf2_protocols_hero_bg_v2.png") !important;
  opacity: 0.9 !important;
}

/* Strengthen the unifying veil (proto's `::after`) so text stays legible over
   the new backgrounds. Light theme: warmer/denser cream; dark: denser ink. */
#main > section:nth-of-type(2)::after,
#main > section:nth-of-type(3)::after {
  background: rgba(248, 243, 234, 0.62) !important;
}
[data-theme="dark"] #main > section:nth-of-type(2)::after,
[data-theme="dark"] #main > section:nth-of-type(3)::after {
  background: rgba(10, 18, 16, 0.62) !important;
}
/* CTA veil: a bottom-up gradient so the couple/horizon shows up top while the
   copy at the base keeps contrast. */
#main > section:nth-of-type(4)::after,
[data-theme="dark"] #main > section:nth-of-type(4)::after {
  background: linear-gradient(to bottom,
    rgba(10, 18, 16, 0.25) 0%,
    rgba(10, 18, 16, 0.55) 60%,
    rgba(10, 18, 16, 0.72) 100%) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Sub-Run E — Protocols hero pill consistency (2026-07-01)
   ───────────────────────────────────────────────────────────────────────────
   The Round 7 frosted-card rule (line ~237) was written when the hero grid
   div still contained an <h1> + intro paragraph. Per Issue 4 UX decision the
   <h1> and .page-banner__intro were removed from protocols.html — the div
   now contains ONLY the .eyebrow pill. That leaves the frosted card
   wrapping a tiny pill and looking disproportionate compared to the
   Treatments (peptides/index.html) hero which shows a bare eyebrow pill.

   Fix: on .page-banner--protocols specifically, neutralize the frosted-card
   treatment and the R7b size-cap padding on the inner grid div so only the
   .eyebrow's own pill styling (from styles.css) shows through. Placed at
   end of file so nothing later can override. Do NOT touch the general rule
   at line ~237 — other pages (index hero, etc.) still need the frosted
   card for legibility over hero photos.

   Desktop-only fix per user rule "don't touch mobile"; the mobile block at
   line 515+ (@media max-width:768px) already handles mobile spacing.
   ═══════════════════════════════════════════════════════════════════════ */
#main > section.page-banner.page-banner--protocols .page-banner-grid > div {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  max-width: none !important;
}
[data-theme="dark"] #main > section.page-banner.page-banner--protocols .page-banner-grid > div {
  background: transparent !important;
  border-color: transparent !important;
}
/* Restore default .eyebrow font-size (var(--text-xs) from styles.css) — the
   R7b block set it to .72rem for the shrunken card layout that no longer
   exists on protocols since the <h1> was removed.                          */
#main > section.page-banner.page-banner--protocols .page-banner-grid > div .eyebrow {
  font-size: var(--text-xs) !important;
}