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

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #f1f1f4;
}

.card {
    width: min(100%, 420px);
    padding: 42px 38px;
    border: 1px solid #e5e3ea;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 48px rgba(38, 32, 55, .08);
}

.eyebrow {
    margin: 0 0 12px;
    color: #7352c7;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.15rem); letter-spacing: -.03em; }
.lede { margin: 12px 0 28px; color: #6d6978; line-height: 1.55; }
label { display: block; margin-bottom: 8px; font-size: .9rem; font-weight: 650; }
input { width: 100%; padding: 13px 14px; border: 1px solid #d5d1df; border-radius: 10px; font: inherit; color: inherit; background: #fff; }
input:focus { outline: 3px solid rgba(115, 82, 199, .2); border-color: #7352c7; }
button { width: 100%; margin-top: 18px; padding: 13px 16px; border: 0; border-radius: 10px; color: #fff; background: #7352c7; font: inherit; font-weight: 700; cursor: pointer; }
button:hover { background: #6242b2; }
button:focus-visible { outline: 3px solid rgba(115, 82, 199, .3); outline-offset: 2px; }
button.secondary { color: #6242b2; background: #f0ecfb; }
.error { margin: -10px 0 20px; color: #a12f4a; font-size: .9rem; line-height: 1.45; }