.app-root--auth { background: #f3f7fa; }
.login { max-width: 1220px; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 80px; padding: 56px 44px; }
.login__brand { max-width: none; gap: 20px; }
.login__brand-top { margin-bottom: 10px; gap: 12px; }
.login__logo { width: 220px; }
.login__brand-sub { font-size: 10px; letter-spacing: 2px; font-weight: 650; }
.login__headline { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.15; font-weight: 700; letter-spacing: -1.4px; max-width: 15ch; }
.login__lede { max-width: 43ch; line-height: 1.7; font-size: 15px; }
.login__screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px; margin-top: 4px; background: #193b46; border: 1px solid #254b57; border-radius: 18px; box-shadow: 0 8px 22px rgb(25 59 70 / 10%); }
.login__screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; aspect-ratio: 16 / 11; border: 1px solid rgb(255 255 255 / 30%); border-radius: 8px; color: #fff; background: #007d90; font-size: 11px; font-weight: 600; }
.login__screen--2 { background: #2b8c94; }
.login__screen--3 { background: #466b80; }
.login__screen > .icon { width: 30px; height: 30px; stroke-width: 1.5; }
.login__highlights { margin-top: 0; gap: 12px; }
.login__highlight { font-size: 13px; }
.login__highlight > .icon { width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: #e3eff3; }
.login__card { border: 1px solid #d2dfe6; border-radius: 24px; box-shadow: 0 14px 48px rgb(24 49 63 / 8%); }
.login__card-body { padding: 36px; }
.login__card h2 { font-weight: 650; letter-spacing: -.5px; }
.login__entry-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: #e4f2f6; color: #00687e; margin-bottom: 24px; }
.login__card-sub { font-size: 13px; line-height: 1.6; margin-top: 8px; }
.login__form { margin-top: 28px; gap: 20px; }
.login__form .md-button { min-height: 48px; }
.login__form .md-field__control { background: #fbfcfd; border-radius: 10px; }
.login__help { margin-top: 24px; padding-top: 20px; border-top: 1px solid #e5ecf0; color: #536976; line-height: 1.7; }
.login__footnote { padding: 0 16px; font-size: 11px; }
.login__caps { background: #fff3d6; color: #725409; border: 1px solid #f0dfb9; border-radius: 8px; padding: 10px 12px; margin-top: -8px; }
.login__error { align-items: flex-start; line-height: 1.6; border: 1px solid #eebfc0; }
@media (max-width: 959px) { .login { gap: 40px; padding: 40px 28px; } .login__card-body { padding: 28px; } }
@media (max-width: 839px) {
  .login { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 26px; padding: 32px 20px; align-content: center; }
  .login__brand { gap: 12px; }
  .login__brand-top { margin: 0; }
  .login__logo { width: 180px; }
  .login__brand-sub, .login__screens, .login__highlights, .login__lede { display: none; }
  .login__headline { font-size: 28px; max-width: 20ch; letter-spacing: -.8px; }
  .login__card, .login__footnote { width: 100%; margin: 0; }
  .login__entry-icon { display: none; }
  .login__card-body { padding: 26px; }
}