/* BUTTONS — loaded last, no overrides */
button,
.btn,
a.btn,
a.cta,
.btn-white,
.btn-green,
a.btn-white,
a.btn-green,
.nav-cta,
a.nav-cta {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: 0 !important;
  border: none !important;
  outline: none !important;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s ease;
  font-family: 'DM Sans', system-ui, sans-serif;
  position: relative;
}

button::after,
.btn::after,
a.btn::after,
a.cta::after,
.btn-white::after,
.btn-green::after,
.nav-cta::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.4em;
  height: 0.4em;
  background: currentColor;
  align-self: center;
  transition: width 0.2s ease, height 0.2s ease;
}

button:hover::after,
.btn:hover::after,
a.btn:hover::after,
a.cta:hover::after,
.btn-white:hover::after,
.btn-green:hover::after,
a.btn-white:hover::after,
a.btn-green:hover::after,
.nav-cta:hover::after,
a.nav-cta:hover::after {
  width: 0.8em;
  height: 2px;
  animation: btn-line-spin 0.5s ease 0.2s forwards;
}

@keyframes btn-line-spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

/* White variant */
button.btn-white,
.btn-white {
  background: #ffffff;
  color: #1a1a2e;
}
button.btn-white:hover,
.btn-white:hover {
  background: #f0f0f0;
  color: #1a1a2e;
}

/* Green variant */
button.btn-green,
.btn-green {
  background: #a3c1ad;
  color: #1a1a2e;
}
button.btn-green:hover,
.btn-green:hover {
  background: #8fb39a;
  color: #1a1a2e;
}