:root {
  color: #172033;
  background: #f5f7fb;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: #075cb6; }
a:hover { color: #003f7e; }

/* ---------- Header / Footer ---------- */
.site-header,
.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  padding: 1rem max(1rem, calc((100% - 760px) / 2));
  background: #fff;
}
.site-header { border-bottom: 1px solid #dce2ee; }
.site-footer { margin-top: 3rem; border-top: 1px solid #dce2ee; font-size: .9rem; }
.brand { margin-right: auto; color: #172033; font-weight: 800; text-decoration: none; }

/* ---------- Layout ---------- */
.page { width: min(100% - 2rem, 760px); margin: 0 auto; padding: 3rem 0; }
.eyebrow { color: #075cb6; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1 { max-width: 19ch; font-size: clamp(2.1rem, 7vw, 4rem); line-height: 1.08; letter-spacing: -.045em; }
.lede { max-width: 60ch; font-size: 1.17rem; }

/* ---------- Buttons ---------- */
.button, button {
  display: inline-block;
  border: 0;
  border-radius: .55rem;
  padding: .82rem 1rem;
  background: #075cb6;
  color: #fff;
  font: inherit;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}
button:disabled { cursor: not-allowed; opacity: .45; }

.button-secondary {
  display: inline-block;
  border: 1px solid #075cb6;
  border-radius: .55rem;
  padding: .6rem .9rem;
  background: #fff;
  color: #075cb6;
  font: inherit;
  font-weight: 650;
  font-size: .9rem;
  text-decoration: none;
  cursor: pointer;
  margin: .3rem .5rem .3rem 0;
}
.button-secondary:hover { background: #eaf4ff; }

/* ---------- Cards & Form ---------- */
.card, fieldset, #quote-result, .notice {
  margin: 1rem 0;
  padding: 1.3rem;
  border: 1px solid #dce2ee;
  border-radius: .8rem;
  background: #fff;
}
.card h3 { margin-top: 0; }
fieldset { min-width: 0; }
legend { font-weight: 750; }
fieldset p { margin-top: .3rem; color: #566176; }
fieldset label { display: inline-flex; gap: .4rem; margin: .45rem 1rem .1rem 0; align-items: center; }

/* ---------- Progress bar ---------- */
.progress-wrap { margin-bottom: 1.5rem; }
.progress-track { height: 8px; background: #dce2ee; border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: #075cb6; border-radius: 4px; transition: width .25s ease; }
.progress-text { display: block; margin-top: .4rem; font-size: .82rem; color: #566176; font-weight: 600; }

/* ---------- Category headers ---------- */
.category-header {
  margin: 1.8rem 0 .6rem;
  font-size: 1rem;
  font-weight: 800;
  color: #075cb6;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.category-header:first-child { margin-top: 0; }
.q-num {
  display: inline-block;
  min-width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  background: #075cb6;
  color: #fff;
  border-radius: 50%;
  font-size: .78rem;
  margin-right: .35rem;
}

/* ---------- Result panel ---------- */
#quote-result[data-level="green"] { border-left: 6px solid #18864b; }
#quote-result[data-level="yellow"] { border-left: 6px solid #b87800; }
#quote-result[data-level="red"] { border-left: 6px solid #bd3131; }

.result-actions {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #dce2ee;
}

.email-capture {
  margin-top: 1.5rem;
  padding: 1.3rem;
  border: 1px solid #dce2ee;
  border-left: 4px solid #075cb6;
  border-radius: .8rem;
  background: #eaf4ff;
}
.email-capture h3 { margin-top: 0; }
.email-capture form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.email-capture input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: .7rem .9rem;
  border: 1px solid #b8c3d4;
  border-radius: .5rem;
  font: inherit;
}
.small-print { font-size: .8rem; color: #566176; margin-top: .6rem; }

/* ---------- Email status ---------- */
.email-status { font-size: .9rem; margin-top: .5rem; }
.email-success { color: #157347; font-weight: 600; }
.email-error { color: #b02a37; }
.form-success {
  padding: 1rem 1.2rem;
  border: 1px solid #bcddc9;
  border-left: 4px solid #157347;
  border-radius: .5rem;
  background: #e8f5ee;
  color: #157347;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* ---------- Contact form ---------- */
.contact-form {
  margin: 1.5rem 0;
  padding: 1.3rem;
  border: 1px solid #dce2ee;
  border-left: 4px solid #075cb6;
  border-radius: .8rem;
  background: #eaf4ff;
}
.contact-form form { display: flex; flex-direction: column; gap: .6rem; }
.contact-form input, .contact-form textarea {
  padding: .7rem .9rem;
  border: 1px solid #b8c3d4;
  border-radius: .5rem;
  font: inherit;
}
.contact-form textarea { resize: vertical; min-height: 100px; }

/* ---------- Notice & Articles ---------- */
.notice { border-left: 4px solid #075cb6; background: #eaf4ff; }
.article { max-width: 700px; }
.article h2 { margin-top: 2.5rem; }
.article-body h2 { margin-top: 2.5rem; font-size: 1.35rem; }
.article-body p { max-width: 68ch; }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .page { width: min(100% - 1.25rem, 760px); padding: 2rem 0; }
  fieldset label { display: flex; margin-right: 0; }
  .email-capture form { flex-direction: column; }
  .email-capture input[type="email"] { width: 100%; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .button, .button-secondary,
  .progress-wrap, .result-actions, .email-capture,
  #quote-checker, .notice { display: none !important; }
  .page { width: 100%; padding: 0; }
  body { background: #fff; }
  #quote-result { border: 1px solid #999; }
}