@font-face {
  font-family: 'OrangeCrayon';
  src: url('../../../../fonts/Orange-Crayon/OrangeCrayon-Regular.eot');
  src: url('../../../../fonts/Orange-Crayon/OrangeCrayon-Regular.eot?#iefix') format('embedded-opentype'),
    url('../../../../fonts/Orange-Crayon/OrangeCrayon-Regular.woff2') format('woff2'),
    url('../../../../fonts/Orange-Crayon/OrangeCrayon-Regular.woff') format('woff'),
    url('../../../../fonts/Orange-Crayon/OrangeCrayon-Regular.ttf') format('truetype'),
    url('../../../../fonts/Orange-Crayon/OrangeCrayon-Regular.svg#OrangeCrayon-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Boogaloo';
  src: url('../../../../fonts/Boogaloo-Regular/Boogaloo-Regular.eot');
  src: url('../../../../fonts/Boogaloo-Regular/Boogaloo-Regular.eot?#iefix') format('embedded-opentype'),
    url('../../../../fonts/Boogaloo-Regular/Boogaloo-Regular.woff2') format('woff2'),
    url('../../../../fonts/Boogaloo-Regular/Boogaloo-Regular.woff') format('woff'),
    url('../../../../fonts/Boogaloo-Regular/Boogaloo-Regular.ttf') format('truetype'),
    url('../../../../fonts/Boogaloo-Regular/Boogaloo-Regular.svg#Boogaloo-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'The Starlight Cafe';
  src: url('../../../../fonts/TheStarlightCafe/TheStarlightCafe-Bold.eot');
  src: url('../../../../fonts/TheStarlightCafe/TheStarlightCafe-Bold.eot?#iefix') format('embedded-opentype'),
    url('../../../../fonts/TheStarlightCafe/TheStarlightCafe-Bold.woff2') format('woff2'),
    url('../../../../fonts/TheStarlightCafe/TheStarlightCafe-Bold.woff') format('woff'),
    url('../../../../fonts/TheStarlightCafe/TheStarlightCafe-Bold.ttf') format('truetype'),
    url('../../../../fonts/TheStarlightCafe/TheStarlightCafe-Bold.svg#TheStarlightCafe-Bold') format('svg');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

.starcafe-bold {
  font-family: 'The Starlight Cafe';
}

.orangecrayon {
  font-family: 'OrangeCrayon';
}

.boogaloo {
  font-family: 'Boogaloo';
}

html:has(#lp-hero),
body:has(#lp-hero) {
  background-color: #fff;
}

/* remove this in the end - remind me */
#fixed-popup {
  display: none;
}

#lp-hero .lp-inner1 {
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../images/lp/back.jpg);
  background-image: image-set(url("../images/lp/back.webp") 1x, url("../images/lp/back@2x.webp") 2x);
  background-image: -webkit-image-set(url("../images/lp/back.webp") 1x, url("../images/lp/back@2x.webp") 2x);
  width: 100%;
  height: 100%;
}

#lp-hero .lp-inner2,
#lp-hero .lp-inner3,
#lp-hero .lp-inner4 {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../images/lp/back2.jpg);
  background-image: image-set(url("../images/lp/back2.webp") 1x, url("../images/lp/back2@2x.webp") 2x);
  background-image: -webkit-image-set(url("../images/lp/back2.webp") 1x, url("../images/lp/back2@2x.webp") 2x);
  width: 100%;
  height: 100%;
}

/* #lp-hero .lp-inner4 {
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../images/lp/back3.jpg);
  background-image: image-set(url("../images/lp/back3.webp") 1x, url("../images/lp/back3@2x.webp") 2x);
  background-image: -webkit-image-set(url("../images/lp/back3.webp") 1x, url("../images/lp/back3@2x.webp") 2x);
  width: 100%;
  height: 100%;
} */

#lp-hero .nov-form-inner {
  margin-top: 30px;
  width: 597px;
  height: auto;
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../images/lp/form-back.jpg);
  background-image: image-set(url("../images/lp/form-back.webp") 1x, url("../images/lp/form-back@2x.webp") 2x);
  background-image: -webkit-image-set(url("../images/lp/form-back.webp") 1x, url("../images/lp/form-back@2x.webp") 2x);
}

