/* ==========================================================================
   Homepage hero: the LSG hero wall behind the existing hero (Ivan, 2026-10-15).
   Loaded by index.html only, after styles.css; scoped to .hero--wall so the
   industry pages' .hero is untouched. Same wall and the same shade as
   /blackfriday/: deep behind the headline on the left, lighter on the right,
   a band under the header and a fade into the page. The dimming is this CSS,
   not baked into the video, so it can be tuned without re-rendering.
   ========================================================================== */
.hero--wall { isolation: isolate; }
.hero-wall { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--color-dark-bg); }
.hero-wall__poster, .hero-wall__poster img, .hero-wall__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero-wall__video { opacity: 0; transition: opacity 0.9s ease; }
.hero-wall__video.is-playing { opacity: 1; }
.hero-wall__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20, 18, 16, 0.94) 0%, rgba(20, 18, 16, 0.88) 36%, rgba(20, 18, 16, 0.52) 62%, rgba(20, 18, 16, 0.4) 100%),
    linear-gradient(180deg, rgba(20, 18, 16, 0.9) 0%, rgba(20, 18, 16, 0) 20%, rgba(20, 18, 16, 0) 76%, rgba(20, 18, 16, 1) 100%);
}
.hero--wall .hero__title { text-shadow: 0 2px 22px rgba(20, 18, 16, 0.6); }
/* The homepage's grey body copy runs further down the wall than the Black Friday hero's, over light tiles on
   phones: a dark halo keeps it readable without changing the shade (Ivan: same dimming) or the copy's colors. */
.hero--wall .hero__subtitle, .hero--wall .hero__bullet, .hero--wall .hero__proof { text-shadow: 0 1px 2px rgba(20, 18, 16, 0.95), 0 0 14px rgba(20, 18, 16, 0.9), 0 0 28px rgba(20, 18, 16, 0.7); }
/* bottom left: the chat widget's greeting covers the bottom right of the first view */
.hero-wall__note { position: absolute; left: 24px; bottom: 18px; z-index: 1; margin: 0; font: 500 0.78rem/1.3 var(--font-body); color: rgba(255, 255, 255, 0.62); }
@media (max-width: 767px) {
  /* phones: the tall cut fills the first screen, then fades into the page, so it is never stretched down the stack */
  .hero-wall { bottom: auto; height: min(100%, 100svh); }
  .hero-wall__shade { background: linear-gradient(180deg, rgba(20, 18, 16, 0.9) 0%, rgba(20, 18, 16, 0.74) 16%, rgba(20, 18, 16, 0.7) 70%, rgba(20, 18, 16, 1) 100%); }
  .hero-wall__note { left: 16px; right: 16px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .hero-wall__video { display: none; } }