/* GameBalance (Steam top-up). Light retail look, same system as the other storefronts: neutral surfaces, one solid
   blue accent, no gradient text, glows or glass. Missing art is simply hidden (no placeholder blobs). */
:root{--bg:#f4f5f7;--surface:#fff;--sunken:#eceef2;--text:#15171c;--muted:#5d6370;--line:#dfe2e8;--accent:#2f55d4;--accent-ink:#fff;--accent-soft:#eaf0ff;--danger:#b42318;--radius:14px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--text);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:inherit}
h1,h2,h3{letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:12px;top:-60px;z-index:50;background:var(--text);color:#fff;padding:10px 14px;border-radius:10px;font-weight:700}
.skip-link:focus{top:12px}

.topbar{height:64px;display:flex;align-items:center;gap:20px;padding:0 max(16px,5vw);position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;text-decoration:none}
.brand-mark{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-weight:800}
.topbar nav{display:flex;gap:22px;margin-left:auto}
.topbar nav a{color:var(--muted);text-decoration:none}
.topbar nav a:hover{color:var(--text)}
.orders-button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer}
.orders-button span{display:inline-block;min-width:22px;margin-left:6px;padding:1px 7px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-size:13px}

.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);align-items:start;gap:40px;padding:44px max(16px,7vw) 32px;max-width:1300px;margin:0 auto}
.hero:has(.hero-art.art-missing){grid-template-columns:minmax(0,640px)}
.eyebrow{color:var(--accent);font-weight:700;font-size:14px}
.hero h1{font-size:clamp(32px,4.4vw,52px);line-height:1.08;margin:8px 0 12px;font-weight:800}
.hero h1 span{color:var(--accent)}
.hero-copy>p{color:var(--muted);font-size:18px;margin:0 0 22px;max-width:560px}
.hero-art img{display:block;width:100%;height:auto;border-radius:18px}
.art-slot.art-missing,.fallback-orb{display:none}

