/* Hook Library landing page. Tokens in tokens.css; rationale in ../DESIGN.md. */
.sec{padding:72px 0}
@media (min-width:900px){.sec{padding:120px 0}}
.narrow{max-width:760px}
.review-flag{background:#FFE6D8;color:#7A2500;font:650 13px/1.35 var(--display);text-align:center;padding:8px 16px}

/* sticky offer bar: bottom on phones (thumb arc), top on desktop */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);background:var(--night);color:#fff;border-top:1px solid var(--rule-n);
  transform:translateY(110%);transition:transform .45s var(--ease);padding-bottom:env(safe-area-inset-bottom)}
.bar.on{transform:none}
.bar-in{display:flex;align-items:center;gap:12px;min-height:68px}
.bar-t{flex:1;font:650 14px/1.3 var(--display);color:#E8E8E8}
.bar .btn{min-height:50px;padding:0 20px}
.bar-m{display:none}
@media (max-width:560px){.bar-t{display:none}.bar .btn{width:100%}
  .bar-in{flex-direction:column;gap:6px;padding-top:8px;padding-bottom:10px}.bar-m{display:block;font:650 14px/1.2 var(--display);color:#E8E8E8}}
@media (min-width:900px){.bar{top:0;bottom:auto;border-top:0;border-bottom:1px solid var(--rule-n);transform:translateY(-110%)}.bar-t{font-size:15px}}

/* hero */
.hero{position:relative;overflow:hidden;padding-bottom:64px}
.hero::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;pointer-events:none;
  background:radial-gradient(50% 40% at 70% 40%,rgba(255,81,0,.13),transparent 70%)}
.nav{display:flex;align-items:center;gap:14px;height:68px;position:relative}
.wm{font:850 26px/1 var(--display);font-stretch:95%;letter-spacing:-.045em;text-decoration:none;color:#fff}
.nav-p{font:600 14px var(--display);color:var(--ash);padding-left:14px;border-left:1px solid var(--rule-n)}
.nav-cta{margin-left:auto;display:none;font:700 15px var(--display);color:#fff;text-decoration:none;border:1.5px solid var(--signal);padding:9px 15px;border-radius:10px}
.nav-cta:hover{background:var(--signal)}
@media (min-width:900px){.nav-cta{display:inline-block}}
.hero-g{position:relative;display:grid;gap:40px;padding-top:24px}
@media (min-width:900px){.hero-g{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:64px;padding-top:48px}}
.kicker{font:650 15px/1.3 var(--display);color:var(--ash);margin-bottom:18px}
.kicker::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--signal);margin-right:10px;vertical-align:1px}
.hero h1{max-width:13ch}
.hero .lede{margin-top:22px;color:#D9D9D9;max-width:44ch}
.hero-cta{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
@media (max-width:520px){.hero-cta .btn{width:100%}}
.hero-film{position:relative}
.film{position:relative;aspect-ratio:4/5;border-radius:var(--r-frame);overflow:hidden;background:#141414 center/cover no-repeat;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px var(--rule-n)}
.film video{width:100%;height:100%;object-fit:cover}
.film-play{position:absolute;inset:auto 16px 16px auto;height:44px;padding:0 18px;border-radius:999px;border:0;background:#fff;color:var(--ink);font:700 14px var(--display);cursor:pointer}
.film-cap{margin-top:12px;font:500 13px/1.4 var(--display);color:var(--ash)}
@media (min-width:900px){.hero-film{max-width:480px;justify-self:end;width:100%}}

/* ticker of real hooks */
.ticker{position:relative;margin-top:56px;border-top:1px solid var(--rule-n);border-bottom:1px solid var(--rule-n);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tk{display:flex;gap:40px;margin:0;padding:18px 0;list-style:none;width:max-content;animation:tk 90s linear infinite}
.tk li{display:flex;align-items:baseline;gap:12px;white-space:nowrap;font:500 16px/1.3 var(--display);color:#E6E6E6}
.tk q{quotes:"\201C" "\201D"}
.tk-d{font:650 13px var(--display);color:var(--ash)}
.tk-d b{color:var(--signal);font-weight:800}
@keyframes tk{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tk{animation:none;flex-direction:column;gap:14px;width:auto;padding:18px var(--g)}.tk li{white-space:normal;flex-wrap:wrap}.tk li[aria-hidden],.tk li:nth-child(n+5){display:none}}
.proof{margin-top:48px;display:grid;gap:18px}
@media (min-width:900px){.proof{grid-template-columns:1.2fr 1fr;gap:64px;align-items:end}}
.proof-1{font:700 clamp(24px,4.4vw,38px)/1.18 var(--display);font-stretch:92%;letter-spacing:-.02em;max-width:26ch;text-wrap:balance}
.proof-1 .num{color:var(--signal)}
.proof-2{color:var(--ash);max-width:40ch}

/* symptoms: the silent checklist */
.symptoms h2{max-width:18ch}
.sym-g{display:grid;gap:8px}
@media (min-width:900px){.sym-g{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:80px;align-items:start}.sym-h{position:sticky;top:112px}.sym-c .checks{margin-top:0}}
.scene{margin-top:22px;font-size:20px;line-height:1.5;max-width:46ch}
.checks{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--rule)}
.checks li{border-bottom:1px solid var(--rule)}
.checks label{display:flex;gap:16px;align-items:flex-start;padding:18px 4px;cursor:pointer;font-size:18px;line-height:1.45;min-height:56px}
.checks input{position:absolute;opacity:0;width:1px;height:1px}
.box{flex:none;width:26px;height:26px;border-radius:7px;border:2px solid #C9C9C9;margin-top:1px;display:grid;place-items:center;transition:background .15s,border-color .15s}
.checks input:checked+.box{background:var(--ink);border-color:var(--ink)}
.checks input:checked+.box::after{content:"";width:12px;height:7px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.checks input:focus-visible+.box{outline:3px solid var(--signal);outline-offset:2px}
.check-out{min-height:28px;margin-top:22px;font:700 20px/1.35 var(--display)}
.close{margin-top:10px;color:var(--graphite);max-width:52ch}

/* walkthrough */
.walk h2{max-width:16ch}
.walk-g{margin-top:48px;display:grid;gap:32px}
.walk-film{display:none}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:56px}
.step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px}
.sn{width:40px;height:40px;border-radius:50%;background:var(--night-3);color:#fff;display:grid;place-items:center;font:800 17px var(--display);transition:background .3s}
.step.on .sn{background:var(--signal)}
.step h3{margin-top:6px}
.step p{margin-top:10px;color:#CFCFCF;max-width:40ch}
.step-film{margin:22px 0 0 -60px;max-width:420px}
@media (max-width:899px){.step-film{width:calc(100% + 60px)}}
.walk-cta{margin-top:56px}
@media (min-width:900px){
  .walk-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start}
  .walk-film{display:block;position:sticky;top:110px;max-width:470px}
  .wf{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)}
  .wf:first-child{position:relative}
  .wf.on{opacity:1}
  .steps{gap:0}
  .step{min-height:40vh;align-content:center;opacity:.35;transition:opacity .4s var(--ease)}
  .step.on{opacity:1}
  .step-film{display:none}
}

/* try it: capped live search */
.try .lede{margin-top:16px}
.tool{margin-top:36px;background:#fff;border:1px solid var(--rule);border-radius:22px;padding:18px;box-shadow:0 30px 60px -40px rgba(0,0,0,.25);font-family:var(--ui)}
@media (min-width:900px){.tool{padding:28px}}
.t-search{display:flex;align-items:center;gap:12px;height:54px;padding:0 16px;border:1.5px solid var(--rule);border-radius:14px;background:#fff}
.t-search:focus-within{border-color:#BDBDBD;box-shadow:0 0 0 4px rgba(255,81,0,.14)}
.t-search svg{width:20px;height:20px;fill:none;stroke:#8C8C8C;stroke-width:1.8;stroke-linecap:round;flex:none}
.t-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:500 17px var(--ui);color:var(--ink)}
.t-chips{display:flex;gap:8px;margin:14px calc(var(--g)*-1 + 0px) 0;padding:0 2px 4px;overflow-x:auto;scrollbar-width:none}
.t-chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--rule);background:#fff;font:600 14px var(--ui);color:#1F1F1F;cursor:pointer}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip:disabled{opacity:.35;cursor:default}
.chip:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.t-count{margin:18px 0 12px;font:500 15px var(--ui);color:#636363}
.t-count b{color:var(--ink);font-weight:800}
.t-list{display:grid;gap:12px}
@media (min-width:900px){.t-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hk{background:#fff;border:1px solid #E6E6E6;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;animation:rise .45s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.hk-top{display:flex;align-items:center;gap:8px}
.hk-dot{width:9px;height:9px;border-radius:50%;background:var(--signal)}
.hk-fw{font:700 12.5px var(--ui);color:var(--ink)}
.hk-days{margin-left:auto;font:700 11.5px/1 var(--ui);padding:6px 9px;border-radius:999px;background:var(--ember);color:#fff;white-space:nowrap}
.hk-days.t2{background:var(--signal-100);color:#7A2500}
.hk-line{font:650 16.5px/1.45 var(--ui);color:var(--ink);letter-spacing:-.005em}
.hk-line mark{background:var(--signal-100);color:inherit;border-radius:3px;padding:0 1px}
.hk-sub{font:500 12.5px var(--ui);color:#636363}
.t-empty{padding:28px 4px;color:var(--graphite);font:500 16px/1.5 var(--display)}
.locked{display:grid;gap:12px;margin-top:12px;filter:blur(5px);opacity:.55;pointer-events:none;user-select:none}
@media (min-width:900px){.locked{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lk-card{border:1px solid #E6E6E6;border-radius:16px;padding:16px;display:grid;gap:10px}
.lk-card i{display:block;height:12px;border-radius:6px;background:#E3E3E3}
.lk-card i:nth-child(1){width:40%}.lk-card i:nth-child(2){width:92%;height:16px}.lk-card i:nth-child(3){width:70%;height:16px}
.locked-cta{margin-top:-60px;position:relative;text-align:center;padding:28px 12px 8px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 38%)}
.locked-cta p{font:700 18px/1.4 var(--display);max-width:32ch;margin:0 auto 18px}

/* what lasts: the chart */
.lasts .lede{margin-top:20px;color:#D9D9D9;max-width:52ch}
.chart{margin-top:40px;display:grid;gap:4px}
.bar-row{display:grid;grid-template-columns:minmax(0,1fr) 54px;grid-template-areas:"n v" "t t";gap:6px 12px;align-items:center;width:100%;
  background:none;border:0;padding:10px 8px;border-radius:10px;color:#fff;text-align:left;cursor:pointer;font-family:var(--display)}
.bar-row:hover,.bar-row.sel{background:var(--night-2)}
.bar-row:focus-visible{outline:3px solid var(--signal);outline-offset:1px}
.br-n{grid-area:n;font:600 15px/1.2 var(--display)}
.br-v{grid-area:v;text-align:right;font:750 15px var(--display)}
.br-u{display:none}
.br-track{grid-area:t;height:8px;border-radius:4px;background:#232323;overflow:hidden}
.br-fill{display:block;height:100%;width:var(--w);background:#5A5A5A;border-radius:4px;transform-origin:left;transition:transform 1s var(--ease)}
.bar-row.mark .br-fill{background:var(--signal)}
.bar-row.mark .br-n{color:#fff}
.br-u{color:var(--ash)}
.chart:not(.in) .br-fill{transform:scaleX(.04)}
@media (min-width:900px){.bar-row{grid-template-columns:220px minmax(0,1fr) 60px 70px;grid-template-areas:"n t v u"}.br-u{display:block;grid-area:u;text-align:right;font:500 13px var(--display);color:var(--ash)}}
@media (prefers-reduced-motion:reduce){.chart:not(.in) .br-fill{transform:none}}
.chart-detail{margin-top:20px;min-height:10px}
.cd{border:1px solid var(--rule-n);border-radius:16px;padding:18px;background:var(--night-2);animation:rise .4s var(--ease) both}
.cd-h{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline}
.cd-h b{font:750 18px var(--display)}
.cd-h span{color:var(--ash);font-size:15px}
.cd q{display:block;margin-top:12px;font:600 19px/1.45 var(--display);quotes:"\201C" "\201D"}
.cd-m{margin-top:10px;font:600 14px var(--display);color:var(--ash)}
.cd-m b{color:var(--signal)}
.chart-cap{margin-top:18px;max-width:70ch}

/* make it yours */
.yours h2{max-width:20ch}
.y-in{margin-top:32px;display:grid;gap:14px}
@media (min-width:700px){.y-in{grid-template-columns:1fr 1fr;gap:20px}}
.y-in label{display:grid;gap:8px;font:650 14px var(--display)}
.y-in input{height:56px;border:1.5px solid #CFCFCF;border-radius:var(--r-ctl);padding:0 16px;font:600 18px var(--display);color:var(--ink);background:#fff}
.y-in input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px rgba(255,81,0,.16)}
.y-out{margin-top:28px;display:grid;gap:14px}
@media (min-width:900px){.y-out{grid-template-columns:1fr 1fr}}
.yc{background:var(--night);color:#fff;border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:14px}
.yc-l{font:500 16.5px/1.85 var(--mono);color:#F2F2F2}
.yc-l .sl{background:#262626;border-bottom:2px solid var(--signal);border-radius:6px 6px 0 0;padding:1px 6px;color:#fff}
.yc-f{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid #2A2A2A}
.yc-m{font:600 13px/1.35 var(--display);color:#A6A6A6;flex:1}
.yc-m b{color:var(--signal)}
.yc-c{flex:none;height:44px;padding:0 16px;border-radius:10px;border:0;background:#fff;color:var(--ink);font:700 15px var(--display);cursor:pointer;min-width:104px}
.yc-c.done{background:var(--signal-100);color:#7A2500}
.y-note{margin-top:18px}

/* three parts */
.axes-g{display:grid;gap:40px}
@media (min-width:900px){.axes-g{grid-template-columns:1fr 420px;gap:80px;align-items:center}}
.ax-tabs{margin-top:28px;display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:#fff;border:1px solid var(--rule);flex-wrap:wrap}
.ax-tab{height:44px;padding:0 14px;border:0;border-radius:10px;background:none;font:650 15px var(--display);color:var(--graphite);cursor:pointer}
.ax-tab.on{background:var(--ink);color:#fff}
.ax-tab:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.ax-panel{margin-top:18px;min-height:120px;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:20px}
.ax-panel .ax-k{font:650 13px var(--display);color:var(--graphite)}
.ax-panel .ax-v{margin-top:8px;font:700 22px/1.35 var(--display);letter-spacing:-.01em}
.ax-panel .ax-v.cap{font:900 30px/1.1 var(--display);font-stretch:85%;text-transform:none}
.ax-note{margin-top:16px;max-width:56ch}
.ax-film{max-width:420px}

/* Hook Facts: the label supplement founders read every day */
.facts-g{display:grid;gap:56px}
@media (min-width:900px){.facts-g{grid-template-columns:400px 1fr;gap:96px;align-items:start}}
.label{border:2.5px solid var(--ink);padding:10px 12px 12px;max-width:400px;background:#fff;font-family:var(--display)}
.lb-t{font:900 46px/1 var(--display);font-stretch:75%;letter-spacing:-.02em;padding-bottom:6px;border-bottom:1px solid var(--ink)}
.lb-row{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid var(--ink);font-size:15.5px;line-height:1.3}
.lb-row b{font-weight:850;font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-serv{border-bottom:10px solid var(--ink);padding-bottom:8px}
.lb-serv span:last-child{text-align:right;font-weight:700}
.lb-per{border-bottom:5px solid var(--ink);font:850 20px/1.2 var(--display);font-stretch:85%}
.lb-h{margin:0;padding:8px 0 4px;font:850 15.5px var(--display);border-bottom:1px solid var(--ink)}
.lb-sub{padding-left:14px}
.lb-sub:last-of-type{border-bottom:10px solid var(--ink)}
.lb-foot{margin-top:8px;font:500 12.5px/1.4 var(--display);color:var(--graphite)}
.ww h2{max-width:14ch}
.ww-card{border-radius:16px;padding:22px}
.ww-pair{display:grid;gap:12px;margin-top:24px}
@media (min-width:700px){.ww-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}}
.ww-close{margin-top:20px;font:700 19px/1.4 var(--display);max-width:44ch;text-wrap:pretty}
.ww-no{background:var(--fog);color:var(--graphite)}
.ww-no .ww-t{color:#3A3A3A}
.ww-yes{background:var(--night);color:#fff}
.ww-l{font:650 13px var(--display);color:inherit;opacity:.75}
.ww-t{margin-top:8px;font:650 20px/1.4 var(--display)}
.ww-m{margin-top:12px;font:600 14px/1.4 var(--display);color:var(--ash);display:flex;align-items:baseline;gap:8px}
.ww-m .d{flex:none;transform:translateY(-1px)}
.ww-m .d{width:8px;height:8px;border-radius:50%;background:var(--signal)}

/* price: the one orange drench. Text on orange is white and bold, always. */
.orange{background:var(--signal);color:#fff}
.price h2{font-size:clamp(56px,14vw,120px);font-stretch:80%;letter-spacing:-.04em}
.p-anchor{margin-top:18px;font:750 22px/1.35 var(--display);max-width:30ch}
.price .btn-ink{margin-top:30px;background:var(--ink);color:#fff}
/* offer card: the one night object on the orange band; outcomes + deliverable + risk + delivery at the decision point */
.offer{margin-top:30px;border-radius:var(--r-frame);padding:26px 22px 22px;background:var(--night);color:#fff;box-shadow:0 34px 60px -34px rgba(0,0,0,.55);max-width:620px}
.of-k{font:700 17px/1.3 var(--display);color:#fff}
.of-can{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.of-can li{display:grid;grid-template-columns:20px 1fr;gap:10px;font:560 17px/1.45 var(--display);color:#E8E8E8}
.of-can svg{width:20px;height:20px;margin-top:2px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.of-get{margin-top:22px;padding-top:20px;border-top:1px solid var(--rule-n);font:650 19px/1.45 var(--display);color:#fff;max-width:38ch;text-wrap:pretty}
.of-get .num{color:var(--signal);font-weight:800}
.of-risk{margin-top:24px;font:650 15px/1.4 var(--display);color:#E8E8E8}
.offer .of-btn{margin-top:12px;width:100%}
.of-del{margin-top:10px;font-size:14px;line-height:1.4;color:var(--ash)}
@media (min-width:900px){.offer{padding:34px 34px 28px}}
.price .btn-ink:hover{background:#000}
.p-guar{margin-top:26px;font:700 19px/1.5 var(--display);max-width:46ch;padding-top:22px;border-top:2px solid rgba(255,255,255,.35)}
.price .btn:focus-visible{outline-color:#fff}
.p-all{margin-top:18px;font:700 19px/1.5 var(--display);max-width:52ch}  /* white on orange stays 19px bold: AA large */

/* voices */
.v-g{margin-top:36px;display:grid;gap:16px}
@media (min-width:900px){.v-g{grid-template-columns:1.3fr 1fr 1fr;align-items:start}}
.voice{margin:0;border:1px solid var(--rule);border-radius:18px;padding:22px;display:grid;gap:16px;position:relative}
.voice.big blockquote{font-size:22px}
.voice .tag-sample{position:absolute;top:16px;right:16px}
.voice blockquote{margin:0;font:600 18px/1.45 var(--display);padding-right:56px}
.voice figcaption{display:flex;align-items:center;gap:12px;font:650 15px var(--display)}
.voice small{display:block;font:500 13px var(--display);color:var(--graphite)}
.av{width:44px;height:44px;flex:none}
.voices .micro{margin-top:16px}

/* who */
.who-g{display:grid;gap:28px}
@media (min-width:900px){.who-g{grid-template-columns:auto 1fr;gap:72px;align-items:center}}
.who-wm{font:850 clamp(64px,15vw,150px)/.85 var(--display);font-stretch:90%;letter-spacing:-.06em;color:var(--signal)}
.who .lede{margin-top:16px;max-width:52ch}

/* faq */
.faq details{border-bottom:1px solid #DADADA}
.faq details:first-of-type{margin-top:28px;border-top:1px solid #DADADA}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font:700 18px/1.35 var(--display);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.faq details p{padding:0 0 22px;color:#333;max-width:62ch}

/* final + footer */
.final-g{display:grid;gap:40px}
@media (min-width:900px){.final-g{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:48px}}
.group{display:flex;align-items:flex-end;justify-content:center;max-width:680px;width:100%;justify-self:center}
.group img{width:26%;height:auto;margin:0 -4.6%;position:relative}
.group img:nth-child(3){width:33%;z-index:3}
.group img:nth-child(2),.group img:nth-child(4){z-index:2}
.final h2{font-size:clamp(36px,7vw,72px);max-width:17ch}
.final-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:32px}
.foot{padding:32px 0 calc(100px + env(safe-area-inset-bottom))}
@media (min-width:900px){.foot{padding-bottom:40px}}
.foot-g{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.foot .wm{font-size:20px}

.toast{position:fixed;left:50%;bottom:92px;z-index:var(--z-toast);transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;
  font:650 14px var(--display);padding:12px 16px;border-radius:12px;transition:opacity .2s,transform .25s var(--ease);box-shadow:0 10px 30px -10px rgba(0,0,0,.5);max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:900px){.toast{bottom:32px}}

/* brand strip (hero): the hooks inside come from these brands' public ads; monochrome, one weight for all */
.brands{margin-top:56px;padding-top:28px;border-top:1px solid var(--rule-n);display:grid;gap:16px}
.bs-l{font:650 15px/1.3 var(--display);color:#E8E8E8}
.bs-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px}
.bs-row img{display:block;height:var(--h,24px);width:auto;filter:brightness(0) invert(1);opacity:.8}
.bs-n{font-size:14px;line-height:1.4;color:var(--ash)}
@media (max-width:560px){.bs-row{gap:14px 22px}.bs-row img{height:calc(var(--h,24px) * .74)}}

/* facts: label left, shelf + two-ways brief right (fills the column the label used to leave empty) */
.facts-r{display:grid;gap:64px;min-width:0}
.shelf{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:24px 0}
.shelf li{flex:0 0 33.333%}
@media (min-width:600px){.shelf li{flex-basis:20%}}
.shelf li{display:grid;justify-items:center;text-align:center;align-content:end}
.shelf img{width:100%;max-width:150px;height:auto}
.shelf b{margin-top:8px;font:800 24px/1 var(--display);font-stretch:88%;letter-spacing:-.02em}
.shelf span{margin-top:4px;font:600 14px/1.3 var(--display);color:var(--graphite)}
.shelf-n{margin-top:20px}

/* try-it chips: every product visible on desktop; on a phone a scroller that shows it scrolls (edge fade + arrow) */
.t-chips-w{position:relative}
.chips-more{display:none;position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--rule);
  background:#fff;box-shadow:0 6px 16px -6px rgba(0,0,0,.3);color:var(--ink);cursor:pointer;place-items:center;padding:0}
.chips-more::after{content:"";position:absolute;inset:-4px}
.chips-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.t-chips.fr{-webkit-mask-image:linear-gradient(90deg,#000 72%,transparent);mask-image:linear-gradient(90deg,#000 72%,transparent)}
.t-chips.fl{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%);mask-image:linear-gradient(90deg,transparent,#000 14%)}
.t-chips.fl.fr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 72%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 72%,transparent)}
.t-chips-w.more .chips-more{display:grid}
.chips-more:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
@media (min-width:900px){.t-chips{flex-wrap:wrap;overflow:visible;margin:14px 0 0;padding:0}.t-chips.fr,.t-chips.fl{-webkit-mask-image:none;mask-image:none}.chips-more{display:none!important}}

/* the outcome line that closes a non-teaser section */
.outcome{margin-top:24px;font:700 19px/1.4 var(--display);max-width:46ch;text-wrap:pretty}
.night .outcome{color:#fff}