/* =============================================================
   APOTHIFY — Editorial research journal
   Off-white newsprint canvas. Serif display. Mono technical data.
   Asymmetric layouts. Rule lines as structure.
   ============================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body, h1, h2, h3, h4, p, ul, ol, blockquote, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video, picture { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
fieldset { border: 0; padding: 0; }
hr { border: 0; }

/* Force the HTML `hidden` attribute to actually hide elements. The browser's
   UA stylesheet already does this with `[hidden] { display: none }`, but any
   author rule that sets `display: flex|grid|block|...` on the same element
   wins on equal specificity and the element stays visible. Bumping this rule
   with !important fixes a whole class of "empty placeholder box visible
   before JS runs" bugs (compare cards, peptide grid, filter dropdowns…). */
[hidden] { display: none !important; }

/* ---------- Tokens ---------- */
:root {
  /* Editorial palette */
  --paper:     #F6F4EE;       /* newsprint off-white */
  --paper-2:   #ECEAE2;       /* slightly darker tint for soft bands */
  --bg:        #FFFFFF;       /* clean white surface for cards */
  --bg-deep:   #0F1820;       /* deep dark for footer + ink */

  /* Brand */
  --brand:     #0096C7;
  --brand-ink: #00688D;
  --brand-deep:#024864;
  --brand-soft:#E8F2F6;

  /* Text */
  --ink:       #0F1820;       /* black-ish editorial ink */
  --ink-2:     #1F2D3C;
  --ink-3:     #4F5C6B;
  --ink-mute:  #8A95A2;
  --rule:      #0F1820;       /* full ink for rules at low opacity */

  /* Lines */
  --line:      #D9D3C5;       /* warm rule color on paper */
  --line-2:    #B8AF9D;
  --line-cool: #DDE6EE;       /* cool rule for white surfaces */

  /* Status */
  --info-bg:   #E8F2F6;
  --warn-bg:   #FAEED9;
  --warn-ink:  #8A5A18;
  --block-bg:  #F4D9D2;
  --block-ink: #8A2A1C;
  --ok-bg:     #DCEAD2;
  --ok-ink:    #2C5C26;
  --ok: var(--ok-ink); --warn: var(--warn-ink); --block: var(--block-ink);

  /* Shadows — very restrained on paper */
  --shadow-1: 0 1px 0 rgba(15,24,32,.06);
  --shadow-2: 0 18px 40px rgba(15,24,32,.10);

  /* Radius — refined, mostly sharp */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Layout */
  --maxw: 1280px;
  --maxw-text: 760px;
  --pad-x: clamp(1.25rem, 5vw, 3rem);
  /* Vertical rhythm: section padding on each side. Adjacent sections
     produce 2× this gap, so 5.5rem max keeps the desktop rhythm at
     ~176px between sections (was ~288px). Comfortable, not airy. */
  --pad-y: clamp(3rem, 5.5vw, 5.5rem);

  /* Type stacks */
  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: "New York", "Iowan Old Style", "Hoefler Text", Georgia, "Times New Roman", serif;
  --font-mono:  ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", "Menlo", monospace;
}

/* ---------- Base ---------- */
html { font-size: 16px; }
@media (min-width: 600px) { html { font-size: 17px; } }
@media (min-width: 1100px) { html { font-size: 18px; } }

body {
  font-family: var(--font-sans);
  font-feature-settings: "kern", "liga", "ss01";
  background: var(--paper);
  color: var(--ink-2);
  line-height: 1.55;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — serif. Line-height generous enough to never clip cap-height. */
h1, h2, h3 {
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 600;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: -0.018em;
  hyphens: none;
  padding-top: .12em;   /* protect ascenders from being clipped by parent containers */
}
h1 {
  font-size: clamp(2.5rem, 8vw, 7rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
h2 {
  font-size: clamp(1.85rem, 3.5vw + 1rem, 3.75rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
}
h3 {
  font-size: clamp(1.5rem, 1.5vw + 1.1rem, 2.25rem);
  letter-spacing: -0.018em;
  line-height: 1.12;
}
h4 {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
p { line-height: 1.65; color: var(--ink-3); }
.lead {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, .5vw + .95rem, 1.3rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 58ch;
  font-weight: 400;
}

a { color: var(--ink); text-decoration: none; transition: color .12s; }
a:hover { color: var(--brand-ink); }
::selection { background: var(--brand-soft); color: var(--ink); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------- Editorial labels ---------- */
.label {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label-brand { color: var(--brand-ink); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow::before {
  content: ""; width: 24px; height: 1px; background: currentColor;
}

.mono { font-family: var(--font-mono); }

/* Rules — editorial separator lines */
.rule {
  display: block;
  border-top: 1px solid var(--line);
  margin-block: 0;
}

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad-x); }
.container-narrow { width: 100%; max-width: var(--maxw-text); margin: 0 auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--pad-y); }
.section-paper { background: var(--paper); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -1000px; top: -1000px; padding: .65rem 1rem; background: var(--ink); color: #fff; border-radius: var(--r-sm); z-index: 999; }
.skip-link:focus { left: 1rem; top: 1rem; }
.muted { color: var(--ink-mute); }
.text-center { text-align: center; }

/* ---------- Editorial grid helpers ---------- */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }

/* ---------- Header — rule under it like a newspaper masthead ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,244,238,.88);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.site-header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.15rem;
}
.brand-link { display: inline-flex; align-items: center; line-height: 0; }
.brand-mark {
  display: block;
  width: 140px;
  height: auto;
  aspect-ratio: 1802 / 537;
  transition: opacity .15s;
}
.brand-link:hover .brand-mark { opacity: .82; }
@media (min-width: 700px) { .brand-mark { width: 168px; } }

.nav {
  display: none;
  justify-content: center;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 1024px) { .nav { display: flex; } }
.nav a {
  position: relative;
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-block: .35rem;
  white-space: nowrap;
  transition: color .12s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--brand-ink); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.cart-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .95rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: .76rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background .15s, transform .12s;
}
.cart-pill:hover { background: var(--brand); color: #fff; transform: translateY(-1px); }
.cart-pill[data-empty="true"] .cart-count { display: none; }
.cart-count {
  background: var(--brand); color: #fff;
  border-radius: var(--r-pill);
  padding: 0 .5rem; min-width: 1.35rem; height: 1.35rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700;
}
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: background .15s;
}
.menu-btn:hover { background: var(--ink); color: #fff; }
@media (min-width: 1024px) { .menu-btn { display: none; } }
.menu-btn svg { width: 18px; height: 18px; }

/* ---------- Mobile drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: none; }
.drawer[aria-hidden="false"] { visibility: visible; pointer-events: auto; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(15,24,32,.6); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s; }
.drawer[aria-hidden="false"] .drawer-backdrop { opacity: 1; }
.drawer-panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(86vw, 380px);
  background: var(--paper);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px rgba(15,24,32,.18);
}
.drawer[aria-hidden="false"] .drawer-panel { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
.drawer-head { flex-shrink: 0; }
.drawer-head .brand-mark { width: 140px; }
.drawer-close { width: 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--ink); }
.drawer-close:hover { background: var(--ink); color: #fff; }
/* The nav region takes whatever vertical space is left after the head and
   scrolls if the menu is taller than the panel. Without this, on shorter
   phones the last item slides under the viewport and can't be reached. */
.drawer-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.25rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: .35rem;
}
.drawer-nav a {
  padding: 1rem 0;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  letter-spacing: -.018em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.drawer-nav a:hover { color: var(--brand-ink); }

/* ---------- HERO — Editorial cover ---------- */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(1.75rem, 3.5vw, 3rem);
  background: var(--paper);
}
/* .hero::after was a thin 1px divider between the hero and the ticker. Peter
   asked to remove it — the ticker's own contrast against the paper is a strong
   enough break, and the divider added a strange void above it. The bottom
   padding on .hero is also tightened (max 3rem instead of 5rem + 5rem of
   pseudo-element margin) so the ticker now reads as a deliberate next step
   rather than an island. */
.hero-meta-row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.hero-meta-row span { display: inline-flex; align-items: center; gap: .5rem; }
.hero-meta-row .dot { width: 6px; height: 6px; background: var(--brand); border-radius: 50%; }

.hero-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 980px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}
.hero h1 {
  margin-top: -.06em;
  max-width: 14ch;
  font-family: var(--font-serif);
  font-weight: 600;
}
.hero h1 em {
  font-style: italic;
  color: var(--brand-ink);
  font-weight: 600;
}
.hero-side { display: flex; flex-direction: column; gap: 1.5rem; }
.hero-side .lead { color: var(--ink-2); font-size: 1.075rem; line-height: 1.55; max-width: 38ch; }

.hero-search {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 600px;
}
.hero-search input {
  width: 100%;
  padding: 1.15rem 4rem 1.15rem 1.4rem;
  font-size: 1.05rem;
  font-family: var(--font-sans);
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
}
.hero-search input::placeholder { color: var(--ink-mute); }
.hero-search input:focus { outline: none; border-color: var(--brand); box-shadow: 4px 4px 0 var(--ink); }
.hero-search button {
  position: absolute; right: -1.5px; top: -1.5px; bottom: -1.5px;
  width: 64px;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--ink);
  transition: background .15s;
}
.hero-search button:hover { background: var(--brand); border-color: var(--brand); }

/* Hero autocomplete dropdown — same shape as the library + terminology
   dropdowns. Absolutely positioned under the .hero-search form (which
   has position:relative inline). */
.hero-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  z-index: 40; list-style: none; margin: 0; padding: 0;
  background: #fff; border: 1.5px solid var(--ink);
  max-height: min(60vh, 460px); overflow-y: auto;
  box-shadow: 0 12px 28px rgba(15, 24, 32, .18);
}
.hero-suggest[hidden] { display: none; }
.hero-suggest-item {
  padding: .8rem 1.15rem; cursor: pointer;
  border-bottom: 1px solid var(--paper-2);
  display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem;
  align-items: baseline;
}
.hero-suggest-item:last-child { border-bottom: 0; }
.hero-suggest-item[aria-selected="true"],
.hero-suggest-item:hover { background: var(--paper); }
.hero-suggest-name {
  font-family: var(--font-serif); font-size: 1.05rem; font-weight: 500;
  color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-suggest-cat {
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute); white-space: nowrap;
}
.hero-suggest mark { background: rgba(0, 150, 199, .18); color: inherit; padding: 0 1px; border-radius: 2px; }
.hero-suggest-empty {
  padding: 1rem 1.15rem; color: var(--ink-mute);
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em;
  text-align: center;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.5rem; }

/* ---------- Search autocomplete dropdown ---------- */
.search-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  background: #fff;
  border: 1.5px solid var(--ink);
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 6px 6px 0 var(--ink);
}
.search-hit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: background .12s;
}
.search-hit:last-child { border-bottom: 0; }
.search-hit:hover, .search-hit.is-active { background: var(--paper); }
.search-hit-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--ink);
}
.search-hit-cat {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}

/* ---------- Marquee ticker ---------- */
.ticker {
  background: var(--ink);
  color: #fff;
  padding-block: 1.1rem;
  overflow: hidden;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.ticker-track {
  display: inline-flex;
  white-space: nowrap;
  /* Default duration is a fallback. wireTicker() in app.js measures the
     actual track width on load and sets a duration that holds the scroll
     speed at a comfortable reading pace regardless of how many peptides
     the library grows to. */
  animation: ticker-scroll 180s linear infinite;
  will-change: transform;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 1.5rem;
  padding-inline: 1.5rem;
  font-family: var(--font-mono);
  font-size: .92rem;
  letter-spacing: .04em;
  color: #C5CDD6;
}
.ticker-item b { color: #fff; font-weight: 500; }
.ticker-item .dot { width: 4px; height: 4px; background: var(--brand); border-radius: 50%; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Stats — editorial big numbers ---------- */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 800px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding-block: clamp(2rem, 4vw, 3.5rem);
  padding-inline: clamp(1rem, 2vw, 2rem);
  border-right: 1px solid var(--line);
}
.stat:nth-child(2n) { border-right: none; }
@media (min-width: 800px) {
  .stat:nth-child(2n) { border-right: 1px solid var(--line); }
  .stat:last-child { border-right: none; }
}
@media (max-width: 799px) {
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.stat-num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, 4vw + 1rem, 4.5rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--ink);
  line-height: 1;
}
.stat-num em { font-style: italic; color: var(--brand); }
.stat-label {
  display: block;
  margin-top: .75rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Section heads ---------- */
.section-head { max-width: 740px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { margin-top: 1rem; }
.section-head .lead { margin-top: 1.25rem; }

.section-head.split {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: end;
  max-width: none;
}
@media (min-width: 800px) {
  .section-head.split { grid-template-columns: 1fr auto; }
  .section-head.split h2 { margin-top: 0; }
}

/* ---------- Peptide cards — editorial catalog entries ---------- */
.catalog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 700px) { .catalog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); } }
/* Author rule below uses `display: flex` on `.peptide-card`, which has the
   same specificity as the UA `[hidden] { display: none }` — so author wins
   and the card stays visible when JS sets the `hidden` attribute. Explicit
   override restores the expected behavior for the search filter + the
   in-stock toggle on /peptides/. */
