/* ═══════════════════════════════════════════════════════
 *  features-multi-signers.css — أُستخرِج آليًا من pages/features/multi-signers.php
 *  المقطع 1 من 1 · سطور 11–11 في الأصل.
 *  ⚠️ الترتيب بين المقاطع مقصود: بينها كتل <style> مشروطة
 *     باقية في الصفحة، والتتالي يعتمد على تسلسلها.
 *  ⚠️ نُقلت إلى لغة تصميم الرئيسية (٥ سبتمبر ٢٠٢٦): الرموز المحلّية صارت
 *     أسماءً بديلة لرموز wtq-v4-base.css (تبقى لأن حركات اللوحة تستعملها)،
 *     ولا كحلي ولا داكن ولا تدرّج ولا ظلّ إلا للوحة السير والمستند المحاكى.
 *  ⚠️ إعادة تصميم قويّة (٦ سبتمبر ٢٠٢٦): لم تعد إعادة تلوين — أُعيد بناء
 *     كل قسم على قالب الرئيسية: رأس قسم (نقطة زرقاء ← h2 بشطر خافت ← lead)
 *     ثم مكوّن واحد من الكتالوج (شبكة بطاقات · خطوات مرقّمة · نافذة محاكاة ·
 *     صفّ إحصاءات · بيان · نداء ختامي)، وأرضيّات متناوبة #fff/‏--panel بلا
 *     قسمين متتاليين بلون واحد، وبلا ظلّ على أي بطاقة ساكنة.
 *     لم يُحذف عنصر ولم يتغيّر حرف نصّ — ما لا يناسب اللغة حُيِّد بالقواعد.
 *  ⚠️ جولة تصحيح المراجعة (٦ سبتمبر ٢٠٢٦): أربعة بنود مقيسة أُغلقت —
 *     الشطر الخافت في رأس كل قسم صار سطرًا مستقلًّا (كان ينهار سطرًا واحدًا عند 768)،
 *     ولغة الأيقونات صارت SVG خطّيًّا كالرئيسية (٤١ حرف Font Awesome حُيِّد لا حُذف)،
 *     والبيان في «لماذا» صار نَفَسين لا جدارًا (٧ أسطر ⇐ ٥+٣ عند 390) وحجمه ثبت 16px،
 *     وشريط الأرقام دخل إيقاع 96/64 كبقيّة الأقسام.
 *  ⚠️ جولة تصحيح ثانية (٦ سبتمبر ٢٠٢٦) — أربعة بنود مقيسة:
 *     ١) لوحة سير التوقيع كانت تُقصّ عقدتها الرابعة بين 901 و1059px بحدّ اللوحة
 *        (العرض الأدنى للوحة صلب: 488px) — فالهيرو ينهار إلى عمود واحد عند 1100px.
 *     ٢) كسر الشطر الخافت صار مُعلَنًا رأسًا رأسًا بصنف `two` بعد قياس عرض كل رأس
 *        على سطر واحد مقابل مقاس الرئيسية 780px — لا قاعدة شاملة على كل الرؤوس.
 *     ٣) النداء الختامي دخل هذا القياس فبقي سطرًا واحدًا بشطر مضمَّن، وأخذ حجم
 *        نداء الرئيسية (‎4.2vw حتى 54px) بدل حجم رأس القسم العادي.
 *     ٤) كلمة «تلقائي» في شريط الأرقام كانت بلونين في صفّ واحد — حُيِّد لون
 *        النسخة الملفوفة كاملةً في <em> فبقي الأزرق على الرقم وحده كالرئيسية.
 * ═══════════════════════════════════════════════════════ */
.msx{--pb:var(--blue);--nv:var(--ink);--mut:var(--muted);--soft:var(--panel);--soft2:var(--blue-50);--greenbg:var(--green-50);color-scheme:light}
.msx{color:var(--ink);line-height:1.75;background:#fff;overflow-x:clip}
.msx .w{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.msx section{padding:96px 0}

/* ═══════════ رأس القسم — قالب الرئيسية: نقطة زرقاء ← h2 بشطر خافت ← lead ═══════════ */
.msx .whead{max-width:780px;margin:0 auto 48px;text-align:center}
.msx .whead.start{max-width:none;margin:0;text-align:start}
.msx .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:500;font-size:12.5px;margin:0 0 14px}
.msx .eyebrow::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}
/* الشطر الأزرق من العلامة — نفس أوليّة الرئيسية `.v4-eyebrow b` حرفًا بحرف:
   لون الشعار ووزن 500 (لا 700 الافتراضي لـ<b>، فالعلامة ليست عنوانًا). */
