/* ═══════════════════════════════════════════════════════════════════════
   QUANTUM LEVITATION — prototype stylesheet
   Single source of truth for all 50 prototype pages.

   Brand derivation
     · Geometric sans (Jost) mirrors the logo wordmark
     · Pure monochrome; colour only where it does work
     · Zero border radius — the mark has no curves
     · Monospace on NUMBERS ONLY — the logo contains none
     · Split rule = the mark's central gap = the yttrium layer
     · Periodic vertical rhythm = the stacked perovskite unit cell
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ──────────────────────────────────────────────────────── */
:root{
  --ink:#0A0B0D;      /* 19.7:1 on white */
  --ink-2:#464A52;    /*  8.9:1 — body copy */
  --ink-3:#6B7280;    /*  4.8:1 — passes WCAG AA at any size. Was #8A8F98
                             at 3.25:1, which failed for the 13px card specs
                             and captions it was being used on. */
  --ink-4:#9AA0A9;    /*  2.6:1 — DECORATIVE ONLY. Never for text a reader
                             needs. Currently unused; here so the temptation
                             to reach for a lighter grey is a deliberate act. */
  --paper:#FFFFFF;
  --paper-2:#F4F5F7;
  --paper-3:#EAECEF;
  --rule:#E2E4E8;
  --rule-2:#C6CAD1;

  /* functional only — never decorative */
  --accent:#17497C;
  --accent-lt:#EEF2F7;
  --accent-br:#C9D6E6;
  --sale:#9B4A22;
  --sale-lt:#FBF1EB;
  --sale-br:#E6C8B6;
  --ok:#2A6049;
  --ok-lt:#EDF4F0;
  --ok-br:#B9D3C7;
  --warn:#7C5A18;
  --warn-lt:#FBF5E9;
  --warn-br:#DFCFA9;

  --display:"Jost",-apple-system,"Futura","Avenir Next","Century Gothic",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;

  /* periodic scale, 8px base — the unit cell as vertical rhythm */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px;
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16.5px;line-height:1.64;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
svg{display:block}
h1,h2,h3,h4,h5{margin:0;font-family:var(--display);font-weight:300;line-height:1.12;letter-spacing:-.012em}
h1{font-weight:250}
p{margin:0}
a{color:inherit}
b,strong{font-weight:600}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s4)}
.narrow{max-width:780px;margin:0 auto;padding:0 var(--s4)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

/* numbers get the monospace; nothing else does */
.num,.price,.pr,.spec-table dd,.n-fig{font-variant-numeric:tabular-nums}

/* ── 2. THE SPLIT RULE — the mark's gap, the yttrium layer ─────────── */
.split-rule{height:5px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.split-rule.dark{border-color:var(--ink)}

/* ── 3. TYPOGRAPHIC HELPERS ─────────────────────────────────────────── */
.label{font-family:var(--display);font-weight:400;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;
  gap:var(--s2);margin-bottom:var(--s3)}
.label::after{content:"";flex:1;height:5px;max-width:96px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.label .num,.label .n{color:var(--ink-3);font-family:inherit}
.eyebrow{font-family:var(--display);font-weight:400;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s3)}
.lede{font-size:19px;line-height:1.6;color:var(--ink-2)}
.formula{font-family:var(--display);font-weight:300;letter-spacing:.02em}
.formula sub{font-size:.55em;vertical-align:baseline;position:relative;bottom:-.16em}

/* ── 4. BUTTONS ─────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  min-height:52px;padding:0 28px;font-family:var(--body);font-size:14.5px;font-weight:500;
  letter-spacing:.02em;text-decoration:none;cursor:pointer;
  border:1px solid transparent;border-radius:0;
  transition:background .18s,color .18s,border-color .18s}
.btn-p{background:var(--ink);color:#fff}
.btn-p:hover{background:var(--accent)}
.btn-s{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-s:hover{border-color:var(--ink)}
.btn-sm{min-height:44px;padding:0 18px;font-size:13.5px}
.arrow{display:none}          /* the logo has no ornament; arrows go */

/* ── 5. HEADER ──────────────────────────────────────────────────────── */
.skip{position:absolute;left:-999px;background:var(--ink);color:#fff;padding:14px 22px;z-index:99}
.skip:focus{left:0;top:0}
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;gap:var(--s5);height:76px}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0;color:var(--ink);text-decoration:none;
  min-width:0}
.logo svg{width:26px;height:auto;flex-shrink:0}
.logo-wd{display:flex;flex-direction:column;line-height:1.16;white-space:nowrap}
.logo-wd .l1{font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.01em;color:var(--ink)}
.logo-wd .l2{font-family:var(--display);font-weight:400;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-2)}
.nav ul{flex:1;display:flex;gap:26px;list-style:none;margin:0;padding:0;min-width:0}
.nav ul a{font-family:var(--display);font-weight:400;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-2);padding:6px 0;position:relative;
  white-space:nowrap}
.nav ul a.on{color:var(--ink)}
.nav ul a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--ink);transition:right .24s}
.nav ul a:hover::after,.nav ul a.on::after{right:0}
.nav-r{display:flex;align-items:center;gap:var(--s3);flex-shrink:0}
.navtoggle{display:none;appearance:none;background:none;border:0;width:38px;height:38px;
  align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--ink);
  padding:0;border-radius:0}
.navtoggle svg{width:19px;height:19px}
.navtoggle .x{display:none}
.nav.open .navtoggle .bars{display:none}
.nav.open .navtoggle .x{display:block}
.cart{font-family:var(--display);font-weight:400;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-2);
  display:flex;align-items:center;gap:7px;padding:10px 0}
