/* ==========================================================================
   الموقع العام — برنامج الدعم القانوني، مؤسسة بيوت مصر (الإصدار 9.1 — مسار b-site)
   صفحات المستفيدين: الرئيسية وعن البرنامج والسياسات (وتكمل صفحتي الطلب والمتابعة).
   يعمل وحده دون app.css (الصفحة الرئيسية والسياسات لا تحمّل مكتبة المنصة)، ومع app.css في صفحات الطلب والمتابعة.
   نظام الأحجام (B91-12) تحت body.pub.v91: نص 18px، لا شيء أقل من 15px، أزرار 48px والزر الأساسي 56px.
   ========================================================================== */

/* @critical-start — من هنا حتى @critical-end يُضمَّن في <head> صفحات الموقع (B91-11) فتظهر الشاشة الأولى دون انتظار هذا الملف.
   v11 visual (V-2، L11-30): الكتلة العامة ≤ 8,500 بايت بعد الضغط — تحل محل قواعد 9.2/10.0 ولا تُضاف إليها. ما بعد الشاشة
   الأولى (الروابط، التركيز، القائمة المفتوحة، الضغط، الأزرار العامة) في الجزء غير الحرج بعد @critical-end.
   v12 look (LK-0): الكتلة العامة تنتهي عند علامة general، والشاشة الأولى لصفحة «خيري» (المربعات والصور) كتلة مسماة charity
   بعدها مباشرة تطلبها صفحة «خيري» وحدها؛ CRITICAL_RE في site.js هو المصدر الواحد للكتل */

/* خط IBM Plex Sans Arabic مستضاف محليًا (رخصة SIL OFL — /assets/fonts/OFL.txt): العربية فقط، وزنان */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/plex-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/plex-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

/* v12 look (K12-10…12): Plex 600 للصفوف والأزرار في صفحات الأفراد والشركات (700 يبقى لـ«خيري»)، ووجه العناوين «Emam Display»:
   Amiri (عربي) وCormorant (لاتيني وأرقام) بـ optional فلا إزاحة عند وصوله. المدى = نقاط الملف بالضبط (fonts/README.txt) */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/plex-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: "Emam Display";
  font-display: optional;
  src: url("/assets/fonts/amiri-arabic-400-sub.woff2") format("woff2");
  unicode-range: U+0020, U+00A0, U+060C, U+061B, U+061F, U+0621-063A, U+0640-0655, U+0660-066D, U+0670, U+067E, U+0686, U+06A4, U+06AF, U+06CC, U+200C-200E;
}

@font-face {
  font-family: "Emam Display";
  font-display: optional;
  src: url("/assets/fonts/cormorant-latin-500-sub.woff2") format("woff2");
  unicode-range: U+0021-007E, U+00A9, U+00AB, U+00B7, U+00BB, U+2013-2014, U+2018-2019, U+201C-201D, U+2026;
}

/* v12 gate (V-16، K12-13): الأرقام والحروف اللاتينية بخط Plex (وزن 400 وحده، كما في الميزانية) في صفحات الأفراد والشركات —
   «REQ-2026-00058»، الهواتف، المواعيد، «1 من 5»، «© 2026». المدى أرقام وحروف و© فقط (لا علامات الترقيم التي تكتب بها
   الجمل العربية، فلا يُطلب الملف في «/» ولا الشجرة)؛ optional فلا إزاحة عند وصوله؛ «خيري» على مكدّسه كما هو */
@font-face {
  font-family: "Emam Latin";
  font-display: optional;
  src: url("/assets/fonts/plex-latin-400.woff2") format("woff2");
  unicode-range: U+0030-0039, U+0041-005A, U+0061-007A, U+00A9;
}

:root {
  /* v9.2 «ألوان المؤسسة»: الدرجات الافتراضية (= LEGACY). ألوان المؤسسة تأتي من كتلة <style id="bm-theme"> في <head> وتغلب هذه القيم */
  /* @brand-defaults-start */
  --primary-900: #052015;
  --primary-800: #082e1e;
  --primary-700: #0b3d29;
  --primary-600: #175139;
  --primary-500: #26684c;
  --primary-300: #8ab59e;
  --primary-200: #bfd8ca;
  --primary-100: #dfece5;
  --primary-50: #eff6f2;
  --accent-800: #5e4716;
  --accent-700: #74581f;
  --accent-600: #93712b;
  --accent-500: #cca454;
  --accent-400: #d4ad5f;
  --accent-300: #dabe89;
  --accent-100: #f6ecda;
  --accent-50: #fbf7ef;
  --primary-300-rgb: 138 181 158;
  --primary-500-rgb: 38 104 76;
  --primary-700-rgb: 11 61 41;
  --primary-900-rgb: 5 32 21;
  --accent-500-rgb: 204 164 84;
  /* @brand-defaults-end */
  /* النص الوحيد المسموح فوق accent-300/400/500 */
  --on-accent: var(--primary-900);
  --pub-font: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
  /* v11 visual (§5.8، V11-05/07/08): نفس أدوار app.css (الخط هنا --pub-font)؛ لا لون حرفي خارج :root */
  --canvas: #fff;
  --canvas-grouped: #f6f6f3;
  --surface: #fff;
  --surface-tint: #f9f8f4;
  --label: #141f1a;
  --label-2: #5a625e;
  --label-3: #7d8480;
  --separator: #141f1a1f;
  --fill-1: #141f1a0d;
  --fill-2: #141f1a14;
  --fill-3: #141f1a1f;
  --tint: var(--primary-700);
  --on-tint: #fff;
  --tint-weak: var(--primary-50);
  --tint-weak-2: var(--primary-100);
  --gold-line: var(--accent-500);
  --gold-ink: var(--accent-700);
  --gold-wash: var(--accent-50);
  --ok: #1c6a39;
  --ok-weak: #e8f4ec;
  --warn: #8a5300;
  --warn-weak: #fdf3df;
  --bad: #b42318;
  --bad-weak: #fdecea;
  --info: #1b5a99;
  --info-weak: #e7f0fa;
  --scrim: rgb(var(--primary-900-rgb)/.48);
  --e-1: 0 1px 2px rgb(var(--primary-900-rgb)/.06);
  --e-2: 0 10px 30px -12px rgb(var(--primary-900-rgb)/.2);
  --e-3: 0 30px 70px -20px rgb(var(--primary-900-rgb)/.3);
  --r-6: 6px;
  --r-10: 10px;
  --r-14: 14px;
  --r-20: 20px;
  --r-28: 28px;
  --focus: 0 0 0 2px #fff, 0 0 0 4px var(--primary-700);
  --t-large: 700 34px/1.25 var(--pub-font);
  --t-title1: 700 28px/1.3 var(--pub-font);
  --t-title2: 700 22px/1.35 var(--pub-font);
  --t-title3: 600 20px/1.4 var(--pub-font);
  --t-headline: 600 17px/1.5 var(--pub-font);
  --t-body: 400 17px/1.6 var(--pub-font);
  --t-callout: 400 16px/1.55 var(--pub-font);
  --t-subhead: 400 15px/1.5 var(--pub-font);
  --t-footnote: 400 13px/1.5 var(--pub-font);
  --t-caption: 600 12px/1.35 var(--pub-font);
  /* حافة المربعات الخيرية (L11-54: p500 ≥ 3:1 على الأبيض لأي لونين، N3) وحد الحقول (≥ 3:1) */
  --edge-strong: 0 0 0 2px var(--primary-500);
  --field-line: #767d79;
  --pub-whatsapp: #0e7a55;
  --pub-gutter: 24px;
  --pub-header-h: 64px;
  /* v10 (X10-P1): الضغط يبدأ مع لمس الإصبع ويظهر في الإطار الأول */
  --press-scale: 0.97;
  /* v12 look (K12-02…04): أدوار «ورق المكتب». القيم الثابتة هنا، وأسماء v11 تتبعها في الصفحات غير «خيري» (القاعدة التالية) */
  --paper: #fff;
  --paper-2: #f8f6f1;
  --paper-3: #f1eee6;
  --ink: #13201a;
  --ink-2: #4a524d;
  --ink-3: #686f6b;
  --rule: #e4e0d6;
  --rule-2: #cfc9bb;
  --field: #8a8f8a;
  --act: var(--primary-700);
  --act-hover: var(--primary-800);
  --on-act: #fff;
  --gold: var(--accent-500);
  --f-ui: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --f-display: "Emam Display", "IBM Plex Sans Arabic", "Times New Roman", serif;
  --d1: 400 clamp(34px, 1.6vw + 26px, 50px)/1.42 var(--f-display);
  --d2: 400 clamp(28px, .9vw + 22px, 38px)/1.45 var(--f-display);
  --d3: 400 clamp(24px, .4vw + 20px, 28px)/1.5 var(--f-display);
  --d4: 400 22px/1.5 var(--f-display);
  --t-lead: 400 clamp(17px, .3vw + 16px, 19px)/1.8 var(--f-ui);
  --t-ui: 400 15px/1.6 var(--f-ui);
  --t-ui-strong: 600 15px/1.6 var(--f-ui);
  --t-head: 600 17px/1.55 var(--f-ui);
  --t-small: 400 14px/1.6 var(--f-ui);
  --t-label: 600 13px/1.5 var(--f-ui);
  --t-num: 400 13px/1.4 var(--f-ui);
  --gutter: 20px;
  --col: 600px;
  --page: 1160px;
  --r-1: 2px;
  --target: 48px;
}

/* v12 look (K12-02، L12-33): إعادة توجيه أسماء v11 إلى أدوار v12 على الجذر نفسه (فتتبعها كل الأسماء المشتقة على :root)
   في كل صفحة ليست «خيري»؛ صفحات «خيري» (data-side=charity أو .pub-charity) تبقى بشكل 9.2/v11 (K12-15). بلا :has() يبقى شكل v11 */
:root:has(> body:not([data-side="charity"], .pub-charity)) {
  --canvas: var(--paper);
  --canvas-grouped: var(--paper);
  --surface: var(--paper);
  --surface-tint: var(--paper-2);
  --label: var(--ink);
  --label-2: var(--ink-2);
  --label-3: var(--ink-3);
  --separator: var(--rule);
  --fill-1: var(--paper-2);
  --fill-2: var(--paper-3);
  --tint-weak: transparent;
  --tint-weak-2: var(--paper-2);
  --gold-wash: transparent;
  --ok: #1d6b3a;
  --bad: #a8261b;
  --e-1: 0 0 #0000;
  --e-2: 0 0 #0000;
  --r-6: 2px;
  --r-10: 2px;
  --r-14: 2px;
  --r-20: 2px;
  --r-28: 14px;
  --pub-radius: 2px;
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--act);
  --field-line: var(--field);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --press-scale: 1;
  }
}

*,
::before,
::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.pub {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font: 400 18px/1.6 var(--pub-font);
  color: var(--label);
  background: var(--canvas);
  overflow-x: clip;
}

h1,
p {
  margin: 0;
}

button {
  font: inherit;
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  transform: translateY(-200%);
}

.pub-sr,
.pub-header .pub-wordmark {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pub-container {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--pub-gutter);
}

/* ───────────── الرأس (V11 §5.2): علامة «EMAM إمام» الخضراء + شارة نوع الخدمة، بلا حدود ولا خط سفلي ───────────── */

.pub-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffffdb;
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
}

.pub-header-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: var(--pub-header-h);
}

.pub-brand {
  display: flex;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  margin-inline-end: auto;
}

.pub-mark {
  width: auto;
  height: 22px;
}

.pub-nav {
  display: flex;
  align-items: center;
}

.pub-nav-link,
.pub-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

/* الزر الوحيد الممتلئ في الرأس: أخضر (كان ذهبيًا) */
body.pub .pub-nav-cta {
  font-weight: 700;
  margin-inline-start: 10px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--on-tint);
}

/* v11 fixer-public (K12/J-06، V11-P2): في صفحات البداية زر الرأس ملوّن خفيف، فزر الصفحة نفسها هو الممتلئ الوحيد. بلا @media
   حتى تبقى الكتلة العامة ≤ 8,500 بايت: الرأس لا يظهر الزر تحت 1081px إلا في القائمة المفتوحة، وهناك يعود ممتلئًا (القاعدة
   المقابلة داخل @media (max-width: 1080px) في الجزء غير الحرج، والقائمة لا تُفتح قبل تحميله) */
body.pub-landing .pub-nav-cta {
  background: var(--tint-weak);
  color: var(--tint);
}

.pub-head-contact,
.pub-menu-close,
.pub-menu-toggle,
.pub-nav-wa {
  display: none;
}

@media (max-width: 1080px) {
  .pub-nav {
    display: none;
  }

  .pub-menu-toggle {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: var(--label);
  }
}

/* الهاتف: رأس 52px، زر التواصل دائرة ملوّنة خفيفة (واتساب، وإلا الاتصال) */
@media (max-width: 600px) {
  :root {
    --pub-gutter: 16px;
    --pub-header-h: 52px;
  }

  .pub-mark {
    height: 19px;
  }

  body.pub .pub-head-contact {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 99px;
    background: var(--tint-weak);
    color: var(--tint);
  }
}