.msx .eyebrow b{color:var(--blue);font-weight:500}
/* أيقونة الترويسة محيَّدة لا محذوفة: رأس القسم في لغة الرئيسية نقطة زرقاء ونصّ لا أيقونة.
   الهامش السالب يلغي فجوة الشبكة الزائدة التي يتركها عنصر بلا محتوى (‎8px×2 ⇐ 8px). */
.msx .eyebrow i{width:0;overflow:hidden;margin-inline-start:-8px}
.msx .eyebrow i::before{content:none}
.msx h1{font-size:clamp(32px,4.2vw,48px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.28;margin:0 0 18px}
.msx h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.7;margin:0}
.msx .g{color:var(--faint);font-weight:inherit}
/* الشطر الخافت سطرٌ مستقلّ حيث البناء شطران — لا في كل رأس بلا تمييز.
   الرئيسية تقيس رأسها بـ780px، وتكسر ما يتجاوزه بـ<br> صريح، وتُبقي ما دونه سطرًا
   واحدًا بشطر خافت مضمَّن (٥ من ١٤ رأسًا: trust · dashboard · features · pricing · faq).
   والكسر هنا يُعلَن بصنف `two` على الرأس نفسه — رأسًا رأسًا لا بقاعدة شاملة.
   القياس عند 1240 لعرض الرأس على سطر واحد (عربي · إنجليزي) مقابل المقاس 780px:
   لماذا 919·1311 · كيف 994·1343 · التوازي 955·1249 (عموده 543px) ·
   متى 868·1171 · الدليل 866·1178 · الأسئلة 797·724 — كلٌّ منها يتجاوز المقاس
   في لغة على الأقل، فأخذ `two`. والنداء الختامي 716·745 دون المقاس وصندوقه
   بعرض الحاوية، فبقي سطرًا واحدًا بشطر مضمَّن كنداء الرئيسية الختامي. */
/* ⚠️ كسر السطر القسري رفع الرؤوس إلى ٣ و٤ أسطر (الرئيسية لا تتجاوز سطرين قطّ) — حُيِّد */
.msx h2.two .g{display:inline}
.msx .lead{font-size:clamp(13.5px,1.05vw,15.5px);color:var(--muted);font-weight:300;line-height:1.9;max-width:62ch}
.msx .whead .lead{margin:16px auto 0}
.msx .whead.start .lead{margin-inline:0}
.msx .cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);border:1px solid var(--blue);color:#fff;font-weight:500;font-size:14.5px;padding:12px 26px;border-radius:var(--r);text-decoration:none;transition:background .16s,transform .15s}
.msx .cta:hover{background:var(--blue-700);border-color:var(--blue-700);transform:translateY(-1px)}
.msx .cta2{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--blue);font-weight:500;font-size:14.5px;padding:12px 26px;text-decoration:none;border-radius:var(--r);border:1px solid #C7D7FB;transition:background .16s,border-color .16s}
.msx .cta2:hover{border-color:var(--blue);background:var(--blue-50)}
/* ═══════════ لغة الأيقونات — SVG خطّي كالرئيسية (stroke-width:1.8) ═══════════ */
/* الرئيسية تُرسم بـ.ico خطّي؛ وهذه الصفحة كانت تُرسم بحروف Font Awesome الصلبة (٤١ ظاهرة).
   لم يُحذف عنصر: كل <i> بقي في مكانه وصار حاوية للـSVG، وحرفه محيَّد بـcontent:none.
   فتبقى كل قواعد التموضع القائمة (.ic · .ci · .bdg · .ar …) عاملة كما هي. */