.cart:hover{color:var(--ink)}
.cart svg{width:15px;height:15px}

.banner{background:var(--ink);color:#fff;padding:11px var(--s4);font-family:var(--display);
  font-weight:400;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;text-align:center}
.banner b{font-weight:500;color:#fff}
.banner a{color:rgba(255,255,255,.72);text-decoration:none}
.banner a:hover{color:#fff}

.crumb{font-family:var(--display);font-weight:400;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);padding:var(--s3) 0 var(--s4)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--accent)}

/* ── 6. SECTIONS & RHYTHM ───────────────────────────────────────────── */
section{padding:var(--s7) 0}
.tone{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.head{max-width:58ch;margin-bottom:var(--s6)}
.head h2{font-size:clamp(1.85rem,3.3vw,2.55rem);margin-bottom:var(--s2)}
.fix{display:inline-block;font-family:var(--display);font-weight:400;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent-br);background:var(--accent-lt);
  padding:5px 10px;margin-bottom:var(--s3)}
.draft{background:var(--warn-lt);border:1px dashed var(--warn-br);padding:14px 18px;
  font-size:13.5px;color:var(--warn);margin:0 0 var(--s3)}

/* ── 7. HOME: hero ─────────────────────────────────────────────────── */
.hero{border-bottom:1px solid var(--rule);position:relative;overflow:hidden;padding:0}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch;min-height:620px}
.hero-txt{padding:var(--s7) var(--s6) var(--s7) 0;display:flex;flex-direction:column;justify-content:center}
.hero h1{font-size:clamp(2.5rem,4.7vw,3.9rem);margin-bottom:var(--s3);max-width:16ch}
.hero h1 em{font-style:normal;font-weight:250;color:var(--ink-3)}
.hero .lede{max-width:44ch;margin-bottom:var(--s4)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:var(--s5)}
.hero-facts{display:flex;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:var(--s3)}
.hero-facts div{padding-right:var(--s4);margin-right:var(--s4);border-right:1px solid var(--rule);
  font-family:var(--display);font-weight:400;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.hero-facts div:last-child{border-right:0;margin-right:0;padding-right:0}
.hero-facts b{display:block;font-family:var(--mono);font-size:16px;color:var(--ink);
  font-weight:400;letter-spacing:0;text-transform:none;margin-bottom:4px}
.hero-img{position:relative;margin-right:calc(50% - 50vw);background:var(--paper-2)}
.hero-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.vid-note{position:absolute;left:var(--s3);bottom:var(--s3);z-index:3;
  background:rgba(255,255,255,.96);border-left:2px solid var(--ink);
  padding:12px 16px;font-size:12.5px;color:var(--ink-2);max-width:250px;line-height:1.5}
.vid-note b{color:var(--ink)}

/* ── 8. HOME: quote strip ──────────────────────────────────────────── */
.strip{background:var(--ink);color:#fff;padding:var(--s6) 0}
.strip .wrap{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap}
.strip blockquote{margin:0;font-family:var(--display);font-weight:250;
  font-size:clamp(1.3rem,2.5vw,1.95rem);line-height:1.3;flex:1;min-width:220px;letter-spacing:-.01em}
.strip cite{font-style:normal;font-family:var(--display);font-weight:400;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);line-height:1.8;
  display:block;max-width:24ch;padding-left:var(--s3);
  border-left:1px solid rgba(255,255,255,.22)}
.strip cite b{display:block;color:#fff;font-weight:400;margin-bottom:3px}

/* ── 9. HOME: audience strata ──────────────────────────────────────── */
.aud{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.aud-c{padding:var(--s4) var(--s4) var(--s4) 0;border-right:1px solid var(--rule);
  text-decoration:none;display:flex;flex-direction:column;position:relative;
  margin-right:-1px;transition:background .2s}
.aud-c:last-child{border-right:0}
.aud-c::before{content:"";position:absolute;top:-1px;left:0;right:1px;height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.aud-c:hover::before{transform:scaleX(1)}
.aud-c .n{font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.18em;
  color:var(--ink);margin-bottom:var(--s3)}
.aud-c h3{font-size:23px;margin-bottom:10px}
.aud-c p{font-size:14.5px;color:var(--ink-2);flex:1;margin-bottom:var(--s3);padding-right:16px}
.aud-c .pr{font-family:var(--mono);font-size:13px;color:var(--ink);
  padding-top:14px;border-top:1px solid var(--rule)}

/* ── 10. HOME: steps ───────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
.step .n{font-family:var(--display);font-weight:250;font-size:54px;line-height:1;
  color:var(--rule-2);margin-bottom:var(--s2)}
.step h3{font-size:20px;margin-bottom:10px}
.step p{color:var(--ink-2);font-size:15px}

/* ── 11. PRODUCT GRIDS (shared) ────────────────────────────────────── */
.grid,.grid3,.blist{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.grid{grid-template-columns:repeat(3,1fr)}
.grid3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);display:flex;flex-direction:column;
  text-decoration:none;transition:background .2s}
.card:hover{background:var(--paper-2)}
.card-img{aspect-ratio:4/3;background:var(--paper-2);overflow:hidden;position:relative}
.card-img img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform .5s}
.card:hover .card-img img{transform:scale(1.03)}
.card-b{padding:var(--s3);display:flex;flex-direction:column;flex:1}
.card-b h3{font-size:18px;margin-bottom:8px;line-height:1.24}
.card:hover h3{color:var(--accent)}
.card-b .spec{font-size:13px;color:var(--ink-3);margin-bottom:var(--s3);flex:1;line-height:1.55}
.card-b .pr{font-family:var(--mono);font-size:15.5px;display:flex;align-items:baseline;
  gap:8px;padding-top:14px;border-top:1px solid var(--rule)}
.card-b .pr s{color:var(--ink-3);font-size:12.5px}
.card-b .pr .f{font-family:var(--display);font-size:10px;letter-spacing:.16em;color:var(--ink-3)}
.card-b .go{margin-top:12px;font-family:var(--display);font-weight:400;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.card:hover .go{color:var(--accent)}
.card.hide{display:none}
.tags{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}

/* ── 12. TAGS ──────────────────────────────────────────────────────── */
.tag{font-family:var(--display);font-weight:400;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;padding:5px 10px;border:1px solid var(--rule-2);
  color:var(--ink-2);background:var(--paper);display:inline-block}
.tag.sale{background:var(--sale);border-color:var(--sale);color:#fff}
.tag.stock,.tag.ok{background:var(--ok-lt);border-color:var(--ok-br);color:var(--ok)}
.tag.noln{background:var(--accent-lt);border-color:var(--accent-br);color:var(--accent)}
.tag.ln{background:var(--warn-lt);border-color:var(--warn-br);color:var(--warn)}

/* ── 13. CALLOUTS ──────────────────────────────────────────────────── */
.note,.warn,.danger{padding:22px 24px;margin:var(--s4) 0;font-size:15.2px;
  line-height:1.62;color:var(--ink-2)}
.note{background:var(--accent-lt);border-left:2px solid var(--accent)}
.warn{background:var(--warn-lt);border-left:2px solid var(--warn)}
.danger{background:var(--sale-lt);border-left:2px solid var(--sale)}
.note b{color:var(--accent)} .warn b{color:var(--warn)} .danger b{color:var(--sale)}
.note p+p,.warn p+p,.danger p+p{margin-top:12px}

/* ── 14. PROSE ─────────────────────────────────────────────────────── */
.prose{max-width:68ch}
.prose h3{font-size:21px;margin:var(--s5) 0 14px}
.prose h3:first-child{margin-top:0}
.prose p{margin-bottom:var(--s2);color:var(--ink-2)}
.prose p strong{color:var(--ink)}
.prose ul,.prose ol{margin:0 0 var(--s3);padding-left:22px;color:var(--ink-2)}
.prose li{margin-bottom:9px}
.prose a{color:var(--accent)}
.prose img{margin:var(--s4) 0;border:1px solid var(--rule)}
.prose em{font-style:italic}

/* ── 15. SPEC TABLES & CHECKLISTS ──────────────────────────────────── */
.spec-table{border-top:1px solid var(--ink)}
.spec-table dl{margin:0;display:grid;grid-template-columns:auto 1fr}
.spec-table dt{font-family:var(--display);font-weight:400;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);padding:15px 26px 15px 0;
  border-bottom:1px solid var(--rule);white-space:nowrap}
.spec-table dd{margin:0;padding:15px 0;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:14px}
.checklist{list-style:none;padding:0;margin:0;border-top:1px solid var(--ink)}
.checklist li{display:flex;gap:var(--s2);padding:17px 0;border-bottom:1px solid var(--rule);
  align-items:flex-start}
.checklist .st{font-family:var(--display);font-weight:400;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:4px 8px;flex-shrink:0;margin-top:2px;
  border:1px solid var(--rule-2);color:var(--ink-3);background:var(--paper)}
.checklist .st.inc{border-color:var(--ok-br);background:var(--ok-lt);color:var(--ok)}
.checklist .st.you{border-color:var(--warn-br);background:var(--warn-lt);color:var(--warn)}
.checklist b{display:block;font-weight:600;font-size:15px;margin-bottom:2px}
.checklist p{font-size:13.8px;color:var(--ink-3);margin:0}
.dl-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--s3)}
.dl{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--rule-2);
  padding:13px 18px;text-decoration:none;font-size:14px;background:var(--paper);
  transition:border-color .18s}
