/* MVPF Guided Start — full-page journey.
   Kit armor throughout, same rule as mvpf-wizard.css: the Elementor kit
   styles bare button/input/label, so anything shape-critical is pinned.

   Layout: the page keeps the site's own header and footer, so this wrapper
   lives in NORMAL document flow — no viewport locking, no body scroll traps.
   The wrapper is sized to fill the viewport below its own top edge (JS sets
   min-height), and all the journey chrome (progress, controls, brand line)
   is one sticky block pinned to the bottom of the screen. */

.mvpf-gs,
.mvpf-gs *,
.mvpf-gs *::before,
.mvpf-gs *::after { box-sizing: border-box; }

.mvpf-gs {
  --gs-ink: #002738;
  --gs-ink-2: #01455f;
  --gs-body: #3f4c58;
  --gs-muted: #6b7885;
  --gs-line: #e2e6ee;
  --gs-field-line: #d8dee7;
  --gs-accent: #c8102e;
  --gs-progress: #A10003;
  --gs-btn: #0A2738;        /* solid buttons */
  --gs-btn-hover: #3095C1;
  --gs-opt-hover: #E50000;  /* answer-tile hover stroke */
  --gs-bg: #f7f9fb;
  min-height: 80vh; /* refined by JS to fill the viewport below the site header */
  display: flex;
  flex-direction: column;
  background: var(--gs-bg);
  color: var(--gs-body);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  transition: background-color .45s ease;
  -webkit-font-smoothing: antialiased;
}

/* ── ticker (rides at the top of the bottom chrome) ── */
.mvpf-gs-ticker {
  display: flex; justify-content: center; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 22px 9px; background: #f0f5f8; border-bottom: 1px dashed var(--gs-line);
}
.mvpf-gs-ticker[hidden] { display: none; }
.mvpf-gs-ticker-label { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gs-muted); }
.mvpf-gs-ticker-value { font-size: 15px; font-weight: 800; color: var(--gs-ink); font-variant-numeric: tabular-nums; }
.mvpf-gs-ticker-note { font-size: 10.5px; color: var(--gs-muted); }

/* ── stage ── */
.mvpf-gs-main { flex: 1 1 auto; display: flex; }
.mvpf-gs-screen { margin: auto; width: 100%; max-width: 820px; padding: 36px 22px 48px; }
/* One rhythm for every step: the old screen sinks briefly, the new one
   rises in — same duration, same ease, everywhere. */
.mvpf-gs-fade { animation: mvpf-gs-rise .45s cubic-bezier(.22, .8, .3, 1) both; }
@keyframes mvpf-gs-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.mvpf-gs-leave { animation: mvpf-gs-sink .18s ease-in both; }
@keyframes mvpf-gs-sink { to { opacity: 0; transform: translateY(-14px); } }

.mvpf-gs-q {
  margin: 0 0 10px !important; color: var(--gs-ink) !important;
  font-size: clamp(26px, 4.6vw, 42px) !important;
  font-weight: 800; line-height: 1.15 !important; letter-spacing: -.015em;
  text-wrap: balance;
}
.mvpf-gs-help { margin: 0 0 30px !important; font-size: clamp(15px, 2vw, 18px); line-height: 1.55; color: var(--gs-muted); max-width: 58ch; }

