/* ═══════════════════════════════════════════════════════════════════════
   وَصل — سطح التسويق.  v3.0 · «SaaS مؤسّسيّ مميّز»

   يبني على `tokens.css` ولا يعرّف لونًا خامًا إلا حيث يلزم قناعٌ أو طبقةٌ
   شفّافة (لا رمز لها). واللوحة هي لوحة اللوحة نفسها: كُحليٌّ للسلطة وأزرقٌ
   كهربائي للفعل — **فصفحةُ البيع ولوحةُ المنتج تُقرآن منتجًا واحدًا**،
   وهو شرطُ ثقةٍ قبل أن يكون شرطَ ذوق: من يرى صفحةً بلوحةٍ ولوحةً بأخرى
   يظنّ أنه اشترى غير ما رأى.

   ── ما يفرّق هذه الورقة عن `ui.css` ──

   الإيقاع لا المكوّنات. سلّم `--s*` (٤ ← ١٤٠) أوسع من سلّم اللوحة عمدًا:
   صفحةٌ تُمسح بالتمرير تحتاج فراغًا يفصل الأفكار، ولوحةٌ تُمسح بالعين
   تحتاج كثافةً تجمع الأرقام. والقياسات هنا `clamp` لأن العرض يتغيّر من
   ٣٧٥ إلى ١٩٢٠ على نفس الصفحة.

   ── و`.ic` هنا هي `.ic` هناك ──

   ١٨px بلا خلفية، كي يعمل `<x-ui.icon>` المشترك على هذا السطح بلا أن
   تحمّل الصفحةُ التسويقية `ui.css` كاملًا. والمربّع المصبوغ الذي كان
   يسمّى `.ic` صار `.ic-box` — الاسمان كانا يتصادمان بصمت.

   ── ومن يحمّلها الآن ──

   الوثيقتان القانونيتان وحدهما. الصفحةُ التعريفية `/` انتقلت إلى
   `landing.css` (2026-10-04)، والأدواتُ (`/tools`) لحقتها إلى ليلها (2026-10-19 ·
   `tools.css` وأخذت قواعدَ `tl-*` معها) — فما بقي هنا هو ما تكتبه قوالبُ
   الوثيقتين في `class`، لا أكثر. قاعدةٌ تُضاف هنا للأدوات لن تصلها.
   ═══════════════════════════════════════════════════════════════════════ */

body {
  background: var(--surface);
  color: var(--ink-600);
  font-size: 16px;
  line-height: 1.75;
}

/* ═══════════════════ الهيكل ════════════════════════════════════════════ */

.wrap { inline-size: min(1200px, 100% - 2 * var(--s5)); margin-inline: auto; }

.sec { padding-block: var(--s9); position: relative; }
.sec--sunk { background: var(--surface-sunk); }

.sec-head { max-width: 680px; margin-inline: auto; text-align: center; margin-block-end: var(--s7); }
.sec-head h2 { font-size: clamp(26px, 3.4vw, 40px); margin-block: var(--s3) var(--s4); }
.sec-head p  { color: var(--ink-500); font-size: 17px; line-height: 1.85; }

/* ── العنوان الفوقيّ: خطٌّ كهربائيّ ثم كلمة ──
   الخطّ ليس زخرفة: العناوين العربية بلا علامةٍ قبلها تبدأ كلُّها بنفس
   الثقل البصري، فيصعب على العين أن تعرف أين بدأ قسمٌ جديد أثناء التمرير. */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  color: var(--brand-600);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
}
.eyebrow::before {
  content: "";
  inline-size: 22px; block-size: 2px;
  border-radius: var(--r-full);
  background: var(--brand-500);
}

/* ═══════════════════ الأيقونة ══════════════════════════════════════════
   نفس عقد `ui.css`: ١٨px، بلا خلفية، بـ`currentColor`. */
.ic { inline-size: 18px; block-size: 18px; flex: none; }
.ic-sm { inline-size: 15px; block-size: 15px; }
.ic-lg { inline-size: 22px; block-size: 22px; }

/* المربّع المصبوغ — حاملُ الأيقونة حين تحتاج وزنًا بصريًّا. */
.ic-box {
  display: grid; place-items: center;
  inline-size: 44px; block-size: 44px;
  border-radius: var(--r-md);
  flex: none;
}

