/* =====================================================================
   mangna.shop — one scroll-less screen.
   Everything is sized in rem, and the root font-size is driven by the
   viewport, so the whole page scales to fit any screen without scrolling.
   ===================================================================== */

:root{
  --bg:#07070a;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.20);
  --txt:#f6f4f0;
  --muted:#a3a1ae;
  --gold:#ffb703;
  --orange:#fb5607;
  --rose:#f43f5e;
  --mint:#2dd4a7;
  --grad:linear-gradient(100deg,var(--gold) 0%,var(--orange) 48%,var(--rose) 100%);
  --shadow:0 24px 70px -20px rgba(0,0,0,.85);
  --r-sm:12px;
  --r-md:18px;
  --r-lg:28px;
  --wrap:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{
  /* one scale knob for the whole page — keeps it inside one screen */
  font-size:clamp(13px, 0.34vw + 0.56vh + 5.6px, 18px);
}
body{
  margin:0;
  height:100dvh;
  overflow:hidden;
  background:var(--bg);
  color:var(--txt);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
h1,h2,h3{font-family:'Space Grotesk','Outfit',sans-serif;line-height:1.05;margin:0;letter-spacing:-.025em}
p,ul{margin:0}
ul{padding:0;list-style:none}

::selection{background:var(--gold);color:#000}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------------------------------------------------------------- shell */
.page{
  position:relative;z-index:2;
  height:100dvh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(.4rem,1.4vh,1.1rem);
  padding:clamp(.7rem,2.2vh,1.5rem) clamp(.9rem,3vw,2rem);
  max-width:var(--wrap);
  margin-inline:auto;
}

/* ------------------------------------------------------------- backdrop */
.grain{
  position:fixed;inset:-200%;z-index:60;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(4%,-5%)}
  60%{transform:translate(-3%,6%)}80%{transform:translate(5%,3%)}100%{transform:translate(0,0)}
}
#fx-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.9}
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;filter:blur(70px)}
.orb{position:absolute;border-radius:50%;opacity:.5;will-change:transform}
.orb--1{width:46vw;height:46vw;min-width:320px;min-height:320px;left:-12vw;top:-14vw;
  background:radial-gradient(circle at 30% 30%,#ffb703,transparent 65%);animation:drift1 22s ease-in-out infinite alternate}
.orb--2{width:40vw;height:40vw;min-width:280px;min-height:280px;right:-10vw;top:20vh;
  background:radial-gradient(circle at 60% 40%,#f43f5e,transparent 65%);animation:drift2 26s ease-in-out infinite alternate}
.orb--3{width:44vw;height:44vw;min-height:300px;left:26vw;bottom:-24vh;
  background:radial-gradient(circle at 50% 50%,#7c3aed,transparent 66%);animation:drift3 30s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(14vw,8vh,0) scale(1.18)}}
@keyframes drift2{to{transform:translate3d(-12vw,12vh,0) scale(1.22)}}
@keyframes drift3{to{transform:translate3d(10vw,-10vh,0) scale(1.12)}}

/* -------------------------------------------------------------- buttons */
.btn{
  --bg-btn:var(--surface-2);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1.3rem;border:1px solid var(--line-2);border-radius:999px;
  background:var(--bg-btn);cursor:pointer;font-weight:600;font-size:.95rem;
  overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s,color .3s;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transform:translateY(60%);
  background:var(--grad);transition:opacity .4s var(--ease),transform .5s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{opacity:1;transform:translateY(0)}
.btn:active{transform:translateY(0) scale(.97)}

.btn--primary{border-color:transparent;color:#150c00;background:var(--grad);background-size:180% 100%;
  box-shadow:0 10px 30px -12px rgba(251,86,7,.85)}
.btn--primary::after{background:var(--grad);background-size:180% 100%;filter:brightness(1.12)}
.btn--primary:hover{background-position:100% 0;box-shadow:0 16px 40px -12px rgba(251,86,7,.95)}
.btn--primary:hover::after{opacity:0}

.btn--outline{background:transparent}
.btn--outline::after{background:var(--surface-2)}

.btn.is-loading{pointer-events:none;color:transparent}
.spinner{
  position:absolute;width:1.1rem;height:1.1rem;border-radius:50%;display:none;
  border:2px solid rgba(0,0,0,.25);border-top-color:#150c00;animation:spin .7s linear infinite;
}
.is-loading .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.link-btn{
  background:none;border:0;padding:.2rem;cursor:pointer;color:var(--gold);
  font-size:.88rem;font-weight:600;transition:opacity .25s,transform .3s var(--ease)
}
.link-btn:hover{opacity:.8;transform:translateX(3px)}

/* -------------------------------------------------------------- masthead */
.mast{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.03em}
.brand__logo{
  display:block;height:clamp(3rem,1.5rem + 3.6vh,4.6rem);width:auto;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.5));
  animation:bob 3.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.mast__tag{color:var(--muted);font-size:.86rem}
.mast__tag b{color:var(--txt);font-weight:600}
.mast__tools{margin-left:auto;display:flex;align-items:center;gap:.55rem}

/* ------------------------------------------------------------------ hero */
.hero{
  display:grid;grid-template-columns:1.04fr .96fr;
  align-items:center;gap:clamp(1.5rem,4vw,3.4rem);
  min-height:0;
}
.hero__copy{min-width:0}

.pill{
  display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .85rem;
  border:1px solid var(--line-2);border-radius:999px;background:var(--surface);
  font-size:.8rem;color:var(--muted);backdrop-filter:blur(8px)
}
.pill strong{color:var(--txt);font-weight:600}
.pill__dot{width:7px;height:7px;border-radius:50%;background:var(--mint);animation:ping 2s infinite}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(45,212,167,.55)}
  70%{box-shadow:0 0 0 11px rgba(45,212,167,0)}
  100%{box-shadow:0 0 0 0 rgba(45,212,167,0)}
}

.hero__title{font-size:clamp(2.1rem,5.4vw,4rem);font-weight:800;margin:clamp(.6rem,1.8vh,1.1rem) 0 clamp(.5rem,1.4vh,.9rem)}
.hero__sub{color:var(--muted);font-size:clamp(.92rem,1.5vh,1.04rem);max-width:32rem}
.hero__sub b{color:var(--txt);font-weight:600}

.waitlist{margin-top:clamp(.9rem,2.4vh,1.5rem)}
.waitlist__row{display:flex;gap:.55rem;flex-wrap:wrap}
.field{position:relative;flex:1 1 11rem;min-width:0}
.field__ico{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);width:1.1rem;height:1.1rem;fill:var(--muted);pointer-events:none}
.field input{
  width:100%;padding:.85rem 1rem .85rem 2.8rem;border-radius:999px;
  background:rgba(0,0,0,.36);border:1px solid var(--line);color:var(--txt);
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.field input::placeholder{color:#6c6a79}
.field input:focus{outline:none;border-color:var(--gold);background:rgba(0,0,0,.5);box-shadow:0 0 0 4px rgba(255,183,3,.14)}
.field.is-bad input{border-color:var(--rose);box-shadow:0 0 0 4px rgba(244,63,94,.16);animation:shake .45s}
.field.is-good input{border-color:var(--mint);box-shadow:0 0 0 4px rgba(45,212,167,.16)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

.form__msg{margin-top:.7rem;font-size:.86rem;min-height:1.2em;display:none}
.form__msg.is-show{display:block;animation:msgIn .45s var(--ease)}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.form__msg.ok{color:var(--mint)}
.form__msg.err{color:#ff8fa3}
.waitlist.is-done .field,.waitlist.is-done .btn{opacity:.45;pointer-events:none;filter:grayscale(.4)}

.trust{
  display:flex;flex-wrap:wrap;gap:clamp(.7rem,2vw,1.3rem);
  margin-top:clamp(.8rem,2vh,1.3rem);color:var(--muted);font-size:.86rem
}
.trust b{color:var(--txt)}

/* -------------------------------------------------------- countdown card */
.hero__visual{position:relative;min-width:0;justify-self:stretch}
.countdown-card{
  position:relative;padding:clamp(1.1rem,2.6vh,1.7rem);border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid var(--line-2);box-shadow:var(--shadow);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  animation:cardFloat 7s ease-in-out infinite;
}
.countdown-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,183,3,.6),transparent 40%,transparent 60%,rgba(244,63,94,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:borderSpin 8s linear infinite;
}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes borderSpin{to{filter:hue-rotate(360deg)}}

.countdown-card__head{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin-bottom:clamp(.5rem,1.4vh,.9rem)}
.countdown-card__label{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.15em;text-transform:uppercase;font-size:.68rem;color:var(--gold)}
.countdown-card__date{font-size:.78rem;color:var(--muted)}

.clock{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:start;gap:.3rem}
.digit{
  position:relative;padding:clamp(.5rem,1.4vh,.75rem) .25rem .45rem;border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.28));
  border:1px solid var(--line);overflow:hidden;text-align:center;
}
.digit::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.45)}
.digit__val{
  display:block;font-family:'Space Grotesk',monospace;font-weight:700;
  font-size:clamp(1.5rem,min(5vw,7.6vh),2.6rem);line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,#ffc65c);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 26px rgba(255,183,3,.25);
}
.digit__cap{display:block;margin-top:.35rem;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.digit.is-flip .digit__val{animation:flip .5s var(--ease)}
@keyframes flip{
  0%{transform:rotateX(0) translateY(0);opacity:1}
  45%{transform:rotateX(-88deg) translateY(-9px);opacity:.15}
  55%{transform:rotateX(88deg) translateY(9px);opacity:.15}
  100%{transform:rotateX(0) translateY(0);opacity:1}
}
.clock__sep{display:flex;flex-direction:column;gap:.4rem;padding-top:clamp(.9rem,2.6vh,1.3rem)}
.clock__sep span{width:5px;height:5px;border-radius:50%;background:var(--line-2);animation:blink 1s steps(1) infinite}
.clock__sep span:last-child{animation-delay:.5s}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}
.clock.is-live .digit__val{animation:pulseSec .95s ease-in-out infinite}
@keyframes pulseSec{0%,100%{transform:scale(1)}18%{transform:scale(1.09)}}

.progress{height:6px;border-radius:99px;background:rgba(255,255,255,.08);margin-top:clamp(.8rem,2vh,1.2rem);overflow:hidden;position:relative}
.progress__fill{position:relative;height:100%;width:0;border-radius:99px;background:var(--grad);
  box-shadow:0 0 18px rgba(251,86,7,.6);transition:width .8s var(--ease)}
.progress__fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:sheen 2.4s linear infinite
}
@keyframes sheen{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.progress__meta{display:flex;justify-content:space-between;gap:1rem;margin-top:.5rem;font-size:.76rem;color:var(--muted)}
#progress-pct{color:var(--gold);font-weight:600}

.card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  margin-top:clamp(.8rem,2vh,1.2rem);padding-top:clamp(.7rem,1.8vh,1.1rem);border-top:1px solid var(--line);
}
.waiters{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--muted)}
.waiters__faces{display:flex}
.waiters__faces span{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:.85rem;
  background:var(--bg);border:1px solid var(--line-2);margin-left:-8px;transition:transform .3s var(--ease)
}
.waiters__faces span:first-child{margin-left:0}
.waiters__faces span:hover{transform:translateY(-4px) scale(1.12);z-index:2}
.waiters strong{color:var(--gold)}

/* ----------------------------------------------------------- float cards */
.float-card{
  position:absolute;display:flex;align-items:center;gap:.55rem;padding:.6rem .85rem;
  border-radius:var(--r-md);background:rgba(13,13,19,.88);border:1px solid var(--line-2);
  box-shadow:var(--shadow);backdrop-filter:blur(10px);font-size:.78rem
}
.float-card span{font-size:1.2rem}
.float-card b{display:block;font-weight:600;font-size:.8rem}
.float-card small{color:var(--muted);font-size:.7rem}
.float-card--a{left:-1.9rem;top:16%;animation:floaty 6s ease-in-out infinite}
.float-card--b{right:-1.4rem;bottom:9%;animation:floaty 7.5s ease-in-out infinite .6s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-13px) rotate(1.5deg)}}