/* tiles */
.mvpf-gs-opts { display: grid; gap: 12px; }
@media (min-width: 640px) { .mvpf-gs-opts.cols-2 { grid-template-columns: 1fr 1fr; } }
.mvpf-gs-opt {
  position: relative; display: block; width: 100%; text-align: left !important;
  background: #fff !important; border: 0 !important;
  box-shadow: inset 0 0 0 1.5px var(--gs-line);
  border-radius: 14px !important; padding: 20px 22px !important; cursor: pointer;
  font-family: inherit !important; min-height: 64px;
  transition: box-shadow .15s ease, background-color .15s ease, transform .15s ease;
}
.mvpf-gs-opt:hover { box-shadow: inset 0 0 0 1.5px var(--gs-opt-hover); transform: translateY(-1px); }
.mvpf-gs-opt:focus-visible { outline: 2px solid var(--gs-ink); outline-offset: 2px; }
.mvpf-gs-opt[aria-pressed="true"] { background: #f2f7fa !important; box-shadow: inset 0 0 0 2.5px var(--gs-ink); }
/* The kit uppercases and letterspaces bare buttons — these are answers,
   not buttons, so both are pinned back to sentence case. */
.mvpf-gs-opt, .mvpf-gs-opt * { text-transform: none !important; letter-spacing: normal !important; }
.mvpf-gs-opt-title { display: block; font-size: clamp(16px, 1.9vw, 19px) !important; font-weight: 700; color: var(--gs-ink) !important; line-height: 1.3; }
.mvpf-gs-opt-desc { display: block; margin-top: 4px; font-size: clamp(13px, 1.5vw, 14.5px) !important; font-weight: 400; color: var(--gs-muted) !important; line-height: 1.45; }

.mvpf-gs-reassure {
  margin: 18px 0 0; padding: 14px 18px; border-radius: 12px;
  background: #f2faf4; border: 1px solid #d3ead9;
  font-size: clamp(14px, 1.6vw, 15.5px); line-height: 1.55; color: #1e5631;
}
.mvpf-gs-why {
  margin: 18px 0 0 !important; font-size: clamp(12.5px, 1.5vw, 14px); line-height: 1.5; color: var(--gs-muted);
  display: flex; gap: 8px; align-items: flex-start; max-width: 60ch;
}
.mvpf-gs-why .i {
  flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%;
  background: #e6edf2; color: #33566a; font-size: 11px; font-weight: 700; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
}

/* sliders */
.mvpf-gs-slider-value {
  display: block; font-size: clamp(42px, 8vw, 64px); font-weight: 800; color: var(--gs-ink);
  font-variant-numeric: tabular-nums; line-height: 1.05; margin-bottom: 26px; letter-spacing: -.02em;
}
input[type="range"].mvpf-gs-slider {
  width: 100%; height: 44px; accent-color: var(--gs-ink);
  margin: 0; padding: 0; background: none; border: 0; cursor: pointer;
}
.mvpf-gs-slider-ends {
  display: flex; justify-content: space-between; margin-top: 2px;
  font-size: 13px; color: var(--gs-muted); font-variant-numeric: tabular-nums;
}
.mvpf-gs-slider-block { margin-bottom: 34px; }
.mvpf-gs-slider-block .mvpf-gs-slider-value { font-size: clamp(30px, 5vw, 44px); margin-bottom: 10px; }
.mvpf-gs-label {
  display: block; margin-bottom: 8px; font-size: 12px !important; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gs-muted) !important;
}

/* fields — 16px minimum so iOS doesn't zoom on focus */
.mvpf-gs-row { display: block; margin-bottom: 16px; }
.mvpf-gs-row input, .mvpf-gs-row select {
  width: 100% !important; padding: 15px 16px !important; border: 0 !important; border-radius: 12px !important;
  font-family: inherit !important; font-size: 16px !important; color: var(--gs-ink) !important; background: #fff !important;
  box-shadow: inset 0 0 0 1px var(--gs-field-line) !important;
}
.mvpf-gs-row input:focus, .mvpf-gs-row select:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--gs-ink), 0 0 0 3px rgba(0,39,56,.1) !important;
}
.mvpf-gs-error {
  margin: 10px 0 0 !important; font-size: 13.5px; color: var(--gs-accent); min-height: 18px;
}

