/* fonts-ar.css — IBM Plex Sans Arabic, 400 and 700, arabic + latin, served from this site.
   Built by seo/fetch-ar-font.mjs. */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/plex-ar-arabic-400.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/plex-ar-latin-400.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;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/plex-ar-arabic-700.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-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-10EC7, U+10EC9-10EEE, U+10EF0-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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/plex-ar-latin-700.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;
}
/* Archivo cut down to digits, signs and capitals (seo/fonts-slim.py): the Arabic pages use Archivo only for big numbers and the EN switch. */
@font-face {
  font-family: 'Archivo Num';
  font-style: normal;
  font-weight: 700 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("../assets/fonts/archivo-num.woff2") format('woff2');
  unicode-range: U+0020-005A;
}

/* ============================================================================
   ar.css — the Arabic landing pages (build2/ar/…), right to left.
   These pages are the MAIN SITE in Arabic: they load css/site.css and reuse
   its hero stage, tool tiles, glass cards, the About card, the three-step
   form, the FAQ accordion and the footer. This sheet only adds what Arabic
   needs on top (loaded after site.css, as css/ar-site.css together with the
   Arabic typeface — see seo/build-ar.js):
     · the typeface, and line heights tall enough for Arabic letterforms
     · no letter-spacing (it breaks the joins between Arabic letters)
     · arrows and one-sided gradients mirrored for right-to-left
     · three small layouts the main site has no equivalent for
   ========================================================================== */

:root[lang="ar"] {
  --font-display: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-mono: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --lh-tight: 1.3;
  --lh-heading: 1.35;
  --lh-snug: 1.55;
  --lh-body: 1.85;
  --ls-tight: 0;
  --ls-heading: 0;
  --ls-snug: 0;
  --ls-wide: 0;
}

/* headings on the main site sit at 1.02–1.15: Arabic needs air above and below */
[lang="ar"] .hero-title,
[lang="ar"] .sec-title,
[lang="ar"] .about-card__title,
[lang="ar"] .course__title,
[lang="ar"] .courses__band-title,
[lang="ar"] .form-step__legend,
[lang="ar"] .premium-menu-nav .premium-menu-link { line-height: 1.4; letter-spacing: 0; font-weight: 700; }

[lang="ar"] .hero-title { font-size: clamp(2.1rem, 1rem + 4vw, 4.6rem); }
[lang="ar"] .sec-title { max-inline-size: 24ch; font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.4rem); }
[lang="ar"] .about-card__title { font-size: clamp(1.6rem, 1rem + 2.4vw, 2.6rem); }
[lang="ar"] .tag, [lang="ar"] .sec-label, [lang="ar"] .hero-badge, [lang="ar"] .course__kicker,
[lang="ar"] .qf__count, [lang="ar"] .scroll-cue, [lang="ar"] .course__badge, [lang="ar"] .menu-link__index { letter-spacing: 0; font-size: .85rem; }
[lang="ar"] .contact__big, [lang="ar"] .hero-proof strong { font-family: "Archivo Num", "IBM Plex Sans Arabic", sans-serif; }
/* the EN switch (header + side panel): the small numerals face, not the whole Archivo file */
[lang="ar"] .navbar__lang, [lang="ar"] .menu-link__index--lang { font-family: "Archivo Num", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; }

/* arrows point the way the text runs */
[dir="rtl"] .btn__arrow, [dir="rtl"] .hero-badge__arrow { transform: scaleX(-1); }

