index.css

/* index.css
 * Extracted from index.html on 2026-05-01.
 * Inline <style> blocks consolidated for caching + readability.
 */

/* ===== Block 1 (from line 92, 446 lines) ===== */
/* ============================================================
   Research view — clean hero + flat category bar
   Apr 29 2026 — replaces the old "Research Hub" header,
   the rotating-pattern hero carousel, and the dropdown filter.
   ============================================================ */
#research-view .articles-hdr{ display: none !important; }
/* #research-view #hero re-enabled 2026-05-03 with Variant 4 redesign */

.rs-hero{
  padding: 18px 24px 28px;
  text-align: center;
  max-width: 1180px;
  margin: 0 auto 0;
  /* Positioning context for the funnel-plot ambient background canvas
     (.rs-hero-bg). Mirrors the .ix-hero pattern on the Index landing. */
  position: relative;
  overflow: hidden;
}
/* Funnel-plot ambient layer for the Research hero — small dot clouds in
   inverted-triangle distributions, the visualization meta-analyses use to
   detect publication bias. Decorative; pointer-events:none so the search
   and category dropdown above remain fully clickable. */
.rs-hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.rs-hero > *:not(.rs-hero-bg){
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce){
  .rs-hero-bg{ display: none; }
}
.rs-hero .eb{
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: #1F7A6B;
  margin-bottom: 18px;
}
.rs-hero h1{
  font-size: clamp(34px, 5.5vw, 56px);
  font-weight: 700; letter-spacing: -1.4px;
  line-height: 1.08; margin: 0 0 14px;
  color: var(--color-text-primary);
}
.rs-hero .lede{
  font-size: 16px; color: var(--color-text-secondary);
  max-width: 600px; margin: 0 auto 28px;
  line-height: 1.55;
}

/* Note: active .rs-search styling lives in the toolbar block further down. */

/* Per-category label colors — apply to the option labels inside the toolbar
   dropdown panel. Layout/positioning of the panel and its options lives in
   the .rs-toolbar / .rs-cat-dd-panel block further down. */
