/* Smooth the photograph fade with intermediate stops and subtle compositing noise. */
@media(min-width:1060px){
 .login-background{mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.025) 6%,rgba(0,0,0,.09) 12%,rgba(0,0,0,.2) 18%,rgba(0,0,0,.35) 24%,rgba(0,0,0,.52) 30%,rgba(0,0,0,.68) 36%,rgba(0,0,0,.82) 42%,rgba(0,0,0,.92) 48%,rgba(0,0,0,.98) 54%,#000 62%);-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.025) 6%,rgba(0,0,0,.09) 12%,rgba(0,0,0,.2) 18%,rgba(0,0,0,.35) 24%,rgba(0,0,0,.52) 30%,rgba(0,0,0,.68) 36%,rgba(0,0,0,.82) 42%,rgba(0,0,0,.92) 48%,rgba(0,0,0,.98) 54%,#000 62%)}
 /* Grain belongs inside the masked photograph: an unmasked overlay creates a vertical seam. */
 .login-background::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.025;background:url('brand/gradient-noise.svg') repeat}
 .login-main:has(.login-background)::after{content:none}
}
.onboarding-card{width:100%;max-width:560px;box-sizing:border-box;margin:auto}
.onboarding-card h1{font-size:28px;font-weight:400;line-height:1.3;margin-bottom:16px}
.onboarding-card>p{font-size:14px;line-height:1.7;margin-bottom:24px}
.onboarding-form{gap:24px}.onboarding-field label{display:block;font-size:13px;margin-bottom:8px}
.onboarding-field input{height:48px;min-height:48px;width:100%;box-sizing:border-box;border-radius:14px;background:var(--field-bg);color:var(--text);padding:0 18px;border:0;font:400 14px Ubuntu,sans-serif}
.onboarding-field .help{font-size:12px;line-height:1.6;color:var(--muted);margin-top:8px}.onboarding-field .help ul{padding-left:18px;margin:8px 0}
.onboarding-form .errorlist{font-size:13px;color:var(--danger);margin:8px 0 0;padding-left:18px}
.onboarding-form .button{width:200px;max-width:100%}
@media(max-width:680px){.onboarding-card h1{font-size:25px}.onboarding-form .button{width:100%}}
@media(forced-colors:active){.login-background::after{display:none}}

/* Password setup shares the login photograph while keeping the form above it. */
.login-main>.onboarding-card{position:relative;z-index:1;margin:0;max-width:480px}