/* ═══════════════════════════════════════════════════════
 *  features-custom-contracts.css — أُستخرِج آليًا من pages/features/custom-contracts.php
 *  المقطع 1 من 1 · سطور 11–11 في الأصل.
 *  ⚠️ الترتيب بين المقاطع مقصود: بينها كتل <style> مشروطة
 *     باقية في الصفحة، والتتالي يعتمد على تسلسلها.
 *  ⚠️ نُقلت إلى لغة تصميم الرئيسية (٥ سبتمبر ٢٠٢٦): الرموز المحلّية صارت
 *     أسماءً بديلة لرموز wtq-v4-base.css (تبقى لأن الصفحة تستعملها في سمات
 *     style مضمَّنة)، ولا كحلي ولا بنفسجي ولا تدرّج ولا ظلّ إلا لنافذة المحرّر.
 * ═══════════════════════════════════════════════════════ */
.ccx{--pb:var(--blue);--nv:var(--ink);--mut:var(--muted);--soft:var(--panel);--soft2:var(--blue-50);--viobg:var(--blue-50);--ok:var(--green);color-scheme:light}
.ccx{color:var(--ink);line-height:1.75;background:#fff;overflow-x:clip}
.ccx .w{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.ccx section{padding:96px 0}
.ccx .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:500;font-size:12.5px;margin:0 0 14px}
/* ⚠️ العلامة في قسم السلاش تحمل لونًا مضمَّنًا (#93C5FD) صُمّم لأرضية داكنة زالت؛
   -webkit-text-fill-color يعلو على color المضمَّن بلا أولوية قسرية. */
.ccx .eyebrow{-webkit-text-fill-color:var(--muted)}
.ccx .eyebrow i{color:var(--blue);-webkit-text-fill-color:var(--blue);font-size:12px}
/* ⚠️ ٦ سبتمبر ٢٠٢٦ — أيقونة Font Awesome في العلامة تُحيَّد لا تُحذف من الترميز:
   علامة القسم في الرئيسية هي «نقطة زرقاء + نصّ» بلا أيقونة إطلاقًا في مواضعها الأربعة عشر
   (قِيس: صفر <i> في أي eyebrow هناك)، وهذه الصفحة كانت تضيف أيقونة في مواضعها الأربعة
   فبدت طرازًا ثانيًا لأكثر عناصر اللغة تكرارًا. النصف الثاني الأزرق (<b>) يحتاج تقسيم
   نصّ العلامة إلى جزأين وهو قرار نصّ للمالك — مذكور في needsOwner. */
.ccx .eyebrow i{display:none}
/* ⚠️ ١٠ سبتمبر ٢٠٢٦ — النصف الثاني الأزرق من العلامة، وهو ما كان مؤجَّلًا أعلاه
   بانتظار قرار نصّ من المالك (اعتُمد). القاعدة منقولة كما هي من الأساس المشترك
   (wtq-v4-base.css: .v4-eyebrow b) مع إضافة -webkit-text-fill-color وحدها،
   لأن .ccx .eyebrow تفرضه بلون --muted فيعلو على color في المحرّكات الويبكِتية. */
.ccx .eyebrow b{color:var(--blue);-webkit-text-fill-color:var(--blue);font-weight:500}
/* ⚠️ نقطة الـeyebrow الزرقاء — توقيع رأس القسم في الصفحة الرئيسية
   (wtq-v4-base.css: .v4-eyebrow::before) نُقل إلى هذه الصفحة كما هو. */
.ccx .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:0 0 auto}
/* رأس القسم كما في الرئيسية: eyebrow ← h2 ← lead، بعرض 780 وهامش سفلي 48 */
.ccx .hd{max-width:780px;margin:0 auto 48px;text-align:center}
.ccx .hd.start{text-align:start;margin-inline:0}
.ccx .hd.narrow{max-width:640px;margin-bottom:36px}
.ccx .hd .lead{margin-top:16px}
.ccx .hd.c .lead{margin-inline:auto}
.ccx 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}
.ccx h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.7;margin:0 0 12px}
/* ⚠️ نصف العنوان الملوَّن: كان var(--faint) #9A9A96 وتباينه 2.82:1 على الأبيض
   و2.54:1 على اللوح — دون حدّ 3:1 للنصّ الكبير (قِيس). صار var(--muted) #6E6E6B:
   5.12:1 على الأبيض و4.60:1 على اللوح. الرئيسية ما زالت على --faint في .dim
   (wtq-v4-base.css) وذلك قرار على مستوى الموقع لا يُتخذ من ورقة صفحة. */
