/* ==================================================================
   FOXI, PHONE LAYOUT. Added 2026-08-24.

   EVERY rule in this file lives inside a max-width media query, so
   nothing here can reach the desktop site. Delete the file and the
   link to it, and the site is byte for byte what it was before.

   The sideways drag is not new: it is the same mechanism the home
   page already uses for the post mockups (.postproof__rail), reused
   rather than reinvented.
   ================================================================== */

@media (max-width: 719px) {

  /* ---- 0. Let a sideways rail be narrower than the cards inside it ----
     A grid or flex child defaults to min-width:auto, which means it refuses
     to be smaller than its contents. A rail inside such a child inherits that
     refusal, grows to the width of all six cards, and then has nothing left
     to scroll. Setting min-width to zero on the column gives the rail back
     the width of the screen, which is what makes the drag work. */

  .dna__grid > *,
  .dna__col { min-width: 0; }

  /* ---- 1. The loop and the plans become cards you drag sideways ---- */

  .loop-timeline,
  .tiers {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    gap: 0.8rem;
    padding-bottom: 0.9rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .loop-timeline::-webkit-scrollbar,
  .tiers::-webkit-scrollbar { display: none; }

  /* the vertical spine only makes sense in a stacked list */
  .loop-timeline::before { display: none; }

  .loop-timeline > .lt {
    flex: 0 0 clamp(225px, 74vw, 300px);
    scroll-snap-align: start;
    background: #FFFFFF;
    border: 1px solid var(--dormant-line);
    border-radius: var(--r-card);
    padding: 1.15rem 1.15rem 1.3rem 3.3rem;
  }
  .loop-timeline > .lt:first-child { padding-top: 1.15rem; }
  .loop-timeline > .lt .lt__dot,
  .loop-timeline > .lt:first-child .lt__dot { left: 1.15rem; top: 1.15rem; }

  .tiers {
    border: 0;
    background: transparent;
  }
  .tiers > .tier {
    flex: 0 0 clamp(235px, 78vw, 310px);
    scroll-snap-align: start;
    border: 1px solid var(--dormant-line);
    border-radius: var(--r-card);
  }

  /* ---- 2. Where this comes from: one pair per block, arrow pointing down ----
     It used to be a three column grid squeezed onto a phone, which broke into
     loose lines with arrows floating away from the words they belonged to. */

  .lineage { display: block; }
  .lineage li { display: block; margin-bottom: 1.6rem; }
  .lineage li:last-of-type { margin-bottom: 0; }

  .lineage__from,
  .lineage__to {
    display: block;
    font-size: clamp(1.45rem, 1rem + 2.6vw, 2.1rem);
    line-height: 1.12;
  }

  .lineage__arrow {
    display: block;
    width: 1px;
    height: 1.2rem;
    margin: 0.35rem 0 0.35rem 0.2rem;
    align-self: auto;
  }
  .lineage__arrow::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 0;
    transform: translate(-50%, 0) rotate(135deg);
  }

  /* ---- 3. The same drag, applied to the other long blocks ----
     Four plans stacked on a phone is a two thousand pixel scroll before the
     page moves on. As cards you push sideways, the whole choice sits in one
     screen and the thumb does the work. */

  .price-grid,
  .principles,
  .stats {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    gap: 0.8rem;
    padding-bottom: 0.9rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .price-grid::-webkit-scrollbar,
  .principles::-webkit-scrollbar,
  .stats::-webkit-scrollbar { display: none; }

  .price-grid > .tier {
    flex: 0 0 clamp(235px, 78vw, 310px);
    scroll-snap-align: start;
  }
  .principles > .principle {
    flex: 0 0 clamp(235px, 78vw, 310px);
    scroll-snap-align: start;
  }
  .stats > * {
    flex: 0 0 clamp(200px, 66vw, 270px);
    scroll-snap-align: start;
    padding: 1.15rem 1.15rem 1.3rem;
    border: 1px solid var(--dormant-line);
    border-radius: var(--r-card);
    background: var(--surface);
  }

  /* a card that lifts on hover has nothing to lift on a phone, and the
     transform steals the drag */
  .principle:hover { transform: none; box-shadow: none; }
}