#faq {
  --faq-rule: var(--line);
  --faq-q: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --faq-pad: clamp(18px, 0.9rem + 0.6vw, 24px);
  --faq-ic: 14px;
  --faq-ic-gap: clamp(20px, 0.75rem + 1.5vw, 36px);
  --faq-dur: 200ms;
}

#faq .faq { display: block; }

#faq .faq__list { border-bottom: 1px solid var(--faq-rule); }
#faq .faq__item { border-top: 1px solid var(--faq-rule); }

#faq .faq__item > summary {
  --faq-bleed: 12px;
  position: relative;
  display: block;
  list-style: none;
  cursor: pointer;
  margin-inline: calc(-1 * var(--faq-bleed));
  padding:
    var(--faq-pad)
    calc(var(--faq-bleed) + var(--faq-ic) + var(--faq-ic-gap))
    var(--faq-pad)
    var(--faq-bleed);
  font-family: var(--font-display);
  font-size: var(--faq-q);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: pretty;
  -webkit-tap-highlight-color: transparent;
  transition: padding-bottom var(--faq-dur) var(--ease);
}
#faq .faq__item > summary::-webkit-details-marker { display: none; }
#faq .faq__item > summary::marker { content: ""; }
#faq .faq__item > summary:focus-visible { outline-offset: 0; border-radius: 12px; }

#faq .faq__item > summary::before,
#faq .faq__item > summary::after {
  content: "";
  position: absolute;
  right: calc(var(--faq-bleed) + 2px);
  top: calc(var(--faq-pad) + 0.65em + 0.04em - 0.75px);
  width: var(--faq-ic);
  height: 1.5px;
  border-radius: 1px;
  background: var(--fg-3);
  transition: transform var(--faq-dur) var(--ease), background-color var(--faq-dur) var(--ease);
}
#faq .faq__item > summary::after {
  transform: rotate(90deg);
  transition:
    transform var(--faq-dur) var(--ease),
    background-color var(--faq-dur) var(--ease),
    opacity 60ms linear;
}
#faq .faq__item[open] > summary::after {
  transform: rotate(180deg);
  opacity: 0;
  transition:
    transform var(--faq-dur) var(--ease),
    background-color var(--faq-dur) var(--ease),
    opacity 60ms linear calc(var(--faq-dur) - 60ms);
}
#faq .faq__item[open] > summary::before,
#faq .faq__item[open] > summary::after { background: var(--fg); }

@media (hover: hover) {
  #faq .faq__item > summary:hover::before,
  #faq .faq__item > summary:hover::after { background: var(--fg); }
}

#faq .faq__item[open] > summary { padding-bottom: calc(var(--faq-pad) * 0.5); }

#faq .faq__a {
  padding: 0 0 calc(var(--faq-pad) + 8px);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-2);
}
#faq .faq__a p { max-width: 33em; text-wrap: pretty; }
#faq .faq__a p + p { margin-top: 0.75em; }
#faq .faq__a strong { color: var(--fg); font-weight: 600; }
#faq .faq__a a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
#faq .faq__a a:hover { text-decoration-thickness: 2px; }

@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  #faq .faq__list { interpolate-size: allow-keywords; }
  #faq .faq__item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition:
      block-size var(--faq-dur) var(--ease),
      content-visibility var(--faq-dur) var(--ease) allow-discrete;
  }
  #faq .faq__item[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  #faq .faq__item::details-content { transition: none; }
  #faq .faq__item > summary,
  #faq .faq__item > summary::before,
  #faq .faq__item > summary::after,
  #faq .faq__item[open] > summary::after { transition: none; }
}