/* ============================================================
   Inkstone — Arabic / RTL overrides
   Loaded AFTER styles.css, only on the Arabic page.
   ============================================================ */

:root{
  /* One modern Arabic family across the board — pairs with the Latin grotesque system */
  --serif:'IBM Plex Sans Arabic', system-ui, sans-serif;
  --sans:'IBM Plex Sans Arabic', system-ui, sans-serif;
  --mono:'IBM Plex Sans Arabic', system-ui, sans-serif;
}

body{ font-family:var(--sans); }

/* Arabic has no letter-spacing — it breaks glyph joining */
*{ letter-spacing:normal !important; }

/* Arabic has no italics — emphasis stays upright, just coloured */
em, .section-head h2 em, .hero h1 em, .book h2 em, em.s, .metric .num.word{
  font-style:normal !important;
}
.metric .num.word{ color:var(--red); }

/* A sans needs more weight than Instrument Serif did — give Arabic headlines real presence */
.hero h1, .section-head h2, .book h2{ font-weight:600; line-height:1.4; letter-spacing:-.01em; }
.metric .num, .case .meta h3, .tier .tname h3, .faq h3, .ad-h, .a-name, .a-hnum, .kpi-n, .led-bal, .ring-n, .a-tv, .price{ font-weight:600; }
.hero .lede, .book .lede{ line-height:1.7; }
p, .svc .feat li, .proc-step p, .tier ul li, .faq p{ line-height:1.85; }

/* ---- arrows point the other way in RTL ---- */
.arw{ display:inline-block; transform:scaleX(-1); }
.btn:hover .arw{ transform:translateX(-4px) scaleX(-1); }
.textlink:hover .arw{ transform:translateX(-2px) scaleX(-1); }

/* ---- mock UIs stay LTR (they're English product screens) ---- */
.mock, .browser, .phone, .camp, .ad-feed, .ad-story{ direction:ltr; text-align:left; }

/* ---- metric dividers → logical side ---- */
.metric{ border-left:0 !important; border-inline-start:1px solid var(--line); padding-left:0; padding-inline-start:30px; }
.metric:first-child{ border-inline-start:0; padding-inline-start:0; }

/* ---- process step dividers + accent bar → logical side ---- */
.proc-step{ border-right:0 !important; border-inline-end:1px solid var(--d-line); padding:34px 0 38px 26px; }
.proc-step:last-child{ border-inline-end:0; }
.proc-step .bar{ left:auto; right:0; }

/* ---- work card badge sits in the inline-start (right) corner ---- */
.case .thumb .badge{ left:auto; right:18px; }

/* ---- hero flow accent + fade mirror to the empty (left) side ---- */
.hero-fade{
  background:
    linear-gradient(270deg, var(--paper) 4%, transparent 42%),
    linear-gradient(0deg, var(--paper) 1%, transparent 16%);
}
#flow{
  -webkit-mask-image:radial-gradient(120% 130% at -4% -10%, #000 0%, #000 38%, rgba(0,0,0,.35) 62%, transparent 80%);
  mask-image:radial-gradient(120% 130% at -4% -10%, #000 0%, #000 38%, rgba(0,0,0,.35) 62%, transparent 80%);
}
#svc-hero{
  -webkit-mask-image:linear-gradient(to right, #000 36%, rgba(0,0,0,.45) 62%, transparent 84%);
  mask-image:linear-gradient(to right, #000 36%, rgba(0,0,0,.45) 62%, transparent 84%);
}
#hero-premium{
  -webkit-mask-image:radial-gradient(135% 130% at -8% 6%, #000 0%, #000 40%, rgba(0,0,0,.4) 64%, transparent 84%);
  mask-image:radial-gradient(135% 130% at -8% 6%, #000 0%, #000 40%, rgba(0,0,0,.4) 64%, transparent 84%);
}
#hero-flow{
  -webkit-mask-image:radial-gradient(120% 130% at -4% -10%, #000 0%, #000 38%, rgba(0,0,0,.35) 62%, transparent 80%);
  mask-image:radial-gradient(120% 130% at -4% -10%, #000 0%, #000 38%, rgba(0,0,0,.35) 62%, transparent 80%);
}
#flow-dark{
  left:0; right:auto;
  -webkit-mask-image:radial-gradient(120% 130% at 0% 0%, #000 0%, #000 40%, rgba(0,0,0,.4) 64%, transparent 82%);
  mask-image:radial-gradient(120% 130% at 0% 0%, #000 0%, #000 40%, rgba(0,0,0,.4) 64%, transparent 82%);
}
#flow-book{
  left:0; right:auto;
  -webkit-mask-image:radial-gradient(120% 140% at 0% 100%, #000 0%, #000 38%, rgba(0,0,0,.4) 62%, transparent 80%);
  mask-image:radial-gradient(120% 140% at 0% 100%, #000 0%, #000 38%, rgba(0,0,0,.4) 62%, transparent 80%);
}
.book .book-fade{ background:linear-gradient(270deg, var(--d-bg) 10%, transparent 56%); }

/* ---- phone fields stay LTR so they align exactly like the English layout ---- */
.field-phone, .bf-phone{ direction:ltr; }

/* numbers / latin runs render LTR inside RTL text */
.cc, .bf .bf-phone select, .field-phone input, .bf-phone input,
.metric .num, .a-time, .price, .kpi-n, .a-hnum{ direction:ltr; }
.metric .num, .price{ text-align:right; }

/* language switch pill in nav */
.lang-switch{
  font-family:var(--mono); font-size:13px; font-weight:600; color:var(--muted);
  border:1px solid var(--line2); border-radius:999px; padding:7px 13px; transition:border-color .2s, color .2s;
}
.lang-switch:hover{ color:var(--ink); border-color:var(--ink); }