@import url("./fonts.css");
@import url("./reset.css");
@import url("./base.css");
@import url("./navbar.css");
@import url("./copy.css");
@import url("./footer.css");
@import url("./grid.css");

.themeWhite {
  --accentColor: var(--orange);
  --accentColor-06: var(--orange-06);
  --accentColorFilter: var(--orange-filter);
  --accentColorFromOtherTheme: var(--honey-yellow);
  --accentColorFromOtherThemeFilter: var(--honey-yellow-filter);
  --backgroundColor: #fff;
  --linkColor: var(--accentColor);
  --linkHoverColor: var(--titleColor);
  --buttonColor: var(--accentColor);
  --buttonHoverColor: var(--titleColor);
  --buttonDisabledColor: #cfd7df;
  --buttonDisabledOpacity: 0.7;
  --knockoutColor: var(--backgroundColor);
  --knockoutDisabledColor: #8898aa;
  --titleColor: var(--prussian-blue);
  --textColor: var(--neutralVeryDark);
  --inputBackground: #f1f4f7;
  --inputPlaceholderColor: #acb9c5;
  --inputTextColor: #0a2540;
  --inputErrorAccentColor: #ff5191;
  --navColor: var(--titleColor);
  --navBackgroundColor: var(--backgroundColor);
  --footerColor: #0a2540;
  --cardBorderColor: #cbd6e0;
  --cardBackground: #fff;
  --subcardBackground: #f6f9fc;
}

.themeDark {
  --accentColor: var(--honey-yellow);
  --accentColor-06: var(--honey-yellow-06);
  --accentColorFilter: var(--honey-yellow-filter);
  --accentColorFromOtherTheme: var(--orange);
  --accentColorFromOtherThemeFilter: var(--orange-filter);
  --backgroundColor: var(--prussian-blue);
  --linkColor: var(--accentColor);
  --linkHoverColor: var(--titleColor);
  --buttonColor: var(--accentColor);
  --buttonHoverColor: var(--titleColor);
  --buttonDisabledColor: #6b7c93;
  --buttonHoverOpacity: 1;
  --buttonDisabledOpacity: 0.7;
  --knockoutColor: var(--backgroundColor);
  --knockoutDisabledColor: #e6ebf1;
  --titleColor: #fff;
  --textColor: #c7d7e6;
  --inputBackground: #0c2e4e;
  --inputBackgroundAlt: #274869;
  --inputPlaceholderColor: #b6c2cd;
  --inputTextColor: #fff;
  --inputErrorAccentColor: #ff5191;
  --navColor: var(--titleColor);
  --navBackgroundColor: var(--backgroundColor);
  --footerColor: #fff;
  --cardBorderColor: #0f395e;
  --cardBackground: #0c2e4e;
  --subcardBackground: #1f4468;
}

.variantHero {
  z-index: 2;
}

.variantHero h1 {
  font-size: 42px;
  font-size: clamp(42px, 11.5vw, 70px);
  line-height: 50px;
  line-height: clamp(47px, 10.5vw, 90px);
  font-weight: 600;
  letter-spacing: -0.04em;
  text-indent: -2px;
  color: var(--titleColor);
}

.variantHero .contentLeft .copyBody {
  margin-top: -8px;
}

@media (min-width: 640px) {
  .variantHero h1 {
    font-size: 60px;
    font-size: clamp(42px, 11.5vw, 70px);
    line-height: 74px;
    line-height: clamp(47px, 10.5vw, 90px);
  }
}

@media (min-width: 880px) {
  .variantHero h1 {
    font-size: 70px;
    font-size: clamp(41px, 10vw, 70px);
    line-height: 70px;
    line-height: clamp(50px, 10.5vw, 76px);
    text-indent: -1.5px;
  }
}

