/* ============================================================
   VUSO LABS — Design System · "Deep Lab"
   vusolabs.com · static · no build step

   The site is the instrument. Calibrated dark surfaces, hairline
   rules, tabular data, and the product lit like a specimen under
   controlled light. Restraint over glow: nothing decorative earns
   its place unless it clarifies the product or the data.

   Two surface families:
     · INK   — everything. Panels, cards, chrome, legal pages.
     · PAPER — documents only (the certificate of analysis). A COA
               is a printed record, so it is rendered as one.

   Sections:
     00 Fonts            01 Tokens             02 Reset & base
     03 Typography       04 Layout shells      05 Buttons
     06 Panels & chips   07 Nav                08 Mobile drawer
     09 Cart drawer      10 Rules & tick marks 11 Readouts (signature)
     12 Hero             13 Trust marquee      14 Specimen cards
     15 Pillars          16 COA (paper)        17 Process ladder
     18 Categories       19 Plate band         20 Resources
     21 Email signup     22 Footer             23 Forms & tables
     24 Reveal engine    25 Responsive         26 Retired decoration
     27 Reduced motion
   ============================================================ */


/* ---------- 00 · FONTS (self-hosted) ----------
   Inter and Sora, SIL Open Font License 1.1, files and licences in
   assets/fonts/. font-display:swap keeps text readable during the swap;
   unicode-range means the latin-ext files are only fetched by pages that
   actually use those glyphs. Neither subset contains U+2265 (>=) — do not
   reintroduce that character.                                            */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/inter-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("assets/fonts/inter-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/sora-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/sora-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Sora"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/sora-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Sora"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/sora-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("assets/fonts/sora-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("assets/fonts/sora-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/sora-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/sora-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Sora"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("assets/fonts/sora-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Sora"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("assets/fonts/sora-latin-ext-800-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* ============================================================
   01 · TOKENS
   Every value in the system lives here. Components reference
   tokens; they do not invent colours, sizes, or durations.
   Contrast figures are measured against --s-base unless noted
   and are verified by _tools/contrast.py.
   ============================================================ */
:root {
  /* — INK SURFACES (the whole site) — */
  --s-void:   #000000;   /* deepest well, behind everything      */
  --s-base:   #05070A;   /* page background                      */
  --s-raised: #0B0F15;   /* cards, panels                        */
  --s-high:   #131920;   /* hover / elevated                     */
  --s-inset:  #020305;   /* inputs, wells, specimen plate floor  */

  /* — PAPER SURFACES (certificates and printed records only) — */
  --p-base:   #F3F7FA;
  --p-raised: #FFFFFF;
  --p-ink:    #0A1622;   /* 16.1:1 on --p-base */
  --p-mid:    #46596B;   /*  7.3:1 on --p-base */
  --p-line:   rgba(10, 30, 50, .14);

  /* — HAIRLINES — */
  --line-1: rgba(160, 200, 235, .08);   /* decorative separation */
  --line-2: rgba(160, 200, 235, .15);   /* default border        */
  --line-3: rgba(160, 200, 235, .27);   /* emphasis / hover      */

  /* — TEXT ON INK — measured on --s-base by _tools/contrast.py — */
  --t-1: #EAF3FB;   /* 17.1:1 — headings, primary        */
  --t-2: #B4C9DA;   /* 11.2:1 — body                     */
  --t-3: #91AABF;   /*  7.9:1 — secondary                */
  --t-4: #7690A5;   /*  5.6:1 — labels, meta (text floor;
                              4.8:1 on --s-high, still AA) */

  /* — ACCENT — */
  --a-1: #5CB8F7;   /*  8.8:1 — primary accent (light blue) */
  --a-2: #93D2FF;   /* 12.0:1 — hover, links, focus ring */
  --a-3: #2E86C7;   /* pressed fills only — never text on ink */
  --a-ink: #02090F; /*  8.6:1 on an --a-1 fill           */
  --a-glow: rgba(92, 184, 247, .26);

  /* — STATUS — measured on --s-raised — */
  --ok:   #45CE8C;  /*  9.1:1 */
  --warn: #F2B85C;  /* 10.2:1 */
  --stop: #F58A72;  /*  7.6:1 */

  /* — TYPE — */
  --font-display: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;

  --fs-display: clamp(2.5rem, 5.6vw, 4.4rem);
  --fs-h1:      clamp(2.05rem, 4.2vw, 3.2rem);
  --fs-h2:      clamp(1.7rem, 3.1vw, 2.45rem);
  --fs-h3:      clamp(1.12rem, 1.5vw, 1.3rem);
  --fs-lede:    clamp(1.02rem, 1.3vw, 1.16rem);
  --fs-body:    1rem;
  --fs-sm:      .875rem;
  --fs-xs:      .8rem;
  --fs-micro:   .74rem;
  --fs-label:   .68rem;   /* letterspaced caps */

  --lh-tight: 1.1;
  --lh-snug:  1.35;
  --lh-body:  1.65;
  --ls-label: .18em;
  --ls-tight: -.02em;

  /* — SPACING — */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 40px;  --sp-8: 56px;
  --sp-9: 72px;  --sp-10: 96px;
  --sp-section:    clamp(72px, 9vw, 118px);
  --sp-section-sm: clamp(48px, 6vw, 80px);
  --sp-head:       clamp(32px, 4.4vw, 56px);

  /* — RADIUS —
     Deliberately tighter than the previous system. An instrument panel
     has small consistent radii; large pills read as a consumer app. */
  --r-1: 5px;
  --r-2: 9px;
  --r-3: 13px;
  --r-4: 18px;
  --r-pill: 999px;

  /* — ELEVATION —
     Drop shadows barely register on ink, so depth is carried by a top
     inner highlight plus a border. The cast shadow only separates a
     layer from the one directly behind it. */
  --e-1: inset 0 1px 0 rgba(255,255,255,.035), 0 1px 2px rgba(0,0,0,.4);
  --e-2: inset 0 1px 0 rgba(255,255,255,.05),  0 14px 30px -14px rgba(0,0,0,.7);
  --e-3: inset 0 1px 0 rgba(255,255,255,.07),  0 30px 62px -26px rgba(0,0,0,.85);

  /* — MOTION — */
  --dur-1: .16s;  /* micro state change */
  --dur-2: .28s;  /* standard          */
  --dur-3: .5s;   /* entrance          */
  --dur-4: .8s;   /* scroll reveal     */
  --ease-out:    cubic-bezier(.22, .8, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);

  /* — LAYOUT — */
  --container: 1180px;
  --measure: 62ch;
  --nav-h: 68px;
  --gutter: var(--sp-5);

  /* — FOCUS —
     One token per surface family. Every control on an ink surface uses
     --focus-ink; controls on a paper surface use --focus-paper. Both are
     3px and both clear 3:1 against their own background. */
  --focus-ink:   3px solid #93D2FF;
  --focus-paper: 3px solid #0F6FB8;
  --focus-offset: 3px;

  /* — PRODUCT IMAGERY — one sizing contract for every product visual — */
  --product-ratio: 4 / 5;
  --plate-h: 348px;
  --plate-h-sm: 300px;
  --product-thumb: 58px;

  /* — TARGETS (WCAG 2.2 AA, SC 2.5.8) — */
  --touch-min: 44px;
}


/* ---------- 02 · RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  background: var(--s-base);
  color-scheme: dark;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--t-2);
  background: var(--s-base);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--t-1);
  margin: 0 0 .5em;
  text-wrap: balance;
}
p { margin: 0 0 1em; }
strong, b { color: var(--t-1); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line-2); margin: var(--sp-6) 0; }
:focus-visible { outline: var(--focus-ink); outline-offset: var(--focus-offset); border-radius: var(--r-1); }
::selection { background: var(--a-1); color: var(--a-ink); }

/* Skip link — first tab stop on every page.
   inline-flex + min-height so it clears the 44px minimum; em padding alone
   left it at 43px. */
.skip-link {
  position: fixed; top: var(--sp-3); left: var(--sp-3); z-index: 4100;
  display: inline-flex; align-items: center; min-height: var(--touch-min);
  padding: 0 var(--sp-5); border-radius: var(--r-2);
  background: var(--a-1); color: var(--a-ink);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: .04em;
  box-shadow: var(--e-3);
  transform: translateY(calc(-100% - var(--sp-5)));
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* screen-reader-only utility */
.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;
}


/* ---------- 03 · TYPOGRAPHY ---------- */
/* The eyebrow is the system's smallest unit of hierarchy: a letterspaced
   cap label preceded by a short accent tick. It replaces the old gradient
   bar and reads as an instrument legend. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--font-display);
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--a-2);
  margin: 0 0 var(--sp-4);
}
.eyebrow::before {
  content: ""; width: 18px; height: 1px; flex: none;
  background: var(--a-1);
}
.h-display { font-size: var(--fs-display); font-weight: 700; }
.h-section { font-size: var(--fs-h2); font-weight: 700; }
/* Accent emphasis inside a heading. A flat accent colour, not a gradient —
   gradient text clipped to a transparent fill is unreadable to some
   contrast-adjusting user agents and fails to inherit forced colours. */
.text-accent { color: var(--a-2); }
.lede {
  font-size: var(--fs-lede); line-height: var(--lh-snug);
  color: var(--t-3); max-width: var(--measure);
}
.microcopy { font-size: var(--fs-micro); color: var(--t-4); letter-spacing: .02em; }
.legal-note {
  font-size: var(--fs-micro); color: var(--t-3); letter-spacing: .01em;
  display: inline-flex; gap: .5em; align-items: flex-start; line-height: 1.5;
}
.legal-note svg { flex: none; margin-top: .2em; color: var(--t-4); }
.prose { max-width: var(--measure); }
.prose a { color: var(--a-2); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--t-1); }


/* ---------- 04 · LAYOUT SHELLS ---------- */
.container { width: min(var(--container), calc(100% - var(--sp-6))); margin-inline: auto; }
.container--wide { width: min(1320px, calc(100% - var(--sp-6))); margin-inline: auto; }
.section { position: relative; padding: var(--sp-section) 0; }
.section--sm { padding: var(--sp-section-sm) 0; }
/* A slightly lifted surface, used to separate one band from the next
   without leaving the ink family. */
.section--raise { background: var(--s-raised); }
.section--well  { background: var(--s-void); }
.section-head { max-width: 660px; margin-bottom: var(--sp-head); }
.section-head .lede { margin-top: var(--sp-3); }

/* Fine measurement grid. Replaces the old light dot lattice — same idea,
   but ruled rather than dotted, so it reads as graph paper under the
   content instead of decoration on top of it. */
.grid-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line-1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-1) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, transparent 80%);
}