/* v12 look (K12-04): هوامش الصفحة 20 / 40 / 64 */
@media (min-width: 700px) {
  :root {
    --gutter: 40px;
  }
}

@media (min-width: 1100px) {
  :root {
    --gutter: 64px;
  }
}

/* v12 look (K12-21، L12-11): رأس صفحات الأفراد والشركات ورقة بيضاء بخط سفلي رفيع، روابط نصية بلون الحبر الثاني، زر واحد
   صغير (خطّي في /services، ممتلئ في غيرها)، و«القائمة» كلمة على الهاتف. «خيري» (data-side=charity) يبقى بشكل v11 */
body.pub[data-side="paid"] {
  --pub-header-h: 68px;
  --pub-gutter: var(--gutter);
}

body.pub[data-side="paid"] .pub-header {
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-block-end: 1px solid var(--rule);
}

body.pub[data-side="paid"] .pub-nav-link {
  padding: 0 10px;
  color: var(--ink-2);
  font: var(--t-ui);
}

/* v12 gate (V-07، K12-21): زر الرأس خطّي (حد 1px بلون الحبر) في كل صفحات الأفراد والشركات، فزر الصفحة هو الممتلئ الوحيد */
body.pub[data-side="paid"] .pub-nav-cta {
  min-height: 38px;
  margin-inline-start: 14px;
  padding: 0 18px;
  border-radius: 2px;
  background: none;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  font: 600 14px/1.2 var(--f-ui);
}

body.pub .pub-menu-toggle--word {
  width: auto;
  padding: 0 4px;
  color: var(--ink);
  font: 600 15px/1 var(--f-ui);
}

@media (max-width: 600px) {
  body.pub[data-side="paid"] {
    --pub-header-h: 60px;
  }
}

:root:has(> body[data-side="paid"]) {
  --pub-font: "IBM Plex Sans Arabic", "Emam Latin", "Noto Sans Arabic", Tahoma, sans-serif;
  --f-ui: "IBM Plex Sans Arabic", "Emam Latin", "Segoe UI", Tahoma, sans-serif;
}

/* v12 look (K12-03، PW-L7): لا وزن 700 في صفحات الأفراد والشركات؛ ما يُرسم منه عند التحميل (رابط التخطي، الاسم اللاتيني، روابط التذييل)
   يأخذ 600 فلا يُطلب ملف 700 أصلًا. «خيري» يبقى على 400/700. (روابط «بالمختصر»: في كتلة :legal، V-17) */
:root:has(> body:not([data-side="charity"], .pub-charity)) :is(b, strong, summary, .skip-link, .pub-ltr, .pub-social, .pub-contact-label, .pub-footer a, .pub-contact-list a, .bp-step-dot, .bp-label) {
  font-weight: 600;
}

/* @critical-end:general */

/* @critical-start:charity — الشاشة الأولى لصفحة «خيري» (/khayri حين يُعاد «خيري»): تُضاف للكتلة العامة في هذه الصفحة وحدها
   (<!--site:critical-css:charity-->)؛ نص قواعدها كما في v11 بلا تغيير (L12-33) */

/* ───────────── الشاشة الأولى (V11-40): «مشكلتك في إيه؟» + 8 مربعات بصورة وكلمة + طرق تانية، على الأبيض ───────────── */
/* محسوبة لمساحة 360×512: الرأس 52 + 10 + العنوان 64 + 4 صفوف مربعات + 3×8 + 6 + الطرق التانية 56 = 212 + 4 صفوف،
   فالمربع = (100svh − 236px) / 4 وأقله 72px. حافة المربعات p500 (L11-54: ≥ 3:1 على الأبيض لأي لونين، N3) */

.pub-start {
  padding-block: 10px;
}

.pub-start-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: 64px;
}

/* سطر العنوان بارتفاع ثابت (44px) فظهور زر «بالصوت» لا يحرّك أي شيء */
.pub-start-head h1 {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 27px;
  line-height: 1.3;
}

.pub-start-badge {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--tint);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.pub-start-badge svg,
.pub-start-trust svg {
  width: 17px;
  height: 17px;
  color: var(--tint);
}

.pub-pick,
.pub-pick-ways {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pub-pick {
  --tile-h: 72px;
  gap: 8px;
}

@supports (height: 100svh) {
  .pub-pick {
    --tile-h: clamp(72px, calc((100svh - 236px) / 4), 140px);
  }
}

/* المحتوى يبدأ من مسافة ثابتة أعلى المربع: وصول الصفحة على دفعات أو تبدّل الخط لا يحرّك شيئًا (إزاحة 0) */
.pub-pick-tile {
  --pic: clamp(48px, calc(var(--tile-h) * 0.42), 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-height: var(--tile-h);
  padding: max(6px, calc((var(--tile-h) - var(--pic) - 30px) / 2)) 6px 6px;
  border-radius: 20px;
  box-shadow: var(--edge-strong), 0 8px 22px -14px rgb(var(--primary-900-rgb)/.3);
  text-align: center;
  text-decoration: none;
}

/* الروابط التي لها لون النص (تغلب لون الروابط العام body.pub a:where(…) حين يصل الملف الكامل) */
body.pub :is(.pub-nav-link, .pub-pick-tile, .pub-pick-way--follow) {
  color: var(--label);
}

/* v10 (X10-P2): المربعات تنضغط مع الإصبع؛ انتقالات الضغط في الجزء غير الحرج */
body.pub .pub-pick-tile:active,
body.pub .pub-pick-way:active {
  transform: scale(var(--press-scale));
}

body.pub .pub-pick-tile:has(small) {
  padding-top: max(6px, calc((var(--tile-h) - var(--pic) - 48px) / 2));
}

.pub-pick-tile .pub-pic {
  width: var(--pic);
  height: var(--pic);
  flex-shrink: 0;
  margin-bottom: 2px;
}

.pub-pick-tile b {
  font-size: 19px;
  line-height: 24px;
}

.pub-pick-tile small {
  font-size: 15px;
  line-height: 18px;
  color: var(--label-2);
}

/* مربع أقصر من 90px (شاشة قصيرة): صورة 40px وكلمة 18px؛ «حاجة تانية / أو مش عارفين» بصورة 30px */
@media (max-height: 595px) and (max-width: 699px) {
  body.pub .pub-pick-tile {
    --pic: 40px;
    padding-block: 3px;
  }

  body.pub .pub-pick-tile:has(small) {
    --pic: 30px;
    padding-block: 3px;
  }

  .pub-pick-tile b {
    font-size: 18px;
    line-height: 20px;
  }

  .pub-pick-tile small {
    line-height: 16px;
  }
}

/* الصور: أصناف pictos.js — pa/pb تعبئة بألوان العلامة، pl زينة فقط، po خط لمعنى لا يجوز أن يبهت */
.pa {
  fill: var(--primary-700);
}

.pb {
  fill: var(--accent-600);
}

.pl {
  fill: var(--primary-300);
}

.pw {
  fill: #fff;
}

.po {
  fill: none;
  stroke: var(--primary-700);
  stroke-width: 2.5;
}

/* «إحنا نكلمك» (الزوج الممتلئ الذهبي كما في 10.0: طريق من لا تقرأ، r2 P24) · «واتساب» · «طلبك فين؟» (رمادي بحافة قوية) */
.pub-pick-ways {
  margin: 6px 0 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pub-pick-ways[data-n="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pub-pick-way {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-height: 64px;
  padding: 6px 4px 2px;
  border: 2px solid transparent;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
}

.pub-pick-way .pub-pic {
  width: 28px;
  height: 28px;
}

body.pub .pub-pick-way--callback {
  background: var(--accent-500);
  border-color: var(--accent-600);
  color: var(--on-accent);
}

body.pub .pub-pick-way--wa {
  background: var(--pub-whatsapp);
  color: #fff;
}

.pub-pick-way--follow {
  background: var(--fill-1);
  box-shadow: var(--edge-strong);
}

.pub-pick-way--callback .pa,
.pub-pick-way--callback .pb {
  fill: var(--on-accent);
}

.pub-pick-way--wa .pa {
  fill: #fff;
}

.pub-pick-way--wa .pw {
  fill: var(--pub-whatsapp);
}

/* v11 fixer-public (V7): بعد قواعد الطرق الأساسية حتى لا تغلبها (نفس الخصوصية): طرق 220px تبدأ من اليمين */
@media (min-width: 700px) {
  .pub-pick {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    --tile-h: 156px;
  }

  .pub-pick-ways,
  .pub-pick-ways[data-n="2"] {
    grid-template-columns: repeat(3, minmax(0, 220px));
    justify-content: start;
  }

  .pub-pick-way {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding-block: 4px;
  }
}

.pub-start-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px !important;
  color: var(--label-2);
  font-size: 16px;
  line-height: 1.45;
}

.pub-start-trust b {
  color: var(--label);
}

.pub-start-hours {
  color: var(--label-2);
  font-size: 15px;
}

/* الهاتف: طرق التواصل الثلاثة */
@media (max-width: 600px) {
  body.pub .pub-pick-way {
    min-height: 56px;
    padding-top: 2px;
  }
}

/* @critical-end */

/* ==========================================================================
   v11 visual (V-2/V-3) — ما بعد الشاشة الأولى: يصل مع الملف بعد الرسم الأول (لا يزيد الكتلة المضمّنة)
   ========================================================================== */

:root {
  /* V11-61: الأسماء القديمة للموقع تشير للأدوار الجديدة فتتبعها بقية القواعد */
  --pub-font-head: var(--pub-font);
  --pub-ink: var(--label);
  --pub-ink-soft: var(--label-2);
  --pub-cream: #fff;
  --pub-cream-2: var(--surface-tint);
  --pub-line: var(--separator);
  --pub-teal: var(--primary-700);
  --pub-teal-deep: var(--primary-900);
  --pub-gold: var(--accent-500);
  --pub-gold-soft: var(--accent-300);
  --pub-ok: #1d7a46;
  --pub-warn: #9a5b00;
  --pub-warn-bg: #fff8ea;
  --pub-danger: #b42318;
  --pub-radius: 20px;
  --pub-container: 1160px;
  /* نظام الأحجام (B91-12) */
  --text: 18px;
  --text-small: 16px;
  --text-meta: 15px;
  --tap-primary: 56px;
  --tap: 48px;
  --input-h: 52px;
  --row-h: 56px;
  --bar-h: 64px;
  --press-dim: rgb(0 0 0 / 0.06);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-press: 80ms;
  --dur-release: 200ms;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--pub-header-h) + 12px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body.pub {
  -webkit-font-smoothing: antialiased;
}

body.pub main {
  flex: 1 0 auto;
}

body.pub img,
body.pub svg {
  max-width: 100%;
}

body.pub button,
body.pub input,
body.pub select,
body.pub textarea {
  font: inherit;
}

body.pub h2,
body.pub h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.35;
  color: var(--label);
}

/* الروابط النصية فقط (:where لا يرفع الأولوية)؛ الأزرار (.btn من مكتبة المكونات و.pub-btn وأزرار صفحة المتابعة .bp-btn
   وصفوفها .bp-row) تحتفظ بألوانها — وإلا صار «افتحي صفحة طلبك» و«واتساب» نصًا أخضر على خلفية خضراء */
body.pub a:where(:not(.btn):not(.pub-btn):not(.bp-btn):not(.bp-row):not(.skip-link):not(.pub-tile-link)) {
  color: var(--primary-600);
  text-underline-offset: 3px;
}

body.pub a:where(:not(.btn):not(.pub-btn):not(.bp-btn):not(.bp-row):not(.skip-link):not(.pub-tile-link)):hover {
  color: var(--tint);
}

/* التركيز (V11-09): حلقة p700 (≥ 4.5:1 على الأبيض لأي لونين، T12b) — كانت ذهبية (2:1) */
body.pub :focus-visible {
  outline: 3px solid var(--primary-700);
  outline-offset: 2px;
  border-radius: 6px;
}

body.pub .skip-link {
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--on-tint);
  font-weight: 700;
  text-decoration: none;
}

body.pub .skip-link:focus {
  transform: none;
}

.pub-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

.pub-icon {
  flex-shrink: 0;
  vertical-align: middle;
}

/* الأيقونات الاتجاهية تنعكس في الواجهة العربية */
.pub-flip {
  transform: scaleX(-1);
}

.pub-container {
  width: 100%;
}

/* ───────────── الأزرار (V11-10): ممتلئ واحد في الشاشة، والباقي ملوّن خفيف أو رمادي ───────────── */

.pub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 10px 22px;
  border-radius: 14px;
  border: 2px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

body.pub a.pub-btn {
  text-decoration: none;
}

/* «احكيلنا مشكلتك» خارج الرأس: الزر الممتلئ الأخضر الوحيد في القسم (كان ذهبيًا) */
body.pub .pub-btn-gold:not(.pub-nav-cta) {
  background: var(--tint);
  color: var(--on-tint);
}

body.pub .pub-btn-gold:not(.pub-nav-cta):hover,
body.pub .pub-nav-cta:hover {
  background: var(--primary-800);
  color: var(--on-tint);
}

