/* =========================================================================
   hub.css, FDA Tracker + Knowledge Base hub styles.
   Cool-only surfaces, but token-driven (re-skin safe). Prefix: hub-
   ========================================================================= */

/* ===================== HUB HERO ===================== */
.hub-hero{ position:relative; background:var(--bg-dark); overflow:hidden; border-bottom:1px solid var(--border-on-dark); }
.hub-hero__inner{ position:relative; z-index:1; max-width:1280px; margin:0 auto; padding:var(--sp-16) var(--sp-12) var(--sp-12); }
.hub-hero__live{ display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-heading); font-weight:600;
  font-size:10px; letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--status-success); margin-bottom:var(--sp-6); }
.hub-hero__live-dot{ width:8px; height:8px; border-radius:var(--r-pill); background:var(--status-success);
  box-shadow:0 0 8px var(--status-success); animation:hub-pulse 2.4s ease-in-out infinite; }
@keyframes hub-pulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.hub-hero__title{ font-family:var(--font-heading); font-weight:200; font-size:clamp(40px,5vw,72px);
  line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); color:var(--fg-on-dark-1); margin:0; max-width:18ch; }
.hub-hero__title .nam-pop{ font-weight:300; }
.hub-hero__sub{ margin:var(--sp-6) 0 0; max-width:60ch; }
.hub-hero__meta{ margin-top:var(--sp-8); display:flex; gap:var(--sp-6); flex-wrap:wrap; font-family:var(--font-body); font-size:var(--fs-13); color:var(--fg-on-dark-3); }
.hub-hero__meta b{ color:var(--fg-on-dark-1); font-weight:500; }

/* ===================== FILTER BAR (sticky) ===================== */
.hub-filter{ position:sticky; top:var(--nam-nav-h,0px); z-index:30; background:color-mix(in srgb, var(--bg-dark-elev) 94%, transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--border-on-dark); }
.hub-filter__inner{ max-width:1280px; margin:0 auto; padding:var(--sp-5) var(--sp-12); display:flex; gap:var(--sp-4); align-items:center; flex-wrap:wrap; }
.hub-filter__group{ display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; }
.hub-filter__label{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--fg-on-dark-3); margin-right:var(--sp-1); }
.hub-chip{ font-family:var(--font-heading); font-weight:500; font-size:11px; letter-spacing:.04em; color:var(--fg-on-dark-2);
  padding:7px 13px; border-radius:var(--r-pill); border:1px solid var(--border-on-dark); background:rgba(255,255,255,.03);
  transition:color var(--dur-base), border-color var(--dur-base), background var(--dur-base); }
.hub-chip:hover{ color:var(--fg-on-dark-1); border-color:var(--border-on-dark-strong); }
.hub-chip.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:var(--glow-sm); }
.hub-search{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); background:rgba(255,255,255,.04);
  border:1px solid var(--border-on-dark); border-radius:var(--r-pill); padding:8px 15px; min-width:240px; color:var(--fg-on-dark-3); }
.hub-search input{ background:none; border:none; outline:none; font-family:var(--font-body); font-size:var(--fs-13); color:var(--fg-on-dark-1); flex:1; }
.hub-search input::placeholder{ color:var(--fg-on-dark-3); }
@media(max-width:880px){ .hub-search{ margin-left:0; width:100%; } }
/* Phones: the control cluster grows tall once it wraps; don't pin it to the top
   (it would eat most of the viewport and fight the sticky nav). Let it scroll. */
@media(max-width:640px){
  .hub-filter{ position:static; }
  .hub-filter__inner{ padding:var(--sp-4) var(--sp-6); }
}

/* ===================== TRACKER TABLE ===================== */
.hub-table{ max-width:1280px; margin:0 auto; padding:var(--sp-12); }
.hub-count{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--sp-6); }
.hub-count__n{ font-family:var(--font-heading); font-weight:400; font-size:var(--fs-18); color:var(--fg-on-dark-1); }
.hub-count__updated{ font-family:var(--font-mono); font-size:var(--fs-12); color:var(--fg-on-dark-3); }
.hub-rows{ border:1px solid var(--border-on-dark); border-radius:var(--r-lg); overflow:hidden; }
.hub-row{ display:grid; grid-template-columns:1.6fr 1.3fr 1.1fr 1fr auto; gap:var(--sp-6); align-items:center;
  padding:var(--sp-6) var(--sp-8); border-top:1px solid var(--border-on-dark); transition:background var(--dur-base); }
