/* ============================================================
   article.css — shared styles for /research-*.html longform pages.
   Uses Peptriva tokens (tokens.css?v=4) and the rw- class names
   from the editorial writing prompt. Adapted lightly so the
   articles read as part of the site rather than a generic blog
   template — typography mirrors the rest of the site (Inter Tight
   for display, Inter for body, JetBrains Mono for the keyword
   accent), accent colour is --blurple, and surface boxes use
   --surface so they sit on the same brand palette as the
   research-library hub and product pages.
   ============================================================ */

/* ---------- Page chrome (frame around the article body) ---------- */
.rw-page {
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  margin: 0;
}
.rw-nav-rule {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: 0;
}

/* Article hero band — eyebrow (research class), title, lede, byline.
   Narrow reading column matched to the article body below. */
.rw-hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 32px 28px;
  box-sizing: border-box;
}
.rw-hero__eyebrow {
  font-family: var(--font-meta);
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate-2);
  margin: 0 0 14px;
}
.rw-hero__eyebrow a {
  color: var(--slate-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
  /* Mobile tap-target floor (audit fix). Eyebrow link was 15px tall;
     8px vertical padding bumps the click area to ~31px. */
  display: inline-block;
  padding: 8px 0;
  margin: -8px 0;
}
.rw-hero__eyebrow a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.rw-hero__h {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 18px;
  text-wrap: balance;
}
.rw-hero__lede {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--slate);
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 60ch;
}
.rw-hero__meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-meta);
  font-size: 12px;
  color: var(--slate-2);
  letter-spacing: 0.04em;
}
.rw-hero__meta b { color: var(--ink); font-weight: 600; }
.rw-hero__meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--hairline-strong); }

/* ---------- Article hero animation — cinematic peptide visual.
   Sits between the .rw-hero (masthead) and the .rw-article (body).
   Wider aspect ratio than the CTA media (16/9 vs 1/1) and a dark
   gradient frame so the particle cloud reads as the atmosphere of
   the article, not a product card.                              */
.rw-hero-anim {
  max-width: 720px;
  margin: 4px auto 36px;
  padding: 0 32px;
  box-sizing: border-box;
}
.rw-hero-anim__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  border: 1px solid var(--card-border);
}
.rw-hero-anim__frame canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  cursor: grab;
}
/* Static hero image (replaced the molecule canvas — molecule.js was
   consuming ~33 s of main-thread time per article load, tanking PSI's
   research-article scores to 62/100). Mirrors the canvas geometry so
   the swap is visually transparent. */
.rw-hero-anim__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Article body — narrow reading column ---------- */
.rw-article {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px 64px;
  box-sizing: border-box;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
}
.rw-article p {
  margin: 0 0 22px;
  color: var(--slate);
}
.rw-article p:first-of-type, .rw-article > p { color: var(--slate); }

/* Hook — opening paragraph, slightly larger and inkier */
.rw-hook {
  font-size: 19px !important;
  line-height: 1.55 !important;
  color: var(--ink) !important;
  margin: 0 0 28px !important;
  font-weight: 400;
}

/* Primary keyword highlight — subtle accent, not a billboard */
.rw-keyword {
  color: var(--ink);
  font-weight: 600;
  background: linear-gradient(180deg, transparent 62%, rgba(92, 77, 255, 0.18) 62%);
  padding: 0 2px;
}

/* ---------- Subheads ---------- */
.rw-article .rw-subhead,
.rw-article h2.rw-subhead,
.rw-article h3.rw-subhead {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 44px 0 18px;
  text-wrap: balance;
}
.rw-article h2.rw-subhead { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.18; }
.rw-article h3.rw-subhead { font-size: clamp(19px, 1.9vw, 22px); line-height: 1.25; }

