/* ============================================================
ExactAmino - "Pastel Assay" design system
Re-skinned 2026-07-27 from the approved ExactAmino brand board
(the 04:12 board: dot-ring mark, pastel caps, "Science. Purity.
Confidence."). Every hex below was MEASURED off the board with a
PNG sampler, not read off a JPEG by eye - see
build/DESIGN-DIRECTION-2026-07-27.md.
Lavender-white paper, deep navy ink, five pastels that colour-code
the catalogue, a periwinkle-to-lavender gradient as the signature.
Pill buttons and flat cards held by a hairline rather than a shadow
are KEPT from the Spectrum build - that flat clinical geometry is
what stops a pastel palette reading as skincare.
🔴 THE CONTRAST RULE. Measured: every board pastel scores 1.37-2.62
against paper, so NONE of them can carry text. What makes the
system work is the inverse - deep navy ON the raw pastel scores
5.63 (periwinkle) to 10.78 (mint), all passing AA. So:
· navy #102a5c carries ALL text, on paper and on any pastel;
· pastels are surface, tint, chip, cap and gradient colours;
· where white text is unavoidable (the primary button), use the
-deep variant of the hue, each fitted to exactly 4.5:1.
Do not put a raw pastel behind small text. It will not pass.
Brand: ink #102a5c · periwinkle #9fb0ea · lavender #b8a4e8
============================================================ */
:root {
/* neutral ramp, hue-shifted off the old blue-grey onto the board's
lavender-navy axis so greys sit in the same family as the pastels */
--n-0:#ffffff; --n-50:#f8f8fc; --n-100:#f1f2fa; --n-150:#eaebf5; --n-200:#e3e6ed;
--n-300:#d7dae2; --n-400:#bec5d3; --n-500:#838ca6; --n-600:#5d6784; --n-700:#3f4a6b;
--n-800:#26314f; --n-900:#102a5c; --n-950:#111b34; --n-1000:#0b1428;
/* the five board pastels, as measured. Identity + surface only. */
--pastel-periwinkle:#9fb0ea; --pastel-lavender:#b8a4e8; --pastel-mint:#a7d6d1;
--pastel-coral:#f3b1a8; --pastel-tan:#f2ba92;
/* AA-safe deep variants - saturation damped to .55 so a darkened coral still
reads coral rather than fire-engine red. Each carries white text at 4.5:1. */
--deep-periwinkle:#5871ca; --deep-lavender:#8363ce; --deep-mint:#2a837a;
--deep-coral:#c45344; --deep-tan:#aa6636;
/* brand - deep navy ink, periwinkle-to-lavender signature */
--brand-ink:#102a5c; --brand-deep:#5871ca; --brand-primary:#9fb0ea;
--brand-blue:#9fb0ea; --brand-azure:#8ea9f4; --brand-sky:#b8a4e8;
/* the signature: the exact gradient sampled off the board's "Confidence." */
--spectrum:linear-gradient(90deg,#8ea9f4,#9fa2f3 48%,#b79ff3);
--brand-grad:var(--spectrum);
--brand-grad-soft:linear-gradient(90deg,#dfe6fb,#e8e2fb);
/* one step deeper than the #9fb0ea used for decoration, so the same token can
carry white button text and read as a link on paper at AA.
Measured: --accent white-on-it 4.54, --accent-ink on lavender wash 4.52. */
--accent:#5871ca; --accent-hover:#5b80d4; --accent-press:#3d63b8;
--accent-tint:#e8ecf9; --accent-tint-2:#ccd6f1; --accent-ink:#4f6ccd;
--accent-glow:rgba(122,153,222,.32); --accent-dark:#a9bdee;
/* states re-hued into the board family: ok off the mint, warn off the tan,
err off the coral. All fitted to 4.5:1 against the lavender wash. */
--ok:#1b7565; --ok-tint:#e0eeee; --ok-dark:#7fd4c2;
--warn:#926222; --warn-ink:#6f4a19; --err:#be422d;
/* surface roles (light) - paper is a lavender-white, not a blue-grey */
--bg:#f7f7fa; --surface:var(--n-0); --surface-2:var(--n-50); --surface-sunk:var(--n-100);
--ink:var(--n-900); --ink-2:var(--n-700); --ink-3:var(--n-600); --ink-faint:var(--n-400);
--line:var(--n-200); --line-2:#edeef7; --line-strong:var(--n-300);
/* the wash the board paper actually falls to at the edges; the worst-case
background every link ink above was contrast-fitted against */
--paper-wash:#eceef4;
/* dark band roles - deep navy rather than near-black, so the analytical band
survives the re-skin in the new family. Every pastel clears 6.2:1 on it. */
--d-bg:#0f1830; --d-surface:#102a5c; --d-surface-2:rgba(255,255,255,.06);
--d-ink:#f4f4fb; --d-ink-2:#b9c2da; --d-ink-3:#8d97b4;
--d-line:rgba(255,255,255,.10); --d-line-2:rgba(255,255,255,.16);
/* The board's typographic system: Space Grotesk for display, Inter for body.
Both are bundled as variable woff2 in assets/fonts - naming a non-bundled
font first would make the site render differently for anyone who happens to
have it installed locally, so only bundled faces lead. Geist Mono stays as
the mono: every lot number, purity figure, CAS and formula is set in it, and
that is a large part of why the data on this site reads as data. */
--font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
/* Space Grotesk carries the brand voice - it is the face the ExactAmino
wordmark itself is drawn in, so headings and the lockup agree. */
--font-display:"Space Grotesk","Inter",system-ui,-apple-system,sans-serif;
--font-mono:"Geist Mono","SF Mono",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
--step--2:clamp(.69rem,.66rem + .1vw,.75rem);
--step--1:clamp(.8rem,.76rem + .18vw,.875rem);
--step-0:clamp(.95rem,.92rem + .12vw,1rem);
--step-1:clamp(1.1rem,1.02rem + .38vw,1.3rem);
--step-2:clamp(1.32rem,1.18rem + .66vw,1.65rem);
--step-3:clamp(1.58rem,1.32rem + 1.1vw,2.15rem);
--step-4:clamp(1.9rem,1.5rem + 1.9vw,2.95rem);
--step-5:clamp(2.25rem,1.6rem + 3.1vw,4rem);
--step-6:clamp(2.7rem,1.7rem + 4.6vw,5.6rem);
/* generous, softly-rounded geometry; buttons and chips run fully pill */
--r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
/* shadows are nearly absent: a 1px lavender-grey line does the containing
work. Kept deliberately flat - a pastel palette plus soft resting shadows
is exactly how this would tip over into skincare. */
--sh-border:0 0 0 1px #e3e6ed;
--sh-1:0 1px 2px rgba(22,33,62,.04);
--sh-2:0 4px 16px rgba(22,33,62,.06);
--sh-3:0 12px 32px rgba(22,33,62,.08);
--sh-4:0 24px 64px rgba(22,33,62,.14);
--ease-std:cubic-bezier(.2,0,0,1); --ease-exit:cubic-bezier(.4,0,1,1);
--ease-move:cubic-bezier(.4,0,.2,1);
--dur-fast:140ms; --dur:200ms; --dur-mod:300ms;
--nav-h:64px; --ticker-h:34px;
}
/* wholesale mode: the whole accent scale shifts to a GREEN carrying a very
slight teal lean (hue 158 - pure green is 120, teal is 180), so B2B is
obvious at a glance without reading a label.
⚠️ This replaced a tan/amber scale on 2026-07-28. Every value below is fitted,
not picked: --accent carries white text at 4.54:1, --accent-press 6.03:1,
--accent-ink sits on Clinical White at 4.51:1, and the two tints carry Exact
Navy at 12.56:1 and 11.22:1. --accent-dark is for the dark band, where it
reads 11.52:1 on #0f1830.
The teal lean is deliberately slight: it has to stay clearly GREEN against
Sea Glass Teal #A7D6D1 and Mint Frost #C5E5D8, which are SKU accents on the
metabolic products and would otherwise collide with the mode signal. */
html[data-mode="b2b"] {
--accent:#318466; --accent-hover:#368c6c; --accent-press:#256f54;
--accent-tint:#edf5f2; --accent-tint-2:#d8ebe4;
--accent-ink:#298060; --accent-glow:rgba(49,132,102,.30); --accent-dark:#a8dcc9;
--brand-grad:linear-gradient(90deg,#baded1,#8dceb6 48%,#45ba8f);
}
/* ---- self-hosted brand faces (all variable woff2, zero external requests) ----
Space Grotesk + Inter are the board's specified system; Geist Mono is kept
from the Spectrum build because the data chrome depends on it. Google Fonts
is deliberately NOT linked - this site has made zero external requests since
it was built and that property is not worth trading for a tag. */
@font-face {
font-family:"Space Grotesk"; font-style:normal; font-weight:300 700; font-display:swap;
src:url("../fonts/space-grotesk.woff2") format("woff2");
}
@font-face {
font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
src:url("../fonts/inter.woff2") format("woff2");
}
@font-face {
font-family:"Geist Mono"; font-style:normal; font-weight:100 900; font-display:swap;
src:url("../fonts/geist-mono.woff2") format("woff2");
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body {
margin:0; background:var(--bg); color:var(--ink);
font-family:var(--font-sans); font-size:var(--step-0); line-height:1.55;
font-weight:400; letter-spacing:normal;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility; font-optical-sizing:auto;
font-feature-settings:"cv01","cv03","ss03"; /* Geist alt glyphs - refined a/g/l */
}
/* mono + numeric data always tabular so figures align and don't jitter */
.mono, .text-mono, [class*="__price"], .stat-cell__v, .kpi__v, .tbl td, .compare-table td,
.dose-row__val, .bind-row, code, .code-chip { font-variant-numeric:tabular-nums lining-nums; }
/* balanced headings, pretty body ragging */
h1,h2,h3,h4 { text-wrap:balance; }
p { text-wrap:pretty; }
img,svg,video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; border:0; background:none; -webkit-appearance:none; appearance:none; }
/* Grotesque display: slightly heavier and tighter than the serif it replaced,
so headings still hold weight without any editorial character. */
h1,h2,h3,h4 { margin:0; line-height:1.16; letter-spacing:-.025em; font-weight:650; font-family:var(--font-display); }
p { margin:0; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs); }
/* ---- layout ---- */
.wrap { width:100%; max-width:1200px; margin-inline:auto; padding-inline:24px; }
.wrap-wide { width:100%; max-width:1320px; margin-inline:auto; padding-inline:24px; }
.section { padding-block:clamp(48px,6vw,96px); }
.section-sm { padding-block:clamp(32px,4vw,56px); }
/* signature background - a fine dot grid under a broad blue wash falling from
the top edge, the way assayverify.com lights its sections */
.grid-bg { position:relative; }
.grid-bg::before {
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(rgba(22,33,62,.055) 1px, transparent 1px),
radial-gradient(640px 320px at 50% 0%, rgba(122,153,222,.10), transparent 70%);
background-size:22px 22px, 100% 100%;
-webkit-mask-image:radial-gradient(ellipse 88% 74% at 50% 22%,#000 28%,transparent 84%);
mask-image:radial-gradient(ellipse 88% 74% at 50% 22%,#000 28%,transparent 84%);
}
.grid-bg > * { position:relative; z-index:1; }
/* dark band */
.band-dark {
--bg:var(--d-bg); --surface:var(--d-surface); --surface-2:var(--d-surface-2);
--ink:var(--d-ink); --ink-2:var(--d-ink-2); --ink-3:var(--d-ink-3);
--line:var(--d-line); --line-2:var(--d-line-2); --accent-ink:var(--accent-dark);
background:var(--d-bg); color:var(--d-ink);
}
.band-dark.grid-bg::before {
background:
radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
radial-gradient(640px 320px at 50% 0%, rgba(122,153,222,.35), transparent 70%);
background-size:22px 22px, 100% 100%;
opacity:1;
}
/* ---- micro-labels ---- */
/* Eyebrows run in the mono, matching the lot numbers and data chrome - the
instrument-panel register rather than the editorial one. */
.eyebrow {
font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
letter-spacing:.16em; color:var(--ink-3); display:inline-flex; align-items:center; gap:8px;
font-weight:500;
}
.band-dark .eyebrow { color:var(--d-ink-2); }
.mono-label { font-family:var(--font-mono); font-size:var(--step--2); text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); }
/* ---- buttons ---- */
.btn {
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:12px 22px; min-height:44px; border-radius:var(--r-pill); border:1px solid transparent;
background:var(--accent); color:#fff; font-weight:600; font-size:var(--step-0);
letter-spacing:normal; transition:background var(--dur) var(--ease-std), transform var(--dur-fast) var(--ease-std), box-shadow var(--dur) var(--ease-std), border-color var(--dur);
white-space:nowrap; -webkit-tap-highlight-color:transparent;
}
@media (hover:hover){ .btn:hover { background:var(--accent-hover); } }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; transform:none; }
.btn svg { width:17px; height:17px; flex:none; }
.btn-lg { padding:15px 30px; min-height:54px; font-size:var(--step-1); border-radius:var(--r-pill); }
.btn-sm { padding:8px 16px; min-height:36px; font-size:var(--step--1); }
.btn-block { width:100%; }
/* the assayverify.com secondary: a white pill held by a hairline */
.btn-ghost { background:var(--surface); color:var(--ink); border-color:var(--line); }
@media (hover:hover){ .btn-ghost:hover { background:var(--surface-2); border-color:var(--ink-3); } }
.btn-dark { background:var(--ink); color:var(--surface); }
@media (hover:hover){ .btn-dark:hover { background:var(--n-800); } }
.btn-on-dark { background:#fff; color:var(--n-950); }
@media (hover:hover){ .btn-on-dark:hover { background:var(--n-150); } }
.btn-glow { box-shadow:0 6px 22px var(--accent-glow); }
@media (hover:hover){ .btn-glow:hover { box-shadow:0 10px 34px var(--accent-glow); transform:translateY(-1px); } }
.btn-glow:active { transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .btn,.btn-glow{ transition:background var(--dur) ease; transform:none !important; } }
/* ---- cards / pills / tags ---- */
/* Flat card: white, 16px, held by a 1px cool line. No resting shadow - the
lift only appears on hover. */
.card {
background:var(--surface); border-radius:var(--r-lg);
box-shadow:var(--sh-border); transition:box-shadow var(--dur), transform var(--dur);
}
.card-hover:hover { transform:translateY(-2px); box-shadow:0 0 0 1px var(--line-strong),var(--sh-2); }
.pill {
display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--r-pill);
background:var(--surface-2); border:1px solid var(--line); font-size:var(--step--2);
font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2);
}
.pill svg { width:13px; height:13px; }
.pill-accent { background:var(--accent-tint); border-color:var(--accent-tint-2); color:var(--accent-ink); }
.pill-ok { background:var(--ok-tint); border-color:transparent; color:var(--ok); }
.tag { display:inline-block; font-family:var(--font-mono); font-size:var(--step--2); text-transform:uppercase; letter-spacing:.08em; color:var(--accent-ink); }
/* ---- reveal ---- */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease-std), transform .6s var(--ease-std); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.06s; }
.reveal[data-delay="2"]{ transition-delay:.12s; }
.reveal[data-delay="3"]{ transition-delay:.18s; }
.reveal[data-delay="4"]{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; } }
/* ============================================================ HEADER */
.trust-ticker {
height:var(--ticker-h); background:var(--n-1000); color:var(--n-300); overflow:hidden;
display:flex; align-items:center; font-family:var(--font-mono); font-size:11px;
text-transform:uppercase; letter-spacing:.14em; border-bottom:1px solid rgba(255,255,255,.06);
}
.trust-ticker__track { display:flex; gap:44px; white-space:nowrap; padding-left:44px; animation:ticker 34s linear infinite; }
.trust-ticker__track span { display:inline-flex; align-items:center; gap:8px; }
.trust-ticker__track span::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--brand-sky); }
@keyframes ticker { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .trust-ticker__track{ animation:none; } }
.site-header {
position:sticky; top:0; z-index:80; height:var(--nav-h);
background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px);
border-bottom:1px solid var(--line); transition:box-shadow var(--dur);
}
.site-header.scrolled { box-shadow:var(--sh-2); }
.site-header__in { height:100%; display:flex; align-items:center; gap:24px; }
/* ---- brand lockup --------------------------------------------------------
Mark and wordmark are optically aligned rather than box-aligned: the text
block is nudged up a hair so the wordmark's x-height centres against the
mark instead of the descender-inclusive line box. */
.brand-logo { display:inline-flex; align-items:center; gap:11px; }
.brand-logo .logo-mark { width:36px; height:36px; flex:none; }
.brand-logo__img { height:38px; width:auto; display:block; }
@media (max-width:560px){ .brand-logo__img { height:32px; } .brand-logo .logo-mark { width:31px; height:31px; } }
.brand-logo__txt { display:flex; flex-direction:column; align-items:flex-start; line-height:1; margin-top:-1px; }
/* Wordmark: FLAT deep navy, no gradient, no sheen. This is a brand rule taken
straight off the packaging handoff - "keep logos flat printed", and "a
gradient icon with white text often looks cleaner than turning all text into
gradient colour". The mark carries the periwinkle-to-lavender sweep; the
wordmark stays solid so the lockup has one focal point rather than two.
Space Grotesk at 600 is the face the board's own wordmark is drawn in. */
.brand-logo__name {
font-family:var(--font-display); font-weight:600; font-size:22px;
letter-spacing:-.02em; color:var(--brand-ink);
}
.brand-logo--dark .brand-logo__name,
.footer-brand .brand-logo__name { color:#fff; }
/* Strapline: much smaller, mono, and set well back so it never competes with
the wordmark. Flat for the same reason the wordmark is. */
.brand-logo__tag {
font-family:var(--font-mono); font-weight:500; font-size:7.5px;
letter-spacing:.26em; text-transform:uppercase; margin-top:5px;
color:var(--ink-3);
}
.brand-logo--dark .brand-logo__tag,
.footer-brand .brand-logo__tag { color:var(--d-ink-3); }
html[data-mode="b2b"] .brand-logo__name { color:var(--accent-press); }
.nav { display:flex; align-items:center; gap:2px; margin-left:8px; }
.nav a { padding:8px 12px; border-radius:var(--r-md); font-size:var(--step--1); color:var(--ink-2); font-weight:500; transition:background var(--dur),color var(--dur); }
.nav a:hover, .nav a.active { background:var(--surface-2); color:var(--ink); }
.header-actions { margin-left:auto; display:flex; align-items:center; gap:6px; }
/* mode toggle */
.mode-toggle {
display:inline-flex; align-items:center; background:var(--surface-2); border:1px solid var(--line);
border-radius:var(--r-pill); padding:3px; gap:2px; font-family:var(--font-mono); font-size:10px;
text-transform:uppercase; letter-spacing:.08em;
}
.mode-toggle button { padding:5px 11px; border-radius:var(--r-pill); border:none; background:transparent; color:var(--ink-3); font-weight:600; transition:background var(--dur),color var(--dur),border-color var(--dur),box-shadow var(--dur); font-family:inherit; font-size:inherit; letter-spacing:inherit; }
.mode-toggle button.on { background:var(--accent); color:#fff; box-shadow:0 2px 8px var(--accent-glow); }
.icon-btn {
position:relative; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
border-radius:var(--r-md); border:1px solid transparent; background:transparent; color:var(--ink-2); transition:background var(--dur),color var(--dur);
}
.icon-btn:hover { background:var(--surface-2); color:var(--ink); }
.icon-btn svg { width:20px; height:20px; }
.cart-count {
position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:8px;
background:var(--accent); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center;
font-family:var(--font-mono);
}
.nav-toggle { display:none; }
@media (max-width:1080px){
.brand-logo__name { font-size:22px; }
.brand-logo__tag { font-size:7.5px; }
.nav { display:none; }
.nav-toggle { display:inline-flex; }
}
/* mobile nav */
.mobile-nav { position:fixed; inset:0; z-index:95; background:var(--surface); transform:translateX(100%); transition:transform var(--dur-mod) var(--ease-std); display:flex; flex-direction:column; padding:20px 24px; overflow:auto; }
.mobile-nav.open { transform:none; }
.mobile-nav a { padding:14px 4px; border-bottom:1px solid var(--line); font-size:var(--step-1); font-weight:600; }
.mobile-nav__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
/* ============================================================ FOOTER */
.site-footer { background:var(--d-bg); color:var(--d-ink-2); padding-block:56px 28px; border-top:1px solid var(--d-line); }
.footer-grid { display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:40px 32px; }
.footer-brand .brand-logo__name { color:#fff; }
.footer-brand p { color:var(--d-ink-3); font-size:var(--step--1); margin-top:14px; max-width:34ch; }
.footer-col h4 { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--d-ink-3); margin-bottom:14px; font-weight:600; }
.footer-col a { display:block; padding:5px 0; font-size:var(--step--1); color:var(--d-ink-2); transition:color var(--dur); }
.footer-col a:hover { color:#fff; }
.footer-legal { margin-top:40px; padding-top:20px; border-top:1px solid var(--d-line); font-size:var(--step--2); color:var(--d-ink-3); line-height:1.7; }
.footer-bottom { margin-top:20px; display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between; font-size:var(--step--2); color:var(--d-ink-3); }
.footer-bottom a { color:var(--d-ink-3); }
.footer-bottom a:hover { color:#fff; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1/-1; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
/* ============================================================ PRODUCT CARD */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:20px; }
.product-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:960px){ .product-grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .product-grid-4{ gap:12px; } .product-grid{ grid-template-columns:1fr; } }
/* Each card inherits --card-accent from its research area (set inline by
productCard), so the tile behind the vial is tinted in the same colour as
the cap on it - the packaging colour code, carried onto the grid. The tint
is held at 10-18% because the vial itself has to stay the brightest object
in the tile. */
.pcard { --card-accent:var(--pastel-periwinkle);
display:flex; flex-direction:column; overflow:hidden; background:var(--surface);
border-radius:var(--r-lg); box-shadow:var(--sh-border),var(--sh-1);
transition:box-shadow var(--dur),transform var(--dur); }
/* No hover MOVEMENT on product cards (removed at request, 2026-07-27): no lift,
no tilt. The pointer-tilt group in fx.js also had .pcard removed. What is left
is a static depth change on hover, which keeps the affordance without the card
shifting under the cursor. */
.pcard:hover { box-shadow:var(--sh-border),var(--sh-3),0 0 0 1px var(--accent-glow); }
.pcard__media { position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:22px;
background:
linear-gradient(160deg,color-mix(in srgb,var(--card-accent) 18%,#ffffff),color-mix(in srgb,var(--card-accent) 9%,#ffffff)); }
/* browsers without color-mix keep the old neutral tile rather than losing the
gradient entirely */
@supports not (background:color-mix(in srgb,#000 10%,#fff)) {
.pcard__media { background:linear-gradient(160deg,var(--n-50),var(--n-100)); }
}
.pcard__media .vial-svg { height:82%; width:auto; }
/* real per-SKU vial photo: fill the square tile edge-to-edge (studio bg becomes the tile bg) */
.vial-img { display:block; }
.pcard__media .vial-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; padding:0; }
.cart-line__thumb .vial-img { width:100%; height:100%; object-fit:cover; }
.stack-chip .svg-wrap .vial-img, .stack-line__v .vial-img, .sv-item .vial-img, .sv-dd-trigger .vial-img { width:100%; height:100%; object-fit:contain; }
/* Area chip. Was white-on-gradient, which measured 2.8:1 and failed AA at
7.5px; it now takes the area's own tint + darkened ink inline (>=4.8:1) and
sits on white so it reads as a label rather than a sticker. */
.pcard__area {
position:absolute; top:9px; right:9px; left:auto; display:inline-block;
max-width:62%; padding:3px 8px; border-radius:var(--r-pill);
background:var(--n-0); color:var(--ink-2);
font-family:var(--font-mono); font-size:7.5px; text-transform:uppercase;
letter-spacing:.07em; line-height:1.35; text-align:right;
box-shadow:0 0 0 1px rgba(22,33,62,.06);
}
.pcard__rating { position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; gap:4px; font-size:11px; font-family:var(--font-mono); background:var(--surface); padding:3px 7px; border-radius:var(--r-pill); box-shadow:var(--sh-border); color:var(--ink-2); }
.pcard__rating svg { width:11px; height:11px; color:var(--warn); fill:var(--warn); }
.pcard__body { padding:15px 16px 17px; display:flex; flex-direction:column; gap:4px; flex:1; }
.pcard__name { font-weight:650; font-size:var(--step-0); letter-spacing:-.01em; }
.pcard__sub { font-size:var(--step--2); color:var(--ink-3); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.05em; }
.pcard__meta { margin-top:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pcard__purity { font-size:11px; font-family:var(--font-mono); color:var(--ok); background:var(--ok-tint); padding:2px 7px; border-radius:var(--r-pill); }
.pcard__foot { margin-top:auto; padding-top:13px; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.pcard__price { font-weight:700; font-size:var(--step-1); letter-spacing:-.02em; }
.pcard__price small { font-weight:500; font-size:var(--step--2); color:var(--ink-3); font-family:var(--font-mono); }
.pcard__mode-tag { font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent-ink); background:var(--accent-tint); padding:2px 6px; border-radius:var(--r-sm); }
/* ---- section heads ---- */
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; flex-wrap:wrap; }
.sec-head h2 { font-size:var(--step-3); max-width:22ch; }
.sec-head p { color:var(--ink-2); max-width:46ch; margin-top:10px; }
/* ---- research area tiles ---- */
.area-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:960px){ .area-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .area-grid{ grid-template-columns:1fr; } }
.area-tile { display:flex; flex-direction:column; gap:10px; padding:22px; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-border),var(--sh-1); transition:box-shadow var(--dur),transform var(--dur); }
.area-tile:hover { transform:translateY(-3px); box-shadow:var(--sh-border),var(--sh-2); }
.area-tile__icon { width:42px; height:42px; border-radius:var(--r-md); background:var(--accent-tint); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; }
.area-tile__icon svg { width:22px; height:22px; }
.area-tile h3 { font-size:var(--step-1); }
.area-tile p { font-size:var(--step--1); color:var(--ink-2); }
.area-tile__count { margin-top:auto; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-ink); }
/* ---- stat row ---- */
.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-border); }
.stat-cell { background:var(--surface); padding:22px 20px; }
.band-dark .stat-cell { background:var(--d-surface); }
.stat-cell__v { font-size:var(--step-3); font-weight:700; letter-spacing:-.03em; }
.stat-cell__l { font-family:var(--font-mono); font-size:var(--step--2); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin-top:4px; }
/* ---- accordion ---- */
.acc { border-top:1px solid var(--line); }
.acc__item { border-bottom:1px solid var(--line); }
.acc__q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 4px; text-align:left; font-weight:600; font-size:var(--step-0); background:transparent; }
.acc__q svg { width:18px; height:18px; color:var(--ink-3); transition:transform var(--dur); flex:none; }
.acc__item.open .acc__q svg { transform:rotate(45deg); }
.acc__a { max-height:0; overflow:hidden; transition:max-height var(--dur-mod) var(--ease-std); }
.acc__a p { padding:0 4px 18px; color:var(--ink-2); font-size:var(--step--1); max-width:70ch; }
@media (prefers-reduced-motion:reduce){ .acc__a{ transition:none; } }
/* ---- FAQ page ---- */
.faq-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:start; }
.faq-side { position:sticky; top:calc(var(--nav-h) + 24px); display:flex; flex-direction:column; gap:20px; }
.faq-nav { display:flex; flex-direction:column; gap:4px; }
.faq-nav a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-md); font-size:var(--step--1); font-weight:550; color:var(--ink-2); transition:background var(--dur),color var(--dur); }
.faq-nav a svg { width:16px; height:16px; flex:none; color:var(--ink-3); transition:color var(--dur); }
.faq-nav a:hover { background:var(--surface); color:var(--ink); box-shadow:var(--sh-border); }
.faq-nav a.on { background:var(--accent-tint); color:var(--accent-ink); }
.faq-nav a.on svg { color:var(--accent); }
.faq-nav a .n { margin-left:auto; font-family:var(--font-mono); font-size:var(--step--2); color:var(--ink-faint); }
.faq-help { padding:20px; background:var(--brand-grad); border-radius:var(--r-lg); color:#fff; box-shadow:var(--sh-2); }
.faq-help h3 { font-size:var(--step-0); color:#fff; }
.faq-help p { font-size:var(--step--1); color:rgba(255,255,255,.82); margin-top:6px; }
.faq-help .btn { margin-top:14px; width:100%; background:#fff; color:var(--brand-ink); }
@media (hover:hover){ .faq-help .btn:hover { background:var(--n-100); } }
.faq-group { scroll-margin-top:calc(var(--nav-h) + 20px); }
.faq-group + .faq-group { margin-top:clamp(28px,3.5vw,44px); }
.faq-group__head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.faq-group__ico { width:38px; height:38px; flex:none; display:grid; place-items:center; background:var(--accent-tint); color:var(--accent); border-radius:var(--r-md); }
.faq-group__ico svg { width:19px; height:19px; }
.faq-group__head h2 { font-size:var(--step-1); }
.faq-group__head .n { margin-left:auto; font-family:var(--font-mono); font-size:var(--step--2); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); }
.faq-acc { border:0; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-border),var(--sh-1); overflow:hidden; }
.faq-acc .acc__item { border-bottom:1px solid var(--line-2); transition:background var(--dur); }
.faq-acc .acc__item:last-child { border-bottom:0; }
.faq-acc .acc__q { padding:17px 20px; }
.faq-acc .acc__q svg { width:16px; height:16px; color:var(--accent); background:var(--accent-tint); border-radius:var(--r-pill); padding:3px; box-sizing:content-box; }
.faq-acc .acc__item.open { background:var(--n-50); }
.faq-acc .acc__a p { padding:0 20px 18px; }
.faq-acc .acc__a a { color:var(--accent); font-weight:550; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:900px){
.faq-layout { grid-template-columns:1fr; }
.faq-side { position:static; }
.faq-nav { flex-direction:row; overflow-x:auto; padding-bottom:4px; }
.faq-nav a { white-space:nowrap; background:var(--surface); box-shadow:var(--sh-border); }
.faq-nav a .n { display:none; }
.faq-help { order:2; }
}
/* ---- newsletter ---- */
.field { display:flex; gap:10px; flex-wrap:wrap; }
.input, input[type=text], input[type=email], input[type=number], select, textarea {
width:100%; padding:11px 14px; border-radius:var(--r-md); border:1px solid var(--line-strong);
background:var(--surface); color:var(--ink); font:inherit; font-size:var(--step--1); transition:border var(--dur),box-shadow var(--dur);
}
.input:focus, input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
label.lbl { display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin-bottom:6px; }
/* ---- toast ---- */
.toast-zone { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:120; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast { background:var(--n-950); color:#fff; padding:11px 18px; border-radius:var(--r-md); font-size:var(--step--1); box-shadow:var(--sh-3); display:flex; align-items:center; gap:10px; animation:toastIn .3s var(--ease-std); }
.toast svg { width:16px; height:16px; color:var(--ok-dark); }
@keyframes toastIn { from{ opacity:0; transform:translateY(10px);} to{opacity:1;transform:none;} }
/* ---- overlays: drawer / search / coa ---- */
.backdrop { position:fixed; inset:0; z-index:90; background:rgba(9,11,16,.5); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity var(--dur),visibility var(--dur); }
.backdrop.open { opacity:1; visibility:visible; }
.drawer { position:fixed; top:0; right:0; bottom:0; z-index:100; width:min(420px,92vw); background:var(--surface); box-shadow:var(--sh-4); transform:translateX(100%); transition:transform var(--dur-mod) var(--ease-std); display:flex; flex-direction:column; }
.drawer.open { transform:none; }
.drawer__head { padding:18px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.drawer__head h3 { font-size:var(--step-1); }
.drawer__body { flex:1; overflow:auto; padding:8px 20px; }
.drawer__foot { border-top:1px solid var(--line); padding:18px 20px; background:var(--surface-2); }
.cart-line { display:grid; grid-template-columns:52px 1fr auto; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); align-items:center; }
.cart-line__thumb { width:52px; height:52px; border-radius:var(--r-md); background:var(--surface-2); display:flex; align-items:center; justify-content:center; padding:5px; box-shadow:var(--sh-border); }
.cart-line__thumb .vial-svg { height:100%; }
.cart-line__name { font-weight:600; font-size:var(--step--1); }
.cart-line__meta { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); text-transform:uppercase; }
.cart-line__free { color:var(--ok); font-weight:600; }
.qty-step { display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--r-md); overflow:hidden; }
.qty-step button { width:26px; height:26px; display:flex; align-items:center; justify-content:center; background:var(--surface); color:var(--ink-2); }
.qty-step button:hover { background:var(--surface-2); }
.qty-step span { min-width:26px; text-align:center; font-size:var(--step--1); font-variant-numeric:tabular-nums; }
.cart-rm { color:var(--ink-3); font-size:11px; margin-top:4px; background:none; }
.cart-rm:hover { color:var(--err); }
.cart-totals { font-size:var(--step--1); }
.cart-totals__row { display:flex; justify-content:space-between; padding:4px 0; color:var(--ink-2); }
.cart-totals__row.big { color:var(--ink); font-weight:700; font-size:var(--step-1); padding-top:10px; margin-top:6px; border-top:1px solid var(--line); }
.cart-totals__row.save { color:var(--ok); font-weight:600; }
.cart-note { font-size:11px; color:var(--ink-3); font-family:var(--font-mono); margin-top:8px; line-height:1.5; }
/* search panel */
.search-panel { position:fixed; top:0; left:0; right:0; z-index:100; background:var(--surface); box-shadow:var(--sh-3); transform:translateY(-100%); transition:transform var(--dur-mod) var(--ease-std); max-height:82vh; overflow:auto; }
.search-panel.open { transform:none; }
.search-panel__in { padding:22px 24px; max-width:760px; margin-inline:auto; }
.search-input-row { display:flex; align-items:center; gap:12px; border-bottom:2px solid var(--ink); padding-bottom:12px; }
.search-input-row input { border:none; box-shadow:none; font-size:var(--step-2); padding:4px 0; }
.search-input-row input:focus { box-shadow:none; }
.search-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.search-chip { padding:6px 12px; border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--line); font-size:var(--step--2); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; }
.search-chip:hover { background:var(--accent-tint); border-color:var(--accent-tint-2); color:var(--accent-ink); }
.search-results { margin-top:20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
/* COA modal */
.coa-modal { position:fixed; inset:0; z-index:110; display:none; align-items:center; justify-content:center; padding:24px; }
.coa-modal.open { display:flex; }
.coa-modal__card { width:min(880px,96vw); height:min(88vh,900px); background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-4); display:flex; flex-direction:column; overflow:hidden; }
.coa-modal__head { padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; }
.coa-modal__head h3 { font-size:var(--step-0); }
.coa-modal__head .sub { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; }
.coa-modal__head .spacer { margin-left:auto; }
.coa-modal__body { flex:1; background:var(--n-100); }
.coa-modal__body iframe { width:100%; height:100%; border:0; }
.coa-modal__foot { padding:12px 18px; border-top:1px solid var(--line); background:var(--surface-2); font-size:var(--step--2); color:var(--ink-3); display:flex; justify-content:space-between; align-items:center; gap:12px; }
/* ---- vial svg ---- */
.vial-svg { display:block; }
/* ---- utility ---- */
.stack { display:flex; flex-direction:column; }
.gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px} .gap-6{gap:24px}
.flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between}
.wrap-flex{flex-wrap:wrap} .grow{flex:1}
.mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px} .mt-6{margin-top:24px} .mt-8{margin-top:32px}
.text-c{text-align:center} .mx-auto{margin-inline:auto}
.muted{color:var(--ink-2)} .faint{color:var(--ink-3)} .accent{color:var(--accent-ink)}
.mono{font-family:var(--font-mono)}
.divider{height:1px;background:var(--line);border:0;margin:0}
.badge-demo{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--warn-ink);background:#fbf3e4;border:1px solid #f0dcb4;padding:3px 9px;border-radius:var(--r-pill)}
.lead{font-size:var(--step-1);color:var(--ink-2);line-height:1.6;max-width:60ch}
/* generic page hero */
.page-hero { padding-block:clamp(40px,6vw,84px) clamp(30px,4vw,48px); }
.page-hero h1 { font-size:var(--step-4); max-width:20ch; }
.page-hero .lead { margin-top:16px; }
.crumbs { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin-bottom:14px; display:flex; gap:8px; }
.crumbs a:hover { color:var(--accent-ink); }
/* prose */
.prose { max-width:70ch; }
.prose h2 { font-size:var(--step-2); margin-top:36px; margin-bottom:12px; }
.prose h3 { font-size:var(--step-1); margin-top:24px; margin-bottom:8px; }
.prose p { color:var(--ink-2); margin-bottom:14px; line-height:1.7; }
.prose ul { color:var(--ink-2); padding-left:20px; margin-bottom:14px; line-height:1.7; }
.prose li { margin-bottom:6px; }
/* mol banner */
.mol-section { position:relative; overflow:hidden; }
/* canvas is a replaced element: inset:0 alone keeps its intrinsic 300x150,
so it must be told to fill the band explicitly (else it boxes into the corner) */
.mol-bg { position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.9; display:block; }
.mol-section > .wrap, .mol-section > .wrap-wide { position:relative; z-index:2; }
/* tables */
.tbl { width:100%; border-collapse:collapse; font-size:var(--step--1); }
.tbl th, .tbl td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); }
.tbl th { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:600; }
.tbl tbody tr:hover { background:var(--surface-2); }
.tbl-wrap { overflow-x:auto; border-radius:var(--r-lg); box-shadow:var(--sh-border); }
/* feature cards */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.feature { padding:24px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-border),var(--sh-1); position:relative; overflow:hidden; transition:box-shadow var(--dur),transform var(--dur); }
.feature::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--brand-grad); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-mod) var(--ease-std); }
.feature:hover { transform:translateY(-3px); box-shadow:var(--sh-border),var(--sh-2); }
.feature:hover::before { transform:scaleX(1); }
.feature__icon { width:44px; height:44px; border-radius:var(--r-md); background:var(--accent-tint); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.feature__icon svg { width:22px; height:22px; }
.feature h3 { font-size:var(--step-1); margin-bottom:8px; }
.feature p { color:var(--ink-2); font-size:var(--step--1); }
/* review cards */
.review { padding:22px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-border),var(--sh-1); border-left:3px solid var(--accent); }
.review__stars { display:flex; gap:2px; color:var(--brand-azure); margin-bottom:10px; }
.review__stars svg { width:15px; height:15px; fill:var(--brand-azure); }
.review p { color:var(--ink-2); font-size:var(--step--1); }
.review__who { margin-top:12px; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); }
/* hero (home) */
.hero { position:relative; overflow:hidden; padding-block:clamp(56px,8vw,120px); background:var(--d-bg); color:var(--d-ink); }
.hero__glow { position:absolute; top:-25%; right:-30%; width:100%; height:150%; background:radial-gradient(closest-side,rgba(122,153,222,.38),rgba(142,169,244,.12) 55%,transparent 100%); mix-blend-mode:screen; pointer-events:none; animation:drift 14s ease-in-out infinite alternate; }
@keyframes drift { to { transform:translate(-6%,4%) scale(1.08); } }
@media (prefers-reduced-motion:reduce){ .hero__glow{ animation:none; } }
/* hero backdrop: dot grid under a broad blue wash from the top edge */
.hero__grid { position:absolute; inset:0; background:
radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
radial-gradient(640px 320px at 50% 0%, rgba(122,153,222,.35), transparent 70%);
background-size:22px 22px, 100% 100%;
-webkit-mask-image:radial-gradient(ellipse 80% 90% at 55% 30%,#000,transparent 78%); mask-image:radial-gradient(ellipse 80% 90% at 55% 30%,#000,transparent 78%); }
/* minmax(0,…) rather than bare fr: an fr track floors at min-content, so the
display-size h1 was inflating the text column and squeezing the visual to
~78px. Letting the track shrink below min-content makes the headline wrap. */
.hero__in { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:40px; align-items:center; }
/* sized against the viewport rather than --step-6: the display max was wider
than the text column, so long words overflowed across the hero animation */
.hero h1 { font-size:clamp(2.4rem,4.9vw,4.4rem); letter-spacing:-.02em; text-wrap:balance; overflow-wrap:break-word; }
/* the spectrum, run through the headline */
.hero h1 .accent-line { background:var(--spectrum); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__lead { color:var(--d-ink-2); font-size:var(--step-1); margin-top:20px; max-width:46ch; }
.hero__cta { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.hero__facts { display:flex; gap:24px; margin-top:34px; flex-wrap:wrap; }
.hero__fact { }
.hero__fact b { display:block; font-size:var(--step-2); font-weight:700; letter-spacing:-.02em; }
.hero__fact span { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--d-ink-3); }
.hero__visual { position:relative; display:flex; align-items:center; justify-content:center; min-height:min(560px,64vh); }
/* the molecule + helix canvas (assets/js/hero-helix.js) sits above the ambient
glow and ring, and never intercepts a pointer */
.hero-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; display:block; }
/* soft specimen light behind the vial */
.hero__visual::before { content:""; position:absolute; width:min(440px,92%); aspect-ratio:1; border-radius:50%;
background:radial-gradient(circle,rgba(199,173,240,.26),rgba(122,153,222,.12) 45%,transparent 66%); filter:blur(6px); z-index:0; }
/* The hard halo ring that used to sit here was competing with the canvas and
reading as a grey disc edge behind it. The animation carries the hero now;
only the soft light above remains. */
@media (prefers-reduced-motion:reduce){ .hero__visual::after{ animation:none; } }
.hero-specimen { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
/* real vial photo, background removed, floating over the dark hero */
.hero-vial-img { width:auto; height:min(460px,72vh); max-width:80vw; object-fit:contain; display:block;
filter:drop-shadow(0 40px 46px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(199,173,240,.14));
animation:hero-float 6s var(--ease-move) infinite; }
@keyframes hero-float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@media (prefers-reduced-motion:reduce){ .hero-vial-img { animation:none; } }
@media (max-width:900px){
.hero{ padding-block:44px 46px; }
/* minmax(0,…) here too - a bare 1fr floors at min-content, which let the
display headline push the whole hero wider than the viewport */
.hero__in{ grid-template-columns:minmax(0,1fr); gap:0; }
.hero h1{ font-size:clamp(1.85rem,7.6vw,3.1rem); }
/* the canvas is absolutely positioned, so the visual needs a real height of
its own here or the animation collapses to nothing on phones */
.hero__visual{ min-height:min(360px,46vh); margin-top:30px; }
.hero__visual::before{ width:min(320px,82vw); }
.hero-vial-img{ height:min(320px,42vh); }
.hero__facts{ gap:20px; margin-top:26px; }
}
/* logo mark: the chromatogram trace keeps its own inline colours */
.logo-mark { display:block; }
/* mode pricing banner */
.mode-banner { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 18px; border-radius:var(--r-lg); background:var(--accent-tint); border:1px solid var(--accent-tint-2); color:var(--accent-ink); font-size:var(--step--1); }
.mode-banner svg { width:20px; height:20px; flex:none; }
.mode-banner strong { font-weight:700; }
/* shop toolbar */
.shop-toolbar { border-bottom:1px solid var(--line); padding-block:14px; margin-bottom:28px; }
.tool-selects { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.tool-select { position:relative; display:inline-flex; align-items:center; gap:11px; padding:7px 40px 7px 8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:var(--sh-border),var(--sh-1); cursor:pointer; transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur); }
.tool-select:hover { transform:translateY(-1px); box-shadow:var(--sh-border),var(--sh-2); }
.tool-select:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint),var(--sh-1); }
.tool-select__chip { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:var(--r-pill); background:var(--accent-tint); color:var(--accent); }
.tool-select__chip svg { width:17px; height:17px; }
.tool-select__body { display:flex; flex-direction:column; gap:1px; }
.tool-select__label { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tool-select select { width:auto; appearance:none; -webkit-appearance:none; border:0; background:transparent; box-shadow:none; border-radius:0; padding:0; font-weight:620; font-size:var(--step--1); line-height:1.3; color:var(--ink); cursor:pointer; }
.tool-select select:focus { outline:none; box-shadow:none; }
.tool-select::after { content:""; position:absolute; right:17px; top:50%; width:7px; height:7px; border-right:1.6px solid var(--ink-3); border-bottom:1.6px solid var(--ink-3); transform:translateY(-70%) rotate(45deg); pointer-events:none; transition:border-color var(--dur); }
.tool-select:focus-within::after { border-color:var(--accent); }
@media (max-width:640px){ .tool-selects{ width:100%; flex-wrap:nowrap; } .tool-selects .tool-select{ flex:1; min-width:0; } .tool-select__body{ min-width:0; flex:1; } .tool-select select{ width:100%; overflow:hidden; text-overflow:ellipsis; } }
/* KPI cards (affiliate) */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px; }
.kpi { padding:20px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-border),var(--sh-1); }
.kpi__v { font-size:var(--step-3); font-weight:700; letter-spacing:-.03em; }
.kpi__l { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin-top:4px; }
.kpi__sub { font-size:11px; color:var(--ok); margin-top:6px; font-family:var(--font-mono); }
.chan-tag { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; padding:2px 7px; border-radius:var(--r-pill); }
.chan-tag.d2c { background:var(--accent-tint); color:var(--accent-ink); }
.chan-tag.b2b { background:#e2f6f4; color:#084d4b; }
.copy-field { display:flex; align-items:center; gap:8px; padding:8px 8px 8px 14px; border-radius:var(--r-md); border:1px solid var(--line-strong); background:var(--surface-2); font-family:var(--font-mono); font-size:var(--step--1); }
.copy-field code { flex:1; overflow:auto; white-space:nowrap; }
/* verify result */
.verify-result { margin-top:20px; padding:22px; border-radius:var(--r-lg); }
.verify-result.ok { background:var(--ok-tint); border:1px solid #bfe6cd; }
.verify-result.bad { background:#fdeceb; border:1px solid #f4c9c6; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
@media (max-width:800px){ .two-col{ grid-template-columns:1fr; } }
.three-col { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:800px){ .three-col{ grid-template-columns:1fr; } }
.hidden { display:none !important; }
/* =====================================================================
ASPECT-PARITY COMPONENTS (stack builder, structure viewer, bespoke
flagship data-viz, DNA verify band, proof tabs, account, bundles)
===================================================================== */
:root{--brand-grad-soft:linear-gradient(90deg,#9fb0ea,#b8a4e8)}
/* ---- molecule banner ---- */
.mol-banner{position:relative;overflow:hidden;background:var(--d-bg);color:#fff;isolation:isolate}
.mol-banner canvas.molbg{position:absolute;inset:0;z-index:0;opacity:.9}
.mol-banner .wrap{position:relative;z-index:1}
.mol-banner h1{color:#fff}
.mol-banner .eyebrow{color:var(--brand-sky)}
.mol-banner p{color:var(--d-ink-2)}
/* ---- Build-a-Stack ---- */
.stack-layout{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start}
.stack-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.stack-chip{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:12px;cursor:pointer;transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur-fast);text-align:left}
.stack-chip:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--sh-2)}
.stack-chip.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-tint)}
.stack-chip .svg-wrap{height:64px;display:flex;justify-content:center;margin-bottom:8px}
.stack-chip .svg-wrap .vial-svg{height:64px}
.stack-chip__name{font-weight:650;font-size:var(--step-0)}
.stack-chip__meta{font-size:12px;color:var(--ink-3);font-family:var(--font-mono)}
.stack-chip__price{font-weight:700;margin-top:4px}
.stack-chip__add{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:var(--r-pill);background:var(--accent);color:#fff;display:grid;place-items:center;opacity:0;transition:opacity var(--dur)}
.stack-chip:hover .stack-chip__add,.stack-chip.on .stack-chip__add{opacity:1}
.stack-chip__add svg{width:15px;height:15px}
.stack-summary{position:sticky;top:calc(var(--nav-h) + 16px);border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-2);overflow:hidden}
.stack-summary__head{padding:18px 20px;background:var(--brand-grad);color:#fff}
.stack-summary__head h3{color:#fff;margin:0}
.stack-summary__head .save-badge{display:inline-block;margin-top:6px;font-family:var(--font-mono);font-size:12px;background:rgba(255,255,255,.18);padding:3px 10px;border-radius:var(--r-pill)}
.stack-lines{padding:8px 20px;max-height:300px;overflow-y:auto}
.stack-line{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.stack-line:last-child{border-bottom:none}
.stack-line__v{width:34px;height:34px;flex:none;display:grid;place-items:center}
.stack-line__v .vial-svg{height:34px}
.stack-line__name{font-weight:600;font-size:var(--step--1);flex:1}
.stack-line.free .stack-line__price{color:var(--ok);font-weight:700}
.stack-line__price{font-family:var(--font-mono);font-size:var(--step--1)}
.stack-line__rm{color:var(--ink-3);cursor:pointer;font-size:18px;line-height:1;padding:0 4px}
.stack-line__rm:hover{color:var(--err)}
.stack-empty{padding:40px 20px;text-align:center;color:var(--ink-3)}
.stack-summary__foot{padding:16px 20px;border-top:1px solid var(--line)}
.stack-total-row{display:flex;justify-content:space-between;font-size:var(--step--1);padding:3px 0}
.stack-total-row.save{color:var(--ok)}
.stack-total-row.big{font-size:var(--step-1);font-weight:700;border-top:1px solid var(--line);margin-top:8px;padding-top:10px}
@media(max-width:900px){.stack-layout{grid-template-columns:1fr}.stack-summary{position:static}}
/* ---- Structure viewer ---- */
.sv-layout{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:start}
.sv-side{position:sticky;top:calc(var(--nav-h) + 16px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;max-height:calc(100vh - var(--nav-h) - 40px);overflow-y:auto}
.sv-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--line-2)}
.sv-item:hover{background:var(--surface-2)}
.sv-item.on{background:var(--accent-tint)}
.sv-item .vial-svg{height:30px}
.sv-item__name{font-weight:600;font-size:var(--step--1)}
.sv-item__sub{font-size:11px;color:var(--ink-3)}
.sv-detail{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);overflow:hidden}
.sv-stage{background:radial-gradient(circle at 50% 40%,#0d1430,#070a17);padding:40px;display:grid;place-items:center;min-height:320px}
.sv-dropdown{display:none;position:relative;margin-bottom:16px}
.sv-dd-trigger{width:100%;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);cursor:pointer}
.sv-dd-trigger .vial-svg{height:30px}
.sv-dd-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);max-height:340px;overflow-y:auto;display:none}
.sv-dd-panel.open{display:block}
@media(max-width:820px){.sv-layout{grid-template-columns:1fr}.sv-side{display:none}.sv-dropdown{display:block}}
/* ---- bespoke flagship data-viz ---- */
.dose-bars{display:flex;flex-direction:column;gap:14px}
.dose-row{display:grid;grid-template-columns:130px 1fr 56px;gap:12px;align-items:center}
.dose-row__lab{font-family:var(--font-mono);font-size:12px;color:var(--ink-2)}
.dose-track{height:26px;border-radius:var(--r-sm);background:var(--surface-sunk);overflow:hidden}
.dose-fill{height:100%;width:0;border-radius:var(--r-sm);background:var(--brand-grad);transition:width 1.1s var(--ease-std)}
.dose-row.in .dose-fill{width:var(--w)}
.dose-row__val{font-family:var(--font-mono);font-size:12px;font-weight:700;text-align:right}
.compare-table{width:100%;border-collapse:collapse}
.compare-table th,.compare-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:var(--step--1)}
.compare-table th{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;font-size:11px;color:var(--ink-3)}
.compare-table tr.me{background:var(--accent-tint)}
.compare-table tr.me td{font-weight:650}
.compare-table td .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.radar-wrap{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.radar svg{width:100%;max-width:360px;margin:0 auto;display:block}
.pk-wrap{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:20px}
.pk-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:12px;font-family:var(--font-mono)}
.pk-legend span{display:inline-flex;align-items:center;gap:6px}
.pk-legend i{width:14px;height:3px;border-radius:2px;display:inline-block}
.timeline{position:relative;padding-left:28px}
.timeline::before{content:"";position:absolute;left:8px;top:4px;bottom:4px;width:2px;background:var(--line-strong)}
.tl-item{position:relative;padding:0 0 22px 8px}
.tl-item::before{content:"";position:absolute;left:-24px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:3px solid var(--accent)}
.tl-year{font-family:var(--font-mono);font-weight:700;color:var(--accent);font-size:var(--step--1)}
.tl-item p{color:var(--ink-2);font-size:var(--step--1);margin-top:2px}
.lit-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.lit-chip{font-size:12px;font-family:var(--font-mono);padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);cursor:pointer}
.lit-chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.lit-item{border-left:2px solid var(--accent);padding:10px 0 10px 16px;margin-bottom:12px}
.lit-item__title{font-weight:600}
.lit-item__meta{font-size:12px;color:var(--ink-3);font-family:var(--font-mono);margin-top:2px}
.ref-list{counter-reset:ref;list-style:none;padding:0}
.ref-list li{counter-increment:ref;position:relative;padding-left:34px;margin-bottom:10px;font-size:var(--step--1);color:var(--ink-2)}
.ref-list li::before{content:counter(ref);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--surface-sunk);color:var(--ink-2);font-family:var(--font-mono);font-size:11px;display:grid;place-items:center}
.binding-bars{display:flex;flex-direction:column;gap:12px}
.bind-row{display:grid;grid-template-columns:110px 1fr 44px;gap:10px;align-items:center;font-size:12px;font-family:var(--font-mono)}
.bind-track{height:10px;border-radius:var(--r-pill);background:var(--surface-sunk);overflow:hidden}
.bind-fill{height:100%;width:0;background:var(--brand-grad-soft);transition:width 1s var(--ease-std)}
.bind-row.in .bind-fill{width:var(--w)}
/* ---- DNA verify band + proof tabs ---- */
.proof-band{background:var(--d-bg);color:#fff;position:relative;overflow:hidden}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.proof-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}
.proof-tab{font-family:var(--font-mono);font-size:12px;padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--d-line-2);background:transparent;color:var(--d-ink-2);cursor:pointer}
.proof-tab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.proof-pane{display:none}.proof-pane.on{display:block}
.proof-pane p{color:var(--d-ink-2)}
.proof-stat-row{display:flex;gap:28px;margin-top:20px;flex-wrap:wrap}
.proof-stat b{font-size:var(--step-3);font-family:var(--font-mono);color:#fff;display:block;line-height:1}
.proof-stat span{font-size:12px;color:var(--d-ink-3);font-family:var(--font-mono)}
.dna-stage{position:relative;height:360px;display:grid;place-items:center}
.dna-stage .vialfloat{position:relative;z-index:2;height:280px;animation:float 5s var(--ease-move) infinite}
.dna-stage .vialfloat .vial-svg{height:280px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5))}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}
.dna-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.55}
@media(prefers-reduced-motion:reduce){.dna-stage .vialfloat{animation:none}}
@media(max-width:820px){.proof-grid{grid-template-columns:1fr}.dna-stage{height:280px}}
/* ---- account ---- */
.acct-grid{display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:start}
.acct-nav{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;position:sticky;top:calc(var(--nav-h) + 16px)}
.acct-nav button{width:100%;text-align:left;padding:12px 16px;border-bottom:1px solid var(--line-2);cursor:pointer;font-weight:550;font-size:var(--step--1);color:var(--ink-2);background:none}
.acct-nav button:last-child{border-bottom:none}
.acct-nav button.on{background:var(--accent-tint);color:var(--accent-ink)}
.acct-pane{display:none}.acct-pane.on{display:block}
@media(max-width:760px){.acct-grid{grid-template-columns:1fr}.acct-nav{position:static;display:flex;overflow-x:auto}.acct-nav button{border-bottom:none;white-space:nowrap}}
/* =====================================================================
$100K POLISH LAYER - R1 craft refinements (type tracking, selection,
scrollbar, focus, motion easing, premium micro-details)
===================================================================== */
:root{ --ease-emphasized:cubic-bezier(.05,.7,.1,1); }
/* display tracking - tighten large type per R1 (−3% >40px) */
.hero__in h1, .mol-banner h1 { letter-spacing:-.02em; line-height:1.05; }
.sec-head h2, .flag-head h2 { letter-spacing:-.025em; }
h1 { letter-spacing:-.03em; }
/* selection + accent underline emphasis */
::selection { background:var(--accent-tint-2); color:var(--accent-press); }
.accent-line { position:relative; white-space:nowrap; }
/* refined thin scrollbar (desktop) */
@media (pointer:fine){
*{ scrollbar-width:thin; scrollbar-color:var(--n-300) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--n-300); border-radius:99px; border:3px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover{ background:var(--n-400); }
*::-webkit-scrollbar-track{ background:transparent; }
}
/* focus-visible: crisp accent ring that reads on any surface */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs); }
.band-dark :focus-visible { outline-color:var(--accent-dark); }
a:focus-visible, .btn:focus-visible, .icon-btn:focus-visible { outline-offset:3px; }
/* cards: held by a hairline at rest, one soft lift on hover */
.card-hover:hover, .pcard:hover, .area-tile:hover { box-shadow:0 0 0 1px var(--line-strong),var(--sh-2); }
/* premium hairline dividers */
.rule { height:1px; background:var(--line); border:0; margin:0; }
.rule-strong { height:1px; background:var(--line-strong); border:0; }
/* icon crispness - align to the R1 1.5-2px stroke, one set */
.btn svg, .pill svg, .icon-btn svg, .feature__icon svg, .area-tile__icon svg { stroke-width:1.75; }
/* section rhythm: kill compounding - same-rank sections share padding already via .section */
/* premium: subtle top-lit inner highlight on the primary CTA only (R1 near-threshold) */
.btn-glow { background-image:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 42%); }
/* global reduced-motion safety - keep opacity/color, drop transforms */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
.reveal{ opacity:1 !important; transform:none !important; }
}
/* =====================================================================
MOTION LAYER - scroll rail, tilt/magnetic supports (fx.js)
===================================================================== */
.scroll-rail {
position:fixed; top:0; left:0; right:0; height:2px; z-index:200;
background:var(--brand-grad); transform:scaleX(0); transform-origin:0 50%;
pointer-events:none; will-change:transform;
}
/* tilt group: gpu hint + flatten children so rotation reads cleanly */
.pcard, .area-tile, .feature { transform-style:preserve-3d; backface-visibility:hidden; }
/* press tactility on primary actions (transform/opacity only) */
.btn-glow:active { transform:scale(.98) !important; }
@media (prefers-reduced-motion:reduce){
.scroll-rail{ display:none; }
.btn-glow:active{ transform:none !important; }
}
/* =====================================================================
AMBIENT MOTION + HOME PROMO POLISH (verify band / stack promo / affiliate)
===================================================================== */
.motion-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.verify-band, .stack-promo, .aff-promo { position:relative; overflow:hidden; }
.verify-band .wrap-wide, .stack-promo__in, .aff-promo__in { position:relative; z-index:2; }
/* --- verification band --- */
.verify-cols { align-items:center; gap:clamp(28px,4.5vw,56px); }
.orbit-hero { position:relative; min-height:clamp(220px,32vw,360px); }
@media (max-width:800px){
.orbit-hero { min-height:190px; margin-top:6px; }
.verify-cols { gap:20px; }
}
/* --- stack promo (gradient card) --- */
.stack-promo { padding:0; background:var(--brand-grad); color:#fff; box-shadow:var(--sh-3); }
.stack-promo__in { display:grid; grid-template-columns:1.15fr 1fr; align-items:stretch; }
.stack-promo__copy { padding:clamp(26px,4vw,52px); }
.stack-promo__stats {
display:grid; place-content:center; gap:18px; text-align:center;
padding:clamp(26px,4vw,52px);
background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,0) 55%);
border-left:1px solid rgba(255,255,255,.14);
}
.stack-promo__nums { display:flex; justify-content:center; gap:clamp(24px,4vw,44px); flex-wrap:wrap; }
.stack-promo__num b { display:block; font-family:var(--font-mono); font-weight:800; font-size:var(--step-5); line-height:1; }
.stack-promo__num span { display:block; margin-top:6px; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.85; }
.stack-promo__note { font-family:var(--font-mono); font-size:12px; opacity:.85; }
@media (max-width:800px){
.stack-promo__in { grid-template-columns:1fr; }
.stack-promo__copy { padding:24px 20px 22px; }
.stack-promo__stats { border-left:none; border-top:1px solid rgba(255,255,255,.14); padding:20px; gap:12px; }
.stack-promo__num b { font-size:var(--step-4); }
}
/* --- affiliate promo (dark card) --- */
.aff-promo { padding:clamp(26px,4vw,48px); background:var(--d-bg); color:var(--d-ink); }
.aff-promo__in { align-items:center; gap:clamp(28px,4vw,48px); }
.kpi-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.kpi--dark { background:var(--d-surface); color:var(--d-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px var(--d-line); }
.kpi--dark .kpi__l { color:var(--d-ink-3); }
@media (max-width:800px){
.aff-promo { padding:24px 20px; }
.aff-promo__in { gap:22px; }
.kpi-grid--2 { gap:10px; }
.kpi--dark { padding:16px; }
}
/* star ratings - filled with the logo teal */
svg.on { fill:var(--brand-azure); stroke:var(--brand-azure); }
svg.off { fill:none; stroke:var(--n-300); }
.band-dark svg.on { fill:var(--brand-sky); stroke:var(--brand-sky); }
/* ---- add-to-cart on product cards ---- */
.pcard__actions { margin-top:10px; }
.pcard__add { width:100%; justify-content:center; gap:8px; }
.pcard__add svg { width:16px; height:16px; }
/* ---- variant quick-pick sheet ---- */
.qp { position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:24px; }
.qp.open { display:flex; }
.qp__backdrop { position:absolute; inset:0; background:rgba(10,21,38,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.qp__card { position:relative; width:min(420px,94vw); max-height:min(86vh,640px); overflow:auto; background:var(--surface);
border-radius:var(--r-xl); box-shadow:var(--sh-4), 0 0 0 1px rgba(122,153,222,.16), 0 24px 80px rgba(22,33,62,.38);
padding:20px 20px 14px; animation:qp-in .28s var(--ease-std); }
@keyframes qp-in { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }
.qp__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.qp__head h3 { font-family:var(--font-display); font-size:var(--step-2); letter-spacing:-.02em; }
.qp__eyebrow { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--brand-azure); margin-bottom:4px; }
.qp__opts { display:flex; flex-direction:column; gap:10px; }
.qp__opt { display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:14px; width:100%; text-align:left;
padding:10px 14px 10px 10px; border-radius:var(--r-lg); background:var(--surface-2);
border:1px solid var(--line); cursor:pointer;
transition:border-color var(--dur), box-shadow var(--dur), transform var(--dur), background var(--dur); }
.qp__opt:hover, .qp__opt:focus-visible { border-color:var(--brand-azure); background:var(--surface);
box-shadow:0 0 0 3px rgba(122,153,222,.16), var(--sh-2); transform:translateY(-1px); outline:none; }
.qp__opt:active { transform:scale(.985); }
.qp__thumb { display:flex; align-items:center; justify-content:center; width:56px; height:64px; border-radius:var(--r-md);
background:linear-gradient(160deg,var(--n-50),var(--n-100)); overflow:hidden; }
.qp__thumb .vial-svg, .qp__thumb .vial-img, .qp__thumb img { height:58px; width:auto; object-fit:contain; }
.qp__size b { display:block; font-size:var(--step-1); font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.qp__size small { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); }
.qp__price { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:var(--step-1); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--accent-ink); }
.qp__price svg { width:16px; height:16px; color:var(--brand-azure); opacity:0; transform:translateX(-4px); transition:opacity var(--dur), transform var(--dur); }
.qp__opt:hover .qp__price svg, .qp__opt:focus-visible .qp__price svg { opacity:1; transform:none; }
.qp__foot { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); text-align:center; }
@media (max-width:560px){
.qp { padding:0; align-items:flex-end; }
.qp__card { width:100%; max-height:80vh; border-radius:var(--r-xl) var(--r-xl) 0 0; padding:18px 16px 12px;
animation:qp-up .3s var(--ease-std); }
@keyframes qp-up { from { transform:translateY(40px); opacity:.6; } to { transform:none; opacity:1; } }
}
@media (prefers-reduced-motion:reduce){ .qp__card { animation:none; } }
/* ---- research-library two-column: copy beside the alpha-helix canvas -------
Mirrors .verify-cols, but on paper rather than the dark band. The visual
column needs an explicit min-height because its child is an absolutely
positioned canvas with no intrinsic size. */
.lib-cols { align-items:center; gap:clamp(28px,4.5vw,60px); }
.lib-visual { position:relative; min-height:clamp(320px,40vw,480px); }
.lib-visual canvas { position:absolute; inset:0; }
/* the same soft specimen light the hero uses, so the helix sits in a pool of
brand colour instead of floating on flat paper */
.lib-visual::before {
content:""; position:absolute; inset:0; margin:auto;
width:min(380px,90%); aspect-ratio:1; border-radius:50%;
background:radial-gradient(circle,rgba(199,173,240,.30),rgba(122,153,222,.13) 46%,transparent 68%);
filter:blur(6px);
}
@media (max-width:800px){
.lib-visual { min-height:230px; margin-top:8px; }
.lib-cols { gap:22px; }
}
/* ---- grids that must never leave an orphan row ---------------------------
.feature-grid uses auto-fit, which is right for a 3-card set but produces a
3-column track at ~1000-1270px. Four cards then break 3 + 1, stranding one
card beside two empty cells. These modifiers pin the column count to a
divisor of the item count at every width, so the last row is always full. */
.feature-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1180px){ .feature-grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .feature-grid--4 { grid-template-columns:1fr; } }
.feature-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .feature-grid--3 { grid-template-columns:1fr; } }
/* ---- BOGO strip ----------------------------------------------------------
Pre-existing defect found during the 2026-07-27 re-skin: index.html ships
the full .bogo-strip markup but NO stylesheet ever defined it, so the badge
icon fell back to 100% width and rendered ~900px tall on the homepage.
Verified against exactamino-snapshots/2026-07-27-spectrum-v1 - the snapshot
has the same markup and the same zero rules, so this predates the re-skin.
Styled in the board palette: a lavender-white plate held by a hairline,
a periwinkle badge tile, and the signature gradient as a top rule. Navy
carries every piece of text on it - the pastels are surface only. */
.bogo-strip-wrap { padding-block:8px 4px; }
.bogo-strip {
position:relative; overflow:hidden; isolation:isolate;
display:flex; align-items:center; gap:18px; flex-wrap:wrap;
padding:16px 22px; border-radius:var(--r-lg);
background:linear-gradient(180deg,var(--n-0),var(--accent-tint));
box-shadow:var(--sh-border); color:var(--ink);
transition:box-shadow var(--dur) var(--ease-std), transform var(--dur) var(--ease-std);
}
/* the signature gradient as a 2px top rule - the one place the full
periwinkle-to-lavender sweep appears outside the hero */
.bogo-strip::before {
content:""; position:absolute; inset:0 0 auto 0; height:2px;
background:var(--brand-grad);
}
.bogo-strip:hover { transform:translateY(-1px); box-shadow:var(--sh-border), var(--sh-2); }
.bogo-strip:hover .bogo-strip__cta { gap:10px; }
/* a slow diagonal sheen, held well under the text so nothing loses contrast */
.bogo-strip__sheen {
position:absolute; inset:0; z-index:-1; pointer-events:none;
background:linear-gradient(104deg,transparent 30%,rgba(199,173,240,.30) 50%,transparent 70%);
background-size:220% 100%; background-position:120% 0;
transition:background-position 900ms var(--ease-move);
}
.bogo-strip:hover .bogo-strip__sheen { background-position:-40% 0; }
@media (prefers-reduced-motion:reduce){
.bogo-strip__sheen { transition:none; }
.bogo-strip:hover { transform:none; }
}
/* the badge: periwinkle tile, navy glyph. Measured 5.63:1 - the pastel can
hold the navy icon, which is the whole contrast rule of this system. */
.bogo-strip__badge {
flex:0 0 auto; display:grid; place-items:center;
width:42px; height:42px; border-radius:var(--r-md);
background:var(--pastel-periwinkle); color:var(--brand-ink);
}
.bogo-strip__badge svg { width:22px; height:22px; }
.bogo-strip__text { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 260px; }
.bogo-strip__text strong { font-family:var(--font-display); font-size:var(--step-1); font-weight:650; letter-spacing:-.015em; }
.bogo-strip__text strong em { font-style:normal; color:var(--accent-ink); }
.bogo-strip__text > span { color:var(--ink-3); font-size:var(--step--1); }
.bogo-strip__pills { display:flex; gap:8px; flex-wrap:wrap; }
.bogo-strip__pill {
font-family:var(--font-mono); font-size:var(--step--2); letter-spacing:.04em;
text-transform:uppercase; color:var(--ink-2);
padding:5px 11px; border-radius:var(--r-pill);
background:var(--n-0); box-shadow:var(--sh-border);
}
.bogo-strip__cta {
flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
font-weight:600; color:var(--accent-ink);
transition:gap var(--dur) var(--ease-std);
}
.bogo-strip__cta svg { width:16px; height:16px; }
@media (max-width:900px){
.bogo-strip { gap:14px; padding:14px 16px; }
.bogo-strip__pills { order:3; width:100%; }
.bogo-strip__cta { order:4; }
}
/* ---- brand pillars ("The Exact Standard") --------------------------------
The one place all five board pastels appear together. Each pillar sets
--pillar and everything tinted in the card derives from it, so adding a
sixth pillar is one inline custom property and nothing else.
Contrast: --pillar is used ONLY as an icon fill, a top rule and a 14% tint.
Every word in here is navy or navy-derived. Measured worst case, navy on the
lightest pillar tint is 12.9:1. */
.pillars {
display:grid; gap:16px;
grid-template-columns:repeat(5,minmax(0,1fr));
}
/* 5 does not divide evenly at intermediate widths, so step 5 -> 3 -> 2 -> 1
rather than letting auto-fit strand an orphan (see feature-grid--4 above) */
@media (max-width:1180px){ .pillars { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px){ .pillars { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .pillars { grid-template-columns:1fr; } }
.pillar {
position:relative; overflow:hidden;
padding:22px 20px 24px; border-radius:var(--r-lg);
background:var(--surface); box-shadow:var(--sh-border);
transition:box-shadow var(--dur) var(--ease-std), transform var(--dur) var(--ease-std);
}
/* the colour rule along the top edge - the same device as the vial label band */
.pillar::before {
content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--pillar);
}
.pillar:hover { transform:translateY(-2px); box-shadow:var(--sh-border), var(--sh-2); }
@media (prefers-reduced-motion:reduce){ .pillar:hover { transform:none; } }
.pillar__icon {
display:grid; place-items:center; width:40px; height:40px;
border-radius:var(--r-md); margin-bottom:14px;
background:var(--pillar); color:var(--brand-ink);
}
.pillar__icon svg { width:20px; height:20px; }
.pillar h3 {
font-family:var(--font-display); font-size:var(--step-1); font-weight:650;
letter-spacing:-.02em; margin-bottom:7px;
}
.pillar p { color:var(--ink-2); font-size:var(--step--1); line-height:1.62; }
/* ---- stack builder empty state ------------------------------------------
Replaced a static grey `layers` glyph. That version stated "No compounds
yet" - true, but it gave a visitor no reason to add anything. This shows the
three breaks a stack unlocks, in the order they are reached, with three
vial silhouettes settling in as if being stacked.
Figures come from the cart constants via CP, so the promise here and the
maths in cartTotals() cannot drift apart. */
.stack-empty { text-align:center; padding:26px 18px 22px; }
.stack-empty__vials {
display:flex; align-items:flex-end; justify-content:center; gap:9px; height:62px; margin-bottom:16px;
}
.stack-empty__vials .sev {
width:20px; border-radius:5px 5px 3px 3px;
background:linear-gradient(180deg,var(--pastel-periwinkle),var(--pastel-lavender));
box-shadow:0 2px 8px rgba(16,42,92,.14);
transform-origin:bottom center;
animation:sev-rise 620ms cubic-bezier(.22,1,.36,1) backwards;
}
.sev--1 { height:34px; animation-delay:60ms; }
.sev--2 { height:52px; animation-delay:180ms;
background:linear-gradient(180deg,var(--pastel-mint),var(--pastel-periwinkle)); }
.sev--3 { height:42px; animation-delay:300ms;
background:linear-gradient(180deg,var(--pastel-tan),var(--pastel-coral)); }
@keyframes sev-rise { from { transform:scaleY(.2); opacity:0; } to { transform:scaleY(1); opacity:1; } }
.stack-empty__lead { font-size:var(--step--1); color:var(--ink-2); line-height:1.55; margin-bottom:18px; }
.stack-ladder { list-style:none; margin:0; padding:0; display:grid; gap:8px; text-align:left; }
.stack-ladder li {
display:flex; flex-direction:column; gap:1px;
padding:10px 12px; border-radius:10px;
background:var(--accent-tint); border:1px solid var(--line);
opacity:0; animation:sev-in 480ms var(--ease-std) forwards;
animation-delay:calc(380ms + var(--i) * 110ms);
}
@keyframes sev-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.stack-ladder b { font-family:var(--font-display); font-size:var(--step-0); color:var(--ink); letter-spacing:-.01em; }
.stack-ladder span { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.02em; }
@media (prefers-reduced-motion:reduce){
.stack-empty__vials .sev, .stack-ladder li { animation:none; opacity:1; transform:none; }
}
/* ---- custom select (shop filters) ---------------------------------------
Replaces the native