/* Inline lead capture — styles for the block added to the indexed pages.
 *
 * Deliberately a separate file rather than an addition to styles.v4.css:
 * that stylesheet is served immutable for a year, so editing it would leave
 * every returning visitor with an unstyled form until their cache expired.
 * Reuses the site's tokens and .form-group / .form-row rules.
 *
 * Fixed min-heights on the status line keep this from shifting layout when a
 * message appears — the site currently measures CLS 0 and should stay there.
 */

.inline-lead {
  background: var(--gold-tint, #F7F0DA);
  border: 1px solid var(--gold-border, #F0D68A);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 40px);
  max-width: 760px;
  margin: 0 auto;
}

.inline-lead__head {
  margin-bottom: 22px;
}

.inline-lead__head h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--text, #0A0E1A);
}

.inline-lead__head p {
  margin: 0;
  color: var(--text-muted, #4A5568);
  font-size: 0.98rem;
}

.inline-lead form {
  margin: 0;
}

.inline-lead .form-group label {
  color: var(--text-body, #2D3748);
}

.inline-lead textarea {
  width: 100%;
  font: inherit;
  font-size: 0.97rem;
  padding: 11px 13px;
  border: 1px solid var(--border-strong, #C4C0B5);
  border-radius: 9px;
  background: #fff;
  color: var(--text, #0A0E1A);
  resize: vertical;
  min-height: 84px;
}

.inline-lead textarea:focus,
.inline-lead input:focus {
  outline: 2px solid var(--gold, #D4AF37);
  outline-offset: -1px;
}

.inline-lead__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

.inline-lead__note {
  font-size: 0.84rem;
  color: var(--text-faint, #5D6783);
}

/* Reserve the line so an error message cannot shift the layout. */
.inline-lead__status {
  min-height: 1.3em;
  margin-top: 10px;
  font-size: 0.88rem;
}

.inline-lead__status.is-error {
  color: #B91C1C;
}

.inline-lead__done {
  background: var(--gold-tint, #F7F0DA);
  border: 1px solid var(--gold-border, #F0D68A);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 44px);
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.inline-lead__done strong {
  display: block;
  font-size: 1.2rem;
  color: var(--text, #0A0E1A);
  margin-bottom: 6px;
}

.inline-lead__done span {
  color: var(--text-muted, #4A5568);
}

@media (max-width: 640px) {
  .inline-lead__actions .btn {
    width: 100%;
    text-align: center;
  }
}