/* ============================================
   Component: FAQ Accordion
   Extracted from design-system.css
   ============================================ */
.faq-item {
  border-bottom: 1px solid var(--dt-border);
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--dt-space-5) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--dt-text-lg);
  font-weight: var(--dt-font-semibold);
  color: var(--dt-text);
  text-align: left;
  line-height: var(--dt-leading-snug);
}
.faq-question:hover { color: var(--dt-orange); }
.faq-toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--dt-orange-glow);
  color: var(--dt-orange);
  font-size: var(--dt-text-lg);
  flex-shrink: 0;
  margin-left: var(--dt-space-4);
  transition: transform var(--dt-transition-slow);
}
.faq-item.is-open .faq-toggle { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dt-transition-slow);
}
.faq-item.is-open .faq-answer { max-height: 500px; }
.faq-answer__inner {
  padding-bottom: var(--dt-space-5);
  font-size: var(--dt-text-base);
  color: var(--dt-text-muted);
  line-height: var(--dt-leading-normal);
}