/* ═══════════════════════════════════════════════════════
 *  how-we-help.css — أُستخرِج آليًا من pages/how-we-help.php
 *  المقطع 1 من 1 · سطور 11–11 في الأصل.
 *  ⚠️ الترتيب بين المقاطع مقصود: بينها كتل <style> مشروطة
 *     باقية في الصفحة، والتتالي يعتمد على تسلسلها.
 *  ⚠️ نُقلت إلى لغة تصميم الرئيسية (٥ سبتمبر ٢٠٢٦): إعادة تلوين وإعادة طباعة
 *     في مكانها — لا إعادة بناء ولا حذف عنصر ولا تغيير نصّ. الرموز المحلّية
 *     (--navy --mut --soft --soft2 --blue2 --amber --gold) أُلغيت وحلّت محلّها
 *     رموز wtq-v4-base.css مباشرةً، فلا كحلي ولا بنفسجي ولا تدرّج ولا قسم داكن،
 *     والزوايا كلّها var(--r) عدا الكبسولات 999px والدوائر 50%.
 *  ⚠️ إعادة تصميم قويّة (٦ سبتمبر ٢٠٢٦): البنية نفسها نُقلت إلى إيقاع الرئيسية —
 *     رأس قسم واحد مركزي (رمز ← h2 ← سطر شرح) ثم مكوّن واحد واضح من الكتالوج،
 *     وتناوب الأسطح بين #fff و var(--panel)، والحشو 96px (64 تحت 900px).
 *     كل سمة style="…" في الترميز نُقلت إلى هنا (كانت ٣٠). لا نصّ حُذف ولا تغيّر.
 * ═══════════════════════════════════════════════════════ */
/* ═══ 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}
/* ⚠️ لا :root محلّي بعد اليوم: كل رمز يأتي من wtq-v4-base.css. الرموز القديمة
   (--navy --mut --soft --soft2) كانت تحمل كحليًّا ورماديًّا باردًا يناقض اللغة. */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Alexandria','Segoe UI',Tahoma,Arial,sans-serif;color:var(--ink);background:#fff;direction:rtl;line-height:1.75;overflow-x:clip}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r)}
