/* Production V8 hero placement. */

body.production-v8 #hero {
  text-align: left;
}

body.production-v8 #hero .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: clamp(32px, 6vw, 96px);
  padding-right: 48px;
}

body.production-v8 #hero .container > .reveal:first-child {
  max-width: 520px;
  padding-top: 24px;
}

body.production-v8 #hero .pill,
body.production-v8 #hero h1,
body.production-v8 #hero .lede {
  margin-left: 0;
  margin-right: 0;
}

body.production-v8 #hero h1 {
  max-width: 520px;
  font-size: clamp(40px, 4.5vw, 64px);
}

body.production-v8 #hero .lede {
  max-width: 500px;
}

body.production-v8 #hero .hero-cta,
body.production-v8 #hero .trust-logos {
  justify-content: flex-start;
}

body.production-v8 #hero .trust-row {
  display: none;
}

body.production-v8 .hero-stack-canvas {
  transform: none;
}

body.production-v8 #hero.stack-mode::after {
  background:
    linear-gradient(90deg, rgba(5, 0, 16, 0.78) 0%, rgba(5, 0, 16, 0.42) 34%, transparent 58%),
    radial-gradient(ellipse 58% 52% at 68% 42%, rgba(5, 0, 16, 0.50) 0%, rgba(5, 0, 16, 0.18) 48%, transparent 72%);
}

@media (max-width: 1100px) {
  body.production-v8 .hero-stack-canvas {
    transform: translate(0%, 3%) scale(0.84);
    transform-origin: center right;
  }

  body.production-v8 #hero.stack-mode::after {
    background:
      linear-gradient(90deg, rgba(5, 0, 16, 0.88) 0%, rgba(5, 0, 16, 0.68) 48%, rgba(5, 0, 16, 0.18) 70%, transparent 88%),
      radial-gradient(ellipse 58% 52% at 76% 50%, rgba(5, 0, 16, 0.38) 0%, rgba(5, 0, 16, 0.16) 48%, transparent 72%);
  }
}

@media (max-width: 900px) {
  body.production-v8 #hero.stack-mode .hero-stack-canvas {
    opacity: 0.88;
  }

  body.production-v8 .hero-stack-canvas {
    transform: translate(3%, 6%) scale(0.62);
    transform-origin: center right;
  }

  body.production-v8 #hero .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  body.production-v8 #hero .container > .reveal:first-child {
    max-width: min(430px, 86vw);
  }

  body.production-v8 #hero h1 {
    font-size: clamp(34px, 7vw, 52px);
  }

  body.production-v8 #hero .lede {
    font-size: 17px;
  }
}

@media (max-width: 620px) {
  body.production-v8 #hero.stack-mode .hero-stack-canvas {
    opacity: 0.5;
  }

  body.production-v8 .hero-stack-canvas {
    transform: translate(-8%, 9%) scale(0.46);
    transform-origin: center right;
  }

  body.production-v8 #hero.stack-mode::after {
    background:
      linear-gradient(90deg, rgba(5, 0, 16, 0.94) 0%, rgba(5, 0, 16, 0.82) 64%, rgba(5, 0, 16, 0.30) 88%),
      radial-gradient(ellipse 66% 56% at 82% 56%, rgba(5, 0, 16, 0.30) 0%, transparent 72%);
  }
}