/* Yes Peptides, 2 Nov: Beyond Whoosh's look (dark, glass, big type) on our sections, words and photos.
   Everything is scoped to body.dk. The quiz at /start/ uses it too, with src/css/start.css on top.
   Glass: small panels use a real background blur; lists of cards over plain dark use a translucent fill, which costs nothing while scrolling. */

html:has(body.dk){background:#08090b}
.dk{
  --ink:#f4f5f3;--ink-soft:#bcc1c7;--muted:#8f959c;--line:rgba(255,255,255,.12);--line-strong:rgba(255,255,255,.42);
  --white:#0b0d10;--bone:#13161a;--mist:#1a1e23;--cream:#13161a;--sage-light:#1a2024;--sage:#c9cdd2;--sage-deep:#c9cdd2;--sage-ink:#c9cdd2;--forest:#0b0d10;
  --on-light:#0b0d10;--mint:#9fd8c4;
  --shadow:0 30px 60px -30px rgba(0,0,0,.8);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.12);
  background:#08090b;color:var(--ink)
}
.dk h1,.dk h2{font-weight:500;letter-spacing:-.035em}
.dk h3{font-weight:500;letter-spacing:-.015em}
.dk section{padding:64px 0}
.dk a{color:inherit}

/* a shadow on near-black is invisible and slow to paint, so vials go without */
.dk .pc-img img,.dk .cc-img img,.dk .g-vial img,.dk .m-pic img,.dk .sc-vi img,.dk .wh-v,.dk .pdp-img img,.dk .ex-v img,.dk .disc-media .over,.dk .pfill-art{filter:none!important}
.dk .kb::after{display:none}

