.lms-auth-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(720px 500px at 4% -12%, color-mix(in srgb, var(--theme-primary) 11%, transparent), transparent 62%),
        radial-gradient(520px 380px at 100% 118%, color-mix(in srgb, var(--theme-accent) 7%, transparent), transparent 62%),
        var(--lms-bg);
    color: var(--lms-ink);
    font-family: var(--lms-font);
    padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
}

.lms-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}

.lms-auth__promo { min-width: 0; }
.lms-auth__promo-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--theme-primary); margin-bottom: .8rem;
}
.lms-auth__promo-title { font-size: clamp(1.75rem, 3.2vw, 2.6rem); font-weight: 700; color: var(--lms-heading); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 1.4rem; }
.lms-auth__promo-art {
    display: block; width: 100%; max-width: 540px; height: auto;
    border-radius: var(--lms-radius-lg);
    background: var(--lms-bg);
    box-shadow: var(--lms-shadow-sm);
}
.lms-auth__promo-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .8rem; max-width: 460px; }
.lms-auth__promo-list li { display: flex; align-items: flex-start; gap: .7rem; font-size: .96rem; color: var(--lms-ink-soft); }
.lms-auth__promo-list .bi {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--theme-primary-soft); color: var(--theme-primary); font-size: .75rem;
}

.lms-auth__card {
    background: var(--lms-bg);
    border: 1px solid var(--lms-border);
    border-radius: var(--lms-radius-lg);
    box-shadow: var(--lms-shadow);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}
.lms-auth__title { font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 700; color: var(--lms-heading); letter-spacing: -.02em; margin: 0 0 .45rem; }
.lms-auth__lead { color: var(--lms-ink-soft); font-size: .98rem; line-height: 1.6; margin: 0 0 1.6rem; }

.lms-auth__form { display: grid; gap: 1.05rem; }

/* An alert sits between the lead paragraph and the form, and has to carry its
   own spacing on the form side — the lead's bottom margin only reaches it. */
.lms-alert + .lms-auth__form { margin-top: 1.6rem; }
.lms-alert + .lms-alert { margin-top: .75rem; }

.lms-auth__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }

.lms-auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.lms-auth__row a { font-size: .88rem; font-weight: 600; color: var(--theme-primary); text-decoration: none; }
.lms-auth__row a:hover { text-decoration: underline; color: var(--theme-primary); }

.lms-auth__alt { margin: 1.4rem 0 0; font-size: .92rem; color: var(--lms-ink-soft); text-align: center; }
.lms-auth__alt a { color: var(--theme-primary); font-weight: 700; text-decoration: none; }
.lms-auth__alt a:hover { text-decoration: underline; color: var(--theme-primary); }

@media (max-width: 991.98px) {
    .lms-auth { grid-template-columns: 1fr; }
    .lms-auth__promo { text-align: center; }
    .lms-auth__promo-art { margin-inline: auto; max-width: 420px; }
    .lms-auth__promo-list { margin-inline: auto; text-align: left; }
    .lms-auth__card { max-width: 480px; width: 100%; margin-inline: auto; }
}
@media (max-width: 575.98px) {
    .lms-auth__grid { grid-template-columns: 1fr; }
    .lms-auth__promo-list { display: none; }
}