.rs-cat a[data-cat="quickread"] .lbl    { color: #4B7BE5 }
.rs-cat a[data-cat="guide"] .lbl        { color: var(--t2c) }
.rs-cat a[data-cat="breakthrough"] .lbl { color: var(--t1c) }
.rs-cat a[data-cat="kids"] .lbl         { color: var(--color-brand) }
.rs-cat a[data-cat="myth"] .lbl         { color: var(--t3c) }
.rs-cat a[data-cat="safety"] .lbl       { color: var(--t4c) }
.rs-cat-dd-label[data-cat="quickread"]  { color: #4B7BE5 }
.rs-ac-cat[data-cat="quickread"]        { color: #4B7BE5 }

@media (max-width: 600px){
  .rs-hero{ padding: 32px 18px 24px; }
}

/* ============================================================
   Toolbar — category dropdown + search on a single row
   ============================================================ */
/* "Back to main" link at the top of the Research view. Static (not
   sticky) — sits above the hero so it's the first thing users see when
   they land on #research. Small, low-emphasis, brand-coloured. */
.rs-back{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 8px 14px 8px 10px;
  margin: 14px 0 6px;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 999px;
  background: var(--color-background-primary);
  transition: color .15s, border-color .15s, transform .12s;
}
.rs-back:hover{
  color: var(--color-brand);
  border-color: var(--color-brand);
  transform: translateX(-2px);
}
.rs-back svg{flex-shrink: 0; opacity: .8}

.rs-toolbar{
  /* Span the full content width of the parent .articles-section so the
     toolbar (All-241 chip + search bar) aligns with the hero card above
     and the article cards below. The parent already provides the
     centered max-width (1200px) and side padding (1rem). */
  max-width: none;
  margin: 18px 0 22px;
  padding: 8px 0;
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
  /* Sticky: pin to the very top of the viewport. The beta-bar scrolls
     away normally (as it does on every other page); the toolbar covers
     0-to-its-height so article content can't bleed through. */
  position: sticky;
  top: 0;
  z-index: 25;
  background: var(--color-background-secondary);
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.rs-toolbar .rs-search{
  flex: 1;
  min-width: 240px;
  max-width: none;
  margin: 0;
  /* inherits the existing .rs-search rounded-pill styling otherwise */
}
/* Mobile: keep the dropdown and the search on a SINGLE row (per user
   request — search should sit beside the dropdown, not under it). The
   240px min-width above forces the search onto its own row at narrow
   viewports; we override to min-width:0 on mobile so flex-shrink can
   actually do its job. flex-wrap is also locked to nowrap so the row
   never breaks. */
@media (max-width: 700px){
  .rs-toolbar{flex-wrap: nowrap;}
  .rs-toolbar .rs-search{min-width: 0; height: 44px;}
  /* Mobile sticky offset: pin to the very top with safe-area for the
     iPhone notch. */
  .rs-toolbar{top: env(safe-area-inset-top);}
  /* Note: input font-size stays at 16px globally on mobile (iOS-zoom
     prevention rule in styles.css), so we don't override it here. */
}

/* Dropdown trigger (matches search-bar height/treatment) */
.rs-cat-dd{ position: relative; flex-shrink: 0; }
.rs-cat-dd-btn{
  height: 46px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 14px;
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-tertiary);
  border-radius: 12px;
  color: var(--color-text-primary);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.rs-cat-dd-btn:hover{ background: var(--color-background-secondary); }
.rs-cat-dd-btn:focus-visible,
.rs-cat-dd[aria-expanded="true"] .rs-cat-dd-btn,
.rs-cat-dd-btn[aria-expanded="true"]{
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(31,122,107,.12);
}
.rs-cat-dd-label{ letter-spacing: -.005em; }
.rs-cat-dd-count{
  font-size: 11.5px; font-weight: 700;
  color: var(--color-text-secondary);
  background: var(--color-background-secondary);
  padding: 2px 8px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.rs-cat-dd-chv{
  color: var(--color-text-tertiary);
  transition: transform .18s ease;
  margin-left: 2px;
}
.rs-cat-dd-btn[aria-expanded="true"] .rs-cat-dd-chv{ transform: rotate(180deg); }

/* Active-category color tint on the button label + count */
.rs-cat-dd-label[data-cat="guide"]        { color: var(--t2c); }
.rs-cat-dd-label[data-cat="breakthrough"] { color: var(--t1c); }
.rs-cat-dd-label[data-cat="kids"]         { color: var(--color-brand); }
.rs-cat-dd-label[data-cat="myth"]         { color: var(--t3c); }
.rs-cat-dd-label[data-cat="safety"]       { color: var(--t4c); }

/* Panel — overrides the legacy .rs-cat grid into a vertical menu */
.rs-cat.rs-cat-dd-panel{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(15,23,22,.12), 0 4px 10px rgba(15,23,22,.06);
  padding: 6px;
  grid-template-columns: none !important;
  z-index: 60;
}
.rs-cat.rs-cat-dd-panel[hidden]{ display: none; }

/* Each option becomes a horizontal row inside the panel */
.rs-cat.rs-cat-dd-panel a{
  display: flex; flex-direction: row;
  align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
}
.rs-cat.rs-cat-dd-panel a:hover{
  background: var(--color-background-secondary) !important;
}
.rs-cat.rs-cat-dd-panel a.on{
  background: var(--color-background-secondary) !important;
}
/* Kill the "active underline" — selection is shown by background instead */
.rs-cat.rs-cat-dd-panel a.on::after{ display: none; }
.rs-cat.rs-cat-dd-panel .lbl{
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.rs-cat.rs-cat-dd-panel .n{
  font-size: 12px; font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-background-secondary);
  padding: 1px 8px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.rs-cat.rs-cat-dd-panel a:hover .n,
.rs-cat.rs-cat-dd-panel a.on .n{
  background: var(--color-background-primary);
}
/* Per-category color tints stay (they target [data-cat] which is unchanged) */

@media (max-width: 600px){
  /* Mobile: zero side padding too — .articles-section already provides
     16px gutters via its own padding. Adding more here would push the
     toolbar narrower than the cards above and below it. */
  /* Mobile sticky offset already pins to top with safe-area-inset above. */
  .rs-toolbar{ padding: 6px 0; gap: 8px; }
  .rs-cat-dd-btn{ height: 44px; padding: 0 12px; font-size: 13px; }
  .rs-cat.rs-cat-dd-panel{ min-width: 220px; }
}

/* ============================================================
   Index page — clean hero + tier category bar + toolbar
   Apr 29 2026 — replaces the legacy trust hero (hidden below).
   The trust hero content lives on landing.html now.
   ============================================================ */
.legacy-trust-hero{ display: none !important; }

.ix-hero{
  max-width: 1180px;
  margin: 0 auto 0;
  /* Direction A — Tighter Editorial (2026-05-20): top breathing room lifted
     from 14px to 40px so the eyebrow stat-line sits below the nav with
     editorial generosity; bottom padding bumped 4→24 to match the new
     hairline-rule sources block below.
     2026-05-21 — Variant A spacing trimmed back from 96/24/56 → 56/24/40.
     The 96px top was set when the headline was a tight 2 lines; now that
     it's back to 3 lines (taller cluster), 96px above made the empty
     space between the banner and the H1 read as overshoot. 56px gives
     the headline enough room without floating. */
  padding: 56px 24px 40px;
  text-align: center;
  /* Provide a positioning context for the ambient hub & spoke background
     canvas (.ix-hero-bg). overflow:hidden keeps any spokes that drift past
     the edges from creating a horizontal scroll. */
  position: relative;
  overflow: hidden;
}
/* Ambient background animation layer.
   Variant A "3 hubs" — sparse hub-and-spoke graph that gently breathes
   behind the hero copy. Sits at z-index 0; all hero content is lifted to
   z-index 1 so it always renders above the canvas. The canvas is purely
   decorative, hence aria-hidden in the markup and pointer-events:none
   here so it never intercepts clicks on the search input. */
.ix-hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.ix-hero > *:not(.ix-hero-bg){
  position: relative;
  z-index: 1;
}
/* Suppress the ambient layer for users who have requested reduced motion.
   Mobile renders the canvas too — the JS scales hub spacing and spoke
   length proportionally to hero size so it doesn't get cramped. */
@media (prefers-reduced-motion: reduce){
  .ix-hero-bg{ display: none; }
}
.ix-hero .eb{ display: none; }
/* Direction A — Tighter Editorial (2026-05-20):
   gap 8→12, margin-bottom 10→22 (more confident eyebrow separation),
   tracking .14em→.18em on stats. Divider weight thinned, opacity .35→.5
   to read as an editorial slash mark rather than a pipe. */
.ix-hero-stats{
  display: inline-flex; align-items: center; gap: 12px;
  color: #1F7A6B;
  margin-bottom: 22px;
}
.ix-hero-stat{
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.ix-hero-stat-divider{
  font-size: 11px; font-weight: 400; opacity: .5;
}
/* Direction A — Tighter Editorial (2026-05-20):
   headline scale lifted 34→40 floor, 56→64 ceiling; tighter tracking
   (-1.4 → -1.8) and line-height (1.08 → 1.04) gives a more confident
   masthead.
   2026-05-21 — max-width 14ch → 22ch. The markup now breaks after the
   "supplements" span (was after "Know which"), so the first line is
   "Know which supplements" (22 chars including spaces). 14ch wrapped
   that first line into 2 sub-lines on desktop, producing 3 visible
   lines total; 22ch fits the new first line exactly, so the headline
   reads as the intended 2 lines on every viewport. */
.ix-hero h1{
  /* 2026-05-22 — Desktop title is FIXED at 64px across every desktop
     viewport (per user direction "fixed at 64px at all desktop scales,
     only changes sizes on mobile"). Previously this was a clamp that
     scaled with vw — that produced a sub-64px size at narrow-desktop
     widths and looked disproportionate to the carousel beneath.
     The 34px mobile override below the @media (max-width:600px) rule
     is the only sub-64px size now. */
  font-size: 64px;
  font-weight: 700; letter-spacing: -1.8px;
  line-height: 1.04; margin: 0 auto 18px;
  max-width: 22ch;
  color: var(--color-text-primary);
}
/* Direction A: lede 16→17 and measure 600px→56ch for a calmer rag.
   Margin bumps so the search field below has more breathing room. */
.ix-hero p.lede{
  font-size: 17px; color: var(--color-text-secondary);
  max-width: 56ch; margin: 0 auto 28px;
  line-height: 1.55;
}
.ix-sources{
  /* Was 640px when the strip was a wrap-flex of inline logos. The new
     5-col grid needs ~860px; bumping this wrapper to 900px gives it
     room without affecting the rest of the hero centering.

     Direction A — Tighter Editorial (2026-05-20): adds a hairline rule
     above the sources strip so the headline cluster reads as a complete
     editorial unit; the rule replaces a filled-card separator while
     respecting the no-filled-callouts brand rule. */
  max-width: 900px; margin: 32px auto 0;
  padding: 22px 20px 6px;
  border-top: 1px solid var(--color-border-soft, rgba(0,0,0,.06));
}
/* Hide the source-logos block on phones — eats vertical space and pushes
   the actual list below the fold. Logos remain on tablet/desktop. */
@media (max-width: 600px){ .ix-sources{ display: none; } }
/* Direction A — Tighter Editorial (2026-05-20):
   tracking .12em→.22em and size 9→9.5 nudge "Sources from" toward a
   small-caps masthead feel. */
.ix-sources-label{
  font-size: 9.5px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--color-text-tertiary);
  text-align: center; margin-bottom: 16px;
}
/* ============================================================
   Source-logos strip
   ------------------------------------------------------------
   10 source marks rendered as a perfect 5×2 CSS Grid so every cell
   is the same width. Each logo centers within its cell, which gives
   visually-even spacing regardless of how wide each individual SVG is.

   Tone is unified via `filter: brightness(0)` — this forces every
   non-transparent pixel to pure black, neutralizing the original
   colour palettes (WHO blue, NIH red runner, Stanford red, PubMed
   blue) that previously washed out under grayscale().

   Per-logo CSS height overrides compensate for each SVG's internal
   padding so the *visible* glyph size is consistent across all 10
   marks even though the bounding-box heights differ.
   ============================================================ */
.ix-sources-logos{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
  /* Tight spacing per design feedback. 12px column-gap with 800px
     max-width → ~150px per cell, still fits Johns Hopkins (~147px
     wide at 22px height) without compressing. */
  column-gap: 12px;
  row-gap: 14px;
  max-width: 800px;
  margin: 0 auto;
}
.ix-sources-logos img{
  /* Baseline height — overridden per-logo below for visual parity. */
  height: 22px;
  width: auto;
  max-width: 100%;
  /* brightness(0) → pure black silhouette (kills original colour);
     opacity(0.42) → subtle mid-grey tone, lets the headline carry the
     hero rather than the logo strip competing for attention. */
  filter: brightness(0) opacity(0.42);
  transition: filter .15s, opacity .15s;
  object-fit: contain;
  display: block;
}
.ix-sources-logos img:hover{
  filter: brightness(0) opacity(0.72);
}

/* ------------------------------------------------------------
   Per-logo height tuning.
   Heights below were validated by actually rendering each SVG with
   cairosvg and visually comparing — not just guessing from viewBox math.
   ------------------------------------------------------------
   SVG              chosen px   why
   --------------   ---------   ----------------------------------------
   NIH              28          figure-style mark with internal padding
   The Lancet       15          small-caps fills ~95% of viewBox
   Stanford         18          text fills more of viewBox than wordmarks
   Everyone else    22          baseline — Cochrane / Harvard / JHU /
                                NEJM / FDA / PubMed / WHO all render
                                at compatible visible glyph heights
                                here. WHO's emblem + 2-line wordmark
                                fits the same 22px vertical footprint.
   ------------------------------------------------------------ */
.ix-sources-logos img[alt="NIH"]{           height: 28px; }
.ix-sources-logos img[alt="The Lancet"]{    height: 15px; }
.ix-sources-logos img[alt="Stanford"]{      height: 18px; }
/* All others use the 22px baseline. */

/* "View all 51 other sources" — spans all 5 grid columns and sits
   on its own row directly under the logo grid. */
.ix-sources-logos > .ix-sources-more{
  grid-column: 1 / -1;
  margin-top: 4px;
}

/* Mobile: collapse to a 2-column grid so the marks stay legible
   on narrow viewports rather than crushing into 5 tiny columns. */
@media (max-width: 600px){
  .ix-sources-logos{
    grid-template-columns: repeat(2, 1fr);
    column-gap: 14px;
    row-gap: 12px;
    max-width: 340px;
  }
}
.ix-sources-more{
  font-family: inherit; font-size: 12.5px; font-weight: 400; letter-spacing: .01em;
  color: var(--color-text-tertiary);
  border: 0; background: transparent;
  padding: 4px 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; align-self: center;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  transition: color .15s, border-color .15s;
}
.ix-sources-more:hover{
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}
.ix-sources-more-arrow{
  width: 13px; height: 13px;
  flex: 0 0 auto;
  transform: translateY(.5px);
  transition: transform .15s;
}
.ix-sources-more:hover .ix-sources-more-arrow{ transform: translate(2px, .5px); }

/* Sticky search bar */
#ix-sticky-bar{
  position: fixed;
  top: 90px;
  left: 0; right: 0;
  z-index: 14;
  padding: 8px 20px 4px;
  background: var(--color-background-secondary);
  border-bottom: 0.5px solid var(--color-border-tertiary);
  transform: translateY(-110%);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  pointer-events: none;
}
#ix-sticky-bar.visible{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
#ix-sticky-bar[aria-hidden="false"]{ pointer-events: auto; }
.ix-search-sticky{ max-width: 560px; margin: 0 auto; }
/* MOBILE STICKY-SEARCH RULES MOVED to styles.css's mobile-sticky-header
   block (search at top:48px, full-width fixed). The previous rules here
   used top:36px assuming a 36px nav height — stale; the nav is 48px on
   mobile now, and the consolidated block in styles.css owns this. */

/* "Filter by:" inline label — injected by initAllTab() as the first
   child of the .sfbar flex row, mirroring the existing "Sort:" prefix
   on the right side of the same row. Same visual weight, same color
   token, same vertical alignment — so the row reads as a balanced
   "Filter by [pills] … Sort: [chip]" pair. */
.sfbar-filter-by{
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-text-tertiary);
  font-size: 13px; font-weight: 500;
  padding: 0 6px 0 2px;
  white-space: nowrap;
  user-select: none;
  flex: 0 0 auto;
}
.sfbar-filter-by-ico{
  width: 14px; height: 14px;
  color: var(--color-text-tertiary);
  flex: 0 0 auto;
}
@media(max-width: 560px){
  /* On narrow screens the icon is enough — drop the label text to keep
     the pill row from wrapping awkwardly. */
  .sfbar-filter-by{ font-size: 0; padding: 0 2px; gap: 0; }
  .sfbar-filter-by-ico{ width: 16px; height: 16px; }
}

/* Filter/sort sticky bar — DESKTOP ONLY rules here.
   Mobile (≤600px) is handled by the consolidated mobile-sticky-header
   block in styles.css (fixed-position, top:92px under nav+search).
   The previous mobile override here (top:62px) conflicted with the
   consolidated block and was the source of the 14px gap where content
   leaked through. Removed. */
#main-sticky{
  position: sticky;
  top: 90px;
  z-index: 12;
  background: var(--color-background-secondary);
  margin: 0 -1rem;
  padding: 0 1rem;
  width: calc(100% + 2rem);
  box-sizing: border-box;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}

/* Sources modal */
#sources-modal{
  display: none; position: fixed; inset: 0; z-index: 9999;
  align-items: center; justify-content: center;
}
#sources-modal.open{ display: flex; }
.src-modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
}
.src-modal-panel{
  position: relative; z-index: 1;
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-secondary);
  border-radius: 16px;
  width: min(680px, 94vw); max-height: 80vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
.src-modal-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 0.5px solid var(--color-border-tertiary);
  flex-shrink: 0;
}
.src-modal-title{
  font-size: 14px; font-weight: 700; color: var(--color-text-primary);
  letter-spacing: -.01em;
}
.src-modal-sub{
  font-size: 11px; color: var(--color-text-tertiary); margin-top: 2px;
}
.src-modal-close{
  width: 28px; height: 28px; border-radius: 50%;
  border: 0.5px solid var(--color-border-secondary);
  background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--color-text-secondary); line-height: 1;
}
.src-modal-close:hover{ background: var(--color-background-secondary); }
.src-modal-body{
  overflow-y: auto; padding: 16px 20px 20px;
  flex: 1;
}
.src-modal-body .src-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
@media(max-width: 520px){
  .src-modal-body .src-grid{ grid-template-columns: repeat(2, 1fr); }
}
.ix-search{
  max-width: 480px; margin: 0 auto 32px;
  position: relative;
}
/* ix-ac bleed fix (2026-05-13)
   ------------------------------------------------------------------
   The `.ix-hero > *:not(.ix-hero-bg){ z-index:1 }` rule above forces
   both the search form AND the .ix-sources logo strip to z-index:1,
   creating equal-rank stacking contexts. Because .ix-sources is later
   in the DOM, it paints ON TOP of the form's autocomplete dropdown
   even though #ix-ac is set to z-index:30 internally — the dropdown's
   z-index is trapped inside the form's stacking context.

   A plain `.ix-search{ z-index:5 }` rule does NOT win here:
     .ix-hero > *:not(.ix-hero-bg)  → specificity (0,2,0)
     .ix-search                     → specificity (0,1,0)
   so the parent rule's z-index:1 wins on specificity.

   Bump specificity to (0,2,0) by scoping under .ix-hero — same as
   the offending rule, with source order winning the tie. ix-sources
   gets an explicit z-index:1 so the relationship is unambiguous. */
