/* RTL overrides for the v2-based pages (/, /founders, /investors, /falah, /pricing, /about) in Arabic.
   Load after landing.css, pages.css, the page's own sheet, port.css and (home) v3.css. Every rule is scoped to
   html[dir="rtl"], which also lifts it above the rule it mirrors; where that rule has a responsive or a state
   variant, the variant is repeated here so it still wins.
   Mirrored: physical offsets, margins and paddings, text-align, one-sided radii (chat tails), inset hairlines
   drawn with box-shadow, transform origins, X entrances, background positions, reveal clips, shimmer direction,
   and the arrow/send glyphs. Grid and flex rows already reverse under dir="rtl" and are not flipped again;
   block-level progress fills (.kbar i, .bar i) already start at the right.
   Never flipped: photos, the video and its play glyph and scrubber, the FundingFactory mark, the Falah images,
   avatars, the deck slides' pictures, the SVG charts and other illustrations with meaning, check marks,
   spinners and score rings. The fake cursors (.kcur) stay at left:0 because the scripts move them from bounding rects;
   on these pages the scripts park them at the picture's right edge, so they come in from the right (FF.cursor in shared.js).
   The home page's v1 sections (inside .ld) are mirrored by landing-d.css and are not touched here. */

/* =============== landing.css: nav, control grid, note, FAQ, last call, footer (every page) =============== */
@media (max-width:900px){html[dir="rtl"] .navr{margin-left:0;margin-right:auto}}
/* the nav's lockup follows the page: the Arabic pages show the approved Arabic cut, mark on the right
   (src/v3/render.ts swaps the word); the footer's wordmark cycles English and Arabic and keeps its order */
html[dir="rtl"] .fwm{direction:ltr}

/* "You stay in control": the hairlines between cells sit on the left */
html[dir="rtl"] .cc{box-shadow:inset 1px 0 0 var(--line),inset 0 -1px 0 var(--line)}
html[dir="rtl"] .cc:nth-child(3n){box-shadow:inset 0 -1px 0 var(--line)}
html[dir="rtl"] .cc:nth-child(n+4){box-shadow:inset 1px 0 0 var(--line)}
html[dir="rtl"] .cc:nth-child(6){box-shadow:none}

/* Sultan's note: the soft light comes from the right; his social buttons follow the name on the left */
html[dir="rtl"] .note{background:radial-gradient(40% 70% at 100% 50%,rgba(139,156,255,.18),transparent 70%)}
html[dir="rtl"] .v3-soc{margin-left:0;margin-right:14px}
@media (max-width:980px){html[dir="rtl"] .v3-soc{margin:18px 7px 0 0}}
/* his video card keeps its play glyph and scrubber left to right, as media controls do */
html[dir="rtl"] .vert .prog{direction:ltr}

/* FAQ "ask Falah" (inner pages): the light from the left; your question on the left with its tail low-left,
   Falah's answer on the right with its tail low-right */
html[dir="rtl"] .faq{background:radial-gradient(45% 70% at 0% 40%,rgba(139,156,255,.16),transparent 70%)}
html[dir="rtl"] .fb-me{border-radius:16px 16px 16px 4px}
html[dir="rtl"] .fb-fa p{border-radius:16px 16px 4px 16px}

/* last call: the horizon glow and its light sit left of centre; the dot fields swap sides */
html[dir="rtl"] .lc .lv2::before{background:radial-gradient(60% 70% at 30% 110%,rgba(49,87,255,.42),transparent 70%)}
html[dir="rtl"] .lc .lv2 .hz-glow{left:30%}
html[dir="rtl"] .hz-dots.l{left:auto;right:0;transform:scaleX(-1)}
html[dir="rtl"] .hz-dots.r{right:auto;left:0;transform:none}

/* =============== pages.css: the shared app shell and patterns (inner pages) =============== */
html[dir="rtl"] .kapp{text-align:right}
html[dir="rtl"] .kapp-main{margin:6px 0 6px 6px}
html[dir="rtl"] .kapp-top{padding:0 20px 0 16px}

