@charset "utf-8";
/* ==========================================================================
   ناطق — Naateq
   نظام تصميم واحد. فاتح، تحريري سويسري، عالي التباين، هندسة حادة.
   كل قيمة هنا مقفلة عمداً — الصمت في نظام التصميم يعني الارتداد للقالب العام.
   ملاحظات تنفيذية:
     • خصائص منطقية فقط (inline/block) — ملف واحد يخدم RTL وLTR بلا تجاوزات.
     • انتقالات بأسماء الخصائص، لا transition: all.
     • بلا تدرّجات، بلا زجاجية، بلا ظلال ناعمة، بلا حركة تلقائية.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* ---------- الخطوط ----------
   Tajawal للنصوص وCairo للعناوين — أشهر خطين عربيين على الويب، والتوصية
   المهنية المتكررة: خط قوي هندسي للعناوين وخط محايد مريح للقراءة الطويلة.
   محلية ومقسّمة بالمدى: المتصفح لا ينزّل اللاتيني إلا إن ظهر حرف لاتيني.
   Tajawal يزن 8.7KB فقط للوزن الواحد. */
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-400-arabic.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-500-arabic.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-700-arabic.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cairo";src:url("../fonts/cairo-600-arabic.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Cairo";src:url("../fonts/cairo-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cairo";src:url("../fonts/cairo-700-arabic.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Cairo";src:url("../fonts/cairo-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono";src:url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* بديل مطابق المقاييس — يمنع القفزة عند تبديل الخط (CLS) */
@font-face{
  font-family:"Tajawal Fallback";
  src:local("Segoe UI"),local("Tahoma"),local("Arial");
  size-adjust:98%;ascent-override:104%;descent-override:26%;line-gap-override:0%;
}

@layer tokens{
  :root{
    color-scheme:light;

    /* ═══ الوضع الفاتح: أبيض نقي ═══
       قياس فعلي من المتصفح: دفترة وسلة وتمارا كلها #FFFFFF.
       وما يمنع الأبيض من أن يبدو رخيصاً ليس تلوينه، بل ثلاثة أشياء:
         ١ · النص ليس أسود نقياً — دفترة #213242 وسلة #444444.
         ٢ · سطح ثانوي خفيف يعطي الصفحة إيقاعاً — دفترة #F4F4F6.
         ٣ · شعرة 1px منضبطة بدل الظل.

       ⚠ وحرارة الرماديات ليست ذوقاً بل قياساً. الأزرق ناقص الأحمر عند المنافسين:
         دفترة سطح +2 وشعرة +12 · سلة سطح 0 وشعرة +6 · تمارا شعرة +9.
       ولا واحد منهم دافئ. الرمادي الدافئ بجوار #FFFFFF يُقرأ أصفر، فيبدو الأبيض
       متّسخاً لا نقياً — وهذا ما يفسد الأبيض النقي رغم أن الصفحة نفسها #FFFFFF.
       القاعدة: كل رمادي هنا موجب الحرارة. تحقّق بـ node tests/probe-site.mjs */
    --paper:#FFFFFF;          /* الصفحة بيضاء نقية */
    --surface:#FFFFFF;        /* البطاقة بيضاء وتُفصل بالشعرة لا بالظل */
    --sunk:#F3F5F8;           /* بارد +5 — في نطاق دفترة تماماً، وتباينه 1.09 كما هي */

    /* ---- الحبر: لا أسود نقي إطلاقاً ---- */
    --ink:#14181A;            /* شبه أسود بميل بارد خفيف — يقرأ حاداً على الأبيض */
    --ink-soft:#4A5256;
    --ink-mute:#7A8288;

    /* ---- الحدود ---- */
    --rule:#DFE4EC;           /* بارد +13 — نطاق دفترة/تمارا، وقوّته 1.276 كسابقه بلا ضعف */
    --rule-strong:#14181A;

    /* ---- اللون الواحد الذي يعمل ---- */
    --palm:#0B4F3A;           /* نخيلي عميق — أبعد عن أخضر واتساب النيوني */
    --palm-deep:#083A2B;
    --palm-wash:#E3F0E9;
    --palm-ring:rgba(11,79,58,.16);
    --on-palm:#FFFFFF;        /* النص فوق اللون — يتبدّل مع الوضع */

    /* ---- إشارة ثانوية، بندرة شديدة ---- */
    --amber:#A9531F;

    /* ---- حالات ---- */
    --danger:#8F2A2A;

    /* ---- القسم الداكن داخل الوضع الفاتح ---- */
    --ink-surface:#14181A;
    --ink-surface-2:#1E2326;
    --on-ink:#E9EBEB;
    --on-ink-mute:#9AA2A6;
    --on-ink-rule:#2B3134;

    /* ---- الخطوط ---- */
    --font-ar:"Tajawal","Tajawal Fallback","Segoe UI",Tahoma,system-ui,sans-serif;
    --font-head:"Cairo","Tajawal","Tajawal Fallback","Segoe UI",Tahoma,sans-serif;
    --font-num:"Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

    /* ---- مقياس طباعي مرن: كل خطوة فيها جزء rem حتى لا ينكسر عند تكبير 200% ---- */
    --step--1:clamp(.875rem,.855rem + .09vw,.9375rem);
    --step-0:clamp(1.0625rem,1.043rem + .09vw,1.125rem);
    --step-1:clamp(1.1875rem,1.13rem + .27vw,1.375rem);
    --step-2:clamp(1.375rem,1.26rem + .55vw,1.75rem);
    --step-3:clamp(1.625rem,1.42rem + .98vw,2.25rem);
    --step-4:clamp(2rem,1.6rem + 1.9vw,3.25rem);
    --step-5:clamp(2.25rem,1.7rem + 2.6vw,3.75rem);

    /* ---- المسافات: الوحدة 4px ---- */
    --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
    --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
    --s-9:96px; --s-10:128px;
    --section:clamp(56px,3.2rem + 4.4vw,112px);

    /* ---- الشكل ---- */
    --r:4px;
    --r-sm:3px;
    --hair:1px;
    --container:1200px;
    --header-h:66px;

    /* ---- الحركة: ثلاثة منحنيات، خمس مدد. لا سادس. ---- */
    --ease:cubic-bezier(.2,0,0,1);
    --ease-in:cubic-bezier(.3,0,.8,.15);
    --ease-decel:cubic-bezier(.05,.7,.1,1);
    --t-1:100ms; --t-2:150ms; --t-3:200ms; --t-4:300ms;
  }

  /* ═══════════════ الوضع الداكن ═══════════════
     لا #000000 إطلاقاً — الأسود النقي يُتعب العين ويُفقد العمق.
     المرجع القياسي: Linear يبدأ من #010102 بسُلّم أسطح، وRaycast من #07080a،
     وكلاهما يبني الارتفاع بالحدود الشعرية لا بالظلال (الظل الأسود لا يُرى
     على سطح أسود). والسُلّم هنا محايد يطابق الوضع الفاتح لا ميلاً أزرق مستعاراً.

     ثلاث نقاط يخطئ فيها معظم من ينفّذ وضعاً داكناً:
       ١ · الأخضر الغامق يختفي على الداكن ⟹ يُفتَح ويُقلب لون نصه.
       ٢ · النص الأبيض النقي يُهالِن على الأسود ⟹ أبيض مائل.
       ٣ · الوزن الثقيل يتمدّد بصرياً على الداكن ⟹ يُخفَّف قليلاً. */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){ color-scheme:dark;
      --paper:#0B0C0D; --surface:#141517; --sunk:#1B1D1F;
      --ink:#E9EBEB; --ink-soft:#AEB4B6; --ink-mute:#7E8688;
      --rule:#26292B; --rule-strong:#E9EBEB;
      --palm:#4FB98A; --palm-deep:#6ECBA0; --palm-wash:#12241D;
      --palm-ring:rgba(79,185,138,.22); --on-palm:#062016;
      --amber:#D98A52; --danger:#E0736B;
      --ink-surface:#141517; --ink-surface-2:#1B1D1F;
      --on-ink:#E9EBEB; --on-ink-mute:#7E8688; --on-ink-rule:#26292B;
    }
  }
  :root[data-theme="dark"]{ color-scheme:dark;
    --paper:#0B0C0D; --surface:#141517; --sunk:#1B1D1F;
    --ink:#E9EBEB; --ink-soft:#AEB4B6; --ink-mute:#7E8688;
    --rule:#26292B; --rule-strong:#E9EBEB;
    --palm:#4FB98A; --palm-deep:#6ECBA0; --palm-wash:#12241D;
    --palm-ring:rgba(79,185,138,.22); --on-palm:#062016;
    --amber:#D98A52; --danger:#E0736B;
    --ink-surface:#141517; --ink-surface-2:#1B1D1F;
    --on-ink:#E9EBEB; --on-ink-mute:#7E8688; --on-ink-rule:#26292B;
  }
  /* في الداكن: القسم «الداكن» يصير سطحاً مرتفعاً بشعرة، لا لوناً مطابقاً للصفحة */
  :root[data-theme="dark"] .section--ink,
  :root[data-theme="dark"] .foot{border-block:var(--hair) solid var(--rule)}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .section--ink,
    :root:not([data-theme="light"]) .foot{border-block:var(--hair) solid var(--rule)}
  }
  /* الوزن الثقيل يتمدّد على الداكن — تخفيف طفيف يعيد التوازن */
  :root[data-theme="dark"] h1,:root[data-theme="dark"] h2{font-weight:600}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) h1,
    :root:not([data-theme="light"]) h2{font-weight:600}
  }
}

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  *{margin:0}
  html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    scroll-padding-block-start:calc(var(--header-h) + var(--s-5));
    scroll-padding-block-end:var(--s-8);
  }
  [id]{scroll-margin-block-start:calc(var(--header-h) + var(--s-5))}
  img,svg,video{display:block;max-inline-size:100%;block-size:auto}
  /* ⚠ يجب أن يلي السطر أعلاه: أنماط المؤلّف تتغلّب على أنماط المتصفح، فـ
     svg{display:block} يهزم [hidden]{display:none} الافتراضي. وبدون هذا السطر
     تُرسم ورقة الرموز المخفيّة ككتلة 300×150 أعلى كل صفحة — وقد حدث فعلاً
     وكشفه tests/layout-audit.mjs. لا تحذفه ولا تنقله قبله. */
  [hidden]{display:none}
  button,input,select,textarea{font:inherit;color:inherit}
  /* لحقول الإدخال عرض ذاتي موروث من سمة size، فتقاوم الانكماش داخل الشبكات
     وتفرض عرضاً أدنى على الصفحة كلها. كشفه القياس عند 320px: بوابة الدخول
     كانت تتمدّد إلى 331px بسبب حقل واحد لا ينكمش. */
  input,select,textarea{min-inline-size:0}
  ul[class],ol[class]{list-style:none;padding:0}
  table{border-collapse:collapse;inline-size:100%}
  :where(a){color:inherit}
}

