/* Keep the sign-in form close to the top on phones, including when rotated. */
@media (max-width:760px), (max-width:980px) and (max-height:520px) and (orientation:landscape) {
  html { -webkit-text-size-adjust:100%; }
  .login-page {
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:100vh;
    min-height:100svh;
  }

  .login-intro {
    flex:none;
    min-height:0;
    padding:20px 22px;
    padding-top:calc(20px + env(safe-area-inset-top));
    padding-left:max(22px, env(safe-area-inset-left));
    padding-right:max(22px, env(safe-area-inset-right));
  }

  .login-intro .brand-logo { width:186px; }
  .login-intro .brand.brand--platform>small { margin-top:9px; }
  .login-intro h1,
  html[dir="rtl"] .login-intro h1 {
    max-width:none;
    margin:18px 0 0;
    font-size:21px;
    line-height:1.4;
    letter-spacing:-.45px;
  }
  .login-intro h1 br { display:none; }
  .login-intro>p,
  .login-map-art,
  .login-footer { display:none; }

  .login-main,
  html[dir="rtl"] .login-main {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:20px;
    min-width:0;
    width:100%;
    max-width:484px;
    margin:0 auto;
    padding:20px 22px 28px;
    padding-left:max(22px, env(safe-area-inset-left));
    padding-right:max(22px, env(safe-area-inset-right));
    padding-bottom:max(28px, env(safe-area-inset-bottom));
  }

  .login-main>.language-switch {
    position:static;
    align-self:flex-end;
    max-width:100%;
  }
  .login-main>.language-switch button {
    min-width:56px;
    min-height:44px;
    padding:9px 12px;
    font-size:13px;
  }

  .login-card { min-width:0; max-width:none; }
  .login-card h2,
  html[dir="rtl"] .login-card h2 {
    font-size:25px;
    line-height:1.35;
    margin-bottom:10px;
  }
  .login-card>p {
    color:#5f7590;
    font-size:14px;
    line-height:1.6;
    margin-bottom:24px;
  }
  .login-card .eyebrow { display:none; }
  .login-card label {
    margin:18px 0 8px;
    font-size:14px;
    line-height:1.5;
  }
  .login-card input:not([type="hidden"]) {
    min-height:48px;
    padding:12px 13px;
    font-size:16px;
    line-height:1.4;
    scroll-margin-block:24px;
  }
  .login-card .button,
  html[dir="rtl"] .login-card .button {
    min-height:48px;
    margin-top:24px;
    padding:12px 16px;
    font-size:16px;
    line-height:1.4;
  }
  .login-help,
  html[dir="rtl"] .login-help {
    color:#63768c;
    margin-top:24px;
    padding-top:18px;
    font-size:12px;
    line-height:1.7;
  }
  .login-card .notice {
    font-size:14px;
    overflow-wrap:anywhere;
  }
}

@media (max-width:980px) and (max-height:520px) and (orientation:landscape) {
  .login-page { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
  .login-intro {
    min-height:100vh;
    min-height:100svh;
    align-self:stretch;
    padding-bottom:max(20px, env(safe-area-inset-bottom));
  }
  .login-intro h1,
  html[dir="rtl"] .login-intro h1 { max-width:260px; font-size:24px; }
  .login-main,
  html[dir="rtl"] .login-main { gap:12px; padding-top:16px; }
  .login-card h2,
  html[dir="rtl"] .login-card h2 { font-size:22px; }
  .login-card>p { margin-bottom:12px; font-size:13px; }
  .login-card label { margin-top:12px; }
  .login-card .button,
  html[dir="rtl"] .login-card .button { margin-top:18px; }
}