:root{
  --black:#0A0A0A; --coal:#161616; --line:#262626; --yellow:#FFD400; --white:#FFFFFF; --grey:#9A9A9A; --green:#5BE37D;
  --display:"Big Shoulders Display", Impact, sans-serif; --body:"Archivo", system-ui, sans-serif; --mono:"JetBrains Mono", ui-monospace, monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --m-bg:#111; --m-ink:#fff; --m-accent:#FFD400; --m-accent-ink:#000; --m-radius:20px; --m-font:"Archivo",system-ui; --m-display:"Big Shoulders Display",sans-serif;
}
*{box-sizing:border-box}
main{overflow-x:clip}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font:18px/1.5 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
::selection{background:var(--yellow);color:#000}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(16px,4vw,48px);
  background:linear-gradient(#0A0A0A 40%,transparent)}
.logo{font:900 26px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--yellow);text-decoration:none}
.nav-r{display:flex;gap:8px;align-items:center}
.navlink{font-weight:600;text-decoration:none;padding:10px 14px;border-radius:999px;white-space:nowrap}
.navlink:hover,.navlink[aria-current="page"]{color:var(--yellow)}
.eyebrow{font:700 clamp(13px,1.1vw,16px)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--yellow);margin:0 0 -8px;
  opacity:0;animation:fade .8s var(--ease) .3s forwards}
@keyframes fade{to{opacity:1}}
.more{display:inline-flex;gap:10px;margin-top:36px;font-weight:800;font-size:18px;text-decoration:none;border-bottom:2px solid var(--yellow);padding-bottom:4px}
.more span{transition:transform .4s var(--ease)}
.more:hover span{transform:translateX(6px)}
footer a{color:var(--white);text-decoration:none}
footer a:hover{color:var(--yellow)}
.signin{white-space:nowrap;font-weight:600;text-decoration:none;padding:10px 14px;border-radius:999px}
.signin:hover{background:var(--coal)}
.signup{font-weight:800;text-decoration:none;background:var(--yellow);color:#000;padding:10px 18px;border-radius:999px;transition:transform .3s var(--ease)}
.signup:hover{transform:translateY(-2px) rotate(-2deg)}

/* hero */
.hero{min-height:100svh;padding:110px clamp(16px,4vw,48px) 40px;display:grid;align-content:center;gap:28px}
.hero h1{font:900 clamp(64px,13.5vw,220px)/.84 var(--display);text-transform:uppercase;margin:0;letter-spacing:-.01em}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l > span{display:block;transform:translateY(105%);animation:up 1s var(--ease) forwards}
.hero h1 .l:nth-child(2) > span{animation-delay:.08s}
.hero h1 .l:nth-child(3) > span{animation-delay:.16s;color:var(--yellow)}
@keyframes up{to{transform:none}}

.meter{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,4vw,56px);align-items:end;max-width:1100px}
.odo{display:flex;align-items:flex-end;font:900 clamp(88px,17vw,260px)/1 var(--display);color:var(--yellow);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.odo .col{display:inline-block;height:1em;overflow:hidden;position:relative;width:.56em;text-align:center}
.odo .col > span{display:flex;flex-direction:column;transition:transform 1.4s var(--ease);transition-delay:calc(var(--i) * 70ms)}
.odo .col > span > i{font-style:normal;height:1em;line-height:1em}
.odo .col.dim{opacity:.16}
.odo .sep{width:.22em;text-align:center}
.meter-side{padding-bottom:clamp(14px,2.4vw,40px);max-width:380px}
.meter-side .cap{font:700 15px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--grey);margin:0 0 14px}
.meter-side label{display:flex;justify-content:space-between;font-weight:600;margin-bottom:8px}
.meter-side label b{color:var(--yellow);font-weight:800}
input[type=range]{width:100%;appearance:none;-webkit-appearance:none;height:8px;border-radius:8px;background:var(--line);outline-offset:6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--yellow);border:4px solid var(--black);box-shadow:0 0 0 2px var(--yellow);cursor:grab}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--yellow);border:4px solid var(--black);cursor:grab}
.meter-side p{color:var(--grey);margin:14px 0 0;font-size:16px}

