---
id: seed:patterns/progressive-disclosure
title: Progressive disclosure patterns
source_type: seed_pattern
priority: warm
---

Progressive disclosure hides complexity until the visitor signals they want it. It's the difference between a page that respects the reader's time and one that dumps every detail. Four working variations:

---

**Accordion FAQ.** Expandable questions with smooth height animation using grid-template-rows.

*Animation & Visual Details:*
- *Entrance*: Questions stagger in from translateY(15px), 0.06s between each
- *Hover*: Question has gradient left border on hover
- *Gradients*: Active question has gradient background (accent at 5%)
- *Radial circles*: Chevron has radial ring on hover
- *Scroll trigger*: IntersectionObserver at 10% threshold
- *JS interaction*: CSS grid-template-rows 0fr → 1fr for smooth height animation

```html
<section data-amb-section="faq" class="faq-section">
  <div class="container">
    <h2 class="faq-title">Frequently asked questions</h2>
    <div class="faq-list">
      <details class="faq-item">
        <summary class="faq-question">
          <span class="faq-question-text">How long does it take to get started?</span>
          <span class="faq-icon">
            <svg 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">
          <div class="faq-answer">
            <p>Most teams are up and running within 15 minutes. Our onboarding wizard walks you through connecting your first project, inviting team members, and creating your first workflow. No credit card required to start.</p>
          </div>
        </div>
      </details>
      <details class="faq-item">
        <summary class="faq-question">
          <span class="faq-question-text">Can I import data from my existing tools?</span>
          <span class="faq-icon">
            <svg 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">
          <div class="faq-answer">
            <p>Yes. We support one-click imports from Jira, Asana, Linear, Trello, and GitHub Projects. Your history, attachments, and comments all transfer over. Custom imports are available on Enterprise plans.</p>
          </div>
        </div>
      </details>
      <details class="faq-item">
        <summary class="faq-question">
          <span class="faq-question-text">What happens when my trial ends?</span>
          <span class="faq-icon">
            <svg 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">
          <div class="faq-answer">
            <p>Your data is preserved for 30 days after your trial ends. You can export everything at any time. When you're ready to upgrade, your settings and history are exactly as you left them.</p>
          </div>
        </div>
      </details>
      <details class="faq-item">
        <summary class="faq-question">
          <span class="faq-question-text">Is there a discount for annual billing?</span>
          <span class="faq-icon">
            <svg 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">
          <div class="faq-answer">
            <p>Yes — annual plans save you 20% compared to monthly. You can switch from monthly to annual at any time and we'll prorate the remaining months.</p>
          </div>
        </div>
      </details>
    </div>
  </div>
</section>
```

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

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

.faq-title {
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-text, #1e293b);
  margin-bottom: 40px;
}

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

.faq-item {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid #f1f5f9;
  overflow: hidden;
  opacity: 0;
  transform: translateY(15px);
  transition: border-color 0.2s ease, box-shadow 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); }

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

.faq-item:hover {
  border-color: rgba(99,102,241,0.3);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  transition: background 0.2s ease;
}

.faq-question::-webkit-details-marker {
  display: none;
}

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

.faq-question::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(to right, var(--color-accent, #6366f1), transparent);
  transition: width 0.2s ease;
}

.faq-item[open] .faq-question::before {
  width: 4px;
}

.faq-item[open] .faq-question {
  background: linear-gradient(135deg, rgba(99,102,241,0.03), transparent);
}

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

.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
}

.faq-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.faq-question:hover .faq-icon::before {
  opacity: 1;
}

.faq-icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-muted, #64748b);
  transition: transform 0.3s ease;
}

.faq-item[open] .faq-icon svg {
  transform: rotate(180deg);
}

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

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

.faq-answer {
  overflow: hidden;
}

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

