/* Understand Their Needs · The Punch Card (UTN-B, dark) */
@font-face{font-family:'SE';src:url(../assets/se.woff2) format('woff2');font-display:block}
:root{
  --navy:#132447;--plum:#3B1838;--cream:#F1E6CC;--red:#9E2414;--yellow:#F5F81C;--pink:#F7A8DC;--ink:#0B0B0B;
  --green:#1E5A34;--brown:#5A2A16;--pill:#E60012;
  --cream-soft:#D8CCB0;
  --serif:'Fraunces',Georgia,serif;--pop:'Archivo Black','Arial Black',sans-serif;--body:'Figtree',system-ui,sans-serif;
  --g:80px;--navh:72px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html,body{overflow-x:clip}
body{margin:0;background:var(--navy);color:var(--cream);font-family:var(--body);font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--g)}
.sec{position:relative;overflow:hidden}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--navh);z-index:50;background:var(--navy);color:var(--cream);transition:background-color .45s var(--ease),color .45s var(--ease)}
.nav-in{height:100%;max-width:1440px;margin:0 auto;padding:0 var(--g);display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;color:currentColor}
.nav-logo .logo{width:130px;height:auto}
.nav-chip{font:600 14px/1 var(--body);letter-spacing:.01em;border:1.5px solid currentColor;border-radius:999px;padding:9px 16px}

/* ---------- type ---------- */
.h1{font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 144;font-size:clamp(46px,7.2vw,104px);line-height:.98;letter-spacing:-.02em;margin:0;color:var(--cream)}
.h1 .rise{display:block}
.h1 em{display:block;font-style:italic;font-weight:400;font-size:72px;line-height:1.02;color:var(--pink);margin-top:14px;letter-spacing:-.01em}
.h2{font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 144;font-size:80px;line-height:1;letter-spacing:-.02em;margin:0}
.h2 em{display:block;font-style:italic;font-weight:400;letter-spacing:-.01em}
.sub{font-size:19px;line-height:1.5;max-width:520px;margin:28px 0 0}
.facts{font:500 15px/1.4 var(--body);margin:14px 0 0;color:var(--cream-soft)}

/* masked rises (transform only) */
.rise .w{display:inline-block;overflow:hidden;padding-block:.16em;margin-block:-.16em;padding-inline:.04em;margin-inline:-.04em;vertical-align:top}
.rise .w>span{display:inline-block;transition:transform .7s var(--ease);transition-delay:calc(var(--i)*55ms + var(--d,0ms))}
html.js .rise:not(.in) .w>span{transform:translateY(118%)}
.rise-line{overflow:hidden;padding-block:.2em}
.sub.rise-line{margin-top:22px}
.rise-line>.rl{display:block;transition:transform .8s var(--ease) .15s}
html.js .rise-line:not(.in)>.rl{transform:translateY(110%)}

/* ---------- pill (shared Learoy layer) ---------- */
.pill{display:inline-flex;align-items:center;height:64px;padding:0 30px 0 34px;border-radius:999px;background:var(--pill);color:#fff;text-decoration:none;font:600 18px/1 'Inter Tight',system-ui,sans-serif;overflow:hidden;position:relative;transition:transform .35s var(--ease)}
.pill-in{display:inline-flex;align-items:center;gap:14px;position:relative}
.pill .arr{width:22px;height:22px;transition:transform .45s var(--ease)}
.pill:hover{transform:translateY(-2px)}
.pill:hover .arr{transform:translateX(5px)}
.pill:active{transform:scale(.96)}
.pill:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.pill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-130%);pointer-events:none}
.pill.glint::after{animation:glint 1.1s var(--ease)}
@keyframes glint{to{transform:translateX(130%)}}

/* ---------- waves (stippled scallop) ---------- */
.wave{position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;z-index:2}
.wave svg{position:absolute;left:0;bottom:0;width:100%;height:100%;overflow:visible}
.wave[data-hang]{bottom:-22px;height:142px;z-index:4}