/* صفحة دخول «طلبك فين؟» (زرها «افتحي صفحة طلبك») وصفحة الطلب نفسها (زرها «التالي»/«ابعتي طلبك»): زر الرأس ملوّن خفيف (V11-P2) */
body.pub:is(.bp-login, .bmf-page) .pub-nav-cta {
  background: var(--tint-weak);
  color: var(--tint);
}

/* ───────────── الرأس: القائمة المفتوحة، المرور، شارة نوع الخدمة ───────────── */

body.pub .pub-nav-link {
  border-radius: 10px;
}

body.pub .pub-nav-link:hover,
body.pub .pub-nav-link[aria-current="page"] {
  background: var(--fill-1);
  color: var(--tint);
}

body.pub .pub-nav-portal {
  color: var(--tint);
}

.pub-menu-toggle {
  border-radius: 999px;
  cursor: pointer;
}

.pub-menu-toggle:hover {
  background: var(--fill-1);
}

.pub-menu-toggle[aria-expanded="true"] .pub-menu-open {
  display: none;
}

.pub-menu-toggle[aria-expanded="true"] .pub-menu-close {
  display: inline-block;
}

/* شارة «خيري» / «أفراد وشركات»: مساحة لمس 44px */
body.pub .pub-seg-pill {
  position: relative;
}

.pub-seg-pill::after {
  content: "";
  position: absolute;
  inset: -6px 0;
}

body.pub .pub-seg-pill:hover {
  filter: brightness(0.97);
}

@media (max-width: 1080px) {
  .pub-nav.is-open {
    display: flex;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px var(--pub-gutter) 20px;
    background: var(--canvas);
    box-shadow: var(--e-2);
    max-height: calc(100vh - var(--pub-header-h));
    overflow-y: auto;
  }

  body.pub .pub-nav-link {
    min-height: var(--row-h);
    padding-inline: 14px;
    border-radius: 12px;
    font-size: 18px;
  }

  body.pub .pub-nav-cta {
    justify-content: center;
    margin: 8px 0 0;
    min-height: var(--tap-primary);
    font-size: 18px;
  }

  /* v11 fixer-public (K12): في القائمة المفتوحة لصفحات البداية يبقى «احكيلنا مشكلتك»/«طلب استشارة» الزر الممتلئ */
  body.pub-landing .pub-nav-cta {
    background: var(--tint);
    color: var(--on-tint);
  }

  body.pub .pub-nav-gate {
    display: flex;
    color: var(--label-2);
  }

  /* v12 gate (V-18، K12-21): واتساب كلمة داخل القائمة المفتوحة للأفراد والشركات (بدل دائرة الأيقونة بجانب «القائمة») */
  body.pub .pub-nav-wa {
    display: inline-flex;
  }
}

/* ───────────── الشاشة الأولى: ما يظهر بعد التحميل ───────────── */

/* «بالصوت» (يظهر بعد أن يجد listen.js صوتًا عربيًا): زر ملوّن خفيف */
body.pub .pub-listen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--tint-weak);
  color: var(--tint);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

body.pub .pub-listen[aria-pressed="true"] {
  background: var(--tint);
  color: var(--on-tint);
}

/* الكلام المقروء الآن بإطار 4px بالثاني 600 */
body.pub .is-speaking {
  outline: 4px solid var(--accent-600);
  outline-offset: 2px;
}

body.pub .pub-pick-way:active {
  background-image: linear-gradient(var(--press-dim), var(--press-dim));
}

.pub-pick-tile:active {
  background: var(--tint-weak);
}

.pub-pick-ways > li {
  position: relative;
}

/* v11 visual review (L11-54): الحافة القوية للجانب الخيري وحده؛ الجانب المدفوع يحتفظ بالحلقة الخفيفة */
body.pub[data-side="paid"] .pub-pick-way--follow {
  box-shadow: 0 0 0 1px rgb(var(--primary-700-rgb) / 0.12), 0 8px 22px -14px rgb(var(--primary-900-rgb) / 0.3);
}

/* 200 % تكبير على هاتف 360 (≈ 180px): الرأس يلتف، وصورة/طريق في كل صف (V11-55) */
@media (max-width: 340px) {
  .pub-header-inner {
    flex-wrap: wrap;
  }

  body.pub .pub-seg-pill {
    margin-inline-start: 0;
  }

  .pub-pick,
  .pub-pick-ways,
  .pub-pick-ways[data-n="2"],
  .pub-start-head {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* «صفحة طلبك» (يضعها landing.js مكان «طلبك فين؟» على موبايلها) */
body.pub .pub-pick-way--saved {
  background: var(--primary-800);
  border-color: var(--primary-800);
  color: #fff;
}

.pub-pick-way--saved .pa {
  fill: #fff;
}

.pub-pick-way--saved .pw {
  fill: var(--primary-800);
}

.pub-pick-way--saved .po {
  stroke: #fff;
}


/* (يضيفه landing.js بعد التحميل) «مش موبايلك؟ امسحي»: ✕ بمساحة لمس 48×48 في ركن مربع «صفحة طلبك» (لا سطر تحت الشاشة) */
body.pub .pub-pick-ways .pub-saved-forget {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-end: -10px;
  width: 48px;
  height: 48px;
  min-height: 48px;
  margin: 0;
  display: grid;
  place-items: start end;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: none;
  cursor: pointer;
}

.pub-pick-ways .pub-saved-forget span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--primary-800);
  background: #fff;
  color: var(--primary-800);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}


/* الأزرار الثانوية (ليست في الشاشة الأولى؛ خارج الأنماط المضمّنة) */
.pub-btn-lg,
.pub-btn-primary {
  min-height: var(--tap-primary);
  padding: 12px 28px;
  font-size: 19px;
  border-radius: 16px;
}

/* الزر الأساسي: عرض كامل على الهاتف */
.pub-btn-primary {
  width: 100%;
}

body.pub .pub-btn-teal {
  background: var(--tint);
  color: var(--on-tint);
}

body.pub .pub-btn-teal:hover {
  background: var(--primary-800);
  color: #fff;
}

body.pub .pub-btn-whatsapp {
  background: var(--pub-whatsapp);
  color: #fff;
}

body.pub .pub-btn-whatsapp:hover {
  background: #0a6345;
  color: #fff;
}

body.pub .pub-btn-outline {
  background: var(--tint-weak);
  color: var(--tint);
  border-color: transparent;
}

body.pub .pub-btn-outline:hover {
  color: var(--tint);
  background: var(--tint-weak-2);
}

body.pub .pub-btn-light,
body.pub .pub-btn-call {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.85);
}

body.pub .pub-btn-light:hover,
body.pub .pub-btn-call:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.pub-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


/* v9.2: زرا «واتساب» و«اتصال» في «كلمينا» (كانا على خلفية البطل الغامقة) */
.pub-contact-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-block-start: 14px;
}

.pub-contact-buttons.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.pub-contact-buttons .pub-btn {
  min-height: 52px;
  font-size: 17px;
  padding-inline: 12px;
}

body.pub .pub-contact-buttons .pub-btn-call {
  background: var(--tint-weak);
  color: var(--tint);
  border-color: transparent;
}

/* «قدّمتي طلب قبل كده؟» (في «كلمينا») وبطاقة «عندك طلب عندنا» (صفحة الطلب) — B91-06 */
body.pub .pub-returning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--row-h);
  padding: 12px 18px;
  border-radius: 16px;
  background: var(--surface-tint);
  color: var(--label);
  text-decoration: none;
  font-size: 17px;
}

body.pub .pub-returning strong {
  color: var(--tint);
}

body.pub .pub-returning .pub-icon {
  color: var(--label-3);
}

.pub-saved {
  margin-block: 4px 12px;
  padding: 16px;
  border-radius: 20px;
  background: var(--gold-wash);
  color: var(--label);
}

body.pub .pub-saved h2 {
  font-size: 19px;
  color: var(--pub-ink);
  margin-block-end: 8px;
}

.pub-saved .pub-btn {
  width: 100%;
}

body.pub .pub-saved-forget {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-block-start: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary-600);
  font-size: var(--text-meta);
  text-decoration: underline;
  cursor: pointer;
}


/* ───────────── الأقسام ───────────── */

.pub-section {
  padding-block: 72px;
}

.pub-section-cream {
  background: var(--canvas);
}

.pub-section-head {
  max-width: 720px;
  margin-block-end: 24px;
}

.pub-section-head.is-center {
  margin-inline: auto;
  text-align: center;
}

.pub-kicker {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-700);
  margin-block-end: 8px;
}

body.pub .pub-section-head h2,
body.pub .pub-h2 {
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.25;
}

.pub-section-head p {
  margin-block-start: 8px;
  font-size: 18px;
  color: var(--label-2);
}

/* «بنساعد في إيه؟»: مربعات كلها روابط */
.pub-services {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.pub-service {
  display: flex;
}

body.pub .pub-tile-link {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: var(--row-h);
  padding: 18px;
  border-radius: 20px;
  background: var(--surface-tint);
  color: var(--label);
  text-decoration: none;
}

body.pub .pub-tile-link:hover {
  background: var(--tint-weak);
}

.pub-service-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--tint-weak);
  color: var(--tint);
}

.pub-tile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pub-tile-text strong {
  font-size: 18px;
  color: var(--label);
}

.pub-tile-text span {
  font-size: 15px;
  line-height: 1.5;
  color: var(--label-2);
}

/* «إزاي بنشتغل؟»: 3 صفوف مرقّمة (نص فقط، لا شيء يشبه الأزرار) */
.pub-how {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.pub-how li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.pub-how-num {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 18px;
  color: var(--tint);
  background: var(--tint-weak);
}

.pub-how strong {
  display: block;
  font-size: 18px;
}

.pub-how span {
  color: var(--label-2);
}

/* «هل الخدمة بفلوس؟» و«بياناتك في أمان» */
.pub-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.pub-panel {
  padding: 26px 24px;
  border-radius: 20px;
  background: var(--surface-tint);
}

.pub-panel-gold {
  background: var(--gold-wash);
}

body.pub .pub-panel h2,
body.pub .pub-panel h3 {
  font-size: 22px;
  margin-block: 10px 10px;
}

.pub-panel p + p {
  margin-block-start: 12px;
}

.pub-panel p {
  color: var(--label);
}

.pub-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pub-check-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.pub-check-list .pub-icon {
  margin-block-start: 4px;
  color: var(--pub-ok);
}

.pub-check-list.is-neutral .pub-icon {
  color: var(--accent-700);
}

.pub-panel-link {
  margin-block-start: 14px !important;
}

.pub-panel-link a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 700;
}

.pub-tile {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--gold-wash);
  color: var(--gold-ink);
}

/* الأسئلة */
.pub-faq {
  max-width: 880px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: var(--surface-tint);
  overflow: hidden;
}

.pub-faq-item {
  background: none;
}

.pub-faq-item[open] {
  background: var(--canvas-grouped);
}

.pub-faq-item + .pub-faq-item {
  border-block-start: 1px solid var(--separator);
}

.pub-faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--row-h);
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
}

.pub-faq-item summary::-webkit-details-marker {
  display: none;
}

.pub-faq-item summary:focus-visible {
  outline-offset: -3px;
  border-radius: 20px;
}

.pub-faq-chevron {
  color: var(--label-3);
  transition: transform 0.2s ease;
}

.pub-faq-item[open] .pub-faq-chevron,
.pub-footer-more[open] .pub-faq-chevron,
.pub-toc[open] .pub-faq-chevron {
  transform: rotate(180deg);
}

.pub-faq-body {
  padding: 0 20px 18px;
  color: var(--label);
  font-size: 17px;
}

.pub-faq-body p + p {
  margin-block-start: 8px;
}

body.pub .pub-faq-body a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 700;
}

/* التواصل */
.pub-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 20px;
}

.pub-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pub-contact-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
}

.pub-contact-list li > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pub-contact-list .pub-icon {
  margin-block-start: 4px;
  color: var(--tint);
}

.pub-contact-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--label-2);
}

body.pub .pub-contact-list a {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.pub-contact-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block-start: 18px;
}

.pub-contact-actions .pub-btn {
  width: 100%;
}

.pub-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 18px;
}

body.pub .pub-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  color: var(--tint);
  background: var(--tint-weak);
}

body.pub .pub-social:hover {
  background: var(--tint-weak-2);
}

/* برامج المؤسسة (في «عن البرنامج») */
.pub-programs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: 12px;
}

.pub-programs li {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-tint);
}

.pub-programs strong {
  color: var(--label);
  font-size: 17px;
}

.pub-programs span {
  color: var(--label-2);
  font-size: 15px;
}

.pub-programs li.is-current {
  background: var(--tint);
}

.pub-programs li.is-current strong,
.pub-programs li.is-current span {
  color: #fff;
}

/* «مين بنساعد؟» (في «عن البرنامج») */
.pub-audience {
  list-style: none !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px !important;
}

.pub-audience li {
  padding: 18px;
  border-radius: 20px;
  background: var(--surface-tint);
}

.pub-audience .pub-tile {
  margin-block-end: 10px;
}

body.pub .pub-audience h3 {
  font-size: 18px;
  margin: 0 0 4px;
}

.pub-audience p {
  color: var(--label-2);
  font-size: 16px;
}