.hub-row:first-child{ border-top:0; }
.hub-row:hover{ background:rgba(255,255,255,.02); }
.hub-row--head{ background:rgba(255,255,255,.02); }
.hub-row--head span{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--fg-on-dark-3); }
.hub-row__mol{ display:flex; align-items:center; gap:var(--sp-4); }
.hub-verdict{ display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-heading); font-weight:500;
  font-size:var(--fs-13); color:var(--fg-on-dark-1); white-space:nowrap; }
.hub-dot{ width:11px; height:11px; border-radius:var(--r-pill); flex-shrink:0; }
.hub-dot--green{ background:var(--status-success); box-shadow:0 0 8px rgba(79,181,138,.7); }
.hub-dot--yellow{ background:var(--status-warning); box-shadow:0 0 8px rgba(212,162,74,.7); }
.hub-dot--red{ background:var(--status-danger); box-shadow:0 0 8px rgba(226,106,106,.7); }
.hub-row__name{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-18); color:var(--fg-on-dark-1); }
.hub-row__cat{ font-family:var(--font-body); font-size:var(--fs-12); color:var(--fg-on-dark-3); }
.hub-pill{ display:inline-block; font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; padding:5px 11px; border-radius:var(--r-pill); white-space:nowrap;
  background:rgba(255,255,255,.05); color:var(--fg-on-dark-2); border:1px solid var(--border-on-dark); }
.hub-row__date{ font-family:var(--font-mono); font-size:var(--fs-12); color:var(--fg-on-dark-2); }
.hub-row__notify{ font-family:var(--font-heading); font-weight:500; font-size:11px; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--accent-hover); white-space:nowrap; }
.hub-row__notify:hover{ color:var(--fg-on-dark-1); }
.hub-row__avail{ font-family:var(--font-heading); font-weight:600; font-size:11px; letter-spacing:var(--tracking-wide); text-transform:uppercase; }
.hub-row__avail--green{ color:var(--status-success); }
.hub-row__avail--yellow,.hub-row__avail--red{ color:var(--fg-on-dark-3); }
@media(max-width:880px){
  .hub-row,.hub-row--head{ grid-template-columns:1fr auto; gap:var(--sp-3); }
  .hub-row--head .hub-h-status,.hub-row--head .hub-h-date,.hub-row--head .hub-h-cat{ display:none; }
  .hub-row__statuscol,.hub-row__date{ grid-column:1 / -1; }
}

/* ===================== KB CARD GRID + JTBD ===================== */
.hub-jtbd{ display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-12); }
.hub-jtbd__chip{ display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-heading); font-weight:500;
  font-size:var(--fs-13); color:var(--fg-on-dark-2); padding:9px 16px; border-radius:var(--r-pill);
  border:1px solid var(--border-on-dark); background:rgba(255,255,255,.03); transition:all var(--dur-base); }