/* sending limits timeline (founders, investors): stops read right to left, the solid line starts at the right
   end. shared.js sizes .tprog from the timeline's left edge, which is wrong once the stops are mirrored, so in
   RTL the line's length comes from which stops are lit (three equal columns, the stop icon 38px at each
   column's start) and overrides the script's inline width; below 901px the line sits under the first icon
   in LTR and is simply hidden. */
html[dir="rtl"] .ktev{padding-right:0;padding-left:32px}
html[dir="rtl"] .ktl{--kp:40px}
html[dir="rtl"] .fx-lim .ktl{--kp:44px}
html[dir="rtl"] .ktl .tprog{left:auto;right:var(--kp);width:0!important}
html[dir="rtl"] .ktl:has(>.ktev:nth-of-type(1).lit) .tprog{width:19px!important}
html[dir="rtl"] .ktl:has(>.ktev:nth-of-type(2).lit) .tprog{width:calc((100% - 2 * var(--kp)) / 3 + 19px)!important}
html[dir="rtl"] .ktl:has(>.ktev:nth-of-type(3).lit) .tprog{width:calc((100% - 2 * var(--kp)) * 2 / 3 + 19px)!important}
@media (max-width:900px){html[dir="rtl"] .ktl .tprog{display:none}}
/* reduced motion: the script lights every stop and leaves the line at zero length */
@media (prefers-reduced-motion:reduce){html[dir="rtl"] .ktl .tprog{display:none}}
html[dir="rtl"] .fx-caps div+div{box-shadow:inset -1px 0 0 var(--line)}
@media (max-width:1000px){html[dir="rtl"] .fx-caps div+div{box-shadow:inset 0 1px 0 var(--line)}}

