/* ==========================================================================
   Effect - research peptides at volume prices
   One stylesheet. One request. No framework, no build step, no runtime.

   Colour is deliberately in the same family as the volume-market leader
   (warm paper, near-black ink, crimson accent, green for verification,
   Geist + Geist Mono). Four things are fixed rather than copied:

     1. GREEN. #1B8A4B is 3.92:1 on warm paper - it fails AA for body text
        and it is used for body text out there. --verified is #0E6B39, 5.90:1.
     2. RED ON DARK. #C8102E is 3.10:1 on a near-black slab. Anything on the
        slab uses --slab-red #FF5A6E, 6.02:1.
     3. HAIRLINES. #ECEAE5 on #F4F2EC is a 1.05:1 rule - invisible, so the
        layout reads as one undifferentiated sheet. --line is #E4E0D8.
     4. THE SLAB IS A SYSTEM, not one hero card. Every number that argues the
        brand's case - $/mg, ladders, tiers, compare rows - renders dark and
        monospaced. A price-transparency brand should look like a terminal.

   Every ratio in this file was computed, not eyeballed. brand/BRAND.md has
   the full grid.
   ========================================================================== */

/* Self-hosted from Vercel's Geist v1.7.2 release under the SIL Open Font
   License. Variable files cover every weight used by the site without a
   render-blocking third-party stylesheet. See assets/fonts/OFL.txt. */
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/Geist-Variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/GeistMono-Variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

.measure-consent{padding-block:1rem;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.measure-consent[hidden]{display:none}.measure-consent p{margin:0;max-width:70ch;font-size:.8125rem}
.measure-consent>div{display:flex;gap:.5rem;flex-shrink:0}.measure-consent .btn{min-height:44px;font-size:.8125rem}
@media(max-width:760px){.measure-consent{flex-wrap:wrap}.measure-consent>div{width:100%}.measure-consent .btn{flex:1}}

/* --------------------------------------------------------------- tokens -- */
:root {
  /* A warm-paper brand that the OS force-inverts looks broken, and form
     controls go dark in a light layout. Opt out explicitly. */
  color-scheme: light;

  /* ground */
  --paper:      #F4F2EC;
  --surface:    #FAF9F7;
  --card:       #FFFFFF;
  --line:       #E4E0D8;
  --line-2:     #D2CEC4;

  /* ink on paper - ratio against --paper in the comment */
  --ink:        #14151A;   /* 16.28 */
  --ink-2:      #33353C;   /* 10.94  body copy */
  --mute:       #63666E;   /*  5.13  secondary text */
  --faint:      #9A9DA5;   /*  2.42  NON-TEXT ONLY - rules, dividers, disabled */

  /* accent */
  --red:        #C8102E;   /*  5.26  brand red: fills, marks, large type */
  --red-ink:    #A80D26;   /*  6.82  red as running text or a link */
  --red-deep:   #8E0B20;   /*  8.45  pressed / hover on a red fill */
  --red-wash:   rgba(200,16,46,.07);

  /* verification - COA, in-stock, savings. Never decorative. */
  --verified:   #0E6B39;   /*  5.90 */
  --verified-wash: rgba(14,107,57,.09);

  /* the slab - dark surface for data */
  --slab:       #14151A;
  --slab-2:     #1D1F25;
  --slab-3:     #23262E;
  --slab-line:  #454A57;   /*  2.06 on slab, 1.86 on slab-2 */
  --on-slab:    #F4F2EC;   /* 16.28 on slab */
  --on-slab-2:  #C6CAD2;   /* 11.09 */
  --on-slab-mute:#9AA0AB;  /*  6.94 */
  --slab-red:   #FF5A6E;   /*  6.02 */
  --slab-green: #4ADE80;   /* 10.46 */
  --slab-amber: #F2B84B;   /* 10.19  warnings on the slab: ops console only */

  /* type */
  --sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --t-display: clamp(2.5rem, 6.4vw, 4.5rem);
  --t-h1:      clamp(1.95rem, 4vw, 2.9rem);
  --t-h2:      clamp(1.45rem, 2.6vw, 1.95rem);
  --t-h3:      1.15rem;
  --t-body:    1.0625rem;
  --t-sm:      .9375rem;
  --t-xs:      .8125rem;
  --t-micro:   .6875rem;

  /* space - 4px base */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  --r:     6px;
  --r-sm:  3px;
  --r-pill: 999px;

  --shadow: 0 1px 2px rgba(20,21,26,.04), 0 10px 30px -18px rgba(20,21,26,.28);
  --shadow-slab: 0 2px 4px rgba(20,21,26,.10), 0 24px 48px -28px rgba(20,21,26,.45);

  --wrap: 1180px;
  --wrap-narrow: 720px;
}

/* --------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* sticky header must not swallow the target of a jump link */
  scroll-padding-top: 6.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -.021em;
  line-height: 1.14;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); letter-spacing: -.018em; }
h3 { font-size: var(--t-h3); letter-spacing: -.012em; line-height: 1.3; }
p  { margin: 0 0 var(--s4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--red-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--red-deep); }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Every price, mass and ratio on this site is monospaced and tabular. Prices
   in a proportional face jitter column-to-column and a price comparison is
   the entire product. */
.num, .price, .permg, td.n, th.n, .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5); }
.wrap-narrow { max-width: var(--wrap-narrow); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--s4); top: -4rem; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: var(--s3) var(--s4); border-radius: var(--r);
  transition: top .12s;
}
.skip:focus { top: var(--s4); color: var(--paper); }

/* ------------------------------------------------------------ eyebrows --- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 var(--s3);
  display: block;
}
.eyebrow--red { color: var(--red-ink); }
.eyebrow--slab { color: var(--on-slab-mute); }

/* ---------------------------------------------------------------- RUO ---- */
/* Handoff section 2.1: research-use-only sits beside the buy control, not in
   the footer. It is also the single most load-bearing compliance element on
   the site, so it gets a real component instead of a <small>. */
.ruo {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--red-wash);
  border-left: 2px solid var(--red);
  padding: var(--s3) var(--s4);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.ruo b { color: var(--red-ink); font-weight: 650; }
.ruo--slab {
  background: rgba(255,90,110,.10);
  border-left-color: var(--slab-red);
  color: var(--on-slab-2);
}
.ruo--slab b { color: var(--slab-red); }
.ruo--inline {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: none; border: 0; padding: 0;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--red-ink);
}

/* --------------------------------------------------------------- pills --- */
.pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--card); color: var(--mute);
  white-space: nowrap;
}
.pill--verified { color: var(--verified); border-color: rgba(14,107,57,.3); background: var(--verified-wash); }
.pill--red      { color: var(--red-ink); border-color: rgba(200,16,46,.28); background: var(--red-wash); }
.pill--slab     { color: var(--on-slab-mute); border-color: var(--slab-line); background: var(--slab-2); }
.pill--best     { color: var(--slab); border-color: var(--ink); background: var(--ink); color: var(--paper); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: -.006em; line-height: 1;
  padding: .85rem 1.35rem;
  border-radius: var(--r); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .14s, border-color .14s, color .14s, transform .14s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-deep); color: #fff; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--slab-2); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--card); border-color: var(--ink); color: var(--ink); }
.btn--onslab { background: var(--on-slab); color: var(--slab); }
.btn--onslab:hover { background: #fff; color: var(--slab); }
.btn--ghost-slab { background: transparent; color: var(--on-slab); border-color: var(--slab-line); }
.btn--ghost-slab:hover { border-color: var(--on-slab-mute); color: var(--on-slab); }
.btn--lg { padding: 1.05rem 1.75rem; font-size: var(--t-body); }
.btn--block { width: 100%; }
.btn--quiet { background: transparent; color: var(--ink-2); border-color: var(--line-2); padding: .65rem .85rem; }
.btn--quiet:hover { color: var(--ink); border-color: var(--ink); background: var(--surface); }
.btn:disabled { cursor: not-allowed; opacity: .48; transform: none; }

/* -------------------------------------------------------------- header --- */
.offerbar {
  background: var(--ink); color: var(--on-slab-2);
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .07em; text-transform: uppercase;
}
.offerbar .wrap {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  justify-content: center; align-items: center;
  padding-block: .55rem;
}
.offerbar b { color: var(--on-slab); font-weight: 500; }
.offerbar .sep { color: var(--slab-line); }
/* Three claims wrap to three lines on a phone and push the whole page down.
   The free-shipping threshold is the one that repeats on every product page,
   so it is the one that drops here. */
@media (max-width: 680px) {
  .offerbar .wrap { gap: .1rem .9rem; padding-block: .45rem; }
  .offerbar .sep, .offerbar .ob--wide { display: none; }
}

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244,242,236,.88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 4rem;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; flex: none; }
.brand:hover { color: inherit; }
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__word {
  font-size: 1.22rem; font-weight: 700; letter-spacing: -.035em;
  color: var(--ink); line-height: 1;
}
.nav { display: flex; gap: var(--s5); margin-left: auto; align-items: center; }
.nav a {
  color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); font-weight: 550;
  padding-block: .35rem; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--red); }
