/* ============================================================
   DropX — marketing + account site (acid-lime / reticle)
   Fonts loaded via Google Fonts in index.html.
   Account IDs + state classes preserved for site.js.
   ============================================================ */

:root{
  --bg:#0b0c0e;
  --bg-2:#0f1114;
  --surface:#14161b;
  --surface-2:#181b21;
  --surface-3:#1e222a;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --ink:#f5f6f7;
  --muted:#9a9fa8;
  --muted-2:#848a94;
  --accent:#d4fb5c;          /* acid lime */
  --accent-dim:#b6e23f;
  --accent-ink:#0b0c0e;
  --accent-glow:rgba(212,251,92,.35);
  --violet:#8b7bff;
  --danger:#ff5a52;
  --warn:#ffcf6b;
  --ok:#57d98a;
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:26px;
  --maxw:1200px;
  --pad:clamp(20px,5vw,40px);
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --font-fancy:'Fraunces','Bricolage Grotesque',Georgia,serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 24px 60px -28px rgba(0,0,0,.7);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);background:var(--bg);color:var(--ink);
  line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--accent);}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input{font:inherit;}
img{max-width:100%;display:block;}
ul{list-style:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}
.skip-link{position:fixed;top:10px;left:-9999px;z-index:1000;background:var(--accent);color:#0a0a0b;font-weight:700;font-size:14px;padding:11px 18px;border-radius:10px;text-decoration:none;box-shadow:0 8px 26px rgba(0,0,0,.5);}
.skip-link:focus{left:14px;outline:none;}

body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(720px 480px at 78% -8%,rgba(212,251,92,.10),transparent 60%),
    radial-gradient(680px 520px at 10% 4%,rgba(139,123,255,.08),transparent 62%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,header,footer{position:relative;z-index:1;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
/* anchor targets clear the sticky header (no more landing hidden under the nav) */
#top,#features,#pricing,#faq,#wins,#account-access,#platform-preview{scroll-margin-top:88px;}
/* Vertical padding as top/bottom longhand (matching .hero) — NOT the
   `padding: … 0` shorthand, which would clobber the horizontal gutter that
   .container sets. With the shorthand, any .section.container /
   .section-tight.container element (#faq, #features, #pricing …) lost its side
   padding, so bare content (FAQ text, section headings) ran flush to the screen
   edge on mobile. Longhand leaves the inline axis to .container. */
.section{padding-top:clamp(64px,10vw,120px);padding-bottom:clamp(64px,10vw,120px);}
.section-tight{padding-top:clamp(44px,7vw,80px);padding-bottom:clamp(44px,7vw,80px);}
.eyebrow{
  font-family:var(--font-mono);font-size:13.5px;font-weight:600;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--accent-dim);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent-dim);opacity:.6;}
.section-head{max-width:640px;margin-bottom:clamp(36px,5vw,56px);}
.section-head h2{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.03;
  font-size:clamp(30px,4.6vw,52px);margin:16px 0 14px;
}
.section-head p{color:var(--muted);font-size:clamp(16px,1.4vw,18px);max-width:540px;}

/* Buttons */
.primary-button,.secondary-button,.ghost-button{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;letter-spacing:.1px;border-radius:12px;padding:13px 22px;font-size:15px;
  transition:transform .18s var(--ease),background .18s var(--ease),
             border-color .18s var(--ease),box-shadow .25s var(--ease),color .18s var(--ease);
  white-space:nowrap;user-select:none;
}
.primary-button{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px -10px var(--accent-glow);}
.primary-button:hover{background:#e2ff77;color:var(--accent-ink);transform:translateY(-2px);box-shadow:0 16px 40px -12px var(--accent-glow);}
.secondary-button{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2);}
.secondary-button:hover{background:var(--surface-3);color:var(--ink);transform:translateY(-2px);border-color:rgba(255,255,255,.22);}
.ghost-button{background:transparent;color:var(--muted);border:1px solid var(--line);}
.ghost-button:hover{background:var(--surface);color:var(--ink);border-color:var(--line-2);}
.primary-button:active,.secondary-button:active,.ghost-button:active{transform:translateY(0) scale(.985);}
.btn-arrow{transition:transform .2s var(--ease);}
.primary-button:hover .btn-arrow{transform:translate(3px,-3px);}
.btn-lg{padding:16px 28px;font-size:16px;border-radius:14px;}
.btn-block{width:100%;}

.button-press{transform:translateY(1px) scale(.97)!important;}
.button-feedback{box-shadow:0 0 0 3px var(--accent-glow)!important;}
.button-success{background:var(--ok)!important;color:#04210f!important;border-color:transparent!important;}

/* Header / nav */
#siteTopbar{
  position:sticky;top:0;z-index:60;
  /* Lighter blur on the always-sticky bar: it re-samples the full-viewport fx canvas
     every scroll frame, so 8px + a more opaque base keeps the frosted look at ~half
     the per-frame paint cost (matters most on mobile / low-end). */
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  background:rgba(11,12,14,.82);border-bottom:1px solid transparent;
  transition:transform .4s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
#siteTopbar.scrolled{border-color:var(--line);background:rgba(11,12,14,.86);}
.nav-inner{display:flex;align-items:center;gap:20px;height:66px;}
.nav-links{display:flex;align-items:center;gap:6px;margin-left:14px;}
.nav-links a{
  position:relative;color:var(--muted);font-size:14.5px;font-weight:500;padding:8px 12px;border-radius:9px;
  transition:color .16s,background .16s;
}
.nav-links a:hover{color:var(--ink);background:var(--surface);}
.nav-links a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform .15s cubic-bezier(.2,.7,.3,1);}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-links a.active{color:var(--ink);}
.nav-links a.active::after{transform:scaleX(1);height:2.5px;box-shadow:0 0 9px var(--accent);}
.nav-spacer{flex:1;}
.nav-actions{display:flex;align-items:center;gap:10px;}
.nav-status{display:flex;align-items:center;gap:9px;}
.nav-sess{display:inline-flex;align-items:center;gap:8px;padding:5px 11px 5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);}
.nav-sess-k{font-family:var(--font-body);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);}
.nav-sess .mono{font-family:var(--font-body);font-size:12.5px;font-weight:600;letter-spacing:.1px;color:var(--ink);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);}
.brand:hover{color:var(--ink);}
.brand-mark-logo{position:relative;display:grid;place-items:center;flex-shrink:0;width:40px;height:54px;overflow:visible;transition:transform .2s var(--ease);}
.brand:hover .brand-mark-logo{transform:translateY(-1px) scale(1.06);}
.brand-word{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.02em;line-height:1;}
.brand-x{color:var(--accent);text-shadow:0 0 14px var(--accent-glow);animation:brandXShine 7s ease-in-out infinite;}
@keyframes brandXShine{0%,80%,100%{text-shadow:0 0 14px var(--accent-glow);}88%{text-shadow:0 0 22px var(--accent),0 0 6px rgba(255,255,255,.7);}}
.brand-mark{position:relative;width:34px;height:34px;flex-shrink:0;border-radius:10px;background:var(--surface-2);border:1px solid var(--line-2);display:grid;place-items:center;overflow:hidden;}

/* header account pill (site.js fills text + availability class) */
#headerAccountPill{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);font-size:12.5px;font-weight:600;
  letter-spacing:.1px;padding:6px 13px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--muted);text-transform:none;white-space:nowrap;
}
#headerSignOutButton{color:var(--danger);}
#headerSignOutButton:hover{color:#ff8078;background:var(--surface);}

#headerRevealBar{
  position:fixed;top:0;left:0;right:0;z-index:59;display:flex;justify-content:center;padding:8px;pointer-events:none;
}
#showHeaderButton{
  pointer-events:auto;display:inline-flex;align-items:center;gap:8px;
  background:rgba(20,22,27,.9);backdrop-filter:blur(10px);border:1px solid var(--line-2);
  border-radius:999px;padding:8px 16px;font-size:13px;color:var(--muted);
}
#showHeaderButton:hover{color:var(--ink);border-color:var(--accent);}
#hideHeaderButton{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:var(--muted-2);}
#hideHeaderButton:hover{background:var(--surface);color:var(--ink);}

/* Hero */
.hero{position:relative;padding-top:clamp(60px,9vw,110px);padding-bottom:clamp(40px,6vw,64px);overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:center;}
.hero-kicker{margin-bottom:26px;font-size:14px;letter-spacing:2.2px;}
.hero h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:.98;font-size:clamp(46px,8vw,88px);}
.hero h1 .drop-word{position:relative;color:var(--accent);white-space:nowrap;}
.hero h1 .drop-word::after{
  content:"";position:absolute;left:0;right:0;bottom:.08em;height:.09em;background:var(--accent);
  transform:scaleX(0);transform-origin:left;border-radius:3px;animation:sweep 1s var(--ease) .5s forwards;
}
.hero-sub{margin-top:24px;font-size:clamp(17px,1.7vw,20px);color:var(--muted);max-width:520px;line-height:1.5;}
.hero-cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.hero-note{margin-top:22px;font-family:var(--font-body);font-size:14.5px;font-weight:500;color:var(--muted);letter-spacing:.1px;display:flex;flex-wrap:wrap;gap:9px 18px;}
.hero-note span{display:inline-flex;align-items:center;gap:7px;}
.hero-note .tick{color:var(--accent);}

.hero-visual{position:relative;aspect-ratio:1/1;max-width:460px;margin-left:auto;width:100%;}

/* ---- animated bullseye target ---- */
.target{position:absolute;inset:0;z-index:1;pointer-events:none;animation:tgtFloat 10s ease-in-out infinite;}
.target-glow{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 40% 34%,rgba(212,251,92,.24),rgba(139,123,255,.10) 52%,transparent 72%);box-shadow:inset 0 0 90px rgba(212,251,92,.10),var(--shadow);animation:glowPulse 5.2s ease-in-out infinite;}
.radar{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(212,251,92,.30) 26deg,rgba(212,251,92,0) 52deg);-webkit-mask:radial-gradient(circle,transparent 9%,#000 13%,#000 73%,transparent 76%);mask:radial-gradient(circle,transparent 9%,#000 13%,#000 73%,transparent 76%);animation:spin 4.4s linear infinite;mix-blend-mode:screen;opacity:.9;}
.tgt{position:absolute;inset:0;width:100%;height:100%;}
.tgt .hud-ring{stroke:var(--accent);fill:none;transform-origin:200px 200px;}
.tgt .hud-ring{opacity:.4;animation:spin 24s linear infinite;}
.tgt .hud-ring-2{opacity:.6;animation:spin 16s linear infinite reverse;}
.tgt .band{stroke:var(--accent);transform-origin:200px 200px;animation:bandPulse 4.6s ease-in-out infinite;}
.tgt .band-4{fill:rgba(212,251,92,.035);stroke:rgba(212,251,92,.22);stroke-width:1;animation-delay:0s;}
.tgt .band-3{fill:rgba(212,251,92,.07);stroke:rgba(212,251,92,.32);stroke-width:1;animation-delay:.35s;}
.tgt .band-2{fill:rgba(212,251,92,.05);stroke:rgba(212,251,92,.3);stroke-width:1;animation-delay:.7s;}
.tgt .band-1{fill:rgba(212,251,92,.12);stroke:rgba(212,251,92,.55);stroke-width:1.2;animation-delay:1.05s;}
.tgt .bull{fill:var(--accent);transform-origin:200px 200px;animation:bullPulse 2.4s ease-in-out infinite;filter:drop-shadow(0 0 8px var(--accent));}
.tgt .cross line{stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;opacity:.5;transform-origin:200px 200px;animation:crossBreath 4.6s ease-in-out infinite;}
.tgt .corners path{stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;fill:none;opacity:.85;transform-origin:200px 200px;animation:cornerPulse 2.6s ease-in-out infinite,lockFlash 6s ease-in-out infinite;}
.orbit{position:absolute;inset:0;transform-origin:50% 50%;}
.orbit .blip{position:absolute;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent),0 0 3px #fff;}
.orbit .blip.v{background:var(--violet);box-shadow:0 0 12px var(--violet),0 0 3px #fff;}
.orbit.o1{animation:spin 7s linear infinite;}
.orbit.o1 .blip{top:2%;}
.orbit.o2{animation:spin 11s linear infinite reverse;}
.orbit.o2 .blip{top:16%;}
.orbit.o3{animation:spin 15s linear infinite;}
.orbit.o3 .blip{top:30%;}
@keyframes tgtFloat{0%,100%{transform:translate(0,0) scale(1);}25%{transform:translate(2.2%,-1.8%) scale(1.012);}55%{transform:translate(-2%,1.6%) scale(.994);}80%{transform:translate(1.4%,2%) scale(1.006);}}
@keyframes glowPulse{0%,100%{opacity:.72;transform:scale(1);}50%{opacity:1;transform:scale(1.05);}}
@keyframes bandPulse{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.035);opacity:1;}}
@keyframes bullPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.28);}}
@keyframes crossBreath{0%,100%{transform:scale(1);opacity:.5;}50%{transform:scale(1.05);opacity:.75;}}
.hero-chip{
  position:absolute;z-index:3;background:rgba(15,17,20,.86);backdrop-filter:blur(8px);
  border:1px solid var(--line-2);border-radius:14px;padding:12px 15px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:11px;font-size:13px;animation:float 6s ease-in-out infinite;
}
.hero-chip .pip{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 8px currentColor;animation:pipSeq 4.4s ease-in-out infinite;}
.hero-chip.c1 .pip{animation-delay:0s;}
.hero-chip.c2 .pip{animation-delay:1.45s;}
.hero-chip.c3 .pip{animation-delay:2.9s;}
/* sequence the three hero chips so they play the Watch→Alert→Checkout story in order */
@keyframes pipSeq{0%,66%,100%{transform:scale(1);filter:brightness(1);}9%{transform:scale(1.75);filter:brightness(1.55);}22%{transform:scale(1);filter:brightness(1);}}
.hero-chip>div{min-width:0;}
.hero-chip b{display:block;font-weight:600;font-size:13px;letter-spacing:-.01em;line-height:1.2;color:var(--ink);white-space:nowrap;}
.hero-chip small{display:block;margin-top:3px;color:var(--muted-2);font-family:var(--font-body);font-size:11.5px;font-weight:500;letter-spacing:.1px;line-height:1.25;white-space:nowrap;}
.hero-chip.c1{top:6%;left:-6%;animation-delay:0s;}
.hero-chip.c2{bottom:14%;right:-8%;animation-delay:1.4s;}
.hero-chip.c3{bottom:-4%;left:12%;animation-delay:2.6s;}

/* Stat strip */
.stat-strip{border-block:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.015),transparent);}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);}
.stat{background:var(--bg);padding:26px 24px;}
.stat .num{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em;line-height:1;}
.stat .num .u{color:var(--accent);}
.stat .lbl{margin-top:9px;color:var(--muted);font-size:13.5px;}

/* Features */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start;}
.card{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);overflow:hidden;
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(400px 200px at var(--mx,50%) var(--my,0%),rgba(212,251,92,.10),transparent 70%);
  transition:opacity .35s var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--surface-2);}
.card:hover::after{opacity:1;}
/* 3D pointer tilt (JS sets inline transform) */
.card,.price-card,.account-card,.support-card{transform-style:preserve-3d;will-change:transform;}
.price-card::after,.account-card::after,.support-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(400px 220px at var(--mx,50%) var(--my,0%),rgba(212,251,92,.10),transparent 70%);transition:opacity .35s var(--ease);}
.price-card:hover::after,.account-card:hover::after,.support-card:hover::after{opacity:1;}
.price-card,.account-card,.support-card{position:relative;}
.feature-span{grid-column:span 2;}
.f-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:20px;background:rgba(212,251,92,.12);border:1px solid rgba(212,251,92,.22);color:var(--accent);}
.f-icon svg{width:23px;height:23px;}
.card h3{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.01em;margin-bottom:9px;}
.card p{color:#c6cbd4;font-size:15.5px;line-height:1.58;}
.f-meta{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;}
.tagpill{font-family:var(--font-body);font-size:12.5px;font-weight:500;color:var(--muted);background:var(--surface-3);border:1px solid var(--line);border-radius:8px;padding:5px 11px;letter-spacing:.1px;}

.mini-app{margin-top:20px;border-radius:var(--radius-sm);border:1px solid var(--line);overflow:hidden;background:var(--bg-2);}
.mini-app .bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);}
.mini-app .bar .d{width:9px;height:9px;border-radius:50%;}
.mini-app .body{display:flex;height:120px;}
.mini-app .rail{width:38%;border-right:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:7px;}
.mini-app .rrow{height:11px;border-radius:4px;background:var(--surface-3);}
.mini-app .rrow.on{background:rgba(212,251,92,.4);}
.mini-app .pane{flex:1;padding:12px;display:flex;flex-direction:column;gap:8px;}
.mini-app .prow{height:14px;border-radius:5px;background:var(--surface-2);}
.mini-app .prow.w60{width:60%;}.mini-app .prow.w80{width:80%;}.mini-app .prow.w40{width:40%;}

/* Pricing + account */
.buy-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
.price-card,.account-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(26px,3vw,38px);}
.price-card{position:relative;border-color:var(--line-2);background:linear-gradient(180deg,var(--surface-2),var(--surface));overflow:hidden;}
/* Dashboard buy card (shown only when signed-in + unlicensed): reuses .price-card, adds the flowing
   RGB top strip + the $15 shine glint (both were index-inline only), full-width above the automations. */
