:root {
  --link-color-hovered: #241c15;
}

/*body {
  font-family: Helvetica Neue, Helvetica, Arial, Verdana, sans-serif;
  padding: 1rem;
}
*/
a {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  background: transparent;
}

.cta-arrow {
  --shift-distance: 0.25rem;
  display: inline-block;
  font-weight: 400;
  font-size: var(--copy-regular-size);
  line-height: 2rem;
  height: 2rem;
  color: var(--link-color);
  text-decoration: none;
  position: relative;
  padding-right: 2.5rem;
  transform: translateX(0);
  z-index: 1;
  transition: color 0.15s ease-in-out, transform 0.3s ease, -webkit-transform 0.3s ease;
  border-radius: 2em;
  margin-top: 0.8rem;
}
.cta-arrow::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.125rem;
  right: 0;
  left: calc(100% - 2rem);
  border-radius: 2rem;
  height: 2rem;
  z-index: -1;
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EArrow Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M268 112l144 144-144 144M392 256H100'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position-x: calc(100% - 0.4375rem);
  background-position-y: center;
  background-size: 1.125rem;
  background-color: beige; /* #ffe01b; */
  transition: left 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), right 0.3s ease, background-position 0.3s ease;
}
.cta-arrow:hover {
  color: var(--link-color-hovered);
  transform: translateX(var(--shift-distance));
}
.cta-arrow:hover::before {
  background-position-x: calc(100% - var(--shift-distance) * 3.5);
  left: calc(var(--shift-distance) * -4);
  transition: left 0.3s cubic-bezier(0.4, 1.7, 0.7, 0.8), right 0.3s ease, background-position 0.3s ease;
}