---
id: seed:archetypes/roadmap
title: Product roadmap section archetypes
source_type: seed_archetype
priority: cold
---

A roadmap section shows where the product is heading. It converts on trust and transparency — visitors want to know you're solving their problems, not just maintaining the status quo. Four working archetypes:

---

**Quarter-based roadmap.** Timeline divided by quarters, milestone cards.

*Animation & Visual Details:*
- *Entrance*: Quarter headers slide in first; milestone cards stagger in from below at 0.08s
- *Hover*: Milestone cards lift with shadow; progress indicator pulses
- *Gradients*: Quarter headers use gradient backgrounds; completed items have gradient checkmarks
- *Radial circles*: Radial glow behind completed milestone indicators
- *Scroll trigger*: IntersectionObserver at 15% threshold per quarter section

```html
<section data-amb-section="roadmap" class="roadmap-section">
  <div class="container">
    <div class="roadmap-header">
      <h2 class="roadmap-title">Product roadmap</h2>
      <p class="roadmap-subtitle">Where we're heading</p>
    </div>
    <div class="roadmap-quarters">
      <div class="roadmap-quarter">
        <div class="roadmap-quarter-header">
          <h3 class="roadmap-quarter-label">Q2 2026</h3>
          <span class="roadmap-quarter-status roadmap-quarter-status--current">In progress</span>
        </div>
        <div class="roadmap-items">
          <div class="roadmap-item roadmap-item--completed">
            <div class="roadmap-item-indicator">
              <div class="roadmap-item-dot"></div>
            </div>
            <div class="roadmap-item-content">
              <h4 class="roadmap-item-title">SSO with SAML 2.0</h4>
              <p class="roadmap-item-desc">Enterprise single sign-on support</p>
              <span class="roadmap-item-badge roadmap-item-badge--done">Shipped</span>
            </div>
          </div>
          <div class="roadmap-item roadmap-item--in-progress">
            <div class="roadmap-item-indicator">
              <div class="roadmap-item-dot"></div>
              <div class="roadmap-item-progress-ring"></div>
            </div>
            <div class="roadmap-item-content">
              <h4 class="roadmap-item-title">Advanced analytics</h4>
              <p class="roadmap-item-desc">Real-time metrics dashboard</p>
              <span class="roadmap-item-badge roadmap-item-badge--progress">In development</span>
            </div>
          </div>
          <div class="roadmap-item roadmap-item--planned">
            <div class="roadmap-item-indicator">
              <div class="roadmap-item-dot roadmap-item-dot--hollow"></div>
            </div>
            <div class="roadmap-item-content">
              <h4 class="roadmap-item-title">GitHub Actions integration</h4>
              <p class="roadmap-item-desc">Native CI/CD pipeline support</p>
              <span class="roadmap-item-badge roadmap-item-badge--planned">Planned</span>
            </div>
          </div>
        </div>
      </div>
      <div class="roadmap-quarter">
        <div class="roadmap-quarter-header">
          <h3 class="roadmap-quarter-label">Q3 2026</h3>
          <span class="roadmap-quarter-status">Planned</span>
        </div>
        <div class="roadmap-items">
          <div class="roadmap-item roadmap-item--planned">
            <div class="roadmap-item-indicator">
              <div class="roadmap-item-dot roadmap-item-dot--hollow"></div>
            </div>
            <div class="roadmap-item-content">
              <h4 class="roadmap-item-title">Custom domains with SSL</h4>
              <p class="roadmap-item-desc">BYO domain support for all deployments</p>
              <span class="roadmap-item-badge roadmap-item-badge--planned">Planned</span>
            </div>
          </div>
          <div class="roadmap-item roadmap-item--planned">
            <div class="roadmap-item-indicator">
              <div class="roadmap-item-dot roadmap-item-dot--hollow"></div>
            </div>
            <div class="roadmap-item-content">
              <h4 class="roadmap-item-title">Team roles and permissions</h4>
              <p class="roadmap-item-desc">Granular access control for organizations</p>
              <span class="roadmap-item-badge roadmap-item-badge--planned">Planned</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
```

