/* Product detail page — shared styles */
.pdp-top { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:start; padding-block:clamp(32px,4vw,56px); }
.pdp-gallery { position:sticky; top:calc(var(--nav-h) + 24px); }
.pdp-stage { aspect-ratio:1; border-radius:var(--r-xl); overflow:hidden; background:radial-gradient(130% 100% at 50% 15%,var(--n-0),var(--n-100)); border:1px solid var(--line); display:grid; place-items:center; padding:0; }
.cross-item .vial-img { border-radius:5px; }
.pdp-stage .vial-svg { max-height:340px; width:auto; filter:drop-shadow(0 24px 34px rgba(16,24,40,.18)); }
.pdp-thumbs { display:flex; gap:12px; margin-top:16px; }
.pdp-thumb { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; padding:0; background:none; border:none; cursor:pointer; }
.pt-vis { width:62px; height:62px; border-radius:var(--r-md); background:var(--n-50); border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.pdp-thumb:hover .pt-vis { border-color:var(--ink-3); }
.pdp-thumb.active .pt-vis { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.pt-vis .vial-img { width:100%; height:100%; object-fit:cover; }
.pt-zoom .vial-img { transform:scale(1.9); transform-origin:50% 60%; }
.pt-ic { color:var(--ink-3); }
.pdp-thumb.active .pt-ic { color:var(--accent-ink); }
.pt-ic svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.6; }
.pt-cap { font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); }
.pdp-thumb.active .pt-cap { color:var(--accent-ink); }

/* stage views */
.pdp-stage[data-view="label"] .vial-img { transform:scale(1.85); transform-origin:50% 60%; }
.pdp-stage[data-view="coa"], .pdp-stage[data-view="data"] { place-items:stretch; }
.pdp-panel { display:flex; flex-direction:column; padding:clamp(24px,5%,38px); gap:8px; text-align:left; height:100%; }
.pv-ic { color:var(--accent); }
.pv-ic svg { width:30px; height:30px; stroke:currentColor; fill:none; stroke-width:1.5; }
.pv-h { font-size:20px; font-weight:650; margin-top:4px; letter-spacing:-.01em; }
.pv-sub { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); letter-spacing:.02em; }
.pv-list { margin-top:12px; display:flex; flex-direction:column; }
.pv-row { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid var(--line); font-size:14px; }
.pv-row:last-child { border-bottom:1px solid var(--line); }
.pv-row span { color:var(--ink-2); }
.pv-row b { color:var(--ink); font-weight:600; text-align:right; }
.pv-seq { margin-top:12px; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); word-break:break-word; line-height:1.6; }
.pdp-panel .btn { margin-top:auto; align-self:flex-start; }
.pdp-title { font-size:var(--step-5); letter-spacing:-.035em; line-height:1.02; }
.pdp-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.pdp-price-row { display:flex; align-items:baseline; gap:12px; margin-top:24px; }
.pdp-price { font-size:var(--step-4); font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.pdp-bogo { font-family:var(--font-mono); font-size:13px; color:var(--ok); }
.variant-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(102px,1fr)); gap:8px; margin-top:8px; }
.variant { position:relative; padding:8px 11px; border-radius:var(--r-md); border:1px solid var(--line-strong); background:var(--surface); cursor:pointer; transition:border-color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast); display:flex; flex-direction:column; gap:1px; text-align:left; }
.variant .v-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.variant .v-size { font-weight:700; font-size:var(--step-0); letter-spacing:-.01em; }
.variant .v-price { font-weight:700; font-size:var(--step-0); font-variant-numeric:tabular-nums; }
.variant .v-bot { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:14px; }
.variant .v-per { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); }
.variant .v-save { font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--ok); background:var(--ok-tint); padding:0 5px; border-radius:var(--r-pill); }
.variant .v-best { position:absolute; top:-8px; right:8px; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; color:#fff; background:var(--accent); padding:1px 6px; border-radius:var(--r-pill); }
.variant[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-tint); box-shadow:0 0 0 1px var(--accent); }
.variant:focus-visible { outline:none; box-shadow:0 0 0 2px var(--accent); }

