/* CEV Commerce — website styles.
   ---------------------------------------------------------------------------
   THE IDEA. This business's one differentiator is that it publishes the numbers
   the rest of the category hides. So the design's central object is the thing
   those numbers live on: the label on a research vial. `.ticket` is that label —
   mono micro-caps, hairline rules, a lot line, and the research-use-only strip
   along the foot. It carries the live SKU in the hero, the tier prices, the COA
   record and the calculator readout, so the whole site is built out of one
   recognisable artifact instead of a field of generic cards.

   GROUND. Every page opens on ink — a near-black with a green cast — and drops
   into paper below it. The ground is flat and unlit: no gradient orbs, no
   texture overlay. Contrast, type and the label do the work. Green is the logo
   green and is spent on data (margin bars, figures, the one short claim
   sentence in a headline), never sprayed over decoration.

   DEPTH. Panels are layered rather than flat: each carries the ambient shadow
   at rest, lifts on hover, and buttons take their shadow down on press.

   Colour tokens are the brand's, lifted from ../brand/tokens/brand.css, which is
   print-oriented; this is its screen sibling. --ground is the one addition: the
   dark end the print system never needed.

   Type is what brand.css already asks for and the old build didn't load: Archivo
   at its EXPANDED width for display (the token file names "Archivo Expanded"
   first), Inter Tight for body, IBM Plex Mono for anything that is data. */

:root {
  /* green ramp */
  --green-50:#F2FBF1; --green-100:#E0F4DE; --green-200:#C3E8C0; --green-300:#9ED798;
  --green-400:#7FCA78; --green-500:#5CBB53; --green-600:#479F3F; --green-700:#3C8635;
  --green-800:#265622; --green-900:#193916;
  /* ink ramp */
  --ink-50:#F8F9F9; --ink-100:#EEF1F1; --ink-200:#E0E4E4; --ink-300:#C4CACA;
  --ink-400:#99A3A3; --ink-500:#748181; --ink-600:#576060; --ink-700:#383E3E;
  --ink-800:#1D2323; --ink-900:#111515;
  /* semantic */
  --caution:#8A5E14; --caution-wash:#FAF2DF;
  --prohibited:#A83A30; --prohibited-wash:#F8E6E3;
  --affirm:#3C8635; --affirm-wash:#F2FBF1;
  /* roles */
  --brand:var(--green-500); --brand-text:var(--green-700); --brand-deep:var(--green-900);
  --brand-wash:var(--green-50);
  /* green-700 is exactly 4.5:1 on white, so it drops below AA the moment it
     sits on the green wash. Anything green ON a green surface uses this. */
  --brand-on-wash:var(--green-800);
  --paper:#FFFFFF; --paper-2:var(--ink-50); --paper-3:#F1F4F2;
  --rule:var(--ink-200); --rule-strong:var(--ink-800);
  --text:var(--ink-800); --text-2:var(--ink-600); --text-3:var(--ink-500);
  /* the dark ground and everything that sits on it */
  --ground:#0B0F0E; --ground-2:#141A18; --ground-3:#1B2320;
  /* on-ground-3 carries the mono micro-labels; it is set at the lightest tone
     that still clears 4.5:1 on --ground so those labels stay readable. */
  --on-ground:#EEF1F1; --on-ground-2:#A8B3B0; --on-ground-3:#7C8885;
  --hair:rgba(255,255,255,.09); --hair-2:rgba(255,255,255,.16);
  /* type */
  --font-display:"Archivo","Archivo Expanded","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-data:"IBM Plex Mono",Consolas,"Courier New",monospace;
  /* layout */
  --maxw:1180px; --gap:clamp(16px,2.4vw,24px);
  --radius:14px; --radius-lg:26px; --radius-xl:32px;
  /* Depth is layered: every panel carries the ambient shadow at rest, lifts to
     --shadow-raised on hover, and --shadow-lg is reserved for the things that
     genuinely float above the page. --shadow-dark is the same ambience tuned
     for panels sitting on the ink ground, where a soft black is invisible. */
  --shadow:0 1px 2px rgba(17,21,21,.04),0 10px 30px rgba(17,21,21,.07);
  --shadow-raised:0 2px 4px rgba(17,21,21,.05),0 18px 44px rgba(17,21,21,.11);
  --shadow-lg:0 30px 70px rgba(11,15,14,.18);
  --shadow-dark:0 2px 6px rgba(0,0,0,.34),0 20px 48px rgba(0,0,0,.42);
  --press:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:var(--brand-text);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

/* ---------------------------------------------------------------- type ---
   Display is Archivo pushed to its expanded width — wide, industrial, and the
   width axis is doing the work that a second typeface would otherwise do. */
h1,h2,h3,h4{font-family:var(--font-display);font-variation-settings:"wdth" 112;
  color:var(--ink-900);line-height:1.04;letter-spacing:-.02em;font-weight:700;margin:0 0 .4em}
h1{font-size:clamp(2.2rem,4.8vw,3.6rem);letter-spacing:-.03em}
h2{font-size:clamp(1.75rem,3.6vw,2.7rem);letter-spacing:-.025em}
h3{font-size:1.22rem;font-weight:700;font-variation-settings:"wdth" 106;letter-spacing:-.01em}
h4{font-size:1rem}
p{margin:0 0 1rem}
strong,b{font-weight:600;color:var(--ink-900)}
/* ../brand compliance copy carries its own <b> — on the ground it would
   inherit ink-900 and vanish. */
.on-dark strong,.on-dark b,.shell-dark strong,.shell-dark b,
.site-footer strong,.site-footer b{color:#fff}
.mono{font-family:var(--font-data)}
/* statute references inside ../brand compliance copy (`<span class="cite">`) */
.cite{font-family:var(--font-data);font-size:.86em;color:var(--brand-on-wash);white-space:nowrap}
.on-dark .cite,.shell-dark .cite{color:var(--green-300)}
/* the accent clause inside a headline. Short by construction (the macro caps
   it), so it can hold one line and never flood the headline with green. */
.accent{color:var(--brand-text);white-space:nowrap}
.hero .accent,.shell-dark .accent{color:var(--green-300)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,34px)}
.narrow{max-width:780px}
section{padding:clamp(52px,6.5vw,88px) 0}
section.tight{padding:clamp(30px,4vw,48px) 0}
section.flush-top{padding-top:0}
.lede{font-size:clamp(1.06rem,1.5vw,1.24rem);color:var(--text-2);line-height:1.58}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto;max-width:660px}
.small{font-size:.86rem;color:var(--text-2);line-height:1.55}

/* the pill eyebrow. bordered, mono micro-caps, one green dot.
   NB: `.chip` is the catalog filter button — this is deliberately `.tag-pill`. */
.tag-pill{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-data);
  font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;
  color:var(--brand-on-wash);background:var(--brand-wash);border:1px solid var(--green-200);
  padding:.5em 1em .5em .8em;border-radius:999px;margin:0 0 1.2rem}
