@import url('./palette.css');
* { box-sizing: border-box; }
body { margin:0; padding:32px 16px; background:var(--brand-blue); color:var(--brand-ink); font:16px/1.6 system-ui,sans-serif; }
.payment-card { max-width:680px; margin:auto; padding:32px; border:1px solid white; border-radius:18px; background:white; box-shadow:var(--shadow-lg); }
h1 { font-size:32px; line-height:1.2; } h2 { font-size:22px; overflow-wrap:anywhere; }
a { color:var(--brand-blue-dark); }
.notice { padding:16px; background:#fff9df; border-left:4px solid var(--brand-yellow); }
label { display:block; font-weight:600; }
input { width:100%; padding:12px; font:inherit; border:1px solid #767676; border-radius:8px; }
button { margin:8px 8px 8px 0; padding:12px 18px; min-height:44px; border:1px solid var(--brand-yellow); border-radius:8px; background:var(--brand-yellow); color:var(--brand-ink); font:600 16px/1.4 system-ui,sans-serif; cursor:pointer; }
button:hover { background:var(--brand-yellow-hover); } button:disabled { opacity:.65; cursor:wait; }
.secondary { background:white; border-color:var(--brand-blue); color:var(--brand-blue-dark); }
:focus-visible { outline:3px solid var(--brand-blue-dark); outline-offset:3px; }
#invoice-help { color:#666464; font-size:14px; } #error { color:#b91c1c; }
[hidden] { display:none !important; }
@media(max-width:480px) { .payment-card { padding:20px; } h1 { font-size:28px; } button { width:100%; } }