/* Furrsati v7 · ar.html: the approved homepage mirrored for Arabic, right to left. Loaded AFTER pages/index.css and
   sec/{money,faces,cost,side,getapp}.css, which stay untouched. This file only re-states what assumed left-to-right,
   in logical properties where the box flips with the page (inset-inline-*, margin/padding-inline, start/end), and
   mirrored values where a centred or drawn thing has to move to the other side.
   Not mirrored on purpose: the logo, phone screenshots, photos, the QR, the drawings inside the shelf cards
   (their SVG keeps ltr geometry; their words are Arabic), and the digits inside dollar amounts.
   Order: type · hero · shelf · how · money · faces · cost · questions · freelancers · get the app · shared bits. */

/* ═══ type: Tajawal (sys.css already maps --display and --ui to it on lang=ar). Arabic letters join, so no
   letter-spacing anywhere; Arabic needs taller lines than Futura; dollar amounts keep Futura with Western digits. ═══ */
:root { --amt: "Futura Furrsati", "Tajawal", system-ui, sans-serif; }
body { font-family: var(--ui); }
main *, .foot *, .sheet * { letter-spacing: 0 !important; }
main .title { line-height: 1.12; font-weight: 800; }
main .title__light { line-height: 1.4; font-weight: 400; }
main .kicker { font-size: 15px; }
main .kicker__n, .t-num { font-family: var(--ui); }
.wc__p b, .stk__price strong, .ui__row b, .prop strong, .vault__t b, .safe__amt, .sc-wallet b, .rrow b, .chip-btn, .t-amt { font-family: var(--amt); }
.t-amt { font-weight: 700; }
.hs__t { line-height: 1.15; font-weight: 800; }
.hs__txt p, .faces__lead, .safe__lead, .cost__lead, .side__lead, .ga__lead, .hero__lead { line-height: 1.7; }
.stk__t small.muted, .ui__eyebrow, .receipt__h, .printer__q, .pass__tag, .pass__foot { text-transform: none; }
.ui__eyebrow { font-size: 12.5px; }
.receipt__h, .printer__q { font-size: 14px; }
.pass__foot { font-size: 11.5px; }
.stk__t small.muted { font-size: 12px; }

/* ═══ 1. HERO: the headline stack, the copy and the "Sample" tag move to the right; the person and her arch move
   to the left third (--px 66% → 34%); every sticker sits at the mirror of its English spot. ═══ */
.hl__hire, .hl .w { left: auto; inset-inline-start: 0; }
.hl__hire { font-weight: 800; }
.hl .w { font-weight: 800; }
.ln { line-height: 1.32; padding: .06em .04em .24em; margin: -.22em -.04em -.24em; }
.ch { transition-duration: 1.1s; }
.stk__in { padding: 10px; padding-inline-end: 16px; }
.stk__price { padding: 12px; padding-inline: 16px 18px; }
.pill { font-size: 15px; }
.pill__bar { transform-origin: 100% 50%; }            /* the pill's timer fills from the right */
.hero__tag { right: auto; inset-inline-end: var(--g); }
@media (max-width: 959px) {
  .stk--a { right: auto; inset-inline-end: 8px; }
  .stk--c { left: auto; inset-inline-start: 8px; }
  .stk__in { padding: 8px; padding-inline-end: 12px; }
}
@media (min-width: 960px) {
  .hero { --px: 34%; }
  .hero__copy { left: auto; inset-inline-start: var(--g); }
  /* English: left = px + 9vw (etc.). Mirror: the same distance from the right edge, i.e. 100% − px(rtl) + 9vw */
  .stk--a { left: auto; inset-inline-start: calc(100% - var(--px) + 9vw); }
  .stk--b { left: auto; inset-inline-start: calc(100% - var(--px) - 22vw); }
  .stk--c { left: auto; inset-inline-start: calc(100% - var(--px) + 11vw); }
}

/* ═══ 2. SHELF: the lanes drift the other way (+50%), cards keep their trailing gap on the inline end ═══ */
.wf { padding: 0; padding-inline: 14px 17px; font-size: 15px; }
.wc__f { padding: 4px; padding-inline: 8px 10px; font-size: 12.5px; }
.wc__what { line-height: 1.35; }
.art svg { direction: ltr; }                            /* drawings keep their geometry; their Arabic words are anchored by hand */
.art::before { right: auto; inset-inline-end: -22%; }
.wc:nth-child(2n) .art::before { inset-inline-end: auto; inset-inline-start: -24%; }
.wlist.is-lane > .wc { margin-right: 0; margin-inline-end: 18px; }
@media (min-width: 960px) { .wlist.is-lane > .wc { margin-right: 0; margin-inline-end: 26px; } }
.wlist.is-lane { animation-name: lane-rtl; }
@keyframes lane-rtl { to { transform: translateX(50%); } }

