/* Illustrative product stories, drawn as scalable artwork. */
.illustrated-carousel .carousel-slide {
  background: radial-gradient(
    ellipse at 82% 40%,
    #6551b7 0,
    #382474 45%,
    #20164c 100%
  );
}
.illustrated-carousel .carousel-slide[data-slide="1"] {
  background: radial-gradient(
    ellipse at 80% 40%,
    #a373ba 0,
    #71509b 42%,
    #36244f 100%
  );
}
.illustrated-carousel .carousel-slide[data-slide="2"] {
  background: radial-gradient(
    ellipse at 80% 40%,
    #4a76ce 0,
    #294c9f 42%,
    #17265c 100%
  );
}
.illustrated-carousel .carousel-slide::before {
  width: 670px;
  height: 670px;
  right: -80px;
  top: -40px;
  border: 1px solid #ffffff12;
  background: radial-gradient(
    circle,
    transparent 54%,
    #ffffff05 54%,
    #ffffff05 70%,
    transparent 70%
  );
}
.illustrated-carousel .carousel-slide .slide-copy {
  left: 6%;
  width: 36%;
  padding: 0;
  background: transparent;
  color: #fff;
  border-radius: 0;
}
.illustrated-carousel .slide-copy h2 {
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.035em;
  margin-bottom: 22px;
}
.illustrated-carousel .slide-copy p {
  font-size: 17px;
  line-height: 1.7;
  color: #eee8ff;
  margin-bottom: 28px;
}
.illustrated-carousel .slide-copy .text-link {
  font-size: 16px;
  color: #fff;
}
.slide-art {
  position: absolute;
  inset: 3% 0 3% auto;
  width: 58%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.story-art {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.illustrated-carousel[data-art-visible="true"]
  .carousel-slide[data-position="active"]
  .story-object {
  animation: story-materialize 1100ms ease both;
}
.illustrated-carousel[data-art-visible="true"]
  .carousel-slide[data-position="active"]
  .story-object-2 {
  animation-delay: 120ms;
}
.illustrated-carousel[data-art-visible="true"]
  .carousel-slide[data-position="active"]
  .story-object-3 {
  animation-delay: 240ms;
}
@keyframes story-materialize {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (min-width: 845px) and (max-width: 1100px) {
  .illustrated-carousel .carousel-slide .slide-copy {
    left: 5%;
    width: 39%;
  }
  .illustrated-carousel .slide-copy h2 {
    font-size: 29px;
  }
  .illustrated-carousel .slide-copy p {
    font-size: 16px;
  }
  .slide-art {
    width: 57%;
    right: -2%;
  }
}
@media (max-width: 844px) {
  .illustrated-carousel .carousel-stage {
    height: 390px;
  }
  .illustrated-carousel .carousel-slide .slide-copy {
    display: none;
  }
  .illustrated-carousel .slide-art {
    inset: 0;
    width: 100%;
  }
  .illustrated-carousel .story-art {
    max-width: 530px;
  }
  .illustrated-carousel .carousel-mobile-caption {
    display: block;
    width: calc(100% - 64px);
    max-width: 620px;
    margin: 24px auto 0;
  }
  .illustrated-carousel .carousel-mobile-caption h2 {
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 14px;
  }
  .illustrated-carousel .carousel-mobile-caption p {
    font-size: 17px;
    line-height: 1.65;
    margin-bottom: 20px;
  }
  .illustrated-carousel .carousel-mobile-caption .text-link {
    font-size: 16px;
  }
  .illustrated-carousel .carousel-arrow {
    top: 207px;
    bottom: auto;
  }
}
@media (max-width: 539px) {
  .illustrated-carousel .carousel-stage {
    height: 285px;
  }
  .illustrated-carousel .carousel-slide {
    width: calc(100% - 48px);
    border-radius: 24px;
  }
  .illustrated-carousel .carousel-mobile-caption {
    width: calc(100% - 48px);
  }
  .illustrated-carousel .carousel-mobile-caption h2 {
    font-size: 28px;
  }
  .illustrated-carousel .carousel-mobile-caption p {
    font-size: 16px;
  }
  .illustrated-carousel .carousel-arrow {
    top: 155px;
    width: 30px;
  }
  .illustrated-carousel .carousel-prev {
    left: 0;
  }
  .illustrated-carousel .carousel-next {
    right: 0;
  }
  .illustrated-carousel .carousel-arrow .icon {
    width: 23px;
    height: 23px;
  }
}
@media (max-width: 359px) {
  .illustrated-carousel .carousel-stage {
    height: 250px;
  }
  .illustrated-carousel .carousel-arrow {
    top: 137px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .illustrated-carousel .story-object {
    animation: none !important;
  }
}