body { margin:0; font-family:'Instrument Sans',sans-serif; background:#ffffff; color:#17202d; line-height:1.65; } .site-header,main,.locale-footer { max-width:1100px; margin:auto; padding:24px; } .locale-hero { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; } .locale-hero img { width:100%; height:auto; border-radius:24px; } h1 { font-size:clamp(2rem,4vw,3.2rem); line-height:1.12; letter-spacing:-.025em; } h2 { font-size:1.65rem; line-height:1.25; margin-top:36px; } .lede { font-size:1.15rem; } main>section:not(.locale-hero) { max-width:780px; } .steps { list-style:none; padding:0; display:grid; gap:16px; counter-reset:step; } .steps li { padding:20px; background:#ffffff; border:2px solid #17202d; border-radius:16px; box-shadow:4px 4px #17202d; } .steps li::before { counter-increment:step; content:counter(step) '. '; color:#E5560C; font-weight:800; } .cta-box { background:#ffffff; margin:40px 0; padding:28px; text-align:center; } .cta-box a { display:inline-flex; padding:12px 24px; color:white; text-decoration:none; font-weight:800; } a { color:#E5560C; } .related ul { list-style:none; padding:0; } .related a { background:#ffffff; border:1px solid #e2e8f0; border-radius:12px; text-decoration:none; } .locale-footer { border-top:1px solid #e2e8f0; margin-top:40px; } .footer-socials { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; } .footer-socials a { display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border:1px solid #dfe3e8; border-radius:999px; color:#17202d; text-decoration:none; font-weight:700; } .footer-socials svg { width:17px; height:17px; fill:currentColor; } .footer-socials a:hover { color:#E5560C; border-color:#E5560C; } @media(max-width:700px) { .locale-hero { grid-template-columns:1fr; gap:16px; } .locale-hero img { max-height:220px; object-fit:contain; } .site-nav { gap:12px; } .site-header,main,.locale-footer { padding:20px; } }

html[lang="ar"] body { font-family:"IBM Plex Sans Arabic",system-ui,sans-serif; line-height:1.9; } html[lang="ar"] h1 { letter-spacing:0; line-height:1.5; } html[dir="rtl"] .language-note { border-left:0; border-right:3px solid #E5560C; }

.comparison-wrap { overflow-x:auto; } .comparison-wrap table { width:100%; border-collapse:collapse; background:#ffffff; } .comparison-wrap th,.comparison-wrap td { padding:12px; text-align:start; border:1px solid #e2e8f0; }
main>section.arabic-guide-grid, main>section.subject-guide-grid { max-width:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-block:40px; }
.arabic-guide-grid article { padding:24px; background:#ffffff; border:1px solid #e5e7eb; border-radius:22px; }
.arabic-guide-grid h2 { margin-top:0; font-size:1.35rem; }
.arabic-guide-grid a { text-decoration:none; }
.subject-guide-grid article { padding:24px; background:#ffffff; border:1px solid #e5e7eb; border-radius:22px; }
.subject-guide-grid h2 { margin-top:0; font-size:1.35rem; }
.subject-guide-grid a { text-decoration:none; }
.guide-path { margin-block:48px; }
@media(max-width:700px) { main>section.arabic-guide-grid, main>section.subject-guide-grid { grid-template-columns:1fr; } }

h1 { font-size:clamp(40px,5.2vw,66px); line-height:1.02; letter-spacing:-.045em; }
h2 { font-size:clamp(32px,3.5vw,46px); line-height:1.08; }
.lede { font-size:clamp(19px,1.5vw,20px); }
html[lang="ar"] h1,html[lang="ar"] h2 { line-height:1.5; letter-spacing:normal; }

/* Approved Arabic typography; the Latin brand retains Bricolage. */
html[lang="ar"] { --font-sans:"IBM Plex Sans Arabic",sans-serif; --font-display:"Cairo",sans-serif; }
html[lang="ar"] body { font-family:"IBM Plex Sans Arabic",sans-serif; }
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,html[lang="ar"] h5,html[lang="ar"] h6,html[lang="ar"] .font-display { font-family:"Cairo",sans-serif; font-weight:800; letter-spacing:normal; line-height:1.5; }
html[lang="ar"] #landing-main h1,html[lang="ar"] #landing-main h2,html[lang="ar"] #landing-main h3 { font-family:"Cairo",sans-serif; }
html[lang="ar"] .site-brand > span,html[lang="ar"] .brand-wordmark,html[lang="ar"] .site-header .brand > span { font-family:"Bricolage Grotesque",sans-serif; font-weight:800; }

html:not(.dark) body { color:#3F4556; }