.ix-hero .ix-search{ z-index: 5; }
.ix-hero .ix-sources{ z-index: 1; }
.ix-search input{
  width: 100%; padding: 12px 20px 12px 44px;
  font-family: inherit; font-size: 14px;
  background: var(--color-background-primary);
  border: 1.5px solid var(--color-border-secondary);
  color: var(--color-text-primary); outline: 0;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.ix-search input:focus{
  border-color: var(--color-text-primary);
  box-shadow: 0 4px 24px rgba(0,0,0,.13);
}
.ix-search input::placeholder{
  color: var(--color-text-tertiary);
}
.ix-search .ico{
  position: absolute; left: 18px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--color-text-tertiary); pointer-events: none;
}
.ix-search #ix-ac{
  border-radius: 0 0 16px 16px;
  z-index: 30;
  /* Defensive solidity: re-assert background-color and add a soft
     drop shadow so the dropdown reads as a clearly-opaque surface
     even if a stacking-context surprise lands it close to the
     sources logos below. background-color (not the `background`
     shorthand) is used so any future override using the shorthand
     on .gs-ac doesn't accidentally wipe this. */
  background-color: var(--color-background-primary);
  box-shadow: 0 8px 24px -10px rgba(12, 10, 9, .18),
              0 2px 6px rgba(12, 10, 9, .06);
}
.ix-search .kbd{
  position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; color: var(--color-text-tertiary);
  background: var(--color-background-secondary);
  padding: 2px 7px; border: 0.5px solid var(--color-border-tertiary);
  border-radius: 4px;
  pointer-events: none;
}

