/* Phones: less scrolling. Lists of cards become swipeable carousels (assets/js/mobile.js) where the next card
   peeks in and a progress bar counts them; long ledes are trimmed to their first sentence. */
@media (max-width: 760px) {
  .m-car { display: flex !important; flex-direction: row !important; grid-template-columns: none !important; gap: 12px !important; margin-left: calc(-1 * var(--edge)) !important; margin-right: calc(-1 * var(--edge)) !important; padding: 4px var(--edge) 10px !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--edge); scrollbar-width: none; }
  .m-car::-webkit-scrollbar { display: none; }
  .m-car > * { flex: 0 0 84% !important; min-width: 0; margin: 0 !important; scroll-snap-align: start; }

  .m-bar { display: flex; align-items: center; gap: 14px; margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted); font-variant-numeric: tabular-nums; }
  .m-bar i { position: relative; flex: 1; height: 2px; overflow: hidden; border-radius: 2px; background: var(--line-strong); }
  .m-bar i b { position: absolute; inset: 0; background: var(--teal); transform-origin: left; transform: scaleX(var(--prog, 0.25)); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
  .m-bar em { font-style: normal; color: var(--ink); }

  /* hero: the button comes straight after the words, so it is on the first screen; the product window follows */
  .hx-teal .hx-actions { order: 4; margin-top: 26px; }
  .hx-teal .hx-people { order: 5; margin-top: 22px; }
  .hx-teal > .hx-stage > .hs { order: 6; margin-top: 52px; }
  .hx-teal .hx-switch { order: 7; }

  /* pillars: cards of one height */
  .pl-grid.m-car > .pl { min-height: 230px; }

  /* phases: the track is replaced by the progress bar; the cards keep their animations */
  .phases-wrap .ph-track { display: none; }
  #phases.m-car > .ph { display: flex; flex-direction: column; }
  #phases.m-car .ph-card { flex: 1; }

  /* why: three words with their icons, in one row (the hero already says it in a sentence) */
  .why { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 36px; padding-top: 0; border-top: 0; }
  .why > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
  .why svg { margin: 0; }
  .why h3 { margin: 0; font-size: 15px; line-height: 1.2; }
  .why p { display: none; }

  /* results: photo cards, all the same height */
  .res.m-car > .re { min-height: 0; }
  .res.m-car > .re .re-stat { margin-top: auto; }

  /* less to read on a phone: one line under the headline, one button, no repeated sentences */
  .hx-teal .hx-lede { display: none; }
  .hx-teal .hx-actions .btn-line { display: none; }
  .hx-people > span { font-size: 0; }
  .hx-people b { font-size: 15px; }
  .hx-people b::after { content: "Engineers, designers and PMs."; display: block; font-size: 13.5px; font-weight: 400; color: var(--muted); }
  .card .c-lede { display: none; }
  .ask-l > p { display: none; }

  /* the brief: name and company, email and start date share a row */
  .ask-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 20px 16px !important; }
  .ask-form .ask-needs, .ask-form .ask-f.wide, .ask-form > :last-child { grid-column: 1 / -1; }

  .pods { padding-bottom: 56px; }

  /* pods: the lede is the first sentence only */
  .pods .room-lede .ln + .ln { display: none; }
}