:root { --ink:#181512; --cream:#fffaf0; --yellow:#ffd34d; --orange:#ff5426; --green:#35c99a; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html, body { min-height:100%; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 15% 10%, #fff0b5 0, transparent 28%), radial-gradient(circle at 88% 12%, #ffe3d8 0, transparent 30%), var(--cream); font-family:"Comic Sans MS","Arial Rounded MT Bold",system-ui,sans-serif; }
.billing-page { min-height:100vh; display:grid; place-items:center; padding:30px 18px; }
.billing-card { width:min(620px,100%); padding:36px; border:3px solid var(--ink); border-radius:28px; background:#fff; box-shadow:0 10px 0 var(--ink); text-align:center; }
.billing-card img { width:min(250px,60%); height:auto; }
.junko-auth { width:120px!important; margin:8px auto 12px; filter:drop-shadow(0 12px 16px rgba(255,84,38,.18)); }
.eyebrow { display:inline-block; margin:12px 0; padding:8px 14px; border:2px solid var(--ink); border-radius:999px; background:#fff0ae; font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
h1 { margin:8px 0 12px; font-size:clamp(34px,7vw,58px); line-height:.95; letter-spacing:-.04em; }
h1 span { color:var(--orange); }
.lead { margin:0 auto 24px; max-width:470px; color:#6d6259; font-size:17px; line-height:1.5; }
.status-box { margin:22px 0; padding:18px; border:2px solid var(--ink); border-radius:16px; background:#fff4b8; text-align:left; }
.status-box.success { background:#c9f3e3; }
.status-box.error { background:#ffd8cc; }
.status-box strong,.status-box span { display:block; }
.status-box span { margin-top:4px; color:#675d55; font-size:14px; }
.billing-form { display:grid; gap:12px; margin:22px auto 8px; max-width:460px; }
.billing-form input { min-height:58px; padding:0 18px; border:3px solid var(--ink); border-radius:14px; font:inherit; font-size:17px; }
.primary { min-height:60px; padding:14px 20px; border:3px solid var(--ink); border-radius:15px; background:linear-gradient(#ffdc61,#ffb820); box-shadow:0 6px 0 var(--ink); color:var(--ink); font:inherit; font-size:18px; font-weight:900; cursor:pointer; }
.primary:disabled { opacity:.62; cursor:wait; }
.secondary { display:inline-block; margin-top:18px; color:var(--ink); font-weight:800; }
.fine-print { margin:18px 0 0; color:#82766d; font-size:12px; }
@media (max-width:560px) { .billing-card { padding:28px 20px; border-radius:22px; } }