.pub-final-cta {
  text-align: center;
  padding: 36px 24px;
  border-radius: 28px;
  background: var(--surface-tint);
}

body.pub .pub-final-cta h2 {
  font-size: clamp(22px, 3vw, 28px);
}

.pub-final-cta p {
  margin: 8px auto 0;
  max-width: 560px;
  color: var(--label-2);
}

.pub-final-cta .pub-btn {
  margin-block-start: 16px;
  max-width: 420px;
}

/* ───────────── التذييل ───────────── */

.pub-footer {
  margin-block-start: auto;
  color: rgb(255 255 255 / 0.82);
  background: var(--primary-900);
  font-size: 16px;
}

.pub-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.3fr);
  gap: 40px;
  padding-block: 56px 36px;
}

body.pub .pub-footer h2 {
  font-size: 15px;
  font-weight: 600;
  color: rgb(255 255 255 / 0.75);
  margin-block-end: 10px;
}

.pub-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.pub .pub-footer a {
  color: #fff;
  text-decoration: none;
}

body.pub .pub-footer a:hover {
  text-decoration: underline;
}

.pub-footer-col ul a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.pub-footer-about p {
  margin-block-start: 12px;
  color: rgba(255, 255, 255, 0.8);
}

body.pub .pub-brand-light {
  color: #fff;
}

/* v10: على التذييل الغامق: السطر الأول أبيض والثاني ذهبي فاتح، وتحتهما اسم البرنامج بالعربية */
.pub-brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

body.pub .pub-brand-light .pub-wordmark,
body.pub .pub-brand-light .pub-wordmark b {
  color: #fff;
}

body.pub .pub-brand-light .pub-wordmark span {
  color: var(--accent-300);
}

.pub-brand-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
}

/* v11 visual (V11-04 القاعدة 2): شعار المكتب الذهبي كاملًا على أرضية الشعار الغامقة (≥ 160px)؛ الرمز القديم لا يظهر */
.pub-footer-logo {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  margin-block-end: 18px;
}

.pub-brand-light .pub-logo {
  display: none;
}

/* مع الشعار الكامل يبقى الاسم النصي لقارئ الشاشة فقط (الشعار وحده لا يكفي اسمًا) */
.pub-footer-about:has(.pub-footer-logo) .pub-wordmark {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pub-footer-reg {
  font-weight: 600;
  font-size: 15px;
  color: rgb(255 255 255 / 0.75) !important;
}

.pub-footer .pub-contact-list {
  gap: 10px;
}

.pub-footer .pub-contact-list .pub-icon {
  color: var(--accent-300);
}

.pub-footer .pub-contact-label {
  color: rgba(255, 255, 255, 0.75);
}

body.pub .pub-footer .pub-social {
  color: #fff;
  background: rgb(255 255 255 / 0.1);
}

/* «روابط مهمة» — الموبايل فقط */
.pub-footer-more,
.pub-footer-call {
  display: none;
}

.pub-footer-more {
  margin-inline: var(--pub-gutter);
  border-block-start: 1px solid rgb(255 255 255 / 0.14);
}

.pub-footer-more summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--row-h);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  cursor: pointer;
}

.pub-footer-more summary::-webkit-details-marker {
  display: none;
}

.pub-footer-more .pub-faq-chevron {
  color: rgb(255 255 255 / 0.75);
}

.pub-footer-more ul {
  padding-block-end: 10px;
}

.pub-footer-more ul a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-size: 17px;
}

.pub-footer-call {
  margin: 0 var(--pub-gutter) 8px !important;
  font-size: 16px;
}

body.pub .pub-footer-call a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 700;
}

.pub-footer-bottom {
  border-block-start: 1px solid rgb(255 255 255 / 0.1);
  font-size: 15px;
  color: rgb(255 255 255 / 0.75);
}

.pub-footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  padding-block: 14px;
}

body.pub .pub-staff-link {
  color: rgba(255, 255, 255, 0.8);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ───────────── الصفحات الداخلية والقانونية ───────────── */

/* @critical-start:legal — العنوان و«بالمختصر» يُضمّنان في <head> الصفحات القانونية وصفحة 404 (مع الكتلة العامة أعلاه).
   v11 visual (V-3): عنوان كبير على الأبيض بدل الشريط الأخضر الغامق، و«بالمختصر» سطح هادئ بلا حدود ولا حافة ملوّنة */
.pub-page-hero {
  padding-block: 28px 8px;
}

.pub-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--label-2);
}

.pub-crumbs li + li::before {
  content: "‹";
  margin-inline-end: 6px;
  color: var(--label-3);
}

body.pub .pub-crumbs a {
  color: var(--label-2);
  /* v12 gate (K-P5): هدف لمس 44px على الأقل دون أن يتغير مكان السطر (الحشو يقابله هامش سالب) */
  display: inline-block;
  padding-block: 14px;
  margin-block: -14px;
}

body.pub .pub-page-hero h1 {
  color: var(--label);
  font-size: clamp(30px, 4.2vw, 40px);
  line-height: 1.25;
}

.pub-page-hero p {
  margin-block-start: 10px;
  max-width: 760px;
  font-size: 18px;
  color: var(--label-2);
}

/* «آخر تحديث»: نص ثانوي على الأبيض (≥ 5:1 لأي لونين؛ كان أبيض على الأساسي 700) */
.pub-updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 12px !important;
  font-size: 15px !important;
  color: var(--label-2) !important;
}

/* «بالمختصر» (B91-15): أعلى كل صفحة سياسة، تحت العنوان مباشرة */
body.pub .pub-summary {
  margin-block-start: 16px;
  max-width: 760px;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--surface-tint);
  color: var(--label);
  font-size: 18px;
  line-height: 1.6;
}

body.pub .pub-summary h2 {
  font-size: 19px;
  color: var(--label);
  margin: 0 0 6px;
}

body.pub .pub-summary ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.pub .pub-summary li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

body.pub .pub-summary li .pub-icon {
  margin-block-start: 4px;
  color: var(--ok);
}

body.pub .pub-summary p {
  margin: 0;
  max-width: none;
  font-size: 18px;
  color: var(--label);
}

body.pub .pub-summary a {
  color: var(--primary-600);
  font-weight: 700;
}

/* v12 gate (V-17): روابط «بالمختصر» (DD-11 في حذف البيانات) 600 لا 700 في صفحات الأفراد والشركات (لا يُطلب ملف Plex 700) */
body.pub[data-side="paid"] .pub-summary a {
  font-weight: 600;
}

/* روابط التليفون وواتساب داخل الجمل («بالمختصر»، طرق طلب الحذف، صفحة 404): هدف لمس 48px دون تغيير السطر */
body.pub.v91 .pub-summary a,
body.pub.v91 .pub-doc p > a[href^="tel:"],
body.pub.v91 .pub-ways a[href^="tel:"] {
  padding-block: 10px;
  margin-block: -10px;
}

@media (max-width: 600px) {
  .pub-page-hero {
    padding-block: 18px 4px;
  }

  body.pub .pub-page-hero h1 {
    font-size: 28px;
  }

  .pub-page-hero p {
    font-size: 17px;
  }

  body.pub .pub-summary {
    padding: 14px 16px;
  }

  /* مسار التصفح على الموبايل: الشعار في الرأس يرجع للرئيسية، فتظهر «بالمختصر» أعلى */
  .pub-page-hero nav[aria-label="مسار التصفح"] {
    display: none;
  }
}

/* v11 visual (V11-P2): زر ممتلئ واحد في الشاشة — إن كان للصفحة زرها الأساسي (404) يصير زر الرأس ملوّنًا خفيفًا */
body.pub:has(.pub-doc .pub-btn-primary) .pub-nav-cta {
  background: var(--tint-weak);
  color: var(--tint);
}

/* v12 look (K12-55): الصفحات القانونية و404 للأفراد والشركات — العنوان بوجه العناوين، المقدمة بعرض القراءة، «بالمختصر»
   قائمة بخطوط بلا سطح ولا أيقونات؛ زر الرأس خطّي حين للصفحة زرها الممتلئ. «خيري» يبقى كما هو */
body.pub[data-side="paid"] .pub-page-hero {
  padding-block: clamp(28px, 5vw, 56px) 8px;
}

body.pub[data-side="paid"] .pub-page-hero h1 {
  color: var(--ink);
  font: var(--d2);
}

body.pub[data-side="paid"] .pub-page-hero p {
  max-width: 36em;
  color: var(--ink-2);
  font: var(--t-lead);
}

body.pub[data-side="paid"] .pub-crumbs {
  color: var(--ink-3);
  font: var(--t-small);
}

body.pub[data-side="paid"] .pub-updated {
  color: var(--ink-3) !important;
}

body.pub[data-side="paid"] .pub-summary {
  max-width: 40em;
  margin-block-start: 24px;
  padding: 0;
  border-radius: 0;
  background: none;
  border-block-start: 1px solid var(--ink);
  font: var(--t-ui);
}

body.pub[data-side="paid"] .pub-summary h2 {
  margin: 0;
  padding-block: 12px 4px;
  color: var(--ink-2);
  font: var(--t-label);
}

body.pub[data-side="paid"] .pub-summary ul {
  gap: 0;
}

body.pub[data-side="paid"] .pub-summary li {
  padding-block: 10px;
  border-block-end: 1px solid var(--rule);
}

body.pub[data-side="paid"] .pub-summary :is(p, li) {
  color: var(--ink);
  font: 400 17px/1.6 var(--f-ui);
}

body.pub[data-side="paid"] .pub-summary .pub-icon {
  display: none;
}

/* @critical-end */

.pub-doc-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-block: 32px 72px;
}

.pub-toc {
  position: sticky;
  inset-block-start: calc(var(--pub-header-h) + 20px);
  padding: 4px 18px;
  border-radius: 20px;
  background: var(--surface-tint);
  font-size: 16px;
}

.pub-toc summary {
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap);
}

.pub-toc summary::-webkit-details-marker {
  display: none;
}

.pub-toc ol {
  margin: 4px 0 12px;
  padding-inline-start: 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.pub .pub-toc a {
  color: var(--label);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 48px; /* (إصلاح 9.1) قاعدة الـ 48px للمستفيدة (B91-12) */
  min-width: 48px; /* v11 visual review: عنوان قصير («مبادئنا») كان 38px عرضًا */
}

body.pub .pub-toc a:hover {
  color: var(--tint);
  text-decoration: underline;
}

.pub-doc {
  max-width: 820px;
  min-width: 0;
}

.pub-doc section + section {
  margin-block-start: 40px;
}

body.pub .pub-doc h2 {
  font-size: 24px;
  line-height: 1.3;
  margin-block-end: 12px;
}

body.pub .pub-doc h3 {
  font-size: 18.5px;
  margin-block: 20px 8px;
}

.pub-doc p,
.pub-doc li {
  color: var(--label);
}

.pub-doc p + p {
  margin-block-start: 12px;
}

.pub-doc ul,
.pub-doc ol {
  margin: 12px 0;
  padding-inline-start: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pub-doc li::marker {
  color: var(--pub-gold);
}

.pub-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  margin-block: 16px;
  border-radius: 16px;
  background: var(--tint-weak);
}

.pub-callout .pub-icon {
  color: var(--tint);
  margin-block-start: 4px;
}

.pub-callout-gold {
  background: var(--gold-wash);
}

.pub-callout-gold .pub-icon {
  color: var(--gold-ink);
}

.pub-callout p {
  margin: 0;
}

.pub-ways {
  list-style: none !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px !important;
}

.pub-ways li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 20px;
  background: var(--surface-tint);
}

.pub-ways .pub-tile {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

.pub-ways strong {
  display: block;
  font-size: 17px;
}

.pub-ways li > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pub-ways .pub-btn {
  margin-block-start: 10px;
  font-size: 16px;
  padding: 8px 16px;
}

.pub-timeline {
  list-style: none !important;
  padding: 0 !important;
  counter-reset: tl;
  gap: 0 !important;
}

.pub-timeline li {
  position: relative;
  padding-inline-start: 52px;
  padding-block-end: 18px;
  counter-increment: tl;
}

.pub-timeline li::before {
  content: counter(tl);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tint-weak);
  color: var(--tint);
  font-weight: 700;
  font-size: 15px;
}

.pub-timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 17px;
  inset-block: 40px 4px;
  width: 2px;
  background: var(--primary-100);
}

.pub-timeline strong {
  display: block;
}

.pub-values {
  list-style: none !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px !important;
}

.pub-values li {
  padding: 16px 18px;
  border-radius: 20px;
  background: var(--surface-tint);
}

.pub-values strong {
  display: block;
  color: var(--label);
  font-size: 17px;
  margin-block-end: 4px;
}

.pub-doc .pub-programs {
  margin-block-start: 14px;
}

.pub-doc-cta {
  margin-block-start: 24px;
}

/* ───────────── صفحة المتابعة /p/<رمز> وصفحة الطلب (تكمل أنماط app.css؛ أسماء الأصناف ثابتة لصفحتي الطلب والمتابعة) ───────────── */

body.pub .portal-page {
  background: var(--pub-cream);
  padding-block-end: 24px;
}

