/* ============================================================
   CONSULTATION INTRO — styling. Reuses existing design tokens only;
   introduces no new colours. Deliberately warmer and more editorial
   than the old option grid: larger lead line in the patient's own
   voice, quieter clinical echo beneath.
   ============================================================ */

#sIntro .q-body { padding-bottom: 40px; }

.consult-greeting {
  margin-bottom: 28px;
}
.consult-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.consult-title {
  font-family: 'Bricolage Grotesque', 'Tajawal', sans-serif;
  font-size: clamp(22px, 5.5vw, 30px);
  line-height: 1.28;
  color: var(--bone);
  margin: 0 0 12px;
  font-weight: 600;
}
.consult-sub {
  font-size: 15px;
  line-height: 1.65;
  color: var(--mist);
  margin: 0;
}

.consult-concerns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.consult-concern {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: start;
  padding: 18px 20px;
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .35s cubic-bezier(.16,1,.3,1),
              background .35s cubic-bezier(.16,1,.3,1),
              transform .35s cubic-bezier(.16,1,.3,1),
              opacity .3s ease;
}
.consult-concern:hover {
  border-color: var(--hairline-strong);
  background: var(--ink-raised-2);
  transform: translateY(-1px);
}
.consult-concern-lead {
  font-family: 'Tajawal', 'Manrope', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--bone);
  font-weight: 500;
}
.consult-concern-echo {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mist-dim);
}
.consult-concern.chosen {
  border-color: var(--gold);
  background: var(--gold-soft);
  transform: scale(1.01);
}
.consult-concern.dim {
  opacity: 0.35;
  transform: scale(0.99);
}