@layer components {
  /* Questions a family asks before they start, each opening to a plain answer: the app's own
     fold, set at the site's size. */
  .site-faq {
    inline-size: var(--size-fill);
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .site-faq .fold {
    max-inline-size: none;
    margin: var(--space-0);
    padding-inline: var(--space-0);
  }

  .site-faq .fold__summary {
    min-block-size: var(--space-13);
    padding-block: var(--space-6);
    border-block-start: var(--border-width) solid var(--color-border);
    font: var(--type-title-2);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-display);
  }

  .site-faq .fold__toggle {
    font: var(--type-label);
  }

  .site-faq .fold__body {
    padding-block: var(--space-0) var(--space-8);
  }

  .site-faq .fold__body > p {
    max-inline-size: var(--measure);
    font: var(--type-site-lead);
    color: var(--color-ink-muted);
  }
}