/* ==========================================================================
   GATEWAY VENDING GROUP, styles.css
   Neutral charcoal base. Slate blue from the logo is used purely as an
   accent: glows, gradients, hover highlights and lighting effects.
   Display: Sora / Body: Inter.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  color-scheme:dark;

  /* Neutral charcoal / near-black surfaces (match the logo background) */
  --bg:        #0B0B0C;
  --bg2:       #101012;
  --surface:   #151517;
  --surface2:  #1A1A1D;
  --line:      #27272B;
  --text:      #ECEDEF;
  --muted:     #9BA1A8;

  /* Slate blue accent, from the logo arch */
  --slate:     #4E7292;
  --slate-brt: #83ACCB;
  --slate-dp:  #2C4356;

  --gold:      #D8B45C;   /* chase-card / easter-egg accent only */
  --gold-brt:  #F0D084;
  --buy-blue:  #2F7DF6;   /* Nayax UI blue */
  --menu-bg:   #EDF1F5;   /* machine screen light UI */
  --ok:        #2BC46C;

  --font-display:'Sora',sans-serif;
  --font-body:'Inter',sans-serif;

  --radius:14px;
  --radius-lg:26px;
  --container:1140px;
  --nav-h:84px;

  /* PUSH letterforms as a mask, so backlight shows only through the letters */
  --push-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 140' preserveAspectRatio='none'%3E%3Ctext x='260' y='106' text-anchor='middle' font-family='Arial Black, Arial, sans-serif' font-size='122' font-weight='900' letter-spacing='14' fill='%23fff'%3EPUSH%3C/text%3E%3C/svg%3E");
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--slate-brt);text-decoration:none}
a:hover{color:var(--text)}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--slate-brt);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;letter-spacing:-.015em;font-weight:800}
h1{font-size:clamp(2.4rem,5.6vw,4.2rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.2rem;font-weight:700}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}
section{position:relative}

.kicker{
  font-family:var(--font-body);font-weight:600;font-size:.75rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--slate-brt);
  display:block;margin-bottom:14px;
}
.section-head{margin-bottom:44px}
.section-head p.lede{color:var(--muted);max-width:56ch;margin-top:14px}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn-primary{background:var(--slate);color:#fff;box-shadow:0 0 0 rgba(78,114,146,0)}
.btn-primary:hover{background:var(--slate-brt);color:var(--bg);transform:translateY(-2px);box-shadow:0 10px 34px rgba(78,114,146,.4)}
.btn-ghost{border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--slate);color:var(--slate-brt);transform:translateY(-2px);box-shadow:0 8px 26px rgba(78,114,146,.18)}
.btn-lg{padding:17px 34px;font-size:1.05rem}
.btn .arrow{transition:transform .25s ease}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
[data-reveal].revealed{opacity:1;transform:none}

/* ---------- Nav ---------- */
.site-nav{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  background:rgba(11,11,12,.74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(39,39,43,.75);
}
.nav-inner{max-width:var(--container);margin:0 auto;height:100%;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
/* Bigger brand lockup: the logo carries the company name, so the whole
   wordmark scales up together */
.nav-brand img{height:60px;width:auto;mix-blend-mode:screen;transition:filter .3s ease}
.nav-brand:hover img{filter:drop-shadow(0 0 14px rgba(131,172,203,.45))}
.nav-links{display:flex;gap:30px}
.nav-links a{
  font-size:.85rem;font-weight:500;color:var(--muted);position:relative;padding:6px 0;
  transition:color .25s ease;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--slate-brt);border-radius:2px;transition:width .3s ease;
}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a.active::after,.nav-links a:hover::after{width:100%}
.nav-burger{display:none;background:none;border:0;width:40px;height:40px;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.nav-burger span{display:block;width:22px;height:2px;background:var(--text);transition:transform .3s ease,opacity .3s ease}

/* ---------- Page top padding ---------- */
main{padding-top:var(--nav-h)}

/* ---------- Arch motif (background) ----------
   True weighted-catenary Gateway Arch silhouette. JS drifts it on scroll
   (parallax); a slow luminosity breath gives it ambient life. */
.arch-motif{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(1100px,125vw);pointer-events:none;z-index:0;
  will-change:transform;
  animation:archBreath 9s ease-in-out infinite alternate;
}
@keyframes archBreath{from{opacity:.55}to{opacity:1}}

/* Faint blacked-out real logo, centered behind the hero text */
.hero-logo-bg{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(920px,120vw);max-width:none;pointer-events:none;z-index:0;
  opacity:.20;filter:brightness(0) drop-shadow(0 0 60px rgba(78,114,146,.25));
  animation:heroLogoBreath 10s ease-in-out infinite alternate;
}
@keyframes heroLogoBreath{from{opacity:.15}to{opacity:.24}}
/* Two-line headline: each phrase on its own line, visually distinct */
.hero-title{display:flex;flex-direction:column;gap:.06em;max-width:none}
.hero-title .ht-line{display:block}
.hero-title .ht-line:last-child{color:var(--slate-brt)}

/* ---------- HERO ---------- */
.hero{
  min-height:calc(96vh - var(--nav-h));
  display:flex;align-items:center;overflow:hidden;
}
.hero-glow{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:820px;height:560px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(78,114,146,.30),rgba(78,114,146,.09) 55%,transparent 75%);
  filter:blur(20px);pointer-events:none;z-index:1;
  animation:glowPulse 7s ease-in-out infinite alternate;
}
@keyframes glowPulse{from{opacity:.6;transform:translate(-50%,-50%) scale(.94)}to{opacity:.95;transform:translate(-50%,-50%) scale(1.06)}}
.hero-inner{position:relative;z-index:2;text-align:center;width:100%}
/* Item 3: larger hero kicker */
.kicker-hero{font-size:1.05rem;letter-spacing:.34em;margin-bottom:20px}
.hero .kicker,.hero h1,.hero .sub{opacity:0;animation:heroIn .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero .kicker{animation-delay:.15s}
.hero h1{animation-delay:.35s;max-width:20ch;margin:0 auto}
.hero .sub{animation-delay:.6s;color:var(--muted);font-size:1.1rem;max-width:52ch;margin:22px auto 0}
@keyframes heroIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hero-scrollcue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  color:var(--muted);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  opacity:0;animation:heroIn 1s ease 1.4s forwards;
}
.hero-scrollcue::after{content:"";display:block;width:1px;height:34px;background:linear-gradient(var(--slate-brt),transparent);margin:10px auto 0;animation:cueDrop 2s ease-in-out infinite}
@keyframes cueDrop{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---------- OUR MACHINES ---------- */
.machines{padding:110px 0;overflow:hidden}
.machines::before{ /* soft slate wash so the section breathes against charcoal */
  content:"";position:absolute;left:50%;top:8%;transform:translateX(-50%);
  width:900px;height:70%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(78,114,146,.10),transparent 72%);
}
.machines-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;position:relative}
.machine-card{text-align:center;position:relative;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.machine-card:hover{transform:translateY(-10px) scale(1.045)}
.machine-figure{position:relative;display:inline-block;margin:0 auto}

/* Slate halo behind each machine so it pops off the charcoal background */
.machine-halo{
  position:absolute;inset:2% -8%;border-radius:45%;
  background:radial-gradient(closest-side,rgba(131,172,203,.42),rgba(78,114,146,.16) 55%,transparent 75%);
  filter:blur(34px);z-index:0;
  animation:haloPulse 6s ease-in-out infinite alternate;
  transition:opacity .45s ease;
}
@keyframes haloPulse{from{opacity:.7}to{opacity:1}}

/* Slim Tower photo: animated RGB edge lighting traced around the machine's
   own silhouette via stacked drop-shadows, brightening on hover */
.tower-photo{
  position:relative;z-index:1;height:min(620px,64vh);width:auto;margin:0 auto;
  animation:rgbEdge 9s linear infinite;
}
@keyframes rgbEdge{
  0%   {filter:drop-shadow(0 30px 50px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(255,106,213,.5))}
  25%  {filter:drop-shadow(0 30px 50px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(255,211,106,.5))}
  50%  {filter:drop-shadow(0 30px 50px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(106,255,156,.5))}
  75%  {filter:drop-shadow(0 30px 50px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(106,200,255,.55))}
  100% {filter:drop-shadow(0 30px 50px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(255,106,213,.5))}
}
.machine-card:hover .tower-photo{animation-duration:4.5s}
.machine-card:hover .machine-halo{opacity:1}

/* Perspective-mapped live screen over the Tower photo */
.tower-screen{
  position:absolute;left:0;top:0;z-index:2;overflow:hidden;
  pointer-events:none;border-radius:6px;
  backface-visibility:hidden;
  container-type:size;
}
.tower-screen-track{display:flex;height:100%;width:200%;transition:transform .8s cubic-bezier(.65,0,.3,1)}
.tower-screen.show-menu .tower-screen-track{transform:translateX(-50%)}
.tscreen{width:50%;height:100%;position:relative;flex:0 0 50%}
.tscreen-idle img{width:100%;height:100%;object-fit:cover}
.tscreen-idle .tglow{
  position:absolute;inset:12% 8%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.20),transparent 70%);
  animation:neonPulse 2.8s ease-in-out infinite;mix-blend-mode:screen;
}
@keyframes neonPulse{0%,100%{opacity:.25}50%{opacity:.85}}

