@layer components {
  .faq { max-width: 46rem; margin-inline: auto; }

  .faq-section { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }
  .faq-section__title {
    margin-block-end: .6rem;
    font-size: var(--pw-fs-h3);
    letter-spacing: var(--pw-track-snug);
  }
  .faq-section__intro {
    max-inline-size: 40rem;
    margin-block-end: 1.4rem;
    color: var(--pw-fg-meta);
    line-height: 1.6;
    & a { color: var(--pw-primary-soft); text-decoration: underline; text-underline-offset: .2em; }
  }

  .faq__title {
    margin-bottom: 1.5rem;
    color: var(--pw-fg-strong);
    font-size: var(--pw-fs-h3);
    font-weight: 300;
    letter-spacing: var(--pw-track-snug);
  }
  .faq__list { border-top: 1px solid var(--pw-border); }

  .faq-item { border-bottom: 1px solid var(--pw-border); }
  .faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.35rem;
    color: var(--pw-fg-strong);
    font-size: var(--pw-fs-md);
    font-weight: 300;
    cursor: pointer;
    list-style: none;
    transition: color .2s;
    &::-webkit-details-marker { display: none; }
    &:hover { color: var(--pw-primary-soft); }
  }

  .faq-item__marker {
    position: relative;
    inline-size: .9rem;
    block-size: .9rem;
    flex: none;
    &::before,
    &::after {
      content: "";
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: 0;
      inline-size: 100%;
      block-size: 1.5px;
      background: var(--pw-primary-soft);
      translate: 0 -50%;
    }
    &::after { rotate: 90deg; transition: rotate .25s var(--pw-ease-scene); }
    .faq-item[open] &::after { rotate: 0deg; }
  }

  .faq-item__a {
    padding-block: 0 1.35rem;
    & p { margin-block: .6rem 0; }
    & > * { max-width: none; color: var(--pw-fg-subtle); font-weight: 300; line-height: 1.7; }
    & > * + * { margin-top: .75rem; }
    & a {
      color: var(--pw-primary-soft);
      text-decoration: underline;
      text-underline-offset: .2em;
      &:hover { color: var(--pw-fg-strong); }
    }
    & :not(pre) > code { color: var(--pw-fg-strong); font-family: var(--pw-font-mono); font-size: .88em; }
  }

  .doc-body .doc-faq { margin: .5rem 0 2.5rem; }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .faq-item__marker::after { transition: none; }
  }
}