/* Product overview: preserve the original monochrome surface, mint accents,
   peach and green badges, rounded cards and the fade toward the right edge. */
.site-page .split__media.product-demo {
  --product-ink: #1f1f1f;
  --product-muted: #858585;
  --product-green: #70c8a5;
  --product-green-dark: #19a574;
  --dash-muted: #777;
  --dash-line: #e5e5e5;
  position: relative;
  background: #dadada;
}
.product-demo__scene { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; font-family: 'Inter', sans-serif; }
.product-demo__scene text { letter-spacing: -.035em; }
.product-demo__trend-line { stroke-dasharray: 480; stroke-dashoffset: 0; }
.dashboard-demo--ready .product-demo__trend-line { animation: product-trend 8s cubic-bezier(.4,0,.2,1) infinite; }
.dashboard-demo--ready .product-demo__metric { animation: product-metric 8s ease-in-out infinite; }
.dashboard-demo--ready .product-demo__growth { animation: product-growth 8s ease-in-out infinite; }
.dashboard-demo--ready .product-demo__activity { transform-box: fill-box; transform-origin: left center; animation: product-activity 8s cubic-bezier(.22,1,.36,1) infinite; }
.dashboard-demo--ready :is(.product-demo__trend-line,.product-demo__metric,.product-demo__growth,.product-demo__activity) { animation-play-state: paused; }
.dashboard-demo--running :is(.product-demo__trend-line,.product-demo__metric,.product-demo__growth,.product-demo__activity) { animation-play-state: running; }
.product-demo .dashboard-demo__toggle:hover { color: var(--product-green-dark); border-color: #b9ddce; }
.product-demo .dashboard-demo__toggle:focus-visible { outline-color: var(--product-green-dark); }
@keyframes product-trend {
  0%, 100% { stroke-dashoffset: 480; opacity: 0; }
  6% { opacity: 1; }
  45%, 86% { stroke-dashoffset: 0; opacity: 1; }
  94% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes product-metric {
  0%, 100% { opacity: .45; }
  22%, 90% { opacity: 1; }
}
@keyframes product-growth {
  0%, 100% { opacity: .35; }
  45%, 88% { opacity: 1; }
}
@keyframes product-activity {
  0%, 100% { transform: scaleX(.25); opacity: .25; }
  55%, 90% { transform: scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-demo--ready :is(.product-demo__trend-line,.product-demo__metric,.product-demo__growth,.product-demo__activity) { animation: none; }
}