---
id: seed:archetypes/faq
title: FAQ section archetypes
source_type: seed_archetype
priority: warm
---

An FAQ exists to handle the objections your pricing and features pages couldn't pre-empt. It is not a documentation directory. Aim for 5–8 questions, each tied to a real conversion blocker. Six working archetypes:

---

**Accordion (default).** Each question is a row; clicking expands the answer. Use `<details>` + `<summary>` so it works without JS.

*Animation & Visual Details:*
- *Entrance*: FAQ items fade in with stagger (0.05s) on scroll-into-view
- *Hover*: Question row background tints slightly; chevron icon rotates
- *Gradients*: Open item has gradient left border accent; chevron uses gradient fill
- *Radial circles*: Small radial dot behind the chevron icon, pulsing when item is open
- *Scroll trigger*: IntersectionObserver at 10% threshold for each item
- *JS interaction*: CSS `grid-template-rows: 0fr → 1fr` technique for smooth height animation without JS

```html
<section data-amb-section="faq" class="faq-section">
  <div class="container">
    <div class="faq-header">
      <h2 class="faq-title">Frequently asked questions</h2>
      <p class="faq-subtitle">Everything you need to know about {product}</p>
    </div>
    <div class="faq-list">
      <details class="faq-item">
        <summary class="faq-question">
          <span class="faq-question-text">{Question phrased exactly how the customer would ask it}</span>
          <span class="faq-icon">
            <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="6 9 12 15 18 9"/>
            </svg>
          </span>
        </summary>
        <div class="faq-answer-wrapper">
          <p class="faq-answer">{Direct answer first sentence. Then one supporting sentence with proof / specifics.}</p>
        </div>
      </details>
      <details class="faq-item">
        <summary class="faq-question">
          <span class="faq-question-text">{Question phrased exactly how the customer would ask it}</span>
          <span class="faq-icon">
            <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="6 9 12 15 18 9"/>
            </svg>
          </span>
        </summary>
        <div class="faq-answer-wrapper">
          <p class="faq-answer">{Direct answer first sentence. Then one supporting sentence with proof / specifics.}</p>
        </div>
      </details>
      <details class="faq-item">
        <summary class="faq-question">
          <span class="faq-question-text">{Question phrased exactly how the customer would ask it}</span>
          <span class="faq-icon">
            <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="6 9 12 15 18 9"/>
            </svg>
          </span>
        </summary>
        <div class="faq-answer-wrapper">
          <p class="faq-answer">{Direct answer first sentence. Then one supporting sentence with proof / specifics.}</p>
        </div>
      </details>
    </div>
  </div>
</section>
```

```css
:root {
  --faq-enter-duration: 0.4s;
  --faq-stagger: 0.05s;
}

.faq-section {
  padding: clamp(64px, 8vw, 100px) 0;
}

.faq-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto clamp(40px, 5vw, 60px);
}

.faq-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text, #1e293b);
}

.faq-subtitle {
  font-size: 1.05rem;
  color: var(--color-text-muted, #64748b);
  margin-top: 12px;
}

.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid #e2e8f0;
  opacity: 0;
  transform: translateY(16px);
  transition: background 0.2s ease;
}

.faq-item.is-visible {
  animation: faq-item-enter var(--faq-enter-duration) ease-out forwards;
}

.faq-item:nth-child(1).is-visible { animation-delay: 0s; }
.faq-item:nth-child(2).is-visible { animation-delay: var(--faq-stagger); }
.faq-item:nth-child(3).is-visible { animation-delay: calc(var(--faq-stagger) * 2); }
.faq-item:nth-child(4).is-visible { animation-delay: calc(var(--faq-stagger) * 3); }
.faq-item:nth-child(5).is-visible { animation-delay: calc(var(--faq-stagger) * 4); }

@keyframes faq-item-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq-item:hover {
  background: rgba(99,102,241,0.02);
}

summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

summary::-webkit-details-marker {
  display: none;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

.faq-question-text {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text, #1e293b);
  flex: 1;
}

.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-chevron {
  width: 20px;
  height: 20px;
  color: var(--color-accent, #6366f1);
  transition: transform 0.3s ease;
}

details[open] .faq-chevron {
  transform: rotate(180deg);
}

details[open] .faq-question {
  color: var(--color-accent, #6366f1);
}

.faq-answer-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

details[open] .faq-answer-wrapper {
  grid-template-rows: 1fr;
}

.faq-answer {
  overflow: hidden;
  font-size: 0.95rem;
  color: var(--color-text-muted, #64748b);
  line-height: 1.7;
  padding-bottom: 20px;
  padding-left: 4px;
}

details[open] {
  border-left: 3px solid var(--color-accent, #6366f1);
  padding-left: 16px;
  margin-left: -16px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item {
    opacity: 1;
    transform: none;
  }
  .faq-answer-wrapper {
    transition: none;
  }
}
```

