/** Shopify CDN: Minification failed

Line 677:64 Unexpected "}"

**/

@font-face{font-family:'Bogart';src:url(//frostlab.us/cdn/shop/t/2/assets/bogart-black-v2.woff2?v=6943946078938801521787689073) format('woff2');font-weight:900;font-display:swap;
  unicode-range:U+0000-0024,U+0026-002F,U+003A-10FFFF}

/* shown in place of the locator when it is switched off from the dashboard */
.loc-down{width:min(680px,92vw);margin:1.6rem auto 0;padding:1.6rem 1.4rem;text-align:center;
  border-radius:20px;background:linear-gradient(170deg,rgba(127,233,255,.06),rgba(10,26,42,.55));
  border:1px solid rgba(127,233,255,.18)}
.loc-down h3{font-family:var(--fd);font-size:1.15rem;color:#eafdff;margin-bottom:.5rem;text-transform:uppercase}
.loc-down p{font-family:var(--fb);font-size:.95rem;line-height:1.6;color:#dceef6;margin:0 auto;max-width:46ch}
.loc-down .lock{font-size:1.8rem;display:block;margin-bottom:.5rem}

/* store list: collapsible header + sign-in gate (the map is never hidden) */
.slist{margin-top:.2rem}
#slist[hidden],.slist-body[hidden],.loc-gate[hidden],.slist-who[hidden]{display:none!important}
.slist-hd{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  min-height:52px;padding:.85rem 1.15rem;cursor:pointer;text-align:left;
  border-radius:16px;border:1px solid rgba(127,233,255,.18);
  background:linear-gradient(170deg,rgba(127,233,255,.06),rgba(10,26,42,.55));
  font-family:var(--fm);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:#7fe9ff}
.slist-hd:hover{border-color:rgba(127,233,255,.42)}
.slist-hd .n{color:#eafdff}
.slist-hd .act{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.slist-chev{display:inline-block;font-size:.85rem;line-height:1;transition:transform .2s}
.slist-hd[aria-expanded="true"] .slist-chev{transform:rotate(180deg)}
.slist-body{margin-top:1.1rem}
.loc-gate{text-align:center;padding:1.7rem 1.3rem;border-radius:20px;
  background:linear-gradient(170deg,rgba(127,233,255,.06),rgba(10,26,42,.55));
  border:1px solid rgba(127,233,255,.18)}
.loc-gate .ic{font-size:1.8rem;display:block;margin-bottom:.5rem}
.loc-gate h3{font-family:var(--fd);font-size:1.15rem;color:#eafdff;margin-bottom:.5rem;text-transform:uppercase}
.loc-gate p{font-family:var(--fb);font-size:.95rem;line-height:1.6;color:#dceef6;margin:0 auto 1.2rem;max-width:46ch}
.loc-gate .btn{min-height:44px}
.loc-gate .fine{font-family:var(--fb);font-size:.84rem;line-height:1.55;color:#dceef6;
  margin:1.1rem auto 0;max-width:52ch}
.slist-who{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem .8rem;
  margin:.2rem auto 1.15rem;font-family:var(--fb);font-size:.9rem;color:#dceef6}
.slist-who b{color:#eafdff;font-weight:700;overflow-wrap:anywhere}
.slist-out{font-family:var(--fm);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:#7fe9ff;background:rgba(127,233,255,.06);border:1px solid rgba(127,233,255,.18);
  border-radius:100px;padding:.6rem 1.1rem;min-height:44px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.slist-out:hover{border-color:#7fe9ff}
@media(max-width:430px){
  .slist-hd{font-size:.62rem;letter-spacing:.06em;padding:.85rem .95rem;gap:.5rem}
  .loc-gate{padding:1.4rem 1rem}
}

/* shown in place of the whole locator when nobody is signed in */
.loc-locked{width:min(560px,92vw);margin:1.4rem auto 0;padding:2rem 1.5rem;text-align:center;
  border-radius:22px;background:linear-gradient(170deg,rgba(127,233,255,.07),rgba(10,26,42,.6));
  border:1px solid rgba(127,233,255,.22)}
.loc-locked .ic{display:block;margin:0 auto .6rem;width:38px;height:38px;color:#7fe9ff}
.loc-locked h3{font-family:var(--fd);font-size:1.25rem;color:#eafdff;margin-bottom:.6rem;text-transform:uppercase}
.loc-locked p{font-family:var(--fb);font-size:.95rem;line-height:1.6;color:#dceef6;margin:0 auto .9rem;max-width:44ch}
.loc-locked .fine{font-size:.84rem;color:#c6dbe7;margin-bottom:0}
.loc-locked .fine a{display:inline-block;color:#7fe9ff;text-decoration:underline;
  padding:.75rem .35rem;border-radius:8px;overflow-wrap:anywhere}
.loc-locked .fine a:hover{color:#eafdff}
.loc-locked .btn{display:inline-block;text-decoration:none}

/* --- store-locator sign-in: our own email + 6-digit code, never leaves the page --- */
/* while signed out the whole locator is put away and only the card shows */
#locations.gated .loc-tools,#locations.gated #map,#locations.gated #slist,
#locations.gated .slist-who{display:none!important}
#locGate[hidden],.lg-step[hidden]{display:none!important}
#locGate{max-width:min(560px,92vw)}
.lg-form{margin:1.2rem auto 0;max-width:23rem;text-align:left}
.lg-lab{display:block;font-family:var(--fm);font-size:.78rem;letter-spacing:.07em;
  text-transform:uppercase;color:#7fe9ff;margin:0 0 .4rem .2rem}
.lg-opt{display:block;margin-top:.3rem;font-family:var(--fb);font-size:.8rem;
  letter-spacing:0;text-transform:none;color:#c6dbe7}
.lg-in{width:100%;font-family:var(--fb);font-size:16px;line-height:1.3;color:#eafdff;
  background:rgba(127,233,255,.05);border:1px solid rgba(127,233,255,.24);border-radius:16px;
  padding:.78rem 1rem;min-height:48px;outline:none;margin-bottom:.9rem;
  transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.lg-in::placeholder{color:rgba(198,219,231,.55)}
.lg-in:focus{border-color:#7fe9ff;box-shadow:0 0 0 3px rgba(127,233,255,.14)}
.lg-in.bad{border-color:#ff7ad1}
.lg-code{font-family:var(--fm);font-size:20px;letter-spacing:.42em;text-align:center;
  padding-left:.6rem;padding-right:.2rem}
.lg-go{width:100%;min-height:48px;margin-top:.1rem}
.lg-go[disabled]{opacity:.6;cursor:default;transform:none;box-shadow:none}
.lg-sent{font-family:var(--fb);font-size:.88rem;line-height:1.55;color:#dceef6;
  margin:0 0 .9rem;text-align:center}
.lg-sent b{color:#eafdff;overflow-wrap:anywhere}
.lg-again{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem .4rem;margin-top:.5rem}
.lg-link{font-family:var(--fm);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:#7fe9ff;background:none;border:0;border-radius:100px;padding:.75rem .7rem;min-height:44px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.lg-link:hover{color:#eafdff}
.lg-link[disabled]{color:#c6dbe7;cursor:default}
.lg-msg{font-family:var(--fb);font-size:.95rem;line-height:1.5;text-align:center;
  margin:.85rem auto 0;max-width:34ch;min-height:3em;overflow-wrap:anywhere}
.lg-msg.err{color:#ff7ad1}
.lg-msg.note{color:#c6dbe7}
.lg-msg.ok{color:#7fe9ff}
.fl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
#locHead:focus{outline:none}
#locHead:focus-visible{outline:2px solid #7fe9ff;outline-offset:6px;border-radius:8px}
@media(max-width:430px){
  .loc-locked{padding:1.6rem 1.1rem}
  .loc-locked h3{font-size:1.12rem}
  .lg-form{max-width:none}
}


:root{
  --neon:#7fe9ff;--neon-2:#33d2ee;--neon-deep:#0f8aa6;--pink:#ff7ad1;--pink-deep:#e23f95;
  --liquid:#ff5a64;--ink:#05070b;--frost:#eafdff;--line:rgba(127,233,255,.18);
  --fd:"Bogart","Paytone One",system-ui,sans-serif;--fh:"Bogart","Paytone One",system-ui,sans-serif;--fs:"Pacifico",cursive;--fb:"Nunito",system-ui,sans-serif;--fm:"Space Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px;overflow-x:hidden;overflow-x:clip}
body{color:#fff7f0;font-family:var(--fb);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;min-height:100vh;background:#102841}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 32%,#25476b,#102841 80%)}
a{color:var(--neon);text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--fd);font-weight:700;line-height:1.08;letter-spacing:0;color:#ffffff;text-shadow:0 1px 2px rgba(0,0,0,.5),0 3px 22px rgba(0,0,0,.45)}
.wrap{width:min(1120px,92vw);margin-inline:auto}
.mono{font-family:var(--fm);letter-spacing:.16em;text-transform:uppercase}
.section{padding:clamp(3.4rem,8vw,6rem) 0}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--fm);font-weight:600;font-size:.7rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--neon);border:1px solid var(--line);border-radius:100px;
  padding:.42rem .9rem;background:rgba(127,233,255,.05)}
.h-lead{font-size:clamp(1.6rem,4.2vw,2.6rem);margin:1.1rem 0 .7rem;letter-spacing:.01em;text-transform:uppercase;color:#fff7ec;
  text-shadow:-1.6px -1.6px 0 rgba(48,22,66,.85),1.6px -1.6px 0 rgba(48,22,66,.85),-1.6px 1.6px 0 rgba(48,22,66,.85),1.6px 1.6px 0 rgba(48,22,66,.85),0 6px 18px rgba(20,8,34,.5),0 0 26px rgba(255,214,150,.28)}
.sub{color:#fff7f0;font-size:clamp(1rem,2.1vw,1.15rem);max-width:56ch;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.center{text-align:center}
.center .sub{margin-inline:auto}

.fog{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.4}
.puff{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;opacity:.5}
.puff.a{width:52vw;height:52vw;left:-12vw;top:-6vh;background:radial-gradient(circle,rgba(127,233,255,.45),transparent 65%)}
.puff.b{width:44vw;height:44vw;right:-10vw;top:12vh;background:radial-gradient(circle,rgba(255,122,209,.22),transparent 65%)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--fm);font-weight:600;
  font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;padding:.85rem 1.5rem;border-radius:100px;cursor:pointer;
  border:1px solid var(--neon);color:#031017;background:linear-gradient(180deg,var(--neon),var(--neon-2));
  box-shadow:0 0 22px rgba(127,233,255,.35);transition:transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(127,233,255,.55)}
.btn.ghost{background:rgba(127,233,255,.06);color:var(--neon);box-shadow:none}
.btn.ghost:hover{border-color:var(--neon);box-shadow:0 0 18px rgba(127,233,255,.3)}
.btn.pink{border-color:var(--pink);background:linear-gradient(180deg,var(--pink),var(--pink-deep));color:#1a0512;box-shadow:0 0 22px rgba(255,122,209,.35)}

header.nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);background:rgba(3,5,9,.96);
  border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
/* nav: full link row only on wide screens; burger everywhere below 1280px */
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--fd);font-weight:800;font-size:1.1rem;color:#eafdff;
  letter-spacing:.02em}
.brand .mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:1.1rem;
  background:radial-gradient(circle at 35% 30%,var(--neon),var(--neon-deep));box-shadow:0 0 16px rgba(127,233,255,.5)}
.nav-links{display:flex;align-items:center;gap:.3rem}
.nav-links a{font-family:var(--fm);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(234,255,255,.72);
  padding:.5rem .7rem;border-radius:100px;transition:.16s}
.nav-links a:hover{color:var(--neon);background:rgba(127,233,255,.06)}
.nav-links a.cta{border:1px solid var(--neon);color:var(--neon)}
.nav-links a.cta:hover{background:rgba(127,233,255,.1)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:.5rem .6rem;cursor:pointer;color:var(--neon)}
.burger svg{width:20px;height:20px}

.banner{position:relative;z-index:1;background:linear-gradient(90deg,rgba(127,233,255,.12),rgba(255,122,209,.12));
  border-bottom:1px solid var(--line);font-family:var(--fm);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(234,255,255,.85);text-align:center;padding:.55rem 1rem}
.banner b{color:var(--neon);font-weight:600}
.banner .cd{color:var(--liquid)}

.hero{position:relative;z-index:1;text-align:center;padding:clamp(3rem,9vw,6rem) 0 clamp(2rem,6vw,3.5rem)}
.hero h1{font-family:var(--fh);font-weight:900;font-size:clamp(2rem,6.4vw,4rem);margin:1.1rem 0 .7rem;
  line-height:1.14;letter-spacing:.01em;text-transform:uppercase;color:#fff7ec;-webkit-text-stroke:1px #fff7ec;paint-order:stroke fill;
  text-shadow:-2.5px -2.5px 0 rgba(48,22,66,.9),2.5px -2.5px 0 rgba(48,22,66,.9),-2.5px 2.5px 0 rgba(48,22,66,.9),2.5px 2.5px 0 rgba(48,22,66,.9),0 10px 26px rgba(20,8,34,.55),0 0 34px rgba(255,214,150,.35)}
.hero h1 .drip{color:var(--neon)}
.hero .slogan{font-family:var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--neon);font-size:clamp(.72rem,2vw,.9rem)}
.hero p.lede{max-width:52ch;margin:1.2rem auto 1.8rem;color:#fff7f0;font-size:clamp(1.02rem,2.3vw,1.24rem);text-shadow:0 1px 12px rgba(0,0,0,.55)}
.hero-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
/* countdown-page timer (ported verbatim) */
.count{position:relative;display:flex;align-items:flex-start;justify-content:center;gap:clamp(.6rem,2.4vw,1.7rem);flex-wrap:wrap;margin-top:2.4rem}
.count .unit{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:clamp(64px,16vw,110px)}
.count .unit b{font-family:var(--fd);font-weight:800;font-size:clamp(2.6rem,9vw,5.4rem);line-height:.9;color:#eafdff;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 6px #d6fbff,0 0 14px var(--neon),0 0 30px var(--neon-2),0 0 60px var(--neon-deep);
  animation:cdflicker 6s linear infinite}
.count .unit span{font-family:var(--fm);font-size:clamp(.55rem,1.5vw,.72rem);letter-spacing:.22em;text-transform:uppercase;
  color:rgba(127,233,255,.62)}
.count .sep{position:relative;z-index:3;font-family:var(--fd);font-weight:700;font-size:clamp(2rem,7vw,4.2rem);line-height:1;color:var(--neon);
  text-shadow:0 0 10px var(--neon-2),0 0 26px var(--neon-deep);align-self:flex-start;margin-top:clamp(.1rem,1vw,.5rem);
  animation:cdblink 2s steps(1) infinite;opacity:.85}
@keyframes cdblink{0%,49%{opacity:.85}50%,100%{opacity:.2}}
@keyframes cdflicker{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.78}}

.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem;margin-top:2.4rem}
.pcard{position:relative;border:1px solid var(--line);border-radius:20px;padding:1.4rem;background:linear-gradient(170deg,rgba(127,233,255,.05),rgba(5,7,11,.4));
  overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.pcard:hover{transform:translateY(-4px);border-color:rgba(127,233,255,.4);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.pcard .badge{position:absolute;top:1rem;right:1rem;z-index:7;white-space:nowrap;font-family:var(--fm);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;
  color:#031017;background:var(--neon);border-radius:100px;padding:.3rem .6rem;font-weight:600;box-shadow:0 3px 10px rgba(5,7,11,.35)}
.fruit{width:120px;height:120px;margin:.4rem auto 1.1rem;border-radius:32% 68% 62% 38%/42% 38% 62% 58%;position:relative;
  box-shadow:inset -14px -18px 34px rgba(0,0,0,.45),0 14px 30px rgba(0,0,0,.4),0 0 26px var(--gl);
  background:radial-gradient(circle at 34% 28%,var(--c1),var(--c2) 60%,var(--c3));animation:bob 5s ease-in-out infinite}
.fruit::after{content:"";position:absolute;top:16%;left:22%;width:34%;height:26%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85),transparent 70%);filter:blur(2px)}
.pcard:nth-child(2n) .fruit{animation-delay:-1.4s}
.pcard:nth-child(3n) .fruit{animation-delay:-2.6s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(3deg)}}
.pcard.img .fruit{display:none}
.pcard .photo{width:100%;height:190px;object-fit:contain;margin:2.1rem 0 1rem;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55))}
.pcard h3{font-family:var(--fs);font-weight:400;font-size:1.6rem;line-height:1.05;margin:.1rem 0 .35rem}
.pcard .flav{font-family:var(--fm);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--neon);margin-bottom:.5rem}
.pcard .desc{font-size:.9rem;color:rgba(234,255,255,.72)}
.pcard .aller{margin-top:.7rem;font-size:.68rem;color:rgba(234,255,255,.45);font-family:var(--fm)}

.loc-tools{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.6rem 0 1rem}
.loc-tools input,.loc-tools select{font-family:var(--fb);font-size:.92rem;color:var(--frost);background:rgba(127,233,255,.05);
  border:1px solid var(--line);border-radius:100px;padding:.7rem 1.1rem;outline:none}
.loc-tools input{flex:1;min-width:180px}
.loc-tools input:focus,.loc-tools select:focus{border-color:var(--neon)}
#map{height:380px;border-radius:18px;border:2px solid rgba(127,233,255,.45);margin-bottom:1.4rem;background:#dfe8ee;z-index:1;box-shadow:0 0 42px rgba(127,233,255,.28),0 18px 40px rgba(2,8,16,.5)}
.leaflet-container{background:#17100f;font-family:var(--fb)}
.leaflet-tile{filter:saturate(1.12) brightness(.9) contrast(1.03) sepia(.22) hue-rotate(-12deg)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#0d1520;color:var(--frost);border:1px solid var(--line)}
.leaflet-popup-content{font-size:.85rem}
.leaflet-popup-content b{color:var(--neon)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.scard{border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.2rem;background:rgba(127,233,255,.04)}
.scard h4{font-family:var(--fb);font-weight:600;font-size:1.02rem;color:#eafdff;margin-bottom:.25rem}
.scard .addr{font-size:.85rem;color:rgba(234,255,255,.68);margin-bottom:.5rem}
.scard .meta{font-family:var(--fm);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(127,233,255,.6);margin-bottom:.7rem}
.scard .dir{font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--neon)}
.empty{grid-column:1/-1;text-align:center;color:rgba(234,255,255,.45);font-family:var(--fm);font-size:.8rem;padding:2rem}

.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.1rem;margin-top:2rem}
.rcard{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(127,233,255,.04);transition:.2s}
.rcard:hover{border-color:rgba(127,233,255,.4);transform:translateY(-3px)}
.rthumb{position:relative;aspect-ratio:9/12;background:linear-gradient(160deg,#0d1520,#131a26);display:grid;place-items:center;overflow:hidden}
.rthumb img{width:100%;height:100%;object-fit:cover}
.rthumb .play{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(5,7,11,.6);border:1px solid var(--neon);
  display:grid;place-items:center;color:var(--neon);box-shadow:0 0 20px rgba(127,233,255,.4)}
.rthumb .play svg{width:20px;height:20px;margin-left:3px}
.rplat{position:absolute;top:.6rem;left:.6rem;font-family:var(--fm);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(5,7,11,.7);border:1px solid var(--line);border-radius:100px;padding:.2rem .5rem;color:var(--neon)}
.rmeta{padding:.8rem .9rem}
.rmeta .handle{font-family:var(--fm);font-size:.68rem;color:var(--neon);letter-spacing:.04em}
.rmeta .cap{font-size:.82rem;color:rgba(234,255,255,.72);margin-top:.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.faq{max-width:760px;margin:2rem auto 0}
/* the whole FAQ is one collapsible list, reusing the store-list disclosure */
#faqWrap{max-width:760px;margin:2rem auto 0}
/* the explainer bar sits directly under the FAQ bar - same width so the two read
   as a pair rather than two unrelated controls */
#whatWrap{max-width:760px;margin:1.6rem auto 0}
#faqBody[hidden]{display:none!important}
#faqBody .faq{margin-top:0}
/* server-rendered "what is it" explainer on the homepage */
.fl-explain{max-width:64ch;margin:1.6rem auto 0}
.fl-explain p{color:#fff7f0;font-size:clamp(1rem,2.1vw,1.12rem);line-height:1.65;margin:0 0 1.05rem;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.fl-explain p:last-child{margin-bottom:0}
.fl-explain strong{color:var(--neon);font-weight:800}
.fl-explain a{color:var(--neon);text-decoration:underline;text-underline-offset:3px}
.fl-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9rem;margin:2rem auto 0;max-width:940px}
.fl-fact{border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;background:rgba(127,233,255,.03)}
.fl-fact b{display:block;font-family:var(--fm);font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--neon);margin-bottom:.45rem}
.fl-fact span{display:block;color:rgba(234,255,255,.8);font-size:.93rem;line-height:1.5}
.qa{border:1px solid var(--line);border-radius:14px;margin-bottom:.7rem;overflow:hidden;background:rgba(127,233,255,.03)}
.qa summary{cursor:pointer;list-style:none;padding:1.05rem 1.2rem;font-weight:600;color:#eafdff;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary .plus{color:var(--neon);font-size:1.2rem;transition:transform .2s;flex:0 0 auto}
.qa[open] summary .plus{transform:rotate(45deg)}
.qa .a{padding:0 1.2rem 1.15rem;color:rgba(234,255,255,.72);font-size:.94rem}

.split{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:start}
.formcard{border:1px solid var(--line);border-radius:20px;padding:1.6rem;background:linear-gradient(170deg,rgba(127,233,255,.05),rgba(5,7,11,.4))}
.field{margin-bottom:.9rem}
.field label{display:block;font-family:var(--fm);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(127,233,255,.7);margin-bottom:.35rem}
.field input,.field textarea,.field select{width:100%;font-family:var(--fb);font-size:.95rem;color:var(--frost);
  background:rgba(5,7,11,.5);border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem;outline:none;transition:.16s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--neon);box-shadow:0 0 0 3px rgba(127,233,255,.12)}
.field textarea{min-height:96px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.check{display:flex;align-items:flex-start;gap:.55rem;font-size:.82rem;color:rgba(234,255,255,.72);margin:.3rem 0 .9rem}
.check input{margin-top:.2rem}
.fmsg{font-family:var(--fm);font-size:.72rem;letter-spacing:.04em;margin-top:.7rem;min-height:1.1rem}
.fmsg.ok{color:var(--neon)}.fmsg.err{color:var(--liquid)}
.signup-inline{display:flex;gap:.6rem;flex-wrap:wrap;max-width:520px;margin:1.6rem auto 0}
.signup-inline input{flex:1;min-width:200px;font-family:var(--fb);font-size:.98rem;color:var(--frost);background:rgba(127,233,255,.05);
  border:1px solid var(--line);border-radius:100px;padding:.85rem 1.2rem;outline:none}
.signup-inline input:focus{border-color:var(--neon)}

.social{display:flex;gap:.9rem;justify-content:center;margin-top:1.6rem}
.sbtn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(127,233,255,.28);background:rgba(127,233,255,.06);
  display:grid;place-items:center;color:var(--neon);transition:.2s;text-decoration:none}
.sbtn svg{width:22px;height:22px}
.sbtn.tt,.sbtn.x{color:var(--neon)}
.sbtn.ig,.sbtn.yt{color:var(--pink)}
.sbtn.tt:hover,.sbtn.x:hover{border-color:var(--neon);box-shadow:0 0 16px rgba(51,210,238,.35);transform:translateY(-2px)}
.sbtn.ig:hover,.sbtn.yt:hover{border-color:var(--pink);box-shadow:0 0 16px rgba(226,63,149,.35);transform:translateY(-2px)}
.sbtn svg{width:22px;height:22px}
.sbtn.ig:hover{color:var(--pink);border-color:var(--pink);box-shadow:0 0 18px rgba(255,122,209,.4)}
footer{border-top:1px solid var(--line);padding:2.6rem 0 3rem;position:relative;z-index:1;background:rgba(5,7,11,.5)}
.foot-grid{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.foot-grid .col h5{font-family:var(--fm);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--neon);margin-bottom:.7rem}
.foot-grid .col a,.foot-grid .col p{display:block;font-size:.86rem;color:rgba(234,255,255,.66);margin-bottom:.4rem}
.foot-note{text-align:center;margin-top:2.2rem;font-family:var(--fm);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(127,233,255,.4)}

.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:1.2rem;
  background:rgba(5,7,11,.8);backdrop-filter:blur(6px)}
.modal.on{display:flex}
.modal .box{width:min(440px,94vw);border:1px solid var(--neon);border-radius:20px;padding:2rem;text-align:center;
  background:linear-gradient(170deg,#0a1119,#05070b);box-shadow:0 0 40px rgba(127,233,255,.3)}
.modal .box h3{font-size:1.4rem;margin-bottom:.6rem}
.modal .box p{color:rgba(234,255,255,.75);margin-bottom:1.4rem}

@media(max-width:1279px){
  .nav-links{position:fixed;inset:56px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:rgba(5,7,11,.97);
    border-bottom:1px solid var(--line);padding:.6rem 5vw 1.2rem;display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:.85rem .4rem;border-radius:10px}
  .burger{display:inline-flex}
}
@media(max-width:820px){
  .split{grid-template-columns:1fr}
}
.brand .logo{height:38px;width:auto;display:block}
.hero-logo{width:min(320px,66vw);height:auto;margin:0 auto 1.3rem;display:block;filter:drop-shadow(0 8px 26px rgba(127,233,255,.4))}

/* ===== intro loader ===== */
#intro{position:fixed;inset:0;z-index:99999;background:radial-gradient(120% 90% at 50% 32%,#25476b,#102841 80%);
  display:grid;place-items:center;overflow:hidden;transition:transform .9s cubic-bezier(.76,0,.24,1),opacity .7s ease}
#intro.gone{transform:translateY(-106%);opacity:0;pointer-events:none}
#intro .fl-fall{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
#intro .fl-fall i{position:absolute;border-radius:50%;opacity:0;will-change:transform;
  background:radial-gradient(circle at 35% 30%,#fff,rgba(228,248,255,.85) 55%,rgba(190,235,255,.28));
  filter:blur(.4px) drop-shadow(0 0 6px rgba(210,240,255,.7));animation:f-boom ease-out forwards}
@keyframes f-boom{0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}10%{opacity:1}36%{transform:translate(var(--mx,0),var(--my,-200px)) scale(1) rotate(calc(var(--rot,300deg)*.4))}100%{opacity:.9;transform:translate(var(--dx,0),114vh) rotate(var(--rot,360deg))}}
#intro .fl-stage{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
#intro .fl-logo{width:min(300px,64vw);filter:drop-shadow(0 8px 28px rgba(127,233,255,.5));opacity:0}
#intro .fl-logo.ld{animation:fl-pop .8s ease both}
@keyframes fl-pop{from{opacity:0;transform:scale(.82) translateY(10px)}to{opacity:1;transform:none}}
/* frozen specimen */
#intro .fl-spec{position:relative;width:min(220px,44vw)}
#intro .fl-spec img{width:100%;display:block}
#intro .fl-froz{position:relative;z-index:2;filter:drop-shadow(0 0 30px rgba(127,233,255,.45)) drop-shadow(0 14px 30px rgba(0,0,0,.55))}
#intro .fl-real{position:absolute;inset:0;z-index:1;opacity:0;transform:scale(.72);filter:drop-shadow(0 0 30px rgba(255,90,100,.45)) drop-shadow(0 14px 30px rgba(0,0,0,.55))}
#intro .fl-spec.shake{animation:fl-rumble 1.25s ease-in-out both}
@keyframes fl-rumble{0%{transform:none}10%{transform:translate(-3px,1px) rotate(-1.4deg)}22%{transform:translate(3px,-1px) rotate(1.5deg)}34%{transform:translate(-5px,0) rotate(-2deg)}46%{transform:translate(5px,1px) rotate(2.1deg)}58%{transform:translate(-6px,-1px) rotate(-2.4deg)}70%{transform:translate(6px,0) rotate(2.4deg)}82%{transform:translate(-4px,1px) rotate(-1.7deg)}92%{transform:translate(3px,0) rotate(1.2deg)}100%{transform:none}}
#intro .fl-spec.shake2{animation:fl-rumble2 .6s ease-in-out infinite}
@keyframes fl-rumble2{0%{transform:none}12%{transform:translate(-7px,2px) rotate(-2.6deg)}25%{transform:translate(7px,-2px) rotate(2.8deg)}38%{transform:translate(-9px,1px) rotate(-3.2deg)}50%{transform:translate(9px,2px) rotate(3.4deg)}62%{transform:translate(-8px,-2px) rotate(-3deg)}75%{transform:translate(8px,1px) rotate(2.8deg)}88%{transform:translate(-6px,1px) rotate(-2.2deg)}100%{transform:none}}
#intro .fl-spec.revealed{animation:none}
#intro .fl-spec.revealed .fl-froz{animation:fl-shatter .55s ease-out forwards}
@keyframes fl-shatter{0%{opacity:1;transform:scale(1)}40%{opacity:.9;transform:scale(1.14)}100%{opacity:0;transform:scale(1.5);filter:blur(10px)}}
#intro .fl-spec.revealed .fl-real{animation:fl-reveal .8s cubic-bezier(.2,1.5,.4,1) .12s forwards}
@keyframes fl-reveal{from{opacity:0;transform:scale(.72)}60%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
#intro .fl-burst{position:absolute;left:50%;top:50%;z-index:3;pointer-events:none}
#intro .fl-spec.revealed .fl-burst::before{content:"";position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle,#fff,rgba(220,246,255,.85) 45%,rgba(127,233,255,.25) 70%,transparent 75%);
  animation:fl-flash .6s ease-out forwards}
@keyframes fl-flash{from{transform:scale(.4);opacity:1}to{transform:scale(16);opacity:0}}
/* blizzard cover */
.cover-img{position:absolute;z-index:5;opacity:0;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#fff,rgba(232,249,255,.92) 55%,rgba(205,240,255,.55));
  filter:blur(.6px);box-shadow:0 0 14px rgba(255,255,255,.55);
  animation:f-cover .9s cubic-bezier(.25,.7,.3,1) both}
@keyframes f-cover{0%{opacity:0;transform:translate(var(--ox,0),var(--oy,0)) scale(.25)}55%{opacity:1}100%{opacity:1;transform:translate(0,0) scale(1) rotate(var(--r,0deg))}}
.cover-img.fall{animation:f-drop .95s cubic-bezier(.55,0,.85,.36) forwards}
@keyframes f-drop{to{transform:translate(0,125vh) rotate(var(--r,0deg));opacity:.9}}
#intro .white-out{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .9s ease;
  background:radial-gradient(120% 100% at 50% 45%,rgba(255,255,255,.99),rgba(238,250,255,.97) 60%,rgba(215,240,252,.95))}
#intro .white-out.on{opacity:1}
#intro.clear{background:transparent!important}
#intro.clear .fl-stage,#intro.clear .fl-fall,#intro.clear .fl-skip{opacity:0;transition:opacity .2s}
#intro.clear .white-out{opacity:0;transition:opacity 1s ease}
.fl-kick{font-family:var(--fm);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--neon)}
.fl-skip{position:absolute;bottom:1.3rem;right:1.3rem;z-index:6;font-family:var(--fm);font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(234,255,255,.72);background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:100px;padding:.5rem 1rem;cursor:pointer}
@media(prefers-reduced-motion:reduce){#intro .fl-fall i,#intro .fl-spec,#intro .fl-froz,#intro .fl-real,#intro .cover-img,#intro .fl-logo{animation:none!important}}

/* frost background */
.frostbg{position:fixed;inset:0;pointer-events:none;z-index:0;
  box-shadow:inset 0 0 150px rgba(190,235,255,.15),inset 0 0 50px rgba(160,225,255,.08);
  background:
   radial-gradient(42% 34% at 0% 0%,rgba(190,240,255,.12),transparent 70%),
   radial-gradient(42% 34% at 100% 0%,rgba(190,240,255,.10),transparent 70%),
   radial-gradient(46% 38% at 0% 100%,rgba(190,240,255,.10),transparent 70%),
   radial-gradient(46% 38% at 100% 100%,rgba(190,240,255,.12),transparent 70%)}
.topfog{position:fixed;left:0;right:0;top:-60px;height:320px;pointer-events:none;z-index:0}
.topfog i{position:absolute;border-radius:50%;filter:blur(34px);opacity:.5;
  background:radial-gradient(ellipse at center,rgba(215,245,255,.14),rgba(127,233,255,.05) 60%,transparent 78%)}
.topfog i:nth-child(1){left:-8vw;top:10px;width:52vw;height:200px;animation:fogdrift 26s ease-in-out infinite alternate}
.topfog i:nth-child(2){left:30vw;top:-20px;width:46vw;height:230px;animation:fogdrift 34s ease-in-out -12s infinite alternate-reverse}
.topfog i:nth-child(3){left:62vw;top:24px;width:44vw;height:190px;animation:fogdrift 29s ease-in-out -6s infinite alternate}
.topfog i:nth-child(4){left:12vw;top:60px;width:40vw;height:170px;opacity:.35;animation:fogdrift 40s ease-in-out -20s infinite alternate-reverse}
@keyframes fogdrift{from{transform:translateX(-5vw) translateY(0)}50%{transform:translateX(2vw) translateY(8px)}to{transform:translateX(6vw) translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.topfog i{animation:none}}
/* beaker cursor (original) */
*{cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAiCAYAAABIiGl0AAAFmElEQVR42uVXXWwUVRT+zr0zs9PZ7m63WygQUoGI/LQGjIYQA4LwICEQYrBglAcwosZoovjoQ0PwzWiC0RgeECOGRAhRfoogsRQQIwkmFIv8KgVb2lC6u91uu7vzc48PMy3LT8tWSDTxJic7s3fu+c7/OZdQ4mJmsQsg7Brho3pgFaBAxPivLrqPlkRE/F03R6JhfE0SEc9VirnoHAFggEiwZUH02djwXIhONzCLjURqON5aKdIpAwazWhY1hJCGuE1iDp4LAEwAWYVqAKi9j1IjAhMRMzM1A73CES0dnelx337+yadSD5d5SikAkJom2B3IzlvxwtJHH582dyA78FvgbvWPgQfxnyVyjzmcK+Ty9pebGn4FUI4hxoYE7OTMufPnoG6ayHRc6i3FilrJUQ0IkkIYZWXhWPWUsOM4CgBMy5LJ9gu2pms6AOQiEe2hAgfRBjuXU06+oAaBpZRk53IKDAYAy/NKSiXxb6WTKLF40K3EGdYVDAAhKemhARMRM+ASkRyWkRCSGUilUs4DAwea8t6OTJUOTLfz+SQAhrzrGPVn+tJRHXLSlJlPMTPtug/vETebAUlEbEWtJXENieP7DjTeWe2cfF4JPVr2zebNx/ttJs0qW09EXP8gGi8McpV0+Vp7xs7v3brlnB6uNpXjDPna8xRHE+OMliONN662dbSWSSw7eC1dCSIVWGx0wMwsiEjtv5mZURHC/EtnWps6zp9ORROVuuep24Ms8PxPe/Y1xjRUaBXlzxPAzUM7owBuDvbMcOQVVsD+L7Y2GUZ5CJ7HEkzFBMfhaHyitfuzj8+0dWczwpBvFVusdGBmWgh4265cMQ2JVVc6U+3fb9ty2Q0n9J6BnJNRrltM6XzBtcNh3Lh6OXXp/IWjUR2z93bnp5NvblFy5doJCCLyfujNL6rQUXOiuXnb7Gg4bI6tjNi5wj210HWdBion6C3bt598et6Ty8NWaD2A9wLLqZL68aB/DxV4f5VjL53+9oaMzGY10jSAh6+ICiDK59xzmz6IdtdN6bTO35w2f8aYPhX09RE1Dpq/OtV2Y3zSwDPWzy1kJZMxxGKAUgDRUN32hSjqzFIChQKqjzSpvrop451E2QIG7Q9y2hvRx4ORmIlXvBQFItXHml2WEkophucxBnI+eR6DmcEqIGa4LsMwONFyhq0BF05F+HWAUX+PUivukbtea2ur4ZTr60LXexA/+7sg04RQyq/Xy5b45Kvq061aTqzrZHR3i/ITJ1noWNT8V+9UIlINdwTZbS87mSURcU9i8uyQQG38cBMjnxesaYBtAzUTgcULfJpU4/8nhE9KFUcajWtq4krA8uLhFYFCwwMPljknZr1qFFyv6tQpB6YJeB5gGMC1duDHo0DTUeDCJf/jtWuAdWt8/zKDlAJME9afV3KZrlSSTbn2wMWLoYV3+Pi24BocmSWh+maB7VR39x/hkFnHnss0GEWNB31Bnpjla+q6gKYVR6eCaYp0sqetLd3HkxPxcUlzqiieWu8CHhMwp7y9J1JhLO+qrctPPHlSIVFJrJS/KyWg68Dqlb4AH272TR5EtSIime1Hb6yiPzG5ZhYc7F5VQzn23ejdU+NBc7iFVKN0qrl/9crH+ru6nHBHu+G3wiB1XA/4aof/3tPjCxOkmXRdFOJxr+flFyeNDyGUybg7iq05bAFpYBYbhVCHM867Zrl8PwQkYk2/IHH0uKLi4SJf8H/NUFGPdJGpnSGS9SvQJ6FUDluzKbyzfAJyvilvFREa6QZxqLNvrFlV/qan4Q0DqFYjXD04iNQCUJAKO7y0/dHiROjsqK8wO5nlqsAnJy53jg09UlWbzrrQNG3YmStiglR64PqcMbELd/IY5TTLdIRZG+25ncyyYZiuVNKlrViAXSUOhvUA0wiXtf/v+hs6Aq6BonkWmAAAAABJRU5ErkJggg==") 15 3,auto}
/* grand reveal spotlight */
.reveal{margin:1.6rem auto .6rem;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.rv-eyebrow{font-family:var(--fm);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(234,255,255,.85)}
.reveal img{width:min(300px,70vw);filter:drop-shadow(0 18px 30px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(255,90,100,.3));
  animation:rvbob 5s ease-in-out infinite}
.rv-name{font-family:var(--fs);font-size:2.2rem;color:#ff5a64;text-shadow:0 0 14px rgba(255,90,100,.5)}
@keyframes rvbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.reveal img{animation:none}}
/* mystery (coming soon) cards */
.pcard.mystery .mwrap{position:relative}
.pcard.mystery .photo{filter:brightness(0) saturate(0) drop-shadow(0 14px 22px rgba(0,0,0,.65));opacity:.97}
.pcard.mystery .fruit{filter:brightness(.04) saturate(0)}
.pcard.mystery{background:linear-gradient(175deg,rgba(6,4,14,.78),rgba(6,4,14,.55));border-color:rgba(127,233,255,.14)}
.pcard.mystery .q{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--fd);font-size:3.6rem;color:#fff7ec;
  text-shadow:-2px -2px 0 rgba(48,22,66,.9),2px -2px 0 rgba(48,22,66,.9),-2px 2px 0 rgba(48,22,66,.9),2px 2px 0 rgba(48,22,66,.9),0 0 26px rgba(127,233,255,.5);pointer-events:none}
.pcard.mystery h3{color:#fff7ec;letter-spacing:.12em}
.badge.soon{background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;border:none;box-shadow:0 4px 14px rgba(226,63,149,.4)}
/* header tie-in */
.nav{background:linear-gradient(90deg,rgba(10,20,34,.82),rgba(12,26,44,.72) 50%,rgba(16,20,40,.82));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:2px solid rgba(127,233,255,.28);box-shadow:0 8px 28px rgba(2,6,14,.55)}
.nav .logo{filter:drop-shadow(0 0 12px rgba(127,233,255,.45))}
.nav-links a{color:#fff7ec;font-family:var(--fb);font-weight:700;font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;position:relative;padding:.6rem .85rem}
.nav-links a:not(.cta){transition:color .2s}
.nav-links a:not(.cta):hover{color:#fff;text-decoration:none;background:none;box-shadow:none;
  text-shadow:0 0 14px rgba(127,233,255,.9),0 0 30px rgba(127,233,255,.45)}
.nav-links a:not(.cta)::before,.nav-links a:not(.cta)::after{content:"";position:absolute;z-index:-1;bottom:0;width:26px;height:26px;
  border-radius:50%;filter:blur(8px);opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(220,247,255,.55),rgba(127,233,255,.18) 60%,transparent)}
.nav-links a:not(.cta)::before{left:18%}
.nav-links a:not(.cta)::after{right:18%}
.nav-links a:not(.cta):hover::before{animation:smoke1 2.6s linear infinite}
.nav-links a:not(.cta):hover::after{animation:smoke2 3.1s linear -1.6s infinite}
@keyframes smoke1{0%{transform:translate(0,6px) scale(.5);opacity:0}30%{opacity:.7;transform:translate(-3px,-6px) scale(.9)}70%{opacity:.45;transform:translate(-6px,-19px) scale(1.25)}100%{transform:translate(-9px,-30px) scale(1.5);opacity:0}}
@keyframes smoke2{0%{transform:translate(0,6px) scale(.5);opacity:0}30%{opacity:.65;transform:translate(3px,-7px) scale(.95)}70%{opacity:.4;transform:translate(6px,-22px) scale(1.3)}100%{transform:translate(9px,-34px) scale(1.6);opacity:0}}
.nav-links a.cta{border:none;background:linear-gradient(180deg,#7fe9ff,#33d2ee);color:#031017;font-weight:700;
  box-shadow:0 4px 18px rgba(127,233,255,.38)}
.nav-links a.cta:hover{filter:brightness(1.08);background:linear-gradient(180deg,#7fe9ff,#33d2ee)}
.banner{background:linear-gradient(90deg,rgba(127,233,255,.14),rgba(255,122,209,.16));
  border-bottom:1px solid rgba(127,233,255,.2);color:#eafdff}
@media(max-width:760px){.nav-links.open{background:rgba(8,16,28,.97)}}

/* last-giveaway reels */
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
.reel{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(5,10,18,.5)}
.reel video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#0a1220;cursor:pointer}
.reel-bar{display:flex;justify-content:space-between;align-items:center;padding:.55rem .9rem;font-family:var(--fm);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
.reel-bar .mutehint{color:rgba(234,253,255,.55)}
.reel-bar a{color:var(--neon)}
@media(max-width:900px){.reels{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}}

/* mobile: flavors 2-up */
@media(max-width:640px){
  .pgrid{grid-template-columns:repeat(2,1fr);gap:.75rem}
  .pcard{padding:1rem .8rem}
  .pcard .photo{height:120px;margin:1.7rem 0 .6rem}
  .pcard h3{font-size:1.15rem}
  .pcard .flav{font-size:.5rem}
  .pcard .desc{font-size:.72rem;line-height:1.45}
  .pcard .aller{font-size:.55rem}
  .pcard.mystery .q{font-size:2.2rem}
  .badge{top:.6rem;right:.6rem;font-size:.46rem;padding:.22rem .45rem}
}
/* mobile: reels become a snap carousel */
@media(max-width:900px){
  .reels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.9rem;max-width:none;
    padding:0 2vw .6rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .reels::-webkit-scrollbar{display:none}
  .reel{flex:0 0 76vw;scroll-snap-align:center}
}

/* ---- Shopify (Dawn) collision shield: these only match inside the theme's .frostlab-site wrapper ---- */
.frostlab-site .field{display:block!important;position:relative;width:auto;transition:none}
.frostlab-site .field:before,.frostlab-site .field:after{content:none!important;display:none!important}
.frostlab-site .field label{position:static;display:block;transform:none;opacity:1;pointer-events:auto;height:auto}
.frostlab-site .field input,.frostlab-site .field textarea,.frostlab-site .field select{position:static;flex:none;height:auto;box-shadow:none}
.frostlab-site .pcard .badge{display:inline-block;line-height:normal;border:0;border-radius:100px;padding:.3rem .6rem;background:var(--neon);color:#031017}

/* ---- nav right cluster: search + account ---- */
.navx{display:flex;align-items:center;gap:.55rem;margin-left:.9rem}
.nsx{display:flex;align-items:center;background:rgba(127,233,255,.06);border:1px solid rgba(127,233,255,.22);border-radius:100px;padding:.1rem .15rem .1rem .8rem;transition:border-color .25s}
.nsx:focus-within{border-color:var(--neon)}
.nsx input{width:7.5rem;background:none;border:0;outline:0;color:var(--frost);font-family:var(--fb);font-size:.85rem;transition:width .25s}
.nsx input:focus{width:10.5rem}
.nsx input::placeholder{color:rgba(234,253,255,.45)}
.nsx-go,.nsx-tgl{display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--neon);padding:.35rem}
.nsx-go svg,.nsx-tgl svg,.nax svg{width:17px;height:17px}
.nsx-tgl{display:none}
.nax{display:flex;align-items:center;gap:.35rem;color:var(--frost);text-decoration:none;font-family:var(--fm);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(127,233,255,.22);border-radius:100px;padding:.42rem .8rem;transition:border-color .25s,color .25s;white-space:nowrap}
.nax:hover{border-color:var(--neon);color:var(--neon)}
.nax svg{color:var(--neon);flex:none}
@media(max-width:1279px){
  .nsx{position:absolute;top:100%;left:0;right:0;display:none;margin:0;border-radius:0;border-left:0;border-right:0;background:rgba(7,16,26,.97);padding:.55rem 5vw;backdrop-filter:blur(10px)}
  .nsx.open{display:flex}
  .nsx input{flex:1;width:auto}
  .nsx input:focus{width:auto}
  .nsx-tgl{display:flex}
  .nax span{display:none}
  .nax{padding:.4rem .45rem;border:0}
}

/* ---- Get in the Lab popup ---- */
html.lablock{overflow:hidden}
.labpop{position:fixed;inset:0;z-index:340;display:none;align-items:center;justify-content:center;padding:1rem;
  background:rgba(4,9,16,.72);backdrop-filter:blur(9px)}
.labpop.on{display:flex}
.labpop-card{position:relative;width:min(430px,94vw);max-height:92dvh;overflow-y:auto;text-align:center;
  background:linear-gradient(180deg,rgba(20,42,62,.97),rgba(9,20,32,.98));border:1px solid rgba(127,233,255,.3);
  border-radius:22px;padding:1.6rem 1.5rem 1.5rem;box-shadow:0 26px 80px rgba(2,6,12,.7),0 0 60px rgba(127,233,255,.12);
  animation:labIn .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes labIn{from{transform:scale(.9) translateY(16px);opacity:0}to{transform:none;opacity:1}}
.labpop-x{position:absolute;top:.7rem;right:.8rem;background:none;border:0;color:rgba(234,253,255,.65);font-size:1.15rem;cursor:pointer;padding:.3rem;line-height:1}
.labpop-x:hover{color:var(--neon)}
.labpop-img{width:104px;height:auto;margin:0 auto .35rem;display:block;filter:drop-shadow(0 10px 26px rgba(127,233,255,.28));animation:labFloat 4.5s ease-in-out infinite}
@keyframes labFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.labpop-card h3{font-family:var(--fd);font-weight:800;font-size:1.5rem;letter-spacing:.04em;text-transform:uppercase;color:#eafdff;margin:.25rem 0 .4rem;
  text-shadow:0 0 6px #d6fbff,0 0 14px var(--neon),0 0 30px var(--neon-2)}
.labpop-sub{font-size:.86rem;line-height:1.55;color:rgba(234,253,255,.82);margin-bottom:1rem}
.labpop-sub strong{color:#ffb3c7}
.labpop-in{width:100%;font-family:var(--fb);font-size:.95rem;color:var(--frost);background:rgba(127,233,255,.05);
  border:1px solid rgba(127,233,255,.24);border-radius:12px;padding:.72rem .9rem;outline:none;margin-bottom:.7rem;transition:border-color .25s}
.labpop-in:focus{border-color:var(--neon)}
.labpop-q{font-family:var(--fm);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(127,233,255,.75);margin:.15rem 0 .45rem}
.labpop-pills{display:flex;gap:.55rem;justify-content:center;margin-bottom:.75rem}
.labpop-pills button{flex:1;max-width:9.5rem;font-family:var(--fm);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--frost);
  background:rgba(127,233,255,.05);border:1px solid rgba(127,233,255,.24);border-radius:100px;padding:.6rem .5rem;cursor:pointer;transition:all .2s;min-height:44px}
.labpop-pills button.on{background:var(--neon);color:#031017;border-color:var(--neon);box-shadow:0 0 18px rgba(127,233,255,.4)}
.labpop-hint{font-size:.72rem;color:rgba(234,253,255,.55);margin:-.2rem 0 .85rem}
.labpop-go{width:100%}
.lab-note{font-size:.82rem;color:rgba(234,253,255,.6);margin-top:.6rem}

/* ---- v12: Shopify sets the root font to 10px (Dawn) which shrank everything to ~62% — restore true scale.
   This stylesheet only loads on OUR templates, so Dawn pages are unaffected. ---- */
html{font-size:100%!important}
/* ---- v12: legible form titles — white, bold, larger ---- */
.field label{color:#eafdff;font-weight:700;font-size:.74rem;letter-spacing:.09em}
.field input,.field textarea,.field select{font-size:1rem;padding:.8rem .95rem}
.check{color:#dceff5;font-size:.92rem}

/* ---- v12 popup: bigger + livelier ---- */
.labpop-card{width:min(470px,94vw);padding:1.8rem 1.7rem 1.7rem}
.labpop-img{width:132px}
.labpop-card h3{font-size:2rem}
.labpop-sub{font-size:.95rem;color:#dff6fb}
.labpop-q{color:#eafdff;font-weight:700;font-size:.74rem}
.labpop-in{font-size:1rem;padding:.8rem 1rem}
.labpop-pills button{font-size:.8rem;padding:.7rem .6rem}
.labpop-hint{font-size:.78rem}
.labpop-go{animation:labPulse 2.6s ease-in-out infinite}
@keyframes labPulse{0%,100%{box-shadow:0 0 0 rgba(127,233,255,0)}50%{box-shadow:0 0 28px rgba(127,233,255,.5)}}
.labpop-card::after{content:'';position:absolute;inset:0;border-radius:22px;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(127,233,255,.08) 46%,transparent 60%);
  background-size:230% 100%;animation:labShine 3.4s linear infinite}
@keyframes labShine{from{background-position:190% 0}to{background-position:-90% 0}}
.labsnow{position:absolute;inset:0;border-radius:22px;overflow:hidden;pointer-events:none}
.labflake{position:absolute;top:-16px;color:rgba(127,233,255,.55);text-shadow:0 0 8px rgba(127,233,255,.5);animation:labFall linear infinite}
@keyframes labFall{from{transform:translateY(0) rotate(0)}10%{opacity:.9}85%{opacity:.5}to{transform:translateY(660px) rotate(200deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.labpop-card::after,.labflake,.labpop-go,.labpop-img{animation:none}}

/* ---- v13: kill Dawn's focus-ring box on our controls (we show focus via border color) ---- */
.frostlab-site input:focus-visible,.frostlab-site button:focus-visible,.frostlab-site a:focus-visible,
.frostlab-site select:focus-visible,.frostlab-site textarea:focus-visible{outline:none!important;box-shadow:none!important}

/* v13: solid logo + darker frozen header */
.brand{flex:none}
.brand .logo{max-width:none;flex:none;object-fit:contain}

/* v13b: truly centered nav links on wide screens (side clusters differ in width) */
@media(min-width:1280px){
  .nav-in{display:flex;gap:1.6rem}
  header.nav .brand .logo{height:56px}
  .nav-links{margin-right:auto;white-space:nowrap}
}

/* ---- v14: mystery cards carry a faint Frost Lab logo behind the ? ---- */
.pcard.mystery .mlogo{filter:none!important;opacity:.09;object-fit:contain}
/* ---- v14: minimized popup button, bottom-left ---- */
.labfab{position:fixed;left:18px;bottom:18px;z-index:330;display:none;align-items:center;gap:.45rem;
  font-family:var(--fm);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#031017;background:linear-gradient(180deg,#7fe9ff,#33d2ee);border:none;border-radius:100px;
  padding:.7rem 1.15rem;min-height:44px;cursor:pointer;box-shadow:0 10px 30px rgba(2,8,14,.55),0 0 22px rgba(127,233,255,.35);
  animation:labFabIn .4s cubic-bezier(.2,1.4,.4,1),labFabPulse 3s ease-in-out .5s infinite}
.labfab.on{display:inline-flex}
.labfab:hover{filter:brightness(1.07)}
@keyframes labFabIn{from{transform:translateY(60px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes labFabPulse{0%,100%{box-shadow:0 10px 30px rgba(2,8,14,.55),0 0 16px rgba(127,233,255,.25)}50%{box-shadow:0 10px 30px rgba(2,8,14,.55),0 0 30px rgba(127,233,255,.55)}}
/* signed up: the pill stays put, stops selling and starts confirming. Quiet card
   surface + teal border (same language as the store-list header), pink tick, and
   no pulse - it is a status now, not a nag. Brand accents only, no new colour. */
.labfab.done{color:#7fe9ff;background:linear-gradient(170deg,rgba(127,233,255,.10),rgba(10,26,42,.78));
  border:1px solid rgba(127,233,255,.42);
  box-shadow:0 10px 30px rgba(2,8,14,.55),0 0 14px rgba(127,233,255,.14);
  animation:labFabIn .4s cubic-bezier(.2,1.4,.4,1)}
.labfab.done:hover{filter:none;border-color:#7fe9ff}
.labfab .fabtick{color:var(--pink);font-size:.9rem;line-height:1}
.labpop.closing .labpop-card{animation:labToCorner .45s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes labToCorner{to{transform:translate(calc(-50vw + 90px),calc(50vh - 60px)) scale(.12);opacity:0}}
@media(prefers-reduced-motion:reduce){.labfab,.labpop.closing .labpop-card{animation:none}}

/* ---- v16: compact header = menu/search/account on the LEFT, big logo dead-center ---- */
@media(max-width:1279px){
  .nav-in{justify-content:flex-start;gap:.3rem;position:relative}
  .burger{order:-2}
  .navx{order:-1;margin-left:0;gap:.3rem}
  header.nav .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  header.nav .brand .logo{height:54px}
  .nav-links{inset:60px 0 auto 0}
}


/* ---- the Frost Wheel ---- */
.wheelwrap{position:relative;width:225px;margin:.2rem auto 1.1rem}
.wheelptr{position:absolute;top:-7px;left:50%;transform:translateX(-50%);z-index:4;width:0;height:0;
  border:12px solid transparent;border-top:17px solid #ff5a64;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))}
.wheel{width:225px;height:225px;border-radius:50%;position:relative;
  border:6px solid rgba(127,233,255,.4);
  box-shadow:0 0 34px rgba(127,233,255,.28),inset 0 0 30px rgba(4,10,18,.6);
  background:conic-gradient(#17507a 0 60deg,#0d2237 60deg 120deg,#17507a 120deg 180deg,
    #0d2237 180deg 240deg,#17507a 240deg 300deg,#0d2237 300deg 360deg);
  transition:transform 4.4s cubic-bezier(.12,.85,.16,1)}
.wheel.won{box-shadow:0 0 54px rgba(127,233,255,.6),inset 0 0 30px rgba(4,10,18,.6);border-color:var(--neon)}
.wlab{position:absolute;inset:0;text-align:center;padding-top:15px;pointer-events:none}
.wlab span{display:inline-block;max-width:82px;font-family:var(--fb);font-size:.62rem;font-weight:800;
  letter-spacing:.01em;text-transform:uppercase;color:#fff;white-space:nowrap;line-height:1;
  text-shadow:0 1px 2px rgba(3,10,18,.75)}
.whub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#16324c,#0a1826);border:2px solid rgba(127,233,255,.45);
  display:grid;place-items:center;box-shadow:0 0 18px rgba(127,233,255,.3);z-index:3}
.whub img{width:40px;height:auto;filter:drop-shadow(0 2px 8px rgba(127,233,255,.35))}
.labpop-card.won .labpop-in,.labpop-card.won .labpop-q,.labpop-card.won .labpop-hint{display:none}
.labpop-card.won #labSub{font-size:1rem;color:#eafdff}
@media(prefers-reduced-motion:reduce){.wheel{transition:none}}

/* ---- mobile intro exit: clean fade (the falling-cover exit reads as glitch on phones) ---- */
@media(max-width:820px){
  #intro.clear{background:radial-gradient(120% 90% at 50% 32%,#25476b,#102841 80%)!important;
    opacity:0;transition:opacity .55s ease .05s;pointer-events:none}
  #intro.clear .cover-img{display:none!important}
  #intro .cover-img{display:none!important}
  #intro.clear .fl-stage,#intro.clear .fl-fall,#intro.clear .fl-skip{opacity:0;transition:opacity .2s}
}

/* mobile menu close button */
.nav-close{display:none}
@media(max-width:1279px){
  .nav-links{padding-top:2.6rem!important}
  .nav-links .nav-close{display:block;position:absolute;top:.55rem;right:5vw;background:rgba(255,255,255,.06);
    border:1px solid var(--line);border-radius:100px;color:var(--frost);font-size:.95rem;line-height:1;
    padding:.5rem .75rem;cursor:pointer;min-width:44px;min-height:38px}
  .nav-links .nav-close:hover{color:var(--neon);border-color:var(--neon)}
}

/* ---- round 2 giveaway bar (readable) ---- */
.r2bar{position:relative;display:flex;align-items:center;justify-content:center;gap:.65rem;flex-wrap:wrap;
  text-align:center;text-decoration:none;color:#fff;
  background:linear-gradient(180deg,rgba(20,45,71,.98),rgba(13,33,56,.98));
  border-bottom:1px solid rgba(127,233,255,.35);padding:.8rem 4vw}
.r2live{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--fb);font-weight:800;font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#e23f95;
  border-radius:100px;padding:.28rem .75rem;flex:none}
.r2live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:r2pulse 1.8s ease-in-out infinite}
@keyframes r2pulse{0%,100%{opacity:1}50%{opacity:.4}}
.r2msg{font-family:var(--fb);font-weight:700;font-size:.95rem;line-height:1.4;color:#fff;letter-spacing:normal;
  text-shadow:none;max-width:44ch}
.r2msg b{font-family:var(--fb);font-weight:800;color:#7fe9ff;text-transform:none;letter-spacing:normal}
.r2go{flex:none;font-family:var(--fb);font-weight:800;font-size:.8rem;letter-spacing:.02em;
  color:#031017;background:#7fe9ff;border-radius:100px;padding:.5rem 1.1rem}
.r2bar:hover .r2go{filter:brightness(1.06)}
@media(max-width:700px){
  .r2bar{gap:.5rem;padding:.75rem 4vw}
  .r2msg{font-size:.88rem;width:100%;order:2}
  .r2live{order:1}.r2go{order:3}
}
@media(prefers-reduced-motion:reduce){.r2live i{animation:none}}}

/* ---- PR campaign CTA ---- */
.prcta{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin:2rem auto 0;text-align:center}
.prcta__t{font-family:var(--fb);font-weight:700;font-size:1rem;color:#dceef6}
.prcta .btn{font-size:.85rem}
/* ---- subtle countdown link ---- */
.cdlink{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--fm);font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(234,253,255,.45);transition:color .2s}
.cdlink:hover{color:var(--neon)}

/* ---- banner + PR CTA: layout corrections ---- */
.r2bar{align-items:center;row-gap:.4rem}
.r2msg{max-width:none;text-wrap:balance;white-space:normal}
@media(min-width:820px){.r2msg{white-space:nowrap}}
@media(max-width:819px){
  .r2bar{flex-direction:column;gap:.5rem;padding:.85rem 5vw}
  .r2msg{order:2;text-align:center;font-size:.9rem;line-height:1.35}
  .r2live{order:1}.r2go{order:3}
}
/* PR CTA: always stacked and centred (it was collapsing into one cramped row) */
.prcta{display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center;gap:.85rem!important;margin:2.2rem auto 0!important;text-align:center;width:100%}
.prcta__t{display:block;width:100%;font-family:var(--fb);font-weight:700;font-size:1.02rem;color:#eafdff;
  letter-spacing:normal;line-height:1.4}
.prcta .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:.82rem!important;letter-spacing:.06em;padding:.85rem 1.5rem!important;max-width:min(340px,86vw)}

/* ================= FROST LAB FORM KIT (shared by every page) =================
   One look for every form on the platform. Also shields against Shopify/Dawn's
   own .field rule, which stacks labels BESIDE inputs and looks broken. */
.frostlab-site .field,.field{display:block!important;position:relative;width:auto;transition:none;margin-bottom:1rem}
.frostlab-site .field:before,.frostlab-site .field:after,.field:before,.field:after{content:none!important;display:none!important}
.field label,.frostlab-site .field label{
  position:static!important;display:block!important;transform:none!important;opacity:1!important;height:auto!important;
  font-family:var(--fb)!important;font-weight:700!important;font-size:.82rem!important;letter-spacing:.01em!important;
  text-transform:none!important;color:#eafdff!important;margin-bottom:.45rem!important;pointer-events:auto!important}
.field input,.field select,.field textarea,
.frostlab-site .field input,.frostlab-site .field select,.frostlab-site .field textarea{
  position:static!important;flex:none!important;height:auto!important;width:100%!important;
  font-family:var(--fb)!important;font-size:1rem!important;line-height:1.4!important;color:#eafdff!important;
  background:rgba(127,233,255,.05)!important;border:1px solid rgba(127,233,255,.24)!important;
  border-radius:12px!important;padding:.8rem .95rem!important;outline:none!important;
  box-shadow:none!important;transition:border-color .18s,box-shadow .18s;color-scheme:dark}
.field input:focus,.field select:focus,.field textarea:focus,
.frostlab-site .field input:focus,.frostlab-site .field textarea:focus{
  border-color:#7fe9ff!important;box-shadow:0 0 0 3px rgba(127,233,255,.14)!important}
.field input::placeholder,.field textarea::placeholder{color:rgba(234,253,255,.4)!important}
.field select option{background:#14293f;color:#eafdff}
.field textarea{min-height:96px;resize:vertical}
/* primary action button - same on every form */
.submit,.btn[type="submit"],button.submit,.formwrap .submit,#infForm .btn,.signup button{
  font-family:var(--fb)!important;font-weight:800!important;font-size:1rem!important;letter-spacing:.01em!important;
  text-transform:none!important;color:#031017!important;background:linear-gradient(180deg,#7fe9ff,#33d2ee)!important;
  border:none!important;border-radius:100px!important;padding:.95rem 1.4rem!important;cursor:pointer;
  box-shadow:0 8px 24px rgba(51,210,238,.28)!important;transition:filter .15s,opacity .15s}
.submit:hover,#infForm .btn:hover{filter:brightness(1.07)}
button[disabled],.submit[disabled]{opacity:.6!important;cursor:progress!important;filter:none!important}
.fmsg,#msg,.fmsg.ok,.fmsg.err{font-family:var(--fb)!important;font-size:.9rem!important;letter-spacing:normal!important}
.agree,label.agree{font-family:var(--fb)!important;font-size:.92rem!important;color:#dceef6!important;
  letter-spacing:normal!important;text-transform:none!important;align-items:flex-start;gap:.6rem}
.agree input[type=checkbox]{width:20px!important;height:20px!important;flex:none;margin-top:.15rem;accent-color:#33d2ee}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media(max-width:560px){.row2{grid-template-columns:1fr}}

/* Dawn ships html{62.5%} + body{1.5rem}; we reset the root, so the body needs the
   matching reset or text renders 24px on some pages and 16px on others. */
html{font-size:100%!important}
body{font-size:1rem!important;line-height:1.55}


/* ===== Flavor lineup - scroll-driven 3D deck ==============================
   BASE = a plain grid. Every flavor, its name and its description are readable
   here with no JavaScript at all; assets/frostlab.js adds .flav--live on top when
   motion is welcome and there is room for a sticky stage. Never make the grid
   depend on the 3D mode - the grid is the floor, not the fallback. */
.flav-head{margin-bottom:.2rem}
.flav-sub{margin:.7rem auto 0}
.flav-deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:2.4rem 1.4rem;margin-top:2.4rem}
.flav-item{margin:0;display:flex;flex-direction:column;align-items:center}
.flav-vis{display:block;width:100%}
.flav-item img{display:block;width:100%;max-width:250px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.55)) drop-shadow(0 0 24px var(--g,rgba(127,233,255,.35)))}
.flav-item figcaption{text-align:center;margin-top:1rem}
.flav-exp{display:block;font-family:var(--fm);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(234,255,255,.55)}
.flav-name{font-family:var(--fs);font-weight:400;font-size:clamp(1.8rem,4.6vw,2.7rem);line-height:1.06;
  margin:.3rem 0 .45rem;color:var(--c,#7fe9ff);text-shadow:0 0 18px var(--g,rgba(127,233,255,.4))}
.flav-desc{margin:0 auto;max-width:34ch;font-size:.92rem;line-height:1.55;color:rgba(234,255,255,.76)}
.flav-foot{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:2.8rem}
.flav-dots{display:flex;gap:.3rem}
.flav-dots[hidden]{display:none}
.flav-dot{width:34px;height:34px;display:grid;place-items:center;padding:0;background:none;border:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.flav-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:rgba(234,255,255,.26);
  transition:background .25s,transform .25s,box-shadow .25s}
.flav-dot[aria-selected="true"]::before{background:var(--dc,#7fe9ff);transform:scale(1.45);
  box-shadow:0 0 14px var(--dg,rgba(127,233,255,.65))}
.flav-dot:focus-visible{outline:2px solid var(--neon);outline-offset:1px;border-radius:50%}
.flav-soon{font-family:var(--fm);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(234,255,255,.68);display:inline-flex;align-items:center;gap:.5rem;margin:0;padding:.6rem 1.15rem;
  border:1px solid var(--line);border-radius:999px;background:rgba(127,233,255,.05)}
.flav-soon b{color:var(--neon);font-weight:700;font-size:.82rem}
@media(pointer:coarse){.flav-dot{width:44px;height:44px}}

/* ---- 3D mode ------------------------------------------------------------ */
.flav--live{padding-top:0;padding-bottom:0}
.flav--live .flav-track{position:relative;height:calc(100vh + (var(--n,4) - 1) * var(--step,66vh))}
/* The site header is position:sticky, so it sits over the top of a full-height
   sticky stage and was cutting the eyebrow in half. --headh is measured from the
   real header by the animator, so it stays right if the header ever changes. */
.flav--live .flav-stage{position:sticky;top:0;height:100vh;overflow-x:clip;
  padding-top:var(--headh,72px);
  display:flex;flex-direction:column;align-items:center;justify-content:center}
@supports (height:100svh){
  .flav--live .flav-track{height:calc(100svh + (var(--n,4) - 1) * var(--step,66vh))}
  .flav--live .flav-stage{height:100svh}
}
.flav--live .flav-deck{display:block;position:relative;width:min(720px,92vw);
  height:clamp(220px,42vh,420px);margin:1.4rem 0 clamp(146px,20vh,182px);
  perspective:1150px;perspective-origin:50% 46%}
.flav--live .flav-item{position:absolute;inset:0;display:block}
/* The box spans the whole deck and object-fit centres the art inside it, so the
   card's VISIBLE width is deck-height x 589/820 rather than the box width. The
   animator therefore spaces the cards in real pixels off that measurement - a
   percentage here would be a share of the box and would drift with the viewport.
   (An earlier version put height:100% on the img inside a grid, where a percentage
   resolves against the content-sized grid ROW: the art rendered at its natural
   820px and sat on top of its own caption.) */
.flav--live .flav-vis{position:absolute;inset:0;transform-origin:50% 50%;
  backface-visibility:hidden;will-change:transform,opacity}
.flav--live .flav-item img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.flav--live .flav-item figcaption{position:absolute;top:100%;left:0;right:0;margin:1.1rem auto 0;
  max-width:min(38ch,92vw);opacity:0;pointer-events:none;will-change:opacity,transform;
  transition:opacity .26s ease,transform .26s ease}
@media(prefers-reduced-motion:reduce){.flav--live .flav-item figcaption{transition:none}}
.flav--live .flav-foot{margin-top:0}
/* a short screen gets the room back before it gets the sub-heading */
@media(max-height:760px){.flav--live .flav-sub{display:none}}
@media(max-width:640px){
  .flav--live .flav-track{--step:58vh}
  /* Tighter deck + caption reserve on a phone, to buy back the room the pill
     clearance below costs. */
  .flav--live .flav-deck{height:clamp(190px,30vh,300px);margin-bottom:clamp(120px,18vh,152px)}
  /* The site's floating "first experiment free" pill is fixed to the bottom-left.
     The coming-soon line is pinned to the bottom of a STICKY stage, so without this
     the two sit on top of each other for as long as the section is on screen -
     unlike the old grid, which simply scrolled past underneath the pill. */
  .flav--live .flav-stage{padding-bottom:68px}
  .flav-deck{gap:2rem 1rem}
}
