/* CTA section — final call-to-action band */

.savvy-cta {
  background: var(--brand-primary);
  color: var(--text-on-dark);
}

.savvy-cta__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--container-padding);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.savvy-cta__copy h2 {
  font-size: var(--fs-2xl);
  color: var(--text-on-dark);
  margin: 0 0 var(--space-2);
}
.savvy-cta__copy p {
  margin: 0;
  opacity: 0.85;
}

.savvy-cta__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.savvy-cta__actions .btn--primary {
  background: var(--surface-base);
  color: var(--text-default);
}
.savvy-cta__actions .btn--primary:hover {
  background: var(--surface-alt);
}
.savvy-cta__actions .btn--secondary {
  border-color: var(--text-on-dark);
  color: var(--text-on-dark);
}
.savvy-cta__actions .btn--secondary:hover {
  background: var(--text-on-dark);
  color: var(--text-default);
}

/* Light variant — home page only (added via savvy-cta--light in the template).
   Keeps the dark band everywhere else; on home it reads white so the lower
   page isn't testimonials-black straight into footer-dark. Buttons flip to
   suit the light background. */
.savvy-cta--light {
  background: var(--surface-base);
  color: var(--text-default);
  border-top: 1px solid var(--border-default);
}
.savvy-cta--light .savvy-cta__copy h2 {
  color: var(--text-default);
}
.savvy-cta--light .savvy-cta__actions .btn--primary {
  background: var(--brand-primary);
  color: var(--text-on-dark);
}
.savvy-cta--light .savvy-cta__actions .btn--primary:hover {
  background: var(--brand-accent-hover);
}
.savvy-cta--light .savvy-cta__actions .btn--secondary {
  border-color: var(--brand-primary);
  color: var(--text-default);
}
.savvy-cta--light .savvy-cta__actions .btn--secondary:hover {
  background: var(--brand-primary);
  color: var(--text-on-dark);
}

/* Credential line below the CTAs — restates trust signals at the
   conversion moment without a separate section. Sits centered in a
   thin band, low-opacity, low-visual-weight. */
.savvy-cta__trust {
  list-style: none;
  margin: 0;
  padding: var(--space-4) var(--container-padding) var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.savvy-cta__trust li {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-uppercase);
  color: var(--text-on-dark);
  opacity: 0.65;
}