/* ===================== Buttons ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 700;
  font-size: .95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--primary); color: var(--on-dark); box-shadow: 0 8px 20px -6px var(--shadow-ink-strong); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--ghost { background: var(--on-dark-veil); color: var(--on-dark); border-color: var(--sheen); }
.btn--ghost:hover { background: var(--on-dark-line); }
.btn--outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn--outline:hover { background: var(--primary); color: var(--on-dark); }
.btn--sm { padding: 9px 16px; font-size: .85rem; }
.btn--lg { padding: 15px 28px; font-size: 1rem; }
.btn--block { width: 100%; }

/* The header below is sticky, so a section arrived at by anchor would tuck its
   own heading underneath it. Hold every jump clear of the header's height. */
section[id], #paymentMethods { scroll-margin-top: 84px; }