@layer base{
  html{
    font-family:var(--font-ar);
    /* العربية تبدو أصغر بنفس الحجم — الأساس 17px لا 16px */
    font-size:100%;
    line-height:1.8;
    letter-spacing:0;
    color:var(--ink);
    background:var(--paper);
  }
  /* سفاري 26 يأخذ لون شريطه من خلفية body لا من theme-color */
  body{
    background:var(--paper);
    font-size:var(--step-0);
    text-align:start;
    overflow-x:clip;
  }
  /* العربية لا تُتبَّع حروفها أبداً — التتبّع يكسر الوصل */
  [lang="ar"],:lang(ar){letter-spacing:0}

  h1,h2,h3,h4{
    font-family:var(--font-head);
    line-height:1.35;          /* Cairo أطول امتداداً رأسياً من Tajawal */
    font-weight:700;
    letter-spacing:0;
    text-wrap:balance;
  }
  h1{font-size:var(--step-5);line-height:1.28}
  h2{font-size:var(--step-3)}
  h3{font-size:var(--step-1);font-weight:600}
  p,li{text-wrap:pretty}
  p{max-inline-size:64ch}

  a{text-decoration-thickness:1px;text-underline-offset:.28em}
  a:where(:not([class])){color:var(--palm)}

  strong,b{font-weight:600}
  /* ‎.92em‎ نسبيّة، فداخل أبٍ صغير تهبط تحت 12px — قِيس 11.96px على ست
     أجهزة في صفحة المطوّرين. و‎max()‎ أرضيةٌ مطلقة لا تتأثّر بالأب. */
  code,kbd,samp{font-family:var(--font-num);font-size:max(.92em,.75rem)}

  ::selection{background:var(--palm);color:var(--on-palm)}

  /* حلقة تركيز عامة: outline لأنه يحترم نصف القطر وينجو في التباين العالي */
  :focus-visible{
    outline:2px solid var(--ink);
    outline-offset:2px;
    border-radius:var(--r-sm);
  }
  @media (forced-colors:active){
    :focus-visible{outline:3px solid Highlight;outline-offset:2px;box-shadow:none}
  }
}

@layer layout{
  .wrap{
    inline-size:min(100% - 2*var(--s-5),var(--container));
    margin-inline:auto;
  }
  @media (min-width:56rem){ .wrap{inline-size:min(100% - 2*var(--s-7),var(--container))} }

  .section{padding-block:var(--section)}
  .section--tight{padding-block:calc(var(--section) * .62)}
  .section + .section{border-block-start:var(--hair) solid var(--rule)}

  /* الصفحة بيضاء، فالإيقاع يأتي من أقسام بسطح ثانوي خفيف.
     هذا ما تفعله دفترة (#F4F4F6) وسلة (#F9F9F9) — بلا هذا يصير الأبيض شريطاً واحداً. */
  .section--tint{background:var(--sunk)}
  .section--tint + .section,
  .section + .section--tint{border-block-start:0}

  .section--ink{
    background:var(--ink-surface);
    color:var(--on-ink);
    border-block:var(--hair) solid var(--ink-surface);
  }
  .section--ink h2,.section--ink h3{color:var(--on-ink)}
  .section--ink p{color:var(--on-ink-mute)}

  /* لا ثلاث بطاقات متطابقة في صف — الإيقاع متنوّع عمداً */
  .cols{display:grid;gap:var(--s-7)}
  @media (min-width:56rem){
    .cols--7-5{grid-template-columns:7fr 5fr;align-items:start}
    .cols--5-7{grid-template-columns:5fr 7fr;align-items:start}
    .cols--6-6{grid-template-columns:1fr 1fr;align-items:center}
  }

  /* ⚠ أشهر فخّ في الشبكات والصناديق المرنة:
     عنصر الشبكة قيمته الافتراضية min-inline-size:auto، أي لا ينكمش دون
     المقاس الأدنى لمحتواه. فكتلة شيفرة بـwhite-space:pre مقاسها الأدنى هو
     أطول سطر فيها، فتفرضه على العمود كلّه ويتمدّد الإطار وتفيض الصفحة.
     وoverflow-x:auto على الكتلة نفسها لا يُجدي — العلّة في العنصر الحاوي.
     حدث هذا فعلاً: صفحة المطوّرين كانت 532px داخل شاشة 320px على كل هاتف،
     وأخفاه overflow-x:clip على الجسم فمرّ من كل الفحوص حتى قاسه
     tests/layout-audit.mjs على 12 مقاساً. */
  .cols>*,.cards>*,.bento>*{min-inline-size:0}

  .stack>*+*{margin-block-start:var(--s-4)}
  .stack-lg>*+*{margin-block-start:var(--s-6)}

  /* الأقسام أسفل الطية تُخطّى في الرسم حتى تُرى */
  .defer{content-visibility:auto;contain-intrinsic-size:auto 720px}
}

@layer components{

/* ---------------------------------------------------------- رابط التخطي */
.skip-link{
  position:fixed;z-index:200;
  inset-block-start:0;inset-inline-start:0;
  margin:var(--s-2);
  padding:.7em 1.2em;
  background:var(--ink);color:var(--paper);
  font-weight:600;text-decoration:none;border-radius:var(--r);
  transform:translateY(-160%);
}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0);outline:2px solid var(--paper);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){ .skip-link{transition:transform var(--t-3) var(--ease)} }

/* ---------------------------------------------------------------- الأزرار */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  inline-size:fit-content;min-block-size:46px;
  padding-block:.68em;padding-inline:1.4em;
  border:var(--hair) solid transparent;border-radius:var(--r);
  font-weight:600;font-size:var(--step-0);line-height:1.2;
  text-align:center;text-decoration:none;white-space:nowrap;
  cursor:pointer;user-select:none;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  background:var(--palm);color:var(--on-palm);
  /* الحافة العلوية الداخلية: مصدر ضوء من أعلى. ليست ظلاً — هي ملمس. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  transition:
    background-color var(--t-2) var(--ease),
    border-color var(--t-2) var(--ease),
    color var(--t-1) var(--ease),
    transform var(--t-3) var(--ease);
}
/* المرور فقط حيث يوجد مؤشر حقيقي — بدونه تلتصق حالة hover بعد اللمس */
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--palm-deep);transform:translateY(-1px)}
}
/* الضغط فوري: 60ms. الارتخاء يعود بالمدة الأطول — تباين مقصود. */
.btn:active{transform:translateY(0) scale(.985);transition-duration:60ms}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 5px var(--palm-ring)}

.btn--ghost{
  background:transparent;color:var(--ink);
  border-color:var(--ink);box-shadow:none;
}
@media (hover:hover) and (pointer:fine){
  .btn--ghost:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);transform:none}
}
.btn--ghost:focus-visible{box-shadow:0 0 0 5px var(--palm-ring)}

.btn--quiet{
  background:transparent;color:var(--ink);
  border-color:var(--rule);box-shadow:none;
}
@media (hover:hover) and (pointer:fine){
  .btn--quiet:hover{background:var(--sunk);border-color:var(--ink-mute);transform:none}
}

.btn--on-ink{background:var(--on-ink);color:var(--ink-surface);box-shadow:none}
@media (hover:hover) and (pointer:fine){ .btn--on-ink:hover{transform:translateY(-1px)} }
.btn--on-ink:focus-visible{outline-color:var(--on-ink)}

.btn--ghost-on-ink{background:transparent;color:var(--on-ink);border-color:var(--on-ink-rule);box-shadow:none}
@media (hover:hover) and (pointer:fine){ .btn--ghost-on-ink:hover{background:var(--ink-surface-2);border-color:var(--on-ink-mute);transform:none} }
.btn--ghost-on-ink:focus-visible{outline-color:var(--on-ink)}

.btn--wide{inline-size:100%}

.btn[aria-disabled="true"],.btn:disabled{
  cursor:not-allowed;
  background:color-mix(in srgb,var(--ink) 12%,var(--surface));
  color:color-mix(in srgb,var(--ink) 45%,var(--surface));
  border-color:transparent;box-shadow:none;transform:none;
}
.btn[data-loading="true"]{cursor:progress;pointer-events:none}
.btn[data-loading="true"] .btn__label{visibility:hidden}
.btn[data-loading="true"]::after{
  content:"";position:absolute;
  inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;
  inline-size:1.05em;block-size:1.05em;border-radius:50%;
  border:2px solid rgba(255,255,255,.28);border-block-start-color:currentColor;
  animation:spin 700ms linear infinite;
}
@keyframes spin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){
  .btn[data-loading="true"]::after{animation:none;border-block-start-color:transparent;border-inline-start-color:currentColor}
}

/* السهم في الروابط النصية — يُعكس تلقائياً في RTL */
.tlink{
  display:inline-flex;align-items:center;gap:.4em;
  color:var(--palm);font-weight:600;text-decoration:none;
  transition:gap var(--t-2) var(--ease),color var(--t-1) var(--ease);
}
/* الرابط المستقلّ (خارج جملة) هدفُ لمس، وWCAG 2.5.8 يطلب 24px.
   وارتفاعه كان 23.4px — أي ينقصه **بكسل واحد**، قِيس على ستّة أجهزة.
   ومن داخل جملةٍ يبقى مستثنى بالبند نفسه، فلا نمدّ سطور الفقرات. */
.tlink:not(p .tlink):not(li .tlink){min-block-size:24px}
.tlink::after{content:"←";font-family:var(--font-num);line-height:1}
.tlink:dir(ltr)::after{content:"→"}
@media (hover:hover) and (pointer:fine){ .tlink:hover{gap:.75em;text-decoration:underline} }