.dash-buy-card{margin:0 0 22px;max-width:none;}
.dash-buy-card.price-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:3;background:linear-gradient(90deg,#ff5f6d,#ffa14a,#f7e14b,#4dff88,#3dd7ff,#8b7fff,#ff5fd0,#ff5f6d);background-size:300% auto;animation:rgbFlow 6s linear infinite;}
@keyframes rgbFlow{to{background-position:300% center;}}
.price-shine{background:linear-gradient(100deg,var(--accent) 36%,#fbffe6 50%,var(--accent) 64%);background-size:260% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:priceShine 3.8s ease-in-out infinite;}
@keyframes priceShine{0%{background-position:190% center;}100%{background-position:-90% center;}}
.price-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--violet));}
.price-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.plan-name{font-family:var(--font-mono);font-size:13.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--accent-dim);}
.price{display:flex;align-items:baseline;gap:10px;margin:20px 0 6px;}
.price .amt{font-family:var(--font-display);font-weight:800;font-size:clamp(44px,6vw,60px);letter-spacing:-.03em;line-height:1;}
.price .per{color:var(--muted);font-size:15px;}
.price-note{color:var(--muted);font-size:14px;margin-bottom:22px;}
.price-card .secondary-button.btn-block{margin-top:10px;}
.price-alt{color:var(--muted);font-size:12.5px;text-align:center;line-height:1.55;margin:12px 2px 2px;}
.price-alt a{color:var(--accent);text-decoration:none;font-weight:600;white-space:nowrap;}
.price-alt a:hover{text-decoration:underline;text-underline-offset:2px;}
.feat-list{display:flex;flex-direction:column;gap:12px;margin:22px 0 26px;}
.feat-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--ink);}
.feat-list .check{flex-shrink:0;width:22px;height:22px;border-radius:7px;background:rgba(212,251,92,.14);color:var(--accent);display:grid;place-items:center;margin-top:1px;}
.feat-list .check svg{width:13px;height:13px;}
/* trust-row was index-inline only; promote to shared so the dashboard buy card's Stripe/card/PC icons
   size correctly (otherwise the SVGs render at default huge size). Identical to the index rule. */
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 16px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
.trust-row span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);}
.trust-row svg{width:14px;height:14px;color:var(--accent);flex-shrink:0;}
.price-foot{margin-top:18px;text-align:center;color:var(--muted);font-size:13px;font-family:var(--font-body);letter-spacing:.2px;}

.account-card h3{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.01em;}
.account-card .sub{font-family:var(--font-fancy);font-optical-sizing:auto;font-style:italic;font-weight:500;color:var(--muted);font-size:16px;letter-spacing:.1px;margin:6px 0 22px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:7px;font-weight:500;}
.input-wrap{position:relative;display:flex;}
.field input{width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:11px;padding:12px 14px;color:var(--ink);transition:border-color .18s,box-shadow .18s;}
.field input::placeholder{color:var(--muted-2);}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
/* "Create your account" on the plan card scrolls here and pulses the email box so the user
   sees WHERE to create their account (inline, right-hand card) — not a separate signup page. */
@keyframes acctFieldFlash{0%,100%{box-shadow:0 0 0 0 rgba(212,251,92,0);}22%{box-shadow:0 0 0 4px rgba(212,251,92,.5);}}
.field input.acct-flash{border-color:var(--accent);animation:acctFieldFlash 1.15s var(--ease,ease) 2;}
@media (prefers-reduced-motion:reduce){.field input.acct-flash{animation:none;box-shadow:0 0 0 3px rgba(212,251,92,.45);}}
/* Dashboard "verify your email" banner — prominent CTA shown while the account is unverified.
   Amber = needs attention; the button stays the primary lime CTA so it reads as the main action. */
.verify-banner{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:14px 16px;border-radius:12px;background:rgba(255,176,32,.10);border:1px solid rgba(255,176,32,.34);animation:verifyBannerIn .45s cubic-bezier(.2,.9,.25,1.2) both;}
.verify-banner .vb-ic{flex-shrink:0;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(255,176,32,.16);color:#ffb020;animation:verifyIcPulse 2.2s ease-in-out 1s infinite;}
.verify-banner .vb-ic svg{width:20px;height:20px;}
.verify-banner .vb-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.verify-banner .vb-text strong{font-size:14.5px;color:var(--ink);}
.verify-banner .vb-text span{font-size:12.5px;color:var(--muted);line-height:1.4;}
.verify-banner .vb-btn{flex-shrink:0;margin-left:auto;padding:11px 20px;font-size:14px;white-space:nowrap;}
/* Wrong-email escape hatch — inline amber link inside the banner; only rendered while signed-in +
   unverified, so it surfaces exactly when a user who typo'd their sign-up email needs to change it
   WITHOUT verifying the old address (the change-email flow never requires the original be verified). */
.verify-banner .vb-change{align-self:flex-start;margin-top:4px;background:none;border:0;padding:0;font:inherit;font-size:12px;color:#ffb020;text-decoration:underline;text-underline-offset:2px;text-align:left;cursor:pointer;}
.verify-banner .vb-change:hover{color:#ffc957;}
@keyframes verifyBannerIn{0%{opacity:0;transform:translateY(-8px);}100%{opacity:1;transform:translateY(0);}}
@keyframes verifyIcPulse{0%,60%,100%{transform:scale(1);}72%{transform:scale(1.12);}84%{transform:scale(1);}}
@media (prefers-reduced-motion:reduce){.verify-banner,.verify-banner .vb-ic{animation:none;}}
@media (max-width:560px){.verify-banner{flex-wrap:wrap;}.verify-banner .vb-btn{margin-left:0;width:100%;}}
/* Email/mail icons get real life — a gentle breathe (like the site's card icons) with the
   envelope flap doing a periodic little "open" flutter. Applies to the verify-banner envelope
   AND the Support "Email support" envelope (both tagged .mail-ic). */
.mail-ic svg{transform-box:fill-box;transform-origin:center;will-change:transform;animation:mailBreathe 3.8s var(--ease) infinite;}
.mail-ic .mail-flap{transform-box:fill-box;transform-origin:top center;animation:mailFlap 3.8s var(--ease) infinite;}
@keyframes mailBreathe{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-1.5px) scale(1.09);}}
@keyframes mailFlap{0%,56%,100%{transform:scaleY(1) translateY(0);}70%{transform:scaleY(.6) translateY(-.4px);}82%{transform:scaleY(1.06) translateY(0);}}
/* eye-icon show/hide toggle — sits inside the field, never over the typed password */
#accountPassword{padding-right:46px;}
#toggleWebsitePasswordButton{position:absolute;right:5px;top:4px;bottom:4px;width:36px;display:grid;place-items:center;border-radius:8px;color:var(--muted);border:1px solid transparent;background:transparent;}
#toggleWebsitePasswordButton svg{width:19px;height:19px;display:block;}
#toggleWebsitePasswordButton .eye-off{display:none;}
#toggleWebsitePasswordButton.revealed .eye{display:none;}
#toggleWebsitePasswordButton.revealed .eye-off{display:block;}
#toggleWebsitePasswordButton:hover{color:var(--accent);background:var(--surface-2);border-color:var(--line-2);}
.auth-actions{display:flex;gap:10px;margin-top:18px;}
.auth-actions .primary-button,.auth-actions .secondary-button{flex:1;}
.auth-links{display:flex;flex-wrap:wrap;gap:9px 10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line);}
.auth-links button{font-size:13px;color:var(--muted);padding:9px 14px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);transition:color .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease),transform .16s var(--ease);}
.auth-links button:hover{color:var(--accent);border-color:rgba(212,251,92,.35);background:rgba(212,251,92,.06);transform:translateY(-1px);}
/* HWID reset cooldown note — the "available in Xd Yh" line under the Reset HWID control. */
.hwid-cooldown-note{margin-top:10px;font-family:var(--font-mono);font-size:12px;line-height:1.55;color:var(--warn);}
.hwid-cooldown-note.hidden{display:none;}
#websiteResetHwidButton:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.25);}
#signOutWebsiteButton{margin-left:auto;color:var(--danger);}
#signOutWebsiteButton:hover{color:#ff8078;}

.license-box{margin-top:20px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;}
.license-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;font-size:13.5px;}
.license-row+.license-row{border-top:1px solid var(--line);}
.license-row .k{color:var(--muted);}
.license-row .v{font-weight:600;font-family:var(--font-mono);font-size:12.5px;}
#websiteLicenseDetailText{color:var(--muted);font-size:13px;line-height:1.5;margin-top:10px;}
.license-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}

/* status pills / messages (site.js) */
.availability{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:12.5px;font-weight:600;
  letter-spacing:.1px;padding:6px 13px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--muted);text-transform:none;
}
.availability::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor;}
.availability.ready{color:var(--ok);border-color:rgba(87,217,138,.3);background:rgba(87,217,138,.08);}
.availability.info{color:var(--muted);border-color:var(--line-2);background:var(--surface-2);}
.availability.info::before{background:var(--muted-2);box-shadow:none;}
.availability.warning{color:var(--warn);border-color:rgba(255,207,107,.3);background:rgba(255,207,107,.08);}
.availability.error,.availability.danger,.availability.critical{color:var(--danger);border-color:rgba(255,90,82,.3);background:rgba(255,90,82,.08);}

.status-message{font-family:var(--font-fancy);font-optical-sizing:auto;font-style:italic;font-weight:500;font-size:15px;letter-spacing:.15px;color:var(--muted);line-height:1.5;margin-top:14px;padding:11px 15px;border-radius:10px;border:1px solid transparent;background:var(--bg-2);}
.status-message:empty{display:none;}
.status-message.info{color:#e9f6c2;border-color:rgba(212,251,92,.28);background:rgba(212,251,92,.07);}
.status-message.success{color:#a6e9c1;border-color:rgba(87,217,138,.25);background:rgba(87,217,138,.07);}
.status-message.warning{color:#ffe0a3;border-color:rgba(255,207,107,.25);background:rgba(255,207,107,.07);}
.status-message.error{color:#ffb4af;border-color:rgba(255,90,82,.25);background:rgba(255,90,82,.07);}
.status-message.emphasis{font-weight:600;}
.status-message.compact{padding:6px 10px;font-size:12.5px;margin-top:8px;}
/* global status toast */
/* Bottom-center status toast removed per user — feedback lives in-section (#websiteAuthStatus)
   and in the center modal instead. Target by ID: setStatus() rewrites className (dropping the
   .site-status class), so a class selector wouldn't hold. Kept element/JS (setStatus no-ops visually). */
#siteStatus{display:none!important;}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}

/* platform preview (hidden by default) */
#platform-preview .frame{border:1px solid var(--line-2);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);}
#platform-preview .frame img{width:100%;display:block;}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,56px);align-items:start;}
.faq-list{display:flex;flex-direction:column;}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{width:100%;text-align:left;display:flex;align-items:center;gap:16px;padding:22px 0;font-size:clamp(17.5px,1.75vw,20px);font-weight:700;color:var(--accent);letter-spacing:-.01em;text-shadow:0 0 18px rgba(212,251,92,.18);transition:color .18s var(--ease),text-shadow .18s var(--ease);}
.faq-q:hover{color:#e9ff8f;text-shadow:0 0 24px rgba(212,251,92,.42);}
.faq-item.open .faq-q{color:#e9ff8f;text-shadow:0 0 24px rgba(212,251,92,.48);}
.faq-q .plus{margin-left:auto;position:relative;width:18px;height:18px;flex-shrink:0;transition:transform .3s var(--ease);color:var(--accent);}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:currentColor;border-radius:2px;}
.faq-q .plus::before{top:8px;left:0;width:18px;height:2px;}
.faq-q .plus::after{left:8px;top:0;width:2px;height:18px;transition:transform .3s var(--ease);}
.faq-item.open .plus{transform:rotate(90deg);}
.faq-item.open .plus::after{transform:scaleY(0);}
.faq-a{overflow:hidden;max-height:0;transition:max-height .35s var(--ease);}
.faq-a-inner{padding:0 0 22px;color:#b9bec7;font-size:16px;line-height:1.62;max-width:580px;}
.faq-a-inner strong,.faq-a-inner b{color:var(--accent);font-weight:700;}
.faq-a a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}

.support-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;}
.support-card h3{font-family:var(--font-display);font-weight:700;font-size:20px;margin-bottom:8px;}
.support-card p{color:var(--muted);font-size:14.5px;margin-bottom:20px;}
.support-line{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);margin-bottom:10px;transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);will-change:transform;}
/* animate the support boxes like the cards: hover lift + pointer-follow glow
   (hud.js sets --mx/--my on .support-line, mirroring .card/.support-card) */
.support-line::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(280px 160px at var(--mx,50%) var(--my,0%),rgba(212,251,92,.14),transparent 70%);transition:opacity .35s var(--ease);}
.support-line:hover{transform:translateY(-3px);border-color:var(--line-2);background:var(--surface-2);box-shadow:0 14px 34px -16px var(--accent-glow);}
.support-line:hover::after{opacity:1;}
.support-line .si,.support-line .st{position:relative;z-index:1;}
.support-line .si{width:38px;height:38px;border-radius:10px;background:var(--surface-3);display:grid;place-items:center;color:var(--accent);flex-shrink:0;}
.support-line .si svg{width:19px;height:19px;}
.support-line .st{flex:1;min-width:0;}
.support-line .st small{display:block;color:var(--muted-2);font-size:12px;}
.support-line .st a,.support-line .st span{font-weight:600;font-size:14px;word-break:break-all;}
#copySupportButton{padding:8px 12px;border-radius:9px;font-size:12.5px;color:var(--muted);border:1px solid var(--line-2);flex-shrink:0;}
#copySupportButton:hover{color:var(--accent);border-color:var(--accent);}

/* Final CTA */
.cta-band{position:relative;border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:clamp(40px,6vw,72px);overflow:hidden;background:linear-gradient(180deg,var(--surface-2),var(--surface));text-align:center;}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% -20%,rgba(212,251,92,.14),transparent 70%);pointer-events:none;}
.cta-band h2{font-family:var(--font-display);font-weight:800;font-size:clamp(32px,5vw,58px);letter-spacing:-.03em;line-height:1;position:relative;}
.cta-band p{color:var(--muted);margin:18px auto 30px;max-width:460px;position:relative;}
.cta-band .hero-cta{justify-content:center;position:relative;}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:56px 0 40px;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;margin-bottom:44px;}
.footer-brand p{color:var(--muted);font-size:14px;margin-top:16px;max-width:280px;}
.footer-col h3{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px;font-weight:600;}
.footer-col a{display:block;color:var(--muted);font-size:14px;padding:5px 0;}
.footer-col a:hover{color:var(--accent);}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line);color:var(--muted-2);font-size:13px;}
.footer-bottom .legal{display:flex;gap:20px;flex-wrap:wrap;}

/* Modals */
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(6,7,9,.74);backdrop-filter:blur(7px);animation:backdropIn .34s ease both;}
.modal-backdrop.closing{animation:backdropOut .5s ease both;}
/* max-height + internal scroll: on short screens (landscape phones, tiny portrait) a tall confirm
   dialog must never clip its title off the top or push its Cancel/Confirm buttons below the
   viewport with no way to reach them (the modal is position:fixed, so page-scroll can't recover
   them). Capping height to the viewport keeps the whole modal on-screen; overflow-y lets its own
   content scroll to the action row. dvh handles the mobile browser-chrome height; vh is the fallback. */
.modal{position:fixed;z-index:101;left:50%;top:50%;transform:translate(-50%,-48%);width:min(448px,calc(100vw - 32px));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:32px 30px;box-shadow:var(--shadow),0 30px 80px rgba(0,0,0,.5);animation:modalIn .5s cubic-bezier(.2,.85,.25,1.1) both;}
/* Short viewports (landscape phones): trim padding, and PIN the action row to the bottom of the
   dialog as a sticky footer so Cancel/Confirm are ALWAYS visible while the message scrolls above —
   the buttons can never end up below the fold. Opaque background + top fade so scrolling content
   doesn't bleed through. margin-bottom cancels the modal's bottom padding so the row sits flush. */
/* Constrained viewports — narrow phones (max-width:460) OR short landscape (max-height:560) — get
   the SAME treatment so the two breakpoints can't disagree (a 320x568 phone is narrow-but-not-short,
   a 844x390 phone is short-but-not-narrow; both need the fix). STACK the action buttons full-width so
   long nowrap labels ("Okay, I'll verify my email", "Reset HWID") never truncate mid-word, and PIN
   them as a sticky footer so they stay visible while the message scrolls above — a stacked button can
   never fall below the fold. Unified 18/20 padding + edge-bleed (margin:-20) keeps the sticky bg flush
   to the modal edges; margin-bottom:-18 cancels the modal's bottom padding so the row sits flush. */
@media (max-width:460px), (max-height:560px){
  .modal{padding:18px 20px;}
  .modal .modal-actions{flex-direction:column;position:sticky;bottom:0;z-index:1;margin:14px -20px -18px;padding:12px 20px 18px;background:var(--surface);box-shadow:0 -14px 16px -10px var(--surface);}
  .modal .modal-actions button{flex:1 1 auto;width:100%;}
}
/* Small phones: reclaim horizontal room so nowrap button labels (e.g. "Join the Discord" with its
   icon) stop shaving the last glyph. Trimming btn-lg side padding is harmless for the full-width
   hero CTAs and fixes the ~10px overflow on the constrained-width secondary buttons. */
@media (max-width:400px){
  .btn-lg{padding:15px 18px;}
  .discord-mark{margin-right:7px;}
}
.modal::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--violet));}
.modal.closing{animation:modalOut .42s cubic-bezier(.4,0,.65,1) both;pointer-events:none;}
@keyframes modalIn{0%{opacity:0;transform:translate(-50%,-40%) scale(.9);}58%{opacity:1;}100%{opacity:1;transform:translate(-50%,-48%) scale(1);}}
@keyframes modalOut{0%{opacity:1;transform:translate(-50%,-48%) scale(1);}100%{opacity:0;transform:translate(-50%,-45%) scale(.955);}}
@keyframes backdropIn{from{opacity:0;}to{opacity:1;}}
@keyframes backdropOut{from{opacity:1;}to{opacity:0;}}
.modal-icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;background:rgba(212,251,92,.12);color:var(--accent);border:1px solid rgba(212,251,92,.22);}
.modal-icon svg{width:26px;height:26px;}
/* Kind-colored, ANIMATED modal icon. Non-warning kinds use an emoji in an inner .modal-icon-glyph
   span (via textContent) so the GLYPH pops on its own (transform) while the container BOX runs a
   gentle ring pulse (box-shadow) — the two never fight over transform. overflow:visible lets a
   popping glyph/SVG overshoot the box edge. Warning uses the custom split SVG below. */
