/* Contact form: sits in the same hero, nav column and article layout as Support. */
.contact-form { display: grid; gap: 22px; max-width: 560px; margin-top: 28px; }
.contact-field { display: grid; gap: 8px; }
.contact-field label { font-size: 15px; font-weight: 600; color: var(--ink); }
.contact-field .optional { font-weight: 400; color: var(--ink-3); }
.contact-field :is(input, select, textarea) {
  width: 100%; padding: 13px 16px; border: 0; border-radius: var(--r-input);
  background: var(--sheet); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline);
  font: inherit; font-size: 16px; line-height: 1.4;
}
.contact-field textarea { min-height: 176px; resize: vertical; }
.contact-field :is(input, select, textarea):hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.contact-field :is(input, select, textarea):focus-visible { outline: 2px solid var(--dusk); outline-offset: 2px; border-radius: var(--r-input); }
.contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.contact-actions .btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.contact-note { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.contact-status { min-height: 1.5em; font-size: 16px; color: var(--ink-2); }
.contact-status[data-state="error"] { color: var(--ink); font-weight: 600; }
.contact-done { max-width: 560px; }