/* wheretobuypeptides.org — site-specific additions.
   Everything else (tokens, article, hub, chrome) is lifted from peptriva.
   This file holds only what the store's CSS had no equivalent for: the
   wordmark, the homepage money-page sections, and the A–Z index. */

/* ── Logo lockup — pin mark + wordmark ────────────────────────────── */
.wtbp-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--black);
  white-space: nowrap;
}
.wtbp-mark__pin {
  /* Sized off the header row rather than the (now absent) wordmark text.
     The supplied logo is a wide 4.7:1 lockup, so height is the constraint. */
  height: 26px;
  width: auto;
  flex-shrink: 0;
  color: var(--blurple);
  display: block;
}
@media (max-width: 720px) { .wtbp-mark__pin { height: 22px; } }
.wtbp-mark__text {
  font-family: 'Switzer', var(--font-display, 'Inter Tight'), system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  /* Initialisms need air, not the negative tracking a lowercase wordmark
     wants — four caps set tight read as one blob. */
  letter-spacing: 0.02em;
  line-height: 1;
}
.wtbp-mark--light { color: #fff; }
/* A dropped-in logo may hard-code its fills rather than using currentColor.
   Knocking it to pure white covers both cases: currentColor logos are
   already white here, and black ones invert cleanly. */
.wtbp-mark--light .wtbp-mark__pin { color: #fff; filter: brightness(0) invert(1); }
.site-header__logo {
  text-decoration: none;
  /* The lockup is only ~20px tall; the link around it needs to be tappable. */
  padding: 10px 6px;
  margin: -10px -6px;
}

/* ── Footer stage — our own atmosphere, not peptriva's painterly wash ── */
.pf-stage {
  background: #08080f url("/assets/footer-bg.webp") center / cover no-repeat;
}
.pf-card { border-color: rgba(255, 255, 255, 0.18); }
.pf-cell { border-color: rgba(255, 255, 255, 0.13) !important; }
.pf-btn { background: #fff; color: #08080f; }
.pf-btn:hover { background: var(--halo); }

/* ── Slant motif ───────────────────────────────────────────────────
   The wordmark leans forward, has flat-cut terminals and thin light slits
   through solid forms. Rather than skew the type — which reads badly at
   text sizes — the lean is carried by the small graphic furniture: the
   marker before an eyebrow, the trust bullets, the card pills. Enough to
   rhyme with the logo, not enough to look like a motion-blur filter. */
:root { --slant: -12deg; }

.wtbp-slant,
.hp-sec__eyebrow::before,
.bl-kicker::before {
  content: "";
  display: inline-block;
  width: 3px; height: 0.92em;
  margin-right: 8px;
  vertical-align: -0.1em;
  background: currentColor;
  transform: skewX(var(--slant));
}

/* ── Homepage hero ────────────────────────────────────────────────── */
.hp-hero {
  max-width: 1160px;
  margin: 0 auto;
  padding: 64px 32px 40px;
  box-sizing: border-box;
}
.hp-hero__eyebrow {
  font-family: var(--font-meta, 'JetBrains Mono'), monospace;
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate-2);
  margin: 0 0 18px;
}
.hp-hero__h {
  font-family: var(--font-display, 'Inter Tight'), sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--black);
  margin: 0 0 22px;
  max-width: 15ch;
}
.hp-hero__lede {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
  color: var(--slate);
  margin: 0 0 28px;
  max-width: 62ch;
}
.hp-hero__row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hp-trust {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.hp-trust span {
  font-size: 13px; color: var(--slate-2);
  display: inline-flex; align-items: center; gap: 8px;
}
.hp-trust span::before {
  content: ""; width: 3px; height: 13px;
  background: var(--blurple); flex-shrink: 0;
  transform: skewX(var(--slant));
}

/* ── Generic section shell ────────────────────────────────────────── */
.hp-sec { max-width: 1160px; margin: 0 auto; padding: 52px 32px; box-sizing: border-box; }
/* Full-bleed tint, but the content stays on the 1160px column the rest of
   the page uses — so the padding absorbs the gutter rather than a wrapper. */
.hp-sec--tint {
  background: var(--surface);
  max-width: none;
  padding-left: max(32px, calc((100% - 1160px) / 2 + 32px));
  padding-right: max(32px, calc((100% - 1160px) / 2 + 32px));
}
.hp-sec__eyebrow {
  font-family: var(--font-meta, 'JetBrains Mono'), monospace;
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blurple); margin: 0 0 14px;
}
.hp-sec__h {
  font-family: var(--font-display, 'Inter Tight'), sans-serif;
  font-weight: 700; font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.12; letter-spacing: -0.028em;
  color: var(--black); margin: 0 0 16px; max-width: 24ch;
}
.hp-sec__bd { font-size: 16.5px; line-height: 1.62; color: var(--slate); max-width: 68ch; margin: 0 0 26px; }
.hp-sec__bd + .hp-sec__bd { margin-top: -12px; }

/* ── Compound grid (A–Z + "find your peptide") ────────────────────── */
.cp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.cp-card {
  display: block;
  border: 1px solid var(--card-border);
  border-radius: 13px;
  padding: 18px 18px 16px;
  background: #fff;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cp-card:hover {
  border-color: var(--blurple);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(92, 77, 255, .10);
}
.cp-card__name {
  font-family: var(--font-display, 'Inter Tight'), sans-serif;
  font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
  color: var(--black); margin: 0 0 5px;
}
.cp-card__dek { font-size: 13.5px; line-height: 1.5; color: var(--slate-2); margin: 0 0 12px; }
.cp-card__links { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-card__link {
  font-family: var(--font-meta, 'JetBrains Mono'), monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blurple);
  background: rgba(92, 77, 255, .07);
  border-radius: 999px; padding: 4px 9px;
}

/* ── Comparison / criteria table ──────────────────────────────────── */
.hp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 22px; }
.hp-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14.5px; }
.hp-table th, .hp-table td {
  text-align: left; padding: 13px 16px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top; line-height: 1.5;
}
.hp-table th {
  font-family: var(--font-meta, 'JetBrains Mono'), monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate-2); border-bottom-color: var(--hairline-strong);
  white-space: nowrap;
}
.hp-table td:first-child { font-weight: 600; color: var(--black); }
.hp-table tr:last-child td { border-bottom: 0; }