.modal-icon{overflow:visible;}
.modal-icon.icon-critical,.modal-icon.icon-danger,.modal-icon.icon-success,.modal-icon.icon-info{font-size:28px;line-height:1;}
.modal-icon-glyph{display:inline-block;line-height:1;will-change:transform;transform-origin:50% 60%;animation:iconPop .5s cubic-bezier(.2,.9,.25,1.4) both;}
/* Only the ICON itself loops — the container "square" (bg/border) is static, never pulses. */
.modal-icon.icon-critical .modal-icon-glyph,.modal-icon.icon-danger .modal-icon-glyph{animation:iconPop .5s cubic-bezier(.2,.9,.25,1.4) both,iconSoftPulse 1.9s ease-in-out 1s infinite;}
/* info + success glyphs also loop gently so they feel alive (info gives a little bob, success a soft pulse). */
.modal-icon.icon-info .modal-icon-glyph{animation:iconPop .5s cubic-bezier(.2,.9,.25,1.4) both,iconInfoBob 2.4s ease-in-out .9s infinite;}
/* info icon is now an accent (brand-yellow) SVG, not the blue system emoji */
.modal-icon.icon-info{color:var(--accent);}
.modal-icon.icon-info .modal-icon-glyph .info-svg{width:30px;height:30px;display:block;}
.modal-icon.icon-success .modal-icon-glyph{animation:iconPop .5s cubic-bezier(.2,.9,.25,1.4) both,iconSoftPulse 2.1s ease-in-out 1s infinite;}
@keyframes iconInfoBob{0%,60%,100%{transform:translateY(0) scale(1);}72%{transform:translateY(-3px) scale(1.1);}84%{transform:translateY(0) scale(.98);}}
.modal-icon.icon-warning{background:rgba(255,176,32,.14);color:#ffb020;border-color:rgba(255,176,32,.36);}
.modal-icon.icon-critical,.modal-icon.icon-danger{background:rgba(255,86,86,.14);color:#ff5656;border-color:rgba(255,86,86,.36);}
@keyframes iconPop{0%{transform:scale(.2) rotate(-16deg);opacity:0;}55%{transform:scale(1.22) rotate(7deg);opacity:1;}78%{transform:scale(.94) rotate(-3deg);}100%{transform:scale(1) rotate(0);opacity:1;}}
/* trash (critical/danger) glyph — one clear pop per cycle, with a rest so the repeat is obvious */
@keyframes iconSoftPulse{0%,55%,100%{transform:scale(1);}70%{transform:scale(1.16);}82%{transform:scale(.98);}}

/* --- Custom WARNING icon: triangle draws itself in + holds still while the exclamation (its own
       <g>) floats + pops NON-STOP so it always reads as alive. transform-box:fill-box makes the
       PERCENT transform-origins resolve against each part's own bounding box (px origins would land
       outside the tiny sub-shapes). --- */
.modal-icon .warn-svg{width:36px;height:33px;overflow:visible;}
.warn-tri{fill:rgba(255,176,32,.16);stroke:currentColor;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:100;animation:warnDraw .55s ease-out both,warnTriGlow 2.4s ease-in-out .7s infinite;}
.warn-bar,.warn-dot{fill:currentColor;}
.warn-mark{transform-box:fill-box;transform-origin:50% 100%;will-change:transform;animation:warnMarkIn .5s cubic-bezier(.2,.9,.2,1.7) .34s both,warnMarkFloat 1.7s ease-in-out .85s infinite;}
.warn-dot{transform-box:fill-box;transform-origin:50% 50%;animation:warnDotIn .4s cubic-bezier(.2,.9,.2,1.9) .5s both;}
@keyframes warnDraw{0%{stroke-dashoffset:100;fill-opacity:0;}70%{fill-opacity:1;}100%{stroke-dashoffset:0;fill-opacity:1;}}
@keyframes warnTriGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,176,32,0));}50%{filter:drop-shadow(0 0 5px rgba(255,176,32,.6));}}
@keyframes warnMarkIn{0%{opacity:0;transform:translateY(-9px) scale(.55);}70%{opacity:1;transform:translateY(2px) scale(1.14);}100%{opacity:1;transform:translateY(0) scale(1);}}
@keyframes warnDotIn{0%{opacity:0;transform:scale(0);}70%{opacity:1;transform:scale(1.5);}100%{opacity:1;transform:scale(1);}}
/* Loop = a simple repeating BEAT: entrance plays the elaborate spring ONCE, then this rests ~half
   the cycle and does ONE energetic pop. The rest between pops is what makes the repeat read clearly
   (a constant float doesn't look like it's "repeating"). */
@keyframes warnMarkFloat{0%,50%,100%{transform:translateY(0) scale(1);}64%{transform:translateY(-7px) scale(1.22);}77%{transform:translateY(1px) scale(.95);}88%{transform:translateY(-2px) scale(1.05);}}

/* --- Custom LOCK icon (password step): shackle clicks shut into the body on entry, keyhole
       glows, and the shackle gives a periodic little tug. Accent (lime) so it's clearly distinct
       from the amber warning. --- */
.modal-icon.icon-lock{background:rgba(212,251,92,.12);color:#d4fb5c;border-color:rgba(212,251,92,.32);}
.modal-icon .lock-svg{width:34px;height:32px;overflow:visible;}
.lock-body{fill:currentColor;transform-box:fill-box;transform-origin:50% 50%;animation:lockBodyIn .45s cubic-bezier(.2,.9,.25,1.4) .12s both;}
.lock-shackle{stroke:currentColor;stroke-width:3.4;stroke-linecap:round;fill:none;transform-box:fill-box;transform-origin:50% 100%;animation:lockShackleIn .5s cubic-bezier(.3,.7,.3,1.55) both,lockTug 2.2s ease-in-out 1s infinite;}
.lock-key-dot,.lock-key-slot{fill:#0c1108;} /* keyhole punched dark out of the lit body */
.lock-keyhole{transform-box:fill-box;transform-origin:50% 50%;animation:lockKeyIn .38s ease-out .48s both,lockKeyGlow 1.7s ease-in-out 1s infinite;}
@keyframes lockBodyIn{0%{opacity:0;transform:scale(.6) translateY(4px);}70%{opacity:1;transform:scale(1.06) translateY(0);}100%{opacity:1;transform:scale(1);}}
/* shackle drops down + squashes into the body — a satisfying "click shut" */
@keyframes lockShackleIn{0%{opacity:0;transform:translateY(-8px) scaleY(.72);}65%{opacity:1;transform:translateY(1px) scaleY(1.05);}100%{opacity:1;transform:translateY(0) scaleY(1);}}
@keyframes lockKeyIn{0%{opacity:0;transform:scale(0);}100%{opacity:1;transform:scale(1);}}
/* shackle tug + keyhole glow: rest, then one clear beat per cycle (obvious repeat) */
@keyframes lockTug{0%,55%,100%{transform:translateY(0) scaleY(1);}68%{transform:translateY(-3px) scaleY(1.06);}80%{transform:translateY(0) scaleY(.98);}88%{transform:translateY(-1px) scaleY(1.02);}}
@keyframes lockKeyGlow{0%,55%,100%{opacity:1;transform:scale(1);}72%{opacity:.5;transform:scale(1.14);}}

/* NOTE: the icon attention loops intentionally repeat even under prefers-reduced-motion — the
   product owner wants the repeating beat visible (OS "reduce animations" was previously stopping
   it after one pass). The loops are small, low-amplitude modal icons that only appear during the
   reset-HWID flow. If a stricter accessibility posture is needed later, re-add an
   animation-iteration-count:1 rule for these selectors here. */

/* Back button (password step): slides in when shown, sits on the far left, nudges left on hover
   ("back" direction). margin-right:auto pushes Cancel/Confirm to the right. */
#fancyConfirmBack{margin-right:auto;transition:transform .16s ease,color .16s,border-color .16s,background .16s;}
#fancyConfirmBack:not(.hidden){animation:backBtnIn .4s cubic-bezier(.2,.9,.25,1.35) both;}
#fancyConfirmBack:hover{transform:translateX(-3px);}
#fancyConfirmBack:active{transform:translateX(-1px) scale(.97);}
@keyframes backBtnIn{0%{opacity:0;transform:translateX(-11px);}100%{opacity:1;transform:translateX(0);}}
/* badge sits clearly above the title (the availability class strips result-badge's margin, so pin it here) */
#checkoutResultBadge{display:inline-flex;margin-bottom:18px;}
.modal h3{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.02em;margin-bottom:11px;line-height:1.12;}
/* clean modern sans for the message (was an out-of-place italic serif) */
.modal p{font-family:var(--font-body);font-weight:500;color:#dfe4ec;font-size:16px;letter-spacing:.1px;line-height:1.6;}
.authx-msg{font-family:var(--font-body);font-weight:500;font-style:normal;letter-spacing:.1px;color:var(--muted);}
/* confirmation countdown bar — injected by site.js when a popup auto-advances */
.modal-timer{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--line);}
.modal-timer i{display:block;height:100%;width:100%;transform-origin:left center;background:linear-gradient(90deg,var(--accent),var(--violet));animation:modalTimer linear both;}
@keyframes modalTimer{from{transform:scaleX(1);}to{transform:scaleX(0);}}
#fancyConfirmInputContainer{margin-top:18px;}
#fancyConfirmInput{width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:11px;padding:12px 14px;color:var(--ink);}
#fancyConfirmInput:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
/* Password reveal (eye) toggle inside the fancy-confirm input (password prompts only). */
#fancyConfirmInputContainer.fc-input-wrap{position:relative;}
.fc-input-wrap.fc-has-eye #fancyConfirmInput{padding-right:46px;}
.fc-eye-toggle{position:absolute;top:50%;right:8px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:8px;transition:color .15s var(--ease);}
.fc-eye-toggle:hover{color:var(--accent);}
.fc-eye-toggle svg{width:20px;height:20px;display:block;}
.fc-eye-toggle.hidden{display:none;}
.fc-eye-toggle .fc-eye.hidden,.fc-eye-toggle .fc-eye-off.hidden{display:none;}
.modal-actions{display:flex;gap:10px;margin-top:24px;}
.modal-actions button{flex:1;}
.result-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:6px 12px;border-radius:999px;margin-bottom:16px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--muted);}
#checkoutResultDetail{margin-top:14px;padding:14px 16px;border-radius:11px;background:var(--bg-2);border:1px solid var(--line);font-family:var(--font-body);font-weight:500;font-size:14.5px;letter-spacing:.1px;color:var(--muted);line-height:1.6;word-break:break-word;}
/* ===== loading modal: big circular spinner with the DropX droplet in the centre (EXE-verify style) ===== */
.modal-loader{display:none;justify-content:center;margin:2px auto 24px;}
.modal.is-loading .modal-loader{display:flex;}
.modal.is-loading #checkoutResultBadge{display:none;}
.modal.is-loading .modal-actions{display:none;}
.modal.is-loading h3{margin-top:6px;}
/* spinning loading ring around the REAL DropX dripper (exact bottle->droplet->splash from the app) */
/* EXACT replica of the EXE "Verifying your license" loader: a conic-gradient ring spins around the
   DropX droplet (with the X masked OUT of it) + a soft glow behind it, and the droplet bobs. */
.gl-halo{position:relative;width:132px;height:132px;display:grid;place-items:center;}
.gl-halo::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,var(--accent) 300deg,transparent 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
  animation:glSpin 1.05s linear infinite;}
.gl-halo::after{content:"";position:absolute;inset:16px;border-radius:50%;animation:glGlow 2.4s ease-in-out infinite;}
.gl-drop{width:66px;height:66px;display:grid;place-items:center;z-index:1;animation:glBob 2.2s ease-in-out infinite;}
.gl-drop .dxlogo{width:100%;height:100%;}
@keyframes glSpin{to{transform:rotate(360deg);}}
@keyframes glBob{0%,100%{transform:translateY(4px);}50%{transform:translateY(-9px);}}
@keyframes glGlow{0%,100%{box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 20px 2px color-mix(in srgb,var(--accent) 26%,transparent);}50%{box-shadow:0 12px 34px rgba(0,0,0,.34),0 0 42px 7px color-mix(in srgb,var(--accent) 55%,transparent);}}
#checkoutResultDetail:empty{display:none;}

/* Utilities */
.hidden{display:none!important;}
/* section-focus intentionally does nothing — nav feedback is the smooth scroll itself (hud.js) */
.section-focus{animation:none;}

/* Ambient moving background */
.fx{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%;}
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.ambient .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;will-change:transform;}
.ambient .b1{width:520px;height:520px;top:-160px;right:-120px;background:radial-gradient(circle,rgba(212,251,92,.20),transparent 70%);animation:drift1 24s ease-in-out infinite;}
.ambient .b2{width:460px;height:460px;bottom:-180px;left:-140px;background:radial-gradient(circle,rgba(139,123,255,.18),transparent 70%);animation:drift2 30s ease-in-out infinite;}
.ambient .b3{width:360px;height:360px;top:38%;left:52%;background:radial-gradient(circle,rgba(127,184,255,.10),transparent 70%);animation:drift3 34s ease-in-out infinite;}
.ambient .grid-drift{position:absolute;inset:-40% -10% -10%;opacity:.05;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 70% 50% at 50% 0%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 50% at 50% 0%,#000,transparent 75%);animation:gridDrift 40s linear infinite;}
@keyframes drift1{50%{transform:translate(-60px,50px) scale(1.08);}}
@keyframes drift2{50%{transform:translate(70px,-40px) scale(1.06);}}
@keyframes drift3{33%{transform:translate(-50px,-30px);}66%{transform:translate(40px,40px);}}
@keyframes gridDrift{to{background-position:56px 56px,56px 56px;}}

/* Discord PAGE */
html.dp-locked{overflow:hidden;}
#headerDiscordLink[aria-expanded="true"]{color:var(--accent);background:var(--surface);}
.discord-page{position:fixed;inset:0;z-index:90;overflow:hidden;background:radial-gradient(1200px 800px at 50% -10%,#191634,#0a0a10 62%);display:grid;place-items:center;padding:clamp(20px,5vw,48px);opacity:0;transform:scale(1.03);filter:blur(6px);transition:opacity .42s var(--ease),transform .42s var(--ease),filter .42s var(--ease);}
.discord-page.open{opacity:1;transform:none;filter:none;}
.dp-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.dp-blob{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform;}
.dp-blob.db1{width:560px;height:560px;top:-140px;left:-100px;background:radial-gradient(circle,rgba(139,123,255,.45),transparent 70%);animation:drift1 22s ease-in-out infinite;}
.dp-blob.db2{width:520px;height:520px;bottom:-180px;right:-120px;background:radial-gradient(circle,rgba(88,101,242,.4),transparent 70%);animation:drift2 26s ease-in-out infinite;}
.dp-blob.db3{width:360px;height:360px;top:44%;left:46%;background:radial-gradient(circle,rgba(212,251,92,.14),transparent 70%);animation:drift3 30s ease-in-out infinite;}
.dp-rings{position:absolute;top:50%;left:50%;width:280px;height:280px;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 1px rgba(139,123,255,.25);animation:dpRingPulse 3.6s ease-out infinite;}
.dp-grid{position:absolute;inset:-20%;opacity:.05;background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000,transparent 72%);-webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000,transparent 72%);animation:gridDrift 34s linear infinite;}
@keyframes dpRingPulse{0%{box-shadow:0 0 0 0 rgba(139,123,255,.4);opacity:.9;}100%{box-shadow:0 0 0 220px rgba(139,123,255,0);opacity:0;}}
.dp-close{position:absolute;top:clamp(16px,3vw,26px);left:clamp(16px,3vw,26px);z-index:4;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(20,20,30,.7);backdrop-filter:blur(10px);border:1px solid var(--line-2);font-size:13.5px;color:var(--muted);transition:color .18s,border-color .18s,transform .18s;}
.dp-close:hover{color:var(--ink);border-color:var(--violet);transform:translateX(-3px);}
.dp-inner{position:relative;z-index:3;text-align:center;max-width:600px;}
.dp-eyebrow{color:var(--violet);justify-content:center;margin-bottom:20px;}
.dp-eyebrow::before{background:var(--violet);}
.dp-orb{position:relative;width:96px;height:96px;margin:0 auto 26px;border-radius:26px;display:grid;place-items:center;background:linear-gradient(160deg,rgba(139,123,255,.28),rgba(88,101,242,.16));border:1px solid rgba(139,123,255,.4);color:#c7c0ff;box-shadow:0 20px 60px -18px rgba(139,123,255,.6);animation:dpOrbBob 4.6s ease-in-out infinite;}
.dp-orb svg{width:48px;height:48px;position:relative;z-index:2;}
.dp-orb-pulse{position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(139,123,255,.5);animation:dpOrbPulse 2.8s ease-out infinite;}
.dp-orb-pulse.d2{animation-delay:1.4s;}
@keyframes dpOrbBob{50%{transform:translateY(-9px);}}
@keyframes dpOrbPulse{0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.7);opacity:0;}}
.discord-page h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1.02;font-size:clamp(38px,6vw,64px);}
.discord-page h2 .dp-hl{color:var(--violet);}
.dp-sub{color:var(--muted);font-size:clamp(16px,1.7vw,19px);line-height:1.55;max-width:500px;margin:20px auto 0;}
.dp-facts{display:flex;justify-content:center;gap:clamp(20px,5vw,52px);margin:34px 0 32px;flex-wrap:wrap;}
.dp-fact{display:flex;flex-direction:column;align-items:center;gap:7px;max-width:190px;}
.dp-fact b{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink);}
.dp-fact small{font-family:var(--font-body);font-size:12.5px;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--muted);}
.dp-go{padding:18px 34px;font-size:17px;}
.dp-fine{margin-top:18px;font-family:var(--font-body);font-size:13px;color:var(--muted-2);letter-spacing:.1px;}
/* Discord "media shower" — restock-alert cards RAIN DOWN two gutter lanes,
   staggered + rotated, each lane trailing a streaming data-rail. Techy, fancy,
   continuous (negative delays = no warm-up gap). */