.dl:hover{border-color:var(--ink)}
.dl span{font-family:var(--mono);font-size:11px;color:var(--ink-3)}

/* ── 16. PRODUCT PAGE ──────────────────────────────────────────────── */
.buy{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--s6);
  padding-bottom:var(--s7);border-bottom:1px solid var(--rule)}
.gal-main{background:var(--paper-2);aspect-ratio:3/2;overflow:hidden;margin-bottom:12px}
.gal-main img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.gal-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gal-thumbs button{appearance:none;padding:0;border:1px solid var(--rule);
  background:var(--paper-2);aspect-ratio:1;overflow:hidden;cursor:pointer;
  border-radius:0;transition:border-color .18s}
.gal-thumbs button[aria-current="true"]{border-color:var(--ink)}
.gal-thumbs img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.pinfo h1{font-size:clamp(1.85rem,3.2vw,2.5rem);margin-bottom:var(--s2)}
.pbadges{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:var(--s3)}
.price-row{display:flex;align-items:baseline;gap:14px;padding:var(--s3) 0;flex-wrap:wrap;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);margin-bottom:var(--s3)}
.price-row .now{font-family:var(--mono);font-size:30px;letter-spacing:-.02em}
.price-row s{font-family:var(--mono);font-size:16px;color:var(--ink-3)}
.price-row .save{font-family:var(--display);font-weight:400;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sale);border:1px solid var(--sale);padding:5px 9px}
.trust{display:grid;gap:9px;margin-bottom:var(--s3)}
.trust div{display:flex;gap:11px;font-size:14.2px;color:var(--ink-2);align-items:flex-start}
.trust svg{flex-shrink:0;margin-top:4px;color:var(--ok);width:15px;height:15px}
.qty-row{display:flex;gap:12px;margin-bottom:12px;align-items:stretch}
.qty{display:flex;align-items:center;border:1px solid var(--rule-2)}
.qty button{appearance:none;background:none;border:0;width:44px;height:52px;
  font-size:17px;cursor:pointer;color:var(--ink-2)}
