/* =============================================================================
   faq.css — dedicated FAQ page. Loaded async. Tokens only. Mobile-first.
   ============================================================================= */

.pd-faq-hero .pd-lead { max-width: 50ch; }

/* ---- Search ---- */
.pd-faq-search {
  display: flex; align-items: center; gap: var(--pd-space-3);
  max-width: 30rem; margin: var(--pd-space-8) auto 0;
  background: var(--pd-surface-1); border: 1px solid var(--pd-border-dark);
  border-radius: var(--pd-radius-pill); padding: 0 var(--pd-space-5);
}
.pd-faq-search svg { color: var(--pd-on-dark-muted); flex: none; }
.pd-faq-search input { flex: 1; background: none; border: 0; padding: 0.85rem 0; color: var(--pd-on-dark); }
.pd-faq-search input:focus-visible { outline: none; box-shadow: none; }
.pd-faq-search:focus-within { border-color: rgba(194,97,252,0.5); }

/* ---- Category pills ---- */
.pd-faq-pills { display: flex; flex-wrap: wrap; gap: var(--pd-space-3); justify-content: center; margin-top: var(--pd-space-6); }
.pd-faq-pill {
  font-family: var(--pd-font-body); font-weight: 600; font-size: var(--pd-text-sm);
  color: var(--pd-on-dark); background: var(--pd-surface-1);
  border: 1px solid var(--pd-border-dark); border-radius: var(--pd-radius-pill);
  padding: 0.5rem 1.1rem; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pd-faq-pill:hover { border-color: rgba(194,97,252,0.5); }
.pd-faq-pill.is-active { background: var(--pd-grad-brand); color: var(--pd-white); border-color: transparent; }

/* ---- Groups ---- */
.pd-faq-group { margin-bottom: var(--pd-space-12); }
.pd-faq-group:last-of-type { margin-bottom: 0; }
.pd-faq-group__title {
  font-size: var(--pd-h3); margin-bottom: var(--pd-space-4);
  padding-left: var(--pd-space-4); border-left: 3px solid var(--pd-violet);
}
.pd-faq-group .pd-faq { margin-inline: 0; max-width: none; }

.pd-faq-noresults { margin-top: var(--pd-space-8); font-size: var(--pd-text-lg); }