/* O lilás dos botões é claro demais para texto sobre branco: textos e ícones usam um tom mais escuro */
.text-primary {
  color: var(--clay);
}

/* Carrossel da hero: duas imagens por tela no celular */
.mq-item {
  width: calc(50vw - 0.375rem);
  aspect-ratio: 9 / 16;
}
.marquee-track {
  animation-duration: 55s;
}
@media (min-width: 40rem) {
  .mq-item {
    width: 8rem;
    height: 14rem;
    aspect-ratio: auto;
  }
  .marquee-track {
    animation-duration: 40s;
  }
}

/* Popup */
#upgrade-popup.is-open {
  display: flex;
}
.popup-overlay {
  animation: popup-fade 0.2s ease-out;
}
.popup-card {
  animation: popup-scale 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes popup-fade {
  from { opacity: 0; }
}
@keyframes popup-scale {
  from { opacity: 0; transform: scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .popup-overlay,
  .popup-card {
    animation: none;
  }
}