.qty button:hover{color:var(--ink)}
.qty input{width:44px;height:52px;border:0;text-align:center;font-family:var(--mono);
  font-size:15px;background:transparent;color:var(--ink)}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.qty-row .btn-p{flex:1}
.alt-buy{display:block;text-align:center;font-size:14px;color:var(--accent);
  text-decoration:underline;padding:13px 0}
.pay{padding-top:var(--s3);border-top:1px solid var(--rule);
  font-family:var(--display);font-weight:400;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.sticky{position:fixed;left:0;right:0;bottom:0;background:var(--paper);
  border-top:1px solid var(--ink);padding:12px 22px;display:none;gap:12px;
  align-items:center;z-index:50}
.sticky .sp{font-family:var(--mono);font-size:18px;flex-shrink:0}
.sticky .btn{flex:1;min-height:48px}
.need{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}

/* reviews */
.rev-head{display:flex;gap:var(--s5);align-items:baseline;flex-wrap:wrap;
  padding-bottom:var(--s4);border-bottom:1px solid var(--ink)}
.rev-score{font-family:var(--display);font-weight:250;font-size:3.2rem;line-height:1}
.stars{color:var(--warn);letter-spacing:3px;font-size:15px}
.rev{padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.rev blockquote{margin:12px 0 var(--s2);font-family:var(--display);font-weight:300;
  font-size:19px;line-height:1.45}
.rev cite{font-style:normal;font-size:13px;color:var(--ink-3)}
.rev cite b{color:var(--ink);font-weight:600;font-size:13.5px}
.rev .ver{font-family:var(--display);font-weight:400;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ok);border:1px solid var(--ok-br);
  background:var(--ok-lt);padding:3px 7px;margin-left:8px}

/* ── 17. DARK BANDS ────────────────────────────────────────────────── */
.inst,.helper,.dlband{background:var(--ink);color:#fff;padding:var(--s6) 0}
.inst .wrap,.helper .wrap,.dlband .wrap{display:grid;grid-template-columns:1fr auto;
  gap:var(--s5);align-items:center}
.inst h2,.helper h2,.dlband h2{font-size:clamp(1.6rem,2.8vw,2.15rem);margin-bottom:12px;color:#fff}
.inst p,.helper p,.dlband p{color:rgba(255,255,255,.7);max-width:54ch}
.inst .lede{color:rgba(255,255,255,.72)}
.inst .btn-p,.helper .btn-p,.dlband .btn-p{background:#fff;color:var(--ink)}
.inst .btn-p:hover,.helper .btn-p:hover,.dlband .btn-p:hover{background:var(--paper-2)}
.inst .btn-s,.helper .btn-s,.dlband .btn-s{border-color:rgba(255,255,255,.32);color:#fff}
.inst .btn-s:hover,.helper .btn-s:hover,.dlband .btn-s:hover{border-color:#fff;background:transparent}
.inst .label{color:rgba(255,255,255,.5)}
.inst .label::after{border-color:rgba(255,255,255,.22)}
.inst ul{list-style:none;padding:0;margin:0}
.inst li{display:flex;gap:var(--s2);padding:13px 0;font-size:15px;
  border-bottom:1px solid rgba(255,255,255,.14)}
.inst li:last-child{border-bottom:0}
.inst li span{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.5);padding-top:4px}
.inst .fix{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.8)}

/* ── 18. CREDIBILITY / STATS ───────────────────────────────────────── */
.cred{text-align:center;max-width:74ch;margin:0 auto}
.cred p.big{font-family:var(--display);font-weight:250;font-size:clamp(1.5rem,2.9vw,2.1rem);
  line-height:1.3;margin-bottom:var(--s3);letter-spacing:-.01em}
.cred p.big em{font-style:normal;color:var(--ink-3)}
.cred p.sub{color:var(--ink-3);font-size:14.5px}
.stats,.keyfacts{display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:var(--s6);border-top:1px solid var(--ink)}
.stat,.kf{padding:var(--s4) var(--s2) var(--s4) 0;border-right:1px solid var(--rule)}
.stat{text-align:center;padding:var(--s4) var(--s2)}
.stat:last-child,.kf:last-child{border-right:0}
.stat .n,.kf .n{font-family:var(--mono);font-size:2rem;line-height:1;margin-bottom:10px;font-weight:400}
.stat .l,.kf .l{font-family:var(--display);font-weight:400;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}

/* ── 19. TESTIMONIALS ──────────────────────────────────────────────── */
.quotes{columns:2;column-gap:var(--s6)}
.q{break-inside:avoid;padding-bottom:var(--s5);margin-bottom:var(--s5);
  border-bottom:1px solid var(--rule)}
.q:last-child{border-bottom:0}
.q blockquote{margin:0 0 var(--s3);font-family:var(--display);font-weight:300;
  font-size:19px;line-height:1.42}
.q blockquote em{font-style:normal;color:var(--ink)}
.q cite{font-style:normal;font-size:13px;color:var(--ink-3);line-height:1.6;display:block}
.q cite b{display:block;color:var(--ink);font-family:var(--display);font-weight:400;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:4px}

/* ── 20. FAQ / DETAILS ─────────────────────────────────────────────── */
details{border-bottom:1px solid var(--rule)}
details:first-of-type{border-top:1px solid var(--ink)}
summary{padding:var(--s3) 48px var(--s3) 0;cursor:pointer;font-family:var(--display);
  font-weight:300;font-size:20px;position:relative;list-style:none;line-height:1.28}
summary::-webkit-details-marker{display:none}
summary::before,summary::after{content:"";position:absolute;right:8px;top:50%;
  background:var(--ink);transition:transform .22s}
summary::before{width:14px;height:1px;transform:translateY(-50%)}
summary::after{width:1px;height:14px;right:14.5px;transform:translateY(-50%)}
details[open] summary::after{transform:translateY(-50%) rotate(90deg)}
summary:hover{color:var(--accent)}
details .a{padding:0 56px var(--s4) 0;color:var(--ink-2);font-size:15.8px}
details .a a{color:var(--accent)}
details .a p+p{margin-top:14px}
.faq{max-width:820px;margin:0 auto}

/* ── 21. FORMS ─────────────────────────────────────────────────────── */
label{font-family:var(--display);font-weight:400;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
label .req{color:var(--sale)}
input,select,textarea{font-family:var(--body);font-size:15.5px;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule-2);border-radius:0;
  padding:14px 16px;width:100%;min-height:52px}
textarea{min-height:120px;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);
  outline-offset:-1px;border-color:transparent}
select{appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8F98' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.frm{display:grid;gap:var(--s3)}
.fr{display:grid;gap:8px}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.formwrap{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--s6);align-items:start}
.hint,.fnote{font-size:13px;color:var(--ink-3);line-height:1.5}
.fnote{padding-top:var(--s3);border-top:1px solid var(--rule)}
.checks{display:grid;gap:9px}
.chk{display:flex;gap:11px;align-items:flex-start;font-family:var(--body);
  font-size:14.5px;color:var(--ink-2);cursor:pointer;padding:2px 0;
  letter-spacing:0;text-transform:none}
.chk input{width:18px;height:18px;min-height:0;margin-top:3px;flex-shrink:0;
  accent-color:var(--accent);padding:0}
.aside{background:var(--paper-2);border:1px solid var(--rule);padding:var(--s4)}
.aside h3{font-size:19px;margin-bottom:var(--s2)}
.aside p{font-size:14.5px;color:var(--ink-2);margin-bottom:var(--s2)}
.aside .contact{border-top:1px solid var(--rule);padding-top:var(--s3);margin-top:var(--s3);font-size:14.5px}
.aside .contact a{color:var(--accent)}
.aside .k{font-family:var(--display);font-weight:400;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}

/* newsletter */
.news{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center}
.news h2{font-size:clamp(1.7rem,3vw,2.35rem);margin-bottom:var(--s2)}
.nf{display:flex;flex-direction:column;gap:12px}
.nf-row{display:flex;gap:10px;flex-wrap:wrap}
.nf input{flex:1;min-width:200px}
.nf small{color:var(--ink-3);font-size:12.5px}

/* ── 22. SHOP ──────────────────────────────────────────────────────── */
.phead{padding:var(--s4) 0 var(--s5);border-bottom:1px solid var(--rule)}
.phead h1{font-size:clamp(2.1rem,4vw,3.1rem);margin-bottom:var(--s2);max-width:18ch}
.phead .lede{max-width:56ch}
.qpick{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--rule)}
.qpick button,.qpick a{appearance:none;background:none;border:0;border-right:1px solid var(--rule);
  padding:var(--s3) var(--s3) var(--s3) 0;text-align:left;cursor:pointer;text-decoration:none;color:inherit;
  display:block;font-family:inherit;position:relative;transition:background .18s;border-radius:0}
.qpick button:last-child,.qpick a:last-child{border-right:0}
.qpick button::before,.qpick a::before{content:"";position:absolute;top:0;left:0;right:1px;height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .28s}
.qpick button[aria-pressed="true"]::before{transform:scaleX(1)}
.qpick button[aria-pressed="true"]{background:var(--paper-2)}
.qpick a:hover::before{transform:scaleX(1)}
.qpick a:hover{background:var(--paper-2)}
.qpick .n{font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.18em;
  color:var(--ink);margin-bottom:12px}
.qpick h3{font-size:20px;margin-bottom:7px}
.qpick p{font-size:13.5px;color:var(--ink-2);padding-right:12px}
.tools{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) 0;
  border-bottom:1px solid var(--rule);position:sticky;top:76px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);z-index:30}