/* ---------- punch card ---------- */
.pcard{position:relative;width:26em;height:16.5em;background:var(--cream);border-radius:1.4em;box-shadow:.6em .6em 0 var(--ink);padding:1.25em 1.4em 1.1em;color:var(--red);display:flex;flex-direction:column;justify-content:space-between}
.pc-h{font:400 .9em/1 var(--pop);letter-spacing:.02em;margin:0;color:var(--red)}
.pc-grid{display:grid;grid-template-columns:repeat(5,3.6em);column-gap:1.3em;row-gap:.95em}
.slot{position:relative;width:3.6em;height:3.6em;border-radius:50%;border:.1em dashed rgba(158,36,20,.55)}
.pc-name{display:flex;align-items:flex-end;gap:.5em;font:600 .6em/1 var(--body);letter-spacing:.14em;color:var(--red)}
.pc-name i{flex:1;border-bottom:.12em dotted rgba(158,36,20,.6);transform:translateY(-.2em)}
.seal{position:absolute;inset:-.08em;border-radius:50%;border:.16em solid var(--red);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--red);transform:rotate(var(--r,0deg)) scale(0);background:radial-gradient(circle,transparent 58%,rgba(158,36,20,.1) 59%,rgba(158,36,20,.1) 63%,transparent 64%)}
.seal::before{content:"";position:absolute;inset:.22em;border-radius:50%;border:.06em solid var(--red)}
.seal b{font:400 .78em/.92 var(--pop);letter-spacing:-.02em;text-align:center}
.seal small{font:600 .46em/1 var(--body);letter-spacing:.14em;margin-top:.28em}
.seal.on{transform:rotate(var(--r,0deg)) scale(1)}
.seal.back{border-color:var(--green);color:var(--green);background:none}
.seal.back::before{border-color:var(--green)}
.splash{position:absolute;width:1.6em;height:1.6em;left:50%;top:50%;margin:-.8em 0 0 0;pointer-events:none;transform:rotate(var(--a)) translateX(1.35em);transform-origin:0 50%}
.splash svg{width:100%;height:100%;fill:var(--red);transform:scale(0);transform-origin:0 50%}
.splash.g svg{fill:var(--green)}
.hole{position:absolute;inset:-.1em;border-radius:50%;background:radial-gradient(circle at 40% 35%,#1c3263,var(--navy) 60%);box-shadow:inset .18em .22em 0 rgba(0,0,0,.55);clip-path:circle(0% at 50% 50%)}
.hole.on{clip-path:circle(50% at 50% 50%)}
.popring{position:absolute;inset:-.8em;width:auto;height:auto;max-width:none;overflow:visible;pointer-events:none}
.popring circle{fill:none;stroke-linecap:round}
.popring .o{stroke:var(--ink);stroke-width:.95em}
.popring .y{stroke:var(--yellow);stroke-width:.5em}
.tick{position:absolute;inset:-.12em;border-radius:50%;background:var(--yellow);border:.24em solid var(--ink);display:grid;place-items:center;transform:scale(0)}
.tick svg{width:62%;height:62%}
.tick.on{transform:scale(1)}
.octseal{position:absolute;right:-1.6em;top:-1.9em;width:5em;height:5em;border-radius:50%;background:var(--yellow);border:.35em solid var(--ink);display:grid;place-items:center;font:400 .95em/1 var(--pop);color:var(--ink);transform:translateY(-14em) rotate(-30deg);z-index:3}
.octseal span{transform:rotate(-12deg);display:block;white-space:nowrap;font-size:.92em}
.octseal::before{content:"";position:absolute;width:.9em;height:.9em;border-radius:50%;background:var(--red);border:.2em solid var(--ink);top:.35em;left:50%;margin-left:-.45em}
.octseal.on{transform:translateY(0) rotate(12deg)}

/* stamp, side view: base sits on the slot */
.stamp{position:absolute;left:0;top:0;width:4.6em;height:5.6em;margin:-4.7em 0 0 -2.3em;z-index:5;pointer-events:none}
.st-lift{position:absolute;inset:0;transform-origin:50% 100%}
.st-lift svg{width:100%;height:100%;overflow:visible}
.st-shadow{position:absolute;left:8%;right:8%;bottom:-.25em;height:.7em;border-radius:50%;background:rgba(0,0,0,.42);transform-origin:50% 50%}
/* ---------- 1 hero ---------- */
.s-hero{background:var(--navy);min-height:max(900px,100svh);padding:150px 0 180px;z-index:3;overflow:visible}
.hero-grid{display:grid;grid-template-columns:1fr 520px;gap:40px;align-items:start}
.hero-copy .sub{margin-top:30px;max-width:500px;color:var(--cream)}
.cta-row{margin-top:40px}
.hero-obj{padding-top:150px;font-size:20px}
.card-stage{position:relative;width:26em;height:16.5em}
.s-hero .pcard{z-index:1}

/* ---------- 2 again ---------- */
.s-again{background:var(--plum);padding:150px 0 190px}
.again-grid{display:grid;grid-template-columns:minmax(0,640px) 1fr;gap:72px;align-items:center}
.ht{margin:0;position:relative}
.ht img{width:100%;height:auto;animation:htzoom 22s ease-in-out infinite alternate;transform-origin:52% 40%}
@keyframes htzoom{from{transform:scale(1) rotate(0)}to{transform:scale(1.04) rotate(.5deg)}}
.strips{display:flex;flex-direction:column;align-items:flex-start;gap:16px;overflow:hidden;padding:12px 24px 24px 12px;margin:-12px -24px -24px -12px}
.strip{display:inline-block;transform:rotate(var(--t,-1deg))}
.strip:nth-child(2){--t:.8deg;margin-left:28px}
.strip:nth-child(3){--t:-1.4deg;margin-left:8px}
.strip>span{display:block;background:var(--cream);color:var(--navy);font:600 64px/1 var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.02em;padding:22px 30px 26px;box-shadow:8px 10px 0 var(--ink)}
.strip:nth-child(3)>span{color:var(--red)}
html.js .strip:not(.in){transform:translateY(240%) rotate(var(--t,-1deg))}
.strip{transition:transform .9s var(--ease)}
.again-copy .line{font-size:22px;line-height:1.45;max-width:440px;margin:44px 0 0;color:var(--cream)}

/* ---------- 3 cost ---------- */
.s-cost{background:var(--yellow);color:var(--ink);padding:150px 0 200px}
.s-cost .h2{color:var(--ink)}
.cost-grid{display:grid;grid-template-columns:minmax(0,480px) 1fr;gap:48px;align-items:center}
.fan-wrap{position:relative;height:560px}
.fan{position:absolute;inset:0}
.fan .pcard{position:absolute;left:50%;top:50%;font-size:16px;margin:-8.25em 0 0 -13em;transform-origin:50% 150%;box-shadow:.35em .45em 0 var(--ink);border:3px solid var(--ink)}
.burst{position:absolute;left:0;top:0;width:440px;height:440px;margin:-220px 0 0 -220px;display:grid;place-items:center;z-index:9;transform:translate(var(--bx,0),var(--by,0)) scale(var(--bs,.12)) rotate(var(--br,-40deg))}
.burst svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.burst path{fill:var(--navy);stroke:var(--ink);stroke-width:7;stroke-linejoin:round}
.burst-t{position:relative;font:italic 400 54px/1 var(--serif);color:var(--pink);overflow:hidden;padding:.12em .1em;text-align:center;max-width:300px}
.burst-t span{display:block;transition:transform .7s var(--ease)}
html.js .burst-t:not(.in) span{transform:translateY(120%)}

/* ---------- 4 why ---------- */
.s-why{background:var(--cream);color:var(--red);padding:150px 0 200px}
.why-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:64px;align-items:end}
.why-h{font-size:92px;color:var(--red)}
.why-l2{display:flex;align-items:center;flex-wrap:wrap;gap:0 .18em;margin-top:.08em}
.why-h em{display:inline;font-style:italic}
.coin-wrap{display:inline-block;width:1.75em;height:1.75em;perspective:900px;position:relative;flex:none;margin-left:.12em}
.coin{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--ry,0deg)) scale(var(--cs,1))}
.coin>span{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
.coin-f{border:.07em solid var(--red);color:var(--red);background:var(--cream)}
.coin-f::before{content:"";position:absolute;inset:.1em;border-radius:50%;border:.025em solid var(--red)}
.coin-f b{font:400 .46em/1 var(--pop)}
.coin-f small{font:600 .2em/1 var(--body);letter-spacing:.2em;margin-top:.15em}
.coin-b{background:var(--yellow);border:.075em solid var(--ink);color:var(--ink);transform:rotateY(180deg)}
.coin-b em{font:italic 400 .62em/1 var(--serif);letter-spacing:-.02em;transform:translateY(-.06em)}
.why-side .sub{color:var(--ink);margin:0 0 40px}
.slip{margin:0;display:inline-block;filter:drop-shadow(6px 9px 0 rgba(11,11,11,.85));transform:rotate(-2deg)}
.paper-p{display:block;background:linear-gradient(118deg,rgba(255,255,255,.35),rgba(240,234,226,.25)),#F8F5F0;color:#1f1c19;font:30px/38px 'SE','Courier New',monospace;padding:22px 30px;white-space:nowrap}

/* ---------- 5 shift ---------- */
.s-shift{background:var(--navy);padding:150px 0 200px}
.shift-grid{display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:64px;align-items:center}
.s-shift .h2 em{color:var(--pink)}
.tlink{display:inline-block;margin-top:30px;font:600 19px/1 var(--body);color:var(--yellow);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:6px}
.vcard{position:relative;background:var(--cream);border-radius:28px;box-shadow:12px 12px 0 var(--ink);padding:44px 40px;font-size:20px}
.vc-h{display:none}
.vc-row{display:flex;justify-content:space-between;gap:16px}
.vslot{position:relative;width:8em;height:8em;border-radius:50%;border:.1em dashed rgba(158,36,20,.55);flex:none}
.vseal{position:absolute;inset:-.1em;border-radius:50%;border:.22em solid var(--red);color:var(--red);display:grid;place-items:center;text-align:center;transform:rotate(var(--r,0deg)) scale(0)}
.vseal::before{content:"";position:absolute;inset:.35em;border-radius:50%;border:.07em solid var(--red)}
.vseal b{font:400 .95em/1.08 var(--pop);letter-spacing:-.005em}
.vseal.on{transform:rotate(var(--r,0deg)) scale(1)}


/* ---------- 6 week ---------- */
.s-week{background:var(--pink);color:var(--ink);padding:150px 0 290px}
.s-week .h2{color:var(--ink)}
.s-week .h2 em{color:var(--plum)}
.week-grid{display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:64px;align-items:center}
.week-obj{font-size:21px;display:flex;justify-content:flex-end}
.s-band{background:var(--navy);padding:150px 0 120px}
.band-in{display:flex;flex-direction:column;align-items:center;text-align:center}

/* ---------- 7 who ---------- */
.s-who{background:var(--navy);padding:120px 0 220px}
.s-who .h2 em{color:var(--yellow)}
.who{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.wc{position:relative;min-height:380px;border-radius:24px;padding:36px 30px;display:flex;flex-direction:column;gap:18px;box-shadow:10px 10px 0 var(--ink);color:var(--cream);transform:rotate(var(--t,0deg))}
.wc b{font:400 21px/1.1 var(--pop);letter-spacing:.01em;color:var(--yellow)}
.wc span{font:600 32px/1.12 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.01em}
.c-red{background:var(--red);--t:-1.2deg}.c-plum{background:var(--plum);--t:.8deg}.c-green{background:var(--green);--t:-.6deg}.c-brown{background:var(--brown);--t:1.1deg}
html.js .who:not(.in) .wc{transform:translateY(70vh) rotate(calc(var(--t) * 6))}
.who .wc{transition:transform .9s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i)*110ms)}
.you-seal{position:absolute;right:26px;bottom:26px;width:96px;height:96px;border-radius:50%;background:var(--yellow);border:7px solid var(--ink);display:grid;place-items:center;transform:scale(0) rotate(-40deg);transform-origin:80% 80%;transition:transform .7s cubic-bezier(.34,1.56,.64,1) .9s}
.you-seal svg{width:66%;height:66%}
.who.in .you-seal{transform:scale(1) rotate(8deg)}
.you-seal svg{animation:wob 3.6s ease-in-out 2s infinite}
@keyframes wob{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}
.star.on{animation:twk 4s ease-in-out 1s infinite}
@keyframes twk{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg) scale(1.06)}}

