/* 9. FAQ – native details/summary accordion.
   The plus turns into a minus by rotating its vertical bar (transform only);
   the answer fades in on open (js/animations/faq.js). */
.faq__list { max-width: var(--measure); margin-inline: auto; border-top: var(--border-hairline) solid var(--line-strong); }
.faq__item { border-bottom: var(--border-hairline) solid var(--line-strong); }
.faq__question {
  position: relative;
  display: block;
  padding-block: var(--space-5);
  padding-right: var(--space-7);
  font-family: var(--font-display); font-size: var(--fs-heading-3); line-height: var(--lh-heading-3); font-weight: var(--fw-heading-3);
  cursor: pointer; list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::before, .faq__question::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 20px; height: 1.5px; margin-top: -0.75px;
  background: currentColor;
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.faq__question::after { transform: rotate(90deg); }
.faq__item[open] .faq__question::after { transform: rotate(0deg); opacity: 0; }
@media (hover: hover) {
  .faq__question:hover::before { transform: scaleX(1.2); }
}
.faq__answer { padding-bottom: var(--space-5); padding-right: var(--space-7); color: var(--ink-muted); }

@media (max-width: 767px) {
  .faq__question { font-size: var(--fs-lead); line-height: var(--lh-lead); }
  .faq__answer { padding-right: 0; }
}