@layer sections {
 
  .section.faq {
    padding: 0 clamp(1rem, 5vw, 4rem) clamp(var(--space-32, 2rem), 6vw, var(--space-48, 3rem));
  }

  .section.faq .container {
    gap: var(--space-16, 1rem);

    color: var(--text-inverse);
    border-radius: var(--radius-lg, 1.25rem);
    padding: clamp(3rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    box-shadow: var(--shadow-sm);

    background: var(--surface-alt);
  }

  .section.faq h3 {
    font-size: var(--font-size-lg);
    color: var(--text-inverse);
  }

  .section.faq details {
    padding-block: var(--space-12, 0.75rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }

  .section.faq details:last-of-type {
    border-bottom: none;
  }

  .section.faq summary {
    cursor: pointer;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-inverse);
    transition: color var(--motion-duration-base) var(--motion-ease-standard);
  }

  .section.faq summary:hover,
  .section.faq summary:focus-visible {
    color: var(--accent-primary);
  }

  .section.faq details[open] summary {
    color: var(--accent-primary);
  }

  .section.faq details p {
    margin-block: var(--space-12, 0.75rem) 0;
    color: rgba(255, 255, 255, 0.72);
    line-height: var(--line-height-loose, 1.7);
  }
}