/* ------------------------------------------------------------ foot strip */
.stage-foot{display:grid;gap:clamp(.3rem,1vh,.6rem)}
.ticker{
  overflow:hidden;padding:.55rem 0;border-block:1px solid var(--line);
  background:rgba(255,255,255,.02);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.ticker__track{
  display:flex;gap:2.6rem;width:max-content;white-space:nowrap;
  animation:slide 32s linear infinite;
  font-family:'Space Grotesk',sans-serif;font-size:.9rem;color:#5d5b69;
}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__track i{color:var(--line-2);font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}
.foot-note{text-align:center;color:#55535f;font-size:.74rem}

/* ---------------------------------------------------------- sound toggle */
.sound{
  position:relative;width:2.7rem;height:2.7rem;border-radius:50%;flex:none;
  display:grid;place-items:center;cursor:pointer;color:var(--txt);
  background:rgba(13,13,19,.7);border:1px solid var(--line-2);backdrop-filter:blur(12px);
  transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s;
}
.sound:hover{transform:scale(1.08) rotate(-6deg);border-color:var(--gold);color:var(--gold)}
.sound svg{width:1.2rem;height:1.2rem;fill:currentColor}
.sound__ico{grid-area:1/1;display:grid;place-items:center;transition:transform .4s var(--ease),opacity .3s}
.sound__ico--off{transform:rotate(-35deg) scale(.7);opacity:.4}
.sound[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#150c00}
.sound[aria-pressed="true"] .sound__ico--off{transform:rotate(35deg) scale(.7);opacity:0}
.sound[aria-pressed="true"] .sound__ico--on{animation:ring 1.1s ease-in-out infinite}
@keyframes ring{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.sound__tip{
  position:absolute;top:calc(100% + 8px);right:0;white-space:nowrap;
  padding:.3rem .6rem;border-radius:8px;background:rgba(13,13,19,.95);border:1px solid var(--line);
  font-size:.72rem;color:var(--muted);opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s var(--ease);
}
.sound:hover .sound__tip{opacity:1;transform:translateY(0)}
.sound.is-pop{animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.3) rotate(12deg)}100%{transform:scale(1)}}

/* ----------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1.2rem}
.modal[hidden]{display:none}
.modal.is-open .modal__backdrop{animation:fadeIn .35s}
.modal.is-open .modal__box{animation:modalIn .5s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}
.modal__backdrop{position:absolute;inset:0;background:rgba(3,3,6,.78);backdrop-filter:blur(8px)}
.modal__box{
  position:relative;width:min(100%,600px);max-height:86dvh;overflow:auto;padding:2rem;
  border-radius:var(--r-lg);background:linear-gradient(160deg,#131319,#0a0a0f);
  border:1px solid var(--line-2);box-shadow:var(--shadow)
}
.modal__close{
  position:absolute;top:.8rem;right:1rem;width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);font-size:1.3rem;line-height:1;
  transition:transform .3s,background .3s
}
.modal__close:hover{transform:rotate(90deg);background:var(--surface-2)}
.kicker{display:inline-block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);font-weight:600;margin-bottom:.7rem}
.modal__box h2{font-size:clamp(1.4rem,3.2vw,1.9rem);margin-bottom:.8rem}
.modal__box>p{color:var(--muted);font-size:.96rem}
.modal__box>p b{color:var(--txt)}
.modal__list{display:grid;gap:.6rem;margin:1.3rem 0}
.modal__list li{
  padding:.85rem 1rem;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);
  transition:border-color .3s,transform .3s var(--ease)
}
.modal__list li:hover{border-color:var(--line-2);transform:translateX(5px)}
.modal__list b{display:block;margin-bottom:.1rem;font-size:.98rem}
.modal__list span{color:var(--muted);font-size:.88rem}
.modal__cta{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)
}
.modal__count{font-family:'Space Grotesk',monospace;font-size:1.1rem;color:var(--gold);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- toasts */
.toasts{
  position:fixed;left:50%;bottom:clamp(1rem,3vh,2rem);transform:translateX(-50%);z-index:90;
  display:grid;gap:.5rem;width:min(100% - 2rem,400px);pointer-events:none
}
.toast{
  display:flex;gap:.65rem;align-items:flex-start;padding:.8rem 1rem;border-radius:var(--r-sm);
  background:rgba(13,13,19,.95);border:1px solid var(--line-2);box-shadow:var(--shadow);
  backdrop-filter:blur(12px);font-size:.88rem;animation:toastIn .45s var(--ease)
}
.toast.is-out{animation:toastOut .4s var(--ease) forwards}
.toast i{font-style:normal;font-size:1.05rem;line-height:1.3}
.toast b{display:block;font-size:.92rem}
.toast span{color:var(--muted);font-size:.82rem}
.toast--ok{border-color:rgba(45,212,167,.5)}
.toast--err{border-color:rgba(244,63,94,.5)}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-14px) scale(.96)}}

