/* ==========================================================================
   CTA panel shell only — heading/body/button content stays page-specific.
   Unconditionally dark regardless of site theme (matches the live site;
   see --cta-box-bg in tokens.css, which converges with the regular dark
   surface color when the site itself is in dark mode).
   Requires tokens.css + base.css + buttons.css.

   Approved final-CTA label exceptions (Phase 2 standards): why-borrowed-bi.html
   ("Talk through your reporting pain") and who-it-helps.html ("Ask if this is
   a fit") intentionally do not use "Schedule a call." Do not converge them.
   ========================================================================== */

.cta-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 42px;
  border-radius: var(--radius-panel);
  background: var(--cta-box-bg);
  border: 1px solid var(--border-color);
}

.cta-box h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.024em;
  color: var(--cta-box-heading-color);
}

.cta-box p {
  margin-top: 14px;
  color: var(--cta-box-body-color);
  font-size: 1.06rem;
  max-width: 720px;
}

@media (max-width: 640px) {
  .cta-box {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    text-align: left;
  }
}