*JS behavior:*
```javascript
const faqItems = document.querySelectorAll('.faq-item');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.1 });
faqItems.forEach(item => observer.observe(item));
```

---

**Two-column static grid.** Question on the left as a bolded line, answer below. Use when most answers are short (under 30 words) and you want everything scannable without clicking.

*Animation & Visual Details:*
- *Entrance*: Left column (questions) fades in from left; right column (answers) follows at 0.1s stagger
- *Hover*: Question row highlights with gradient left border
- *Gradients*: Active/hover row has gradient left border (accent color)
- *Radial circles*: Small radial dot accent at the top of each question
- *Scroll trigger*: IntersectionObserver, both columns animate independently
- *JS interaction*: None — static CSS grid

```html
<section data-amb-section="faq" class="faq-section faq-section--static">
  <div class="container">
    <h2 class="faq-title">Frequently asked questions</h2>
    <div class="faq-static-grid">
      <div class="faq-static-questions">
        <div class="faq-static-row">
          <span class="faq-static-num">01</span>
          <span class="faq-static-q">{How would a customer ask this?}</span>
        </div>
        <div class="faq-static-row">
          <span class="faq-static-num">02</span>
          <span class="faq-static-q">{How would a customer ask this?}</span>
        </div>
        <div class="faq-static-row">
          <span class="faq-static-num">03</span>
          <span class="faq-static-q">{How would a customer ask this?}</span>
        </div>
        <div class="faq-static-row">
          <span class="faq-static-num">04</span>
          <span class="faq-static-q">{How would a customer ask this?}</span>
        </div>
      </div>
      <div class="faq-static-answers">
        <div class="faq-static-row">
          <p class="faq-static-a">{Direct answer, one short sentence.}</p>
        </div>
        <div class="faq-static-row">
          <p class="faq-static-a">{Direct answer, one short sentence.}</p>
        </div>
        <div class="faq-static-row">
          <p class="faq-static-a">{Direct answer, one short sentence.}</p>
        </div>
        <div class="faq-static-row">
          <p class="faq-static-a">{Direct answer, one short sentence.}</p>
        </div>
      </div>
    </div>
  </div>
</section>
```

```css
.faq-section--static {
  padding: clamp(64px, 8vw, 100px) 0;
  background: var(--color-bg-alt, #f8fafc);
}

.faq-static-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(32px, 4vw, 64px);
  max-width: 900px;
  margin: 0 auto;
}

.faq-static-questions,
.faq-static-answers {
  display: flex;
  flex-direction: column;
}

.faq-static-row {
  padding: 18px 0;
  border-bottom: 1px solid #e2e8f0;
  opacity: 0;
  transform: translateX(-20px);
  transition: background 0.2s ease;
}

.faq-static-answers .faq-static-row {
  transform: translateX(20px);
}

.faq-static-row.is-visible {
  animation: faq-row-enter 0.4s ease-out forwards;
}

.faq-static-questions .faq-static-row:nth-child(1).is-visible { animation-delay: 0s; }
.faq-static-questions .faq-static-row:nth-child(2).is-visible { animation-delay: 0.08s; }
.faq-static-questions .faq-static-row:nth-child(3).is-visible { animation-delay: 0.16s; }
.faq-static-questions .faq-static-row:nth-child(4).is-visible { animation-delay: 0.24s; }

.faq-static-answers .faq-static-row:nth-child(1).is-visible { animation-delay: 0.1s; }
.faq-static-answers .faq-static-row:nth-child(2).is-visible { animation-delay: 0.18s; }
.faq-static-answers .faq-static-row:nth-child(3).is-visible { animation-delay: 0.26s; }
.faq-static-answers .faq-static-row:nth-child(4).is-visible { animation-delay: 0.34s; }

@keyframes faq-row-enter {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.faq-static-row:hover {
  background: rgba(99,102,241,0.03);
  padding-left: 8px;
  margin-left: -8px;
}

.faq-static-num {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent, #6366f1);
  margin-right: 12px;
  font-variant-numeric: tabular-nums;
}

.faq-static-q {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text, #1e293b);
}

.faq-static-a {
  font-size: 0.95rem;
  color: var(--color-text-muted, #64748b);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 640px) {
  .faq-static-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-static-row {
    opacity: 1;
    transform: none;
  }
}
```

