/* abecods.com/ar/ (8 Nov 2026): Arabic type and right-to-left layout over the v3 Stage system (v3.css, v3-layer.css, v3-r4.css).
   Display type is Cairo 900 (Anton has no Arabic); sizes come down because Cairo is far wider than Anton.
   The 3D world scenes are mirrored so the copy sits on the right; logos, the Garden Centre before/after slider and the
   client logo rows keep left-to-right. Letter-spacing is always 0: spacing breaks Arabic letter joining. */

@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(/assets/fonts/cairo-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F, U+2010-2011, U+204F, U+FB50-FDFF, U+FE70-FEFC; }

[dir='rtl'] { --display: 'Cairo', 'Helvetica Neue', Arial, sans-serif; }
[dir='rtl'] body { line-height: 1.75; }
[dir='rtl'] *, [dir='rtl'] *::before, [dir='rtl'] *::after { letter-spacing: 0 !important; }

/* Display type */
[dir='rtl'] .display, [dir='rtl'] .mega-stage, [dir='rtl'] .mmenu summary, [dir='rtl'] .mmenu-main a, [dir='rtl'] .form-title, [dir='rtl'] .ms-done .done-title,
[dir='rtl'] .pstep h3, [dir='rtl'] .pcard-title, [dir='rtl'] .nums dt, [dir='rtl'] .authority dt, [dir='rtl'] .stake, [dir='rtl'] .lf-title,
[dir='rtl'] .cl-count b, [dir='rtl'] .jproof b, [dir='rtl'] .fit-col h3 { font-weight: 900; text-transform: none; line-height: 1.3; }
[dir='rtl'] .eyebrow, [dir='rtl'] .ai-kind { text-transform: none; font-size: 14px; }

[dir='rtl'] .hero h1 { font-size: clamp(36px, 4.4vw, 84px); line-height: 1.28; }
[dir='rtl'] .hero h1 .ln { padding-bottom: 0.14em; margin-bottom: -0.14em; }
[dir='rtl'] .h2 { font-size: clamp(30px, 3.4vw, 54px); line-height: 1.3; }
[dir='rtl'] .ai.live .ai-head .h2 { font-size: clamp(26px, 2.5vw, 42px); }
[dir='rtl'] .mani-title { font-size: clamp(26px, 3.2vw, 50px); }
[dir='rtl'] .manifesto.live .mani-title { font-size: clamp(16px, 1.3vw, 21px); font-weight: 700; }
[dir='rtl'] .mani-text h3 { font-size: clamp(28px, 3.1vw, 54px); line-height: 1.3; }
[dir='rtl'] .journey-intro { font-size: clamp(28px, 3.6vw, 58px); line-height: 1.3; }
[dir='rtl'] .jbeat h3, [dir='rtl'] .journey-live .jbeat h3 { font-size: clamp(36px, 4.2vw, 70px); line-height: 1.2; }
[dir='rtl'] .ai-copy h3 { font-size: clamp(26px, 2.4vw, 40px); line-height: 1.3; }
[dir='rtl'] .ai.live .ai-copy h3 { font-size: clamp(24px, 2vw, 34px); }
[dir='rtl'] .mani { font-size: clamp(24px, 2.6vw, 42px); line-height: 1.45; }
[dir='rtl'] .pcard-title { font-size: clamp(22px, 2vw, 32px); }
/* Arabic figures carry their unit words (ألف، مليون، دولار): the headline figure takes a full row, the other two share the next */
[dir='rtl'] .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[dir='rtl'] .nums .big { grid-column: 1 / -1; }
[dir='rtl'] .nums dt { font-size: clamp(20px, 1.7vw, 28px); line-height: 1.25; white-space: nowrap; }
[dir='rtl'] .nums .big dt { font-size: clamp(28px, 2.6vw, 44px); }
[dir='rtl'] .authority dt { font-size: 40px; line-height: 1.2; }
[dir='rtl'] .pstep h3 { font-size: clamp(22px, 1.8vw, 28px); }
[dir='rtl'] .stake { font-size: clamp(19px, 1.6vw, 26px); }
[dir='rtl'] .contact-copy h2 { font-size: clamp(34px, 3.8vw, 64px); line-height: 1.25; }
[dir='rtl'] .cl-title { font-size: clamp(24px, 2.4vw, 38px); }
[dir='rtl'] .jproof b { font-size: clamp(22px, 1.8vw, 30px); line-height: 1.2; }
[dir='rtl'] .cl-count b { font-size: 24px; margin-right: 0; margin-left: 6px; }
[dir='rtl'] .lf-title, [dir='rtl'] .form-title { font-size: 22px; }
[dir='rtl'] .mega-stage { font-size: 20px; }
[dir='rtl'] .mmenu summary, [dir='rtl'] .mmenu-main a { font-size: 24px; }
[dir='rtl'] .faq-list summary::after { font-family: var(--body); font-weight: 700; }
[dir='rtl'] .ln-mask { padding-bottom: 0.16em; margin-bottom: -0.16em; }

