/* ربط — ستايل مشترك للمدونة والصفحات الداخلية (RTL + LTR) */
:root{
  /* نظام تصميم ربط — نفس رموز صفحة التسويق. الأساسي #0E7A47 بقرار المالك:
     الأبيض على #17A05F يعطي 3.37:1 وهو راسب بـWCAG AA، وعلى الأغمق 5.39:1.
     الزاهي يبقى accent للتعبئات غير النصّية. */
  --ink:#262626; --ink-2:#3D403B; --muted:#6B6E69; --line:#EFF0ED;
  --bg:#F6F5F2; --surface:#FFFFFF; --surface-2:#F2F3F1;
  --primary:#0E7A47; --primary-deep:#0B5F37; --primary-soft:#E1FBD6;
  --accent:#17A05F; --accent-soft:#F4FFF0; --warn:#B8862B; --warn-soft:#FFF9E8;
  --danger:#C2452F; --danger-soft:#FDE8E4;
  --wa:#25D366; --fb:#1877F2; --ig:#E1306C;
  --radius:18px; --shadow:0 10px 30px rgba(38,38,38,.06); --shadow-lg:0 30px 60px rgba(38,38,38,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.85;-webkit-font-smoothing:antialiased}
body[dir="ltr"],html[dir="ltr"] body{font-family:"IBM Plex Sans","IBM Plex Sans Arabic",-apple-system,Segoe UI,Arial,sans-serif;line-height:1.7}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{width:min(1140px,92vw);margin-inline:auto}
h1,h2,h3,h4{line-height:1.3;font-weight:700}
/* Cairo للعناوين العربية وحدها — نظام العلامة يخصّه بها، والصفحة
   الإنكليزية تبقى على IBM Plex Sans لأن Cairo خطّ عربي. */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{font-family:"Cairo","IBM Plex Sans Arabic",Tahoma,sans-serif;letter-spacing:-.02em}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:12px;font-weight:600;font-size:15px;border:1px solid transparent;transition:.2s;cursor:pointer}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 20px rgba(36,87,245,.28)}
