/* ============================================================
   LEARN PAGE
   ============================================================ */
.learn-hero {
  background: linear-gradient(160deg, var(--color-primary-light) 0%, var(--color-bg) 70%);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-16) var(--space-6);
  text-align: center;}
.learn-hero-inner { max-width: var(--content-page); margin: 0 auto;}
.learn-hero h1 { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; margin: var(--space-4) 0 var(--space-5); color: var(--color-text);}
.learn-hero p { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-6);}
.learn-hero-disclaimer {
  display: inline-flex; align-items: flex-start; gap: var(--space-2);
  background: var(--color-accent-light); border: 1px solid var(--color-primary-mid);
  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-5);
  font-size: var(--text-xs); color: var(--color-text-muted); text-align: left;
  max-width: 52ch;}

/* QUIZ */
.quiz-section { background: var(--color-surface); padding: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-6);}
.quiz-inner { max-width: var(--content-page); margin: 0 auto;}
.quiz-card { background: var(--color-bg); border: none; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg);}
.quiz-progress { height: 4px; background: var(--color-surface-offset);}
.quiz-progress-bar { height: 100%; background: var(--color-primary); transition: width 400ms ease;}
.quiz-step { display: none; padding: var(--space-8);}
.quiz-step.active { display: block;}
.quiz-q { font-size: var(--text-xl); font-weight: 800; color: var(--color-text); margin-bottom: var(--space-6); letter-spacing: -0.01em;}
.quiz-options { display: flex; flex-direction: column; gap: var(--space-3);}
.quiz-options.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);}
.quiz-opt {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-xl);
  text-align: left; cursor: pointer;
  transition: all var(--transition-interactive); box-shadow: var(--shadow-sm);}
.quiz-opt:hover { border-color: var(--color-primary-text); background: var(--color-primary-light); box-shadow: var(--shadow-md);}
.quiz-opt.selected { border-color: var(--color-primary-text); background: var(--color-primary-light);}
.qopt-icon { font-size: var(--text-3xl); flex-shrink: 0; margin-top: 2px;}
.quiz-opt div:last-child { display: flex; flex-direction: column; gap: var(--space-1);}
.quiz-opt strong { font-size: var(--text-base); color: var(--color-text); font-weight: 700;}
.quiz-opt span { font-size: var(--text-sm); color: var(--color-text-muted);}
.quiz-result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); padding: var(--space-4) 0;}
.result-icon { width: 80px; height: 80px; background: var(--color-primary-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-primary-text); font-weight: 800; font-size: var(--text-xl);}
.quiz-result h2 { font-size: var(--text-xl); font-weight: 800; color: var(--color-text);}
.quiz-result p { font-size: var(--text-base); color: var(--color-text-muted); max-width: 44ch;}

/* EDUCATIONAL */
.edu-section { background: var(--color-bg); padding: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-6);}
.edu-inner { max-width: var(--content-page); margin: 0 auto;}
.edu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-10);}
.edu-card { background: var(--color-surface); border: none; border-radius: var(--radius-xl); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); box-shadow: var(--shadow-sm);}
.edu-num { font-size: var(--text-xl); font-weight: 800; color: var(--color-primary-text); font-family: var(--font-display);}
.edu-card h3 { font-size: var(--text-lg); font-weight: 700; color: var(--color-text);}
.edu-card p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.75;}

/* FAQ */
.faq-section { background: var(--color-surface); padding: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-6);}
.faq-inner { max-width: var(--content-page); margin: 0 auto;}
.faq-list { display: flex; flex-direction: column; gap: 0; border: none; border-radius: var(--radius-xl); overflow: hidden; margin-top: var(--space-10); box-shadow: var(--shadow-sm);}
.faq-item { border-bottom: 1px solid var(--color-border);}
.faq-item:last-child { border-bottom: none;}
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-6); cursor: pointer;
  font-size: var(--text-base); font-weight: 600; color: var(--color-text);
  list-style: none; gap: var(--space-4);}
.faq-q::-webkit-details-marker { display: none;}
.faq-q::after { content: '+'; color: var(--color-primary-text); font-size: var(--text-xl); font-weight: 400; flex-shrink: 0;}
details[open] .faq-q::after { content: '−';}
.faq-item:hover .faq-q { background: var(--color-surface-offset);}
.faq-a { padding: 0 var(--space-6) var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.75;}

/* CTA */
.learn-cta { background: var(--color-surface); padding: var(--space-20) var(--space-6); text-align: center;}
.learn-cta-inner { max-width: var(--content-page); margin: 0 auto;}
.learn-cta h2 { font-size: var(--text-2xl); font-weight: 800; color: var(--color-text); margin-bottom: var(--space-4);}
.learn-cta p { font-size: var(--text-lg); color: var(--color-text-muted); margin-bottom: var(--space-8);}

/* Eyebrow */
.eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary-text); margin-bottom: var(--space-3);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .edu-grid { grid-template-columns: 1fr;}
  .quiz-options.grid2 { grid-template-columns: 1fr;}
}


/* One-line hero headline (wraps only on narrow screens) */
.learn-hero h1.one-line { white-space: nowrap;}
@media (max-width: 760px) {
  .learn-hero h1.one-line { white-space: normal; font-size: var(--text-lg);}
}

/* Prescription/FDA disclosure at the quiz decision moment (patient safety) */
.quiz-result-note { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.6;
  margin-top: var(--space-4); max-width: 52ch; margin-left: auto; margin-right: auto; }