@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));
```

---

**Hover-to-reveal cards.** Feature cards that reveal additional detail on hover with smooth animation.

*Animation & Visual Details:*
- *Entrance*: Cards stagger in from translateY(30px), 0.1s between each
- *Hover*: Card lifts, back face slides up, gradient border appears
- *Gradients*: Revealed content has gradient background (accent at 5%)
- *Radial circles*: Radial glow behind icon on hover
- *Scroll trigger*: IntersectionObserver at 15% threshold
- *JS interaction*: CSS :hover for reveal (no JS needed)

```html
<section data-amb-section="features" class="features-hover-section">
  <div class="container">
    <h2 class="features-hover-title">What you get</h2>
    <div class="features-hover-grid">
      <article class="features-hover-card">
        <div class="features-hover-card-front">
          <div class="features-hover-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
          </div>
          <h3 class="features-hover-name">Lightning fast</h3>
          <p class="features-hover-desc">Sub-100ms response times globally</p>
        </div>
        <div class="features-hover-card-back">
          <p class="features-hover-detail">Our edge network spans 200+ locations. Your users get served from the closest node, wherever they are. P99 latency under 100ms anywhere in the world.</p>
          <a href="#" class="features-hover-link">Learn more →</a>
        </div>
      </article>
      <article class="features-hover-card">
        <div class="features-hover-card-front">
          <div class="features-hover-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
          </div>
          <h3 class="features-hover-name">Enterprise security</h3>
          <p class="features-hover-desc">SOC 2 Type II certified</p>
        </div>
        <div class="features-hover-card-back">
          <p class="features-hover-detail">End-to-end encryption, SSO integration, audit logs, and custom data retention policies. Compliance-ready for regulated industries.</p>
          <a href="#" class="features-hover-link">View compliance docs →</a>
        </div>
      </article>
      <article class="features-hover-card">
        <div class="features-hover-card-front">
          <div class="features-hover-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
          </div>
          <h3 class="features-hover-name">Global scale</h3>
          <p class="features-hover-desc">From 100 to 100M requests</p>
        </div>
        <div class="features-hover-card-back">
          <p class="features-hover-detail">Auto-scaling infrastructure handles traffic spikes automatically. No capacity planning, no engineering oversight needed. Scale from zero to millions seamlessly.</p>
          <a href="#" class="features-hover-link">See case studies →</a>
        </div>
      </article>
    </div>
  </div>
</section>
```

```css
.features-hover-section {
  padding: clamp(64px, 8vw, 100px) 0;
  background: #fff;
}

.features-hover-title {
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-text, #1e293b);
  margin-bottom: 48px;
}

.features-hover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.features-hover-card {
  position: relative;
  height: 280px;
  border-radius: 20px;
  perspective: 1000px;
  opacity: 0;
  transform: translateY(30px);
}

.features-hover-card.is-visible {
  animation: features-card-enter 0.5s ease-out forwards;
}

.features-hover-card:nth-child(1).is-visible { animation-delay: 0s; }
.features-hover-card:nth-child(2).is-visible { animation-delay: 0.1s; }
.features-hover-card:nth-child(3).is-visible { animation-delay: 0.2s; }

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

.features-hover-card-front,
.features-hover-card-back {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 28px;
  backface-visibility: hidden;
  transition: transform 0.4s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.features-hover-card-front {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.features-hover-card:hover .features-hover-card-front {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.1);
}

.features-hover-card-front::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, transparent, rgba(99,102,241,0.3), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.features-hover-card:hover .features-hover-card-front::before {
  opacity: 1;
}

.features-hover-card-back {
  background: linear-gradient(135deg, rgba(99,102,241,0.05), rgba(124,58,237,0.02));
  border: 1px solid rgba(99,102,241,0.2);
  transform: translateY(100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.features-hover-card:hover .features-hover-card-back {
  transform: translateY(0);
}

.features-hover-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(124,58,237,0.05));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
}

.features-hover-icon::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.features-hover-card:hover .features-hover-icon::before {
  opacity: 1;
}

.features-hover-icon svg {
  width: 28px;
  height: 28px;
  color: var(--color-accent, #6366f1);
}

.features-hover-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text, #1e293b);
  margin-bottom: 8px;
}

.features-hover-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted, #64748b);
  margin: 0;
}

.features-hover-detail {
  font-size: 0.95rem;
  color: var(--color-text, #1e293b);
  line-height: 1.7;
  margin: 0 0 20px;
}

.features-hover-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-accent, #6366f1);
  text-decoration: none;
}