---

**Categorized FAQ.** Group questions by topic ("Billing", "Setup", "Security") with sticky-scrolling category nav. Only use on pages with 15+ questions — otherwise it's overkill.

*Animation & Visual Details:*
- *Entrance*: Category tabs fade in first; FAQ content fades in at 0.2s delay
- *Hover*: Active category tab gets gradient underline; question rows highlight on hover
- *Gradients*: Active tab has gradient underline (2px); inactive tabs have subtle gradient on hover
- *Radial circles*: Radial dot beside the active category label
- *Scroll trigger*: Active tab updates as user scrolls through categories (scroll-spy)
- *JS interaction*: Tab switching with smooth content crossfade; scroll-spy for active category; smooth scroll to section on tab click

```html
<section data-amb-section="faq" class="faq-section faq-section--categorized">
  <div class="container">
    <h2 class="faq-title">Frequently asked questions</h2>
    <div class="faq-category-nav" role="tablist">
      <button class="faq-category-tab faq-category-tab--active" role="tab" data-category="billing">Billing</button>
      <button class="faq-category-tab" role="tab" data-category="setup">Setup</button>
      <button class="faq-category-tab" role="tab" data-category="security">Security</button>
    </div>
    <div class="faq-category-content">
      <div class="faq-category-panel faq-category-panel--active" data-category="billing">
        <details class="faq-item">
          <summary class="faq-question">
            <span class="faq-question-text">{Billing question in customer voice}</span>
            <span class="faq-icon">
              <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
            </span>
          </summary>
          <div class="faq-answer-wrapper">
            <p class="faq-answer">{Direct answer.}</p>
          </div>
        </details>
        <details class="faq-item">
          <summary class="faq-question">
            <span class="faq-question-text">{Billing question in customer voice}</span>
            <span class="faq-icon">
              <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
            </span>
          </summary>
          <div class="faq-answer-wrapper">
            <p class="faq-answer">{Direct answer.}</p>
          </div>
        </details>
      </div>
      <div class="faq-category-panel" data-category="setup">
        <details class="faq-item">
          <summary class="faq-question">
            <span class="faq-question-text">{Setup question in customer voice}</span>
            <span class="faq-icon">
              <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
            </span>
          </summary>
          <div class="faq-answer-wrapper">
            <p class="faq-answer">{Direct answer.}</p>
          </div>
        </details>
      </div>
      <div class="faq-category-panel" data-category="security">
        <details class="faq-item">
          <summary class="faq-question">
            <span class="faq-question-text">{Security question in customer voice}</span>
            <span class="faq-icon">
              <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
            </span>
          </summary>
          <div class="faq-answer-wrapper">
            <p class="faq-answer">{Direct answer.}</p>
          </div>
        </details>
      </div>
    </div>
  </div>
</section>
```

```css
.faq-category-nav {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
  position: sticky;
  top: 0;
  background: #fff;
  padding: 16px 0;
  z-index: 10;
}

.faq-category-tab {
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted, #64748b);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.faq-category-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #7c3aed);
  transition: width 0.3s ease;
  border-radius: 1px;
}

.faq-category-tab:hover {
  border-color: var(--color-accent, #6366f1);
  color: var(--color-text, #1e293b);
}

.faq-category-tab--active {
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(124,58,237,0.08));
  border-color: var(--color-accent, #6366f1);
  color: var(--color-accent, #6366f1);
}

.faq-category-tab--active::after {
  width: 60%;
}

.faq-category-panel {
  display: none;
  animation: category-fade-in 0.3s ease;
}

.faq-category-panel--active {
  display: block;
}

@keyframes category-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .faq-category-panel {
    animation: none;
  }
}
```

