/* ═══════════════════════════════════════════════════════
 *  knowledge-center.css — أُستخرِج آليًا من pages/knowledge-center.php
 *  المقطع 1 من 1 · سطور 247–247 في الأصل.
 *  ⚠️ الترتيب بين المقاطع مقصود: بينها كتل <style> مشروطة
 *     باقية في الصفحة، والتتالي يعتمد على تسلسلها.
 *  ⚠️ نُقلت إلى لغة تصميم الرئيسية (٥ سبتمبر ٢٠٢٦): إعادة تلوين وإعادة
 *     طباعة في مكانها — لا إعادة بناء ولا تغيير نصّ ولا حذف عنصر.
 *     · كتلة :root المحلّية أُزيلت: كانت تُعيد تعريف --ink و--line و--green
 *       و--faint على :root فتنقض رموز wtq-v4-base.css للصفحة كلّها (ترويسة
 *       وتذييلًا). الرموز الآن من الأساس مباشرة.
 *     · لا كحلي (--navy) ولا بنفسجي (--blue2) ولا كهرماني (--amber) ولا تدرّج
 *       ولا زاوية ≥10px ولا ظلّ ثقيل. الأزرق للفعل والحالة، والأخضر للمتحقَّق.
 *     · الأوزان على سلّم CLAUDE.md: 800 لـh1/h2 فقط · 500 لـh3/h4/الزرّ/الرابط
 *       · 400 للمتن · 300 لسطر الشرح.
 *  ⚠️ إعادة بناء قوية (٦ سبتمبر ٢٠٢٦) — الجولة السابقة كانت إعادة تلوين،
 *     وهذه تعيد **البنية والإيقاع** إلى قالب الصفحة الرئيسية:
 *     · رأس قسم موحّد `.kc-hd` (780px · موسَّط · هامش سفلي 48px) لكل قسم،
 *       بترتيب eyebrow ← h2 ← lead — كان نصفها بمحاذاة البداية بلا كتلة رأس.
 *     · تناوب السطحين مضبوط تسعة أقسام بلا تكرار: الترويسة+الهيرو `--panel`
 *       ← الخريطة #fff ← المنصة `--panel` ← الثقة #fff ← الموارد `--panel`
 *       ← المسارات #fff ← الأسئلة `--panel` ← ابدأ #fff ← النداء `--panel`.
 *     · «الخريطة السريعة» صارت شبكة بطاقات ثلاثية (كانت بطاقة واحدة بصفوف
 *       داخلها وعنوانًا 18px محبوسًا فيها).
 *     · «ابدأ من هنا» صار قسمًا كامل العرض (كان لوحة `--panel` مدوَّرة داخل
 *       قسم أبيض — صندوق داخل صندوق لا تعرفه اللغة).
 *     · الكبسولات 999px صارت وسومًا بزاوية `var(--r)` كـ`.tg` في الرئيسية،
 *       والملاحظة صارت «بيانًا» بعلامة جانبية زرقاء 2px بلا أرضية ملوّنة.
 * ═══════════════════════════════════════════════════════ */
/* ═══ 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}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Alexandria",system-ui,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}
.kc a:focus-visible,.kc summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r)}
/* الفصل بين الأقسام بالفراغ وتناوب سطحين — لا حدّ مرسوم.
   التسلسل مقيس بلا تكرار: (ترويسة+هيرو) panel · الخريطة #fff · المنصة panel ·
   الثقة #fff · الموارد panel · المسارات #fff · الأسئلة panel · ابدأ #fff ·
   النداء الختامي panel. */
