/* HÆLTH v4 (After Standard, Oct 26 2026): product scenes, compact numbers, lighter 90 days.
   Loaded after hm.css + pages.css on every page. */

/* ---------- product scene (the 1080 render) over the 360 turntable (v5f, Oct 27) ----------
   · the whole render is always in frame (the cap is never cut): it fits the stage height, a blurred copy of itself fills the sides
   · in and out are transitions on one curve, so switching back and forth (or mid-wipe) never jumps
   · entrance settle uses `scale`, the pointer drift uses `translate`: two properties, so they never fight */
.pd__scene{position:absolute;inset:0;margin:0;z-index:3;overflow:hidden;background:#04070f;pointer-events:none;container-type:size;
  visibility:hidden;clip-path:inset(100% 0 0 0);transition:clip-path .6s cubic-bezier(.7,0,.2,1),visibility 0s linear .6s}
.pd__viewer.is-scene .pd__scene{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .95s cubic-bezier(.7,0,.2,1),visibility 0s}
.pd__scene img{position:absolute;max-width:none;max-height:none;-webkit-user-drag:none}
.pd__scene .pd__scene-amb{left:-12%;top:-12%;width:124%;height:124%;object-fit:cover;filter:blur(34px) saturate(1.15) brightness(.6);transform:translateZ(0)}
.pd__scene .pd__scene-img{left:-2%;top:-2%;width:104%;height:104%;object-fit:cover;
  translate:var(--sx,0px) var(--sy,0px);scale:1.07;transition:scale 1.5s cubic-bezier(.16,1,.3,1)}
@supports (height:1cqh){
  /* height-fit with 2% overscan top and bottom: wide stages get the blurred sides, narrow ones crop the sides only */
  .pd__scene .pd__scene-img{--h:104cqh;height:var(--h);width:calc(var(--h) * .8);left:calc(50% - var(--h) * .4);top:calc(50% - var(--h) * .5)}
  /* wider than the render: its side edges melt into the blurred fill */
  @container (min-aspect-ratio:41/50){.pd__scene .pd__scene-img{
    -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}}
}
.pd__viewer.is-scene .pd__scene-img{scale:1;transition-duration:1.7s;transition-delay:.22s}
.pd__scene::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,7,15,.35),transparent 18%,transparent 78%,rgba(4,7,15,.55)),
             radial-gradient(120% 90% at 50% 45%,transparent 62%,rgba(4,7,15,.45))}
.pd__viewer.is-scene :is(.pd__read,.pd__hint,.pd__rec,.pd__ring,.pd__refl){opacity:0;transition:opacity .4s}
.pd__viewer.has-scene :is(.pd__read,.pd__hint,.pd__rec){transition:opacity .5s .15s}
.pd__viewer.is-scene{cursor:default}
.pd__views{position:absolute;z-index:5;left:50%;bottom:22px;transform:translateX(-50%);display:inline-flex;gap:2px;padding:3px;
  border:1px solid rgba(236,232,223,.16);border-radius:999px;background:rgba(6,9,18,.42);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.pd__views button{height:30px;padding:0 14px;border-radius:999px;font:500 12px/1 var(--f-sans);letter-spacing:.02em;color:rgba(236,232,223,.62);transition:background .35s,color .35s}
.pd__views button[aria-pressed="true"]{background:var(--fg);color:var(--ink)}
.pd__views button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pd__scene,.pd__scene img{transition:none!important}.pd__scene .pd__scene-img{scale:1}}

