/* Kajabi cascade guard: preserve Deviant Audio typography inside the custom page. */
.cgtj h1,
.cgtj h1 *,
.cgtj h2,
.cgtj h2 *,
.cgtj .cgtj-tier__price > span {
  font-family: "Coanda", Impact, sans-serif !important;
}

.cgtj h3,
.cgtj h3 * {
  font-family: "Nexa", Arial, sans-serif !important;
}

/* Figma-exported, placement-specific gradient layers. */
.cgtj-gradient-positioned {
  position: absolute;
  z-index: 0;
  display: none;
  max-width: none;
  pointer-events: none;
  object-fit: fill;
}

@media (min-width: 981px) {
  .cgtj .cgtj-gradient-source {
    display: none !important;
  }

  .cgtj .cgtj-gradient-positioned {
    display: block;
  }

  .cgtj-gradient-positioned--hero {
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
  }

  .cgtj-gradient-positioned--problem {
    top: 0;
    right: 0;
    width: 99.38%;
    height: 100%;
  }

  .cgtj .cgtj-gradient-positioned--preview {
    display: none;
  }

  /* The video mock is opaque, so use the supplied full masked asset here to
     preserve the glow around its edges instead of hiding it underneath. */
  .cgtj .cgtj-preview__gradient.cgtj-gradient-source {
    display: block !important;
    top: -90px;
    right: auto;
    bottom: auto;
    left: 22%;
    width: 800px;
    height: 800px;
    max-width: none;
    object-fit: contain;
    z-index: 0;
  }

  .cgtj-gradient-positioned--instructor {
    top: 0;
    left: 0;
    width: 73.84%;
    height: 100%;
  }

  .cgtj-gradient-positioned--prereq {
    top: 0;
    right: 0;
    width: 94.88%;
    height: 100%;
  }

  .cgtj-gradient-positioned--final {
    top: 0;
    right: 0;
    width: 35.96%;
    height: 100%;
  }
}

/* Keep the original supplied source graphics for responsive compositions. */
@media (max-width: 980px) {
  .cgtj .cgtj-gradient-positioned {
    display: none !important;
  }

  .cgtj-hero__gradient {
    top: 30%;
    right: -30%;
    bottom: auto;
    left: auto;
    width: 120%;
    height: 80%;
    max-width: none;
    object-fit: contain;
  }

  .cgtj-instructor__gradient {
    top: -24%;
    right: auto;
    bottom: auto;
    left: 5%;
    width: 90%;
    height: auto;
    max-width: none;
    object-fit: contain;
  }
}