/* ------------------------------------------------------- الشريط العلوي */
.masthead{
  position:sticky;inset-block-start:0;z-index:80;
  background:var(--paper);           /* مصمت — لا شفافية ولا ضباب */
  border-block-end:var(--hair) solid var(--rule);
}
.masthead__bar{
  display:flex;align-items:center;gap:var(--s-5);
  block-size:var(--header-h);
}
/* ═══ الشعار ═══
   الشعار على الموقع هو **الاسم كاملاً** لا حرفاً منه — كما تفعل دفترة.
   والحرف المفرد «ن» يبقى للمفضّلة ونتائج البحث وحدها، حيث لا يتّسع
   المربّع لكلمة. وهو نفس ما توصي به أنظمة العلامات: الكلمة للسياق
   الأفقي، والحرف لمربّع 32px.
   والحجم أكبر ممّا كان (1.2rem) لأن الشعار كان يُقرأ عنصر تنقّل لا علامة.
   و«ن» لا تُلوَّن وحدها: تغليف حرف في span يكسر وصل الحروف العربية،
   وقد جُرّب بالواصل الصفري فلم يُصلحه — العربية تُشكَّل لا تُرصَف. */
/* ═══ الشعار ═══
   الشعار على الموقع هو **الاسم كاملاً** لا حرفاً منه. والحرف المفرد «ن»
   للمفضّلة ونتائج البحث وحدها، حيث لا يتّسع المربّع لكلمة.

   وثلاثة أشياء تفصل «شعاراً» عن «كلمة عادية»، وكلّها هنا:
     · الحجم — 2rem لا 1.2rem. عند الحجم الصغير كان يُقرأ عنصر تنقّل.
     · التتبّع المضموم -.04em — فتتماسك الحروف كتلةً واحدة.
     · حرفٌ يحمل لون العلامة — «ن» خضراء، كما تفعل دفترة بـ«د» الزرقاء.

   ⚠ واللون بتدرّجٍ ذي وقفة حادّة لا بـ<span>. تغليف حرفٍ في عنصر يكسر وصل
   الحروف العربية («ن اطق») — جُرّب، ولم يُصلحه الواصل الصفري، لأن كل صندوق
   سطريّ يُشكَّل ويُخطَّط وحده. والتدرّج يلوّن **الرسم** لا النصّ، فيبقى
   النصّ كلمةً واحدة موصولة. والوقفة 13٪ قِيست: عندها ينتهي الأخضر عند
   الألف بالضبط. */
.brand{
  display:inline-block;text-decoration:none;
  font-family:var(--font-head);font-weight:700;
  font-size:2rem;letter-spacing:-.04em;line-height:1.35;
  background:linear-gradient(to left,var(--palm) 0 13%,var(--ink) 13% 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand__sub{color:var(--ink-mute);font-weight:400;font-size:.8125rem;letter-spacing:0}

.nav{display:none;margin-inline-start:auto;gap:var(--s-5)}
@media (min-width:64rem){ .nav{display:flex;align-items:center} }
.nav a{
  color:var(--ink-soft);text-decoration:none;font-size:.9375rem;font-weight:500;
  padding-block:.4rem;border-block-end:2px solid transparent;
  transition:color var(--t-1) var(--ease),border-color var(--t-2) var(--ease);
}
.nav a:hover{color:var(--ink);border-block-end-color:var(--rule)}
.nav a[aria-current="page"]{color:var(--ink);border-block-end-color:var(--palm)}

.masthead__cta{display:none;gap:var(--s-3);margin-inline-start:var(--s-5)}
@media (min-width:64rem){ .masthead__cta{display:flex;align-items:center} }
.masthead__cta .btn{min-block-size:40px;padding-block:.5em;padding-inline:1.1em;font-size:.9375rem}

/* ------------------------------------------------ مبدّل المظهر (ثلاث حالات)
   ثلاث حالات لا اثنتان: «النظام» حالة قائمة بذاتها لا غيابٌ للاختيار.
   المبدّل ثنائي الحالة يجبر الزائر على قرار دائم بينما جهازه يبدّل مع الليل. */
.themer{
  display:none;align-items:center;gap:2px;
  padding:2px;border:var(--hair) solid var(--rule);border-radius:var(--r);
  background:var(--surface);
}
@media (min-width:64rem){ .themer{display:inline-flex} }
.themer__btn{
  inline-size:32px;block-size:30px;
  display:grid;place-items:center;
  background:transparent;border:0;border-radius:var(--r-sm);
  color:var(--ink-mute);cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--t-2) var(--ease),color var(--t-1) var(--ease);
}
/* مصمتة كبقية أيقونات الموقع — لا استثناء لأيقونات الهيكل */
.themer__btn svg{inline-size:15px;block-size:15px;fill:currentColor}
@media (hover:hover) and (pointer:fine){ .themer__btn:hover{color:var(--ink)} }
.themer__btn[aria-pressed="true"]{background:var(--sunk);color:var(--ink)}
.themer__btn:focus-visible{outline:2px solid var(--ink);outline-offset:-1px}

/* نسخة الدرج على الجوال: أوسع وبنص، لأن الأيقونة وحدها غامضة */
.themer--drawer{display:flex;inline-size:100%;margin-block-start:var(--s-4)}
@media (min-width:64rem){ .themer--drawer{display:none} }
.themer--drawer .themer__btn{
  flex:1;inline-size:auto;block-size:42px;gap:.45rem;
  grid-auto-flow:column;font-size:.875rem;font-weight:500;
}

.burger{
  margin-inline-start:auto;
  inline-size:46px;block-size:46px;
  display:grid;place-items:center;
  background:transparent;border:var(--hair) solid var(--rule);border-radius:var(--r);
  cursor:pointer;touch-action:manipulation;
}
@media (min-width:64rem){ .burger{display:none} }
.burger__box{inline-size:18px;block-size:12px;position:relative}
.burger__box span{position:absolute;inset-inline:0;block-size:1.5px;background:var(--ink);transition:transform var(--t-3) var(--ease),opacity var(--t-1) var(--ease)}
.burger__box span:nth-child(1){inset-block-start:0}
.burger__box span:nth-child(2){inset-block-start:5.25px}
.burger__box span:nth-child(3){inset-block-end:0}
.burger[aria-expanded="true"] .burger__box span:nth-child(1){transform:translateY(5.25px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__box span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__box span:nth-child(3){transform:translateY(-5.25px) rotate(-45deg)}

.drawer{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--t-4) var(--ease);
  border-block-start:var(--hair) solid transparent;
}
.drawer>div{overflow:hidden}
.drawer[data-open="true"]{grid-template-rows:1fr;border-block-start-color:var(--rule)}
@media (min-width:64rem){ .drawer{display:none} }
.drawer nav{display:flex;flex-direction:column;padding-block:var(--s-4)}
.drawer nav a{
  padding-block:var(--s-3);color:var(--ink);text-decoration:none;font-weight:500;
  border-block-end:var(--hair) solid var(--rule);
}
.drawer .btn{margin-block-start:var(--s-4)}

/* --------------------------------------------------------------- البطل */
.hero{padding-block:clamp(48px,2.5rem + 5vw,104px)}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.8125rem;font-weight:500;color:var(--ink-soft);
  border:var(--hair) solid var(--rule);border-radius:var(--r-sm);
  padding:.3rem .7rem;background:var(--surface);
}
.hero__dot{inline-size:6px;block-size:6px;border-radius:50%;background:var(--palm);flex:none}
/* عنوان البطل: 15ch كانت أضيق من كل عُرف، فقُيس فخرج ١١ حرفاً في السطر
   على أربعة أسطر و١٧٨px فراغاً ميّتاً بجانبه — وهو «العمود المهلهل».
   المدى المهني للعنوان العريض ٢٠–٢٥ حرفاً (لا ٤٥–٧٥ كالنصّ العادي:
   الخط الكبير يحتاج سطراً أقصر لا أطول كي يُقرأ إعلاناً لا فقرة).
   وtext-wrap:balance يوزّع الأسطر بالتساوي فلا يبقى سطر يتيم بكلمة. */
/* ووحدة ch تخدع في العربية: تقيس عرض الرقم «0» وهو أضيق بكثير من متوسط
   الحرف العربي. قِيس فعلياً: عند 60px لا يسع السطر إلا ١١ حرفاً مهما وُسّع
   العمود — أي أن العلّة في حجم الخط لا في عرضه. والعربية تحتاج حجماً أصغر
   من اللاتينية لنفس الأثر البصري لأن حرفها أعرض وأكثر تفصيلاً.
   48px تعطي ثلاثة أسطر متوازنة، و60px تعطي أربعة مهلهلة. */
.hero h1{
  margin-block-start:var(--s-5);
  font-size:clamp(2rem,1.55rem + 2.1vw,3rem);
  max-inline-size:100%;
  text-wrap:balance;
}
/* والعمودان لا يتساويان: 50/50 «تعادل بصري ساكن» لا يسود فيه أحد.
   النصّ يأخذ الحصة الأكبر لأنه صاحب الرسالة، والمنتج يُري لا يُزاحم. */
@media (min-width:56rem){
  .hero .cols--6-6{grid-template-columns:7fr 5fr}
}
.hero__lede{margin-block-start:var(--s-5);font-size:var(--step-1);color:var(--ink-soft);max-inline-size:52ch;line-height:1.75}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-block-start:var(--s-7)}
/* على الجوال يلتفّ الزرّ الثاني فيبقى بعرض نصّه ملتصقاً بحافة، بينما الأول
   يملأ السطر — فيبدو معلّقاً لا مقصوداً. رُئي من لقطة 344px لا من رقم:
   العرض والارتفاع والتباين وأهداف اللمس كلّها سليمة. فيتساويان دون 480px. */
.hero__actions>.btn{inline-size:100%;justify-content:center}
@media (min-width:30rem){ .hero__actions>.btn{inline-size:auto} }
.hero__note{display:flex;align-items:center;gap:.5rem;margin-block-start:var(--s-5);font-size:.9375rem;color:var(--ink-mute)}

/* لقطة المحادثة — عنصر حقيقي مبني بالكود لا صورة */
.phone{
  border:var(--hair) solid var(--rule);border-radius:var(--r);
  background:var(--surface);overflow:hidden;
}
.phone__bar{
  display:flex;align-items:center;gap:.6rem;
  padding:var(--s-3) var(--s-4);
  border-block-end:var(--hair) solid var(--rule);background:var(--sunk);
}
.phone__avatar{
  inline-size:30px;block-size:30px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-size:.75rem;font-weight:600;flex:none;
}
.phone__who{font-weight:600;font-size:.9375rem;line-height:1.3}
.phone__state{font-size:.75rem;color:var(--ink-mute);font-family:var(--font-num)}
.phone__thread{padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}
.msg{max-inline-size:82%;padding:.6rem .85rem;border-radius:var(--r);font-size:.9375rem;line-height:1.7}
.msg--them{background:var(--sunk);align-self:flex-start}
.msg--us{background:var(--surface);border:var(--hair) solid var(--rule);align-self:flex-end}
.msg__meta{
  display:block;margin-block-start:.35rem;
  font-family:var(--font-num);font-size:.75rem;color:var(--ink-mute);
}
.msg__doc{
  display:flex;align-items:center;gap:.6rem;margin-block-start:.5rem;
  padding:.5rem .6rem;border:var(--hair) solid var(--rule);border-radius:var(--r-sm);background:var(--sunk);
}
.msg__doc b{font-size:.8125rem;font-weight:600}
.msg__doc span{font-family:var(--font-num);font-size:.75rem;color:var(--ink-mute)}

