/* =========================================================
   Quit Fapping v2: night to morning
   Mobile first (390px). Desktop: centred 640px column.
   ========================================================= */
:root{
  --night:#0B1120; --night-text:#E8ECF5; --night-accent:#FF6B5E; --red:#C62A1F; --night-muted:#8A94A8;
  --blue-grey:#2A2F45; --dawn:#6B4E3D; --dawn-muted:#C9CFDB; --dawn-accent:#FFD28A;
  --morning:#FBF5EA; --morning-text:#1A1A1A; --morning-accent:#E8A23A; --morning-muted:#6B6257;
  --gold:#F6E3BC;
  --green:#25D366; --green-press:#1EBE5A;
  --card-border:#EDE4D3;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --col:640px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:18px;line-height:1.6;font-weight:400;
  background:var(--night);color:var(--night-text);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
.nw{white-space:nowrap;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- the sky (JS paints it on scroll) ---------- */
.sky{position:fixed;inset:0;z-index:-1;background:var(--night);display:none;}
.sky-on .sky{display:block;}

/* ---------- screens ---------- */
.screen{position:relative;padding:64px 22px;}
.screen > .in-col{max-width:var(--col);margin:0 auto;}
.screen p + p{margin-top:14px;}

/* each screen has its own colour by default (no JS / reduced motion);
   with the sky on, screens go transparent and the sky shows through */
.screen,.site-foot{background:var(--bg,var(--night));}
.sky-on .screen:not(.t-morning){background:transparent;}

/* text colours per theme */
.t-night{color:var(--night-text);}
.t-night .muted{color:var(--night-muted);}
.t-night .accent{color:var(--night-accent);}
.t-dawn{color:var(--night-text);}
.t-dawn .muted{color:var(--dawn-muted);}
.t-dawn .accent{color:var(--dawn-accent);}
.t-morning{color:var(--morning-text);}
.t-morning .muted{color:var(--morning-muted);}
.t-morning .accent{color:#A8650A;}

/* ---------- type ---------- */
.big{font-size:30px;font-weight:800;line-height:1.25;letter-spacing:-.01em;}
.med{font-size:22px;font-weight:600;line-height:1.4;}
.small{font-size:14px;line-height:1.5;}
.huge{font-size:48px;font-weight:800;line-height:1.05;letter-spacing:-.02em;}
h1,h2,h3{font:inherit;}
.big,.med,.huge{margin-top:22px;}
.screen .big:first-child,.screen .med:first-child,.screen .small:first-child{margin-top:0;}
em{font-style:italic;}
.center{text-align:center;}

/* ---------- top logo ---------- */
.logo{position:absolute;top:20px;left:22px;font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--night-muted);}

/* ---------- screen 1 ---------- */
.s1{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:96px;padding-bottom:72px;overflow:hidden;}
.s1::before{
  content:"";position:absolute;left:50%;top:46%;width:520px;height:520px;margin:-260px 0 0 -260px;
  background:radial-gradient(circle,rgba(198,42,31,.22) 0%,rgba(198,42,31,.08) 38%,rgba(198,42,31,0) 70%);
  pointer-events:none;
}
.s1 .in-col{position:relative;}
.s1 .med{margin-top:34px;}
.s1 h1{margin-top:22px;}

/* ---------- screen 4: crossed-out chips ---------- */
.tried{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px;}
.tried li{
  list-style:none;position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border:1px solid rgba(232,236,245,.28);border-radius:999px;font-size:16px;color:var(--night-muted);
}
.tried li::after{
  content:"";position:absolute;left:12px;right:12px;top:50%;height:2px;margin-top:-1px;border-radius:2px;
  background:var(--night-accent);transform:scaleX(1);transform-origin:left center;
}
.anim .tried li::after{transform:scaleX(0);transition:transform .5s var(--ease) .45s;}
.anim .tried li.in::after{transform:scaleX(1);}

/* ---------- line-drawn graphics ---------- */
.art{margin:26px auto 4px;}
.art .draw{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.anim .art .draw{stroke-dasharray:1;stroke-dashoffset:1;}
.anim .art.in .draw{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease) var(--d,0s);}
.anim .art .lbl{opacity:0;}
.anim .art.in .lbl{opacity:1;transition:opacity .6s ease var(--d,0s);}
.caption{margin-top:14px;text-align:center;}

/* tree */
.tree{width:100%;max-width:360px;max-height:60vh;max-height:60svh;}
.tree .ground{stroke:var(--night-muted);stroke-width:1.5;}
.tree .trunk,.tree .leaf{stroke:var(--night-accent);stroke-width:2;}
.tree .root{stroke:#C9CFDB;stroke-width:1.8;}
.tree .pill rect{fill:rgba(232,236,245,.06);stroke:rgba(232,236,245,.4);stroke-width:1;}
.tree .pill.top rect{fill:rgba(198,42,31,.28);stroke:var(--night-accent);}
.tree text{fill:var(--night-text);font-family:"Manrope",sans-serif;font-size:14px;font-weight:600;text-anchor:middle;dominant-baseline:central;}
.tree .zone{fill:var(--night-muted);font-size:11px;font-weight:600;letter-spacing:.12em;text-anchor:start;}

/* loop */
.loop{width:100%;max-width:280px;}
.loop .ring{stroke:var(--night-accent);stroke-width:2;}
.loop .arrow{stroke:var(--night-accent);stroke-width:2.2;}
.loop .pill rect{fill:#232a40;stroke:rgba(232,236,245,.45);stroke-width:1;}
.loop text{fill:var(--night-text);font-family:"Manrope",sans-serif;font-size:14px;font-weight:600;text-anchor:middle;dominant-baseline:central;}
.loop .core{font-size:17px;font-weight:800;fill:var(--night-text);}

/* ---------- screen 6: root finder (works without JS) ---------- */
.finder{margin-top:24px;border:0;padding:0;min-width:0;}
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chips label{
  display:inline-flex;align-items:center;min-height:44px;padding:9px 18px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(232,236,245,.4);font-size:16px;line-height:1.3;color:var(--night-text);
  transition:transform .12s ease,background-color .2s ease,color .2s ease,border-color .2s ease;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.chips label:active{transform:scale(.97);}
.answers{margin-top:6px;}
.ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease);}
.ans > div{overflow:hidden;}
.ans .card{margin-top:16px;padding:20px;border-radius:16px;background:rgba(232,236,245,.07);border:1px solid rgba(232,236,245,.18);}
.ans .card p{font-size:17px;}
.ans .card .muted{margin-top:12px;font-size:14px;}
#r1:checked ~ .chips label[for=r1],#r2:checked ~ .chips label[for=r2],#r3:checked ~ .chips label[for=r3],
#r4:checked ~ .chips label[for=r4],#r5:checked ~ .chips label[for=r5]{background:var(--red);border-color:var(--red);color:#fff;font-weight:600;box-shadow:0 6px 18px -8px rgba(198,42,31,.8);}
#r1:focus-visible ~ .chips label[for=r1],#r2:focus-visible ~ .chips label[for=r2],#r3:focus-visible ~ .chips label[for=r3],
#r4:focus-visible ~ .chips label[for=r4],#r5:focus-visible ~ .chips label[for=r5]{outline:2px solid var(--night-text);outline-offset:3px;}
#r1:checked ~ .answers .a1,#r2:checked ~ .answers .a2,#r3:checked ~ .answers .a3,
#r4:checked ~ .answers .a4,#r5:checked ~ .answers .a5{grid-template-rows:1fr;}

/* ---------- screen 8: three steps ---------- */
.steps3{display:grid;gap:14px;margin:26px 0 30px;}
.step{display:flex;gap:16px;padding:20px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);}
.step .n{flex:0 0 auto;font-size:40px;font-weight:800;line-height:1;color:var(--dawn-accent);min-width:28px;}
.step b{display:block;font-size:19px;font-weight:800;margin-bottom:4px;}
.step p{font-size:16.5px;line-height:1.55;}

/* ---------- screen 9: sunrise ---------- */
.sunrise{height:58vh;height:58svh;min-height:300px;display:flex;align-items:flex-end;justify-content:center;padding:0 22px;
  background:linear-gradient(to bottom,var(--dawn) 0%,#9A6347 22%,#D99A66 48%,#F1D2A0 72%,var(--morning) 100%);overflow:hidden;}
.sun{width:100%;max-width:420px;margin-bottom:-2px;}
.sun .draw{stroke:var(--morning-accent);stroke-width:2;}
.s9{padding-top:28px;}
.s9 .huge{margin-top:10px;}
.d90 p{margin-top:12px;}

/* ---------- buttons ---------- */
.buy{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;padding:12px 14px;
  background:var(--green);color:#fff;border-radius:14px;text-decoration:none;
  font-size:17px;font-weight:800;line-height:1.25;text-align:center;text-shadow:0 1px 1px rgba(0,0,0,.18);
  box-shadow:0 8px 22px -8px rgba(37,211,102,.55);transition:background-color .15s ease,transform .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover,.btn:active{background:var(--green-press);}
.btn:active{transform:scale(.985);}
.btn svg{width:22px;height:22px;flex:0 0 auto;fill:#fff;}
.buy .note{font-size:14px;text-align:center;}

/* ---------- screen 10: the book ---------- */
.cover{width:60%;max-width:250px;margin:28px auto 22px;}
.cover img{width:100%;height:auto;border-radius:3px 6px 6px 3px;box-shadow:0 22px 40px -18px rgba(60,40,10,.55),0 4px 10px rgba(0,0,0,.08);}
.stages{display:grid;gap:12px;margin-top:18px;}
.stage{background:#fff;border:1px solid var(--card-border);border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.06);}
.stage-btn{all:unset;box-sizing:border-box;display:flex;gap:14px;align-items:flex-start;width:100%;padding:18px 18px 16px;cursor:pointer;}
.stage-btn:focus-visible{outline:2px solid var(--morning-accent);outline-offset:-2px;border-radius:16px;}
.stage-n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--morning-accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;}
.stage-t{flex:1;}
.stage-t b{display:block;font-size:19px;font-weight:800;line-height:1.3;}
.stage-t span{display:block;margin-top:3px;font-size:15.5px;line-height:1.5;color:var(--morning-muted);}
.plus{flex:0 0 auto;position:relative;width:22px;height:22px;margin-top:6px;transition:transform .3s var(--ease);}
.plus::before,.plus::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:2px;margin-top:-1px;background:var(--morning-text);border-radius:2px;}
.plus::after{transform:rotate(90deg);}
[aria-expanded="true"] .plus{transform:rotate(45deg);}
.panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s var(--ease);}
.panel > div{overflow:hidden;}
.panel.shut{grid-template-rows:0fr;}
.chap-list{list-style:none;padding:0 18px 18px 66px;display:grid;gap:12px;}
.chap-list li{font-size:16px;line-height:1.5;color:var(--morning-muted);}
.chap-list b{display:block;color:var(--morning-text);font-weight:800;font-size:16.5px;}

/* ---------- screen 11: offer ---------- */
.offer{margin-top:4px;padding:28px 22px;background:#fff;border:1px solid var(--card-border);border-top:4px solid var(--morning-accent);border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.06);}
.offer .big{margin-top:0;}
.gets{list-style:none;display:grid;gap:14px;margin-top:20px;}
.gets li{display:flex;gap:12px;font-size:16.5px;line-height:1.5;}
.gets .ic{flex:0 0 auto;font-size:20px;line-height:1.3;}
.gets b{font-weight:800;}
.divider{height:1px;background:var(--card-border);margin:26px 0;}
.price{font-size:40px;font-weight:800;line-height:1;letter-spacing:-.01em;text-align:center;}
.price-sub{text-align:center;margin-top:8px;font-size:17px;font-weight:600;}
.price-sub + .muted{text-align:center;margin-top:4px;font-size:15px;}
.how{list-style:none;counter-reset:h;display:grid;gap:12px;margin-top:14px;}
.how li{counter-increment:h;position:relative;padding-left:40px;font-size:16.5px;line-height:1.5;}
.how li::before{content:counter(h);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--morning-accent);color:#A8650A;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;}
.trust{list-style:none;display:grid;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--card-border);}
.trust li{display:flex;gap:10px;font-size:15.5px;line-height:1.45;}
.honest{margin-top:20px;font-size:14.5px;font-weight:600;}

/* ---------- screen 12 ---------- */
.ask{margin-top:30px;padding:20px;border-radius:16px;background:#fff;border:1px solid var(--card-border);}
.ask p{font-size:16.5px;}
.ask a{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;font-weight:800;color:#0E7A45;text-decoration:underline;text-underline-offset:3px;}
.ask a svg{width:20px;height:20px;fill:#0E7A45;}

/* ---------- screen 13 ---------- */
.yes,.no{list-style:none;display:grid;gap:12px;margin-top:18px;}
.yes li,.no li{position:relative;padding-left:34px;font-size:17px;line-height:1.5;}
.yes li::before,.no li::before{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;}
.yes li::before{content:"\2713";background:#E9F8EF;color:#0E7A45;}
.no li::before{content:"\2715";background:#FBEDE6;color:#B23A1E;}
.no-head{margin-top:40px;}

/* ---------- screen 14: FAQ ---------- */
.faq{margin-top:20px;border-top:1px solid var(--card-border);}
.qa{border-bottom:1px solid var(--card-border);}
.qa h3{margin:0;}
.q{all:unset;box-sizing:border-box;display:flex;gap:14px;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:16px 2px;cursor:pointer;font-size:17px;font-weight:800;line-height:1.4;}
.q:focus-visible{outline:2px solid var(--morning-accent);outline-offset:2px;border-radius:6px;}
.qa .panel p{padding:0 2px 18px;font-size:16.5px;line-height:1.6;color:#3B3630;}
.qa .panel a{color:#A8650A;font-weight:600;}

/* ---------- screen 15 ---------- */
.s15 .med:first-child{color:var(--morning-muted);}

/* ---------- footer ---------- */
.site-foot{background:var(--gold);color:var(--morning-text);padding:46px 22px 120px;border-top:1px solid #E7D3A8;}
.site-foot .in-col{max-width:var(--col);margin:0 auto;}
.site-foot p{font-size:14px;line-height:1.6;color:#4F473D;}
.site-foot p + p{margin-top:12px;}
.site-foot .tag{font-size:15px;font-weight:600;color:var(--morning-text);}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:16px;}
.foot-links a,.site-foot .contact a{display:inline-block;padding:8px 0;font-size:14px;font-weight:600;color:var(--morning-text);}
.site-foot .contact{margin-top:6px;}

/* ---------- sticky bar ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:64px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,245,234,.96);border-top:1px solid var(--card-border);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transform:translateY(110%);transition:transform .35s var(--ease);visibility:hidden;
}
.sticky.show{transform:none;visibility:visible;}
.sticky span{font-size:14.5px;font-weight:800;color:var(--morning-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sticky a{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;white-space:nowrap;min-height:44px;padding:0 16px;border-radius:12px;background:var(--green);color:#fff;font-weight:800;font-size:16px;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.18);}
.sticky a:active{background:var(--green-press);}
.sticky a svg{width:18px;height:18px;fill:#fff;}

/* ---------- reveal (only when JS + motion are on) ---------- */
.anim .r{opacity:0;transform:translateY(16px);}
.anim .r.slide{transform:translateX(-28px);}
.anim .r.rise{transform:translateY(34px);}
.anim .r.in{opacity:1;transform:none;transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s);}
.anim .r.big.in,.anim .r.huge.in{transition-duration:.8s;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

/* =========================================================
   v2.1 motion + graphics
   ========================================================= */
/* stars in the night sky (fade out before sunrise) */
.stars{position:absolute;inset:0;transition:opacity .2s linear;}
.stars i{position:absolute;border-radius:50%;background:#fff;opacity:.2;animation:tw var(--t,3s) ease-in-out var(--w,0s) infinite;}
@keyframes tw{0%,100%{opacity:.12;}50%{opacity:.85;}}
.anim .s1::before{animation:breathe 6s ease-in-out infinite;}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.12);opacity:1;}}

/* words: body lines rise in word by word; big lines light up as you scroll */
.w{display:inline-block;}
.anim .r.words{opacity:1;transform:none;}
.anim .r.words .w{opacity:0;transform:translateY(.6em) rotate(2deg);transform-origin:0 100%;}
.anim .r.words.in .w{opacity:1;transform:none;transition:opacity .45s ease calc(var(--d,0s) + var(--i) * 22ms),transform .6s var(--ease) calc(var(--d,0s) + var(--i) * 22ms);}
.anim .r.words.in.big .w,.anim .r.words.in.huge .w{transition-duration:.7s,.8s;transition-delay:calc(var(--d,0s) + var(--i) * 55ms);}
.anim .r.words.big:not(.in) .w{transform:translateY(.45em) scale(.96);}

/* screen 1: fists slam the table, then "Ab kabhi nahi karunga!" */
.slam{display:block;width:100%;max-width:380px;max-height:36vh;max-height:36svh;margin:0 auto 22px;}
.slam .desk{fill:url(#qf-desk);} .slam .desk-edge{fill:#10162A;} .slam .desk-line{fill:none;stroke:rgba(232,236,245,.22);stroke-width:1.2;}
.slam .shadow{fill:url(#qf-shadow);}
.slam .hb{fill:url(#qf-back);stroke:#5A3826;stroke-width:1;}
.slam .hb-hi{fill:none;stroke:rgba(255,220,190,.25);stroke-width:2;stroke-linecap:round;}
.slam .fg{fill:url(#qf-skin);stroke:#5A3826;stroke-width:1.1;}
.slam .kn{fill:none;stroke:rgba(255,226,200,.55);stroke-width:1.6;stroke-linecap:round;}
.slam .cr{fill:none;stroke:#5E3B28;stroke-width:1.1;stroke-linecap:round;opacity:.8;}
.slam .th{fill:url(#qf-thumb);stroke:#5A3826;stroke-width:1.1;}
.slam .th-cr{fill:none;stroke:#6B4430;stroke-width:1;stroke-linecap:round;}
.slam .nail{fill:#E6BFA3;stroke:#8D5E43;stroke-width:.9;}
.slam .th-hi{fill:none;stroke:rgba(255,230,205,.45);stroke-width:1.6;stroke-linecap:round;}
.slam .tendon{fill:none;stroke:#6E462F;stroke-width:1.4;stroke-linecap:round;opacity:.35;}
.slam .fa{fill:#9A6A4B;stroke:#5A3826;stroke-width:1;}
.slam .sl{fill:url(#qf-sleeve);stroke:#121729;stroke-width:1;}
.slam .sl-hi{fill:none;stroke:rgba(150,170,220,.18);stroke-width:5;stroke-linecap:round;}
.slam .sl-fold{fill:none;stroke:#141A2E;stroke-width:1.6;stroke-linecap:round;}
.slam .burst path,.slam .mad path{fill:none;stroke:var(--night-accent);stroke-width:2.4;stroke-linecap:round;}
.slam .bubble ellipse,.slam circle{fill:#161D33;stroke:var(--night-text);stroke-width:1.8;}
.slam text{fill:var(--night-text);font-family:"Manrope",sans-serif;font-size:15px;font-weight:800;text-anchor:middle;dominant-baseline:central;}
.slam .burst,.slam .mad,.slam .bubble,.slam .dot1,.slam .dot2{transform-box:fill-box;transform-origin:center;}
.slam .bubble{transform-origin:50% 100%;}
.anim .slam .fists{animation:qf-slam 2.2s .25s both;}
@keyframes qf-slam{
  0%{transform:translateY(-46px);opacity:0;}
  10%{transform:translateY(-46px);opacity:1;animation-timing-function:cubic-bezier(.6,0,1,1);}
  20%{transform:translateY(0);animation-timing-function:ease-out;}
  25%{transform:translateY(-3px);}
  33%{transform:translateY(-36px);animation-timing-function:cubic-bezier(.6,0,1,1);}
  44%{transform:translateY(0);animation-timing-function:ease-out;}
  49%{transform:translateY(-2px);}
  56%,100%{transform:translateY(0);opacity:1;}
}
.slam .shadow{transform-box:fill-box;transform-origin:center;}
.anim .slam .shadow{animation:qf-shadow 2.2s .25s both;}
@keyframes qf-shadow{
  0%{opacity:0;transform:scale(.5);}
  10%{opacity:.35;transform:scale(.55);animation-timing-function:cubic-bezier(.6,0,1,1);}
  20%{opacity:1;transform:scale(1);animation-timing-function:ease-out;}
  33%{opacity:.45;transform:scale(.62);animation-timing-function:cubic-bezier(.6,0,1,1);}
  44%,100%{opacity:1;transform:scale(1);}
}
.anim .slam .table{animation:qf-shake 2.2s .25s linear both;}
@keyframes qf-shake{
  0%,19%{transform:none;}21%{transform:translate(-3px,2px);}23%{transform:translate(3px,-1px);}25%{transform:translate(-2px,1px);}27%,43%{transform:none;}
  45%{transform:translate(-4px,2px);}47%{transform:translate(4px,-1px);}49%{transform:translate(-2px,1px);}52%,100%{transform:none;}
}
.anim .slam .burst{animation:qf-burst 2.2s .25s linear both;}
@keyframes qf-burst{
  0%,19%{opacity:0;transform:scale(.6);}21%{opacity:1;transform:scale(1);}31%{opacity:0;transform:scale(1.18);}
  43%{opacity:0;transform:scale(.6);}45%{opacity:1;transform:scale(1);}58%,100%{opacity:0;transform:scale(1.22);}
}
.anim .slam .mad{animation:qf-pop .45s cubic-bezier(.34,1.56,.64,1) .7s both,qf-throb 1.4s ease-in-out 1.2s infinite;}
@keyframes qf-throb{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}
.anim .slam .dot2{animation:qf-pop .35s cubic-bezier(.34,1.56,.64,1) 1.55s both;}
.anim .slam .dot1{animation:qf-pop .35s cubic-bezier(.34,1.56,.64,1) 1.72s both;}
.anim .slam .bubble{animation:qf-pop .6s cubic-bezier(.34,1.56,.64,1) 1.9s both,qf-float 4s ease-in-out 2.6s infinite;}
@keyframes qf-pop{from{opacity:0;transform:scale(.3);}to{opacity:1;transform:scale(1);}}
@keyframes qf-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

/* screen 4: a streak that resets */
.days{display:flex;gap:7px;margin:4px 0 22px;}
.days span{display:flex;flex-direction:column;align-items:center;gap:5px;}
.days b{position:relative;width:34px;height:34px;border-radius:9px;border:1.5px solid rgba(232,236,245,.3);transition:background-color .3s ease,border-color .3s ease,opacity .5s ease;}
.days small{font-size:12px;color:var(--night-muted);}
.days .f b{background:var(--night-accent);border-color:var(--night-accent);}
.days .x b{border-color:var(--night-accent);}
.days .x b::before,.days .x b::after{content:"";position:absolute;left:7px;right:7px;top:50%;height:2px;margin-top:-1px;background:var(--night-accent);transform:rotate(45deg);}
.days .x b::after{transform:rotate(-45deg);}
.anim .days:not(.played) .f b{background:transparent;border-color:rgba(232,236,245,.3);}
.anim .days:not(.played) .x b::before,.anim .days:not(.played) .x b::after{opacity:0;}
.days.reset .f b{background:transparent;border-color:rgba(255,107,94,.45);}
.days.shake{animation:shake .45s ease;}
@keyframes shake{0%,100%{transform:none;}25%{transform:translateX(-6px);}50%{transform:translateX(5px);}75%{transform:translateX(-3px);}}

/* screen 5: the tree sways, sap flows up from the roots */
.tree .canopy{transform-box:view-box;transform-origin:180px 150px;}
.anim .tree.in .canopy{animation:sway 5s ease-in-out 3.2s infinite;}
@keyframes sway{0%,100%{transform:rotate(-1.6deg);}50%{transform:rotate(1.6deg);}}
.tree .flow{fill:none;stroke:var(--night-accent);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:.06 .94;opacity:0;}
.anim .tree.in .flow{opacity:.9;transition:opacity .6s ease 3.2s;animation:sap 2.6s linear calc(3.2s + var(--f,0s)) infinite;}
@keyframes sap{from{stroke-dashoffset:0;}to{stroke-dashoffset:1;}}

/* screen 7: a dot keeps going round the loop */
.loop .orbit{transform-box:view-box;transform-origin:150px 150px;opacity:0;}
.loop .orbit circle{fill:var(--night-accent);}
.loop .orbit .halo{opacity:.25;}
.anim .loop.in .orbit{opacity:1;transition:opacity .4s ease 2.3s;animation:spin 5s linear 2.3s infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* screen 8: numbers pop */
.anim .step .n{transform:scale(.4);opacity:0;}
.anim .step.in .n{transform:none;opacity:1;transition:transform .6s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0s) + .25s),opacity .3s ease calc(var(--d,0s) + .25s);}

/* sunrise: the sun climbs as you scroll, rays turn slowly */
.sun .rise{transition:transform 2.2s var(--ease) .3s;}
.anim .sun .rise{transform:translateY(70px);}
.anim .sun.in .rise{transform:none;}
.sun .rays{transform-box:view-box;transform-origin:200px 200px;}
.anim .sun.in .rays{animation:spin 60s linear infinite;}

/* screen 9: Day 1 -> Day 90, and 90 squares fill up */
.count{font-variant-numeric:tabular-nums;}
.streak{display:grid;grid-template-columns:repeat(18,1fr);gap:5px;max-width:330px;margin:20px auto 6px;}
.streak i{aspect-ratio:1;border-radius:3px;background:var(--morning-accent);}
.anim .streak i{background:#EFE3CC;}
.anim .streak.in i{background:var(--morning-accent);transition:background-color .25s ease calc(.3s + var(--i) * 14ms);}

/* screen 10: the book floats */
.cover{position:relative;}
.cover::before{content:"";position:absolute;inset:8% -14% 4%;background:radial-gradient(closest-side,rgba(232,162,58,.35),rgba(232,162,58,0));z-index:-1;}
.anim .cover.in img{animation:float 5s ease-in-out 1s infinite;}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-9px) rotate(1deg);}}

/* screen 11: price pops */
.anim .price.r{transform:scale(.8);}
.anim .price.r.in{transform:none;transition:opacity .5s ease var(--d,0s),transform .7s cubic-bezier(.34,1.56,.64,1) var(--d,0s);}

/* screen 12: someone is typing */
.typing{display:inline-flex;gap:5px;padding:10px 14px;margin-bottom:12px;background:#E9F8EF;border-radius:16px 16px 16px 4px;}
.typing i{width:7px;height:7px;border-radius:50%;background:#0E7A45;opacity:.5;}
.anim .typing i{animation:dot 1.2s ease-in-out infinite;}
.anim .typing i:nth-child(2){animation-delay:.15s;}
.anim .typing i:nth-child(3){animation-delay:.3s;}
@keyframes dot{0%,60%,100%{transform:none;opacity:.45;}30%{transform:translateY(-5px);opacity:1;}}

/* screen 13: ticks and crosses pop */
.anim .yes li::before,.anim .no li::before{transform:scale(0);}
.anim .yes li.in::before,.anim .no li.in::before{transform:none;transition:transform .5s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0s) + .2s);}

/* screen 15: from today to day 90 */
.road{width:100%;max-width:340px;margin:22px 0 4px;}
.road .draw{stroke:#C9B48C;stroke-width:2;stroke-dasharray:1;}
.road .dot-start{fill:#C9B48C;}
.road .dot-end{fill:var(--morning-accent);}
.road .walker{fill:#1A1A1A;transform:translateX(288px);}
.anim .road .walker{transform:none;}
.anim .road.in .walker{transform:translateX(288px);transition:transform 2s cubic-bezier(.65,0,.35,1) .4s;}
.road text{font-family:"Manrope",sans-serif;font-size:13px;font-weight:700;fill:var(--morning-muted);text-anchor:middle;}

/* ---------- desktop ---------- */
@media(min-width:700px){
  body{font-size:19px;}
  .screen{padding:92px 32px;}
  .big{font-size:40px;}
  .med{font-size:26px;}
  .huge{font-size:72px;}
  .logo{left:32px;top:24px;}
  .btn{font-size:19px;}
  .offer{padding:36px 40px;}
  .sticky{padding-left:max(24px,calc((100% - 640px) / 2));padding-right:max(24px,calc((100% - 640px) / 2));}
}

/* ---------- reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
}