/* ---------- start from your numbers: one compact instrument band ---------- */
.numbers{padding:clamp(56px,7vw,92px) var(--gut);gap:28px}
.numbers__title{font-size:clamp(34px,6.4vw,58px)!important}
.numbers .sec-sub{font-size:15px;line-height:1.55;margin-top:14px}
.numbers__priv{margin-top:14px}
.inst{gap:16px;padding:clamp(18px,2.4vw,28px)}
.ruler__head b{font-size:clamp(24px,4.6vw,32px)}
.ruler input,.ruler__ticks{height:40px}
.ruler input::-webkit-slider-runnable-track{height:40px}
.ruler input::-webkit-slider-thumb{height:40px}
.bmi{gap:10px;padding-top:14px}
.bmi__v b{font-size:clamp(56px,12vw,92px)}
.bmi__scale{margin-bottom:10px}
.bmi__read{min-height:0;font-size:14px}
@media (min-width:1100px){
  .numbers{grid-template-columns:minmax(0,.78fr) minmax(0,1.55fr);align-items:center;column-gap:clamp(40px,5vw,80px)}
  .inst{grid-template-columns:1fr 1fr;column-gap:32px;align-items:start}
  .inst__top,.inst__cond,.inst__ctas{grid-column:1 / -1}
  .bmi{grid-column:1 / -1;grid-template-columns:auto minmax(0,1fr);column-gap:36px;align-items:center}
  .bmi__v{display:grid;gap:4px;align-content:start}
  .bmi__v .mono{padding:0}
  .bmi__scale{grid-column:2;grid-row:1;margin:0;align-self:center}
  .bmi__read{grid-column:1 / -1}
  .inst__ctas{grid-template-columns:auto auto;justify-content:start}
}

/* ---------- your first 90 days: lighter ---------- */
.f90__intro .sec-sub{display:none}
.f90__card .f90__d{max-width:52ch}
.f90__note{margin-top:12px}

/* ---------- inside the vial: less text, same science ---------- */
.ms__list span,.ms__key,.ms__hud,.ms__seq,.ms__size{display:none!important}
.ms__co i{display:none}
.ms__co b{font-size:14px}
.ms__read{gap:10px}
.ms__what{max-width:30ch}
.ms__head .sec-sub{max-width:34ch}