.hub-jtbd__chip svg{ color:var(--accent-hover); }
.hub-jtbd__chip:hover{ color:var(--fg-on-dark-1); border-color:var(--border-on-dark-strong); transform:translateY(-2px); }
.hub-jtbd__chip.is-active{ background:var(--accent-soft); border-color:var(--border-on-dark-strong); color:var(--fg-on-dark-1); }
.hub-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.hub-card{ text-align:left; padding:var(--sp-8); border-radius:var(--r-md); background:rgba(255,255,255,.025);
  border:1px solid var(--border-on-dark); display:flex; flex-direction:column; gap:var(--sp-3); cursor:pointer;
  width:100%; text-decoration:none; color:inherit;
  transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.hub-card:hover{ transform:translateY(-3px); border-color:rgba(var(--glow-rgb),.45); }
.hub-card__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.hub-card__name{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-24); color:var(--fg-on-dark-1); letter-spacing:-.01em; }
.hub-card__what{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:0; flex:1; }
.hub-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding-top:var(--sp-4); border-top:1px solid var(--border-on-dark); }
.hub-card__cat{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-on-dark-3); }
.hub-card__open{ font-family:var(--font-heading); font-weight:500; font-size:10px; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--accent-hover); }
@media(max-width:980px){ .hub-cards{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .hub-cards{ grid-template-columns:1fr; } }

/* ===================== PROGRESSIVE DRAWER (KB star interaction) ===================== */
.hub-scrim{ position:fixed; inset:0; z-index:80; background:rgba(1,9,29,.6); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity var(--dur-base); }
.hub-scrim.is-open{ opacity:1; pointer-events:auto; }
.hub-drawer{ position:fixed; top:0; right:0; bottom:0; z-index:81; width:min(640px,100%);
  background:var(--bg-dark-elev); border-left:1px solid var(--border-on-dark-strong);
  transform:translateX(100%); transition:transform var(--dur-slow) var(--ease-out); overflow-y:auto; box-shadow:-40px 0 80px rgba(0,0,0,.5); }
.hub-drawer.is-open{ transform:none; }
.hub-drawer__inner{ padding:var(--sp-10) var(--sp-12) var(--sp-16); }
.hub-drawer__close{ position:absolute; top:var(--sp-6); right:var(--sp-6); width:40px; height:40px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center; color:var(--fg-on-dark-2); border:1px solid var(--border-on-dark); }
.hub-drawer__close:hover{ color:var(--fg-on-dark-1); border-color:var(--fg-on-dark-1); }
/* L1, identity */
.hub-l1__verdict{ display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-heading); font-weight:600;
  font-size:11px; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--fg-on-dark-1); margin-bottom:var(--sp-5); }
.hub-l1__name{ font-family:var(--font-heading); font-weight:300; font-size:var(--fs-40); color:var(--fg-on-dark-1); letter-spacing:var(--tracking-tight); margin:0; }
.hub-l1__what{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-18); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:var(--sp-4) 0 0; }
.hub-l1__pills{ display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-6); }
.hub-l1__pill{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 12px; border-radius:var(--r-pill); background:rgba(255,255,255,.05); color:var(--fg-on-dark-2); border:1px solid var(--border-on-dark); }
.hub-l1__pill a{ color:var(--accent-hover); }
/* L2, plain-English summary + does / does not */
.hub-l2-summary{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-16); line-height:var(--lh-relaxed);
  color:var(--fg-on-dark-1); margin:var(--sp-8) 0 0; padding-left:var(--sp-5); border-left:2px solid var(--accent-hover); max-width:54ch; }
.hub-l2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin-top:var(--sp-6); }
.hub-l2__card{ padding:var(--sp-6); border-radius:var(--r-md); border:1px solid var(--border-on-dark); }
.hub-l2__card--does{ background:rgba(79,181,138,.06); border-color:rgba(79,181,138,.28); }
.hub-l2__card--doesnot{ background:rgba(226,106,106,.05); border-color:rgba(226,106,106,.26); }
.hub-l2__h{ font-family:var(--font-heading); font-weight:600; font-size:11px; letter-spacing:var(--tracking-wide); text-transform:uppercase; margin-bottom:var(--sp-3); }
.hub-l2__card--does .hub-l2__h{ color:var(--status-success); }
.hub-l2__card--doesnot .hub-l2__h{ color:var(--status-danger); }
.hub-l2__d{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:0; }
/* L3 / L4, expandable */
.hub-exp{ margin-top:var(--sp-6); border-top:1px solid var(--border-on-dark); }
.hub-exp__btn{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:var(--sp-5) 0;
  font-family:var(--font-heading); font-weight:500; font-size:var(--fs-14); color:var(--fg-on-dark-1); }
