/* Local-only trial: the archival wave belongs to the course wordmark alone. */
.hero-m2 .hero-product-identity { position: relative; isolation: isolate; }
.hero-m2 .hero-product-identity .hero-course-name { position: relative; z-index: 1; }
.hero-wave-background {
  position: absolute; inset: -10px 0 -4px; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.hero-background-visual {
  position: absolute; inset: 0; opacity: .18; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 38%, transparent 77%);
  mask-image: radial-gradient(ellipse at center, #000 38%, transparent 77%);
}
.hero-background-visual img, .hero-background-visual canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: contain; object-position: center;
}
.hero-background-visual canvas { opacity: 0; }
.hero-wave-background[data-state="playing"] canvas,
.hero-wave-background[data-state="paused"] canvas { opacity: 1; }
.hero-product-identity > .hero-background-toggle {
  position: absolute; right: 0; bottom: -10px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #b99572; cursor: pointer;
}
.hero-product-identity > .hero-background-toggle[hidden] { display: none; }
.hero-background-toggle:hover { color: #f2ebdb; }
.hero-background-toggle:focus-visible { outline: 2px solid #f2ebdb; outline-offset: 2px; }
.hero-background-toggle .wave-play-icon { display: none; }
.hero-wave-background[data-user-paused="true"] + .hero-background-toggle .wave-pause-icon { display: none; }
.hero-wave-background[data-user-paused="true"] + .hero-background-toggle .wave-play-icon { display: block; }
@media (prefers-reduced-motion: reduce) {
  .hero-background-visual canvas, .hero-product-identity > .hero-background-toggle { display: none; }
}