.features-hover-link:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .features-hover-card {
    opacity: 1;
    transform: none;
  }
  .features-hover-card-front,
  .features-hover-card-back {
    transition: none;
  }
  .features-hover-card-back {
    transform: translateY(0);
    opacity: 1;
  }
}
```

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

---

**Tabbed interface.** Multi-step workflow shown as tabs with content panels.

*Animation & Visual Details:*
- *Entrance*: Tabs fade in with stagger; active panel slides in from right
- *Hover*: Tab has gradient underline on hover
- *Gradients*: Active tab has gradient background (accent at 10%)
- *Radial circles*: Active tab indicator has radial dot
- *Scroll trigger*: Not applicable (tab interaction)
- *JS interaction*: Tab click switches content panel with slide animation

```html
<section data-amb-section="onboarding" class="onboarding-section">
  <div class="container">
    <h2 class="onboarding-title">Get started in three steps</h2>
    <div class="onboarding-tabs" role="tablist">
      <button class="onboarding-tab onboarding-tab--active" role="tab" data-tab="connect" aria-selected="true">
        <span class="onboarding-tab-number">1</span>
        <span class="onboarding-tab-label">Connect</span>
      </button>
      <button class="onboarding-tab" role="tab" data-tab="configure" aria-selected="false">
        <span class="onboarding-tab-number">2</span>
        <span class="onboarding-tab-label">Configure</span>
      </button>
      <button class="onboarding-tab" role="tab" data-tab="launch" aria-selected="false">
        <span class="onboarding-tab-number">3</span>
        <span class="onboarding-tab-label">Launch</span>
      </button>
    </div>
    <div class="onboarding-panels">
      <div class="onboarding-panel onboarding-panel--active" id="panel-connect" role="tabpanel">
        <div class="onboarding-panel-content">
          <h3 class="onboarding-panel-title">Connect your tools</h3>
          <p class="onboarding-panel-desc">Link your existing workflow in minutes. We support 50+ integrations including GitHub, Slack, Jira, and more.</p>
          <ul class="onboarding-panel-list">
            <li>One-click OAuth connections</li>
            <li>Real-time data sync</li>
            <li>No coding required</li>
          </ul>
        </div>
        <div class="onboarding-panel-visual">
          <img src="https://placehold.co/400x300/1e293b/6366f1?text=Connect" alt="Connect your tools" />
        </div>
      </div>
      <div class="onboarding-panel" id="panel-configure" role="tabpanel">
        <div class="onboarding-panel-content">
          <h3 class="onboarding-panel-title">Configure your workflow</h3>
          <p class="onboarding-panel-desc">Set up automations and approvals exactly how your team works. Visual builder, no code needed.</p>
          <ul class="onboarding-panel-list">
            <li>Drag-and-drop automation builder</li>
            <li>Pre-built workflow templates</li>
            <li>Conditional logic and branching</li>
          </ul>
        </div>
        <div class="onboarding-panel-visual">
          <img src="https://placehold.co/400x300/1e293b/6366f1?text=Configure" alt="Configure your workflow" />
        </div>
      </div>
      <div class="onboarding-panel" id="panel-launch" role="tabpanel">
        <div class="onboarding-panel-content">
          <h3 class="onboarding-panel-title">Launch and iterate</h3>
          <p class="onboarding-panel-desc">Go live in one click. Monitor performance and improve over time with built-in analytics.</p>
          <ul class="onboarding-panel-list">
            <li>One-click deployment</li>
            <li>Real-time analytics dashboard</li>
            <li>Continuous improvement suggestions</li>
          </ul>
        </div>
        <div class="onboarding-panel-visual">
          <img src="https://placehold.co/400x300/1e293b/6366f1?text=Launch" alt="Launch and iterate" />
        </div>
      </div>
    </div>
  </div>
