:root{
  --bg:#0A0F1E; --bg-2:#0F1530; --fg:#F8FAFC; --muted:#9AA3BF;
  --line:rgba(248,250,252,.09); --accent:#7C5CFF; --mint:#00E5A8;
  --coin:#FFD23F; --pink:#FF7AD9; --card:#141B36;
  --r-cyan:#22D3EE; --r-pink:#FF2E93;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
.display{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-0.035em;line-height:0.95;font-variation-settings:"opsz" 96}
.mono{font-family:'JetBrains Mono',monospace}

/* nav */
nav.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px 40px;backdrop-filter:saturate(1.4) blur(14px);background:linear-gradient(to bottom, rgba(10,15,30,.85), rgba(10,15,30,.4));border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.02em}
.logo .mark{width:32px;height:32px;display:grid;place-items:center}
.logo .mark img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(124,92,255,.4))}
.nav-links{display:flex;gap:28px;font-size:14px;color:var(--muted)}
.nav-links a:hover{color:var(--fg)}
.nav-links a.active{color:var(--fg)}
.nav-cta{padding:10px 18px;border-radius:999px;background:var(--fg);color:#0A0F1E;font-weight:600;font-size:14px;transition:transform .15s ease}
.nav-cta:hover{transform:translateY(-1px)}

/* hero */
.hero{position:relative;min-height:100vh;padding:140px 40px 80px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden}
.hero.compact{min-height:auto;padding:160px 40px 60px}
.hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:70%;pointer-events:none;background:radial-gradient(ellipse at 20% 30%, rgba(124,92,255,.35), transparent 50%),radial-gradient(ellipse at 80% 40%, rgba(0,229,168,.22), transparent 55%),radial-gradient(ellipse at 50% 90%, rgba(255,210,63,.12), transparent 60%);filter:blur(20px);z-index:0}
.hero > *{position:relative;z-index:2}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:12.5px;color:var(--muted);margin-bottom:28px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px var(--mint);animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.4}}
h1.display{font-size:clamp(52px, 9vw, 132px);max-width:16ch;margin:0;text-wrap:balance}
h1.display.small{font-size:clamp(44px,7vw,96px)}
.h1-inline{display:inline-block}
.h1-accent{background:linear-gradient(100deg, var(--accent) 15%, var(--mint) 55%, var(--coin) 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.h1-cyanpink{background:linear-gradient(100deg, var(--r-cyan) 10%, var(--r-pink) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.h1-strike{position:relative;display:inline-block;color:var(--muted);white-space:nowrap}
.h1-strike::after{content:"";position:absolute;left:-6px;right:-6px;top:52%;height:0.09em;min-height:6px;background:var(--coin);transform:rotate(-3deg) skewX(-10deg);border-radius:4px;opacity:.9}
.hero-sub{margin-top:32px;max-width:620px;font-size:19px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.hero-cta-row{margin-top:40px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;font-weight:600;font-size:15.5px;cursor:pointer;border:0;transition:transform .15s ease, box-shadow .2s ease}
.btn-primary{background:var(--mint);color:#063A2B;box-shadow:0 14px 30px -12px rgba(0,229,168,.55), inset 0 -3px 0 rgba(0,0,0,.12)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.05)}
.hero-meta{margin-top:22px;color:var(--muted);font-size:13px;display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap}
.hero-meta strong{color:var(--fg);font-weight:600}

/* floating R coins */
.coin-float{position:absolute;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%, #FFF1A8, var(--coin) 55%, #C9921C);box-shadow:0 10px 30px -6px rgba(255,210,63,.6), inset 0 -4px 0 rgba(0,0,0,.2);display:grid;place-items:center;padding:10px;animation:bob 6s infinite ease-in-out}
.coin-float img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 0 rgba(0,0,0,.15))}
@keyframes bob{50%{transform:translateY(-12px) rotate(6deg)}}
.coin-1{top:22%;left:8%;animation-delay:.2s}
.coin-2{width:44px;height:44px;top:62%;left:14%;animation-delay:1s;padding:7px}
.coin-3{width:52px;height:52px;top:30%;right:10%;animation-delay:.6s;padding:8px}
.coin-4{width:36px;height:36px;top:70%;right:16%;animation-delay:1.4s;padding:6px}

/* section */
section{padding:120px 40px;position:relative}
.wrap{max-width:1240px;margin:0 auto}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:56px;flex-wrap:wrap}
.kicker{font-family:'JetBrains Mono';font-size:12px;color:var(--mint);text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px}
h2.display{font-size:clamp(40px,5.2vw,72px);margin:0;text-wrap:balance}
.section-head p{color:var(--muted);max-width:420px;font-size:16px;line-height:1.5;margin:0}

/* before/after */
.compare{position:relative;height:580px;border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:0 40px 80px -20px rgba(0,0,0,.5);user-select:none;touch-action:none}
.compare .pane{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:40px;isolation:isolate}
.pane.old{background:#E8E4DA;color:#2B2B2B}
.pane.new{background:radial-gradient(ellipse at 80% 10%, rgba(124,92,255,.5), transparent 60%),radial-gradient(ellipse at 10% 90%, rgba(0,229,168,.35), transparent 60%),#0F1530;clip-path:inset(0 0 0 50%)}
.compare-handle{position:absolute;top:0;bottom:0;width:3px;background:var(--fg);left:50%;transform:translateX(-50%);cursor:ew-resize;z-index:5;box-shadow:0 0 24px rgba(248,250,252,.5)}
.compare-handle::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--fg);display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}
.compare-handle::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#0A0F1E;font-weight:800;font-family:'Bricolage Grotesque';font-size:20px;letter-spacing:-.1em;z-index:1}
.compare-label{position:absolute;top:22px;padding:6px 12px;border-radius:999px;font-size:12px;font-family:'JetBrains Mono';z-index:4}
.label-old{left:22px;background:#C8C0AF;color:#2B2B2B}
.label-new{right:22px;background:rgba(124,92,255,.25);color:var(--fg);border:1px solid rgba(124,92,255,.5)}

.old-paper{width:min(440px,100%);background:#F5F1E3;border:1px dashed #8A8268;padding:28px 26px;font-family:'Times New Roman',serif;color:#2B2B2B;position:relative;box-shadow:2px 2px 0 #8A8268}
.old-paper h3{font-size:20px;margin:0 0 6px;text-transform:uppercase;letter-spacing:.04em}
.old-paper .sub{font-size:12px;color:#6B6451;margin-bottom:18px}
.old-q{font-size:15px;margin:0 0 14px;line-height:1.4}
.old-opts{list-style:none;padding:0;margin:0 0 18px;font-size:14px}
.old-opts li{padding:10px 0;border-bottom:1px dotted #8A8268;display:flex;align-items:center;gap:10px}
.old-opts li::before{content:"";width:12px;height:12px;border:1.5px solid #2B2B2B;border-radius:50%}
.old-foot{font-size:11px;color:#6B6451;display:flex;justify-content:space-between;padding-top:10px;border-top:1px solid #8A8268}
.old-stamp{position:absolute;top:-14px;right:-14px;background:#B03A2E;color:#fff;font-family:'Bricolage Grotesque';font-size:11px;padding:6px 10px;border-radius:4px;transform:rotate(8deg);letter-spacing:.08em}

/* phone — matches source site's look more closely */
.new-phone{width:300px;height:540px;border-radius:42px;background:linear-gradient(180deg,#0E1433,#0A0F1E);border:10px solid #141A38;box-shadow:0 30px 80px -20px rgba(124,92,255,.5), inset 0 0 0 1px rgba(255,255,255,.05);padding:0;position:relative;overflow:hidden}
.new-phone::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:100px;height:24px;background:#000;border-radius:14px;z-index:3}
.phone-inner{position:absolute;inset:0;padding:46px 18px 22px;display:flex;flex-direction:column;gap:14px}
.phone-head{display:flex;justify-content:space-between;align-items:center;padding:0 4px;font-size:10.5px;color:var(--muted);font-family:'JetBrains Mono'}
.phone-brand{display:flex;align-items:center;gap:8px}
.phone-brand img{width:18px;height:18px}
.phone-brand span{font-family:'Bricolage Grotesque';font-weight:700;font-size:13px;color:var(--fg);letter-spacing:-.01em}
.new-coins{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:linear-gradient(135deg, rgba(255,210,63,.18), rgba(255,210,63,.06));border:1px solid rgba(255,210,63,.3)}
.coin-pip{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 30%, #FFF1A8, var(--coin) 55%, #C9921C);padding:5px;display:grid;place-items:center;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.coin-pip img{width:100%;height:100%;object-fit:contain}
.c-num{font-family:'Bricolage Grotesque';font-size:20px;font-weight:700;line-height:1}
.c-lab{font-size:10.5px;color:var(--muted);font-family:'JetBrains Mono';margin-top:3px}
.coin-meta{display:flex;flex-direction:column;gap:2px}
.coin-usd{margin-left:auto;font-family:'Bricolage Grotesque';font-size:16px;font-weight:700;color:var(--mint)}
.new-card{background:rgba(20,27,54,.8);border-radius:18px;padding:18px;border:1px solid var(--line);flex:1;display:flex;flex-direction:column}
.q-lab{font-size:10.5px;font-family:'JetBrains Mono';color:var(--mint);letter-spacing:.12em;margin-bottom:8px}
.new-card h4{font-family:'Bricolage Grotesque';font-size:19px;margin:0 0 16px;line-height:1.18}
.new-opts{display:flex;flex-direction:column;gap:8px}
.new-opt{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:13px;display:flex;justify-content:space-between;align-items:center;transition:all .2s ease;cursor:pointer}
.new-opt:hover{background:rgba(124,92,255,.12);border-color:rgba(124,92,255,.5)}
.new-opt.selected{background:linear-gradient(135deg, rgba(124,92,255,.3), rgba(0,229,168,.15));border-color:var(--accent)}
.new-opt .bar{height:4px;background:var(--accent);border-radius:2px;margin-top:6px}
.phone-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:var(--muted);font-family:'JetBrains Mono';padding:10px 4px 0}
.phone-foot .reward{color:var(--coin);font-weight:600}
.submit-pill{background:var(--mint);color:#063A2B;padding:10px 14px;border-radius:12px;text-align:center;font-weight:600;font-size:13px;margin-top:12px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.compare-hint{text-align:center;margin-top:18px;color:var(--muted);font-size:13px;font-family:'JetBrains Mono'}
.compare-hint span{color:var(--fg)}

/* features */
.features{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:32px;position:relative;overflow:hidden;transition:transform .2s ease, border-color .2s ease}
.feat:hover{transform:translateY(-4px);border-color:rgba(124,92,255,.4)}
.feat .big{font-family:'Bricolage Grotesque';font-size:clamp(44px,5vw,68px);font-weight:700;letter-spacing:-.04em;line-height:1;margin-bottom:12px}
.feat h3{font-family:'Bricolage Grotesque';font-size:22px;margin:0 0 10px;letter-spacing:-.015em}
.feat p{color:var(--muted);line-height:1.5;font-size:14.5px;margin:0}
.feat-a{grid-column:span 5}.feat-b{grid-column:span 4}.feat-c{grid-column:span 3}
.feat-d{grid-column:span 4}.feat-e{grid-column:span 4}.feat-f{grid-column:span 4}
.feat .big.accent{color:var(--accent)}.feat .big.mint{color:var(--mint)}.feat .big.coin{color:var(--coin)}.feat .big.cyan{color:var(--r-cyan)}.feat .big.pink{color:var(--r-pink)}

/* how */
.how{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;position:relative}
.step-n{width:36px;height:36px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:'Bricolage Grotesque';font-weight:800;margin-bottom:18px}
.step:nth-child(2) .step-n{background:var(--mint);color:#063A2B}
.step:nth-child(3) .step-n{background:var(--coin);color:#4A3300}
.step:nth-child(4) .step-n{background:#FF7AD9;color:#4A1036}
.step h3{font-family:'Bricolage Grotesque';font-size:19px;margin:0 0 8px}
.step p{color:var(--muted);font-size:14px;line-height:1.5;margin:0}
.step .tag{margin-top:14px;display:inline-block;font-size:10.5px;font-family:'JetBrains Mono';padding:3px 8px;border-radius:4px;background:rgba(255,255,255,.06);color:var(--muted);letter-spacing:.08em}

/* Rcard */
.reward-row{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.reward-copy .kicker{color:var(--coin)}
.reward-copy h2{margin-bottom:18px}
.reward-copy p{color:var(--muted);font-size:17px;line-height:1.55;max-width:480px}
.reward-list{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.reward-list div{display:flex;gap:12px;align-items:center;font-size:14.5px}
.reward-list .check{width:22px;height:22px;border-radius:50%;background:var(--mint);color:#063A2B;display:grid;place-items:center;font-weight:800;flex-shrink:0}
.debit-stage{position:relative;aspect-ratio:1/1;display:grid;place-items:center}
.debit-stage::before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle, rgba(124,92,255,.4), transparent 65%);filter:blur(20px)}
.debit{position:relative;width:min(380px,100%);aspect-ratio:1.58/1;border-radius:22px;background:linear-gradient(135deg, #1C2452 0%, #0A0F1E 50%, #1A0F3A 100%);border:1px solid rgba(255,255,255,.08);padding:24px;box-shadow:0 40px 70px -20px rgba(124,92,255,.5);transform:rotate(-4deg);transition:transform .3s ease;color:var(--fg);display:flex;flex-direction:column;justify-content:space-between}
.debit::after{content:"";position:absolute;top:0;left:0;right:0;height:100%;border-radius:22px;pointer-events:none;background:radial-gradient(ellipse at 30% 0%, rgba(124,92,255,.3), transparent 60%),radial-gradient(ellipse at 100% 100%, rgba(0,229,168,.2), transparent 55%)}
.debit:hover{transform:rotate(-1deg) translateY(-6px)}
.debit-row{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.debit-brand{display:flex;align-items:center;gap:10px;font-family:'Bricolage Grotesque';font-weight:800;font-size:24px;letter-spacing:-.025em}
.debit-brand img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(255,46,147,.5))}
.debit-chip{width:38px;height:28px;border-radius:6px;background:linear-gradient(135deg,#D4B24C,#8B6E1B);position:relative}
.debit-chip::after{content:"";position:absolute;inset:4px;border:1px solid rgba(0,0,0,.3);border-radius:3px}
.debit-num{font-family:'JetBrains Mono';font-size:16px;letter-spacing:.15em;position:relative;z-index:1}
.debit-bottom{display:flex;justify-content:space-between;align-items:end;position:relative;z-index:1}
.debit-bal .lab{font-size:9px;color:var(--muted);letter-spacing:.14em;font-family:'JetBrains Mono'}
.debit-bal .amt{font-family:'Bricolage Grotesque';font-size:24px;font-weight:700}
.debit-logo{font-style:italic;font-weight:800;font-size:22px;font-family:'Bricolage Grotesque'}

/* cta */
.cta-band{position:relative;margin:0 40px;border-radius:32px;padding:90px 60px;text-align:center;overflow:hidden;background:radial-gradient(ellipse at 20% 20%, rgba(124,92,255,.5), transparent 55%),radial-gradient(ellipse at 80% 90%, rgba(0,229,168,.45), transparent 55%),radial-gradient(ellipse at 50% 50%, rgba(255,210,63,.2), transparent 60%),#120B30;border:1px solid rgba(255,255,255,.08)}
.cta-band h2{font-size:clamp(44px,6vw,88px);margin:0 0 18px;text-wrap:balance}
.cta-band p{color:rgba(248,250,252,.8);font-size:18px;max-width:540px;margin:0 auto 36px}
.cta-band .btn-primary{padding:18px 32px;font-size:17px}

/* footer */
footer{padding:80px 40px 40px;border-top:1px solid var(--line);margin-top:120px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;max-width:1240px;margin:0 auto}
.foot-grid h4{font-family:'Bricolage Grotesque';font-size:14px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px;font-weight:500}
.foot-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.foot-grid ul a{color:var(--fg);font-size:14px;opacity:.75;transition:opacity .15s}
.foot-grid ul a:hover{opacity:1}
.foot-brand p{color:var(--muted);font-size:13.5px;max-width:300px;line-height:1.5;margin:14px 0 0}
.foot-bottom{max-width:1240px;margin:60px auto 0;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:12px;font-family:'JetBrains Mono'}

/* tweaks */
.tweaks{position:fixed;right:18px;bottom:18px;z-index:100;width:260px;background:rgba(20,27,54,.92);border:1px solid var(--line);border-radius:18px;padding:16px;backdrop-filter:blur(20px);color:var(--fg);display:none;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.tweaks.on{display:block}
.tweaks h5{font-family:'Bricolage Grotesque';font-size:16px;margin:0 0 12px;display:flex;justify-content:space-between;align-items:center}
.tweaks h5 span{font-family:'JetBrains Mono';font-size:10px;color:var(--muted);font-weight:400}
.tw-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:12.5px;color:var(--muted)}
.tw-row input[type=color]{width:36px;height:28px;border:1px solid var(--line);background:none;border-radius:8px;cursor:pointer;padding:2px}
.tw-variant{display:flex;gap:6px}
.tw-variant button{padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--fg);font-size:11px;cursor:pointer;font-family:'Inter'}
.tw-variant button.on{background:var(--accent);border-color:var(--accent)}

/* privacy specific */
.privacy-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.priv-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;position:relative}
.priv-card .chip{display:inline-block;padding:4px 10px;border-radius:999px;font-size:10.5px;font-family:'JetBrains Mono';letter-spacing:.1em;margin-bottom:14px}
.priv-card.safe .chip{background:rgba(0,229,168,.15);color:var(--mint);border:1px solid rgba(0,229,168,.3)}
.priv-card.siloed .chip{background:rgba(124,92,255,.15);color:#B5A2FF;border:1px solid rgba(124,92,255,.3)}
.priv-card h3{font-family:'Bricolage Grotesque';font-size:24px;margin:0 0 10px}
.priv-card p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0 0 14px}
.priv-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--fg)}
.priv-card ul li{padding-left:18px;position:relative;color:rgba(248,250,252,.85)}
.priv-card ul li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.4}
.priv-card.safe ul li::before{background:var(--mint);opacity:.8}
.priv-card.siloed ul li::before{background:var(--accent);opacity:.8}
.priv-divider{text-align:center;padding:40px 0 10px;font-family:'JetBrains Mono';font-size:11px;color:var(--muted);letter-spacing:.2em;position:relative}
.priv-divider::before,.priv-divider::after{content:"";position:absolute;top:50%;width:calc(50% - 130px);height:1px;background:var(--line)}
.priv-divider::before{left:0}.priv-divider::after{right:0}

/* sports/b2b */
.sport-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;max-width:1240px;margin:0 auto}
.sport-hero-grid .hero-copy{text-align:left}
.sport-hero-grid .hero-copy h1{margin:0;text-align:left}
.sport-hero-grid .hero-copy .hero-sub{margin-left:0;text-align:left}
.sport-hero-grid .hero-cta-row{justify-content:flex-start}
.sport-hero-grid .hero-meta{justify-content:flex-start}

/* stadium mock */
.stadium{position:relative;width:100%;aspect-ratio:1/1;display:grid;place-items:center}
.stadium .jumbo{width:88%;aspect-ratio:16/9;border-radius:18px;background:linear-gradient(180deg,#05081A,#0D143A);border:8px solid #1A2040;padding:18px 22px;box-shadow:0 30px 70px -15px rgba(34,211,238,.4);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.stadium .jumbo::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.02) 3px 4px);pointer-events:none}
.jumbo-top{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono';font-size:11px;color:var(--r-cyan);letter-spacing:.15em}
.jumbo-top .live{display:flex;align-items:center;gap:8px;color:var(--r-pink)}
.jumbo-top .live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--r-pink);box-shadow:0 0 12px var(--r-pink);animation:pulse 1.2s infinite}
.jumbo-q{font-family:'Bricolage Grotesque';font-size:clamp(22px,2.4vw,32px);font-weight:700;line-height:1.05;text-align:center;padding:6px 0}
.jumbo-votes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.jumbo-vote{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.jumbo-vote .team{display:flex;justify-content:space-between;font-size:12px;font-weight:600}
.jumbo-vote .team span:last-child{font-family:'JetBrains Mono';color:var(--r-cyan)}
.jumbo-vote.win .team span:last-child{color:var(--r-pink)}
.jumbo-vote .bar-outer{height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.jumbo-vote .bar-inner{height:100%;background:linear-gradient(90deg,var(--r-cyan),var(--r-pink));border-radius:3px}

/* business */
.biz-hero-visual{position:relative;width:100%;aspect-ratio:1/1;display:grid;place-items:center}
.dash{width:100%;max-width:460px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 30px 60px -15px rgba(0,0,0,.5);position:relative}
.dash::before{content:"";position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,rgba(124,92,255,.25),transparent 60%);filter:blur(40px);z-index:-1}
.dash-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-family:'JetBrains Mono';font-size:11px;color:var(--muted)}
.dash-top .dot-row{display:flex;gap:5px}
.dash-top .dot-row span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15)}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.dash-kpi{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:12px}
.dash-kpi .lab{font-size:10.5px;color:var(--muted);font-family:'JetBrains Mono';letter-spacing:.08em;margin-bottom:6px}
.dash-kpi .val{font-family:'Bricolage Grotesque';font-size:26px;font-weight:700;line-height:1}
.dash-kpi .delta{font-size:10.5px;font-family:'JetBrains Mono';margin-top:4px}
.dash-kpi .delta.up{color:var(--mint)}
.dash-chart{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:12px;height:140px;position:relative}
.dash-chart .clab{font-size:10.5px;color:var(--muted);font-family:'JetBrains Mono';letter-spacing:.08em;margin-bottom:6px}
.dash-bars{display:flex;align-items:end;gap:6px;height:90px}
.dash-bars div{flex:1;background:linear-gradient(180deg,var(--accent),var(--mint));border-radius:3px 3px 0 0;opacity:.85}

/* logos strip */
.logos-strip{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:40px;padding:40px 0;opacity:.5}
.logos-strip div{font-family:'Bricolage Grotesque';font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--muted)}

/* mobile */
@media (max-width: 900px){
  nav.top{padding:14px 18px}
  .nav-links{display:none}
  section{padding:80px 20px}
  .hero{padding:120px 20px 60px}
  .features{grid-template-columns:1fr}
  .feat-a,.feat-b,.feat-c,.feat-d,.feat-e,.feat-f{grid-column:span 1}
  .how{grid-template-columns:1fr 1fr}
  .reward-row,.sport-hero-grid{grid-template-columns:1fr;gap:40px}
  .sport-hero-grid .hero-copy h1,.sport-hero-grid .hero-copy .hero-sub{text-align:center}
  .sport-hero-grid .hero-cta-row,.sport-hero-grid .hero-meta{justify-content:center}
  .cta-band{margin:0 16px;padding:60px 24px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .compare{height:640px}
  .new-phone{width:280px;height:500px}
  .privacy-grid{grid-template-columns:1fr}
  .priv-divider::before,.priv-divider::after{display:none}
}

/* ============================================================
   Phone + animated poll cards — ported from the current
   production site's styles.css so the compare slider's right
   pane keeps its live swipe-to-vote animation on the new dark
   design. Colors tweaked to match --mint/--accent variables.
   ============================================================ */

.phone-frame {
  position: relative;
  display: inline-block;
  width: 260px;
  height: 520px;
  margin: 0 auto;
  background: #141A38;
  border: 10px solid #141A38;
  border-radius: 42px;
  box-shadow: 0 30px 80px -20px rgba(124,92,255,.5), inset 0 0 0 1px rgba(255,255,255,.05);
  overflow: hidden;
}
.phone-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 24px;
  background: #000;
  border-radius: 14px;
  z-index: 10;
}
.poll-animation {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #FF9A76 0%, #4ECDC4 100%);
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 12px 12px;
}
.poll-card,
.result-card {
  position: absolute;
  width: calc(100% - 24px);
  background: #1a1a2e;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  padding: 12px;
  box-sizing: border-box;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  opacity: 0;
  transform: scale(.95);
  pointer-events: none;
  will-change: transform, opacity;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.result-card { border-color: rgba(0,229,168,.3); z-index: 3; }
.poll-card { z-index: 1; }
.poll-card.active,
.result-card.active { opacity: 1; transform: scale(1); }
.poll-card.active { z-index: 2; }

.poll-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; position: relative; }
.poll-card-coins {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: var(--mint); font-weight: 600;
}
.poll-card-question {
  font-size: 14px; font-weight: 700; text-align: center;
  color: #fff; line-height: 1.35; margin-bottom: 10px; padding: 0 4px;
}
.poll-card-answers { display: flex; align-items: center; gap: 6px; }
.poll-answer-btn {
  flex: 1; display: flex; align-items: center;
  padding: 8px 4px;
  background: rgba(0,229,168,.1);
  border: 1px solid rgba(0,229,168,.25);
  border-radius: 8px;
  color: var(--mint);
  font-size: 12px; font-weight: 600;
}
.poll-answer-btn .arrow { flex-shrink: 0; width: 14px; height: 14px; stroke: var(--mint); stroke-width: 3; fill: none; }
.poll-answer-btn .answer-text { flex: 1; text-align: center; line-height: 1.2; }
.poll-swipe-label { font-size: 8px; color: rgba(255,255,255,.35); font-weight: 700; letter-spacing: .08em; flex-shrink: 0; }

.result-card-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.result-card-label { font-size: 9px; color: rgba(255,255,255,.35); }
.result-card-coins { font-size: 9px; color: var(--mint); font-weight: 600; }
.result-card-question { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.35; }
.result-bar-row { margin-bottom: 8px; }
.result-bar-labels { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.result-bar-answer { font-size: 11px; font-weight: 700; color: #fff; }
.result-bar-you { font-size: 8px; color: var(--mint); font-weight: 600; margin-left: 4px; }
.result-bar-pct { font-size: 11px; font-weight: 700; color: #fff; }
.result-bar-track { width: 100%; height: 10px; background: rgba(255,255,255,.08); border-radius: 5px; overflow: hidden; }
.result-bar-fill { height: 100%; border-radius: 5px; transition: width .7s ease-out; }
.result-bar-fill.user { background: var(--mint); }
.result-bar-fill.other { background: var(--accent); }
.result-voter-count { font-size: 10px; color: rgba(255,255,255,.5); font-weight: 500; text-align: center; margin-top: 8px; }
.result-timer-bar { width: 100%; height: 3px; background: rgba(255,255,255,.08); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.result-timer-fill { height: 100%; background: var(--mint); border-radius: 2px; width: 0%; }

/* ============================================================
   Contact forms (dark-theme, ported from old styles.css but
   rewritten to match the new design system).
   ============================================================ */

.contact-form { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 20px auto 0; text-align: left; }
.contact-form .form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.contact-form .form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.contact-form label { font-size: 12px; color: var(--muted); font-family: 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  /* Explicit width:100% + min-width:0 prevents browser default
     input sizing (via the `size` attribute) from making one
     field wider than the other in a grid row. */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--fg);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
  transition: border-color .15s ease, background .15s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(124,92,255,.08);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(154,163,191,.55); }
.contact-form select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.contact-form select option { background: var(--card); color: var(--fg); }
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form button { margin-top: 8px; border: 0; cursor: pointer; }
.form-status { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; margin-top: 10px; text-align: center; min-height: 18px; }
.form-status.success { color: var(--mint); }
.form-status.error { color: var(--r-pink); }

@media (max-width: 900px) {
  .contact-form .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Mobile polish — fixes overlapping coins, adds a hamburger
   menu, tunes the compare slider so the animated phone fits
   inside a narrow viewport, and caps the hero headline size.
   ============================================================ */

.menu-toggle { display: none; }

@media (max-width: 900px) {
  /* Hamburger nav */
  nav.top { padding: 12px 16px; flex-wrap: nowrap; }
  .logo { font-size: 16px; }
  .logo .mark { width: 28px; height: 28px; }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--line);
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
  }
  .menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--fg);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
    transform-origin: center;
  }
  /* Hamburger → X: top bar rotates down into center, bottom bar
     rotates up into center, middle bar fades. Flex with gap:4px
     puts the bars at y = -6 / 0 / +6 relative to center. */
  .menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2) { opacity: 0; }
  .menu-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .nav-cta { padding: 8px 14px; font-size: 13px; }

  /* Mobile menu drawer */
  .nav-links.open {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    padding: 6px;
    background: rgba(10,15,30,.96);
    backdrop-filter: blur(18px);
    border: 1px solid var(--line);
    border-radius: 16px;
    z-index: 49;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
  }
  .nav-links.open a {
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 15px;
    color: var(--fg);
  }
  .nav-links.open a.active,
  .nav-links.open a:hover {
    background: rgba(124,92,255,.12);
    color: var(--fg);
  }

  /* Floating coins — shrink, reposition, drop the one that was
     overlapping the headline. */
  .coin-float { animation-duration: 7s; }
  .coin-1 { top: 9%; left: 5%; width: 40px; height: 40px; padding: 7px; }
  .coin-2 { top: 72%; left: 7%; width: 30px; height: 30px; padding: 6px; }
  .coin-3 { top: 22%; right: 5%; width: 36px; height: 36px; padding: 6px; }
  .coin-4 { display: none; }

  /* Hero headline */
  h1.display { font-size: clamp(38px, 11vw, 60px); }
  h1.display.small { font-size: clamp(36px, 10vw, 52px); }
  .hero { padding: 110px 20px 60px; min-height: auto; }
  .hero-sub { font-size: 16px; }

  /* Section heads stack */
  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 36px; }
  h2.display { font-size: clamp(32px, 7vw, 46px); }

  /* Compare slider: taller, tighter padding, scale the phone */
  .compare { height: 680px; border-radius: 20px; }
  .compare .pane { padding: 20px; }
  .old-paper { padding: 20px 18px; width: 100%; max-width: 300px; }
  .old-paper h3 { font-size: 16px; }
  .old-paper .sub, .old-opts { font-size: 12px; }
  .old-opts li { padding: 6px 0; }
  .compare-handle { width: 2px; }
  .compare-handle::before { width: 44px; height: 44px; }
  .phone-frame { width: 230px; height: 470px; border-width: 8px; border-radius: 38px; }
  .phone-notch { width: 86px; height: 22px; }
  .poll-animation { padding: 36px 10px 10px; }

  /* CTA / card spacings */
  .cta-band { padding: 50px 20px; margin: 0 12px; }
  .cta-band h2 { font-size: clamp(34px, 8vw, 58px); }
  section { padding: 70px 20px; }

  /* B2B dashboard card on mobile */
  .dash { max-width: 100%; }
  .dash-grid { grid-template-columns: 1fr 1fr; }

  /* Sports jumbo card on mobile */
  .stadium .jumbo { width: 100%; padding: 14px 16px; }
  .jumbo-q { font-size: 18px; padding: 4px 0; }
}

/* Very small phones */
@media (max-width: 380px) {
  .phone-frame { width: 210px; height: 430px; }
  h1.display { font-size: 36px; }
  .hero-meta { font-size: 12px; gap: 10px; }
}

/* ============================================================
   Sub-pages (about, contact, faq, privacy, terms) — long-form
   typography on top of the dark design system.
   ============================================================ */

.page-hero { padding: 140px 20px 40px; text-align: center; position: relative; overflow: hidden; }
.page-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% 30%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(124,92,255,.3), transparent 55%),
    radial-gradient(ellipse at 80% 50%, rgba(0,229,168,.18), transparent 60%);
  filter: blur(20px);
  z-index: 0;
}
.page-hero > * { position: relative; z-index: 2; }
.page-hero h1.display { font-size: clamp(42px, 7vw, 82px); margin: 0 auto; max-width: 18ch; }
.page-hero .hero-sub { margin: 24px auto 0; }

.prose {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 80px;
  color: rgba(248,250,252,.82);
  font-size: 16px;
  line-height: 1.7;
}
.prose h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 54px 0 18px;
  color: var(--fg);
}
.prose h2:first-of-type { margin-top: 10px; }
.prose h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 20px;
  font-weight: 600;
  margin: 28px 0 10px;
  color: var(--fg);
}
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--mint); border-bottom: 1px dashed currentColor; }
.prose a:hover { color: var(--fg); }
.prose strong { color: var(--fg); }
.prose hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 48px 0;
}
.prose .lead {
  font-size: 18px;
  color: var(--fg);
  font-weight: 500;
  margin-bottom: 24px;
}
.prose .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Team grid (about page) */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0 40px;
}
.team-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
}
.team-card .role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--mint);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.team-card h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
}
.team-card p { font-size: 14.5px; color: var(--muted); margin: 0; line-height: 1.5; }

/* FAQ group + item */
.faq-group { margin: 36px 0; }
.faq-group .kicker { color: var(--mint); }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  margin-bottom: 10px;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--fg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  color: var(--mint);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item .answer {
  padding: 0 22px 20px;
  color: rgba(248,250,252,.75);
  font-size: 15px;
  line-height: 1.65;
}

/* Footer social icons (shared across pages) */
.foot-social {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.foot-social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: var(--muted);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.foot-social a:hover {
  background: rgba(124,92,255,.15);
  color: var(--fg);
  border-color: rgba(124,92,255,.5);
}
.foot-social svg { width: 18px; height: 18px; fill: currentColor; }

/* Footer mobile centering (only at 900px and below). */
@media (max-width: 900px) {
  footer { padding: 60px 24px 32px; }
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }
  .foot-brand { display: flex; flex-direction: column; align-items: center; }
  .foot-brand .logo { justify-content: center; }
  .foot-brand p { text-align: center; }
  .foot-social { justify-content: center; }
  .foot-grid ul { list-style: none; padding: 0; }
  .foot-bottom { flex-direction: column; gap: 8px; align-items: center; text-align: center; }

  /* Sub-page adjustments */
  .page-hero { padding: 110px 20px 30px; }
  .team-grid { grid-template-columns: 1fr; }
  .prose { padding: 0 18px 60px; }
}

/* ============================================================
   Wordmark logo — the single glitch-style PNG keeps its original
   black fill + cyan/pink chromatic aberration. A yellow radial
   glow sits behind it via a pseudo-element, plus a tight yellow
   drop-shadow hugs the letter edges so the dark fill reads
   clearly against the dark-navy nav.
   ============================================================ */
.logo:has(.wordmark) {
  position: relative;
  gap: 0;
  padding: 2px 6px;
  z-index: 1;
}
.logo:has(.wordmark)::before {
  content: "";
  position: absolute;
  inset: -6px -14px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 210, 63, 0.22) 0%,
    rgba(255, 210, 63, 0.08) 50%,
    transparent 80%
  );
  filter: blur(14px);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}
