/* ═══════════════════════════════════════════════════════════════
   NASBOARD — right-to-left overrides. Loaded only by /ar/.

   dir="rtl" already flips text alignment, flex row order, grid
   column order and any logical property. What it does NOT flip is
   anything physical: left, right, padding-left, margin-right,
   border-left, transform-origin, object-position. Those are the
   51 declarations in site.css that need answering here, and a
   half-mirrored layout looks more broken than an unmirrored one,
   so this covers the decorative pieces too.

   Every selector is scoped to [dir="rtl"] so this file is inert if
   it is ever loaded by an English page by mistake.
   ═══════════════════════════════════════════════════════════════ */

/* ── type ──────────────────────────────────────────────────────
   Francy is a Latin-only single weight, so it cannot carry Arabic
   display type. IBM Plex Sans Arabic does, and it was designed
   against the same geometric skeleton, so the headline voice
   survives the switch. 600 and 700 stand in for what Francy's
   400 does at large sizes. */
[dir="rtl"] body,
[dir="rtl"] .display,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .brand .name,
[dir="rtl"] .fcard .val,
[dir="rtl"] .market-name h3,
[dir="rtl"] .plate-tag .val,
[dir="rtl"] .legal h1 {
  font-family: 'IBM Plex Sans Arabic', 'Outfit', sans-serif;
}
[dir="rtl"] .display,
[dir="rtl"] h1, [dir="rtl"] h2,
[dir="rtl"] .market-name h3 {
  font-weight: 600;
  /* Francy's -.02em tightening is wrong for Arabic: the script joins,
     and negative tracking collides the joins. */
  letter-spacing: 0;
  line-height: 1.25;
}
[dir="rtl"] h3, [dir="rtl"] h4 { font-weight: 600; letter-spacing: 0; }
[dir="rtl"] .brand .name { font-weight: 600; letter-spacing: 0; }
/* Arabic has no capitals, so uppercase + wide tracking does nothing
   but break the joins. */
[dir="rtl"] .badge,
[dir="rtl"] .meta,
[dir="rtl"] .kicker,
[dir="rtl"] .foot h3 {
  text-transform: none;
  letter-spacing: 0;
}
/* Latin runs inside Arabic text (NasBoard, EOR, EGP) keep the Latin face. */
[dir="rtl"] .lat { font-family: 'Outfit', sans-serif; font-weight: 500; }

/* ── layout: borders between columns ───────────────────────────── */
[dir="rtl"] .market + .market { border-left: 0; border-right: 1px solid var(--band-rule); }
[dir="rtl"] .hero-copy        { border-right: 0; border-left: 1px solid var(--rule); }
[dir="rtl"] .grid-cols i             { border-left: 0; border-right: 1px solid var(--rule-faint); }
[dir="rtl"] .grid-cols i:first-child { border-right: 0; }

/* ── layout: column gutters ────────────────────────────────────── */
[dir="rtl"] .hero-grid > .hero-copy      { padding-right: 0; padding-left: clamp(28px, 4vw, 72px); }
[dir="rtl"] .split-grid > .split-media   { padding-right: 0; padding-left: clamp(40px, 6vw, 96px); }
[dir="rtl"] .faq-grid > .faq-aside       { padding-right: 0; padding-left: clamp(28px, 4vw, 64px); }
[dir="rtl"] .foot-grid > *               { padding-right: 0; padding-left: 32px; }
[dir="rtl"] .foot-grid > *:last-child    { padding-left: 0; }
[dir="rtl"] .step-n                      { padding-right: 0; padding-left: 14px; }

@media (max-width: 980px) {
  [dir="rtl"] .hero-copy { border-left: 0; }
  [dir="rtl"] .hero-grid > .hero-copy { padding-left: 0; }
}
@media (max-width: 940px) { [dir="rtl"] .split-grid > .split-media { padding-left: 0; } }
@media (max-width: 820px) { [dir="rtl"] .market + .market { border-right: 0; } }
@media (max-width: 780px) { [dir="rtl"] .foot-grid > * { padding-left: 0; } }

/* ── "the answer" cards ────────────────────────────────────────────
   .gcard reserves 96px on one side for the oversized ghost glyph. The
   glyph was mirrored on the first pass but the padding was not, so the
   copy sat against the empty edge while the glyph overhung the card. */
[dir="rtl"] .gcard { padding: 28px 96px 28px 32px; }
[dir="rtl"] .gcard .ghost { left: auto; right: 6px; }
@media (max-width: 520px) {
  [dir="rtl"] .gcard { padding: 20px 76px 20px 20px; }
  [dir="rtl"] .gcard .ghost { left: auto; right: 2px; }
}
@media (hover: hover) and (pointer: fine) {
  [dir="rtl"] .gcard:hover { transform: translateX(-4px); }
}

/* ── form controls ─────────────────────────────────────────────── */
[dir="rtl"] .ifield > i { left: auto; right: 14px; }
[dir="rtl"] .ifield .input { padding-left: 14px; padding-right: 44px; }
/* The leading icon is on the right in RTL and the arrow moves to the
   left, so each side needs its own clearance. Getting these backwards is
   what put the placeholder underneath the icon. */
[dir="rtl"] select.input {
  /* The arrow is two gradient halves 4px apart. Moving it to the left edge
     means keeping their order, not reversing it: swap them and the chevron
     renders inside out. */
  background-position: 9px calc(50% + 1px), 13px calc(50% + 1px);
  padding-right: 44px;
  padding-left: 24px;
}
[dir="rtl"] .cta-body select.input { padding-right: 40px; padding-left: 30px; }
/* off-screen honeypot: to the right, or it forces a scrollbar in RTL */
[dir="rtl"] .trap { left: auto; right: -9999px; }

