/* ============================================================ nawa — RTL layer (Arabic /ar pages only) Loaded AFTER styles.css on . Overrides only the physical-direction rules that don't mirror on their own. Scope rule: the marketing chrome + copy flip to RTL and use the Arabic webfont. The device mockups (.showcase / .screen and everything inside) deliberately stay LTR + latin — they depict the real English app UI, so they must NOT mirror. Centering transforms (translateX(-50%)) are symmetric and are left alone. ============================================================ */ /* Arabic type for the site itself, not the fake app screens */ body{font-family:'IBM Plex Sans Arabic',var(--body-f);} .eyebrow,.nav-link,.cta-btn,.hero p.lede,.hero-actions,.hero-also, h1,h2,h3,h4,p,li,a,button,input,label{font-family:'IBM Plex Sans Arabic',var(--body-f);} /* brand wordmark + the device screens keep their latin fonts */ .brand,.nw,.showcase,.showcase *,.screen,.screen *{font-family:var(--pixel);} .brand{font-family:var(--pixel);} .showcase,.showcase *,.screen,.screen *{font-family:var(--body-f);} /* ---- header: nav sits at the start (now the right), CTA at the end ---- */ .nav{margin-right:12px;margin-left:auto;} .nav-toggle{margin-right:6px;margin-left:auto;} /* the eyebrow dash draws from the start edge */ .eyebrow{flex-direction:row;} /* ---- default text alignment ---- */ .hero-copy,.sec-head,.eyebrow,.hero p.lede{text-align:right;} @media (max-width:960px){ .hero-copy{text-align:right;} } /* ---- the device rig: mirror the phone overlap to the other side ---- */ /* desktop hero grid: swap the two columns so copy stays on the reading (start) side and the showcase on the other */ .hero-grid{direction:rtl;} /* the phone overlaps the monitor from the left in LTR (margin-left:-66px); in RTL the natural mirror is overlapping from the right */ .phone{margin-left:0;margin-right:-66px;} /* keep the rig itself internally LTR so screens render correctly */ .showcase{direction:ltr;} /* ---- footer / chips / anything using margin-*:auto for push ---- */ .foot-cols,.foot-bar{direction:rtl;} /* ---- comparison table & lists: bullets/marks on the right ---- */ ul,ol{padding-right:1.2em;padding-left:0;} /* numbers, prices, phone numbers, latin brand names stay LTR inline */ .nw,.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block;} /* ---- headline typography ---------------------------------------------- styles.css sets latin display metrics on h1/h2/h3 that Arabic inherits: 1) `.sec-head{max-width:56ch}` never grows, but `.sec-head h2` is `clamp(27px,3.6vw,40px)`. Past ~1112px the font pins at its 40px cap inside a box frozen at ~565px, while the longest Arabic headline needs ~721px — so it wrapped. Narrow screens only looked right because the font had shrunk. Give the headline the room; keep the paragraph at a readable measure. 2) `letter-spacing:-.02em` tightens a *connected* script and damages the letter joins; `line-height:1.1` leaves Arabic's tall ascenders and deep descenders colliding whenever a headline does take two lines. */ h1,h2,h3{letter-spacing:normal;} h1{line-height:1.3;} h2,h3{line-height:1.4;} .sec-head{max-width:min(100%,820px);} .sec-head p:not(.eyebrow){max-width:60ch;} /* if a headline must wrap, split it evenly instead of leaving an orphan */ .hero h1,.sec-head h2,[data-mrv="final"] h2{text-wrap:balance;}