/* Lagbot · Variation C: Bold poster
   One pass. Each section is its own colour block (cream, dark, white, orange).
   Tokens: 4pt spacing scale, 3 radii, 3 hard shadows, no !important. */
@font-face{font-family:Supreme;src:url(fonts/Supreme-Bold.ttf);font-weight:700;font-display:swap}
@font-face{font-family:Supreme;src:url(fonts/Supreme-Extrabold.ttf);font-weight:800;font-display:swap}

:root{
  /* colour */
  --white:#FFFFFF;--cream:#F5EDD8;--scene:#F6EFE5;--paper:#FBF6EC;--peach:#FFF4EB;--shelf:#F4F2F0;
  --ink:#0A0A0A;--muted:#525252;--subtle:#6E6A66;--line:#E2DDD6;
  --brand:#E55020;--brandText:#B8410F;--brandDeep:#A53D0F;--dark:#221F1C;--slab:#2A211A;
  --textD:#FAFAF8;--mutedD:#B5B0AA;--lineD:#45413D;
  --ok:#1F7836;--okS:#3FA34F;--okT:#E1F0E5;--bad:#C42718;
  /* space: 4pt scale */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  /* radii */
  --r1:8px;--r2:16px;--r3:28px;
  /* hard shadows */
  --sh1:3px 3px 0 var(--slab);--sh2:6px 6px 0 var(--slab);--sh3:10px 10px 0 var(--slab);
  --b:1.75px solid var(--slab);--b2:2.5px solid var(--slab);
  --wrap:1248px;--nav:72px;
  --pad:clamp(32px,6vh,64px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav)}
body{background:var(--cream);color:var(--ink);font:500 17px/1.6 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:Supreme,Manrope,sans-serif;font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(44px,min(5.6vw,9.4vh),84px);line-height:.96}
h3{font-size:20px;line-height:1.2;letter-spacing:-.015em}
.sub{font-size:18px;line-height:1.55;color:var(--muted)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s4);position:relative;z-index:1;width:100%}
@media (min-width:1281px){.wrap{padding:0}}
section{position:relative}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px}

/* Ben-Day ground: always under the content */
.dots{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(circle,rgba(10,10,10,.12) 1.7px,transparent 2.1px);background-size:28px 28px}
.dots.on-orange{background-image:radial-gradient(circle,rgba(34,20,10,.2) 1.7px,transparent 2.1px)}

.kicker{display:flex;align-items:center;gap:var(--s2);font:800 13px/1 Manrope;letter-spacing:.14em;text-transform:uppercase;color:var(--brandText)}
.kicker span{display:inline-grid;place-items:center;height:24px;padding:0 var(--s2);border-radius:var(--r1);background:var(--dark);color:var(--textD);letter-spacing:.04em}

.btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 var(--s5);border-radius:var(--r2);font:800 18px Supreme;letter-spacing:-.01em;text-decoration:none;border:var(--b);cursor:pointer;white-space:nowrap;background:var(--brand);color:#FFF8F4;box-shadow:var(--sh1);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--slab)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--slab)}
.wait{display:flex;gap:var(--s3);flex-wrap:wrap}
.wait input{flex:1 1 200px;min-width:0;height:56px;border-radius:var(--r2);border:var(--b);background:var(--white);padding:0 var(--s4);font:600 17px Manrope;outline:none}
.wait input:focus{box-shadow:inset 0 0 0 2px var(--brand)}
/* the ink-outlined form block */
.wait.block{padding:var(--s3);background:var(--white);border:var(--b2);border-radius:var(--r3);box-shadow:var(--sh3)}
.wait.block input{border-color:rgba(42,33,26,.35)}
.is-bad{box-shadow:inset 0 0 0 2px var(--bad)}
.msg{flex-basis:100%;font:700 14px Manrope;color:var(--ok);padding:0 var(--s1)}
.msg.err{color:var(--bad)}
.msg:empty{display:none}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav);background:#F5EDD8;border-bottom:1.75px solid var(--slab)}
.nav .wrap{height:100%;display:flex;align-items:center;gap:var(--s6)}
.brand{display:flex;align-items:center;gap:var(--s2);text-decoration:none;font:800 22px Supreme;letter-spacing:-.025em}
.brand img{height:24px;width:auto}
.links{display:flex;gap:var(--s5)}
.links a{text-decoration:none;font:700 15px Manrope;color:var(--muted)}
.links a:hover{color:var(--ink)}
.nav-cta{margin-left:auto;height:44px;font-size:16px}