/* نفس عرض حاوية الرأس والتذييل */
body.pub .portal-page .container {
  max-width: var(--pub-container);
  padding-inline: var(--pub-gutter);
}

body.pub .portal-hero h1 {
  color: #fff;
  font-size: clamp(24px, 3.6vw, 32px);
}

body.pub .portal-hero p {
  color: rgba(255, 255, 255, 0.85);
  margin-block-start: 6px;
}

/* روابط ملخص الملف داخل البطل الداكن تحتفظ بلونها الأبيض (قاعدة روابط الموقع العامة لا تنطبق عليها) */
body.pub .portal-summary a,
body.pub .portal-summary a:hover {
  color: #fff;
}

body.pub .portal-contact {
  margin-block-start: 18px;
}

body.pub .portal-section {
  scroll-margin-top: 96px;
}

body.pub .portal-private-note {
  font-size: 15px;
  color: var(--pub-ink-soft);
  text-align: center;
  padding-block: 8px 0;
}

body.pub .portal-noscript {
  padding-block: 32px;
}

/* ───────────── صفحة الطلب (تكمل أنماط app.css) ───────────── */

body.pub .intake-page {
  background: var(--pub-cream);
  padding-block: 40px 72px;
}

body.pub .intake-head h1 {
  font-size: clamp(26px, 3.6vw, 34px);
}

body.pub .intake-head p {
  font-size: 17px;
}

body.pub .intake-card {
  border-color: var(--pub-line);
  border-radius: 24px;
}

.intake-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-block-start: 14px;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--pub-ink-soft);
}

.intake-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.intake-trust .icon {
  color: var(--success-700, #1c6a39);
}

.benef-section {
  grid-column: 1 / -1;
  border-radius: 18px;
  border: 1px solid var(--accent-100);
  background: var(--accent-50);
}

.benef-section > summary {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  border-radius: 18px;
}

.benef-section > summary::-webkit-details-marker {
  display: none;
}

.benef-section > summary .benef-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--accent-700);
  border: 1px solid var(--accent-100);
}

.benef-summary-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.benef-summary-text strong {
  font-size: 16.5px;
}

.benef-summary-text span {
  font-size: 15px;
  color: var(--text-muted, #4f5d6b);
}

.benef-chevron {
  margin-block-start: 10px;
  color: var(--accent-700);
  transition: transform 0.2s ease;
}

.benef-section[open] .benef-chevron {
  transform: rotate(180deg);
}

.benef-body {
  padding: 0 18px 18px;
}

.benef-body .form-grid {
  margin-block-start: 4px;
}

.benef-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--gray-700, #374654);
}

.benef-note .icon {
  margin-block-start: 4px;
  color: var(--primary-700);
}

.wizard .benef-body {
  padding: 0;
}

/* بطاقة النجاح */
body.pub .success-card {
  gap: 16px;
}

body.pub .success-card .success-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.5;
}

.success-steps {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  width: 100%;
  max-width: 560px;
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.success-steps li {
  position: relative;
  display: flex;
  gap: 14px;
  padding-block-end: 16px;
}

.success-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 17px;
  inset-block: 38px 2px;
  width: 2px;
  background: var(--primary-100);
}

.success-step-num {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: var(--primary-50);
  color: var(--primary-700);
  border: 1px solid var(--primary-100);
}