/* ---------- Inline links — verb-anchored ---------- */
.rw-link {
  color: var(--blurple);
  text-decoration: none;
  border-bottom: 1px solid rgba(92, 77, 255, 0.4);
  transition: color .15s, border-color .15s, background .15s;
  padding: 0 1px;
}
.rw-link:hover {
  color: var(--electric);
  border-bottom-color: var(--electric);
  background: rgba(92, 77, 255, 0.06);
}

/* ---------- Bolded statistic accent ---------- */
.rw-stat {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* ---------- Key takeaway box (no label inside) ---------- */
.rw-key-takeaway {
  background: var(--surface);
  border-left: 3px solid var(--blurple);
  border-radius: 0 4px 4px 0;
  padding: 22px 26px;
  margin: 0 0 36px;
}
.rw-key-takeaway p {
  margin: 0 !important;
  font-size: 15.5px !important;
  line-height: 1.55 !important;
  color: var(--ink) !important;
  font-weight: 500;
}

/* ---------- Quote blocks ---------- */
.rw-quote {
  position: relative;
  margin: 36px 0;
  padding: 28px 32px 24px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 4px;
}
.rw-quote-mark {
  display: block;
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 0.5;
  color: var(--blurple);
  margin: 8px 0 0;
}
.rw-quote-text {
  font-family: var(--font-display);
  font-size: 20px !important;
  font-weight: 500;
  line-height: 1.4 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em;
  margin: 12px 0 16px !important;
}
.rw-quote-cite {
  font-family: var(--font-meta) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--slate-2) !important;
  letter-spacing: 0.04em;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* ---------- Highlight callout boxes ---------- */
.rw-highlight {
  background: linear-gradient(135deg, rgba(92, 77, 255, 0.06), rgba(0, 23, 188, 0.04));
  border: 1px solid rgba(92, 77, 255, 0.2);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 32px 0;
}
.rw-highlight p {
  margin: 0 !important;
  font-size: 15.5px !important;
  line-height: 1.55 !important;
  color: var(--ink) !important;
}
.rw-highlight strong { color: var(--ink); font-weight: 600; }

/* ---------- Bullet lists ---------- */
.rw-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 12px;
}
.rw-list li {
  position: relative;
  padding: 14px 18px 14px 38px;
  background: var(--surface);
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
}
.rw-list li::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 22px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--blurple);
}
.rw-list li strong {
  color: var(--ink);
  font-weight: 600;
  display: inline;
}

/* ---------- Practical takeaways block ---------- */
.rw-takeaways {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 28px 32px;
  margin: 40px 0;
}
.rw-takeaways h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 18px;
}
.rw-takeaways ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.rw-takeaways li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
}
.rw-takeaways li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blurple);
}
.rw-takeaways li strong { color: var(--ink); font-weight: 600; }

/* ---------- Forward-looking "What to watch" block ---------- */
.rw-watch {
  background: var(--ink);
  color: #fff;
  border-radius: 4px;
  padding: 28px 32px;
  margin: 40px 0;
}
.rw-watch h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 14px;
}
.rw-watch p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
}
.rw-watch a.rw-link {
  color: #A3B9FF;
  border-bottom-color: rgba(163, 185, 255, 0.5);
}
.rw-watch a.rw-link:hover { color: #fff; border-bottom-color: #fff; background: rgba(255,255,255,0.06); }

/* ---------- References (always last in article body) ---------- */
.rw-citations {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}
.rw-citations h2 {
  font-family: var(--font-meta);
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate-2);
  margin: 0 0 18px;
}
.rw-citations ol {
  margin: 0;
  padding: 0 0 0 22px;
  display: grid;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--slate);
}
.rw-citations li::marker { color: var(--slate-2); font-family: var(--font-meta); }
.rw-citations a.rw-link { word-break: break-word; }

/* ---------- Product CTA card.
   Light surface block with the vial image on the left and the
   product details on the right. Eyebrow chip beside the name, spec
   chips, one-line description, and a black pill button. Used twice
   per article — slot #1 leans science-anchored (identity chips +
   "Shop {peptide}" button), slot #2 leans commerce-anchored (spec
   chips + "Learn more" button). Same component, two framings.    */
