/* ============================================================
   Shared button stylesheet — single source of truth.

   ONE class for the filled black brand CTA: .btn-primary
   Used on:
     - homepage hero ("Book a demo")
     - subpage cta-sections ("Talk to us", "Get in touch")

   Behaviour rule, applied identically EVERYWHERE the class is used:
     • box stays completely static on hover (no scale, no lift,
       no shadow drift, no gap-expand)
     • only the arrow translates +3px right via transform —
       layout-free, so the arrow drifts toward the button's
       right edge without growing the box

   If a new black CTA appears anywhere on the site, give it the
   .btn-primary class. Do NOT redefine its hover behaviour locally.
   ============================================================ */

.btn-primary {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 17px 28px;
  border-radius: 14px;
  text-decoration: none;
  background: var(--ink);
  color: var(--bg);
  border: none;
  font-family: var(--mono); font-weight: 500;
  font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-primary:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}
.btn-primary .arr {
  font-size: 14px; line-height: 1; letter-spacing: 0;
  transition: transform .15s ease;
}
.btn-primary:hover .arr { transform: translateX(3px); }

/* Dark-section variant — inverse fill so the button doesn't
   disappear over a dark background. Only the colour swaps; the
   geometry + hover behaviour are unchanged. */
.vp-section.dark .btn-primary {
  background: var(--cream);
  color: var(--bg-dark);
}
.vp-section.dark .btn-primary:focus-visible {
  outline: 2px solid var(--cream); outline-offset: 3px;
}

/* Mobile — slightly more generous tap target. Natural-width
   stays so the button reads consistently across contexts (a lone
   button in a cta-section vs. a button in a row with a sibling). */
@media (max-width: 767px) {
  .btn-primary {
    padding: 16px 24px;
    font-size: 11.5px;
    min-height: 52px;
  }
}