.msx .ico{width:15px;height:15px;display:inline-block;vertical-align:-.15em;flex:none}
.msx i.fas,.msx i.far,.msx i.fab{display:inline-flex;align-items:center;justify-content:center}
.msx i.fas::before,.msx i.far::before,.msx i.fab::before{content:none}
/* أيقونة الترويسة تبقى بلا SVG (محيَّدة أصلًا) — وهذا حارس لو أُضيف إليها يومًا */
.msx .eyebrow i > *{display:none}
/* المقاسات: بلاطة 40px ⇐ 19px كما .itile .ico في الرئيسية، وما دونها بالنسبة نفسها */
.msx .fcard .ic .ico,.msx .uc .ci .ico{width:19px;height:19px}
.msx .collab .ci i .ico,.msx .gti i .ico{width:15px;height:15px}
.msx .cta .ico,.msx .cta2 .ico{width:16px;height:16px}
.msx .trustline .ico,.msx .readout .r .ico{width:13px;height:13px}
.msx .legend span .ico{width:12px;height:12px}
.msx .msn .bdg .ico{width:11px;height:11px}
.msx .msn .av .ok .ico{width:11px;height:11px}
.msx .msn.done .av .ico{width:20px;height:20px}
.msx .step .ar .ico{width:12px;height:12px}
/* مؤشّر الطرف: جسم أبيض بحدّ ملوَّن — هكذا يُقرأ المؤشّر فوق مستند أبيض */
.msx .cur .ico{width:15px;height:15px;fill:#fff}

/* كشف تدريجي */
.msx .rv{opacity:0;transform:translateY(18px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.25,1)}
.msx .rv.in{opacity:1;transform:none}

/* ═══════════ الهيرو ═══════════ */
/* ⚠️ main.css تعطي .hero أرضية كحلية ونصًّا أبيض وتوسيطًا وتوهّجًا في ::before —
   تُعلَن القيم هنا صراحةً كما في الرئيسية (بلا أولوية قسرية). */
.msx .hero{position:relative;padding:56px 0 80px;background:#fff;color:var(--ink);text-align:start;overflow:visible}
.msx .hero::before{content:none}
/* توهّجان شعاعيان صُمّما لأرضية متدرّجة زالت — لا محتوى فيهما */
.msx .hero .aur{display:none}
/* minmax(0,…): قِيس عند 390 — عمود 1fr أخذ العرض الذاتي للوحة (440px) فصار 477px وفاض 108px خارج الحاوية */
.msx .hero .w{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:40px;align-items:center}
/* أعمدة الشبكة بحدّ أدنى صفر — الافتراضي auto يجعل العمود يأخذ العرض الذاتي لمحتواه فيفيض */
.msx .hero .hcol,.msx .hero .hvis,.msx .collab .ccol{min-width:0}
/* الشطر الخافت سطرٌ مستقلّ كما في h1 الرئيسية */
.msx .hero h1 .g{display:block}
.msx .hero .lead{margin:0 0 24px}
.msx .hero .btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* سطر الثقة = كبسولات محايدة بعلامة خضراء (وصفة .tg في الرئيسية) لا سطر أيقونات سائب */
.msx .trustline{display:flex;gap:8px;margin-top:26px;flex-wrap:wrap}
.msx .trustline span{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:#3A3A38;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.msx .trustline i{color:var(--green);font-size:11px}

/* ═══════════ لوحة سير التوقيع (المركز الأول) — الجسم المحاكى الوحيد في الهيرو: ظلّ .v4-win ═══════════ */
.msx .canvas{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 2px 6px rgba(11,11,11,.05),0 44px 84px -44px rgba(11,11,11,.45);padding:22px 18px 20px;overflow:hidden}
.msx .canvas .cbar{display:flex;align-items:center;gap:6px;margin-bottom:20px;padding:0 4px}
.msx .canvas .cbar i{width:9px;height:9px;border-radius:50%}
.msx .canvas .cbar i:nth-child(1){background:var(--line-2)}.msx .canvas .cbar i:nth-child(2){background:var(--line-2)}.msx .canvas .cbar i:nth-child(3){background:var(--line-2)}
.msx .canvas .cbar span{margin-inline-start:9px;font-size:10.5px;color:var(--faint);font-weight:400;letter-spacing:0}
.msx .canvas .cbar em{margin-inline-start:auto;font-style:normal;font-size:10.5px;font-weight:500;color:var(--blue);background:var(--blue-50);border:1px solid rgba(37,99,235,.22);border-radius:999px;padding:4px 11px;display:inline-flex;align-items:center;gap:6px}
.msx .canvas .cbar em b{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;animation:msLive 1.6s ease-in-out infinite}
@keyframes msLive{50%{opacity:.35}}
.msx .flow{display:flex;align-items:flex-start;justify-content:space-between;gap:0;padding:2px 2px 0}
/* عقدة موقّع */
/* 110px وحشو جانبي 6px: قِيس — شارة «Electronic» بالإنجليزية 91px (العربية 80px)، فالداخل 96px يسعها */
.msx .msn{position:relative;flex:0 0 110px;width:110px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:15px 6px 13px;text-align:center;z-index:2}
.msx .msn .av{width:50px;height:50px;border-radius:50%;margin:0 auto 9px;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:16px;background:var(--blue-50);color:var(--blue);position:relative}
.msx .msn .av .ok{position:absolute;bottom:-3px;left:-3px;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;border:2px solid #fff;opacity:0}
/* الاسم والدور كتلتان: كانا span مضمَّنين فالتصق «أحمد ع.» بـ«الطرف الأول» ولم يعمل هامش الدور */
.msx .msn .nm{display:block;font-size:12px;font-weight:500;color:var(--ink);line-height:1.5}
.msx .msn .rl{display:block;font-size:10.5px;color:var(--muted);font-weight:400;line-height:1.5;margin-bottom:9px}
.msx .msn .bdg{display:inline-flex;align-items:center;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px 4px;font-size:10px;font-weight:500;color:var(--ink)}
.msx .msn .bdg i{color:var(--blue);font-size:10px}
.msx .dots{display:inline-flex;gap:2px;align-items:center}
.msx .dots b{width:5px;height:5px;border-radius:50%;background:var(--line);display:inline-block}
.msx .dots b.f{background:var(--blue)}
/* عقدة الاكتمال */
.msx .msn.done{background:#fff;opacity:.6}
.msx .msn.done .av{background:var(--panel);color:var(--faint)}
/* الموصّلات */
.msx .msc{flex:1 1 auto;min-width:16px;height:3px;background:var(--line);position:relative;border-radius:3px;margin-top:41px;z-index:1}
.msx .msc i.fill{position:absolute;top:0;right:0;height:100%;width:0;background:var(--blue);border-radius:3px}
.msx .msc .pulse{position:absolute;top:50%;right:-3px;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.18);opacity:0}
/* دليل القوى + قراءة الزمن */
.msx .legend{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:20px;padding-top:16px;border-top:1px dashed var(--line-2)}
.msx .legend span{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:500;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.msx .legend span i{color:var(--blue);font-size:10.5px}
.msx .readout{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;opacity:0}
.msx .readout .r{display:inline-flex;align-items:center;gap:7px;background:var(--green-50);border:1px solid #CDEBD6;border-radius:var(--r);padding:7px 13px;font-size:11px;font-weight:500;color:#15803D}
.msx .readout .r i{color:var(--green)}
.msx .readout .r.b{background:var(--blue-50);border-color:rgba(37,99,235,.22);color:var(--blue)}
.msx .readout .r.b i{color:var(--blue)}
/* تشغيل حركات اللوحة */
.msx .flow.play .msn.n1{animation:msSign1 13s linear infinite}
.msx .flow.play .msn.n1 .av{animation:msAv1 13s linear infinite}
.msx .flow.play .msn.n1 .ok{animation:msOk1 13s linear infinite}
.msx .flow.play .msn.n2{animation:msSign2 13s linear infinite}
.msx .flow.play .msn.n2 .av{animation:msAv2 13s linear infinite}
.msx .flow.play .msn.n2 .ok{animation:msOk2 13s linear infinite}
.msx .flow.play .msn.n3{animation:msSign3 13s linear infinite}
.msx .flow.play .msn.n3 .av{animation:msAv3 13s linear infinite}
.msx .flow.play .msn.n3 .ok{animation:msOk3 13s linear infinite}
.msx .flow.play .msn.done{animation:msDone 13s linear infinite}
.msx .flow.play .msn.done .av{animation:msDoneAv 13s linear infinite}
.msx .flow.play .msc.k1 .fill{animation:msFill1 13s linear infinite}
.msx .flow.play .msc.k1 .pulse{animation:msPulse1 13s linear infinite}
.msx .flow.play .msc.k2 .fill{animation:msFill2 13s linear infinite}
.msx .flow.play .msc.k2 .pulse{animation:msPulse2 13s linear infinite}
.msx .flow.play .msc.k3 .fill{animation:msFill3 13s linear infinite}
.msx .flow.play .msc.k3 .pulse{animation:msPulse3 13s linear infinite}
.msx .canvas.play .readout{animation:msReadout 13s linear infinite}
/* ظلّ الحالة: حلقة زرقاء + ظلّ طويل بانتشار سالب (وصفة الاختيار في اللغة)، والأخضر للمكتمل */
@keyframes msSign1{0%,3%{border-color:var(--line);box-shadow:none}4%,12%{border-color:var(--pb);box-shadow:0 0 0 3px rgba(37,99,235,.12),0 20px 40px -30px rgba(37,99,235,.55);transform:translateY(-5px)}14%,96%{border-color:var(--green);box-shadow:0 20px 40px -30px rgba(22,163,74,.45);transform:none}100%{border-color:var(--line);box-shadow:none;transform:none}}
@keyframes msSign2{0%,19%{border-color:var(--line);box-shadow:none}20%,30%{border-color:var(--pb);box-shadow:0 0 0 3px rgba(37,99,235,.12),0 20px 40px -30px rgba(37,99,235,.55);transform:translateY(-5px)}32%,96%{border-color:var(--green);box-shadow:0 20px 40px -30px rgba(22,163,74,.45);transform:none}100%{border-color:var(--line);box-shadow:none;transform:none}}
@keyframes msSign3{0%,37%{border-color:var(--line);box-shadow:none}38%,48%{border-color:var(--pb);box-shadow:0 0 0 3px rgba(37,99,235,.12),0 20px 40px -30px rgba(37,99,235,.55);transform:translateY(-5px)}50%,96%{border-color:var(--green);box-shadow:0 20px 40px -30px rgba(22,163,74,.45);transform:none}100%{border-color:var(--line);box-shadow:none;transform:none}}
@keyframes msAv1{0%,13%{background:var(--soft2);color:var(--pb)}14%,96%{background:var(--greenbg);color:var(--green)}100%{background:var(--soft2);color:var(--pb)}}
@keyframes msAv2{0%,31%{background:var(--soft2);color:var(--pb)}32%,96%{background:var(--greenbg);color:var(--green)}100%{background:var(--soft2);color:var(--pb)}}
@keyframes msAv3{0%,49%{background:var(--soft2);color:var(--pb)}50%,96%{background:var(--greenbg);color:var(--green)}100%{background:var(--soft2);color:var(--pb)}}
@keyframes msOk1{0%,13%{opacity:0;transform:scale(.3)}14%{opacity:1;transform:scale(1.3)}17%,96%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.3)}}
@keyframes msOk2{0%,31%{opacity:0;transform:scale(.3)}32%{opacity:1;transform:scale(1.3)}35%,96%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.3)}}
@keyframes msOk3{0%,49%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.3)}53%,96%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.3)}}
@keyframes msFill1{0%,14%{width:0}20%,96%{width:100%}100%{width:0}}
@keyframes msFill2{0%,32%{width:0}38%,96%{width:100%}100%{width:0}}
@keyframes msFill3{0%,50%{width:0}56%,96%{width:100%}100%{width:0}}
@keyframes msPulse1{0%,14%{right:-3px;opacity:0}15.5%{opacity:1}18%{opacity:1}20%,100%{right:100%;opacity:0}}
@keyframes msPulse2{0%,32%{right:-3px;opacity:0}33.5%{opacity:1}36%{opacity:1}38%,100%{right:100%;opacity:0}}
@keyframes msPulse3{0%,50%{right:-3px;opacity:0}51.5%{opacity:1}54%{opacity:1}56%,100%{right:100%;opacity:0}}
@keyframes msDone{0%,56%{border-color:var(--line);opacity:.55;transform:none}58%{border-color:var(--green);opacity:1;transform:scale(1.09);box-shadow:0 0 0 4px rgba(22,163,74,.12),0 20px 40px -30px rgba(22,163,74,.45)}63%,96%{border-color:var(--green);opacity:1;transform:scale(1);box-shadow:0 20px 40px -30px rgba(22,163,74,.45)}100%{border-color:var(--line);opacity:.55;transform:none;box-shadow:none}}
@keyframes msDoneAv{0%,56%{background:var(--soft);color:var(--faint)}58%,96%{background:var(--greenbg);color:var(--green)}100%{background:var(--soft);color:var(--faint)}}
@keyframes msReadout{0%,58%{opacity:0;transform:translateY(8px)}65%,96%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8px)}}

