/* Scroll enhancements only. Existing typography and colors are inherited. */
.scroll-features { padding: 68px 0; }
.features-slides { max-width: 640px; margin: auto; }
.feature-slide + .feature-slide { margin-top: 68px; }
.feature-badge { display: inline-block; margin: 25px 0 0; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--wash); color: var(--accent); }
.features-dots { display: none; }
.scroll-features.is-enhanced { height: 320vh; height: 320svh; padding: 0; }
/* Keep the first slide close to the hero; retain the full-height sticky stage. */
.is-enhanced .features-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) 6px; gap: 18px; align-content: start; align-items: center; padding: 68px 0; }
.is-enhanced .features-slides { display: grid; width: 100%; }
.is-enhanced .feature-slide { grid-area: 1 / 1; align-self: center; margin: 0; opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.is-enhanced .feature-slide[data-state="active"] { opacity: 1; transform: translateY(0); pointer-events: auto; }
.is-enhanced .feature-slide[data-state="before"] { transform: translateY(-24px); }
.is-enhanced .features-dots { display: grid; gap: 12px; }
.features-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .3s ease; }
.features-dots span[data-active] { background: var(--accent); }
/* Individual translate preserves existing card hover transforms. */
.scroll-motion-ready .hero h1, .scroll-motion-ready .hero .lead, .scroll-motion-ready .stores { animation: none; }
.scroll-motion-ready .hero .reveal-running { animation: scroll-reveal .6s ease both; animation-delay: var(--reveal-delay, 0ms); }
.reveal-pending { opacity: 0; translate: 0 24px; }
.reveal-running { animation: scroll-reveal .6s ease both; animation-delay: var(--reveal-delay, 0ms); }
@keyframes scroll-reveal { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 700px) {
  .scroll-features { padding: 45px 0; }
  .feature-slide + .feature-slide { margin-top: 45px; }
  .is-enhanced .features-stage { padding: 45px 0; }
  .is-enhanced .feature-slide { margin: 0; }
}
/* CSS fallback also works if the preference changes after JavaScript stops. */
@media (prefers-reduced-motion: reduce) {
  .scroll-motion-ready .hero .reveal-running, .reveal-pending, .reveal-running { opacity: 1; translate: none; animation: none; }
  .scroll-features.is-enhanced { height: auto; padding: 68px 0; }
  .is-enhanced .features-stage { position: static; height: auto; display: block; padding: 0; }
  .is-enhanced .features-slides { display: block; }
  .is-enhanced .feature-slide { opacity: 1; transform: none; transition: none; pointer-events: auto; }
  .is-enhanced .feature-slide + .feature-slide { margin-top: 68px; }
  .is-enhanced .features-dots { display: none; }
  @media (max-width: 700px) {
    .scroll-features.is-enhanced { padding: 45px 0; }
    .is-enhanced .feature-slide + .feature-slide { margin-top: 45px; }
  }
}