.dp-feed{position:absolute;top:0;bottom:0;z-index:1;width:274px;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 90%,transparent);mask-image:linear-gradient(180deg,transparent,#000 6%,#000 90%,transparent);}
.dp-feed-left{left:clamp(-46px,3vw,46px);}
.dp-feed-right{right:clamp(-46px,3vw,46px);}
/* streaming vertical data-rail behind each lane */
.dp-feed::before{content:"";position:absolute;top:-10%;bottom:-10%;left:19px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,transparent,rgba(139,123,255,.6),rgba(212,251,92,.5),rgba(139,123,255,.6),transparent);
  background-size:100% 240px;animation:dpRail 2.3s linear infinite;opacity:.55;}
.dp-feed-right::before{left:auto;right:19px;animation-duration:2.8s;}
@keyframes dpRail{to{background-position:0 240px;}}
.dp-msg{position:absolute;left:6px;right:6px;top:0;display:flex;align-items:flex-start;gap:10px;
  background:linear-gradient(180deg,rgba(27,28,40,.84),rgba(17,18,27,.84));backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border:1px solid var(--line-2);border-radius:14px;padding:11px 13px;
  box-shadow:0 16px 36px -12px rgba(0,0,0,.65),0 0 0 1px rgba(139,123,255,.15),0 0 24px -8px rgba(139,123,255,.55);
  opacity:0;transform:translateY(-110px);will-change:transform,opacity;animation:dpFall linear infinite;}
.dp-msg::before{content:"";position:absolute;left:-1px;top:11px;bottom:11px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent),var(--violet));box-shadow:0 0 10px var(--violet);opacity:.85;}
@keyframes dpFall{
  0%{transform:translateY(-110px) rotate(var(--rot,0deg)) scale(.9);opacity:0;}
  6%{opacity:1;}
  10%{transform:translateY(2vh) rotate(var(--rot,0deg)) scale(1);opacity:1;}
  82%{opacity:1;}
  93%{opacity:.35;}
  100%{transform:translateY(97vh) rotate(var(--rot,0deg)) scale(.95);opacity:0;}
}
/* up to six cards rain per lane, evenly phased; left/right desynced */
.dp-feed-left .dp-msg:nth-child(1){--rot:-2deg;margin-left:0;animation-duration:9s;animation-delay:0s;}
.dp-feed-left .dp-msg:nth-child(2){--rot:1.6deg;margin-left:16px;animation-duration:10.5s;animation-delay:-1.7s;}
.dp-feed-left .dp-msg:nth-child(3){--rot:-1deg;margin-left:6px;animation-duration:8.4s;animation-delay:-3.4s;}
.dp-feed-left .dp-msg:nth-child(4){--rot:2.4deg;margin-left:22px;animation-duration:11s;animation-delay:-5s;}
.dp-feed-left .dp-msg:nth-child(5){--rot:-2.2deg;margin-left:2px;animation-duration:9.6s;animation-delay:-6.6s;}
.dp-feed-left .dp-msg:nth-child(6){--rot:1deg;margin-left:14px;animation-duration:10s;animation-delay:-8.2s;}
.dp-feed-right .dp-msg:nth-child(1){--rot:2deg;margin-left:14px;animation-duration:10s;animation-delay:-0.8s;}
.dp-feed-right .dp-msg:nth-child(2){--rot:-1.6deg;margin-left:2px;animation-duration:8.8s;animation-delay:-2.6s;}
.dp-feed-right .dp-msg:nth-child(3){--rot:1.2deg;margin-left:20px;animation-duration:10.8s;animation-delay:-4.3s;}
.dp-feed-right .dp-msg:nth-child(4){--rot:-2.4deg;margin-left:6px;animation-duration:9.2s;animation-delay:-6s;}
.dp-feed-right .dp-msg:nth-child(5){--rot:1.8deg;margin-left:18px;animation-duration:11.2s;animation-delay:-7.7s;}
.dp-feed-right .dp-msg:nth-child(6){--rot:-1deg;margin-left:10px;animation-duration:9.8s;animation-delay:-9.4s;}
.dp-msg .av{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:11px;color:var(--accent-ink);background:var(--accent);box-shadow:0 0 14px -2px var(--accent-glow);}
.dp-msg b{display:block;font-size:12.5px;color:var(--ink);font-weight:600;font-family:var(--font-mono);letter-spacing:.2px;}
.dp-msg p{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:3px;font-family:var(--font-body);}
@media (max-width:1180px){.dp-feed{display:none;}}

/* DropX dropper logo */
.dropx-drip{display:inline-block;width:130px;height:176px;animation:dxBob 4.8s ease-in-out infinite;filter:drop-shadow(0 8px 20px rgba(0,0,0,.4));}
.dropx-drip.sm{width:44px;height:60px;animation:none;filter:none;}
.dropx-drip.nav{width:40px;height:54px;animation:dxBob 4.8s ease-in-out infinite,dxNavShine 7s ease-in-out infinite;}
.foot-mark{width:40px;height:54px;display:grid;place-items:center;overflow:visible;}
.dropx-drip.foot{width:40px;height:54px;animation:dxBob 4.8s ease-in-out infinite;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));}
@keyframes dxNavShine{0%,80%,100%{filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));}86%{filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)) drop-shadow(0 0 10px var(--accent)) brightness(1.3);}92%{filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)) drop-shadow(0 0 5px var(--accent-glow)) brightness(1.12);}}
.dropx-drip .dripper-svg{width:100%;height:100%;overflow:visible;}
.dropx-drip .dr-bottle{transform-origin:50px 34px;animation:dxSway 3.2s ease-in-out infinite;}
.dropx-drip .dr-bulb{transform-origin:50px 13px;animation:dxSqueeze 3.2s ease-in-out infinite;fill:rgba(255,255,255,.86);}
.dropx-drip .dr-liquid{transform-origin:50px 62px;animation:dxLiquid 3.2s ease-in-out infinite;}
.dropx-drip .dr-x{animation:dxX 3.2s linear infinite;}
.dropx-drip .dr-fall{animation:dxFall 3.2s linear infinite;}
.dropx-drip .dr-drop{transform-origin:50px 64px;animation:dxForm 3.2s ease-out infinite;}
.dropx-drip .dr-neck{transform-origin:50px 64px;opacity:0;animation:dxNeck 3.2s linear infinite;}
.dropx-drip .dr-splash{transform-origin:50px 128px;opacity:0;animation:dxSplash 3.2s linear infinite;}
.dropx-drip .dr-splash2{transform-origin:50px 128px;opacity:0;animation:dxSplash2 3.2s linear infinite;animation-delay:.05s;}
.dropx-drip .dr-pool{transform-origin:50px 133px;transform:scaleX(.35) scaleY(.25);opacity:0;animation:dxPool 12.8s linear infinite;}
.dropx-drip.sm .dr-fall,.dropx-drip.sm .dr-neck,.dropx-drip.sm .dr-splash,.dropx-drip.sm .dr-splash2,.dropx-drip.sm .dr-pool{display:none;}
.dropx-drip.sm .dr-x{opacity:1;}
@keyframes dxBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes dxForm{0%{transform:scaleX(.46) scaleY(.22);}26%{transform:scaleX(1) scaleY(1);}100%{transform:scaleX(1) scaleY(1);}}
@keyframes dxSway{0%{transform:translateY(0) rotate(0);}22%{transform:translateY(.6px) rotate(.4deg);}52%{transform:translateY(1px) rotate(0);}57%{transform:translateY(-1.6px) rotate(-.5deg);}72%{transform:translateY(0) rotate(0);}100%{transform:translateY(0);}}
@keyframes dxLiquid{0%{transform:scaleY(1);}22%{transform:scaleY(.72);}54%{transform:scaleY(.76);}84%,100%{transform:scaleY(1);}}
@keyframes dxX{0%,17%{opacity:0;}33%{opacity:1;}92%{opacity:1;}100%{opacity:0;}}
@keyframes dxSqueeze{0%,4%{transform:scale(1);}14%{transform:scaleX(.85) scaleY(1.09);}30%{transform:scale(1);}54%{transform:scaleX(.93) scaleY(1.04);}62%,100%{transform:scale(1);}}
@keyframes dxFall{0%,26%{transform:translateY(0);animation-timing-function:cubic-bezier(.4,0,.7,1);}52%{transform:translateY(3px);animation-timing-function:cubic-bezier(.5,0,.85,.5);}90%{transform:translateY(42px);opacity:1;animation-timing-function:ease-in;}95%{transform:translateY(44px);opacity:0;}100%{transform:translateY(44px);opacity:0;}}
@keyframes dxNeck{0%{opacity:0;transform:scaleY(.15);}8%{opacity:.9;transform:scaleY(.55);}22%{opacity:.85;transform:scaleY(.9);}50%{opacity:.7;transform:scaleY(1.05);}56%{opacity:.5;transform:scaleY(1.9);}60%{opacity:0;transform:scaleY(2.4);}100%{opacity:0;transform:scaleY(2.4);}}
/* Outer shockwave ring — fires the instant the drop lands (~90% of the fall cycle). */
@keyframes dxSplash{0%,88%{opacity:0;transform:scale(.3);}92%{opacity:.9;transform:scale(.9);}100%{opacity:0;transform:scale(2.35);}}
/* Inner accent ring — tighter, a hair later, gives the concentric ripple. */
@keyframes dxSplash2{0%,89%{opacity:0;transform:scale(.18);}93%{opacity:.85;transform:scale(.66);}100%{opacity:0;transform:scale(1.75);}}
/* Puddle — a STANDING pool that BUILDS UP, matching the sign-in dripper. dr-fall is a 3.2s loop,
   so 4 drops land per 12.8s cycle (at ~22.5/47.5/72.5/97.5%). Each landing bumps the pool deeper
   and wider; after the 4th it drains away and the cycle restarts from empty — so it builds up,
   disappears, then reappears (no vanish-on-land). Bumps are aligned to the drop landings. */
@keyframes dxPool{
  0%{transform:scaleX(.35) scaleY(.25);opacity:0;}
  4%{opacity:.92;}
  20.5%{transform:scaleX(.6) scaleY(.5);}
  22.5%{transform:scaleX(.98) scaleY(1.02);}
  24.5%{transform:scaleX(.9) scaleY(.72);}
  45.5%{transform:scaleX(1) scaleY(.78);}
  47.5%{transform:scaleX(1.4) scaleY(1.28);}
  49.5%{transform:scaleX(1.28) scaleY(1.0);}
  70.5%{transform:scaleX(1.4) scaleY(1.06);}
  72.5%{transform:scaleX(1.85) scaleY(1.55);}
  74.5%{transform:scaleX(1.72) scaleY(1.26);}
  95.5%{transform:scaleX(1.86) scaleY(1.32);}
  97.5%{transform:scaleX(2.35) scaleY(1.8);opacity:.94;}
  99%{transform:scaleX(2.2) scaleY(1.55);}
  100%{transform:scaleX(.35) scaleY(.25);opacity:0;}
}

.brand-mark.brand-mark-logo{background:none;border:none;border-radius:0;width:26px;height:36px;overflow:visible;}
.brand-mark.brand-mark-logo .dropx-drip.sm{width:26px;height:36px;}
.footer-brand .brand-word{font-size:20px;}

