/* Частые вопросы: пронумерованные <details> в <ol class="faq">. Строка вопроса 600, номер моно,
   шеврон поворачивается; ответ раскрывается по высоте за .25s (::details-content + interpolate-size
   из tokens.css), без анимации при reduced motion. */

.faq {
  --faq-q-fs: var(--fs-title);
  --faq-n-w: 34px;              /* поле номера: ответ выровнен по тексту вопроса */

  margin: 0; padding: 4px 0 0;
  list-style: none;
  counter-reset: q;
  border-top: 1px solid var(--hair);
}
.faq li { padding-bottom: 6px; border-bottom: 1px solid var(--hair); counter-increment: q; }

.faq summary {
  display: flex; align-items: baseline;
  padding: 12px 0;
  font-size: var(--faq-q-fs); font-weight: 600; line-height: 1.25;
  list-style: none; cursor: pointer;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: counter(q) "."; flex: none; width: var(--faq-n-w); font: 400 var(--fs-small) var(--mono); color: var(--ink); }
.faq summary > span { flex: 1; }
.faq summary::after {
  content: ""; flex: none;
  width: 12px; height: 12px; margin-left: 20px;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq summary:hover, .faq summary:focus-visible { color: var(--blue); }

.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .25s ease-out, content-visibility .25s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq details p { max-width: 64ch; padding: 0 0 14px var(--faq-n-w); color: var(--graphite); }
.faq details p a { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .faq details::details-content { transition: none; }
}
@media (max-width: 719px) {
  .faq { --faq-n-w: 28px; }
}