/* welcome */
.mvpf-gs-hero-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gs-muted); margin: 0 0 16px !important;
}
.mvpf-gs-hero-q { font-size: clamp(32px, 6vw, 56px) !important; margin-bottom: 16px !important; }
.mvpf-gs-hero-points { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 34px !important; padding: 0 !important; list-style: none; }
.mvpf-gs-hero-points li {
  font-size: 13px; font-weight: 600; color: var(--gs-ink);
  background: #fff; box-shadow: inset 0 0 0 1px var(--gs-line);
  padding: 8px 14px; border-radius: 999px; list-style: none;
}
.mvpf-gs-cta {
  font-family: inherit !important; font-size: 15px !important; font-weight: 700 !important;
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--gs-btn) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
  padding: 18px 42px !important; cursor: pointer; transition: background-color .15s ease;
}
.mvpf-gs-cta:hover { background: var(--gs-btn-hover) !important; }
.mvpf-gs-cta:focus-visible { outline: 2px solid var(--gs-ink); outline-offset: 3px; }
.mvpf-gs-cta-note { margin: 14px 0 0 !important; font-size: 13px; color: var(--gs-muted); }
.mvpf-gs-cta-ghost {
  font-family: inherit !important; font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: .05em; text-transform: uppercase;
  background: transparent !important; color: var(--gs-muted) !important; border: 0 !important; border-radius: 999px !important;
  box-shadow: inset 0 0 0 1.5px var(--gs-line);
  padding: 14px 30px !important; cursor: pointer; margin-top: 26px;
}
.mvpf-gs-cta-ghost:hover { color: var(--gs-ink) !important; box-shadow: inset 0 0 0 1.5px var(--gs-ink); }