/* Mini recreated menu inside tower screen. All type is sized with container
   units (cqw) so nothing overflows regardless of the projected screen size */
.tmenu{background:var(--menu-bg);height:100%;display:flex;flex-direction:column;font-family:var(--font-body)}
.tmenu-ad{background:#131316;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:4cqw;padding:5cqw 6cqw}
.tmenu-ad img{height:13cqw;width:auto;mix-blend-mode:screen;flex:0 0 auto}
.tmenu-ad .tad-txt{font-size:5.4cqw;font-weight:700;line-height:1.3;text-align:right;letter-spacing:.02em;min-width:0}
.tmenu-ad .tad-txt em{
  display:inline-block;font-style:normal;color:#fff;background:var(--buy-blue);
  border-radius:2cqw;padding:.8cqw 3cqw;margin-top:1.6cqw;font-size:4.8cqw;white-space:nowrap;
}
.tmenu-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:3cqw;padding:5cqw 6cqw}
.tmenu-item{display:flex;flex-direction:column;align-items:center;gap:1.4cqw;min-height:0}
.tmenu-item .tpack{flex:1;width:76%;min-height:0;border-radius:1.6cqw;box-shadow:0 .6cqw 2cqw rgba(10,20,30,.25)}
.tmenu-item .tprice{font-size:3.6cqw;font-weight:700;color:#15181d;line-height:1}
.tmenu-item .tbuy{background:var(--buy-blue);color:#fff;font-size:2.9cqw;font-weight:600;border-radius:1.4cqw;padding:.7cqw 3.4cqw}

/* Wall unit: silhouetted until launch. Heavy darkening + desaturation +
   blur keeps the shape readable but the source screen content illegible */
.wall-photo{
  position:relative;z-index:1;height:min(360px,38vh);width:auto;margin:0 auto;
  filter:brightness(.16) saturate(0) contrast(1.15) blur(2.5px)
         drop-shadow(0 0 22px rgba(131,172,203,.4)) drop-shadow(0 24px 40px rgba(0,0,0,.5));
  transition:filter .45s ease;
}
.machine-card.is-muted .machine-halo{opacity:.55}
.machine-card.is-muted:hover .wall-photo{
  filter:brightness(.2) saturate(0) contrast(1.15) blur(2px)
         drop-shadow(0 0 30px rgba(131,172,203,.55)) drop-shadow(0 24px 44px rgba(0,0,0,.55));
}
.coming-soon{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-4deg);z-index:3;
  font-family:var(--font-display);font-weight:700;font-size:.85rem;letter-spacing:.2em;
  color:var(--text);background:rgba(16,16,18,.9);border:1px solid var(--slate-dp);
  box-shadow:0 0 30px rgba(78,114,146,.35);
  border-radius:999px;padding:12px 26px;text-transform:uppercase;white-space:nowrap;
}
.machine-meta{margin-top:30px}
.machine-meta h3{font-size:1.35rem}
.machine-meta .machine-tag{color:var(--slate-brt);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;display:block;margin:6px 0 10px}
.machine-meta p{color:var(--muted);font-size:.94rem;max-width:40ch;margin:0 auto}

/* ---------- HOW IT WORKS: scroll-driven card deck ----------
   The section is tall; a sticky frame pins the deck while scrolling
   advances it through Step 1 -> 2 -> 3, then it releases. JS sets
   data-active on the deck and per-card state; CSS handles the visuals. */
.how-deck{position:relative;background:linear-gradient(var(--bg2),var(--bg))}
.how-deck-frame{
  position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
}
.how-deck-head{text-align:center;margin-bottom:34px}
.deck{
  position:relative;width:min(300px,72vw);aspect-ratio:5/7;height:auto;margin:0 auto;
  perspective:1600px;
}
/* Physical deck base: stacked card edges sitting under the whole deck, so the
   stack always has visible thickness even on the last step (items 1, 4). */
.deck::before,
.deck::after{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  border-radius:18px;pointer-events:none;
  background:linear-gradient(160deg,#1e1f22,#17181a 70%);
  border:1px solid #2b3340;
  z-index:0;
}
.deck::before{transform:translateY(14px) scale(.955);opacity:.85}
.deck::after{transform:translateY(7px) scale(.978);opacity:.92}

.deck-card{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(160deg,var(--surface2),var(--surface) 70%);
  border:1px solid var(--slate-dp);border-radius:18px;
  padding:34px 30px;
  box-shadow:0 26px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(131,172,203,.1);
  transform-origin:center center;
  transition:transform .62s cubic-bezier(.34,.9,.35,1),opacity .3s ease,box-shadow .5s ease;
  will-change:transform,opacity;backface-visibility:hidden;
}
.deck-card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,transparent,var(--slate) 30%,var(--slate-brt) 50%,var(--slate) 70%,transparent);
}
/* subtle card-back texture band at the bottom, reinforces "trading card" */
.deck-card::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;border-radius:0 0 18px 18px;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 120%,rgba(78,114,146,.18),transparent 70%);
}
.deck-badge{
  align-self:flex-start;font-family:var(--font-display);font-weight:800;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate-brt);
  background:var(--slate-dp);border-radius:999px;padding:6px 15px;margin-bottom:18px;
}
.deck-glyph{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--slate-dp);color:var(--slate-brt);
}
.deck-card h3{font-size:1.5rem;margin-bottom:10px}
.deck-card p{color:var(--muted);font-size:.98rem;max-width:26ch}

/* Every card sits at a --depth (0 = top). Cards never leave the deck, they
   cycle to the back, so stacked thickness is always visible (items 1, 2). */
.deck-card{
  transform:
    translateY(calc(var(--depth,0) * 9px))
    translateZ(calc(var(--depth,0) * -34px))
    scale(calc(1 - var(--depth,0) * .035));
  opacity:1;
  z-index:calc(20 - var(--depth,0));
  filter:brightness(calc(1 - var(--depth,0) * .18));
}
/* The top card is fully lit and forward */
.deck-card[data-depth="0"]{filter:none}
/* Content only reads on the top card; deeper cards are just card backs */
.deck-card:not([data-depth="0"]) .deck-badge,
.deck-card:not([data-depth="0"]) .deck-glyph,
.deck-card:not([data-depth="0"]) h3,
.deck-card:not([data-depth="0"]) p{opacity:0;transition:opacity .3s ease}
.deck-card[data-depth="0"] .deck-badge,
.deck-card[data-depth="0"] .deck-glyph,
.deck-card[data-depth="0"] h3,
.deck-card[data-depth="0"] p{opacity:1;transition:opacity .45s ease .15s}

/* Mid-shuffle: the outgoing card riffles up and over to the right, then
   drops to the BACK of the stack (it never disappears, items 2 + 3). */
.deck-card.riffling{
  transform:translateY(-34%) translateX(26%) translateZ(60px) rotate(8deg) scale(1.02);
  z-index:40;filter:none;
  box-shadow:0 40px 80px rgba(0,0,0,.6);
  transition:transform .34s cubic-bezier(.4,.2,.6,1);
}
/* Scrolling back: the returning card lifts out of the back of the stack and
   arcs forward to the top (item 3, the visible shuffle-back). */
