/* faq.css — <details class="faq__item"><summary class="faq__q"> (12 §5). Works without JS. */

.faq { border-top: var(--border-w) solid var(--border); }

.faq__item { border-bottom: var(--border-w) solid var(--border); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--touch-min);
  padding-block: var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: "";
  flex: none;
  width: var(--sp-3);
  height: var(--sp-3);
  border-right: var(--focus-w) solid var(--text-muted);
  border-bottom: var(--focus-w) solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.faq__item[open] > .faq__q::after { transform: rotate(-135deg); }

.faq__q:hover { color: var(--link-hover); }

.faq__a { padding-bottom: var(--sp-5); color: var(--text); }
.faq__a > * + * { margin-top: var(--sp-3); }