/* ------------------------------------------------------- شريط الأرقام */
.figures{
  display:grid;grid-template-columns:repeat(2,1fr);
  border:var(--hair) solid var(--rule);background:var(--surface);border-radius:var(--r);
  overflow:hidden;
}
@media (min-width:56rem){ .figures{grid-template-columns:repeat(4,1fr)} }
.figure{padding:var(--s-5);border-inline-start:var(--hair) solid var(--rule);border-block-start:var(--hair) solid var(--rule)}
.figure:nth-child(-n+2){border-block-start:0}
.figure:nth-child(odd){border-inline-start:0}
@media (min-width:56rem){
  .figure{border-block-start:0}
  .figure:nth-child(odd){border-inline-start:var(--hair) solid var(--rule)}
  .figure:first-child{border-inline-start:0}
}
/* الرقم الملوّن من الاستعمالات التي تعمل: لهجة واحدة تؤدّي وظيفة واحدة —
   هنا تقول «هذا رقم لا نصّ». والخلفية الملوّنة مع نصّ ملوّن هي المؤرّخة، لا هذا. */
.figure__n{font-family:var(--font-num);font-size:var(--step-3);font-weight:500;line-height:1.1;display:block;color:var(--palm)}
.figure__l{margin-block-start:.4rem;font-size:.875rem;color:var(--ink-mute)}

/* ------------------------------------------------------------- الخطوات */
.steps{display:grid;gap:0;border-block-start:var(--hair) solid var(--rule)}
@media (min-width:56rem){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{padding-block:var(--s-6);padding-inline-end:var(--s-6);border-block-end:var(--hair) solid var(--rule)}
@media (min-width:56rem){
  .step{border-block-end:0;border-inline-start:var(--hair) solid var(--rule);padding-inline:var(--s-6)}
  .step:first-child{border-inline-start:0;padding-inline-start:0}
}
.step__n{font-family:var(--font-num);font-size:var(--step-3);color:var(--rule);font-weight:500;line-height:1}
.step h3{margin-block-start:var(--s-3)}
.step p{margin-block-start:var(--s-3);color:var(--ink-soft);font-size:.9375rem}

/* --------------------------------------------- شبكة القدرات غير المتماثلة */
.bento{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media (min-width:48rem){ .bento{grid-template-columns:repeat(2,1fr)} }
/* الإيقاع: 4+2 · 2+4 · 3+3 — بلاطتان كبيرتان قطرياً لا واحدة في الأعلى.
   القياس فرض هذا: البلاطة الكبيرة الوحيدة كانت تملأ **45%** من صندوقها عند
   1024px بينما جاراتها الصغيرة تملأ 69% — أي أن أبرز موضع في القسم كان
   أفرغه. ومنطق البِنتو أن الحجم إشارة أهمية، فبلاطةٌ كبيرة بنصّ قصير تُعلن
   العكس تماماً. البلاطة الكبيرة تحتاج ~200 محرف والصغيرة ~100، والفرق
   يُقاس لا يُخمَّن. */
@media (min-width:64rem){
  .bento{grid-template-columns:repeat(6,1fr)}
  .bento>*:nth-child(1){grid-column:span 4}
  .bento>*:nth-child(2){grid-column:span 2}
  .bento>*:nth-child(3){grid-column:span 2}
  .bento>*:nth-child(4){grid-column:span 4}
  .bento>*:nth-child(5){grid-column:span 3}
  .bento>*:nth-child(6){grid-column:span 3}
}
.tile{
  position:relative;isolation:isolate;
  container-type:inline-size;
  display:flex;flex-direction:column;
  padding:var(--s-6);
  background:var(--surface);
  border:var(--hair) solid var(--rule);border-radius:var(--r);
  transition:
    border-color var(--t-3) var(--ease),
    translate var(--t-3) var(--ease);
}
.tile::before{
  content:"";position:absolute;
  inset-block-start:-1px;inset-inline-start:-1px;
  block-size:2px;inline-size:0;background:var(--palm);
  transition:inline-size var(--t-4) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .tile:hover{border-color:var(--ink-mute);translate:0 -2px}
  .tile:hover::before{inline-size:calc(100% + 2px)}
}
.tile h3{font-size:var(--step-1);line-height:1.45}
.tile p{margin-block-start:var(--s-3);color:var(--ink-soft);font-size:.9375rem}
.tile__tag{
  display:flex;align-items:center;gap:.5rem;
  margin-block-end:var(--s-4);padding-block-end:var(--s-3);
  border-block-end:var(--hair) solid var(--rule);
  font-family:var(--font-num);font-size:.75rem;color:var(--ink-mute);
  letter-spacing:.06em;text-transform:uppercase;
}
@container (min-width:34rem){
  .tile{padding:var(--s-7)}
  .tile h3{font-size:var(--step-2)}
}

/* --------------------------------------------------------- بطاقات الأسعار */
.plans{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media (min-width:60rem){ .plans{grid-template-columns:repeat(3,1fr)} }
@supports (grid-template-rows:subgrid){
  @media (min-width:60rem){
    .plans{grid-template-rows:auto}
    .plan{grid-row:span 5;display:grid;grid-template-rows:subgrid}
  }
}
.plan{
  position:relative;isolation:isolate;
  padding:var(--s-6);
  background:var(--surface);
  border:var(--hair) solid var(--rule);border-radius:var(--r);
  display:flex;flex-direction:column;gap:var(--s-4);
  transition:border-color var(--t-3) var(--ease),translate var(--t-3) var(--ease);
}
.plan::before{
  content:"";position:absolute;
  inset-block-start:-1px;inset-inline-start:-1px;
  block-size:2px;inline-size:0;background:var(--palm);
  transition:inline-size var(--t-4) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .plan:hover{border-color:var(--ink-mute);translate:0 -2px}
  .plan:hover::before{inline-size:calc(100% + 2px)}
}
.plan:focus-within{border-color:var(--ink)}
/* الباقة المختارة تُميَّز بالحدّ والشارة فقط — لا بلون خلفية ولا تكبير */
.plan--pick{border-color:var(--ink)}
.plan--pick::before{inline-size:calc(100% + 2px);background:var(--amber)}
.plan__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.plan__name{font-size:var(--step-1);font-weight:700}
.plan__badge{
  font-size:.75rem;font-weight:600;color:var(--amber);
  border:var(--hair) solid var(--amber);border-radius:var(--r-sm);
  padding:.15rem .5rem;white-space:nowrap;
}
.plan__price{font-family:var(--font-num);font-size:var(--step-3);font-weight:500;line-height:1.1}
.plan__price small{display:block;font-family:var(--font-ar);font-size:.8125rem;color:var(--ink-mute);font-weight:400;margin-block-start:.35rem}
.plan__run{font-family:var(--font-num);font-size:1rem;color:var(--ink-soft);padding-block-start:var(--s-3);border-block-start:var(--hair) solid var(--rule)}
.plan ul{display:flex;flex-direction:column;gap:.6rem;font-size:.9375rem;color:var(--ink-soft)}
.plan li{display:flex;gap:.6rem}
.plan li::before{content:"—";color:var(--rule);flex:none;font-family:var(--font-num)}
.plan li[data-no]::before{content:"×";color:var(--rule)}
.plan .btn{margin-block-start:auto}

/* ------------------------------------------------------------- الجداول */
/* منطقة تُمرَّر أفقياً يجب أن تُبلغ بلوحة المفاتيح، وإلا تعذّر الوصول
   لمحتواها على من لا يستعمل فأرة (WCAG 2.1.1). الوسم فيه tabindex،
   وحلقة التركيز هنا كي يُرى أين وصل المستخدم. */
.code:focus-visible,.tablewrap:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ═══ كتلة شيفرة ═══ كانت في كتلة <style> داخل صفحة المطوّرين وحدها، فصار
   لها مستعمل ثانٍ (دليل الواجهة) — ونسختان تنحرفان. مصدرٌ واحد هنا. */
.code{
  background:var(--ink-surface);color:var(--on-ink);
  border-radius:var(--r);padding:var(--s-5);overflow-x:auto;
  font-family:var(--font-num);font-size:.8125rem;line-height:1.9;
}
.code b{color:#7FD4A8;font-weight:400}
.code i{color:var(--on-ink-mute);font-style:normal}
.ev{display:grid;gap:var(--s-2);padding-block:var(--s-4);border-block-end:1px solid var(--rule)}
.ev code{font-size:.875rem;font-weight:600;color:var(--palm)}

.tablewrap{overflow-x:auto;border:var(--hair) solid var(--rule);border-radius:var(--r);background:var(--surface)}
.tbl{font-size:.9375rem;min-inline-size:34rem}
.tbl th,.tbl td{padding:.8rem 1rem;text-align:start;border-block-end:var(--hair) solid var(--rule);vertical-align:top}
.tbl thead th{background:var(--sunk);font-weight:600;font-size:.8125rem;position:sticky;inset-block-start:0;z-index:1}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-block-end:0}
.tbl tbody tr{transition:background-color var(--t-1) var(--ease)}
@media (hover:hover) and (pointer:fine){ .tbl tbody tr:hover{background:var(--sunk)} }
.tbl .num,.tbl [data-num]{font-family:var(--font-num)}
.tbl th.num,.tbl .num--txt{font-family:inherit}   /* تسمية لا رقم — انظر app.css */
.yes{color:var(--ink);font-weight:600}
.no{color:var(--rule)}

/* رأس فئة داخل الجدول: أربعة عشر صفاً مسطّحاً تُقرأ قائمةً لا مقارنة، وأدبيات
   جداول المقارنة تُجمع على التجميع بفئات. كل <tbody> فئة، ورأسها صفٌّ ممتدّ. */
.tbl__g th{
  background:var(--sunk);color:var(--ink-mute);
  font-size:.75rem;font-weight:600;letter-spacing:.04em;
  padding-block:.5rem;
}
.tbl__g th svg{vertical-align:-.15em;margin-inline-end:.35rem}
.tbl__g+tr th,.tbl__g+tr td{border-block-start:0}
/* جدول الحاسبة: عمودان رقميان لا مقارنة بين باقات، فلا حاجة لعرض أدنى. */
.tbl--calc{min-inline-size:0;width:100%}
.tbl--calc small{display:block;font-family:var(--font-ar);font-size:.75rem;font-weight:400;color:var(--ink-mute)}
.tbl--calc td{text-align:end;white-space:nowrap}

/* ما تتساوى فيه الباقات — يُرفع من الجدول إلى شريط طمأنة قبله. */
.allplans{
  padding:var(--s-5) var(--s-6);
  background:var(--sunk);border:var(--hair) solid var(--rule);border-radius:var(--r);
}
.allplans__t{font-size:.8125rem;font-weight:600;color:var(--ink-mute);letter-spacing:.04em}
.allplans__l{
  display:grid;gap:.6rem var(--s-6);margin-block-start:var(--s-4);
  grid-template-columns:1fr;font-size:.9375rem;color:var(--ink-soft);
}
@media (min-width:40rem){ .allplans__l{grid-template-columns:repeat(2,1fr)} }
@media (min-width:64rem){ .allplans__l{grid-template-columns:repeat(3,1fr)} }

/* -------------------------------------------------------------- الشارات */
.chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.2rem .55rem;border-radius:var(--r-sm);
  font-size:.75rem;font-weight:500;border:var(--hair) solid var(--rule);color:var(--ink-soft);
}
.chip--ok{background:var(--palm-wash);border-color:transparent;color:var(--palm)}
.chip--soon{color:var(--ink-mute)}

/* ------------------------------------------------------------ التكاملات */
.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:var(--hair) solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--surface)}
@media (min-width:40rem){ .logos{grid-template-columns:repeat(3,1fr)} }
@media (min-width:64rem){ .logos{grid-template-columns:repeat(6,1fr)} }
.logo{
  display:grid;place-items:center;gap:.4rem;
  padding:var(--s-5) var(--s-3);text-align:center;
  border-inline-start:var(--hair) solid var(--rule);
  border-block-start:var(--hair) solid var(--rule);
  color:var(--ink-mute);font-weight:600;font-size:.9375rem;
  transition:color var(--t-2) var(--ease),background-color var(--t-2) var(--ease);
}
@media (hover:hover) and (pointer:fine){ .logo:hover{color:var(--ink);background:var(--sunk)} }
.logo small{font-family:var(--font-num);font-size:.625rem;font-weight:400}