/* the About card: the copy sits on the right, the portrait on the left */
@media (min-width: 900px) {
  [dir="rtl"] .about-card::before { background: linear-gradient(270deg, var(--ink) 0%, rgba(var(--ink-rgb), .92) 36%, rgba(var(--ink-rgb), 0) 64%); }
  [dir="rtl"] .about-card__photo { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 36%); mask-image: linear-gradient(270deg, transparent 0, #000 36%); }
}

/* the About card pads its copy on the LEFT (a physical shorthand in the main
   sheet): here the copy is on the right, so the room goes on that side */
@media (min-width: 900px) {
  [dir="rtl"] .about-card__copy { padding-inline: clamp(var(--space-2xl), 5vw, var(--space-4xl)) 0; }
}

/* three figures in the proof card (the main site has a rating row and two):
   on a phone the first one takes the top row to itself */
@media (max-width: 639px) {
  [lang="ar"] .hero-proof__item--stat:first-child { grid-column: 1 / -1; border-block-end: var(--border-w) solid var(--glass-line); }
  [lang="ar"] .hero-proof__item--stat:nth-child(2) { border-inline-start: 0; }
}

/* on a phone the form comes before the two guarantees: it is why they came */
@media (max-width: 899px) {
  [lang="ar"] .contact__stage { order: -1; }
}

/* ── layouts of their own ───────────────────────────────────────────────── */

/* what the service includes: glass cards, three across on a desktop */
.ar-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-grid); }

@media (min-width: 640px) { .ar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ar-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ar-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.acard {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  padding: var(--card-pad-block) var(--card-pad-inline);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-stage);
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(168, 85, 247, .16), transparent 70%) padding-box,
    linear-gradient(var(--glass), var(--glass)) padding-box,
    var(--grad-border) border-box;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.acard:hover { transform: translateY(-4px); box-shadow: 0 30px 70px -40px rgba(168, 85, 247, .85); }

.acard__icon {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 28%;
  background: linear-gradient(160deg, #FFFFFF 0%, #EFE6FD 100%);
  box-shadow: 0 0 26px -6px rgba(168, 85, 247, .8);
  color: var(--violet-600);
}

.acard__icon svg { inline-size: 1.35rem; block-size: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.acard h3 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; line-height: 1.5; color: #fff; }
.acard p { color: var(--text-2); }

/* the four steps are a real order, so they are numbered */
.ar-steps { counter-reset: s; }

.ar-steps .acard::before {
  counter-increment: s;
  content: counter(s);
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border-radius: 50%;
  background: var(--grad-violet);
  box-shadow: 0 0 22px -4px var(--violet-glow);
  font-family: "Archivo Num", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 800;
  color: #fff;
}

/* a short passage of text, held to a readable measure, in a glass panel */
.ar-prose {
  display: grid;
  gap: var(--space-md);
  max-inline-size: 52rem;
  margin-inline: auto;
  padding: var(--card-pad-block) var(--card-pad-inline);
  border: var(--border-w) solid var(--glass-line);
  border-radius: var(--radius-stage);
  background: var(--glass);
  font-size: var(--fs-lede);
  color: var(--text-2);
}

.ar-prose strong { color: #fff; }

/* real work: the main site's card, three across */
.ar-work .course__media { aspect-ratio: 16 / 10; }
.ar-work .course { text-decoration: none; }
.ar-work .course__meta { font-size: var(--fs-xs); color: var(--text-3); }

/* the bundle's four courses on the course page */
.ar-list { display: grid; gap: var(--space-2xs); inline-size: 100%; padding-block: var(--space-sm); border-block: var(--border-w) solid var(--glass-line); }
.ar-list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding-block: .3rem; color: var(--text-1); }
.ar-list span { color: var(--text-2); font-size: var(--fs-sm); }

/* the footer, shorter than the main site's */
.ar-foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-lg); }
.ar-foot__links .footer__link { display: inline-flex; align-items: center; min-block-size: var(--size-touch); }

/* things rise into place as they are reached. The class on <html> is set by
   js/ar.js; with no script nothing is ever hidden. */
.arjs .rise { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.arjs .rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .arjs .rise { opacity: 1; transform: none; transition: none; }
  .acard { transition: none; }
}

/* the article page in Arabic: taller lines, no tracking, a calmer weight */
[lang="ar"] .post__title, [lang="ar"] .post__body h2, [lang="ar"] .blog__grid .course__title { line-height: 1.45; letter-spacing: 0; font-weight: 700; }
[lang="ar"] .post__title { font-size: clamp(1.8rem, 1.1rem + 3vw, 3.2rem); }
[lang="ar"] .post__body { line-height: 2; }