.fgroup{display:flex;align-items:center;gap:10px}
.fgroup>span{font-family:var(--display);font-weight:400;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
.chip{appearance:none;background:transparent;border:1px solid var(--rule-2);border-radius:0;
  padding:8px 14px;font-family:var(--body);font-size:13px;color:var(--ink-2);
  cursor:pointer;transition:all .16s;min-height:0;width:auto}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.tools select{width:auto;min-height:0;padding:8px 32px 8px 14px;font-size:13px;
  background-position:right 12px center;background-color:transparent}
.count{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.clear{background:none;border:0;font-family:var(--body);font-size:13px;color:var(--accent);
  cursor:pointer;text-decoration:underline;padding:0;width:auto;min-height:0}
.empty{grid-column:1/-1;padding:var(--s8) var(--s4);text-align:center;background:var(--paper)}
.empty h3{font-size:22px;margin-bottom:12px}
.empty p{color:var(--ink-2);margin-bottom:var(--s3)}

/* ── 23. INSTITUTIONAL ─────────────────────────────────────────────── */
.phero{padding:var(--s4) 0 var(--s7);border-bottom:1px solid var(--rule)}
.phero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s7);align-items:end}
.phero h1{font-size:clamp(2.2rem,4.2vw,3.3rem);margin-bottom:var(--s3);max-width:17ch}
.phero h1 em{font-style:normal;color:var(--ink-3)}
.phero .lede{max-width:48ch}
.at-a-glance{border-top:1px solid var(--ink)}
.at-a-glance div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;
  border-bottom:1px solid var(--rule);font-size:14.5px}
