/* 2026-10-01 phone length cut, option B (LEVI). Homepage only, 860px and under. Desktop is untouched.
   The page measured 19 iPhone 13 screens. The duplicate paid-social comparison is dropped (the $10,000
   experiment makes the same argument and the "stays up" line already sits in #why), the four process steps
   become a sideways swipe, the FAQ folds to its questions, and the closing loses the picture stack.
   phone-fold.js adds the FAQ toggles and the step counter; without it everything stays open and stacked. */
.how-count, .faq-mark { display: none; }

@media (max-width: 860px) {
  .reach--home { display: none; }
  .experiment-takeaway small { display: none; }

  /* Process steps: one row, swiped sideways, each step snapping to centre. */
  #how-it-works .how-cards {
    display: flex; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) .25rem; scroll-padding-inline: var(--gutter);
  }
  #how-it-works .how-cards::-webkit-scrollbar { display: none; }
  #how-it-works .hcard { flex: 0 0 86%; scroll-snap-align: center; min-width: 0; }
  /* 2026-10-04 audit: the six-tile library in step 1 held that card at 359px on every phone, wider than
     the other three and past the screen edge under 375px. Tiles may now shrink, and under 380px the card
     gives back some padding so "Behind the scenes" still fits its tile. */
  #how-it-works .viz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Off-screen steps would otherwise wait for their own reveal and arrive blank when swiped in. */
  html.reveal-live #how-it-works .how-cards > .hcard { opacity: 1 !important; transform: none !important; }
  .how-count { display: flex; justify-content: space-between; grid-column: 1 / -1; margin-top: .75rem; color: var(--ink-2); }

  .receive-list .body-2 { display: none; }
  .receive-list li { padding-block: .7rem; }

  /* FAQ: questions only, tap one to open its answer. A typographic mark, no chevron, no boxed rows. */
  .faq-list.is-folded .faq-item { padding-block: 0; }
  .faq-list.is-folded .faq-item:not(.is-open) > :not(h3) { display: none; }
  .faq-list.is-folded .faq-item.is-open { padding-bottom: 1.2rem; }
  html .faq-list.is-folded h3 { margin: 0; }
  .faq-toggle {
    all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    width: 100%; padding-block: 1rem; cursor: pointer; font: inherit; color: inherit; transition: color 150ms ease-out;
  }
  .faq-toggle:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
  .faq-toggle .faq-mark { display: inline; flex: none; font-weight: 400; color: var(--coral); }
  .faq-item.is-open .faq-toggle { padding-bottom: .6rem; }

  .close-echo { display: none; }
  .closing .footer { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; }
  .closing .footer .footer-col { grid-column: auto; }
  .closing .footer .brand, .closing .footer .footer-legal { grid-column: 1 / -1; }
}

@media (max-width: 379px) {
  #how-it-works .hcard { flex-basis: calc(100% - 2.5rem); padding: 1.4rem 1.2rem 1.25rem; }
  #how-it-works .hcard-num { top: 1.3rem; right: 1.2rem; }
  #how-it-works .viz-tiles { gap: .5rem; }
  #how-it-works .viz-tiles li { padding: .6rem; font-size: .8125rem; }
}