/* ═══════════ بلاطة تكامل ═══════════
   الشعار الحقيقي علامة تجارية مملوكة لصاحبها، ولا يجوز نسخه دون إذن
   ولا خارج دليل هويته. فالبلاطة هنا **حرف مرسوم بخطّنا** لا شعاراً منسوخاً:
   يُعرّف المنصة بلا انتحال، ويبقى النظام البصري واحداً لأن كل البلاطات
   بخطّ واحد ولون واحد. وهذا ما تفعله الشركات التي لا تملك إذناً موقّعاً.
   حين تحصل على إذن كل منصة، استبدل .itile__mark بصورة الشعار. */
.grid-int{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,196px),1fr))}

.itile{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:auto 1fr;
  align-items:center;gap:var(--s-3);
  padding:var(--s-4);
  background:var(--surface);
  border:var(--hair) solid var(--rule);border-radius:var(--r);
  transition:border-color var(--t-3) var(--ease),translate var(--t-3) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .itile:hover{border-color:var(--ink-mute);translate:0 -2px}
}
.itile__mark{
  inline-size:40px;block-size:40px;flex:none;
  display:grid;place-items:center;
  border:var(--hair) solid var(--rule);border-radius:var(--r);
  background:var(--sunk);
  font-family:var(--font-head);font-weight:700;font-size:1rem;
  color:var(--ink-soft);
  line-height:1;
}
.itile__mark--ltr{font-family:var(--font-num);font-size:.9375rem;direction:ltr}
/* علامة منصّة حقيقية بدل الحرف — للمربوط فعلاً وحده.
   ترث لون النصّ فتعمل في الوضعين ولا تُدخل لوناً خارج اللوحة، ومسارها
   مصمت بلا stroke كبقيّة أيقونات الموقع. والتلوين بلون النصّ خروجٌ عن
   ألوان الهوية الأصلية: مقصود كي لا يختفي شعارٌ فاتح على خلفية بيضاء،
   ويُستبدَل بملف ملوّن من حزمة الهوية متى أردت — تبديل ملف لا أكثر. */
.itile__logo{inline-size:22px;block-size:22px;fill:currentColor}
.itile--ready .itile__mark{background:var(--palm-wash);border-color:var(--palm-ring);color:var(--palm-deep)}
:root[data-theme="dark"] .itile--ready .itile__mark{color:var(--palm)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .itile--ready .itile__mark{color:var(--palm)}
}
.itile__body{min-inline-size:0}
.itile__n{display:block;font-weight:600;font-size:.9375rem;line-height:1.4}
.itile__c{display:block;font-size:.75rem;color:var(--ink-mute);margin-block-start:.15rem}
.itile__s{
  display:inline-flex;align-items:center;gap:.25rem;
  margin-block-start:.35rem;font-size:.75rem;color:var(--ink-mute);
}
.itile--ready .itile__s{color:var(--palm)}
.itile__s::before{content:"";inline-size:5px;block-size:5px;border-radius:50%;background:currentColor;flex:none}

/* رأس مجموعة التكاملات — العدد يقول للزائر حجم ما يُغطّى بلا أن يعدّ */
.intgroup{margin-block-start:var(--s-7)}
.intgroup__h{
  display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;
  margin-block-end:var(--s-4);padding-block-end:var(--s-3);
  border-block-end:var(--hair) solid var(--rule);
}
.intgroup__h h3{font-family:var(--font-head);font-size:1rem;font-weight:600}
.intgroup__n{font-family:var(--font-num);font-size:.8125rem;color:var(--ink-mute)}

/* --------------------------------------------------------------- بطاقات
   البطاقة ليست صندوقاً بظل — هي وحدة معلومات لها إيقاع داخلي ثابت:
   عنوان صغير اختياري ← عنوان ← نص ← تذييل مفصول بشعرة.
   العمق يأتي من الحدّ والمساحة، لا من الظل. والتفاعل: شريط علوي بلون
   العلامة يتمدّد، وحدّ يغمق، وارتفاع 2px — كلها خصائص مُركَّبة بلا تخطيط. */
/* ═══════════════ الأيقونات ═══════════════
   مصمتة ترث لون النص — لا stroke. القرار من قياس دفترة: ١٤٠ أيقونة،
   صفر منها خطّية (node tests/probe-icons.mjs). الأسلوب الخطّي الرفيع صار
   بصمة المولَّد آلياً منذ أن جعله shadcn/ui افتراضياً أواخر ٢٠٢٤.
   ووراثة اللون تعني أن الأيقونة تعمل في الوضعين وعلى القسم الداكن بلا استثناء. */
.i{
  inline-size:20px;block-size:20px;flex:none;
  fill:currentColor;
  vertical-align:-.22em;                 /* يجلس على خطّ الأساس مع النص العربي */
}
.i--sm{inline-size:16px;block-size:16px}
.i--lg{inline-size:26px;block-size:26px}
/* أيقونة بطاقة تسويقية: المدى المهني ٣٢–٤٨px وهو غير مدى أيقونة الواجهة
   (١٦–٢٤). سببه أن هذه تُمسح بالعين لا تُضغط، فمهمّتها الفرز لا التشغيل. */
.i--xl{inline-size:34px;block-size:34px}

/* الأيقونة بلون الهوية كما تفعل دفترة — لا رمادي محايد يميّعها */
.ico{color:var(--palm);display:block;margin-block-end:var(--s-4)}

/* ═══ تلوين النص ═══
   قاعدة الواحد: لون واحد وكلمة واحدة في العنوان. تلوين ثلاث كلمات فأكثر
   يقرأ رخيصاً وقالبياً — وستراب ولينير وفرسل كلها تلتزم لهجة واحدة
   مستعملة بشحّ. والتباين مفحوص في الوضعين ضمن npm run check. */
.hi{color:var(--palm)}
/* الرقم الملوّن يعمل، والخلفية الملوّنة مع نصّ ملوّن مؤرّخة وتسقط في التباين */
.figure__n .hi,.kpi__n .hi{color:var(--palm)}

/* ═══ لقطة المنتج ═══
   مسطّحة بحدّ رفيع — لا منظور مائل ولا ظلّ ثقيل ولا «مروحة أجهزة».
   هذه التركيبات تبدو جميلة في المسابقات وتُسقط التحويل، لأن الزائر يريد
   رؤية المنتج لا انطباع فنّان عنه. والصورة تُبدَّل مع المظهر كي لا تُبهر
   عينَ من يتصفّح ليلاً بلوحة بيضاء وسط صفحة داكنة. */
.shot{
  margin:0;border:var(--hair) solid var(--rule);border-radius:var(--r);
  overflow:hidden;background:var(--surface);
}
.shot img{inline-size:100%;block-size:auto}
.shot figcaption{
  padding:var(--s-4) var(--s-5);
  border-block-start:var(--hair) solid var(--rule);
  font-size:.875rem;color:var(--ink-mute);line-height:1.8;
}

/* شريط متصفّح مسطّح: ثلاث نقاط وشريط عنوان، بلا ظلّ ولا منظور ولا انحناء
   زائد. القاعدة أعلاه تمنع «مروحة الأجهزة» و«المجسّم المائل» — لا تمنع
   السياق. وأربعة عناصر مسطّحة تقول للزائر «هذه شاشة حقيقية داخل متصفّح»
   بلا أن تضيف بكسلاً واحداً من الزينة. */