.logo img.wordmark {
  height: 28px;
  width: auto;
  display: block;
  object-fit: contain;
  position: relative;
  filter:
    drop-shadow(0 0 1px rgba(255, 210, 63, 0.45))
    drop-shadow(0 0 4px rgba(255, 210, 63, 0.28));
}

@media (max-width: 900px) {
  .logo img.wordmark { height: 22px; }
  .logo:has(.wordmark)::before { inset: -4px -10px; }
}

/* ============================================================
   Beta invite form — a centered single-card layout (no nav,
   no footer) for users arriving from /form. Uses the same
   palette and typography as the rest of the site.
   ============================================================ */

body.form-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(124,92,255,.3), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(0,229,168,.18), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(255,210,63,.1), transparent 55%),
    var(--bg);
}
.form-shell {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.form-shell .logo img.wordmark {
  height: 40px;
}
.form-shell .kicker { color: var(--mint); }
.form-card {
  width: 100%;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px 28px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.5);
}
.form-card h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0 0 6px;
}
.form-card .subtitle {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 24px;
}
.device-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0,229,168,.1);
  border: 1px solid rgba(0,229,168,.35);
  color: var(--mint);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .05em;
  margin-bottom: 22px;
}
.form-success {
  text-align: center;
  padding: 12px 0 4px;
}
.form-success .check {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mint), #00b88b);
  box-shadow: 0 10px 30px -8px rgba(0,229,168,.6);
}
.form-success .check svg { width: 32px; height: 32px; stroke: #063a2b; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.form-success h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  margin: 0 0 6px;
}
.form-success p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0 0 24px; }

