/*
  New look for the quote questionnaire and results page. Styling only: the questions, answers, consent text and
  scripts in quote.html are untouched. The import script links this file into the copies in /public.
*/
:root {
  --ice: #f1f6fa;
  --font: "Nunito Sans", "Avenir Next", system-ui, sans-serif;
}
body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  background: radial-gradient(900px 420px at 88% 0%, rgba(0, 119, 200, 0.1), transparent 70%), var(--ice);
}
header {
  height: 80px;
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}
.logo span { font-weight: 700; letter-spacing: -0.01em; }
.progress { position: sticky; top: 80px; z-index: 59; }
.progress div { background: linear-gradient(90deg, #0077c8, #00a99d); border-radius: 0 6px 6px 0; }
.meta { max-width: 800px; padding-top: 22px; }

main { padding-top: 24px; }
.wrap {
  max-width: 800px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 48px;
  box-shadow: 0 40px 80px -56px rgba(15, 33, 77, 0.55);
  align-self: flex-start;
}

h1 {
  color: var(--navy);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.kicker { letter-spacing: 0.12em; }
h2.q { font-weight: 800; letter-spacing: -0.01em; }

.choice {
  min-height: 72px;
  padding: 18px 20px;
  border-radius: 16px;
  font-weight: 700;
  transition: border-color 0.18s, background 0.18s, transform 0.18s, box-shadow 0.18s;
}
.choice:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -20px rgba(15, 33, 77, 0.55); }
.choice[aria-pressed="true"] { background: #e9f4fc; box-shadow: 0 0 0 4px rgba(0, 119, 200, 0.14); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select {
  height: 58px;
  border-radius: 12px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
input[type="text"]:hover, input[type="email"]:hover, input[type="tel"]:hover, input[type="number"]:hover, select:hover { border-color: #9fc6e6; }
.follow select, .follow input { border-radius: 10px; }

.card, .consent, details.why, .rv, .next-steps, .book, .resume, .prequal, .linkbox, .follow { border-radius: 16px; }
.chk { border-radius: 12px; transition: border-color 0.18s, background 0.18s; }
.chk:hover { border-color: var(--blue); }
.seg { border-radius: 12px; }
.rv button, .btn-s, .book a, .book .ph { border-radius: 10px; }

.next {
  height: 60px;
  padding: 0 36px;
  border-radius: 12px;
  box-shadow: 0 18px 32px -16px rgba(0, 119, 200, 0.85);
  transition: transform 0.18s, background 0.18s, box-shadow 0.18s;
}
.next:hover { transform: scale(1.03); }
.book { background: linear-gradient(160deg, #0f214d 0%, #0b1838 100%); }

@media (max-width: 640px) {
  header { height: 72px; }
  .progress { top: 72px; }
  .wrap { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
  h1 { font-size: 32px; }
  .meta { padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .choice, .next { transition: none; }
  .choice:hover, .next:hover { transform: none; }
}

/* keep the "Saved" toast clear of the header's "Save & finish later" link */
.saved { top: 96px; }
@media (max-width: 640px) { .saved { top: 88px; } }