/* ============================================================================
   CTA SECTION COMPONENT

   Simple centered call-to-action block with headline, button, and
   optional trust line. Used as a final conversion push on a page.

   Required HTML Structure:

   <section class="cta-section">
     <div class="container">
       <h2 class="cta-section__title">Headline text here.</h2>
       <a href="#" class="cta-button">Button Text</a>
       <p class="trust-line">Optional trust text</p>
     </div>
   </section>

   Dependencies:
   - buttons.css (for .cta-button)
   - trust-line.css (for .trust-line, optional)

   Modifiers:
   - (none currently)
   ============================================================================ */

.cta-section {
  padding: var(--spacing-xl) 0 var(--spacing-xxl);
  text-align: center;
}

.cta-section__title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

/* ===== Responsive ===== */

@media (max-width: 768px) {
  .cta-section__title {
    font-size: 1.5rem;
  }
}