.nav__cta { margin-left: var(--s2); }
.header-cart { flex: none; gap: .6rem; white-space: nowrap; font-size: var(--t-sm); }

.navtoggle { display: none; }
@media (max-width: 1060px) {
  .nav { display: none; }
  .navtoggle {
    display: inline-flex; margin-left: auto; align-items: center; gap: var(--s2);
    background: none; border: 1px solid var(--line-2); border-radius: var(--r);
    padding: .5rem .75rem; font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink); cursor: pointer;
  }
  .site-header.is-open .nav {
    display: flex; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: var(--s3) var(--s5) var(--s5);
    box-shadow: var(--shadow);
  }
  .site-header.is-open .nav a { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .site-header.is-open .nav .nav__cta { margin: var(--s4) 0 0; border-bottom: 0; }
}

/* On-device catalog finder. The public cart remains the source of cart state. */
.shop-find { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; padding: .5rem .7rem; flex: none; border: 1px solid var(--line-2); border-radius: var(--r); background: transparent; color: var(--ink); font: 550 var(--t-xs) var(--sans); cursor: pointer; }
.shop-find[hidden] { display: none; }
.shop-find:hover { border-color: var(--ink); background: var(--surface); }
.shop-find kbd { font: .75rem var(--mono); color: var(--mute); }
.finder-icon { flex: none; }
.shop-finder { width: min(58rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 1px solid var(--slab-line); border-radius: var(--r); background: var(--slab); color: var(--on-slab); overflow: auto; box-shadow: var(--shadow); }
.shop-finder::backdrop { background: rgba(20,21,26,.65); }
.shop-finder [hidden] { display: none !important; }
.shop-finder :is(button, a, input):focus-visible { outline: 2px solid var(--slab-red); outline-offset: 3px; }
.finder-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding: var(--s5) var(--s5) var(--s3); }
.finder-head h2 { color: var(--on-slab); margin: 0; font-size: var(--t-h2); letter-spacing: -.035em; }
.finder-head p { margin: .4rem 0 0; font-size: var(--t-xs); color: var(--on-slab-mute); }
.finder-close, .finder-search button { min-height: 44px; padding: .55rem .7rem; border: 1px solid var(--slab-line); border-radius: var(--r); background: transparent; color: var(--on-slab); font: 500 var(--t-xs) var(--sans); cursor: pointer; }
.finder-close:hover, .finder-search button:hover { background: var(--slab-3); }
.finder-search { padding: 0 var(--s5) var(--s4); border-bottom: 1px solid var(--slab-line); }
.finder-search label { display: block; margin-bottom: .45rem; color: var(--on-slab-2); font-size: var(--t-xs); }
.finder-search > div { display: flex; gap: var(--s2); }
.finder-search input { min-width: 0; width: 100%; min-height: 48px; margin: 0; background: var(--slab-2); color: var(--on-slab); border: 1px solid var(--on-slab-mute); border-radius: var(--r); font: 1rem var(--sans); padding: .65rem .8rem; }
.finder-search input::placeholder { color: var(--on-slab-mute); opacity: 1; }
.finder-search button { flex: none; }
.finder-count { margin: .55rem 0 0; color: var(--on-slab-mute); font: var(--t-micro) var(--mono); }
.finder-workspace { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: var(--s5); padding: var(--s5); }
.finder-results { list-style: none; margin: 0; padding: 3px; max-height: min(25rem, 40dvh); overflow: auto; scrollbar-color: var(--slab-line) var(--slab); }
.finder-results li + li { margin-top: .35rem; }
.finder-hit { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; width: 100%; min-height: 64px; padding: .75rem; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--on-slab); text-align: left; cursor: pointer; }
.finder-hit:hover { background: var(--slab-2); }
.finder-hit[aria-pressed="true"] { border-color: var(--slab-red); background: var(--slab-2); }
.finder-hit__name { font: 600 var(--t-sm) var(--sans); }
.finder-hit__price { color: var(--on-slab-mute); font: var(--t-micro) var(--mono); font-variant-numeric: tabular-nums; }
.finder-preview { display: grid; grid-template-columns: 8rem minmax(0,1fr); align-items: center; align-content: start; gap: var(--s3); min-width: 0; padding: 0; }
.finder-preview > :not(.finder-photo, .finder-product) { grid-column: 1 / -1; }
.finder-photo { overflow: hidden; background: var(--surface); border-radius: var(--r); aspect-ratio: 4 / 3; }
.finder-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.finder-product h3 { margin: 0; color: var(--on-slab); font-size: 1.35rem; letter-spacing: -.025em; }
.finder-product p { margin: .3rem 0 .5rem; font: var(--t-xs) var(--mono); color: var(--on-slab-2); }
.finder-pricing { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.finder-pricing strong { font-size: 1.65rem; line-height: 1.25; font-weight: 500; letter-spacing: -.04em; }
.finder-pricing span { font-size: var(--t-xs); color: var(--on-slab-mute); }
.finder-sizes { min-width: 0; margin: 0; padding: 0; border: 0; }
.finder-sizes legend { padding: 0; margin-bottom: .5rem; font-size: var(--t-xs); color: var(--on-slab-2); }
.finder-sizes > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.finder-sizes button { min-width: 56px; min-height: 44px; padding: .5rem .7rem; border: 1px solid var(--slab-line); border-radius: var(--r); background: var(--slab-2); color: var(--on-slab-2); font: var(--t-xs) var(--mono); cursor: pointer; }
.finder-sizes button:hover { border-color: var(--on-slab-mute); }
.finder-sizes button[aria-pressed="true"] { border-color: var(--slab-red); color: var(--on-slab); }
.finder-confirm { margin: 0; color: var(--on-slab-2); font-size: var(--t-xs); line-height: 1.5; }
.finder-confirm:empty { display: none; }
.finder-photo-note, .finder-ruo { margin: 0; font-size: var(--t-micro); line-height: 1.5; color: var(--on-slab-mute); }
.finder-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.finder-links a, .finder-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-slab); font-size: var(--t-xs); text-underline-offset: .25em; }
.finder-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s5); border-top: 1px solid var(--slab-line); }
.finder-foot span { color: var(--on-slab-mute); font-size: var(--t-micro); }
.finder-empty { padding: 0 var(--s5) var(--s5); margin: 0; color: var(--on-slab-2); font-size: var(--t-sm); }
@media (max-width: 680px) {
  .shop-finder { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
  .finder-head { padding: var(--s4) var(--s4) var(--s3); }
  .finder-search { padding-inline: var(--s4); }
  .finder-workspace { grid-template-columns: minmax(0,1fr); gap: var(--s4); padding: var(--s4); }
  .finder-results { max-height: 10rem; }
  .finder-hit { min-height: 56px; padding: .6rem; }
  .finder-preview { grid-template-columns: 5.5rem minmax(0,1fr); align-items: center; }
  .finder-photo { aspect-ratio: 4 / 3; }
  .finder-product h3 { font-size: 1.15rem; }
  .finder-pricing strong { font-size: 1.4rem; }
  .finder-preview > :not(.finder-photo, .finder-product) { grid-column: 1 / -1; }
  .finder-foot { padding-inline: var(--s4); }
  .finder-empty { padding-inline: var(--s4); }
}
@media (max-width: 420px) { .shop-find span, .shop-find kbd { display: none; } .shop-find { min-width: 44px; padding-inline: .5rem; } }
/* Motion is purposeful, finite and opt-in. Static and reduced-motion modes
   keep the same readable prices, selected size, controls and keyboard focus. */
@media (prefers-reduced-motion: no-preference) {
  html[data-shop-motion="ready"] .home-size__progress { transition: transform .32s cubic-bezier(.16,1,.3,1); }
  html[data-shop-motion="ready"] :is(.home-product, .pcard, .vial-set, .shop-finder) .btn:active { transform: translateY(1px) scale(.985); }
  .shop-finder[open] { animation: finder-enter .24s cubic-bezier(.16,1,.3,1) both; }
  html[data-shop-motion="ready"] .site-header.is-open .nav { animation: finder-enter .2s cubic-bezier(.16,1,.3,1) both; }
  @media (hover: hover) and (pointer: fine) {
    html[data-shop-motion="ready"] :is(.home-product__image, .pcard__media, .vial-set__photo, .shot) img { transition: transform .45s cubic-bezier(.16,1,.3,1); }
    html[data-shop-motion="ready"] :is(.home-product__image, .pcard__media, .vial-set__photo, .shot):hover img { transform: perspective(800px) rotateY(-3deg) rotateX(1deg) scale(1.025); }
  }
}
@keyframes finder-enter { from { opacity: .7; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- layout --- */
/* Home commerce: one route from product choice to the saved cart. Motion
   communicates hierarchy, product focus and confirmation; no scroll hijack. */
.home-page { --home-ease: cubic-bezier(.16, 1, .3, 1); }
.home-page .home-hero { padding-block: var(--s6); }
.home-hero__intro { display: flex; justify-content: space-between; align-items: end; gap: var(--s5); }
.home-hero__copy { min-width: 0; }
.home-hero h1 { font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.04em; margin-block: var(--s2) var(--s3); }
.home-hero .hero__lede { max-width: 65ch; font-size: 1rem; margin: 0; }
.home-hero__browse { font-size: var(--t-sm); white-space: nowrap; margin-bottom: .25rem; }
.home-pick-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-block: var(--s4); }
.home-pick-nav a { font: 550 var(--t-xs) var(--mono); letter-spacing: .04em; min-height: 2.75rem; display: inline-flex; align-items: center; text-underline-offset: .3em; }
.home-pick-nav span { margin-left: auto; font-size: var(--t-xs); color: var(--mute); }
.home-featured, .home-product { scroll-margin-top: 6rem; }
.home-hero__terms { margin-top: var(--s4); }
.home-hero__terms .ruo { margin-bottom: 0; }
.home-page .home-facts { padding-block: var(--s5); border-block: 1px solid var(--line-2); }
.home-facts dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin: 0; }
.home-facts dt { font-weight: 650; color: var(--ink); font-size: var(--t-sm); }
.home-facts dd { margin: .2rem 0 0; color: var(--mute); font-size: var(--t-xs); }
.home-shop { scroll-margin-top: 5rem; }
.home-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.home-product { border-radius: var(--r); overflow: hidden; background: var(--slab); box-shadow: var(--shadow); min-width: 0; }
.home-product__overview { display: grid; grid-template-columns: minmax(5.75rem, .4fr) minmax(0, 1fr); align-items: stretch; }
.home-product__image { display: block; width: 100%; height: 100%; min-width: 0; min-height: 7rem; overflow: hidden; background: var(--surface); }
.home-product__image img { width: 100%; height: 100%; object-fit: contain; }
.home-product__summary { display: flex; flex-direction: column; justify-content: center; padding: var(--s4); min-width: 0; }
.home-product__body { padding: var(--s3) var(--s4) var(--s4); color: var(--on-slab-2); }
.home-product h3 { margin: 0; font-size: clamp(1.1rem, 1.8vw, 1.4rem); letter-spacing: -.03em; }
.home-product h3 a, .home-product h3 a:hover { color: var(--on-slab); text-decoration: none; }
.home-size { --quick-progress: 0%; --quick-stops: 4; padding-top: var(--s3); border-top: 1px solid var(--slab-line); }
.home-size[data-size-count="3"] { --quick-stops: 3; }
.home-size[data-size-count="1"] { --quick-stops: 1; }
.home-size__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.home-size__head label { color: var(--on-slab-2); font-size: var(--t-xs); }
.home-size__head output { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 550; color: var(--on-slab); }
.home-size__track { position: relative; margin-top: var(--s2); }
.home-size__track::before, .home-size__progress { position: absolute; top: calc(50% - 2px); left: 0; height: 4px; border-radius: var(--r-pill); pointer-events: none; }
.home-size__track::before { content: ""; width: 100%; background: var(--on-slab-mute); }
.home-size__progress { width: 100%; transform: scaleX(var(--quick-scale, 0)); transform-origin: left; background: var(--slab-red); }
.home-size__range { position: relative; display: block; width: 100%; height: 2.75rem; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: grab; }
.home-size__range:active { cursor: grabbing; }
.home-size__range::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.home-size__range::-moz-range-track { height: 4px; border: 0; background: transparent; }
.home-size__range::-moz-range-progress { height: 4px; background: transparent; }
.home-size__range::-webkit-slider-thumb { width: 1.35rem; height: 1.35rem; margin-top: -.55rem; appearance: none; -webkit-appearance: none; border: 4px solid var(--slab); border-radius: 50%; background: var(--on-slab); box-shadow: 0 0 0 2px var(--slab-red); }
.home-size__range::-moz-range-thumb { width: .85rem; height: .85rem; border: 4px solid var(--slab); border-radius: 50%; background: var(--on-slab); box-shadow: 0 0 0 2px var(--slab-red); }
.home-size__range:focus-visible { outline: 2px solid var(--slab-red); outline-offset: 2px; border-radius: var(--r-sm); }
.home-size__stops { display: grid; grid-template-columns: repeat(var(--quick-stops), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.home-size__stops li { text-align: center; }
.home-size__stops li:first-child { text-align: left; }
.home-size__stops li:last-child:not(:first-child) { text-align: right; }
.home-size__stops a { position: relative; display: inline-flex; align-items: center; gap: .1rem; min-height: 2.75rem; color: var(--on-slab-mute); font-family: var(--mono); font-size: var(--t-sm); text-decoration: none; }
.home-size__stops a span { font-size: var(--t-micro); }
.home-size__stops a:hover, .home-size__stops a[aria-current="true"] { color: var(--on-slab); }
.home-size__stops a[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: .4rem; height: 2px; background: var(--slab-red); border-radius: var(--r-sm); }
.home-size__stops a:focus-visible { outline: 2px solid var(--slab-red); outline-offset: 2px; }
.home-size__help { margin: 0 0 var(--s4); color: var(--on-slab-mute); font-size: var(--t-micro); }
.home-size[data-size-count="1"] .home-size__track { visibility: hidden; }
.home-size__range:disabled { cursor: default; }
.home-product__pricing { display: flex; flex-direction: column; align-items: baseline; gap: var(--s1); margin: var(--s2) 0 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.home-product__pricing strong { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -.04em; color: var(--on-slab); line-height: 1.2; }
.home-product__pricing > span { font-size: var(--t-xs); color: var(--on-slab-mute); white-space: nowrap; }
.home-product__details { display: block; margin-top: var(--s3); font-size: var(--t-xs); color: var(--on-slab); text-align: center; text-underline-offset: .25em; }
.home-product__details:hover { color: var(--on-slab); }
.home-product__ruo { display: block; font-size: .72rem; line-height: 1.5; color: var(--on-slab-mute); margin-top: var(--s3); }
.home-page .home-order { padding-block: var(--s6); background: var(--surface); border-block: 1px solid var(--line); }
.home-order .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; align-items: center; gap: var(--s6); }
.home-order h2 { font-size: var(--t-h3); margin: 0; }
.home-order p { margin: 0; font-size: var(--t-sm); max-width: 60ch; color: var(--mute); }
.home-order a { white-space: nowrap; font-size: var(--t-sm); }
.home-catalog__links { display: flex; gap: var(--s5); flex-wrap: wrap; margin: calc(-1 * var(--s3)) 0 var(--s5); font-size: var(--t-sm); }
.home-page .home-membership { padding-block: var(--s8); }
.home-page .home-membership p { max-width: 55ch; }
.home-membership .eyebrow { margin-bottom: var(--s3); }
.home-page .home-compare { background: var(--surface); border-block: 1px solid var(--line); }
.home-cart-dock { position: fixed; z-index: 110; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--line-2); box-shadow: var(--shadow); padding: var(--s3) 0 calc(var(--s3) + env(safe-area-inset-bottom)); }
.home-cart-dock .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.home-cart-dock strong { color: var(--ink); display: block; font-size: var(--t-sm); }
.home-cart-dock strong [data-cart-count] { font-family: var(--mono); }
.home-cart-dock .wrap > div > span { font-size: var(--t-xs); color: var(--mute); }
.home-cart-dock__actions { display: flex; align-items: center; gap: var(--s5); font-size: var(--t-sm); }
.home-cart-dock .btn { white-space: nowrap; }
.home-page.has-cart-dock { padding-bottom: 6rem; }
.cart-toast { position: fixed; bottom: var(--s5); left: 50%; transform: translateX(-50%); z-index: 130; width: min(38rem, calc(100% - 2rem)); display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); background: var(--slab); color: var(--on-slab); border: 1px solid var(--slab-line); border-radius: var(--r); box-shadow: var(--shadow-slab); font-size: var(--t-sm); }
.cart-toast > span { flex: 1; line-height: 1.4; }
.cart-toast a { color: var(--on-slab); white-space: nowrap; }
.cart-toast button { border: 0; background: transparent; color: var(--on-slab-mute); cursor: pointer; min-width: 2.75rem; min-height: 2.75rem; font: inherit; font-size: 1.5rem; }
.home-page.has-cart-dock .cart-toast { bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
.home-cart-dock[hidden], .cart-toast[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .home-enter { animation: home-enter .75s var(--home-ease) both; }
  .home-product__image img { transition: transform .7s var(--home-ease); }
  .home-product__image:hover img { transform: scale(1.045); }
  .home-product { transition: transform .35s var(--home-ease); }
  .home-product:hover { transform: translateY(-4px); }
  .home-page [data-reveal] { transition: opacity .65s var(--home-ease), transform .65s var(--home-ease); }
  .home-page .reveal-pending { opacity: 0; transform: translateY(1.25rem); }
  .home-page .reveal-pending:focus-within { opacity: 1; transform: none; }
  .home-cart-dock { animation: home-enter .35s var(--home-ease) both; }
  .cart-toast { animation: cart-confirm .25s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes home-enter { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
  @keyframes cart-confirm { from { opacity: 0; transform: translate(-50%, .5rem); } to { opacity: 1; transform: translate(-50%, 0); } }
}
@media (max-width: 940px) {
  .home-hero__intro { align-items: start; }
  .home-hero h1 { font-size: clamp(2.1rem, 4vw, 2.6rem); }
  .home-product__overview { grid-template-columns: minmax(5rem, .4fr) minmax(0, 1fr); }
  .home-product__summary { padding: var(--s3); }
}
@media (max-width: 767px) {
  .home-hero__intro { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .home-hero h1 { font-size: clamp(2rem, 7.3vw, 2.6rem); max-width: 20ch; }
  .home-hero .hero__lede { max-width: 44ch; }
  .home-pick-nav span { width: 100%; margin-left: 0; }
  .home-products { grid-template-columns: 1fr; gap: var(--s5); }
  .home-product__overview { grid-template-columns: minmax(5.5rem, .38fr) minmax(0, 1fr); }
  .home-product h3 { font-size: 1.3rem; }
  .home-product__pricing { flex-direction: row; flex-wrap: wrap; column-gap: var(--s3); }
  .home-facts dl { grid-template-columns: 1fr; gap: var(--s3); }
  .home-facts dl > div { display: flex; justify-content: space-between; gap: var(--s4); align-items: baseline; }
  .home-facts dd { text-align: right; max-width: 50%; }
  .home-order .wrap { grid-template-columns: 1fr; gap: var(--s3); }
  .home-answers .g2, .home-membership .g2 { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .site-header .wrap { gap: var(--s3); }
  .header-cart { padding: .55rem .65rem; font-size: var(--t-xs); }
  .home-product__overview { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .home-product__pricing { flex-direction: column; }
  .home-facts dl > div { display: block; }
  .home-facts dd { max-width: none; text-align: left; }
  .home-cart-dock .wrap > div > span, .home-cart-dock__actions > a:first-child { display: none; }
  .home-cart-dock__actions { gap: var(--s2); }
  .cart-toast { gap: var(--s2); padding: var(--s3); font-size: var(--t-xs); }
}

section { padding-block: var(--s8); }
section.tight { padding-block: var(--s7); }
.section-head { max-width: 60ch; margin-bottom: var(--s6); }
.section-head p { color: var(--mute); font-size: 1rem; line-height: 1.65; margin-bottom: 0; }

.slab {
  background: var(--slab); color: var(--on-slab-2);
}
.slab h1, .slab h2, .slab h3 { color: var(--on-slab); }
.slab a { color: var(--slab-red); }
.slab a:hover { color: #ff8593; }
.slab .eyebrow { color: var(--on-slab-mute); }
.slab .section-head p { color: var(--on-slab-mute); }

.grid { display: grid; gap: var(--s4); }
.grid > *, .hero__grid > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- hero --- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: var(--s8) var(--s7);
  background:
    radial-gradient(circle at 86% 14%, rgba(200,16,46,.075), transparent 24rem),
    linear-gradient(180deg, rgba(255,255,255,.36), transparent 72%);
}
.hero::after {
  content: ""; position: absolute; z-index: -1; inset: auto -7rem -12rem auto;
  width: 26rem; height: 26rem; border: 1px solid rgba(20,21,26,.08);
  border-radius: 50%; box-shadow: 0 0 0 4rem rgba(20,21,26,.025), 0 0 0 8rem rgba(20,21,26,.018);
}
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s8); align-items: center;
}
.hero__grid--top { align-items: start; }
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; gap: var(--s6); } }

/* Independent columns avoid empty grid rows when price, ladder and specs differ
   in height. Source order stays the same on phones and for keyboard readers. */
.pdp-flow::after { content: ""; display: block; clear: both; }
.pdp-flow > * { min-width: 0; }
.pdp-flow__left { float: left; clear: left; width: calc(52.5% - var(--s6)); }
.pdp-flow__right { float: right; clear: right; width: calc(47.5% - var(--s6)); }
.pdp-ladder, .pdp-spec { margin-top: var(--s6); }
.pdp-economics { margin-top: var(--s8); }
.pdp-handling, .pdp-hub { margin-top: var(--s4); }
@media (max-width: 940px) {
  .pdp-flow__left, .pdp-flow__right { float: none; clear: none; width: 100%; }
  .pdp-flow > * + * { margin-top: var(--s6); }
}

.hero h1 {
  font-size: var(--t-display);
  letter-spacing: -.038em;
  line-height: 1.02;
  margin-bottom: var(--s5);
}
.hero__lede { font-size: 1.15rem; line-height: 1.62; color: var(--ink-2); max-width: 48ch; margin-bottom: var(--s5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s5); }
.hero__points {
  list-style: none; display: grid; gap: .55rem; padding: 0; margin: 0 0 var(--s5);
  color: var(--ink-2); font-size: var(--t-sm);
}
.hero__points li { position: relative; padding-left: 1.35rem; }
.hero__points li::before {
  content: ""; position: absolute; left: 0; top: .58em; width: .48rem; height: .48rem;
  background: var(--red); border-radius: 1px;
}

/* An editorial sequence, not four identical feature cards. The first principle
   carries more visual weight; the rest scan as a numbered reading order. */
.proof-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0,1fr));
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.proof-card {
  grid-column: span 5; min-height: 12rem; padding: var(--s5) var(--s5) var(--s6);
  border-left: 1px solid var(--line); background: rgba(255,255,255,.32);
}
.proof-card--lead { grid-column: span 7; border-left: 0; background: var(--ink); color: var(--on-slab-2); }
.proof-card:nth-child(3) { grid-column: span 6; border-left: 0; border-top: 1px solid var(--line); }
.proof-card:nth-child(4) { grid-column: span 6; border-top: 1px solid var(--line); }
.proof-card h3 { margin-top: var(--s4); margin-bottom: var(--s2); }
.proof-card p { color: var(--mute); max-width: 34ch; font-size: var(--t-sm); line-height: 1.62; }
.proof-card--lead h3 { color: var(--on-slab); font-size: var(--t-h2); }
.proof-card--lead p { color: var(--on-slab-2); }
.proof-card__num { font-family: var(--mono); font-size: var(--t-xs); color: var(--red-ink); }
.proof-card--lead .proof-card__num { color: var(--slab-red); }
@media (max-width: 700px) {
  .proof-card, .proof-card--lead, .proof-card:nth-child(3), .proof-card:nth-child(4) {
    grid-column: 1 / -1; min-height: auto; border-left: 0; border-top: 1px solid var(--line);
  }
  .proof-card--lead { border-top: 0; }
}

/* ------------------------------------------------------- the price slab -- */
/* The signature component. A dark card whose only job is to make the unit
   economics unmissable and machine-readable at the same time. */
.pslab {
  background: var(--slab); color: var(--on-slab-2);
  border-radius: var(--r); padding: var(--s5);
  box-shadow: var(--shadow-slab);
}
.pslab__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.pslab__name { color: var(--on-slab); font-weight: 600; font-size: var(--t-body); letter-spacing: -.015em; }
.pslab__price {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--on-slab); font-size: 2.6rem; font-weight: 500;
  letter-spacing: -.045em; line-height: 1;
}
.pslab__price sup { font-size: .42em; top: -1.1em; position: relative; letter-spacing: 0; }
.pslab__permg {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--on-slab-2); font-size: var(--t-sm); letter-spacing: -.01em;
}
.pslab__permg span { color: var(--on-slab-mute); }
.pslab hr { border-top-color: var(--slab-line); margin: var(--s4) 0; }

