/* Форма записи (#lead) и экран «Спасибо» (#thanks). */

.lead__grid { display: grid; gap: 32px; }
.lead__copy { max-width: 46ch; }
.lead__copy p { color: var(--ink-2); }

.lead-form { display: grid; gap: 16px; max-width: 480px; }

.lead-form__field { display: grid; gap: 6px; }
.lead-form__field label { font-weight: 600; font-size: .9375rem; }
.lead-form__field input {
  font: inherit;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
}
.lead-form__field input:focus-visible { border-color: var(--indigo); }

/* Honeypot: спрятано визуально и от мыши/тача, но остаётся в DOM-потоке —
   поле нельзя делать type="hidden", иначе простые боты его пропустят.
   aria-hidden + tabindex="-1" + autocomplete="off" не дают его увидеть
   человеку со скринридером или клавиатурой. */
.lead-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lead-form__consent { display: flex; align-items: flex-start; gap: 10px; }
.lead-form__consent input { margin-top: 4px; flex-shrink: 0; width: 18px; height: 18px; }
.lead-form__consent label { color: var(--ink-2); font-size: .9375rem; }
.lead-form__consent a { color: var(--indigo); }

/* Не прячем через display:none — это уберёт контейнер из дерева
   доступности, и role="alert" перестанет объявляться при появлении текста. */
.lead-form__errors { color: var(--ink); font-weight: 600; font-size: .9375rem; min-height: 1.2em; margin: 0; }

.lead-form__submit { margin-top: 8px; align-self: start; }
.lead-form__submit:disabled { opacity: .6; cursor: not-allowed; }

.thanks { max-width: 60ch; }
.thanks__portrait img { display: block; width: 100%; max-width: 120px; height: auto;
  border-radius: var(--r-card); margin-bottom: 16px; }
.thanks__bot {
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}
.thanks__bot h3 { margin: 0 0 8px; font-size: 1.0625rem; }
.thanks__bot p { color: var(--ink-2); margin: 0 0 8px; }
.thanks__bot a { color: var(--indigo); font-weight: 600; text-decoration: none; }
.thanks__bot a:hover { text-decoration: underline; }

@media (min-width: 900px) {
  .lead__grid { grid-template-columns: .9fr 1.1fr; align-items: start; }
}