.shot__bar{
  display:flex;align-items:center;gap:var(--s-3);
  padding:.5rem var(--s-4);
  background:var(--sunk);
  border-block-end:var(--hair) solid var(--rule);
}
.shot__dots{display:flex;gap:.3rem;flex:none}
.shot__dots span{inline-size:8px;block-size:8px;border-radius:50%;background:var(--rule)}
.shot__url{
  flex:1;min-inline-size:0;
  padding:.15rem .6rem;
  background:var(--paper);
  border:var(--hair) solid var(--rule);border-radius:var(--r-sm);
  font-family:var(--font-num);font-size:.75rem;color:var(--ink-mute);
  text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ⚠️ عطلٌ كان مشحوناً: كان display:block مكتوباً في «.shot img» وأولويّتها
   (0,1,1) تغلب «.shot__dark{display:none}» (0,1,0) — فكانت اللقطة الداكنة
   تظهر تحت الفاتحة في الوضع الفاتح على كل زيارة، ومعها 164KB تُنزَّل بلا
   فائدة. والوضع الداكن كان يعمل صدفةً لأن محدّده (0,2,0) يتجاوز الوسم.
   القاعدة المستفادة: لا تخلط «الوسم + الصنف» مع «الصنف وحده» في خاصيّة
   واحدة — الأولويّة تحسمها لا الترتيب. تُبقى كل قواعد display على الأصناف. */
.shot__light{display:block}
.shot__dark{display:none}
:root[data-theme="dark"] .shot__light{display:none}
:root[data-theme="dark"] .shot__dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .shot__light{display:none}
  :root:not([data-theme="light"]) .shot__dark{display:block}
}
.tile__tag .i{color:var(--palm)}

/* على القسم الداكن ترث الحبر الفاتح كي لا يختفي الأخضر الغامق */
.section--ink .ico{color:var(--on-ink)}

/* سطر بأيقونة: تُثبَّت الأيقونة ولا تتمدّد مع النص */
.iline{display:flex;align-items:flex-start;gap:.6rem}
.iline .i{margin-block-start:.15em;color:var(--palm)}

.cards{
  display:grid;gap:var(--s-4);grid-template-columns:1fr;
  align-items:stretch;
}
/* ⚠ الرباعية تحتاج درجة العمودين مثل غيرها. كانت مستثناة، فتقفز ١ → ٤ بلا وسط —
   وقياس ٧٦٨px أعطى أربعة أشرطة بعرض ٧٢٠px فيها سطرٌ واحد نصّاً. مدى الآيباد بالضبط. */
@media (min-width:48rem){ .cards--2,.cards--3,.cards--4{grid-template-columns:repeat(2,1fr)} }
@media (min-width:64rem){
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .cards--4{grid-template-columns:repeat(4,1fr)}
}

/* subgrid: العناوين والنصوص والتذييلات تتحاذى عبر البطاقات مهما اختلف الطول */
@supports (grid-template-rows:subgrid){
  @media (min-width:48rem){
    .cards--align{grid-auto-rows:auto}
    /* ⚠ عدد الصفوف الممتدّة يجب أن **يساوي عدد أبناء البطاقة** بالضبط.
       الشبكة الفرعية تعرّف هذا العدد من المسارات لا غير، والابن الزائد يقع في
       مسارٍ ضمنيّ خارجها فيرتسم **فوق آخر ابن** — لا تحته. رُصد حيّاً: تداخل
       40px بين آخر بند و‏.card__foot في أربع شبكات، ظهر لحظة تفعيل الشبكة
       الفرعية (بحذف container-type) ولم يكن ظاهراً قبلها لأنها كانت معطَّلة.
       ويحرس هذا الثباتَ فحصُ التداخل — npm run overlap. */
    .cards--align .card{grid-row:span 3;display:grid;grid-template-rows:subgrid}
    .cards--r4 .card{grid-row:span 4}
    .cards--r5 .card{grid-row:span 5}
  }
}

/* ⚠ لا ‎container-type‎ هنا. كان مكتوباً، و«الاحتواء» الذي يجلبه يُبطِل
   ‎grid-template-rows:subgrid‎ في ‎.cards--align‎ إبطالاً صامتاً — قِيس:
   الخاصية تُحسَب ‎none‎ بوجوده و‎subgrid‎ بغيابه. وما كان يُبرّره استعلامُ حاوٍ
   لا يمكن أن يعمل أصلاً: ‎@container{.card{…}}‎ يقيس حاوياً **جدّاً**، والبطاقة
   لا تستعلم عن نفسها — فقيست الحشوة على 19 بطاقة فخرجت 32px في كلّها. */
.card{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;gap:var(--s-3);
  padding:var(--s-6);
  background:var(--surface);
  border:var(--hair) solid var(--rule);
  border-radius:var(--r);
  transition:
    border-color var(--t-3) var(--ease),
    background-color var(--t-3) var(--ease),
    translate var(--t-3) var(--ease);
}
/* الشريط العلوي: يبدأ من الحافة الابتدائية فينساب مع اتجاه القراءة */
.card::before{
  content:"";position:absolute;z-index:1;
  inset-block-start:-1px;inset-inline-start:-1px;
  block-size:2px;inline-size:0;
  background:var(--palm);
  transition:inline-size var(--t-4) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .card:hover{border-color:var(--ink-mute);translate:0 -2px}
  .card:hover::before{inline-size:calc(100% + 2px)}
}
/* البطاقة المختارة في مقارنة — نفس مفردة ‎.plan--pick‎ في صفحة الأسعار.
   بلا تمييز، تخرج البطاقتان بحدٍّ واحد وخلفيةٍ واحدة، فلا يعرف القارئ أيّهما نحن. */
.card--pick{border-color:var(--ink)}
.card--pick::before{inline-size:calc(100% + 2px)}

/* بطاقة تحوي رابطاً: التركيز بلوحة المفاتيح يجب أن يُرى على البطاقة كلها */
.card:focus-within{border-color:var(--ink);translate:0 -2px}
.card:focus-within::before{inline-size:calc(100% + 2px)}

.card__eyebrow{
  font-family:var(--font-num);font-size:.75rem;color:var(--ink-mute);
  letter-spacing:.06em;text-transform:uppercase;
}
.card h3,.card__title{font-family:var(--font-head);font-size:1.0625rem;font-weight:600;line-height:1.5}
.card p{font-size:.9375rem;color:var(--ink-soft);margin:0}
.card ul{font-size:.9375rem;color:var(--ink-soft)}
.card__foot{
  margin-block-start:auto;padding-block-start:var(--s-4);
  border-block-start:var(--hair) solid var(--rule);
  font-size:.8125rem;color:var(--ink-mute);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
}
/* حُذف استعلام حاوٍ ميّت كان هنا: ‎@container{.card{padding:--s-7}}‎.
   عنصرٌ لا يستعلم عن حاويته وهو نفسه الحاوي — القاعدة لم تُطبَّق يوماً. */

/* على السطح الداكن */
.section--ink .card{background:var(--ink-surface-2);border-color:var(--on-ink-rule)}
.section--ink .card p{color:var(--on-ink-mute)}
.section--ink .card__foot{border-block-start-color:var(--on-ink-rule);color:var(--on-ink-mute)}
.section--ink .card::before{background:var(--on-ink)}
@media (hover:hover) and (pointer:fine){
  /* الارتفاع برفع الحبر فوق السطح، لا بلون مكتوب باليد — يبقى محايداً في الوضعين */
  .section--ink .card:hover{border-color:var(--on-ink-mute);background:color-mix(in srgb,var(--on-ink) 6%,var(--ink-surface-2))}
}

/* بطاقة قابلة للنقر بالكامل مع بقاء نص الرابط وحده هو الاسم المقروء */
.card--link .card__title a::after{content:"";position:absolute;inset:0;z-index:2}
.card--link .card__title a{text-decoration:none;color:inherit}
.card--link{cursor:pointer}

/* --------------------------------------------------------- أسئلة شائعة */
.faq{border-block-start:var(--hair) solid var(--rule)}
.faq__item{border-block-end:var(--hair) solid var(--rule)}
.faq__q{
  inline-size:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding-block:var(--s-5);padding-inline:0;
  background:none;border:0;cursor:pointer;text-align:start;
  font-size:var(--step-0);font-weight:600;color:var(--ink);min-block-size:46px;
  touch-action:manipulation;
}
.faq__q:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.faq__sign{
  flex:none;inline-size:14px;block-size:14px;position:relative;
}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;background:var(--ink-mute);
  inset-block-start:50%;inset-inline-start:0;inline-size:100%;block-size:1.5px;translate:0 -50%;
}
.faq__sign::after{rotate:90deg;transition:rotate var(--t-3) var(--ease),opacity var(--t-1) var(--ease)}
.faq__q[aria-expanded="true"] .faq__sign::after{rotate:0deg;opacity:0}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-4) var(--ease)}
.faq__a>div{overflow:hidden}
.faq__item[data-open="true"] .faq__a{grid-template-rows:1fr}
.faq__a p{padding-block-end:var(--s-5);color:var(--ink-soft);max-inline-size:70ch}

/* ------------------------------------------------------------- النماذج */
.field{display:block;margin-block-end:var(--s-5)}
.field__label{display:block;font-weight:600;font-size:.9375rem;margin-block-end:.45rem}
.field__req{color:var(--danger)}
.field__input,.field__select,.field__area{
  inline-size:100%;min-block-size:46px;
  padding:.65rem .8rem;
  background:var(--surface);color:var(--ink);
  border:var(--hair) solid var(--rule);border-radius:var(--r);
  transition:border-color var(--t-2) var(--ease),box-shadow var(--t-2) var(--ease);
}
.field__area{min-block-size:110px;resize:vertical;line-height:1.8}
.field__input:focus-visible,.field__select:focus-visible,.field__area:focus-visible{
  outline:none;border-color:var(--palm);box-shadow:0 0 0 3px var(--palm-ring);
}
.field__input:user-invalid,.field__area:user-invalid{border-color:var(--danger)}
/* 14px أرضية: العربية تُقرأ أصغر من اللاتينية بنفس المقاس، ودون ذلك يشقّ النص المساعد */
.field__hint{margin-block-start:.4rem;font-size:.875rem;color:var(--ink-mute)}
.field__err{margin-block-start:.4rem;font-size:.8125rem;color:var(--danger);font-weight:500}
.field__err:empty{display:none}

/* مجموعة خيارات كأزرار — أوضح من select على الجوال */
.choices{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inline-size:100%;block-size:100%;inset:0;cursor:pointer;margin:0}
.choice span{
  display:block;padding:.55rem .9rem;
  border:var(--hair) solid var(--rule);border-radius:var(--r);
  background:var(--surface);font-size:.9375rem;
  transition:border-color var(--t-2) var(--ease),background-color var(--t-2) var(--ease),color var(--t-1) var(--ease);
}
.choice input:checked + span{border-color:var(--ink);background:var(--ink);color:var(--paper);font-weight:600}
.choice input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover) and (pointer:fine){ .choice input:not(:checked):hover + span{border-color:var(--ink-mute)} }

