/* Lead form fields (v3.html), after the Bencho "Label input": the label sits inside the field and
   lifts into the top edge when the field is focused or filled, the border opening under it. The
   placeholder shows only while the label is lifted, so the two never fight for the same spot. */

#lead-form .in-field { position: relative; }
#lead-form .in-field__label {
  position: absolute; z-index: 1; left: 16px; top: 26px; margin: 0 0 0 -4px; padding: 0 4px;
  font-size: 16px; line-height: 20px; font-weight: 400; color: var(--ink-muted); pointer-events: none; white-space: nowrap;
  transform: translateY(-50%);
  /* the white strip that opens the border under the lifted label grows out from its middle */
  background: linear-gradient(var(--white), var(--white)) center / 0 100% no-repeat;
  transition: top .42s cubic-bezier(.22, 1, .36, 1), font-size .42s cubic-bezier(.22, 1, .36, 1), line-height .42s cubic-bezier(.22, 1, .36, 1),
              background-size .42s cubic-bezier(.22, 1, .36, 1), color .2s;
}
#lead-form .in-field__label .optional { color: var(--ink-subtle); }
#lead-form .in-field:focus-within .in-field__label,
#lead-form .in-field:has(.in-field__input:not(:placeholder-shown)) .in-field__label,
#lead-form .in-field:has(.in-field__input:-webkit-autofill) .in-field__label {
  top: 0; font-size: 12px; line-height: 16px; background-size: 100% 100%;
}

#lead-form .in-field__control {
  min-height: 52px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--white);
  transition: border-color .2s ease;
}
#lead-form .in-field__control:hover { border-color: var(--ink-muted); }
#lead-form .in-field__control:focus-within { outline: 0; border-color: var(--black); }
#lead-form .in-field__control--area { padding: 15px 16px; }
#lead-form .in-field__input { font-size: 16px; }
#lead-form .in-field__input::placeholder { color: transparent; transition: color .2s ease; }
#lead-form .in-field__control:focus-within .in-field__input::placeholder { color: var(--ink-subtle); }
#lead-form .in-field.is-invalid .in-field__control { border-color: var(--danger-text); }

@media (prefers-reduced-motion: reduce) {
  #lead-form .in-field__label, #lead-form .in-field__control, #lead-form .in-field__input::placeholder { transition: none; }
}