/* ---------- 05 · BUTTONS ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .5em; padding: 0 var(--sp-6);
  min-height: var(--touch-min);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: .01em; white-space: nowrap;
  border-radius: var(--r-2);
  transition: background var(--dur-2) ease, color var(--dur-2) ease,
              border-color var(--dur-2) ease, box-shadow var(--dur-2) ease,
              transform var(--dur-2) var(--ease-spring);
  /* Magnetic offset (JS writes --mag-x/--mag-y) and hover lift (CSS owns
     --lift) compose in one transform so neither clobbers the other. */
  transform: translate(var(--mag-x, 0px), calc(var(--mag-y, 0px) + var(--lift, 0px)));
}
.btn-primary {
  color: var(--a-ink);
  background: var(--a-1);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 26px -12px var(--a-glow);
}
.btn-primary:hover { background: var(--a-2); --lift: -1px; box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 16px 34px -14px var(--a-glow); }
.btn-primary:active { background: var(--a-3); color: #fff; --lift: 0px; }
.btn-ghost {
  color: var(--t-1);
  background: transparent;
  border: 1px solid var(--line-3);
}
.btn-ghost:hover { background: var(--s-high); border-color: var(--a-1); color: var(--t-1); --lift: -1px; }
.btn-quiet { color: var(--t-3); padding-inline: var(--sp-4); }
.btn-quiet:hover { color: var(--t-1); background: var(--s-high); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; --mag-x: 0px; --mag-y: 0px; --lift: 0px; box-shadow: none;
}
.btn-sm { min-height: var(--touch-min); padding-inline: var(--sp-4); font-size: var(--fs-xs); }
.btn-block { width: 100%; }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--touch-min); height: var(--touch-min); flex: none;
  border-radius: var(--r-2);
  color: var(--t-3); background: transparent; border: 1px solid var(--line-2);
  transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.btn-icon:hover { background: var(--s-high); color: var(--t-1); border-color: var(--line-3); }


/* ---------- 06 · PANELS & CHIPS ---------- */
.panel {
  background: var(--s-raised);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  box-shadow: var(--e-1);
}
.panel--flush { border-radius: 0; border-inline: 0; }
.panel--pad { padding: clamp(var(--sp-5), 3vw, var(--sp-7)); }
.panel--inset { background: var(--s-inset); box-shadow: none; }

.chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .34em .8em; border-radius: var(--r-1);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .02em;
  color: var(--t-3); background: rgba(150, 190, 225, .07);
  border: 1px solid var(--line-2);
  white-space: nowrap;
}
.chip--accent { color: var(--a-2); background: rgba(92,184,247,.1); border-color: rgba(92,184,247,.28); }
.chip--ok     { color: var(--ok);   background: rgba(69,206,140,.1);  border-color: rgba(69,206,140,.28); }
.chip--warn   { color: var(--warn); background: rgba(242,184,92,.1);  border-color: rgba(242,184,92,.3); }
.chip--pending { color: var(--t-4); background: transparent; border-style: dashed; }

/* Availability must never be signalled by colour alone (SC 1.4.1): every
   dot is paired with its text label in the markup. */
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: none; background: var(--ok); }
.dot--out { background: var(--t-4); }
.dot--warn { background: var(--warn); }


/* ---------- 07 · NAV ---------- */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  height: var(--nav-h); display: flex; align-items: center;
  background: rgba(5, 7, 10, .74);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-2) ease, border-color var(--dur-2) ease;
}
.site-nav.scrolled { background: rgba(3, 5, 7, .94); border-bottom-color: var(--line-2); }
.nav-inner { display: flex; align-items: center; gap: var(--sp-5); width: min(1320px, calc(100% - var(--sp-6))); margin-inline: auto; }

/* Brand lockup: chrome V chevron + stacked wordmark.
   min-height rather than padding — the lockup is optically centred in the
   bar and padding would move it. 44px is the target minimum. */
.brand { display: inline-flex; align-items: center; min-height: var(--touch-min); gap: 10px; color: var(--t-1); }
.brand-chevron { flex: none; }
.brand-stack { display: flex; flex-direction: column; justify-content: center; line-height: 1; min-width: 0; }
.brand-word {
  font-family: var(--font-display); font-weight: 800; font-size: 1.24rem;
  letter-spacing: .05em; transform: scaleX(1.06); transform-origin: left center;
  color: currentColor; white-space: nowrap;
}
.brand-sub {
  font-family: var(--font-display); font-weight: 600; font-size: .48rem;
  letter-spacing: .38em; color: var(--t-4); margin-top: 4px; white-space: nowrap;
}
.nav-links { display: flex; align-items: center; gap: 2px; margin-inline: auto; list-style: none; padding: 0; }
.nav-links a {
  /* inline-flex + min-height: em padding on a .875rem face only produced a
     40px-tall target. */
  display: inline-flex; align-items: center; min-height: var(--touch-min);
  padding: 0 var(--sp-3); border-radius: var(--r-1);
  font-size: var(--fs-sm); font-weight: 500; color: var(--t-3);
  transition: color var(--dur-1) ease, background var(--dur-1) ease;
}
.nav-links a:hover { color: var(--t-1); background: var(--s-high); }
.nav-links a[aria-current="page"] { color: var(--t-1); }
/* Current page marked with a rule as well as colour, so the state is not
   colour-dependent. */
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 12px;
  height: 1.5px; background: var(--a-1); border-radius: 2px;
}
.nav-links li { position: relative; display: flex; }
.nav-actions { display: flex; align-items: center; gap: var(--sp-1); }
.nav-icon-btn {
  position: relative;
  width: var(--touch-min); height: var(--touch-min); border-radius: var(--r-1);
  display: grid; place-items: center; color: var(--t-3);
  transition: background var(--dur-1) ease, color var(--dur-1) ease;
}
.nav-icon-btn:hover { background: var(--s-high); color: var(--t-1); }
.cart-count {
  position: absolute; top: 4px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--a-1); color: var(--a-ink);
  font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center;
  font-variant-numeric: tabular-nums;
  transform: scale(0); transition: transform var(--dur-2) var(--ease-spring);
}
.cart-count.has-items { transform: scale(1); }
.nav-cta { margin-left: var(--sp-2); padding-inline: var(--sp-5); font-size: var(--fs-xs); }
.nav-burger {
  display: none; width: var(--touch-min); height: var(--touch-min);
  border-radius: var(--r-1); place-items: center; color: var(--t-2);
}
.nav-burger:hover { background: var(--s-high); color: var(--t-1); }


/* ---------- 08 · MOBILE DRAWER ---------- */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 950; display: flex; justify-content: flex-end;
  pointer-events: none; visibility: hidden; transition: visibility 0s var(--dur-3);
}
.mobile-drawer.open { pointer-events: auto; visibility: visible; transition: none; }
.drawer-scrim {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--dur-3) ease;
}
.mobile-drawer.open .drawer-scrim { opacity: 1; }
.mobile-panel {
  position: relative; width: min(360px, 92%); height: 100%;
  background: var(--s-raised);
  border-left: 1px solid var(--line-2);
  padding: var(--sp-5) var(--sp-5) var(--sp-7); overflow-y: auto;
  transform: translateX(103%); transition: transform var(--dur-3) var(--ease-out);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.mobile-drawer.open .mobile-panel { transform: translateX(0); }
.mobile-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.mobile-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.mobile-links a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding: 0 var(--sp-1);
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  color: var(--t-1); border-bottom: 1px solid var(--line-1);
}
.mobile-links a:hover { color: var(--a-2); }
.mobile-links a svg { color: var(--t-4); }
.mobile-drawer-cta { margin-top: var(--sp-5); width: 100%; }
.mobile-drawer .legal-note { margin-top: auto; padding-top: var(--sp-5); }


