/* Mock-up: gentle motion (directions A, B and C). Nothing moves unless you scroll or point at it, and nothing loops forever.
   With Reduce Motion on, everything is simply there, with no movement. */
@media (prefers-reduced-motion: no-preference) {
  .js-motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
  .js-motion [data-reveal].in { opacity: 1; transform: none; }
  .js-motion .phone[data-reveal] { transform: translateY(28px) scale(.98); }
  .js-motion .phone[data-reveal].in { transform: none; }
  .reveal { animation: none; }

  .btn, .app, .step, .plan, .card, details, .said li { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, filter .25s ease; }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(23, 32, 28, .12); }
  .btn:active { transform: scale(.97); box-shadow: none; }
  .app:hover, .step:hover, .plan:hover, .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
  details:hover { box-shadow: var(--shadow); }
  .ticks li .ic { transition: transform .3s ease; }
  .show:hover .ticks li .ic { transform: scale(1.12); }
  .phone img, .phone video { transition: transform .6s ease; }
}