/* ═══════════════════════════════════════════════════════
 *  blog.css — أُستخرِج آليًا من pages/blog.php
 *  المقطع 1 من 1 · سطور 70–70 في الأصل.
 *  ⚠️ الترتيب بين المقاطع مقصود: بينها كتل <style> مشروطة
 *     باقية في الصفحة، والتتالي يعتمد على تسلسلها.
 *  ⚠️ نُقلت إلى لغة تصميم الرئيسية (٥ سبتمبر ٢٠٢٦): الرموز المحلّية
 *     (--navy · --mut · --soft · --soft2 · --blue2 · --amber · --gold)
 *     أُزيلت وحلّت محلّها رموز wtq-v4-base.css مباشرةً؛ ولا كحلي ولا
 *     تدرّج ولا زاوية أكبر من var(--r).
 *  ⚠️ إعادة بناء قوية (٨ سبتمبر ٢٠٢٦): الجولة الأولى كانت إعادة تلوين،
 *     وهذه تعيد البناء. صفحة القائمة صارت سلسلة أقسام لها حشو 96px
 *     وأرضية متناوبة (أبيض ← لوح) كأقسام الرئيسية، بعدما كانت تدفّقًا
 *     واحدًا داخل .bwrap بلا قسم ولا رأس (قِيس: أرضية واحدة من التصنيفات
 *     حتى الأسئلة). وأيقونات Font Awesome الظاهرة صارت SVG خطّيًّا
 *     (stroke 1.8) كأيقونات الرئيسية — والوسم <i> يبقى في الترميز محيَّدًا
 *     لا محذوفًا (قاعدة المالك: لا حذف عناصر).
 * ═══════════════════════════════════════════════════════ */
/* ═══ Alexandria — خطّ الموقع · ٢ سبتمبر ٢٠٢٦ ═══════════════════════════
   حلّ محلّ Segoe UI بطلب المالك. مستضاف ذاتيًّا كما كان سلفه: لا رابط
   لطرف ثالث، فلا تغيير في CSP ولا تسريب لزائر.
   وهو **خطّ متغيّر** — ملفٌّ واحد لكل نطاق يغطّي الأوزان كلّها (300→900)،
   فثلاثة ملفّات بمجموع ~٩٠ ك.ب بدل خمسة ملفّات Segoe منفصلة.
   و`unicode-range` تجعل المتصفّح ينزّل النطاق الذي يحتاجه وحده:
   الصفحة العربية لا تحمّل اللاتيني ولا العكس.
   ⚠️ التكرار في كل ملفّ CSS **مقصود** — كل صفحة تحمّل ملفًّا واحدًا فقط. */
@font-face{font-family:'Alexandria';font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/alexandria-arabic.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-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}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/alexandria-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/alexandria-latin.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}
/* ===== المدونة القانونية — وثائق (لغة الرئيسية: أزرق #2563EB · Alexandria موروث من body) ===== */
/* overflow-x:clip يقصّ فرق عرض شريط التمرير الذي تُحدثه الأقسام الممتدّة بعرض
   الشاشة (‎.bfull‎ أدناه) فلا يظهر فيض أفقي — وهو لا يُنشئ حاوية تمرير فيبقى
   ‎position:sticky‎ (شريط التقدّم والشريط الجانبي) عاملًا كما هو. */