#lp-hero {
  height: 929px;
}

#lp-hero .main-text {
  color: #000;
  text-align: center;
  font-size: 21px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  /* 133.333% */
  max-width: 545px;
}

#lp-hero .main-text2 {
  margin-top: 10px;
}

#lp-hero .button {
  width: 197px;
  height: 43px;
  border-radius: 54px;
  background: #009047;
  color: #FFF;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  line-height: normal;
  text-transform: uppercase;
  margin-top: 26px;
  padding: 0;
  border: none;
  text-decoration: none;
}

#lp-hero .button:hover,
#lp-hero .button:focus,
#lp-hero .button:active,
#lp-hero .button:visited {
  border: none;
  text-decoration: none;
}

#lp-hero .button:focus:not(:focus-visible) {
  outline: none;
}

@supports (text-box: trim-both cap alphabetic) {
  #lp-hero .lp-inner1 .button span {
    text-box: trim-both cap alphabetic;
  }
}

#lp-hero .lp-right {
  margin-left: -7em;
  margin-right: -13em;
  top: 8em;
}

#lp-hero .main {
  margin-bottom: 23px;
}

#lp-hero .steps {
  bottom: 91px;
}

/* lotties: a poster image sits under <dotlottie-wc>, both filling a box with the lottie's own
   aspect ratio. The poster files were exported on a taller canvas than the lotties, so they are
   centre-cropped to that box. The poster is hidden once the lottie has loaded (.is-loaded). */
#lp-hero .steps-lg {
  width: 1456px;
  aspect-ratio: 1456 / 454;
}

#lp-hero .steps-sm {
  width: 390px;
  aspect-ratio: 390 / 330;
}

#lp-hero .dotlottie-animation .lottie-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#lp-hero .dotlottie-animation.is-loaded .lottie-poster {
  visibility: hidden;
}

#lp-hero .dotlottie-animation dotlottie-wc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#lp-hero .sign-wrapper {
  top: -36px;
  animation: sign-drop 8.009212s linear;
}

@keyframes sign-drop {
  0% {
    translate: 0px -518px;
  }

  1.498% {
    animation-timing-function: ease-in;
    translate: 0px -518px;
  }

  8.99% {
    animation-timing-function: ease-out;
    translate: 0px 9px;
  }

  11.237% {
    animation-timing-function: ease-in-out;
    translate: 0px -4px;
  }

  13.484% {
    translate: 0px 0px;
  }

  100% {
    translate: 0px 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #lp-hero .sign-wrapper {
    animation: none;
  }
}

#lp-hero .lp-main {
  top: -35px;
}

#form-bundle {
  max-width: 476px;
  margin: 0 auto;
}

#form-bundle form.uni-style .form-field input:not([type="radio"]):not([type="checkbox"]),
#form-bundle form.uni-style .form-field textarea,
#form-bundle form.uni-style .form-field select,
#form-bundle form.uni-style .form-field .file-fake-input {
  height: 50px;
}

#lp-hero .form-heading {
  color: #19353F;
  font-size: 36.085px;
  font-style: normal;
  font-weight: 400;
  line-height: 70.008px;
  margin-bottom: -7px;
  margin-top: 33px;
  padding-left: 8px;
}

#lp-hero .form-title {
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 23.491px;
  margin-bottom: 0;
  margin-top: 3px;
  padding-left: 8px;
  font-family: 'The Starlight Cafe';
}

#form-bundle form.uni-style .form-field label {
  font-size: 16px;
}

#lp-hero form .button {
  width: 169.257px;
  height: 36.944px;
  border-radius: 46.395px;
  background: #009047;
  color: #FFF;
  text-align: center;
  font-size: 15.465px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  text-transform: uppercase;
  margin-top: 14px;
  margin-bottom: 6em;
  z-index: 9;
}

@supports (text-box: trim-both cap alphabetic) {
  #lp-hero form .button {
    display: block;
    align-content: center;
    text-box: trim-both cap alphabetic;
  }
}