/* ── A–Z index letter rails ───────────────────────────────────────── */
.az-rail {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 0 28px; margin: 0 0 8px;
  border-bottom: 1px solid var(--hairline);
}
.az-rail a {
  font-family: var(--font-meta, 'JetBrains Mono'), monospace;
  font-size: 12px; font-weight: 600;
  width: 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--slate); background: var(--surface); text-decoration: none;
}
.az-rail a:hover { background: var(--blurple); color: #fff; }
.az-group { padding: 30px 0 4px; }
.az-group__letter {
  font-family: var(--font-display, 'Inter Tight'), sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blurple); margin: 0 0 14px;
  display: flex; align-items: center; gap: 9px;
}
.az-group__letter::after {
  content: ""; flex: 1; height: 2px; background: var(--hairline);
  transform: skewX(var(--slant));
}

/* ── Peptide calculator ───────────────────────────────────────────── */
.pc {
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: #fff;
  padding: 26px 28px 28px;
  margin: 0 0 28px;
}
.pc__presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.pc__preset {
  font-family: var(--font-meta, 'JetBrains Mono'), monospace;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--hairline-strong); background: #fff; color: var(--slate);
  transition: all .15s ease;
}
.pc__preset:hover { border-color: var(--blurple); color: var(--blurple); }
.pc__preset[aria-pressed="true"] { background: var(--blurple); border-color: var(--blurple); color: #fff; }
.pc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.pc__field { display: flex; flex-direction: column; gap: 7px; }
/* .cm-find__input reserves 38px of left padding for the search icon
   it normally carries; these fields have no icon. */
.pc__num { padding-left: 14px; font: 600 17px/1.2 var(--font-display, sans-serif); }
.pc__label {
  font-family: var(--font-meta, 'JetBrains Mono'), monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate-2);
}
.pc__row { display: flex; gap: 8px; }
.pc__row .cm-find__input { flex: 1 1 auto; }
.pc__row .cm-select { flex: 0 0 96px; min-width: 0; padding-right: 28px; }
.pc__out {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2px; margin: 24px 0 0; border-radius: 12px; overflow: hidden;
  background: var(--hairline);
}
.pc__cell { background: var(--surface); padding: 16px 18px; }
.pc__cell--hero { background: var(--black); }
.pc__cell-l {
  font-family: var(--font-meta, 'JetBrains Mono'), monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate-2); margin: 0 0 6px;
}
.pc__cell--hero .pc__cell-l { color: rgba(255,255,255,.55); }
.pc__cell-v {
  font: 700 22px/1.15 var(--font-display, 'Inter Tight'), sans-serif;
  letter-spacing: -0.022em; color: var(--black); margin: 0;
}
.pc__cell--hero .pc__cell-v { color: #fff; }
.pc__error { color: #b3261e; font-size: 14px; line-height: 1.5; margin: 16px 0 0; }
.pc__error:empty { display: none; }
.pc__work { margin: 20px 0 0; padding: 18px 20px; background: var(--surface); border-radius: 12px; }
.pc__work p { font-family: var(--font-meta, 'JetBrains Mono'), monospace; font-size: 13px; line-height: 1.65; color: var(--slate); margin: 0 0 6px; }
.pc__work p:last-child { margin-bottom: 0; }
.pc__work b { color: var(--black); font-weight: 600; }

/* ── Blog surface ──────────────────────────────────────────────────
   Card language lifted from peptriva's /catalog rebuild: horizontal
   cards on a #FDFDFD ground, 1px hairline border that goes to ink on
   hover, a 2px lift with a soft shadow, and the image scaling 1.07
   underneath. Same knobs, different content. */
:root {
  --bl-r: 16px;
  --bl-card-bg: #FDFDFD;
}

.bl-band { max-width: 1240px; margin: 0 auto; padding: 46px 32px; box-sizing: border-box; }
.bl-band--tint {
  background: var(--surface);
  max-width: none;
  padding-left: max(32px, calc((100% - 1240px) / 2 + 32px));
  padding-right: max(32px, calc((100% - 1240px) / 2 + 32px));
}
.bl-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin: 0 0 22px;
  padding-bottom: 16px; border-bottom: 1px solid var(--hairline-strong);
}
.bl-head__h {
  font-family: var(--font-display, 'Inter Tight'), sans-serif;
  font-weight: 700; font-size: clamp(21px, 2.6vw, 28px);
  letter-spacing: -0.026em; color: var(--black); margin: 0;
}
.bl-head__all {
  font-family: var(--font-meta, 'JetBrains Mono'), monospace;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blurple); text-decoration: none;
  white-space: nowrap;
  /* Standalone nav link, so it needs a real tap target — the negative
     margin keeps the padding from shifting it off the baseline it shares
     with the section heading. */
  padding: 11px 4px;
  margin: -11px -4px;
}
.bl-head__all:hover { text-decoration: underline; }