.blog-page{color:var(--ink);background:#fff;direction:rtl;line-height:1.75;overflow-x:clip}
.blog-page *{box-sizing:border-box}
/* الأوزان على سلّم CLAUDE.md: 800 لـh1/h2 فقط · 500 لـh3/h4 والصفّ والزرّ والرابط.
   وارتفاع 1.7 لكل عنوان عربي قد يُكسر على سطرين — والتتبّع السالب للكبيرة وحدها. */
.blog-page h1,.blog-page h2,.blog-page h3,.blog-page h4{color:var(--ink);letter-spacing:normal;line-height:1.7;margin:0}
/* التتبّع السالب للعناوين الكبيرة وحدها (≥22px). h2 الصغيرة — الشريط الجانبي 15px ·
   النشرة 21px — تبقى بلا تتبّع: −.03em عند 15px = −0.45px يلصق الأحرف العربية
   المتّصلة ويطمس النقاط. */
.blog-page h1,.bhead h2,.feat-txt h2,.navyb h2,.cta h2,.post-content h2,.after h2{letter-spacing:-.03em}
.blog-page h3,.blog-page h4{font-weight:500}
.blog-page p{margin:0}
.blog-page a{color:inherit;text-decoration:none}
.blog-page a:focus-visible,.blog-page button:focus-visible,.blog-page input:focus-visible,.blog-page summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r)}

/* ═══ الأيقونات — SVG خطّي كما في الرئيسية ═══
   ⚠️ ٨ سبتمبر ٢٠٢٦: كانت الصفحة تحمل ٣٤ أيقونة Font Awesome ظاهرة والرئيسية صفر
   (كلّها SVG مضمَّن بـstroke-width 1.8). فصار لكل موضع بديلٌ خطّي، و<i> الأصلي
   يبقى في الترميز **محيَّدًا** بهذه القاعدة الواحدة — لا يُحذف عنصر من الصفحة.
   والمواضع التي لا تحمل الرئيسية فيها أيقونة أصلًا (علامة القسم · الشريحة ·
   عنوان القسم · البيان) حُيِّدت بلا بديل، وهي موسومة data-ico="off" في الترميز. */
.blog-page i.fas{display:none}
.blog-page .ico{width:1em;height:1em;display:inline-block;vertical-align:-.15em;flex:none}
/* بلاطة الأيقونة — نظير .v4-itile في الأساس: مربّع أزرق فاتح والأيقونة بداخله */
.blog-page .itile{width:40px;height:40px;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:grid;place-items:center;flex:none}
.blog-page .itile .ico{width:19px;height:19px}
.blog-page .itile.sm{width:26px;height:26px}
.blog-page .itile.sm .ico{width:14px;height:14px}

/* ═══ إيقاع الأقسام — 96px وأرضية متناوبة كأقسام الرئيسية ═══
   ⚠️ .bsec.alt هي الأرضية اللوح؛ و.bfull تمدّ الأرضية بعرض الشاشة فقط.
   (كانتا مدموجتين في .bfull فلم يكن للأبيض الممتدّ وجود، فصار قسمان لوحان
   يتلاقيان عند الأسئلة والنشرة.) السلسلة في صفحة القائمة:
   الهيرو لوح ← الأرشيف أبيض ← الأكثر قراءة لوح ← الأسئلة أبيض ←
   النشرة لوح ← النداء الختامي أبيض بنسيج نقاط (كـ.cta-final في الرئيسية).
   وحين لا توجد مقالات يسقط قسم «الأكثر قراءة» فتنقلب أرضيّتا الأسئلة
   والنشرة (شرط في الترميز) كي يبقى التناوب سليمًا في الحالتين. */
.bwrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.bsec{padding:96px 0}
.bsec.tight{padding:64px 0}
.blog-page section[id]{scroll-margin-top:96px}
.blog-page .bsec.alt{background:var(--panel)}
/* ===== قسم بعرض الشاشة داخل .bwrap — الأرضية تُمَدّ بهامش سالب يساوي نصف فرق
   العرض ثم بحشو مساوٍ يعيد المتن إلى مكانه بالضبط.
   محصورة في .bsec عمدًا: نداء صفحة المقال داخل عمود شبكة بجوار الشريط الجانبي
   فمدّه يكسر التخطيط. والفيض الأفقي يقصّه overflow-x:clip أعلاه. */
.blog-page .bsec.bfull{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%)}
/* داخل قسم ممتدّ يذوب صندوق النداء في أرضية القسم: لا حدّ ولا زاوية ولا حشو ثانٍ */
.bfull .cta{background:transparent;border-radius:0;padding:0}

