/* ── Reset & base ───────────────────────────────────────────── */
* { box-sizing: border-box; }
html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { border-style: none; }
button, input, textarea { font: inherit; margin: 0; }
button { text-transform: none; cursor: pointer; }
[type=radio], [type=checkbox] { box-sizing: border-box; padding: 0; }

/* ── Body / typography ──────────────────────────────────────── */
body {
  font-family: 'Source Sans Pro', sans-serif;
  background: #fff;
  color: #292b29;
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
}
body a { color: #292b29; text-decoration: none; }
body h1, body h2 { font-family: 'Alegreya Sans', sans-serif; }
body h1 { font-size: 24px; font-weight: 700; margin: 0; }
body p { margin: 0; }

/* ── Header ─────────────────────────────────────────────────── */
header { background: #fff; position: relative; }
header:before {
  content: ''; display: block; width: 100%;
  position: absolute; z-index: 10; height: 5px; background: #6eaa27;
}
header section { display: flex; width: 100%; align-items: center; }
header section.header { justify-content: flex-start; border-bottom: 1px solid #d4d4d4; }
header section .logo { padding: 16px; }
@media (min-width: 600px) { header section .logo { padding: 20px 24px; } }
header section .logo img { width: 110px; }
@media (min-width: 600px) { header section .logo img { width: 130px; } }

/* ── Main ───────────────────────────────────────────────────── */
main { background: #fff; padding: 32px 16px; flex: 1; }
@media (min-width: 600px) { main { padding: 48px 32px; } }
@media (min-width: 1024px) { main { padding: 56px 0; } }

.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 760px;
  margin: 0 auto;
}

.content-area {
  background: rgba(216,216,216,.1);
  padding: 28px 24px;
  flex-basis: 100%;
  width: 100%;
  border: 1px solid #dedede;
  border-radius: 10px;
  border-top: 4px solid #6eaa27;
}
@media (min-width: 600px) { .content-area { padding: 40px 48px; } }

/* ── Content ─────────────────────────────────────────────────── */
.content-title { text-align: left; }
.content-title h1 { margin: 0; font-size: 22px; color: #1a6fce; line-height: 1.3; }
@media (min-width: 600px) { .content-title h1 { font-size: 28px; } }

.content-text { padding: 12px 0 20px; text-align: left; font-size: 16px; line-height: 1.65; color: #4a4a4a; }

.question-subtitle { margin: 6px 0 0; font-size: 13px; color: #8a8a8a; line-height: 1.5; }

/* ── Form ────────────────────────────────────────────────────── */
.form { padding: 20px 0; width: 100%; }
.form-row { display: grid; grid-template-columns: 1fr; margin: 0 0 17px; }
.form-row > :first-child { margin: 0 0 16px; }
.form-row.no-margin > :first-child { margin: 0; }
.form-row .radio-row, .form-row .checkbox-row { margin: 0 0 16px; }

/* ── Radio buttons (single-select: Q1, Q3) ─────────────────── */
.grid-radio-box { margin: 0; }
.grid-radio-box .radio-row { display: flex; justify-content: flex-start; }
.grid-radio-box .radio-row:last-child { margin: 0; }
.grid-radio-box input { position: absolute; left: -9999px; }
.grid-radio-box input + label {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  line-height: 28px;
  display: inline-block;
  color: #292b29;
  font-size: 15px;
  margin-left: 20px;
}
.grid-radio-box input + label:before {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; margin-top: 3px;
  border: 2px solid #6eaa27;
  border-radius: 100%; background: #fff;
}
.grid-radio-box input + label:after {
  content: '';
  width: 8px; height: 8px; background: #6eaa27;
  position: absolute; top: 10px; left: 7px;
  border-radius: 100%; transition: all .2s ease;
}
.grid-radio-box input:not(:checked) + label:after { opacity: 0; transform: scale(0); }
.grid-radio-box input:checked + label:after { opacity: 1; transform: scale(1); }
.grid-radio-box input:checked + label:before { box-shadow: none; }

/* ── Checkboxes (multi-select: Q2) ──────────────────────────── */
.grid-checkbox-box { margin: 0; }
.grid-checkbox-box .checkbox-row { display: flex; justify-content: flex-start; }
.grid-checkbox-box .checkbox-row:last-child { margin: 0; }
.grid-checkbox-box input { position: absolute; left: -9999px; }
.grid-checkbox-box input + label {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  line-height: 28px;
  display: inline-block;
  color: #292b29;
  font-size: 15px;
  margin-left: 20px;
}
.grid-checkbox-box input + label:before {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; margin-top: 3px;
  border: 2px solid #6eaa27;
  border-radius: 4px; background: #fff;
  transition: background-color .15s ease, border-color .15s ease;
}
.grid-checkbox-box input + label:after {
  content: '';
  position: absolute; left: 6px; top: 8px;
  width: 8px; height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  opacity: 0;
  transition: all .15s ease;
}
.grid-checkbox-box input:checked + label:before { background: #6eaa27; border-color: #6eaa27; }
.grid-checkbox-box input:checked + label:after { opacity: 1; transform: rotate(-45deg) scale(1); }

/* ── Error ───────────────────────────────────────────────────── */
.error-txt { color: #e22c43; display: none; font-size: 13px; margin: 4px 0 10px; }
.error-txt.show { display: block; }

/* ── Button ──────────────────────────────────────────────────── */
.submit-btn { padding-top: 10px; }
.submit-btn-btn .submit-label {
  display: inline-flex;
  align-items: center; justify-content: center; gap: 10px;
  background: #1a6fce; color: #fff;
  padding: 14px 28px; text-decoration: none; cursor: pointer;
  font-weight: 600; font-size: 15px;
  transition: background-color .2s ease;
  border-radius: 50px; border: none; letter-spacing: 0; width: 100%;
}
@media (min-width: 480px) { .submit-btn-btn .submit-label { width: auto; } }
.submit-btn-btn .submit-label:hover { background: #155db0; }
.submit-btn-btn .submit-label::after { content: '→'; font-size: 16px; line-height: 1; }

/* ── Page transitions ────────────────────────────────────────── */
.page { display: none; }
.page.active { display: block; animation: pgIn .28s ease both; }
@keyframes pgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Progress bar ────────────────────────────────────────────── */
.progress-wrap { margin-bottom: 20px; display: none; }
.progress-track { height: 4px; background: #e8e8e8; border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: #6eaa27; border-radius: 2px; width: 0%; transition: width .4s ease; }
.progress-label { font-size: 12px; color: #aaa; margin-top: 5px; }

/* ── Back button ─────────────────────────────────────────────── */
.btn-back {
  background: none; border: none; padding: 0; margin: 0 0 14px;
  font-family: 'Source Sans Pro', sans-serif; font-size: 14px;
  color: #aaa; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color .15s;
}
.btn-back:hover { color: #292b29; }

/* ── Success / invalid / duplicate pages ─────────────────────── */
.success-icon {
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(110,170,39,.12); border: 2px solid #6eaa27;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}

/* ── Footer ──────────────────────────────────────────────────── */
footer { display: flex; background: #814997; color: #fff; position: relative; }
footer:before {
  content: ''; display: block; width: 100%;
  position: absolute; top: 0; z-index: 10; height: 5px; background: #522d5e;
}
footer .footer { padding: 40px 20px; }
@media (min-width: 481px) { footer .footer { padding: 40px 100px; } }
footer .footer .copy { opacity: .5; font-size: 13px; }