/* Little Leash: light "plush toy" theme on top of the shared app.css.
   Cream + pastels (peach, cotton-pink, mint, sky), chocolate text (AA on every surface), very round corners,
   squishy stitched buttons, felt cards. Motion = transform/opacity only; prefers-reduced-motion turns it off. */
:root{
  color-scheme:light;
  /* palette */
  --cream:#FFF4E8;--cream2:#FFFAF3;--felt:#FFFDF9;
  --peach:#FFD3BC;--peach2:#FFB38F;--peach3:#F0906A;
  --rose:#FFD4DF;--rose2:#FF9EB5;
  --mint:#CDEFE2;--mint2:#8ED9BE;--mint3:#24664D;
  --sky:#D6EAFB;--sky2:#9CC8F2;--sky3:#2F5F96;
  --butter:#FFE9AE;--butter2:#FFCB5C;
  --choc:#4A2C22;--choc2:#6B4638;--stitch:rgba(122,74,52,.28);
  /* app.css variables, remapped (text accents are dark enough for AA on cream) */
  --nv:#4A2C22;--nv2:#6B4638;--nv3:#FFE6D6;
  --gold:#A9471F;--b1:#2F5F96;--b3:#2F5F96;--green:#24664D;
  --ink:#4A2C22;--mut:#6E4C3F;
  --line:rgba(122,74,52,.16);--card:#FFFDF9;--card2:#FFEFE3;
  --ease:cubic-bezier(.2,.8,.2,1);--boing:cubic-bezier(.34,1.56,.64,1);
  --font:ui-rounded,"SF Pro Rounded","Nunito","Varela Round",Poppins,system-ui,-apple-system,sans-serif;
  --r:24px;--sh:0 6px 0 rgba(176,112,80,.16),0 14px 26px rgba(150,90,60,.10);
}
html{background:var(--cream)}
body{background:
  radial-gradient(70% 34% at 0% 0%,rgba(255,212,223,.7),transparent 70%),
  radial-gradient(60% 30% at 100% 6%,rgba(214,234,251,.8),transparent 70%),
  radial-gradient(80% 40% at 50% 100%,rgba(205,239,226,.55),transparent 70%) fixed,
  var(--cream);
  color:var(--ink);font-family:var(--font);font-weight:500;letter-spacing:.005em}
h1,h2,h3,.h1s{font-family:var(--font);font-weight:800;letter-spacing:-.01em;color:var(--choc)}
.mut,.lead2{color:var(--mut)}
::selection{background:var(--rose)}
:focus-visible{outline:3px solid var(--sky3);outline-offset:3px;border-radius:14px}
p a,.small a{color:var(--sky3)}

