.recovery-body{
    overflow:hidden;
}

.recovery-page{
    min-height:100dvh;
    height:100dvh;
    padding:
        calc(var(--safe-top) + 16px)
        calc(var(--safe-right) + var(--flare-page-gutter))
        calc(var(--safe-bottom) + 16px)
        calc(var(--safe-left) + var(--flare-page-gutter));
}

.recovery-card{
    width:min(100%, 430px);
    max-width:430px;
    padding:clamp(20px, 4dvh, 28px) clamp(18px, 5vw, 28px);
}

.recovery-card .login-wordmark{
    width:clamp(156px, 44vw, 198px);
    margin-bottom:clamp(10px, 2dvh, 16px);
}

.recovery-card h2{
    font-size:clamp(28px, 7vw, 36px);
    margin-bottom:12px;
}

.recovery-kicker{
    display:block;
    margin-bottom:8px;
    color:#ff5a9d;
    font-size:11px;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.recovery-card .login-subtitle{
    max-width:360px;
    margin-right:auto;
    margin-left:auto;
    line-height:1.55;
}

.recovery-return{
    margin-top:16px;
    display:inline-block;
    color:var(--flare-secondary-text);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}

.recovery-return:hover{
    color:white;
}

.login-message.error{
    color:#ff6a86;
}

.login-btn:disabled{
    opacity:.58;
    cursor:wait;
}

@media (max-width:600px){
    .recovery-page{
        padding:
            calc(var(--safe-top) + 14px)
            calc(var(--safe-right) + 16px)
            calc(var(--safe-bottom) + 14px)
            calc(var(--safe-left) + 16px);
        align-items:center;
    }

    .recovery-card{
        padding:22px 18px 24px;
        border-radius:26px;
    }
}