/* === Lead form modal === */
.lf-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  z-index: 9999;
  opacity: 0;
  transition: opacity .18s ease;
}
.lf-overlay.lf-open { display: flex; opacity: 1; }
.lf-modal {
  background: var(--canvas, #fff);
  border-radius: var(--r-lg, 24px);
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  position: relative;
  padding: 32px;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.4);
  transform: translateY(8px);
  transition: transform .22s ease;
}
.lf-overlay.lf-open .lf-modal { transform: translateY(0); }

.lf-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface-card, #f6f6f3);
  display: grid; place-items: center;
  cursor: pointer; border: 0;
  color: var(--ink, #000);
  transition: background .15s;
}
.lf-close:hover { background: var(--hairline-soft, #e5e5e0); }
.lf-close svg { width: 18px; height: 18px; }

.lf-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: var(--surface-card, #f6f6f3);
  border-radius: 9999px;
  font-size: 12px; font-weight: 600;
  color: var(--charcoal, #262622);
  margin-bottom: 12px;
}
.lf-eyebrow svg { width: 12px; height: 12px; color: var(--primary, #e60023); }

.lf-title {
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-size: 22px; font-weight: 700;
  color: var(--ink, #000);
  letter-spacing: -0.3px;
  margin-bottom: 6px;
}
.lf-sub {
  font-size: 14px;
  color: var(--mute, #62625b);
  margin-bottom: 22px;
}

.lf-fields { display: flex; flex-direction: column; gap: 12px; }
.lf-field {
  display: flex; flex-direction: column; gap: 6px;
}
.lf-field label {
  font-size: 12px; font-weight: 600;
  color: var(--charcoal, #262622);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lf-field label .lf-required { color: var(--primary, #e60023); margin-left: 2px; }
.lf-field input, .lf-field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink, #000);
  background: var(--surface-soft, #fbfbf9);
  border: 1.5px solid var(--hairline, #dadad3);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}
.lf-field textarea { resize: vertical; min-height: 90px; }
.lf-field input:focus, .lf-field textarea:focus {
  outline: none;
  border-color: var(--primary, #e60023);
  box-shadow: 0 0 0 4px rgba(230,0,35,0.08);
}
.lf-field input::placeholder, .lf-field textarea::placeholder {
  color: var(--ash, #91918c);
}
.lf-field.lf-invalid input,
.lf-field.lf-invalid textarea {
  border-color: var(--primary, #e60023);
}
.lf-error {
  font-size: 12px;
  color: var(--primary, #e60023);
  display: none;
}
.lf-field.lf-invalid .lf-error { display: block; }

.lf-product-tag {
  background: var(--surface-card, #f6f6f3);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--charcoal, #262622);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px;
}
.lf-product-tag svg { width: 14px; height: 14px; color: var(--primary, #e60023); flex: none; }
.lf-product-tag b { color: var(--ink, #000); }

.lf-submit {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--primary, #e60023);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 16px 22px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  transition: background .15s;
  margin-top: 18px;
}
.lf-submit:hover { background: var(--primary-pressed, #cc001f); }
.lf-submit:disabled { opacity: 0.6; cursor: wait; }
.lf-submit svg { width: 16px; height: 16px; }

.lf-disclaimer {
  font-size: 11px;
  color: var(--ash, #91918c);
  line-height: 1.4;
  margin-top: 12px;
  text-align: center;
}
.lf-disclaimer a { color: var(--mute, #62625b); text-decoration: underline; }

.lf-fallback {
  font-size: 13px;
  color: var(--mute, #62625b);
  margin-top: 16px;
  padding: 12px;
  background: var(--surface-soft, #fbfbf9);
  border-radius: 10px;
  text-align: center;
}
.lf-fallback strong { color: var(--ink, #000); }

/* Success state */
.lf-success {
  display: none;
  text-align: center;
  padding: 12px 0;
}
.lf-success-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--success-pale, #c7f0da);
  display: grid; place-items: center;
  margin: 0 auto 16px;
  color: var(--success-deep, #103c25);
}
.lf-success-icon svg { width: 32px; height: 32px; }
.lf-success-title {
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-size: 22px; font-weight: 700;
  color: var(--ink, #000);
  margin-bottom: 8px;
}
.lf-success-text {
  font-size: 14px;
  color: var(--mute, #62625b);
  margin-bottom: 18px;
}
.lf-modal.lf-state-success .lf-form { display: none; }
.lf-modal.lf-state-success .lf-success { display: block; }
.lf-modal.lf-state-success .lf-title,
.lf-modal.lf-state-success .lf-sub,
.lf-modal.lf-state-success .lf-eyebrow,
.lf-modal.lf-state-success .lf-product-tag { display: none; }

@media (max-width: 480px) {
  .lf-modal { padding: 24px 22px; }
  .lf-title { font-size: 20px; }
}