/* ═══ 3. HOW: the giant numerals and the app pieces swap sides; the pinned row runs right → left (JS writes +x);
   the progress bar fills from the right with the step colours in reading order ═══ */
.typed { background-position: left center; padding-right: 0; padding-inline-end: 4px; }
.prop { padding: 11px; padding-inline-end: 16px; }
.vault { padding: 18px; padding-inline-end: 22px; }
.vault__coin { left: auto; inset-inline-start: 40px; }
.bub2--you { border-bottom-right-radius: 22px; border-end-end-radius: 6px; }
.bub2--her { border-bottom-left-radius: 22px; border-end-start-radius: 6px; }
.hs__num { font-weight: 800; line-height: 1; translate: -50% -50%; }
.hs--last .hs__num { left: 70%; }
.hs__cut { left: 36%; }
.press .cursor { left: calc(38% - 28px); transform: translate(-120px, 80px); }
.hs[data-ph="glide"] .cursor, .hs[data-ph="press"] .cursor, .hs[data-ph="paid"] .cursor { transform: none; }
.hs:nth-child(1) .hs__b { left: auto; inset-inline-start: 0; }
.hs:nth-child(1) .hs__c { right: auto; inset-inline-end: 0; }
.hs:nth-child(2) .hs__a { left: auto; inset-inline-start: 0; }
.hs:nth-child(2) .hs__b { right: auto; inset-inline-end: 0; }
.hs:nth-child(2) .hs__c { left: auto; inset-inline-start: 4%; }
.hs:nth-child(2) .hs__d { right: auto; inset-inline-end: 4%; }
.hs:nth-child(3) .hs__a { right: auto; inset-inline-end: 0; }
.hs:nth-child(3) .hs__b { left: auto; inset-inline-start: 0; }
.hs:nth-child(3) .hs__c { right: auto; inset-inline-end: 6%; }
.hs:nth-child(3) .hs__d { left: auto; inset-inline-start: 2%; }
.hs:nth-child(4) .hs__b { left: auto; inset-inline-start: 0; }
.hs:nth-child(4) .hs__c { right: auto; inset-inline-end: 0; }
.hs:nth-child(5) .hs__a { left: auto; inset-inline-start: 0; }
.hs:nth-child(5) .hs__b { right: auto; inset-inline-end: 0; }
.hs:nth-child(5) .hs__c { right: auto; inset-inline-end: 0; }
@media (max-width: 959px) {
  .hs:nth-child(1) .hs__num { left: 80%; }
  .hs:nth-child(1) .ui { right: auto; }                 /* English sets right:0 under its centring left:50%; in RTL right would win */
  .hs--last .hs__num { left: 74%; }
  .hs__cut { left: 30%; }
}
@media (min-width: 960px) {
  .hs:nth-child(1) .hs__b { inset-inline-start: 6%; }
  .hs:nth-child(1) .hs__c { inset-inline-end: 8%; }
  .hs:nth-child(2) .hs__a { inset-inline-start: 12%; }
  .hs:nth-child(2) .hs__b { inset-inline-end: 8%; }
  .hs:nth-child(2) .hs__c { inset-inline-start: 16%; }
  .hs:nth-child(2) .hs__d { inset-inline-end: 14%; }
  .hs:nth-child(3) .hs__a { inset-inline-end: 10%; }
  .hs:nth-child(3) .hs__b { inset-inline-start: 10%; }
  .hs:nth-child(3) .hs__c { inset-inline-end: 14%; }
  .hs:nth-child(3) .hs__d { inset-inline-start: 12%; }
  .hs:nth-child(4) .hs__b { inset-inline-start: 8%; }
  .hs:nth-child(4) .hs__c { inset-inline-end: 8%; }
  .hs:nth-child(5) .hs__a { inset-inline-start: 4%; }
  .hs:nth-child(5) .hs__b { inset-inline-end: 4%; }
  .hs:nth-child(5) .hs__c { inset-inline-end: 2%; }
  .how[data-pin] .hs { padding-right: 0; padding-inline-end: 7vw; }
  .how__fill { transform-origin: 100% 50%; background: linear-gradient(270deg, var(--cat-engineering), var(--cat-design) 30%, var(--cat-tech) 52%, var(--cat-admin) 75%, var(--cat-writing)); }
}