.at-a-glance .k{color:var(--ink-3);font-family:var(--display);font-weight:400;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;padding-top:4px}
.at-a-glance .v{text-align:right;color:var(--ink);font-family:var(--mono);font-size:13.5px}
.proc{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.proc-s{padding:var(--s4) var(--s3) var(--s4) 0;border-right:1px solid var(--rule);position:relative}
.proc-s:last-child{border-right:0}
.proc-s .n{font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.18em;
  color:var(--ink);margin-bottom:var(--s3)}
.proc-s h3{font-size:19px;margin-bottom:10px}
.proc-s p{font-size:14.2px;color:var(--ink-2);padding-right:12px}
.proc-s .when{font-family:var(--mono);font-size:11px;color:var(--ink-3);
  margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.docs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}
.doclist{list-style:none;padding:0;margin:0;border-top:1px solid var(--ink)}
.doclist li{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid var(--rule);align-items:flex-start}
.doclist svg{flex-shrink:0;margin-top:5px;color:var(--ok);width:16px;height:16px}
.doclist b{display:block;font-weight:600;font-size:15.2px;margin-bottom:2px}
.doclist p{font-size:13.8px;color:var(--ink-3)}
.ptable,.ktable,.chg{width:100%;border-collapse:collapse;border-top:1px solid var(--ink)}
.ptable th,.ktable th,.chg th{font-family:var(--display);font-weight:400;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);text-align:left;
  padding:14px 20px 14px 0;border-bottom:1px solid var(--rule-2)}
.ptable td,.ktable td,.chg td{padding:17px 20px 17px 0;border-bottom:1px solid var(--rule);
  font-size:15px;vertical-align:top}
.ptable td:first-child{font-family:var(--mono);font-size:13.5px;white-space:nowrap}
.ptable .disc{font-family:var(--mono);color:var(--ok);font-size:14.5px}
.ptable tr:hover td,.ktable tr:hover td{background:var(--paper-2)}
.ktable td a{color:var(--accent);text-decoration:none}
.ktable td a:hover{text-decoration:underline}
.yn{font-family:var(--display);font-weight:400;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;padding:4px 9px;border:1px solid;white-space:nowrap;display:inline-block}
.yn.y{border-color:var(--warn-br);background:var(--warn-lt);color:var(--warn)}
.yn.n{border-color:var(--ok-br);background:var(--ok-lt);color:var(--ok)}

/* ── 24. LIQUID NITROGEN PAGE ──────────────────────────────────────── */
.toc{background:var(--paper-2);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:var(--s4) 0}
.toc ol{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:10px var(--s5);counter-reset:t}
.toc li{counter-increment:t}
.toc a{text-decoration:none;font-size:14.5px;color:var(--ink-2);display:flex;gap:12px}
.toc a::before{content:"0" counter(t);font-family:var(--mono);font-size:11px;
  color:var(--ink-3);padding-top:4px}