/* مجموعة حقول — كانت أربع سمات style مضمّنة تكرّر الإعلانات نفسها.
   وfieldset يحمل حدّاً وحشواً افتراضيَّين من المتصفّح فلا بدّ من صفرهما. */
.fset{border:0;padding:0;margin:0 0 var(--s-5);min-inline-size:0}
.fset__legend{padding:0}

/* خطوات مرقّمة — الرقم وحده بخطّ الأرقام، والنصّ بخطّ المتن.
   وكان الصنف num على ‎<ol>‎ كلّها، و‎--font-num‎ أحاديّ العرض لاتينيّ فقط،
   فكانت أربع جمل عربية تسقط إلى خطّ نظام خارج نظام الخطوط.
   ⚠ ولا تُسمَّ ‎.steps‎: الاسم مأخوذ في السطر 602 لقسمٍ بثلاثة أعمدة وخطٍّ علويّ،
   فورث هذا البلوك أعمدتَه صامتاً — وقاعدة «كل صنف معرَّف» لا تلتقط اصطداماً
   لأن الصنف **معرَّف** فعلاً. رُئي من الصورة لا من رقم. */
.nextsteps{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-4);
  font-size:.9375rem;color:var(--ink-soft);line-height:1.7}
.nextsteps li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start}
.nextsteps .num{
  display:grid;place-items:center;inline-size:1.6rem;block-size:1.6rem;
  border:var(--hair) solid var(--rule);border-radius:50%;
  font-size:.8125rem;color:var(--ink);
}

/* ════════════════════ دليل الواجهة البرمجية — ‎/developers/api/‎ ════════════════════
   ثلاثة أعمدة على سطح المكتب (فهرس · شرح · شيفرة) لأن هذا ما استقرّت عليه
   أدبيات التوثيق: العين تقرأ الشرح واليد تنسخ الشيفرة بلا تمرير بينهما.
   وعمود واحد على الجوال بترتيب الـDOM — لا order، فترتيب التركيز واحد. */
.apidoc{display:grid;gap:var(--s-7)}
/* ⚠ ابن الشبكة ‎min-inline-size:auto‎ افتراضاً، فأوسعُ ‎<pre>‎ غير قابلٍ للالتفاف
   يمدّ العمود ويمدّ معه الفهرس — قيس 719px داخل 320px. نفس القاعدة القائمة
   لـ‎.cols‎ و‎.cards‎ و‎.bento‎، وقد نسيتُ ضمّ الجديد إليها. */
.apidoc>*{min-inline-size:0}
@media (min-width:64rem){
  .apidoc{grid-template-columns:14rem 1fr;column-gap:var(--s-8);align-items:start}
  .apidoc__toc{position:sticky;inset-block-start:var(--s-6);max-block-size:calc(100dvh - 8rem);overflow-y:auto}
}
.apidoc__toc ol{list-style:none;padding:0;margin:0;display:grid;gap:.15rem;
  border-inline-start:var(--hair) solid var(--rule)}
.apidoc__toc a{display:block;padding:.45rem .9rem;font-size:.875rem;
  color:var(--ink-soft);text-decoration:none;border-inline-start:2px solid transparent;
  margin-inline-start:-1px;min-block-size:24px}
.apidoc__toc a:hover{color:var(--ink);border-inline-start-color:var(--rule)}
.apidoc__toc a[aria-current="true"]{color:var(--ink);font-weight:600;border-inline-start-color:var(--ink)}
.apidoc__toc h2{font-size:.75rem;letter-spacing:0;color:var(--ink-mute);
  text-transform:none;margin-block-end:var(--s-3);font-weight:600}

/* نقطة نهاية: سطر الطريقة والمسار، ثم الشرح، ثم الحقول، ثم مثالان. */
.ep{border:var(--hair) solid var(--rule);border-radius:var(--r);
  background:var(--surface);overflow:hidden;margin-block-start:var(--s-5)}
.ep__bar{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;
  padding:var(--s-4) var(--s-5);background:var(--sunk);
  border-block-end:var(--hair) solid var(--rule)}
.ep__path{font-family:var(--font-num);font-size:.875rem;direction:ltr;
  unicode-bidi:isolate;color:var(--ink);word-break:break-all}
.ep__body{padding:var(--s-5);display:grid;gap:var(--s-5)}
.ep h3{font-size:1rem}

/* الطريقة: لونٌ واحد لكل الطرق عمداً — التمييز بالكلمة لا بالطيف، فاللوحة
   مقفلة والأخضر محجوز للعلامة. والوزن والخلفية يكفيان للتفريق. */
.meth{font-family:var(--font-num);font-size:.75rem;font-weight:500;
  padding:.25rem .5rem;border-radius:3px;background:var(--ink);color:var(--paper);
  direction:ltr;unicode-bidi:isolate;flex:none}

/* شارة الحالة — وهي ما يميّز دليلاً هندسياً عن كتيّب: لا نقول «كل شيء جاهز».
   ‎--ok‎ لما هو في الكود اليوم، و‎--spec‎ لما هو التزامٌ يُبنى عند التأسيس. */
/* ⚠ لا 999px: قاعدتا «لا أزرار كبسولية» و«الأقطار محصورة» ترفضانها — والكبسولة
   هي بعينها العلامة التي بُني عليها نظام التصميم للابتعاد عنها. 3px تكفي. */
.st{font-size:.75rem;font-weight:600;padding:.2rem .55rem;border-radius:var(--r-sm);
  border:var(--hair) solid var(--rule);color:var(--ink-mute);flex:none;line-height:1.6}
.st--ok{border-color:var(--palm);color:var(--palm)}
.st--spec{border-color:var(--amber);color:var(--amber)}

/* جدول الحقول — مفتاح ونوع ووصف. النوع بخطّ الأرقام لأنه رمزٌ لا كلمة. */
.flds{inline-size:100%;border-collapse:collapse;font-size:.875rem}
.flds th,.flds td{text-align:start;padding:.6rem .75rem;
  border-block-end:var(--hair) solid var(--rule);vertical-align:top}
.flds tbody tr:last-child th,.flds tbody tr:last-child td{border-block-end:0}
.flds th[scope="row"]{font-family:var(--font-num);font-weight:500;color:var(--ink);white-space:nowrap}
.flds .ty{font-family:var(--font-num);font-size:.8125rem;color:var(--ink-mute);white-space:nowrap}
.flds .req{color:var(--danger);font-size:.75rem;font-weight:600}

.apidoc h2{scroll-margin-block-start:var(--s-8)}
.apidoc__sec + .apidoc__sec{margin-block-start:var(--s-8);padding-block-start:var(--s-7);
  border-block-start:var(--hair) solid var(--rule)}

/* ------------------------------------------ استمارة التأهيل — ‎/contact/‎
   ثلاثة أبناء بترتيب الجوال في الـDOM، ويُعاد وضعهم بالشبكة على سطح المكتب.
   ولا نستعمل order: هو يفصل ترتيب القراءة عن ترتيب التركيز بلوحة المفاتيح. */
.lead{display:grid;gap:var(--s-6)}
.lead__after{margin-block-start:var(--s-6)}
@media (min-width:60rem){
  .lead{grid-template-columns:7fr 5fr;column-gap:var(--s-7);align-items:start}
  .lead__form{grid-column:1;grid-row:1 / span 2}
  .lead__side{grid-column:2;grid-row:1}
  .lead__stop{grid-column:2;grid-row:2}
}

/* --------------------------------------------------------------- إشعار */
.notice{
  display:flex;gap:var(--s-4);align-items:flex-start;
  padding:var(--s-5);border:var(--hair) solid var(--rule);border-radius:var(--r);
  background:var(--surface);font-size:.9375rem;
}
.notice--amber{border-color:var(--amber)}
.notice--amber b{color:var(--amber)}

/* ------------------------------------------------------------- التذييل */
/* الحشو العلوي أخفّ ممّا كان: الخاتمة داكنة والتذييل داكن، فكان 112px من
   حشوها + 64px من حشوه = 176px تندمج في كتلة سوداء واحدة تُقرأ فراغاً ميّتاً
   لا تنفّساً. والشعرة تفصل السطحين فيبين أين انتهى القسم وبدأ التذييل. */
.foot{
  background:var(--ink-surface);color:var(--on-ink-mute);
  padding-block:var(--s-7) var(--s-6);
  border-block-start:var(--hair) solid var(--on-ink-rule);
}
.foot a{color:var(--on-ink-mute);text-decoration:none;transition:color var(--t-1) var(--ease)}
.foot a:hover{color:var(--on-ink);text-decoration:underline}
.foot__grid{display:grid;gap:var(--s-7);grid-template-columns:1fr}
@media (min-width:36rem){ .foot__grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:60rem){ .foot__grid{grid-template-columns:1.5fr repeat(4,1fr)} }
/* عمود الهوية يمتدّ على عرض الشبكة في الدرجة الوسطى، فلا يُحشر سطرُه في نصف عمود */
@media (min-width:36rem) and (max-width:59.99rem){ .foot__id{grid-column:1/-1} }
.foot h4{color:var(--on-ink);font-size:.8125rem;font-weight:600;margin-block-end:var(--s-4);text-transform:uppercase;letter-spacing:.06em}
.foot ul{display:flex;flex-direction:column;gap:.25rem;font-size:.9375rem}
/* ⚠ أرضية 24px لهدف اللمس (WCAG 2.5.8). قِيس قبلها: 21px — كان ينجو باستثناء
   التباعد وحده، وهو استثناء يسقط لحظة تتقارب الأهداف كما في صفّ الأيقونات. */
