:root { font: calc(15px * var(--sparky-font-scale, 1))/1.5 var(--sparky-font-family, system-ui, sans-serif); color: #24324a; background: #f4f6fc; }
* { box-sizing: border-box; }
body { margin: 0; }
main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 860px; margin: 8vh auto; padding: 20px; }
h1, #status { grid-column: 1 / -1; text-align: center; }
section { padding: 22px; border-radius: 14px; background: white; box-shadow: 0 2px 10px #24324a12; }
h2 { margin-top: 0; }
form { display: grid; gap: 12px; }
label { display: grid; gap: 5px; font-weight: 650; }
input, select, button { width: 100%; padding: 10px 12px; border: 1px solid #cbd3e5; border-radius: 9px; font: inherit; }
button { border: 0; color: white; background: #5a48e6; cursor: pointer; }
.terms-check { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; }
.terms-check input { width: auto; margin-top: 5px; }
.terms-check label, .terms-check span { display: block; font-weight: 500; }
#status { min-height: 24px; color: #b42318; }
.policy-view { display: block; max-width: 760px; margin: 4vh auto; }
.policy-view h1 { text-align: left; }
.policy-view section + section { margin-top: 18px; }
@media (max-width: 650px) { main { grid-template-columns: 1fr; margin-top: 20px; } h1, #status { grid-column: auto; } }