/* ═══════════════════ الأزرار ═══════════════════════════════════════════
   ثلاثة فقط. الرابع يعني أن أحدها لم يكن له سبب. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-block-size: var(--touch);
  padding-inline: var(--s6);
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  font-weight: 700; font-size: 15px;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--brand-500); color: var(--white);
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover { background: var(--brand-600); }

.btn-ghost {
  background: var(--white); color: var(--ink-800);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-xs);
}
.btn-ghost:hover { border-color: var(--brand-300); color: var(--brand-700); background: var(--brand-50); }

.btn-quiet { background: transparent; color: var(--ink-600); padding-inline: var(--s4); }
.btn-quiet:hover { color: var(--brand-600); background: var(--brand-50); }

.btn-sm { min-block-size: 40px; padding-inline: var(--s5); font-size: 14px; }

/* الأجهزة اللمسية: كل ما يُنقر يرجع إلى الأرضية مهما صغُر شكله.
   **والأرضية بحسب أداة الإشارة لا عرض الشاشة** — لوحيٌّ بعرض ١٠٢٤ يُلمس
   بالإصبع ويرى روابط الشريط كاملةً، فلا ينفع أن تُرفع مع كسر الجوّال. */
@media (pointer: coarse) {
  .btn-sm,
  .nav-links a { min-block-size: var(--touch); }
}

/* ═══════════════════ الشريط العلوي ═════════════════════════════════════
   ثابتٌ، شفّافٌ قليلًا، ويكتسب حدًّا وظلًّا عند التمرير — لا يتغيّر ارتفاعه:
   شريطٌ ينكمش يزحزح كل ما تحته سطرًا كاملًا في منتصف القراءة. */
.nav {
  position: sticky; inset-block-start: 0; z-index: 60;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(1.7) blur(16px);
  -webkit-backdrop-filter: saturate(1.7) blur(16px);
  border-block-end: 1px solid transparent;
  transition: background-color var(--base) var(--ease),
              border-color var(--base) var(--ease),
              box-shadow var(--base) var(--ease);
}
.nav.is-stuck {
  background: rgba(255, 255, 255, .94);
  border-block-end-color: var(--line);
  box-shadow: var(--shadow-xs);
}
.nav-in { display: flex; align-items: center; gap: var(--s4); block-size: 72px; }

.brand {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-weight: 800; font-size: 19px; color: var(--ink-900);
  flex: none;
}
.brand-mk {
  display: grid; place-items: center; overflow: hidden;
  inline-size: 38px; block-size: 38px;
  border-radius: var(--r-sm);
  background: var(--brand-fixed-950);
  color: var(--on-brand-fixed);
  box-shadow: var(--shadow-brand);
}
.brand-mk svg { inline-size: 21px; block-size: 21px; }

.nav-links { display: flex; align-items: center; gap: 2px; margin-inline-start: var(--s5); }
.nav-links a {
  display: inline-flex; align-items: center;
  min-block-size: 40px;
  padding-inline: var(--s4);
  border-radius: var(--r-sm);
  color: var(--ink-600); font-size: 15px; font-weight: 600;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.nav-links a:hover { color: var(--brand-600); background: var(--brand-50); }
/* لا ينكسر الرابطُ سطرين (المالك ٢٠٢٦-١٠-١٩): ستّةُ روابطَ وزرّان في حاويةٍ ١٢٠٠ كانت تلتفّ
   على كلِّ عرض — حتى ١٩٠٠ — لأن الحاويةَ لا تتّسع مع الشاشة. والدرجُ يبدأ حيث لا تتّسع (تحت). */
.nav-links a { white-space: nowrap; }
.nav-links a[aria-current="page"], .nav-drawer nav a[aria-current="page"] { color: var(--brand-600); background: var(--brand-50); }

.nav-end { display: flex; align-items: center; gap: var(--s3); margin-inline-start: auto; }

/* مبدّلُ اللغة في شريط الصفحة التعريفية — بلغة روابطه نفسِها. */
.sf-lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 40px; min-inline-size: 44px; padding-inline: var(--s4);
  border-radius: var(--r-sm);
  color: var(--ink-600); font-size: 15px; font-weight: 600; text-decoration: none;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.sf-lang:hover { color: var(--brand-600); background: var(--brand-50); }

.nav-burger {
  display: none;
  place-items: center;
  inline-size: var(--touch); block-size: var(--touch);
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--white); color: var(--ink-700);
  cursor: pointer;
}