/* Shared card chrome */
.bl-card, .bl-lead {
  background: var(--bl-card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--bl-r);
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: inherit;
  display: flex;
  transition: border-color .16s ease, transform .22s ease, box-shadow .22s ease;
}
@media (hover: hover) and (pointer: fine) {
  .bl-card:hover, .bl-lead:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .09);
  }
  .bl-card:hover .bl-photo img,
  .bl-lead:hover .bl-photo img { transform: scale(1.07); }
}
.bl-photo { position: relative; overflow: hidden; display: block; background: var(--surface); }
.bl-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.bl-pill {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  transform: skewX(var(--slant));
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 999px;
  font-family: var(--font-meta, 'JetBrains Mono'), monospace;
  font-weight: 700; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; line-height: 1;
  background: rgba(255, 255, 255, .92); color: var(--black);
  backdrop-filter: blur(8px);
}
/* Counter-skew the label so the chip leans but the text stays upright. */
.bl-pill > span, .bl-pill { }
.bl-pill { padding-left: 13px; padding-right: 13px; }
.bl-pill--star { background: var(--blurple); color: #fff; }
.bl-body { display: flex; flex-direction: column; min-width: 0; }
.bl-kicker {
  font-family: var(--font-meta, 'JetBrains Mono'), monospace;
  font-weight: 600; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blurple); margin: 0;
}
.bl-h {
  font-family: var(--font-display, 'Inter Tight'), sans-serif;
  font-weight: 600; letter-spacing: -0.022em; line-height: 1.15;
  color: var(--ink); margin: 0;
}
.bl-dek {
  color: var(--slate); line-height: 1.55; margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.bl-meta {
  display: flex; align-items: center; gap: 9px; margin-top: auto;
  font-family: var(--font-meta, 'JetBrains Mono'), monospace;
  font-size: 11px; color: var(--slate-2);
}
.bl-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--hairline-strong); }