/* The home-page price slabs are direct product shortcuts.  Their entire
   surface is one large link; the product-page slabs remain non-interactive. */
.quick-product {
  position: relative; display: block; overflow: hidden;
  border: 1px solid transparent; color: var(--on-slab-2);
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease,
    border-color .18s ease, box-shadow .18s ease;
}
.quick-product::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--slab-red); transform: scaleY(0); transform-origin: bottom;
  transition: transform .18s ease;
}
.quick-product:hover {
  color: var(--on-slab-2); background: var(--slab-2);
  border-color: var(--slab-line); transform: translateX(var(--s2));
  box-shadow: 0 4px 8px rgba(20,21,26,.14), 0 30px 54px -28px rgba(20,21,26,.62);
}
.quick-product:hover::before,
.quick-product:focus-visible::before { transform: scaleY(1); }
.quick-product:focus-visible {
  outline: 3px solid var(--slab-red); outline-offset: 3px;
}
.quick-product__meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s2); color: var(--slab-red);
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 550;
  letter-spacing: .1em; line-height: 1.35; text-transform: uppercase;
}
.quick-product__name { display: inline-flex; align-items: center; gap: var(--s2); }
.quick-product__arrow {
  color: var(--slab-red); font-size: 1.05em;
  transition: transform .18s ease;
}
.quick-product:hover .quick-product__arrow { transform: translate(.15rem,-.15rem); }
.quick-product__body {
  display: grid; grid-template-columns: minmax(0, 1fr) 7.25rem;
  align-items: center; gap: var(--s4);
}
.quick-product__body > div { min-width: 0; }
.quick-product__media {
  display: block; aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--slab-line); border-radius: var(--r-sm);
  background: var(--surface);
}
.quick-product__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.quick-product__cta { margin-top: var(--s3); pointer-events: none; white-space: nowrap; }
.quick-product:hover .quick-product__cta { background: #fff; color: var(--slab); }
@media (max-width: 420px) {
  .quick-product__body { grid-template-columns: minmax(0, 1fr) 5.75rem; gap: var(--s2); }
}

.price-callout {
  display: grid; grid-template-columns: minmax(8rem,.42fr) 1fr; gap: var(--s3) var(--s6);
  align-items: baseline; padding: var(--s5); border: 1px solid var(--line-2);
  border-left: 4px solid var(--red); background: var(--card); box-shadow: var(--shadow);
}
.price-callout__label {
  grid-row: span 2; font-family: var(--mono); font-size: var(--t-xs);
  color: var(--red-ink); letter-spacing: .04em;
}
.price-callout strong { color: var(--ink); font-size: clamp(1.35rem,3vw,2rem); line-height: 1.15; }
.price-callout p { max-width: 62ch; color: var(--mute); font-size: var(--t-sm); }
@media (max-width: 620px) {
  .price-callout { grid-template-columns: 1fr; }
  .price-callout__label { grid-row: auto; }
}

/* $/mg against the market, drawn from real numbers. No vendor in this
   category shows the reader where a price actually sits, which is the whole
   argument, so it gets a chart made of divs - crawlable, no JS, no image. */
.rail { display: grid; gap: var(--s3); margin: 0; }
.rail__row { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: var(--s3); align-items: center; }
.rail__label { font-size: var(--t-xs); color: var(--on-slab-mute); line-height: 1.25; }
.rail__track { height: 10px; background: var(--slab-3); border-radius: var(--r-pill); overflow: hidden; }
.rail__fill { height: 100%; background: var(--on-slab-mute); border-radius: var(--r-pill); }
.rail__val {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-xs); color: var(--on-slab-2); min-width: 4.6rem; text-align: right;
}
/* The Effect row is emphasised in ink, even when it is cheapest. Green is
   reserved for verification states, not a price or ranking cue. */