/* ── درج الجوّال ──
   يدخل من حافّة القراءة (اليمنى في RTL). و`inert` على ما تحته من عمل
   السكربت لا من عمل الورقة. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(15, 23, 42, .48);
  opacity: 0;
  transition: opacity var(--base) var(--ease);
}
.nav-scrim.is-on { opacity: 1; }

/* **`[hidden]` يُعاد إعلانه لأن `display` المصرَّح يبطله.**
   قاعدةُ المتصفّح `[hidden] { display: none }` من ورقته هو، وأيُّ `display`
   يكتبه المؤلّف يغلبها مهما ضعفت مُحدِّدته. فدرجٌ مصرَّحٌ `flex` يبقى
   **مرئيًّا وهو يحمل `hidden`** — يغطّي الصفحة عند أول تحميل، ولا خطأ في
   أي مكان. */
.nav-drawer[hidden] { display: none; }

.nav-drawer {
  position: fixed; z-index: 80;
  inset-block: 0; inset-inline-start: 0;
  inline-size: min(340px, 88vw);
  background: var(--surface);
  border-inline-end: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
  overflow-y: auto;
  /* الصفحة RTL دائمًا (`dir` مثبَّت في القالب)، فالحافّة الداخلية يمينية
     والخروج إليها إزاحةٌ موجبة. */
  transform: translateX(100%);
  transition: transform var(--base) var(--ease);
}
.nav-drawer.is-on { transform: none; }

.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--s4); }
.nav-close {
  display: grid; place-items: center;
  inline-size: var(--touch); block-size: var(--touch);
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--white); color: var(--ink-600); cursor: pointer;
}
.nav-drawer nav { display: grid; gap: 2px; }
.nav-drawer nav a {
  display: flex; align-items: center; gap: var(--s3);
  min-block-size: var(--touch);
  padding-inline: var(--s3);
  border-radius: var(--r-sm);
  color: var(--ink-700); font-weight: 600; font-size: 16px;
}
.nav-drawer nav a:hover { background: var(--brand-50); color: var(--brand-600); }
.nav-drawer .btn { inline-size: 100%; }
.nav-drawer-foot { margin-block-start: auto; display: grid; gap: var(--s3); padding-block-start: var(--s5); }

.chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: var(--r-full);
  background: var(--ok-tint); color: var(--ok-600);
}

/* جدول هندسة المنيو — **حاويةُ التمرير على الجدول لا على الصفحة**.
   نفس اسم الحاوية في `ui.css` وبنفس دورها: جدولٌ أعرض من حاويته يمرَّر
   داخلها، وبلا ذلك يدفع `<body>` كلَّه فيظهر شريط تمريرٍ أفقيّ للصفحة —
   أسوأ عطلٍ يقع على الهاتف: يزيح كل شيء ولا يبدو له سبب. */
/* **و`position: relative` معها** (جولة الاستخدام الثانية ٢٠٢٦-١٠-٠٤): العنصرُ المطلقُ داخلها (`.sr-only` في عنوان
   عمود الحذف) كتلتُه الحاويةُ أوّلُ سلفٍ متموضع — وحاويةُ تمريرٍ غيرُ متموضعة لا تقصّه. فكان يهرب من حافّة
   الجدول إلى الصفحة ويوسّعها ٢٧ بكسل على ٣٢٠، وتُقصّ الشعارُ والعنوان. */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.is-locked { overflow: hidden; }