/* Lead — one wide card opening the page */
.bl-lead { flex-direction: row; align-items: stretch; min-height: 340px; margin: 0 0 34px; }
.bl-lead .bl-photo { flex: 0 0 50%; }
.bl-lead .bl-body { padding: 40px 42px; gap: 14px; justify-content: center; flex: 1; }
.bl-lead .bl-h { font-size: clamp(26px, 3.2vw, 36px); }
.bl-lead .bl-dek { font-size: 16px; -webkit-line-clamp: 4; }

/* Standard — 2-up horizontal */
.bl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 24px; }
.bl-card { flex-direction: row; align-items: stretch; min-height: 210px; }
.bl-card .bl-photo { flex: 0 0 40%; max-width: 260px; }
.bl-card .bl-body { padding: 24px 26px; gap: 10px; flex: 1; justify-content: center; }
.bl-card .bl-h { font-size: 20px; }
.bl-card .bl-dek { font-size: 14.5px; -webkit-line-clamp: 3; }


@media (max-width: 900px) {
  .bl-grid { grid-template-columns: 1fr; }
  .bl-lead { flex-direction: column; min-height: 0; }
  .bl-lead .bl-photo { flex: none; aspect-ratio: 16 / 9; width: 100%; }
  .bl-lead .bl-body { padding: 26px 24px 28px; }
  .bl-card { min-height: 0; }
  .bl-card .bl-photo { flex: 0 0 34%; max-width: 150px; }
  .bl-card .bl-body { padding: 18px 20px; }
  .bl-card .bl-h { font-size: 17px; }
  .bl-card .bl-dek { -webkit-line-clamp: 2; font-size: 13.5px; }
  .bl-band { padding: 34px 20px; }
}

/* ── Article index rows (/articles) ───────────────────────────────── */
.ix-group { margin: 0 0 42px; }
.ix-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 20px;
  align-items: baseline; padding: 13px 0;
  border-bottom: 1px solid var(--hairline); text-decoration: none;
}
.ix-row:hover .ix-title { color: var(--blurple); }
.ix-title {
  font-family: var(--font-display, 'Inter Tight'), sans-serif;
  font-weight: 600; font-size: 16.5px; letter-spacing: -0.018em;
  color: var(--ink); transition: color .14s ease;
}
.ix-kind {
  font-family: var(--font-meta, 'JetBrains Mono'), monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate-2); white-space: nowrap;
}
.ix-dek { grid-column: 1 / -1; font-size: 14px; line-height: 1.5; color: var(--slate-2); margin: 0; }

