.ca-gen-art {
  --ca-art-gold: #d0b270;
  --ca-art-white: #f4f4f1;
  --ca-art-blue: #8fb1d4;
  --ca-art-red: #a33a32;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: clamp(8rem, 10vw, 12.5rem);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(244, 244, 241, 0.075);
  background:
    linear-gradient(rgba(244, 244, 241, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 244, 241, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 58% 46%, rgba(208, 178, 112, 0.13), transparent 34%),
    #050607;
  background-size: 1.35rem 1.35rem, 1.35rem 1.35rem, 100% 100%, 100% 100%;
}

.ca-gen-art canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}

.ca-gen-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at var(--ca-art-glow-x, 58%) var(--ca-art-glow-y, 48%), rgba(208, 178, 112, 0.16), transparent 31%),
    linear-gradient(135deg, rgba(143, 177, 212, 0.055), transparent 36%, rgba(208, 178, 112, 0.045));
  opacity: 0.88;
  pointer-events: none;
}

.ca-gen-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), transparent 42%, rgba(0, 0, 0, 0.22));
  pointer-events: none;
}

.ca-gen-art i {
  display: none !important;
}

.product-card-visual.ca-gen-art,
.tile-diagram.ca-gen-art,
.dynamic-card__visual.ca-gen-art,
.demo-flow-step .ca-gen-art,
.aps-quality-grid > article .ca-gen-art {
  flex: 0 0 auto;
  transform: none;
}

.product-card-visual.ca-gen-art {
  margin-top: clamp(1.1rem, 1.55vw, 1.45rem);
}

.tile-diagram.ca-gen-art {
  position: absolute;
  inset: 0;
  min-height: 100%;
  border: 0;
  opacity: 0.92;
}

.tile-diagram.ca-gen-art::before {
  background:
    radial-gradient(circle at var(--ca-art-glow-x, 58%) var(--ca-art-glow-y, 48%), rgba(208, 178, 112, 0.17), transparent 36%),
    linear-gradient(135deg, rgba(143, 177, 212, 0.08), transparent 42%, rgba(208, 178, 112, 0.05));
}

.demo-flow-step .ca-gen-art,
.dynamic-card__visual.ca-gen-art,
.aps-quality-grid > article .ca-gen-art {
  position: relative;
  z-index: 2;
  order: 2;
  margin-top: clamp(0.9rem, 1.1vw, 1.15rem);
}

.aps-quality-grid > article .ca-gen-art {
  min-height: clamp(8.5rem, 10.5vw, 12.5rem);
}

.aps-quality-grid > article.has-ca-art {
  min-height: clamp(20rem, 25vw, 28rem);
  padding: clamp(1.35rem, 2.05vw, 2.2rem);
}

.aps-quality-grid--3 > article.has-ca-art {
  min-height: clamp(19rem, 23vw, 26rem);
}

.dynamic-card__visual.ca-gen-art {
  width: 100%;
  min-height: clamp(9rem, 12vw, 13rem);
  margin: 0 0 clamp(1rem, 1.35vw, 1.4rem);
}

.dynamic-card__visual.ca-gen-art > span {
  display: none !important;
}

.demo-flow-step.has-ca-art::before,
.demo-flow-step.has-ca-art::after,
.aps-quality-grid > article.has-ca-art::before,
.aps-quality-grid > article.has-ca-art::after {
  display: none;
}

.demo-flow-step.has-ca-art strong,
.aps-quality-grid > article.has-ca-art strong {
  position: relative;
  z-index: 2;
  order: 3;
  margin-top: clamp(1rem, 1.25vw, 1.35rem);
}

.aps-quality-grid > article.has-ca-art p,
.demo-flow-step.has-ca-art p {
  position: relative;
  z-index: 2;
  order: 4;
}

.aps-quality-grid > article.has-ca-art span,
.demo-flow-step.has-ca-art span {
  position: relative;
  z-index: 2;
  order: 1;
}

.demo-flow-step.has-ca-art {
  min-height: auto;
}

.ca-gen-art[data-ca-art="authority-grid"] {
  --ca-art-glow-x: 63%;
  --ca-art-glow-y: 38%;
}

.ca-gen-art[data-ca-art="narrative-constellation"],
.ca-gen-art[data-ca-art="influence-waves"] {
  --ca-art-blue: #8fb1d4;
  --ca-art-glow-x: 54%;
  --ca-art-glow-y: 48%;
}

.ca-gen-art[data-ca-art="review-priority-map"] {
  --ca-art-glow-x: 70%;
  --ca-art-glow-y: 42%;
}

.ca-gen-art[data-ca-art="decision-rings"],
.ca-gen-art[data-ca-art="trust-orbit"] {
  --ca-art-glow-x: 50%;
  --ca-art-glow-y: 50%;
}

.demo-signal-card .ca-gen-art {
  min-height: clamp(7.5rem, 8vw, 10rem);
  margin-bottom: clamp(1rem, 1.2vw, 1.25rem);
}

.product-card-visual.ca-gen-art,
.aps-quality-grid > article .ca-gen-art,
.demo-flow-step .ca-gen-art,
.demo-signal-card .ca-gen-art,
.dynamic-card__visual.ca-gen-art {
  contain: layout paint;
}

.demo-signal-card.has-ca-art > i {
  display: none;
}

@media (max-width: 700px) {
  .ca-gen-art {
    min-height: clamp(8.5rem, 36vw, 11.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ca-gen-art::before {
    opacity: 0.72;
  }
}