/* ---------- 8 now ---------- */
.s-now{background:var(--plum);padding:150px 0 210px}
.now-grid{display:grid;grid-template-columns:440px 1fr;gap:96px;align-items:center}
.s-now .h2 em{color:var(--pink)}
.empty{position:relative;width:360px;height:440px;margin:0 auto;font-size:30px}
.ring{position:absolute;left:0;top:20px;width:360px;height:360px;overflow:visible;animation:spin 40s linear infinite}
.ring circle{fill:none;stroke:var(--cream);stroke-width:3;stroke-dasharray:10 9}
@keyframes spin{to{transform:rotate(360deg)}}
.oct{position:absolute;left:0;right:0;top:394px;text-align:center;font:400 40px/1 var(--pop);color:var(--yellow);letter-spacing:.06em}
.stamp-hover{left:180px;top:200px;font-size:44px}
.stamp-hover .st-lift{animation:hover 3.4s ease-in-out infinite}
.stamp-hover .st-shadow{animation:hshadow 3.4s ease-in-out infinite}
@keyframes hover{0%,100%{transform:translateY(-70px) rotate(-5deg)}50%{transform:translateY(-22px) rotate(2deg)}}
@keyframes hshadow{0%,100%{transform:scale(.55)}50%{transform:scale(.85)}}

