a {
  color: var(--color-orange-500);
  font-weight: 500;
  letter-spacing: var(--tracking--1);
  text-decoration: underline;
}

a:hover,
a:active {
  color: var(--color-orange-700);
  transition: 0.5s color;
}

a:focus {
  outline-color: var(--color-orange-500);
  outline-offset: var(--size-1);
}

a:focus:active {
  color: var(--color-orange-700);
}

a.cta,
a.cta-minimal {
  align-items: center;
  display: inline-flex;
  gap: var(--size-3);
  position: relative;
}

a.cta {
  background: var(--color-orange-500);
  border-radius: var(--size-8);
  color: var(--color-white);
  font-family: var(--font-display);
  height: var(--size-15);
  padding-inline: var(--size-10);
  letter-spacing: var(--tracking-0);
  text-decoration: none;
  text-transform: uppercase;
}

a.cta::after {
  background-color: var(--color-white);
  mask: url('data:image/svg+xml,<svg width="57" height="18" viewBox="0 0 57 18" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="8.74228e-08" y1="8.5" x2="55" y2="8.5" stroke="black" stroke-width="2"/><path d="M48 1.5L55.5 9L48 16.5" stroke="black" stroke-width="2"/></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
  content: '';
  height: var(--size-6);
  width: var(--size-16);
}

a.cta:hover,
a.cta:active {
  background: var(--color-orange-700);
  transition: 0.5s background;
}

a.cta-minimal::after {
  background-color: currentColor;
  mask: url('data:image/svg+xml,<svg width="57" height="18" viewBox="0 0 57 18" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="8.74228e-08" y1="8.5" x2="55" y2="8.5" stroke="black" stroke-width="2"/><path d="M48 1.5L55.5 9L48 16.5" stroke="black" stroke-width="2"/></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
  content: '';
  height: var(--size-6);
  width: var(--size-16);
}