/* X Gravity buttons. Same classes as xgravity.co.
   Needs the brand fonts loaded (Hanken Grotesk 600). */
:root {
  --ink: #14131f; --vio: #4b3fd1; --vio-700: #241d6b; --vio-100: #e5e2ff;
  --accent-deep: var(--vio);              /* the main action color */
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* On a Brand or Build page, the main action takes the lane's deep color. */
.lane-brand { --accent-deep: #c2412e; }
.lane-build { --accent-deep: #0b7d72; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px; font: 600 1rem/1.2 var(--body); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn:focus-visible { outline: 2px solid var(--vio); outline-offset: 3px; }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: .92rem; }

/* On paper */
.btn-accent { background: var(--accent-deep); color: #fff; }
.btn-accent:hover { background: color-mix(in oklab, var(--accent-deep) 80%, #000); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: #fff; }

/* On dark */
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--vio-100); }
.btn-ghost { border-color: rgba(255,255,255,.6); color: #fff; background: transparent; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.on-dark .btn-line { border-color: #fff; color: #fff; }
.on-dark .btn-line:hover { background: #fff; color: var(--ink); }
.on-dark .btn:focus-visible { outline-color: #fff; }

/* Arrow link: label plus a violet circle that slides on hover */
.arrow-link { display: inline-flex; align-items: center; gap: 12px; font: 600 1rem/1.2 var(--body); color: var(--ink); text-decoration: none; }
.arrow-link i { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-deep); display: grid; place-items: center; transition: transform .25s, background .25s; }
.arrow-link i svg { width: 16px; height: 16px; }
.arrow-link:hover i { transform: translateX(4px); background: color-mix(in oklab, var(--accent-deep) 80%, #000); }
.on-dark .arrow-link { color: #fff; }

@media (prefers-reduced-motion: reduce) { .btn, .arrow-link i { transition: none; } }