/* ---------- 09 · CART DRAWER ---------- */
.cart-drawer { position: fixed; inset: 0; z-index: 960; display: flex; justify-content: flex-end; pointer-events: none; visibility: hidden; transition: visibility 0s var(--dur-3); }
.cart-drawer.open { pointer-events: auto; visibility: visible; transition: none; }
.cart-panel {
  position: relative; width: min(420px, 94%); height: 100%;
  background: var(--s-raised); border-left: 1px solid var(--line-2);
  display: flex; flex-direction: column;
  transform: translateX(103%); transition: transform var(--dur-3) var(--ease-out);
}
.cart-drawer.open .cart-panel { transform: translateX(0); }
.cart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5); border-bottom: 1px solid var(--line-2); }
.cart-head h2, .cart-head h3 { margin: 0; font-size: 1.05rem; }
.cart-items { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.cart-empty { text-align: center; color: var(--t-3); padding: var(--sp-9) var(--sp-3); }
.cart-empty svg { margin: 0 auto var(--sp-4); color: var(--t-4); }
.cart-item {
  display: grid; grid-template-columns: var(--product-thumb) 1fr auto; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3); border-radius: var(--r-2);
  background: var(--s-base); border: 1px solid var(--line-1);
}
.cart-thumb {
  width: var(--product-thumb); height: 66px; border-radius: var(--r-1);
  position: relative; overflow: hidden;
  background:
    radial-gradient(80% 55% at 50% 92%, var(--a-glow), transparent 72%),
    var(--s-inset);
  border: 1px solid var(--line-1);
  display: grid; place-items: end center;
}
.cart-item-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--t-1); }
.cart-item-meta { font-size: var(--fs-micro); color: var(--t-4); font-variant-numeric: tabular-nums; }
.cart-item-price { font-weight: 600; font-size: var(--fs-xs); color: var(--t-2); font-variant-numeric: tabular-nums; }
.cart-qty { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-2); }
.cart-qty button {
  width: 30px; height: 30px; border-radius: var(--r-1); display: grid; place-items: center;
  background: var(--s-high); color: var(--t-2); font-weight: 600; line-height: 1;
  border: 1px solid var(--line-2);
  transition: background var(--dur-1) ease, color var(--dur-1) ease;
}
.cart-qty button:hover { background: var(--a-1); color: var(--a-ink); border-color: var(--a-1); }
.cart-qty span { min-width: 20px; text-align: center; font-weight: 600; font-size: var(--fs-xs); color: var(--t-1); font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { /* 44px targets on touch devices */
  .cart-qty button { width: var(--touch-min); height: var(--touch-min); }
}
.cart-remove {
  display: inline-flex; align-items: center; min-height: 32px;
  font-size: var(--fs-micro); color: var(--t-4); text-decoration: underline;
  text-underline-offset: 2px; margin-top: var(--sp-1);
}
.cart-remove:hover { color: var(--stop); }
.cart-foot { padding: var(--sp-5); border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: var(--sp-3); background: var(--s-inset); }
.cart-total-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-display); font-weight: 600; color: var(--t-1); }
.cart-ack { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-xs); color: var(--t-3); cursor: pointer; line-height: 1.5; }
.cart-ack input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--a-1); flex: none; }
.cart-foot .microcopy { text-align: center; }


/* ---------- 10 · RULES & TICK MARKS ----------
   The system's structural motif, replacing the previous curved SVG
   dividers. A hairline with calibration ticks: a section boundary that
   looks like a measurement scale rather than a decorative swoosh. It is
   pure CSS, so it costs nothing and inherits the accent. */
.rule { height: 1px; background: var(--line-2); border: 0; margin: 0; }
.tick-rule {
  position: relative; height: 9px; margin: 0;
  border: 0; border-top: 1px solid var(--line-2);
  background-image: linear-gradient(to right, var(--line-2) 1px, transparent 1px);
  background-size: 24px 5px; background-repeat: repeat-x; background-position: 0 0;
}
/* Longer tick every 5th step — the same trick a printed scale uses. */
.tick-rule::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 9px;
  background-image: linear-gradient(to right, var(--line-3) 1px, transparent 1px);
  background-size: 120px 9px; background-repeat: repeat-x;
}
.section-index {
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); color: var(--t-4);
  font-variant-numeric: tabular-nums;
}


/* ---------- 11 · READOUTS (signature component) ----------
   Every piece of data on this site is presented the same way: a
   letterspaced cap label on the left, a tabular-figure value on the
   right, separated by a hairline. Consistent, scannable, and it makes
   a placeholder value visually identical to a real one — which is the
   point, because it must stay obvious which is which in words. */
.readouts { display: flex; flex-direction: column; margin: 0; }
.readout {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-1);
  font-size: var(--fs-sm);
}
.readout:last-child { border-bottom: 0; }
.readout dt, .readout .r-label {
  margin: 0; flex: none;
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--t-4);
}
.readout dd, .readout .r-value {
  margin: 0; text-align: right; color: var(--t-1); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.readout .r-value--muted { color: var(--t-3); font-weight: 400; }
/* A value the business has not verified yet. Dashed underline plus the word
   "pending"/"placeholder" in the text — never styling alone. */
.r-pending { color: var(--t-4); border-bottom: 1px dashed var(--line-3); }


/* ---------- 12 · HERO ---------- */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + var(--sp-9)) 0 var(--sp-9);
  overflow: clip;
  background: var(--s-base);
}
/* The hero photograph is bled to the right edge of its own band and faded
   into the page on the left, so the headline always sits on flat ink and no
   text is ever placed over the product.

   It is a real <img> in a <picture>, never a CSS background: it must carry
   alt text and must still be on screen with JavaScript disabled. One
   art-directed <picture> serves both layouts — a 16:9 landscape crop above
   1080px and a 4:5 portrait crop below it — so exactly one file is fetched.  */
.hero-media {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip;
}
.hero-media img,
.hero-media .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 50%;
}
/* The motion layer starts fully transparent and is only faded in once the
   script has confirmed it can actually play. If it never loads, never
   decodes, or autoplay is refused, this stays at 0 and the still below it is
   simply the hero — no gap, no poster flash, no layout change. */
.hero-media .hero-video { opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.hero-media .hero-video.ready { opacity: 1; }
/* The scrim is opaque behind the headline column and then clears completely,
   so the product is seen at full contrast rather than through a veil. The
   copy column ends around 50% of the viewport, so the fall-off starts there. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--s-base) 0%, var(--s-base) 32%, rgba(5,7,10,.82) 46%, rgba(5,7,10,.22) 60%, transparent 72%),
    linear-gradient(0deg, var(--s-base) 1%, transparent 24%);
}
.hero-inner { position: relative; z-index: 2; }
.hero-copy { max-width: 660px; }
.hero-copy h1 { margin-bottom: var(--sp-5); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-6); }
/* Current-status readout. The site is pre-launch: certificates are pending
   and pricing is unpublished. Stating that in the hero, in the same
   instrument-panel language as everything else, is more honest than
   burying it — and more useful to a buyer than a trust badge. */
.hero-status {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4); max-width: 600px;
  padding-top: var(--sp-5); border-top: 1px solid var(--line-2);
}
.hero-status div { min-width: 0; }
.hero-status dt {
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--t-4);
  margin: 0 0 var(--sp-1);
}
.hero-status dd { margin: 0; font-size: var(--fs-xs); color: var(--t-2); line-height: 1.4; }


/* ---------- 13 · TRUST MARQUEE ---------- */
.trust-strip {
  position: relative; padding: var(--sp-4) 0;
  background: var(--s-raised);
  border-block: 1px solid var(--line-2);
  overflow: hidden;
}
.marquee { display: flex; width: max-content; animation: marqueeMove 44s linear infinite; }
.trust-strip:hover .marquee, .trust-strip:focus-within .marquee { animation-play-state: paused; }
.marquee-track { display: flex; align-items: center; gap: var(--sp-8); padding-right: var(--sp-8); }
.marquee-item {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--t-3); white-space: nowrap;
}
.marquee-item svg { color: var(--a-1); flex: none; }
@keyframes marqueeMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }


/* ---------- 14 · SPECIMEN CARDS ----------
   The product presentation is the whole point. Each card is a specimen
   plate: an inset well, a per-compound accent rising from the floor, and
   the real vial cutout seated on the base. Accent custom properties are
   injected per product from data.js (--v-accent / --v-accent-glow) so the
   six compounds are distinguishable without inventing per-product labels.  */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }

.product-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--s-raised);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  box-shadow: var(--e-1);
  transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
  overflow: clip;
}
.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-3);
  box-shadow: var(--e-2);
}
.product-card:focus-within { border-color: var(--a-1); }

/* the plate */
.card-plate {
  position: relative; height: var(--plate-h); flex: none;
  background:
    radial-gradient(72% 52% at 50% 88%, var(--v-accent-glow, var(--a-glow)), transparent 70%),
    var(--s-inset);
  border-bottom: 1px solid var(--line-2);
  overflow: clip;
}
/* fine graph ruling on the plate floor, so an empty plate still reads as
   designed space rather than a hole */
.card-plate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line-1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-1) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 72%);
          mask-image: linear-gradient(0deg, #000 0%, transparent 72%);
}
/* contact shadow where the vial meets the plate floor */
.card-plate::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: -14px; height: 34px;
  pointer-events: none; border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 0%, var(--v-accent-glow, var(--a-glow)), transparent 72%);
  filter: blur(8px); opacity: .8;
}
/* — official product imagery —
   The cutout is the real VUSO vial isolated from assets/renders/render-hero.jpg
   (background removed; nothing redrawn). It is seated on the plate floor so its
   cropped base edge coincides with the plate edge. */
/* The base is an ordinary flow element. Absolute positioning is scoped to the
   plate, because `position:absolute; inset:0` on the base made the empty-cart
   tile escape its container and render over the site header — it had no
   positioned ancestor to attach to. */
.vial-shot { display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.card-plate .vial-shot { position: absolute; inset: 0; }
/* The whole vial, always. Sized so the cap clears the plate tag and the base
   sits just above the plate floor, leaving room for the contact shadow.
   No mask and no crop: the fill-weight rule is satisfied by each amount
   having its own correctly-labelled artwork (see VIAL_ART in shared.js), not
   by hiding part of the product. */
.vial-shot img {
  height: 86%; width: auto; display: block;
  margin-bottom: 4%;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .75));
  transition: transform var(--dur-3) var(--ease-out);
  transform-origin: 50% 100%;
}
.product-card:hover .vial-shot img { transform: scale(1.035); }

/* plate tag — documentation status, pinned in the plate */
.plate-tag {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2;
  padding: .3em .7em; border-radius: var(--r-1);
  font-family: var(--font-display);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t-3); background: rgba(0, 0, 0, .8);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
}
/* compound index, top-right of the plate — instrument-panel detail */
.plate-index {
  position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2;
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .1em; color: var(--t-4); font-variant-numeric: tabular-nums;
}

/* card body */
.card-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.card-cat {
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--v-accent, var(--a-2));
  margin-bottom: var(--sp-2);
}
.product-card h3 { font-size: var(--fs-h3); margin: 0 0 var(--sp-1); color: var(--t-1); }
.card-amount { font-size: var(--fs-xs); color: var(--t-3); font-variant-numeric: tabular-nums; }
.card-blurb { font-size: var(--fs-xs); line-height: 1.6; color: var(--t-3); margin: var(--sp-3) 0 var(--sp-4); flex: 1; }
.card-meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0; margin-bottom: var(--sp-4);
  border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1);
}
/* Pricing is deliberately unpublished until verified figures exist. It is
   styled as a statement, not as a broken "$—". */
.card-price {
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--t-3);
}
.card-stock { display: inline-flex; align-items: center; gap: .45em; font-size: var(--fs-micro); color: var(--t-3); }
.card-actions { display: flex; gap: var(--sp-2); align-items: center; }
.card-actions .btn { flex: 1; }


/* ---------- 15 · PILLARS ---------- */
.pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.pillar {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-5);
  background: var(--s-raised); border: 1px solid var(--line-2); border-radius: var(--r-3);
  transition: border-color var(--dur-2) ease, background var(--dur-2) ease;
}
.pillar:hover { border-color: var(--line-3); background: var(--s-high); }
.pillar-icon {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-2);
  display: grid; place-items: center; color: var(--a-2);
  background: rgba(92,184,247,.1); border: 1px solid rgba(92,184,247,.24);
}
.pillar h3 { font-size: var(--fs-h3); margin: 0 0 var(--sp-1); }
.pillar p { font-size: var(--fs-xs); color: var(--t-3); margin: 0; line-height: 1.6; }
.pillar-step {
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); color: var(--t-4); font-variant-numeric: tabular-nums;
}


/* ---------- 16 · COA — PAPER SURFACE ----------
   A certificate of analysis is a printed record, so it is rendered as one:
   the single paper-family surface on the site. That contrast is the point —
   the document reads as a document. Focus rings inside it switch to
   --focus-paper so they stay visible on white.                            */
.paper {
  background: var(--p-raised); color: var(--p-ink);
  border: 1px solid var(--p-line); border-radius: var(--r-3);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
}
.paper h1, .paper h2, .paper h3, .paper h4, .paper strong { color: var(--p-ink); }
.paper p, .paper li { color: var(--p-mid); }
.paper :focus-visible { outline: var(--focus-paper); }
.paper .readout { border-bottom-color: var(--p-line); }
.paper .readout dt, .paper .readout .r-label { color: var(--p-mid); }
.paper .readout dd, .paper .readout .r-value { color: var(--p-ink); }
.paper .microcopy { color: var(--p-mid); }

.coa-wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(var(--sp-6), 5vw, var(--sp-10)); align-items: center; }
.coa-doc { padding: clamp(var(--sp-5), 3vw, var(--sp-7)); position: relative; }
.coa-doc-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4);
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-4);
  border-bottom: 2px solid var(--p-ink);
}
.coa-doc-head h3 { margin: 0 0 2px; font-size: 1.15rem; }
.coa-doc-head .microcopy { letter-spacing: .1em; text-transform: uppercase; font-size: var(--fs-label); }
/* Demonstration-data badge. This label is load-bearing: the figures below
   it are not real lab results and must never be presentable as such. */