.ix-cat-wrap{
  max-width: 1180px;
  margin: 8px auto 24px;
  border-top: 0.5px solid var(--color-border-tertiary);
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.ix-cat{ display: grid; grid-template-columns: repeat(6, 1fr); }
.ix-cat a{
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px; padding: 18px 6px 16px;
  border-left: 0.5px solid var(--color-border-tertiary);
  text-decoration: none; color: inherit;
  cursor: pointer; transition: background .12s;
  position: relative; background: transparent;
}
.ix-cat a:first-child{ border-left: 0; }
.ix-cat a:hover{ background: var(--color-background-primary); }
.ix-cat a.on::after{
  content: ""; position: absolute;
  left: 14%; right: 14%; bottom: -1px;
  height: 2px; background: var(--color-text-primary);
}
.ix-cat .lbl{
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-secondary);
  text-align: center; line-height: 1.2;
  white-space: nowrap;
}
.ix-cat .lbl.t1{ color: var(--t1c); }
.ix-cat .lbl.t2{ color: var(--t2c); }
.ix-cat .lbl.t3{ color: var(--t3c); }
.ix-cat .lbl.t4{ color: var(--t4c); }
.ix-cat .n{
  font-size: 13px; font-weight: 600;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.ix-cat a:hover .lbl{ color: var(--color-text-primary); }

@media (max-width: 900px){
  .ix-cat{ grid-template-columns: repeat(3, 1fr); }
  .ix-cat a{ border-left: 0.5px solid var(--color-border-tertiary); border-top: 0.5px solid var(--color-border-tertiary); }
  .ix-cat a:nth-child(3n+1){ border-left: 0; }
  .ix-cat a:nth-child(-n+3){ border-top: 0; }
}
@media (max-width: 600px){
  .ix-hero{ padding: 20px 18px 10px; }
  .ix-hero p.lede{ margin-bottom: 8px; } /* search form hidden on mobile — reclaim orphan gap */
}

.sfbar-row{display:flex;flex-direction:column;align-items:stretch;gap:4px;}
.sfbar-row .sfbar{flex:1;margin:0;padding:8px 0;min-width:0;}
/* 2026-05-22 — V3 label treatment: "Search supplements by" sits above
   the filter row in brand green with a trailing hairline rule at .35
   opacity. Mirrors the mockup in mockup-search-by-final-v3-green.html.
   Hairline acts as a quiet section divider; the label colour matches
   so they read as one unit. */
.sfbar-label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-brand);
  padding:6px 4px 0;
  /* 2026-05-22 — Cap label width so the trailing hairline ends at the
     right edge of the 3rd button (Symptom), not at the Articles button.
     With 4 equal flex columns + 8px gap, the right edge of button 3 sits
     at calc(75% - 2px) of the row width:
       3 * ((W - 3*8) / 4) + 2*8  =  (3W - 8) / 4  =  0.75W - 2px
     This visually de-couples the "Search supplements by" caption from
     the Articles button (which is a different kind of action). */
  max-width:calc(75% - 2px);
}
.sfbar-label::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--color-brand);
  opacity:.35;
}
@media(max-width:600px){
  /* Mobile: keep the desktop "3 of 4" cap (calc(75% - 2px)) so the hairline
     stops at the right edge of the 3rd button (Symptom) and doesn't run
     into the 4th (Research). The previous max-width:none override assumed
     a 2-col mobile grid that no longer applies — .sfbar is repeat(4, 1fr)
     at every viewport. Override removed 2026-05-24. */
  .sfbar-label{font-size:10px;letter-spacing:.16em;padding:4px 2px 0;}
}
/* Sort chip lives INSIDE .sfbar (injected by initAllTab) so it shares the
   same flex-wrap row as Goal / Age & Sex / Symptom on every viewport.
   margin-left:auto pushes it to the right end of whatever wrap row it lands on. */
.sfbar .sort-chip-wrap{margin-left:auto;}
/* The "Sort:" prefix is rendered in tertiary color inside the chip to
   telegraph its purpose without needing a separate floating label. */
.sort-chip .sort-pre{color:var(--color-text-tertiary);margin-right:2px;}
.sort-chip .sort-lbl{color:var(--color-text-primary);}
@media(max-width:560px){
  /* Style D block buttons: each .cdd fills an equal share of the row */
  .sfbar .cdd{flex:1 1 0;min-width:0;}
  .sfbar .cdd-btn{flex:none;width:100%;}
}
@media(max-width:380px){
  .sfbar .cdd-btn{padding:8px 4px !important;font-size:10px;}
  .sfbar .cdd-lbl{font-size:10px;}
}
/* Anchor the sort menu to the right edge so it doesn't overflow the viewport
   when the chip sits at the right of the row */
#sort-dd-menu{left:auto;right:0;}
.ix-toolbar{
  max-width: 1180px;
  margin: 0 auto 14px;
  padding: 0 24px;
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: var(--color-text-tertiary);
}
.ix-toolbar .left b{ color: var(--color-text-primary); font-weight: 600; }
.ix-toolbar .right{ display: flex; align-items: center; gap: 8px; }
.ix-toolbar select{
  border: 0; background: transparent; font-family: inherit;
  font-size: 12px; color: var(--color-text-primary);
  font-weight: 600; cursor: pointer;
}

/* ============================================================
   Articles search — typeahead between category bar and list
   ============================================================ */
.rs-search-wrap{
  max-width:1180px;margin:18px auto 22px;padding:0 24px;
}
.rs-search{
  position:relative;
  background:var(--color-background-primary);
  border:1px solid var(--color-border-tertiary);
  border-radius:12px;
  display:flex;align-items:center;gap:10px;
  padding:0 14px;height:46px;
  transition:border-color .15s,box-shadow .15s;
}
.rs-search:focus-within{
  border-color:var(--color-brand);
  box-shadow:0 0 0 3px rgba(31,122,107,.12);
}
.rs-search-ico{color:var(--color-text-tertiary);flex-shrink:0}
.rs-search:focus-within .rs-search-ico{color:var(--color-brand)}
#rs-search-input{
  flex:1;border:0;outline:0;background:transparent;
  font-family:inherit;font-size:14px;color:var(--color-text-primary);
  font-weight:500;letter-spacing:0;height:100%;
  padding:0;min-width:0;
  -webkit-appearance:none;appearance:none;
}
#rs-search-input::placeholder{color:var(--color-text-tertiary);font-weight:500}
#rs-search-input::-webkit-search-cancel-button{display:none}