/* education — full-bleed ink interludes */
.mvpf-gs.is-ink { background: var(--gs-ink); }
.mvpf-gs-edu-band {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #7fa3b5; margin: 0 0 18px !important;
}
.mvpf-gs-edu-big {
  margin: 0 0 18px !important; color: #fff !important;
  font-size: clamp(28px, 5vw, 48px) !important; font-weight: 800; line-height: 1.15 !important; letter-spacing: -.015em;
  text-wrap: balance;
}
.mvpf-gs-edu-p { margin: 0 0 14px !important; font-size: clamp(15px, 2vw, 18px); line-height: 1.6; color: #a9c1cf; max-width: 56ch; }
.mvpf-gs-edu-p strong { color: #fff; }
/* Educational figures: facts, not controls. Deliberately no card, radius or
   fill. .mvpf-gs-opt owns that shape for selectable answers, and borrowing it
   here made people click the stats and wonder why nothing happened. Mirrors
   the .figures row on the refi verdict, which is this page's established
   pattern for numbers you cannot press. */
/* Equal columns, not content-width flex items. As a flex row each figure was
   only as wide as its own label, so the 16ch cap on the first one (whose
   caption wraps to two lines) left trailing space before the gap even
   started and the three numbers read as unevenly spaced. auto-fit keeps the
   old wrapping behaviour on narrow screens. */
.mvpf-gs-edu-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 22px 34px; margin: 28px 0 0; max-width: 560px; }
.mvpf-gs-edu-figs b { display: block; font-size: clamp(24px, 3vw, 30px); color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mvpf-gs-edu-figs span { display: block; font-size: 12px; color: #7fa3b5; line-height: 1.4; margin-top: 6px; }
.mvpf-gs.is-ink .mvpf-gs-ft { background: rgba(0,39,56,.85); }
.mvpf-gs.is-ink .mvpf-gs-trustrow { background: rgba(0,39,56,.85); color: #7fa3b5; border-bottom-color: rgba(255,255,255,.12); }
.mvpf-gs.is-ink .mvpf-gs-trustrow svg { stroke: #7fa3b5; }
.mvpf-gs.is-ink .mvpf-gs-ft-bar { background: rgba(255,255,255,.14); }
.mvpf-gs.is-ink .mvpf-gs-ft-meta { color: #7fa3b5; }
.mvpf-gs.is-ink .mvpf-gs-next { background: #fff !important; color: var(--gs-ink) !important; }
.mvpf-gs.is-ink .mvpf-gs-next:hover { background: #dfe9ee !important; }
.mvpf-gs.is-ink .mvpf-gs-back { color: #7fa3b5 !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); }
.mvpf-gs.is-ink .mvpf-gs-back:hover { color: #fff !important; box-shadow: inset 0 0 0 1.5px #fff; }
.mvpf-gs.is-ink .mvpf-gs-trust { color: #7fa3b5; }
.mvpf-gs.is-ink .mvpf-gs-trust svg { stroke: #7fa3b5; }

/* results */
.mvpf-gs-grade {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px;
}
.mvpf-gs-grade.g-ready { background: #e7f4ea; color: #1e5631; }
.mvpf-gs-grade.g-near  { background: #fdf3e0; color: #7a5410; }
.mvpf-gs-grade.g-build { background: #e8eff5; color: #33566a; }
.mvpf-gs-cost {
  max-width: 620px; margin: 4px 0 22px; padding: 16px 18px;
  background: #f0f5f8; border: 1px solid #dbe7ee; border-radius: 12px;
  font-size: clamp(14px, 1.7vw, 15.5px); line-height: 1.55; color: var(--gs-body);
}
.mvpf-gs-cost b { color: var(--gs-ink); }
.mvpf-gs-cost .src { display: block; margin-top: 8px; font-size: 12px; color: var(--gs-muted); }
.mvpf-gs-plan { margin: 0 !important; padding: 0 !important; list-style: none; max-width: 620px; }
.mvpf-gs-plan li {
  display: flex; gap: 12px; align-items: flex-start; list-style: none;
  padding: 14px 16px; border-radius: 12px; margin-bottom: 10px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--gs-line);
  font-size: clamp(14px, 1.7vw, 15.5px); line-height: 1.5;
}
.mvpf-gs-plan li .n {
  flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  background: var(--gs-ink); color: #fff; font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.mvpf-gs-plan li.is-locked { filter: blur(4px); user-select: none; pointer-events: none; }
.mvpf-gs-lockline { display: flex; align-items: center; gap: 8px; margin: 6px 0 22px; font-size: 13px; color: var(--gs-muted); }
.mvpf-gs-gate { max-width: 480px; }

/* refi verdict */
.mvpf-gs-verdict { border-radius: 16px; padding: 24px; margin-bottom: 24px; max-width: 640px; }
.mvpf-gs-verdict.v-yes { background: #e7f4ea; border: 1px solid #cbe5d2; }
.mvpf-gs-verdict.v-no  { background: #fdf3e0; border: 1px solid #f0dfb6; }
.mvpf-gs-verdict h3 { margin: 0 0 8px !important; font-size: clamp(20px, 2.8vw, 26px) !important; color: var(--gs-ink) !important; line-height: 1.25 !important; }
.mvpf-gs-verdict p { margin: 0 !important; font-size: clamp(14px, 1.7vw, 15.5px); line-height: 1.6; color: var(--gs-body); }
.mvpf-gs-verdict .figures { display: flex; gap: 26px; margin-top: 16px; flex-wrap: wrap; }
.mvpf-gs-verdict .figures div b { display: block; font-size: clamp(24px, 3vw, 30px); color: var(--gs-ink); font-variant-numeric: tabular-nums; }
.mvpf-gs-verdict .figures div span { font-size: 12px; color: var(--gs-muted); }
.mvpf-gs-smallnote { font-size: 12.5px; color: var(--gs-muted); margin: 0 0 16px !important; max-width: 640px; }

.mvpf-gs-prefs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; max-width: 480px; }
.mvpf-gs-prefs .mvpf-gs-opt { text-align: center !important; padding: 15px 6px !important; min-height: 0; }
.mvpf-gs-contact-fields { max-width: 480px; }
.mvpf-gs-consent {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; max-width: 620px;
  font-size: 13.5px; line-height: 1.55; color: var(--gs-body);
}
.mvpf-gs-consent input { margin-top: 3px; flex: none; width: 17px; height: 17px; }
/* Kit armor: the theme styles bare links with its accent AND its own type
   scale — policy links in legal copy inherit our palette and, critically,
   the SIZE of the sentence they sit in. */
.mvpf-gs-consent a, .mvpf-gs-consent a:hover {
  color: var(--gs-ink) !important; text-decoration: underline !important;
  font-family: inherit !important; font-weight: 600 !important;
  font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important;
}
.mvpf-gs-disclaimer { margin: 10px 0 0 !important; font-size: 11.5px; line-height: 1.5; color: var(--gs-muted); max-width: 620px; }
.mvpf-gs-disclaimer a, .mvpf-gs-disclaimer a:hover {
  color: var(--gs-muted) !important; text-decoration: underline !important; font-family: inherit !important;
  font-weight: inherit !important; font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important;
}

.mvpf-gs-center { text-align: center; }
.mvpf-gs-center .mvpf-gs-help, .mvpf-gs-center .mvpf-gs-plan { margin-left: auto !important; margin-right: auto !important; }
.mvpf-gs-emoji { font-size: clamp(44px, 7vw, 64px); line-height: 1; margin-bottom: 14px; }

/* ── bottom chrome: trust strip + ticker + progress + controls, sticky ──
   No z-index on purpose: positioned boxes already paint above the flow
   content, and anything the page floats later (the reCAPTCHA badge) must
   stay on top of us, not under. */
.mvpf-gs-ft {
  flex: none;
  position: sticky; bottom: 0;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
}
.mvpf-gs-ft[hidden] { display: none; }
.mvpf-gs-trustrow {
  display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap;
  padding: 7px 16px; text-align: center;
  font-size: 11.5px; color: var(--gs-muted);
  background: rgba(247,249,251,.92);
  border-bottom: 1px solid var(--gs-line);
}
.mvpf-gs-trustrow svg { flex: none; }
.mvpf-gs-ft-bar { height: 4px; background: #eaeef3; }
.mvpf-gs-ft-fill { height: 100%; width: 0; background: var(--gs-progress); transition: width .45s cubic-bezier(.22, .8, .3, 1); }
.mvpf-gs-ft-inner { padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); }
.mvpf-gs-ft-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 820px; margin: 0 auto; }
.mvpf-gs-ft-meta {
  flex: 1; min-width: 0; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gs-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mvpf-gs-back, .mvpf-gs-next {
  font-family: inherit !important; font-size: 13.5px !important; font-weight: 700 !important;
  letter-spacing: .06em; text-transform: uppercase; border-radius: 999px !important;
  cursor: pointer; border: 0 !important;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.mvpf-gs-back { background: transparent !important; color: var(--gs-muted) !important; box-shadow: inset 0 0 0 1.5px var(--gs-line); padding: 14px 24px !important; }
.mvpf-gs-back:hover { color: var(--gs-ink) !important; box-shadow: inset 0 0 0 1.5px var(--gs-ink); }
.mvpf-gs-back[hidden] { display: none; }
.mvpf-gs-next { background: var(--gs-btn) !important; color: #fff !important; margin-left: auto; padding: 16px 38px !important; }
.mvpf-gs-next:hover { background: var(--gs-btn-hover) !important; }
.mvpf-gs-next:disabled { opacity: .4; cursor: not-allowed; }
.mvpf-gs-next:focus-visible, .mvpf-gs-back:focus-visible { outline: 2px solid var(--gs-ink); outline-offset: 2px; }
@media (max-width: 700px) {
  .mvpf-gs-next { flex: 1 1 auto; text-align: center; }
  .mvpf-gs-ft-meta { font-size: 10px; }
  .mvpf-gs-screen { padding: 28px 18px 40px; }
  .mvpf-gs-ft-inner { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mvpf-gs-fade, .mvpf-gs-leave { animation: none; }
  .mvpf-gs-ft-fill, .mvpf-gs { transition: none; }
  .mvpf-gs-opt { transition: none; }
}