.peptide-card[hidden] { display: none !important; }
.peptide-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  background: var(--bg);
  color: inherit;
  text-decoration: none;
  transition: background .2s;
}
.peptide-card:hover { background: var(--paper); }
.peptide-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.peptide-card:hover::before { transform: scaleX(1); }
.peptide-card-num {
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.25rem;
}
.peptide-card-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.5vw + 1.2rem, 2.1rem);
  letter-spacing: -.025em;
  line-height: 1;
  color: var(--ink);
  /* Stop hyphens from acting as wrap points (so "Alpha-1", "CJC-1295",
     "5-Amino-1MQ" stay intact) and balance any remaining wrap. */
  hyphens: none;
  -webkit-hyphens: none;
  text-wrap: balance;
}
.peptide-card-eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-top: .85rem;
}
.peptide-card-summary {
  margin-top: 1rem;
  color: var(--ink-3);
  font-size: .95rem;
  line-height: 1.55;
  flex: 1;
}
.peptide-card-foot {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between; align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--ink-2);
}
.peptide-card-foot small { color: var(--ink-mute); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  padding: 1rem 1.65rem;
  background: var(--bg);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  min-height: 52px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s, transform .12s, box-shadow .15s;
  /* Safety net: prevent any button from overflowing its parent container
     on narrow viewports. Without these, an uppercase + letter-spaced label
     inside a card with padding can push past the card edge on mobile. */
  max-width: 100%;
  box-sizing: border-box;
}
/* On viewports under 480px, allow long button labels to wrap rather than
   overflow. The uppercase letter-spacing makes most labels noticeably wider
   than their literal character count would suggest. */
@media (max-width: 480px) {
  .btn { white-space: normal; word-break: break-word; line-height: 1.25; }
}
.btn:hover { background: var(--ink); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink); padding-inline: .25rem; min-height: auto; }
.btn-ghost:hover { background: transparent; color: var(--brand-ink); }
.btn-lg { padding: 1.15rem 1.9rem; font-size: .85rem; min-height: 56px; }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ---------- Badges + tags ---------- */
.badge {
  display: inline-flex; align-items: center;
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
}
.badge.brand   { background: var(--brand-soft); color: var(--brand-ink); border-color: transparent; }
.badge.ok      { background: var(--ok-bg);    color: var(--ok-ink);    border-color: transparent; }
.badge.warn,
.badge.caution { background: var(--warn-bg);  color: var(--warn-ink);  border-color: transparent; }
.badge.block   { background: var(--block-bg); color: var(--block-ink); border-color: transparent; }

.tag {
  display: inline-block;
  padding: .25rem .75rem;
  background: var(--paper-2);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink-2);
}

/* ---------- Spotlight — magazine cover ---------- */
.spotlight {
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .spotlight { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); } }

.spotlight-body { padding: clamp(2rem, 5vw, 4.5rem); }
.spotlight-body h3 {
  font-size: clamp(2.25rem, 4vw + .5rem, 4rem);
  margin-top: 1.5rem;
  letter-spacing: -.03em;
  line-height: 1.04;
}
.spotlight-body .lead { margin-top: 1.5rem; max-width: 50ch; }
.spotlight-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

.spotlight-spec {
  background: var(--ink);
  color: #C5CDD6;
  padding: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-mono);
  font-size: .85rem;
}
.spotlight-spec h4 {
  font-family: var(--font-mono);
  color: var(--brand);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
}
.spotlight-spec ul { display: flex; flex-direction: column; gap: 0; margin-top: 1.5rem; }
.spotlight-spec li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: .85rem;
}
.spotlight-spec li:last-child { border-bottom: 0; }
.spotlight-spec li b { color: #fff; font-weight: 500; }
.spotlight-spec li span { color: var(--brand); }
.spotlight-spec p { color: var(--ink-mute); margin-top: 1.25rem; font-size: .75rem; line-height: 1.55; }

/* ---------- Values / principles row ---------- */
.values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 800px) { .values { grid-template-columns: repeat(3, 1fr); } }
.value {
  padding: clamp(2rem, 3vw, 2.5rem) clamp(1.5rem, 2vw, 2rem);
  border-right: 1px solid var(--line);
}
.value:last-child { border-right: 0; }
@media (max-width: 799px) {
  .value { border-right: 0; border-bottom: 1px solid var(--line); }
  .value:last-child { border-bottom: 0; }
}
.value .value-num {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--brand-ink);
}
.value h4 { font-family: var(--font-serif); font-size: 1.65rem; font-weight: 600; letter-spacing: -.02em; margin-block: 1rem .65rem; color: var(--ink); line-height: 1.05; }
.value p { color: var(--ink-3); font-size: .95rem; line-height: 1.55; }

/* ---------- Categories — TOC ---------- */
.toc { border-top: 1px solid var(--line); }
.toc-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.5rem, 2.5vw, 2rem) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: background .15s, padding-left .2s;
}
.toc-row:hover { background: var(--bg); padding-left: 1rem; }
.toc-num {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--ink-mute);
  white-space: nowrap;
}
.toc-name {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 1.5vw + 1rem, 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
}
.toc-count {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--ink-mute);
  display: none;
}
@media (min-width: 700px) { .toc-count { display: inline; } }
.toc-arrow {
  font-size: 1.3rem;
  color: var(--ink-mute);
  transition: transform .2s, color .15s;
}
.toc-row:hover .toc-arrow { color: var(--brand-ink); transform: translateX(4px); }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; margin-top: 1.5rem; border-top: 1px solid var(--line); }

/* Home "Reader questions" section. We switched the outer container from
   container-narrow to container so the section is the same width as its
   neighbors on desktop; .home-faq-wrap caps the content width inside that
   wider container so the questions still read at a comfortable measure.
   .home-faq tightens the top padding on desktop only — the default .section
   padding was leaving an awkward gap between this block and the categories
   section above it. */
.home-faq-wrap { max-width: 720px; margin: 0 auto; }
@media (min-width: 900px) {
  .section.home-faq { padding-top: clamp(2rem, 3.5vw, 3rem); }
}
.faq {
  border-bottom: 1px solid var(--line);
  background: transparent;
  transition: background .15s;
}
.faq[open] { background: var(--bg); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.6rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.15rem, .5vw + 1rem, 1.45rem);
  letter-spacing: -.018em;
  color: var(--ink);
  user-select: none;
  transition: background .12s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { display: none; content: ""; }
.faq summary:hover { background: var(--bg); }
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-size: 1.4rem; font-weight: 400;
  color: var(--brand);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  transition: transform .25s cubic-bezier(.22,1,.36,1), background-color .15s, color .15s, border-color .15s;
}
.faq[open] summary::after { content: "−"; background: var(--ink); color: #fff; border-color: var(--ink); transform: rotate(180deg); }
.faq-body { padding: 0 1.5rem 1.75rem; color: var(--ink-3); line-height: 1.65; }
.faq-body p { margin: 0; max-width: 70ch; }

/* ---------- Forms ---------- */
label { display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .5rem; }
.field { margin-bottom: 1.25rem; }
.input, .select, .textarea {
  width: 100%;
  padding: 1.05rem 1.15rem;
  font-size: 1rem;
  font-family: var(--font-sans);
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  transition: box-shadow .12s, border-color .12s;
}
.input::placeholder { color: var(--ink-mute); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 4px 4px 0 var(--ink);
}
.field-error { color: var(--block-ink); font-size: .88rem; margin-top: .4rem; }

.checkbox {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 0;
  cursor: pointer;
  transition: border-color .15s;
}
.checkbox:hover { border-color: var(--ink); }
.checkbox input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--brand); flex-shrink: 0; }
.checkbox span { color: var(--ink-2); line-height: 1.5; font-size: .96rem; }
.checkbox span b { color: var(--ink); }
.checkbox:has(input:checked) { border-color: var(--brand); }

/* ---------- Newsletter ---------- */
.newsletter {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(4rem, 7vw, 6rem);
}
.newsletter .eyebrow { color: var(--brand); }
.newsletter .eyebrow::before { background: var(--brand); }
.newsletter h2 { color: #fff; margin-top: 1rem; max-width: 18ch; }
.newsletter .lead { color: #C5CDD6; margin-top: 1.5rem; max-width: 52ch; }
.newsletter-inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: end; }
@media (min-width: 900px) { .newsletter-inner { grid-template-columns: 1.2fr .8fr; } }
.newsletter-form {
  display: grid;
  gap: .75rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 600px) { .newsletter-form { grid-template-columns: 1fr auto; align-items: stretch; } }
.newsletter-form input[type="email"] {
  background: transparent;
  border: 1.5px solid #fff;
  color: #fff;
  padding: 1.1rem 1.2rem;
}
.newsletter-form input[type="email"]::placeholder { color: #8F99A4; }
.newsletter-form input[type="email"]:focus { border-color: var(--brand); box-shadow: 4px 4px 0 var(--brand); }
.newsletter-form .btn { background: #fff; color: var(--ink); border-color: #fff; min-width: 160px; }
.newsletter-form .btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ============================================================
   FOOTER — desktop multi-column left-aligned, mobile centered stack
   ============================================================ */
.site-footer {
  background: var(--bg-deep);
  color: #C5CDD6;
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
  position: relative;
}
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,150,199,.5) 50%, transparent 100%);
}

