/* The Arabic pages (/ar/): right-to-left, set in Cairo (self-hosted, OFL; Arabic + Latin subsets from
   Google Fonts). Loaded last, and only by the Arabic pages: Cairo, Arabic leading, the arrows mirrored. The tools'
   and the guide's layout is tools.css, shared with the English pages. */
@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url('/static/fonts/cairo-arabic-var.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url('/static/fonts/cairo-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

html[lang="ar"]{--font-ar:'Cairo','Segoe UI',Tahoma,system-ui,sans-serif;
  /* the site's display serif and grotesk have no Arabic letters: Cairo takes both roles; the mono keeps
     its digits and falls back to Cairo for Arabic */
  --font-display:var(--font-ar);--font-body:var(--font-ar);--font-mono:'IBM Plex Mono','Cairo',ui-monospace,monospace}
/* Arabic is joined script: tracking breaks it */
html[lang="ar"] *{letter-spacing:0 !important}
/* and it has no italic: the browser would only slant it */
html[lang="ar"] .abt-key{font-style:normal}
/* About's small labels are Arabic words: the mono's wide spaces would pull them apart */
html[lang="ar"] .abt-eyebrow,html[lang="ar"] .abt-label,html[lang="ar"] .abt-chips-lbl{font-family:var(--font-ar)}
/* and so are the landing's: the statement's group labels, the "coming to your account" pills, the app window's
   labels, How it works' card labels and Proof's step tags */
html[lang="ar"] .acct-soon,html[lang="ar"] .os-title,
html[lang="ar"] .os-meta,html[lang="ar"] .zs-lbl,
html[lang="ar"] .pf-tag,html[lang="ar"] .pf-live{font-family:var(--font-ar)}
/* and the rest of the landing's: the hero's keycaps and step path, the lure's chip, the menu preview's chips, the
   early-access pills, the Payoneer card's rate */
html[lang="ar"] .lk,html[lang="ar"] .lp-b,html[lang="ar"] .ea-pill,html[lang="ar"] .lure-chip-t,
html[lang="ar"] .ac-chip,html[lang="ar"] .ac-pill,html[lang="ar"] .pc-to-lbl b{font-family:var(--font-ar)}
/* the angled app window turns the other way, its glow and light with it */
@media (min-width:861px){
  [dir="rtl"] .os-stage{background:radial-gradient(120% 90% at 15% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 62%),
    color-mix(in srgb,var(--accent) 3%,var(--panel))}
  [dir="rtl"] .os-stage .os-window{rotate:.32 1 0 9deg;box-shadow:0 44px 90px -40px rgba(0,0,0,.8),24px 30px 70px -40px var(--accent-glow)}
}
/* Cairo's line boxes are taller than its line height: a founder's name and the line under it touched by 3px */
html[lang="ar"] .abt-founder b{margin-bottom:3px}
/* the login fields type left to right (addresses and passwords are Latin), from the form's right-hand edge */
html[lang="ar"] .auth-field input[dir="ltr"]{text-align:right}
/* forward arrows point left in a right-to-left page (scale, so hover nudges still apply) */
[dir="rtl"] svg:has(> use[href="#i-arrow"]),[dir="rtl"] svg:has(> use[href="#i-arrow-l"]){scale:-1 1}
/* Arabic letterforms and their marks (ّ ُ ً) rise and fall further than Latin: text that wraps needs looser
   leading than the Latin design uses, or the lines collide. Single-line chips, keys and buttons are left as is. */
html[lang="ar"] h1{line-height:1.42 !important}
html[lang="ar"] h2{line-height:1.5 !important}
html[lang="ar"] h3,html[lang="ar"] h4,html[lang="ar"] h5,html[lang="ar"] h6{line-height:1.55 !important}
html[lang="ar"] p,html[lang="ar"] li,html[lang="ar"] summary,html[lang="ar"] dt,html[lang="ar"] .lead,html[lang="ar"] .lp-mega-ea-t,html[lang="ar"] .ea-what{line-height:1.75 !important}
/* the integrations mock is a fixed-height screen: at 1.75 its two-line note ran 5px under the clip */
html[lang="ar"] body,html[lang="ar"] button,html[lang="ar"] input,html[lang="ar"] select{font-family:var(--font-ar)}
/* Arabic has no letter-case and no tracking: the display serif and the mono eyebrows switch to Cairo */
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .lp-eyebrow,html[lang="ar"] .lead{font-family:var(--font-ar);letter-spacing:0;text-transform:none}
html[lang="ar"] .lp-wordmark,html[lang="ar"] [lang="en"]{font-family:var(--font-body)}
html[lang="ar"] .lp-skip{left:auto;right:12px}
/* the calculator's numbers are typed left to right; in a right-to-left field they sit at its start */
html[lang="ar"] .fld-in input{text-align:right}