/* Smart Amino storefront. Concept: the circuit printed under every label is the store's wiring.
   Light studio ground sampled from the vial mockup; each compound owns its label's colours. */

/* ---------- tokens ---------- */
:root {
  --ground: #EFF3F7;
  --ground-2: #E4EAF1;
  --paper: #FFFFFF;
  --ink: #0B0D12;
  --ink-2: #353C49;
  --ink-3: #596273;
  --line: #D5DCE5;
  --line-2: #C3CCD8;
  --ok: #0F7A55;

  --plum: #1D3D46; --plum-cap: #05789D; --plum-glow: #B0D9E7; /* arctic blue: tissue and immune (2026-10-29 label art) */
  --navy: #041C3C; --navy-cap: #0A346D; --navy-glow: #AAD1E9; /* navy: endocrine (and TB-500) (2026-10-29 label art) */
  --forest: #143C3B; --forest-cap: #072727; --forest-glow: #7DE8C1;
  --wine: #44141C; --wine-cap: #751225; --wine-glow: #EFBCB8; /* burgundy: neural signalling (2026-10-29 label art) */
  --cobalt: #04347C; --cobalt-cap: #0043A7; --cobalt-glow: #A6D7F0; /* sapphire: copper peptides (2026-10-29 label art) */
  --teal: #043C34; --teal-cap: #136D65; --teal-glow: #B0E8E3; /* teal: metabolic signalling (2026-10-29 label art) */
  --mito: #0C4424; --mito-cap: #186D3C; --mito-glow: #B3E8C9; /* forest: cellular and mitochondrial (2026-10-29 label art) */
  --violet: #1C0C3C; --violet-cap: #3A186D; --violet-glow: #CAB4E9; /* deep violet: mixed blends (2026-10-29 label art) */
  --pink: #3C1424; --pink-cap: #6D2448; --pink-glow: #E7B9D0; /* pink: melanocortin (2026-10-29 label art) */

  --ff-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --ff-body: "Archivo", Arial, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-hero: clamp(2.9rem, 1.3rem + 4.6vw, 5.4rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.6vw, 3.6rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-mono: .75rem;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px; --s10: 160px;
  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(11, 13, 18, .05), 0 6px 18px -8px rgba(11, 13, 18, .12);
  --shadow-2: 0 2px 4px rgba(11, 13, 18, .05), 0 24px 48px -20px rgba(11, 13, 18, .22);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 var(--fs-body)/1.55 var(--ff-body); font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--ff-display); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--plum-glow); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 200; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: var(--r-pill); transform: translateY(-160%); transition: transform .2s var(--ease-out); text-decoration: none; }
.skip:focus { transform: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.mono { font: 500 var(--fs-mono)/1.3 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; }
.wide { font-variation-settings: "wdth" 118; }
.muted { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- product channel ---------- */

/* ---------- buttons ---------- */
.btn {
  --bg: var(--ink); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 26px 0 22px; border: 0; border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg); text-decoration: none;
  font: 600 1rem/1 var(--ff-body); font-variation-settings: "wdth" 108; letter-spacing: .005em;
  transition: transform .25s var(--ease-out), background-color .2s, box-shadow .25s;
  overflow: hidden; white-space: nowrap;
}
.btn::before { /* the pad terminal */
  content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; flex: none; opacity: .9;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(11, 13, 18, .5); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--ghost { --bg: transparent; --fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--light { --bg: #fff; --fg: var(--ink); }
.btn--ch { --bg: var(--c); }
.btn--block { width: 100%; }
.btn--sm { min-height: 42px; padding: 0 18px 0 16px; font-size: .9375rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn .roll { display: inline-grid; overflow: hidden; height: 1.1em; }
.btn .roll > span { grid-area: 1 / 1; transition: transform .26s var(--ease-out); }
.btn .roll > span + span { transform: translateY(110%); }
.btn.is-added .roll > span:first-child { transform: translateY(-110%); }
.btn.is-added .roll > span + span { transform: none; }

.link { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.link::after { content: ""; width: 18px; height: 1.5px; background: currentColor; transition: width .3s var(--ease-out); }
.link:hover::after { width: 30px; }

.chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill); border: 1.5px solid currentColor; font: 600 .8125rem/1 var(--ff-body); white-space: nowrap; }

/* ---------- announcement + header ---------- */
.announce { background: var(--ink); color: #E8ECF2; font-size: .8125rem; }
.announce .wrap { display: flex; justify-content: center; gap: 28px; min-height: 38px; align-items: center; flex-wrap: wrap; padding-block: 6px; }
.announce span { display: inline-flex; align-items: center; gap: 8px; }
.announce span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--forest-glow); }
.announce span:nth-child(2)::before { background: var(--navy-glow); }
.announce span:nth-child(3)::before { background: var(--plum-glow); }
@media (max-width: 760px) { .announce span:not(:first-child) { display: none; } }

.hdr { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.hdr.is-stuck { border-bottom-color: var(--line); }
.hdr__in { display: flex; align-items: center; gap: var(--s5); height: 76px; }
.hdr__logo { flex: none; display: block; width: 132px; }
.hdr__logo img { width: 100%; height: auto; }
.nav { display: flex; gap: 4px; margin-left: var(--s5); }
.nav a { padding: 10px 14px; border-radius: var(--r-pill); text-decoration: none; font-weight: 500; font-size: .96875rem; color: var(--ink-2); transition: background-color .2s, color .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: rgba(11, 13, 18, .06); }
.hdr__tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { position: relative; width: 46px; height: 46px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 50%; color: var(--ink); text-decoration: none; transition: background-color .2s; }
.icon-btn:hover { background: rgba(11, 13, 18, .06); }
.icon-btn svg { width: 22px; height: 22px; }
.cart-count { position: absolute; top: 4px; right: 2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ink); color: #fff; font: 600 .6875rem/20px var(--ff-mono); text-align: center; box-shadow: 0 0 0 2px var(--ground); }
.cart-count[data-n="0"] { display: none; }
.cart-count.pulse { animation: pulse .4s var(--ease-out); }
@keyframes pulse { 40% { transform: scale(1.35); } }
.menu-btn { display: none; }
@media (max-width: 960px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
  .hdr__in { height: 64px; }
  .hdr__logo { width: 112px; }
}
.mnav { position: fixed; inset: 0; z-index: 90; background: var(--ground); padding: 88px var(--gutter) 32px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.mnav a { font: 800 1.9rem/1.15 var(--ff-display); font-variation-settings: "wdth" 118; text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--line); letter-spacing: -.02em; }
.mnav .btn { margin-top: 24px; }
.mnav__close { position: absolute; top: 10px; right: var(--gutter); }

/* ---------- rail (signature) ---------- */
.rail { position: absolute; top: 0; left: max(14px, calc((100vw - var(--wrap)) / 2 - 38px)); width: 2px; z-index: 5; pointer-events: none; display: none; }
@media (min-width: 1360px) { .rail { display: block; } }
.rail__track { position: absolute; inset: 0; background: var(--line); border-radius: 2px; }
.rail__fill { position: absolute; inset: 0; transform-origin: 50% 0; transform: scaleY(var(--p, 0)); border-radius: 2px;
  background: linear-gradient(var(--plum) 0 25%, var(--navy) 25% 50%, var(--cobalt) 50% 75%, var(--wine) 75%); }
.rail__node { position: absolute; left: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--ground); border: 2px solid var(--line-2); transition: background-color .24s, border-color .24s, transform .24s var(--ease-out); }
.rail__node span { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); white-space: nowrap; color: var(--ink-3); opacity: 0; transition: opacity .2s; }
.rail__node.is-on { background: var(--ink); border-color: var(--ink); }
.rail__node.is-on span { opacity: 1; }
@media (max-width: 1640px) { .rail__node span { display: none; } }
@media (prefers-reduced-motion: reduce) { .rail__fill { transform: none; } }

/* ---------- sections ---------- */
.sec { position: relative; padding-block: var(--s9); }
.sec--tight { padding-block: var(--s8); }
.sec--paper { background: var(--paper); }
.sec__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s5) var(--s7); margin-bottom: var(--s7); }
.sec__head h2 { font-size: var(--fs-h2); font-variation-settings: "wdth" 116; max-width: 16ch; }
.sec__head p { color: var(--ink-2); max-width: 46ch; margin-top: var(--s4); }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--ink-3); margin-bottom: var(--s4); }
.eyebrow b { font-weight: 500; color: var(--ink); }
.eyebrow::after { content: ""; width: 40px; height: 1.5px; background: currentColor; opacity: .5; }
@media (max-width: 760px) { .sec { padding-block: var(--s8); } .sec__head { grid-template-columns: 1fr; margin-bottom: var(--s6); } }

/* trace motif */
.trace { color: var(--glow, var(--ink)); }
.trace path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trace circle { fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 104px); overflow: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6); align-items: center; }
.hero h1 { font-size: var(--fs-hero); font-variation-settings: "wdth" 122; letter-spacing: -.035em; line-height: .96; }
.hero h1 .ln { display: block; }
.hero h1 em { font-style: normal; color: var(--ink-3); }
.hero__sub { margin-top: var(--s5); font-size: 1.1875rem; color: var(--ink-2); max-width: 36ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s6); }
.proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin-top: var(--s7); max-width: 470px; }
.proof li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; color: var(--ink-2); line-height: 1.35; }
.proof li b { display: block; color: var(--ink); font-weight: 600; }
.proof svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }

.stage { position: relative; aspect-ratio: 1 / .82; }
.stage__traces { position: absolute; inset: auto 0 2% -14%; height: 40%; color: var(--line-2); }
.stage__traces .trace path, .stage__traces .trace circle { stroke-width: 1.4; }
.fv { position: absolute; bottom: 10%; width: 22%; text-decoration: none; --rot: 0deg; --dy: 0px; }
.fv__img { position: relative; z-index: 1; transform: translateY(var(--dy)) rotate(var(--rot)); }
.fv__img img { width: 100%; filter: drop-shadow(0 22px 22px rgba(11, 13, 18, .14)); }
.fv__shadow { position: absolute; left: 12%; right: 12%; bottom: -6%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 13, 18, .28), transparent); }
.stage > .fv:nth-of-type(1) { left: 1%; --dy: -6%; --rot: -4deg; }
.stage > .fv:nth-of-type(2) { left: 26%; --dy: -16%; --rot: 2deg; }
.stage > .fv:nth-of-type(3) { left: 51%; --dy: -4%; --rot: -1.5deg; }
.stage > .fv:nth-of-type(4) { left: 76%; --dy: -13%; --rot: 4deg; }
.fv__tag { position: absolute; z-index: 3; left: 50%; top: 26%; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; background: var(--paper); border-radius: var(--r-md); padding: 10px 14px; box-shadow: var(--shadow-2); white-space: nowrap; transition: opacity .18s, transform .18s var(--ease-out); }
.fv__tag b { display: block; font: 800 1rem/1.1 var(--ff-display); font-variation-settings: "wdth" 112; }
.fv__tag span { font-size: .8125rem; color: var(--ink-3); }
.fv:hover .fv__tag, .fv:focus-visible .fv__tag { opacity: 1; transform: translate(-50%, 0); }
.fv:focus-visible { outline: none; }
.fv:focus-visible .fv__img { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 12px; }
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__grid { gap: 0; }
  .hero__grid > div:first-child { display: contents; }
  .hero__grid .proof { order: 3; margin-top: var(--s5); }
  .stage { order: 2; aspect-ratio: 1 / .7; margin-top: var(--s4); }
  .hero__cta { margin-top: var(--s5); }
}

/* floating motion */
@media (prefers-reduced-motion: no-preference) {
  .float { animation: bob var(--dur, 6.5s) var(--ease-io) var(--del, 0s) infinite alternate; }
  .float + .fv__shadow, .fshadow { animation: shadow var(--dur, 6.5s) var(--ease-io) var(--del, 0s) infinite alternate; }
  @keyframes bob { from { translate: 0 0; } to { translate: 0 -14px; } }
  @keyframes shadow { from { scale: 1; opacity: 1; } to { scale: .82; opacity: .65; } }
  .js .hero [data-in] { opacity: 0; transform: translateY(18px); }
  .js .hero.is-in [data-in] { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(80ms + var(--i, 0) * 70ms); }
  .js .hero .stage { opacity: 0; transform: scale(1.03); }
  .js .hero.is-in .stage { opacity: 1; transform: none; transition: opacity .9s var(--ease-out) .15s, transform .9s var(--ease-out) .15s; }
  .js [data-reveal].is-armed { opacity: 0; transform: translateY(24px); }
  .js [data-reveal].is-shown { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
}

/* ---------- product card ---------- */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
@media (min-width: 1101px) { .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grid4 { gap: 12px; } }
.card { position: relative; display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); transition: box-shadow .4s var(--ease-out), transform .4s var(--ease-out); }
.card:hover { box-shadow: var(--shadow-2); }
.card__media { position: relative; display: block; aspect-ratio: 4 / 4.7; background: radial-gradient(120% 90% at 50% 30%, #F8FAFC 0%, var(--ground) 70%); overflow: hidden; }
.card__media img { position: absolute; left: 50%; bottom: 7%; width: 44%; transform: translateX(-50%); transition: transform .42s var(--ease-out); filter: drop-shadow(0 16px 16px rgba(11, 13, 18, .13)); }
.card:hover .card__media img { transform: translate(-50%, -6px); }
.card__pin { position: absolute; top: 14px; left: 16px; color: var(--ink-3); }
.card__badge { z-index: 2; position: absolute; top: 12px; right: 12px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--paper); font: 500 .6875rem/1 var(--ff-mono); letter-spacing: .06em; text-transform: uppercase; box-shadow: var(--shadow-1); }
.card__strip { position: relative; height: 40px; background: var(--c); color: var(--glow); display: flex; align-items: center; padding-inline: 16px; overflow: hidden; }
.card__strip .mono { color: rgba(255, 255, 255, .82); font-size: .625rem; letter-spacing: .14em; }
.card__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; flex: 1; }
.card__name { font-size: 1.5rem; font-variation-settings: "wdth" 116; }
.card__name a { text-decoration: none; }
.card__name a::after { content: ""; position: absolute; inset: 0 0 auto; height: calc(100% - 120px); }
.card__meta { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--ink-3); }
.card__meta .chip { color: var(--c); height: 24px; padding: 0 10px; font-size: .75rem; }
.card__buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.price { font: 800 1.375rem/1 var(--ff-display); font-variation-settings: "wdth" 110; font-variant-numeric: tabular-nums; }
.price small { display: block; margin-top: 5px; font: 500 .75rem/1 var(--ff-body); color: var(--ink-3); }
.card .btn { position: relative; z-index: 2; }
@media (max-width: 520px) {
  .card__body { padding: 14px 12px 14px; }
  .card__name { font-size: 1.15rem; }
  .card__meta { font-size: .75rem; }
  .card__meta .muted { display: none; }
  .card__buy { flex-direction: column; align-items: stretch; }
  .card__buy .btn { min-height: 44px; }
  .card__strip { height: 32px; }
  .card__strip .mono { font-size: .5625rem; }
}

/* ---------- box band (home) ---------- */
.band { position: relative; border-radius: 32px; background: var(--paper); box-shadow: var(--shadow-1); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s6); padding: clamp(28px, 5vw, 64px); overflow: hidden; }
.band h2 { font-size: var(--fs-h2); font-variation-settings: "wdth" 118; }
.band p { color: var(--ink-2); margin-top: var(--s4); max-width: 42ch; }
.tiers { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--s6) 0; }
.tier { display: grid; gap: 4px; min-width: 112px; padding: 14px 16px; border-radius: var(--r-md); background: var(--ground); }
.tier b { font: 800 1.6rem/1 var(--ff-display); font-variation-settings: "wdth" 114; }
.tier span { font-size: .8125rem; color: var(--ink-3); }
.cluster { position: relative; min-height: 340px; }
.cluster .fv { bottom: 8%; width: 25%; }
.cluster .fv:nth-child(1) { left: 2%; --dy: -4%; --rot: -9deg; }
.cluster .fv:nth-child(2) { left: 25%; --dy: -18%; --rot: 3deg; z-index: 2; }
.cluster .fv:nth-child(3) { left: 50%; --dy: -2%; --rot: -3deg; }
.cluster .fv:nth-child(4) { left: 74%; --dy: -14%; --rot: 8deg; }
@media (max-width: 860px) { .band { grid-template-columns: 1fr; } .cluster { min-height: 0; aspect-ratio: 1 / .8; } }

/* ---------- seven tests ---------- */
.tests { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); align-items: center; gap: var(--s5); }
.tests__col { display: grid; gap: var(--s4); }
.test { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 18px 20px; background: var(--paper); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.test__n { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font: 600 .75rem/1 var(--ff-mono); }
.test h3 { font-size: 1.125rem; font-variation-settings: "wdth" 112; align-self: center; }
.test h3 small { margin-left: 8px; font: 500 .6875rem/1 var(--ff-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.test p { font-size: .9375rem; color: var(--ink-2); grid-column: 2; }
.test__spec { grid-column: 2; margin-top: 6px; color: var(--ok); display: inline-flex; gap: 6px; align-items: center; }
.test__spec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tests__center { position: relative; align-self: stretch; display: grid; place-items: center; min-height: 520px; }
.tests__center .fv { position: relative; inset: auto; width: 58%; }
.tests__wires { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--line-2); }
.tests__seal { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); text-align: center; }
.tests__seal b { display: block; font: 800 4.2rem/.9 var(--ff-display); font-variation-settings: "wdth" 125; letter-spacing: -.04em; }
@media (max-width: 1060px) {
  .tests { grid-template-columns: 1fr 1fr; }
  .tests__center { grid-column: 1 / -1; grid-row: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 24px; }
  .tests__seal { position: static; transform: none; display: flex; align-items: baseline; gap: 10px; }
  .tests__seal b { font-size: 3rem; }
  .tests__center .fv { width: 30%; }
  .tests__wires { display: none; }
}
@media (max-width: 640px) { .tests { grid-template-columns: 1fr; } .tests__center .fv { width: 42%; } }

/* ---------- molecule console (light) ---------- */
.console { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s5); background: var(--paper); border-radius: 32px; padding: clamp(18px, 3vw, 36px); box-shadow: var(--shadow-1); }
.tabs { display: grid; gap: 8px; align-content: start; }
.tab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-radius: var(--r-md); background: transparent; text-align: left; font-weight: 600; transition: background-color .2s; }
.tab::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--glow) 60%, transparent); }
.tab:hover { background: var(--ground); }
.tab[aria-selected="true"] { background: var(--ground); box-shadow: inset 3px 0 0 var(--c); }
.tab small { margin-left: auto; color: var(--ink-3); font: 500 .6875rem/1 var(--ff-mono); }
.panel { min-width: 0; }
.panel.is-anim { animation: panelIn .32s var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } }
.panel__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: var(--s5); }
.panel__head h3 { font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); font-variation-settings: "wdth" 120; color: var(--c); }
.specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.specs > div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); }
.specs dt { color: var(--ink-3); margin-bottom: 6px; }
.specs dd { margin: 0; font: 700 1.125rem/1.25 var(--ff-display); font-variation-settings: "wdth" 104; overflow-wrap: anywhere; }
.specs sub { font-size: .7em; }
@media (max-width: 860px) { .console { grid-template-columns: 1fr; } .tabs { grid-auto-flow: column; overflow-x: auto; } .tab { white-space: nowrap; } .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* sequence drawn as a circuit */
.seq { position: relative; display: flex; flex-wrap: wrap; gap: 18px 12px; margin-top: var(--s5); padding: 4px 0; counter-reset: res; }
.seq li { position: relative; display: grid; justify-items: center; gap: 6px; }
.seq li + li::before { content: ""; position: absolute; right: 100%; top: 19px; width: 12px; height: 2px; background: var(--c); }
.seq b { width: 46px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 2px solid var(--c); background: color-mix(in srgb, var(--glow) 22%, #fff); font: 700 .875rem/1 var(--ff-mono); color: var(--cap); }
.seq li.row-start::before { display: none; }
.seq small { font: 500 .625rem/1 var(--ff-mono); color: var(--ink-3); }
.seq .metal b { border-radius: 50%; width: 46px; height: 46px; border-color: #B87333; background: #F7E7D8; color: #6B3B12; }
.seq-note { margin-top: var(--s5); color: var(--ink-3); font-size: .9375rem; }

/* ---------- COA list ---------- */
.coa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4); }
.cert { position: relative; display: grid; gap: 10px; padding: 20px; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.cert__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cert__top h3 { font-size: 1.25rem; font-variation-settings: "wdth" 114; color: var(--c); }
.cert__purity { font: 800 2.4rem/1 var(--ff-display); font-variation-settings: "wdth" 116; letter-spacing: -.03em; }
.cert dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .875rem; }
.cert dt { color: var(--ink-3); }
.cert dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.cert__bar { height: 6px; border-radius: 3px; background: var(--ground-2); overflow: hidden; }
.cert__bar i { display: block; height: 100%; background: var(--c); }
.cert__demo { position: absolute; top: 14px; right: -34px; transform: rotate(35deg); width: 140px; padding: 4px 0; text-align: center; background: #FFE9A8; color: #5B4300; font: 600 .625rem/1 var(--ff-mono); letter-spacing: .14em; }
.cert__row { display: flex; gap: 10px 20px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); font-size: .875rem; }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: var(--r-md); background: #FFF6D6; color: #4D3A00; font-size: .9375rem; margin-bottom: var(--s5); }
.notice::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: #C79600; }

.verify { display: flex; gap: 10px; flex-wrap: wrap; }
.field { flex: 1 1 240px; min-height: 52px; padding: 0 18px; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: var(--paper); font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.field:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(11, 13, 18, .08); }
textarea.field { border-radius: var(--r-md); padding: 14px 18px; min-height: 120px; resize: vertical; }
select.field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: right 22px center, right 16px center; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { display: grid; gap: 6px; font-size: .875rem; font-weight: 600; }
.form-grid .field { width: 100%; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-msg { margin-top: 12px; font-weight: 600; color: var(--ok); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s7); }
.faq h2 { font-size: var(--fs-h2); font-variation-settings: "wdth" 116; }
.qa { border-top: 1px solid var(--line-2); }
.qa details { border-bottom: 1px solid var(--line-2); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font: 700 1.125rem/1.3 var(--ff-display); font-variation-settings: "wdth" 106; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor 0 0) center / 14px 2px no-repeat, linear-gradient(currentColor 0 0) center / 2px 14px no-repeat; transition: transform .3s var(--ease-out); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa details > div { padding: 0 0 22px; color: var(--ink-2); max-width: 62ch; }
.qa details > div p + p { margin-top: 10px; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; gap: var(--s5); } }

/* ---------- signup band ---------- */
.signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 32px; background: var(--ink); color: #fff; overflow: hidden; position: relative; }
.signup h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); font-variation-settings: "wdth" 118; }
.signup p { color: #C2C9D4; margin-top: 12px; max-width: 40ch; }
.signup .field { background: #161A22; border-color: #2B313D; color: #fff; }
.signup .field::placeholder { color: #8892A2; }
.signup .field:focus { border-color: var(--forest-glow); box-shadow: 0 0 0 4px rgba(125, 232, 193, .15); }
.signup :focus-visible { outline-color: var(--forest-glow); }
.signup .trace { position: absolute; right: -20px; bottom: 0; width: 46%; color: #2B313D; }
.signup .form-msg { color: var(--forest-glow); }
@media (max-width: 860px) { .signup { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.ftr { margin-top: var(--s6); padding: var(--s8) 0 var(--s6); background: var(--paper); border-top: 1px solid var(--line); font-size: .9375rem; }
.ftr__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: var(--s6); }
.ftr__logo { width: 168px; }
.ftr__about { margin-top: var(--s4); color: var(--ink-2); max-width: 34ch; }
.ftr__title { color: var(--ink-3); margin-bottom: var(--s4); }
.ftr li + li { margin-top: 10px; }
.ftr a { text-decoration: none; color: var(--ink-2); }
.ftr a:hover { color: var(--ink); text-decoration: underline; }
.ftr__ruo { margin-top: var(--s7); padding: 18px 20px; border-radius: var(--r-md); background: var(--ground); color: var(--ink-2); font-size: .8125rem; line-height: 1.6; }
.ftr__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: var(--s5); color: var(--ink-3); font-size: .8125rem; }
.ftr__seq { letter-spacing: .14em; }
@media (max-width: 860px) { .ftr__top { grid-template-columns: 1fr 1fr; } .ftr__top > :first-child { grid-column: 1 / -1; } }

/* ---------- page hero (inner pages) ---------- */
.phero { padding: clamp(36px, 5vw, 72px) 0 var(--s7); }
.phero h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem); font-variation-settings: "wdth" 120; letter-spacing: -.03em; max-width: 16ch; }
.phero p { margin-top: var(--s4); font-size: 1.1875rem; color: var(--ink-2); max-width: 54ch; }
.crumbs { display: flex; gap: 8px; color: var(--ink-3); margin-bottom: var(--s5); flex-wrap: wrap; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.prose { max-width: 70ch; color: var(--ink-2); }
.prose h2 { font-size: 1.6rem; font-variation-settings: "wdth" 112; color: var(--ink); margin: var(--s7) 0 var(--s3); }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: var(--s4); }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose li + li { margin-top: 6px; }

/* ---------- PDP ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-top: var(--s5); }
.gallery { position: sticky; top: 96px; display: grid; gap: 12px; }
.gallery__main { position: relative; aspect-ratio: 1 / 1.02; border-radius: 32px; background: radial-gradient(100% 80% at 50% 30%, #FBFCFD, var(--ground) 72%); overflow: hidden; }
.gallery__main .view { position: absolute; inset: 0; display: grid; place-items: center; }
.gallery__main .view.is-on { opacity: 1; }
.gallery__main .view--float .fv { position: relative; left: auto; bottom: auto; width: 36%; }
.gallery__main .view img.cover { width: 100%; height: 100%; object-fit: cover; }
.gallery__trace { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; color: var(--c); opacity: .5; }
.gallery__pin { position: absolute; top: 18px; left: 20px; color: var(--ink-3); z-index: 2; }
.thumbs { display: grid; grid-template-columns: repeat(3, 84px); gap: 10px; }
.thumbs button { aspect-ratio: 1; border-radius: 14px; border: 0; padding: 0; background: var(--paper); overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--line); }
.thumbs button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.thumbs img { width: 100%; height: 100%; object-fit: contain; }
.thumbs img.cover { object-fit: cover; }

.buy__kind { color: var(--ink-3); }
.buy h1 { font-size: clamp(2.6rem, 1.8rem + 3vw, 4.4rem); font-variation-settings: "wdth" 122; letter-spacing: -.035em; margin-top: 10px; }
.buy__sub { margin-top: 10px; color: var(--ink-2); }
.buy__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: var(--s5); }
.buy__price .price { font-size: 2rem; }
.buy__price .was { color: var(--ink-3); text-decoration: line-through; font-weight: 500; }
.buy__price .save { padding: 4px 10px; border-radius: var(--r-pill); background: #DDF5EA; color: var(--ok); font: 600 .8125rem/1.2 var(--ff-body); }
.buy__label { display: flex; justify-content: space-between; margin: var(--s5) 0 10px; color: var(--ink-3); }
.sizes { display: flex; gap: 8px; }
.size { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-md); background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); font-weight: 700; }
.size small { color: var(--ink-3); font-weight: 500; }
.packs { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; }
.pack { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; transition: box-shadow .2s; }
.pack:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.pack input { position: absolute; opacity: 0; pointer-events: none; }
.pack__dot { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-2); transition: box-shadow .2s; }
.pack:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.pack:has(input:checked) .pack__dot { box-shadow: inset 0 0 0 6px var(--ink); }
.pack:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.pack__t b { display: block; font-weight: 700; }
.pack__t span { font-size: .875rem; color: var(--ink-3); }
.pack__p { text-align: right; font-variant-numeric: tabular-nums; }
.pack__p b { display: block; font: 800 1.125rem/1.1 var(--ff-display); font-variation-settings: "wdth" 108; }
.pack__p s { font-size: .8125rem; color: var(--ink-3); }
.pack__flag { position: absolute; top: -9px; right: 14px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--c); color: #fff; font: 600 .625rem/1.3 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; }
.buy__cta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-top: var(--s5); }
.qty { display: inline-flex; align-items: center; height: 52px; border-radius: var(--r-pill); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.qty button { width: 44px; height: 52px; border: 0; background: transparent; font-size: 1.25rem; border-radius: var(--r-pill); }
.qty button:hover { background: var(--ground); }
.qty output, .qty input { width: 34px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; border: 0; background: transparent; }
.qty--sm { height: 38px; }
.qty--sm button { width: 34px; height: 38px; font-size: 1rem; }
.qty--sm output { width: 26px; }
.dispatch { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: .9375rem; color: var(--ink-2); }
.dispatch::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(15, 122, 85, .15); }
.dispatch b { color: var(--ink); }
.assure { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: var(--s5); }
.assure li { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--paper); font-size: .875rem; font-weight: 600; line-height: 1.25; }
.assure svg { flex: none; width: 22px; height: 22px; color: var(--c); }
.assure a { text-decoration: none; }
.buy .qa { margin-top: var(--s5); }
.buy .qa summary { font-size: 1rem; padding: 16px 0; }
.ruo-line { margin-top: var(--s4); font-size: .8125rem; color: var(--ink-3); }
@media (max-width: 960px) { .pdp { grid-template-columns: 1fr; } .gallery { position: relative; top: 0; } .gallery__main { aspect-ratio: 1 / .86; border-radius: 24px; } .gallery__main .view--float .fv { width: 27%; } .thumbs { grid-template-columns: repeat(3, 64px); } }
@media (max-width: 420px) { .assure { grid-template-columns: 1fr; } }

.sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); transform: translateY(105%); transition: transform .3s var(--ease-out); padding-bottom: env(safe-area-inset-bottom); }
.sticky-atc.is-on { transform: none; }
.sticky-atc .wrap { display: flex; align-items: center; gap: 14px; min-height: 72px; }
.sticky-atc img { width: 34px; }
.sticky-atc .t { min-width: 0; }
.sticky-atc .t b { display: block; font: 800 1.0625rem/1.1 var(--ff-display); font-variation-settings: "wdth" 112; }
.sticky-atc .t span { font-size: .8125rem; color: var(--ink-3); }
.sticky-atc .btn { margin-left: auto; }
@media (max-width: 420px) { .sticky-atc img { display: none; } .sticky-atc .btn { padding-inline: 16px 18px; } }

.mol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); }
.mol table { width: 100%; border-collapse: collapse; }
.mol th, .mol td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.mol th { width: 40%; color: var(--ink-3); font: 500 var(--fs-mono)/1.3 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; padding-right: 16px; }
.mol td { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 860px) { .mol { grid-template-columns: 1fr; } }
.tests-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.tests-strip li { padding: 14px 12px; border-radius: var(--r-md); background: var(--paper); display: grid; gap: 6px; }
.tests-strip b { font-size: .9375rem; }
.tests-strip span { font-size: .75rem; color: var(--ink-3); }
.tests-strip i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #DDF5EA; color: var(--ok); font-style: normal; font-size: .75rem; font-weight: 700; }
@media (max-width: 1000px) { .tests-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tests-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- build a box ---------- */
.builder { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: var(--s6); align-items: start; }
.picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.pick { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-1); transition: box-shadow .2s; }
.pick.has { box-shadow: inset 0 0 0 2px var(--c), var(--shadow-1); }
.pick__img { aspect-ratio: 1 / 1.25; border-radius: 14px; background: var(--ground); display: grid; place-items: end center; overflow: hidden; }
.pick__img img { width: 44%; margin-bottom: 8%; }
.pick h3 { font-size: 1.25rem; font-variation-settings: "wdth" 114; }
.pick p { font-size: .875rem; color: var(--ink-3); margin: 4px 0 10px; }
.pick__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.box { position: sticky; top: 96px; padding: 24px; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow-2); }
.box h2 { font-size: 1.6rem; font-variation-settings: "wdth" 116; }
.slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.slot { aspect-ratio: 1 / 1.3; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--line); display: grid; place-items: center; transition: background-color .25s; }
.slot.is-full { background: var(--c); box-shadow: none; }
.slot.is-full::after { content: ""; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--glow); }
.slot.is-new { animation: slotIn .4s var(--ease-out); }
@keyframes slotIn { from { transform: scale(.7); } }
.meter { position: relative; height: 6px; border-radius: 3px; background: var(--ground-2); margin: 8px 0 6px; }
.meter i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--m, 0)); border-radius: 3px; background: var(--ink); transition: transform .5s var(--ease-io); }
.meter__ticks { display: flex; justify-content: space-between; color: var(--ink-3); }
.sumrows { display: grid; gap: 8px; margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sumrows div { display: flex; justify-content: space-between; }
.sumrows .save { color: var(--ok); font-weight: 600; }
.sumrows .tot { font: 800 1.375rem/1.2 var(--ff-display); font-variation-settings: "wdth" 110; padding-top: 8px; border-top: 1px solid var(--line); }
.hint { font-size: .875rem; color: var(--ink-2); margin-top: 8px; min-height: 1.4em; }
@media (max-width: 1000px) { .builder { grid-template-columns: 1fr; } .box { position: relative; top: 0; } }
@media (max-width: 640px) { .picks { grid-template-columns: 1fr; } }

/* ---------- bulk ---------- */
.bulk-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); }
.bulk-table th, .bulk-table td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--line); }
.bulk-table thead th { color: var(--ink-3); font: 500 var(--fs-mono)/1.3 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; background: var(--ground); }
.bulk-table tbody tr:last-child td { border-bottom: 0; }
.bulk-table td b { font: 800 1.5rem/1 var(--ff-display); font-variation-settings: "wdth" 112; }
.scroll-x { position: relative; overflow-x: auto; } /* contains absolutely positioned .sr text so it cannot widen the page */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--s6); } }
.grid-vials { position: relative; min-height: 380px; }
.grid-vials .fv { width: 19%; }
.grid-vials .fv__tag { display: none; }
.panelbox { padding: clamp(20px, 3vw, 36px); background: var(--paper); border-radius: 28px; box-shadow: var(--shadow-1); }
.steps { display: grid; gap: 0; counter-reset: st; }
.steps li { position: relative; padding: 0 0 26px 52px; }
.steps li::before { counter-increment: st; content: counter(st); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font: 600 .8125rem/1 var(--ff-mono); background: var(--ground); }
.steps li::after { content: ""; position: absolute; left: 16px; top: 36px; bottom: 2px; width: 2px; background: var(--line-2); }
.steps li:last-child::after { display: none; }
.steps b { display: block; font: 700 1.125rem/1.3 var(--ff-display); font-variation-settings: "wdth" 106; }
.steps p { color: var(--ink-2); margin-top: 4px; }

.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.stat { padding: 24px; border-radius: var(--r-lg); background: var(--paper); }
.stat b { display: block; font: 800 2.6rem/1 var(--ff-display); font-variation-settings: "wdth" 118; letter-spacing: -.03em; }
.stat span { display: block; margin-top: 8px; color: var(--ink-2); }
@media (max-width: 760px) { .stats3 { grid-template-columns: 1fr; } }

/* ---------- cart drawer ---------- */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(11, 13, 18, .38); opacity: 0; transition: opacity .3s; }
.scrim.is-on { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: min(440px, 100%); background: var(--ground); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .26s var(--ease-io); box-shadow: -30px 0 60px -30px rgba(11, 13, 18, .35); }
.drawer.is-on { transform: none; transition: transform .42s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer.is-on { transform: none; transition: opacity .12s; opacity: 0; } .drawer.is-on { opacity: 1; } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer__head h2 { font-size: 1.375rem; font-variation-settings: "wdth" 114; }
.drawer__body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.drawer__foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); }
.prog { padding: 14px 16px; background: var(--paper); border-radius: var(--r-md); margin-bottom: 14px; font-size: .875rem; }
.prog p b { font-weight: 700; }
.prog .meter { margin-top: 10px; }
.prog + .prog { margin-top: -6px; }
.line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; background: var(--paper); border-radius: var(--r-md); }
.line + .line { margin-top: 8px; }
.line__img { aspect-ratio: 1 / 1.15; border-radius: 10px; background: var(--ground); display: grid; place-items: end center; overflow: hidden; }
.line__img img { width: 58%; margin-bottom: 6%; }
.line b { display: block; font: 800 1.0625rem/1.1 var(--ff-display); font-variation-settings: "wdth" 112; }
.line span { font-size: .8125rem; color: var(--ink-3); }
.line__r { display: grid; justify-items: end; gap: 8px; }
.line__r .price { font-size: 1rem; }
.rm { border: 0; background: none; padding: 2px; color: var(--ink-3); font-size: .75rem; text-decoration: underline; }
.upsell { margin-top: 18px; }
.upsell h3 { color: var(--ink-3); margin-bottom: 8px; font: 500 var(--fs-mono)/1.3 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; }
.upsell .line { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 8px 10px; }
.empty { text-align: center; padding: 48px 12px; }
.empty svg { margin: 0 auto 18px; width: 180px; color: var(--line-2); }
.empty h3 { font-size: 1.5rem; font-variation-settings: "wdth" 116; }
.empty p { color: var(--ink-2); margin: 8px 0 20px; }
.tot-rows { display: grid; gap: 6px; font-variant-numeric: tabular-nums; font-size: .9375rem; }
.tot-rows div { display: flex; justify-content: space-between; }
.tot-rows .save { color: var(--ok); font-weight: 600; }
.tot-rows .tot { font: 800 1.25rem/1.3 var(--ff-display); font-variation-settings: "wdth" 110; margin-top: 4px; }
.agree { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font-size: .8125rem; color: var(--ink-2); line-height: 1.45; }
.agree input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.co-note { margin-top: 10px; font-size: .8125rem; color: var(--ink-3); text-align: center; }

/* ---------- RUO gate ---------- */
.gate { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(239, 243, 247, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gate__card { width: min(480px, 100%); padding: 32px; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow-2); }
.gate__card img { width: 140px; }
.gate__card h2 { margin-top: 24px; font-size: 1.9rem; font-variation-settings: "wdth" 118; }
.gate__card p { margin-top: 10px; color: var(--ink-2); }
.gate__card .agree { font-size: .875rem; margin: 20px 0; }
.gate__card .trace { margin-top: 24px; height: 28px; width: 100%; color: var(--line-2); }

/* ---------- 404 ---------- */
.lost { min-height: 64vh; display: grid; align-content: center; justify-items: start; gap: 18px; }
.lost svg { width: min(560px, 100%); color: var(--ink); }
.lost h1 { font-size: clamp(2.6rem, 2rem + 3vw, 4.6rem); font-variation-settings: "wdth" 122; }

/* =================================================================== v2 additions (reference audit 2026-10-29) */

/* quality dropdown */
.dd { position: relative; }
.dd__btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; border-radius: var(--r-pill); background: transparent; font-weight: 500; font-size: .96875rem; color: var(--ink-2); transition: background-color .2s, color .2s; }
.dd__btn svg { width: 12px; height: 12px; transition: transform .25s var(--ease-out); }
.dd__btn:hover, .dd__btn[aria-expanded="true"], .dd__btn[data-current] { color: var(--ink); background: rgba(11, 13, 18, .06); }
.dd__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.dd__panel { position: absolute; top: calc(100% + 8px); left: -8px; width: 340px; padding: 8px; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow-2); display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .22s var(--ease-out), visibility 0s .22s; }
html:not(.js) .dd:focus-within .dd__panel, .dd.is-open .dd__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .22s var(--ease-out); }
.dd__panel a { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; text-decoration: none; }
.dd__panel a:hover, .dd__panel a[aria-current="page"] { background: var(--ground); }
.dd__panel b { font-weight: 600; font-size: .9375rem; }
.dd__panel span { font-size: .8125rem; color: var(--ink-3); }

/* release log */
.rlog { border-block: 1px solid var(--line); background: var(--paper); }
.rlog__in { display: flex; align-items: center; gap: 24px; min-height: 60px; overflow: hidden; }
.rlog__h { flex: none; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.rlog__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(15, 122, 85, .15); }
@media (prefers-reduced-motion: no-preference) { .rlog__dot { animation: blink 2.4s var(--ease-io) infinite; } @keyframes blink { 50% { box-shadow: 0 0 0 8px rgba(15, 122, 85, 0); } } }
.rlog__sample { margin-left: 4px; padding: 3px 8px; border-radius: var(--r-pill); background: #FFE9A8; color: #5B4300; font-size: .625rem; }
.rlog__list { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; flex: 1; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); padding-right: 40px; }
.rlog__list::-webkit-scrollbar { display: none; }
.rlog__list a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--ground); text-decoration: none; white-space: nowrap; font-size: .875rem; transition: background-color .2s; }
.rlog__list a:hover { background: var(--ground-2); }
.rlog__list i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.rlog__list .mono { color: var(--ink-3); font-size: .6875rem; }
.rlog__list .num { font-weight: 700; }
.rlog__all { flex: none; font-size: .875rem; }
@media (max-width: 760px) { .rlog__in { flex-wrap: wrap; gap: 10px; padding-block: 12px; } .rlog__list { order: 3; flex-basis: 100%; } .rlog__all { margin-left: auto; } }

/* research areas */
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.areas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.area { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; box-shadow: var(--shadow-1); transition: box-shadow .4s var(--ease-out); }
.area:hover { box-shadow: var(--shadow-2); }
.area__well { position: relative; height: 240px; background: radial-gradient(90% 120% at 50% 100%, color-mix(in srgb, var(--glow) 38%, var(--ground)) 0%, var(--ground) 62%); display: flex; justify-content: center; align-items: flex-end; padding-bottom: 18px; overflow: hidden; }
.area__v { height: 84%; width: auto; aspect-ratio: 342 / 800; margin-inline: -10px; transform: rotate(calc((var(--j) - .5) * 8deg)) translateY(calc(var(--j) * -10px)); transition: transform .5s var(--ease-out); }
.area__v:only-child { transform: none; height: 88%; }
.area__v picture, .area__v img { width: 100%; height: 100%; }
.area__v img { object-fit: contain; filter: drop-shadow(0 14px 14px rgba(11, 13, 18, .16)); }
.area:hover .area__v { transform: rotate(calc((var(--j) - .5) * 4deg)) translateY(calc(var(--j) * -10px - 8px)); }
.area:hover .area__v:only-child { transform: translateY(-8px); }
.area__body { padding: 20px 22px 24px; display: grid; gap: 8px; }
.area__body h3 { font-size: 1.5rem; font-variation-settings: "wdth" 116; }
.area__body p:not(.mono) { color: var(--ink-2); font-size: .9375rem; }
.area__body .link { margin-top: 6px; }
@media (max-width: 900px) { .areas, .areas--2 { grid-template-columns: 1fr; } .area__well { height: 200px; } }
.area__hero { position: relative; aspect-ratio: 1 / .78; }
.area__hero .fv { width: 23%; bottom: 10%; }
.area__hero .fv:nth-child(1) { left: 26%; --rot: -4deg; }
.area__hero .fv:nth-child(2) { left: 50%; --dy: -8%; --rot: 4deg; }
.area__hero .fv:only-child { left: 38%; width: 25%; }

/* vial anatomy */
.anat { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s7); align-items: center; }
.anat__stage { position: relative; display: grid; justify-items: center; padding: 40px 0 56px; }
.anat__glow { position: absolute; inset: 6% 8%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 55%, transparent), transparent); opacity: .7; }
.anat__vial { position: relative; width: min(300px, 62%); }
.anat__vial img { width: 100%; filter: drop-shadow(0 30px 28px rgba(11, 13, 18, .18)); }
.anat__shadow { width: 40%; height: 16px; margin-top: 4px; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 13, 18, .25), transparent); }
.pin { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); font: 600 .75rem/1 var(--ff-mono); box-shadow: 0 0 0 2px var(--ink), 0 6px 14px rgba(11, 13, 18, .2); }
.pin::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid var(--ink); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .pin::after { animation: ping 2.8s var(--ease-out) infinite; } .pin:nth-of-type(2n)::after { animation-delay: 1.4s; } @keyframes ping { 0% { transform: scale(.7); opacity: .6; } 70%, 100% { transform: scale(1.35); opacity: 0; } } }
.pin--static { position: relative; margin: 0; flex: none; }
.pin--static::after { display: none; }
.anat__list li, .anno__list li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.anat__list b, .anno__list b { display: block; font: 700 1.125rem/1.3 var(--ff-display); font-variation-settings: "wdth" 108; }
.anat__list p, .anno__list p { color: var(--ink-2); margin-top: 4px; }
@media (max-width: 900px) { .anat { grid-template-columns: 1fr; gap: var(--s5); } .anat__vial { width: 52%; } }

/* order journey */
.journey { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); padding-top: 4px; }
.journey__line { position: absolute; left: 28px; right: 28px; top: 31px; height: 2px; background: var(--line-2); }
.journey__line i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--plum), var(--navy), var(--cobalt), var(--wine)); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) { .js .journey.is-armed .journey__line i { transform: scaleX(0); } .js .journey.is-shown .journey__line i { transform: scaleX(1); transition: transform 1.2s var(--ease-io) .2s; } }
.journey li { position: relative; display: grid; gap: 8px; align-content: start; }
.journey__node { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); box-shadow: 0 0 0 2px var(--ink), var(--shadow-1); margin-bottom: 8px; }
.journey__node svg { width: 24px; height: 24px; }
.journey b { font: 700 1.125rem/1.25 var(--ff-display); font-variation-settings: "wdth" 108; }
.journey p { color: var(--ink-2); font-size: .9375rem; }
@media (max-width: 860px) {
  .journey { grid-template-columns: 1fr; gap: 0; }
  .journey__line { left: 28px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; }
  .journey__line i { background: linear-gradient(var(--plum), var(--navy), var(--cobalt), var(--wine)); transform-origin: 50% 0; }
  .journey li { grid-template-columns: 58px minmax(0, 1fr); column-gap: 18px; padding-bottom: 22px; }
  .journey__node { grid-row: span 2; margin: 0; }
  .js .journey.is-armed .journey__line i { transform: scaleY(0); }
  .js .journey.is-shown .journey__line i { transform: scaleY(1); }
}

/* support block */
.support { margin-top: var(--s6); padding: 22px; border-radius: var(--r-lg); background: var(--paper); display: grid; gap: 8px; max-width: 420px; }
.support > b { font: 800 1.5rem/1.1 var(--ff-display); font-variation-settings: "wdth" 116; }
.support p:not(.mono) { color: var(--ink-2); font-size: .9375rem; }
.support__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.support__links a { padding: 8px 14px; border-radius: var(--r-pill); background: var(--ground); text-decoration: none; font-size: .875rem; font-weight: 600; }
.support__links a:hover { background: var(--ground-2); }

/* closing band with drifting vials */
.closing { position: relative; min-height: 520px; display: grid; place-items: center; border-radius: 36px; background: radial-gradient(70% 70% at 50% 50%, #fff 0%, var(--ground) 100%); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; text-align: center; }
.closing__drift { position: absolute; inset: 0; pointer-events: none; }
.drift { position: absolute; transform: rotate(var(--r)); }
.drift img { width: 100%; filter: drop-shadow(0 16px 16px rgba(11, 13, 18, .14)); }
@media (prefers-reduced-motion: no-preference) { .drift { animation: drift var(--dur) var(--ease-io) var(--del) infinite alternate; } @keyframes drift { from { transform: translateY(0) rotate(var(--r)); } to { transform: translateY(-22px) rotate(calc(var(--r) * -1)); } } }
.closing__in { position: relative; z-index: 1; max-width: 560px; padding: 48px 24px; }
.closing__in h2 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem); font-variation-settings: "wdth" 122; letter-spacing: -.03em; margin-top: 12px; }
.closing__in p:not(.mono) { color: var(--ink-2); margin: 16px auto 0; max-width: 44ch; }
@media (max-width: 700px) { .closing { min-height: 0; place-items: end center; } .closing__in { padding: 150px 20px 36px; } .drift { width: 17% !important; top: 4% !important; } .drift:not(:nth-child(1)):not(:nth-child(4)) { display: none; } .drift:nth-child(1) { left: 14% !important; } .drift:nth-child(4) { left: 66% !important; } }

/* shop filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: var(--s5); }
.fchip { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 600; font-size: .9375rem; transition: box-shadow .2s, background-color .2s; }
.fchip span { font: 500 .6875rem/1 var(--ff-mono); color: var(--ink-3); }
.fchip:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.fchip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.fchip[aria-pressed="true"] span { color: #AEB6C3; }
.sort { margin-left: auto; }
.sort .field { min-height: 42px; flex: none; width: auto; font-size: .9375rem; }
@media (max-width: 640px) { .sort { margin-left: 0; width: 100%; } .sort .field { width: 100%; } }

/* kits */
.kits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.kit { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); background: var(--paper); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-1); }
.kit__well { position: relative; min-height: 280px; background: radial-gradient(100% 80% at 50% 100%, #fff, var(--ground) 70%); }
.kit__v { position: absolute; bottom: 10%; height: 74%; aspect-ratio: 342 / 800; width: auto; left: calc(50% + (var(--j) - (var(--n) - 1) / 2) * var(--s, 14%)); transform: translateX(-50%) rotate(calc((var(--j) - (var(--n) - 1) / 2) * 5deg)); z-index: calc(10 - var(--j)); }
.kit__v picture, .kit__v img { width: 100%; height: 100%; }
.kit__v img { object-fit: contain; filter: drop-shadow(0 12px 12px rgba(11, 13, 18, .16)); }
.kit__body { padding: 24px; display: grid; gap: 8px; align-content: start; }
.kit__body h3 { font-size: 1.75rem; font-variation-settings: "wdth" 118; }
.kit__body > p:not(.mono) { color: var(--ink-2); font-size: .9375rem; }
.kit__items { display: grid; gap: 4px; margin: 6px 0 4px; font-size: .9375rem; }
.kit__items li { display: flex; align-items: center; gap: 10px; }
.kit__items i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.kit__buy { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.kit__buy .price small s { color: var(--ink-3); }
@media (max-width: 1100px) { .kits { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .kit { grid-template-columns: 1fr; } .kit__well { min-height: 220px; } }

/* compare */
.cmp { width: 100%; border-collapse: collapse; min-width: 720px; font-size: .9375rem; }
.cmp th, .cmp td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp thead th { text-align: center; border-bottom: 0; }
.cmp thead th a { font: 800 1.25rem/1.1 var(--ff-display); font-variation-settings: "wdth" 114; color: var(--c); text-decoration: none; }
.cmp__v { width: 56px; margin: 0 auto 10px; }
.cmp tbody th { color: var(--ink-3); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; width: 150px; }
.cmp tbody td { font-weight: 600; }
.cmp tbody tr:last-child td { border-bottom: 0; }

/* verify */
.vh { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem); font-variation-settings: "wdth" 120; letter-spacing: -.03em; }
.phero-p { margin-top: var(--s4); font-size: 1.1875rem; color: var(--ink-2); max-width: 46ch; }
.verify--xl { margin-top: var(--s6); max-width: 560px; }
.verify--xl .field { min-height: 60px; font-size: 1.125rem; font-family: var(--ff-mono); letter-spacing: .04em; }
.verify--xl .btn { min-height: 60px; }
.verify__tag { color: var(--ink-3); margin-top: 8px; }

/* annotated certificate */
.anno { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s7); align-items: start; }
.paper { position: relative; padding: 32px; border-radius: 6px; background: #fff; box-shadow: 0 1px 0 var(--line), 0 30px 60px -30px rgba(11, 13, 18, .35); overflow: hidden; }
.paper .a { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 .6875rem/1 var(--ff-mono); vertical-align: middle; flex: none; }
.paper__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.paper__head b { font: 800 1.375rem/1.1 var(--ff-display); font-variation-settings: "wdth" 116; margin-right: auto; }
.paper__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 18px 0; }
.paper__meta dt { font: 500 .6875rem/1.3 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; }
.paper__meta dt .a { width: 18px; height: 18px; font-size: .625rem; margin: 0 0 0 8px; }
.paper__meta dd { margin: 4px 0 0; font-weight: 600; }
.paper__big { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 12px; background: var(--ground); margin-bottom: 18px; }
.paper__big b { margin-left: auto; font: 800 2.2rem/1 var(--ff-display); font-variation-settings: "wdth" 116; }
.paper__t { width: 100%; border-collapse: collapse; font-size: .875rem; }
.paper__t th { text-align: left; font: 500 .6875rem/1.3 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 8px 6px; border-bottom: 1px solid var(--line-2); }
.paper__t td { padding: 10px 6px; border-bottom: 1px solid var(--line); }
.paper__t td:first-child { font-weight: 600; }
.paper__t .ok { color: var(--ok); font-weight: 700; }
.paper__sig { position: relative; display: flex; align-items: center; margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--line-2); color: var(--ink-3); font-size: .875rem; }
.paper__sig .trace { position: absolute; right: 0; bottom: 4px; width: 120px; color: var(--line-2); }
@media (max-width: 960px) { .anno { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .paper { padding: 20px 16px; } .paper__t th:nth-child(2), .paper__t td:nth-child(2) { display: none; } }

/* glossary */
.gloss { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s7); align-items: start; }
.gloss__idx { position: sticky; top: 100px; display: grid; gap: 2px; }
.gloss__idx a { padding: 6px 12px; border-radius: 10px; text-decoration: none; font-size: .9375rem; color: var(--ink-2); }
.gloss__idx a:hover { background: var(--paper); color: var(--ink); }
.gloss__list { margin: 0; display: grid; gap: 12px; }
.gloss__list > div { padding: 22px 24px; border-radius: var(--r-lg); background: var(--paper); scroll-margin-top: 100px; }
.gloss__list > div:target { box-shadow: inset 0 0 0 2px var(--ink); }
.gloss__list dt { font: 800 1.25rem/1.2 var(--ff-display); font-variation-settings: "wdth" 112; }
.gloss__list dd { margin: 8px 0 0; color: var(--ink-2); max-width: 62ch; }
@media (max-width: 860px) { .gloss { grid-template-columns: 1fr; } .gloss__idx { position: static; display: flex; flex-wrap: wrap; gap: 6px; } .gloss__idx a { background: var(--paper); } }

/* =================================================================== v3: VIP membership */
.vhero { padding: clamp(36px, 5vw, 80px) 0 clamp(48px, 6vw, 96px); overflow: clip; }
.vhero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: center; }
.vhero__h { font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.4rem); font-variation-settings: "wdth" 120; letter-spacing: -.035em; line-height: .98; }
.vhero__h em { font-style: normal; display: block; color: var(--plum); }
.vhero__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: var(--s7); max-width: 560px; }
.vhero__stats li { padding: 14px; border-radius: var(--r-md); background: var(--paper); display: grid; gap: 4px; }
.vhero__stats b { font: 800 1.125rem/1.05 var(--ff-display); white-space: nowrap; font-variation-settings: "wdth" 114; }
.vhero__stats span { font-size: .8125rem; color: var(--ink-3); }
@media (max-width: 960px) { .vhero__grid { grid-template-columns: 1fr; } .vhero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* membership card */
.mcard { --mc-a: #fff; --mc-b: #E9EEF4; --mc-fg: var(--ink); --mc-tr: var(--line-2);
  position: relative; aspect-ratio: 1.586; width: 100%; padding: 7% 7.5%; border-radius: 6% / 9.5%; overflow: hidden; color: var(--mc-fg);
  background: radial-gradient(120% 140% at 0% 0%, var(--mc-a) 0%, var(--mc-b) 70%); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 30px 50px -24px rgba(11, 13, 18, .45), 0 2px 6px rgba(11, 13, 18, .12);
  display: grid; grid-template-rows: auto 1fr auto; container-type: inline-size; }
.mcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 46%, transparent 60%); pointer-events: none; }
.mcard__top { display: flex; justify-content: space-between; align-items: center; }
.mcard__top img { width: 34%; }
.mcard--member .mcard__top img { filter: invert(1); }
.mcard__top .mono { font-size: max(9px, 4.4cqi); letter-spacing: .18em; }
.mcard__chip { position: absolute; left: 7.5%; top: 38%; width: 13%; aspect-ratio: 1.3; border-radius: 18%; background: linear-gradient(135deg, #E9D9A6, #B89A52 55%, #F4E7BD); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.mcard__rate { align-self: end; font: 800 max(20px, 13cqi)/1 var(--ff-display); font-variation-settings: "wdth" 120; letter-spacing: -.03em; }
.mcard__rate small { display: block; margin-top: 4px; font: 500 max(8px, 3.4cqi)/1.2 var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .78; }
.mcard__trace { position: absolute; right: -2%; bottom: 8%; width: 58%; color: var(--mc-tr); }
.mcard__trace path, .mcard__trace circle { fill: none; stroke: currentColor; stroke-width: 1.6; }
.mcard__no { position: relative; justify-self: end; font-size: max(8px, 3.2cqi); letter-spacing: .14em; opacity: .7; margin-top: 4px; }
.mcard--plus { --mc-a: #2A4C7C; --mc-b: var(--navy-cap); --mc-fg: #fff; --mc-tr: var(--navy-glow); }
.mcard--vip { --mc-a: #6A4A7E; --mc-b: var(--plum-cap); --mc-fg: #fff; --mc-tr: var(--plum-glow); }
.mcard--pro { --mc-a: #2A2F3A; --mc-b: #07080B; --mc-fg: #fff; --mc-tr: var(--forest-glow); }
.mcard--pro .mcard__chip { background: linear-gradient(135deg, #DCE3EA, #8E99A6 55%, #F4F7FA); }

.mstack { position: relative; aspect-ratio: 1 / .86; }
.mstack__c { position: absolute; width: 64%; }
.mstack__c:nth-child(1) { left: 0; top: 4%; transform: rotate(-9deg); }
.mstack__c:nth-child(2) { right: 0; top: 18%; transform: rotate(7deg); z-index: 1; }
.mstack__c:nth-child(3) { left: 14%; top: 42%; transform: rotate(-2deg); z-index: 2; }
.mstack__v { position: absolute; right: 4%; bottom: 0; width: 15%; z-index: 3; }
.mstack__v img { filter: drop-shadow(0 18px 18px rgba(11, 13, 18, .2)); }

/* billing toggle */
.cycle { display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); }
.cycle button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: transparent; font-weight: 600; font-size: .9375rem; color: var(--ink-2); transition: background-color .2s, color .2s; }
.cycle button span { padding: 3px 8px; border-radius: var(--r-pill); background: #DDF5EA; color: var(--ok); font-size: .6875rem; }
.cycle button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* free tier strip + plans */
.mfree { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: var(--s6); align-items: center; padding: 20px 28px 20px 20px; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow-1); margin-bottom: var(--s5); }
.mfree h3 { font-size: 1.5rem; font-variation-settings: "wdth" 116; margin: 6px 0; }
.mfree p:not(.mono) { color: var(--ink-2); font-size: .9375rem; max-width: 60ch; }
@media (max-width: 860px) { .mfree { grid-template-columns: 1fr; } .mfree__card { width: 220px; } }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px 26px; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow-1); }
.plan--featured { background: linear-gradient(180deg, color-mix(in srgb, var(--plum-glow) 26%, #fff), #fff 46%); box-shadow: 0 0 0 2px var(--plum), var(--shadow-2); }
.plan__flag { position: absolute; top: -12px; left: 26px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--plum); color: #fff; font-size: .625rem; }
.plan__head h3 { font-size: 1.9rem; font-variation-settings: "wdth" 120; }
.plan--plus .plan__head h3 { color: var(--navy); }
.plan--vip .plan__head h3 { color: var(--plum); }
.plan__head p { color: var(--ink-2); font-size: .9375rem; margin-top: 4px; }
.plan__price { display: flex; align-items: baseline; gap: 6px; }
.plan__price b { font: 800 2.6rem/1 var(--ff-display); font-variation-settings: "wdth" 112; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan__price span { color: var(--ink-3); }
.plan__bill { font-size: .8125rem; margin-top: -8px; min-height: 2.6em; }
.plan__rate { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); background: var(--ground); }
.plan__rate b { font: 800 2rem/1 var(--ff-display); font-variation-settings: "wdth" 116; }
.plan__rate span { font-size: .8125rem; color: var(--ink-2); line-height: 1.35; }
.plan__perks { display: grid; gap: 10px; flex: 1; }
.plan__perks li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; }
.plan__perks svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--ok); }
.plan__be { color: var(--ink-3); padding-top: 12px; border-top: 1px dashed var(--line-2); }
@media (max-width: 1000px) { .plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.mconfirm { margin-top: var(--s5); padding: 20px 24px; border-radius: 20px; background: var(--ink); color: #fff; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.mconfirm b { font: 800 1.25rem/1.2 var(--ff-display); font-variation-settings: "wdth" 114; }
.mconfirm span { color: #C2C9D4; font-size: .875rem; display: block; }
.mfine { margin-top: var(--s5); font-size: .8125rem; max-width: 80ch; }

/* calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: var(--s6); padding: clamp(20px, 3vw, 40px); border-radius: 32px; background: var(--paper); box-shadow: var(--shadow-1); align-items: start; }
.calc__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calc__val { font: 800 2.6rem/1 var(--ff-display); font-variation-settings: "wdth" 116; font-variant-numeric: tabular-nums; }
.calc input[type=range] { width: 100%; margin: 18px 0 8px; height: 28px; background: transparent; -webkit-appearance: none; appearance: none; }
.calc input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ink) var(--pct, 17%), var(--ground-2) var(--pct, 17%)); }
.calc input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--ground-2); }
.calc input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ink); }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ink), 0 4px 12px rgba(11, 13, 18, .25); }
.calc input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }
.calc__ticks { display: flex; justify-content: space-between; color: var(--ink-3); }
.calc__cycle { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 24px 0 18px; }
.calc__rows { display: grid; gap: 10px; }
.crow { display: grid; grid-template-columns: 84px minmax(0, 1fr) 96px; gap: 14px; align-items: center; }
.crow__name { font-weight: 700; }
.crow__bar { position: relative; height: 34px; border-radius: 10px; background: var(--ground); overflow: hidden; }
.crow__bar i { position: absolute; inset: 0 auto 0 0; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--w, 0)); border-radius: 10px; transition: transform .45s var(--ease-out); }
.crow--member .crow__bar i { background: var(--line-2); }
.crow--plus .crow__bar i { background: var(--navy); }
.crow--vip .crow__bar i { background: var(--plum); }
.crow--pro .crow__bar i { background: var(--ink); }
.crow.is-neg .crow__bar i { background: repeating-linear-gradient(135deg, #E8C9C9 0 6px, #F3DEDE 6px 12px); }
.crow__net { text-align: right; font-weight: 700; }
.crow.is-neg .crow__net { color: #A23B3B; }
.crow.is-best .crow__name::after { content: " ★"; color: var(--plum); }
.receipt { position: relative; padding: 26px 24px 22px; background: #fff; border-radius: 6px; box-shadow: 0 1px 0 var(--line), 0 24px 48px -24px rgba(11, 13, 18, .35); transform: rotate(1.2deg); }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: radial-gradient(circle at 8px -2px, transparent 7px, #fff 7.5px) 0 0 / 16px 10px repeat-x; }
.receipt__plan { font: 800 2.4rem/1 var(--ff-display); font-variation-settings: "wdth" 120; margin: 6px 0 14px; color: var(--plum); }
.receipt dl { margin: 0; display: grid; gap: 8px; padding: 14px 0; border-block: 1px dashed var(--line-2); font-variant-numeric: tabular-nums; }
.receipt dl div { display: flex; justify-content: space-between; gap: 12px; font-size: .9375rem; }
.receipt dt { color: var(--ink-2); }
.receipt dd { margin: 0; font-weight: 600; }
.receipt dl .tot { font: 800 1.2rem/1.2 var(--ff-display); font-variation-settings: "wdth" 110; padding-top: 8px; border-top: 1px solid var(--line); }
.receipt dl .tot dt { color: var(--ink); }
.receipt__note { margin: 14px 0; font-size: .875rem; color: var(--ink-2); min-height: 2.8em; }
.receipt__fine { margin-top: 10px; font-size: .75rem; color: var(--ink-3); }
@media (max-width: 960px) { .calc { grid-template-columns: 1fr; } .receipt { transform: none; } }
@media (max-width: 480px) { .crow { grid-template-columns: 62px minmax(0, 1fr) 78px; gap: 10px; } .calc__val { font-size: 2rem; } }

/* compare table */
.mcmp { width: 100%; border-collapse: collapse; min-width: 680px; font-size: .9375rem; }
.mcmp th, .mcmp td { padding: 14px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.mcmp thead th { font: 800 1.25rem/1.1 var(--ff-display); font-variation-settings: "wdth" 116; vertical-align: bottom; }
.mcmp thead th small { display: block; margin-top: 4px; color: var(--plum); font-size: .625rem; }
.mcmp tbody th { font-weight: 500; color: var(--ink-2); width: 230px; }
.mcmp tbody td { font-weight: 600; }
.mcmp td svg { width: 20px; height: 20px; color: var(--ok); }
.mcmp .mcmp--vip { background: color-mix(in srgb, var(--plum-glow) 16%, transparent); }
.mcmp thead .mcmp--vip { border-radius: 14px 14px 0 0; color: var(--plum); }
.mcmp tbody tr:last-child td, .mcmp tbody tr:last-child th { border-bottom: 0; }

/* perks */
.mperks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.mperk { padding: 20px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); display: grid; gap: 8px; align-content: start; }
.mperk__art { height: 150px; border-radius: 16px; display: grid; place-items: center; align-content: center; gap: 8px; margin-bottom: 8px; color: #fff; text-align: center; }
.mperk__art .mono { font-size: .625rem; opacity: .8; }
.mperk__art svg { width: 54px; height: 54px; }
.mperk__big { font: 800 3rem/1 var(--ff-display); font-variation-settings: "wdth" 120; }
.mperk--credit .mperk__art { background: radial-gradient(120% 120% at 0 0, #6A4A7E, var(--plum-cap)); }
.mperk--shipping .mperk__art { background: radial-gradient(120% 120% at 0 0, #2A4C7C, var(--navy-cap)); }
.mperk--access .mperk__art { background: radial-gradient(120% 120% at 0 0, #23605E, var(--forest-cap)); }
.mperk--priority .mperk__art { background: radial-gradient(120% 120% at 0 0, #2A2F3A, #07080B); }
.mperk__q { display: flex; gap: 8px; }
.mperk__q i { width: 34px; height: 46px; border-radius: 8px; background: rgba(255, 255, 255, .14); display: grid; place-items: center; font: 600 .75rem/1 var(--ff-mono); font-style: normal; }
.mperk__q i:first-child { background: var(--forest-glow); color: var(--ink); }
.mperk h3 { font-size: 1.25rem; font-variation-settings: "wdth" 112; }
.mperk p:not(.mono) { color: var(--ink-2); font-size: .9375rem; }
@media (max-width: 1100px) { .mperks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mperks { grid-template-columns: 1fr; } }

/* load credit */
.packs-c { padding: 24px; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow-1); display: grid; gap: 16px; }
.packs-c__pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.packs-c__pills button { display: grid; gap: 2px; justify-items: center; padding: 12px 6px; border: 0; border-radius: var(--r-md); background: var(--ground); font: 800 1.25rem/1 var(--ff-display); font-variation-settings: "wdth" 110; transition: box-shadow .2s, background-color .2s; }
.packs-c__pills small { font: 600 .75rem/1 var(--ff-body); color: var(--ok); }
.packs-c__pills button[aria-checked="true"] { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.packs-c__card { padding: 22px; border-radius: 20px; background: radial-gradient(120% 140% at 0 0, #23605E, var(--forest-cap)); color: #fff; }
.packs-c__card .mono { opacity: .75; }
.packs-c__big { font: 800 3rem/1 var(--ff-display); font-variation-settings: "wdth" 118; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.packs-c__card dl { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .2); display: grid; gap: 6px; }
.packs-c__card dl div { display: flex; justify-content: space-between; }
.packs-c__card dd { margin: 0; font-weight: 700; }

/* closing */
.vclose { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding: clamp(28px, 5vw, 56px); border-radius: 32px; background: radial-gradient(120% 140% at 0 0, #6A4A7E, var(--plum-cap)); color: #fff; }
.vclose .mono { color: var(--plum-glow); }
.vclose h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); font-variation-settings: "wdth" 120; margin-top: 10px; max-width: 16ch; }
.vclose__ghost { --fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
.vclose :focus-visible { outline-color: #fff; }
@media (min-width: 961px) { .sticky-vip { display: none; } }

/* =================================================================== v3: certificates (library, lot pages, viewer) */
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font: 600 .6875rem/1 var(--ff-mono); letter-spacing: .04em; white-space: nowrap; }
.pill--ok { background: #DDF5EA; color: var(--ok); }
.pill--bad { background: #F8DEDE; color: #A23B3B; }
.pill--sample { background: #FFE9A8; color: #5B4300; }
.copy { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 4px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); vertical-align: middle; transition: background-color .2s, color .2s; }
.copy:hover { background: var(--ground); color: var(--ink); }
.copy svg { width: 15px; height: 15px; }
.copy.is-done { color: var(--ok); }
.cert__top .pill { flex: none; }

/* dot strip: every lot on a 98.5-100 scale */
.dstrip { position: relative; height: 34px; margin-top: 18px; border-radius: 10px; background: linear-gradient(90deg, #F6E3E3 0 33.3%, var(--ground) 33.3%); }
.dstrip__spec { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); opacity: .55; }
.dstrip i { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: color-mix(in srgb, var(--c, var(--ink)) 55%, #fff); box-shadow: 0 0 0 2px #fff; }
.dstrip i.is-new { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: var(--c, var(--ink)); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c, var(--ink)); }
.dstrip__scale { position: relative; display: flex; justify-content: space-between; margin-top: 8px; color: var(--ink-3); font-size: .625rem; }
.dstrip__scale span[style] { position: absolute; transform: translateX(-50%); }

/* assay list */
.alist { display: grid; gap: 2px; }
.alist li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.alist i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .75rem; font-weight: 700; background: #DDF5EA; color: var(--ok); }
.alist .is-fail i { background: #F8DEDE; color: #A23B3B; }
.alist b { display: block; font-weight: 600; font-size: .9375rem; }
.alist small { display: block; color: var(--ink-3); font-size: .75rem; }
.alist em { font-style: normal; font-weight: 700; font-size: .9375rem; text-align: right; }
.alist--plain em { font-weight: 500; color: var(--ink-2); font-family: var(--ff-mono); font-size: .75rem; }
.cbar { padding: 16px; border-radius: var(--r-md); background: var(--ground); margin-bottom: 10px; }
.cbar__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cbar__top b { font: 800 1.25rem/1 var(--ff-display); font-variation-settings: "wdth" 110; }
.cbar__top small { font: 500 .8125rem/1 var(--ff-body); color: var(--ink-3); }
.cbar__track { position: relative; height: 10px; margin-top: 12px; border-radius: 5px; background: var(--ground-2); }
.cbar__track i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--c, var(--ink)); }
.cbar__track span { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink); }

/* the certificate document */
.paper--lot .paper__big.hl, .paper--lot .hl-row td { position: relative; }
.paper--lot .paper__big.hl { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--glow, #FFE9A8) 70%, transparent); background: color-mix(in srgb, var(--glow, #FFE9A8) 20%, #fff); }
.paper--lot .hl-row td { background: color-mix(in srgb, var(--glow, #FFE9A8) 14%, #fff); }
.paper__t .bad { color: #A23B3B; font-weight: 700; }
.paper__head .mono { margin-left: auto; }

/* library hero */
.chero { padding: clamp(32px, 4vw, 64px) 0 var(--s7); }
.chero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s7); align-items: center; }
.chero h1 { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.8rem); font-variation-settings: "wdth" 120; letter-spacing: -.035em; }
.cstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: var(--s6) 0 0; max-width: 620px; }
.cstats div { padding: 14px; border-radius: var(--r-md); background: var(--paper); }
.cstats dt { font: 500 .625rem/1.3 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cstats dd { margin: 6px 0 0; font: 800 1.375rem/1 var(--ff-display); font-variation-settings: "wdth" 112; }
.scan { padding: 22px; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow-2); }
.scan__k { display: flex; align-items: center; gap: 10px; }
.scan__stage { position: relative; display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: 16px; align-items: end; margin: 16px 0; padding: 20px; border-radius: 20px; background: radial-gradient(100% 100% at 30% 100%, color-mix(in srgb, var(--glow) 35%, var(--ground)), var(--ground) 70%); }
.scan__v img { filter: drop-shadow(0 18px 16px rgba(11, 13, 18, .18)); }
.scan__doc { position: relative; padding: 16px; border-radius: 8px; background: #fff; box-shadow: 0 16px 30px -18px rgba(11, 13, 18, .4); overflow: hidden; }
.scan__pv { font: 800 2.2rem/1.1 var(--ff-display); font-variation-settings: "wdth" 116; margin: 6px 0 10px; color: var(--c); }
.scan__doc ul { display: grid; gap: 6px; font-size: .8125rem; }
.scan__doc li { display: flex; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.scan__doc li span { color: var(--ink-3); }
.scan__beam { position: absolute; left: 0; right: 0; top: 0; height: 40px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--glow) 45%, transparent), transparent); pointer-events: none; opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .scan__beam { animation: beam 4.5s var(--ease-io) 1s infinite; } @keyframes beam { 0% { transform: translateY(-40px); opacity: 0; } 15% { opacity: 1; } 60% { transform: translateY(240px); opacity: 1; } 75%, 100% { transform: translateY(260px); opacity: 0; } } }
.scan__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
@media (max-width: 960px) { .chero__grid { grid-template-columns: 1fr; } .cstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* toolbar */
.ctool { position: sticky; top: 76px; z-index: 20; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; background: color-mix(in srgb, var(--ground) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ctool__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ctool__r { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ctool__r .sort { margin: 0; }
.fchip__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.ctool__count { margin: 4px 0 18px; }
@media (max-width: 960px) { .ctool { top: 64px; } }

/* compound cards */
.ccards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.ccard { padding: 24px; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow-1); }
.ccard__top { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; }
.ccard__v { position: relative; height: 150px; border-radius: 16px; background: radial-gradient(100% 90% at 50% 100%, color-mix(in srgb, var(--glow) 40%, var(--ground)), var(--ground) 70%); }
.ccard__v picture { position: absolute; left: 50%; bottom: 8%; height: 84%; aspect-ratio: 342 / 800; transform: translateX(-50%); }
.ccard__v img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(11, 13, 18, .16)); }
.ccard h3 { font-size: 1.75rem; font-variation-settings: "wdth" 118; margin-top: 6px; }
.ccard h3 a { text-decoration: none; color: var(--c); }
.ccard h3 small { font: 500 .875rem/1 var(--ff-body); color: var(--ink-3); }
.ccard__pv { font: 800 2.4rem/1 var(--ff-display); font-variation-settings: "wdth" 116; letter-spacing: -.02em; margin-top: 8px; }
.ccard__pv small { display: block; margin-top: 6px; font: 500 .625rem/1.2 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ccard__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0 0; }
.ccard__stats div { padding: 10px 12px; border-radius: 12px; background: var(--ground); }
.ccard__stats dt { font: 500 .625rem/1.3 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ccard__stats dd { margin: 4px 0 0; font-weight: 700; font-size: .9375rem; }
.ccard__act { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.ccard__lots { margin-top: 14px; border-top: 1px solid var(--line); }
.ccard__lots summary { cursor: pointer; padding: 12px 0 4px; color: var(--ink-3); list-style: none; }
.ccard__lots summary::after { content: " +"; }
.ccard__lots[open] summary::after { content: " -"; }
.ccard__lots ul { display: grid; gap: 2px; }
.ccard__lots li { display: grid; grid-template-columns: 1fr 1.2fr auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .875rem; }
@media (max-width: 960px) { .ccards { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ccard { padding: 18px; } .ccard__top { grid-template-columns: 72px minmax(0, 1fr); } .ccard__v { height: 120px; } .ccard__lots li { grid-template-columns: 1fr auto auto; } .ccard__lots li .num:first-child { display: none; } }

/* lot table */
.lt-wrap { padding: 8px 20px; }
.lt { width: 100%; border-collapse: collapse; min-width: 820px; font-size: .9375rem; }
.lt th { text-align: left; padding: 14px 10px; font: 500 .6875rem/1.3 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-2); }
.lt td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lt tr:last-child td { border-bottom: 0; }
.lt tr.is-hit td { background: color-mix(in srgb, var(--glow) 22%, transparent); }
.lt__name { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; }
.lt__name i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.lt__name small { font-weight: 500; color: var(--ink-3); }
.lt__lot { font-size: .8125rem; }
.lt__act { text-align: right; }

/* time chart */
.tchart { width: 100%; height: auto; display: block; }
.tchart text { font: 500 12px var(--ff-mono); fill: var(--ink-3); }
.tchart__grid { stroke: var(--line); stroke-width: 1; }
.tchart__spec { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 5; }
.tchart__lbl { fill: var(--ink-2) !important; }
.tchart__pt { fill: var(--glow); stroke: var(--c); stroke-width: 4; transition: r .2s; }
.tchart a:hover .tchart__pt, .tchart a:focus .tchart__pt { r: 10; }
.tlegend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 8px; font-size: .875rem; font-weight: 600; }
.tlegend span { display: inline-flex; align-items: center; gap: 8px; }
.tlegend i { width: 12px; height: 12px; border-radius: 50%; background: var(--glow); box-shadow: inset 0 0 0 3px var(--c); }
@media (max-width: 640px) { .tchart text { font-size: 20px; } }

.cdata { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding: clamp(24px, 4vw, 44px); border-radius: 28px; background: var(--paper); box-shadow: var(--shadow-1); }
.cdata h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-variation-settings: "wdth" 116; margin: 8px 0; }
.cdata p:not(.mono) { color: var(--ink-2); max-width: 52ch; }

/* lot page */
.lotpg { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s7); align-items: start; }
.lotpg__side h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-variation-settings: "wdth" 118; margin: 8px 0 14px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.lotpg__side h1 .lt__lot { font-size: 1rem; color: var(--ink-3); }
.verdict { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-radius: var(--r-md); font-weight: 700; margin-bottom: 14px; }
.verdict::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.verdict.is-ok { background: #DDF5EA; color: var(--ok); }
.verdict.is-bad { background: #F8DEDE; color: #A23B3B; }
.lotpg__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 20px 0; }
.lotpg__meta dt { font: 500 .625rem/1.3 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.lotpg__meta dd { margin: 4px 0 0; font-weight: 600; font-size: .9375rem; }
.sib { display: grid; gap: 6px; }
.sib a, .sib button { width: 100%; display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border: 0; border-radius: 12px; background: var(--paper); text-decoration: none; font-size: .875rem; text-align: left; transition: background-color .2s; }
.sib a:hover, .sib button:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.sib--row { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 16px; }
.sib--row button { background: var(--ground); }
@media (max-width: 960px) { .lotpg { grid-template-columns: 1fr; } }

/* certificate viewer */
.lv { width: min(980px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 24px; background: var(--ground); color: var(--ink); box-shadow: 0 40px 80px -20px rgba(11, 13, 18, .5); overflow: hidden; }
.lv::backdrop { background: rgba(11, 13, 18, .45); backdrop-filter: blur(4px); }
.lv[open] { display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) { .lv[open] { animation: lvIn .32s var(--ease-out); } @keyframes lvIn { from { opacity: 0; transform: translateY(16px) scale(.98); } } }
.lv__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 22px; background: var(--paper); border-bottom: 1px solid var(--line); }
.lv__tools { display: flex; align-items: center; gap: 14px; }
.lv__body { overflow-y: auto; padding: clamp(16px, 3vw, 28px); }
.lv__body .lotpg { gap: var(--s5); }
.lv__body .lotpg__side .hero__cta { margin-top: 12px; }

/* =================================================================== v3: product page */
.gallery__main .view { opacity: 1; }
.gallery__main .view.is-anim { animation: panelIn .32s var(--ease-out); }
.gallery__main .view--doc { padding: 20px; place-items: start center; overflow: auto; }
.gallery__main .view--doc .paper { width: 100%; max-width: 520px; padding: 22px; font-size: .9em; }
.gallery__main .view--mol { padding: 32px; place-items: center; }
.gmol { width: 100%; max-width: 520px; }
.gmol__f { font: 800 clamp(1.8rem, 1.2rem + 2vw, 2.8rem)/1.1 var(--ff-display); font-variation-settings: "wdth" 112; margin: 8px 0; color: var(--c); }
.gchips { position: absolute; left: 18px; top: 52px; display: grid; gap: 8px; z-index: 3; }
.gchip { display: grid; gap: 2px; justify-items: start; padding: 10px 14px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-1); text-align: left; }
.gchip b { font: 800 1.125rem/1.1 var(--ff-display); font-variation-settings: "wdth" 110; }
.gchip b.mono { font: 600 .8125rem/1.2 var(--ff-mono); }
.gchip span { font-size: .6875rem; color: var(--ink-3); }
button.gchip { cursor: pointer; transition: transform .25s var(--ease-out); }
button.gchip:hover { transform: translateX(3px); }
button.gchip b { color: var(--c); }
.gtabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gtabs button { display: grid; gap: 6px; justify-items: center; padding: 8px 6px 10px; border: 0; border-radius: 16px; background: var(--paper); font-size: .8125rem; font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s; }
.gtabs button[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.gtabs__i { position: relative; width: 100%; height: 56px; border-radius: 10px; background: var(--ground); display: grid; place-items: center; overflow: hidden; }
.gtabs__i--vial picture { position: absolute; left: 50%; top: 6%; height: 88%; aspect-ratio: 342 / 800; transform: translateX(-50%); }
.gtabs__i--vial img { width: 100%; height: 100%; object-fit: contain; }
.gtabs__i--lineup img { width: 100%; height: 100%; object-fit: cover; }
.gtabs__i b { font: 800 1rem/1 var(--ff-display); font-variation-settings: "wdth" 112; color: var(--c); }
@media (max-width: 960px) { .gchips { top: 16px; left: 12px; } .gchip { padding: 8px 10px; } .gchip b { font-size: .9375rem; } .gtabs__i { height: 44px; } }

.buy__kind a { text-decoration: none; }
.buy__kind a:hover { text-decoration: underline; }
.buy__sub a { color: var(--ink); }
.buy__price .muted { font-size: .875rem; }
.pks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0; padding: 0; margin: 0; }
.pk { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; transition: box-shadow .2s, background-color .2s; }
.pk:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.pk input { position: absolute; opacity: 0; pointer-events: none; }
.pk:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); background: #fff; }
.pk:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.pk .sv { grid-row: span 2; }
.pk__t b { display: block; font-weight: 700; }
.pk__t span { font-size: .8125rem; color: var(--ink-3); }
.pk__p { grid-column: 2; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.pk__p b { font: 800 1.0625rem/1.1 var(--ff-display); font-variation-settings: "wdth" 108; }
.pk__p span { font-size: .75rem; color: var(--ok); font-weight: 600; }
.pk__flag { position: absolute; top: -9px; right: 12px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--c); color: #fff; font: 600 .625rem/1.3 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; }
.sv { position: relative; display: block; width: calc(22px + (var(--n) - 1) * 9px); height: 46px; }
.sv > span { position: absolute; bottom: 0; left: calc(var(--k) * 9px); width: 22px; z-index: calc(10 - var(--k)); }
.sv img { width: 100%; filter: drop-shadow(0 3px 3px rgba(11, 13, 18, .2)); }
.deliv { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md); background: var(--paper); display: grid; gap: 10px; }
.deliv__row { display: flex; gap: 10px; align-items: center; font-size: .9375rem; color: var(--ink-2); }
.deliv__row svg { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
.deliv__row b { color: var(--ink); }
.deliv__dot { flex: none; width: 8px; height: 8px; margin: 0 5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(15, 122, 85, .15); }
.vipline { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 12px 16px; border-radius: var(--r-md); background: radial-gradient(120% 140% at 0 0, #6A4A7E, var(--plum-cap)); color: #fff; text-decoration: none; font-size: .875rem; }
.vipline svg { flex: none; width: 20px; height: 20px; color: var(--plum-glow); }
.vipline b { color: var(--plum-glow); }
.vipline:focus-visible { outline-color: var(--plum); }
.assure--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.assure--3 li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; font-size: .8125rem; }
@media (max-width: 480px) { .pks { grid-template-columns: 1fr; } .assure--3 { grid-template-columns: 1fr; } .assure--3 li { flex-direction: row; } }

.pnav { position: sticky; top: 76px; z-index: 30; margin-top: var(--s7); background: color-mix(in srgb, var(--ground) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block: 1px solid var(--line); }
.pnav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.pnav a { flex: none; padding: 14px 14px; font-weight: 600; font-size: .9375rem; text-decoration: none; color: var(--ink-2); border-bottom: 2px solid transparent; }
.pnav a:hover, .pnav a.is-on { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 960px) { .pnav { top: 64px; } }

.reader { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.reader__act { display: flex; gap: 18px; align-items: center; margin-top: 16px; }
.reader__side { padding: 24px; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow-1); }
@media (max-width: 960px) { .reader { grid-template-columns: 1fr; } }
.vsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); counter-reset: none; }
.vsteps li { padding: 24px; border-radius: var(--r-lg); background: var(--paper); display: grid; gap: 8px; align-content: start; }
.vsteps__n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 600 .875rem/1 var(--ff-mono); margin-bottom: 6px; }
.vsteps b { font: 700 1.125rem/1.25 var(--ff-display); font-variation-settings: "wdth" 108; }
.vsteps p { color: var(--ink-2); font-size: .9375rem; }
@media (max-width: 860px) { .vsteps { grid-template-columns: 1fr; } }

/* =================================================================== v4: audit fixes + bulk builder + order builder + credit band */

/* buttons: the hollow pad read as an unchecked radio; links get a trailing arrow instead */
.btn::before { display: none; }
.btn { padding: 0 24px; }
a.btn:not(.btn--sm)::after { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s var(--ease-out); }
a.btn:hover::after { transform: translateX(3px); }
.btn:not(.btn--ghost):not(.btn--light)::selection { background: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .btn:not(.btn--ghost):not(.btn--light):not([disabled]) { background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%); background-size: 260% 100%; background-position: 120% 0; transition: transform .25s var(--ease-out), background-position .8s var(--ease-out), box-shadow .25s; }
  .btn:not(.btn--ghost):not(.btn--light):not([disabled]):hover { background-position: -20% 0; }
}

/* section rhythm */
.sec { padding-block: clamp(64px, 7vw, 100px); }
.sec--tight { padding-block: clamp(48px, 5vw, 76px); }
.sec__head h2 em, .faq h2 em, .obld h2 em, .crd h2 em, .bhero__h em { font-style: normal; color: var(--ink-3); }
.sec--paper { background: var(--paper); }
.sec--paper .area { background: var(--ground); box-shadow: none; }
.sec--dark { background: radial-gradient(60% 70% at 85% 0%, rgba(125, 232, 193, .10), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(201, 168, 242, .12), transparent 60%), #0A0F17; color: #E9EDF3; overflow: hidden; }
.sec--dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); }
.sec--dark .wrap { position: relative; }
.sec--dark .eyebrow, .sec--dark .sec__head p { color: #9AA4B3; }
.sec--dark .eyebrow b { color: #fff; }
.sec--dark .sec__head h2 { color: #fff; }
.sec--dark .sec__head h2 em { color: #7F8A9B; }
.sec--dark .btn--ghost { --fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.sec--dark :focus-visible { outline-color: var(--forest-glow); }
.sec--dark .test { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.sec--dark .test h3 { color: #fff; }
.sec--dark .test h3 small, .sec--dark .test p { color: #A8B1BE; }
.sec--dark .test__n { border-color: var(--forest-glow); color: var(--forest-glow); }
.sec--dark .test__spec { color: var(--forest-glow); }
.sec--dark .tests__wires { color: rgba(255, 255, 255, .18); }
.sec--dark .tests__seal b { color: #fff; }
.sec--dark .tests__seal .muted { color: #9AA4B3; }
.sec--dark .fv__shadow { background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }

/* rail: only where its labels have room, so it never reads as a stray rule */
.rail { display: none !important; }
@media (min-width: 1640px) { .rail { display: block !important; } .rail__node span { display: inline !important; } }

/* floating vials: lift the whole unit so the contact shadow travels with the vial */
.fv { transform: translateY(var(--dy)); }
.fv__img { transform: rotate(var(--rot)); }
.fv__shadow { bottom: -3%; }

/* product cards */
.card__lot { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .9); font-size: .625rem; letter-spacing: .06em; color: var(--ink-2); box-shadow: var(--shadow-1); }
.card__lot i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.card__strip { height: 30px; }
.card__area { color: var(--ink-3); font-size: .625rem; }
.card__btns { display: inline-flex; gap: 6px; }
.card__view { min-height: 42px; }
@media (max-width: 520px) { .card__btns { width: 100%; } .card__btns .btn { flex: 1; padding: 0 10px; } .card__lot { font-size: .5625rem; padding: 4px 8px; } }

/* ticker */
.rlog__list { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 60px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 60px), transparent); padding-right: 0; }
@media (prefers-reduced-motion: no-preference) {
  .rlog__list[data-marquee] { overflow: hidden; }
  .rlog__list[data-marquee] li { animation: tick 28s linear infinite; }
  .rlog__list[data-marquee]:hover li, .rlog__list[data-marquee]:focus-within li { animation-play-state: paused; }
  @keyframes tick { to { transform: translateX(calc(-1 * var(--setw, 0px))); } }
}
@media (prefers-reduced-motion: reduce) { .rlog__list li[aria-hidden] { display: none; } }

/* stats band */
.stats4 { background: var(--paper); border-block: 1px solid var(--line); }
.stats4__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.stats4__grid > div { padding: 28px 24px; border-left: 1px solid var(--line); }
.stats4__grid > div:first-child { border-left: 0; padding-left: 0; }
.stats4__grid dt { color: var(--ink-3); }
.stats4__grid dd { margin: 10px 0 0; display: grid; gap: 6px; }
.stats4__grid b { font: 800 clamp(2.2rem, 1.6rem + 2vw, 3.2rem)/1 var(--ff-display); font-variation-settings: "wdth" 118; letter-spacing: -.03em; }
.stats4__grid span { color: var(--ink-2); font-size: .9375rem; }
.stats4__grid .link { font-size: .875rem; }
@media (max-width: 860px) { .stats4__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats4__grid > div { padding: 20px 16px; border-left: 0; border-top: 1px solid var(--line); } .stats4__grid > div:nth-child(-n+2) { border-top: 0; } .stats4__grid > div:nth-child(even) { border-left: 1px solid var(--line); } .stats4__grid > div:first-child { padding-left: 16px; } }

/* homepage order builder */
.obld { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s7); align-items: center; padding: clamp(24px, 4vw, 52px); border-radius: 32px; background: var(--paper); box-shadow: var(--shadow-1); }
.obld h2 { font-size: var(--fs-h2); font-variation-settings: "wdth" 118; }
.obld__copy > p:not(.eyebrow) { color: var(--ink-2); margin-top: var(--s4); max-width: 42ch; }
.obld__card { padding: 20px; border-radius: 24px; background: var(--ground); display: grid; gap: 14px; }
.obld__picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.obld__picks button { display: grid; justify-items: center; gap: 4px; padding: 8px 4px 10px; border: 0; border-radius: 14px; background: var(--paper); font-weight: 700; font-size: .8125rem; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s; }
.obld__picks button span { position: relative; height: 48px; width: 100%; }
.obld__picks picture { position: absolute; left: 50%; top: 0; height: 100%; aspect-ratio: 342 / 800; transform: translateX(-50%); }
.obld__picks img { width: 100%; height: 100%; object-fit: contain; }
.obld__picks button[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--c); color: var(--c); }
.obld__stage { position: relative; height: 200px; border-radius: 18px; background: radial-gradient(90% 100% at 50% 100%, color-mix(in srgb, var(--glow) 42%, #fff), #fff 70%); overflow: hidden; }
.obld__v { position: absolute; bottom: 14%; height: 72%; aspect-ratio: 342 / 800; left: calc(50% + (var(--k) - (var(--n, 1) - 1) / 2) * 13%); transform: translateX(-50%) rotate(calc((var(--k) - (var(--n, 1) - 1) / 2) * 4deg)); z-index: calc(10 - var(--k)); transition: opacity .35s var(--ease-out), transform .45s var(--ease-out); }
.obld__v picture, .obld__v img { width: 100%; height: 100%; object-fit: contain; }
.obld__v img { filter: drop-shadow(0 12px 12px rgba(11, 13, 18, .18)); }
.obld__v.is-off { opacity: 0; transform: translateX(-50%) translateY(16px); }
.obld__more { position: absolute; right: 14px; bottom: 12px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: .6875rem; }
.obld__qty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.obld__qty button { display: grid; gap: 2px; padding: 10px 6px; border: 0; border-radius: 12px; background: var(--paper); font-weight: 700; font-size: .875rem; box-shadow: inset 0 0 0 1.5px var(--line); }
.obld__qty small { font-size: .6875rem; color: var(--ok); font-weight: 600; }
.obld__qty button[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.obld__sum { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.obld__sum > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.obld__sum s { color: var(--ink-3); }
.obld__sum b { font: 800 1.9rem/1 var(--ff-display); font-variation-settings: "wdth" 112; }
.obld__sum span { font-size: .8125rem; font-weight: 700; color: var(--ok); }
.obld__ship { font-size: .8125rem; color: var(--ink-2); }
.obld__ship .meter { margin-top: 8px; }
@media (max-width: 960px) { .obld { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .obld__qty, .obld__picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* load-credit band */
.crd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 32px; background: radial-gradient(60% 80% at 100% 0%, rgba(125, 232, 193, .22), transparent 60%), radial-gradient(70% 80% at 0% 100%, rgba(142, 201, 255, .18), transparent 60%), var(--paper); box-shadow: var(--shadow-1); }
.crd h2 { font-size: var(--fs-h2); font-variation-settings: "wdth" 118; }
.crd__copy > p:not(.eyebrow) { color: var(--ink-2); margin: var(--s4) 0 var(--s5); max-width: 44ch; }
.crd__art { position: relative; min-height: 340px; display: grid; place-items: center; }
.crd__card { position: relative; width: min(380px, 92%); aspect-ratio: 1.586; padding: 7%; border-radius: 22px; color: #fff; background: radial-gradient(120% 140% at 0 0, #23605E, var(--forest-cap)); box-shadow: 0 40px 60px -30px rgba(7, 39, 39, .6), 0 2px 6px rgba(11, 13, 18, .14); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; transform: rotate(-6deg); }
.crd__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .2) 46%, transparent 60%); }
@media (prefers-reduced-motion: no-preference) { .crd__card::after { animation: sheen 5.5s var(--ease-io) infinite; } @keyframes sheen { 0%, 55% { transform: translateX(-70%); } 85%, 100% { transform: translateX(70%); } } }
.crd__top { display: flex; justify-content: space-between; align-items: center; }
.crd__top img { width: 32%; }
.crd__top .mono { font-size: .625rem; letter-spacing: .16em; opacity: .85; }
.crd__big { align-self: end; font: 800 clamp(2.2rem, 1.6rem + 2vw, 3rem)/1 var(--ff-display); font-variation-settings: "wdth" 118; }
.crd__sub { font-size: .6875rem; letter-spacing: .1em; opacity: .8; margin-top: 4px; }
.crd__card .mcard__trace { color: var(--forest-glow); }
.crd__chip { position: absolute; top: 8%; right: 2%; display: grid; gap: 2px; padding: 12px 16px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-2); transform: rotate(5deg); }
.crd__chip b { font: 800 1.5rem/1 var(--ff-display); font-variation-settings: "wdth" 112; color: var(--ok); }
.crd__chip span { font-size: .625rem; color: var(--ink-3); }
.crd__chip.is-pop { animation: pop .45s var(--ease-out); }
@keyframes pop { 40% { transform: rotate(5deg) scale(1.12); } }
.crd__rows { position: absolute; left: 0; bottom: 4%; margin: 0; display: grid; gap: 4px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-1); font-size: .8125rem; min-width: 170px; }
.crd__rows div { display: flex; justify-content: space-between; gap: 16px; }
.crd__rows dt { color: var(--ink-3); }
.crd__rows dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.crd .packs-c__pills { max-width: 460px; }
@media (max-width: 960px) { .crd { grid-template-columns: 1fr; } .crd__art { min-height: 300px; } }

/* search */
.srch { width: min(680px, calc(100% - 24px)); margin-top: 10vh; padding: 0; border: 0; border-radius: 22px; background: var(--paper); box-shadow: 0 40px 80px -20px rgba(11, 13, 18, .45); }
.srch::backdrop { background: rgba(11, 13, 18, .35); backdrop-filter: blur(4px); }
.srch__bar { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 20px; border-bottom: 1px solid var(--line); }
.srch__bar > span svg { width: 22px; height: 22px; color: var(--ink-3); }
.srch__bar input { flex: 1; min-height: 52px; border: 0; background: transparent; font-size: 1.125rem; outline: none; }
.srch__res { max-height: 60vh; overflow-y: auto; padding: 10px; display: grid; gap: 2px; }
.srch__res a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 14px; text-decoration: none; }
.srch__res a:hover, .srch__res a:focus-visible { background: var(--ground); outline: none; }
.srch__res .ic { height: 44px; display: grid; place-items: center; border-radius: 10px; background: var(--ground); font: 600 .625rem/1 var(--ff-mono); color: var(--ink-3); overflow: hidden; }
.srch__res .ic img { height: 40px; width: auto; }
.srch__res b { display: block; }
.srch__res small { color: var(--ink-3); }
.srch__res .muted { font-size: .875rem; }
.srch__empty { padding: 20px; color: var(--ink-3); }

/* related rail under the buy box */
.xrail { margin-top: var(--s7); }
.xrail__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.xrail__head h2 { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.xrail__nav { display: flex; gap: 6px; }
.xrail__nav .icon-btn { width: 38px; height: 38px; background: var(--paper); font-size: 1.25rem; }
.xrail__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.xrail__track::-webkit-scrollbar { display: none; }
.xr { scroll-snap-align: start; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); }
.xr__img { position: relative; height: 84px; border-radius: 12px; background: radial-gradient(90% 100% at 50% 100%, color-mix(in srgb, var(--glow) 40%, var(--ground)), var(--ground) 70%); }
.xr__img picture { position: absolute; left: 50%; bottom: 6%; height: 86%; aspect-ratio: 342 / 800; transform: translateX(-50%); }
.xr__img img { width: 100%; height: 100%; object-fit: contain; }
.xr .mono { font-size: .625rem; }
.xr__name { display: block; font: 800 1.125rem/1.2 var(--ff-display); font-variation-settings: "wdth" 112; text-decoration: none; color: var(--c); }
.xr__name small { font: 500 .75rem/1 var(--ff-body); color: var(--ink-3); }
.xr__meta { display: flex; gap: 10px; font-size: .8125rem; margin-top: 2px; }
.xr__meta .num { font-weight: 700; }
.xr__meta .mono { color: var(--ok); }
@media (max-width: 520px) { .xrail__track { grid-auto-columns: 86%; } }

/* =================================================================== bulk builder */
.bhero { padding: clamp(28px, 4vw, 56px) 0 var(--s6); }
.bhero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: center; }
.bhero__h { font-size: clamp(2.6rem, 1.6rem + 3.8vw, 5rem); font-variation-settings: "wdth" 120; letter-spacing: -.035em; line-height: .98; }
.bhero__h em { display: block; }
.bhero__card { padding: 28px; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow-2); }
.bhero__ex { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--line-2); font-size: .9375rem; color: var(--ink-2); }
.bhero__ex s { color: var(--ink-3); margin: 0 4px; }
@media (max-width: 960px) { .bhero__grid { grid-template-columns: 1fr; } }

.lad { position: relative; height: 92px; margin: 22px 8px 4px; }
.lad__track { position: absolute; left: 0; right: 0; top: 12px; height: 8px; border-radius: 4px; background: var(--ground-2); overflow: hidden; }
.lad__fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--fill, 0)); background: linear-gradient(90deg, var(--plum), var(--navy), var(--cobalt), var(--wine)); transition: transform .5s var(--ease-out); }
.lad__node { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; text-align: center; padding-top: 32px; min-width: 56px; }
.lad__node::before { content: ""; position: absolute; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--line-2); transition: box-shadow .3s, background-color .3s; }
.lad__node b { font: 800 1rem/1.1 var(--ff-display); font-variation-settings: "wdth" 110; color: var(--ink-3); transition: color .3s; }
.lad__node span { font-size: .625rem; color: var(--ink-3); margin-top: 2px; }
.lad__node small { font-size: .625rem; color: var(--ink-3); }
.lad__node span, .lad__node small { white-space: nowrap; }
.lad__node.is-on::before { background: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px rgba(11, 13, 18, .08); }
.lad__node.is-on b { color: var(--ink); }
.lad__node.is-lock::before { animation: lock .5s var(--ease-out); }
@keyframes lock { 40% { transform: scale(1.45); } }
@media (max-width: 640px) { .lad__node span { display: none; } .card__badge { display: none; } }
@media (max-width: 520px) { .lad__node small { display: none; } .lad__node span { font-size: .5625rem; } .lad__node { min-width: 44px; } .lad__node b { font-size: .875rem; } }

.bk { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s5); align-items: start; }
.bk__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.bkc { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 16px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); transition: box-shadow .25s; }
.bkc.has { box-shadow: inset 0 0 0 2px var(--c), var(--shadow-1); }
.bkc__img { position: relative; height: 180px; border-radius: 16px; background: radial-gradient(90% 100% at 50% 100%, color-mix(in srgb, var(--glow) 40%, var(--ground)), var(--ground) 70%); }
.bkc__img picture { position: absolute; left: 50%; bottom: 8%; height: 80%; aspect-ratio: 342 / 800; transform: translateX(-50%); }
.bkc__img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(11, 13, 18, .16)); }
.bkc__lot { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .9); font-size: .5625rem; color: var(--ok); }
.bkc h3 { font-size: 1.375rem; font-variation-settings: "wdth" 116; color: var(--c); }
.bkc h3 small { font: 500 .8125rem/1 var(--ff-body); color: var(--ink-3); }
.bkc__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.bkc__price b { font: 800 1.5rem/1 var(--ff-display); font-variation-settings: "wdth" 110; display: inline-block; }
.bkc__price s { color: var(--ink-3); font-size: .875rem; }
.bkc__price .muted { font-size: .75rem; }
.bkc__price b.is-roll { animation: roll .5s var(--ease-out); }
@keyframes roll { 0% { transform: translateY(-60%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.bkc__ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bkc__ctl .qty { height: 44px; }
.bkc__ctl .qty button { height: 44px; width: 40px; }
.bkc__quick { display: flex; gap: 6px; }
.bkc__quick button { height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--ground); font-weight: 700; font-size: .8125rem; }
.bkc__quick button:hover { background: var(--ground-2); }
.bkc__line { margin-top: 10px; color: var(--ink-3); font-size: .6875rem; }
.bkc.has .bkc__line { color: var(--ink); }
.bks { position: sticky; top: 96px; padding: 22px; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow-2); }
.bks__head { display: flex; justify-content: space-between; align-items: baseline; }
.bks__head h3 { font-size: 1.5rem; font-variation-settings: "wdth" 116; }
.bks .lad { margin-inline: 14px; height: 64px; }
.bks .lad__node span, .bks .lad__node small { display: none; }
.bks .lad__node { min-width: 0; }
.bks .lad__node b { font-size: .8125rem; }
.bks__nudge { margin: 10px 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--ground); font-size: .875rem; color: var(--ink-2); }
.bks__nudge b { color: var(--ink); }
.bks__lines { display: grid; gap: 6px; margin-bottom: 12px; }
.bks__lines li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .875rem; }
.bks__lines li i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.bks__lines li .num { font-weight: 700; }
.bks__lines li.is-new { animation: lineIn .3s var(--ease-out); }
@keyframes lineIn { from { opacity: 0; transform: translateX(12px); } }
.bks__lines .rm { font-size: .75rem; }
.bks__tot { margin: 0 0 14px; display: grid; gap: 6px; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.bks__tot div { display: flex; justify-content: space-between; }
.bks__tot dt { color: var(--ink-2); }
.bks__tot dd { margin: 0; font-weight: 600; }
.bks__tot .save dd, .bks__tot .save dt { color: var(--ok); }
.bks__tot .tot { padding-top: 8px; border-top: 1px solid var(--line); font: 800 1.375rem/1.2 var(--ff-display); font-variation-settings: "wdth" 110; }
.bks__tot .tot dt { color: var(--ink); }
.bks .btn + .btn { margin-top: 8px; }
.bkq { margin-top: var(--s5); }
.bkq__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.bkq__head h3 { font-size: 1.5rem; font-variation-settings: "wdth" 116; margin-top: 4px; }
.bkq__id { padding: 6px 12px; border-radius: var(--r-pill); background: var(--ground); font-size: .75rem; }
.bkq__manifest { width: 100%; min-height: 110px; margin-bottom: 14px; font-family: var(--ff-mono); font-size: .8125rem; background: var(--ground); }
.bkbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 95%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.bkbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
.bkbar b { display: block; font: 800 1.0625rem/1.2 var(--ff-display); font-variation-settings: "wdth" 110; }
.bkbar .muted { font-size: .8125rem; }
@media (prefers-reduced-motion: no-preference) { .bkbar:not([hidden]) { animation: barUp .35s var(--ease-out); } @keyframes barUp { from { transform: translateY(100%); } } }
@media (min-width: 1101px) { .bkbar { display: none; } }
@media (max-width: 1100px) { .bk { grid-template-columns: 1fr; } .bks { position: relative; top: 0; } }
@media (max-width: 640px) { .bk__cards { grid-template-columns: 1fr; } .bkc { grid-template-columns: 96px minmax(0, 1fr); } .bkc__img { height: 150px; } }

/* =================================================================== mobile and polish fixes */
.cert:has(.cert__demo) .cert__top { padding-right: 58px; }
.mol { align-items: start; }
.tabs { -webkit-mask-image: none; }
@media (max-width: 860px) {
  .tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 30px; }
  .coa-grid, .grid3 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
  .coa-grid > *, .grid3 > * { scroll-snap-align: start; }
  .tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tier { min-width: 0; }
}
@media (max-width: 960px) {
  .stage > .fv:nth-of-type(1) { left: 4%; }
  .gallery__main { aspect-ratio: 1 / 1; }
  .gallery__main .view--float .fv { width: 34%; }
  .gchips { top: auto; bottom: 14px; left: 12px; right: 12px; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
  .gchip { padding: 7px 9px; }
  .gchip b { font-size: .875rem; }
  .gchip span { font-size: .5625rem; }
  .gallery__trace { display: none; }
}
@media (max-width: 520px) { .proof li { font-size: .875rem; } }

/* =================================================================== v4b: credit band, a charge card on a circuit */
[data-credit-band][data-tier="navy"] { --t: var(--navy); --t-cap: var(--navy-cap); --t-glow: var(--navy-glow); }
[data-credit-band][data-tier="cobalt"] { --t: var(--cobalt); --t-cap: var(--cobalt-cap); --t-glow: var(--cobalt-glow); }
[data-credit-band][data-tier="wine"] { --t: var(--wine); --t-cap: var(--wine-cap); --t-glow: var(--wine-glow); }
[data-credit-band][data-tier="plum"] { --t: var(--plum); --t-cap: var(--plum-cap); --t-glow: var(--plum-glow); }
.crd { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--t-glow) 30%, transparent), transparent 60%), radial-gradient(70% 80% at 0% 100%, rgba(142, 201, 255, .14), transparent 60%), var(--paper); transition: background-color .4s; }
.crd h2 u { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 92% / 100% 3px no-repeat; }
.crd__tiers { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 18px; background: var(--ground); max-width: 460px; }
.crd__tiers button { position: relative; z-index: 1; display: grid; gap: 2px; justify-items: center; padding: 10px 4px; border: 0; border-radius: 13px; background: transparent; transition: color .2s .17s; }
.crd__tiers b { font: 800 1.25rem/1 var(--ff-display); font-variation-settings: "wdth" 110; font-variant-numeric: tabular-nums; }
.crd__tiers small { font-size: .75rem; font-weight: 700; color: var(--ok); transition: color .2s .17s; }
.crd__tiers button[aria-checked="true"] { color: #fff; }
.crd__tiers button[aria-checked="true"] small { color: var(--t-glow); }
.crd__tiers button[data-pay="800"]::after { content: "Best"; position: absolute; top: -8px; right: 6px; padding: 2px 6px; border-radius: var(--r-pill); background: #F6D27A; color: #4B3600; font: 600 .5625rem/1.3 var(--ff-mono); letter-spacing: .06em; text-transform: uppercase; }
.crd__pill { position: absolute; z-index: 0; left: 0; top: 0; width: var(--pill-w, 0); height: var(--pill-h, 0); transform: translate(var(--pill-x, 0), var(--pill-y, 0)); border-radius: 13px; background: var(--t); box-shadow: 0 8px 18px -8px var(--t); transition: transform .44s cubic-bezier(.33, 1, .68, 1), width .44s cubic-bezier(.33, 1, .68, 1), background-color .44s; }
html:not(.js) .crd__tiers button[aria-checked="true"] { background: var(--t); }
.crd__cta .mono { font-variant-numeric: tabular-nums; min-width: 3.6ch; text-align: right; }
.crd__fine { margin-top: 14px; font-size: .75rem; color: var(--ink-3); max-width: 52ch; }
.crd__art { min-height: 360px; perspective: 1000px; }
.crd__back { position: absolute; width: min(360px, 84%); aspect-ratio: 1.586; border-radius: 22px; background: radial-gradient(120% 140% at 0 0, color-mix(in srgb, var(--t-glow) 60%, #fff), color-mix(in srgb, var(--t-glow) 30%, var(--ground))); transform: translate(10%, -12%) rotate(9deg); transition: background .5s; }
@media (prefers-reduced-motion: no-preference) { .crd__back.float { animation: backFloat 7s var(--ease-io) -2s infinite alternate; } @keyframes backFloat { to { transform: translate(10%, -14%) rotate(12deg); } } }
.crd .crd__card { background: radial-gradient(120% 140% at 0 0, color-mix(in srgb, var(--t) 70%, #fff 8%), var(--t-cap)); box-shadow: 0 40px 60px -30px color-mix(in srgb, var(--t-cap) 70%, transparent), 0 2px 6px rgba(11, 13, 18, .14); transform: rotate(-5deg); transition: background .5s, box-shadow .5s; }
@media (prefers-reduced-motion: no-preference) { .crd .crd__card { animation: cardFloat 7s var(--ease-io) infinite alternate; } @keyframes cardFloat { to { transform: translateY(-12px) rotate(-3deg); } } }
.crd .crd__card::after { display: none; }
.crd__top .mono { font-size: .5625rem; }
.crd__odo { align-self: end; display: flex; font: 800 clamp(2.4rem, 1.8rem + 2vw, 3.2rem)/1 var(--ff-mono); letter-spacing: -.04em; height: 1.06em; }
.od__w { position: relative; display: inline-block; width: .62em; height: 1.06em; overflow: hidden; }
.od__s { position: absolute; left: 0; top: 0; display: grid; transition: transform var(--od-t, .5s) cubic-bezier(.16, 1, .3, 1) var(--od-d, 0s); }
.od__s i { font-style: normal; height: 1.06em; line-height: 1.06em; text-align: center; }
.od__c { display: inline-block; width: .24em; text-align: center; }
.od__w.is-in { animation: odIn .42s cubic-bezier(.16, 1, .3, 1); }
@keyframes odIn { from { transform: translateY(-.34em); opacity: 0; } }
.crd__sub { margin-top: 6px; font-size: .6875rem; letter-spacing: .08em; opacity: .85; }
.crd__trace { position: absolute; left: 6%; top: 27%; width: 62%; height: auto; overflow: visible; }
.crd__trace path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.crd__trace-bg { stroke: rgba(255, 255, 255, .18); }
.crd__trace-fg { stroke: var(--t-glow); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--fill, .4)); transition: stroke-dashoffset .6s var(--ease-out); }
.crd__trace circle { fill: var(--t-cap); stroke: rgba(255, 255, 255, .5); stroke-width: 3; }
.crd__trace .crd__end { stroke: var(--t-glow); }
.crd__dot { position: absolute; left: 6%; top: 27%; width: 62%; aspect-ratio: 476 / 96; pointer-events: none; }
.crd__dot::before { content: ""; position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--t-glow) 50%, transparent), 0 0 18px 4px var(--t-glow); left: calc(var(--dx, 5%)); top: calc(var(--dy2, 73%)); opacity: 0; }
.crd__dot.is-go::before { animation: dotGo .6s var(--ease-io); }
@keyframes dotGo { 0% { left: 5%; top: 73%; opacity: 1; } 27% { left: 31.5%; top: 73%; } 33% { left: 37%; top: 44%; } 63% { left: 63%; top: 44%; } 69% { left: 69%; top: 73%; } 100% { left: 95%; top: 73%; opacity: 1; } }
.crd__seal { position: absolute; right: 6%; top: 36%; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: #fff; color: var(--t-cap); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .4); }
.crd__seal b { font: 800 1.25rem/1 var(--ff-display); font-variation-settings: "wdth" 110; }
.crd__seal small { font-size: .5rem; letter-spacing: .14em; color: var(--ink-3); }
.crd__ring { position: absolute; inset: 5px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--t) 50%, transparent); }
@media (prefers-reduced-motion: no-preference) { .crd__ring { animation: spin 30s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } }
.crd__seal.is-stamp { animation: stamp .46s var(--ease-out); }
@keyframes stamp { 0% { transform: scale(1.24) rotate(-6deg); opacity: 0; } 60% { transform: scale(.965) rotate(1.2deg); opacity: 1; } 100% { transform: none; } }
.crd__foot { position: relative; font-size: .625rem; letter-spacing: .08em; opacity: .85; }
.crd__shine { position: absolute; inset: 0; background: linear-gradient(104deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%); transform: translateX(-120%); pointer-events: none; }
.crd__shine.is-go { animation: shine .78s var(--ease-out); }
@keyframes shine { to { transform: translateX(120%); } }
@media (max-width: 960px) { .crd__art { min-height: 300px; } .crd__seal { width: 60px; height: 60px; } .crd__seal b { font-size: 1rem; } }
@media (max-width: 420px) { .crd__tiers b { font-size: 1.0625rem; } }
.crd__top .mono { white-space: nowrap; }
@media (max-width: 560px) { .crd__no { display: none; } .crd__foot { font-size: .5625rem; letter-spacing: .04em; } .crd__sub { font-size: .625rem; } }
@media (prefers-reduced-motion: reduce) { .crd__pill, .od__s, .crd__trace-fg { transition: none; } }

/* print */
@media print { .hdr, .announce, .drawer, .scrim, .sticky-atc, .rail, .gate, .signup { display: none !important; } body { background: #fff; } }

/* =================================================================== v6: sizes, blends (2026-10-29) */
/* channels per compound/size are generated by build.mjs from each label family */
.sizes--pick { flex-wrap: wrap; border: 0; padding: 0; margin: 0; min-width: 0; }
.size--opt { position: relative; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 16px; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .2s, background-color .2s; }
.size--opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.size--opt small { font-variant-numeric: tabular-nums; }
.size--opt:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.size--opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--c, var(--ink)); background: color-mix(in srgb, var(--glow, #fff) 14%, var(--paper)); }
.size--opt:has(input:checked) small { color: var(--c, var(--ink)); }
.size--opt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.blend { list-style: none; display: grid; gap: 8px; padding: 0; margin: 0 0 12px; }
.blend li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--ground); box-shadow: inset 3px 0 0 var(--c, var(--ink)); }
.blend .mono { font-size: .75rem; color: var(--ink-3); }
.price__from { display: block; margin-bottom: 3px; font: 500 .625rem/1 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* =================================================================== v8: 55 compounds in eight families (2026-10-29) */
@media (min-width: 1101px) { .areas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 901px) and (max-width: 1100px) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lineup__more { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: var(--s6); }
.lineup__more .muted { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .875rem; }
.lineup__more .muted a, .cmp__nav a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); text-decoration: none; font-weight: 600; }
.lineup__more .muted a:hover { color: var(--c); }
.lineup__more i, .picks__group i, .bk__group i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.picks__group, .bk__group { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: var(--s4) 0 0; font: 800 1.125rem/1.2 var(--ff-display); font-variation-settings: "wdth" 110; }
.picks__group:first-child, .bk__group:first-child { margin-top: 0; }
.cmp__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s6); }
.cmp__block { scroll-margin-top: 96px; margin-top: var(--s7); }
.cmp__block:first-of-type { margin-top: 0; }
.cmp__h { font: 800 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--ff-display); font-variation-settings: "wdth" 112; margin-bottom: var(--s4); }

/* =================================================================== v9: Research Credit token (2026-10-29) */
.token { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 18px rgba(11, 13, 18, .28)); }
.token--xs { width: 20px; height: 20px; flex: none; filter: drop-shadow(0 1px 2px rgba(11, 13, 18, .3)); }
.token--sm { width: 26px; height: 26px; flex: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
/* a slow quarter-turn wobble, so the rim catches light; never tied to the pointer */
@media (prefers-reduced-motion: no-preference) { .token--spin { animation: coinTurn 9s var(--ease-io) infinite; } }
@keyframes coinTurn { 0%, 100% { transform: rotateY(0) rotate(-6deg); } 50% { transform: rotateY(28deg) rotate(4deg); } }
.crd__coin { position: absolute; z-index: 3; perspective: 600px; }
.crd__coin--a { width: 25%; left: -7%; bottom: -6%; }
.crd__coin--b { width: 17%; right: 2%; top: -4%; z-index: 0; opacity: .9; filter: blur(.4px); }
.crd__eyebrow { display: flex; align-items: center; gap: 10px; }
.mstack__coin { position: absolute; z-index: 4; width: 17%; left: -3%; bottom: -8%; perspective: 600px; }
.vipline .token--sm { margin: -3px 0; }
.earn { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: var(--r-md); background: radial-gradient(120% 140% at 0 0, #6A4A7E, var(--plum-cap)); color: #fff; font-size: .8125rem; line-height: 1.35; text-decoration: none; }
.earn b { color: var(--plum-glow); }
@media (max-width: 960px) { .crd__coin--a { width: 20%; left: auto; right: 2%; top: 2%; bottom: auto; } .crd__coin--b { display: none; } }

/* =================================================================== v10: PDP research sections (2026-10-29)
   Mechanism map + literature timeline. The connectors are the label circuit: traces in the compound colour that
   draw in once, pads that pulse slowly, never tied to the pointer. Data: src/data/research (PubMed-verified). */
.sec--lab .sec__head h2 { max-width: 18ch; }
.sec--lab .sec__head h2 em { color: var(--c); }
.sec--lab .sec__head p { max-width: 52ch; }
.lab__note { margin-top: var(--s4); font-size: .8125rem; color: var(--ink-3); }
.labi { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; color: var(--c); background: color-mix(in srgb, var(--glow) 24%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 16%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--c) 60%, transparent); }
.labi svg { width: 22px; height: 22px; }
.cite { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c); text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, var(--c) 50%, transparent); padding-bottom: 2px; }
.cite:hover { border-bottom-style: solid; }

/* mechanism map */
.mech { position: relative; display: grid; grid-template-columns: minmax(200px, 240px) 72px minmax(0, 1fr); padding: var(--s6); border-radius: 28px; background: var(--paper); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); }
.mech__src { align-self: center; display: grid; justify-items: center; text-align: center; gap: 4px; padding: 22px 18px 24px; border-radius: 22px;
  background: radial-gradient(90% 60% at 50% 28%, color-mix(in srgb, var(--glow) 42%, transparent), transparent 70%), color-mix(in srgb, var(--glow) 10%, var(--ground)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 14%, transparent); }
.mech__v { height: 170px; margin-bottom: 8px; }
.mech__v { width: 73px; }
.mech__v picture { display: block; height: 100%; }
.mech__v img { display: block; height: 100%; width: 100%; max-width: none; object-fit: contain; filter: drop-shadow(0 16px 16px rgba(11, 13, 18, .22)); }
.mech__src .mono { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.mech__src b { font: 800 1.5rem/1.1 var(--ff-display); font-variation-settings: "wdth" 112; }
.mech__src span { font-size: .8125rem; color: var(--ink-3); max-width: 24ch; }
.mech__wires { position: relative; }
.mech__wires span { position: absolute; background: color-mix(in srgb, var(--c) 60%, transparent); border-radius: 2px; }
.mech__wires .w-in { left: 0; width: 46%; top: 50%; height: 2px; margin-top: -1px; transform-origin: 0 50%; }
.mech__wires .w-bus { left: 46%; width: 2px; margin-left: -1px; transform-origin: 50% 50%; }
.mech__wires .w-out { left: 46%; right: 6px; height: 2px; margin-top: -1px; transform-origin: 0 50%; }
.mech__wires i { position: absolute; left: calc(100% - 6px); width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2.5px var(--c), 0 0 0 5px color-mix(in srgb, var(--glow) 26%, transparent); }
.mech__lanes { list-style: none; margin: 0; padding: 0 0 0 var(--s4); display: grid; grid-auto-rows: 1fr; }
.mlane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--s5); align-items: center; padding: 20px 0; }
.mlane + .mlane { border-top: 1px solid var(--line); }
.mlane__h { display: flex; gap: 12px; align-items: center; }
.mlane__h h3 { font: 800 1.0625rem/1.2 var(--ff-display); font-variation-settings: "wdth" 108; }
.mlane__h .mono { margin-top: 3px; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; }
.chain { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 0; margin: 16px 0 0 56px; padding: 0; }
.chain li { position: relative; padding: 7px 12px; border-radius: 10px; font: 500 .75rem/1.2 var(--ff-mono); color: var(--c); background: color-mix(in srgb, var(--glow) 16%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }
.chain li + li { margin-left: 22px; }
.chain li + li::before { content: ""; position: absolute; left: -17px; top: 50%; width: 12px; height: 2px; background: var(--c); opacity: .5; }
.chain li:first-child { color: #fff; background: linear-gradient(135deg, var(--c), var(--cap)); box-shadow: 0 6px 14px -8px var(--c); overflow: hidden; }
.chain li:first-child::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-120%); }
.mlane__end { padding: 18px 20px; border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--glow) 12%, var(--paper)), var(--paper) 70%); box-shadow: inset 0 0 0 1px var(--line); }
.mlane__end > .mono { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.mlane__end h4 { margin-top: 4px; font: 800 1.0625rem/1.25 var(--ff-display); font-variation-settings: "wdth" 106; }
.mlane__end p:not(.mono) { margin-top: 6px; font-size: .875rem; color: var(--ink-2); line-height: 1.5; }

/* literature timeline */
.lit { position: relative; list-style: none; margin: 0; padding: 34px 0 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--s4); }
.lit__rail { position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--line); }
.lit__rail i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--glow) 70%, var(--c))); transform-origin: 0 50%; }
.lit__m { position: relative; display: flex; flex-direction: column; padding: 22px; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); }
.lit__pad { position: absolute; left: 22px; top: -30px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 3px var(--c), 0 0 0 6px color-mix(in srgb, var(--glow) 28%, transparent); }
.lit__pad::after { content: ""; position: absolute; left: 7px; top: 16px; width: 2px; height: 14px; background: color-mix(in srgb, var(--c) 40%, transparent); }
.lit__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.lit__y { font: 800 2rem/1 var(--ff-display); font-variation-settings: "wdth" 112; color: var(--c); }
.lit__j { font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); line-height: 1.5; }
.lit__j span { color: var(--c); }
.lit__m h3 { margin-top: 6px; font: 800 1.0625rem/1.25 var(--ff-display); font-variation-settings: "wdth" 106; }
.lit__b { margin: 6px 0 14px; font-size: .875rem; color: var(--ink-2); line-height: 1.5; }
.lit__m .cite { margin-top: auto; padding-top: 12px; border-bottom: 0; border-top: 1px solid var(--line); align-self: stretch; }
.lit__new { position: absolute; top: -11px; right: 18px; padding: 3px 9px; border-radius: var(--r-pill); font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; background: var(--glow); color: var(--cap); }
.lit__m.is-new { color: #fff; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--glow) 40%, transparent), transparent 55%), linear-gradient(160deg, var(--c), var(--cap)); box-shadow: 0 26px 44px -22px var(--c); }
.lit__m.is-new .lit__y, .lit__m.is-new h3 { color: #fff; }
.lit__m.is-new .lit__j, .lit__m.is-new .lit__j span, .lit__m.is-new .cite { color: var(--glow); }
.lit__m.is-new .lit__b { color: rgba(255, 255, 255, .82); }
.lit__m.is-new .cite { border-top-color: rgba(255, 255, 255, .2); }
.lit__m.is-new .labi { color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.lit__count { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; }

/* motion: traces draw once on reveal, pads pulse, the lead chip catches light; static under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .js .mech.is-armed:not(.is-shown) .w-in, .js .mech.is-armed:not(.is-shown) .w-out { transform: scaleX(0); }
  .js .mech.is-armed:not(.is-shown) .w-bus { transform: scaleY(0); }
  .js .mech.is-shown .w-in { transition: transform .35s var(--ease-out) .2s; }
  .js .mech.is-shown .w-bus { transition: transform .35s var(--ease-out) .5s; }
  .js .mech.is-shown .w-out { transition: transform .45s var(--ease-out) calc(.8s + var(--k) * .15s); }
  .js .mech.is-armed:not(.is-shown) .mech__wires i { opacity: 0; }
  .js .mech.is-shown .mech__wires i { transition: opacity .3s calc(1.15s + var(--k) * .15s); }
  .js .mech.is-armed:not(.is-shown) .chain li, .js .mech.is-armed:not(.is-shown) .mlane__end { opacity: 0; transform: translateX(-8px); }
  .js .mech.is-shown .chain li { transition: opacity .4s, transform .5s var(--ease-out); transition-delay: calc(.7s + var(--k) * .18s + var(--j) * .12s); }
  .js .mech.is-shown .mlane__end { transition: opacity .5s, transform .6s var(--ease-out); transition-delay: calc(1s + var(--k) * .18s); }
  .mech__wires i { animation: padPulse 3.2s var(--ease-io) infinite; animation-delay: calc(var(--k) * .6s); }
  .chain li:first-child::after { animation: chipSheen 5s var(--ease-io) infinite; }
  .js .lit.is-armed:not(.is-shown) .lit__rail i { transform: scaleX(0); }
  .js .lit.is-shown .lit__rail i { transition: transform 1.4s var(--ease-out) .2s; }
  .js .lit.is-armed:not(.is-shown) .lit__m { opacity: 0; transform: translateY(16px); }
  .js .lit.is-shown .lit__m { transition: opacity .5s, transform .7s var(--ease-out); transition-delay: calc(.25s + var(--k) * .14s); }
  .lit__m.is-new .lit__pad { animation: padPulse 3.2s var(--ease-io) infinite; }
}
@keyframes padPulse { 0%, 100% { box-shadow: inset 0 0 0 2.5px var(--c), 0 0 0 5px color-mix(in srgb, var(--glow) 26%, transparent); } 50% { box-shadow: inset 0 0 0 2.5px var(--c), 0 0 0 9px color-mix(in srgb, var(--glow) 10%, transparent); } }
@keyframes chipSheen { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

@media (max-width: 1100px) {
  .lit { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; gap: var(--s5) var(--s4); }
  .lit__rail, .lit__pad { display: none; }
}
@media (max-width: 960px) {
  .mech { grid-template-columns: 1fr; padding: var(--s5); gap: var(--s4); }
  .mech__wires { display: none; }
  .mech__src { grid-template-columns: 72px 1fr; justify-items: start; text-align: left; align-items: center; column-gap: 16px; padding: 16px; }
  .mech__v { grid-row: 1 / span 3; height: 120px; margin: 0; }
  .mech__lanes { padding: 0; grid-auto-rows: auto; }
  .mlane { grid-template-columns: 1fr; gap: var(--s4); }
  .chain { margin-left: 0; }
}
@media (max-width: 640px) {
  .lit { grid-template-columns: 1fr; padding-left: 26px; }
  .lit__rail { display: block; left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .lit__rail i { transform-origin: 50% 0; }
  .lit__pad { display: block; left: -26px; top: 24px; }
  .lit__pad::after { display: none; }
  .js .lit.is-armed:not(.is-shown) .lit__rail i { transform: scaleY(0); }
}

/* =================================================================== v12: partner program page (2026-10-29)
   Eon's partner page rebuilt in the Smart Amino system: light ground, the calculator as a dark instrument card on the
   label circuit, family colours on the reasons, the steps on one trace. */
.btn--ghost-light { --bg: transparent; --fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.btn--ghost-light:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.ptr-hero { padding-bottom: var(--s8); }
.ptr-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s7); align-items: center; }
.ptr-hero h1 { max-width: 14ch; }
.ptr-hero h1 em { font-style: normal; color: var(--plum); }
.ptr-hero .eyebrow { margin-top: var(--s5); }
.ptr-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s5) 0 0; padding: 0; }
.ptr-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--r-pill); background: var(--paper); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.ptr-chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.ptr-chips--dark { justify-content: center; }
.ptr-chips--dark li { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }

/* calculator: a dark instrument card */
.earn-card { position: relative; overflow: hidden; padding: 22px 26px 26px; border-radius: 28px; color: #fff;
  background: radial-gradient(80% 60% at 100% 0%, rgba(201, 168, 242, .18), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(142, 201, 255, .12), transparent 60%), #0E1118;
  box-shadow: 0 40px 70px -36px rgba(11, 13, 18, .55), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.earn-card__bar { display: flex; align-items: center; gap: 6px; margin: -6px -10px 18px; padding: 0 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: .6875rem; color: rgba(255, 255, 255, .45); }
.earn-card__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.earn-card__bar span { margin-left: 10px; }
.earn-card__k { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--plum-glow); }
.earn-card__lead { margin-top: 6px; font-size: .875rem; color: rgba(255, 255, 255, .7); max-width: 40ch; }
.earn-card__lab { display: flex; justify-content: space-between; margin-top: 20px; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.earn-card__lab span:last-child { color: var(--plum-glow); letter-spacing: .04em; text-transform: none; }
.earn-card__big { display: block; margin-top: 4px; font: 800 clamp(2.6rem, 2rem + 2vw, 3.4rem)/1 var(--ff-display); font-variation-settings: "wdth" 112; letter-spacing: -.02em; }
.earn-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 14px 0 2px; background: transparent; cursor: pointer; --p: 13%; }
.earn-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--plum-glow) var(--p), rgba(255, 255, 255, .14) var(--p)); }
.earn-range::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--plum-glow) var(--p), rgba(255, 255, 255, .14) var(--p)); }
.earn-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(201, 168, 242, .3), 0 4px 10px rgba(0, 0, 0, .4); }
.earn-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(201, 168, 242, .3), 0 4px 10px rgba(0, 0, 0, .4); }
.earn-range:focus-visible { outline: 2px solid var(--plum-glow); outline-offset: 4px; border-radius: 8px; }
.earn-card__ends { display: flex; justify-content: space-between; font-size: .625rem; color: rgba(255, 255, 255, .4); }
.earn-mix { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; }
.earn-mix .mono { margin-right: 6px; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.earn-mix button { padding: 7px 12px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .75); font-size: .8125rem; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background-color .2s, color .2s; }
.earn-mix button[aria-checked="true"] { background: #fff; color: var(--ink); }
.earn-mix button:focus-visible { outline: 2px solid var(--plum-glow); outline-offset: 2px; }
.earn-out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.earn-out > div { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.earn-out .earn-out__m { background: linear-gradient(150deg, #6A4A7E, var(--plum-cap)); box-shadow: none; }
.earn-out span { display: block; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.earn-out b { display: block; margin-top: 6px; font: 800 1.75rem/1 var(--ff-display); font-variation-settings: "wdth" 110; }
.earn-rows { margin: 14px 0 0; display: grid; gap: 6px; font-size: .8125rem; }
.earn-rows div { display: flex; justify-content: space-between; gap: 12px; color: rgba(255, 255, 255, .65); }
.earn-rows dd { margin: 0; color: #fff; font-weight: 700; }
.earn-credit { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); font-size: .8125rem; color: rgba(255, 255, 255, .78); }
.earn-credit b { color: var(--plum-glow); }
.earn-card__fine { margin-top: 12px; font-size: .6875rem; color: rgba(255, 255, 255, .42); }
.earn-card__trace { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 44px; pointer-events: none; }
.earn-card__trace path { fill: none; stroke: rgba(201, 168, 242, .18); stroke-width: 1.5; }

/* steps on one trace */
.ptr-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.ptr-steps__line { position: absolute; left: 24px; right: 24px; top: 23px; height: 2px; background: var(--line-2); }
.ptr-steps__line i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--plum), var(--navy), var(--teal), var(--mito)); transform-origin: 0 50%; }
.ptr-steps li { position: relative; display: grid; gap: 8px; align-content: start; }
.ptr-steps__n { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 10px; border-radius: 50%; background: var(--paper); font-size: .875rem; font-weight: 700; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 6px var(--ground); }
.ptr-steps b { font: 800 1.1875rem/1.2 var(--ff-display); font-variation-settings: "wdth" 110; }
.ptr-steps p { color: var(--ink-2); font-size: .9375rem; max-width: 30ch; }

/* reasons, each in a label family */
.ptr-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.ptr-why__c { position: relative; overflow: hidden; padding: 26px; border-radius: var(--r-lg); background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.ptr-why__c::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--c), var(--glow)); }
.ptr-why__c h3 { margin-top: 18px; font: 800 1.1875rem/1.2 var(--ff-display); font-variation-settings: "wdth" 108; }
.ptr-why__c p { margin-top: 8px; color: var(--ink-2); font-size: .9375rem; }

/* rates */
.ptr-rates { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s5); align-items: start; }
.ptr-rates__t table { width: 100%; border-collapse: collapse; }
.ptr-rates__t th, .ptr-rates__t td { padding: 18px 4px; border-bottom: 1px solid var(--line); text-align: left; }
.ptr-rates__t tr:last-child th, .ptr-rates__t tr:last-child td { border-bottom: 0; }
.ptr-rates__t th { font-weight: 600; color: var(--ink-2); }
.ptr-rates__t td { text-align: right; font: 800 1.375rem/1 var(--ff-display); font-variation-settings: "wdth" 110; }
.ptr-ex { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.ptr-ex__c { position: relative; overflow: hidden; padding: 24px; border-radius: var(--r-lg); color: #fff; background: radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, var(--glow) 35%, transparent), transparent 60%), linear-gradient(160deg, var(--c), var(--cap)); box-shadow: 0 24px 40px -24px var(--c); }
.ptr-ex__pct { display: block; font: 800 3rem/1 var(--ff-display); font-variation-settings: "wdth" 116; color: var(--glow); }
.ptr-ex__c h3 { margin-top: 14px; font: 800 1.125rem/1.2 var(--ff-display); font-variation-settings: "wdth" 108; }
.ptr-ex__c p { margin-top: 6px; font-size: .9375rem; color: rgba(255, 255, 255, .82); }
.ptr-ex__c b { color: #fff; }
.ptr-ex__c--coin { grid-column: 1 / -1; display: grid; grid-template-columns: 76px 1fr; column-gap: 18px; align-items: center; color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.ptr-ex__c--coin .token { grid-row: 1 / span 2; width: 76px; perspective: 600px; }
.ptr-ex__c--coin h3 { margin: 0; align-self: end; }
.ptr-ex__c--coin p { color: var(--ink-2); align-self: start; }

/* apply */
.ptr-apply { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--s7); align-items: start; }
.ptr-apply .sec__head { grid-template-columns: 1fr; margin-bottom: var(--s5); }
.ptr-apply__list { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.ptr-apply__list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); }
.ptr-apply__list svg { flex: none; width: 20px; height: 20px; color: var(--ok); margin-top: 1px; }
.ptr-form { display: grid; gap: 16px; padding: 28px; }
.ptr-form label:not(.agree) { display: grid; gap: 6px; }
.ptr-form label > span { font-size: .875rem; font-weight: 600; }
.ptr-form label > span small { font-weight: 500; margin-left: 6px; }
.ptr-form .field { width: 100%; border-radius: 14px; }
.ptr-form textarea.field { min-height: 92px; padding: 14px 18px; resize: vertical; font: inherit; }
.ptr-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ptr-form__link { margin-top: -6px; font-size: .75rem; color: var(--ink-3); }
.ptr-form__link b { color: var(--plum); }
.ptr-form .form-msg { color: var(--ok); font-weight: 600; }
.ptr-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 24px 0 0; }
.ptr-mini div { padding: 14px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.ptr-mini dt { font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ptr-mini dd { margin: 6px 0 0; font-weight: 700; }

/* closing band */
.ptr-cta { position: relative; overflow: hidden; min-height: 460px; display: grid; place-items: center; padding: var(--s7) var(--s5); border-radius: 36px; text-align: center; color: #fff;
  background: radial-gradient(60% 70% at 50% 0%, rgba(201, 168, 242, .2), transparent 70%), #0E1118; }
.ptr-cta__in { position: relative; z-index: 1; max-width: 640px; }
.ptr-cta__in > .mono { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--plum-glow); }
.ptr-cta h2 { margin-top: 12px; font-size: var(--fs-h2); font-variation-settings: "wdth" 116; }
.ptr-cta__in > p:not(.mono) { margin: 14px auto 0; color: rgba(255, 255, 255, .72); max-width: 46ch; }

@media (prefers-reduced-motion: no-preference) {
  .js .ptr-steps.is-armed:not(.is-shown) .ptr-steps__line i { transform: scaleX(0); }
  .js .ptr-steps.is-shown .ptr-steps__line i { transition: transform 1.2s var(--ease-out) .2s; }
  .js .ptr-steps.is-armed:not(.is-shown) li { opacity: 0; transform: translateY(14px); }
  .js .ptr-steps.is-shown li { transition: opacity .5s, transform .6s var(--ease-out); transition-delay: calc(.3s + var(--k) * .16s); }
}
@media (max-width: 1100px) { .ptr-why { grid-template-columns: 1fr 1fr; } .ptr-rates { grid-template-columns: 1fr; } }
@media (max-width: 960px) {
  .ptr-hero__grid, .ptr-apply { grid-template-columns: 1fr; }
  .ptr-steps { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); }
  .ptr-steps__line { display: none; }
}
@media (max-width: 640px) {
  .ptr-why, .ptr-ex, .ptr-steps, .ptr-form__row { grid-template-columns: 1fr; }
  .earn-card { padding: 18px 18px 22px; border-radius: 22px; }
  .earn-out b { font-size: 1.4rem; }
  .ptr-form { padding: 20px; }
  .ptr-cta { min-height: 0; border-radius: 26px; }
  .ptr-cta .drift { display: none; }
}

/* the hero card sits inside .phero, whose "p" rule (size, ink colour, margin) would otherwise win */
.ptr-hero .earn-card p { margin-top: 0; max-width: none; font-size: inherit; }
.ptr-hero .earn-card .earn-card__k { font-size: .625rem; color: var(--plum-glow); }
.ptr-hero .earn-card .earn-card__lead { margin-top: 6px; font-size: .875rem; color: rgba(255, 255, 255, .7); max-width: 40ch; }
.ptr-hero .earn-card .earn-credit { margin-top: 14px; font-size: .8125rem; color: rgba(255, 255, 255, .78); }
.ptr-hero .earn-card .earn-card__fine { margin-top: 12px; font-size: .6875rem; color: rgba(255, 255, 255, .42); }
/* drifting vials in the closing band load eagerly: lazy images far down a long page never got a chance to start */

/* ---------- v14: 3D molecule (assets/js/mol3d.js) + structure viewer ---------- */
.m3d { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s6); margin-top: var(--s6); align-items: start; }
.m3d__view { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 28px; background:
  radial-gradient(70% 60% at 26% -6%, #fff 0%, rgba(255, 255, 255, 0) 62%),
  radial-gradient(60% 55% at 90% 4%, color-mix(in srgb, var(--glow, #8EC9FF) 26%, transparent), transparent 66%),
  radial-gradient(90% 70% at 50% 112%, rgba(11, 13, 18, .07), transparent 60%), var(--paper);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, .9); }
.m3d__view::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(11, 13, 18, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 13, 18, .05) 1px, transparent 1px);
  background-size: 32px 32px; -webkit-mask-image: radial-gradient(76% 76% at 50% 48%, #000 34%, transparent 100%); mask-image: radial-gradient(76% 76% at 50% 48%, #000 34%, transparent 100%); }
.m3d__view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.m3d__view canvas:active { cursor: grabbing; }
.m3d__badge { position: absolute; z-index: 2; top: 16px; left: 18px; display: grid; gap: 4px; pointer-events: none; }
.m3d__badge b { font-size: 1rem; }
.m3d__badge span { font-size: .75rem; color: var(--ink-3); }
.m3d__legend { text-transform: none; position: absolute; z-index: 2; top: 18px; right: 18px; display: flex; gap: 10px; font-size: .6875rem; color: var(--ink-3); pointer-events: none; }
.m3d__legend .el::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; vertical-align: -1px; background: #15201E; }
.m3d__legend .el--N::before { background: #2563EB; } .m3d__legend .el--O::before { background: #E5484D; }
.m3d__legend .el--S::before { background: #E0831F; } .m3d__legend .el--Cu::before { background: #B45309; }
.m3d__tag { position: absolute; z-index: 2; bottom: 14px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .8); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); pointer-events: none; transition: opacity .4s; }
[data-mol].is-live .m3d__tag, .strv__stage.is-live .m3d__tag { opacity: .9; }
[data-mol]:not(.is-live) .m3d__tag, .strv__stage:not(.is-live) .m3d__tag { opacity: 0; }
.m3d__head { display: flex; justify-content: space-between; gap: 12px; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.m3d__head b { color: var(--ink); }
.m3d__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rc { display: grid; justify-items: center; min-width: 38px; padding: 6px 6px 5px; border: 1.5px solid transparent; border-radius: 10px; background: var(--ground); font: inherit; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.rc b { font: 700 .9375rem/1 var(--ff-mono); }
.rc small { margin-top: 3px; font: 500 .5625rem/1 var(--ff-mono); color: var(--ink-3); }
.rc:hover, .rc:focus-visible { transform: translateY(-1px); border-color: var(--line-2); }
.rc.on { border-color: var(--ink); background: var(--paper); }
.rc--hydrophobic { box-shadow: inset 0 -3px 0 #D9A400; } .rc--polar { box-shadow: inset 0 -3px 0 #0F7A55; }
.rc--basic { box-shadow: inset 0 -3px 0 #2563EB; } .rc--acidic { box-shadow: inset 0 -3px 0 #E5484D; }
.rc--special { box-shadow: inset 0 -3px 0 #8A93A3; } .rc--mod { box-shadow: inset 0 -3px 0 #7C3AED; }
.m3d__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin: 18px 0 0; }
.m3d__stats div { padding: 11px 0; border-bottom: 1px solid var(--line); }
.m3d__stats dt { font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.m3d__stats dd { margin: 0; font-weight: 600; font-size: .9375rem; overflow-wrap: anywhere; }
.m3d__note { margin: 16px 0 14px; font-size: .8125rem; color: var(--ink-3); }
@media (max-width: 860px) { .m3d { grid-template-columns: 1fr; } }

/* structure viewer page */
.strv { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s6); align-items: start; }
.strv__list { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; padding: 14px; background: var(--paper); border-radius: 24px; box-shadow: var(--shadow-1); }
.strv__search { width: 100%; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--ground); font: inherit; margin-bottom: 10px; }
.strv__search:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.strv__group { margin: 14px 6px 6px; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.strv__group i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.strv__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; font: inherit; font-weight: 600; font-size: .9375rem; cursor: pointer; color: var(--ink); }
.strv__item small { font: 500 .625rem/1 var(--ff-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.strv__item:hover { background: var(--ground); }
.strv__item[aria-current="true"] { background: var(--ink); color: #fff; }
.strv__item[aria-current="true"] small { color: rgba(255, 255, 255, .6); }
.strv__empty { padding: 10px; font-size: .875rem; color: var(--ink-3); }
.strv__panel h2 { margin: 6px 0 6px; }
.strv__kind { color: var(--ink-3); margin-bottom: var(--s5); }
.strv__stage { position: relative; }
.strv__fallback { display: grid; place-items: center; text-align: center; padding: 28px; }
.strv__fallback ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.strv__fallback li a { font-weight: 600; }
.strv__facts { margin-top: var(--s5); }
.strv__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--s5); }
@media (max-width: 900px) { .strv { grid-template-columns: 1fr; } .strv__list { position: static; max-height: 320px; } }

/* research sets: drawer action + /workspace/ */
.setsave { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: .8125rem; }
.setsave__open { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.setsave a { color: var(--ink-3); }
.setsave__form { display: flex; gap: 8px; width: 100%; }
.setsave__form .field { flex: 1; min-height: 40px; }
.setsave__msg { width: 100%; margin: 0; text-align: center; color: var(--ink-3); }
.setsave__msg:empty { display: none; }
.sets { display: grid; gap: var(--s5); }
[data-sets-incoming]:not(:empty) { margin-bottom: var(--s5); }
[data-sets-incoming] .setc { outline: 2px solid var(--ink); outline-offset: -2px; }
.setc__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.setc__head h2 { margin: 4px 0 0; font-size: 1.5rem; }
.setc__tot { display: grid; justify-items: end; gap: 4px; }
.setc__tot b { font-size: 1.375rem; }
.setc__tot span { font-size: .8125rem; }
.setc__lines { list-style: none; margin: 18px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 24px; }
.setc__lines li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.setc__lines li i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.setc__lines li span { flex: 1; font-weight: 600; }
.setc__lines li small { margin-left: 6px; font-weight: 500; color: var(--ink-3); }
.setc__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.setc__del { margin-left: auto; border: 0; background: none; font: inherit; font-size: .875rem; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.setc__msg { margin: 10px 0 0; font-size: .875rem; color: var(--ink-3); }
.setc__msg:empty { display: none; }
.setc__msg code { overflow-wrap: anywhere; }
.setc--empty { text-align: center; display: grid; justify-items: center; gap: 10px; }

/* shipping guide */
.ship { max-width: 860px; }
.ship__toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s5); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; }
.ship__toc a { padding: 8px 12px; border-radius: var(--r-pill); background: var(--paper); box-shadow: var(--shadow-1); color: var(--ink-2); text-decoration: none; }
.ship__toc a:hover { color: var(--ink); }
.ship__sec { scroll-margin-top: 96px; margin-top: var(--s7); color: var(--ink-2); }
.ship__sec:first-of-type { margin-top: var(--s5); }
.ship__sec h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 var(--s4); color: var(--ink); font-size: 1.6rem; }
.ship__sec h2 .mono { font-size: .75rem; color: var(--ink-3); }
.ship__sec p { max-width: 70ch; }
.ship__sec p + p, .ship__sec p + .panelbox { margin-top: var(--s4); }
.ship__t { width: 100%; border-collapse: collapse; }
.ship__t th, .ship__t td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ship__t th { font: 500 var(--fs-mono)/1.3 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ship__t td:last-child { font-weight: 600; color: var(--ink); }
.chk__count { margin: 0 0 12px; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.chk__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.chk__list label { display: flex; gap: 14px; align-items: flex-start; padding: 12px 6px; border-bottom: 1px solid var(--line); cursor: pointer; }
.chk__list li:last-child label { border-bottom: 0; }
.chk__list input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--ink); }
.chk__list b { display: block; color: var(--ink); }
.chk__list small { display: block; margin-top: 3px; font-size: .875rem; color: var(--ink-3); }
.chk__list input:checked + span b { text-decoration: line-through; text-decoration-color: var(--ink-3); }

/* ---------- v15: 7x release panel, light (home + lab testing). Colour follows the vial on show (data-ch = its
   family): the number badges and wire nodes take --c, every spec is a green "pass" pill, the vial sits on a soft
   glow of its family. Replaces the home page's dark variant (Brandon, 2026-10-29). ---------- */
.sec--tests { position: relative; }
.sec--tests .tests { position: relative; padding: clamp(20px, 3vw, 36px); border-radius: 32px;
  background: radial-gradient(42% 52% at 50% 46%, color-mix(in srgb, var(--glow) 28%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15)), var(--ground-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.sec--tests .tests::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: linear-gradient(rgba(11, 13, 18, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 13, 18, .045) 1px, transparent 1px);
  background-size: 28px 28px; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%); }
.sec--tests .tests > * { position: relative; }
.sec--tests .test { padding: 18px 20px 18px 18px; border-radius: 18px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(11, 13, 18, .04), 0 10px 26px -18px rgba(11, 13, 18, .28), inset 0 0 0 1px rgba(11, 13, 18, .05);
  transition: transform .3s var(--ease-out), box-shadow .3s; }
.sec--tests .test::after { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--glow), color-mix(in srgb, var(--c) 70%, var(--glow))); }
.sec--tests .test:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(11, 13, 18, .05), 0 16px 32px -18px rgba(11, 13, 18, .32), inset 0 0 0 1px rgba(11, 13, 18, .06); }
.sec--tests .test__n { border: 0; background: color-mix(in srgb, var(--glow) 30%, #fff); color: var(--c); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--glow) 75%, var(--c)); }
.sec--tests .test h3 { color: var(--ink); }
.sec--tests .test__spec { justify-self: start; margin-top: 10px; padding: 5px 10px 5px 9px; border-radius: var(--r-pill); background: #E3F4EC; color: var(--ok); font-size: .6875rem; letter-spacing: .04em; }
.sec--tests .test__spec::before { width: 6px; height: 6px; }
.sec--tests .tests__wires { color: color-mix(in srgb, var(--glow) 55%, var(--line-2)); }
.sec--tests .tests__seal b { color: var(--ink); }
.sec--tests .tests__seal .muted { display: inline-block; margin-top: 8px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--paper); box-shadow: var(--shadow-1); color: var(--c); letter-spacing: .12em; }
.sec--tests .fv__shadow { background: radial-gradient(closest-side, color-mix(in srgb, var(--cap) 40%, transparent), transparent); }
@media (prefers-reduced-motion: reduce) { .sec--tests .test { transition: none; } .sec--tests .test:hover { transform: none; } }

/* ---------- v17: hero, mobile first (s-tier-web pass, 2026-10-29). Concept: the first screen is the bench - the
   vials stand on the circuit, the promise sits above them, the order is one thumb away. Desktop keeps text left and
   the bench right (grid areas); phones read head -> vials -> buttons -> lead -> proof, with the primary button inside
   the first screen at 390x844. Motion is load-only (no pointer motion in heroes). ---------- */
.hero__grid { grid-template-areas: "head stage" "body stage"; grid-template-rows: auto 1fr; row-gap: 0; }
.hero__grid > div.hero__head { grid-area: head; align-self: end; display: block; } /* beats the old phone rule div:first-child { display: contents } */
.hero__grid > .hero__body { grid-area: body; align-self: start; }
.hero__grid > .stage { grid-area: stage; align-self: center; }
.stage::before { content: ""; position: absolute; inset: 8% -6% 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(52% 46% at 50% 62%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 72%); }
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "body"; grid-template-rows: none; }
  .hero__grid > .stage { order: 0; margin-top: var(--s4); }
  .hero__grid .proof { order: 0; }
}
@media (max-width: 720px) {
  .hero { padding: 16px 0 44px; }
  .hero .eyebrow { margin-bottom: 12px; font-size: .625rem; }
  .hero h1 { font-size: clamp(2.45rem, 12.6vw, 3.5rem); line-height: .93; }
  .hero__grid > .stage { aspect-ratio: 1 / .74; margin: 10px 0 0; }
  .hero .stage > .fv { width: 24%; bottom: 11%; }
  .hero .stage > .fv:nth-of-type(1) { left: 1%; --dy: -4%; --rot: -3deg; }
  .hero .stage > .fv:nth-of-type(2) { left: 25.5%; --dy: -13%; --rot: 1.5deg; z-index: 2; }
  .hero .stage > .fv:nth-of-type(3) { left: 50.5%; --dy: -6%; --rot: -1.5deg; z-index: 2; }
  .hero .stage > .fv:nth-of-type(4) { left: 75%; --dy: -11%; --rot: 3deg; }
  .hero .stage__traces { inset: auto -4% 3% -4%; height: 34%; }
  .hero__body { display: flex; flex-direction: column; }
  .hero__cta { order: -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 0; }
  .hero__cta .btn { width: 100%; min-height: 54px; }
  .hero__cta .btn--ghost { min-height: 50px; background: rgba(255, 255, 255, .6); }
  .hero__sub { margin-top: 20px; font-size: 1rem; line-height: 1.55; }
  .hero__grid .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; max-width: none; }
  .proof li { flex-direction: column; gap: 8px; padding: 12px 12px 13px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow-1); font-size: .8125rem; }
  .proof li b { font-size: .875rem; }
  .proof svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero .stage > .fv { opacity: 0; translate: 0 28px; }
  .js .hero.is-in .stage > .fv { opacity: 1; translate: 0 0; transition: opacity .6s var(--ease-out), translate .95s var(--ease-out); }
  .js .hero.is-in .stage > .fv:nth-of-type(1) { transition-delay: .28s; }
  .js .hero.is-in .stage > .fv:nth-of-type(2) { transition-delay: .36s; }
  .js .hero.is-in .stage > .fv:nth-of-type(3) { transition-delay: .44s; }
  .js .hero.is-in .stage > .fv:nth-of-type(4) { transition-delay: .52s; }
}

/* ---------- v18: "How your order arrives", Smart Amino's own (replaces the Aspect-style bento): three equal
   steps on one circuit bus, the same trace that runs under the hero vials. 01 a countdown framed as a chip,
   02 the real vial label in a scan frame opening its lot record, 03 tracking as PCB pads. Light, like the 7x panel. ---------- */
.arv2 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.arv2__bus { display: none; }
.arv2__card { position: relative; display: grid; align-content: start; gap: 14px; padding: 24px; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow-1); }
.arv2__n { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.arv2__n b { display: grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-weight: 600; letter-spacing: .04em; }
.arv2__card h3 { margin: 0; font-size: 1.4rem; font-variation-settings: "wdth" 112; letter-spacing: -.02em; line-height: 1.1; }
.arv2__p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }
.arv2__p b { color: var(--ink); }
.arv2__p a { color: var(--ink); font-weight: 600; }
/* 01: the clock as a chip (pins down both sides) */
.arv2__chip { position: relative; margin: 2px 10px; padding: 18px 20px 16px; border-radius: 14px; background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.arv2__chip:has([data-arv-clock][hidden]) { display: none; }
.arv2__pins, .arv2__pins::after { position: absolute; top: 14px; bottom: 14px; left: -10px; width: 10px;
  background: repeating-linear-gradient(180deg, var(--line-2) 0 3px, transparent 3px 11px); background-size: 6px 100%; background-repeat: no-repeat; background-position: 4px 0; }
.arv2__pins::after { content: ""; left: auto; right: -10px; top: 0; bottom: 0; position: absolute; }
.arv2__pins { pointer-events: none; }
.arv2__chip .arv2__pins::after { right: calc(-1 * (100% + 0px)); }
.arv2__clock { margin: 0; font: 600 clamp(2.2rem, 1.6rem + 1.6vw, 2.9rem)/1 var(--ff-mono); letter-spacing: .02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.arv2__cut { margin: 8px 0 12px; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.arv2__bar { display: block; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.arv2__bar i { display: block; height: 100%; border-radius: inherit; background: var(--ok); transform-origin: 0 50%; transform: scaleX(var(--left, 1)); }
/* 02: the vial label in a scan frame, then its lot record */
.arv2__scan { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: radial-gradient(70% 90% at 20% 50%, color-mix(in srgb, var(--glow) 34%, transparent), transparent 70%), var(--ground); }
.arv2__frame { position: relative; display: block; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 22px -12px rgba(11, 13, 18, .45); }
.arv2__frame img { display: block; width: 100%; height: auto; }
.arv2__frame::before, .arv2__frame::after { content: ""; position: absolute; z-index: 2; width: 22px; height: 22px; border: 2.5px solid #fff; pointer-events: none; }
.arv2__frame::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.arv2__frame::after { right: 8px; bottom: 8px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.arv2__beam { position: absolute; z-index: 1; left: 6%; right: 6%; top: 50%; height: 2px; border-radius: 2px; background: var(--forest-glow); box-shadow: 0 0 12px 2px rgba(125, 232, 193, .7); opacity: .9; }
.arv2__rec { display: grid; gap: 3px; padding: 12px 14px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.arv2__rec small { font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.arv2__rec b { font-size: .8125rem; overflow-wrap: anywhere; }
.arv2__rec span { font-size: .8125rem; color: var(--ink-2); }
.arv2__rec em { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-style: normal; font-size: .75rem; font-weight: 600; color: var(--ok); }
.arv2__rec em svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* 03: tracking as PCB pads on a trace */
.arv2__pads { margin: 0; padding: 8px 4px; list-style: none; }
.arv2__pads li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 9px 0; }
.arv2__pads li + li::before { content: ""; position: absolute; left: 8px; top: -11px; width: 2px; height: 22px; background: var(--line-2); }
.arv2__pads li.is-done + li::before { background: var(--ink); }
.arv2__pad { width: 18px; height: 18px; border-radius: 5px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line-2); }
.arv2__pads li.is-done .arv2__pad { background: var(--ink); box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 9px #fff; }
.arv2__pads li.is-now .arv2__pad { box-shadow: inset 0 0 0 2px var(--ok), 0 0 0 5px rgba(15, 122, 85, .14); background: color-mix(in srgb, var(--ok) 18%, #fff); }
.arv2__pads b { font-size: .9375rem; font-weight: 600; }
.arv2__pads small { font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
@media (min-width: 960px) {
  .arv2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 26px; }
  .arv2__bus { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 26px; color: var(--line-2); }
  .arv2__bus circle { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
  .arv2__card { padding: 28px; }
}
@media (prefers-reduced-motion: no-preference) {
  .arv2__beam { animation: arvScan 2.8s var(--ease-io) infinite alternate; }
  @keyframes arvScan { from { top: 14%; } to { top: 84%; } }
  .arv2__pads li.is-now .arv2__pad { animation: arvPad 2.2s ease-in-out infinite; }
  @keyframes arvPad { 50% { box-shadow: inset 0 0 0 2px var(--ok), 0 0 0 9px rgba(15, 122, 85, .06); } }
  .js .arv2.is-armed:not(.is-shown) .arv2__pads li { opacity: 0; translate: -8px 0; }
  .arv2.is-shown .arv2__pads li { opacity: 1; translate: 0 0; transition: opacity 420ms var(--ease-out), translate 420ms var(--ease-out); transition-delay: calc(var(--k) * 300ms + 250ms); }
}
/* v18 fixes: pins on both sides of the chip; bus pads drawn per card so they stay round */
.arv2__pins { display: none; }
.arv2__chip::before, .arv2__chip::after { content: ""; position: absolute; top: 14px; bottom: 14px; width: 6px; pointer-events: none;
  background: repeating-linear-gradient(180deg, var(--line-2) 0 3px, transparent 3px 11px); }
.arv2__chip::before { left: -8px; } .arv2__chip::after { right: -8px; }
.arv2__bus circle { display: none; }
@media (min-width: 960px) {
  .arv2__card::before { content: ""; position: absolute; left: 50%; top: -18px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
  .arv2__card::after { content: ""; position: absolute; left: 50%; top: -6px; width: 2px; height: 6px; margin-left: -1px; background: var(--ink); }
  .arv2__bus { top: 2px; height: 12px; }
}

/* ---------- v19: footer (2026-10-29). Spectrum of the eight label colours on the top edge, a proof row, the brand
   block with support + tracking, family-coloured area links, the research-use notice, the circuit trace, a clean base.
   The "Ser · Met · Ala ..." name-as-sequence line is gone (Brandon). ---------- */
.ftr { position: relative; padding-top: 0; background: linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--ground) 60%, var(--paper))); border-top: 0; }
.ftr__spectrum { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); height: 5px; }
.ftr__spectrum i { background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 70%, #fff)); }
.ftr__trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: var(--s7) 0 var(--s6); list-style: none; border-bottom: 1px solid var(--line); }
.ftr__trust li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--ground); font-size: .8125rem; color: var(--ink-3); line-height: 1.4; }
.ftr__trust li b { display: block; color: var(--ink); font-size: .9375rem; }
.ftr__trust svg { flex: none; width: 22px; height: 22px; color: var(--ink); }
.ftr .ftr__top { padding-top: var(--s7); }
.ftr__brand { display: grid; align-content: start; justify-items: start; gap: 12px; }
.ftr__about { margin-top: 4px; }
.ftr__mail { font-weight: 600; color: var(--ink) !important; }
.ftr__track { margin-top: 4px; }
.ftr__title { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; }
.ftr__fam { display: inline-flex; align-items: center; gap: 9px; }
.ftr__fam::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent); }
.ftr a:hover { text-decoration: none; color: var(--ink); }
.ftr__top ul a { transition: color .15s; }
.ftr__ruo { margin-top: var(--s7); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.ftr__trace { display: block; width: 100%; height: 24px; margin-top: var(--s6); color: var(--line-2); }
.ftr__base { margin-top: 10px; }
.ftr__base .mono { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 960px) { .ftr__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
  .ftr__brand { grid-column: 1 / -1; }
  .ftr__trust { gap: 8px; padding-top: var(--s6); }
  .ftr__trust li { flex-direction: column; gap: 8px; padding: 12px; }
}
.ftr .ftr__trust li + li { margin-top: 0; }
.ftr__spectrum { height: 6px; }
.ftr__spectrum i { background: var(--c); }
.ftr { padding-bottom: var(--s7); }

/* ---------- v20: product buy box on phones (2026-10-29). Brandon: "looks terrible". Gallery chips become one row
   above the vial (no longer over it), tabs compact, the four quantity packs a 2x2 grid of compact cards (no vial
   stacks), delivery + trust tightened. The VIP line no longer mixes the old plum with the new arctic cap colour. ---------- */
.vipline { background: radial-gradient(120% 160% at 0 0, #26303F, var(--ink)); }
.vipline b, .vipline svg { color: var(--forest-glow); }
@media (max-width: 640px) {
  .gallery__main { aspect-ratio: 1 / 1.02; }
  .gallery__main .view--float .fv { width: 26%; bottom: 5%; }
  .gchips { top: 10px; bottom: auto; left: 10px; right: 10px; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 6px; }
  .gchip { padding: 7px 9px; border-radius: 12px; min-width: 0; }
  .gchip b { font-size: .875rem; white-space: nowrap; }
  .gchip b.mono { font-size: .6875rem; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .gchip span { font-size: .625rem; }
  .gtabs { gap: 6px; }
  .gtabs button { gap: 4px; padding: 6px 4px 7px; border-radius: 12px; font-size: .6875rem; }
  .gtabs__i { height: 34px; border-radius: 8px; }
  .gtabs__i b { font-size: .8125rem; }
  .buy { padding-top: 4px; }
  .buy h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .buy__sub { font-size: .9375rem; line-height: 1.5; }
  .buy__price { margin-top: 16px; }
  .buy__label { margin: 18px 0 8px; font-size: .6875rem; }
  .pks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pk { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 2px; padding: 12px 12px 11px; align-items: start; }
  .pk .sv { display: none; }
  .pk__t b { font-size: .9375rem; }
  .pk__t span { font-size: .75rem; }
  .pk__p { grid-column: 1; display: grid; gap: 2px; margin-top: 4px; }
  .pk__p b { font-size: 1.125rem; }
  .pk__p span { font-size: .6875rem; }
  .pk__flag { top: -8px; right: 8px; font-size: .5625rem; }
  .buy__cta { margin-top: 14px; }
  .buy__cta .btn { min-height: 54px; }
  .deliv { gap: 8px; padding: 12px 14px; }
  .deliv__row { font-size: .8125rem; line-height: 1.4; }
  .vipline { padding: 11px 14px; font-size: .8125rem; }
  .assure--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .assure--3 li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; font-size: .6875rem; line-height: 1.3; }
  .assure--3 li svg { width: 16px; height: 16px; }
}

/* ---------- v21: product cards on phones (2026-10-29): the vial is sized by height so its cap always clears the lot pill.
   (The bar trace is v23.) ---------- */
.card__media img { width: auto; height: 78%; bottom: 6%; }

/* ---------- v22: PDP trust panel + release results (2026-10-29). One elevated panel, three columns divided by
   hairlines, each a tactile icon tile (family colour inside the icon), a bold line and a mono caps line. Below it,
   two "Passed" result pills read from the lot's own assays. ---------- */
.assure2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--s5) 0 0; padding: 0; list-style: none; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); overflow: hidden; }
.assure2 li { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 20px 12px 18px; text-align: center; }
.assure2 li + li { box-shadow: inset 1px 0 0 var(--line); }
.assure2__tile { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 6px; border-radius: 15px; color: var(--ink);
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--ground) 70%, #fff));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(11, 13, 18, .07), 0 6px 14px -8px rgba(11, 13, 18, .35); }
.assure2__tile svg { width: 28px; height: 28px; }
.assure2 b { font-size: .9375rem; font-weight: 700; line-height: 1.2; color: var(--ink); }
.assure2 a { display: block; line-height: 1.2; text-decoration: none; color: inherit; }
.assure2 a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.assure2 small { font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); line-height: 1.35; }
.passrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.passrow li { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 16px; background: linear-gradient(180deg, #E6F6EE, #DCF1E6); box-shadow: inset 0 0 0 1px rgba(15, 122, 85, .16); }
.passrow li.is-check { background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.passrow__tick { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ok); color: #fff; font-weight: 700; box-shadow: 0 0 0 4px rgba(15, 122, 85, .12); }
.passrow li.is-check .passrow__tick { background: var(--ink-3); box-shadow: none; }
.passrow__tick svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.passrow li > span:last-child { display: grid; gap: 2px; min-width: 0; }
.passrow small { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ok); }
.passrow li.is-check small { color: var(--ink-3); }
.passrow b { font-size: .875rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.passrow__lot { margin: 10px 2px 0; font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.passrow__lot a { color: var(--ink-2); }
@media (max-width: 640px) {
  .assure2 li { padding: 16px 6px 14px; gap: 5px; }
  .assure2__tile { width: 44px; height: 44px; border-radius: 13px; }
  .assure2__tile svg { width: 24px; height: 24px; }
  .assure2 b { font-size: .8125rem; }
  .assure2 small { font-size: .5625rem; letter-spacing: .06em; }
  .passrow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ---------- v23: the card bar's circuit (2026-10-29). Brandon: on phones the trace looked bad; make "Research use
   only" small and let the animation run through the entire bar. The text sits in the upper half; one bus runs along
   the bottom of the whole bar (dipping under the text), risers + nodes rise only to the right of the text, and a soft
   light pulse travels the bus. Phones: drawn on first view, pulse only while the card is on screen. Desktop: drawn +
   pulsing on hover. Reduced motion or no JS: the full circuit, static. ---------- */
.card__strip { container-type: inline-size; height: 34px; padding: 0 16px 9px; align-items: center; }
.card__strip .mono { position: relative; z-index: 1; font-size: .625rem; letter-spacing: .14em; white-space: nowrap; }
.card__strip .strip-trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.strip-trace .st-base { fill: none; stroke: var(--glow); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.strip-trace .st-base circle { stroke-width: 1.4; fill: var(--c); }
.strip-trace .st-pulse { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 26 760; stroke-dashoffset: 786; opacity: 0; }
.strip-trace .r-sm { display: none; }
@container (max-width: 240px) {
  .card__strip { padding-inline: 12px; }
  .card__strip .mono { font-size: .5rem; letter-spacing: .12em; }
  .strip-trace .r-sm { display: inline; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .card .strip-trace { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-io) .1s; }
  .js .card.is-drawn .strip-trace, .js .card:hover .strip-trace, .js .card:focus-within .strip-trace { clip-path: inset(0 0 0 0); }
  .card.is-lit .st-pulse, .card:hover .st-pulse { opacity: .95; animation: stPulse 3.4s linear 1.2s infinite; }
  .card.is-lit .st-pulse--2, .card:hover .st-pulse--2 { opacity: .55; animation-delay: 2.9s; }
  @keyframes stPulse { from { stroke-dashoffset: 786; } to { stroke-dashoffset: -26; } }
}

/* ---------- v24 (2026-10-29). Shop: the family pills are gone; a search field + family dropdown + sort sit in one bar.
   COA library: no family chips. PDP on phones: no stat chips over the vial and no Vial/Certificate/Molecule/Lineup tabs
   (the certificate, molecule and lineup all appear further down the page); a smaller picture with the vial centred, a
   tighter title block and Rebirth-style quantity tiles, so the Add to cart button sits in the first screen. ---------- */
.filters--bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.filters--bar .sort { margin: 0; }
.filters--bar .sort .field { min-height: 48px; padding-right: 36px; font-weight: 600; }
.fsearch { position: relative; display: block; }
.fsearch svg { position: absolute; left: 16px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.fsearch .field { width: 100%; min-height: 48px; padding-left: 46px; border-radius: var(--r-pill); }
.fsearch .field::-webkit-search-cancel-button { cursor: pointer; }
.fcount { margin: 0 0 var(--s5); color: var(--ink-3); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.fempty { padding: 40px 0; text-align: center; color: var(--ink-2); }
.fempty__btn { border: 0; padding: 0; background: none; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 760px) {
  .filters--bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fsearch { grid-column: 1 / -1; }
  .filters--bar .sort .field { width: 100%; min-height: 44px; font-size: .875rem; }
}

/* quantity: four small tiles in one row (all widths) */
.pks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pk { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; justify-items: center; align-content: start; gap: 4px; padding: 14px 4px 9px; text-align: center; border-radius: 14px; }
.pk .sv { display: block; grid-row: auto; height: 34px; width: calc(15px + (var(--n) - 1) * 7px); }
.pk .sv > span { width: 15px; left: calc(var(--k) * 7px); }
.pk__t { display: grid; gap: 1px; justify-items: center; }
.pk__t b { font-size: .875rem; line-height: 1.2; }
.pk__t > span:not(.pk__off) { font-size: .6875rem; color: var(--ink-3); }
.pk__off { font: 600 .625rem/1.3 var(--ff-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ok); }
.pk:first-of-type .pk__off { color: var(--ink-3); letter-spacing: 0; }
.pk__p { display: none; }
.pk__flag { top: -9px; left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; padding: 2px 7px; font-size: .5rem; letter-spacing: .06em; }

@media (max-width: 960px) {
  .gchips, .gtabs { display: none; }
  .gallery { gap: 0; }
  .gallery__main { --gh: clamp(168px, 44vw, 340px); aspect-ratio: auto; height: var(--gh); border-radius: 22px; }
  .gallery__main .view--float { place-items: center; }
  .gallery__main .view--float .fv { position: relative; inset: auto; width: calc(var(--gh) * .33); margin: 0 auto; }
  .gallery__trace { height: 30%; }
}
@media (max-width: 640px) {
  .pdp { padding-top: 0; gap: 12px; grid-template-columns: minmax(0, 1fr); }
  .buy { min-width: 0; }
  .wrap > .crumbs:has(+ .pdp) { display: none; }
  .pdp { margin-top: 10px; }
  .buy { padding-top: 0; }
  .buy__kind { font-size: .6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .buy h1 { font-size: clamp(1.9rem, 8.6vw, 2.3rem); margin-top: 4px; }
  .buy__sub { margin-top: 4px; font-size: .75rem; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .buy__sub .pill { display: none; }
  .buy__price { margin-top: 8px; }
  .buy__price .price { font-size: 1.625rem; }
  .buy__label { margin: 11px 0 6px; }
  .size { padding: 9px 13px; font-size: .9375rem; }
  .sizes--pick { gap: 6px; flex-wrap: nowrap; }
  .size--opt { flex: 1 1 0; min-width: 0; justify-content: center; align-items: center; padding: 10px 4px; font-size: .875rem; white-space: nowrap; }
  .size--opt small { display: none; }
  .pks { gap: 6px; }
  .pk { padding: 11px 2px 7px; gap: 3px; border-radius: 12px; }
  .pk .sv { height: 24px; width: calc(10px + (var(--n) - 1) * 5px); }
  .pk .sv > span { width: 10px; left: calc(var(--k) * 5px); }
  .pk__t b { font-size: .8125rem; }
  .pk__t > span:not(.pk__off) { font-size: .625rem; }
  .pk__off { font-size: .5625rem; letter-spacing: .04em; }
  .pk__flag { font-size: .4375rem; padding: 2px 6px; top: -8px; }
  .buy__cta { margin-top: 10px; }
  .buy__cta .btn { min-height: 50px; }
  .buy__cta .qty { height: 50px; }
}

/* ---------- v25: VIP cards (2026-10-29). The circuit trace no longer runs under the card number (it sits mid-right,
   in the empty band beside the chip). The hero stack is a wallet deck: back cards show only their top row, so no
   text is ever half covered; on phones it sits above the headline. Each paid plan carries its own card, which floats
   gently and lifts + tilts on hover. ---------- */
.mcard__trace { right: -3%; top: 37%; bottom: auto; width: 50%; opacity: .9; }
.mstack { aspect-ratio: 1 / .86; max-width: 560px; margin-inline: auto; width: 100%; }
.mstack__c { width: 80%; left: 10%; right: auto; top: calc(var(--i) * 15%); transform: rotate(-4deg); z-index: var(--i); transition: transform .5s var(--ease-out), top .5s var(--ease-out); }
.mstack__c:nth-child(1), .mstack__c:nth-child(2), .mstack__c:nth-child(3) { left: 10%; right: auto; top: calc(2% + var(--i) * 19%); transform: rotate(-4deg); }
.mstack__c:nth-child(3) { transform: rotate(-2deg); }
.mstack__v { right: 0; bottom: 2%; width: 13%; }
.mstack__coin { left: 0; bottom: 0; width: 15%; }
@media (hover: hover) {
  .mstack:hover .mstack__c:nth-child(1) { transform: translateY(-14px) rotate(-6deg); }
  .mstack:hover .mstack__c:nth-child(2) { transform: translateY(-6px) rotate(-5deg); }
  .mstack:hover .mstack__c:nth-child(3) { transform: translateY(6px) rotate(-1deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .mstack__c { animation: mfloat 7s var(--ease-io) infinite alternate; }
  .plan__float { animation: mfloat 6.4s var(--ease-io) infinite alternate; }
  .plan:nth-child(2) .plan__float { animation-delay: -2.1s; } .plan:nth-child(3) .plan__float { animation-delay: -4.3s; }
  @keyframes mfloat { from { translate: 0 0; } to { translate: 0 -6px; } }
}
.plan__card { margin: -2px 0 6px; perspective: 900px; }
.plan__card .mcard { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); transform-origin: 50% 80%; }
.plan__float { width: 82%; }
@media (hover: hover) {
  .plan:hover .plan__card .mcard { transform: translate(8px, -6px) rotate(-2.5deg) rotateY(-8deg); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 40px 60px -26px rgba(11, 13, 18, .5), 0 2px 6px rgba(11, 13, 18, .12); }
}
@media (max-width: 960px) {
  .vhero { padding-top: 12px; }
  .vhero__grid { gap: 20px; }
  .vhero__grid > .mstack { order: -1; max-width: 440px; }
  .plan__float { width: 70%; }
}

/* ---------- v26: research-area headers (2026-10-29). Brandon: the area header was "terribly designed". Now a compact
   banner in the family's label colour (cap -> label gradient), white type, floating ball-and-stick molecules, a drifting
   amino-acid chain from one of the family's own sequences, and up to three vials on the right (desktop). ---------- */
.ahero { padding: 18px 0 0; }
.ahero__box { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 24px; min-height: 300px; padding: clamp(26px, 3.4vw, 44px) clamp(22px, 3.6vw, 52px); border-radius: 32px; color: #fff;
  background: radial-gradient(70% 120% at 85% 20%, color-mix(in srgb, var(--glow) 30%, transparent), transparent 60%), radial-gradient(90% 140% at 0% 100%, color-mix(in srgb, #000 30%, var(--c)), transparent 70%), linear-gradient(125deg, var(--cap) 0%, var(--c) 78%);
  box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--c) 80%, #000), inset 0 1px 0 rgba(255, 255, 255, .16); }
.ahero__box::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(80% 90% at 70% 40%, #000, transparent 75%); mask-image: radial-gradient(80% 90% at 70% 40%, #000, transparent 75%); }
.ahero__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ahero__mol { position: absolute; width: 120px; overflow: visible; }
.ahero__mol line { stroke: rgba(255, 255, 255, .34); stroke-width: 2.2; stroke-linecap: round; }
.ahero__mol circle { fill: color-mix(in srgb, var(--c) 70%, #fff); stroke: rgba(255, 255, 255, .55); stroke-width: 1.6; }
.ahero__mol circle.lit { fill: var(--glow); stroke: #fff; filter: drop-shadow(0 0 6px var(--glow)); }
.ahero__mol--a { left: 54%; top: 6%; width: 110px; opacity: .85; }
.ahero__mol--b { right: 3%; bottom: 10%; width: 150px; opacity: .6; }
.ahero__mol--c { left: 38%; bottom: -8%; width: 130px; opacity: .45; }
.ahero__chain { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; gap: 22px; padding-left: clamp(22px, 3.6vw, 52px); opacity: .75; }
.ahero__box { padding-bottom: 66px; }
.ahero__chain li { position: relative; flex: none; padding: 4px 9px; border-radius: 999px; font: 600 .6875rem/1.2 var(--ff-mono); letter-spacing: .04em; color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); transform: translateY(calc(sin(var(--k) * 1.1rad) * 9px)); }
.ahero__chain li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 22px; height: 1.5px; background: rgba(255, 255, 255, .4); }
.ahero__copy { position: relative; max-width: 560px; }
.ahero .crumbs { color: rgba(255, 255, 255, .7); margin-bottom: 14px; font-size: .6875rem; }
.ahero .crumbs a { color: rgba(255, 255, 255, .86); }
.ahero h1 { color: #fff; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); font-variation-settings: "wdth" 120; letter-spacing: -.03em; line-height: 1; }
.ahero__copy > p:not(.ahero__meta) { margin-top: 12px; color: rgba(255, 255, 255, .84); font-size: 1.0625rem; line-height: 1.5; max-width: 46ch; }
.ahero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ahero__meta span { padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.ahero__vials { position: relative; height: 240px; }
.ahero__vials .fv { width: 82px; bottom: 6px; }
.ahero__vials .fv:nth-child(1) { left: calc(50% - 140px); --rot: -6deg; }
.ahero__vials .fv:nth-child(2) { left: calc(50% - 41px); --dy: -14px; --rot: 3deg; z-index: 1; }
.ahero__vials .fv:nth-child(3) { left: calc(50% + 58px); --rot: 7deg; }
.ahero__vials .fv:only-child { left: calc(50% - 41px); }
.ahero__vials .fv__img img { filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .35)); }
.ahero__vials .fv__shadow { opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .ahero__mol { animation: amol 9s var(--ease-io) infinite alternate; }
  .ahero__mol--b { animation-duration: 11s; animation-delay: -3s; } .ahero__mol--c { animation-duration: 13s; animation-delay: -6s; }
  @keyframes amol { from { translate: 0 0; rotate: 0deg; } to { translate: 10px -12px; rotate: 8deg; } }
  .ahero__chain { animation: achain 26s linear infinite alternate; }
  @keyframes achain { from { translate: 0 0; } to { translate: -90px 0; } }
}
@media (max-width: 760px) {
  .ahero { padding-top: 10px; }
  .ahero__box { grid-template-columns: 1fr; min-height: 0; padding: 22px 20px 56px; border-radius: 24px; }
  .ahero__vials { display: none; }
  .ahero h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .ahero__copy > p:not(.ahero__meta) { font-size: .9375rem; margin-top: 8px; }
  .ahero__meta { margin-top: 12px; gap: 6px; }
  .ahero__meta span { font-size: .5625rem; padding: 5px 9px; }
  .ahero .crumbs { margin-bottom: 10px; }
  .ahero__mol--a { left: auto; right: -14px; top: -10px; width: 92px; opacity: .55; }
  .ahero__mol--b { right: -24px; bottom: 30px; width: 110px; opacity: .35; }
  .ahero__mol--c { display: none; }
  .ahero__chain { padding-left: 20px; bottom: 14px; gap: 16px; }
  .ahero__chain li { font-size: .5625rem; padding: 3px 7px; }
  .ahero__chain li + li::before { width: 16px; }
}

/* ---------- v27 (2026-10-29): PDP gallery, certificate section, step cards, molecule cards. One elevated language:
   frosted glass cards (white -> translucent white, 1px light rim, layered soft shadow), lift on hover, family colour
   (--c / --cap / --glow) for accents, gradient discs instead of flat black circles, and one icon family (ICON3). ---------- */
:root { --glass: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .62)); --glass-rim: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 1px 0 #fff;
  --glass-sh: 0 1px 2px rgba(11, 13, 18, .05), 0 12px 32px -14px rgba(11, 13, 18, .18), 0 34px 60px -40px rgba(11, 13, 18, .28);
  --glass-sh-h: 0 1px 2px rgba(11, 13, 18, .06), 0 18px 40px -14px rgba(11, 13, 18, .24), 0 46px 80px -44px rgba(11, 13, 18, .34); }
.glass { background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }

/* gallery: the picture only; Certificate + Molecule are two wide toggle cards under it (desktop) */
.gtabs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gtabs--2 button { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 20px; text-align: left; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.gtabs--2 button:hover { transform: translateY(-2px); box-shadow: var(--glass-rim), var(--glass-sh-h); }
.gtabs--2 button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--c), var(--glass-sh); }
.gtabs--2 .gtabs__i { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(150deg, color-mix(in srgb, var(--glow) 55%, #fff), color-mix(in srgb, var(--glow) 18%, #fff)); }
.gtabs--2 .gtabs__i b { font-size: .9375rem; color: var(--c); }
.gtabs__t { display: grid; gap: 3px; min-width: 0; }
.gtabs__t b { font: 700 1rem/1.2 var(--ff-display); font-variation-settings: "wdth" 108; color: var(--ink); }
.gtabs__t small { font-size: .6875rem; letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gtabs__go { width: 30px; height: 30px; border-radius: 50%; background: var(--ground); position: relative; }
.gtabs__go::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-top: 2px solid var(--ink-2); border-right: 2px solid var(--ink-2); transform: translateX(-1px) rotate(45deg); }
.gtabs--2 button[aria-pressed="true"] .gtabs__go { background: var(--c); }
.gtabs--2 button[aria-pressed="true"] .gtabs__go::after { border-color: #fff; width: 9px; height: 9px; border: 0; background: linear-gradient(45deg, transparent 44%, #fff 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #fff 44% 56%, transparent 56%); transform: none; }
@media (min-width: 961px) { .gallery__main .view--float .fv { width: 32%; } }
.gallery__main .view--float .fv__img { filter: drop-shadow(0 30px 30px rgba(11, 13, 18, .16)); }

/* certificate section */
.coa2-sec { position: relative; }
.coa2__head { text-align: center; max-width: 680px; margin: 0 auto var(--s7); }
.coa2__head .eyebrow { justify-content: center; }
.coa2__head h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); font-variation-settings: "wdth" 118; letter-spacing: -.03em; line-height: 1.02; margin-top: 10px; }
.coa2__head > p:last-child { margin-top: 14px; color: var(--ink-2); }
.coa2 { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: 20px; align-items: stretch; }
.coa2__hero { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; padding: 28px; border-radius: 28px; color: #fff;
  background: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--glow) 34%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--cap) 70%, #0B0D12), color-mix(in srgb, var(--c) 55%, #05070A) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 40px 70px -40px color-mix(in srgb, var(--c) 90%, #000), 0 2px 6px rgba(11, 13, 18, .2); }
.coa2__hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%); }
.coa2__lab { display: flex; align-items: center; gap: 12px; }
.coa2__labmark { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); }
.coa2__labmark svg { width: 28px; height: 28px; }
.coa2__lab b { display: block; font: 700 1rem/1.2 var(--ff-display); }
.coa2__lab small { font-size: .75rem; color: rgba(255, 255, 255, .7); }
.coa2__sample { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: #FFE7A3; color: #5B4300; font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; }
.coa2__kicker { margin-top: 26px; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--glow); display: flex; align-items: center; gap: 10px; }
.coa2__kicker::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--glow); }
.coa2__pv { margin-top: 6px; font: 800 clamp(3.6rem, 2.6rem + 3vw, 5.2rem)/.95 var(--ff-display); font-variation-settings: "wdth" 112; letter-spacing: -.04em; }
.coa2__pv small { font-size: .38em; letter-spacing: 0; opacity: .7; margin-left: 4px; }
.coa2__pvl { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); margin-top: 6px; }
.coa2__trace { margin: 18px -4px 0; }
.coa2__chrom { display: block; width: 100%; height: 86px; }
.coa2__chrom-l { fill: none; stroke: var(--glow); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.coa2__chrom-b { stroke: rgba(255, 255, 255, .25); stroke-width: 1; vector-effect: non-scaling-stroke; }
.coa2__trace p { margin-top: 6px; font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .45); text-align: right; }
.coa2__grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); }
.coa2__grid div { padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.coa2__grid div:nth-child(odd) { padding-right: 12px; border-right: 1px solid rgba(255, 255, 255, .14); }
.coa2__grid div:nth-child(even) { padding-left: 16px; }
.coa2__grid dt { font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.coa2__grid dd { margin: 4px 0 0; font-weight: 700; font-size: .9375rem; }
.coa2__grid dd.is-hl { color: var(--glow); }
.coa2__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 18px; }
.coa2__chips span { padding: 6px 11px; border-radius: 999px; font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); color: rgba(255, 255, 255, .86); }
.coa2__cta { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: 700 .9375rem/1 var(--ff-body); cursor: pointer; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); transition: transform .3s var(--ease-out); }
.coa2__cta:hover { transform: translateY(-2px); }
.coa2__cta span, .lotc__cta span { transition: transform .3s var(--ease-out); }
.coa2__cta:hover span, .lotc__cta:hover span { transform: translateX(4px); }
.coa2__panel { display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); }
.coa2__ph { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.coa2__ph > .mono { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.coa2__count { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: #E3F6EC; color: #10734A; font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; }
.coa2__count svg, .coa2__pass svg, .lotc__t svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.coa2__rows { flex: 1; }
.coa2__rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto 74px; align-items: center; gap: 14px; padding: 15px 24px; border-bottom: 1px solid var(--line); transition: background-color .25s; }
.coa2__rows li:hover { background: color-mix(in srgb, var(--glow) 12%, transparent); }
.coa2__rk b { display: block; font-weight: 700; font-size: .9375rem; }
.coa2__rk small { display: block; margin-top: 3px; font-size: .625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.coa2__rows em { font-style: normal; font-weight: 700; text-align: right; }
.coa2__pass { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; font-style: normal; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: #10734A; }
.coa2__rows li.is-fail .coa2__pass { color: #B42318; }
.coa2__foot { padding: 16px 24px; font-size: .8125rem; color: var(--ink-3); line-height: 1.55; }
.coa2__lots { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--line); }
.coa2__lh { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; }
.coa2__lh h3 { font-size: 1.375rem; font-variation-settings: "wdth" 112; }
.coa2__lh p { color: var(--ink-2); font-size: .9375rem; margin-top: 4px; max-width: 60ch; }
.coa2__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 300px); gap: 16px; overflow-x: auto; padding: 4px 4px 22px; margin: 0 -4px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.lotc { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; padding: 18px; border-radius: 22px; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.lotc:hover { transform: translateY(-4px); box-shadow: var(--glass-rim), var(--glass-sh-h); }
.lotc__new { position: absolute; top: 16px; right: 16px; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--glow) 40%, #fff); color: var(--c); font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; }
.lotc__top { display: flex; align-items: center; gap: 12px; }
.lotc__top picture { width: 40px; height: 52px; border-radius: 12px; background: var(--ground); display: grid; place-items: center; flex: none; }
.lotc__top img { height: 46px; width: auto; }
.lotc__top b { display: block; font-size: .9375rem; }
.lotc__top .mono { font-size: .625rem; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }
.lotc__pv { margin-top: 16px; font: 800 2.4rem/1 var(--ff-display); font-variation-settings: "wdth" 112; letter-spacing: -.03em; }
.lotc__pv small { font-size: .45em; opacity: .55; }
.lotc__pvl { font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.lotc__mg { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ground) 80%, #fff); }
.lotc__mg small { display: block; font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.lotc__mg b { font-size: .875rem; }
.lotc__mg i { font-style: normal; color: var(--ink-3); }
.lotc__mg em { margin-left: auto; font-style: normal; font-size: .625rem; padding: 3px 8px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.lotc__t { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.lotc__t li { position: relative; padding: 8px 10px; border-radius: 12px; background: #F1FAF5; box-shadow: inset 0 0 0 1px #CDEBDB; }
.lotc__t li.is-fail { background: #FFF1F0; box-shadow: inset 0 0 0 1px #F7C6C2; }
.lotc__t small { display: block; font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.lotc__t b { font-size: .8125rem; }
.lotc__t svg { position: absolute; top: 8px; right: 8px; color: #10734A; }
.lotc__foot { margin: 14px 0 12px; font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lotc__cta { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); font: 700 .875rem/1 var(--ff-body); color: var(--ink); cursor: pointer; transition: box-shadow .25s, background-color .25s; }
.lotc__cta:hover { box-shadow: inset 0 0 0 1.5px var(--ink); background: #fff; }
@media (max-width: 960px) { .coa2 { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .coa2__head { text-align: left; margin-bottom: var(--s5); } .coa2__head .eyebrow { justify-content: flex-start; }
  .coa2__hero { padding: 22px; border-radius: 24px; }
  .coa2__rows li { grid-template-columns: minmax(0, 1fr) auto; padding: 13px 18px; gap: 4px 10px; }
  .coa2__pass { grid-column: 2; justify-content: flex-end; }
  .coa2__rows em { grid-row: 1; grid-column: 2; }
  .coa2__ph, .coa2__foot { padding-inline: 18px; }
  .coa2__lh { flex-direction: column; align-items: flex-start; }
  .coa2__rail { grid-auto-columns: 82%; }
}

/* step cards: glass, gradient disc with an icon, lift on hover */
.vsteps { gap: 18px; }
.vsteps li { position: relative; overflow: hidden; padding: 26px 26px 28px; border-radius: 26px; gap: 10px; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.vsteps li::before { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow, #B0D9E7) 60%, transparent), transparent 70%); opacity: .55; transition: opacity .4s, transform .6s var(--ease-out); }
.vsteps li:hover { transform: translateY(-6px); box-shadow: var(--glass-rim), var(--glass-sh-h); }
.vsteps li:hover::before { opacity: .9; transform: scale(1.12); }
.vsteps__top { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.vsteps__n { width: auto; height: auto; margin: 0; background: none; color: var(--ink-3); font-size: .75rem; letter-spacing: .14em; border-radius: 0; display: block; }
.vsteps__ic { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  background: radial-gradient(120% 120% at 30% 20%, #fff, color-mix(in srgb, var(--glow, #B0D9E7) 70%, #fff) 60%, color-mix(in srgb, var(--glow, #B0D9E7) 100%, var(--c, #05789D) 18%));
  box-shadow: inset 0 1px 0 #fff, inset 0 -6px 12px -6px color-mix(in srgb, var(--c, #05789D) 30%, transparent), 0 10px 22px -10px color-mix(in srgb, var(--c, #05789D) 60%, transparent); }
.vsteps__ic svg { width: 32px; height: 32px; }
.vsteps { --c: var(--plum-cap); --glow: var(--plum-glow); }
[data-ch] .vsteps { --c: inherit; --glow: inherit; }
.vsteps b { position: relative; font-size: 1.1875rem; }
.vsteps p { position: relative; line-height: 1.55; }
@media (prefers-reduced-motion: no-preference) {
  .vsteps li:hover .vsteps__ic { animation: icBob .9s var(--ease-out); }
  @keyframes icBob { 40% { transform: translateY(-4px) rotate(-4deg); } }
}
@media (max-width: 760px) { .vsteps { grid-template-columns: 1fr; gap: 12px; } .vsteps li { padding: 20px; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; } .vsteps__top { grid-row: span 2; flex-direction: column-reverse; gap: 6px; margin: 0; } .vsteps__ic { width: 52px; height: 52px; } .vsteps__ic svg { width: 28px; height: 28px; } .vsteps b, .vsteps p { grid-column: 2; } }

/* vertical step lists: glass cards on a gradient rail with gradient discs */
.steps { gap: 12px; }
.steps li { padding: 18px 20px 18px 74px; border-radius: 20px; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.steps li:hover { transform: translateX(4px); box-shadow: var(--glass-rim), var(--glass-sh-h); }
.steps li::before { left: 18px; top: 16px; width: 38px; height: 38px; border: 0; color: #fff; font: 700 .875rem/1 var(--ff-mono); place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--glow, #B0D9E7) 70%, #fff), var(--c, #05789D) 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 16px -8px var(--c, #05789D); }
.steps li::after { left: 36px; top: 58px; bottom: -14px; width: 2px; background: linear-gradient(var(--c, #05789D), transparent); opacity: .35; }
.steps { --c: var(--plum-cap); --glow: var(--plum-glow); }

/* molecule section: glass cards with a tinted head, gradient residue beads, a lit 3D stage */
.mol .panelbox { position: relative; overflow: hidden; border-radius: 26px; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); }
.mol .panelbox::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--cap), var(--glow)); }
.mol th, .mol td { padding: 15px 0; }
.mol tr:last-child th, .mol tr:last-child td { border-bottom: 0; }
.mol td { font-size: 1rem; }
.seq b { border: 0; color: var(--c); background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--glow) 55%, #fff)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent), 0 6px 14px -8px var(--c); transition: transform .25s var(--ease-out); }
.seq li:hover b { transform: translateY(-3px); }
.seq li + li::before { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 40%, transparent), var(--c)); }
.m3d { align-items: stretch; }
.m3d__view { box-shadow: var(--glass-rim), var(--glass-sh); }
.m3d__side { padding: 26px; border-radius: 26px; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); }
.mol { align-items: stretch; }
.mol .panelbox { display: flex; flex-direction: column; }
.comp { margin-top: auto; padding-top: 26px; }
.comp > .mono { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.comp__bar { display: flex; gap: 3px; height: 12px; border-radius: 999px; overflow: hidden; }
.comp__bar i { display: block; height: 100%; }
.comp--nonpolar { background: linear-gradient(90deg, #F2C14E, #E9A23B); } .comp--polar { background: linear-gradient(90deg, #4FB59A, #2E8F73); }
.comp--positive { background: linear-gradient(90deg, #5B8DEF, #3563D8); } .comp--negative { background: linear-gradient(90deg, #F07A7A, #D84D4D); } .comp--modified { background: linear-gradient(90deg, #B7BDC8, #8D95A3); }
.comp__key { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 18px; margin-top: 14px; }
.comp__key li { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--ink-2); }
.comp__key li > i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.comp__key b { margin-left: auto; color: var(--ink); }
.comp__key span { font-size: .6875rem; min-width: 30px; text-align: right; }

/* ---------- v28: footer (2026-10-29). Brandon: "extremely long on mobile". Desktop unchanged (columns are <details>
   held open, the marker hidden). Phones: trust row is a 2x2 of compact chips, the brand block is one line of logo +
   email + track, link columns fold into an accordion, the RUO note is set small, the trace is dropped. ---------- */
.ftr__col summary { list-style: none; cursor: default; }
.ftr__col summary::-webkit-details-marker { display: none; }
@media (min-width: 641px) { .ftr__col summary { pointer-events: none; } }
@media (max-width: 640px) {
  .ftr__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 18px 0 14px; }
  .ftr__trust li { flex-direction: row; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; font-size: 0; }
  .ftr__trust li b { font-size: .75rem; line-height: 1.2; }
  .ftr__trust svg { width: 18px; height: 18px; }
  .ftr .ftr__top { display: block; padding-top: 18px; }
  .ftr__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .ftr__logo { width: 104px; height: auto; flex: none; }
  .ftr__about { display: none; }
  .ftr__mail { font-size: .8125rem; margin-left: auto; }
  .ftr__track { display: none; }
  .ftr__col { border-bottom: 1px solid var(--line); }
  .ftr__col summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 2px; margin: 0; }
  .ftr__col summary::after { content: ""; width: 8px; height: 8px; border-right: 1.8px solid var(--ink-2); border-bottom: 1.8px solid var(--ink-2); transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease-out); }
  .ftr__col[open] summary::after { transform: translateY(2px) rotate(-135deg); }
  .ftr__col ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 0 2px 16px; margin: 0; }
  .ftr__col li + li, .ftr .ftr__col li + li { margin-top: 0; }
  .ftr__col a { font-size: .875rem; }
  .ftr__ruo { margin-top: 16px; padding: 12px 14px; font-size: .6875rem; line-height: 1.5; border-radius: 14px; }
  .ftr__trace { display: none; }
  .ftr__base { margin-top: 12px; flex-direction: column; gap: 4px; font-size: .6875rem; }
  .ftr__base .mono { font-size: .5625rem; }
  .ftr { padding-bottom: 24px; }
}

/* ---------- v29 (2026-10-29): service pages (Reading a COA, Contact, Track order, Research sets). Brandon: redesign
   "as if by a top US agency". They share the coloured banner header (.uhero = .ahero), glass cards, the ICON3 family,
   gradient discs and lift-on-hover. Each page takes one family colour: COA guide sapphire, contact navy, track teal,
   research sets violet. ---------- */
.uhero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--glow); }
.uhero__eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--glow); }
.uhero .crumbs { margin-bottom: 18px; }
.uhero__copy a, .ahero__copy p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .5); }
.uhero__side { position: relative; align-self: center; }
.uchips { display: grid; gap: 10px; max-width: 360px; margin-left: auto; }
.uchip { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 14px 30px -18px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .35s var(--ease-out), background-color .35s; }
.uchip:hover { transform: translateX(-4px); background: rgba(255, 255, 255, .18); }
.uchip__ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; color: var(--ink); background: radial-gradient(120% 120% at 30% 20%, #fff, color-mix(in srgb, var(--glow) 70%, #fff)); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -8px rgba(0, 0, 0, .45); }
.uchip__ic svg { width: 26px; height: 26px; }
.uchip small { display: block; font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.uchip b { display: block; font-size: .9375rem; color: #fff; }
.uchip b a { color: #fff; text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  .uchip { animation: uIn .7s var(--ease-out) both; } .uchip:nth-child(2) { animation-delay: .1s; } .uchip:nth-child(3) { animation-delay: .2s; }
  @keyframes uIn { from { opacity: 0; translate: 14px 0; } }
}
/* track: the parcel's path as a glowing vertical timeline */
.ptrack { position: relative; display: grid; gap: 10px; max-width: 380px; margin-left: auto; }
.ptrack::before { content: ""; position: absolute; left: 34px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(var(--glow), rgba(255, 255, 255, .15)); }
.ptrack li { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 18px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ptrack__ic { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: radial-gradient(120% 120% at 30% 20%, #fff, color-mix(in srgb, var(--glow) 70%, #fff)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 60%, transparent), 0 8px 18px -8px rgba(0, 0, 0, .5); }
.ptrack__ic svg { width: 26px; height: 26px; }
.ptrack b { display: block; color: #fff; font-size: .9375rem; }
.ptrack small { display: block; color: rgba(255, 255, 255, .66); font-size: .75rem; margin-top: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .ptrack li { animation: uIn .7s var(--ease-out) both; animation-delay: calc(var(--k) * .1s); }
  .ptrack li:last-child .ptrack__ic { animation: pulseRing 2.4s var(--ease-io) infinite; }
  @keyframes pulseRing { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--glow) 35%, transparent), 0 8px 18px -8px rgba(0, 0, 0, .5); } }
}

/* service layout: glass form + a stack of guidance cards */
.svc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px; align-items: start; }
.svc__form { position: relative; overflow: hidden; padding: clamp(22px, 3vw, 36px); border-radius: 30px; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); }
.svc__form::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--cap), var(--glow)); }
.svc__fh { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.svc__fic { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; flex: none; color: var(--ink); background: radial-gradient(120% 120% at 30% 20%, #fff, color-mix(in srgb, var(--glow) 70%, #fff) 60%, color-mix(in srgb, var(--glow) 100%, var(--c) 18%)); box-shadow: inset 0 1px 0 #fff, 0 10px 22px -10px color-mix(in srgb, var(--c) 60%, transparent); }
.svc__fic svg { width: 32px; height: 32px; }
.svc__fh h2 { font-size: 1.625rem; font-variation-settings: "wdth" 112; }
.svc__fh p { color: var(--ink-3); font-size: .9375rem; margin-top: 2px; }
.svc__form .form-grid label { font-weight: 600; font-size: .875rem; }
.svc__form .field { margin-top: 6px; background: rgba(255, 255, 255, .85); border-radius: 14px; transition: box-shadow .2s, border-color .2s; }
.svc__form .field:focus { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--glow) 55%, transparent); outline: none; }
.svc__send { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.svc__send .mono { font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; }
.svc__k { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; margin: 6px 0 12px; }
.vsteps--stack { grid-template-columns: 1fr; gap: 12px; }
.vsteps--stack li { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; padding: 18px 20px; }
.vsteps--stack .vsteps__top { grid-row: span 2; flex-direction: column-reverse; gap: 6px; margin: 0; align-self: start; }
.vsteps--stack .vsteps__ic { width: 50px; height: 50px; }
.vsteps--stack .vsteps__ic svg { width: 26px; height: 26px; }
.vsteps--stack b, .vsteps--stack p { grid-column: 2; }
.vsteps--stack b { font-size: 1.0625rem; }
.vsteps--stack li:hover { transform: translateX(-4px); }
.tpick { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.tpick legend { width: 100%; margin-bottom: 10px; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.tpick label { position: relative; }
.tpick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tpick span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1.5px var(--line-2); font-weight: 600; font-size: .875rem; transition: box-shadow .2s, background-color .2s, color .2s; }
.tpick label:hover span { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.tpick input:checked + span { background: var(--c); color: #fff; box-shadow: 0 8px 18px -10px var(--c); }
.tpick input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 960px) { .svc { grid-template-columns: 1fr; } .uhero .ahero__box { grid-template-columns: 1fr; } .uchips, .ptrack { margin-left: 0; max-width: none; } }
@media (max-width: 760px) {
  .uhero .ahero__box { padding-bottom: 60px; }
  .uchips { grid-template-columns: 1fr; gap: 8px; margin-top: 6px; }
  .uchip { padding: 9px 12px 9px 9px; } .uchip__ic { width: 38px; height: 38px; border-radius: 12px; } .uchip__ic svg { width: 22px; height: 22px; } .uchip b { font-size: .875rem; }
  .ptrack li { padding: 8px 12px 8px 8px; } .ptrack__ic { width: 40px; height: 40px; } .ptrack__ic svg { width: 22px; height: 22px; } .ptrack::before { left: 28px; }
  .svc__fh h2 { font-size: 1.375rem; } .svc__fic { width: 50px; height: 50px; }
}

/* reading a COA: the sample certificate on a lit plate, checks as glass cards that light their marker */
.anno2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: start; }
.anno2__doc { position: sticky; top: 100px; }
.anno2__light { padding: clamp(16px, 2.4vw, 30px); border-radius: 30px; background: radial-gradient(80% 70% at 50% 0%, color-mix(in srgb, var(--glow) 60%, #fff), color-mix(in srgb, var(--glow) 20%, var(--ground)) 70%); box-shadow: var(--glass-rim), var(--glass-sh); }
.anno2__light .paper { box-shadow: 0 30px 60px -30px rgba(11, 13, 18, .35), 0 2px 6px rgba(11, 13, 18, .08); }
.anno2 .paper .a { background: linear-gradient(150deg, var(--cap), var(--c)); transition: transform .25s var(--ease-out), box-shadow .25s; }
.anno2 .paper .a.is-hl { transform: scale(1.35); box-shadow: 0 0 0 5px color-mix(in srgb, var(--glow) 70%, transparent), 0 0 18px var(--glow); }
.anno2__list { display: grid; gap: 10px; counter-reset: none; }
.anno2__list li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-radius: 20px; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); cursor: default; outline: none; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.anno2__list li:hover, .anno2__list li.is-hl, .anno2__list li:focus-visible { transform: translateX(-4px); box-shadow: inset 0 0 0 2px var(--c), var(--glass-sh-h); }
.anno2__n { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .875rem; font-weight: 700; background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--glow) 70%, #fff), var(--c) 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 16px -8px var(--c); }
.anno2__list b { display: block; font: 700 1.0625rem/1.25 var(--ff-display); font-variation-settings: "wdth" 108; }
.anno2__list p { margin-top: 4px; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
@media (max-width: 960px) { .anno2 { grid-template-columns: 1fr; } .anno2__doc { position: relative; top: 0; } }
.cmp2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cmp2 > div { padding: clamp(22px, 3vw, 34px); border-radius: 28px; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); }
.cmp2__good { background: linear-gradient(160deg, #F2FBF6, rgba(255, 255, 255, .7)) !important; }
.cmp2__bad { background: linear-gradient(160deg, #FFF5F3, rgba(255, 255, 255, .7)) !important; }
.cmp2__k { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.cmp2__k span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; }
.cmp2__good .cmp2__k span { background: linear-gradient(150deg, #34B37A, #10734A); } .cmp2__bad .cmp2__k span { background: linear-gradient(150deg, #F07A6E, #C5372B); }
.cmp2__k svg, .cmp2__good li svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cmp2 ul { display: grid; gap: 4px; }
.cmp2__good li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid #DCEFE4; font-weight: 600; font-size: .9375rem; }
.cmp2__good li svg { color: #10734A; margin-top: 3px; flex: none; }
.cmp2__bad li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F6DEDA; }
.cmp2__bad li i { width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .75rem; color: #C5372B; background: #FFE3DF; }
.cmp2__bad b { display: block; font-size: .9375rem; }
.cmp2__bad li span { color: var(--ink-2); font-size: .875rem; line-height: 1.5; }
.cmp2 li:last-child { border-bottom: 0; }
@media (max-width: 760px) { .cmp2 { grid-template-columns: 1fr; } }
.cta2 { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: clamp(24px, 3.4vw, 44px); border-radius: 30px; color: #fff;
  background: radial-gradient(70% 140% at 100% 0%, color-mix(in srgb, var(--glow) 32%, transparent), transparent 60%), linear-gradient(125deg, var(--cap), var(--c) 80%); box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--c) 80%, #000); }
.cta2 .eyebrow { color: var(--glow); }
.cta2 .eyebrow b { color: #fff; }
.cta2 h2 { color: #fff; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); font-variation-settings: "wdth" 116; margin-top: 8px; }
.cta2 p { color: rgba(255, 255, 255, .8); margin-top: 6px; }
.cta2__acts { display: flex; gap: 10px; flex-wrap: wrap; }
.cta2 .btn { background: #fff; color: var(--ink); }
.cta2 .btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }

/* research sets: steps strip, glass set cards in the family colour, a designed empty state */
.wsteps { margin-bottom: var(--s7); }
.sets__h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.sets__h h2 { font-size: 1.625rem; font-variation-settings: "wdth" 112; }
.sets__h .mono { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; }
.setc.panelbox { position: relative; overflow: hidden; border-radius: 28px; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.setc.panelbox::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--violet-cap), var(--violet-glow)); }
.setc.panelbox:hover { transform: translateY(-3px); box-shadow: var(--glass-rim), var(--glass-sh-h); }
.setc__lines li { padding: 10px 12px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px var(--line); }
.setc__lines li i { width: 10px; height: 26px; border-radius: 4px; background: linear-gradient(var(--cap), var(--c)); }
.setc--empty { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 52px) !important; border-radius: 28px; background: var(--glass) !important; box-shadow: var(--glass-rim), var(--glass-sh) !important; }
.setc--empty::before { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 120%; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--violet-glow) 55%, transparent), transparent 70%); z-index: 0; }
.setc--empty > * { position: relative; }
.setc--empty h2 { font-size: 1.5rem; }
.setc--empty p { max-width: 46ch; }

/* ---------- v30 (2026-10-29): Verify, About, FAQ, Shipping & returns, Glossary, Reading a COA. Brandon: "1/10".
   Same language as v27/v29: coloured banner header, glass cards with lift, gradient icon discs (.ih), family colour per
   page. New pieces: section head (.shead), scan hero, bento cards, manifesto + KPIs, process flow, family tiles, week
   strip, rate cards, glass accordions, glossary cards. ---------- */
.ih { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  background: radial-gradient(120% 120% at 30% 20%, #fff, color-mix(in srgb, var(--glow, #B0D9E7) 70%, #fff) 60%, color-mix(in srgb, var(--glow, #B0D9E7) 100%, var(--c, #05789D) 18%));
  box-shadow: inset 0 1px 0 #fff, inset 0 -6px 12px -6px color-mix(in srgb, var(--c, #05789D) 30%, transparent), 0 10px 22px -10px color-mix(in srgb, var(--c, #05789D) 60%, transparent); }
.ih svg { width: 30px; height: 30px; }
.shead { max-width: 720px; margin-bottom: var(--s6); }
.shead--c { margin-inline: auto; text-align: center; }
.shead--c .eyebrow { justify-content: center; }
.shead h2 { margin-top: 10px; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem); font-variation-settings: "wdth" 118; letter-spacing: -.03em; line-height: 1.03; }
.shead > p:last-child:not(.eyebrow) { margin-top: 12px; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.55; }
.gcardbase, .way, .bcard, .pcard, .rate, .gcard, .t7, .kpi, .fam { background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); }

/* verify hero */
.vhero2 .ahero__box { min-height: 460px; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.vhero2 h1 { font-size: clamp(2.3rem, 1.4rem + 3vw, 4rem); }
.vsearch { display: flex; align-items: center; gap: 8px; margin-top: 24px; padding: 7px 7px 7px 18px; border-radius: 999px; background: #fff; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55), 0 0 0 6px rgba(255, 255, 255, .12); max-width: 560px; }
.vsearch__ic { color: var(--ink-2); display: grid; }
.vsearch__ic svg { width: 24px; height: 24px; }
.vsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 600 1rem/1.2 var(--ff-mono); letter-spacing: .02em; color: var(--ink); padding: 12px 4px; text-transform: uppercase; }
.vsearch input::placeholder { text-transform: none; font-family: var(--ff-body); font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.vsearch .btn { min-height: 50px; flex: none; background: linear-gradient(150deg, var(--cap), var(--c)); }
.vsearch__try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; }
.vsearch__try > span { color: rgba(255, 255, 255, .6); margin-right: 4px; }
.vsearch__try a { padding: 6px 11px; border-radius: 999px; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); transition: background-color .2s; }
.vsearch__try a:hover { background: rgba(255, 255, 255, .24); }
.vhero2__stage { position: relative; height: 380px; }
.vhero2__stage::before { content: ""; position: absolute; left: 50%; top: 52%; width: 300px; height: 300px; translate: -60% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .5), transparent 65%); }
.vscan { position: absolute; left: 50%; top: 50%; width: 128px; translate: -95% -50%; }
.vscan img { filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .35)); }
.vscan__frame { position: absolute; left: 17%; top: 53%; width: 36%; aspect-ratio: 1; }
.vscan__frame i { position: absolute; width: 30%; height: 30%; border: 2.5px solid var(--glow); filter: drop-shadow(0 0 6px var(--glow)); }
.vscan__frame i:nth-child(1) { left: -12%; top: -12%; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.vscan__frame i:nth-child(2) { right: -12%; top: -12%; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.vscan__frame i:nth-child(3) { left: -12%; bottom: -12%; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.vscan__frame i:nth-child(4) { right: -12%; bottom: -12%; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.vscan__frame b { position: absolute; left: -6%; right: -6%; top: 0; height: 2px; border-radius: 2px; background: var(--glow); box-shadow: 0 0 12px 2px var(--glow); }
.vres { position: absolute; right: 0; top: 50%; translate: 0 -46%; width: 220px; padding: 18px; border-radius: 22px; color: var(--ink); background: linear-gradient(160deg, #fff, rgba(255, 255, 255, .86)); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6), inset 0 1px 0 #fff; }
.vres__k { display: flex; align-items: center; gap: 8px; font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; color: #10734A; }
.vres__dot { width: 8px; height: 8px; border-radius: 50%; background: #1FA971; box-shadow: 0 0 0 4px #D6F2E4; }
.vres > b { display: block; margin-top: 10px; font-size: .9375rem; }
.vres__p { font-size: .8125rem; color: var(--ink-3); }
.vres__pv { margin-top: 10px; font: 800 2.4rem/1 var(--ff-display); font-variation-settings: "wdth" 112; color: var(--c); }
.vres__pv small { font-size: .45em; opacity: .6; }
.vres__ok { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: #10734A; }
.vres__ok svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .vscan__frame b { animation: beam 2.6s var(--ease-io) infinite alternate; }
  @keyframes beam { from { top: 0; } to { top: 100%; } }
  .vres { animation: vresIn 1s var(--ease-out) .5s both, mfloat 6s var(--ease-io) 1.5s infinite alternate; }
  @keyframes vresIn { from { opacity: 0; translate: 16px -46%; } }
}
@media (max-width: 960px) { .vhero2 .ahero__box { grid-template-columns: 1fr; } .vhero2__stage { height: 300px; } }
@media (max-width: 760px) {
  .vhero2__stage { height: 250px; margin-top: 8px; } .vhero2__stage::before { width: 220px; height: 220px; }
  .vscan { width: 96px; translate: -110% -50%; } .vres { width: 180px; padding: 14px; right: 2%; } .vres__pv { font-size: 2rem; }
  .vsearch { padding-left: 14px; } .vsearch .btn { padding-inline: 16px; min-height: 46px; } .vsearch input { font-size: .875rem; }
}

/* two ways in */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.way { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 150px; grid-template-rows: auto 1fr; gap: 18px 20px; padding: 28px; border-radius: 28px; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.way:hover { transform: translateY(-5px); box-shadow: var(--glass-rim), var(--glass-sh-h); }
.way__h { display: flex; gap: 16px; align-items: center; grid-column: 1 / -1; }
.way__h h3 { font-size: 1.375rem; font-variation-settings: "wdth" 112; }
.way__h p { color: var(--ink-3); font-size: .9375rem; margin-top: 2px; }
.way__steps { display: grid; gap: 10px; align-content: start; }
.way__steps li { display: flex; gap: 12px; align-items: baseline; font-weight: 600; font-size: .9375rem; }
.way__steps b { font: 600 .6875rem/1 var(--ff-mono); color: var(--c); letter-spacing: .08em; }
.way__art { position: relative; display: grid; place-items: center; align-self: stretch; border-radius: 20px; background: radial-gradient(90% 90% at 50% 40%, #fff, color-mix(in srgb, var(--glow) 40%, var(--ground))); min-height: 170px; }
.way__art--label picture { width: 62px; }
.way__art--label img { filter: drop-shadow(0 16px 16px rgba(11, 13, 18, .2)); }
.way__ping { position: absolute; left: 50%; top: 58%; width: 26px; height: 26px; margin: -13px 0 0 -20px; border-radius: 6px; box-shadow: 0 0 0 2px var(--c); }
@media (prefers-reduced-motion: no-preference) { .way__ping { animation: ping 2s var(--ease-out) infinite; } @keyframes ping { 0% { box-shadow: 0 0 0 2px var(--c); opacity: 1; } 100% { box-shadow: 0 0 0 14px transparent; opacity: 0; } } }
.slip { width: 88%; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 14px 26px -16px rgba(11, 13, 18, .35); font-size: .6875rem; transform: rotate(-3deg); }
.slip__h { display: flex; justify-content: space-between; padding-bottom: 7px; margin-bottom: 4px; border-bottom: 1px dashed var(--line-2); font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.slip__row { display: flex; justify-content: space-between; gap: 6px; padding: 5px 0; }
.slip__row--hl { margin: 2px -6px; padding: 5px 6px; border-radius: 6px; background: color-mix(in srgb, var(--glow) 55%, #fff); font-weight: 700; color: var(--c); }
@media (max-width: 860px) { .ways { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .way { grid-template-columns: 1fr; padding: 22px; } .way__art { min-height: 140px; } }

/* bento of three */
.bento3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bcard { padding: 24px; border-radius: 26px; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.bcard:hover { transform: translateY(-5px); box-shadow: var(--glass-rim), var(--glass-sh-h); }
.bcard__h { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.bcard__h .ih { width: 48px; height: 48px; } .bcard__h .ih svg { width: 26px; height: 26px; }
.bcard__h h3 { font-size: 1.125rem; font-variation-settings: "wdth" 108; }
.bmini li { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .875rem; }
.bmini li:last-child { border: 0; }
.bmini em { font-style: normal; font-weight: 700; }
.bmini i svg { width: 15px; height: 15px; fill: none; stroke: #10734A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bdl div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.bdl div:last-child { border: 0; }
.bdl dt { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.bdl dd { margin: 0; font-weight: 700; font-size: .875rem; }
.bcard__note { margin-top: 14px; font-size: .8125rem; color: var(--ink-3); }
@media (max-width: 900px) { .bento3 { grid-template-columns: 1fr; } }

/* about */
.abhero .ahero__box { min-height: 420px; }
.abhero h1 { font-size: clamp(2.3rem, 1.4rem + 3vw, 4rem); }
.abhero__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.abhero__cta .btn { background: #fff; color: var(--ink); }
.abhero__cta .btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.abhero__vials { height: 300px; }
.abhero__vials .fv { width: 96px; }
.abhero__vials .fv:nth-of-type(1), .abhero__vials > div:nth-child(1) .fv { left: calc(50% - 168px); --rot: -7deg; }
.abhero__vials > div:nth-child(2) .fv { left: calc(50% - 48px); --dy: -16px; --rot: 2deg; z-index: 1; }
.abhero__vials > div:nth-child(3) .fv { left: calc(50% + 72px); --rot: 8deg; }
.manifesto { max-width: 1020px; }
.manifesto__big { margin-top: 18px; font: 600 clamp(1.5rem, 1rem + 1.8vw, 2.5rem)/1.32 var(--ff-display); font-variation-settings: "wdth" 104; letter-spacing: -.02em; color: var(--ink-3); }
.manifesto__big span { color: var(--ink); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--plum-glow) 70%, transparent) 62%); }
.manifesto__big em { font-style: normal; color: var(--ink); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: var(--s7); }
.kpi { padding: 24px; border-radius: 24px; position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--plum-cap), var(--cobalt-cap), var(--wine-cap), var(--teal-cap)); opacity: .8; }
.kpi b { display: block; font: 800 clamp(2.4rem, 1.8rem + 1.6vw, 3.4rem)/1 var(--ff-display); font-variation-settings: "wdth" 116; letter-spacing: -.03em; }
.kpi span { display: block; margin-top: 10px; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }
@media (max-width: 900px) { .kpis { grid-template-columns: 1fr 1fr; } }
.prin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.prin--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcard { position: relative; overflow: hidden; padding: 26px; border-radius: 26px; display: grid; gap: 12px; align-content: start; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.pcard::before { content: ""; position: absolute; right: -50px; top: -50px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow, #B0D9E7) 60%, transparent), transparent 70%); opacity: .5; transition: opacity .4s, transform .6s var(--ease-out); }
.pcard:hover { transform: translateY(-6px); box-shadow: var(--glass-rim), var(--glass-sh-h); }
.pcard:hover::before { opacity: .9; transform: scale(1.12); }
.pcard > * { position: relative; }
.pcard h3 { margin-top: 8px; font-size: 1.1875rem; font-variation-settings: "wdth" 108; }
.pcard p { color: var(--ink-2); font-size: .9375rem; line-height: 1.55; }
@media (max-width: 1000px) { .prin { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .prin, .prin--3 { grid-template-columns: 1fr; } .pcard { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; padding: 20px; } .pcard .ih { grid-row: span 2; width: 48px; height: 48px; } .pcard h3 { margin: 0; } .pcard p { grid-column: 2; } }
.flow { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.flow::before { content: ""; position: absolute; left: 8%; right: 8%; top: 28px; height: 2px; background: linear-gradient(90deg, transparent, var(--c), var(--glow), var(--c), transparent); opacity: .5; }
.flow li { position: relative; display: grid; justify-items: center; text-align: center; gap: 8px; padding: 0 6px; }
.flow .ih { position: relative; z-index: 1; }
.flow__n { margin-top: 6px; font-size: .6875rem; letter-spacing: .14em; color: var(--ink-3); }
.flow h3 { font-size: 1.0625rem; font-variation-settings: "wdth" 108; }
.flow p { color: var(--ink-2); font-size: .875rem; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) { .flow .ih { transition: transform .4s var(--ease-out); } .flow li:hover .ih { transform: translateY(-6px) scale(1.06); } }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr; gap: 12px; } .flow::before { left: 27px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: linear-gradient(var(--c), var(--glow), transparent); }
  .flow li { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 16px; padding: 0; } .flow .ih { grid-row: span 3; } .flow__n { margin: 0; } }
.fams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fam { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 22px; text-decoration: none; color: var(--ink); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.fam::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--glow) 45%, transparent), transparent 60%); opacity: .7; }
.fam > * { position: relative; }
.fam:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 2px var(--c), var(--glass-sh-h); }
.fam__v { width: 54px; height: 76px; border-radius: 16px; display: grid; place-items: center; flex: none; background: linear-gradient(160deg, var(--cap), var(--c)); }
.fam__v img { height: 66px; width: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); }
.fam__t b { display: block; font-size: 1rem; }
.fam__t small { font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.fam__go { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--c); font-weight: 700; transition: transform .3s var(--ease-out); }
.fam:hover .fam__go { transform: translateX(3px); }
@media (max-width: 1000px) { .fams { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fams { grid-template-columns: 1fr; } }
.ruo2 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 52px); border-radius: 32px; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); }
.ruo2 h2 { margin-top: 10px; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); font-variation-settings: "wdth" 116; letter-spacing: -.02em; }
.ruo2 > div > p:last-child { margin-top: 12px; color: var(--ink-2); }
.ruo2 ul { display: grid; gap: 10px; }
.ruo2 li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px var(--line); }
.ruo2 li .ih { width: 44px; height: 44px; } .ruo2 li .ih svg { width: 24px; height: 24px; }
.ruo2 li b { display: block; }
.ruo2 li span { color: var(--ink-2); font-size: .9rem; }
@media (max-width: 860px) { .ruo2 { grid-template-columns: 1fr; } }

/* hero search (FAQ, glossary) */
.hsearch { max-width: 420px; margin-left: auto; }
.hsearch__f { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 16px; border-radius: 999px; background: #fff; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55), 0 0 0 6px rgba(255, 255, 255, .12); }
.hsearch__f svg { width: 24px; height: 24px; flex: none; color: var(--ink-2); }
.hsearch__f input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 1rem/1.2 var(--ff-body); padding: 13px 4px; color: var(--ink); }
.hsearch__n { margin-top: 12px; padding-left: 18px; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
@media (max-width: 960px) { .hsearch { margin-left: 0; max-width: none; } }

/* FAQ */
.faq2 { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 36px; align-items: start; }
.faq2__nav { position: sticky; top: 100px; display: grid; gap: 6px; }
.faq2__nav a { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 18px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9375rem; transition: background-color .2s, opacity .2s; }
.faq2__nav a:hover { background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); }
.faq2__nav a.is-off { opacity: .35; }
.faq2__nav .ih { width: 40px; height: 40px; } .faq2__nav .ih svg { width: 22px; height: 22px; }
.faq2__nav small { margin-left: auto; font-size: .625rem; color: var(--ink-3); padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .7); }
.faq2__help { margin-top: 14px; padding: 20px; border-radius: 22px; color: #fff; background: radial-gradient(90% 90% at 100% 0%, color-mix(in srgb, var(--glow) 35%, transparent), transparent 60%), linear-gradient(150deg, var(--cap), var(--c)); box-shadow: 0 24px 40px -26px var(--c); }
.faq2__help b { font-size: 1.0625rem; }
.faq2__help p { color: rgba(255, 255, 255, .8); font-size: .875rem; margin: 4px 0 14px; }
.faq2__help .btn { background: #fff; color: var(--ink); }
.faq2__g + .faq2__g { margin-top: 36px; }
.faq2__g { scroll-margin-top: 100px; }
.faq2__g h2 { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-size: 1.5rem; font-variation-settings: "wdth" 112; }
.faq2__g h2 .ih { width: 44px; height: 44px; } .faq2__g h2 .ih svg { width: 24px; height: 24px; }
.qa--glass { display: grid; gap: 10px; border: 0; }
.qa--glass details { border: 0; border-radius: 20px; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); transition: box-shadow .3s; }
.qa--glass details[open] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent), var(--glass-sh-h); }
.qa--glass summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-weight: 700; font-size: 1.0625rem; cursor: pointer; list-style: none; }
.qa--glass summary::-webkit-details-marker { display: none; }
.qa--glass summary::after { display: none; }
.qa--glass summary i { position: relative; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--ground); transition: background-color .25s, transform .35s var(--ease-out); }
.qa--glass summary i::before, .qa--glass summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--ink); transition: transform .35s var(--ease-out), background-color .25s; }
.qa--glass summary i::after { transform: rotate(90deg); }
.qa--glass details[open] summary i { background: var(--c); transform: rotate(180deg); }
.qa--glass details[open] summary i::before, .qa--glass details[open] summary i::after { background: #fff; }
.qa--glass details[open] summary i::after { transform: rotate(0deg); }
.qa--glass details > div { padding: 0 22px 20px; color: var(--ink-2); line-height: 1.6; max-width: 72ch; }
.faq2__empty { padding: 30px 0; }
@media (max-width: 960px) { .faq2 { grid-template-columns: 1fr; gap: 20px; } .faq2__nav { position: relative; top: 0; display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; scrollbar-width: none; } .faq2__nav a { flex: none; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); } .faq2__help { display: none; } }
@media (max-width: 640px) { .qa--glass summary { padding: 16px 16px; font-size: 1rem; } .qa--glass details > div { padding: 0 16px 16px; } .faq2__g h2 { font-size: 1.25rem; } }

/* shipping */
.toc2 { position: sticky; top: 76px; z-index: 15; padding: 14px 0 4px; }
.toc2 .wrap { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.toc2 a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: .875rem; color: var(--ink); text-decoration: none; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .25s var(--ease-out); }
.toc2 a:hover { transform: translateY(-2px); }
.toc2 .mono { font-size: .625rem; color: var(--teal-cap); }
.ship2 { scroll-margin-top: 130px; }
.ship2__note { margin-top: 16px; color: var(--ink-3); font-size: .9375rem; max-width: 70ch; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.day { position: relative; display: grid; gap: 8px; align-content: start; padding: 18px 16px 18px; border-radius: 22px; background: linear-gradient(170deg, color-mix(in srgb, var(--glow) 55%, #fff), rgba(255, 255, 255, .7)); box-shadow: var(--glass-rim), var(--glass-sh); color: var(--ink); }
.day svg { width: 28px; height: 28px; }
.day--off { background: var(--glass); }
.day__d { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.day b { font-size: .9375rem; line-height: 1.2; }
.day small { font-size: .75rem; color: var(--ink-3); line-height: 1.35; }
.day__now { display: none; position: absolute; top: 12px; right: 12px; padding: 3px 8px; border-radius: 999px; font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--c); }
.day.is-today { box-shadow: inset 0 0 0 2px var(--c), var(--glass-sh-h); }
.day.is-today .day__now { display: block; }
@media (max-width: 960px) { .week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .week { grid-template-columns: 1fr 1fr; } .day { padding: 14px; } }
.rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rate { position: relative; overflow: hidden; padding: 26px; border-radius: 26px; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.rate:hover { transform: translateY(-5px); box-shadow: var(--glass-rim), var(--glass-sh-h); }
.rate__k { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.rate h3 { margin-top: 6px; font-size: 1.25rem; font-variation-settings: "wdth" 110; }
.rate__big { margin-top: 18px; font: 800 3rem/1 var(--ff-display); font-variation-settings: "wdth" 114; letter-spacing: -.03em; }
.rate__s { color: var(--ink-3); margin-top: 4px; }
.rate__free { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-weight: 600; font-size: .9375rem; }
.rate__free svg, .chk2__box svg { width: 16px; height: 16px; fill: none; stroke: #10734A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rate--hl { color: #fff; background: radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--glow) 35%, transparent), transparent 60%), linear-gradient(150deg, var(--cap), var(--c)); box-shadow: 0 30px 60px -32px var(--c); }
.rate--hl .rate__k, .rate--hl .rate__s { color: rgba(255, 255, 255, .72); }
.rate--hl .rate__free { border-color: rgba(255, 255, 255, .2); }
.rate--hl .rate__free svg { stroke: var(--glow); }
@media (max-width: 860px) { .rates { grid-template-columns: 1fr; } }
.trk { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.trk::before { content: ""; position: absolute; left: 12%; right: 12%; top: 28px; height: 2px; background: linear-gradient(90deg, var(--c), var(--glow)); opacity: .45; }
.trk li { position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; }
.trk .ih { position: relative; z-index: 1; margin-bottom: 6px; }
.trk b { font-size: 1rem; }
.trk small { color: var(--ink-3); font-size: .875rem; }
@media (max-width: 760px) { .trk { grid-template-columns: 1fr; } .trk::before { left: 27px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; } .trk li { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 16px; } .trk .ih { grid-row: span 2; margin: 0; } }
.chk2 { padding: clamp(20px, 3vw, 32px); border-radius: 28px; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); max-width: 860px; }
.chk2__top { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.chk2__top .chk__count { margin: 0; white-space: nowrap; }
.chk2__bar { flex: 1; height: 8px; border-radius: 999px; background: var(--ground); overflow: hidden; }
.chk2__bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cap), var(--glow)); transition: width .5s var(--ease-out); }
.chk2 .chk__list label { align-items: center; padding: 14px 6px; }
.chk2 .chk__list input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chk2__box { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-2); background: #fff; transition: background-color .2s, box-shadow .2s; }
.chk2__box svg { opacity: 0; stroke: #fff; transform: scale(.6); transition: opacity .2s, transform .25s var(--ease-out); }
.chk2 input:checked + .chk2__box { background: var(--c); box-shadow: none; }
.chk2 input:checked + .chk2__box svg { opacity: 1; transform: none; }
.chk2 input:focus-visible + .chk2__box { outline: 2px solid var(--ink); outline-offset: 2px; }
.chk2 input:checked ~ span b { text-decoration: line-through; text-decoration-color: var(--ink-3); color: var(--ink-2); }

/* glossary */
.gl2__bar { position: sticky; top: 76px; z-index: 15; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 0; margin-bottom: 8px; background: color-mix(in srgb, var(--ground) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gl2__cats { display: flex; gap: 8px; flex-wrap: wrap; }
.gl2__cats button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; font: 600 .875rem/1 var(--ff-body); color: var(--ink); background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); cursor: pointer; transition: background-color .2s, color .2s; }
.gl2__cats button svg { width: 18px; height: 18px; }
.gl2__cats button span { font: 500 .625rem/1 var(--ff-mono); color: var(--ink-3); }
.gl2__cats button[aria-pressed="true"] { background: var(--c); color: #fff; box-shadow: 0 10px 20px -12px var(--c); }
.gl2__cats button[aria-pressed="true"] span { color: rgba(255, 255, 255, .7); }
.gl2__cats button[aria-pressed="true"] svg { --c: #fff; color: #fff; }
.gl2__az { display: flex; gap: 4px; flex-wrap: wrap; }
.gl2__az a { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-size: .75rem; color: var(--ink-2); text-decoration: none; transition: background-color .2s, color .2s; }
.gl2__az a:hover { background: var(--c); color: #fff; }
.gl2__grp { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); scroll-margin-top: 150px; }
.gl2__L { font: 800 3rem/1 var(--ff-display); font-variation-settings: "wdth" 120; color: transparent; background: linear-gradient(160deg, var(--cap), var(--glow)); -webkit-background-clip: text; background-clip: text; position: sticky; top: 150px; align-self: start; }
.gl2__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gcard { position: relative; padding: 20px 22px; border-radius: 22px; scroll-margin-top: 150px; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.gcard:hover, .gcard:target { transform: translateY(-4px); box-shadow: var(--glass-rim), var(--glass-sh-h); }
.gcard:target { box-shadow: inset 0 0 0 2px var(--c), var(--glass-sh-h); }
.gcard__h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gcard h3 { font-size: 1.125rem; font-variation-settings: "wdth" 108; }
.gcard__tag { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 4px 9px 4px 6px; border-radius: 999px; font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); background: color-mix(in srgb, var(--glow) 40%, #fff); }
.gcard__tag svg { width: 15px; height: 15px; }
.gcard p { margin-top: 8px; color: var(--ink-2); line-height: 1.55; font-size: .9375rem; }
.gcard__more { display: inline-block; margin-top: 12px; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c); text-decoration: none; }
@media (max-width: 760px) { .gl2__grp { grid-template-columns: 1fr; gap: 10px; } .gl2__L { position: relative; top: 0; font-size: 2.2rem; } .gl2__cards { grid-template-columns: 1fr; } .gl2__az { display: none; } .gl2__bar { top: 64px; } .gl2__cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .gl2__cats button { flex: none; } }

/* reading a COA: the seven tests */
.tests7 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.t7 { position: relative; overflow: hidden; padding: 22px; border-radius: 24px; display: grid; gap: 8px; align-content: start; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.t7:hover { transform: translateY(-5px); box-shadow: var(--glass-rim), var(--glass-sh-h); }
.t7--wide { grid-column: span 2; grid-row: span 2; color: #fff; background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--glow) 35%, transparent), transparent 60%), linear-gradient(150deg, var(--cap), var(--c)); box-shadow: 0 30px 60px -32px var(--c); }
.t7__h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.t7__h .ih { width: 50px; height: 50px; } .t7__h .ih svg { width: 27px; height: 27px; }
.t7--wide .t7__h .ih { width: 72px; height: 72px; } .t7--wide .t7__h .ih svg { width: 38px; height: 38px; }
.t7__n { font-size: .6875rem; letter-spacing: .14em; color: var(--ink-3); }
.t7--wide .t7__n { color: rgba(255, 255, 255, .6); }
.t7 h3 { font-size: 1.125rem; font-variation-settings: "wdth" 108; }
.t7--wide h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); margin-top: auto; }
.t7__m { display: flex; flex-wrap: wrap; gap: 6px; }
.t7__m span { padding: 3px 8px; border-radius: 999px; font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; background: color-mix(in srgb, var(--glow) 40%, #fff); color: var(--ink-2); }
.t7--wide .t7__m span { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.t7 > p:last-child { color: var(--ink-2); font-size: .875rem; line-height: 1.5; }
.t7--wide > p:last-child { color: rgba(255, 255, 255, .84); font-size: 1rem; max-width: 46ch; }
@media (max-width: 1000px) { .tests7 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tests7 { grid-template-columns: 1fr; } .t7--wide { grid-column: auto; grid-row: auto; } }
/* v30 fixes: the button shine rule replaces background-image, so the verify button takes its colour from background-color;
   the scan stage lays the vial and the result card side by side instead of stacking them absolutely */
.vsearch .btn { background-color: var(--c); }
.vhero2__stage { display: flex; align-items: center; justify-content: center; gap: 22px; height: auto; min-height: 340px; }
.vhero2__stage::before { left: 34%; top: 50%; }
.vscan { position: relative; left: auto; top: auto; translate: none; width: 120px; flex: none; }
.vres { position: relative; right: auto; top: auto; translate: none; flex: none; }
@media (prefers-reduced-motion: no-preference) { .vres { animation: vresIn2 1s var(--ease-out) .5s both, mfloat 6s var(--ease-io) 1.5s infinite alternate; } @keyframes vresIn2 { from { opacity: 0; translate: 16px 0; } } }
@media (max-width: 760px) { .vhero2__stage { min-height: 0; gap: 14px; padding-top: 6px; } .vscan { width: 84px; translate: none; } .vres { width: 176px; } }
.vscan__frame { left: 6%; top: 59%; width: 42%; }
.ahero__copy { min-width: 0; }
.vsearch { max-width: 100%; box-sizing: border-box; }
@media (max-width: 760px) { .uhero__eyebrow { font-size: .5625rem; letter-spacing: .1em; } .vsearch .btn { padding-inline: 14px; font-size: .875rem; } .vsearch__try { font-size: .5625rem; } }
/* v30 layout fixes */
.toc2 { margin-top: 14px; }
.coa2__head { max-width: 900px; }
.t7--wide { grid-row: auto; }
.gl2__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gcard { overflow: hidden; display: flex; flex-direction: column; }
.gcard__anchor { position: absolute; top: -150px; }
.gcard__L { position: absolute; right: -6px; bottom: -26px; font: 800 7rem/1 var(--ff-display); font-variation-settings: "wdth" 120; color: transparent; background: linear-gradient(160deg, color-mix(in srgb, var(--glow) 70%, transparent), transparent 80%); -webkit-background-clip: text; background-clip: text; pointer-events: none; }
.gcard > *:not(.gcard__L):not(.gcard__anchor) { position: relative; }
.gcard__h { padding-right: 0; }
.gcard__more { margin-top: auto; padding-top: 12px; }
@media (max-width: 1000px) { .gl2__cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .gl2__cards { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .fams { grid-template-columns: 1fr 1fr; gap: 10px; } .fam { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; } .fam__v { width: 46px; height: 62px; } .fam__v img { height: 54px; } .fam__go { display: none; } }

/* ---------- v31: card bar light (2026-10-29). Brandon: the card animation "is broken". The old pulse was a dash
   travelling a 600-unit path, but the bar only shows 170-300 units of it, so the light was off screen most of each cycle.
   Now a bright copy of the circuit is revealed by a soft band that sweeps the visible bar left to right, every 3.2s,
   while the card is on screen (all devices). Reduced motion: no sweep. ---------- */
.strip-trace .st-pulse { display: none; }
.strip-trace--glow { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 55%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 55%, transparent 100%);
  -webkit-mask-size: 38% 100%; mask-size: 38% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: -60% 0; mask-position: -60% 0; opacity: 0; }
.strip-trace--glow .st-glow { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.strip-trace--glow .st-glow circle { fill: #fff; stroke-width: 1.4; }
.strip-trace--glow { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)) drop-shadow(0 0 8px var(--glow)); }
@media (prefers-reduced-motion: no-preference) {
  .card.is-lit .strip-trace--glow, .card:hover .strip-trace--glow { opacity: 1; animation: stSweep 3.2s cubic-bezier(.45, .05, .35, 1) .9s infinite; }
  @keyframes stSweep { 0% { -webkit-mask-position: -60% 0; mask-position: -60% 0; } 70%, 100% { -webkit-mask-position: 160% 0; mask-position: 160% 0; } }
}

/* ---------- v31: build-a-box band (2026-10-29). Brandon: make the panel behind the vials premium, on brand, with
   colour and movement. A deep ink panel lit by four slowly drifting auroras in the vials' own label colours (sapphire,
   arctic, burgundy, navy), a faint grid, floating molecules, a circuit trace with a travelling light, and a lit floor
   the vials hover over. Text and tier chips go white/glass. Reduced motion: everything still, still lit. ---------- */
.band--box { overflow: hidden; isolation: isolate; color: #fff; background: linear-gradient(150deg, #0B1626 0%, #0A1220 55%, #070C16 100%); box-shadow: 0 40px 80px -44px rgba(4, 12, 28, .8), inset 0 1px 0 rgba(255, 255, 255, .08); }
.band--box > * { position: relative; z-index: 1; }
.bxfx { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; overflow: hidden; }
.bxfx::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(70% 90% at 70% 50%, #000, transparent 80%); mask-image: radial-gradient(70% 90% at 70% 50%, #000, transparent 80%); }
.bxfx__a { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; filter: blur(60px); opacity: .55; }
.bxfx__a--1 { left: 42%; top: -30%; background: var(--cobalt-cap); }
.bxfx__a--2 { left: 64%; top: 20%; background: var(--plum-cap); opacity: .5; }
.bxfx__a--3 { left: 30%; top: 45%; background: var(--wine-cap); opacity: .42; }
.bxfx__a--4 { left: -12%; top: -20%; background: var(--navy-cap); opacity: .5; }
.bxfx__mol { position: absolute; width: 120px; overflow: visible; --c: #1C2B44; --glow: #A6D7F0; }
.bxfx__mol line { stroke: rgba(255, 255, 255, .22); stroke-width: 2; stroke-linecap: round; }
.bxfx__mol circle { fill: #15233A; stroke: rgba(255, 255, 255, .4); stroke-width: 1.5; }
.bxfx__mol circle.lit { fill: #A6D7F0; stroke: #fff; filter: drop-shadow(0 0 6px #A6D7F0); }
.bxfx__mol--a { right: 4%; top: 6%; width: 110px; opacity: .8; }
.bxfx__mol--b { left: 44%; bottom: 6%; width: 140px; opacity: .45; }
.bxfx__wire { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 90px; }
.bxfx__wire path { fill: none; stroke: rgba(166, 215, 240, .22); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.bxfx__wire .bxfx__run { stroke: #CFEAFB; stroke-width: 2.4; stroke-dasharray: 8 92; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px #A6D7F0); opacity: .9; }
.band--box h2 { color: #fff; }
.band--box h2 { background: linear-gradient(100deg, #fff 30%, #CFE6F7 60%, #fff 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.band--box .eyebrow { color: rgba(255, 255, 255, .7); }
.band--box .eyebrow b { color: #fff; }
.band--box p { color: rgba(255, 255, 255, .78); }
.band--box .tier { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .3s var(--ease-out), background-color .3s; }
.band--box .tier:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .14); }
.band--box .tier b { color: #fff; }
.band--box .tier span { color: rgba(255, 255, 255, .62); }
.band--box .tier--line b { color: #A6D7F0; }
.band--box .btn:not(.btn--ghost) { background-color: #fff; color: var(--ink); }
.band--box .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); background: transparent; }
.band--box .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.cluster__floor { position: absolute; left: 6%; right: 6%; bottom: 2%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(166, 215, 240, .45), rgba(166, 215, 240, .1) 60%, transparent); filter: blur(4px); }
.band--box .fv__img img { filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .55)); }
.band--box .fv__shadow { opacity: .35; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .bxfx__a--1 { animation: aur1 16s var(--ease-io) infinite alternate; } .bxfx__a--2 { animation: aur2 19s var(--ease-io) infinite alternate; }
  .bxfx__a--3 { animation: aur1 22s var(--ease-io) -6s infinite alternate-reverse; } .bxfx__a--4 { animation: aur2 18s var(--ease-io) -4s infinite alternate; }
  @keyframes aur1 { to { translate: -12% 18%; scale: 1.15; } } @keyframes aur2 { to { translate: 14% -12%; scale: .9; } }
  .bxfx__mol { animation: amol 10s var(--ease-io) infinite alternate; } .bxfx__mol--b { animation-duration: 13s; animation-delay: -5s; }
  .bxfx__wire .bxfx__run { animation: wireRun 5s linear infinite; } @keyframes wireRun { to { stroke-dashoffset: 0; } }
  .band--box h2 { background-size: 220% 100%; animation: sheen 7s var(--ease-io) infinite; } @keyframes sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
  .cluster__floor { animation: floorPulse 6s var(--ease-io) infinite alternate; } @keyframes floorPulse { to { opacity: .6; transform: scaleX(.92); } }
}
@media (max-width: 640px) { .band--box .tiers--4 { grid-template-columns: 1fr 1fr; } }

/* ---------- v31: Build a Box (2026-10-29). Brandon: under-designed next to aminoclub / rebirthlabs; too many cards;
   slots filled with colour blocks. Now: a dark hero with the tier ladder and a crate that fills itself with real vials;
   one card per compound with mg pills; family filter + search; slots show the actual vial (tap to remove); a sticky
   box bar on phones. ---------- */
.bbhero { padding: 18px 0 0; }
.bbhero__box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: 520px; }
.bbhero__crumbs { color: rgba(255, 255, 255, .6); margin-bottom: 16px; font-size: .6875rem; }
.bbhero__crumbs a { color: rgba(255, 255, 255, .85); }
.bbhero h1 { margin-top: 10px; font-size: clamp(2.3rem, 1.4rem + 3vw, 4.1rem); font-variation-settings: "wdth" 120; letter-spacing: -.035em; line-height: .98; color: transparent; background: linear-gradient(100deg, #fff 30%, #CFE6F7 60%, #fff 90%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; }
.ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 24px; max-width: 560px; }
.ladder li { position: relative; padding: 14px 12px 12px; border-radius: 16px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ladder li::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #A6D7F0, transparent); opacity: calc(.35 + var(--k) * .2); }
.ladder b { display: block; font: 800 1.6rem/1 var(--ff-display); font-variation-settings: "wdth" 114; color: #fff; }
.ladder li:nth-child(n+3) b { color: #A6D7F0; }
.ladder span { display: block; margin-top: 6px; font-size: .75rem; color: rgba(255, 255, 255, .62); line-height: 1.3; }
.ladder em { font-style: normal; color: #fff; font-weight: 700; }
.crate { position: relative; display: grid; place-items: center; }
.crate__box { position: relative; width: min(100%, 440px); padding: 18px; border-radius: 26px; background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 40px 70px -30px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transform: rotate(-2deg); }
.crate__k { display: flex; justify-content: space-between; font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-bottom: 12px; }
.crate__n b { color: #fff; }
.crate__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.crate__s { position: relative; aspect-ratio: 1 / 1.45; border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(80% 70% at 50% 35%, color-mix(in srgb, var(--glow) 55%, transparent), color-mix(in srgb, var(--c) 60%, #0A1220)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.crate__s picture, .crate__s img { height: 88%; width: auto; }
.crate__s img { filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .45)); }
.crate__bar { height: 6px; margin-top: 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.crate__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #A6D7F0, #7DE8C1); transform-origin: left; }
.crate__save { display: flex; justify-content: space-between; margin-top: 8px; font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.crate__save .is-on { color: #7DE8C1; }
.crate__tag { position: absolute; right: 2%; top: 4%; padding: 12px 16px; border-radius: 18px; background: #fff; color: var(--ink); font-size: .8125rem; font-weight: 600; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6); transform: rotate(4deg); }
.crate__tag b { display: block; font: 800 1.75rem/1 var(--ff-display); color: var(--wine-cap); }
@media (prefers-reduced-motion: no-preference) {
  .bbhero h1 { animation: sheen 7s var(--ease-io) infinite; }
  .crate__s picture { animation: crateIn 9s var(--ease-out) infinite; animation-delay: calc(var(--k) * .32s); }
  @keyframes crateIn { 0% { opacity: 0; transform: translateY(-60%) scale(.8); } 6% { opacity: 1; transform: none; } 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(10%) scale(.9); } }
  .crate__bar i { animation: crateBar 9s var(--ease-io) infinite; }
  @keyframes crateBar { 0% { transform: scaleX(0); } 40% { transform: scaleX(1); } 86% { transform: scaleX(1); opacity: 1; } 94%, 100% { transform: scaleX(1); opacity: 0; } }
  .crate__box { animation: mfloat 7s var(--ease-io) infinite alternate; }
  .crate__tag { animation: mfloat 5s var(--ease-io) -2s infinite alternate; }
}
@media (max-width: 960px) { .bbhero__box { grid-template-columns: 1fr; min-height: 0; } .crate { margin-top: 10px; } }
@media (max-width: 560px) { .ladder { grid-template-columns: 1fr 1fr; } .crate__tag { right: -2%; top: -8%; padding: 9px 12px; } .crate__tag b { font-size: 1.375rem; } .bbhero__box { padding-bottom: 50px; } }

/* toolbar */
.btool { position: sticky; top: 76px; z-index: 14; display: grid; gap: 10px; padding: 12px 0 14px; margin-bottom: 8px; background: color-mix(in srgb, var(--ground) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btool .fsearch .field { min-height: 46px; }
.bfam { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.bfam button { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border: 0; border-radius: 999px; font: 600 .8125rem/1 var(--ff-body); color: var(--ink); background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); cursor: pointer; }
.bfam button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.bfam button span { font: 500 .625rem/1 var(--ff-mono); color: var(--ink-3); }
.bfam button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.bfam button[aria-pressed="true"][data-ch] { background: var(--c); }
.bfam button[aria-pressed="true"] i { background: #fff; }
.bpre { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bpre .mono { font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.bpre button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; font: 600 .75rem/1 var(--ff-body); color: var(--ink-2); background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); cursor: pointer; transition: box-shadow .2s, color .2s; }
.bpre button:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* compound cards */
.pk2s { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pk2 { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 14px; border-radius: 24px; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.pk2:hover { transform: translateY(-3px); box-shadow: var(--glass-rim), var(--glass-sh-h); }
.pk2.has { box-shadow: inset 0 0 0 2px var(--c), var(--glass-sh-h); }
.pk2__img { position: relative; display: grid; place-items: center; border-radius: 18px; min-height: 150px; background: radial-gradient(90% 80% at 50% 30%, #fff, color-mix(in srgb, var(--glow) 45%, var(--ground))); overflow: hidden; }
.pk2__img .szimg { display: grid; place-items: center; height: 100%; width: 100%; }
.pk2__img picture { height: 86%; display: grid; place-items: center; }
.pk2__img img { height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(11, 13, 18, .22)); transition: transform .4s var(--ease-out); }
.pk2:hover .pk2__img img { transform: translateY(-4px) rotate(-2deg); }
.pk2__b { display: flex; flex-direction: column; min-width: 0; padding-top: 2px; }
.pk2__fam { display: flex; align-items: center; gap: 6px; font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pk2__fam i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.pk2 h3 { margin-top: 4px; font-size: 1.25rem; font-variation-settings: "wdth" 112; line-height: 1.1; }
.szp { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.szp button { min-height: 30px; padding: 0 11px; border: 0; border-radius: 999px; font: 600 .75rem/1 var(--ff-body); color: var(--ink-2); background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1.5px var(--line-2); cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.szp button:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.szp button[aria-checked="true"] { color: #fff; background: linear-gradient(150deg, var(--cap), var(--c)); box-shadow: 0 6px 14px -8px var(--c); }
.szp--one { font-size: .6875rem; letter-spacing: .06em; color: var(--ink-3); margin: 10px 0 12px; }
.pk2__row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pk2__price b { display: block; font: 800 1.125rem/1 var(--ff-display); }
.pk2__price small { font-size: .6875rem; color: var(--ink-3); }
.pk2__in { position: absolute; top: 12px; right: 12px; z-index: 1; padding: 4px 9px; border-radius: 999px; font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--c); }
@media (max-width: 1180px) { .pk2s { grid-template-columns: 1fr; } }

/* the box */
.box--v2 { border-radius: 28px; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh-h); }
.box__h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.box__h p { font-size: .875rem; margin-top: 4px; }
.box__clear { border: 0; background: none; font: 600 .8125rem/1 var(--ff-body); color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.box--v2 .slots { gap: 8px; }
.box--v2 .slot { position: relative; padding: 0; border: 0; overflow: hidden; aspect-ratio: 1 / 1.35; border-radius: 14px; background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--line); }
.box--v2 .slot i { width: 30%; aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed var(--line-2); }
.box--v2 .slot.is-full { cursor: pointer; background: radial-gradient(80% 70% at 50% 35%, #fff, color-mix(in srgb, var(--glow) 60%, var(--ground))); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 40%, transparent); }
.box--v2 .slot.is-full::after { display: none; }
.box--v2 .slot img { height: 86%; width: auto; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(11, 13, 18, .22)); }
.slot__x { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); opacity: 0; transition: opacity .2s; }
.slot__x::before, .slot__x::after { content: ""; position: absolute; left: 4px; right: 4px; top: 8px; height: 2px; border-radius: 2px; background: #fff; transform: rotate(45deg); }
.slot__x::after { transform: rotate(-45deg); }
.slot.is-full:hover .slot__x, .slot.is-full:focus-visible .slot__x { opacity: 1; }
.box--v2 .slot.is-new img { animation: slotDrop .45s var(--ease-out); }
@keyframes slotDrop { from { transform: translateY(-40%) scale(.8); opacity: 0; } }
.boxbar { display: none; }
@media (max-width: 960px) {
  .boxbar:not([hidden]) { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 20px; color: #fff; background: linear-gradient(150deg, #13233A, #0A1220); box-shadow: 0 20px 40px -14px rgba(4, 12, 28, .7); }
  .boxbar__t b { display: block; font-size: .9375rem; }
  .boxbar__t span { font-size: .8125rem; color: rgba(255, 255, 255, .75); }
  .boxbar__t em { font-style: normal; color: #7DE8C1; }
  .boxbar .btn { background-color: #fff; color: var(--ink); }
}
@media (max-width: 640px) {
  .pk2 { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 20px; }
  .pk2__img { min-height: 124px; border-radius: 14px; }
  .pk2 h3 { font-size: 1.0625rem; }
  .btool { top: 64px; }
}
.pk2 { align-items: stretch; }
.pk2__img { height: 100%; max-height: 220px; align-self: center; aspect-ratio: 104 / 150; min-height: 0; }
.pk2__img .szimg { position: absolute; inset: 8% 10%; }
.pk2__img picture { width: 100%; height: 100%; }
.pk2__img img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 960px) {
  .btool { position: relative; top: 0; padding-top: 4px; }
  .bpre { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bpre button { flex: none; }
}
@media (max-width: 640px) { .pk2__img { aspect-ratio: 84 / 124; } }
.pk2__img .szimg { position: absolute; inset: 7% 10%; width: auto; height: auto; display: block; }
.pk2__img .szimg[hidden] { display: none; }
.pk2__img .szimg picture { position: absolute; inset: 0; display: block; width: auto; height: auto; }
.pk2__img .szimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pk2__img { aspect-ratio: auto !important; width: 100%; height: 160px; max-height: none; align-self: center; }
@media (max-width: 640px) { .pk2__img { height: 128px; } }

/* ---------- v31: Kits (2026-10-29). A 10-pack of every compound (mg pills, two to a row on phones), the mixed kits
   below, and a dark hero with a fan of ten vials. ---------- */
.kthero h1 { margin-top: 10px; font-size: clamp(2.2rem, 1.3rem + 3vw, 3.9rem); font-variation-settings: "wdth" 120; letter-spacing: -.035em; line-height: .98; color: transparent; background: linear-gradient(100deg, #fff 30%, #CFE6F7 60%, #fff 90%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; }
.kthero__stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.kthero__stats li { padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.kthero__stats b { display: block; font: 800 1.6rem/1 var(--ff-display); color: #fff; }
.kthero__stats li:nth-child(2) b { color: #A6D7F0; }
.kthero__stats span { font-size: .75rem; color: rgba(255, 255, 255, .62); }
.ktfan { position: relative; height: 380px; }
.ktfan__v { position: absolute; left: 50%; bottom: 14%; width: 62px; translate: -50% 0; transform-origin: 50% 160%; rotate: calc((var(--k) - 4.5) * 7deg); }
.ktfan__v img { filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .5)); }
.ktfan::before { content: ""; position: absolute; left: 50%; bottom: 6%; width: 70%; height: 40px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(166, 215, 240, .45), transparent); filter: blur(6px); }
.ktfan__tag { position: absolute; right: 2%; top: 8%; display: grid; padding: 12px 16px; border-radius: 18px; background: #fff; color: var(--ink-2); font-size: .75rem; font-weight: 600; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6); rotate: 4deg; }
.ktfan__tag b { font: 800 1.6rem/1.1 var(--ff-display); color: var(--ink); }
.ktfan__tag s { font-size: .75rem; color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) {
  .kthero h1 { animation: sheen 7s var(--ease-io) infinite; }
  .ktfan__v { animation: fanIn 1.1s var(--ease-out) both; animation-delay: calc(var(--k) * .07s); }
  @keyframes fanIn { from { rotate: 0deg; opacity: 0; } }
  .ktfan__tag { animation: mfloat 5s var(--ease-io) -2s infinite alternate; }
}
@media (max-width: 960px) { .ktfan { height: 300px; } .ktfan__v { width: 50px; } }
@media (max-width: 560px) { .ktfan { height: 240px; } .ktfan__v { width: 40px; } .ktfan__tag { padding: 9px 12px; } .ktfan__tag b { font-size: 1.25rem; } }

.tens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ten { position: relative; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.ten:hover { transform: translateY(-5px); box-shadow: var(--glass-rim), var(--glass-sh-h); }
.ten__off { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 9px; border-radius: 999px; font-size: .625rem; letter-spacing: .08em; color: #fff; background: var(--c); }
.ten__well { position: relative; height: 190px; background: radial-gradient(80% 80% at 50% 30%, #fff, color-mix(in srgb, var(--glow) 50%, var(--ground))); overflow: hidden; }
.ten__stack { position: absolute; inset: 0; }
.ten__stack[hidden] { display: none; }
.ten__stack > span { position: absolute; bottom: 10%; height: 72%; aspect-ratio: 342 / 800; left: calc(50% + (var(--k) - 1) * 22% - 11%); z-index: calc(3 - var(--k)); transform: rotate(calc((var(--k) - 1) * 6deg)) translateY(calc(var(--k) * 3%)); transition: transform .4s var(--ease-out); }
.ten__stack > span:nth-child(2) { z-index: 3; }
.ten__stack picture, .ten__stack img { width: 100%; height: 100%; object-fit: contain; }
.ten__stack img { filter: drop-shadow(0 10px 10px rgba(11, 13, 18, .22)); }
.ten:hover .ten__stack > span:nth-child(1) { transform: rotate(-12deg) translate(-10%, 2%); }
.ten:hover .ten__stack > span:nth-child(3) { transform: rotate(12deg) translate(10%, 2%); }
.ten__x { position: absolute; right: 12px; bottom: 10px; z-index: 4; padding: 4px 9px; border-radius: 999px; font-size: .6875rem; font-weight: 700; color: var(--ink); background: #fff; box-shadow: 0 6px 14px -8px rgba(11, 13, 18, .4); }
.ten__b { display: flex; flex-direction: column; padding: 14px 16px 16px; flex: 1; }
.ten__fam { display: flex; align-items: center; gap: 6px; font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ten__fam i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.ten h3 { margin-top: 4px; font-size: 1.125rem; font-variation-settings: "wdth" 110; line-height: 1.15; }
.ten .szp { margin: 8px 0 10px; }
.ten .szp--one { margin: 8px 0 10px; }
.ten__price { margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ten__price b { font: 800 1.375rem/1 var(--ff-display); }
.ten__price s { font-size: .8125rem; color: var(--ink-3); }
.ten__each { margin: 4px 0 12px; font-size: .625rem; letter-spacing: .04em; color: var(--ok); }
.ten__add { background-color: var(--ink); }
@media (max-width: 1100px) { .tens { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .tens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 560px) {
  .ten { border-radius: 18px; }
  .ten__well { height: 140px; }
  .ten__b { padding: 10px 11px 12px; }
  .ten h3 { font-size: .9375rem; }
  .ten .szp { gap: 4px; margin: 6px 0 8px; } .ten .szp button { min-height: 26px; padding: 0 8px; font-size: .6875rem; }
  .ten__price b { font-size: 1.0625rem; } .ten__price s { font-size: .6875rem; }
  .ten__each { font-size: .5625rem; margin-bottom: 9px; }
  .ten__add { min-height: 38px; font-size: .8125rem; padding-inline: 8px; }
}
/* mixed kits: glass, two to a row on phones */
.kit { background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.kit:hover { transform: translateY(-5px); box-shadow: var(--glass-rim), var(--glass-sh-h); }
.kits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kits .kit { grid-template-columns: 1fr; }
.kits .kit__well { min-height: 220px; }
@media (max-width: 1000px) { .kits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 560px) {
  .kits .kit { border-radius: 18px; } .kits .kit__well { min-height: 140px; }
  .kits .kit__body { padding: 12px; gap: 6px; } .kits .kit__body h3 { font-size: 1rem; } .kits .kit__body > p:not(.mono) { display: none; }
  .kits .kit__items { font-size: .75rem; } .kits .kit__buy { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; } .kits .kit__buy .price { font-size: 1.125rem; } .kits .kit__buy .btn { min-height: 38px; }
}
.ktfan__v { width: 64px; bottom: 22%; transform-origin: 50% 330%; rotate: calc((var(--k) - 4.5) * 5.4deg); }
@media (max-width: 960px) { .ktfan__v { width: 52px; } }
@media (max-width: 560px) { .ktfan__v { width: 42px; bottom: 20%; } }

/* ---------- v31: storage page + footer trust cards (2026-10-29) ---------- */
.tscale { position: relative; padding: 28px; border-radius: 30px; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); }
.tscale__bar { height: 14px; border-radius: 999px; background: linear-gradient(90deg, #F2A65A 0%, #F2C14E 18%, #8FD3C2 38%, #6FB7E6 62%, #2F5FD0 82%, #1B2A6B 100%); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); position: relative; }
.tscale__bar i { position: absolute; top: 50%; left: 72%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #2F5FD0, 0 8px 16px -6px rgba(11, 13, 18, .4); }
@media (prefers-reduced-motion: no-preference) { .tscale__bar i { animation: tdot 6s var(--ease-io) infinite alternate; } @keyframes tdot { from { left: 10%; box-shadow: 0 0 0 4px #F2A65A, 0 8px 16px -6px rgba(11, 13, 18, .4); } to { left: 76%; } } }
.tscale__zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.tz { padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line); position: relative; overflow: hidden; }
.tz::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.tz--amb::before { background: #F2A65A; } .tz--fr::before { background: #8FD3C2; } .tz--fz::before { background: #2F5FD0; } .tz--dp::before { background: #1B2A6B; }
.tz--fz { background: linear-gradient(160deg, #EAF1FF, rgba(255, 255, 255, .8)); box-shadow: inset 0 0 0 2px #2F5FD0; }
.tz b { display: block; font: 800 1.5rem/1 var(--ff-display); font-variation-settings: "wdth" 112; }
.tz span { display: block; margin-top: 4px; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tz p { margin-top: 10px; color: var(--ink-2); font-size: .875rem; line-height: 1.5; }
@media (max-width: 900px) { .tscale__zones { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tscale { padding: 18px; } .tscale__zones { grid-template-columns: 1fr; } }
.sens { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sens__c { padding: 24px; border-radius: 26px; background: var(--glass); box-shadow: var(--glass-rim), var(--glass-sh); }
.sens__h { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.sens__h h3 { font-size: 1.1875rem; font-variation-settings: "wdth" 108; }
.sens__h p { margin-top: 4px; color: var(--ink-2); font-size: .9rem; }
.sens__n { margin-left: auto; font: 800 2rem/1 var(--ff-display); color: var(--c); }
.schips { display: flex; flex-wrap: wrap; gap: 8px; }
.schip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .8125rem; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px var(--line); transition: transform .25s var(--ease-out), box-shadow .25s; }
.schip:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--c), 0 8px 16px -10px var(--c); }
.schip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.schip small { font-size: .5625rem; letter-spacing: .06em; color: var(--ink-3); }
@media (max-width: 860px) { .sens { grid-template-columns: 1fr; } }
.bento3--2 { grid-template-columns: 1fr 1fr; }
.bcard__p { color: var(--ink-2); font-size: .9375rem; line-height: 1.55; }
@media (max-width: 760px) { .bento3--2 { grid-template-columns: 1fr; } }

/* footer trust cards: glass, gradient icon disc in a family colour, a light sweep and lift on hover */
.ftr__trust { gap: 14px; }
.ftr__trust li { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; font-size: .8125rem; color: var(--ink-3); background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--glow) 18%, #fff)); box-shadow: var(--glass-rim), 0 1px 2px rgba(11, 13, 18, .05), 0 12px 26px -16px rgba(11, 13, 18, .2); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.ftr__trust li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease-out); pointer-events: none; }
.ftr__trust li:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 40%, transparent), 0 20px 34px -18px var(--c); }
.ftr__trust li:hover::after { transform: translateX(120%); }
.ftr__trust li b { display: block; margin-bottom: 2px; font: 700 1rem/1.2 var(--ff-display); font-variation-settings: "wdth" 108; color: var(--ink); letter-spacing: -.005em; }
.ftr__ic { width: 46px; height: 46px; flex: none; border-radius: 15px; display: grid; place-items: center; color: var(--ink);
  background: radial-gradient(120% 120% at 30% 20%, #fff, color-mix(in srgb, var(--glow) 70%, #fff) 60%, color-mix(in srgb, var(--glow) 100%, var(--c) 18%));
  box-shadow: inset 0 1px 0 #fff, 0 10px 20px -10px color-mix(in srgb, var(--c) 70%, transparent); transition: transform .4s var(--ease-out); }
.ftr__ic svg { width: 26px; height: 26px; }
.ftr__trust li:hover .ftr__ic { transform: rotate(-6deg) scale(1.06); }
@media (max-width: 640px) {
  .ftr__trust li { font-size: 0; padding: 10px; gap: 10px; border-radius: 16px; }
  .ftr__trust li b { font-size: .8125rem; margin: 0; }
  .ftr__ic { width: 34px; height: 34px; border-radius: 11px; } .ftr__ic svg { width: 20px; height: 20px; }
}

/* ---------- v31: PDP (2026-10-29). Certificate / Molecule open in a framed dialog (close = back to the product);
   pages opened with ?embed=1 drop the site chrome; the sticky bar has a small vial, size pills with their own vial,
   and a quantity stepper; the phone picture is 30% larger. ---------- */
.ifv { width: min(1080px, calc(100% - 24px)); height: min(860px, calc(100dvh - 24px)); max-height: none; padding: 0; border: 0; border-radius: 26px; background: var(--ground); box-shadow: 0 40px 100px -30px rgba(11, 13, 18, .55); overflow: hidden; }
.ifv[open] { display: flex; flex-direction: column; }
.ifv::backdrop { background: rgba(11, 13, 18, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ifv__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 22px; background: var(--paper); border-bottom: 1px solid var(--line); }
.ifv__bar .mono { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.ifv__tools { display: flex; align-items: center; gap: 14px; }
.ifv__body { position: relative; flex: 1; }
.ifv__body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .3s; background: var(--ground); }
.ifv.is-loaded iframe { opacity: 1; }
.ifv__spin { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--ink); animation: ifvSpin .8s linear infinite; }
.ifv.is-loaded .ifv__spin { display: none; }
@keyframes ifvSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) { .ifv[open] { animation: ifvIn .35s var(--ease-out); } @keyframes ifvIn { from { opacity: 0; transform: translateY(14px) scale(.98); } } }
@media (max-width: 640px) { .ifv { width: 100%; height: calc(100dvh - 12px); max-width: none; margin: auto 0 0; border-radius: 22px 22px 0 0; } .ifv__bar { padding-left: 16px; } }
html.embed .announce, html.embed .hdr, html.embed .ftr, html.embed .sticky-atc, html.embed .rail, html.embed .gate, html.embed .drawer, html.embed .scrim, html.embed .mnav, html.embed .pnav, html.embed .signup, html.embed .crumbs { display: none !important; }
html.embed body { background: var(--ground); }
html.embed .sec:first-of-type, html.embed main > section:first-child { padding-top: 18px; }
html.embed .strv__list { display: none; }
html.embed .strv { grid-template-columns: 1fr; }

/* sticky add-to-cart */
.sticky-atc .satc { gap: 14px; min-height: 76px; padding-block: 10px; }
.satc__img { width: 38px; height: 54px; flex: none; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(90% 80% at 50% 30%, #fff, color-mix(in srgb, var(--glow) 50%, var(--ground))); overflow: hidden; }
.sticky-atc .satc__img img, .satc__img img { width: auto; height: 46px; object-fit: contain; display: block; }
.satc__t { min-width: 0; }
.satc__t b { white-space: nowrap; }
.satc__t > span { white-space: nowrap; }
.satc__sz { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-left: auto; padding: 2px; }
.satc__sz button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 5px; border: 0; border-radius: 999px; font: 600 .8125rem/1 var(--ff-body); color: var(--ink-2); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); cursor: pointer; transition: box-shadow .2s, background-color .2s, color .2s; }
.satc__sz button:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.satc__sz button[aria-checked="true"] { color: #fff; background: linear-gradient(150deg, var(--cap), var(--c)); box-shadow: 0 6px 14px -8px var(--c); }
.satc__szi { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: #fff; }
.satc__sz .satc__szi img, .sticky-atc .satc__szi img { width: auto; height: 26px; }
.satc__q { flex: none; margin-left: 4px; }
.satc__sz + .satc__q { margin-left: 4px; }
.satc .satc__t + .satc__q { margin-left: auto; }
.sticky-atc .satc__add { margin-left: 0; flex: none; }
@media (max-width: 760px) {
  .sticky-atc .satc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "img t q add" "sz sz sz sz"; gap: 8px 10px; min-height: 0; padding-block: 10px 12px; }
  .sticky-atc .satc:not(:has(.satc__sz)) { grid-template-areas: "img t q add"; }
  .satc__img { grid-area: img; width: 32px; height: 44px; border-radius: 10px; } .sticky-atc .satc__img img { height: 38px; }
  .satc__t { grid-area: t; } .satc__t b { font-size: .9375rem; } .satc__t > span { font-size: .75rem; }
  .satc__sz { grid-area: sz; margin: 0; } .satc__sz button { min-height: 34px; font-size: .75rem; } .satc__szi { width: 26px; height: 26px; }
  .satc__q { grid-area: q; margin: 0 !important; } .satc__addl { display: none; }
  .sticky-atc .satc__add { grid-area: add; padding-inline: 16px; }
  .sticky-atc img { display: block !important; }
}

/* phone gallery: 30% larger picture box */
@media (max-width: 960px) { .gallery__main { --gh: clamp(218px, 57vw, 440px); } }

/* ---------- v31: research-use gate (2026-10-29). Brandon: "extremely plain". A dark, lit header with floating vials
   and molecules, three confirmation rows with icons, a custom tick box, and a button that lights up when ticked. ---------- */
.gate { background: rgba(11, 16, 26, .55); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); }
.gate2 { width: min(500px, 100%); max-height: calc(100dvh - 24px); overflow: auto; padding: 0; border-radius: 30px; background: var(--paper); box-shadow: 0 50px 100px -30px rgba(4, 12, 28, .7), 0 0 0 1px rgba(255, 255, 255, .6); }
.gate2__top { position: relative; height: 168px; overflow: hidden; isolation: isolate; background: linear-gradient(150deg, #0B1626, #0A1220 60%, #070C16); }
.gate2__a { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; filter: blur(46px); opacity: .55; z-index: -1; }
.gate2__a--1 { left: -15%; top: -40%; background: var(--cobalt-cap); } .gate2__a--2 { right: -20%; top: -10%; background: var(--plum-cap); opacity: .5; } .gate2__a--3 { left: 30%; bottom: -60%; background: var(--wine-cap); opacity: .4; }
.gate2__mol { position: absolute; width: 90px; overflow: visible; }
.gate2__mol line { stroke: rgba(255, 255, 255, .25); stroke-width: 2; stroke-linecap: round; }
.gate2__mol circle { fill: #15233A; stroke: rgba(255, 255, 255, .4); stroke-width: 1.5; }
.gate2__mol circle.lit { fill: #A6D7F0; stroke: #fff; }
.gate2__mol--a { right: 6%; top: 10%; opacity: .7; } .gate2__mol--b { left: 4%; bottom: 8%; width: 110px; opacity: .45; }
.gate2__logo { position: absolute; left: 26px; top: 24px; width: 118px; height: auto; }
.gate2__vials { position: absolute; right: 26px; bottom: -18px; display: flex; align-items: flex-end; }
.gate2__vials span { width: 54px; margin-left: -12px; transform: rotate(calc((var(--k) - 1) * 8deg)) translateY(calc(var(--k) == 1 ? -8px : 0px)); }
.gate2__vials span:nth-child(2) { z-index: 1; transform: translateY(-10px); width: 62px; }
.gate2__vials img { filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .5)); }
.gate2__body { padding: 24px 28px 26px; }
.gate2__k { display: inline-flex; align-items: center; gap: 8px; font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.gate2__k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1FA971; box-shadow: 0 0 0 4px #D6F2E4; }
.gate2 h2 { margin-top: 10px; font-size: 1.9rem; font-variation-settings: "wdth" 118; letter-spacing: -.02em; }
.gate2__body > p:not(.gate2__k):not(.gate2__fine) { margin-top: 8px; color: var(--ink-2); font-size: .9375rem; }
.gate2__list { display: grid; gap: 8px; margin: 18px 0; }
.gate2__list li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--ground); font-size: .8125rem; color: var(--ink-3); }
.gate2__list b { display: block; font-size: .9375rem; color: var(--ink); }
.gate2__ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; --c: #05789D; --glow: #B0D9E7; background: radial-gradient(120% 120% at 30% 20%, #fff, #CFE6F7); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px rgba(5, 120, 157, .6); }
.gate2__ic svg { width: 24px; height: 24px; }
.gate2__agree { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; font-size: .875rem; line-height: 1.45; color: var(--ink-2); cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .2s, background-color .2s; }
.gate2__agree:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.gate2__agree:has(input:checked) { background: #F1FAF5; box-shadow: inset 0 0 0 2px #1FA971; }
.gate2__agree input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gate2__box { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background-color .2s, box-shadow .2s; }
.gate2__box svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .25s var(--ease-out); }
.gate2__agree input:checked + .gate2__box { background: #1FA971; box-shadow: none; }
.gate2__agree input:checked + .gate2__box svg { opacity: 1; transform: none; }
.gate2__agree input:focus-visible + .gate2__box { outline: 2px solid var(--ink); outline-offset: 2px; }
.gate2__go { margin-top: 14px; min-height: 54px; transition: transform .25s var(--ease-out), box-shadow .25s, opacity .25s; }
.gate2__go:disabled { opacity: .35; cursor: not-allowed; }
.gate2__go:not(:disabled) { background-color: #0B0D12; box-shadow: 0 16px 30px -14px rgba(11, 13, 18, .7); }
.gate2__go:not(:disabled):hover { transform: translateY(-2px); }
.gate2__fine { margin-top: 12px; text-align: center; font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) {
  .gate:not([hidden]) .gate2 { animation: gateIn .5s var(--ease-out); } @keyframes gateIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
  .gate2__vials span { animation: mfloat 5s var(--ease-io) infinite alternate; animation-delay: calc(var(--k) * -1.4s); }
  .gate2__a--1 { animation: aur1 14s var(--ease-io) infinite alternate; } .gate2__a--2 { animation: aur2 17s var(--ease-io) infinite alternate; }
}
@media (max-width: 480px) { .gate2__top { height: 140px; } .gate2__body { padding: 20px 20px 22px; } .gate2 h2 { font-size: 1.6rem; } .gate2__vials span { width: 44px; } .gate2__vials span:nth-child(2) { width: 50px; } .gate2__logo { width: 100px; } }

/* ---------- v32: card bar light (2026-10-29). Brandon: the light should flow along the bus, up into the raised
   segment, and end there at its node, not finish on the straight line. One travelling dash per card size (narrow
   cards end on the short riser just past the text, wider cards on the first full riser); the node flares on arrival. ---------- */
.strip-trace--run .st-run { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16 100; stroke-dashoffset: 16; opacity: 0; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px var(--glow)); }
.strip-trace--run .st-end { fill: var(--glow); stroke: #fff; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.strip-trace--run .st-run--sm, .strip-trace--run .st-end--sm { display: none; }
@container (max-width: 240px) { .strip-trace--run .st-run--sm, .strip-trace--run .st-end--sm { display: inline; } .strip-trace--run .st-run--lg, .strip-trace--run .st-end--lg { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .card.is-lit .st-run, .card:hover .st-run { animation: stRun 3.4s cubic-bezier(.5, .05, .3, 1) .9s infinite; }
  .card.is-lit .st-end, .card:hover .st-end { animation: stEnd 3.4s ease-out .9s infinite; }
  @keyframes stRun { 0% { stroke-dashoffset: 16; opacity: 1; } 62% { stroke-dashoffset: -84; opacity: 1; } 74%, 100% { stroke-dashoffset: -84; opacity: 0; } }
  @keyframes stEnd { 0%, 56% { opacity: 0; transform: scale(1); } 64% { opacity: 1; transform: scale(1.9); } 84%, 100% { opacity: 0; transform: scale(1); } }
}

/* ---------- v32: homepage hero (2026-10-29). Brandon: "boring", make people want to scroll. A dark panel lit by
   drifting auroras in the label colours, a faint grid and floating molecules; the promise set in Archivo with an
   Instrument Serif italic accent; a formatted lead; four condensed glass trust tiles with gradient icon discs and a
   FedEx mark on dispatch; the vials on a glowing pedestal with two floating proof chips. ---------- */
:root { --ff-serif: "Instrument Serif", Georgia, serif; }
.hero--x { padding: 14px 0 clamp(24px, 3vw, 40px); }
.hero__panel { position: relative; isolation: isolate; overflow: hidden; border-radius: 36px; padding: clamp(28px, 4vw, 64px) clamp(22px, 4vw, 64px) clamp(30px, 4vw, 56px); color: #fff;
  background: linear-gradient(150deg, #0C1828 0%, #0A1220 55%, #060A12 100%); box-shadow: 0 50px 90px -50px rgba(4, 12, 28, .85), inset 0 1px 0 rgba(255, 255, 255, .08); }
.hero__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero__fx::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(70% 80% at 72% 45%, #000, transparent 78%); mask-image: radial-gradient(70% 80% at 72% 45%, #000, transparent 78%); }
.hero__fx::after { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 50% at 70% 60%, rgba(166, 215, 240, .14), transparent 70%); }
.hero__a { position: absolute; width: 44%; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .55; }
.hero__a--1 { left: 48%; top: -28%; background: var(--cobalt-cap); }
.hero__a--2 { left: 72%; top: 30%; background: var(--plum-cap); opacity: .5; }
.hero__a--3 { left: 30%; top: 62%; background: var(--wine-cap); opacity: .38; }
.hero__a--4 { left: -14%; top: -24%; background: var(--navy-cap); opacity: .55; }
.hero__mol { position: absolute; width: 120px; overflow: visible; }
.hero__mol line { stroke: rgba(255, 255, 255, .2); stroke-width: 2; stroke-linecap: round; }
.hero__mol circle { fill: #15233A; stroke: rgba(255, 255, 255, .38); stroke-width: 1.5; }
.hero__mol circle.lit { fill: #A6D7F0; stroke: #fff; filter: drop-shadow(0 0 6px #A6D7F0); }
.hero__mol--a { right: 5%; top: 6%; width: 110px; opacity: .8; } .hero__mol--b { left: 40%; bottom: 3%; width: 150px; opacity: .35; } .hero__mol--c { left: 46%; top: 4%; width: 120px; opacity: .3; }
.hero--x .hero__grid { position: relative; }
.hero__pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 7px 14px 7px 10px; border-radius: 999px; font: 500 .6875rem/1 var(--ff-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .86); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.hero__pill i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.hero__live { width: 8px; height: 8px; border-radius: 50%; background: #7DE8C1; box-shadow: 0 0 0 4px rgba(125, 232, 193, .2); }
.hero--x h1 { color: #fff; font-size: clamp(2.9rem, 1.2rem + 4.6vw, 5.6rem); line-height: .94; }
.hero--x h1 em { display: block; margin-top: .06em; font: italic 400 1.08em/1 var(--ff-serif); letter-spacing: -.01em; font-variation-settings: normal; color: transparent; background: linear-gradient(100deg, #A6D7F0 0%, #CFE6F7 30%, #EFBCB8 62%, #A6D7F0 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; padding-bottom: .06em; }
.hero--x .hero__sub { color: rgba(255, 255, 255, .72); font-size: 1.1875rem; line-height: 1.6; max-width: 40ch; }
.hero--x .hero__sub b { color: #fff; font-weight: 600; }
.hero--x .hero__sub .hl { color: #fff; font-weight: 600; background: linear-gradient(transparent 64%, rgba(125, 232, 193, .38) 64%); }
.hero--x .btn:not(.btn--ghost) { background-color: #fff; color: var(--ink); box-shadow: 0 16px 34px -16px rgba(166, 215, 240, .7); }
.hero--x .btn--ghost { color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.hero--x .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.proof--x { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 520px; margin-top: 34px; }
.proof--x li { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 11px; border-radius: 18px; font-size: .78rem; line-height: 1.3; color: rgba(255, 255, 255, .62);
  background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 30px -20px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .35s var(--ease-out), background-color .35s; }
.proof--x li:hover { transform: translateY(-3px); }
.proof--x li b { display: block; color: #fff; font-size: .9375rem; margin-bottom: 1px; }
.proof__ic { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center; color: var(--ink);
  background: radial-gradient(120% 120% at 30% 20%, #fff, color-mix(in srgb, var(--glow) 70%, #fff) 60%, color-mix(in srgb, var(--glow) 100%, var(--c) 18%)); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -8px color-mix(in srgb, var(--glow) 90%, transparent); }
.proof__ic svg { width: 23px; height: 23px; }
.proof__via { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fedex { display: inline-block; width: 44px; height: 14px; padding: 2px 5px; box-sizing: content-box; border-radius: 6px; background: #fff; vertical-align: middle; }
.hero--x .stage { position: relative; }
.hero--x .stage::before { inset: 4% -4% 6%; background: radial-gradient(50% 44% at 50% 60%, rgba(166, 215, 240, .3), rgba(166, 215, 240, 0) 72%); }
.stage__ped { position: absolute; left: 4%; right: 4%; bottom: 4%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(166, 215, 240, .42), rgba(166, 215, 240, .1) 55%, transparent); filter: blur(3px); }
.hero--x .stage__traces { color: rgba(166, 215, 240, .3); }
.hero--x .stage__traces .stage__run { fill: none; stroke: #CFEAFB; stroke-width: 2.4; stroke-dasharray: 10 90; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px #A6D7F0); }
.hero--x .fv__img img { filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .55)); }
.hero--x .fv__shadow { opacity: .4; background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); }
.hero--x .fv__tag { background: rgba(255, 255, 255, .94); }
.hchip { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 18px; color: var(--ink); background: linear-gradient(160deg, #fff, rgba(255, 255, 255, .88)); box-shadow: 0 24px 44px -20px rgba(0, 0, 0, .7), inset 0 1px 0 #fff; }
.hchip small { display: block; font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.hchip b { font-size: .9375rem; }
.hchip--lot { left: -2%; top: 8%; }
.hchip--pass { right: 0; bottom: 16%; }
.hchip__dot { width: 10px; height: 10px; border-radius: 50%; background: #1FA971; box-shadow: 0 0 0 5px #D6F2E4; margin: 0 4px; }
.hchip__ring { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#1FA971 0 100%); position: relative; }
.hchip__ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.hchip__ring b { position: relative; font: 800 .6875rem/1 var(--ff-display); }
@media (prefers-reduced-motion: no-preference) {
  .hero__a--1 { animation: aur1 16s var(--ease-io) infinite alternate; } .hero__a--2 { animation: aur2 19s var(--ease-io) infinite alternate; }
  .hero__a--3 { animation: aur1 22s var(--ease-io) -6s infinite alternate-reverse; } .hero__a--4 { animation: aur2 18s var(--ease-io) -4s infinite alternate; }
  .hero__mol { animation: amol 10s var(--ease-io) infinite alternate; } .hero__mol--b { animation-duration: 13s; animation-delay: -5s; } .hero__mol--c { animation-duration: 15s; animation-delay: -8s; }
  .hero--x h1 em { animation: sheen 8s var(--ease-io) infinite; }
  .hero__live { animation: livePulse 2.2s var(--ease-io) infinite; } @keyframes livePulse { 50% { box-shadow: 0 0 0 8px rgba(125, 232, 193, 0); } }
  .hero--x .stage__run { animation: wireRun 5s linear infinite; }
  .hchip--lot { animation: hchipIn .9s var(--ease-out) .9s both, mfloat 6s var(--ease-io) 1.8s infinite alternate; }
  .hchip--pass { animation: hchipIn .9s var(--ease-out) 1.2s both, mfloat 7s var(--ease-io) 2.1s infinite alternate-reverse; }
  @keyframes hchipIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
}
@media (max-width: 960px) { .hero__panel { border-radius: 28px; } .hchip--lot { left: 0; top: 2%; } .hchip--pass { right: 0; bottom: 8%; } }
@media (max-width: 720px) {
  .hero--x { padding-top: 8px; }
  .hero__panel { padding: 22px 18px 24px; border-radius: 24px; }
  .hero__pill { font-size: .5625rem; letter-spacing: .08em; gap: 7px; margin-bottom: 14px; padding: 6px 11px 6px 8px; }
  .hero--x h1 { font-size: clamp(2.4rem, 12.2vw, 3.3rem); }
  .hero--x .hero__cta .btn--ghost { background: rgba(255, 255, 255, .06); }
  .hero--x .hero__sub { font-size: 1rem; }
  .proof--x { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
  .proof--x li { flex-direction: row; gap: 9px; padding: 9px 10px 9px 9px; border-radius: 15px; font-size: .6875rem; background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
  .proof--x li b { font-size: .8125rem; }
  .proof__ic { width: 32px; height: 32px; border-radius: 10px; } .proof__ic svg { width: 19px; height: 19px; }
  .fedex { width: 34px; height: 11px; padding: 1px 4px; }
  .hchip { padding: 7px 10px 7px 7px; border-radius: 14px; gap: 7px; } .hchip b { font-size: .75rem; } .hchip small { font-size: .5rem; }
  .hchip__ring { width: 30px; height: 30px; } .hchip__ring b { font-size: .5625rem; }
  .hchip--lot { top: -2%; } .hchip--pass { bottom: 2%; }
}
.hero--x h1 em { font-size: .9em; white-space: nowrap; }
.hchip--lot { top: 0; left: 0; }
@media (max-width: 720px) { .hero--x h1 em { font-size: .98em; white-space: normal; } .hchip--lot { top: -8%; left: auto; right: 2%; } .hchip--pass { bottom: -2%; } }
.fedex { width: 52px; height: 16px; padding: 3px 6px; }
@media (max-width: 720px) { .fedex { width: 40px; height: 12px; padding: 2px 5px; } }

/* ---------- v32: numbers band (2026-10-29). Brandon: "the ugliest section". Four separate tiles, each in a family
   colour: a gradient field with a lit corner, a soft inner rim and a deep coloured shadow, an icon disc, a big figure
   and a real button. They lift and the glow brightens on hover. ---------- */
.stats5 { padding: clamp(18px, 3vw, 36px) 0; }
.stats5__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.st5 a { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; height: 100%; padding: 22px 22px 20px; border-radius: 26px; text-decoration: none; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--glow) 40%, transparent), transparent 55%), linear-gradient(155deg, var(--cap) 0%, var(--c) 62%, color-mix(in srgb, var(--c) 70%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 2px 4px rgba(11, 13, 18, .08), 0 24px 44px -24px color-mix(in srgb, var(--c) 90%, #000);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.st5 a::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 65%); mask-image: linear-gradient(200deg, #000, transparent 65%); }
.st5__glow { position: absolute; right: -30%; bottom: -50%; width: 90%; aspect-ratio: 1; border-radius: 50%; z-index: -1; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 50%, transparent), transparent 65%); opacity: .5; transition: opacity .5s, transform .7s var(--ease-out); }
.st5 a:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 4px 8px rgba(11, 13, 18, .08), 0 36px 60px -26px color-mix(in srgb, var(--c) 95%, #000); }
.st5 a:hover .st5__glow { opacity: .95; transform: scale(1.15) translate(-6%, -6%); }
.st5__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st5__ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--ink); background: radial-gradient(120% 120% at 30% 20%, #fff, color-mix(in srgb, var(--glow) 75%, #fff)); box-shadow: inset 0 1px 0 #fff, 0 10px 20px -10px rgba(0, 0, 0, .6); transition: transform .45s var(--ease-out); }
.st5__ic svg { width: 26px; height: 26px; }
.st5 a:hover .st5__ic { transform: rotate(-6deg) scale(1.06); }
.st5__k { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); text-align: right; }
.st5__n { margin-top: 26px; font: 800 clamp(2.6rem, 1.8rem + 2.4vw, 3.8rem)/1 var(--ff-display); font-variation-settings: "wdth" 118; letter-spacing: -.035em; color: #fff; text-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
.st5__n small { margin-left: 4px; font-size: .42em; letter-spacing: 0; color: var(--glow); }
.st5__d { margin-top: 8px; font-size: .9375rem; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.st5__cta { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; font-weight: 700; font-size: .875rem; }
.st5__cta i { position: relative; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); transition: background-color .3s, transform .35s var(--ease-out); }
.st5__cta i::after { content: ""; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translateX(-1px) rotate(45deg); }
.st5 a:hover .st5__cta i { background: #fff; transform: translateX(4px); }
.st5 a:hover .st5__cta i::after { border-color: var(--c); }
@media (max-width: 960px) { .stats5__grid { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (max-width: 560px) {
  .stats5__grid { gap: 10px; }
  .st5 a { padding: 16px 15px 15px; border-radius: 20px; }
  .st5__ic { width: 38px; height: 38px; border-radius: 12px; } .st5__ic svg { width: 22px; height: 22px; }
  .st5__k { font-size: .5rem; letter-spacing: .1em; }
  .st5__n { margin-top: 16px; font-size: 2.4rem; }
  .st5__d { font-size: .8125rem; }
  .st5__cta { font-size: .75rem; padding-top: 12px; gap: 7px; } .st5__cta i { width: 24px; height: 24px; }
}

/* category tiles: a real button in the family colour, with a fill sweep and arrow on hover */
.abtn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; justify-self: start; margin-top: 8px; padding: 0 8px 0 18px; min-height: 44px; border-radius: 999px; font-weight: 700; font-size: .9375rem; color: var(--c);
  background: color-mix(in srgb, var(--glow) 35%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 35%, transparent), 0 10px 20px -14px var(--c); transition: color .35s, box-shadow .35s; }
.abtn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(150deg, var(--cap), var(--c)); transform: translateX(-101%); transition: transform .5s var(--ease-out); }
.abtn i { position: relative; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(150deg, var(--cap), var(--c)); transition: background-color .35s, transform .4s var(--ease-out); }
.abtn i::after { content: ""; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translateX(-1px) rotate(45deg); transition: border-color .35s; }
.area:hover .abtn, .abtn:focus-visible { color: #fff; box-shadow: 0 16px 28px -14px var(--c); }
.area:hover .abtn::before { transform: none; }
.area:hover .abtn i { background: #fff; transform: translateX(3px); }
.area:hover .abtn i::after { border-color: var(--c); }
.area__body .link { display: none; }

/* ---------- v32: FAQ block (PDP + homepage). Brandon: make it premium; "Frequently asked questions."; "Need
   assistance? We're here to help." with a custom positive mark. A lit help card in the family colour and numbered
   glass accordions. ---------- */
.faq3 { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.faq3__side { position: sticky; top: 100px; }
.faq3 h2 { margin-top: 10px; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.2rem); font-variation-settings: "wdth" 118; letter-spacing: -.03em; line-height: 1.02; }
.faq3__lead { margin-top: 12px; color: var(--ink-2); font-size: 1.0625rem; }
.faq3__help { position: relative; isolation: isolate; overflow: hidden; margin-top: 26px; padding: 24px; border-radius: 26px; color: #fff;
  background: radial-gradient(100% 80% at 100% 0%, color-mix(in srgb, var(--glow) 38%, transparent), transparent 60%), linear-gradient(155deg, var(--cap), var(--c) 65%, color-mix(in srgb, var(--c) 70%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 30px 50px -28px color-mix(in srgb, var(--c) 90%, #000); }
.faq3__fx { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%); }
.faq3__help h3 { color: #fff; font-size: 1.375rem; font-variation-settings: "wdth" 112; line-height: 1.2; letter-spacing: -.01em; }
.helpmark { display: inline-block; width: 30px; height: 30px; vertical-align: -6px; margin-left: 4px; filter: drop-shadow(0 4px 8px rgba(255, 122, 138, .45)); }
.faq3__help p { margin-top: 8px; color: rgba(255, 255, 255, .8); font-size: .9375rem; }
.faq3__help p a { color: #fff; }
.faq3__acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.faq3__acts .btn { background-color: #fff; color: var(--ink); }
.faq3__link { color: #fff; font-weight: 600; font-size: .875rem; }
.faq3__quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .16); }
.faq3__quick a { display: inline-flex; padding: 6px 11px; border-radius: 999px; font-size: .75rem; font-weight: 600; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background-color .2s; }
.faq3__quick a:hover { background: rgba(255, 255, 255, .24); }
@media (prefers-reduced-motion: no-preference) { .helpmark { animation: hmBeat 2.6s var(--ease-io) infinite; transform-origin: 50% 60%; } @keyframes hmBeat { 0%, 60%, 100% { transform: scale(1); } 68% { transform: scale(1.14); } 76% { transform: scale(.98); } 84% { transform: scale(1.08); } } }
.faq3__list summary { justify-content: flex-start; gap: 14px; }
.faq3__n { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: .6875rem; color: var(--c); background: color-mix(in srgb, var(--glow) 45%, #fff); transition: background-color .25s, color .25s; }
.faq3__q { flex: 1; }
.faq3__list summary i { margin-left: auto; }
.faq3__list details[open] .faq3__n { color: #fff; background: linear-gradient(150deg, var(--cap), var(--c)); }
.faq3__list details > div { padding-left: 70px; }
@media (max-width: 960px) { .faq3 { grid-template-columns: 1fr; } .faq3__side { position: relative; top: 0; } }
@media (max-width: 640px) { .faq3__list details > div { padding-left: 16px; } .faq3__n { width: 28px; height: 28px; border-radius: 9px; } .faq3__help { padding: 20px; } .faq3__help h3 { font-size: 1.1875rem; } }

/* ---------- v32: homepage order builder (2026-10-29). Brandon: restyle it as premium as the rest, and it must actually
   show 10 vials when 10 is chosen. A dark lit panel (same language as the hero and the box band), a glass order card,
   compound tiles in their family colours, and a lit tray that holds exactly the chosen count: one row up to 5, two
   rows of 5 at 10. New vials drop in. ---------- */
.obld--x { position: relative; isolation: isolate; overflow: hidden; color: #fff; gap: clamp(24px, 4vw, 56px); padding: clamp(26px, 4vw, 56px); border-radius: 36px;
  background: linear-gradient(150deg, #0C1828 0%, #0A1220 55%, #060A12 100%); box-shadow: 0 50px 90px -50px rgba(4, 12, 28, .85), inset 0 1px 0 rgba(255, 255, 255, .08); }
.obld--x > *:not(.bxfx) { position: relative; z-index: 1; }
.obld--x h2 { margin-top: 4px; color: #fff; font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.8rem); line-height: .98; letter-spacing: -.035em; }
.obld--x h2 em { display: block; font: italic 400 1.05em/1.05 var(--ff-serif); letter-spacing: -.01em; font-variation-settings: normal; color: transparent; background: linear-gradient(100deg, #A6D7F0 0%, #CFE6F7 35%, #7DE8C1 70%, #A6D7F0 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; }
.obld--x .obld__lead { color: rgba(255, 255, 255, .72) !important; font-size: 1.0625rem; line-height: 1.6; }
.obld--x .obld__lead b { color: #fff; }
.obld--x .ladder { margin-top: 22px; }
.obld--x .hero__cta { margin-top: 26px; }
.obld--x .btn:not(.btn--ghost) { background-color: #fff; color: var(--ink); }
.obld--x .btn--ghost { color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.obld--x .obld__card { padding: 20px; border-radius: 28px; gap: 12px; color: var(--ink); background: linear-gradient(160deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .88)); box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .8), inset 0 1px 0 #fff; }
.obld__k { display: flex; justify-content: space-between; font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
.obld--x .obld__picks button { position: relative; background: linear-gradient(170deg, #fff, color-mix(in srgb, var(--glow) 22%, #fff)); box-shadow: inset 0 0 0 1px var(--line), 0 6px 14px -10px rgba(11, 13, 18, .3); font-size: .75rem; transition: transform .25s var(--ease-out), box-shadow .25s; }
.obld--x .obld__picks button:hover { transform: translateY(-2px); }
.obld--x .obld__picks button[aria-checked="true"] { color: #fff; background: linear-gradient(150deg, var(--cap), var(--c)); box-shadow: 0 12px 22px -12px var(--c); }
.obld--x .obld__picks button[aria-checked="true"] span { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); }
.obld--x .obld__stage { height: 260px; border-radius: 20px; overflow: hidden; background: radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--glow) 55%, #fff), #fff 70%); box-shadow: inset 0 0 0 1px var(--line); }
.obld--x .obld__stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--c) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c) 8%, transparent) 1px, transparent 1px); background-size: 20px 20px; -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000); }
.obld__tray { position: absolute; left: 10%; right: 10%; bottom: 8%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 30%, transparent), transparent); }
.obld__vials { position: absolute; inset: 14px 18px 22px; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); align-content: end; justify-items: center; gap: 4px 2px; }
.obld--x[data-obld] .obld__stage[data-rows="2"] .obld__vials { align-content: center; }
.obld--x .obld__v { position: relative; left: auto; bottom: auto; transform: none; height: 200px; width: auto; aspect-ratio: 342 / 800; transition: opacity .3s; }
.obld--x .obld__stage[data-rows="2"] .obld__v { height: 106px; }
.obld--x .obld__v.is-off { display: none; }
.obld--x .obld__v img { filter: drop-shadow(0 12px 12px rgba(11, 13, 18, .22)); }
.obld--x .obld__v.is-drop { animation: obDrop .55s var(--ease-out) both; animation-delay: calc(var(--k) * 45ms); }
@keyframes obDrop { from { opacity: 0; transform: translateY(-30px) scale(.9); } }
.obld__count { position: absolute; right: 12px; top: 12px; padding: 5px 11px; border-radius: 999px; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: linear-gradient(150deg, var(--cap), var(--c)); box-shadow: 0 8px 16px -8px var(--c); }
.obld--x .obld__more { display: none; }
.obld--x .obld__qty button { position: relative; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); transition: transform .25s var(--ease-out), box-shadow .25s; }
.obld--x .obld__qty button:hover { transform: translateY(-2px); }
.obld--x .obld__qty button[aria-checked="true"] { color: #fff; background: linear-gradient(150deg, #13233A, #0A1220); box-shadow: 0 12px 22px -12px rgba(10, 18, 32, .8); }
.obld--x .obld__qty button[aria-checked="true"] small { color: #7DE8C1; }
.obld--x .obld__sum { padding-top: 6px; border-top: 1px solid var(--line); }
.obld--x .obld__sum b { font-size: 2.1rem; }
.obld--x .obld__sum span { padding: 4px 9px; border-radius: 999px; background: #E3F6EC; }
.obld--x .obld__sum .btn { background-color: var(--ink); color: #fff; }
@media (prefers-reduced-motion: no-preference) { .obld--x h2 em { animation: sheen 8s var(--ease-io) infinite; } }
@media (max-width: 960px) { .obld--x { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .obld--x { padding: 22px 16px; border-radius: 24px; }
  .obld--x .obld__card { padding: 14px; border-radius: 22px; }
  .obld--x .obld__stage { height: 220px; } .obld--x .obld__v { height: 168px; } .obld--x .obld__stage[data-rows="2"] .obld__v { height: 88px; }
  .obld--x .obld__picks { gap: 6px; } .obld--x .obld__picks button { font-size: .6875rem; }
  .obld--x .obld__sum b { font-size: 1.75rem; } .obld--x .obld__sum .btn { width: 100%; }
}
.obld--x .obld__copy > .hero__pill { color: rgba(255, 255, 255, .86) !important; margin: 0 0 18px; max-width: none; }
.obld--x .obld__vials { inset: 44px 18px 18px; }
.obld--x .obld__stage[data-rows="2"] .obld__v { height: 94px; }
.obld__count { left: 12px; right: auto; }
@media (max-width: 560px) {
  .obld--x .obld__picks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .obld--x .obld__picks button { padding: 6px 2px 7px; font-size: .5625rem; border-radius: 11px; }
  .obld--x .obld__picks button span { height: 38px; }
  .obld--x .obld__qty { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; } .obld--x .obld__qty button { font-size: .75rem; padding: 8px 2px; } .obld--x .obld__qty small { font-size: .5625rem; }
  .obld--x .obld__stage[data-rows="2"] .obld__v { height: 76px; }
}

/* v32: the verify card scans only the QR code: a QR mark in the family colour inside four scan corners, beam sweeping it */
.arv2__frame--qr { overflow: visible; aspect-ratio: 1; padding: 14px; border-radius: 16px; background: radial-gradient(90% 90% at 50% 40%, #fff, color-mix(in srgb, var(--glow) 40%, #fff)); box-shadow: 0 12px 24px -14px rgba(11, 13, 18, .4), inset 0 0 0 1px var(--line); }
.arv2__frame--qr::before, .arv2__frame--qr::after { display: none; }
.arv2__qr { display: block; color: color-mix(in srgb, var(--c) 85%, #000); }
.qrmark { display: block; width: 100%; height: auto; border-radius: 4px; }
.arv2__corner { position: absolute; z-index: 2; width: 20px; height: 20px; border: 2.5px solid var(--c); }
.arv2__corner--a { left: 4px; top: 4px; border-right: 0; border-bottom: 0; border-radius: 7px 0 0 0; }
.arv2__corner--b { right: 4px; top: 4px; border-left: 0; border-bottom: 0; border-radius: 0 7px 0 0; }
.arv2__corner--c { left: 4px; bottom: 4px; border-right: 0; border-top: 0; border-radius: 0 0 0 7px; }
.arv2__corner--d { right: 4px; bottom: 4px; border-left: 0; border-top: 0; border-radius: 0 0 7px 0; }
.arv2__frame--qr .arv2__beam { left: 10px; right: 10px; top: 14px; }
@media (prefers-reduced-motion: no-preference) { .arv2__frame--qr .arv2__beam { animation: qrBeam 2.4s var(--ease-io) infinite alternate; } @keyframes qrBeam { from { top: 14px; } to { top: calc(100% - 16px); } } }

/* v32: the line after text links read as an em dash. It is now a chevron that nudges on hover. */
.link::after { width: 7px; height: 7px; background: none; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-left: 2px; transition: transform .3s var(--ease-out); }
.link:hover::after { width: 7px; transform: translateX(3px) rotate(45deg); }

/* ---------- v33: light premium panels (2026-10-29). Brandon: the dark backgrounds on the hero, the order builder and
   the box bands did not mesh with the light site. They are now light: white to ground, soft pastel glows in the label
   colours (the same --glow tints the cards use), a faint ink grid, molecules and circuit in quiet ink, glass tiles.
   Dark ink type, a serif accent in the label caps. Same structure and motion as v31/v32. ---------- */
.hero__panel, .obld--x, .band--box {
  color: var(--ink);
  background: radial-gradient(55% 70% at 88% 8%, color-mix(in srgb, var(--cobalt-glow) 55%, transparent), transparent 62%),
    radial-gradient(45% 65% at 4% 100%, color-mix(in srgb, var(--plum-glow) 60%, transparent), transparent 62%),
    radial-gradient(40% 55% at 60% 105%, color-mix(in srgb, var(--wine-glow) 45%, transparent), transparent 60%),
    linear-gradient(160deg, #FFFFFF 0%, #F6F9FC 50%, #EDF2F8 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), inset 0 1px 0 #fff, 0 1px 2px rgba(11, 13, 18, .05), 0 34px 70px -42px rgba(20, 40, 70, .32); }
/* glows: light label tints instead of deep caps */
.hero__a, .bxfx__a { filter: blur(64px); opacity: .55; }
.hero__a--1, .bxfx__a--1 { background: var(--cobalt-glow); } .hero__a--2, .bxfx__a--2 { background: var(--plum-glow); opacity: .6; }
.hero__a--3, .bxfx__a--3 { background: var(--wine-glow); opacity: .4; } .hero__a--4, .bxfx__a--4 { background: var(--navy-glow); opacity: .5; }
.hero__fx::before, .bxfx::before { background-image: linear-gradient(rgba(20, 40, 70, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 40, 70, .055) 1px, transparent 1px); }
.hero__fx::after { background: radial-gradient(40% 50% at 70% 60%, rgba(255, 255, 255, .7), transparent 70%); }
.hero__mol line, .bxfx__mol line { stroke: rgba(30, 55, 95, .2); }
.hero__mol circle, .bxfx__mol circle { fill: #fff; stroke: rgba(30, 55, 95, .32); }
.hero__mol circle.lit, .bxfx__mol circle.lit { fill: var(--cobalt-glow); stroke: var(--cobalt-cap); filter: drop-shadow(0 0 5px var(--cobalt-glow)); }
.bxfx__wire path { stroke: rgba(30, 55, 95, .16); }
.bxfx__wire .bxfx__run { stroke: var(--cobalt-cap); filter: drop-shadow(0 0 4px var(--cobalt-glow)); }
/* type */
.hero__pill, .obld--x .obld__copy > .hero__pill { color: var(--ink-2) !important; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px -10px rgba(20, 40, 70, .25); }
.hero__pill i { background: var(--ink-3); }
.hero__live { background: #1FA971; box-shadow: 0 0 0 4px #D6F2E4; }
.hero--x h1, .obld--x h2 { color: var(--ink); }
.hero--x h1 em, .obld--x h2 em { background-image: linear-gradient(100deg, var(--cobalt-cap) 0%, var(--plum-cap) 35%, var(--wine-cap) 70%, var(--cobalt-cap) 100%); }
.band--box h2, .bbhero h1, .kthero h1 { background-image: linear-gradient(100deg, var(--ink) 30%, #3B4C6B 60%, var(--ink) 90%); }
.hero--x .hero__sub, .obld--x .obld__lead { color: var(--ink-2) !important; }
.hero--x .hero__sub b, .obld--x .obld__lead b { color: var(--ink); }
.hero--x .hero__sub .hl { color: var(--ink); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--forest-glow) 70%, transparent) 62%); }
.band--box .eyebrow, .bbhero__crumbs { color: var(--ink-3); }
.band--box .eyebrow b, .bbhero__crumbs a { color: var(--ink); }
.band--box p { color: var(--ink-2); }
/* buttons */
.hero--x .btn:not(.btn--ghost), .obld--x .btn:not(.btn--ghost), .band--box .btn:not(.btn--ghost) { background-color: var(--ink); color: #fff; box-shadow: 0 16px 30px -16px rgba(11, 13, 18, .6); }
.hero--x .btn--ghost, .obld--x .btn--ghost, .band--box .btn--ghost { color: var(--ink); background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.hero--x .btn--ghost:hover, .obld--x .btn--ghost:hover, .band--box .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
/* glass tiles */
.proof--x li, .ladder li, .band--box .tier, .kthero__stats li { color: var(--ink-3); background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .64)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 1px 2px rgba(11, 13, 18, .05), 0 12px 26px -16px rgba(20, 40, 70, .3); }
.proof--x li b, .ladder b, .band--box .tier b, .kthero__stats b { color: var(--ink); }
.ladder li:nth-child(n+3) b, .band--box .tier--line b, .kthero__stats li:nth-child(2) b { color: var(--cobalt-cap); }
.ladder span, .band--box .tier span, .kthero__stats span { color: var(--ink-3); }
.ladder em { color: var(--ink); }
.ladder li::before { background: linear-gradient(90deg, var(--cobalt-cap), transparent); }
.proof__via { color: var(--ink-3); }
.fedex { box-shadow: inset 0 0 0 1px var(--line); }
/* vials and stage */
.hero--x .fv__img img, .band--box .fv__img img { filter: drop-shadow(0 24px 24px rgba(20, 40, 70, .2)); }
.hero--x .fv__shadow, .band--box .fv__shadow { opacity: .8; background: radial-gradient(closest-side, rgba(20, 40, 70, .3), transparent); }
.hero--x .stage::before { background: radial-gradient(50% 44% at 50% 60%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 72%); }
.stage__ped, .cluster__floor { background: radial-gradient(closest-side, color-mix(in srgb, var(--cobalt-glow) 70%, transparent), transparent); }
.hchip { box-shadow: inset 0 0 0 1px var(--line), 0 18px 34px -18px rgba(20, 40, 70, .4); }
/* order builder card + crate */
.obld--x .obld__card { background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .8)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 1px 2px rgba(11, 13, 18, .05), 0 30px 60px -34px rgba(20, 40, 70, .4); }
.crate__box { background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .64)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 30px 60px -30px rgba(20, 40, 70, .4); }
.crate__k { color: var(--ink-3); } .crate__n b { color: var(--ink); }
.crate__s { background: radial-gradient(80% 70% at 50% 35%, #fff, color-mix(in srgb, var(--glow) 60%, #fff)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }
.crate__s img { filter: drop-shadow(0 8px 8px rgba(20, 40, 70, .22)); }
.crate__bar { background: var(--ground-2, #E4EAF1); }
.crate__bar i { background: linear-gradient(90deg, var(--cobalt-cap), var(--forest-glow)); }
.crate__save { color: var(--ink-3); } .crate__save .is-on { color: var(--ok); }
.crate__tag, .ktfan__tag { box-shadow: inset 0 0 0 1px var(--line), 0 18px 34px -18px rgba(20, 40, 70, .45); }
.ktfan::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--cobalt-glow) 70%, transparent), transparent); }
.ktfan__v img { filter: drop-shadow(0 14px 16px rgba(20, 40, 70, .28)); }

/* ---------- v33: hero circuit. Confined to the vial stage (it ran under the text column), uniformly scaled, a pad
   under every vial, and a light that runs from the terminal along the bus and up each riser in turn. ---------- */
.hero--x .stage__traces { display: none; }
.hcirc { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.hcirc__base path { fill: none; stroke: rgba(30, 55, 95, .22); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hcirc__term { fill: #fff; stroke: rgba(30, 55, 95, .35); stroke-width: 2; }
.hcirc__pad { fill: #fff; stroke: rgba(30, 55, 95, .35); stroke-width: 2; }
.hcirc__run { fill: none; stroke: var(--cobalt-cap); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10 100; stroke-dashoffset: 10; opacity: 0; filter: drop-shadow(0 0 4px var(--cobalt-glow)); }
.hcirc__hit { fill: var(--cobalt-glow); stroke: var(--cobalt-cap); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .hcirc__run { animation: hcRun 4.8s cubic-bezier(.5, .05, .3, 1) infinite; animation-delay: calc(var(--k) * 1.2s); }
  .hcirc__hit { animation: hcHit 4.8s ease-out infinite; animation-delay: calc(var(--k) * 1.2s); }
  @keyframes hcRun { 0% { stroke-dashoffset: 10; opacity: 1; } 40% { stroke-dashoffset: -90; opacity: 1; } 48%, 100% { stroke-dashoffset: -90; opacity: 0; } }
  @keyframes hcHit { 0%, 36% { opacity: 0; transform: scale(1); } 42% { opacity: 1; transform: scale(1.7); } 60%, 100% { opacity: 0; transform: scale(1); } }
}
.hchip--pass { bottom: 22%; }
@media (max-width: 720px) { .hchip--pass { top: -8%; bottom: auto; left: 0; right: auto; } }
/* v33 overlaps: no molecule behind the hero circuit or the order card; on phones the proof chips would cover the
   headline, so they step aside and the molecules go quieter */
.hero__mol--b, .obld--x .bxfx__mol--b { display: none; }
@media (max-width: 720px) { .hchip { display: none; } .hero__mol, .bxfx__mol { opacity: .3 !important; } }

/* ---------- v34: arrival cards (2026-10-29). Brandon: generic white cards; card 1 looked empty. Each card is glass
   with a tint of its family colour lit from one corner, a coloured top edge, a faint grid, a gradient step badge and
   a lift on hover. Card 1 gains a shipping scene: a route from the lab to your bench, a FedEx truck driving it and
   the route filling in behind it, the end pin pinging. ---------- */
.arv3 { overflow: hidden; isolation: isolate; border-radius: 28px;
  background: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--glow) 55%, transparent), transparent 62%), linear-gradient(170deg, #fff 0%, rgba(255, 255, 255, .86) 55%, color-mix(in srgb, var(--glow) 18%, #fff) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), inset 0 1px 0 #fff, 0 1px 2px rgba(11, 13, 18, .05), 0 16px 34px -18px color-mix(in srgb, var(--c) 45%, transparent), 0 40px 70px -46px rgba(20, 40, 70, .35);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.arv3::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--cap), var(--glow)); }
.arv3__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--c) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c) 7%, transparent) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(70% 55% at 100% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 55% at 100% 0%, #000, transparent 75%); }
.arv3:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), inset 0 1px 0 #fff, 0 2px 4px rgba(11, 13, 18, .05), 0 24px 44px -18px color-mix(in srgb, var(--c) 55%, transparent), 0 50px 80px -46px rgba(20, 40, 70, .4); }
.arv3 .arv2__n b { background: linear-gradient(150deg, var(--cap), var(--c)); box-shadow: 0 6px 12px -6px var(--c); }
.arv3 .arv2__n { color: color-mix(in srgb, var(--c) 70%, var(--ink-3)); }
.arv3 .arv2__scan { background: linear-gradient(160deg, color-mix(in srgb, var(--glow) 30%, #fff), rgba(255, 255, 255, .6)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); }
.arv3 .arv2__rec { box-shadow: inset 0 0 0 1px var(--line), 0 8px 18px -12px rgba(20, 40, 70, .3); }
.arv3 .arv2__pads li.is-done .arv2__pad { background: var(--c); box-shadow: inset 0 0 0 5px var(--c), inset 0 0 0 9px #fff; }
.arv3 .arv2__pads li.is-done + li::before { background: var(--c); }
.arv3 .arv2__chip { background: rgba(255, 255, 255, .7); }
.arv2__bus path { stroke: color-mix(in srgb, var(--cobalt-cap) 35%, transparent); }

.ship3 { margin-top: 4px; padding: 12px 12px 14px; border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--glow) 30%, #fff), rgba(255, 255, 255, .6)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 8px 18px -14px rgba(20, 40, 70, .3); }
.ship3__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ship3__road { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; filter: drop-shadow(0 4px 6px rgba(20, 40, 70, .12)); }
.ship3__route { fill: none; stroke: color-mix(in srgb, var(--c) 35%, transparent); stroke-width: 2; stroke-dasharray: 5 6; stroke-linecap: round; }
.ship3__done { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.ship3__ping { fill: color-mix(in srgb, var(--glow) 70%, transparent); transform-box: fill-box; transform-origin: center; }
.ship3__truck { filter: drop-shadow(0 4px 4px rgba(20, 40, 70, .25)); }
.ship3__still { display: none; }
.ship3__stops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.ship3__stops li { display: grid; gap: 1px; font-size: .6875rem; line-height: 1.3; color: var(--ink-3); }
.ship3__stops li:nth-child(2) { text-align: center; } .ship3__stops li:nth-child(3) { text-align: right; }
.ship3__stops b { font-size: .8125rem; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .ship3__ping { animation: shipPing 2.2s var(--ease-out) infinite; } @keyframes shipPing { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } } }
@media (prefers-reduced-motion: reduce) { .ship3__truck, .ship3__done animate { display: none; } .ship3__still { display: inline; } }

/* v35: lighter panels (Brandon: "a bit lighter"). Same tints, roughly half the strength; mostly white. */
.hero__panel, .obld--x, .band--box {
  background: radial-gradient(55% 70% at 88% 8%, color-mix(in srgb, var(--cobalt-glow) 26%, transparent), transparent 62%),
    radial-gradient(45% 65% at 4% 100%, color-mix(in srgb, var(--plum-glow) 28%, transparent), transparent 62%),
    radial-gradient(40% 55% at 60% 105%, color-mix(in srgb, var(--wine-glow) 20%, transparent), transparent 60%),
    linear-gradient(160deg, #FFFFFF 0%, #FAFCFE 55%, #F3F6FA 100%); }
.hero__a, .bxfx__a { opacity: .22 !important; }
.hero__fx::before, .bxfx::before { background-image: linear-gradient(rgba(20, 40, 70, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 40, 70, .035) 1px, transparent 1px); }

/* ---------- v35: cohesion (2026-10-29). Brandon: the tinted panels did not look cohesive with the rest of the site.
   The hero now sits straight on the page ground like every other section (no box, no glows, no grid, no molecules);
   the order builder and the box bands use the site's standard white card (paper, shadow-1, the same radius as the
   other feature bands). Content, type, tiles, chips and the vial circuit are unchanged. ---------- */
.hero__panel { background: transparent !important; box-shadow: none !important; border-radius: 0; padding: clamp(18px, 3vw, 40px) 0 clamp(20px, 3vw, 36px); overflow: visible; }
.hero__fx, .bxfx { display: none !important; }
.obld--x, .band--box { background: var(--paper) !important; box-shadow: var(--shadow-1) !important; }
.obld--x .obld__card { background: var(--ground) !important; box-shadow: none !important; }
.obld--x .obld__stage { background: radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--glow) 45%, #fff), #fff 70%); }
.obld--x .obld__picks button:not([aria-checked="true"]), .obld--x .obld__qty button:not([aria-checked="true"]) { background: var(--paper); }
.proof--x li, .ladder li, .band--box .tier, .kthero__stats li { background: var(--paper); box-shadow: var(--shadow-1); }
.obld--x .ladder li, .band--box .tier, .bbhero .ladder li, .kthero__stats li { background: var(--ground); box-shadow: none; }
.hero__pill { background: var(--paper); }
.crate__box { background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 720px) { .hero__panel { padding: 10px 0 20px; } }

/* v36: the side progress rail is removed (Brandon). Markup gone; this keeps any cached page from showing it. */
.rail { display: none !important; }

/* ---------- v37: bulk builder, one card per compound (2026-10-29). The mg selector switches which size the
   quantity counts; a size already in the order keeps a dot, and the image badge totals every size. ---------- */
.bkc__img .szimg[hidden] { display: none; }
.bkc__in { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: var(--r-pill); background: linear-gradient(150deg, var(--cap), var(--c)); color: #fff; font-size: .5625rem; box-shadow: 0 6px 12px -6px var(--c); }
.bkc .bkc__price { margin-top: 4px; }

/* ---------- v38: bulk size selector (2026-10-29). Brandon: the loose mg pills looked messy. Now one segmented track
   the width of the card body: numbers only, the unit once at the end, the picked size a raised white tab in the
   family colour. A size already in the order carries a small dot inside its tab. Single-size cards show the same
   track with one fixed tab, so names, sizes, prices and steppers line up across the grid. ---------- */
:is(.bkc, .pk2, .ten) .seg { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)) auto; gap: 2px; margin: 10px 0 10px; padding: 3px; border-radius: 10px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
:is(.bkc, .pk2, .ten) .seg button { position: relative; min-width: 0; min-height: 28px; padding: 0 2px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-3); font: 600 .75rem/1 var(--ff-body); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
:is(.bkc, .pk2, .ten) .seg button:hover { color: var(--ink); }
:is(.bkc, .pk2, .ten) .seg button[aria-checked="true"] { background: #fff; color: var(--c); box-shadow: 0 1px 2px rgba(11, 13, 18, .08), 0 3px 8px -4px rgba(11, 13, 18, .2); }
:is(.bkc, .pk2, .ten) .seg button:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
:is(.bkc, .pk2, .ten) .seg button.has::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 12px; height: 2px; margin-left: -6px; border-radius: 2px; background: var(--c); opacity: .7; }
:is(.bkc, .pk2, .ten) .seg__u { align-self: center; padding: 0 7px 0 5px; font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
:is(.bkc, .pk2, .ten) .seg--one { display: inline-grid; grid-template-columns: auto auto; }
:is(.bkc, .pk2, .ten) .seg__on { display: grid; place-items: center; min-height: 28px; padding: 0 12px; border-radius: 7px; background: #fff; color: var(--ink); font: 600 .75rem/1 var(--ff-body); font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(11, 13, 18, .08); }
@media (max-width: 640px) { :is(.bkc, .pk2, .ten) .seg button { font-size: .6875rem; } }
/* v38.1: on the narrow two-up Kits cards, tabs size to their own text so a long blend size (12.5/2.5) never meets the unit. */
@media (max-width: 640px) { .ten .seg:not([style="--n:2"]):not(.seg--one) { grid-template-columns: repeat(var(--n, 1), auto) auto; } .ten .seg__u { padding: 0 5px 0 3px; } }
:is(.bkc, .pk2, .ten) .seg--one { width: max-content; justify-self: start; }

/* ---------- v39: structure viewer overlap (2026-10-31). Brandon: the viewer ran over the residues panel. Cause: the
   v-glass pass set .m3d to align-items: stretch, so the viewer took the side panel's height and, holding its 4/3
   aspect ratio, grew sideways out of its column (500px past it at 1100 wide). The viewer now stays 4/3 at its own
   column width, sits at the top, and on desktop stays in view while the taller residues panel scrolls past. ---------- */
.m3d__view { align-self: start; width: 100%; }
@media (min-width: 861px) { .m3d__view { position: sticky; top: 96px; } }

/* ---------- v40: blends in the structure viewer (2026-10-31). Brandon: show every component's structure in the
   window. The components stack in blend order and turn together; a row of component tabs along the bottom lights
   one and dims the rest (hover or tap), and the side panel groups the residue chips under each component. ---------- */
.m3d__parts { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.m3d__parts button { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .88); color: var(--ink); font: 600 .75rem/1 var(--ff-body); box-shadow: inset 0 0 0 1px var(--line), 0 6px 14px -10px rgba(11, 13, 18, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.m3d__parts button i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.m3d__parts button:hover { box-shadow: inset 0 0 0 1.5px var(--c), 0 6px 14px -10px rgba(11, 13, 18, .4); }
.m3d__parts button.on { background: var(--ink); color: #fff; box-shadow: 0 8px 16px -10px rgba(11, 13, 18, .6); }
.m3d__parts button.on i { background: #fff; }
.m3d__parts button:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.m3d__comp + .m3d__comp { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.m3d__ch { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.m3d__ch i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--c); }
.m3d__ch span { margin-left: auto; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
/* v40.1: on phones a blend window is square, so a wrapped row of component tabs still leaves the stack its room */
@media (max-width: 860px) { .m3d__view--blend { aspect-ratio: 1 / 1; } .m3d__parts button { min-height: 28px; padding: 0 10px; font-size: .6875rem; } }
/* v41: footer phone beside the email, and the accepted card marks on the base row */
.ftr__brand .ftr__mail + .ftr__phone { margin-top: -8px; }
.ftr__cards { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ftr__cards li, .ftr .ftr__cards li + li { display: flex; margin: 0; padding: 0; }
.ftr__cards img { display: block; width: 38px; height: 24px; }
@media (max-width: 640px) {
  .ftr__brand { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; }
  .ftr__logo { grid-row: span 2; }
  .ftr__brand .ftr__mail { justify-self: end; margin: 0; }
  .ftr__cards { margin: 6px 0; }
}
@media (max-width: 360px) {
  .ftr__brand { grid-template-columns: 1fr; }
  .ftr__logo { grid-row: auto; margin-bottom: 4px; }
  .ftr__brand .ftr__mail { justify-self: start; }
}
/* v42: Build a Box joined the header menu. Six items plus Quality need tighter pills just above the phone menu. */
@media (min-width: 961px) and (max-width: 1120px) { .nav { margin-left: 0; gap: 0; } .nav a, .nav .dd__btn { padding-inline: 10px; } }

/* =================================================================== v43: /kits hero, "The lightbox" (2026-11-03).
   Brandon: the hero "looks terrible", design it at agency level. Concept: a 10-pack is one lot and one certificate, so
   the hero is one inspection rail of ten vials that answers to one choice. Navy room, lit panel, ten vials held up to
   the light, the label circuit running under them as a rail with one node per vial. Picking a compound re-racks all
   ten left to right, retints the light and updates the price, so the hero is also the fastest way to buy.
   The default DOM is the finished state: every motion below is additive and gated. */
@property --kx-g { syntax: "<color>"; inherits: true; initial-value: #B0D9E7; }
.kx { padding: 14px 0 0; scroll-margin-top: 90px; --kx-g: var(--glow); transition: --kx-g .7s var(--ease-out); }
.kx__band { position: relative; overflow: hidden; isolation: isolate; border-radius: 36px; color: #fff; background: radial-gradient(70% 90% at 0% 0%, #0E4CA8 0%, transparent 62%), radial-gradient(60% 80% at 100% 10%, color-mix(in srgb, var(--kx-g) 26%, #07306E) 0%, transparent 70%), linear-gradient(160deg, #07306E, #041C3C 60%, #03142C); box-shadow: 0 44px 80px -46px rgba(4, 28, 60, .85); }
.kx__band::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(90% 70% at 60% 0%, #000, transparent 90%); mask-image: radial-gradient(90% 70% at 60% 0%, #000, transparent 90%); }
.kx__top { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 4vw, 64px); align-items: end; padding: clamp(24px, 3.4vw, 46px) clamp(20px, 4vw, 56px) clamp(22px, 2.6vw, 34px); }
.kx .crumbs { margin: 0; color: #C9DCEE; font-size: .6875rem; }
.kx .crumbs a { color: #fff; }
.kx h1 { margin: clamp(14px, 1.8vw, 22px) 0 0; font: 800 clamp(2.6rem, 1.2rem + 4.3vw, 5.25rem)/.94 var(--ff-display); font-variation-settings: "wdth" 122; letter-spacing: -.04em; color: #fff; text-wrap: balance; }
.kx h1 span { display: block; white-space: nowrap; }
.kx h1 em { display: block; font-style: normal; color: color-mix(in srgb, var(--kx-g) 72%, #fff); }
.kx__lead { margin: clamp(12px, 1.4vw, 18px) 0 0; max-width: 44ch; color: #DCEEFA; font-size: 1.0625rem; line-height: 1.5; }

/* the choice */
.kx__pick { padding: 18px; border-radius: 24px; background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 30px 50px -36px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.kx__k { margin: 0 0 10px; font: 500 .625rem/1 var(--ff-mono); letter-spacing: .14em; text-transform: uppercase; color: #DCEEFA; }
.kx__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kx__chips button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px 0 10px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #fff; font: 600 .875rem/1 var(--ff-body); cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.kx__chips button i { width: 10px; height: 10px; border-radius: 50%; background: var(--glow); box-shadow: inset 0 0 0 2px var(--cap); }
.kx__chips button:hover { background: rgba(255, 255, 255, .2); }
.kx__chips button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: none; }
.kx__chips button:focus-visible, .kx__all:focus-visible, .kx__buy .btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.kx__buy { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .2); }
.kx__what { margin: 0; font-size: .875rem; color: #DCEEFA; }
.kx__what b { font-weight: 600; color: #fff; }
.kx__price { display: flex; align-items: baseline; gap: 9px; margin: 3px 0 0; }
.kx__price b { font: 800 clamp(1.625rem, 1.2rem + 1vw, 2.125rem)/1 var(--ff-display); font-variation-settings: "wdth" 112; letter-spacing: -.02em; color: #fff; }
.kx__price s { font-size: .875rem; color: #C9DCEE; }
.kx__buy .btn { flex: none; background-color: #fff; color: var(--ink); }
.kx__foot { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0 0; font-size: .8125rem; color: #DCEEFA; }
.kx__all { color: #fff; font-weight: 600; }

/* the lightbox: ten vials against the light, standing on the rail */
.kx__stage { position: relative; overflow: hidden; background: radial-gradient(62% 110% at 50% 58%, #fff 0%, color-mix(in srgb, var(--kx-g) 30%, #fff) 38%, color-mix(in srgb, var(--kx-g) 92%, #fff) 72%, color-mix(in srgb, var(--kx-g) 78%, #3F73AE) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 24px 40px -30px rgba(3, 20, 44, .55); }
.kx__rack { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0 clamp(0px, .5vw, 8px); margin: 0; padding: clamp(18px, 2vw, 26px) clamp(20px, 4vw, 56px) 0; list-style: none; }
.kx__v { position: relative; display: block; transition: opacity .18s, transform .28s var(--ease-out); }
.kx__v picture, .kx__v img { display: block; width: 100%; height: auto; }
.kx__v img { filter: drop-shadow(0 10px 8px rgba(9, 28, 56, .26)); }
.kx__v::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -5px; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(7, 26, 52, .42), transparent); }
.kx__v.is-sw { opacity: 0; transform: translateY(10px) scale(.96); }
.kx__rail { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0 clamp(0px, .5vw, 8px); margin: 0; padding: 12px clamp(20px, 4vw, 56px) 13px; list-style: none; background: linear-gradient(180deg, #0B2A54, #041C3C); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); font: 500 .6875rem/1 var(--ff-mono); letter-spacing: .08em; color: #DCEEFA; }
.kx__rail::before { content: ""; position: absolute; left: clamp(20px, 4vw, 56px); right: clamp(20px, 4vw, 56px); top: 16px; height: 1.5px; background: linear-gradient(90deg, #7DE8C1, #A6D7F0); opacity: .75; transform-origin: 0 50%; }
.kx__rail li { position: relative; display: grid; justify-items: center; gap: 9px; }
.kx__rail i { width: 9px; height: 9px; border-radius: 50%; background: #7DE8C1; box-shadow: 0 0 0 3px rgba(125, 232, 193, .22); }
.kx__sweep { position: absolute; inset: 0 auto 0 0; z-index: 2; width: 16%; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7) 50%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes kxUp { from { opacity: 0; transform: translateY(26px); } }
  @keyframes kxSweep { 0% { opacity: 0; transform: translateX(-100%); } 12%, 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(640%); } }
  @keyframes kxLine { from { transform: scaleX(0); } }
  @keyframes kxNode { from { opacity: .25; transform: scale(.4); } }
  .kx__rack .kx__v { animation: kxUp .8s var(--ease-out) both; animation-delay: calc(var(--k) * 55ms + 120ms); }
  .kx__rail::before { animation: kxLine 1.1s var(--ease-out) .3s both; }
  .kx__rail i { animation: kxNode .4s var(--ease-out) both; animation-delay: calc(var(--k) * 90ms + 340ms); }
  .kx__sweep.is-run { animation: kxSweep 1.1s var(--ease-io) both; }
  .kx__chips button:active { transform: scale(.97); }
}
@media (max-width: 1080px) { .kx__chips button { padding-inline: 9px 11px; font-size: .8125rem; } .kx__buy { flex-wrap: wrap; } }
@media (max-width: 860px) {
  .kx__top { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .kx h1 { font-size: clamp(2.5rem, 1.5rem + 5vw, 4.5rem); }
}
@media (max-width: 640px) {
  .kx { padding-top: 8px; }
  .kx__band { border-radius: 26px; }
  .kx h1 span { white-space: normal; }
  .kx__lead { font-size: 1rem; }
  .kx__pick { padding: 14px; border-radius: 20px; }
  .kx__chips { flex-wrap: nowrap; margin-inline: -14px; padding-inline: 14px; overflow-x: auto; scrollbar-width: none; }
  .kx__chips::-webkit-scrollbar { display: none; }
  .kx__chips button { flex: none; min-height: 40px; }
  /* ten across is too small to read on a phone, so the rail becomes a rack of two rows of five */
  .kx__rack, .kx__rail { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kx__rack { gap: 8px 4px; padding: 14px 16px 0; }
  .kx__rail { display: none; }
  .kx__stage { padding-bottom: 16px; }
  .kx__band { display: flex; flex-direction: column; }
  .kx__top { display: contents; }
  .kx__copy { order: 1; padding: 20px 20px 18px; }
  .kx__stage { order: 2; }
  .kx__pick { order: 3; margin: 16px; }
  .kx__buy { flex-direction: column; align-items: stretch; gap: 12px; }
  .kx__buy .btn { width: 100%; }
  .kx__foot { margin-top: 10px; }
}

/* the 10-pack cards: a tray of ten real vials instead of three */
.ten__well { height: 182px; display: grid; place-items: end center; padding: 22px 12px 8px; background: radial-gradient(90% 90% at 50% 100%, #fff, color-mix(in srgb, var(--glow) 46%, var(--ground))); }
.ten__stack { position: static; display: block; width: 100%; transition: transform .45s var(--ease-out); }
.ten__stack picture, .ten__stack img { display: block; width: 100%; height: auto; object-fit: contain; }
.ten__stack img { filter: none; }
.ten:hover .ten__stack { transform: translateY(-3px) scale(1.03); }
@media (max-width: 640px) { .ten__well { height: 124px; padding: 26px 6px 5px; } .ten__x { right: 8px; bottom: auto; top: 10px; } }

/* =================================================================== v44: legal pages (2026-11-03). Brandon: "beautifully
   designed". A document people must actually be able to read: one measure, numbered sections hung in the margin, and
   the contents drawn as the label circuit, a trace with one node per section that lights as you read. */
.lg { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.lg__toc { position: sticky; top: 104px; }
.lg__toc summary { display: none; }
.lg__k { margin: 0 0 14px; font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.lg__list { position: relative; display: grid; margin: 0; padding: 0; list-style: none; counter-reset: lg; }
.lg__list::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 1.5px; background: var(--line-2); }
.lg__list a { position: relative; display: block; padding: 7px 0 7px 22px; color: var(--ink-3); font-size: .875rem; line-height: 1.3; text-decoration: none; transition: color .2s; }
.lg__list a::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background-color .2s, box-shadow .2s, transform .25s var(--ease-out); }
.lg__list a:hover { color: var(--ink); }
.lg__list a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.lg__list a[aria-current="true"]::before { background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--glow) 60%, transparent); transform: scale(1.1); }
.lg__list a:focus-visible, .lg__toc summary:focus-visible, .lg__end a:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; border-radius: 6px; }
.lg__doc { min-width: 0; }
.lg__note { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: clamp(18px, 2.4vw, 26px); border-radius: 24px; color: #fff; background: radial-gradient(90% 130% at 0% 0%, #0E4CA8, transparent 62%), linear-gradient(150deg, #07306E, #041C3C 72%); box-shadow: 0 30px 50px -38px rgba(4, 28, 60, .8); }
.lg__note svg { width: 34px; height: 34px; color: #A6D7F0; }
.lg__note b { display: block; margin-bottom: 4px; font: 500 .625rem/1.3 var(--ff-mono); letter-spacing: .16em; text-transform: uppercase; color: #DCEEFA; }
.lg__note p { margin: 0; font-size: 1rem; line-height: 1.55; color: #fff; }
.lg__body { margin-top: 12px; padding: 0 clamp(18px, 3vw, 40px); border-radius: 28px; background: var(--paper); box-shadow: var(--shadow-1); counter-reset: lg-s; }
.lg__s { display: grid; grid-template-columns: 52px minmax(0, 1fr); padding: clamp(24px, 2.8vw, 36px) 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.lg__s:first-child { border-top: 0; }
.lg__n { padding-top: 6px; font-size: .75rem; color: var(--ink-3); }
.lg__s h2 { margin: 0 0 12px; font: 800 clamp(1.3125rem, 1.15rem + .55vw, 1.625rem)/1.15 var(--ff-display); font-variation-settings: "wdth" 114; letter-spacing: -.015em; color: var(--ink); }
.lg__c { max-width: 68ch; color: var(--ink-2); font-size: 1rem; line-height: 1.68; }
.lg__c p { margin: 0; }
.lg__c p + p, .lg__c ul + p, .lg__c p + ul, .lg__c p + .lg__two { margin-top: 14px; }
.lg__c > ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.lg__c > ul li { position: relative; padding-left: 20px; }
.lg__c > ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1.5px; background: var(--c); }
.lg__c a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.lg__c a:hover { text-decoration-color: var(--ink); }
.lg__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: none; }
.lg__yes, .lg__no { padding: 18px; border-radius: 18px; }
.lg__yes { background: #EEF8F3; box-shadow: inset 0 0 0 1px #BFE3D2; }
.lg__no { background: #FDF1F0; box-shadow: inset 0 0 0 1px #F1C9C4; }
.lg__two h3 { margin: 0 0 10px; font: 800 1.0625rem/1.2 var(--ff-display); font-variation-settings: "wdth" 110; color: var(--ink); }
.lg__two ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.lg__two li { position: relative; padding-left: 26px; }
.lg__two li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.lg__no li::before { background: #B42318 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.lg__end { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; align-items: center; margin-top: 12px; padding: clamp(18px, 2.6vw, 28px) clamp(18px, 3vw, 40px); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow-1); }
.lg__end h2 { margin: 0 0 4px; font: 800 1.3125rem/1.15 var(--ff-display); font-variation-settings: "wdth" 114; }
.lg__end p, .lg__end address { margin: 0; font-style: normal; font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }
.lg__end a { color: var(--ink); text-underline-offset: 3px; }
.lg__more { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px !important; font-size: .875rem !important; }
@media (prefers-reduced-motion: no-preference) { html:has(.lg) { scroll-behavior: smooth; } }
@media (max-width: 960px) {
  .lg { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lg__toc { position: static; padding: 0 18px; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow-1); }
  .lg__toc summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; font-weight: 600; cursor: pointer; list-style: none; }
  .lg__toc summary::-webkit-details-marker { display: none; }
  .lg__toc summary::after { content: ""; width: 8px; height: 8px; margin-right: 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
  .lg__toc[open] summary::after { transform: rotate(-135deg); }
  .lg__k { display: none; }
  .lg__list { padding-bottom: 12px; }
}
@media (max-width: 640px) {
  .lg__s { grid-template-columns: minmax(0, 1fr); }
  .lg__n { padding: 0 0 6px; }
  .lg__two, .lg__end { grid-template-columns: minmax(0, 1fr); }
  .lg__note { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media print { .lg__toc { display: none; } .lg { display: block; } }

/* contact: the address chip runs two lines */
.uchip address { font-style: normal; }

/* generated: label colour channels */
[data-ch="bpc-157"] { --c: var(--plum); --cap: var(--plum-cap); --glow: var(--plum-glow); }
[data-ch="tb-500"] { --c: var(--navy); --cap: var(--navy-cap); --glow: var(--navy-glow); }
[data-ch="ghk-cu"] { --c: var(--cobalt); --cap: var(--cobalt-cap); --glow: var(--cobalt-glow); }
[data-ch="semax"] { --c: var(--wine); --cap: var(--wine-cap); --glow: var(--wine-glow); }
[data-ch="glp-3-rt"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="glp-2-tz"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="mots-c"] { --c: var(--mito); --cap: var(--mito-cap); --glow: var(--mito-glow); }
[data-ch="ss-31"] { --c: var(--mito); --cap: var(--mito-cap); --glow: var(--mito-glow); }
[data-ch="klow"] { --c: var(--plum); --cap: var(--plum-cap); --glow: var(--plum-glow); }
[data-ch="bpc-157-tb-500"] { --c: var(--plum); --cap: var(--plum-cap); --glow: var(--plum-glow); }
[data-ch="kpv"] { --c: var(--plum); --cap: var(--plum-cap); --glow: var(--plum-glow); }
[data-ch="ara-290"] { --c: var(--plum); --cap: var(--plum-cap); --glow: var(--plum-glow); }
[data-ch="tb-500-kpv-bpc-157"] { --c: var(--plum); --cap: var(--plum-cap); --glow: var(--plum-glow); }
[data-ch="cartalax"] { --c: var(--plum); --cap: var(--plum-cap); --glow: var(--plum-glow); }
[data-ch="bpc-157-kpv"] { --c: var(--plum); --cap: var(--plum-cap); --glow: var(--plum-glow); }
[data-ch="thymosin-alpha-1"] { --c: var(--plum); --cap: var(--plum-cap); --glow: var(--plum-glow); }
[data-ch="glow"] { --c: var(--cobalt); --cap: var(--cobalt-cap); --glow: var(--cobalt-glow); }
[data-ch="glow-plus"] { --c: var(--cobalt); --cap: var(--cobalt-cap); --glow: var(--cobalt-glow); }
[data-ch="ghk-cu-kpv"] { --c: var(--cobalt); --cap: var(--cobalt-cap); --glow: var(--cobalt-glow); }
[data-ch="ahk-cu"] { --c: var(--cobalt); --cap: var(--cobalt-cap); --glow: var(--cobalt-glow); }
[data-ch="ghk-cu-bpc-157"] { --c: var(--cobalt); --cap: var(--cobalt-cap); --glow: var(--cobalt-glow); }
[data-ch="selank"] { --c: var(--wine); --cap: var(--wine-cap); --glow: var(--wine-glow); }
[data-ch="dsip"] { --c: var(--wine); --cap: var(--wine-cap); --glow: var(--wine-glow); }
[data-ch="pinealon"] { --c: var(--wine); --cap: var(--wine-cap); --glow: var(--wine-glow); }
[data-ch="selank-semax"] { --c: var(--wine); --cap: var(--wine-cap); --glow: var(--wine-glow); }
[data-ch="adamax-selank-pinealon"] { --c: var(--wine); --cap: var(--wine-cap); --glow: var(--wine-glow); }
[data-ch="vip"] { --c: var(--wine); --cap: var(--wine-cap); --glow: var(--wine-glow); }
[data-ch="adamax"] { --c: var(--wine); --cap: var(--wine-cap); --glow: var(--wine-glow); }
[data-ch="5-amino-1mq"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="glp-1-s"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="cagri"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="glp-3-cagri"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="glp-2-glp-3"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="glp-2-cagri"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="glp-3-tesa-cagri"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="cagri-glp-1"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="nad"] { --c: var(--mito); --cap: var(--mito-cap); --glow: var(--mito-glow); }
[data-ch="l-glutathione"] { --c: var(--mito); --cap: var(--mito-cap); --glow: var(--mito-glow); }
[data-ch="epithalon"] { --c: var(--mito); --cap: var(--mito-cap); --glow: var(--mito-glow); }
[data-ch="mots-c-ss-31"] { --c: var(--mito); --cap: var(--mito-cap); --glow: var(--mito-glow); }
[data-ch="aicar"] { --c: var(--mito); --cap: var(--mito-cap); --glow: var(--mito-glow); }
[data-ch="mots-c-nad"] { --c: var(--mito); --cap: var(--mito-cap); --glow: var(--mito-glow); }
[data-ch="tesamorelin"] { --c: var(--navy); --cap: var(--navy-cap); --glow: var(--navy-glow); }
[data-ch="cjc-ipa-blend"] { --c: var(--navy); --cap: var(--navy-cap); --glow: var(--navy-glow); }
[data-ch="tesa-ipa-blend"] { --c: var(--navy); --cap: var(--navy-cap); --glow: var(--navy-glow); }
[data-ch="sermorelin"] { --c: var(--navy); --cap: var(--navy-cap); --glow: var(--navy-glow); }
[data-ch="ipamorelin"] { --c: var(--navy); --cap: var(--navy-cap); --glow: var(--navy-glow); }
[data-ch="igf-1-lr3"] { --c: var(--navy); --cap: var(--navy-cap); --glow: var(--navy-glow); }
[data-ch="cjc-1295-dac"] { --c: var(--navy); --cap: var(--navy-cap); --glow: var(--navy-glow); }
[data-ch="kisspeptin"] { --c: var(--navy); --cap: var(--navy-cap); --glow: var(--navy-glow); }
[data-ch="cjc-1295"] { --c: var(--navy); --cap: var(--navy-cap); --glow: var(--navy-glow); }
[data-ch="pt-141"] { --c: var(--pink); --cap: var(--pink-cap); --glow: var(--pink-glow); }
[data-ch="melanotan-ii"] { --c: var(--pink); --cap: var(--pink-cap); --glow: var(--pink-glow); }
[data-ch="melanotan-i"] { --c: var(--pink); --cap: var(--pink-cap); --glow: var(--pink-glow); }
[data-ch="ipamorelin-dsip"] { --c: var(--violet); --cap: var(--violet-cap); --glow: var(--violet-glow); }
[data-ch="bpc-157-20mg"] { --c: var(--plum); --cap: var(--plum-cap); --glow: var(--plum-glow); }
[data-ch="ghk-cu-100mg"] { --c: var(--cobalt); --cap: var(--cobalt-cap); --glow: var(--cobalt-glow); }
[data-ch="glp-3-rt-10mg"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="glp-3-rt-20mg"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="glp-3-rt-30mg"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="glp-3-rt-60mg"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="glp-2-tz-30mg"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="glp-2-tz-60mg"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="glp-2-tz-100mg"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="mots-c-30mg"] { --c: var(--mito); --cap: var(--mito-cap); --glow: var(--mito-glow); }
[data-ch="mots-c-50mg"] { --c: var(--mito); --cap: var(--mito-cap); --glow: var(--mito-glow); }
[data-ch="ss-31-30mg"] { --c: var(--mito); --cap: var(--mito-cap); --glow: var(--mito-glow); }
[data-ch="ss-31-50mg"] { --c: var(--mito); --cap: var(--mito-cap); --glow: var(--mito-glow); }
[data-ch="kpv-30mg"] { --c: var(--plum); --cap: var(--plum-cap); --glow: var(--plum-glow); }
[data-ch="selank-60mg"] { --c: var(--wine); --cap: var(--wine-cap); --glow: var(--wine-glow); }
[data-ch="dsip-10mg"] { --c: var(--wine); --cap: var(--wine-cap); --glow: var(--wine-glow); }
[data-ch="selank-semax-10-10mg"] { --c: var(--wine); --cap: var(--wine-cap); --glow: var(--wine-glow); }
[data-ch="5-amino-1mq-100mg"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="glp-3-cagri-5-1mg"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="glp-3-cagri-12-5-2-5mg"] { --c: var(--teal); --cap: var(--teal-cap); --glow: var(--teal-glow); }
[data-ch="nad-500mg"] { --c: var(--mito); --cap: var(--mito-cap); --glow: var(--mito-glow); }
[data-ch="nad-1000mg"] { --c: var(--mito); --cap: var(--mito-cap); --glow: var(--mito-glow); }