.footer-grid {
  display: grid;
  /* Mobile (<800px): brand block full width, then the four link columns
     pair up in 2-up rows so the footer is half the height and labels stay
     readable. The brand spans both columns via `grid-column: 1 / -1`. */
  gap: 2.25rem 1.5rem;
  grid-template-columns: 1fr 1fr;
  text-align: left;
}
.footer-grid .footer-brand {
  grid-column: 1 / -1;
  text-align: center;
}
@media (min-width: 800px) {
  .footer-grid {
    grid-template-columns: minmax(0, 2.4fr) repeat(4, minmax(0, 1fr));
    text-align: left;
    align-items: start;
    gap: 2.5rem 3rem;
  }
  .footer-grid .footer-brand {
    grid-column: auto;
    text-align: left;
  }
}
.footer-brand .footer-mark {
  width: 168px; height: auto; aspect-ratio: 1802 / 537;
  filter: brightness(0) invert(1); opacity: .95;
  margin: 0 auto 1.5rem;
}
@media (min-width: 800px) { .footer-brand .footer-mark { margin: 0 0 1.5rem; } }
.footer-brand p {
  color: #9CABBA;
  font-size: .98rem;
  line-height: 1.6;
  max-width: 40ch;
  margin: 0 auto;
}
@media (min-width: 800px) { .footer-brand p { margin: 0; } }
.footer-col h4 {
  color: #fff;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .65rem; }
.footer-col a {
  color: #9CABBA;
  font-size: .94rem;
  white-space: nowrap;
  transition: color .12s;
}
.footer-col a:hover { color: #fff; }

.footer-social {
  display: inline-flex; gap: 1.5rem;
  margin-top: 1.5rem; align-items: center;
  justify-content: center;
}
@media (min-width: 800px) { .footer-social { justify-content: flex-start; } }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: #C5CDD6;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.footer-social a:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.06); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; display: block; }

.footer-disclaimer {
  margin-top: clamp(3rem, 5vw, 4rem);
  padding: 1.5rem 1.75rem;
  background: rgba(255,255,255,.04);
  border-radius: var(--r-sm);
  /* Bumped from default 400 to 500 so the legally-important framing reads
     with a bit more visual weight than the muted-color it sits on. */
  font-weight: 500;
  color: #9CABBA;
  font-size: .82rem;
  line-height: 1.65;
  text-align: center;
}
@media (min-width: 800px) { .footer-disclaimer { text-align: left; } }
/* Mailing address line — sits between the disclaimer and the © row. Required
   identifier for CAN-SPAM, useful for trust signals, and provides a real
   postal address for the rare letter that needs to reach us. */
.footer-address {
  margin-top: 1.25rem;
  font-style: normal;
  color: #9CABBA;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.6;
}
/* Per design request 2026-05-28: address line is centered on desktop too
   (not left-aligned). Mobile remains centered as the inherited default. */
@media (min-width: 800px) { .footer-address { text-align: center; } }
.footer-bottom {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  justify-content: center; align-items: center;
  color: #5F7080;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
@media (min-width: 800px) { .footer-bottom { justify-content: space-between; } }

/* First-section guard: prevent sticky header from overlapping the page heading */
main > section:first-child { padding-top: clamp(2.5rem, 4vw, 4rem); }

/* ============================================================
   Body section heading orphan fix.
   `text-wrap: balance` (CSS Text Module Level 4, supported in Chrome 114+,
   Safari 17.4+, Firefox 121+) tells the browser to even out line lengths
   so multi-line headings can't leave a single word stranded on the last
   line. On desktop, short-enough headings stay on one line; longer ones
   wrap into balanced pairs (no widow). On mobile, the same rule prevents
   a single word from sitting alone after a wrap. Pure CSS, no markup or
   copy changes anywhere.

   Scope: body section headings ONLY. Hero H1s, eyebrows, and ticker text
   are excluded (per design — those have their own wrap rules).
   ============================================================ */
.peptide-section h2,
.legal-prose h2,
.cat-intro-title,
.press-h,
.sp-drawer-title,
.cat-next-title,
.learn-toc-label {
  text-wrap: balance;
  /* Fallback for browsers that don't yet support `balance`. Hyphens
     stay off so we never insert a soft hyphen into a word that the
     editorial team didn't approve. */
  hyphens: none;
}

/* ============================================================
   WCAG 2.2 AA lift — tighter focus appearance + minimum target size.
   2.4.13 Focus Appearance: thick visible outline with strong contrast.
   2.5.8 Target Size (min): 24×24 for any pointer target (we go to 32+).
   ============================================================ */
:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Skip-link reveal-on-focus pattern (added below) — already there in layout
   but make sure the focus state is visible. */
.skip-link:focus { outline-offset: 0; }

/* ============================================================
   Print stylesheet — researchers will print peptide pages as
   one-page reference sheets. Strip nav, footer, forms, the cart,
   the entry modal; reflow the peptide-grid to a single column;
   surface the canonical URL after the title for citation.
   ============================================================ */
@media print {
  @page { margin: 18mm 14mm; size: auto; }
  html, body { background: #fff !important; color: #000 !important; font-size: 11pt; line-height: 1.45; }
  /* Hide every non-content surface */
  .site-header, .site-footer, .drawer, #mobile-drawer, .cart-pill,
  .menu-btn, .hero-actions, .hero-search, .ticker, .dual-cta-section,
  .product-module, .pep-plain, .toc, .cmp-cards,
  .cmp-flow, .cmp-share, .cmp-email, .sp-quick, .sp-contact, .sp-topics,
  .nf-suggest, .nf-search, .fw-result-cta-row, .tg-filters, .tg-alpha,
  .tg-search, .footer-disclaimer, .footer-address, .footer-bottom,
  form, .badge, .placeholder, [data-cmp-flow], [data-finder-results] {
    display: none !important;
  }
  /* Make sure peptide-page content prints clean and full-width */
  .peptide-hero .hero-grid { grid-template-columns: 1fr !important; }
  .peptide-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .container, .container-narrow { max-width: none !important; padding: 0 !important; }
  /* Show full URLs after links */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  a[href^="mailto"]::after, a[href^="tel"]::after { content: ""; }
  /* Show the canonical URL near the title */
  h1::after {
    display: block;
    content: "apothify.com" attr(data-print-url);
    font-family: var(--font-mono); font-size: 9pt; color: #444;
    margin-top: .5rem;
  }
  /* Safety callout stays visually distinct in print */
  .safety-callout { border: 1px solid #000 !important; padding: .5rem .75rem !important; background: #f0f0f0 !important; }
  /* Avoid orphans in long-form */
  h1, h2, h3 { page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
}

/* /about/ — editorial long-form layout, narrow column for readability */
.about-body {
  max-width: 70ch; margin: clamp(2rem, 4vw, 3rem) 0;
  color: var(--ink-2); line-height: 1.7; font-size: 1.05rem;
}
.about-body h2 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw + .35rem, 2rem);
  letter-spacing: -.02em; line-height: 1.2;
  color: var(--ink);
  margin: clamp(2rem, 4vw, 2.75rem) 0 .85rem;
  /* In-body H2s must never wrap to a second line. Headlines are short
     enough (≤ ~22 chars) that no-wrap fits every viewport without
     horizontal overflow. The page H1 is NOT affected by this rule. */
  white-space: nowrap;
}
.about-body h2:first-child { margin-top: 0; }
.about-body p { margin: 0 0 1.15rem; }
.about-body a { color: var(--brand-ink); border-bottom: 1px solid currentColor; }
.about-body a:hover { color: var(--ink); }

/* Learn page — in-page TOC + grouped guide stacks */
.learn-toc {
  display: grid; gap: .75rem;
  grid-template-columns: 1fr;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(2rem, 4vw, 3rem);
}
@media (min-width: 700px)  { .learn-toc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .learn-toc { grid-template-columns: repeat(4, 1fr); } }
.learn-toc-link {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1rem 1.25rem;
  background: #fff; border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: border-color .12s, background .12s, transform .12s;
}
.learn-toc-link:hover { border-color: var(--ink); background: var(--paper); transform: translateY(-1px); }
.learn-toc-label {
  font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600;
  letter-spacing: -.015em; color: var(--ink);
}
.learn-toc-count {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.learn-group { margin: clamp(2.5rem, 5vw, 4rem) 0; scroll-margin-top: 96px; }
.learn-group:first-of-type { margin-top: 0; }

/* Per-category editorial intro block — sits above the catalog grid on
   /categories/<slug>/ pages. Single column, flowing top to bottom like a
   magazine department opener. (Earlier 2-col version left a big dead band
   under the title on desktop; the prose reads better single column.) */
.cat-intro {
  margin: clamp(2rem, 4vw, 3rem) 0;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
}
.cat-intro-eyebrow {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
  margin: 0 0 .5rem;
}
.cat-intro-title {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.45rem, 2.2vw + .35rem, 1.95rem);
  letter-spacing: -.02em; line-height: 1.2;
  margin: 0 0 1.25rem; color: var(--ink);
  max-width: 38ch;
}
.cat-intro-body { max-width: 72ch; }
.cat-intro-body p {
  color: var(--ink-2); line-height: 1.65;
  margin: 0 0 1rem; font-size: 1rem;
}
.cat-intro-body p:last-child { margin-bottom: 0; }

/* /categories/ "Not sure where to start" CTA block — sits under the ToC
   and routes users into Finder, Compare, or Learn depending on whether they
   know the topic, have two peptides in mind, or want background first. */
.cat-next-cta {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(2rem, 4vw, 3rem) 0 0;
  border-top: 1px solid var(--line);
}
.cat-next-eyebrow {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute); margin: 0 0 .35rem;
}
.cat-next-title {
  font-family: var(--font-serif); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(1.6rem, 2.4vw + .4rem, 2.1rem); line-height: 1.15;
  margin: 0 0 .65rem; color: var(--ink);
}
.cat-next-sub { color: var(--ink-2); margin: 0 0 1.5rem; max-width: 60ch; line-height: 1.55; }
.cat-next-grid {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .cat-next-grid { grid-template-columns: repeat(3, 1fr); } }
.cat-next-card {
  display: grid; grid-template-columns: 48px 1fr auto;
  gap: 1rem; align-items: center;
  padding: 1.25rem 1.25rem;
  background: #fff; border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: border-color .12s, background .12s, transform .12s;
}
.cat-next-card:hover { border-color: var(--ink); background: var(--paper); transform: translateY(-1px); }
.cat-next-icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; border-radius: 50%; flex-shrink: 0;
}
.cat-next-body { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.cat-next-label {
  font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink); line-height: 1.25;
}
.cat-next-hint {
  font-size: .9rem; color: var(--ink-2); line-height: 1.45;
}
.cat-next-arrow {
  font-family: var(--font-mono); font-size: 1.3rem; color: var(--ink-mute);
  flex-shrink: 0;
}
.cat-next-card:hover .cat-next-arrow { color: var(--ink); }

/* ---------- Peptide page editorial ---------- */
.peptide-hero {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
}
.peptide-hero.has-molecule { position: relative; overflow: hidden; }
.peptide-hero.has-molecule > .container { position: relative; z-index: 2; }
.peptide-hero-mol {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .34;
}
.peptide-hero-mol img {
  width: 108%;
  max-width: none;
  height: auto;
  transform: translateY(6%);
}
@media (max-width: 760px) {
  .peptide-hero-mol { opacity: .20; }
  .peptide-hero-mol img { width: 140%; transform: translateY(2%); }
}
@media print {
  .peptide-hero-mol { display: none; }
}

/* ---------- Home spotlight molecule layer ----------
   The featured peptide on the homepage gets a faint molecular structure
   behind its spec-sheet block. Same rendering pipeline as the peptide
   hero — sourced from /img/molecules/<slug>.png. Only present when the
   featured peptide's slug is in the molecule manifest (see
   scripts/peptide_chem.py). Subtler than the peptide hero (~16%) since
   the homepage layout is already dense. */
.spotlight.has-molecule { position: relative; overflow: hidden; }
.spotlight.has-molecule .spotlight-body,
.spotlight.has-molecule .spotlight-spec { position: relative; z-index: 2; }

/* ---------- Compare card molecule layer ----------
   Each peptide card in the side-by-side compare view gets its own
   chemistry watermark when the slug has a molecule rendered. Lower
   opacity (~14%) so the side-by-side facts read cleanly. Only the body
   area gets the molecule; the colored letter chip and category strip
   stay on top via z-index. */
.cmp-card.has-molecule { position: relative; overflow: hidden; }
.cmp-card.has-molecule .cmp-card-strip,
.cmp-card.has-molecule .cmp-card-remove,
.cmp-card.has-molecule .cmp-card-body,
.cmp-card.has-molecule .cmp-card-foot { position: relative; z-index: 2; }
/* The molecule fills the whole card body area below the navy strip.
   Position from below the 60px-tall strip downward so the chemistry
   sits behind the facts, not behind the brand-coloured top band. */
.cmp-card-mol {
  position: absolute;
  left: 0; right: 0;
  top: 60px; bottom: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .26;
  overflow: hidden;
}
.cmp-card-mol img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 760px) { .cmp-card-mol { opacity: .20; } }
@media print { .cmp-card-mol { display: none; } }

/* ---------- Compare card product thumbnail ----------
   Square thumbnail sits at the top-left of the card body, before the name.
   Floats with the title so the layout reads "image · name · facts" on a
   wide card and stacks gracefully on narrow viewports. */
.cmp-card-thumb {
  width: clamp(72px, 14vw, 96px);
  aspect-ratio: 1 / 1;
  float: right;
  margin: 0 0 .75rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cmp-card-thumb picture,
.cmp-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 480px) {
  .cmp-card-thumb { width: 64px; margin-left: .6rem; margin-bottom: .5rem; }
}

/* ---------- Finder result thumbnail ----------
   Floats inside .fw-result-body so the existing 2-column card grid
   (num | body) stays intact. The body's text content wraps naturally
   around the floated thumb on the right. */
.fw-result-thumb {
  float: right;
  width: clamp(64px, 12vw, 88px);
  aspect-ratio: 1 / 1;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  margin: 0 0 .75rem 1rem;
}
.fw-result-thumb picture,
.fw-result-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.fw-result-cta-row { clear: both; }
@media (max-width: 480px) {
  .fw-result-thumb { width: 56px; margin-left: .6rem; }
}

/* ---------- Cart thumbnail column ----------
   Small square at the left of every line item. The existing cart-table
   already has stacking behavior on mobile (.cart-cell-meta becomes block);
   the thumb cell joins the same stack at narrow widths. */
.cart-cell-thumb {
  padding: 1.5rem 1rem 1.5rem 0;
  vertical-align: top;
  width: 88px;
}
.cart-line-thumb {
  display: block;
  width: 80px;
  height: 80px;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
}
.cart-line-thumb picture,
.cart-line-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 600px) {
  .cart-cell-thumb { display: block; padding: 1rem 0 .5rem; width: auto; }
  .cart-line-thumb { width: 72px; height: 72px; }
}
.peptide-hero h1 {
  font-size: clamp(2.5rem, 5vw + 1rem, 5.5rem);
  line-height: 1.04;
  max-width: 14ch;
}
.peptide-hero .lead { margin-top: 1.5rem; }
.badge-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }

.peptide-section {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.peptide-section:last-child { border-bottom: 0; }
.peptide-section h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2vw + .5rem, 2.25rem);
  letter-spacing: -.02em;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
}
.peptide-section h2 .section-num {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ink-mute);
}
/* Paragraph rhythm inside peptide pages and learn guides. The global reset
   strips all p margins; this restores breathing room between consecutive
   paragraphs in the same section. Last child has no bottom margin so it
   sits flush against the section's bottom border. */
