/* ============================================================
   Aqaris · Arabic feature pages (ar/feature-*.html)
   Figma "Aqaris ar version": import 80:16856 / 80:17147 / 80:17422,
   properties 80:17693 / 80:17987 / 80:18265; the other modules
   follow the same layout.
   Loaded after home-ar.css and features.css. body is
   "home home-ar features". Flex/grid rows mirror on their own under
   dir="rtl"; these rules flip the physical sides features.css sets
   and set the Cairo sizes. Pages are generated by
   .figma-cache/build-features.js.
   ============================================================ */

/* ---------- Hero ---------- */
.home-ar .ft-hero h1 { line-height: 1.3; }
/* The screenshot bleeds past the leading (left) content edge */
.home-ar .ft-shot { margin: 0 0 0 -144px; }
.home-ar .ft-shot-bar span { margin-left: 0; margin-right: 14px; }

/* ---------- The problem ---------- */
.home-ar .ft-problem h2 { line-height: 1.32; }
.home-ar.features .ft-problem-copy .ft-callout {
  padding-left: 0; padding-right: 22px;
  border-left: 0; border-right: 3px solid #8E8BFF;
}

/* ---------- What Aqaris does ---------- */
.home-ar .ft-what h2 { line-height: 1.32; }
.home-ar .ft-card h3 { line-height: 1.43; }

/* ---------- CTA (home-ar.css sizes .hp-cta h2 for the homepage) ---------- */
.home-ar .ft-cta h2 { font-size: 46px; line-height: 1.32; }

/* ---------- Related features ---------- */
.home-ar .ft-related h2 { line-height: 1.32; }
.home-ar .ft-rel h3 { line-height: 1.45; }
.home-ar .ft-rel-arrow { transform: scaleX(-1); }
@media (hover: hover) {
  .home-ar .ft-rel:hover .ft-rel-link .ft-rel-arrow { transform: translateX(-4px) scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) {
  .home-ar .ft-rel:hover .ft-rel-link .ft-rel-arrow { transform: scaleX(-1); }
}

/* ============================================================
   Small desktop (1025–1240)
   ============================================================ */
@media (max-width: 1240px) {
  .home-ar .ft-shot { margin-left: -96px; }
}

/* ============================================================
   Tablet (≤ 1024) — 768 frame
   ============================================================ */
@media (max-width: 1024px) {
  .home-ar .ft-hero h1 { line-height: 1.3; }
  .home-ar .ft-shot { margin-left: 0; }
  .home-ar .ft-cta h2 { font-size: 38px; }
}

/* ============================================================
   Mobile (≤ 640) — 390 frame
   ============================================================ */
@media (max-width: 640px) {
  .home-ar .ft-hero h1 { line-height: 1.3; }
  .home-ar .ft-problem h2,
  .home-ar .ft-what h2 { line-height: 1.32; }
  .home-ar .ft-cta h2 { font-size: 30px; }
}