/* ═══════════ صفّ الإحصاءات — سطح بديل بلا حدود (الفصل بتناوب السطح لا بالحدّ) ═══════════ */
.msx .nums{background:var(--panel)}
/* حشو 96px كبقيّة الأقسام: الشريط <div> لا <section> فلا تصله .msx section{padding:96px 0} —
   كان 40px فكان البند الوحيد الخارج عن إيقاع الصفحة (مقيس على 1240). */
.msx .nums > .w{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center;padding-top:96px;padding-bottom:96px}
/* الرقم يميّزه الحجم لا الوزن */
.msx .num b{display:block;font-size:30px;font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1.3;margin-bottom:6px;font-variant-numeric:tabular-nums}
.msx .num b em{font-style:normal;color:var(--blue)}
/* الأزرق في صفّ الإحصاءات لمسةٌ على الرقم أو الوحدة لا على الكلمة — وصفة الرئيسية
   نفسها (`.st3 b span` وحدةٌ زرقاء بجانب رقم بالحبر). وكانت كلمة «تلقائي» تظهر
   مرّتين في الصفّ الواحد بلونين: البند الثاني بالحبر والرابع أزرق كاملًا لأنه ملفوف
   في <em>. فحُيِّد لون النسخة الملفوفة كاملةً (الصنف `w` = كلمة) ولم يُحذف الوسم. */