.hub-exp__icon{ color:var(--accent-hover); transition:transform var(--dur-base); }
.hub-exp.is-open .hub-exp__icon{ transform:rotate(45deg); }
.hub-exp__body{ max-height:0; overflow:hidden; transition:max-height var(--dur-slow) var(--ease-out); }
.hub-exp.is-open .hub-exp__body{ max-height:600px; }
.hub-exp__inner{ padding:0 0 var(--sp-6); }
.hub-story{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-15); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:0 0 var(--sp-5); }
.hub-story .nam-em{ font-size:1em; }
.hub-spec{ display:flex; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-3) 0; border-top:1px solid var(--border-on-dark);
  font-family:var(--font-body); font-size:var(--fs-13); }
.hub-spec__k{ color:var(--fg-on-dark-3); }
.hub-spec__v{ color:var(--fg-on-dark-1); font-family:var(--font-mono); text-align:right; }
.hub-unknown{ margin-top:var(--sp-6); padding:var(--sp-5); border-radius:var(--r-md); background:rgba(212,162,74,.06); border:1px solid rgba(212,162,74,.26); }
.hub-unknown__h{ font-family:var(--font-heading); font-weight:600; font-size:11px; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--status-warning); margin-bottom:var(--sp-2); }
.hub-unknown__d{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:0; }
/* L4, citations */
.hub-sources{ margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--border-on-dark); }
.hub-sources__h{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--fg-on-dark-3); }
.hub-sources__d{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:var(--sp-2) 0 0; }
/* Structured, linked references (review P1: citations as verifiable evidence) */
.hub-refs{ list-style:none; counter-reset:ref; margin:var(--sp-3) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); }
.hub-ref{ counter-increment:ref; position:relative; padding-left:var(--sp-7); }
.hub-ref::before{ content:counter(ref); position:absolute; left:0; top:1px; font-family:var(--font-mono); font-size:11px; font-weight:600;
  color:var(--accent-hover); width:20px; height:20px; border:1px solid var(--border-on-dark-strong); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; }
.hub-ref__t{ display:block; font-family:var(--font-body); font-size:var(--fs-14); line-height:1.4; color:var(--fg-on-dark-1); }
.hub-ref__t:hover{ color:var(--accent-hover); }
.hub-ref__meta{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; color:var(--fg-on-dark-3); margin-top:2px; }

/* ===================== KB · BROWSE BY GOAL (the JTBD axis) ===================== */
.kb-goals{ display:grid; grid-template-columns:repeat(auto-fit, minmax(232px,1fr)); gap:var(--sp-4); }
.kb-goal{ position:relative; display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-8);
  border-radius:var(--r-md); background:rgba(255,255,255,.025); border:1px solid var(--border-on-dark);
  transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.kb-goal:hover{ border-color:var(--border-on-dark-strong); background:rgba(255,255,255,.04); }
.kb-goal__icon{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:var(--r-md);
  background:var(--accent-soft); color:var(--accent-hover); border:1px solid var(--border-on-dark); margin-bottom:var(--sp-3); }
.kb-goal__label{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-20); color:var(--fg-on-dark-1); margin:0; }
.kb-goal__blurb{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:0; }
.kb-goal__mols{ font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-on-dark-3); margin:var(--sp-2) 0 0; line-height:1.7; flex:1; }
.kb-goal__actions{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--border-on-dark); }
.kb-goal__filter{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--fg-on-dark-1); display:inline-flex; align-items:center; gap:var(--sp-2); }
.kb-goal__filter:hover{ color:var(--accent-hover); }
.kb-goal__lp{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--accent-hover); display:inline-flex; align-items:center; gap:var(--sp-2); }
.kb-goal__lp span{ transition:transform var(--dur-base) var(--ease-out); }
.kb-goal__lp:hover span{ transform:translateX(4px); }
.kb-goal__edu{ font-family:var(--font-heading); font-weight:500; font-size:10px; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--fg-on-dark-3); }

/* ===================== MOLECULE MONOGRAPH PAGE (§9.3) ===================== */
.mono{ max-width:820px; margin:0 auto; padding:var(--sp-16) var(--sp-12) var(--sp-24); }
.mono__back{ display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-heading); font-weight:500;
  font-size:var(--fs-13); color:var(--fg-on-dark-3); margin-bottom:var(--sp-10); transition:color var(--dur-base); }
