/* ARABIDS v1.2.101 — keep all four desktop app-preview screens inside the
   visible viewport while allowing normal scrolling into "Who uses ARABIDS".
   Mobile retains its native-scroll sticky runway and existing dimensions. */

@media (min-width: 992px) {
  html body.home .how_it_works_section,
  html body[data-page="home"] .how_it_works_section {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: clamp(28px, 3.5vh, 40px) !important;
    padding-bottom: clamp(28px, 3.5vh, 40px) !important;
  }

  html body.home .how_it_works_section .container-flex,
  html body[data-page="home"] .how_it_works_section .container-flex {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
  }

  html body.home .how_it_works_section .container-flex > h2.title,
  html body[data-page="home"] .how_it_works_section .container-flex > h2.title {
    margin: 0 0 14px !important;
    font-size: clamp(27px, 2.9vw, 39px) !important;
    line-height: 1.35 !important;
  }

  html body.home .how_it_works_section .flex.desktop,
  html body[data-page="home"] .how_it_works_section .flex.desktop {
    min-height: 0 !important;
    height: auto !important;
    gap: clamp(25px, 5vw, 68px) !important;
    align-items: center !important;
  }

  /* Earlier styling forced min-width:235px even on short desktop windows;
     this made the bottom of the device unreachable on some laptop screens. */
  html body.home .how_it_works_section .flex.desktop .how-it-works-swiper-2,
  html body[data-page="home"] .how_it_works_section .flex.desktop .how-it-works-swiper-2 {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: min(285px, max(175px, calc((100dvh - var(--arabids-preview-header, 85px) - 190px) * 0.48841)), var(--arabids-phone-live-width, 285px)) !important;
    max-width: 285px !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 295 / 604 !important;
  }

  html body.home .how_it_works_section .flex.desktop > .how-it-works-swiper,
  html body[data-page="home"] .how_it_works_section .flex.desktop > .how-it-works-swiper {
    min-height: 0 !important;
    height: min(575px, max(185px, calc(100dvh - var(--arabids-preview-header, 85px) - 200px))) !important;
    max-height: calc(100dvh - var(--arabids-preview-header, 85px) - 200px) !important;
  }
}

/* Extremely short desktop windows need smaller copy but remain fully usable. */
@media (min-width: 992px) and (max-height: 700px) {
  html body.home .how_it_works_section,
  html body[data-page="home"] .how_it_works_section {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
  html body.home .how_it_works_section .container-flex > h2.title,
  html body[data-page="home"] .how_it_works_section .container-flex > h2.title {
    margin-bottom: 8px !important;
    font-size: 27px !important;
  }
}