/* ── Cribbar Creative — canonical buttons (single source of truth) ─────────────
   Solid fill, sweep via ::after pseudo-element (no gradient-seam risk).
   Loaded after each page's inline styles so this wins on the core button look,
   while page-specific contextual rules (width, min-width, margins) and
   light-section colour overrides (higher specificity) are preserved.        */

.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 28px; border-radius: 50px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: inherit; border: none;
  transition: color 0.35s, border-color 0.32s, box-shadow 0.22s, transform 0.2s;
  white-space: nowrap; text-decoration: none;
  background-image: none; background-size: auto; background-position: center;
}
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.42s var(--ease, cubic-bezier(.16,1,.3,1));
}
.btn:hover::after { transform: scaleX(1); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); }

.btn-green { background-color: var(--lime-dk); color: var(--navy); }
.btn-green::after { background-color: var(--lime); }
.btn-green:hover { background-position: center; box-shadow: 0 10px 28px rgba(158,255,62,.3); }

.btn-border { background-color: transparent; color: var(--text); border: 1.5px solid var(--line2); }
.btn-border::after { background-color: var(--lime); }
.btn-border:hover { background-position: center; color: var(--navy); border-color: var(--lime); }

.btn-ghost { background-color: rgba(255,255,255,0.08); color: #fff; border: 1.5px solid rgba(255,255,255,0.28); }
.btn-ghost::after { background-color: rgba(255,255,255,0.22); }
.btn-ghost:hover { background-position: center; border-color: rgba(255,255,255,0.55); }

.btn-navy { background-color: var(--navy); color: #fff; }
.btn-navy::after { background-color: #0e2439; }