.rail__row--us .rail__label { color: var(--on-slab); font-weight: 600; }
.rail__row--us .rail__fill { background: var(--on-slab-2); }
.rail__row--us .rail__val { color: var(--on-slab); font-weight: 500; }
.rail__row--us.is-best .rail__fill { background: var(--on-slab-2); }
.rail__row--us.is-best .rail__val { color: var(--on-slab); }
.rail__row--premium .rail__fill { background: var(--slab-red); opacity: .55; }
/* Light-ground variant for compare pages that are not on the slab. */
.rail--light .rail__label { color: var(--mute); }
.rail--light .rail__track { background: var(--line); }
.rail--light .rail__fill { background: var(--faint); }
.rail--light .rail__val { color: var(--ink-2); }
.rail--light .rail__row--us .rail__label { color: var(--ink); }
.rail--light .rail__row--us .rail__fill { background: var(--ink-2); }
.rail--light .rail__row--us .rail__val { color: var(--ink); font-weight: 500; }
.rail--light .rail__row--us.is-best .rail__fill { background: var(--ink-2); }
.rail--light .rail__row--us.is-best .rail__val { color: var(--ink); }
.rail--light .rail__row--premium .rail__fill { background: var(--red); opacity: .5; }

/* ------------------------------------------------------ member pricing --- */
/* Both prices are in the markup; this decides which one is on screen. Doing it
   in CSS rather than JavaScript means a crawler reads both, the page works with
   scripting off, and one control switches every price on the site at once
   instead of one product card at a time. */
