/* ═══════════════════════════════════════════════════════
 *  features-review-workflow.css — أُستخرِج آليًا من pages/features/review-workflow.php
 *  المقطع 1 من 1 · سطور 11–11 في الأصل.
 *  ⚠️ الترتيب بين المقاطع مقصود: بينها كتل <style> مشروطة
 *     باقية في الصفحة، والتتالي يعتمد على تسلسلها.
 *  ⚠️ نُقلت إلى لغة تصميم الرئيسية (٥ سبتمبر ٢٠٢٦): الرموز المحلّية صارت
 *     أسماءً بديلة لرموز wtq-v4-base.css، ولا كحلي ولا سماوي ولا كهرماني
 *     ولا تدرّج ولا ظلّ إلا لنافذة التعاون المحاكاة. هويّات المراجعين الثلاثة
 *     من العائلة نفسها: أزرق (م) · حبر (س) · أخضر (أ / النور) — كما في التجريبية.
 * ═══════════════════════════════════════════════════════ */
.rwx{--pb:var(--blue);--pb2:var(--blue-700);--nv:var(--ink);--mut:var(--muted);--soft:var(--panel);--soft2:var(--blue-50);--ok:var(--green);--okbg:var(--green-50);
  --cb:var(--blue);--cbg:var(--blue-50);--ct:var(--ink);--ctg:var(--panel);--ca:var(--green);--cag:var(--green-50);color-scheme:light}
.rwx{color:var(--ink);line-height:1.75;background:#fff;overflow-x:clip}
.rwx .w{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.rwx section{padding:96px 0}
.rwx .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:500;font-size:12.5px;margin:0 0 14px}
.rwx .eyebrow i{color:var(--blue);font-size:12px}
/* الشطر الأزرق من العلامة — نفس أوليّة الأساس (.v4-eyebrow b) حرفًا بحرف: وزن ٥٠٠ لا ٧٠٠. */
.rwx .eyebrow b{color:var(--blue);font-weight:500}
.rwx 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}
.rwx 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}
.rwx .g{color:var(--faint);font-weight:inherit}
.rwx .lead{font-size:clamp(13.5px,1.05vw,15.5px);color:var(--muted);font-weight:300;line-height:1.9;max-width:62ch}
.rwx .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}
.rwx .cta:hover{background:var(--blue-700);border-color:var(--blue-700);transform:translateY(-1px)}
/* الزرّ الثانوي بحدّ .btn.line في الرئيسية (#C7D7FB) لا بشفافية زرقاء */
.rwx .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}
.rwx .cta2:hover{border-color:var(--blue);background:var(--blue-50)}
.rwx .rv{opacity:0;transform:translateY(18px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.25,1)}
.rwx .rv.in{opacity:1;transform:none}
/* رأس القسم بمقاس .hd في الرئيسية: 780px وسطر شرح بهامش 16px */
.rwx .whead{text-align:center;max-width:780px;margin:0 auto 48px}
.rwx .whead .lead{margin:16px auto 0}
.rwx .faqh{margin-bottom:36px}

/* ═══ الهيرو + لوحة التعاون الثلاثية ═══ */
/* ⚠️ main.css تعطي .hero أرضية كحلية ونصًّا أبيض وتوسيطًا وتوهّجًا في ::before —
   تُعلَن القيم هنا صراحةً كما في الرئيسية (بلا أولوية قسرية). */