/* caution tape */
.tapes{position:relative;height:clamp(180px,24vw,300px);margin:40px 0;overflow:hidden}
.tape{position:absolute;left:-5%;width:110%;white-space:nowrap;font:900 clamp(28px,4.4vw,64px)/1 var(--display);text-transform:uppercase;padding:.28em 0;letter-spacing:.02em}
.tape .track{display:inline-block;will-change:transform}
.tape.a{top:18%;background:var(--yellow);color:#000;transform:rotate(-4deg)}
.tape.b{top:52%;background:var(--white);color:#000;transform:rotate(3deg)}
.tape .track span{padding:0 .5em}
.tape .track span.star{color:inherit;opacity:.5}

/* sections */
section{padding:clamp(80px,12vw,160px) clamp(16px,4vw,48px)}
h2{font:900 clamp(52px,9vw,150px)/.86 var(--display);text-transform:uppercase;margin:0 0 clamp(32px,5vw,64px);letter-spacing:-.005em;max-width:14ch}
h2 em{font-style:normal;color:var(--yellow)}
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.reveal.in{opacity:1;transform:none}

.points{list-style:none;margin:0;padding:0;border-top:2px solid var(--line)}
.points li{display:grid;grid-template-columns:clamp(40px,6vw,90px) 1fr;align-items:center;gap:12px;padding:clamp(18px,3vw,34px) 0;border-bottom:2px solid var(--line);
  font:800 clamp(24px,3.6vw,52px)/1.08 var(--body);letter-spacing:-.02em}
.points li::before{content:"✦";color:var(--yellow);font-size:.8em;transition:transform .8s var(--ease)}
.points li:hover::before{transform:rotate(180deg) scale(1.2)}

/* split flap board */
.board{background:#000;border:2px solid var(--line);border-radius:18px;padding:clamp(14px,2vw,24px);max-width:1100px}
.board-head{display:flex;justify-content:space-between;font:700 13px/1 var(--mono);letter-spacing:.12em;color:#777;padding:0 2px 14px;border-bottom:1px solid var(--line)}
.flap-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #151515}
.flap-row:last-child{border-bottom:0}
.flaps{display:flex;gap:3px}
.flap{width:clamp(20px,3.6vw,46px);height:clamp(30px,5.2vw,64px);display:grid;place-items:center;background:#141414;border-radius:4px;position:relative;
  font:700 clamp(17px,3.2vw,40px)/1 var(--mono);color:var(--yellow);text-transform:uppercase}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#000}
.flap.tick{animation:tick .07s linear}
@keyframes tick{50%{transform:scaleY(.6)}}
.status{font:700 clamp(11px,1.4vw,16px)/1.2 var(--mono);color:var(--green);letter-spacing:.08em;text-align:right;white-space:nowrap}
.status::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:8px;animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.move-grid{display:grid;grid-template-columns:1fr;gap:40px}
.sub{color:var(--grey);font-size:clamp(19px,1.6vw,24px);max-width:34ch;margin:-24px 0 40px}

/* offers */
.offers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.msgs{display:grid;gap:12px}
.msg{background:var(--white);color:#111;border-radius:24px;padding:16px 18px;opacity:0;transform:translateX(60px) rotate(3deg);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.msg.on{opacity:1;transform:none}
.msg .from{display:flex;justify-content:space-between;font-size:14px;font-weight:800;margin-bottom:4px}
.msg .from span{color:#999;font-weight:600}
.msg p{margin:0;font-size:17px}
.msg mark{background:var(--yellow);padding:0 5px;border-radius:5px;font-weight:800}
.best{margin-top:28px;font:700 15px/1 var(--mono);color:var(--grey);letter-spacing:.06em;text-transform:uppercase}
.best b{display:block;font:900 clamp(64px,9vw,128px)/1 var(--display);color:var(--yellow);margin-top:10px;letter-spacing:0;font-variant-numeric:tabular-nums}

/* end */
.end{min-height:100svh;display:grid;align-content:center;justify-items:start;position:relative;overflow:hidden}
.end h2{font-size:clamp(72px,15vw,250px);max-width:none;margin-bottom:40px}
.big-cta{display:inline-flex;align-items:center;gap:16px;background:var(--yellow);color:#000;text-decoration:none;font:900 clamp(28px,4vw,48px)/1 var(--display);text-transform:uppercase;
  padding:22px 36px;border-radius:999px;transition:transform .4s var(--ease),box-shadow .4s}
.big-cta:hover{transform:translateY(-4px) rotate(-2deg);box-shadow:0 20px 60px -10px rgba(255,212,0,.5)}
.big-cta .arrow{transition:transform .4s var(--ease)}
.big-cta:hover .arrow{transform:translateX(8px)}
.end .small{margin-top:20px;color:var(--grey);font-size:16px}
.end .small a{color:var(--white);font-weight:700}
footer{padding:24px clamp(16px,4vw,48px);border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#666;font-size:14px}

@media (max-width:480px){.navlink{display:none}.flap{width:17px;height:28px;font-size:15px}.flaps{gap:2px}.status{white-space:normal;font-size:10px}.status::before{display:none}.logo{font-size:21px}.signup{padding:9px 14px}.signin{padding:9px 6px}.nav-r{gap:2px}}
@media (max-width:860px){
  .meter{grid-template-columns:1fr}
  .meter-side{padding-bottom:0}
  .offers{grid-template-columns:1fr}
  .signin{padding:10px 8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .reveal{opacity:1;transform:none}
}