/* Login only: desktop keeps its green introduction; mobile prioritizes the form. */
.mobile-login-brand{display:none}
@media(max-width:899px){
 .login-page{display:flex;min-height:100vh;min-height:100svh;padding:0;background:#f8faf9}
 .login-page .login-shell{display:block;width:100%;max-width:440px;margin:auto;box-shadow:none;border-radius:0;overflow:visible}
 .login-page .intro{display:none}
 .login-page .login-card{padding:24px 24px max(20px,env(safe-area-inset-bottom));background:transparent}
 .mobile-login-brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0 0 24px;text-align:center}
 .mobile-login-brand .app-logo{width:64px;height:64px;object-fit:contain;display:block}
 .mobile-login-brand .small-mark{width:60px;height:60px;border-radius:18px;font-size:30px}
 .mobile-login-brand p{margin:0;max-width:330px;font-size:12px;line-height:1.5;letter-spacing:1px;font-weight:750;color:#17614e;overflow-wrap:anywhere}
 .login-page .login-card>.pill,.login-page .login-methods{display:none}
 .login-page .login-card h2{text-align:center;font-size:27px;line-height:1.2;margin:0 0 8px}
 .login-page .login-card>.muted{text-align:center;font-size:13px;line-height:1.5;margin:0 0 22px}
 .login-page .login-card label{font-size:12px;line-height:1.4;margin:16px 0 7px}
 .login-page .login-card form>label:first-of-type{margin-top:0}
 .login-page .login-card input:not([type=hidden]){height:50px;min-height:50px;font-size:16px;background:white;border:1px solid #dce7e1;border-radius:13px;padding:12px 14px}
 .login-page .login-card button{min-height:50px;margin-top:22px;border-radius:13px;box-shadow:0 6px 16px #075e4814}
 .login-page .login-card .help{font-size:11px;line-height:1.5;margin:20px 0 16px}
 .login-page .login-card .secure{font-size:10px;line-height:1.5;padding-top:14px}
 .login-page .login-card .alert{font-size:12px;line-height:1.5;padding:10px 12px;margin:0 0 14px}
}
@media(max-width:899px) and (max-height:650px){
 .login-page .login-card{padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom))}
 .mobile-login-brand{gap:8px;margin-bottom:16px}
 .mobile-login-brand .app-logo,.mobile-login-brand .small-mark{width:48px;height:48px}
 .login-page .login-card h2{font-size:24px}
 .login-page .login-card>.muted{margin-bottom:16px;font-size:12px}
 .login-page .login-card label{margin-top:12px}
 .login-page .login-card button{margin-top:16px}
 .login-page .login-card .help{margin:14px 0 10px}
 .login-page .login-card .secure{padding-top:10px}
}
/* Never clip fields when the keyboard, text zoom, or landscape reduces available space. */
@media(max-width:899px) and (max-height:450px){
 .login-page .login-shell{margin:0 auto}
 .mobile-login-brand{flex-direction:row;justify-content:center;margin-bottom:12px;text-align:left}
 .mobile-login-brand .app-logo,.mobile-login-brand .small-mark{width:36px;height:36px;flex-shrink:0}
 .mobile-login-brand p{font-size:10px;max-width:250px}
 .login-page .login-card>.muted,.login-page .login-card .secure{display:none}
 .login-page .login-card h2{font-size:21px;margin-bottom:14px}
}