.tag-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none}
.on-dark .tag-pill{color:var(--green-300);background:rgba(92,187,83,.10);
  border-color:rgba(92,187,83,.28)}

/* section headers: title left, supporting text + link right (ref: the GLP-1
   band). Falls to a stack under 860px. */
.head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,4vw,56px);
  align-items:end;margin-bottom:clamp(30px,4vw,52px)}
.head h2{margin:0;max-width:18ch}
.head .head-side{padding-bottom:.35em}
.head .head-side p{color:var(--text-2);margin:0 0 1rem}
.head.solo{grid-template-columns:1fr}
.head.solo h2{max-width:22ch}

/* ------------------------------------------------------------- buttons --- */
/* Buttons are objects, not outlines: each sits on its own shadow, rises a
   little under the cursor, and takes the shadow back down on press. */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-body);
  font-weight:600;font-size:.98rem;line-height:1;padding:.92em 1.5em;border-radius:999px;
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .14s var(--press),box-shadow .2s var(--press),background .18s ease,
    border-color .18s ease,color .18s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0);transition-duration:.06s}
.btn-primary{background:var(--brand);color:#08110A;
  box-shadow:0 2px 4px rgba(24,74,20,.22),0 10px 26px rgba(92,187,83,.30)}
.btn-primary:hover{background:var(--green-400);
  box-shadow:0 4px 8px rgba(24,74,20,.24),0 18px 38px rgba(92,187,83,.40)}
.btn-primary:active{box-shadow:0 1px 2px rgba(24,74,20,.3)}
.btn-ghost{background:var(--paper);color:var(--ink-900);border-color:var(--ink-200);
  box-shadow:var(--shadow)}
.btn-ghost:hover{border-color:var(--ink-300);background:var(--paper);
  box-shadow:var(--shadow-raised)}
.btn-ghost:active{box-shadow:0 1px 2px rgba(17,21,21,.1)}
.on-dark .btn-ghost{background:var(--ground-3);color:var(--on-ground);
  border-color:var(--hair-2);box-shadow:var(--shadow-dark)}
.on-dark .btn-ghost:hover{background:#232C29;border-color:rgba(255,255,255,.3)}
.on-dark .btn-ghost:active{box-shadow:0 1px 3px rgba(0,0,0,.5)}
.btn-light{background:#fff;color:var(--ink-900)}
.btn-light:hover{background:var(--ink-100)}
.btn-dark{background:var(--ground);color:#fff}
.btn-dark:hover{background:var(--ink-700)}
.btn-lg{font-size:1.04rem;padding:1.05em 1.8em}
.btn-block{display:flex;width:100%;justify-content:center}
/* the arrow sits in its own circle (ref: FloxAmino / Biolift) */
.arrow::after{content:"→";font-family:var(--font-body);font-size:.95em;line-height:1;
  width:1.55em;height:1.55em;border-radius:50%;display:inline-grid;place-items:center;
  background:rgba(0,0,0,.13);margin-right:-.5em;transition:transform .18s ease}
.btn-ghost.arrow::after,.btn-light.arrow::after{background:rgba(0,0,0,.07)}
.on-dark .btn-ghost.arrow::after{background:rgba(255,255,255,.12)}
.btn.arrow:hover::after{transform:translateX(2px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}
.cta-row.center{justify-content:center}
/* a text link that reads as an action */
.link-arrow{font-weight:600;display:inline-flex;align-items:center;gap:.5em}
.link-arrow::after{content:"→";transition:transform .18s ease}
.link-arrow:hover{text-decoration:none}
.link-arrow:hover::after{transform:translateX(3px)}

/* -------------------------------------------------------------- header ---
   Dark on every page, so it welds to the hero below it with no seam. */
/* Solid, not translucent: the header sits ABOVE the hero rather than over it,
   so a semi-transparent ground would blend with the white page behind it and
   render grey at scroll 0. */
.site-header{position:sticky;top:0;z-index:60;background:var(--ground);
  border-bottom:1px solid var(--hair)}
.site-header .bar{display:flex;align-items:center;gap:20px;height:70px}
.brand-logo img{height:25px;width:auto}
.nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav a{color:var(--on-ground-2);font-size:.92rem;font-weight:500;padding:.5em .7em;
  border-radius:999px;transition:color .15s ease,background .15s ease}
.nav a:hover{color:#fff;text-decoration:none;background:rgba(255,255,255,.06)}
.nav a.active{color:#fff;background:rgba(255,255,255,.08)}
/* `.nav a` (0,2,0) outranks `.btn-primary` (0,1,0), so the CTA's own text
   colour has to be restated here or it inherits the muted nav grey. */
.nav .btn{margin-left:10px;padding:.68em 1.2em;font-size:.9rem}
.nav .btn-primary,.nav .btn-primary:hover{color:#08110A;background:var(--brand)}
.nav .btn-primary:hover{background:var(--green-400)}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--on-ground);margin:5px 0;
  transition:.2s}

/* ---------------------------------------------------------------- hero ---
   The ground: near-black, ruled like graph paper. The ruling is the whole
   atmosphere — no glows, no orbs. */
.hero{background:var(--ground);color:var(--on-ground);position:relative;
  border-bottom:1px solid var(--hair)}
.hero h1,.hero h2,.hero h3{color:#fff}
.hero .lede{color:var(--on-ground-2)}
.hero a:not(.btn){color:var(--green-300)}
.hero .wrap{padding-top:clamp(48px,6.5vw,86px);padding-bottom:clamp(48px,6.5vw,86px)}
.hero h1{max-width:17ch}
.hero .lede{max-width:54ch;margin-top:.2em}
.hero.narrow-hero h1{max-width:20ch}
.hero.narrow-hero .lede{max-width:62ch}
/* the split hero: copy left, ticket right */
.hero-split{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,5vw,72px);
  align-items:center}


/* ================================================================ TICKET ===
   The signature. A research-vial label: mono micro-caps, hairline rules, a lot
   line, and the RUO strip along the foot. Light by default, inverted on ground. */
.ticket{background:var(--paper);border:1px solid var(--rule);border-radius:20px;
  overflow:hidden;box-shadow:var(--shadow);font-family:var(--font-body)}
.ticket-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 20px;border-bottom:1px solid var(--rule);background:var(--brand-wash);
  font-family:var(--font-data);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-on-wash)}
.ticket-head .live{display:inline-flex;align-items:center;gap:.6em}
.ticket-head .live::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 3px rgba(92,187,83,.22)}
.ticket-head .lot{color:var(--text-2);letter-spacing:.1em}
.ticket-head .lot b{font-weight:500;color:var(--ink-900)}
.ticket-body{padding:22px 20px 18px}
.ticket-name{font-family:var(--font-display);font-variation-settings:"wdth" 108;
  font-weight:700;font-size:1.6rem;line-height:1.06;letter-spacing:-.02em;color:var(--ink-900);
  margin:0}
.ticket-sub{font-family:var(--font-data);font-size:.78rem;color:var(--text-2);
  margin:.5em 0 0;letter-spacing:.02em}
.ticket-rows{margin:20px 0 0;border-top:1px solid var(--rule)}
.ticket-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--rule)}
.ticket-row .k{font-family:var(--font-data);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2)}
.ticket-row .v{font-family:var(--font-data);font-size:1.05rem;font-weight:500;color:var(--ink-900)}
.ticket-row.strong{border-bottom:0;padding-bottom:6px}
.ticket-row.strong .k{color:var(--brand-text)}
.ticket-row.strong .v{font-family:var(--font-display);font-variation-settings:"wdth" 112;
  font-weight:700;font-size:1.8rem;color:var(--brand-text);letter-spacing:-.02em}