/* ---------------------------------------------------------------- reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.08s}
[data-delay="2"]{transition-delay:.16s}
[data-delay="3"]{transition-delay:.24s}

/* ------------------------------------------------------------ responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:clamp(1rem,3vh,1.8rem);align-content:center}
  .hero__sub{max-width:none}
  .float-card--a{left:-.4rem;top:-1.3rem}
  .float-card--b{right:-.4rem;bottom:-1.2rem}
  .clock__sep{padding-top:clamp(.7rem,2vh,1rem)}
}
/* narrow or short screens may scroll — never hide content */
@media (max-width:820px),(max-height:600px){
  html{font-size:clamp(13px,2.6vw + .4vh + 8px,17px)}
  body{height:auto;min-height:100dvh;overflow:auto}
  .page{height:auto;min-height:100dvh;padding-bottom:1.2rem}
  .mast__tag{order:3;width:100%;text-align:center}
  .float-card{display:none}
  .waitlist__row{flex-direction:column}
  /* in a column flex container flex-basis becomes the *height* — reset it */
  .waitlist__row .field{flex:0 0 auto;width:100%}
  .waitlist__row .btn{width:100%}
  .btn{width:100%}
  .mast__tools .btn{width:auto}
  .card-foot{gap:.5rem}
}
@media (max-width:520px){
  .mast{gap:.6rem}
  .mast__tag{display:none}
  .mast__tools{gap:.4rem}
  .waiters__faces{display:none}
  .hero__title{font-size:clamp(1.9rem,10vw,2.6rem)}
  .trust{gap:.5rem 1rem;font-size:.8rem}
  .foot-note{font-size:.68rem}
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  #fx-canvas{display:none}
  .float-card{display:none}
}