.peptide-section p {
  margin-bottom: 1.15rem;
  max-width: 70ch;
}
.peptide-section p:last-child { margin-bottom: 0; }
.peptide-section ul,
.peptide-section ol {
  margin: 0 0 1.15rem;
  padding-left: 1.4rem;
  line-height: 1.65;
  list-style: disc;
  max-width: 70ch;
}
.peptide-section li { margin-bottom: .5rem; }

.safety-callout {
  background: var(--info-bg);
  border-left: 3px solid var(--brand);
  padding: 1.5rem 1.75rem;
  margin-top: 1rem;
}
.safety-callout p { color: var(--ink-2); }

/* Product purchase module (peptide page sidebar) */
.product-module {
  background: #fff;
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 1024px) { .product-module { position: sticky; top: 96px; } }
.product-module h2 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.product-module .price {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 3vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--ink);
  line-height: 1;
  margin-top: .85rem;
}
.product-module .size { color: var(--ink-mute); font-size: .88rem; margin-top: .5rem; font-family: var(--font-mono); letter-spacing: .04em; }
.product-module .coa-link {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--ink); font-weight: 600; font-size: .9rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.product-module .coa-link:hover { color: var(--brand-ink); border-color: var(--brand-ink); }

.peptide-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .peptide-grid { grid-template-columns: 1.5fr .85fr; } }

/* ---------- Cart / checkout / track ---------- */
.qty-controls { display: inline-flex; border: 1.5px solid var(--ink); }
.qty-controls button { width: 40px; height: 40px; transition: background .12s; }
.qty-controls button:hover { background: var(--ink); color: #fff; }
.qty-controls input { width: 48px; text-align: center; border: 0; font-family: var(--font-mono); }
.cart-summary {
  background: var(--bg);
  border: 1px solid var(--ink);
  padding: 1.75rem 2rem;
}
.cart-summary .row { padding-block: .5rem; justify-content: space-between; display: flex; }
.cart-summary .total { font-family: var(--font-serif); font-weight: 600; font-size: 1.75rem; color: var(--ink); border-top: 1px solid var(--ink); padding-top: 1rem; margin-top: .65rem; letter-spacing: -.018em; }

.progress { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; margin-top: 1.5rem; background: var(--line); border: 1px solid var(--line); }

/* ---------- Flash ---------- */
.flash { padding: 1rem 1.25rem; border: 1px solid; margin-bottom: 1rem; font-weight: 500; }
.flash.ok    { background: var(--ok-bg);    border-color: var(--ok-ink);    color: var(--ok-ink); }
.flash.error { background: var(--block-bg); border-color: var(--block-ink); color: var(--block-ink); }
.flash.warn  { background: var(--warn-bg);  border-color: var(--warn-ink);  color: var(--warn-ink); }

/* ---------- Entry modal ---------- */
.entry-modal {
  position: fixed; inset: 0; z-index: 200;
  visibility: hidden; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.entry-modal[aria-hidden="false"] { visibility: visible; pointer-events: auto; }
.entry-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,24,32,.78);
  backdrop-filter: blur(6px);
}
.entry-modal-panel {
  position: relative;
  width: 100%; max-width: 440px;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 2.75rem 2rem;
  text-align: center;
}
.entry-modal-panel .brand-mark { width: 156px; margin: 0 auto 1.5rem; }
.entry-modal-panel h2 { font-family: var(--font-serif); font-size: 1.85rem; letter-spacing: -.025em; color: var(--ink); }
.entry-modal-panel > p { margin-top: 1rem; font-size: 1rem; color: var(--ink-2); line-height: 1.55; }
.entry-modal-panel form { display: flex; flex-direction: column; gap: .65rem; margin-top: 1.75rem; text-align: left; }
.entry-modal-panel form .row { justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.entry-modal-panel .muted { font-size: .8rem; margin-top: 1.5rem; }

.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ---------- Wizard (kept for future) ---------- */
.wizard-option { padding: 1rem 1.15rem; border: 1.5px solid var(--line); background: #fff; cursor: pointer; text-align: left; transition: background .12s, border-color .12s, transform .12s; }
.wizard-option:hover { border-color: var(--ink); transform: translateY(-1px); }
.wizard-option[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }

/* ---------- Section helpers ---------- */
.section-head { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.section-head h2 { letter-spacing: -.025em; }

/* ---------- Placeholder image box ---------- */
.placeholder {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(45deg, #D7D2C4 0 1px, transparent 1px 14px),
    #E5DFD0;
  color: #6E6553;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  overflow: hidden;
  isolation: isolate;
}
.placeholder::before {
  content: "PLACEHOLDER";
  position: absolute;
  inset: auto;
  z-index: 2;
  text-align: center;
  padding: .5rem 1rem;
  background: rgba(255,255,255,.6);
  border: 1px solid #B8AF9D;
  letter-spacing: .22em;
}
.placeholder::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.5) 45%, transparent 70%);
  transform: translateX(-100%);
  animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 60%, 100% { transform: translateX(-100%); }
  30% { transform: translateX(100%); }
}
.placeholder.placeholder-square { aspect-ratio: 1 / 1; width: 100%; }

/* ============================================================
   Real peptide product image frame.
   Wraps the <picture> for every actual peptide image (hero square,
   product module thumb, catalog card thumb, home spotlight). Carries
   the same subtle moving sheen as the placeholder, tuned more
   conservatively so it reads as a finishing detail on a real photo
   rather than a loading indicator.
   - 28% peak opacity (vs 50% on placeholders)
   - 6s cycle (vs 4s on placeholders)
   - Longer pause between sweeps (visible 35% of the cycle, hidden 65%)
   - Tight 30deg angle so the highlight is one band, not a fade
   - Honors prefers-reduced-motion
   ============================================================ */
.peptide-image-frame {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper-2);
}
.peptide-image-frame > picture,
.peptide-image-frame > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.peptide-image-frame::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(255,255,255,.28) 50%,
    transparent 62%);
  transform: translateX(-110%);
  animation: peptide-shimmer 6s ease-in-out infinite;
}
@keyframes peptide-shimmer {
  0%, 65%, 100% { transform: translateX(-110%); }
  40%          { transform: translateX(110%); }
}
@media (prefers-reduced-motion: reduce) {
  .peptide-image-frame::after { animation: none; transform: translateX(-110%); }
}
/* Card thumb in the catalog grid uses a 4:3 aspect, inheriting the
   peptide-card-thumb sizing rules. The image inside gets cover-fit so
   the square 1024×1024 source crops to a clean 4:3 strip. */
.peptide-card.with-image .peptide-card-thumb.peptide-image-frame {
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
}

/* Card variant that holds a placeholder image at the top */
.peptide-card.with-image {
  padding: 0;
  display: flex; flex-direction: column;
}
.peptide-card.with-image .peptide-card-thumb {
  width: 100%; aspect-ratio: 4 / 3; background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.peptide-card.with-image .peptide-card-body {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex; flex-direction: column;
  flex: 1;
}

/* ---------- Card (legacy class used by legal etc) ---------- */
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: clamp(1.4rem, 2.5vw, 1.8rem);
  transition: background .2s, border-color .15s;
}
.card:hover { background: var(--paper); border-color: var(--ink); }
.card p { margin-top: .65rem; color: var(--ink-3); font-size: .95rem; line-height: 1.55; }
a.card { color: inherit; display: block; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ticker-track { animation: none !important; }
}

/* ============================================================
   Page scoped CSS — moved out of inline \3c style> blocks for
   reliable loading (avoids JS innerHTML style insertion +
   CSP rendering quirks). Authored in src/templates/pages/* and
   src/js/app.js, consolidated here at build time.
   ============================================================ */