```css
:root {
  --roadmap-enter-duration: 0.5s;
  --roadmap-stagger: 0.08s;
}

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

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

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

.roadmap-subtitle {
  font-size: 1rem;
  color: var(--color-text-muted, #64748b);
  margin-top: 8px;
}

.roadmap-quarters {
  max-width: 720px;
  margin: 0 auto;
}

.roadmap-quarter {
  margin-bottom: 48px;
  opacity: 0;
  transform: translateY(20px);
}

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

.roadmap-quarter:nth-child(1).is-visible { animation-delay: 0s; }
.roadmap-quarter:nth-child(2).is-visible { animation-delay: 0.2s; }

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

.roadmap-quarter-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.roadmap-quarter-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text, #1e293b);
}

.roadmap-quarter-status {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted, #64748b);
  padding: 4px 10px;
  background: #fff;
  border-radius: 12px;
}

.roadmap-quarter-status--current {
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(124,58,237,0.1));
  color: var(--color-accent, #6366f1);
}

.roadmap-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.roadmap-item {
  display: flex;
  gap: 16px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f1f5f9;
  padding: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.roadmap-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

.roadmap-item-indicator {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.roadmap-item-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent, #6366f1) 0%, rgba(99,102,241,0.5) 100%);
}

.roadmap-item-dot--hollow {
  background: transparent;
  border: 2px solid #cbd5e1;
}

.roadmap-item--completed .roadmap-item-dot {
  background: radial-gradient(circle, #22c55e 0%, rgba(34,197,94,0.5) 100%);
}

.roadmap-item-progress-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(99,102,241,0.3);
  border-top-color: var(--color-accent, #6366f1);
  animation: progress-spin 1.5s linear infinite;
}

@keyframes progress-spin {
  to { transform: rotate(360deg); }
}

.roadmap-item-content {
  flex: 1;
}

.roadmap-item-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
  margin-bottom: 4px;
}

.roadmap-item-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
  margin-bottom: 10px;
}

.roadmap-item-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
}

.roadmap-item-badge--done {
  background: rgba(34,197,94,0.1);
  color: #16a34a;
}

.roadmap-item-badge--progress {
  background: rgba(99,102,241,0.1);
  color: var(--color-accent, #6366f1);
}

.roadmap-item-badge--planned {
  background: #f1f5f9;
  color: var(--color-text-muted, #64748b);
}

@media (prefers-reduced-motion: reduce) {
  .roadmap-quarter {
    opacity: 1;
    transform: none;
  }
  .roadmap-item-progress-ring {
    animation: none;
  }
}
```

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

---

**Interactive progress roadmap.** Completed items have radial checkmark, in-progress has pulse animation.

*Animation & Visual Details:*
- *Entrance*: Items fade in with stagger; completed items get a radial checkmark burst animation
- *Hover*: In-progress items show enhanced glow; completed items have a subtle ring scale
- *Gradients*: Checkmarks use gradient fill; in-progress items have gradient ring
- *Radial circles*: Completed items have radial circle with checkmark icon; in-progress has pulsing ring
- *Scroll trigger*: IntersectionObserver at 20% threshold

```html
<section data-amb-section="roadmap" class="roadmap-section roadmap-section--interactive">
  <div class="container">
    <div class="roadmap-progress-list">
      <div class="roadmap-progress-item roadmap-progress-item--done">
        <div class="roadmap-progress-icon">
          <div class="roadmap-progress-ring roadmap-progress-ring--done"></div>
          <svg class="roadmap-progress-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <div class="roadmap-progress-content">
          <h4>SSO with SAML 2.0</h4>
          <p>Enterprise single sign-on for all plans</p>
          <span class="roadmap-progress-date">Shipped May 2026</span>
        </div>
      </div>
      <div class="roadmap-progress-item roadmap-progress-item--active">
        <div class="roadmap-progress-icon">
          <div class="roadmap-progress-ring roadmap-progress-ring--active"></div>
          <div class="roadmap-progress-pulse"></div>
        </div>
        <div class="roadmap-progress-content">
          <h4>Advanced analytics</h4>
          <p>Real-time metrics with customizable widgets</p>
          <span class="roadmap-progress-date">Target: June 2026</span>
        </div>
      </div>
      <div class="roadmap-progress-item roadmap-progress-item--upcoming">
        <div class="roadmap-progress-icon">
          <div class="roadmap-progress-ring roadmap-progress-ring--upcoming"></div>
        </div>
        <div class="roadmap-progress-content">
          <h4>GitHub Actions integration</h4>
          <p>Native CI/CD pipeline support</p>
          <span class="roadmap-progress-date">Planned Q3 2026</span>
        </div>
      </div>
    </div>
  </div>
</section>
```

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

.roadmap-progress-item {
  display: flex;
  gap: 20px;
  padding: 24px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f1f5f9;
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(16px);
}

.roadmap-progress-item.is-visible {
  animation: progress-item-enter 0.5s ease-out forwards;
}

.roadmap-progress-item:nth-child(1).is-visible { animation-delay: 0s; }
.roadmap-progress-item:nth-child(2).is-visible { animation-delay: 0.12s; }
.roadmap-progress-item:nth-child(3).is-visible { animation-delay: 0.24s; }

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

.roadmap-progress-icon {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.roadmap-progress-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid;
}

.roadmap-progress-ring--done {
  border-color: #22c55e;
  background: rgba(34,197,94,0.08);
}

