/* ═══════════════════════════════════════════════
   METRONOME — Global Design System
   Warm dark brown · Barlow Condensed · Sticker UI
   ═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,700;0,900;1,900&family=Barlow:wght@400;500;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
* { scroll-behavior: smooth; }

:root{
  --bg:#1E1D1B; --bg2:#252320; --surface:#2A2927; --surface2:#302E2C;
  --border:rgba(255,255,255,0.07); --border2:rgba(255,255,255,0.13);
  --text:#EDE3CC; --muted:#7A6A55; --faint:#4A3C2C;
  --lime:#C8FF00; --orange:#D43C0C; --purple:#3D28BB; --cream:#EDE3CC;
  --gold:#F5C842; --cyan:#42F5E8;
  --font-hd:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --font-bd:'Barlow','Trebuchet MS',sans-serif;
  --px:20px; --nav-h:56px; --r:4px; --max-w:1280px;
}
@media(min-width:600px){:root{--px:32px;}}
@media(min-width:900px){:root{--px:48px;}}

body{background:var(--bg);color:var(--text);font-family:var(--font-bd);font-size:16px;line-height:1.6;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;font-family:var(--font-hd);border:none;background:none;}
img{max-width:100%;display:block;}
::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-track{background:var(--bg);}::-webkit-scrollbar-thumb{background:var(--surface2);}

/* ── TYPOGRAPHY ── */
.hd{font-family:var(--font-hd);font-weight:900;text-transform:uppercase;line-height:0.92;letter-spacing:-0.01em;}
.label{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;font-family:var(--font-hd);font-weight:700;}
.eyebrow{font-family:var(--font-hd);font-weight:700;font-size:0.62rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--lime);margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.eyebrow::before{content:'';width:18px;height:1px;background:var(--lime);flex-shrink:0;}

/* ── NAV ── */
.site-nav{position:sticky;top:0;z-index:200;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 var(--px);height:var(--nav-h);gap:16px;}
.nav-logo-link{display:flex;flex-direction:column;gap:2px;text-decoration:none;margin-right:auto;}
.nav-logo-svg{height:18px;width:auto;display:block;}
.nav-logo-sub{font-size:0.4rem;letter-spacing:0.28em;color:var(--faint);text-transform:uppercase;font-family:var(--font-hd);}
.nav-links{display:none;gap:1.8rem;list-style:none;align-items:center;}
@media(min-width:800px){.nav-links{display:flex;}}
.nav-links a{font-family:var(--font-hd);font-size:0.65rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--muted);transition:color .15s;}
.nav-links a:hover,.nav-links a.active{color:var(--text);}
.nav-links a.active{border-bottom:1px solid var(--text);padding-bottom:1px;}
.btn-register{background:var(--lime);color:#060400;font-family:var(--font-hd);font-weight:900;font-size:0.68rem;letter-spacing:0.15em;padding:0.5rem 1.2rem;text-transform:uppercase;transition:opacity .15s;white-space:nowrap;text-decoration:none;display:inline-block;}
.btn-register:hover{opacity:.85;}
.nav-ham{display:flex;flex-direction:column;gap:5px;padding:4px;}
@media(min-width:800px){.nav-ham{display:none;}}
.nav-ham span{width:22px;height:2px;background:var(--text);display:block;border-radius:1px;transition:.3s;}
.nav-ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-ham.open span:nth-child(2){opacity:0;}
.nav-ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mob-menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:var(--bg);z-index:199;flex-direction:column;padding:20px var(--px);border-top:1px solid var(--border);overflow-y:auto;}
.mob-menu.open{display:flex;}
.mob-menu a{font-family:var(--font-hd);font-size:clamp(26px,7vw,38px);font-weight:900;text-transform:uppercase;color:var(--text);padding:13px 0;border-bottom:1px solid var(--border);display:block;}
.mob-menu a:last-child{color:var(--lime);border:none;}

/* ── BUTTONS ── */
.btn-primary{background:var(--lime);color:#060400;font-family:var(--font-hd);font-weight:900;font-size:0.75rem;letter-spacing:0.16em;padding:0.85rem 1.75rem;text-transform:uppercase;transition:opacity .15s;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;}
.btn-primary:hover{opacity:.87;}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border);font-size:0.68rem;letter-spacing:0.12em;padding:0.85rem 1.4rem;transition:color .15s,border-color .15s;font-family:var(--font-hd);font-weight:700;text-transform:uppercase;cursor:pointer;}
.btn-ghost:hover{color:var(--text);border-color:var(--border2);}
.btn-group{display:flex;flex-wrap:wrap;gap:.75rem;}