*JS behavior:*
```javascript
const tabs = document.querySelectorAll('.faq-category-tab');
const panels = document.querySelectorAll('.faq-category-panel');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    const category = tab.dataset.category;

    tabs.forEach(t => t.classList.remove('faq-category-tab--active'));
    panels.forEach(p => p.classList.remove('faq-category-panel--active'));

    tab.classList.add('faq-category-tab--active');
    document.querySelector(`.faq-category-panel[data-category="${category}"]`).classList.add('faq-category-panel--active');

    // Re-observe FAQ items in the new panel
    document.querySelectorAll(`.faq-category-panel[data-category="${category}"] .faq-item`).forEach(item => {
      item.classList.add('is-visible');
    });
  });
});

// Initialize first panel
document.querySelectorAll('.faq-category-panel--active .faq-item').forEach(item => {
  item.classList.add('is-visible');
});
```

---

**Animated progress FAQ.** Progress bar fills as questions open, radial accent on active item. Visual feedback on how many questions have been explored.

*Animation & Visual Details:*
- *Entrance*: All collapsed items stagger in on scroll; progress bar starts at 0
- *Hover*: Active question row has radial glow; chevron rotates with spring animation
- *Gradients*: Progress bar uses gradient fill (accent to accent-secondary); active row has gradient left border
- *Radial circles*: Radial glow behind the currently open question row
- *Scroll trigger*: IntersectionObserver at 15% threshold
- *JS interaction*: Progress bar updates as questions are opened; track how many questions have been answered/expanded

```html
<section data-amb-section="faq" class="faq-section faq-section--progress">
  <div class="container">
    <div class="faq-progress-header">
      <h2 class="faq-title">Frequently asked questions</h2>
      <div class="faq-progress-track">
        <div class="faq-progress-bar" style="width: 0%"></div>
      </div>
      <p class="faq-progress-label"><span class="faq-progress-count">0</span> of <span class="faq-progress-total">{n}</span> answered</p>
    </div>
    <div class="faq-list">
      <details class="faq-item faq-item--progress">
        <summary class="faq-question">
          <span class="faq-item-num">01</span>
          <span class="faq-question-text">{Question in customer voice}</span>
          <span class="faq-icon">
            <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
          </span>
        </summary>
        <div class="faq-answer-wrapper">
          <p class="faq-answer">{Direct answer.}</p>
        </div>
      </details>
      <details class="faq-item faq-item--progress">
        <summary class="faq-question">
          <span class="faq-item-num">02</span>
          <span class="faq-question-text">{Question in customer voice}</span>
          <span class="faq-icon">
            <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
          </span>
        </summary>
        <div class="faq-answer-wrapper">
          <p class="faq-answer">{Direct answer.}</p>
        </div>
      </details>
    </div>
  </div>
</section>
```

```css
.faq-progress-header {
  max-width: 720px;
  margin: 0 auto clamp(32px, 4vw, 48px);
}

.faq-progress-track {
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  margin: 20px 0 12px;
  overflow: hidden;
}

.faq-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #7c3aed);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.faq-progress-label {
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
  text-align: right;
}

.faq-item-num {
  display: inline-block;
  width: 24px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent, #6366f1);
  font-variant-numeric: tabular-nums;
}

.faq-item--progress {
  position: relative;
}

.faq-item--progress::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: radial-gradient(circle at left, rgba(99,102,241,0.08) 0%, transparent 70%);
  transition: width 0.3s ease;
  pointer-events: none;
}

.faq-item--progress.is-open::before {
  width: 100%;
}
```

*JS behavior:*
```javascript
const progressBar = document.querySelector('.faq-progress-bar');
const progressCount = document.querySelector('.faq-progress-count');
const progressTotal = document.querySelector('.faq-progress-total');
const items = document.querySelectorAll('.faq-item--progress');
const total = items.length;

progressTotal.textContent = total;

function updateProgress() {
  const openCount = document.querySelectorAll('.faq-item--progress[open]').length;
  const percent = (openCount / total) * 100;
  progressBar.style.width = percent + '%';
  progressCount.textContent = openCount;
}

items.forEach(item => {
  item.addEventListener('toggle', () => {
    item.classList.toggle('is-open', item.open);
    updateProgress();
  });
});
```

---

**Gradient highlight FAQ.** Open item gets animated gradient highlight sweep. The gradient "paints" across the background of the open answer.