.rw-cta-product {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 22px;
  margin: 48px 0;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 30px -16px rgba(8, 10, 50, 0.12);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.rw-cta-product:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
  box-shadow: 0 18px 42px -16px rgba(8, 10, 50, 0.18);
}
.rw-cta-product__media {
  position: relative;
  width: 220px;
  height: 220px;
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rw-cta-product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rw-cta-product__body {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 4px 4px 4px 0;
  align-content: start;
}
/* Headline + category chip share a row so the chip reads as a tag
   on the peptide name rather than a heavy badge above it. */
.rw-cta-product__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px 0 0;
}
.rw-cta-product__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--card-border);
  color: var(--slate-2) !important;
  font-family: var(--font-meta);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 !important;
  white-space: nowrap;
}
.rw-cta-product__h {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink) !important;
  margin: 0 !important;
  line-height: 1.15;
}
.rw-cta-product__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 0;
}
.rw-cta-product__chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--slate);
  background: #fff;
}
.rw-cta-product__bd {
  font-size: 14px !important;
  color: var(--slate) !important;
  margin: 10px 0 0 !important;
  line-height: 1.5 !important;
}
.rw-cta-product__row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: auto;
  padding-top: 14px;
}
.rw-cta-product__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .2s;
}
.rw-cta-product:hover .rw-cta-product__btn { background: var(--blurple); }
.rw-cta-product__btn::after { content: '\2192'; transition: transform .2s; display: inline-block; }
.rw-cta-product:hover .rw-cta-product__btn::after { transform: translateX(3px); }

/* ---------- Article footer — CTA back to research hub or product ---------- */
.rw-footer-cta {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding: 56px 32px;
  margin-top: 64px;
}
.rw-footer-cta__inner {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}
.rw-footer-cta__eyebrow {
  font-family: var(--font-meta);
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate-2);
  margin: 0;
}
.rw-footer-cta__h {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.rw-footer-cta__bd {
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
  margin: 0;
  max-width: 60ch;
}
.rw-footer-cta__row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.rw-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background .2s, color .2s, transform .2s;
}
.rw-cta-btn--primary {
  background: var(--ink);
  color: #fff;
}
.rw-cta-btn--primary:hover { background: var(--blurple); transform: translateY(-1px); }
.rw-cta-btn--secondary {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--card-border);
}
.rw-cta-btn--secondary:hover { border-color: var(--ink); transform: translateY(-1px); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .rw-hero { padding: 40px 22px 22px; }
  .rw-hero-anim { padding: 0 22px; margin: 0 auto 28px; }
  .rw-article { padding: 0 22px 48px; font-size: 16px; }
  .rw-hook { font-size: 17.5px !important; }
  .rw-article h2.rw-subhead { font-size: 22px; margin-top: 36px; }
  .rw-article h3.rw-subhead { font-size: 18px; margin-top: 30px; }
  .rw-key-takeaway { padding: 18px 20px; }
  .rw-quote { padding: 22px 22px 18px; margin: 28px 0; }
  .rw-quote-text { font-size: 18px !important; }
  .rw-highlight { padding: 18px 20px; margin: 24px 0; }
  .rw-takeaways, .rw-watch { padding: 22px 22px; }
  .rw-takeaways h2, .rw-watch h2 { font-size: 19px; }
  .rw-footer-cta { padding: 40px 22px; margin-top: 48px; }
  .rw-list li { font-size: 14.5px; padding: 12px 16px 12px 34px; }
  .rw-list li::before { top: 19px; }
  .rw-cta-product {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 18px;
    margin: 36px 0;
  }
  /* Desktop pins media to 220×220; without resetting width here the
     fixed 220px leaks through on iOS Safari and crops the vial photo
     to the left edge. Keep width fluid (width:100% — avoids that iOS
     fixed-width bug) but use a SQUARE box like desktop: the old 16/10
     box cropped the tall vial top + bottom (object-fit:cover). Cap +
     center it so the media reads as a tidy product shot, not a
     full-bleed banner that dominates the single-column card. */
  .rw-cta-product__media {
    width: 100%;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: none;
  }
  .rw-cta-product__row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  /* Full-width CTA button at this width — easier thumb target than
     the right-aligned desktop position, and the 44px min-height is
     necessary because this is a span inside an anchor (the global
     button-target rule in tokens.css doesn't catch nested span). */
  .rw-cta-product__btn {
    justify-content: center;
    min-height: 44px;
    padding: 12px 20px;
    width: 100%;
  }
}