@media (max-width: 520px) {
  .form-card { padding: 26px 20px; border-radius: 18px; }
  .form-card h2 { font-size: 22px; }
  .form-shell .logo img.wordmark { height: 32px; }
}

/* ============================================================
   "Coming Soon" tag — used on any surface that promises coin
   earning, reward redemption, or the Rcard. Yellow/coin accent
   to separate it visually from the other tags (which are mint).
   ============================================================ */

.coming-soon-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: rgba(255, 210, 63, 0.14);
  border: 1px solid rgba(255, 210, 63, 0.45);
  color: var(--coin);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.4;
}
.coming-soon-tag::before {
  content: "⏳";
  font-family: inherit;
}
.coming-soon-tag.big {
  font-size: 12px;
  padding: 6px 14px;
  margin-bottom: 14px;
}
/* Reusing the existing .step .tag slot — a second tag with the
   coming-soon styling nests nicely beside the primary one. */
.step .tag.coming-soon { background: rgba(255, 210, 63, 0.14); color: var(--coin); border: 1px solid rgba(255, 210, 63, 0.45); margin-left: 6px; }

/* Heading-level tags align better with a tiny top margin */
h3 .coming-soon-tag,
h4 .coming-soon-tag { margin-left: 8px; font-size: 9px; padding: 2px 8px; }