/* Keep the home ticker readable without horizontal swiping when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  .tick {
    overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .tk-track {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    animation: none;
  }

  .tk-track .ti[aria-hidden="true"] {
    display: none;
  }

  .tk-track .ti {
    white-space: normal;
  }
}

/* Keep the animated home orbit inside the stacked hero on phones and tablets. */
@media (max-width: 980px) {
  .hero .orbit-wrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: clip;
  }
}

/* Stack the homepage's comparison diagram while it is too wide for a tablet. */
@media (max-width: 700px) {
  #why .flow {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  #why .flow .fl-c,
  #why .flow .fl-c.r {
    justify-items: center;
  }

  #why .flow .fl-m {
    flex-direction: column;
  }

  #why .flow .fl-line {
    width: 2px;
    height: 28px;
    background: linear-gradient(180deg, transparent, var(--cyan), transparent);
  }

  #why .flow .fl-c span {
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .hero .orbit {
    width: min(84vw, 340px);
  }
}