:root {
  color-scheme: light;
  --green: #009326;
  --deep: #16343a;
  --muted: #98a5a1;
  --light: #f8fbfa;
}
.pill-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  min-width: 0;
  width: max-content;
  max-width: 100%;
  padding: 0 5px 0 18px;
  border-radius: 999px;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  color: #050708;
  transition:
    box-shadow var(--motion-interaction, 0.35s) ease,
    background-color var(--motion-interaction, 0.35s) ease,
    border-color var(--motion-interaction, 0.35s) ease;
}

/* §11 — unified link state colors so visit / hover / active / focus match
 * across the site. The base pill-link rule only declares hover / focus; the
 * stack below fills in visited (slightly darker text) and active (pressed
 * feedback) so every CTA reads the same regardless of which page it appears on. */
.pill-link:visited {
  color: inherit;
}

.pill-link:not(.green):not(.white):visited {
  color: #050708;
}

.pill-link:active,
.pill-link:focus-visible {
  outline: none;
}

.pill-link:active {
  transform: translateY(1px);
  box-shadow: 0 6px 14px rgba(0, 140, 17, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .pill-link,
  .pill-link::before,
  .pill-link i {
    transition: none !important;
  }
  .pill-link:active {
    transform: none;
  }
}

.pill-link::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -38%;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-18deg);
  transition: left var(--motion-slow, 0.55s) ease;
}

.pill-link > span,
.pill-link > i {
  position: relative;
  z-index: 1;
}

.pill-link:hover,
.pill-link:focus-visible {
  box-shadow: 0 12px 24px rgba(0, 147, 38, 0.18);
}

.pill-link:hover::before,
.pill-link:focus-visible::before {
  left: 104%;
}

.pill-link i {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  margin-left: 12px;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  text-align: center;
  transition:
    background-color var(--motion-interaction, 0.35s) ease,
    color var(--motion-interaction, 0.35s) ease;
}

.pill-link.green {
  color: #fff;
  background: var(--green);
}

.pill-link.green i {
  color: var(--green);
  background: #fff;
}

.pill-link.white {
  color: var(--green);
  border: 2px solid var(--green);
}

.pill-link.white i {
  color: #fff;
  background: var(--green);
}

.pill-link.white:hover {
  color: #fff;
  background: var(--green);
}

.pill-link.white:hover i{
  color: var(--green);
  background: #fff;
}