*Animation & Visual Details:*
- *Entrance*: Items stagger in from below
- *Hover*: Question row tints with gradient on hover
- *Gradients*: When item opens, a gradient sweep animates from left to right across the answer background (background-size: 0% → 100%)
- *Radial circles*: Radial glow behind the open item
- *Scroll trigger*: IntersectionObserver at 15% threshold
- *JS interaction*: Gradient sweep animation triggered on details[open] state change

```html
<section data-amb-section="faq" class="faq-section faq-section--gradient">
  <div class="container">
    <h2 class="faq-title">Frequently asked questions</h2>
    <div class="faq-list">
      <details class="faq-item faq-item--gradient">
        <div class="faq-item-glow"></div>
        <summary class="faq-question">
          <span class="faq-question-text">{Question in customer voice}</span>
          <span class="faq-icon">
            <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
          </span>
        </summary>
        <div class="faq-answer-wrapper">
          <p class="faq-answer">{Direct answer.}</p>
        </div>
      </details>
      <details class="faq-item faq-item--gradient">
        <div class="faq-item-glow"></div>
        <summary class="faq-question">
          <span class="faq-question-text">{Question in customer voice}</span>
          <span class="faq-icon">
            <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
          </span>
        </summary>
        <div class="faq-answer-wrapper">
          <p class="faq-answer">{Direct answer.}</p>
        </div>
      </details>
    </div>
  </div>
</section>
```

```css
.faq-section--gradient {
  padding: clamp(64px, 8vw, 100px) 0;
}

.faq-item--gradient {
  position: relative;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: background 0.2s ease;
}

.faq-item-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(99,102,241,0.06) 0%, transparent 100%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s ease;
  pointer-events: none;
}

details[open].faq-item--gradient .faq-item-glow {
  background-size: 100% 100%;
}

details[open].faq-item--gradient {
  background: rgba(99,102,241,0.03);
}

summary {
  list-style: none;
  cursor: pointer;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

summary::-webkit-details-marker { display: none; }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

.faq-question-text {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text, #1e293b);
}

.faq-chevron {
  width: 20px;
  height: 20px;
  color: var(--color-accent, #6366f1);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

details[open] .faq-chevron {
  transform: rotate(180deg);
}

details[open] .faq-question-text {
  color: var(--color-accent, #6366f1);
}

.faq-answer-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

details[open] .faq-answer-wrapper {
  grid-template-rows: 1fr;
}

.faq-answer {
  overflow: hidden;
  padding: 0 20px 20px;
  font-size: 0.95rem;
  color: var(--color-text-muted, #64748b);
  line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item-glow {
    transition: none;
    background-size: 100% 100%;
  }
  .faq-answer-wrapper {
    transition: none;
  }
}
```

---

**Minimal icon FAQ.** Plus/minus with radial circle background animation on toggle. Minimal, modern, icon-focused.

*Animation & Visual Details:*
- *Entrance*: Items fade in with scale 0.95 → 1
- *Hover*: Icon circle scales slightly and background intensifies
- *Gradients*: Plus/minus icon uses gradient fill when active; icon circle has subtle gradient
- *Radial circles*: Icon button background is a radial gradient circle that pulses on toggle
- *Scroll trigger*: IntersectionObserver at 10% threshold
- *JS interaction*: Plus rotates to minus with 0.3s ease, background pulses once on toggle

```html
<section data-amb-section="faq" class="faq-section faq-section--minimal">
  <div class="container">
    <h2 class="faq-title">Frequently asked questions</h2>
    <div class="faq-list faq-list--minimal">
      <details class="faq-item faq-item--minimal">
        <summary class="faq-minimal-row">
          <span class="faq-minimal-question">{Question in customer voice}</span>
          <span class="faq-minimal-icon">
            <span class="faq-minimal-icon-circle">
              <svg class="faq-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                <line x1="12" y1="5" x2="12" y2="19"/>
                <line x1="5" y1="12" x2="19" y2="12"/>
              </svg>
              <svg class="faq-minus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                <line x1="5" y1="12" x2="19" y2="12"/>
              </svg>
            </span>
          </span>
        </summary>
        <div class="faq-answer-wrapper">
          <p class="faq-answer">{Direct answer.}</p>
        </div>
      </details>
      <details class="faq-item faq-item--minimal">
        <summary class="faq-minimal-row">
          <span class="faq-minimal-question">{Question in customer voice}</span>
          <span class="faq-minimal-icon">
            <span class="faq-minimal-icon-circle">
              <svg class="faq-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                <line x1="12" y1="5" x2="12" y2="19"/>
                <line x1="5" y1="12" x2="19" y2="12"/>
              </svg>
              <svg class="faq-minus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                <line x1="5" y1="12" x2="19" y2="12"/>
              </svg>
            </span>
          </span>
        </summary>
        <div class="faq-answer-wrapper">
          <p class="faq-answer">{Direct answer.}</p>
        </div>
      </details>
    </div>
  </div>
</section>
```

