/* ============================================================
 * Button primitive — shared rules for the round pill CTA button.
 * Used by `.back-cta-btn` (on bill card backs) and `.cta-button`
 * (in the final CTA section). Both render identically.
 * ============================================================ */

.back-cta-btn,
.cta-button {
  display: inline-flex;
  align-items: center;
  background: var(--jaz-blue);
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 18px;
  padding: 20px 36px;
  border-radius: 68px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.back-cta-btn .arrow,
.cta-button .arrow {
  display: inline-block;
  margin-left: 12px;
  transition: transform 250ms cubic-bezier(0.65, 0, 0.35, 1);
}
.back-cta-btn:hover,
.cta-button:hover {
  background: var(--jaz-blue-bright);
  transform: translateY(-2px);
}
.back-cta-btn:hover .arrow,
.cta-button:hover .arrow { transform: translateX(5px); }

/* Bill-context spacing: back-cta-btn lives below the bill, needs top margin */
.back-cta-btn { margin-top: 32px; }

@media (max-width: 900px) {
  .back-cta-btn,
  .cta-button { padding: 14px 24px; font-size: 15px; }
}

/* iPhone-class viewports — paired with cta-sub. Sized so pulse (1.045×)
 * still clears the tile edge with margin at 375px+. */
@media (max-width: 420px) {
  .back-cta-btn,
  .cta-button { padding: 14px 24px; font-size: 14px; }
}

/* iPhone SE-class (<=360px) — text is too long to fit the v0.1.4 bumped
 * size at this width. Drop to a compact pill so the button + pulse fit
 * inside the tile content area. */
@media (max-width: 360px) {
  .back-cta-btn,
  .cta-button { padding: 11px 14px; font-size: 12px; }
}