/* ═══════════════════════════════════════════════════════════════════════
   locale.css — /he, /fr, /de, /es

   These pages reuse the site's own components (.hero .win .claims .bt .node
   .pr .svc .plan .fq .foot) so they look like the site, not like a stripped
   translation of it. What lives here is only the difference between those
   pages and the English one:

     · they carry no JavaScript, so the few components that depend on JS to
       finish (the route's measured path, the FAQ accordion) get a static
       equivalent below;
     · Hebrew is dir="rtl", and site.css was written LTR-only, so the two
       absolutely-positioned chrome pieces are flipped by hand;
     · the English-only notice, which the English page has no reason to show.

   No JS here either: nothing on these pages needs a script to be readable.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────── chrome ── */
.nav--loc{gap:10px}
[dir="rtl"] .nav{right:auto;left:clamp(16px,3.2vw,50px)}
[dir="rtl"] .tab{left:auto;right:clamp(14px,3vw,46px)}

.loc-sec{padding:clamp(56px,7vw,104px) 0}
.loc-more{margin-top:clamp(28px,3vw,40px)}
.loc-mail{margin-top:26px;color:var(--ink-2)}
.loc-mail a{color:var(--brand-2);font-weight:700}

/* ───────────────────────────────────── the English-only notice ── */
/* Said twice on purpose: once in the hero, where someone decides whether to
   keep reading, and once in full beside the apply button, where they decide
   whether to write to us. A visitor who reads a whole page in their own
   language and only discovers at the reply that the studio works in English
   has been misled by the page, however true every other line on it was. */
.loc-enline{display:flex;align-items:center;gap:9px;margin:22px 0 0;
  color:var(--ink-3);font-size:14.5px;font-weight:600}
.loc-enline [data-icon]{color:var(--ink-3);font-size:16px}

.loc-en{display:flex;gap:18px;align-items:flex-start;margin:0 0 clamp(40px,5vw,64px);
  padding:clamp(22px,2.6vw,30px);border-radius:26px;
  background:var(--lav);border:2px solid transparent}
.loc-en__ic{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:15px;background:var(--card);color:var(--brand)}
.loc-en__ic [data-icon]{font-size:22px}
.loc-en b{display:block;font-size:clamp(17px,1.9vw,20px);font-weight:900;letter-spacing:-.028em}
.loc-en p{margin:8px 0 0;color:var(--ink-2);font-size:16px;max-width:62ch}

/* ──────────────────────────────────────────────────── the route ── */
/* The English page draws the winding line by measuring where the four circles
   actually land, then redrawing on resize — that needs JS. A straight rail
   behind the dots is the honest static version: it still reads as one path
   through four steps, and it cannot drift out of sync with the cards. */
.loc .path::before{content:"";position:absolute;top:6%;bottom:6%;
  left:50%;width:3px;margin-inline-start:-1.5px;border-radius:3px;
  background:linear-gradient(180deg,#6260FF 0%,#8E5BFF 34%,#F5822A 72%,#2FA89A 100%);
  opacity:.5}
@media (max-width:860px){ .loc .path::before{display:none} }

/* ────────────────────────────────────────────────────────── faq ── */
/* <details> instead of the scripted accordion: it opens with no JS, and the
   answers are in the DOM either way, which is what a crawler reads. The .fq
   classes are the site's own, so the styling is identical; these rules only
   replace the bits site.css drives from the .on class. */
.loc .fq__q{list-style:none}
.loc .fq__q::-webkit-details-marker{display:none}
.loc .fq__a{height:auto;overflow:visible}
.loc details.fq[open]::before{transform:scaleY(1)}
.loc details.fq[open] .fq__n{color:var(--brand)}
.loc details.fq[open] .fq__x{background:var(--lav)}
.loc details.fq[open] .fq__x i{background:var(--brand)}
.loc details.fq[open] .fq__x i:last-child{transform:translate(-50%,-50%) rotate(0deg)}
.loc details.fq[open] .fq__q{padding-inline-start:clamp(16px,1.8vw,24px)}

/* ────────────────────────────────────────────────── the footer ── */
.loc .foot__bar{gap:10px 22px}

/* ─────────────────────────────────────────────────────── Hebrew ── */
/* The mono/uppercase/letter-spaced treatment site.css gives its small labels
   is a Latin-display idiom. Hebrew has no case, and tracking pulls the
   letters apart into something that reads as broken rather than as styled —
   so in RTL those labels fall back to the body face at normal tracking.
   Latin strings inside them (VISA, PayPal, the .cerevision.com hostnames)
   are unaffected: they keep their own elements. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .plan__price,
[dir="rtl"] .plan__flag,
[dir="rtl"] .node__meta,
[dir="rtl"] .bt__tag,
[dir="rtl"] .win__tag,
[dir="rtl"] .foot__cols h4,
[dir="rtl"] .foot__mono,
[dir="rtl"] .paym__l{font-family:"Fig",system-ui,sans-serif;letter-spacing:0;text-transform:none}
/* The two that stay mono are the ones holding Latin digits, where the face is
   doing its actual job: the step numbers and the FAQ numbering. */
[dir="rtl"] .node__dot b,[dir="rtl"] .fq__n{font-family:"Mono",ui-monospace,monospace}
/* The hero headline sets an English word (AI) inside a Hebrew sentence. Left
   to itself the bidi algorithm puts the full stop on the wrong side of it. */
[dir="rtl"] .h1 em,[dir="rtl"] .h2 em{unicode-bidi:isolate}
/* The arrow glyph points at the reading direction, so in RTL it points the
   other way. It is one path shared with the English page, so it is mirrored
   here rather than redrawn. */
[dir="rtl"] [data-icon="arrow"] svg{transform:scaleX(-1)}