</section>
```

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

.onboarding-title {
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-text, #1e293b);
  margin-bottom: 40px;
}

.onboarding-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  max-width: 500px;
  margin: 0 auto 40px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 0;
}

.onboarding-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border: none;
  background: none;
  cursor: pointer;
  transition: color 0.2s ease;
  color: var(--color-text-muted, #64748b);
}

.onboarding-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent, #6366f1), #7c3aed);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.onboarding-tab:hover::after {
  transform: scaleX(0.5);
}

.onboarding-tab--active {
  color: var(--color-text, #1e293b);
}

.onboarding-tab--active::after {
  transform: scaleX(1);
}

.onboarding-tab-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e2e8f0;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.onboarding-tab--active .onboarding-tab-number {
  background: linear-gradient(135deg, var(--color-accent, #6366f1), #7c3aed);
  color: #fff;
}

.onboarding-tab--active .onboarding-tab-number::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  border-radius: 50%;
}

.onboarding-tab-label {
  font-size: 0.95rem;
  font-weight: 500;
}

.onboarding-panels {
  max-width: 800px;
  margin: 0 auto;
}

.onboarding-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.onboarding-panel--active {
  display: grid;
  animation: panel-enter 0.5s ease-out forwards;
}

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

.onboarding-panel-content {
  padding: 32px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}

.onboarding-panel-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text, #1e293b);
  margin-bottom: 12px;
}

.onboarding-panel-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted, #64748b);
  line-height: 1.7;
  margin-bottom: 20px;
}

.onboarding-panel-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.onboarding-panel-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: var(--color-text, #1e293b);
}

.onboarding-panel-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, var(--color-accent, #6366f1) 0%, rgba(99,102,241,0.4) 100%);
  border-radius: 50%;
}

.onboarding-panel-visual {
  border-radius: 20px;
  overflow: hidden;
}

.onboarding-panel-visual img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 700px) {
  .onboarding-panel {
    grid-template-columns: 1fr;
  }
  .onboarding-tabs {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-panel {
    opacity: 1;
    transform: none;
  }
  .onboarding-tab::after {
    transition: none;
  }
}
```

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

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

    tabs.forEach(t => {
      t.classList.remove('onboarding-tab--active');
      t.setAttribute('aria-selected', 'false');
    });
    tab.classList.add('onboarding-tab--active');
    tab.setAttribute('aria-selected', 'true');

    panels.forEach(panel => {
      panel.classList.remove('onboarding-panel--active');
      panel.style.display = 'none';
    });

    const targetPanel = document.getElementById(`panel-${targetId}`);
    targetPanel.style.display = 'grid';
    void targetPanel.offsetWidth;
    targetPanel.classList.add('onboarding-panel--active');
  });
});
```

---

**Expandable long-form content.** "Read more" sections that expand to reveal full content.

*Animation & Visual Details:*
- *Entrance*: Teaser content fades in; "Read more" button slides up
- *Hover*: Button has gradient border and slight lift
- *Gradients*: Expanded content has gradient top border
- *Radial circles*: Button has radial glow on hover
- *Scroll trigger*: Not applicable (expand interaction)
- *JS interaction*: Click toggles expand with CSS grid-template-rows animation

```html
<section data-amb-section="features" class="features-expand-section">
  <div class="container">
    <div class="features-expand">
      <article class="features-expand-item">
        <div class="features-expand-header">
          <h3 class="features-expand-title">Advanced analytics built in</h3>
          <p class="features-expand-teaser">See exactly what's happening across your entire workflow. Custom dashboards, real-time metrics, and automated reports.</p>
          <button class="features-expand-btn" aria-expanded="false">
            <span class="features-expand-btn-text">Read more</span>
            <svg class="features-expand-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="6 9 12 15 18 9"/>
            </svg>
          </button>
        </div>
        <div class="features-expand-content-wrapper">
          <div class="features-expand-content">
            <p>Our analytics engine processes events in real-time, giving you instant visibility into team performance, bottlenecks, and opportunities for improvement.</p>
            <h4>Key capabilities:</h4>
            <ul>
              <li>Custom dashboard builder with 50+ chart types</li>
              <li>Automated weekly reports delivered to Slack or email</li>
              <li>Goal tracking with progress notifications</li>
              <li>Export to CSV, PDF, or connect via our Analytics API</li>
            </ul>
            <p>Every metric is drill-down capable. Start at the team level, zoom to individual contributor, all the way to individual task history.</p>
          </div>
        </div>
      </article>
      <article class="features-expand-item">
        <div class="features-expand-header">
          <h3 class="features-expand-title">Security that enterprises trust</h3>
          <p class="features-expand-teaser">SOC 2 Type II certified. End-to-end encryption. SSO and audit logs included on all plans.</p>
          <button class="features-expand-btn" aria-expanded="false">
            <span class="features-expand-btn-text">Read more</span>
            <svg class="features-expand-btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="6 9 12 15 18 9"/>
            </svg>
          </button>
        </div>
        <div class="features-expand-content-wrapper">
          <div class="features-expand-content">
            <p>Security isn't an add-on — it's baked into every layer of our infrastructure. From encrypting data at rest and in transit to fine-grained access controls, we've got you covered.</p>
            <h4>Compliance and certifications:</h4>
            <ul>
              <li>SOC 2 Type II — annual audit</li>
              <li>GDPR and CCPA compliant</li>
              <li>HIPAA available on Enterprise</li>
              <li>ISO 27001 certified</li>
            </ul>
            <p>Our security team runs penetration tests quarterly. Results available to Enterprise customers under NDA.</p>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>
