.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  /* Long labels ("Ask us what your own data could show →") must wrap — with
     nowrap this button alone overflowed a 320px viewport. */
  max-width: 100%;
  box-shadow: var(--sh-1);
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s, background 0.2s;
}

.cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
  border-color: color-mix(in srgb, var(--brand) 50%, var(--line));
}

.cta--solid {
  background: linear-gradient(135deg, var(--brand-bright), var(--brand));
  border-color: transparent;
  color: #fff;
  box-shadow: var(--sh-brand);
}

.cta--solid:hover {
  box-shadow: 0 12px 30px -8px rgba(14, 116, 144, 0.5);
  color: #fff;
}