/* ---------- 9 ask ---------- */
.s-ask{background:var(--navy);padding:140px 0 110px}
.ask-h{font-size:96px;color:var(--yellow)}
.ask-h em{color:var(--cream)}
.proof{margin:72px 0 0;border-top:1px solid rgba(241,230,204,.35)}
.pr{display:flex;align-items:baseline;gap:32px;padding:18px 0 14px;border-bottom:1px solid rgba(241,230,204,.35)}
.num{font:400 140px/1 var(--pop);color:var(--yellow);letter-spacing:-.03em;display:inline-flex;align-items:baseline;min-width:5.6ch}
.star{display:inline-block;font-size:.7em;margin-left:.08em;transform-origin:50% 60%}
html.js .pr .star:not(.on){transform:translateY(-.5em) rotate(-60deg) scale(0)}
.star{transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.lab{font:600 24px/1.2 var(--body);color:var(--cream)}
.most{font:italic 400 30px/1.3 var(--serif);margin:34px 0 0;color:var(--cream)}
.s-ask .cta-row{margin-top:48px}
.inside{margin-top:40px;max-width:640px}
.inside summary{cursor:pointer;font:600 18px/1 var(--body);list-style:none;display:inline-flex;gap:8px;align-items:center;color:var(--cream);border-bottom:2px solid var(--cream-soft);padding-bottom:6px}
.inside summary::-webkit-details-marker{display:none}
.inside .tri{display:inline-block;transition:transform .3s var(--ease)}
.inside[open] .tri{transform:rotate(90deg)}
.inside p{margin:14px 0 0;color:var(--cream-soft);font-size:17px}
.biz{margin:36px 0 0;font-size:17px;color:var(--cream-soft);max-width:640px}
.biz b{color:var(--cream)}

/* ---------- footer ---------- */
.foot{background:var(--navy);color:var(--cream);padding:84px 0 130px;border-top:1px solid rgba(241,230,204,.18)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:28px 56px}
.foot-wm{display:flex;color:var(--cream)}
.foot-wm .wms{height:120px;width:auto}
.paper-strips{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0}
.pstrip{display:inline-block;filter:drop-shadow(5px 10px 22px rgba(0,0,0,.45));will-change:transform}
.pstrip:nth-child(odd){--tilt:-1deg}.pstrip:nth-child(even){--tilt:.7deg;margin-left:18px}
.pstrip{transform:rotate(var(--tilt))}
.paper{display:block;background:linear-gradient(118deg,rgba(255,255,255,.35),rgba(240,234,226,.25)),#F8F5F0;color:#1f1c19;font-family:'SE','Courier New',monospace;font-size:34px;line-height:40px;padding:22px 30px;white-space:nowrap}
.fine{font-size:13px;color:var(--cream-soft);flex-basis:100%}

/* ---------- sticky (phone) ---------- */
.sticky{display:none}

/* ---------- tablet ---------- */
@media (max-width:1180px){
  :root{--g:48px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .h1{font-size:84px}
  .again-grid,.cost-grid,.why-grid,.shift-grid,.week-grid,.now-grid{grid-template-columns:1fr}
  .who{grid-template-columns:repeat(2,1fr)}
  .week-obj{justify-content:flex-start}
}

/* ---------- phone ---------- */
@media (max-width:640px){
  :root{--g:16px;--navh:64px}
  body{font-size:17px}
  .nav-logo .logo{width:102px}
  .nav-chip{display:none}
  .h1{font-size:46px;line-height:1}
  .h1 em{font-size:34px;margin-top:10px}
  .h2,.why-h{font-size:44px}
  .sub{font-size:17px;margin-top:20px}
  .s-hero{min-height:844px;padding:96px 0 150px}
  .hero-copy{display:contents}
  .hero-grid{display:flex;flex-direction:column;gap:0}
  .hero-copy .sub{order:1;margin-top:18px;font-size:17px}
  .hero-obj{order:2;padding-top:88px;font-size:13.077px;display:flex;justify-content:center}
  .hero-copy .cta-row{order:3;margin-top:60px}
  .cta-row .pill{width:100%;justify-content:center}
  .wave{height:72px}
  .wave[data-hang]{height:86px;bottom:-14px}
  .s-again{padding:96px 0 130px}
  .again-grid{gap:28px}
  .strip>span{font-size:38px;padding:22px 30px}
  .again-copy .line{font-size:19px;margin-top:30px}
  .s-cost,.s-why,.s-shift,.s-now{padding:96px 0 140px}
  .fan-wrap{height:380px;margin-top:10px}
  .fan .pcard{font-size:10px}
  .burst{width:300px;height:300px;margin:-150px 0 0 -150px}
  .burst-t{font-size:40px;max-width:220px}
  .coin-wrap{width:2.3em;height:2.3em}
  .why-grid{gap:36px}
  .paper-p{font-size:22px;line-height:28px;padding:22px 30px}
  .vcard{padding:28px 16px;font-size:12.6px;border-radius:22px;margin-top:40px}
  .vc-row{gap:8px}
  .s-week{padding:96px 0 200px}
  .week-obj{font-size:13.077px;justify-content:center;margin-top:70px}
  .s-band{padding:130px 0 40px}
  .band-in{align-items:stretch}
  .band-in .pill{justify-content:center}
  .s-who{padding:80px 0 150px}
  .who{grid-template-columns:1fr;gap:18px;margin-top:40px}
  .wc{min-height:0;padding:26px 30px 28px;gap:10px}
  .wc span{font-size:26px;padding-right:0}
  .wc-you span{padding-right:90px}
  .you-seal{width:72px;height:72px;border-width:6px;right:22px;bottom:50%;margin-bottom:-36px}
  .now-grid{gap:44px}
  .empty{width:240px;height:300px;font-size:22px}
  .ring{width:240px;height:240px;top:10px}
  .oct{top:266px;font-size:30px}
  .stamp-hover{left:120px;top:130px;font-size:30px}
  .s-ask{padding:96px 0 90px}
  .ask-h{font-size:48px}
  .proof{margin-top:44px}
  .pr{flex-direction:column;gap:4px;padding:16px 0 14px}
  .num{font-size:72px}
  .lab{font-size:18px}
  .most{font-size:24px}
  .foot{padding:64px 0 140px}
  .foot-wm .wms{height:84px}
  .paper{font-size:24px;line-height:28px;padding:22px 30px}

  .sticky{display:flex;position:fixed;z-index:60;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:10px;background:var(--cream);border:2px solid var(--ink);box-shadow:0 10px 30px -10px rgba(0,0,0,.5);border-radius:999px;padding:6px 6px 6px 18px;transform:translateY(160%);transition:transform .5s var(--ease)}
  .sticky.on{transform:translateY(0)}
  .sticky-t{color:var(--ink);font-size:12px;font-weight:600;line-height:1.3}
  .pill-s{height:52px;font-size:15px;padding:0 18px;white-space:nowrap;flex:none}
  .sticky-t{white-space:nowrap}
}
@media (max-width:380px){
  .h1{font-size:42px}
}

/* ---------- reduced motion: landed ---------- */
@media (prefers-reduced-motion:reduce){
  html.js .rise:not(.in) .w>span,html.js .rise-line:not(.in)>.rl,html.js .strip:not(.in),html.js .burst-t:not(.in) span,html.js .who:not(.in) .wc,html.js .pr .star:not(.on){transform:none}
  .ring,.stamp-hover .st-lift,.stamp-hover .st-shadow,.ht img,.you-seal svg,.star.on{animation:none}
  .you-seal{transform:scale(1) rotate(8deg)}
  *{transition:none!important}
}

.credits{flex-basis:100%;margin:8px 0 0;font-size:15px;line-height:1.5;display:flex;flex-direction:column}
.credits span b{font-weight:600}