/* ARABIDS 1.2.129 — consistently centered bilingual photo-story captions,
   slightly tighter/larger supporting text, and a stable, larger app device.
   Keep existing original images, section photography and scroll sequencing. */

/* The English-specific old rule aligned chapter titles to the left. Centre
   the entire chapter-heading composition in BOTH reading directions. */
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) .arabids-editorial-intro {
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
}
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) .arabids-editorial-intro .arabids-editorial-heading {
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  margin-inline:auto !important;
  padding-inline:0 !important;
  width:100% !important;
  max-width:100% !important;
  flex:1 1 auto !important;
}
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) .arabids-editorial-intro .arabids-editorial-heading > h2.title {
  display:block !important;
  width:100% !important;
  text-align:center !important;
  margin-inline:auto !important;
}

/* All of the category, audience, benefits and FAQ entries share the same
   visual centre. Do not change the existing card count or grid layout. */
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) :is(.flex,.flex-wrap) > .item,
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) :is(.flex,.flex-wrap) > .item :is(.content,.content-in) {
  text-align:center !important;
}
html body:is(.home,[data-page="home"]) :is(
  .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
) :is(.flex,.flex-wrap) > .item > .flex {
  justify-content:center !important;
  text-align:center !important;
}
html body:is(.home,[data-page="home"]) .core_benefits_section .flex > .item .title,
html body:is(.home,[data-page="home"]) :is(
  .what_is_section,.who_its_for_section,.faq_section
) .flex-wrap > .item .title {
  width:100% !important;
  display:block !important;
  text-align:center !important;
  padding-inline:0 !important;
  margin-top:0 !important;
  margin-bottom:5px !important;
  font-size:clamp(23px,2.08vw,30px) !important;
}
html body:is(.home,[data-page="home"]) .core_benefits_section .flex > .item .subtitle,
html body:is(.home,[data-page="home"]) :is(
  .what_is_section,.who_its_for_section,.faq_section
) .flex-wrap > .item .subtitle {
  display:block !important;
  width:100% !important;
  text-align:center !important;
  font-size:clamp(16px,1.38vw,19px) !important;
  line-height:1.7 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  transform:translateY(-3px) !important;
}

@media (max-width:991px) {
  html body:is(.home,[data-page="home"]) .core_benefits_section .flex > .item .title,
  html body:is(.home,[data-page="home"]) :is(
    .what_is_section,.who_its_for_section,.faq_section
  ) .flex-wrap > .item .title {
    font-size:clamp(21px,5.25vw,26px) !important;
    margin-bottom:5px !important;
  }
  html body:is(.home,[data-page="home"]) .core_benefits_section .flex > .item .subtitle,
  html body:is(.home,[data-page="home"]) :is(
    .what_is_section,.who_its_for_section,.faq_section
  ) .flex-wrap > .item .subtitle {
    font-size:clamp(16px,4vw,18px) !important;
    transform:translateY(-2px) !important;
  }
}

/* The frame is sized by one viewport-derived value, NOT recalculated or
   compressed when each scroll step becomes active. 295:604 is the exact
   device-artwork ratio; frame and all four images scale as a single unit. */
@media (min-width:992px) {
  html body:is(.home,[data-page="home"]) .how_it_works_section {
    /* The scroll handler updates preview-header for anchoring. Do not tie
       device height to that changing value: it would resize on scroll. */
    --arabids-app-stage-h:min(608px,max(270px,calc(100dvh - 205px)));
    --arabids-phone-fixed-width:min(295px,calc(var(--arabids-app-stage-h) * .48841));
  }
  html body:is(.home,[data-page="home"]) .how_it_works_section .container-flex .flex.desktop {
    height:var(--arabids-app-stage-h) !important;
    max-height:var(--arabids-app-stage-h) !important;
  }
  html body:is(.home,[data-page="home"]) .how_it_works_section .container-flex .flex.desktop > .how-it-works-swiper,
  html body:is(.home,[data-page="home"]) .how_it_works_section .container-flex .flex.desktop > .how-it-works-swiper-2 {
    height:var(--arabids-app-stage-h) !important;
    max-height:var(--arabids-app-stage-h) !important;
  }
  html body:is(.home,[data-page="home"]) .how_it_works_section .container-flex .flex.desktop > .how-it-works-swiper-2 {
    flex:0 0 var(--arabids-phone-fixed-width) !important;
    width:var(--arabids-phone-fixed-width) !important;
    min-width:0 !important;
    max-width:295px !important;
    aspect-ratio:295 / 604 !important;
    box-sizing:border-box !important;
    align-self:center !important;
    margin:0 !important;
    overflow:hidden !important;
    transition:none !important;
  }
  html body:is(.home,[data-page="home"]) .how_it_works_section .container-flex .flex.desktop > .how-it-works-swiper-2 :is(
    .swiper-wrapper,.swiper-slide,.how-it-works-mockup,.how-it-works-mockup img.bg
  ) {
    height:100% !important;
    max-height:100% !important;
  }
}