.success-steps li.is-done .success-step-num {
  background: var(--success-100, #e2f3e8);
  color: var(--success-700, #1c6a39);
  border-color: transparent;
}

.success-steps strong {
  display: block;
}

.success-steps span {
  color: var(--text-muted, #4f5d6b);
  font-size: 15px;
}

.success-portal {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 18px;
  background: var(--surface-2, #f8fafb);
  border: 1px solid var(--border, #dfe5ea);
  text-align: start;
}

.success-portal .cta-row {
  margin: 0;
}

.success-portal-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.success-portal-link code {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  font-size: 15px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border, #dfe5ea);
}

.success-warning {
  font-size: 15px;
  color: var(--warning-700, #8a5300);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.success-warning .icon {
  margin-block-start: 3px;
}

/* ───────────── الاستجابة للشاشات ───────────── */

@media (max-width: 1080px) {
  .pub-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pub-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .pub-how,
  .pub-split,
  .pub-contact,
  .pub-audience {
    grid-template-columns: minmax(0, 1fr);
  }

  .pub-doc-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding-block: 24px 48px;
  }

  .pub-toc {
    position: static;
  }

  .pub-section {
    padding-block: 52px;
  }
}

@media (max-width: 720px) {
  /* التذييل على الموبايل: الشعار والإشهار ثم «روابط مهمة» مطوية ورقم المساعدة */
  .pub-footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-block: 28px 12px;
  }

  .pub-footer-desktop {
    display: none !important;
  }

  .pub-footer-more {
    display: block;
  }

  .pub-footer-call {
    display: block;
  }

  /* «دخول فريق العمل» موجود داخل «روابط مهمة» */
  body.pub .pub-footer-bottom .pub-staff-link {
    display: none;
  }
}

@media (max-width: 600px) {
  body.pub {
    font-size: 17px;
  }

  body.pub.v91 {
    font-size: var(--text);
  }

  .pub-values,
  .pub-ways {
    grid-template-columns: minmax(0, 1fr);
  }

  .pub-services {
    gap: 8px;
  }

  body.pub .pub-tile-link {
    padding: 12px;
    gap: 6px;
  }

  .pub-service-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .pub-section {
  padding-block: 44px;
}

  .pub-section-head {
    margin-block-end: 18px;
  }

  body.pub .pub-section-head h2,
  body.pub .pub-h2 {
  font-size: 26px;
}

  .pub-section-head p {
    font-size: 17px;
  }

  .pub-panel {
    padding: 20px 16px;
  }

  .pub-faq-item summary {
    padding-inline: 16px;
    font-size: 17px;
  }

  .pub-faq-body {
    padding-inline: 16px;
  }

  .pub-final-cta {
    padding: 24px 16px;
  }

  .pub-cta-row .pub-btn {
    width: 100%;
  }

  /* (عنوان الصفحات الداخلية و«بالمختصر» على الموبايل: في كتلة @critical-start:legal أعلاه) */

  body.pub .intake-page {
    padding-block: 24px 56px;
  }

  .benef-section > summary {
    padding: 14px;
  }

  .benef-body {
    padding: 0 14px 14px;
  }
}

/* ==========================================================================
   v10 experience — الضغط والمواد والإتاحة (خارج الجزء الحرج: يصل مع الملف بعد الرسم الأول)
   ========================================================================== */

:root {
  --ease-in-mirror: cubic-bezier(0.8, 0, 0.8, 0.2);
  --dur-fade: 150ms;
}

/* (X10-P2) بقية ما يُضغط في الموقع العام: يبدأ مع الإصبع، ويُلغيه التمرير (ومعها انتقالا مربعات الصفحة الرئيسية) */
body.pub .pub-pick-tile,
body.pub .pub-pick-way,
.pub-btn,
body.pub .pub-tile-link,
body.pub .pub-returning,
.pub-menu-toggle,
.pub-head-contact,
body.pub .pub-listen {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform var(--dur-release) var(--ease-out),
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.pub-btn:active:not(:disabled),
body.pub .pub-tile-link:active,
body.pub .pub-returning:active,
.pub-menu-toggle:active,
.pub-head-contact:active,
body.pub .pub-listen:active {
  transform: scale(var(--press-scale));
  background-image: linear-gradient(var(--press-dim), var(--press-dim));
  transition-duration: var(--dur-press);
}

/* 200 % تكبير على هاتف 360px (≈ 180px): العلامة فوق الاسم في التذييل فلا يخرج الاسم عن الشاشة */
@media (max-width: 299px) {
  body.pub .pub-footer .pub-brand {
    flex-wrap: wrap;
  }
}

/* «دخول فريق العمل» و«دخول الشركات» في سطر التذييل الأخير (الموبايل: داخل «روابط مهمة») */
.pub-footer-logins {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 24px;
}

/* (X10-L2) رأس الصفحة «كروم» شفاف؛ بلا دعم للتمويه يبقى شبه معتم كما في 9.2 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pub-header {
    background: rgb(255 255 255 / 0.97);
  }
}

/* ألوان مؤسسة مخصصة (#bm-theme): الرأس صلب — المولّد يضمن الدرجة 700 على الأبيض لا على «كروم» شفاف فوق التذييل الغامق */
html:has(#bm-theme) .pub-header {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* (X10-L3) حافة الرأس تظهر بعد التمرير فقط؛ بلا دعم يبقى الخط الثابت (نفس السماكة: لا إزاحة) */
@supports (animation-timeline: scroll()) {
  .pub-header {
    border-block-end-color: transparent;
    animation: pub-chrome-edge linear both;
    animation-timeline: scroll(root);
    animation-range: 0 24px;
  }

  @keyframes pub-chrome-edge {
    to {
      border-block-end-color: var(--pub-line);
      box-shadow: inset 0 -1px 0 var(--separator);
    }
  }
}

/* (X10-A1) الحركة المخفّضة: التحويلات تقفز، أما الشفافية والألوان فتتلاشى في 150ms (يغلب قاعدة الجزء الحرج: بعدها) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-property: opacity, color, background-color, border-color, box-shadow !important;
    transition-duration: 150ms !important;
  }
}

/* (X10-A2) شفافية أقل: رأس معتم */
@media (prefers-reduced-transparency: reduce) {
  .pub-header {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* (X10-A3) تباين أعلى وألوان النظام القسرية */
@media (prefers-contrast: more) {
  :root {
    --press-dim: rgb(0 0 0 / 0.12);
  }

  .pub-header {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 -1px 0 var(--label-2);
  }

  body.pub .pub-btn-outline {
    border-color: currentColor;
  }

  /* V11-53: الأسطح الهادئة وبطاقتا البوابة تأخذ حدًا 1.5px */
  .gate-card,
  .pub-tile-link,
  .pub-panel,
  .pub-faq,
  .pub-final-cta,
  .pub-returning,
  body.pub .pub-summary {
    box-shadow: 0 0 0 1.5px var(--label-2);
  }
}

@media (forced-colors: active) {
  /* الظلال تختفي في الألوان القسرية: حافة المربعات والطرق تصير خطًا بلون النص (V11-53) */
  .gate-card,
  .pub-pick-tile,
  .pub-pick-way,
  .pub-seg-pill,
  .pub-tile-link,
  .pub-faq {
    outline: 2px solid CanvasText;
    outline-offset: -2px;
  }

  body.pub .pub-pick-tile:active,
  .pub-btn:active {
    outline: 2px solid Highlight;
  }

  .pub-header {
    background: Canvas;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ───────────── الطباعة (السياسات) ───────────── */

@media print {
  .pub-header,
  .pub-footer,
  .pub-toc,
  .skip-link {
    display: none !important;
  }

  .pub-page-hero {
    color: #000;
    background: none;
    padding: 0 0 16px;
  }

  body.pub .pub-page-hero h1,
  .pub-page-hero p,
  .pub-crumbs,
  body.pub .pub-crumbs a {
    color: #000 !important;
  }

  .pub-doc-layout {
    display: block;
    padding: 0;
  }
}

/* ===== v11 gate-public (owner: gate-public; visual never edits below this line) ===== */

/* v11 gate-public (H-G2): شاشة الاختيار وصفحة الأفراد والشركات — رموز الألوان فقط (§5.8)، بلا ألوان حرفية.
   كتلتان مسماتان تُضمَّنان في <head> مع الكتلة العامة: «gate» في حالة الشاشة على «/» (≤ 3,300 بايت) و«paid» في /services
   (≤ 3,500 بايت)، وما بعدهما يصل مع الملف. */


/* ===== v12 look (owner: look): الصفحة الأولى وصفحات الشجرة وإطار الطلب (§5.6). كتلة «gate» حُذفت في LK-1 بعد أن أزال
   مسار entry شاشة الاختيار من «/» (EN-3). ===== */

/* @critical-start:entry — «/» وصفحات /start/… (K12-22/23، L12-03/04/13): ورقة بيضاء، سؤال واحد، صفوف بخطوط رفيعة، زر واحد */
.lh {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
}

.lh__head {
  display: flex;
  justify-content: center;
  padding: clamp(28px, 6vh, 64px) var(--gutter) 0;
}

.lh__head--small {
  padding-top: 10px;
}

.lh__logo img {
  display: block;
  width: min(64vw, 260px);
  height: auto;
}

.lh__mark img {
  display: block;
  width: auto;
  height: 20px;
}

.lh__mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.lh__body,
.lh__foot {
  width: 100%;
  max-width: calc(var(--col) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.lh__body {
  flex: 1;
  padding-block: clamp(28px, 6vh, 64px) 48px;
}

.lh__head--small + .lh__body {
  padding-top: clamp(20px, 4vh, 44px);
}

.lh__foot {
  padding-block: 24px 32px;
  color: var(--ink-3);
  font: var(--t-small);
}

.lh__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
}

/* «.lh» قبل الرابط: قاعدة الروابط العامة body.pub a أولويتها (0,1,2) */
.lh .lh__links a {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--ink-2);
  text-decoration: none;
}

.lh__links--small {
  font: var(--t-num);
}

.trail {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin-bottom: 24px;
  color: var(--ink-3);
  font: var(--t-small);
}

.lh .trail__back {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

/* سهم الرجوع (→ في الواجهة العربية) مرسوم بقناع، فالرابط نص فقط في HTML */
.trail__back::before {
  content: "";
  width: 18px;
  height: 10px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h17M13 1l4 4-4 4' fill='none' stroke='red' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.trail__sep {
  flex: none;
  width: 1px;
  height: 16px;
  background: var(--rule-2);
}

.q__title {
  color: var(--ink);
  font: var(--d2);
}

.opts {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-2);
}

.opt {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}

.opts--compact .opt {
  min-height: 64px;
}

.opt__main {
  flex: 1;
  min-width: 0;
}

.opt__t {
  display: block;
  color: var(--ink);
  font: 400 20px/1.5 var(--f-ui);
}

.opt__s {
  display: block;
  margin-top: 2px;
  color: var(--ink-2);
  font: var(--t-ui);
}

.opt .arrow {
  flex: none;
  width: 22px;
  height: 12px;
  color: var(--ink-3);
}

.pub .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--target);
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  background: none;
  font: 600 16px/1.2 var(--f-ui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.pub .btn--primary {
  background: var(--act);
  color: var(--on-act);
}

.pub .btn--line {
  border-color: var(--ink);
  color: var(--ink);
}

.pub .btn--text {
  padding-inline: 4px;
  color: var(--act);
}

.pub .btn--sm {
  position: relative;
  min-height: 38px;
  padding: 0 18px;
  font: 600 14px/1.2 var(--f-ui);
}

.pub .btn--sm::after {
  content: "";
  position: absolute;
  inset: -6px 0;
}

/* شاشة قصيرة (360×640): الشعار والصفوف الثلاثة والتذييل كلها دون تمرير */
@media (max-height: 700px) {
  .lh__head {
    padding-top: 20px;
  }

  .lh__logo img {
    width: min(52vw, 200px);
  }

  .lh__body {
    padding-block: 20px 16px;
  }

  .opts {
    margin-top: 20px;
  }

  .opt {
    min-height: 64px;
    padding-block: 10px;
  }

  .lh__foot {
    padding-block: 8px 12px;
  }
}

@media (max-width: 340px) {
  .pub .btn {
    padding-inline: 16px;
    white-space: normal;
  }

  .q__title {
    overflow-wrap: anywhere;
  }
}
/* @critical-end:entry */

/* v12 look (K12-24، L12-04): شاشة السؤال في الطلب — صفوف أزرار بحلقة، وخط الخطوة؛ صفحة الطلب تحمّل الملف كله في <head> */
.opt--choice {
  width: 100%;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: var(--rule);
  background: none;
  font: inherit;
  text-align: start;
}

.opt__ring {
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--field);
  border-radius: 50%;
}

.opt[aria-current="true"] {
  background: var(--paper-2);
}

.opt[aria-current="true"] .opt__ring {
  border: 7px solid var(--act);
}

.opt--unknown .opt__t {
  color: var(--ink-2);
}

.step {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: var(--ink-3);
  font: var(--t-num);
}

.step__bar {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.step__bar i {
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: calc(var(--p, 0) * 100%);
  height: 3px;
  background: var(--act);
}

/* v12 gate (R-01، CLS ≤ 0.01): بطاقة «الصفحة بطيئة» في إطار الطلب لا تأخذ مكانًا قبل ثوانيها الثماني (كانت مخفية بطولها 650px
   فيبدأ التذييل تحت الشاشة ثم يقفز إليها حين يزيلها intake.js). وطلب عرض الشركات (حقول طويلة) يحجز طول الشاشة من أول رسم،
   فيبقى التذييل تحتها قبل رسم الحقول وبعده؛ وكذلك شاشة رقم «نتصل بكم» (?mode=callback). */
.lh .bmf-slow-box {
  max-height: 0;
  overflow: hidden;
  animation: bmf-slow-box 0s 8s forwards;
}

@keyframes bmf-slow-box {
  to {
    max-height: 4000px;
  }
}

.lh #intake-root.lh-long {
  min-height: 100svh;
}

/* v12 gate (V-21، A11): الأفعال النصية («ليس الآن»، «حفظ رابط صفحة طلبكم») على البداية كباقي الصفحة، لا في وسط سطر كامل */
.lh .bmf-actions > .btn--text {
  justify-self: start;
}

/* v12 look: ما بعد الرسم الأول لصفحات الشجرة والطلب (التمرير، التركيز، الضغط، الحركة) */
.opt {
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.opt .arrow {
  transition: transform 0.18s ease, color 0.18s ease;
}

/* v12 gate (JR-07): المرور بالمؤشر فقط؛ على اللمس يبقى «المرور» عالقًا على الصف الذي وقع تحت الإصبع في الشاشة التالية فيبدو
   كإجابة مختارة (مثل K-P5 لروابط .lh__links) */
@media (hover: hover) {
  .opt:hover {
    background: var(--paper-2);
  }

  .opt:hover .arrow {
    color: var(--act);
    transform: translateX(-4px);
  }
}

.opt:active,
.opt--going {
  background: var(--paper-3);
}

/* «خيري» حين يُعاد (T-81): رابط هادئ بهدف لمس 44px؛ لا يظهر إلا في الحالة المعادة فقاعدته غير حرجة */
.lh__alt {
  margin-top: 24px;
  color: var(--ink-2);
  font: var(--t-ui);
}

.lh__alt a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--ink-2);
}

/* v12 gate (K-P5): الخط تحت الرابط عند المرور بالمؤشر فقط؛ على اللمس يبقى «المرور» عالقًا بعد الضغط فيظهر خط تحت رابط واحد
   من رابطي «وصلنا طلبكم» (I-66) لأنه وقع مكان زر «إرسال الطلب» */
@media (hover: hover) {
  .lh .lh__links a:hover,
  .lh__alt a:hover,
  .lh .trail__back:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.32em;
    text-decoration-thickness: 1px;
  }
}

.lh :focus-visible,
.pub .btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* الصفوف: حلقة داخلية (بعد القاعدة العامة أعلاه) */
.opt:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--act);
}

.pub .btn--primary:hover {
  background: var(--act-hover);
}

.pub .btn--line:hover {
  background: var(--paper-2);
}

.pub .btn--text:hover {
  text-decoration: underline;
  text-underline-offset: 0.32em;
}

@media (prefers-reduced-motion: reduce) {
  .opt,
  .opt .arrow {
    transition: none;
  }

  .opt:hover .arrow {
    transform: none;
  }
}

@media (forced-colors: active) {
  .opt,
  .pub .btn {
    border: 1px solid CanvasText;
  }

  .opt[aria-current="true"] .opt__ring,
  .step__bar i {
    forced-color-adjust: none;
  }

  :focus-visible {
    outline: 2px solid Highlight;
  }
}

/* @critical-start:paid — /services (K12-53، L12-10، E12-62): «كيف نساعدكم؟» بوجه العناوين، سطر الأتعاب، ثلاثة صفوف خدمات
   بخطوط رفيعة بلا أيقونات (مثل صفوف الشجرة)، ثم طرق التواصل والمواعيد سطرين هادئين. ≥ 1024: العنوان يمينًا والصفوف بجانبه */
.pub-start--paid {
  padding-block: clamp(28px, 6vw, 72px) clamp(40px, 6vw, 72px);
}

.pub-paid-head h1 {
  color: var(--ink);
  font: var(--d1);
}

.pub-paid-sub {
  max-width: 36em;
  margin-top: 12px;
  color: var(--ink-2);
  font: var(--t-lead);
}

.svc-list {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-2);
}

.pub .svc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  min-height: 88px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}

.svc__t {
  color: var(--ink);
  font: 600 19px/1.45 var(--f-ui);
}

.svc__d {
  margin-top: 4px;
  color: var(--ink-2);
  font: var(--t-ui);
}

.svc .arrow {
  grid-area: 1 / 2 / span 2;
  width: 22px;
  height: 12px;
  color: var(--ink-3);
}

.pub-paid-ways {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  margin-top: 20px;
  color: var(--ink-3);
  font: var(--t-ui);
}

.pub .pub-paid-ways a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--act);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
}

.pub-start--paid .pub-start-hours {
  color: var(--ink-3);
  font: var(--t-small);
}

@media (min-width: 1024px) {
  .pub-paid-hero {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }

  .pub-paid-body .svc-list {
    margin-top: 10px;
  }
}
/* @critical-end:paid */

/* ───────────── v11 /services (أُزيلت مع ترميز 12.0: «خيري» والشركات والمواضيع الثمانية، EN-4): قواعد غير حرجة باقية لاختبارات 11.0
   حتى 12.1؛ لا يطابقها شيء في صفحات 12.0 ───────────── */
/* طريق العودة لـ«خيري» (الاستثناء الوحيد لكلمة «مجاني» في صفحات الأفراد): صف 44px بعد السطر الفرعي مباشرة */
body.pub .pub-cross {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 8px;
  color: var(--label-2);
  font-size: 16px;
  line-height: 1.35;
  text-decoration: none;
}

.pub-cross-text {
  flex: 1;
  min-width: 0;
}

.pub-cross b {
  flex: none;
  color: var(--tint);
  white-space: nowrap;
}

.pub-cross-heart {
  flex: none;
  width: 24px;
  height: 24px;
}

.pub-cross .gate-kicker {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 30px;
  margin: 0;
  padding-inline: 12px;
  border-radius: 99px;
  background: var(--gold-wash);
  color: var(--gold-ink);
  box-shadow: inset 0 0 0 1px rgb(var(--accent-500-rgb) / 0.45);
  font-size: 17px;
  font-weight: 700;
}

body.pub .pub-co-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  margin-top: 8px;
  padding: 8px 16px;
  border-radius: 14px;
  background: var(--surface-tint);
  color: var(--label);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.pub-co-text,
.g-main {
  flex: 1;
  min-width: 0;
}

.g-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--tint-weak);
  color: var(--tint);
}

.g-ico svg,
.g-chev {
  width: 18px;
  height: 18px;
}

.g-chev {
  flex: none;
  color: var(--label-3);
}

.pub-topic-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-radius: 20px;
  background: var(--surface-tint);
  overflow: hidden;
}

.pub-topic-list li {
  position: relative;
}

.pub-topic-list li + li::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 58px 0;
  height: 1px;
  background: var(--separator);
}

.pub-topic-list .g-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 10px 16px;
  color: var(--label);
  text-decoration: none;
}

.g-title,
.g-sub {
  display: block;
}

.g-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

.g-sub {
  color: var(--label-2);
  font-size: 15px;
  line-height: 1.45;
}

/* السطر الفرعي في قائمة المواضيع: حتى سطرين (v11 fixer-public V8/J-16: كان سطرًا واحدًا فقُصّ «…وغيرها» على الهاتف)،
   والصف بارتفاع سطرين محجوز (10+23.8+43.5+10) فلا يتغير ارتفاعه حين يصل الخط العربي (لا إزاحة، r2 S26) */
.pub-topic-list .g-sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.pub-start--paid .pub-pick-ways {
  margin-top: 14px;
}

/* v11 fixer-public (J-06): «نتصل بكم» ملوّن خفيف في جانب الأفراد (النموذج services-home)؛ الذهبي الممتلئ لـ«خيري» وحدها (INV-10) */
body.pub-paid .pub-pick-way--callback {
  border-color: transparent;
  background: var(--gold-wash);
  color: var(--gold-ink);
  box-shadow: inset 0 0 0 1px rgb(var(--accent-500-rgb) / 0.55);
}

body.pub-paid .pub-pick-way--callback .pa {
  fill: var(--gold-ink);
}

body.pub-paid .pub-pick-way--callback .pb {
  fill: var(--accent-600);
}

.pub-paid-sub,
.pub-cross,
.pub-co-row {
  text-wrap: pretty;
}

@media (max-width: 429px) {
  body.pub .pub-co-row {
    min-height: 70px;
  }
}

@media (max-width: 340px) {
  body.pub .pub-cross {
    min-height: 65px;
  }
}

@media (min-width: 700px) {
  .pub-topic-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pub-topic-list li:nth-child(2)::before {
    display: none;
  }
}


/* ───────────── v11 gate-public: ما بعد الشاشة الأولى (غير حرج) ───────────── */

/* «بالصوت» على الشاشة: مخفي في HTML حتى يجد listen.js صوتًا عربيًا (بعد وصول هذا الملف)، فقاعدته ليست في الكتلة الحرجة */
.gate-listen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 16px;
  border: 0;
  border-radius: 99px;
  background: var(--fill-1);
  color: var(--label);
  font-size: 16px;
  font-weight: 700;
}

.gate-listen[aria-pressed="true"] {
  background: var(--tint);
  color: var(--on-tint);
}

/* حلقة التركيز تتبع حواف البطاقة والصف (القاعدة العامة تجعلها 6px) */
body.pub .gate-card:focus-visible {
  border-radius: 24px;
}

body.pub .pub-co-row:focus-visible {
  border-radius: 14px;
}

body.pub .pub-topic-list .g-row:focus-visible {
  outline-offset: -3px;
  border-radius: 20px;
}

