.zt-section-frame {
  position: relative;
  margin: clamp(64px, 7vw, 80px) 15px 0;
  padding: 5px !important;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--color-primary-1), var(--color-primary-3)) !important;
  overflow: hidden;
}

.zt-section-frame::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: min(500px, 84vw);
  height: min(500px, 84vw);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary-3) 20%, transparent);
  filter: blur(100px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.zt-section-frame > .zaritop-hero-container,
.zt-section-frame > .zaritop-apps-container,
.zt-section-frame > .zaritop-pricing-container {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: none;
  margin-inline: 0;
  padding: clamp(80px, 8vw, 130px) clamp(15px, 4vw, 30px);
  border-radius: inherit;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--color-primary-2) 10%, transparent), transparent 34%),
    linear-gradient(color-mix(in srgb, var(--color-white) 3%, transparent), transparent),
    var(--color-default-950, var(--color-ink));
}

.zt-section-frame > .zaritop-hero-container::before,
.zt-section-frame > .zaritop-hero-container::after,
.zt-section-frame > .zaritop-apps-container::before,
.zt-section-frame > .zaritop-apps-container::after,
.zt-section-frame > .zaritop-pricing-container::before,
.zt-section-frame > .zaritop-pricing-container::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset-inline-start: -7px;
  pointer-events: none;
  transform: rotate(-60deg);
}

.zt-section-frame > .zaritop-hero-container::before,
.zt-section-frame > .zaritop-apps-container::before,
.zt-section-frame > .zaritop-pricing-container::before {
  top: -100px;
  width: 100px;
  height: 300px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--color-primary-3), var(--color-primary-1));
  filter: blur(50px);
}

.zt-section-frame > .zaritop-hero-container::after,
.zt-section-frame > .zaritop-apps-container::after,
.zt-section-frame > .zaritop-pricing-container::after {
  top: -80px;
  width: 400px;
  height: 500px;
  background: linear-gradient(180deg, var(--color-primary-1), var(--color-primary-3));
  filter: blur(80px);
  opacity: .1;
}

.zt-section-frame :is(
  .zaritop-problem-heading,
  .zaritop-apps-heading,
  .zaritop-pricing-heading,
  .zaritop-pricing-cross-title,
  .zaritop-pricing-cta-title
) {
  color: var(--color-white);
}

.zt-section-frame :is(
  .zaritop-problem-description,
  .zaritop-problem-benefits li,
  .zaritop-apps-intro,
  .zaritop-apps-cta-copy,
  .zaritop-apps-link-note,
  .zaritop-pricing-intro,
  .zaritop-pricing-note
) {
  color: color-mix(in srgb, var(--color-white) 70%, transparent);
}

.zt-section-frame :is(.zaritop-problem-badge, .zaritop-apps-eyebrow, .zaritop-pricing-eyebrow) {
  color: var(--color-white);
}

.zt-section-frame .zaritop-problem-badge {
  border-color: color-mix(in srgb, var(--color-white) 14%, transparent);
  background: color-mix(in srgb, var(--color-white) 7%, transparent);
}

.zt-section-frame .zaritop-problem-badge-solution {
  border-color: color-mix(in srgb, var(--color-primary-1) 32%, transparent);
}

.zt-section-frame .zaritop-problem-plus {
  color: color-mix(in srgb, var(--color-white) 58%, transparent);
}

.zt-section-frame .zaritop-problem-arrow {
  stroke: var(--color-primary-2);
}

.zt-section-frame .zaritop-apps-cta,
.zt-section-frame .zaritop-pricing-cross {
  border-color: color-mix(in srgb, var(--color-primary-1) 34%, transparent);
  background: color-mix(in srgb, var(--color-white) 7%, transparent);
}

@media (min-width: 768px) {
  .zt-section-frame {
    margin-inline: 20px;
  }
}

@media (max-width: 767px) {
  .zt-section-frame {
    margin-inline: 15px;
  }

  .zt-section-frame > .zaritop-hero-container,
  .zt-section-frame > .zaritop-apps-container,
  .zt-section-frame > .zaritop-pricing-container {
    padding-block: clamp(64px, 12vw, 80px);
  }
}