.roadmap-progress-ring--active {
  border-color: var(--color-accent, #6366f1);
  background: rgba(99,102,241,0.08);
}

.roadmap-progress-ring--upcoming {
  border-color: #e2e8f0;
}

.roadmap-progress-check {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  color: #22c55e;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}

.roadmap-progress-item--done.is-visible .roadmap-progress-check {
  animation: check-draw 0.4s ease-out 0.3s forwards;
}

@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}

.roadmap-progress-pulse {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, transparent 70%);
  animation: progress-pulse 1.5s ease-in-out infinite;
}

@keyframes progress-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
}

.roadmap-progress-content h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
  margin-bottom: 4px;
}

.roadmap-progress-content p {
  font-size: 0.875rem;
  color: var(--color-text-muted, #64748b);
  margin-bottom: 8px;
}

.roadmap-progress-date {
  font-size: 0.8rem;
  color: var(--color-text-muted, #64748b);
}

@media (prefers-reduced-motion: reduce) {
  .roadmap-progress-item {
    opacity: 1;
    transform: none;
  }
  .roadmap-progress-check {
    animation: none;
    stroke-dashoffset: 0;
  }
  .roadmap-progress-pulse {
    animation: none;
  }
}
```

---

**Category-filtered roadmap.** Filter by product area, smooth layout transition.

*Animation & Visual Details:*
- *Entrance*: Filter tabs fade in; items stagger in at 0.06s
- *Hover*: Active filter has gradient underline; items lift on hover
- *Gradients*: Active filter tab has gradient underline; category badges use gradient
- *Radial circles*: Small radial dot beside active filter
- *Scroll trigger*: Not applicable (filter interaction)
- *JS interaction*: Filter smooth show/hide with opacity/transform animation

```html
<section data-amb-section="roadmap" class="roadmap-section roadmap-section--category">
  <div class="container">
    <h2 class="roadmap-title">Roadmap</h2>
    <div class="roadmap-category-tabs" role="tablist">
      <button class="roadmap-category-tab roadmap-category-tab--active" role="tab" data-category="all">All</button>
      <button class="roadmap-category-tab" role="tab" data-category="platform">Platform</button>
      <button class="roadmap-category-tab" role="tab" data-category="dx">Developer experience</button>
      <button class="roadmap-category-tab" role="tab" data-category="enterprise">Enterprise</button>
    </div>
    <div class="roadmap-category-grid">
      <div class="roadmap-card" data-categories="platform">
        <span class="roadmap-card-category">Platform</span>
        <h3>Multi-region deployment</h3>
        <p>Deploy to multiple regions with a single configuration</p>
      </div>
      <div class="roadmap-card" data-categories="dx">
        <span class="roadmap-card-category">DX</span>
        <h3>Local development server</h3>
        <p>Test deployments locally with hot reload</p>
      </div>
      <div class="roadmap-card" data-categories="enterprise">
        <span class="roadmap-card-category">Enterprise</span>
        <h3>Audit logs with SIEM export</h3>
        <p>Export audit logs to your SIEM of choice</p>
      </div>
      <div class="roadmap-card" data-categories="platform">
        <span class="roadmap-card-category">Platform</span>
        <h3>Edge functions runtime</h3>
        <p>Run serverless functions at the edge</p>
      </div>
    </div>
  </div>
</section>
```

```css
.roadmap-category-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  justify-content: center;
}

.roadmap-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;
}

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

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

.roadmap-category-tab--active::after {
  content: '';
  display: block;
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent, #6366f1), #7c3aed);
  margin: 8px auto 0;
  border-radius: 1px;
}

.roadmap-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.roadmap-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f1f5f9;
  padding: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
}

.roadmap-card[data-hidden="true"] {
  display: none;
}

.roadmap-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}

.roadmap-card-category {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(124,58,237,0.08));
  color: var(--color-accent, #6366f1);
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 6px;
  margin-bottom: 12px;
}

.roadmap-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
  margin-bottom: 8px;
}

