/* ════════════════════════════════════════════════════════════════
   MAUA INTAKE — conversion flow layer
   Loaded AFTER intake.css. Adds the multi-step wizard system + the
   shared conversion helpers (trust badges, embedded hero capture) that
   the new landing and the four stepped forms (LLC/EIN/ITIN/Tax) share.
   Reuses every brand token from intake.css — no new palette, no fonts.
   ════════════════════════════════════════════════════════════════ */

/* ── Wizard steps ───────────────────────────────────────────────
   One step visible at a time. The .wiz-step base is display:none; the
   active step animates in. Reduced-motion users get an instant swap. */
.wiz-step{display:none}
.wiz-step.is-active{display:block;animation:wizStepIn .42s var(--ease) both}
@keyframes wizStepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* The active step's first card leads with a quiet "step n" eyebrow if present */
.wiz-step .wiz-step-eyebrow{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.wiz-step .wiz-step-eyebrow::before{content:"";width:22px;height:1px;background:var(--gold)}

/* ── Wizard nav (Back / Continue). Submit stays the form's own. ── */
.wiz-nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--border);
}
.wiz-nav .wiz-back{order:1}
.wiz-nav .wiz-save-status{order:2;margin:0 auto;text-align:center;white-space:nowrap}
.wiz-nav .wiz-next{order:3}
.wiz-arrow-back{display:inline-block;transform:scaleX(-1)}
.wiz-back:hover .wiz-arrow-back{transform:scaleX(-1) translateX(5px)}
/* the form's Save/Submit row sits right below the nav on the final step */
.form-actions{margin-top:18px}

/* On the wizard, the in-card progress bar stays pinned for orientation */
.wiz-on .form-card{margin-bottom:16px}

/* ── Trust badges (Product-hero + form reassurance) ─────────────
   A compact row of credibility chips; hairline, on-brand, no fills. */
.trust-badges{
  display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none;
}
.trust-badges li{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text2);background:var(--white);
  border:1px solid var(--line-strong);border-radius:999px;padding:7px 13px;
}
.trust-badges li svg{width:14px;height:14px;color:var(--gold);flex:none;stroke-width:1.6}
.trust-badges li b{color:var(--navy);font-weight:600;letter-spacing:.04em}

/* ── Embedded hero capture (the wizard's step 1, living in a hero) ──
   Used by the landing: a small card that captures service + contact and
   hands off to the full form with the lead already saved. */
.capture{
  background:var(--white);border:1px solid var(--border);border-radius:14px;
  padding:24px 24px 22px;box-shadow:0 28px 64px -36px rgba(22,24,27,.4);
  position:relative;overflow:hidden;
}
.capture::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-light))}
.capture-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.capture-step{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.capture-title{font-family:var(--serif);font-weight:500;font-size:19px;color:var(--navy);letter-spacing:-.01em}
.capture .field{margin-bottom:13px}
.capture .field label{margin-bottom:6px}
/* service chooser as tactile chips */
.svc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.svc-chip{
  appearance:none;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:500;
  color:var(--text2);background:var(--paper);border:1px solid var(--border);border-radius:999px;
  padding:9px 14px;transition:all .18s var(--ease);
}
.svc-chip:hover{border-color:var(--line-strong);color:var(--navy)}
.svc-chip[aria-pressed="true"]{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.capture-cta{width:100%;justify-content:center;margin-top:6px}
.capture-fine{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:11px;text-align:center}
.capture-fine b{color:var(--navy);font-weight:600}

/* ── Product-hero scaffold (landing) ────────────────────────────
   Two-column: persuasion copy left, the live capture card right. The
   right column collapses below the copy on narrow screens. */
.product-hero{position:relative;border-bottom:1px solid var(--border);padding:64px 28px 52px;overflow:hidden}
.product-hero-inner{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.product-hero-copy{animation:fadeUp .8s var(--ease) both}
.product-hero-copy .hero-title{font-size:clamp(34px,5.4vw,66px)}
.product-hero-aside{animation:fadeUp .9s var(--ease) .08s both}
@media(max-width:920px){
  .product-hero-inner{grid-template-columns:1fr;gap:34px}
  .product-hero{padding:48px 20px 40px}
}

/* a soft evergreen wash behind the capture card — the one dark accent */
.product-hero::after{
  content:"";position:absolute;top:-20%;right:-12%;width:48%;height:120%;
  background:radial-gradient(60% 60% at 70% 30%,rgba(22,48,42,.06),transparent 70%);
  pointer-events:none;
}

/* ── Sticky mobile CTA (jump back into the form on long pages) ─── */
.flow-sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0));
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
  border-top:1px solid var(--border);
}
.flow-sticky-cta .btn{width:100%;justify-content:center}
@media(max-width:680px){.product-hero-inner .hero-cta .btn{flex:1 1 100%;justify-content:center}}

/* ── Onboarding handoff (success / resume next-steps tracker) ──── */
.handoff{margin-top:30px}
.handoff-track{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.handoff-step{display:grid;grid-template-columns:46px 1fr;gap:18px;align-items:start;padding:22px 6px;border-bottom:1px solid var(--border);text-align:left}
.handoff-num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:16px;background:rgba(169,132,76,.1);border:1px solid rgba(169,132,76,.32);color:var(--gold-deep)}
.handoff-step.is-now .handoff-num{background:var(--navy);color:var(--gold-light);border-color:var(--navy)}
.handoff-bd strong{display:block;font-family:var(--serif);font-weight:500;font-size:18px;color:var(--navy)}
.handoff-bd span{display:block;font-size:14px;color:var(--text2);line-height:1.6;margin-top:4px}
.handoff-when{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .wiz-step.is-active,.product-hero-copy,.product-hero-aside{animation:none}
  .wiz-back:hover .wiz-arrow-back{transform:scaleX(-1)}
}

/* ── Narrow screens ─────────────────────────────────────────────── */
@media(max-width:680px){
  .wiz-nav{flex-wrap:wrap}
  .wiz-nav .wiz-next{flex:1 1 100%;justify-content:center;order:1;margin-left:0}
  .wiz-nav .wiz-back{flex:1 1 100%;justify-content:center;order:2}
  .wiz-nav .wiz-save-status{flex:1 1 100%;order:3;text-align:center;margin:6px 0 0}
  .capture{padding:20px 18px}
  .handoff-step{grid-template-columns:38px 1fr;gap:14px}
}