/* a section = one screen below the nav */
main{padding-top:var(--nav)}
.gl{min-height:calc(100svh - var(--nav));display:flex;flex-direction:column;justify-content:center;padding:var(--pad) 0;overflow:hidden}
.gl .wrap>*{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.gl:not(.seen) .wrap>*{opacity:0;transform:translateY(32px)}
.gl.seen .wrap>*:nth-child(2){transition-delay:.08s}.gl.seen .wrap>*:nth-child(3){transition-delay:.16s}

/* ───────── 1 · HERO (cream) ───────── */
.hero{background:var(--cream)}
.hero-copy{position:relative;z-index:2;max-width:600px;display:flex;flex-direction:column;align-items:flex-start}
.tag{display:inline-block;padding:var(--s2) var(--s3);border-radius:var(--r1);background:var(--dark);color:var(--textD);font:800 13px/1 Manrope;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--brand)}
.hero h1{margin-top:var(--s5);font-size:clamp(56px,min(7.4vw,11.8vh),116px);line-height:.92;letter-spacing:-.045em}
.roll{display:inline-block;position:relative;height:1.18em;vertical-align:-.2em;overflow:hidden;color:var(--brand);text-align:left;width:4.7em;line-height:1}
.roll-w{display:block;white-space:nowrap;line-height:1.18em;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.roll-w.out{transform:translateY(-105%);opacity:0}
.roll-w.in{position:absolute;left:0;top:0;transform:translateY(105%);opacity:0}
.lede{margin-top:var(--s5);font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:#3B3632;max-width:500px}
.hero .wait{margin-top:var(--s6);width:100%;max-width:540px}
.platform{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s4);font:600 13px/1.4 Manrope;color:var(--subtle)}
.platform svg{width:18px;height:18px;flex:none}
.platform svg path{fill:#25D366;stroke:var(--slab);stroke-width:1.2}
.platform svg path.t{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* the living mark minds its shop, cropped into the corner */
.hero-shop{position:absolute;z-index:1;width:clamp(560px,57vw,860px);aspect-ratio:1400/802;right:calc(clamp(560px,57vw,860px) * -.07);bottom:calc(clamp(560px,57vw,860px) * -.075)}
.hero-shop .stall{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.stall.counter{clip-path:inset(73.4% 0 0 0);z-index:3}
.nova-mark{position:absolute;z-index:2;left:25.5%;top:29%;width:49%;aspect-ratio:1633/1053;transform-origin:50% 90%;animation:peek 6s ease-in-out infinite}
.nova-mark img,.nova-mark svg{position:absolute;inset:0;width:100%;height:100%}
.nova-mark .lids circle{fill:#FBF5E9}
.nova-mark .eye circle{fill:#231E1B}
.nova-mark .eye .glint{fill:#FBF5E9}
.nova-mark .eye{transform-box:fill-box;transform-origin:center;transition:transform .14s cubic-bezier(.3,.7,.4,1)}
.nova-mark .eyes{transition:transform .35s var(--ease)}
.nova-mark.tilt-l{animation:peek 6s ease-in-out infinite,tiltl 1.1s var(--ease)}
.nova-mark.tilt-r{animation:peek 6s ease-in-out infinite,tiltr 1.1s var(--ease)}
@keyframes peek{50%{transform:translateY(-3%)}}
@keyframes tiltl{40%{rotate:-6deg}}
@keyframes tiltr{40%{rotate:6deg}}

.next{position:absolute;z-index:3;left:max(16px,calc(50% - 624px));bottom:var(--s5);display:flex;align-items:center;gap:var(--s3);padding:var(--s1) var(--s4) var(--s1) var(--s1);border-radius:999px;background:var(--white);border:var(--b);box-shadow:var(--sh1);font:800 12px Manrope;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.next:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--slab)}
.next i{width:32px;height:32px;border-radius:50%;background:var(--brand);display:grid;place-items:center;border:1.5px solid var(--slab)}
.next i svg{width:18px;height:18px;fill:none;stroke:#FFF8F4;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(3px)}}
@media (max-height:760px){.next{display:none}}

/* ───────── 2 · WHAT NOVA DOES (dark; styles in parts/glance) ───────── */
.g2{padding:0;overflow:visible}

/* ───────── 3 · ONE SALE (white) ───────── */
.sale{background:var(--white);border-top:var(--b)}
.sale-in{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:var(--s7);align-items:start;--tile:min(150px,15vh);--stage:min(440px,calc(100svh - var(--nav) - 2 * var(--pad) - var(--tile) - 72px))}
.sale-head{display:flex;flex-direction:column;gap:var(--s5);padding-top:var(--s2)}
.sale-head h2{font-size:clamp(44px,min(5vw,8.6vh),76px)}
.sale-head .sub{max-width:300px}
.s-ctl{display:flex;align-items:center;gap:var(--s3)}
.pause{display:inline-flex;align-items:center;gap:var(--s2);height:44px;padding:0 var(--s4) 0 var(--s3);border-radius:var(--r2);border:var(--b);background:var(--white);box-shadow:var(--sh1);font:800 16px Supreme;cursor:pointer}
.pause:active{transform:translate(2px,2px);box-shadow:none}
.pause .ic{width:14px;height:14px;position:relative}
.pause .ic::before,.pause .ic::after{content:"";position:absolute;top:0;bottom:0;width:4.5px;border-radius:1px;background:var(--ink)}
.pause .ic::before{left:1px}.pause .ic::after{right:1px}
.pause[aria-pressed="true"] .ic::before{left:2px;width:0;border-radius:0;background:none;border-left:12px solid var(--ink);border-top:7px solid transparent;border-bottom:7px solid transparent}
.pause[aria-pressed="true"] .ic::after{display:none}
.s-count{font:800 13px Manrope;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle)}
.sale-main{display:flex;flex-direction:column;gap:var(--s5);min-width:0}
.strip{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3)}
.strip li{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.tile{display:block;width:100%;height:var(--tile);padding:0;border:var(--b);border-radius:var(--r2);background:var(--scene);overflow:hidden;cursor:pointer;box-shadow:var(--sh1);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.tile img{width:100%;height:100%;object-fit:contain}
.tile:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--slab)}
.strip li.on .tile{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--brand);border-color:var(--slab)}
.strip li.done.on .tile{box-shadow:5px 5px 0 var(--okS)}
.bar{display:block;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--brand)}
.strip li.past .bar i{width:100%;background:var(--slab)}
.strip li.done .bar i{background:var(--okS)}
.t-lab{display:flex;align-items:center;gap:var(--s2);font:800 15px Supreme;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.t-lab b{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;border-radius:6px;background:var(--shelf);color:var(--ink);font:800 12px Supreme;border:1.5px solid var(--slab)}
.strip li.on .t-lab{color:var(--ink)}
.strip li.on .t-lab b{background:var(--brand);color:#fff}
.strip li.done.on .t-lab b{background:var(--okS)}
.strip li.past .t-lab b{background:var(--dark);color:#fff}

.stage{position:relative;height:var(--stage);border:var(--b2);border-radius:var(--r3);box-shadow:var(--sh3);background:var(--white);overflow:hidden}
.scene{position:absolute;inset:0;display:flex;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s}
.scene.on{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
.s-art{flex:none;height:100%;aspect-ratio:1;background:var(--scene);border-right:var(--b2)}
.s-art img{width:100%;height:100%;object-fit:contain}
.scene.on .s-art img{animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.s-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5)}
.s-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.s-top b{font:800 28px/1.05 Supreme;letter-spacing:-.025em}
.s-top time{font:800 12px Manrope;letter-spacing:.1em;color:var(--subtle);text-transform:uppercase;white-space:nowrap}
.chat{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:var(--s3);background:var(--shelf);border:1.5px solid rgba(42,33,26,.22);border-radius:var(--r2);padding:var(--s4);background-image:radial-gradient(circle,rgba(229,80,32,.2) 1px,transparent 1.4px);background-size:18px 18px}
.chat .m{max-width:94%;font:600 15px/1.45 Manrope;border-radius:14px;padding:var(--s2) var(--s3);border:1.5px solid var(--slab);box-shadow:2px 2px 0 var(--slab);opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.chat .m.in{opacity:1;transform:none}
.chat .who{display:block;font:800 11px Manrope;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle);margin-bottom:2px}
.chat .m.c{align-self:flex-start;background:var(--white);border-bottom-left-radius:4px}
.chat .m.c em{display:block;margin-top:6px;font-size:14px;color:var(--muted)}
.chat .m.n{align-self:flex-end;background:var(--peach);border-bottom-right-radius:4px}
.chat .m.n .who{color:var(--brandText)}
.vn{display:flex;align-items:center;gap:var(--s2);min-width:0}
.vn small{flex:none;font:700 12px Manrope;color:var(--muted)}
.pl{width:24px;height:24px;border-radius:50%;background:var(--dark);flex:none;position:relative}
.pl::after{content:"";position:absolute;left:9px;top:7px;border-left:8px solid #FFF8F4;border-top:5px solid transparent;border-bottom:5px solid transparent}
.wv{flex:1;display:flex;align-items:center;justify-content:space-between;height:18px;min-width:80px}
.wv i{flex:none;width:3px;height:35%;border-radius:2px;background:var(--dark)}
.wv i:nth-child(2){height:70%}.wv i:nth-child(4){height:95%}.wv i:nth-child(6){height:55%}.wv i:nth-child(8){height:100%}.wv i:nth-child(10){height:60%}
.scene.on .wv i{animation:wv 1.1s ease-in-out infinite}
.scene.on .wv i:nth-child(3n){animation-delay:-.3s}.scene.on .wv i:nth-child(3n+1){animation-delay:-.6s}
@keyframes wv{50%{transform:scaleY(.4)}}
.chat .m.strip-n{align-self:flex-start;display:flex;align-items:center;gap:var(--s2);background:var(--dark);color:var(--textD);font:700 13px Manrope;border-radius:10px;box-shadow:none}
.sp{width:10px;height:10px;background:var(--brand);flex:none;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.chat .m.tk,.chat .m.code{align-self:flex-end;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);background:var(--dark);color:var(--textD);min-width:min(240px,100%)}
.chat .m small{font:800 11px Manrope;letter-spacing:.1em;text-transform:uppercase;color:var(--mutedD)}
.chat .m.tk b{font:800 24px Supreme}
.chat .m.code b{font:800 24px Supreme;letter-spacing:.24em;color:var(--brand)}
.chat .m.paid{align-self:stretch;display:flex;align-items:center;gap:var(--s3);background:var(--okT);border-color:var(--ok);color:var(--ok)}
.chat .m.paid small{color:var(--ok)}
.chat .m.paid b{display:block;font:800 24px Supreme}
.chat .m.paid>i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--okS);color:#fff;font-style:normal;border:1.5px solid var(--slab);flex:none}
.chat .m.ask{align-self:stretch;background:var(--white);display:flex;flex-direction:column;gap:var(--s1)}
.chat .m.ask small{color:var(--brandText)}
.chat .m.ask b{font:800 18px Supreme}
.tap{align-self:flex-start;margin-top:var(--s1);padding:var(--s2) var(--s4);border-radius:10px;background:var(--brand);color:#FFF8F4;border:1.5px solid var(--slab);box-shadow:2px 2px 0 var(--slab);font:800 15px Supreme}
.scene.on .m.in .tap{animation:taps 2.2s 1s ease-in-out infinite}
@keyframes taps{0%,60%,100%{transform:none;box-shadow:2px 2px 0 var(--slab)}70%{transform:translate(2px,2px);box-shadow:0 0 0 var(--slab)}}
.you{align-self:flex-start;padding:5px 10px;border-radius:var(--r1);background:var(--shelf);color:var(--muted);font:800 12px Manrope;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid transparent}
.you.me{background:var(--brand);color:#fff;border-color:var(--slab)}
.you.ok{background:var(--okT);color:var(--ok);border-color:var(--ok)}

/* ───────── 4 · SET UP (orange | cream split) ───────── */
.setup{background:var(--cream);border-top:var(--b);padding:0}
.setup-in{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100svh - var(--nav))}
.shop-side{position:relative;background:var(--brand);border-right:var(--b2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s5);padding:var(--pad) var(--s5)}
.shop-scene{position:relative;z-index:1;width:min(560px,92%,calc((100svh - var(--nav) - 2 * var(--pad) - 120px) * 1.745));aspect-ratio:1400/802}
.shop-scene .stall{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.t-nova{position:absolute;z-index:2;left:30%;top:20%;width:40%;aspect-ratio:1;object-fit:contain;transition:transform .45s var(--ease),opacity .35s var(--ease)}
.t-nova.out{transform:translateY(30%);opacity:0}
.t-nova.in{transform:translateY(30%);opacity:0;transition:none}
.t-pick{position:relative;z-index:1;display:flex;align-items:center;gap:var(--s4);background:var(--white);border:var(--b2);border-radius:var(--r3);box-shadow:var(--sh2);padding:var(--s2)}
.t-pick button{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:var(--r2);border:var(--b);background:var(--cream);cursor:pointer;box-shadow:2px 2px 0 var(--slab)}
.t-pick button svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.t-pick button:active{transform:translate(2px,2px);box-shadow:none}
.t-name{min-width:220px;text-align:center}
.t-name h3{font-size:22px;transition:opacity .25s}
.t-name span{display:block;font:800 12px Manrope;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle)}
.setup-copy{display:flex;flex-direction:column;justify-content:center;gap:var(--s5);padding:var(--pad) max(16px,calc(50vw - 624px)) var(--pad) clamp(32px,5vw,80px)}
.line{list-style:none;display:flex;flex-direction:column;position:relative}
.line::before{content:"";position:absolute;left:19px;top:24px;bottom:24px;width:2.5px;background:var(--slab)}
.line li{position:relative;display:grid;grid-template-columns:40px 56px minmax(0,1fr);gap:var(--s4);align-items:center;padding:var(--s2) 0}
.line .n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;border:var(--b);box-shadow:2px 2px 0 var(--slab);font:800 18px Supreme;z-index:1}
.line img{width:56px;height:56px;object-fit:contain}
.line h3{font-size:20px}
.line p{font-size:15px;line-height:1.45;color:var(--muted)}
.line li.on .n{background:var(--dark)}
.line li.on img{animation:hop 1.1s var(--ease)}
@keyframes hop{30%{transform:translateY(-8%) rotate(-5deg)}60%{transform:translateY(0) rotate(4deg)}80%{transform:rotate(-2deg)}}
.cfg{border-top:var(--b2)}
.cfg div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s4);padding:var(--s2) 0;border-bottom:1px solid rgba(42,33,26,.18)}
.cfg dt{font:800 12px/1.8 Manrope;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle)}
.cfg dd{font:600 15px/1.45 Manrope;transition:opacity .25s}
.fade{opacity:0}

/* ───────── 5 · PAYMENTS (orange) ───────── */
.money{background:var(--brand);border-top:var(--b)}
.money h2{color:var(--ink)}
.money .sub{color:#2A140A;font-weight:600;margin-top:var(--s5);max-width:480px}
.money-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s8);align-items:center}
.ticks{list-style:none;margin-top:var(--s6);border-top:var(--b2);max-width:560px}
.ticks li{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0;border-bottom:var(--b2)}
.ticks img{width:48px;height:48px;object-fit:contain;flex:none}
.ticks b{display:block;font:800 20px Supreme;letter-spacing:-.01em}
.ticks span{display:block;font-size:16px;color:#2A140A}
.money-art{position:relative;aspect-ratio:1;width:min(100%,calc(100svh - var(--nav) - 2 * var(--pad)),560px);margin-left:auto}
.money-art .bank{position:absolute;right:0;top:0;width:86%;filter:drop-shadow(8px 8px 0 var(--slab))}
.money-art .cash{position:absolute;left:0;bottom:4%;width:46%;transform:rotate(-8deg);animation:cash 4s ease-in-out infinite}
@keyframes cash{50%{transform:rotate(-5deg) translateY(-8px)}}
.landed{position:absolute;right:4%;bottom:8%;display:flex;flex-direction:column;padding:var(--s3) var(--s4);border-radius:var(--r2);background:var(--dark);color:var(--textD);border:var(--b);box-shadow:var(--sh1);transform:rotate(3deg)}
.landed small{font:800 11px Manrope;letter-spacing:.12em;text-transform:uppercase;color:var(--mutedD)}
.landed b{font:800 30px/1.1 Supreme;letter-spacing:-.02em}

/* parent */
.parent{background:var(--white);padding:var(--s5) 0;border-top:var(--b);border-bottom:var(--b)}
.parent-row{display:flex;align-items:center;gap:var(--s4)}
.parent-row img{width:36px;height:36px}
.parent-row p{color:var(--muted);font-size:16px}
.parent-row p b{color:var(--ink)}
.parent-row p b a{color:var(--brandText);text-decoration:underline;text-underline-offset:3px}
.nt-go{margin-left:auto;display:inline-flex;align-items:center;padding:10px var(--s4);border-radius:var(--r2);border:var(--b);box-shadow:2px 2px 0 var(--slab);background:var(--white);font:800 15px Supreme;text-decoration:none}

/* ───────── 7 · JOIN (cream + dark block) ───────── */
.join{background:var(--cream)}
.join-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s8);align-items:center}
.join-left{display:flex;flex-direction:column;gap:var(--s5)}
.join-top{display:grid;grid-template-columns:clamp(240px,min(25vw,38vh),340px) minmax(0,1fr);gap:var(--s6);align-items:end}
.join-shop{position:relative;aspect-ratio:1400/916}
.join-shop .stall{position:absolute;inset:0;width:100%;height:100%}
.j-nova{position:absolute;left:31%;top:26%;width:38%;animation:wave 3.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes wave{0%,100%{rotate:0deg}30%{rotate:-3deg}60%{rotate:3deg}}
.join-copy{display:flex;flex-direction:column;gap:var(--s4);padding-bottom:var(--s2)}
.join h2{font-size:clamp(44px,min(4.6vw,8vh),72px)}
.join-left .sub{max-width:520px}
.join .wait{max-width:560px}
.after{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--b2);max-width:640px}
.after li{display:flex;flex-direction:column;gap:2px;padding:var(--s3) var(--s4) 0 0}
.after li+li{padding-left:var(--s4);border-left:1px solid rgba(42,33,26,.25)}
.after span{font:800 13px Manrope;letter-spacing:.12em;color:var(--brandText)}
.after b{font:800 17px Supreme;letter-spacing:-.01em}
.after small{font-size:14px;line-height:1.45;color:var(--muted)}

.contact{background:var(--dark);color:var(--textD);border:var(--b2);border-radius:var(--r3);box-shadow:10px 10px 0 var(--brand);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4)}
.c-head{display:flex;align-items:center;gap:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--lineD)}
.c-head img{width:64px;height:64px;object-fit:contain;flex:none;padding:6px;border-radius:50%;background:var(--cream);border:var(--b)}
.c-head h3{font-size:28px;color:var(--textD)}
.c-head p{font-size:15px;color:var(--mutedD)}
.contact label{display:flex;flex-direction:column;gap:6px;font:800 12px Manrope;letter-spacing:.1em;text-transform:uppercase;color:var(--mutedD)}
.contact :is(input,textarea){font:600 16px Manrope;letter-spacing:0;text-transform:none;color:var(--ink);background:var(--paper);border:var(--b);border-radius:var(--r2);padding:var(--s3) var(--s4);outline:none;width:100%}
.contact textarea{resize:vertical;min-height:88px}
.contact :is(input,textarea):focus{box-shadow:inset 0 0 0 2px var(--brand)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.c-foot{display:flex;justify-content:flex-end}
.contact .msg{color:#7FD38E}
.contact .msg.err{color:#FF9C8C}

/* footer */
.foot{background:var(--dark);color:var(--mutedD);padding:var(--s7) 0 var(--s6);border-top:var(--b)}
.foot-grid{display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}
.foot .brand{color:var(--textD)}
.plate{display:inline-grid;place-items:center;background:var(--paper);border-radius:10px;padding:6px 7px;border:1.5px solid var(--slab)}
.plate img{height:18px}
.foot nav{display:flex;gap:var(--s5);flex-wrap:wrap}
.foot nav a,.foot .mail{text-decoration:none;font-size:15px;font-weight:700}
.foot .mail{margin-left:auto;color:var(--textD)}
.foot-base{display:flex;justify-content:space-between;gap:var(--s4);margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--lineD);font-size:14px;flex-wrap:wrap}
.foot-base a{color:var(--textD);text-decoration:none;font-weight:700}

/* variation tag */
.vtag{position:fixed;right:var(--s3);bottom:var(--s3);z-index:60;padding:6px 10px;border-radius:var(--r1);background:var(--dark);color:var(--textD);border:1.5px solid var(--slab);box-shadow:2px 2px 0 var(--brand);font:800 11px Manrope;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}

/* ───────── tablet ───────── */
@media (max-width:1100px){
  .links{display:none}
  .sale-in{grid-template-columns:1fr;gap:var(--s6)}
  .sale-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s4) var(--s6)}
  .sale-head h2 br{display:none}
  .sale-head .sub{grid-column:1;max-width:520px}
  .s-ctl{grid-column:2;grid-row:1/3;align-self:end}
  .money-in{grid-template-columns:1fr;gap:var(--s7)}
  .money-art{width:min(420px,100%);margin:0 auto}
  .join-in{grid-template-columns:1fr;gap:var(--s7)}
}
/* ───────── phone ───────── */
@media (max-width:900px){
  .setup-in{grid-template-columns:1fr}
  .shop-side{border-right:0;border-bottom:var(--b2);padding:var(--s7) var(--s4)}
  .shop-scene{width:min(520px,100%)}
  .setup-copy{padding:var(--s7) var(--s4)}
}
@media (max-width:760px){
  body{font-size:16px}
  .gl{min-height:auto;padding:var(--s8) 0}
  .nav-cta{display:none}
  .hero{min-height:auto;padding-bottom:0}
  .hero h1{font-size:clamp(52px,15vw,72px)}
  .roll{width:4.75em}
  .wait .btn{flex:1 1 100%}
  .next{display:none}
  .setup{padding:0}
  .hero-shop{position:relative;right:auto;bottom:auto;width:118%;margin:var(--s6) 0 -14% -4%}
  .sale-head{grid-template-columns:1fr}
  .s-ctl{grid-column:1;grid-row:auto}
  .sale-in{--tile:64px}
  .strip{gap:var(--s2)}
  .tile{border-radius:12px}
  .t-lab{font-size:0;gap:0;justify-content:center}
  .t-lab b{font-size:12px}
  .stage{height:auto;display:grid}
  .scene{position:relative;inset:auto;grid-area:1/1;flex-direction:column}
  .s-art{height:220px;width:100%;aspect-ratio:auto;border-right:0;border-bottom:var(--b2)}
  .s-side{padding:var(--s4)}
  .s-top b{font-size:24px}
  .chat{padding:var(--s3)}
  .line li{grid-template-columns:40px 44px minmax(0,1fr);gap:var(--s3)}
  .line img{width:44px;height:44px}
  .cfg div{grid-template-columns:1fr;gap:0}
  .t-name{min-width:0;flex:1}
  .t-name h3{font-size:19px}
  .money-art{width:100%}
  .join-top{grid-template-columns:1fr;gap:var(--s5)}
  .join-shop{width:min(320px,100%)}
  .after{grid-template-columns:1fr}
  .after li,.after li+li{padding:var(--s3) 0;border-left:0;border-bottom:1px solid rgba(42,33,26,.25)}
  .f2{grid-template-columns:1fr}
  .contact{padding:var(--s5);box-shadow:6px 6px 0 var(--brand)}
  .parent-row{flex-wrap:wrap}.nt-go{margin-left:0}
  .foot .mail{margin-left:0}
  .vtag{font-size:10px;right:var(--s2);bottom:var(--s2)}
}
/* short screens (1280x720 and similar): tighten the tallest columns */
@media (max-height:800px) and (min-width:901px){
  .setup-copy{gap:var(--s4)}
  .line li{padding:2px 0}
  .line img{width:48px;height:48px}
  .cfg div{padding:var(--s1) 0}
  .hero h1{margin-top:var(--s4)}
  .lede{margin-top:var(--s4)}
  .hero .wait{margin-top:var(--s5)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none;transition:none}
  .gl:not(.seen) .wrap>*{opacity:1;transform:none}
  .chat .m{opacity:1;transform:none}
}