.foot li a{display:inline-flex;align-items:center;min-block-size:24px}
.foot__brand{
  font-family:var(--font-head);font-weight:700;
  font-size:1.875rem;letter-spacing:-.04em;line-height:1.35;display:inline-block;
  background:linear-gradient(to left,#4FB98A 0 13%,var(--on-ink) 13% 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* ⚠ في وضع الألوان القسرية يختفي أي نصّ ملوَّن بقصّ الخلفية — فيُعاد
   إلى لونٍ صريح. والنصّ نفسه سليم دائماً: التدرّج يلوّن الرسم لا المحتوى،
   فقارئ الشاشة يقرأ «ناطق» في الحالتين. */
@media (forced-colors:active){
  .brand,.foot__brand{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}
}
.foot__note{margin-block-start:var(--s-4);font-size:.875rem;max-inline-size:38ch;line-height:1.8}
/* الرابط داخل فقرة يجب أن يُميَّز بغير اللون (WCAG 1.4.1)، و‎.foot a‎ تنزع
   التسطير لأنها كُتبت لقوائم الأعمدة. ونوعيّتهما متساوية (0,1,1) فالترتيب
   يحسم — ولذلك موضع هذه القاعدة بعدها لا قبلها. */
.foot__note a{color:var(--on-ink);text-decoration:underline;text-underline-offset:.2em}
/* ⚠ الوسم مقصود: «‎.foot ul‎» نوعيّةٌ (0,1,1) تغلب «‎.foot__social‎» (0,1,0)،
   فكان ‎flex-direction:column‎ يفوز والأيقونات تنزل عموداً على سطح المكتب.
   نفس انقلاب الأولوية الذي أوقع ‎.shot img‎ من قبل — الترتيب لا يحسم، الوزن يحسم. */
.foot ul.foot__social{
  flex-direction:row;flex-wrap:wrap;gap:.5rem;margin-block-start:var(--s-5);
}
.foot__social a{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:40px;block-size:40px;border-radius:var(--r-sm);
  border:var(--hair) solid var(--on-ink-rule);
  transition:border-color var(--t-1) var(--ease),color var(--t-1) var(--ease);
}
.foot__social a:hover{color:var(--on-ink);border-color:var(--on-ink-mute);text-decoration:none}
.foot__bottom{
  margin-block-start:var(--s-8);padding-block-start:var(--s-5);
  border-block-start:var(--hair) solid var(--on-ink-rule);
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);font-size:.8125rem;
}

/* --------------------------------------------------- المساعد الذكي */
.assist-launch{
  position:fixed;z-index:90;
  inset-block-end:var(--s-5);inset-inline-end:var(--s-5);
  display:inline-flex;align-items:center;gap:.55rem;
  min-block-size:48px;padding:.6rem 1rem;
  background:var(--ink);color:var(--paper);
  border:var(--hair) solid var(--ink);border-radius:var(--r);
  font-weight:600;font-size:.9375rem;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform var(--t-3) var(--ease),background-color var(--t-2) var(--ease);
}
@media (hover:hover) and (pointer:fine){ .assist-launch:hover{transform:translateY(-1px)} }
.assist-launch:active{transform:translateY(0) scale(.985);transition-duration:60ms}
.assist-launch__dot{inline-size:7px;block-size:7px;border-radius:50%;background:#39C07F;flex:none}
.assist-launch[aria-expanded="true"]{opacity:0;pointer-events:none}
/* ⚠ عنصرٌ ثابت يغطّي المحتوى دائماً، فحجمه يُقاس بنسبة الشاشة لا ببكسلاته:
   قِيس 175px = **51% من عرض 344px** — يحجب سطر سعرٍ كاملاً. فيصير أيقونةً
   على الجوال (48×48) ونصّاً من 480px فصاعداً، والاسم في aria-label دائماً. */
.assist-launch__t{display:none}
.assist-launch__i{display:block;inline-size:20px;block-size:20px}
@media (min-width:30rem){
  .assist-launch__t{display:inline}
  .assist-launch__i{display:none}
}

.assist{
  position:fixed;z-index:95;
  inset-block-end:var(--s-5);inset-inline-end:var(--s-5);
  inline-size:min(calc(100vw - 2*var(--s-5)),380px);
  max-block-size:min(76vh,620px);
  display:none;flex-direction:column;
  background:var(--surface);
  border:var(--hair) solid var(--ink);border-radius:var(--r);
  overflow:hidden;
}
.assist[data-open="true"]{display:flex}
@media (prefers-reduced-motion:no-preference){
  .assist[data-open="true"]{animation:assist-in var(--t-4) var(--ease-decel) both}
}
@keyframes assist-in{from{opacity:0;translate:0 10px}}

.assist__top{
  display:flex;align-items:center;gap:.6rem;
  padding:var(--s-4);border-block-end:var(--hair) solid var(--rule);background:var(--sunk);
}
.assist__id{inline-size:28px;block-size:28px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;flex:none}
.assist__name{font-weight:600;font-size:.9375rem;line-height:1.3}
.assist__state{font-size:.75rem;color:var(--ink-mute);font-family:var(--font-num)}
.assist__x{
  margin-inline-start:auto;inline-size:34px;block-size:34px;
  display:grid;place-items:center;background:transparent;
  border:var(--hair) solid var(--rule);border-radius:var(--r);cursor:pointer;
  transition:border-color var(--t-2) var(--ease),background-color var(--t-2) var(--ease);
}
.assist__x:hover{background:var(--surface);border-color:var(--ink-mute)}

.assist__log{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);
  scrollbar-gutter:stable;
}
.assist__msg{max-inline-size:88%;padding:.55rem .8rem;border-radius:var(--r);font-size:.9375rem;line-height:1.7}
.assist__msg--bot{background:var(--sunk);align-self:flex-start}
.assist__msg--me{background:var(--ink);color:var(--paper);align-self:flex-end}
.assist__msg a{color:inherit;font-weight:600}
.assist__msg--bot a{color:var(--palm)}
.assist__disc{font-size:.75rem;color:var(--ink-mute);text-align:center;padding-block:var(--s-2)}

.assist__chips{display:flex;flex-wrap:wrap;gap:var(--s-2);padding:0 var(--s-4) var(--s-3)}
.assist__chip{
  padding:.35rem .65rem;font-size:.8125rem;
  background:var(--surface);border:var(--hair) solid var(--rule);border-radius:var(--r);
  cursor:pointer;color:var(--ink-soft);
  transition:border-color var(--t-2) var(--ease),color var(--t-1) var(--ease);
}
.assist__chip:hover{border-color:var(--ink);color:var(--ink)}

.assist__form{display:flex;gap:var(--s-2);padding:var(--s-3);border-block-start:var(--hair) solid var(--rule);background:var(--sunk)}
.assist__in{
  flex:1;min-block-size:42px;padding:.5rem .7rem;
  background:var(--surface);border:var(--hair) solid var(--rule);border-radius:var(--r);
}
.assist__in:focus-visible{outline:none;border-color:var(--palm);box-shadow:0 0 0 3px var(--palm-ring)}
.assist__send{
  min-inline-size:42px;min-block-size:42px;display:grid;place-items:center;
  background:var(--ink);color:var(--paper);border:0;border-radius:var(--r);cursor:pointer;
  transition:background-color var(--t-2) var(--ease),transform var(--t-3) var(--ease);
}
.assist__send:active{transform:scale(.96);transition-duration:60ms}
.assist__typing{display:flex;gap:4px;align-items:center;padding:.7rem .8rem;background:var(--sunk);border-radius:var(--r);align-self:flex-start}
.assist__typing i{inline-size:5px;block-size:5px;border-radius:50%;background:var(--ink-mute);animation:blink 1.2s var(--ease) infinite}
.assist__typing i:nth-child(2){animation-delay:.18s}
.assist__typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ------------------------------------------------------------ الترويسة */
.pagehead{padding-block:var(--s-8) var(--s-7);border-block-end:var(--hair) solid var(--rule)}
.crumbs{display:flex;gap:.5rem;font-size:.8125rem;color:var(--ink-mute);margin-block-end:var(--s-4)}
/* فتات الخبز أوّل رابط في الصفحة على الجوال — وارتفاعه كان 23px. */
.crumbs a{text-decoration:none;color:var(--ink-mute);display:inline-flex;align-items:center;min-block-size:24px}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs li{display:flex;gap:.5rem;align-items:center}
.crumbs li+li::before{content:"/";color:var(--rule);font-family:var(--font-num)}
.pagehead p{margin-block-start:var(--s-4);font-size:var(--step-1);color:var(--ink-soft);max-inline-size:56ch}

/* -------------------------------------------------------------- الوسوم */
.eyebrow{
  font-family:var(--font-num);font-size:.75rem;color:var(--ink-mute);
  text-transform:uppercase;letter-spacing:.08em;display:block;margin-block-end:var(--s-3);
}
.section--ink .eyebrow{color:var(--on-ink-mute)}
.lede{font-size:var(--step-1);color:var(--ink-soft);max-inline-size:58ch;line-height:1.75}
/* سطر الموقف: أثقل من الحاشية وأخفّ من اللِيد. موضعه بعد مقارنة أو ادّعاء،
   لأن الاعتراف الصريح هو مصدر المصداقية في الرسالة ثنائية الجانب — فلا يليق
   به 15px بأخفت لون في النظام، وهو ما كان. */
.stance{font-size:1.0625rem;color:var(--ink);max-inline-size:62ch;line-height:1.7}
.section--ink .stance{color:var(--on-ink)}
.section--ink .lede{color:var(--on-ink-mute)}
}

@layer utilities{
  .vh{position:absolute!important;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
  .mt-2{margin-block-start:var(--s-2)}
  .mt-3{margin-block-start:var(--s-3)}
  .mt-4{margin-block-start:var(--s-4)}
  .mt-5{margin-block-start:var(--s-5)}
  .mt-6{margin-block-start:var(--s-6)}
  .mt-7{margin-block-start:var(--s-7)}
  .mt-8{margin-block-start:var(--s-8)}
  .center{text-align:center;margin-inline:auto}
  .muted{color:var(--ink-mute)}
  .hide{display:none!important}
}

/* الانتقال بين الصفحات: قصّة سينمائية في كروم وسفاري، وتنقّل عادي في فايرفوكس */
@view-transition{navigation:auto}
::view-transition-old(root){animation-duration:180ms;animation-timing-function:var(--ease-in)}
::view-transition-new(root){animation-duration:260ms;animation-timing-function:var(--ease-decel)}

/* تبديل المظهر: كشف دائري بدل التلاشي. الطبقة القديمة تثبت والجديدة تُقصّ.
   يُفعَّل فقط أثناء التبديل حتى لا يمسّ انتقال الصفحات. */
:root.theme-vt::view-transition-old(root),
:root.theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root.theme-vt::view-transition-old(root){z-index:1}
:root.theme-vt::view-transition-new(root){z-index:2}

/* الظهور عند التمرير — الافتراضي ظاهر دائماً، فلا يرى أحد صفحة فارغة */
[data-reveal]{opacity:1}
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{transition:opacity 320ms var(--ease),translate 320ms var(--ease)}
  [data-reveal]:not(.is-in){opacity:0;translate:0 12px}
}

/* شبكة الأمان الأخيرة — تلتقط كل ما فات */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    transition-delay:0ms!important;
    scroll-behavior:auto!important;
    view-transition-name:none!important;
  }
}

@media print{
  .masthead,.assist,.assist-launch,.skip-link,.foot{display:none!important}
  body{background:#fff}
}