.px-mem { display: none; }
[data-member="1"] .px-list { display: none; }
[data-member="1"] .px-mem { display: inline; }
/* A stale saved member-view preference cannot turn proposed figures into a
   shoppable primary price while offersLive is false. */
html[data-offers-live="0"] .px-list { display: inline; }
html[data-offers-live="0"] .px-mem { display: none; }
/* Block-level members of the pair (the note under the price slab) need block. */
p.pslab__note .px-list, p.pslab__note .px-mem { display: none; }
p.pslab__note .px-list { display: block; }
[data-member="1"] p.pslab__note .px-list { display: none; }
[data-member="1"] p.pslab__note .px-mem { display: block; }

.mtoggle {
  display: inline-flex; border: 1px solid var(--slab-line); border-radius: var(--r);
  overflow: hidden; margin-bottom: var(--s4); background: var(--slab-2);
}
.mtoggle button {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 550;
  padding: .5rem .8rem; border: 0; background: transparent; cursor: pointer;
  color: var(--on-slab-mute); line-height: 1.2; white-space: nowrap;
  transition: background-color .12s, color .12s;
}
.mtoggle button + button { border-left: 1px solid var(--slab-line); }
.mtoggle button b { color: var(--slab-green); font-weight: 600; }
.mtoggle button:hover { color: var(--on-slab); }
.mtoggle button.is-on { background: var(--on-slab); color: var(--slab); }
.mtoggle button.is-on b { color: var(--verified); }

/* In the header the control sits on paper, not on the slab. */
.site-header .mtoggle {
  margin: 0 0 0 auto; background: var(--card); border-color: var(--line-2);
}
.site-header .mtoggle button { color: var(--mute); }
.site-header .mtoggle button + button { border-left-color: var(--line-2); }
.site-header .mtoggle button b { color: var(--verified); }
.site-header .mtoggle button.is-on { background: var(--ink); color: var(--paper); }
.site-header .mtoggle button.is-on b { color: var(--slab-green); }
.mtoggle--sm button { padding: .4rem .65rem; font-size: var(--t-micro); }
@media (max-width: 940px) { .site-header .mtoggle { margin-left: auto; } }

/* The toggle stays on a phone. Membership is the core offer, so hiding the one
   control that reveals member pricing on the traffic that is mostly phones
   would mean most visitors never see the price the brand argues on. The
   wordmark gives up its space instead - the mark alone still identifies the
   header, and the site name is in the tab title and the footer regardless. */
@media (max-width: 560px) {
  .site-header .wrap { gap: var(--s3); }
  .brand__word { display: none; }
  .site-header .mtoggle--sm button { padding: .4rem .5rem; letter-spacing: 0; }
  .navtoggle { padding: .5rem .6rem; }
}
@media (max-width: 360px) {
  .site-header .mtoggle--sm button { padding: .35rem .4rem; font-size: .625rem; }
}

.pslab__note {
  font-size: var(--t-xs); line-height: 1.5; color: var(--on-slab-mute);
  margin: var(--s3) 0 0;
}
.pslab__note b { color: var(--on-slab); font-weight: 550; }

/* Tier cards hold a block-level pair. */
.tier__eff .px-list, .tier__eff .px-mem { display: none; }
.tier__eff .px-list { display: block; }
[data-member="1"] .tier__eff .px-list { display: none; }
[data-member="1"] .tier__eff .px-mem { display: block; }

/* Pricing stays ink; green is reserved for verification states. */
[data-member="1"] .pcard__price .px-mem,
[data-member="1"] .ladder__price .px-mem { color: var(--ink); }

/* -------------------------------------------------------------- photos --- */
/* Show a frame only after a real product photo has been supplied. */
.shot {
  margin: 1rem 0 0; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); overflow: hidden; aspect-ratio: 4 / 3;
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------- cards --- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s5);
}
.card--flat { background: var(--surface); }
.card--slab { background: var(--slab-2); border-color: var(--slab-line); color: var(--on-slab-2); }
.card--slab h3 { color: var(--on-slab); }

.pcard {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s4);
  text-decoration: none; color: inherit;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.pcard:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); color: inherit; }
