/* /contact/ «Напишіть нам»: the lead form, in the cards and keys of the tariff pages (site.css, pricing.css). */
.contact-wrap { display: grid; gap: 28px; align-items: start; }
.contact-form, .contact-done {
  display: grid; gap: 16px; padding: 24px 20px; border-radius: var(--radius); background: var(--cap);
  border: 1px solid var(--line); box-shadow: var(--shadow); min-width: 0;
}
.contact-grid { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; font-weight: 600; font-size: .93rem; min-width: 0; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  width: 100%; box-sizing: border-box; font: 400 1rem/1.4 var(--body); color: var(--ink); background: var(--paper);
  border: 1px solid var(--edge); border-radius: 12px; padding: 11px 13px;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; border-color: var(--cobalt); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--rec); }
.contact-form .key { width: 100%; }
.contact-form .key[disabled] { opacity: .6; cursor: progress; }
.contact-out { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: .93rem; background: var(--paper-2); }
.contact-out.bad { color: var(--rec); }
.contact-note { margin: 0; font-size: .85rem; color: var(--muted); text-align: center; }
.contact-ok { margin: 0; font: 650 1.12rem/1.4 var(--display); color: var(--ok); }
/* The hidden field: off screen, not display:none (some bots skip those), never focused (tabindex -1). */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 720px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .contact-form, .contact-done { padding: 32px; }
}
@media (min-width: 1000px) {
  .contact-wrap { grid-template-columns: 1fr 1.25fr; gap: 48px; }
}