/* buttons: pills, white first, glass second */
.dk .btn{border-radius:999px}
.dk .btn-ink,.dk .btn-sage,.dk .btn-white,.dk .cta-band .btn-sage,.dk .hdr .go,.dk .hdr.dark:not(.solid) .go{background:#fff;color:var(--on-light);box-shadow:none}
.dk .btn-ink:hover,.dk .btn-sage:hover,.dk .btn-white:hover,.dk .hdr .go:hover{background:#e6e9e7;color:var(--on-light)}
.dk .btn-line,.dk .btn-ghost{background:rgba(255,255,255,.09);color:#fff;box-shadow:var(--glass-edge)}
.dk .btn-line:hover,.dk .btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff}

/* the shared glass recipe */
.dk .nav,.dk .hdr-act,.dk .hdr.up .logo,.dk .gcard,.dk .h5-cta .btn-ghost,.dk .pdp>div:last-child,.dk .cat-sec .few .pcard{
  background:rgba(24,28,33,.38);
  -webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);
  box-shadow:var(--glass-edge),0 18px 40px -24px rgba(0,0,0,.75)
}

/* ---- header: logo, glass menu pill, glass actions. Unlike theirs, the logo gets its own glass once you scroll, so it never sits on text ---- */
.dk .promo{position:absolute;top:0;left:0;right:0;z-index:41;background:none;color:rgba(255,255,255,.86);font-size:12px;padding:8px 14px}
.dk .hdr{position:fixed;top:30px;left:0;right:0;z-index:60;background:none;box-shadow:none;color:#fff;transition:transform var(--d-fast) var(--ease-out);pointer-events:none}
.dk .hdr.solid{background:none;box-shadow:none;color:#fff}
.dk .hdr.up{transform:translateY(-20px)}
.dk .hdr-in{max-width:1320px;height:56px;border:0;gap:14px;padding:0 20px}
.dk .hdr-in>*{pointer-events:auto}
.dk .logo{padding:8px 14px;border-radius:999px;transition:background-color var(--d-fast) ease}
.dk .hdr .logo img,.dk .hdr.dark:not(.solid) .logo img{filter:brightness(0) invert(1)}
.dk .logo span{color:#fff}
.dk .nav{border-radius:999px}
.dk .hdr.dark:not(.solid) .nav{background:rgba(24,28,33,.38);box-shadow:var(--glass-edge),0 18px 40px -24px rgba(0,0,0,.75)}
.dk .nv-a{color:#fff;font-size:12px;font-weight:500;letter-spacing:.3px;text-transform:none;font-size:14px}
.dk .nv:has(.mega) .nv-a::after{content:"";display:inline-block;width:6px;height:6px;margin:0 2px 2px 8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--d-fast) var(--ease-out)}
.dk .nv:hover .nv-a::after{transform:translateY(2px) rotate(225deg)}
.dk .nv-pill{background:rgba(255,255,255,.16)}
.dk .hdr-act{margin-left:0;padding:6px 6px 6px 8px;border-radius:999px;gap:4px}
.dk .acct{color:#fff}
.dk .acct:hover{background:rgba(255,255,255,.14)}
.dk .hdr .go{padding:10px 18px;font-size:14px}
.dk .burger{color:#fff}
@media (max-width:1080px){.dk .hdr-in{justify-content:space-between}}
@media (max-width:560px){.dk .hdr-in{padding:0 12px}.dk .logo{padding:8px 10px}.dk .hdr{top:30px}}

/* menu panel */
.dk .mega{top:calc(100% + 6px);color:#fff;background:rgba(16,19,23,.82);border:0;box-shadow:var(--glass-edge),0 40px 80px -30px rgba(0,0,0,.9);-webkit-backdrop-filter:saturate(1.4) blur(26px);backdrop-filter:saturate(1.4) blur(26px)}
.dk .m-row:hover,.dk .m-row:focus-visible{background:rgba(255,255,255,.09)}
.dk .m-prev{background:radial-gradient(70% 55% at 50% 38%,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 75%)}
.dk .m-pic img{filter:drop-shadow(0 14px 14px rgba(0,0,0,.5))}

/* phone menu, bar and buy bar */
.dk .drawer-nav{z-index:59;background:#12151a;color:#fff;border:0;box-shadow:var(--glass-edge),0 30px 60px -28px #000}
.dk .dn-search{background:rgba(255,255,255,.07);border:0;color:var(--ink-soft)}
.dk .dn-p em,.dk .dn-g summary em{color:var(--muted)}
.dk .dn-all{color:#fff}
.dk .tabbar{background:rgba(11,13,16,.96);border-top:1px solid var(--line)}
.dk .tabbar a,.dk .tabbar button{color:#fff}
.dk .bb-in{background:rgba(18,21,25,.94);border:0;box-shadow:var(--glass-edge),0 26px 50px -22px #000}
.dk .bb-t span{color:var(--muted)}

/* search */
.dk .srch-box{background:#14171b;color:#fff;box-shadow:var(--glass-edge),0 40px 90px -30px #000}
.dk .srch-in input{color:#fff}
.dk .srch-x{background:rgba(255,255,255,.1);color:#fff}
.dk .srch-row:hover,.dk .srch-row.act,.dk .srch-row:focus-visible{background:rgba(255,255,255,.08)}
.dk .srch-none,.dk .srch-lbl{color:var(--ink-soft)}

/* ---- hero: their full photo, big centred line and glass cards rising over it. Text stays above the runner's head ---- */
.h5{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#2c66a3 0,#4b7fb4 150px,#4b7fb4 200px,#08090b 200px);padding:0!important}
.h5-bg{position:absolute;left:0;right:0;top:150px;bottom:0;z-index:-1;overflow:hidden}
.h5-bg::before,.h5-bg::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.h5-bg::before{top:0;height:16%;background:linear-gradient(180deg,#4b7fb4 0%,rgba(75,127,180,0) 100%)}
.h5-bg::after{bottom:0;height:14%;background:linear-gradient(0deg,#08090b 0%,rgba(8,9,11,0) 100%)}
.h5-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.h5-in{display:flex;flex-direction:column;align-items:center;text-align:center;padding:112px 22px 0;color:#fff}
.h5 h1{font-size:clamp(46px,7.4vw,104px);line-height:1;max-width:14em;text-shadow:0 2px 40px rgba(10,30,60,.25)}
.h5-sub{margin-top:14px;max-width:560px;font-size:16px;line-height:1.45;color:#fff}
.h5-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.h5-cta .btn{padding:14px 22px}
.dk .h5-cta .btn-ghost{background:rgba(24,28,33,.3)}
.h5-cards{margin-top:clamp(170px,17vw,230px);padding:0 max(22px,calc((100vw - 1320px)/2)) 40px}
.h5 .car-track{grid-auto-columns:min(38vw,470px);gap:16px;padding:2px 2px 16px}
.h5 .car-foot{margin-top:4px;padding:0 2px}
.gcard{position:relative;display:flex;flex-direction:column;min-height:520px;padding:20px;border-radius:18px;color:#fff;overflow:hidden}
.gchip{align-self:flex-start;padding:4px 10px;border-radius:7px;background:rgba(255,255,255,.18);font-size:12px;font-weight:500}
.gcard h3{margin-top:12px;font-size:24px;line-height:1.12}
.gcard h3 a{text-decoration:none}
.g-what{margin-top:6px;font-size:14px;line-height:1.4;color:rgba(255,255,255,.86);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.g-price{margin-top:8px;font-family:"Plus Jakarta Sans","Jost",sans-serif;font-weight:600;font-size:16px;letter-spacing:-.01em}
.g-vial{display:flex;justify-content:center;flex:1;padding:14px 0 6px}
.g-vial img{height:236px;width:auto;filter:drop-shadow(0 24px 22px rgba(0,0,0,.45));transition:transform .5s var(--ease-out)}
.gcard:hover .g-vial img{transform:translateY(-8px) rotate(-3deg)}
.g-acts{display:flex;align-items:center;gap:14px}
.g-acts .btn{padding:12px 18px;font-size:14px}
.g-lm{font-size:14px;font-weight:500;text-decoration:none;color:#fff}
.g-lm:hover{text-decoration:underline}

@media (max-width:760px){
  .h5{background:linear-gradient(180deg,#2c66a3 0,#4b7fb4 150px,#4b7fb4 251px,#08090b 251px)}
  .h5-bg{top:250px}
  .h5-sub{font-size:16px}
  .h5-cards{margin-top:300px}
  .h5 .car-track{grid-auto-columns:84vw}
  .gcard{min-height:480px}
}

/* the photo drifts behind the glass as you scroll, moved by the browser with no lag */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .h5-bg img{will-change:transform;animation:h5pan linear both;animation-timeline:scroll(root);animation-range:0 1300px}
  }
}
@keyframes h5pan{from{transform:translate3d(0,0,0) scale(1.02)}to{transform:translate3d(0,7%,0) scale(1.1)}}

/* light that follows the pointer along glass edges (site.js sets --mx and --my) */
.dk .gcard::after,.dk .ex::after,.dk .pcard::after,.dk .ccard::after,.dk .hc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--d-slow) ease;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.13),rgba(255,255,255,0) 62%)}
.dk .gcard:hover::after,.dk .ex:hover::after,.dk .pcard:hover::after,.dk .ccard:hover::after,.dk .hc:hover::after{opacity:1}

/* ---- trust strip and tiles ---- */
.dk .featbar{background:none;margin-top:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dk .featbar i{background:rgba(255,255,255,.08)}
.dk .featbar span{color:var(--ink-soft)}
.dk .featbar b{color:#fff}
.dk .featbar-in>div{border-left-color:var(--line)}
.dk .checkrow span{color:var(--ink-soft);font-weight:400;white-space:normal}
.dk .checkrow svg{color:var(--mint)}
.dk .tile{background:rgba(255,255,255,.055);color:#fff;box-shadow:var(--glass-edge)}
.dk .tile.t1{background:rgba(255,255,255,.055);color:#fff}
.dk .tile .tn,.dk .tile.t1 .tn{background:#fff;color:var(--on-light)}
.dk .tile:hover{background:rgba(255,255,255,.09)}

/* ---- shop by goal ---- */
.dk .explore{background:none;padding:40px 0 30px}
.dk .ex{background:linear-gradient(170deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:var(--glass-edge)}
.dk .ex-go{background:rgba(255,255,255,.14);color:#fff;box-shadow:var(--glass-edge)}
.dk .ex-t em{color:var(--ink-soft)}

/* ---- scroll scene: dark, with the flag rising behind the vial on the second line ---- */
.dk .scene{background:#08090b;color:#fff;padding:0}
.dk .scene h2{font-weight:500}
.dk .scene h2 i{color:#8f959c}
.dk .sc-l,.dk .sc-r{color:#fff}
.dk .scene.live .sc-l,.dk .scene.live .sc-r{padding:10px 12px;border-radius:12px;background:rgba(8,9,11,.55);box-shadow:var(--glass-edge)}
.dk .scene.live .sc-b i{color:#cfd3d7}
.dk .sc-vi img{filter:drop-shadow(0 40px 50px rgba(0,0,0,.7))}
.dk .scene.live .sc-v::before{background:radial-gradient(closest-side,rgba(70,110,170,.2),rgba(70,110,170,0))}
.sc-flag{display:none}
.scene.live .sc-flag{display:block;position:absolute;inset:0;opacity:0}
.sc-flag::after{content:"";position:absolute;inset:0;background:radial-gradient(75% 75% at 50% 50%,rgba(8,9,11,0) 30%,#08090b 100%)}
.sc-flag canvas{width:100%;height:100%;display:block;object-fit:cover}
.sc-tag{display:block;margin-top:10px;font-size:clamp(15px,1.5vw,19px);font-weight:400;letter-spacing:0;line-height:1.3;color:#fff}
.sc-tag img{display:inline-block;width:22px;height:22px;margin-right:8px;vertical-align:-5px}
.scene.live .sc-a,.scene.live .sc-b,.scene.live .sc-v,.scene.live .sc-l,.scene.live .sc-r{z-index:1}
@supports (animation-timeline:view()){
  .scene.live .sc-flag{animation:scflag linear both;animation-timeline:--yp-scene;animation-range:entry 0% exit 0%}
}
@keyframes scflag{0%,58%{opacity:0}76%,100%{opacity:.62}}

/* on smaller screens the small print sits under the scene, out of the vial's way */
.sc-foot{display:none}
@media (max-width:900px){
  .dk .scene.live .sc-l,.dk .scene.live .sc-r{display:none}
  .dk .scene.live .sc-b{bottom:7vh}
  .sc-foot{display:grid;gap:6px;padding:14px 22px 0;background:#08090b;font-size:12px;line-height:1.4;color:var(--ink-soft);text-align:center}
  .sc-tag{font-size:14px}
}

/* ---- how it works: glass cards that stack as you scroll ---- */

/* ---- goal wheel: the vial stays while the goals turn past it ---- */
.wheel{padding:60px 0!important}
.wh-stick{display:grid;gap:22px;padding:0 22px;max-width:1320px;margin:0 auto}
.wh-copy h2{font-size:clamp(38px,4.6vw,62px);line-height:1.04;max-width:7.5em}
.wh-copy .btn{margin-top:18px}
.wh-stage{display:none}
.wh-names{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.wh-names a{display:inline-block;font-size:clamp(28px,3.2vw,50px);font-weight:500;letter-spacing:-.03em;line-height:1.12;color:#fff;text-decoration:none;white-space:nowrap}
.wh-names .soft{display:none}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .wheel{--R:min(40vh,26vw);position:relative;height:300vh;padding:0!important;view-timeline:--yp-wheel block}
    .wh-stick{position:sticky;top:0;display:block;height:100vh;height:100svh;max-width:none;overflow:hidden;padding:0}
    .wh-copy{position:absolute;z-index:2;left:max(22px,calc((100vw - 1276px)/2));top:50%;transform:translateY(-50%);width:min(30vw,380px)}
    .wh-stage{display:block;position:absolute;left:43%;top:54%;width:0;height:0}
    .wh-ring{position:absolute;left:calc(var(--R)*-1);top:calc(var(--R)*-1);width:calc(var(--R)*2);height:calc(var(--R)*2);border-radius:50%;border:1.5px dashed rgba(255,255,255,.4);animation:whring linear both;animation-timeline:--yp-wheel;animation-range:contain 0% contain 100%}
    .wh-v{position:absolute;left:0;top:0;height:min(68vh,600px,calc(var(--R)*1.72));width:auto;max-width:none;aspect-ratio:630/1280;transform:translate(-50%,-50%) rotate(14deg);opacity:0;animation:linear both;animation-timeline:--yp-wheel;animation-range:contain 0% contain 100%;filter:drop-shadow(0 40px 50px rgba(0,0,0,.7))}
    .wh-names{display:block;position:absolute;left:43%;top:54%;width:0;height:0;animation:whturn linear both;animation-timeline:--yp-wheel;animation-range:contain 0% contain 100%}
    .wh-names li{position:absolute;left:0;top:0;transform:rotate(calc(var(--i)*26deg)) translateX(calc(var(--R) + 18px)) translateY(-50%);transform-origin:0 0}
    .wh-names a{position:relative;display:block}
    .wh-names .sharp{display:block;opacity:0;animation:linear both;animation-timeline:--yp-wheel;animation-range:contain 0% contain 100%}
    .wh-names .soft{display:block;position:absolute;left:0;top:0;color:transparent;text-shadow:0 0 9px rgba(255,255,255,.62);opacity:.7;pointer-events:none}
    li:nth-child(1) .sharp,.wh-v:nth-of-type(1){animation-name:wh0}
    li:nth-child(2) .sharp,.wh-v:nth-of-type(2){animation-name:wh1}
    li:nth-child(3) .sharp,.wh-v:nth-of-type(3){animation-name:wh2}
    li:nth-child(4) .sharp,.wh-v:nth-of-type(4){animation-name:wh3}
    @media (min-width:821px) and (max-width:1180px){.wh-stage,.wh-names{left:42%!important}.wh-copy{width:24vw}.wh-copy h2{font-size:clamp(30px,3.6vw,44px)}.wh-names a{font-size:clamp(28px,3.4vw,44px)}}
    @media (max-width:820px){
      .wheel{--R:34vw}
      .wh-copy{left:22px;right:22px;top:84px;width:auto;transform:none}
      .wh-copy h2{max-width:none}
      .wh-stage{left:50%;top:56%}
      .wh-v{height:min(40vh,360px)}
      .wh-names{left:0;right:0;width:auto;top:auto;bottom:calc(62px + env(safe-area-inset-bottom,0px));height:44px;animation:none}
      .wh-names li{left:0;right:0;text-align:center;transform:none}
      .wh-names .soft{display:none}
      .wh-names a{font-size:32px}
    }
  }
}
@keyframes whring{to{transform:rotate(120deg)}}
@keyframes whturn{0%,8%{transform:rotate(0)}30%{transform:rotate(-26deg)}56%{transform:rotate(-52deg)}82%,100%{transform:rotate(-78deg)}}
@keyframes wh0{0%,18%{opacity:1}22%,100%{opacity:0}}
@keyframes wh1{0%,22%{opacity:0}26%,42%{opacity:1}46%,100%{opacity:0}}
@keyframes wh2{0%,46%{opacity:0}50%,68%{opacity:1}72%,100%{opacity:0}}
@keyframes wh3{0%,72%{opacity:0}76%,100%{opacity:1}}

/* ---- all online: photo columns glide past, text sits in its own clear column ---- */
.cols5{padding:40px 0!important}
.c5-stick{display:grid;gap:18px;padding:0 22px;max-width:1320px;margin:0 auto}
.c5-mid{text-align:center;max-width:560px;margin:0 auto}
.c5-mid h2{font-size:clamp(38px,4.6vw,62px);line-height:1.04}
.c5-mid p{margin-top:12px;color:var(--ink-soft)}
.c5-mid .btn{margin-top:18px}
.c5{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.c5 img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px}
@media (max-width:820px){.c5-mid{order:-1;padding-bottom:6px}.c5c,.c5d{display:none}.c5 img:nth-child(n+3){display:none}}
@supports (animation-timeline:view()){
  @media (min-width:821px) and (prefers-reduced-motion:no-preference){
    .cols5{position:relative;height:240vh;padding:0!important;view-timeline:--yp-cols block}
    .c5-stick{position:sticky;top:0;height:100vh;height:100svh;max-width:none;overflow:hidden;padding:0 14px;grid-template-columns:1fr 1fr minmax(380px,1.35fr) 1fr 1fr;gap:14px;align-items:center}
    .c5{display:flex;flex-direction:column;align-self:start;gap:14px;will-change:transform;animation:linear both;animation-timeline:--yp-cols;animation-range:contain 0% contain 100%}
    .c5a{animation-name:c5a}.c5b{animation-name:c5b}.c5c{animation-name:c5c}.c5d{animation-name:c5d}
    .c5-mid{grid-column:3;grid-row:1;padding:0 12px}
    .c5a{grid-column:1;grid-row:1}.c5b{grid-column:2;grid-row:1}.c5c{grid-column:4;grid-row:1}.c5d{grid-column:5;grid-row:1}
  }
}
@keyframes c5a{from{transform:translate3d(0,6vh,0)}to{transform:translate3d(0,-70vh,0)}}
@keyframes c5b{from{transform:translate3d(0,44vh,0)}to{transform:translate3d(0,-96vh,0)}}
@keyframes c5c{from{transform:translate3d(0,30vh,0)}to{transform:translate3d(0,-84vh,0)}}
@keyframes c5d{from{transform:translate3d(0,62vh,0)}to{transform:translate3d(0,-60vh,0)}}

/* ---- our good sections, in the new clothes ---- */
.dk .why-sec{padding:40px 0}
.dk .seg button[aria-pressed="true"]{color:var(--on-light)}
.dk .why2{box-shadow:var(--glass-edge)}
.dk .disc-media{background:#13161a}
.dk .disc-panel{background:rgba(255,255,255,.14);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:var(--glass-edge)}
.dk .discover h2{color:#fff}
.dk .discover h2>span:not(.wd),.dk .vs h2>span:not(.wd),.dk .faq-grid h2>span:not(.wd),.dk .life h2>span:not(.wd){color:#8f959c}
.dk .life{background:none}

.dk .pcard{position:relative;background:linear-gradient(175deg,rgba(255,255,255,.085),rgba(255,255,255,.03));border:0;box-shadow:var(--glass-edge);color:#fff}
.dk .pcard:hover{box-shadow:var(--glass-edge),0 30px 50px -28px #000}
.dk .chip{background:rgba(255,255,255,.13);color:#fff}
.dk .pc-img{background:radial-gradient(60% 60% at 50% 58%,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 72%)}
.dk .pc-img img{filter:drop-shadow(0 18px 18px rgba(0,0,0,.5))}
.dk .badges3 li{color:var(--ink-soft)}
.dk .badges3 i{background:rgba(255,255,255,.08);color:var(--ink-soft)}
.dk .badges3 i.fl{background:none}
.dk .pbox{background:rgba(255,255,255,.05);border-color:var(--line);color:#fff}
.dk .pbox[aria-pressed="true"]{background:rgba(159,216,196,.13);border-color:var(--mint)}
.dk .pbox .pp b{color:#fff}
.dk .pbox .save{background:var(--mint);color:var(--on-light)}
.dk .pc-more,.dk .pc-acts .lm{color:#fff}
.dk .soonbox{background:rgba(255,255,255,.06);color:var(--ink-soft)}
.dk .ccard{position:relative;background:linear-gradient(175deg,rgba(255,255,255,.085),rgba(255,255,255,.03));border:0;box-shadow:var(--glass-edge);color:#fff}
.dk .cc-img{background:none}
.dk .cc-img img{filter:drop-shadow(0 12px 12px rgba(0,0,0,.5))}
.dk .tp li{color:var(--ink-soft)}
.dk .car-nav button{background:rgba(255,255,255,.08);border:0;box-shadow:var(--glass-edge);color:#fff}
.dk .car-nav button:hover{background:rgba(255,255,255,.2);color:#fff}
.dk .car-nav button:disabled{background:rgba(255,255,255,.04);color:#fff}

/* photo bands fade into the page */
.dk .cat-band{background:#08090b}
.dk .band-cat .shade{background:linear-gradient(90deg,rgba(8,9,11,.82) 0%,rgba(8,9,11,.5) 55%,rgba(8,9,11,.2) 100%),linear-gradient(0deg,#08090b 0%,rgba(8,9,11,0) 46%)}
.dk .cat-band.side .kb::before{background:linear-gradient(90deg,#08090b 0%,rgba(8,9,11,0) 42%)}
.dk .cta-band{background:#08090b}
.dk .cta-band .shade{background:linear-gradient(90deg,rgba(8,9,11,.9) 0%,rgba(8,9,11,.55) 50%,rgba(8,9,11,.1) 100%),linear-gradient(0deg,#08090b 0%,rgba(8,9,11,0) 26%),linear-gradient(180deg,#08090b 0%,rgba(8,9,11,0) 22%)}
@media (min-width:1001px){
  .dk main>.band-cat:first-child{padding-top:124px}
}
@media (max-width:1000px){
  .dk .cat-band:not(.side) .shade,.dk .cat-band.side .shade{background:linear-gradient(180deg,rgba(8,9,11,.35) 0,rgba(8,9,11,0) 90px,rgba(8,9,11,0) calc(var(--strip)*.34),rgba(8,9,11,.8) calc(var(--strip)*.62),#08090b var(--strip))}
  .dk .cta-band .shade{background:linear-gradient(180deg,rgba(8,9,11,0) calc(var(--strip)*.4),rgba(8,9,11,.8) calc(var(--strip)*.68),#08090b var(--strip))}
  .dk .cta-band{background:#08090b}
}

/* lists, tables, boxes */
.dk .faq-grid{grid-template-columns:minmax(0,1fr);max-width:1000px;margin:0 auto;gap:24px}
.dk .faq-grid>div:first-child{text-align:center}
.dk .faq details{margin-bottom:10px;padding:0 22px;border:0;border-radius:14px;background:linear-gradient(175deg,rgba(255,255,255,.085),rgba(255,255,255,.03));box-shadow:var(--glass-edge)}
.dk .faq summary{padding:20px 34px 20px 0;font-weight:500;font-size:18px}
.dk .step,.dk .pfill,.dk .disc-box{background:linear-gradient(175deg,rgba(255,255,255,.085),rgba(255,255,255,.03));border:0;box-shadow:var(--glass-edge);color:#fff}
.dk .step p,.dk .pfill p,.dk .disc-box p{color:var(--ink-soft)}
.dk .pfill li i,.dk .facts3 i,.dk .tstrip i{background:rgba(255,255,255,.08);color:var(--ink-soft)}
.dk .table,.dk .tw{background:rgba(255,255,255,.04);color:#fff}
.dk .table th{background:rgba(255,255,255,.07);color:var(--ink-soft)}
.dk .wait input{background:rgba(255,255,255,.07);border-color:var(--line);color:#fff}
.dk .panel{background:linear-gradient(175deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:var(--glass-edge)}
.dk .legal-doc{color:var(--ink-soft)}
.dk .legal-doc h2{color:#fff}
.dk .legal-doc a{color:#fff}
.dk .crumb,.dk .crumb a{color:var(--muted)}
.dk .crumb a:hover{color:#fff}
.dk .page-hero{padding-top:112px}
.dk .pills button{background:rgba(255,255,255,.07);color:#fff}
.dk .pills button:hover{background:rgba(255,255,255,.14)}
.dk .pills button[aria-pressed="true"]{background:#fff;color:var(--on-light)}
.dk .pills.sm button{background:none;box-shadow:inset 0 0 0 1px var(--line)}
.dk .pills.sm button[aria-pressed="true"]{background:var(--mint);box-shadow:none;color:var(--on-light)}
.dk .shop-bar{top:60px;background:rgba(8,9,11,.94);border-color:var(--line)}
.dk .shop-empty{color:#fff}
.dk .goalnav a[aria-current]{color:var(--on-light)}

/* ---- product page: big vial on a grey glow, everything else on one glass panel ---- */
.dk main:has(.pdp)>.wrap:first-child{position:relative;isolation:isolate;max-width:1320px;padding-top:92px}
.dk main:has(.pdp)>.wrap:first-child::before{content:"";position:absolute;left:50%;top:0;width:100vw;height:100%;max-height:1000px;margin-left:-50vw;z-index:-1;background:radial-gradient(60% 60% at 30% 40%,#3a3f45 0%,#16191d 60%,#08090b 100%)}
.dk .pdp{grid-template-columns:1.05fr .95fr;gap:26px}
.dk .pdp-media{top:84px}
.dk .pdp-img{background:none;aspect-ratio:1/1.02}
.dk .pdp-img img{filter:drop-shadow(0 40px 50px rgba(0,0,0,.65))}
.dk .pdp>div:last-child{padding:26px;border-radius:18px}
.dk .pdp h1{font-size:clamp(36px,4vw,54px)}
.dk .pdp .sub,.dk .pdp .what{color:var(--ink-soft)}
.dk .pdp .what b,.dk .pdp .dose{color:#fff}
.dk .pdp .dose b{color:#fff}
.dk .checks4 span{color:var(--ink-soft)}
.dk .checks4 svg{color:var(--mint)}
.dk .summary b{color:#fff}
.dk .tstrip li{color:var(--ink-soft)}
@media (max-width:900px){.dk .pdp{grid-template-columns:1fr}.dk .pdp-media{top:0}.dk main:has(.pdp)>.wrap:first-child{padding-top:92px}}

/* footer with a big mark */
.dk footer{background:#08090b;border-top:1px solid var(--line);color:var(--ink-soft);margin-top:40px;overflow:hidden}
.dk .foot a{color:var(--ink-soft)}
.dk .legal{color:var(--muted);border-color:var(--line)}
.f-mark{display:block;width:min(70vw,860px);height:auto;margin:34px auto -8%;opacity:.1;filter:brightness(0) invert(1)}

@media (prefers-reduced-motion:reduce){
  .h5-bg{position:absolute}
}

/* ---- one section: why a compounding pharmacy. The big line stays while the reasons pass; the switch flips them to a research chemical site ---- */
.ph-sec{padding-top:8px!important}
.dk .why2{background:linear-gradient(175deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.dk .why2::after{display:none}
.dk .why2-list li{background:rgba(255,255,255,.05);border-color:var(--line)}
.dk .why2-list b{font-size:14px;font-weight:500;color:var(--ink-soft)}
.dk .why2-list p{font-size:16px;color:#fff}
.dk [data-side="rc"] .why2-list p{color:var(--ink-soft)}
.dk [data-side="rc"] .why2-list li{background:rgba(255,255,255,.03);border-color:var(--line)}
.dk .mk .ok{background:var(--mint);color:var(--on-light)}
.dk .wi{background:rgba(255,255,255,.08);color:var(--ink-soft)}
.dk .why2.whyp{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px 56px;align-items:start;padding:0;background:none;box-shadow:none;overflow:visible}
.whyp .why2-head h2{margin-top:8px;font-size:clamp(36px,4.6vw,64px);line-height:1.02}
.whyp .why2-head>p:not(.lbl){margin-top:16px;max-width:30em;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.whyp .seg{display:grid;width:max-content;max-width:100%}
.whyp .btn{display:flex;width:max-content;margin-top:16px}
.ph-fine{grid-column:1/-1;margin-top:8px}
/* the outgoing line leaves before the new one arrives, so the two never sit on top of each other */
.dk [data-side="us"] .t-rc,.dk [data-side="rc"] .t-us{transition:opacity .12s ease,transform .12s ease}
.dk [data-side="us"] .t-us,.dk [data-side="rc"] .t-rc{transition:opacity .3s var(--ease-out) calc(.14s + var(--i) * 60ms),transform .3s var(--ease-out) calc(.14s + var(--i) * 60ms)}
@media (max-width:900px){.dk .why2.whyp{grid-template-columns:minmax(0,1fr)}}

/* ---- buyers' words: only real ones, process only, no stars ---- */
.revs-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.rev{margin:0;padding:24px;border-radius:22px;background:linear-gradient(175deg,rgba(255,255,255,.085),rgba(255,255,255,.03));box-shadow:var(--glass-edge)}
.rev blockquote{margin:0;font-size:18px;line-height:1.4}
.rev figcaption{margin-top:14px;font-size:14px;color:var(--ink-soft)}
.rev figcaption span{display:block;color:var(--mint)}
.rev.empty{background:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}
.rev.empty blockquote{color:var(--muted)}
@media (max-width:900px){.revs-g{grid-template-columns:1fr}}

/* ---- product page: effects only (Karan, 2 Nov). Layout and words stay as they are. Transform and opacity only. ---- */
.pdp-glow{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;margin:-31% 0 0 -31%;border-radius:50%;background:radial-gradient(closest-side,rgba(159,216,196,.2),transparent);pointer-events:none}
.pdp-ring{position:absolute;left:50%;top:50%;width:44%;aspect-ratio:1;margin:-22% 0 0 -22%;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(159,216,196,.5);opacity:0;pointer-events:none}
.pdp-sh{position:absolute;left:0;top:8%;width:100%;height:84%;overflow:hidden;pointer-events:none;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.pdp-sh i{position:absolute;inset:0;background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.75) 50%,transparent 64%);transform:translate3d(-110%,0,0)}
@media (prefers-reduced-motion:no-preference){
  .dk .pdp-tilt{animation:pdpIn .9s cubic-bezier(.2,.8,.2,1) backwards}
  .pdp-ring{animation:pdpRing 1.5s cubic-bezier(.2,.7,.3,1) .35s both}
  .pdp-ring.r2{animation-delay:.7s}
  .pdp-sh i{animation:pdpSheen 1.2s cubic-bezier(.45,0,.2,1) .7s both}
  .pdp-img.hit .pdp-ring{animation:pdpRing2 1s cubic-bezier(.2,.7,.3,1) both}
  .pdp-img.hit .pdp-ring.r2{animation-delay:.14s}
  .pdp-img.hit .pdp-sh i{animation:pdpSheen2 .8s cubic-bezier(.45,0,.2,1) both}
  /* the info panel arrives piece by piece */
  .dk .pdp>div:last-child>*{animation:pdpRise .6s cubic-bezier(.2,.8,.2,1) backwards}
  .dk .pdp>div:last-child>:nth-child(1){animation-delay:.1s}.dk .pdp>div:last-child>:nth-child(2){animation-delay:.14s}.dk .pdp>div:last-child>:nth-child(3){animation-delay:.18s}.dk .pdp>div:last-child>:nth-child(4){animation-delay:.22s}.dk .pdp>div:last-child>:nth-child(5){animation-delay:.26s}.dk .pdp>div:last-child>:nth-child(6){animation-delay:.3s}.dk .pdp>div:last-child>:nth-child(7){animation-delay:.34s}.dk .pdp>div:last-child>:nth-child(8){animation-delay:.38s}.dk .pdp>div:last-child>:nth-child(n+9){animation-delay:.42s}
  .dk .checks4 svg{animation:pdpPop .42s cubic-bezier(.2,1.3,.4,1) backwards}
  .dk .checks4 span:nth-child(1) svg{animation-delay:.5s}.dk .checks4 span:nth-child(2) svg{animation-delay:.6s}.dk .checks4 span:nth-child(3) svg{animation-delay:.7s}.dk .checks4 span:nth-child(4) svg{animation-delay:.8s}
  .dk .pdp-media .badges3 li{animation:pdpRise .6s cubic-bezier(.2,.8,.2,1) backwards}
  .dk .pdp-media .badges3 li:nth-child(1){animation-delay:.5s}.dk .pdp-media .badges3 li:nth-child(2){animation-delay:.6s}.dk .pdp-media .badges3 li:nth-child(3){animation-delay:.7s}
  /* plans answer the pointer; the buy button catches a light */
  .dk .pdp .pbox{transition:background-color .2s ease,border-color .2s ease,transform .2s cubic-bezier(.2,.8,.2,1)}
  .dk .pdp .pbox:hover{transform:translate3d(0,-2px,0)}
  .dk .pdp .pbox:active{transform:scale(.985)}
  .dk .pdp [data-s="go"]{position:relative;overflow:hidden}
  .dk .pdp [data-s="go"]::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(159,216,196,.75) 50%,transparent 65%);transform:translate3d(-110%,0,0);animation:pdpSheen 1.1s cubic-bezier(.45,0,.2,1) 1.4s both;pointer-events:none}
  .dk .pdp [data-s="go"]:hover::after{animation:pdpSheen2 .8s cubic-bezier(.45,0,.2,1) both}
  /* as you scroll the vial lifts and turns a little, moved by the browser with no lag */
  @supports (animation-timeline:scroll()){
    @media (min-width:901px){
      .dk .pdp-img{animation:pdpLift linear both;animation-timeline:scroll(root);animation-range:0 800px;will-change:transform}
    }
  }
}
@keyframes pdpIn{from{opacity:0;transform:translate3d(0,34px,0) scale(.93)}}
@keyframes pdpRise{from{opacity:0;transform:translate3d(0,14px,0)}}
@keyframes pdpPop{from{opacity:0;transform:scale(.3)}}
@keyframes pdpRing{0%{opacity:.8;transform:scale(.7)}100%{opacity:0;transform:scale(2.1)}}
@keyframes pdpRing2{0%{opacity:.8;transform:scale(.7)}100%{opacity:0;transform:scale(2.1)}}
@keyframes pdpSheen{from{transform:translate3d(-110%,0,0)}to{transform:translate3d(110%,0,0)}}
@keyframes pdpSheen2{from{transform:translate3d(-110%,0,0)}to{transform:translate3d(110%,0,0)}}
@keyframes pdpLift{to{transform:translate3d(0,-26px,0) rotate(-2.4deg) scale(.96)}}
/* answers in every FAQ open smoothly where the browser can */
@supports (interpolate-size:allow-keywords){
  @media (prefers-reduced-motion:no-preference){
    .dk .faq{interpolate-size:allow-keywords}
    .dk .faq details::details-content{block-size:0;overflow:clip;transition:block-size .3s cubic-bezier(.2,.8,.2,1),content-visibility .3s allow-discrete}
    .dk .faq details[open]::details-content{block-size:auto}
  }
}

/* ---- polish, 2 Nov (unslop critique, Karan's yes): quiet labels, one accent, no loops that mean nothing ---- */
.dk b,.dk strong{font-weight:600}
.dk .lbl{font-size:14px;font-weight:500;color:var(--ink-soft)}
.dk .chip{font-size:12px;font-weight:500}
.dk .pill-ok{font-size:14px;font-weight:500}
.dk .badges3 li{font-size:12px;font-weight:500;line-height:1.25}
.dk .car-nav button{font-family:inherit}
.dk .kb img,.dk .pdp-img img,.dk .vi{animation:none}
.dk .checkrow-track{flex-wrap:wrap;justify-content:center;gap:8px 28px;width:auto;max-width:var(--wrap);animation:none}

/* ---- three steps with the order phone: what happens after you pay ---- */
.how5-in{display:grid;grid-template-columns:minmax(0,1fr) 416px;gap:48px;align-items:center}
.how5-h{font-size:clamp(36px,4.6vw,56px);line-height:1.04}
.how5-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:20px}
.how5-list li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px}
.how5-list .hn{font-size:14px;line-height:28px;color:var(--muted);font-variant-numeric:tabular-nums}
.how5-list h3{font-size:20px;line-height:28px}
.how5-list p{margin-top:4px;font-size:16px;line-height:24px;color:var(--ink-soft);max-width:30em}
.how5-copy .btn{margin-top:28px}
.how5-copy .small{margin-top:16px}
.yo{--w:360px;--s:.8411;position:relative;width:416px;max-width:100%;height:644px;margin:0;overflow:hidden;contain:paint;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 48px),transparent)}
.yo-ph{position:absolute;left:50%;top:28px;margin-left:calc(var(--w) / -2);width:var(--w);padding:calc(var(--s)*3px);border-radius:calc(var(--s)*77px);background:linear-gradient(135deg,#5b5c61,#2b2c2f 22%,#48494d 48%,#232427 74%,#404145)}
.yo-glass{padding:calc(var(--s)*10px);border-radius:calc(var(--s)*74px);background:#0b0b0d}
.yo-win{position:relative;height:calc(var(--s)*874px);overflow:hidden;border-radius:calc(var(--s)*64px);background:#0b0d10}
.yo-scr{position:absolute;left:0;top:0;width:402px;height:874px;transform:scale(var(--s));transform-origin:0 0;color:#f4f5f3;font-family:Jost,-apple-system,system-ui,sans-serif}
.yo-time{position:absolute;z-index:2;top:22px;left:0;width:138px;font:600 18px/22px -apple-system,system-ui,sans-serif;text-align:center}
.yo-island{position:absolute;z-index:3;top:14px;left:50%;width:95px;height:37px;margin-left:-47.5px;border-radius:18.5px;background:#000}
.yo-glyphs{position:absolute;z-index:2;top:25px;left:285px;display:flex;align-items:flex-start;gap:8px}
.yo-glyphs svg{display:block}
.yo-app{position:absolute;inset:0;padding:92px 16px 0}
.yo-title{padding:0 4px;font-size:34px;font-weight:500;line-height:40px;letter-spacing:-.02em}
.yo-card{position:relative;display:flex;flex-direction:column;justify-content:center;height:148px;margin-top:28px;padding:0 20px;border-radius:22px;background:#171a1f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.yo-name{margin-bottom:4px;font-size:28px;font-weight:500;line-height:36px;letter-spacing:-.015em}
.yo-meta{font-size:15px;line-height:20px;color:#a9afb6}
.yo-card img{position:absolute;right:24px;top:12px;width:61px;height:124px}
.yo-steps{margin-top:12px;padding:4px 0 80px;border-radius:22px;background:#171a1f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.yo-step{position:relative;display:flex;align-items:center;gap:12px;padding:12px}
.yo-txt{min-width:0}
.yo-txt b{display:block;font-size:17px;font-weight:500;line-height:22px;transition:color .3s ease}
.yo-sub{display:grid;font-size:15px;line-height:20px;color:#a9afb6;transition:color .3s ease}
.yo-sub>span{grid-area:1/1;transition:opacity .35s ease}
.yo-step[data-state="done"] .b4{opacity:0}
.yo-step:not([data-state="done"]) .b4~.af{opacity:0}
.yo-step[data-state="next"] b{color:#8a9097}
.yo-step[data-state="next"] .yo-sub{color:#6f757c}
.yo-seg{position:absolute;left:23px;top:50%;width:2px;height:100%;overflow:hidden;background:#2a2e34}
.yo-seg i{position:absolute;inset:0;background:var(--mint);transform:scaleY(0);transform-origin:50% 0;transition:transform .8s cubic-bezier(.45,0,.1,1)}
.yo-step[data-state="done"] .yo-seg i{transform:none}
.yo-chk{position:relative;flex:none;overflow:visible;border-radius:50%;background:#171a1f}
.yo-chk circle,.yo-chk path{fill:none}
.yo-chk .r{stroke:#4a4f56;stroke-width:1.5;transition:opacity .2s ease}
.yo-chk .a{stroke:#f4f5f3;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:.28 1;opacity:0;transform-origin:8px 8px;transition:opacity .18s ease}
.yo-chk .f{fill:var(--mint);opacity:0;transform:scale(.35);transform-origin:8px 8px}
.yo-chk .t{stroke:#0b0d10;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.yo-step[data-state="now"] .a{opacity:1;animation:yoSpin .8s linear infinite}
.yo-step[data-state="done"] .r{opacity:0}
.yo-step[data-state="done"] .f{opacity:1;transform:none;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.yo-step[data-state="done"] .t{stroke-dashoffset:0;transition:stroke-dashoffset .3s ease .12s}
@keyframes yoSpin{to{transform:rotate(360deg)}}
.yo-note{position:absolute;z-index:2;top:56px;left:18px;right:18px;display:flex;align-items:center;gap:13px;padding:14px 17px 14px 14px;border-radius:23px;background:#2b2f35;box-shadow:0 8px 28px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.08);font-size:15px;line-height:18px;animation:yoNote .52s cubic-bezier(.2,.9,.25,1) both}
.yo-note[hidden]{display:none}
.yo-note img{flex:none;width:38px;height:38px}
.yo-note>div{flex:1;min-width:0}
.yo-nh{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.yo-nh b{font-weight:600}
.yo-nh span{font-size:12px;color:#a9afb6}
.yo-note p{margin:0}
@keyframes yoNote{from{transform:translateY(-110px)}}
@media (max-width:980px){
  .how5-in{grid-template-columns:minmax(0,1fr);gap:24px;justify-items:center}
  .how5-copy{width:100%}
}
@media (max-width:460px){
  .yo{--w:310px;--s:.7243;width:358px;height:556px}
  .yo-ph{top:24px}
  .yo-nh span{display:none}
}
@media (prefers-reduced-motion:reduce){.yo-note{animation:none}.yo-step[data-state="now"] .a{animation:none}}

/* "As seen in" strip (2 Nov). Renders only for outlets with a live article (build.mjs, PRESS).
   One sentence-case label, white logos sized by eye so no name shouts, each one opens its article. */
.dk .press{padding:clamp(26px,3.6vw,40px) 0;border-top:1px solid var(--line)}
.dk .press-in{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(24px,4vw,56px)}
.dk .press-l{margin:0;font-size:15px;line-height:1.3;color:var(--ink-soft);white-space:nowrap}
.dk .press-g{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center}
.dk .press-g li{display:flex;justify-content:center;border-left:1px solid var(--line)}
.dk .press-g a{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:4px 12px;opacity:.66;transition:opacity .18s ease-out}
.dk .press-g a:hover,.dk .press-g a:focus-visible{opacity:1}
.dk .press-g img{display:block;height:var(--h,24px);width:auto;max-width:100%;filter:brightness(0) invert(1)}
.dk .press-g small{font-size:10.5px;line-height:1;color:var(--ink-soft)}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .dk .press-g li{animation:press-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  .dk .press-g li:nth-child(2){animation-range:entry 5% entry 60%}
  .dk .press-g li:nth-child(3){animation-range:entry 10% entry 65%}
  .dk .press-g li:nth-child(4){animation-range:entry 15% entry 70%}
  .dk .press-g li:nth-child(5){animation-range:entry 20% entry 75%}
  .dk .press-g li:nth-child(6){animation-range:entry 25% entry 80%}
}}
@keyframes press-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .dk .press-in{grid-template-columns:1fr;gap:14px;text-align:center}
  .dk .press-g{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px}
  .dk .press-g li{border-left:0}
  .dk .press-g img{height:calc(var(--h,24px)*.84)}
}

/* Product page support line as a highlighter mark (Karan, 3 Nov: "pop out, different colour, bolder, like a highlight").
   Mint marker, dark bold text, drawn left to right once on load; wraps line by line on phones. */
.dk .pdp .sub{margin-top:16px;font-size:19px;line-height:1.55}
.dk .pdp .sub .hl{color:#0b0d10;font-weight:600;padding:.1em .38em;border-radius:6px;
  background:linear-gradient(100deg,var(--mint) 0%,#c6eddf 100%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (prefers-reduced-motion:no-preference){.dk .pdp .sub .hl{animation:hl-draw .75s cubic-bezier(.2,.7,.2,1) .3s both}}
@keyframes hl-draw{from{background-size:0% 100%;color:var(--mint)}55%{color:var(--mint)}to{background-size:100% 100%;color:#0b0d10}}
@media (max-width:760px){.dk .pdp .sub{font-size:17px}}