/* ─────────────────────────────────────────
   QUIZ.CSS
───────────────────────────────────────── */

.quiz-page { position:relative; min-height:100vh; display:flex; align-items:center; padding:120px 0 80px; }
.quiz-bg { position:absolute; inset:0; background: radial-gradient(ellipse 60% 70% at 80% 30%, rgba(107,140,107,0.12) 0%, transparent 70%), radial-gradient(ellipse 40% 50% at 10% 70%, rgba(92,64,51,0.06) 0%, transparent 60%), var(--cream); z-index:0; }
.quiz-page-inner { position:relative; z-index:1; max-width:640px; margin:0 auto; width:100%; }

/* SCREENS */
.quiz-screen { display:none; }
.quiz-screen.active { display:block; }

/* CARD */
.quiz-card { background:var(--white); border-radius:16px; box-shadow:0 8px 40px rgba(92,64,51,0.12); padding:40px; }

/* INTRO */
.quiz-icon { font-size:2.5rem; margin-bottom:16px; }
.quiz-card h1 { font-size:clamp(1.6rem,3vw,2.2rem); color:var(--brown); margin-bottom:12px; }
.quiz-intro-text { font-size:16px; color:var(--text-mid); line-height:1.7; margin-bottom:24px; }
.quiz-intro-points { display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.quiz-point { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-mid); }
.quiz-point span { width:20px; height:20px; border-radius:50%; background:var(--sage-dark); color:var(--white); font-size:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.quiz-start-btn { width:100%; padding:15px; font-size:16px; }

/* PROGRESS */
.quiz-progress-wrap { display:flex; align-items:center; gap:14px; margin-bottom:32px; }
.quiz-progress-bar { flex:1; height:4px; background:var(--cream-dark); border-radius:999px; overflow:hidden; }
.quiz-progress-fill { height:100%; background:var(--sage-dark); border-radius:999px; transition:width 0.4s ease; width:0%; }
.quiz-progress-label { font-size:12px; color:var(--text-light); white-space:nowrap; }

/* QUESTION */
.quiz-q-text { font-size:clamp(1.1rem,2.5vw,1.4rem); color:var(--brown); margin-bottom:24px; line-height:1.35; }

.quiz-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.quiz-option { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--cream); border:1.5px solid var(--cream-dark); border-radius:var(--radius-sm); cursor:pointer; font-family:'DM Sans',sans-serif; text-align:left; transition:all 0.15s; }
.quiz-option:hover { border-color:var(--brown-pale); background:var(--cream-dark); }
.quiz-option.selected { border-color:var(--sage-dark); background:var(--sage-pale); }

.option-icon { font-size:1.3rem; line-height:1; flex-shrink:0; }
.option-label { font-size:13px; color:var(--text-dark); line-height:1.4; }

/* NAV */
.quiz-nav { display:flex; justify-content:space-between; align-items:center; margin-top:24px; }
.quiz-back-btn { padding:10px 20px; font-size:13px; }
.quiz-next-btn { padding:12px 28px; font-size:14px; margin-left:auto; }
.quiz-next-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none !important; }

/* LEAD CAPTURE */
.quiz-card h2 { font-size:1.4rem; color:var(--brown); margin-bottom:10px; }
.quiz-capture-text { font-size:15px; color:var(--text-mid); line-height:1.65; margin-bottom:24px; }
.quiz-capture-form { display:flex; flex-direction:column; gap:14px; }
.quiz-capture-form label { font-size:12px; font-weight:500; color:var(--text-mid); }
.quiz-capture-form input { width:100%; padding:11px 14px; border:1px solid var(--cream-dark); border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif; font-size:14px; color:var(--text-dark); background:var(--cream); outline:none; transition:border-color 0.15s; }
.quiz-capture-form input:focus { border-color:var(--sage-dark); background:var(--white); }
.form-group { display:flex; flex-direction:column; gap:5px; }
.optional { font-weight:400; color:var(--text-light); }
.form-disclaimer { font-size:11px; color:var(--text-light); text-align:center; margin-top:4px; }

/* RESULTS */
.quiz-results-card { display:flex; flex-direction:column; gap:24px; }
.results-header-row { display:flex; align-items:center; gap:16px; }
.results-header-row .quiz-icon { font-size:2rem; margin:0; }
.results-eyebrow { font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--sage-dark); margin-bottom:4px; }
.results-header-row h2 { font-size:1.6rem; color:var(--brown); margin:0; }
.result-description { font-size:15px; color:var(--text-mid); line-height:1.7; }

.result-details { background:var(--cream); border-radius:var(--radius-sm); padding:16px 20px; display:flex; flex-direction:column; gap:0; }
.result-detail-item { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--cream-dark); font-size:13px; gap:16px; }
.result-detail-item:last-child { border-bottom:none; }
.result-detail-label { color:var(--text-light); }
.result-detail-value { color:var(--text-dark); font-weight:500; text-align:right; }

.result-next-steps h3 { font-size:1rem; color:var(--brown); margin-bottom:14px; }
.next-steps-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.next-step-card { display:flex; flex-direction:column; gap:6px; padding:16px; background:var(--cream); border-radius:var(--radius-sm); border:1px solid var(--cream-dark); text-decoration:none; transition:all 0.15s; }
.next-step-card:hover { border-color:var(--brown-pale); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.next-step-icon { font-size:1.3rem; }
.next-step-card h4 { font-size:12px; font-weight:500; color:var(--brown); line-height:1.3; }
.next-step-card p { font-size:11px; color:var(--text-mid); line-height:1.5; }

.result-cta { background:var(--sage-pale); border-radius:var(--radius-sm); padding:20px; border:1px solid var(--sage-light); }
.result-cta p { font-size:14px; color:var(--text-mid); line-height:1.6; margin:0; }

.quiz-restart { background:none; border:none; font-family:'DM Sans',sans-serif; font-size:13px; color:var(--text-light); cursor:pointer; padding:0; text-decoration:underline; }
.quiz-restart:hover { color:var(--text-dark); }

/* RESPONSIVE */
@media (max-width:600px) {
  .quiz-card { padding:24px 20px; }
  .quiz-options { grid-template-columns:1fr; }
  .next-steps-grid { grid-template-columns:1fr; }
  .results-header-row { flex-direction:column; align-items:flex-start; gap:10px; }
}