:root{
  --navy:#0b2a62;
  --navy2:#0a1d46;
  --deep:#06122e;

  --yellow:#f6b11a;
  --green:#16a34a;

  --text:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;

  --card:#ffffff;
  --soft:#f6f7fb;
  --shadow: 0 14px 35px rgba(2,6,23,.16);

  /* New Red Alert Variables */
  --error-bg: #fef2f2;
  --error-text: #b91c1c;
  --error-border: #fecaca;

  --r16:16px;
  --r20:20px;

  --container: 420px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#fff;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
.container{ width:min(var(--container), 92vw); margin:0 auto; }

/* ================= TOP BAR ================= */
.top{
  background: var(--deep);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky; top:0; z-index:50;
}
.top__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 0;
}
.top__brand{
  display:flex; align-items:center;
  min-width: 140px;
  color:#fff;
}
.top__logo{ height:28px; width:auto; }

.top__qualify{
  background: var(--green);
  color:#fff; font-weight:900;
  padding:7px 10px; border-radius:8px;
  font-size:12px; white-space:nowrap;
}
.top__call{
  width:34px; height:30px;
  display:grid; place-items:center;
  background:#0a2f74;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  color:#fff;
}

/* ================= HERO ================= */
.hero{
  background:
    radial-gradient(900px 600px at 50% -140px, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(180deg, #0e3a86 0%, var(--navy2) 52%, #ffffff 52%, #ffffff 100%);
  padding:30px 0 18px;
}
.hero__inner{ padding-bottom: 14px; }

.ratingRow{
  display:flex; align-items:center; justify-content:center;
  gap:8px;
  color:#fff; font-weight:800;
  font-size:12px; opacity:.95;
}
.ratingRow__score{ font-weight:900; }
.stars{ color:#ffd36a; letter-spacing:1px; font-size:12px; }
.ratingRow__count{ opacity:.9; }

.hero__title{
  margin:10px 0 8px;
  text-align:center;
  color:#fff;
  font-weight:900;
  line-height:1.05;
  font-size: 24px;
}
.hero__accent{ display:block; color: var(--yellow); }

.hero__subhead{
  margin: 0 auto 10px;
  text-align:center;
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 13px;
  max-width: 520px;
  padding-bottom:15px
}

.trustLine{
  margin: 6px auto 8px;
  text-align:center;
  color: black;
  font-weight: 850;
  font-size: 12px;
  max-width: 560px;
}

.scarcityLine{
  margin: 6px 0 12px;
  padding-top:20px;
  text-align:center;
  color: #fef08a;
  font-weight: 900;
  font-size: 13px;
}

/* Card shell */
.card{
  background: var(--card);
  border-radius: var(--r20);
  box-shadow: var(--shadow);
  border: 1px solid rgba(17,24,39,.08);
}

/* Form card */
.formCard{
  margin: 0 auto;
  max-width: 360px;
  padding: 14px;
}
.formCard__title{
  margin:0 0 6px;
  text-align:center;
  font-weight:900;
}
.formCard__micro{
  margin: 0 0 10px;
  text-align:center;
  color:#475569;
  font-weight:700;
  font-size:12px;
}

.section{ padding: 24px 0; }
.section--white{ background:#fff; }
.section--soft{ background: var(--soft); }

.h2center{
  margin:0 0 14px;
  text-align:center;
  font-size:18px;
  font-weight:900;
  line-height:1.15;
}
.mutedCenter{
  margin: 0 auto 12px;
  text-align:center;
  color: var(--muted);
  font-size:12px;
  font-weight:650;
  max-width: 360px;
}

/* ================= Vertical Comparison ================= */
.compareBlock{
  border-radius: 16px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
}
.compareBlock__bar{
  padding:10px 12px;
  font-weight:900;
  font-size:11px;
  text-align:center;
  color:#fff;
}
.compareBlock__bar--orange{ background:#f59e0b; }
.compareBlock__bar--green{ background: var(--green); }
.compareBlock__rows{ background:#fff; }

.compareRow{
  padding: 10px 12px;
  border-top:1px solid var(--line);
  text-align:center;
  font-weight:750;
  font-size:12px;
  color:#111827;
}
.compareRow strong{ font-weight: 900; }
.compareRow:nth-child(odd){ background:#f8fafc; }

/* ================= Quote Cards ================= */
.quoteGrid{
  display:grid;
  gap:10px;
text-align: center;
}
.quoteCard{
  border-radius: 16px;
  border:1px solid var(--line);
  background:#D4FCD4;
  padding: 12px 12px;
  font-weight: 400;
  color:#111827;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  text-align: center;
  font-size: 14px;
}
.quoteCard strong{ font-weight: 500; }

/* ================= Benefits ================= */
.featureGrid{ display:grid; gap:12px; }
.feature{
  border-radius: 16px;
  border:1px solid var(--line);
  padding: 14px;
  background:#fff;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  text-align:center;
}
.feature__icon{
  width:38px; height:38px;
  border-radius: 12px;
  background:#fef3c7;
  display:grid; place-items:center;
  margin: 0 auto 8px;
  font-size:18px;
}
.feature h3{ margin:0 0 6px; font-weight:900; }
.feature p{ margin:0; color:#334155; font-size:12px; font-weight:650; }

/* ================= Steps (centered) ================= */
.steps3{
  display:grid;
  gap:12px;
}
.stepCard{
  border-radius: 16px;
  border:1px solid var(--line);
  background:#fff;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  text-align:center;
}
.stepNum{
  width:36px; height:36px;
  border-radius: 12px;
  background:#111827;
  color:#fff;
  display:grid; place-items:center;
  font-weight: 900;
  margin: 0 auto 8px;
}
.stepCard h3{ margin:0 0 6px; font-weight:900; }
.stepCard p{ margin:0; color:#334155; font-size:12px; font-weight:650; }

/* ================= Countdown Card ================= */
.countdownCard{
  max-width: 420px;
  margin: 0 auto;
  padding: 16px;
  text-align:center;
}
.countdownLabel{
  margin:0;
  font-weight: 900;
  color:#b91c1c;
}
.countdownTime{
  margin: 6px 0 12px;
  font-weight: 900;
  font-size: 26px;
  color:#111827;
  letter-spacing:.04em;
}

/* Center helper for micro text under CTA */
.microCenter{
  text-align:center;
  margin-top:10px;
}

/* ================= Footer ================= */
.foot{
  background:#f3f4f6;
  border-top:1px solid var(--line);
  padding: 16px 0 20px;
}
.foot__inner{
  display:grid;
  gap:10px;
  align-items:center;
}
.foot__logoMark{
  opacity:.25;
  font-weight:900;
  letter-spacing:.18em;
  text-align:center;
}
.foot__text{
  text-align:center;
  font-size:11px;
  color:#475569;
  font-weight:650;
}
.foot__fine{
  margin-top:6px;
  font-size:10px;
  opacity:.85;
}
.foot__links{ margin-top: 4px; }

/* ================= Survey Wizard ================= */
.survey { padding: 6px 2px 0; }
.q { display:none; }
.q.is-active { display:block; animation: fadeUp .18s ease-out; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.q__title{
  margin: 6px 0 10px;
  font-weight: 900;
  font-size: 14px;
  color:#111827;
}

.q__input{
  width:100%;
  height:44px;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid #e5e7eb;
  font: inherit;
  background:#fff;
}
.q__input:focus{
  outline: 2px solid rgba(11,82,181,.35);
  outline-offset: 2px;
}
.spacer{ height: 10px; }

.micro{
  margin: 10px 0 0;
  font-size: 12px;
  color:#475569;
  font-weight:650;
}

/* Options (tiles) */
.optionGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.opt{
  position:relative;
  display:block;
}
.opt input{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}
.opt__card{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  min-height:46px;
  padding:12px 10px;

  border-radius:14px;
  border:1px solid #e5e7eb;
  background:#fff;

  font-weight:900;
  font-size:12px;
  color:#111827;

  transition: transform .05s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.opt input:checked + .opt__card{
  border-color: rgba(11,82,181,.55);
  box-shadow: 0 10px 18px rgba(11,82,181,.12);
}
.opt input:focus-visible + .opt__card{
  outline: 2px solid rgba(11,82,181,.35);
  outline-offset: 2px;
}
.opt:active .opt__card{ transform: scale(.99); }

/* Step 3 theme (blue) */
.q[data-q="3"] .q__title { color: #0b52b5; }
.q[data-q="3"] .opt__card {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #0b52b5;
}
.q[data-q="3"] .opt input:checked + .opt__card {
  background: #dbeafe;
  border-color: #0b52b5;
  box-shadow: 0 10px 18px rgba(11,82,181,.18);
}

/* Step 4 theme (green) */
.q[data-q="4"] .q__title { color: #047857; }
.q[data-q="4"] .opt__card {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #047857;
}
.q[data-q="4"] .opt input:checked + .opt__card {
  background: #d1fae5;
  border-color: #047857;
  box-shadow: 0 10px 18px rgba(4,120,87,.18);
}

/* Step 4 layout */
.optionGrid--roof { grid-template-columns: 1fr 1fr; }
.optionGrid--roof .opt--full { grid-column: 1 / -1; }

/* Consent */
.consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size: 12px;
  color:#111827;
  font-weight:650;
  line-height:1.35;
}
.consent input{ margin-top: 2px; }

/* Nav buttons in survey */
.survey__controls{
  display:flex;
  gap:10px;
  margin-top: 18px;
}
.btnNav{
  flex: 1;
  height: 42px;
  border-radius: 12px;
  font-weight: 900;
  border: 1px solid transparent;
  cursor:pointer;
}

/* Back button = nav */
.btnNav--ghost{
  background: transparent;
  border: none;
  color: #64748b;
  font-weight: 800;
  box-shadow: none;
}
.btnNav--ghost::before{ content:"← "; }
.btnNav--ghost:hover{
  color:#0b52b5;
  text-decoration: underline;
}
.btnNav--ghost:disabled{
  opacity:.4;
  text-decoration:none;
}

.btnNav--primary{
  background: #0b52b5;
  color:#fff;
}
.btnNav--primary:hover{ filter: brightness(1.03); }
.btnNav:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Survey footer row */
.survey__footer{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(17,24,39,.08);
}
.survey__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.progressText{
  font-weight: 900;
  font-size: 12px;
  color:#0b52b5;
}

/* ================= NEW HARDENED ERROR STYLES ================= */
.statusText {
  font-weight: 800;
  font-size: 12px;
  color: #0f172a; /* This is the default black/navy */
  transition: all 0.2s ease;
  border-radius: 8px;
  display: block;
  min-height: 20px;
}

/* We use !important on the color to make sure it turns red */
.statusText.is-error { 
  display: block !important;
  background-color: var(--error-bg) !important;
  color: var(--error-text) !important; /* This forces the red color */
  border: 1px solid var(--error-border) !important;
  padding: 8px 12px;
  margin-top: 8px;
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

.statusText.is-ok { 
  color: var(--green);
}

.survey__safe{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size: 12px;
  font-weight: 800;
  color:#16a34a;
}
.survey__lock{ color:#16a34a; }

/* ================= Prequal Card ================= */
.prequalCard{
  padding: 16px;
  max-width: 520px;
  margin: 0 auto;
}
.field{
  display:grid;
  gap:8px;
  margin-bottom: 12px;
}
.field > span{
  font-weight: 900;
  font-size: 12px;
  color:#111827;
}

.ctaBtn{
  display:block;
  width: min(420px, 100%);
  margin: 0 auto;
  padding: 14px 16px;
  border-radius: 14px;
  background: #0b52b5;
  color:#fff;
  font-weight: 950;
  text-align:center;
  box-shadow: 0 14px 28px rgba(11,82,181,.18);
  border: none;
  cursor: pointer;
}
.ctaBtn:hover{ filter: brightness(1.03); }
.ctaBtn--full{ width: 100%; }

/* Gate container spacing */
.contactGate{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(17,24,39,.10);
}

.contactGate__result{
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(16,185,129,.10);
  border: 1px solid rgba(16,185,129,.28);
  color: #065f46;
  font-weight: 900;
  text-align: center;
  font-size: 12px;
}

.prequalFine{
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  opacity: .9;
}

/* Specific red attention-grabber for Prequal/Gate form errors */
.prequalStatus {
  margin-top: 10px;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  transition: all 0.2s;
  border-radius: 10px;
}

.prequalStatus.is-error { 
  display: block;
  background-color: var(--error-bg);
  color: var(--error-text);
  border: 1px solid var(--error-border);
  padding: 10px;
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

.prequalStatus.is-ok { 
  color: #047857; 
}

/* ================= Shake Animation ================= */
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* ================= Thank You Page ================= */
.hero--ty{ padding-bottom: 26px; }
.tyCard{
  margin-top: 10px;
  padding: 14px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  color:#0b1220;
}
.tyCard__check{
  width:38px;height:38px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.22);
  color:#047857;
  flex:0 0 auto;
}
.tyCard__line{ margin:0 0 6px; font-weight:900; color:#0b1220; }
.tyCard__line:last-child{ margin-bottom:0; color:#475569; font-weight:800; }

.tySticky{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  background: rgba(7,28,63,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.14);
  z-index: 999;
}
.tySticky__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width: min(680px, calc(100% - 12px));
  margin: 0 auto;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #0a3fbf 0%, #082f88 100%);
  color:#fff;
  font-weight:1000;
  box-shadow: 0 14px 40px rgba(10,63,191,.22);
}

body{ padding-bottom: 76px; }

/* ================= Desktop ================= */
@media (min-width: 900px){
  :root{ --container: 980px; }

  .hero{
    padding: 50px 0 80px;
    background: linear-gradient(180deg, #0e3a86 0%, #0a1d46 58%, #fff 58%);
  }
  .hero__title{ font-size: 40px; }
  .formCard{ max-width: 420px; }

  .section{ padding: 40px 0; }

  .featureGrid{ grid-template-columns: repeat(3, 1fr); }
  .steps3{ grid-template-columns: repeat(3, 1fr); }
  .quoteGrid{ grid-template-columns: repeat(3, 1fr); }
}