.clipo-ecosystem {
  position: relative;
  z-index: 3;
  isolation: isolate;
  width: 1728px;
  height: 2808px;
  overflow: hidden;
  background: var(--clipo-paper, #f7f7f6);
  color: var(--clipo-ink, #131313);
}

.clipo-ecosystem p { margin: 0; }

.clipo-ecosystem__copy {
  position: absolute;
  z-index: 3;
  top: 200px;
  color: var(--clipo-muted, #858585);
  font-family: var(--font-clipo-font-display, Ronzino, Arial, sans-serif);
  font-size: 31px;
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.93px;
}

.clipo-ecosystem__copy--prompt { left: 16px; width: 269px; }
.clipo-ecosystem__copy--description { left: 1300px; width: 412px; text-align: right; }

.clipo-ecosystem__title {
  position: absolute;
  z-index: 3;
  color: var(--clipo-ink, #131313);
  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-ecosystem__title--see { left: 301px; top: 200px; width: 412px; }
.clipo-ecosystem__title--send { left: 444px; top: 332px; width: 983px; }
.clipo-ecosystem__title--then { left: 16px; top: 475px; width: 713px; }
.clipo-ecosystem__title--make { left: 729px; top: 464px; width: 585px; }
.clipo-ecosystem__title-accent { color: var(--clipo-line, #cacac9); }

.clipo-ecosystem__intro-heading-mask {
  position: absolute;
  z-index: 3;
  top: 144px;
  left: 0;
  width: 1728px;
  height: 494px;
  overflow: hidden;
  pointer-events: none;
}

.clipo-ecosystem__intro-heading-mask .clipo-ecosystem__title {
  top: calc(var(--ecosystem-title-top) - 144px);
  will-change: transform;
}

.clipo-ecosystem__intro-heading-mask .clipo-ecosystem__title--see { --ecosystem-title-top: 200px; }
.clipo-ecosystem__intro-heading-mask .clipo-ecosystem__title--send { --ecosystem-title-top: 332px; }
.clipo-ecosystem__intro-heading-mask .clipo-ecosystem__title--then { --ecosystem-title-top: 475px; }
.clipo-ecosystem__intro-heading-mask .clipo-ecosystem__title--make { --ecosystem-title-top: 464px; }

.clipo-ecosystem__title-word {
  display: inline-block;
  will-change: transform;
}

.clipo-ecosystem__copy.is-line-masked { white-space: normal; }

.clipo-ecosystem__copy-measure-word { display: inline; }

.clipo-ecosystem__copy-line-mask,
.clipo-ecosystem__copy-line {
  display: block;
  width: 100%;
}

.clipo-ecosystem__copy-line-mask { overflow: visible; }

.clipo-ecosystem__copy-line {
  white-space: nowrap;
  will-change: clip-path;
}

.clipo-ecosystem__marquee {
  position: absolute;
  z-index: 1;
  left: 0;
  display: block;
  width: 1728px;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.clipo-ecosystem__marquee--see { top: 574px; height: 1127px; }
.clipo-ecosystem__marquee--send { top: 1364px; height: 474px; }
.clipo-ecosystem__marquee--make { top: 1539px; height: 1167px; }
.clipo-ecosystem.is-enhanced > .clipo-ecosystem__marquee { display: none; }

.clipo-ecosystem__marquee-viewport {
  position: absolute;
  z-index: 2;
  left: 0;
  width: 1728px;
  pointer-events: none;
}

.clipo-ecosystem__marquee-viewport--see { top: 574px; height: 1127px; }
.clipo-ecosystem__marquee-viewport--send { top: 1364px; height: 474px; }
.clipo-ecosystem__marquee-viewport--make { top: 1539px; height: 1167px; }

.clipo-ecosystem__track {
  --ecosystem-track-scale: 1;
  position: absolute;
  left: 0;
  width: var(--track-width);
  height: 474px;
  overflow: hidden;
  border: 1px solid var(--track-stroke);
  background: var(--track-background);
  color: var(--track-color);
  transform: translate3d(var(--track-x, 0px), 0, 0) rotate(var(--track-angle, 0deg)) scale(var(--ecosystem-track-scale));
  transform-origin: left top;
  backface-visibility: hidden;
  will-change: transform;
}

.clipo-ecosystem__track--see {
  --track-width: 4720px;
  --track-background: #f7b7d4;
  --track-color: #2336f1;
  --track-stroke: #a07789;
  --track-angle: -8deg;
  top: 657px;
}

.clipo-ecosystem__track--send {
  --track-width: 4098px;
  --track-background: #2336f1;
  --track-color: #f4f6fe;
  --track-stroke: #f4f6fe;
  top: 0;
}

.clipo-ecosystem__track--make {
  --track-width: 5012px;
  --track-background: #131313;
  --track-color: #7a93f0;
  --track-stroke: #7a93f0;
  --track-angle: -8deg;
  top: 698px;
}

.clipo-ecosystem__svg,
.clipo-ecosystem__marquee-copy { position: absolute; }

.clipo-ecosystem__svg {
  display: block;
  max-width: none;
  object-fit: contain;
}

.clipo-ecosystem__marquee-copy {
  top: 76px;
  height: 322px;
  color: inherit;
}

.clipo-ecosystem__marquee-word {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: inherit;
  font-family: var(--font-clipo-font-poster, PhonkSansHeavy, Impact, sans-serif);
  font-size: 270px;
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -10.8px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.clipo-ecosystem__index {
  position: absolute;
  top: 227px;
  left: 0;
  display: flex;
}

.clipo-ecosystem__index span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 3px solid currentColor;
  border-radius: 50%;
  color: inherit;
  font-family: var(--font-clipo-font-display, Ronzino, Arial, sans-serif);
  font-size: 31px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.93px;
}

.clipo-ecosystem__marquee-symbol {
  position: absolute;
  top: 227px;
  color: inherit;
  font-family: var(--font-clipo-font-poster, PhonkSansHeavy, Impact, sans-serif);
  font-size: 53px;
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -1.06px;
  text-transform: uppercase;
  white-space: nowrap;
}

.clipo-ecosystem__marquee-description {
  position: absolute;
  top: 227px;
  color: inherit;
  font-family: var(--font-clipo-font-display, Ronzino, Arial, sans-serif);
  font-size: 53px;
  font-weight: 500;
  line-height: 0.84;
  letter-spacing: -1.06px;
}

.clipo-ecosystem__marquee-copy--see { width: 957px; }
.clipo-ecosystem__marquee-copy--see .clipo-ecosystem__marquee-word { left: 146.5px; width: 664px; }
.clipo-ecosystem__marquee-copy--see .clipo-ecosystem__marquee-description { left: 336px; width: 621px; white-space: nowrap; }
.clipo-ecosystem__marquee-copy--see .clipo-ecosystem__marquee-symbol { top: 275px; left: 101px; width: 856px; }

.clipo-ecosystem__marquee-copy--send { width: 939px; }
.clipo-ecosystem__marquee-copy--send .clipo-ecosystem__marquee-symbol { left: 96px; width: 356px; }
.clipo-ecosystem__marquee-copy--send .clipo-ecosystem__marquee-description { left: 452px; width: 487px; }

.clipo-ecosystem__marquee-copy--make { width: 1158px; }
.clipo-ecosystem__marquee-copy--make .clipo-ecosystem__marquee-symbol { left: 96px; width: 441px; }
.clipo-ecosystem__marquee-copy--make .clipo-ecosystem__marquee-description { left: 537px; width: 621px; }

@media (max-width: 768px) {
  .clipo-ecosystem {
    width: 390px;
    height: 878px;
  }

  .clipo-ecosystem__copy {
    top: 120px;
    font-size: 17px;
    line-height: 1.03;
    letter-spacing: -0.51px;
  }

  .clipo-ecosystem__copy--prompt {
    left: 16px;
    width: 358px;
  }

  .clipo-ecosystem__copy--description {
    top: 267px;
    left: 138px;
    width: 236px;
  }

  .clipo-ecosystem__title {
    font-size: 32px;
    line-height: 0.84;
    letter-spacing: -1.28px;
  }

  .clipo-ecosystem:not(.is-clipo-push-ready) .clipo-ecosystem__title {
    visibility: hidden;
  }

  .clipo-ecosystem__title--see {
    top: 162px;
    left: 77px;
    width: 236px;
  }

  .clipo-ecosystem__title--send {
    top: 189px;
    left: 138px;
    width: 175px;
  }

  .clipo-ecosystem__title--then {
    top: 216px;
    left: 16px;
    width: 175px;
  }

  .clipo-ecosystem__title--make {
    top: 216px;
    left: 199px;
    width: 120px;
  }

  .clipo-ecosystem__intro-heading-mask {
    top: 138px;
    width: 390px;
    height: 129px;
  }

  .clipo-ecosystem__intro-heading-mask .clipo-ecosystem__title {
    top: calc(var(--ecosystem-title-top) - 138px);
  }

  .clipo-ecosystem__intro-heading-mask .clipo-ecosystem__title--see { --ecosystem-title-top: 162px; }
  .clipo-ecosystem__intro-heading-mask .clipo-ecosystem__title--send { --ecosystem-title-top: 189px; }
  .clipo-ecosystem__intro-heading-mask .clipo-ecosystem__title--then { --ecosystem-title-top: 216px; }
  .clipo-ecosystem__intro-heading-mask .clipo-ecosystem__title--make { --ecosystem-title-top: 216px; }

  .clipo-ecosystem__marquee-viewport {
    width: 390px;
  }

  .clipo-ecosystem__marquee-viewport--see {
    top: 345px;
    height: 282px;
  }

  .clipo-ecosystem__marquee-viewport--send {
    top: 542.5px;
    height: 119px;
  }

  .clipo-ecosystem__marquee-viewport--make {
    top: 586px;
    height: 292px;
  }

  .clipo-ecosystem__track {
    --ecosystem-track-scale: 0.25;
  }

  .clipo-ecosystem__track--see { top: 164px; }
  .clipo-ecosystem__track--send { top: 0; }
  .clipo-ecosystem__track--make { top: 174.5px; }

}

@media not all {
  .clipo-ecosystem__track { will-change: auto; }
  .clipo-ecosystem__title-word,
  .clipo-ecosystem__intro-heading-mask .clipo-ecosystem__title,
  .clipo-ecosystem__copy-line { will-change: auto; }
}