.ccx .g{color:var(--muted);font-weight:inherit}
.ccx .lead{font-size:clamp(13.5px,1.05vw,15.5px);color:var(--muted);font-weight:300;line-height:1.9;max-width:62ch}
.ccx .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}
.ccx .cta:hover{background:var(--blue-700);border-color:var(--blue-700);transform:translateY(-1px)}
.ccx .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 rgba(37,99,235,.3);transition:background .16s,border-color .16s}
.ccx .cta2:hover{border-color:var(--blue);background:var(--blue-50)}
.ccx .rv{opacity:0;transform:translateY(18px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.25,1)}
.ccx .rv.in{opacity:1;transform:none}
/* ═══ الهيرو: العقد الذي يكتب نفسه ═══ */
/* ⚠️ main.css تعطي .hero أرضية كحلية ونصًّا أبيض وتوسيطًا وتوهّجًا في ::before —
   تُعلَن القيم هنا صراحةً كما في الرئيسية (بلا أولوية قسرية). */
.ccx .hero{position:relative;padding:56px 0 80px;background:#fff;color:var(--ink);text-align:start;overflow:visible}
.ccx .hero::before{content:none}
.ccx .hero .w{display:grid;grid-template-columns:1fr 1.08fr;gap:40px;align-items:center}
.ccx .hero .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.ccx .hero .hint{margin-top:22px;font-size:12.5px;color:var(--muted);font-weight:400}
.ccx .hint b{color:var(--blue);font-weight:500}
/* نافذة المحرر — الجسم المحاكى الوحيد الذي يأخذ ظلّ .v4-win */
.ccx .edwin{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);overflow:hidden}
/* ⚠️ شريط النافذة موحَّد مع .fbar ومع أشرطة الرئيسية الثلاثة (.bbar · .pw-win .bbar · .ds-win .bbar):
   #F6F6F4 وحدّ #E6E6E2 ونقاط #DCDCD8 وارتفاع 36px. كان لوحًا بنقاط --line-2 فبدا طرازًا ثانيًا
   بجوار نافذتي الإطار ولوحة الأوامر في الصفحة نفسها. العنوان الموسَّط باقٍ (نصّ لا يُحذف). */