/* Marquee ticker */
.marquee{position:relative;overflow:hidden;width:100%;white-space:nowrap;border-block:1px solid var(--line);}
.marquee-accent{background:var(--accent);border-color:var(--accent-dim);}
.marquee-dark{background:var(--bg-2);}
.marquee-track{display:inline-flex;align-items:center;padding-block:14px;will-change:transform;animation:mqScroll 34s linear infinite;}
.marquee-track.reverse{animation:mqScrollRev 30s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.mq-item{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:800;font-size:clamp(15px,1.7vw,20px);letter-spacing:.06em;text-transform:uppercase;}
.marquee-accent .mq-item{color:var(--accent-ink);}
.marquee-dark .mq-item{color:var(--ink);}
.mq-sep{display:inline-block;margin:0 clamp(16px,2.4vw,34px);font-size:.8em;opacity:.55;}
.marquee-accent .mq-sep{color:var(--accent-ink);}
.marquee-dark .mq-sep{color:var(--accent);opacity:.9;}
@keyframes mqScroll{to{transform:translateX(-50%);}}
@keyframes mqScrollRev{from{transform:translateX(-50%);}to{transform:translateX(0);}}

/* Customer wins */
.wins-head{max-width:640px;margin-left:auto;margin-right:auto;text-align:center;}
.wins-head .eyebrow{justify-content:center;}
.wins-head p{margin-left:auto;margin-right:auto;}
.wins-marquee{position:relative;overflow:hidden;width:100%;margin-top:clamp(26px,4vw,42px);-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.wins-track{display:inline-flex;gap:20px;padding-inline:10px;will-change:transform;animation:winScroll 48s linear infinite;}
.wins-marquee:hover .wins-track{animation-play-state:paused;}
.win{flex:0 0 auto;width:300px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .3s var(--ease),border-color .3s var(--ease);}
.win:hover{transform:translateY(-5px);border-color:var(--line-2);}
.win-photo{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;background:#f4f5f7;}
.win-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* light logo panels: subtle per-brand tint so the cards still read as distinct */
/* Rich brand-colour ground with a wide luminous centre so the logo stays crisp. The centre is a
   soft brand tint (not stark white) and the edges carry the retailer's actual colour, so each card
   reads clearly as that brand. Elliptical light zone (wider than tall) keeps wide wordmarks legible. */
.win-photo.p1,.win-photo.p6{background:radial-gradient(135% 96% at 50% 42%,#fff6f5 34%,#ff5a4f 100%);}   /* Target red */
.win-photo.p2{background:radial-gradient(135% 96% at 50% 42%,#fffdf0 32%,#ffcc14 100%);}                 /* Best Buy yellow */
/* two-tone brand grounds: white centre (logo stays legible) over the brand's actual two colours */
.win-photo.p3{background:radial-gradient(140% 100% at 50% 44%,#ffffff 38%,rgba(255,255,255,0) 90%),linear-gradient(125deg,#ee1515 0%,#2a75bb 100%);}   /* Pokémon Center red + blue */
.win-photo.p4{background:radial-gradient(150% 100% at 50% 44%,#ffffff 40%,rgba(255,255,255,0) 92%),linear-gradient(125deg,#0071dc 0%,#ffc220 100%);}   /* Walmart blue + yellow */
.win-photo.p5{background:radial-gradient(140% 100% at 50% 44%,#ffffff 38%,rgba(255,255,255,0) 90%),linear-gradient(125deg,#e31837 0%,#005daa 100%);}   /* Costco red + blue */
.win-badge{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:11.5px;font-weight:600;letter-spacing:.1px;color:#04210f;background:var(--accent);border-radius:999px;padding:5px 11px;box-shadow:0 5px 16px rgba(0,0,0,.4);}
.win-badge svg{width:11px;height:11px;}
/* Retailer brand mark (same logos the DropX app uses), sized to fill the card. The photo panel
   goes to a clean light ground (not the old coloured gradient) so every logo reads — Target red,
   Walmart blue, Costco/Pokémon white-ground lockups — with no chip/overlay behind it. */
.win-store{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:12% 15%;background:none;box-shadow:none;}
/* position:static is REQUIRED — it overrides the `.win-photo img{position:absolute;inset:0}`
   cover rule that would otherwise pin the logo to the top-left instead of flex-centering it. */
.win-store .win-logo{position:static;display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.16));}
.win figcaption{padding:14px 16px 16px;border-top:1px solid var(--line);}
.win figcaption b{display:block;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1.25;}
.win figcaption small{display:block;margin-top:5px;font-family:var(--font-body);font-size:12.5px;font-weight:500;letter-spacing:.1px;color:var(--muted-2);}
/* Scroll by EXACTLY one unique set = 6 cards × (300px card + 20px gap) = 1920px, then the loop
   restarts on an identical frame (the 2nd/3rd copies sit exactly one set behind → no visible jump).
   The DOM holds THREE copies so, even on a wide/ultrawide monitor, there's always a full set of
   buffer cards filling the viewport as the first set scrolls off — no empty gap before it loops.
   NOTE: if the card width (300px) or gap (20px) or the unique-card count (6) changes, update -1920px
   to count × (width + gap). */
@keyframes winScroll{to{transform:translateX(-1920px);}}

/* Real platform screenshot slots (drop real images in; shows a labeled placeholder until then) */
.app-shot{position:relative;margin-top:20px;border-radius:var(--radius-sm);border:1px solid var(--line);overflow:hidden;background:var(--bg-2);height:clamp(150px,18vw,196px);}
.app-shot img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block;}
/* full-page variant: show the entire screenshot, no crop */
.app-shot-full{height:auto;}
.app-shot-full img{position:relative;width:100%;height:auto;object-fit:contain;object-position:center;}
.app-shot .app-shot-ph{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 12px,transparent 12px 24px),var(--bg-2);}
.app-shot.is-empty img{display:none;}
.app-shot.is-empty .app-shot-ph{display:flex;}
.app-shot-ph .ph-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(212,251,92,.12);border:1px solid rgba(212,251,92,.24);color:var(--accent);}
.app-shot-ph .ph-icon svg{width:19px;height:19px;}
.app-shot-ph b{font-family:var(--font-display);font-weight:700;font-size:15px;}
.app-shot-ph small{font-family:var(--font-mono);font-size:11px;color:var(--muted-2);letter-spacing:.2px;}
/* Phone: the full desktop-app screenshot is unreadable squeezed to phone width.
   Render it at a legible size and let the user swipe horizontally to explore.
   It scrolls INSIDE its own box (overflow-x on .app-shot-full only), so it never
   creates page-level horizontal scroll. Tablets keep the fit-to-width contain. */
@media (max-width:640px){
  .app-shot-full{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;scrollbar-color:var(--accent) rgba(255,255,255,.06);}
  .app-shot-full img{width:820px;min-width:820px;max-width:none;}
  .app-shot-full::-webkit-scrollbar{height:6px;}
  .app-shot-full::-webkit-scrollbar-thumb{background:var(--accent);border-radius:6px;}
  .app-shot-full::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:6px;}
}


/* ripple + click pop */
.primary-button,.secondary-button,.ghost-button,.faq-q,#copySupportButton,.auth-links button{position:relative;overflow:hidden;}
.ripple{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);pointer-events:none;background:currentColor;opacity:.28;animation:ripple .6s var(--ease) forwards;mix-blend-mode:overlay;}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0;}}

/* animations */
@keyframes sweep{to{transform:scaleX(1);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes scan{to{transform:rotate(360deg);}}
@keyframes cornerPulse{50%{opacity:.35;}}
@keyframes lockFlash{0%,96%,100%{filter:none;}92%{filter:drop-shadow(0 0 6px var(--accent));}}
@keyframes reticleTrack{0%{transform:translate(0,0) scale(1);}22%{transform:translate(3.5%,-2.5%) scale(1.015);}46%{transform:translate(-3%,2%) scale(.99);}70%{transform:translate(2%,3%) scale(1.01);}100%{transform:translate(0,0) scale(1);}}
@keyframes orbTrack{0%{transform:translate(0,0);}22%{transform:translate(2.4%,-1.8%);}46%{transform:translate(-2%,1.4%);}70%{transform:translate(1.4%,2%);}100%{transform:translate(0,0);}}

/* reveal — re-triggers on scroll (hud.js toggles .in on enter/leave, both directions) */
[data-reveal]{opacity:0;transform:translateY(40px) scale(.985);transition:opacity .85s var(--ease),transform .85s var(--ease);}
[data-reveal].in{opacity:1;transform:none;}
[data-reveal-delay="1"]{transition-delay:.08s;}
[data-reveal-delay="2"]{transition-delay:.16s;}
[data-reveal-delay="3"]{transition-delay:.24s;}
[data-reveal-delay="4"]{transition-delay:.32s;}
[data-reveal-delay="5"]{transition-delay:.4s;}

/* ============ Auth action page (Firebase reset/verify landing) ============ */
.authx{min-height:100vh;display:flex;flex-direction:column;}
.authx-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px var(--pad);}
.authx-top .topbar-actions{display:flex;gap:10px;}
.authx-main{position:relative;z-index:2;flex:1;display:grid;place-items:center;padding:clamp(16px,4vw,40px) var(--pad) clamp(40px,8vw,80px);}
.authx-card{width:min(560px,100%);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:clamp(26px,4vw,40px);box-shadow:var(--shadow);position:relative;overflow:hidden;}
.authx-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--violet));}
.authx-head{text-align:center;}
.authx-head .eyebrow{justify-content:center;margin-bottom:10px;}
.authx-badgerow{display:flex;justify-content:center;margin-bottom:6px;}
.authx-logo{width:60px;height:84px;margin:6px auto 10px;}
.authx-logo .dropx-drip{width:60px;height:84px;}
.authx-card h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.06;font-size:clamp(24px,3.4vw,34px);}
.authx-msg{color:var(--muted);font-size:15px;line-height:1.55;margin-top:12px;max-width:420px;margin-inline:auto;}
.authx-panel{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);}
.authx-state{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;}
.authx-email{font-family:var(--font-mono);font-size:13px;color:var(--muted);word-break:break-all;}
.authx-form{margin-top:22px;display:flex;flex-direction:column;gap:14px;}
.authx-form .field{margin-bottom:0;}
.authx-actions{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap;}

/* ============ Sign-in page ============ */
.signin-card{max-width:460px;}
.signin-form{margin-top:24px;display:flex;flex-direction:column;gap:14px;}
.signin-form .field{margin-bottom:0;}
.signin-form .btn-block{margin-top:6px;}
.signin-links{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;margin-top:6px;font-size:14px;}
.signin-links button{color:var(--muted);font-size:14px;}
.signin-links button:hover{color:var(--accent);}
.signin-sep{color:var(--muted-2);}
.signin-sep a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
/* Signed-in users must never see "Sign in" / "Create an account" cross-links — hide the whole
   sep line on signin/signup/reset when signed in (renderWebsiteSession sets body.nav-signed-in). */
body.nav-signed-in .signin-sep{display:none;}

/* ============ Dashboard ============ */
.dash-main{position:relative;z-index:1;padding-top:clamp(38px,6vw,72px);padding-bottom:clamp(60px,10vw,120px);}
.dash-hero{margin-bottom:clamp(22px,3vw,32px);}
.dash-hero .eyebrow{margin-bottom:12px;}
.dash-hero h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1;font-size:clamp(32px,5vw,50px);}
.dash-sub{margin-top:14px;color:var(--muted);font-size:clamp(15px,1.5vw,17px);}
.dash-email{color:var(--accent);font-weight:600;font-family:var(--font-mono);font-size:.9em;overflow-wrap:anywhere;}
.dash-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:start;}
.dash-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,3vw,32px);position:relative;transition:border-color .32s var(--ease),box-shadow .32s var(--ease);}
/* Large cards: border/shadow only — no lift, so a card holding a CTA never shifts under the cursor. */
.dash-card:hover{border-color:var(--line-2);box-shadow:var(--shadow);}
/* side cards get a lime top-edge that draws in on hover */
.dash-card:not(.dash-card-main)::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:linear-gradient(90deg,var(--accent),var(--violet));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);opacity:.85;}
.dash-card:not(.dash-card-main):hover::after{transform:scaleX(1);}
.dash-card-main{border-color:var(--line-2);background:linear-gradient(180deg,var(--surface-2),var(--surface));overflow:hidden;}
.dash-card-main:hover{border-color:rgba(212,251,92,.3);}
.dash-card-main::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--violet));}
.dash-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:22px;}
.dash-card-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.01em;}
.dash-card h3{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em;}
.dash-card-sub{color:var(--muted);font-size:14px;margin:6px 0 18px;}
.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
.status-tile{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:15px 17px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;transition:border-color .28s var(--ease),background .28s var(--ease),transform .28s var(--ease);}
.status-tile:hover{border-color:var(--line-2);background:var(--surface-2);transform:translateY(-2px);}
.status-tile .st-k{font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);}
.status-tile .st-plain{font-size:14px;font-weight:600;color:var(--ink);}
.dash-detail{color:#c6cbd4;font-size:15px;line-height:1.6;margin-bottom:14px;}
.dash-actions{margin:16px 0 4px;}
.dash-actions .primary-button{width:100%;}
.dash-license{margin-top:20px;}
.dash-license-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.dash-side{display:flex;flex-direction:column;gap:18px;}
.dash-links{display:flex;flex-direction:column;gap:10px;}
.dash-link-btn{justify-content:flex-start;width:100%;}
.dash-link-btn.danger{color:var(--danger);}
/* ===== developed multi-section dashboard layout — sections run left-to-right, wrap down ===== */
.dash-row{display:grid;gap:22px;align-items:start;margin-bottom:22px;}
.dash-row-primary{grid-template-columns:1.6fr 1fr;}
.dash-row-tri{grid-template-columns:repeat(3,1fr);}
/* Section eyebrow — small mono label that sits ABOVE the title (full-width in the flex head). */
.dash-eyebrow{flex-basis:100%;width:100%;display:block;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:2px;}
.dash-card-main .dash-eyebrow{color:var(--accent);}
.dash-security-card .dash-card-head{margin-bottom:14px;}
.dash-security-hint{margin-top:14px;font-size:13px;color:var(--muted-2);line-height:1.5;}
/* Signed in -> the license box is visible, so the "sign in to manage" hint is redundant. */
#licenseActions:not(.hidden) ~ .dash-security-hint{display:none;}
/* Reset HWID + Resend verification read as an equal, highlighted pair. */
.dash-hl-btn{flex:1 1 150px;justify-content:center;}
@media (max-width:1040px){.dash-row-tri{grid-template-columns:1fr;}}
@media (max-width:900px){.dash-row-primary{grid-template-columns:1fr;}}
.dash-link-btn.danger:hover{color:#ff8078;border-color:rgba(255,90,82,.4);}

/* ===== App-style left rail + switchable panels ===== */
.dash-shell{display:grid;grid-template-columns:252px 1fr;gap:26px;align-items:start;}
.dash-rail{position:sticky;top:88px;display:flex;flex-direction:column;gap:5px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);}
.dash-rail-label{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);padding:4px 12px 9px;}
.dnav{display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--muted);font-family:var(--font-body);font-size:14.5px;font-weight:600;text-align:left;cursor:pointer;position:relative;transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);}
.dnav:hover{color:var(--ink);background:var(--surface-2);}
.dnav .dnav-ic{flex:none;width:20px;height:20px;display:grid;place-items:center;color:currentColor;}
.dnav .dnav-ic svg{width:19px;height:19px;}
.dnav.active{color:var(--ink);background:var(--surface-2);border-color:var(--line-2);}
.dnav.active::before{content:"";position:absolute;left:0;top:calc(50% - 11px);width:3px;height:22px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--accent),var(--violet));}
.dnav.active .dnav-ic{color:var(--accent);}
.dash-panels{min-width:0;}
.dash-panel{display:none;}
.dash-panel.active{display:block;animation:dashPanelIn .42s var(--ease);}
@keyframes dashPanelIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.dash-panel .dash-row{margin-bottom:0;}
.dash-row-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
@media (max-width:1040px){.dash-row-2{grid-template-columns:1fr;}}
@media (max-width:860px){
  .dash-shell{grid-template-columns:1fr;gap:16px;}
  .dash-rail{position:static;top:auto;flex-direction:row;overflow-x:auto;padding:8px;gap:6px;-webkit-overflow-scrolling:touch;}
  .dash-rail-label{display:none;}
  .dnav{white-space:nowrap;flex:0 0 auto;padding:10px 14px;}
  .dnav.active::before{left:8px;right:8px;top:auto;bottom:0;width:auto;height:3px;border-radius:3px 3px 0 0;}
}

/* ===== System status console (signature) ===== */
.sys-status{position:relative;display:flex;align-items:center;gap:clamp(16px,2.6vw,28px);margin-bottom:22px;padding:clamp(20px,2.7vw,30px) clamp(22px,3vw,34px);border-radius:var(--radius-lg);border:1px solid var(--line-2);background:linear-gradient(120deg,var(--surface-2),var(--surface) 62%);overflow:hidden;transition:border-color .35s var(--ease),box-shadow .35s var(--ease);}
.sys-status::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);background:radial-gradient(520px 200px at 12% -30%,var(--accent-glow),transparent 70%);}
.sys-status[data-state="online"]{border-color:rgba(87,217,138,.34);box-shadow:0 0 0 1px rgba(87,217,138,.12) inset,0 24px 60px -34px rgba(87,217,138,.4);}
.sys-status[data-state="online"]::before{opacity:.5;background:radial-gradient(520px 200px at 12% -30%,rgba(87,217,138,.22),transparent 70%);}
.sys-status[data-state="pending"]{border-color:rgba(255,207,107,.3);}
.sys-status:hover{box-shadow:var(--shadow);}
.sys-beacon{position:relative;flex:none;width:52px;height:52px;display:grid;place-items:center;}
.sys-core{position:relative;z-index:2;width:15px;height:15px;border-radius:50%;background:var(--muted-2);transition:background .3s var(--ease),box-shadow .3s var(--ease);}
.sys-status[data-state="online"] .sys-core{background:var(--ok);box-shadow:0 0 14px var(--ok);animation:sysBreathe 2.6s ease-in-out infinite;}
.sys-status[data-state="pending"] .sys-core{background:var(--warn);box-shadow:0 0 12px rgba(255,207,107,.7);}
.sys-beacon::before,.sys-beacon::after{content:"";position:absolute;inset:8px;border-radius:50%;border:1.5px solid var(--ok);opacity:0;}
.sys-status[data-state="online"] .sys-beacon::before{animation:sysPing 2.6s cubic-bezier(.2,.7,.3,1) infinite;}
.sys-status[data-state="online"] .sys-beacon::after{animation:sysPing 2.6s cubic-bezier(.2,.7,.3,1) infinite;animation-delay:1.3s;}
.sys-copy{flex:1 1 auto;min-width:0;}
.sys-headline{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.05;font-size:clamp(24px,3.4vw,36px);}
.sys-sub{margin-top:5px;color:var(--muted);font-size:clamp(14px,1.4vw,15.5px);}
.sys-meta{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right;}
.sys-meta-k{font-family:var(--font-mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);}
@keyframes sysBreathe{0%,100%{transform:scale(1);}50%{transform:scale(1.28);}}
@keyframes sysPing{0%{transform:scale(.45);opacity:.65;}80%,100%{transform:scale(1.7);opacity:0;}}

/* ===== Feature status grid ===== */
.feat-head{margin:4px 0 14px;}
.feat-eyebrow{display:inline-block;margin:0 0 8px;}
.feat-title{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2vw,22px);letter-spacing:-.01em;color:var(--ink);}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px;}
.feat-tile{display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease);}
.feat-tile:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 16px 34px -24px rgba(0,0,0,.75);}
.feat-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--muted-2);transition:background .3s var(--ease),box-shadow .3s var(--ease);}
/* Licensed: dots are statically lit — the console beacon carries the page's only pulse. */
.feat-grid.is-online .feat-dot{background:var(--ok);box-shadow:0 0 10px var(--ok);}
.feat-body{flex:1 1 auto;min-width:0;}
.feat-body h3{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.01em;}
.feat-body p{margin-top:2px;color:var(--muted);font-size:12.5px;line-height:1.35;}
.feat-state{flex:none;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);padding:4px 9px;border-radius:999px;border:1px solid var(--line);background:var(--bg-2);transition:color .3s var(--ease),border-color .3s var(--ease);}
.feat-grid.is-online .feat-state{color:var(--muted);border-color:var(--line-2);}

@media (max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.feat-grid{grid-template-columns:1fr;}}
@media (max-width:380px){.status-grid{grid-template-columns:1fr;}}
@media (max-width:640px){
  .sys-status{flex-wrap:wrap;gap:16px;}
  .sys-meta{flex-direction:row;align-items:center;width:100%;justify-content:space-between;text-align:left;}
}
@media (prefers-reduced-motion:reduce){
  .sys-status[data-state="online"] .sys-core{animation:none;}
  .sys-beacon::before,.sys-beacon::after{animation:none!important;}
  .status-tile:hover,.feat-tile:hover{transform:none;}
  .dash-hero,.dash-grid{animation:none!important;}
  /* honor reduce for the always-on nav dot pulse only. The scroll-reveal pop is a core part of the
     motion-forward brand and runs regardless of reduce-motion BY DESIGN (see the NOTE below) — do NOT
     re-add a `[data-reveal]{...!important}` kill here; that flattened every reveal site-wide when the
     OS reduce-motion flag was on ("content just shows, no pop"). */
  #siteTopbar .availability::before{animation:none!important;}
}
@media (max-width:900px){.dash-grid{grid-template-columns:1fr;}}