.msx .num b em.w{color:inherit}
.msx .num span{display:block;max-width:26ch;margin:0 auto;font-size:12.5px;color:var(--muted);font-weight:400;line-height:1.7}

/* ═══════════ لماذا التوقيع المتعدد — رأس قسم ← بيان ← شبكة بطاقات ═══════════ */
.msx .why{background:#fff}
.msx .why .whead{margin-bottom:28px}
/* «بيان»: فقرة كانت موسَّطة بلا بناء — صارت كتلة موقف بمحاذاة البداية وعلامة زرقاء جانبية.
   والكلمات المميَّزة داخلها حُيِّد لونها (لا تلوين كلمات متفرّقة داخل فقرة) وبقي وزنها 500. */
.msx .why .wpara{max-width:820px;margin:0 auto 48px;text-align:start;font-size:16px;color:var(--muted);font-weight:300;line-height:1.9;border-inline-start:2px solid var(--blue);padding-inline-start:20px}
.msx .why .wpara b{color:inherit;font-weight:500}
/* البيان على نَفَسين لا جدارًا متّصلًا: الشطر الأول تشخيص، والثاني (المبتدئ بالكلمات المميَّزة)
   هو الحلّ. قِيس: كانت ٧ أسطر متّصلة عند 390؛ صارت كتلتين بينهما فسحة.
   لا كلمة تغيّرت — البناء بلفّ الشطرين في span وجعلهما كتلتين. */
.msx .why .wpara .wp{display:block}
.msx .why .wpara .wp + .wp{margin-top:14px}
.msx .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* البطاقة: حدّ رفيع بلا ظلّ — الظلّ إشارة إلى جسم أو حالة، لا زينة لكل بطاقة */
.msx .fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;transition:border-color .25s}
.msx .fcard:hover{border-color:#C7D7FB}
.msx .fcard .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:15px;margin-bottom:14px}
.msx .fcard h3{font-size:15.5px;font-weight:500;color:var(--ink);margin:0 0 8px;line-height:1.7;letter-spacing:-.01em}
.msx .fcard p{font-size:13px;color:var(--muted);font-weight:300;margin:0;line-height:1.85}

