:root { --p:#1A5FA8;--pp:#EBF3FB;--s:#1E7A5C;--sp:#E7F5F0;--a:#E86920;--ap:#FEF0E7;--n50:#F7F8FA;--n100:#EFF1F5;--n200:#DDE1EA;--n400:#9BA3B2;--n600:#5B6478;--n800:#2C3345;--n900:#151C2C;--white:#fff;--ac:#E86920;--acp:color-mix(in srgb,#E86920 12%,#fff);--r-md:10px;--r-lg:16px;--r-xl:24px;--sh-sm:0 1px 3px rgba(0,0,0,.06);--fh:'Cairo',sans-serif;--fb:'IBM Plex Sans Arabic','Cairo',sans-serif;--pad:clamp(20px,6vw,80px) }
body { font-family:var(--fb);background:var(--white);color:var(--n800);font-size:16px;line-height:1.8 }
.nav-links a { font-family:var(--fh);font-size:14px;font-weight:500;color:var(--n600);padding:6px 13px;border-radius:6px }
.nav-actions { display:flex;gap:10px }
.ab-label { font-size:10px;font-weight:700;font-family:var(--fh);color:rgba(255,255,255,.5);margin-bottom:8px;display:flex;align-items:center;gap:6px }
.prose h2 { font-family:var(--fh);font-size:26px;font-weight:800;color:var(--n900);margin:44px 0 16px;border-right:4px solid var(--ac);padding-right:14px }
.prose h3 { font-family:var(--fh);font-size:20px;font-weight:700;color:var(--n900);margin:28px 0 10px }
.prose ul,.prose ol { margin-bottom:20px;padding-right:20px }
.prose li { margin-bottom:8px;line-height:1.75 }
.prose ol li { list-style:decimal }
.info-box { padding:20px 24px;border-radius:var(--r-lg);margin:28px 0;display:flex;gap:14px;align-items:flex-start;background:#f0f7ff;border:1px solid rgba(26,95,168,.15) }
.info-box i { font-size:20px;flex-shrink:0;margin-top:2px;color:var(--ac) }
.info-box-title { font-family:var(--fh);font-size:15px;font-weight:700;margin-bottom:6px;color:var(--ac) }
.info-box-body { font-size:14px;line-height:1.7 }
.steps { display:flex;flex-direction:column;gap:12px;margin:28px 0 }
.step { display:flex;gap:14px;padding:14px 18px;background:var(--n50);border-radius:var(--r-lg);border:1px solid var(--n200);align-items:flex-start }
.step:hover { border-color:var(--ac) }
.step-num { min-width:36px;height:36px;border-radius:50%;background:var(--ac);color:#fff;font-family:var(--fh);font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0 }
.step-title { font-family:var(--fh);font-size:14px;font-weight:700;color:var(--n900);margin-bottom:4px }
.step-desc { font-size:13px;color:var(--n600);line-height:1.65 }
.stat-item { background:#f0f7ff;border:1px solid rgba(26,95,168,.1);border-radius:var(--r-lg);padding:16px;text-align:center }
.stat-val { font-family:var(--fh);font-size:28px;font-weight:900;color:var(--ac);line-height:1;margin-bottom:6px }
.art-cta { background:linear-gradient(135deg,color-mix(in srgb,#E86920 70%,#000),var(--ac));border-radius:var(--r-xl);padding:28px;color:#fff;margin:40px 0;text-align:center }
.faq-q { padding:16px 20px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-family:var(--fh);font-size:14px;font-weight:700;color:var(--n900);background:var(--white);gap:12px }
.faq-q:hover,.faq-item.open .faq-q { background:#f0f7ff;color:var(--ac) }
.faq-a { display:none;padding:0 20px 18px;font-size:14px;color:var(--n600);line-height:1.8;background:#f0f7ff }
.toc-item:hover { background:#f0f7ff;color:var(--ac) }

@media(max-width:768px) {
  .stat-strip { grid-template-columns:1fr 1fr }
}

/* جداول المقارنة العريضة تمرَّر أفقيًا داخل حاويتها، والقوائم المرقّمة تأخذ أرقامها. */
.tbl-scroll { overflow-x: auto; margin: 28px 0; -webkit-overflow-scrolling: touch }
.tbl-scroll table { margin: 0; min-width: 620px }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm) }
.prose table th { background: var(--p); color: #fff; padding: 13px 16px; text-align: right; font-family: var(--fh); font-size: 13px; font-weight: 700 }
.prose table td { padding: 12px 16px; border-bottom: 1px solid var(--n100); vertical-align: top; line-height: 1.75 }
.prose table tr:nth-child(even) td { background: var(--n50) }
.prose table tr:last-child td { border-bottom: none }
.prose ol { margin: 0 0 20px; padding-right: 22px }
.prose ol li { list-style: decimal; margin-bottom: 12px; line-height: 1.85 }
.sb-body a { display: block; color: var(--p); line-height: 1.7 }
.sb-body a:hover { text-decoration: underline; text-underline-offset: 3px }
a.toc-item { text-decoration: none }
.step-num { width: 30px; height: 30px; border-radius: 50%; background: var(--p); color: #fff; font-family: var(--fh); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.step-title { font-family: var(--fh); font-weight: 700; color: var(--n900); margin-bottom: 4px }
.step-desc { font-size: 13.5px; color: var(--n600); line-height: 1.75 }