.auth-page {
    --auth-ink: #172a46;
    --auth-muted: #65748b;
    --auth-accent: #e9a32b;
    --auth-line: #e4eaf1;
    padding: clamp(2rem, 6vw, 5rem) 1rem;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(22rem, 1.1fr);
    max-width: 1020px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(218, 226, 237, .9);
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 1.5rem 4rem rgba(27, 46, 73, .12);
}

.auth-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4.5rem);
    color: #fff;
    background: linear-gradient(145deg, #18385d, #102743 78%);
}

.auth-eyebrow {
    margin-bottom: 1.25rem;
    color: #f4bd5f;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.auth-intro h1 {
    max-width: 15ch;
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.1;
}

.auth-intro > p {
    max-width: 38ch;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 1.02rem;
    line-height: 1.7;
}

.auth-benefit {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .9);
    font-size: .92rem;
}

.auth-benefit i,
.auth-benefit-list i {
    color: #f4bd5f;
    font-size: 1.15rem;
}

.auth-benefit-list {
    display: grid;
    gap: 1rem;
    margin: 2rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .2);
    list-style: none;
}

.auth-benefit-list li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    color: rgba(255, 255, 255, .88);
    line-height: 1.5;
}

.auth-card {
    align-self: center;
    padding: clamp(2rem, 5vw, 4rem);
}

.auth-card-heading {
    margin-bottom: 1.5rem;
}

.auth-card-heading h2 {
    margin: 0 0 .4rem;
    color: var(--auth-ink);
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -.025em;
}

.auth-card-heading p {
    margin: 0;
    color: var(--auth-muted);
    line-height: 1.55;
}

.auth-form .mb-3 {
    margin-bottom: 1.1rem !important;
}

.auth-form label:not(.form-check-label) {
    margin-bottom: .45rem;
    color: #34445a;
    font-size: .9rem;
    font-weight: 600;
}

.auth-form .form-control {
    border-color: #d9e1eb;
    border-radius: .65rem;
    color: var(--auth-ink);
    font-size: .98rem;
}

.auth-form .form-control:focus {
    border-color: #5482b4;
    box-shadow: 0 0 0 .22rem rgba(49, 103, 161, .14);
}

.auth-form .form-control::placeholder {
    color: #9aa7b7;
}

.auth-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 1.5rem;
    margin: -.1rem 0 1.3rem;
}

.auth-form-options .mb-3 {
    margin: 0 !important;
}

.auth-form .form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.auth-form-options .form-check {
    margin: 0;
}

.auth-form .form-check-input {
    margin: 0;
}

.auth-form .form-check-label {
    color: #526176;
    font-size: .9rem;
}

.auth-text-link {
    color: #245b91;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}

.auth-text-link:hover {
    color: #163e68;
    text-decoration: underline;
}

.auth-submit {
    margin-top: .2rem;
    border: 0;
    border-radius: .65rem;
    background: #1e568b;
    box-shadow: 0 .4rem 1rem rgba(30, 86, 139, .2);
    font-size: 1rem;
    font-weight: 650;
}

.auth-submit:hover,
.auth-submit:focus {
    background: #173f69;
}

.auth-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    border-color: var(--auth-line);
    border-radius: .65rem;
    color: #34445a;
    font-size: .98rem;
    font-weight: 600;
}

.auth-google:hover {
    border-color: #c4d0df;
    background: #f8fafc;
    color: var(--auth-ink);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.35rem 0;
    color: #8995a5;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    height: 1px;
    flex: 1;
    background: var(--auth-line);
    content: '';
}

.auth-switch {
    margin: 1.5rem 0 0;
    color: var(--auth-muted);
    font-size: 1.2rem;
    text-align: center;
}

.auth-card-register {
    padding-top: clamp(2rem, 4vw, 3rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

.auth-card-register .auth-card-heading {
    margin-bottom: 1.2rem;
}

.auth-card-register .auth-divider {
    margin: 1rem 0 1.2rem;
}

.auth-card-register .auth-form .row {
    --bs-gutter-x: 1rem;
}

.auth-card-register .auth-form > .row .mb-3 {
    margin-bottom: 1.1rem !important;
}

.auth-page .alert {
    border-radius: .65rem;
}

@media (max-width: 767.98px) {
    .auth-page {
        padding: 1.25rem .75rem 2rem;
    }

    .auth-shell {
        grid-template-columns: 1fr;
        border-radius: 1rem;
    }

    .auth-intro {
        padding: 2rem 1.5rem;
    }

    .auth-intro h1 {
        font-size: 2rem;
    }

    .auth-benefit,
    .auth-benefit-list {
        margin-top: 1.25rem;
    }

    .auth-card {
        padding: 2rem 1.5rem;
    }
}