.btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:600;font-size:16px;text-transform:uppercase;letter-spacing:.04em;padding:16px 32px;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:all .2s ease;line-height:1}
.btn-primary{background:var(--accent);color:var(--ink)}
.btn-primary:hover{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.btn-secondary{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-secondary:hover{background:var(--ink);color:#fff}
.btn-on-dark{background:var(--accent);color:var(--ink)}
.btn-on-dark:hover{background:#fff;color:var(--ink)}
.btn-sm{padding:10px 20px;font-size:14px}
.microcopy{font-size:14px;color:var(--muted);margin-top:12px}

/* Anchors used as buttons without an href are placeholders (e.g. a CTA that
   needs additional context like a selected plan before it can navigate).
   Suppress the hover state so they don't read as actionable. */
a.btn:not([href]){cursor:default}
a.btn:not([href]):hover{box-shadow:none;transform:none}
a.btn-primary:not([href]):hover{background:var(--accent);color:var(--ink)}
a.btn-secondary:not([href]):hover{background:transparent;color:var(--ink)}
a.btn-on-dark:not([href]):hover{background:var(--accent);color:var(--ink)}