/* ---------- FINDER ---------- */
.fw-frame {
          padding: clamp(1.25rem, 3vw, 2rem) 0 8rem;
          max-width: 720px; margin: 0 auto;
          padding-inline: clamp(1rem, 3vw, 1.5rem);
          min-height: calc(100vh - 80px);
        }
        .fw-top { text-align: center; margin-bottom: 1rem; }
        .fw-top-eyebrow {
          font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
          text-transform: uppercase; color: var(--ink-mute); margin: 0 0 .35rem;
        }
        .fw-top-title {
          font-family: var(--font-serif); font-size: clamp(1.75rem, 4vw + .5rem, 2.5rem);
          font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin: 0;
        }
        .fw-top-sub { color: var(--ink-2); margin: .5rem auto 0; max-width: 44ch; font-size: .98rem; line-height: 1.5; }

        .fw-progress {
          display: flex; gap: .35rem; max-width: 280px; margin: 1.5rem auto 2rem;
        }
        .fw-pip { flex: 1; height: 4px; background: var(--paper-2); border-radius: 999px; transition: background .2s; }
        .fw-pip.is-done    { background: var(--brand); }
        .fw-pip.is-current { background: var(--ink); }

        .fw-step { animation: fw-in .22s ease both; }
        @keyframes fw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

        .fw-eyebrow {
          font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
          text-transform: uppercase; color: var(--ink-mute); margin: 0 0 .35rem;
        }
        .fw-question {
          font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw + .4rem, 2.2rem);
          font-weight: 600; letter-spacing: -.018em; line-height: 1.15; margin: 0;
        }
        .fw-sub { color: var(--ink-2); margin: .65rem 0 1.5rem; font-size: 1rem; line-height: 1.5; }

        /* ---- Option cards ---- */
        .fw-options {
          display: grid; gap: .75rem;
          grid-template-columns: 1fr;
        }
        @media (min-width: 520px) { .fw-options { grid-template-columns: 1fr 1fr; } }
        .fw-options-multi { grid-template-columns: 1fr 1fr; }
        @media (min-width: 520px) { .fw-options-multi { grid-template-columns: repeat(3, 1fr); } }

        /* TILE-style picker (category/complexity/mode) — big colorful tiles */
        .fw-options-tiles {
          display: grid; gap: .85rem;
          grid-template-columns: 1fr 1fr;
        }
        @media (min-width: 720px) { .fw-options-tiles { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }

        /* Card root IS a <label> — reset global label uppercase/mono inheritance. */
        .fw-card {
          position: relative;
          display: block; cursor: pointer;
          margin-bottom: 0;
          font-family: var(--font-sans);
          font-size: 1rem;
          letter-spacing: normal;
          text-transform: none;
          color: var(--ink);
          -webkit-tap-highlight-color: transparent;
        }
        .fw-card input { position: absolute; opacity: 0; pointer-events: none; }
        .fw-card-inner {
          display: flex; align-items: center; gap: .85rem;
          padding: 1rem 1.1rem;
          background: #fff;
          border: 1.5px solid var(--line);
          min-height: 80px;
          transition: border-color .12s, background .12s, transform .08s;
        }
        .fw-card:hover .fw-card-inner { border-color: var(--ink); }
        .fw-card:active .fw-card-inner { transform: scale(.98); }
        .fw-card input:checked + .fw-card-inner {
          border-color: var(--brand); background: var(--paper);
          box-shadow: 0 0 0 1.5px var(--brand);
        }
        .fw-card input:focus-visible + .fw-card-inner {
          outline: 3px solid var(--brand);
          outline-offset: 2px;
        }
        .fw-card-icon {
          width: 48px; height: 48px; flex-shrink: 0;
          display: inline-flex; align-items: center; justify-content: center;
          color: var(--brand-ink);
          background: var(--paper); border-radius: 12px;
          transition: background .12s, color .12s;
        }
        .fw-card input:checked + .fw-card-inner .fw-card-icon {
          background: var(--brand); color: #fff;
        }
        .fw-card-text { min-width: 0; flex: 1; }
        .fw-card-label {
          display: block;
          font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600;
          letter-spacing: -.01em; line-height: 1.2;
          color: var(--ink);
          text-transform: none;
        }
        .fw-card-hint {
          display: block; margin-top: .25rem;
          font-family: var(--font-sans); font-size: .88rem;
          line-height: 1.4; color: var(--ink-2);
          text-transform: none; letter-spacing: 0;
        }
        .fw-card-check {
          width: 28px; height: 28px;
          display: inline-flex; align-items: center; justify-content: center;
          color: var(--brand); opacity: 0; flex-shrink: 0;
          transition: opacity .12s;
        }
        .fw-card input:checked + .fw-card-inner .fw-card-check { opacity: 1; }

        .fw-card[hidden] { display: none; }

        /* ---- Tile-style overrides for the big picker steps ---- */
        .fw-options-tiles .fw-card {
          /* stretch tile to fill row height so all tiles are equal */
          display: flex;
        }
        .fw-options-tiles .fw-card-inner {
          flex-direction: column;
          align-items: center; justify-content: space-between;
          text-align: center;
          padding: 1.5rem 1rem 1.5rem;
          /* Fixed min-height so tiles are visually consistent regardless of text */
          min-height: 220px;
          width: 100%;
          gap: 1rem;
          background: #fff;
          border: 1.5px solid var(--line);
        }
        .fw-options-tiles .fw-card:hover .fw-card-inner {
          border-color: var(--brand);
          transform: translateY(-2px);
          box-shadow: 0 6px 18px rgba(0, 104, 141, .14);
        }
        .fw-options-tiles .fw-card input:checked + .fw-card-inner {
          background: var(--brand-ink); color: #fff;
          border-color: var(--brand-ink);
          box-shadow: 0 6px 18px rgba(0, 104, 141, .28);
        }
        .fw-options-tiles .fw-card-icon {
          width: 64px; height: 64px;
          background: var(--paper);
          border: 1.5px solid var(--line);
          color: var(--brand-ink);
          border-radius: 50%;
          transition: background .12s, color .12s, border-color .12s, transform .15s;
        }
        .fw-options-tiles .fw-card:hover .fw-card-icon {
          border-color: var(--brand-ink); color: var(--brand-ink);
          transform: scale(1.06);
        }
        .fw-options-tiles .fw-card input:checked + .fw-card-inner .fw-card-icon {
          background: #fff; color: var(--brand-ink); border-color: #fff;
        }
        .fw-options-tiles .fw-card-text {
          flex: 1 1 auto;
          display: flex; flex-direction: column; justify-content: center;
          gap: .35rem;
        }
        .fw-options-tiles .fw-card-label {
          font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600;
          line-height: 1.15; letter-spacing: -.015em;
          color: var(--ink);
          text-transform: none;
          /* Cap at 2 lines so cards align */
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-wrap: balance;
          hyphens: none; -webkit-hyphens: none;
        }
        .fw-options-tiles .fw-card-hint {
          font-family: var(--font-sans);
          font-size: .82rem; line-height: 1.4;
          color: var(--ink-2);
          text-transform: none; letter-spacing: 0;
          margin-top: .15rem;
          /* Cap at 2 lines so cards stay equal height */
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .fw-options-tiles .fw-card input:checked + .fw-card-inner .fw-card-label,
        .fw-options-tiles .fw-card input:checked + .fw-card-inner .fw-card-hint {
          color: #fff;
        }
        .fw-options-tiles .fw-card-check {
          position: absolute; top: .65rem; right: .65rem;
          width: 26px; height: 26px;
          background: #fff; border-radius: 50%;
          color: var(--brand-ink);
          opacity: 0;
          box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
        }
        .fw-options-tiles .fw-card input:checked + .fw-card-inner .fw-card-check {
          opacity: 1;
        }

        /* Multi-select cards (tags) — slightly smaller layout */
        .fw-options-multi .fw-card-inner { min-height: 64px; padding: .75rem .85rem; gap: .65rem; }
        .fw-options-multi .fw-card-icon { width: 32px; height: 32px; border-radius: 8px; }
        .fw-options-multi .fw-card-label { font-family: var(--font-sans); font-size: .92rem; font-weight: 500; }

        /* ---- Results ---- */
        .fw-results { min-height: 140px; }
        .fw-result-card {
          display: grid;
          /* Was 3 cols (num | body | CTA) — the CTA moved inside the body so
             the card is 2 cols now (num | body). The body owns its own CTA
             row (.fw-result-cta-row) which holds Read + Compare side by side. */
          grid-template-columns: 44px minmax(0, 1fr);
          column-gap: 1.1rem; row-gap: .65rem;
          padding: 1.2rem 1.25rem;
          background: #fff; border: 1px solid var(--line);
          margin-bottom: .85rem;
          align-items: start;
        }
        .fw-result-num {
          width: 44px; height: 44px; border-radius: 50%;
          background: var(--ink); color: #fff;
          display: inline-flex; align-items: center; justify-content: center;
          font-family: var(--font-mono); font-size: .82rem;
          margin-top: 2px;
        }
        .fw-result-body { min-width: 0; }
        .fw-result-name {
          font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600;
          letter-spacing: -.015em; line-height: 1.2; color: var(--ink); margin: 0;
        }
        .fw-result-meta {
          margin: .25rem 0 .55rem;
          font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
          text-transform: uppercase; color: var(--ink-mute);
        }
        .fw-result-blurb {
          margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.55;
        }
        .fw-result-fit {
          margin: .55rem 0 0; font-family: var(--font-mono); font-size: .72rem;
          letter-spacing: .04em; color: var(--ink-mute); line-height: 1.5;
        }
        .fw-result-fit-tag {
          display: inline-block;
          background: var(--paper); color: var(--brand-ink);
          border: 1px solid var(--line);
          padding: 2px 7px; margin-right: 6px;
          font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
          font-weight: 600;
        }
        /* Buy block for SAFE peptides that have a live product */
        .fw-result-buy {
          margin-top: .85rem; padding: .85rem 1rem;
          background: var(--paper); border: 1px solid var(--line);
          display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
        }
        .fw-result-buy.is-locked { background: #FFF7E6; border-color: #F5D58A; }
        .fw-result-price {
          font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600;
          letter-spacing: -.01em; color: var(--ink);
        }
        .fw-result-soldout {
          font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em;
          text-transform: uppercase; color: #8A5A00;
          background: #FFE7A8; border: 1px solid #E5C063;
          padding: 4px 8px; font-weight: 600;
        }
        .fw-result-add {
          padding: .55rem 1rem;
          font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
          text-transform: uppercase;
        }
        .fw-result-buy-link {
          margin-left: auto;
          font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
          text-transform: uppercase; color: var(--brand-ink);
          border-bottom: 1px solid currentColor; padding-bottom: 1px;
        }
        .fw-result-buy-link:hover { color: var(--ink); }
        .fw-result-card a.fw-result-cta {
          align-self: start;
          font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
          text-transform: uppercase; color: var(--ink);
          background: var(--paper); border: 1.5px solid var(--ink);
          padding: .7rem 1rem; text-decoration: none;
          transition: background .12s, color .12s;
          white-space: nowrap;
        }
        .fw-result-card a.fw-result-cta:hover { background: var(--ink); color: #fff; }
        /* CTA row hosts Read + Compare side by side at the bottom of the body
           column. Both buttons stretch evenly on mobile so they're easy taps. */
        .fw-result-cta-row {
          display: flex; flex-wrap: wrap; gap: .5rem;
          margin-top: .5rem;
        }
        .fw-result-cta-compare {
          /* Same base style as .fw-result-cta but visually secondary so Read
             stays the primary action. */
          background: #fff !important;
        }
        .fw-result-cta-compare:hover {
          background: var(--ink) !important; color: #fff !important;
        }
        @media (max-width: 600px) {
          .fw-result-card {
            grid-template-columns: 36px 1fr;
          }
          .fw-result-num { width: 36px; height: 36px; font-size: .72rem; }
          .fw-result-cta-row .fw-result-cta {
            flex: 1 1 calc(50% - .25rem); text-align: center;
          }
          .fw-result-buy { flex-direction: column; align-items: stretch; }
          .fw-result-buy-link { margin-left: 0; text-align: center; }
        }
        .fw-empty {
          padding: 1.5rem; background: var(--paper); border: 1px solid var(--line);
          text-align: center; color: var(--ink-mute);
        }
        .fw-empty a { color: var(--brand-ink); border-bottom: 1px solid currentColor; }

        /* Email block */
        .fw-email {
          margin-top: 2rem; padding: 1.25rem 1.35rem;
          background: var(--paper); border: 1px solid var(--line);
        }
        .fw-email-eyebrow {
          font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
          text-transform: uppercase; color: var(--ink-mute); margin: 0 0 .25rem;
        }
        .fw-email-hint { margin: 0 0 .85rem; color: var(--ink-2); font-size: .9rem; }
        .fw-email-row { display: flex; gap: .5rem; flex-wrap: wrap; }
        .fw-email-row input[type="email"] {
          flex: 1 1 220px; padding: .85rem 1rem; background: #fff;
          border: 1.5px solid var(--ink); font-size: 1rem; color: var(--ink);
        }
        .fw-email-out { margin: .65rem 0 0; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em; }
        .fw-email-out.is-ok { color: var(--ok-ink); }
        .fw-email-out.is-error { color: var(--block-ink); }

        /* ---- Bottom action bar — flows naturally below the cards.
           Uses flex so the buttons keep equal visual weight at both edges
           and the hint stays truly centered. On desktop the buttons get a
           solid brand fill so they read as primary actions, not afterthoughts. */
        .fw-bar {
          position: static;
          margin: 1.75rem 0 0;
          display: flex; align-items: center; justify-content: space-between;
          gap: 1rem;
          padding: 1.1rem clamp(1rem, 3vw, 1.5rem);
          background: var(--paper);
          border-top: 1.5px solid var(--ink);
        }
        .fw-bar-btn {
          display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
          padding: .95rem 1.6rem; min-height: 52px; min-width: 132px;
          font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
          letter-spacing: .12em; text-transform: uppercase;
          background: var(--ink); color: #fff;
          border: 2px solid var(--ink); cursor: pointer;
          transition: background .15s, color .15s, border-color .15s, transform .1s;
        }
        .fw-bar-btn:hover { background: var(--brand-ink); border-color: var(--brand-ink); }
        .fw-bar-btn:active { transform: scale(.97); }
        .fw-bar-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

        /* Back — left, ghost styled (lighter) */
        .fw-bar-btn-ghost {
          background: #fff; color: var(--ink);
        }
        .fw-bar-btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
        /* Restart — right, ghost styled with warning accent */
        .fw-bar-btn-restart {
          background: #fff; color: var(--ink);
        }
        .fw-bar-btn-restart:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

        .fw-bar-hint {
          flex: 1 1 auto;
          text-align: center;
          font-family: var(--font-mono); font-size: .76rem; letter-spacing: .12em;
          text-transform: uppercase; color: var(--ink-2);
          font-weight: 500;
          padding: 0 .5rem;
        }
        /* Keep the hint truly centered when Back is hidden (step 1): use a
           ghost placeholder so the visible buttons don't shift across steps. */
        .fw-bar-btn[hidden] {
          display: inline-flex !important;
          visibility: hidden;
          pointer-events: none;
        }
        @media (max-width: 600px) {
          .fw-bar { flex-wrap: wrap; padding: 1rem; gap: .65rem; }
          .fw-bar-btn { min-width: 0; flex: 1 1 calc(50% - .35rem); padding: .85rem .75rem; font-size: .72rem; }
          .fw-bar-hint { order: -1; flex: 1 1 100%; text-align: center; font-size: .65rem; letter-spacing: .08em; padding-bottom: .25rem; }
        }

/* ---------- COMPARE ---------- */
/* ─────────  Flow + pickers  ───────── */
    .cmp-flow {
      max-width: 540px; margin: 0 auto 2.5rem;
      display: flex; flex-direction: column; gap: 1rem;
    }

    .cmp-step {
      background: #fff;
      border: 1px solid var(--line);
      padding: 1rem 1.15rem 1.15rem;
      position: relative;
      animation: cmp-step-in .25s ease both;
    }
    .cmp-step[data-state="filled"] {
      background: var(--paper);
      border-color: var(--ink);
    }
    @keyframes cmp-step-in {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .cmp-step-head {
      display: inline-flex; align-items: center; gap: .6rem;
      margin-bottom: .65rem;
    }
    .cmp-step-num {
      width: 26px; height: 26px; border-radius: 50%;
      background: var(--ink); color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-mono); font-size: .72rem;
    }
    .cmp-step[data-state="filled"] .cmp-step-num { background: var(--brand); }
    .cmp-step-label {
      font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
      text-transform: uppercase; color: var(--ink-mute);
    }

    /* search input */
    .cmp-search {
      position: relative;
      display: flex; align-items: center;
    }
    .cmp-search-icon {
      position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
      color: var(--ink-mute); pointer-events: none;
    }
    .cmp-search-input {
      width: 100%;
      padding: .85rem 2.5rem .85rem 2.6rem;
      font-size: 1rem; font-family: var(--font-sans);
      background: #fff; color: var(--ink);
      border: 1.5px solid var(--ink); border-radius: 0;
    }
    .cmp-search-input:focus {
      outline: none; box-shadow: 4px 4px 0 var(--ink);
    }
    .cmp-clear {
      position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
      width: 30px; height: 30px;
      background: transparent; border: 0; color: var(--ink-mute); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .cmp-clear:hover { color: var(--block-ink); }

    /* selected state — chip instead of input */
    .cmp-step[data-state="filled"] .cmp-search { display: none; }
    .cmp-step[data-state="filled"] .cmp-suggest { display: none !important; }
    .cmp-chip-host {
      display: none;
      align-items: center; justify-content: space-between; gap: .75rem;
      padding: .85rem 1rem;
      background: #fff; border: 1.5px solid var(--brand);
    }
    .cmp-step[data-state="filled"] .cmp-chip-host { display: flex; }
    .cmp-chip-name {
      font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600;
      letter-spacing: -.015em; color: var(--ink);
    }
    .cmp-chip-meta {
      font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
      text-transform: uppercase; color: var(--ink-mute); margin-top: .15rem;
    }
    .cmp-chip-remove {
      width: 32px; height: 32px;
      background: transparent; border: 1px solid var(--line);
      color: var(--ink-mute); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .cmp-chip-remove:hover { color: var(--block-ink); border-color: var(--block-ink); }

    /* suggest dropdown */
    .cmp-suggest {
      list-style: none; margin: .35rem 0 0; padding: 0;
      background: #fff; border: 1.5px solid var(--ink);
      max-height: 280px; overflow-y: auto;
    }
    .cmp-suggest-item {
      padding: .7rem .9rem; cursor: pointer;
      border-bottom: 1px solid var(--paper-2);
    }
    .cmp-suggest-item:last-child { border-bottom: 0; }
    .cmp-suggest-item:hover,
    .cmp-suggest-item[aria-selected="true"] { background: var(--paper); }
    .cmp-suggest-item[data-state="taken"] { opacity: .45; cursor: not-allowed; }
    .cmp-suggest-name {
      font-family: var(--font-serif); font-size: 1.02rem; font-weight: 600;
      letter-spacing: -.015em; color: var(--ink);
    }
    .cmp-suggest-meta {
      display: block; margin-top: .1rem;
      font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
      text-transform: uppercase; color: var(--ink-mute);
    }
    .cmp-suggest-empty {
      padding: .85rem 1rem; color: var(--ink-mute);
      font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em;
    }

    .cmp-flow-actions {
      display: flex; justify-content: center; gap: .5rem;
      padding-top: .5rem;
    }
    .cmp-action-btn {
      display: inline-flex; align-items: center; gap: .5rem;
      padding: .6rem 1rem;
      background: var(--ink); color: #fff;
      border: 1.5px solid var(--ink);
      font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em;
      text-transform: uppercase; cursor: pointer;
    }
    .cmp-action-btn-ghost { background: transparent; color: var(--ink); }
    .cmp-action-btn-ghost:hover { background: var(--paper); }

    /* ─────────  Result cards (stacked, full width, labeled) ───────── */
    .cmp-cards {
      display: flex; flex-direction: column;
      gap: 1.25rem;
      margin-top: 1.5rem;
    }

    .cmp-card {
      background: #fff;
      border: 1px solid var(--line);
      border-left: 5px solid var(--brand);
      display: flex; flex-direction: column;
      animation: cmp-card-in .25s ease both;
      position: relative;
      box-shadow: 0 2px 12px rgba(15, 24, 32, .05);
    }
    .cmp-card[data-letter="B"] { border-left-color: var(--brand-ink); }
    @keyframes cmp-card-in {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .cmp-card-strip {
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      /* Extra right padding reserves space for the absolutely positioned
         remove button (.cmp-card-remove) so the category label never slides
         under the X. */
      padding: 1rem 3rem 1rem 1.25rem;
      background: var(--ink); color: #fff;
    }
    .cmp-card-strip-left {
      display: inline-flex; align-items: center; gap: .75rem; min-width: 0;
    }
    .cmp-card-letter {
      width: 32px; height: 32px; flex-shrink: 0;
      background: var(--brand); color: #fff;
      border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700;
    }
    .cmp-card-letter-text {
      font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em;
      text-transform: uppercase; color: rgba(255,255,255,.7);
    }
    .cmp-card-num {
      font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em;
      text-transform: uppercase; color: #fff;
    }
    .cmp-card-cat {
      font-family: var(--font-mono); font-size: .65rem; letter-spacing: .12em;
      text-transform: uppercase; color: rgba(255,255,255,.7);
      /* 50% caps the label to half the strip so long category names truncate
         instead of stretching under the X button. The strip itself now has
         3rem of right padding to seat the X cleanly. */
      max-width: 50%; text-align: right; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
    }
    .cmp-card-remove {
      position: absolute; top: .65rem; right: .65rem; z-index: 2;
      width: 28px; height: 28px;
      background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25);
      color: rgba(255,255,255,.7); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .cmp-card-remove:hover { background: rgba(255,255,255,.2); color: #fff; border-color: #fff; }

    /* Card body */
    .cmp-card-body { padding: 1.5rem clamp(1.25rem, 3vw, 2rem); }

    .cmp-card-name {
      margin: 0 0 .65rem;
      font-family: var(--font-serif); font-weight: 600;
      font-size: clamp(1.6rem, 2.4vw + .5rem, 2.25rem);
      letter-spacing: -.02em; line-height: 1.1;
      color: var(--ink);
      hyphens: none; -webkit-hyphens: none;
    }
    .cmp-card-diff {
      margin: 0 0 1.5rem;
      display: inline-flex; align-items: center; gap: .5rem;
      padding: .35rem .75rem;
      background: var(--paper); border: 1px solid var(--line);
      font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink-2);
    }
    .cmp-card-diff-dot {
      width: 9px; height: 9px; border-radius: 50%; background: var(--ok-ink);
    }
    .cmp-card-diff-2 .cmp-card-diff-dot { background: var(--warn-ink); }
    .cmp-card-diff-3 .cmp-card-diff-dot { background: var(--block-ink); }

    /* Stat rows — alternating zebra paper bands so it doesn't read as plain text */
    .cmp-card-rows {
      margin: 0 -1.25rem -1.5rem;
      border-top: 1px solid var(--line);
    }
    @media (min-width: 640px) {
      .cmp-card-rows { margin: 0 calc(clamp(1.25rem, 3vw, 2rem) * -1) calc(clamp(1.25rem, 3vw, 2rem) * -1); }
    }
    .cmp-stat {
      display: grid;
      grid-template-columns: 1fr;
      gap: .5rem;
      padding: 1.15rem 1.25rem;
      border-bottom: 1px solid var(--line);
      align-items: baseline;
      background: #fff;
    }
    .cmp-stat:nth-child(even) { background: var(--paper); }
    @media (min-width: 640px) {
      .cmp-stat { grid-template-columns: 180px 1fr; gap: 1.5rem; padding: 1.15rem clamp(1.25rem, 3vw, 2rem); }
    }
    .cmp-stat:last-child { border-bottom: 0; }
    .cmp-stat-icon {
      grid-row: 1; grid-column: 1;
      width: 32px; height: 32px;
      display: none;
      align-items: center; justify-content: center;
      background: var(--brand); color: #fff;
      border-radius: 8px;
    }
    @media (min-width: 640px) { .cmp-stat-icon { display: inline-flex; margin-right: -.5rem; } }
    .cmp-stat-body { display: contents; }
    @media (min-width: 640px) {
      .cmp-stat { grid-template-columns: 32px 148px 1fr; }
    }
    .cmp-stat-label {
      display: inline-flex; align-items: center;
      font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
      text-transform: uppercase; color: var(--ink);
      font-weight: 600;
    }
    .cmp-stat-value {
      font-size: 1.02rem; line-height: 1.55; color: var(--ink-2);
      word-wrap: break-word;
    }
    .cmp-stat-value strong { font-weight: 600; color: var(--ink); }

    .cmp-pill {
      display: inline-block;
      padding: .45rem .95rem;
      font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em;
      font-weight: 500;
      border-radius: 999px;
    }
    .cmp-pill-ok    { background: var(--ok-bg);    color: var(--ok-ink); }
    .cmp-pill-warn  { background: var(--warn-bg);  color: var(--warn-ink); }
    .cmp-pill-mute  { background: #fff;            color: var(--ink-mute); border: 1px solid var(--line); }

    .cmp-tags {
      display: flex; flex-wrap: wrap; gap: .4rem;
    }
    .cmp-tag {
      display: inline-block; padding: .35rem .75rem;
      background: #fff; border: 1px solid var(--line);
      font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
      color: var(--ink); text-decoration: none;
      font-weight: 500;
    }
    .cmp-tag-link {
      background: var(--brand); color: #fff; border-color: var(--brand);
    }
    .cmp-tag-link:hover { background: var(--brand-ink); border-color: var(--brand-ink); }

    .cmp-card-foot {
      display: flex; gap: 0;
      background: var(--paper);
      border-top: 1px solid var(--line);
    }
    .cmp-card-foot a {
      flex: 1 1 0; min-width: 0;
      background: transparent; color: var(--ink);
      padding: 1rem 1rem;
      text-decoration: none; text-align: center;
      font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
      text-transform: uppercase;
      display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
      transition: background .12s, color .12s;
    }
    .cmp-card-foot a + a { border-left: 1px solid var(--line); }
    .cmp-card-foot a:hover { background: var(--ink); color: #fff; }
    .cmp-card-foot a svg { flex-shrink: 0; }

    /* Share row */
    .cmp-share {
      display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
      margin-top: 2rem; padding: 1rem 1.25rem;
      background: var(--paper); border: 1px solid var(--line);
    }
    .cmp-share svg { color: var(--brand-ink); }
    .cmp-share-label {
      font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
      text-transform: uppercase; color: var(--ink-mute);
    }
    .cmp-share-url {
      flex: 1 1 200px; min-width: 0;
      font-family: var(--font-mono); font-size: .8rem; color: var(--ink);
      background: #fff; padding: .5rem .75rem; border: 1px solid var(--line);
      overflow-x: auto; white-space: nowrap;
    }
    .cmp-share-copy {
      padding: .55rem 1rem; background: var(--ink); color: #fff;
      border: 1.5px solid var(--ink); font-family: var(--font-mono);
      font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
      cursor: pointer;
    }
    .cmp-share-copy:hover { background: var(--brand-ink); border-color: var(--brand-ink); }

/* ---------- SUPPORT ---------- */
/* Hero */
      .sp-hero { max-width: 720px; margin: 0 auto 2.5rem; text-align: left; }
      .sp-hero-title { font-family: var(--font-serif); font-size: clamp(2.25rem, 5vw + .5rem, 3.75rem); line-height: 1.05; letter-spacing: -.025em; margin: .35rem 0 1rem; }
      .sp-hero-sub { font-size: 1.1rem; color: var(--ink-2); line-height: 1.55; max-width: 60ch; }

      /* Quick tiles */
      .sp-quick {
        display: grid; grid-template-columns: 1fr 1fr;
        gap: .75rem;
        margin: 0 auto 3rem;
        max-width: 720px;
      }
      @media (min-width: 720px) { .sp-quick { grid-template-columns: repeat(4, 1fr); } }
      .sp-quick-tile {
        display: flex; align-items: center; gap: .75rem;
        padding: 1rem .85rem;
        background: #fff; border: 1px solid var(--line);
        color: var(--ink); text-decoration: none;
        transition: border-color .12s, background .12s, transform .12s;
      }
      .sp-quick-tile:hover { border-color: var(--ink); background: var(--paper); transform: translateY(-1px); }
      .sp-quick-icon {
        width: 40px; height: 40px; flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--brand); color: #fff; border-radius: 50%;
      }
      .sp-quick-body { display: flex; flex-direction: column; min-width: 0; }
      .sp-quick-label { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); }
      .sp-quick-sub { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; color: var(--ink-mute); margin-top: .15rem; }

      /* Topic section */
      .sp-topics { max-width: 720px; margin: 0 auto; }
      .sp-topics-eyebrow {
        font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
        text-transform: uppercase; color: var(--ink-mute);
        margin: 0 0 1rem;
      }
      .sp-drawers { display: flex; flex-direction: column; gap: .65rem; }

      /* Drawer (topic) */
      .sp-drawer {
        background: #fff;
        border: 1px solid var(--line);
        overflow: hidden;
        transition: border-color .12s;
      }
      .sp-drawer[open] { border-color: var(--ink); }
      .sp-drawer-head {
        display: grid; grid-template-columns: 52px 1fr auto;
        gap: 1rem; align-items: center;
        padding: 1rem 1.15rem;
        cursor: pointer;
        list-style: none;
        background: #fff;
        transition: background .12s;
      }
      .sp-drawer-head::-webkit-details-marker { display: none; }
      .sp-drawer-head:hover { background: var(--paper); }
      .sp-drawer[open] .sp-drawer-head { background: var(--paper); border-bottom: 1px solid var(--line); }
      .sp-drawer-icon {
        width: 52px; height: 52px;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--brand); color: #fff; border-radius: 50%;
      }
      .sp-drawer-body { display: flex; flex-direction: column; min-width: 0; }
      .sp-drawer-title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); }
      .sp-drawer-sub { font-size: .9rem; color: var(--ink-2); margin-top: .2rem; line-height: 1.4; }
      .sp-drawer-chev { color: var(--ink-mute); transition: transform .2s; }
      .sp-drawer[open] .sp-drawer-chev { transform: rotate(180deg); color: var(--ink); }
      .sp-drawer-content { padding: 1.15rem 1.15rem 1.25rem; }

      /* Q&A inside drawer */
      .sp-qa-list { display: flex; flex-direction: column; }
      .sp-qa { border-bottom: 1px solid var(--paper-2); }
      .sp-qa:last-child { border-bottom: 0; }
      .sp-qa > summary {
        list-style: none; cursor: pointer;
        display: flex; align-items: flex-start; gap: .75rem;
        padding: .85rem 0;
        font-size: 1rem; color: var(--ink);
      }
      .sp-qa > summary::-webkit-details-marker { display: none; }
      .sp-qa-q { flex: 1; font-weight: 500; line-height: 1.45; }
      .sp-qa-chev { color: var(--ink-mute); margin-top: .35rem; flex-shrink: 0; transition: transform .2s; }
      .sp-qa[open] .sp-qa-chev { transform: rotate(180deg); color: var(--ink); }
      .sp-qa-a { padding: 0 0 1rem; color: var(--ink-2); line-height: 1.6; font-size: .96rem; }
      .sp-qa-a p { margin: 0; }

      .sp-drawer-links {
        margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--paper-2);
        display: flex; flex-wrap: wrap; gap: 1.25rem;
      }
      .sp-drawer-links a {
        font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
        text-transform: uppercase; color: var(--brand-ink);
        border-bottom: 1px solid var(--brand-ink); padding-bottom: 1px;
      }
      .sp-drawer-links a:hover { color: var(--ink); border-color: var(--ink); }

      /* Contact block */
      .sp-contact { max-width: 720px; margin: 3.5rem auto 0; }
      .sp-contact-grid {
        display: grid; gap: 1.5rem;
        grid-template-columns: 1fr;
      }
      @media (min-width: 760px) { .sp-contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
      .sp-contact-title { font-family: var(--font-serif); font-size: 1.85rem; letter-spacing: -.02em; line-height: 1.1; margin: .35rem 0 .75rem; }
      .sp-contact-sub { color: var(--ink-2); line-height: 1.55; }
      .sp-contact-card {
        background: #fff; border: 1.5px solid var(--ink);
        padding: 1.5rem;
      }
      .sp-contact-btn {
        display: inline-flex; align-items: center; gap: .6rem;
        padding: .85rem 1.1rem;
        background: var(--ink); color: #fff;
        text-decoration: none;
        font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em;
        transition: background .12s;
      }
      .sp-contact-btn:hover { background: var(--brand-ink); }
      .sp-contact-meta {
        margin: .75rem 0 0;
        font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
        color: var(--ink-mute);
      }
      .sp-contact-list {
        margin: .5rem 0 0; padding-left: 1.15rem;
        color: var(--ink-2); font-size: .92rem; line-height: 1.6;
      }

      @media (max-width: 480px) {
        .sp-drawer-head { grid-template-columns: 44px 1fr auto; padding: .85rem 1rem; gap: .85rem; }
        .sp-drawer-icon { width: 44px; height: 44px; }
        .sp-drawer-title { font-size: 1.05rem; }
        .sp-drawer-sub { display: none; }
      }

/* ---------- TRACK ---------- */
.trk-card {
          background: #fff; border: 1px solid var(--line);
          padding: clamp(1.5rem, 3vw, 2.25rem);
          margin-top: 1rem;
        }

        .trk-head {
          display: flex; justify-content: space-between; align-items: flex-start;
          gap: 1rem; flex-wrap: wrap;
          padding-bottom: 1.25rem; margin-bottom: 1.25rem;
          border-bottom: 1px solid var(--line);
        }
        .trk-head-left { min-width: 0; }
        .trk-eyebrow {
          font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
          text-transform: uppercase; color: var(--ink-mute); margin: 0 0 .25rem;
        }
        .trk-status {
          font-family: var(--font-serif); font-size: clamp(1.75rem, 4vw + .25rem, 2.5rem);
          font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin: 0;
          text-transform: capitalize; color: var(--ink);
        }
        .trk-when {
          margin: .35rem 0 0;
          font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em;
          color: var(--ink-mute);
        }
        .trk-pill {
          padding: .35rem .75rem;
          font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em;
          text-transform: uppercase;
        }

        .trk-email-note {
          display: inline-flex; align-items: center; gap: .5rem;
          margin: 0 0 1.75rem;
          padding: .5rem .85rem;
          background: var(--paper); border: 1px solid var(--line);
          font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em;
          color: var(--ink-2);
        }
        .trk-email-note svg { color: var(--brand-ink); flex-shrink: 0; }

        .trk-block { margin-bottom: 1.5rem; }
        .trk-block:last-of-type { margin-bottom: 0; }
        .trk-block-eyebrow {
          font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em;
          text-transform: uppercase; color: var(--ink-mute);
          margin: 0 0 .75rem;
        }

        /* ─── Progress steps ─── */
        .trk-steps {
          list-style: none; padding: 0; margin: 0;
          display: flex; flex-direction: column;
        }
        .trk-step {
          display: grid; grid-template-columns: 28px 1fr; gap: .85rem;
          padding: .7rem 0;
          position: relative;
        }
        .trk-step::before {
          content: ""; position: absolute;
          left: 13.5px; top: 32px; bottom: -10px;
          width: 1.5px; background: var(--line);
        }
        .trk-step:last-child::before { display: none; }
        .trk-step-pip {
          width: 28px; height: 28px; border-radius: 50%;
          background: #fff; border: 1.5px solid var(--line);
          display: inline-flex; align-items: center; justify-content: center;
          color: #fff; z-index: 1;
        }
        .trk-step-label {
          display: block;
          font-family: var(--font-serif); font-size: 1rem; font-weight: 600;
          letter-spacing: -.01em; color: var(--ink-mute);
          line-height: 1.2;
        }
        .trk-step-hint {
          display: block; margin-top: .15rem;
          font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em;
          color: var(--ink-mute); text-transform: uppercase;
        }
        .trk-step.is-done .trk-step-pip,
        .trk-step.is-current .trk-step-pip { background: var(--brand); border-color: var(--brand); }
        .trk-step.is-done::before { background: var(--brand); }
        .trk-step.is-done .trk-step-label,
        .trk-step.is-current .trk-step-label { color: var(--ink); }
        .trk-step.is-current .trk-step-pip { background: var(--ink); border-color: var(--ink); transform: scale(1.15); }
        .trk-step.is-current .trk-step-pip::after {
          content: ""; position: absolute; width: 40px; height: 40px;
          border-radius: 50%; border: 2px solid var(--ink);
          animation: trk-pulse 1.6s infinite;
        }
        @keyframes trk-pulse {
          0%   { transform: scale(.7); opacity: .8; }
          80%  { transform: scale(1.4); opacity: 0; }
          100% { transform: scale(1.4); opacity: 0; }
        }

        /* ─── Shipped highlight ─── */
        .trk-shipped {
          background: var(--brand); color: #fff;
          padding: 1.25rem 1.35rem;
          margin-bottom: 1.5rem;
        }
        .trk-shipped .trk-block-eyebrow { color: rgba(255,255,255,.85); margin-bottom: .5rem; }
        .trk-shipped-carrier {
          font-family: var(--font-mono); font-size: .85rem; letter-spacing: .14em;
          text-transform: uppercase; margin: 0;
        }
        .trk-shipped-num {
          font-family: var(--font-serif); font-size: clamp(1.3rem, 2.5vw, 1.65rem);
          font-weight: 600; letter-spacing: -.005em; margin: .25rem 0 1rem;
          word-break: break-all;
        }
        .trk-carrier-btn {
          display: inline-flex; align-items: center;
          padding: .65rem 1rem;
          background: #fff; color: var(--brand-ink);
          font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
          text-transform: uppercase; text-decoration: none;
        }
        .trk-carrier-btn:hover { background: var(--ink); color: #fff; }

        /* ─── Items table ─── */
        .trk-items { width: 100%; border-collapse: collapse; }
        .trk-items thead th {
          text-align: left; padding: .45rem 0;
          font-family: var(--font-mono); font-size: .65rem; letter-spacing: .14em;
          text-transform: uppercase; color: var(--ink-mute); font-weight: 500;
          border-bottom: 1.5px solid var(--ink);
        }
        .trk-items thead th:nth-child(2) { text-align: center; width: 60px; }
        .trk-items thead th:nth-child(3) { text-align: right; width: 90px; }
        .trk-items td {
          padding: .85rem 0; border-bottom: 1px solid var(--paper-2);
          vertical-align: top;
        }
        .trk-item-name strong { display: block; font-weight: 600; color: var(--ink); }
        .trk-item-sku {
          display: block; margin-top: .15rem;
          font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em;
          color: var(--ink-mute);
        }
        .trk-item-qty { text-align: center; font-family: var(--font-mono); }
        .trk-item-line { text-align: right; font-family: var(--font-mono); font-weight: 500; }
        .trk-item-empty { color: var(--ink-mute); font-style: italic; padding: 1rem 0; }

        /* ─── Totals + ship + payment grid ─── */
        .trk-grid {
          display: grid; gap: 1.5rem;
          grid-template-columns: 1fr;
          padding-top: 1.25rem; border-top: 1px solid var(--line);
        }
        @media (min-width: 720px) { .trk-grid { grid-template-columns: 1fr 1fr 1fr; gap: 2rem; } }
        .trk-totals { margin: 0; }
        .trk-totals > div {
          display: flex; justify-content: space-between;
          padding: .35rem 0;
          font-family: var(--font-mono); font-size: .88rem;
          color: var(--ink-2);
        }
        .trk-totals dt { color: var(--ink-mute); margin: 0; }
        .trk-totals dd { margin: 0; color: var(--ink); }
        .trk-total-row {
          padding-top: .65rem !important; margin-top: .25rem;
          border-top: 1.5px solid var(--ink);
          font-family: var(--font-serif) !important; font-size: 1.05rem !important;
          font-weight: 600;
        }
        .trk-total-row dt { color: var(--ink) !important; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
        .trk-total-row dd { font-family: var(--font-serif); font-size: 1.2rem; }

        .trk-addr { margin: 0; line-height: 1.5; color: var(--ink-2); font-size: .92rem; }
        .trk-addr strong { color: var(--ink); }
        .trk-method {
          margin: .5rem 0 0;
          font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em;
          color: var(--ink-mute); text-transform: uppercase;
        }

        .trk-pay-method { margin: 0; font-size: 1rem; color: var(--ink-2); }
        .trk-pay-status {
          margin: .35rem 0 0;
          font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em;
          color: var(--ink-mute); text-transform: uppercase;
        }

        .trk-foot {
          margin-top: 1.5rem; padding-top: 1rem;
          border-top: 1px solid var(--line);
          color: var(--ink-mute); font-size: .9rem;
        }
        .trk-foot p { margin: 0; }
        .trk-foot a { color: var(--brand-ink); border-bottom: 1px solid currentColor; }

/* ---------- COMPARE — interaction badge + email capture ---------- */
/* `display: grid` on .cmp-interaction has the same specificity as the UA
   `[hidden] { display: none }` rule, and author CSS wins at equal
   specificity — so without this explicit override the empty panel renders
   as a stray bordered box before any peptides are chosen. */
.cmp-interaction[hidden] { display: none !important; }
.cmp-interaction {
  margin: 1rem 0 1.25rem;
  padding: 1rem 1.25rem;
  border-left: 5px solid var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-left-width: 5px;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 1rem;
  align-items: start;
}
.cmp-interaction[data-kind="synergy"]  { border-left-color: var(--ok-ink);    background: var(--ok-bg); }
.cmp-interaction[data-kind="caution"]  { border-left-color: var(--block-ink); background: var(--block-bg); }
.cmp-interaction[data-kind="redundant"] { border-left-color: var(--warn-ink); background: var(--warn-bg); }
.cmp-interaction-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.cmp-interaction[data-kind="synergy"]  .cmp-interaction-icon { background: var(--ok-ink); }
.cmp-interaction[data-kind="caution"]  .cmp-interaction-icon { background: var(--block-ink); }
.cmp-interaction[data-kind="redundant"] .cmp-interaction-icon { background: var(--warn-ink); }
.cmp-interaction-body { min-width: 0; }
.cmp-interaction-label {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600;
  margin: 0 0 .35rem;
}
.cmp-interaction[data-kind="synergy"]  .cmp-interaction-label { color: var(--ok-ink); }
.cmp-interaction[data-kind="caution"]  .cmp-interaction-label { color: var(--block-ink); }
.cmp-interaction[data-kind="redundant"] .cmp-interaction-label { color: var(--warn-ink); }
.cmp-interaction-note {
  margin: 0;
  font-size: .95rem; line-height: 1.5;
  color: var(--ink);
}

.cmp-email {
  margin-top: 2rem; padding: 1.5rem clamp(1.25rem, 3vw, 1.75rem);
  background: #fff; border: 1.5px solid var(--ink);
}
.cmp-email-head {
  display: grid; grid-template-columns: 32px 1fr; gap: 1rem;
  align-items: start; margin-bottom: 1rem;
}
.cmp-email-head svg { color: var(--brand-ink); margin-top: .2rem; }
.cmp-email-eyebrow {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
  margin: 0 0 .35rem;
}
.cmp-email-hint { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.5; }
.cmp-email-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.cmp-email-row input[type="email"] {
  flex: 1 1 220px; padding: .9rem 1rem;
  background: #fff; border: 1.5px solid var(--ink); border-radius: 0;
  font-size: 1rem; color: var(--ink);
}
.cmp-email-row input[type="email"]:focus { outline: none; box-shadow: 4px 4px 0 var(--ink); }
.cmp-email-btn {
  padding: .9rem 1.5rem;
  background: var(--ink); color: #fff;
  border: 2px solid var(--ink);
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.cmp-email-btn:hover { background: var(--brand-ink); border-color: var(--brand-ink); }
.cmp-email-btn:disabled { opacity: .55; cursor: not-allowed; }
/* Inline status panel — replaces the silent text feedback after compare
   email submit so the success state reads like a real confirmation.
   Same pattern is reused by .newsletter-status (footer subscribe). */
.cmp-email-out {
  margin: .85rem 0 0;
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em;
}
.cmp-email-out.is-ok,
.cmp-email-out.is-error {
  display: block;
  padding: .75rem 1rem;
  border: 1px solid currentColor;
  font-size: .88rem;
  letter-spacing: .03em;
  margin-top: 1rem;
}
.cmp-email-out.is-ok    { color: var(--ok-ink); background: rgba(43, 138, 62, .08); }
.cmp-email-out.is-error { color: var(--block-ink); background: rgba(181, 50, 50, .08); }

/* Newsletter footer subscribe — success state.
   Replaces the form on success with a clean confirmation. White type +
   brand-blue check on the dark ink section. No border, no panel chrome
   — the section background carries it. Sized so the layout doesn't jump. */
.newsletter-done {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: #fff;
  line-height: 1.3;
  min-height: 50px;
}
.newsletter-done svg {
  flex-shrink: 0;
  color: var(--brand);
}
.newsletter-error {
  margin: .65rem 0 0;
  padding: .55rem .85rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .03em;
  color: #fff;
  background: rgba(181, 50, 50, .35);
  border-left: 3px solid #ff8a8a;
  grid-column: 1 / -1;
}

/* ---------- PEPTIDE — plain English summary block ----------
   The card is a hero style intro that sits BETWEEN the hero strip and the
   peptide-grid (which splits 1.5fr / .85fr on desktop). Earlier attempts to
   mirror the main column width left the right side empty and made the card
   look orphaned. Letting the card span the full container width reads as
   a deliberate intro band — same width as the hero above, then the two
   column grid takes over below. */
.pep-plain-section {
  padding: 1.5rem 0 0;
}
.pep-plain {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  padding: clamp(1.25rem, 2.5vw, 1.85rem) clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 2px 12px rgba(15, 24, 32, .04);
}
.pep-plain-head {
  display: flex; align-items: center; gap: .65rem;
  padding-bottom: .85rem; margin-bottom: .85rem;
  border-bottom: 1px solid var(--paper-2);
}
.pep-plain-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; border-radius: 50%;
  flex-shrink: 0;
}
.pep-plain-eyebrow {
  margin: 0;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2); font-weight: 600;
}
.pep-plain-body {
  display: flex; flex-direction: column; gap: .9rem;
}
/* Both paragraphs use the same sans-serif treatment for a single, clean look
   inside the card. Previously the first paragraph was serif and the second
   was sans, which read as two different voices stacked on top of each other
   (especially obvious on mobile). */
.pep-plain-body p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1rem, .6vw + .9rem, 1.1rem);
  line-height: 1.6;
  color: var(--ink);
  letter-spacing: 0;
}
.pep-plain-body p:last-child {
  font-family: var(--font-sans);
  font-size: clamp(1rem, .6vw + .9rem, 1.1rem);
  color: var(--ink-2);
  line-height: 1.6;
  letter-spacing: 0;
}

/* ---------- HOMEPAGE — dual Finder + Compare CTA ---------- */
.dual-cta-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.dual-cta-eyebrow {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
  margin: 0 0 1.25rem;
  text-align: center;
}
.dual-cta-grid {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .dual-cta-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }

.dual-cta {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.25rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: #fff;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  transition: background .18s, color .18s, transform .12s, box-shadow .18s;
  min-height: 260px;
  position: relative;
  overflow: hidden;
}
.dual-cta::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.dual-cta-compare::before { background: var(--brand-ink); }
.dual-cta:hover {
  background: var(--ink); color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(15, 24, 32, .18);
}
.dual-cta:hover::before { transform: scaleX(1); }
.dual-cta:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }

.dual-cta-icon {
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--brand-ink);
  border-radius: 50%;
  transition: background .18s, color .18s;
}
.dual-cta:hover .dual-cta-icon {
  background: var(--brand); color: #fff;
}

.dual-cta-body { min-width: 0; }
.dual-cta-tag {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand-ink);
  margin: 0 0 .55rem;
  transition: color .18s;
}
.dual-cta:hover .dual-cta-tag { color: var(--brand); }
.dual-cta-title {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 2.5vw + .35rem, 2rem);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
  margin: 0 0 .65rem;
  color: inherit;
  text-wrap: balance;
}
.dual-cta-sub {
  margin: 0;
  font-size: 1rem; line-height: 1.55;
  color: var(--ink-2);
  max-width: 42ch;
  transition: color .18s;
}
.dual-cta:hover .dual-cta-sub { color: #C5CDD6; }

.dual-cta-arrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600;
  color: var(--brand-ink);
  transition: color .18s, transform .18s;
}
.dual-cta:hover .dual-cta-arrow { color: #fff; }
.dual-cta:hover .dual-cta-arrow svg { transform: translateX(4px); }
.dual-cta-arrow svg { transition: transform .18s; }

/* ---------- LEARN INDEX — quick reference CTA ---------- */
.learn-reference {
  display: grid; gap: 1.5rem;
  align-items: center;
  grid-template-columns: 1fr;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
  margin: 0 0 clamp(2rem, 4vw, 2.5rem);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
}
@media (min-width: 720px) { .learn-reference { grid-template-columns: 1fr auto; gap: 2rem; } }
.learn-reference-eyebrow {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute); margin: 0 0 .35rem;
}
.learn-reference-title {
  font-family: var(--font-serif); font-size: clamp(1.25rem, 1.5vw + .5rem, 1.6rem);
  font-weight: 600; letter-spacing: -.015em; color: var(--ink);
  margin: 0 0 .5rem; line-height: 1.2;
}
.learn-reference-sub {
  color: var(--ink-2); font-size: .95rem; line-height: 1.55;
  margin: 0; max-width: 56ch;
}

