[data-cutout] {
  position: relative;
  isolation: isolate;
}

.feature-card[data-cutout], .api-mini[data-cutout], .how-card[data-cutout] {
  background: transparent;
  padding: 88px 26px 30px;
  border-radius: 0;
}
.feature-card[data-cutout]::before, .api-mini[data-cutout]::before, .how-card[data-cutout]::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 20px;
  background: #f7f4fd;
  clip-path: var(--cutout-path);
  z-index: -1;
}
.feature-card[data-cutout] .feature-icon, .feature-card[data-cutout] .api-mini-icon, .feature-card[data-cutout] .how-icon, .api-mini[data-cutout] .feature-icon, .api-mini[data-cutout] .api-mini-icon, .api-mini[data-cutout] .how-icon, .how-card[data-cutout] .feature-icon, .how-card[data-cutout] .api-mini-icon, .how-card[data-cutout] .how-icon {
  top: 0;
  right: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.testi-wrap[data-cutout] {
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.testi-wrap[data-cutout]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f7f4fd;
  border-radius: 20px;
  clip-path: var(--cutout-path);
  z-index: -1;
}
.testi-wrap[data-cutout] .testi-card {
  background: transparent;
  padding: 26px 26px 18px;
  height: auto;
  flex: 1;
}
.testi-wrap[data-cutout] .testi-card::after {
  display: none;
}
.testi-wrap[data-cutout] .testi-user {
  min-height: 66px;
  margin: 0;
  padding: 0 20px 12px 82px;
}
.testi-wrap[data-cutout] .testi-avatar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 52px;
  box-shadow: none;
}

.ec-footer-card[data-cutout] {
  background: transparent;
  overflow: visible;
}
.ec-footer-card[data-cutout]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: var(--footer-background, #e7def8);
  clip-path: var(--cutout-path);
  z-index: -1;
}
.ec-footer-card[data-cutout] .ec-pay-tab {
  left: auto;
  right: 0;
  bottom: 0;
  padding: 12px 0 0 12px;
  background: transparent;
  border-radius: 0;
}

.pin-card[data-cutout] {
  background: transparent;
}
.pin-card[data-cutout]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f7f4fd;
  border-radius: 24px;
  clip-path: var(--cutout-path);
  z-index: -1;
}

.hero-card[data-cutout] {
  background: transparent;
  overflow: visible;
}
.hero-card[data-cutout] .hero-media {
  position: absolute;
  inset: 0;
  background: #cfc9e6;
  border-radius: 24px;
  overflow: hidden;
  clip-path: var(--cutout-path);
}
.hero-card[data-cutout] .hero-mini {
  right: 0;
  bottom: 0;
  box-shadow: none;
}

@media (max-width: 991px) {
  .hero-card[data-cutout] {
    padding-top: 80px;
  }
  .hero-card[data-cutout] .hero-hand {
    position: absolute;
    top: 20px;
    top: auto;
    bottom: inherit;
    left: 5%;
    height: 320px;
    max-width: 90%;
  }
  .hero-card[data-cutout] .hero-content {
    padding-bottom: 270px;
  }
  .hero-card[data-cutout] .hero-mini {
    position: absolute;
    width: 168px;
    margin: 0;
  }
}
@media (max-width: 991px) {
  .hero-card[data-cutout] {
    padding-top: 80px;
  }
  .hero-card[data-cutout] .hero-hand {
    position: absolute;
    bottom: 1;
    left: 0%;
    height: 320px;
    max-width: 62%;
  }
  .hero-card[data-cutout] .hero-content {
    padding-bottom: 270px;
  }
  .hero-card[data-cutout] .hero-mini {
    position: absolute;
    width: 168px;
    margin: 0;
  }
}