/* The margin bar. The fill is full width and scaled on the X axis from the
   computed margin (`--fill`, 0–1), so the fill animates on the compositor
   instead of relayouting the bar every frame. */
.ticket-bar{height:7px;border-radius:999px;background:var(--ink-100);overflow:hidden;margin-top:4px}
.ticket-bar i{display:block;height:100%;width:100%;border-radius:999px;background:var(--brand);
  transform-origin:left center;transform:scaleX(var(--fill,0));
  transition:transform .7s cubic-bezier(.22,.8,.28,1)}
.ticket-foot{padding:11px 20px;border-top:1px solid var(--rule);background:var(--ink-50);
  font-family:var(--font-data);font-size:.62rem;line-height:1.5;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2)}
/* the hero copy of the ticket runs larger — it is the page's lead image */
.ticket-lg .ticket-head{padding:15px 26px}
.ticket-lg .ticket-body{padding:28px 26px 24px}
.ticket-lg .ticket-name{font-size:2rem}
.ticket-lg .ticket-row{padding:14px 0}
.ticket-lg .ticket-row .v{font-size:1.2rem}
.ticket-lg .ticket-row.strong .v{font-size:2.4rem}
.ticket-lg .ticket-bar{height:8px}
.ticket-lg .ticket-foot{padding:14px 26px}
/* the small companion under the hero ticket, same label grammar */
.ticket-aside{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:12px;padding:15px 22px;border:1px solid var(--hair);border-radius:16px;
  background:rgba(255,255,255,.035);font-family:var(--font-data);font-size:.74rem;
  letter-spacing:.06em;color:var(--on-ground-2);transition:background .16s ease,
  border-color .16s ease}
.ticket-aside:hover{text-decoration:none;background:rgba(255,255,255,.07);
  border-color:var(--hair-2)}
.ticket-aside .go{color:var(--green-300);font-weight:500;white-space:nowrap}
.ticket-aside.solo{justify-content:flex-start}

/* Inverted, for the dark ground. The inverted ticket sits on --ground-3, which
   is lighter than --ground, so --on-ground-3 loses contrast against it; the
   ticket carries its own muted tone tuned to its own surface. */
.ticket.inv{background:var(--ground-3);border-color:var(--hair-2);box-shadow:var(--shadow-lg);
  --muted:#828E8B}
.ticket.inv .ticket-head{background:rgba(92,187,83,.09);border-bottom-color:var(--hair);
  color:var(--green-300)}
/* The head sits on a green wash over --ground-3, so it is lighter than the
   ticket body and the shared --muted lands at 4.28:1 here — under AA. This
   tone is tuned to the washed head instead: 5.7:1. */
.ticket.inv .ticket-head .lot{color:#9AA5A2}
.ticket.inv .ticket-head .lot b{color:var(--on-ground)}
.ticket.inv .ticket-name{color:#fff}
.ticket.inv .ticket-sub{color:var(--muted)}
.ticket.inv .ticket-rows{border-top-color:var(--hair)}
.ticket.inv .ticket-row{border-bottom-color:var(--hair)}
.ticket.inv .ticket-row .k{color:var(--muted)}
.ticket.inv .ticket-row .v{color:#fff}
.ticket.inv .ticket-row.strong .k,.ticket.inv .ticket-row.strong .v{color:var(--green-300)}
.ticket.inv .ticket-bar{background:rgba(255,255,255,.1)}
.ticket.inv .ticket-foot{background:rgba(0,0,0,.28);border-top-color:var(--hair);
  color:var(--muted)}
/* the rotating hero ticket fades between SKUs */
.ticket-swap{transition:opacity .32s ease}
.ticket-swap.out{opacity:0}

/* --------------------------------------------------------------- shells ---
   One big rounded container per section instead of a field of little cards. */
.shell{border-radius:var(--radius-xl);padding:clamp(28px,4vw,52px)}
.shell-wash{background:var(--brand-wash);border:1px solid var(--green-100);box-shadow:var(--shadow)}
.shell-paper{background:var(--paper-3);box-shadow:var(--shadow)}
.shell-dark{background:var(--ground);color:var(--on-ground);box-shadow:var(--shadow-lg)}
.shell-dark h2,.shell-dark h3{color:#fff}
.shell-dark .lede{color:var(--on-ground-2)}
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.5vw,60px);
  align-items:center}
.split.rev .split-media{order:-1}
.grid{display:grid;gap:var(--gap)}
/* Grid children default to min-width:auto and refuse to shrink below their
   content, which pushes wide children (tables, long mono strings) past the
   viewport on small screens. Let them shrink; the scroll containers inside
   handle the rest. */
.split>*,.grid>*,.head>*,.hero-split>*{min-width:0}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

/* the card, kept lean — used where a genuine card is right (blog, quality) */
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:28px;box-shadow:var(--shadow)}
.card h3{margin-top:.1em}
.card p:last-child{margin-bottom:0}
.tint{background:var(--paper-3)}
.tint-green{background:var(--brand-wash)}

/* an item in a set: a green rule, a title, a body. no number — these are not
   a sequence, and numbering them would claim an order that isn't there. */
.item{padding-top:20px;border-top:2px solid var(--ink-900)}
.item h3{margin:0 0 .45em}
.item p{color:var(--text-2);margin:0;font-size:.97rem}
.item.g{border-top-color:var(--brand)}
/* a step in a real sequence — here the number IS information */
.step{display:flex;gap:clamp(18px,3vw,30px);padding:26px 0;border-bottom:1px solid var(--rule)}
.step:last-child{border-bottom:0}
.step .n{flex:none;width:54px;font-family:var(--font-data);font-size:.78rem;font-weight:500;
  letter-spacing:.1em;color:var(--brand-text);padding-top:.45em}
.step h3{margin:0 0 .35em}
.step p{margin:0;color:var(--text-2)}

/* ---------------------------------------------------- the figures strip ---
   Hairline-divided data. On the ground it sits inside the hero band; on paper
   it sits in a rounded shell. */
.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.figures .fig-cell{padding:22px clamp(14px,2vw,26px);border-left:1px solid var(--rule)}
.figures .fig-cell:first-child{border-left:0;padding-left:0}
.fig{font-family:var(--font-display);font-variation-settings:"wdth" 112;font-weight:700;
  font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--ink-900);line-height:1;letter-spacing:-.02em}
.lbl{font-family:var(--font-data);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-2);margin-top:10px}
.on-dark .figures{border-top:1px solid var(--hair);margin-top:clamp(38px,5vw,60px);
  padding-top:6px}