/* ---------- find a protocol: the whole vial, no key hints ---------- */
.fr{grid-template-columns:48px 1fr auto}
.fr__img{width:48px;height:64px;border-radius:10px;background:radial-gradient(60% 50% at 50% 60%,rgba(61,123,255,.14),rgba(236,232,223,.03) 70%)}
.fr__img img{object-fit:contain;padding:4px 0;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.find__foot{justify-content:flex-end}
.hdr__search kbd{display:none}

/* ---------- how it works: step arrows on the four-steps bar ---------- */
.jr__arws{display:inline-flex;gap:8px;margin-left:6px}
.jr__arw{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;color:var(--fg);background:rgba(236,232,223,.03);transition:background .3s,border-color .3s,opacity .3s,transform .3s var(--ease)}
.jr__arw svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.jr__arw:hover{background:var(--fg);color:var(--ink);border-color:var(--fg)}
.jr__arw:active{transform:scale(.94)}
.jr__arw[disabled]{opacity:.28;pointer-events:none}
.jr__arw[data-jr-go="1"]:not([disabled]){border-color:rgba(61,123,255,.6);animation:jr-nudge 2.6s var(--ease) 1.2s 3}
@keyframes jr-nudge{0%,100%{transform:none}45%{transform:translateX(4px)}}
.js .jr__bar{max-width:520px}

/* ---------- memberships: yours, not a template ---------- */
.mname{display:grid;grid-template-columns:1fr;gap:12px;max-width:var(--maxw,1360px);margin:0 auto clamp(26px,4vw,48px);padding:0 var(--gut)}
.mname__k{margin:0;color:var(--fg-3)}
.mname__f{display:grid;gap:8px;max-width:520px}
.mname__f span{color:var(--fg-3);font-size:11px}
.mname__f input{width:100%;height:58px;padding:0 2px;border:0;border-bottom:1px solid var(--line-2);background:transparent;color:var(--fg);font:300 clamp(28px,4vw,40px)/1 var(--f-sans);letter-spacing:-.02em;transition:border-color .35s}
.mname__f input::placeholder{color:rgba(236,232,223,.22)}
.mname__f input:focus{outline:none;border-bottom-color:var(--signal)}
.mname__note{margin:0;color:var(--fg-3);font-size:10px}
.mcard__holder{margin:2px 0 0;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(17,17,18,.55);min-height:1.2em;transition:color .4s}
.mcard__holder.is-set{color:rgba(17,17,18,.9)}
.mcard__holder.is-set{animation:mh-in .5s var(--ease)}
@keyframes mh-in{from{letter-spacing:.5em;opacity:.2}to{letter-spacing:.22em;opacity:1}}
.mrh{position:relative;padding:clamp(72px,9vw,128px) var(--gut);border-top:1px solid var(--line);overflow:hidden;
  background:radial-gradient(60% 70% at 26% 52%,rgba(61,123,255,.07),transparent 62%),linear-gradient(180deg,#0a0c12,#06070a)}
.mrh__in{display:grid;grid-template-areas:"head" "dial" "list";gap:clamp(28px,5vw,44px);max-width:1320px;margin:0 auto}
.mrh__head{grid-area:head}
.mrh__head .sec-title{margin:0;font-size:clamp(40px,10vw,76px)!important;line-height:.98}
.mrh__dial{grid-area:dial;position:relative;margin:0 auto;width:min(100%,340px);aspect-ratio:1}
.mrh__dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mrh__bez line{stroke:rgba(236,232,223,.16);stroke-width:1;vector-effect:non-scaling-stroke}
.mrh__bez line.mj{stroke:rgba(236,232,223,.42)}
.mrh__ring{fill:none;stroke:rgba(236,232,223,.14);stroke-width:1;vector-effect:non-scaling-stroke}
.mrh__inner{fill:rgba(6,8,13,.55);stroke:rgba(236,232,223,.10);stroke-width:1;vector-effect:non-scaling-stroke}
.mrh__arc{fill:none;stroke:var(--signal);stroke-width:2.2;stroke-linecap:round}
.mrh__needle path{fill:var(--fg)}
.mrh__needle line{stroke:rgba(236,232,223,.5);stroke-width:1;vector-effect:non-scaling-stroke}
.mrh__dot{fill:#0a0d15;stroke:rgba(236,232,223,.38);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:fill .5s,stroke .5s}
.mrh__halo{fill:none;stroke:var(--signal);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .5s,transform .7s var(--ease)}
.mrh__node.is-past .mrh__dot{fill:var(--fg);stroke:var(--fg)}
.mrh__node.is-on .mrh__dot{fill:var(--signal);stroke:var(--signal)}
.mrh__node.is-on .mrh__halo{opacity:.55;transform:none}
.mrh__lab{font:400 11px var(--f-mono);letter-spacing:.08em;fill:rgba(236,232,223,.32);text-anchor:middle;dominant-baseline:central;transition:fill .5s}
.mrh__lab.is-on{fill:var(--fg)}
.mrh__core{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;pointer-events:none}
.mrh__core .mono{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.mrh__core [data-mrh-lab]{color:var(--fg-2)}
.mrh__core b{font-size:clamp(52px,7vw,84px);line-height:.9;font-weight:400;color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.mrh__core b.flip{animation:mrh-flip .6s var(--ease)}
@keyframes mrh-flip{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.mrh__list{grid-area:list;list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.mrh__st{position:relative;border-top:1px solid var(--line)}
.mrh__row{display:grid;grid-template-columns:44px 1fr;align-items:baseline;width:100%;padding:20px 0;text-align:left;cursor:pointer;color:inherit}
.mrh__row i{font-style:normal;font-size:11px;letter-spacing:.1em;color:var(--fg-3);transition:color .4s}
.mrh__row b{font:400 clamp(22px,2.4vw,30px)/1.1 var(--f-display);letter-spacing:-.02em;color:rgba(236,232,223,.34);transition:color .45s}
.mrh__row:hover b{color:rgba(236,232,223,.7)}
.mrh__st.is-on .mrh__row b{color:var(--fg)}
.mrh__st.is-on .mrh__row i{color:var(--signal-2)}
.mrh__row:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.mrh__bar{position:absolute;left:44px;right:0;bottom:-1px;height:1px;overflow:hidden}
.mrh__bar span{position:absolute;inset:0;background:var(--signal);transform:scaleX(0);transform-origin:left}
.mrh.is-play .mrh__st.is-on .mrh__bar span{animation:mrh-bar var(--mrh-t,4.2s) linear forwards}
.mrh.is-hold .mrh__st.is-on .mrh__bar span{animation-play-state:paused}
@keyframes mrh-bar{to{transform:none}}
.mrh__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.mrh__body p{min-height:0;overflow:hidden;margin:0;padding-left:44px;color:var(--fg-2);font-size:15.5px;line-height:1.6;max-width:46ch;opacity:0;transition:opacity .4s,padding .6s var(--ease)}
.mrh__st.is-on .mrh__body{grid-template-rows:1fr}
.mrh__st.is-on .mrh__body p{opacity:1;padding-bottom:24px;transition-delay:.12s}
.mrh__body a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (min-width:900px){
  .mname{grid-template-columns:auto 1fr auto;align-items:end;column-gap:48px}
  .mrh__in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"dial head" "dial list";grid-template-rows:auto 1fr;column-gap:clamp(48px,7vw,120px);row-gap:clamp(30px,4vw,52px);align-items:start}
  .mrh__dial{width:min(100%,540px);align-self:center}
  .mrh__head{align-self:end}
}
@media (prefers-reduced-motion:reduce){.mrh__body,.mrh__body p,.mrh__halo{transition:none}}

/* ---------- FAQ: same simplicity, better made ---------- */
.faq__list{counter-reset:q}
.faq details{position:relative;counter-increment:q;border-bottom:1px solid var(--line-2);transition:background .35s var(--ease)}
.faq summary{position:relative;padding:24px 4px 24px 0;gap:22px;transition:color .3s}
.faq summary::before{content:counter(q,decimal-leading-zero);flex:none;width:34px;font:400 11px/1 var(--f-mono);letter-spacing:.1em;color:var(--fg-3);align-self:center;transition:color .3s}
.faq summary>span{flex:1;transition:transform .45s var(--ease)}
.faq summary i{width:34px;height:34px;border:1px solid var(--line-2);border-radius:50%;transition:border-color .35s,background .35s,transform .5s var(--ease)}
.faq summary i::before,.faq summary i::after{left:10px;right:10px}
.faq details:hover summary>span{transform:translateX(6px)}
.faq details:hover summary i{border-color:rgba(236,232,223,.4)}
.faq details[open] summary::before{color:var(--signal-2,#6f9bff)}
.faq details[open] summary i{background:var(--fg);border-color:var(--fg);color:var(--ink);transform:rotate(180deg)}
.faq details[open] summary i::before{background:var(--ink)}
.faq details>p{margin:0 0 26px 56px;padding-left:18px;border-left:1px solid rgba(61,123,255,.55);max-width:62ch;font-size:15.5px;line-height:1.65}
.faq details::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.faq details[open]::after{transform:scaleX(1)}
@media (min-width:1100px){.faq summary{font-size:22px;padding:28px 4px 28px 0}}
.faq-nav{position:sticky;top:calc(var(--hdr) + 10px);z-index:4;display:flex;flex-wrap:wrap;gap:8px;margin:0 var(--gut) clamp(36px,5vw,64px);padding:6px;width:max-content;max-width:calc(100% - 2 * var(--gut));border:1px solid var(--line-2);border-radius:999px;background:rgba(8,9,13,.6);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.faq-nav a{height:34px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border-radius:999px;color:var(--fg-2);font:500 13px/1 var(--f-sans);text-decoration:none;transition:background .3s,color .3s}
.faq-nav a i{font:400 10px/1 var(--f-mono);color:var(--fg-3);font-style:normal}
.faq-nav a.on{background:var(--fg);color:var(--ink)}
.faq-nav a.on i{color:rgba(17,17,18,.55)}
.pg--faq .ph,.faq--page~* {}
@media (max-width:759px){
  .faq-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:auto;max-width:none;margin-left:var(--gut);margin-right:var(--gut);-webkit-mask:linear-gradient(90deg,#000 88%,transparent)}
  .faq-nav::-webkit-scrollbar{display:none}
  .faq-nav a{flex:none}
  .faq details>p{margin-left:0}
  .faq summary::before{width:26px}
  .pd__views{bottom:16px}
}
@media (min-width:1100px){.pd__views{left:auto;right:28px;bottom:26px;transform:none}}

/* ---------- important safety information (v5 claims pass) ---------- */
.isi{position:relative;border-left:2px solid var(--cap);padding:2px 0 2px clamp(16px,2vw,22px)}
.isi .isi__k{margin:0 0 14px!important;font:400 11px/1.2 var(--f-mono)!important;letter-spacing:.09em;text-transform:uppercase;color:var(--cap)!important}
.mg__s .isi p:not(.isi__k){font-size:15px;line-height:1.62;max-width:70ch;margin:0 0 11px}
.mg__s .isi .isi__k + p{color:var(--pi)}
.isi-band{padding:8px var(--gut) clamp(48px,6vw,88px)}
.isi-band .isi{max-width:920px;margin:0 auto;border-left-color:var(--signal)}
.isi-band .isi__k{color:var(--signal-2)!important}
.isi-band p:not(.isi__k){margin:0 0 10px;color:var(--fg-2);font-size:14.5px;line-height:1.62;max-width:78ch}
.isi-band .isi__k + p{color:var(--fg)}
.pd__trust a[href="#safety"]{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- cart, sticky bar, add-to-cart flight: the whole vial, never a crop ---------- */
.ci{grid-template-columns:54px 1fr auto}
.ci__img{width:54px;aspect-ratio:3/4;border-color:var(--line);background:radial-gradient(90% 70% at 50% 58%,rgba(61,123,255,.16),transparent 72%),#0b0e16}
.ci__img img{object-fit:contain;padding:3px}
.pd__sticky-img{width:40px;height:52px;border-radius:6px;background:radial-gradient(90% 70% at 50% 58%,rgba(61,123,255,.16),transparent 72%),#0b0e16}
.pd__sticky-img img{object-fit:contain;padding:2px}
.fly{width:40px;height:54px;border-radius:0;border:0;background:none;overflow:visible}
.fly img{object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}

/* ---------- home hero: the copy side gets depth (deeper shade + a soft blur) so the type reads over any frame ---------- */
.vh__shade{background:
  radial-gradient(ellipse 108% 116% at 0% 76%,rgba(4,5,8,.92) 0%,rgba(4,5,8,.82) 24%,rgba(4,5,8,.62) 46%,rgba(4,5,8,.36) 66%,rgba(4,5,8,.13) 84%,rgba(4,5,8,0) 100%),
  linear-gradient(90deg,rgba(4,5,8,.9) 0%,rgba(4,5,8,.8) 20%,rgba(4,5,8,.6) 36%,rgba(4,5,8,.36) 50%,rgba(4,5,8,.15) 62%,rgba(4,5,8,.04) 72%,rgba(4,5,8,0) 82%),
  linear-gradient(0deg,var(--ink) 0%,rgba(10,10,11,.66) 16%,rgba(10,10,11,0) 40%),
  linear-gradient(180deg,rgba(5,6,9,.6) 0%,rgba(5,6,9,0) 20%),
  radial-gradient(125% 95% at 62% 42%,transparent 58%,rgba(0,0,0,.5) 100%)}
.vh__shade::before{content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.96) 26%,rgba(0,0,0,.7) 42%,rgba(0,0,0,.3) 55%,transparent 66%);
          mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.96) 26%,rgba(0,0,0,.7) 42%,rgba(0,0,0,.3) 55%,transparent 66%)}
.vh__copy .eyebrow,.vh__lede{text-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 28px rgba(2,4,10,.6)}
@media (max-width:759px),(max-aspect-ratio:4/5){
  .vh__shade{background:
    linear-gradient(0deg,var(--ink) 0%,rgba(5,6,9,.96) 20%,rgba(5,6,9,.9) 34%,rgba(5,6,9,.76) 47%,rgba(5,6,9,.5) 59%,rgba(5,6,9,.24) 70%,rgba(5,6,9,.07) 80%,rgba(5,6,9,0) 88%),
    linear-gradient(180deg,rgba(5,6,9,.55) 0%,rgba(5,6,9,0) 18%),
    radial-gradient(120% 80% at 50% 40%,transparent 60%,rgba(0,0,0,.45) 100%)}
  .vh__shade::before{
    -webkit-mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.95) 38%,rgba(0,0,0,.62) 54%,rgba(0,0,0,.22) 66%,transparent 76%);
            mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.95) 38%,rgba(0,0,0,.62) 54%,rgba(0,0,0,.22) 66%,transparent 76%)}
}
@media (prefers-reduced-transparency:reduce){.vh__shade::before{display:none}}

/* ---------- category banner (phones): a photo whose subject sits at the very top clears the header bar ---------- */
@media (max-width:1099px){.cat--hdrpad .filmbg img{box-sizing:border-box;padding-top:calc(var(--hdr) - 4px)}}

/* ---------- vial intake (lab.js, Oct 28): the reticle locks on, a dot hologram of the vial, the scan line, the real vial ----------
   --lab-y is the scan line's height in the card (registered so it animates); the vial is revealed above it, the hologram stays below.
   Hidden from the first paint (html.js), never on back navigation (html.hm-back), never if lab.js did not run (html.lab-off). */
@property --lab-y{syntax:'<percentage>';inherits:true;initial-value:0%}
.js .rail .pcard,.js .pgrid .pcard{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .js:not(.lab-off):not(.hm-back) .pcard:not(.lab-done):not(.lab-run) .pcard__stand{clip-path:inset(0 0 100% 0)}
  .js:not(.lab-off):not(.hm-back) .pcard:not(.lab-done):not(.lab-run) :is(.pcard__name,.pcard__meta){opacity:0}
  .js:not(.lab-off):not(.hm-back) .pcard:not(.lab-done):not(.lab-run) .pcard__vial::before{transform:scaleX(0)}
  .js:not(.lab-off):not(.hm-back) .pcard:not(.lab-done):not(.lab-run) .pcard__vial::after{opacity:0}
  .js:not(.lab-off):not(.hm-back) .pcard--more:not(.lab-done):not(.lab-run) .pcard__vial>:is(b,span){opacity:0}
}
.pcard .lab{position:absolute;inset:0;z-index:3;pointer-events:none;contain:strict}
.lab__dots{position:absolute;inset:0;opacity:0;clip-path:inset(var(--lab-y) 0 0 0);
  background:radial-gradient(circle,rgba(176,204,255,1) 0 .8px,transparent 1.25px) 0 0 / 4px 4px;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-mode:luminance}
.lab__dots::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(61,123,255,.0) 0%,rgba(61,123,255,.16) 100%)}
.lab__beam{position:absolute;left:16%;right:16%;top:var(--lab-y);height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(170,200,255,.9) 20%,#f2f6ff 50%,rgba(170,200,255,.9) 80%,transparent);
  box-shadow:0 0 12px 1px rgba(61,123,255,.6)}
.lab__beam::before{content:"";position:absolute;left:8%;right:8%;bottom:1px;height:clamp(34px,16%,64px);
  background:linear-gradient(0deg,rgba(61,123,255,.26),rgba(61,123,255,0));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.lab__k{--c:rgba(214,226,255,.88);--a:12px;position:absolute;left:21.5%;right:21.5%;top:6%;bottom:4.5%;opacity:0;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--a) 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/1px var(--a) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--a) 1px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/1px var(--a) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--a) 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/1px var(--a) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--a) 1px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/1px var(--a) no-repeat}
.lab__k b{position:absolute;left:0;bottom:calc(100% + 7px);display:flex;align-items:center;gap:6px;white-space:nowrap;
  font:400 9px/1 var(--f-mono);letter-spacing:.16em;color:var(--signal-2,#6f9bff)}
.lab__k b::before{content:"";width:4px;height:4px;background:var(--signal,#3d7bff);animation:lab-blink .5s steps(2) infinite}
.lab--plain .lab__k{left:12%;right:12%;top:10%;bottom:10%}
.lab--plain .lab__dots{display:none}
@media (max-width:759px){.lab__dots{background-size:3.4px 3.4px}.lab__k{--a:9px}.lab__k b{font-size:8px;bottom:calc(100% + 5px)}}

/* the run: lock (0) · hologram (.1) · scan (.3 → 1.12) · floor and reflection (.9) · name and dose (.7 / .8) · the reticle lets go (1.25 → 1.75) */
.pcard.lab-run{--lab-T:var(--lab-t,1)}
.pcard.lab-run .pcard__vial{animation:lab-y calc(820ms * var(--lab-T)) cubic-bezier(.55,.06,.3,1) calc(var(--lab-d,0ms) + 300ms * var(--lab-T)) both}
.pcard.lab-run .pcard__stand{clip-path:inset(-3% 0 calc(100% - var(--lab-y)) 0);
  animation:lab-rise calc(1200ms * var(--lab-T)) cubic-bezier(.16,1,.3,1) calc(var(--lab-d,0ms) + 260ms * var(--lab-T)) both}
.pcard.lab-run .lab__dots{animation:lab-holo calc(420ms * var(--lab-T)) linear calc(var(--lab-d,0ms) + 90ms * var(--lab-T)) both}
.pcard.lab-run .lab__beam{animation:lab-beam calc(820ms * var(--lab-T)) linear calc(var(--lab-d,0ms) + 300ms * var(--lab-T)) both}
.pcard.lab-run .lab__k{animation:lab-k calc(1750ms * var(--lab-T)) cubic-bezier(.2,.7,.1,1) var(--lab-d,0ms) both}
.pcard.lab-run .pcard__vial::before{animation:lab-floor calc(760ms * var(--lab-T)) cubic-bezier(.7,0,.2,1) calc(var(--lab-d,0ms) + 880ms * var(--lab-T)) both}
.pcard.lab-run .pcard__vial::after{animation:lab-fade calc(900ms * var(--lab-T)) ease calc(var(--lab-d,0ms) + 950ms * var(--lab-T)) both}
.pcard.lab-run .pcard__name{animation:lab-up calc(800ms * var(--lab-T)) cubic-bezier(.16,1,.3,1) calc(var(--lab-d,0ms) + 700ms * var(--lab-T)) both}
.pcard.lab-run .pcard__meta{animation:lab-up calc(800ms * var(--lab-T)) cubic-bezier(.16,1,.3,1) calc(var(--lab-d,0ms) + 800ms * var(--lab-T)) both}
.pcard--more.lab-run .pcard__vial>:is(b,span){animation:lab-up calc(900ms * var(--lab-T)) cubic-bezier(.16,1,.3,1) calc(var(--lab-d,0ms) + 520ms * var(--lab-T)) both}
@keyframes lab-y{from{--lab-y:5%}to{--lab-y:101%}}
@keyframes lab-rise{from{translate:0 2.4%;filter:brightness(1.55) saturate(.5)}45%{filter:brightness(1.15) saturate(.85)}to{translate:0 0;filter:none}}
@keyframes lab-holo{0%{opacity:0}35%{opacity:.95}48%{opacity:.45}62%{opacity:1}100%{opacity:.9}}
@keyframes lab-beam{0%{opacity:0}7%{opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes lab-k{0%{opacity:0;scale:1.22}13%{opacity:1;scale:.975}19%{scale:1}72%{opacity:1}100%{opacity:0;scale:1}}
@keyframes lab-floor{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lab-fade{from{opacity:0}to{opacity:1}}
@keyframes lab-up{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes lab-blink{50%{opacity:.15}}

/* ---------- inside the vial · phones and tablets (Oct 28): a compact stage, every molecule in view, a readout you can read ----------
   (desktop keeps its own layout in scan.css). A sideways drag turns the molecule (structure.js), so the section only pans vertically. */
@media (max-width:1099px){
  .ms{padding:clamp(64px,12vw,96px) var(--gut) clamp(44px,8vw,64px);gap:0;min-height:0;touch-action:pan-y}
  .ms__head .sec-title{font-size:clamp(46px,12.4vw,76px)}
  .ms__head .sec-sub{margin-top:12px;font-size:15px;line-height:1.5;max-width:36ch;color:var(--fg-2)}
  .ms__stage{height:min(92vw,420px);margin:14px 0 4px}
  .ms__k{display:none}
  .ms__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px;margin:10px 0 0;padding:0;overflow:visible;border-top:0;scroll-snap-type:none}
  .ms__list li{min-width:0}
  .ms__list button{display:flex;align-items:baseline;gap:7px;width:100%;min-width:0;min-height:46px;padding:13px 0 11px;margin:0;border-bottom:1px solid var(--line);color:var(--fg-3)}
  .ms__list i{flex:none;font-size:10px;letter-spacing:.08em}
  .ms__list b{min-width:0;font-size:15.5px;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ms__list button[aria-selected="true"]{padding-left:0;color:var(--fg)}
  .ms__list button[aria-selected="true"]::before{display:none}
  .ms__list button[aria-selected="true"] i{color:var(--gold)}
  .ms__read{margin-top:24px;max-width:560px;text-align:left}
  .ms__fig{font-size:11px;letter-spacing:.1em;color:var(--fg-2)}
  .ms__what{margin-top:10px;max-width:36ch;font-size:16px;line-height:1.5;color:var(--fg)}
  .ms__formula{margin-top:14px;font-size:clamp(26px,7.6vw,36px)}
  .ms__meta{margin-top:10px;font-size:11px;letter-spacing:.08em;color:var(--fg-2)}
  .ms__go{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-size:12px}
}
@media (min-width:700px) and (max-width:1099px){
  .ms__stage{height:min(66vw,560px)}
  .ms__list{grid-template-columns:repeat(6,minmax(0,1fr));gap:0 16px}
  .ms__what{font-size:17px}
}