@media (min-width: 1024px) {
  .variantHero {
    --bodyPaddingRight: var(--columnPaddingMedium);
  }
}
@media (min-width: 1536px) {
  .variantHero .contentLeft {
    margin-top: 24px;
  }
  .variantHeroStripeOne {
    position: absolute;
    left: 0;
    bottom: 0vw;
    width: 22vw;
    height: clamp(20px, 4vw, 60px);
    background: var(--cute-grey);
    opacity: 0.6;
    transform: skewY(-6deg);
    transform-origin: 0;
  }

  .variantHeroStripeTwo {
    position: absolute;
    left: 0;
    bottom: calc(-1 * clamp(11px, 2.2vw, 33px));
    width: 10vw;
    height: clamp(20px, 4vw, 60px);
    background: var(--accentColorFromOtherTheme);
    opacity: 0.6;
    transform: skewY(-6deg);
    transform-origin: 0;
  }
}
@media (min-width: 2160px) {
  .variantHeroStripeThree {
    position: absolute;
    right: 0;
    top: 65%;
    width: 16vw;
    height: clamp(20px, 4vw, 60px);
    background: var(--cute-grey);
    opacity: 0.6;
    transform: skewY(-6deg);
    /* transform-origin: 0; */
  }
  .variantHeroStripeFour {
    position: absolute;
    right: 0;
    top: calc(clamp(11px, 2.2vw, 33px) + 65%);
    width: 7vw;
    height: clamp(20px, 4vw, 60px);
    background: var(--accentColor);
    opacity: 0.6;
    transform: skewY(-6deg);
    transform-origin: 0;
  }
}

full-width-background::part(span1) {
  right: 0;
  top: 0vw;
  width: 22vw;
  height: clamp(20px, 4vw, 60px);
  background: var(--accentColorFromOtherTheme);
  opacity: 0.6;
}
full-width-background::part(span2) {
  right: 0vw;
  top: clamp(11px, 2.2vw, 33px);
  width: 10vw;
  height: clamp(20px, 4vw, 60px);
  background: var(--accentColor);
  opacity: 0.6;
}
full-width-background::part(span3) {
  left: 0vw;
  bottom: clamp(11px, 2.2vw, 33px);
  width: 10vw;
  height: clamp(20px, 4vw, 60px);
  background: var(--accentColorFromOtherTheme);
  opacity: 0.6;
}
full-width-background::part(span4) {
  left: 0;
  bottom: 0vw;
  width: 22vw;
  height: clamp(20px, 4vw, 60px);
  background: var(--accentColor);
  opacity: 0.6;
}

#presentation {
  background: var(--inputBackground);
  background: #fff;
  z-index: 1;
}

#presentation testimonials-block {
  padding-top: 0;
  --testimonialsBlockContainerPaddingS: 6px 32px;
  --testimonialsBlockContainerPaddingL: 16px 36px;
  --testimonialsBlockContainerPaddingL: 8px 80px;
}

#presentation .copyHeader {
  display: block;
  margin-bottom: 18px;
}

#presentation .copyCaptcha {
  margin-bottom: 0;
}

shadow-image:not(.variantHero shadow-image) {
  --shadowImageTopL: -94px;
}

@media (min-width: 420px) {
  #presentation .copyHeader {
    display: none;
  }
}

@media (min-width: 640px) {
  #intro .contentLeft split-content,
  #support .contentLeft split-content {
    width: calc(100vw - 2 * var(--columnPaddingNormal));
  }
}

@media (min-width: 1024px) {
  #intro .contentLeft split-content,
  #support .contentLeft split-content {
    width: auto;
  }
}

#testimonials .wrapper {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

testimonial-card-simple {
  width: calc(100% - 2 * var(--columnPaddingNormal));
  background-color: transparent;
  font: var(--bodyFont);
  --testimonialCardSecondaryColor: var(--titleColor);
  --testimonialCardBorderColor: var(--accentColor);
  /* --testimonialCardContainerBackgroundColor: var(--neutralVeryLight); */
  --avatarDataMarginLeft: 4%;
  --testimonialCardPointerLeft: 20%;
  --testimonialCardAvatarMarginLeft: 25px;
  --testimonialCardAvatarBorderColor: var(--cardBorderColor);
  --testimonialCardAvatarBorderColor: #e9e9e9;
}
testimonial-card-simple:nth-child(3),
testimonial-card-simple:nth-child(4) {
  margin-top: 35px;
}
testimonial-card-simple:nth-child(2),
testimonial-card-simple:nth-child(4) {
  display: none;
}

@media (min-width: 670px) {
  testimonial-card-simple {
    width: calc(50% - 2 * var(--columnPaddingNormal));
  }
  testimonial-card-simple:nth-child(3),
  testimonial-card-simple:nth-child(4) {
    margin-top: 0px;
  }
}
@media (min-width: 880px) {
  testimonial-card-simple {
    width: 50%;
  }
  testimonial-card-simple:nth-child(2),
  testimonial-card-simple:nth-child(4) {
    display: block;
  }
  testimonial-card-simple {
    width: calc(33.334% - 2 * var(--columnPaddingNormal));
  }
  testimonial-card-simple:nth-child(3),
  testimonial-card-simple:nth-child(4) {
  }
}