/* ═══ 4. MONEY: You sits on the right, Rana on the left, so the money chip travels right → left ═══ */
.sp { padding: 12px; padding-inline-end: 18px; text-align: start; }
.sp__bar { transform-origin: 100% 50%; }
.safe__blob { right: auto; inset-inline-end: -120px; }
.safe__stage[data-chip-at="rana"] .safe__mover { --pos: 16.67%; }
.sc-cursor { left: calc(36% - 30px); transform: translate(-150px, 70px); }
.sc-cursor.is-on { transform: none; }
.sc-bub--you { border-bottom-right-radius: 20px; border-end-end-radius: 6px; }
.sc-bub--her { border-bottom-left-radius: 20px; border-end-start-radius: 6px; }
.sc-toast { padding: 12px; padding-inline-end: 18px; }
.safe__lbl { font-size: 12.5px; }
.sc-days li { font-family: var(--ui); font-weight: 700; }
.sc-ring text { font-family: var(--ui); font-weight: 800; font-size: 14px; }
@media (max-width: 959px) { .sc-team { text-align: start; } }

/* ═══ 5. FACES: the orbit sits against the left edge of its column instead of the right ═══ */
.faces__tag .tagline { margin-left: 0; margin-inline-start: 0; }
.faces__title .title__light { line-height: 1.15; }
@media (min-width: 960px) { .orb { margin-right: auto; margin-left: 0; } }

/* ═══ 6. COST: blobs, sticker tilts, the printer LED and the stamp all mirror ═══ */
.cost__blob--a { left: auto; inset-inline-start: -12vw; }
.cost__blob--b { right: auto; inset-inline-end: -14vw; }
.cost__blob--c { left: auto; inset-inline-start: 30%; }
.cost .stk { --rot: calc(var(--r, 0deg) * -1); }
.stk__b { padding: 14px; padding-inline-end: 18px; }
.printer__led { right: auto; inset-inline-end: 22px; }
.rcpt__stamp { --rot: 12deg; left: calc(50% - 66px); }
.rcpt__stamp text { font-family: var(--ui); font-weight: 800; font-size: 15px; }
@media (min-width: 960px) {
  .cost__stk--l .stk:nth-child(2) { margin-right: 0; margin-inline-end: 42px; }
  .cost__stk--r .stk:nth-child(2) { margin-left: 0; margin-inline-start: 30px; }
  .stk__b { padding: 16px; padding-inline-end: 22px; }
}
@media (max-width: 959px) {
  .cost .stk { --rot: calc(var(--r, 0deg) * -.5); }
  .rcpt__stamp { right: auto; left: 10px; }
}

/* ═══ 7. QUESTIONS ═══ */
.faq__a p { padding: 0 0 28px; padding-inline: 28px 64px; line-height: 1.75; }
.faq summary { line-height: 1.45; }

/* ═══ 8. FOR FREELANCERS: the fan of payout cards moves to the photo's left third (the photo itself is not flipped) ═══ */
.side__chips li { padding: 0; padding-inline: 10px 13px; }
.side__img::after { background: linear-gradient(270deg, rgba(3, 21, 20, 0), rgba(3, 21, 20, .35)); }
.pass { text-align: start; }
@media (min-width: 960px) {
  .fan { right: auto; inset-inline-end: 9%; }
  .side__title { line-height: 1.15; }
}

/* ═══ 9. GET THE APP: the grid mirrors by itself; only the QR card padding and blobs swap sides ═══ */
.ga__blob--a { left: auto; inset-inline-start: -8vw; }
.ga__blob--b { right: auto; inset-inline-end: -6vw; }
.ga__qr { padding: 10px; padding-inline-end: 20px; }

/* ═══ shared bits on this page: arrows point the reading way; store badges keep their Latin names ═══ */
.link svg, .btn svg { scale: -1 1; }
.link:hover svg { transform: translateX(-4px); }
.store { padding: 0; padding-inline: 18px 22px; }
.store span { font-size: 17px; }

/* dollar amounts and ranges read left to right inside the Arabic line ($50–$180, never $180–$50) */
.wc__p b, .stk__price strong, .ui__row b, .prop strong, .vault__t b, .safe__amt, .sc-wallet b, .rrow b, .chip-btn { direction: ltr; unicode-bidi: isolate; }

/* Tajawal Light is thinner than Nexa Light at the same size: body copy reads at Regular */
body, main .title__light, .store small, .qr small, .stk__price span { font-weight: 400; }

/* the studio photo is mirrored with the page so the payout fan lands on the empty side of the frame, as in English
   (a photo without text or logos; the scroll zoom still drives --zs) */
.side__img img { transform: scaleX(-1) scale(var(--zs, 1.08)); object-position: 62% 40%; }
@media (min-width: 960px) { .side__img img { object-position: 50% 40%; } }