/* ============================================================================
   Atlas Labs · shared stylesheet
   ----------------------------------------------------------------------------
   Extracted from the per-page inline styles of the original prototype. Every
   rule here was byte-identical across two or more pages, and no page overrode
   one of these selectors with a partial declaration block, so pulling them out
   leaves rendering unchanged. Page-specific rules still live in a <style> block
   on the page itself, which loads after this file and therefore still wins.

   Design tokens are fixed by CLAUDE.md. Do not change the palette, type stack,
   radii, or the house easing without a design decision behind it.
   ========================================================================== */

:root{--paper:#FFFFFF;--cloud:#F5F7FA;--ink:#101A2D;--ink-2:#5C6577;--ink-3:#9AA3B4;--line:#E8EBF0;--hair:#F0F2F6;--pass:#1E9E67;--pass-wash:#E4F5EC;--new:#19B576;--ease:cubic-bezier(.22,1,.36,1);--head:'Sora',-apple-system,sans-serif;--body:'Manrope',-apple-system,sans-serif;--logo:'Quicksand',sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;--shadow-card:0 24px 60px -28px rgba(16,26,45,.18);--shadow-pill:0 14px 30px -12px rgba(16,26,45,.35)}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--body);background:var(--paper);color:var(--ink);overflow-x:hidden}
::selection{background:#DCD4F6}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.ruobar{background:var(--ink);color:#B9C1D2;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px}
.ruobar b{color:#fff;font-weight:600}
header.nav{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--hair)}
.navrow{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:var(--ink)}
.logo .lg{font-family:var(--logo);font-weight:700;font-size:27px;letter-spacing:-.02em}
.logo .sm{font-family:var(--logo);font-weight:600;font-size:12.5px;color:var(--ink-2);letter-spacing:.22em;margin-top:1px;padding-left:2px}
nav.links{display:flex;gap:34px}
nav.links a{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;position:relative;padding:6px 0}
nav.links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--ink);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
nav.links a:hover::after{transform:scaleX(1)}
nav.links a.active::after{transform:scaleX(1)}
@media(max-width:900px){
  nav.links{display:none}
}
.navicons{display:flex;align-items:center;gap:8px}
.icobtn{position:relative;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;border:none;background:transparent;cursor:pointer;color:var(--ink);transition:background .2s var(--ease),transform .2s var(--ease)}
.icobtn:hover{background:var(--cloud);transform:translateY(-1px)}
.icobtn svg{width:21px;height:21px}
.count{position:absolute;top:2px;right:2px;min-width:18px;height:18px;border-radius:9px;background:var(--ink);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;padding:0 5px}
.pillbtn{display:inline-flex;align-items:center;gap:12px;font-family:var(--body);font-weight:700;font-size:15px;color:#fff;background:var(--ink);border:none;border-radius:999px;padding:14px 26px;text-decoration:none;cursor:pointer;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.pillbtn .arr{transition:transform .22s var(--ease)}
.pillbtn:hover{transform:translateY(-2px);box-shadow:var(--shadow-pill)}
.pillbtn:hover .arr{transform:translateX(4px)}
.pillghost{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:12px 22px;text-decoration:none;cursor:pointer;transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.pillghost:hover{transform:translateY(-2px);border-color:var(--ink-3);box-shadow:0 12px 26px -14px rgba(16,26,45,.2)}
h1{font-family:var(--head);font-weight:800;font-size:clamp(36px,4vw,54px);letter-spacing:-.02em}
.lead{font-size:17px;color:var(--ink-2);font-weight:500;margin-top:10px}
.vial{position:relative;width:var(--vw,120px);display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 22px 18px rgba(16,26,45,.26)) drop-shadow(0 6px 8px rgba(16,26,45,.12))}
.vial .cap{position:relative;width:64%;height:calc(var(--vw,120px)*.30);z-index:3;margin-bottom:calc(var(--vw,120px)*.01);
    border-radius:calc(var(--vw,120px)*.045) calc(var(--vw,120px)*.045) calc(var(--vw,120px)*.02) calc(var(--vw,120px)*.02);
    background:linear-gradient(90deg,#79818F 0%,#C9CFD9 12%,#F7F9FC 30%,#E2E6ED 46%,#B9C0CC 64%,#8E96A4 84%,#767E8C 100%)}
.vial .cap::before{content:"";position:absolute;top:calc(var(--vw,120px)*-.035);left:-9%;right:-9%;height:calc(var(--vw,120px)*.14);
    border-radius:calc(var(--vw,120px)*.05)/calc(var(--vw,120px)*.045);
    background:linear-gradient(90deg,#8B93A1 0%,#D8DDE5 14%,#FDFEFF 34%,#E8ECF1 52%,#C2C9D3 70%,#8B93A1 100%);
    box-shadow:0 1px 2px rgba(16,26,45,.28),inset 0 1.5px 1.5px rgba(255,255,255,.9)}
.vial .cap::after{content:"";position:absolute;bottom:0;left:0;right:0;height:24%;
    background:linear-gradient(90deg,rgba(16,26,45,.30),rgba(255,255,255,.35) 32%,rgba(16,26,45,.10) 60%,rgba(16,26,45,.32));
    border-radius:0 0 calc(var(--vw,120px)*.02) calc(var(--vw,120px)*.02)}
.vial .crimp{position:relative;width:46%;height:calc(var(--vw,120px)*.16);z-index:1;
    background:linear-gradient(90deg,rgba(130,144,166,.5) 0%,rgba(255,255,255,.85) 18%,rgba(240,244,249,.35) 45%,rgba(214,222,233,.4) 72%,rgba(130,144,166,.5) 100%);
    border-left:1px solid rgba(150,160,178,.45);border-right:1px solid rgba(150,160,178,.45);
    box-shadow:inset 0 calc(var(--vw,120px)*-.02) calc(var(--vw,120px)*.03) rgba(120,134,156,.25)}
.vial .glass{position:relative;width:100%;height:calc(var(--vw,120px)*1.34);margin-top:calc(var(--vw,120px)*-.015);overflow:hidden;
    border-radius:46% 46% 44% 44% / 9% 9% 7% 7%;
    background:linear-gradient(90deg,rgba(112,126,148,.40) 0%,rgba(255,255,255,.92) 9%,rgba(255,255,255,.32) 22%,rgba(234,240,246,.10) 46%,rgba(212,221,232,.18) 72%,rgba(150,163,182,.30) 90%,rgba(96,110,132,.42) 100%);
    border:1px solid rgba(150,160,178,.42);
    box-shadow:inset 0 calc(var(--vw,120px)*.03) calc(var(--vw,120px)*.04) rgba(255,255,255,.75),inset calc(var(--vw,120px)*-.03) 0 calc(var(--vw,120px)*.06) rgba(96,112,134,.14),inset calc(var(--vw,120px)*.03) 0 calc(var(--vw,120px)*.06) rgba(255,255,255,.32),inset 0 calc(var(--vw,120px)*-.06) calc(var(--vw,120px)*.09) rgba(96,112,134,.18)}
.vial .glass::before{content:"";position:absolute;top:2%;bottom:2%;right:7%;width:4.5%;border-radius:6px;z-index:6;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.08) 55%,rgba(255,255,255,.4));pointer-events:none}
.vial .glass::after{content:"";position:absolute;left:2%;right:2%;bottom:0;height:8%;z-index:6;border-radius:0 0 50% 50%/0 0 90% 90%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.55) 45%,rgba(140,155,178,.42));pointer-events:none}
.vial .puck{position:absolute;left:9%;right:9%;bottom:2.5%;height:11%;z-index:1;border-radius:4px 4px calc(var(--vw,120px)*.08) calc(var(--vw,120px)*.08);background:radial-gradient(120% 90% at 50% 0%,#FFFFFF,#EDEFF3 60%,#DEE3EA);border:1px solid #DDE2E9;box-shadow:inset 0 2px 2px #fff,0 2px 3px rgba(96,112,134,.25)}
.vial .liq{position:absolute;left:1.5px;right:1.5px;bottom:1.5px;height:70%;z-index:1;border-radius:0 0 46% 46%/0 0 9% 9%;background:linear-gradient(90deg,var(--liq2,#EFC2CC) 0%,var(--liq,#F4D7DD) 20%,rgba(255,255,255,.6) 34%,var(--liq,#F4D7DD) 54%,var(--liq2,#EFC2CC) 100%);opacity:.9}
.vial .liq::before{content:"";position:absolute;top:0;left:0;right:0;height:5%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0))}
.vial .label{position:absolute;left:2.5%;right:2.5%;top:11%;height:77%;z-index:2;
    background-color:var(--label,#DCE7F5);
    background-image:linear-gradient(90deg,rgba(16,26,45,.16) 0%,rgba(255,255,255,.16) 20%,rgba(255,255,255,.02) 50%,rgba(16,26,45,.05) 78%,rgba(16,26,45,.18) 100%);
    color:var(--labeltxt,#17243F);padding:8% 7% 8% 9%;overflow:hidden;box-shadow:0 1px 2px rgba(16,26,45,.16)}
.vial .lname{display:block;font-family:var(--head);font-weight:800;font-size:calc(var(--vw,120px)*.115);letter-spacing:-.015em;line-height:1.05;max-width:62%}
.vial .ldose{display:inline-block;margin-top:6%;font-family:var(--mono);font-size:calc(var(--vw,120px)*.068);font-weight:600;color:#fff;background:rgba(30,45,75,.6);border-radius:999px;padding:2.5% 7%}
.vial .lruo{position:absolute;left:8%;bottom:5.5%;font-size:calc(var(--vw,120px)*.05);font-weight:700;opacity:.75;white-space:nowrap}
.vial .lbrand{position:absolute;right:3%;top:5%;bottom:5%;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--logo);font-weight:700;font-size:calc(var(--vw,120px)*.24);letter-spacing:-.02em;line-height:1;opacity:.96}
.vial .shine{position:absolute;top:1.5%;bottom:2%;left:3.5%;width:5%;z-index:5;filter:blur(.5px);border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.16) 55%,rgba(255,255,255,.5));pointer-events:none}
.vial .lbrand::after{content:"labs";font-size:.36em;letter-spacing:.28em;margin-top:.3em;font-weight:600;opacity:.85}
/* Purity chip on the label. Driven by --purity rather than hardcoded, because
   the chip is a claim: printing "Purity ≥ 99%" on bacteriostatic water or on an
   empty sterile vial states something untrue about the product in the picture.
   src/components.mjs sets --purity only for products whose lot carries a real
   HPLC purity figure. With the property unset the var() is invalid at
   computed-value time, `content` resolves to `normal`, and no chip is drawn. */
.vial .label::after{content:var(--purity);position:absolute;left:8%;bottom:14%;font-family:var(--body);font-weight:700;font-size:calc(var(--vw,120px)*.052);border:1.5px solid currentColor;border-radius:999px;padding:1.5% 5%;opacity:.9}
.shot{position:relative;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,var(--wall,#E9E4F8) 0%,var(--wall,#E9E4F8) 70%,var(--ledge,#A99BE0) 70%,var(--ledge,#A99BE0) 100%)}
.shot::after{content:"";position:absolute;left:0;right:0;top:calc(70% - 2px);height:8px;background:rgba(16,26,45,.10);filter:blur(4px)}
.shot .stage{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.cathead{padding:56px 0 26px}
.toolrow{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:30px}
.search{flex:1;min-width:260px;max-width:640px;display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:14px 22px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.search:focus-within{border-color:var(--ink-3);box-shadow:0 10px 26px -16px rgba(16,26,45,.25)}
.search input{border:none;outline:none;background:none;font-family:var(--body);font-weight:600;font-size:15px;width:100%;color:var(--ink)}
.search input::placeholder{color:var(--ink-3)}
.sortrow{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink-2)}
.sort{appearance:none;-webkit-appearance:none;font-family:var(--body);font-weight:700;font-size:14px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:13px 42px 13px 20px;cursor:pointer;outline:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 24px) 50%,calc(100% - 18px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:700;font-size:14px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:12px 22px;cursor:pointer;transition:all .2s var(--ease)}
.pill:hover{transform:translateY(-1px);border-color:var(--ink-3)}
.pill.active{background:var(--ink);border-color:var(--ink);color:#fff}
.pill:focus-visible{outline:3px solid #B9C1D2;outline-offset:2px}
.countline{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.08em;margin-left:auto;align-self:center}
.gridsec{padding:40px 0 100px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:1020px){
  .pgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .pgrid{grid-template-columns:1fr}
}
.pcard{background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 10px 34px -20px rgba(16,26,45,.16);transition:transform .28s var(--ease),box-shadow .28s var(--ease);display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
.pcard.hidden{display:none}
.pcard .shot{height:300px;border-radius:0}
.pcard .shot .vial{--vw:112px;--vh:190px;transition:transform .35s var(--ease)}
.pcard:hover .shot .vial{transform:translateY(-7px) rotate(-3deg)}
.badge{position:absolute;z-index:3;top:16px;left:16px;font-size:12px;font-weight:800;color:#fff;background:var(--new);border-radius:999px;padding:7px 14px}
.badge.spray{background:#E3EDFB;color:#2E62B8}
.badge.low{background:#FBF3DD;color:#9A6E12}
.pbody{padding:22px 24px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pname{font-family:var(--head);font-weight:700;font-size:19px}
.pfrom{text-align:right;font-size:12px;color:var(--ink-3);font-weight:600}
.pfrom b{display:block;font-family:var(--head);font-size:19px;color:var(--ink);letter-spacing:-.01em}
.psub{font-size:14px;color:var(--ink-2);font-weight:600}
.pmeta{margin-top:8px;font-family:var(--mono);font-size:10.5px;color:var(--pass);background:var(--pass-wash);border-radius:999px;padding:5px 11px;align-self:flex-start}
.pbtns{margin-top:16px;display:flex;gap:10px}
.pbtns .pillghost{flex:1;justify-content:center}
.pbtns .pillbtn{flex:1.2;justify-content:center}
.empty{display:none;text-align:center;padding:90px 0;color:var(--ink-2);font-weight:600}
.empty.show{display:block}
.empty b{font-family:var(--head);display:block;font-size:22px;color:var(--ink);margin-bottom:8px}
footer{background:var(--ink);color:#fff;padding:70px 0 40px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
@media(max-width:900px){
  .fgrid{grid-template-columns:1fr 1fr}
}
.flogo .lg{font-family:var(--logo);font-weight:700;font-size:34px}
.flogo .sm{font-family:var(--logo);font-weight:600;font-size:14px;color:#8E99AF;letter-spacing:.24em;margin-top:2px}
.fcol h4{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:#8E99AF;margin-bottom:18px}
.fcol a{display:block;color:#D7DCE6;text-decoration:none;font-size:14.5px;font-weight:600;margin-bottom:12px}
.fcol a:hover{color:#fff}
.flegal{margin-top:56px;padding-top:26px;border-top:1px solid #26334C;font-size:12.5px;line-height:1.8;color:#7C8AA3}
.flegal b{color:#AAB4C7}
.scrim{position:fixed;inset:0;background:rgba(16,26,45,.42);opacity:0;pointer-events:none;transition:opacity .3s var(--ease);z-index:90}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100vw);background:#fff;z-index:95;transform:translateX(102%);transition:transform .38s var(--ease);display:flex;flex-direction:column;box-shadow:-30px 0 60px -30px rgba(16,26,45,.3)}
.drawer.on{transform:none}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:24px 26px;border-bottom:1px solid var(--hair)}
.dhead b{font-family:var(--head);font-size:19px}
.dhead b small{color:var(--ink-3);font-weight:600;margin-left:4px}
.dclose{width:40px;height:40px;border-radius:50%;border:none;background:var(--cloud);cursor:pointer;font-size:16px;transition:transform .2s}
.dclose:hover{transform:rotate(90deg)}
.dbody{flex:1;overflow-y:auto;padding:20px 26px}
.ditem{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--hair)}
.dthumb{flex:none;width:74px;height:88px;border-radius:14px;overflow:hidden;position:relative;background:linear-gradient(180deg,var(--wall,#E4F0E8) 0%,var(--wall,#E4F0E8) 68%,var(--ledge,#93C7A8) 68%)}
.dthumb .vial{--vw:34px;--vh:56px;position:absolute;left:50%;top:52%;transform:translate(-50%,-50%)}
.dinfo{flex:1}
.dinfo b{font-family:var(--head);font-size:14.5px;display:block}
.dinfo .lot{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:3px;display:block}
.dinfo .lot a{color:#3E7BE0;text-decoration:none}
.dqty{margin-top:10px;display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px}
.dqty button{width:30px;height:30px;border:none;background:none;cursor:pointer;font-size:14px;color:var(--ink-2)}
.dqty span{width:26px;text-align:center;font-family:var(--mono);font-size:12.5px;font-weight:600}
.dprice{font-family:var(--head);font-weight:700;font-size:14.5px;white-space:nowrap}
.dempty{text-align:center;padding:70px 10px;display:none}
.dempty.on{display:block}
.dempty .bag{width:84px;height:84px;border-radius:24px;background:var(--cloud);display:grid;place-items:center;margin:0 auto 22px;font-size:30px;color:var(--ink-3)}
.dempty b{font-family:var(--head);font-size:20px;display:block}
.dempty p{margin-top:8px;color:var(--ink-2);font-weight:500;font-size:14.5px}
.dfoot{border-top:1px solid var(--hair);padding:20px 26px 26px}
.dattest{display:flex;gap:11px;align-items:flex-start;background:#F2F5FB;border-radius:14px;padding:13px 15px;margin-bottom:14px}
.dattest input{margin-top:2px;width:16px;height:16px;accent-color:var(--ink);flex:none;cursor:pointer}
.dattest label{font-size:11.5px;line-height:1.55;color:var(--ink-2);font-weight:600;cursor:pointer}
.dsub{display:flex;justify-content:space-between;font-weight:700;margin-bottom:14px}
.dsub .amt{font-family:var(--head);font-size:20px}
.dsub small{display:block;font-size:11.5px;color:var(--ink-3);font-weight:600;margin-top:2px}
.dcheckout{width:100%;justify-content:center}
.dcheckout[aria-disabled="true"]{background:#AEB6C6;cursor:not-allowed;box-shadow:none;transform:none}
.dnote{margin-top:12px;text-align:center;font-size:11.5px;color:var(--ink-3);font-weight:600}
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;font-size:14px;font-weight:700;border-radius:999px;padding:14px 26px;transition:opacity .3s var(--ease),transform .3s var(--ease);z-index:100}
.toast.show{opacity:1;transform:translate(-50%,0)}
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms !important;animation:none !important}
}
@media(max-width:640px){
  .cathead{padding:36px 0 16px}
  .pills{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
  .pills::-webkit-scrollbar{display:none}
  .pill{white-space:nowrap;flex:none}
  .countline{display:none}
  .pcard .shot{height:260px}
}
.burger{display:none}
@media(max-width:900px){
  .burger{display:grid}
}
.mmenu{position:fixed;inset:0;background:#fff;z-index:120;padding:14px 24px 28px;transform:translateY(-104%);transition:transform .5s var(--ease);display:flex;flex-direction:column}
.mmenu.on{transform:none}
.mtop{display:flex;justify-content:space-between;align-items:center;height:62px}
.mx{width:44px;height:44px;border-radius:50%;border:none;background:var(--cloud);font-size:16px;cursor:pointer;color:var(--ink)}
.mlinks{margin-top:18px;display:flex;flex-direction:column}
.mlinks a{font-family:var(--head);font-weight:800;font-size:clamp(30px,9vw,40px);letter-spacing:-.02em;color:var(--ink);text-decoration:none;padding:16px 0;border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mlinks a::after{content:"\2192";font-size:.6em;color:var(--ink-3)}
.mmenu.on .mlinks a{opacity:1;transform:none}
.mmenu.on .mlinks a:nth-child(1){transition-delay:.06s}
.mmenu.on .mlinks a:nth-child(2){transition-delay:.12s}
.mmenu.on .mlinks a:nth-child(3){transition-delay:.18s}
.mmenu.on .mlinks a:nth-child(4){transition-delay:.24s}
.mmenu.on .mlinks a:nth-child(5){transition-delay:.30s}
.mruo{margin-top:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.navrow{transition:height .3s var(--ease)}
header.nav.scrolled .navrow{height:60px}
header.nav.scrolled{box-shadow:0 10px 30px -18px rgba(16,26,45,.22)}
.flegal{margin-top:56px;padding-top:28px;border-top:1px solid #26334C}
.flegal h5{font-family:var(--head);font-weight:700;font-size:16px;color:#fff;margin-bottom:16px}
.flegal p{font-size:12.5px;line-height:1.85;color:#7C8AA3;margin-bottom:13px;max-width:110ch}
.flegal p b{color:#AAB4C7}
.fcopy{margin-top:22px;padding-top:20px;border-top:1px solid #26334C;text-align:center;font-size:12px;color:#7C8AA3}
.ftrust{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:8px}
.fbadges{display:flex;gap:20px;flex-wrap:wrap}
.fbadge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#AAB4C7}
.fbadge svg{color:#4FD08A}
.fpay{display:flex;gap:8px;flex-wrap:wrap}
.fpay .pm{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:#8E99AF;border:1px solid #26334C;border-radius:6px;padding:5px 9px}
.fsocial{display:flex;gap:10px}
.fsocial a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#AAB4C7;background:#1B2B4A;transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.fsocial a:hover{transform:translateY(-2px);background:#fff;color:var(--ink)}
.scrollbar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#6D5BD0,#3E7BE0);z-index:200;transition:width .1s linear}
@media(prefers-reduced-motion:reduce){
  .scrollbar{display:none}
}
.float{animation:bob var(--dur,7s) ease-in-out infinite;animation-delay:var(--del,0s)}
.mobilebar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:80;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-top:1px solid var(--hair);padding:12px 18px calc(12px + env(safe-area-inset-bottom));gap:14px;align-items:center}
.mobilebar .pillbtn{flex:1;justify-content:center;padding:15px 20px;font-size:15px}
@media(max-width:760px){
  /* Only reserve space for the sticky CTA on pages that actually have one.
     This was unconditional, so every page without a .mobilebar carried 82px of
     dead space at the bottom on mobile. `:has` scopes it to the real cases and
     needs no page class to be kept in sync. */
  body:has(.mobilebar){padding-bottom:82px}
  .mobilebar{display:flex}
}
/* Fallback for engines without :has. Same two pages, named explicitly. */
@supports not selector(body:has(.mobilebar)){
  @media(max-width:760px){
    body.p-index,body.p-product{padding-bottom:82px}
  }
}


/* ---------------------------------------------------------------------------
   Additions made during the launch build. These are new shared behaviours, not
   extractions, so they are kept below the extracted core and clearly separated.
   --------------------------------------------------------------------------- */

/* The hidden attribute always wins. Without this, any class that sets display
   (like .pillbtn's inline-flex) silently overrides [hidden] and "hidden"
   elements render anyway. */
[hidden]{display:none !important}

/* Touch feel. Hover states never fire on phones, so touch gets its own
   language: a quick press-down on anything tappable, no grey tap flash, and no
   double-tap-zoom delay on controls. This is what makes the site feel native
   under a thumb instead of like a desktop page being poked. */
html{-webkit-tap-highlight-color:transparent}
button,a.pillbtn,a.pillghost,.pill,.size,.bundle,.qtab,summary{touch-action:manipulation}
@media(pointer:coarse){
  .pillbtn:active{transform:scale(.96);transition-duration:.09s}
  .pillghost:active,.pill:active,.size:active,.bundle:active,.qtab:active,.schip:active,.rarr:active{transform:scale(.94);transition-duration:.09s}
  .icobtn:active{transform:scale(.88);background:var(--cloud)}
  .pcard:active{transform:scale(.982);transition-duration:.12s}
  .gitem:active,.wcard:active,.cit2:active,.lotcard:active{transform:scale(.985)}
  .dqty button:active,.qty button:active{transform:scale(.82)}
}

/* Keyboard focus. The prototype only styled :focus-visible on filter pills, so
   every other control was invisible to keyboard users. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #6D5BD0;outline-offset:3px;border-radius:6px}

/* Skip link, first tab stop on every page. */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:#fff;font-weight:700;font-size:14px;padding:12px 20px;border-radius:0 0 12px 0;text-decoration:none}
.skip:focus{left:0}

/* ---------------------------------------------------------------------------
   Floating pill navigation. The chrome bar becomes a capsule that hovers over
   the page instead of a full-width slab — same height, same contents, so no
   layout below it moves.
   --------------------------------------------------------------------------- */
header.nav{background:transparent;border-bottom:none;padding:10px 12px 0;top:0}
header.nav .navrow{background:rgba(255,255,255,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--hair);border-radius:999px;box-shadow:0 18px 44px -28px rgba(16,26,45,.35);padding-left:26px;padding-right:12px}
header.nav.scrolled{box-shadow:none}
header.nav.scrolled .navrow{box-shadow:0 14px 34px -20px rgba(16,26,45,.4);border-color:var(--line)}

/* ---------------------------------------------------------------------------
   Promo bar. Below the RUO bar, dismissible, with a live countdown and a
   copy-on-tap code. PLACEHOLDER campaign.
   --------------------------------------------------------------------------- */
.promobar{position:relative;background:linear-gradient(90deg,#1B2B4A,#101A2D);color:#D7DCE6;font-size:12.5px;font-weight:600;padding:9px 44px 9px 16px}
.promoinner{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;text-align:center}
.promobar b{color:#fff;text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.psep{color:#4A5A78}
.pcode{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ink);background:#fff;border:none;border-radius:999px;padding:4px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:transform .18s var(--ease)}
.pcode:hover{transform:translateY(-1px)}
.pcode .pcopy{color:var(--ink-3);font-size:11px}
.ptimer{font-family:var(--mono);font-size:11.5px;color:#8FF0BE;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.pstack{color:#8E99AF;font-size:11.5px}
.promobar .px{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:none;background:transparent;color:#8E99AF;font-size:13px;cursor:pointer;transition:background .2s,color .2s}
.promobar .px:hover{background:#26334C;color:#fff}
@media(max-width:640px){.pstack{display:none}}

/* ---------------------------------------------------------------------------
   Researcher gate. Full-screen dialog over a blurred page; the checkbox gates
   entry exactly like the cart attestation gates checkout.
   --------------------------------------------------------------------------- */
.gatewrap{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:rgba(16,26,45,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:1;transition:opacity .4s var(--ease)}
.gatewrap.off{opacity:0;pointer-events:none}
.gatecard{width:min(480px,100%);background:#fff;border-radius:26px;box-shadow:0 40px 90px -30px rgba(16,26,45,.5);padding:38px 34px 30px;text-align:center;animation:gatein .55s var(--ease) both}
@keyframes gatein{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.glogo{display:inline-flex;flex-direction:column;line-height:1}
.glogo .lg{font-family:var(--logo);font-weight:700;font-size:30px;letter-spacing:-.02em}
.glogo .sm{font-family:var(--logo);font-weight:600;font-size:12px;color:var(--ink-2);letter-spacing:.24em;margin-top:2px}
.gatecard h2{font-family:var(--head);font-weight:800;font-size:24px;letter-spacing:-.02em;margin-top:18px}
.gatecard>p{margin-top:10px;font-size:14.5px;line-height:1.65;color:var(--ink-2);font-weight:500}
.gattest{text-align:left;margin-top:20px}
.gatego{width:100%;justify-content:center;margin-top:16px;font-size:15.5px;padding:16px 26px}
.gatego[aria-disabled="true"]{background:#AEB6C6;cursor:not-allowed;box-shadow:none;transform:none}
.gatenote{margin-top:16px;font-size:11.5px;line-height:1.6;color:var(--ink-3);font-weight:600}
.gatenote a{color:#3E7BE0;text-decoration:none;font-weight:700}
.gateexit{margin-top:10px;font-size:12.5px;color:var(--ink-2);font-weight:600}
.gateexit a{color:var(--ink);font-weight:800;text-decoration:none}
@media(prefers-reduced-motion:reduce){.gatecard{animation:none}.gatewrap{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(16,26,45,.72)}}

/* ---------------------------------------------------------------------------
   Welcome offer popup. One per session, after the gate clears. The code hides
   behind one deliberate tap.
   --------------------------------------------------------------------------- */
.welwrap{position:fixed;inset:0;z-index:290;display:grid;place-items:center;padding:20px;background:rgba(16,26,45,.38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .35s var(--ease)}
.welwrap.on{opacity:1}
.welcard{position:relative;width:min(400px,100%);background:#fff;border-radius:24px;box-shadow:0 40px 90px -30px rgba(16,26,45,.5);padding:34px 30px 28px;text-align:center;transform:translateY(18px);transition:transform .35s var(--ease)}
.welwrap.on .welcard{transform:none}
.wx{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:none;background:var(--cloud);color:var(--ink-2);font-size:14px;cursor:pointer;transition:transform .2s}
.wx:hover{transform:rotate(90deg)}
.wk{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#6D5BD0}
.welcard h3{font-family:var(--head);font-weight:800;font-size:24px;letter-spacing:-.02em;margin-top:10px}
.welcard p{margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--ink-2);font-weight:500}
.wcode{display:block;width:100%;margin-top:18px;background:linear-gradient(135deg,#EDE9FB,#E3EAF9);border:1.5px dashed var(--ink-3);border-radius:16px;padding:20px;font-family:var(--body);font-weight:700;font-size:14px;color:var(--ink-2);cursor:pointer;transition:transform .2s var(--ease),border-color .2s}
.wcode:hover{transform:translateY(-2px);border-color:var(--ink)}
.wcode.revealed{border-style:solid;border-color:var(--pass);background:var(--pass-wash);animation:codein .5s var(--ease)}
.wcode.revealed b{font-family:var(--mono);font-size:22px;letter-spacing:.14em;color:var(--pass)}
@keyframes codein{0%{transform:scale(.92)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
.wgo{width:100%;justify-content:center;margin-top:14px}
@media(prefers-reduced-motion:reduce){.welwrap{backdrop-filter:none;-webkit-backdrop-filter:none}.wcode.revealed{animation:none}}

/* ---------------------------------------------------------------------------
   Product-card spec strip and quick add. Dose / purity / form at a glance, and
   an add-to-order button wired straight into the shared cart.
   --------------------------------------------------------------------------- */
.specs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;margin-top:12px;background:var(--hair);border:1px solid var(--hair);border-radius:14px;overflow:hidden}
.specs>div{background:var(--cloud);padding:9px 12px}
.specs span{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.specs b{display:block;margin-top:3px;font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addline{width:100%;justify-content:center;margin-top:12px;padding:14px 18px;font-size:14px}
.plinks{margin-top:10px;display:flex;justify-content:center;gap:18px;font-size:12.5px;font-weight:700}
.plinks a{color:var(--ink-2);text-decoration:none}
.plinks a:hover{color:var(--ink)}
.skuchip{position:absolute;z-index:3;top:16px;right:16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--ink-2);background:rgba(255,255,255,.72);backdrop-filter:blur(6px);border-radius:999px;padding:5px 10px}
.rankb{position:absolute;z-index:3;top:16px;right:16px;font-size:11px;font-weight:800;border-radius:999px;padding:6px 12px;background:#FBF3DD;color:#9A6E12}
.rankb.r2{background:#E3EDFB;color:#2E62B8}
.rankb.r3{background:#E4F5EC;color:#1E9E67}
.rankb~.skuchip{top:52px}

/* The red research-use banner. Shared, because it appears on product pages and
   on every certificate — it was page-local to the product page, so certificates
   rendered it as unstyled body text. */
.rbanner{background:#2A1113;color:#F6D4D4;text-align:center;font-size:13px;font-weight:600;padding:11px 16px;border-bottom:1px solid #3A1618}
.rbanner span{color:#FF8A8A;font-weight:800}

/* Screen-reader-only text. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Wide data tables scroll inside their own box instead of pushing the page
   sideways. `position:relative` matters: it makes this the containing block for
   the absolutely-positioned .sr labels inside the table. Without it they resolve
   against the document and stretch it to the table's full width — which is
   exactly how the certificate page came to scroll horizontally at 390px. */
.tablescroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablescroll:focus-visible{outline:3px solid #6D5BD0;outline-offset:2px}

/* The RUO bar is a compliance element, so it stays legible when printed and is
   never collapsed by a page-level override. */
@media print{
  .ruobar{background:#fff;color:#000;border-bottom:1px solid #000}
  header.nav,.mmenu,.drawer,.scrim,.mobilebar,.scrollbar,.toast,.fsocial{display:none !important}
}

/* Motion: honour the OS setting everywhere, including elements added later by
   script. CLAUDE.md treats this as non-negotiable. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}