/* RA Movers — guided instant estimate. Work Sans · black CTA · gold #ECCD42 + purple #951CF2 accents. */
:root {
  --ink: #1c1b22; --ink-2: #5a5863; --line: rgba(28,27,34,0.10); --bg: #0f0e13;
  --surface: #ffffff; --glass: rgba(255,255,255,0.70); --glass-2: rgba(255,255,255,0.55);
  --gold: #d9b64e; --gold-soft: #e7cf86; --gold-deep: #8a6f0e; --purple: #951cf2;
  --r: 22px; --r-sm: 13px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Work Sans", system-ui, sans-serif; color: var(--ink); }

/* STAGE — dark, refined backdrop so the white card pops */
.stage {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 36px 18px 26px; gap: 20px;
  background:
    radial-gradient(60% 50% at 15% 5%, rgba(149,28,242,0.14), transparent 60%),
    radial-gradient(55% 45% at 92% 96%, rgba(217,182,78,0.10), transparent 55%),
    linear-gradient(165deg, #17151d 0%, #100e14 55%, #0b0a0e 100%);
}

/* WIZARD CARD */
.wizard {
  width: 100%; max-width: 560px; border-radius: var(--r);
  background: #ffffff;
  border: 1px solid rgba(28,27,34,0.06);
  box-shadow: 0 50px 110px -24px rgba(0,0,0,0.6), 0 18px 44px -14px rgba(0,0,0,0.42);
  padding: 34px 40px 26px; position: relative;
}
.wizard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.brand img { height: 38px; width: auto; }
.head-call {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--ink);
  font-weight: 700; font-size: 0.86rem; border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 13px;
}
.head-call svg { color: var(--purple); }

/* PROGRESS */
.progress { height: 5px; background: #efeef2; border-radius: 999px; overflow: hidden; }
.progress__bar { height: 100%; width: 20%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--purple)); transition: width .45s cubic-bezier(.4,0,.2,1); }
.step-meta { display: flex; justify-content: space-between; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin: 12px 2px 26px; }

/* STEPS */
.steps { position: relative; }
.step { display: none; }
.step.is-active { display: block; }
.step__q { font-size: clamp(1.5rem, 4.2vw, 1.8rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; margin: 0 0 10px; }
.step__hint { color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; margin: 0 0 28px; }
.mini-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); margin: 24px 0 11px; }

/* OPTION CARDS / PILLS */
.opts { display: grid; gap: 12px; }
.opts--2 { grid-template-columns: 1fr 1fr; }
.opts--list { grid-template-columns: 1fr; }
.opts--row { display: flex; flex-wrap: wrap; gap: 9px; }
.opt {
  font-family: inherit; text-align: left; cursor: pointer; background: #fbfbfc;
  border: 1.5px solid #e6e5ea; box-shadow: 0 1px 2px rgba(28,27,34,0.03); border-radius: var(--r-sm); padding: 17px 18px;
  display: flex; flex-direction: column; gap: 3px; transition: border-color .14s, box-shadow .14s, transform .08s, background .14s;
}
.opt--big { align-items: center; text-align: center; padding: 30px 18px; gap: 11px; }
.opt__ic { line-height: 0; color: var(--purple); }
.opt__ic svg { width: 30px; height: 30px; }
.opt[aria-pressed="true"] .opt__ic { color: var(--ink); }
.opt__t { font-weight: 700; font-size: 1rem; }
.opt__s { font-size: 0.8rem; color: var(--ink-2); }
.opt:hover { border-color: #c9c8d0; transform: translateY(-1px); }
.opts--list .opt { flex-direction: row; align-items: center; justify-content: space-between; }
.opt[aria-pressed="true"] { border-color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1.6px var(--ink), 0 8px 20px rgba(27,26,32,0.1); }
.opt[aria-pressed="true"] .opt__t::after { content: " ✓"; color: var(--gold-deep); }

.pill {
  font-family: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; background: #fff;
  color: var(--ink-2); border: 1.5px solid #e6e5ea; border-radius: 999px; padding: 11px 19px; transition: all .14s;
  box-shadow: 0 1px 2px rgba(33,31,40,0.04);
}
.pill:hover { border-color: #cfcabf; color: var(--ink); transform: translateY(-1px); }
.pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 8px 18px rgba(33,31,40,0.18); }

/* INPUTS */
.ifield { margin-bottom: 12px; }
.ifield label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; }
.ifield--half { max-width: 220px; }
.irow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input { width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink); background: #fafafb;
  border: 1.5px solid #e6e5ea; border-radius: 11px; padding: 14px 15px; transition: border-color .14s, box-shadow .14s, background .14s; }