/* ترويسة قسم — العلامة نقطة زرقاء + كلمة كما في الرئيسية (.v4-eyebrow) */
.bhead{max-width:760px;margin:0 0 40px}
.bhead .ey{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--muted);margin-bottom:14px}
.bh-kicker::before,.bhead .ey::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15);flex:0 0 auto}
.bhead h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;margin-bottom:12px}
.bhead p{color:var(--muted);font-size:clamp(13.5px,1.05vw,15.5px);font-weight:300;line-height:1.9;max-width:62ch}

/* ===== Hero القائمة — سطح var(--panel) بعرض الشاشة، والفصل بالسطح لا بحدّ مرسوم ===== */
.blog-hero{background:var(--panel);padding:64px 0 72px}
.crumb{font-size:12.5px;color:var(--muted);font-weight:400;margin-bottom:20px}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.crumb li{display:flex;align-items:center;gap:7px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--blue)}
.crumb li[aria-current]{color:var(--ink);font-weight:500}
.bh-in{max-width:820px}
.bh-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--muted);margin-bottom:14px}
.blog-hero h1{font-size:clamp(32px,4.2vw,52px);font-weight:800;margin-bottom:16px;line-height:1.28}
.blog-hero .lead{color:var(--muted);font-size:clamp(13.5px,1.05vw,15.5px);font-weight:300;line-height:1.9;max-width:68ch}
/* الشريحة على مقاس .chip في الرئيسية: نصّ وحده بلا رمز مرسوم */
.bh-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.bh-chips a{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:9px 16px;font-size:13.5px;font-weight:500;color:var(--ink);transition:border-color .2s,color .2s}
.bh-chips a:hover{border-color:var(--blue);color:var(--blue)}

/* ===== قسم الأرشيف: التصنيفات + المقال المميّز + الشبكة (شبكة بطاقات) ===== */
/* ⚠️ القسم بلا رأس عمدًا: لا يوجد في الصفحة نصّ صالح لأن يكون عنوانًا أو علامة،
   واختراع نصّ ممنوع — البند مذكور في needsOwner للمالك. */