/* absolute images sit directly in the flex .lp-inner3; the <picture> wrapper must not become the box that changes their static position */
#lp-hero .lp-inner3>picture {
  display: contents;
}

#lp-hero .bottom-img {
  bottom: 0;
  width: auto;
  z-index: 0
}

#lp-hero .left-sign-wrapper {
  bottom: 82px;
  left: 50%;
  transform: translateX(-177%);
  z-index: 9;
}

#lp-hero .form-yeti {
  left: 50%;
  transform: translateX(126%);
  z-index: 9;
  bottom: 138px;
}

#form-bundle form {
  position: relative;
  z-index: 9;
}

#lp-hero .lp-inner4 .button {
  width: 250px;
  height: 43px;
  border-radius: 54px;
  background: #009047;
  color: #FFF;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  text-transform: uppercase;
  margin-top: 0;
}

@supports (text-box: trim-both cap alphabetic) {
  #lp-hero .lp-inner4 .button {
    display: block;
    align-content: center;
    text-box: trim-both cap alphabetic;
  }
}

#lp-hero .mailbox {
  width: 296px;
  aspect-ratio: 296 / 350;
  margin-left: 16em;
}

@media screen and (max-width: 767px) {
  #lp-hero .lp-inner1 {
    flex-direction: column;
  }
}