/* Arrows point the reading way (individual `scale` so hover transforms still work) */
[dir='rtl'] .ph-arrow-right, [dir='rtl'] .ph-arrow-left, [dir='rtl'] .ph-arrow-up-right, [dir='rtl'] .ph-caret-right, [dir='rtl'] .ph-caret-left { scale: -1 1; }
[dir='rtl'] .tlink:hover i { transform: translateX(-3px); }
[dir='rtl'] .faq-list summary:hover span { transform: translateX(-6px); }

/* Typed values stay left-to-right (email, links, phone numbers) */
[dir='rtl'] input[type='email'], [dir='rtl'] input[type='url'], [dir='rtl'] input[type='tel'], [dir='rtl'] input[inputmode='url'], [dir='rtl'] input[name='contact'] { direction: ltr; text-align: right; }
[dir='rtl'] input::placeholder { text-align: right; }

/* Header, menus, small pieces */
[dir='rtl'] .skip { left: auto; right: 1rem; }
[dir='rtl'] .progress-line i { transform-origin: right; }
[dir='rtl'] .ai-tag { margin-left: 0; margin-right: 4px; }
[dir='rtl'] .mega-auto strong { margin-right: 0; margin-left: 0.5rem; }
[dir='rtl'] .sec-label { right: auto !important; left: var(--gutter) !important; }
[dir='rtl'] .hlf-field > span, [dir='rtl'] .hlf-note { padding-left: 0; padding-right: 4px; }
[dir='rtl'] .founder figcaption { padding-left: 0; padding-right: 0.25rem; }
@keyframes stepInRtl { from { opacity: 0; transform: translateX(-14px); } }
[dir='rtl'] .ms-step.on { animation-name: stepInRtl; }

/* Hero: the 3D mark and objects move to the left side */
[dir='rtl'] .hero-scene { right: auto; left: 0; }
[dir='rtl'] .hero-scene .hero-mark { right: auto; left: 2%; }
[dir='rtl'] .o1 { left: auto; right: 70%; } [dir='rtl'] .o2 { right: auto; left: 1%; } [dir='rtl'] .o3 { left: auto; right: 46%; }
[dir='rtl'] .o4 { right: auto; left: 4%; } [dir='rtl'] .o5 { left: auto; right: 50%; } [dir='rtl'] .o6 { right: auto; left: 30%; } [dir='rtl'] .o7 { left: auto; right: 50%; }
@media (max-width: 1023px) { [dir='rtl'] .hero-scene .hero-mark { left: -10%; right: auto; } }

