/* Reveal animations replacing Framer's appear effects (see repid.js). */
@media (prefers-reduced-motion: no-preference) {
  .fx-ready .fx:not(.fx-in):not(.fx-hero) { opacity: 0.001; transform: var(--fx-t); }
  .fx-ready .fx-hero { animation: fx-hero-in 0.6s cubic-bezier(0.25, 1, 0.5, 1) var(--fx-d, 0s) both; }
  @keyframes fx-hero-in { from { opacity: 0.001; transform: var(--fx-t); } to { opacity: 1; transform: none; } }
  .fx {
    transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1) var(--fx-d, 0s), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) var(--fx-d, 0s);
  }
  /* phone screenshots in the feature cards come in after their card */
  .fx.fx-late { transition-duration: 0.8s, 1s; transition-delay: calc(var(--fx-d, 0s) + 1.1s); }
}
[data-framer-name="Accordion"] [data-framer-name^="Simple"] { cursor: pointer; }

/* Hover states of Framer components */
#main a[data-framer-name^="Button ["], #main [data-framer-name="Icon [xs]"], #main a[data-framer-name="Menu Item Simple"] {
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
#main a[data-framer-name^="Button ["]:hover, #main [data-framer-name="Icon [xs]"]:hover { opacity: 0.6; }
#main a[data-framer-name="Menu Item Simple"]:hover { background-color: rgba(136, 136, 136, 0.15); }