/* responsive */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{max-width:380px;margin:8px auto 0;}
  .hero-chip.c1{left:0;}.hero-chip.c2{right:0;}
  .feature-grid{grid-template-columns:1fr 1fr;}
  .feature-span{grid-column:span 2;}
  .buy-grid{grid-template-columns:1fr;}
  .faq-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
  .stat-row{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .nav-links{display:none;}
  .nav-sess{display:none;}
  .feature-grid{grid-template-columns:1fr;}
  .feature-span{grid-column:span 1;}
  .footer-top{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:1fr 1fr;}
  .auth-actions{flex-direction:column;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .primary-button,.hero-cta .secondary-button{width:100%;}
}

/* ===== mobile navigation drawer (hamburger built by hud.js from the existing nav) ===== */
/* burger is the collapsed-nav control — only shown <=980 (the media query below).
   On desktop the full .nav-links are present, so the burger is hidden (was showing
   at every width and eating ~50px, which pushed the signed-in Sign out / Get DropX
   off the right edge). */
.nav-burger{display:inline-flex;width:42px;height:42px;border-radius:11px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;}
.nav-burger svg{width:21px;height:21px;}
.mobile-nav{position:fixed;inset:0;z-index:300;background:rgba(6,7,9,.72);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .28s var(--ease);}
.mobile-nav.open{opacity:1;pointer-events:auto;}
.mobile-nav-panel{position:absolute;top:0;right:0;width:min(340px,88vw);height:100%;background:linear-gradient(180deg,var(--surface-2),var(--surface));border-left:1px solid var(--line-2);box-shadow:var(--shadow);padding:20px 18px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:5px;transform:translateX(102%);transition:transform .32s var(--ease);overflow-y:auto;-webkit-overflow-scrolling:touch;}
.mobile-nav.open .mobile-nav-panel{transform:translateX(0);}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.mobile-nav-head .mn-title{font-family:var(--font-mono);font-size:12px;letter-spacing:.5px;color:var(--accent-dim);text-transform:uppercase;}
.mobile-nav-close{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;}
.mobile-nav-close svg{width:16px;height:16px;}
.mobile-nav .mn-link{display:flex;align-items:center;gap:11px;padding:14px 15px;border-radius:12px;font-family:var(--font-body);font-size:16px;font-weight:600;color:var(--ink);background:transparent;border:1px solid transparent;text-align:left;width:100%;cursor:pointer;}
.mobile-nav .mn-link:hover,.mobile-nav .mn-link:active{background:var(--surface);border-color:var(--line);color:var(--accent);}
.mobile-nav .mn-primary{margin-top:12px;justify-content:center;background:var(--accent);color:#0a0a0b;font-weight:800;border-radius:12px;}
.mobile-nav .mn-primary:hover,.mobile-nav .mn-primary:active{background:var(--accent);color:#0a0a0b;filter:brightness(1.05);}
.mobile-nav .mn-ghost{justify-content:center;border-color:var(--line-2);background:var(--surface);}
.mobile-nav .mn-signout{color:var(--danger);}
.mobile-nav .mn-signout:hover,.mobile-nav .mn-signout:active{color:#ff8078;border-color:rgba(255,90,82,.4);}
.mobile-nav .mn-status{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12px;color:var(--muted-2);}
.mobile-nav .mn-status .pip{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
/* Slim the desktop nav on laptops so it never clips: drop the session-status pill.
   1340 (was 1180) — the session pill is wide; only show it when the bar has real room,
   so Sign out / Get DropX are never pushed off the right edge below that. */
/* ===== Pop the top-nav items IN/OUT as breakpoints reveal/hide them, instead of a hard
   display:none snap. transition-behavior:allow-discrete defers the display change until the
   scale+fade finishes (pop OUT); @starting-style provides the entry so they pop back IN on the way
   up. Old browsers just show/hide instantly (graceful degradation). ===== */
#siteTopbar .nav-links,
#siteTopbar .nav-status,
#siteTopbar #headerDashboardButton{
  transition:opacity .3s ease,transform .36s cubic-bezier(.2,.86,.26,1.3),display .36s;
  transition-behavior:allow-discrete;transform-origin:center;}
@starting-style{
  #siteTopbar .nav-links,#siteTopbar .nav-status,#siteTopbar #headerDashboardButton{opacity:0;transform:scale(.7);}}
@media (max-width:1340px){ #siteTopbar .nav-status{display:none;opacity:0;transform:scale(.7);} }
/* Session pill is only meaningful signed IN — signed out it just repeats "Sign in required",
   which the Create account + Sign in buttons already say. Hide it signed-out at ALL widths to
   free real room in the crowded signed-out bar (Create + Sign in + Download). */
body:not(.nav-signed-in) #siteTopbar .nav-status{display:none;}
/* Signed-in: drop what a logged-in customer doesn't need — the Download primary (they can grab it
   from the dashboard/guide), the WIN badge (decorative), AND Create account (they already have an
   account). The Create-account hide here is CSS belt-and-suspenders on top of the JS .hidden toggle,
   so a signed-in user never sees it — including when the bar is condensed. */
body.nav-signed-in #siteTopbar .primary-button,
body.nav-signed-in #siteTopbar .nav-os,
body.nav-signed-in #siteTopbar #headerCreateAccountButton{display:none;}
/* "Create account" (signed-out only) is now the PRIMARY signed-out CTA — it stays in the top bar
   at EVERY width and never falls out, so it needs no pop/discrete-display animation. When signed
   in, JS adds .hidden (display:none!important) which hides it. As the bar narrows, lower-priority
   items collapse into the burger drawer instead of clipping — Sign in first, then Download (both
   already live in the drawer). See the priority-collapse rules below. */
#siteTopbar #headerCreateAccountButton{white-space:nowrap;flex-shrink:0;}
/* Signed-in: the pricing card's "Create your account" button + the "New to DropX? Create a
   free account first … Already have one? Sign in" helper are for signed-out visitors only —
   a logged-in user already has an account, so drop both. */
body.nav-signed-in #planCreateAccountLink,
body.nav-signed-in .price-alt{display:none;}
/* Signed-in "Your account" card: it's a management panel, not a sign-in form. Hide the
   email/username + password fields and the Sign in / Create account actions; swap the intro
   copy for the signed-in line. The license-box (Account / Auth state / license detail /
   Reset HWID) stays and shows real status. */
body.nav-signed-in #account-access .field,
body.nav-signed-in #account-access .auth-actions,
body.nav-signed-in #account-access .sub-signedout{display:none;}
body:not(.nav-signed-in) #account-access .sub-signedin,
body:not(.nav-signed-in) #account-access #accountDashboardLink{display:none;}
/* Signed-in: promote the management actions to full, poppy buttons (like the rest of the
   site) instead of the small text chips shown to signed-out visitors. */
body.nav-signed-in #account-access .auth-links{flex-direction:column;gap:10px;margin-top:6px;}
body.nav-signed-in #account-access .auth-links>*{width:100%;font-family:var(--font-body);
  font-size:15px;font-weight:700;letter-spacing:0;padding:13px 18px;border-radius:12px;
  text-align:center;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);
  transition:transform .16s var(--ease),border-color .16s,background .16s,color .16s,box-shadow .16s;}
body.nav-signed-in #account-access .auth-links>*:hover{transform:translateY(-2px);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.85);border-color:var(--line-2);}
body.nav-signed-in #account-access #accountDashboardLink{background:var(--accent);
  color:var(--accent-ink);border-color:var(--accent);}
body.nav-signed-in #account-access #accountDashboardLink:hover{box-shadow:0 0 26px -4px var(--accent-glow);}
body.nav-signed-in #account-access #websiteResetPasswordButton:hover{color:var(--accent);border-color:rgba(212,251,92,.4);}
body.nav-signed-in #account-access #signOutWebsiteButton{color:var(--danger);border-color:rgba(255,90,82,.4);}
body.nav-signed-in #account-access #signOutWebsiteButton:hover{color:#ff8078;border-color:rgba(255,90,82,.65);}
/* Reset HWID (in the license box) — also full-width + prominent when signed in. */
body.nav-signed-in #account-access #licenseActions{margin-top:14px;}
body.nav-signed-in #account-access #websiteResetHwidButton{width:100%;padding:12px 18px;font-size:14px;}
/* Collapse the full desktop nav (brand + links + Create + Sign in + Download) to the burger drawer
   below 1120px. Raised from 980 so the full nav only shows with real breathing room — this ALSO
   kills the mid-resize glitch where the fading nav-links briefly reserved space and overlapped the
   burger + Download before the layout settled. In burger mode Sign in moves to the drawer; Create
   account (signed out) / Sign out (signed in) is the single compact auth control kept by the burger. */
@media (max-width:1120px){
  .nav-burger{display:inline-flex;}
  #siteTopbar #hideHeaderButton{display:none;}
  #siteTopbar .nav-links,#siteTopbar .nav-status,#siteTopbar #headerDashboardButton{display:none;opacity:0;transform:scale(.7);}
  #siteTopbar #headerSignInButton{display:none;}
  #siteTopbar #headerSignOutButton,#siteTopbar #headerCreateAccountButton{padding:8px 12px;font-size:13px;white-space:nowrap;}
  #siteTopbar .nav-inner{gap:10px;flex-wrap:nowrap;min-width:0;}
  #siteTopbar .nav-actions{gap:8px;margin-left:auto;min-width:0;flex-shrink:0;}
  #siteTopbar .primary-button{padding:9px 14px;font-size:13.5px;white-space:nowrap;}
  #siteTopbar .brand{flex-shrink:0;}
  #siteTopbar .nav-spacer{display:none;}
}
/* Below 560px the Download button also hands off to the drawer (it already carries "Download DropX"),
   leaving a clean brand + Create account + burger. Sign in is already in the drawer below 1120px, so
   from here down nothing but Create + brand + burger competes for space — no clipping at any width. */
@media (max-width:560px){ #siteTopbar .primary-button{display:none;} }
/* Ultra-narrow (small phones / very thin windows): tighten spacing + button padding so
   brand + Create account + burger all stay on-screen — nothing pushed off the right. */
@media (max-width:430px){
  #siteTopbar .nav-inner{gap:7px;}
  #siteTopbar .nav-actions{gap:6px;}
  #siteTopbar #headerSignInButton,#siteTopbar #headerSignOutButton,#siteTopbar #headerCreateAccountButton{padding:7px 9px;font-size:12.5px;}
  #siteTopbar .primary-button{padding:8px 10px;font-size:12.5px;}
  #siteTopbar .nav-burger{width:38px;height:38px;}
}
/* Very small phones (~320px): shrink the wordmark + squeeze gaps so Sign in + Get DropX
   + burger still fit beside the logo without anything clipping off the right edge. */
@media (max-width:360px){
  #siteTopbar .brand-word{font-size:18px;}
  #siteTopbar .nav-inner{gap:5px;}
  #siteTopbar .nav-actions{gap:4px;}
  #siteTopbar #headerSignInButton,#siteTopbar #headerSignOutButton,#siteTopbar #headerCreateAccountButton{padding:6px 7px;font-size:11.5px;}
  #siteTopbar .primary-button{padding:6px 8px;font-size:11.5px;}
  #siteTopbar .nav-burger{width:36px;height:36px;}
}

/* NOTE: DropX is a motion-forward brand — ALL motion (target, particles, marquee,
   ambient AND the scroll-reveal pop) runs regardless of the OS reduce-motion flag by
   design. hud.js adds .in to every reveal element that enters the viewport (with a
   no-IntersectionObserver fallback that reveals everything), so content never gets
   stuck hidden even though we intentionally do not honor prefers-reduced-motion here. */

/* ============================================================
   Icon micro-motion — every card icon has life (idle + hover).
   Thematic per-icon via :has()/[d] matching, so it stays correct
   no matter what order the cards sit in on each page.
   ============================================================ */
.f-icon,.how-ic,.why-ic{transition:transform .32s var(--ease),background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);}
.f-icon svg,.how-ic svg,.why-ic svg,.guide-note-band .ni svg{transform-box:fill-box;transform-origin:center;will-change:transform;}
/* baseline: a gentle breathe so nothing is ever static */
@keyframes icBreathe{0%,100%{transform:scale(1);}50%{transform:scale(1.09);}}
.f-icon svg,.how-ic svg,.why-ic svg,.guide-note-band .ni svg{animation:icBreathe 4.6s var(--ease) infinite;}
/* hover: pop + brighten the icon chip */
.card:hover .f-icon,.how-cell:hover .how-ic,.why-cell:hover .why-ic{transform:translateY(-3px) scale(1.07);background:rgba(212,251,92,.2);box-shadow:0 12px 26px -12px var(--accent-glow),0 0 0 1px rgba(212,251,92,.35);}
.why-cell:hover .why-ic{background:rgba(139,127,255,.2);box-shadow:0 12px 26px -12px rgba(139,127,255,.5),0 0 0 1px rgba(139,127,255,.4);}

/* — bell (Discord / Alert): rings — */
.f-icon:has(path[d^="M12 3a6"]) svg,.how-ic:has(path[d^="M12 3a6"]) svg{transform-origin:50% 12%;animation:icBell 3.2s var(--ease) infinite;}
@keyframes icBell{0%,58%,100%{transform:rotate(0);}64%{transform:rotate(12deg);}72%{transform:rotate(-10deg);}80%{transform:rotate(7deg);}88%{transform:rotate(-3deg);}}
/* — target / bullseye (Watch): radar breathe + pinging centre — */
.f-icon:has(circle[r="4.6"]) svg,.how-ic:has(circle[r="4.6"]) svg{animation:icTarget 3.2s var(--ease) infinite;}
@keyframes icTarget{0%,100%{transform:scale(1);}50%{transform:scale(1.13);}}
.f-icon:has(circle[r="4.6"]) circle[r="1.3"],.how-ic:has(circle[r="4.6"]) circle[r="1.3"]{transform-box:fill-box;transform-origin:center;animation:icPing 2s ease-out infinite;}
@keyframes icPing{0%{transform:scale(1);opacity:1;}55%{transform:scale(2.6);opacity:.15;}100%{transform:scale(1);opacity:1;}}
/* — clock / timer: the hand sweeps — */
.f-icon:has(path[d="M12 7v5l3.5 2"]) svg,.why-ic:has(path[d="M12 7v5l3.5 2"]) svg{animation:none;}
.f-icon:has(path[d="M12 7v5l3.5 2"]) path[d="M12 7v5l3.5 2"],.why-ic:has(path[d="M12 7v5l3.5 2"]) path[d="M12 7v5l3.5 2"]{transform-box:view-box;transform-origin:12px 12px;animation:icSweep 5.5s linear infinite;}
@keyframes icSweep{to{transform:rotate(360deg);}}
/* — trash (Costco / Playbooks): lid shivers + lifts — */
.f-icon:has(path[d^="M4 7h16"]) svg,.why-ic:has(path[d^="M4 7h16"]) svg{transform-origin:50% 40%;animation:icTrash 3.4s var(--ease) infinite;}
@keyframes icTrash{0%,70%,100%{transform:translateY(0) rotate(0);}78%{transform:translateY(-2px) rotate(-5deg);}86%{transform:translateY(-1px) rotate(4deg);}}
/* — desktop / monitor (Best Buy · Local · Mail · Control panel body): glimmer bob — */
.f-icon:has(path[d^="M4 6h16v9"]) svg,.why-ic:has(rect[x="3"][y="4"][width="18"][height="13"]) svg,.f-icon:has(path[d^="M4 7l8 6"]) svg{animation:icBob 3.6s var(--ease) infinite;}
@keyframes icBob{0%,100%{transform:translateY(0);filter:none;}50%{transform:translateY(-2px);filter:drop-shadow(0 0 5px var(--accent-glow));}}
/* — Pokéball (index) & Pokémon Center (guide): wobble — */
.f-icon:has(path[d="M3 12h5.4M15.6 12H21"]) svg,.f-icon:has(path[d^="M12 4a5 5"]) svg{animation:icWobble 3.4s var(--ease) infinite;}
@keyframes icWobble{0%,100%{transform:rotate(-8deg);}50%{transform:rotate(8deg);}}
/* — Whatnot booklet / ribbon: page rock — */
.f-icon:has(path[d^="M5 4.5v15"]) svg{transform-origin:50% 0;animation:icRock 3.4s var(--ease) infinite;}
@keyframes icRock{0%,100%{transform:rotate(-5deg);}50%{transform:rotate(5deg);}}
/* — one control center panel: sidebar activity slides — */
.f-icon:has(rect[width="18"][height="16"]) svg{animation:none;}
.f-icon:has(rect[width="18"][height="16"]) path[d="M9 4v16"]{transform-box:view-box;transform-origin:center;animation:icPanel 2.6s var(--ease) infinite;}
@keyframes icPanel{0%,100%{transform:translateX(0);opacity:1;}50%{transform:translateX(2.5px);opacity:.55;}}
/* — lock (Reset HWID / Forgot pass): shackle hops — */
.f-icon:has(rect[y="10"]) svg{transform-origin:50% 70%;animation:icHop 3.2s var(--ease) infinite;}
@keyframes icHop{0%,72%,100%{transform:translateY(0);}82%{transform:translateY(-2.5px);}}
/* — download (Stay current): bounces down — */
.f-icon:has(path[d^="M12 4v9"]) svg{animation:icDown 2.6s var(--ease) infinite;}
@keyframes icDown{0%,55%,100%{transform:translateY(0);}70%{transform:translateY(3px);}85%{transform:translateY(1px);}}

/* — checkmarks everywhere: draw themselves in, on a loop — */
.feat-list .check svg path,
.how-ic:has(path[d="M4 13l5 5L20 6"]) path,
.why-ic:has(path[d="M4 13l5 5L20 6"]) path,
.trust-row svg path[d="M4 13l5 5L20 6"],
.cmp-ic.cmp-yes path,
.guide-badge svg path[d="M9 12l2 2 4-4"]{stroke-dasharray:34;animation:icCheck 3.2s var(--ease) infinite;}
.how-ic:has(path[d="M4 13l5 5L20 6"]) svg,.why-ic:has(path[d="M4 13l5 5L20 6"]) svg{animation:none;}
@keyframes icCheck{0%{stroke-dashoffset:34;}22%{stroke-dashoffset:0;}72%{stroke-dashoffset:0;}90%,100%{stroke-dashoffset:34;}}

/* ============================================================
   Top hotbar: Windows badge + rolling yellow "wave" sheen
   ============================================================ */
#siteTopbar{overflow:hidden;}
#siteTopbar::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 18%,rgba(212,251,92,.09) 38%,rgba(212,251,92,.17) 50%,rgba(212,251,92,.09) 62%,transparent 82%);
  background-size:250% 100%;animation:navWave 5.5s linear infinite;}
/* SEAMLESS loop: the gradient tiles (both edges are transparent, so tiles join invisibly). Shift it
   by EXACTLY one tile so the last frame is identical to the first — no visible stop/restart.
   One tile at 250% bg-size = -166.667% bg-position. The old -250% moved 1.5 tiles, so every loop it
   snapped back half a tile (the "restart" you saw). NOTE: the live paint is the "punchier" override
   further down — it MUST also use 250% bg-size or this one-tile keyframe won't line up. */
@keyframes navWave{to{background-position:-166.667% 0;}}
#siteTopbar .nav-inner{position:relative;z-index:1;}
/* WIN 10/11 badge is hidden in the top bar: the hamburger menu now shows at ALL widths,
   and this decorative badge was the one element that pushed the signed-out row (nav-links
   + Sign in + Get DropX + burger + status) past the 1200px container. The "Built for
   Windows" message still appears in the hero, pricing card, and footer. */
.nav-os{display:none;align-items:center;gap:6px;margin-left:2px;padding:5px 10px;border-radius:8px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--accent);
  background:rgba(212,251,92,.08);border:1px solid rgba(212,251,92,.22);white-space:nowrap;}
.nav-os svg{width:13px;height:13px;flex-shrink:0;transform-box:fill-box;transform-origin:center;animation:icBreathe 4.6s var(--ease) infinite;}

/* ============================================================
   Member-license card: movable (tilt via hud.js) + live/idle state
   The ACTIVE symbol only lights once a license is actually held.
   ============================================================ */
.lc .lc-tag{transition:color .4s var(--ease);}
.lc .lc-tag i{transition:background .4s var(--ease),box-shadow .4s var(--ease),opacity .4s var(--ease);}
/* idle: signed out OR no license → dim, static dot */
.lc:not(.lc-live) .lc-tag{color:var(--muted-2);}
.lc:not(.lc-live) .lc-tag i{background:var(--muted-2);box-shadow:none;opacity:.6;animation:none;}
/* live: licensed → accent + pulsing dot + soft card glow */
.lc.lc-live .lc-tag{color:var(--accent);}
.lc.lc-live .lc-tag i{background:var(--accent);box-shadow:0 0 8px var(--accent);opacity:1;animation:lcPulse 1.6s ease-in-out infinite;}
.lc.lc-live{animation:lcFloat 6s ease-in-out infinite,lcLiveGlow 2.8s ease-in-out infinite;}
@keyframes lcLiveGlow{0%,100%{box-shadow:var(--shadow);}50%{box-shadow:var(--shadow),0 0 28px rgba(212,251,92,.3);}}

/* ============================================================
   Discord background: a literal meteor shower raining to the bottom
   (shared, so the Discord takeover has it on every page)
   ============================================================ */
.dp-meteors{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
/* Each meteor is one rotated streak: the element is the fading TAIL, ::after is the
   bright glowing HEAD at the leading tip. Head leads, tail trails along travel dir.
   Per-meteor vars (--a angle, --s scale, --o opacity, --len tail length) give a real
   shower's depth: some big/bright/near, some small/faint/far. */
/* faint twinkling starfield behind the shower (space depth) */
.dp-meteors::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%,rgba(255,255,255,.8),transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 68%,rgba(199,192,255,.7),transparent 60%),
    radial-gradient(1.4px 1.4px at 46% 12%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1.1px 1.1px at 63% 82%,rgba(199,192,255,.6),transparent 60%),
    radial-gradient(1.7px 1.7px at 78% 34%,rgba(255,255,255,.75),transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 66%,rgba(180,172,255,.65),transparent 60%),
    radial-gradient(1.3px 1.3px at 36% 44%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1.1px 1.1px at 70% 54%,rgba(199,192,255,.55),transparent 60%),
    radial-gradient(1.5px 1.5px at 20% 88%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1.2px 1.2px at 94% 14%,rgba(255,255,255,.6),transparent 60%);
  animation:dpTwinkle 4.5s ease-in-out infinite;}
