/* Shared action buttons, including the hosting CTA in every article. */
.btn.btn-primary,
.article-cta a.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  max-width: 100%;
  padding: 14px 24px;
  border: 1px solid #7952e8;
  border-radius: 12px;
  background: #6539d1;
  color: #fff;
  font: 600 16px/1.5 system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: 0 4px 12px rgba(74, 36, 159, .18);
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.article-cta a.btn::after { content: '→'; flex: 0 0 auto; font-size: 20px; }
.btn.btn-primary:hover,
.article-cta a.btn:hover { background: #5127b6; color: #fff; box-shadow: 0 6px 18px rgba(74, 36, 159, .26); }
.btn.btn-primary:active,
.article-cta a.btn:active { background: #45209e; box-shadow: none; }
.btn.btn-primary:focus-visible,
.article-cta a.btn:focus-visible { outline: 3px solid #a78bfa; outline-offset: 4px; }
.article-cta { box-sizing: border-box; padding: clamp(24px, 5vw, 40px); text-align: center; border-radius: 18px; }
.article-cta p { margin: 0 auto 24px; max-width: 54ch; line-height: 1.65; }
.article-cta h2, .article-cta h3 { margin: 0 0 12px; line-height: 1.35; }
@media (max-width: 600px) {
  .article-cta a.btn { width: 100%; padding: 14px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.btn-primary, .article-cta a.btn { transition: none; }
}