/* ── the composed image group in "on the ground" ───────────────── */
[dir="rtl"] .plate       { margin-left: 0; margin-right: 14%; }
[dir="rtl"] .plate-dots  { left: auto; right: 0; }
[dir="rtl"] .plate-tag   { left: auto; right: 0; }
[dir="rtl"] .plate-badge { right: auto; left: 7%; }
[dir="rtl"] .plate-inset { left: auto; right: 0; }
[dir="rtl"] .plate-note  { right: auto; left: 0; }
[dir="rtl"] .plate-mass  { right: auto; left: -2%; transform: rotate(-45deg); }
@media (max-width: 940px) { [dir="rtl"] .plate { margin-right: 18%; } }
@media (max-width: 620px) {
  [dir="rtl"] .plate { margin-right: 0; }
  [dir="rtl"] .plate-badge { left: 6%; }
  [dir="rtl"] .plate-inset { right: auto; left: 0; }
}

/* ── hero mock and its floating cards ──────────────────────────── */
[dir="rtl"] .fc-pay  { left: auto; right: -34px; }
[dir="rtl"] .fc-comp { right: auto; left: -24px; }
[dir="rtl"] .hero-media .blob { left: auto; right: -14%; }
[dir="rtl"] .diamond { left: auto; right: -9%; transform: rotate(-45deg); }
[dir="rtl"] .fc-comp .bar span { transform-origin: right center; }

/* ── decorative marks ──────────────────────────────────────────── */
[dir="rtl"] .close-mark   { right: auto; left: -4%; }
[dir="rtl"] .cta-side .wm { right: auto; left: -12px; }
[dir="rtl"] .svc-on .flag { right: auto; left: 0; }
[dir="rtl"] .panel-wrap .glow,
[dir="rtl"] .laptop-col .blob,
[dir="rtl"] .phone-col .blob { left: auto; right: -12%; }
[dir="rtl"] .laptop-base { margin-left: 0; margin-right: -8%; }
[dir="rtl"] .laptop-base::after { left: auto; right: 50%; transform: translateX(50%); }
[dir="rtl"] .prob-n { right: auto; left: clamp(18px, 2vw, 26px); }

/* ── numbered problem cards and the sequence rule ──────────────── */
/* Only the side flips. The stripe grows with scaleY from the top, so
   changing the origin to "right center" made it unfurl from the middle
   outwards in Arabic and from the top in English — the same affordance
   behaving differently in the two directions. */
[dir="rtl"] .prob::before { left: auto; right: 0; }
[dir="rtl"] .seq-rule     { left: 0; right: 0; }

/* ── reveal animations must sweep the way the eye reads ─────────── */
[dir="rtl"] .js .draw-in        { transform-origin: right center; }
[dir="rtl"] .js .swoosh::after  { transform-origin: right center; }
[dir="rtl"] .swoosh::after      { left: -.03em; right: -.03em; }

/* ── text alignment the browser cannot infer ────────────────────── */
[dir="rtl"] .close p.nas { text-align: right; }
[dir="rtl"] .fset-l .fitem,
[dir="rtl"] .fset-r .fitem { text-align: right; }

/* ── the teal square that ends the headline ─────────────────────── */
[dir="rtl"] .stop { margin-left: 0; margin-right: .04em; }

/* ── tabular figures stay Western and stay LTR inside Arabic ────── */
[dir="rtl"] .num,
[dir="rtl"] .fcard .val,
[dir="rtl"] .step-n,
[dir="rtl"] .prob-n,
[dir="rtl"] .tel .input,
[dir="rtl"] .facts li,
[dir="rtl"] .foot-base {
  font-variant-numeric: tabular-nums;
}
[dir="rtl"] .ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ── directional icons ────────────────────────────────────────────
   dir="rtl" moves a trailing icon to the correct side but does not
   redraw it. An arrow that means "next" has to point the way the
   reader is going, so the glyph itself is mirrored. Icons that are
   not directional (pins, buildings, ticks) must be left alone. */
[dir="rtl"] .ph-arrow-right,
[dir="rtl"] .ph-arrow-up-right,
[dir="rtl"] .ph-arrow-left {
  transform: scaleX(-1);
}
/* the tick that confirms a submission is not a direction */
[dir="rtl"] .tick .ph-check { transform: none; }

/* ── ticker ────────────────────────────────────────────────────────
   translateX(-50%) walks left, which in Arabic is walking backwards
   into text already read. Reversing the animation is enough; the
   markup and the keyframes stay shared. */
[dir="rtl"] .ticker-run { animation-direction: reverse; }

/* ── phone field stays left-to-right ──────────────────────────────
   A dialling code belongs in front of the number, and a phone number
   is read left-to-right in Arabic exactly as it is in English. Mirroring
   this row put +20 after the digits, which is not a phone number.
   Flipping the row itself is the fix; the label above it stays RTL. */
[dir="rtl"] .tel { direction: ltr; }
[dir="rtl"] .tel .ifield > i { right: auto; left: 13px; }
[dir="rtl"] .tel .ifield .input { padding-right: 13px; padding-left: 40px; }
[dir="rtl"] .tel select.input {
  background-position: calc(100% - 13px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
  padding-left: 13px;
  padding-right: 26px;
  text-align: left;
}