/* 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}
/* a film the browser will not start by itself (Low Power Mode, a tap-first browser): its moving copy plays in place;
   if no copy can load, or with reduced motion, a Play button sits on the poster. A tap plays the real film. */
.film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 24px 0 20px;border-radius:999px;border:0;
  background:#fff;color:var(--ink);font:750 16px/1 var(--display);cursor:pointer;box-shadow:0 12px 34px -10px rgba(0,0,0,.7);-webkit-tap-highlight-color:transparent}
.film-play[hidden]{display:none}
.film-play svg{width:15px;height:15px;fill:currentColor}
.film-play:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.film-anim{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.film[data-state="anim"] .film-anim{display:block;animation:film-in .3s var(--ease) both}
.film[data-state="tap"],.film[data-state="anim"],.film[data-state="wait"]{cursor:pointer}
@keyframes film-in{from{opacity:0}}
.film[data-dbg]::after{content:attr(data-dbg);position:absolute;left:8px;top:8px;z-index:3;padding:3px 8px;border-radius:6px;background:#000;color:#fff;font:600 11px/1.5 var(--mono)}
.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}}

/* 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-c .checks{margin-top:0}}
.close-m{display:none}
@media (max-width:899px){.sym-h .close{display:none}.sym-c .close-m{display:block}}
.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:28px;font:700 19px/1.4 var(--display);max-width:40ch;text-wrap:pretty}

/* 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) 84px;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) 90px 76px;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)}
.p-guar .p-guar-h{margin-bottom:12px;font:800 clamp(38px,5.2vw,58px)/1.02 var(--display);letter-spacing:-.025em;color:#fff}
.p-guar .p-guar-h .num{color:inherit}
.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}

/* rework 2: highlighted kicker, h1 strike-through device, desktop film, reassurance row, full-colour brand band */
.kicker.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:var(--signal);color:#fff;font:750 19px/1.2 var(--display);letter-spacing:-.005em}
.kicker.pill::before{display:none}
.hero h1 .strike{color:var(--ash);text-decoration:line-through;text-decoration-color:var(--signal);text-decoration-thickness:.09em;font-weight:inherit}
.hero h1 .hl{background:none;color:var(--signal)}
.hero h1 .strike,.hero h1 .hl{white-space:nowrap}
@media (min-width:1024px){.hero h1{font-size:clamp(48px,4.3vw,64px);max-width:none}}
@media (max-width:560px){.kicker.pill{border-radius:14px;padding:8px 14px}}
.film.desk{display:none;aspect-ratio:16/10;border-radius:var(--r-frame)}
@media (min-width:1024px){
  .hero-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .film.phone{display:none}.film.desk{display:block}
  .hero-film{max-width:none}
}
.risk{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.risk li{display:inline-flex;align-items:center;gap:6px;font:650 15px/1.3 var(--display);color:var(--ink)}
.night .risk li,.hero .risk li{color:#E8E8E8}
.risk svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--signal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.offer .risk.of-risk{margin-top:24px}.offer .risk li{color:#fff;font-size:16px}
.brands-band{padding:36px 0}
.brands-band .brands{margin-top:0;padding-top:0;border-top:0;gap:18px}
.brands-band .bs-l{color:var(--graphite)}
.brands-band .bs-row img{filter:none;opacity:1}
@media (min-width:1024px){.brands-band .bs-row{flex-wrap:nowrap;justify-content:space-between;gap:20px}}

/* rework 3 (3 Oct): chart column labels, bottom guarantee, 15 free spots */
.chart-h{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:12px;padding:0 8px;font:650 12.5px/1.2 var(--display);color:var(--ash)}
.chart-h span:nth-child(n+2){text-align:right;white-space:nowrap;justify-self:end}
.chart-h span:nth-child(3){display:none}
.chart-h + .chart{margin-top:8px}
@media (min-width:900px){.chart-h{grid-template-columns:220px minmax(0,1fr) 90px 76px}.chart-h span:nth-child(2){grid-column:3}.chart-h span:nth-child(3){display:block}}
.final-guar{margin-top:32px;padding-top:24px;border-top:1px solid var(--rule-n);max-width:32ch}
.final-guar .fg-h{margin-bottom:8px;font:800 clamp(30px,3.6vw,42px)/1.04 var(--display);letter-spacing:-.02em;color:#fff}
.final-guar .fg-h .num{color:var(--signal)}
.final-guar p:last-child{font-size:16px;line-height:1.45;color:#CFCFCF}
.free-g{display:grid;gap:36px}
@media (min-width:900px){.free-g{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;align-items:start}}
.fr-lists{margin-top:32px;display:grid;gap:28px}
@media (min-width:640px){.fr-lists{grid-template-columns:1fr 1fr;gap:32px}}
.fr-k{margin-bottom:12px;font:750 16px/1.3 var(--display);color:var(--ink)}
.fr-who,.fr-how{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.fr-who li{display:flex;gap:10px;font-size:16px;line-height:1.45}
.fr-who svg{width:18px;height:18px;flex:none;margin-top:3px;fill:none;stroke:var(--ember);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fr-how{counter-reset:fr}
.fr-how li{counter-increment:fr;display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:16px;line-height:1.45}
.fr-how li::before{content:counter(fr);width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font:700 13px/24px var(--display);text-align:center}
.fr-card{display:grid;gap:18px;padding:28px;border:1px solid var(--rule);border-radius:var(--r-frame);background:#fff;box-shadow:0 18px 40px -24px rgba(14,14,14,.25)}
@media (min-width:900px){.fr-card{padding:34px}}
.fr-unknown{font:750 24px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.fr-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px}
.fr-big{font:800 76px/.9 var(--display);letter-spacing:-.03em;color:var(--ink)}
.fr-of{font:700 19px/1.2 var(--display);color:var(--ink)}
.fr-dots{margin-top:16px;display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:5px}
.fr-dots i{display:block;aspect-ratio:1;border-radius:4px;background:var(--signal)}
.fr-dots i.x{background:var(--rule)}
.free .fr-btn{width:100%;background:var(--ink);color:#fff}
.free .fr-btn:hover{background:#000}
.free .fr-btn:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.fr-note{font-size:14px;line-height:1.45;color:var(--graphite)}
.fr-full{font:750 22px/1.3 var(--display);color:var(--ink)}
.free .lede{margin-top:16px}
.fr-card.full .fr-note{display:none}
.fr-card .fr-buy{width:100%}
.fr-card [hidden]{display:none}
.fr-card .btn{white-space:nowrap}
@media (max-width:560px){.fr-card{padding:22px 18px}.fr-card .btn{padding:0 12px}}
.hero h1{text-wrap:balance}

/* real reviews (loaded from the app): photo, initial fallback, FTC disclosure next to the name */
.av-photo{border-radius:50%;object-fit:cover;background:var(--fog)}
.av-i{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--ink);color:#fff;font:750 18px var(--display)}
.voice figcaption{flex-wrap:wrap}
.voice.real blockquote{padding-right:0}
.tag-disc{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--signal-50);color:var(--ember);font:650 12.5px/24px var(--display);white-space:nowrap}

/* hero with the launch film (sk-hooklib-films h1-*): phone film stacks under the CTA; from 900px the copy and the
   CTA share the top row; from 1024px the 16:10 film runs the full width of the wrap underneath */
@media (min-width:900px){
  .hero-g{grid-template-areas:"copy film" "side film";align-items:start}
  .hero-copy{grid-area:copy}.hero-side{grid-area:side}.hero-film{grid-area:film;align-self:center}
}
@media (min-width:1024px){
  .hero-g{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"copy side" "film film";column-gap:64px;row-gap:48px;align-items:end}
  .hero-side{padding-bottom:6px}
  .hero-film{max-width:none;justify-self:stretch}
  .hero-side .lede{margin-top:0}
}

/* footer policy links (Razorpay's website check reads them) */
.foot-nav{flex-basis:100%;display:flex;flex-wrap:wrap;gap:0 20px;margin-top:4px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;font:600 14px var(--display);color:#CFCFCF;text-decoration:none}
.foot-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-nav a:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:4px}
@media (min-width:900px){.foot-nav a{min-height:32px}}

/* the full button label ("Get the Hook Library for $19") stays on one line inside cards on small phones */
@media (max-width:560px){
  .locked-cta{padding-left:0;padding-right:0}
  .locked-cta .btn{width:100%}
  .locked-cta .btn,.offer .of-btn{padding:0 12px;white-space:nowrap}
}

/* the three demo tabs stay on one row on phones */
@media (max-width:560px){.ax-tabs{flex-wrap:nowrap}.ax-tab{padding:0 9px;font-size:14px;white-space:nowrap}}

@media (max-width:380px){.ax-tab{padding:0 6px;font-size:13.5px}}

/* ══════════ 4 Oct: the seven conversion sections (audit: work/lp-audit/SECTIONS-AUDIT.md) ══════════
   --barb / --bart: room the fixed offer bar takes (bottom on phones, top on desktop), so pinned scenes and the
   brief tray never sit under it. */
:root{--barb:calc(98px + env(safe-area-inset-bottom));--bart:0px}
@media (min-width:900px){:root{--barb:0px;--bart:69px}}
[hidden].hproof,.pwall[hidden],.founder[hidden],.tray [hidden],.t-more[hidden],.pw-more[hidden]{display:none}

/* 2. the working search in the hero: a white field on the night stage, three real hooks under it */
.hero-find{position:relative;font-family:var(--ui);min-width:0}
.hf-box{position:relative;display:flex;align-items:center;gap:12px;height:58px;padding:0 16px;border-radius:14px;background:#fff;box-shadow:0 22px 50px -26px rgba(0,0,0,.9)}
.hf-box:focus-within{box-shadow:0 0 0 3px var(--signal)}
.hf-box svg{width:21px;height:21px;flex:none;fill:none;stroke:#5E5E5E;stroke-width:1.9;stroke-linecap:round}
.hf-box input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:600 18px var(--ui);color:var(--ink);-webkit-appearance:none;appearance:none}
.hf-box input::placeholder{color:#6B6B6B;opacity:1}
.hf-box input::-webkit-search-cancel-button{display:none}
.hf-ghost{position:absolute;left:49px;top:0;bottom:0;display:none;align-items:center;font:600 18px var(--ui);color:var(--ink);pointer-events:none;white-space:nowrap}
.hero-find.typing .hf-ghost{display:flex}
.hero-find.typing input::placeholder{color:transparent}
.hf-ghost::after{content:"";width:2px;height:22px;margin-left:2px;border-radius:1px;background:var(--signal);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.hf-chips{display:flex;gap:8px;margin:12px calc(var(--g) * -1) 0;padding:0 var(--g) 2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hf-chips::-webkit-scrollbar{display:none}
.hf-chip{flex:none;height:40px;padding:0 13px;border-radius:999px;border:1px solid var(--rule-n);background:var(--night-2);color:#EDEDED;font:600 14px var(--ui);cursor:pointer;white-space:nowrap}
.hf-chip .num{margin-left:3px;color:var(--ash);font-weight:500}
.hf-chip.on{background:#fff;border-color:#fff;color:var(--ink)}
.hf-chip.on .num{color:var(--graphite)}
.hf-chip:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.hf-out{display:grid;gap:10px;margin-top:14px}
.hf-r{min-width:0;display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:14px;background:var(--night-2);border:1px solid var(--rule-n)}
.hf-l{font:650 16px/1.42 var(--ui);color:#fff;letter-spacing:-.005em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.hf-l mark{background:rgba(255,81,0,.3);color:#fff;border-radius:3px;padding:0 1px}
.hf-m{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.hf-s{font:500 13px var(--ui);color:var(--ash)}
.hf-d{flex:none;font:700 12px/1 var(--ui);padding:6px 9px;border-radius:999px;background:var(--ember);color:#fff;white-space:nowrap}
.hf-r.in{animation:flipin .5s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms);transform-origin:50% 0}
@keyframes flipin{from{opacity:0;transform:perspective(700px) rotateX(-40deg) translateY(10px)}}
.hf-note{margin-top:12px;min-height:21px;font:600 15px/1.4 var(--display);color:#E8E8E8}
.hf-note b{color:var(--signal);font-weight:800}
.hf-all{display:inline-flex;align-items:center;min-height:44px;font:650 15px var(--display);color:#fff;text-underline-offset:4px}
.hf-all:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:6px}
@media (min-width:900px){
  .hero-g{grid-template-areas:"copy film" "side film" "find find"}
  .hero-find{grid-area:find}
  .hf-chips{flex-wrap:wrap;overflow:visible;margin:14px 0 0;padding:0}
  .hf-out{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
  .hf-box{height:64px;padding:0 20px}.hf-box input,.hf-ghost{font-size:20px}.hf-ghost{left:53px}
}
@media (min-width:1024px){.hero-g{grid-template-areas:"copy side" "find find" "film film"}}
/* 1. the proof line under the hero button (exists only with real reviews) */
.hproof{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 15px/1.35 var(--display);color:#E8E8E8;text-decoration:none}
.hproof u{text-underline-offset:3px;color:#fff}
.hp-av{display:flex;flex:none}
.hp-av > *{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px var(--night);object-fit:cover;font-size:13px}
.hp-av > * + *{margin-left:-9px}
.hproof:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:8px}

/* 4. the library-size scene. Static by default (no JS, reduced motion); .pin makes it a pinned, scroll-lit scene. */
.size{position:relative}
.sz-in{padding-top:56px;padding-bottom:48px}
.sz-text{font:750 clamp(27px,7.3vw,58px)/1.12 var(--display);font-stretch:88%;letter-spacing:-.028em;max-width:21ch;text-wrap:balance}
.sz-b{transition:color .45s var(--ease)}
.odo{white-space:nowrap}
.odo-d{color:var(--signal);transition:color .45s var(--ease)}
.od{display:inline-block;height:1em;line-height:1;overflow:hidden;vertical-align:-.14em}
.od-s{display:block;transform:translateY(calc(var(--d) * -1em));transition:transform 1.1s var(--ease)}
.od:nth-child(2n) .od-s{transition-duration:1.3s}
.odo.zero .od-s{transform:none}
.sz-close{margin-top:22px;max-width:40ch;color:var(--ash)}
.sz-brands .bs-row li{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.size.pin .sz-track{height:calc(100vh + var(--n) * 26vh);height:calc(100svh + var(--n) * 26svh)}
.size.pin .sz-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;padding:var(--bart) 0 var(--barb)}
.size.pin .sz-in{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding-top:20px;padding-bottom:20px}
.size.pin .sz-b{color:#4D4D4D}
.size.pin .sz-b .odo-d{color:#5C3320}
.size.pin .sz-b.lit{color:#fff}
.size.pin .sz-b.lit .odo-d{color:var(--signal)}
.size.pin .sz-close{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.size.pin.end .sz-close{opacity:1;transform:none}
.size.pin .sz-brands{flex:none;padding:22px 0}
.size.pin .sz-brands .bs-row li{opacity:0;transform:translateY(10px)}
.size.pin .sz-brands .bs-row li.in{opacity:1;transform:none}
@media (max-width:560px){.size.pin .sz-brands .bs-row{gap:12px 20px}.size.pin .sz-brands{padding:16px 0}.size.pin .sz-brands .brands{gap:12px}}
@media (max-height:640px){.size.pin .sz-close{display:none}}

/* 6. the walkthrough as one pinned phone frame (phones only; desktop keeps its sticky film beside the steps) */
.walk-pin{display:contents}
.walk-rail{display:none}
.walk.pin .walk-g{display:block;margin-top:20px;height:calc(100vh + (var(--n) - 1) * 38vh);height:calc(100svh + (var(--n) - 1) * 38svh)}
.walk.pin .walk-pin{display:grid;grid-template-rows:auto auto auto;align-content:center;gap:14px;position:sticky;top:0;height:100vh;height:100svh;padding:12px 0 calc(var(--barb) + 12px)}
.walk.pin .walk-rail{display:block}
.wr-l{font:650 14px/1.2 var(--display);color:var(--ash)}
.wr-segs{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px}
.wr-s{height:30px;padding:0;border:0;background:none;cursor:pointer;display:grid;align-items:center}
.wr-s::before{content:"";height:4px;border-radius:2px;background:#333;transition:background .3s var(--ease)}
.wr-s.on::before,.wr-s.done::before{background:var(--signal)}
.wr-s:focus-visible{outline:3px solid var(--signal);outline-offset:0;border-radius:6px}
.walk.pin .walk-film{display:block;position:relative;aspect-ratio:4/5;margin:0 auto;width:min(100%,calc((100vh - var(--barb) - 270px) * .8));width:min(100%,calc((100svh - var(--barb) - 270px) * .8))}
.walk.pin .wf{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease)}
.walk.pin .wf.on{opacity:1}
.walk.pin .steps{gap:0}
.walk.pin .step{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity .35s var(--ease);align-content:start}
.walk.pin .step.on{opacity:1;pointer-events:auto}
.walk.pin .step-film{display:none}
.walk.pin .step h3{margin-top:8px;font-size:22px}
.walk.pin .step p{margin-top:6px;font-size:16px;line-height:1.45}

/* 7. "Find your 5": hooks are tap targets; the tray counts to the number in the guarantee */
button.hk{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
button.hk > span{display:block}
button.hk .hk-top{display:flex}
button.hk[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
button.hk:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.hk-foot{display:flex!important;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.hk-add{flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid #C9C9C9;display:grid;place-items:center;color:var(--ink);transition:background .2s var(--ease),border-color .2s var(--ease),color .2s}
.hk-add svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hk-add .i-on{display:none}
button.hk[aria-pressed="true"] .hk-add{background:var(--ink);border-color:var(--ink);color:#fff}
button.hk[aria-pressed="true"] .hk-add .i-on{display:block}
button.hk[aria-pressed="true"] .hk-add .i-off{display:none}
.t-more{display:block;width:100%;height:48px;margin-top:12px;border-radius:12px;border:1.5px solid var(--rule);background:#fff;font:700 15px var(--display);color:var(--ink);cursor:pointer}
.t-more:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.tray{position:sticky;bottom:calc(var(--barb) + 10px);z-index:5;margin-top:14px;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:10px 12px;padding:12px 14px;border-radius:16px;background:var(--night);color:#fff;font-family:var(--display);box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
@media (min-width:900px){.tray{bottom:16px;grid-template-columns:44px minmax(0,1fr) auto;padding:14px 18px}}
.tray-ring{position:relative;width:44px;height:44px;display:grid;place-items:center}
.tray-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.tr-bg{fill:none;stroke:#2E2E2E;stroke-width:4}
.tr-fg{fill:none;stroke:var(--signal);stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0));transition:stroke-dashoffset .5s var(--ease)}
.tray-n{position:relative;font:800 16px/1 var(--display)}
.tray-t{font:650 15px/1.35 var(--display);text-wrap:pretty}
.tray-b{grid-column:1/-1;display:none;flex-wrap:wrap;gap:8px}
.tray.has .tray-b{display:flex}
@media (min-width:900px){.tray-b{grid-column:auto;flex-wrap:nowrap}}
.tray-copy{height:48px;padding:0 16px;border-radius:12px;border:1.5px solid #5E5E5E;background:none;color:#fff;font:700 15px var(--display);cursor:pointer;white-space:nowrap}
.tray-copy:focus-visible{outline:3px solid #fff;outline-offset:2px}
.tray .btn{min-height:48px;flex:1;padding:0 14px;font-size:17px;white-space:nowrap}
.tray.bump .tray-ring{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.12)}}
.fly{position:fixed;z-index:var(--z-toast);left:0;top:0;pointer-events:none;max-width:260px;padding:8px 12px;border-radius:12px;background:var(--ink);color:#fff;font:650 13px/1.3 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:transform,opacity}

/* 3. "What you use now": phones compare one alternative at a time (tabs); desktop shows all three beside ours */
.cmp h2{max-width:17ch}
.cmp-tabs{margin-top:28px;display:flex;gap:4px;padding:4px;border-radius:14px;background:#fff;border:1px solid var(--rule)}
.cmp-tab{flex:1;min-width:0;height:44px;padding:0 4px;border:0;border-radius:10px;background:none;font:650 14px var(--display);color:var(--graphite);cursor:pointer;white-space:nowrap}
.cmp-tab.on{background:var(--ink);color:#fff}
.cmp-tab:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.cmp-t{margin-top:14px}
.cmp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:16px 0 4px}
.cmp-job{grid-column:1/-1;font:750 17px/1.25 var(--display)}
.cmp-row > [role=cell],.cmp-head > [role=columnheader]:not(.cmp-job){padding:12px;border-radius:12px}
.cmp-row > [role=cell]{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-content:start;background:#fff;font:560 15px/1.4 var(--display);color:#2B2B2B}
.cmp-row > [role=cell]:not([class*="m-"]){grid-template-columns:minmax(0,1fr);font-weight:750;font-size:16px}
.cmp-row svg{width:20px;height:20px;margin-top:1px;fill:none;stroke:#8C8C8C;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cmp-row .m-yes svg{stroke:var(--ink)}
.cmp-row > .c-us{background:var(--night);color:#fff}
.cmp-row > .c-us svg{stroke:var(--signal)}
.cmp-head{padding:0}
.cmp-head .cmp-job{display:none}
.cmp-head > [role=columnheader]:not(.cmp-job){padding-top:0;padding-bottom:0;font:650 13px/1.3 var(--display);color:var(--graphite)}
.cmp-t[data-col="ai"] .c-lib,.cmp-t[data-col="ai"] .c-sub,.cmp-t[data-col="lib"] .c-ai,.cmp-t[data-col="lib"] .c-sub,.cmp-t[data-col="sub"] .c-ai,.cmp-t[data-col="sub"] .c-lib{display:none}
.cmp-t.flip .cmp-row > [role=cell]:not(.c-us){animation:flipin .45s var(--ease) both;animation-delay:calc(var(--r,0) * 55ms);transform-origin:50% 0}
@media (min-width:900px){
  .cmp-tabs{display:none}
  .cmp-t{margin-top:44px}
  .cmp-row{grid-template-columns:minmax(0,1.05fr) repeat(3,minmax(0,1fr)) minmax(0,1.2fr);gap:0 14px;padding:0;align-items:stretch;border-top:1px solid #DADADA}
  .cmp-head{border-top:0}
  .cmp-head .cmp-job{display:block}
  .cmp-job{grid-column:auto;align-self:center;padding:18px 0;font-size:18px}
  .cmp-t .cmp-row > [role=cell],.cmp-t .cmp-head > [role=columnheader]:not(.cmp-job){display:grid!important;border-radius:0;padding:18px 16px}
  .cmp-row > [role=cell]:not(.c-us){background:none}
  .cmp-head > [role=columnheader]:not(.cmp-job){font-size:15px;color:var(--ink);padding-bottom:14px!important;align-content:end}
  .cmp-head > .c-us{background:var(--night);color:#fff!important;border-radius:18px 18px 0 0!important;font-weight:800!important;font-size:18px!important;padding-top:20px!important}
  .cmp-row:last-child > .c-us{border-radius:0 0 18px 18px}
  .cmp-t .cmp-row > .c-us{border-top:1px solid var(--rule-n);margin-top:-1px}
}
.cmp-meter{margin-top:28px;display:grid;gap:18px;padding:20px;border-radius:18px;background:#fff;border:1px solid var(--rule)}
.cm-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "t t";gap:10px 12px;align-items:end}
.cm-l{grid-area:l;font:650 15px/1.3 var(--display)}
.cm-v{grid-area:v;font:800 30px/1 var(--display);font-stretch:88%;letter-spacing:-.025em;white-space:nowrap}
.cm-v small{font:650 14px var(--display);letter-spacing:0;color:var(--graphite)}
.cm-track{grid-area:t;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
.cm-track i{height:14px;border-radius:4px;background:var(--ink);transition:opacity .25s var(--ease)}
.cm-us .cm-track i{background:var(--signal)}
.cmp-meter.run .cm-them .cm-track i:not(.on){opacity:.12}
@media (min-width:900px){.cmp-meter{padding:28px 32px;gap:22px}.cm-row{grid-template-columns:minmax(0,300px) minmax(0,1fr) 150px;grid-template-areas:"l t v";align-items:center}.cm-v{text-align:right;font-size:36px}.cm-l{font-size:17px}.cm-track i{height:18px}}
.cmp-note{margin-top:14px;max-width:70ch}

/* 1. the wall of founder reviews (only with real reviews) */
.pw{margin-top:36px;columns:1;column-gap:16px}
@media (min-width:700px){.pw{columns:2}}
@media (min-width:1000px){.pw{columns:3}}
.pw[data-n="1"]{columns:1;max-width:820px}
@media (min-width:1000px){.pw[data-n="2"]{columns:2}}
.pw-c{break-inside:avoid;margin:0 0 16px;display:grid;gap:14px;padding:22px;border:1px solid var(--rule);border-radius:18px;background:#fff;position:relative}
.pw-c blockquote{margin:0;font:600 18px/1.45 var(--display)}
.pw-c.big blockquote{font-size:23px;line-height:1.32;letter-spacing:-.012em}
.pw-c figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font:650 15px var(--display)}
.pw-c small{display:block;font:500 13px var(--display);color:var(--graphite)}
.pw-r{display:flex;gap:4px}
.pw-r i{width:9px;height:9px;border-radius:50%;background:#DDD}
.pw-r i.on{background:var(--signal)}
.pw-c.late{display:none}
.pw.all .pw-c.late{display:grid;animation:rise .45s var(--ease) both}
.pw-more{display:block;margin-top:8px;height:52px;padding:0 22px;border-radius:12px;border:1.5px solid var(--ink);background:none;font:700 16px var(--display);color:var(--ink);cursor:pointer}
.pw-more:focus-visible{outline:3px solid var(--signal);outline-offset:2px}

/* 5. Saahil on camera, the wall of real work behind (hidden until a file is set) */
.founder{position:relative;overflow:hidden;padding:72px 0}
@media (min-width:900px){.founder{padding:120px 0}}
.wall{position:absolute;inset:0;overflow:hidden;perspective:1000px;opacity:.5;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 40%,#000 0,rgba(0,0,0,.5) 45%,transparent 78%);mask-image:radial-gradient(120% 90% at 70% 40%,#000 0,rgba(0,0,0,.5) 45%,transparent 78%)}
.wall-plane{position:absolute;left:50%;top:46%;display:grid;gap:12px;width:max(175vw,1100px);transform:translate(-50%,-50%) rotateX(28deg) rotateZ(-8deg) scale(1.05)}
.wall-track{display:flex;gap:12px;width:max-content;padding-right:12px;animation:wallslide var(--dur,70s) linear infinite;animation-play-state:paused;will-change:transform}
.wall-lane.rev .wall-track{animation-direction:reverse}
.wall.run .wall-track{animation-play-state:running}
.wall-tile{flex:none;height:clamp(140px,24vw,220px);border-radius:12px;overflow:hidden;background:var(--night-3)}
.wall-tile img,.wall-tile video{display:block;width:100%;height:100%;object-fit:cover}
.wall-tile img:not([src]){visibility:hidden}
@keyframes wallslide{to{transform:translate3d(calc(var(--len,50%) * -1),0,0)}}
@media (prefers-reduced-motion:reduce){.wall-track{animation:none}}
.fd-in{position:relative;display:grid;gap:32px}
@media (min-width:900px){.fd-in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:64px}}
.fd-copy .lede{margin-top:18px;color:#D9D9D9;max-width:44ch}
.fd-v{margin:0}
.fd-frame{position:relative;border-radius:var(--r-frame);overflow:hidden;background:#141414;box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px var(--rule-n)}
.fd-frame video,.fd-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fd-play{position:absolute;inset:0;margin:auto;width:78px;height:78px;border-radius:50%;border:0;background:var(--signal);color:#fff;cursor:pointer;display:grid;place-items:center;transition:transform .2s var(--ease),background .15s}
.fd-play:hover{background:var(--signal-hi);transform:scale(1.04)}
.fd-play:focus-visible{outline:3px solid #fff;outline-offset:4px}
.fd-play svg{width:28px;height:28px;margin-left:4px;fill:currentColor}
.fd-slot{position:absolute;inset:10px;display:grid;place-items:center;text-align:center;padding:20px;border:1.5px dashed #5E5E5E;border-radius:12px;color:#CFCFCF;font:500 15px/1.5 var(--display)}
.fd-v figcaption{margin-top:12px;font:600 14px/1.4 var(--display);color:var(--ash)}
.fly{transform-origin:0 0}
/* phone hero: tighter stack so the search box sits in the first screen under the button */
@media (max-width:899px){.hero-g{gap:26px;padding-top:16px}.hero .hero-side .lede{margin-top:0}.hero-cta{margin-top:22px}}
.hp-av .av-i{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--ink);font-weight:750}
/* review pass 1 */
@media (max-width:899px){.cmp-head > .c-us{background:none;color:var(--ink);font-weight:800}}
.pw-c .tag-sample{justify-self:start}
/* the wall stays clear of the words: under the video on phones, on the video's side on desktop */
.wall{inset:auto 0 0 0;height:56%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 78%,transparent 100%)}
@media (min-width:900px){.wall{inset:0 0 0 auto;width:66%;height:auto;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%,#000 100%);mask-image:linear-gradient(to right,transparent 0,#000 30%,#000 100%)}}
/* lines not yet lit sit further back, so a paused reader is not asked to read them */
.size.pin .sz-b{color:#3D3D3D}
.size.pin .sz-b .odo-d{color:#4A2B1C}
/* when the tray holds the full brief it carries the button, so the fixed bar steps aside on phones */
@media (max-width:899px){:root.tray-cta,:root.fit-cta{--barb:env(safe-area-inset-bottom)}:root.tray-cta .bar,:root.fit-cta .bar{transform:translateY(110%)}}
/* review pass 2 */
@media (min-width:900px){.sz-text{max-width:30ch;font-size:clamp(40px,4.4vw,60px)}.size.pin .sz-in{padding-top:28px;padding-bottom:28px}}
.fd-v figcaption{display:inline-block;margin-top:12px;padding:6px 10px;border-radius:8px;background:var(--night);color:#D6D6D6}
/* phones: the fixed bar is the hero's button (on from the first paint), so the inline button and its reassurance row
   give their place to the search. The proof line stays when there are reviews. */
@media (max-width:899px){
  .hero-side,.hero-cta{display:contents}
  .hero-cta > .btn,.hero-cta > .risk{display:none}
  .hero-copy{order:0}.hero .lede{order:1}.hero-find{order:2}.hproof{order:3}.hero-film{order:4}
  .hero .nav{height:60px}
  .hero h1{max-width:none}
  .hero .lede{font-size:17.5px;line-height:1.48}
  :root.hero-typing .bar{transform:translateY(110%)}
}

/* 8. who it's for: one section in two halves, day for "for" and night for "not". The cards start as one deck (on the
   first slot on phones, on the seam in two columns) and deal themselves to their side when the section arrives
   (.deck, then .dealing). Without scripting or with reduced motion they are simply in place. */
.fit{position:relative;isolation:isolate;display:grid}
.fit-p{padding:64px 0 60px}
.fit-in{width:100%;max-width:calc(var(--max) + var(--g)*2);margin:0 auto;padding:0 var(--g)}
.fit h2{font-size:clamp(34px,9.4vw,56px)}
.fit-l{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px}
.fit-l li{border-radius:var(--r-panel);outline:1.5px dashed transparent;outline-offset:-1.5px}
.fit-c{position:relative;z-index:2;display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;width:100%;min-height:68px;padding:19px 18px;
  border-radius:var(--r-panel);border:1.5px solid transparent;background:var(--fog);color:inherit;font:650 18px/1.3 var(--display);letter-spacing:-.01em;text-align:left}
button.fit-c{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
button.fit-c:active{transform:scale(.985)}
button.fit-c:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.fit-m{width:28px;height:28px;border-radius:50%;border:2px solid #B4B4B4;display:grid;place-items:center;transition:background .2s var(--ease),border-color .2s var(--ease)}
.fit-m svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18;stroke-dashoffset:18;transition:stroke-dashoffset .35s var(--ease) .05s}
.fit-w{padding-top:2px}
.fit-c[aria-pressed="true"]{background:var(--signal-50);border-color:var(--signal)}
.fit-c[aria-pressed="true"] .fit-m{background:var(--signal);border-color:var(--signal)}
.fit-c[aria-pressed="true"] .fit-m svg{stroke-dashoffset:0}
.fit.live:not(.deck):not(.dealing):not(.touched) #fitFor li:first-child .fit-m{animation:fit-ping 2.6s var(--ease) 1s infinite}
@keyframes fit-ping{0%{box-shadow:0 0 0 0 rgba(255,81,0,.5)}55%,100%{box-shadow:0 0 0 12px rgba(255,81,0,0)}}
.fit-not .fit-c{background:var(--night-2);border-color:var(--rule-n)}
.fit-not .fit-m{border-color:rgba(255,255,255,.3)}
.fit-not .fit-m svg{stroke:var(--ash);stroke-width:2.2;stroke-dashoffset:0}
.fit-not p{margin:0}
.fit-go{display:inline-block;margin:2px 0 -10px;padding:12px 0 11px;color:#fff;font:600 16px/1.3 var(--display);letter-spacing:0;
  text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:5px;transition:text-underline-offset .2s var(--ease)}
.fit-go:hover{text-underline-offset:7px}
.fit-go:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:4px}
.fit-meter{margin-top:22px}
.fit-meter[hidden],.fm-buy[hidden]{display:none}
.fm-segs{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px}
.fm-segs i{position:relative;height:4px;border-radius:2px;background:var(--rule);overflow:hidden}
.fm-segs i::after{content:"";position:absolute;inset:0;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.fm-segs i.on::after{transform:none}
.fm-t{margin:12px 0 0;font:600 15px/1.4 var(--display);color:var(--graphite)}
.fit.is-fit .fm-t{color:var(--ink);font-weight:750}
.fm-buy{margin-top:16px}
.fm-buy .btn{animation:fit-rise .5s var(--ease) both}
@keyframes fit-rise{from{opacity:0;transform:translateY(10px)}}
@media (max-width:520px){.fm-buy .btn{width:100%}}
.fit.deck .fit-for li{outline-color:#CFCFCF}
.fit.deck .fit-not li{outline-color:rgba(255,255,255,.22)}
.fit.deck .fit-c{transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rot,0deg));box-shadow:0 16px 34px -16px rgba(0,0,0,.5);z-index:calc(20 - var(--d))}
.fit.deck .fit-meter{opacity:0}
.fit.dealing .fit-l li{transition:outline-color .5s var(--ease) calc(var(--d)*.12s + .35s)}
.fit.dealing .fit-c{z-index:calc(20 - var(--d));transition:transform .9s var(--ease) calc(var(--d)*.12s),box-shadow .9s var(--ease) calc(var(--d)*.12s)}
.fit.dealing .fit-meter{transition:opacity .5s var(--ease) .8s}
@media (min-width:900px){
  .fit{grid-template-columns:1fr 1fr}
  .fit-p{display:flex;padding:120px 0 116px}
  .fit-in{max-width:calc(var(--max)/2 + var(--g));margin:0}
  .fit-for .fit-in{margin-left:auto;padding:0 64px 0 var(--g)}
  .fit-not .fit-in{margin-right:auto;padding:0 var(--g) 0 64px}
  .fit h2{font-size:clamp(34px,4.1vw,56px);white-space:nowrap}
  .fit-c{min-height:78px;padding:23px 22px;font-size:20px}
  .fit-go{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.fit-m,.fit-m svg,.fm-segs i::after,button.fit-c{transition:none}.fm-buy .btn,.fit .fit-m{animation:none}}