@layer components {
  .cta {
    --cta-green: var(--c-cta-green);
    --h: 54px;
    --a: 12%;
    --w: 61%;
    position: relative;
    isolation: isolate;
    appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    text-decoration: none;
    width: min(440px, calc(100vw - 64px));
    height: var(--h);
    margin-inline: 14px;
    display: grid;
    grid-template-columns: var(--a) var(--w) 1fr;
    align-items: center;
    font-family: var(--ff-small);
    font-size: 12.5px;
    line-height: normal;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    transition:
      transform 0.25s ease,
      filter 0.35s ease;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35));
  }
  .cta-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: skew(-20deg);
    background: var(--cta-green);
    box-shadow: inset 0 0 0 1px #f1ead829;
  }
  .cta-mid {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--a);
    width: var(--w);
    background: var(--c-cream-warm);
    transition:
      left 0.5s cubic-bezier(0.6, 0, 0.2, 1),
      width 0.5s cubic-bezier(0.6, 0, 0.2, 1);
  }
  .cta-label {
    grid-column: 2;
    text-align: center;
    color: var(--cta-green);
    padding-left: 0.24em;
    white-space: nowrap;
  }
  .cta-arrow {
    grid-column: 3;
    justify-self: center;
    position: relative;
    width: 22px;
    height: 1px;
    background: var(--c-cream-warm);
    transition:
      width 0.5s cubic-bezier(0.6, 0, 0.2, 1),
      transform 0.5s cubic-bezier(0.6, 0, 0.2, 1);
  }
  .cta-arrow:after {
    content: "";
    position: absolute;
    right: 0;
    top: -3.5px;
    width: 7px;
    height: 7px;
    border-top: 1px solid var(--c-cream-warm);
    border-right: 1px solid var(--c-cream-warm);
    transform: rotate(45deg);
  }
  .cta:hover .cta-mid,
  .cta:focus-visible .cta-mid {
    left: 6%;
    width: 69%;
  }
  .cta:hover .cta-arrow,
  .cta:focus-visible .cta-arrow {
    width: 34px;
    transform: translate(8px);
  }
  .cta:hover,
  .cta:focus-visible {
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.45));
  }
  .cta:focus-visible {
    outline: none;
  }
  .cta:focus-visible .cta-bg {
    outline: 1px solid var(--c-sage-light);
    outline-offset: 4px;
  }
  .cta:active {
    transform: scale(0.97);
  }
  .cta--back {
    width: min(300px, calc(100vw - 64px));
    grid-template-columns: 1fr var(--w) var(--a);
  }
  .cta--back .cta-mid {
    left: calc(100% - var(--a) - var(--w));
  }
  .cta--back .cta-arrow {
    grid-column: 1;
    grid-row: 1;
    transform: rotate(180deg);
  }
  .cta--back:hover .cta-mid,
  .cta--back:focus-visible .cta-mid {
    left: 25%;
    width: 69%;
  }
  .cta--back:hover .cta-arrow,
  .cta--back:focus-visible .cta-arrow {
    transform: rotate(180deg) translate(8px);
  }
  @media (max-width: 460px) {
    .cta {
      --h: 48px;
      font-size: 11px;
      letter-spacing: 0.16em;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cta,
    .cta-mid,
    .cta-arrow {
      transition: none;
    }
  }
}