.pcard:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.pcard__media {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) var(--s4);
  border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0;
  background: var(--surface);
}
.pcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pcard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s2); }
.pcard__name { font-weight: 650; color: var(--ink); letter-spacing: -.018em; font-size: 1.05rem; line-height: 1.25; }
.pcard__alias { font-family: var(--mono); font-size: var(--t-micro); color: var(--mute); letter-spacing: .04em; }
.pcard__blurb { font-size: .875rem; color: var(--mute); line-height: 1.62; margin: var(--s2) 0 var(--s4); }
.pcard__foot {
  margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
}
.pcard__price { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; font-size: 1.2rem; letter-spacing: -.03em; }
.pcard__price small { color: var(--mute); font-size: .62em; letter-spacing: 0; }
.pcard__price .px-list::before, .pcard__price .px-mem::before {
  display: block; margin-bottom: .12rem; color: var(--mute); font-family: var(--sans);
  font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.pcard__price .px-list::before { content: "List"; }
.pcard__price .px-mem::before { content: "Member"; }
.pcard__permg { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-xs); color: var(--mute); font-weight: 500; }
.size-index { display: grid; grid-template-columns: repeat(auto-fit,minmax(12rem,1fr)); gap: .5rem 1rem; list-style: none; padding: 0; margin: var(--s4) 0 0; }
.size-index a { display: block; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink-2); font-size: var(--t-xs); }
.size-index a:hover, .size-index a:focus-visible { border-color: var(--red); color: var(--red-ink); }

/* --------------------------------------------------------------- table --- */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  -webkit-overflow-scrolling: touch;
}
.slab .tablewrap { border-color: var(--slab-line); background: var(--slab-2); }

table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 42rem; }
table.data caption {
  text-align: left; padding: var(--s4) var(--s4) 0;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .02em; color: var(--mute);
}
table.data th, table.data td { padding: .75rem var(--s4); text-align: left; vertical-align: top; }
table.data thead th {
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: .75rem; font-weight: 550;
  letter-spacing: .01em; white-space: nowrap;
}
table.data tbody tr + tr { border-top: 1px solid var(--line); }
table.data tbody tr:nth-child(even) { background: var(--surface); }
table.data td.n, table.data th.n { text-align: right; white-space: nowrap; }
table.data .brandcell { font-weight: 600; color: var(--ink); }
table.data tr.us { background: var(--verified-wash) !important; }
table.data tr.us .brandcell { color: var(--verified); }
table.data tr.us td { font-weight: 550; }
table.data tr.foil td { color: var(--mute); }
/* A struck 'was' price is information, not decoration - --faint is 2.42:1
   on paper and fails AA. --mute clears it at 5.13:1. */
table.data .strike { color: var(--mute); text-decoration: line-through; }
table.data small { display: block; color: var(--mute); font-size: var(--t-xs); font-weight: 400; margin-top: .15rem; }
.slab table.data tbody tr + tr { border-top-color: var(--slab-line); }
.slab table.data tbody tr:nth-child(even) { background: var(--slab-3); }
.slab table.data .brandcell { color: var(--on-slab); }
.slab table.data thead th { background: var(--slab-3); color: var(--on-slab); }

.asof {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .02em; color: var(--mute);
  margin-top: var(--s3);
}

/* -------------------------------------------------------------- ladder --- */
/* Size ladder on a PDP: every vial size of one compound, $/mg each, cheapest
   marked. This is the buying decision, so it is a table and not a dropdown. */
.ladder { display: grid; gap: var(--s2); }
.ladder__row {
  display: grid; grid-template-columns: 5.5rem 1fr auto auto; gap: var(--s4);
  align-items: center;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); text-decoration: none; color: inherit;
}
.ladder__row:hover { border-color: var(--ink); color: inherit; }
.ladder__row[aria-current="page"] { border-color: var(--ink); background: var(--surface); box-shadow: inset 3px 0 0 var(--red); }
.ladder__row--selectable { grid-template-columns: 5.5rem 1fr auto auto auto; }
.ladder__action { justify-self: end; }
.ladder__mg { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); }
.ladder__price { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
.ladder__permg { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--mute); font-size: var(--t-sm); }
.ladder__tag { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
@media (max-width: 560px) {
  .ladder__row { grid-template-columns: 4.5rem 1fr auto; gap: var(--s3); }
  /* Sidebar cards are narrower than full-page buying controls. Keep both
     price figures readable without their combined min-content width spilling. */
  .ladder__row:not(.ladder__row--selectable) { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--s1); }
  .ladder__row:not(.ladder__row--selectable) .ladder__price { justify-self: end; }
  .ladder__row:not(.ladder__row--selectable) .ladder__permg { grid-column: 2; justify-self: end; }
  .ladder__row--selectable { grid-template-columns: 4.5rem 1fr auto; }
  .ladder__row--selectable .ladder__permg { grid-column: 2; }
  .ladder__action { grid-column: 3; grid-row: 1 / span 2; }
  .ladder__tag { display: none; }
}

/* Retatrutide is one compound decision, not four disconnected cards. The
   native range remains keyboard and touch operable; the numbered stops are
   ordinary links when scripting is unavailable. */
.dose-selector {
  position: relative; overflow: hidden;
  margin-top: var(--s5); padding: var(--s5);
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--card); box-shadow: var(--shadow);
}
.dose-selector::before {
  content: "RETA / SIZE"; position: absolute; right: -.15rem; top: -.45rem;
  font-family: var(--mono); font-size: clamp(2.25rem, 7vw, 4.75rem); font-weight: 700;
  letter-spacing: -.07em; color: rgba(20,21,26,.035); pointer-events: none;
}
.dose-selector__head {
  position: relative; display: flex; justify-content: space-between; align-items: end;
  gap: var(--s4); margin-bottom: var(--s5);
}
.dose-selector__readout {
  display: flex; align-items: baseline; gap: .35rem; margin-top: var(--s1);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.dose-selector__readout output {
  color: var(--ink); font-size: clamp(2.65rem, 7vw, 4.2rem); font-weight: 650;
  line-height: .95; letter-spacing: -.075em;
}
.dose-selector__readout > span { color: var(--mute); font-size: var(--t-sm); }
.dose-selector__status {
  padding: .45rem .6rem; border-left: 3px solid var(--red); background: var(--red-wash);
  color: var(--red-ink); font-family: var(--mono); font-size: var(--t-micro);
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.dose-selector__range {
  display: block; width: 100%; height: 1.75rem; margin: 0;
  appearance: none; -webkit-appearance: none; cursor: grab;
  background: transparent;
}
.dose-selector__range:active { cursor: grabbing; }
.dose-selector__range::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--red) 0 var(--dose-progress), var(--line-2) var(--dose-progress) 100%);
}
.dose-selector__range::-moz-range-track {
  height: 4px; border: 0; border-radius: var(--r-pill); background: var(--line-2);
}
.dose-selector__range::-moz-range-progress {
  height: 4px; border-radius: var(--r-pill); background: var(--red);
}
.dose-selector__range::-webkit-slider-thumb {
  width: 1.35rem; height: 1.35rem; margin-top: -.55rem;
  appearance: none; -webkit-appearance: none; border: 5px solid var(--card);
  border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--red), var(--shadow);
}
.dose-selector__range::-moz-range-thumb {
  width: .72rem; height: .72rem; border: 5px solid var(--card);
  border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--red), var(--shadow);
}
.dose-selector__range:focus-visible { outline: 0; }
.dose-selector__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--red); }
.dose-selector__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--red); }
.dose-selector__stops {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  margin: .1rem 0 var(--s5); padding: 0; list-style: none;
}
.dose-selector__stops li { text-align: center; }
.dose-selector__stops li:first-child { text-align: left; }
.dose-selector__stops li:last-child { text-align: right; }
.dose-selector__stops a {
  display: inline-flex; align-items: baseline; gap: .2rem; min-height: 2.15rem; padding: .35rem .15rem;
  color: var(--mute); font-family: var(--mono); text-decoration: none;
}
.dose-selector__stops a strong { color: inherit; font-size: var(--t-sm); font-weight: 550; }
.dose-selector__stops a span { font-size: var(--t-micro); }
.dose-selector__stops a:hover { color: var(--ink); }
.dose-selector__stops a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.dose-selector__stops a[aria-current="page"] { color: var(--red-ink); }
.dose-selector__stops a[aria-current="page"] strong { font-weight: 750; }
.dose-selector__metrics {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.dose-selector__metrics > div { padding: var(--s3) 0; }
.dose-selector__metrics > div + div { padding-left: var(--s4); border-left: 1px solid var(--line); }
.dose-selector__metrics span:not(.px-list):not(.px-mem) {
  display: block; color: var(--mute); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase;
}
.dose-selector__metrics strong {
  display: block; margin-top: .2rem; color: var(--ink); font-family: var(--mono);
  font-size: 1.05rem; font-variant-numeric: tabular-nums;
}
[data-member="1"] .dose-selector__metrics .px-mem { color: var(--ink); }
.dose-selector__help { margin: var(--s3) 0 0; color: var(--mute); font-size: var(--t-xs); }
.dose-selector__economics { margin-top: var(--s4); }
.dose-selector.is-loading { opacity: .68; }
.dose-selector.is-loading .dose-selector__range { cursor: progress; }
@media (max-width: 560px) {
  .dose-selector { padding: var(--s4); }
  .dose-selector::before { font-size: 2.5rem; }
  .dose-selector__head { align-items: center; }
  .dose-selector__metrics { grid-template-columns: 1fr; }
  .dose-selector__metrics > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .dose-selector { scroll-behavior: auto; }
}

/* --------------------------------------------------------------- tiers --- */
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s3); }
@media (max-width: 780px) { .tiers { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.tier {
  border: 1px solid var(--slab-line); border-radius: var(--r);
  padding: var(--s4); background: var(--slab-2);
}
.tier__qty { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--on-slab-mute); }
.tier__off { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 2rem; color: var(--on-slab); letter-spacing: -.04em; line-height: 1.1; margin: var(--s2) 0; }
.tier__eff { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-xs); color: var(--on-slab-2); }