/* ═══════════ كيف تعمل — خطوات مرقّمة ═══════════ */
.msx .how{background:var(--panel)}
.msx .how .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* الخطوة: مربّع الرقم ثم العنوان في صفّ واحد، والوصف تحتهما — كخطوة الرحلة في الرئيسية */
.msx .step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 18px;transition:border-color .25s;display:grid;grid-template-columns:26px 1fr;gap:0 12px;align-items:center}
.msx .step:hover{border-color:#C7D7FB}
.msx .step .sn{grid-column:1;grid-row:1;width:26px;height:26px;border-radius:var(--r);background:var(--blue);color:#fff;font-weight:500;font-size:12.5px;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.msx .step h3{grid-column:2;grid-row:1;font-size:15px;font-weight:500;color:var(--ink);margin:0;line-height:1.7}
.msx .step p{grid-column:1/-1;grid-row:2;font-size:12.5px;color:var(--muted);font-weight:300;margin:12px 0 0;line-height:1.85}
/* عقدة الربط بين خطوتين: قِيس — الفجوة 18px ومركزها ‎-9px، والعقدة 24px فتبدأ عند ‎-21px،
   ورأسيًّا مركزها مركز مربّع الرقم (حشو 20 + نصف 26 = 33 ناقص نصف 24 = 21).
   منطقية الاتجاه (inset-inline-start) فتقع بين الخطوة وسابقتها في العربية والإنجليزية معًا. */
.msx .step .ar{position:absolute;top:21px;inset-inline-start:-21px;width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:10px;z-index:3}

/* ═══════════ العمل بالتوازي — قسم مقسوم: رأس بمحاذاة البداية + مشهد ═══════════ */
/* (كان قسمًا داكنًا؛ الداكن «شيء» يُعرض على الورقة لا «مكان») */
.msx .collabsec{background:#fff}
.msx .collab{background:#fff;border-radius:0;margin:0;color:var(--ink);position:relative;overflow:visible}
.msx .collab::before{content:none}
.msx .collab .w{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:40px;align-items:center}
.msx .collab h2{color:var(--ink)}
.msx .collab .lead{color:var(--muted)}
/* بنود المشاركة صفوف بطاقات بحدّ رفيع لا سطور أيقونات سائبة */
.msx .collab .clist{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.msx .collab .ci{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:400;color:var(--ink);line-height:1.75;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;transition:border-color .25s}
.msx .collab .ci:hover{border-color:#C7D7FB}
.msx .collab .ci i{width:30px;height:30px;flex:0 0 auto;border-radius:var(--r);background:var(--blue-50);display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:12px}
/* المستند المحاكى — ظلّ .v4-win */
.msx .cdoc{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 2px 6px rgba(11,11,11,.05),0 44px 84px -44px rgba(11,11,11,.45);padding:24px 26px 26px;overflow:hidden;min-height:296px}
.msx .cdoc .dt{font-size:13px;font-weight:500;color:var(--ink);border-inline-start:3px solid var(--blue);padding-inline-start:9px;margin-bottom:16px}
.msx .cdoc .ln{height:8px;border-radius:3px;background:#ECECE9;margin-bottom:12px}
.msx .cdoc .ln.s{width:58%}.msx .cdoc .ln.m{width:82%}
.msx .cdoc .sigrow{display:flex;gap:12px;margin-top:20px}
.msx .cdoc .sigbox{flex:1;border:1px dashed var(--line-2);border-radius:var(--r);height:60px;display:flex;align-items:center;justify-content:center;font-size:10.5px;color:var(--muted);font-weight:400;text-align:center;padding:0 6px}
.msx .cur{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;pointer-events:none;z-index:6;will-change:transform}
.msx .cur i{font-size:16px;filter:drop-shadow(0 2px 3px rgba(11,11,11,.25))}
.msx .cur b{font-size:10px;font-weight:500;color:#fff;border-radius:0 var(--r) var(--r) var(--r);padding:2px 8px;white-space:nowrap}
/* ثلاثة أطراف بثلاثة ألوان من الرموز: الأزرق · الحبر · الرمادي (لا فيروزي ولا أخضر لغير المكتمل) */
.msx .cur.c1{animation:msCur1 9.5s ease-in-out infinite}.msx .cur.c1 i{color:var(--blue)}.msx .cur.c1 b{background:var(--blue)}
.msx .cur.c2{animation:msCur2 11s ease-in-out infinite}.msx .cur.c2 i{color:var(--ink)}.msx .cur.c2 b{background:var(--ink)}
.msx .cur.c3{animation:msCur3 10.2s ease-in-out infinite}.msx .cur.c3 i{color:var(--muted)}.msx .cur.c3 b{background:var(--muted)}
@keyframes msCur1{0%{transform:translate(52px,42px)}22%{transform:translate(250px,66px)}46%{transform:translate(150px,150px)}70%{transform:translate(320px,116px)}100%{transform:translate(52px,42px)}}
@keyframes msCur2{0%{transform:translate(300px,150px)}25%{transform:translate(120px,120px)}52%{transform:translate(280px,60px)}78%{transform:translate(70px,190px)}100%{transform:translate(300px,150px)}}
@keyframes msCur3{0%{transform:translate(180px,200px)}28%{transform:translate(330px,170px)}55%{transform:translate(90px,80px)}82%{transform:translate(240px,210px)}100%{transform:translate(180px,200px)}}

/* ═══════════ متى تستخدمه — شبكة بطاقات ═══════════ */
.msx .use{background:var(--panel)}
.msx .use .cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.msx .uc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px 20px;transition:border-color .25s}
.msx .uc:hover{border-color:#C7D7FB}
.msx .uc .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:15px;margin-bottom:14px}
.msx .uc h3{font-size:15.5px;font-weight:500;color:var(--ink);margin:0 0 8px;line-height:1.7;letter-spacing:-.01em}
.msx .uc p{font-size:13px;color:var(--muted);font-weight:300;margin:0;line-height:1.85}

/* ═══════════ الدليل (تبويبات جانبية) ═══════════ */
.msx .guide{background:#fff}
.msx .guide .gw{max-width:1000px}
.msx .ggrid{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}
.msx .gtoc{display:flex;flex-direction:column;gap:8px;position:sticky;top:100px}
.msx .gti{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;cursor:pointer;transition:border-color .25s,color .25s;font-weight:500;font-size:13.5px;color:var(--muted);line-height:1.7}
.msx .gti i{width:30px;height:30px;flex:0 0 auto;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:12px;transition:.3s}
/* الاختيار أزرق حدًّا وظلًّا (وصفة الاختيار في اللغة)، والمرور حدّ أزرق خافت */
.msx .gti:hover{border-color:#C7D7FB;color:var(--ink)}
.msx .gti.on{border-color:var(--blue);color:var(--ink);box-shadow:0 20px 40px -30px rgba(37,99,235,.55)}
.msx .gti.on i{background:var(--blue);color:#fff}
.msx .gpanel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 30px;min-height:280px}
.msx .gpc{display:none;animation:msGin .45s cubic-bezier(.2,.8,.2,1)}
.msx .gpc.on{display:block}
@keyframes msGin{from{opacity:0;transform:translateY(12px)}}
.msx .gpc h3{font-size:19px;font-weight:500;color:var(--ink);margin:0 0 12px;letter-spacing:-.02em;line-height:1.7}
.msx .gpc p{font-size:14px;color:var(--muted);font-weight:300;line-height:1.95;margin:0}
.msx .gpc .kw{display:flex;gap:7px;flex-wrap:wrap;margin-top:20px}
/* 12px هو الحدّ الأدنى لنصّ عربي خارج النوافذ المحاكاة (مقيس) */
.msx .gpc .kw span{font-size:12px;font-weight:500;color:var(--blue);background:var(--blue-50);border:1px solid #D6E2FB;border-radius:var(--r);padding:4px 10px}

/* ═══════════ الأسئلة الشائعة — سطح بديل للتناوب ═══════════ */
.msx .faqsec{background:var(--panel)}
.msx .faq{max-width:840px;margin:0 auto}
.msx .qa{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:10px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.msx .qa .qh{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;font-weight:500;font-size:15px;color:var(--ink);line-height:1.7}
.msx .qa .qh .x{width:28px;height:28px;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:13px;transition:.3s;flex:0 0 auto}
.msx .qa .qb{max-height:0;overflow:hidden;transition:max-height .4s ease;padding:0 18px}
.msx .qa .qb p{font-size:13.5px;color:var(--muted);font-weight:300;line-height:1.95;margin:0 0 18px}
.msx .qa.open{border-color:#C7D7FB;box-shadow:0 20px 40px -32px rgba(37,99,235,.4)}
.msx .qa.open .qh .x{transform:rotate(45deg);background:var(--blue);color:#fff}
.msx .qa.open .qb{max-height:320px}

/* ═══════════ النداء الختامي — سطح أبيض بعرض الشاشة بلا صندوق داخلي ═══════════ */
.msx .fin{position:relative;text-align:center;background:#fff;padding:96px 0}
/* حجم نداء الرئيسية الختامي: `.cta-final h2{font-size:clamp(32px,4.2vw,54px)}` — 52px عند 1240
   مقابل 42px لرأس قسم عادي. والحدّ الأدنى يبقى 28px لا 32px: قِيس عند 390 أن 32px
   تدفع الشطر الأول (344px إنجليزيًّا) خارج الحاوية 350px فيصير الرأس ثلاثة أسطر. */
.msx .fin h2{font-size:clamp(28px,4.2vw,54px);margin:0 0 14px}
.msx .fin .lead{margin:0 auto 30px;max-width:58ch}

@media(max-width:1100px){
  /* لوحة سير التوقيع لها عرض أدنى صلب لا ينضغط: أربع عقد ‎110px + ثلاثة موصّلات ‎16px
     = ‎488px داخل اللوحة، والعقدة لا تصغر لأن شارة «Electronic» الإنجليزية ‎91px
     وداخل العقدة ‎98px فقط. وعمود اللوحة في هيرو من عمودين لا يبلغ ذلك إلا فوق
     ‎1075px تقريبًا — قِيس عند 1024: عرض ‎.flow الداخلي ‎462px مقابل ‎490px مطلوبة،
     فتُقصّ العقدة الرابعة ‎10px بحدّ ‎.canvas{overflow:hidden}. فينهار الهيرو إلى
     عمود واحد عند ‎1100px (مقاس الرئيسية نفسه: ‎ds-body · fx · pr) فتأخذ اللوحة
     عرض الحاوية كاملًا ولا تُقصّ عقدة في أي عرض. */
  .msx .hero .w{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:1000px){
  .msx .ggrid{grid-template-columns:260px 1fr}
}
@media(max-width:900px){
  .msx section{padding:64px 0}
  .msx .nums > .w{padding-top:64px;padding-bottom:64px}
  .msx .w{padding:0 20px}
  .msx .hero{padding:40px 0 64px}
  .msx .fin{padding:64px 0}
  .msx .whead{margin-bottom:36px}
  .msx .hero .w,.msx .collab .w{grid-template-columns:minmax(0,1fr);gap:40px}
  .msx .nums .w,.msx .grid3,.msx .how .grid4,.msx .use .cgrid{grid-template-columns:1fr 1fr}
  .msx .step .ar{display:none}
  .msx .collab{border-radius:0;margin:0}
}
@media(max-width:640px){
  .msx .nums > .w{grid-template-columns:1fr 1fr}
  .msx .grid3,.msx .use .cgrid{grid-template-columns:1fr}
  .msx .how .grid4{grid-template-columns:1fr}
  .msx .ggrid{grid-template-columns:minmax(0,1fr)}
  .msx .gtoc{position:static;flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .msx .gti{white-space:nowrap}
  .msx .flow{overflow-x:auto;justify-content:flex-start}
  /* 106px لا 96: الشارة الإنجليزية 91px والداخل 92px — أقلّ منه تفيض عن العقدة (قِيس) */
  .msx .msn{flex:0 0 106px;width:106px}
  /* الزرّان يأخذان العرض كاملًا على الهاتف بدل أن يتزاحما */
  .msx .hero .btns > a{flex:1;min-width:200px}
  /* دون هذا العرض لا يتّسع أي رأس لسطر واحد بأي لغة — فيصير الكسر مبنيًّا في كل
     الرؤوس (ومنها النداء الختامي) بدل انكسار عشوائي في منتصف الجملة */
  .msx h2 .g{display:block}
  /* الحجم يبقى 16px: «البيان» في الكتالوج 16–19px، وهبوطه إلى 15px كان يخرجه من الوصفة */
  .msx .why .wpara{padding-inline-start:16px}
  .msx .gpanel{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){
  .msx .rv{opacity:1;transform:none;transition:none}
  .msx .canvas .cbar em b{animation:none}
}