/* Arabic pages (dir="rtl"): Arabic font, no letter-spacing, and mirrored left/right details */
.site { --head: "Outfit", "Cairo", sans-serif; --body: "Outfit", "Cairo", sans-serif; }
body { line-height: 1.8; }
h1, h2, h3, h4, .kicker { letter-spacing: 0; }
h1, h2, h3, h4 { line-height: 1.4; }
.site .hero h1 { line-height: 1.3; }
.kicker { font-size: 13px; }

.progress { transform-origin: 100% 50%; }
.nav-inner { padding: 0 16px 0 10px; }

/* arrows point the reading direction; the individual "scale" property stacks with hover transforms */
.i-arrow { scale: -1 1; }
.btn:hover .arr { transform: translateX(-4px); }
.svc:hover .more svg { transform: translateX(-5px); }
.info:hover { transform: translateX(-6px); }

.track span::before { margin-right: 0; margin-left: 22px; }
.track { animation-name: scroll-rtl; }
@keyframes scroll-rtl { to { transform: translateX(50%); } }

.svc .num { right: auto; left: 22px; }
.fn-n { right: auto; left: 20px; }
.svc li { padding-left: 0; padding-right: 18px; }
.svc li::before { left: auto; right: 0; }
.steps::after, .fn::after { transform-origin: right; }
.field label { left: auto; right: 15px; }
.page-glow { right: auto; left: -140px; }
.pager .nx { text-align: left; }
.other { padding: 10px 10px 10px 18px; }

/* hero card stack: mirror the fan so it spreads toward the page centre, not off the edge */
.gcard:nth-child(1) { --tx: -5%;  --rot: 8deg; }
.gcard:nth-child(2) { --tx: -95%; --rot: -6deg; }
.gcard:nth-child(3) { --tx: 0%;   --rot: -5deg; }
.gcard:nth-child(4) { --tx: -90%; --rot: 5deg; }