/* Problem world: scenes mirrored, copy on the right */
[dir='rtl'] .manifesto.live .mani-text, [dir='rtl'] .manifesto.live .mani-title, [dir='rtl'] .manifesto.live .mani-dots { left: auto; right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
/* Mirror the whole scene box, not the image: the image's own transform-origin (70%) would also move a mirrored image
   off to the side. Mirroring the box flips the island to the left, and the shade and edge fade to the right, behind the copy. */
[dir='rtl'] .manifesto.live .mani-scene { scale: -1 1; }

/* Plan: the path rises from right to left */
[dir='rtl'] .plan-path { transform: scaleX(-1); }
[dir='rtl'] .pstep::before { transform-origin: right; }

/* Journey: the world film and posters are mirrored, copy and shade on the right */
[dir='rtl'] .journey-live .journey-film, [dir='rtl'] .journey-live .jp { scale: -1 1; }
[dir='rtl'] .journey-live .journey-shade { background: linear-gradient(270deg, rgba(10, 10, 12, 0.88) 0%, rgba(10, 10, 12, 0.45) 42%, rgba(10, 10, 12, 0) 70%); }
[dir='rtl'] .journey-live .journey-skip { right: auto; left: var(--gutter); }
[dir='rtl'] .journey-live .journey-intro, [dir='rtl'] .journey-live .jbeat { left: auto; right: var(--gutter); }
[dir='rtl'] .journey-rail button, [dir='rtl'] .ai-rail button { text-align: right; }
@media (min-width: 768px) {
  [dir='rtl'] .journey-live .journey-shade { background: linear-gradient(270deg, rgba(10, 10, 12, 0.92) 0%, rgba(10, 10, 12, 0.7) 34%, rgba(10, 10, 12, 0.18) 58%, rgba(10, 10, 12, 0) 72%); }
  [dir='rtl'] .journey-live .jbeat::before { inset: -18% -22% -18% -28%; }
}

/* AI section: glow follows the media to the left */
[dir='rtl'] .ai::before { inset: 10% auto auto 0; background: radial-gradient(50% 50% at 30% 40%, rgba(30, 16, 199, 0.28), transparent 70%); }
[dir='rtl'] .ai-glow { background: radial-gradient(45% 55% at 25% 55%, rgba(30, 16, 199, 0.35), transparent 70%); }

/* Results: the before/after slider and the logo rows stay left-to-right */
[dir='rtl'] .ba-frame, [dir='rtl'] .cl-rows { direction: ltr; }
[dir='rtl'] .pm-inset { right: auto; left: 6%; }

/* Voices: cards run right to left (the track stays LTR so the scroll maths keeps working) */
[dir='rtl'] .voice-pan { direction: ltr; }
[dir='rtl'] .voice-track { flex-direction: row-reverse; }
[dir='rtl'] .voice-dots { flex-direction: row-reverse; }
[dir='rtl'] .vcard { direction: rtl; }
@media (max-width: 767px) { [dir='rtl'] .voice-track { flex-direction: column; } }

/* Fit: promises link from right to left */
[dir='rtl'] .fit-col li::before { left: auto; right: 0; }
[dir='rtl'] .fp-us { padding-left: 0; padding-right: 1.75rem; }
[dir='rtl'] .fp-us::before { left: auto; right: 0; }
[dir='rtl'] .fp-link::before { transform-origin: right; }
[dir='rtl'] .fp-link::after { right: auto; left: -5px; }

/* Contact: glow, mark and objects move to the form on the left */
[dir='rtl'] .contact-shade { background: linear-gradient(270deg, rgba(8, 8, 10, 0.94) 0%, rgba(8, 8, 10, 0.6) 48%, rgba(8, 8, 10, 0.35) 100%), linear-gradient(to bottom, var(--bg), transparent 22%, transparent 78%, #0a0a0c); }
[dir='rtl'] .cf-glow { background: radial-gradient(38% 50% at 28% 52%, rgba(206, 255, 94, 0.14), transparent 70%), radial-gradient(50% 60% at 22% 45%, rgba(30, 16, 199, 0.45), transparent 72%); }
[dir='rtl'] .cf-mark { right: auto; left: 6%; }
[dir='rtl'] .cf1 { left: auto; right: 52%; } [dir='rtl'] .cf2 { right: auto; left: 3%; } [dir='rtl'] .cf3 { right: auto; left: 2%; }
[dir='rtl'] .cf4 { left: auto; right: 50%; } [dir='rtl'] .cf5 { left: auto; right: 60%; } [dir='rtl'] .cf6 { right: auto; left: 30%; }

/* Thank-you page */
[dir='rtl'] .ty { background: radial-gradient(50% 60% at 15% 20%, rgba(30, 16, 199, 0.45), transparent 70%), var(--bg); }
[dir='rtl'] .ty h1 { font-size: clamp(36px, 4.6vw, 80px); line-height: 1.25; }
[dir='rtl'] .ty-book h2 { font-size: clamp(26px, 2.2vw, 36px); line-height: 1.3; }
[dir='rtl'] .ty-mark { right: auto; left: -8vw; }

/* Legal pages */
[dir='rtl'] .lg-note-lang { margin: 0 0 2rem; font-size: 14px; color: var(--muted); }

/* Off-screen pieces go off the right edge: in a right-to-left page, content past the left edge makes the page scroll sideways */
[dir='rtl'] .hp { left: auto !important; right: -9999px; }

/* Phones: the long Arabic accent phrase in the hero may wrap */
@media (max-width: 600px) { [dir='rtl'] .hero h1 .nw { white-space: normal; } }

/* Legal pages load v3.css, v3-layer.css and legal.css only, so the language switch styles are repeated here */
[dir='rtl'] .lg-hdr .hdr-end { display: flex; align-items: center; gap: 12px; }
[dir='rtl'] .lg-hdr .lang-switch { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 15px; font-weight: 800; line-height: 1; color: var(--text); }
[dir='rtl'] .lg-hdr .lang-switch:hover { border-color: var(--lime); color: var(--lime); }

/* Design pass 2 (8 Nov): Cairo reads smaller than the Latin body at the same size, so the Arabic headline in each problem
   scene gets the weight of the English three-line headline, and small body text steps up a size */
[dir='rtl'] .manifesto.live .mani-text h3 { font-size: clamp(34px, 3.7vw, 66px); line-height: 1.22; max-width: 12ch; }
[dir='rtl'] .manifesto.live .mani-text p { font-size: clamp(17px, 1.2vw, 21px); line-height: 1.8; max-width: 34ch; color: rgba(243, 240, 232, 0.78); margin-top: 1.1rem; }
[dir='rtl'] .manifesto.live .mani-title { font-weight: 800; line-height: 1.6; }
[dir='rtl'] .jbeat .jdesc { font-size: clamp(16px, 1.1vw, 18px); line-height: 1.8; }
[dir='rtl'] .jpoints li, [dir='rtl'] .ai-points li, [dir='rtl'] .ai.live .ai-points li { font-size: 15.5px; line-height: 1.6; }
[dir='rtl'] .pcard-line { font-size: 15.5px; line-height: 1.75; }
[dir='rtl'] .nums dd { font-size: 13.5px; line-height: 1.5; }
[dir='rtl'] .basis { font-size: 12.5px; line-height: 1.6; }
[dir='rtl'] .ai.live .ai-head .sec-lead { font-size: 17px; line-height: 1.7; }
[dir='rtl'] .vcard blockquote p { font-size: 18px; line-height: 1.75; }
/* Testimonials: the quote mark opens on the right, and the AI scene headlines get a wider line so they break in two, not three */
[dir='rtl'] .vcard { text-align: right; }
[dir='rtl'] .vq { display: block; width: max-content; margin-left: auto; scale: -1 1; }
[dir='rtl'] .ai-copy h3 { max-width: 17ch; }


/* Round 5 (9 Nov 2026) */
[dir='rtl'] .pstep-n { font-family: var(--body); font-weight: 900; line-height: 1; }
[dir='rtl'] .jlinks a:hover > i.ph { translate: -2px 0; }
[dir='rtl'] .jbeat .jline { line-height: 1.55; max-width: 30ch; }
[dir='rtl'] .jpoints li { line-height: 1.7; }
/* platform names written in Arabic keep their brand colour (Shopify green, Salla teal, WooCommerce purple) */
.bn { font-weight: 800; white-space: nowrap; }
.bn-shopify { color: #95bf47; }
.bn-salla { color: #4fd1c1; }
.bn-woo { color: #b987d4; }

/* Mega menu (10 Nov 2026): the coloured platform names inside a link description stay in the line */
[dir='rtl'] .mega-col a span span { display: inline; margin: 0; font-size: inherit; }