@media (hover: hover) {
  .gate-card:hover {
    box-shadow: 0 0 0 1px rgb(var(--primary-700-rgb) / 0.14), var(--e-3);
  }

  .pub-topic-list .g-row:hover,
  .pub-co-row:hover {
    background: var(--fill-1);
  }
}

.pub-topic-list .g-row:active,
.pub-co-row:active {
  background: var(--fill-2);
}

.gate-card,
.pub-topic-list .g-row {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s;
}

/* شارة نوع الخدمة: كلمة «تغيير» تحل محل ⇄ على الشاشات الكبيرة (§5.9) */
@media (min-width: 1024px) {
  .pub-seg-pill-swap {
    display: none;
  }

  /* v11 fixer-public (V11): «تغيير» جزء ثانٍ أهدأ بعد فاصل، لا كلمة بنفس وزن اسم الجانب */
  .pub-seg-pill-change {
    padding-inline-start: 8px;
    border-inline-start: 1px solid var(--separator);
    color: var(--label-2);
    font-weight: 500;
  }
}

/* «التزامنا معكم»: قائمة مجمّعة واحدة */
.pub-trust-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 20px;
  background: var(--surface-tint);
}

.pub-trust-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
}

.pub-trust-row + .pub-trust-row::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 58px 0;
  height: 1px;
  background: var(--separator);
}

.pub-trust-row .g-sub {
  margin-top: 2px;
}

/* v11 fixer-public (K12/J-06): زر الرأس صار ملوّنًا خفيفًا في صفحات البداية (الكتلة العامة)، فزر النهاية «طلب استشارة» هو
   الممتلئ الوحيد؛ وواتساب في «تواصلوا معنا» ملوّن خفيف بجانبه (زر ممتلئ واحد في الشاشة، V11-P2) */
body.pub-paid #contact .pub-btn-whatsapp {
  background: var(--ok-weak);
  color: var(--ok);
}

body.pub-paid #contact .pub-btn-whatsapp:hover {
  background: var(--ok);
  color: var(--on-tint);
}

/* مراجعة (V11-53): في الألوان القسرية تختفي الخلفيات، فالقوائم المجمّعة وصف «للشركات» تأخذ حافة ولون فواصل من النظام */
@media (forced-colors: active) {
  .pub-topic-list,
  .pub-trust-list,
  body.pub .pub-co-row {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }

  .pub-topic-list li + li::before,
  .pub-trust-row + .pub-trust-row::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

/* مراجعة: على الشاشة الكبيرة عمودان مثل قائمة المواضيع (سطر بعرض 1100px يصعب تتبعه) */
@media (min-width: 900px) {
  .pub-trust-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pub-trust-row:nth-child(2)::before {
    display: none;
  }
}

/* شريط الشركات: أرضية الشعار الغامقة، وزر ذهبي واحد عليها */
.pub-band {
  position: relative;
  overflow: hidden;
  padding: 28px 20px 22px;
  border-radius: 28px;
  background: var(--primary-900);
  color: var(--on-tint);
}

.pub-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 100% 0%, rgb(var(--accent-500-rgb) / 0.16), transparent 70%);
  pointer-events: none;
}

.pub-band > * {
  position: relative;
  z-index: 1;
}

.pub-band-eyebrow {
  color: var(--accent-300);
  font-size: 15px;
  font-weight: 700;
}

body.pub .pub-band-title {
  margin: 6px 0 0;
  color: var(--on-tint);
  font-size: 26px;
  line-height: 1.3;
}

.pub-band-text,
.pub-band-plans {
  margin-top: 8px;
  max-width: 56ch;
  color: var(--on-tint);
  opacity: 0.85;
  font-size: 17px;
  line-height: 1.6;
}

.pub-band-plans {
  font-size: 15px;
}

.pub-band-list {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.pub-band-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--on-tint);
  font-size: 16px;
  line-height: 1.45;
}

.pub-band-list .pub-icon {
  flex: none;
  color: var(--accent-300);
}

.pub-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.pub-band-actions .pub-btn {
  flex: 1 1 auto;
  min-height: 50px;
}

body.pub .pub-btn-band-gold {
  background: var(--accent-500);
  color: var(--on-accent);
}

body.pub .pub-btn-on-dark {
  background: transparent;
  color: var(--on-tint);
  box-shadow: inset 0 0 0 1.5px currentColor;
}

body.pub .pub-band-more,
body.pub .pub-band-more a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  color: var(--on-tint);
  font-size: 16px;
}

@media (min-width: 900px) {
  .pub-band {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    column-gap: 40px;
    padding: 40px 44px;
  }

  .pub-band > :not(.pub-band-list) {
    grid-column: 1;
  }

  .pub-band-list {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: center;
    gap: 16px;
  }

  .pub-band-actions .pub-btn {
    flex: 0 0 auto;
  }

  body.pub .pub-band-title {
    font-size: 32px;
  }
}

/* GP-5 (L11-14، r2 P2): صف الرجوع لـ«خيري» في /intake للأفراد والشركات — تحت عنوان شاشتي الموضوع والرقم */
.bmf-step > .pub-cross {
  margin-block: 4px 16px;
}

/* v11 fixer-public (V12): في شاشة الرقم بعد زر الإرسال */
.bmf-actions + .pub-cross {
  margin-top: 16px;
}

/* GP-5 (L11-37): «أو سجّلوا رسالة صوتية» تحت خانة الكتابة في شاشة الموضوع (الكتابة أولًا) */
.bmf-or-voice {
  margin-top: 8px;
}

/* ===== v12 look (LK-1, owner: look): صفحات الأفراد والشركات بعد الشاشة الأولى — «ورق المكتب» (K12-20/21/25/26/27/29/31،
   K12-53…55، L12-10/L12-57). كل قاعدة هنا محصورة في body.pub-paid (/services) أو [data-side="paid"]، فصفحات «خيري»
   (data-side=charity) تبقى بشكل 9.2/v11 (L12-33). بلا تدرّج ولا ظل؛ الذهبي للشعار وحده ===== */

/* 404 (الجانبان): كان style="" في القالب، صار صنفًا (CSP) */
.pub-nf-call {
  margin-block-start: 16px;
}

/* v12 gate (V-19): 404 للأفراد والشركات — «متابعة طلب» الزر الوحيد، و«طلب جديد» و«الصفحة الأولى» رابطان نصيان بهدف 44px */
body.pub[data-side="paid"] .pub-nf-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
  color: var(--act);
  font: 600 16px/1.2 var(--f-ui);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
}

body.pub[data-side="paid"] .pub-nf-link:hover {
  color: var(--act-hover);
}

body.pub[data-side="paid"] .pub-cta-row:has(.pub-nf-link) {
  align-items: center;
  gap: 8px 20px;
}

/* ── الرأس: ما بعد الرسم الأول (التمرير، التركيز، القائمة المفتوحة على الهاتف) ── */
body.pub[data-side="paid"] .pub-nav-cta {
  position: relative;
}

body.pub[data-side="paid"] .pub-nav-cta::after {
  content: "";
  position: absolute;
  inset: -6px 0;
}

body.pub[data-side="paid"] .pub-nav-link:hover,
body.pub[data-side="paid"] .pub-nav-link[aria-current="page"] {
  background: none;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
}

body.pub[data-side="paid"] .pub-nav-portal {
  color: var(--ink-2);
}

body.pub[data-side="paid"] .pub-nav-cta:hover {
  background: var(--paper-2);
  color: var(--ink);
}

body.pub[data-side="paid"] .pub-menu-toggle:hover {
  background: none;
  text-decoration: underline;
  text-underline-offset: 0.4em;
}

body.pub[data-side="paid"] :focus-visible {
  outline: none;
  border-radius: 0;
  box-shadow: var(--focus);
}

@media (max-width: 1080px) {
  body.pub[data-side="paid"] .pub-nav.is-open {
    gap: 0;
    padding: 4px var(--pub-gutter) 24px;
    background: var(--paper);
    border-block-end: 1px solid var(--rule-2);
    box-shadow: none;
  }

  body.pub[data-side="paid"] .pub-nav-link {
    min-height: 56px;
    padding-inline: 0;
    border-radius: 0;
    border-block-end: 1px solid var(--rule);
    color: var(--ink);
    font: 400 17px/1.4 var(--f-ui);
  }

  body.pub[data-side="paid"] .pub-nav-cta,
  body.pub-landing[data-side="paid"] .pub-nav-cta {
    min-height: 50px;
    margin: 20px 0 0;
    background: var(--act);
    color: var(--on-act);
    box-shadow: none;
    font-size: 16px;
  }

  body.pub[data-side="paid"] .pub-nav-cta:hover {
    background: var(--act-hover);
    color: var(--on-act);
  }
}

/* ── أزرار الصفحات العامة (K12-20): ممتلئ واحد، خطّي، نص؛ زوايا 2px ── */
/* review: زر الرأس (K12-21: صغير 38px، خطّي في /services) يبقى كما رسمته الكتلة الحرجة؛ :where لا يرفع الأولوية */
body.pub[data-side="paid"] .pub-btn:where(:not(.pub-nav-cta)) {
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 2px;
  box-shadow: none;
  font: 600 16px/1.2 var(--f-ui);
}

body.pub[data-side="paid"] .pub-btn .pub-icon {
  display: none;
}

body.pub[data-side="paid"] :is(.pub-btn-teal, .pub-btn-primary) {
  background: var(--act);
  color: var(--on-act);
}

body.pub[data-side="paid"] :is(.pub-btn-teal, .pub-btn-primary):hover {
  background: var(--act-hover);
  color: var(--on-act);
}

body.pub[data-side="paid"] :is(.pub-btn-outline, .pub-btn-band-gold, .pub-btn-call),
body.pub-paid #contact .pub-btn-call {
  background: none;
  border-color: var(--ink);
  color: var(--ink);
}

body.pub[data-side="paid"] :is(.pub-btn-outline, .pub-btn-band-gold, .pub-btn-call):hover {
  background: var(--paper-2);
  color: var(--ink);
}

/* واتساب نص لا زر أخضر ممتلئ (A15) */
body.pub[data-side="paid"] .pub-btn-whatsapp,
body.pub-paid #contact .pub-btn-whatsapp,
body.pub[data-side="paid"] .pub-btn-on-dark {
  min-height: 44px;
  padding: 0 4px;
  border-color: transparent;
  background: none;
  box-shadow: none;
  color: var(--act);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
}

body.pub[data-side="paid"] .pub-btn-whatsapp:hover,
body.pub-paid #contact .pub-btn-whatsapp:hover,
body.pub[data-side="paid"] .pub-btn-on-dark:hover {
  background: none;
  color: var(--act-hover);
}

/* v12 gate (V-02، WCAG 2.4.7): إعادة ضبط الأزرار أعلاه (box-shadow: none) بنفس أولوية قاعدة :focus-visible العامة وبعدها،
   فكانت تمسح حلقة التركيز عن «اطلبوا عرضًا» و«دخول بوابة الشركات» و«واتساب» وأزرار 404 وبطاقة الطلب المحفوظ */
body.pub[data-side="paid"] .pub-btn:focus-visible,
body.pub-paid #contact .pub-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

@media (min-width: 601px) {
  body.pub[data-side="paid"] .pub-btn-primary {
    width: auto;
  }
}

/* ── /services: الأقسام بخطوط وفراغ لا بطاقات (K12-26، L12-10) ── */
body.pub-paid .svc:hover {
  background: var(--paper-2);
}

body.pub-paid .svc .arrow {
  transition: transform 0.18s ease, color 0.18s ease;
}

body.pub-paid .svc:hover .arrow {
  color: var(--act);
  transform: translateX(-4px);
}

body.pub-paid .svc:active {
  background: var(--paper-3);
}

body.pub-paid .svc:focus-visible {
  box-shadow: inset 0 0 0 2px var(--act);
}

body.pub-paid .pub-section {
  padding-block: clamp(44px, 6vw, 80px);
  background: var(--paper);
}

body.pub-paid .pub-section-head {
  max-width: 22em;
  margin-block-end: 24px;
}

body.pub-paid .pub-section h2,
body.pub-paid .pub-band-title {
  margin: 0;
  color: var(--ink);
  font: var(--d2);
}

/* العنوان المعلّق: في عمود الهامش من 900px فأكثر وحده؛ تحته لا يُرسم (L12-57: لا سطر فوق العنوان على الهاتف) */
.sec-label {
  display: none;
}

@media (min-width: 900px) {
  body.pub-paid .pub-section > .pub-container {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 48px;
  }

  body.pub-paid .pub-section > .pub-container > :not(.sec-label) {
    grid-column: 2;
  }

  body.pub-paid .sec-label {
    display: block;
    grid-area: 1 / 1;
    padding-block-start: 14px;
    color: var(--ink-2);
    font: var(--t-label);
  }

  body.pub-paid .sec-label::before {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    margin-block-end: 12px;
    background: var(--ink);
  }
}

/* «كيف نعمل؟»: قائمة مرقّمة بخطوط، أرقام عادية بلا دوائر */
body.pub-paid .steps {
  display: block;
  border-block-start: 1px solid var(--rule-2);
}

