/* ==========================================================================
   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;
}

/* --------------------------------------------------------------- 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); }

.navtoggle { display: none; }
@media (max-width: 940px) {
  .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; }
}

/* -------------------------------------------------------------- layout --- */
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(--slab-green); 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; }

.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 always emphasised, but it only turns green when Effect is
   actually the cheapest figure in the chart. Green means "cheapest or verified"
   everywhere else on this site; letting it mean "us" would make it a brand
   colour that quietly claims a win the numbers beside it contradict. */
.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(--slab-green); }
.rail__row--us.is-best .rail__val { color: var(--slab-green); }
.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(--verified); }
.rail--light .rail__row--us.is-best .rail__val { color: var(--verified); }
.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; }
/* 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(--slab-green); 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; }

/* A member figure in a light table reads as the verified colour, same as $/mg. */
[data-member="1"] .pcard__price .px-mem,
[data-member="1"] .ladder__price .px-mem { color: var(--verified); }

/* -------------------------------------------------------------- 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__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(--verified); font-weight: 500; }

/* --------------------------------------------------------------- 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(--verified); 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); }
  .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(--verified); }
.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(--slab-green); }

/* ---------------------------------------------------------------- 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: minmax(0, 1fr) auto auto; gap: var(--s4); align-items: center;
  padding: var(--s5) 0; border-bottom: 1px solid var(--line);
}
.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 { position: sticky; top: 6.5rem; 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; }
@media (max-width: 820px) {
  .cart-layout { grid-template-columns: 1fr; }
  .quote-card { position: static; }
}
@media (max-width: 580px) {
  .cart-line { grid-template-columns: 1fr auto; }
  .cart-line__controls { grid-column: 1; }
  .cart-line__price { grid-column: 2; 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); }
.checkout-section { padding: var(--s5); }
.checkout-section h2 { margin-bottom: var(--s5); }
.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); }
.checkout-aside { position: sticky; top: 6.5rem; display: grid; gap: var(--s4); }
.checkout-aside ul { padding-left: 1.1rem; }
.checkout-aside li { margin-bottom: var(--s2); }
.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; 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; }
}
@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; }
}