@keyframes dpTwinkle{0%,100%{opacity:.45;}50%{opacity:.9;}}
/* A meteor = a thin bright NEEDLE streak (the <i>), a soft blurple burning HALO
   (::before) and a hot elongated HEAD spark at the leading tip (::after). Head leads,
   the tail tapers behind it. Blurple (#5865F2) + violet (#8b7bff) = Discord theme. */
/* Each meteor = a round glowing METEOROID head (::after) leading a fiery tapered
   TAIL (the <i>, a blurred triangle) with a soft aura (::before). Fireball look —
   big, circular, glowing — not a thin light streak. Blurple + violet = Discord theme.
   --s scales the whole fireball (head+tail) for near/far depth. */
.dp-meteors i{position:absolute;top:-14%;width:var(--w,16px);height:var(--len,130px);
  transform-origin:50% 100%;clip-path:polygon(50% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,transparent 0%,rgba(88,101,242,.12) 36%,rgba(139,123,255,.5) 72%,rgba(198,188,255,.92) 100%);
  filter:blur(1.4px) drop-shadow(0 0 7px rgba(139,123,255,.6));
  opacity:0;will-change:transform,opacity;animation:dpMeteor linear infinite;}
/* soft fireball aura around the head */
.dp-meteors i::before{content:"";position:absolute;left:50%;bottom:calc(var(--head,16px) * -0.25);
  width:calc(var(--head,16px) * 2.5);height:calc(var(--head,16px) * 2.5);border-radius:50%;transform:translateX(-50%);
  filter:blur(6px);background:radial-gradient(circle,rgba(139,123,255,.5),rgba(88,101,242,.16) 55%,transparent 75%);}
/* the round glowing meteoroid head at the leading tip */
.dp-meteors i::after{content:"";position:absolute;left:50%;bottom:calc(var(--head,16px) * -0.42);
  width:var(--head,16px);height:var(--head,16px);border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(circle at 50% 42%,#ffffff 0%,#ece3ff 26%,#a493ff 58%,rgba(88,101,242,.25) 82%,transparent 100%);
  box-shadow:0 0 12px 4px rgba(205,196,255,.9),0 0 28px 10px rgba(139,123,255,.55),0 0 52px 20px rgba(88,101,242,.32);}
@keyframes dpMeteor{
  0%{transform:rotate(var(--a,30deg)) translateY(-46vh) scale(var(--s,1));opacity:0;}
  6%{opacity:var(--o,1);}
  90%{opacity:var(--o,1);}
  100%{transform:rotate(var(--a,30deg)) translateY(150vh) scale(var(--s,1));opacity:0;}
}
.dp-meteors i:nth-child(1){left:8%;--a:30deg;--s:1.3;--o:1;--len:150px;animation-duration:5.6s;animation-delay:0s;}
.dp-meteors i:nth-child(2){left:20%;--a:34deg;--s:.8;--o:.75;--len:105px;animation-duration:7s;animation-delay:-.9s;}
.dp-meteors i:nth-child(3){left:34%;--a:28deg;--s:1.5;--o:1;--len:170px;animation-duration:4.8s;animation-delay:-2.1s;}
.dp-meteors i:nth-child(4){left:47%;--a:37deg;--s:.65;--o:.55;--len:90px;animation-duration:7.8s;animation-delay:-.5s;}
.dp-meteors i:nth-child(5){left:61%;--a:31deg;--s:1.15;--o:.9;--len:135px;animation-duration:6.2s;animation-delay:-2.8s;}
.dp-meteors i:nth-child(6){left:74%;--a:26deg;--s:.9;--o:.8;--len:118px;animation-duration:5.3s;animation-delay:-1.4s;}
.dp-meteors i:nth-child(7){left:88%;--a:39deg;--s:1.35;--o:1;--len:160px;animation-duration:7.3s;animation-delay:-3.6s;}
.dp-meteors i:nth-child(8){left:14%;--a:33deg;--s:.6;--o:.5;--len:85px;animation-duration:8.3s;animation-delay:-4.3s;}
.dp-meteors i:nth-child(9){left:29%;--a:36deg;--s:1.5;--o:1;--len:178px;animation-duration:5.1s;animation-delay:-5s;}
.dp-meteors i:nth-child(10){left:55%;--a:29deg;--s:.75;--o:.65;--len:100px;animation-duration:6.8s;animation-delay:-5.9s;}
.dp-meteors i:nth-child(11){left:82%;--a:35deg;--s:1.1;--o:.85;--len:130px;animation-duration:5.9s;animation-delay:-2.4s;}
.dp-meteors i:nth-child(12){left:42%;--a:32deg;--s:1.4;--o:1;--len:165px;animation-duration:7.5s;animation-delay:-6.6s;}
.dp-meteors i:nth-child(13){left:4%;--a:27deg;--s:.7;--o:.6;--len:98px;animation-duration:4.8s;animation-delay:-.7s;}
.dp-meteors i:nth-child(14){left:26%;--a:38deg;--s:.95;--o:.8;--len:122px;animation-duration:6.1s;animation-delay:-3s;}
.dp-meteors i:nth-child(15){left:49%;--a:30deg;--s:1.2;--o:.95;--len:145px;animation-duration:5.1s;animation-delay:-1.7s;}
.dp-meteors i:nth-child(16){left:69%;--a:34deg;--s:.65;--o:.55;--len:92px;animation-duration:6.4s;animation-delay:-4s;}
.dp-meteors i:nth-child(17){left:92%;--a:31deg;--s:1.3;--o:1;--len:155px;animation-duration:5s;animation-delay:-1.1s;}
.dp-meteors i:nth-child(18){left:37%;--a:28deg;--s:.85;--o:.7;--len:112px;animation-duration:6.3s;animation-delay:-3.3s;}
.dp-meteors i:nth-child(19){left:11%;--a:40deg;--s:1.15;--o:.9;--len:140px;animation-duration:5.7s;animation-delay:-6s;}
.dp-meteors i:nth-child(20){left:58%;--a:33deg;--s:.7;--o:.6;--len:98px;animation-duration:7.2s;animation-delay:-7s;}
.dp-meteors i:nth-child(21){left:77%;--a:29deg;--s:1.45;--o:1;--len:172px;animation-duration:5.4s;animation-delay:-.3s;}
.dp-meteors i:nth-child(22){left:18%;--a:36deg;--s:.8;--o:.65;--len:108px;animation-duration:6.6s;animation-delay:-2.6s;}
.dp-meteors i:nth-child(23){left:64%;--a:32deg;--s:1.05;--o:.85;--len:128px;animation-duration:4.9s;animation-delay:-4.6s;}
.dp-meteors i:nth-child(24){left:45%;--a:26deg;--s:1.3;--o:1;--len:152px;animation-duration:6.1s;animation-delay:-7.5s;}

/* ============================================================
   MENU POLISH — top hotbar + mobile drawer: hex honeycomb texture,
   yellow wave sheen, techy status readout. Fancy, quality, on-theme.
   ============================================================ */
/* honeycomb texture behind the top bar (layered under the wave + content) */
#siteTopbar::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%23d4fb5c' stroke-opacity='0.14' stroke-width='1'%3E%3Cpath d='M14 0 L27 7.5 L27 22.5 L14 30 L1 22.5 L1 7.5 Z'/%3E%3Cpath d='M14 30 L27 37.5 M14 30 L1 37.5 M14 30 L14 49'/%3E%3C/g%3E%3C/svg%3E");
  background-size:28px 49px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent);mask-image:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent);}
/* punchier yellow wave */
#siteTopbar::before{background:linear-gradient(100deg,transparent 14%,rgba(212,251,92,.12) 36%,rgba(212,251,92,.24) 50%,rgba(212,251,92,.12) 64%,transparent 86%);background-size:250% 100%;animation:navWave 5.5s linear infinite;}
/* the DropX logo + Windows badge float above both layers */
#siteTopbar .brand,#siteTopbar .nav-os{position:relative;z-index:1;}
/* nav links: techy underline + hover lift */
.nav-links a{transition:color .12s ease-out,background .12s ease-out,text-shadow .12s ease-out;}
.nav-links a:hover{text-shadow:0 0 14px rgba(212,251,92,.35);}
/* techy status readout — "Sign in required" reads like a live HUD chip */
#siteTopbar #headerAccountPill{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  border-radius:8px;padding:6px 12px 6px 11px;background:linear-gradient(180deg,rgba(212,251,92,.05),rgba(212,251,92,.02));
  border:1px solid var(--line-2);box-shadow:inset 0 0 0 1px rgba(212,251,92,.05);}
#siteTopbar #headerAccountPill.ready{color:var(--ok);border-color:rgba(87,217,138,.4);box-shadow:0 0 14px -4px rgba(87,217,138,.5);}
/* green flashing dot when signed in (was falling back to the base grey dot) */
#siteTopbar #headerAccountPill.ready::before{background:var(--ok);box-shadow:0 0 8px var(--ok);}
#siteTopbar #headerAccountPill.info{border-color:rgba(255,207,107,.32);color:var(--warn);}
#siteTopbar #headerAccountPill.info::before{background:var(--warn);box-shadow:0 0 7px var(--warn);}
/* burger button: accent tech treatment */
.nav-burger{background:linear-gradient(180deg,var(--surface-2),var(--surface));border-color:var(--line-2);transition:border-color .18s,box-shadow .18s,transform .18s;}
.nav-burger:hover{border-color:var(--accent);box-shadow:0 0 16px -4px var(--accent-glow);color:var(--accent);transform:translateY(-1px);}

/* ---- MOBILE DRAWER: full hex + wave + techy status ---- */
.mobile-nav-panel{position:absolute;overflow:hidden;border-left:1px solid rgba(212,251,92,.25);
  box-shadow:var(--shadow),-24px 0 60px -30px rgba(212,251,92,.3);}
.mobile-nav-panel::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%23d4fb5c' stroke-opacity='0.12' stroke-width='1'%3E%3Cpath d='M14 0 L27 7.5 L27 22.5 L14 30 L1 22.5 L1 7.5 Z'/%3E%3Cpath d='M14 30 L27 37.5 M14 30 L1 37.5 M14 30 L14 49'/%3E%3C/g%3E%3C/svg%3E");
  background-size:34px 60px;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent);}
.mobile-nav-panel::after{content:"";position:absolute;left:0;right:0;top:0;height:100%;z-index:0;pointer-events:none;
  background:linear-gradient(160deg,transparent 30%,rgba(212,251,92,.1) 48%,rgba(212,251,92,.16) 54%,transparent 72%);
  background-size:100% 260%;animation:mnWave 7s linear infinite;}
@keyframes mnWave{to{background-position:0 -260%;}}
.mobile-nav-panel>*{position:relative;z-index:1;}
.mobile-nav-head .mn-title{color:var(--accent);text-shadow:0 0 14px rgba(212,251,92,.4);letter-spacing:.16em;}
.mobile-nav .mn-link{transition:background .16s,border-color .16s,color .16s,transform .16s;}
.mobile-nav .mn-link:hover,.mobile-nav .mn-link:active{box-shadow:0 0 18px -6px var(--accent-glow);transform:translateX(2px);}
/* status readout at the bottom of the drawer — a techy HUD chip, not plain text */
.mobile-nav .mn-status{margin-top:auto;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;
  background:linear-gradient(180deg,rgba(212,251,92,.06),rgba(212,251,92,.02));
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  box-shadow:inset 0 0 20px -12px var(--accent-glow);}
.mobile-nav .mn-status .pip{width:8px;height:8px;box-shadow:0 0 8px currentColor;animation:hudDot 2.2s ease-in-out infinite;}
@keyframes hudDot{0%,100%{opacity:.55;transform:scale(1);}50%{opacity:1;transform:scale(1.3);}}
#siteTopbar .availability::before{animation:hudDot 2.2s ease-in-out infinite;}

/* ===== fancier drawer motion + branded page transition (2026-07-11) ===== */
/* Menu button: springy press + accent-fill feedback when it opens the drawer. */
.nav-burger{transition:border-color .18s,box-shadow .18s,transform .26s cubic-bezier(.34,1.56,.64,1),background .2s,color .2s;}
.nav-burger svg{transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
.nav-burger:active{transform:scale(.88);}
.nav-burger[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:#0a0a0b;box-shadow:0 0 22px -4px var(--accent-glow);}
.nav-burger[aria-expanded="true"] svg{transform:rotate(90deg) scale(1.05);}
/* Drawer: spring the panel in, ramp the blur, and stagger-reveal each item. */
.mobile-nav{transition:opacity .4s var(--ease),backdrop-filter .4s var(--ease);}
/* Panel slides fully in from the right FIRST (translateX 100%->0), links cascade AFTER it settles. */
.mobile-nav-panel{transform-origin:right center;transform:translateX(100%);
  transition:transform .5s cubic-bezier(.22,1,.28,1);}
.mobile-nav.open .mobile-nav-panel{transform:translateX(0);}
/* Links start hidden; their reveal is delayed until the panel has mostly slid in (~.3s base). */
.mobile-nav .mn-link,.mobile-nav .mn-status{opacity:0;transform:translateX(20px);
  transition:opacity .5s ease,transform .55s cubic-bezier(.16,1,.3,1),background .16s,border-color .16s,color .16s,box-shadow .16s;}
.mobile-nav.open .mn-link,.mobile-nav.open .mn-status{opacity:1;transform:translateX(0);}
/* Stagger the ENTRANCE only. transition-delay values map 1:1 to the transition list on
   .mn-link (opacity, transform, background, border-color, color, box-shadow), so the delay
   hits opacity+transform (the cascade) but leaves the hover properties at 0s — the hover
   highlight is instant, not delayed by the item's stagger offset. */
.mobile-nav.open .mobile-nav-panel>*:nth-child(2){transition-delay:.30s,.30s,0s,0s,0s,0s}
.mobile-nav.open .mobile-nav-panel>*:nth-child(3){transition-delay:.37s,.37s,0s,0s,0s,0s}
.mobile-nav.open .mobile-nav-panel>*:nth-child(4){transition-delay:.44s,.44s,0s,0s,0s,0s}
.mobile-nav.open .mobile-nav-panel>*:nth-child(5){transition-delay:.51s,.51s,0s,0s,0s,0s}
.mobile-nav.open .mobile-nav-panel>*:nth-child(6){transition-delay:.58s,.58s,0s,0s,0s,0s}
.mobile-nav.open .mobile-nav-panel>*:nth-child(7){transition-delay:.65s,.65s,0s,0s,0s,0s}
.mobile-nav.open .mobile-nav-panel>*:nth-child(8){transition-delay:.72s,.72s,0s,0s,0s,0s}
.mobile-nav.open .mobile-nav-panel>*:nth-child(9){transition-delay:.79s,.79s,0s,0s,0s,0s}
.mobile-nav.open .mobile-nav-panel>*:nth-child(10){transition-delay:.86s,.86s,0s,0s,0s,0s}
.mobile-nav.open .mobile-nav-panel>*:nth-child(11){transition-delay:.93s,.93s,0s,0s,0s,0s}
.mobile-nav.open .mobile-nav-panel>*:nth-child(12){transition-delay:1s,1s,0s,0s,0s,0s}
.mobile-nav.open .mn-link:hover,.mobile-nav.open .mn-link:active{transform:translateX(3px);}

/* Branded page transition — a modern "redirect" screen: a dark aurora cover with a glass card that
   holds the spinning DropX droplet, a status label and an indeterminate progress bar. */
.page-fade{position:fixed;inset:0;z-index:4000;
  background:radial-gradient(130% 95% at 50% -8%,color-mix(in srgb,var(--accent) 9%,var(--surface-2)),var(--bg) 60%);
  display:grid;place-items:center;opacity:1;pointer-events:auto;transition:opacity .55s ease,visibility .55s;
  /* Pure-CSS failsafe: if site.js never runs (CSP block, network/parse failure, JS disabled), the
     cover auto-reveals the page anyway so it can never trap it. JS adds .in well before 1.9s and
     cancels this; navigation's .leaving also cancels it. */
  animation:pageFadeFailsafe .6s ease 1.9s forwards;}
.page-fade.in,.page-fade.leaving{animation:none;}
.page-fade.in{visibility:hidden;opacity:0;pointer-events:none;}
@keyframes pageFadeFailsafe{to{opacity:0;visibility:hidden;pointer-events:none;}}
.page-fade.leaving{opacity:1;visibility:visible;pointer-events:auto;}
/* soft breathing glow behind the card */
.page-fade::before{content:"";position:absolute;width:min(560px,82vw);height:min(560px,82vw);border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 68%);
  filter:blur(34px);pointer-events:none;animation:pfGlow 4s ease-in-out infinite;}
@keyframes pfGlow{0%,100%{opacity:.32;transform:scale(.93);}50%{opacity:.6;transform:scale(1.05);}}
/* glass card holding the loader */
.pf-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:40px 56px 34px;border-radius:26px;
  background:linear-gradient(168deg,color-mix(in srgb,var(--surface-2) 92%,transparent),color-mix(in srgb,var(--bg) 88%,transparent));
  border:1px solid var(--line-2);
  box-shadow:0 40px 100px -26px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 40px -12px color-mix(in srgb,var(--accent) 22%,transparent);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  /* The drip loader shows ONLY while DEPARTING (.leaving). The arriving page's cover is just a clean
     dark dissolve — so a redirect plays the drop exactly ONCE, never a double on the destination. */
  opacity:0;}
