/* ===================== ASSESSMENT PAGE ===================== */
.assessment-page { background: var(--paper); }
.back-link { font-size: 0.9rem; margin-left: auto; }

.assess-main { padding: 56px 0 88px; }
.assess-container { max-width: 760px; }

.assess-head { text-align: center; margin-bottom: 40px; }
.assess-title {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(2rem, 4.5vw, 2.9rem); line-height: 1.1; margin: 14px 0 16px;
}
.assess-intro { color: var(--muted); font-size: 1.08rem; max-width: 620px; margin: 0 auto; }

/* PROGRESS */
.progress { margin-bottom: 30px; }
.progress-bar { height: 6px; background: var(--paper-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.progress-bar span { display: block; height: 100%; width: 20%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); border-radius: 999px; transition: width .4s ease; }
.progress-label { font-size: 0.85rem; color: var(--muted); margin-top: 10px; font-weight: 500; }

/* STEPS (override the homepage .step card styling) */
.assessment-page .step { background: transparent; border: 0; padding: 0; margin: 0; display: none; border-radius: 0; }
.step.is-active { display: block; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.step legend {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 600; margin-bottom: 22px;
  display: flex; align-items: center; gap: 10px;
}
.spoke-dot { color: var(--gold); font-size: 1.2rem; }

/* FIELDS */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: block; margin-bottom: 20px; }
.field > span, .field-label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 8px; }
.field em, .hint { font-style: normal; color: var(--gold); font-weight: 600; }
.hint { color: var(--muted); font-weight: 400; font-size: 0.85rem; }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink);
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--white);
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow);
}
.field input:user-invalid { border-color: #c2554c; }

/* CHECK GRID */
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--white); font-size: 0.95rem; cursor: pointer; transition: border-color .15s, background .15s;
}
.check:hover { border-color: var(--gold); }
.check input { width: 18px; height: 18px; accent-color: var(--gold); }
.check:has(input:checked) { border-color: var(--gold); background: var(--gold-glow); }

/* NAV */
.assess-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 34px; }
.assess-nav .btn-gold { margin-left: auto; }
.form-error { color: #c2554c; font-weight: 500; margin-top: 14px; text-align: right; }

/* THANK YOU */
.thankyou { text-align: center; padding: 30px 0; animation: fade .4s ease; }
.thankyou-badge {
  width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 50%; border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: var(--gold);
  background: radial-gradient(circle, var(--gold-glow), transparent 70%);
}
.thankyou h2 { font-family: var(--serif); font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 600; line-height: 1.15; margin-bottom: 16px; }
.thankyou-lead { color: var(--muted); font-size: 1.1rem; max-width: 560px; margin: 0 auto 30px; }
.thankyou-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.thankyou-fine { font-size: 0.88rem; color: var(--muted); margin-top: 22px; font-style: italic; }

/* RESPONSIVE */
@media (max-width: 600px) {
  .grid-2 { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
}