/* /signup/ and /zh/signup/ (self-serve Phase 1a, 2026-09-28; redesign 2026
   R1b). Loads after /style.css and reuses its .card, .contact-form, .field,
   .btn-cta, .recaptcha-box and .form-status; chrome.css (header, footer,
   buttons) loads after this.

   R1b: style.css's variables are pointed at the 2026 tokens inside
   .su-wrap (custom properties inherit, so every shared component in the
   form takes the new palette, type and radii), and the page background
   follows. Every field, name, autocomplete value, message and the
   reCAPTCHA stay exactly as they were; only how they look changed. */

body:has(.su-wrap) { background: var(--hm-bg); color: var(--hm-ink); }

.su-wrap {
  --color-base: var(--hm-bg);
  --color-card: var(--hm-surface);
  --color-surface-2: var(--hm-surface-2);
  --color-accent-soft: var(--hm-accent-ink);
  --color-line-strong: var(--hm-line-strong);
  --color-ink-soft: var(--hm-ink-2);
  --color-ink: var(--hm-ink);
  --color-accent: var(--hm-accent);
  --color-white: var(--hm-ink);
  --font-body: var(--hm-font-sans);
  --font-display: var(--hm-font-display);
  --radius-cards: var(--hm-r-3);
  --radius-inputs: var(--hm-r-2);
  --radius-default: var(--hm-r-1);
  max-width: 30rem;
  margin: 0 auto;
  padding: clamp(40px, 8vw, 88px) var(--hm-gutter) clamp(72px, 10vw, 128px);
}

.su-intro h1 {
  margin: 0;
  font-family: var(--hm-font-display);
  font-size: clamp(36px, 6vw, 56px);
  font-weight: var(--hm-w-display);
  line-height: var(--hm-lh-display);
  letter-spacing: var(--hm-track-display);
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
}
.su-intro h1:lang(zh) { font-weight: 700; letter-spacing: 0; line-height: 1.15; }

.su-lede {
  margin-top: 16px;
  color: var(--hm-ink-2);
  font-size: var(--hm-fs-lede);
  line-height: 1.5;
  text-wrap: pretty;
}

.su-wrap .contact-form {
  display: grid;
  gap: 20px;
  margin: 32px 0 0;
  max-width: none;
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-r-3);
  background: var(--hm-surface);
  box-shadow: var(--hm-shadow-float);
}
.su-wrap .field { display: grid; gap: 8px; margin: 0; }
.su-wrap .field label { color: var(--hm-ink); font: 500 14px/1.3 var(--hm-font-sans); }
.su-wrap .field input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--hm-line-field);
  border-radius: var(--hm-r-2);
  background: var(--hm-bg);
  color: var(--hm-ink);
  font: 400 16px/1.2 var(--hm-font-sans);
  transition: border-color 120ms ease;
}
.su-wrap .field input:hover { border-color: var(--hm-ink-3); }
.su-wrap .field input:focus-visible { outline: 2px solid var(--hm-accent-ink); outline-offset: 2px; border-color: var(--hm-accent-ink); }
.su-wrap .field input[aria-invalid="true"] { border-color: var(--hm-danger); }
.su-wrap .form-status { min-height: 0; margin: 0; font-size: 14px; color: var(--hm-ink-2); }
.su-wrap .form-status:empty { display: none; }
.su-wrap .form-status.is-error { color: var(--hm-danger); }
.su-wrap .btn-cta-lg { width: 100%; }

.su-hint { margin: 0; font-size: 13px; color: var(--hm-ink-3); }

.su-legal { margin: 0; font-size: 13px; color: var(--hm-ink-2); line-height: 1.5; }

.su-legal a,
.su-alt a,
.su-hint a {
  color: var(--hm-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.su-legal a:hover,
.su-alt a:hover,
.su-hint a:hover { color: var(--hm-accent-ink); }

.su-alt {
  margin-top: 24px;
  font-size: 15px;
  color: var(--hm-ink-2);
  line-height: 1.6;
  text-align: center;
}

.su-step-h {
  margin: 0;
  font: var(--hm-w-h3) 26px/1.2 var(--hm-font-display);
  letter-spacing: var(--hm-track-h3);
  outline: none; /* focused by script for screen readers, not a control */
}

.su-sent { margin: 0; color: var(--hm-ink-2); font-size: 15px; line-height: 1.5; }
.su-sent strong { color: var(--hm-ink); font-weight: 600; overflow-wrap: anywhere; }

/* Six digits, readable at arm's length on a phone. */
.su-wrap .su-code {
  min-height: 60px;
  font: 600 26px/1 var(--hm-font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.35em;
  text-align: center;
}

.su-actions { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }

/* Secondary actions on the code step: plain text buttons, full hit area. */
.su-link {
  min-height: var(--hm-hit);
  padding: 0;
  border: 0;
  background: none;
  color: var(--hm-ink);
  font: 500 14px var(--hm-font-sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.su-link:hover { color: var(--hm-accent-ink); }
.su-link:disabled { color: var(--hm-ink-3); text-decoration: none; cursor: default; }

.su-step[hidden] { display: none; }

@media (max-width: 480px) {
  .su-wrap { padding-top: 32px; }
}

/* reCAPTCHA loads on first interaction (signup.js), so hold its 78px
   from the start: no layout shift when the widget renders. */
#su-recaptcha { min-height: 78px; }