.public-body {
    background: radial-gradient(circle at 8% 12%, rgb(37 99 235 / 12%), transparent 34rem), var(--os2-slate-50);
}

.auth-layout {
    display: grid;
    width: min(1040px, 100%);
    min-height: calc(100vh - 172px);
    margin: 0 auto;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
    gap: clamp(2rem, 7vw, 6rem);
}

.auth-layout-single {
    width: min(430px, 100%);
    grid-template-columns: 1fr;
}

.auth-intro h1 {
    max-width: 650px;
    margin: 0 0 1rem;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.auth-intro > p:last-child { max-width: 580px; color: var(--os2-slate-500); font-size: 1.1rem; }
.auth-eyebrow { margin: 1rem 0 0.6rem; color: var(--os2-blue-600); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.auth-brand-mark { display: grid; width: 3.2rem; height: 3.2rem; margin-bottom: 1rem; place-items: center; border-radius: 0.85rem; color: #fff; background: linear-gradient(135deg, var(--os2-blue-600), var(--os2-navy-900)); font-weight: 800; }
.auth-card { height: auto; padding: clamp(1.4rem, 4vw, 2rem); }
.auth-card h2 { font-size: 1.5rem; font-weight: 750; }

@media (max-width: 767.98px) {
    .auth-layout { min-height: auto; padding: 1rem 0 2rem; grid-template-columns: 1fr; gap: 1.5rem; }
    .auth-intro h1 { font-size: 2.15rem; }
}