/* ---------- TERMINOLOGY — flash card glossary ---------- */
/* Search input — relative so the autocomplete <ul> can absolutely position
   itself directly under the input. */
.tg-search {
  position: relative;
  margin: clamp(1.5rem, 3vw, 2rem) 0 1.25rem;
}
.tg-search input {
  width: 100%; box-sizing: border-box;
  padding: 1rem 1rem 1rem 3rem;
  background: #fff;
  border: 1.5px solid var(--ink);
  font-family: var(--font-sans); font-size: 1.05rem;
  color: var(--ink);
}
.tg-search input:focus { outline: 3px solid var(--brand); outline-offset: 2px; }
.tg-search-icon {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-mute); display: inline-flex; pointer-events: none;
}

/* Autocomplete dropdown — anchored to the search input, opens on type, closes
   on blur / Esc / selection. Mirrors the compare-tool autocomplete pattern. */
.tg-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: 30;
  list-style: none; margin: 0; padding: 0;
  background: #fff; border: 1.5px solid var(--ink);
  max-height: min(60vh, 420px); overflow-y: auto;
  box-shadow: 0 12px 28px rgba(15, 24, 32, .14);
}
.tg-suggest[hidden] { display: none; }
.tg-suggest-item {
  padding: .75rem 1rem; cursor: pointer;
  border-bottom: 1px solid var(--paper-2);
  display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem;
  align-items: baseline;
}
.tg-suggest-item:last-child { border-bottom: 0; }
.tg-suggest-item:hover,
.tg-suggest-item[aria-selected="true"] { background: var(--paper); }
.tg-suggest-name {
  font-family: var(--font-serif); font-size: 1rem; font-weight: 600;
  letter-spacing: -.015em; color: var(--ink); line-height: 1.2;
}
.tg-suggest-cat {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-ink); white-space: nowrap;
  background: var(--paper-2); padding: 2px 7px; border: 1px solid var(--line);
}
.tg-suggest-snippet {
  grid-column: 1 / -1;
  font-family: var(--font-sans); font-size: .85rem; color: var(--ink-2);
  line-height: 1.4; margin: 0;
  /* Clamp to 2 lines so the dropdown stays compact when meanings are long */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tg-suggest-empty {
  padding: 1rem; color: var(--ink-mute);
  font-family: var(--font-sans); font-size: .9rem; text-align: center;
}
/* Highlighted match text inside suggestions */
.tg-suggest mark {
  background: var(--paper-2);
  color: var(--ink);
  padding: 0 2px;
  font-weight: 600;
}

/* Category filter chips */
.tg-filters {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1.25rem;
}
.tg-chip {
  padding: .55rem .9rem;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  background: #fff; color: var(--ink);
  border: 1.5px solid var(--line); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.tg-chip:hover { border-color: var(--ink); }
.tg-chip:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.tg-chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* A–Z nav rail */
.tg-alpha {
  display: flex; flex-wrap: wrap; gap: .25rem;
  margin: 0 0 1.5rem;
  padding: .75rem .85rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.tg-alpha-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
  border: 1px solid transparent;
}
.tg-alpha-link:hover { background: #fff; border-color: var(--ink); color: var(--brand-ink); }
.tg-alpha-link:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.tg-alpha-link.is-empty { color: var(--ink-mute); opacity: .35; pointer-events: none; }

/* Count + results region */
.tg-count {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute);
  margin: 0 0 1rem;
}
.tg-results { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2rem); }
.tg-section { scroll-margin-top: 110px; }
.tg-letter-head {
  font-family: var(--font-serif); font-size: clamp(2rem, 4vw + .5rem, 3rem);
  font-weight: 600; letter-spacing: -.025em; color: var(--brand-ink);
  margin: 0 0 .85rem; padding-bottom: .35rem;
  border-bottom: 2px solid var(--line);
  line-height: 1;
}
/* Grid breakpoints tuned so cards always have enough room for short serif
   headings + 4 short paragraphs without crushing the line length. Tablets get
   2 columns; wide desktops cap at 3 to keep each card readable. */
.tg-grid {
  display: grid; gap: 1.15rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px)  { .tg-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .tg-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* Cap the page width so the 3-column layout doesn't span ultra-wide
   monitors at the cost of card width. */
.tg-container { max-width: 1280px; }

/* Flash card */
.tg-card {
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1.4rem 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  scroll-margin-top: 110px;
  /* Cap text width even inside a wide card so paragraphs don't sprawl on
     desktops where a single card might stretch across the viewport. */
  max-width: 100%;
}
.tg-card-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .5rem;
}
.tg-card-term {
  margin: 0;
  font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600;
  letter-spacing: -.015em; color: var(--ink); line-height: 1.2;
}
.tg-card-cat {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-ink);
  background: var(--paper-2); padding: 2px 7px;
  border: 1px solid var(--line);
}
.tg-card p { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
.tg-label {
  display: inline-block;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute);
  margin-right: .5rem; font-weight: 600;
}
.tg-related-link {
  color: var(--brand-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.tg-related-link:hover { color: var(--ink); }

/* Hidden state for filtered cards/sections */
.tg-card[hidden], .tg-section[hidden] { display: none !important; }

/* Visual nudge when the user jumps to a card from autocomplete — a brief
   brand-blue glow that fades out so the user can see which card was picked. */
.tg-card.is-jumped {
  box-shadow: 0 0 0 3px var(--brand), 0 12px 32px rgba(0, 150, 199, .18);
  transition: box-shadow .6s ease-out;
}

/* Empty state */
.tg-empty {
  text-align: center;
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  background: var(--paper-2);
  border: 1px dashed var(--line);
}
.tg-empty-title {
  font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600;
  color: var(--ink); margin: 0 0 .35rem;
}
.tg-empty-hint {
  color: var(--ink-2); font-size: .95rem; margin: 0 0 1.25rem;
}

/* end of page scoped CSS block */