/* ScrollX blog pagination fix - 2026-08-01
   Keeps /blog/ pagination as one compact centered row. */
.sx-content-grid > .sx-pagination,
.sx-pagination,
.navigation.pagination .nav-links {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  grid-column: 1 / -1 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 3.5rem auto 0 !important;
}

.sx-pagination .page-numbers,
.navigation.pagination .page-numbers {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: max-content !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0.55rem 0.9rem !important;
  border: 1px solid var(--sx-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: var(--sx-dim) !important;
  font-size: 0.94rem !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.sx-pagination .page-numbers.current,
.navigation.pagination .page-numbers.current {
  background: rgba(124, 92, 255, 0.24) !important;
  border-color: rgba(124, 92, 255, 0.72) !important;
  color: var(--sx-ink) !important;
}

.sx-pagination .page-numbers.prev,
.sx-pagination .page-numbers.next,
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next {
  width: auto !important;
  min-width: 92px !important;
}

/* ScrollX primary CTA color alignment - 2026-08-01
   Matches the violet CTA tone shown in the homepage reference. */
a[href="https://app.scrollx.io/signup"],
a[href="https://app.scrollx.io/signup/"],
.sx-link-button:not(.sx-link-button--ghost),
.sx-contact-nav-button--primary {
  background-color: #7c5cff !important;
  background-image: linear-gradient(135deg, #7c5cff 0%, #8b6dff 100%) !important;
  border-color: rgba(124, 92, 255, 0.42) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(124, 92, 255, 0.24) !important;
}

a[href="https://app.scrollx.io/signup"]:hover,
a[href="https://app.scrollx.io/signup/"]:hover,
.sx-link-button:not(.sx-link-button--ghost):hover,
.sx-contact-nav-button--primary:hover {
  background-color: #9d7dff !important;
  background-image: linear-gradient(135deg, #8b6dff 0%, #9d7dff 100%) !important;
  border-color: rgba(157, 125, 255, 0.64) !important;
  color: #fff !important;
  box-shadow: 0 10px 32px rgba(124, 92, 255, 0.36) !important;
  transform: translateY(-1px) !important;
}