.badge-demo {
  display: inline-flex; align-items: center; gap: .4em; flex: none;
  padding: .35em .7em; border-radius: var(--r-1);
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #7A5406; background: #FFF1D6; border: 1px solid #D9A32B;
}
.coa-note {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-2);
  background: #FFF8EA; border: 1px solid #E6C98A;
  font-size: var(--fs-xs); color: #6B4A05; line-height: 1.55;
}
.coa-note svg { flex: none; margin-top: 2px; }
/* purity scale on paper */
.gauge { margin: var(--sp-5) 0 0; }
.gauge-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-2); }
.gauge-label { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--p-mid); }
.gauge-value { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--p-ink); font-variant-numeric: tabular-nums; }
.gauge-track { position: relative; height: 8px; border-radius: 2px; background: rgba(10,30,50,.1); overflow: hidden; }
.gauge-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: #1478B8; border-radius: 2px; }
.gauge-scale { display: flex; justify-content: space-between; margin-top: var(--sp-1); font-size: .62rem; font-variant-numeric: tabular-nums; color: var(--p-mid); letter-spacing: .04em; }
/* Standalone link in a definition list is navigation, not running prose, so
   it carries a real target box. */
.coa-link { display: inline-flex; align-items: center; min-height: var(--touch-min); color: #0F6FB8; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.coa-link:hover { color: var(--p-ink); }


/* ---------- 17 · PROCESS LADDER ----------
   Replaces the old vertical timeline of near-identical cards. Steps are a
   numbered horizontal ladder on wide screens and a compact numbered list on
   narrow ones — same information, a fraction of the scroll. */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line-2); border-radius: var(--r-3); overflow: clip; }
.ladder li { padding: var(--sp-5); border-right: 1px solid var(--line-2); background: var(--s-raised); }
.ladder li:last-child { border-right: 0; }
.ladder-n {
  display: block; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); color: var(--a-2); margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.ladder h3 { font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.ladder p { font-size: var(--fs-xs); color: var(--t-3); margin: 0; line-height: 1.6; }


/* ---------- 18 · CATEGORIES ---------- */
.cat-explorer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--sp-5), 4vw, var(--sp-8)); align-items: start; }
.cat-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line-2); border-radius: var(--r-3); overflow: clip; }
.cat-btn {
  display: flex; align-items: center; gap: var(--sp-3); text-align: left; width: 100%;
  min-height: 60px; padding: var(--sp-3) var(--sp-4);
  background: var(--s-raised); border: 0; border-bottom: 1px solid var(--line-1);
  color: var(--t-2);
  transition: background var(--dur-1) ease, color var(--dur-1) ease;
}
.cat-list .cat-btn:last-child { border-bottom: 0; }
.cat-btn:hover { background: var(--s-high); color: var(--t-1); }
/* Selected state carries a left rule plus a text colour change, so it does
   not rely on colour alone. aria-pressed conveys it to assistive tech. */
.cat-btn[aria-pressed="true"] { background: var(--s-high); color: var(--t-1); box-shadow: inset 3px 0 0 var(--a-1); }
.cat-btn b { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; display: block; }
.cat-btn small { font-size: var(--fs-micro); color: var(--t-4); }
.cat-btn .cat-n { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700; color: var(--t-4); flex: none; font-variant-numeric: tabular-nums; }
.cat-detail { position: relative; padding: clamp(var(--sp-5), 3vw, var(--sp-7)); min-height: 300px; display: flex; flex-direction: column; justify-content: center; }
.cat-detail h3 { font-size: var(--fs-h2); }
.cat-detail p { color: var(--t-3); font-size: var(--fs-sm); }
.cat-detail-inner { transition: opacity var(--dur-2) ease; }
.cat-detail-inner.swap { opacity: 0; }


/* ---------- 19 · PLATE BAND ----------
   A full-bleed photographic band used once or twice per page to break the
   rhythm. The image is the macro cap detail, which carries no amount box,
   so the band is safe on every product context including GHK-Cu and CJC. */
.plate-band { position: relative; overflow: clip; background: var(--s-void); }
.plate-band-media { position: absolute; inset: 0; z-index: 0; }
.plate-band-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.plate-band-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--s-void) 6%, rgba(0,0,0,.86) 40%, rgba(4,9,15,.5) 100%);
}
.plate-band .container { position: relative; z-index: 2; }
.plate-band-copy { max-width: 520px; padding: clamp(var(--sp-8), 8vw, var(--sp-10)) 0; }
.plate-band-copy h2 { font-size: var(--fs-h2); }
.plate-band-copy p { color: var(--t-2); }


/* ---------- 20 · RESOURCES ---------- */
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.article-card {
  display: flex; flex-direction: column;
  background: var(--s-raised); border: 1px solid var(--line-2); border-radius: var(--r-3);
  overflow: clip;
  transition: border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
.article-card:hover { transform: translateY(-3px); border-color: var(--line-3); }
.article-card:focus-within { border-color: var(--a-1); }
/* Article thumbnails are abstract analytical figures, not photography —
   there is no editorial imagery in this repo and none may be invented. */
.article-thumb { height: 116px; position: relative; overflow: clip; background: var(--s-inset); border-bottom: 1px solid var(--line-2); }
.article-thumb::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--line-1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-1) 1px, transparent 1px);
  background-size: 20px 20px;
}
.article-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--a-1); }
.article-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.article-meta { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-3); }
.article-card h3 { font-size: var(--fs-h3); margin: 0 0 var(--sp-2); }
.article-card p { font-size: var(--fs-xs); color: var(--t-3); flex: 1; line-height: 1.6; }
.article-link { display: inline-flex; align-items: center; min-height: var(--touch-min); gap: .4em; font-weight: 600; font-size: var(--fs-xs); color: var(--a-2); }
.article-link svg { transition: transform var(--dur-2) var(--ease-spring); }
.article-card:hover .article-link svg { transform: translateX(4px); }


/* ---------- 20b · FULFILMENT JOURNEY ----------
   Lab to doorstep, in four recorded stages. Built from the same tokens as
   everything else: hairline rail, light-blue fill, no illustration style that
   would read as a game or a cartoon.

   The motion is a one-shot reveal, not a loop. It runs when the section
   scrolls into view (JS adds .run) and then holds in its finished state, so
   nothing on the page is perpetually animating. With JavaScript off, or under
   prefers-reduced-motion, the finished state is the DEFAULT and no animation
   is ever scheduled — see the html:not(.js) and reduced-motion rules below. */
.journey { position: relative; }
.journey-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5);
}
.journey-step { position: relative; padding-right: var(--sp-2); }

/* Connector: hairline base with a light-blue fill that draws left to right.
   Anchored to the ICON, not to the step's centre. The icon is a 56px block at
   the start of the step, so measuring from 50% put the rail in the wrong
   place and left a stub hanging off the last step. 68px = icon width plus a
   12px breath; -12px reaches into the 24px grid gap to meet the next icon. */