/* ═══════════════════ التذييل ═══════════════════════════════════════════ */
.foot { background: var(--surface-sunk); border-block-start: 1px solid var(--line); padding-block: var(--s8) var(--s6); }
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: var(--s6) var(--s5);
  padding-block-end: var(--s6);
  border-block-end: 1px solid var(--line);
}
.foot-about { display: grid; gap: var(--s4); align-content: start; max-inline-size: 34ch; }
.foot-about p { color: var(--ink-500); font-size: 14px; line-height: 1.85; }
.foot-col { display: grid; gap: var(--s3); align-content: start; }
.foot-col > span { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.foot-col a { color: var(--ink-500); font-size: 14px; }
.foot-col a:hover { color: var(--brand-600); }
.foot-end {
  padding-block-start: var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; justify-content: space-between;
  color: var(--ink-500); font-size: 13px;
}
.foot-end nav { display: flex; flex-wrap: wrap; gap: var(--s4); }
.foot-end a:hover { color: var(--brand-600); }

/* ═══════════════════ الظهور بالتمرير ═══════════════════════════════════
   **`.js` شرطٌ لا زينة.** كان `.reveal { opacity: 0 }` غير مشروط، فكل
   الصفحة تحت البطل تبقى غير مرئية حتى يعمل JavaScript — وأيُّ سببٍ يمنعه
   (شبكة بطيئة · سكربت محجوب · خطأ مبكر) يترك الزائر أمام صفحةٍ فارغة
   فيها بطلٌ وتذييل ولا شيء بينهما. أمسكته لقطةٌ آلية للصفحة الحيّة. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }

/* ═══════════════════ الشاشات الضيّقة ═══════════════════════════════════ */

@media (max-width: 1100px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-about { grid-column: 1 / -1; max-inline-size: none; }
}

/* الدرجُ تحت ١٢٨٠ لا تحت ٩٠٠ — كالصفحة التعريفية: بين ٩٠٠ و١٢٨٠ كانت الروابطُ تلتفّ سطرين، والآن
   `nowrap` فكانت ستتداخل مع الأزرار. ومن ١٢٨٠ تتّسع (مقيس على `/privacy`: ١٦px بينهما على ١٢٨١). */
@media (max-width: 1279px) {
  .nav-links { display: none; }
  .nav-end .sf-lang, .nav-end .btn-quiet { display: none; }
  .nav-burger { display: grid; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  /* المبدّلُ ينتقل إلى الدرج: شريطٌ بعرض ٣٢٠ لا يتّسع له وللزرّين
     معًا، فيدفع الصفحةَ ١٢px خارج الشاشة. */
  .nav-end .sf-lang { display: none; }
  .nav-end .btn-quiet { display: none; }
  .nav-burger { display: grid; }
}

@media (max-width: 700px) {
  body { font-size: 15.5px; }
  .sec { padding-block: var(--s8); }
  .foot-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════ الوثائق القانونية ═════════════════════════════════
   عمودٌ واحد ضيّق: نصٌّ يُقرأ سطرًا سطرًا لا يُمسح بالعين كصفحة بيع.
   وعرضُ السطر عند ٦٨ حرفًا — أطول من ذلك تتوه العين في العودة للسطر
   التالي، وهذه وثيقة تُقرأ كاملةً لا عناوينَ تُتصفَّح. */
.legal { max-width: 68ch; margin-inline: auto; }
.legal-head { margin-block-end: var(--s8); }
.legal-head h1 { font-size: clamp(28px, 4vw, 40px); margin-block: var(--s3); }
.legal-head p { color: var(--ink-600); font-size: 17px; line-height: 1.9; }
.legal-stamp { font-size: 13.5px; color: var(--ink-500); }

.legal-sec { margin-block-end: var(--s7); }
.legal-sec h2 { font-size: 20px; margin-block-end: var(--s3); }
.legal-sec p { color: var(--ink-700); line-height: 2; margin-block-end: var(--s3); }
.legal-sec ul { margin: 0; padding-inline-start: var(--s5); display: grid; gap: var(--s2); list-style: disc; }
.legal-sec li { color: var(--ink-700); line-height: 1.95; }
.legal-sec a { color: var(--brand-600); text-decoration: underline; }

.legal-nav { display: flex; gap: var(--s3); flex-wrap: wrap; margin-block-start: var(--s8); }

/* ═══════════════════ عرضُ السعر عند العميل (D-131) ═════════════════════
   وثيقةٌ تُقرأ على موبايل صاحب المطعم ثم تُطبع: عمودٌ واحد، والسطورُ قائمةٌ
   لا جدول — جدولٌ بخمسة أعمدةٍ يُمرَّر أفقيًّا على ٣٢٠. والمبلغُ في آخر السطر
   `flex: none` فلا ينكسر رقمٌ على سطرين. */
.qt-bar { border-block-end: 1px solid var(--line); background: var(--surface); }
.qt-bar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); block-size: 64px; }
.qt-kicker { font-size: 14px; font-weight: 700; color: var(--ink-600); }

.qt { padding-block: var(--s7); }
.qt-doc { max-width: 680px; margin-inline: auto; }
.qt-head { margin-block-end: var(--s6); }
.qt-head h1 { font-size: clamp(24px, 4vw, 34px); margin-block: var(--s3) var(--s2); color: var(--ink-900); line-height: 1.4; }
.qt-for { font-size: 17px; color: var(--ink-700); margin: 0; }
.qt-stamp { display: inline-block; margin-block-start: var(--s3); font-size: 14px; color: var(--ink-600); }
.qt-stamp.is-ok {
  color: var(--ok-600); background: var(--ok-tint); font-weight: 700;
  padding: var(--s1) var(--s3); border-radius: var(--r-full);
}

.qt-sec { margin-block-end: var(--s6); }
.qt-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-block-end: var(--s2); }
.qt-sec-head h2 { font-size: 19px; color: var(--ink-900); margin: 0; }
.qt-sec-head span { font-size: 14px; color: var(--ink-600); }

