/* 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;
}
.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="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) }

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

/* ============================================================
   Toolbar — category dropdown + search on a single row
   ============================================================ */
.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: 0;
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}
.rs-toolbar .rs-search{
  flex: 1;
  min-width: 240px;
  max-width: none;
  margin: 0;
  /* inherits the existing .rs-search rounded-pill styling otherwise */
}

/* 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. */
  .rs-toolbar{ padding: 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;
  padding: 14px 24px 4px;
  text-align: center;
}
.ix-hero .eb{ display: none; }
.ix-hero-stats{
  display: inline-flex; align-items: center; gap: 8px;
  color: #1F7A6B;
  margin-bottom: 10px;
}
.ix-hero-stat{
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.ix-hero-stat-divider{
  font-size: 10px; opacity: .35;
}
.ix-hero h1{
  font-size: clamp(34px, 5.5vw, 56px);
  font-weight: 700; letter-spacing: -1.4px;
  line-height: 1.08; margin: 0 0 10px;
  color: var(--color-text-primary);
}
.ix-hero p.lede{
  font-size: 16px; color: var(--color-text-secondary);
  max-width: 600px; margin: 0 auto 20px;
  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. */
  max-width: 900px; margin: 0 auto 0;
  padding: 6px 20px;
}
/* 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; } }
.ix-sources-label{
  font-size: 9px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-text-tertiary);
  text-align: center; margin-bottom: 8px;
}
/* ============================================================
   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-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;}
.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: 14px 18px 20px; }
}

.sfbar-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.sfbar-row .sfbar{flex:1;margin:0;padding:8px 0;min-width: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){
  .sfbar .cdd,.sfbar .cdd-btn{flex:0 1 auto;}
}
@media(max-width:380px){
  .sfbar .cdd-btn,.sort-chip{padding:6px 10px;font-size:11.5px;}
}
/* 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}}