@layer base {

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
  will-change: transform;
}

.btn--primary {
  background: var(--brand-primary);
  color: #fff;
}

.btn--primary:hover {
  background: var(--green-300);
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .4);
}

.cta-rive {
  display: block;
  width: 330px;
  max-width: 100%;
  /* Artboard is 330px with a 290px button centered inside it (20px buffer
     per side for the hover-grow animation) — shift left by that buffer so
     the visible button, not the artboard edge, lines up with the text. */
  margin: 0 0 0 -20px;
  cursor: pointer;
}

.cta-rive__canvas {
  display: block;
  width: 100%;
  aspect-ratio: 330 / 90;
}

}