:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #16151a;
  background: #f4f1ff;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.shell { width: min(760px, calc(100% - 32px)); margin: 48px auto; }
header { margin-bottom: 24px; }
h1 { margin: 12px 0 8px; font-size: clamp(30px, 6vw, 48px); letter-spacing: -0.04em; }
header p { color: #65606d; max-width: 620px; }
.badge { display: inline-block; padding: 7px 10px; border-radius: 999px; background: #16151a; color: white; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; }
.card, .timeline, .notice { border: 1px solid #ddd5f6; background: rgba(255,255,255,.94); border-radius: 20px; padding: 24px; box-shadow: 0 20px 60px rgba(55, 35, 98, .10); }
.notice { margin-bottom: 16px; background: #fff7dc; border-color: #ead485; }
.notice.error { background: #fff0f0; border-color: #f2afaf; }
.timeline { margin-top: 16px; box-shadow: none; }
label { display: block; margin-bottom: 15px; font-weight: 700; }
input[type="text"], input[type="email"] { width: 100%; margin-top: 7px; padding: 13px 14px; border: 1px solid #cfc6e9; border-radius: 10px; font: inherit; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 14px; background: #f7f4ff; border-radius: 12px; }
.check input { margin-top: 3px; }
.bump span { display: grid; gap: 4px; }
.bump small { color: #6e6876; font-weight: 500; }
.payment-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.payment-heading h2 { margin-bottom: 4px; }
.payment-heading p { margin-top: 0; }
.total { font-size: 26px; white-space: nowrap; }
.payment-component { min-height: 190px; margin-top: 18px; padding: 12px; border: 1px solid #ddd5f6; border-radius: 14px; background: #fff; }
.security-note { color: #6e6876; font-size: 13px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
button, .button { appearance: none; border: 0; border-radius: 12px; padding: 14px 18px; background: #6d39e8; color: white; font: inherit; font-weight: 800; cursor: pointer; text-decoration: none; }
button.secondary { background: #ebe5fb; color: #322b42; }
button:disabled { opacity: .55; cursor: wait; }
.kind { text-transform: uppercase; letter-spacing: .08em; color: #6d39e8; font-size: 12px; font-weight: 900; }
.muted { color: #6e6876; }
.result { padding: 12px; border-radius: 10px; background: #eefbed; margin-top: 16px; }
ol { padding-left: 22px; }
li { margin: 7px 0; color: #5e5867; }
@media (max-width: 520px) { .shell { margin: 24px auto; } .card { padding: 18px; } .field-grid { grid-template-columns: 1fr; gap: 0; } .payment-heading { display: block; } button, .button { width: 100%; text-align: center; } }