/* Self-hosted variable fonts (latin subset). Replaces the render-blocking
   Google Fonts request: 2 fewer DNS lookups + TLS handshakes on mobile. */
@font-face{font-family:"DM Sans";src:url(/assets/fonts/dm-sans-latin.woff2) format("woff2");font-weight:100 1000;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";src:url(/assets/fonts/manrope-latin.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--ink:#17131f;--paper:#fffaf0;--white:#fff;--yellow:#ffc629;--yellow2:#ffe45d;--purple:#6c3bff;--purple2:#31156e;--pink:#ff6e9c;--lime:#cbf36b;--muted:#696273;--line:#ded6e6;--radius:24px;--shadow:0 22px 55px rgba(36,22,52,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",ui-sans-serif,sans-serif;font-size:16px;line-height:1.55;overflow-x:hidden}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit}h1,h2,h3{font-family:"Manrope","DM Sans",sans-serif;text-wrap:balance}p{text-wrap:pretty}.skip-link{position:fixed;left:1rem;top:-4rem;z-index:100;background:#fff;padding:.75rem 1rem;border-radius:10px}.skip-link:focus{top:1rem}
.top-ribbon{padding:.55rem 1rem;text-align:center;background:var(--purple);color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.04em}.top-ribbon span{color:var(--yellow);margin:0 .5rem}.site-header{min-height:76px;display:flex;align-items:center;gap:2rem;padding:.8rem clamp(1.25rem,4vw,4.5rem);background:var(--yellow);border-bottom:2px solid var(--ink);position:relative;z-index:10}.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:850;letter-spacing:-.03em;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--ink);border-radius:11px;background:var(--pink);font-size:.72rem;font-weight:900;transform:rotate(-5deg);box-shadow:3px 3px 0 var(--ink)}nav{display:flex;gap:1.5rem;margin-left:auto}nav a{text-decoration:none;font-size:.88rem;font-weight:700}
.button{display:inline-flex;min-height:52px;align-items:center;justify-content:center;gap:.6rem;border:2px solid var(--ink);border-radius:999px;padding:.85rem 1.35rem;font-weight:850;transition:transform .16s,box-shadow .16s,background .16s}.button:hover{transform:translateY(-2px);box-shadow:5px 6px 0 var(--ink)}.button:focus-visible,a:focus-visible,summary:focus-visible,.option:focus-visible{outline:4px solid var(--pink);outline-offset:3px}.button-primary{background:var(--yellow);color:var(--ink);box-shadow:4px 5px 0 var(--ink)}.button-yellow{background:var(--yellow2);color:var(--ink);box-shadow:4px 5px 0 rgba(0,0,0,.65)}.button-dark{background:var(--ink);color:#fff}.button-outline{background:#fff;color:var(--ink);width:100%}.button-ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}.button-large{min-height:61px;padding:1rem 1.65rem;font-size:1.02rem}.button-small{min-height:44px;padding:.65rem 1rem;font-size:.84rem}
.hero{min-height:760px;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(430px,.98fr);gap:clamp(2rem,5vw,6rem);align-items:center;padding:clamp(4rem,8vw,7.5rem) clamp(1.25rem,6vw,7.5rem);background:radial-gradient(circle at 83% 28%,rgba(255,255,255,.82) 0 12%,transparent 12.5%),linear-gradient(135deg,#ffe163,#ffc629 65%,#ffb816);border-bottom:2px solid var(--ink);position:relative;overflow:hidden}.hero:before,.hero:after{content:"";position:absolute;border:2px solid rgba(23,19,31,.22);border-radius:50%}.hero:before{width:580px;height:580px;right:-170px;top:-200px}.hero:after{width:360px;height:360px;left:-190px;bottom:-220px}.hero-copy{position:relative;z-index:2;max-width:760px}.live-pill{width:max-content;display:flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.7);border:1.5px solid var(--ink);border-radius:999px;padding:.48rem .8rem;text-transform:uppercase;font-size:.72rem;font-weight:850;letter-spacing:.08em}.live-pill span{width:9px;height:9px;background:var(--pink);border-radius:50%;box-shadow:0 0 0 5px rgba(255,110,156,.2)}h1{margin:1.4rem 0 0;font-size:clamp(3.3rem,6.2vw,6.8rem);line-height:.94;letter-spacing:-.07em;font-weight:850}h1 em{color:var(--purple);font-style:normal;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.08em}.hero-lede{max-width:660px;font-size:clamp(1.08rem,1.5vw,1.28rem);margin:1.5rem 0 1.8rem}.microproof{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1.4rem;font-size:.82rem;font-weight:700}
.hero-visual{height:590px;min-width:0;position:relative;z-index:2}.phone{position:absolute;width:250px;height:500px;background:#fff;border:3px solid var(--ink);border-radius:32px;box-shadow:10px 13px 0 var(--ink);overflow:hidden}.phone-profile{left:5%;top:20px;transform:rotate(-5deg)}.phone-chat{right:3%;bottom:14px;transform:rotate(5deg)}.phone-bar{height:28px;display:flex;justify-content:space-between;padding:.55rem .9rem;font-size:.58rem;font-weight:800}.app-title{text-align:center;padding:.55rem;font-size:.65rem;letter-spacing:.08em;font-weight:900}.hinge-tone{background:#eee9ff;color:var(--purple)}.bumble-tone{background:var(--yellow)}.photo-placeholder{height:260px;display:grid;place-content:center;text-align:center;background:linear-gradient(145deg,#f2d8ff,#ffdbe6 55%,#fff1b7);color:#5d3b68}.photo-placeholder strong{font-size:.78rem}.photo-placeholder small{margin-top:.25rem;opacity:.75}.photo-icon{font-size:3rem;line-height:1}.profile-copy{padding:1rem}.profile-copy strong{font-size:1.25rem}.profile-copy p{margin:.9rem 0 .15rem;font-size:.7rem;color:var(--muted);font-weight:800}.profile-copy span{font-size:.84rem;line-height:1.35;display:block}.chat-person{padding:1rem;text-align:center;font-weight:800;border-bottom:1px solid #eee}.bubble{display:block;width:max-content;max-width:84%;padding:.72rem .85rem;border-radius:16px;margin:.8rem;font-size:.78rem;line-height:1.35}.bubble.theirs{background:#f0edf4;border-bottom-left-radius:4px}.bubble.mine{margin-left:auto;background:var(--yellow);border-bottom-right-radius:4px}.chat-note{margin:3.5rem 1rem 0;padding-top:.8rem;border-top:1px dashed var(--line);text-align:center;color:var(--muted);font-size:.66rem}.score-card{position:absolute;z-index:4;left:36%;bottom:14px;width:185px;display:flex;align-items:center;gap:.7rem;padding:.8rem;background:var(--lime);border:2px solid var(--ink);border-radius:18px;box-shadow:5px 6px 0 var(--ink);transform:rotate(-2deg)}.score-card strong{font-size:2.2rem;letter-spacing:-.08em}.score-card span{font-size:.7rem;line-height:1.25;font-weight:800}.scribble{position:absolute;z-index:5;font-family:"Comic Sans MS",cursive;color:var(--purple);font-size:1rem;font-weight:800;transform:rotate(-7deg)}.scribble-one{left:0;top:0}.scribble-two{right:2%;bottom:0}
.phone-image{display:block;width:100%;height:100%;object-fit:cover}
.truth-strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink);color:#fff}.truth-strip span{text-align:center;padding:1.05rem;border-right:1px solid rgba(255,255,255,.17);font-size:.82rem;font-weight:750}.section{padding:clamp(5rem,9vw,8rem) clamp(1.25rem,6vw,7.5rem)}.eyebrow{margin:0 0 1rem;color:var(--purple);text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;font-weight:900}.eyebrow.light{color:var(--yellow)}h2{margin:0;font-size:clamp(2.5rem,4.9vw,5.3rem);line-height:.98;letter-spacing:-.06em}h3{margin:0;font-size:1.35rem;line-height:1.15;letter-spacing:-.03em}.center-heading{max-width:970px;text-align:center;margin:0 auto 3.5rem}.center-heading.narrow{max-width:800px}.center-heading>p:last-child{max-width:740px;margin:1.2rem auto 0;color:var(--muted);font-size:1.08rem}
.pain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.pain-grid article{min-height:285px;padding:1.7rem;background:#fff;border:2px solid var(--ink);border-radius:var(--radius);box-shadow:5px 6px 0 var(--ink)}.pain-grid article:nth-child(2){transform:translateY(18px)}.pain-grid article:nth-child(3){transform:translateY(-10px)}.pain-grid p{color:var(--muted);margin:.8rem 0 0}.emoji{display:block;font-size:2rem;margin-bottom:3.2rem}
.transformation{padding:clamp(5rem,9vw,8rem) 1.25rem;background:var(--purple2);color:#fff}.transformation-inner{max-width:1120px;margin:auto;text-align:center}.transformation h2 span{color:var(--yellow)}.before-after{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;margin:3rem 0 2.4rem}.before-after article{min-height:250px;padding:2rem;text-align:left;border-radius:var(--radius);display:flex;flex-direction:column}.before{background:#2b213b;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.25)}.after{background:var(--yellow);color:var(--ink);transform:rotate(1.5deg);box-shadow:7px 8px 0 rgba(0,0,0,.5)}.before-after small{font-weight:900;letter-spacing:.12em}.before-after p{font-size:clamp(1.25rem,2.1vw,1.9rem);font-weight:800;line-height:1.2}.verdict{margin-top:auto;padding-top:1rem;border-top:1px solid currentColor;font-size:.8rem;font-weight:800}.arrow-badge{width:55px;height:55px;display:grid;place-items:center;background:var(--pink);color:var(--ink);border:2px solid var(--ink);border-radius:50%;font-size:1.5rem;font-weight:900}
.inside{background:#fffdf8}.module-list{max-width:1120px;margin:auto;display:grid;gap:1.2rem}.module-card{min-height:330px;display:grid;grid-template-columns:90px minmax(0,1.25fr) minmax(260px,.75fr);align-items:center;gap:2rem;padding:clamp(1.5rem,4vw,3.2rem);border:2px solid var(--ink);border-radius:30px;box-shadow:7px 8px 0 var(--ink);overflow:hidden;position:relative}.yellow-card{background:#ffe36d}.purple-card{background:#cab8ff}.pink-card{background:#ffb6cb}.lime-card{background:var(--lime)}.dark-card{background:var(--ink);color:#fff}.module-number{align-self:start;font-size:2rem;font-weight:900;opacity:.62}.module-kicker{margin:0 0 .7rem;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:900}.module-copy h3{font-size:clamp(1.8rem,3vw,3.1rem)}.module-copy ul{list-style:none;padding:0;margin:1.2rem 0 0}.module-copy li{padding:.35rem 0 .35rem 1.5rem;position:relative}.module-copy li:before{content:"✓";position:absolute;left:0;font-weight:900}.mini-phone,.prompt-stack,.chat-stack,.date-card,.checklist{background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:24px;box-shadow:5px 6px 0 var(--ink);padding:1.4rem;transform:rotate(3deg)}.mini-phone{min-height:230px;display:grid;place-content:center;text-align:center;background:linear-gradient(#fff,#f1deff)}.mini-phone span,.date-card small{font-size:.65rem;font-weight:900;letter-spacing:.1em}.mini-phone div{margin:1rem 0;font-size:1.4rem;font-weight:900}.mini-phone b{color:var(--purple);font-size:2rem}.prompt-stack span{color:var(--muted);font-size:.75rem;font-weight:800}.prompt-stack p{font-size:1.15rem;font-weight:800;line-height:1.3}.chat-stack{display:flex;flex-direction:column;padding:.7rem}.date-card{display:flex;flex-direction:column;gap:1rem}.date-card strong{font-size:1.5rem}.date-card span{color:var(--muted);font-size:.75rem}.checklist p{margin:.5rem 0;padding:.7rem;background:#f4f1f6;border-radius:10px;font-weight:750}.checklist b{color:var(--purple);margin-right:.5rem}
.examples{background:#f4edff}.split-heading{display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:end;margin-bottom:3.5rem}.split-heading>p{color:var(--muted)}.screenshot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.screenshot-grid article{background:#fff;border:2px solid var(--ink);border-radius:var(--radius);padding:1rem;box-shadow:5px 6px 0 var(--ink)}.screenshot-grid h3{margin:1.2rem .5rem 0}.screenshot-grid article>p{margin:.55rem .5rem .6rem;color:var(--muted)}.screenshot-frame{height:430px;margin:0;border-radius:17px;display:grid;place-items:center;overflow:hidden;border:1.5px solid var(--ink)}.screenshot-frame img{display:block;width:100%;height:100%;object-fit:cover}.screenshot-frame.wide-screen{background:#f8f7f3}.screenshot-frame.wide-screen img{object-fit:contain}.hinge-screen{background:#efeaff}.bumble-screen{background:#ffe15d}.source-link{display:inline-block;margin:.35rem .5rem .5rem;color:var(--purple);font-size:.72rem;font-weight:800;text-decoration:none}.source-link:hover{text-decoration:underline}
.how{background:var(--ink);color:#fff;text-align:center}.steps{list-style:none;max-width:1050px;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:0;margin:3rem auto;text-align:left}.steps li{min-height:260px;padding:1.7rem;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius)}.steps>li>span{width:48px;height:48px;display:grid;place-items:center;background:var(--yellow);color:var(--ink);border-radius:50%;font-weight:900}.steps h3{margin-top:2.8rem}.steps p{color:rgba(255,255,255,.65)}
.founder{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);gap:clamp(3rem,8vw,8rem);align-items:center;background:var(--yellow)}.founder-stamp{justify-self:center;width:280px;height:280px;display:grid;place-content:center;text-align:center;border:3px solid var(--ink);border-radius:50%;background:var(--pink);box-shadow:9px 10px 0 var(--ink);transform:rotate(-6deg)}.founder-stamp strong{font-size:4.5rem;line-height:1;letter-spacing:-.08em}.founder-stamp span{text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:900}.founder-copy{max-width:780px}.founder-copy>p:not(.eyebrow){font-size:1.08rem}.founder-signoff{display:inline-block;margin-top:1rem;padding:.8rem 1rem;background:#fff;border:2px solid var(--ink);border-radius:12px;font-weight:850;transform:rotate(-1deg)}
.offer-section{background:var(--purple2);color:#fff}.offer-shell{max-width:1180px;margin:auto}.offer-intro{text-align:center;max-width:900px;margin:0 auto 3.5rem}.offer-intro>p:last-child{color:rgba(255,255,255,.7);max-width:680px;margin:1.2rem auto 0}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:stretch}.price-card{position:relative;display:flex;flex-direction:column;padding:1.8rem;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius)}.price-card.featured{background:var(--yellow);transform:translateY(-12px);box-shadow:8px 9px 0 var(--pink)}.popular{position:absolute;right:1rem;top:1rem;background:var(--pink);border:1.5px solid var(--ink);border-radius:999px;padding:.3rem .55rem;font-size:.62rem;font-weight:900;letter-spacing:.08em}.price-card>p{margin:0 0 1.5rem;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;font-size:.68rem;font-weight:900}.price{margin:1rem 0;font-size:2.8rem;font-weight:900;letter-spacing:-.06em}.price sup{font-size:1.2rem}.price small{font-size:.72rem;color:var(--muted);letter-spacing:0}.price-card ul{flex-grow:1;list-style:none;padding:0;margin:0 0 1.5rem}.price-card li{position:relative;padding:.5rem 0 .5rem 1.5rem;border-bottom:1px solid #eee8f0;color:var(--muted)}.price-card li:before{content:"✓";position:absolute;left:0;color:var(--purple);font-weight:900}.offer-note{max-width:780px;margin:2rem auto 0;text-align:center;color:rgba(255,255,255,.7);font-size:.85rem}
.faq-list{max-width:900px;margin:auto}details{border-top:1.5px solid var(--ink)}details:last-child{border-bottom:1.5px solid var(--ink)}summary{list-style:none;padding:1.35rem .2rem;font-weight:850;cursor:pointer;display:flex;justify-content:space-between;gap:2rem}summary::-webkit-details-marker{display:none}summary:after{content:"+";color:var(--purple);font-size:1.4rem}details[open] summary:after{content:"−"}details p{max-width:760px;margin:0 0 1.4rem;color:var(--muted)}
.final-cta{position:relative;overflow:hidden;text-align:center;padding:clamp(5.5rem,10vw,9rem) 1.25rem;background:var(--pink);border-top:2px solid var(--ink)}.final-cta:before{content:"";position:absolute;width:520px;height:520px;border:2px solid rgba(23,19,31,.2);border-radius:50%;left:-260px;top:-230px}.final-cta h2{position:relative;z-index:1}.final-cta>p:not(.eyebrow){font-size:1.1rem}.spark{font-size:3rem;color:var(--yellow);text-shadow:2px 2px 0 var(--ink)}.dark-proof{justify-content:center}footer{display:flex;align-items:center;gap:2rem;padding:2rem clamp(1.25rem,5vw,6rem);background:var(--ink);color:#fff}footer .brand-mark{border-color:#fff;box-shadow:3px 3px 0 #fff}footer p{margin:0 0 0 auto;color:rgba(255,255,255,.56);font-size:.75rem}footer p+p{margin-left:0}.mobile-sticky{display:none}
.quiz-dialog{width:min(720px,calc(100% - 2rem));border:2px solid var(--ink);padding:0;border-radius:24px;box-shadow:10px 12px 0 var(--ink);background:#fff;color:var(--ink)}.quiz-dialog::backdrop{background:rgba(22,13,36,.82);backdrop-filter:blur(7px)}.quiz-shell{min-height:590px;padding:1.5rem;display:flex;flex-direction:column}.quiz-header{display:flex;align-items:center;justify-content:space-between}.quiz-quit{border:0;background:transparent;color:var(--muted);font-size:.8rem;font-weight:800;text-decoration:underline}.quiz-progress{height:7px;background:#eee9f1;margin:1.2rem -1.5rem 0}.quiz-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--purple),var(--pink));transition:width .25s}.quiz-meta{color:var(--purple);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;font-weight:900;margin:1.6rem 0 .5rem}#quizStage h2{font-size:clamp(1.9rem,4vw,3rem);line-height:1.03;max-width:620px}.question-help{margin:.65rem 0 1.4rem;color:var(--muted)}.options{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.3rem}.option{text-align:left;min-height:62px;border:1.5px solid var(--line);border-radius:13px;background:#fff;padding:.9rem 1rem;color:var(--ink);font-weight:700}.option:hover{border-color:var(--purple);background:#f8f4ff}.option.selected{border:2px solid var(--purple);background:#eee8ff;box-shadow:inset 5px 0 0 var(--purple)}.quiz-controls{margin-top:auto;padding-top:1.5rem;display:flex;justify-content:space-between;gap:1rem}.result-box{margin-top:1.4rem;padding:1.3rem;border:1.5px solid var(--line);border-radius:16px;background:#f8f4ff}.result-label{display:inline-block;margin-bottom:.7rem;color:var(--purple);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:900}.result-box h3{font-size:1.45rem}.result-box p{color:var(--muted);margin-bottom:0}.result-fixes{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1rem}.result-fixes div{padding:.9rem;border-radius:11px;background:#fff;border:1px solid var(--line);font-size:.9rem}.checkout-tease{margin-top:1rem;padding:1rem;background:var(--yellow);border:1.5px solid var(--ink);border-radius:13px;font-size:.85rem}
.checkout-page{min-height:100dvh;background:linear-gradient(135deg,#fff7db,#f2eaff)}.checkout-header{min-height:78px;display:flex;align-items:center;justify-content:space-between;padding:1rem clamp(1.25rem,5vw,5rem);background:var(--yellow);border-bottom:2px solid var(--ink)}.checkout-header>span{font-size:.8rem;font-weight:800}.checkout-main{max-width:1180px;margin:auto;display:grid;grid-template-columns:1fr minmax(420px,.85fr);gap:clamp(2rem,7vw,7rem);align-items:start;padding:clamp(3rem,8vw,7rem) 1.25rem}.checkout-copy h1{font-size:clamp(3.2rem,6vw,6rem)}.checkout-copy>p:not(.eyebrow){max-width:600px;font-size:1.08rem;color:var(--muted)}.saved-diagnosis{display:flex;flex-direction:column;gap:.45rem;max-width:620px;margin-top:2rem;padding:1.2rem;background:#fff;border:2px solid var(--ink);border-radius:18px;box-shadow:5px 6px 0 var(--ink)}.saved-diagnosis small{color:var(--purple);font-size:.67rem;font-weight:900;letter-spacing:.1em}.saved-diagnosis span{color:var(--muted)}.edit-answers{margin-top:1.3rem;border:0;background:transparent;padding:0;color:var(--purple);font-weight:800;text-decoration:underline}.checkout-card{padding:1.6rem;background:#fff;border:2px solid var(--ink);border-radius:26px;box-shadow:9px 10px 0 var(--ink)}.secure-pill{display:inline-block;padding:.38rem .65rem;background:#e9ffd0;border-radius:999px;font-size:.7rem;font-weight:900}.checkout-card h2{margin:1.2rem 0;font-size:2.2rem}.checkout-plans{display:grid;gap:.65rem}.checkout-plan{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;padding:.9rem;border:1.5px solid var(--line);border-radius:14px;background:#fff}.checkout-plan span{display:flex;flex-direction:column}.checkout-plan small{color:var(--muted)}.checkout-plan b{white-space:nowrap}.checkout-plan.selected{border:2px solid var(--purple);background:#f4efff;box-shadow:inset 5px 0 0 var(--purple)}.order-line{display:flex;justify-content:space-between;gap:1rem;margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line);color:var(--muted)}.order-line.total{margin-top:.5rem;padding-top:.5rem;border:0;color:var(--ink);font-size:1.15rem}.checkout-card form{margin-top:1.3rem}.checkout-card label{display:block;margin-bottom:.45rem;font-size:.82rem;font-weight:800}.checkout-card input{width:100%;min-height:56px;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:12px}.checkout-card input:focus{outline:3px solid #d9cfff;border-color:var(--purple)}.purchase-button{width:100%;margin-top:.8rem}.checkout-small{text-align:center;color:var(--muted);font-size:.7rem}.payment-notice{margin-top:1rem;padding:1rem;background:var(--yellow);border:1.5px solid var(--ink);border-radius:13px;font-size:.82rem}
@media(max-width:1060px){nav{display:none}.hero{grid-template-columns:1fr}.hero-copy{max-width:850px}.hero-visual{width:min(100%,650px);margin:auto}.pain-grid{grid-template-columns:1fr 1fr}.pricing-grid{grid-template-columns:1fr}.price-card.featured{transform:none}}
@media(max-width:900px){.checkout-main{grid-template-columns:1fr}.checkout-card{max-width:650px;width:100%}}
@media(max-width:760px){body{padding-bottom:68px}.site-header{min-height:68px;padding:.65rem 1rem}.site-header .button{display:none}.hero{min-height:auto;padding-top:3.7rem}h1{font-size:clamp(3rem,14vw,4.7rem)}.hero-visual{height:520px;transform:scale(.92);transform-origin:top center;margin-bottom:-45px}.phone{width:220px;height:455px}.phone-profile{left:0}.phone-chat{right:0}.score-card{left:29%}.truth-strip{grid-template-columns:1fr 1fr}.pain-grid,.screenshot-grid{grid-template-columns:1fr}.pain-grid article:nth-child(n){transform:none;min-height:auto}.emoji{margin-bottom:1.8rem}.before-after{grid-template-columns:1fr}.arrow-badge{margin:auto;transform:rotate(90deg)}.module-card{grid-template-columns:1fr;gap:1.2rem}.module-number{position:absolute;opacity:.25}.module-card>:last-child{transform:none}.split-heading{grid-template-columns:1fr;gap:1rem}.steps{grid-template-columns:1fr}.steps li{min-height:auto}.steps h3{margin-top:1.5rem}.founder{grid-template-columns:1fr}.founder-stamp{justify-self:start;width:220px;height:220px}footer{flex-direction:column;align-items:flex-start;gap:.8rem;padding-bottom:2.5rem}footer p{margin:0}.mobile-sticky{display:block;position:fixed;z-index:50;left:.7rem;right:.7rem;bottom:.6rem;width:calc(100% - 1.4rem);min-height:52px;border:2px solid var(--ink);border-radius:999px;background:var(--yellow);color:var(--ink);font-weight:900;box-shadow:4px 5px 0 var(--ink)}.options,.result-fixes{grid-template-columns:1fr}.quiz-shell{min-height:calc(100vh - 2rem)}.quiz-dialog{max-height:calc(100vh - 1rem)}}
@media(max-width:520px){.hero-visual{height:450px;transform:scale(.78);width:124%;margin-left:-12%;margin-bottom:-100px}.hero .button-large{width:100%}.microproof{gap:.55rem 1rem}.truth-strip{grid-template-columns:1fr}.section{padding-left:1rem;padding-right:1rem}.module-card{padding:1.4rem}}
@media(max-width:520px){.checkout-header>span{display:none}.checkout-main{padding-top:2.5rem}.checkout-copy h1{font-size:3rem}.checkout-card{padding:1.1rem}.checkout-plan{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

[hidden]{display:none!important}.phone-image{object-fit:contain;background:#fff}.screenshot-frame{height:auto;min-height:260px}.screenshot-frame img{height:auto;max-height:540px;object-fit:contain}.hero-visual .phone-chat{width:330px;height:280px;bottom:70px}.agitation{background:#ffe8e8}.solution{background:#e9f4cf}.solution .button{margin-top:25px}.evidence-grid{display:grid;gap:28px;max-width:1100px;margin:auto}.evidence-grid figure{margin:0;background:white;border:2px solid #17131f;border-radius:20px;overflow:hidden}.evidence-grid img{display:block;width:100%;height:auto}.evidence-grid figcaption{padding:24px}.evidence-grid a{color:#6c3bff}.checkout-main{min-height:75vh}@media(max-width:520px){.hero-visual .phone-chat{width:260px;height:220px}}

.people-hero{position:relative;min-height:590px;height:590px;transform:none!important;width:100%!important;margin:0!important}.people-hero figure{position:absolute;margin:0;overflow:hidden;border:3px solid var(--ink);border-radius:24px;background:#fff;box-shadow:8px 8px 0 var(--ink)}.people-main{width:70%;height:490px;left:0;top:10px;transform:rotate(-4deg)}.people-secondary{width:62%;height:310px;right:0;bottom:10px;transform:rotate(5deg)}.people-hero img{width:100%;height:100%;object-fit:cover;display:block}.people-hero figcaption{position:absolute;bottom:0;left:0;right:0;padding:40px 18px 18px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:white;font-size:16px;font-weight:800}.people-note{position:absolute;right:0;top:22px;max-width:180px;background:var(--yellow);border:2px solid var(--ink);padding:16px;transform:rotate(6deg);font-weight:800;border-radius:10px}@media(max-width:760px){.people-hero{height:520px;min-height:520px;max-width:570px}.people-main{height:420px}.people-secondary{height:260px}.people-note{font-size:14px;max-width:150px;padding:12px}}@media(max-width:400px){.people-hero{height:450px;min-height:450px}.people-main{height:370px}.people-secondary{height:230px}}

.people-secondary img{object-position:35% 70%}.photo-credit{font-size:14px;max-width:340px}.photo-credit a{text-decoration:underline}

.candid-hero{height:auto!important;min-height:0!important;transform:none!important;width:100%!important;margin:0!important;padding:0!important;background:none!important}.candid-hero:before,.candid-hero:after{display:none!important}.candid-photo{margin:0;border:2px solid var(--ink);border-radius:24px;overflow:hidden;background:var(--ink);box-shadow:8px 8px 0 rgba(23,19,31,.18)}.candid-photo img{display:block;width:100%;height:440px;object-fit:cover;object-position:center}.candid-photo figcaption{padding:24px;color:white;position:static}.candid-photo figcaption span{display:block;color:var(--yellow);font-size:13px;font-weight:800;letter-spacing:.08em;margin-bottom:10px}.candid-photo figcaption strong{font-size:22px;line-height:1.4;display:block}@media(max-width:760px){.candid-photo img{height:340px}.candid-photo figcaption{padding:20px}.candid-photo figcaption strong{font-size:20px}}

.candid-photo img{object-position:center 38%}
.reviews{background:#eee7ff;overflow:hidden}.reviews-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:30px}.reviews-heading h2{max-width:760px}.reviews-heading p:last-child{color:var(--muted)}.review-controls{display:flex;align-items:center;gap:15px;flex-shrink:0}.review-controls button{width:48px;height:48px;border:2px solid var(--ink);border-radius:50%;background:white;font-size:24px;cursor:pointer}.review-controls button:disabled{opacity:.35;cursor:default}.review-controls span{min-width:80px;text-align:center;font-size:14px;font-weight:700}.review-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 22px;scrollbar-width:thin;scrollbar-color:var(--purple) transparent;overscroll-behavior-x:contain}.review-card{flex:0 0 calc((100% - 44px)/3);scroll-snap-align:start;background:white;border:2px solid var(--ink);border-radius:20px;padding:28px;display:flex;flex-direction:column;min-width:0}.review-card:nth-child(3n+2){background:#fff9dd}.review-card:nth-child(3n){background:#f1ffdc}.review-result{align-self:flex-start;background:var(--ink);color:white;border-radius:999px;padding:8px 13px;font-size:14px;font-weight:800}.review-card blockquote{font-size:18px;line-height:1.65;margin:24px 0 28px}.review-person{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:5px;font-size:14px}.review-person span{color:var(--muted)}.review-controls button:focus-visible,.review-track:focus-visible{outline:3px solid var(--purple);outline-offset:4px}@media(max-width:1060px){.review-card{flex-basis:calc((100% - 22px)/2)}}@media(max-width:700px){.reviews-heading{display:block}.review-controls{margin-top:20px;justify-content:flex-end}.review-card{flex-basis:90%;padding:24px}.review-track{gap:16px}.review-card blockquote{font-size:17px}}
.chat-examples{background:#fff6cb}.chat-example-list{display:grid;gap:28px}.chat-example{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);border:2px solid var(--ink);border-radius:22px;background:#fff;overflow:hidden}.chat-example>a{display:flex;align-items:center;justify-content:center;background:#f6f6f4;min-width:0;padding:18px}.chat-example img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain}.chat-example-copy{padding:32px;align-self:center}.chat-example-copy h3{font-size:28px;line-height:1.2}.chat-example-copy p{font-size:16px;line-height:1.6}.chat-source{font-size:14px;text-decoration:underline}.chat-example-copy .eyebrow{font-size:14px}@media(max-width:760px){.chat-example{grid-template-columns:1fr}.chat-example-copy{padding:24px}.chat-example>a{padding:8px}}

/* Readable screenshot panels without forced equal-height cards. */
.chat-example{grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);align-items:center}.chat-example>a{padding:24px;align-self:stretch}.chat-example img{max-height:680px}.chat-example-copy{padding:36px}.reviews{padding-top:60px;padding-bottom:60px}.reviews-heading h2{font-size:clamp(2rem,4vw,3.4rem);max-width:820px}.review-card blockquote{font-size:17px}@media(max-width:760px){.chat-example{grid-template-columns:1fr}.chat-example>a{padding:12px}.chat-example-copy{padding:24px}.reviews{padding-top:40px;padding-bottom:40px}}

.chat-example-wide{grid-template-columns:1fr}.chat-example-wide img{max-height:none}.chat-example-wide .chat-example-copy{max-width:850px}.chat-example-wide>a{padding:12px}

.chat-example .chat-source{display:inline-block;line-height:1.5}.chat-example a:focus-visible{outline:3px solid var(--purple);outline-offset:-4px}

.mobile-checkout{display:none}.live-pill{max-width:100%;width:fit-content}.live-pill span{flex-shrink:0}.checkout-plan span{min-width:0}.checkout-plan strong,.order-line strong{overflow-wrap:anywhere}.quiz-quit{min-height:44px;padding:8px}.quiz-header{gap:12px}.quiz-controls{flex-wrap:wrap}.quiz-controls .button{flex:1;min-width:0}.quiz-dialog{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}.quiz-shell{min-height:min(590px,calc(100dvh - 28px))}.quiz-controls{position:sticky;bottom:0;background:white;padding-bottom:12px}.checkout-small{font-size:14px}.edit-answers{min-height:44px}@media(max-width:1060px){.mobile-checkout{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;min-height:44px;padding:8px 12px;font-size:14px;font-weight:800;border:2px solid var(--ink);border-radius:999px;text-decoration:none}}@media(max-width:760px){body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}.mobile-sticky{bottom:calc(.6rem + env(safe-area-inset-bottom))}.live-pill{font-size:12px;letter-spacing:.04em}.quiz-shell{padding:16px;min-height:calc(100dvh - 28px)}.quiz-progress{margin-left:-16px;margin-right:-16px}.quiz-header .brand{white-space:normal;font-size:14px;gap:8px}.quiz-header .brand-mark{flex-shrink:0}.quiz-quit{flex-shrink:0}.quiz-controls{gap:8px}.quiz-controls .button{font-size:14px;padding:12px 10px}.quiz-dialog{width:calc(100% - 16px);border-radius:18px}.checkout-main{min-width:0}.order-line{flex-wrap:wrap}.site-header{gap:12px}.checkout-card input{font-size:16px}.module-number{position:static;font-size:20px;opacity:.65}}
@media(max-width:760px){.hero{padding-top:32px;padding-bottom:40px}.hero h1{font-size:clamp(2.6rem,11vw,3.4rem);line-height:1.04;letter-spacing:-.055em}.module-card{grid-template-columns:minmax(0,1fr)}.module-card>*{min-width:0;max-width:100%}.chat-stack .bubble{overflow-wrap:anywhere}.hero-lede{font-size:16px}}

/* Reference-based wordmark and compact upward-arrow icon. */
.brand-wordmark{gap:.16em;font-family:"Manrope","DM Sans",sans-serif;font-size:32px;font-weight:800;letter-spacing:-.075em;line-height:1.1;padding:5px 0 11px;isolation:isolate}.wordmark-better{color:#5a3bff;position:relative;display:inline-block}.wordmark-arrow{position:absolute;left:3%;bottom:-.25em;width:105%;height:.4em;overflow:visible}.brand-icon{display:block;width:40px;height:40px;flex-shrink:0;border-radius:10px}.quiz-brand{letter-spacing:-.025em}.site-header .brand-wordmark{flex-shrink:0}footer .brand-wordmark{color:#fff}footer .wordmark-better{color:#a18cff}@media(max-width:760px){.site-header .brand-wordmark{font-size:27px}.site-header{gap:10px}.quiz-brand .brand-icon{width:36px;height:36px}footer .brand-wordmark{font-size:30px}}@media(max-width:360px){.site-header .brand-wordmark{font-size:25px}.mobile-checkout{padding:8px 10px}}


/* ── Web Interface Guidelines pass ─────────────────────────────────────────
   Fixes from the accessibility/UX audit. Appended last so they win. */
:root{color-scheme:light}
/* Kill the 300ms double-tap delay and give taps an intentional highlight. */
a,button,summary,label,.option,[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:rgba(108,59,255,.18)}
/* Anchor targets must not land flush against the viewport edge. */
#top,#reviews,#inside,#examples,#how,#story,#offer,#faq,#checkout{scroll-margin-top:24px}
/* The review counter changes width as it counts; lock the digits. */
#reviewCount{font-variant-numeric:tabular-nums}
/* The sticky quiz footer must never sit on top of the option the user just
   focused with the keyboard. */
#quizStage{scroll-margin-bottom:96px}
#quizStage .option{scroll-margin-bottom:96px}

/* ── Product handoff ───────────────────────────────────────────────────────
   Links from the marketing site into the live account/coach app. */
.nav-signin{padding:.3rem .8rem;border:2px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--yellow)}
.nav-signin:hover{background:var(--purple);color:#fff}
.handoff-note{margin-top:1rem;padding:.95rem 1rem;background:var(--yellow);border:1.5px solid var(--ink);border-radius:13px;font-size:.82rem;line-height:1.5}
.checkout-small.already-member{margin-top:1rem;font-size:.78rem}
.checkout-small.already-member a{color:var(--purple);font-weight:800}
.footer-links a{color:inherit;font-weight:800}
a.purchase-button{text-decoration:none}
@media(max-width:900px){.nav-signin{display:none}}

/* ── Design polish pass ────────────────────────────────────────────────────
   Refinements only. The yellow/violet identity, the neo-brutalist hard
   shadows, the review carousel, the FAQ accordion and every line of copy are
   deliberate owner decisions and are left exactly as they were. */

/* 1. Pressed feedback. Everything had a hover state and nothing had an active
      one, so clicks felt dead on touch devices. */
.button:active{transform:translateY(1px) scale(.985);box-shadow:2px 2px 0 var(--ink)}
.option:active,.checkout-plan:active{transform:scale(.99)}
.review-controls button:active{transform:scale(.92)}
.mobile-sticky:active{transform:translateY(2px);box-shadow:2px 2px 0 var(--ink)}
.edit-answers:active,.nav-signin:active{transform:translateY(1px)}
.button,.option,.checkout-plan,.mobile-sticky,.review-controls button{
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease}

/* 2. Tell people where they are. There was no current-section indicator. */
nav a{position:relative;padding-bottom:2px}
nav a:not(.nav-signin):after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;
  background:var(--purple);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease}
nav a:not(.nav-signin):hover:after,nav a[aria-current="true"]:not(.nav-signin):after{transform:scaleX(1)}
nav a[aria-current="true"]{font-weight:800}

/* 3. Prices are compared down a column, so lock the digit widths. */
.price,.checkout-plan b,.order-line strong,.review-result{font-variant-numeric:tabular-nums}

/* 4. Scroll-driven reveal, pure CSS. Content is visible by default; the
      entrance only exists inside @supports, so a browser without scroll-driven
      animations simply shows everything. Elements already on screen at load
      are past their entry range and therefore render fully visible. No
      observer, no timer, no way to strand content invisible. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .center-heading,.pain-grid article,.module-card,.chat-example,
    .price-card,.founder-stamp,.founder-copy{
      animation:mb-rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 35%;
    }
    #checkoutView .center-heading{animation:none}
  }
}
@keyframes mb-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* 5. Softer inner radius than the container, so nesting reads correctly. */
.price-card li:first-child{padding-top:0}
.handoff-note,.payment-notice,.checkout-tease{border-radius:calc(var(--radius) / 2)}

/* ── Motion + depth system ─────────────────────────────────────────────────
   Technique borrowed from the premium-design pass, aesthetic deliberately NOT:
   the thick ink borders and hard offset shadows are Match Better's identity,
   so they stay. What changes is the quality of the motion and the precision of
   the details. */

:root{
  /* Real easing instead of the browser default. Expo-out for entrances,
     a mild overshoot for anything that should feel physical. */
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-quick:cubic-bezier(.32,.72,0,1);

  /* Systemic layers, so nothing is a magic number again. */
  --z-base:1;
  --z-raised:5;
  --z-header:10;
  --z-sticky:50;
  --z-overlay:100;
}

.button,.option,.checkout-plan,.mobile-sticky,.review-controls button,.price-card,.chat-example{
  transition:transform .38s var(--ease-out-expo),
             box-shadow .38s var(--ease-out-expo),
             background-color .24s var(--ease-quick),
             color .24s var(--ease-quick),
             border-color .24s var(--ease-quick)}
.button:active,.mobile-sticky:active{transition-duration:.09s}
nav a:not(.nav-signin):after{transition:transform .42s var(--ease-out-expo)}

/* Systemic z-index. Same stacking order as before, now named. */
.site-header{z-index:var(--z-header)}
.mobile-sticky{z-index:var(--z-sticky)}
.skip-link{z-index:var(--z-overlay)}
.hero-visual{z-index:var(--z-base)}

/* Nested trailing icon. The arrow no longer floats naked beside the label; it
   sits in its own bordered disc and carries kinetic tension on hover. */
.button > span[aria-hidden="true"]{
  display:inline-grid;place-items:center;
  width:1.75em;height:1.75em;margin-right:-.35em;
  border:2px solid currentColor;border-radius:50%;
  font-size:.72em;line-height:1;
  transition:transform .42s var(--ease-spring)}
.button:hover > span[aria-hidden="true"]{transform:translateX(3px) rotate(-8deg)}
.button:active > span[aria-hidden="true"]{transform:translateX(1px)}
.button-large > span[aria-hidden="true"]{width:1.65em;height:1.65em}

/* Cards gain a touch more travel so the hard shadow reads as real depth. */
.price-card:hover{transform:translateY(-4px)}
.price-card.featured:hover{transform:translateY(-16px)}
.chat-example:hover{transform:translateY(-3px)}

/* Entrance easing matched to the rest of the system. */
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference){
    .center-heading,.pain-grid article,.module-card,.chat-example,
    .price-card,.founder-stamp,.founder-copy{animation-timing-function:var(--ease-out-expo)}
  }
}

/* A little more air at the widest sizes; the layout can carry it. */
@media(min-width:1400px){
  .section{padding-top:clamp(6rem,9vw,9.5rem);padding-bottom:clamp(6rem,9vw,9.5rem)}
}

/* ══ VISUAL DESIGN PASS ════════════════════════════════════════════════════
   Brand, copy, claims and funnel unchanged. What changes is the visual
   execution: texture, typographic drama, and breaking the centred symmetry
   that made every section read the same. */

/* 1. FILM GRAIN ───────────────────────────────────────────────────────────
   Flat vector colour is the fastest way for a page to look synthetic. A fixed
   noise layer gives the whole site a printed, tactile quality. Fixed and
   pointer-events:none so it never repaints on scroll. */
body::after{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;
  opacity:.05;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='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px}
@media(prefers-reduced-motion:reduce){body::after{opacity:.03}}

/* 2. EDITORIAL HEADINGS ───────────────────────────────────────────────────
   Seven identically centred heading blocks made every section read the same.
   Alternating sections now run left as editorial columns with a heavy brand
   rule above them. The rhythm comes from the contrast, so the remaining
   centred sections are deliberately left alone. */
.agitation .center-heading,
.inside .center-heading,
.chat-examples .center-heading,
.offer-section .offer-intro{
  text-align:left;margin-left:0;margin-right:auto}
.agitation .center-heading>p:last-child,
.inside .center-heading>p:last-child,
.chat-examples .center-heading>p:last-child,
.offer-section .offer-intro>p:last-child{margin-left:0;margin-right:0}
.agitation .center-heading,
.inside .center-heading,
.chat-examples .center-heading{position:relative;padding-top:2.2rem}
.agitation .center-heading::before,
.inside .center-heading::before,
.chat-examples .center-heading::before{
  content:"";position:absolute;top:0;left:0;width:88px;height:7px;
  border-radius:99px;background:var(--purple)}
.offer-section .offer-intro{position:relative;padding-top:2.2rem;max-width:900px}
.offer-section .offer-intro::before{
  content:"";position:absolute;top:0;left:0;width:88px;height:7px;
  border-radius:99px;background:var(--yellow)}
/* Headings can run wider now they are not centred. */
.agitation .center-heading h2,
.inside .center-heading h2,
.chat-examples .center-heading h2{max-width:16ch;letter-spacing:-.045em}

/* 3. DISPLAY NUMERALS ─────────────────────────────────────────────────────
   The chapter numbers were 2rem at 62% opacity - decorative noise. Outlined
   at display size they become the structural anchor of each card. */
@media(min-width:961px){
  .inside .module-card{grid-template-columns:118px minmax(0,1.25fr) minmax(260px,.75fr)}
  .inside .module-number{
    font-size:5.2rem;line-height:.82;opacity:1;
    color:transparent;-webkit-text-stroke:2px var(--ink);
    letter-spacing:-.06em;font-weight:900}
}

/* 4. NESTED CARD ARCHITECTURE ─────────────────────────────────────────────
   A hairline inner frame inside the heavy outer border, so the cards read as
   machined objects rather than flat rectangles. */
.price-card{box-shadow:5px 6px 0 var(--ink),inset 0 0 0 1px rgba(23,19,31,.13)}
.price-card.featured{box-shadow:8px 9px 0 var(--pink),inset 0 0 0 1px rgba(23,19,31,.16)}
.module-card{box-shadow:7px 8px 0 var(--ink),inset 0 0 0 1px rgba(23,19,31,.10)}
.pain-grid article{box-shadow:5px 6px 0 var(--ink),inset 0 0 0 1px rgba(23,19,31,.10)}

/* 5. RADIUS SCALE ─────────────────────────────────────────────────────────
   One radius on everything is a flatness tell. Outer containers go softer,
   inner elements stay tighter, so nesting reads correctly. */
.price-card{border-radius:30px}
.chat-example{border-radius:28px}
.pain-grid article{border-radius:26px}

/* 6. ASYMMETRIC PAIN GRID ─────────────────────────────────────────────────
   Four identical columns is the most generic layout there is. The row now
   breathes unevenly while keeping all four cards on one line. */
@media(min-width:1100px){
  .pain-grid{grid-template-columns:1.25fr 1fr 1fr 1.15fr}
  .pain-grid article:nth-child(1){transform:translateY(-6px)}
  .pain-grid article:nth-child(4){transform:translateY(12px)}
}

/* Billing period must always be legible next to a recurring price. */
.checkout-plan b em{font-style:normal;font-weight:700;font-size:.72em;color:var(--muted)}
.price small{white-space:nowrap}

/* ══ STRUCTURAL PASS ═══════════════════════════════════════════════════════ */

/* 7. ZIG-ZAG CHAPTERS ─────────────────────────────────────────────────────
   Five identical full-width rows, each reading number → copy → visual, made
   the section repetitive: by chapter three the eye stops reading. Even
   chapters now mirror, so the visual leads and the numeral anchors the far
   edge. Pure CSS ordering; the DOM and reading order are unchanged, and the
   numeral still precedes its copy for a screen reader. */
@media(min-width:961px){
  .module-list .module-card:nth-child(even){
    grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr) 118px}
  .module-list .module-card:nth-child(even)>:nth-child(1){order:3}
  .module-list .module-card:nth-child(even)>:nth-child(2){order:2}
  .module-list .module-card:nth-child(even)>:nth-child(3){order:1}
  .module-list .module-card:nth-child(even) .module-number{justify-self:end;text-align:right}
  /* Slight lateral offset so the stack reads as a rhythm, not a list. */
  .module-list .module-card:nth-child(odd){margin-right:clamp(0px,3vw,54px)}
  .module-list .module-card:nth-child(even){margin-left:clamp(0px,3vw,54px)}
}

/* 8. SECTION EDGES ────────────────────────────────────────────────────────
   Colour blocks previously met with no boundary, so the page read as one
   continuous wash. A hard ink rule states each block deliberately, which is
   the same language as the card borders. */
.agitation,.solution,.inside,.chat-examples,.transformation,
.how,.offer-section,.final-cta,.reviews{border-top:3px solid var(--ink)}
.founder{border-top:3px solid var(--ink)}

/* 9. TYPOGRAPHIC SCALE ────────────────────────────────────────────────────
   Display sizes carry tighter tracking and leading; body copy is capped at a
   comfortable measure rather than running the full column width. */
h1{letter-spacing:-.055em;line-height:.97}
.section h2{line-height:1.03}
.center-heading>p:last-child,.offer-intro>p:last-child{max-width:62ch}
.module-copy h3{letter-spacing:-.035em}

/* 10. HERO DEPTH ─────────────────────────────────────────────────────────
   A single flat offset shadow read as a sticker. Two layers, tinted violet,
   give the photo real weight against the yellow. */
.candid-photo{box-shadow:10px 12px 0 rgba(23,19,31,.20),22px 26px 0 rgba(108,59,255,.13)}

/* ══ MOTION & INTERACTION ══════════════════════════════════════════════════
   Every rule here is additive. Content is visible without any of it, and the
   whole block is disabled under prefers-reduced-motion. */

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:60;
  background:linear-gradient(90deg,var(--purple),var(--pink),var(--yellow));
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* Hero entrance. Pure CSS keyframes: a time-based animation always runs when
   the page is displayed, so this cannot depend on a script, a rAF callback or
   an observer. An earlier version toggled a class from JS and left the hero at
   opacity 0 whenever that callback did not fire. Never do that again. */
@media(prefers-reduced-motion:no-preference){
  .hero-copy>*,.hero-visual{animation:hero-in .8s var(--ease-out-expo) both}
  .hero-copy>*:nth-child(1){animation-delay:.05s}
  .hero-copy>*:nth-child(2){animation-delay:.13s}
  .hero-copy>*:nth-child(3){animation-delay:.21s}
  .hero-copy>*:nth-child(4){animation-delay:.29s}
  .hero-copy>*:nth-child(5){animation-delay:.36s}
  .hero-visual{animation-delay:.18s}
}
@keyframes hero-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* JS fallback reveal, only for browsers without scroll-driven CSS animation.
   The class is added by motion.js *after* it confirms it can reveal again. */
.js-reveal .center-heading,.js-reveal .pain-grid article,.js-reveal .module-card,
.js-reveal .chat-example,.js-reveal .price-card,.js-reveal .founder-stamp,
.js-reveal .founder-copy,.js-reveal .how-step,.js-reveal .transformation-inner{
  opacity:0;transform:translateY(16px)}
.js-reveal .is-in{opacity:1!important;transform:none!important;
  transition:opacity .7s var(--ease-out-expo),transform .7s var(--ease-out-expo)}

/* Pointer spotlight. A soft brand glow follows the cursor across the card. */
.price-card,.module-card,.chat-example,.pain-grid article{position:relative;isolation:isolate}
.price-card::after,.module-card::after,.chat-example::after,.pain-grid article::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .45s var(--ease-quick);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             rgba(108,59,255,.16),transparent 65%)}
.price-card:hover::after,.module-card:hover::after,
.chat-example:hover::after,.pain-grid article:hover::after{opacity:1}
.module-card.dark-card::after{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
  rgba(255,198,41,.20),transparent 65%)}

/* Marquee ticker for the promise strip */
.truth-strip.is-marquee{display:block;overflow:hidden;padding:0}
.truth-strip.is-marquee .marquee-track{display:flex;width:max-content;
  animation:marquee 32s linear infinite}
.truth-strip.is-marquee .marquee-group{display:flex;flex:0 0 auto}
.truth-strip.is-marquee span{border-right:1px solid rgba(255,255,255,.17);
  padding:1.05rem 2.2rem;white-space:nowrap}
.truth-strip.is-marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .truth-strip.is-marquee .marquee-track{animation:none}
}

/* Wordmark arrow reacts on hover */
.brand-wordmark .wordmark-arrow{transition:transform .5s var(--ease-spring)}
.brand-wordmark:hover .wordmark-arrow{transform:translateX(4px) rotate(-3deg)}

/* Review cards lift under the cursor */
.review-card{transition:transform .35s var(--ease-out-expo),box-shadow .35s var(--ease-out-expo)}
.review-card:hover{transform:translateY(-4px)}

/* Option buttons in the survey gain a clearer press */
.option{transition:transform .2s var(--ease-quick),background-color .2s var(--ease-quick),
        border-color .2s var(--ease-quick)}
.option:hover{transform:translateX(3px)}

/* ── Member routes ────────────────────────────────────────────────────────
   Paths into the live product for people who have already bought. */
.nav-coach{font-weight:800}
.button-small{min-height:42px;padding:.5rem 1rem;font-size:.85rem}
.member-row{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.85rem}
.member-row strong{width:100%}
.member-manage{color:var(--purple);font-weight:800}
.members-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;
  max-width:900px;margin:2.6rem auto 0;padding:1.1rem 1.4rem;
  background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.3);
  border-radius:18px;color:#fff;font-size:.9rem;text-align:center}
.members-bar-link{color:var(--yellow);font-weight:800}
a.button-small{text-decoration:none}
@media(max-width:820px){.nav-coach{display:none}}
.edit-answers.retake{display:block;margin-top:.7rem;color:var(--muted)}
.edit-answers.retake:hover{color:var(--purple)}

/* ══ CRO ═══════════════════════════════════════════════════════════════════
   Pricing sat at screen 16.5 of 19.9 and every button opened the survey, so a
   visitor who was already sold had no way to buy. These give intent somewhere
   to go at every depth of the page. */

/* Hero: primary action plus an escape hatch straight to pricing */
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.hero-secondary{background:transparent;text-decoration:none;border:2px solid var(--ink)}
.hero-secondary:hover{background:var(--ink);color:var(--yellow)}

/* Survey time expectation */
.quiz-time{margin:.15rem 0 .9rem;font-size:.74rem;font-weight:700;color:var(--muted)}

/* Mid-page pricing moment */
.price-teaser{padding:clamp(3.5rem,7vw,6rem) clamp(1.25rem,6vw,7.5rem);
  background:var(--ink);color:#fff;border-top:3px solid var(--ink)}
.price-teaser-inner{max-width:1180px;margin:auto;display:grid;gap:2rem;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center}
.price-teaser-copy h2{margin:.3rem 0 .8rem;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.05}
.price-teaser-copy p{color:rgba(255,255,255,.72);max-width:46ch;margin:0}
.price-teaser .eyebrow{color:var(--yellow)}
.price-teaser-plans{display:grid;gap:.7rem}
.teaser-plan{display:grid;gap:.15rem;padding:1rem 1.15rem;text-decoration:none;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.22);border-radius:16px;
  transition:background-color .25s var(--ease-quick),border-color .25s var(--ease-quick),transform .3s var(--ease-out-expo)}
.teaser-plan:hover{background:rgba(255,255,255,.13);border-color:var(--yellow);transform:translateX(4px)}
.teaser-plan-name{font-weight:800;font-size:.95rem}
.teaser-plan-price{font-family:"Manrope",sans-serif;font-weight:800;font-size:1.6rem;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.teaser-plan-price small{font-size:.62rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--yellow)}
.teaser-plan-note{font-size:.8rem;color:rgba(255,255,255,.62)}
.price-teaser-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.8rem;
  padding-top:.5rem;border-top:1px solid rgba(255,255,255,.16);margin-top:.6rem}
.price-teaser-actions .button-ghost{color:#fff;border-color:rgba(255,255,255,.45);background:transparent}
.price-teaser-actions .button-ghost:hover{background:#fff;color:var(--ink)}
.price-teaser-actions .button-primary{text-decoration:none}
@media(max-width:900px){
  .price-teaser-inner{grid-template-columns:1fr}
  .price-teaser-actions{flex-direction:column;align-items:stretch}
  .price-teaser-actions .button{width:100%}
}

/* Persistent desktop CTA, revealed once the hero is out of view */
.desk-cta{position:fixed;left:50%;bottom:1.1rem;z-index:var(--z-sticky);
  display:none;align-items:center;gap:.9rem;padding:.65rem .75rem .65rem 1.25rem;
  background:var(--paper);border:2px solid var(--ink);border-radius:999px;
  box-shadow:6px 7px 0 var(--ink);
  transform:translate(-50%,140%);opacity:0;
  transition:transform .55s var(--ease-out-expo),opacity .4s var(--ease-quick)}
.desk-cta.is-shown{transform:translate(-50%,0);opacity:1}
.desk-cta-text{font-size:.86rem;white-space:nowrap}
.desk-cta .button-small{white-space:nowrap}
@media(min-width:901px){.desk-cta:not([hidden]){display:flex}}
@media(max-width:1150px){.desk-cta-text{display:none}}

/* ── Chat examples: kill the dead space ───────────────────────────────────
   Portrait screenshots were rendering up to 680px tall, so each card was
   sized by the image while the copy beside it ran only ~350px. That left
   300-700px of empty white per card and made this the longest section on the
   page, sitting directly before the pricing. Capping the image and pinning
   the copy to the top removes the gap without cropping any screenshot. */
.chat-example{align-items:stretch}
.chat-example>a{align-items:flex-start;padding:22px}
.chat-example img{max-height:400px;width:auto;max-width:100%;margin:0 auto}
.chat-example-copy{align-self:center;padding:clamp(1.4rem,2.4vw,2.4rem)}
@media(min-width:961px){
  .chat-example:not(.chat-example-wide){grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .chat-example img{max-height:420px}
  /* The wide example is a landscape screenshot and keeps its full-width slot. */
  .chat-example-wide{grid-template-columns:1fr}
  .chat-example-wide img{max-height:470px;width:100%;object-fit:contain}
}
.chat-example-wide img{max-height:460px}
.chat-example-wide>a{padding:22px}
@media(max-width:960px){
  .chat-example img{max-height:340px}
  .chat-example>a{padding:16px}
}
/* The screenshot is evidence, so make it obviously openable. */
.chat-example>a{position:relative}
.chat-example>a::after{content:"View full size ↗";position:absolute;right:14px;bottom:12px;
  padding:.32rem .6rem;background:var(--ink);color:#fff;border-radius:99px;
  font-size:.68rem;font-weight:800;opacity:0;transform:translateY(4px);
  transition:opacity .3s var(--ease-quick),transform .3s var(--ease-out-expo)}
.chat-example>a:hover::after,.chat-example>a:focus-visible::after{opacity:1;transform:none}

/* ── Cuffing Season Special ───────────────────────────────────────────────
   Promotional pricing. The regular price and the end date are owner-supplied;
   both must be genuine for this to be lawful advertising in India. To end the
   promotion, remove the .offer-ribbon markup and every <s> reference price. */
.offer-ribbon{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.45rem;
  background:linear-gradient(90deg,var(--purple),#8b5cff 55%,var(--purple));
  font-size:.8rem;padding:.6rem 1rem}
.offer-ribbon strong{color:var(--yellow);letter-spacing:.04em;text-transform:uppercase}
.offer-ribbon s{opacity:.62}
.offer-ribbon b{color:var(--yellow);font-size:.95rem}
.offer-ribbon a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:800}
.offer-ribbon a:hover{color:var(--yellow)}
.offer-countdown{font-variant-numeric:tabular-nums;font-weight:800}
.price .was{display:block;font-size:1.05rem;font-weight:800;color:var(--muted);
  letter-spacing:0;margin-bottom:-.15rem}
.save-line{margin:.15rem 0 0!important;padding:.28rem .6rem;display:inline-block;
  background:var(--lime);border:1.5px solid var(--ink);border-radius:99px;
  font-size:.66rem!important;font-weight:900!important;letter-spacing:.03em!important;
  text-transform:none!important;color:var(--ink)!important}
.teaser-plan-price s{font-size:.62em;color:rgba(255,255,255,.5);font-weight:700}
.microproof s{opacity:.55}
.desk-cta-text s{opacity:.55}
@media(max-width:700px){.offer-ribbon a{width:100%}}

/* ── Value framing + proof strip under the plans ──────────────────────────
   Price is only expensive relative to something. Anchoring ₹799 against a
   dinner reframes it, and the screenshots put real evidence next to the
   buying decision instead of leaving it 8 screens up the page. */
.value-frame{max-width:1000px;margin:2.6rem auto 0}
.value-line{margin:0 0 1.3rem;padding:1.05rem 1.3rem;text-align:center;
  background:var(--yellow);color:var(--ink);border:2px solid var(--ink);
  border-radius:18px;box-shadow:5px 6px 0 rgba(0,0,0,.35);font-size:1.02rem;line-height:1.5}
.value-line strong{font-weight:900}
.value-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;align-items:stretch}
.value-proof a{display:block;overflow:hidden;background:#fff;
  border:2px solid var(--ink);border-radius:14px;aspect-ratio:4/3;
  transition:transform .35s var(--ease-out-expo),box-shadow .35s var(--ease-out-expo)}
.value-proof a:hover{transform:translateY(-4px);box-shadow:4px 5px 0 var(--yellow)}
.value-proof img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.value-proof-label{grid-column:1/-1;text-align:center;font-size:.86rem;
  color:rgba(255,255,255,.8);margin-top:.35rem}
.value-proof-label a{display:inline;border:0;background:none;aspect-ratio:auto;
  color:var(--yellow);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.value-proof-label a:hover{transform:none;box-shadow:none}
@media(max-width:760px){
  .value-proof{grid-template-columns:repeat(2,1fr)}
  .value-line{font-size:.94rem}
}
/* Inline emoji: decorative, sized to sit on the text baseline */
.i{font-style:normal;font-size:1.05em;line-height:1;margin-right:.12em}
.truth-strip .i{margin-right:.3em}

/* ── Mobile conversion pass ───────────────────────────────────────────────
   Measured on a 375x812 phone: the offer ribbon wrapped to three lines and
   consumed 97px (12% of the viewport) before a visitor saw anything, and the
   page ran 27.4 screens. Both push the first CTA and the price down. */
@media(max-width:640px){
  .offer-ribbon{padding:.45rem .7rem;font-size:.72rem;gap:.3rem;flex-wrap:nowrap;
    white-space:nowrap;overflow:hidden}
  .offer-ribbon .ribbon-long{display:none}
  .offer-ribbon b{font-size:.82rem}
  .offer-ribbon a{width:auto;padding-left:.15rem}
  /* Tighter hero so the primary action sits higher in the fold. */
  .hero{padding-top:1.5rem}
  .hero-lede{font-size:.98rem;line-height:1.5}
  .hero-actions{gap:.55rem}
  .hero-actions .button{width:100%}
  .live-pill{font-size:.68rem;padding:.4rem .7rem}
  .microproof{gap:.35rem .8rem;font-size:.74rem}
}

/* Collapse the long example list on small screens. Three are shown, the rest
   are one tap away. Nothing is removed and the button states the count. */
.examples-more{display:none}
@media(max-width:960px){
  .chat-example-list.is-collapsed .chat-example:nth-child(n+4){display:none}
  .examples-more{display:inline-flex;margin:1.4rem auto 0}
  .examples-more-wrap{display:flex;justify-content:center}
}

/* ── A/B test: herocta ────────────────────────────────────────────────────
   Which hero action carries primary weight. Variant A (control) leads with
   the free diagnosis; variant B leads with pricing. This tests the core
   assumption of the funnel — that a 10-question survey before the price
   helps rather than costs. Both buttons are always present and clickable;
   only emphasis and order change, so neither variant hides anything. */
.ab-herocta-b .hero-actions{flex-direction:row-reverse;justify-content:flex-end}
.ab-herocta-b .hero-actions .js-start{
  background:transparent;border:2px solid var(--ink);box-shadow:none}
.ab-herocta-b .hero-actions .js-start:hover{background:var(--ink);color:var(--yellow)}
.ab-herocta-b .hero-secondary{
  background:var(--purple);color:#fff;border:2px solid var(--ink);
  box-shadow:4px 5px 0 var(--ink)}
.ab-herocta-b .hero-secondary:hover{background:var(--purple2);color:#fff}
@media(max-width:640px){
  .ab-herocta-b .hero-actions{flex-direction:column-reverse}
}

/* ── Consent bar ──────────────────────────────────────────────────────────
   Only rendered when a cookie-based analytics tool is actually configured. */
.consent-bar{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:var(--z-overlay);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between;
  max-width:760px;margin:0 auto;padding:1rem 1.15rem;
  background:var(--paper);border:2px solid var(--ink);border-radius:18px;
  box-shadow:6px 7px 0 var(--ink);
  transform:translateY(140%);opacity:0;
  transition:transform .5s var(--ease-out-expo),opacity .35s var(--ease-quick)}
.consent-bar.is-shown{transform:none;opacity:1}
.consent-bar p{margin:0;flex:1 1 300px;font-size:.84rem;line-height:1.5;color:var(--muted)}
.consent-bar a{color:var(--purple);font-weight:800}
.consent-actions{display:flex;gap:.55rem;flex:0 0 auto}
@media(max-width:560px){
  .consent-bar{bottom:5.2rem}
  .consent-actions{width:100%}
  .consent-actions .button{flex:1}
}