/* --- independently-tested panel --- */
.test-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; margin-top:32px; }
.test-card { display:flex; align-items:flex-start; gap:14px; padding:18px 20px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); }
.test-card .test-icon { width:34px; height:34px; border-radius:var(--r-md); background:var(--ok-tint); color:#0f8049; display:grid; place-items:center; flex:none; }
.test-card .test-icon svg { width:18px; height:18px; }
.test-body { flex:1; min-width:0; }
.test-name { font-weight:600; font-size:var(--step-0); }
.test-desc { font-size:var(--step--1); color:var(--ink-2); margin-top:3px; }
.test-result { font-family:var(--font-mono); font-size:12px; font-weight:600; color:#0f8049; background:var(--ok-tint); padding:3px 9px; border-radius:var(--r-pill); flex:none; white-space:nowrap; }
.bogo-note { display:flex; gap:9px; align-items:center; padding:9px 12px; background:var(--accent-tint); border-radius:var(--r-md); margin-top:14px; font-size:var(--step--1); color:var(--ink-2); line-height:1.3; }
.bogo-note svg { width:17px; height:17px; color:var(--accent); flex:none; }
.bogo-note strong { color:var(--ink); }
.pdp-buy-actions { display:flex; gap:12px; margin-top:16px; align-items:stretch; }
.trust-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px; padding-top:24px; border-top:1px solid var(--line); }
.trust-item { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.trust-item svg { width:22px; height:22px; color:var(--ink-2); }
.trust-item span { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.pass-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.pass { display:flex; gap:10px; align-items:center; padding:12px 14px; background:var(--ok-tint); border-radius:var(--r-md); }
.pass svg { width:18px; height:18px; color:#0f8049; flex:none; }
.pass > div { line-height:1.25; }
.pass .lbl { font-family:var(--font-mono); font-size:11px; color:#0f8049; font-weight:500; line-height:1.2; }
.pass strong { display:block; font-size:11px; color:#0a5c35; font-weight:700; letter-spacing:.04em; line-height:1.2; margin-bottom:1px; }
.cross { margin-top:28px; }
.cross-item { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--r-md); margin-top:8px; transition:border-color var(--dur-fast); }
@media (hover:hover){ .cross-item:hover{ border-color:var(--line-strong); } }
.cross-item .vial-svg { height:44px; width:auto; }
.cross-item .ci-name { font-weight:600; font-size:var(--step--1); }
.cross-item .ci-sub { font-size:12px; color:var(--ink-3); }
.cross-item .ci-price { margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; margin-right:8px; }
.spec-table { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.spec-cell { padding:16px 20px; border-bottom:1px solid var(--line-2); }
.spec-cell:nth-child(odd) { border-right:1px solid var(--line-2); }
.spec-cell .k { font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.spec-cell .v { font-family:var(--font-mono); font-size:var(--step-0); margin-top:6px; }
.verifycard-list { display:flex; flex-direction:column; gap:18px; margin-top:8px; }
.vc-item { display:flex; gap:14px; }
.vc-item svg { width:20px; height:20px; color:var(--accent); flex:none; margin-top:2px; }
.vc-item .t { font-weight:600; font-size:var(--step-0); }
.vc-item .d { font-size:var(--step--1); color:var(--ink-2); margin-top:2px; }
.pathway-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.pathway { padding:20px; }
.pathway .ptag { margin-bottom:12px; }
.pathway h4 { font-size:var(--step-0); margin-bottom:6px; }
.pathway p { font-size:var(--step--1); color:var(--ink-2); }
.about-grid { display:grid; grid-template-columns:1.2fr 0.8fr; gap:clamp(32px,5vw,64px); align-items:start; }
.about-facts { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:26px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--line); }
.about-facts .af-item { background:var(--n-0); padding:13px 16px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.about-facts .af-k { font-family:var(--font-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.about-facts .af-v { font-size:var(--step--1); font-weight:600; color:var(--ink); line-height:1.25; overflow-wrap:anywhere; }
.about-facts .af-item:last-child:nth-child(odd) { grid-column:1 / -1; }
@media (max-width:420px){ .about-facts { grid-template-columns:1fr; } }
.sticky-buy { position:fixed; bottom:0; left:0; right:0; z-index:80; background:var(--surface); border-top:1px solid var(--line); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); display:none; align-items:center; gap:10px; box-shadow:0 -4px 16px rgba(16,24,40,.08); }
.sticky-buy .sb-info { min-width:0; flex:1 1 auto; line-height:1.25; }
.sticky-buy .sb-name { font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-buy .sb-price { font-family:var(--font-mono); color:var(--ink-2); font-size:12px; white-space:nowrap; }
.sticky-buy .sb-ctl { display:flex; align-items:center; gap:8px; flex:none; }
/* custom size dropdown — per-size vial photos, opens upward */
.sticky-buy .sb-dd { position:relative; flex:none; }
.sb-dd-trigger { display:flex; align-items:center; gap:7px; height:42px; padding:0 9px 0 7px; border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); cursor:pointer; transition:border-color var(--dur-fast), box-shadow var(--dur-fast); }
.sb-dd-trigger:focus-visible { outline:none; box-shadow:0 0 0 3px var(--accent-tint); border-color:var(--accent); }
.sb-dd[data-open] .sb-dd-trigger { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
.sb-dd-thumb { width:22px; height:30px; flex:none; display:grid; place-items:center; }
.sb-dd-thumb .vial-img, .sb-dd-thumb .vial-svg { height:100%; width:auto; max-width:100%; object-fit:contain; }
.sb-dd-size { font-weight:700; font-size:13px; white-space:nowrap; letter-spacing:-.01em; }
.sb-dd-chev { width:15px; height:15px; color:var(--ink-3); flex:none; transition:transform var(--dur); }
.sb-dd[data-open] .sb-dd-chev { transform:rotate(180deg); }
.sb-dd-panel { display:none; position:absolute; bottom:calc(100% + 10px); left:0; min-width:200px; max-height:min(54vh, calc(100vh - 170px)); overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-4); padding:6px; z-index:90; }
.sb-dd[data-open] .sb-dd-panel { display:block; animation:sbDDpop .16s var(--ease-std); }
@keyframes sbDDpop { from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.sb-dd-opt { display:flex; align-items:center; gap:11px; width:100%; padding:8px 11px; border:none; background:none; border-radius:var(--r-md); cursor:pointer; text-align:left; transition:background var(--dur-fast); }
@media (hover:hover){ .sb-dd-opt:hover { background:var(--n-100); } }
.sb-dd-opt[aria-selected="true"] { background:var(--accent-tint); }
.sb-dd-opt .sb-dd-thumb { width:36px; height:46px; }
.sb-dd-opt-txt { display:flex; flex-direction:column; gap:1px; min-width:0; }
.sb-dd-opt-size { font-weight:700; font-size:14px; letter-spacing:-.01em; }
.sb-dd-opt-price { font-family:var(--font-mono); font-size:12px; color:var(--ink-2); }
.sticky-buy .sb-qty { display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--r-md); overflow:hidden; flex:none; }
.sticky-buy .sb-qty button { width:30px; height:42px; background:var(--surface); border:none; cursor:pointer; color:var(--ink-2); font-size:16px; display:grid; place-items:center; }
@media (hover:hover){ .sticky-buy .sb-qty button:hover { background:var(--n-100); color:var(--ink); } }
.sticky-buy .sb-qty input { width:30px; height:42px; text-align:center; border:none; border-inline:1px solid var(--line-2); background:var(--surface); font-variant-numeric:tabular-nums; font-weight:600; outline:none; font-size:14px; }
.sticky-buy #pdpAddSticky { white-space:nowrap; flex:none; padding-inline:16px; }
@media (max-width:400px){ .sticky-buy .sb-info { display:none; } .sticky-buy .sb-ctl { flex:1 1 auto; justify-content:space-between; } .sticky-buy #pdpAddSticky { flex:1 1 auto; } }
@media (max-width:900px){
  .pdp-top{ grid-template-columns:1fr; }
  .pdp-gallery{ position:static; }
  .pdp-stage .vial-svg{ max-height:260px; }
  .pathway-grid{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .sticky-buy.is-visible{ display:flex; }
  main{ padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
}
/* 320px-class devices: the bar's fixed-width controls (dropdown + qty + Add)
   overflow and clip the Add button — compact everything one step */
@media (max-width:360px){
  .sticky-buy{ gap:7px; padding-left:10px; padding-right:10px; }
  .sb-dd-trigger{ padding:0 6px 0 5px; gap:5px; }
  .sb-dd-chev{ display:none; }
  .sticky-buy .sb-qty button{ width:26px; }
  .sticky-buy #pdpAddSticky{ padding-inline:12px; }
}
@media (max-width:520px){ .spec-table{ grid-template-columns:1fr; } .spec-cell:nth-child(odd){ border-right:none; } .trust-row{ grid-template-columns:repeat(3,1fr); gap:6px; } .trust-item{ gap:6px; } .trust-item span{ font-size:9px; letter-spacing:.03em; } .pass-row{ grid-template-columns:1fr; } }

/* --- traceability strip --- */
.auth-strip { display:flex; align-items:center; gap:18px; padding:20px 24px; }
.auth-strip .auth-icon { width:44px; height:44px; border-radius:var(--r-md); background:var(--accent-tint); color:var(--accent); display:grid; place-items:center; flex:none; }
.auth-strip .auth-icon svg { width:22px; height:22px; }
.auth-strip .auth-text { font-size:var(--step--1); color:var(--ink-2); }
.auth-strip .auth-text strong { color:var(--ink); }
.auth-strip .btn { flex:none; }
@media (max-width:640px){ .auth-strip{ flex-direction:column; align-items:flex-start; gap:14px; } .auth-strip .btn{ width:100%; } }

/* --- stats row --- */
.pdp-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.pdp-stat { border-left:2px solid var(--accent); padding-left:16px; }
.pdp-stat .num { font-family:var(--font-mono); font-size:var(--step-3); font-weight:500; letter-spacing:-.02em; line-height:1; }
.pdp-stat .lbl { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-top:8px; }
@media (max-width:640px){ .pdp-stats{ grid-template-columns:1fr 1fr; gap:20px; } }

/* --- how it works: diagram + cards --- */
.howworks-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,56px); align-items:center; margin-top:32px; }
.howworks-cards { display:flex; flex-direction:column; gap:12px; }
.howworks-diagram { display:grid; place-items:center; }
.researched-for { margin-top:40px; padding-top:24px; border-top:1px solid var(--line); }
.rf-chips { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; }
.rf-chip { display:inline-flex; align-items:center; padding:7px 14px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:var(--surface); font-size:var(--step--1); font-weight:500; transition:border-color var(--dur-fast),background var(--dur-fast); }
@media (hover:hover){ .rf-chip:hover{ border-color:var(--accent); background:var(--accent-tint); color:var(--accent-ink); } }
.rf-note { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
@media (max-width:900px){ .howworks-grid{ grid-template-columns:1fr; } }

/* --- animated signalling diagram (v2) --- */
.pathway-diagram { position:relative; width:100%; max-width:460px; aspect-ratio:1; margin-inline:auto; }
.pw-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.pw-orbit { fill:none; stroke:var(--line-strong); stroke-width:1; stroke-dasharray:2 10; transform-box:fill-box; transform-origin:center; animation:pw-spin 55s linear infinite; opacity:.65; }
.pw-halo { fill:none; stroke:var(--accent); stroke-width:1.5; transform-box:fill-box; transform-origin:center; animation:pw-halo 3.2s ease-out infinite; }
.pw-curve { fill:none; stroke:var(--accent); stroke-opacity:.20; stroke-width:1.5; transition:stroke-opacity var(--dur); }
.pw-curve.hot { stroke-opacity:.6; }
.pw-dot { fill:var(--accent); filter:drop-shadow(0 0 5px var(--accent-glow)); }
.pw-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:25%; aspect-ratio:1; border-radius:50%; background:var(--surface); border:1.5px solid var(--accent); display:grid; place-items:center; text-align:center; box-shadow:0 6px 20px var(--accent-glow); z-index:2; }
.pw-center span { font-weight:700; font-size:clamp(11px,2.4vw,15px); letter-spacing:-.02em; line-height:1.05; padding:6px; }
.pw-node { position:absolute; transform:translate(-50%,-50%); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:6px 12px; box-shadow:var(--sh-1); z-index:3; cursor:default; transition:border-color var(--dur),background var(--dur),box-shadow var(--dur),transform var(--dur); }
.pw-node span { font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; white-space:nowrap; color:var(--ink-2); transition:color var(--dur); }
.pw-node.active { border-color:var(--accent); background:var(--accent-tint); box-shadow:0 0 0 3px var(--accent-glow); transform:translate(-50%,-50%) scale(1.06); }
.pw-node.active span { color:var(--accent-ink); }
.pw-caption { position:absolute; left:0; right:0; bottom:-8px; text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
@keyframes pw-spin { to { transform:rotate(360deg); } }
@keyframes pw-halo { 0%{ transform:scale(.82); opacity:.5 } 100%{ transform:scale(1.5); opacity:0 } }
@media (prefers-reduced-motion: reduce){ .pw-orbit{ animation:none; } .pw-curve{ stroke-opacity:.4; } }
@media (max-width:400px){ .pw-node span{ font-size:10px; } .pw-node{ padding:5px 9px; } }

/* --- mechanism cards (with citations) --- */
.mech-card { padding:20px; transition:border-color var(--dur),box-shadow var(--dur); }
.mech-card.linked { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.mech-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.mech-cite { font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); white-space:nowrap; }
.mech-card h4 { font-size:var(--step-0); margin-bottom:6px; }
.mech-card p { font-size:var(--step--1); color:var(--ink-2); }

/* --- molecular panel --- */
.mol-panel { margin-top:28px; overflow:hidden; }
.mol-formula { padding:22px 24px; background:linear-gradient(135deg,var(--accent-tint),var(--surface)); border-bottom:1px solid var(--line-2); }
.mol-formula .mf { font-family:var(--font-mono); font-size:var(--step-3); font-weight:500; letter-spacing:.01em; margin-top:8px; color:var(--ink); }
.mol-formula .mf sub { font-size:.62em; }
.mol-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.mol-cell { padding:16px 20px; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.mol-cell:nth-child(3n){ border-right:none; }
.mol-cell:nth-last-child(-n+3){ border-bottom:none; }
.mol-cell .k { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.mol-cell .v { font-family:var(--font-mono); font-size:var(--step--1); margin-top:5px; word-break:break-word; }
@media (max-width:560px){ .mol-grid{ grid-template-columns:1fr 1fr; } .mol-cell:nth-child(3n){ border-right:1px solid var(--line-2); } .mol-cell:nth-child(2n){ border-right:none; } .mol-cell:nth-last-child(-n+3){ border-bottom:1px solid var(--line-2); } .mol-cell:nth-last-child(-n+2){ border-bottom:none; } }

/* --- study-reported magnitudes --- */
.magnitudes { margin-top:28px; display:grid; gap:20px; max-width:680px; }
.mag-top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px; }
.mag-metric { font-size:var(--step--1); color:var(--ink-2); }
.mag-val { font-family:var(--font-mono); font-weight:600; color:var(--accent); }
.mag-track { height:9px; background:var(--n-150); border-radius:var(--r-pill); overflow:hidden; }
.mag-fill { height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-dark)); border-radius:var(--r-pill); transition:width 1.1s cubic-bezier(0.2,0,0,1); }
@media (prefers-reduced-motion: reduce){ .mag-fill{ transition:none; } }

/* --- what X is researched for (application cards) --- */
.apps-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-top:32px; }
.app-card { padding:22px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur); }
@media (hover:hover){ .app-card:hover{ border-color:var(--line-strong); box-shadow:var(--sh-2); transform:translateY(-2px); } }
.app-card h3 { font-size:var(--step-1); margin:12px 0 8px; letter-spacing:-.01em; }
.app-card p { font-size:var(--step--1); color:var(--ink-2); }
.app-card .app-cite { display:inline-block; margin-top:12px; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
.mag-head { display:flex; align-items:baseline; gap:12px; margin-top:44px; flex-wrap:wrap; }
.mag-head .mag-sub { font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }

/* --- the molecule (animated 3D atom cluster) --- */
.molecule-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(32px,5vw,56px); align-items:center; margin-top:32px; }
.molecule-visual { display:flex; flex-direction:column; align-items:center; gap:18px; }
.molecule-scene { width:100%; max-width:300px; aspect-ratio:1; perspective:640px; display:grid; place-items:center; }
.molecule-spin { position:relative; width:1px; height:1px; transform-style:preserve-3d; animation:mol-rot 20s linear infinite; }
.atom { position:absolute; left:0; top:0; border-radius:50%; transform:translate3d(var(--x),var(--y),var(--z)); box-shadow:0 2px 7px rgba(0,0,0,.28); margin-left:calc(var(--_s,0px)); }
@keyframes mol-rot { from{ transform:rotateY(0deg) rotateX(14deg); } to{ transform:rotateY(360deg) rotateX(14deg); } }
.molecule-legend { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.molecule-legend span { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
.molecule-legend i { width:9px; height:9px; border-radius:50%; display:inline-block; }
@media (prefers-reduced-motion: reduce){ .molecule-spin{ animation:none; transform:rotateY(28deg) rotateX(14deg); } }
@media (max-width:800px){ .molecule-grid{ grid-template-columns:1fr; } }

/* --- full specification --- */
.fullspec { margin-top:28px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.fs-row { display:grid; grid-template-columns:220px 1fr; gap:16px; padding:15px 22px; border-bottom:1px solid var(--line-2); }
.fs-row:last-child { border-bottom:none; }
.fs-row:nth-child(even){ background:var(--surface-2); }
.fs-row dt { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); align-self:center; }
.fs-row dd { font-family:var(--font-mono); font-size:var(--step--1); color:var(--ink); word-break:break-word; }
.fs-row dd sub { font-size:.7em; }
@media (max-width:560px){ .fs-row{ grid-template-columns:1fr; gap:4px; } }

/* --- peer-reviewed literature --- */
.lit-cites { margin-top:24px; }
.lit-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.lit-chip { display:inline-flex; align-items:center; padding:6px 12px; border-radius:var(--r-sm); background:var(--surface-sunk); border:1px solid var(--line-2); font-family:var(--font-mono); font-size:12px; color:var(--ink-2); }


/* ============================================================
   ASPECT ELEVATED — flagship module design system
   Numbered spec-sheet kickers · hairline instrument cards ·
   soft layered depth · azure-forward data-viz · mono data.
   ============================================================ */
.el-sec { padding-block: clamp(56px,7vw,100px); }
.el-surface { background: var(--surface); border-block: 1px solid var(--line-2); }

/* section header */
.el-head { max-width: 62ch; }
.el-head.center { max-width: none; text-align: center; }
.el-head.center .el-sub { margin-inline: auto; }
.el-kick { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.el-kick-i { display:inline-grid; place-items:center; min-width:24px; height:20px; padding:0 6px; border:1px solid var(--accent); color:var(--accent); border-radius:6px; font-size:10px; font-weight:700; letter-spacing:.02em; }
.el-h { font-size: clamp(28px,3.6vw,46px); font-weight:800; letter-spacing:-.035em; line-height:1.04; color:var(--ink); margin-top:16px; }
.el-h .accent, .el-display .accent { color: var(--accent); }
.el-sub { margin-top:16px; font-size: clamp(15px,1.2vw,17px); color:var(--ink-2); line-height:1.55; max-width:64ch; }
.el-foot { margin-top:16px; font-size:12px; color:var(--ink-3); line-height:1.55; max-width:94ch; }

/* signature card */
.el-card { background: var(--n-0); border:1px solid var(--line); border-radius: var(--r-xl); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 22px 48px -30px rgba(16,24,40,.34); padding: clamp(20px,2.4vw,30px); }
.el-card.rail { border-left: 3px solid var(--accent); }
.el-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }
.el-mini { display:inline-flex; align-items:center; --c:var(--accent); font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:3px 8px; border-radius:5px; background:color-mix(in srgb, var(--c) 13%, transparent); color:var(--c); }
.el-mini.soft { background:var(--n-100); color:var(--ink-3); }
.el-tag { font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; padding:6px 12px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--n-0); color:var(--ink-2); }
.el-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.el-note { font-family:var(--font-mono); font-size:11px; line-height:1.6; letter-spacing:.02em; color:var(--ink-3); max-width:64ch; }

.el-split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4.5vw,64px); align-items:start; }

/* hero */
.el-hero { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,72px); align-items:center; }
.el-display { font-size:clamp(34px,5vw,58px); font-weight:800; letter-spacing:-.04em; line-height:1.02; color:var(--ink); }
.el-lede { font-size:clamp(16px,1.4vw,19px); color:var(--ink-2); line-height:1.55; max-width:54ch; }
.el-nodes { width:100%; max-width:440px; height:auto; display:block; margin:0 auto; }
.el-hstats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.el-hstat { border:1px solid var(--line); border-radius:var(--r-md); padding:14px 15px; background:var(--n-0); position:relative; }
.el-hstat::before { content:""; position:absolute; top:12px; right:13px; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.55; }
.el-hstat .v { font-size:var(--step-2); font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--ink); }
.el-hstat .s { font-size:12px; color:var(--ink-2); margin-top:5px; line-height:1.35; }
.el-hstat .c { font-size:10.5px; color:var(--ink-3); font-family:var(--font-mono); margin-top:8px; }

/* stat blocks (observations) */
.el-stats-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px; }
.el-stat { position:relative; border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; background:var(--n-0); box-shadow:0 1px 2px rgba(16,24,40,.03); }
.el-stat .v { font-size:clamp(28px,3.2vw,38px); font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums; color:var(--ink); line-height:1; }
.el-stat .v .u { font-size:.42em; font-weight:700; margin-left:3px; color:var(--accent); letter-spacing:0; }
.el-stat .b { font-size:13px; color:var(--ink-2); margin-top:12px; line-height:1.45; }
.el-stat .c { font-size:10.5px; color:var(--ink-3); font-family:var(--font-mono); margin-top:14px; }

/* dose-response / chart card */
.el-chart .el-chart-head h3 { font-size:var(--step-1); font-weight:700; }
.el-chart .el-chart-head p { font-size:12px; color:var(--ink-3); margin-top:5px; font-family:var(--font-mono); }
.el-bars { display:flex; flex-direction:column; gap:15px; margin-top:24px; }
.el-bar { display:grid; grid-template-columns:66px 1fr 58px; align-items:center; gap:14px; }
.el-bar-k { font-size:12px; color:var(--ink-2); font-family:var(--font-mono); }
.el-bar-track { height:10px; background:var(--n-100); border-radius:var(--r-pill); overflow:hidden; }
.el-bar-fill { display:block; height:100%; width:0; border-radius:var(--r-pill); background:linear-gradient(90deg, var(--accent), #6ea0ff); transition:width 1.1s cubic-bezier(.2,.7,.2,1); }
.el-bar-v { font-size:13px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); font-family:var(--font-mono); }
.el-callout { display:flex; gap:12px; align-items:flex-start; margin-top:24px; padding:16px 18px; background:var(--accent-tint); border-radius:var(--r-md); font-size:13px; color:var(--ink-2); line-height:1.5; }
.el-callout .el-dot { margin-top:6px; }
.el-callout strong { color:var(--ink); }

/* comparison */
.el-cmp-hero { display:grid; grid-template-columns:repeat(3,1fr); margin-top:30px; padding:0; overflow:hidden; }
.el-cmp-item { padding:26px 30px; border-left:1px solid var(--line-2); }
.el-cmp-item:first-child { border-left:none; }
.el-cmp-item .v { font-size:clamp(26px,3vw,40px); font-weight:800; letter-spacing:-.035em; color:var(--c); line-height:1; font-variant-numeric:tabular-nums; }
.el-cmp-item.lead .v { font-size:clamp(38px,5vw,60px); }
.el-cmp-item .n { font-weight:700; margin-top:12px; }
.el-cmp-item .s { font-size:11px; color:var(--ink-3); margin-top:4px; font-family:var(--font-mono); }
.el-tablewrap { margin-top:26px; overflow-x:auto; }
.el-scroll-hint { display:none; text-align:right; font-size:11px; color:var(--ink-3); margin-bottom:8px; font-family:var(--font-mono); }
.el-table { width:100%; border-collapse:collapse; min-width:660px; }
.el-table th { text-align:left; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:12px 16px; border-bottom:1px solid var(--line); }
.el-table th.num, .el-table td.num { text-align:center; }
.el-table td { padding:16px; border-bottom:1px solid var(--line-2); font-size:14px; font-variant-numeric:tabular-nums; }
.el-table tr.lead td { background:var(--surface); font-weight:600; }
.el-table tr.lead td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.el-cmp-name .nm { font-weight:700; margin-right:10px; }
.el-table td.ok { color:var(--ok); font-weight:700; }
.el-table td.no { color:var(--ink-faint); }

/* radar + legend */
.el-radar { max-width:520px; margin:20px auto 0; opacity:0; transform:scale(.95); transition:opacity .8s ease, transform .8s ease; }
.el-radar.shown { opacity:1; transform:none; }
.el-radar svg { width:100%; height:auto; overflow:visible; }
.el-legend { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; margin-top:18px; }
.el-leg { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); font-family:var(--font-mono); }
.el-leg .dot { width:11px; height:11px; border-radius:50%; }
.el-leg .dot.dash { border-radius:2px; height:3px; width:16px; }

/* pk */
.el-pk { margin-top:28px; }
.el-pk svg { width:100%; height:auto; }
.pk-path { will-change:stroke-dashoffset; }

/* full spec */
.el-spec { margin-top:28px; padding:8px clamp(18px,2vw,26px); }
.el-spec-row { display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:center; padding:15px 0; border-bottom:1px solid var(--line-2); }
.el-spec-row:last-child { border-bottom:none; }
.el-spec-row .k { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.el-spec-row .v { font-size:14px; color:var(--ink); font-weight:500; }
.el-spec-row .v.ok { color:var(--ok); font-weight:700; }
.el-spec-row .v.mono { font-family:var(--font-mono); font-size:12px; color:var(--ink-2); }
.el-spec-side { display:flex; flex-direction:column; gap:16px; margin-top:28px; }
.el-bindcard h3 { font-size:var(--step-1); font-weight:700; }
.el-card-sub { font-size:12px; color:var(--ink-3); margin-top:5px; font-family:var(--font-mono); }
.el-binds { display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.el-bind { display:grid; grid-template-columns:82px 1fr 62px; align-items:center; gap:12px; }
.el-bind-k { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink); }
.el-bind-k .dot { width:9px; height:9px; border-radius:50%; }
.el-bind-track { height:10px; background:var(--n-100); border-radius:var(--r-pill); overflow:hidden; }
.el-bind-fill { display:block; height:100%; width:0; border-radius:var(--r-pill); background:var(--c); transition:width 1.1s cubic-bezier(.2,.7,.2,1); }
.el-bind-v { font-family:var(--font-mono); font-size:12.5px; font-weight:600; text-align:right; color:var(--ink); }
.el-why { display:flex; gap:14px; align-items:flex-start; }
.el-why-ic { width:26px; height:26px; border-radius:7px; background:var(--accent-tint); color:var(--accent); display:grid; place-items:center; flex:none; }
.el-why-ic svg { width:16px; height:16px; }
.el-why strong { font-size:14px; }
.el-why p { font-size:13px; color:var(--ink-2); margin-top:6px; line-height:1.5; }

/* timeline */
.el-timeline { margin-top:30px; }
.el-tl-item { display:grid; grid-template-columns:54px 24px 1fr; padding-bottom:30px; --c:var(--accent); }
.el-tl-item:last-child { padding-bottom:0; }
.el-tl-yr { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ink-2); text-align:right; padding-right:2px; padding-top:1px; }
.el-tl-rail { position:relative; }
.el-tl-rail::before { content:""; position:absolute; left:50%; top:2px; width:13px; height:13px; transform:translateX(-50%); border-radius:50%; background:var(--n-0); border:3px solid var(--c); z-index:1; }
.el-tl-rail::after { content:""; position:absolute; left:50%; top:15px; bottom:-30px; width:2px; transform:translateX(-50%); background:var(--line); }
.el-tl-item:last-child .el-tl-rail::after { display:none; }
.el-tl-item.now .el-tl-rail::before { animation: el-nowpulse 2.6s ease-in-out infinite; }
@keyframes el-nowpulse { 0%,100% { box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); } 50% { box-shadow:0 0 0 10px color-mix(in srgb, var(--c) 2%, transparent); } }
@media (prefers-reduced-motion: reduce){ .el-tl-item.now .el-tl-rail::before { animation:none; box-shadow:0 0 0 5px color-mix(in srgb, var(--c) 16%, transparent); } }
.el-tl-body { padding-left:16px; padding-bottom:2px; }
.el-tl-body h4 { font-size:var(--step-0); font-weight:700; margin-top:9px; }
.el-tl-body p { font-size:13px; color:var(--ink-2); margin-top:6px; line-height:1.5; max-width:52ch; }
.el-tl-side { display:flex; flex-direction:column; gap:16px; margin-top:52px; }
.el-tstats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.el-tstat { border:1px solid var(--line); border-radius:var(--r-md); padding:16px 14px; background:var(--n-0); text-align:center; }
.el-tstat .v { font-size:clamp(24px,3vw,32px); font-weight:800; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.el-tstat .s { font-size:10.5px; color:var(--ink-3); margin-top:6px; font-family:var(--font-mono); letter-spacing:.03em; text-transform:uppercase; }
.el-obscard h3 { font-size:var(--step-0); font-weight:700; }
.el-obslist { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.el-obslist li { display:grid; grid-template-columns:auto 1fr; gap:12px; --c:var(--accent); }
.el-obslist li .dot { width:9px; height:9px; border-radius:50%; background:var(--c); margin-top:5px; }
.el-obslist li p { font-size:13px; color:var(--ink); line-height:1.5; }
.el-obslist li .c { font-size:10.5px; color:var(--ink-3); font-family:var(--font-mono); font-style:italic; margin-top:4px; display:block; }

/* published literature */
.el-filters { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:28px; }
.el-fchip { font-family:var(--font-mono); font-size:12px; letter-spacing:.02em; padding:8px 16px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--n-0); color:var(--ink-2); cursor:pointer; transition:all var(--dur-fast); }
.el-fchip.on { background:var(--ink); border-color:var(--ink); color:#fff; }
@media (hover:hover){ .el-fchip:not(.on):hover { border-color:var(--line-strong); } }
.el-studies { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; }
.el-study { display:flex; flex-direction:column; text-decoration:none; transition:transform var(--dur-fast), box-shadow var(--dur-fast); border-top:2px solid var(--accent); }
@media (hover:hover){ .el-study:hover { transform:translateY(-2px); box-shadow:0 1px 2px rgba(16,24,40,.05), 0 28px 50px -28px rgba(16,24,40,.4); } }
.el-study-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.el-study-j { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.el-study-yr { font-family:var(--font-mono); font-size:12px; color:var(--ink-3); }
.el-study h4 { font-size:15px; font-weight:700; line-height:1.3; margin-top:14px; color:var(--ink); }
.el-study-a { font-size:12.5px; color:var(--ink-2); margin-top:10px; font-style:italic; }
.el-study-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.el-study-link { font-family:var(--font-mono); font-size:12px; color:var(--accent); margin-top:auto; padding-top:16px; display:inline-flex; align-items:center; gap:5px; }
.el-study-link svg { width:13px; height:13px; }
.el-lit-more { display:flex; align-items:center; gap:16px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.el-lit-more .el-foot { margin-top:0; }

/* references */
.el-refmeta { display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
.el-reflist { display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.el-ref { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; padding:20px 24px; }
.el-ref-n { font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--accent); background:var(--accent-tint); border-radius:6px; padding:4px 8px; }
.el-ref-a { font-weight:700; font-size:14px; color:var(--ink); }
.el-ref-t { font-size:13.5px; color:var(--ink-2); font-style:italic; margin-top:5px; line-height:1.45; }
.el-ref-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:12px; }
.el-ref-src { font-family:var(--font-mono); font-size:12px; color:var(--ink-2); }
.el-ref-doi { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); }
.el-ruo { margin-top:26px; text-align:center; font-size:13px; color:var(--ink-2); line-height:1.6; max-width:none; background:var(--surface); }
.el-ruo strong { display:block; color:var(--ink); font-size:14px; margin-bottom:6px; }

@media (max-width:920px){
  .el-hero, .el-split { grid-template-columns:1fr; }
  .el-studies { grid-template-columns:1fr; }
  .el-tl-side { margin-top:24px; }
  .el-scroll-hint { display:block; }
}
@media (max-width:560px){
  .el-stats-2, .el-cmp-hero, .el-hstats { grid-template-columns:1fr; }
  .el-cmp-item { border-left:none; border-top:1px solid var(--line-2); }
  .el-cmp-item:first-child { border-top:none; }
  .el-spec-row { grid-template-columns:1fr; gap:5px; }
}

/* ---- generic elevated flagship (any compound) ---- */
.el-genbars { display:flex; flex-direction:column; gap:18px; }
.el-genbar { display:flex; flex-direction:column; gap:9px; }
.el-genbar-top { display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:13.5px; }
.el-genbar-top span:first-child { color:var(--ink-2); }
.el-genbar-v { font-family:var(--font-mono); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.el-mechgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:16px; margin-top:32px; }
.el-mechcard { border-top:2px solid var(--c); }
.el-mechcard h4 { font-size:var(--step-1); font-weight:700; margin-top:12px; }
.el-mechcard p { font-size:13.5px; color:var(--ink-2); margin-top:10px; line-height:1.5; }
.el-mechcite { display:block; margin-top:14px; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); font-style:italic; }
.el-checks { display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.el-check { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; }
.el-check-ic { width:20px; height:20px; border-radius:50%; background:var(--accent-tint); color:var(--accent); display:grid; place-items:center; font-size:11px; font-weight:700; flex:none; margin-top:1px; }
.el-check strong { display:block; font-size:13.5px; }
.el-check span { font-size:12px; color:var(--ink-3); }