.mono__back:hover{ color:var(--fg-on-dark-1); }
.mono__hero{ border-bottom:1px solid var(--border-on-dark); padding-bottom:var(--sp-10); }
.mono__name{ font-family:var(--font-heading); font-weight:200; font-size:clamp(44px,6vw,76px); line-height:var(--lh-tight);
  letter-spacing:var(--tracking-tight); color:var(--fg-on-dark-1); margin:var(--sp-3) 0 0; }
.mono__what{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-20); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:var(--sp-5) 0 0; max-width:60ch; }
.mono__summary{ margin-top:var(--sp-10); font-size:var(--fs-18); }
.mono__l2{ margin-top:var(--sp-6); }
.mono__sec{ margin-top:var(--sp-12); }
.mono__h{ font-family:var(--font-heading); font-weight:400; font-size:var(--fs-24); color:var(--fg-on-dark-1); letter-spacing:var(--tracking-tight); margin:0 0 var(--sp-5); }
.mono__p{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-16); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:0 0 var(--sp-4); max-width:68ch; }
.mono__p .nam-em{ color:var(--fg-on-dark-1); }
.mono__spec{ border:1px solid var(--border-on-dark); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-8); background:rgba(255,255,255,.02); }
.mono__spec .hub-spec:first-child{ border-top:0; }
.mono__spec .hub-spec__v{ max-width:62%; white-space:normal; }
.mono__legal{ border:1px solid var(--border-on-dark); border-radius:var(--r-lg); padding:var(--sp-8) var(--sp-10); background:var(--bg-dark-card); }
.mono__legal-pills{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.mono__legal-links{ display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-5); }
.mono__unknown{ margin-top:var(--sp-12); }
.mono__cta{ margin-top:var(--sp-12); display:flex; align-items:center; gap:var(--sp-6); flex-wrap:wrap; }
.mono__links{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:var(--sp-4); }
.mono__link{ position:relative; display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-8) var(--sp-8) var(--sp-10);
  border-radius:var(--r-md); background:rgba(255,255,255,.025); border:1px solid var(--border-on-dark);
  transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.mono__link:hover{ border-color:var(--border-on-dark-strong); background:rgba(255,255,255,.04); }
.mono__link-icon{ display:inline-flex; color:var(--accent-hover); margin-bottom:var(--sp-2); }
.mono__link-t{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-16); color:var(--fg-on-dark-1); }
.mono__link-d{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); }
.mono__link-arrow{ position:absolute; right:var(--sp-8); bottom:var(--sp-6); color:var(--accent-hover); font-size:16px; transition:transform var(--dur-base) var(--ease-out); }
.mono__link:hover .mono__link-arrow{ transform:translateX(4px); }
.mono__eeat{ margin-top:var(--sp-16); }
/* Comparison-page FAQ block (review P1: X vs Y pages) */
.cmp-faq{ max-width:980px; margin:0 auto; padding:var(--sp-8) var(--sp-12) var(--sp-12); }
.cmp-faq__list{ display:flex; flex-direction:column; gap:var(--sp-6); }
.cmp-faq__item{ border-top:1px solid var(--border-on-dark); padding-top:var(--sp-5); }
.cmp-faq__q{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-18); color:var(--fg-on-dark-1); margin:0 0 var(--sp-2); }
.cmp-faq__a{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-15); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:0; max-width:74ch; }
@media(max-width:560px){ .cmp-faq{ padding:var(--sp-6) var(--sp-6) var(--sp-10); } }
/* Related-molecule graph cards (review P1: internal-linking density) */
.mono__related{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:var(--sp-4); }
.mono__rel{ display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-6) var(--sp-6) var(--sp-7);
  border-radius:var(--r-md); background:rgba(255,255,255,.025); border:1px solid var(--border-on-dark);
  transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.mono__rel:hover{ border-color:var(--border-on-dark-strong); background:rgba(255,255,255,.04); }
.mono__rel-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.mono__rel-name{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-16); color:var(--fg-on-dark-1); }
.mono__rel-grade{ font-family:var(--font-mono); font-size:var(--fs-12); font-weight:600; color:var(--accent-hover);
  border:1px solid var(--border-on-dark-strong); border-radius:var(--r-sm); padding:1px 7px; }
