/* ===========================================================
   buttons.css: one hover behavior for every solid button (brief 40, A1; acceptance W-16).
   The .sa .btn behavior, everywhere: the fill and the label keep their colors on hover, and the 1px offset
   frame slides in from 6px down and right. Loaded last on every page (head.php), so it wins over each
   family's own :hover rule. Ghost buttons (transparent, bordered) keep their own rules.
   Not here: .sa .btn and .wdh .wdh-btn (they already work this way), the Talk to us panel and the cookie
   banner (components with their own clipped panels).
   The frame is --gray-deep; on a dark band it is --line-muted (the .sa-dark rule).
   =========================================================== */
.cta-primary, .cs-cta, .faq-cta-btn, .nav-cta, .cta-btn-solid, .btn-primary, .co-close-btn, .wd-close-btn,
.dm-btn:not(.ghost), .dm-launch-btn, .vx .btn { position: relative; }

.cta-primary::after, .cs-cta::after, .faq-cta-btn::after, .nav-cta::after, .cta-btn-solid::after, .btn-primary::after,
.co-close-btn::after, .wd-close-btn::after, .dm-btn:not(.ghost)::after, .dm-launch-btn::after, .vx .btn::after {
  content: ''; position: absolute; inset: 0; top: 0; left: 0; right: 0; bottom: 0; z-index: auto;
  transform: translate(6px, 6px); border: 1px solid var(--gray-deep); pointer-events: none;
  transition: transform .3s var(--ease-out);
}
.dk :is(.cta-primary, .cs-cta, .faq-cta-btn, .cta-btn-solid, .btn-primary, .dm-btn, .dm-launch-btn, .btn)::after,
.dark :is(.cta-primary, .cs-cta, .faq-cta-btn, .cta-btn-solid, .btn-primary, .dm-btn, .dm-launch-btn, .btn)::after,
.sa-dark :is(.btn)::after,
.co-close-btn::after, .wd-close-btn::after, .dm-btn:not(.ghost)::after { border-color: var(--line-muted); }

.cta-primary:hover::after, .cs-cta:hover::after, .faq-cta-btn:hover::after, .nav-cta:hover::after, .cta-btn-solid:hover::after,
.btn-primary:hover::after, .co-close-btn:hover::after, .wd-close-btn:hover::after, .dm-btn:not(.ghost):hover::after,
.dm-launch-btn:hover::after, .vx .btn:not([disabled]):hover::after { transform: translate(0, 0); }

/* The fill and label stay as they are. Each line restores what its family's own :hover rule changed. */
.cta-primary:hover, .cs-cta:hover, .faq-cta-btn:hover { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }
.nav-cta:hover, .cta-btn-solid:hover { background: var(--gray-deep); border-color: var(--gray-deep); color: var(--paper); }
.btn-primary:hover { background: var(--orange); color: var(--on-orange); }
.co-close-btn:hover, .wd-close-btn:hover { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }
.dm-btn:not(.ghost):hover { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }
.dm-launch-btn:hover { background: var(--orange); border-color: var(--orange); }
.vx .btn:hover { background: var(--o); }

@media (prefers-reduced-motion: reduce) {
  .cta-primary::after, .cs-cta::after, .faq-cta-btn::after, .nav-cta::after, .cta-btn-solid::after, .btn-primary::after,
  .co-close-btn::after, .wd-close-btn::after, .dm-btn::after, .dm-launch-btn::after, .vx .btn::after { transition: none; }
}