.field-error {
  font-size: 13px;
  color: #B42318;
  margin: 6px 0 0;
}

/* The inputs carry their border inline (from the design canvas), so the error colour needs
   !important to show; the focus ring turns red too, because an invalid field gets focus. */
input[aria-invalid="true"] {
  border-color: #B42318 !important;
}
input[aria-invalid="true"]:focus,
input[aria-invalid="true"]:focus-visible {
  outline-color: #B42318 !important;
}

#lead-status {
  font-size: 15px;
  margin: 12px 0 0;
  color: #0A1217;
}

[data-state="error"] #lead-status a {
  text-decoration: underline;
  color: inherit;
}

[data-state="loading"] button[type="submit"] {
  opacity: .7;
  cursor: progress;
}

#lead-form input:focus-visible,
#lead-form select:focus-visible,
#lead-form button:focus-visible {
  outline: 2px solid #0A1217;
  outline-offset: 2px;
}

/* Success keeps the fields in place so the layout does not jump. */
[data-state="success"] #lead-status {
  margin-top: 12px;
}
#lead-status:empty{margin:0}

/* Two steps in the same card. Each step is a column with the card's 14px rhythm. */
.lead-step { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lead-step[hidden] { display: none; }
.lead-head { display: flex; flex-direction: column; gap: 4px; }
.lead-title { margin: 0; font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -.8px; outline: none; }
.lead-hint { margin: 0; color: #4F575C; font-size: 15px; }
.lead-who { margin: 6px 0 0; color: #6B7378; font-size: 14px; overflow-wrap: anywhere; }
.lead-link, .lead-skip {
  font: inherit; background: none; border: 0; padding: 0; color: #0A1217; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #B8BFC4;
}
.lead-link { font-size: 14px; margin-left: 4px; }
.lead-link:hover, .lead-skip:hover { text-decoration-color: #0A1217; }
.lead-skip { font-size: 15px; align-self: center; min-height: 44px; padding: 0 12px; }
.lead-q-label { font-size: 14px; font-weight: 600; }
.lead-q-sub { color: #4F575C; font-size: 13px; margin-top: 2px; }
.lead-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lead-pill { padding: 0 16px; min-height: 44px; cursor: pointer; font-size: 15px; }

#lead-form .lead-title:focus-visible { outline: none; }
#lead-form .lead-link:focus-visible,
#lead-form .lead-skip:focus-visible,
#lead-form .lead-pill:focus-visible {
  outline: 2px solid #0A1217;
  outline-offset: 2px;
}

#lead-form button:disabled { cursor: progress; opacity: .6; }
#lead-form .lead-pill:disabled { opacity: .5; }
[data-state="loading"] #lead-send,
[data-state="loading"] #lead-skip { cursor: progress; }

/* Success replaces the card's content with the thanks line. */
[data-state="success"] #lead-status { font-size: 22px; font-weight: 500; letter-spacing: -.4px; margin: 0; padding: 8px 0; }
#lead-status:focus-visible { outline: none; }