/* ───────── round 6 edits ───────── */
/* store buttons (replace the waitlist) */
.stores{display:flex;gap:var(--s3);flex-wrap:wrap}
.hero .stores{margin-top:var(--s6)}
.store{display:inline-flex;align-items:center;gap:12px;min-width:196px;height:60px;padding:0 20px 0 16px;border-radius:16px;background:var(--dark);color:#fff;border:var(--b);box-shadow:4px 4px 0 var(--brand);text-decoration:none;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.store:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--brand)}
.store:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--brand)}
.store svg{width:28px;height:28px;flex:none;fill:#fff}
.store small{display:block;font:700 11px/1.1 Manrope;letter-spacing:.04em;color:var(--mutedD)}
.store b{display:block;font:800 20px/1.1 Supreme;letter-spacing:-.01em}
/* official platform badge: visible, light, in the system */
.wa-badge{display:inline-flex;align-items:center;gap:12px;margin-top:var(--s5);padding:8px 14px 8px 8px;border-radius:14px;background:var(--white);border:var(--b);box-shadow:3px 3px 0 var(--slab)}
.wa-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#25D366;border:1.5px solid var(--slab)}
.wa-ic svg{width:22px;height:22px;fill:#fff}
.wa-badge small{display:block;font:700 11px/1.2 Manrope;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle)}
.wa-badge b{display:block;font:800 16px/1.2 Supreme;letter-spacing:-.005em}
.wa-tick{display:grid;place-items:center;width:22px;height:22px;margin-left:6px;border-radius:50%;background:#25D366;color:#fff;font:800 12px Manrope;border:1.5px solid var(--slab)}
/* hero stall: the whole stall on screen, Nova's full head visible above the counter */
.hero-shop{width:clamp(460px,44vw,700px);right:max(16px,calc(50% - 640px));bottom:auto;top:50%;transform:translateY(-44%)}
.nova-mark{left:31%;top:30%;width:38%}
.stall.counter{clip-path:inset(76% 0 0 0)}
@media (max-width:1100px){.hero-shop{position:relative;right:auto;top:auto;transform:none;margin:var(--s6) auto 0;width:min(560px,92%)}}
/* sale tags: say what is actually happening */
.you{display:inline-flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font:700 14px Manrope;padding:7px 12px;border-radius:10px;background:var(--peach);color:var(--brandText);border:1.5px solid rgba(229,80,32,.45)}
.you i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.you.me{background:var(--dark);color:#fff;border-color:var(--slab)}
.you.me i{background:var(--brand)}
.you.ok{background:var(--okT);color:var(--ok);border-color:var(--ok)}
/* Nikea Tech strip: a stamped credit, not a page break */
.parent{background:var(--dark);color:var(--textD);border-top:var(--b);border-bottom:var(--b);padding:var(--s6) 0;position:relative;overflow:hidden}
.parent::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(229,80,32,.35) 1.4px,transparent 1.8px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 100%);mask-image:linear-gradient(90deg,transparent 30%,#000 100%);pointer-events:none}
.parent-row{position:relative;gap:var(--s5)}
.pt-badge{display:grid;place-items:center;width:64px;height:64px;flex:none;border-radius:18px;background:var(--paper);border:var(--b);box-shadow:4px 4px 0 var(--brand);transform:rotate(-4deg)}
.pt-badge img{width:38px;height:38px}
.pt-copy small{display:block;font:800 11px Manrope;letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.parent-row p{color:var(--mutedD);font-size:17px;margin-top:2px}
.parent-row p b{color:#fff}
.parent-row p b a{color:#fff;text-decoration-color:var(--brand);text-decoration-thickness:2px}
.parent .nt-go{margin-left:auto;padding:12px 18px;border-radius:14px;background:var(--brand);color:#FFF8F4;border:var(--b);box-shadow:3px 3px 0 #000;font:800 16px Supreme;text-decoration:none;white-space:nowrap}
.parent .nt-go:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000}
@media (max-width:760px){.parent-row{flex-wrap:wrap}.parent .nt-go{margin-left:0}}
/* join: talk card */
.join .stores{margin-top:var(--s2)}
.talk{gap:var(--s5)}
.topics{list-style:none;display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.15)}
.topics li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.15);font:700 15px Manrope;display:flex;align-items:center;gap:10px}
.topics li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--brand);transform:rotate(45deg)}
.talk .c-foot{display:flex;align-items:center;gap:var(--s4);justify-content:flex-start;flex-wrap:wrap}
.talk .btn{text-decoration:none}
.mail-l{font:700 15px Manrope;color:inherit;opacity:.8}
/* set up: more air */
.setup-copy{gap:var(--s6)}
.line li{padding:var(--s4) 0;grid-template-columns:40px 64px minmax(0,1fr);gap:var(--s5)}
.line img{width:64px;height:64px}
.line::before{top:34px;bottom:34px}
.cfg div{padding:var(--s3) 0}
.shop-side{gap:var(--s6)}
/* contact page */
.cpage{position:relative;background:var(--cream);min-height:calc(100svh - var(--nav));padding:calc(var(--nav) + var(--s8)) 0 var(--s8)}
.cpage-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s8);align-items:start}
.cpage h1{margin-top:var(--s5);font-size:clamp(48px,6vw,96px);line-height:.94;letter-spacing:-.045em}
.c-ways{list-style:none;margin-top:var(--s7,56px);border-top:var(--b2)}
.c-ways li{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid rgba(42,33,26,.2)}
.cw-ic{display:grid;place-items:center;width:56px;height:56px;flex:none;border-radius:16px;background:var(--white);border:var(--b);box-shadow:3px 3px 0 var(--slab)}
.cw-ic img{width:40px;height:40px;object-fit:contain}
.c-ways b{display:block;font:800 18px Supreme}
.c-ways a,.c-ways span{font:600 15px Manrope;color:var(--muted)}
.c-ways a{color:var(--brandText,#B8410F);text-decoration:none}
.contact select{font:600 16px Manrope;color:var(--ink);background:var(--paper);border:var(--b);border-radius:var(--r2);padding:var(--s3) var(--s4);width:100%;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232A211A' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;letter-spacing:0;text-transform:none}
@media (max-width:900px){.cpage-in{grid-template-columns:1fr}.cpage{padding-top:calc(var(--nav) + var(--s6))}}
/* per-trade stalls (one frame, contents change) */
.shop-scene{aspect-ratio:1400/788;width:min(600px,94%,calc((100svh - var(--nav) - 2 * var(--pad) - 140px) * 1.777))}
.shop-scene .t-nova{left:35%;top:31%;width:30%}
.shop-scene .stall.counter{clip-path:inset(72.4% 0 0 0)}
.shop-scene .stall{transition:opacity .3s var(--ease)}
/* trade Nova: anchored by her feet just behind the counter, same height in every shop */
.shop-scene .t-nova{left:50%;top:auto;bottom:21.5%;width:auto;height:43%;aspect-ratio:auto;transform:translateX(-50%);transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s var(--ease)}
.shop-scene .t-nova.out{transform:translateX(-50%) translateY(28%);opacity:0}
.shop-scene .t-nova.in{transform:translateX(-50%) translateY(28%);opacity:0;transition:none}
.shop-scene .stall.ghost{z-index:4;opacity:0;pointer-events:none}
/* sale: the setting behind each step */
.perm{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:14px;background:var(--paper);border:var(--b);box-shadow:3px 3px 0 var(--slab);align-self:stretch}
.p-k{font:800 10.5px Manrope;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle)}
.p-row{display:flex;align-items:center;gap:10px}
.p-row b{font:800 16px Supreme;flex:1}
.p-row em{font-style:normal;font:800 12px Manrope;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:8px;background:var(--okT);color:var(--ok);border:1.5px solid var(--ok)}
.perm.off .p-row em{background:var(--peach);color:var(--brandText,#B8410F);border-color:var(--brand)}
.sw{position:relative;width:40px;height:24px;flex:none;border-radius:999px;background:var(--okS);border:1.5px solid var(--slab)}
.sw i{position:absolute;top:2px;left:18px;width:17px;height:17px;border-radius:50%;background:#fff;border:1.5px solid var(--slab);transition:left .3s var(--ease)}
.perm.off .sw{background:#D9D3CA}.perm.off .sw i{left:2px}
.p-res{font:600 14px Manrope;color:var(--muted)}
/* Nikea Tech: the real logo (mark + wordmark as on nikea.tech), pill button in the page's bubble style */
.nt-logo{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:#fff;padding-right:var(--s5);border-right:1px solid rgba(255,255,255,.18)}
.nt-logo img{width:30px;height:30px}
.nt-logo span{font:600 20px 'Schibsted Grotesk',sans-serif;letter-spacing:-.01em}
.nt-pill{margin-left:auto;display:inline-flex;align-items:center;gap:12px;padding:6px 18px 6px 6px;border-radius:999px;background:var(--white);color:var(--ink);border:var(--b);box-shadow:3px 3px 0 var(--brand);font:800 13px Manrope;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.nt-pill:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--brand)}
.nt-pill i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--brand);border:1.5px solid var(--slab)}
.nt-pill svg{width:16px;height:16px;fill:none;stroke:#FFF8F4;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.nt-logo{border:0;padding:0}.nt-pill{margin-left:0}}
/* set up fits one screen: shorter heading, 2x2 trade details, height-aware spacing */
.setup-copy{padding-top:clamp(24px,5vh,56px);padding-bottom:clamp(24px,5vh,56px);gap:clamp(16px,3.2vh,36px)}
.setup h2{font-size:clamp(40px,min(4.6vw,8.2vh),76px)}
.line li{padding:clamp(6px,1.4vh,16px) 0;gap:var(--s4);grid-template-columns:40px 56px minmax(0,1fr)}
.line img{width:56px;height:56px}
.line::before{top:26px;bottom:26px}
.cfg{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s5)}
.cfg div{grid-template-columns:1fr;gap:2px;padding:clamp(8px,1.4vh,14px) 0}
.cfg dt{line-height:1.4}
.shop-side{padding-top:clamp(24px,5vh,56px);padding-bottom:clamp(24px,5vh,56px);gap:clamp(16px,3vh,32px)}
@media (max-width:900px){.cfg{grid-template-columns:1fr}}
/* trade Nova, normalised art (same eye spacing, eyes at one point): counter always cuts at the chest */
.shop-scene .t-nova{left:28.9%;top:13.1%;bottom:auto;width:42.2%;height:auto;transform:none}
.shop-scene .t-nova.out{transform:translateY(26%);opacity:0}
.shop-scene .t-nova.in{transform:translateY(26%);opacity:0;transition:none}
.shop-scene .stall.awn{clip-path:inset(0 0 64.5% 0);z-index:3}
.shop-scene .t-nova{left:31%;top:19.3%;width:38%}
/* chat in the app's own thread style (from the live thread screen) */
.chat.ap{display:flex;flex-direction:column;gap:12px;justify-content:center}
.am{display:flex;flex-direction:column;max-width:88%}
.am.c{align-self:flex-start}.am.n{align-self:flex-end;align-items:flex-end}
.am-b{padding:10px 14px;border:1.75px solid var(--slab);border-radius:16px;font:600 15px/1.4 Manrope;box-shadow:3px 3px 0 var(--slab)}
.am.c .am-b{background:#fff;border-bottom-left-radius:5px}
.am.n .am-b{background:#FFF4EB}
.am-b em{display:block;font-style:normal;margin-top:6px;font-size:14px;color:var(--muted)}
.am time{margin-top:5px;font:600 11px Manrope;color:#9A9389}
.am-strip{display:flex;flex-direction:column;margin-top:-1px;background:#221F1C;border:1.75px solid var(--slab);border-top:0;border-radius:0 0 12px 12px;padding:4px 12px 6px;box-shadow:3px 3px 0 var(--slab)}
.am.c:has(.am-strip) .am-b{border-radius:16px 16px 0 0;box-shadow:none}
.am-strip span{display:flex;align-items:center;gap:8px;font:700 12.5px Manrope;color:#FAFAF8;padding:3px 0}
.am-strip span+span{border-top:1px solid #42403D}
.sp{display:inline-block;width:10px;height:10px;background:var(--brand);flex:none;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.ap-link{position:relative;align-self:flex-end;width:88%;background:#221F1C;color:#FAFAF8;border:1.75px solid var(--slab);border-radius:16px;padding:14px 16px 0;box-shadow:3px 3px 0 var(--slab);overflow:hidden}
.ap-link::before,.ap-link::after{content:"";position:absolute;top:calc(100% - 44px);width:14px;height:14px;border-radius:50%;background:var(--paper,#FBF6EC);border:1.75px solid var(--slab)}
.ap-link::before{left:-8px}.ap-link::after{right:-8px}
.rib{position:absolute;top:14px;right:-34px;transform:rotate(38deg);background:var(--brand);color:#fff;font:800 9px Manrope;letter-spacing:.12em;text-transform:uppercase;padding:3px 34px}
.al-top{display:flex;gap:14px;font:700 10.5px Manrope;letter-spacing:.12em;text-transform:uppercase;color:#A8A4A0}
.al-top b{display:flex;align-items:center;gap:6px;color:#fff}
.ap-link strong{display:block;font:800 30px Supreme;letter-spacing:-.02em;margin-top:6px}
.ap-link small{display:block;font:600 13px Manrope;color:#A8A4A0}
.al-url{margin:12px -16px 0;padding:10px 16px;border-top:2px dashed #42403D;font:600 13px Manrope;color:var(--brand)}
.ap-rec{align-self:flex-end;width:88%;background:#221F1C;color:#FAFAF8;border:1.75px solid var(--slab);border-radius:16px;box-shadow:3px 3px 0 var(--slab);overflow:hidden}
.ar-top{display:flex;justify-content:space-between;padding:12px 16px 4px;font:700 10.5px Manrope;letter-spacing:.1em;text-transform:uppercase;color:#A8A4A0}
.ar-row{display:flex;justify-content:space-between;padding:4px 16px 0;font:800 17px Supreme}
.ap-rec>small{display:block;padding:2px 16px 12px;font:600 12.5px Manrope;color:#A8A4A0}
.ar-you{background:#E1F0E5;color:#1F7836;padding:10px 16px 12px;border-top:2px dashed rgba(42,33,26,.35)}
.ar-you span{display:block;font:800 10.5px Manrope;letter-spacing:.12em;text-transform:uppercase}
.ar-you strong{display:block;font:800 28px Supreme;letter-spacing:-.02em}
.ar-you em{font-style:normal;font:600 12px Manrope}
.ap-ask,.ap-del{align-self:stretch;background:#fff;border:1.75px solid var(--slab);border-radius:16px;padding:12px 14px;box-shadow:3px 3px 0 var(--slab)}
.ap-ask small,.ap-del>small{display:block;font:800 10.5px Manrope;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.ap-ask b{display:block;font:800 17px Supreme;margin-top:2px}
.addr{display:block;font:600 13px Manrope;color:var(--muted)}
.aa-b{display:flex;gap:8px;margin-top:10px}
.aa-b span{flex:1;text-align:center;padding:9px;border-radius:12px;border:1.75px solid var(--slab);font:800 14px Supreme}
.aa-b .go{background:var(--brand);color:#fff;box-shadow:2px 2px 0 var(--slab)}
.ad-row{display:flex;align-items:center;gap:12px;margin-top:8px}
.ad-av{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--peach);border:1.5px solid var(--slab);font:800 14px Supreme}
.ad-row b{display:block;font:800 16px Supreme}.ad-row em{font-style:normal;font:600 13px Manrope;color:var(--muted)}
.ad-code{margin-left:auto;text-align:right;font:800 24px Supreme;letter-spacing:.2em;color:var(--brand)}
.ad-code small{display:block;font:800 10px Manrope;letter-spacing:.12em;color:var(--subtle)}
.chat.ap>*{opacity:0;transform:translateY(12px) scale(.98);transition:opacity .4s var(--ease),transform .45s cubic-bezier(.34,1.4,.64,1)}
.chat.ap>*.in{opacity:1;transform:none}
.s-art video{width:100%;height:100%;object-fit:cover;display:block}

/* section transitions: the section you leave fades and drifts up; the next one lands with a small bounce */
.gl .wrap>*{transition:opacity .75s var(--ease),transform .85s cubic-bezier(.34,1.45,.64,1)}
.gl:not(.seen) .wrap>*{transform:translateY(46px) scale(.985)}
main>section>.wrap,main>section>.setup-in{transition:opacity .2s linear}
/* fit the app cards inside the chat panel */
.scene .s-art{flex:0 0 44%}
.s-side{padding:var(--s4);gap:var(--s2)}
.chat.ap{padding:var(--s3);gap:8px;justify-content:center}
.am-b{font-size:14px;padding:8px 12px}
.am-b em{font-size:13px}
.am time{margin-top:3px;font-size:10.5px}
.am-strip span{font-size:12px;padding:2px 0}
.ap-link{padding:10px 14px 0;width:92%}
.ap-link strong{font-size:24px;margin-top:2px}
.al-url{margin-top:8px;padding:7px 14px;font-size:12px}
.ap-link::before,.ap-link::after{top:calc(100% - 36px)}
.ap-rec{width:92%}
.ar-top{padding:9px 14px 2px}
.ar-row{padding:2px 14px 0;font-size:15px}
.ap-rec>small{padding:1px 14px 8px;font-size:12px}
.ar-you{padding:7px 14px 9px}.ar-you strong{font-size:22px}
.ap-ask,.ap-del{padding:10px 12px}
.ap-ask b{font-size:15px}.aa-b{margin-top:8px}.aa-b span{padding:7px;font-size:13px}
.perm{padding:9px 12px;gap:4px}
.p-row b{font-size:15px}.p-res{font-size:13px}
.chat.ap>*{flex-shrink:0}
/* all 24 fit fully: sized so the tallest hat clears the awning; same eye line, same chest cut */
.shop-scene .stall.awn{display:none}
.shop-scene .t-nova{left:35.25%;top:31.7%;width:29.5%}
/* transition option 1: a shop awning rolls down over the dark section */
.tx-awning{position:absolute;left:0;right:0;top:0;height:96px;z-index:3;pointer-events:none;transform:translateY(-100%);filter:drop-shadow(0 4px 0 #2A211A)}
.tx-awning .band{position:absolute;inset:0 0 34px 0;background:repeating-linear-gradient(90deg,#E55020 0 64px,#FBF6EC 64px 128px);border-bottom:2px solid #2A211A}
.tx-awning .sc{position:absolute;left:0;right:0;bottom:2px;height:34px;background:repeating-linear-gradient(90deg,#E55020 0 64px,#FBF6EC 64px 128px);-webkit-mask:radial-gradient(circle 32px at 32px 0,#000 97%,transparent 100%) 0 0/64px 34px repeat-x;mask:radial-gradient(circle 32px at 32px 0,#000 97%,transparent 100%) 0 0/64px 34px repeat-x}
#glance{position:relative}
#glance .gx-stage{will-change:transform}
.ap-ask .addr{display:none}
.ap-rec>small{display:none}
.ar-row{padding-bottom:8px}
@media (max-height:760px){.al-url{display:none}.am-strip span+span{display:none}}
@media (max-height:940px){.ar-row{display:none}.ar-top{padding-bottom:8px}}
@media (max-height:760px){.p-res{display:none}}
#glance .tx-awning{position:absolute;top:0}
@media (max-height:760px){.chat.ap{gap:5px;padding:8px}.perm{padding:7px 10px}.s-side{padding:12px;gap:6px}.ap-ask,.ap-del{padding:8px 10px}}
/* temporary preview switcher (remove before launch) */
.tx-switch{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;background:#221F1C;border:1.75px solid #2A211A;box-shadow:4px 4px 0 #E55020}
.tx-switch span{font:800 11px Manrope;letter-spacing:.12em;text-transform:uppercase;color:#A8A4A0;padding:0 8px 0 10px}
.tx-switch a{font:800 13px Manrope;color:#FAFAF8;text-decoration:none;padding:8px 14px;border-radius:999px}
.tx-switch a:hover{background:#3A3633}
html[data-tx="1"] .tx-switch a[data-tx="1"],html[data-tx="2"] .tx-switch a[data-tx="2"],html[data-tx="3"] .tx-switch a[data-tx="3"]{background:#E55020}
/* softer arrival */
.gl .wrap>*{transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.3,1.25,.5,1)}
.gl:not(.seen) .wrap>*{opacity:0;transform:translateY(36px) scale(.99)}
/* contact sits right under the nav on first glance */
.cpage{padding-top:calc(var(--nav) + clamp(28px,5vh,56px));padding-bottom:clamp(40px,7vh,80px)}
.cpage h1{margin-top:var(--s4);font-size:clamp(44px,5.2vw,84px)}
.cpage-in{align-items:start}
.shop-scene .t-nova{translate:0 var(--dy,0%)}
.store{position:relative}
.store::after{content:attr(data-soon);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px);white-space:nowrap;padding:7px 12px;border-radius:10px;background:#221F1C;color:#fff;border:1.5px solid #2A211A;box-shadow:3px 3px 0 #E55020;font:700 13px Manrope;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.store.soon::after{opacity:1;transform:translate(-50%,0)}

/* paint safety: no persistent compositing layers on big text blocks */
#hero>.wrap{will-change:auto}
.roll-w{backface-visibility:visible}

.nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* ═════════ PHONE PASS (≤760px): centred story, one gutter, equal controls, no dead space ═════════ */
@media (max-width:760px){
  :root{--gut:20px}
  .wrap{padding-left:var(--gut);padding-right:var(--gut)}
  /* hero: centred stack, stall on top, equal store buttons */
  .hero{padding-top:calc(var(--nav) + 20px);padding-bottom:40px}
  .hero-in{display:flex;flex-direction:column}
  .hero-copy{align-items:center;text-align:center;max-width:none;order:2}
  .hero-shop{position:relative!important;order:1;right:auto!important;top:auto!important;transform:none!important;width:min(330px,88vw)!important;margin:0 auto 22px}
  .tag{transform:rotate(-1.5deg);font-size:11px}
  .hero h1{font-size:clamp(42px,12.4vw,54px);margin-top:18px}
  .roll{text-align:center}
  .lede{margin-top:16px;font-size:16px;max-width:340px}
  .stores{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero .stores{margin-top:26px}
  .store{min-width:0;height:56px;padding:0 12px;gap:8px;justify-content:center}
  .store svg{width:22px;height:22px}
  .store b{font-size:16px}.store small{font-size:9.5px}
  .wa-badge{width:100%;justify-content:center;margin-top:14px;padding:8px 12px}
  .wa-badge b{font-size:14px}
  /* section headings centred, subtext centred */
  .sale-head,.setup-copy>.kicker,.money-copy,.join-copy,.cpage .c-left{text-align:center;align-items:center}
  .sale-head{display:flex;flex-direction:column;align-items:center}
  .sale-head .sub,.money .sub{margin-left:auto;margin-right:auto}
  .sale h2,.setup h2,.money h2,.join h2{font-size:clamp(32px,9.4vw,40px)}
  .s-ctl{justify-content:center}
  .strip{gap:8px}
  /* set up */
  .setup-copy{padding:36px var(--gut) 44px}
  .setup-copy .kicker{justify-content:center}
  .setup h2{text-align:center}
  .line li{grid-template-columns:36px 48px minmax(0,1fr);gap:12px}
  .line img{width:48px;height:48px}
  .cfg{grid-template-columns:1fr 1fr;column-gap:16px}
  .cfg dd{white-space:normal}
  .shop-side{padding:32px var(--gut)}
  /* payments: art first and smaller, copy below, no orange void */
  .money-in{display:flex;flex-direction:column;gap:28px}
  .money-art{order:-1;width:min(300px,78vw)!important;margin:0 auto}
  .money-copy .kicker{justify-content:center}
  .ticks li{text-align:left}
  /* coverage: no empty band under the map */
  .cities .ct-copy{text-align:center;margin:0 auto}
  .cities .ct-kicker{justify-content:center}
  .cities .ct-map{aspect-ratio:1 / .82!important}
  .cities .ct-grid{gap:12px!important}
  /* Nikea strip */
  .parent{padding:32px 0}
  .parent-row{flex-direction:column;align-items:center;text-align:center;gap:14px}
  .nt-logo{justify-content:center}
  .pt-copy{display:flex;flex-direction:column;align-items:center}
  /* get the app */
  .join-top{justify-items:center;text-align:center}
  .join-shop{width:min(300px,80vw)}
  .join-copy{display:flex;flex-direction:column;align-items:center}
  .join-copy .kicker{justify-content:center}
  .join-left{align-items:stretch}
  .join-left>.sub{text-align:center;margin:0 auto}
  .after li{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px;padding:12px 0!important;border-left:0!important;border-bottom:1px solid rgba(42,33,26,.2)}
  .after li span{min-width:18px}
  .after li small{flex-basis:100%;padding-left:26px}
  .contact{padding:24px 20px}
  .c-head{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .c-head h3{font-size:22px}
  .talk .c-foot{flex-direction:column;align-items:stretch;gap:12px;text-align:center}
  .talk .c-foot .btn{width:100%}
  /* footer */
  .foot{padding:36px 0 28px}
  .foot-grid{flex-direction:column;align-items:center;gap:18px;text-align:center}
  .foot nav{justify-content:center;gap:12px 18px}
  .foot .mail{margin:0}
  .foot-base{flex-direction:column;align-items:center;text-align:center;gap:6px}
  /* contact page */
  .cpage h1{font-size:clamp(40px,11vw,52px)}
  .c-ways li{text-align:left}
  .cpage .contact .c-head{flex-direction:row;text-align:left}
}
@media (max-width:760px){
  .hero.gl{display:flex;flex-direction:column;justify-content:flex-start}
  .hero>.hero-shop{order:1}
  .hero>.wrap{order:2;width:100%}
  .hero-copy{order:0}
}
@media (max-width:380px){
  .stores{grid-template-columns:1fr}
  .store{justify-content:flex-start;padding:0 18px}
  .store small,.store b{white-space:nowrap}
  .wa-badge{gap:8px;padding:7px 10px}
  .wa-badge b{font-size:12.5px;white-space:nowrap}
  .wa-badge small{font-size:9.5px}
  .wa-ic{width:32px;height:32px}
}

/* ───────── round 9: menu, hero rhythm, phone refinements, contact fits at a glance ───────── */
.menu{display:none;margin-left:auto;width:46px;height:46px;border:var(--b);border-radius:14px;background:var(--white);box-shadow:2px 2px 0 var(--slab);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:0}
.menu span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s var(--ease)}
.menu[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.sheet{position:fixed;left:0;right:0;top:var(--nav);z-index:49;background:#F5EDD8;border-bottom:var(--b);padding:6px 20px 22px;display:flex;flex-direction:column;transform:translateY(-110%);transition:transform .35s var(--ease);visibility:hidden}
.sheet.open{transform:none;visibility:visible}
.sheet a{text-decoration:none;color:var(--ink);font:800 22px Supreme;padding:13px 0;border-bottom:1px solid rgba(42,33,26,.15)}
.sheet .btn{margin-top:16px;justify-content:center;font-size:16px;border-bottom:var(--b)}
/* hero: clearer rhythm between groups (desktop) */
.hero-copy .tag{margin-bottom:4px}
.hero h1{margin-top:28px}
.lede{margin-top:28px}
.hero .stores{margin-top:40px}
.wa-badge{margin-top:18px}
/* contact: whole page at a glance */
.cpage{padding-top:calc(var(--nav) + clamp(16px,3vh,32px));padding-bottom:clamp(24px,4vh,48px);min-height:auto}
.cpage h1{margin-top:16px;font-size:clamp(40px,4.2vw,68px)}
.cpage .lede{margin-top:16px}
.c-ways{margin-top:clamp(20px,3.5vh,36px)}
.c-ways li{padding:12px 0}
.cw-ic{width:48px;height:48px}.cw-ic img{width:34px;height:34px}
.cpage .contact{padding:clamp(20px,2.6vh,28px) 28px;gap:12px}
.cpage .contact :is(input,select,textarea){padding:10px 14px}
.cpage .contact textarea{min-height:84px}
.cpage .c-head{padding-bottom:10px}
@media (max-width:760px){
  .nav-cta{display:none}
  .menu{display:flex}
  .nav .links{display:none}
  /* hero rhythm on phones */
  .hero-shop{margin-bottom:28px}
  .hero h1{margin-top:20px}
  .lede{margin-top:20px}
  .hero .stores{margin-top:30px}
  .wa-badge{margin-top:12px}
  /* sale: shorter picture, panel sized to its chat, controls on one centred line */
  .sale.gl{padding:48px 0}
  .sale-head .sub{font-size:16px}
  .s-ctl{margin-top:4px}
  .stage{--stage:600px;height:600px}
  #stage .s-art,.scene .s-art{height:190px!important;flex:0 0 190px!important}
  .s-art video{object-fit:contain;background:var(--scene)}
  .chat.ap{padding:10px}
  .al-top span:last-child{display:none}
  .rib{right:-38px;top:12px;font-size:8px;padding:3px 36px}
  /* payments: smaller art, tighter band */
  .money.gl{padding:48px 0}
  .money-in{gap:22px}
  .money-art{width:min(230px,62vw)!important}
  /* general phone rhythm */
  .cities.gl,.join.gl{padding:48px 0}
  .cpage{padding-top:calc(var(--nav) + 20px)}
}

/* no grey tap flash on phones */
*{-webkit-tap-highlight-color:transparent}
a,button,img{-webkit-touch-callout:none}

/* phone hero: everything visible on first glance */
@media (max-width:760px){
  .hero.gl{min-height:calc(100svh - var(--nav));padding:calc(var(--nav) + 10px) 0 16px;justify-content:center}
  .hero-shop{width:min(250px,64vw)!important;margin:0 auto 12px}
  .hero-copy .tag{margin-bottom:0;font-size:10px;padding:6px 10px}
  .hero h1{margin-top:12px;font-size:clamp(34px,10.4vw,44px);line-height:1}
  .lede{margin-top:12px;font-size:14.5px;line-height:1.45;max-width:330px}
  .hero .stores{margin-top:18px;gap:8px}
  .store{height:48px;border-radius:13px;box-shadow:3px 3px 0 var(--brand)}
  .store b{font-size:15px}.store small{font-size:9px}
  .store svg{width:20px;height:20px}
  .wa-badge{margin-top:10px;padding:6px 10px;border-radius:12px}
  .wa-ic{width:30px;height:30px}.wa-ic svg{width:18px;height:18px}
  .wa-badge small{font-size:9px}.wa-badge b{font-size:13px}
  .wa-tick{width:18px;height:18px;font-size:10px}
  /* contact page: start right under the nav */
  .cpage{min-height:auto!important;padding-top:calc(var(--nav) + 14px)!important;padding-bottom:36px}
  .cpage h1{margin-top:10px}
  .c-ways{margin-top:18px}
}
@media (max-width:380px){
  .stores{grid-template-columns:1fr 1fr}
  .store{padding:0 8px;gap:6px;justify-content:center}
  .store b{font-size:13px}.store small{font-size:8px}
  .hero h1{font-size:32px}
}

/* phone payments: lay the three stickers out side by side, nothing covers anything */
@media (max-width:760px){
  .money-art{width:min(340px,90vw)!important;aspect-ratio:1.08}
  .money-art .bank{width:60%;left:20%;right:auto;top:0;filter:drop-shadow(5px 5px 0 var(--slab))}
  .money-art .cash{width:38%;left:0;bottom:0}
  .landed{right:0;bottom:2%;padding:8px 12px}
  .landed small{font-size:9px}.landed b{font-size:22px}
}
/* shorter phone screens: smaller stall so the badge still shows */
@media (max-width:760px) and (max-height:620px){
  .hero-shop{width:min(210px,56vw)!important;margin-bottom:8px}
  .hero h1{margin-top:10px}.lede{margin-top:10px}.hero .stores{margin-top:14px}
}
@media (max-width:760px) and (max-height:600px){
  .hero-shop{width:min(150px,46vw)!important}
  .hero h1{font-size:30px}.lede{font-size:13.5px}
}

/* main already sits below the nav: don't add the nav height twice */
.cpage{padding-top:clamp(20px,3.5vh,40px)!important}
@media (max-width:760px){
  .hero.gl{padding-top:14px!important;justify-content:flex-start;min-height:0}
  .cpage{padding-top:18px!important}
  .money-art{aspect-ratio:1.22}
  .money-art .bank{width:62%;left:19%}
  .money-art .cash{width:37%;bottom:3%}
}

/* badge footer: same number */
.wa-badge{flex-wrap:wrap}
.wa-keep{flex-basis:100%;margin-top:8px;padding-top:7px;border-top:1.5px dashed rgba(42,33,26,.28);text-align:center;font:700 12.5px Manrope;color:#2A211A}
/* phone: short, small "coming soon" that stays over its own button */
@media (max-width:760px){
  .store::after{content:"Coming soon";font-size:11px;padding:5px 9px;border-radius:8px;box-shadow:2px 2px 0 #E55020;bottom:calc(100% + 7px)}
  .wa-keep{font-size:11px;margin-top:6px;padding-top:5px}
}

/* badge = top row + "same number" footer, hugs its content */
.wa-badge{display:inline-flex;flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap}
.wa-row{display:flex;align-items:center;gap:12px}
.wa-keep{margin-top:7px;padding-top:6px}
@media (max-width:760px){
  .wa-badge{width:100%}
  .wa-row{justify-content:center;gap:8px}
  .cpage-in{gap:28px!important}
}
/* contact: footer reaches the bottom of the screen */
body:has(.cpage){display:flex;flex-direction:column;min-height:100svh}
body:has(.cpage) main{flex:1}

/* ───────── round 11 ───────── */
/* desktop hero: everything incl. the WhatsApp badge inside the first screen */
@media (min-width:761px){
  .hero h1{font-size:clamp(52px,min(7.4vw,10.2vh),116px)}
  .hero h1{margin-top:clamp(14px,2.4vh,28px)}
  .lede{margin-top:clamp(14px,2.4vh,28px)}
  .hero .stores{margin-top:clamp(18px,3.2vh,40px)}
  .wa-badge{margin-top:clamp(10px,1.6vh,18px)}
}
/* phone headline: "Never miss a" / rolling word on its own row / "again." — nothing jumps */
@media (max-width:760px){
  .hero h1 br{display:none}
  .hero h1 .roll{display:block;width:100%!important;margin:2px auto 0;text-align:center}
  .hero h1 .roll-w{text-align:center}
}
/* phone sale: centred controls, compact strip, card fits one screen */
@media (max-width:760px){
  .sale-head{gap:12px}
  .sale-head h2 br{display:none}
  .s-ctl{width:100%;justify-content:center;margin-top:2px}
  .sale-in{--tile:58px;gap:18px}
  .sale-main{gap:14px}
  .strip li{gap:6px}
  .t-lab{display:none}
  .stage{--stage:auto;height:auto!important}
  #stage .s-art,.scene .s-art{height:160px!important;flex:0 0 160px!important}
}
@media (max-width:760px){ .hero h1 .roll-w{left:0;right:0;width:100%;text-align:center} }
/* phone landing fills exactly one screen; taller phones get a bigger stall instead of a peek of the next section */
@media (max-width:760px){
  .hero.gl{min-height:calc(100svh - var(--nav))!important;justify-content:center;padding-bottom:14px}
}
@media (max-width:760px) and (min-height:720px){ .hero-shop{width:min(290px,72vw)!important;margin-bottom:16px} }
@media (max-width:760px) and (min-height:800px){ .hero-shop{width:min(320px,78vw)!important} .hero h1{font-size:clamp(38px,11vw,48px)} .hero .stores{margin-top:22px} }

/* ───────── round 12: phone landing, 8-pt rhythm (16 inside a group, 32 between groups) ───────── */
@media (max-width:760px){
  .h-again{display:none}
  .hero h1 .roll{margin-top:0}
  .hero.gl{padding:16px 20px 24px!important}
  .hero>.wrap{padding:0!important}
  .hero-copy .tag{margin:0!important}
  .hero h1{margin-top:16px!important;font-size:clamp(40px,11.6vw,50px)!important;line-height:1!important}
  .lede{margin-top:16px!important;font-size:15px!important;line-height:1.5!important}
  .hero .stores{margin-top:32px!important;width:100%}
  .wa-badge{margin-top:12px!important}



  /* C · thumb zone: words at the top, stall in the middle, buttons at the bottom */
  html[data-hv=c] .hero.gl{justify-content:space-between}
  html[data-hv=c] .hero>.wrap,html[data-hv=c] .hero-copy{display:contents!important}
  html[data-hv=c] .hero-copy .tag{order:1;align-self:flex-start}
  html[data-hv=c] .hero h1{order:2;text-align:left}
  html[data-hv=c] .hero h1 .roll,html[data-hv=c] .hero h1 .roll-w{text-align:left!important}
  html[data-hv=c] .lede{order:3;text-align:left;max-width:none!important}
  html[data-hv=c] .hero>.hero-shop{order:4;margin:24px auto!important;width:min(250px,64vw)!important}
  html[data-hv=c] .hero .stores{order:5;margin-top:auto!important}
  html[data-hv=c] .wa-badge{order:6}
}
/* glance phone on phones: rises once out of a tilt when it first comes into view */
@media (max-width:1023px) and (prefers-reduced-motion:no-preference){
  html #glance .gx-phone{transform:perspective(1200px) translateY(90px) rotateX(26deg);transform-origin:50% 100%;transition:transform 1s cubic-bezier(.3,1.35,.5,1)}
  html #glance .gx-phone.gx-risen{transform:none}
}
/* sale heading on phones: reads from the left, not centred */
@media (max-width:760px){
  .sale-head{align-items:flex-start!important;text-align:left!important}
  .sale-head .sub{margin-left:0!important}
  .s-ctl{justify-content:flex-start!important}
}
/* short phones (SE and similar): same rhythm, halved */
@media (max-width:760px) and (max-height:620px){
  .hero.gl{padding:8px 16px 12px!important}
  .hero-shop,html[data-hv] .hero-shop,html[data-hv] .hero>.hero-shop{width:min(170px,50vw)!important;margin-bottom:12px!important}
  html[data-hv=c] .hero>.hero-shop{margin:12px auto!important}
  .hero h1{margin-top:8px!important;font-size:34px!important}
  .lede{margin-top:8px!important;font-size:13.5px!important;line-height:1.45!important}
  .hero .stores{margin-top:16px!important}
  .wa-badge{margin-top:8px!important}
}

/* ───────── round 13 ───────── */
/* contact: text on the left, message card on the right down to small laptops */
@media (min-width:761px) and (max-width:900px){
  .cpage-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr)!important;gap:28px!important}
}
/* contact on phones: reads from the top-left; the card's fields use its full width */
@media (max-width:760px){
  .cpage .c-left{text-align:left!important;align-items:flex-start!important}
  .cpage .c-left .tag{margin-left:0}
  .cpage .lede{margin-left:0!important;max-width:none!important}
  .cpage .contact{padding:20px 18px 22px!important;gap:10px!important}
  .cpage .contact .c-head{text-align:left}
  .cpage .contact label{gap:6px}
}
/* layout C: on taller phones the stall grows and sits centred in the free space */
@media (max-width:760px){
  html[data-hv=c] .hero>.hero-shop{margin:24px auto!important}
  html[data-hv=c] .hero .stores{margin-top:auto!important}
}
@media (max-width:760px) and (min-height:720px){ html[data-hv=c] .hero>.hero-shop{width:min(300px,74vw)!important;margin:auto!important;padding:24px 0} }
@media (max-width:760px) and (min-height:800px){ html[data-hv=c] .hero>.hero-shop{width:min(340px,82vw)!important} }

/* ───────── round 14 ───────── */
/* trade stall: two stacked layers crossfading; nova settles in with a tiny scale, nothing else moves */
.shop-scene .t-layer{position:absolute;inset:0;transition:opacity .55s cubic-bezier(.4,0,.2,1)}
.shop-scene .t-layer.t-next{opacity:0}
.shop-scene .t-layer.t-prev{opacity:0}
.shop-scene .t-layer .t-nova{transition:scale .6s cubic-bezier(.22,1,.36,1)}
.shop-scene .t-layer.t-next .t-nova{scale:.94}
.t-name h3,.t-name span{transition:opacity .2s ease}
/* trade pill: fixed width, so a long or short name never resizes it */
.t-pick{width:min(400px,100%);justify-content:space-between}
.t-name{flex:1;min-width:0}
.t-name h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){ .t-pick{width:100%;max-width:380px} .t-name h3{font-size:18px} }
@media (max-width:360px){ .t-name h3{font-size:16px} .t-pick{gap:8px} }
/* phone landing C, revised: stall on top and as big as the screen allows (width set by fitHero in site.js),
   words under it, store buttons + badge at the bottom */
@media (max-width:760px){
  html[data-hv=c] .hero>.hero-shop{order:0;width:var(--shopw,min(300px,76vw))!important;margin:0 auto 16px!important;padding:0!important}
  html[data-hv=c] .hero .stores{margin-top:auto!important}
  html[data-hv=c] .hero-copy .tag{margin-top:0!important}
}
/* the old stall stays fully solid underneath; only the new one fades in on top, so it never goes see-through */
.shop-scene .t-layer.t-prev{opacity:1}
/* phone landing: kicker tucks onto the stall's base like a sticker, and the words sit centred in any spare space */
@media (max-width:760px){
  html[data-hv=c] .hero-copy .tag{position:relative;z-index:3;margin-top:-18px!important}
  html[data-hv=c] .hero>.hero-shop{margin-bottom:0!important}
  html[data-hv=c] .hero h1{margin-top:12px!important}
}

/* ───────── round 15: phone landing = kicker / big stall / centred headline / buttons, tight 8-pt gaps ───────── */
@media (max-width:760px){
  html[data-hv=c] .hero.gl{justify-content:center!important;padding:12px 20px 16px!important}
  html[data-hv=c] .hero-copy .tag{order:0!important;align-self:center!important;margin:0!important;position:static}
  html[data-hv=c] .hero>.hero-shop{order:1!important;margin:12px auto 0!important}
  html[data-hv=c] .hero h1{order:2!important;text-align:center!important;margin-top:12px!important}
  html[data-hv=c] .hero h1 .roll,html[data-hv=c] .hero h1 .roll-w{text-align:center!important}
  html[data-hv=c] .lede{order:3!important;text-align:center!important;margin:12px auto 0!important;max-width:340px!important}
  html[data-hv=c] .hero .stores{order:4!important;margin-top:24px!important}
  html[data-hv=c] .wa-badge{order:5!important;margin-top:10px!important}
}
/* trade switch: old Nova ducks behind the counter, the empty stall dissolves, new Nova pops up. Never two at once. */
.shop-scene .t-layer{transition:opacity .28s ease}
.shop-scene .t-layer .t-nova{scale:1}

/* ───────── round 16 ───────── */
/* trade stalls glide past; the orange panel is the window they pass through */
.shop-side{overflow:hidden}
.shop-scene .t-layer{transition:none}
/* phone landing: kicker sits straight */
@media (max-width:760px){ html[data-hv=c] .hero-copy .tag{transform:none!important} }