body.pub-paid .steps li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 0 8px;
  padding-block: 20px;
  border-block-end: 1px solid var(--rule);
}

body.pub-paid .pub-how-num {
  width: auto;
  height: auto;
  display: block;
  border-radius: 0;
  background: none;
  color: var(--ink-3);
  font: 400 17px/1.55 var(--f-ui);
  font-variant-numeric: tabular-nums;
}

body.pub-paid .steps strong {
  display: block;
  color: var(--ink);
  font: var(--t-head);
}

body.pub-paid .steps span:not(.pub-how-num) {
  display: block;
  margin-top: 4px;
  max-width: 36em;
  color: var(--ink-2);
  font: 400 17px/1.75 var(--f-ui);
}

@media (min-width: 900px) {
  body.pub-paid .steps li > div {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
  }

  body.pub-paid .steps span:not(.pub-how-num) {
    margin-top: 0;
  }
}

/* الشركات: شريط عاجي واحد في الصفحة (بدل الأخضر الغامق)، قائمة بخطوط، زر خطّي ورابطان */
body.pub-paid .band {
  background: var(--paper-2);
}

body.pub-paid .pub-band {
  overflow: visible;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
}

body.pub-paid .pub-band::after {
  content: none;
}

body.pub-paid .pub-band-text,
body.pub-paid .pub-band-plans {
  max-width: 36em;
  margin-top: 12px;
  opacity: 1;
  color: var(--ink-2);
  font: var(--t-lead);
}

body.pub-paid .pub-band-plans {
  font: var(--t-ui);
}

body.pub-paid .pub-band-list {
  gap: 0;
  margin-top: 24px;
  border-block-start: 1px solid var(--rule-2);
}

body.pub-paid .pub-band-list li {
  padding-block: 12px;
  border-block-end: 1px solid var(--rule);
  color: var(--ink);
  font: var(--t-ui-strong);
}

body.pub-paid .pub-band-list .pub-icon {
  display: none;
}

body.pub-paid .pub-band-actions {
  align-items: center;
  gap: 8px 24px;
  margin-top: 28px;
}

body.pub-paid .pub-band-actions .pub-btn {
  flex: 0 0 auto;
}

body.pub-paid :is(.pub-band-new, .pub-band-more) {
  margin-top: 8px;
}

body.pub-paid :is(.pub-band-new, .pub-band-more) a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  color: var(--act);
  font: var(--t-ui);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
}

@media (min-width: 900px) {
  body.pub-paid .pub-band {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 48px;
    padding: 0;
  }

  body.pub-paid .pub-band-list {
    align-self: start;
    margin-top: 8px;
  }
}

/* «التزامنا معكم»: شريط شروط بخطوط، عمودان من 900px */
body.pub-paid .terms {
  border-radius: 0;
  background: none;
  border-block-start: 1px solid var(--rule-2);
}

body.pub-paid .pub-trust-row {
  display: block;
  padding: 18px 0;
  border-block-end: 1px solid var(--rule);
}

body.pub-paid .pub-trust-row::before {
  content: none;
}

body.pub-paid .terms .g-title {
  color: var(--ink);
  font: var(--t-ui-strong);
}

body.pub-paid .terms .g-sub {
  margin-top: 4px;
  color: var(--ink-2);
  font: var(--t-ui);
}

@media (min-width: 900px) {
  body.pub-paid .terms {
    column-gap: 48px;
  }
}

/* v12 gate (V-18، L12-10): «التزامنا معكم» شريط من 4 أعمدة على الشاشة الكبيرة (كان 2×2)، كل عمود بخط رفيع فوقه */
@media (min-width: 1100px) {
  body.pub-paid .pub-trust-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 32px;
  }

  body.pub-paid .pub-trust-row {
    padding: 18px 0 0;
    border-block-end: 0;
    border-block-start: 1px solid var(--rule-2);
  }
}

/* «الشركاء» (L12-56): أسماء بخطوط، وسطر التأسيس */
body.pub-paid .partners h2 {
  margin-block-end: 24px;
}

.partners__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--rule-2);
}

.partners__list li {
  padding-block: 14px;
  border-block-end: 1px solid var(--rule);
  color: var(--ink-2);
  font: var(--t-ui);
}

.partners__name {
  color: var(--ink);
  font-weight: 600;
}

.partners__since {
  margin-top: 16px;
  color: var(--ink-3);
  font: var(--t-small);
}

/* الأسئلة: <details> صفوف بخطوط (بلا سطح ولا زوايا) */
body.pub-paid .pub-faq {
  max-width: none;
  margin: 0;
  border-radius: 0;
  background: none;
  border-block-start: 1px solid var(--rule-2);
}

body.pub-paid .pub-faq-item,
body.pub-paid .pub-faq-item[open] {
  background: none;
}

body.pub-paid .pub-faq-item {
  border-block-end: 1px solid var(--rule);
}

body.pub-paid .pub-faq-item + .pub-faq-item {
  border-block-start: 0;
}

body.pub-paid .pub-faq-item summary {
  min-height: 64px;
  padding: 14px 0;
  color: var(--ink);
  font: var(--t-head);
}

body.pub-paid .pub-faq-item summary:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
}

body.pub-paid .pub-faq-item summary:focus-visible {
  border-radius: 0;
}

body.pub-paid .pub-faq-chevron {
  color: var(--ink-3);
}

body.pub-paid .pub-faq-body {
  max-width: 36em;
  padding: 0 0 20px;
  color: var(--ink-2);
  font: 400 17px/1.75 var(--f-ui);
}

body.pub-paid .pub-faq-body a {
  min-height: 44px;
  color: var(--act);
  font-weight: 600;
}

/* التواصل: قائمة كلمات بلا أيقونات، ثم الختام بخط حبر فوقه */
body.pub-paid .pub-contact {
  gap: 0 48px;
}

body.pub-paid .pub-panel {
  padding: 0;
  border-radius: 0;
  background: none;
}

body.pub-paid .pub-panel h2 {
  margin-block-end: 24px;
}

body.pub-paid .pub-panel .pub-contact-list {
  gap: 0;
  border-block-start: 1px solid var(--rule-2);
}

body.pub-paid .pub-panel .pub-contact-list li {
  padding-block: 14px;
  border-block-end: 1px solid var(--rule);
  color: var(--ink);
  font: var(--t-ui);
}

body.pub-paid .pub-panel .pub-contact-list .pub-icon {
  display: none;
}

body.pub-paid .pub-panel .pub-contact-label {
  display: block;
  margin-block-end: 2px;
  color: var(--ink-2);
  font: var(--t-label);
}

body.pub-paid .pub-panel .pub-contact-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -10px;
  color: var(--act);
  font-weight: 400;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
}

body.pub-paid .pub-contact-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 16px;
}

body.pub-paid .pub-contact-buttons .pub-btn {
  min-height: 44px;
  font-size: 15px;
}

body.pub-paid .closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 56px;
  padding: 32px 0 0;
  border-radius: 0;
  background: none;
  border-block-start: 1px solid var(--ink);
  text-align: start;
}

body.pub-paid .closing h2,
body.pub-paid .closing p {
  flex: 1 0 100%;
}

body.pub-paid .closing h2 {
  font: var(--d3);
}

body.pub-paid .closing p {
  max-width: 36em;
  margin: 0 0 8px;
  color: var(--ink-2);
  font: var(--t-lead);
}

body.pub-paid .closing .pub-btn {
  margin: 0;
}

body.pub-paid .pub-returning {
  flex: 1 0 100%;
  justify-content: flex-start;
  min-height: 44px;
  margin-top: 8px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-2);
  font: var(--t-ui);
}

body.pub-paid .pub-returning strong {
  color: var(--act);
  font-weight: 600;
}

body.pub-paid .pub-returning .pub-icon {
  display: none;
}

@media (max-width: 600px) {
  body.pub-paid .closing .pub-btn {
    flex: 1 0 100%;
  }
}

/* ── التذييل (K12-31): أرضية الشعار، الشعار الذهبي 190px، عناوين صغيرة، كلمات بلا أيقونات ولا فقاعات ── */
body.pub[data-side="paid"] .pub-footer {
  font: var(--t-small);
}

body.pub[data-side="paid"] .pub-footer-grid {
  padding-block: 64px 32px;
}

body.pub[data-side="paid"] .pub-footer-logo {
  width: 190px;
}

body.pub[data-side="paid"] .pub-footer h2 {
  color: var(--on-act);
  font: var(--t-label);
}

body.pub[data-side="paid"] .pub-footer .pub-contact-list .pub-icon,
body.pub[data-side="paid"] .pub-footer .pub-social .pub-icon {
  display: none;
}

body.pub[data-side="paid"] .pub-footer .pub-contact-label {
  color: color-mix(in srgb, var(--on-act) 78%, transparent);
  font: var(--t-label);
}

body.pub[data-side="paid"] .pub-footer .pub-social {
  min-height: 44px;
  padding: 0;
  border-radius: 0;
  background: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

body.pub[data-side="paid"] .pub-footer-bottom {
  border-color: color-mix(in srgb, var(--on-act) 12%, transparent);
  color: color-mix(in srgb, var(--on-act) 78%, transparent);
  font: var(--t-num);
}

/* v12 gate (V-18، A23): على الهاتف أعمدة التذييل نفسها قوائم بخطوط رفيعة (لا «روابط مهمة» مطوية)، وسطر المكتب ظاهر،
   و«دخول فريق العمل» في السطر الأخير */
@media (max-width: 720px) {
  body.pub[data-side="paid"] .pub-footer-grid {
    padding-block: 40px 16px;
  }

  body.pub[data-side="paid"] .pub-footer-about {
    padding-block-end: 20px;
  }

  body.pub[data-side="paid"] .pub-footer-col {
    padding-block: 20px 12px;
    border-block-start: 1px solid color-mix(in srgb, var(--on-act) 14%, transparent);
  }

  body.pub[data-side="paid"] .pub-footer-col ul {
    gap: 0;
  }

  body.pub[data-side="paid"] .pub-footer-bottom .pub-staff-link {
    display: inline-flex;
  }
}

/* ── الصفحات القانونية و404 بعد الرسم الأول (K12-55): المحتوى بعرض القراءة، الفهرس والملاحظات بخطوط ── */
body.pub[data-side="paid"] .pub-doc-layout {
  gap: 64px;
}

body.pub[data-side="paid"] .pub-toc {
  padding: 4px 0;
  border-radius: 0;
  background: none;
  border-block: 1px solid var(--rule-2);
  font: var(--t-ui);
}

body.pub[data-side="paid"] .pub-toc a {
  color: var(--ink-2);
}

body.pub[data-side="paid"] .pub-doc {
  max-width: 40em;
  font: 400 17px/1.75 var(--f-ui);
}

body.pub[data-side="paid"] .pub-doc h2 {
  color: var(--ink);
  font: 600 20px/1.45 var(--f-ui);
}

body.pub[data-side="paid"] .pub-doc h3 {
  color: var(--ink);
  font: var(--t-head);
}

body.pub[data-side="paid"] .pub-doc li::marker {
  color: var(--ink-3);
}

body.pub[data-side="paid"] .pub-callout {
  padding: 16px 20px;
  border-radius: 0;
  background: var(--paper-2);
  border-inline-start: 2px solid var(--act);
}

body.pub[data-side="paid"] .pub-callout .pub-icon,
body.pub[data-side="paid"] .pub-ways .pub-tile {
  display: none;
}

body.pub[data-side="paid"] :is(.pub-ways, .pub-values) li {
  padding: 16px 0;
  border-radius: 0;
  background: none;
  border-block-end: 1px solid var(--rule);
}

body.pub[data-side="paid"] .pub-timeline li::before {
  background: none;
  color: var(--ink-3);
  font: 400 15px/36px var(--f-ui);
}

body.pub[data-side="paid"] .pub-timeline li:not(:last-child)::after {
  width: 1px;
  background: var(--rule);
}

body.pub[data-side="paid"] .pub-cta-row {
  gap: 12px 16px;
}

@media (prefers-reduced-motion: reduce) {
  body.pub-paid .svc .arrow {
    transition: none;
  }

  body.pub-paid .svc:hover .arrow {
    transform: none;
  }
}

@media (forced-colors: active) {
  body.pub[data-side="paid"] :is(.pub-btn, .svc, .pub-faq-item, .pub-callout) {
    border: 1px solid CanvasText;
  }

  :focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }
}

/* «خيري» لا يستقبل طلبات جديدة (L12-49): صفحة الإشعار بأصناف «خيري» القائمة + قاعدة مسافات واحدة.
   v12 gate (V-20): بين كتل الصفحة داخل .pub-container (كانت على أبناء main، وابنه الوحيد الحاوية، فتلاصقت الكتل 5–7px) */
.kh-paused main .pub-container > * + * {
  margin-block-start: 20px;
}

/* v12 gate (K-P5): رابطا الخصوصية والشروط (KH-04) سطر روابط مستقل، فهدف لمسهما 44px (الحشو يقابله هامش سالب فلا يتحرك السطر) */
.kh-paused .pub-legal-links a {
  display: inline-block;
  padding-block: 13px;
  margin-block: -13px;
}