/* ── Product card, alternate treatment ─────────────────────────────
   Used where the imported articles carried an email-capture card. Same
   component as .rw-cta-product — it exists so an article can carry two
   commercial cards without them reading as the same block twice.

   That separation used to be made by inverting the card to black. CTA
   cards are never black (owner rule, 2026-08-13), so it is now a pale
   blurple wash with a blurple hairline: still plainly a different panel
   from the plain white card, and a much better ground for the blue vial
   mockup than an ink panel was, since the image is itself a saturated
   blue field and the two were competing.

   Everything below is only what the wash needs. The inverted type rules
   are gone rather than lightened — on a pale ground the component's own
   light-background colours are already right, and re-stating them would
   be a second place for them to drift. */
.rw-cta-product--alt {
  background: #F2F3FF;
  border-color: rgba(92, 77, 255, 0.28);
}
.rw-cta-product--alt .rw-cta-product__chip {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(92, 77, 255, 0.20);
}
.rw-cta-product--alt .rw-cta-product__eyebrow {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(92, 77, 255, 0.22);
}
/* The media well only shows if the image fails to fill it. The blue mockup
   is square and edge-to-edge, so the inherited `cover` leaves none of it
   visible. The `contain` + 10px padding that used to live here was for the
   white 2048² per-SKU renders — a small vial centred on #FDFDFD, which
   `cover` cropped to the empty middle. Those no longer appear on store
   cards, and keeping `contain` would have framed the blue mockup in a
   white border. */
.rw-cta-product--alt .rw-cta-product__media { background: var(--surface); }
@media (hover: hover) and (pointer: fine) {
  .rw-cta-product--alt:hover { border-color: var(--blurple); }
  .rw-cta-product--alt:hover .rw-cta-product__btn { background: var(--blurple); }
}

/* ── Rail card deltas ──────────────────────────────────────────────
   The card and its track are the storefront's (.hp-blend-card /
   .hp-blends-track in lifted.css). Two things it has no equivalent for:
   its title slot holds a wordmark <img>, not text, and its photo is
   square because it frames a vial — editorial cards want 16:9. */
.hp-blend-card__title {
  font-family: var(--font-display, 'Inter Tight'), sans-serif;
  font-weight: 600; font-size: 17.5px; letter-spacing: -0.02em;
  line-height: 1.2; color: var(--ink); margin: 0;
}
.hp-blend-card__photo { aspect-ratio: 16 / 9; }
.hp-blend-card__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.hp-blend-card { text-decoration: none; color: inherit; scroll-snap-align: start; }
.hp-blend-card__footer { margin-top: auto; }
/* The track clips overflow, so a lift would be cut off — shadow instead. */
@media (hover: hover) and (pointer: fine) {
  .hp-blend-card:hover { border-color: var(--ink); box-shadow: 0 10px 26px rgba(0,0,0,.10); }
}
.hp-blends-track-wrap { position: relative; }

/* The storefront pairs its track with .hp-blends-dots — a JS-driven
   pagination indicator. This is a static site with no scroll listener on
   the rails, so the affordance is a text cue instead. */
.bl-track__hint {
  font-family: var(--font-meta, 'JetBrains Mono'), monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate-2);
  margin: 4px 0 0; display: flex; align-items: center; gap: 7px;
}
.bl-track__hint::before {
  content: ""; width: 3px; height: 11px; background: var(--blurple);
  transform: skewX(var(--slant, -12deg));
}

/* ── Continue-reading rail ───────────────────────────────────────────────
   Moved verbatim out of scripts/article-relations.js, which injected it
   with a runtime <style> tag. The rail is static markup now (see
   tools/gen_related.py), so its styling has to arrive with the stylesheet
   rather than after JavaScript — otherwise the rail flashes unstyled, and
   for a crawler that never runs the script it stays that way. Not a
   redesign: byte-for-byte the same rules, just relocated. */
