.cyclein-button {
  align-items: center;
  background: var(--color-brand-lime);
  border: 2px solid var(--color-brand-lime);
  border-radius: var(--radius-pill);
  color: var(--color-brand-black);
  display: inline-flex;
  font-size: var(--type-button-size);
  font-weight: var(--font-weight-bold);
  gap: var(--space-8);
  justify-content: center;
  line-height: var(--type-button-line-height);
  min-block-size: var(--a11y-min-target);
  /* Figma sets the pill buttons at ~42px; the 12px block padding pushed them to
     ~52px (round-6 issue r10 "buttons bigger than the design"). Drop to 8px so
     the resting height lands on the 44px WCAG touch-target floor
     (min-block-size) — matching the design without breaking the a11y minimum. */
  padding: var(--space-8) var(--space-24);
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, filter 140ms ease;
}

/* Round-2 checklist r6: every button must give hover feedback. Variants that set
   their own :hover background (hero primary/secondary, account pill) override the
   colour below; this brightness nudge is the shared baseline so no button — in
   any variant or context — is left without a hover state. */
.cyclein-button:hover {
  filter: brightness(0.95);
}

.cyclein-button--secondary {
  background: var(--color-brand-black);
  border-color: var(--color-brand-black);
  color: var(--color-brand-white);
}

.cyclein-button--ghost {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}