/* ── SECTIONS ── */
.section{padding:56px var(--px);}
@media(min-width:768px){.section{padding:80px var(--px);}}
.section-inner{max-width:var(--max-w);margin:0 auto;}

/* ── PHOTO HERO ── */
.photo-hero{position:relative;min-height:50vh;display:flex;align-items:flex-end;overflow:hidden;}
.photo-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(35%) brightness(0.45) contrast(1.1) sepia(0.15);}
.photo-hero-content{z-index:3;position:relative;z-index:2;max-width:var(--max-w);margin:0 auto;padding:calc(var(--nav-h)+40px) var(--px) 60px;width:100%;}
@media(min-width:768px){.photo-hero-content{padding:calc(var(--nav-h)+60px) var(--px) 80px;}}

/* ── STATS BAR ── */
.stats-bar{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
@media(min-width:600px){.stats-bar{grid-template-columns:repeat(4,1fr);}}
.stat{padding:1.25rem 1.5rem;border-right:1px solid var(--border);border-bottom:1px solid var(--border);}
@media(min-width:600px){.stat{border-bottom:none;}}
.stat:last-child{border-right:none;}
.stat-n{font-family:var(--font-hd);font-weight:900;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;display:block;color:var(--text);}
.stat-n.glow{color:var(--lime);text-shadow:0 0 20px rgba(200,255,0,0.4);}
.stat-l{font-size:0.58rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-top:5px;display:block;}

/* ── GRIDS ── */
.grid-2{display:grid;grid-template-columns:1fr;gap:40px;}
@media(min-width:768px){.grid-2{grid-template-columns:1fr 1fr;gap:60px;}}
.grid-3{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);border:1px solid var(--border);}
@media(min-width:600px){.grid-3{grid-template-columns:1fr 1fr;}}
@media(min-width:960px){.grid-3{grid-template-columns:1fr 1fr 1fr;}}
.grid-4{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);}
@media(min-width:960px){.grid-4{grid-template-columns:repeat(4,1fr);}}