.journey-connector {
  position: absolute; top: 27px; height: 2px; border-radius: 2px;
  left: 68px; right: -12px;
  background: var(--line-2); overflow: visible;
}
.journey-step:last-child .journey-connector { display: none; }
.journey-connector i {
  position: absolute; inset: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--a-3), var(--a-1));
  transform: scaleX(1); transform-origin: left center;
}
/* the parcel riding the leading edge of the fill */
.journey-connector i::after {
  content: ""; position: absolute; right: -5px; top: -4px;
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--a-2); box-shadow: 0 0 0 3px var(--s-base), 0 0 12px var(--a-glow);
  opacity: 0;
}

.journey-icon {
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: var(--r-3);
  display: grid; place-items: center; margin-bottom: var(--sp-4);
  color: var(--a-1);
  background: var(--s-raised);
  border: 1px solid var(--line-3);
  box-shadow: 0 0 0 6px var(--s-base);
}
.journey-n {
  display: block; font-family: var(--font-display);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--t-4); margin-bottom: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.journey-step h3 { font-size: var(--fs-h3); margin: 0 0 var(--sp-2); }
.journey-step p { font-size: var(--fs-xs); color: var(--t-3); margin: 0; line-height: 1.6; }

/* — animated variant, only ever applied when JS is present — */
.js .journey--anim .journey-icon {
  opacity: .45; border-color: var(--line-2); color: var(--t-4);
  transition: opacity var(--dur-2) ease, color var(--dur-2) ease,
              border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.js .journey--anim .journey-connector i { transform: scaleX(0); }
.js .journey--anim.run .journey-connector i {
  transform: scaleX(1);
  transition: transform .55s var(--ease-in-out);
  transition-delay: calc(var(--i) * .48s + .3s);
}
.js .journey--anim.run .journey-connector i::after {
  animation: journeyParcel .55s var(--ease-in-out) forwards;
  animation-delay: calc(var(--i) * .48s + .3s);
}
@keyframes journeyParcel { 0% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.js .journey--anim.run .journey-icon {
  opacity: 1; color: var(--a-1); border-color: var(--a-1);
  transition-delay: calc(var(--i) * .48s);
}

@media (max-width: 860px) {
  .journey-steps { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-5); }
  /* the rail only reads horizontally, so it is dropped once the grid wraps
     rather than drawing connectors that point at nothing */
  .journey-connector { display: none; }
}
@media (max-width: 520px) {
  .journey-steps { grid-template-columns: 1fr; }
}


/* ---------- 21 · EMAIL SIGNUP ---------- */
.signup { padding: clamp(var(--sp-7), 5vw, var(--sp-9)); text-align: center; }
.signup .lede { margin-inline: auto; }
.signup-form { display: flex; gap: var(--sp-2); max-width: 460px; margin: var(--sp-6) auto var(--sp-3); }
/* Below this width the field and the button fought over one row and the
   input collapsed to ~43px wide — unusable, and under the target minimum. */
@media (max-width: 560px) {
  .signup-form { flex-direction: column; }
}
.signup-success { display: none; align-items: center; justify-content: center; gap: var(--sp-2); margin: var(--sp-6) auto var(--sp-3); font-family: var(--font-display); font-weight: 600; color: var(--ok); }
.signup.sent .signup-form { display: none; }
.signup.sent .signup-success { display: flex; }


/* ---------- 22 · FOOTER ---------- */
.site-footer { background: var(--s-void); border-top: 1px solid var(--line-2); position: relative; }
.footer-inner { padding: var(--sp-9) 0 var(--sp-6); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: var(--sp-7); padding-bottom: var(--sp-7); border-bottom: 1px solid var(--line-2); }
.footer-brand p { font-size: var(--fs-xs); color: var(--t-3); max-width: 32ch; }
.footer-brand .brand { margin-bottom: var(--sp-3); }
.footer-socials { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.footer-socials a {
  /* 44px: icon-only links have no text to widen them, so the box is the
     entire target. */
  width: var(--touch-min); height: var(--touch-min); border-radius: var(--r-2);
  display: grid; place-items: center;
  background: var(--s-raised); color: var(--t-3); border: 1px solid var(--line-2);
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.footer-socials a:hover { color: var(--a-2); border-color: var(--a-1); }
.footer-col h2 {
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--t-4);
  margin-bottom: var(--sp-3);
}
/* Footer navigation, not prose: these are stacked link targets, so the row
   itself carries the hit area. A 10px gap on a 17px line box gave a 27px
   pitch — two adjacent targets close enough to mis-tap on a phone. The gap
   now lives inside the link and each row is 44px. */
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.footer-col a {
  /* min-width too — short labels like "FAQ" were only 28px wide. */
  display: inline-flex; align-items: center; min-height: var(--touch-min); min-width: var(--touch-min);
  font-size: var(--fs-xs); color: var(--t-3);
  transition: color var(--dur-1) ease;
}
.footer-col a:hover { color: var(--t-1); }
.footer-cert { margin-top: var(--sp-4); display: flex; gap: var(--sp-2); }
.footer-legal { padding-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.footer-disclaimers { display: grid; gap: var(--sp-2); }
/* The research-use sentence. It is the one piece of copy on this site that
   never changes, so it gets a permanent, legible, unmissable treatment —
   not a footnote. */
.footer-disclaimer {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-2);
  background: var(--s-raised); border: 1px solid var(--line-2);
  border-left: 3px solid var(--a-1);
  font-size: var(--fs-xs); color: var(--t-2); line-height: 1.55;
}
.footer-disclaimer svg { flex: none; margin-top: 2px; color: var(--a-1); }
.footer-disclaimer strong { color: var(--t-1); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); align-items: center; justify-content: space-between; font-size: var(--fs-micro); color: var(--t-4); }
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); margin: 0; padding: 0; }
/* Same reasoning as .footer-col a — a row of legal links is navigation. */
.footer-bottom ul a { display: inline-flex; align-items: center; min-height: var(--touch-min); }
.footer-bottom a:hover { color: var(--t-1); }


/* ---------- 23 · FORMS, TABLES, TABS, NOTICES ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label, .label {
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--t-4);
}
input[type="text"], input[type="email"], input[type="search"], input[type="number"], select, textarea {
  min-height: var(--touch-min); padding: 0 var(--sp-4);
  border-radius: var(--r-2); border: 1px solid var(--line-2);
  background: var(--s-inset); color: var(--t-1);
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
  width: 100%;
}
textarea { padding: var(--sp-3) var(--sp-4); line-height: 1.6; min-height: 120px; resize: vertical; }
select { appearance: none; padding-right: var(--sp-8); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238FA9BF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-4) center;
}
::placeholder { color: var(--t-4); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: var(--focus-ink); outline-offset: 1px; border-color: var(--a-1);
}
/* Error text is associated with its input via aria-describedby in the
   markup; the icon and wording carry the meaning, not the colour. */
