@font-face {
  font-family: "Phonk";
  src: url("/uploads/fonts/Clipo/Phonk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.clipo-problem__reveal-copy {
  visibility: hidden;
  opacity: 0;
}

.clipo-hero-scroll-scene.has-problem-overlay {
  isolation: isolate;
  background: #d2d2d2;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-three-direct {
  z-index: 0;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-hero-scroll-track {
  z-index: 1;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-three-end-hold {
  position: relative;
  z-index: 1;
  width: 1728px;
  height: 0;
  pointer-events: none;
}


.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem-overlay-track {
  position: absolute;
  left: 0;
  top: var(--clipo-three-viewport-height, var(--instatic-logical-viewport-height, 100vh));
  bottom: 0;
  z-index: 3;
  width: 1728px;
  pointer-events: none;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem {
  position: sticky;
  left: 0;
  top: 0;
  bottom: auto;
  z-index: 3;
  width: 1728px;
  height: var(--clipo-three-viewport-height, var(--instatic-logical-viewport-height, 100vh));
  min-height: var(--clipo-three-viewport-height, var(--instatic-logical-viewport-height, 100vh));
  max-height: var(--clipo-three-viewport-height, var(--instatic-logical-viewport-height, 100vh));
  overflow: hidden;
  background: transparent;
  color: #f7f7f6;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__mask-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: clip-path;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__reveal-copy {
  position: absolute;
  z-index: 2;
  left: 16px;
  top: auto;
  bottom: 32px;
  width: 1696px;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  color: #131313;
  font-family: "Phonk", var(--font-clipo-font-poster, PhonkSansHeavy, Impact, sans-serif);
  font-size: var(--clipo-heading-l, 91px);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.04em;
  text-indent: 412px;
  text-transform: uppercase;
  white-space: normal;
  scale: var(--clipo-problem-copy-fit, 1);
  transform-origin: left bottom;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__reveal-copy.is-line-masked {
  text-indent: 0;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__measure-word {
  display: inline;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__reveal-line-mask {
  display: block;
  overflow: visible;
  width: 100%;
  height: 0.84em;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__reveal-line-mask.has-section-gap {
  margin-top: 0.84em;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__reveal-line {
  display: block;
  width: max-content;
  max-width: none;
  padding-right: 1em;
  white-space: nowrap;
  will-change: clip-path;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__headline {
  position: absolute;
  z-index: 1;
  margin: 0;
  color: inherit;
  font-family: var(--font-clipo-font-poster, PhonkSansHeavy, Impact, sans-serif);
  font-size: 157px;
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -6.28px;
  text-transform: uppercase;
  white-space: nowrap;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__headline--you {
  left: 16px;
  /* Authored spacing scales with the stage width, never viewport height. */
  top: 38px;
  width: 840px;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__headline--save {
  left: 159px;
  /* 131.88px line box + 6.036px gap (60% of the previous 10.06px). */
  top: 175.916px;
  width: 570px;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__headline--down {
  left: 16px;
  top: 313.832px;
  display: flex;
  align-items: center;
  width: 570px;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__down-arrow {
  display: block;
  flex: 0 0 1.02em;
  width: 1.02em;
  height: 0.84em;
  overflow: hidden;
  contain: paint;
  opacity: 0.5;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__down-arrow-track {
  display: block;
  width: 100%;
  height: 1.92em;
  transform: translateY(-50%);
  will-change: transform;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__down-arrow-glyph {
  display: flex;
  align-items: center;
  width: 100%;
  height: 0.96em;
  line-height: 0.84em;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__down-it {
  margin-left: 0.45em;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__headline--then {
  left: 1157px;
  /* Same compact row spacing, with the last row still anchored to the bottom. */
  top: calc(100% - 463.832px);
  width: 555px;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__headline--lost {
  left: 872px;
  top: calc(100% - 325.916px);
  width: 840px;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__headline--question {
  left: 1157px;
  top: calc(100% - 188px);
  display: flex;
  align-items: center;
  width: 555px;
  opacity: 0.5;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__right-arrow {
  display: block;
  flex: 0 0 1.15em;
  width: 1.15em;
  height: 0.84em;
  overflow: hidden;
  contain: paint;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__right-arrow-track {
  display: flex;
  width: 2.56em;
  height: 0.84em;
  transform: translateX(-50%);
  will-change: transform;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__right-arrow-glyph {
  display: flex;
  flex: 0 0 1.28em;
  align-items: center;
  height: 0.84em;
  line-height: 0.84em;
}

.clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__question-mark {
  margin-left: 0.1em;
}

@media (max-width: 768px) {
  .clipo-hero-scroll-scene.has-problem-overlay .clipo-three-end-hold {
    width: 768px;
    height: 0;
  }

  .clipo-hero-scroll-scene.has-problem-overlay .clipo-problem {
    width: 768px;
  }

  .clipo-hero-scroll-scene.has-problem-overlay .clipo-problem-overlay-track {
    width: 768px;
  }

  .clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__headline {
    font-size: 69.78px;
    letter-spacing: -2.79px;
  }

  .clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__reveal-copy {
    left: 7px;
    top: 30px;
    bottom: auto;
    scale: 1;
    width: 500px;
    font-size: 40.44px;
    letter-spacing: -1.62px;
    text-indent: 183px;
  }

  .clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__headline--you,
  .clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__headline--down {
    left: 7px;
  }

  .clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__headline--you,
  .clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__headline--lost {
    width: 373px;
  }

  .clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__headline--save {
    left: 71px;
    width: 253px;
  }

  .clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__headline--down {
    width: 253px;
  }

  .clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__headline--then,
  .clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__headline--question {
    left: 514px;
    width: 247px;
  }

  .clipo-hero-scroll-scene.has-problem-overlay .clipo-problem__headline--lost {
    left: 388px;
  }
}