.page-fade.leaving .pf-inner{opacity:1;animation:pfCardIn .5s cubic-bezier(.2,.8,.25,1) both;}
@keyframes pfCardIn{from{opacity:0;transform:translateY(12px) scale(.965);}to{opacity:1;transform:none;}}
/* gradient hairline along the top edge */
.pf-inner::before{content:"";position:absolute;top:0;left:26px;right:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--violet),transparent);opacity:.9;}
/* indeterminate progress bar under the label — it only sweeps while DEPARTING (.leaving). On the
   arriving page the cover just dissolves, so the bar never visibly "restarts" and the whole thing
   reads as one continuous flow. */
.pf-inner::after{content:"";width:200px;height:4px;border-radius:999px;
  background:var(--line-2) linear-gradient(90deg,transparent,var(--accent),transparent) no-repeat;
  background-size:44% 100%;background-position:-45% 0;opacity:0;transition:opacity .35s ease;}
/* Show the bar whenever the cover is up (departing OR arriving) so it doesn't vanish across the page
   swap — the departing and arriving covers stay structurally identical ("nothing changed"). */
.page-fade:not(.in) .pf-inner::after{opacity:1;box-shadow:0 0 14px -2px color-mix(in srgb,var(--accent) 45%,transparent);animation:pfBar 1.4s cubic-bezier(.55,0,.4,1) infinite;}
@keyframes pfBar{0%{background-position:-45% 0;}100%{background-position:145% 0;}}
/* redirect mark = the branded DropX DRIPPER (bottle squeezes -> drop forms -> falls -> splashes),
   deliberately distinct from the success modal's static droplet. A soft accent disc sits behind it,
   and the drip runs a touch quicker than the nav brand so a full cycle reads in the short window. */
.pf-fig{position:relative;display:grid;place-items:center;width:158px;height:158px;margin-bottom:2px;}
.pf-fig::before{content:"";position:absolute;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 66%);
  filter:blur(7px);animation:pfGlow 2.8s ease-in-out infinite;}
.pf-drip{position:relative;z-index:1;width:118px;height:160px;filter:drop-shadow(0 12px 26px var(--accent-glow));}
.pf-drip .dr-bottle,.pf-drip .dr-bulb,.pf-drip .dr-liquid,.pf-drip .dr-x,.pf-drip .dr-fall,
.pf-drip .dr-drop,.pf-drip .dr-neck,.pf-drip .dr-splash,.pf-drip .dr-splash2,.pf-drip .dr-pool{animation-duration:2.8s;}
/* The shared dxPool is a 12.8s STANDING pool (builds up over 4 drops) — wrong for the redirect,
   where ONE drop falls per cover. Give the redirect puddle its own single-drop ripple that is
   invisible until the drop lands (~90% of the fall) and then ripples out + fades. Same 2.8s
   duration as dr-fall, so the ripple fires exactly when the drop hits the pool — never on its own. */
.pf-drip .dr-pool{animation-name:pfPool;}
@keyframes pfPool{
  0%,89%{opacity:0;transform:scaleX(.4) scaleY(.5);}
  91%{opacity:.85;transform:scaleX(.95) scaleY(.72);}
  95%{opacity:.42;transform:scaleX(1.7) scaleY(.44);}
  100%{opacity:0;transform:scaleX(2.25) scaleY(.3);}
}
/* status label — same display font as the modal titles (the old mono look read as "odd"). It
   cross-fades (.pf-swap) when the destination changes mid-flow, so chained redirects morph as one. */
.pf-msg{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:.2px;color:var(--ink);
  transition:opacity .2s ease;min-height:1.2em;text-shadow:0 1px 10px rgba(0,0,0,.5);}
.pf-msg.pf-swap{opacity:0;}
.pf-msg::after{display:inline-block;width:1.1em;text-align:left;vertical-align:bottom;content:"";animation:pfDots 1.5s steps(1,end) infinite;}
@keyframes pfDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
/* the destination content animates IN after the cover clears (so it's not an instant flip). The delay
   lets the page-fade droplet cover dissolve first, then the content settles in. */
.dash-hero{animation:pfContentIn .62s cubic-bezier(.2,.7,.3,1) both;animation-delay:.34s;}
@keyframes pfContentIn{from{opacity:0;transform:translateY(20px) scale(.985);}to{opacity:1;transform:none;}}
/* the sign-in / create-account / reset card DROPS DOWN from the top as the droplet cover fades out. */
.authx-card{animation:authDropIn .7s cubic-bezier(.18,.86,.24,1.06) both;animation-delay:.42s;}
@keyframes authDropIn{0%{opacity:0;transform:translateY(-52px) scale(.982);}55%{opacity:1;}100%{opacity:1;transform:none;}}
/* Content-page crossfade (landing <-> guide). Cheap + smooth: a SINGLE lightweight branded-dark
   overlay (opacity only — no full-page snapshot/transform, so no freeze or jank on the heavy animated
   pages). The cover fades OUT on arrival and fades IN before leaving, and it COVERS the parse gap so
   you never see a raw dark body flash — the whole hop is one continuous branded dip, same both ways.
   Distinct from the account dripper (that cover carries the drip + label + longer timing). */
.pagex{position:fixed;inset:0;z-index:3600;pointer-events:none;
  background:radial-gradient(125% 92% at 50% -6%,color-mix(in srgb,var(--accent) 8%,#0c0d11),#0a0a0b 68%);
  opacity:1;visibility:visible;transition:opacity .32s ease,visibility .32s ease;
  /* Pure-CSS failsafe: if site.js never runs, auto-reveal so the cover can't trap the page. JS adds
     .out well before 1.4s and cancels this; a leaving nav's .in also cancels it. */
  animation:pagexFailsafe .5s ease 1.4s forwards;}
.pagex.out,.pagex.in{animation:none;}
.pagex.out{opacity:0;visibility:hidden;}
.pagex.in{opacity:1;visibility:visible;pointer-events:auto;}
@keyframes pagexFailsafe{to{opacity:0;visibility:hidden;}}
/* a soft accent breath while the cover is up, so the dip reads as intentional, not a dead screen */
.pagex::before{content:"";position:absolute;left:50%;top:42%;width:min(360px,60vw);height:min(360px,60vw);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent),transparent 66%);
  filter:blur(30px);opacity:.6;}

/* ===== Shared: animated CTA eyeballs + Discord logo mark (also inline in index.html; here so the
   guide's final CTA can reuse the exact same look). Driven by hud.js (#ctaEyes) — follow the cursor,
   idle-wander, blink. ===== */
.cta-eyes{display:inline-flex;gap:11px;vertical-align:-7px;margin-left:16px;}
.cta-eyes .eye{position:relative;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 50% 36%,#f2f5f7,#dae1e6 60%,#aab4bb);border:1.5px solid rgba(255,255,255,.12);box-shadow:0 0 0 1px rgba(212,251,92,.13),0 8px 22px rgba(0,0,0,.55),inset 0 -5px 11px rgba(0,0,0,.22),inset 0 3px 7px rgba(255,255,255,.55);overflow:hidden;}
.cta-eyes .eye::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(122deg,transparent 44%,rgba(255,255,255,.28) 50%,transparent 56%);transform:translateX(-45%);animation:eyeGloss 6.5s ease-in-out infinite;pointer-events:none;z-index:3;}
.cta-eyes .eye .iris{position:absolute;top:50%;left:50%;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 42% 34%,rgba(255,255,255,.32),transparent 42%),repeating-radial-gradient(circle at 50% 50%,rgba(0,0,0,.16) 0 1px,transparent 1px 2.6px),radial-gradient(circle at 50% 48%,#bfe071,#8bb43e 46%,#547524 76%,#2b3a12 100%);box-shadow:0 0 5px rgba(150,200,60,.32),inset 0 0 4px rgba(0,0,0,.45);transform:translate(-50%,-50%);transition:transform .13s cubic-bezier(.3,.9,.3,1);will-change:transform;}
.cta-eyes .eye .iris::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#060606,#000);box-shadow:0 0 3px rgba(0,0,0,.6);transform:translate(-50%,-50%);animation:eyeDilate 5.4s ease-in-out infinite;}
.cta-eyes .eye .iris::before{content:"";position:absolute;top:15%;left:20%;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.95);filter:blur(.2px);z-index:2;}
.cta-eyes .eye .lid{position:absolute;inset:-1px;background:linear-gradient(180deg,#252a20,var(--surface-2));transform:translateY(-101%);animation:eyeBlink 5.6s ease-in-out infinite;z-index:4;}
.cta-eyes .eye.e2 .lid{animation-delay:.09s;}
@keyframes eyeBlink{0%,89%,100%{transform:translateY(-101%);}93%{transform:translateY(0);}}
@keyframes eyeDilate{0%,100%{width:9px;height:9px;}46%{width:11.5px;height:11.5px;}72%{width:8px;height:8px;}}
@keyframes eyeGloss{0%,100%{transform:translateX(-45%);}50%{transform:translateX(45%);}}
@media (max-width:560px){.cta-eyes .eye{width:36px;height:36px;}.cta-eyes .eye .iris{width:18px;height:18px;}.cta-eyes{margin-left:10px;gap:8px;}}
/* official Discord logo on the Join button */
.discord-mark{width:22px;height:22px;color:#5865F2;vertical-align:-5px;margin-right:9px;flex-shrink:0;}
a.secondary-button:hover .discord-mark{color:#7c88ff;}
@media (prefers-reduced-motion:reduce){
  /* The sign-in transition (droplet redirect cover -> card drop-in) is a short, branded loading cue.
     We INTENTIONALLY keep its motion even under reduced-motion so it never hard-jumps to the page —
     the whole point is to bridge into the sign-in screen. Do NOT add `.page-fade{display:none}` or
     `animation:none` on .gl-drop / .pf-msg / .authx-card here; that is exactly what hid the animation.
     Broad ambient/marquee motion elsewhere is unaffected by this block either way. */
  /* Drawer keeps its slide even under reduced-motion — it's the primary open/close cue. */
}

.dp-meteor-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}

/* ===== Full-bleed dashboard — fill the screen, stop reading small ===== */
/* Break out of the 1200px .container so the dashboard uses nearly the whole viewport. */
.dash-main{max-width:none;width:100%;padding-left:clamp(24px,4vw,64px);padding-right:clamp(24px,4vw,64px);padding-top:clamp(30px,4vw,56px);}
/* header/topbar spans the same full width so its edges line up with the full-bleed content */
.dash-body #siteTopbar > .container{max-width:none;padding-left:clamp(24px,4vw,64px);padding-right:clamp(24px,4vw,64px);}
.dash-shell{grid-template-columns:320px minmax(0,1fr);gap:clamp(28px,3vw,48px);}
.dash-rail{top:96px;padding:20px;gap:7px;border-radius:22px;}
.dash-rail-label{font-size:11.5px;padding:6px 15px 12px;}
.dnav{padding:17px 19px;font-size:16.5px;gap:15px;border-radius:15px;}
.dnav .dnav-ic{width:24px;height:24px;}
.dnav .dnav-ic svg{width:23px;height:23px;}
.dnav.active::before{height:26px;top:calc(50% - 13px);width:4px;}
.dash-hero{margin-bottom:clamp(28px,3.4vw,42px);}
.dash-hero h1{font-size:clamp(44px,6vw,72px);}
.dash-sub{font-size:clamp(17px,1.7vw,22px);}
/* Panels: cards get taller/roomier so a panel actually fills the space next to the tall rail. */
.dash-panel{min-height:560px;}
.sys-status{padding:clamp(30px,3.4vw,46px) clamp(32px,3.6vw,50px);gap:clamp(20px,3vw,38px);border-radius:22px;}
.sys-beacon{width:64px;height:64px;}
.sys-core{width:18px;height:18px;}
.sys-headline{font-size:clamp(30px,4.2vw,50px);}
.sys-sub{font-size:clamp(15px,1.5vw,17.5px);}
.dash-card{padding:clamp(32px,3.6vw,52px);border-radius:22px;}
.dash-card-head{margin-bottom:28px;}
.dash-card-head h2{font-size:clamp(26px,2.8vw,36px);}
.dash-card h3{font-size:24px;}
.dash-card-sub{font-size:16px;}
.status-grid{gap:16px;margin-bottom:24px;}
.status-tile{padding:24px 26px;gap:14px;}
.status-tile .st-k{font-size:12px;}
.status-tile .st-plain{font-size:16px;}
.dash-detail{font-size:17.5px;}
.dash-actions .primary-button{padding:18px 26px;font-size:17px;}
.feat-head{margin:10px 0 20px;}
.feat-title{font-size:clamp(22px,2.5vw,30px);}
/* fluid columns: reflow 3->2->1 automatically as the panel narrows (no fixed breakpoints needed) */
.feat-grid{gap:18px;grid-template-columns:repeat(auto-fit,minmax(clamp(240px,23vw,330px),1fr));}
/* Weightier, animated automation cards — match the tilt/glow the landing cards have.
   hud.js now tilts .feat-tile and sets --mx/--my on it for the pointer glow below. */
.feat-tile{position:relative;overflow:hidden;padding:24px 26px;gap:16px;border-radius:16px;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:0 10px 30px -20px rgba(0,0,0,.7);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);}
.feat-tile > *{position:relative;z-index:1;}
/* pointer-follow radial glow */
.feat-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(300px 180px at var(--mx,50%) var(--my,0%),rgba(212,251,92,.16),transparent 70%);
  transition:opacity .35s var(--ease);z-index:0;}
.feat-tile:hover::after{opacity:1;}
/* accent bar that draws in on hover (mirrors the side dash-cards) */
.feat-tile::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--accent),var(--violet));transform:scaleY(0);transform-origin:top;
  transition:transform .4s var(--ease);opacity:.95;z-index:2;}
.feat-tile:hover::before{transform:scaleY(1);}
.feat-tile:hover{border-color:rgba(212,251,92,.34);
  box-shadow:0 26px 54px -26px rgba(0,0,0,.85),0 0 0 1px rgba(212,251,92,.1) inset;}
.feat-tile h3{font-size:18px;}
.feat-tile .feat-body p{font-size:14px;color:var(--muted);}
.feat-dot{width:11px;height:11px;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent);}
.feat-grid.is-online .feat-dot{animation:sysBreathe 2.8s ease-in-out infinite;}
.feat-state{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;}
.dash-row-2{gap:28px;}
.dash-license{margin-top:26px;}
.license-row{padding:16px 4px;font-size:16px;}
.dash-hl-btn{padding:15px 18px;font-size:15.5px;}
/* status tiles also get the pointer glow (hud.js tilts them too) */
.status-tile{position:relative;overflow:hidden;}
.status-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(240px 150px at var(--mx,50%) var(--my,0%),rgba(212,251,92,.12),transparent 70%);
  transition:opacity .35s var(--ease);z-index:0;}
.status-tile:hover::after{opacity:1;}
.status-tile > *{position:relative;z-index:1;}

/* ===== Complete dashboard responsive logic (every breakpoint) ===== */
@media (max-width:1240px){
  .dash-shell{grid-template-columns:290px minmax(0,1fr);gap:32px;}
  .dash-hero h1{font-size:clamp(40px,5.6vw,60px);}
}
/* Condensed-width section picker (dropdown) — hidden until the rail collapses */
.dash-rail-mobile{display:none;}
.drm-label{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin:0 0 9px 2px;}
.drm-wrap{position:relative;}
.dash-rail-select{appearance:none;-webkit-appearance:none;width:100%;padding:16px 46px 16px 17px;border-radius:14px;border:1px solid var(--line-2);background:linear-gradient(180deg,var(--surface-2),var(--surface));color:var(--ink);font-family:var(--font-body);font-size:16px;font-weight:600;cursor:pointer;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);}
.dash-rail-select:hover{border-color:rgba(212,251,92,.4);}
.dash-rail-select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(212,251,92,.15);}
.dash-rail-select option{background:#14161b;color:var(--ink);}
.drm-caret{position:absolute;right:15px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--accent);width:20px;height:20px;display:grid;place-items:center;}
.drm-caret svg{width:18px;height:18px;}
@media (max-width:1040px){
  /* rail becomes a dropdown instead of a scroll strip */
  .dash-main{padding-left:var(--pad);padding-right:var(--pad);}
  .dash-body #siteTopbar > .container{padding-left:var(--pad);padding-right:var(--pad);}
  .dash-shell{grid-template-columns:1fr;gap:18px;}
  .dash-panel{min-height:0;}
  .dash-rail{display:none;}
  .dash-rail-mobile{display:block;}
}
@media (max-width:860px){
  /* status console + card grids stack */
  .sys-status{flex-direction:column;align-items:flex-start;text-align:left;gap:16px;}
  .sys-meta{flex-direction:row;align-items:center;text-align:left;gap:10px;}
  .dash-row-2{grid-template-columns:1fr;gap:18px;}
  .dash-card{padding:clamp(22px,5vw,32px);}
  .dash-card-head h2{font-size:clamp(24px,5vw,30px);}
}
@media (max-width:560px){
  .status-grid{grid-template-columns:1fr;}
  .dash-hl-btn{flex:1 1 100%;}
  .dash-hero h1{font-size:clamp(34px,9vw,44px);}
  .dnav{font-size:14px;padding:11px 14px;}
}

/* ===== Touch tap-target floor: guarantee >=44px hit areas on touch devices.
   Scoped to coarse-pointer OR narrow width so the desktop mouse layout stays pixel-identical. ===== */
@media (hover:none) and (pointer:coarse), (max-width:820px){
  #siteTopbar .nav-burger{width:44px;height:44px;}
  .mobile-nav-close{min-width:44px;min-height:44px;}
  .nav-links a,.nav-create,.ghost-button,.secondary-button{min-height:44px;}
  #toggleWebsitePasswordButton{width:44px;}
  .auth-links button,.auth-links a,
  .signin-links button,
  .signin-sep a,
  .co-back{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  a:has(> .jn){min-height:44px;display:flex;align-items:center;}
}