.btn-primary:hover{background:var(--primary-deep);transform:translateY(-1px)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-lg{padding:16px 28px;font-size:17px;border-radius:14px}

/* nav */
header.site{position:sticky;top:0;z-index:50;background:rgba(247,249,254,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.site nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
header.site .links{display:flex;gap:26px;font-size:15px;font-weight:500;color:var(--ink-2)}
header.site .links a:hover{color:var(--primary)}
header.site .links a.on{color:var(--primary);font-weight:600}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:26px;flex:none}
.logo .mark{width:40px;height:26px}
.navend{display:flex;align-items:center;gap:14px;flex:none}
.lang{font-size:13px;font-weight:600;color:var(--muted);border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px}
.lang:hover{color:var(--primary);border-color:var(--primary)}
@media(max-width:860px){header.site .links{display:none}}

/* blog index */
.blog-hero{padding:56px 0 30px}
.eyebrow{display:inline-block;font-size:13px;font-weight:600;color:var(--primary);background:var(--primary-soft);padding:4px 12px;border-radius:999px;margin-bottom:14px}
.blog-hero h1{font-size:clamp(30px,4.4vw,48px);letter-spacing:-.02em;margin-bottom:14px}
.blog-hero p{color:var(--muted);font-size:clamp(16px,1.6vw,19px);max-width:680px}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;padding-bottom:20px}
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.2s}
.post:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--primary-soft)}
.post .tag{display:inline-block;align-self:flex-start;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:#0E6B3F;margin-bottom:12px}
.post .tag.b{background:var(--primary-soft);color:var(--primary-deep)}
.post h2{font-size:20px;margin-bottom:10px}
.post p{color:var(--muted);font-size:15px;flex:1}
.post .meta{display:flex;gap:14px;color:var(--muted);font-size:13px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.post.soon{opacity:.72;box-shadow:none;background:var(--surface-2);border-style:dashed}
.post.soon:hover{transform:none;box-shadow:none}
.soon-tag{background:#E8ECF6;color:var(--muted)}
.sec-title{font-size:20px;margin:44px 0 18px;display:flex;align-items:center;gap:12px;color:var(--ink-2)}
.sec-title::after{content:"";flex:1;height:1px;background:var(--line)}

/* article */
.article{padding:34px 0 20px}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:22px}
.crumbs a:hover{color:var(--primary)}
.crumbs span{margin:0 6px;opacity:.5}
.article h1{font-size:clamp(28px,4.2vw,44px);letter-spacing:-.02em;margin:8px 0 18px;max-width:900px}
.article .standfirst{font-size:clamp(17px,1.7vw,20px);color:var(--ink-2);max-width:760px;line-height:1.75}
.byline{display:flex;flex-wrap:wrap;gap:16px;align-items:center;color:var(--muted);font-size:14px;margin-top:22px;padding-bottom:22px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.byline .who{display:flex;align-items:center;gap:9px;color:var(--ink-2);font-weight:600}
.byline .who i{width:30px;height:30px;border-radius:50%;background:var(--primary-soft);display:grid;place-items:center;font-style:normal;font-size:13px;color:var(--primary)}
.prose{max-width:760px;font-size:17.5px}
.prose h2{font-size:clamp(22px,2.6vw,28px);margin:44px 0 14px;padding-top:6px;position:relative}
.prose h2::before{content:"";position:absolute;top:-10px;inset-inline-start:0;width:46px;height:4px;border-radius:2px;background:var(--primary)}
.prose h3{font-size:19px;margin:30px 0 10px;color:var(--ink-2)}
.prose p{margin-bottom:16px;color:#243050}
.prose ul,.prose ol{margin:0 0 18px;padding-inline-start:22px;display:grid;gap:9px;color:#243050}
.prose li::marker{color:var(--primary)}
.prose strong{font-weight:700;color:var(--ink)}
.prose a{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose hr{border:0;border-top:1px solid var(--line);margin:38px 0}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 24px;margin:28px 0 34px}
.toc b{display:block;font-size:14px;color:var(--muted);font-weight:600;margin-bottom:10px}
.toc ol{margin:0;padding-inline-start:20px;display:grid;gap:7px;font-size:15.5px}
.toc a{color:var(--ink-2);font-weight:500;text-decoration:none}
.toc a:hover{color:var(--primary)}
.tbl{overflow-x:auto;margin:22px 0 26px;-webkit-overflow-scrolling:touch}
.tbl table{width:100%;min-width:460px;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:15.5px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:13px 16px;text-align:start;border-bottom:1px solid var(--line)}
.tbl th{background:var(--surface-2);font-weight:600;font-size:14.5px;color:var(--ink-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:600}
.tbl .y{color:#0E6B3F;font-weight:700}.tbl .n{color:var(--danger);font-weight:700}
.tbl tfoot td{background:#FBFCFF;font-weight:700}
.box{border-radius:16px;padding:20px 24px;margin:24px 0;border:1px solid var(--line);background:var(--surface)}
.box b.h{display:block;margin-bottom:7px;font-size:15.5px}
.box p:last-child{margin-bottom:0}
.box.law{background:var(--accent-soft);border-color:#A9E7CD}
.box.law b.h{color:#0E6B3F}
.box.law p{color:#12503A}
.box.note{background:var(--primary-soft);border-color:#BFD2FF}
.box.note b.h{color:var(--primary-deep)}
.box.note p{color:#1C336F}
.box.warn{background:var(--warn-soft);border-color:#F3D68B}
.box.warn b.h{color:#8A5A00}
.box.warn p{color:#6B4A08}
.formula{background:var(--ink);color:#EAF0FF;border-radius:14px;padding:18px 22px;margin:20px 0;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;text-align:center;line-height:2;overflow-x:auto}
.formula em{font-style:normal;color:var(--accent);font-weight:700}
.faq{display:grid;gap:12px;margin:22px 0 10px}
details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 20px}
summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:22px;color:var(--primary);font-weight:400;flex:none}
details[open] summary::after{content:"–"}
details p{color:var(--muted);margin:10px 0 0;font-size:15.5px}
.disc{font-size:14px;color:var(--muted);background:var(--surface-2);border-radius:12px;padding:16px 20px;margin-top:30px;line-height:1.7}
.cta-box{background:var(--ink);color:#fff;border-radius:24px;padding:44px 36px;text-align:center;margin:48px 0 10px;position:relative;overflow:hidden;max-width:760px}
.cta-box::after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(18,185,129,.35),transparent 70%);top:-150px;inset-inline-start:-110px}
.cta-box h2{font-size:clamp(21px,2.6vw,28px);position:relative;margin-bottom:10px}
.cta-box p{position:relative;color:#C7D0EA;margin-bottom:22px;font-size:16px}
.cta-box .btn{position:relative;background:var(--accent);color:#fff}
.cta-box .btn:hover{background:#0FA271}
.more{margin:44px 0 10px;max-width:760px}
.more b{display:block;font-size:15px;color:var(--muted);margin-bottom:14px}
.more .row{display:grid;gap:12px}
.more a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 20px;font-weight:600;transition:.2s}
.more a:hover{border-color:var(--primary);color:var(--primary);transform:translateX(-3px)}
[dir="ltr"] .more a:hover{transform:translateX(3px)}
.more a small{display:block;font-weight:400;color:var(--muted);font-size:14px;margin-top:3px}

footer.site{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:14px;margin-top:40px;background:var(--surface)}
footer.site .row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
footer.site .fl{display:flex;gap:20px;flex-wrap:wrap}
footer.site a:hover{color:var(--primary)}
@media(max-width:600px){.prose{font-size:16.5px}.cta-box{padding:34px 22px}}

.wordmark{font-family:"Quicksand",sans-serif;font-weight:700;direction:ltr;text-transform:lowercase;letter-spacing:-.3px}

/* الشاشات الصغيرة: مبدّل اللغات ينزل إلى التذييل. مع أربع لغات صار
   .navend وحده 336–407 بكسل داخل شاشة 375، فيدفع الصفحة كلها أفقياً.
   زر البدء هو ما يبقى في الشريط لأنه مسار التحويل، والروابط تبقى في
   الـHTML فيقرأها الزاحف كما هي. */
@media(max-width:700px){
  header.site .langpick{display:none}
}

/* ── مبدّل اللغة: زر واحد ينسدل ─────────────────────────────
   details/summary: يفتح ويغلق بلا سطر جافاسكربت، ويشتغل بلوحة المفاتيح
   وقارئ الشاشة من نفسه. أربع لغات كروابط متجاورة كانت تزاحم الترويسة. */
/* الترويسة flex، فالعنصر يتمطّط إلى ارتفاعها ويصير أطول من الزر —
   والقائمة تتعلّق بالصندوق الممطوط فتنزل بفجوة ومزاحة. يُلزَم بحجم
   زرّه: inline-flex يجعل الصندوق بقياس الملخّص، وalign-self يمنع
   التمطّط. */
/* يرث حشوة وحدّاً من قاعدة عامة على الترويسة، فيصير صندوقه 91px بينما
   زرّه 53px — والقائمة تتعلّق بالصندوق لا بالزر فتنزل بفجوة ومزاحة.
   تُصفَّر صراحةً: الاعتماد على ألا ترثه قاعدةٌ أخرى هو ما كسره. */
.langpick{position:relative;display:inline-flex;align-items:center;align-self:center;padding:0;margin:0;border:0;background:none}
.langpick>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--muted);border:1px solid var(--line);
  background:var(--surface);border-radius:999px;padding:7px 13px}
.langpick>summary::-webkit-details-marker{display:none}
.langpick>summary:hover{color:var(--ink);border-color:var(--muted-2,var(--line))}
.langpick>summary svg{width:10px;height:6px;transition:transform .15s}
.langpick[open]>summary svg{transform:rotate(180deg)}
.langmenu{position:absolute;inset-block-start:calc(100% + 6px);inset-inline-end:0;z-index:40;
  min-width:150px;display:flex;flex-direction:column;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 10px 30px rgba(38,38,38,.10)}
.langmenu a{padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:600;
  color:var(--ink);text-decoration:none}
.langmenu a:hover{background:var(--surface-2)}