/* Typeahead dropdown */
.rs-search-ac{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--color-background-primary);
  border:1px solid var(--color-border-secondary);
  border-radius:12px;
  box-shadow:0 12px 36px rgba(15,23,22,.12),0 4px 10px rgba(15,23,22,.06);
  max-height:420px;overflow-y:auto;z-index:60;
  padding:6px;
}
.rs-search-ac[hidden]{display:none}
.rs-ac-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 12px;border-radius:8px;cursor:pointer;
  text-decoration:none;color:inherit;
  transition:background .12s;
}
.rs-ac-item:hover,
.rs-ac-item.active{background:var(--color-background-secondary)}
.rs-ac-cat{
  font-family:'Mona Sans',var(--font-display,inherit);
  font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  flex-shrink:0;width:88px;padding-top:3px;
}
.rs-ac-cat[data-cat="guide"]{color:var(--t2c,#5b6cad)}
.rs-ac-cat[data-cat="breakthrough"]{color:var(--t1c,#1F7A6B)}
.rs-ac-cat[data-cat="myth"]{color:var(--gold,#C99A3F)}
.rs-ac-cat[data-cat="safety"]{color:var(--red,#B14F3D)}
.rs-ac-cat[data-cat="kids"]{color:var(--color-brand)}
.rs-ac-body{flex:1;min-width:0}
.rs-ac-title{
  font-size:13.5px;font-weight:600;line-height:1.35;color:var(--color-text-primary);
  letter-spacing:-0.005em;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.rs-ac-title mark{
  background:rgba(31,122,107,.16);color:var(--color-brand);font-weight:700;border-radius:3px;padding:0 2px;
}
.rs-ac-meta{font-size:11px;color:var(--color-text-tertiary);margin-top:3px;font-weight:500}
.rs-ac-empty{
  padding:18px 14px;font-size:13px;color:var(--color-text-tertiary);text-align:center;
}
@media(max-width:680px){
  .rs-search-wrap{padding:0 16px;margin:14px auto 18px}
  .rs-ac-cat{width:auto;font-size:9px;padding-right:10px}
  .rs-ac-title{font-size:13px}
}

/* ===== Block 2 (from line 1080, 76 lines) ===== */
/* ============================================================
   About — uses shared design tokens from styles.css
   ============================================================ */
/* About hero — centered to match the Index page hero. The eyebrow, h1,
   lede paragraph, and 4-stat row all center-align so navigating between
   tabs feels visually consistent (Index → About no longer reads as a
   layout-shift). */
.abt-hero{max-width:1180px;margin:0 auto;padding:32px 24px 28px;border-bottom:0.5px solid var(--color-border-tertiary);text-align:center}
.abt-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-brand);display:block;margin-bottom:14px}
.abt-hero h1{font-size:clamp(30px,5vw,50px);font-weight:700;letter-spacing:-1.4px;line-height:1.08;margin:0 0 14px;color:var(--color-text-primary)}
.abt-hero .lede{font-size:15px;color:var(--color-text-secondary);max-width:680px;line-height:1.65;margin:0 auto 28px}
.abt-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:0.5px solid var(--color-border-tertiary);padding-top:22px;text-align:center}
.abt-stat{padding:0 16px;border-right:0.5px solid var(--color-border-tertiary)}
.abt-stat:last-child{border-right:0;padding-right:0}
.abt-stat .num{font-size:34px;font-weight:700;letter-spacing:-1.5px;line-height:1;color:var(--color-brand);font-variant-numeric:tabular-nums}
.abt-stat .lbl{font-size:12px;color:var(--color-text-secondary);margin-top:5px}
@media(max-width:820px){.abt-hero{padding:24px 18px 20px}.abt-hero h1{font-size:28px}.abt-stats{grid-template-columns:repeat(2,1fr);gap:18px 0}.abt-stat{padding:0 0 18px;border-right:0;border-bottom:0.5px solid var(--color-border-tertiary)}.abt-stat:nth-child(3),.abt-stat:nth-child(4){border-bottom:0;padding-bottom:0}}
.abt-sec{max-width:1180px;margin:0 auto;padding:40px 24px;border-bottom:0.5px solid var(--color-border-tertiary)}
.abt-sec h2{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.8px;line-height:1.1;margin:0 0 6px;color:var(--color-text-primary)}
.abt-sec-sub{font-size:14px;color:var(--color-text-secondary);margin:0 0 20px;line-height:1.5}
@media(max-width:600px){.abt-sec{padding:28px 18px}}
.abt-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.abt-tier{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:14px;padding:18px;border-top-width:2px;border-top-style:solid}
.abt-tier.t1{border-top-color:var(--t1c)}.abt-tier.t2{border-top-color:var(--t2c)}.abt-tier.t3{border-top-color:var(--t3c)}.abt-tier.t4{border-top-color:var(--t4c)}
.abt-tier .tn{font-size:10.5px;font-weight:800;letter-spacing:.1em;margin-bottom:10px}
.abt-tier.t1 .tn{color:var(--t1c)}.abt-tier.t2 .tn{color:var(--t2c)}.abt-tier.t3 .tn{color:var(--t3c)}.abt-tier.t4 .tn{color:var(--t4c)}
.abt-tier .tname{font-size:14px;font-weight:700;color:var(--color-text-primary);margin-bottom:8px;letter-spacing:-.2px}
.abt-tier .tdesc{font-size:12.5px;color:var(--color-text-secondary);line-height:1.55}
.abt-tier .tpill{display:inline-block;font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;margin-top:12px;letter-spacing:.03em}
.abt-tier.t1 .tpill{background:var(--t1bg);color:var(--t1tx)}.abt-tier.t2 .tpill{background:var(--t2bg);color:var(--t2tx)}.abt-tier.t3 .tpill{background:var(--t3bg);color:var(--t3tx)}.abt-tier.t4 .tpill{background:var(--t4bg);color:var(--t4tx)}
@media(max-width:820px){.abt-tiers{grid-template-columns:repeat(2,1fr)}}
.abt-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.abt-step{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:14px;padding:18px}
.abt-step .sicon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:12px}
.abt-step .sn{font-size:10px;font-weight:800;color:var(--color-text-tertiary);letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}
.abt-step .st{font-size:14px;font-weight:700;color:var(--color-text-primary);letter-spacing:-.2px;margin-bottom:8px}
.abt-step .sstatus{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.03em;margin-bottom:10px}
.abt-step .sstatus.done{background:var(--t1bg);color:var(--t1tx)}.abt-step .sstatus.plan{background:var(--t3bg);color:var(--t3tx)}
.abt-step .sd{font-size:12.5px;color:var(--color-text-secondary);line-height:1.55}
@media(max-width:820px){.abt-steps{grid-template-columns:repeat(2,1fr)}}
.abt-road{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.abt-road-card{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:14px;padding:20px}
.abt-road-num{font-size:26px;font-weight:700;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums;margin-bottom:10px;color:var(--color-text-tertiary)}
.abt-road-card.s1 .abt-road-num{color:var(--t1c)}.abt-road-card.s2 .abt-road-num{color:var(--t2c)}.abt-road-card.s3 .abt-road-num{color:var(--t3c)}
.abt-road-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-bottom:12px}
.abt-road-card.s1 .abt-road-badge{background:var(--t1bg);color:var(--t1tx)}.abt-road-card.s2 .abt-road-badge{background:var(--t2bg);color:var(--t2tx)}.abt-road-card.s3 .abt-road-badge{background:var(--t3bg);color:var(--t3tx)}.abt-road-card.s4 .abt-road-badge{background:var(--color-background-secondary);color:var(--color-text-tertiary)}
.abt-road-title{font-size:14px;font-weight:700;color:var(--color-text-primary);letter-spacing:-.2px;margin-bottom:8px;line-height:1.3}
.abt-road-desc{font-size:12.5px;color:var(--color-text-secondary);line-height:1.6}
@media(max-width:820px){.abt-road{grid-template-columns:repeat(2,1fr)}}
.abt-sec .src-cat-grid{grid-template-columns:repeat(3,1fr);gap:4px 20px}
.abt-sec .src-cat-grid .src-il{width:20px;height:20px;opacity:.5}
@media(max-width:820px){.abt-sec .src-cat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.abt-sec .src-cat-grid{grid-template-columns:1fr}}
.abt-mission{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start;max-width:1180px;margin:0 auto;padding:40px 24px}
.abt-mission-text h2{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.8px;margin:0 0 14px;color:var(--color-text-primary)}
.abt-mission-text p{font-size:13.5px;line-height:1.65;color:var(--color-text-secondary);margin:0 0 10px}
.abt-mission-text p:last-child{margin-bottom:0}
.abt-mission-text p b{color:var(--color-text-primary)}
.abt-pullstat{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:14px;padding:20px 22px;margin-bottom:10px}
.abt-pullstat .pn{font-size:38px;font-weight:700;letter-spacing:-2px;line-height:1;color:var(--color-brand);font-variant-numeric:tabular-nums;margin-bottom:5px}
.abt-pullstat .pl{font-size:12.5px;color:var(--color-text-secondary);line-height:1.5}
.abt-values{list-style:none;padding:0;margin:0;background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:14px;overflow:hidden}
.abt-value-item{display:flex;gap:12px;padding:13px 18px;border-bottom:0.5px solid var(--color-border-tertiary);align-items:center}
.abt-value-item:last-child{border-bottom:0}
.abt-value-icon{width:30px;height:30px;border-radius:8px;background:color-mix(in srgb,var(--color-brand) 10%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-brand)}
.abt-value-title{font-size:13px;font-weight:700;color:var(--color-text-primary);margin-bottom:2px}
.abt-value-desc{font-size:12px;color:var(--color-text-secondary);line-height:1.5}
@media(max-width:820px){.abt-mission{grid-template-columns:1fr;gap:20px;padding:28px 18px}}
.abt-disc{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-left:3px solid var(--t4c);border-radius:14px;padding:22px 26px}
.abt-disc-head{display:flex;align-items:flex-start;gap:14px;padding-bottom:16px;margin-bottom:16px;border-bottom:0.5px solid var(--color-border-tertiary)}
.abt-disc-icon{width:32px;height:32px;border-radius:8px;background:var(--t4bg);color:var(--t4tx);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.abt-disc-kicker{font-size:10px;font-weight:800;color:var(--t4c);letter-spacing:.15em;text-transform:uppercase;margin-bottom:3px}
.abt-disc h3{font-size:16px;font-weight:700;color:var(--color-text-primary);margin:0;letter-spacing:-.2px}
.abt-disc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 28px}
.abt-disc-item{position:relative;padding-left:16px;font-size:12.5px;line-height:1.6;color:var(--color-text-secondary)}
.abt-disc-item::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--t4c)}
.abt-disc-item b{color:var(--color-text-primary);font-weight:700}
.abt-disc-item.full{grid-column:1/-1;padding:12px 16px;background:var(--t4bg);border-radius:8px}
.abt-disc-item.full::before{top:19px;left:6px}
@media(max-width:820px){.abt-disc-grid{grid-template-columns:1fr}.abt-disc{padding:18px 20px}}

/* ===== Block 3 (from line 1412, 20 lines) ===== */
  .disc-c-wrap{max-width:1180px;margin:0 auto 24px;padding:0 24px}
  @media(max-width:600px){.disc-c-wrap{padding:0 18px}}
  .disc-c-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
  .disc-c-icon-box{width:40px;height:40px;border-radius:10px;background:#B91C1C;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 10px rgba(185,28,28,.25)}
  .disc-c-icon-box svg{color:#fff}
  .disc-c-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#B91C1C;margin-bottom:3px}
  .disc-c-headline{font-size:16px;font-weight:800;color:var(--color-text-primary);line-height:1.2}
  .disc-c-divider{height:1px;background:rgba(185,28,28,.15);margin-bottom:14px}
  .disc-c-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
  .disc-c-card{background:var(--color-background-primary);border:1px solid var(--color-border-tertiary);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:8px}
  .disc-c-card-icon{width:28px;height:28px;border-radius:7px;background:rgba(185,28,28,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .disc-c-card-icon svg{color:#B91C1C}
  .disc-c-card-title{font-size:11px;font-weight:700;color:var(--color-text-primary);line-height:1.3}
  .disc-c-card-text{font-size:10.5px;color:var(--color-text-secondary);line-height:1.55}
  .disc-c-card-text b{color:var(--color-text-primary);font-weight:700}
  .disc-c-footer{background:rgba(185,28,28,.05);border:1px solid rgba(185,28,28,.15);border-radius:10px;padding:12px 16px;display:flex;align-items:flex-start;gap:10px;font-size:12px;color:var(--color-text-secondary);line-height:1.6}
  .disc-c-footer-icon{width:24px;height:24px;border-radius:6px;background:#B91C1C;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
  .disc-c-footer-icon svg{color:#fff}
  .disc-c-footer b{color:var(--color-text-primary)}
  @media(max-width:640px){.disc-c-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:400px){.disc-c-grid{grid-template-columns:1fr}}

/* ===== Block 4 (from line 5643, 22 lines) ===== */
    .rc-chart{margin:1.9rem 0;background:linear-gradient(135deg,#fafafa 0%,#f9f5ff 100%);border:1px solid #e9e5f2;border-radius:14px;padding:20px 22px 18px 26px;position:relative;overflow:hidden}
    .rc-chart::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#1F7A6B 0%,#B91C1C 100%)}
    .rc-chart-k{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#1F7A6B;margin-bottom:4px;display:flex;align-items:center;gap:7px}
    .rc-chart-k::before{content:"";width:6px;height:6px;border-radius:50%;background:#1F7A6B}
    .rc-chart-title{font-size:1rem;font-weight:700;color:#1E1B4B;margin:0 0 14px;line-height:1.3;letter-spacing:-.01em}
    .rc-chart-row{display:grid;grid-template-columns:155px 1fr 58px;gap:12px;align-items:center;margin-bottom:9px}
    .rc-chart-row:last-of-type{margin-bottom:0}
    .rc-chart-label{font-size:.82rem;color:#374151;font-weight:600;line-height:1.25}
    .rc-chart-label small{display:block;font-size:.7rem;color:#6b7280;font-weight:500;margin-top:1px}
    .rc-chart-bar{position:relative;height:24px;background:#eeebf2;border-radius:6px;overflow:hidden}
    .rc-chart-fill{position:absolute;left:0;top:0;bottom:0;border-radius:6px;min-width:4px;transition:width .6s cubic-bezier(.4,0,.2,1)}
    .rc-chart-fill.hi{background:linear-gradient(90deg,#0D9488 0%,#14b8a6 100%)}
    .rc-chart-fill.mid{background:linear-gradient(90deg,#CA8A04 0%,#eab308 100%)}
    .rc-chart-fill.lo{background:linear-gradient(90deg,#B91C1C 0%,#ef4444 100%)}
    .rc-chart-fill.neu{background:linear-gradient(90deg,#6366f1 0%,#818cf8 100%)}
    .rc-chart-fill.grey{background:linear-gradient(90deg,#6b7280 0%,#9ca3af 100%)}
    .rc-chart-val{font-size:.82rem;font-weight:800;color:#1E1B4B;text-align:right;font-variant-numeric:tabular-nums}
    .rc-chart-foot{font-size:.72rem;color:#6b7280;margin-top:13px;padding-top:11px;border-top:1px dashed #e5e7eb;line-height:1.45;font-style:italic}
    .rc-chart-legend{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap}
    .rc-chart-leg{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;color:#4b5563;font-weight:600}
    .rc-chart-leg .sw{width:10px;height:10px;border-radius:3px}
    @media(max-width:560px){.rc-chart-row{grid-template-columns:100px 1fr 48px;gap:8px}.rc-chart-label{font-size:.76rem}.rc-chart-label small{font-size:.66rem}}

/* ============================================================
   2026-05-21 — Index + Research merge follow-up fixes.

   This block is intentionally at the bottom of index.css so it
   wins on cascade order over the older rules above. All changes
   below are scoped to the post-merge Index layout (no nav row,
   search + filter pills sticky-together, 1024px max-width).
   ============================================================ */

/* (a) Page width: cap the whole Index at 1024px. The hero
       headline, search, rotating-article hero, filter pill row,
       and supplements list all live under #supplements-view, so
       constraining that container is enough. Footer + green
       banner stay full-width. */
#supplements-view{
  max-width: 1024px;
  margin: 0 auto;
}

/* The .ix-hero already centers its inner content; explicit
   max-width prevents any descendant from breaking out wider. */
.ix-hero{ max-width: 1024px; margin: 0 auto; }

/* The rotating-article hero and the sticky filter bar are
   siblings of .ix-hero inside #supplements-view, so they
   inherit the cap automatically. */

/* ---------- Consolidated sticky panel: search + filter pills as ONE ---------- */

/* The legacy #ix-sticky-bar (position:fixed at top:38) and #main-sticky
   (position:sticky lower in the page) used to be two separate panels with
   a band of supplement-list content visible between them. Now both live
   inside #main-sticky as siblings, so there's no inter-panel gap by
   construction. Both backgrounds match the page background — no "white
   box" effect behind the pills. */
#ix-sticky-bar{ display: none !important; }   /* empty placeholder; legacy queries no-op */

/* 2026-05-23 — Sticky panel card treatment removed but background kept
   OPAQUE (matches the page body, which uses --color-background-secondary).
   - Earlier same-day attempt used `background: transparent` to make the
     panel blend in. That caused scrolled supplement-list content to bleed
     visibly THROUGH the panel — exactly what a sticky bar must prevent.
   - The "card" look users were seeing was actually from the box-shadow +
     border-bottom, NOT the background (which already matched the page).
     So we keep the matched cream background and drop only the shadow +
     hairline, which is what actually created the floating-card effect.

   2026-05-22 — Sticky panel reshaped: top:0 (was 32px), z-index:80 so the
   panel fully covers the site-nav when stuck. Beta-bar offsets retired. */
#main-sticky.sticky-bar{
  position: sticky;
  top: 0;
  z-index: 80;                                /* above site-nav (15), above hero */
  background: var(--color-background-secondary, #ebe5d9) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 12px 1rem 12px;
  margin: 0 -1rem 0;
  width: calc(100% + 2rem);
}
/* 2026-05-22 — Desktop in-panel search.
   Previously hidden site-wide; now revealed once the user scrolls past the
   hero (same gating as the mobile version below — body.hero-search-gone is
   toggled by the IntersectionObserver in index.js). The search field shares
   the .ix-search base styling (rounded pill, soft shadow, autocomplete
   anchored to #ix-sticky-ac). Autocomplete logic is attached in index.js
   Block 6 alongside the hero search. */
#main-sticky .sticky-bar-search{ display: none; }
/* 2026-05-22 — Search-bar wrapper widened 720→1024 so its left/right
   edges line up with the .sfbar-row directly beneath it (which is
   constrained to max-width:1024px). Previously the pill search sat
   centered in a 720px area inside a 1024px panel, leaving ~152px of
   empty space to the left of the input — visually misaligned from the
   "Search supplements by" label below. */
body.hero-search-gone #main-sticky .sticky-bar-search{
  display: block;
  max-width: 1024px;
  margin: 0 auto 10px;
}
body.hero-search-gone #main-sticky .sticky-bar-search .ix-search-sticky{
  max-width: 1024px;
  margin: 0 auto;
}
/* Inputs inside the sticky-bar-search inherit the .ix-search input rules
   (rounded pill, 12px vertical padding). Override the box-shadow to be a
   touch lighter so it doesn't compete with the panel's own bottom shadow. */
#main-sticky .sticky-bar-search .ix-search input{
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
#main-sticky .sticky-bar-search .ix-search input:focus{
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
#main-sticky .sfbar-row{
  max-width: 1024px;
  margin: 0 auto;
}

/* Autocomplete dropdown inside the sticky bar must float over everything
   below — supplements list, filter pills, etc. */
#ix-sticky-ac{ z-index: 60 !important; }

/* ---------- z-index ladder for the Index landing ----------
   Designed top-down so each layer's relationships are explicit:

    100  .gs-ac autocomplete  hero search dropdown (above EVERYTHING below)
     90  .beta-bar         green status banner — always on top of chrome
     80  #main-sticky      sticky filter pills (under banner; under dropdown)
     50  .ix-search        the hero search container
     40  .ix-hero          headline + lede + search wrapper
      2  #hero             rotating-article carousel
      0  .ix-hero-bg       (hidden anyway)

   2026-05-25 — dropdown raised 60 → 100 so it sits above #main-sticky's
   filter pills. Previously the hero dropdown extended down past the hero
   and was occluded by the "Goal / Age & Sex / Symptom / Research" pills.
   The fix prioritizes the rule that a SEARCH DROPDOWN must always cover
   chrome below it, even if that chrome is a sticky bar.

   Earlier this was tangled — the banner sat at z=20 which is BELOW
   the .ix-hero stacking context I introduced (z=40) to keep the
   autocomplete above the carousel. Result: the headline visibly
   bled OVER the banner when scrolling. Banner now wins.

   .ix-hero needs overflow:visible too so its absolutely-positioned
   autocomplete dropdown isn't clipped at the hero's bottom edge. */
.beta-bar{ z-index: 90 !important; }
.ix-hero{
  position: relative;
  z-index: 40;
  overflow: visible;
}
.ix-search{ position: relative; z-index: 50; }
#ix-hero-form{ position: relative; z-index: 50; }
.gs-ac,
#ix-ac,
#ix-sticky-ac{
  /* 2026-05-25 — bumped 60 → 100 so the dropdown overlays the sticky filter
     pills bar (#main-sticky at z:80). Previously the hero dropdown would
     extend down past the hero and disappear behind the "Goal / Age & Sex /
     Symptom / Research" pills as a user typed in the search. A dropdown
     should always sit above chrome below it. */
  z-index: 100 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  background: var(--color-background-primary);
}
#hero{ position: relative; z-index: 2; }

/* ---------- Active filter pill: darker teal fill, no outer ring ---------- */

/* Earlier I gave the active pill a white-on-teal outer ring to make it
   stand out. The ring read as a "box around the buttons" against the
   cream page background. Simpler treatment: darker teal fill + a slim
   inner highlight at the top of the pill, no outline. */
.cdd-btn.on{
  background: var(--color-brand-dark, #155A4E) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important;
  position: relative;
}
.cdd-btn.on .cdd-ico{ stroke-width: 2.1; }
.cdd-btn.on .cdd-lbl{ font-weight: 700; }

/* ---------- Article cards rendered inside #s-content (via _artPick) ---------- */

/* Override the .scards grid CSS that #s-content normally uses
   for supplement cards — when we render articles into the same
   container we want a single column of cards, not a grid. */
.art-pill-list{
  display: block;
}
.art-pill-list .article-card{
  margin-bottom: 12px;
}

/* ---------- Hero background animation: disabled site-wide ---------- */

/* The decorative .ix-hero-bg canvas (hub-spoke graph) and .gate-bg helix
   were too busy behind the headline copy. Hiding entirely also saves the
   requestAnimationFrame loop's CPU on long sessions. */
.ix-hero-bg,
#profile-gate .gate-bg{
  display: none !important;
}

/* ---------- Mobile: ONE search bar only (the hero one), sticky pills below ---------- */

@media(max-width: 600px){
  /* 2026-05-21 — Mobile spacing pass v2. Earlier pass left the headline
     and stats too tall on a 390px viewport — page was loose, the rotating
     hero pushed below the fold needlessly. Tightened across the board:
       * hero outer padding  18 → 14
       * h1                  36 → 28
       * lede                14 → 13
       * stats vertical gap  6  → 2 (and font 11 → 10)
       * margins between hero blocks   16 → 10 */
  /* Banner is fixed:22px on mobile but body padding-top was 70 (legacy for
     the now-hidden nav row). That left a 48 px void above the stats. Pin
     body padding-top to the banner height + small breathing room. */
  body.tab-supplements,
  html.tab-supplements body{ padding-top: 30px !important; }

  /* 2026-05-21 — Mobile hero padding trimmed from 48/16/28 → 32/16/24,
     matching the desktop pullback (96→56). The 3-line H1 fills more
     vertical space than the earlier 2-line shape, so less top padding
     is needed to clear the de-greened banner above. */
  .ix-hero{ padding: 32px 16px 24px !important; }
  /* 2026-05-21 — h1 + lede compression pass. Earlier mobile rule inherited
     `max-width:14ch` from desktop which forced "supplements actually work."
     onto a second wrap, producing 3 visible lines. Releasing the constraint
     and trimming the font to 24 lets the headline shape to: "Know which" /
     "supplements actually work." — exactly 2 lines on a 390px viewport.
     2026-05-22 — font bumped 24 → 34, then 34 → 40 per user direction
     ("make mobile 40px"). Letter-spacing tightened from -0.9 → -1.1 to keep
     the larger type tight; line-height nudged from 1.08 → 1.05 so the
     three-line "Know which / supplements / actually work." shape stays
     compact on phones. */
  .ix-hero h1{
    font-size: 40px !important;
    margin: 0 auto 8px !important;
    line-height: 1.05 !important;
    letter-spacing: -1.1px;
    max-width: none !important;
  }
  /* Lede widened from 300→360 with a slightly tighter font so the copy
     reads as 2 paragraph lines on standard mobile (≥390 CSS px). On the
     very narrowest screens it may relax to 3 lines, which is acceptable
     since the type stays readable. */
  .ix-hero .lede{ font-size: 12px !important; margin: 0 auto 10px !important; max-width: 360px !important; line-height: 1.45; }

  /* 2026-05-21 — Stats row restored to a single inline editorial row with
     slash dividers (matching desktop), per user direction. Earlier pass
     stacked them vertically; now we shrink type + tracking instead so all
     three fit on one line at ~390 CSS px. flex-wrap:wrap is a safety net:
     if a narrower viewport (≤360px) can't fit, the third stat slides to a
     second line rather than overflowing horizontally. */
  .ix-hero-stats{
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 3px 5px !important;
    margin-bottom: 10px !important;
    line-height: 1.5;
  }
  .ix-hero-stat{
    font-size: 8.5px !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap;
  }
  .ix-hero-stat-divider{
    display: inline !important;
    font-size: 8.5px !important;
    opacity: .5 !important;
  }

  /* Hero search visible at the top AND sticky while inside the hero. The
     hero search itself becomes a sticky element pinned just below the
     banner (22 px). Once .ix-hero scrolls fully past, the search leaves
     with it — at which point the existing IntersectionObserver swaps in
     the in-panel search, so the user sees a continuous search bar from
     the top of the page through to the bottom of the supplements list. */
  .ix-hero .ix-search{
    display: flex !important;
    margin: 0 auto !important;
    position: sticky !important;
    top: 22px !important;                 /* matches mobile banner height */
    z-index: 55;
  }
  /* 2026-05-21 — Mobile search field shrink. Desktop input is 14px font /
     12px vertical padding; on mobile this read as oversized next to the
     freshly-compressed lede (12px) and stats (8.5px). Trimmed font to
     13px and padding to 9/14 so the field height drops from ~46px to
     ~34px without affecting tap-target comfort (still > 32px). Icon and
     left-padding also nudged in by 4px so the placeholder text starts
     closer to the icon.
     The rule covers BOTH search variants on mobile:
       • .ix-hero .ix-search       — the hero search at the top of the page
       • .ix-search-sticky          — the sticky-panel search that takes over
                                      after the hero scrolls out of view
     so the field stays the same compressed size before and after the
     IntersectionObserver swap (was: sticky version inherited the desktop
     14/12 sizing and visibly grew on scroll). */
  .ix-hero .ix-search input,
  .ix-search-sticky input{
    font-size: 13px !important;
    padding: 9px 16px 9px 38px !important;
  }
  .ix-hero .ix-search .ico,
  .ix-search-sticky .ico{
    width: 14px !important;
    height: 14px !important;
    left: 14px !important;
  }

  /* Rotating-article hero — fine-tuned for mobile:
     - tighter padding so badges and counter aren't crammed against the edges
     - smaller headline (was 19, now 16) so it fits in 2 lines instead of 3
     - smaller description (was 13, now 12) clamped to 2 lines
     - smaller pill labels at the top
     - smaller "Read article" CTA + arrow buttons so the bottom row feels
       proportional to the card, not larger than the headline.
     - meta + controls share a single row at the bottom (already true in
       markup; just shrink them so they fit cleanly) */
  /* min-height required because .hero-slide is position:absolute and doesn't
     contribute to the height of #hero. 200 px gives room for 2-line headline +
     clamped description + meta + controls without overflow.
     Bottom margin trimmed to 4 (was 10) — combined with the sticky panel's
     mobile margin-top (also trimmed below) the visible gap between the
     rotating-hero card and the filter pills lands at ~16 px instead of 42. */
  #hero{
    margin: 8px 0 4px !important;
    height: auto !important;
    min-height: 200px !important;
    padding: 14px 16px 12px !important;
    border-radius: 14px !important;
  }
  #hero .hero-slide{ inset: 14px 14px 56px 14px !important; }
  #hero .hero-slide-top{ gap: 6px !important; }
  /* 2026-05-23 — Mobile-only: smaller, lighter pills. font-size 10→9,
     font-weight 700→500 to drop the bold treatment, padding tightened. */
  #hero .hero-slide-featured,
  #hero .hero-slide-badge{
    font-size: 9px !important;
    font-weight: 500 !important;
    padding: 2px 6px !important;
    letter-spacing: 0.3px !important;
  }
  #hero .hero-slide-headline{
    font-size: 16.5px !important;
    line-height: 1.25 !important;
    margin: 8px 0 6px !important;
    letter-spacing: -0.1px;
  }
  #hero .hero-slide-desc{
    font-size: 12px !important;
    line-height: 1.45 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px !important;
  }
  #hero .hero-slide-meta{ font-size: 11px !important; margin: 0 !important; gap: 4px; }
  /* Controls row (‹ › "Read article") — smaller everything so it doesn't
     visually outweigh the headline. */
  #hero .hero-controls{ gap: 6px !important; right: 14px !important; bottom: 14px !important; }
  #hero .hero-arrow{ width: 28px !important; height: 28px !important; }
  #hero .hero-cta{
    padding: 6px 12px !important;
    font-size: 11.5px !important;
    border-radius: 6px !important;
  }
  /* Counter — smaller font, sits cleanly top-right without crowding pills.
     2026-05-21 — top:12 → 16 to align the counter's baseline with the
     BREAKING / GUIDE pills row on the left at mobile sizes. Slide inset
     top is 14px and pills add ~2px padding-top, so the pill text starts
     near y 16 from the card top; matching the counter top puts the two
     on a shared visual row. */
  #hero .hero-counter{
    font-size: 9.5px !important;
    top: 16px !important;
    right: 14px !important;
    left: auto !important;
    letter-spacing: 0.4px;
  }
  /* The progress bar at the bottom — thinner so it doesn't read as a CTA */
  #hero .hero-progress{ height: 2px !important; }

  /* Mobile sticky panel — search + pills. The hero search at the top is
     visible at landing; once the user scrolls past it, the IntersectionObserver
     in index.js toggles body.hero-search-gone, which reveals the sticky-panel
     search so a search bar is always visible. Only ONE bar shows at a time. */
  #main-sticky.sticky-bar{
    padding: 8px 12px !important;
    margin: 4px -12px 0 !important;        /* tightened from 12 → 4 */
    width: calc(100% + 24px);
  }
  /* By default on mobile: sticky-panel search hidden (hero one visible). */
  #main-sticky .sticky-bar-search{ display: none !important; }
  /* When user has scrolled past the hero search: show the sticky-panel search. */
  body.hero-search-gone #main-sticky .sticky-bar-search{
    display: block !important;
    max-width: 100%;
    margin: 0 0 8px;
  }
  body.hero-search-gone #main-sticky .sticky-bar-search .ix-search-sticky{
    margin: 0;
  }

  /* 4 pills wrap to 2 rows for tappability. */
  #sfbar-main{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }
  #sfbar-main .cdd{ width: 100%; }
  #sfbar-main .cdd-btn{ width: 100%; justify-content: center; }

  /* Banner is 22px tall on mobile (styles.css:1007 shrinks it to dodge
     the iPhone notch — see the calc(22px + safe-area-inset-top) rule).
     The desktop sticky uses top:32; on mobile we MUST use top:22 or the
     10-pixel difference becomes a band where supplement-list content
     visibly scrolls between the banner and the pills. */
  #ix-sticky-bar{ top: 22px !important; padding: 6px 12px; }
  #main-sticky{ top: 22px !important; margin-top: 0 !important; }
}

/* ---------- Footer override block — retired 2026-05-23 ----------
   Direction B reshape (centered single-column) removed .site-footer-grid
   from the emitted markup. The previous 5-column override here is now a
   no-op selector and would only matter if a legacy snapshot still emits
   .site-footer-grid; left intentionally empty to preserve line-number
   stability for nearby comments above. */

/* ---------- Custom Profile view: hide the rotating-article hero ---------- */

/* The rotating #hero lives inside #supplements-view (we moved it there during
   the Index + Research merge). When the user navigates to the Custom Profile
   page (#profile), switchTab() in app.js keeps #supplements-view visible
   because the profile gate is rendered inside it — but the rotating article
   hero shouldn't be surfaced on the Profile page. switchTab adds
   body.on-profile when the profile view is active, so a single CSS rule
   suffices and we don't have to touch the JS routing. */
body.on-profile #hero,
body.on-profile #main-sticky{
  display: none !important;
}

/* ---------- Rotating-article hero: A2 lighter palette, reversed gradient ----------
   The legacy .hero (styles.css:1206) was a dark-teal slab — visually the
   heaviest element on the Index. Per the A→G mockup review, we landed on
   variant A2 (lighter mid-teal #4DA095/#3A8276) BUT with the gradient
   reversed so the DARKER tone sits on the LEFT where the headline + dek
   render, keeping the copy on the higher-contrast end of the gradient. */
.hero{
  background: linear-gradient(90deg, #3A8276 0%, #4DA095 100%) !important;
  height: auto !important;
  /* 2026-05-21 — bumped 240→300 to fix the bottom-right controls
     overlapping the description on cards with a 2-line desc. .hero-slide
     is position:absolute with `inset:36 36 92 36`, so at 240px the slide
     box was only ~112px tall — not enough for headline + 2-line desc +
     meta, so content overflowed past the slide bottom and rendered
     behind the absolutely-positioned arrows + Read article CTA.
     300px gives the slide ~172px, room for the full content stack. */
  min-height: 300px !important;
  box-shadow: 0 2px 10px rgba(74, 160, 149, 0.16) !important;
  margin-bottom: 1.5rem !important;
}
/* 2026-05-21 — Desktop max-width on the rotating article hero.
   At 1024px container widths the card was running edge-to-edge, which
   made it visually outsize the headline cluster above it. Capping at
   760px and centring keeps the card proportional to the H1 + lede +
   search block (which sit on a 480px search / 56ch lede measure).
   Scoped to ≥601px so the mobile rule (full-bleed) is untouched. */
@media (min-width: 601px){
  .hero{
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* Drop the two giant glow circles — they only made sense against the deep
   dark teal of the original. On the lighter palette they read as foggy
   smudges, not radiant highlights. */
.hero::before,
.hero::after{ display: none !important; }
/* Simplify the SVG bar-chart patterns — they were tuned to high contrast
   on dark teal and look muddy on the lighter background. Hiding them
   removes the busiest visual layer; the slide content stays. */
.hero-pattern-bg{ display: none !important; }

/* End 2026-05-21 follow-up block */