[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.67s cubic-bezier(.59, .41, .68, .49),
    transform 0.67s cubic-bezier(.28, 1.1, .74, 1);
  transition-delay: 0.15s;
  will-change: opacity, transform;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.content-wrapper {
  padding-top: 52px !important;
}

.glass-shell.nav-blur {
  background-color: transparent !important;
  backdrop-filter: blur(35px) !important;
  -webkit-backdrop-filter: blur(35px) !important;
}

.glass-shell header {
  max-width: 1388px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.carousel-item-padding {
  padding-bottom: 5px;
  padding-top: 5px;
}

.legacy-footer {
  display: none;
}

.web-page h1 {
  font-family: 'blossom-font', sans-serif, system-ui !important;
  font-size: 42px !important;
  line-height: 42px !important;
  font-weight: 400 !important;
}

.web-page h2 {
  font-family: 'blossom-font', sans-serif, system-ui !important;
  font-size: 26px !important;
  line-height: 25px !important;
  font-weight: 400 !important;
}

.web-page h3 {
  font-family: 'blossom-font', sans-serif, system-ui !important;
  font-size: 22px !important;
  line-height: 26px !important;
  font-weight: 400 !important;
}

.web-page h4 {
  font-family: 'blossom-font', sans-serif, system-ui !important;
  font-size: 22px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
}

.web-page .hero-lead h5 {
    font-size: 15px !important;
    line-height: auto !important;
  }

.web-page p {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
}

/* FAQ 'static' variant: title as H5 (blossom font), 16/20px. */
.web-page .faq-static-title {
  font-family: 'blossom-font', sans-serif, system-ui !important;
  font-size: 16px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
}

/* SponsorAddOns: price in H3 at 34/38 */
.web-page .addon-price {
  font-size: 34px !important;
  line-height: 38px !important;
  font-weight: 400 !important;
}

/* Mobile: unify tag / title / card body to 15/20 */
@media (max-width: 1023px) {
  .web-page .text-\[15px\],
  .web-page .text-\[16px\] {
    font-size: 15px !important;
    line-height: 20px !important;
  }

  /* Forced line breaks (<br>) only apply on desktop */
  .web-page br {
    display: none;
  }

  /* ...except in the static FAQ answer, where double line breaks
     structure the content and should also be visible on mobile */
  .web-page .faq-static-answer br {
    display: inline !important;
  }
}

.autoplay-video {
  border-radius: 8px !important;
}

/* Sponsor hero video: crops (cover) to fill the 4:5 vertical frame
   on mobile instead of leaving letterboxing. On desktop (16:9 in 16:9 frame) no change. */
.web-page .video-container video {
  object-fit: cover !important;
}

.video-container {
  padding: 0 20px !important;
}

.bullets-list {
  padding-top: 24px !important;
  padding-right: 20px !important;
  padding-left: 20px !important;
}

.embla__viewport {
  padding-left: max(calc((100% - 1340px) / 2), 20px) !important;
  padding-right: max(calc((100% - 1340px) / 2), 20px) !important;
}

/* Packages carousel (mobile): one card at a time, no peek.
   The 20px margin comes from the px-5 padding of each slide. */
.packages-carousel .embla__viewport {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.arrow-buttons-carousel {
  margin-right: max(calc((100% - 1340px) / 2), 20px) !important;
}

.nav-carousel {
  margin-left: max(calc((100% - 1340px) / 2), 20px) !important;
}

.faqs-section {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.img-gradient-dark {
  mask-image: linear-gradient(to top, transparent 1%, rgba(0, 0, 0, 0.4) 26%, rgba(0, 0, 0, 0.9) 60%);
}

.img-gradient {
  mask-image: linear-gradient(to top, transparent 1.5%, rgba(0, 0, 0, 0.1) 8%, rgba(0, 0, 0, 1) 30%);
}

.img-with-gradient {
  position: relative;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.img-with-gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 66.84%, #F7F6F6 100%);
  pointer-events: none;
  border-radius: 8px 8px 0 0;
}

@media (min-width: 1020px) {
  .content-wrapper {
  padding-top: 120px !important;
}

  .web-page h1 {
    font-size: 56px !important;
    font-weight: 400 !important;
    line-height: 56px !important;
  }

  .web-page h2 {
    font-size: 40px !important;
    font-weight: 400 !important;
    line-height: 42px !important;
  }

  .web-page h3 {
    font-size: 34px !important;
    font-weight: 400 !important;
    line-height: 38px !important;
  }

  .web-page h4 {
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 34px !important;
  }

  .web-page p {
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
  }

  /* Hero description (H5 in Figma): 20px only on desktop */
  .web-page .hero-lead h5 {
    font-size: 20px !important;
    line-height: 26px !important;
  }

  /* Menu: logo aligned to content (24px left) and last item (Sponsor)
     flush to right edge, no spacing */
  .glass-shell header {
    padding-left: 24px !important;
    padding-right: 0 !important;
  }

  .video-container {
    padding: 0 24px !important;
  }

  .bullets-list {
    padding-right: 24px !important;
    padding-left: 24px !important;
  }

  .faqs-section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .img-gradient-dark {
    mask-image: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.4) 26%, rgba(0, 0, 0, 0.9) 60%);
  }
}