@media (max-width: 720px) {
  html:has(#auth-shell:not(.hidden)),
  body:has(#auth-shell:not(.hidden)) {
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto;
  }

  #auth-shell:not(.hidden).shell {
    min-height:100dvh;
    height:auto;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto;
    overflow:visible;
  }

  #auth-shell:not(.hidden) .intro {
    min-height:auto;
    padding:calc(18px + env(safe-area-inset-top)) 20px 24px;
    gap:20px;
    overflow:hidden;
  }

  #auth-shell:not(.hidden) .intro-copy {
    max-width:none;
  }

  #auth-shell:not(.hidden) .intro .eyebrow {
    margin-bottom:10px;
  }

  #auth-shell:not(.hidden) .intro h1 {
    font-size:clamp(2.25rem,12vw,3.5rem);
    line-height:.94;
  }

  #auth-shell:not(.hidden) .lead {
    margin-top:18px;
    font-size:.96rem;
    line-height:1.5;
  }

  #auth-shell:not(.hidden) .security-note {
    margin:0;
    font-size:.78rem;
  }

  #auth-shell:not(.hidden) .account-panel {
    min-height:auto;
    padding:18px 14px calc(24px + env(safe-area-inset-bottom));
    display:block;
  }

  #auth-shell:not(.hidden) .card {
    width:100%;
    max-width:470px;
    margin:0 auto;
    padding:24px 20px;
    border-radius:18px;
  }

  #auth-shell:not(.hidden) .card h2 {
    font-size:clamp(1.75rem,8vw,2.35rem);
  }

  #auth-shell:not(.hidden) .muted {
    margin:10px 0 18px;
  }

  #auth-shell:not(.hidden) .tabs {
    margin:18px 0;
  }

  #auth-shell:not(.hidden) input {
    min-height:48px;
  }

  #auth-shell:not(.hidden) .terms {
    margin-bottom:0;
  }
}

@media (max-width: 420px), (max-height: 680px) and (max-width: 720px) {
  #auth-shell:not(.hidden) .intro-copy,
  #auth-shell:not(.hidden) .security-note {
    display:none;
  }

  #auth-shell:not(.hidden) .intro {
    padding-bottom:16px;
  }
}