/* Shared textile CTA surfaces; each page keeps its existing button layout. */
:root :is(.btn, .nav-cta, .cta-btn, .store, .store-badge-link) {
  --button-art: url("/assets/img/metric-revenue.jpg");
  --button-shade: linear-gradient(135deg, rgba(113,51,187,.82), rgba(77,31,132,.88));
  --button-edge: #452267;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 14px;
  background: var(--button-shade), var(--button-art) center / cover;
  color: #fff;
  font-family: var(--sans);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.16), 0 4px 0 var(--button-edge), 0 9px 18px rgba(40,22,52,.22);
  transition: transform 160ms var(--ease, ease), box-shadow 160ms var(--ease, ease);
}
:root :is(.btn--ink, .btn--ghost, .store, .store-badge-link) {
  --button-art: url("/assets/img/metric-orders.jpg");
  --button-shade: linear-gradient(135deg, rgba(35,29,27,.78), rgba(22,20,22,.9));
  --button-edge: #242024;
}
:root :is(.btn--nav, .nav-cta) {
  --button-art: url("/assets/img/metric-customers.jpg");
  --button-shade: linear-gradient(135deg, rgba(10,63,46,.74), rgba(10,43,34,.82));
  --button-edge: #17392D;
}
:root :is(.btn, .nav-cta, .cta-btn)::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(255,255,255,.3);
  border-radius: 9px;
  opacity: .65;
  transform: none;
  pointer-events: none;
}
:root .store-badge-link { display: inline-flex; padding: 4px; }
:root :is(.btn, .nav-cta, .cta-btn, .store, .store-badge-link):focus-visible {
  outline: 3px solid #A855F7;
  outline-offset: 5px;
}
@media (hover: hover) and (pointer: fine) {
  :root :is(.btn, .nav-cta, .cta-btn, .store, .store-badge-link):hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.16), 0 6px 0 var(--button-edge), 0 13px 22px rgba(40,22,52,.26);
  }
}
:root :is(.btn, .nav-cta, .cta-btn, .store, .store-badge-link):active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2), 0 1px 0 var(--button-edge), 0 3px 8px rgba(40,22,52,.18);
}
@media (prefers-reduced-motion: reduce) {
  :root :is(.btn, .nav-cta, .cta-btn, .store, .store-badge-link) { transition: none; }
  :root :is(.btn, .nav-cta, .cta-btn, .store, .store-badge-link):is(:hover, :active) { transform: none; }
}