/* ── TICKER ── */
.ticker-wrap{overflow:hidden;background:var(--lime);padding:9px 0;}
.ticker{display:flex;gap:0;white-space:nowrap;animation:ticker 30s linear infinite;font-family:var(--font-hd);font-size:13px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:#060400;align-items:center;width:max-content;}
.ticker-item{padding:0 28px;display:flex;align-items:center;gap:16px;border-right:2px solid rgba(0,0,0,.1);flex-shrink:0;}
.ticker-dot{width:5px;height:5px;border-radius:50%;background:#060400;flex-shrink:0;}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── STICKER SYSTEM ── */
/* White die-cut border = outline trick */
.sk{position:absolute;font-family:var(--font-hd);font-weight:900;text-transform:uppercase;line-height:1.15;letter-spacing:.05em;outline:3px solid white;outline-offset:1px;z-index:10;cursor:default;transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.sk:hover{transform:scale(1.06) rotate(0deg)!important;}
/* Colors */
.sk-orange{background:var(--orange);color:#fff;padding:.65rem .85rem;border-radius:6px;font-size:.68rem;}
.sk-neon{background:var(--lime);color:#060400;padding:.5rem .95rem;border-radius:6px;font-size:.68rem;}
.sk-purple{background:var(--purple);color:#fff;padding:.55rem .9rem;border-radius:6px;font-size:.65rem;}
.sk-dark{background:#1A1714;color:var(--text);padding:.65rem .85rem;border-radius:6px;font-size:.68rem;}
.sk-cream{background:var(--cream);color:#1A1714;padding:.55rem .9rem;border-radius:6px;font-size:.65rem;}
/* Shapes */
.sk-pill{border-radius:100px!important;padding:.44rem 1.1rem!important;font-size:.62rem!important;display:flex;align-items:center;gap:6px;}
.sk-circle{border-radius:50%!important;display:flex!important;align-items:center;justify-content:center;text-align:center;line-height:1.2;}
/* Waves inside sticker */
.sk-waves{display:flex;flex-direction:column;gap:3px;margin:5px 0;padding:4px 0;border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15);}
.sk-waves span{display:block;height:2px;background:rgba(255,255,255,.28);border-radius:2px;width:100%;}
/* Arrow accent */
.sk-arrow{position:absolute;font-family:var(--font-hd);font-weight:900;color:var(--orange);z-index:10;-webkit-text-stroke:3px white;paint-order:stroke fill;}
/* Triangle (Gains Loading) */
.sk-tri-wrap{position:absolute;z-index:10;}
.sk-tri{width:0;height:0;border-left:44px solid transparent;border-right:44px solid transparent;border-bottom:76px solid var(--orange);position:relative;}
.sk-tri::before{content:'';position:absolute;width:0;height:0;border-left:48px solid transparent;border-right:48px solid transparent;border-bottom:82px solid white;top:-5px;left:-48px;z-index:-1;}
.sk-tri-text{position:absolute;bottom:-68px;left:-44px;width:88px;text-align:center;color:#fff;font-family:var(--font-hd);font-weight:900;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;padding-top:24px;}
/* Concentric rings */
.rings{position:absolute;pointer-events:none;}
.ring{border:1.5px solid rgba(200,255,0,.15);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
/* Float animations */
.float-1{animation:f1 6s ease-in-out infinite;}
.float-2{animation:f2 7s ease-in-out infinite;}
.float-3{animation:f3 5.5s ease-in-out infinite;}
.float-4{animation:f4 8s ease-in-out infinite;}
.float-5{animation:f5 6.5s ease-in-out infinite;}
.float-6{animation:f6 7.5s ease-in-out infinite;}
.float-7{animation:f7 5s ease-in-out infinite;}
@keyframes f1{0%,100%{transform:rotate(-7deg) translateY(0);}50%{transform:rotate(-7deg) translateY(-8px);}}
@keyframes f2{0%,100%{transform:rotate(5deg) translateY(0);}50%{transform:rotate(5deg) translateY(-6px);}}
@keyframes f3{0%,100%{transform:rotate(2deg) translateY(0);}50%{transform:rotate(2deg) translateY(-10px);}}
@keyframes f4{0%,100%{transform:rotate(-3deg) translateY(0);}50%{transform:rotate(-3deg) translateY(-7px);}}
@keyframes f5{0%,100%{transform:rotate(-5deg) translateY(0);}50%{transform:rotate(-5deg) translateY(-9px);}}
@keyframes f6{0%,100%{transform:rotate(-9deg) translateY(0);}50%{transform:rotate(-9deg) translateY(-5px);}}
@keyframes f7{0%,100%{transform:rotate(12deg) translateY(0);}50%{transform:rotate(12deg) translateY(-7px);}}

/* ── ACHIEVEMENT BADGES — graphic sticker style ── */
/* 2-color only: white + one accent color. SVG drawings, minimal text */
.ach-sticker{
  position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:default;transition:transform .25s cubic-bezier(.34,1.56,.64,1);
  outline:3px solid white;outline-offset:2px;
}
.ach-sticker:hover{transform:scale(1.08) rotate(2deg);}
.ach-sticker:nth-child(odd):hover{transform:scale(1.08) rotate(-2deg);}

/* ── FEATURE/RACE CARDS ── */
.card-cell{background:var(--surface);padding:28px 24px;transition:background .15s;position:relative;overflow:hidden;}
.card-cell:hover{background:var(--surface2);}
.card-cell::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:transparent;transition:background .2s;}
.card-cell:hover::before{background:var(--lime);}

/* ── LEADERBOARD ── */
.lb-shell{border:1px solid var(--border);overflow:hidden;}
.lb-head{display:grid;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--border);font-family:var(--font-hd);font-size:0.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.lb-row{display:grid;padding:13px 16px;border-bottom:1px solid var(--border);align-items:center;cursor:pointer;transition:background .12s;}
.lb-row:hover{background:var(--surface);}
.lb-row:last-child{border-bottom:none;}
.lb-rank{font-family:var(--font-hd);font-weight:900;font-size:22px;color:var(--faint);}
.lb-rank.g1{color:var(--gold);}
.lb-rank.g2{color:#b8c4cc;}
.lb-rank.g3{color:#cd7f32;}
.lb-ath{display:flex;align-items:center;gap:10px;}
.lb-name{font-family:var(--font-hd);font-weight:700;font-size:15px;}
.lb-sub{font-size:11px;color:var(--muted);margin-top:1px;}
.lb-time{font-family:var(--font-hd);font-weight:900;font-size:20px;color:var(--lime);}
.lb-badges{display:flex;gap:3px;align-items:center;flex-wrap:wrap;}
.lb-col-cols-5{grid-template-columns:48px 1fr 80px 120px 36px;}
.lb-col-cols-6{grid-template-columns:48px 1fr 80px 110px 160px 36px;}

/* ── AVATAR ── */
.avatar{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--border2);background:var(--surface2);display:flex;align-items:center;justify-content:center;font-family:var(--font-hd);font-weight:900;font-size:12px;color:var(--muted);flex-shrink:0;}
@media(min-width:640px){.avatar{width:40px;height:40px;font-size:13px;}}

/* ── MODAL ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:800;align-items:flex-end;justify-content:center;backdrop-filter:blur(6px);}
@media(min-width:640px){.modal-overlay{align-items:center;padding:20px;}}
.modal-overlay.open{display:flex;}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:12px 12px 0 0;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;position:relative;}
@media(min-width:640px){.modal{border-radius:6px;}}
.modal-x{position:absolute;top:14px;right:14px;background:var(--surface);border:1px solid var(--border);color:var(--muted);width:30px;height:30px;border-radius:50%;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;}
.modal-head{padding:24px 20px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;}
@media(min-width:640px){.modal-head{padding:28px 28px 20px;}}
.modal-body{padding:20px;}
@media(min-width:640px){.modal-body{padding:24px 28px;}}
.modal-av{width:56px;height:56px;border-radius:50%;border:2px solid var(--lime);background:var(--surface2);display:flex;align-items:center;justify-content:center;font-family:var(--font-hd);font-weight:900;font-size:20px;color:var(--lime);flex-shrink:0;}
.modal-title{font-family:var(--font-hd);font-weight:900;font-size:clamp(18px,3vw,24px);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
.m-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px;}
.m-stat{background:var(--surface);border:1px solid var(--border);padding:13px 14px;}
.m-lbl{font-family:var(--font-hd);font-size:0.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
.m-val{font-family:var(--font-hd);font-weight:900;font-size:clamp(20px,3.5vw,28px);color:var(--lime);line-height:1;}
.m-sec{font-family:var(--font-hd);font-size:0.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;margin-top:16px;}
.m-race-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:16px;}
.m-race{background:var(--surface);padding:10px 12px;}
.m-race-lbl{font-family:var(--font-hd);font-size:0.56rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;}
.m-race-time{font-family:var(--font-hd);font-weight:900;font-size:18px;color:var(--lime);}
.m-race-time.off{color:var(--orange);}
.m-race-time.empty{color:var(--muted);font-size:13px;}

/* Form */
.form-row{margin-bottom:11px;}
.form-lbl{display:block;font-family:var(--font-hd);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.form-input,.form-sel{width:100%;background:var(--surface);border:1px solid var(--border2);color:var(--text);font-family:var(--font-hd);font-size:14px;padding:10px 12px;outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none;}
.form-input:focus,.form-sel:focus{border-color:var(--lime);}
.form-sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237A6A55'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer;}
.form-r2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:11px;}
.form-r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:11px;}
@media(max-width:380px){.form-r2{grid-template-columns:1fr;}.form-r3{grid-template-columns:1fr 1fr;}}
.btn-save{width:100%;background:var(--lime);color:#060400;border:none;font-family:var(--font-hd);font-weight:900;font-size:16px;letter-spacing:.12em;text-transform:uppercase;padding:14px;cursor:pointer;margin-top:14px;transition:opacity .15s;}
.btn-save:hover{opacity:.87;}

/* ── TOAST ── */
.toast{position:fixed;bottom:16px;right:16px;background:var(--surface);border:1px solid var(--lime);color:var(--lime);font-family:var(--font-hd);font-size:0.8rem;padding:10px 18px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:9999;max-width:calc(100vw - 32px);}
.toast.show{opacity:1;}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--delay,0s);}
.reveal.visible{opacity:1;transform:none;}

/* ── FOOTER ── */
footer{background:var(--bg);border-top:1px solid var(--border);padding:0 var(--px);display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:var(--nav-h);gap:16px;flex-wrap:nowrap;}
@media(min-width:700px){footer{flex-direction:row;align-items:center;justify-content:space-between;gap:0;}}
.foot-logo-svg{height:16px;width:auto;display:block;}
.foot-links{display:flex;gap:1.2rem;flex-wrap:wrap;}
.foot-links a{font-family:var(--font-hd);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);transition:color .15s;}
.foot-links a:hover{color:var(--text);}
.foot-copy{font-family:var(--font-hd);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);}



/* ═══════════════════════════════════════════
   SPONSORS RIBBON — global, appended to style.css
   ═══════════════════════════════════════════ */
.sponsors-ribbon {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 0;
  overflow: hidden;
  position: relative;
}

.sp-label {
  font-family: var(--font-hd);
  font-size: 0.52rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
  padding: 14px 0 0;
}

/* The scrolling track wrapper — clips overflow and fades edges */
.sp-track-wrap {
  overflow: hidden;
  width: 100%;
  padding: 18px 0 20px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
}

/* The actual scrolling strip */
.sp-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: sp-scroll 30s linear infinite;
  will-change: transform;
}

/* Pause on hover */
.sp-track:hover {
  animation-play-state: paused;
}

@keyframes sp-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Individual sponsor slot */
.sp-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 44px;
  height: 60px;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.sp-item:hover { opacity: 0.85; }

/* SVG logo styles — white/cream, uniform height */
.sp-logo {
  height: 28px;
  width: auto;
  max-width: 120px;
  display: block;
  color: rgba(237, 227, 204, 0.45);  /* cream, muted */
  transition: color 0.2s;
  flex-shrink: 0;
}
.sp-logo-wide { max-width: 160px; }

.sp-item:hover .sp-logo {
  color: rgba(237, 227, 204, 0.85); /* brighter on hover */
}

/* Separator dots between logos */
.sp-sep {
  font-family: var(--font-hd);
  font-weight: 900;
  font-size: 0.9rem;
  color: var(--faint);
  flex-shrink: 0;
  padding: 0 4px;
  user-select: none;
}

/* Stickers always behind hero text content */
.photo-hero .sk, .photo-hero .sk-tri-wrap, .photo-hero .sk-arrow, .photo-hero .sk-circle { z-index: 1 !important; }

/* ══════════════════ WAITLIST MODAL (global, injected by layout.js) ══════════════════ */
.wl-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(6,5,4,0.72);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.wl-modal-overlay.open { display: flex; }
.wl-modal-box {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #1E1D1B;
  border: 1px solid var(--border);
  padding: 2.75rem 2rem 2.25rem;
  text-align: center;
  max-height: 90vh;
  overflow-y: auto;
  animation: wlModalIn .22s ease both;
}
@keyframes wlModalIn { from { opacity:0; transform:translateY(10px) scale(.98);} to { opacity:1; transform:translateY(0) scale(1);} }
.wl-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.wl-modal-close:hover { color: var(--text); border-color: var(--muted); }
.wl-modal-box .hd { font-family: var(--font-hd); font-weight: 900; font-size: clamp(1.6rem,4vw,2.1rem); line-height: 1.05; text-transform: uppercase; color: var(--text); margin-bottom: .9rem; }
.wl-modal-sub { font-size: .88rem; color: var(--muted); line-height: 1.7; max-width: 380px; margin: 0 auto; }

/* ── WAITLIST FORM (shared: modal + inline index.html CTA) ── */
.wl-form { display:flex; flex-direction:column; gap:10px; width:100%; max-width:440px; margin:1.5rem auto 0; }
.wl-row { display:flex; gap:10px; flex-wrap:wrap; }
.wl-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text);
  font-family: var(--font-bd);
  font-size: .9rem;
  padding: .85rem 1rem;
  width: 100%;
  outline: none;
  transition: border-color .2s;
}
.wl-input:focus { border-color: var(--lime); }
.wl-input::placeholder { color: var(--muted); }
.wl-btn {
  background: var(--lime);
  color: #060400;
  font-family: var(--font-hd);
  font-weight: 900;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .85rem 1.5rem;
  border: none;
  cursor: pointer;
  width: 100%;
  transition: opacity .15s;
}
.wl-btn:hover { opacity: .88; }
.wl-btn:disabled { opacity: .5; cursor: not-allowed; }
.wl-note { font-size: .72rem; color: var(--faint); margin-top: 2px; }
.wl-thanks {
  display: none;
  font-family: var(--font-hd);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lime);
  margin-top: 1.5rem;
  text-align: center;
}
.wl-thanks span { display:block; font-family:var(--font-bd); font-weight:400; font-size:.82rem; letter-spacing:0; text-transform:none; color:var(--muted); margin-top:4px; }