/* الفصل بالفراغ وتناوب سطحين — لا حدّ بين قسم وقسم */
section{padding:96px 0}
section[id]{scroll-margin-top:96px}
section.alt{background:var(--panel)}
/* ═══ الهيرو ═══ مركزي كهيرو الرئيسية: علامة صغيرة ← عنوان بسطرين ← شرح ← أفعال */
.hwh-hero{position:relative;padding:44px 0 80px;text-align:center;overflow:hidden;background:#fff}
/* ═══ أرضية الهيرو ═══ هي أرضية هيرو الرئيسية نفسها: ورقة بيضاء وشبكة نقاط
   #D9D9D4 كل 15px، مع قناع بيضاوي يفرّغ وسطها تحت العنوان **ويبقى مصمتًا خارجه**.
   ⚠️ النقاط والقناع مرسومان بـSVG مضمَّن لا بـradial-gradient: التدرّجات ممنوعة
      في هذه اللغة (والفاحص يرفضها) — والنتيجة البصرية واحدة.
   ⚠️ صُحّح ٦ سبتمبر ٢٠٢٦: كانت نقطة التوقّف الأخيرة (offset 1) بألفا 0، وspreadMethod
      الافتراضي في SVG هو pad فتُمدّ خارج نصف القطر — فتختفي النقاط في الزوايا الأربع
      (قِيس: tl=tr=bl=br=0) فيصير الحقل حلقةً لا حقلًا كاملًا. قناع الرئيسية
      radial-gradient(ellipse 58% 62% at 50% 46%, transparent 62%, #000 100%) آخر
      توقّفه مصمت، والزاوية على مسافة معيارية 1.23 > 1 فتأخذ 255.
      فصار هنا: نصف قطر .58 مع gradientTransform يمدّ المحور الرأسي إلى .62
      (58% × 62% كالرئيسية بالضبط)، وتوقّفان فقط: .62 شفّاف ← 1 مصمت. */
.hwh-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%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;
  -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='m' cx='.5' cy='.46' r='.58' gradientTransform='matrix(1 0 0 1.069 0 -.0317)'%3E%3Cstop offset='.62' stop-opacity='0'/%3E%3Cstop offset='1' stop-opacity='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23m)'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='m' cx='.5' cy='.46' r='.58' gradientTransform='matrix(1 0 0 1.069 0 -.0317)'%3E%3Cstop offset='.62' stop-opacity='0'/%3E%3Cstop offset='1' stop-opacity='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23m)'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* الهالتان الزخرفيتان مُحيَّدتان — لا تُحذفان من الترميز (قاعدة المالك: لا حذف عنصر).
   كانتا دائرتين 340px و280px بتمويه 64px تصبغان أرضية الهيرو كلّها بزرقة فاتحة،
   وتغطّيان الهيرو بأكمله عند 390px. صارتا شفّافتين بلا تمويه فلا أثر لهما. */
.orb{position:absolute;border-radius:50%;filter:none;background:transparent;width:0;height:0;z-index:0;pointer-events:none}
.orb.a{width:0;height:0;background:transparent;top:-130px;right:-60px}
.orb.b{width:0;height:0;background:transparent;bottom:-120px;left:-40px}
.hwh-hero>.wrap{position:relative;z-index:2}
/* كانت كبسولة مؤطَّرة؛ صارت سطر eyebrow بعلامة واحدة كما في الرئيسية */
.ey{display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;border-radius:0;padding:0;color:var(--muted);font-weight:500;font-size:12.5px;line-height:1.7;margin-bottom:14px}
.ey i{color:var(--blue);font-size:11px}
.hwh-hero h1{font-size:clamp(34px,4.7vw,60px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.28;margin-bottom:18px;text-wrap:balance}
/* الشطر الثاني سطر مستقلّ خافت — بنية عنوان الرئيسية نفسها (h1 .dim) */
.hwh-hero h1 .g{display:block;margin-top:.28em;color:var(--faint);font-weight:inherit;font-size:1.09em;letter-spacing:-.035em}
.hwh-hero p.lead{font-size:clamp(13.5px,1.05vw,15.5px);font-weight:300;line-height:1.9;color:var(--muted);max-width:68ch;margin:0 auto;text-wrap:balance}
/* breadcrumb */
.bc{padding:16px 0 0;font-size:13.5px;font-weight:400;color:var(--muted)}
.bc ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bc a{color:var(--muted);font-weight:500}.bc a:hover{color:var(--blue)}
.bc li[aria-current]{color:var(--ink);font-weight:500}
/* الفاصل نصّ ظاهر: --line-2 تباينه 1.52 — رُفع إلى --muted (5.11) */
.bc .sep{color:var(--muted)}
/* ═══ رأس القسم الموحَّد ═══ h2 ← سطر شرح · مركزي بعرض 780px وهامش 48px
   (بنية ‎.wtq-v4 .sec .hd‎ في الرئيسية حرفًا بحرف: max-width 780 · margin 0 auto 48 · مركزي) */
.hd{max-width:780px;margin:0 auto 48px;text-align:center}
/* ⚠️ بلاطة أيقونة رأس القسم — مُحيَّدة، لا محذوفة (قاعدة المالك: لا حذف عنصر).
   كانت مربّعًا 36×36 بخلفية var(--blue-50) وأيقونة Font Awesome صلبة يشغل موضع
   الـeyebrow في رأس القسم. والرئيسية **لا تحمل بلاطة أيقونة في أي رأس قسم**
   (٠ من ١٤ رأسًا) — فكانت توقيعًا مضادًّا لتوقيعها لا نقلًا عنه.
   موضع الـeyebrow يبقى خاليًا الآن: نصّه قرار للمالك (انظر needsOwner). */
.hd .ic{display:none}
.sec-h{font-size:clamp(28px,3.4vw,44px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.7;text-wrap:balance}
/* ⚠️ شطر العنوان الخافت — بنية عنوان الرئيسية (‎.sec h2 .dim‎ = var(--faint)).
   لا h2 في هذه الصفحة يحمله اليوم: نصّ كل عنوان من الثمانية سلسلة ‎_e()‎ واحدة،
   وشقّها إلى شطرين يخلق مفتاح ترجمة جديدًا يحتاج نصًّا إنجليزيًّا — وهو قرار نصّ
   للمالك لا قرار تصميم (انظر needsOwner). القاعدة جاهزة فور أن يقرّر. */
.sec-h .dim,.cta h2 .dim{color:var(--faint);font-weight:inherit}
.sec-sub{color:var(--muted);margin:16px auto 0;font-size:clamp(13.5px,1.05vw,15.5px);font-weight:300;line-height:1.9;max-width:62ch}
h3{font-size:17.5px;font-weight:500;color:var(--ink);line-height:1.7}
a.lk{color:var(--blue);font-weight:500}
a.lk:hover{text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ═══ الأيقونات ═══ خطّية مضمَّنة بأسلوب الرئيسية حرفيًّا:
   viewBox 0 0 24 24 · fill:none · stroke:currentColor · stroke-width 1.8 · linecap round.
   ⚠️ وسوم ‎<i class="fas …">‎ باقية كلّها في الترميز (قاعدة المالك: لا حذف عنصر)
      ويُحيَّد رسمها بـ‎content:none‎ على ‎::before‎ — وهو موضع محرف Font Awesome —
      ثم تُحتضن الـSVG داخلها فترث لونها ومقاسها وموضعها بلا تغيير في التخطيط.
   ⚠️ أيقونات الشرائح ‎.chip i‎ (٥٠) **لا رسم لها**: وصفة شريحة الرئيسية نفسها —
      ‎<i>‎ فارغ يُرسم مربّعًا 11px (home-v4.css:111). فأنواع الملفّات (عقد · ملحق
      تعرفة · إقرار · ترخيص) لا مقابل خطّيًّا مميّزًا لها في مجموعة الرئيسية،
      وتوحيدها إلى «ملفّ» عامّ يُفقد التمييز الذي تحمله — والمربّع هو ما تفعله
      الرئيسية في الحالة نفسها. القاعدة عند ‎.chip i‎ أدناه.
   ⚠️ وبلاطات رؤوس الأقسام الثلاث (‎.hd .ic‎ في «ما يتغيّر» و«قبل وبعد»
      و«حالات عملية») كانت آخر ‎<i>‎ في متن الصفحة يحمل محرف Font Awesome حيًّا
      (مخفيًّا بـ‎display:none‎ على ‎.ic‎ وحده) — فصارت تحمل SVG خطّيًّا كبقيّتها،
      فلم يبقَ في متن الصفحة محرف Font Awesome واحد ظاهرًا ولا مخفيًّا (قِيس). */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.15em;flex:none}
.wtq-i{display:inline-flex;align-items:center;justify-content:center;line-height:1;vertical-align:-.15em}
.wtq-i::before{content:none}
.role i .ico,.card .ci .ico,.sector .top .ci .ico,.dbox .ci .ico{width:19px;height:19px}
.acc summary .ic .ico{width:15px;height:15px}
/* علامتا ✓/✗ في القوائم: عنصر الأيقونة ابن مرن داخل ‎li{display:flex}‎ فيتمدّد
   بارتفاع البند كلّه (قِيس 45px لبند من سطرين) ويتوسّط فيه — فينزل عن سطره الأول.
   ‎flex-start‎ يعيده إلى أعلى البند، و‎margin-top:.6em‎ القائم يوسّطه على سطره. */
.blk.pain ul li i,.note.blue ul li i{align-self:flex-start}
/* grids */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.grid.duo{align-items:stretch;gap:16px}
.grid.cmp{margin-top:0}
.adopt-grid{gap:24px;align-items:start}
@media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
/* ═══ بطاقة الشبكة ═══ بلاطة أيقونة ثم عنوان ثم وصف — بحدّ رفيع بلا ظلّ */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;transition:border-color .2s,transform .2s}
.card:hover{border-color:#C7D7FB;transform:translateY(-3px)}
.card .hdr{display:flex;align-items:flex-start;gap:12px}
.card .ci{width:40px;height:40px;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:400;flex-shrink:0;margin-top:2px}
.card h3{font-size:15.5px;font-weight:500;letter-spacing:-.01em;margin-bottom:6px}
.card p{color:var(--muted);font-size:13px;font-weight:300;line-height:1.85}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px}
/* «الصورة العامة» لم تعد صندوقًا داخل قسم: القسم نفسه هو الإطار */
.panel.ba{background:transparent;border:0;border-radius:0;padding:0}
/* ═══ منتقي الدور ═══ شبكة بطاقات رابطة */
.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.roles{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.roles{grid-template-columns:1fr}}
.role{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;font-weight:500;font-size:15px;color:var(--ink);line-height:1.7;transition:border-color .18s,transform .18s}
/* ⚠️ لا font-weight هنا: العنصر نفسه <i class="fas"> وأي وزن عليه يغلب قاعدة
   Font Awesome ‏.fas{font-weight:900} فيسقط المتصفّح إلى وجه Regular الذي لا
   يحوي هذه الرموز في النسخة المجّانية — فتُرسَم مربّعات فارغة. (CLAUDE.md) */
.role i{width:40px;height:40px;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;transition:background .18s,color .18s}
.role span small{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.8}
.role:hover{border-color:#C7D7FB;transform:translateY(-3px)}
.role:hover i{background:var(--blue);color:#fff}
/* ═══ بطاقة القطاع ═══ رأس (بلاطة + وسم) ← عنوان ← تمهيد ← عمودان ← مستندات ← بيان النتيجة */
.sector{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;margin-bottom:18px;scroll-margin-top:96px;transition:border-color .2s}
.sector:hover{border-color:#C7D7FB}
.sector .top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.sector .top .ci{width:40px;height:40px;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:400;flex-shrink:0}
/* الوسم صار على نصف قطر اللغة الواحد لا كبسولة */
.sector .kicker{font-size:12px;font-weight:500;color:var(--blue);background:var(--blue-50);border:1px solid #D6E2FB;border-radius:var(--r);padding:4px 10px;line-height:1.7}
.sector h3.st{font-size:21px;font-weight:500;color:var(--ink);margin:2px 0 8px;line-height:1.7;letter-spacing:-.01em}
.sector p.intro{color:var(--muted);font-size:14.5px;font-weight:300;line-height:1.9;margin-bottom:20px;max-width:78ch}
/* العمودان سطحان فرعيّان داخل البطاقة البيضاء: #FBFBFA لا var(--panel) (لغة التصميم §٣.٢) */
.blk{border-radius:var(--r);padding:18px 20px;border:1px solid var(--line);background:#fff;height:100%}
.blk.pain{background:#fff;border-color:var(--line)}
.blk.flow{background:#FBFBFA;border-color:#EFEFEC}
.blk h4{font-size:14.5px;font-weight:500;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:8px;line-height:1.7}
.blk h4 i{color:var(--blue);font-size:.85rem}
.blk.pain ul{list-style:none;display:grid;gap:10px;color:var(--muted);font-size:14px;font-weight:400;line-height:1.85}
.blk.pain ul li{display:flex;gap:9px}
/* كانت --faint (تباين 2.82): كل علامة يجب أن تُقرأ */
.blk.pain ul li i{color:var(--muted);font-size:.7rem;margin-top:.6em}
/* ═══ الخطوات المرقّمة ═══ مربّع أزرق 26px وخطّ رابط رفيع بين الخطوات */
.steps{display:grid;gap:14px;counter-reset:s}
.step{display:flex;gap:12px;position:relative}
.step:not(:last-child)::before{content:"";position:absolute;inset-inline-start:13px;top:32px;bottom:-14px;width:1px;background:var(--line)}
.step .n{width:26px;height:26px;border-radius:var(--r);background:var(--blue);color:#fff;font-weight:500;font-size:12.5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-variant-numeric:tabular-nums;position:relative;z-index:1}
.step p{color:var(--muted);font-size:13.5px;font-weight:300;line-height:1.85}
.step strong{display:block;color:var(--ink);font-weight:500;font-size:14.5px;line-height:1.7;margin-bottom:2px}
/* ═══ سطر المستندات ═══ فاصل مصمت: المتقطّع في اللغة يعني «موضع ينتظر ملأه» */
.docs-line{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.docs-line .lbl{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:11px;display:flex;align-items:center;gap:8px;line-height:1.7}
.docs-line .lbl i{color:var(--blue);font-size:.8rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:5px 11px;font-size:12.5px;font-weight:500;color:#3A3A38;line-height:1.8}
/* ⚠️ شريحة الرئيسية لا تحمل رمزًا مرسومًا: <i> فارغ يُرسم مربّعًا 11px (home-v4.css:111).
   هنا الوسم يحمل رسم Font Awesome صلبًا بوزن 900 على ٥٠ شريحة — يُبطَل الرسم ويبقى الوسم علامةً. */
.chip i{width:11px;height:11px;border-radius:3px;background:#EEF0F4;flex:none;margin-inline-end:6px;font-size:0;line-height:0;display:inline-block;vertical-align:middle}
/* محرف Font Awesome يُبطَل هنا لا في ذيل الملفّ: القاعدة كانت آخر سطر بعد قاعدة
   ‎font-family !important‎ فبدت يتيمة، ومكانها الطبيعي إلى جوار قاعدة الشريحة. */
.chip i::before{content:none}
/* ═══ بيان النتيجة ═══ جملة موقف واحدة بعلامة جانبية زرقاء — لا صندوق ملوّن */
.outcome{margin-top:18px;background:transparent;border:0;border-inline-start:2px solid var(--blue);border-radius:0;padding:2px 16px}
.outcome .lbl{font-weight:500;color:var(--ink);font-size:13px;margin-bottom:6px;display:flex;align-items:center;gap:8px;line-height:1.7}
.outcome .lbl i{color:var(--blue);font-size:.8rem}
.outcome p{color:var(--muted);font-size:15px;font-weight:300;line-height:1.9}
/* ═══ قائمة المقارنة ═══ الوضع قبل / الوضع بعد — كلا الرمزين مقروء */
.note{border-radius:var(--r);padding:18px 20px;border:1px solid;font-size:14.5px;font-weight:400;line-height:1.85}
/* ⚠️ العمودان متكافئان: كان «الوضع بعد» لوحًا أزرق ممتلئًا مقابل بطاقة بيضاء
   لـ«الوضع المعتاد قبل» — وهو عين ما نُزع عن صندوق «النتيجة» في بطاقات القطاع.
   السطحان الآن واحد، والفرق يحمله الرمز وحده: ✗ رمادي مقابل ✓ أخضر. */
.note.blue{background:#fff;border-color:var(--line);color:var(--muted)}
.note.blue b{color:var(--ink);font-weight:500}
.note.blue .lbl{font-weight:500;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:8px;font-size:14.5px;line-height:1.7}
.note.blue .lbl i{color:var(--blue);font-size:.85rem}
.note.blue ul{list-style:none;display:grid;gap:10px;font-size:14px;font-weight:400;line-height:1.85}
.note.blue ul li{display:flex;gap:9px}
.note.blue ul li i{color:#15803D;font-size:.72rem;margin-top:.6em}
/* الكهرماني لا رمز له في اللغة: الملاحظة المهنية صارت لوحًا محايدًا */
.note.amber{background:var(--panel);border-color:var(--line);color:var(--muted);margin-top:18px}
.note.amber b{color:var(--ink);font-weight:500}
.note-line{margin:18px auto 0;color:var(--muted);font-size:14px;font-weight:300;line-height:1.9;text-align:center;max-width:76ch}
/* ═══ جدول المستندات ═══ */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table.dt{width:100%;border-collapse:collapse;min-width:640px}
table.dt th,table.dt td{padding:14px 16px;text-align:start;font-size:14px;font-weight:400;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.85}
table.dt thead th{background:var(--panel);color:var(--ink);font-weight:500;font-size:13px;white-space:nowrap}
table.dt tbody tr:last-child td{border-bottom:none}
table.dt tbody tr:hover{background:#FBFBFA}
table.dt td.s{font-weight:500;color:var(--ink);white-space:nowrap}
table.dt td.s i{color:var(--blue);margin-inline-end:7px}
table.dt td.d{color:var(--muted)}
table.dt td.lk a{color:var(--blue);font-weight:500;font-size:13px;white-space:nowrap}
table.dt td.lk a:hover{text-decoration:underline}
/* ═══ الخطوات الستّ للتبنّي ═══ مسار رأسي بخطّ رابط */
.tl{position:relative;padding-inline-start:28px}
.tl:before{content:"";position:absolute;inset-inline-start:8px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl .it{position:relative;padding-bottom:22px}
.tl .it:before{content:"";position:absolute;inset-inline-start:-25px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 1px var(--line)}
/* الأخضر للمكتمل وحده؛ الكهرماني لا رمز له في اللغة فوُحّد إلى الأزرق (لون الفعل الواحد) */
.tl .it.g:before{background:var(--green)}.tl .it.a:before{background:var(--blue)}
.tl .it h3{font-size:16px;font-weight:500;margin-bottom:4px}
.tl .it p{color:var(--muted);font-size:14px;font-weight:300;line-height:1.9}
.tl .it .hint{display:inline-block;background:#FBFBFA;border:1px solid #EFEFEC;border-radius:var(--r);padding:8px 12px;font-size:13px;font-weight:400;color:var(--muted);margin-top:10px;border-inline-start:2px solid var(--blue);line-height:1.8}
/* كانت شريطًا كحليًّا بتدرّج: صارت القسم نفسه سطحًا بديلًا والبطاقات بيضاء */
.dark{background:transparent;border-radius:0;padding:0;color:var(--ink)}
.dark .hd h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.7;text-wrap:balance}
.dark .hd p{color:var(--muted);margin:16px auto 0;max-width:62ch;font-size:clamp(13.5px,1.05vw,15.5px);font-weight:300;line-height:1.9}
.dark .grid{gap:14px}
.dbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:border-color .2s}
.dbox:hover{border-color:#C7D7FB}
.dbox .ci{width:40px;height:40px;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:400}
.dbox i{color:var(--blue)} /* ⚠️ بلا font-weight — انظر التعليق عند .role i */
.dbox h3{color:var(--ink);font-size:15.5px;font-weight:500;margin:12px 0 5px;line-height:1.7;letter-spacing:-.01em}
.dbox p{color:var(--muted);font-size:13px;font-weight:300;line-height:1.85}
.dark .lnk{display:flex;align-items:center;justify-content:center;gap:7px;width:max-content;color:var(--blue);font-weight:500;font-size:13.5px;margin:34px auto 0;border-bottom:1px solid rgba(37,99,235,.3);padding-bottom:2px}
/* ═══ فريق التبنّي ═══ */
.panel.team{margin-bottom:18px}
.team-h{font-size:15.5px;font-weight:500;margin-bottom:14px;display:flex;align-items:center;gap:9px;line-height:1.7}
.team-h i{color:var(--blue);font-size:.9rem} /* ⚠️ بلا font-weight — انظر .role i */
.team-p{color:var(--muted);font-size:14px;font-weight:300;line-height:1.9;margin-top:14px}
/* ═══ الأسئلة ═══ */
.acc{display:grid;gap:12px}
.acc details{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.acc details[open]{border-color:#C7D7FB;box-shadow:0 20px 40px -32px rgba(37,99,235,.4)}
.acc summary{display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;font-weight:500;color:var(--ink);font-size:15px;line-height:1.7;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ic{width:30px;height:30px;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.8rem;font-weight:400}
.acc summary .ar{margin-inline-start:auto;color:var(--muted);transition:transform .25s,color .25s}
.acc details[open] summary .ar{transform:rotate(180deg);color:var(--blue)}
.acc .bd{padding:0 18px 18px;color:var(--muted);font-size:14px;font-weight:400;line-height:1.95}
.acc .bd p+p{margin-top:9px}
/* ═══ النداء الختامي ═══ القسم نفسه سطح بديل بعرض الشاشة بلا زاوية ولا صندوق */
/* الهامش السفلي (48px) كان يفصل النداء الختامي عن روابط الذيل داخل القسم نفسه؛
   وقد خرجت الروابط إلى قسمها الخاصّ فصار الفصل هو حشو القسمين (96px + 96px). */
.cta{background:transparent;border-radius:0;padding:0;text-align:center;color:var(--ink);margin:0}
/* رأس القسم الختامي صار حاوية .hd كبقيّة الأقسام (كان h2+p سائبين): الهامش
   السفلي يحمله ‎.cta p‎ وحده كما كان، فلا يتغيّر الإيقاع. */
.cta .hd{margin-bottom:0}
.cta h2{font-size:clamp(32px,4.2vw,54px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.7;margin-bottom:14px;text-wrap:balance}
.cta p{color:var(--muted);font-size:clamp(13.5px,1.05vw,15.5px);font-weight:300;line-height:1.9;margin-bottom:28px;max-width:62ch;margin-inline:auto}
.cta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta .b1{background:var(--blue);border:1px solid var(--blue);color:#fff;font-weight:500;font-size:14.5px;padding:12px 26px;border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;transition:background .16s,transform .15s}
.cta .b2{background:#fff;border:1px solid #C7D7FB;color:var(--blue);font-weight:500;font-size:14.5px;padding:12px 26px;border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;transition:background .16s,border-color .16s}
.cta .b1:hover{background:var(--blue-700);border-color:var(--blue-700);transform:translateY(-1px)}.cta .b2:hover{background:var(--blue-50);border-color:var(--blue)}
/* ═══ أفعال الهيرو وروابط الذيل ═══ */
.inl{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.inl a{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:9px 15px;font-size:13px;font-weight:500;color:var(--muted);transition:border-color .16s,color .16s,background .16s}
.inl a:hover{border-color:var(--blue);color:var(--blue)}
.hwh-hero .inl a{display:inline-flex;align-items:center;gap:8px;border-color:#C7D7FB;color:var(--blue);font-size:14.5px;padding:12px 22px}
.hwh-hero .inl a:hover{background:var(--blue-50);border-color:var(--blue)}
/* الفعل الأوّل ممتلئ كزرّ هيرو الرئيسية الأوّل، فيُقرأ ترتيب الأولوية من نظرة —
   وكان الثلاثة مخطَّطين بوزن بصري واحد. (بلا لمس الترميز: :first-child) */
.hwh-hero .inl a:first-child{background:var(--blue);border-color:var(--blue);color:#fff}
.hwh-hero .inl a:first-child:hover{background:var(--blue-700);border-color:var(--blue-700);color:#fff}
.hwh-hero .inl a i{font-size:.85rem} /* ⚠️ بلا font-weight — انظر .role i */
/* ═══ «تابع القراءة في مركز المعرفة» ═══ شبكة بطاقات روابط
   كانت جملة رمادية 13.5px ثم ثمانية روابط كبسولية بلا رأس قسم، وكانت تشارك
   النداء الختامي قسمه ولا يفصلهما إلا خطّ 0.8px. صارت قسمًا مستقلًّا برأس قسم
   (h2 هو نصّ الجملة نفسه) وشبكة بطاقات: بلاطة أيقونة خطّية 34px ← عنوان 500.
   الخطّ العلوي زال لأن الفصل صار بتناوب السطح وحشو القسم كما في الرئيسية.
   ⚠️ قاعدة ‎.foot-links p‎ القديمة أُزيلت لأن العنصر نفسه صار h2؛ لا نصّ تغيّر. */
.klinks{background:#fff}
.foot-links{border-top:0;padding:0;text-align:center}
.foot-links .hd{margin-bottom:36px}
.foot-links .inl{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:0}
.foot-links .inl a{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 15px;font-size:14px;font-weight:500;color:var(--ink);text-align:start;line-height:1.7;transition:border-color .18s,transform .18s}
.foot-links .inl a:hover{border-color:#C7D7FB;color:var(--ink);transform:translateY(-3px)}
.foot-links .kt{width:34px;height:34px;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.foot-links .kt .ico{width:17px;height:17px}
.foot-links .kx{font-weight:500;line-height:1.7}
.foot-links .inl a:hover .kt{background:var(--blue);color:#fff}
@media(max-width:900px){.foot-links .inl{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-links .inl{grid-template-columns:1fr}}
@media(max-width:900px){
  section{padding:64px 0}
  .wrap{padding:0 20px}
  .hwh-hero{padding:32px 0 56px}
  .hd{margin-bottom:36px}
  .sector{padding:22px}
}
@media(max-width:640px){
  /* الأفعال تنزل كاملة العرض على الهاتف بدل عرضين ثابتين يلتفّان */
  .cta .btns{flex-direction:column}
  .cta .b1,.cta .b2{width:100%}
  .hwh-hero .inl a{width:100%;justify-content:center}
}
html,body,button,input,select,textarea,h1,h2,h3,h4,h5,h6,p,a,li,label,span,div,td,th,strong,b,small,summary{font-family:'Alexandria','Segoe UI',Tahoma,Arial,sans-serif !important}