/* ──────────────────────────────────────────────────────────────────────────
   i18n.css — language switch, RTL support, and the Arabic face.
   Shared by index.html, about.html and privacy.html.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Compact EN | ES | AR switch ────────────────────────────────────────── */
.lang-switch{display:inline-flex;align-items:stretch;border:1px solid var(--brd,var(--line,rgba(20,27,58,.12)));
             border-radius:10px;overflow:hidden;background:#fff;flex-shrink:0}
.lang-opt{appearance:none;-webkit-appearance:none;background:#fff;border:0;
          border-inline-start:1px solid var(--brd,var(--line,rgba(20,27,58,.12)));
          color:var(--muted,#6f6154);font-family:inherit;font-weight:700;font-size:12.5px;line-height:1;
          padding:9px 11px;cursor:pointer;transition:background .18s,color .18s}
.lang-opt:first-child{border-inline-start:0}
.lang-opt:hover{color:var(--ink,#241a12);background:rgba(234,88,12,.07)}
.lang-opt[aria-pressed="true"]{background:var(--grad,#ea580c);color:#fff}
.lang-opt:focus-visible{outline:2px solid var(--indigo,#ea580c);outline-offset:2px;position:relative;z-index:1}

/* ── Arabic face. Only applied when the document is in Arabic; the Latin
      headline font has no Arabic coverage. ───────────────────────────────── */
html:lang(ar) body,
html:lang(ar) h1, html:lang(ar) h2, html:lang(ar) h3,
html:lang(ar) .logo, html:lang(ar) .sec-title, html:lang(ar) .eyebrow,
html:lang(ar) .btn, html:lang(ar) input, html:lang(ar) button{
  font-family:'Noto Sans Arabic','Geeza Pro','Al Bayan',Tahoma,'Segoe UI',system-ui,sans-serif;
}
/* Arabic sits lower on the line and needs a little more leading. */
html:lang(ar) body{line-height:1.8}
html:lang(ar) h1,html:lang(ar) h2,html:lang(ar) h3,html:lang(ar) .sec-title{line-height:1.35}
/* MSA reads poorly in all-caps letterspacing. */
html:lang(ar) .eyebrow,html:lang(ar) .nav-label,html:lang(ar) .tbl th{text-transform:none;letter-spacing:0}

/* ── RTL ────────────────────────────────────────────────────────────────── */
html[dir="rtl"] body{text-align:start}
/* Nothing may spill sideways once the axis flips. */
html[dir="rtl"] body{overflow-x:hidden}

/* Product mockups stay LTR: they are pictures of an English UI, and mirroring
   a screenshot misrepresents the product. */
html[dir="rtl"] .win,
html[dir="rtl"] .app,
html[dir="rtl"] .hero-visual,
html[dir="rtl"] .hero-back,
html[dir="rtl"] .hero-win{direction:ltr;text-align:left}

/* The wordmark is a name, not a sentence: it must not reorder in RTL. */
html[dir="rtl"] .logo{direction:ltr}

/* Arrows point the other way when the text does. */
html[dir="rtl"] .flip-x{display:inline-block;transform:scaleX(-1)}

/* ── AR-only scope notes. Hidden unless the page is in Arabic. ──────────── */
.ar-only,.es-only{display:none}
html:lang(ar) .ar-only{display:block}
html:lang(es) .es-only{display:block}
.scope-note{margin-top:14px;font-size:14px;line-height:1.75;color:var(--muted,#6f6154);
            background:rgba(234,88,12,.07);border:1px solid var(--brd,var(--line,rgba(20,27,58,.12)));
            border-inline-start:3px solid var(--indigo,#ea580c);border-radius:10px;padding:12px 16px}
.scope-note--legal{margin:0 0 26px}

/* Latin-script runs keep their own direction inside Arabic text. */
bdi{unicode-bidi:isolate}

/* ── Narrow screens ─────────────────────────────────────────────────────── */
/* The three-way switch is wider than the single button it replaced. Below
   480px the header keeps the switch and the menu and drops the duplicate
   CTAs — the hero's own "Start your free trial" is one scroll away. */
@media(max-width:480px){
  .nav-cta .btn{display:none}
  .lang-opt{padding:8px 9px;font-size:11.5px}
}

/* The product mockups are fixed-width pictures of a desktop UI. Let them
   scroll inside their own frame rather than widening the whole page —
   otherwise the page scrolls sideways, which is far more obvious in RTL. */
@media(max-width:940px){
  .app-main{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .kpi.wide,.chart-sm{max-width:100%}
  svg.chart-sm{width:100%}
}

/* privacy.html's nav is a direct child of <header> (index/about wrap theirs in
   .wrap). With the switch added, logo + switch + back-link no longer fit on
   one line at phone width in any language, so let it wrap. */
@media(max-width:480px){
  header > nav{padding-inline:16px;flex-wrap:wrap;row-gap:10px}
}