.on-dark .figures .fig-cell{border-left-color:var(--hair)}

/* --------------------------------------------------- the home hero rhythm ---
   The home hero's stack runs on one spacing unit (--r) rather than ad-hoc
   margins, so the gaps between eyebrowless headline, lede, buttons and the
   figures strip are all multiples of the same number. The calculator link
   welds onto the ticket's bottom edge: together they read as one label object
   instead of a panel with a detached pill under it.
   Scoped to .home-hero because .hero-split and .figures are shared with the
   catalog page, and the figure cells take padding-block only so the mobile
   rules that zero their side padding still win. */
.home-hero .wrap{--r:8px;
  padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px)}
.home-hero .hero-split{align-items:center;gap:clamp(32px,4.6vw,64px)}
.home-hero h1{text-wrap:balance;margin:0 0 calc(var(--r)*2.5)}
.home-hero .lede{margin:0;max-width:46ch}
.home-hero .cta-row{margin-top:calc(var(--r)*3.5);gap:calc(var(--r)*1.5)}
.home-hero .ticket-lg{border-bottom-left-radius:0;border-bottom-right-radius:0}
.home-hero .ticket-aside{margin-top:0;border-top:0;border-radius:0 0 20px 20px;
  box-shadow:var(--shadow-lg)}
.home-hero .figures{margin-top:calc(var(--r)*6);padding-top:calc(var(--r)*.75)}
.home-hero .figures .fig-cell{padding-block:calc(var(--r)*2.75)}
.home-hero .figures .fig-cell:last-child{padding-right:0}
.home-hero .figures .lbl{margin-top:calc(var(--r)*1.25)}
.on-dark .fig{color:#fff}
.on-dark .fig em{font-style:normal;color:var(--green-300)}
.on-dark .lbl{color:var(--on-ground-3)}
/* legacy alias so any stray markup still reads sensibly */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule);
  border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.stats .stat{padding:24px;border-right:1px solid var(--rule)}
.stats .stat:last-child{border-right:0}

/* ------------------------------------------------- the standards strip ---
   Where the references put a client-logo row. We don't have client logos, so
   this carries what is actually true: the compliance every store ships with. */
