/* contact.css — page-unique styles for /v2/contact.
   Everything else (layout, card, buttons, inputs, field) comes from the shared
   primitives / components / forms layers. Scoped under .hint-v2, tokens only. */

/* ---- Hero intro copy (sits on the brand surface) ---- */
.hint-v2 .contact-hero .contact-intro {
  color: var(--text-on-brand-muted);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-3);
  max-width: 48ch;
}

/* ---- Form card ---- */
.hint-v2 .contact-card {
  margin-top: calc(-1 * var(--space-7));
}

/* ---- Inline error banner above the form ---- */
.hint-v2 .contact-error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--danger-bg);
  color: var(--danger-text);
  font-size: var(--text-label);
}
.hint-v2 .contact-error .v2-icon {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  flex-shrink: 0;
}

/* ---- Submit row (button + reCAPTCHA note, centered) ---- */
.hint-v2 .contact-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.hint-v2 .contact-recaptcha-note {
  font-size: var(--text-micro);
  color: var(--text-muted);
  text-align: center;
}

/* ---- Success state ---- */
.hint-v2 .contact-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}
.hint-v2 .contact-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-pill);
  background: var(--safe-bg);
  color: var(--safe);
  margin-bottom: var(--space-2);
}
.hint-v2 .contact-success-icon .v2-icon {
  width: 2rem;
  height: 2rem;
}
.hint-v2 .contact-ref-code {
  display: inline-block;
  background: var(--purple-100);
  color: var(--purple-700);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
}