@media (max-width: 620px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .auth-shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 100svh;
    padding: 20px 20px calc(28px + env(safe-area-inset-bottom));
  }

  .auth-shell .hero {
    width: 100%;
    padding: 16px 5px 8px;
  }

  .auth-shell .hero h1 {
    margin: 18px 0 14px;
    font-size: 30px;
    line-height: 1.18;
    overflow-wrap: anywhere;
  }

  .auth-shell .hero p {
    margin: 0;
    line-height: 1.45;
  }

  .auth-card {
    width: 100%;
    margin: 22px 0 0;
    padding: 0 5px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .auth-card .seg {
    margin-bottom: 20px;
    overflow-x: auto;
  }

  .auth-card .ajax,
  .auth-card label,
  .auth-card input,
  .auth-card select,
  .auth-card button {
    max-width: 100%;
  }

  .auth-card .hint {
    margin: 18px 0 0;
    padding-bottom: 8px;
  }
}