/* Sign-in layout corrections loaded after the compiled application styles. */
.app-shell.account-mode:not(.native-shell) {
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(16px, 2.5vw, 28px);
  overflow-x: hidden;
  overflow-y: auto;
}

.app-shell.account-mode:not(.native-shell) .account-start-screen {
  align-items: center;
  min-height: calc(100vh - clamp(32px, 5vw, 56px));
  min-height: calc(100dvh - clamp(32px, 5vw, 56px));
  padding: clamp(300px, 43vh, 460px) 0 clamp(130px, 17vh, 180px);
  box-sizing: border-box;
}

.app-shell.account-mode:not(.native-shell) .account-start-card,
.app-shell.account-mode:not(.native-shell) .account-info-box {
  width: min(100%, 500px);
}

/* Pricing is intentionally hidden until the payment offer is ready. */
.app-shell.account-mode .account-payment-pill {
  display: none !important;
}

@media (max-height: 820px) and (min-width: 721px) {
  .app-shell.account-mode:not(.native-shell) .account-start-screen {
    align-items: end;
    padding-top: clamp(250px, 35vh, 330px);
    padding-bottom: 112px;
  }

  .app-shell.account-mode:not(.native-shell) .account-welcome-box,
  .app-shell.account-mode:not(.native-shell) .account-signin-box {
    height: auto;
    min-height: 270px;
  }
}

@media (max-width: 720px) {
  .app-shell.account-mode:not(.native-shell) {
    padding: 14px;
  }

  .app-shell.account-mode:not(.native-shell) .account-start-screen {
    min-height: calc(100dvh - 28px);
    padding: clamp(220px, 34vh, 300px) 0 118px;
  }

  .app-shell.account-mode:not(.native-shell) .account-info-box {
    padding: 22px 18px;
    border-radius: 22px;
  }

  .app-shell.account-mode:not(.native-shell) .account-privacy-footer {
    right: 8px;
    bottom: 8px;
    left: 8px;
  }
}

@media (max-height: 640px) {
  .app-shell.account-mode:not(.native-shell) .account-start-screen {
    align-items: start;
    padding-top: 190px;
    padding-bottom: 104px;
  }

  .app-shell.account-mode:not(.native-shell) .account-privacy-footer {
    position: absolute;
  }
}