body {
  margin: 0;
}

a {
  position: relative;
  color: var(--ariva-brand);
  cursor: pointer;
  text-decoration: none;
}

button {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
}

a:focus, button:focus {
  outline: none;
}

a:focus:before,
button:focus:before {
  border-radius: calc(0.1875rem + 4px);
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  border: 2px solid var(--ariva-brand);
}

a:focus:before {
  left: -8px;
  right: -8px;
}

button:focus:before {
  left: -4px;
  right: -4px;
}

a:focus:not(:focus-visible):before,
button:focus:not(:focus-visible):before {
  border-color: transparent;
}

p {
  margin: 0;
}