.hero {
  color: var(--paragraph);
  position: relative;
}
.hero .background-image {
  width: 100%;
  height: auto;
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0 0 auto 0;
}
.hero .background-image :is(picture, picture img) {
  display: block;
  width: 100%;
  height: auto;
}
.hero .row {
  padding-block: var(--_padding-row);
  min-height: var(--_height-bg);
  align-items: center;
  position: relative;
}
.hero .txt-box :is(h1:not([class*="text-"]), .text-h1) {
  display: block;
  margin: 0 0 2.4rem;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.25em;
  text-transform: uppercase;
  color: var(--header-2);
}
.hero .txt-box :is(h1:not([class*="text-"]), .text-h1)::before {
  content: '— ';
  color: var(--red);
}
.hero .txt-box :is(h2:not([class*="text-"]), .text-h2) {
  font-weight: 300;
  font-size: 5.5rem;
  line-height: 1.09em;
  letter-spacing: -.07em;
  color: var(--header-2);
  margin: 0 0 1.2rem;
}
.hero .txt-box :is(h2:not([class*="text-"]), .text-h2) strong {
  font-weight: 500;
}
.hero .txt-box p {
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.625em;
  margin: 0 0 2.4rem;
  max-width: 58.1rem;
}
.hero .txt-box p strong {
  font-weight: 700;
}
/* section-title module rendered inside .txt-box (layout.php external mode):
   hero's own .txt-box typography above stays authoritative — these only
   neutralize the module/theme.css defaults that would otherwise leak. */
.hero .txt-box .section-title {
  max-width: none;
}
.hero .txt-box .section-title p:not(.text-h1) {
  margin: 0 0 2.4rem;
  color: inherit;
  letter-spacing: normal;
}
.hero .txt-box .section-title .text-h1 {
  letter-spacing: normal;
}
.hero .txt-box .bttns-wrapper {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.hero .image-box {
  pointer-events: none;
}
.hero .image-box .img-box {
  display: inline-block;
}
.hero .image-box :is(.backgroundIcons, .backgroundVideo) {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hero .image-box :is(.backgroundVideo,.multiply-image) {
  mix-blend-mode: multiply;
}
.hero .image-box :is(.backgroundIcons, .backgroundVideo) :is(video, img) {
  object-fit: contain;
  object-position: center bottom;
}
.hero .image-box .user {
  position: relative;
  z-index: 2;
}
.hero .image-box:has(.backgroundIcons, .backgroundVideo) .user {
  mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.hero .image-box .backgroundVideo {
  transition: opacity .5s;
}
.hero .centered-media {
  width: 100%;
  position: relative;
}
.hero .centered-media :is(.img-box, .video-box, .iframe-box) {
  border-radius: 2.4rem;
  height: auto;
  overflow: hidden;
  width: 100%;
}
.hero .centered-media :is(img, video) {
  display: block;
  height: auto;
  width: 100%;
}
.hero .centered-media .iframe-box {
  filter: drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.1));
}
.hero .centered-media iframe {
  display: block;
  width: 100%;
  height: 98rem;
  border: 0;
  background: var(--white);
}
.hero .centered-media .logo {
  background: var(--light-gray-1);
  border: 1px solid var(--light-gray-2);
  border-radius: 1rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: var(--_bottom);
  width: var(--_width);
  height: var(--_height);
  --_width: 10rem;
  --_height: 10rem;
  --_bottom: -5rem;
}
.hero .centered-media .logo img {
  object-fit: contain;
  width: 4rem;
  height: 4rem;
  filter: grayscale(1);
}
@media only screen and (min-width: 1024px) and (max-width: 1080px) {
  .hero .centered-media iframe {
    height: 125rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .hero .centered-media iframe {
    height: 164rem;
  }
}
@media only screen
and (min-width : 768px) {
  .hero {
    --_padding-row: 26.8rem 0;
    --_height-bg: 81.1rem;
  }

  .hero .row {
    align-items: start;
  }
  .download-app-hero .txt-box {
    max-width: 50%;
  }
  .hero .image-box {
    width: clamp(45%, 65rem, 50%);
    height: 52.6rem;
    position: absolute;
    top: calc(50% - 20.3rem);
    right: -6rem;
  }
  .hero .image-box :is(.backgroundIcons, .backgroundVideo) {
    width: 90%;
    height: 90%;
  }
  .hero .image-box .user {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .hero .centered-media {
    margin-top: 8rem;
  }
}
@media only screen
and (min-width : 0px)
and (max-width : 767px) {
  .hero {
    --_padding-row: 13.8rem 6.4rem;
    --_height-bg: 104.9rem;
  }
  .hero .txt-box {
    padding-inline: 5.7rem;
    text-align: center;
  }
  .hero .txt-box :is(h1:not([class*="text-"]), .text-h1) {
    font-size: 1.2rem;
  }
  .hero .txt-box :is(h2:not([class*="text-"]), .text-h2) {
    font-size: 4rem;
    line-height: 1.2em;
  }
  .hero .txt-box .bttns-wrapper {
    flex-direction: column;
  }
  .hero .image-box {
    margin-top: 3rem;
  }
  .hero .centered-media {
    margin-top: 4rem;
    padding-inline: 3rem;
  }
  .hero .centered-media iframe {
    height: 100rem;
  }
  .hero .centered-media .logo {
    --_width: 5rem;
    --_height: 5rem;
    --_bottom: -2.5rem;
  }
  .hero .centered-media .logo img {
    width: 2rem;
    height: 2rem;
  }
}