/* Marketing Ops design system — component CSS.
   Lifted verbatim from _ds_bundle.js (components/core/Button.jsx) so the static
   page renders the same buttons without loading the React bundle. */

.mo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border-radius: 9999px; font-family: var(--font-family-sans); font-weight: 500; border: none; cursor: pointer; transition: all 200ms var(--ease-in-out-smooth); text-decoration: none; }
.mo-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-orange); }
.mo-btn:disabled { pointer-events: none; opacity: 0.5; }
.mo-btn--primary { background: var(--color-orange); color: #fff; box-shadow: var(--shadow-sm); }
.mo-btn--primary:hover { background: var(--color-orange-dark); color: #fff; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.mo-btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.mo-btn--secondary { background: var(--color-navy); color: #fff; box-shadow: var(--shadow-sm); }
.mo-btn--secondary:hover { background: var(--color-navy-light); color: #fff; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.mo-btn--secondary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.mo-btn--outline { background: transparent; border: 1px solid rgb(27 42 74 / 0.25); color: var(--color-navy); }
.mo-btn--outline:hover { border-color: var(--color-navy); background: var(--color-navy); color: #fff; }
.mo-btn--ghost { background: transparent; color: var(--color-navy); }
.mo-btn--ghost:hover { background: var(--color-gray-100); }
.mo-btn--ghost:active { background: var(--color-gray-200); }
.mo-btn--link { background: transparent; color: var(--color-orange); padding: 0; height: auto; }
.mo-btn--link:hover { text-decoration: underline; text-underline-offset: 4px; color: var(--color-orange-dark); }
.mo-btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.mo-btn--md { height: 44px; padding: 0 24px; font-size: 16px; }
.mo-btn--lg { height: 52px; padding: 0 32px; font-size: 18px; }
.mo-btn--xl { height: 60px; padding: 0 40px; font-size: 20px; }
@media (prefers-reduced-motion: reduce) { .mo-btn, .mo-btn:hover, .mo-btn:active { transition: none; transform: none; } }