/* Tablet and down: keep the reset request card centered with calmer proportions. */
@media (max-width: 1024px) {
    .forgot-password-page .login-left {
        width: min(100%, 56rem) !important;
        padding: 1.5rem 1rem 0;
    }

    .forgot-password-page .l-container {
        margin-top: 5rem;
    }

    .forgot-password-page .forgot-password-card {
        padding: 1.5rem 1.5rem;
    }

    .forgot-password-page .forgot-password-card #submit,
    .forgot-password-page .forgot-password-card #submit.forgot-password-submit,
    .forgot-password-page .manual-reset-box a {
        width: min(100%, 22rem);
    }
}

/* Phone: reduce vertical offset and make the email flow fully fluid. */
@media (max-width: 767px) {
    .forgot-password-page .login-left {
        padding: 1rem 0.75rem 0;
    }

    .forgot-password-page .l-container {
        margin-top: 1.5rem;
    }

    .forgot-password-page .forgot-password-card {
        padding: 1.15rem 0.85rem;
    }

    .forgot-password-page .forgot-password-card h2 {
        font-size: clamp(1.35rem, 6vw, 1.65rem);
    }

    .forgot-password-page .forgot-password-card p,
    .forgot-password-page .manual-reset-link,
    .forgot-password-page .contact-status {
        font-size: 0.95rem;
    }

    .forgot-password-page .forgot-password-card #email,
    .forgot-password-page .forgot-password-card #submit,
    .forgot-password-page .forgot-password-card #submit.forgot-password-submit,
    .forgot-password-page .manual-reset-box,
    .forgot-password-page .manual-reset-box a {
        width: 100%;
    }
}

/* Small phones: trim side padding. */
@media (max-width: 479px) {
    .forgot-password-page .login-left {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    .forgot-password-page .forgot-password-card,
    .forgot-password-page .manual-reset-box {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}