/* Project buttons. */
.gu-btn {
  display: inline-block;
  font-weight: 700;
  border-radius: var(--gu-radius);
  border: 1px solid transparent;
  font-family: var(--gu-font-sans);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
  text-align: center;
  cursor: pointer;
}

.gu-btn--primary {
  background: var(--gu-accent);
  color: var(--gu-bg);
  padding: 15px 28px;
  font-size: 15px;
}

.gu-btn--primary:hover,
.gu-btn--primary:focus-visible {
  background: var(--gu-accent-light);
  color: var(--gu-bg);
  transform: translateY(-2px);
}

.gu-btn--ghost {
  border-color: var(--gu-border-6);
  color: var(--gu-text);
  font-weight: 600;
  padding: 15px 28px;
  font-size: 15px;
}

.gu-btn--ghost:hover,
.gu-btn--ghost:focus-visible {
  border-color: var(--gu-accent);
  color: var(--gu-accent);
}

.gu-btn--outline {
  border-color: var(--gu-border-accent);
  color: var(--gu-accent);
  font-size: 14px;
  padding: 12px;
  border-radius: 9px;
  display: block;
}

.gu-btn--outline:hover,
.gu-btn--outline:focus-visible {
  background: var(--gu-accent);
  color: var(--gu-bg);
}

.gu-btn--pill {
  background: var(--gu-accent);
  color: var(--gu-bg);
  padding: 10px 20px;
  border-radius: var(--gu-radius-sm);
  font-size: 13.5px;
}

.gu-btn--pill:hover,
.gu-btn--pill:focus-visible {
  background: var(--gu-accent-light);
  color: var(--gu-bg);
}

.gu-btn--small {
  background: var(--gu-accent);
  color: var(--gu-bg);
  font-size: 13.5px;
  border: none;
  border-radius: 9px;
  padding: 12px 16px;
  white-space: nowrap;
}

.gu-btn--small:hover,
.gu-btn--small:focus-visible {
  background: var(--gu-accent-light);
  color: var(--gu-bg);
}