.kc section{padding:96px 0;background:#fff}
.kc-bc,.kc-hero{background:var(--panel)}
.kc #kc-platform,.kc #kc-resources,.kc #kc-faq{background:var(--panel)}
.kc h2,.kc h3,.kc h4{color:var(--ink)}
/* كتلة رأس القسم — نسخة `.sec .hd` في الرئيسية حرفًا بحرف */
.kc-hd{max-width:780px;margin:0 auto 48px;text-align:center}
.kc-hd>:last-child{margin-bottom:0}

/* ===== breadcrumb ===== */
.kc-bc{padding:22px 0 0;font-size:12.5px;color:var(--muted)}
.kc-bc ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kc-bc a{color:var(--muted);font-weight:500}.kc-bc a:hover{color:var(--blue)}
.kc-bc [aria-current]{color:var(--ink);font-weight:500}
.kc-bc i{font-size:10px;color:var(--faint)}

/* ===== hero ===== */
.kc-hero{position:relative;padding:44px 0 60px;text-align:center;overflow:hidden}
/* ⚠️ الهالتان زخرفيّتان (aria-hidden) وكانتا كتلتَي لون ضبابيّتين بأزرق بنفسجي
   وأخضر نعناعي — والزخرفة الملوّنة خارج اللغة. العنصران باقيان في الترميز
   (قاعدة المالك: لا حذف)، وبقيت لهما هندستهما بلا لون ولا حركة. */
.orb{position:absolute;border-radius:50%;z-index:0;pointer-events:none}
.orb.a{width:340px;height:340px;top:-140px;right:-60px}
.orb.b{width:280px;height:280px;bottom:-130px;left:-40px}
.kc-hero>.wrap{position:relative;z-index:1}
/* ⚠️ كانت كبسولة بيضاء بحدّ (999px) — والرئيسية لا تعرف كبسولة للـeyebrow:
   `.eyebrow` فيها سطر مسطّح 12.5px/500 بلون --muted تسبقه علامة زرقاء.
   أيقونة Font Awesome الموجودة سلفًا هي التي تلعب دور تلك العلامة — فلا
   عنصر يُخفى ولا نصّ يتغيّر. */
.ey{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;border-radius:0;color:var(--muted);font-weight:500;font-size:12.5px;margin-bottom:14px}
.ey i{color:var(--blue);font-size:12px}
.kc-hero h1{font-size:clamp(34px,4.7vw,60px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.28;margin-bottom:16px;text-wrap:balance}
/* السطر الثاني كتلة خافتة كـ`h1 .dim` في الرئيسية — كان يلتحم بالسطر الأول
   فيقع نصفه الخافت في وسط سطر داكن. */
.kc-hero h1 .g{display:block;color:var(--faint);font-weight:inherit;margin-top:.2em}
.kc-hero .lead{font-size:clamp(13.5px,1.05vw,15.5px);color:var(--muted);font-weight:300;line-height:1.9;max-width:62ch;margin:0 auto 24px}
.kc-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.kc-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;gap:8px;transition:background .16s,transform .15s}
.kc-b1:hover{background:var(--blue-700);border-color:var(--blue-700);color:#fff;transform:translateY(-1px)}
.kc-b2{background:#fff;color:var(--blue);font-weight:500;font-size:14.5px;padding:12px 26px;border-radius:var(--r);border:1px solid #C7D7FB;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .16s,border-color .16s,transform .15s}
.kc-b2:hover{border-color:var(--blue);background:var(--blue-50);color:var(--blue);transform:translateY(-1px)}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
/* وسم بزاوية var(--r) كـ`.tg` في الرئيسية — لا كبسولة 999px */
.chip{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:7px 13px;font-size:11.5px;font-weight:500;color:#3A3A38;display:inline-flex;align-items:center;gap:7px}
.chip i{color:var(--blue);font-size:12px}.chip.g i{color:var(--green)}

/* ===== خريطة سريعة (30 ثانية) ===== */
/* ⚠️ كانت بطاقة بيضاء واحدة تحبس عنوانًا 18px وثلاثة صفوف بفواصل — بنية لا
   وجود لها في الرئيسية. صارت: رأس قسم موسَّط (العنوان نفسه بحجم h2 القسم)
   ثم شبكة بطاقات ثلاثية، كل صفٍّ منها بطاقة `.v4-card`: بلاطة أيقونة 40px
   ← عنوان 500 ← وصف 300 ← سطر الفعل الأزرق. الحاوية نفسها حُيِّدت لا حُذفت. */
.kc-map{background:none;border:0;border-radius:0;padding:0}
.mrow{display:flex;flex-direction:column;align-items:stretch;height:100%;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;transition:border-color .25s,box-shadow .25s,transform .25s}
.mrow:hover{border-color:#C7D7FB;box-shadow:0 30px 60px -34px rgba(11,11,11,.28);transform:translateY(-3px)}
.mrow .mi{width:40px;height:40px;border-radius:var(--r);flex:none;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--blue-50);color:var(--blue);margin-bottom:14px}
.mrow .mt{flex:1 1 auto;min-width:0;display:block}
/* الترميز يستعمل b.mt-h وspan.mt-s — القاعدتان السابقتان كانتا على h3/p فما طبّقتا شيئًا */
.mrow .mt-h{display:block;font-size:16px;font-weight:500;color:var(--ink);letter-spacing:-.01em;line-height:1.7;margin-bottom:8px}
.mrow .mt-s{display:block;color:var(--muted);font-size:13px;font-weight:300;line-height:1.85}
.mrow .ma{margin-top:auto;padding-top:16px;color:var(--blue);font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;gap:6px;align-self:flex-start}
.mrow .ma i{font-size:11px;transition:transform .2s}
.mrow:hover .ma i{transform:translateX(-3px)}

/* ===== رؤوس الأقسام ===== */
.sec-ey{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--muted);letter-spacing:0;margin-bottom:14px}
.sec-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:none}
.sec-ey.c{display:flex;justify-content:center}
/* ⚠️ كان `display:flex` والبلاطة سطرًا واحدًا مع العنوان: العنوان الطويل
   («ثلاثون ثانية…») ينكسر ثلاثة أسطر فتقف البلاطة معلّقة في منتصفها.
   صارت بلاطةً موسَّطة فوق العنوان كما في `.ft-tile` بالرئيسية — تصلح
   للعنوان القصير والطويل معًا. */
.sec-h{font-size:clamp(28px,3.4vw,44px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.7;margin-bottom:12px;display:block;text-wrap:balance}
.sec-h.c{text-align:center}
/* بلاطة الأيقونة داخل h2 — الوزن يُعلَن صراحةً كي لا ترث 800 من العنوان */
.sec-h .ic{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:18px;font-weight:500;flex-shrink:0;margin:0 auto 16px}
/* الفراغ بين الرأس والمكوّن من `.kc-hd` وحدها (48px) — لا هامش سفلي هنا */
.sec-sub{color:var(--muted);margin:0;font-size:clamp(13.5px,1.05vw,15.5px);font-weight:300;line-height:1.9;max-width:62ch}
.sec-sub.c{margin-inline:auto;text-align:center}
.sec-sub a{color:var(--blue);font-weight:500}

/* ===== بطاقات المجموعات ===== */
.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)}
@media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.kc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;transition:border-color .25s,box-shadow .25s,transform .25s;display:flex;flex-direction:column;height:100%}
.kc-card:hover{border-color:#C7D7FB;box-shadow:0 30px 60px -34px rgba(11,11,11,.28);transform:translateY(-3px)}
.kc-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:18px;margin-bottom:14px}
.kc-card h3{font-size:16px;font-weight:500;color:var(--ink);letter-spacing:-.01em;line-height:1.7;margin-bottom:8px}
.kc-card p{color:var(--muted);font-size:13px;font-weight:300;line-height:1.85}
.kc-card .lrn{list-style:none;margin:14px 0 0;display:grid;gap:7px}
.kc-card .lrn li{position:relative;padding-inline-start:22px;font-size:12.5px;font-weight:400;line-height:1.8;color:#3A3A38}
/* #15803D لا --green: التباين 5.02 على الأبيض مقابل 3.30 — العلامة تُقرأ */
.kc-card .lrn li i{position:absolute;inset-inline-start:0;top:.45em;color:#15803D;font-size:11px}
.kc-card .fo{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.kc-card .tm{font-size:11.5px;font-weight:500;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:4px 10px}
.kc-card .go{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:500;font-size:12.5px}
.kc-card:hover .go i{transform:translateX(-3px)}
.kc-card .go i{transition:transform .2s;font-size:11px}

/* ===== مسارات التعلّم ===== */
.kc-paths{background:#fff}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:border-color .25s,box-shadow .25s}
.pcard:hover{border-color:#C7D7FB;box-shadow:0 30px 60px -34px rgba(11,11,11,.28)}
.pcard .ph{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pcard .ph .pi{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:17px;flex-shrink:0}
.pcard h3{font-size:16px;font-weight:500;color:var(--ink);line-height:1.7}
.pcard .why{color:var(--muted);font-size:13px;font-weight:300;line-height:1.85;margin:8px 0 16px}
.pcard ol{list-style:none;counter-reset:kcp;position:relative;padding-inline-start:30px}
/* خطّ رابط مقطّع بين الخطوات — الوصفة نفسها في `.jr-step::after` بالرئيسية */
.pcard ol:before{content:"";position:absolute;inset-inline-start:12px;top:14px;bottom:16px;width:0;border-inline-start:1.5px dashed #C9D3EA}
.pcard ol li{counter-increment:kcp;position:relative;padding-bottom:15px}
.pcard ol li:last-child{padding-bottom:0}
/* رقم الخطوة مربّع var(--r) كـ`.num` في الرئيسية — لا دائرة */
.pcard ol li:before{content:counter(kcp);position:absolute;inset-inline-start:-30px;top:0;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;font-variant-numeric:tabular-nums;box-shadow:0 0 0 4px #fff}
.pcard ol li a{font-weight:500;color:var(--ink);font-size:14px;display:inline-flex;align-items:center;gap:6px;line-height:1.7}
.pcard ol li a:hover{color:var(--blue)}
.pcard ol li a i{font-size:11px;color:var(--blue)}
.pcard ol li span{display:block;color:var(--muted);font-size:12.5px;font-weight:300;line-height:1.8}

/* ===== أسئلة ===== */
.acc{display:grid;gap:12px;max-width:840px;margin:0 auto}
.ai{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.ai[open]{border-color:#C7D7FB;box-shadow:0 20px 40px -32px rgba(37,99,235,.4)}
.ai summary{display:flex;align-items:center;gap:13px;padding:17px 19px;cursor:pointer;font-weight:500;color:var(--ink);font-size:15px;line-height:1.7;list-style:none}
.ai summary::-webkit-details-marker{display:none}
.ai 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:13px}
.ai summary .kc-ar{margin-inline-start:auto;color:var(--muted);transition:transform .25s,color .25s;flex-shrink:0;font-size:12px}
.ai[open] summary .kc-ar{transform:rotate(180deg);color:var(--blue)}
.ai .bin{padding:0 19px 19px 66px;color:var(--muted);font-size:13.5px;font-weight:300;line-height:1.95}
.ai .bin .al{display:inline-flex;align-items:center;gap:7px;margin-top:12px;color:var(--blue);font-weight:500;font-size:12.5px;background:var(--blue-50);border:1px solid #D6E2FB;border-radius:var(--r);padding:7px 15px;transition:border-color .2s,color .2s}
.ai .bin .al:hover{border-color:var(--blue);color:var(--blue-700)}
@media(max-width:640px){.ai .bin{padding-inline:19px}}

/* ===== ابدأ من هنا ===== */
/* ⚠️ كانت كتلة داكنة بتدرّج كحلي ونصّ أبيض — واللغة لا تعرف سطحًا داكنًا:
   صارت لوحة var(--panel) داخل قسم أبيض، وبطاقاتها بيضاء بحدّ رفيع. */
/* ⚠️ ثم أُلغي الصندوق نفسه (٦ سبتمبر ٢٠٢٦): لوحة مدوَّرة داخل قسم = صندوق
   في صندوق، والرئيسية تفصل بالسطح كامل العرض لا بلوحة. الحاوية باقية في
   الترميز وحُيِّدت هنا (بلا أرضية ولا زاوية ولا حشو)، والقسم نفسه أبيض
   يقع بين قسمَي `--panel` فيستقيم التناوب. */
.kc-start{background:none;color:var(--ink);border-radius:0;padding:0;position:relative;overflow:hidden;margin:0}
.kc-start>.in{position:relative;z-index:1}
.kc-start h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.7;margin-bottom:12px;text-wrap:balance}
.kc-start .st-sub{color:var(--muted);font-size:clamp(13.5px,1.05vw,15.5px);font-weight:300;line-height:1.9;max-width:62ch;margin:0 auto}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.stp{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:border-color .25s,box-shadow .25s,transform .25s;display:block}
.stp:hover{border-color:#C7D7FB;box-shadow:0 30px 60px -34px rgba(11,11,11,.28);transform:translateY(-3px)}
.stp .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;margin-bottom:12px;font-variant-numeric:tabular-nums}
.stp h3{color:var(--ink);font-size:15.5px;font-weight:500;line-height:1.7;margin-bottom:6px}
.stp p{color:var(--muted);font-size:12.5px;font-weight:300;line-height:1.8}
.stp .lk{display:inline-flex;align-items:center;gap:6px;margin-top:11px;color:var(--blue);font-weight:500;font-size:12.5px}
.stp .lk i{font-size:11px;transition:transform .2s}
.stp:hover .lk i{transform:translateX(-3px)}

/* ===== ملاحظة + النداء الختامي ===== */
/* ⚠️ الملاحظة كانت كهرمانية (#b45309 على #fff8ec) — ولا رمز للكهرماني في
   الأساس: وُحِّدت إلى الأزرق (اللون الدلالي الوحيد في اللغة). ولوحة محايدة
   بأيقونة زرقاء أضاعت كونها تحذيرًا، فصارت لوحة تنبيه صريحة: أرضية
   var(--blue-50) وشريط جانبي 3px بالأزرق يميّزها عمّا حولها من أسطح.
   رمز الكهرماني نفسه لا يزال قرار مالك (needsOwner). */
/* ⚠️ صارت «بيانًا» بمواصفة الكتالوج: بمحاذاة البداية، 15px/300، ارتفاع 1.9،
   وعلامة جانبية زرقاء 2px وحدها — بلا أرضية ملوّنة ولا صندوق. اللوحة الزرقاء
   السابقة كانت سطحًا ملوّنًا ثالثًا داخل قسم، واللغة لا تعرف إلا سطحين. */
.note{background:none;border:0;border-radius:0;border-inline-start:2px solid var(--blue);padding:2px 0 2px 0;padding-inline-start:20px;font-size:15px;font-weight:300;line-height:1.9;color:var(--ink);margin:44px auto 0;max-width:86ch}
.note.amber{color:var(--ink)}.note.amber b{color:var(--ink);font-weight:500}
.note i{color:var(--blue);margin-inline-end:7px}
.note a{color:var(--blue);font-weight:500;text-decoration:underline}
/* النداء الختامي: شريط var(--panel) بعرض الشاشة كاملًا بحشو 96px بلا زاوية —
   لا صندوق مدوَّر داخل قسم أبيض، كما في المعتمدة (.ccx .fin).
   ⚠️ الهوامش السالبة (-28px) كانت تُلغي حشو .wrap وحده فيبقى الشريط 1240px
      بحاشيتين بيضاوين فوق ذلك (قِيس: 1240 من 1905 عند 1920). الحلّ: حاوية
      الشريط وحدها — .kc>.wrap، وهي الحاوية الوحيدة الابنة المباشرة لـ.kc
      (باقي الحاويات داخل nav/header/section) — تُحلّ من عرضها الأقصى ومن
      حشوها، فيبلغ الشريط عرض الصفحة بالضبط. ولم نستعمل 100vw لأنها تشمل
      شريط التمرير فتتجاوز عرض الصفحة بـ15px. */
.kc>.wrap{max-width:none;padding:0}
.cta{background:var(--panel);border-radius:0;padding:96px 32px;text-align:center;color:var(--ink);margin:0}
/* سقف h2 في اللغة 44px — لا استثناء للنداء الختامي (كان 54px) */
.cta h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.7;margin-bottom:12px;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:0 auto;max-width:62ch}
.cta .kc-hd{margin-bottom:30px}
.cta .cb{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta .cb a{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;gap:8px;transition:background .16s,border-color .16s,transform .15s}
.cta .cb a:hover{background:var(--blue-700);border-color:var(--blue-700);transform:translateY(-1px)}
.cta .cb a.gh{background:#fff;color:var(--blue);border-color:#C7D7FB}
.cta .cb a.gh:hover{background:var(--blue-50);border-color:var(--blue);color:var(--blue)}
/* الهاتف: الأزرار كاملة العرض · الحشو يخفّ · نقطة الكسر 900 توازي الأساس */
@media(max-width:900px){
  .wrap{padding:0 20px}
  .kc section{padding:64px 0}
  .kc-hd{margin-bottom:36px}
  .kc-hero{padding:36px 0 44px}
  .cta{padding:64px 24px}
  /* هدف اللمس ≥40px لروابط خطوات المسارات (كانت 24px = 14px×1.7)، ورقم
     الخطوة يُخفض 7px ليبقى مركزه على مركز سطر الرابط بعد التوسيط. */
  .pcard ol li a{min-height:40px}
  .pcard ol li:before{top:7px}
}
@media(max-width:640px){
  .kc-btns>a,.cta .cb a{width:100%}
  .cta{padding:56px 20px}
}
@media(prefers-reduced-motion:reduce){
  .mrow,.kc-card,.pcard,.stp,.ai{transition:none}
  .mrow:hover,.kc-card:hover,.stp:hover{transform:none}
}
html,body,button,input,select,textarea,h1,h2,h3,h4,h5,h6,p,a,li,label,span,div,td,th,strong,b,small{font-family:"Alexandria",system-ui,sans-serif !important}