.qt-lines { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--line); }
.qt-line {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
  padding-block: var(--s3); border-block-end: 1px solid var(--line);
}
.qt-line-main { display: grid; gap: 2px; min-inline-size: 0; }
.qt-line-main strong { color: var(--ink-900); font-size: 16px; overflow-wrap: anywhere; }
.qt-line-desc { font-size: 14px; color: var(--ink-600); overflow-wrap: anywhere; }
.qt-line-meta { font-size: 14px; color: var(--ink-600); }
.qt-line-total { flex: none; font-weight: 700; color: var(--ink-900); white-space: nowrap; }

.qt-sum {
  display: grid; gap: var(--s2);
  padding: var(--s5); margin-block: var(--s6);
  border: 1px solid var(--line-strong); border-radius: var(--r-card);
  background: var(--surface-sunk);
}
.qt-sum-row { display: flex; justify-content: space-between; gap: var(--s4); color: var(--ink-700); }
.qt-sum-row .tnum { flex: none; white-space: nowrap; color: var(--ink-900); font-weight: 600; }
.qt-sum-row.is-lead {
  padding-block-start: var(--s3); margin-block-start: var(--s1);
  border-block-start: 1px solid var(--line-strong);
  font-size: 19px; font-weight: 800; color: var(--ink-900);
}
.qt-sum-row.is-lead .tnum { font-weight: 800; }
.qt-sum-note { margin: 0; font-size: 14px; color: var(--ink-600); }

.qt-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
.qt-state { text-align: center; padding-block: var(--s8); }
.qt-state h1 { font-size: clamp(24px, 4vw, 32px); color: var(--ink-900); margin-block: var(--s3); }
.qt-state p { color: var(--ink-700); max-width: 46ch; margin: 0 auto var(--s5); }

/* **والورقةُ هي الوثيقةُ وحدها** — بلا الشريط ولا الأزرار ولا خلفيّة الملخّص المطبوعة رماديّةً. */
@media print {
  .qt-bar, .qt-actions, .skip-link { display: none; }
  .qt { padding-block: 0; }
  .qt-sum { background: none; }
  .qt-line, .qt-sum { break-inside: avoid; }
}

/* ═══════════════════ خدمة قارئ الشاشة ══════════════════════════════════ */
/* `.sr-only` معرَّفةٌ في `ui.css` و`kds.css`، وهذا السطحُ يحمّل `tokens`
   وورقتَه وحدَهما — فنسخةٌ هنا لا استيراد. وبدونها كان عنوانُ عمودِ الحذف
   في جدول تحليل المنيو **يُرسَم مرئيًّا**: صنفٌ لا قاعدةَ له لا يُخفي شيئًا،
   ولا فاحصَ ساكنٌ يرى ذلك لأن أسطحَ التسويق خارج جدول الحارس. */
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-block-start: -60px; inset-inline-start: var(--s5);
  z-index: 100;
  padding: var(--s3) var(--s5);
  background: var(--brand-500); color: var(--white);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700;
  transition: inset-block-start var(--fast) var(--ease);
}
.skip-link:focus { inset-block-start: 0; }