input::placeholder { color: #9b99a4; }
input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(149,28,242,0.13); background: #fff; }
input.invalid { border-color: #e0566a; box-shadow: 0 0 0 3px rgba(224,86,106,0.12); }
.dist-pill { display: inline-block; margin: 4px 0 0; font-size: 0.82rem; font-weight: 700; color: var(--gold-deep); background: rgba(217,182,78,0.16); padding: 6px 12px; border-radius: 999px; }
/* Google PlaceAutocompleteElement (new web component) — fill width, brand font */
.ac-wrap { width: 100%; }
.ac-el, gmp-place-autocomplete { width: 100%; display: block; font-family: "Work Sans", system-ui, sans-serif; --gmp-mat-color-surface: #fafafb; }

/* REVEAL */
.reveal-screen { animation: none; }
.reveal-screen .reveal { background: linear-gradient(165deg, #1b1a20, #2a2832); color: #fff; border-radius: var(--r-sm); padding: 28px 28px 26px; margin-bottom: 16px; position: relative; overflow: hidden; }
.reveal-thanks { display: block; text-align: center; font-size: 0.88rem; font-weight: 700;
  color: #0c6b3a; background: rgba(38,166,108,0.14); border: 1px solid rgba(38,166,108,0.32);
  border-radius: 11px; padding: 11px 14px; margin: 4px 0 2px; }
.reveal::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--gold), var(--purple)); }
.reveal__kicker { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; font-weight: 700; color: #b9b7c4; margin: 4px 0 8px; }
.reveal__figure { display: flex; align-items: baseline; }
.reveal__amount { font-size: clamp(2.2rem, 8vw, 3rem); font-weight: 900; letter-spacing: -0.03em; color: var(--gold); }
.reveal__note { font-size: 0.82rem; color: #c8c6d2; margin: 8px 0 14px; }
.reveal__incl { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,0.12); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reveal__incl li { position: relative; padding-left: 20px; font-size: 0.82rem; color: #eceaf2; }
.reveal__incl li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 800; }
.form-status { font-size: 0.9rem; font-weight: 600; text-align: center; min-height: 1em; margin-top: 6px; }
.form-status.ok { color: #2bb673; } .form-status.err { color: #ff7b8e; }

/* FOOT NAV */
.wizard__foot { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.nav-back { font-family: inherit; background: none; border: none; cursor: pointer; color: var(--ink-2); font-weight: 600; font-size: 0.92rem; padding: 8px 4px; }
.nav-back:hover { color: var(--ink); }
.foot-est { margin-left: auto; text-align: right; line-height: 1.1; }
.foot-est span { display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); font-weight: 700; }
.foot-est strong { font-size: 1.05rem; color: var(--gold-deep); font-weight: 800; }
.nav-next { font-family: inherit; margin-left: auto; cursor: pointer; border: none; background: var(--ink); color: #fff; font-weight: 700; font-size: 1rem; border-radius: 11px; padding: 13px 26px; box-shadow: 0 12px 24px rgba(27,26,32,0.28); transition: transform .12s, background .18s; }
.foot-est + .nav-next { margin-left: 12px; }
.nav-next:hover { transform: translateY(-2px); background: #000; }
.nav-next:disabled { opacity: 0.55; cursor: progress; transform: none; }

.stage-trust { color: #b9b7c4; font-size: 0.82rem; text-align: center; margin: 0; }
.stage-trust .stars { color: var(--gold); letter-spacing: 1px; }

@media (max-width: 460px) {
  .wizard { padding: 18px 18px 14px; }
  .opts--2 { grid-template-columns: 1fr; }
  .irow { grid-template-columns: 1fr; }
  .reveal__incl { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, .step { animation: none !important; transition: none !important; } }