.cv-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 3rem;
  align-items: center;
  padding: 3rem;
  border-radius: 16px;
  background: #3D4247;
  color: #fff;
}
.cv-cta--gradient {
  background:
    radial-gradient(circle at 100% 100%, rgba(232, 185, 35, .22), transparent 45%),
    linear-gradient(135deg, #0A8890 0%, #3D4247 100%);
}
.cv-cta--no-media { grid-template-columns: minmax(0, 1fr); }
.cv-cta :is(h2, h3, p, .rte) { color: inherit; }

.cv-cta .cv-eyebrow {
  margin: 0 0 .75rem;
  font-family: var(--font-heading-family, Poppins, sans-serif);
  font-weight: 600;
  font-size: .75rem;
  line-height: 1.2;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .72);
}
.cv-cta__body,
.cv-cta__price { max-width: 52ch; font-size: 1rem; line-height: 1.65; color: rgba(255, 255, 255, .86); }
.cv-cta__body > :last-child { margin-bottom: 0; }
.cv-cta__price { margin: .75rem 0 0; }

.cv-cta__actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 1.625rem; }
/* Buttons use Flow's own .btn class, so size, radius, font, case, spacing and
   the theme's hover shimmer all come from Flow. The rules below only add the
   chosen colour, fill and text colour. Flow sets its button colours with
   !important, so these do too. */
.cv-cta a.btn.cv-btn { font-weight: 700; }

/* Colour tokens. Hover is one step brighter, matching Flow's buttons. */
.cv-btn--teal   { --cv-btn: #0A8890; --cv-btn-hover: #14A1AA; --cv-btn-tint: rgba(10, 136, 144, .16); }
.cv-btn--orange { --cv-btn: #E68718; --cv-btn-hover: #F29C35; --cv-btn-tint: rgba(230, 135, 24, .16); }
.cv-btn--white  { --cv-btn: #FFFFFF; --cv-btn-hover: #FFFFFF; --cv-btn-tint: rgba(255, 255, 255, .14); }
.cv-btn--gray   { --cv-btn: #8A8F93; --cv-btn-hover: #A2A7AB; --cv-btn-tint: rgba(138, 143, 147, .18); }

/* Solid */
.cv-cta a.btn.cv-btn--solid { background-color: var(--cv-btn) !important; }
.cv-cta a.btn.cv-btn--solid:hover { background-color: var(--cv-btn-hover) !important; }

/* Outline. An inset ring instead of a border, so outline and solid buttons are
   exactly the same size (Flow's .btn has border: 0). */
.cv-cta a.btn.cv-btn--outline {
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1.5px var(--cv-btn);
}
.cv-cta a.btn.cv-btn--outline:hover { background-color: var(--cv-btn-tint) !important; }

.cv-cta a.btn.cv-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(10, 136, 144, .28); }
.cv-cta a.btn.cv-btn--outline:focus-visible { box-shadow: inset 0 0 0 1.5px var(--cv-btn), 0 0 0 3px rgba(10, 136, 144, .28); }

/* Text colour */
.cv-cta a.btn.cv-btn--text-white,
.cv-cta a.btn.cv-btn--text-white:hover,
.cv-cta a.btn.cv-btn--text-white:visited {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF;
}
.cv-cta a.btn.cv-btn--text-dark,
.cv-cta a.btn.cv-btn--text-dark:hover,
.cv-cta a.btn.cv-btn--text-dark:visited {
  color: #3D4247 !important;
  -webkit-text-fill-color: #3D4247;
}

.cv-cta__media { border-radius: 10px; overflow: hidden; }
.cv-cta__img { display: block; width: 100%; height: auto; }

.cv-cta-note { margin: 1.5rem 0 0; font-size: .75rem; line-height: 1.7; opacity: .72; max-width: 100ch; }
.cv-cta-note > :last-child { margin-bottom: 0; }

@media screen and (max-width: 749px) {
  .cv-cta { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding: 1.5rem; }
  .cv-cta__media { order: -1; }
  .cv-cta a.btn.cv-btn { flex: 1 1 100%; }
}