promenade: Describe how you would build a Horizontal Scrolling Feature Showcase using CSS and JavaScript, where visitors smoothly scroll through a series of full-width feature panels arranged horizontally with scroll snapping, navigation arrows on each si

Build a "Horizontal Scrolling Feature Showcase" — a CSS + JavaScript component that lets visitors promenade through a product's key features by scrolling horizontally through a series of full-width feature panels. Like a promenade along a seafront, users glide smoothly from panel to panel, each revealing a new capability with rich visuals and text.

Requirements:
1. Scrolling container: a `.promenade-track` — a horizontal scroll container (`overflow-x:scroll; display:flex`) with `scroll-behavior:smooth` and `scroll-snap-type:x mandatory`. Each child panel is `min-width:100vw; scroll-snap-align:start`. Users promenade through the panels as they scroll.
2. Navigation arrows: left (‹) and right (›) arrow buttons fixed at the sides of the promenade. Clicking navigates to the previous/next panel using `scrollBy`. The left arrow is hidden on the first panel; the right arrow on the last panel.
3. Panel design: each panel is a two-column layout (text left, illustration/screenshot right on desktop; stacked on mobile). Text: feature name in large heading, description paragraph (max 60 words), secondary stat ("Used by 4,200 teams"), and a CTA button. Illustration: a colorful gradient placeholder or SVG icon.
4. Dot indicators: a row of dots at the bottom of the promenade — one per panel. Active panel dot is wider and filled. Clicking a dot jumps to that panel. An `IntersectionObserver` watches which panel is in view to sync the dots.
5. Autoplay: optional autoplay — advance to the next panel every 6 seconds if the user hasn't manually interacted. Pause on hover/focus. Resume 3 seconds after the last interaction.
6. Counter: "Feature 2 of 5" text between the arrows. Updates as the user promenades through panels.

Starter CSS:
```css
.promenade-wrapper { position:relative; overflow:hidden; }
.promenade-track { display:flex; overflow-x:scroll; scroll-snap-type:x mandatory; scroll-behavior:smooth; -ms-overflow-style:none; scrollbar-width:none; }
.promenade-track::-webkit-scrollbar { display:none; }
.promenade-panel { min-width:100%; flex-shrink:0; scroll-snap-align:start; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px; padding:80px 80px; min-height:70vh; }
@media(max-width:768px) { .promenade-panel { grid-template-columns:1fr; padding:40px 24px; min-height:auto; } }
.promenade-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.9); border:none; border-radius:50%; width:48px; height:48px; font-size:1.4rem; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.1); }
.promenade-nav.prev { left:16px; } .promenade-nav.next { right:16px; }
.promenade-dots { display:flex; gap:6px; justify-content:center; padding:16px; }
.promenade-dot { width:8px; height:8px; border-radius:4px; background:#d1d5db; transition:width .3s,background .3s; cursor:pointer; }
.promenade-dot.active { width:24px; background:#6366f1; }