/* Section: FAQ (#faq). Native <details>, no JavaScript. Every answer reuses approved copy from the sections above.
   Independent of the other sections. Needs section-base.css. */

.faq__list { display: grid; gap: var(--s-3); max-width: 820px; margin-inline: auto; }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); cursor: pointer; list-style: none;
  color: var(--t-head); font-size: var(--fs-body); font-weight: 500; line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {                       /* chevron */
  content: ""; flex: none; width: 8px; height: 8px;
  border-right: 1.5px solid var(--t-3); border-bottom: 1.5px solid var(--t-3);
  transform: rotate(-45deg); transition: transform 0.2s ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 var(--s-5) var(--s-5); max-width: 68ch; }
.faq__a p { margin: 0; color: var(--t-2); font-size: var(--fs-small); line-height: 1.6; }
.faq__a p + p { margin-top: var(--s-3); }
.faq__item[open] { border-color: rgba(255, 255, 255, 0.16); }
@media (prefers-reduced-motion: reduce) { .faq__item summary::after { transition: none; } }