/* Phones (founders' mobile review, 2026-10-26). Loaded last; desktop and tablet are untouched. One idea throughout: on
   a narrow screen, every choice is visible at once as a grid of tiles, and only what matters now is open. */
@media (max-width: 759.98px) {
  /* less air between sections */
  main > section[id]:not(#top):not(#proof) {
    padding-top: 64px;
  }

  /* rows of tabs and choices: every option visible at once, as a grid of equal tiles (founders, 2026-10-26: no
     sideways swiping); long subtitles are left to the panel each tab opens */
  .ap-tabs,
  .why-tabs,
  #platform .platform-tabs,
  .prod-cards,
  .how__tasks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ap-tab,
  .why-tab,
  .how__task {
    min-height: 48px;
    padding: 8px 10px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
    justify-content: center;
    white-space: normal;
  }

  /* walkthrough: three tasks side by side, Replay on its own row */
  .how__tasks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .how__task {
    align-items: center;
  }

  .how__task b {
    font-size: 14px;
  }

  /* subtitles leave the tile but stay in the button's spoken name */
  .how__task span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  .how__task {
    position: relative;
  }

  .how__replay {
    grid-column: 1 / -1;
    justify-self: end;
    min-height: 44px;
    border-color: transparent;
    background: transparent;
  }

  /* platform capabilities: three equal tabs across the card's top, titles only */
  #platform .platform-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  #platform .platform-tabs button {
    justify-content: center;
    padding: 12px 6px;
    text-align: center;
  }

  #platform .platform-tabs button span:first-child {
    font-size: 14px;
    line-height: 1.25;
  }

  #platform .platform-tabs button span:last-child {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  #platform .platform-tabs button {
    position: relative;
  }

  /* platform map: four tiles, a small icon beside the name; the caption under the map says what each one uses */
  .prod-card {
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
  }

  /* the icon tile is sized inline in the markup */
  .prod-card > span:first-child {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  .prod-card > span:first-child svg {
    width: 18px;
    height: 18px;
  }

  .prod-card > span:last-child > span:first-child {
    font-size: 14px !important;
    line-height: 1.25;
  }

  /* the name and description are styled inline in the markup; the description stays in the spoken name */
  .prod-card > span:last-child > span:last-child {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  .prod-card {
    position: relative;
  }

  /* AI adoption: counter and arrows share a row, the tabs fill the row below them */
  .why-tabs {
    order: 3;
    flex-basis: 100%;
  }

  /* applications: the illustrated search bar gives the question the whole width */
  .ap-askchip {
    display: none;
  }

  .ap-searchbar {
    border-radius: 22px;
  }

  .ap-searchtext {
    font-size: 15px;
  }

  /* hero: the question reads in full; who asks shows in the demos below */
  .f2-pill {
    left: calc(22% + 10px) !important;
    width: calc(56% - 46px) !important; /* the pill is content-box: 26px of padding and border sit outside this */
  }

  .f2-pill [data-who] {
    display: none !important;
  }

  .f2-pill [data-q] {
    font-size: 14px;
  }

  /* walkthrough: the stage in progress is open; the others show their name and status, tap to open */
  .how__col:not([data-state='now']) .how__rows {
    display: none;
  }

  .how__col:not([data-state='now']) {
    padding-block: 10px;
  }

  /* platform map: the same map, with its lists flowing side by side instead of one per line */
  .prod-col,
  .prod-col--right {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .prod-brain-map svg {
    width: 260px;
    height: auto;
  }

  .prod-cols {
    gap: 20px;
    margin-top: 32px;
  }

  .prod-cols h3 {
    font-size: 21px;
  }

  #platform h3 {
    font-size: 26px;
  }

  /* form fields at 16px: iOS Safari zooms the page into any smaller field when it is tapped */
  .contact-form input:not([type="hidden"]),
  .contact-form textarea,
  .roi__field input[type="number"],
  .roi__field select {
    font-size: 16px;
  }

  /* ROI totals: one per row, so a large figure keeps its unit ("$17.8M") on one line */
  .roi__totals {
    grid-template-columns: 1fr;
  }

  .roi__totals dd {
    font-size: 24px;
    white-space: nowrap;
  }

  /* AI adoption diagram: the small cards' names stay whole words (the body allows breaking anywhere) */
  .why-diagram p {
    overflow-wrap: normal;
  }

  .why-diagram [style*="repeat(3"] > div {
    padding: 10px 8px !important;
  }

  /* comfortable tap targets */
  .ap-replay {
    min-height: 44px;
  }

  .footer-nav a {
    padding-block: 4px;
  }

  /* proof and security: the same content, tighter */
  .proof__grid {
    gap: 22px 0;
    margin-top: 24px;
  }

  .proof__grid--more {
    margin-top: 28px;
    padding-top: 22px;
  }

  .trust__item {
    padding: 18px;
  }
}