:root{--max:1360px;--ink:#0b0f17;--mut:#5b5566;--dim:#8a8494;--line:#ececf2;--soft:#f7f7fa;--mag:#ff2aa6;--mag2:#d91a87;--pink:#fdf2f8;--pinkb:rgba(255,42,166,.28);--pink-deep:#fbe7f3;--rule:#e2dfe8;--ok:#0a9d5c;--ok-tint:#e9f8f0;--dark-bg:radial-gradient(120% 120% at 50% 32%,#141019 0%,#08080e 82%);--sora:'Sora',system-ui,sans-serif;--inter:'Inter',system-ui,sans-serif;--sp-tight:clamp(72px,6.5vw,96px);--sp-normal:clamp(72px,6.5vw,96px);--sp-chapter:clamp(72px,6.5vw,96px);--sp-head:clamp(26px,3vw,42px);--ease:cubic-bezier(.2,.7,.3,1);--e1:0 1px 0 rgba(11,15,23,.04),0 10px 24px -18px rgba(11,15,23,.28);--e2:0 1px 0 rgba(11,15,23,.05),0 26px 56px -40px rgba(11,15,23,.34);--e3:0 2px 0 rgba(11,15,23,.05),0 44px 90px -50px rgba(11,15,23,.44);--paper:0 1px 0 rgba(11,15,23,.05),0 2px 4px -2px rgba(11,15,23,.10),0 40px 70px -44px rgba(120,20,80,.38)}*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font-family:var(--inter);font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}a{color:inherit}button{font-family:var(--inter)}.n,.pricebox .amt,.pricebox .was,.qcv,.qcs,.lotn,.bgrid .v,.lrow b,.cikv .b,.sticky .pr,.leader .v,.litrow .no,.outro__line,.fig{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}.u{font-size:.52em;font-weight:600;opacity:.6;margin-left:.16em;letter-spacing:0;font-style:normal}.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad,24px)}.dpdp>.sec{position:relative;margin:0}.sec--hero{background:#fff;padding:26px 0 var(--sp-normal)}.sec--compare{background:#fff;padding:var(--sp-normal) 0}.sec--spec{background:#fff;padding:var(--sp-tight) 0}.sec--lit{background:#fafafa;padding:var(--sp-tight) 0}/* ---- seam vocabulary: one magenta filament at every ground change ---- */.seam::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:4;background:linear-gradient(90deg,rgba(255,42,166,0),rgba(255,42,166,.9) 22%,rgba(255,42,166,.9) 78%,rgba(255,42,166,0))}/* ---- indexed mastheads ---- */.mh{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:0 16px;margin-bottom:14px}.mh .ix{font-family:var(--sora);font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--dim)}.mh .lb{font-family:var(--sora);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);position:relative;padding-left:16px}.mh .lb::before{content:"";position:absolute;left:0;top:50%;width:8px;height:1px;background:var(--rule)}.mh::after{content:"";height:1px;background:var(--rule)}.mh--mag .lb{color:var(--mag2)}.mh--mag .lb::before,.mh--mag::after{background:var(--pinkb)}.dpdp h2{font-family:var(--sora);font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.022em;line-height:1.2;margin:0;max-width:34ch}.pv-lede{font-size:15.5px;color:var(--mut);margin:16px 0 0;max-width:62ch;line-height:1.7}.sec__head{margin-bottom:var(--sp-head)}/* ---- hero ---- */.pv-hero{display:grid;grid-template-columns:1fr;gap:24px;padding-top:12px}@media(min-width:1024px){.pv-hero{grid-template-columns:1.02fr .98fr;gap:38px;align-items:start}}.media{border-radius:24px;position:relative;overflow:hidden;display:grid;place-items:center;padding:40px;min-height:400px;border:1px solid #e8e8e8;background:#f8f8f8;box-shadow:none}@media(min-width:1024px){.media{min-height:0;aspect-ratio:613/730;align-self:start}}.media::after{content:"";position:absolute;left:0;right:0;top:56%;bottom:0;pointer-events:none;background-image:radial-gradient(58% 100% at 50% 100%,rgba(255,42,166,.07),rgba(0,0,0,0) 72%)}.media img.vial{width:min(62%,368px);position:relative;z-index:1;filter:drop-shadow(rgba(11,15,23,.18) 0 26px 38px)}.srail{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 18px;padding:30px 26px 20px;background-image:linear-gradient(to top,rgba(248,248,248,.97) 55%,rgba(248,248,248,0))}.srail .k{font-family:var(--sora);font-size:9.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--dim)}.srail b{font-family:var(--sora);font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.012em;font-variant-numeric:tabular-nums lining-nums;transition:opacity .16s var(--ease),transform .16s var(--ease)}.srail b em{font-style:normal;font-size:.6em;color:var(--mag2);margin-left:1px}.srail .sep{width:1px;height:24px;align-self:center;background:var(--line)}.srail .lab{flex:1 0 100%;margin-top:13px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}.srail.sw b{opacity:0;transform:translateY(4px)}.pv-kicker{font-family:var(--sora);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--mag2);font-weight:700;margin:0 0 12px}.dpdp h1{font-family:var(--sora);font-size:clamp(34px,3.9vw,48px);font-weight:700;line-height:1.04;letter-spacing:-.03em;margin:0 0 14px;max-width:15ch}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.chip{padding:7px 15px;border:1px solid var(--pinkb);border-radius:999px;font-family:var(--sora);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--mag2);background:var(--pink)}.desc{font-size:15px;color:var(--mut);line-height:1.68;margin:0 0 13px;max-width:56ch}.stock{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);font-weight:600;margin-bottom:16px;font-family:var(--sora);letter-spacing:.02em}.stock i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;box-shadow:0 0 0 3px rgba(10,157,92,.14)}.stock span{color:var(--mut);font-weight:400;font-family:var(--inter);letter-spacing:0}.buybox{border:1px solid var(--line);border-radius:22px;padding:22px;background:#fff;box-shadow:var(--e2)}@media(min-width:640px){.buybox{padding:26px}}.optrow{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}.optlbl{font-family:var(--sora);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--dim);font-weight:700;width:76px;flex:0 0 auto}.mass{display:flex;gap:7px;flex-wrap:wrap}.mbtn{padding:11px 19px;min-width:86px;text-align:center;border-radius:999px;font-family:var(--sora);font-size:13.5px;font-weight:700;border:1px solid var(--line);background:#fff;color:var(--mut);cursor:pointer;transition:all .15s var(--ease);letter-spacing:.01em}.mbtn:hover{border-color:var(--ink);color:var(--ink)}.mbtn[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:#fff}.qty button{width:40px;height:42px;background:none;border:0;color:var(--mut);font-size:18px;cursor:pointer}.qty button:hover{color:var(--ink)}.qty span{width:36px;text-align:center;font-size:14.5px;font-weight:700;font-family:var(--sora)}.pricebox{margin-left:auto;text-align:right}.pricebox .row1{display:flex;align-items:baseline;gap:9px;justify-content:flex-end}.pricebox .was{font-size:15px;color:var(--dim);text-decoration:line-through}.pricebox .amt{font-family:var(--sora);font-size:36px;font-weight:800;color:var(--ink);letter-spacing:-.038em}.pricebox .amt.sale{color:var(--mag2)}.pricebox .note{font-size:12.5px;color:var(--dim);margin-top:4px}.codechip{display:inline-block;border:1px dashed var(--pinkb);background:var(--pink);color:var(--mag2);font-weight:700;border-radius:7px;padding:1px 8px;cursor:pointer;user-select:none;font-family:var(--sora);font-size:11.5px;letter-spacing:.04em}.codechip:hover{border-color:var(--mag)}.batch{display:flex;align-items:center;gap:15px;background:var(--pink);border:1px solid var(--pinkb);border-radius:16px;padding:13px 17px;margin:3px 0 15px}.batch .fl{width:36px;height:36px;border-radius:10px;background:#fff;border:1px solid var(--pinkb);display:flex;align-items:center;justify-content:center;color:var(--mag2);flex:0 0 auto}.batch .a{font-size:10px;font-family:var(--sora);font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--mag2);opacity:.8}.batch .b{font-family:var(--sora);font-size:22px;font-weight:800;color:var(--mag2);letter-spacing:-.015em;line-height:1.15}.batch .c{font-size:11px;color:var(--mut)}.batch svg.shield{margin-left:auto;color:var(--mag2);flex:0 0 auto;opacity:.72}.blbl{font-family:var(--sora);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--dim);font-weight:700;margin:0 0 10px;display:flex;justify-content:space-between;align-items:center}.blbl span:last-child{letter-spacing:.02em;text-transform:none;font-weight:500;color:var(--mut);font-family:var(--inter);font-size:11.5px}.bundles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}@media(min-width:700px){.bundles{grid-template-columns:repeat(5,1fr)}}.bun{border:1px solid var(--line);border-radius:13px;padding:14px 6px 11px;background:#fff;cursor:pointer;text-align:center;position:relative;transition:all .15s var(--ease);color:var(--ink)}.bun:hover{border-color:var(--ink)}.bun[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}.bun[aria-pressed="true"] .s{color:#fff;opacity:.72}.bun .t{font-family:var(--sora);font-size:12px;font-weight:700;display:block;white-space:nowrap;letter-spacing:.02em}.bun .s{font-size:11.5px;color:var(--mag2);font-weight:700;display:block;margin-top:3px;min-height:14px;font-family:var(--sora)}.bun .badge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-family:var(--sora);font-size:8.5px;font-weight:800;letter-spacing:.1em;border-radius:999px;padding:3px 9px;white-space:nowrap;background:var(--mag);color:#fff}.bun .badge.dark{background:var(--ink)}.ctas{display:flex;gap:11px;margin-top:16px}.coabtn{height:56px;padding:0 28px;border:1px solid var(--line);border-radius:999px;font-family:var(--sora);font-size:13.5px;font-weight:700;letter-spacing:.06em;color:var(--ink);background:#fff;text-decoration:none;display:inline-flex;align-items:center;transition:border-color .15s}.coabtn:hover{border-color:var(--ink)}.addbtn{flex:1;height:56px;border:0;border-radius:999px;font-family:var(--sora);font-size:15.5px;font-weight:700;letter-spacing:.01em;background:var(--mag);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:background .15s var(--ease),transform .12s var(--ease),box-shadow .2s var(--ease);box-shadow:0 0 0 0 rgba(255,42,166,0),0 10px 30px -8px rgba(255,42,166,.55)}.addbtn:hover{background:var(--mag2);box-shadow:0 0 34px -2px rgba(255,42,166,.5),0 10px 30px -8px rgba(255,42,166,.6)}.addbtn:active{transform:translateY(1px)}.refpill{margin-top:10px;width:100%;height:46px;border:1px solid var(--line);border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;transition:border-color .15s}.refpill:hover{border-color:var(--mag)}.refpill svg{color:var(--mag2);flex:0 0 auto}.bene{margin-top:12px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--soft)}.brow{display:flex;gap:13px;padding:12px 16px;border-bottom:1px solid var(--line);align-items:flex-start;background:#fff}.brow.hl{background:var(--pink)}.brow svg{flex:0 0 auto;margin-top:2px;color:var(--mag2)}.brow .t{font-size:14px;font-weight:600;color:var(--ink)}.brow .d{font-size:12.5px;color:var(--dim);margin-top:1px}.paypanel{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;flex-wrap:wrap;background:#fff}.paypanel .sec2{display:flex;align-items:center;gap:8px;font-family:var(--sora);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:700}.paypanel .sec2 svg{color:var(--ok);flex:0 0 auto}.paychips{display:flex;gap:6px;flex-wrap:wrap}.paychip{font-family:var(--sora);font-size:9.5px;font-weight:700;letter-spacing:.1em;color:var(--mut);border:1px solid var(--line);border-radius:6px;padding:4px 8px;background:var(--soft)}/* ================= THE PROOF CHAPTER — pink field, white paper ================= */.sec--proof{position:relative;background:#fff;padding:var(--sp-chapter) 0;overflow:hidden}.sec--proof::after{content:none}.sec--proof>.wrap{position:relative;z-index:1}.coa{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}@media(min-width:1024px){.coa{grid-template-columns:.94fr 1.06fr}}/* the certificate reads as a physical document */.cert{border-radius:20px;padding:0 30px 30px;display:flex;flex-direction:column;position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--paper)}@media(min-width:1024px){.cert{padding:0 34px 34px}}.cert::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--mag),var(--mag2))}.cert .lab{display:flex;align-items:center;gap:12px;padding:29px 0 22px;margin-bottom:20px;border-bottom:1px solid var(--line)}.cert .sq{width:42px;height:42px;border-radius:11px;background:var(--ink);color:#fff;font-family:var(--sora);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.cert .nm{font-family:var(--sora);font-weight:700;font-size:15.5px;color:var(--ink)}.cert .sb{font-size:11.5px;color:var(--dim)}.cert .passchip{margin-left:auto;background:var(--ok-tint);color:var(--ok);border:1px solid rgba(10,157,92,.28);border-radius:999px;font-family:var(--sora);font-size:10px;font-weight:800;letter-spacing:.16em;padding:6px 14px;flex:0 0 auto}.cert .cl{font-family:var(--sora);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);font-weight:600}.cert .cl b{color:var(--ink);letter-spacing:.08em}.figline{display:flex;align-items:baseline;margin:10px 0 2px}.fig{font-family:var(--sora);font-size:clamp(44px,4.6vw,62px);font-weight:700;line-height:1;letter-spacing:-.035em;color:var(--mag2)}.fig .dot{display:inline-block;width:.07em;height:.07em;border-radius:50%;background:currentColor;margin:0 .075em .03em;vertical-align:baseline}.fig sup{font-size:.3em;font-weight:700;color:var(--ink);opacity:.42;letter-spacing:0;margin-left:.05em;vertical-align:super}.leader{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin:16px 0 26px}.leader .k{font-family:var(--sora);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);font-weight:700}.leader .ln{height:1px;background-image:repeating-linear-gradient(90deg,var(--rule) 0 3px,rgba(0,0,0,0) 3px 7px)}.leader .v{font-family:var(--sora);font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--mut)}.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:22px;border-top:1px solid var(--line)}.bgrid>div{padding:15px 0;border-bottom:1px solid var(--line)}.bgrid>div:nth-child(odd){padding-right:18px;border-right:1px solid var(--line)}.bgrid>div:nth-child(even){padding-left:22px}.bgrid .k{font-family:var(--sora);font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:var(--dim);font-weight:700}.bgrid .v{font-family:var(--sora);font-size:22px;font-weight:700;margin-top:5px;color:var(--ink);letter-spacing:-.02em}.bgrid .v.gr{color:var(--ok)}.bchips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:22px}.bchip{border:1px solid var(--pinkb);background:var(--pink);border-radius:999px;font-family:var(--sora);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mag2);padding:7px 13px;font-weight:700;display:inline-flex;align-items:center;gap:7px}.bchip i{width:5px;height:5px;border-radius:50%;background:var(--ok);display:inline-block}.certmetarow{border-top:1px solid var(--line);padding-top:20px;margin-bottom:24px;display:flex;gap:22px;align-items:flex-start;justify-content:space-between}.certmeta{display:grid;gap:9px;min-width:0}.certmeta div{font-size:11.5px;color:var(--mut);display:flex;gap:10px}.certmeta span{font-family:var(--sora);font-size:8.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--dim);font-weight:700;width:52px;flex:0 0 auto;padding-top:3px}.certthumb{flex:0 0 auto;display:block;position:relative;border-radius:6px;overflow:hidden;border:1px solid rgba(11,15,23,.12);transform:rotate(-1.6deg);transition:transform .28s var(--ease),box-shadow .28s var(--ease);box-shadow:0 2px 6px -3px rgba(11,15,23,.18),0 26px 50px -28px rgba(120,20,80,.45)}.certthumb:hover{transform:rotate(0deg) translateY(-3px);box-shadow:0 2px 6px -3px rgba(11,15,23,.2),0 34px 62px -30px rgba(120,20,80,.55)}.certthumb img{width:clamp(112px,11.5vw,158px);height:auto;display:block;background:#fff}.wpill{margin-top:auto;background:var(--mag);color:#fff;border:0;border-radius:999px;height:56px;font-family:var(--sora);font-size:14.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:background .15s}.wpill:hover{background:var(--mag2);box-shadow:0 0 30px -4px rgba(255,42,166,.5)}.qc{border-radius:20px;padding:0 26px;background:#fff;border:1px solid var(--line);box-shadow:var(--paper)}.qc .qh{display:flex;justify-content:space-between;align-items:center;padding:22px 0 15px;flex-wrap:wrap;gap:8px;border-bottom:2px solid var(--ink)}.qc .qh .t{font-family:var(--sora);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:800}.okchip{background:var(--ok-tint);color:var(--ok);border:1px solid rgba(10,157,92,.28);border-radius:999px;font-family:var(--sora);font-size:11px;font-weight:800;padding:5px 13px;letter-spacing:.03em}.qcrow{display:grid;grid-template-columns:minmax(0,1fr) 142px 92px;align-items:start;gap:0 18px;padding:14px 0;border-top:1px solid var(--line)}.qcrow:first-of-type{border-top:0}.qcrow .nm{font-size:15px;font-weight:600;color:var(--ink)}.qcrow .mt{font-family:var(--sora);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-top:6px;font-weight:700}.qcv{text-align:right;font-family:var(--sora);font-size:19px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}.qcv.w{font-family:var(--inter);font-size:14.5px;font-weight:600;color:var(--mut);letter-spacing:0}.qcs{text-align:right;margin-top:6px;font-family:var(--sora);font-size:9.5px;letter-spacing:.11em;color:var(--dim);font-weight:600}.vd{justify-self:end;margin-top:4px;font-family:var(--sora);font-size:9.5px;font-weight:800;letter-spacing:.18em;white-space:nowrap}.vd::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:8px;vertical-align:.16em}.vd.pass{color:var(--ok)}.vd.pass::before{background:var(--ok)}.vd.rep{color:var(--dim)}.vd.rep::before{background:var(--dim)}/* ---- lot rail: one white paper strip, ruled into five columns ---- */.batches{margin-top:56px}.batches .bh{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:18px;flex-wrap:wrap}.batches .bh h3{font-family:var(--sora);font-size:20px;font-weight:700;margin:0;color:var(--ink);letter-spacing:-.02em}.batches .bh p{margin:5px 0 0;font-size:12.5px;color:var(--mut)}.batches .bh a{font-family:var(--sora);font-size:12.5px;font-weight:700;color:var(--mag2);text-decoration:none;white-space:nowrap;letter-spacing:.03em}.batches .bh a:hover{text-decoration:underline}.lots{display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--paper)}.lot{padding:22px 18px;border-right:1px solid var(--line);text-decoration:none;display:block;transition:background-color .15s;position:relative}.lot:last-child{border-right:0}.lot:hover{background-color:var(--soft)}.lot .tag{font-family:var(--sora);font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--mag2);display:block;margin-bottom:12px}.lot .tag.mut{color:var(--dim)}.lothead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.lot .id{font-family:var(--sora);font-size:15px;font-weight:800;color:var(--ink);letter-spacing:.01em}.lot .id.mut{font-size:12.5px;font-weight:700;color:var(--dim);letter-spacing:.04em}.lot .sz{font-family:var(--sora);font-size:9.5px;font-weight:700;letter-spacing:.09em;color:var(--dim)}.lotn{display:flex;align-items:baseline;white-space:nowrap;font-family:var(--sora);font-weight:700;font-size:clamp(26px,2.5vw,36px);line-height:1;letter-spacing:-.045em;color:var(--ink);margin:10px 0 16px}.lotn .dp{display:inline-block;width:.075em;height:.075em;border-radius:50%;background:var(--mag);margin:0 .08em .03em;flex:0 0 auto}.lotn .pct{font-size:.4em;font-weight:600;color:var(--dim);letter-spacing:0;margin-left:.14em}.lrow{display:grid;grid-template-columns:1fr auto;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:12px}.lrow span{color:var(--dim)}.lrow b{font-family:var(--sora);font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:-.005em}.lview{display:block;margin-top:11px;font-family:var(--sora);font-size:11px;font-weight:700;color:var(--mag2);letter-spacing:.04em}.lot.is-sel{background-color:var(--pink)}.lot.is-sel::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--mag)}@media(max-width:1100px){.lots{grid-template-columns:repeat(5,minmax(206px,1fr));overflow-x:auto;scroll-snap-type:x proximity}.lot{scroll-snap-align:start}}/* ---- compare: the brand occupies a column ---- */.cmp{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--e1)}.cmprow{display:grid;grid-template-columns:1.6fr 1fr 1fr;font-size:14.5px;align-items:stretch}.cmprow>div{padding:14px 0;display:flex;align-items:center}.cmprow>div:first-child{padding-left:28px;font-weight:600;color:var(--ink)}.cmprow>div:nth-child(2){background:var(--pink);padding-left:22px}.cmprow>div:last-child{color:var(--dim);font-weight:400;padding-right:28px;padding-left:22px}.cmprow+.cmprow>div:first-child,.cmprow+.cmprow>div:last-child{box-shadow:0 -1px 0 var(--line)}.cmprow+.cmprow>div:nth-child(2){box-shadow:0 -1px 0 rgba(255,42,166,.15)}.cmprow.h>div{padding:15px 0;font-family:var(--sora);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--dim);font-weight:700}.cmprow.h>div:nth-child(2){background:var(--mag);color:#fff;padding-left:22px}.cmprow.h>div:last-child{padding-left:22px}.cmprow .us{font-family:var(--sora);font-weight:700;color:var(--ink);gap:10px;letter-spacing:.01em}.cmprow .us i{font-style:normal;width:6px;height:6px;border-radius:50%;background:var(--mag);display:inline-block;flex:0 0 auto}@media(max-width:640px){.cmprow{grid-template-columns:1.25fr 1fr 1fr;font-size:12.5px}.cmprow>div:first-child{padding-left:14px}.cmprow>div:last-child{padding-right:14px;padding-left:12px}.cmprow>div:nth-child(2),.cmprow.h>div:nth-child(2){padding-left:12px}}/* ---- compound info ---- */.ci{display:grid;grid-template-columns:1fr;gap:20px}@media(min-width:1024px){.ci{grid-template-columns:1fr 1fr}}.cicard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(28px,3vw,40px);box-shadow:var(--e1)}.cicard .k{font-family:var(--sora);font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--mag2);font-weight:800;margin-bottom:9px}.cicard h3{font-family:var(--sora);font-size:17px;font-weight:700;margin:0 0 14px;letter-spacing:-.022em}.cikv .r{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}.cikv .r:last-child{border-bottom:0}.cikv .a{color:var(--mut)}.cikv .b{font-family:var(--sora);font-weight:700;text-align:right;letter-spacing:-.01em}.cilink{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:var(--sora);font-size:13px;font-weight:700;color:var(--mag2);text-decoration:none;letter-spacing:.02em}.cilink:hover{text-decoration:underline}.scchips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px}.scchip{border:1px solid var(--pinkb);background:var(--pink);border-radius:999px;font-size:12px;font-weight:600;color:var(--mag2);padding:7px 14px}.temp{display:flex;gap:15px;align-items:center;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:9px}.temp .badge{flex:0 0 auto;background:var(--pink);border:1px solid var(--pinkb);color:var(--mag2);font-family:var(--sora);font-size:13px;font-weight:800;border-radius:10px;padding:11px 12px;white-space:nowrap;letter-spacing:-.01em}.temp .t{font-size:14.5px;font-weight:600}.temp .d{font-size:13px;color:var(--mut);margin-top:2px;line-height:1.55}.finenote{font-size:12px;color:var(--dim);line-height:1.6;margin-top:13px}.finenote a{color:var(--mut)}/* ---- literature ---- */.lit{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--e1)}.litrow{display:grid;grid-template-columns:44px 1fr auto;gap:0 18px;padding:19px 26px 19px 20px;border-top:1px solid var(--line);align-items:start;text-decoration:none;transition:background-color .12s;position:relative}.litrow:first-child{border-top:0}.litrow::after{content:"";position:absolute;left:6px;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--mag);transform:scaleY(0);transition:transform .28s var(--ease)}.litrow:hover::after,.litrow:focus-within::after{transform:scaleY(1)}.litrow:hover{background-color:var(--pink)}.litrow .no{font-family:var(--sora);font-size:11px;color:var(--dim);font-weight:700;margin-top:4px;letter-spacing:.06em}.litrow .jr{font-family:var(--sora);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:700}.litrow .ti{font-family:var(--sora);font-size:16px;font-weight:600;margin-top:4px;color:var(--ink);display:block;letter-spacing:-.018em;line-height:1.3}.litrow .au{font-size:13px;color:var(--dim);margin-top:3px;display:block;font-style:italic}.litrow svg{flex:0 0 auto;color:var(--dim);margin-top:6px}.litfoot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px;padding:0 4px}.litfoot a{font-family:var(--sora);font-size:13px;font-weight:700;color:var(--mag2);text-decoration:none;letter-spacing:.02em}.litfoot a:hover{text-decoration:underline}/* ---- 05 cross-sell chapter ---- */.sec--rel{background:#fff;padding:var(--sp-tight) 0}/* ---- close: white, the real footer is the page's dark terminus ---- */.sec--outro{position:relative;background:#fff;text-align:center;padding:clamp(72px,6.5vw,96px) 0}.outro__k{font-family:var(--sora);font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--mag2);margin:0}.outro__line{margin:14px 0 0;font-family:var(--sora);font-size:13.5px;font-weight:600;letter-spacing:.05em;color:var(--mut)}.outro__line b{color:var(--ink)}.dpdp h2.outro__h{max-width:30ch;margin:22px auto 0;font-size:clamp(22px,2.4vw,30px);line-height:1.24;letter-spacing:-.022em;color:var(--ink)}.outro__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}.outro__cta .p{background:var(--mag);color:#fff;border:0;border-radius:999px;height:56px;padding:0 34px;box-shadow:0 10px 30px -8px rgba(255,42,166,.55);font-family:var(--sora);font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:.34em;text-decoration:none;cursor:pointer;transition:background-color .15s}.outro__cta .p:hover{background:var(--mag2)}.outro__cta .g{border:1px solid var(--line);color:var(--ink);border-radius:999px;height:56px;padding:0 30px;font-family:var(--sora);font-size:14.5px;font-weight:700;display:inline-flex;align-items:center;text-decoration:none;transition:border-color .15s}.outro__cta .g:hover{border-color:var(--ink)}/* ---- sticky ---- */.sticky{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);z-index:50;transform:translateY(110%);transition:transform .22s var(--ease)}.sticky.show{transform:translateY(0)}.sticky .in{max-width:var(--max);margin:0 auto;padding:10px var(--pad,24px);display:flex;align-items:center;gap:14px}.sticky .nm{font-family:var(--sora);font-size:14px;font-weight:700;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sticky .pr{font-family:var(--sora);font-size:16px;font-weight:800;margin-left:auto;white-space:nowrap}.sticky .go{height:44px;padding:0 26px;border:0;border-radius:999px;background:var(--mag);color:#fff;font-family:var(--sora);font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap}.sticky .go:hover{background:var(--mag2)}/* ---- reveals + focus ---- */[data-rv]{opacity:0}.rv-on[data-rv]{opacity:1}[data-rv="rise"]{transform:translate3d(0,16px,0);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0)*70ms)}.rv-on[data-rv="rise"]{transform:none}[data-rv="wipe"]{clip-path:inset(0 0 106% 0);transform:translate3d(0,8px,0);transition:clip-path .7s cubic-bezier(.22,.8,.24,1),transform .7s cubic-bezier(.22,.8,.24,1),opacity .35s linear}.rv-on[data-rv="wipe"]{clip-path:inset(0 0 -14% 0);transform:none}.dpdp a:focus-visible,.dpdp button:focus-visible,.sticky button:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--mag),0 0 0 7px rgba(255,42,166,.22)}.media a:focus-visible,.media button:focus-visible{box-shadow:0 0 0 2px #0b0f17,0 0 0 4px var(--mag),0 0 0 7px rgba(255,42,166,.3)}@media(prefers-reduced-motion:reduce){[data-rv]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}.certthumb,.litrow::after{transition:none!important}}/* ============================================================ 05 - cross-sell carousel (per-product tint + arrow nav) ============================================================ */.xhead{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:26px}.dpdp h2.xh{font-size:clamp(22px,2.2vw,28px);max-width:24ch}.xh i{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.005em}.xsub{color:var(--mut);font-size:15px;margin:12px 0 0;max-width:58ch;line-height:1.65}.xnav{display:flex;gap:9px;flex:0 0 auto;padding-bottom:4px}.xarrow{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease),opacity .15s var(--ease)}.xarrow:hover:not(:disabled){border-color:var(--mag);color:var(--mag2);box-shadow:0 9px 24px -12px rgba(255,42,166,.62)}.xarrow:disabled{opacity:.3;cursor:default}.xarrow svg{width:18px;height:18px}.xrail{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;max-width:var(--max);margin:0 auto;padding:8px var(--pad,24px) 10px;scroll-padding-left:var(--pad,24px);scroll-padding-right:var(--pad,24px);scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}.xrail::-webkit-scrollbar{display:none}.xcard{flex:0 0 clamp(184px,15.4vw,214px);scroll-snap-align:start;position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--e1);text-decoration:none;color:inherit;transition:box-shadow .18s var(--ease),transform .18s var(--ease),border-color .18s var(--ease)}.xcard:hover{box-shadow:var(--e2);transform:translateY(-3px);border-color:var(--rule)}.xmedia{position:relative;aspect-ratio:1/1;display:grid;place-items:center;padding:6px 6px 0;background:radial-gradient(122% 118% at 50% 0,var(--tint,rgba(255,31,147,.24)),#fff 74%)}.xmedia img{width:100%;height:auto;filter:drop-shadow(rgba(11,15,23,.16) 0 14px 19px)}.xsave{position:absolute;top:10px;right:10px;z-index:2;font-family:var(--sora);font-size:9px;font-weight:800;letter-spacing:.09em;background:var(--ink);color:#fff;border-radius:999px;padding:4px 9px}.xcoa{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:.42em;font-family:var(--sora);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mag2);padding:9px 10px 8px;cursor:pointer;background:linear-gradient(to top,rgba(255,255,255,.97) 58%,rgba(255,255,255,0))}.xcoa:hover{color:var(--ink)}.xcoa svg{width:11px;height:11px}.xbody{padding:14px 15px 15px;display:flex;flex-direction:column;flex:1}.xcat{font-family:var(--sora);font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}.xname{font-family:var(--sora);font-size:13.5px;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:7px 0 0;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.xprice{margin:11px 0 0;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}.xprice .fr{font-family:var(--sora);font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}.xprice .was{font-size:12px;color:var(--dim);text-decoration:line-through}.xprice .now{font-family:var(--sora);font-size:17px;font-weight:700;color:var(--mag2);letter-spacing:-.025em}.xadd{margin-top:auto;padding-top:12px}.xadd b{display:flex;align-items:center;justify-content:center;gap:.45em;height:38px;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--sora);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;cursor:pointer;transition:background-color .15s var(--ease),box-shadow .15s var(--ease)}.xcard:hover .xadd b{background:var(--mag);box-shadow:0 10px 26px -11px rgba(255,42,166,.62)}.xhint{max-width:var(--max);margin:0 auto;padding:2px var(--pad,24px) 0;font-size:11.5px;color:var(--dim);font-family:var(--sora);letter-spacing:.04em}@media(max-width:700px){.xhead{flex-direction:column;align-items:flex-start;gap:18px}.xnav{padding-bottom:0}}/* ============================================================ 06 - more ways to save ============================================================ */.sec--mws{background:#fafafa;padding:var(--sp-tight) 0}.mws__k{font-family:var(--sora);font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);text-align:center;margin:0 0 var(--sp-head)}.mws{display:grid;grid-template-columns:1fr;gap:18px}@media(min-width:880px){.mws{grid-template-columns:1fr 1fr;gap:22px}}.mwcard{display:flex;align-items:center;gap:22px;padding:26px;border-radius:22px;border:1px solid var(--line);box-shadow:var(--e1);transition:box-shadow .18s var(--ease),transform .18s var(--ease)}.mwcard:hover{box-shadow:var(--e2);transform:translateY(-2px)}.mwcard--a{background:linear-gradient(134deg,#fbdcee 0%,#fff8fc 82%)}.mwcard--b{background:linear-gradient(134deg,#d5f4e6 0%,#f7fdfa 82%)}.mwbadge{flex:0 0 auto;width:98px;height:98px;border-radius:50%;display:grid;place-content:center;text-align:center;background:#fff;border:1px solid var(--line);box-shadow:var(--e1);line-height:1;white-space:nowrap}.mwbadge i{display:block;font-style:normal;font-family:var(--sora);font-size:7.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}.mwbadge b{display:block;font-family:var(--sora);font-size:30px;font-weight:800;letter-spacing:-.035em;color:var(--mag2);white-space:nowrap}.mwbadge b .pc{display:inline;font-size:.55em;margin-left:1px;letter-spacing:0}.mwbadge>span{display:block;font-family:var(--sora);font-size:8.5px;font-weight:800;letter-spacing:.19em;color:var(--ink);margin-top:5px}.mwbody{min-width:0}.mwbody h3{font-family:var(--sora);font-size:19px;font-weight:700;letter-spacing:-.024em;margin:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap}.mwpill{font-family:var(--sora);font-size:8px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;background:var(--pink);color:var(--mag2);border:1px solid var(--pinkb);border-radius:999px;padding:3px 9px}.mwbody p{color:var(--mut);font-size:14px;line-height:1.62;margin:9px 0 0;max-width:47ch}.mwbtn{margin-top:16px;display:inline-flex;align-items:center;gap:.5em;height:44px;padding:0 23px;border-radius:999px;background:var(--mag);color:#fff;text-decoration:none;font-family:var(--sora);font-size:13px;font-weight:700;box-shadow:0 10px 30px -10px rgba(255,42,166,.55);transition:background-color .15s var(--ease)}.mwbtn:hover{background:var(--mag2)}.mwbtn svg{width:15px;height:15px}@media(max-width:520px){.mwcard{flex-direction:column;align-items:flex-start;gap:18px;padding:22px}}/* ============================================================ bundle tiles - vial thumbnails ============================================================ */.bundles{grid-template-columns:repeat(2,minmax(0,1fr))}@media(min-width:700px){.bundles{grid-template-columns:repeat(5,minmax(0,1fr))}}.bvial{display:flex;justify-content:center;align-items:flex-end;height:34px;margin:0 0 8px;pointer-events:none;max-width:100%;overflow:hidden}.bvial span{display:block;width:17px;height:34px;overflow:hidden;margin-left:-3px}.bvial span:first-child{margin-left:0}.bvial img{width:34px;height:34px;max-width:none;margin-left:-8.5px;filter:drop-shadow(rgba(11,15,23,.2) 0 4px 5px)}.bun[aria-pressed="true"] .bvial img{filter:drop-shadow(rgba(0,0,0,.55) 0 4px 6px)}@media(max-width:430px){.bvial{height:30px}.bvial span{width:14px;height:30px;margin-left:-3px}.bvial img{width:30px;height:30px;margin-left:-8px}}@media(min-width:700px) and (max-width:1180px){.bvial{height:27px}.bvial span{width:12px;height:27px;margin-left:-3px}.bvial img{width:27px;height:27px;margin-left:-7.5px}.bun{padding:12px 4px 10px}.bun .t{font-size:11px}}/* ============================================================ 07 - closing band + newsletter ============================================================ */.sec--close{background:#fff;padding:0}.notice__in{border:1px solid var(--line);border-radius:20px;padding:26px 28px;background:#fff;box-shadow:var(--e1);display:grid;grid-template-columns:auto 1fr;gap:0 20px;align-items:start;text-align:left}.notice__ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:var(--pink);color:var(--mag2);border:1px solid var(--pinkb)}.notice__ic svg{width:19px;height:19px}.notice__k{grid-column:2;font-family:var(--sora);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin:11px 0 0}.notice__b{grid-column:2;margin:10px 0 0;font-size:13px;line-height:1.66;color:var(--mut)}.notice__b b{color:var(--ink)}.notice__b p{margin:0 0 8px}.notice__b p:last-child{margin:0}@media(max-width:560px){.notice__in{grid-template-columns:1fr}.notice__k,.notice__b{grid-column:1}.notice__ic{margin-bottom:6px}}.cband{position:relative;overflow:hidden;text-align:center;margin-top:var(--sp-tight);padding:clamp(76px,7.4vw,112px) 0;background:linear-gradient(104deg,#fff7d6 0%,#eafaea 42%,#fde8f4 100%)}.cband__v{position:absolute;bottom:-5%;pointer-events:none;user-select:none;z-index:0;filter:drop-shadow(rgba(11,15,23,.2) 0 22px 30px)}.cband__v.l1{left:-3%;width:clamp(140px,17vw,256px);transform:rotate(-11deg)}.cband__v.l2{left:10.5%;width:clamp(100px,12vw,186px);bottom:-15%;transform:rotate(8deg);opacity:.84}.cband__v.r1{right:-3%;width:clamp(140px,17vw,256px);transform:rotate(11deg)}.cband__v.r2{right:10.5%;width:clamp(100px,12vw,186px);bottom:-15%;transform:rotate(-8deg);opacity:.84}.cband__in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:0 var(--pad,24px)}.cband__k{font-family:var(--sora);font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--mag2);margin:0 0 20px}.dpdp h2.cband__h{font-size:clamp(27px,3.5vw,46px);line-height:1.2;letter-spacing:-.028em;max-width:19ch;margin:0 auto;text-align:center;color:var(--ink)}.swipe{position:relative;display:inline-block;z-index:0}.swipe::before{content:"";position:absolute;left:-.14em;right:-.14em;top:.2em;bottom:.04em;z-index:-1;border-radius:.16em;transform:rotate(-.8deg);background:rgba(255,42,166,.3)}.cband__sub{margin:20px auto 0;max-width:52ch;font-size:15px;line-height:1.68;color:var(--mut)}.cbtn{margin-top:30px;display:inline-flex;align-items:center;gap:.55em;height:58px;padding:0 34px;border-radius:999px;background:var(--mag);color:#fff;text-decoration:none;font-family:var(--sora);font-size:15px;font-weight:700;box-shadow:0 14px 34px -10px rgba(255,42,166,.6);transition:background-color .15s var(--ease),transform .15s var(--ease)}.cbtn:hover{background:var(--mag2);transform:translateY(-1px)}.cbtn svg{width:17px;height:17px}@media(max-width:760px){.cband__v{display:none}.cband{padding:clamp(58px,9vw,76px) 0}}.sec--nl{background:#fff;padding:var(--sp-tight) 0}.nlcard{background:linear-gradient(134deg,#e7dffd 0%,#f8f4ff 78%);border:1px solid #ddd1fa;border-radius:22px;padding:clamp(26px,3.4vw,42px);display:grid;gap:24px;align-items:center}@media(min-width:880px){.nlcard{grid-template-columns:1.02fr .98fr;gap:38px}}.dpdp h2.nl__h{font-size:clamp(20px,2vw,25px);max-width:22ch}.nl__p{color:var(--mut);font-size:14px;line-height:1.62;margin:10px 0 0;max-width:44ch}.nlform{display:flex;gap:9px;flex-wrap:wrap}.nlform input{flex:1 1 210px;min-width:0;height:52px;border-radius:999px;border:1px solid #e0d6f8;background:#fff;padding:0 21px;font-family:var(--inter);font-size:14.5px;color:var(--ink);outline:none;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}.nlform input:focus{border-color:var(--mag);box-shadow:0 0 0 3px rgba(255,42,166,.16)}.nlform button{height:52px;border:0;border-radius:999px;background:var(--mag);color:#fff;padding:0 28px;font-family:var(--sora);font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 10px 30px -10px rgba(255,42,166,.55);transition:background-color .15s var(--ease)}.nlform button:hover{background:var(--mag2)}.nl__note{margin:12px 0 0;font-size:11.5px;color:var(--dim);line-height:1.55}.nl__note.ok{color:var(--mag2);font-weight:600}/* ===================== v23 · Amino parity pass ===================== *//* --- A. section heading system: grey kicker + Title Case head, italic-serif tail --- */.mh{display:none}.skick{font-family:var(--sora);font-size:10.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}.skick.ok{color:var(--ok)}.dpdp h2{font-family:var(--sora);font-size:clamp(26px,2.6vw,34px);font-weight:700;letter-spacing:-.028em;line-height:1.18;margin:0;max-width:30ch}.dpdp h2 i,.dpdp h2 em{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.006em}.sec__head{margin-bottom:34px}.sec__head.mid{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}.sec__head.mid h2{margin-left:auto;margin-right:auto;max-width:22ch}.sec__head.mid .pv-lede{margin-left:auto;margin-right:auto;text-align:center}/* --- B. proof lives inside one soft rounded panel --- */.sec--proof{background:#fff;padding:var(--sp-tight) 0}.sec--proof.seam::before{content:none}.ppanel{background:#f6f7f9;border-radius:28px;padding:clamp(30px,3.6vw,58px)}/* --- C. bundle tiles: vial LEFT, text RIGHT, light selected state --- */.bun{display:flex;align-items:center;gap:7px;text-align:left;padding:9px 8px;border-radius:12px}.bun[aria-pressed="true"]{background:var(--pink);border-color:var(--mag);color:var(--ink)}.bun[aria-pressed="true"] .s{color:var(--mag2);opacity:1}.bun .bt{display:flex;flex-direction:column;min-width:0;flex:1}.bun .t{font-size:10.5px;line-height:1.18;white-space:normal}.bun .s{font-size:10px;margin-top:2px;min-height:0}.bvial{height:30px;margin:0;flex:0 0 auto}.bvial span{width:15px;height:30px;margin-left:-3px}.bvial img{width:30px;height:30px;margin-left:-7.5px}.bun[aria-pressed="true"] .bvial img{filter:drop-shadow(rgba(11,15,23,.22) 0 4px 5px)}@media(max-width:430px){.bvial{height:30px}.bvial span{width:15px;height:30px}.bvial img{width:30px;height:30px;margin-left:-7.5px}}/* --- D. cross-sell: Amino card scale, ~8-9 visible --- */.dpdp h2.xh{font-size:clamp(26px,2.6vw,34px);max-width:26ch}.xrail{gap:12px}.xcard{flex:0 0 clamp(140px,11.4vw,158px);border-radius:16px}.xmedia{padding:4px 4px 0}.xbody{padding:10px 11px 12px}.xcat{font-size:7.5px;letter-spacing:.14em}.xname{font-size:11.5px;margin:5px 0 0;min-height:2.7em}.xprice{margin:8px 0 0;gap:5px}.xprice .fr{display:none}.xprice .was{font-size:10.5px}.xprice .now{font-size:14px}.xadd{padding-top:9px}.xadd b{height:30px;font-size:9px;letter-spacing:.09em}.xcoa{font-size:7.5px;letter-spacing:.1em;padding:7px 6px 6px;gap:.3em}.xcoa svg{width:9px;height:9px}.xsave{top:7px;right:7px;font-size:8px;padding:3px 7px;background:#9f1239}/* --- E. hero: vial floats small and centred, chips bottom-left --- */.media{padding:34px}.media img.vial{width:min(38%,224px);transform:translateY(-4%);filter:drop-shadow(rgba(11,15,23,.16) 0 22px 30px)}.media::before{content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:52%;aspect-ratio:1/1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,42,166,.085),rgba(255,42,166,0) 70%)}.srail{background-image:none;padding:0;left:22px;right:22px;bottom:20px;gap:7px;align-items:center}.srail .k,.srail .sep,.srail .lab{display:none}.srail b{display:inline-flex;align-items:baseline;gap:.3em;font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;background:#fff;border:1px solid #e6e6ea;border-radius:999px;padding:6px 11px;box-shadow:0 1px 0 rgba(11,15,23,.03)}.srail b::before{font-size:.94em;color:var(--dim);letter-spacing:.13em;font-weight:600}.srail b[data-lot]::before{content:"LOT"}.srail b[data-idl="Report"]::before{content:"REPORT"}.srail b:nth-of-type(2)::before{content:"PURITY"}.srail b[data-date]::before{content:"TESTED"}.srail b em{color:var(--mag2);font-size:.82em}@media(max-width:520px){.srail b{font-size:8.5px;padding:5px 9px}}/* --- F. buttons: black, like Amino --- */.addbtn,.cbtn,.nlform button,.mwbtn,.outro__cta .p,.sticky .go{background:var(--ink);box-shadow:none}.addbtn:hover,.cbtn:hover,.nlform button:hover,.mwbtn:hover,.outro__cta .p:hover,.sticky .go:hover{background:#242832}.xadd b{background:var(--ink)}.xcard:hover .xadd b{background:#242832;box-shadow:none}.cbtn:hover{transform:none}/* --- G. closing band: yellow to mint, two large edge vials, green marker, overlap card --- */.cband{background:linear-gradient(178deg,#fcf8cf 0%,#eefaea 52%,#f3fbf3 100%);padding:clamp(84px,8vw,120px) 0 clamp(120px,11vw,168px);margin-top:clamp(56px,5vw,78px)}.cband__v{bottom:auto;opacity:1}.cband__v.l1{left:-3.5%;top:-6%;width:clamp(150px,13.5vw,208px);transform:rotate(-24deg)}.cband__v.r1{right:-4%;top:34%;width:clamp(150px,14.5vw,222px);transform:rotate(19deg)}.cband__v.l2,.cband__v.r2{display:none}.dpdp h2.cband__h{font-size:clamp(26px,2.9vw,38px);max-width:22ch;line-height:1.26}.swipe::before{left:0;right:0;top:auto;bottom:.02em;height:.3em;border-radius:2px;transform:none;background:linear-gradient(90deg,rgba(74,222,128,.9),rgba(16,185,129,.75));filter:blur(.5px)}.cband__sub{max-width:54ch}.cbtn{margin-top:26px;height:54px;padding:0 30px}.cbtn svg{width:22px}.sec--nl{background:transparent;padding:0 0 var(--sp-tight);margin-top:clamp(-150px,-11vw,-104px);position:relative;z-index:2}.nlcard{background:linear-gradient(120deg,#efe6fb 0%,#f9eef6 62%,#fdf4f6 100%);border-color:#e8dcf6}.nlform{position:relative;background:#fff;border:1px solid #ece4f8;border-radius:999px;padding:5px;gap:0}.nlform input{border:0;background:transparent;height:46px;flex:1 1 auto}.nlform input:focus{box-shadow:none}.nlform button{height:46px;padding:0 26px;flex:0 0 auto}.nl__note{margin-top:10px}@media(max-width:760px){.sec--nl{margin-top:clamp(-96px,-14vw,-70px)}.cband{padding-bottom:clamp(110px,20vw,140px)}}/* --- H. hero: one bordered card round the whole buy column, plate matches its height --- */.pv-hero>div:last-child{border:1px solid var(--line);border-radius:24px;background:#fff;padding:clamp(20px,1.7vw,26px);display:flex;flex-direction:column}.buybox{border:0!important;background:transparent!important;padding:0!important;box-shadow:none!important}@media(min-width:1024px){.pv-hero{align-items:stretch;gap:32px}.media{aspect-ratio:auto;align-self:stretch;height:auto;min-height:0}}/* --- I/K. bundle tiles: cap the vial cluster, even single-line labels --- */.bundles{margin-top:9px;gap:7px;grid-template-columns:repeat(2,minmax(0,1fr))}@media(min-width:700px){.bundles{grid-template-columns:repeat(5,minmax(0,1fr))}}.blbl{margin-bottom:11px}.bun{padding:8px 7px;gap:6px}.bun .badge{top:-11px;left:auto;right:6px;transform:none;font-size:7.5px;padding:3px 7px}.bvial span:nth-child(n+4){display:none}.bun .t{font-size:9.5px;white-space:nowrap;letter-spacing:0}.bun .s{font-size:9px;min-height:11px}@media(min-width:700px) and (max-width:1400px){.bun .t{font-size:8.5px}.bun .s{font-size:8px}.bvial{height:24px}.bvial span{width:11px;height:24px}.bvial img{width:24px;height:24px;margin-left:-6.5px}}/* --- L. shorter and wider, toward Amino's 1:1.19 plate --- */:root{--max:1440px}.sec--hero{padding:22px 0 var(--sp-tight)}.dpdp .sec--hero h1{font-size:clamp(30px,2.9vw,40px);margin:10px 0 0;line-height:1.1}.sec--hero .chips{margin-top:11px}.sec--hero .chip{font-size:10px;padding:5px 11px}.sec--hero .desc{font-size:13px;line-height:1.5;margin:10px 0 0;max-width:none}.sec--hero .stock{margin:9px 0 0;font-size:13px}.buybox{margin-top:12px}.optrow{margin-bottom:9px}.mbtn{padding:9px 15px;min-width:74px;font-size:12.5px}.pricebox .amt{font-size:28px}.pricebox .note{font-size:11px}.batch{padding:9px 12px;margin:0 0 10px}.batch .a{font-size:9px}.batch .b{font-size:16px}.batch .c{font-size:9.5px}.ctas{margin-top:10px;gap:9px}.coabtn,.addbtn{height:46px;font-size:14px}.coabtn{padding:0 22px}.refpill{margin-top:8px;padding:8px 13px;font-size:12px}.bene{margin-top:10px}.brow{padding:7px 11px;gap:9px}.brow .t{font-size:12px}.brow .d{font-size:10.5px}.brow svg{width:15px;height:15px}.paypanel{padding:8px 11px;gap:7px}.paypanel .sec2{font-size:9.5px}.paychip{font-size:8.5px;padding:3px 6px}/* --- M. final polish --- *//* vials break the band edge like Amino's; clip only horizontally so no page scroll */.sec--close{overflow-x:clip}.cband{overflow:visible;padding-bottom:clamp(96px,8.5vw,132px)}.cband__v.l1{top:-16%}.cband__v.r1{top:30%}.sec--nl{margin-top:clamp(-124px,-9vw,-88px)}.swipe::before{height:.26em;filter:blur(1.2px);opacity:.85}/* literature heading fits one line like Amino's */.sec--lit .sec__head h2{max-width:42ch}.sec--spec .sec__head h2,.sec--compare .sec__head h2{max-width:34ch}/* last of the hero height: tighter trust block */.brow{padding:6px 10px}.brow .t{font-size:11.5px;line-height:1.25}.brow .d{font-size:10px}.bene{margin-top:9px}.paypanel{padding:7px 10px}.sec--hero .desc{font-size:12.5px;line-height:1.46}.refpill{margin-top:7px;padding:7px 12px;font-size:11.5px}.ctas{margin-top:9px}/* ================= v23.1 · even alignment across every section ================= Every section's content must begin on the same vertical line as every other. Panels/cards bleed OUTWARD by their own padding so their text lands on it. */.sec--proof .ppanel,.sec--nl .nlcard,.sec--close .notice__in{--pp:clamp(22px,3.2vw,48px);padding:var(--pp)}/* every box shares ONE outer edge with every other section; no panel bleeds past it */.sec--proof .ppanel,.sec--nl .nlcard,.sec--close .notice__in{margin-left:0;margin-right:0}/* headers: left-aligned everywhere, same line as the body content */.sec__head.mid{text-align:left;max-width:none;margin-left:0;margin-right:0}.sec__head.mid h2{margin-left:0;margin-right:0;max-width:34ch}.sec__head.mid .pv-lede{margin-left:0;margin-right:0;text-align:left}.mws__k{text-align:left}/* notice card: no icon column, single left edge (Amino's has no icon either) */.notice__in{grid-template-columns:1fr}.notice__ic{display:none}.notice__k,.notice__b{grid-column:1}.notice__k{margin-top:0}/* one rhythm for the whole page: every section 96/96, so every gap is 192 */.sec--close{padding:var(--sp-tight) 0 0}.cband{margin-top:var(--sp-tight)}/* outro joins the same left edge as every other content section */.sec--outro{text-align:left}.outro__cta{justify-content:flex-start}.dpdp h2.outro__h{margin:20px 0 0;max-width:34ch}.outro__line{text-align:left}/* ================= v23.2 · card alignment, DA branding, tighter rhythm ================= *//* 1. proof cards: equal height, flush top AND bottom */.coa{align-items:stretch}.qc{display:flex;flex-direction:column}.qc .qh{flex:0 0 auto}.qcrow{flex:1 1 auto;align-items:center}/* 2. closing band + newsletter on OUR palette, not Amino's yellow/mint/green */.cband{background:linear-gradient(178deg,#ffe7f4 0%,#fdd8ec 48%,#fff2f9 100%)}.swipe::before{background:linear-gradient(90deg,rgba(255,42,166,.85),rgba(217,26,135,.7))}.nlcard{background:linear-gradient(120deg,#fde0f0 0%,#fdeef7 62%,#fff6fb 100%);border-color:#f8cfe6}.nlform{border-color:#f6d3e8}.nlform input{border-color:transparent}/* 3. closer together: one tighter rhythm everywhere */:root{--sp-tight:clamp(44px,3.8vw,60px);--sp-normal:clamp(44px,3.8vw,60px);--sp-chapter:clamp(44px,3.8vw,60px)}.sec__head{margin-bottom:24px}.sec--hero{padding:18px 0 var(--sp-tight)}.ppanel{padding:clamp(24px,2.6vw,40px)}.cband{padding:clamp(60px,5.4vw,84px) 0 clamp(84px,7vw,110px);margin-top:var(--sp-tight)}.sec--nl{margin-top:clamp(-96px,-7vw,-72px);padding-bottom:var(--sp-tight)}.sec--close{padding-top:var(--sp-tight)}.xrail{padding-top:4px;padding-bottom:6px}.xhint{margin-top:6px}/* ================= v23.3 · OUR branding, un-bunch the hero, one cohesive page ================= *//* --- A. every tint comes off the DA magenta family. No blue/green/olive/lilac. --- */.mwcard--a{background:linear-gradient(134deg,#fbd9ec 0%,#fff7fb 80%)}.mwcard--b{background:linear-gradient(134deg,#f6dcea 0%,#fdf6fa 80%);border-color:#f2d6e6}.mwcard--b .mwbadge b{color:var(--mag2)}.mwpill{background:#fff;border-color:var(--pinkb)}/* --- B. hero: give the buy column its air back --- */.pv-hero>div:last-child{padding:clamp(24px,2.2vw,34px)}.dpdp .sec--hero h1{font-size:clamp(32px,3vw,44px);margin:12px 0 0}.sec--hero .chips{margin-top:14px}.sec--hero .chip{font-size:10.5px;padding:6px 12px}.sec--hero .desc{font-size:13.5px;line-height:1.62;margin:14px 0 0}.sec--hero .stock{margin:13px 0 0}.buybox{margin-top:18px}.optrow{margin-bottom:14px}.mbtn{padding:10px 17px;min-width:78px;font-size:13px}.pricebox .amt{font-size:30px}.pricebox .note{font-size:11.5px}.batch{padding:12px 14px;margin:2px 0 16px}.batch .a{font-size:9.5px}.batch .b{font-size:17px}.batch .c{font-size:10px}.blbl{margin-bottom:13px}.bundles{gap:8px;margin-top:0}.bun{padding:10px 8px;gap:7px}.bun .t{font-size:10px}.bun .s{font-size:9.5px;min-height:12px}.bvial{height:28px}.bvial span{width:14px;height:28px}.bvial img{width:28px;height:28px;margin-left:-7px}@media(min-width:700px) and (max-width:1400px){.bun .t{font-size:9px}.bun .s{font-size:8.5px}.bvial{height:25px}.bvial span{width:12px;height:25px}.bvial img{width:25px;height:25px;margin-left:-6.5px}}.ctas{margin-top:15px;gap:10px}.coabtn,.addbtn{height:52px;font-size:14.5px}.coabtn{padding:0 24px}.refpill{margin-top:10px;padding:10px 15px;font-size:12.5px}.bene{margin-top:14px}.brow{padding:10px 13px;gap:10px}.brow .t{font-size:12.5px}.brow .d{font-size:10.5px}.brow svg{width:16px;height:16px}.paypanel{padding:10px 13px}.paypanel .sec2{font-size:10px}.paychip{font-size:9px;padding:3px 7px}@media(min-width:1024px){.pv-hero{gap:34px}}/* ================= v23.4 · DA closing moment, Amino rhythm, roomier buy box ================= *//* --- A. spacing measured off Amino's live PDP: ~72px between blocks, not 192 --- */:root{--sp-tight:clamp(30px,2.7vw,40px);--sp-normal:clamp(30px,2.7vw,40px);--sp-chapter:clamp(30px,2.7vw,40px)}.sec__head{margin-bottom:20px}.mws__k{margin-bottom:14px}.ppanel{padding:clamp(26px,3vw,46px)}/* --- B. promo row: Amino's compact one-liner (badge | copy | button), DA colours --- */.mws{gap:16px}.mwcard{gap:18px;padding:16px 18px;border-radius:18px;align-items:center}.mwbadge{width:56px;height:56px}.mwbadge i{font-size:6.5px;letter-spacing:.14em;margin-bottom:1px}.mwbadge b{font-size:19px}.mwbadge span{font-size:6.5px;letter-spacing:.16em;margin-top:2px}.mwbody{flex:1;min-width:0;display:flex;flex-direction:column}.mwbody h3{font-size:16px;gap:8px}.mwbody p{font-size:12.5px;line-height:1.45;margin:4px 0 0;max-width:46ch}.mwbtn{margin-top:0;flex:0 0 auto;align-self:center;height:40px;padding:0 20px;font-size:12.5px}.mwcard{display:flex}.mwcard .mwbtn{margin-left:auto}@media(max-width:640px){.mwcard{flex-wrap:wrap}.mwbtn{margin-left:0;margin-top:10px}}/* --- C. buy box: real breathing room (Noah, twice: "not so bunched") --- */.pv-hero>div:last-child{padding:clamp(26px,2.4vw,38px)}.sec--hero .desc{margin:16px 0 0}.sec--hero .stock{margin:15px 0 0}.buybox{margin-top:22px}.optrow{margin-bottom:18px}.batch{padding:14px 16px;margin:4px 0 20px}.blbl{margin-bottom:14px}.bundles{gap:9px}.bun{padding:11px 8px}.ctas{margin-top:20px}.refpill{margin-top:12px;padding:11px 15px}.bene{margin-top:18px}.brow{padding:12px 14px}.paypanel{padding:12px 14px}/* --- D. the close is OURS now: no pastel band, no floating vials, no highlighter --- */.cband{background:#fff;overflow:visible;padding:var(--sp-tight) 0 0;margin-top:0;position:relative}.cband::before{content:"";position:absolute;left:50%;top:-6%;transform:translateX(-50%);width:min(920px,88%);height:120%;pointer-events:none;z-index:0;background:radial-gradient(closest-side,rgba(255,42,166,.13),rgba(255,42,166,0) 72%)}.cband__v{display:none}.cband__k{position:relative;display:inline-flex;align-items:center;gap:.5em;color:var(--mag2);margin-bottom:16px}.cband__k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mag)}.dpdp h2.cband__h{font-size:clamp(28px,3.1vw,42px);max-width:19ch;line-height:1.2}.cband__h em{font-style:normal;color:var(--mag2)}.cband__sub{margin:16px auto 0;max-width:50ch;font-size:14.5px}.crail{position:relative;z-index:1;display:flex;justify-content:center;flex-wrap:wrap;gap:0 clamp(26px,3.6vw,56px);margin:26px auto 0;padding-top:22px;max-width:760px;border-top:1px solid var(--line)}.crail div{text-align:center;padding:0 4px}.crail b{display:block;font-family:var(--sora);font-size:clamp(21px,2.1vw,27px);font-weight:800;letter-spacing:-.03em;color:var(--mag2);line-height:1.1}.crail b u{text-decoration:none;font-size:.52em;font-weight:700;color:var(--dim);margin-left:.1em}.crail span{display:block;margin-top:7px;font-family:var(--sora);font-size:9px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--dim)}.cbtns{position:relative;z-index:1;display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:26px}.cbtn{margin-top:0}.cbtn2{display:inline-flex;align-items:center;height:52px;padding:0 26px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font-family:var(--sora);font-size:14px;font-weight:700;transition:border-color .15s var(--ease)}.cbtn2:hover{border-color:var(--ink)}/* --- E. newsletter: DA white card, not a tinted panel --- */.sec--nl{margin-top:0;padding:var(--sp-tight) 0}.nlcard{background:#fff;border:1px solid var(--line);box-shadow:var(--e1);padding:clamp(22px,2.4vw,34px);border-radius:20px}.nlform{background:var(--soft);border-color:var(--line)}.nl__note{margin-top:9px}/* outro was on a hardcoded clamp, not the rhythm token */.sec--outro{padding:var(--sp-tight) 0}/* --- v23.5 · close polish --- *//* the magenta word must be sans, not the serif-italic used for section-head tails */.dpdp h2.cband__h em{font-family:var(--sora);font-style:normal;font-weight:700;color:var(--mag2);letter-spacing:-.028em}/* glow was reading as a visible oval; widen and soften it */.cband::before{width:min(1180px,104%);height:150%;top:-22%;background:radial-gradient(closest-side,rgba(255,42,166,.09),rgba(255,42,166,0) 78%)}.cband__in{padding-top:6px}/* ================= v23.6 · ONE sizing scale, ONE palette ================= *//* Five stacked edits left 14 different radii and 14 different padding clamps. Everything below is forced onto a single scale. */:root{--r-xl:24px;--r-lg:20px;--r-md:14px;--r-sm:8px;--r-pill:999px;--pad-sec:clamp(30px,2.7vw,40px);--pad-card:clamp(24px,2.4vw,34px);--pad-inner:14px 16px;/* the affirmative accent is OUR magenta, not a green */--ok:#d91a87;--ok-tint:#fdf2f8}/* --- radii on the scale --- */.media,.pv-hero>div:last-child,.ppanel{border-radius:var(--r-xl)}.cert,.qc,.lots,.cmp,.cicard,.lit,.notice__in,.nlcard,.mwcard,.xcard,.buybox{border-radius:var(--r-lg)}.batch,.bene,.bun,.temp{border-radius:var(--r-md)}.codechip,.paychip,.certthumb,.batch .fl,.cert .sq,.temp .badge{border-radius:var(--r-sm)}/* --- padding on the scale --- */.ppanel,.nlcard,.notice__in,.pv-hero>div:last-child{padding:var(--pad-card)}.cert{padding:0 var(--pad-card) var(--pad-card)}.qc{padding:0 var(--pad-card)}.batch,.brow,.paypanel,.refpill{padding:var(--pad-inner)}.mwcard{padding:16px 18px}/* --- section rhythm from one token --- */.dpdp>.sec{padding-top:var(--pad-sec);padding-bottom:var(--pad-sec)}.sec--hero{padding-top:18px}.cband{padding:var(--pad-sec) 0 0}.sec--nl{padding:var(--pad-sec) 0}/* --- every green becomes DA magenta --- */.skick.ok{color:var(--mag2)}.cert .passchip,.okchip{background:var(--pink);color:var(--mag2);border-color:var(--pinkb)}.xsave{background:var(--ink)}.swipe::before{background:linear-gradient(90deg,rgba(255,42,166,.85),rgba(217,26,135,.7))}/* ================= v23.7 · audit fixes (23 adversarially-verified findings) ================= *//* 1. the last green that actually paints: the in-stock dot's halo */.stock i{box-shadow:0 0 0 3px rgba(255,42,166,.14)}/* 2. hero: kill the stray 12px lead-in, and win the specificity fight for the hero's own padding */.pv-hero{padding-top:0}.dpdp>.sec--hero{padding-top:18px}/* NOTE: any per-section padding exception MUST be written .dpdp>.sec--x — a bare .sec--x is (0,1,0) and loses to .dpdp>.sec. That trap silently ate four earlier attempts. *//* 2b. one vertical scale for the buy column: 12 / 16 / 24 (flex column, margins do NOT collapse) */.sec--hero .pv-kicker{margin:0}.dpdp .sec--hero h1{margin:12px 0 0;line-height:1.1}.sec--hero .chips{margin:16px 0 0}.sec--hero .desc{margin:16px 0 0}.sec--hero .stock{margin:16px 0 0}.buybox{margin-top:24px}.optrow{margin-bottom:16px}.batch{margin:0 0 24px}.blbl{margin-bottom:12px}.ctas{margin-top:24px}.refpill{margin-top:12px}.bene{margin-top:24px}/* 3. panels: --pad-card was INERT for 3 of 4 selectors, defeated by a (0,2,0) rule. Match that specificity and land later in source order so the token actually applies. */:root{--pad-buy:clamp(26px,2.4vw,38px)}.dpdp .ppanel,.dpdp .nlcard,.dpdp .notice__in,.dpdp .cicard{padding:var(--pad-card)}.dpdp .pv-hero>div:last-child{padding:var(--pad-buy)}.dpdp .batch,.dpdp .brow,.dpdp .paypanel,.dpdp .refpill{padding:var(--pad-inner)}/* 4. micro-type floor: nothing below 9.5px. Seven selectors were rendering 6.5-8px caps with heavy tracking, i.e. ~5px glyphs. Width is bought back with tighter tracking. */.mwbadge{width:68px;height:68px}.mwbadge i{font-size:9.5px;letter-spacing:.08em;margin-bottom:2px}.mwbadge b{font-size:22px}.mwbadge>span{font-size:9.5px;letter-spacing:.06em;margin-top:2px}.mwpill{font-size:9.5px;letter-spacing:.10em}.bun .badge{font-size:9.5px;letter-spacing:.03em;padding:3px 7px}.xcard{flex:0 0 clamp(160px,12.6vw,176px)}.xcat{font-size:9.5px;letter-spacing:.08em;min-height:2.4em}.xcoa{font-size:9.5px;letter-spacing:.06em;padding:8px 6px 7px}.xcoa svg{width:11px;height:11px}.xsave{font-size:9.5px;letter-spacing:.05em;padding:4px 8px}/* 5. the closing h2 was outsizing the h1 across the whole 1030-1354px band (3.1vw beat 3vw) */.dpdp h2.cband__h{font-size:clamp(26px,2.7vw,38px)}/* 6. cross-sell rail bled 32px past the right content edge while leaving a 32px left gutter. A scroll container clips at its padding box, so the horizontal padding has to go. */.xrail{max-width:calc(var(--max) - 2*var(--pad,32px));width:calc(100% - 2*var(--pad,32px));margin:0 auto;padding-left:0;padding-right:0;scroll-padding-left:0;scroll-padding-right:0}/* 7. one eyebrow spec at four call sites: 10px / 700 / .2em */.skick{font-size:10px;letter-spacing:.2em}.mws__k{letter-spacing:.2em}.notice__k{font-weight:700}.cband__k{font-weight:700;letter-spacing:.2em}/* 7d. b{font-weight:bolder} was mapping 600 -> 900, the only 900 on the page, and Sora 900 is not even in the Google Fonts payload. 800 renders byte-identical. */.cert .cl b{font-weight:800}/* 7e. .xhint asked for Sora 400, which the page never loads; declare the weight it actually gets */.xhint{font-weight:500}/* 8. last size duplicates: same job, sizes 0.5px apart. .paychip alone carried three competing declarations (9.5 / 8.5 / 9) with the last one winning by accident. */.paychip{font-size:9.5px}.lot .tag{font-size:9.5px}.qcrow .nm,.lot .id,.xsub{font-size:15.5px}.sec--hero .desc{font-size:14px}/* ================= v23.9 · global scale-down ================= *//* Every value below is a proportional reduction of the value above it, floored so that no running text drops under 13px and no tap target under 40px. */:root{--pad-sec:clamp(20px,1.8vw,26px);--pad-card:clamp(16px,1.6vw,22px);--pad-buy:clamp(18px,1.7vw,26px);--pad-inner:9px 12px}.sec__head{margin-bottom:14px}.dpdp>.sec--hero{padding-top:12px}/* type: ~-22%, h1 still outranks the closing h2 at every width */.dpdp .sec--hero h1{font-size:clamp(26px,2.3vw,34px)}.dpdp h2,.dpdp h2.xh{font-size:clamp(20px,1.9vw,26px)}.dpdp h2.cband__h{font-size:clamp(21px,2vw,28px)}.fig{font-size:clamp(32px,3.2vw,44px)}.lotn{font-size:clamp(20px,1.9vw,27px);margin:6px 0 10px}.bgrid .v{font-size:17px}.litrow .ti{font-size:14px}.batches .bh h3{font-size:16px}.nl__h{font-size:19px}.crail b{font-size:clamp(18px,1.7vw,22px)}.mwbadge b{font-size:18px}.pricebox .amt{font-size:25px}.qcv{font-size:16px}.cert .nm{font-size:14px}.qcrow .nm,.lot .id,.xsub{font-size:14px}.cmprow{font-size:13px}.cikv .r{font-size:13.5px}.temp .t{font-size:13.5px}.pv-lede,.xsub,.cband__sub{font-size:13.5px}/* rows: the real height. 8 QC rows + 10 compare rows + 6 literature rows + 5 lot cards. */.qcrow{padding:8px 0}.litrow{padding:12px 18px 12px 14px}.cmprow>div{padding:9px 0}.cmprow.h>div{padding:10px 0}.lot{padding:14px 12px}.lot .tag{margin-bottom:8px}.certmetarow{padding-top:14px;margin-bottom:16px}.bgrid>div{padding:10px 0}.bgrid{margin-bottom:14px}.cikv .r{padding:8px 0}.temp{padding:10px 12px;margin-bottom:7px}.lrow{padding:6px 0}.batches{margin-top:28px}.batches .bh{margin-bottom:12px}.litfoot{margin-top:12px}.crail{margin:18px auto 0;padding-top:16px}.cbtns{margin-top:18px}.cband__sub{margin:12px auto 0}/* buy column scale 12/16/24 -> 8/12/16 */.dpdp .sec--hero h1{margin:8px 0 0}.sec--hero .chips{margin:12px 0 0}.sec--hero .desc{margin:12px 0 0}.sec--hero .stock{margin:12px 0 0}.buybox{margin-top:16px}.optrow{margin-bottom:12px}.batch{margin:0 0 16px}.blbl{margin-bottom:9px}.ctas{margin-top:16px}.refpill{margin-top:9px}.bene{margin-top:16px}/* control heights: 40px floor for anything tappable */.coabtn,.addbtn{height:44px;font-size:13.5px}.cbtn,.cbtn2{height:44px;font-size:13.5px}.nlform{padding:4px}.nlform input,.nlform button{height:40px}.mbtn{padding:8px 14px;min-width:70px}.bun{padding:8px 7px}.xcard{flex:0 0 clamp(140px,11.2vw,152px)}.mwbadge{width:60px;height:60px}.xarrow{width:40px;height:40px}.media{padding:26px}/* ================= v23.10 · second pass, content sections only ================= *//* The buy column is deliberately NOT touched again here — it was called "bunched" twice. *//* proof: the tallest block on the page */.cert .lab{padding:16px 0 12px;margin-bottom:12px}.cert .sq{width:34px;height:34px}.fig{font-size:clamp(28px,2.7vw,36px)}.certmeta{gap:6px}.qc .qh{padding:14px 0 10px}.qcrow{padding:6px 0}.qcrow .mt{margin-top:3px}.batches{margin-top:18px}.lot{padding:10px 10px}.certthumb img{width:clamp(88px,8.5vw,116px)}.wpill{height:42px}/* literature */.litrow{padding:9px 16px 9px 12px}.litrow .ti{margin-top:2px}.litrow .au{margin-top:2px}/* compare + spec */.cmprow>div{padding:7px 0}.cmprow.h>div{padding:8px 0}.cikv .r{padding:6px 0}.temp{padding:8px 11px;margin-bottom:6px}/* cross-sell */.xmedia{padding:3px 3px 0}.xbody{padding:8px 9px 10px}.xname{margin:4px 0 0;min-height:2.4em}.xprice{margin:6px 0 0}.xadd{padding-top:7px}.xadd b{height:28px}.xhint{padding-top:0}/* close + newsletter */.crail{margin:14px auto 0;padding-top:13px}.crail span{margin-top:5px}.cbtns{margin-top:15px}.notice__b{margin-top:7px}.notice__b p{margin:0 0 5px}/* ================= v23.11 · no cursive, catalog art, richer buy column ================= *//* 1. every italic serif tail becomes the same bold Sora as the rest of the heading */.dpdp h2 i,.dpdp h2 em,.dpdp h2.xh i,.xh i,.dpdp h2.cband__h em{font-family:var(--sora);font-style:normal;font-weight:700;letter-spacing:-.028em}.dpdp h2 i,.dpdp h2.xh i,.xh i{color:inherit}.dpdp h2.cband__h em{color:var(--mag2)}/* 2. product art = the live catalog recipe, verbatim from .scard__media on /shop/ */.xmedia{background:radial-gradient(120% 120% at 50% 0,rgba(255,31,147,.12),#fff 64%);padding:14px;display:flex;align-items:center;justify-content:center}.xmedia img{max-width:80%;max-height:80%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(rgba(11,15,23,.14) 0 10px 14px)}/* 3. hero plate: same catalog ground, bigger vial */.media{background:radial-gradient(120% 120% at 50% 0,rgba(255,31,147,.12),#fff 64%);border:1px solid #f2e2ec;padding:20px}.media::before{display:none}.media img.vial{width:min(58%,342px);transform:none;filter:drop-shadow(rgba(11,15,23,.17) 0 26px 34px)}/* 4a. star rating, off the live PDP's .pdp__rating */.pv-rate{display:flex;align-items:center;gap:7px;margin:12px 0 0;font-size:12.5px;color:var(--mut)}.pv-rate .stars{color:var(--mag);letter-spacing:.06em;font-size:13px}.pv-rate b{color:var(--ink);font-family:var(--sora);font-weight:700;font-size:12.5px}.pv-rate .rt{color:var(--dim)}/* 4b. loyalty points, per-variant values published by the live PDP */.stock .pts{margin-left:auto;font-family:var(--sora);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--mag2);background:var(--pink);border:1px solid var(--pinkb);border-radius:999px;padding:4px 10px}.stock .pts b{font-weight:800}.stock{display:flex;align-items:center;gap:8px}/* 4c. per-unit price in every bundle tile. Amino shows a bare percentage; this shows what a vial actually costs at that tier, which is the number a buyer needs. */.bun .pu{display:block;margin-top:2px;font-family:var(--sora);font-size:9.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}.bun[aria-pressed="true"] .pu{color:var(--ink)}@media(min-width:700px) and (max-width:1400px){.bun .pu{font-size:9px}}/* the tiles gained a third line, so the absolutely-positioned badges now collided with it */.bundles{margin-top:13px}.bun{padding:13px 7px 9px}.bun .badge{top:-9px}/* ================= v23.12 · the old PDP "shop together" card, verbatim ================= *//* Lifted from the theme's own .pcard rules on the live PDP: pink gradient plate with the vial bottom-aligned and floating, magenta category, ink price, black pill with a pink halo. */.xcard{flex:0 0 clamp(178px,14vw,198px);border:1px solid var(--line);overflow:hidden}.xmedia{aspect-ratio:1;padding:20px 20px 16px;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(75% 65% at 50% 30%,rgba(255,255,255,.55) 0%,transparent 75%),linear-gradient(180deg,#FFF0F8 0%,#FFD9EC 100%);position:relative;overflow:hidden}.xmedia img{position:relative;z-index:1;max-width:86%;max-height:96%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.20));animation:vialFloat 6s ease-in-out infinite;transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .4s ease}@keyframes vialFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}.xcard:hover .xmedia img{transform:translateY(-14px) scale(1.04);filter:drop-shadow(0 28px 40px rgba(255,42,166,.30)) drop-shadow(0 18px 30px rgba(0,0,0,.18));animation-play-state:paused}@media(prefers-reduced-motion:reduce){.xmedia img{animation:none}}.xbody{padding:16px 15px 18px;display:flex;flex-direction:column;gap:5px;background:#fff}.xcat{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--mag);min-height:0}.xname{font-family:var(--sora);font-weight:800;font-size:14.5px;letter-spacing:-.015em;line-height:1.25;color:var(--ink);margin:2px 0 0;min-height:2.5em}.xprice{margin:2px 0 0;align-items:baseline;gap:6px}.xprice .now{font-family:var(--sora);font-weight:900;font-size:17px;color:var(--ink);letter-spacing:-.01em}.xprice .was{font-size:12px}.xadd{margin-top:auto;padding-top:12px}.xadd b{padding:11px 14px;height:auto;border-radius:999px;background:var(--ink);color:#fff;border:1px solid var(--ink);font-weight:800;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 0 10px 1px rgba(255,42,166,.55),0 3px 10px rgba(255,42,166,.25)}.xcard:hover .xadd b{background:var(--mag);border-color:var(--mag);box-shadow:0 0 14px 2px rgba(255,42,166,.65),0 4px 14px rgba(255,42,166,.35)}.xcoa{background:linear-gradient(to top,rgba(255,240,248,.96) 58%,rgba(255,240,248,0))}.xsave{background:var(--ink);box-shadow:0 2px 8px rgba(11,15,23,.25)}/* ================= v23.13 · the closing block ================= *//* The radial glow was reading as a stray pink cloud behind the headline. Replaced with a clean full-bleed pink wash that starts at a seam, so it looks intentional. */.cband::before{display:none}.cband{background:linear-gradient(180deg,#fff 0%,#fdf2f8 42%,#fff9fc 100%);padding:var(--pad-sec) 0 calc(var(--pad-sec) + 8px);position:relative}.cband::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(255,42,166,0),rgba(255,42,166,.55) 24%,rgba(255,42,166,.55) 76%,rgba(255,42,166,0))}.crail{border-top-color:var(--pinkb)}/* newsletter: heading and form on one baseline, tighter card */.sec--nl{padding-top:var(--pad-sec)}.nlcard{align-items:center;gap:24px}.nl__h{margin:0}.nl__p{margin:6px 0 0}.nl__note{margin-top:8px;font-size:11px}/* ================= v23.14 · the old "Commonly Researched With" section ================= *//* Markup is the live PDP's own drr-section; the theme's styles.css supplies .pcard etc. Only alignment to our content column is added here. */.sec--rel{background:#fff;padding:var(--pad-sec) 0}.sec--rel .drr-section{max-width:var(--max) !important;margin:0 auto!important;padding:0 var(--pad,32px) !important;border-top:0!important;background:transparent!important}.sec--rel .drr-wrap{padding:0!important;max-width:none!important;margin:0!important}.sec--rel .drr-head{margin-bottom:20px!important}.sec--rel .drr-head__title{font-family:var(--sora) !important;font-size:clamp(20px,1.9vw,26px) !important;font-weight:700!important;letter-spacing:-.028em!important;text-transform:none!important;color:var(--ink) !important}.sec--rel .drr-head__sub{color:var(--mut) !important;font-size:13.5px!important;margin-top:6px!important}/* Noah: no floating vials. The theme animates .pcard__media img by default. */.pcard__media img,.sec--rel .pcard__media img{animation:none!important}.pcard:hover .pcard__media img,.sec--rel .pcard:hover .pcard__media img{transform:translateY(-6px) scale(1.02) !important;animation:none!important}/* ================= v23.16 · tighten the Commonly Researched With cards ================= *//* The theme's .pcard__media is a full square, so at this column width the plate was ~280px tall with a small vial floating in a lot of empty pink, and the card ran ~500px. Shorter plate, bigger vial, tighter body. Structure and colours are untouched. */.sec--rel .pcard__media{aspect-ratio:auto;height:clamp(168px,13.5vw,200px);padding:14px 16px 10px}.sec--rel .pcard__media img{max-width:none;max-height:100%;width:auto;height:100%;filter:drop-shadow(0 14px 22px rgba(0,0,0,.18))}.sec--rel .pcard__body{padding:15px 16px 17px;gap:4px}.sec--rel .pcard__cat{font-size:9.5px;letter-spacing:.2em}.sec--rel .pcard__name{font-size:14.5px;line-height:1.22}.sec--rel .pcard__why{font-size:12.5px;line-height:1.5;color:var(--mut);margin:4px 0 0}.sec--rel .pcard__price{font-size:16.5px;margin-top:10px}.sec--rel .pcard__cta{margin-top:10px;padding:10px 14px;font-size:10.5px}.sec--rel .drr-grid{align-items:stretch}/* ================= v23.17 · bundle tiles at mid widths ================= *//* Badges were clearing the tile label by 1px, which reads as touching. Give them real headroom and size the vial thumbs to the tile rather than to the breakpoint. */.bundles{margin-top:17px;gap:8px}.bun{padding:16px 8px 10px}.bun .badge{top:-10px;font-size:9px;padding:3px 8px;letter-spacing:.04em}.bvial{height:30px;margin:0 0 7px}.bvial span{width:14px;height:30px;margin-left:-3px}.bvial img{width:30px;height:30px;margin-left:-8px}.bun .t{font-size:10.5px}.bun .s{font-size:10px;min-height:12px}.bun .pu{font-size:10px;margin-top:3px}@media(min-width:700px) and (max-width:1400px){.bun{padding:15px 6px 9px}.bun .t{font-size:9.5px}.bun .s{font-size:9px}.bun .pu{font-size:9px}.bvial{height:26px}.bvial span{width:12px;height:26px}.bvial img{width:26px;height:26px;margin-left:-7px}}/* ================= v23.18 · bundle vials big enough to read ================= *//* They were 26px tall AND window-cropped to a 14px sliver, sitting beside the text in a ~106px tile. Stack the tile instead so the vials get the full tile width. */.bun{flex-direction:column;align-items:stretch;text-align:center;gap:0;padding:15px 7px 11px}.bun .bt{align-items:center}.bvial{height:42px;margin:0 0 9px;justify-content:center}.bvial span{width:20px;height:42px;margin-left:-4px}.bvial img{width:42px;height:42px;margin-left:-11px}.bun .t{font-size:10.5px;white-space:nowrap}.bun .s{font-size:9.5px;min-height:12px}.bun .pu{font-size:9.5px;margin-top:2px}@media(min-width:700px) and (max-width:1400px){.bun{padding:14px 5px 10px}.bvial{height:36px;margin-bottom:8px}.bvial span{width:17px;height:36px;margin-left:-3px}.bvial img{width:36px;height:36px;margin-left:-9.5px}.bun .t{font-size:9.5px}.bun .s{font-size:9px}.bun .pu{font-size:9px}}@media(max-width:699px){.bvial{height:44px}.bvial span{width:21px;height:44px;margin-left:-4px}.bvial img{width:44px;height:44px;margin-left:-11.5px}}/* ================= v23.19 · align the four related cards ================= *//* Names wrap to different line counts, so the why text, price and CTA all started at different heights across the row. Reserve the space so every card lines up. */.sec--rel .pcard__name{min-height:2.44em;display:flex;align-items:flex-start}.sec--rel .pcard__why{min-height:3em}/* ================= v23.20 · the closing block becomes a card ================= *//* A full-bleed wash has no edges, so the content read as floating in empty space. DA's house language is white cards with a hairline and a soft shadow. Make it one. */.cband{background:#fff;padding:var(--pad-sec) 0;margin-top:0}.cband::after{content:none}.cband__in{max-width:calc(var(--max) - 2 * var(--pad,32px));margin:0 auto;padding:clamp(26px,3vw,42px);background:linear-gradient(158deg,#fff 0%,#fdf2f8 62%,#fce8f3 100%);border:1px solid var(--pinkb);border-radius:var(--r-xl);box-shadow:var(--e2)}.cband__k{margin-bottom:10px}.dpdp h2.cband__h{max-width:24ch;margin:0 auto}.cband__sub{margin:10px auto 0;max-width:52ch}/* stat rail: three defined cells with hairline dividers, not floating numbers */.crail{margin:20px auto 0;padding:16px 0 0;max-width:none;border-top:1px solid var(--pinkb);display:grid;grid-template-columns:repeat(3,1fr);gap:0}.crail div{padding:2px 10px;border-left:1px solid var(--pinkb)}.crail div:first-child{border-left:0}.crail b{font-size:clamp(20px,2vw,26px)}.crail span{margin-top:5px;font-size:8.5px}.cbtns{margin-top:20px}@media(max-width:560px){.crail{grid-template-columns:1fr;gap:12px}.crail div{border-left:0;border-top:1px solid var(--pinkb);padding-top:12px}.crail div:first-child{border-top:0;padding-top:2px}}/* ================= v23.21 · vector vial glyph in the bundle tiles ================= *//* A 300px photo at 42px was always going to be soft, and browser zoom made it worse. This is a vector, so it is sharp at any size and takes the brand colour. */.bvial{height:auto;margin:0 0 9px;display:flex;justify-content:center;align-items:flex-end;gap:3px;overflow:visible;max-width:none}.bvial .vg{width:15px;height:32px;display:block;color:var(--mag2);flex:0 0 auto}.bun[aria-pressed="true"] .bvial .vg{color:var(--mag)}@media(min-width:700px) and (max-width:1400px){.bvial{gap:2px;margin-bottom:8px}.bvial .vg{width:12px;height:26px}}@media(max-width:699px){.bvial .vg{width:16px;height:34px}}/* ================= v23.22 · typographic bundle tiles ================= *//* No imagery. Three lines of real information: quantity, discount, unit price. */.bun{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0;padding:14px 8px 13px;min-height:0}.bun .bt{align-items:center;flex:0 0 auto}.bun .t{font-family:var(--sora);font-size:12px;font-weight:800;letter-spacing:.01em;white-space:nowrap;color:inherit}.bun .s{font-size:11px;font-weight:700;margin-top:5px;min-height:13px;color:var(--mag2)}.bun .pu{font-size:11px;font-weight:700;margin-top:5px;color:var(--ink);opacity:.72}.bun[aria-pressed="true"] .pu{opacity:.85}.bun .badge{top:-9px}@media(min-width:700px) and (max-width:1400px){.bun{padding:12px 5px 11px}.bun .t{font-size:10.5px}.bun .s{font-size:9.5px;margin-top:4px}.bun .pu{font-size:9.5px;margin-top:4px}}@media(max-width:699px){.bun{padding:14px 10px 13px}.bun .t{font-size:12.5px}.bun .s,.bun .pu{font-size:11.5px}}/* ================= v23.23 ================= *//* Noah: no dot on the closing kicker. */.cband__k::before{content:none}.cband__k{gap:0}/* ================= v23.24 · audit fixes (31 verified findings) ================= *//* contrast: --dim failed AA on every ground it renders on (3.62:1 on white, 100 text runs) */:root{--dim:#6f6979}/* magenta pass: --mag2 on --pink was 4.32:1 across 18 pill runs; white on --mag was 3.42:1 */ :root{--mag2:#d01882;--ok:#d01882}.bun .badge{background:var(--mag2);color:#fff}.cmprow.h>div:nth-child(2){background:var(--mag2);color:#fff}.batch .a{opacity:1;color:var(--mag2)}.pv-rate .stars{color:var(--mag2)}/* unit suffixes rendered 6.5px at 2.01:1 - a smudge. Floor the size, stop --dim reaching into the , and un-dim the one on the certificate figure. */.u{font-size:max(9px,.52em)}.lrow b .u{color:var(--ink)}.bgrid .v.gr .u{opacity:1}/* the certificate button was the only magenta-filled CTA on a page of black ones */.wpill{background:var(--ink)}.wpill:hover{background:#242832}/* rhythm: every block gap is 52px, but notice->close was 26 and close->newsletter 78 */.cband{padding:calc(var(--pad-sec) * 2) 0 0}/* the two proof cards had headers 14px apart, one with a 2px ink rule and one a 1px hairline */.qc .qh{padding:16px 0 12px;border-bottom:1px solid var(--line)}.cert .lab,.qc .qh{min-height:70px}.okchip{font-size:10px;padding:6px 14px}/* the QC name column collapsed to 0px below 560px (142+92+36 hard against a 272px card) */@media(max-width:560px){.qcrow{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}.qcrow>div:nth-child(2){grid-column:2}.vd{grid-column:2;justify-self:end;margin-top:2px}}/* the BULK tile was stranded alone on a third row at every phone width */@media(max-width:699.98px){.bundles>.bun:nth-child(5){grid-column:1/-1}}/* the promo badge sat dead-centre at phone widths while its text was left-aligned */@media(max-width:520px){.mwcard{align-items:flex-start}}/* focus: the newsletter input had literally no indicator, and four role="button" spans were falling back to Chrome's blue outline - the only blue on the page */.nlform:has(input:focus-visible){border-color:var(--mag);box-shadow:0 0 0 3px rgba(255,42,166,.22)}.dpdp [role="button"]:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--mag),0 0 0 7px rgba(255,42,166,.22)}/* sticky bar: keep the selected mass visible on phones, stop it covering the footer copyright, and take it out of the tab order while it is off-screen */.sticky .nm{display:flex;align-items:baseline;gap:.32em;min-width:0}.sticky .nm .full{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sticky .nm #stmass{flex:0 0 auto;white-space:nowrap}.sticky{visibility:hidden;pointer-events:none;transition:transform .22s var(--ease),visibility 0s linear .22s}.sticky.show{visibility:visible;pointer-events:auto;transition:transform .22s var(--ease)}.foot{padding-bottom:calc(32px + 65px + env(safe-area-inset-bottom))}/* ================= v23.31 · A. reveal must never strand content ================= The page hides every [data-rv] element at opacity:0 and waits for an IntersectionObserver to add .rv-on. On this site IntersectionObserver never fires - a fresh observer watching an element sitting at rect -505..164 inside a 1208px viewport received no callback at all. Only the 600ms "already above the fold" fallback ever ran, so everything below the first screen stayed invisible forever: 4 section headings, both COA cards, the compare table, the citation list, all 5 lot cards, the promo pair, the spec pair, the disclaimer and the newsletter card. Visible is now the default. The entrance animation was a nice-to-have; invisible content is not. */.dpdp [data-rv]{opacity:1;transform:none;clip-path:none}/* ================= v23.31 · B. spend the magenta where it earns something ======= 338 pink surfaces was too many for the accent to still read as an accent. Magenta now marks actions, price and the purity number. Icons, verified marks, spec chips and secondary links go neutral. All values stay AA. *//* icon glyphs and their tiles */.dpdp .sec svg,.dpdp .sec svg path,.dpdp .sec svg rect,.dpdp .sec svg circle{color:var(--mut)}.dpdp .drr-head__icon svg{color:var(--mut)}.dpdp .drr-head__icon{background:var(--soft);border-color:var(--line)}.dpdp .ship i,.dpdp .lrow i,.dpdp .sec i[class]{background:var(--soft);color:var(--ink)}/* verified marks + inline dots */.dpdp .vd{color:var(--mut);border-color:var(--line)}.dpdp .dp{background:rgba(11,15,23,.30)}/* secondary certificate links: the one portal link below stays magenta */.dpdp .lview{color:var(--mut)}.dpdp .lview:hover{color:var(--ink);text-decoration:underline}/* spec / batch / shipping chips become outline chips instead of pink fills */.dpdp .chip,.dpdp .bchip,.dpdp .scchip{background:#fff;color:var(--ink);border-color:var(--rule)}.dpdp .chip::before,.dpdp .bchip::before,.dpdp .scchip::before{background:var(--mut)}/* storage temperature badges */.dpdp .tchip,.dpdp .temp{background:var(--soft);color:var(--ink);border-color:var(--line)}/* ================= v23.34 · hero art scale ================= The updated label art frames the vial smaller than the old file: the glass is 35.84% of the image width vs 40.06% before (measured with PIL at alpha>16, the same threshold the shop page uses for its own --gr-* values). Scaling the image by .4006/.3584 = 1.118 keeps the rendered vial exactly the size it was. Both files are optically centred, so no vertical nudge is needed. */.dpdp .media img.vial{width:min(65%,382px)}/* ================= v23.62 · hero art sized by the visible product ================= Every nasal spray (and the two raw-powder tubes) is drawn on the same square canvas as a vial, but the bottle fills only ~21.7% of the canvas width against a vial's ~39%, so at the shared 382px box it rendered 82px wide: the owner's "super small and blurry" on GoonMizer, 2026-09-18. The shop tiles already size art by its alpha box; the hero did not. dav23a-wire measures the loaded image and sets --artk (1 to 1.5) on slender art only, so every vial, dropper and kit keeps today's size. Below 1024px the plate is only as tall as the art, so the gain is held to 1.35 and the art rides 5% high to stay clear of the lot chips. */.dpdp .media img.vial{width:min(calc(65% * var(--artk,1)),calc(382px * var(--artk,1)))}@media(max-width:1023px){.dpdp .media img.vial{width:min(calc(65% * min(var(--artk,1),1.35)),calc(382px * min(var(--artk,1),1.35)),440px)}.dpdp .media img.vial.vial--slim{transform:translateY(-5%)}}/* ================= v23.36 · carry the PRODUCT hues further ================= Same four hues the product tiles use - 344 Aminos, 330 GLP, 352 Lyophilized, 294 Exclusive - reused across the page rather than introducing new ones. The promo pair takes the two ends of the range so the cards sitting side by side read most distinct. Deliberately NOT applied to the bundle ladder (.bun), which is one product at rising volume, or the lot strip (.lot), where pink marks which batch is yours - a status, not a category. Varying either would destroy the signal it carries. *//* --- the two offers --- */.dpdp .mwcard--a{--th:294}/* Build a Box */ .dpdp .mwcard--b{--th:352}/* Bulk Orders */ .dpdp .mwcard{background-image:linear-gradient(134deg,hsl(var(--th,330) 100% 56% / .17) 0%,#fff 62%);border-color:hsl(var(--th,330) 100% 56% / .24)}.dpdp .mwcard .mwbadge b,.dpdp .mwcard--b .mwbadge b{color:hsl(var(--th,330) 78% 36%)}.dpdp .mwcard .mwbadge{border-color:hsl(var(--th,330) 100% 56% / .26)}.dpdp .mwcard .mwpill{color:hsl(var(--th,330) 78% 36%);border-color:hsl(var(--th,330) 100% 56% / .32)}/* --- the two specification panels --- */.dpdp .cicard:nth-of-type(1){--th:330}.dpdp .cicard:nth-of-type(2){--th:344}.dpdp .cicard>.k{color:hsl(var(--th,330) 78% 36%)}/* --- the three closing proof points --- */.dpdp .crail>div:nth-child(1){--th:294}.dpdp .crail>div:nth-child(2){--th:330}.dpdp .crail>div:nth-child(3){--th:352}.dpdp .crail>div b{color:hsl(var(--th,330) 78% 36%)}/* ================= v23.37 · self-audit fixes ================= *//* An old horizontal-tile layout pinned the bundle badge with `left:auto;right:6px;transform:none`. Later rules put the tile back to centred but never restored the badge, so RECOMMENDED and BULK sit off-centre at EVERY width - measured 17px out at 1024 and 265px out at 680. */.dpdp .bun .badge{left:50%;right:auto;transform:translateX(-50%)}/* the newsletter field was the one interactive element with no focus indicator */.dpdp .nlform input:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--mag),0 0 0 7px rgba(255,42,166,.22)}/* The lot strip scrolls horizontally below 1180px (736px of overflow at 360) but gave no sign of it - the second lot card was sliced mid-row with a hard edge, so it read as a clipping bug rather than a scroll region. Same right-edge fade the shop page uses on its own rails. Masks apply to the element box, not the scrolled content, so the hint stays put while the cards move under it. */@media(max-width:1179.98px){.dpdp .lots{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent)}}/* The tile name is a -webkit-box clamped to 2 lines with overflow:hidden. A word longer than the column ("Bacteriostatic" at 360px) has no break opportunity, so it was sliced mid-word with no ellipsis - measured 31px of horizontal clip. Let long words break; the clamp then does its job on whole lines. */.dpdp .v2coll__l{overflow-wrap:break-word}/* The meta line wrapped to two lines only on the one tile carrying a was-price, which pushed that tile's arrow out of line with its neighbour. Keep it to one. */.dpdp .v2coll__n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}/* ================= v23.30 · shop-v2 collection tiles ================== Ported from /shop-v2/'s .v2coll. The plate is the rich pink the client pointed at: hsl(330 100% 56% / .24) over white, twice the strength of the compact card plate, composing to #ffc9e4 at its peak. Scoped under .dpdp. */.dpdp{--mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;--ink2:#16121a;--hot:#ff1f93;--hair:rgba(11,15,23,.09)}.dpdp .v2colls{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0}@media(max-width:1100px){.dpdp .v2colls{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.dpdp .v2colls{gap:12px}}.dpdp .v2coll{position:relative;--v2ch:clamp(292px,25vw,346px);--u:calc(var(--v2ch) - 86px);height:var(--v2ch);border:1px solid rgba(11,15,23,.08);border-radius:20px;overflow:hidden;cursor:pointer;text-align:left;padding:0;display:block;text-decoration:none;background-image:radial-gradient(118% 104% at 50% -6%,hsl(var(--th,330) 100% 56% / .24),#fff 64%);transition:box-shadow .2s,transform .2s,border-color .2s}.dpdp .v2coll:hover{border-color:hsl(var(--th,330) 100% 56% / .45);box-shadow:0 22px 44px -26px rgba(11,15,23,.35);transform:translateY(-4px)}.dpdp .v2coll__art{position:absolute;left:0;right:0;top:0;bottom:86px;display:block;padding:0}.dpdp .v2coll__art img{position:absolute;z-index:1;left:50%;top:50%;max-width:none;width:calc(var(--k,1) * var(--u));height:calc(var(--k,1) * var(--u));object-fit:fill;transform:translate(-50%,-50%) translate(calc(var(--dx,0) * var(--u)),calc(var(--dy,0) * var(--u)));filter:saturate(1.14) contrast(1.06) brightness(1.04) drop-shadow(rgba(11,15,23,.22) 0 14px 11px) drop-shadow(rgba(11,15,23,.12) 0 2px 3px);transition:transform .45s cubic-bezier(.2,.8,.2,1)}.dpdp .v2coll:hover .v2coll__art img{transform:translate(-50%,-50%) translate(calc(var(--dx,0) * var(--u)),calc(var(--dy,0) * var(--u))) scale(1.05)}.dpdp .v2coll__k{position:absolute;top:14px;left:16px;z-index:3;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:hsl(var(--th,330) 78% 40%)}.dpdp .v2coll__b{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 18px 17px;border-top:1px solid var(--hair);background:linear-gradient(180deg,rgba(255,255,255,.55),#fff 42%);display:flex;align-items:flex-end;gap:10px}.dpdp .v2coll__x{flex:1;min-width:0}.dpdp .v2coll__l{display:-webkit-box;font-family:var(--sora);font-size:15.5px;font-weight:700;line-height:1.2;letter-spacing:-.015em;color:var(--ink);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}.dpdp .v2coll__n{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:6px}.dpdp .v2coll__go{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center;font-family:var(--sora);font-size:14px;font-weight:700;color:var(--ink);transition:all .2s;margin-bottom:2px}.dpdp .v2coll:hover .v2coll__go{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateX(2px)}.dpdp .v2coll:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--mag)}/* the hero plate carries the same plate colour as the tiles */.dpdp .media{background:radial-gradient(118% 104% at 50% -6%,hsl(330 100% 56% / .24),#fff 64%)}/* shop-v2 sets this kicker to hsl(--th 78% 40%). Against its own plate that lands between 4.10:1 (hue 306) and 4.62:1 (hue 352) - under AA at the cooler end. At 78% 36% the worst hue in the palette measures 4.85:1, so the kicker keeps varying with the tile instead of being pinned to one colour. */.dpdp .v2coll__k{color:hsl(var(--th,330) 78% 36%)}/* The meta line carries .14em tracking, right for a label but ~1.3px per character on a price string. At two columns under 560px the longest one no longer fit, so it truncated a price. Tighten the tracking there instead. NOTE: this must live in relv2.css - it is appended after v23.css into the same style block, so an equal-specificity rule there wins on source order regardless of the media query. */@media(max-width:560px){.dpdp .v2coll__n{letter-spacing:.03em;font-size:9px}}/* Two-up under 430px leaves ~150px for the meta line; "$99.99 · was $119.00" does not fit and was being ellipsised mid-price. Drop the was-price there - the -17% badge on the same tile already states the discount. */@media(max-width:430px){.dpdp .v2coll__was{display:none}}/* The related-product title column was 88px wide on a 375px screen, so it broke inside words - "Bacteriost/atic Wate...", "Tesamoreli/n". Give the text the room instead. */@media(max-width:560px){.dpdp .v2coll__b{padding:12px 12px 14px;gap:7px}.dpdp .v2coll__l{font-size:14.5px;letter-spacing:-.02em}.dpdp .v2coll__go{width:26px;height:26px;font-size:13px}}@media(max-width:360px){.dpdp .v2coll__n{letter-spacing:0}}/* 36 of 77 focusable elements fell through to Chrome's default blue ring or had no ring at all - the header nav, the burger, the tile arrows, the footer links. One brand ring for everything focusable, using the same shape the buy-box already had. */a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible{outline:none;/* !important because several components set their own box-shadow at higher specificity (.sticky .go, .nav__burger), which silently ate the focus ring. */box-shadow:0 0 0 2px #fff,0 0 0 4px var(--mag),0 0 0 7px rgba(255,42,166,.22) !important}/* the lot cards clip their own focus ring; let it show */.dpdp .lots{padding-top:2px}.dpdp .lot:focus-visible{position:relative;z-index:2}/* The header cart count is white on --mag, which measures 3.42:1 - the only remaining AA failure on the page. --mag2 is the same hue at 5.08:1. */.nav__cart-count{background:var(--mag2)}