.roadmap-card p {
  font-size: 0.875rem;
  color: var(--color-text-muted, #64748b);
  line-height: 1.5;
  margin: 0;
}
```

*JS behavior:*
```javascript
const categoryTabs = document.querySelectorAll('.roadmap-category-tab');
const roadmapCards = document.querySelectorAll('.roadmap-card');

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

    categoryTabs.forEach(t => t.classList.remove('roadmap-category-tab--active'));
    tab.classList.add('roadmap-category-tab--active');

    roadmapCards.forEach(card => {
      const categories = card.dataset.categories;
      const visible = category === 'all' || categories.includes(category);
      card.dataset.hidden = visible ? 'false' : 'true';
      if (visible) {
        card.style.animation = 'roadmap-card-in 0.3s ease-out forwards';
      }
    });
  });
});
```

```css
@keyframes roadmap-card-in {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
```

---

**Hover detail roadmap.** Card expands on hover to show full description with gradient overlay.

*Animation & Visual Details:*
- *Entrance*: Cards fade in with scale 0.96 → 1, staggered at 0.08s
- *Hover*: Card expands to reveal full description; gradient overlay fades in from bottom
- *Gradients*: Expanded description has gradient overlay from transparent to card background
- *Radial circles*: Radial glow behind the status indicator
- *Scroll trigger*: IntersectionObserver at 15% threshold
- *JS interaction*: CSS-only hover expand (no JS required)

```html
<section data-amb-section="roadmap" class="roadmap-section roadmap-section--hover">
  <div class="container">
    <div class="roadmap-hover-grid">
      <article class="roadmap-hover-card">
        <div class="roadmap-hover-status">
          <div class="roadmap-hover-status-glow"></div>
          <div class="roadmap-hover-status-dot roadmap-hover-status-dot--progress"></div>
        </div>
        <h3>Advanced analytics</h3>
        <p class="roadmap-hover-summary">Real-time metrics dashboard with customizable widgets</p>
        <div class="roadmap-hover-detail">
          <p>Full-featured analytics dashboard with deployment metrics, team performance baselines, and exportable reports for stakeholders.</p>
          <ul>
            <li>30-second real-time refresh</li>
            <li>Drag-and-drop widget layout</li>
            <li>PDF and CSV export</li>
          </ul>
        </div>
        <span class="roadmap-hover-timeline">Q2 2026</span>
      </article>
      <article class="roadmap-hover-card">
        <div class="roadmap-hover-status">
          <div class="roadmap-hover-status-glow"></div>
          <div class="roadmap-hover-status-dot roadmap-hover-status-dot--planned"></div>
        </div>
        <h3>GitHub Actions integration</h3>
        <p class="roadmap-hover-summary">Native CI/CD pipeline support</p>
        <div class="roadmap-hover-detail">
          <p>First-class GitHub Actions integration. Run deployments as part of your existing CI/CD workflow with zero configuration.</p>
          <ul>
            <li>Automatic deployment triggers</li>
            <li>Status checks in PR comments</li>
            <li>Artifact caching</li>
          </ul>
        </div>
        <span class="roadmap-hover-timeline">Q3 2026</span>
      </article>
    </div>
  </div>
</section>
```

```css
.roadmap-hover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.roadmap-hover-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #f1f5f9;
  padding: 28px;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.96);
}

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

@keyframes roadmap-hover-enter {
  to { opacity: 1; transform: scale(1); }
}

.roadmap-hover-status {
  position: relative;
  width: 16px;
  height: 16px;
  margin-bottom: 16px;
}

.roadmap-hover-status-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.roadmap-hover-card:hover .roadmap-hover-status-glow {
  opacity: 1;
}

.roadmap-hover-status-dot {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.roadmap-hover-status-dot--progress {
  background: radial-gradient(circle, var(--color-accent, #6366f1) 0%, rgba(99,102,241,0.5) 100%);
  animation: status-pulse 2s ease-in-out infinite;
}

.roadmap-hover-status-dot--planned {
  background: #e2e8f0;
}

@keyframes status-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.roadmap-hover-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
  margin-bottom: 8px;
}

.roadmap-hover-summary {
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
  margin-bottom: 0;
  transition: margin 0.3s ease;
}

.roadmap-hover-detail {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, #fff 60%, transparent);
  padding: 28px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.roadmap-hover-card:hover .roadmap-hover-detail {
  max-height: 200px;
}

.roadmap-hover-card:hover .roadmap-hover-summary {
  margin-bottom: 80px;
}

.roadmap-hover-detail p {
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
  line-height: 1.6;
  margin: 0 0 12px;
}

.roadmap-hover-detail ul {
  padding-left: 16px;
  margin: 0;
}

.roadmap-hover-detail li {
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
  margin-bottom: 4px;
}

.roadmap-hover-timeline {
  display: block;
  margin-top: 16px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-accent, #6366f1);
}

@media (prefers-reduced-motion: reduce) {
  .roadmap-hover-card {
    opacity: 1;
    transform: none;
  }
  .roadmap-hover-detail {
    max-height: none;
    transition: none;
  }
  .roadmap-hover-status-dot {
    animation: none;
  }
}
```

*JS behavior:*
```javascript
const hoverCards = document.querySelectorAll('.roadmap-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 });
hoverCards.forEach(card => observer.observe(card));
```

---

Copy rules: show both what's done AND what's coming — hiding the done items loses credibility. Include target timeframes (quarter or month) even if approximate. Never promise a feature without a rough timeline.

Layout rules: group by quarter, not by category, unless your roadmap is longer than 12 items. Show status visually (done/in progress/planned) — visitors shouldn't have to read to understand the state.

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