.toc a:hover{color:var(--accent)}
.sources{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.src{background:var(--paper);padding:var(--s4)}
.src .rank{font-family:var(--display);font-weight:400;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.src h3{font-size:19px;margin-bottom:10px}
.src p{font-size:14.5px;color:var(--ink-2);margin-bottom:var(--s2)}
.src dl{margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:18px;border-top:1px solid var(--rule)}
/* The markup wraps each dt/dd pair in a <div> (the WP block editor does not
   allow bare dt/dd re-ordering). Without this rule the grid positions the
   wrapper divs themselves into the two columns — Cost and Minimum render side
   by side with their values colliding, Catch wraps underneath.
   display:contents dissolves the wrappers so dt/dd sit in the grid directly,
   which is the label-left / value-right layout the columns were written for. */
.src dl > div{display:contents}
.src dt{font-family:var(--display);font-weight:400;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);padding:11px 20px 11px 0;
  border-bottom:1px solid var(--rule);white-space:nowrap}
.src dd{margin:0;padding:11px 0;border-bottom:1px solid var(--rule);font-size:14px}
.safety{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
.rules{list-style:none;padding:0;margin:0;border-top:1px solid var(--ink)}
.rules li{display:flex;gap:var(--s2);padding:17px 0;border-bottom:1px solid var(--rule);align-items:flex-start}
.rules .m{font-family:var(--display);font-weight:400;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:4px 8px;flex-shrink:0;margin-top:2px;border:1px solid;white-space:nowrap}
.m.do{border-color:var(--ok-br);background:var(--ok-lt);color:var(--ok)}
.m.dont{border-color:var(--sale-br);background:var(--sale-lt);color:var(--sale)}
.rules b{display:block;font-weight:600;font-size:15px;margin-bottom:3px}
.rules p{font-size:13.8px;color:var(--ink-3);margin:0}
.ppe{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.ppe-i{background:var(--paper);padding:var(--s3)}
.ppe-i h4{font-size:16px;margin-bottom:8px}
.ppe-i p{font-size:13.8px;color:var(--ink-2)}
.ppe-i .req{font-family:var(--display);font-weight:400;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sale);margin-bottom:12px;display:block}
.ppe-i .req.opt{color:var(--ink-3)}

/* supplier map */
.mapblock{margin-top:var(--s6);border:1px solid var(--rule);background:var(--paper)}
.map-head{padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:var(--s3);align-items:flex-end;flex-wrap:wrap}
.map-head h3{font-size:21px;margin-bottom:7px}
.map-head p{font-size:14px;color:var(--ink-3);max-width:52ch}
.map-tools{padding:var(--s2) var(--s4);border-bottom:1px solid var(--rule);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--paper-2)}
.map-tools input{flex:1;min-width:200px;min-height:48px}
.map-tools .btn{min-height:48px;font-size:13.5px;padding:0 20px}
.map-frame{position:relative;background:var(--paper-2);aspect-ratio:16/9;min-height:340px}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;text-align:center;padding:var(--s4);background:var(--paper-2)}
.map-ph p{font-size:14.5px;color:var(--ink-2);max-width:38ch}
.map-ph .pin{color:var(--ink)}
.map-foot{padding:var(--s2) var(--s4);font-size:12.5px;color:var(--ink-3);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.map-foot a{color:var(--accent)}
.map-foot code{font-family:var(--mono);font-size:12px}
.map-status{font-family:var(--display);font-weight:400;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.map-status.err{color:var(--sale)}
.map-keywarn{padding:var(--s2) var(--s4);border-top:1px solid var(--warn-br);
  background:var(--warn-lt);font-size:13.5px;color:var(--warn);line-height:1.6}
.map-keywarn b,.map-keywarn strong{color:#5E430F}
.map-keywarn code{background:rgba(0,0,0,.05);padding:2px 6px;font-family:var(--mono);font-size:12px}

/* ── 25. BLOG ──────────────────────────────────────────────────────── */
.bhero{padding:var(--s4) 0 var(--s6);border-bottom:1px solid var(--rule)}
.bhero h1{font-size:clamp(2.1rem,4.2vw,3.2rem);margin-bottom:var(--s3);max-width:20ch}
.bhero h1 em{font-style:normal;color:var(--ink-3)}
.feat{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s6);align-items:center;
  padding:var(--s6) 0;border-bottom:1px solid var(--rule)}
.feat-img{background:var(--paper-2);aspect-ratio:3/2;overflow:hidden}
.feat-img img{width:100%;height:100%;object-fit:cover}
.feat h2{font-size:clamp(1.6rem,2.9vw,2.25rem);margin-bottom:var(--s2)}
.feat .meta{font-family:var(--display);font-weight:400;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s2)}
.feat p{color:var(--ink-2);margin-bottom:var(--s3)}
.blist{grid-template-columns:repeat(3,1fr);margin:var(--s6) 0}
.bcard{background:var(--paper);text-decoration:none;display:flex;flex-direction:column;
  transition:background .2s}
.bcard:hover{background:var(--paper-2)}
.bcard .im{aspect-ratio:3/2;background:var(--paper-2);overflow:hidden}
.bcard .im img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bcard:hover .im img{transform:scale(1.03)}
.bcard .bd{padding:var(--s3);display:flex;flex-direction:column;flex:1}
.bcard .meta{font-family:var(--display);font-weight:400;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.bcard h3{font-size:18px;line-height:1.26;margin-bottom:10px}
.bcard:hover h3{color:var(--accent)}
.bcard p{font-size:13.8px;color:var(--ink-2);flex:1;margin-bottom:var(--s2)}
.bcard .go{font-family:var(--display);font-weight:400;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.bcard:hover .go{color:var(--accent)}
.post-head{padding:var(--s4) 0 var(--s5);border-bottom:1px solid var(--rule);max-width:820px}
.post-head h1{font-size:clamp(2rem,3.8vw,2.9rem);margin-bottom:var(--s3)}
.post-meta{font-family:var(--display);font-weight:400;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
.post-hero{margin:var(--s5) 0;background:var(--paper-2)}
.post-hero img{width:100%}
.post-body{max-width:70ch;font-size:17.5px}
.post-body h2{font-size:26px;margin:var(--s5) 0 var(--s2)}
.post-body h3{font-size:20px;margin:var(--s4) 0 12px}
.post-body p{margin-bottom:var(--s3);color:var(--ink-2)}
.post-body ul,.post-body ol{margin:0 0 var(--s3);padding-left:24px;color:var(--ink-2)}
.post-body li{margin-bottom:10px}
.post-body a{color:var(--accent)}
.post-body img{margin:var(--s4) 0;border:1px solid var(--rule)}
.post-body hr{border:0;height:5px;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);margin:var(--s5) 0}
.post-body strong{color:var(--ink)}
.post-nav{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s5) 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin:var(--s6) 0;flex-wrap:wrap}
.post-nav a{text-decoration:none;font-size:14.5px;color:var(--ink-2);max-width:40ch}
.post-nav a:hover{color:var(--accent)}
.post-nav .k{font-family:var(--display);font-weight:400;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:6px}

/* ── 26. FOOTER ────────────────────────────────────────────────────── */
footer{background:var(--paper-2);border-top:1px solid var(--rule);padding:var(--s7) 0 var(--s4)}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s6);margin-bottom:var(--s6)}
.fcol h4{font-family:var(--display);font-weight:400;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s3)}
.fcol ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.fcol a{color:var(--ink-2);text-decoration:none;font-size:14.5px}
.fcol a:hover{color:var(--accent)}
.fabout .logo{margin-bottom:var(--s3)}
.fabout .logo svg{width:36px}
.fabout .logo .l1{font-size:19px}
.fabout .logo .l2{font-size:11px;letter-spacing:.22em}
.fabout p{color:var(--ink-3);font-size:14px;margin:0 0 var(--s3);max-width:36ch}
.fsoc{display:flex;gap:18px;font-family:var(--display);font-weight:400;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase}
.fbot{border-top:1px solid var(--rule-2);padding-top:var(--s3);display:flex;
  justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)}
