@font-face{font-family:Inter;src:url('/assets/inter-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}

/* ARCADE waitlist button — code spec (index.css), exact values.
   `body` raises specificity over the site's older button styles; nothing else changes. */
body .btn{font-family:"Inter",-apple-system,system-ui,sans-serif;font-size:15px;font-weight:600;letter-spacing:.01em;border-radius:999px;padding:15px 30px;display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap}
body .btn.sm{padding:11px 22px;font-size:14px}
body .btn-dark{color:#f2f2f3;background:linear-gradient(180deg,#1b1b1f,#0d0d0f 55%,#17171a);border:1px solid rgba(240,240,245,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
body .btn>span{font-size:inherit;line-height:inherit;color:inherit;margin:0}
body .btn{text-decoration:none;cursor:pointer;min-height:0;line-height:normal}

/* The wrapped element sits inside MetalFx, which paints the surface and the metal ring. */
.metal-mount{display:contents}
.metal-fx-content>*{margin:0!important}
.metal-fx-root{transition:transform .2s ease}
.metal-fx-root:has(>.metal-fx-content>.btn:hover){transform:translateY(-1px)}
.metal-fx-root:has(>.metal-fx-content>.btn:active){transform:scale(.98)}
.metal-fx-root:has(>.metal-fx-content>:focus-visible){outline:2px solid #7b92ff;outline-offset:4px;border-radius:999px}
body .btn.sm:hover{background:linear-gradient(180deg,#26262b,#141417 55%,#212125)}
body .btn:focus-visible{outline:2px solid #7b92ff;outline-offset:4px}

/* Round icon controls use the library's circle variant. */
body [data-metal="circle"]{width:44px;height:44px;min-width:44px;padding:0;display:inline-grid;place-items:center;border-radius:50%;color:#f2f2f3;font-size:19px;line-height:1;background:linear-gradient(180deg,#1b1b1f,#0d0d0f 55%,#17171a);border:1px solid rgba(240,240,245,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
body #motion-toggle[data-metal="circle"]{font-size:15px}
.journey-character-dock .metal-mount:has(#change-channel),.music-visual .metal-mount:has(#change-channel,.music-shortcut){display:none}

/* MetalText + MetalBadge row — ARCADE Pro metal text / New metal badge specs. */
.plan-name-row{display:flex;align-items:center;gap:14px}
.metal-static-text{font:600 22px/1.2 Inter,sans-serif;color:#E2E2E2}
.metal-static-badge{display:inline-block;padding:5px 11px;border-radius:999px;background:linear-gradient(#fff,#9aa3b3,#f1f3f7);color:#1d1d1d;font:600 12px Inter,sans-serif}

@media(max-width:720px){
  body .btn{font-size:14px;padding:13px 24px}
  body .btn.sm{padding:10px 16px;font-size:13px}
  .journey-character-dock .metal-mount:has(.music-shortcut){display:none}
}
@media(prefers-reduced-motion:reduce){.metal-fx-root{transition:none}.metal-fx-root:has(>.metal-fx-content>.btn:hover),.metal-fx-root:has(>.metal-fx-content>.btn:active){transform:none}}