@layer components {
  .faq__list { max-width: var(--faq-width); }
  .faq__item { border-block-end: 1px solid var(--color-border); }
  .faq__item:first-child { border-block-start: 1px solid var(--color-border); }
  .faq__q {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
    min-height: var(--tap); padding-block: var(--space-5); cursor: pointer; list-style: none;
    font: 500 var(--font-size-h3) / var(--line-heading) var(--font-body);
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q::after { content: "+"; font: 300 var(--step-2) / 1 var(--font-display); transition: transform var(--duration-2) var(--ease-out); }
  .faq__item[open] .faq__q::after { transform: rotate(45deg); }
  .faq__a { padding-block-end: var(--space-5); color: var(--color-text-muted); }
}