/*
 * lead-form.css — the /get-started/ multi-step lead-capture funnel.
 * Authoritative styles for this bare page (parent GeneratePress CSS is dequeued;
 * only fonts.css + this file load). Tokens mirror the design-studio brand kit;
 * verified brand/contrast/glyph pass in qa/verify-lead-form.mjs.
 */

:root {
  --t-forest:#2D3D23; --t-forest-deep:#1e2b18; --t-forest-mid:#3a5030;
  --t-mid-green:#556154; --t-lime:#E3F599; --t-lime-bright:#C8E85A; --t-lime-bright-hover:#bfe247;
  --t-yellow:#FFED83; --t-tan:#CEC4A5; --t-bg-green:#F0F4D3; --t-bg-warm:#F5F3EC;
  --t-white:#FFFFFF; --t-border:#CEC4A5; --t-border-light:#e8e4d8; --t-text-muted:#556154;
  --t-placeholder:#9aa394; --t-error:#9a3b27;
  --font-body:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-sm:8px; --r-md:14px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --shadow-card:0 2px 20px rgba(45,61,35,0.10);
  --shadow-lift:0 8px 32px rgba(45,61,35,0.14);
}

* { box-sizing:border-box; }
html, body { margin:0; }
body {
  font-family:var(--font-body);
  font-variant-numeric:tabular-nums;          /* binding: numerals are DM Sans tabular */
  color:var(--t-forest);
  background:var(--t-bg-warm);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex; flex-direction:column;
}

/* ---- shell ---- */
.lf-top { display:flex; align-items:center; justify-content:center; padding:28px 20px 8px; }
.lf-logo { width:168px; height:auto; display:block; }
.lf-main { flex:1; display:flex; align-items:flex-start; justify-content:center; padding:24px 20px 64px; }
.lf-card {
  width:100%; max-width:560px;
  background:var(--t-white);
  border:1px solid var(--t-border-light);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-card);
  padding:40px 40px 32px;
}

/* ---- progress ---- */
.lf-progress { margin-bottom:28px; }
.lf-progress-meta {
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13px; font-weight:600; color:var(--t-text-muted); margin-bottom:8px; letter-spacing:0.01em;
}
.lf-progress-pct { color:var(--t-forest-mid); }
.lf-bar { height:6px; border-radius:var(--r-pill); background:var(--t-bg-green); overflow:hidden; }
.lf-bar-fill { height:100%; border-radius:var(--r-pill); background:var(--t-lime-bright); width:33.33%; transition:width .35s ease; }

/* ---- steps ---- */
.lf-step { display:none; }
.lf-step.is-active { display:block; animation:lf-fade .35s ease; }
@keyframes lf-fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.lf-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--t-forest-mid); margin:0 0 12px;
}
.lf-eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--t-lime-bright); }
.lf-q { font-size:27px; line-height:1.2; font-weight:700; margin:0 0 6px; letter-spacing:-0.01em; }
.lf-help { font-size:15px; color:var(--t-text-muted); margin:0 0 24px; line-height:1.5; }

.lf-field { margin-bottom:20px; }
.lf-field:last-of-type { margin-bottom:8px; }
.lf-label { display:block; font-size:14px; font-weight:600; margin-bottom:8px; }
.lf-input {
  width:100%; font-family:inherit; font-size:16px; color:var(--t-forest);
  background:var(--t-bg-warm);
  border:1.5px solid var(--t-border); border-radius:var(--r-md);
  padding:14px 16px; transition:border-color .2s ease, box-shadow .2s ease;
}
.lf-input::placeholder { color:var(--t-placeholder); }
.lf-input:focus {
  outline:none; border-color:var(--t-forest-mid);
  box-shadow:0 0 0 3px rgba(58,80,48,0.12); background:var(--t-white);
}

/* chip choices */
.lf-chips { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lf-chips.is-single { grid-template-columns:1fr; }
.lf-chip {
  position:relative; display:flex; align-items:center; gap:10px;
  font-size:15px; font-weight:500; color:var(--t-forest);
  background:var(--t-bg-warm);
  border:1.5px solid var(--t-border); border-radius:var(--r-md);
  padding:14px 16px; cursor:pointer; text-align:left;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.lf-chip:hover { border-color:var(--t-forest-mid); }
.lf-chip input { position:absolute; opacity:0; pointer-events:none; }
.lf-chip .lf-tick {
  width:18px; height:18px; border-radius:50%; flex:0 0 auto;
  border:1.5px solid var(--t-border); display:grid; place-items:center;
  transition:border-color .15s ease, background .15s ease;
}
.lf-chip .lf-tick::after { content:''; width:8px; height:8px; border-radius:50%; background:transparent; transition:background .15s ease; }
.lf-chip.is-checked { border-color:var(--t-forest); background:var(--t-bg-green); box-shadow:0 0 0 1px var(--t-forest); }
.lf-chip.is-checked .lf-tick { border-color:var(--t-forest); }
.lf-chip.is-checked .lf-tick::after { background:var(--t-forest); }

.lf-err { color:var(--t-error); font-size:13px; margin-top:6px; min-height:0; display:none; }
.lf-err.is-shown { display:block; }

/* ---- actions ---- */
.lf-actions { display:flex; align-items:center; gap:12px; margin-top:28px; }
.lf-btn {
  font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
  border-radius:var(--r-pill); padding:14px 28px; border:1.5px solid transparent;
  transition:transform .12s ease, background .2s ease, opacity .2s ease;
}
.lf-btn:active { transform:translateY(1px); }
.lf-btn-lime { background:var(--t-lime-bright); color:var(--t-forest); margin-left:auto; }
.lf-btn-lime:hover { background:var(--t-lime-bright-hover); }
.lf-btn-lime:disabled { opacity:.45; cursor:not-allowed; }
.lf-btn-ghost { background:transparent; color:var(--t-forest-mid); border-color:var(--t-border); }
.lf-btn-ghost:hover { border-color:var(--t-forest-mid); color:var(--t-forest); }

.lf-reassure { margin-top:18px; font-size:12.5px; color:var(--t-text-muted); text-align:center; }

/* ---- booking ---- */
.lf-booking { text-align:center; }
.lf-booking .lf-q { margin-bottom:10px; }
.lf-cal-mount { margin-top:24px; }
.lf-cal-mount .calendly-inline-widget { min-width:320px; height:680px; }
/* placeholder shown only until a real Calendly URL is configured */
.lf-cal-fallback {
  margin-top:24px; border:1.5px dashed var(--t-border); border-radius:var(--r-lg);
  background:var(--t-bg-warm); padding:32px 24px; text-align:left;
}
.lf-cal-tag {
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.1em;
  color:var(--t-forest); background:var(--t-yellow);
  padding:4px 10px; border-radius:var(--r-pill); margin-bottom:14px;
}
.lf-cal-fallback h3 { margin:0 0 12px; font-size:16px; }
.lf-prefill { font-size:13.5px; color:var(--t-forest); line-height:1.9; margin:0; }
.lf-prefill code { background:var(--t-white); border:1px solid var(--t-border-light); border-radius:var(--r-sm); padding:2px 7px; font-family:ui-monospace, Menlo, monospace; font-size:12.5px; }

@media (max-width:560px) {
  .lf-card { padding:28px 22px 24px; border-radius:var(--r-lg); }
  .lf-q { font-size:23px; }
  .lf-chips { grid-template-columns:1fr; }
  .lf-actions { flex-wrap:wrap; }
  .lf-btn-lime { width:100%; margin-left:0; order:-1; }
  .lf-btn-ghost { width:100%; }
}