/* ============================================================
   rw-chart — inline SVG data visualizations
   Same white frame + hairline border + 12px radius as the hero
   animation block. Charts are pure SVG (no JS dependency) so they
   render in any reader and degrade gracefully when JS is off.
   Palette mirrors molecule.js: blurple primary (#5C4DFF), electric
   accent (#1500FE), halo tertiary (#A3B9FF), ink for axis text,
   slate-2 for labels.
============================================================ */
.rw-chart {
  /* Break out of the 720px article column on wide viewports so the
     chart frame gets up to 1080px of horizontal canvas — easier to
     read for dense bar charts, timelines, and pathway diagrams. The
     translateX(-50%) + margin-left: 50% pattern centers within the
     viewport while letting width exceed the parent container.
     On viewports < 1144px the clamp keeps it within (100vw - 48px)
     so it never goes edge-to-edge nor overflows. Mobile @media query
     below pulls it back inside the column for narrow phones. */
  width: min(calc(100vw - 48px), 1080px);
  max-width: 1080px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 32px;
  margin-bottom: 32px;
  padding: 0 32px;
  box-sizing: border-box;
}
.rw-chart__frame {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 26px 28px 22px;
}
.rw-chart__h {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
.rw-chart__sub {
  font-size: 13px;
  color: var(--slate);
  margin: 0 0 18px;
  line-height: 1.5;
  max-width: 60ch;
}
.rw-chart__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.rw-chart__cite {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--slate-2);
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.rw-chart__cite a { color: var(--blurple); text-decoration: none; }
.rw-chart__cite a:hover { text-decoration: underline; }

/* SVG element styling — set defaults so individual chart authors
   don't have to repeat themselves. Override per-element with attrs. */
.rw-chart__svg .rw-axis line,
.rw-chart__svg .rw-axis path {
  stroke: var(--hairline-strong);
  stroke-width: 1;
  fill: none;
}
.rw-chart__svg .rw-axis text,
.rw-chart__svg .rw-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  fill: var(--slate);
  letter-spacing: 0.02em;
}
.rw-chart__svg .rw-tick {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--slate-2);
}
.rw-chart__svg .rw-bar { fill: var(--blurple); transition: fill .15s; }
.rw-chart__svg .rw-bar--accent { fill: var(--contrast); }     /* electric #1500FE */
.rw-chart__svg .rw-bar--halo { fill: var(--halo); }
.rw-chart__svg .rw-bar--muted { fill: var(--hairline-strong); }
.rw-chart__svg .rw-line {
  fill: none;
  stroke: var(--blurple);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rw-chart__svg .rw-line--accent { stroke: var(--contrast); stroke-dasharray: 4 4; }
.rw-chart__svg .rw-area { fill: var(--blurple); fill-opacity: 0.10; }
.rw-chart__svg .rw-dot { fill: var(--blurple); }
.rw-chart__svg .rw-dot--accent { fill: var(--contrast); }
.rw-chart__svg .rw-value {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--ink);
}
.rw-chart__svg .rw-value--on-bar { fill: #fff; }
.rw-chart__svg .rw-baseline { stroke: var(--ink); stroke-width: 1.2; }

@media (max-width: 760px) {
  /* Cancel the wide-viewport translateX break-out — on narrow phones
     the chart fits within the article column the normal way. Padding
     tightened so the SVG canvas can use most of the screen width:
     was 22px (container) + 18px (frame) = 40px per side, now 12px +
     12px = 24px per side. That extra 32px of horizontal canvas is
     where the bars + labels live, so it directly improves
     readability. */
  .rw-chart {
    width: 100%;
    margin: 24px auto;
    padding: 0 12px;
    transform: none;
  }
  .rw-chart__frame { padding: 18px 12px 16px; border-radius: 4px; }
  .rw-chart__h { font-size: 15.5px; }
  .rw-chart__sub { font-size: 12.5px; margin-bottom: 14px; }
  /* SVG ships with `overflow: visible` so the axis labels rendered
     outside the viewBox still paint — without it the smaller frame
     padding would clip "Preclinical (rodent…)" tick labels that hang
     off the chart's left/bottom edges. */
  .rw-chart__svg { overflow: visible; }
  /* Bump label/tick font-sizes from 9.5/9 to 11.5/10.5 so axis and
     tick labels stay readable inside the SVG's automatic-shrink.
     The SVG viewBox is fixed (700×360) so when it scales down to a
     ~340px-wide display, every text element shrinks proportionally
     — a 9.5px viewBox unit becomes ~4.6px on screen, illegible.
     11.5px stays around 5.6px on a 375px viewport while not pushing
     the labels past their column position. */
  .rw-chart__svg .rw-axis text,
  .rw-chart__svg .rw-label { font-size: 11.5px; }
  .rw-chart__svg .rw-tick { font-size: 10.5px; }
  .rw-chart__svg .rw-value { font-size: 11.5px; }
}

/* Very-narrow phones (<400px): drop the container padding entirely
   so the chart goes near-edge-to-edge. The frame still keeps a tight
   internal pad so the SVG never touches the rounded corner. */
@media (max-width: 400px) {
  .rw-chart {
    padding: 0 6px;
  }
  .rw-chart__frame { padding: 16px 8px 14px; }
}



/* ───────────────────────────────────────────────────────────────
   Footer-CTA — static related-article list (auto-generated).
   Sits inside .rw-footer-cta BEFORE the existing 2-button row.
   Crawlers + no-JS readers see this; article-relations.js replaces
   the whole .rw-footer-cta at runtime with its dynamic block for
   users with JS enabled.
─────────────────────────────────────────────────────────────── */
.rw-footer-cta__related {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
}
.rw-footer-cta__related li { padding: 0; margin: 0; }
.rw-footer-cta__related a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  transition: opacity .15s, color .15s;
}
.rw-footer-cta__related a:hover { opacity: 0.7; }
.rw-footer-cta__related-type {
  font-family: var(--font-meta);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-2);
}
.rw-footer-cta__related-title {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: var(--ink);
}
.rw-footer-cta__related a:hover .rw-footer-cta__related-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 600px) {
  .rw-footer-cta__related {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .rw-footer-cta__related-title { font-size: 14px; }
}


/* ---------- Article hero — category color overlay ---------- */
/* Mirrors the .rs-card__hero tint+grain composition used on the
   research index. The static <img> sits at the base layer; the
   ::before pseudo-element multiplies the per-category gradient over
   it; the ::after grain tile finishes with paper texture. Data-class
   on the <aside class="rw-hero-anim" data-class="..."> selects the
   right gradient. Categories match the research-index mapping:
   tissue / dermal / ghrh / metabolic / longevity / neuro / immune /
   education. */
.rw-hero-anim__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}
.rw-hero-anim__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.65 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}
/* z-order: img base → ::before tint → ::after grain. */
.rw-hero-anim__img { z-index: 0; }
.rw-hero-anim[data-class="dermal"] .rw-hero-anim__frame::before {
  /* highlight bottom-left · counter-flow */
    background:
      radial-gradient(ellipse 65% 55% at 15% 85%, rgba(255, 196, 128, 0.55), transparent 60%),
      linear-gradient(220deg, var(--sunset) 0%, #5a1f00 100%);
}
.rw-hero-anim[data-class="education"] .rw-hero-anim__frame::before {
  /* highlight left-mid · horizontal flow · neutral slate
       (education sits outside the brand-color rotation —
       foundational explainer content, not a peptide class). */
    background:
      radial-gradient(ellipse 55% 70% at 8% 50%, rgba(203, 213, 225, 0.55), transparent 60%),
      linear-gradient(190deg, var(--slate) 0%, #1e293b 100%);
}
.rw-hero-anim[data-class="ghrh"] .rw-hero-anim__frame::before {
  /* highlight top-left · steep diagonal */
    background:
      radial-gradient(ellipse 65% 55% at 20% 18%, rgba(93, 168, 255, 0.55), transparent 60%),
      linear-gradient(130deg, var(--royal) 0%, #00193e 100%);
}
.rw-hero-anim[data-class="immune"] .rw-hero-anim__frame::before {
  /* highlight bottom-center · upward pull */
    background:
      radial-gradient(ellipse 65% 55% at 50% 92%, rgba(255, 238, 128, 0.55), transparent 60%),
      linear-gradient(140deg, var(--yellow) 0%, #4a3d00 100%);
}
.rw-hero-anim[data-class="longevity"] .rw-hero-anim__frame::before {
  /* highlight right-mid · soft flow */
    background:
      radial-gradient(ellipse 55% 70% at 92% 50%, rgba(255, 181, 217, 0.55), transparent 60%),
      linear-gradient(170deg, var(--magenta) 0%, #66143e 100%);
}
.rw-hero-anim[data-class="metabolic"] .rw-hero-anim__frame::before {
  /* highlight bottom-right · top-down */
    background:
      radial-gradient(ellipse 65% 55% at 85% 80%, rgba(77, 151, 255, 0.50), transparent 60%),
      linear-gradient(180deg, var(--electric) 0%, #050a3e 100%);
}
.rw-hero-anim[data-class="neuro"] .rw-hero-anim__frame::before {
  /* highlight top-center · vertical pull */
    background:
      radial-gradient(ellipse 65% 50% at 50% 8%, rgba(163, 185, 255, 0.55), transparent 60%),
      linear-gradient(195deg, var(--blurple) 0%, #1e1b4b 100%);
}
.rw-hero-anim[data-class="tissue"] .rw-hero-anim__frame::before {
  /* highlight top-right · diagonal flow */
    background:
      radial-gradient(ellipse 70% 60% at 80% 15%, rgba(0, 212, 255, 0.55), transparent 60%),
      linear-gradient(160deg, var(--cyan) 0%, #003748 100%);
}


/* ============================================================
   rw-email-capture — research-updates signup card
   A .rw-cta-product twin (same grid card, media, chips, button
   classes) whose action is an email form instead of a product
   link. Sits at the top of high-intent articles (where-to-buy,
   stack guides). Bound by scripts/email-capture.js.
   ============================================================ */
.rw-email-capture { cursor: default; }
/* display:flex would defeat the hidden attribute's UA display:none —
   the JS hides the form after a successful capture. */
.rw-email-capture__form[hidden] { display: none; }
.rw-email-capture__form {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: auto;
  padding-top: 14px;
}
.rw-email-capture__input {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: #fff;
}
.rw-email-capture__input:focus {
  outline: none;
  border-color: var(--blurple);
}
.rw-email-capture button.rw-cta-product__btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
}
/* The card is a form, not a link — suppress the arrow the product
   cards append to the button label. */
.rw-email-capture .rw-cta-product__btn::after { content: none; }
.rw-email-capture__msg {
  font-size: 14px !important;
  margin: 12px 0 0 !important;
  color: var(--ink) !important;
  font-weight: 600;
}
.rw-email-capture__msg--error { color: #b42318 !important; }
@media (max-width: 760px) {
  .rw-email-capture__form {
    flex-direction: column;
    gap: 12px;
  }
  .rw-email-capture__input { min-height: 44px; }
}