```css
.faq-list--minimal {
  max-width: 640px;
  margin: 0 auto;
}

.faq-item--minimal {
  border-bottom: 1px solid #f1f5f9;
  opacity: 0;
  transform: scale(0.96);
  transition: background 0.2s ease;
}

.faq-item--minimal.is-visible {
  animation: faq-minimal-enter 0.4s ease-out forwards;
}

@keyframes faq-minimal-enter {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.faq-item--minimal:nth-child(1).is-visible { animation-delay: 0s; }
.faq-item--minimal:nth-child(2).is-visible { animation-delay: 0.08s; }
.faq-item--minimal:nth-child(3).is-visible { animation-delay: 0.16s; }
.faq-item--minimal:nth-child(4).is-visible { animation-delay: 0.24s; }

.faq-minimal-row {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  cursor: pointer;
}

summary::-webkit-details-marker { display: none; }

.faq-minimal-question {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text, #1e293b);
  flex: 1;
  padding-right: 16px;
  transition: color 0.2s ease;
}

details[open] .faq-minimal-question {
  color: var(--color-accent, #6366f1);
}

.faq-minimal-icon {
  flex-shrink: 0;
}

.faq-minimal-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, rgba(99,102,241,0.04) 100%);
  transition: background 0.2s ease, transform 0.2s ease;
}

.faq-minimal-icon-circle::before {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

details[open] .faq-minimal-icon-circle::before {
  opacity: 1;
  transform: scale(1);
  animation: icon-pulse 0.5s ease-out;
}

@keyframes icon-pulse {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.2); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

.faq-plus, .faq-minus {
  position: absolute;
  width: 16px;
  height: 16px;
  color: var(--color-accent, #6366f1);
  transition: opacity 0.2s ease, transform 0.3s ease;
}

.faq-plus {
  opacity: 1;
}

.faq-minus {
  opacity: 0;
  transform: rotate(-90deg);
}

details[open] .faq-plus {
  opacity: 0;
  transform: rotate(90deg);
}

details[open] .faq-minus {
  opacity: 1;
  transform: rotate(0deg);
}

.faq-item--minimal:hover .faq-minimal-icon-circle {
  transform: scale(1.05);
  background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, rgba(99,102,241,0.06) 100%);
}

.faq-answer-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

details[open] .faq-answer-wrapper {
  grid-template-rows: 1fr;
}

.faq-answer {
  overflow: hidden;
  font-size: 0.95rem;
  color: var(--color-text-muted, #64748b);
  line-height: 1.7;
  padding-bottom: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item--minimal {
    opacity: 1;
    transform: none;
  }
  .faq-answer-wrapper {
    transition: none;
  }
  .faq-minimal-icon-circle::before {
    animation: none;
  }
}
```

*JS behavior:*
```javascript
const minimalItems = document.querySelectorAll('.faq-item--minimal');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.1 });
minimalItems.forEach(item => observer.observe(item));
```

---

Copy rules: questions go in the customer's voice ("Can I cancel anytime?"), not the company's voice ("What is the cancellation policy?"). Lead every answer with the direct answer in the first 8 words — never bury "Yes" or "No" two sentences deep. Avoid marketing fluff in answers; this section is where trust is earned.

Layout rules: accordion items should have a visible affordance (chevron icon, plus/minus) that rotates on open. Open state should be visually distinct. The first question should NEVER be pre-opened by default — visitors expect a fully-collapsed list.

CSS custom property summary:
```css
:root {
  --faq-enter-duration: 0.4s;
  --faq-stagger: 0.05s;
  --color-accent: #6366f1;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
}
```