/* The existing outlined CTA, shared without changing its visual or hit bounds. */
.apak-button {
  position: relative;
  display: inline-block;
  max-inline-size: 100%;
  padding: 3px 27px 0 23px;
  border: 2px solid var(--apak-lime);
  border-radius: 5px 22px 5px 25px;
  color: var(--apak-white);
  text-decoration: none;
  text-align: center;
  font-family: var(--apak-font-ui);
  font-size: 16px;
  font-weight: 800;
  line-height: 33px;
  letter-spacing: .64px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* The 40px visual outline keeps a 44px pointer target. Text may grow freely. */
.apak-button::before {
  content: "";
  position: absolute;
  inset: -4px 0;
}

.apak-button:focus-visible {
  color: var(--apak-ink);
  background: var(--apak-lime);
}

@media (max-width: 767px) {
  .apak-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-block: 2px 0 !important;
    line-height: 31px !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .apak-button:hover {
    color: var(--apak-ink);
    background: var(--apak-lime);
  }
}