:root {
  --dark-slate-gray: #262c46;
}

/* Page background matched to the video itself, sampled over 20 frames across
   the loop from the centre 32% crop that object-fit:cover actually shows on a
   portrait phone. Top #4E5566, bottom #7688A3. The clip is colour-stable, so
   this holds for the whole loop. It carries the gradient on html rather than
   body so it paints the canvas directly, which is also what iOS Safari samples
   when it tints its own top and bottom bars. */
html {
  height: 100%;
  overflow: hidden;
  background-color: #4e5566;
  background-image: linear-gradient(180deg, #4e5566 0%, #7688a3 100%);
}

/* One fixed screen with nothing below it, so the page must not scroll at all.
   Sizing alone is not enough: iOS Safari rubber-bands the whole document on a
   drag even when it fits, which reads as the text sliding up and down. Pinning
   the body takes it out of the scrolling model entirely. The fixed video is a
   sibling and is clipped by the viewport, not by this overflow. */
body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  color: #fff;
  background-color: #0000;
  font-family: Varela Round, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

h1 {
  letter-spacing: 1px;
  text-shadow: 0 1px #000000ba, 0 2px 4px #00000030;
  margin: 10px 0 16px;
  font-family: Lemon, sans-serif;
  font-size: 68px;
  font-weight: 500;
  line-height: 54px;
}

h2 {
  text-shadow: none;
  margin: 10px 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
}

h3 {
  text-shadow: none;
  margin: 5px 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
}

h4 {
  margin: 10px 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

h5 {
  margin: 10px 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

h6 {
  margin: 10px 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

p {
  letter-spacing: 0;
  text-shadow: none;
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 22px;
  line-height: 23px;
}

.button {
  float: left;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px #00000030;
  background-color: #c96c47;
  border-radius: 4px;
  width: 32%;
  height: 54px;
  padding: 4px 29px;
  font-size: 16px;
  font-weight: 300;
  text-decoration: none;
  transition: background-color .3s;
  display: block;
  box-shadow: 0 1px 4px #0000004d, 0 0 0 1px #0000001c, inset 0 0 0 1px #ffffff14, inset 0 1px #ffffff29, inset 0 -44px 38px -25px #00000017;
}

.button:hover {
  background-color: #e66f40;
}

.button:active {
  background-color: #e66f40a1;
  box-shadow: 0 1px #ffffff42, 0 0 0 1px #00000029, inset 0 2px 6px 1px #0000001c, inset 0 1px #0003, inset 0 44px 38px -25px #00000021;
}

.subtitle {
  float: none;
  text-align: center;
  text-shadow: 1px 1px 2px #0000003d, 0 1px #00000040;
  margin-top: 20px;
  padding-left: 60px;
  padding-right: 60px;
  font-family: Montserrat, sans-serif;
  font-size: 35px;
  font-weight: 300;
  line-height: 100%;
  text-decoration: none;
  display: block;
}

.field {
  float: left;
  color: #fff;
  background-color: #2f292ba6;
  border: 0 solid #000;
  border-radius: 4px;
  width: 65%;
  height: 54px;
  margin-right: 3%;
  font-size: 16px;
  transition: background-color .3s, box-shadow .3s;
  box-shadow: inset 0 0 0 1px #0000004f, inset 0 2px 9px -1px #00000024, 0 0 0 1px #ffffff17, 0 1px #ffffff21;
}

.field:hover {
  background-color: #2f292bc2;
}

.field:focus {
  box-shadow: inset 0 0 0 1px #0000004f, inset 0 2px 9px -1px #00000024, 0 0 0 2px #c96c47, 0 0 12px 1px #c96c47;
}

.sign-up-form {
  margin-top: 47px;
}

.social-widget {
  float: left;
  opacity: .41;
  width: 100px;
  transition: opacity .3s;
}

.social-widget:hover {
  opacity: 1;
}

.success-message {
  color: #fff;
  text-shadow: 0 1px #0000008f;
  background-color: #c96c47;
  border-radius: 4px;
  padding: 29px;
  transition: all .3s;
  box-shadow: 0 1px 4px #0000004d, 0 0 0 1px #00000024, inset 0 0 0 1px #ffffff17, inset 0 1px #ffffff1f;
}

.error-message {
  background-color: #5c3245;
  border-radius: 2px;
  padding-bottom: 5px;
}

.header-section {
  color: #fff;
  text-align: center;
  background-color: #0000;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 0;
  padding-bottom: 0;
  z-index: 2;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.footer-section {
  color: #7e7c87;
  background-color: #2f292b;
  padding-top: 38px;
  padding-bottom: 34px;
  box-shadow: 0 -1px #ffffff14, inset 0 1px 1px #0000003d;
}

.copyright {
  color: #ffffff4a;
}

.container {
  z-index: auto;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding-left: 60px;
  padding-right: 60px;
  display: flex;
  position: relative;
}

.share-button {
  width: 58px;
  margin-left: 14px;
  margin-right: 14px;
  display: inline-block;
}

.share-button.facebook {
  width: 49px;
}

.share-button.google {
  width: 54px;
}

.success-text {
  text-shadow: none;
  margin-bottom: 10px;
}

.referal-text {
  color: #ffffff9c;
  text-transform: uppercase;
  text-shadow: none;
  margin-top: 16px;
  margin-bottom: 13px;
  font-size: 15px;
}

.social-btn {
  opacity: .31;
  margin-left: 7px;
  margin-right: 7px;
  transition: opacity .2s;
}

.social-btn:hover {
  opacity: 1;
}

.align-right {
  text-align: right;
}

.slider-nav {
  height: 40px;
  font-size: 9px;
}

/* The video is a page-level background layer now, not a Webflow background-video
   component. Fixed to the viewport with height:100%, which resolves against the
   initial containing block and so never depends on an ancestor's height. It sits
   under the content on z-index rather than behind it on a negative index. */
.hero-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

/* Mobile only. These exist to close the seam against iOS Safari's tinted top
   and bottom bars, which take a single theme-color for both. Desktop and
   tablet have no such chrome, so a scrim there would only dim the artwork.

   The two ends need different amounts of work. Measured on device, the video's
   bottom edge sits 77 away from the toolbar while its top edge is within 12 of
   the status bar, so the bottom carries a full fade and the top only needs to
   close at the very edge. Both must end fully opaque or the seam returns. */
@media screen and (max-width: 767px) {
  body:before,
  body:after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 1;
  }

  body:before {
    top: 0;
    height: 17%;
    background-image: linear-gradient(0deg, #4e556600 0%, #4e556633 58%, #4e55669e 85%, #4e5566 100%);
  }

  body:after {
    bottom: 0;
    height: 26%;
    background-image: linear-gradient(180deg, #4e556600 0%, #4e556673 58%, #4e5566d9 84%, #4e5566 100%);
  }
}


.image {
  margin: auto;
  padding-left: 60px;
  padding-right: 60px;
}

.link {
  color: #fff;
}

@media screen and (max-width: 991px) {
  .subtitle {
    font-size: 150%;
  }

  .header-section {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .container {
    padding-left: 79px;
    padding-right: 79px;
  }
}

@media screen and (max-width: 767px) {
  .subtitle {
    font-size: 175%;
  }

  .sign-up-form {
    margin-bottom: 0;
  }

  .header-section {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: 0;
    padding-bottom: 0;
  }

  .footer-section {
    padding-top: 26px;
    padding-bottom: 26px;
  }

  .container {
    padding-left: 11px;
    padding-right: 11px;
  }
}

@media screen and (max-width: 479px) {
  .button {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    width: 100%;
  }

  .subtitle {
    padding-left: 0;
    padding-right: 0;
    font-size: 125%;
  }

  .field {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    width: 100%;
  }

  .social-widget {
    width: 96px;
  }

  .header-section {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: 0;
    padding-bottom: 0;
    overflow: visible;
  }

  .copyright {
    text-align: center;
    margin-bottom: 7px;
  }

  .align-right {
    text-align: center;
  }
}