.ra-related {
  max-width: 720px;
  margin: 48px auto 24px;
  padding: 32px 0 0;
  border-top: 1px solid var(--hairline);
}
.ra-related__head { margin-bottom: 24px; }
.ra-related__lbl {
  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 10px;
}
.ra-related__h {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--ink);
  text-wrap: balance;
}
.ra-related__sub {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.55;
  margin: 0;
  max-width: 56ch;
}
.ra-related__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.ra-related__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ra-related__card:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}
.ra-related__card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.ra-related__class {
  font-family: var(--font-meta);
  font-weight: 600; font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blurple);
}
.ra-related__card[data-class="tissue"]    .ra-related__class { color: #0a7d3e; }
.ra-related__card[data-class="dermal"]    .ra-related__class { color: #b35a00; }
.ra-related__card[data-class="ghrh"]      .ra-related__class { color: var(--blurple); }
.ra-related__card[data-class="metabolic"] .ra-related__class { color: var(--electric); }
.ra-related__card[data-class="longevity"] .ra-related__class { color: #6b21a8; }
.ra-related__card[data-class="neuro"]     .ra-related__class { color: #be185d; }
.ra-related__card[data-class="immune"]    .ra-related__class { color: #0e7490; }
.ra-related__card[data-class="education"] .ra-related__class { color: var(--slate-2); }
.ra-related__type {
  font-family: var(--font-meta);
  font-weight: 600; font-size: 9.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate-2);
  padding: 2px 8px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  white-space: nowrap;
}
.ra-related__tier {
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font-meta);
  font-weight: 600; font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.ra-related__tier--fda    { background: rgba(10, 125, 62, 0.1);  color: #0a7d3e; }
.ra-related__tier--p3     { background: rgba(92, 77, 255, 0.1);  color: var(--blurple); }
.ra-related__tier--p2     { background: rgba(0, 23, 188, 0.08);  color: var(--electric); }
.ra-related__tier--pilot  { background: rgba(255, 142, 0, 0.12); color: #b35a00; }
.ra-related__tier--pre    { background: rgba(0, 23, 188, 0.08);  color: var(--electric); }
.ra-related__tier--neg    { background: rgba(220, 38, 38, 0.08); color: #b91c1c; }
.ra-related__tier--review { background: rgba(107, 124, 147, 0.12); color: var(--slate); }
.ra-related__title {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.22;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.ra-related__dek {
  font-size: 12.5px;
  color: var(--slate);
  line-height: 1.5;
  margin: 0;
}
.ra-related__meta {
  margin-top: auto;
  font-family: var(--font-meta);
  font-weight: 500; font-size: 10.5px;
  color: var(--slate-2);
  letter-spacing: 0.04em;
}
.ra-related__foot {
  margin-top: 22px;
  text-align: center;
}
.ra-related__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-meta);
  font-weight: 600; font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--blurple);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: #fff;
  transition: border-color .15s, color .15s;
}
.ra-related__cta:hover { border-color: var(--blurple); color: var(--electric); }

/* Auto-interlinked terms — subtle dotted underline so the
   reader knows it's a cross-link without it screaming. */
.ra-link {
  color: var(--ink);
  text-decoration: underline dotted;
  text-decoration-color: var(--blurple);
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
.ra-link:hover {
  color: var(--blurple);
  text-decoration-style: solid;
}

/* Match the article body's horizontal gutter on mobile (.rw-article is
   0 32px on desktop → 0 22px at ≤760px). Without this the related grid
   ran edge-to-edge while the rest of the page kept its 22px inset. */
@media (max-width: 760px) {
  .ra-related { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 600px) {
  .ra-related { padding-top: 28px; margin: 40px auto 16px; }
  .ra-related__grid { grid-template-columns: 1fr; }
}