/* ---------- screen entrance: elastic hop ---------- */
.view,.view.fwd,.view.bk{animation:pvin .55s var(--boing) backwards}
@keyframes pvin{0%{opacity:0;transform:translateY(18px) scale(.97)}60%{opacity:1;transform:translateY(-4px) scale(1.01)}100%{transform:none}}
.stg{animation:psin .6s var(--boing) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes psin{0%{opacity:0;transform:translateY(16px) scale(.96)}65%{opacity:1;transform:translateY(-3px) scale(1.01)}100%{opacity:1;transform:none}}

/* ---------- top bar ---------- */
.top{background:rgba(255,244,232,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:2px dashed var(--line)}
.top .back{width:44px;height:44px;border-radius:16px;background:var(--felt);border:2px solid var(--line);color:var(--choc);box-shadow:0 3px 0 rgba(176,112,80,.18)}
.top .back:active{transform:translateY(2px) scale(.94);box-shadow:0 1px 0 rgba(176,112,80,.18)}
.top:empty{border-bottom:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.top .ttl{color:var(--choc2);font-weight:700;font-size:15px}
.top .qzlb{background:var(--butter);color:var(--choc)}

/* brand */
.brand{display:flex;align-items:center;gap:8px;color:var(--peach3)}
.brand svg{width:30px;height:30px;color:#E07B55}
.brand b{white-space:nowrap;font-family:var(--font);font-style:normal;font-weight:800;color:var(--choc);font-size:19px;letter-spacing:-.01em}
.brand.sm svg{width:24px;height:24px}.brand.sm b{font-size:16px}

/* ---------- mascot ---------- */
.masc{display:flex;justify-content:center;margin:2px auto 8px;animation:pmasc .7s var(--boing) both .05s}
.masc svg{max-width:100%;height:auto}
.masc.sm{margin:0 auto 4px}
@keyframes pmasc{0%{opacity:0;transform:translateY(22px) scale(.6)}55%{opacity:1;transform:translateY(-8px) scale(1.06)}75%{transform:translateY(2px) scale(.98)}100%{transform:none}}
.pcover .masc{margin-top:-6px}
.qofr .masc.sm{margin-top:-4px}
/* lesson-done overlay: mascot pops in the middle of the screen, never blocks taps */
.mparty{position:fixed;inset:0;z-index:96;display:grid;place-items:center;pointer-events:none;animation:pparty 1.5s var(--ease) forwards}
.mparty .masc{margin:0;padding:18px;border-radius:50%;background:radial-gradient(circle,rgba(255,250,243,.96) 55%,rgba(255,250,243,0) 72%);animation:ppartyin .55s var(--boing) both}
@keyframes ppartyin{0%{transform:scale(.3) translateY(40px);opacity:0}100%{transform:none;opacity:1}}
@keyframes pparty{0%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-30px) scale(.85)}}

/* ---------- headings / kicker ---------- */
.kick{display:inline-block;font-size:13px;font-weight:800;color:var(--gold);letter-spacing:.02em}
.h1s{font-size:27px;line-height:1.18;margin-top:6px}
h2{font-size:21px}
.sec{margin-top:28px}
.sec p{font-size:16px}

/* ---------- buttons: squishy, stitched, inner volume ---------- */
.btn{position:relative;min-height:58px;border-radius:999px;font-weight:800;font-size:17px;letter-spacing:.01em;
  transition:transform .18s var(--boing),box-shadow .18s var(--ease),filter .2s}
.btn::before{content:"";position:absolute;inset:5px;border-radius:inherit;border:2px dashed rgba(255,255,255,.75);pointer-events:none}
.btn.gold{background:linear-gradient(180deg,#FFC6AA 0%,#FFA883 100%);color:var(--choc);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -6px 0 rgba(214,110,70,.22),0 6px 0 #E08A64,0 14px 24px rgba(224,138,100,.32)}
.btn.ghost{background:linear-gradient(180deg,#FFFFFF,#FFF2E6);color:var(--choc);border:2px solid #F1D9C7;
  box-shadow:inset 0 -4px 0 rgba(214,160,120,.14),0 4px 0 #EED3BF}
.btn.ghost::before{border-color:rgba(200,140,100,.35);inset:4px}
.btn.white{background:#fff;color:var(--choc);box-shadow:0 4px 0 #EED3BF}
.btn.sm{min-height:48px;font-size:15px}
.btn.sm::before{inset:4px}
.btn.two{padding-top:8px;padding-bottom:8px}
.btn .bs{opacity:.85;font-weight:600}
.btn:hover{filter:brightness(1.03)}
.btn:active{transform:translateY(4px) scale(.96,.94);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(214,110,70,.2),0 2px 0 #E08A64}
.btn.ghost:active{box-shadow:0 1px 0 #EED3BF}
.btn:disabled,.btn[disabled]{opacity:.5;filter:saturate(.6)}
.btn[data-act="buy"]::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent)}
.btn[data-act="buy"].seen{animation:pbuy 2.4s ease-in-out 3}
@keyframes pbuy{0%,100%{transform:none}10%{transform:scale(1.04,.96)}20%{transform:scale(.98,1.03)}30%{transform:none}}
.btn.did{background:var(--mint);color:var(--mint3);border:2px solid var(--mint2);box-shadow:0 4px 0 #9ED7C1}
.lnkc,.freel{color:var(--sky3)}
.ckno{color:var(--mut);background:none;border:0;text-decoration:underline;font-weight:600}

/* ---------- quiz: progress bar = striped plush ---------- */
.top .qzbar{flex:1}
.qzbar{height:14px;border-radius:999px;margin-top:0;background:var(--felt);border:2px solid #F1D9C7;box-shadow:inset 0 2px 3px rgba(150,90,60,.10);overflow:hidden;padding:2px}
.qzbar i{position:relative;border-radius:999px;min-width:10px;
  background:repeating-linear-gradient(-45deg,#FF9A72 0 8px,#FFC2A4 8px 16px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(214,110,70,.18);
  background-size:22.6px 22.6px;animation:pstripe 1.2s linear infinite;transition:width .55s var(--boing)}
@keyframes pstripe{to{background-position:22.6px 0}}

/* quiz options: felt pillows that squish, then "boing" when chosen */
.qzo{gap:12px}
.qzb{min-height:62px;padding:12px 16px;border-radius:22px;background:var(--felt);border:2px solid #F1D9C7;color:var(--choc);font-weight:700;font-size:16.5px;
  box-shadow:inset 0 -4px 0 rgba(214,160,120,.12),0 4px 0 #EED3BF;position:relative;
  transition:transform .2s var(--boing),box-shadow .2s var(--ease),background-color .2s,border-color .2s}
.qzb::after{content:"";position:absolute;inset:5px;border-radius:17px;border:1.5px dashed transparent;pointer-events:none;transition:border-color .2s}
.qzb:active{transform:translateY(3px) scale(.97,.95);box-shadow:0 1px 0 #EED3BF}
.qzb.on{background:linear-gradient(180deg,#FFF0E7,#FFE0D0);border-color:var(--peach2);box-shadow:inset 0 -4px 0 rgba(214,110,70,.14),0 4px 0 #F0A27E;transform:none;animation:pboing .5s var(--boing)}
.qzb.on::after{border-color:rgba(214,110,70,.45)}
@keyframes pboing{0%{transform:scale(.94,.9)}40%{transform:scale(1.04,1.06)}70%{transform:scale(.99,.98)}100%{transform:none}}
.qzb:nth-child(4n+1) .qzi{background:var(--peach)}.qzb:nth-child(4n+2) .qzi{background:var(--mint)}
.qzb:nth-child(4n+3) .qzi{background:var(--sky)}.qzb:nth-child(4n+4) .qzi{background:var(--rose)}
.qzi{width:42px;height:42px;border-radius:16px;font-size:22px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.05)}
.qzb.on .qzi{animation:pwig .5s var(--boing)}
@keyframes pwig{30%{transform:rotate(-12deg) scale(1.15)}60%{transform:rotate(8deg)}}
.qynb{gap:12px}
.qynb .qzb{flex-direction:column;justify-content:center;gap:6px;min-height:104px;font-size:17px}
.qynb .qzi{width:52px;height:52px;font-size:28px;border-radius:50%}
.qyn .qynq{font-family:var(--font);font-style:normal;font-weight:800}
.qznote{background:var(--mint);border:2px dashed var(--mint2);color:var(--mint3);border-radius:20px;font-weight:700}
.qbig{background:var(--rose);border:2px dashed var(--rose2);border-radius:var(--r)}
.qbig span{color:var(--choc)}.qbig b.r{color:#B3363F}.qbig b.y{color:#8A5A00}
input.n21t,.n21t{max-width:none;height:58px;border-radius:20px;border:2px solid #F1D9C7;background:var(--felt);color:var(--choc);font-weight:700;color-scheme:light;
  box-shadow:inset 0 3px 0 rgba(214,160,120,.12);padding:0 18px}
.n21t::placeholder{color:#9A7A6C}
.n21t:focus{outline:none;border-color:var(--peach2);box-shadow:0 0 0 4px rgba(255,179,143,.35)}
.plog{min-height:96px;padding:12px 16px;height:auto;font-weight:500}

/* loading */
.qload{height:20px;border-radius:999px;background:var(--felt);border:2px solid #F1D9C7;padding:3px;margin-top:18px}
.qload i{border-radius:999px;background:repeating-linear-gradient(-45deg,#6FCBA9 0 9px,#B5E9D5 9px 18px);background-size:25.5px 25.5px;
  animation:qld 3s linear both,pstripe 1s linear infinite;box-shadow:inset 0 2px 0 rgba(255,255,255,.5)}
.qpct{color:var(--choc);font-weight:800;font-size:30px}
.qlchk li{background:var(--felt);border:2px solid #F1D9C7;border-radius:18px;color:var(--choc);font-weight:600;animation:qli .5s var(--boing) both;animation-delay:var(--d)}
.qlchk li:before{content:"";display:inline-block;width:20px;height:20px;margin-right:10px;vertical-align:-4px;border-radius:50%;
  background:var(--mint2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* ---------- paywall ---------- */
.qofr{margin-top:8px;padding:18px 16px 18px;border-radius:30px;background:linear-gradient(180deg,#FFFDF9,#FFF3EA);border:2px solid #F1D9C7;
  box-shadow:var(--sh);position:relative}
.qofr::before{content:"";position:absolute;inset:7px;border-radius:24px;border:2px dashed var(--stitch);pointer-events:none}
.qofr .kick{color:var(--gold)}
.qofr .h1s{text-align:center}.qofr>.kick{display:block;text-align:center}
.qres{gap:8px}
.qres li{padding:8px 12px;background:var(--cream2);border:1.5px solid var(--line);border-radius:16px;color:var(--choc);font-size:15px}
.qres li span{color:var(--mut)}.qres b{color:var(--choc)}.qres b.r{color:#B3363F}
.qpls{gap:14px;margin-top:14px}
.qpl{border-radius:24px;border:2px solid #F1D9C7;background:var(--felt);color:var(--choc);padding:18px 14px;
  box-shadow:0 4px 0 #EED3BF;transition:transform .2s var(--boing),box-shadow .2s,border-color .2s,background-color .2s}
.qpl:active{transform:translateY(3px) scale(.98,.96);box-shadow:0 1px 0 #EED3BF}
.qpl.on{border-color:var(--peach2);background:linear-gradient(180deg,#FFF3EC,#FFE3D4);box-shadow:inset 0 -4px 0 rgba(214,110,70,.12),0 5px 0 #F0A27E;animation:pboing .5s var(--boing)}
.qpl.on::after{content:"";position:absolute;inset:5px;border-radius:19px;border:1.5px dashed rgba(214,110,70,.45);pointer-events:none}
.qplr{width:24px;height:24px;border:2.5px solid #D8B9A4;background:#fff}
.qpl.on .qplr{border-color:var(--peach3);background:radial-gradient(circle,var(--peach3) 42%,#fff 47%)}
.qpln b{font-weight:800}.qpln small{color:var(--mut)}
.qplp b{color:var(--choc);font-weight:800;font-size:23px}.qplp small{color:var(--mut);font-size:12.5px}.qplp s{color:var(--mut)}
.qplb{top:-12px;background:var(--mint);color:var(--mint3);border:2px solid var(--mint2);font-weight:800;padding:2px 10px;box-shadow:0 2px 0 #9ED7C1}
.qonce{color:var(--choc2);font-weight:600}
.qguar{color:var(--mut);font-size:13.5px;flex-wrap:wrap;line-height:1.45}
.qguar svg{color:var(--mint3)}
.qpay{color:var(--mut)}
.qns{border-radius:28px;background:var(--sky);border:2px dashed var(--sky2);margin-top:20px}
.qns .kick{color:var(--sky3)}
.qns p{color:var(--choc)}
.qplan{gap:10px}
.qplan li{padding-left:32px;line-height:1.45}
.qplan li:before{content:"";width:22px;height:22px;top:1px;background:var(--mint2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
  box-shadow:0 2px 0 #7CC3A8}
.faq{border-top:2px dashed var(--line)}
.faq summary{color:var(--choc);font-weight:700}
.faq summary::after{border-color:var(--peach3)}
.faq p{color:var(--mut)}

/* ---------- checkout modal ---------- */
.ckm{background:rgba(74,44,34,.42);backdrop-filter:blur(4px)}
.ckbox{border-radius:30px 30px 0 0;box-shadow:0 -14px 40px rgba(74,44,34,.25)}
@media (min-width:600px){.ckbox{border-radius:30px}}
.ckhd{background:var(--peach);color:var(--choc)}
.ckt b{color:var(--choc)}.ckp{color:var(--choc)}.ckp small,.ckp s{color:var(--choc2)}
.ckx{color:var(--choc);background:rgba(255,255,255,.6);border-radius:14px}
.ckval{background:#FFF0E6;border-top:2px dashed rgba(214,110,70,.25)}
.ckval li{color:var(--choc2)}.ckval li b{color:var(--choc)}.ckval li::before{color:var(--mint3)}
.ckexit{background:var(--cream)}
.ckexin{color:var(--choc)}.ckexin h3{font-weight:800}.ckexin p{color:var(--choc2)}.ckexin p.mut{color:var(--mut)}
.ckem{color:var(--choc)}.ckem label b{color:var(--choc)}.ckem label small{color:var(--mut)}
.ckem input{border:2px solid #F1D9C7;border-radius:18px;color:var(--choc);background:var(--felt)}
.ckem input:focus{border-color:var(--peach2);box-shadow:0 0 0 4px rgba(255,179,143,.35)}
.ckem-n{color:var(--mut)}.ckerr{color:#B3261E}
.ckload{color:var(--choc2)}
.ckload span{border-color:var(--peach);border-top-color:var(--peach3)}
.ckft{background:var(--cream2);color:var(--mut);border-top:1px solid var(--line)}.ckft a{color:var(--choc2)}
.qzexit{background:var(--cream)}

/* consent bar, toast */
.ccbar{background:var(--felt);color:var(--choc);border:2px solid #F1D9C7;border-radius:24px;box-shadow:0 6px 0 #EED3BF,0 16px 30px rgba(150,90,60,.18)}
.ccbar a{color:var(--sky3)}
.ccbar .btn{min-height:44px}
.toast{background:var(--choc);color:#FFF4E8;border-radius:20px;font-weight:700;box-shadow:0 6px 0 rgba(74,44,34,.25),0 12px 26px rgba(74,44,34,.25);transform:translate(-50%,20px) scale(.9)}
.toast.on{transform:translate(-50%,0) scale(1);transition:opacity .25s,transform .45s var(--boing)}

/* confetti: plush stars and dots that pop */
.cf{border-radius:4px;animation:pcf 1.05s var(--ease) forwards}
.cf:nth-child(3n){border-radius:50%}
.cf:nth-child(3n+1){clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
@keyframes pcf{0%{transform:scale(.2) rotate(0);opacity:1}25%{transform:translate(calc(var(--dx) * .4),calc(var(--dy) * .4)) scale(1.25) rotate(90deg)}100%{transform:translate(var(--dx),calc(var(--dy) + 60px)) scale(.5) rotate(260deg);opacity:0}}

/* ---------- cards, notes, crisis, audio sample ---------- */
.card{background:var(--felt);border:2px solid #F1D9C7;border-radius:var(--r)}
.note{background:var(--sky);border:2px dashed var(--sky2);border-radius:var(--r);color:var(--choc)}
.note b{color:var(--sky3)}
.note .btn{display:inline-flex;width:auto;padding:6px 18px}
.crisis{background:var(--rose);border:2px dashed var(--rose2);border-radius:var(--r);color:var(--choc)}
.crisis summary{color:var(--choc)}
.helpl a{color:var(--sky3)}
.sample{background:var(--felt);border:2px solid #F1D9C7;border-radius:var(--r);color:var(--choc);box-shadow:0 4px 0 #EED3BF;transition:transform .2s var(--boing)}
.sample:active{transform:translateY(3px) scale(.98)}
.sample .pl{background:var(--peach2);color:var(--choc);box-shadow:inset 0 -3px 0 rgba(214,110,70,.25)}
.sample small{color:var(--mut)}
.sample[aria-pressed="true"]{border-color:var(--peach2);background:#FFF1E8}
.sample .bar{background:var(--card2);height:5px;border-radius:5px}.sample .bar i{background:var(--peach3)}

/* ---------- home / program ---------- */
.pcover{padding-top:calc(18px + var(--st))}
.pcover .brand{margin-bottom:6px;justify-content:center}
.pcover .kick,.pcover .h1s,.pcover>.mut{text-align:center}
.pcover .kick,.qofr>.kick{display:block}
.pcover .h1s{font-size:28px}
.pfocus{padding-left:22px;color:var(--mut)}
.pfocus li{margin-top:4px}
.pfocus li::marker{color:var(--peach3);font-weight:800}
.pstreak{margin-left:auto;display:inline-flex;align-items:center;gap:4px;background:var(--butter);border:2px solid var(--butter2);color:var(--choc);border-radius:999px;padding:5px 12px;font-weight:800;font-size:15px;
  box-shadow:0 3px 0 #EDB84A;animation:pstk 2.2s ease-in-out infinite}
@keyframes pstk{0%,100%{transform:scale(1)}12%{transform:scale(1.12,.92)}24%{transform:scale(.96,1.06)}36%{transform:scale(1)}}
.nextc{background:linear-gradient(180deg,#FFF5EE,#FFE6D8);border:2px solid var(--peach2);border-radius:26px;color:var(--choc);box-shadow:0 5px 0 #F0A27E;margin-top:10px;position:relative;
  transition:transform .2s var(--boing),box-shadow .2s}
.nextc::after{content:"";position:absolute;inset:6px;border-radius:20px;border:1.5px dashed rgba(214,110,70,.4);pointer-events:none}
.nextc small{color:var(--gold);font-weight:800}.nextc b{color:var(--choc)}.nextc svg{color:var(--peach3)}
.nextc:active{transform:translateY(4px) scale(.98);box-shadow:0 1px 0 #F0A27E;background-color:transparent}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pstats span{border-radius:22px;padding:12px 6px;text-align:center;border:2px solid transparent;box-shadow:0 4px 0 rgba(176,112,80,.14)}
.pstats span:nth-child(1){background:var(--butter);border-color:var(--butter2)}
.pstats span:nth-child(2){background:var(--rose);border-color:var(--rose2)}
.pstats span:nth-child(3){background:var(--mint);border-color:var(--mint2)}
.pstats b{display:block;font-size:26px;font-weight:800;color:var(--choc);line-height:1.15}
.pstats small{color:var(--choc2);font-size:12.5px;font-weight:700}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sec>.h h2{font-size:20px}
.plist{display:grid;gap:10px}
.pl{display:flex;align-items:center;gap:12px;background:var(--felt);border:2px solid #F1D9C7;border-radius:22px;padding:12px 14px;color:var(--choc);
  box-shadow:0 4px 0 #EED3BF;transition:transform .2s var(--boing),box-shadow .2s}
.pl:active{transform:translateY(3px) scale(.98);box-shadow:0 1px 0 #EED3BF}
.pl b{display:block;font-weight:700;font-size:15.5px;line-height:1.3}
.pl small{font-size:12.5px}
.pli{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--peach);color:var(--choc);font-weight:800;font-size:15px;flex:none;box-shadow:inset 0 -3px 0 rgba(214,110,70,.2)}
.pli svg{width:18px;height:18px}
.pl.d{background:#F2FBF7;border-color:var(--mint2);box-shadow:0 4px 0 #A9DCC8}
.pl.d .pli{background:var(--mint2);color:#fff}
.pl.lk{opacity:1;background:#FBF3EC;border-style:dashed;box-shadow:none;color:var(--mut)}
.pl.lk .pli{background:#F1E4DA;color:#8C6C5E;box-shadow:none}
.psteps{list-style:none;padding:0;display:grid;gap:10px}
.pst{display:flex;gap:12px;align-items:flex-start;width:100%;background:var(--felt);border:2px solid #F1D9C7;border-radius:22px;padding:12px 14px;line-height:1.45;color:var(--choc);
  box-shadow:0 4px 0 #EED3BF;transition:transform .2s var(--boing),background-color .2s,border-color .2s}
.pst:active{transform:translateY(3px) scale(.98)}
.pst.on{border-color:var(--mint2);background:#F2FBF7;box-shadow:0 4px 0 #A9DCC8;animation:pboing .5s var(--boing)}
.psn{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--sky);color:var(--sky3);font-weight:800;font-size:14px;flex:none}
.pst.on .psn{background:var(--mint2);color:#fff}
.pcard{width:100%;max-width:360px;height:auto;border-radius:28px;border:3px solid #fff;box-shadow:0 8px 0 #EED3BF,0 20px 40px rgba(150,90,60,.2)}
.pbig{font-size:64px;line-height:1}
.qbig{font-size:72px;line-height:1;text-align:center;margin-top:12px}
.plog{width:100%;min-height:96px;resize:vertical;text-align:left;font-size:15px}
.plogb{grid-template-columns:1fr 1fr}
.plogl{list-style:none;padding:0;display:grid;gap:8px}
.plogl li{display:flex;justify-content:space-between;gap:10px;background:var(--felt);border:2px solid #F1D9C7;border-radius:16px;padding:8px 12px;font-size:14px}
.mb16{margin-bottom:16px;display:inline-flex}
.qres li span{flex:none;white-space:nowrap;margin-right:12px}
.qres li b{text-align:right}
.paid .h1s{font-size:28px}

/* ---------- small screens ---------- */
@media (max-width:360px){.h1s{font-size:24px}.qplp b{font-size:20px}.pstats b{font-size:22px}.qzb{font-size:15.5px}}

/* ---------- reduced motion: nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  .view,.view.fwd,.view.bk,.stg,.masc,.mparty,.mparty .masc,.qzb.on,.qzb.on .qzi,.qpl.on,.pst.on,.pstreak,.qzbar i,.qload i,.qlchk li,.btn[data-act="buy"].seen,.btn[data-act="buy"]::after{animation:none!important}
  .qlchk li{opacity:1}
  .qload i{width:100%}
  .btn,.qzb,.qpl,.pl,.pst,.nextc,.sample,.toast{transition:none}
  .btn:active,.qzb:active,.qpl:active,.pl:active,.pst:active,.nextc:active,.sample:active{transform:none}
  .cf{display:none}
}

/* funnel header: back · logo centred · progress bar on its own row */
.top.qzh{flex-wrap:wrap;row-gap:10px}
.top.qzh .qzlogo{flex:1;justify-content:center}
.top.qzh .qzsp{width:44px;flex:none}
.top.qzh .qzbar{flex:1 0 100%}
.top.qzh:not(:has(.back)) .qzlogo{padding:4px 0}