/* Reuse login.css; preserve Signup's content and visual section order. */
@media (max-width: 1400px) {
  .signup-page .login-card > .signup-header {
    grid-column: 1 / -1;
    padding: calc(8px + env(safe-area-inset-top)) 10px 8px !important;
  }
  .signup-page .signup-header > div {
    font-size: clamp(40px, 11.8vw, 46px) !important;
    letter-spacing: -0.03em !important;
  }
  .signup-page .signup-intro { order: 1; gap: 16px !important; }
  .signup-page [data-pencil-name="textboxes"] { order: 2; }
  .signup-page .signup-terms { order: 3; }
  .signup-page .signup-actions { order: 4; gap: 16px !important; }

  .signup-page .signup-copy {
    min-width: 0;
    max-width: 100%;
    font-size: var(--login-text-size) !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .signup-page .signup-intro > .signup-copy { width: 100% !important; }
  .signup-page .login-divider { width: 100% !important; height: auto !important; }
  .signup-page :is([data-pencil-name="signup button"], [data-pencil-name="have account login button"]) {
    width: fit-content !important;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 32px !important;
  }
}

@media (max-width: 600px) {
  .signup-page .login-card > .signup-header {
    padding-top: calc(4px + env(safe-area-inset-top)) !important;
    padding-bottom: 4px !important;
  }
  .signup-page .signup-header > div { font-size: clamp(36px, 10.8vw, 42px) !important; }
}

@media (min-width: 601px) and (max-width: 1400px) {
  .signup-page .signup-header > div { font-size: 44px !important; }
}