.deck-card.riffling-back{
  transform:translateY(-26%) translateX(-26%) translateZ(60px) rotate(-8deg) scale(1.02);
  z-index:40;filter:none;
  box-shadow:0 40px 80px rgba(0,0,0,.6);
  transition:transform .34s cubic-bezier(.4,.2,.6,1);
}

.deck-progress{display:flex;gap:10px;justify-content:center;margin-top:30px}
.dp-dot{width:9px;height:9px;border-radius:50%;background:var(--line);transition:background .3s ease,transform .3s ease}
.dp-dot.on{background:var(--slate-brt);transform:scale(1.25)}
.how-cta{text-align:center;margin-top:28px}

/* Fallback (no JS / reduced motion): show all three as a simple column */
.how-deck.no-pin .how-deck-frame{position:static;height:auto;padding:80px 0}
.how-deck.no-pin .deck{height:auto;aspect-ratio:auto;display:grid;gap:20px;perspective:none}
.how-deck.no-pin .deck::before,
.how-deck.no-pin .deck::after{display:none}
.how-deck.no-pin .deck-card{position:relative;inset:auto;transform:none;opacity:1;aspect-ratio:5/7;filter:none}
.how-deck.no-pin .deck-card .deck-badge,
.how-deck.no-pin .deck-card .deck-glyph,
.how-deck.no-pin .deck-card h3,
.how-deck.no-pin .deck-card p{opacity:1}

/* ---------- Static step grid (Partner page "How Partnership Works") ---------- */
.how{padding:100px 0;background:linear-gradient(var(--bg2),var(--bg))}
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:52px 0 44px}
.how-steps.how-steps-4{grid-template-columns:repeat(4,1fr)}
.how-step{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 28px;
  opacity:0;transform:translateY(40px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);
}
.how-steps.revealed .how-step{opacity:1;transform:none}
.how-steps.revealed .how-step:nth-child(2){transition-delay:.2s}
.how-steps.revealed .how-step:nth-child(3){transition-delay:.4s}
.how-steps.revealed .how-step:nth-child(4){transition-delay:.6s}
.how-step .step-n{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--slate-dp);color:var(--slate-brt);
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;
}
.how-step h3{margin-bottom:8px}
.how-step p{color:var(--muted);font-size:.94rem}

/* ---------- DUAL PATH ---------- */
.paths{padding:100px 0}
.paths-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.path-card{
  display:block;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--surface2),var(--surface) 65%);
  border:1px solid var(--slate-dp);border-radius:var(--radius-lg);
  padding:52px 44px;color:var(--text);
  box-shadow:0 14px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(131,172,203,.08);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .4s ease;
}
.path-card::before{
  content:"";position:absolute;inset:auto -30% -55% -30%;height:70%;
  background:radial-gradient(closest-side,rgba(78,114,146,.3),transparent 70%);
  opacity:.5;transition:opacity .45s ease;
}
.path-card::after{ /* slate accent line across the top edge */
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--slate) 30%,var(--slate-brt) 50%,var(--slate) 70%,transparent);
  opacity:.7;transition:opacity .4s ease;
}
.path-card:hover{transform:translateY(-8px);border-color:var(--slate);box-shadow:0 24px 64px rgba(0,0,0,.55),0 0 44px rgba(78,114,146,.22)}
.path-card:hover::before{opacity:1}
.path-card:hover::after{opacity:1}
.path-card .kicker{margin-bottom:10px}
.path-card h3{font-size:1.6rem;margin-bottom:12px}
.path-card p{color:var(--muted);max-width:38ch}
.path-card .go{display:inline-block;margin-top:26px;font-weight:600;color:var(--slate-brt)}
.path-card .go .arrow{display:inline-block;transition:transform .3s ease}
.path-card:hover .go .arrow{transform:translateX(5px)}

/* ---------- EASTER EGG VAULT DOOR ----------
   Matches the real machine's door (reference photos): a gray rectangular
   panel with rounded corners, recessed into the machine surface inside a
   bezel groove, with PUSH cut through it and backlit in the live RGB color.
   A gold shimmer creeps around the closed door's edges (item 8) and blazes
   when it swings open (item 16). Hinged so it swings like a real flap. */
.vault{
  padding:120px 0 130px;
  display:flex;flex-direction:column;align-items:center;overflow:hidden;
  /* the section reads as the machine's body */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(78,114,146,.10), transparent 60%),
    linear-gradient(180deg,#151517,#0E0E10 60%,#0B0B0C);
  --rgb:#83ACCB; /* live-updated by JS to match the RGB edge lighting */
}
.vault-wrap{
  position:relative;perspective:1300px;
  width:min(560px,92vw);padding:70px 60px;border-radius:28px;
  background:linear-gradient(160deg,#1C1C1F,#141416 55%,#111113);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -30px 60px rgba(0,0,0,.5),
    0 40px 90px rgba(0,0,0,.6);
}
.vault-wrap::before{ /* faint panel grain */
  content:"";position:absolute;inset:0;border-radius:28px;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 13px,rgba(255,255,255,.012) 13px 14px);
}
.vault-door{
  position:relative;width:100%;height:340px;cursor:pointer;
  perspective:1200px;
}
/* Recessed cavity / thin bezel groove the door sits inside (item 8) */
.vault-well{
  position:absolute;inset:0;border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 130% at 50% 40%,#0A0A0B,#050506);
  box-shadow:
    inset 0 4px 9px rgba(0,0,0,.85),
    inset 0 -2px 5px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(0,0,0,.85);
}
/* Gold seam glow around the door edges. Present (soft) when closed as a
   creeping shimmer on sides + bottom (item 8), blazing when open (item 16).
   Top is the hinge, so it stays dark there (structural). */
.vault-seam{
  position:absolute;inset:0;border-radius:20px;pointer-events:none;z-index:1;
  box-shadow:
    inset  5px 0 14px -7px rgba(216,180,92,.5),
    inset -5px 0 14px -7px rgba(216,180,92,.5),
    inset 0 -7px 16px -7px rgba(216,180,92,.55);
  transition:box-shadow .5s ease;
  animation:seamShimmer 4.5s ease-in-out infinite;
}
@keyframes seamShimmer{
  0%,100%{filter:brightness(.8)}
  50%{filter:brightness(1.35)}
}
.vault-door.open .vault-seam{
  animation:none;
  box-shadow:
    inset  10px 0 26px -6px rgba(240,208,132,.95),
    inset -10px 0 26px -6px rgba(240,208,132,.95),
    inset 0 -14px 34px -6px rgba(255,224,150,1),
    0 0 60px rgba(240,208,132,.5);
}
/* Two chase cards slide out of the door's BOTTOM-LEFT CORNER, fanned
   diagonally upward. The container is clipped to the door's bottom edge, so
   the lower half of each card stays hidden behind the door panel. */
