/* ══════════ عُقد design tokens — هوية Oqod v2 (اعتُمدت 2026-07-22 من تصميم المالك) ══════════
         المصدر: مشروع Claude Design «Oqod Landing / Oqod Tour». الخط Alexandria، الأزرق #2369f5
         بدل التيل، الداكن #0a1832/#0b1b3f بدل الكحلي القديم. أسماء المتغيرات القديمة أُبقيت
         كأسماء دلالية (navy/teal) بقيمها الجديدة كي تتحول كل المكونات دفعة واحدة. */
      :root {
        /* الأزرق الأساسي وتدرجاته */
        --teal: #2369f5;           /* primary blue (كان التيل) */
        --teal-2: #3984ff;         /* lighter blue */
        --blue-deep: #164ecb;      /* deep blue — نصوص وروابط على الفاتح (AA ≈7:1) */
        --teal-text: #164ecb;
        --grad-blue: linear-gradient(135deg, #164ecb, #3172db);  /* AA: الأبيض ‎٤٫٦٠‎ عند الطرف الفاتح (كان ‎#3984ff‎ = ‎٣٫٥٥‎) */
        /* الداكن */
        --navy: #0b1b3f;
        --navy-2: #0e2350;
        --navy-3: #16305f;
        --navy-ink: #060d1f;
        --dark: #0a1832;
        /* الأحبار والرمادية */
        --ink: #091a3c;
        --muted: #5e6b86;         /* AA: ‎٤٫٨٥‎ على --lightblue (كان ‎#62708c‎ = ‎٤٫٥١‎، مطابقٌ بلا هامش) */
        --muted-2: #33436b;
        /* (أُزيل --faint: #93a0b8 — كان يعطي ‎٢٫٣٨‎ على --lightblue، وأيّ قيمة تبلغ AA
           تصير أدكن من --muted فتنتفي فائدته كطبقةٍ أفتح. مواضعه الثلاثة صارت --muted.) */
        --gray-d: #33436b;
        --white: #ffffff;
        /* الأرضيات والحدود */
        --lightblue: #f2f7ff;      /* أرضية المقاطع المتناوبة */
        --chip: #eaf2ff;           /* خلفية الشارات والأيقونات */
        --line: #dce5f3;
        --line-soft: #e6edf8;
        --wa: #25d366;
        --cyan: #18a8ff;
        --maxw: 1240px;
        --radius: 20px;
        --radius-lg: 26px;
        --radius-media: 22px;
        /* إيقاع التباعد — قيمة واحدة تحكم الحشو الرأسي بين الأقسام في كل صفحات الموقع.
           لا تُكتب مسافة رأسية بين الأقسام في أي ملف آخر؛ تُقرأ من هنا. */
        --sec-y: clamp(64px, 9vw, 104px);
        /* رأس الصفحة الداخلية: يعوّض الترويسة اللاصقة. كان مكتوبًا `padding-top: 120px`
           نصًّا في ١٥ موضعًا قبل توحيده هنا. */
        --page-head-y: clamp(96px, 11vw, 128px);
        /* حلقة التركيز الموحّدة (لوحة المفاتيح) */
        --focus-ring: 0 0 0 3px rgba(35, 105, 245, 0.45);
        --focus-ring-dark: 0 0 0 3px rgba(125, 176, 255, 0.7);
        --shadow: 0 2px 6px rgba(19, 59, 128, 0.05), 0 16px 40px -18px rgba(19, 59, 128, 0.14);
        --shadow-lg: 0 40px 84px -30px rgba(19, 59, 128, 0.28);
        --shadow-blue: 0 14px 32px rgba(35, 105, 245, 0.25);
        /* أحبار على الأرضيات الداكنة */
        --blue-soft: #7db0ff;
        --ink-on-dark: #9db4dd;
        --accent-on-dark: #5797ff;  /* AA: ‎٤٫٨٢‎ على navy — --teal-2 (#3984ff) يعطي ‎٣٫٩٢‎ نصًّا */
        --ink-on-dark-soft: #cdd9f0;
      }

      /* ══════════ ألوان محاكاة الواجهات الخارجية (واتساب / SMS) ══════════
         ليست ألوان هوية عُقد — هي ألوان تطبيقات أخرى نحاكيها في مشاهد الهاتف.
         تُجمع هنا لأن قاعدة «لا لون مكتوب نصًّا داخل أي صفحة» تسري عليها أيضًا؛
         الفارق أنها لا تُشتقّ من الهوية ولا تتغيّر معها. */
      :root {
        --mock-wa-green: #075e54;
        --mock-wa-out: #d9fdd3;
        --mock-sms-bg: #f2f2f7;
        --mock-sms-day: #e2e2e9;
        --mock-sms-day-ink: #8a94a6;
        --mock-sms-input: #e9e9ee;
        --mock-sms-send: #0b74d1;
        --mock-note-lock: #fff8e1;
        --mock-note-lock-ink: #8a7333;
        --mock-note-info: #d7ebff;
        --mock-note-info-ink: #1461b8;
        --mock-price: #118345;
        --mock-meta: #6b7a8d;
        --mock-body-ink: #33414f;
        --mock-promo-a: #ffe9c7;
        --mock-promo-b: #ffdca6;
        --mock-promo-ink: #a8895a;
        --mock-cta-bg: #ece5dd;
      }
      /* زاوية الحد الدوار لأزرار الجولة (متصفحات @property؛ وإلا يبقى الحد ثابتًا) */
      @property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      /* الترويسة لاصقة بارتفاع 72-75px، وكل هدف مرساة كان يحسب scroll-margin-top: 0
         فيقف عنوان القسم خلفها عند القفز من التذييل أو من رابط /#faq. */
      :target, [id] { scroll-margin-top: 96px; }
      /* تفضيل تقليل الحركة: القاعدة كانت توقف الحركات (animation) وحدها، وتترك عشرات
         الانتقالات (transition) والرفعات عند التحويم تعمل. تُحيَّد كلها هنا. */
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
        }
        .reveal { opacity: 1 !important; transform: none !important; }
      }

      body {
        margin: 0;
        font-family: "Alexandria", "Segoe UI", system-ui, sans-serif;
        color: var(--ink);
        background: radial-gradient(circle at 84% 4%, rgba(62, 128, 255, 0.09), transparent 26%),
          linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
        line-height: 1.8;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
      }
      ::selection { background: #cfe0ff; color: var(--navy); }
      ::-webkit-scrollbar { height: 10px; width: 10px; }
      ::-webkit-scrollbar-thumb { background: #cdd9ee; border-radius: 20px; }
      ::-webkit-scrollbar-track { background: transparent; }

      a { color: inherit; text-decoration: none; }
      img { max-width: 100%; display: block; }
      h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 700; letter-spacing: -0.5px; }
      p { margin: 0; }
      /* الأرقام والمقاطع اللاتينية بخط Inter، اتجاه LTR معزول */
      .num, .en { font-family: "Inter", sans-serif; font-feature-settings: "tnum"; direction: ltr; unicode-bidi: isolate; }

      .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
      .section { padding: var(--sec-y) 0; }
      /* رأس الصفحة الداخلية — مكوّن مشترك واحد لكل صفحة لا هيرو، بدل النسخة المكرّرة. */
      .section.page-head { padding-top: var(--page-head-y); }
      /* المقطع المتناوب (أرضية فاتحة) — كان `style="background: var(--lightblue)"` في ٥ مواضع. */
      .section.alt { background: var(--lightblue); }
      /* مقطع يلي مقطعًا بلا فاصل رأسي (يتبع الإحصاءات مباشرة). */
      .section.tight-top { padding-top: 0; }
      /* صفّ إجراء موسّط أسفل مقطع — كان `style="margin-top: clamp(...); text-align: center"`. */
      .section-cta { margin-top: clamp(28px, 4vw, 40px); text-align: center; }

      /* ══════════ التركيز بلوحة المفاتيح (موحّد لكل عنصر تفاعلي) ══════════ */
      :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }
      .btn:focus-visible, .nav-login:focus-visible, .menu-btn:focus-visible,
      .nav-dd-btn:focus-visible, .tour-prev:focus-visible { box-shadow: var(--focus-ring); }
      .qa summary:focus-visible { box-shadow: var(--focus-ring); border-radius: 16px; }
      .cf-field input:focus-visible, .cf-field textarea:focus-visible { box-shadow: var(--focus-ring); }
      /* على الأرضيات الداكنة تلزم حلقة أفتح كي تُرى */
      .hero :focus-visible, footer :focus-visible, .cta-band :focus-visible,
      .demo-band :focus-visible, .tour-shell :focus-visible { box-shadow: var(--focus-ring-dark); }
      /* كان المحدِّد `.tour` ولا وجود لهذا الصنف — فصفحة الجولة كلّها بلا مؤشّر تركيز. */

      /* ══════════ العلامة: فقاعة المحادثة + «عُقد» ══════════ */
      .brand { display: flex; align-items: center; gap: 11px; min-height: 44px; }
      .brand-mark {
        width: 42px; height: 42px; border-radius: 13px; flex: none;
        background: linear-gradient(150deg, #16305f, #0a1832);
        box-shadow: 0 9px 20px rgba(11, 27, 63, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
        display: grid; place-items: center;
      }
      .brand-mark.on-dark { background: linear-gradient(150deg, #3984ff, #164ecb); box-shadow: 0 9px 22px rgba(35, 105, 245, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
      .brand-word { font-size: 25px; font-weight: 700; color: var(--navy); letter-spacing: -0.5px; }
      .brand-word.on-dark { color: #fff; }
      /* الشعارات القديمة (PNG) لم تعد تُستخدم في الكروم؛ الفافيكون يُستبدل لاحقًا */
      .lg { display: none; }

      /* ══════════ eyebrow / العناوين ══════════ */
      .eyebrow {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 8px 15px; border-radius: 999px;
        background: var(--chip); border: 1px solid #d6e4ff;
        font-size: 14px; font-weight: 600; color: var(--blue-deep);
        margin-bottom: 20px;
      }
      .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-2); box-shadow: 0 0 10px rgba(57, 132, 255, 0.8); }
      .eyebrow.on-dark { background: rgba(57, 132, 255, 0.12); border-color: rgba(57, 132, 255, 0.28); color: #7db0ff; }
      .section-head { max-width: 720px; margin: 0 auto clamp(40px, 6vw, 56px); text-align: center; }
      h1.sec,
      h2.sec { font-size: clamp(30px, 4.6vw, 48px); font-weight: 700; line-height: 1.22; letter-spacing: -1.2px; color: var(--navy); text-wrap: balance; }
      h2.sec.on-dark { color: #fff; }
      .lead { font-size: clamp(16px, 2.1vw, 19px); color: var(--muted); margin-top: 16px; line-height: 1.9; }
      .lead.on-dark { color: #9db4dd; }

      /* ══════════ الأزرار ══════════ */
      .btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 10px;
        font-family: inherit; font-weight: 600; font-size: 16px;
        padding: 14px 26px; border-radius: 14px; cursor: pointer;
        border: 1px solid transparent; transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
        white-space: nowrap; position: relative; overflow: hidden;
      }
      .btn:active { transform: translateY(1px); }
      .btn .ico { width: 20px; height: 20px; }
      /* معطّل: يُسقط كل تفاعل بصري بلا استثناء لأي نوع زر */
      .btn[disabled], .btn[aria-disabled="true"] {
        opacity: 0.55; cursor: not-allowed; pointer-events: none;
        transform: none !important; box-shadow: none !important; filter: grayscale(0.3);
      }
      .btn[disabled]::after, .btn[aria-disabled="true"]::after { display: none; }
      /* قيد التنفيذ: دوّارة قبل النص، ويمنع النقر المكرّر */
      .btn.is-loading { pointer-events: none; opacity: 0.85; }
      .btn.is-loading::before {
        content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%;
        border: 2px solid currentColor; border-top-color: transparent;
        animation: btnSpin 0.7s linear infinite;
      }
      @keyframes btnSpin { to { transform: rotate(360deg); } }
      @media (prefers-reduced-motion: reduce) { .btn.is-loading::before { animation-duration: 2.4s; } }
      /* الأساسي: تدرج أزرق مع لمعة تمر */
      .btn-teal { background: var(--grad-blue); color: #fff; box-shadow: var(--shadow-blue); isolation: isolate; }
      .btn-teal::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.35) 50%, transparent 68%); transform: translateX(-130%); animation: btnShine 3.4s ease-in-out infinite; pointer-events: none; }
      /* اللمعة اللانهائية داخل ترويسة لاصقة = عنصر متحرّك دائم في مجال نظر القارئ
         على كل صفحة. تبقى على أزرار المحتوى وتتوقف في الكروم. */
      .topbar .btn-teal::after { display: none; }
      .btn-teal:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(35, 105, 245, 0.36); }
      @keyframes btnShine { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }
      /* الحبر الداكن */
      .btn-navy { background: var(--navy); color: #fff; box-shadow: 0 14px 26px -12px rgba(11, 27, 63, 0.5); }
      .btn-navy:hover { background: var(--navy-3); transform: translateY(-2px); }
      /* المحيطي */
      .btn-ghost { background: #fff; color: var(--navy); border-color: var(--line); }
      .btn-ghost:hover { border-color: var(--teal); color: var(--blue-deep); transform: translateY(-2px); }
      .btn-ghost.on-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.28); }
      .btn-ghost.on-dark:hover { border-color: var(--teal-2); color: #fff; background: rgba(57, 132, 255, 0.1); }
      .btn-sm { padding: 10px 18px; font-size: 15px; border-radius: 12px; }
      /* حبّة الجولة: حد conic دوار (توقيع هوية Oqod) */
      .btn-pill {
        border-radius: 50px; background: #0a1832; color: #fff; border: none; overflow: visible;
        padding: 14px 28px;
      }
      .btn-pill::before {
        content: ""; position: absolute; inset: -3px; border-radius: 50px; padding: 3px;
        background: conic-gradient(from var(--border-angle), #3984ff, #0a1832, #3984ff, #0a1832, #3984ff);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
        animation: borderRotate 3s linear infinite; z-index: -1;
      }
      .btn-pill:hover { background: var(--teal); }
      @keyframes borderRotate { to { --border-angle: 360deg; } }

      /* ══════════ الترويسة (فاتحة زجاجية) ══════════ */
      header.topbar {
        position: sticky; top: 0; z-index: 60;
        display: flex; align-items: center; justify-content: space-between; gap: 20px;
        padding: 13px clamp(16px, 4vw, 44px);
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: saturate(160%) blur(14px);
        border-bottom: 1px solid var(--line-soft);
      }
      .topbar nav { display: flex; align-items: center; gap: 8px; }
      .topbar nav a {
        color: var(--muted-2); font-size: 15px; font-weight: 500; padding: 8px 12px 9px;
        background-image: linear-gradient(var(--teal), var(--teal));
        background-size: 0 2px; background-position: right calc(100% - 2px); background-repeat: no-repeat;
        transition: background-size 0.25s ease, color 0.2s ease; border-radius: 4px;
      }
      .topbar nav a:hover { color: var(--navy); background-size: calc(100% - 24px) 2px; }
      /* الصفحة الحالية: خطّ ثابت تحت الرابط — لم يكن في التنقّل أي مؤشّر لموضع الزائر. */
      .topbar nav a.on { color: var(--navy); font-weight: 600; background-size: calc(100% - 24px) 2px; }
      .nav-dd-btn.on { color: var(--navy); font-weight: 600; }
      .topbar nav.open a.on { background-image: none; background: var(--chip); }
      .topbar .top-cta { display: flex; align-items: center; gap: 12px; }
      /* قائمة «الحلول» المنسدلة */
      .nav-dd { position: relative; }
      .nav-dd::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: 10px; }
      .nav-dd-btn {
        display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
        font-family: inherit; color: var(--muted-2); font-size: 15px; font-weight: 500; padding: 8px 12px 9px; border-radius: 4px;
        min-height: 44px;
      }
      .nav-dd-btn:hover, .nav-dd.open .nav-dd-btn { color: var(--navy); }
      .nav-dd-btn svg { transition: transform 0.25s ease; }
      .nav-dd.open .nav-dd-btn svg { transform: rotate(180deg); }
      .nav-dd-menu {
        /* الجسر: كانت فجوة 10px بين الزرّ والقائمة تُغلقها بمجرّد مرور المؤشّر فيها. */
        position: absolute; top: 100%; margin-top: 10px; inset-inline-start: 0; min-width: 250px;
        background: #fff; border: 1px solid var(--line); border-radius: 16px;
        box-shadow: 0 24px 60px rgba(19, 59, 128, 0.16); padding: 8px; display: none; z-index: 65;
      }
      .nav-dd.open .nav-dd-menu { display: block; animation: ddIn 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
      @keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
      .nav-dd-menu a { display: block; padding: 10px 14px; border-radius: 11px; color: var(--muted-2); font-size: 14.5px; font-weight: 500; background-image: none; }
      .nav-dd-menu a:hover { background: #f5f9ff; color: var(--navy); }
      .nav-dd-menu .dd-all { color: var(--blue-deep); font-weight: 700; border-top: 1px dashed var(--line-soft); margin-top: 6px; border-radius: 0 0 11px 11px; }
      /* لا قاعدة :hover هنا: الفتح بالتحويم صار من JS كي تبقى حالة واحدة يطابقها
         aria-expanded دائمًا (كانت آليتان مستقلتان تتنازعان). */
      .nav-login {
        color: var(--navy); font-size: 15px; font-weight: 600; padding: 10px 18px;
        border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color 0.2s, box-shadow 0.2s;
      }
      .nav-login:hover { border-color: var(--teal); color: var(--blue-deep); }
      .nav-login-mobile { display: none; }
      .menu-btn { display: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; cursor: pointer; color: var(--navy); min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
      .scroll-line { position: fixed; top: 0; inset-inline-start: 0; height: 3px; background: var(--grad-blue); z-index: 70; width: 0; }

      /* رابط التجاوز */
      .skip-link { position: absolute; inset-inline-start: 8px; top: -48px; z-index: 80; background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 10px; font-weight: 600; font-size: 14px; transition: top 0.15s ease; }
      .skip-link:focus { top: 0; }

      /* ══════════ الهيرو (داكن — تدرج Oqod الأزرق) ══════════ */
      .hero {
        position: relative; overflow: hidden; color: #fff;
        background: radial-gradient(circle at 82% 14%, rgba(57, 132, 255, 0.18), transparent 42%),
          radial-gradient(circle at 14% 82%, rgba(35, 105, 245, 0.12), transparent 46%),
          linear-gradient(160deg, #0b1b3f 0%, #091124 55%, #060d1f 100%);
        padding: clamp(56px, 8vw, 96px) 0 clamp(64px, 8vw, 96px);
      }
      .hero-field { position: absolute; inset: 0; z-index: 1; opacity: 0.5; width: 100%; height: 100%; }
      .hero-field .dash { stroke: var(--teal-2); stroke-width: 1.4; fill: none; opacity: 0.5; stroke-dasharray: 6 8; animation: flow 8s linear infinite; }
      .hero-field .node { fill: var(--teal-2); }
      .hero-field .node.b { fill: #4d6bb3; }
      @keyframes flow { to { stroke-dashoffset: -140; } }
      .hero-fade { position: absolute; inset: auto 0 0 0; height: 120px; background: linear-gradient(transparent, rgba(6, 13, 31, 0.9)); z-index: 2; }
      .hero .wrap { position: relative; z-index: 3; }
      /* عمود النصّ كان 544px مقابل 560px للبصريات — أضيق من عمود الزينة في هيرو يقوده
         النصّ، فينكسر عنوان 58px إلى أربعة أسطر ويبدأ اللون الأزرق على كلمة يتيمة.
         minmax(0,…) لازم على عمود البصريات: بدونه يفرض عرض .orbits الأدنى مقاسَ المسار
         مهما كانت نسبة fr. */
      .hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(32px, 4vw, 48px); align-items: center; }
      .hero-kicker {
        display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
        color: #7db0ff; background: rgba(57, 132, 255, 0.12); border: 1px solid rgba(57, 132, 255, 0.28);
        border-radius: 999px; padding: 8px 15px; margin-bottom: 26px;
      }
      .hero-kicker span { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-2); box-shadow: 0 0 12px var(--teal-2); }
      .hero h1 { font-size: clamp(32px, 5.4vw, 58px); font-weight: 700; line-height: 1.3; letter-spacing: -1.2px; text-wrap: pretty; min-height: 2.65em; }
      /* آلة الكتابة تعمل عند ≥920px وحدها، وهناك يصير العنوان أربعة أسطر. min-height
         المحجوزة (سطران) كانت تترك القفزة تدفع .sub وزرّي الدعوة 148px أثناء الكتابة. */
      /* 3.9em = ثلاثة أسطر × 1.3 — الارتفاع النهائي الفعلي بعد توسيع عمود النصّ.
         (كان 5.2em حين كان العمود 544px ويكسر إلى أربعة، فصار يحجز سطرًا ميتًا.) */
      @media (min-width: 920px) { .hero h1 { min-height: 3.9em; } }
      .hero h1 .accent { color: var(--teal-2); }
      .hero .sub { font-size: clamp(16px, 2.2vw, 19px); color: #9db4dd; margin-top: 22px; max-width: 52ch; line-height: 1.9; }
      .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
      .hero-note { margin-top: 18px; font-size: 14px; color: #97a7ca; display: flex; align-items: center; gap: 8px; }
      .hero-note svg { color: var(--wa); flex-shrink: 0; }

      /* مؤشر الكتابة (هيرو الرئيسية) */
      .type-caret { display: inline-block; width: 3px; height: 0.9em; background: var(--teal-2); margin-inline-start: 3px; vertical-align: text-bottom; animation: caretBlink 1s step-end infinite; }
      @keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

      /* ══════════ الحلقات المدارية (هيرو الرئيسية) ══════════ */
      .orbits { position: relative; width: min(100%, 470px); aspect-ratio: 1; margin-inline: auto; }
      /* التوسيط بخاصية translate المستقلة لا داخل transform: كيفريم الدوران يكتب
         transform كاملًا فيمحو translate(-50%,-50%)، فكانت الحلقات تنزلق قطريًّا
         خارج مركزها بدل أن تدور. */
      .orbit { position: absolute; top: 50%; left: 50%; translate: -50% -50%; border-radius: 50%; }
      .orbit::before {
        content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid transparent;
        background: linear-gradient(180deg, rgba(57, 132, 255, 0) 0%, rgba(57, 132, 255, 0.9) 43%, rgba(57, 132, 255, 0) 100%) border-box;
        -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
      }
      .orbit.o1 { width: 100%; height: 100%; animation: spinCCW 60s linear infinite; }
      .orbit.o2 { width: 78%; height: 78%; animation: spinCW 48s linear infinite; }
      .orbit.o3 { width: 55%; height: 55%; animation: spinCCW 34s linear infinite; }
      .orbit .sat { position: absolute; transform: translate(-50%, -50%); }
      .orbit.o1 .counter-spin { animation: spinCW 60s linear infinite; }
      .orbit.o2 .counter-spin { animation: spinCCW 48s linear infinite; }
      .orbit.o3 .counter-spin { animation: spinCW 34s linear infinite; }
      .sat-chip {
        display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px;
        background: #12234a; color: #fff; box-shadow: 0 0 30px rgba(57, 132, 255, 0.75), 0 8px 24px rgba(0, 0, 0, 0.35);
      }
      .sat-chip.g { box-shadow: 0 0 30px rgba(37, 211, 102, 0.7), 0 8px 24px rgba(0, 0, 0, 0.35); }
      .sat-chip.c { box-shadow: 0 0 30px rgba(24, 168, 255, 0.7), 0 8px 24px rgba(0, 0, 0, 0.35); }
      .sat-chip svg { width: 28px; height: 28px; }
      /* شارة مدارية نصّية (سلة / زد) — بدل نمط لون وحجم مضمّن لكل واحدة. */
      .sat-word { color: #fff; font-weight: 700; font-size: 17px; }
      .orbit-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; }
      .orbit-core b { display: block; font-family: "Inter", sans-serif; font-size: clamp(38px, 4vw, 56px); font-weight: 700; line-height: 1; direction: ltr; }
      .orbit-core span { display: block; font-size: 15px; font-weight: 600; margin-top: 8px; color: #9db4dd; }
      @keyframes spinCW { to { transform: rotate(360deg); } }
      @keyframes spinCCW { to { transform: rotate(-360deg); } }
      /* العناصر المدارية تلغي دوران الأم كي تبقى منتصبة: يُدار الموضع لا المحتوى */

      .hero-ticker { margin-top: clamp(44px, 6vw, 72px); position: relative; z-index: 3; }

      /* ══════════ شريط التكاملات المتحرك ══════════ */
      .ticker-wrap { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); mask: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); }
      .ticker { display: flex; align-items: center; gap: 52px; width: max-content; animation: tickerMove 26s linear infinite; direction: ltr; }
      .ticker span { font-weight: 700; font-size: 20px; color: rgba(255, 255, 255, 0.5); white-space: nowrap; flex: 0 0 auto; }
      .ticker .en { font-family: "Inter", sans-serif; }
      .ticker-note { text-align: center; color: rgba(255, 255, 255, 0.6); font-size: 13px; font-weight: 600; margin-bottom: 20px; }
      @keyframes tickerMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
      .ticker-wrap.on-light .ticker span { color: #8fa1c4; }
      .ticker-wrap.on-light + .ticker-note, .ticker-note.on-light { color: var(--muted); }

      /* ══════════ mock اللوحة (بقايا الهيرو القديم — تبقى صالحة للطوارئ) ══════════ */
      .mock { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 22px; position: relative; color: var(--ink); }
      .mock-head { display: flex; align-items: center; justify-content: space-between; }
      .mock-head .ttl { font-size: 13px; color: var(--muted); font-weight: 600; }
      .mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(35, 105, 245, 0.16); }
      .mock-big { font-size: clamp(34px, 5vw, 44px); font-weight: 700; color: var(--navy); letter-spacing: -1px; margin-top: 8px; }
      .mock-big small { font-size: 20px; font-weight: 600; color: var(--muted); }
      .mock-sub { color: var(--blue-deep); font-weight: 600; font-size: 15px; margin-top: 2px; }
      .bars { display: flex; align-items: flex-end; gap: 9px; height: 96px; margin: 20px 0 6px; }
      .bars i { flex: 1; background: var(--grad-blue); border-radius: 7px 7px 4px 4px; opacity: 0.92; }
      .mock-rows { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 14px; display: grid; gap: 10px; }
      .mrow { display: flex; align-items: center; gap: 10px; font-size: 14px; }
      .mrow .pill { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; font-size: 15px; }
      .mrow .pill.wa { background: #dcfce7; }
      .mrow .pill.cart { background: var(--chip); }
      .mrow .pill.tag { background: #e7ecf7; }
      .mrow .t { color: var(--ink); font-weight: 600; }
      .mrow .m { color: var(--muted); margin-inline-start: auto; font-size: 12px; }


      /* ══════════ البطاقات ══════════ */
      .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
      /* ثمانية أجنحة في ثلاثة أعمدة = صفّ أخير بخانة فارغة. ستة مسارات: كل بطاقة
         تمتدّ اثنين، وآخر بطاقتين تمتدّ كلٌّ منهما ثلاثة فيملآن الصفّ. */
      .grid-3.suites { grid-template-columns: repeat(6, 1fr); }
      .grid-3.suites > * { grid-column: span 2; }
      .grid-3.suites > :nth-last-child(-n + 2) { grid-column: span 3; }
      @media (max-width: 920px) { .grid-3.suites { grid-template-columns: repeat(2, 1fr); } .grid-3.suites > *, .grid-3.suites > :nth-last-child(-n + 2) { grid-column: auto; } }
      .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
      .pillar {
        background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius);
        padding: 28px 24px; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1); position: relative; overflow: hidden;
        box-shadow: 0 10px 30px -18px rgba(19, 59, 128, 0.12);
      }
      .pillar:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -24px rgba(19, 59, 128, 0.28); border-color: #bcd3ff; }
      .pillar .ic {
        width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
        background: var(--chip); margin-bottom: 18px; color: var(--teal);
      }
      .pillar .ic svg { width: 26px; height: 26px; stroke: var(--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
      .pillar h3, .pillar h2 { font-size: 19px; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.4; }
      .pillar p { font-size: 14.5px; color: var(--muted); }
      .grid-4 .pillar { padding: 26px 20px; }
      .grid-4 .pillar h3 { font-size: 17px; }
      .grid-4 .pillar p { font-size: 14px; }
      [id^="suite-"] { scroll-margin-top: 84px; }
      /* بطاقة قابلة للنقر: ستّ بطاقات قطاعات وبطاقات المقالات روابط، وكانت تبدو
         مطابقة تمامًا لبطاقات العرض الساكنة — لا شيء يقول إنها تُنقر. */
      a.pillar { display: block; text-decoration: none; color: inherit; padding-bottom: 46px; }
      a.pillar::after {
        content: ""; position: absolute; inset-inline-start: 24px; bottom: 22px;
        width: 22px; height: 22px; border-radius: 50%;
        background: var(--chip) no-repeat center / 11px 11px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23164ecb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 5l-7 7 7 7'/%3E%3C/svg%3E");
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.28s;
      }
      a.pillar:hover::after { transform: translateX(-5px); background-color: #d8e7ff; }
      @media (prefers-reduced-motion: reduce) { a.pillar:hover::after { transform: none; } }

      /* فاصل شعري بين مقطعين متجاورين بالأرضية نفسها — تسلسل الألوان المتناوبة لا يتيح
         تبديل أرضية هذا المقطع بلا كسر التناوب بعده. */
      .section.divided > .wrap { border-top: 1px solid var(--line-soft); padding-top: var(--sec-y); }
      .sectors-more { text-align: center; color: var(--muted); font-size: 16px; margin-top: 28px; }
      .sectors-more a { color: var(--blue-deep); font-weight: 700; }
      .sectors-more a:hover { text-decoration: underline; }

      /* ══════════ الخطوات ══════════ */
      .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
      .step { position: relative; padding: 28px 22px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); }
      .step .num {
        width: 42px; height: 42px; border-radius: 13px; background: var(--grad-blue); color: #fff;
        font-weight: 700; font-size: 18px; display: grid; place-items: center; margin-bottom: 16px; font-family: "Inter", sans-serif;
        box-shadow: 0 10px 22px rgba(35, 105, 245, 0.3);
      }
      .step h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
      .step p { color: var(--muted); font-size: 14px; }

      /* ══════════ القنوات ══════════ */
      .channels { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
      .chan { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border: 1px solid var(--line-soft); border-radius: 100px; background: #fff; font-weight: 600; color: var(--navy); box-shadow: var(--shadow); }
      /* نقطة القناة: اللون من صنف لا من نمط مضمّن. */
      .chan .d { width: 10px; height: 10px; border-radius: 50%; }
      .chan .d.wa { background: var(--wa); }
      .chan .d.sms { background: var(--teal); }
      .chan .d.mail { background: var(--navy); }
      .chan .d.push { background: var(--teal-2); }
      .chan small { color: var(--muted); font-weight: 500; } /* AA: --faint يعطي 2.64 */
      /* صفّ القنوات صار ذيلًا داخل مقطع التكاملات لا مقطعًا مستقلًّا. */
      .grid-3 + .channels { margin-top: clamp(26px, 3.5vw, 38px); }

      /* شريط عريض: شريحة تستحق الذكر لا مقطعًا كامل الارتفاع. */
      .band {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(18px, 3vw, 34px);
        align-items: center; margin-top: clamp(28px, 4vw, 40px);
        padding: clamp(22px, 3vw, 32px) clamp(24px, 3.5vw, 38px);
        background: var(--lightblue); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
      }
      .band h3 { font-size: 20px; font-weight: 700; color: var(--navy); line-height: 1.45; }
      .band p { margin-top: 8px; font-size: 15px; color: var(--muted); line-height: 1.85; max-width: 62ch; }
      .band-cta { display: flex; flex-wrap: wrap; gap: 10px; }
      @media (max-width: 820px) { .band { grid-template-columns: 1fr; } }

      /* ══════════ الأسعار ══════════ */
      .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1120px; margin: 0 auto; }
      .plan { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow); position: relative; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
      .plan:hover { transform: translateY(-4px); }
      /* الباقة الموصى بها كانت آخر خانة (أقصى اليسار في RTL = آخر ما تصله العين)
         وتمييزها حدٌّ ٢px وشارة فقط. وزن حقيقي: ارتفاع وحشو وطبقة أعلى — وتتصدّر
         التكديس على الجوال. */
      .plan.featured { border: 2px solid var(--teal); box-shadow: 0 34px 68px -22px rgba(35, 105, 245, 0.4); transform: translateY(-10px); padding: 42px 34px; z-index: 1; }
      .plan.featured:hover { transform: translateY(-14px); }
      @media (max-width: 920px) { .plan.featured { order: -1; transform: none; } .plan.featured:hover { transform: translateY(-4px); } }
      .plan .badge { position: absolute; top: -14px; inset-inline-start: 30px; background: var(--grad-blue); color: #fff; font-size: 13px; font-weight: 700; padding: 5px 15px; border-radius: 100px; box-shadow: 0 8px 18px rgba(35, 105, 245, 0.35); }
      .plan .pname { font-size: 18px; font-weight: 700; color: var(--navy); }
      .plan .price { font-size: clamp(36px, 5vw, 44px); font-weight: 700; color: var(--navy); margin: 10px 0 2px; letter-spacing: -1px; }
      .plan .price small { font-size: 16px; font-weight: 500; color: var(--muted); }
      .plan .price-live { font-size: 17px; font-weight: 600; color: var(--blue-deep); margin: 12px 0 2px; line-height: 1.5; }
      .plan ul { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 12px; }
      .plan li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted-2); font-size: 15px; }
      .plan li svg { color: var(--wa); flex-shrink: 0; margin-top: 3px; }
      .plan .btn { width: 100%; }
      .price-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 22px; }

      /* ══════════ التواصل ══════════ */
      .contact-form { max-width: 680px; margin: 0 auto; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 36px); box-shadow: var(--shadow); display: grid; gap: 16px; }
      .cf-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
      .cf-field { display: grid; gap: 6px; }
      .cf-field > span { font-size: 14px; font-weight: 600; color: var(--navy); }
      .cf-field > span small { font-weight: 400; color: var(--muted); }
      /* 16px حدٌّ أدنى: أقل منه يجعل iOS Safari يكبّر الصفحة تلقائيًّا عند التركيز على الحقل. */
      .cf-field input, .cf-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 16px; color: var(--ink); background: #f8faff; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
      .cf-field input:focus, .cf-field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(35, 105, 245, 0.14); background: #fff; }
      .cf-field textarea { resize: vertical; min-height: 110px; }
      /* مصيدة البوتات: تبقى في الشجرة وقابلة للتعبئة (هذا جوهر المصيدة) لكنها غير مرئية.
         كانت `left: -9999px` فتدفع المستند ٩٦٢٣px يسارًا في RTL — عرض التمرير يصير ١١٠٥٤px
         ولا يخفيه إلا `overflow-x: hidden` على body. نمط الإخفاء بالقصّ لا يُنشئ تجاوزًا أصلًا. */
      .cf-hp {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0;
        font-size: 16px; /* يرث ١٣٫٣px من الوكيل فيقع تحت عتبة الـ١٦px التي تمنع تكبير iOS */
      }
      .cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
      .cf-note { font-size: 14px; margin: 0; }
      .cf-note.ok { color: #0e8a4d; }
      .cf-note.bad { color: #c0392b; }
      .contact-channels { max-width: 680px; margin: 22px auto 0; text-align: center; color: var(--muted); font-size: 15px; }
      .contact-channels a { color: var(--blue-deep); font-weight: 600; }

      /* ══════════ الأسئلة ══════════ */
      .faq { max-width: 800px; margin: 0 auto; display: grid; gap: 12px; }
      /* بلا overflow:hidden: كان يقصّ حلقة التركيز على summary فتختفي تمامًا.
         الزوايا تُقصّ بـclip-path الذي لا يمنع ظلّ الحلقة من الظهور خارجًا. */
      .qa { border: 1px solid var(--line-soft); border-radius: 16px; background: #fff; box-shadow: 0 6px 20px -14px rgba(19, 59, 128, 0.12); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
      .qa:hover { border-color: #bcd3ff; box-shadow: 0 12px 28px -18px rgba(19, 59, 128, 0.24); }
      .qa[open] { border-color: #bcd3ff; }
      .qa summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 17px; color: var(--navy); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
      .qa summary::-webkit-details-marker { display: none; }
      .qa summary .chev { transition: transform 0.2s ease; color: var(--teal); flex-shrink: 0; }
      .qa[open] summary .chev { transform: rotate(180deg); }
      .qa .ans { padding: 0 22px 20px; color: var(--muted); font-size: 15px; line-height: 1.9; }

      /* ══════════ الختام CTA ══════════ */
      /* المقطع الأخير قبل التذييل الداكن: حشوه السفلي كان يترك شريطًا أبيض بينهما
         يُقرأ كخطأ عرض لا كتصميم. */
      .cta-section { position: relative; padding-bottom: 0; }
      .cta-band {
        position: relative; overflow: hidden;
        background: radial-gradient(circle at 78% 8%, rgba(57, 132, 255, 0.2), transparent 50%),
          linear-gradient(160deg, #0b1b3f 0%, #0a1832 60%, #060d1f 100%);
        border-radius: 30px; padding: clamp(44px, 6vw, 64px) clamp(28px, 5vw, 48px); text-align: center; color: #fff;
        box-shadow: var(--shadow-lg); border: 1px solid rgba(57, 132, 255, 0.18);
      }
      /* inset-inline-start:50% + translateX(-50%) يتوسّط في LTR ويُزيح بعرض كامل في
         RTL (اتجاه المحور ينقلب). التوسيط بالهوامش التلقائية محايد للاتجاه. */
      .cta-band .glow { position: absolute; top: -40%; inset-inline: 0; margin-inline: auto; transform: none; width: 560px; height: 400px; background: radial-gradient(circle, rgba(57, 132, 255, 0.25), transparent 70%); z-index: 1; }
      .cta-band > * { position: relative; z-index: 2; }
      .cta-band h2 { font-size: clamp(26px, 4vw, 38px); color: #fff; }
      .cta-band p { color: #9db4dd; font-size: 18px; margin: 14px auto 28px; max-width: 560px; }
      .cta-band .hero-cta { justify-content: center; }

      /* ══════════ الفوتر (داكن) ══════════ */
      footer { background: linear-gradient(180deg, #0b1b3f, #0a1832); color: #fff; position: relative; overflow: hidden; padding: 64px 0 40px; }
      footer .glow { position: absolute; top: -50%; inset-inline: 0; margin-inline: auto; transform: none; width: 600px; height: 400px; background: radial-gradient(circle, rgba(57, 132, 255, 0.16), transparent 70%); z-index: 1; }
      footer .wrap { position: relative; z-index: 2; }
      /* أعمدة معنونة: صفٌّ واحد من ١٤ رابطًا كان يساوي بين «الجولة» و«سياسة الخصوصية». */
      .foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: clamp(26px, 4vw, 48px); align-items: start; }
      .foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 320px; }
      .foot-pitch { color: var(--ink-on-dark); font-size: 14px; line-height: 1.85; }
      .foot-h { color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 6px; } /* بلا letter-spacing: يفكّ وصل الحروف العربية */
      .foot-col ul { list-style: none; margin: 0; padding: 0; }
      /* هدف لمس ≥44px بالحشو لا بتكبير الخط — الروابط القصيرة تحتاج حشوًا أفقيًّا أيضًا. */
      .foot-col a { color: var(--ink-on-dark); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-inline: 4px; margin-inline-start: -4px; }
      .foot-col a:hover { color: #fff; }
      .foot-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 20px; margin-top: clamp(30px, 4vw, 44px); }
      .foot-copy { color: var(--ink-on-dark); font-size: 13px; }
      .foot-copy .web-link { color: var(--teal-2); font-family: "Inter", sans-serif; font-weight: 600; }
      .foot-legal { color: var(--ink-on-dark); font-size: 13px; margin-top: 6px; }
      @media (max-width: 820px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } .foot-brand { grid-column: 1 / -1; max-width: none; } }
      @media (max-width: 460px) { .foot-grid { grid-template-columns: 1fr; gap: 22px; } }
      .foot-legal a { color: #c3d3f2; font-weight: 600; }
      .foot-legal a:hover { color: var(--teal-2); }

      /* ══════════ الكشف ══════════ */
      .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
      .reveal.in { opacity: 1; transform: none; }
      .motion-on .reveal { transition: none; }
      /*
        حُذفت هنا قاعدة كانت تُخفي عنوان الهيرو ونصّه وزرّيه بـvisibility:hidden منذ أول
        رسم، ولا ترفع الإخفاء إلا بعد سلسلة: gsap ← ScrollTrigger ← motion.js من CDN.
        أي بطء (لا فشل) في الشبكة كان يترك عنصر LCP أبيض حتى يفتح الحارس عند ٤ ثوانٍ.
        البديل بلا مقابل: motion.js يستعمل fromTo، وGSAP يكتب حالة البداية لحظة إنشاء
        الجدول الزمني — فالإخفاء يحدث عند وجود المحرّك فعلًا، لا قبله على أمل وصوله.
      */

      /* ══════════ النثر الطويل (المقالات والشروحات والقانونية) ══════════
         كان النثر سبع قواعد فقط: عرض 820px عند خط 16px ⇒ ~١٠٣ حرفًا في السطر (المريح ٦٥-٧٥)،
         وh2 عند 22px أي ١٫٣٧× حجم النص فقط ⇒ لا تسلسل يُرى، ولا فاصل بصري في ٣٦٤٦px ارتفاعًا.
         ما يلي نظام قراءة كامل: مقياس، ومقاس سطر، وإيقاع، وعلامات قوائم، ومصطلحات. */
      .prose {
        max-width: 40rem;              /* ≈ ٧٠ حرفًا عربيًّا عند 17px */
        margin: 0 auto;
        color: var(--muted-2);
        font-size: 1.0625rem; /* = 17px، وبالrem كي ينمو العمود مع تكبير خط المتصفح */
        line-height: 1.95;
        text-wrap: pretty;
      }
      /* فقرة الاستهلال قبل أول عنوان: تُقرأ كوعد المقال. */
      .prose > p:first-child { font-size: 19px; line-height: 1.85; color: var(--ink); }
      .prose > * + * { margin-top: 18px; }
      /* القائمة تتبع جملتها التمهيدية المنتهية بنقطتين — لا تُقرأ كتلة مستقلة. */
      .prose p + ul, .prose p + ol { margin-top: 10px; }

      /* عنوان القسم: مرساة بصرية كل قسم — شارة قصيرة فوقه تكسر جدار النص. */
      .prose h2 {
        color: var(--navy); font-size: clamp(23px, 2.6vw, 27px); font-weight: 700;
        line-height: 1.35; letter-spacing: -0.4px;
        margin-top: 56px; margin-bottom: 4px; scroll-margin-top: 96px; position: relative;
      }
      .prose h2::before {
        content: ""; display: block; width: 44px; height: 3px; border-radius: 3px;
        background: var(--grad-blue); margin-bottom: 16px;
      }
      .prose h2 + p, .prose h2 + ul, .prose h2 + ol { margin-top: 12px; }
      .prose h3 {
        color: var(--navy); font-size: 20px; font-weight: 700; line-height: 1.45;
        margin-top: 34px; margin-bottom: 2px; scroll-margin-top: 96px;
      }
      .prose h3 + p, .prose h3 + ul, .prose h3 + ol { margin-top: 10px; }

      /* القوائم: علامات من الهوية بدل نقاط المتصفح. */
      .prose ul, .prose ol { padding: 0; margin-top: 18px; list-style: none; display: grid; gap: 12px; }
      .prose li { position: relative; padding-inline-start: 30px; margin: 0; }
      .prose ul > li::before {
        content: ""; position: absolute; inset-inline-start: 8px; top: 0.72em;
        width: 7px; height: 7px; border-radius: 50%; background: var(--teal-2);
      }
      /* قوائم مرقّمة = خطوات منتج في أدلة «خطوة بخطوة»؛ الرقم يستحق أن يُرى. */
      .prose ol { counter-reset: step; }
      .prose ol > li { padding-inline-start: 44px; min-height: 30px; }
      .prose ol > li::before {
        /* أرقام مشرقية كبقية أرقام الموقع (٢٤/٧، ١٤ يومًا) لا لاتينية. */
        counter-increment: step; content: counter(step, arabic-indic);
        position: absolute; inset-inline-start: 0; top: 0.1em;
        width: 28px; height: 28px; border-radius: 9px;
        background: var(--chip); color: var(--blue-deep);
        /* Inter لا يحوي الأرقام المشرقية (U+0660–0669) فتسقط إلى خط النظام ويختلف
           شكل أهم عنصر في الشروحات بين ويندوز وماك. Alexandria يحويها. */
        font-family: inherit; font-size: 15px; font-weight: 700;
        display: grid; place-items: center;
      }
      /* نمط «مصطلح: شرحه» المتكرر في الأدلة — الطرف الأول يصير مصطلحًا لا نصًّا عريضًا. */
      .prose li > strong:first-child { color: var(--navy); font-weight: 700; }
      .prose strong { color: var(--navy); font-weight: 600; }

      /* المقاطع اللاتينية داخل نص عربي: شارة خفيفة تفصلها بصريًّا بلا صخب. */
      .prose .en {
        background: var(--chip); border-radius: 6px; padding: 1px 6px;
        font-size: 0.92em; color: var(--muted-2); font-weight: 500; /* لا بلون الرابط: كانت تُقرأ روابط */
      }
      /* داخل عنوان أو رابط: بلا شارة وبلون المحيط — وإلا بدا المقطع اللاتيني رابطًا في عنوان كحلي. */
      .prose a .en, .prose h2 .en, .prose h3 .en { background: none; padding: 0; color: inherit; }

      .prose a {
        color: var(--blue-deep); font-weight: 600;
        text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
        text-decoration-color: #7ba4f0; transition: text-decoration-color 0.18s ease;
      }
      .prose a:hover { text-decoration-color: var(--blue-deep); }

      /* ملاحظة داخل النثر (متاحة للمحرّر عند الحاجة). */
      .prose .note {
        margin-top: 24px; padding: 16px 20px; border-inline-start: 3px solid var(--teal-2);
        background: var(--lightblue); border-radius: 0 14px 14px 0; font-size: 16px;
      }

      /* ══════════ تخطيط المقال: نثر + فهرس محتويات لاصق ══════════ */
      /* غلاف واحد يحكم حافّة صفحة المقال كلّها — رأسًا ونثرًا وفهرسًا وتنقّلًا وخاتمة.
         كانت أربع حواف مختلفة على الصفحة نفسها: الرأس 1090px، والتخطيط 980px،
         والخاتمة 820px، والنثر 640px — فتبدو الكتل غير محاذاة رأسيًّا.
         العرض 928px = مقاس النثر 40rem + عمود الفهرس 232px + الفجوة 56px، فيخرج عمود
         النثر بمقاسه المقصود بالضبط بدل أن يتمدّد إلى عرض العمود. */
      .article-shell { max-width: 928px; margin: 0 auto; }
      .article { max-width: 40rem; margin: 0 auto; }
      .article.has-toc { max-width: none; }
      .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 56px; align-items: start; }
      .article-layout .prose { margin: 0; max-width: none; }
      .toc { position: sticky; top: 96px; font-size: 14px; }
      .toc-title { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 12px; } /* AA: --faint=2.64؛ وبلا letter-spacing/uppercase — كلاهما بلا معنى في العربية ويفكّ الوصل */
      .toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-inline-start: 2px solid var(--line-soft); }
      .toc a { display: flex; align-items: center; min-height: 44px; padding: 6px 14px; color: var(--muted); line-height: 1.6; border-inline-start: 2px solid transparent; margin-inline-start: -2px; transition: color 0.18s ease, border-color 0.18s ease; }
      .toc a:hover { color: var(--navy); }
      .toc a.on { color: var(--blue-deep); font-weight: 600; border-inline-start-color: var(--teal); }
      /* فهرس مضمّن (الصفحات القانونية): بطاقة ثابتة فوق النص لا عمودًا لاصقًا. */
      /* صفحة نصّها هو متنها: الرأس على مقاس النثر نفسه فتتطابق الحواف. */
      .prose-page .section-head { max-width: 40rem; }
      .toc.inline { position: static; max-width: 40rem; margin: 0 auto clamp(26px, 3vw, 34px); padding: 18px 20px; border: 1px solid var(--line-soft); border-radius: 16px; background: #fff; box-shadow: 0 10px 30px -22px rgba(19, 59, 128, 0.25); }
      .toc.inline ol { border-inline-start: 0; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); display: grid; gap: 0 18px; }
      .toc.inline a { padding: 4px 0; border-inline-start: 0; margin-inline-start: 0; }

      @media (max-width: 1024px) {
        .article.has-toc { max-width: 40rem; }
        .article-layout { grid-template-columns: 1fr; gap: 28px; }
        .toc { position: static; order: -1; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 16px; background: #fff; }
        .toc ol { border-inline-start: 0; }
        .toc a { padding: 4px 0; border-inline-start: 0; margin-inline-start: 0; }
      }

      /* فتات المسار */
      .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }
      /* هدف لمس ≥44px بلا إطالة صفّ الفتات بصريًّا (الحشو رأسي والسطر يبقى مضغوطًا). */
      .crumbs a { color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; }
      .crumbs a:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }
      .crumbs .sep { color: var(--muted); } /* AA: ‎٢٫٣٨‎ بـ--faint */
      .crumbs [aria-current] { color: var(--navy); font-weight: 600; }

      /* تنقّل السابق/التالي بين المقالات */
      .article-nav { margin: clamp(40px, 5vw, 56px) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
      .article-nav a { display: flex; flex-direction: column; gap: 5px; padding: 18px 20px; border: 1px solid var(--line-soft); border-radius: 16px; background: #fff; box-shadow: 0 10px 30px -22px rgba(19, 59, 128, 0.3); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
      .article-nav a:hover { border-color: #bcd3ff; transform: translateY(-3px); box-shadow: 0 24px 44px -26px rgba(19, 59, 128, 0.35); }
      .article-nav .dir { font-size: 12.5px; font-weight: 700; color: var(--blue-deep); }
      .article-nav .ttl { font-size: 15.5px; font-weight: 600; color: var(--navy); line-height: 1.5; }
      .article-nav a.next { text-align: end; align-items: flex-end; }
      @media (max-width: 620px) { .article-nav { grid-template-columns: 1fr; } }
      .legal-note { max-width: 820px; margin: 38px auto 0; padding: 14px 20px; text-align: center; background: var(--chip); border: 1px dashed #bcd3ff; border-radius: 14px; color: var(--muted-2); font-size: 14px; font-weight: 600; }
      .feature-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
      .feature-list li { display: flex; gap: 8px; align-items: flex-start; color: var(--muted-2); font-size: 14.5px; }
      .feature-list li svg { color: var(--wa); flex-shrink: 0; margin-top: 4px; }

      /* ══════════ بطاقة مقال ══════════
         كان الفهرسان يستعيران .pillar — البطاقة العامة نفسها المستخدمة للمميزات والقطاعات،
         فبدا المقال كميزة. هذه بطاقة مقال: غلاف ← عنوان ← مقتطف ← تعريف، بتسلسل مقال. */
      .post-card {
        display: flex; flex-direction: column; background: #fff;
        border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden;
        box-shadow: 0 10px 30px -18px rgba(19, 59, 128, 0.12);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s, border-color 0.3s;
      }
      .post-card:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -24px rgba(19, 59, 128, 0.28); border-color: #bcd3ff; }
      .post-card .cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--chip); }
      .post-card .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
      .post-card:hover .cover img { transform: scale(1.05); }
      .post-card .body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
      .post-card h2, .post-card h3 { font-size: 18.5px; font-weight: 700; color: var(--navy); line-height: 1.5; margin: 0; }
      .post-card p { font-size: 14.5px; color: var(--muted); margin: 0; }
      .post-card .post-meta { margin-top: auto; padding-top: 6px; }
      /* شبكة تتكيّف مع العدد: بعد اقتطاع المقال المميّز يبقى اثنان، وشبكة ثلاثية
         ثابتة كانت تترك عمودًا فارغًا وتضغط البطاقتين إلى الثلث بلا سبب. */
      .post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
      @media (prefers-reduced-motion: reduce) { .post-card:hover .cover img { transform: none; } }

      /* المقال المميّز: أول مقال في المدونة يأخذ وزنًا أكبر — ثلاث بطاقات متطابقة بلا تسلسل. */
      .post-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; margin-bottom: 20px; }
      .post-feature .cover { aspect-ratio: auto; height: 100%; min-height: 260px; }
      .post-feature .body { padding: clamp(24px, 3vw, 38px); gap: 12px; justify-content: center; }
      .post-feature h2 { font-size: clamp(21px, 2.6vw, 27px); line-height: 1.4; }
      .post-feature p { font-size: 15.5px; line-height: 1.85; }
      .post-feature .kicker { font-size: 12.5px; font-weight: 700; color: var(--blue-deep); }
      @media (max-width: 820px) { .post-feature { grid-template-columns: 1fr; } .post-feature .cover { min-height: 0; aspect-ratio: 16 / 10; } }

      /* ══════════ مسار الشروحات ══════════
         الشروحات الخمسة ليست خمسة أنداد: ربط سلة وربط زد بديلان لخطوة واحدة، ثم ربط القناة،
         ثم أول رحلة — والخامس مسار مستقل لمن لا متجر له. الشبكة المتساوية كانت تُخفي هذا. */
      .path { display: grid; gap: clamp(22px, 3vw, 30px); max-width: 940px; margin: 0 auto; }
      .path-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: clamp(16px, 2.5vw, 26px); align-items: start; position: relative; }
      .path-step::before {
        content: ""; position: absolute; inset-inline-start: 25px; top: 56px; bottom: calc(-1 * clamp(22px, 3vw, 30px));
        width: 2px; background: linear-gradient(180deg, var(--line), transparent); pointer-events: none;
      }
      .path-step:last-child::before { display: none; }
      .path-node {
        width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
        background: var(--grad-blue); color: #fff; font-family: "Inter", sans-serif;
        font-size: 21px; font-weight: 700; box-shadow: var(--shadow-blue); position: relative; z-index: 1;
      }
      .path-head { margin-bottom: 14px; }
      .path-head h2 { font-size: 20px; font-weight: 700; color: var(--navy); line-height: 1.45; }
      .path-head p { font-size: 14.5px; color: var(--muted); margin-top: 4px; }
      /* min() يمنع المسار الأدنى 240px من تجاوز عمود أضيق منه على الشاشات الصغيرة. */
      .path-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
      /* بطاقة شرح مدمجة: الغلاف شريط جانبي لا صورة كاملة — القائمة تبقى ممسوحة بنظرة. */
      /* أيقونة لا صورة: ثلاثة شروحات تتشارك الأصل نفسه (ربط سلة/زد/أول رحلة)، وصورتان
         متطابقتان متجاورتان في قائمة مدمجة تُقرأ كخلل. الأيقونة المكرّرة طبيعية — الصورة لا. */
      .guide-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; padding: 15px 17px; background: #fff; border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: 0 8px 24px -18px rgba(19, 59, 128, 0.16); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
      .guide-card:hover { transform: translateY(-3px); border-color: #bcd3ff; box-shadow: 0 22px 44px -26px rgba(19, 59, 128, 0.3); }
      .guide-card .ic { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; background: var(--chip); flex: none; }
      .guide-card .ic svg { width: 26px; height: 26px; stroke: var(--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
      .guide-card:hover .ic { background: #dfebff; }
      .guide-card .body { display: flex; flex-direction: column; gap: 4px; justify-content: center; min-width: 0; }
      .guide-card h3 { font-size: 15.5px; font-weight: 700; color: var(--navy); line-height: 1.55; margin: 0; }
      .guide-card p { font-size: 13.5px; color: var(--muted); margin: 0; }
      /* المسار البديل: منفصل بصريًّا كي لا يُقرأ خطوةً رابعة. */
      .path-aside { margin-top: 8px; padding-top: clamp(24px, 3vw, 32px); border-top: 1px dashed var(--line); }

      /* المدونة والشروحات */
      .post-meta { color: var(--muted); font-size: 13.5px; margin-top: 10px; }
      /* سطر تعريف المقال كان بلون الـlead ووزنه فيُقرأ سطرًا رابعًا من الوصف لا
         بيانات وصفية. شكلٌ مختلف (شارة) لا حجمٌ أكبر، ومسافة تُغلق الرأس. */
      .section-head .post-meta { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 7px 16px; border: 1px solid var(--line-soft); border-radius: 999px; background: #fff; font-size: 13px; color: var(--muted); }
      .article-foot { margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

      /* 404 */
      .nf-section { text-align: center; }
      .nf-code .num { font-size: clamp(64px, 12vw, 120px); font-weight: 700; color: var(--teal); letter-spacing: -4px; line-height: 1; }
      .nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

      /* ══════════ مشاهد الهاتف والمحاكاة (مشتركة: /tour/ + صفحات القطاعات) ══════════ */
      .phone-scene { transform-style: preserve-3d; transform: rotateY(-15deg) rotateX(4deg); flex: 0 0 auto; }
      .phone-float { animation: floatY 6s ease-in-out infinite; }
      @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
      .phone { position: relative; width: 320px; height: 650px; border-radius: 46px; background: #0b141a; padding: 12px; box-shadow: 0 50px 90px rgba(0, 0, 0, 0.55), 0 0 60px rgba(57, 132, 255, 0.22), inset 0 0 0 2px rgba(255, 255, 255, 0.06); }
      .phone .notch { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 120px; height: 26px; background: #0b141a; border-radius: 0 0 16px 16px; z-index: 3; }
      .phone .scr { width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #e7ded4; display: flex; flex-direction: column; }
      .wa-head { background: #075e54; padding: 30px 16px 12px; display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
      .wa-head .av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(150deg, #306fd6, #164ecb); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 17px; flex-shrink: 0; }
      .wa-head .who { flex: 1; text-align: start; }
      .wa-head .who b { color: #fff; font-weight: 600; font-size: 15px; display: block; }
      .wa-head .who small { color: #cfeee0; font-size: 12px; }
      .chat { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; overflow: hidden; background-image: radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px); background-size: 18px 18px; }
      .day { align-self: center; background: #d3e3d0; color: #46654e; font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 8px; }
      .m-in { align-self: flex-start; max-width: 82%; background: #fff; color: #0b141a; font-size: 14px; line-height: 1.6; padding: 9px 13px; border-radius: 12px; border-top-right-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); animation: msgIn 0.5s ease both; }
      .m-out { align-self: flex-end; max-width: 82%; background: #d9fdd3; color: #0b141a; font-size: 14px; line-height: 1.6; padding: 9px 13px; border-radius: 12px; border-top-left-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); animation: msgIn 0.5s ease both; }
      .m-note { align-self: center; font-size: 11px; font-weight: 700; padding: 5px 14px; border-radius: 8px; animation: msgIn 0.5s ease both; background: #d7ebff; color: #1461b8; }
      .m-card { align-self: flex-start; width: 80%; background: #fff; border-radius: 12px; border-top-right-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); overflow: hidden; animation: msgIn 0.55s ease both; }
      /* فقاعات المحادثة لا تنكمش: كانت flex children فتُضغط عند امتلاء الشاشة
         فيُقصّ محتواها بصمت (اسم المنتج وسعره) بدل أن يظهر الامتلاء. */
      .chat > * { flex: none; }
      .m-card.compact .ph { height: 44px; }
      .m-card.compact .bd { padding: 8px 12px 10px; }
      /* صورة حقيقية بدل مربّع خطوط قطرية في لحظة الإقناع (اقتراح المنتج). الأصل
         موجود في المانيفست ويُستعمل في صفحات أخرى — بلا توليد جديد. */
      .m-card .ph.photo { padding: 0; background: none; overflow: hidden; }
      .m-card .ph.photo img { width: 100%; height: 100%; object-fit: cover; }
      .m-card .ph { height: 96px; display: grid; place-items: center; font-family: "Inter", sans-serif; font-size: 10px; color: #9aa6b8; letter-spacing: 0.5px; background-image: repeating-linear-gradient(45deg, #eef1f5 0 10px, #e2e7ee 10px 20px); }
      .m-card .bd { padding: 9px 12px; }
      .wa-input { flex-shrink: 0; padding: 9px 12px; background: #f0f0f0; display: flex; align-items: center; gap: 8px; }
      .wa-input .f { flex: 1; background: #fff; border-radius: 20px; padding: 9px 14px; color: var(--muted); font-size: 13px; text-align: start; } /* AA: #99a=2.80 و--mock-meta=4.38 */
      .wa-input .s { width: 38px; height: 38px; border-radius: 50%; background: #075e54; display: grid; place-items: center; }
      @keyframes msgIn { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
      .sms .scr { background: var(--mock-sms-bg); }
      /* أنماط فقاعات المحاكاة — كانت تُكتب ألوانها نصًّا في وسم /tour/ (نسخة لكل خطوة). */
      .sms .chat { background: var(--mock-sms-bg); }
      .sms .day { background: var(--mock-sms-day); color: var(--mock-sms-day-ink); }
      .sms .wa-input { background: var(--mock-sms-input); }
      .sms .wa-input .s { background: var(--mock-sms-send); }
      .m-note.is-lock { background: var(--mock-note-lock); color: var(--mock-note-lock-ink); font-weight: 400; }
      /* --mock-price مضبوطٌ على الأبيض (‎٤٫٨٢‎)؛ فوق فقاعة واتساب الخضراء يهبط إلى ‎٤٫٣٥‎. */
      .m-note.is-paid { background: var(--mock-wa-out); color: #107b41; }
      .m-note.is-info { background: var(--mock-note-info); color: var(--mock-note-info-ink); }
      .m-card .title { font-weight: 600; font-size: 14px; }
      .m-card .price { color: var(--mock-price); font-weight: 700; font-size: 14px; margin-top: 2px; }
      .m-card .meta { color: var(--mock-meta); font-size: 12px; margin-top: 3px; }
      .m-card .pay-label { color: var(--mock-meta); font-size: 12px; }
      .m-card .pay { margin-top: 8px; background: linear-gradient(135deg, var(--mock-price), var(--wa)); color: #fff; text-align: center; font-size: 14px; font-weight: 700; padding: 9px; border-radius: 9px; }
      .m-card .ph.promo { background-image: repeating-linear-gradient(45deg, var(--mock-promo-a) 0 10px, var(--mock-promo-b) 10px 20px); color: var(--mock-promo-ink); }
      .m-card .promo-t { font-weight: 700; font-size: 14px; }
      .m-card .promo-b { color: var(--mock-body-ink); font-size: 13px; margin-top: 3px; line-height: 1.6; }
      .m-card .promo-cta { margin-top: 9px; text-align: center; background: var(--mock-cta-bg); color: var(--mock-wa-green); font-size: 13px; font-weight: 700; padding: 8px; border-radius: 8px; }
      .sms-head { background: #1f2833; padding: 30px 16px 12px; display: flex; align-items: center; gap: 11px; flex-shrink: 0; text-align: center; }
      .sms-head b { color: #fff; font-weight: 600; font-size: 15px; display: block; }
      .sms-head small { color: #9fb0c3; font-size: 12px; }
      .sms-m { align-self: flex-start; max-width: 84%; background: #e5e5ea; color: #111; font-size: 14px; line-height: 1.7; padding: 10px 14px; border-radius: 18px; border-top-right-radius: 5px; animation: msgIn 0.5s ease both; }
      /* عرض ثابت 336px كان يتجاوز الشاشة عند 320px. */
      .flowcard { width: min(336px, 100%); border-radius: 30px; background: linear-gradient(180deg, rgba(20, 36, 74, 0.9), rgba(9, 17, 38, 0.92)); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 50px 90px rgba(0, 0, 0, 0.5), 0 0 60px rgba(57, 132, 255, 0.2); padding: 26px 24px; }
      .flowcard .hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
      .flowcard .hd b { color: #fff; font-size: 16px; font-weight: 700; }
      .flowcard .live { display: inline-flex; align-items: center; gap: 6px; color: #25d366; font-size: 12px; font-weight: 600; }
      .flowcard .live i { width: 8px; height: 8px; border-radius: 50%; background: #25d366; box-shadow: 0 0 8px #25d366; }
      .fnode { display: flex; align-items: center; gap: 13px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(57, 132, 255, 0.4); border-radius: 16px; padding: 13px 15px; }
      .fnode .fi { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: rgba(57, 132, 255, 0.16); }
      .fnode small { display: block; color: #7db0ff; font-size: 12px; font-weight: 600; }
      .fnode b { color: #fff; font-size: 15px; font-weight: 600; }
      .fnode.g { border-color: rgba(37, 211, 102, 0.45); }
      .fnode.g .fi { background: rgba(37, 211, 102, 0.16); }
      .fnode.g small { color: #6fe0a0; }
      .fwire { position: relative; width: 2px; height: 26px; margin: 4px auto; background: rgba(125, 176, 255, 0.3); overflow: hidden; }
      .fwire i { position: absolute; left: 0; width: 2px; height: 9px; border-radius: 2px; background: #7bf0a8; animation: flowMove 1.6s linear infinite; }
      @keyframes flowMove { 0% { top: -10px; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
      .dots { display: flex; gap: 8px; margin-bottom: 24px; }
      .dots i { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.16); width: 22px; transition: width 0.35s, background 0.35s, box-shadow 0.35s; }
      .dots i.on { background: var(--teal-2); width: 44px; box-shadow: 0 0 12px rgba(57, 132, 255, 0.7); }
      .demo-note { color: #8999b6; font-size: 12.5px; margin: 0 0 20px; }
      .step-view { animation: stepIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
      .step-view .k { font-size: 15px; font-weight: 700; color: var(--accent-on-dark); }
      .step-view h2, .step-view h3 { font-size: clamp(28px, 4vw, 42px); font-weight: 700; color: #fff; line-height: 1.3; margin: 14px 0 0; letter-spacing: -0.5px; }
      .step-view p { color: var(--ink-on-dark); font-size: 18px; line-height: 1.9; margin: 18px 0 0; }
      .step-view p .en { color: var(--ink-on-dark-soft); font-weight: 600; }
      @keyframes stepIn { from { opacity: 0; transform: perspective(1200px) rotateY(-18deg) translateX(34px); } to { opacity: 1; transform: perspective(1200px) rotateY(0) translateX(0); } }
      .tour-controls { display: flex; align-items: center; gap: 14px; margin-top: 40px; flex-wrap: wrap; }
      /* الخانة محجوزة دائمًا: كان الزرّ يظهر/يختفي فيقفز «التالي» من تحت المؤشّر
         ويحلّ «السابق» مكانه — نقرتان في الموضع نفسه تُقدّم ثم تُرجع. */
      .tour-prev { display: inline-flex; visibility: hidden; pointer-events: none; align-items: center; gap: 8px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); color: #c9d6ef; font-family: inherit; font-size: 16px; font-weight: 600; padding: 13px 24px; border-radius: 50px; cursor: pointer; transition: border-color 0.25s, color 0.25s, background 0.25s; }
      .tour-prev.on { visibility: visible; pointer-events: auto; }
      .tour-prev:hover { border-color: var(--teal-2); color: #fff; }
      /* قسم المحاكاة الداكن في صفحات القطاعات */
      .demo-band { background: radial-gradient(circle at 78% 8%, rgba(57, 132, 255, 0.15), transparent 50%), linear-gradient(160deg, #0a1a3f 0%, #080f24 100%); }
      .demo-flex { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 72px); flex-wrap: wrap; perspective: 1400px; }
      .demo-flex .tour-panel { flex: 0 1 460px; min-width: 300px; }
      .demo-band .lead.on-dark { margin-inline: auto; }
      .demo-band .tour-controls { justify-content: flex-start; }
      @media (max-width: 1024px) { .demo-band .tour-controls { justify-content: center; } }
      @media (max-width: 1024px) {
        .demo-flex { gap: 30px; }
        .demo-flex .tour-panel { flex: 1 1 100%; text-align: center; }
        .demo-flex .dots, .demo-flex .tour-controls { justify-content: center; }
      }
      @media (max-width: 640px) {
        .phone-scene { transform: none; }
        .phone { width: 290px; height: 590px; }
        .step-view h1, .step-view h3 { font-size: 26px; }
        .step-view p { font-size: 16px; }
      }
      @media (prefers-reduced-motion: reduce) {
        .phone-float, .fwire i { animation: none !important; }
      }

      /* ══════════ الصور — مكوّنات مشتركة (كل مصادرها من images.manifest.mjs) ══════════ */

      /* غطاء يملأ أباه: خلفيات الهيرو وشريط الختام. picture/img يرثان أبعاد الأب. */
      picture { display: contents; }
      .cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

      /* الهيرو حين يحمل صورة خلفية: حجاب متدرّج أكثف جهة النص (اليمين في RTL). */
      /* كثافة الحجاب: كانت 0.95→0.88→0.58 فتكاد تمحو الصورة. خُفّفت إلى 0.92→0.84→0.42،
         والكثافة تبقى عالية عند حافّة النص (اليمين في RTL) وتخفّ حيث الحلقات المدارية فقط. */
      .hero.has-bg .hero-scrim {
        position: absolute; inset: 0; z-index: 1;
        background: linear-gradient(to left, rgba(6, 13, 31, 0.92) 0%, rgba(6, 13, 31, 0.84) 42%, rgba(9, 17, 38, 0.42) 100%),
          radial-gradient(circle at 18% 42%, rgba(11, 27, 63, 0.62), transparent 58%);
      }
      html[dir="ltr"] .hero.has-bg .hero-scrim {
        background: linear-gradient(to right, rgba(6, 13, 31, 0.92) 0%, rgba(6, 13, 31, 0.84) 42%, rgba(9, 17, 38, 0.42) 100%),
          radial-gradient(circle at 82% 42%, rgba(11, 27, 63, 0.62), transparent 58%);
      }
      /* على الجوال النص يغطي العرض كلّه (عمود واحد موسّط) ⇒ لا مكان لتدرّج يخفّ. */
      @media (max-width: 1024px) {
        .hero.has-bg .hero-scrim,
        html[dir="ltr"] .hero.has-bg .hero-scrim {
          background: linear-gradient(180deg, rgba(6, 13, 31, 0.9) 0%, rgba(6, 13, 31, 0.86) 55%, rgba(6, 13, 31, 0.92) 100%);
        }
      }

      /* إطار صورة عام: نسبة محفوظة، حواف الهوية، حد خفيف. */
      .media {
        position: relative; overflow: hidden; border-radius: var(--radius-media);
        background: var(--chip); box-shadow: var(--shadow-lg); border: 1px solid var(--line-soft);
      }
      .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .media.on-dark { border-color: rgba(255, 255, 255, 0.14); }

      /* رأس الصفحة الداخلية بصورة: نص يمينًا وصورة يسارًا (RTL)، وعمود واحد على الجوال. */
      .page-head-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 52px); align-items: center; }
      .page-head-grid .section-head { margin: 0; max-width: none; text-align: start; }
      .page-head-grid .lead { margin-inline: 0; }
      .page-head .media { aspect-ratio: 3 / 2; }

      /* شريط زخرفي عريض يكسر جدار النص (القانونية و404). */
      .strip { position: relative; overflow: hidden; border-radius: var(--radius-media); aspect-ratio: 21 / 9; max-height: 200px; margin: 0 auto clamp(28px, 4vw, 40px); max-width: 820px; }
      .strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.75) 100%); }

      /* غلاف بطاقة (المدونة والشروحات) — داخل a.pillar فيرث تفاعله. */
      .pillar .card-cover { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 3 / 2; margin: -4px 0 16px; background: var(--chip); }
      .pillar .card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
      .pillar:hover .card-cover img { transform: scale(1.045); }
      @media (prefers-reduced-motion: reduce) { .pillar:hover .card-cover img { transform: none; } }

      /* خلفية شريط الختام: الصورة تحت طبقة الكحلي نفسها التي كانت تدرّجًا صرفًا. */
      .cta-band.has-bg > .cover-img { border-radius: 30px; opacity: 0.5; }
      .cta-band.has-bg::after {
        content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 30px;
        background: linear-gradient(160deg, rgba(11, 27, 63, 0.9) 0%, rgba(10, 24, 50, 0.92) 60%, rgba(6, 13, 31, 0.95) 100%);
      }

      /* ══════════ حالات الرسائل (فارغ / خطأ / نجاح) ══════════ */
      .notice {
        display: flex; align-items: flex-start; gap: 12px; max-width: 680px; margin: 0 auto;
        padding: 16px 20px; border-radius: 16px; font-size: 15px; line-height: 1.8;
        border: 1px solid var(--line); background: #fff; color: var(--muted-2);
      }
      .notice svg { flex: none; width: 20px; height: 20px; margin-top: 4px; }
      .notice.is-empty { border-style: dashed; background: var(--lightblue); color: var(--muted); }
      .notice.is-error { border-color: #f0c4bb; background: #fdf3f1; color: #a3341f; }
      .notice.is-ok { border-color: #b9e6cd; background: #f1fbf5; color: #0b6b3f; }
      /* حقل نموذج غير صالح — يُوسم بـaria-invalid فينتقل الحد واللون معًا (لا لون وحده). */
      .cf-field input[aria-invalid="true"], .cf-field textarea[aria-invalid="true"] {
        border-color: #d4674d; background: #fdf6f4;
      }
      .cf-field .cf-err { font-size: 13px; font-weight: 600; color: #a3341f; }

      /* ══════════ طيّ التنقّل ══════════
         عرض المحتوى الفعلي للترويسة (علامة ١٠٣ + روابط ٥١٥ + إجراءات ٢٣٧ + حشو وفجوات)
         ≈ ٩٨٠px. كانت القائمة تُطوى عند ٦٢٠px فقط، فبين ٦٢١px و٩٨٠px تتجاوز الترويسة
         عرض الشاشة — ١٦٧px تجاوز عند ٧٦٨px على ٢٥ صفحة. الطيّ الآن قبل أن تضيق. */
      @media (max-width: 1060px) {
        .topbar nav { display: none; }
        .menu-btn { display: inline-flex; }
        .topbar nav.open {
          display: flex; position: absolute; top: calc(100% + 8px); inset-inline: 12px;
          flex-direction: column; align-items: stretch; gap: 4px;
          background: #fff; border: 1px solid var(--line); border-radius: 18px;
          box-shadow: 0 20px 50px rgba(19, 59, 128, 0.14); padding: 12px;
          /* اللوحة absolute داخل ترويسة sticky ⇒ لا يجرّها تمرير الصفحة. بلا سقف
             ارتفاع كانت تُقصّ خارج الشاشة عند فتح «الحلول» فتصير آخر روابطها
             («تواصل» و«دخول») غير قابلة للوصول إطلاقًا. */
          max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain;
        }
        .topbar nav.open a { padding: 12px 14px; width: 100%; border-radius: 12px; background-image: none; }
        .topbar nav.open a:hover { background: #f5f9ff; }
        /* المنسدلة داخل قائمة الجوال: تتحول لقائمة سطرية */
        .topbar nav.open .nav-dd { width: 100%; }
        .topbar nav.open .nav-dd-btn { width: 100%; justify-content: space-between; padding: 12px 14px; font-size: inherit; }
        .topbar nav.open .nav-dd-menu { position: static; min-width: 0; box-shadow: none; border: none; padding: 0 8px 4px; }
        .topbar nav.open .nav-dd:not(.open) .nav-dd-menu { display: none; }
      }

      /* ══════════ المتجاوب ══════════ */
      @media (max-width: 1024px) {
        .page-head-grid { grid-template-columns: 1fr; gap: 28px; }
        .page-head-grid .section-head { text-align: center; margin-inline: auto; max-width: 720px; }
        .page-head-grid .lead { margin-inline: auto; }
        .hero-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
        .hero-grid > div { align-items: center; }
        .hero .sub { margin-inline: auto; }
        .hero-cta { justify-content: center; }
        .hero-note { justify-content: center; }
        .orbits { width: min(70vw, 420px); }
        .hero-visual { max-width: 460px; margin: 0 auto; width: 100%; }
      }
      @media (max-width: 920px) {
        .grid-3, .grid-4, .steps { grid-template-columns: repeat(2, 1fr); }
        .stats { grid-template-columns: repeat(2, 1fr); }
        .plans { grid-template-columns: 1fr; max-width: 520px; }
      }
      /* 320px: العلامة 97 + الزرّ + الهامبرغر 44 + الحشو تتجاوز العرض. تُضغط الفجوات
         والحشو معًا — الزرّ يبقى لأنه نداء التحويل الوحيد في الكروم على الجوال. */
      @media (max-width: 380px) {
        header.topbar { padding-inline: 12px; gap: 10px; }
        .top-cta { gap: 6px; }
        .top-cta .btn-nav-cta { padding: 9px 9px; font-size: 12.5px; }
        .brand { gap: 8px; }
        .brand-word { font-size: 21px; }
        .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
      }

      @media (max-width: 620px) {
        /* 44px إزاحة على شاشة 320 تلتهم سُبع العمود — نصّ الخطوة أضيق عمود في الصفحة. */
        .prose ol > li { padding-inline-start: 36px; }
        .prose ol > li::before { width: 24px; height: 24px; font-size: 13.5px; border-radius: 8px; }
        .prose li { padding-inline-start: 24px; }
        .prose ul > li::before { inset-inline-start: 5px; }
        .section { padding: 56px 0; }
        .grid-3, .grid-4, .steps, .plans { grid-template-columns: 1fr; }
        /* زرّ التسجيل كان يُخفى هنا كليًّا، فلا يرى زائر الجوال — وهو أكبر شريحة —
           أي نداء للتسجيل في كروم الموقع إطلاقًا. يبقى ويُصغَّر؛ و«دخول» هو ما يُخفى
           لأنه موجود أصلًا داخل لوحة القائمة (.nav-login-mobile). */
        .nav-login { display: none; }
        .top-cta .btn-nav-cta { padding: 9px 13px; font-size: 14px; border-radius: 11px; }
        .topbar nav.open .nav-login-mobile { display: block; }
        .orbits { display: none; }
        .cf-row { grid-template-columns: 1fr; }
      }

      /* ══════════ كثافة الجوال — مولَّدة (٢٩ يوليو ٢٠٢٦) ══════════
         ملاحظة المالك: «النصوص كبيرة على الجوال» — طُبِّقت على اللوحة ثم عُمّمت هنا.
         الموقع مكتوب بأحجام px يدويّة (لا رموز خطّ)، فلا تكفي إعادة تعريف متغيّر واحد.
         هذه الكتلة تقابل كل تصريح font-size في المستوى الأعلى بقيمة ×0.88 وأرضية 11px،
         و`clamp` تُخفَّض **أرضيتها** فقط ليبقى تصاعد الهواتف العريضة طبيعيًّا.
         المحدِّدات التي لها ضبط جوال يدويّ أصلًا (3) تُركت لضبطها.
         مولّدها: scratchpad/gen-landing-mobile.mjs — أعِد توليدها بعد أي تغيير كبير. */
@media (max-width: 767.98px) {
  .eyebrow { font-size: 12.3px; }
  h1.sec, h2.sec { font-size: clamp(26.4px, 4.6vw, 48px); }
  .lead { font-size: clamp(14.1px, 2.1vw, 19px); }
  .btn { font-size: 14.1px; }
  .btn-sm { font-size: 13.2px; }
  .topbar nav a { font-size: 13.2px; }
  .nav-dd-btn { font-size: 13.2px; }
  .nav-dd-menu a { font-size: 12.8px; }
  .nav-login { font-size: 13.2px; }
  .skip-link { font-size: 12.3px; }
  .hero-kicker { font-size: 12.3px; }
  .hero h1 { font-size: clamp(28.2px, 5.4vw, 58px); }
  .hero .sub { font-size: clamp(14.1px, 2.2vw, 19px); }
  .hero-note { font-size: 12.3px; }
  .sat-word { font-size: 15px; }
  .orbit-core b { font-size: clamp(33.4px, 4vw, 56px); }
  .orbit-core span { font-size: 13.2px; }
  .ticker span { font-size: 17.6px; }
  .ticker-note { font-size: 11.4px; }
  .mock-head .ttl { font-size: 11.4px; }
  .mock-big { font-size: clamp(29.9px, 5vw, 44px); }
  .mock-big small { font-size: 17.6px; }
  .mock-sub { font-size: 13.2px; }
  .mrow { font-size: 12.3px; }
  .mrow .pill { font-size: 13.2px; }
  .mrow .m { font-size: 11px; }
  .pillar h3, .pillar h2 { font-size: 16.7px; }
  .pillar p { font-size: 12.8px; }
  .grid-4 .pillar h3 { font-size: 15px; }
  .grid-4 .pillar p { font-size: 12.3px; }
  .sectors-more { font-size: 14.1px; }
  .step .num { font-size: 15.8px; }
  .step h3 { font-size: 15px; }
  .step p { font-size: 12.3px; }
  .band h3 { font-size: 17.6px; }
  .band p { font-size: 13.2px; }
  .plan .badge { font-size: 11.4px; }
  .plan .pname { font-size: 15.8px; }
  .plan .price { font-size: clamp(31.7px, 5vw, 44px); }
  .plan .price small { font-size: 14.1px; }
  .plan .price-live { font-size: 15px; }
  .plan li { font-size: 13.2px; }
  .price-note { font-size: 12.3px; }
  .cf-field > span { font-size: 12.3px; }
  .cf-field input, .cf-field textarea { font-size: 14.1px; }
  .cf-hp { font-size: 14.1px; }
  .cf-note { font-size: 12.3px; }
  .contact-channels { font-size: 13.2px; }
  .qa summary { font-size: 15px; }
  .qa .ans { font-size: 13.2px; }
  .cta-band h2 { font-size: clamp(22.9px, 4vw, 38px); }
  .cta-band p { font-size: 15.8px; }
  .foot-pitch { font-size: 12.3px; }
  .foot-h { font-size: 11.4px; }
  .foot-col a { font-size: 12.3px; }
  .foot-copy { font-size: 11.4px; }
  .foot-legal { font-size: 11.4px; }
  .prose > p:first-child { font-size: 16.7px; }
  .prose h2 { font-size: clamp(20.2px, 2.6vw, 27px); }
  .prose h3 { font-size: 17.6px; }
  .prose .note { font-size: 14.1px; }
  .toc { font-size: 12.3px; }
  .toc-title { font-size: 11px; }
  .crumbs { font-size: 11.9px; }
  .article-nav .dir { font-size: 11px; }
  .article-nav .ttl { font-size: 13.6px; }
  .legal-note { font-size: 12.3px; }
  .feature-list li { font-size: 12.8px; }
  .post-card h2, .post-card h3 { font-size: 16.3px; }
  .post-card p { font-size: 12.8px; }
  .post-feature h2 { font-size: clamp(18.5px, 2.6vw, 27px); }
  .post-feature p { font-size: 13.6px; }
  .post-feature .kicker { font-size: 11px; }
  .path-node { font-size: 18.5px; }
  .path-head h2 { font-size: 17.6px; }
  .path-head p { font-size: 12.8px; }
  .guide-card h3 { font-size: 13.6px; }
  .guide-card p { font-size: 11.9px; }
  .post-meta { font-size: 11.9px; }
  .section-head .post-meta { font-size: 11.4px; }
  .nf-code .num { font-size: clamp(56.3px, 12vw, 120px); }
  .wa-head .av { font-size: 15px; }
  .wa-head .who b { font-size: 13.2px; }
  .wa-head .who small { font-size: 11px; }
  .m-in { font-size: 12.3px; }
  .m-out { font-size: 12.3px; }
  .m-card .ph { font-size: 11px; }
  .wa-input .f { font-size: 11.4px; }
  .m-card .title { font-size: 12.3px; }
  .m-card .price { font-size: 12.3px; }
  .m-card .meta { font-size: 11px; }
  .m-card .pay-label { font-size: 11px; }
  .m-card .pay { font-size: 12.3px; }
  .m-card .promo-t { font-size: 12.3px; }
  .m-card .promo-b { font-size: 11.4px; }
  .m-card .promo-cta { font-size: 11.4px; }
  .sms-head b { font-size: 13.2px; }
  .sms-head small { font-size: 11px; }
  .sms-m { font-size: 12.3px; }
  .flowcard .hd b { font-size: 14.1px; }
  .flowcard .live { font-size: 11px; }
  .fnode small { font-size: 11px; }
  .fnode b { font-size: 13.2px; }
  .demo-note { font-size: 11px; }
  .step-view .k { font-size: 13.2px; }
  .step-view h2 { font-size: clamp(24.6px, 4vw, 42px); }
  .tour-prev { font-size: 14.1px; }
  .notice { font-size: 13.2px; }
  .cf-field .cf-err { font-size: 11.4px; }
}

      /* ── إضافات يدوية على كتلة الجوال (لا يولّدها المولّد) ────────────────────
         `<small>` يرث 0.83em من افتراضي المتصفّح لا من قاعدة مكتوبة، فيفلت من التوليد:
         بعد التصغير صار «(اختياري)» في نموذج التواصل 10.25px — تحت أرضية 11px. */
@media (max-width: 767.98px) {
  small { font-size: max(11px, 0.85em); }
}