/* Example 5, desktop review pass (15 Sep 2026). Loaded after best-of-v1.css.
   1. The header is solid unless the page is genuinely over the film. The
      default (no attribute yet, JS not run) is now the safe state.
   2. A left-hand scrim behind the hero copy so the sub-line stays readable
      over the brightest part of the waveform.
   3. Wider text columns on large screens: the container is 1120px but text
      was capped at 760px, leaving the right third empty. */

.sh:not([data-over-film="true"]) {
  background: rgba(7, 11, 20, .94);
  border-bottom-color: rgba(255, 255, 255, .09);
  backdrop-filter: blur(12px);
}

.tg-best-of .tg-film-shade {
  background:
    linear-gradient(90deg, rgba(7, 11, 20, .78) 0%, rgba(7, 11, 20, .55) 34%, rgba(7, 11, 20, .12) 62%, rgba(7, 11, 20, 0) 80%),
    linear-gradient(0deg, #070b14 0%, rgba(7, 11, 20, .2) 25%, transparent 55%, rgba(7, 11, 20, .65) 80%, rgba(7, 11, 20, .5) 100%);
}

@media (min-width: 1200px) {
  .tg-best-of .landing_heading__JkNMf { max-width: 900px; }
  .tg-best-of .review-proof .intro,
  .tg-best-of #brain > .intro,
  .tg-best-of .review-workflow > div { max-width: 880px; }
  .tg-best-of .tg-film-copy { max-width: 720px; }
  .tg-best-of .tg-film-copy > .landing_heroBody__r34Ky { max-width: 540px; }
}