.barch{background:#fff}
/* ===== التصنيفات — الأزرق للحالة النشطة وحدها ===== */
.blog-cats{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 26px;padding:0}
.bcat{padding:9px 18px;border-radius:var(--r);font-size:13.5px;font-weight:500;border:1px solid var(--line);background:#fff;color:var(--ink);transition:border-color .2s,color .2s}
.bcat:hover{border-color:var(--blue);color:var(--blue)}
.bcat.act{background:var(--blue);color:#fff;border-color:var(--blue)}
.bcat.act:hover{color:#fff}

/* ===== المقال المميّز ===== */
.feat{display:grid;grid-template-columns:1.05fr 1fr;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:26px;transition:border-color .25s}
.feat:hover{border-color:var(--blue)}
.feat-img{position:relative;min-height:310px;background:var(--blue-50);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:var(--blue)}
.feat-img .ico{width:48px;height:48px}
.feat-img.has{color:transparent}
.feat-badge{position:absolute;top:16px;inset-inline-end:16px;background:#fff;border:1px solid var(--line);color:var(--blue);font-size:12px;font-weight:500;padding:5px 12px;border-radius:var(--r)}
.feat-txt{padding:34px 36px;display:flex;flex-direction:column;justify-content:center}
.feat-txt .chip{font-size:12px;font-weight:500;color:var(--blue);background:var(--blue-50);border:1px solid #D6E2FB;border-radius:var(--r);padding:4px 11px;align-self:flex-start;margin-bottom:14px}
.feat-txt h2{font-size:clamp(22px,2.2vw,30px);font-weight:800;margin-bottom:12px}
.feat-txt p{font-size:14px;color:var(--muted);font-weight:300;line-height:1.9;margin-bottom:18px}
.feat-m{display:flex;gap:18px;font-size:12.5px;color:var(--muted);font-weight:400;margin-bottom:22px;flex-wrap:wrap}
.feat-m span{display:inline-flex;align-items:center;gap:6px}
.feat-m .ico{color:var(--blue);width:13px;height:13px}
.feat-btn{align-self:flex-start;background:var(--blue);border:1px solid var(--blue);color:#fff;border-radius:var(--r);padding:12px 26px;font-size:14.5px;font-weight:500;transition:background .16s,border-color .16s}
.feat:hover .feat-btn{background:var(--blue-700);border-color:var(--blue-700)}

/* ===== شبكة المقالات ===== */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.blog-card{background:#fff;border-radius:var(--r);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s}
.blog-card:hover{border-color:var(--blue)}
.blog-card-img{width:100%;height:170px;background:var(--blue-50);display:flex;align-items:center;justify-content:center;color:var(--blue);overflow:hidden;position:relative}
.blog-card-img .ico{width:32px;height:32px}
.blog-card-img img{width:100%;height:100%;object-fit:cover}
.blog-card-body{padding:20px;flex:1;display:flex;flex-direction:column}
.blog-cat-tag{font-size:12px;font-weight:500;color:var(--blue);background:var(--blue-50);border:1px solid #D6E2FB;padding:3px 9px;border-radius:var(--r);display:inline-block;margin-bottom:11px;align-self:flex-start}
.blog-card-body h3{font-size:16px;font-weight:500;margin:0 0 9px}
.blog-card-body p{font-size:13px;color:var(--muted);font-weight:300;line-height:1.85;margin:0 0 13px;flex:1}
.blog-meta{display:flex;align-items:center;gap:13px;font-size:12px;color:var(--muted);font-weight:400;margin-top:auto;padding-top:11px;border-top:1px solid var(--line)}
.blog-meta span{display:inline-flex;align-items:center;gap:6px}
.blog-meta .ico{width:13px;height:13px}
/* «اقرأ ←» — كانت سمة style مضمَّنة بوزن 700 */
.blog-more{color:var(--blue);font-weight:500;margin-inline-start:auto}

/* ===== حالة الفراغ ===== */
.bempty{grid-column:1/-1;background:var(--panel);border:1px dashed var(--line-2);border-radius:var(--r);padding:44px 28px;text-align:center}
.bempty .ic{width:62px;height:62px;border-radius:var(--r);background:#fff;border:1px solid var(--line);color:var(--blue);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.bempty .ic .ico{width:26px;height:26px}
.bempty h3{font-size:21px;font-weight:500;margin-bottom:9px}
.bempty p{color:var(--muted);font-size:14px;font-weight:300;line-height:1.9;max-width:56ch;margin:0 auto 20px}
.bempty .links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.bempty .links a{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px 18px;font-size:13.5px;font-weight:500;color:var(--blue);transition:border-color .2s}
.bempty .links a:hover{border-color:var(--blue)}

/* ===== الأكثر قراءة — قسم كامل برأس وشبكة بطاقات مرقّمة =====
   ⚠️ كان شريطًا ملحقًا بخطّ علوي وعنوانًا 19px داخل تدفّق الصفحة البيضاء،
   فلم يقرأ قسمًا. صار قسمًا بأرضية لوح ورأس قسم وبطاقات بأرقام .v4-num. */
.mr-strip .bhead{margin-bottom:32px}
.mr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mr-item{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:border-color .2s}
.mr-item:hover{border-color:var(--blue)}
.mr-n{width:26px;height:26px;border-radius:var(--r);background:var(--blue);color:#fff;font-size:12.5px;font-weight:500;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-variant-numeric:tabular-nums}
.mr-t{font-size:15.5px;font-weight:500;color:var(--ink);line-height:1.7}

/* ===== محاور المدونة (قواعد باقية — قسمها معطَّل في الترميز) ===== */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pillar{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:border-color .25s}
.pillar:hover{border-color:var(--blue)}
.pillar .pi{width:50px;height:50px;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:15px}
.pillar h3{font-size:18.5px;font-weight:500;margin-bottom:9px}
.pillar p{color:var(--muted);font-size:14px;font-weight:300;line-height:1.9;margin-bottom:14px}
.pillar ul{list-style:none;margin:0 0 16px;padding:0}
.pillar li{position:relative;padding-inline-start:22px;font-size:13.5px;font-weight:400;color:#3A3A38;margin-bottom:8px}
.pillar li::before{content:'';position:absolute;inset-inline-start:0;top:9px;width:8px;height:8px;border-radius:2px;background:var(--blue)}
.pillar .go{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--blue)}
.pillar .go:hover{color:var(--blue-700)}

/* ===== منهجية (خطوات مرقّمة — قسمها معطَّل في الترميز) ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:st}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;position:relative}
.step .n{width:36px;height:36px;border-radius:var(--r);background:var(--blue);color:#fff;font-weight:500;font-size:14px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step h3{font-size:16.5px;font-weight:500;margin-bottom:8px}
.step p{color:var(--muted);font-size:13.5px;font-weight:300;line-height:1.9}

/* ===== بلوك المراجع (كان كحليًّا بتدرّج — صار سطحًا فاتحًا بحدّ) ===== */
.navyb{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:44px 40px;color:var(--ink)}
.navyb h2{color:var(--ink);font-size:clamp(28px,3.4vw,44px);font-weight:800;margin-bottom:12px}
.navyb .sub{color:var(--muted);font-size:clamp(13.5px,1.05vw,15.5px);font-weight:300;line-height:1.9;max-width:70ch;margin-bottom:26px}
.navyb .lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.navyb .lgrid a{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;transition:border-color .2s}
.navyb .lgrid a:hover{border-color:var(--blue)}
.navyb .lgrid strong{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:15px;font-weight:500;margin-bottom:6px;line-height:1.7}
.navyb .lgrid span{display:block;color:var(--muted);font-size:13px;font-weight:300;line-height:1.85}

/* ===== أكورديون ===== */
.acc{display:grid;gap:10px;max-width:840px}
.acc details{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .25s}
/* الاختيار يُقال بالحدّ الأزرق وحده — الأكورديون بطاقة لا نافذة محاكاة، فلا ظلّ */
.acc details[open]{border-color:rgba(37,99,235,.3)}
.acc summary{cursor:pointer;list-style:none;padding:16px 18px;font-size:15px;font-weight:500;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:14px;line-height:1.7}
.acc summary::-webkit-details-marker{display:none}
/* ⚠️ علامة الفتح كانت محرفًا من Font Awesome بوزن 900 داخل ::after — استُبدلت
   بمربّع .x على مقاس نظيره في custom-contracts: علامة زائد مرسومة SVG تدور
   45° عند الفتح فتصير ×. (لا يجوز رسمها بتدرّج: الفاحص يمنع أي *-gradient.) */
.acc summary::after{content:'';width:28px;height:28px;flex-shrink:0;border-radius:var(--r);background:var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/13px 13px no-repeat;transition:transform .3s,background-color .3s}
.acc details[open] summary::after{transform:rotate(45deg);background-color:var(--blue);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.acc .ans{padding:0 18px 18px;color:var(--muted);font-size:13.5px;font-weight:400;line-height:1.95;max-width:70ch}
.acc .ans a{color:var(--blue);font-weight:500}

/* ===== النشرة — لوح بعرض الشاشة وبداخله بطاقة الاشتراك ===== */
.nl-band{background:#fff;border:1px solid var(--line);margin:0;border-radius:var(--r);padding:32px 34px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;color:var(--ink)}
/* حين يسقط قسم «الأكثر قراءة» تصير أرضية النشرة بيضاء (تناوب) — فتأخذ البطاقة
   نفسها سطح اللوح كي لا يلتقي سطحان أبيضان بلا فاصل. */
.nl-sec:not(.alt) .nl-band{background:var(--panel)}
.nl-band .nl-t{flex:1;min-width:220px}
.nl-band h2{color:var(--ink);font-size:21px;font-weight:500;margin-bottom:6px}
.nl-band p{font-size:13.5px;color:var(--muted);font-weight:300;line-height:1.9}
.nl-band .nl-f{display:flex;gap:10px;flex:1;min-width:260px}
.nl-band input{flex:1;border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;font-size:13.5px;font-family:inherit;font-weight:400;outline:none;text-align:start;background:#fff;color:var(--ink)}
.nl-band input:focus{border-color:var(--blue)}
.nl-band button{background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:var(--r);padding:12px 26px;font-size:14.5px;font-weight:500;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .16s,border-color .16s}
.nl-band button:hover{background:var(--blue-700);border-color:var(--blue-700)}

/* ===== CTA — سطح var(--panel) بحشو واسع بلا حدّ (لا صندوق ملوّن ولا تدرّج) ===== */
.cta{background:var(--panel);border-radius:var(--r);padding:64px 40px;text-align:center}
.cta h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;margin-bottom:14px}
.cta p{color:var(--muted);font-size:clamp(13.5px,1.05vw,15.5px);font-weight:300;line-height:1.9;max-width:64ch;margin:0 auto 26px}
.cta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* ⚠️ لون الفعل يحتاج نوعية 0-2-0: القاعدة العامّة `.blog-page a{color:inherit}` أعلاه
   نوعيتها 0-1-1 فتتغلّب على `.btn-p` المفردة (0-1-0) وتصبغ نصّ الزرّ بلون الحبر
   فوق الأزرق (تباين 3.81:1 دون حدّ AA). فبادئة `.blog-page` هنا شرط لا زينة. */
.btn-p,.btn-s{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--r);padding:12px 26px;font-size:14.5px;font-weight:500;transition:background .16s,border-color .16s,transform .15s}
.blog-page .btn-p{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-p:hover{background:var(--blue-700);border-color:var(--blue-700);transform:translateY(-1px)}
.blog-page .btn-s{background:#fff;color:var(--blue);border-color:#C7D7FB}
.btn-s:hover{background:var(--blue-50);border-color:var(--blue)}
.blog-page .btn-p .ico,.blog-page .btn-s .ico{width:15px;height:15px}

/* ===== النداء الختامي — على مقاس .cta-final في الرئيسية: أبيض بنسيج نقاط ===== */
/* ⚠️ نسيج النقاط: الرئيسية ترسمه بـradial-gradient لنقاطه وبقناع يفرّغ وسطه،
   وفاحص الصفحة يمنع أي `*-gradient` في ورقة صفحة — فرُسم النسيج نفسه بصورتَي
   SVG مضمَّنتين تعطيان النتيجة ذاتها (نقطة #D9D9D4 نصف قطرها .9px كل 15px،
   وقناع يفرّغ الوسط حيث يقع النصّ). الحلّ منقول حرفًا بحرف من
   features-custom-contracts.css كي تتطابق الصفحتان. */
.fin{position:relative;overflow:hidden}
.fin::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Ccircle cx='7.5' cy='7.5' r='.9' fill='%23D9D9D4'/%3E%3C/svg%3E");
  background-size:15px 15px;background-repeat:repeat;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' preserveAspectRatio='none'%3E%3CradialGradient id='g' cx='.5' cy='.5' r='.65'%3E%3Cstop offset='.4' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='1'/%3E%3C/radialGradient%3E%3Crect width='100' height='100' fill='url(%23g)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' preserveAspectRatio='none'%3E%3CradialGradient id='g' cx='.5' cy='.5' r='.65'%3E%3Cstop offset='.4' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='1'/%3E%3C/radialGradient%3E%3Crect width='100' height='100' fill='url(%23g)'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.fin .cta{position:relative}
.fin .cta h2{font-size:clamp(32px,4.2vw,54px)}

/* ملاحظة/تنبيه — صارت «بيانًا» على مقاس مانيفستو الرئيسية:
   بمحاذاة البداية بعلامة زرقاء جانبية 2px بلا صندوق ولا أيقونة (كانت صندوق لوح
   بأيقونة، فقرأت تنبيهًا داخل بطاقة بجوار بطاقة المقال). النصّ نفسه بلا تغيير. */
.note{display:flex;gap:14px;background:transparent;border:0;border-inline-start:2px solid var(--blue);border-radius:0;padding:0;padding-inline-start:clamp(20px,2.4vw,34px);margin-top:34px}
.note p{color:var(--ink);font-size:clamp(15px,1.15vw,16.5px);font-weight:300;line-height:1.9;text-wrap:pretty}

/* ===== المقال المفرد ===== */
.rp{position:sticky;top:0;height:3px;background:var(--panel);z-index:40}
.rp span{display:block;height:100%;width:0;background:var(--blue)}
.post-hero{background:var(--panel);padding:40px 0 56px}
.post-hero-in{max-width:820px}
/* بادئة `.blog-page` لنفس سبب الأزرار: وإلّا ورث الرابط لون الحبر فلم يُقرأ رابطًا */
.blog-page .post-back{color:var(--blue);font-size:13.5px;margin-bottom:16px;display:inline-flex;align-items:center;gap:7px;font-weight:500}
.post-back:hover{color:var(--blue-700)}
.post-back .ico{width:14px;height:14px}
.post-cat{background:#fff;border:1px solid #D6E2FB;color:var(--blue);font-size:12px;font-weight:500;padding:5px 12px;border-radius:var(--r);display:inline-block;margin-bottom:14px}
/* عنوان المقال يُكسر على أكثر من سطر دائمًا — فارتفاع 1.7 لا استثناء الهيرو */
.post-hero h1{font-size:clamp(26px,3.2vw,40px);font-weight:800;margin:0 0 16px;line-height:1.7;max-width:34ch}
.post-hmeta{display:flex;gap:18px;font-size:13px;color:var(--muted);font-weight:400;flex-wrap:wrap;align-items:center}
.post-hmeta span{display:inline-flex;align-items:center;gap:7px}
.post-hmeta .ico{color:var(--blue);width:14px;height:14px}
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:34px;align-items:start;padding-top:56px}
.post-content{background:#fff;border-radius:var(--r);border:1px solid var(--line);padding:38px 40px;line-height:1.95;color:var(--ink);font-size:16.5px;font-weight:400;max-width:72ch}
.post-content>*{max-width:70ch}
.post-content h2{color:var(--ink);font-size:23px;font-weight:800;margin:32px 0 12px}
.post-content h3{color:var(--ink);font-size:19px;font-weight:500;margin:24px 0 10px}
.post-content h2:first-child,.post-content h3:first-child{margin-top:0}
.post-content p{margin-bottom:17px}
.post-content ul,.post-content ol{margin:12px 0 18px;padding-inline-start:22px}
.post-content li{margin-bottom:9px}
.post-content strong{color:var(--ink);font-weight:500}
.post-content a{color:var(--blue);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.post-content img{max-width:100%;height:auto;border-radius:var(--r);margin:8px 0}
.post-content blockquote{margin:20px 0;padding:16px 22px;background:var(--panel);border-inline-start:3px solid var(--blue);border-radius:var(--r);color:var(--ink)}
.post-content table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.post-content th,.post-content td{border:1px solid var(--line);padding:11px 13px;text-align:start}
.post-content th{background:var(--panel);color:var(--ink);font-weight:500}
.post-content pre{background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:16px;border-radius:var(--r);overflow:auto;font-size:13.5px}

/* الشريط الجانبي — عنوان البطاقة يسبقه بلاطة أيقونة صغيرة كبطاقات الرئيسية */
aside.bside{position:sticky;top:16px}
.sidebar-card{background:#fff;border-radius:var(--r);border:1px solid var(--line);padding:22px;margin-bottom:16px}
.sidebar-card h2{font-size:15px;font-weight:500;color:var(--ink);margin:0 0 15px;padding-bottom:11px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.sidebar-card h3{font-size:15px;font-weight:500;color:var(--ink);margin:0 0 15px;padding-bottom:11px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.popular-item{display:flex;gap:12px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.popular-item:last-child{border:none;margin:0;padding:0}
.popular-item:hover .pop-title{color:var(--blue)}
.pop-num{width:26px;height:26px;border-radius:var(--r);background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:500;color:#fff;flex-shrink:0;font-variant-numeric:tabular-nums}
.pop-title{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.7;transition:color .2s}
.side-links{list-style:none;margin:0;padding:0}
.side-links li{margin-bottom:11px}
.side-links a{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--ink)}
.side-links a:hover{color:var(--blue)}
.side-links .ico{color:var(--blue);width:14px;height:14px}
.news-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:16px}
.news-card h3{font-size:15px;font-weight:500;color:var(--ink);border:none;padding:0;margin:0 0 7px;display:flex;align-items:center;gap:10px}
.news-card .itile.sm{background:#fff}
.news-card p{font-size:13px;color:var(--muted);font-weight:300;margin:0 0 14px;line-height:1.85}
.news-card input{width:100%;padding:11px 13px;border-radius:var(--r);border:1px solid var(--line);font-family:inherit;font-size:13px;font-weight:400;margin-bottom:9px;text-align:start;outline:none;background:#fff;color:var(--ink)}
.news-card input:focus{border-color:var(--blue)}
.news-card button{width:100%;background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:var(--r);font-size:13.5px;font-weight:500;padding:11px;cursor:pointer;transition:background .16s,border-color .16s;font-family:inherit}
.news-card button:hover{background:var(--blue-700);border-color:var(--blue-700)}

/* بعد المقال — رأس + شبكة بطاقات ببلاطات أيقونات (كانت أيقونة عائمة بلا بلاطة) */
.after{max-width:72ch;margin-top:48px}
.after h2{font-size:23px;font-weight:800;margin-bottom:8px}
.after>p{color:var(--muted);font-size:14px;font-weight:300;line-height:1.9}
.after-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.after-grid a{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;transition:border-color .2s;display:block}
.after-grid a:hover{border-color:var(--blue)}
.after-grid .itile{margin-bottom:14px}
.after-grid strong{display:block;color:var(--ink);font-size:15.5px;font-weight:500;margin-bottom:6px;line-height:1.7}
.after-grid span{color:var(--muted);font-size:13px;font-weight:300;line-height:1.85;display:block}

@media(max-width:980px){
  .pillars,.navyb .lgrid,.after-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .blog-layout{grid-template-columns:1fr}
  aside.bside{position:static}
  .post-content{max-width:none}
}
@media(max-width:820px){
  .bwrap{padding:0 20px}
  .bsec{padding:64px 0}
  .bsec.tight{padding:48px 0}
  .blog-hero{padding:40px 0 48px}
  .blog-layout{padding-top:40px}
  .post-content{padding:24px 22px;font-size:16px}
  .feat{grid-template-columns:1fr}
  .feat-img{min-height:200px}
  .feat-txt{padding:24px}
  .mr-grid{grid-template-columns:1fr 1fr}
  .nl-band,.navyb{padding:26px 22px}
  .cta{padding:48px 22px}
  .bhead{margin-bottom:32px}
  .nl-band{flex-direction:column;align-items:stretch}
}
@media(max-width:560px){
  .pillars,.steps,.navyb .lgrid,.after-grid,.mr-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .nl-band .nl-f{flex-direction:column}
  .nl-band button,.nl-band input{width:100%}
  /* الأزرار تنزل كاملة العرض على الهاتف بدل عرضين ثابتين يلتفّان */
  .cta .btns{flex-direction:column}
  .cta .btns .btn-p,.cta .btns .btn-s{width:100%}
}