/* Lead capture form + success panel. Used by content pages and /host. */
/* Lead capture ---------------------------------------------------------- */
.lead-capture {
  position: relative;
  max-width: 960px;
  margin: var(--space-8) auto var(--space-6);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-6);
  align-items: start;
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.lead-capture::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: linear-gradient(var(--brand), var(--secondary), var(--accent));
}
.lead-capture__pitch .eyebrow { color: var(--accent); }
.lead-capture__pitch h2 { margin: var(--space-2) 0 var(--space-3); font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.1; }
.lead-capture__pitch p { margin: 0 0 var(--space-3); color: var(--text-secondary); }
.lead-capture__list { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.lead-capture__list li { display: flex; gap: var(--space-2); align-items: baseline; font-size: var(--fs-small); }
.lead-capture__list li::before { content: "✓"; flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--border-color); border-radius: 50%; background: var(--spark); color: var(--ink-950); font-size: .7rem; font-weight: 700; }

.lead-form { display: grid; gap: var(--space-3); }
.lead-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.lead-form__field { display: grid; gap: 4px; }
.lead-form__field label { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.lead-form__field label .optional { text-transform: none; letter-spacing: 0; color: var(--text-tertiary); }
.lead-form input[type="email"],
.lead-form input[type="text"] {
  width: 100%;
  min-height: 46px;
  padding: var(--space-2) var(--space-3);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface-alt);
  color: var(--text-primary);
  font: inherit;
  transition: box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease, background var(--dur-base) ease;
}
.lead-form input:focus { outline: none; background: var(--bg-surface); box-shadow: var(--shadow-brand); transform: translate(-2px, -2px); }
.lead-form input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 3px 3px 0 var(--danger); animation: lead-shake .32s ease; }
.lead-form__error { color: var(--danger); font-size: var(--fs-small); font-weight: 600; }
.lead-form__consent { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); align-items: start; font-size: var(--fs-small); color: var(--text-secondary); }
.lead-form__consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--brand); }
.lead-form__consent .lead-form__error { grid-column: 2; }
.lead-form__consent a { color: var(--brand); }
.lead-form__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lead-form__submit { position: relative; justify-self: start; min-width: 220px; }
.lead-form__submit[aria-busy="true"] { color: transparent; pointer-events: none; }
.lead-form__submit[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 3px solid var(--text-on-brand);
  border-right-color: transparent;
  border-radius: 50%;
  animation: lead-spin .7s linear infinite;
}
.lead-form [data-lead-status] { min-height: 1.4em; margin: 0; font-size: var(--fs-small); color: var(--text-tertiary); }
.lead-form [data-lead-status][data-tone="error"] { color: var(--danger); font-weight: 600; }
.lead-form__mailto { justify-self: start; font-size: var(--fs-small); color: var(--brand); }
.lead-form__fine { margin: 0; font-size: .75rem; color: var(--text-tertiary); }

.lead-done { display: grid; gap: var(--space-4); padding: var(--space-4); border: var(--border); border-radius: var(--radius-lg); background: var(--spark-soft); box-shadow: var(--shadow-md); outline: none; }
.lead-done__head { display: flex; gap: var(--space-3); align-items: center; }
.lead-done__icon { width: 52px; height: 52px; flex: none; }
.lead-done__icon circle { fill: var(--spark); stroke: var(--border-color); stroke-width: 3; }
.lead-done__icon path { fill: none; stroke: var(--ink-950); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: lead-tick .5s .25s cubic-bezier(.65, 0, .35, 1) forwards; }
.lead-done__title { display: block; font-family: var(--font-display); font-size: var(--fs-h3); }
.lead-done__text { margin: 2px 0 0; color: var(--text-secondary); font-size: var(--fs-small); }
.lead-done__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.lead-done__kit { animation: lead-nudge 1.6s 1s ease-in-out 2; }
.lead-done__link { font-size: var(--fs-small); color: var(--brand); }

@keyframes lead-spin { to { transform: rotate(360deg); } }
@keyframes lead-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes lead-tick { to { stroke-dashoffset: 0; } }
@keyframes lead-nudge { 0%, 100% { transform: none; } 50% { transform: translate(-2px, -3px); box-shadow: var(--shadow-lg); } }

@media (max-width: 760px) {
  .lead-capture { grid-template-columns: 1fr; padding: var(--space-5) var(--space-4) var(--space-4) var(--space-5); gap: var(--space-4); margin-inline: var(--space-3); }
  .lead-form__row { grid-template-columns: 1fr; }
  .lead-form__submit { justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .lead-form *, .lead-done, .lead-done * { animation: none !important; transition: none !important; }
  .lead-done__icon path { stroke-dashoffset: 0; }
}