.fbot .formula{font-size:12.5px}

/* ── 27. ACCESSIBILITY ─────────────────────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
@media(pointer:coarse){.btn,.chip{min-height:48px}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── 28. RESPONSIVE ────────────────────────────────────────────────── */
@media(max-width:1000px){
  .nav{gap:var(--s3);position:relative}
  .nav-r{order:1}
  .navtoggle{display:flex;order:2}
  .nav ul{order:3;flex:1 0 100%;display:none;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--rule);box-shadow:0 14px 28px rgba(10,11,13,.09);
    padding:6px var(--s4) var(--s2);z-index:39}
  .nav.open ul{display:flex}
  .nav ul li{width:100%}
  .nav ul a{display:block;padding:15px 0;border-bottom:1px solid var(--rule);
    white-space:normal}
  .nav ul li:last-child a{border-bottom:0}
  .nav ul a::after{display:none}
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-txt{padding:var(--s6) 0 var(--s5)}
  .hero-img{margin:0 calc(50% - 50vw);height:380px;position:relative}
  .aud,.proc{grid-template-columns:1fr 1fr}
  .aud-c,.proc-s{padding-right:var(--s3)}
  .aud-c:nth-child(2),.proc-s:nth-child(2){border-right:0}
  .qpick{grid-template-columns:1fr 1fr}
  .qpick button,.qpick a{padding-right:var(--s3)}
  .qpick button:nth-child(2),.qpick a:nth-child(2){border-right:0}
  .grid,.grid3,.blist{grid-template-columns:1fr 1fr}
  .buy,.need,.split,.news,.docs,.formwrap,.feat,.phero-grid,.safety,
  .sources,.ppe,.mock-body{grid-template-columns:1fr;gap:var(--s5)}
  .steps{grid-template-columns:1fr;gap:var(--s4)}
  .quotes{columns:1}
  .stats,.keyfacts{grid-template-columns:1fr 1fr}
  .stat,.kf{border-bottom:1px solid var(--rule)}
  .stat:nth-child(2),.kf:nth-child(2){border-right:0}
  .inst .wrap,.helper .wrap,.dlband .wrap{grid-template-columns:1fr;gap:var(--s3)}
  .fgrid{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .toc ol{grid-template-columns:1fr 1fr}
  .tools{position:static}
  section{padding:var(--s6) 0}
}
/* The inline nav carries 8 items since "Science fair" was added, and the header
   is capped at --max (1180px), so horizontal space is the binding constraint.

   MEASURED, not estimated — sum of the 8 <li> widths at 12px Jost, plus gaps,
   logo (109px), the cart/button cluster (206px) and 64px of .wrap padding:

     letter-spacing   gap   nav gap   items   viewport required
     .16em            26    48        646     1233
     .10em            16    48        591     1178
     .08em            14    32        573     1114
     .06em            12    24        555     1066

   An earlier fix set the tightened spacing behind min-width:1281 and collapsed
   to the hamburger at max-width:1280. That was wrong in a way that only showed
   up off my own screen: the tightening applied ONLY above 1280, where there was
   already room, and every window between roughly 1100 and 1280 — which is where
   a normal, non-maximised laptop browser sits — got the hamburger despite the
   nav fitting comfortably once tightened. Reported as "Safari loads as mobile
   only"; Safari was simply the narrower window, not a rendering difference.

   So: tightened spacing now applies wherever the inline nav is shown, and the
   collapse point sits above the measured requirement rather than far above it.

   Verified by shrinking the header container in 20px steps and comparing the
   list's scrollWidth against its clientWidth: fits exactly at 1080, overflows
   by 6px at 1060. Breakpoint set to 1120 — 40px of slack, enough to absorb
   Safari/Chrome text-metric differences without collapsing on ordinary laptop
   windows. Anything that adds a ninth nav item must re-run that measurement. */
@media(min-width:1001px){
  .nav{gap:24px}
  .nav ul{gap:12px;min-width:0}
  .nav ul a{letter-spacing:.06em}
  /* The right-hand cluster must never be overlapped: it holds the cart and the
     primary button. Let the link list shrink first if anything is ever added. */
  .nav-r{flex:0 0 auto}
}
/* No separate collapse block is needed: the max-width:1000px rules above
   already switch the nav to the hamburger, and the top level now fits well
   inside 1000px. Keeping one breakpoint instead of two also means the nav
   collapses at exactly the width where the page layout stacks, rather than
   going mobile-nav while the content is still in desktop columns. */
@media(max-width:620px){
  .wrap,.narrow{padding:0 22px}
  .logo-wd .l1{font-size:13px}
  .logo-wd .l2{display:none}
  .logo svg{width:22px}
  .cart span{display:none}
  .nav-r{gap:14px}
  .nav-r .btn-sm{padding:0 16px;font-size:13px}
  .aud,.proc,.grid,.grid3,.blist,.qpick,.stats,.keyfacts,.toc ol,.fgrid{grid-template-columns:1fr}
  .aud-c,.proc-s,.qpick button,.qpick a{border-right:0;border-bottom:1px solid var(--rule);padding-right:0}
  .stat,.kf{border-right:0;padding-right:0}
  .fr2{grid-template-columns:1fr}
  .sticky{display:flex}
  body{padding-bottom:76px}
  .hero-facts div{border-right:0;padding-right:0;margin-right:0;width:50%;margin-bottom:var(--s2)}
  .banner{font-size:9.5px;letter-spacing:.12em;padding:10px 18px}
  .post-body{font-size:16.5px}
  .count{margin-left:0;width:100%}
  .ktable th:nth-child(3),.ktable td:nth-child(3){display:none}
}