.standards{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.standards div{padding:20px clamp(12px,2vw,24px);border-left:1px solid var(--rule);
  font-family:var(--font-data);font-size:.74rem;letter-spacing:.06em;color:var(--text-2);
  display:flex;align-items:center;gap:.7em;line-height:1.4}
.standards div:first-child{border-left:0;padding-left:0}
.standards div::before{content:"✓";color:var(--brand);font-weight:700;flex:none}

/* ------------------------------------------------------ lists & callouts --- */
.ticks{list-style:none;padding:0;margin:1.4rem 0}
.ticks li{padding:10px 0 10px 30px;position:relative;color:var(--text)}
.ticks li::before{content:"✓";position:absolute;left:0;top:10px;color:var(--brand-text);font-weight:700}
.ticks.ruled li{border-bottom:1px solid var(--rule)}
.ticks.ruled li:last-child{border-bottom:0}
.on-dark .ticks li,.shell-dark .ticks li{color:var(--on-ground-2)}
.on-dark .ticks li::before,.shell-dark .ticks li::before{color:var(--brand)}
/* A wash panel bordered like the shells, not a card with a coloured tab down
   one side. It reads as part of the same family as .shell-wash. */
.callout{background:var(--brand-wash);border:1px solid var(--green-200);padding:20px 24px;
  border-radius:16px;margin:1.6rem 0}
.callout p:last-child{margin-bottom:0}
.callout.caution{border-color:#EAD9AC;background:var(--caution-wash)}
/* Links on any green surface: green-700 falls under AA once the ground is the
   green wash rather than white. Buttons are excluded — `.tint-green a` would
   otherwise outrank `.btn-primary` and repaint its text green-on-green. */
.callout a:not(.btn),.faq-item[open] .a a:not(.btn),
.tint-green a:not(.btn){color:var(--brand-on-wash)}
.ruo{background:var(--caution-wash);border:1px solid #EAD9AC;border-radius:14px;
  padding:15px 20px;font-size:.85rem;color:#6b4a10;line-height:1.55}
.ruo b{color:#5a3f0d}

/* ------------------------------------------------------- catalog table --- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px}
.toolbar input[type=search]{flex:1;min-width:220px;font-family:var(--font-body);font-size:1rem;
  padding:.8em 1.1em;border:1.5px solid var(--rule);border-radius:999px;background:#fff}
.toolbar input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(92,187,83,.14)}
.chip{font-family:var(--font-data);font-size:.76rem;letter-spacing:.04em;padding:.65em 1.1em;
  border:1.5px solid var(--rule);border-radius:999px;background:#fff;color:var(--text-2);
  cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--ink-300);color:var(--ink-900);box-shadow:var(--shadow)}
.chip:active{box-shadow:none}
.chip.on{background:var(--ground);color:#fff;border-color:var(--ground)}
.table-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius-lg);
  background:#fff;box-shadow:var(--shadow)}
table.cat{width:100%;border-collapse:collapse;font-size:.94rem;min-width:560px}
table.cat thead th{font-family:var(--font-data);font-size:.66rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);text-align:left;
  padding:18px 20px;border-bottom:1.5px solid var(--ink-900);white-space:nowrap;
  background:#fff;cursor:pointer;user-select:none}
table.cat thead th:hover{color:var(--ink-900)}
table.cat thead th.n{text-align:right}
table.cat thead th .car{opacity:.5;font-size:.9em}
table.cat tbody td{padding:14px 20px;border-bottom:1px solid var(--rule);vertical-align:baseline}
table.cat tr:last-child td{border-bottom:0}
table.cat td.nm{font-weight:600;color:var(--ink-900)}
table.cat td.nm .detail{display:block;font-weight:400;font-size:.82em;color:var(--text-2);
  margin-top:2px}
table.cat td.sku{font-family:var(--font-data);font-size:.84em;color:var(--text-2);white-space:nowrap}
table.cat td.n{text-align:right;font-family:var(--font-data);white-space:nowrap}
table.cat td.rrp{color:var(--ink-900);font-weight:500}
table.cat td.mgn{color:var(--brand-text);font-weight:600}
table.cat tr.grp td{font-family:var(--font-data);font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-900);background:var(--paper-3);
  border-bottom:1px solid var(--ink-900);padding:12px 20px;font-weight:500}
table.cat tr.grp td .n{color:var(--brand-on-wash)}
table.cat tbody tr[data-name]:hover td{background:var(--green-50)}
.facts{display:flex;flex-wrap:wrap;gap:8px 0;font-family:var(--font-data);font-size:.8rem;
  color:var(--text-2);padding:0;margin:0}
.facts span{white-space:nowrap}
.facts b{color:var(--ink-900);font-weight:600}
.facts span+span::before{content:"·";color:var(--ink-300);margin:0 14px}
.on-dark .facts{color:var(--on-ground-2)}
.on-dark .facts b{color:#fff}
.on-dark .facts span+span::before{color:var(--on-ground-3)}
.empty-row{padding:30px 20px;color:var(--text-2);font-style:italic}
/* the oversized figure that opens the catalog — the number nobody else prints */
.mega{font-family:var(--font-display);font-variation-settings:"wdth" 118;font-weight:700;
  font-size:clamp(3rem,7.4vw,6rem);line-height:.88;letter-spacing:-.045em;color:#fff;
  margin:0;white-space:nowrap}
.mega em{font-style:normal;color:var(--brand)}
.mega-sub{font-family:var(--font-data);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-ground-3);margin:14px 0 0}

/* ----------------------------------------------------------- calculator --- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px);align-items:start}
.calc .panel{background:#fff;border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:28px;box-shadow:var(--shadow)}
.calc .panel.out{background:var(--ground);border-color:var(--ground);color:var(--on-ground);
  box-shadow:var(--shadow-lg)}
.field{margin-bottom:20px}
.field label{display:block;font-size:.7rem;font-family:var(--font-data);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:9px}
.field select,.field input{width:100%;font-family:var(--font-body);font-size:1.04rem;
  padding:.75em 1em;border:1.5px solid var(--rule);border-radius:12px;background:#fff;
  color:var(--ink-900)}
.field input.mono{font-family:var(--font-data)}
.field select:focus,.field input:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(92,187,83,.14)}
.result{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--hair)}
.result:last-of-type{border-bottom:0}
.result .k{color:var(--on-ground-2);font-size:.95rem}
.result .v{font-family:var(--font-data);font-size:1.1rem;color:#fff;font-weight:500}
.result.big{padding:20px 0;border-bottom:1px solid var(--hair)}
.result.big .k{color:var(--green-300)}
.result.big .v{font-size:2rem;font-family:var(--font-display);font-variation-settings:"wdth" 112;
  font-weight:700;color:var(--green-300);letter-spacing:-.02em}
.result .v.neg{color:#E9897F}
.field-hint{margin:9px 0 0;font-size:.82rem;color:var(--text-2);line-height:1.5}
.radio-row{display:flex;flex-direction:column;gap:10px}
.radio{display:flex;align-items:baseline;gap:9px;font-size:.95rem;color:var(--text);
  text-transform:none;letter-spacing:0;font-family:var(--font-body);cursor:pointer;margin:0}
.radio input{width:auto;margin:0;accent-color:var(--brand)}
.radio span{color:var(--text-2);font-size:.85em}
.calc-switch{display:inline-flex;flex-wrap:wrap;gap:4px;margin-top:1.8rem;padding:4px;
  border:1px solid var(--hair-2);border-radius:999px;background:rgba(255,255,255,.04);
  font-family:var(--font-data);font-size:.78rem;letter-spacing:.04em}
.calc-switch a,.calc-switch span{padding:.6em 1.2em;border-radius:999px;white-space:nowrap}
.calc-switch a{color:var(--on-ground-2)}
.calc-switch a:hover{color:#fff;text-decoration:none;background:rgba(255,255,255,.08)}
.calc-switch [aria-current]{background:var(--brand);color:#08110A;font-weight:500}
.calc-flag{margin:18px 0 0;font-size:.86rem;line-height:1.5;padding-left:22px;position:relative;
  min-height:1em}
.calc-flag::before{position:absolute;left:0;top:0}
.calc-flag.ok{color:var(--green-300)}
.calc-flag.ok::before{content:"✓"}
.calc-flag.warn{color:#E8C46A}
.calc-flag.warn::before{content:"!"}
.calc-flag.bad{color:#E9897F}
.calc-flag.bad::before{content:"✕"}

/* -------------------------------------------------------------- pricing ---
   Tiers are tickets: same label grammar as the catalog, so the price and the
   product are visibly the same system. */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:stretch}
.tier{background:#fff;border:1px solid var(--rule);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
.tier-top{padding:22px 26px 0}
.tier .flag{font-family:var(--font-data);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-2);font-weight:500;margin-bottom:14px;min-height:1em}
.tier.feat{border-color:var(--ground);background:var(--ground);color:var(--on-ground);
  box-shadow:var(--shadow-lg)}
.tier.feat h3{color:#fff}
.tier.feat .flag{color:var(--green-300)}
.tier.feat .short{color:var(--on-ground-2)}
.tier.feat .price{color:#fff}
.tier.feat .price .unit{color:var(--on-ground-3)}
.tier.feat .tier-includes{border-top-color:var(--hair)}
.tier.feat .tier-includes li{color:var(--on-ground-2);border-bottom-color:var(--hair)}
.tier.feat .tier-includes li::before{color:var(--brand)}
.tier h3{font-size:1.3rem;margin:0}
.tier .short{color:var(--text-2);font-size:.94rem;margin:.45em 0 1.1em;min-height:3em}
.tier .price{font-family:var(--font-display);font-variation-settings:"wdth" 112;font-weight:700;
  font-size:2.15rem;color:var(--ink-900);line-height:1;letter-spacing:-.025em}
.tier .price .unit{font-family:var(--font-data);font-size:.72rem;font-weight:400;
  color:var(--text-2);letter-spacing:.08em;text-transform:uppercase}
.tier-includes{list-style:none;margin:20px 0 0;padding:20px 26px 0;font-size:.92rem;
  border-top:1px solid var(--rule);flex:1}
.tier-includes li{padding:9px 0 9px 26px;position:relative;color:var(--text);
  border-bottom:1px solid var(--rule)}
.tier-includes li:last-child{border-bottom:0}
.tier-includes li::before{content:"✓";position:absolute;left:0;color:var(--brand-text);
  font-weight:700}
.tier-foot{padding:20px 26px 26px}
.compare-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius-lg);
  background:#fff;box-shadow:var(--shadow)}
table.compare{width:100%;border-collapse:collapse;font-size:.92rem;min-width:740px}
table.compare th,table.compare td{padding:15px 18px;border-bottom:1px solid var(--rule);
  text-align:left}
table.compare thead th{font-family:var(--font-data);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2);border-bottom:1.5px solid var(--ink-900)}
table.compare td.mono{font-family:var(--font-data)}
table.compare tr:last-child td{border-bottom:0}
table.compare tbody tr:hover td{background:var(--paper-3)}

/* ------------------------------------------------------------------ FAQ ---
   The open item lifts into a tinted rounded card (ref: Biolift). */
.faq-item{border:1px solid var(--rule);border-radius:18px;margin-bottom:10px;background:#fff;
  box-shadow:var(--shadow);transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
.faq-item summary{cursor:pointer;list-style:none;padding:20px 24px;font-family:var(--font-display);
  font-variation-settings:"wdth" 106;font-weight:700;font-size:1.06rem;color:var(--ink-900);
  display:flex;justify-content:space-between;gap:20px;align-items:center;letter-spacing:-.01em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--font-body);font-weight:400;
  font-size:1.35rem;line-height:1;color:var(--brand-text);width:30px;height:30px;flex:none;
  border-radius:50%;border:1px solid var(--green-200);background:var(--brand-wash);
  display:grid;place-items:center;transition:transform .22s ease}
.faq-item[open]{background:var(--brand-wash);border-color:var(--green-200);
  box-shadow:var(--shadow-raised)}
.faq-item[open] summary::after{transform:rotate(45deg);background:var(--brand);color:#fff;
  border-color:var(--brand)}
.faq-item .a{padding:0 24px 22px;color:var(--text-2);max-width:74ch}
.faq-item .a p:last-child{margin-bottom:0}

/* ----------------------------------------------------------------- blog --- */
.post-list{display:grid;gap:14px}
.post-card{display:grid;grid-template-columns:150px 1fr;gap:0 clamp(16px,3vw,34px);
  background:#fff;border:1px solid var(--rule);border-radius:var(--radius-lg);padding:26px 28px;
  color:inherit;box-shadow:var(--shadow);
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.post-card:hover{text-decoration:none;border-color:var(--ink-300);transform:translateY(-3px);
  box-shadow:var(--shadow-raised)}
.post-card .tag{font-family:var(--font-data);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-text);grid-column:1;line-height:1.7;
  padding-top:.35em}
.post-card h3{margin:0 0 .35em;font-size:1.2rem;grid-column:2}
.post-card p{color:var(--text-2);margin:0;grid-column:2;font-size:.96rem}
.post-card.soon{background:var(--paper-3);border-style:dashed}
.post-card.soon:hover{transform:none;box-shadow:none;border-color:var(--rule)}
.post-card.soon .tag{color:var(--text-2)}
.post-card.soon h3{color:var(--text-2)}
.article{max-width:740px;margin:0 auto}
.article h2{margin-top:1.9em;font-size:clamp(1.35rem,2.4vw,1.8rem)}
.article h3{margin-top:1.6em}
.article p,.article li{font-size:1.07rem;color:var(--text)}
.article ul{padding-left:1.2em}
.article li{margin-bottom:.5em}
.article .meta{font-family:var(--font-data);font-size:.76rem;color:var(--text-2);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:2.4rem}

/* ------------------------------------------------------- the store proof --- */
.window{border:1px solid var(--rule);border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:var(--shadow)}
.window .bar{display:flex;gap:7px;align-items:center;padding:12px 16px;
  border-bottom:1px solid var(--rule);background:var(--paper-3)}
.window .bar i{width:10px;height:10px;border-radius:50%;background:var(--ink-300);display:block}
.window .bar .url{margin-left:12px;font-family:var(--font-data);font-size:.78rem;
  color:var(--text-2)}
.window .body{padding:28px}

/* ------------------------------------------------------------- CTA band --- */
.band{background:var(--ground);color:var(--on-ground)}
.band h2{color:#fff;max-width:20ch;margin-left:auto;margin-right:auto}
.band .lede{color:var(--on-ground-2)}
.band a:not(.btn){color:var(--green-300)}

/* --------------------------------------------------------------- footer --- */
.site-footer{background:var(--ground);color:var(--on-ground-2);padding:64px 0 32px;
  font-size:.92rem;border-top:1px solid var(--hair)}
.site-footer a{color:var(--on-ground-2)}
.site-footer a:hover{color:#fff}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;padding-bottom:36px;
  border-bottom:1px solid var(--hair)}
.footer-top .brand-logo img{height:24px}
.footer-col h4{font-family:var(--font-data);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-ground-3);font-weight:500;margin:0 0 16px}
.footer-col a{display:block;padding:5px 0}
.footer-addr{margin-top:18px;line-height:1.75;color:var(--on-ground-3);font-size:.88rem}
.footer-legal{padding-top:26px;color:var(--on-ground-3);font-size:.78rem;line-height:1.65;
  max-width:82ch}
.footer-legal .ruo-line{margin-bottom:10px;color:var(--on-ground-2)}

/* ----------------------------------------------------------- responsive --- */
@media (max-width:1000px){
  .hero-split{grid-template-columns:1fr;gap:38px}
  .hero h1{max-width:20ch}
  .tier-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .head{grid-template-columns:1fr;align-items:start;gap:16px}
  .head .head-side{padding-bottom:0}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .split.rev .split-media{order:0}
  .calc{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .standards{grid-template-columns:repeat(2,1fr)}
  .standards div:nth-child(3){border-left:0;padding-left:0}
  .standards div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .figures{grid-template-columns:repeat(2,1fr)}
  .figures .fig-cell:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav{position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ground);border-bottom:1px solid var(--hair);padding:8px 0;
    transform:translateY(-145%);transition:transform .24s ease;box-shadow:var(--shadow-lg);
    margin:0}
  .nav.open{transform:translateY(0)}
  .nav a{padding:14px clamp(18px,4vw,34px);border-radius:0;
    border-bottom:1px solid rgba(255,255,255,.05)}
  .nav .btn{margin:12px clamp(18px,4vw,34px);justify-content:center}
  .nav-toggle{display:block}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .tier-grid{grid-template-columns:1fr}
  .tier .short{min-height:0}
  .footer-top{grid-template-columns:1fr}
  .cta-row .btn{flex:1;justify-content:center}
  .post-card{grid-template-columns:1fr;gap:10px}
  .post-card .tag,.post-card h3,.post-card p{grid-column:1}
  .step{gap:14px}
  .step .n{width:auto;min-width:34px}
  .shell{border-radius:22px}
}
@media (max-width:520px){
  .window .body{padding:18px}
  .window .body table.cat{font-size:.84rem}
  .window .body table.cat td{padding:10px 6px}
  .ticket-lg .ticket-name{font-size:1.6rem}
  .ticket-lg .ticket-row.strong .v{font-size:2rem}
  .ticket-aside{flex-direction:column;align-items:flex-start;gap:6px}
  .figures{grid-template-columns:1fr}
  .figures .fig-cell{border-left:0;padding-left:0;border-top:1px solid var(--rule)}
  .on-dark .figures .fig-cell{border-top-color:var(--hair)}
  .figures .fig-cell:first-child{border-top:0}
  .standards{grid-template-columns:1fr}
  .standards div{border-left:0;padding-left:0;border-bottom:1px solid var(--rule)}
  .standards div:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ============================================================================
   26 Aug 2026 rebuild. Four new blocks: the three supply routes, member
   stories, the wholesale tables, and the tier picker.
   ========================================================================= */

/* ------------------------------------------------------- supply routes --- */
/* The three price lists as a stack of clickable rows. It reads as a contents
   page for the supply side of the business, which is what it is. */
.routes{display:grid;gap:10px}
.route{display:flex;align-items:center;gap:18px;padding:16px 20px;background:#fff;
  border:1px solid var(--rule);border-radius:16px;color:inherit;box-shadow:var(--shadow);
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.route:hover{text-decoration:none;border-color:var(--brand);transform:translateY(-2px);
  box-shadow:var(--shadow-raised)}
.route-n{font-family:var(--font-display);font-variation-settings:"wdth" 112;font-weight:700;
  font-size:1.9rem;line-height:1;color:var(--brand-text);flex:none;min-width:2.4em;
  letter-spacing:-.03em}
.route-b{display:grid;gap:2px;min-width:0}
.route-b b{font-size:1rem;color:var(--ink-900)}
.route-u{font-family:var(--font-data);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2)}
.route-t{font-size:.88rem;color:var(--text-2);line-height:1.5;margin-top:3px}
.route-foot{margin:6px 2px 0;font-size:.84rem;color:var(--text-2);line-height:1.55}

/* ------------------------------------------------------- member stories --- */
.story{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,4vw,48px);
  align-items:center;padding:clamp(24px,3vw,34px) 0;border-bottom:1px solid var(--rule)}
.story:last-of-type{border-bottom:0}
.story-name{font-family:var(--font-display);font-variation-settings:"wdth" 112;
  font-weight:700;font-size:1.9rem;letter-spacing:-.025em;color:var(--ink-900);margin:0 0 1rem}
.story-body h3{margin:0 0 .4em}
.story-body>p{color:var(--text-2)}
.story-body .ticks{margin-bottom:0}

.quote-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.quote{margin:0;background:#fff;border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:28px 30px;box-shadow:var(--shadow)}
.quote blockquote{margin:0;font-size:1.08rem;line-height:1.6;color:var(--ink-900)}
.quote blockquote::before{content:"\201C";font-family:var(--font-display);font-size:2.6rem;
  line-height:0;color:var(--brand);vertical-align:-.35em;margin-right:.1em}
.quote figcaption{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);
  font-size:.9rem;color:var(--text-2)}
.quote figcaption b{color:var(--ink-900)}
.quote figcaption span{display:block;font-family:var(--font-data);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-top:6px}

/* ------------------------------------------------- the video testimonial --- */
/* The facade is a button, not an iframe. site.js swaps in the player on click,
   so the page makes no request to Vimeo unless somebody asks for one. */
.vid{margin:0;background:#fff;border:1px solid var(--rule);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow)}
.vid-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.vid-play{display:block;width:100%;aspect-ratio:16/9;position:relative;cursor:pointer;
  border:0;padding:0;background:var(--ground);
  background-image:radial-gradient(120% 90% at 50% 0%,var(--ground-3),var(--ground));
  transition:background-color .18s ease}
.vid-play:hover{background-color:var(--ground-2)}
.vid-icon{position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;
  background:var(--brand);box-shadow:0 6px 24px rgba(0,0,0,.35);
  transition:transform .18s ease}
.vid-icon::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent
  transparent #08110A;transform:translateX(2px)}
.vid-play:hover .vid-icon{transform:scale(1.06)}
.vid-len{position:absolute;right:12px;bottom:12px;font-family:var(--font-data);
  font-size:.72rem;letter-spacing:.08em;color:var(--on-ground);
  background:rgba(0,0,0,.55);border-radius:4px;padding:4px 8px}
.vid iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.vid video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.vid figcaption{padding:18px 24px 20px;font-size:.9rem;color:var(--text-2)}
.vid figcaption b{color:var(--ink-900)}
.vid figcaption span{display:block;font-family:var(--font-data);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-top:6px}

/* ---------------------------------------------------- the entity record --- */
.record{background:#fff;border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:28px 30px;box-shadow:var(--shadow)}
.record-head{font-family:var(--font-data);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-2);padding-bottom:14px;
  border-bottom:1.5px solid var(--ink-900);margin-bottom:6px}
.record dl{display:grid;grid-template-columns:auto 1fr;gap:0 24px;margin:0}
.record dt{font-family:var(--font-data);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2);padding:13px 0;
  border-bottom:1px solid var(--rule)}
.record dd{margin:0;padding:13px 0;color:var(--ink-900);border-bottom:1px solid var(--rule);
  text-align:right}
.record dl>*:nth-last-child(-n+2){border-bottom:0}
.record-foot{margin:16px 0 0;font-size:.85rem;color:var(--text-2);line-height:1.6}

/* ----------------------------------------------- wholesale price lists --- */
.route-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.route-tabs .chip .n{font-family:var(--font-data);opacity:.6;margin-left:.35em}
.route-tabs .chip.ghost{border-style:dashed;color:var(--text-2)}
.route-pane.hide{display:none}
.pane-head{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:flex-end;
  justify-content:space-between;margin-bottom:22px}
.pane-head h2{margin:0}
.pane-head .small{margin:.5em 0 0;max-width:60ch;color:var(--text-2)}
.pane-head .facts{margin:0}
/* The per-vial figure under each kit price. Neither supplier sheet prints one;
   this one is ours, so it is set small and grey and never reads as the price. */
table.cat.pl td.n .per{display:block;font-size:.76em;color:var(--text-2);
  font-weight:400;margin-top:2px}
table.cat.pl{min-width:700px}

/* --------------------------------------------------------- tier picker --- */
.level-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.level{display:grid;gap:4px;text-align:left;padding:16px 18px;background:#fff;
  border:1px solid var(--rule);border-radius:16px;cursor:pointer;font:inherit;
  box-shadow:var(--shadow);transition:border-color .16s ease,background .16s ease}
.level:hover{border-color:var(--ink-300)}
.level.on{background:var(--ground);border-color:var(--ground);box-shadow:var(--shadow-lg)}
.lv-code{font-family:var(--font-data);font-size:.66rem;letter-spacing:.14em;color:var(--text-2)}
.lv-name{font-family:var(--font-display);font-variation-settings:"wdth" 106;font-weight:700;
  font-size:.98rem;color:var(--ink-900);letter-spacing:-.01em;line-height:1.25}
.lv-price{font-family:var(--font-data);font-size:.82rem;color:var(--brand-text)}
.lv-price em{font-style:normal;font-size:.82em;color:var(--text-2);display:block}
.level.on .lv-code{color:var(--on-ground-3)}
.level.on .lv-name{color:#fff}
.level.on .lv-price{color:var(--green-300)}
.level.on .lv-price em{color:var(--on-ground-3)}
.tier-why{margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--rule);
  color:var(--text-2);font-size:.95rem;line-height:1.6}
.tier-calc{display:block;margin-top:12px;text-align:center;font-family:var(--font-data);
  font-size:.76rem;letter-spacing:.04em;color:var(--brand-text)}
.tier.feat .tier-calc{color:var(--green-300)}

/* --------------------------------------------- small shared adjustments --- */
.fig.sm{font-size:clamp(1.1rem,1.7vw,1.5rem)}
.addon{margin-top:var(--gap);display:flex;flex-wrap:wrap;gap:24px;align-items:center;
  justify-content:space-between;padding:30px clamp(24px,3vw,36px)}
.addon>div{max-width:58ch}
.addon h3{margin:0 0 .3em}
.addon h3 .mono{font-weight:600}
.addon p{margin:0;color:var(--text-2)}
.vsl-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px;padding-top:28px;padding-bottom:28px}
.vsl-strip>div{max-width:58ch}
.vsl-strip h3{margin:0 0 .25em}
.vsl-strip p{margin:0;color:var(--text-2)}

@media (max-width:1000px){
  .level-picker{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .story{grid-template-columns:1fr;gap:26px}
  .quote-row{grid-template-columns:1fr}
  .vid-row{grid-template-columns:1fr}
  .record dl{grid-template-columns:1fr}
  .record dt{border-bottom:0;padding-bottom:0}
  .record dd{text-align:left;padding-top:4px}
}
@media (max-width:760px){
  .level-picker{grid-template-columns:repeat(2,1fr)}
  .route{gap:12px;padding:14px 16px}
  .route-n{font-size:1.5rem;min-width:2em}
  .pane-head{display:block}
  .pane-head .facts{margin-top:14px}
}

/* ============================================================================
   PHONE PASS — 26 Aug 2026, from a measured audit of 14 pages x 6 viewports
   (320 / 360 / 390 / 430 / 768 / 1024). Everything below fixes something the
   audit actually caught, and the note on each says what.
   ========================================================================= */

/* 1 · THE SIDEWAYS SCROLL. `.ticket-aside .go` is set nowrap so the label and
   its arrow hold one line beside each other. At 320px "Run these numbers on
   your own volume" is wider than the phone, and one nowrap span dragged the
   whole document to 337px in a 320px viewport. Below the split it wraps. */
@media (max-width:560px){
  .ticket-aside .go{white-space:normal}
}

/* 2 · THE BROKEN SKU. The ticket head is two items pushed apart, and at phone
   width they squeeze until `LTF-TZ-10` breaks after the second hyphen and the
   supplier reference reads as two different codes. Let the head wrap between
   the two items instead, and hold each one whole. */
.ticket-head{flex-wrap:wrap}
.ticket-head .lot{white-space:nowrap}
@media (max-width:560px){
  .ticket-head{gap:4px 14px}
  .ticket-head .src{flex:1 0 100%}
}

/* 3 · THE DANGLING MIDDOT. `.facts` separates its items with a "·" drawn
   before every span after the first. Inline, that is correct. Wrapped onto a
   phone it leaves an orphaned dot at the head of each new line, which reads as
   a broken bullet list. Below the split, stack the facts and drop the dots. */
@media (max-width:600px){
  .facts{display:grid;gap:7px 0}
  .facts span{white-space:normal}
  .facts span+span::before{content:none}
}

/* 4 · TAP TARGETS. Chips measured 33px and the radio inputs 13px. The label
   around a radio is the real hit area, so it gets the height rather than the
   input. 44px is the iOS guideline and these now clear 40. */
@media (hover:none),(max-width:760px){
  .chip{min-height:42px;display:inline-flex;align-items:center}
  .radio{min-height:42px;align-items:center}
  .radio input{width:20px;height:20px;flex:none}
  .faq-item summary{padding-block:22px}
  table.cat td.n a{display:inline-block;padding:6px 0}
}

/* 5 · THE CLIPPED BUTTON. `.btn` is nowrap so a label never breaks mid-phrase
   next to its arrow. In a full-width tier card at 320px, "Start with Starter
   Community Test" overflowed its own button by 6px. Only the block buttons are
   released, because they own their line anyway. */
@media (max-width:420px){
  .btn-block{white-space:normal;text-align:center;line-height:1.3;padding-block:1em}
}

/* 6 · THE PRICE TABLES. The domestic sheet is seven columns and 820px wide
   inside a horizontal scroller. On a 390px phone that puts more than half the
   table off-screen, including the prices, on the page whose entire purpose is
   the prices. So the two columns nobody reads on a phone come out: the
   calc link, because the calculator has its own picker. The supplier
   reference column that used to come out here was removed from the tables
   altogether on 26 Aug 2026. What is left fits.

   The group header rows keep their original colspan. A colspan wider than the
   row is spec-legal and every browser just spans to the end. */
@media (max-width:760px){
  .col-calc{display:none}
  table.cat{min-width:0}
  table.cat.pl{min-width:400px}
  table.cat tbody td,table.cat thead th{padding-left:12px;padding-right:12px}
  table.cat td.nm .detail{font-size:.78em}
}

/* 7 · Long value strings in the calculator output panel wrap rather than
   squeezing the label. No collisions were measured, but "3.8 months of it"
   against "Months of that to cover the tier price" is tight enough at 320 to
   deserve the room. */
@media (max-width:420px){
  .result{gap:10px}
  .result .k{font-size:.9rem}
  .result .v{font-size:1rem}
  .result.big .v{font-size:1.7rem}
}

/* 8 · SAY THAT THE TABLE SCROLLS. Even with two columns dropped, the domestic
   sheet is 493px wide on a 390px phone, so the last quantity break sits just
   off the right edge. Nothing on screen admits that, and a price list whose
   prices are hidden behind an unsignposted swipe is a price list nobody reads.

   This is the background-attachment:local shadow, and it is worth the four
   lines: the two `local` layers scroll with the content and cover the two
   `scroll` shadows when you reach an end, so the hint appears only on the side
   that has more to show. Pure CSS, no scroll listener, no layout shift. */
.table-wrap,.compare-wrap{
  background:
    linear-gradient(to right,#fff 32%,rgba(255,255,255,0)) left center,
    linear-gradient(to left,#fff 32%,rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,rgba(11,15,14,.13),transparent) left center,
    radial-gradient(farthest-side at 100% 50%,rgba(11,15,14,.13),transparent) right center;
  background-color:#fff;
  background-repeat:no-repeat;
  background-size:36px 100%,36px 100%,15px 100%,15px 100%;
  background-attachment:local,local,scroll,scroll;
}