/* Medixcel website, Arabic edition. Loaded after medixcel.css on the pages in ar/, which carry
   <html lang="ar" dir="rtl">. Brand rules (medixcel-brand, section 8): all Arabic in Saudi, no
   letter spacing, no uppercase, Latin words and digits in Inter at 86% inside Arabic lines, Arabic
   type one step larger than the Latin with more line height, the logo and icon never mirrored, the
   watermark at the bottom left. Inter comes first in every stack: Saudi carries Latin glyphs of its
   own, and Inter first keeps every Latin letter and digit in Inter while Arabic falls through to Saudi. */
:root {
  --font-display: Inter, Saudi, "Segoe UI", Tahoma, Arial, sans-serif;
  --font-text: Inter, Saudi, "Segoe UI", Tahoma, Arial, sans-serif;
  --font-serif: Inter, Saudi, "Segoe UI", Tahoma, Arial, sans-serif;
  --font-arabic: Inter, Saudi, "Segoe UI", Tahoma, Arial, sans-serif;
}
body { font-size: 17px; line-height: 30px; }
.latin { font-family: var(--font-text); font-size: .86em; direction: ltr; unicode-bidi: isolate; }

/* Type: the Arabic scale. Saudi Bold stands in for every weight above Regular. */
.display { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.3; letter-spacing: 0; margin-inline-start: 0; }
.h1 { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.3; letter-spacing: 0; margin-inline-start: 0; }
.h2 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.4; letter-spacing: 0; margin-inline-start: 0; }
.h3 { font-size: 22px; line-height: 32px; letter-spacing: 0; }
.h4 { font-size: 19px; line-height: 30px; }
.lead { font-size: clamp(19px, 1.6vw, 21px); line-height: 1.7; }
.body { font-size: 17px; line-height: 30px; }
.small { font-size: 15px; line-height: 24px; }
.caption { font-size: 13px; line-height: 22px; }
.eyebrow { font-size: 15px; line-height: 24px; letter-spacing: 0; text-transform: none; }
.card-label { font-size: 13px; line-height: 22px; letter-spacing: 0; text-transform: none; }
.tag { font-size: 13px; line-height: 22px; letter-spacing: 0; text-transform: none; }
.btn { font-size: 16px; }
.btn-sm { font-size: 15px; }
.link { font-size: 17px; }
.stat-value { margin-inline-start: 0; }
.stat-unit { font-size: 19px; line-height: 30px; }
.stat-label { font-size: 15px; line-height: 24px; }
.nav-links > li > a, .nav-links > li > button { font-size: 16px; }
.nav-menu a strong { font-size: 15px; }
.nav-menu a span { font-size: 13px; line-height: 20px; }
.nav-lang { font-size: 15px; }
.card-list li { font-size: 16px; line-height: 26px; }
.return-item strong { font-size: 16px; line-height: 26px; }
.return-item span { font-size: 15px; line-height: 24px; }
.focus-card .h4 { font-size: 18px; }
.focus-card p, .step p, .value p, .news-card p { font-size: 15px; line-height: 24px; }
.news-card .h4 { font-size: 19px; line-height: 30px; }
.news-card .news-links { font-size: 15px; }
.news-card .news-meta, .news-meta { font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; }
.step .h4 { font-size: 19px; }
.hero-meta, .page-hero .breadcrumb, .field label, .form-note { font-size: 14px; }
.field input, .field select, .field textarea { font-size: 16px; }
.figure figcaption { font-size: 14px; line-height: 24px; }
.footer-brand p, .footer-links a { font-size: 15px; }
.footer-brand p { line-height: 24px; }
.footer h4 { font-size: 14px; letter-spacing: 0; text-transform: none; }
.footer-bottom { font-size: 13px; line-height: 20px; }
.footer-bottom .runfoot { letter-spacing: 0; text-transform: none; }
.sources { font-size: 13px; line-height: 20px; }
.table { font-size: 15px; line-height: 24px; }
.table th { text-align: right; }
.copy-btn { font-size: 13px; margin-left: 0; margin-right: 8px; }
.article-text p { font-size: 17px; line-height: 30px; }
.closing-head .lead { line-height: 1.5; }
.eco-label { font-size: 12px; letter-spacing: 0; text-transform: none; }
.illus text { font-family: var(--font-text); font-size: 12px; letter-spacing: 0; }
/* Inline styles in the generator carry Latin tracking and uppercase; neither applies to Arabic. */
[style*="letter-spacing"] { letter-spacing: 0 !important; }
[style*="text-transform"] { text-transform: none !important; }
[style*="line-height:1.4"] { line-height: 1.55 !important; }
.hero-copy .display { max-width: 15ch; }

/* Mirroring. Grid and flex follow dir="rtl" by themselves; these are the physical positions. */
.nav-progress { left: auto; right: 0; }
.nav-menu { left: auto; right: 0; }
.card-arrow { right: auto; left: 24px; }
.card-hover:hover .card-arrow { transform: translate(-2px, -2px); }
.btn:hover .ic, .link:hover .ic { transform: translateX(-3px); }
.ic-arrow, .ic-ext { transform: scaleX(-1); }
.btn:hover .ic-arrow, .link:hover .ic-arrow, .btn:hover .ic-ext, .link:hover .ic-ext { transform: translateX(-3px) scaleX(-1); }
.wm-corner { right: auto; left: -14%; }
.step .num { left: auto; right: 0; }
.partner-logo img, .partner-logo svg, .feature .partner-logo img, .feature .partner-logo svg, .lockup .partner img, .lockup .partner svg { object-position: right; }
.skip { left: auto; right: 16px; }
.to-top { right: auto; left: 20px; }
/* Logos and pictures are never mirrored: the strip and the two illustrations stay left to right. */
.logo-strip, .illus, .eco { direction: ltr; }
@media (max-width: 1023px) {
  .nav-menu { padding: 4px 12px 8px 0; }
}
@media (min-width: 1024px) and (max-width: 1200px) {
  .nav-links > li > a, .nav-links > li > button { font-size: 15px; }
}
.news-row:hover .news-row-arrow { transform: translateX(-2px); }
.glance-list dt { letter-spacing: 0; text-transform: none; font-size: 13px; }
.chip-label { letter-spacing: 0; text-transform: none; font-size: 13px; }
.pullquote p { font-family: var(--font-text); line-height: 1.6; }
.news-meta { letter-spacing: 0; text-transform: none; font-size: 13px; }
.slider-btn.prev .ic { transform: none; }
.slide { transform: translateX(-24px); }
.slide.is-leaving { transform: translateX(24px); }
.tw, .eco-col-label { letter-spacing: 0; text-transform: none; font-size: 14px; }