/* Khan Herbals brand palette (BRAND_COLOR_GUIDE.md):
   primary green #1a472a, warm off-white #f9f9f7, light border #e0d5c8,
   medium border #c9bfb3, dark gray #5a5a5a, medium gray #888888 */
.quiz-section .container { max-width: 720px; }
.quiz-section h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.quiz-sub { color: #5a5a5a; margin: 0.5rem 0 1.5rem; }
#quiz-app { background: #f9f9f7; border: 1px solid #e0d5c8; border-radius: 14px; padding: 1.5rem; }
.quiz-progress { font-size: 0.85rem; color: #888888; margin-bottom: 0.75rem; }
.quiz-q { font-size: 1.2rem; margin: 0 0 1rem; }
.quiz-answers { display: grid; gap: 0.6rem; }
.quiz-answer { text-align: left; padding: 0.85rem 1rem; border: 1px solid #c9bfb3; border-radius: 10px; background: #ffffff; cursor: pointer; font-size: 1rem; transition: border-color 0.15s, background 0.15s; }
.quiz-answer:hover { border-color: #1a472a; background: rgba(26, 71, 42, 0.06); }
.quiz-back { margin-top: 0.75rem; background: none; border: none; color: #888888; cursor: pointer; text-decoration: underline; }
.quiz-result h3 { margin: 1.25rem 0 0.5rem; }
.quiz-result-type { color: #1a472a; }
.quiz-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; }
.quiz-product { display: block; border: 1px solid #e0d5c8; border-radius: 10px; padding: 0.75rem; text-decoration: none; color: inherit; background: #ffffff; }
.quiz-product img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.quiz-product-name { display: block; font-size: 0.9rem; margin: 0.5rem 0 0.25rem; }
.quiz-product-price { font-weight: 600; color: #1a472a; }
.quiz-lead { margin-top: 1.5rem; border-top: 1px dashed #c9bfb3; padding-top: 1rem; }
.quiz-lead form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.quiz-lead input { flex: 1 1 220px; padding: 0.7rem 0.9rem; border: 1px solid #c9bfb3; border-radius: 8px; font-size: 1rem; }
.quiz-lead button { padding: 0.7rem 1.2rem; background: #1a472a; color: #ffffff; border: 0; border-radius: 8px; cursor: pointer; font-size: 1rem; }
.quiz-lead button:hover { background: #2d6b42; }
.quiz-lead-msg { margin: 0.5rem 0 0; color: #1a472a; }
/* Page imagery: hero + hair-type sections */
.quiz-hero { width: 100%; max-width: 720px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; margin-bottom: 1.25rem; }
.quiz-type-row { display: flex; gap: 1.25rem; align-items: flex-start; margin: 1.5rem 0; }
.quiz-type-row img { flex: 0 0 140px; width: 140px; height: 140px; object-fit: cover; border-radius: 12px; }
.quiz-type-row h3 { margin: 0 0 0.4rem; }
.quiz-type-row p { margin: 0; }
@media (max-width: 480px) {
    .quiz-type-row { flex-direction: column; align-items: center; text-align: center; }
    .quiz-type-row img { flex-basis: auto; width: 100%; max-width: 280px; height: auto; aspect-ratio: 1; }
}