```

```css
.features-expand-section {
  padding: clamp(64px, 8vw, 100px) 0;
  background: #fff;
}

.features-expand {
  max-width: 700px;
  margin: 0 auto;
}

.features-expand-item {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 16px;
}

.features-expand-header {
  position: relative;
}

.features-expand-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text, #1e293b);
  margin-bottom: 12px;
}

.features-expand-teaser {
  font-size: 0.95rem;
  color: var(--color-text-muted, #64748b);
  line-height: 1.7;
  margin-bottom: 20px;
}

.features-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 24px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text, #1e293b);
  cursor: pointer;
  transition: all 0.2s ease;
}

.features-expand-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--color-accent, #6366f1), #7c3aed);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.features-expand-btn:hover {
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
}

.features-expand-btn:hover::before {
  opacity: 1;
}

.features-expand-btn:hover .features-expand-btn-icon {
  color: #fff;
}

.features-expand-btn-icon {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted, #64748b);
  transition: transform 0.3s ease, color 0.2s ease;
}

.features-expand-item[open] .features-expand-btn {
  background: linear-gradient(135deg, var(--color-accent, #6366f1), #7c3aed);
  border-color: transparent;
  color: #fff;
}

.features-expand-item[open] .features-expand-btn .features-expand-btn-icon {
  color: #fff;
  transform: rotate(180deg);
}

.features-expand-content-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.features-expand-item[open] .features-expand-content-wrapper {
  grid-template-rows: 1fr;
}

.features-expand-content {
  overflow: hidden;
}

.features-expand-content::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent, #6366f1), transparent);
  margin: 24px 0;
}

.features-expand-content p {
  font-size: 0.95rem;
  color: var(--color-text-muted, #64748b);
  line-height: 1.7;
  margin: 0 0 16px;
}

.features-expand-content h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
  margin: 0 0 12px;
}

.features-expand-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.features-expand-content li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
}

.features-expand-content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, var(--color-accent, #6366f1) 0%, rgba(99,102,241,0.4) 100%);
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .features-expand-content-wrapper {
    transition: none;
  }
}
```

*JS behavior:*
```javascript
const expandBtns = document.querySelectorAll('.features-expand-btn');

expandBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const item = btn.closest('.features-expand-item');
    const isOpen = item.hasAttribute('open');

    if (isOpen) {
      item.removeAttribute('open');
      btn.setAttribute('aria-expanded', 'false');
    } else {
      item.setAttribute('open', '');
      btn.setAttribute('aria-expanded', 'true');
    }
  });
});
```

---

Copy rules: progressive disclosure trades discoverability for cleanliness. If a piece of information CHANGES the buying decision, it should not be collapsed. Always provide visible affordance (chevron, plus, "Read more"). Don't nest disclosures more than one level.

Layout rules: never use progressive disclosure in the hero, pricing section, or CTA. These need to be fully visible. Accordions belong in FAQs. Hover-reveals work for feature highlights. Tabbed interfaces work for step-by-step processes.

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