/* ============================ THEME TOKENS ============================
Repaint the campaign here: the :root vars below + the display font in the
Google Fonts . Everything else derives from these.
====================================================================== */
/* WORKOUT — "volt" retheme of the campaign skeleton.
Language: acid lime on carbon with cobalt as the second voice, halftone
dot fields where a photo would be, hard outlines carrying cobalt offsets
instead of drop shadows. Archivo Expanded (wdth 125) display over Hanken
body, Space Mono for every technical label. One signature motion: the
hero's HALFTONE RESOLVE — a dot grid tightens until the shot emerges from
it, and only then does the wordmark drop in. */
:root{
--volt:#D7F205; --volt2:#B4CC00; --cobalt:#2B2BFF; --cobalt2:#1B1BCC;
--carbon:#0B0D10; --carbon2:#12151A; --carbon3:#1A1F26;
--mist:#C9D1FF; --chalk:#F2F4F0; --ink:#04050A;
--white:#F2F4F0; --mute:rgba(242,244,240,.62); --line:rgba(242,244,240,.14);
--f-disp:"Archivo",system-ui,sans-serif;
--f-mono:"Space Mono",ui-monospace,monospace;
/* aliases the shared activity-menu skins itself from */
--navy:#0B0D10; --green:#D7F205;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:"Hanken Grotesk",system-ui,sans-serif;background:#05070A;color:var(--white);display:flex;justify-content:center}
.h5{position:relative;width:min(460px,100vw);background:var(--carbon);overflow:visible;min-height:100vh}
.halftone{background-image:radial-gradient(circle, rgba(215,242,5,.55) 1.4px, transparent 1.6px);background-size:9px 9px}
/* ---------- preloader ---------- */
.preloader{position:fixed;inset:0;background:var(--carbon);z-index:9999;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
transition:transform .85s cubic-bezier(.76,0,.24,1)}
.preloader.done{transform:translateY(-100%)}
.pl-lockup{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:clamp(8px,2.5vw,18px);padding:0 14px;max-width:100%}
.pl-logo{height:clamp(24px,6.5vw,50px);width:auto;flex:0 0 auto;display:block;opacity:0;animation:plUp .6s cubic-bezier(.2,.8,.2,1) .05s forwards}
.pl-x{font-family:var(--f-disp);font-weight:800;font-size:clamp(16px,4.5vw,30px);line-height:1;flex:0 0 auto;color:#fff;opacity:.45;animation:plxin .5s ease .16s both}
@keyframes plUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes plxin{from{opacity:0;transform:translateY(10px)}to{opacity:.4;transform:none}}
.pl-mark{font-family:var(--f-disp);font-weight:800;font-variation-settings:"wdth" 125;text-transform:uppercase;color:var(--volt);font-size:clamp(22px,6.4vw,48px);letter-spacing:-.03em;line-height:1.3;padding-bottom:.06em;white-space:nowrap;flex:0 1 auto;
text-shadow:3px 3px 0 var(--cobalt);
clip-path:inset(0 100% 0 0);animation:plReveal 1.5s cubic-bezier(.76,0,.24,1) .15s forwards}
@keyframes plReveal{to{clip-path:inset(0 0 0 0)}}
.pl-count{position:absolute;bottom:38px;left:0;right:0;text-align:center;font-family:var(--f-mono);font-weight:700;color:var(--mist);font-size:13px;letter-spacing:.22em}
/* the unfilled track sits BEHIND the fill — both are positioned, so without
the z-index the later pseudo-element would paint over the bar */
.preloader::after{content:"";position:absolute;bottom:0;left:0;right:0;height:6px;background:var(--carbon3);z-index:0}
.pl-bar{position:absolute;bottom:0;left:0;height:6px;width:0;background:var(--volt);z-index:1}
/* The preloader is the first set: the bar fills, and the count rides it on a
lime chip that pumps once a beat. No mascot on this campaign — the thing
that moves is the number, which is also what the machine counts later. */
.pl-rider{position:absolute;bottom:4px;left:0;transform:translateX(-50%);z-index:6;pointer-events:none;
display:flex;flex-direction:column;align-items:center;gap:6px}
/* the kit rides with the count: one 128px sprite, four frames stacked, cycled
with steps() so there is no JS and no second request per frame */
.pl-icon{width:30px;height:30px;flex:0 0 auto;
background:url("/workout/assets/pl-icons.png") 0 0/30px 120px no-repeat;
animation:plCycle 2.8s steps(4) infinite;
filter:drop-shadow(0 2px 5px rgba(11,13,16,.9))}
@keyframes plCycle{to{background-position:0 -120px}}
.pl-chip{font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.06em;
background:var(--volt);color:var(--carbon);padding:4px 9px;border-radius:3px;
font-variant-numeric:tabular-nums;box-shadow:2px 2px 0 var(--cobalt);
animation:plPump .62s ease-in-out infinite alternate}
.pl-rider::after{content:"";width:2px;height:9px;background:var(--volt)}
@keyframes plPump{from{transform:scale(1)}to{transform:scale(1.07)}}
.pl-set{position:absolute;bottom:104px;left:0;right:0;text-align:center;font-family:var(--f-mono);
font-weight:700;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--mist);opacity:.7}
/* reveal */
.rv{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}
/* ---------- top bar ---------- */
.topbar{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:16px 18px}
.logo-img{height:34px;width:auto;display:block;
filter:drop-shadow(0 2px 10px rgba(5,7,10,.92)) drop-shadow(0 0 3px rgba(5,7,10,.7))}
/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;height:92vh;height:92svh;min-height:620px;max-height:940px}
/* The hero is a WALL of examples, not one photograph. A phone viewport is
~0.46 wide-to-tall and the shots are 9:16, so any single one cover-cropped
to fill loses the sides of the frame. Two columns of 9:16 cards drifting in
opposite directions show four to six at once, each at the aspect it was
shot, and the opposing directions read as motion without anything sliding
out of the frame. */
.hero .excols{position:absolute;inset:-18% 0;z-index:1;display:flex;gap:10px;padding:0 10px}
.hero .excol{flex:1;display:flex;flex-direction:column;gap:10px;will-change:transform}
/* ships a UA margin of 1em 40px; unreset it eats most of a column */
.hero .exc{flex:0 0 auto;margin:0;position:relative;border:2px solid var(--volt);border-radius:5px;
overflow:hidden;background:var(--carbon2);box-shadow:3px 3px 0 var(--cobalt)}
.hero .exc img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover}
body.ready.go .hero .excol.a{animation:driftUp 46s linear infinite}
body.ready.go .hero .excol.b{animation:driftDown 46s linear infinite}
/* each column holds its set twice, so 50% is exactly one set */
@keyframes driftUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes driftDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
body.skip-intro .hero .excol{animation:none}
/* Two columns on a phone. Wider screens get MORE columns rather than wider
cards — at 1280px two columns make each card 620px across, which shows a
torso instead of a person. */
.hero .excol.c,.hero .excol.d,.hero .excol.e,.hero .excol.f{display:none}
body.ready.go .hero .excol.c,body.ready.go .hero .excol.e{animation:driftUp 52s linear infinite}
body.ready.go .hero .excol.d,body.ready.go .hero .excol.f{animation:driftDown 52s linear infinite}
body.ready.go .hero .excol.c{animation-duration:58s}
body.ready.go .hero .excol.d{animation-duration:40s}
body.ready.go .hero .excol.e{animation-duration:44s}
body.ready.go .hero .excol.f{animation-duration:62s}
/* The scrim earns its darkness only where type sits on top of it: a short
fade under the logo, nothing through the middle of the wall, and a late
ramp under the copy block. The previous curve carried .14–.18 across the
whole frame, which read as a grey sheet over every photograph. */
.hero .scrim{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,
rgba(5,7,10,.6) 0%,rgba(11,13,16,.08) 16%,rgba(11,13,16,0) 34%,rgba(11,13,16,0) 52%,
rgba(11,13,16,.5) 70%,rgba(11,13,16,.9) 86%,var(--carbon) 100%)}
.hero .content{position:absolute;left:0;right:0;bottom:26px;padding:0 22px;z-index:4}
.eyebrow{font-family:var(--f-mono);font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--volt);text-shadow:0 2px 8px rgba(5,7,10,.9)}
.hashtag{font-family:var(--f-disp);font-weight:800;font-variation-settings:"wdth" 125;text-transform:uppercase;
font-size:clamp(38px,11.6vw,64px);line-height:.9;margin:8px 0 8px;letter-spacing:-.04em;white-space:nowrap;
color:var(--volt);text-shadow:4px 4px 0 var(--cobalt)}
.tagline{font-size:clamp(12px,4vw,18px);font-weight:600;color:var(--chalk);margin-bottom:18px;
text-shadow:0 2px 10px rgba(5,7,10,.85)}
.heroup{opacity:0;transform:translateY(26px)}
body.ready.go .heroup{animation:up .8s cubic-bezier(.2,.8,.2,1) forwards}
body.ready.go .heroup.a2{animation-delay:.16s}
body.ready.go .heroup.a3{animation-delay:.32s}
body.ready.go .heroup.a4{animation-delay:.48s}
@keyframes up{to{opacity:1;transform:none}}
body.skip-intro .heroup{animation:none;opacity:1;transform:none}
body.skip-intro .extrack{animation:none}
/* THE SIGNATURE MOTION — halftone resolve. The hero opens as a coarse dot
grid printed over the shot; the grid tightens to nothing over ~2.1s and
the photograph emerges from it. The dots are the campaign's own pattern,
so the reveal is made of the same material as the rest of the page. */
.hero .grain{position:absolute;inset:0;z-index:2;pointer-events:none;
background-image:radial-gradient(circle,var(--carbon) 2.9px,transparent 3.1px);background-size:9px 9px}
body.ready.go .hero .grain{animation:resolve 2.1s cubic-bezier(.3,.75,.25,1) forwards}
@keyframes resolve{from{background-size:9px 9px;opacity:1}to{background-size:2px 2px;opacity:.07}}
body.skip-intro .hero .grain{animation:none;background-size:2px 2px;opacity:.07}
/* the copy waits for the print: title lands at .95s, the rest follows */
body.ready.go .heroup.a2{animation-delay:.95s}
body.ready.go .heroup.a3{animation-delay:1.15s}
body.ready.go .heroup.a4{animation-delay:1.35s}
/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:3px solid var(--ink);text-decoration:none;
font-family:var(--f-disp);font-weight:800;font-size:16px;letter-spacing:-.01em;background:var(--volt);color:var(--carbon);
padding:13px 26px;border-radius:14px;box-shadow:4px 4px 0 var(--ink);
transition:transform .14s cubic-bezier(.34,1.56,.64,1),box-shadow .15s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.full{width:100%;justify-content:center;font-size:19px;padding:16px}
.btn.kicked{animation:btnpop .42s ease}
@keyframes btnpop{0%{transform:scale(.9)}45%{transform:scale(1.08)}100%{transform:scale(1)}}
/* ---------- ticker ---------- */
.ticker{background:var(--volt);color:var(--carbon);font-family:var(--f-mono);font-weight:700;text-transform:uppercase;
font-size:11px;letter-spacing:.18em;padding:9px 0;overflow:hidden;white-space:nowrap;
border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.ticker span{display:inline-block;padding-left:100%;animation:slide 16s linear infinite}
.ticker span i{font-style:normal;margin:0 7px;opacity:.6}
@keyframes slide{to{transform:translateX(-100%)}}
/* ---------- sections ---------- */
section{padding:46px 22px}
.sec-eyebrow{font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--volt)}
h2{font-family:var(--f-disp);font-weight:800;font-variation-settings:"wdth" 125;text-transform:uppercase;font-size:clamp(28px,8.4vw,40px);letter-spacing:-.04em;line-height:.92;margin:6px 0 16px;color:var(--chalk)}
.lead{font-size:15px;line-height:1.55;color:var(--mute)}
/* social proof */
.proof{display:flex;align-items:center;gap:14px;background:var(--carbon2);border:3px solid var(--ink);border-radius:16px;padding:16px 18px;margin-top:-8px;box-shadow:4px 4px 0 var(--ink)}
.proof .num{font-family:var(--f-disp);font-weight:800;font-variation-settings:"wdth" 125;font-size:30px;letter-spacing:-.04em;color:var(--volt);line-height:1;font-variant-numeric:tabular-nums;text-shadow:2px 2px 0 var(--cobalt)}
.proof .lbl{font-size:13px;color:var(--mute);font-weight:600}
.avs{display:flex;margin-left:auto}
.avs img{width:30px;height:30px;border-radius:50%;border:2px solid var(--carbon2);margin-left:-10px;object-fit:cover;background:var(--carbon2)}
/* steps */
.steps{display:flex;flex-direction:column;gap:12px}
.step{display:flex;gap:14px;align-items:flex-start;background:var(--carbon2);border:3px solid var(--ink);border-radius:14px;padding:16px;box-shadow:4px 4px 0 var(--ink)}
.step .n{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:var(--volt);border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--f-disp);font-weight:800;font-size:17px;letter-spacing:-.03em;color:var(--carbon)}
.step:nth-child(2) .n{background:var(--cobalt);color:var(--chalk)}
.step:nth-child(3) .n{background:var(--chalk);color:var(--carbon)}
.step h3{font-family:var(--f-disp);font-weight:800;font-size:17px;margin-bottom:2px}
.step p{font-size:13.5px;color:var(--mute);line-height:1.45}
/* pattern divider */
.divider{height:150px;overflow:hidden;position:relative;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.divider img{width:100%;height:100%;object-fit:cover;object-position:center}
/* ---------- THE INTERACTION BLOCK ---------- */
/* Section ships hidden; block.js unhides. Style your campaign's playable
thing here. Keep overlays modeled on the auth-modal pattern. */
#block[hidden]{display:none}
#blockRoot{min-height:120px}
/* ---------- the signing desk ---------- */
.mach{position:relative}
.m-screen{display:none;flex-direction:column;gap:14px}
.mach[data-step="pick"] .m-pick,
.mach[data-step="upload"] .m-upload,
.mach[data-step="set"] .m-set,
.mach[data-step="reveal"] .m-reveal{display:flex}
.m-plays{font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--mute);margin-bottom:14px}
.m-plays b{color:var(--volt)}
.m-plays[hidden]{display:none}
.m-hd{display:flex;flex-direction:column;gap:4px}
.m-hd2{margin-top:6px}
.m-step{font-family:var(--f-mono);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.m-hd h3{font-family:var(--f-disp);font-weight:800;font-variation-settings:"wdth" 125;text-transform:uppercase;
font-size:20px;letter-spacing:-.035em;color:var(--chalk)}
.m-row{display:flex;gap:10px}
.m-row .btn{flex:1;justify-content:center}
.btn.ghost{background:transparent;color:var(--chalk);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--carbon3);transform:none;box-shadow:none}
.btn[disabled]{opacity:.4;pointer-events:none}
.m-next{justify-content:center}
.m-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-tile{appearance:none;cursor:pointer;text-align:left;padding:14px 13px;border-radius:12px;min-height:74px;
background:var(--carbon2);border:2px solid var(--line2);color:var(--chalk);display:flex;flex-direction:column;
gap:3px;justify-content:center;transition:border-color .15s ease,background .15s ease}
.m-tile:hover{background:var(--carbon3)}
.m-tile b{font-family:var(--f-disp);font-weight:800;font-variation-settings:"wdth" 125;font-size:19px;letter-spacing:-.035em;line-height:1}
.m-tile em{font-style:normal;font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.m-tile[aria-pressed="true"]{border-color:var(--volt);background:var(--carbon3);box-shadow:4px 4px 0 var(--cobalt)}
.m-tile[aria-pressed="true"] b{color:var(--volt)}
/* two photographs, never a gender question — the player taps a look */
.m-drop{display:block;position:relative;min-height:210px;border-radius:12px;overflow:hidden;cursor:pointer;
border:2px dashed rgba(242,244,240,.26);background:var(--carbon2);display:grid;place-items:center}
.m-drop:hover{border-color:var(--volt)}
.m-drop.has{border-style:solid;border-color:var(--volt)}
.m-drop-empty{text-align:center;padding:0 22px}
.m-drop.has .m-drop-empty{display:none}
.m-drop-empty b{display:block;font-family:var(--f-disp);font-weight:800;font-size:17px;margin-bottom:5px}
.m-drop-empty i{font-style:normal;font-size:13px;color:var(--mute)}
.m-drop-pic{display:block;width:100%;max-height:340px;object-fit:cover}
.m-set{align-items:center;text-align:center;gap:0;padding:8px 0 4px}
.m-count{font-family:var(--f-disp);font-weight:800;font-variation-settings:"wdth" 125;font-size:76px;line-height:.9;
letter-spacing:-.05em;color:var(--volt);font-variant-numeric:tabular-nums}
.m-count-l{font-family:var(--f-mono);font-weight:700;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--mist);margin-top:6px}
.m-meter{width:100%;max-width:280px;height:6px;border-radius:3px;background:var(--carbon3);overflow:hidden;margin:18px 0 8px}
.m-meter i{display:block;height:100%;width:0;background:var(--volt);transition:width .12s ease}
.m-status{font-family:var(--f-mono);font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);min-height:15px}
.m-push{margin:22px 0 6px;width:132px;height:132px;border-radius:50%;flex:0 0 auto;appearance:none;cursor:pointer;
border:3px solid var(--carbon);background:var(--volt);color:var(--carbon);box-shadow:0 0 0 3px var(--cobalt);
font-family:var(--f-disp);font-weight:800;font-variation-settings:"wdth" 125;font-size:27px;letter-spacing:-.03em;
transition:transform .07s ease}
.m-push:active{transform:scale(.94)}
.m-push[disabled]{opacity:.45;pointer-events:none}
.m-hint{font-size:12px;color:var(--mute);line-height:1.45;min-height:32px;max-width:280px}
.m-poster{border-radius:10px;overflow:hidden;border:2px solid var(--volt);background:var(--carbon2)}
.m-poster img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.m-acts{display:flex;flex-direction:column;gap:10px}
.m-again{appearance:none;background:none;border:0;cursor:pointer;color:var(--mute);padding:4px;
font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.m-again:hover{color:var(--volt)}
.m-toast{position:fixed;left:50%;transform:translate(-50%,10px);bottom:96px;z-index:400;max-width:min(420px,92vw);
background:var(--chalk);color:var(--carbon);border-radius:8px;padding:11px 15px;font-size:13.5px;font-weight:600;
opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.m-toast.on{opacity:1;transform:translate(-50%,0)}
@media (min-width:768px){
.m-tiles{grid-template-columns:repeat(4,1fr)}
.m-hd h3{font-size:24px}
.m-poster{max-width:460px}
.m-acts{max-width:460px}
}
/* reward card */
.reward{background:var(--carbon2);border-radius:20px;padding:22px 18px;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.reward .rtop{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.reward .rtitle{font-family:var(--f-disp);font-weight:800;font-variation-settings:"wdth" 125;text-transform:uppercase;font-size:23px;letter-spacing:-.035em;line-height:.95}
.reward .rtitle b{color:var(--volt)}
.reward .rtoday{text-align:right;font-size:12px;color:var(--mute);line-height:1.4}
.reward .rtoday b{display:block;color:var(--chalk);font-size:16px;font-family:var(--f-disp);font-weight:800}
.reqline{background:var(--carbon3);border-radius:12px;padding:11px 14px;font-size:13px;color:rgba(255,255,255,.8);font-weight:600;margin-bottom:18px}
.reqline b{color:var(--volt)}
.ladder{position:relative;padding-left:4px}
.track{position:absolute;left:22px;top:30px;bottom:30px;width:5px;background:rgba(255,255,255,.12);border-radius:5px;overflow:hidden}
.track .fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--volt);border-radius:5px;transition:height 1.6s cubic-bezier(.4,0,.2,1) .2s}
.in .track .fill{height:100%}
.tier{position:relative;display:flex;align-items:center;gap:15px;padding:11px 0;z-index:2;opacity:0;transform:translateX(-12px);transition:opacity .5s,transform .5s}
.in .tier{opacity:1;transform:none}
.in .tier:nth-child(2){transition-delay:.3s}.in .tier:nth-child(3){transition-delay:.6s}.in .tier:nth-child(4){transition-delay:.9s}
.tier .dot{width:44px;height:44px;flex:0 0 auto;border-radius:50%;background:var(--carbon3);border:3px solid var(--volt);display:grid;place-items:center;font-size:11px;letter-spacing:.08em;font-family:var(--f-mono);font-weight:700;color:var(--volt)}
.tier .info .w{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.tier .info .r{font-family:var(--f-disp);font-weight:800;font-size:18px;color:var(--chalk)}
.reward .btn{margin-top:18px}
/* footer */
footer{padding:30px 22px 130px;text-align:center;border-top:1px solid var(--line)}
.fine{font-size:11px;color:rgba(255,255,255,.4);line-height:1.6;margin-top:18px;letter-spacing:.02em}
/* sticky bottom CTA */
.stickybar{position:fixed;bottom:0;left:50%;transform:translate(-50%,120%);width:min(460px,100vw);
background:rgba(11,13,16,.94);backdrop-filter:blur(10px);border-top:3px solid var(--ink);
padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;z-index:320;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.stickybar.show{transform:translate(-50%,0)}
.stickybar .s-left{font-size:12px;color:var(--mute);font-weight:600;line-height:1.3}
.stickybar .s-left b{display:block;color:var(--volt);font-family:var(--f-disp);font-weight:800;font-size:15px}
.stickybar .btn{margin-left:auto;padding:11px 20px;font-size:16px}
/* ============ TABLET / DESKTOP ============ */
@media (min-width:768px){
.h5{width:100%}
section{padding-top:80px;padding-bottom:80px;
padding-left:max(6vw,calc((100% - 1080px) / 2));
padding-right:max(6vw,calc((100% - 1080px) / 2))}
h2{font-size:clamp(44px,5vw,64px)}
.sec-eyebrow{font-size:14px}
.lead{font-size:17px;max-width:60ch}
.hero{height:94vh;height:94svh;min-height:680px;max-height:1000px}
.hero .content{left:50%;transform:translateX(-50%);width:100%;max-width:1080px;padding:0 6vw;bottom:7vh}
.hero .excols{gap:14px;padding:0 14px}
.hero .excol{gap:14px}
.hero .excol.c,.hero .excol.d{display:flex}
.hashtag{font-size:clamp(72px,9vw,140px)}
.tagline{font-size:22px;max-width:46ch}
.topbar{padding:22px}
.logo-img{height:46px}
.proof{max-width:560px;margin-left:auto;margin-right:auto}
.steps{flex-direction:row;gap:18px}
.step{flex:1;flex-direction:column;padding:26px}
.step h3{font-size:19px;margin-top:8px}
.step p{font-size:14.5px}
.reward{padding:36px 34px}
.reward .rtitle{font-size:32px}
.reqline{font-size:14px}
.tier .info .r{font-size:20px}
.divider{height:220px}
.ticker{font-size:15px;padding:12px 0}
.map-zoom{right:14px;top:14px}
.pin{width:44px;height:52px}
.pin .drop{width:32px;height:32px}
.pin-card{left:50%;bottom:auto;top:50%;transform:translate(-50%,-50%);border-radius:18px;width:min(430px,92vw);
animation:cardpop .3s cubic-bezier(.34,1.4,.64,1)}
.stickybar{width:auto;min-width:460px;max-width:720px;border:3px solid var(--ink);border-radius:60px;
bottom:24px;padding:12px 14px 12px 24px}
footer{padding:60px 6vw 120px}
}
@media (min-width:1180px){
section{padding-top:96px;padding-bottom:96px}
.hashtag{font-size:clamp(90px,9vw,150px)}
.hero .excol.e,.hero .excol.f{display:flex}
}
@media (prefers-reduced-motion:reduce){
.rv,.heroup{transition:none;animation:none!important;opacity:1;transform:none}
.hero .grain{animation:none!important;background-size:2px 2px;opacity:.07}
.pl-icon,.pl-chip{animation:none!important}
.ticker span{animation:none;padding-left:0}
.hero .excol{animation:none!important}
}
.auth-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-modal[hidden]{display:none}
.auth-backdrop{position:absolute;inset:0;background:rgba(4,5,10,.78);backdrop-filter:blur(6px)}
.auth-card{position:relative;z-index:1;width:min(380px,92vw);background:var(--carbon2);border:3px solid var(--ink);border-radius:20px;padding:32px 26px 24px;text-align:center;box-shadow:6px 6px 0 var(--ink);animation:authpop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes authpop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.auth-x{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--mute);font-size:26px;line-height:1;cursor:pointer}
.auth-logo{height:30px;width:auto;margin:0 auto 18px;display:block}
.auth-title{font-family:var(--f-disp);font-weight:800;font-size:24px;margin-bottom:8px}
.auth-body{font-size:14px;color:var(--mute);line-height:1.5;margin-bottom:22px}
.btn.is-ended{background:var(--carbon3)!important;color:var(--mute)!important;box-shadow:none!important;cursor:default;pointer-events:none}
.lang{position:relative;display:inline-block;margin-top:18px}
.lang-btn{display:inline-flex;align-items:center;gap:8px;background:var(--carbon2);color:#fff;border:1px solid var(--line);border-radius:30px;padding:9px 15px;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .15s ease}
.lang-btn:hover{border-color:rgba(255,255,255,.28)}
.lang-globe{font-size:14px;opacity:.85}
.lang-chev{opacity:.55}
.lang-menu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--carbon3);border:1px solid var(--line);border-radius:14px;padding:6px;display:none;flex-direction:column;min-width:150px;max-height:248px;overflow:auto;box-shadow:0 18px 44px -12px rgba(0,0,0,.65);z-index:50}
.lang-menu.open{display:flex}
.lang-opt{background:none;border:none;color:rgba(255,255,255,.82);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:13px;font-weight:600;text-align:left;padding:9px 12px;border-radius:9px;cursor:pointer;white-space:nowrap}
.lang-opt:hover{background:rgba(255,255,255,.08);color:#fff}
.lang-opt.sel{color:var(--volt)}
.tb-right{display:flex;align-items:center;gap:9px}
.share-wrap{position:relative}
.share-btn{width:36px;height:36px;display:grid;place-items:center;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:50%;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .15s ease}
.share-btn:hover{border-color:rgba(255,255,255,.3)}
.share-btn svg{width:17px;height:17px;transform:translateX(-1px)}
.share-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--carbon3);border:1px solid var(--line);border-radius:14px;padding:6px;display:flex;flex-direction:column;min-width:174px;box-shadow:0 18px 44px -12px rgba(0,0,0,.6);z-index:60}
.share-menu[hidden]{display:none}
.share-wrap.up .share-menu{top:auto;bottom:calc(100% + 8px)}
.share-opt{display:flex;align-items:center;gap:11px;background:none;border:none;color:rgba(255,255,255,.85);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:14px;font-weight:600;text-align:left;padding:10px 12px;border-radius:9px;cursor:pointer;text-decoration:none;white-space:nowrap;width:100%}
.share-opt:hover{background:rgba(255,255,255,.08);color:#fff}
.share-opt svg{width:17px;height:17px;flex:0 0 auto;color:var(--volt)}