/* Tablet and phone: the five-column grid folds into one column; reduced motion shows final states. */
@media (max-width: 1000px) {
  .grid5 {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }
  .grid5 > *,
  .plan.rec,
  .plan.pilot,
  .foot-col:first-child,
  .slide-meta div:first-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .sec-head .act {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 10px;
  }
  .hero-feature {
    max-width: 220px;
    margin-top: 36px;
  }
  .trusted {
    gap: 14px;
  }
  .value-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .rows,
  .roles {
    margin-left: 0;
  }
  .row-inner,
  .role-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .row-text,
  .row-subs,
  .row-art,
  .role-panel p {
    grid-column: 1;
    grid-row: auto;
  }
  .row-subs {
    margin-bottom: 20px;
  }
  .row-btn {
    grid-template-columns: 64px 1fr auto;
  }
  .feat-art,
  .slide-art {
    grid-template-columns: minmax(0, 1fr);
    margin-left: 0;
  }
  .tags {
    grid-column: 1 / 3;
    grid-row: 2;
    margin: 14px 0 0;
    flex-wrap: wrap;
  }
  .num-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }
  .num:nth-child(2),
  .num:nth-child(3) {
    margin-top: 0;
  }
  .idea-art {
    max-width: 220px;
  }
  .idea-quote {
    text-align: left;
  }
  .q-small {
    margin-left: 0;
  }
  .timeline {
    grid-template-columns: minmax(0, 1fr);
  }
  .tl,
  .tl.right {
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }
  .slide-nav,
  .screens-table {
    margin-left: 0;
    width: 100%;
  }
  .step-art,
  .step-copy {
    padding-left: 0;
  }
  .step:nth-child(even) .step-no {
    padding-left: 0;
  }
  .price-incl {
    text-align: left;
  }
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .foot-art {
    justify-self: start;
    width: 220px;
  }
  .foot-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .foot-cols > * {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .bar-signin {
    display: none;
  }
  .why-row {
    grid-template-columns: auto 1fr;
  }
  .why-row .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .roles-cols,
  .role-btn {
    grid-template-columns: 56px 1fr auto;
  }
  .roles-cols span:last-child,
  .role-where {
    display: none;
  }
  .cat-btn {
    grid-template-columns: 1fr auto;
  }
  .cat-sub {
    grid-row: 2;
    margin-top: 6px;
  }
  .cat-panel div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .screens-table td {
    padding: 18px 8px 18px 0;
  }
  .quotes {
    grid-template-columns: minmax(0, 1fr);
  }
  .quotes-flag {
    display: none;
  }
  .quotes blockquote,
  .quotes .slide-nav {
    grid-column: 1;
  }
  .film-frame {
    border-width: 6px;
  }
  .film-play {
    gap: 9px;
    min-height: 34px;
    padding: 0 12px 0 11px;
    bottom: 6%;
    font-size: 0.8125rem;
  }
  .film-play::before {
    border-width: 6px 0 6px 10px;
  }
}