/* =============== founders.css =============== */
/* hero: the stepper on the right, its rule and line on its left */
html[dir="rtl"] .fx-steps{padding:18px 18px 18px 14px;box-shadow:inset 1px 0 0 var(--fx-rule)}
html[dir="rtl"] .fx-st::after{left:auto;right:9.5px}
html[dir="rtl"] .fx-area+.fx-area{box-shadow:inset -1px 0 0 var(--fx-rule)}
@media (max-width:640px){
  html[dir="rtl"] .fx-area:nth-child(n+4){box-shadow:inset 0 1px 0 var(--fx-rule),inset -1px 0 0 var(--fx-rule)}
  html[dir="rtl"] .fx-area:nth-child(4){box-shadow:inset 0 1px 0 var(--fx-rule)}
}
/* feature showcase: the tab timer fills from the right */
html[dir="rtl"] .ftab .bar{transform-origin:100% 50%}
/* showcase · deck: copy on the right, the generated picture on the left, revealed from the left */
html[dir="rtl"] .fo-sl{background:radial-gradient(120% 140% at 100% 100%,#22307A 0%,#0E1433 55%)}
html[dir="rtl"] .fo-sl .kim::after{background:linear-gradient(270deg,#0E1433 0%,rgba(14,20,51,0) 45%)}
html[dir="rtl"] .fo-sl .kim{clip-path:inset(0 100% 0 0)}
html[dir="rtl"] .fo-sl.img .kim{clip-path:inset(0)}
html[dir="rtl"] .fo-sl .kgen{right:auto;left:8px}
html[dir="rtl"] .fo-sl .shim{right:auto;left:0;animation-direction:reverse}
html[dir="rtl"] .fo-sl h5.ty::after{margin-left:0;margin-right:2px}
/* showcase · numbers */
html[dir="rtl"] .fo-cn2 .kchip{padding:0 10px 0 12px}
html[dir="rtl"] .fo-cn2 .kchip .ok{margin-left:0;margin-right:auto}
html[dir="rtl"] .fo-cn2 .kchip[data-s="on"] .ok::before{margin:0 0 2px 3px}
html[dir="rtl"] .fo-mrr b small{margin-left:0;margin-right:6px}
/* showcase · pipeline: the new-reply dot on the card's far corner */
html[dir="rtl"] .fo-kb .cd .dot{right:auto;left:8px}
/* sending limits: the send and the follow-up glyphs point the reading way */
html[dir="rtl"] .pg-founders .ktev:nth-of-type(1)>.ph,html[dir="rtl"] .ktev:nth-of-type(2)>.ph{transform:scaleX(-1)}

/* =============== investors.css =============== */
html[dir="rtl"] .iv-l{box-shadow:inset 1px 0 0 #EEF0F4}
html[dir="rtl"] .iv-th .cnt{margin-left:0;margin-right:auto}
/* the cheque-size slider: investors.js sets its handles and fill as inline left offsets, so the plain track
   (bar, fill, two handles, no text) is mirrored whole; its labels below reverse on their own */
html[dir="rtl"] .iv-range{transform:scaleX(-1)}
/* toggles: off on the right, on to the left */
html[dir="rtl"] .iv-tog::after{left:auto;right:2px}
html[dir="rtl"] .iv-tog.on::after{left:auto;right:16px}
html[dir="rtl"] .iv-docs .stp.fin .spn::before{margin:0 3px 2px 4px}

/* =============== falah.css =============== */
html[dir="rtl"] .fa-h1 .mas{margin:0 .02em -.12em .06em}
/* the session: Falah's panel on the right with its rule on the left; your messages on the left, tail low-left */
html[dir="rtl"] .fh-st{box-shadow:inset 1px 0 0 #EEF0F4}
html[dir="rtl"] .fa-me{border-radius:14px 14px 14px 4px}
html[dir="rtl"] .fh-it .fa-me{margin-left:0;margin-right:auto}
html[dir="rtl"] .fh-hi{border-radius:16px 16px 4px 16px}
html[dir="rtl"] .fh .fa-draft .dl{margin-left:0;margin-right:auto}
html[dir="rtl"] .fa-draft .acts em{margin-right:0;margin-left:auto}
html[dir="rtl"] .fa-comp{padding:0 14px 0 6px}
html[dir="rtl"] .fh .fa-comp.typ .ct::after{margin-left:0;margin-right:1px}
html[dir="rtl"] .fa-comp .snd .ph{transform:scaleX(-1)}
@media (max-width:900px){html[dir="rtl"] .fh-st{box-shadow:inset 0 -1px 0 #EEF0F4}}
/* how Falah works it out: the connecting line fades towards the left, the progress starts at the right.
   falah.js sizes .fa-prog from the row's left edge, so where the columns are mirrored its length comes from
   the lit steps instead (each step's dot centred in its column, 16px gaps) and overrides the script's inline
   width. In one column (640px and below) the script's width is the same either way and is left alone. */
html[dir="rtl"] .fa-flow::before{background:linear-gradient(270deg,rgba(58,92,192,.5),rgba(58,92,192,.15))}
html[dir="rtl"] .fa-prog{left:auto;right:12.5%}
@media (min-width:1001px){
  html[dir="rtl"] .fa-prog{width:0!important}
  html[dir="rtl"] .fa-flow:has(>.fa-st:nth-of-type(2).lit) .fa-prog{width:calc((100% + 16px) / 4 - 6px)!important}
  html[dir="rtl"] .fa-flow:has(>.fa-st:nth-of-type(3).lit) .fa-prog{width:calc((100% + 16px) / 2 - 6px)!important}
  html[dir="rtl"] .fa-flow:has(>.fa-st:nth-of-type(4).lit) .fa-prog{width:calc((100% + 16px) * 3 / 4 - 6px)!important}
}
@media (min-width:641px) and (max-width:1000px){
  html[dir="rtl"] .fa-prog{width:0!important}
  html[dir="rtl"] .fa-flow:has(>.fa-st:nth-of-type(2).lit) .fa-prog{width:calc(62.5% + 4px)!important}
  html[dir="rtl"] .fa-flow:has(>.fa-st:nth-of-type(3).lit) .fa-prog{width:calc(12.5% - 4px)!important}
  html[dir="rtl"] .fa-flow:has(>.fa-st:nth-of-type(4).lit) .fa-prog{width:calc(62.5% + 4px)!important}
}
/* reduced motion: the script jumps to its end state (every step lit, the line at 75%) */
@media (prefers-reduced-motion:reduce) and (min-width:641px){html[dir="rtl"] .fa-flow:has(>.fa-st:nth-of-type(4).lit) .fa-prog{width:75%!important}}
html[dir="rtl"] .fa-card .r em{margin-left:0;margin-right:auto}
/* prompts: the question bubble's tail low-right */
html[dir="rtl"] .fa-qa .q{border-radius:14px 14px 4px 14px}
/* commitments: approval footer and the highlighter sweep from the right */
html[dir="rtl"] .fa-ap .fft em{margin-right:0;margin-left:auto}
html[dir="rtl"] .fa-ap mark{background-position:100% 0}
html[dir="rtl"] .fa-ci{box-shadow:inset 1px 0 0 var(--line),inset 0 -1px 0 var(--line)}
html[dir="rtl"] .fa-ci:nth-child(2n){box-shadow:inset 0 -1px 0 var(--line)}
html[dir="rtl"] .fa-ci:nth-child(5){box-shadow:inset 1px 0 0 var(--line)}
html[dir="rtl"] .fa-ci:nth-child(6){box-shadow:none}
/* your data: the strike-through draws from the right; the task's send glyph points the reading way */
html[dir="rtl"] .fa-ins .hd .pill{margin-left:0;margin-right:auto}
html[dir="rtl"] .fa-ir.ino .fnm::after{transform-origin:right center}
html[dir="rtl"] .fa-ins .hd>.ph{transform:scaleX(-1)}

/* =============== pricing.css =============== */
html[dir="rtl"] .pr-plans{text-align:right}
html[dir="rtl"] .pr-pc .held{left:auto;right:20px}
html[dir="rtl"] .pr-f{box-shadow:inset 1px 0 0 var(--line),inset 0 -1px 0 var(--line)}
html[dir="rtl"] .pr-f:nth-child(3n){box-shadow:inset 0 -1px 0 var(--line)}
html[dir="rtl"] .pr-f:nth-child(n+4){box-shadow:inset 1px 0 0 var(--line)}
html[dir="rtl"] .pr-f:nth-child(6){box-shadow:none}

/* =============== about.css =============== */
html[dir="rtl"] .ab-two{text-align:right}
html[dir="rtl"] .ab-p .hd .avs img+img{margin-left:0;margin-right:-10px}
html[dir="rtl"] .ab-sq .cr{margin-left:0;margin-right:-6px}
html[dir="rtl"] .ab-ms .bb{border-radius:12px 4px 12px 12px}
html[dir="rtl"] .ab-mt em{margin-left:0;margin-right:auto}
html[dir="rtl"] .acap .ph{margin-left:0;margin-right:auto}
html[dir="rtl"] .ab-p.ai li:nth-child(2) .ph{transform:scaleX(-1)}
/* beliefs: the rule between columns on the left of each */
html[dir="rtl"] .ab-b{padding:32px 0 0 32px}
html[dir="rtl"] .ab-b+.ab-b{padding-left:32px;padding-right:32px;box-shadow:inset -1px 0 0 var(--line)}
@media (max-width:1000px){html[dir="rtl"] .ab-b,html[dir="rtl"] .ab-b+.ab-b{padding:28px 0;box-shadow:inset 0 -1px 0 var(--line)}}
/* roadmap: the "now" card's light from the top-left; the progress line fills from the right */
html[dir="rtl"] .ab-r.now{background:radial-gradient(130% 120% at 0% 0%,#5B7BDB 0%,#3A5CC0 42%,#24379A 100%)}
html[dir="rtl"] .ab-line{background:linear-gradient(270deg,#3A5CC0 0%,#3A5CC0 33.3%,#D9DEEF 33.3%)}