.topup-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:grid;gap:18px;max-width:640px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-weight:700;margin-bottom:8px;padding:0}
.region-tabs{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.region{flex:1;border:0;background:var(--surface);color:var(--text);padding:10px 8px;font:inherit;cursor:pointer}
.region+.region{border-left:1px solid var(--line)}
.region[aria-checked=true]{background:var(--text);color:#fff}
.field{display:grid;gap:6px}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.field label{font-weight:700}
.field input{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:12px 14px;font:inherit}
.field input:focus{border-color:var(--accent);outline:none}
.field input[aria-invalid=true]{border-color:var(--danger)}
.field small{color:var(--muted);font-size:13px}
.error{margin:0;min-height:0;color:var(--danger);font-size:14px}
.error:empty{display:none}
.link-btn{border:0;background:none;color:var(--accent);font:inherit;font-size:14px;cursor:pointer;padding:0;text-decoration:underline}
.amount-wrap{position:relative}
.amount-wrap input{font-size:20px;font-weight:700;padding-right:40px}
.amount-wrap span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700}
.quick-amounts{display:flex;flex-wrap:wrap;gap:8px}
.quick-amounts button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:99px;padding:6px 12px;font:inherit;font-size:14px;cursor:pointer}
.quick-amounts button:hover{border-color:var(--accent)}
.payment-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.pay-method{display:grid;gap:2px;text-align:left;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:12px;font:inherit;cursor:pointer}
.pay-method small{color:var(--muted);font-size:13px}
.pay-method[aria-checked=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}
.summary{background:var(--sunken);border-radius:10px;padding:12px 14px;display:grid;gap:4px}
.summary div{display:flex;justify-content:space-between;gap:12px;color:var(--muted)}
.summary strong{color:var(--text);font-weight:600;white-space:nowrap}
.summary .total{color:var(--text);font-weight:800;font-size:18px;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
.summary .total strong{font-weight:800}
.primary{border:0;background:var(--accent);color:var(--accent-ink);border-radius:10px;padding:13px 18px;font:inherit;font-weight:700;cursor:pointer;width:100%}
.primary:hover{filter:brightness(.93)}
.primary:disabled{opacity:.5;cursor:default}
.secondary{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:11px 16px;font:inherit;font-weight:600;cursor:pointer}
.fineprint{margin:0;color:var(--muted);font-size:13px}

.section{padding:44px max(16px,7vw);max-width:1300px;margin:0 auto}
.section-head h2,.section h2{font-size:clamp(24px,3vw,32px);margin:4px 0 18px}
.with-art{display:flex;justify-content:space-between;align-items:center;gap:20px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.steps article{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.steps b{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:14px}
.steps h3{margin:12px 0 6px}
.steps p{color:var(--muted);margin:0}
.step-art,.side-art,.support-art{width:72px;height:72px;border-radius:14px;overflow:hidden;margin-bottom:12px;background:var(--sunken)}
.step-art img,.side-art img,.support-art img{width:100%;height:100%;object-fit:contain}
.faq details{border-top:1px solid var(--line);padding:16px 0;max-width:900px}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{font-weight:700;cursor:pointer}
.faq p{color:var(--muted);margin:10px 0 0}
.support{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.support-copy{flex:1;min-width:240px}
.support-copy h2{margin:4px 0 6px}
.support-copy p{color:var(--muted);margin:0}

footer{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding:28px max(16px,7vw) 40px;border-top:1px solid var(--line);background:var(--surface);font-size:14px}
footer p{color:var(--muted);margin:0;max-width:640px}

dialog{width:min(480px,calc(100% - 28px));background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:24px}
dialog::backdrop{background:rgba(21,23,28,.5)}
dialog h2{margin:0 36px 14px 0}
dialog p{color:var(--muted)}
.close{position:absolute;right:14px;top:10px;border:0;background:none;color:var(--text);font-size:28px;line-height:1;cursor:pointer}
.confirm-line{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.confirm-line span{color:var(--muted)}
.note{padding:12px;border-radius:10px;background:#fff6e5;color:#7a4a00!important;font-size:14px}
.status{min-height:1.2em;color:var(--text)}
.order-row{display:grid;gap:2px;padding:12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.order-row small{color:var(--muted)}
.empty{text-align:center;color:var(--muted)}
.empty img{margin:0 auto}

@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-art{order:-1}.hero-art img{max-height:240px;object-fit:cover}.steps{grid-template-columns:1fr}.topbar nav{display:none}.orders-button{margin-left:auto}}
@media(max-width:420px){.region{font-size:14px;padding:10px 4px}footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ===== Personality: fintech (owner, 2026-09-27: the four light sites looked like one template) =====
   Wide two-column checkout: inputs on the left, a sticky dark-navy quote card with the pay button on the right,
   tabular numbers, small art in the corner, navy ink. Overrides the shared base above. */
:root{--bg:#f6f7fb;--text:#0f1b3d;--muted:#56607a;--line:#e1e5ef;--accent:#2f55d4}
body{font-variant-numeric:tabular-nums}
.hero{grid-template-columns:1fr;max-width:1180px;position:relative;padding-top:36px}
.hero:has(.hero-art.art-missing){grid-template-columns:1fr}
.hero-art{position:absolute;right:max(16px,7vw);top:24px;width:200px}
.hero-art img{border-radius:12px}
.hero-copy>p{max-width:640px}
.hero h1{font-weight:700;max-width:760px}
.topup-card{max-width:none;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:28px;align-items:start;padding:24px}
.topup-card>fieldset:nth-child(1){grid-column:1;grid-row:1}
.topup-card>.field:nth-child(2){grid-column:1;grid-row:2}
.topup-card>.field:nth-child(3){grid-column:1;grid-row:3}
.topup-card>fieldset:nth-child(4){grid-column:1;grid-row:4}
.topup-card>.summary{grid-column:2;grid-row:1 / span 2;position:sticky;top:84px;background:#0f1b3d;color:#fff;padding:20px;border-radius:12px}
.summary div{color:#b8c2dc}
.summary strong{color:#fff}
.summary .total{color:#fff;border-top-color:#ffffff33}
.topup-card>.primary{grid-column:2;grid-row:3;align-self:start}
.topup-card>.fineprint{grid-column:2;grid-row:4}
.payment-methods{grid-template-columns:1fr 1fr}
.region[aria-checked=true]{background:var(--accent)}
@media(max-width:900px){.hero-art{position:static;width:auto}.topup-card{grid-template-columns:1fr}.topup-card>*{grid-column:1!important;grid-row:auto!important;position:static!important}}