.mq-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mq-body);
  font-size: var(--fs-small);
  font-weight: 500;
  padding: 14px 22px;
  border-radius: var(--r-ctl);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.mq-btn--primary { background: var(--mq-brand-soft); color: var(--mq-ink); border-radius: var(--r-pill); }
.mq-btn--primary:hover { background: var(--mq-brand); color: #fff; }
.mq-btn--ghost { background: transparent; color: var(--mq-ink); border-color: var(--mq-edge); border-radius: var(--r-pill); }
.mq-btn--ghost:hover { border-color: var(--mq-brand); color: var(--mq-brand); }
.mq-btn[disabled], .mq-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* On the dark band / footer, buttons invert. */
.mq-section--dark .mq-btn--ghost, .mq-band .mq-btn--ghost { color: #fff; border-color: rgba(255,255,255,0.35); }
.mq-section--dark .mq-btn--ghost:hover, .mq-band .mq-btn--ghost:hover { border-color: #fff; color: #fff; }

.mq-link { color: var(--mq-brand); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: var(--s-2); }
.mq-link:hover { color: var(--mq-brand-2); }

.mq-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: var(--hairline);
  font-family: var(--mq-data);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  color: var(--mq-mute);
}