@media screen and (max-width: 567px) {
  #lp-hero .lp-inner1 {
    background-image: url(../images/lp/back-m.jpg);
    background-image: image-set(url("../images/lp/back-m.webp") 1x, url("../images/lp/back-m@2x.webp") 2x);
    background-image: -webkit-image-set(url("../images/lp/back-m.webp") 1x, url("../images/lp/back-m@2x.webp") 2x);
  }

  #lp-hero .lp-inner2 {
    background-image: url(../images/lp/back2-m.jpg);
    background-image: image-set(url("../images/lp/back2-m.webp") 1x, url("../images/lp/back2-m@2x.webp") 2x);
    background-image: -webkit-image-set(url("../images/lp/back2-m.webp") 1x, url("../images/lp/back2-m@2x.webp") 2x);
  }

  #lp-hero .button {
    margin-top: 6px;
  }

  #lp-hero .main-text {
    font-size: 16px;
    line-height: 24px;
    max-width: 324px;
  }

  #lp-hero .main-text2 {
    margin-top: 0px;
    max-width: 372px;
  }

  #lp-hero .right {
    max-width: 417px;
    width: 100%;
    left: -2px;
    bottom: 38px;
  }

  #lp-hero .lp-right {
    margin-left: 0;
    margin-right: 0;
    top: -7px;
    width: 100%;
  }

  #lp-hero {
    --hero-h: 716px;
    /* height of the sign + bottom image that stay pinned over the bottom of the form */
    --bottom-h: 120px;
    /* the form's dropdown arrow (form.uni-style .select_box::after reads these), 17x10 by default;
       the right offset keeps its center where it was */
    --form-select-arrow-width: 12px;
    --form-select-arrow-height: 7px;
    --form-select-arrow-right: 17px;
    height: var(--hero-h);
  }

  /* sizes of the -m sign images */
  #lp-hero .step2 .sign {
    width: 314px;
    height: auto;
  }

  #lp-hero .step4 .sign {
    width: 316px;
    height: auto;
  }

  #lp-hero .left-sign-m {
    width: 210px;
    height: auto;
    z-index: 9;
    margin-right: 0;
  }

  #lp-hero .steps {
    bottom: unset;
    max-width: 100%;
    width: 100%;
    top: 235px;
  }

  #lp-hero .sign-wrapper {
    top: -7px;
  }

  .lp-form {
    width: 100%;
  }

  #lp-hero .nov-form-inner {
    padding: 0 15px;
    width: 100%;
    margin-top: 0;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/lp/form-back-m.jpg);
    background-image: image-set(url("../images/lp/form-back-m.webp") 1x, url("../images/lp/form-back-m@2x.webp") 2x);
    background-image: -webkit-image-set(url("../images/lp/form-back-m.webp") 1x, url("../images/lp/form-back-m@2x.webp") 2x);
  }

  #form-bundle form.uni-style .form-row {
    gap: 10px;
    flex-direction: row;
  }

  #lp-hero .form-heading {
    color: #19353F;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    margin-top: 47px;
    margin-bottom: 19px;
  }

  #lp-hero .form-title {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 23.491px;
    margin-top: 12px;
  }

  /* sticky does nothing inside an overflow:hidden box (it becomes the scroll container), clip
     crops the same way without that. Every ancestor counts: the layout's <main> that wraps the
     hero is overflow:hidden too, so it needs the same. */
  #lp-hero,
  main:has(> #lp-hero) {
    overflow: clip;
  }

  /* follows the scroll at the bottom of the screen, but stops at the bottom of .lp-inner3.
     It is a flex item of .lp-inner3, so width 100% + margin-left -100% makes it overlay the
     form without taking any of its width. */
  #lp-hero .bottom-wrapper {
    position: sticky;
    bottom: 0;
    align-self: flex-end;
    width: 100%;
    margin-left: -100%;
    z-index: 9;
    /* decorative: never block taps on the form it overlaps */
    pointer-events: none;
  }

  /* the <picture> must not become the box the absolute .bottom image positions against */
  #lp-hero .bottom-wrapper>picture {
    display: contents;
  }

  #lp-hero .bottom {
    bottom: 0;
    width: 100%;
  }

  /* The form always scrolls inside the space above the pinned bottom-wrapper, which covers the
     bottom --bottom-h of whichever is shorter, the hero or the screen. On a tall screen the wrapper
     rests at the bottom of the hero, on a short one it is pinned to the bottom of the screen. The
     page is not scrolled when step 3 shows, so with the header still above the hero the lower
     part of the scroller sits under the wrapper until the visitor scrolls the page a little.
     flex-start because centering would push the overflowing top of the form out of reach. */
  #lp-hero .lp-form {
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(min(var(--hero-h), 100vh) - var(--bottom-h));
    max-height: calc(min(var(--hero-h), 100svh) - var(--bottom-h));
  }

  #lp-hero .lp-form .nov-form-inner {
    flex-shrink: 0;
  }

  #lp-hero .lp-inner4 {
    background-image: url(../images/lp/back2-m.jpg);
    background-image: image-set(url("../images/lp/back2-m.webp") 1x, url("../images/lp/back2-m@2x.webp") 2x);
    background-image: -webkit-image-set(url("../images/lp/back2-m.webp") 1x, url("../images/lp/back2-m@2x.webp") 2x);
  }

  /* step 4 bottom layer: the snow hills (.bottom, absolute at the bottom of the hero) is first in
     the DOM so it paints behind the yeti and mailbox. .lp-inner4 must stay position: static: the
     falling snow (img.snow, a direct child of #lp-hero) is positioned, so it only shows above the
     step's background while the step itself is not positioned; every item in step 4 is positioned
     and comes later, so they paint above the falling snow. The absolute items therefore position
     against #lp-hero, which is the same box as .lp-inner4. The <picture> must not be the box the
     hills position against, and .step4 must not be either, so the yeti/mailbox row can pin to the
     bottom of the hero too. */
  #lp-hero .lp-inner4>picture {
    display: contents;
  }

  #lp-hero .step4 {
    position: static;
  }

  #lp-hero .thanks-img {
    position: absolute;
    left: 0;
    bottom: 24px;
    width: 100%;
    align-items: flex-end;
    justify-content: flex-end;
  }

  #lp-hero .thanks-yeti {
    max-width: 292px;
    height: auto;
    /* margin-left: -33px; */
    right: -24px;
    bottom: 35px;
  }

  #lp-hero .mailbox {
    max-width: 195px;
    margin-left: 0;
    bottom: 23px;
    left: 28px;
    z-index: 1;
    width: 100%;
    height: auto;
    width: 195px;
    position: absolute;
  }

  #lp-hero .lp-inner4 .button {
    margin-top: 22px;
  }

  #lp-hero .main {
    margin-bottom: 16px;
    max-width: 254px;
    height: auto;
    margin-top: 62px;
  }

  #lp-hero .bottom-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 160px;
    background: #fff;
  }
}