/* On phones the moving stills remain cinematic, but the UI wins every contrast battle. */
@media (max-width: 700px) {
  .hero-video {
    filter: saturate(.68) contrast(1.06) brightness(.59);
  }

  .hero-motion::after {
    background-image:
      linear-gradient(to bottom, rgba(5, 10, 9, .24) 0%, rgba(5, 10, 9, .12) 39%, rgba(5, 10, 9, .62) 100%),
      linear-gradient(90deg, rgba(5, 10, 9, .25), transparent 48%, rgba(5, 10, 9, .19)),
      url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.58'/%3E%3C/svg%3E");
    background-position: center, center, 0 0;
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: cover, cover, 150px 150px;
    background-blend-mode: normal, normal, soft-light;
  }

  .pricing-video {
    filter: saturate(.64) contrast(1.06) brightness(.57);
  }

  .pricing::before {
    background-image:
      linear-gradient(110deg, rgba(7, 10, 9, .52) 0%, rgba(7, 10, 9, .37) 48%, rgba(7, 10, 9, .49) 100%),
      linear-gradient(to bottom, rgba(7, 10, 9, .13), rgba(7, 10, 9, .43)),
      url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E");
    background-position: center, center, 0 0;
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: cover, cover, 150px 150px;
    background-blend-mode: normal, normal, soft-light;
  }
}