/* ═══════════════════════════════════════════════════
   LivePlant — Final CTA Section (Site-Wide Template)
   Self-contained, component-scoped CSS.
   Loaded site-wide via Elementor Custom Code.

   All shared utilities (.lp-button, .lp-title, etc.)
   are scoped under .lp-final-cta to prevent leaking
   into nav, header, or other global components.
   ═══════════════════════════════════════════════════ */

/* ─── Design Tokens (subset needed by CTA) ─── */
:root {
  --lp-color-ink: #0f172a;
  --lp-color-muted: #475569;
  --lp-color-hero-a: #5ec29e;
  --lp-color-hero-b: #43a882;
  --lp-color-hero-c: #2d7a5d;
  --lp-shell-narrow: 48rem;
}

/* ─── CTA Section ─── */
.lp-final-cta {
  padding-block: 5rem;
  background: linear-gradient(
    135deg,
    var(--lp-color-hero-a) 0%,
    var(--lp-color-hero-b) 50%,
    var(--lp-color-hero-c) 100%
  );
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lp-final-cta__content {
  text-align: center;
  color: #ffffff;
}

/* ─── Layout (scoped) ─── */
.lp-final-cta .lp-shell--narrow {
  width: min(calc(100% - 3rem), var(--lp-shell-narrow));
  margin-inline: auto;
}

/* ─── Typography (scoped) ─── */
.lp-final-cta .lp-title {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #ffffff;
}

.lp-final-cta .lp-title--hero {
  font-size: clamp(3rem, 7vw, 4.5rem);
  line-height: 1.02;
}

.lp-final-cta__copy {
  width: min(100%, 36rem);
  margin: 1.5rem auto 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.625;
  font-size: 1.125rem;
}

/* ─── Button (scoped) ─── */
.lp-final-cta .lp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  padding: 1rem 2rem;
  background: #ffffff;
  color: var(--lp-color-ink);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.lp-final-cta .lp-button:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.92);
}

.lp-final-cta .lp-button__icon {
  width: 1.25rem;
  height: 1.25rem;
}

.lp-final-cta__button {
  margin-top: 2.5rem;
}

.lp-final-cta__note {
  margin: 1.5rem 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
}

/* ─── Responsive ─── */
@media (max-width: 48rem) {
  .lp-final-cta {
    padding-block: 4rem;
  }

  .lp-final-cta__copy {
    font-size: 1rem;
  }
}

@media (max-width: 30rem) {
  .lp-final-cta {
    padding-block: 3rem;
  }
}