/* ---------------------------------------------------------------- spec --- */
.spec { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.spec th, .spec td { padding: .6rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.spec th { color: var(--mute); font-weight: 500; width: 12rem; font-size: var(--t-xs); }
.spec td { color: var(--ink-2); font-family: var(--mono); font-size: var(--t-xs); line-height: 1.55; word-break: break-word; }
.spec td.pending { color: var(--faint); font-style: italic; font-family: var(--sans); }
@media (max-width: 560px) {
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: 100%; }
  .spec tr { padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .spec th, .spec td { padding: 0; border: 0; }
  .spec th { margin-bottom: .2rem; }
  .spec td { word-break: normal; overflow-wrap: anywhere; }
}

/* ----------------------------------------------------------------- faq --- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: var(--s4) 0; list-style: none;
  font-weight: 600; color: var(--ink); font-size: 1.02rem;
  display: flex; justify-content: space-between; gap: var(--s4); align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); color: var(--red-ink); font-size: 1.2rem; flex: none; }
.faq details[open] summary::after { content: '\2212'; }
.faq details > div { padding: 0 0 var(--s4); color: var(--ink-2); font-size: var(--t-sm); max-width: 72ch; }
.slab .faq, .slab .faq details { border-color: var(--slab-line); }
.slab .faq summary { color: var(--on-slab); }
.slab .faq details > div { color: var(--on-slab-2); }

/* -------------------------------------------------------------- prose ---- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s7); }
.prose h3 { margin-top: var(--s5); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 var(--s4); }
.prose li { margin-bottom: var(--s2); }
.prose li::marker { color: var(--faint); }
.prose blockquote {
  margin: var(--s5) 0; padding: var(--s4) var(--s5);
  border-left: 2px solid var(--line-2); background: var(--surface);
  border-radius: 0 var(--r) var(--r) 0; color: var(--ink-2); font-size: var(--t-sm);
}
.prose code { font-family: var(--mono); font-size: .875em; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .1em .35em; }

.toc {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); padding: var(--s4) var(--s5); margin-bottom: var(--s6);
}
.toc ol { margin: 0; padding-left: 1.1rem; font-size: var(--t-sm); }
.toc li { margin-bottom: var(--s1); }

.jump { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s5) 0; }
.jump a {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .07em; text-transform: uppercase;
  padding: .4rem .7rem; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  color: var(--ink-2); text-decoration: none; background: var(--card);
}
.jump a:hover { border-color: var(--ink); color: var(--ink); }

/* --------------------------------------------------------- breadcrumbs --- */
.crumbs { font-size: var(--t-xs); color: var(--mute); padding-block: var(--s4) 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.crumbs a { color: var(--mute); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs li + li::before { content: '/'; color: var(--faint); margin-right: .4rem; }
.crumbs [aria-current="page"] { color: var(--ink-2); }

/* --------------------------------------------------------------- cart --- */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.cart-count {
  min-width: 1.35rem; min-height: 1.35rem; display: inline-grid; place-items: center;
  padding-inline: .3rem; border-radius: var(--r-pill); background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: var(--t-micro);
}
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem); gap: var(--s7); align-items: start; }
.cart-heading { display: flex; justify-content: space-between; gap: var(--s4); align-items: end; margin-bottom: var(--s5); }
.cart-heading h2 { margin-bottom: 0; }
.cart-lines { border-top: 1px solid var(--line-2); }
.cart-line {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto auto; gap: var(--s4); align-items: center;
  padding: var(--s5) 0; border-bottom: 1px solid var(--line);
}
.cart-line__image { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.cart-line__image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.cart-line__copy { min-width: 0; }
.cart-line p { margin: var(--s1) 0 0; }
.cart-line__name { color: var(--ink); font-size: var(--t-body); font-weight: 650; text-decoration-thickness: 1px; }
.cart-line__controls { display: flex; gap: var(--s2); align-items: center; }
.cart-line__controls input { width: 4.75rem; }
.cart-line__price { min-width: 5.5rem; text-align: right; font-family: var(--mono); color: var(--ink); }
.quote-card { padding: var(--s5); border: 1px solid var(--line-2); background: var(--card); box-shadow: var(--shadow); border-radius: var(--r); }
.quote-card h2 { margin-bottom: var(--s5); }
.choice-set { display: grid; gap: var(--s3); border: 0; padding: 0; margin: 0 0 var(--s5); }
.choice-set legend { font-weight: 650; color: var(--ink); margin-bottom: var(--s3); }
.choice-set label { display: flex; gap: var(--s2); align-items: start; font-size: var(--t-sm); }
.field-grid { display: grid; gap: var(--s4); margin-bottom: var(--s5); }
.field-grid label { display: grid; gap: var(--s2); color: var(--ink); font-size: var(--t-sm); font-weight: 600; }
.field-grid input, .field-grid select, .cart-line input {
  width: 100%; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink); font: inherit; min-height: 2.75rem; padding: .65rem .75rem;
}
.field-grid input:focus, .field-grid select:focus, .cart-line input:focus { outline: 3px solid var(--red-wash); border-color: var(--red); }
.field-grid p { margin: 0; }
.quote-button { width: 100%; }
.quote-output { margin: var(--s5) 0; }
.quote-output > :last-child { margin-bottom: 0; }
.quote-breakdown { border-top: 1px solid var(--line); margin-bottom: var(--s3); }
.quote-row { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.quote-row strong { color: var(--ink); font-family: var(--mono); text-align: right; }
.cart-shipping-note { border-left: 2px solid var(--red); padding-left: var(--s3); color: var(--ink); }
.cart-shipping-note p { margin-bottom: var(--s2); }
.cart-shipping-note progress { width: 100%; height: .4rem; accent-color: var(--red); }
.cart-tier-offer { margin-block: var(--s4); padding: var(--s4); border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r); }
.cart-tier-offer strong { color: var(--ink); font-size: var(--t-sm); }
.cart-tier-offer p { margin-block: var(--s2); }
.cart-tier-offer button { margin-top: var(--s2); }
.vial-sets { display: grid; gap: var(--s4); margin-top: var(--s6); }
.vial-set { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.25fr) minmax(13rem, .8fr); gap: var(--s6); align-items: center; padding: var(--s5); background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); }
.vial-set__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); align-items: center; }
.vial-set__photo { display: block; min-width: 0; border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.vial-set__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.vial-set__photo:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.vial-set__details { min-width: 0; }
.vial-set__details .eyebrow { display: block; margin-bottom: var(--s2); }
.vial-set h3 { margin: 0 0 var(--s4); font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.3; letter-spacing: -.025em; }
.vial-set__parts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.vial-set__parts a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); color: var(--ink-2); font-size: var(--t-sm); text-decoration: none; }
.vial-set__parts a:hover .vial-set__item { text-decoration: underline; text-underline-offset: .2rem; }
.vial-set__parts a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.vial-set__quantity { font-family: var(--mono); color: var(--mute); font-size: var(--t-xs); white-space: nowrap; }
.vial-set__purchase { display: grid; gap: var(--s3); padding-left: var(--s5); border-left: 1px solid var(--line); }
.vial-set__money { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.vial-set__tier { margin: 0 0 var(--s2); color: var(--mute); font-size: var(--t-micro); }
.vial-set__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
.vial-set__price strong { font-size: 1.95rem; line-height: 1.15; letter-spacing: -.045em; color: var(--ink); }
.vial-set__price span { font-size: var(--t-micro); color: var(--mute); }
.vial-set__list { margin: var(--s1) 0; color: var(--mute); font-size: var(--t-micro); }
.vial-set__saving { margin: var(--s2) 0 0; color: var(--red-ink); font-size: var(--t-xs); font-weight: 550; }
.vial-set__shipping { margin: 0 0 var(--s2); color: var(--ink-2); font-size: var(--t-xs); }
.vial-set__cta .btn { width: 100%; min-height: 2.75rem; padding-inline: var(--s3); white-space: nowrap; }
.vial-set__ruo { margin: var(--s2) 0 0; color: var(--mute); font-size: var(--t-micro); }
.vial-sets__note { margin-top: var(--s4); color: var(--mute); font-size: var(--t-xs); }
@media (max-width: 980px) {
  .vial-set { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s5); }
  .vial-set__purchase { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; border-left: 0; padding: var(--s4) 0 0; border-top: 1px solid var(--line); gap: var(--s5); }
  .vial-set__photo img { aspect-ratio: 4 / 5; }
}
@media (max-width: 580px) {
  .vial-set { grid-template-columns: 1fr; padding: var(--s4); gap: var(--s4); }
  .vial-set__gallery { order: 1; }
  .vial-set__details { order: 0; }
  .vial-set__purchase { order: 2; gap: var(--s3); }
  .vial-set h3 { font-size: 1.25rem; margin-bottom: var(--s3); }
  .vial-set__photo img { aspect-ratio: 1; }
  .vial-set__price strong { font-size: 1.7rem; }
  .vial-set__tier { font-size: .625rem; }
  .vial-set__cta .btn { font-size: var(--t-xs); }
}
.cart-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.cart-offer { display: flex; gap: var(--s4); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.cart-offer__image { flex: 0 0 5rem; }
.cart-offer__image img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); }
.cart-offer__copy { min-width: 0; }
.cart-offer__copy > a { color: var(--ink); font-weight: 650; }
.cart-offer__copy p { margin-block: var(--s2); }
.cart-offer__total { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
[data-checkout-offers] .cart-offer { padding: var(--s3) 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
[data-checkout-offers] .cart-offer__image { flex-basis: 4rem; }
@media (prefers-reduced-motion: no-preference) {
  .cart-shipping-note progress { transition: accent-color .2s ease; }
  .vial-set__photo img { transition: transform .35s ease; }
  .vial-set__photo:hover img { transform: scale(1.035); }
}
.optional-field { margin-block: var(--s3); font-size: var(--t-sm); }
.optional-field > summary { cursor: pointer; color: var(--ink); padding-block: var(--s3); min-height: 2.75rem; }
.optional-field > summary:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.optional-field[open] > summary { margin-bottom: var(--s2); }
.cart-delivery-quote { margin-top: var(--s5); border-top: 1px solid var(--line); }
[data-cart-checkout][aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
@media (max-width: 820px) {
  .cart-layout { grid-template-columns: 1fr; }
  .quote-card { position: static; }
  .cart-offers { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  .cart-line { grid-template-columns: 4rem minmax(0, 1fr) auto; gap: var(--s3); }
  .cart-line__image { grid-row: 1 / 3; }
  .cart-line__copy { grid-column: 2 / -1; }
  .cart-line__controls { grid-column: 2; grid-row: 2; flex-wrap: wrap; }
  .cart-line__price { grid-column: 3; grid-row: 2; }
  .cart-heading { align-items: start; }
}

/* ----------------------------------------------------------- checkout --- */
.checkout-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); gap: var(--s6); align-items: start; }
.checkout-form { display: grid; gap: var(--s4); grid-column: 1; grid-row: 1; }
.checkout-section { padding: var(--s5); }
.checkout-section h2 { margin-bottom: var(--s5); }
.checkout-section > .small { margin-top: calc(-1 * var(--s3)); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.form-grid__wide { grid-column: 1 / -1; }
.form-grid label, .field-block { display: grid; gap: var(--s2); color: var(--ink); font-size: var(--t-sm); font-weight: 600; }
.form-grid input, .form-grid select, .field-block textarea {
  width: 100%; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink); font: inherit; min-height: 2.75rem; padding: .65rem .75rem;
}
.field-block { margin-top: var(--s5); }
.field-block textarea { resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .field-block textarea:focus { outline: 3px solid var(--red-wash); border-color: var(--red); }
.method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); border: 0; padding: 0; margin: 0; }
.method-grid label { display: flex; gap: var(--s3); align-items: start; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: var(--s4); }
.method-grid input { margin-top: .15rem; accent-color: var(--red); }
.method-grid b, .method-grid small { display: block; }
.method-grid b { color: var(--ink); }
.method-grid small { color: var(--mute); margin-top: var(--s1); line-height: 1.4; }
.consent { display: flex; gap: var(--s3); align-items: start; font-size: var(--t-sm); line-height: 1.55; }
.consent input { margin-top: .25rem; flex: none; accent-color: var(--red); }
/* Flow normally: expandable estimates/add-ons can exceed a short viewport.
   A sticky whole sidebar makes its final controls unreachable. */
.checkout-aside { display: grid; gap: var(--s4); grid-column: 2; grid-row: 1; }
.checkout-review > summary { cursor: pointer; color: var(--ink); min-height: 2.75rem; }
.checkout-review > summary span { display: block; margin-top: var(--s2); }
.checkout-review[open] > summary { margin-bottom: var(--s4); }
.checkout-review > summary:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.checkout-aside ul { padding-left: 1.1rem; }
.checkout-aside li { margin-bottom: var(--s2); }
.checkout-aside .checkout-items { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.checkout-items li { display: flex; gap: var(--s3); align-items: baseline; padding-block: var(--s2); font-size: var(--t-sm); }
.checkout-items li > span { font-family: var(--mono); color: var(--mute); min-width: 2.5rem; }
.status-card { margin-top: var(--s6); padding: var(--s6); border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); }
.status-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); align-items: start; }
.status-head h2 { margin-bottom: var(--s5); font-family: var(--mono); }
.status-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); margin: 0 0 var(--s5); }
.status-facts div { padding: var(--s4); border-right: 1px solid var(--line); min-width: 0; }
.status-facts div:last-child { border-right: 0; }
.status-facts dt { font-family: var(--mono); font-size: var(--t-micro); color: var(--mute); letter-spacing: .08em; text-transform: uppercase; }
.status-facts dd { margin: var(--s2) 0 0; color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.status-lines { padding-left: 1.25rem; margin-bottom: var(--s5); }
@media (max-width: 820px) {
  .checkout-shell { grid-template-columns: 1fr; }
  .checkout-aside { position: static; }
  .checkout-aside { grid-column: 1; grid-row: 1; }
  .checkout-form { grid-column: 1; grid-row: 2; }
}
@media (max-width: 580px) {
  .form-grid, .method-grid, .status-facts { grid-template-columns: 1fr; }
  .form-grid__wide { grid-column: auto; }
  .status-facts div { border-right: 0; border-bottom: 1px solid var(--line); }
  .status-facts div:last-child { border-bottom: 0; }
  .status-card { padding: var(--s4); }
}

/* -------------------------------------------------------------- footer --- */
.site-footer { background: var(--slab); color: var(--on-slab-mute); padding-block: var(--s7) var(--s5); margin-top: var(--s9); }
/* Footer column labels are real headings so a screen-reader user can jump
   between them, but at H2 rather than H4 - an H4 straight after the page's H2
   content skips two levels and breaks the document outline. */
.site-footer .foot-h {
  color: var(--on-slab); font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  margin: 0 0 var(--s3); line-height: 1.3;
}
.site-footer a { color: var(--on-slab-2); text-decoration: none; font-size: var(--t-sm); }
.site-footer a:hover { color: var(--on-slab); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footgrid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--s6); }
@media (max-width: 940px) { .footgrid { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
@media (max-width: 520px) { .footgrid { grid-template-columns: 1fr; } }
.footer-legal {
  margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--slab-line);
  font-size: var(--t-xs); line-height: 1.6; color: var(--on-slab-mute);
}
.footer-legal p { margin-bottom: var(--s3); }
.nap { font-style: normal; font-size: var(--t-xs); line-height: 1.7; color: var(--on-slab-mute); }
.nap b { color: var(--on-slab-2); font-weight: 550; }

/* ------------------------------------------------------------ utilities -- */
.stack   > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s6); }
.row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt5 { margin-top: var(--s5); } .mt6 { margin-top: var(--s6); } .mt7 { margin-top: var(--s7); }
.mute { color: var(--mute); }
.small { font-size: var(--t-sm); }
.xs { font-size: var(--t-xs); }
.center { text-align: center; }
.slab .mute { color: var(--on-slab-mute); }

.callout {
  border: 1px solid var(--line-2); border-left: 3px solid var(--ink);
  background: var(--surface); border-radius: 0 var(--r) var(--r) 0;
  padding: var(--s4) var(--s5); font-size: var(--t-sm);
}
.callout--red { border-left-color: var(--red); background: var(--red-wash); border-color: rgba(200,16,46,.2); }
.callout--verified { border-left-color: var(--verified); background: var(--verified-wash); border-color: rgba(14,107,57,.22); }

/* A PROPOSED price or offer is marked in the markup, not just in a doc, so a
   number that has not been signed off can never read as live on the page. */
.proposed {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute);
  border: 1px dashed var(--line-2); border-radius: var(--r-sm);
  padding: .1rem .4rem; vertical-align: middle; white-space: nowrap;
}
.slab .proposed { color: var(--on-slab-mute); border-color: var(--slab-line); }

@media print {
  .site-header, .offerbar, .site-footer, .jump, .btn { display: none !important; }
  body { background: #fff; }
  .slab, .pslab { background: #fff !important; color: #000 !important; }
}