/* Pill buttons. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 99px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-ghost {
  color: var(--ink);
  border: 1px solid var(--rule);
}
.btn-ghost:hover { background: var(--paper-2); }

.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { background: var(--teal-deep); }

.btn-terra {
  background: var(--terra);
  color: var(--white);
}
.btn-terra:hover { background: #a04d34; }

/* Arrow glyph used inside buttons. */
.arrow {
  display: inline-block;
  width: 14px; height: 14px;
  position: relative;
}
.arrow::before {
  content: "";
  position: absolute;
  inset: auto 0 50% 0;
  height: 1.5px;
  background: currentColor;
  transform: translateY(50%);
}
.arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 7px; height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}