.field-error { display: flex; gap: .4em; align-items: center; font-size: var(--fs-micro); color: var(--stop); }

.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table caption { text-align: left; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--t-4); padding-bottom: var(--sp-3); }
.data-table th, .data-table td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-1); }
.data-table th { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--t-4); }
.data-table td { color: var(--t-2); font-variant-numeric: tabular-nums; }
.data-table tr:last-child td { border-bottom: 0; }
/* Wide tables scroll inside their own container; the page never scrolls
   horizontally. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tablist { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line-2); overflow-x: auto; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }
.tablist [role="tab"] {
  display: inline-flex; align-items: center; min-height: var(--touch-min);
  padding: 0 var(--sp-4); white-space: nowrap;
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
  color: var(--t-4); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.tablist [role="tab"]:hover { color: var(--t-2); }
.tablist [role="tab"][aria-selected="true"] { color: var(--t-1); border-bottom-color: var(--a-1); }

/* Notices. The icon plus the leading word carry the meaning; colour is
   reinforcement only. */
.notice {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); border-radius: var(--r-2);
  background: var(--s-raised); border: 1px solid var(--line-2); border-left: 3px solid var(--t-4);
  font-size: var(--fs-xs); color: var(--t-2); line-height: 1.6;
}
.notice svg { flex: none; margin-top: 2px; color: var(--t-4); }
.notice strong { color: var(--t-1); }
.notice--legal { border-left-color: var(--a-1); }
.notice--legal svg { color: var(--a-1); }
.notice--pending { border-left-color: var(--warn); }
.notice--pending svg { color: var(--warn); }


/* ---------- 24 · REVEAL ENGINE ----------
   Every rule here is scoped to html.js, set by an inline script in <head>.
   Without JavaScript the start state never applies, so all content is
   visible and legible instead of stranded at opacity:0.                */
.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-4) ease, transform var(--dur-4) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal="left"]  { transform: translateX(-22px); }
.js [data-reveal="right"] { transform: translateX(22px); }
.js [data-reveal="scale"] { transform: scale(.97); }
.js [data-reveal].revealed { opacity: 1; transform: none; }


/* ---------- 25 · RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .ladder { grid-template-columns: repeat(2, 1fr); }
  .ladder li:nth-child(2n) { border-right: 0; }
  .ladder li:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); }
  .coa-wrap, .cat-explorer { grid-template-columns: 1fr; }
  /* Hero: a bled background cannot hold a headline on a narrow screen, so the
     same <picture> stops being a background and becomes a plate above the
     copy. The <source media> query swaps to the portrait crop at the same
     breakpoint, so only one file is ever fetched. */
  .hero-media {
    position: relative; inset: auto; margin-bottom: var(--sp-6);
    border: 1px solid var(--line-2); border-radius: var(--r-3);
  }
  .hero-media img { position: static; height: auto; }
  .hero-media::after { content: none; }
  .hero { padding-top: calc(var(--nav-h) + var(--sp-6)); }
  .hero-copy, .hero-status { max-width: none; }
}
@media (max-width: 900px) {
  .nav-links, .nav-cta, .nav-icon-btn--desktop { display: none; }
  .nav-burger { display: grid; }
  .pillars { grid-template-columns: 1fr; }
  .articles-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .container, .container--wide { width: calc(100% - var(--sp-5)); }
  .products-grid { grid-template-columns: 1fr; }
  .ladder { grid-template-columns: 1fr; }
  .ladder li { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .ladder li:last-child { border-bottom: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .hero-ctas .btn { flex: 1 1 auto; }
  .marquee-track { gap: var(--sp-6); padding-right: var(--sp-6); }
  .card-plate { height: var(--plate-h-sm); }
}
@media (max-width: 380px) {
  .footer-grid { grid-template-columns: 1fr; }
  .brand-word { font-size: 1.1rem; }
  .brand-sub { letter-spacing: .3em; }
}
/* 320px — the narrowest width in the audit matrix. Gutters and the stacked
   brand lockup are what break first, so they are handled here. */
@media (max-width: 360px) {
  .container, .container--wide { width: calc(100% - var(--sp-4)); }
  .nav-inner { width: calc(100% - var(--sp-4)); gap: var(--sp-2); }
  .brand-sub { display: none; }
  .brand-word { font-size: 1.02rem; }
  .footer-inner { padding: var(--sp-8) 0 var(--sp-5); }
  .footer-cert { flex-direction: column; }
  .footer-bottom ul { gap: 0 var(--sp-3); }
  .cart-item { grid-template-columns: 46px 1fr; }
  .cart-item > div:last-child { grid-column: 1 / -1; text-align: left !important; }
}

/* ---------- 25b · NO-JAVASCRIPT FALLBACKS ----------
   The mobile drawer, the cart drawer and any demo-only control are JS-built
   or JS-operated. Without JS the burger would be a dead control and the
   primary links unreachable, so the links are shown directly instead. */
html:not(.js) .mobile-drawer,
html:not(.js) .cart-drawer,
html:not(.js) [data-noop] { display: none !important; }
@media (max-width: 900px) {
  html:not(.js) .nav-burger { display: none; }
  html:not(.js) .brand-stack { display: none; }
  html:not(.js) .nav-links {
    display: flex; flex-wrap: nowrap; margin-inline: 0; width: 100%;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  html:not(.js) .nav-links::-webkit-scrollbar { display: none; }
  html:not(.js) .nav-links a { white-space: nowrap; padding: 0 var(--sp-2); font-size: var(--fs-xs); }
}


/* ---------- 26 · RETIRED DECORATION ----------
   The previous system's ornaments — a full-screen brand loader, curved SVG
   section dividers, floating orbs, drifting sparks, a sweeping sheen and a
   custom cursor — are gone. They competed with the product, cost frames, and
   the loader delayed first paint on every visit.

   These rules are a safety net, not styling: if any straggler markup for a
   retired ornament survives in a page, it must not paint a light-blue shape
   over a dark document. Delete this block once the markup is confirmed gone
   from all 17 pages.                                                        */
.loader, .divider, .hero-bg, .orb, .hero-glow, .stage-sheen, .stage-spark,
.cursor-dot, .cursor-ring, .hero-scrollcue { display: none !important; }


/* ---------- 27 · REDUCED MOTION ----------
   Under prefers-reduced-motion the site is still. The harness asserts zero
   running animations and zero non-zero-duration transitions on every page. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}