.mono__rel-cls{ font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-on-dark-3); }
.mono__rel-what{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); }
@media(max-width:560px){ .mono{ padding:var(--sp-10) var(--sp-6) var(--sp-16); } .mono__l2{ grid-template-columns:1fr; } }

/* ===================== BPC-157 vs TB-500 PAIRING EXPLAINER ===================== */
.pair--page{ max-width:980px; margin:0 auto; padding:var(--sp-12); display:flex; flex-direction:column; gap:var(--sp-10); }
.pair__shared{ display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; padding:var(--sp-5) var(--sp-8);
  border:1px solid var(--border-on-dark); border-radius:var(--r-md); background:var(--accent-soft); }
.pair__shared-h{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--accent-hover); }
.pair__shared-body{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.pair__shared-txt{ font-family:var(--font-mono); font-size:var(--fs-12); color:var(--fg-on-dark-2); letter-spacing:.02em; }
.pair__shared-sep{ color:var(--fg-on-dark-3); }
/* card head verdict + monograph link */
.pair .hub-compare__head{ gap:var(--sp-2); }
.pair__monolink{ margin-top:var(--sp-5); font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--accent-hover); display:inline-flex; align-items:center; gap:var(--sp-2); }
.pair__monolink:hover{ color:var(--fg-on-dark-1); }
/* structured comparison table */
.pair-table{ border:1px solid var(--border-on-dark); border-radius:var(--r-lg); overflow:hidden; background:var(--bg-dark-card); }
.pair-table__row{ display:grid; grid-template-columns:0.8fr 1.1fr 1.1fr; gap:var(--sp-6); padding:var(--sp-5) var(--sp-8);
  border-top:1px solid var(--border-on-dark); align-items:start; }
.pair-table__row:first-child{ border-top:0; }
.pair-table__row--head{ background:rgba(255,255,255,.02); }
.pair-table__row--head .pair-table__k{ color:var(--fg-on-dark-3); }
.pair-table__row--head .pair-table__v{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-18); color:var(--fg-on-dark-1); }
.pair-table__k{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--fg-on-dark-3); padding-top:3px; }
.pair-table__v{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); }
@media(max-width:720px){
  .pair--page{ padding:var(--sp-8) var(--sp-6); }
  .pair-table__row{ grid-template-columns:1fr 1fr; gap:var(--sp-3) var(--sp-5); }
  .pair-table__k{ grid-column:1 / -1; padding-top:0; }
}
/* link furniture */
.pair__links{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:var(--sp-4); }
.pair__link{ position:relative; display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-8) var(--sp-8) var(--sp-10);
  border-radius:var(--r-md); background:rgba(255,255,255,.025); border:1px solid var(--border-on-dark);
  transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.pair__link:hover{ border-color:var(--border-on-dark-strong); background:rgba(255,255,255,.04); }
.pair__link-icon{ display:inline-flex; color:var(--accent-hover); margin-bottom:var(--sp-2); }
.pair__link-t{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-16); color:var(--fg-on-dark-1); }
.pair__link-d{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); }
.pair__link-arrow{ position:absolute; right:var(--sp-8); bottom:var(--sp-6); color:var(--accent-hover); font-size:16px; transition:transform var(--dur-base) var(--ease-out); }
.pair__link:hover .pair__link-arrow{ transform:translateX(4px); }
/* drawer CTA + E-E-A-T */
.hub-drawer__cta{ margin-top:var(--sp-8); display:flex; flex-direction:column; gap:var(--sp-4); }
.hub-eeat{ margin-top:var(--sp-8); padding-top:var(--sp-6); border-top:1px solid var(--border-on-dark);
  font-family:var(--font-body); font-size:var(--fs-12); line-height:var(--lh-relaxed); color:var(--fg-on-dark-3); }
.hub-eeat b{ color:var(--fg-on-dark-2); font-weight:500; }
@media(max-width:560px){ .hub-l2{ grid-template-columns:1fr; } .hub-drawer__inner{ padding:var(--sp-8); } }