.rwx .hero{position:relative;padding:56px 0 80px;background:#fff;color:var(--ink);text-align:start;overflow:visible}
.rwx .hero::before{content:none}
/* الهالتان الضبابيتان كانتا تدرّجًا شعاعيًّا خالصًا — بلا تدرّج لا محتوى لهما */
.rwx .hero .aur{display:none}
.rwx .hero .w{position:relative;display:grid;grid-template-columns:.86fr 1.14fr;gap:46px;align-items:center}
.rwx .hero .lead{max-width:500px;margin-bottom:28px}
.rwx .hero .btns{display:flex;gap:12px;flex-wrap:wrap}
/* سطر الطمأنة صار وسوم .tg.g كما في الرئيسية: شريحة بحدّ ونصّ #15803D المقروء (5.02)
   بدل نصّ عارٍ بعلامة خضراء --green (3.30 — يصلح علامةً لا نصًّا) */
.rwx .trustline{display:flex;gap:8px;margin-top:30px;flex-wrap:wrap}
.rwx .trustline span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:#15803D;background:var(--green-50);border:1px solid #CDEBD6;border-radius:var(--r);padding:5px 11px}
.rwx .trustline i{color:#15803D;font-size:12px}
/* اللوحة — الجسم المحاكى الوحيد الذي يأخذ ظلّ .v4-win */
.rwx .collab{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}
.rwx .collab .cbar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:var(--panel);border-bottom:1px solid var(--line)}
.rwx .collab .cbar i{width:9px;height:9px;border-radius:50%;display:inline-block}
.rwx .collab .cbar .t{flex:1;text-align:center;font-size:10.5px;font-weight:400;color:var(--faint)}
.rwx .collab .live{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:500;color:#15803D;background:var(--green-50);border-radius:999px;padding:3px 10px}
.rwx .collab .live b{width:6px;height:6px;border-radius:50%;background:var(--green);font-weight:400;animation:rwxBlink 1.4s infinite}
@keyframes rwxBlink{50%{opacity:.25}}
/* عرضا الجانبين مقيسان على الإنجليزية (٥ سبتمبر ٢٠٢٦): شارة «Approved» 83px + هالتها تحتاج 166 ·
   «Al-Nour School» + «External» في رأس البطاقة 172px تحتاج 224 (وبطاقة الردّ ببادئتها 14px تحتاج 144) */
.rwx .cbody{display:grid;grid-template-columns:166px 1fr 224px;min-height:388px}
.rwx .cpane{padding:14px 13px}
.rwx .cpane-ver{border-inline-end:1px solid var(--line);background:#fff}
.rwx .cpane-cmt{border-inline-start:1px solid var(--line);background:#fff}
.rwx .pane-h{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:500;color:var(--ink);margin-bottom:13px}
.rwx .pane-h i{color:var(--blue);font-size:11.5px}
/* عمود النسخ */
.rwx .ver{position:relative;display:flex;gap:9px;padding:0 0 15px 0;margin-inline-start:6px;border-inline-start:2px solid var(--line);padding-inline-start:14px}
.rwx .ver:last-child{border-inline-start-color:transparent;padding-bottom:0}
.rwx .ver::before{content:'';position:absolute;inset-inline-start:-6px;top:2px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--line)}
.rwx .ver.cur::before{border-color:var(--green);background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.14)}
.rwx .vav{width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10.5px;font-weight:500}
.rwx .vmeta b{display:block;font-size:11px;font-weight:500;color:var(--ink);line-height:1.5}
.rwx .vmeta span{font-size:10.5px;color:var(--muted);font-weight:400}
.rwx .vbadge{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:10.5px;font-weight:500;color:#15803D;background:var(--green-50);border-radius:999px;padding:2px 8px;position:relative}
.rwx .vbadge i{animation:rwxStamp .6s cubic-bezier(.2,1.5,.4,1) both;animation-delay:2.4s}
.rwx .vbadge::after{content:'';position:absolute;inset:-3px;border-radius:999px;border:1.5px solid rgba(22,163,74,.4);opacity:0;animation:rwxHalo 3.6s ease-out infinite;animation-delay:2.6s}
@keyframes rwxStamp{0%{opacity:0;transform:scale(2) rotate(-16deg)}100%{opacity:1;transform:none}}
@keyframes rwxHalo{0%{opacity:.9;transform:scale(.7)}70%,100%{opacity:0;transform:scale(1.5)}}
/* عمود المستند */
.rwx .cpane-doc{padding:16px 18px;overflow:hidden}
.rwx .doc-t{font-size:13px;font-weight:500;color:var(--ink);border-inline-start:3px solid var(--blue);padding-inline-start:9px;margin-bottom:12px}
.rwx .doc-p{font-size:11.5px;font-weight:400;line-height:2.2;color:#3A3A38;margin:0 0 11px}
.rwx .doc-mada{font-size:11px;font-weight:500;color:var(--ink);margin:0 0 5px}
/* الإبراز يلتفّ كالتعليق الحقيقي: nowrap كان يقصّ «Transport and insurance liability» (206px) داخل عمود مستند
   قد يضيق إلى 154px عند 1101 (اللوحة overflow:hidden) — كل شظية تحمل زاويتها وخطّها السفلي */
.rwx .mk{border-radius:var(--r);padding:1px 3px;position:relative;white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone;cursor:default}
.rwx .mk-b{background:rgba(37,99,235,.14);box-shadow:inset 0 -2px 0 rgba(37,99,235,.4)}
.rwx .mk-t{background:rgba(11,11,11,.08);box-shadow:inset 0 -2px 0 rgba(11,11,11,.35)}
.rwx .mk-a{background:rgba(22,163,74,.14);box-shadow:inset 0 -2px 0 rgba(22,163,74,.45)}
.rwx .mk.pulse{animation:rwxHlPulse 3.4s ease-in-out infinite}
@keyframes rwxHlPulse{0%,100%{background:rgba(37,99,235,.12)}45%{background:rgba(37,99,235,.32)}}
.rwx .nb{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;color:#fff;font-size:10.5px;font-weight:500;vertical-align:super;margin-inline-start:2px;transform:scale(0);animation:rwxPop .5s cubic-bezier(.2,1.6,.4,1) both}
.rwx .nb-b{background:var(--blue);animation-delay:.5s}
.rwx .nb-t{background:var(--ink);animation-delay:1.1s}
.rwx .nb-a{background:var(--green);animation-delay:1.7s}
@keyframes rwxPop{to{transform:scale(1)}}
/* عمود التعليقات */
.rwx .cmt{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:9px 10px;margin-bottom:9px;opacity:0;animation:rwxCmtIn .55s cubic-bezier(.2,.8,.2,1) both}
.rwx .cmt:nth-of-type(1){animation-delay:.7s}
.rwx .cmt:nth-of-type(2){animation-delay:1.3s}
.rwx .cmt:nth-of-type(3){animation-delay:1.9s}
.rwx .cmt.reply{margin-inline-start:14px;background:var(--panel);animation-delay:2.5s}
@keyframes rwxCmtIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.rwx .cmt .ch{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:5px}
.rwx .cmt .cav{width:20px;height:20px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10.5px;font-weight:500}
.rwx .cmt .cn{font-size:10.5px;font-weight:500;color:var(--ink)}
.rwx .cmt .tag{margin-inline-start:auto;font-size:10.5px;font-weight:500;border-radius:999px;padding:2px 7px}
.rwx .tag-in{background:var(--blue-50);color:var(--blue)}
.rwx .tag-ex{background:var(--panel);color:var(--muted)}
.rwx .cmt p{margin:0;font-size:10.5px;font-weight:400;line-height:1.75;color:var(--muted)}
.rwx .cmt .men{color:var(--blue);font-weight:500}
.rwx .typing{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--muted);font-weight:400;padding:3px 4px;opacity:0;animation:rwxCmtIn .5s ease both;animation-delay:3.1s}
.rwx .typing b{width:4px;height:4px;border-radius:50%;background:var(--muted);font-weight:400;animation:rwxDot 1.2s infinite}
.rwx .typing b:nth-child(2){animation-delay:.2s}.rwx .typing b:nth-child(3){animation-delay:.4s}
@keyframes rwxDot{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* ═══ شريط المزايا → شبكة بطاقات ═══
   كان صفًّا عاريًا على سطح بديل، فكسر تناوب الأرضيّات على طول الصفحة (بعده أبيضان متتاليان).
   صار شبكة أربع بطاقات بيضاء على بياض الهيرو نفسه — كشريط الثقة في الرئيسية —
   بتشريح .hc: بلاطة أيقونة 40px بجانب عمود (عنوان 15.5px/500 + وصف 13px/300). */
.rwx .strip{background:#fff;padding:6px 0 4px}
.rwx .strip .w{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:0 28px}
.rwx .si{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px;transition:border-color .3s}
.rwx .si:hover{border-color:#C7D7FB}
.rwx .si .ic{width:40px;height:40px;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:15px;margin-top:2px}
.rwx .si > span:last-child{display:block;min-width:0}
.rwx .si b{display:block;font-size:15.5px;font-weight:500;color:var(--ink);line-height:1.7;letter-spacing:-.01em;margin-bottom:3px}
.rwx .si > span > span{display:block;font-size:13px;color:var(--muted);font-weight:300;line-height:1.85}

/* ═══ قسم «ليه المراجعة الداخلية» — سطح بديل ═══ */
.rwx .why{background:var(--panel)}

/* بطاقات المزايا الستّ → تشريح .hc في الرئيسية: البلاطة بجانب النصّ لا فوقه.
   الأيقونة فوق العنوان كانت تُهدر سطرًا وتُبعد الأيقونة عن معناها. */
.rwx .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rwx .fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;transition:border-color .3s}
.rwx .fcard:hover{border-color:#C7D7FB}
.rwx .fcard .hdr,.rwx .uc .hdr{display:flex;align-items:flex-start;gap:12px}
.rwx .fcard .hdr > div,.rwx .uc .hdr > div{min-width:0}
.rwx .fcard .ic{width:40px;height:40px;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:16px;margin-top:2px}
.rwx .fcard h3{font-size:15.5px;font-weight:500;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em;line-height:1.7}
.rwx .fcard p{font-size:13px;color:var(--muted);font-weight:300;margin:0;line-height:1.85}

/* الفقرة الجامعة → «بيان»: كانت جدار نصّ موسَّطًا بعرض 820px وكلمات مفردة مُلوَّنة بـ--ink داخله.
   صارت بمحاذاة البداية بعلامة زرقاء واحدة جانبية 2px، ووزن 300، وبلا تلوين كلمات متفرّقة. */
.rwx .wpara{max-width:74ch;margin:0 auto 44px;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:22px}
.rwx .wpara b{color:inherit;font-weight:500}

/* ═══ كيف تعمل — خطوات مرقّمة ═══
   السطح صار أبيض ليستقيم التناوب (قبله «ليه المراجعة» على السطح البديل).
   الرقم نزل من 36px إلى 26px ووقف بجانب العنوان في صفّ رأس (كـ.num في الرئيسية)،
   والأيقونة الشبحية التي كانت بلون --line-2 (تباين 1.52 — رمز حدّ استُعمل حبرًا)
   صارت بلاطة .itile زرقاء، وبين الخطوات خطّ رابط متقطّع كخطوات الرحلة في الرئيسية. */
.rwx .how{background:#fff}
.rwx .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rwx .step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;transition:border-color .3s}
.rwx .step:hover{border-color:#C7D7FB}
/* الخطّ الرابط والنقطة والرقم على محور واحد: الحشو 22 + نصف الرقم 13 = 35px (مقيس) */
.rwx .step::before{content:"";position:absolute;top:35px;inset-inline-start:-18px;width:18px;border-top:1.5px dashed #C9D3EA}
.rwx .step:first-child::before{content:none}
/* flex-start لا center: العنوان الإنجليزي «Comment and review with your team» يُكسر ثلاثة أسطر،
   فيهبط الرقم مع التوسيط ويفارق محور الخطّ الرابط (35px) */
.rwx .step .sh{display:flex;align-items:flex-start;gap:10px;margin-bottom:9px;padding-inline-end:40px}
.rwx .step .sn{width:26px;height:26px;flex:0 0 auto;border-radius:var(--r);background:var(--blue);color:#fff;font-weight:500;font-size:12.5px;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center}
.rwx .step .si2{position:absolute;top:20px;inset-inline-end:22px;width:30px;height:30px;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:13px}
.rwx .step h3{font-size:15.5px;font-weight:500;color:var(--ink);margin:0;letter-spacing:-.01em;line-height:1.7}
.rwx .step p{font-size:13px;color:var(--muted);font-weight:300;margin:0;line-height:1.85}
.rwx .step .arrow{position:absolute;top:24px;inset-inline-start:-11px;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:12px;z-index:2}

/* ═══ سلسلة الاعتماد — كانت بطاقة كحلية داكنة؛ صارت قسمًا على السطح البديل ═══
   السطح صار var(--panel) ليستقيم التناوب، فرفعت العُقد إلى الأبيض حتى تبقى أجسامًا على السطح. */
.rwx .chain{background:var(--panel);border-radius:0;margin:0;color:var(--ink);position:relative;overflow:hidden}
.rwx .chain::before{content:none}
.rwx .chain .w{position:relative}
.rwx .chain .chd{text-align:center;max-width:780px;margin:0 auto 44px}
.rwx .chain h2{color:var(--ink)}
.rwx .chain h2 .chsep{font-size:.7em;color:var(--blue);vertical-align:middle}
.rwx .chain .lead{color:var(--muted);margin:16px auto 0}
.rwx .chain .eyebrow{color:var(--muted)}
.rwx .stepper{display:flex;align-items:flex-start;justify-content:center;gap:0;max-width:640px;margin:0 auto;position:relative}
.rwx .stepper .node{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 auto;width:150px;text-align:center;position:relative;z-index:2}
.rwx .stepper .dot{width:56px;height:56px;border-radius:var(--r);background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--muted);animation:rwxLight 5.4s ease-in-out infinite}
.rwx .stepper .node:nth-child(1) .dot{animation-delay:.2s}
.rwx .stepper .node:nth-child(3) .dot{animation-delay:1.3s}
.rwx .stepper .node:nth-child(5) .dot{animation-delay:2.4s}
@keyframes rwxLight{0%,6%{background:#fff;border-color:var(--line);color:var(--muted);box-shadow:none}14%,78%{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 12px 24px -14px rgba(37,99,235,.7)}92%,100%{background:#fff;border-color:var(--line);color:var(--muted);box-shadow:none}}
.rwx .stepper .node:nth-child(5) .dot{animation-name:rwxLightOk}
@keyframes rwxLightOk{0%,6%{background:#fff;border-color:var(--line);color:var(--muted);box-shadow:none}14%,100%{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 12px 24px -14px rgba(22,163,74,.6)}}
.rwx .stepper .node b{font-size:14.5px;font-weight:500;color:var(--ink)}
.rwx .stepper .node span{font-size:12px;color:var(--muted);font-weight:400;line-height:1.6}
.rwx .stepper .link{flex:1;height:2px;background:var(--line);border-radius:2px;margin-top:27px;position:relative;overflow:hidden;min-width:26px}
.rwx .stepper .link::after{content:'';position:absolute;inset:0;transform-origin:right;transform:scaleX(0);background:var(--blue);animation:rwxFill 5.4s ease-in-out infinite}
.rwx .stepper .link:nth-of-type(2)::after{animation-delay:.7s}
.rwx .stepper .link:nth-of-type(4)::after{animation-delay:1.8s}
@keyframes rwxFill{0%,10%{transform:scaleX(0)}22%,80%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}

/* ═══ متى تحتاجها — شبكة بطاقات بالتشريح نفسه ═══ */
.rwx .use{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:0}
.rwx .uc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;transition:border-color .3s}
.rwx .uc:hover{border-color:#C7D7FB}
.rwx .uc .ic{width:40px;height:40px;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:17px;margin-top:2px}
.rwx .uc h3{font-size:15.5px;font-weight:500;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em;line-height:1.7}
.rwx .uc p{font-size:13px;color:var(--muted);font-weight:300;margin:0;line-height:1.85}

/* ═══ الدليل + الأسئلة ═══ */
/* السطح والعرض كانا سمتين مضمَّنتين في الترميز — نُقلا إلى الورقة */
.rwx .guide{background:var(--panel)}
.rwx .guide .w{max-width:900px}
.rwx .ggrid{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
.rwx .gtoc{display:flex;flex-direction:column;gap:8px;position:sticky;top:100px}
.rwx .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}
.rwx .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}
.rwx .gti.on{border-color:var(--blue);color:var(--ink);box-shadow:0 20px 40px -30px rgba(37,99,235,.55)}
.rwx .gti.on i{background:var(--blue);color:#fff}
.rwx .gpanel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 30px;min-height:280px}
.rwx .gpc{display:none;animation:rwxGin .45s cubic-bezier(.2,.8,.2,1)}
.rwx .gpc.on{display:block}
@keyframes rwxGin{from{opacity:0;transform:translateY(12px)}}
.rwx .gpc h3{font-size:18px;font-weight:500;color:var(--ink);margin:0 0 12px;letter-spacing:-.02em;line-height:1.7}
.rwx .gpc p{font-size:14.5px;color:var(--muted);font-weight:300;line-height:1.9;margin:0;max-width:62ch}
.rwx .gpc .kw{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
/* 12px حدًّا أدنى: الشرائح خارج النوافذ المحاكاة (كانت 11px على الحاسوب و12 على الهاتف وحده) */
.rwx .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}
.rwx .faq{max-width:840px;margin:0 auto}
.rwx .qa{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:10px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.rwx .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}
.rwx .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}
.rwx .qa .qb{max-height:0;overflow:hidden;transition:max-height .4s ease;padding:0 18px}
.rwx .qa .qb p{font-size:13.5px;color:var(--muted);font-weight:300;line-height:1.95;margin:0 0 18px}
/* حدّ .fq details[open] في الرئيسية */
.rwx .qa.open{border-color:#C7D7FB;box-shadow:0 20px 40px -32px rgba(37,99,235,.4)}
.rwx .qa.open .qh .x{transform:rotate(45deg);background:var(--blue);color:#fff}
.rwx .qa.open .qb{max-height:320px}

/* ═══ CTA ═══ */
.rwx .fin{text-align:center;background:var(--panel);padding:96px 0}
.rwx .fin .lead{max-width:520px;margin:0 auto 30px}

/* الهيرو يهبط إلى عمود عند 1100 (كنافذة الجولة في الرئيسية): تحتها لا تتّسع النافذة لثلاث لوحات بالإنجليزية
   (قِيس: النافذة 503px عند 1001 فيبقى للمستند 89px) */
@media(max-width:1100px){
  .rwx .hero .w{grid-template-columns:1fr;gap:36px}
}
@media(max-width:1000px){
  .rwx .ggrid{grid-template-columns:1fr;gap:36px}
  .rwx .grid3,.rwx .grid4,.rwx .use{grid-template-columns:1fr 1fr}
  .rwx .strip .w{grid-template-columns:1fr 1fr}
  /* الرابط بين الخطوات معناه صفّ واحد متتابع — يسقط مع سقوط الصفّ */
  .rwx .step .arrow{display:none}
  .rwx .step::before{content:none}
  /* تبويبات الدليل: صفّ ملتفّ 2×2 بدل صفّ يُمرَّر بلا دلالة (كما في لوحة التحكّم؛ كان تبويبان من أربعة خارج الشاشة عند 390) */
  .rwx .gtoc{position:static;flex-direction:row;flex-wrap:wrap}
  .rwx .gti{flex:1 1 calc(50% - 4px);min-width:0}
  .rwx .chain{border-radius:0;margin:0}
}
@media(max-width:900px){
  .rwx section{padding:64px 0}
  .rwx .w{padding:0 20px}
  .rwx .strip .w{padding:0 20px}
  .rwx .fin{padding:64px 0}
  .rwx .hero{padding:40px 0 64px}
}
@media(max-width:640px){
  /* 200px: عرض «ابدأ المراجعة الآن» بسهمه؛ أقلّ منه يكسر نصّ الزرّ على سطرين عند 390 */
  .rwx .hero .btns > a{flex:1;min-width:200px}
}
@media(max-width:620px){
  .rwx .grid3,.rwx .grid4,.rwx .use,.rwx .strip .w{grid-template-columns:1fr}
  .rwx .cbody{grid-template-columns:1fr;min-height:0}
  .rwx .cpane-ver{border-inline-end:none;border-bottom:1px solid var(--line)}
  .rwx .cpane-cmt{border-inline-start:none;border-top:1px solid var(--line)}
  /* اللوحة صارت عمودًا واحدًا فاتّسعت: نصوصها المقروءة تصعد إلى 12px — وحروف الصور الرمزية المفردة معها (كانت 10.5px) */
  .rwx .collab .cbar .t,.rwx .collab .live,.rwx .pane-h,.rwx .vmeta b,.rwx .vmeta span,.rwx .vbadge,.rwx .doc-mada,.rwx .cmt .cn,.rwx .cmt .tag,.rwx .cmt p,.rwx .typing{font-size:12px}
  .rwx .doc-t{font-size:13.5px}
  .rwx .doc-p{font-size:12.5px}
  .rwx .vav,.rwx .cmt .cav,.rwx .nb{font-size:12px}
  .rwx .stepper{flex-direction:column;gap:6px}
  .rwx .stepper .link{width:2px;height:26px;min-width:0;margin:0}
  .rwx .stepper .node{width:auto}
  /* تبويبات الدليل: عمود واحد على الهاتف فتظهر الأربعة كاملةً */
  .rwx .gti{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .rwx .rv{opacity:1;transform:none;transition:none}
  .rwx .collab .live b,.rwx .vbadge i,.rwx .vbadge::after,.rwx .mk.pulse,.rwx .nb,.rwx .cmt,.rwx .typing,.rwx .typing b,.rwx .stepper .dot,.rwx .stepper .link::after{animation:none}
  .rwx .nb{transform:none}
  .rwx .cmt,.rwx .typing{opacity:1}
}