.vault-cards{
  position:absolute;
  /* anchored to the bottom-left corner of the door */
  left:0;bottom:0;
  width:70%;height:78%;
  z-index:2;pointer-events:none;
  /* the clip: nothing paints below the door's bottom edge */
  overflow:hidden;
}
.vault-cards .vcard{
  position:absolute;
  /* the corner is the origin: cards pivot and slide out from here */
  left:4%;bottom:-46%;
  width:126px;height:176px;border-radius:11px;overflow:hidden;
  border:1px solid rgba(216,180,92,.5);
  box-shadow:0 12px 30px rgba(0,0,0,.7),0 0 20px rgba(216,180,92,.18);
  display:flex;flex-direction:column;justify-content:flex-start;gap:2px;padding:12px 11px;
  /* pivot at the lower-left so the fan opens up and to the right */
  transform-origin:0% 100%;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .45s ease;
  opacity:0;
}
.vault-cards .vcard::before{ /* holo sheen sweep on open */
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 45%,transparent 60%);
  transform:translateX(-120%);transition:transform 1.1s ease .35s;
}
.vault-door.open .vault-cards .vcard::before{transform:translateX(120%)}
/* Real card photo fills the peek card; the value strip stays legible over it */
.vault-cards .vcard .vc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;-webkit-user-drag:none;user-select:none;z-index:0}
.vault-cards .vcard.has-img{justify-content:flex-end}
.vault-cards .vcard.has-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));z-index:0;pointer-events:none}
.vault-cards .vcard .vc-name{position:relative;font-family:var(--font-display);font-size:.78rem;font-weight:700;color:#fff;line-height:1.3;text-shadow:0 1px 4px rgba(0,0,0,.75)}
.vault-cards .vcard .vc-set{position:relative;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(236,237,239,.75)}
.vault-cards .vcard .vc-val{position:relative;font-family:var(--font-display);font-size:.8rem;font-weight:700;color:var(--gold-brt);margin-top:3px}
/* Rest: fully tucked down inside the machine, below the clip line */
.vault-cards .vcard:first-child,
.vault-cards .vcard:last-child{
  transform:translate(18%,44%) rotate(0deg);
}
/* Open: each card slides up and out of the bottom-left corner, tilted as if
   pulled from the slot at an angle. The clip on .vault-cards hides the lower
   half of each card behind the door's bottom edge. */
.vault-door.open .vault-cards .vcard{opacity:1}
/* back card: fans further left / steeper tilt */
.vault-door.open .vault-cards .vcard:first-child{
  transform:translate(38%,-30%) rotate(-26deg);
}
/* front card: overlaps it, shallower tilt, slightly further right */
.vault-door.open .vault-cards .vcard:last-child{
  transform:translate(60%,-22%) rotate(-11deg);
}

/* The hinged panel. Its face is the same color family as its border/frame
   (item 5), sitting slightly recessed behind a thin bezel (item 8). */
.vault-panel{
  position:absolute;inset:0;z-index:3;border-radius:18px;
  background:linear-gradient(165deg,#1f2028,#191a20 55%,#141519);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -22px 44px rgba(0,0,0,.45),
    0 6px 16px rgba(0,0,0,.5);
  transform-origin:top center;
  transition:transform .7s cubic-bezier(.34,1.1,.4,1),box-shadow .6s ease;
  overflow:hidden;
  display:grid;place-items:center;
}
.vault-panel::after{ /* thin bezel lip: sells the inset without bulk (item 8) */
  content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 0 0 1.5px rgba(0,0,0,.5);
}
/* PUSH cut through the panel: a solid RGB fill masked to the letterforms, so
   light appears ONLY inside the letters, never as a glowing box (item 6).
   Sized to nearly span the door width (item 7). */
.vault-push{
  position:relative;z-index:1;
  display:block;width:86%;aspect-ratio:520/140;
  font-size:0;color:transparent;text-indent:-9999px;overflow:hidden;
  background:var(--rgb);
  -webkit-mask:var(--push-mask) center/100% 100% no-repeat;
  mask:var(--push-mask) center/100% 100% no-repeat;
  animation:pushFlicker 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pushFlicker{0%,100%{opacity:.86}50%{opacity:1}}
/* The .vault-backlight element is no longer used; hide it if present */
.vault-backlight{display:none}

/* Swing open from the top hinge like a real flap (item 11,15) */
.vault-door.open .vault-panel{
  transform:rotateX(-78deg);
  box-shadow:0 30px 60px rgba(0,0,0,.6);
}
/* Small hint label beneath the door (item 3) */
.vault-hint{
  margin-top:26px;text-align:center;
  font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
  transition:color .4s ease,opacity .4s ease;
}
.vault-door:hover ~ .vault-hint,
.vault-door.open ~ .vault-hint{color:var(--gold-brt)}

/* ==========================================================================
   LIVE INVENTORY, machine mimic + chase spotlight
   ========================================================================== */

.mimic-scroll{position:relative}
.mimic-frame{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow:hidden;display:flex;justify-content:center}
.mimic-stage{will-change:transform;padding-top:22px}

/* The machine cabinet */
.machine-unit{width:min(430px,90vw);margin:0 auto;position:relative}
/* RGB edge lighting frames the lit cabinet on top + sides only. The bottom
   is left open (item 24) so the base below reads as unlit structure. */
.machine-rgb{
  border-radius:24px 24px 0 0;padding:5px 5px 0 5px;
  background:linear-gradient(115deg,#ff6ad5,#ffd36a,#6aff9c,#6ac8ff,#a56aff,#ff6ad5);
  background-size:300% 300%;animation:rgbFlow 11s linear infinite;
  box-shadow:0 0 55px rgba(106,200,255,.16),0 30px 70px rgba(0,0,0,.55);
}
@keyframes rgbFlow{from{background-position:0% 50%}to{background-position:300% 50%}}
.machine-inner{background:linear-gradient(180deg,#141416,#0B0B0C);border-radius:20px 20px 0 0;padding:26px 22px 30px;display:flex;flex-direction:column;gap:0}

/* Screen */
.m-screen{
  position:relative;border-radius:8px;overflow:hidden;background:#000;
  aspect-ratio:558/1000;
  box-shadow:inset 0 0 0 2px #050506,0 0 24px rgba(0,0,0,.6);
  cursor:pointer;
  /* Nothing on the machine screen should be selectable or individually
     draggable; only row swiping and the Buy button remain interactive. This
     stops a press that starts on a card image from grabbing/dragging the image
     instead of scrolling the row. */
  user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;
  -webkit-touch-callout:none;
}
.m-screen img{-webkit-user-drag:none;pointer-events:none}
/* The Buy button stays fully interactive. */
.m-screen .buy{pointer-events:auto}
.m-idle,.m-menu{position:absolute;inset:0;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.m-idle img{width:100%;height:100%;object-fit:cover}
.m-idle .idle-glow{
  position:absolute;inset:14% 8%;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent 70%);
  animation:neonPulse 2.8s ease-in-out infinite;
}
.m-idle .idle-hint{
  position:absolute;left:50%;bottom:5.5%;transform:translateX(-50%);
  font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#0d1a3a;
  background:rgba(255,255,255,.85);border-radius:999px;padding:7px 18px;white-space:nowrap;
  animation:hintPulse 2.2s ease-in-out infinite;
}
@keyframes hintPulse{0%,100%{opacity:.75;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.05)}}
.m-menu{opacity:0;transform:scale(1.04);pointer-events:none;background:var(--menu-bg);display:flex;flex-direction:column}
.m-screen.awake .m-idle{opacity:0;transform:scale(.97);pointer-events:none}
.m-screen.awake .m-menu{opacity:1;transform:none;pointer-events:auto}

/* In-screen Nayax-style UI */
.m-ad{
  background:#131316;color:#fff;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:18px 18px;flex:0 0 auto;border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,#ff6ad5,#ffd36a,#6aff9c,#6ac8ff) 1;
}
.m-ad img{height:42px;width:auto;mix-blend-mode:screen}
.m-ad .ad-copy{text-align:right;font-size:.74rem;font-weight:700;letter-spacing:.03em;line-height:1.3;min-width:0}
.m-ad .ad-copy em{font-style:normal;display:inline-block;background:var(--buy-blue);border-radius:4px;padding:3px 10px;margin-top:5px;font-size:.68rem;white-space:nowrap}
.m-lanes{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;gap:8px;padding:16px 0;min-height:0}
/* proximity snap + JS inertia = smooth, momentum-based swiping */
.m-lane{
  display:flex;gap:12px;overflow-x:auto;padding:6px 14px;
  scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
}
.m-lane::-webkit-scrollbar{display:none}
.m-lane.dragging{cursor:grabbing;scroll-snap-type:none}
.m-item{
  flex:0 0 31%;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:5px;
  user-select:none;-webkit-user-drag:none;
}
.m-item .slot{
  align-self:flex-start;background:#15181d;color:#fff;font-size:.56rem;font-weight:700;
  border-radius:3px;padding:1px 5px;
}
.m-item .prod{width:74%;aspect-ratio:5/7;border-radius:5px;box-shadow:0 3px 9px rgba(10,20,30,.28)}
.m-item .prod.tin{aspect-ratio:1/1;border-radius:10px}
.m-item .price{font-size:.78rem;font-weight:700;color:#15181d;margin-top:2px}
.m-item .pname{font-size:.56rem;color:#5c6b78;text-align:center;line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.m-item .buy{background:var(--buy-blue);color:#fff;border:0;border-radius:5px;font-size:.62rem;font-weight:600;padding:4px 18px;transition:background .2s ease}
.m-item .buy:hover{background:#1f66d8}
.m-devline{flex:0 0 auto;display:flex;justify-content:space-between;color:#8b98a5;font-size:.55rem;padding:6px 14px;background:#e3e9ef}

/* Generated product art (packs/tins with no photo yet) */
.foil{position:relative;overflow:hidden;display:grid;place-items:end center;padding:6px}
.foil::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28) 45%,transparent 60%);transform:translateX(-100%);transition:transform .8s ease}
.foil:hover::before{transform:translateX(100%)}
.foil .foil-label{position:relative;font-size:.5rem;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.92);text-align:center;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.5)}
/* Real card photo fills the foil slot; the shimmer ::before still sweeps over
   it. draggable=false + pointer-events:none stop it hijacking row swipes. */
.foil .foil-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;pointer-events:none;-webkit-user-drag:none;user-select:none}
.foil-pokemon{background:linear-gradient(160deg,#3D5F7E,#1E2F40 55%,#152029)}
.foil-onepiece{background:linear-gradient(160deg,#8E3B3B,#4A1F24 55%,#2B1216)}
.foil-neutral{background:linear-gradient(160deg,#4A5560,#232A32 55%,#161B21)}

/* Card reader */
.m-reader{margin:34px auto 0;width:44%;position:relative}
.reader-body{background:linear-gradient(180deg,#1D1F24,#121316);border:1px solid #26282e;border-radius:12px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:9px}
.reader-screen{
  width:72%;aspect-ratio:4/3;border-radius:6px;background:#0B0E12;
  display:grid;place-items:center;overflow:hidden;position:relative;
  box-shadow:inset 0 0 0 1px #21242b;
}
.reader-wave{color:var(--slate-brt);opacity:.8;transition:opacity .4s ease}
.reader-check{
  position:absolute;inset:0;display:grid;place-items:center;background:#0E2A1C;
  opacity:0;transform:scale(.6);transition:opacity .45s ease,transform .45s cubic-bezier(.3,1.4,.4,1);
}
.reader-check svg{width:44%;height:44%}
.reader-check .ckr{stroke:var(--ok);stroke-width:7;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .5s ease .25s}
.m-reader.approved .reader-wave{opacity:0}
.m-reader.approved .reader-check{opacity:1;transform:scale(1)}
.m-reader.approved .ckr{stroke-dashoffset:0}
.reader-strip{width:86%;height:7px;border-radius:4px;background:#0B0D10;box-shadow:inset 0 1px 3px #000}
.reader-label{font-size:.55rem;letter-spacing:.24em;color:#5c6b78;text-transform:uppercase}

/* Drop-box door: recessed into the cabinet, top-hinged, gold seam glow on
   sides + bottom, PUSH cut through the panel and backlit in the live RGB
   color (--rgb, updated by JS). Mirrors the homepage vault door (item 22). */
.m-door{margin:30vh auto 0;width:60%;perspective:900px;position:relative;--rgb:#83ACCB}
.door-well{position:relative;height:0;padding-bottom:64%}
/* recessed cavity / thin bezel groove (item 8) */
.door-well::before{
  content:"";position:absolute;inset:0;border-radius:14px;
  background:radial-gradient(120% 130% at 50% 40%,#0A0A0B,#050506);
  box-shadow:inset 0 4px 8px rgba(0,0,0,.85),inset 0 0 0 1px rgba(0,0,0,.85);
}
/* gold seam: soft creeping shimmer when closed, blaze when open. Top = hinge. */
.door-seam{
  position:absolute;inset:0;border-radius:14px;pointer-events:none;z-index:1;
  box-shadow:
    inset  5px 0 12px -6px rgba(216,180,92,.5),
    inset -5px 0 12px -6px rgba(216,180,92,.5),
    inset 0 -6px 14px -6px rgba(216,180,92,.55);
  transition:box-shadow .5s ease;
  animation:seamShimmer 4.5s ease-in-out infinite;
}
.m-door.open .door-seam{
  animation:none;
  box-shadow:
    inset  8px 0 20px -5px rgba(240,208,132,.95),
    inset -8px 0 20px -5px rgba(240,208,132,.95),
    inset 0 -12px 28px -5px rgba(255,224,150,1),
    0 0 44px rgba(240,208,132,.5);
}
.door-cards{position:absolute;inset:6% 10%;display:flex;justify-content:center;pointer-events:none;z-index:2}
.door-panel{
  position:absolute;inset:0;z-index:3;border-radius:14px;overflow:hidden;
  background:linear-gradient(165deg,#1f2028,#191a20 55%,#141519);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -16px 32px rgba(0,0,0,.45),0 5px 12px rgba(0,0,0,.5);
  transform-origin:top center;transition:transform .8s cubic-bezier(.34,1.05,.4,1),box-shadow .6s ease;
  display:grid;place-items:center;
}
.door-panel::after{ /* thin bezel lip (item 8) */
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 0 0 1.5px rgba(0,0,0,.5);
}
.door-backlight{display:none}
/* PUSH: RGB shows only through the letterforms via mask (item 6), sized to
   nearly span the door width (item 7). */
.door-panel span{
  position:relative;z-index:1;
  display:block;width:86%;aspect-ratio:520/140;
  font-size:0;color:transparent;text-indent:-9999px;overflow:hidden;
  background:var(--rgb);
  -webkit-mask:var(--push-mask) center/100% 100% no-repeat;
  mask:var(--push-mask) center/100% 100% no-repeat;
  animation:pushFlicker 5s ease-in-out infinite;pointer-events:none;
}
/* top-hinge swing outward */
.m-door.open .door-panel{transform:rotateX(-78deg);box-shadow:0 20px 44px rgba(0,0,0,.6)}

/* Real machine base: a low, flat platform noticeably WIDER than the cabinet,
   overhanging on both sides, with a lit top face, a darker front edge and
   caster wheels beneath (matches the real machine's plinth). The RGB frame
   stops above it so the base reads as unlit structure (item 24). */
.m-base{
  position:relative;
  /* overhangs the cabinet on both sides, escaping the unit's width */
  width:min(486px,98vw);
  margin-left:50%;transform:translateX(-50%);
  z-index:2;
}
/* Top surface of the plinth, catching light from above */
.m-base-face{
  position:relative;
  height:26px;border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,#34343a 0%,#26262b 45%,#191A1E 100%);
  border:1px solid #3a3a42;border-bottom:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 -2px 10px rgba(0,0,0,.5);
}
/* Front/side edge face of the plinth: darker, gives it real thickness */
.m-base-face::after{
  content:"";position:absolute;left:0;right:0;top:100%;
  height:22px;border-radius:0 0 5px 5px;
  background:linear-gradient(180deg,#1B1B1F,#101013 70%,#0A0A0C);
  border:1px solid #26262c;border-top:0;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55);
}
/* Caster wheels under the plinth */
.m-base-foot{
  position:relative;margin-top:22px;height:14px;
  display:flex;justify-content:space-between;padding:0 26px;
}
.m-base-foot::before,
.m-base-foot::after{
  content:"";width:15px;height:14px;border-radius:0 0 50% 50%;
  background:linear-gradient(180deg,#242429,#0C0C0E);
  box-shadow:0 6px 12px rgba(0,0,0,.65);
}
/* Ground shadow pooling under the whole base */
.m-base::after{
  content:"";position:absolute;left:6%;right:6%;top:100%;height:26px;
  background:radial-gradient(60% 100% at 50% 0%,rgba(0,0,0,.7),transparent 75%);
  pointer-events:none;
}

.mimic-cue{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  color:var(--muted);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  animation:hintPulse 2.4s ease-in-out infinite;pointer-events:none;z-index:5;
}

/* Chase cards spilling out of the open door. Positioned INSIDE the door so
   they emerge from the door's actual location, then a short burst before the
   grid flyers take over. */
.spill-card{
  position:absolute;left:50%;top:30%;z-index:1;
  width:24%;aspect-ratio:5/7;border-radius:8px;pointer-events:none;
  box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 0 1px rgba(216,180,92,.4),0 0 18px rgba(216,180,92,.2);
  transition:transform 1.15s cubic-bezier(.3,.6,.35,1),opacity .5s ease .75s;
  will-change:transform;opacity:1;
  transform:translate(-50%,0) rotate(0deg) scale(.5);
}

/* A single card flying from the door to its grid slot (item 26). Fixed to the
   viewport so it can travel across sections; JS sets start/end transforms. */
.flyer-card{
  position:fixed;z-index:400;border-radius:10px;pointer-events:none;
  box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 0 1px rgba(216,180,92,.45),0 0 22px rgba(216,180,92,.28);
  transition:transform .72s cubic-bezier(.4,.75,.35,1),opacity .2s ease;
  will-change:transform,opacity;
}

/* ---------- Chase spotlight ---------- */
/* item 25: header in a normal container, grid in its own full-bleed stage so
   the incoming placement animation is never clipped by surrounding text. */
.chase{padding:40px 0 130px}
.chase-head{text-align:center;max-width:640px;margin:0 auto}
.chase-stage{margin-top:54px}
/* Dynamic layout: a centered flex row-wrap so a short final row is centred
   rather than left-aligned with a gap. JS also picks a column count that
   divides the entry count as evenly as possible and sets --chase-cols, so the
   card width adapts to however many entries exist in chase-cards.json. */
.chase-grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:18px;
  max-width:1060px;margin:0 auto;
  --chase-cols:6;
}
.chase-card{
  position:relative;aspect-ratio:5/7;border-radius:10px;overflow:hidden;
  /* each card takes 1/cols of the row, minus the gaps between them */
  flex:0 0 calc((100% - (var(--chase-cols) - 1) * 18px) / var(--chase-cols));
  max-width:180px;
  opacity:0;transform:translateY(20px) scale(.9);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1),filter .35s ease;
  cursor:default;
}
/* When a flyer is en route to a cell, hold the cell invisible (no placeholder) */
.chase-card.reserved{opacity:0;transform:none}
/* Snap in when the flyer arrives */
.chase-card.landed{opacity:1;transform:none;animation:cardSnap .4s cubic-bezier(.34,1.5,.5,1)}
@keyframes cardSnap{0%{transform:scale(1.12)}60%{transform:scale(.97)}100%{transform:scale(1)}}
.chase-grid:hover .chase-card.landed:not(:hover){opacity:.32;filter:saturate(.6)}
.chase-card:hover{transform:translateY(-10px) scale(1.07);z-index:5}
.chase-card .face{position:absolute;inset:0;display:grid;place-items:end center;padding:10px;transition:opacity .6s ease}
.chase-card .face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chase-card .face .foil-label{font-size:.62rem}
.chase-card .face.back{opacity:0}
.chase-card.flipping .face.front{opacity:0}
.chase-card.flipping .face.back{opacity:1}
.chase-card::after{ /* gold pulse ring on hover */
  content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 1px rgba(216,180,92,0),0 0 0 rgba(216,180,92,0);
  transition:box-shadow .3s ease;
}
.chase-card:hover::after{animation:goldPulse 2s ease-in-out infinite}
@keyframes goldPulse{
  0%,100%{box-shadow:0 0 0 1.5px rgba(216,180,92,.55),0 0 16px rgba(216,180,92,.25)}
  50%{box-shadow:0 0 0 1.5px rgba(240,208,132,.95),0 0 34px rgba(216,180,92,.55)}
}
.chase-card .tag{
  position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;
  background:linear-gradient(transparent,rgba(5,5,7,.92) 55%);
  opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;
  text-align:center;
}
.chase-card:hover .tag{opacity:1;transform:none}
.chase-card .tag .t-set{display:block;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chase-card .tag .t-val{display:block;font-family:var(--font-display);font-weight:700;color:var(--gold-brt);font-size:.95rem;margin-top:2px}

/* ==========================================================================
   PARTNER PAGE
   ========================================================================== */
.page-hero{padding:100px 0 70px;text-align:center;overflow:hidden}
.page-hero-tight{padding:70px 0 18px}
.page-hero .sub{color:var(--muted);max-width:56ch;margin:20px auto 0;font-size:1.05rem}

.stats{padding:20px 0 80px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:38px 30px;text-align:center;position:relative;overflow:hidden;
  transition:border-color .35s ease,box-shadow .35s ease;
}
.stat::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--slate),transparent);opacity:.6;
}
.stat:hover{border-color:var(--slate-dp);box-shadow:0 12px 40px rgba(78,114,146,.14)}
.stat-num{font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,4.5vw,3.1rem);color:var(--slate-brt);letter-spacing:-.02em}
.stat-num small{font-size:.5em;font-weight:700;color:var(--muted)}
.stat-label{color:var(--muted);font-size:.88rem;margin-top:8px}
.stats-note{
  margin-top:26px;text-align:center;color:var(--text);font-weight:500;font-size:.92rem;
  border:1px dashed var(--slate-dp);border-radius:999px;padding:13px 26px;display:table;margin-left:auto;margin-right:auto;
  max-width:min(760px,92%);
}

.why{padding:80px 0;background:var(--bg2)}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:50px}
.why-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.why-card:hover{transform:translateY(-5px);border-color:var(--slate-dp);box-shadow:0 14px 40px rgba(78,114,146,.12)}
.why-card .glyph{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--slate-dp);color:var(--slate-brt);margin-bottom:18px}
.why-card h3{margin-bottom:8px}
.why-card p{color:var(--muted);font-size:.94rem}

/* Proof of concept: one bold panel, stats front and center */
.proof{padding:90px 0}
.proof-panel{
  background:linear-gradient(155deg,var(--surface2),var(--surface) 70%);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(44px,6vw,72px);position:relative;overflow:hidden;
}
.proof-panel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--slate) 25%,var(--gold) 50%,var(--slate) 75%,transparent);
}
.proof-head{text-align:center;max-width:620px;margin:0 auto 50px}
.proof-head p{color:var(--muted);margin-top:14px;font-size:1.02rem}
.proof-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.pstat{padding:40px 20px;text-align:center;border-right:1px solid var(--line)}
.pstat:last-child{border-right:0}
.pnum{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(2.3rem,5.2vw,3.6rem);color:var(--text);line-height:1;
}
.pstat:nth-child(2) .pnum{color:var(--slate-brt)}
.plabel{color:var(--muted);font-size:.95rem;margin-top:14px;font-weight:500}
.proof-note{
  margin:44px auto 0;max-width:640px;color:var(--text);font-size:1rem;line-height:1.7;
  border-left:3px solid var(--gold);padding-left:22px;
}

.venue-how{padding:20px 0 90px}
.terms{padding:0 0 90px}
.terms-strip{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);
}
.term{flex:1 1 190px;padding:30px 22px;text-align:center;border-right:1px solid var(--line)}
.term:last-child{border-right:0}
.term h4{font-size:1.2rem;color:var(--slate-brt)}
.term p{color:var(--muted);font-size:.85rem;margin-top:6px}

/* ---------- Forms (dark themed) ---------- */
.inquiry{padding:0 0 130px}
.form-panel{
  max-width:880px;margin:0 auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(44px,6vw,72px);
}
.form-panel .section-head{margin-bottom:44px;text-align:center}
.form-panel .section-head .lede{margin-left:auto;margin-right:auto}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.form-grid label{
  display:flex;flex-direction:column;gap:9px;
  font-size:.8rem;font-weight:600;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;
}
.form-grid .form-full{grid-column:1 / -1}
.form-grid input,
.form-grid select,
.form-grid textarea{
  width:100%;appearance:none;-webkit-appearance:none;
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  color:var(--text);padding:16px 18px;
  font-family:var(--font-body);font-size:1rem;font-weight:400;letter-spacing:0;text-transform:none;
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.form-grid input::placeholder,.form-grid textarea::placeholder{color:#5f666e}
.form-grid input:hover,.form-grid select:hover,.form-grid textarea:hover{border-color:var(--slate-dp)}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{
  outline:none;border-color:var(--slate);background:var(--surface2);
  box-shadow:0 0 0 3px rgba(78,114,146,.22),0 0 24px rgba(78,114,146,.10);
}
.form-grid select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2383ACCB' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;padding-right:46px;cursor:pointer;
}
.form-grid select:invalid{color:#5f666e}
.form-grid select option{background:var(--surface);color:var(--text)}
.form-grid textarea{min-height:140px;resize:vertical}
form .btn{margin-top:30px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ==========================================================================
   LOCATIONS
   ========================================================================== */
.map-section{padding:10px 0 120px}
.map-wrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line)}
#map{height:540px;background:var(--bg2)}
.map-empty{
  position:absolute;inset:0;z-index:500;display:grid;place-items:center;pointer-events:none;
  background:linear-gradient(rgba(11,11,12,.25),rgba(11,11,12,.55));
}
.map-empty-inner{
  pointer-events:auto;background:rgba(16,16,18,.93);border:1px solid var(--line);
  backdrop-filter:blur(8px);border-radius:var(--radius);padding:36px 44px;text-align:center;max-width:440px;
  box-shadow:0 0 60px rgba(78,114,146,.14);
}
.map-empty-inner h3{margin-bottom:8px}
.map-empty-inner p{color:var(--muted);font-size:.92rem;margin-bottom:20px}
.leaflet-container{font-family:var(--font-body)}
.leaflet-popup-content-wrapper{background:var(--surface);color:var(--text);border-radius:10px;border:1px solid var(--line)}
.leaflet-popup-tip{background:var(--surface)}
.leaflet-popup-content b{font-family:var(--font-display)}
.loc-list{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.loc-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.loc-card h3{margin-bottom:6px}
.loc-card p{color:var(--muted);font-size:.9rem}
.loc-card .stock{margin-top:10px;font-size:.8rem;color:var(--slate-brt);font-weight:600}

/* ==========================================================================
   ABOUT / CONTACT / THANKS
   ========================================================================== */
.about{padding:20px 0 60px}
.about-prose{max-width:720px;margin:0 auto}
.about-prose .lede{font-size:1.25rem;color:var(--text);font-weight:500;line-height:1.6;margin-bottom:26px}
.about-prose p{color:#BFC5CB;margin-bottom:22px;font-size:1.05rem}

/* Even 2 x 2 grid of fact boxes, larger type */
.about-facts{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  max-width:720px;margin:52px auto 0;
}
.about-facts .fact{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;transition:border-color .3s ease,box-shadow .3s ease;
}
.about-facts .fact:hover{border-color:var(--slate-dp);box-shadow:0 10px 34px rgba(78,114,146,.1)}
.about-facts .fact h4{
  font-family:var(--font-body);font-size:.74rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--slate-brt);margin-bottom:10px;
}
.about-facts .fact p{color:var(--text);font-size:1.08rem;line-height:1.55;font-weight:500}

.contact{padding:0 0 120px}

/* ============================================================
   CONTACT DROP BOX
   Proportions measured from the real drop box photo:
   box aspect W/H = 0.847; beveled top = top 16%, widening from
   82% to 100% of width; card slot ~10% down in the top face;
   square door spans 12%..83% across, starting 30% down.
   Recolored from the photo's white to our dark charcoal.
   ============================================================ */
.dropbox-stage{
  position:relative;
  max-width:640px;margin:0 auto;
  /* Headroom for the upright card to hover clear above the slot before it
     drops in. Upright, the card stands as tall as its landscape width, so the
     runway needs to be a bit over half of that. */
  padding:150px 0 10px;
  /* the toploader flies in from off-stage left */
  overflow:hidden;
}
.dropbox{
  position:relative;
  width:100%;
  aspect-ratio:.847;              /* measured from the reference */
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.6));
}

/* ---- beveled top face + card slot ---- */
.db-top{
  position:absolute;left:0;right:0;top:0;height:16%;
  /* trapezoid: narrower at the back, full width at the front edge */
  clip-path:polygon(9% 0, 91% 0, 100% 100%, 0 100%);
  background:linear-gradient(180deg,#2A2B31 0%,#232429 55%,#1B1C21 100%);
  border-radius:14px 14px 0 0;
}
.db-top::after{ /* front lip highlight where the bevel meets the body */
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 20%,rgba(255,255,255,.14) 80%,transparent);
}
.db-slot{
  position:absolute;left:16%;right:16%;top:58%;height:9%;
  background:#050506;border-radius:3px;
  box-shadow:
    inset 0 3px 7px rgba(0,0,0,.95),
    0 1px 0 rgba(255,255,255,.10);
  overflow:hidden;
}
.db-slot-lip{ /* inner shadow lip so the slot reads as a real opening */
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.55));
}
.db-slot.lit{box-shadow:inset 0 3px 7px rgba(0,0,0,.95),0 0 18px rgba(131,172,203,.55),0 1px 0 rgba(255,255,255,.10)}

/* ---- body / front face ---- */
.db-body{
  position:absolute;left:0;right:0;top:15.4%;bottom:0;
  background:linear-gradient(160deg,#232429 0%,#1C1D22 45%,#141519 100%);
  border-radius:0 0 16px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset -18px 0 34px rgba(0,0,0,.4),
    inset 0 -20px 40px rgba(0,0,0,.35);
}
.db-body::before{ /* subtle texture, mirrors the photo's powder-coat finish */
  content:"";position:absolute;inset:0;border-radius:0 0 16px 16px;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(255,255,255,.008) 3px 4px);
}
/* chamfered lower corners, as in the reference photo */
.db-body::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:7%;
  clip-path:polygon(0 0, 100% 0, 94% 100%, 6% 100%);
  background:linear-gradient(180deg,#191A1E,#0F1013);
  border-radius:0 0 10px 10px;
}

/* ---- the square door (form lives here) ---- */
.db-door{
  position:absolute;
  /* symmetric insets so the door (and the form on it) centres under the
     header; the reference photo's asymmetry is just its camera angle */
  left:12%;right:12%;top:18%;bottom:14%;
  background:linear-gradient(160deg,#26272D,#1E1F24 60%,#191A1F);
  border-radius:5px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 2px 5px rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.6);
  display:grid;place-items:center;
  padding:14px;
  overflow:hidden;
}
.db-hinge{ /* hinge strip on the right edge, as in the photo */
  position:absolute;right:-9px;top:8%;bottom:8%;width:9px;
  background:
    repeating-linear-gradient(180deg,#303138 0 7px,#212228 7px 9px);
  border-radius:2px;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.06),1px 0 3px rgba(0,0,0,.6);
}

/* ---- the form, shaped as a LANDSCAPE trading card ----
   A card is 2.5 x 3.5, so on its side the ratio is 3.5/2.5 = 1.4 */
/* ---- the form, shaped as a LANDSCAPE trading card ----
   A card is 2.5 x 3.5, so on its side the ratio is 3.5/2.5 = 1.4. The card is
   sized to a compact fixed WIDTH (a fraction of the door) and derives its
   height from the aspect ratio, so the whole form is genuinely card-sized and
   small enough to rise fully above the slot when sleeved. */
.db-card{
  width:100%;
  aspect-ratio:3.5 / 2.5;         /* landscape card */
  max-height:100%;
  background:linear-gradient(158deg,#1F2937 0%,#18202C 55%,#141A24 100%);
  border:1px solid var(--slate-dp);
  border-radius:9px;
  padding:14px 16px;
  display:flex;flex-direction:column;
  box-shadow:0 10px 26px rgba(0,0,0,.5),inset 0 1px 0 rgba(131,172,203,.12);
  transform-origin:center center;
  will-change:transform;
}
.db-card-head{margin-bottom:8px;flex:0 0 auto}
.db-card-head .kicker{font-size:.56rem;letter-spacing:.2em;margin-bottom:1px;display:block}
.db-card-head h2{font-size:1rem;line-height:1.15;margin:0}
/* The form fills the remaining card height, so the button sits at the bottom
   edge of the card with no dead space beneath it. */
.db-card form{flex:1;min-height:0;display:flex;flex-direction:column}
.db-fields{
  flex:1;min-height:0;
  display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;
  grid-template-rows:auto 1fr;align-content:stretch;
}
.db-fields label{
  display:flex;flex-direction:column;gap:2px;
  font-size:.56rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  min-width:0;
}
.db-fields .db-full{grid-column:1 / -1;flex:1;min-height:0}
.db-fields input,
.db-fields textarea{
  background:#0E1219;border:1px solid #2A3644;border-radius:5px;
  color:var(--text);font-family:var(--font-body);font-size:.72rem;
  padding:5px 7px;width:100%;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.db-fields textarea{resize:none;flex:1;min-height:0}
.db-fields input:focus,
.db-fields textarea:focus{
  outline:none;border-color:var(--slate);box-shadow:0 0 0 2px rgba(78,114,146,.25);
}
.db-card .btn{
  margin-top:8px;flex:0 0 auto;align-self:flex-start;
  font-size:.7rem;padding:7px 16px;
}

/* ---- confirmation state on the door ---- */
.db-done{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:22px;text-align:center;
  opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility .45s ease;
}
.db-done.show{opacity:1;visibility:visible}
.db-done-lead{
  color:var(--text);font-family:var(--font-display);font-weight:700;
  font-size:1.15rem;line-height:1.3;margin:0;
}
.db-done-sub{
  color:var(--muted);font-size:.95rem;line-height:1.5;max-width:28ch;margin:0;
}
.db-check .dbc-ring{stroke:var(--ok);stroke-dasharray:145;stroke-dashoffset:145}
.db-check .dbc-tick{stroke:var(--ok);stroke-dasharray:44;stroke-dashoffset:44}
.db-done.show .dbc-ring{animation:dbcRing .5s cubic-bezier(.5,0,.3,1) forwards}
.db-done.show .dbc-tick{animation:dbcTick .34s cubic-bezier(.5,0,.3,1) .42s forwards}
@keyframes dbcRing{to{stroke-dashoffset:0}}
@keyframes dbcTick{to{stroke-dashoffset:0}}

/* Flyer layer: holds the card + sleeve while they travel. JS pins its bottom
   edge to the slot mouth during the drop, so the sleeved card is clipped away
   exactly at the opening (swallowed by the slot, not faded out) - item 8. */
.db-flyer{
  position:absolute;left:0;top:0;right:0;
  pointer-events:none;
  z-index:5;
}
.db-flyer.is-clipping{overflow:hidden}

/* ---- the toploader sleeve ----
   Nested inside the travelling card clone and pinned to its box (inset:0), so
   it always hugs the card exactly and shares its transform and clip. */
.toploader{
  position:absolute;inset:0;z-index:5;
  pointer-events:none;
  opacity:0;
  transform-origin:center center;
  will-change:transform,opacity;
}
.tl-shell{
  position:absolute;inset:-3px;
  border:2px solid rgba(190,214,235,.55);
  border-radius:11px;
  background:linear-gradient(125deg,rgba(226,240,255,.16),rgba(160,196,228,.07) 45%,rgba(226,240,255,.14));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 14px 34px rgba(0,0,0,.5),
    inset 0 0 22px rgba(190,220,255,.14);
}
.tl-shell::after{ /* rigid plastic sheen */
  content:"";position:absolute;inset:0;border-radius:9px;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.24) 46%,transparent 58%);
}
.tl-mouth{ /* the open end of the sleeve */
  position:absolute;left:-3px;right:-3px;top:-3px;height:10px;
  border:2px solid rgba(200,224,245,.75);
  border-bottom:0;border-radius:11px 11px 0 0;
  background:linear-gradient(180deg,rgba(226,240,255,.35),transparent);
}

/* ---- animation phases (driven by JS) ----
   From phase 2 on, the sleeve is nested in the card clone, so ONE transform on
   the clone moves both as a rigid unit. Only the clone needs travel/drop
   transitions; the sleeve only animates its phase-1 fly-in. */
.db-card.is-sleeved{transition:transform 1.3s cubic-bezier(.4,0,.25,1)}
.db-card.is-dropping{transition:transform 1.05s cubic-bezier(.4,0,.75,.4)}
.toploader.is-flying{transition:transform .9s cubic-bezier(.3,.8,.35,1),opacity .4s ease}

@media (max-width:640px){
  .dropbox-stage{max-width:100%;padding-top:200px}
  /* Keep the true landscape card ratio; shrink the type to fit instead. */
  .db-card{width:100%;height:auto;padding:10px 11px;border-radius:7px}
  .db-card-head{margin-bottom:5px}
  .db-card-head .kicker{font-size:.46rem;letter-spacing:.16em}
  .db-card-head h2{font-size:.78rem}
  .db-fields{gap:4px 7px}
  .db-fields label{font-size:.46rem}
  .db-fields input,
  .db-fields textarea{font-size:.6rem;padding:3px 5px;border-radius:4px}
  .db-card .btn{font-size:.58rem;padding:5px 11px;margin-top:5px}
  .db-done-lead{font-size:1rem}
  .db-done-sub{font-size:.82rem}
  .db-check svg{width:38px;height:38px}
}

.thanks{overflow:hidden}
.thanks-hero{min-height:62vh;display:grid;place-items:center;text-align:center;position:relative;z-index:1;align-content:center}
.thanks-hero .sub{color:var(--muted);max-width:48ch;margin:18px auto 0}
.thanks-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:36px}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);z-index:300;
  background:var(--surface2);border:1px solid var(--slate-dp);border-radius:12px;color:var(--text);
  padding:14px 22px;font-size:.9rem;opacity:0;transition:opacity .35s ease,transform .35s ease;
  box-shadow:0 16px 44px rgba(0,0,0,.55);max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast a{color:var(--slate-brt);font-weight:600}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);background:var(--bg2);padding:60px 0 40px;margin-top:40px}
.footer-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.footer-brand img{height:56px;mix-blend-mode:screen}
.footer-brand p{color:var(--muted);font-size:.85rem;max-width:32ch;margin-top:14px}
.footer-links{display:flex;gap:56px}
.footer-links h4{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.footer-links a{display:block;color:#BFC5CB;font-size:.88rem;padding:4px 0}
.footer-links a:hover{color:var(--slate-brt)}
.footer-base{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:.78rem}

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .machines-grid,.paths-grid,.why-grid{grid-template-columns:1fr}
  .machines-grid{gap:90px}
  .stats-grid{grid-template-columns:1fr;gap:14px}
  .how-steps,.how-steps.how-steps-4{grid-template-columns:1fr}
  .proof-stats{grid-template-columns:1fr}
  .pstat{border-right:0;border-bottom:1px solid var(--line);padding:30px 16px}
  .pstat:last-child{border-bottom:0}
  .about-facts{grid-template-columns:1fr}
  .form-panel{padding:38px 24px}
  .form-grid{grid-template-columns:1fr}
  #map{height:420px}
  /* Door stays prominent but fits narrow screens */
  .vault-wrap{padding:44px 26px}
  .vault-door{height:260px}
  .vault-cards .vcard{width:104px;height:146px}
  /* Deck: smaller card, still pinned */
  .deck{width:min(260px,68vw)}
  .deck-card{padding:28px 24px}
  .deck-card h3{font-size:1.35rem}
}
@media (max-width:840px){
  .nav-links{
    position:fixed;top:var(--nav-h);right:0;left:0;flex-direction:column;gap:0;
    background:rgba(11,11,12,.97);border-bottom:1px solid var(--line);
    padding:10px 24px 22px;transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .3s ease,transform .3s ease;
  }
  .nav-links a{padding:13px 0;font-size:1rem}
  body.nav-open .nav-links{opacity:1;transform:none;pointer-events:auto}
  .nav-burger{display:flex}
  body.nav-open .nav-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.nav-open .nav-burger span:nth-child(2){opacity:0}
  body.nav-open .nav-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .nav-brand img{height:50px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
  .hero .kicker,.hero h1,.hero .sub,.hero-scrollcue{opacity:1;animation:none}
  .hero-logo-bg{opacity:.2;animation:none}
  .tower-photo{filter:drop-shadow(0 30px 50px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(106,200,255,.45))}
  /* Deck falls back to a readable stacked column (JS adds .no-pin) */
  .deck-card{opacity:1 !important;transform:none !important;position:relative !important;inset:auto !important;filter:none !important}
  .deck::before,.deck::after{display:none}
  /* Cards in the door stay visible rather than depending on the reveal */
  .vault-cards .vcard{opacity:1}
  .chase-card{opacity:1;transform:none}
}