/* Log in / Sign up — tiles and fields from A3. */
.auth { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
@container (max-width: 820px) { .auth { grid-template-columns: minmax(0, 1fr); } .auth__side { order: 2; } }
.auth__card { padding: 28px; display: grid; gap: 16px; max-width: 640px; width: 100%; justify-self: center; }
.auth--wide .auth__card { max-width: 760px; }
@media (max-width: 767px) { .auth__card { padding: 18px; } }
.auth__card h1 { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; }
.auth__lead { color: var(--ink-2); }
.auth__alt { font-size: 14px; color: var(--ink-2); }
.auth__demo { margin-top: 6px; font-size: 13px; }
.auth__side { padding: 20px; display: grid; gap: 14px; position: sticky; top: var(--sticky-top); }
@container (max-width: 820px) { .auth__side { position: static; } }
.auth__side h2 { font-size: 16px; font-weight: 800; }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.forgot { justify-self: start; font-size: 14px; position: relative; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; counter-reset: s; }
.steps li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-s); background: var(--surface-2); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.steps span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); font-size: 12px; flex: none; }
.steps .is-cur { background: var(--ink); color: #fff; }
.steps .is-cur span { background: var(--accent); color: var(--accent-ink); }
.steps .is-done span { background: var(--success); color: #fff; }
@media (max-width: 479px) { .steps li { font-size: 0; justify-content: center; } .steps li span { font-size: 12px; } }
.step__nav { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.step__nav [data-step-next], .step__nav [data-step-submit] { margin-left: auto; }
.reg-done { display: grid; gap: 10px; justify-items: start; padding: 18px; border-radius: var(--r-m); background: var(--surface-2); }
.reg-done h2 { font-size: 22px; font-weight: 800; }
.nextsteps { list-style: decimal; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.form__ok .icon { width: 20px; height: 20px; flex: none; }
.form__ok p { color: var(--ink); font-weight: 500; }