/* ══════════════════════════════════════════════════════════════
   PI2AI shared primary CTA button — canonical styling for the main
   gradient "Book a Discovery Call" / "Start a Discovery" style action
   button, wherever it appears (hero, pre-footer CTA, division cards,
   case studies, 404/thank-you, AI product pages).

   The original audit found this button re-declared under ~10
   different class names with drifting padding (11px 24px / 13px 26px
   / 13px 32px / 13px 28px) and font-size. This file gives them one
   shared definition instead. Existing class names in the HTML are
   untouched — only the CSS they resolve to is unified — so no markup
   changes were needed.

   Loads late (after each page's own <style> block, alongside
   nav.css/footer.css) so it wins the cascade without requiring every
   old per-page declaration to be hunted down and deleted.

   Out of scope for this pass: secondary/outline/ghost button variants
   and small inline links (.article-read, .btn-view-more, etc.) —
   those have legitimate contextual differences (dark vs light
   background, size) that need individual review, not a blanket rule.
   ══════════════════════════════════════════════════════════════ */

.btn-main,
.btn-cta,
.cs-cta-btn-primary,
.nf-btn-primary,
.ty-btn-primary,
.btn-precta-primary,
.btn-pi-secondary,
.div-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 100px;
  background: linear-gradient(135deg, #9368b7, #3d3fbf);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(61, 63, 191, 0.25);
  transition: all 0.25s;
}
.btn-main:hover,
.btn-cta:hover,
.cs-cta-btn-primary:hover,
.nf-btn-primary:hover,
.ty-btn-primary:hover,
.btn-precta-primary:hover,
.btn-pi-secondary:hover,
.div-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(147, 104, 183, 0.35),
    0 2px 8px rgba(61, 63, 191, 0.25);
}

/* Known broken outlier from the audit: this one used border-radius:
   24px instead of a pill — normalize it. */
.btn-precta-secondary {
  border-radius: 100px;
}

@media (max-width: 480px) {
  .btn-main,
  .btn-cta,
  .cs-cta-btn-primary,
  .nf-btn-primary,
  .ty-btn-primary,
  .btn-precta-primary,
  .btn-pi-secondary,
  .div-cta {
    padding: 12px 22px;
    font-size: 14px;
  }
}