/* Keep page-specific CTA scenes at the same visual scale as the homepage CTA. */
.has-cta-art.closing,
.has-cta-art.action-band {
  padding-bottom: 130px;
}

.has-cta-art .cta-art-surface {
  position: relative;
  display: block;
  isolation: isolate;
  min-height: 330px;
  padding: 48px 52px;
  overflow: visible;
  border-radius: 17px;
  background: #0d3f88;
  color: #fff;
}

.has-cta-art .cta-art-copy {
  position: relative;
  z-index: 2;
  max-width: min(56%, 610px);
}

.has-cta-art .cta-art-copy > .button,
.has-cta-art .cta-art-copy > .closing-actions,
.has-cta-art .cta-art-copy > [style*="display:flex"] {
  margin-top: 22px;
}

.has-cta-art .closing-actions.cta-buttons-full {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  align-items: stretch;
}

.has-cta-art .closing-actions.cta-buttons-full > .button {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}

.has-cta-art .cta-illustration {
  position: absolute;
  z-index: 1;
  right: -1.7%;
  bottom: -90px;
  display: block;
  width: min(52.5%, 620px);
  height: 500px;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  user-select: none;
}

/* The training illustration is taller and needs more height to match other CTA scenes. */
.training-cta .cta-illustration {
  height: 575px;
}

.action-band.has-cta-art {
  padding-top: 80px;
  background: #fff;
}

.action-band.has-cta-art .cta-art-copy > .button {
  background: #fff;
  color: #0d3f88;
}

@media (max-width: 1100px) {
  .has-cta-art.closing,
  .has-cta-art.action-band {
    padding-bottom: 100px;
  }

  .has-cta-art .cta-art-surface {
    display: flow-root;
    min-height: 0;
    padding-bottom: 0;
  }

  .has-cta-art .cta-art-copy {
    max-width: none;
  }

  .has-cta-art .cta-illustration {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(70%, 465px);
    height: 360px;
    margin: -12px -2% -64px auto;
  }

  .training-cta .cta-illustration {
    height: 360px;
  }
}

@media (max-width: 700px) {
  .has-cta-art .closing-actions.cta-buttons-full {
    flex-direction: column;
  }

  .has-cta-art .closing-actions.cta-buttons-full > .button {
    flex: none;
    width: 100%;
  }

  .has-cta-art.closing,
  .has-cta-art.action-band {
    padding-bottom: 70px;
  }

  .has-cta-art .cta-art-surface {
    padding: 32px 22px 0;
  }

  .has-cta-art .cta-art-copy > .button,
  .has-cta-art .cta-art-copy > .closing-actions,
  .has-cta-art .cta-art-copy > [style*="display:flex"] {
    margin-top: 16px;
  }

  .has-cta-art .cta-illustration {
    width: min(100%, 340px);
    height: 280px;
    margin: 0 auto -48px;
    object-position: center bottom;
  }
}