/* Buttons: solid violet (main action), outline (secondary), ghost (nav). btn-gold is the main-action class name. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 12px; font: inherit; font-weight: 700;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-lg { padding: 15px 30px; font-size: 17px; }
.btn-gold { background: var(--violet); color: var(--white); box-shadow: 0 10px 24px -12px rgba(124, 58, 237, .8); }
.btn-gold:hover { background: var(--violet-600); }
.btn-line { background: transparent; color: var(--violet-700); border-color: var(--lav-200); }
.btn-line:hover { border-color: var(--violet); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--lav-300); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
/* On the purple hero the buttons flip to white */
.hero .btn-gold { background: var(--white); color: var(--violet-700); box-shadow: 0 12px 28px -12px rgba(30, 27, 75, .55); }
.hero .btn-gold:hover { background: var(--lav-50); }
.hero .btn-line { color: var(--white); border-color: rgba(255, 255, 255, .55); }
.hero .btn-line:hover { border-color: var(--white); background: rgba(255, 255, 255, .08); }