/* TestD site pages (10 Oct 2026): the homepage's header, menu, footer and type, shared by every page built by
   build-pages.py, plus the blocks those pages are made of. The homepage keeps its own inline copy of the chrome;
   the blocks it shares with these pages (trust badge, reviews, marks, FAQ, team) live in blocks.css. */
@font-face{font-family:Graphik;src:url(../assets/fonts/Graphik-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:Graphik;src:url(../assets/fonts/Graphik-Medium.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:Graphik;src:url(../assets/fonts/Graphik-Semibold.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:Graphik;src:url(../assets/fonts/Graphik-Bold.woff) format("woff");font-weight:700;font-display:swap}
:root{
  --red:#FF0046;--ink:#000;--paper:#fff;
  --brown1:#64381E;--brown2:#7B4F33;--caramel:#A8744C;--peach:#F2C29A;--rust:#9C3F22;--sand:#F4E4CF;--bone:#F2F2F2;
  --fresh-blue:#1F4ED8;--sky:#DCEBF7;--mist:#F3F5F7;--ok:#12A150;--amber:#E3A33C;
  --gut:clamp(16px,2vw,28px);--pad:clamp(24px,4.4vw,64px);--r:28px;--rc:22px;--ease:cubic-bezier(.16,1,.3,1);
  --wrap:1320px;--navh:84px;
}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:#000;font-family:Graphik,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid #000;outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 calc(var(--gut) + 22px)}
.h1{font-size:clamp(46px,6.6vw,104px);font-weight:600;letter-spacing:-.05em;line-height:.92}
.h2{font-size:clamp(40px,5.2vw,80px);font-weight:600;letter-spacing:-.045em;line-height:.95}
.h3{font-size:clamp(28px,2.8vw,40px);font-weight:600;letter-spacing:-.035em;line-height:1.02}
.lede{font-size:19px;line-height:1.45;max-width:46ch}
.body{font-size:16.5px;line-height:1.55}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.src{display:block;font-size:12px;line-height:1.4;opacity:.62}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:99px;font-weight:600;font-size:15px;white-space:nowrap;border:0;cursor:pointer;transition:translate .3s var(--ease),box-shadow .3s var(--ease),background .2s,color .2s}
.btn:hover{translate:0 -2px}
.btn.red{background:var(--red);color:#fff}.btn.ink{background:#000;color:#fff}.btn.white{background:#fff;color:#000}
.btn.line{border:1.5px solid currentColor;background:transparent}
.btn i{font-style:normal;font-size:18px;line-height:1}
.btn s{opacity:.7;font-weight:500}
.band{margin:var(--gut) var(--gut) 0;border-radius:var(--r);overflow:hidden;position:relative;isolation:isolate}
.section{padding:clamp(72px,9vw,132px) 0}
.section.tight{padding:clamp(48px,6vw,88px) 0}

/* ---------- Header: fixed, the wordmark folds into the red-square D once you scroll (as on the homepage) ---------- */
body{padding-top:84px}
.nav{--lh:42px;position:fixed;top:0;left:0;right:0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:84px;padding:0 calc(var(--gut) + 22px);
  background:#fff;color:#000;border-radius:0 0 24px 24px;transition:height .4s var(--ease),box-shadow .4s}
.nav.small{height:64px;box-shadow:0 8px 28px rgba(0,0,0,.08)}
.nav .logo{display:block;height:var(--lh);width:calc(var(--lh) * 3.5226);transition:width .5s var(--ease),height .4s var(--ease)}
.nav .logo svg{display:block;height:var(--lh);width:calc(var(--lh) * 3.5226);overflow:visible;transition:height .4s var(--ease),width .4s var(--ease)}
.nav.small .logo{width:var(--lh)}
.lg-test,.lg-d{transform-box:view-box;transform-origin:0 0;transition:transform .5s var(--ease),opacity .3s var(--ease)}
.lg-d path{fill:var(--red);transition:fill .35s var(--ease)}
.lg-sq{fill:var(--red);transform-box:fill-box;transform-origin:center;transform:scale(.6);opacity:0;transition:transform .5s var(--ease),opacity .35s var(--ease)}
.nav.small .lg-test{opacity:0;transform:translateX(-30px)}
.nav.small .lg-d{transform:translate(-107.16px,7.94px) scale(.7506)}
.nav.small .lg-d path{fill:#fff}
.nav.small .lg-sq{transform:none;opacity:1}
.nav .links{display:flex;gap:30px;font-size:15px;font-weight:500;transition:opacity .3s var(--ease)}
.nav .links a{position:relative}
.nav .links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--red)}
.nav .right{display:flex;justify-content:flex-end;align-items:center;gap:22px;font-size:15px;font-weight:500}
.nav .right a.dash{display:inline-flex;align-items:center;gap:7px}
.nav .right a.dash svg{width:13px;height:13px;fill:currentColor;flex:none}
.nav .btn{height:42px;padding:0 20px;font-size:14px}
.nav .burger{display:grid;align-content:center;gap:5px;width:30px;height:30px;padding:0 4px;margin-right:-4px;border:0;background:none;cursor:pointer}
.nav .burger i{display:block;height:2px;border-radius:2px;background:#000}
section[id],div[id]{scroll-margin-top:84px}
.menu-scrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.32);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.menu-panel{position:fixed;top:0;right:0;bottom:0;z-index:71;width:min(440px,100vw);background:#fff;color:#000;border-radius:28px 0 0 28px;display:flex;flex-direction:column;
  padding:20px clamp(24px,3vw,36px) 28px;overflow-y:auto;overscroll-behavior:contain;box-shadow:-24px 0 60px rgba(0,0,0,.12);
  transform:translateX(100%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s}
.menu-open .menu-scrim{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.menu-open .menu-panel{transform:none;visibility:visible;transition:transform .5s var(--ease)}
.mp-top{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-bottom:10px}
.mp-mark{width:40px;height:40px;display:block}
.mp-close{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#f1f1f1;cursor:pointer;transition:background .2s}
.mp-close:hover{background:#e6e6e6}
.mp-close svg{width:18px;height:18px;fill:none;stroke:#000;stroke-width:2;stroke-linecap:round}
.mp-groups{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
.mp-group{grid-column:1 / -1;padding:16px 0 12px;border-top:1px solid rgba(0,0,0,.1)}
.mp-group.small{grid-column:auto}
.mp-group h3,.mp-group .mp-h{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.mp-group a{display:block;width:fit-content;font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.15;padding:4px 0;transition:color .2s}
.mp-group.small a{font-size:15.5px;font-weight:500;letter-spacing:-.005em}
.mp-group a:hover,.mp-group a[aria-current="page"]{color:var(--red)}
.mp-cta{margin-top:auto;padding-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mp-cta .btn{height:52px;font-size:15px;padding:0 16px}
.mp-cta .dash{display:flex;align-items:center;justify-content:center;gap:9px;height:52px;border-radius:99px;border:1.5px solid #000;font-weight:600;font-size:15px}
.mp-cta .dash svg{width:14px;height:14px;fill:currentColor}
.menu-open .mp-group,.menu-open .mp-cta{animation:mp-in .55s var(--ease) both}
.menu-open .mp-group:nth-child(2){animation-delay:.04s}.menu-open .mp-group:nth-child(3){animation-delay:.08s}
.menu-open .mp-group:nth-child(4){animation-delay:.12s}.menu-open .mp-cta{animation-delay:.16s}
@keyframes mp-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

/* ---------- Footer (the homepage's) ---------- */
.foot{background:#000;color:#fff;padding:96px 0 0;margin-bottom:var(--gut)}
.foot .in{max-width:1408px;margin:0 auto;padding:0 48px;position:relative}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) 2fr;gap:56px}
.foot-top h3{font-size:50px;font-weight:600;letter-spacing:-.04em;line-height:1}
.foot-top .btn{margin-top:32px;height:54px;padding:0 28px;font-size:16px}
.foot .social{display:flex;gap:12px;margin-top:28px}
.foot .social a{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);transition:border-color .2s,background .2s}
.foot .social a:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.foot .social svg{width:28px;height:28px;fill:#fff}
.foot .social svg.line{fill:none;stroke:#fff;stroke-width:1.8}.foot .social svg.line .dot{fill:#fff;stroke:none}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.foot-cols h4,.foot-cols .fh{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.foot-cols li{font-size:15.5px;font-weight:500;padding:5px 0}
.foot-cols a{transition:opacity .2s}.foot-cols a:hover{opacity:.7}
.foot-marks{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:64px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.foot-marks span{display:inline-flex;align-items:center;gap:8px}
.foot-marks svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.8}
.legal{display:flex;justify-content:space-between;gap:48px;margin-top:28px;padding-top:24px;border-top:1.5px solid #fff;font-size:13px;line-height:1.5}
.legal p{max-width:78ch}.legal .fn{margin-top:8px;opacity:.8}
.legal nav{display:flex;gap:24px;white-space:nowrap;font-weight:500}
.wordmark{padding-top:72px;margin-bottom:-30px}
.wordmark img{width:100%;height:auto}

/* ---------- Page hero ---------- */
.phero{padding:clamp(40px,6vw,88px) 0 clamp(36px,5vw,64px)}
.phero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end}
.phero .eyebrow{margin-bottom:22px}
.phero h1{max-width:12ch}
.phero .side{display:flex;flex-direction:column;gap:24px;padding-bottom:10px}
.phero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.athome{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 14px 0 10px;border-radius:99px;background:var(--bone);font-size:13.5px;font-weight:600;width:fit-content}
.athome svg{width:18px;height:18px;fill:none;stroke:#000;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.athome.dark{background:rgba(255,255,255,.14);color:#fff}.athome.dark svg{stroke:#fff}
.pmedia{margin:0 var(--gut);border-radius:var(--r);overflow:hidden;position:relative;height:clamp(360px,52vw,720px);background:#ECECEC}
.pmedia img,.pmedia video{width:100%;height:100%;object-fit:cover}
.pmedia .cap{position:absolute;left:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,36px);right:clamp(20px,3vw,40px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;color:#fff;z-index:2}
.pmedia::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent);pointer-events:none}
.pmedia .cap b{font-size:clamp(20px,2vw,28px);font-weight:600;letter-spacing:-.03em;line-height:1.1;max-width:22ch}

/* ---------- Two columns ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.split.rev .smedia{order:-1}
.split .stext{display:flex;flex-direction:column;gap:22px}
.smedia{border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:4/5;background:#eee}
.smedia.wide{aspect-ratio:4/3}
.smedia img,.smedia video{width:100%;height:100%;object-fit:cover}
.ticks{display:flex;flex-direction:column;gap:12px;font-size:16.5px;line-height:1.45}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:12px}
.ticks li::before{content:"";width:22px;height:22px;margin-top:1px;border-radius:50%;background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.4L17.5 8.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.dark .ticks li::before{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.4L17.5 8.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ---------- Section heads ---------- */
.shead{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(36px,4.5vw,64px)}
.shead .eyebrow{margin-bottom:18px}
.shead.center{grid-template-columns:1fr;text-align:center;justify-items:center}
.shead.center .lede{margin:0 auto}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:var(--gut)}
.step{display:flex;flex-direction:column;gap:16px}
.step .simg{border-radius:var(--rc);overflow:hidden;aspect-ratio:4/5;background:#eee;position:relative}
.step .simg img,.step .simg video{width:100%;height:100%;object-fit:cover}
.step .n{position:absolute;left:14px;top:14px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;font-size:15px;font-weight:600;z-index:1}
.step h3{font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.step p{font-size:15.5px;line-height:1.5}
.step .meta{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.6}

/* ---------- Panel cards (What we test) ---------- */
.pfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.pfilter button{height:40px;padding:0 18px;border-radius:99px;border:1.5px solid rgba(0,0,0,.14);background:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.pfilter button[aria-pressed="true"]{background:#000;color:#fff;border-color:#000}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--gut)}
.pcard{display:flex;flex-direction:column;gap:16px;padding:26px;border-radius:var(--rc);background:var(--bone);min-height:100%;transition:transform .35s var(--ease),box-shadow .35s}
.pcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.pcard[hidden]{display:none}
.pcard .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pcard .k{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.pcard h3{font-size:28px;font-weight:600;letter-spacing:-.035em;line-height:1.02}
.pcard .who{font-size:15px;line-height:1.45}
.pcard .count{display:grid;place-items:center;min-width:46px;height:46px;padding:0 10px;border-radius:99px;background:#000;color:#fff;font-size:15px;font-weight:600}
.pcard ul{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.pcard li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:10px 12px;border-radius:12px;background:#fff;font-size:14.5px}
.pcard li b{font-weight:600}
.pcard li span{font-size:12.5px;opacity:.62;text-align:right}
.pcard .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:6px}
.pcard .foot small{font-size:13px;font-weight:600}
.pcard .go{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#000;color:#fff;font-size:18px}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--gut)}
.stat{padding:30px;border-radius:var(--rc);background:var(--bone);display:flex;flex-direction:column;gap:12px;min-height:250px}
.stat .big{font-size:clamp(56px,6vw,92px);font-weight:600;letter-spacing:-.06em;line-height:.9}
.stat .big small{font-size:.4em;letter-spacing:-.02em;margin-left:4px}
.stat p{font-size:16px;line-height:1.45}
.stat .src{margin-top:auto}
.stat.ink{background:#000;color:#fff}.stat.red{background:var(--red);color:#fff}.stat.blue{background:var(--fresh-blue);color:#fff}
.stat.peach{background:var(--peach)}.stat.sky{background:var(--sky)}

/* ---------- Compare table ---------- */
.compare{border-radius:var(--rc);overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.12)}
.compare table{width:100%;border-collapse:collapse;font-size:15.5px}
.compare th,.compare td{padding:18px 22px;text-align:left;border-bottom:1px solid rgba(0,0,0,.06);vertical-align:top}
.compare thead th{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:var(--bone)}
.compare thead th.us{background:#000;color:#fff}
.compare td.us{font-weight:600;background:rgba(0,0,0,.025)}
.compare tr:last-child td{border-bottom:0}

/* ---------- Dark / coloured bands ---------- */
.band.ink{background:#000;color:#fff}
.band.brown{background:var(--brown1);color:#fff}
.band.caramel{background:var(--caramel);color:#fff}
.band.bone{background:var(--bone)}
.band.sky{background:var(--sky)}
.band.blue{background:var(--fresh-blue);color:#fff}
.band .inner{padding:clamp(48px,6vw,96px) clamp(24px,5vw,80px)}
.topo::before{content:"";position:absolute;inset:-10% -10%;z-index:-1;background:url(../assets/testd-topo-map.svg) center/cover no-repeat;opacity:.22;pointer-events:none}
.band.ink.topo::before{opacity:.18}

/* ---------- Closing call to action ---------- */
.cta-band{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);min-height:520px}
.cta-band .copy{padding:clamp(48px,6vw,88px) clamp(28px,5vw,80px);display:flex;flex-direction:column;justify-content:center;gap:22px}
.cta-band h2{font-size:clamp(42px,5vw,76px);font-weight:600;letter-spacing:-.045em;line-height:.95;max-width:12ch}
.cta-band p{font-size:18px;line-height:1.45;max-width:40ch;opacity:.86}
.cta-band .ctas{display:flex;flex-wrap:wrap;gap:12px}
.cta-band .img{position:relative;min-height:360px}
.cta-band .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Video band ---------- */
.vband{position:relative;margin:var(--gut) var(--gut) 0;border-radius:var(--r);overflow:hidden;min-height:clamp(480px,56vw,780px);display:flex;align-items:flex-end;color:#fff;isolation:isolate}
.vband video,.vband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.vband::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.1) 100%)}
.vband .inner{width:100%;padding:clamp(28px,4vw,64px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.vband h2{font-size:clamp(40px,5vw,78px);font-weight:600;letter-spacing:-.045em;line-height:.95}
.vband p{font-size:17px;line-height:1.5;max-width:46ch}

/* ---------- Doctor / portal mock ---------- */
.portal{border-radius:var(--rc);background:#fff;color:#000;box-shadow:0 30px 80px rgba(0,0,0,.18);overflow:hidden;font-size:14px}
.portal .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#f4f4f2;border-bottom:1px solid rgba(0,0,0,.08)}
.portal .bar i{width:10px;height:10px;border-radius:50%;background:#ddd}
.portal .bar span{margin-left:10px;font-size:12px;font-weight:600;opacity:.6}
.portal .bd{padding:20px;display:grid;gap:12px}
.portal .row{display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:#fafaf8}
.portal .row b{font-weight:600}
.portal .pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:600;background:#e8f5ee;color:#0b6b37}
.portal .pill.near{background:#fdf1dc;color:#8a5a00}.portal .pill.out{background:#ffe3ea;color:#b0002f}
.portal .head{display:flex;justify-content:space-between;align-items:center}
.portal .head h4,.portal .head .ph{font-size:18px;font-weight:600;letter-spacing:-.02em}

/* ---------- Media cards row ---------- */
.mcards{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--gut)}
.mcard{border-radius:var(--rc);overflow:hidden;background:var(--bone);display:flex;flex-direction:column}
.mcard .mi{aspect-ratio:4/3;overflow:hidden;background:#ddd}
.mcard .mi img,.mcard .mi video{width:100%;height:100%;object-fit:cover}
.mcard .mt{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px}
.mcard h3{font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.mcard p{font-size:15.5px;line-height:1.5}

/* ---------- Timeline ---------- */
.tline{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));gap:0;position:relative}
.tline::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:rgba(0,0,0,.12)}
.dark .tline::before{background:rgba(255,255,255,.25)}
.tline li{position:relative;padding:0 18px 0 0}
.tline .dot{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#000;color:#fff;font-size:14px;font-weight:600;position:relative;z-index:1;margin-bottom:18px}
.dark .tline .dot{background:#fff;color:#000}
.tline li.red .dot{background:var(--red);color:#fff}
.tline b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.tline p{font-size:15px;line-height:1.45;opacity:.85}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .steps{--cols:2}
  .stats{--cols:2}
  .mcards{--cols:2}
  .tline{--cols:1;gap:22px}.tline::before{left:19px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .tline li{display:grid;grid-template-columns:40px 1fr;column-gap:18px;padding:0}.tline .dot{margin:0;grid-row:span 2}
}
@media (max-width:980px){
  .nav{grid-template-columns:auto 1fr;padding:0 calc(var(--gut) + 4px);--lh:31px}
  .nav .links{display:none}
  .phero .wrap,.split,.shead,.vband .inner,.cta-band,.foot-top{grid-template-columns:minmax(0,1fr)}
  .split.rev .smedia{order:0}
  .foot .in{padding:0 24px}
  .foot-cols{grid-template-columns:1fr 1fr}
  .legal{flex-direction:column;gap:12px}
}
@media (max-width:760px){
  body{padding-top:76px}
  .nav{--lh:40px;border-radius:0 0 18px 18px}
  .nav.small{--lh:34px;height:58px}
  .nav .right a.dash{display:none}
  .menu-panel{width:100vw;border-radius:0;padding:16px calc(var(--gut) + 4px) 24px}
  .wrap{padding:0 calc(var(--gut) + 4px)}
  .steps,.stats,.mcards{--cols:1}
  .lede{font-size:17.5px}
  .compare{overflow-x:auto}.compare table{min-width:620px}
  .portal .row{grid-template-columns:1.4fr 1fr auto}.portal .row .hide-sm{display:none}
  .foot-top h3{font-size:40px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01s!important;animation-duration:.01s!important}}

/* Column counts are set per block with --cols; on smaller screens the breakpoints below win over those inline values */
@media (max-width:1100px){
  .steps,.stats,.mcards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .tline{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:760px){
  .steps,.stats,.mcards{grid-template-columns:minmax(0,1fr)!important}
  .mcards.keep2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ================================================================================================================
   v44 (10 Oct 2026): the PepTribe Labs page's motion and hover set, and the components Michael asked for:
   panel rows that open, the A to Z marker picker, image bands with the drawn graph (as on My Results), frosted
   stat cards, Version C's stat stack, three tiles and blue phone band, the progress rail, and the splash hero.
   ================================================================================================================ */
/* hover: buttons lift with a soft glow, links draw an underline from the left, arrows nudge, card photos ease in */
.btn.red:hover{box-shadow:0 14px 30px rgba(255,0,70,.26)}
.btn.ink:hover,.btn.white:hover{box-shadow:0 12px 26px rgba(10,10,12,.18)}
.btn.line:hover{box-shadow:0 10px 22px rgba(10,10,12,.08)}
.nav .links a:not([aria-current]),.foot-cols a,.ulink{background:linear-gradient(currentColor,currentColor) 0 100%/0% 1.5px no-repeat;padding-bottom:2px;transition:background-size .55s var(--ease),opacity .2s}
.nav .links a:not([aria-current]):hover,.foot-cols a:hover,.ulink:hover{background-size:100% 1.5px}
.foot-cols a:hover{opacity:1}
.go svg,.btn svg{transition:translate .3s var(--ease)}
a:hover>.go svg,.pcard:hover .go svg,.btn:hover svg{translate:3px 0}
.mcard .mi img,.mcard .mi video,.step .simg img,.tri figure img,.feat .bg{transition:transform 1s var(--ease)}
.mcard:hover .mi img,.mcard:hover .mi video,.step:hover .simg img,.tri figure:hover img,.feat:hover .bg{transform:scale(1.04)}

/* frosted stat card: its line draws, holds, fades and draws again; the value rises in; the arrow nudges */
.fstat{width:clamp(220px,19vw,270px);padding:18px 18px 16px;border-radius:24px;background:rgba(22,24,26,.44);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);color:#fff;box-shadow:0 20px 50px rgba(0,0,0,.16)}
.fstat.light{background:rgba(255,255,255,.72);color:#000}
.fstat .lb{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.fstat .sv{font-size:32px;font-weight:600;letter-spacing:-.04em;line-height:1;margin-top:10px;opacity:0;transform:translateY(6px);transition:opacity .7s var(--ease) .5s,transform .7s var(--ease) .5s}
.fstat.in .sv{opacity:1;transform:none}
.fstat .sv small{font-size:14px;font-weight:500;opacity:.75;margin-left:5px;letter-spacing:0}
.fstat svg.ch{display:block;width:100%;height:64px;margin-top:12px;overflow:visible}
.fstat .cline{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420}
.fstat.in .cline{animation:drawloop 3.8s linear .3s infinite}
.fstat .cband{fill:currentColor;opacity:.08}
.fstat .note{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;line-height:1.3}
.fstat .arr{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#5FE39A;color:#000}
.fstat .arr svg{width:12px;height:12px;fill:none;stroke:#000;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fstat.in .arr svg{animation:nudgeup 1.7s var(--ease) infinite}
@keyframes drawloop{0%{stroke-dashoffset:420;opacity:1}72%{stroke-dashoffset:0}84%{stroke-dashoffset:0;opacity:1}92%{stroke-dashoffset:0;opacity:0}93%{stroke-dashoffset:420;opacity:0}100%{stroke-dashoffset:420;opacity:1}}
@keyframes nudgeup{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.chk{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
.chk::before{content:"";width:20px;height:20px;border-radius:50%;background:#5FE39A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.4L17.5 8.6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* the drawn line graph behind a cut-out person (My Results' Ask and Subscribe bands, the PepTribe Labs hero) */
.lgraph{position:absolute;pointer-events:none}
.lgraph svg{width:100%;height:100%;overflow:visible}
.lgraph .g{animation:lgfade 6.4s linear infinite}
.lgraph .lgline{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000;animation:lgdraw 6.4s linear infinite;filter:drop-shadow(0 0 9px rgba(255,255,255,.55))}
.lgraph .lgdot,.lgraph .lgping,.lgraph .lgstart{transform-box:fill-box;transform-origin:center}
.lgraph .lgstart{fill:none;stroke:#fff;stroke-width:2;animation:lgstart 6.4s ease-out infinite}
.lgraph .lgdot{fill:#fff;animation:lgdot 6.4s ease-out infinite;filter:drop-shadow(0 0 10px rgba(255,255,255,.9))}
.lgraph .lgping{fill:none;stroke:#fff;stroke-width:1.8;opacity:0;animation:lgping 6.4s ease-out infinite}
.lgraph .lgtick{stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center;animation-duration:6.4s;animation-timing-function:ease-out;animation-iteration-count:infinite}
.lgraph .t1{animation-name:lgtick1}.lgraph .t2{animation-name:lgtick2}.lgraph .t3{animation-name:lgtick3}.lgraph .t4{animation-name:lgtick4}.lgraph .t5{animation-name:lgtick5}
@keyframes lgtick1{0%,17.7%{opacity:0;transform:scaleY(.7)}20.7%{opacity:.85;transform:scaleY(1.05)}24.2%{opacity:.5;transform:scaleY(1)}40.2%{opacity:.26}55.2%{opacity:.46}71.2%{opacity:.28}90%{opacity:.42}95%,100%{opacity:0}}
@keyframes lgtick2{0%,25.3%{opacity:0;transform:scaleY(.7)}28.3%{opacity:.85;transform:scaleY(1.05)}31.8%{opacity:.5;transform:scaleY(1)}47.8%{opacity:.26}62.8%{opacity:.46}78.8%{opacity:.28}90%{opacity:.42}95%,100%{opacity:0}}
@keyframes lgtick3{0%,33%{opacity:0;transform:scaleY(.7)}36%{opacity:.85;transform:scaleY(1.05)}39.5%{opacity:.5;transform:scaleY(1)}55.5%{opacity:.26}70.5%{opacity:.46}86.5%{opacity:.28}90%{opacity:.42}95%,100%{opacity:0}}
@keyframes lgtick4{0%,40.7%{opacity:0;transform:scaleY(.7)}43.7%{opacity:.85;transform:scaleY(1.05)}47.2%{opacity:.5;transform:scaleY(1)}63.2%{opacity:.26}78.2%{opacity:.46}88%{opacity:.28}90%{opacity:.42}95%,100%{opacity:0}}
@keyframes lgtick5{0%,48.3%{opacity:0;transform:scaleY(.7)}51.3%{opacity:.85;transform:scaleY(1.05)}54.8%{opacity:.5;transform:scaleY(1)}70.8%{opacity:.26}85.8%{opacity:.46}88%{opacity:.28}90%{opacity:.42}95%,100%{opacity:0}}
@keyframes lgfade{0%,4%{opacity:0}9%{opacity:1}90%{opacity:1}97%,100%{opacity:0}}
@keyframes lgstart{0%{transform:scale(0);opacity:0}7%{transform:scale(1.25);opacity:1}12%,100%{transform:scale(1);opacity:1}}
@keyframes lgdraw{0%,10%{stroke-dashoffset:1000}56%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes lgdot{0%,54%{transform:scale(0)}61%{transform:scale(1.3)}67%,100%{transform:scale(1)}}
@keyframes lgping{0%,56%{transform:scale(1);opacity:0}60%{opacity:.8}86%,100%{transform:scale(3.6);opacity:0}}

/* image band: a cut-out person over the drawn graph on the left, the offer on the right */
.pband{position:relative;margin:var(--gut) var(--gut) 0;border-radius:var(--r);overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);min-height:clamp(560px,46vw,680px);color:#fff;
  background:radial-gradient(130% 120% at 18% 0%,#66798A 0%,#3B4855 46%,#212B35 82%,#19212A 100%)}
.pband.warm{background:radial-gradient(130% 120% at 18% 0%,#B8714A 0%,#7A3D22 45%,#3A1B0E 82%,#2E150B 100%)}
.pband.ink{background:radial-gradient(130% 120% at 18% 0%,#3A3A3E 0%,#1A1A1C 55%,#0B0B0C 100%)}
.pband::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pband .art{position:relative;z-index:1;min-height:100%}
.pband .lgraph{left:-4%;width:118%;top:28px;aspect-ratio:680/350}
.pband .cut{position:absolute;z-index:1;left:50%;bottom:-6%;height:106%;width:auto;max-width:none;transform:translateX(-50%);-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%)}
.pband .art .fstat{position:absolute;z-index:2;right:-6%;bottom:12%}
.pband .main{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:clamp(36px,4.4vw,72px) clamp(28px,4.4vw,72px) clamp(36px,4.4vw,72px) clamp(28px,3vw,48px)}
.pband .main .lede{opacity:.86}
.pband .eyebrow{opacity:.85}
.price-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;padding:22px 24px;border-radius:24px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.price-row .pr{display:flex;flex-direction:column}
.price-row .pr span{display:flex;align-items:baseline;gap:12px}
.price-row .pr b{font-size:clamp(48px,5vw,68px);font-weight:600;letter-spacing:-.05em;line-height:.9}
.price-row .pr s{font-size:20px;opacity:.6}
.price-row .pr small{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-bottom:10px}
.price-row .btn{margin-left:auto}
.ticks.two{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.subline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);font-size:14.5px}
.subline b{font-weight:600}
.subline .pill{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:99px;background:#fff;color:#000;font-size:13px;font-weight:600}

/* What we test: each panel is a card that opens to show what's in it */
.section.snug{padding-top:clamp(40px,4.4vw,64px)}
.pacc{display:flex;flex-direction:column;gap:12px}
.prow{border:1px solid rgba(0,0,0,.1);border-radius:var(--rc);background:#fff;padding:0 clamp(18px,2.2vw,30px);transition:border-color .3s,box-shadow .4s var(--ease),background .3s}
.prow:hover{border-color:rgba(0,0,0,.22);box-shadow:0 14px 34px rgba(0,0,0,.06)}
.prow[open]{background:#FAFAFA;border-color:rgba(0,0,0,.16)}
.prow[hidden]{display:none}
.prow summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:20px;align-items:center;padding:24px 0;cursor:pointer}
.prow summary::-webkit-details-marker{display:none}
.prow .nm b{display:block;font-size:clamp(24px,2.4vw,34px);font-weight:600;letter-spacing:-.04em;line-height:1.02}
.prow .nm small{display:block;margin-top:7px;font-size:15.5px;line-height:1.45;opacity:.68;max-width:62ch}
.prow .k{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.5;white-space:nowrap}
.prow .cnt{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:99px;background:#F2F2F2;font-size:13.5px;font-weight:600;white-space:nowrap;transition:background .3s,color .3s}
.prow[open] .cnt{background:#000;color:#fff}
.prow .more{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:600;white-space:nowrap}
.prow .more .c,.prow[open] .more .o{display:none}
.prow[open] .more .c{display:inline}
.prow .pm{position:relative;flex:none;width:44px;height:44px;border-radius:50%;background:#000;transition:background .3s,transform .4s var(--ease)}
.prow .pm::before,.prow .pm::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .3s}
.prow .pm::after{transform:rotate(90deg)}
.prow[open] .pm::after{transform:rotate(180deg);opacity:0}
.prow summary:hover .pm{background:var(--red)}
.prow .a{overflow:hidden}
.pbody{padding:2px 0 28px;display:flex;flex-direction:column;gap:22px}
.prow .mk{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.prow .mk li{padding:18px 20px 20px;border-radius:18px;background:#fff;border:1px solid rgba(0,0,0,.07);display:flex;flex-direction:column;gap:4px}
.prow[open] .mk li{animation:mkin .55s var(--ease) both}
.prow[open] .mk li:nth-child(2){animation-delay:.05s}.prow[open] .mk li:nth-child(3){animation-delay:.1s}.prow[open] .mk li:nth-child(4){animation-delay:.15s}
.prow[open] .mk li:nth-child(5){animation-delay:.2s}.prow[open] .mk li:nth-child(6){animation-delay:.25s}.prow[open] .mk li:nth-child(7){animation-delay:.3s}
@keyframes mkin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.prow .mk span{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.5}
.prow .mk b{font-size:17px;font-weight:600;letter-spacing:-.015em}
.prow .mk p{font-size:14.5px;line-height:1.45;margin-top:4px;opacity:.85}
.pfoot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px 0 12px;border-radius:99px;background:#fff;border:1px solid rgba(0,0,0,.12);font-size:13.5px;font-weight:600;white-space:nowrap}
.chip svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pfoot .btn{height:48px}

/* What we test: every marker, picked from an A to Z list */
.mx{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--gut);align-items:stretch}
.mx-pick{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:clamp(24px,3vw,40px);border-radius:var(--r);background:#F2F2F2;position:relative}
.mx-pick h3{font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.mx-pick>p{font-size:15.5px;line-height:1.5;opacity:.75}
.mx-btn{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;height:64px;padding:0 14px 0 22px;border-radius:18px;border:1px solid rgba(0,0,0,.14);background:#fff;font-size:19px;font-weight:600;letter-spacing:-.02em;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .3s var(--ease)}
.mx-btn:hover,.mx-btn[aria-expanded="true"]{border-color:#000;box-shadow:0 12px 30px rgba(0,0,0,.08)}
.mx-btn small{display:block;font-size:12.5px;font-weight:500;letter-spacing:0;opacity:.55;margin-top:2px}
.mx-btn i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#000;transition:transform .35s var(--ease)}
.mx-btn i::before{content:"";width:8px;height:8px;margin-top:-4px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.mx-btn[aria-expanded="true"] i{transform:rotate(180deg)}
.mx-dd{position:relative}
.mx-pop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:5;border-radius:20px;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.18);overflow:hidden;opacity:0;transform:translateY(-6px);visibility:hidden;transition:opacity .22s,transform .22s var(--ease),visibility 0s .22s}
.mx-pop.on{opacity:1;transform:none;visibility:visible;transition:opacity .22s,transform .22s var(--ease)}
.mx-pop input{width:100%;height:54px;border:0;border-bottom:1px solid rgba(0,0,0,.08);padding:0 20px;font:inherit;font-size:16px;outline:none}
.mx-list{max-height:340px;overflow-y:auto;overscroll-behavior:contain;padding:6px 0 10px}
.mx-list .ltr{padding:12px 20px 4px;font-size:11.5px;font-weight:600;letter-spacing:.14em;opacity:.45}
.mx-list [role="option"]{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 20px;cursor:pointer;font-size:15.5px;transition:background .15s}
.mx-list [role="option"] b{font-weight:600}
.mx-list [role="option"] span{font-size:13px;opacity:.55;text-align:right}
.mx-list [role="option"]:hover,.mx-list [role="option"].hl{background:#F2F2F2}
.mx-list [role="option"][aria-selected="true"]{background:#000;color:#fff}
.mx-list [role="option"][aria-selected="true"] span{opacity:.75}
.mx-az{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.mx-az button{min-width:34px;height:34px;padding:0 10px;border-radius:99px;border:0;background:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.mx-az button:hover,.mx-az button.on{background:#000;color:#fff}
.mx-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:16px;padding:clamp(28px,3.4vw,48px);border-radius:var(--r);color:#fff;isolation:isolate;min-height:460px;
  background:radial-gradient(130% 120% at 18% 0%,#66798A 0%,#3B4855 46%,#212B35 82%,#19212A 100%)}
.mx-card .top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mx-card .nav2{display:flex;gap:8px}
.mx-card .nav2 button{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;cursor:pointer;transition:background .2s,border-color .2s}
.mx-card .nav2 button:hover{background:rgba(255,255,255,.12);border-color:#fff}
.mx-card .nav2 svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mx-card h3{font-size:clamp(40px,4.6vw,68px);font-weight:600;letter-spacing:-.05em;line-height:.95;margin-top:auto}
.mx-card .pl{font-size:19px;font-weight:500;opacity:.8}
.mx-card .one{font-size:19px;line-height:1.45;max-width:36ch}
.mx-card .swap{transition:opacity .25s,transform .35s var(--ease)}
.mx-card.out .swap{opacity:0;transform:translateY(8px)}
.mx-range{margin-top:6px}
.mx-range .bar{position:relative;display:grid;grid-template-columns:1fr 2fr 1fr;gap:4px;height:10px}
.mx-range .bar span{border-radius:99px;background:rgba(255,255,255,.22)}
.mx-range .bar span.ok{background:#5FE39A}
.mx-range .bar i{position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.2);transition:left .8s var(--ease)}
.mx-range .lbs{display:grid;grid-template-columns:1fr 2fr 1fr;margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.mx-range .lbs span:nth-child(2){text-align:center}.mx-range .lbs span:last-child{text-align:right}
.mx-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.mx-in a{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:99px;background:rgba(255,255,255,.14);font-weight:600;transition:background .2s}
.mx-in a:hover{background:rgba(255,255,255,.26)}
.mx-in em{font-style:normal;opacity:.7;margin-right:4px}

/* Version C: the stat stack (big numbers beside a tall photo) */
.vstack{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:stretch}
.vstack figure{position:relative;border-radius:var(--r);overflow:hidden;min-height:560px;background:#ECECEC}
.vstack figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vstack figure .tagw{position:absolute;left:20px;top:20px;display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:99px;background:#fff;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.vstack ol{display:flex;flex-direction:column}
.vstack li{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:center;padding:24px 0;border-top:1px solid rgba(0,0,0,.12)}
.vstack li:last-child{border-bottom:1px solid rgba(0,0,0,.12)}
.vstack .num{font-size:clamp(60px,6.6vw,104px);font-weight:600;letter-spacing:-.065em;line-height:.85;white-space:nowrap;font-variant-numeric:tabular-nums}
.vstack .num small{font-size:.3em;letter-spacing:-.02em;margin-left:6px}
.vstack .txt{display:flex;flex-direction:column;gap:6px;font-size:15.5px;line-height:1.45}
.vstack .txt b{font-size:17px;font-weight:600;letter-spacing:-.015em}
.vstack cite{font-style:normal;font-size:12px;opacity:.55}

/* Version C: three tall tiles, Blood. Wearables. DNA. */
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.tri figure{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4.1;background:#ECECEC;color:#fff;isolation:isolate}
.tri figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.tri figure::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.36),transparent 34%,transparent 62%,rgba(0,0,0,.5))}
.tri figcaption{position:absolute;inset:0;padding:24px 26px;display:flex;flex-direction:column;justify-content:space-between}
.tri figcaption b{display:flex;align-items:flex-start;gap:8px;font-size:clamp(34px,3.6vw,54px);font-weight:600;letter-spacing:-.05em;line-height:1}
.tri figcaption b sup{font-size:13px;font-weight:600;letter-spacing:0;margin-top:6px;opacity:.85}
.tri figcaption p{font-size:16px;line-height:1.45;max-width:30ch}

/* Version C: the blue band with three phones */
.cobalt{background:var(--fresh-blue);color:#fff}
.cobalt .shead .lede{opacity:.9}
.phones3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,48px);align-items:end}
.phones3 figure{display:flex;flex-direction:column;gap:22px}
.phones3 .ph{border-radius:34px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,30,.35);background:#fff;max-width:330px;width:100%;margin:0 auto}
.phones3 .ph img{width:100%;height:auto}
.phones3 figure:nth-child(2) .ph{translate:0 -36px}
.phones3 figcaption{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding-top:20px;border-top:1px solid rgba(255,255,255,.3)}
.phones3 figcaption .n{font-size:44px;font-weight:600;letter-spacing:-.05em;line-height:.85}
.phones3 figcaption p{font-size:16.5px;line-height:1.4;font-weight:500}

/* progress rail: the line fills as you read, each step lights up as it passes (PepTribe Labs, three steps) */
.rail{position:relative;display:flex;flex-direction:column;gap:0}
.rail::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:rgba(0,0,0,.1)}
.rail .rail-fill{position:absolute;left:23px;width:2px;background:#000;z-index:1;border-radius:2px}
.rail li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:24px;align-items:center;padding:22px 0}
.rail .node{position:relative;z-index:2;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.13);font-size:15px;font-weight:600;transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.rail .node.is-on{background:#000;border-color:#000;color:#fff}
.rail li:last-child .node.is-on{background:var(--red);border-color:var(--red)}
.rail b{display:block;font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.rail p{font-size:15.5px;line-height:1.45;opacity:.75;margin-top:4px}
.rail .when{font-size:14px;font-weight:600;white-space:nowrap;padding:8px 14px;border-radius:99px;background:#F2F2F2}

/* benefit trio (How it works) */
.bens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.ben{padding:28px 28px 30px;border-radius:var(--rc);background:#F2F2F2;display:flex;flex-direction:column;gap:12px;transition:transform .4s var(--ease),box-shadow .4s}
.ben:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.ben .ic{width:44px;height:44px}
.ben .ic svg{width:44px;height:44px;fill:none;stroke:#000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ben .big{font-size:clamp(34px,3.2vw,46px);font-weight:600;letter-spacing:-.05em;line-height:1;margin-top:10px}
.ben h3{font-size:22px;font-weight:600;letter-spacing:-.03em}
.ben p{font-size:15.5px;line-height:1.5;opacity:.8}

/* splash hero: a full photo under the heading (For doctors) */
.splash{position:relative;margin:0 var(--gut);border-radius:var(--r);overflow:hidden;min-height:clamp(560px,52vw,760px);display:flex;align-items:flex-end;color:#fff;isolation:isolate;background:#ECECEC}
.splash>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.splash::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.42) 38%,rgba(0,0,0,0) 62%),linear-gradient(0deg,rgba(0,0,0,.4),transparent 45%)}
.splash .inner{width:100%;padding:clamp(28px,4.4vw,72px);display:grid;grid-template-columns:minmax(0,640px);gap:26px;align-items:end}
.splash h1{font-size:clamp(46px,6.4vw,100px);font-weight:600;letter-spacing:-.05em;line-height:.92}
.splash .side{display:flex;flex-direction:column;gap:20px}
.splash .side p{font-size:18px;line-height:1.45;max-width:42ch}
.splash .ctas{display:flex;flex-wrap:wrap;gap:12px}
.splash .btn.line{color:#fff}
.splash .fstat{position:absolute;right:clamp(20px,4vw,64px);top:clamp(20px,4vw,56px)}

/* feature cards: a photo with a floating UI card (For doctors) */
.feats{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--gut)}
.feat{position:relative;border-radius:var(--r);overflow:hidden;min-height:clamp(520px,44vw,640px);color:#fff;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,3vw,40px);background:#111}
.feat .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.feat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.62) 38%,rgba(0,0,0,.12) 70%,rgba(0,0,0,0) 100%)}
.feat .eyebrow{opacity:.85}
.feat h3{font-size:clamp(32px,3.4vw,50px);font-weight:600;letter-spacing:-.045em;line-height:.98;margin-top:14px}
.feat p{font-size:16.5px;line-height:1.5;max-width:44ch;margin-top:12px;opacity:.9}
.feat .ticks{margin-top:18px;font-size:15px}
.feat .float{position:absolute;top:clamp(20px,3vw,36px);right:clamp(20px,3vw,36px)}
.feat.ink{background:#000}
.uicard{width:clamp(240px,22vw,300px);padding:16px;border-radius:22px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#000;box-shadow:0 24px 60px rgba(0,0,0,.22);display:flex;flex-direction:column;gap:10px;font-size:14px}
.uicard .hd{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.uicard .row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#fff}
.uicard .row b{font-weight:600}
.uicard .pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:600;background:#e8f5ee;color:#0b6b37}
.uicard .pill.near{background:#fdf1dc;color:#8a5a00}
.uicard .flow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.uicard .flow span{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;line-height:1.25}
.uicard .flow span::before{content:"";height:4px;border-radius:4px;background:#E6E6E6}
.uicard.in .flow span::before{background:linear-gradient(90deg,#000 50%,#E6E6E6 50%) right/200% 100% no-repeat;animation:flowfill 3.6s var(--ease) infinite}
.uicard.in .flow span:nth-child(2)::before{animation-delay:.6s}.uicard.in .flow span:nth-child(3)::before{animation-delay:1.2s}
@keyframes flowfill{0%{background-position:right}35%,85%{background-position:left}100%{background-position:right}}

@media (max-width:1100px){
  .pband{grid-template-columns:minmax(0,1fr)}
  .pband .art{min-height:420px}
  .pband .art .fstat{right:20px;bottom:20px}
  .mx,.vstack,.feats{grid-template-columns:minmax(0,1fr)}
  .tri,.bens{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .splash .inner{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .prow summary{grid-template-columns:minmax(0,1fr) auto;gap:12px 14px;padding:20px 0}
  .prow .k{display:none}
  .prow .nm{grid-column:1 / -1;grid-row:1}
  .prow .cnt{grid-column:1;grid-row:2;justify-self:start;height:30px;font-size:12.5px}
  .prow .more{grid-column:2;grid-row:2}
  .prow .pm{width:38px;height:38px}
  .ticks.two{grid-template-columns:minmax(0,1fr)}
  .price-row .btn{margin-left:0;width:100%}
  .tri,.bens,.phones3{grid-template-columns:minmax(0,1fr)}
  .phones3 figure:nth-child(2) .ph{translate:none}
  .vstack li{grid-template-columns:minmax(0,1fr);gap:10px}
  .vstack figure{min-height:420px}
  .rail li{grid-template-columns:48px minmax(0,1fr);gap:16px}
  .rail .when{grid-column:2;justify-self:start}
  .mx-card{min-height:420px}
  .splash{min-height:620px}
  .splash::after{background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.25) 60%,rgba(0,0,0,.05) 100%)}
  .splash .fstat,.splash .float-ui{display:none}
  .feat .float{position:relative;top:auto;right:auto;margin-bottom:auto}
}
@media (prefers-reduced-motion:reduce){.lgraph .g,.lgraph .lgline,.lgraph .lgdot,.lgraph .lgping,.lgraph .lgstart,.lgraph .lgtick{animation:none}.lgraph .lgline{stroke-dashoffset:0}.lgraph .lgtick{opacity:.34}.fstat .cline{stroke-dashoffset:0}.fstat .sv{opacity:1;transform:none}}

/* ================================================================================================================
   v47 (11 Oct 2026): split heroes (heading left, picture or film right), the Rythm-style panel list with markers that
   open, the tight pricing band (as on My Results), the kit picture as tall as its words, and the FAQ a little closer.
   ================================================================================================================ */
.shero{padding:clamp(28px,4vw,56px) 0 clamp(28px,3.4vw,48px)}
.shero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.sh-l{display:flex;flex-direction:column;gap:22px}
.sh-l .h1{max-width:11ch}
.sh-r{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:#ECECEC;position:relative}
.sh-r.sq{aspect-ratio:1/1}
.sh-r img,.sh-r video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plist{border-top:1px solid rgba(0,0,0,.12)}
.plrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);padding:clamp(28px,3.4vw,44px) 0;border-bottom:1px solid rgba(0,0,0,.12);scroll-margin-top:100px}
.pl-l h3{font-size:clamp(28px,3vw,42px);font-weight:600;letter-spacing:-.04em;line-height:1.02}
.pl-l p{margin-top:12px;font-size:17px;line-height:1.5;color:#000;max-width:44ch}
.mrow{border-bottom:1px solid rgba(0,0,0,.1)}
.mrow:first-child{border-top:1px solid rgba(0,0,0,.1)}
.mrow summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;cursor:pointer;font-size:18px;font-weight:600;letter-spacing:-.02em}
.mrow summary::-webkit-details-marker{display:none}
.mrow summary span{background:linear-gradient(currentColor,currentColor) 0 100%/0% 1.5px no-repeat;padding-bottom:2px;transition:background-size .5s var(--ease)}
.mrow summary:hover span{background-size:100% 1.5px}
.mrow .pm{position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(0,0,0,.2);transition:background .25s,border-color .25s}
.mrow .pm::before,.mrow .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.8px;margin:-.9px 0 0 -6px;background:#000;border-radius:2px;transition:transform .3s var(--ease),opacity .3s,background .25s}
.mrow .pm::after{transform:rotate(90deg)}
.mrow[open] .pm::after{transform:rotate(180deg);opacity:0}
.mrow summary:hover .pm,.mrow[open] .pm{background:#000;border-color:#000}
.mrow summary:hover .pm::before,.mrow summary:hover .pm::after,.mrow[open] .pm::before{background:#fff}
.mrow .a{overflow:hidden}
.mrow .a>div{padding:0 46px 18px 0;font-size:16px;line-height:1.55}
.mrow .a b{font-weight:600}
/* the pricing band, tight: brought in to the page width, smaller type, the graph inset from the edge, one tick a line */
.pband.tight{grid-template-columns:minmax(0,.92fr) minmax(0,1.5fr);min-height:0;max-width:calc(var(--wrap) - 44px);margin:var(--gut) auto 0}
@media (max-width:1364px){.pband.tight{margin:var(--gut) var(--gut) 0}}
.pband.tight .lgraph{left:10%;width:80%;top:26px}
.pband.tight .cut{height:104%;bottom:-6%}
.pband.tight .main{gap:16px;padding:clamp(30px,3.4vw,48px) clamp(26px,3.6vw,56px) clamp(30px,3.4vw,48px) clamp(18px,2vw,28px)}
.pband.tight .h2{font-size:clamp(32px,3.4vw,50px)}
.pband.tight .lede{font-size:16px;max-width:44ch}
.pband.tight .price-row{padding:16px 18px;gap:14px 22px;border-radius:20px}
.pband.tight .price-row .pr b{font-size:clamp(38px,3.6vw,52px)}
.pband.tight .price-row .pr s{font-size:17px}
.pband.tight .ticks{display:grid;gap:8px;font-size:15px}
.pband.tight .ticks li{grid-template-columns:22px 1fr;gap:10px;align-items:center}
.pband.tight .ticks li::before{width:22px;height:22px;margin:0;background:rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.4L17.5 8.6' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.pband.tight .subline{padding-top:14px;font-size:14px}
/* the kit: the picture runs the full height of the words beside it */
.split.fill{align-items:stretch}
.split.fill .smedia{aspect-ratio:auto;min-height:420px}
.split.fill .smedia img{position:absolute;inset:0}
.section.faqsec{padding-top:clamp(40px,5vw,80px)}
@media (max-width:980px){
  .shero .wrap,.plrow{grid-template-columns:minmax(0,1fr)}
  .plrow{gap:18px}
  .pband.tight{grid-template-columns:minmax(0,1fr)}
  .pband.tight .art{min-height:340px}
  .split.fill .smedia{min-height:0;aspect-ratio:4/3}
}
@media (max-width:760px){.mrow summary{font-size:17px}.mrow .a>div{padding-right:0}}

/* v48: film heroes (What we test, How it works) a little shorter than the screen; markers with dividers only between them */
.vhero .inner{padding-bottom:clamp(28px,3.6vw,56px)}
.vhero p{max-width:44ch;font-size:18px}
.mrow:first-child{border-top:0}
.mrow:last-child{border-bottom:0}
.mrow:first-child summary{padding-top:4px}
/* v49 (11 Oct 2026): buttons under the film hero's heading (How it works: Blood kit, DNA kit) */
.vhero .vh-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.4vw,32px)}
.vhero .vh-ctas .btn{height:50px;padding:0 22px 0 24px}
.vhero .vh-ctas .btn.line{border-color:rgba(255,255,255,.8);color:#fff}
.vhero .vh-ctas .btn.line:hover{background:rgba(255,255,255,.12)}
.vhero .vh-ctas .btn svg{transition:transform .3s var(--ease)}
.vhero .vh-ctas .btn:hover svg{transform:translateY(2px)}
/* v49 (11 Oct 2026): What we test's film runs edge to edge and up under the header, square, with just the heading. As the
   page scrolls, the film's sides come in to the page margins and its corners round (site.js sets --bi and --br from the
   scroll), the way the homepage film settles. The heading keeps its place. */
.vband.bleed{margin:calc(-1 * var(--navh)) 0 0;border-radius:0;overflow:visible;min-height:0;height:clamp(360px,31vw,470px)}
.vband.bleed::after{display:none}
.vband.bleed .vb-media{position:absolute;inset:0;z-index:-1;overflow:hidden;clip-path:inset(0 var(--bi,0px) 0 var(--bi,0px) round 0 0 var(--br,0px) var(--br,0px));will-change:clip-path}
.vband.bleed .vb-media video,.vband.bleed .vb-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vband.bleed .vb-media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.2) 46%,rgba(0,0,0,0) 72%)}
.vband.bleed .inner{grid-template-columns:minmax(0,1fr);padding:0 calc(var(--gut) + clamp(28px,4vw,64px)) clamp(26px,3vw,48px)}
.vband.bleed h1{font-size:clamp(46px,6.2vw,96px)}
@media (max-width:760px){.vband.bleed{height:clamp(320px,88vw,420px)}}
/* v49: the pricing band. "Any panel, one price." on a line of its own on desktop; "Get tested" larger and next to the
   price rather than pushed to the far right; the "Save 20%" pill right after its line */
@media (min-width:761px){.pband .lede .ln{display:block}}
.price-row .btn.get{margin-left:clamp(8px,2.6vw,40px);height:60px;padding:0 32px;font-size:18px}
.subline{justify-content:flex-start;gap:12px 16px}
@media (max-width:760px){.price-row .btn.get{margin-left:0;width:100%}}
/* v49: About. The heading and a short line, no buttons; the couple photo a little smaller; the story on the topographic
   map, which carries on behind the team */
.about-h .wrap{align-items:end}
.pmedia.about-ph{max-width:calc(var(--wrap) - 44px);margin:0 auto;height:clamp(300px,36vw,520px)}
@media (max-width:1364px){.pmedia.about-ph{margin:0 var(--gut)}}
.pmedia.about-ph::after{display:none}
.pmedia.about-ph img{object-position:50% 35%}
.team.story .st-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:start;margin-bottom:clamp(64px,8vw,120px)}
.team.story .st-copy{display:grid;gap:18px;font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:#1E1E22;max-width:60ch}
@media (max-width:900px){.team.story .st-story{grid-template-columns:minmax(0,1fr)}}
/* v49b: Our labs. The hero fits in one screen; "Your sample journey." sits closer to the marks; the three film cards
   and the four standards are tighter, the standards four across */
.vband.labhero{min-height:min(clamp(520px,56vw,820px),calc(100svh - var(--navh) - var(--gut)))}
.section.journey{padding-top:clamp(36px,4.5vw,66px)}
.section.labtrio{padding:clamp(20px,2.6vw,40px) 0}
.section.accsec{padding-top:clamp(48px,6vw,88px)}
.mcards.acc4{--cols:4;gap:14px}
.mcards.acc4 .mt{padding:22px 20px;gap:10px}
.mcards.acc4 .ic{display:block;width:40px;height:40px}
.mcards.acc4 h3{font-size:19px}
.mcards.acc4 p{font-size:14.5px;line-height:1.45}
@media (max-width:1100px){.mcards.acc4{--cols:2}}
@media (max-width:640px){.mcards.acc4{--cols:1}}
/* the journey: the grey track runs from the first number to the sixth and no further; a black line draws across it,
   left to right, and each number pops up and its step rises in as the line reaches it */
.tline.anim{--g:clamp(18px,2.6vw,44px);column-gap:var(--g)}
.tline.anim li{padding:0}
.tline.anim::before{left:20px;right:auto;width:calc((100% + var(--g)) * 5 / 6)}
.tline.anim::after{content:"";position:absolute;left:20px;top:19px;height:2px;width:calc((100% + var(--g)) * 5 / 6);background:#000;transform-origin:0 50%;transform:scaleX(0)}
.tline.anim.in::after{transform:scaleX(1);transition:transform 5.5s linear .3s}
.tline.anim .dot{background:#D6D6D9;color:#fff;transform:scale(.55)}
.tline.anim li > b,.tline.anim li > p{opacity:0;transform:translateY(12px)}
.tline.anim.in .dot{animation:tl-pop .7s cubic-bezier(.34,1.7,.64,1) both;animation-delay:calc(.3s + var(--i) * 1.1s)}
.tline.anim.in li.red .dot{animation-name:tl-pop-red}
.tline.anim.in li > b,.tline.anim.in li > p{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:calc(.45s + var(--i) * 1.1s)}
.tline.anim.in li > p{transition-delay:calc(.6s + var(--i) * 1.1s)}
@keyframes tl-pop{0%{transform:scale(.55);background:#D6D6D9}60%{transform:scale(1.18);background:#000}100%{transform:scale(1);background:#000}}
@keyframes tl-pop-red{0%{transform:scale(.55);background:#D6D6D9}60%{transform:scale(1.18);background:var(--red)}100%{transform:scale(1);background:var(--red)}}
@media (max-width:760px){
  .tline.anim{row-gap:26px}
  .tline.anim::before,.tline.anim::after{left:19px;top:20px;width:2px;height:calc(100% - 46px)}
  .tline.anim::after{transform-origin:50% 0;transform:scaleY(0)}
  .tline.anim.in::after{transform:scaleY(1)}
}
@media (prefers-reduced-motion:reduce){
  .tline.anim::after{transform:none!important;transition:none!important}
  .tline.anim .dot,.tline.anim li > b,.tline.anim li > p{animation:none!important;opacity:1;transform:none;background:#000}
  .tline.anim li.red .dot{background:var(--red)}
}
/* v49c: Get tested. The dashboard band: a hand holding one larger phone (left) that slides through the app's screens;
   the words right, the ticks with room around them, the wearables as logos */
.dband .art{position:relative;min-height:clamp(560px,46vw,700px)}
.dband .hp{position:absolute;z-index:2;left:50%;bottom:-9%;height:103%;transform:translateX(-50%)}
.dband .hp .hand{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.dband .hp-scr{position:absolute;z-index:1;left:var(--sl);top:var(--st);width:var(--sw);height:var(--sh);border-radius:11% / 5%;overflow:hidden;background:#fff}
.dband .hp-track{display:flex;width:600%;height:100%;animation:hp-run 17s infinite}
.dband .hp-track img{width:16.6667%;height:100%;object-fit:cover;object-position:top;flex:none}
@keyframes hp-run{
  0%,16.5%{transform:translateX(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  20%,36.5%{transform:translateX(-16.6667%);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  40%,56.5%{transform:translateX(-33.3333%);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  60%,76.5%{transform:translateX(-50%);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  80%,96.5%{transform:translateX(-66.6667%);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  100%{transform:translateX(-83.3333%)}}
@media (prefers-reduced-motion:reduce){.dband .hp-track{animation:none}}
.dband .main .ticks{margin:10px 0 6px}
.dband .wear{display:flex;flex-direction:column;gap:16px;margin-top:18px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.dband .wear .wl{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.dband .logos{display:flex;flex-wrap:wrap;align-items:center;gap:18px clamp(22px,2.6vw,38px);color:#fff}
.dband .lg{display:inline-flex;align-items:center;gap:6px;opacity:.92;line-height:1}
.dband .lg svg{display:block;fill:currentColor}
.dband .lg-whoop{font-size:19px;font-weight:700;letter-spacing:.1em}
.dband .lg-oura{font-size:19px;font-weight:400;letter-spacing:.24em}
.dband .lg-apple svg{height:21px;width:auto}.dband .lg-apple b{font-size:15px;font-weight:500;letter-spacing:.12em;margin-top:3px}
.dband .lg-garmin svg{height:19px;width:auto}
.dband .lg-fitbit svg{height:22px;width:auto}.dband .lg-fitbit b{font-size:19px;font-weight:600;letter-spacing:-.01em}
.dband .lg-samsung svg{height:14px;width:auto}
@media (max-width:1100px){.dband .art{min-height:520px}.dband .hp{height:100%;bottom:-2%}}
@media (max-width:760px){.dband .art{min-height:460px}}
/* v49c (11 Oct 2026, Michael) */
/* headings that keep a line together (Testing to the / highest standards; Health testing, / built around you.) */
.nw{white-space:nowrap}
@media (max-width:560px){.nw{white-space:normal}}
/* the footer: the same on every page. Regular weight links, the social icons without circles */
.foot .social{gap:8px;margin:22px 0 0 -10px}
.foot .social a{width:58px;height:58px;border:0;border-radius:50%;background:none}
.foot .social a:hover{background:rgba(255,255,255,.08);border:0}
.foot .social svg{width:32px;height:32px}
.foot-cols li{font-weight:400}
/* the pricing band: the price box and the Save 20% line only as wide as they need, everything a little further right,
   the woman and her graph larger and further right too (desktop) */
@media (min-width:1101px){
  .pband.tight .main{padding-left:clamp(28px,4.6vw,84px)}
  .pband.tight .price-row,.pband.tight .subline{align-self:flex-start;width:min(100%,560px)}
  .pband.tight .cut{left:58%;height:114%;bottom:-8%}
  .pband.tight .lgraph{left:18%}
}
.subline{justify-content:flex-start}
.subline .pill{order:-1}
/* About: one heading on two lines with nothing beside it; the map a little smaller and lower behind the story and team;
   no rule or line over Meet our team */
.about-h .wrap{grid-template-columns:minmax(0,1fr)}
.about-h h1{max-width:none}
/* v49d: the map as it was, just 50 px lower and 10% smaller, so it sits behind the story and runs into the team */
.team.story::before{transform:translateY(50px) scale(.9);transform-origin:50% 0}
.team .shead.solo{border-top:0;padding-top:0;grid-template-columns:minmax(0,1fr)}
/* v49d (11 Oct 2026, Michael) */
/* a full-width picture with no words on it (What we test, About): no dark fade */
.vband.bleed.plain .vb-media::after{display:none}
.pg-about .vband.bleed img{object-position:50% 32%}
/* What we test: Order this panel, a light grey pill under each panel's words, to the cart with that panel chosen */
.order-pill{display:inline-flex;align-items:center;gap:8px;width:fit-content;height:40px;margin-top:18px;padding:0 16px 0 18px;border-radius:99px;
  background:#F2F2F2;color:#000;font-size:14.5px;font-weight:500;transition:background .2s}
.order-pill:hover{background:#E6E6E6}
.order-pill svg{width:16px;height:16px}
/* v49e (11 Oct 2026): For doctors' hero. The photo runs full width under the header and settles into the margins on scroll
   like What we test; it is light, so the words are dark and sit on its plain left side */
.vband.bleed.docs{height:clamp(500px,46vw,680px);color:#000}
.vband.bleed.docs .vb-media::after{background:linear-gradient(90deg,rgba(250,247,240,.85) 0%,rgba(250,247,240,.45) 34%,rgba(250,247,240,0) 55%)}
.vband.bleed.docs .vb-media img{object-position:65% 40%}
.vband.bleed.docs .inner{align-items:center;padding-top:calc(var(--navh) + 12px);padding-bottom:clamp(28px,3vw,48px)}
.vband.bleed.docs .dh{display:flex;flex-direction:column;gap:20px;max-width:540px}
.vband.bleed.docs h1{font-size:clamp(46px,5.6vw,86px)}
.vband.bleed.docs p{font-size:18px;line-height:1.5;max-width:44ch;color:#1E1E22}
.vband.bleed.docs .ctas{display:flex;flex-wrap:wrap;gap:12px}
.vband.bleed.docs .btn.line{border-color:rgba(0,0,0,.8);color:#000}
@media (max-width:760px){.vband.bleed.docs{height:auto;min-height:560px}.vband.bleed.docs .vb-media::after{background:linear-gradient(0deg,rgba(250,247,240,.95) 0%,rgba(250,247,240,.8) 45%,rgba(250,247,240,0) 75%)}.vband.bleed.docs .inner{align-items:end}}
/* v49e: the FAQ page. The heading and a line; the topics as grey pills; each topic's title beside its questions */
.faqpage{padding:clamp(40px,6vw,88px) 0 clamp(56px,7vw,104px)}
.fq-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.fq-head .h1{max-width:none;white-space:nowrap}
@media (max-width:560px){.fq-head .h1{white-space:normal}}
.fq-cats{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(28px,3.4vw,44px) 0 clamp(36px,4.6vw,64px)}
.fq-cats .order-pill{margin:0}
.fq-group{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(20px,4vw,64px);padding:clamp(28px,3.4vw,44px) 0;border-top:1px solid rgba(0,0,0,.1);scroll-margin-top:100px}
.fq-group:first-of-type{border-top:0}
.fq-t{font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.fq-list .qa summary{font-size:18px;padding:18px 0}
@media (max-width:860px){.fq-head,.fq-group{grid-template-columns:minmax(0,1fr)}}
/* v49e: Get tested. The kit, as separate layers on the price band's left (KIT_LAYERS in build-pages.py sets each one) */
.kitart{display:grid;place-items:center;padding:clamp(20px,3vw,44px)}
.kitstack{position:relative;width:min(100%,560px);aspect-ratio:1/0.92}
.kitstack .k{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;max-width:none;transform:rotate(var(--r));
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.42)) drop-shadow(0 4px 8px rgba(0,0,0,.28))}
.kitstack .k-card{filter:drop-shadow(0 16px 26px rgba(0,0,0,.5))}
@media (min-width:1101px){.pband.tight .kitart{padding-left:clamp(28px,3.4vw,56px)}}
@media (max-width:1100px){.kitart{min-height:0}.kitstack{width:min(100%,520px)}}
/* v49f: For doctors. What clinical governance covers: six short points under Led by doctors */
.band .ovs{margin-top:clamp(40px,5vw,72px);padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(255,255,255,.16)}
.band .ovs h3{font-size:clamp(20px,1.8vw,24px);font-weight:600;letter-spacing:-.02em;margin-bottom:clamp(18px,2vw,28px)}
.band .ovs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px) clamp(20px,3vw,48px)}
.band .ovs-grid b{display:block;font-size:17px;font-weight:600;margin-bottom:6px}
.band .ovs-grid p{font-size:15px;line-height:1.5;opacity:.78}
@media (max-width:900px){.band .ovs-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:560px){.band .ovs-grid{grid-template-columns:minmax(0,1fr)}}
/* v49f: Get tested. The kit gets more of the band; the words move right */
@media (min-width:1101px){
  .pband.tight.kitband{grid-template-columns:minmax(0,1.12fr) minmax(0,1.28fr)}
  .pband.tight.kitband .main{padding-left:clamp(20px,2.6vw,48px)}
  .pband.tight.kitband .kitart{padding:clamp(28px,3vw,48px) 0 clamp(28px,3vw,48px) clamp(28px,3.4vw,56px)}
}
/* v49f: Get tested. The kit as one clipped photo */
.kitart .kitshot{display:block;width:min(100%,500px);height:auto;max-width:none;filter:drop-shadow(0 26px 40px rgba(0,0,0,.32))}
@media (max-width:1100px){.kitart .kitshot{width:min(86%,440px)}}
/* v49g: For doctors. Order the panel's photo a little closer; the governance list right under Led by doctors, no rule */
.pg-for-doctors #order .step:first-child .simg img{transform:scale(1.22);transform-origin:45% 42%}
.band .ovs{margin-top:clamp(28px,3vw,44px);padding-top:0;border-top:0}
/* v49g: a section heading that needs the full width (its line underneath) */
.shead.wide{grid-template-columns:minmax(0,1fr);gap:18px}
.shead.wide .h2{max-width:none}
.shead.wide .lede{max-width:56ch}
/* v49h (11 Oct 2026): Contact. Talk to a real person, then a short form in a white card on light grey */
.contact{padding:clamp(40px,6vw,88px) 0 clamp(48px,6vw,96px);background:#F2F2F2}
.ct-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(28px,3.4vw,48px)}
.ct-head .lede{max-width:52ch}
.ct-card{background:#fff;border-radius:28px;padding:clamp(24px,3.4vw,52px);max-width:880px}
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 16px}
.cf{display:grid;gap:8px;font-size:14px;font-weight:500}
.cf.full{grid-column:1 / -1}
.cf small{font-weight:400;color:#6E6E73}
.cf input,.cf select,.cf textarea{width:100%;border:1px solid rgba(0,0,0,.16);border-radius:14px;font:inherit;font-size:16px;font-weight:400;background:#fff;color:#000;outline:0;transition:border-color .2s,box-shadow .2s}
.cf input,.cf select{height:54px;padding:0 16px}
.cf textarea{padding:14px 16px;resize:vertical;min-height:140px;line-height:1.5}
.cf select{-webkit-appearance:none;appearance:none;padding-right:44px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center}
.cf input:focus,.cf select:focus,.cf textarea:focus{border-color:#000;box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.ct-card .btn.big{width:auto;height:58px;padding:0 30px;margin-top:24px;font-size:16.5px}
.ct-card .err{color:#E5003D;font-size:14px;font-weight:500;margin-top:12px}
.ct-card .err:empty{display:none}
.ct-done{text-align:center;padding:clamp(20px,3vw,40px) 0}
.ct-done .tick{width:60px;height:60px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:#000;color:#fff}
.ct-done .lede{margin:10px auto 0}
@media (max-width:760px){.ct-head,.ct-grid{grid-template-columns:minmax(0,1fr)}.ct-card .btn.big{width:100%}}
/* v49j: Contact, side by side. "Talk to us." and its line on the left, a tighter form on the right; placeholders, no labels */
.ct-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,88px);align-items:start}
.ct-wrap .ct-head{display:block;margin:0;padding-top:clamp(6px,1vw,16px)}
.ct-wrap .ct-head .lede{margin-top:18px;max-width:40ch}
.ct-wrap .ct-card{max-width:none;padding:clamp(20px,2.4vw,32px);border-radius:24px}
.ct-wrap .ct-grid{gap:10px}
.ct-wrap .cf input,.ct-wrap .cf select{height:50px;padding:0 15px}
.ct-wrap .cf textarea{min-height:112px;padding:13px 15px}
.ct-wrap .cf ::placeholder{color:#8A8A90}
.ct-wrap .cf select{color:#8A8A90}
.ct-wrap .cf select.set{color:#000}
.ct-wrap .ct-card .btn.big{margin-top:14px;height:52px;padding:0 26px;font-size:16px}
@media (max-width:860px){.ct-wrap{grid-template-columns:minmax(0,1fr)}}
/* v49k: Contact. Our red smiley above "Talk to us." */
.ct-smile{display:block;width:clamp(52px,4.4vw,68px);height:auto;margin-bottom:clamp(16px,1.8vw,24px)}

/* v50b: How it works opens with its heading, then the pinned blood steps */
.hiw-head{padding-bottom:clamp(8px,1.5vw,20px)}
.hiw-head .shead{margin-bottom:0}
/* v50b (12 Oct 2026): panel pages, the biomarker glossary, the policy pages and Creators */
.pl-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.pl-more{margin-top:18px;font-size:14.5px;font-weight:500;text-decoration:underline;text-underline-offset:3px;color:#3E3E42}
.pl-more:hover{color:#000}
.crumbs ol{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:13.5px;color:#6E6E73}
.crumbs li+li::before{content:"/";margin-right:6px;color:#B0B0B5}
.crumbs a{text-decoration:none}.crumbs a:hover{color:#000;text-decoration:underline}
.pmk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:20px}
.pmk>span{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#5C5C60;margin-right:4px}
.pmk ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pmk a{display:inline-flex;height:30px;align-items:center;padding:0 12px;border-radius:99px;background:#F2F2F2;font-size:13.5px;font-weight:500}
.pmk a:hover{background:#E6E6E6}
.pother{margin-top:14px;font-size:14.5px}.pother a{text-decoration:underline;text-underline-offset:3px;color:#3E3E42}
.ppage .buy-main .ticks{margin-top:20px}
.pp-two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:start}
.pp-two .h2{font-size:clamp(34px,3.6vw,52px)}
.pp-copy{margin-top:20px;display:grid;gap:14px;font-size:17px;line-height:1.55;max-width:58ch}
.pp-card{padding:clamp(24px,2.6vw,36px);border-radius:var(--r);background:#F5F5F5}
.pp-card h3{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:16px}
.pp-card .ticks{font-size:15.5px;gap:10px}
.pp-two .ticks{margin-top:20px}
.pp-mks{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:clamp(20px,2.4vw,32px)}
.pp-mk{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:20px;background:#F5F5F5;scroll-margin-top:100px}
.pp-mk h3{font-size:22px;font-weight:600;letter-spacing:-.03em}
.pp-mk span{font-size:13.5px;color:#5C5C60}
.pp-mk p{font-size:15px;line-height:1.5;color:#2A2A2E}
.pp-mk a{margin-top:auto;font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.pp-steps{list-style:none;margin:20px 0 18px;padding:0;counter-reset:n;display:grid;gap:12px}
.pp-steps li{counter-increment:n;display:grid;grid-template-columns:36px 1fr;gap:2px 14px;padding:16px 18px;border-radius:16px;background:#F5F5F5}
.pp-steps li::before{content:counter(n);grid-row:span 2;width:30px;height:30px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:600}
.pp-steps b{font-size:16px;font-weight:600}.pp-steps span{font-size:14.5px;color:#5C5C60;line-height:1.45}
/* v50c (Michael): the medical review is a plain line of small print under the content it covers */
.medrev{margin-top:18px;font-size:13.5px;line-height:1.5;color:#5C5C60}
.medrev a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.medrev a:hover{color:#000}
.glossary .medrev{margin-top:14px}
.pp-rels{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:clamp(20px,2.4vw,32px)}
.pp-rel{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:22px 24px;border-radius:20px;background:#F5F5F5;transition:background .2s}
.pp-rel:hover{background:#ECECEC}
.pp-rel b{font-size:20px;font-weight:600;letter-spacing:-.02em}.pp-rel span{grid-column:1;font-size:14.5px;color:#5C5C60;line-height:1.45}
.pp-rel i{grid-row:1 / span 2;grid-column:2;align-self:center;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#000;color:#fff}
@media (max-width:900px){.pp-two{grid-template-columns:minmax(0,1fr)}}
/* glossary */
.glossary .crumbs{margin-bottom:6px}
.gl-group{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,2fr);gap:clamp(20px,4vw,64px);padding:clamp(28px,3.4vw,44px) 0;border-top:1px solid rgba(0,0,0,.12);scroll-margin-top:90px}
.gl-list{display:grid;gap:12px}
.gl-mk{padding:24px clamp(20px,2.4vw,32px);border-radius:20px;background:#F5F5F5;scroll-margin-top:100px}
.gl-mk:target{box-shadow:0 0 0 2px #000}
.gl-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.gl-h h3{font-size:24px;font-weight:600;letter-spacing:-.03em}
.gl-h .pl{font-size:14px;font-weight:500;color:#5C5C60}
.gl-h .aka{flex-basis:100%;font-size:13.5px;color:#6E6E73}
.gl-mk>p{margin-top:12px;font-size:16px;line-height:1.55;max-width:64ch}
.gl-mk dl{display:grid;gap:10px;margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(0,0,0,.08)}
.gl-mk dl div{display:grid;grid-template-columns:170px 1fr;gap:12px;font-size:14.5px;line-height:1.5}
.gl-mk dt{font-weight:600}.gl-mk dd{margin:0;color:#2A2A2E}
.gl-mk dd a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.gl-group{grid-template-columns:minmax(0,1fr)}.gl-mk dl div{grid-template-columns:minmax(0,1fr);gap:2px}}
/* policies */
.policy{padding:clamp(40px,6vw,88px) 0 clamp(56px,7vw,104px)}
.pol-head .h1{font-size:clamp(44px,5.6vw,84px)}
.pol-meta{margin-top:16px;font-size:15px;color:#5C5C60}
.pol-draft{display:inline-block;margin-top:12px;padding:8px 14px;border-radius:12px;background:#FFF6D6;font-size:14px;font-weight:500}
.pol-grid{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.6fr);gap:clamp(24px,5vw,88px);margin-top:clamp(32px,4vw,56px);align-items:start}
.pol-toc{position:sticky;top:calc(var(--navh) + 24px)}
.pol-toc p,.pol-more>p{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#5C5C60;margin-bottom:12px}
.pol-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px}
.pol-toc a{color:#3E3E42}.pol-toc a:hover{color:#000;text-decoration:underline}
.pol-body{max-width:72ch;font-size:16.5px;line-height:1.65;color:#1F1F22}
.pol-body>p,.pol-body section p{margin-top:14px}
.pol-body section{padding-top:clamp(24px,2.6vw,36px);scroll-margin-top:100px}
.pol-body h2{font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.03em;line-height:1.15;color:#000}
.pol-body ul{margin:12px 0 0;padding-left:22px;display:grid;gap:6px;list-style:disc}
.pol-body li::marker{color:#8A8A90}
.pol-body a{text-decoration:underline;text-underline-offset:3px}
.pol-more{margin-top:clamp(40px,4vw,56px);padding-top:24px;border-top:1px solid rgba(0,0,0,.1)}
.pol-more>div{display:flex;flex-wrap:wrap;gap:10px}.pol-more .order-pill{margin:0}
@media (max-width:900px){.pol-grid{grid-template-columns:minmax(0,1fr)}.pol-toc{position:static}}
/* creators */
.cr-hero .shead{align-items:end}
.cr-hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.cr-reels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:clamp(28px,3.4vw,48px)}
.cr-reel{position:relative;aspect-ratio:9/14;border-radius:20px;overflow:hidden;margin:0;background:#EEE}
.cr-reel img{width:100%;height:100%;object-fit:cover}
.cr-reel figcaption{position:absolute;left:12px;right:12px;bottom:12px;color:#fff;font-size:13px;line-height:1.35;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.cr-reel figcaption b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.cr-steps{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(20px,2.4vw,32px)}
@media (max-width:900px){.cr-reels{grid-template-columns:repeat(3,minmax(0,1fr))}.cr-reels figure:nth-child(n+4){display:none}.cr-steps{grid-template-columns:minmax(0,1fr)}}
.srcs{margin-top:clamp(20px,2.4vw,32px);padding-top:18px;border-top:1px solid rgba(0,0,0,.1)}
.srcs p{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#5C5C60}
.srcs ol{margin:10px 0 0;padding-left:20px;display:grid;gap:6px;font-size:13.5px;line-height:1.45;color:#3E3E42}
.srcs a{text-decoration:underline;text-underline-offset:3px}
.ab-who{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(20px,2.4vw,32px)}
@media (max-width:900px){.ab-who{grid-template-columns:minmax(0,1fr)}}
.src a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* v50c (Michael): the panel pages sit tighter, each section closer to the last */
.ppw .section{padding:clamp(36px,4vw,60px) 0}
.ppw .section.snug{padding-top:clamp(28px,3vw,44px)}
.ppw .reviews{padding:clamp(40px,4.6vw,72px) 0 clamp(36px,4vw,60px)}
.ppw .section.faqsec{padding-top:clamp(28px,3vw,48px)}
.ppw .buy{padding-bottom:clamp(8px,1vw,16px)}
.ppw .pp-mks,.ppw .pp-rels{margin-top:clamp(16px,1.8vw,24px)}
.ppw .shead{margin-bottom:0}
/* v50h: the closing band on every other page, 10% shorter, its heading on its own three lines */
.cta-band{min-height:468px}
.cta-band .copy h2{max-width:none}
/* v50i (Michael): "Your results. One dashboard." on phones: room above the hand, and the arm fades into the slate */
@media (max-width:760px){
  .dband .art{min-height:480px}
  .dband .hp{height:calc(100% - 34px);bottom:0;-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 97%);mask-image:linear-gradient(180deg,#000 58%,transparent 97%)}
}