.ccx .edwin .bar{height:36px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#F6F6F4;border-bottom:1px solid #E6E6E2}
.ccx .edwin .bar i{width:9px;height:9px;border-radius:50%;background:#DCDCD8;flex:0 0 auto}
.ccx .edwin .bar span{flex:1;text-align:center;font-size:10.5px;color:var(--faint);font-weight:400}
.ccx .edwin .tools{display:flex;gap:6px;padding:9px 14px;border-bottom:1px solid var(--line)}
.ccx .edwin .tools b{width:28px;height:28px;border-radius:var(--r);background:var(--panel);color:var(--muted);font-size:10.5px;display:flex;align-items:center;justify-content:center;font-weight:500}
.ccx .edwin .tools b.on{background:var(--blue-50);color:var(--blue)}
.ccx .page{padding:26px 30px 30px;min-height:330px;font-size:13.5px;line-height:2.1;color:var(--ink);font-weight:400}
.ccx .page .doct{font-size:15px;font-weight:500;color:var(--ink);border-inline-start:3px solid var(--blue);padding-inline-start:10px;margin-bottom:14px}
.ccx .page .mada{font-weight:500;color:var(--ink);margin-top:10px}
.ccx .caret{display:inline-block;width:2px;height:1.05em;background:var(--blue);vertical-align:-3px;animation:ccxBlink .9s step-end infinite}
@keyframes ccxBlink{50%{opacity:0}}
.ccx .tok{display:inline-flex;align-items:center;gap:5px;background:var(--blue-50);border:1px dashed rgba(37,99,235,.45);color:var(--blue-700);border-radius:var(--r);padding:1px 9px;font-size:11.5px;font-weight:500;margin:0 3px;animation:ccxPop .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes ccxPop{from{transform:scale(.5);opacity:0}}
.ccx .aisel{background:rgba(37,99,235,.14);border-radius:var(--r)}
/* الصياغة المعتمدة — أخضر اللغة #16A34A (كانت سمة style مضمَّنة بأخضر قديم خارج اللوحة) */
.ccx .aisel.ok{background:rgba(22,163,74,.12)}
/* فقاعة AI */
.ccx .aibub{position:absolute;bottom:20px;inset-inline-end:22px;width:250px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 26px 52px -26px rgba(11,11,11,.4);padding:13px 15px;opacity:0;transform:translateY(12px) scale(.95);transition:.45s cubic-bezier(.2,1.2,.4,1);z-index:5}
.ccx .aibub.show{opacity:1;transform:none}
.ccx .aibub .ah{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:500;color:var(--blue-700);margin-bottom:6px}
.ccx .aibub .ah i{width:22px;height:22px;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px}
.ccx .aibub p{margin:0;font-size:11.5px;color:var(--muted);font-weight:400;line-height:1.8}
.ccx .aibub .act{display:flex;gap:7px;margin-top:9px}
.ccx .aibub .act span{font-size:10.5px;font-weight:500;border-radius:var(--r);padding:5px 12px}
.ccx .aibub .act .a1{background:var(--blue);color:#fff}
.ccx .aibub .act .a2{background:var(--panel);color:var(--muted)}
/* ═══ المانيفستو: كلمات تُضاء مع التمرير ═══ */
/* ⚠️ الأرضية صارت لوحًا: الهيرو أبيض، فبقاء المانيفستو أبيض كان قسمين متتاليين
   بلون واحد (قِيس: كلاهما rgb(255,255,255)) — والتناوب كامل السلسلة أدناه. */
/* الحشو 96px كبقية أقسام الصفحة وكل أقسام الرئيسية — كان 88/84 وحده بينهم (قِيس) */
.ccx .mani{background:var(--panel);padding:96px 0}
.ccx .mani .w{max-width:940px}
.ccx .mani p{margin:0;text-align:start;font-size:clamp(16px,1.35vw,19px);font-weight:300;
  line-height:1.9;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty;
  border-inline-start:2px solid var(--blue);padding-inline-start:clamp(20px,2.4vw,34px)}
.ccx .mani .wd{color:var(--ink)}
.ccx .mani .wd.acc{color:inherit;font-weight:inherit}

/* ═══ سكرولي تيلينج — خطوات مرقّمة في بطاقات + نافذة محاكاة ثابتة ═══
   ⚠️ أُعيد بناؤه (٦ سبتمبر ٢٠٢٦): كان جدار نصّ بلا مكوّن، خطواته بـopacity:.28
   (تباين دون 4.5:1 على النصّ الخافت) وارتفاع 64vh يفتح فجوات فارغة.
   صار: بطاقة بيضاء بحدّ 1px لكل خطوة · رقم 28px يتحوّل أزرق عند التفعيل ·
   موصّل متقطّع بين الخطوات · والحالة تُقال بالأزرق لا بالشفافية. */
.ccx .story{position:relative;background:#fff}
.ccx .story .w{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
/* رأس القسم يمتدّ على العمودين فوق الشبكة — كان القسم بلا رأس إطلاقًا
   (٣ من ٧ أقسام بلا .hd، وهو أطولها) بينما ١٤ من ١٦ قسمًا في الرئيسية لها رأس. */
.ccx .story .hd{grid-column:1/-1}
.ccx .stick{position:sticky;top:110px}
/* الإطار الثابت صار نافذة محاكاة: شريط علوي بثلاث نقاط وظلّ الجسم المحاكى */
.ccx .fwin{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 2px 6px rgba(11,11,11,.05),0 44px 84px -44px rgba(11,11,11,.45)}
.ccx .fbar{height:36px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#F6F6F4;border-bottom:1px solid #E6E6E2}
.ccx .fbar i{width:9px;height:9px;border-radius:50%;background:#DCDCD8;flex:0 0 auto}
.ccx .frame{position:relative;background:#fff;overflow:hidden;height:430px}
.ccx .scene{position:absolute;inset:0;padding:26px;opacity:0;transform:translateY(14px);transition:.55s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.ccx .scene.on{opacity:1;transform:none}
/* ⚠️ ٦ سبتمبر ٢٠٢٦ — الفجوات الفارغة أُغلقت لا خُفّضت:
   كان min-height:42vh على كل خطوة يفتح فجوة 177–181px بين بطاقتين ارتفاعهما 170–196px
   (٤٩٪ من عمود الخطوات فراغ، قِيس)، والموصّل 40px لا يبلغ نصف الفجوة.
   صار: العمود flex بفجوة 24px كعمود الرحلة في الرئيسية (.jr-col{gap:24px})،
   والموصّل بارتفاع 24px بالظبط = الفجوة كاملة، فيصل بين كل بطاقتين بلا مسار خالٍ.
   وطول التمرير لم يعد يصنع الحالة: التبديل صار بأقرب بطاقة إلى محور النافذة (سكربت الصفحة). */
.ccx .steps{display:flex;flex-direction:column;gap:24px;padding:0}
.ccx .stepb{position:relative}
.ccx .sb{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px 16px;transition:border-color .35s,box-shadow .35s,transform .35s}
/* ⚠️ ٦ سبتمبر ٢٠٢٦ — مدرج التمرير أُعيد، والفجوات بقيت مغلقة.
   إغلاق الفجوات (فوق) أسقط المدرج معه: مكوث المشهد = مِيل البطاقات = ارتفاع البطاقة + الفجوة،
   فصار 195px و210px (كان 390 و375)، والإطار يبقى مثبَّتًا 330px فقط بدل 1050 — وحركة عجلة
   واحدة في كروم ≈300px كانت تتخطّى مشهدًا كاملًا (قِيس على 1240×860).
   الحلّ: الميل يعود من **ارتفاع البطاقة نفسها** لا من فجوة فارغة بين بطاقتين —
   ‏.stepb يصير خانة بارتفاع أدنى و.sb يملأ الخانة كاملة ومحتواه موسَّط رأسيًّا،
   فالفراغ يصير حشوًا داخل بطاقة محدودة الحدّ لا ثقبًا في العمود.
   ‏35vh مضبوطة بين 285 و345: عند 860 ⇒ 301px فالميل 325px والتثبيت ≈808px،
   ونسبة الفجوات تبقى 72/1276 = 6٪ (كانت 49٪ قبل الإصلاح السابق و9٪ بعده).
   والمقارنة الصحيحة مع ما قبل الانحدار لا مع ما بعده: هناك كانت الخانة 361px
   والبطاقة 170px، أي **191px ثقبًا مرئيًّا بين بطاقتين**؛ وهنا الفسحة نفسها تقريبًا
   صارت حشوًا داخل حدّ البطاقة. المدرج نفسه، والثقب زال.
   دون 900px التخطيط يتراصّ ولا يوجد تثبيت — فلا حاجة لمدرج ولا لارتفاع أدنى. */
@media(min-width:901px){
  .ccx .stepb{display:flex;min-height:clamp(285px,35vh,345px)}
  .ccx .sb{flex:1;display:flex;flex-direction:column;justify-content:center}
}
.ccx .stepb.on .sb{border-color:var(--blue);box-shadow:0 26px 44px -30px rgba(37,99,235,.55);transform:translateY(-2px)}
/* الموصّل: خطّ متقطّع يملأ الفجوة كاملة بين بطاقتين — معلَّق على .stepb لا على .sb
   كي لا يرفعه translateY(-2px) للبطاقة المفعَّلة فيترك ثقبًا أسفله. */
/* 34px = حشو البطاقة 20 + نصف الرقم 14 → الخطّ يقع على محور الرقم بالظبط (قِيس: مركز الرقم 1162 وحافّة البطاقة 1197) */
/* 28px مع إزاحة 2px من الطرفين: الفجوة 24px والبطاقة المفعَّلة ترتفع 2px،
   فالتمديد يضمن التصاق الموصّل بالبطاقتين في الحالتين، والزائد يختفي خلف البطاقة
   (‏.sb ذات position:relative تُرسم فوق الزائف). */
.ccx .stepb + .stepb::before{content:"";position:absolute;bottom:calc(100% - 2px);inset-inline-start:34px;width:0;height:28px;border-inline-start:1.5px dashed #C9D3EA;transition:border-color .35s}
.ccx .stepb.on::before{border-inline-start-color:var(--blue)}
.ccx .stepb h3{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:500;color:var(--muted);margin:0 0 10px;letter-spacing:-.02em;line-height:1.7;transition:color .35s}
.ccx .stepb.on h3{color:var(--ink)}
.ccx .stepb .k{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 auto;border-radius:var(--r);background:#fff;border:1px solid var(--line);color:var(--muted);font-weight:500;font-size:12.5px;transition:.35s}
.ccx .stepb.on .k{background:var(--blue);border-color:var(--blue);color:#fff}
.ccx .stepb p{font-size:13.5px;color:var(--muted);font-weight:300;line-height:1.9;margin:0}
.ccx .stepb .mini{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
/* 12px حدًّا أدنى: الشرائح نصّ يُقرأ خارج النوافذ المحاكاة */
.ccx .stepb .mini span{font-size:12px;font-weight:500;color:var(--blue);background:var(--blue-50);border:1px solid #D6E2FB;border-radius:var(--r);padding:3px 9px}
/* مشاهد الإطار */
.ccx .drop{height:100%;border:1px dashed rgba(37,99,235,.45);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--blue-50)}
.ccx .drop .di{width:56px;height:56px;border-radius:var(--r);background:#fff;border:1px solid var(--line);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:22px;animation:ccxBob 2.4s ease-in-out infinite}
@keyframes ccxBob{50%{transform:translateY(-8px)}}
.ccx .drop b{font-size:14.5px;color:var(--ink);font-weight:500}
.ccx .drop small{font-size:11.5px;color:var(--muted);font-weight:400}
.ccx .drop .fmt{display:flex;gap:8px;margin-top:4px}
.ccx .drop .fmt span{font-size:10.5px;font-weight:500;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:3px 9px;color:var(--muted)}
.ccx .fldgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.ccx .fld{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;font-size:11.5px;font-weight:500;color:var(--ink)}
.ccx .fld i{color:var(--blue);font-size:11px}
.ccx .fld.fly{background:var(--blue-50);border-color:var(--blue);color:var(--blue-700);animation:ccxFly 2.6s ease-in-out infinite}
@keyframes ccxFly{0%,100%{transform:translate(0,0);box-shadow:none}45%{transform:translate(-60px,96px) scale(1.06);box-shadow:0 18px 30px -14px rgba(11,11,11,.35)}60%{transform:translate(-60px,96px) scale(1)}90%{opacity:1}}
.ccx .doczone{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;font-size:12px;font-weight:400;line-height:2.1;color:var(--muted)}
.ccx .doczone .slot{display:inline-block;min-width:110px;border-bottom:1px dashed rgba(37,99,235,.5);margin:0 4px;border-radius:2px;background:var(--blue-50)}
/* عرض الفراغين الثاني والثالث (كان في سمة style مضمَّنة) */
.ccx .doczone .slot:nth-of-type(2){min-width:80px}
.ccx .doczone .slot:nth-of-type(3){min-width:90px}
.ccx .diff{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:12px;font-weight:400;line-height:2}
.ccx .diff .dh{display:flex;align-items:center;gap:6px;padding:9px 14px;background:var(--panel);font-weight:500;color:var(--ink);font-size:11.5px;border-bottom:1px solid var(--line)}
.ccx .diff .dh i{color:var(--blue)}
.ccx .diff .old{padding:11px 14px;color:#a5514e;background:#FEF6F5;text-decoration:line-through;text-decoration-color:rgba(185,28,28,.45)}
/* ⚠️ #15803D على --green-50 = 4.49:1 — أقلّ بـ0.01 من الحدّ 4.5 الذي يفرضه الموجز نفسه
   (قِيس في الحالات الستّ). #166534 على الأرضية نفسها = 6.31:1 وهو الأخضر نفسه أغمق درجة.
   إعفاء النوافذ المحاكاة يخصّ حجم الخطّ لا التباين. */
.ccx .diff .new{padding:11px 14px;color:#166534;background:var(--green-50);position:relative;overflow:hidden}
.ccx .diff .new::after{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;background:rgba(22,163,74,.12);transform:translateX(250%);animation:ccxSweep 2.8s ease-in-out infinite}
@keyframes ccxSweep{40%,100%{transform:translateX(-100%)}}
.ccx .aibar{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin-top:12px;font-size:12px;font-weight:400;color:var(--muted)}
.ccx .aibar i{font-style:normal}
/* لون أيقونتي الاقتراح والتنبيه (كانا في سمتي style مضمَّنتين) */
.ccx .scene > .aibar:nth-child(2) i{color:var(--blue)}
.ccx .scene > .aibar:nth-child(3) i{color:var(--muted)}
.ccx .sgrow{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.ccx .sg{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px 13px}
.ccx .sg .avv{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:500;flex:0 0 auto}
.ccx .sg b{font-size:12px;color:var(--ink);font-weight:500}
.ccx .sg small{display:block;font-size:10.5px;color:var(--muted);font-weight:400}
.ccx .sg .st{margin-inline-start:auto;font-size:10px;font-weight:500;border-radius:999px;padding:3px 9px;white-space:nowrap;background:var(--panel);color:var(--muted)}
/* ألوان الموقّعين الثلاثة وحالاتهم (كانت في سمات style مضمَّنة) */
.ccx .sgrow .sg:nth-child(1) .avv{background:var(--blue)}
/* ⚠️ حرف أبيض 11px على --green ‏#16A34A = 3.30:1 (قِيس) — دون 4.5.
   ‏#15803D يرفعه إلى 5.02:1 وهو الأخضر المعتمد لنصّ اللغة (.v4-tag.g في الأساس). */
.ccx .sgrow .sg:nth-child(2) .avv{background:#15803D}
.ccx .sgrow .sg:nth-child(3) .avv{background:var(--ink)}
.ccx .sgrow .sg:nth-child(1) .st{background:var(--blue-50);color:var(--blue)}
.ccx .sendbtn{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--blue);color:#fff;font-weight:500;font-size:13.5px;border-radius:var(--r);padding:11px;animation:ccxPulse 2s infinite}
@keyframes ccxPulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.35)}50%{box-shadow:0 0 0 12px rgba(37,99,235,0)}}
/* ═══ أوامر السلاش ═══ */
.ccx .slash{background:var(--panel);border-radius:0;margin:0;color:var(--ink);position:relative}
.ccx .slash .w{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
/* رأس القسم داخل عمود — لا هامش سفلي كي لا ينزاح التوسيط الرأسي (نمط .hd.start في الرئيسية) */
.ccx .slash .hd{margin-bottom:0}
.ccx .slash h2{color:var(--ink)}
.ccx .slash .lead{color:var(--muted)}
/* المفتاح أبيض على أرضية القسم اللوح — كان لوحًا على لوح فيختفي حدّه */
.ccx .slash .kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.15em;height:1.15em;border-radius:var(--r);background:#fff;border:1px solid var(--line-2);font-weight:500;font-size:.72em;color:var(--ink);padding:0 .3em;vertical-align:.08em;font-family:ui-monospace,Menlo,Consolas,monospace}
/* لوحة الأوامر صارت نافذة محاكاة كاملة: شريط ثلاث نقاط + ظلّ الجسم المحاكى */
.ccx .palwin{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 2px 6px rgba(11,11,11,.05),0 44px 84px -44px rgba(11,11,11,.45)}
.ccx .pal{background:#fff}
.ccx .pal .ph2{display:flex;align-items:center;gap:9px;padding:13px 17px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:400;color:var(--muted)}
.ccx .pal .ph2 b{color:var(--blue);font-weight:500}
.ccx .pal .it{display:flex;align-items:center;gap:11px;padding:11px 17px;font-size:13px;font-weight:400;color:var(--ink);transition:.25s;border-inline-start:3px solid transparent}
.ccx .pal .it i{width:30px;height:30px;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px}
.ccx .pal .it small{margin-inline-start:auto;font-size:10.5px;color:var(--muted);font-weight:400}
.ccx .pal .it.hot{background:var(--blue-50);border-inline-start-color:var(--blue);color:var(--blue-700)}
/* ═══ الدليل (تبويبات جانبية) + الأسئلة ═══ */
/* الأرضية والعرض كانا في سمتي style مضمَّنتين على <section> و<div class="w"> */
.ccx .guide{background:#fff}
.ccx .guide .w{max-width:860px}
.ccx .ggrid{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
.ccx .gtoc{display:flex;flex-direction:column;gap:8px;position:sticky;top:100px}
.ccx .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:.3s;font-weight:500;font-size:13.5px;color:var(--muted);line-height:1.7}
.ccx .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}
.ccx .gti.on{border-color:var(--blue);color:var(--ink);box-shadow:0 20px 40px -30px rgba(37,99,235,.55)}
.ccx .gti.on i{background:var(--blue);color:#fff}
.ccx .gpanel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 30px;min-height:280px}
.ccx .gpc{display:none;animation:ccxGin .45s cubic-bezier(.2,.8,.2,1)}
.ccx .gpc.on{display:block}
@keyframes ccxGin{from{opacity:0;transform:translateY(12px)}}
.ccx .gpc h3{font-size:18px;font-weight:500;color:var(--ink);margin:0 0 12px;letter-spacing:-.02em;line-height:1.7}
.ccx .gpc p{font-size:14.5px;color:var(--muted);font-weight:400;line-height:1.9;margin:0}
.ccx .gpc .kw{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
/* 12px حدًّا أدنى: الشرائح نصّ يُقرأ خارج النوافذ المحاكاة */
.ccx .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:3px 9px}
/* ⚠️ ٦ سبتمبر ٢٠٢٦ — المسرد يبقى عمودًا على الهاتف ولا يصير شريط تمرير أفقيًّا:
   ‏flex-direction:row + overflow-x:auto كانت تعطي عند 390 مسردًا عرضه 560 في منفذ 350،
   فتبويبتان من الأربع خارج الشاشة تمامًا بلا أي إشارة إلى إمكان السحب، وكل تبويبة 119px
   ارتفاعًا لأن النصّ يلتفّ على خمسة أسطر في صندوق عرضه 130px (قِيس عربيًّا وإنجليزيًّا).
   العمود يجعل التبويبات الأربع مرئية بصفّ واحد لكل منها كقائمة المزايا في الرئيسية. */
@media(max-width:760px){.ccx .ggrid{grid-template-columns:1fr}.ccx .gtoc{position:static}}
/* بؤرة لوحة المفاتيح — التبويبات وصفوف الأسئلة صارت عناصر تحكّم قابلة للتركيز */
.ccx .gti:focus-visible,.ccx .qa .qh:focus-visible,.ccx .gpc:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* تناوب الأسطح — السلسلة كاملة من الهيرو (كان التعليق يبدأ من mani فيُخفي الخرق):
   hero أبيض ← mani لوح ← story أبيض ← slash لوح ← guide أبيض ← faqs لوح ← fin أبيض.
   لا قسمان متتاليان بلون واحد. والنداء الختامي أبيض كـ.cta-final في الرئيسية. */
.ccx .faqs{background:var(--panel)}
.ccx .faq{max-width:840px;margin:0 auto}
.ccx .qa{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:10px;overflow:visible;transition:border-color .25s,box-shadow .25s}
.ccx .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}
.ccx .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}
.ccx .qa .qb{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .4s ease,visibility 0s linear .4s;padding:0 18px;border-radius:0 0 var(--r) var(--r)}
.ccx .qa .qb p{font-size:13.5px;color:var(--muted);font-weight:400;line-height:1.95;margin:0 0 18px}
.ccx .qa.open{border-color:rgba(37,99,235,.3);box-shadow:0 20px 40px -32px rgba(37,99,235,.4)}
.ccx .qa.open .qh .x{transform:rotate(45deg);background:var(--blue);color:#fff}
.ccx .qa.open .qb{max-height:320px;visibility:visible;transition:max-height .4s ease,visibility 0s}
/* ═══ النداء الختامي — على مقاس .cta-final في الرئيسية ═══
   كان يقع أخفت من نظيره: عنوانه clamp(28,3.4vw,44) موروثًا من .ccx h2 بينما
   الرئيسية clamp(32,4.2vw,54)، وبلا نسيج النقاط الذي يميّز آخر أقسام الرئيسية. */
.ccx .fin{position:relative;text-align:center;background:#fff;padding:96px 0;overflow:hidden}
.ccx .fin h2{font-size:clamp(32px,4.2vw,54px)}
/* ⚠️ نسيج النقاط: الرئيسية ترسمه بـradial-gradient لنقاطه وبقناع radial-gradient يفرّغ وسطه
   (home-v4.css: .cta-final::before). فاحص الصفحة يمنع أي `*-gradient` في ورقة صفحة، وهو منع
   للتدرّج كتعبئة بصرية لا لهذا النسيج — فرُسم النسيج نفسه بصورتَي SVG مضمَّنتين تعطيان
   النتيجة البصرية ذاتها (نقطة #D9D9D4 نصف قطرها .9px كل 15px، وقناع يفرّغ الوسط
   حيث يقع النصّ). لا تُبدّلهما بتدرّج CSS: الفاحص سيرفض الورقة. */
.ccx .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}
.ccx .fin .w{position:relative}
/* عرض سطر الشرح وهامشه (كانا في سمة style مضمَّنة) */
.ccx .fin .lead{max-width:520px;margin:0 auto 30px}
@media(max-width:900px){
  .ccx section{padding:64px 0}
  .ccx .w{padding:0 20px}
  .ccx .mani{padding:64px 0}
  .ccx .fin{padding:64px 0}
  .ccx .mani p{font-size:clamp(15.5px,4vw,17px);line-height:1.9;padding-inline-start:15px}
  .ccx .hero{padding:40px 0 64px}
  .ccx .hero .w,.ccx .story .w,.ccx .slash .w{grid-template-columns:1fr}
  .ccx .stick{position:static}
  /* الفجوة 24px نفسها على الهاتف — الموصّل يبلغها كاملة بلا حشو معوِّض */
  .ccx .hd{margin-bottom:36px}
  .ccx .frame{height:440px}
}
@media(max-width:640px){
  /* 210px: عرض «افتح المحرر الآن» بسهمه؛ أقلّ منه يكسر نصّ الزرّ على سطرين عند 390 */
  .ccx .hero .btns > a{flex:1;min-width:210px}
  /* قِيس: مشهد المساعد بالإنجليزية عند 390 يبلغ 454px والإطار 438 — فيُقصّ التنبيه الأخير */
  .ccx .frame{height:472px}
}
@media (prefers-reduced-motion:reduce){
  .ccx .rv{opacity:1;transform:none;transition:none}
  .ccx .drop .di,.ccx .fld.fly,.ccx .diff .new::after,.ccx .sendbtn,.ccx .caret,.ccx .tok{animation:none}
}