/* ============================================================
 * CTA primitive — final section tile with pulse-on-scroll-into-view.
 * Uses `.cta-section` (NOT `.section`) — slightly different sizing
 * because the footer lives inside.
 * Engine.js adds `.in-view` when the section enters viewport.
 * ============================================================ */

.cta-section {
  position: relative;
  background: var(--jaz-bg-deep);
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  padding: 80px 16px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cta-tile {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  background: var(--jaz-bg);
  border: 1px solid var(--bg-lines);
  border-radius: 8px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.cta-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
}

.cta-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--muted);
}

.cta-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.cta-headline .switch-in {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(64px, 9vw, 130px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--white);
}

/* Slab is themeable — define in your LP's stylesheet for brand-specific gradient */
.cta-headline .slab {
  background: var(--jaz-gradient);
  /* side padding in em so the box hugs the text proportionally at every size
   * (fixed px looked huge once the font hit its small-screen floor). */
  padding: 20px 0.25em 16px;
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(64px, 9vw, 130px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--white);
  white-space: pre;
  word-spacing: 0.14em;
}

.cta-sub {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: normal;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
  max-width: 760px;
  margin-bottom: 48px;
}

/* .cta-button rules live in primitives/button.css (shared with .back-cta-btn). */

.cta-foot {
  margin-top: 18px;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--faint);
}

/* Pulse-on-scroll-into-view (single zoom). Keyframe defined here (not in
 * video-card.css) so a CTA-only LP doesn't need to load the video module. */
@keyframes cta-zoom-once {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}
.cta-section.in-view .cta-button {
  animation: cta-zoom-once 1400ms cubic-bezier(0.45, 0, 0.55, 1) 350ms 1 both;
}

@media (max-width: 900px) {
  .cta-section { padding: 64px 16px 0; height: 100lvh; }
  .cta-tile { padding: 28px 20px; }
  .cta-eyebrow { font-size: 12px; letter-spacing: 2.2px; margin-bottom: 24px; }
  .cta-headline .switch-in, .cta-headline .slab {
    font-size: clamp(48px, 13vw, 96px);
    letter-spacing: -3.2px;
  }
  .cta-headline .slab { padding: 6px 0.25em; }
  .cta-sub { font-size: 15px; letter-spacing: 1.5px; margin-bottom: 32px; }
  /* .cta-button mobile sizing in button.css */
  .cta-foot { font-size: 10px; letter-spacing: 1.4px; }
}