/* ═══════════════════════════════════════════════════════════════════════════
   أقسامُ التجربةِ العامّةِ — نظامُ التصميمِ اللي الأدمن **مايقدرش** يغيّرُه
   ═══════════════════════════════════════════════════════════════════════════

   المالك: *«الأدمن لا يستطيعُ تغييرَ font-size عشوائيًّا ولا padding عشوائيًّا
   ولا إضافةَ CSS… لأنَّ الهدفَ CONTENT CONTROL وليس DESIGN SYSTEM CONTROL»*.

   فكلُّ قرارٍ بصريٍّ هنا. والتكوينُ بيختارُ **نمطًا** من قائمةٍ، والنمطُ
   بيوَدّي لصنفٍ معرَّفٍ تحتُ — مافيش قيمةٌ جايّةٌ من القاعدةِ بتوصلْ للكسوةِ.

   ─────────────────────────────────────────────────────────────────────────
   والتصميمُ ده اتبنى بعدَ ما المالكُ رفضَ نسخةً: *«البُرودا وحشةٌ جدًّا»*.
   وتلاتُ نتائجَ بحثٍ بنت النسخةَ دي:

   ١ · **قفزةٌ في السلّمِ لا تدرّجٌ** — ٩٢px مقابلَ ١٢px في نفسِ الشاشةِ.
       *«تراتبيّةٌ مبالَغةٌ… الضخمُ بيمسكُ الشاشةَ كمرساةٍ بصريّةٍ»*.
   ٢ · **إيقاعٌ رأسيٌّ متغيّرٌ** — ١٢٨ · ٩٦ · ٨٠. ستُّ أقسامٍ بنفسِ الحشوةِ
       معناهُ إنَّ العينَ ماعندهاش سببٌ تقفَ.
   ٣ · **عدمُ تناظرٍ** — *«ابتعادٌ عن القوالبِ الآمنةِ المتوسّطةِ نحوَ شبكاتٍ
       تحريريّةٍ»*. فاللافتةُ ٧ / فراغٌ / ٤.

   وقاعدةٌ رابعةٌ من تنضيدِ العربيِّ: **ولا تباعدَ حروفٍ على العربيِّ إطلاقًا** —
   الحروفُ متّصلةٌ والتباعدُ بيفكُّ الكلمةَ. اللاتينيُّ وحدَه (`.lat`) بياخدُه.
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * **الرموزُ بتتبعُ الثيمَ — مش بتثبّتُ لونًا.**
 *
 * المالك على لقطةٍ: *«يعني إزاي في الدارك واللايت يكون غامق زيَّ بعض؟»*.
 *
 * أوّلُ نسخةٍ كتبت `--px-ink: #070c16` وخلاصْ. والثيمُ عندَه لوحتانِ
 * كاملتانِ بيتبدّلوا بـ`html[data-tyreon-theme="dark"]` — فاللافتةُ كانت
 * **بتتجاهلُ اختيارَ الزائرِ**، وهو اختيارٌ هو اللي عملَه بإيدِه.
 *
 * دلوقتي كلُّ لونٍ هنا مشتقٌّ من رموزِ الثيمِ. والقسمُ «الداكنُ» (التغطيةُ ·
 * السيّارةُ) بيفضلْ داكنًا في الوضعينِ **بقصدٍ** — هو لهجةٌ داخلَ الصفحةِ لا
 * أرضيّتَها، زيَّ فقرةٍ مظلَّلةٍ في مقالٍ. اللي كانَ غلطًا إنَّ **اللافتةَ**
 * كمان كانت كده، فالصفحةُ كلُّها بتقرا ليليّةً في الوضعِ النهاريِّ.
 */
:root {
  /* لهجةُ الحبرِ — للأقسامِ المظلَّلةِ وحدَها */
  --px-ink:    #0b1220;
  --px-ink-2:  #111a2b;
  --px-on-1:   #f2f5fb;
  --px-on-2:   #a7b6cf;
  --px-on-3:   #7186a3;
  --px-sig-t:  #93b4fb;
  --px-line-d: rgba(255, 255, 255, .13);

  /**
   * **السلّمُ — والسقفُ نزلَ من ٨٨ لـ٥٦.**
   *
   * المالك: *«الكلام دخل ع بعضها»*. والسببانِ:
   *
   * · `line-height: 1.12` على عربيٍّ **فيه تشكيلٌ** — فالسطرُ بيلمسْ
   *   اللي تحتَه. العربيُّ مايقلّش عن ١٫٣ حتى في العناوينِ الضخمةِ.
   * · و**العربيُّ بيقرا أكبرَ من اللاتينيِّ عندَ نفسِ المقاسِ** (ارتفاعُ
   *   س أعلى)، فـ٨٨px عربيٍّ ≈ ١١٠px لاتينيٍّ — عنوانٌ بيملا الشاشةَ
   *   ويتلفُّ تلاتَ مرّاتٍ.
   */
  --px-mega: clamp(28px, 4.4vw, 56px);
  --px-h2:   clamp(22px, 2.8vw, 34px);
  --px-h3:   clamp(17px, 1.7vw, 20px);
  --px-lead: clamp(15px, 1.25vw, 18px);
}

/**
 * **واللافتةُ بتاخدْ أرضيّةَ الصفحةِ — لا لونًا خاصًّا بيها.**
 *
 * فبتفتحْ معَ الفاتحِ وبتغمقْ معَ الغامقِ، والوهجُ الأزرقُ فوقَها بيخفُّ في
 * الفاتحِ عشان مايغرقش النصَّ.
 */
:root {
  --pxh-bg:   var(--c-bg, #fff);
  --pxh-txt:  var(--c-txt, #0b1220);
  --pxh-txt2: var(--c-txt2, #475569);
  --pxh-mut:  var(--c-mut, #64748b);
  --pxh-line: var(--c-bor, #e2e8f0);
  --pxh-glow: rgba(37, 99, 235, .10);
}
html[data-tyreon-theme="dark"] {
  --pxh-bg:   var(--c-bg);
  --pxh-txt:  #fff;
  --pxh-txt2: var(--px-on-2);
  --pxh-mut:  var(--px-on-3);
  --pxh-line: var(--px-line-d);
  --pxh-glow: rgba(37, 99, 235, .26);
}
/**
 * ═══════════════════════════════════════════════════════════════════════════
 * **`[hidden]` لازمٌ يغلبَ — جوّه أقسامِ PX وحدَها.**
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * الأصلُ: قسمُ السيّارةِ فيه حالتانِ، والمعروفةُ عليها `hidden` في الماركِ.
 * و`.pxv-known { display: grid }` **بيغلبُ `[hidden]`** في CSS، فالحالتانِ
 * ظهروا مع بعضٍ والزائرُ شافَ «مقاسُ الإطارِ الأصليُّ: —» وهو مادخلش سيّارةً.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * **بس القاعدةُ كانت `[hidden]` عاريةً — يعني عالميّةً.**
 *
 * المالك (٢٠٢٦-٠٨-٣١): *«هو إزاي في ٨ متاجرَ ولمّا أدخلُ على المتاجرِ مش
 * معروضةً؟ نفسُ الموضوعِ في كلِّ صفحاتِ الأدلّةِ»*.
 *
 * والملفُّ ده متحمَّلٌ على **كلِّ** صفحةٍ عامّةٍ (مقيسٌ: ٩ من ٩). فأيُّ وعاءٍ
 * في الموقعِ عليه `hidden` بقى **مستحيلًا يتفتحَ** بـ`style.display='block'`
 * — لأنَّ `!important` بيغلبُ الأسلوبَ السطريَّ.
 *
 * والمضروبُ **ستُّ صفحاتٍ** بنفسِ النمطِ:
 *
 *     brands · makes · sizes · tire-search · store-listing · find-your-car
 *
 * يعني تابُ «المتاجرِ (٨)» بيتفتحُ على فراغٍ: الرسمُ اتعملَ والوعاءُ مقفولٌ.
 *
 * والحلُّ تضييقُ النطاقِ لا شيلُ الحمايةِ: المشكلةُ الأصليّةُ إنَّ **كلاسَ
 * PX** بيغلبُ `hidden`، فالقاعدةُ بتتقيّدْ بكلاساتِ PX. وأيُّ وعاءٍ تانٍ في
 * الموقعِ رجعَ يتصرّفْ زيَّ ما HTML بيقولُ.
 */
[class^="px"][hidden],
[class*=" px"][hidden] { display: none !important; }

/**
 * ═══════════════════════════════════════════════════════════════════════════
 * **والتلاتةُ دول كانوا محميّينَ بالقاعدةِ العامّةِ — وتضييقُها كشفَهم.**
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * المالك (٢٠٢٦-٠٨-٣١): *«رقمُ المحلِّ يظهرُ بعدَ التسجيلِ — مش بتقفلْ حتى
 * لما بدوسُ عليه X»*.
 *
 * وده **ارتدادٌ منّي في نفسِ اليومِ**: تضييقُ `[hidden]` صلَّحَ ستَّ صفحاتٍ
 * وكسرَ تلاتَ نوافذَ. `.cgate { display: grid }` كلاسٌ بيغلبُ قاعدةَ
 * المتصفّحِ `[hidden]{display:none}`، وكانَ محميًّا بالـ`!important`
 * العامِّ — فلمّا ضيّقتُه، `hidden = true` بطّلت تخفي.
 *
 * والجردُ طلّعَ **تلاتةً لا واحدًا**:
 *
 *   `cgate`        بوّابةُ التواصلِ — X مابيقفلش (اللي المالكُ شافَه)
 *   `tsx-veh`      بطاقةُ عربيّةِ الزائرِ في بحثِ المقاسِ
 *   `tyreon-toast` رسالةُ التنبيهِ — كانت هتفضلْ ظاهرةً للأبدِ
 *
 * والدرسُ إنَّ تضييقَ قاعدةٍ عامّةٍ **تغييرٌ في سلوكِ كلِّ اللي كانَ تحتَها**،
 * لا إصلاحٌ موضعيٌّ. والحارسُ اللي كتبتُه ساعتَها كانَ بيفحصُ الاتّجاهَ
 * التانِيَ وحدَه (وعاءٌ مقفولٌ بيتفتحُ بـ`style.display`) — فما مسكش ده.
 * اتوسّعَ. [[redesign-inverts-the-ratio]]
 */
.cgate[hidden],
.tsx-veh[hidden],
.tyreon-toast[hidden] { display: none; }

.px-lbl, .px-h2, .px-lede { letter-spacing: 0; }

/**
 * ═══════════════════════════════════════════════════════════════════
 * **صنفانِ لا واحدٌ — والخلطُ بينَهما كسرَ محاذاةَ الأرقامِ.**
 * ═══════════════════════════════════════════════════════════════════
 *
 * المالك على لقطةٍ لشريطِ الأرقامِ: *«ده منطقيٌّ بالنسبةِ لك يعني؟»*.
 *
 * وكانَ محقًّا: **٢٬٣٥١** ملزّقةً شمالَ خانتِها و«متجرًا ومركزَ خدمةٍ»
 * يمينَها — الرقمُ واسمُه مش فوقَ بعضٍ.
 *
 * والسببُ إنّي حطّيتُ `.lat` على الاتنينِ. و`.lat` فيها
 * `direction: ltr` — دي بتقلبُ **محاذاةَ الكتلةِ** كمان، فالرقمُ راحَ
 * لشمالِ خانتِه والاسمُ العربيُّ فضلَ يمينَها.
 *
 * ─────────────────────────────────────────────────────────────────
 * **والفرقُ بينَ الحالتينِ حقيقيٌّ:**
 *
 *   `.lat` — لنصٍّ لاتينيٍّ **فيه ترتيبٌ داخليٌّ**: `205/55R16`. من غيرِ
 *            قلبِ الاتّجاهِ الشرطةُ المائلةُ بتتنقلْ لآخرِ السطرِ.
 *
 *   `.num` — لرقمٍ **جوّا كتلةٍ عربيّةٍ**: `2,351`. الأرقامُ والفاصلةُ
 *            بتترسمْ صحًّا في RTL أصلًا، فالعزلُ كافٍ — وقلبُ الاتّجاهِ
 *            **بيكسرُ المحاذاةَ بلا مقابلٍ**.
 */
.lat {
  direction: ltr;
  unicode-bidi: isolate;
  font-feature-settings: "tnum" 1;
}
.num {
  unicode-bidi: isolate;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/**
 * ═══════════════════════════════════════════════════════════════════
 * **مقياسٌ واحدٌ — والفراغُ الأفقيُّ هو اللي كانَ بيكسرُ التنسيقَ.**
 * ═══════════════════════════════════════════════════════════════════
 *
 * المالك على لقطةٍ: *«والكلامُ مش متنسّقٌ مع بعضِه»*.
 *
 * والسببُ مقيسٌ: `justify-content: space-between` على رأسِ القسمِ بيدفعُ
 * رابطَ «كلُّ المتاجرِ» لطرفِ الشاشةِ التاني، فبينَه وبينَ العنوانِ **فراغٌ
 * بعرضِ نصِّ الصفحةِ**. ونفسُ الحاجةِ في صفِّ المتجرِ (`1fr auto`): الاسمُ
 * يمينًا والأزرارُ في آخرِ الشمالِ.
 *
 * والفراغُ ده **مش مساحةً بيضاءَ مقصودةً** — دي عينٌ بتقطعُ مسافةً بلا
 * سببٍ بينَ حاجتينِ متعلّقتينِ ببعضٍ.
 *
 * فالرأسُ بقى **صفًّا متلاصقًا**: نصٌّ محدودُ العرضِ، والرابطُ بعدَه
 * على طولٍ. ولمّا الشاشةُ تضيقْ بينزلْ تحتَه بدل ما يتلفَّ.
 */
.px-hd {
  display: flex; align-items: baseline;
  gap: var(--sp-3) var(--sp-5); flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.px-hd > :first-child { flex: 1 1 26rem; min-width: 0; max-width: 62ch; }
/* **الرابطُ في آخرِ السطرِ — الشمالُ في العربيِّ.** طلبُ المالكِ ٢٠٢٦-٠٩-١٣:
   *«كلُّ الخدماتِ ← … تكونُ في الشمالِ مش في النصِّ»*. العمودُ الأوّلُ سقفُه
   `62ch` فمابيملاش السطرَ، والرابطُ كانَ بيلزقْ جنبَه في النصِّ. `auto`
   بيزقُّه لآخرِ الصفِّ بلا ما يلمسَ الالتفافَ تحتَه على الموبايلِ. */
.px-hd > :first-child + * { flex: 0 0 auto; margin-inline-start: auto; }
.px-lbl {
  display: block; font-size: var(--fs-xs); font-weight: 600;
  color: var(--c-mut); margin-bottom: var(--sp-2);
}
.px-lbl--on { color: var(--px-on-3); }
.px-h2 { font-size: var(--px-h2); font-weight: 700; line-height: 1.22; margin: 0; }
.px-hd--on .px-h2 { color: #fff; }
.px-lede {
  margin: var(--sp-3) 0 0; font-size: var(--px-lead); font-weight: 400;
  color: var(--c-txt2); max-width: 56ch; line-height: 1.75;
}
.px-hd--on .px-lede { color: var(--px-on-2); }
.px-more {
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-pri); white-space: nowrap;
}
.px-hd--on .px-more { color: var(--px-sig-t); }


/* ═══════════════════════════════════════════════════════════════════
   ١ · اللافتةُ
   ═══════════════════════════════════════════════════════════════════ */

.pxh {
  position: relative; overflow: hidden;
  padding: var(--sp-8) 0 var(--sp-7);
  background: var(--pxh-bg);
  color: var(--pxh-txt);
  border-bottom: 1px solid var(--pxh-line);
}

/* وهجٌ واحدٌ من مصدرٍ واحدٍ — خافتٌ في الفاتحِ وأقوى في الغامقِ */
.pxh-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 520px at 88% -20%, var(--pxh-glow), transparent 62%);
}
.pxh-in { position: relative; z-index: 1; }

.pxh-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
.pxh--split .pxh-cols { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
@media (max-width: 900px) { .pxh--split .pxh-cols { grid-template-columns: 1fr; } }

/**
 * **وصورةُ الهويّةِ بتفتحُ نفسَ العمودِ في نمطِ الأرقامِ.**
 *
 * المالك: *«الشخصيّةُ هتكونُ بالحجمِ الفاضي اللي جنبَ البحثِ»*. والرئيسيّةُ
 * نمطُها `data`، وهو عمودٌ واحدٌ — فالصورةُ كانت هتنزلُ تحتَ الكلامِ بدل ما
 * تقفَ جنبَه.
 *
 * و`pxh--art` بتتحطُّ لمّا يكونَ فيه صورةٌ فعلًا، فالنمطُ **مابيتغيّرش**:
 * شريطُ الأرقامِ باقٍ، والعمودُ بيتفتحُ وبس. وبيتقفلُ على الموبايلِ عندَ
 * نفسِ الحدِّ — صورةٌ جنبَ نصٍّ في شاشةٍ ضيّقةٍ بتخنقُ الاتنينِ.
 */
.pxh--art .pxh-cols { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
@media (max-width: 900px) { .pxh--art .pxh-cols { grid-template-columns: 1fr; } }

.pxh-say { max-width: 52ch; }

/**
 * **الكتفُ لافتةٌ — مش رابطًا. فمالوش لونُ الأزرقِ.**
 *
 * المالك: *«الأزرقُ مش بيكونُ واضحًا على الدارك»*. وقِسْتُ النسبةَ فطلعت
 * **٧٫٨١** (#6ea8fe على #0d111b) — يعني بتعدّي WCAG. فالعطلُ مش الرقمَ.
 *
 * العطلُ **معنى اللونِ**: الأزرقُ في الصفحةِ دي لغةُ الحاجةِ اللي بتتداسْ
 * (روابطُ · أزرارُ · تابات). ولمّا لافتةٌ ساكنةٌ تاخدُه، الزائرُ بيحاولْ
 * يدوسْ عليها، وبتتنافسْ مع العنوانِ اللي تحتَها على الانتباهِ.
 *
 * فبتاخدْ نصَّ السطحِ نفسِه (٩٫٢٠ في الدارك) — وبتكبرْ من ١٢ لـ١٤px:
 * العربيُّ بيتقرا أكبرَ من اللاتينيِّ بحوالي ٢٥٪، و١٢px كتفٌ رفيعٌ
 * بيبانَ باهتًا مهما كانت النسبةُ. [[a-fix-has-two-directions]]
 */
.pxh-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm); font-weight: 600; color: var(--pxh-txt2);
}
.pxh-rule { width: 28px; height: 1px; background: currentColor; opacity: .5; }

/**
 * **١٫٣ — والعربيُّ هو السببُ.**
 *
 * التشكيلُ والنزولُ بيحتاجوا فسحةً؛ ١٫١٢ خلّى السطورَ تتلامسْ في لقطةِ
 * المالكِ. و`text-wrap: balance` بيوزّعُ الكلماتِ على السطورِ بدل ما يسيبَ
 * كلمةً وحيدةً في آخرِ سطرٍ.
 */
.pxh-h1 {
  font-size: var(--px-mega);
  line-height: 1.3;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
.pxh-q { display: block; font-weight: 400; color: var(--pxh-txt2); }
.pxh-a { display: block; font-weight: 700; color: var(--pxh-txt); }

.pxh-lede {
  font-size: var(--px-lead); font-weight: 400; color: var(--pxh-txt2);
  margin: 0 0 var(--sp-5); line-height: 1.8;
}

/* ── البحثُ ── */
.pxh-find {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px 6px 6px var(--sp-4);
  border: 1px solid var(--pxh-line); border-radius: 999px;
  background: var(--c-sur, #fff);
  box-shadow: 0 2px 10px rgb(11 18 32 / .05);
  max-width: 520px;
}
.pxh-find:focus-within { border-color: var(--c-pri); box-shadow: 0 0 0 3px var(--c-pri-l, rgba(37,99,235,.14)); }
.pxh-find-ic { display: flex; color: var(--pxh-mut); flex: none; }
.pxh-find-ic svg { width: 18px; height: 18px; }
.pxh-find-in {
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  border: 0; background: none; outline: none;
  font: inherit; font-size: var(--fs-md); color: var(--c-txt);
}
.pxh-find-in::placeholder { color: var(--pxh-mut); }
.pxh-find-go {
  flex: none; min-height: 44px; padding: 0 var(--sp-5);
  border: 0; border-radius: 999px;
  background: var(--c-pri); color: #fff;
  font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.pxh-find-go:hover { background: var(--c-pri-d, #1d4ed8); }

/* ── الطريقانِ التانيانِ — تحتَ البحثِ لا بدلًا منه ── */
.pxh-acts {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.pxh-or { font-size: var(--fs-sm); color: var(--pxh-mut); }
.pxh-way {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 40px; padding: 0 var(--sp-4);
  border: 1px solid var(--pxh-line); border-radius: 999px;
  background: var(--c-sur, #fff); color: var(--c-txt);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  transition: border-color var(--dur, .14s), color var(--dur, .14s);
}
.pxh-way:hover { border-color: var(--c-pri); color: var(--c-pri); }
.pxh-way svg { width: 17px; height: 17px; }

/* خانةُ السياقِ — محجوزةٌ فمافيش زحلقةٌ لمّا السكربتُ يكتبْ فيها */
.pxh-ctx { margin: var(--sp-4) 0 0; min-height: 22px; font-size: var(--fs-sm); color: var(--pxh-mut); }
.pxh-ctx a { color: var(--c-pri); font-weight: 600; }

/**
 * **الأرقامُ شريطٌ يقفلُ اللافتةَ — كانت عمودًا طايفًا على الجنبِ.**
 *
 * في لقطةِ المالكِ العمودُ كانَ على الشمالِ بلا رابطٍ بصريٍّ بالنصِّ،
 * والفراغُ فوقَه نصُّ الشاشةِ.
 */
/**
 * **والشريطُ متوسّطٌ — والرقمُ فوقَ اسمِه بالظبطِ.**
 *
 * المالك: *«المفروضُ شريطُ الثقةِ يكونَ في نصِّ الصفحةِ»*.
 *
 * كانَ أربعةَ أعمدةٍ متساويةٍ ومحتوى كلِّ خانةٍ متحاذٍ لبدايتِها — فالأرقامُ
 * بتبانُ متفرّقةً على العرضِ بلا رابطٍ بينَها وبينَ بعضِها.
 *
 * بقى **صفًّا متوسّطًا بفواصلَ**: الخاناتُ بحجمِ محتواها، والمسافةُ بينَها
 * ثابتةٌ، والرقمُ واسمُه متوسّطانِ فوقَ بعضٍ. فالشريطُ بيقرا **وحدةً واحدةً**
 * لا أربعَ جزرٍ.
 */
.pxh-facts {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: flex-start;
  gap: var(--sp-5) var(--sp-8);
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--pxh-line);
  text-align: center;
}
@media (max-width: 720px) { .pxh-facts { gap: var(--sp-5) var(--sp-6); } .pxh-fact { min-width: 6rem; } }
.pxh-fact { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 7rem; }
.pxh-fact-n { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; color: var(--pxh-txt); line-height: 1.2; }
.pxh-fact-l { font-size: var(--fs-xs); color: var(--pxh-mut); }

/* فاصلٌ رفيعٌ بينَ الخاناتِ — بيخلّي الأربعةَ يقروا صفًّا واحدًا. */
.pxh-fact + .pxh-fact { border-inline-start: 1px solid var(--pxh-line); padding-inline-start: var(--sp-8); }
@media (max-width: 720px) { .pxh-fact + .pxh-fact { border: 0; padding-inline-start: 0; } }

/* فتحةُ الصورةِ — نسبةٌ محجوزةٌ فرفعُ صورةٍ مايزحلقش */
/**
 * **مافيش لوحٌ وراءَ الصورةِ.** (بلاغُ المالكِ ٢٠٢٦-٠٩-١٠)
 *
 * *«ليه في لونٌ وراءَ الشخصيّةِ؟ أنا ضايفُ الشخصيّةَ بدونِ خلفيّةٍ»* — وكانَ
 * عندَه حقٌّ، واللونُ **مش من الصورةِ**: ده أرضيّةُ الصندوقِ وبروازُه.
 *
 * اتعملوا لصورةٍ **فوتوغرافيّةٍ** — أرضيّةٌ بتملا المكانَ لحدِّ ما الملفُّ
 * يحمّلْ، وإطارٌ يفصلْها عن أرضيّةِ القسمِ. وصورةٌ بخلفيّةٍ **شفّافةٍ** بتخلّي
 * الاتنانِ يبانوا من ورَاها، فالشخصيّةُ بتقعدْ على لوحٍ ماحدّش طلبَه.
 *
 * **والفراغُ كانَ واسعًا لسببٍ تانٍ**: الصندوقُ ٤:٣ عرضيٌّ والشخصيّةُ طوليّةٌ،
 * و`contain` بيحافظْ على نسبتِها — فبتاخدْ الطولَ وتسيبْ جنبينِ فاضيينِ.
 * ومن غيرِ لونٍ، الفاضي بقى **أرضيّةَ القسمِ** لا لوحًا.
 *
 * **و`aspect-ratio` بيفضلْ**: هو اللي بيحجزُ المكانَ فالتخطيطُ مايقفزش وقتَ
 * التحميلِ. المزعجُ كانَ اللونَ لا الحجزَ. [[anchor-needs-a-box]]
 */
.pxh-media { border-radius: var(--rad-xl); overflow: hidden; aspect-ratio: 4 / 3; }
/**
 * **`cover` يقصُّ — وهذا نصُّ ما اشتكى منه المالكُ.**
 *
 * بلاغُ ٢٠٢٦-٠٨-٠١: *«يكونوا واضحينَ، مافيش حاجةٌ بتقطعْهم»*.
 *
 * و`cover` **معرَّفٌ** بأنّه يقصُّ: يكبّرُ الصورةَ حتّى تملأَ
 * الصندوقَ ويرمي الزيادةَ. فبانرٌ ١٦:٩ في صندوقٍ ٤:٣ يُقتطعُ أعلاهُ
 * وأسفلُه — والماسكوتُ وصفُّ المنتجاتِ يذهبانِ.
 *
 * و`contain` يُظهرُ الصورةَ **كاملةً**، والصندوقُ يبقى حاجزًا
 * مكانَه بـ`aspect-ratio` فلا يقفزُ التخطيطُ.
 * [[a-fix-has-two-directions]]
 */
.pxh-media img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* أزرارٌ مشتركةٌ (بتتستعملْ في السيّارةِ والدعوةِ) */
.pxh-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-6);
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-size: var(--fs-md); font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: transform var(--dur, .14s) var(--ease, ease), background var(--dur, .14s);
}
.pxh-btn:hover { transform: translateY(-2px); }
.pxh-btn--go { background: var(--c-pri); color: #fff; }
.pxh-btn--gh { background: transparent; color: inherit; border-color: currentColor; opacity: .85; }
.pxh-btn--gh:hover { opacity: 1; }
.pxh-btn--wt { background: #fff; color: var(--px-ink); }
.pxh-btn--sm { min-height: 40px; padding: 0 var(--sp-5); font-size: var(--fs-sm); }
@media (prefers-reduced-motion: reduce) {
  .pxh-btn, .pxh-btn:hover { transform: none; transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════
   ٢ · السيّارةُ
   ═══════════════════════════════════════════════════════════════════ */
.pxv {
  position: relative; overflow: hidden;
  padding: var(--sp-9) 0;
  background: var(--px-ink-2); color: var(--px-on-1);
}
.pxv-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 320px at 12% 0%, rgba(37, 99, 235, .26), transparent 62%);
}
.pxv-in { position: relative; z-index: 1; }
.pxv-cols { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-8); align-items: start; }
@media (max-width: 940px) { .pxv-cols { grid-template-columns: 1fr; gap: var(--sp-7); } }

.pxv-h2 { font-size: var(--px-h2); font-weight: 700; color: #fff; line-height: 1.25; margin: 0; }
.pxv-lede {
  margin: var(--sp-4) 0 0; font-size: var(--px-lead); font-weight: 400;
  color: var(--px-on-2); line-height: 1.75;
}
.pxv-meta { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.pxv-meta li { font-size: var(--fs-sm); color: var(--px-on-3); }
.pxv-meta b { color: #fff; font-weight: 600; }

.pxv-list { list-style: none; padding: 0; margin: 0; }
.pxv-step {
  display: grid; grid-template-columns: 34px 1fr; gap: var(--sp-4);
  padding: var(--sp-5) 0; border-top: 1px solid var(--px-line-d);
}
.pxv-step:first-child { border-top: 0; padding-top: 0; }
.pxv-step-n { font-size: var(--fs-xs); font-weight: 700; color: var(--px-sig-t); padding-top: 4px; }
.pxv-step-t { display: block; font-size: var(--px-h3); font-weight: 600; color: #fff; }
.pxv-step-d { display: block; font-size: var(--fs-sm); color: var(--px-on-3); margin-top: 2px; }

.pxv-makes { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-6); }
.pxv-make {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 7px 14px 7px 8px; border-radius: 999px;
  border: 1px solid var(--px-line-d); background: rgba(255, 255, 255, .05);
  font-size: var(--fs-sm); color: var(--px-on-1); text-decoration: none;
  transition: border-color var(--dur, .14s);
}
.pxv-make:hover { border-color: #fff; }
.pxv-make-lg {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--px-ink);
  /* ١١px كانتْ تحتَ أرضيّةِ السلّمِ (`--fs-xs` = ١٢px) — والأرضيّةُ دي حدُّ
     قابليّةِ القراءةِ في سطحٍ عامٍّ لا تفضيلُ شكلٍ. والدايرةُ ٢٦px بتسعُ
     حرفينِ بـ١٢px من غيرِ ما تتقصَّ. */
  font-size: var(--fs-xs); font-weight: 700; overflow: hidden;
}
.pxv-make-lg img { width: 20px; height: 20px; object-fit: contain; }
.pxv-make small { color: var(--px-on-3); font-size: var(--fs-xs); }
.pxv-make--all { border-style: dashed; color: var(--px-sig-t); font-weight: 600; }

.pxv-known { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 720px) { .pxv-known { grid-template-columns: 1fr; } }
.pxv-card {
  padding: var(--sp-6); border-radius: var(--rad-lg);
  border: 1px solid var(--px-line-d); background: rgba(255, 255, 255, .05);
}
.pxv-card--sig {
  background: linear-gradient(160deg, var(--c-pri), #0f2f8f);
  border-color: rgba(255, 255, 255, .18);
}
/* ٢٥px كانتْ درجةً بمستعملٍ واحدٍ و٢٦px عندَها ١٩ — نفسُ الدمجِ: بكسلٌ واحدٌ
   بيشيلُ درجةً من السلّمِ، والتراتبُ اللي مضبوطٌ بالعينِ مايتلمسش. */
.pxv-car { font-size: 26px; font-weight: 600; color: #fff; margin: var(--sp-2) 0 2px; }
.pxv-caryr { font-size: var(--fs-sm); color: var(--px-on-2); margin-bottom: var(--sp-4); }
.pxv-size { font-size: 36px; font-weight: 700; color: #fff; line-height: 1.15; margin: var(--sp-2) 0; }
.pxv-fit { font-size: var(--fs-sm); color: #d7e2fb; }
.pxv-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); }


/* ═══════════════════════════════════════════════════════════════════
   ٣ · المتاجرُ
   ═══════════════════════════════════════════════════════════════════ */
.pxs { padding: var(--sp-9) 0; background: var(--c-sur2, #f6f7f9); }
.pxs-split { display: grid; grid-template-columns: 1fr 1.08fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 940px) { .pxs-split { grid-template-columns: 1fr; } .pxs-map { order: 2; } }

.pxs-map {
  position: sticky; top: 62px;
  border-radius: var(--rad-lg); overflow: hidden;
  /**
   * **أرضيّةُ الخريطةِ كانت ثابتةً — عيبٌ حقيقيٌّ.**
   *
   * `#e4e9f1` رماديٌّ فاتحٌ. في الوضعِ الليليِّ الصندوقُ كانَ بيفضلْ
   * **لوحًا أبيضَ** وسطَ صفحةٍ غامقةٍ لحدِّ ما بلاطاتُ الخريطةِ تحمّلْ —
   * ووميضٌ أبيضُ في الليلِ بيوجعُ فعلًا.
   */
  background: var(--pxd-bg);
  box-shadow: 0 1px 2px rgba(11, 18, 32, .06), 0 12px 32px rgba(11, 18, 32, .07);
}
@media (max-width: 940px) { .pxs-map { position: static; } }
/* الارتفاعُ محجوزٌ — الخريطةُ لمّا تحمّلْ ماتزحلقش القائمةَ */
.pxs-map-box { height: 460px; }
@media (max-width: 640px) { .pxs-map-box { height: 300px; } }
.pxs-map-ft {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-sur); border-top: 1px solid var(--c-bor);
  font-size: var(--fs-xs); color: var(--c-mut);
}

.pxs-rows { display: flex; flex-direction: column; }
/**
 * **الصفُّ: الأزرارُ بتقفُ عندَ حدِّ النصِّ لا عندَ حدِّ الشاشةِ.**
 *
 * `1fr auto` بيمدُّ العمودَ الأوّلَ فبيبقى بينَ «أولاد توفيق» وزرِّ
 * الاتّصالِ فراغٌ بعرضِ نصِّ الصفحةِ. و`auto 1fr` بيخلّي النصَّ ياخدْ
 * قدَّه والأزرارَ بعدَه، والباقي فراغٌ في آخرِ الصفِّ — وده **صحٌّ**:
 * الفراغُ في الطرفِ مش بينَ حاجتينِ متعلّقتينِ.
 */
/**
 * **والأزرارُ لازمٌ تقعُ على عمودٍ واحدٍ في كلِّ الصفوفِ.**
 *
 * المالك على لقطةٍ: *«الأيقونُ والكلامُ كلُّ حاجةٍ فيهم تكونُ على نفسِ
 * الصفِّ»*.
 *
 * صلّحتُ الفراغَ الكبيرَ بـ`auto auto 1fr`، فالعمودُ الأوّلُ بقى بحجمِ
 * محتواهُ — يعني **كلُّ صفٍّ بعرضٍ مختلفٍ**، والأزرارُ بتقعُ عندَ حدِّ اسمِه
 * هو. «أولاد توفيق» اسمٌ قصيرٌ فأزرارُه جهةً، و«فؤاد ريحان للإطارات»
 * أطولُ فأزرارُه جهةً تانيةً. حلَّيتُ فراغًا وعملتُ تعرّجًا.
 *
 * الصحُّ **عمودٌ ثابتٌ للأزرارِ**: النصُّ بياخدْ الباقيَ ويتقصَّ لو طالَ،
 * والأزرارُ بتقفُ على خطٍّ واحدٍ في الصفوفِ كلِّها. والفراغُ اللي كانَ
 * بيقطعُ اتحلَّ بحدِّ عرضٍ على النصِّ لا بتقليصِ عمودِه.
 */
.pxs-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 104px;
  gap: var(--sp-4); align-items: center;
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--c-bor);
  transition: background var(--dur, .14s);
}
.pxs-row:first-child { border-top: 1px solid var(--c-bor); }
.pxs-row:hover, .pxs-row.is-on { background: var(--c-sur); }
.pxs-row.is-on { box-shadow: inset 3px 0 0 var(--c-amb-d, #d97706); }
.pxs-row-main { text-decoration: none; color: inherit; display: block; max-width: 52ch; }
.pxs-name { font-size: var(--px-h3); font-weight: 600; margin: 0; color: var(--c-txt); }
.pxs-meta {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin: 3px 0 0; font-size: var(--fs-xs); color: var(--c-mut);
}
.pxs-dot { opacity: .4; }
.pxs-since { color: var(--c-amb-d, #d97706); font-weight: 600; }
.pxs-acts { display: flex; gap: var(--sp-2); justify-content: flex-end; }
/**
 * **٤٤px — الحدُّ اللي إصبعٌ بيصيبُه بثقةٍ.**
 *
 * كانَ ٤٢. الفرقُ بكسلانِ بس، لكنَّ ٤٤ هو الرقمُ اللي إرشاداتُ اللمسِ
 * متّفقةٌ عليه — وزرُّ «اتّصالٌ» على تليفونٍ هو **أهمُّ فعلٍ في الصفِّ**.
 */
.pxs-act {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--c-bor); background: var(--c-sur);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-txt2); transition: border-color var(--dur, .14s), transform var(--dur, .14s);
}
.pxs-act:hover { border-color: var(--c-pri); transform: translateY(-2px); }
.pxs-act svg { width: 18px; height: 18px; }
@media (max-width: 520px) {
  .pxs-row { grid-template-columns: 1fr; }
  .pxs-acts { justify-content: flex-start; }
  .pxs-acts { margin-top: var(--sp-3); }
}


/* ═══════════════════════════════════════════════════════════════════
   ٤ · المقاسُ  —  حشوةٌ أقلُّ: القسمُ أداةٌ لا بيانٌ
   ═══════════════════════════════════════════════════════════════════ */
.pxz { padding: var(--sp-8) 0; }
/**
 * **`auto-fill` كانَ بيسيبُ خاناتٍ فاضيةً — وأرضيّةُ الشبكةِ بتبانَ فيها.**
 *
 * في لقطةِ المالكِ فيه **مستطيلٌ رماديٌّ** في آخرِ صفِّ المقاساتِ: دي
 * خاناتٌ `auto-fill` حجزتْها وسابتْها فاضيةً، وأرضيّةُ الفجوةِ (`background`
 * على الشبكةِ) ظهرت من خلالِها.
 *
 * `auto-fit` بيمدُّ الخاناتِ الموجودةَ على العرضِ كلِّه فمافيش فاضٍ.
 */
.pxz-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px; background: var(--c-bor);
  border: 1px solid var(--c-bor); border-radius: var(--rad-lg); overflow: hidden;
}
.pxz-cell {
  padding: var(--sp-5); background: var(--c-sur);
  text-decoration: none; color: inherit;
  transition: background var(--dur, .14s);
}
.pxz-cell:hover { background: var(--c-pri-l, #eff4ff); }
.pxz-v { display: block; font-size: 21px; font-weight: 600; color: var(--c-txt); }
.pxz-n { display: block; font-size: var(--fs-xs); color: var(--c-mut); margin-top: 2px; }
.pxz-cell--all {
  display: flex; align-items: center;
  color: var(--c-pri); font-weight: 600; font-size: var(--fs-sm);
}


/* ═══════════════════════════════════════════════════════════════════
   ٥ · المنتجاتُ
   ═══════════════════════════════════════════════════════════════════ */
.pxp { padding: var(--sp-8) 0; }
.pxp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-3); }
.pxp-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5); text-align: center; text-decoration: none; color: inherit;
  border: 1px solid var(--c-bor); border-radius: var(--rad-lg); background: var(--c-sur);
}
.pxp-card:hover { border-color: var(--c-pri); }
.pxp-ph {
  width: 72px; height: 72px; border-radius: var(--rad-lg);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-sur2, #f6f7f9); color: var(--c-mut);
}
.pxp-nm { font-size: var(--fs-sm); font-weight: 600; }

/* الحالةُ الرفيعةُ — بابانِ وراهم بياناتٌ فعلًا */
.pxp-ways { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 720px) { .pxp-ways { grid-template-columns: 1fr; } }
.pxp-way {
  display: block; padding: var(--sp-6);
  border: 1px solid var(--c-bor); border-radius: var(--rad-lg);
  background: var(--c-sur); text-decoration: none; color: inherit;
  transition: border-color var(--dur, .14s), transform var(--dur, .14s);
}
.pxp-way:hover { border-color: var(--c-pri); transform: translateY(-2px); }
.pxp-way-ic { display: block; color: var(--c-pri); margin-bottom: var(--sp-3); line-height: 0; }
.pxp-way-ic svg { width: 26px; height: 26px; }
.pxp-way-t { display: block; font-size: var(--px-h3); font-weight: 600; }
.pxp-way-d { display: block; font-size: var(--fs-sm); color: var(--c-mut); margin-top: var(--sp-1); }


/* ═══════════════════════════════════════════════════════════════════
   ٦ · التغطيةُ  —  حشوةٌ أكبرُ: القسمُ بيانٌ
   ═══════════════════════════════════════════════════════════════════ */
.pxt { padding: var(--sp-9) 0; background: var(--px-ink-2); color: var(--px-on-1); }
/* الفجوةُ كانت ٩٦px — أوسعَ من عمودٍ. ٤٨ بتفصلُ من غيرِ ما تقطعَ. */
.pxt-cols { display: grid; grid-template-columns: 6fr 5fr; gap: var(--sp-7); align-items: start; }
@media (max-width: 940px) { .pxt-cols { grid-template-columns: 1fr; gap: var(--sp-7); } }

.pxt-figs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.pxt-n { font-size: 46px; font-weight: 600; color: #fff; line-height: 1.05; }
.pxt-l { font-size: var(--fs-sm); color: var(--px-on-3); margin-top: var(--sp-1); }

.pxt-bars { display: flex; flex-direction: column; gap: var(--sp-4); }
.pxt-bar { display: grid; grid-template-columns: 92px 1fr 52px; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); }
.pxt-bar-t { color: var(--px-on-2); }
.pxt-bar-w { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.pxt-bar-f { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #60a5fa, var(--c-pri)); }
.pxt-bar-n { text-align: start; color: var(--px-on-3); font-size: var(--fs-xs); }

.pxt-fine {
  margin: var(--sp-7) 0 0; padding-top: var(--sp-5);
  border-top: 1px solid var(--px-line-d);
  font-size: var(--fs-xs); color: var(--px-on-3); max-width: 68ch; line-height: 1.8;
}


/* ═══════════════════════════════════════════════════════════════════
   ٧ · الماركاتُ
   ═══════════════════════════════════════════════════════════════════ */
.pxb { padding: var(--sp-8) 0; }
.pxb-rail { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.pxb-item {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);
  border: 1px solid var(--c-bor); border-radius: 999px;
  background: var(--c-sur); text-decoration: none; color: inherit;
  transition: border-color var(--dur, .14s), transform var(--dur, .14s);
}
.pxb-item:hover { border-color: var(--c-pri); transform: translateY(-2px); }
.pxb-lg {
  width: 40px; height: 40px; border-radius: 50%; flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--c-bor);
}
.pxb-lg img { width: 28px; height: 28px; object-fit: contain; }
.pxb-ini { font-size: 15px; font-weight: 800; color: var(--c-txt2); }
.pxb-nm { font-weight: 600; font-size: var(--fs-sm); }
.pxb-n { font-size: var(--fs-xs); color: var(--c-mut); }


/* ═══════════════════════════════════════════════════════════════════
   ٨ · التحريريُّ
   ═══════════════════════════════════════════════════════════════════ */
.pxe { padding: var(--sp-8) 0; }
.pxe-cols { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-8); align-items: center; }
.pxe--image_end .pxe-cols { grid-template-columns: 7fr 5fr; }
.pxe--image_end .pxe-media { order: 2; }
.pxe--wide .pxe-cols { grid-template-columns: 1fr; }
.pxe--wide .pxe-say { max-width: 68ch; }
@media (max-width: 880px) {
  .pxe-cols, .pxe--image_end .pxe-cols { grid-template-columns: 1fr; gap: var(--sp-5); }
  .pxe--image_end .pxe-media { order: 0; }
}
.pxe-media { margin: 0; }
.pxe-media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--rad-lg); border: 1px solid var(--c-bor);
}
.pxe-cap { font-size: var(--fs-xs); color: var(--c-mut); margin-top: var(--sp-2); }
.pxe-p { margin: var(--sp-4) 0 0; color: var(--c-txt2); line-height: 1.85; }
.pxe-cta { margin-top: var(--sp-5); }


/* ═══════════════════════════════════════════════════════════════════
   ٩ · الدعوةُ
   ═══════════════════════════════════════════════════════════════════ */
.pxc { position: relative; overflow: hidden; padding: var(--sp-9) 0; }
.pxc--soft  { background: var(--c-pri-l, #eff4ff); }
.pxc--ink   { background: var(--px-ink); color: var(--px-on-1); }
.pxc--image { color: #fff; }
.pxc-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pxc-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 12, 22, .9), rgba(7, 12, 22, .55)); }
.pxc-in { position: relative; z-index: 1; }

/* غيرُ متناظرٍ — دعوةٌ متوسّطةٌ بتقرا كإعلانٍ */
.pxc-cols { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-7); align-items: center; }
@media (max-width: 800px) { .pxc-cols { grid-template-columns: 1fr; gap: var(--sp-5); } }
.pxc-h2 { font-size: var(--px-h2); font-weight: 700; line-height: 1.25; margin: 0; }
.pxc--ink .pxc-h2, .pxc--image .pxc-h2 { color: #fff; }
.pxc-lede { margin: var(--sp-3) 0 0; font-size: var(--px-lead); font-weight: 400; color: var(--c-txt2); line-height: 1.75; }
.pxc--ink .pxc-lede, .pxc--image .pxc-lede { color: var(--px-on-2); }
.pxc-act { display: flex; }


/* ═══════════════════════════════════════════════════════════════════
   الوضعانِ — في كلِّ قسمٍ لا في اللافتةِ وحدَها
   ═══════════════════════════════════════════════════════════════════

   المالك: *«لازمْ نميّزَ بينَ الدارك واللايت في كلِّ حاجةٍ»*.

   صلّحتُ اللافتةَ وسِبتُ قسمَي «سيّارتك» و«التغطية» على أرضيّةِ حبرٍ ثابتةٍ
   — وقلتُ إنَّها «لهجةٌ مقصودةٌ». وهو محقٌّ إنّي غلطتُ: في الوضعِ النهاريِّ
   الصفحةُ بقت **شرايطَ سوداءَ بينَ شرايطَ بيضاءَ**، وده مش إيقاعًا — ده
   صفحتانِ مركّبتانِ فوقَ بعضٍ.

   فالقسمانِ بقوا **يقروا الرموزَ زيَّ أيِّ قسمٍ**: في النهاريِّ سطحٌ مرتفعٌ
   (`--c-sur2`) بحدٍّ، وفي الليليِّ حبرٌ. نفسُ التمييزِ البصريِّ، بلوحتينِ.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* السطحُ المرتفعُ — بديلُ «أرضيّةِ الحبرِ» في الوضعِ النهاريِّ */
  --pxd-bg:    var(--c-sur2, #f1f5f9);
  --pxd-txt:   var(--c-txt, #0b1220);
  --pxd-txt2:  var(--c-txt2, #475569);
  --pxd-mut:   var(--c-mut, #64748b);
  --pxd-line:  var(--c-bor, #e2e8f0);
  --pxd-card:  var(--c-sur, #fff);
  --pxd-glow:  rgba(37, 99, 235, .07);
  --pxd-bar:   rgba(37, 99, 235, .12);
}
html[data-tyreon-theme="dark"] {
  --pxd-bg:    var(--px-ink-2);
  --pxd-txt:   #fff;
  --pxd-txt2:  var(--px-on-2);
  --pxd-mut:   var(--px-on-3);
  --pxd-line:  var(--px-line-d);
  --pxd-card:  rgba(255, 255, 255, .05);
  --pxd-glow:  rgba(37, 99, 235, .26);
  --pxd-bar:   rgba(255, 255, 255, .09);
}

/* ── قسمُ السيّارةِ ── */
.pxv { background: var(--pxd-bg); color: var(--pxd-txt); border-block: 1px solid var(--pxd-line); }
.pxv-glow { background: radial-gradient(760px 320px at 12% 0%, var(--pxd-glow), transparent 62%); }
.pxv-h2 { color: var(--pxd-txt); }
.pxv-lede { color: var(--pxd-txt2); }
.pxv-meta li { color: var(--pxd-mut); }
.pxv-meta b { color: var(--pxd-txt); }
.pxv-step { border-top-color: var(--pxd-line); }
.pxv-step-t { color: var(--pxd-txt); }
.pxv-step-d { color: var(--pxd-mut); }
.pxv-step-n { color: var(--c-pri); }
.pxv-make { border-color: var(--pxd-line); background: var(--pxd-card); color: var(--pxd-txt); }
.pxv-make:hover { border-color: var(--c-pri); }
.pxv-make-lg { background: #fff; border: 1px solid var(--pxd-line); color: var(--px-ink); }
.pxv-make small { color: var(--pxd-mut); }
.pxv-make--all { color: var(--c-pri); }
.pxv-card { border-color: var(--pxd-line); background: var(--pxd-card); }
.pxv-car { color: var(--pxd-txt); }
.pxv-caryr { color: var(--pxd-txt2); }
.px-lbl--on { color: var(--pxd-mut); }
/* بطاقةُ المقاسِ زرقاءُ في الوضعينِ — هي **النتيجةُ**، ولونُها معناها. */
.pxv-card--sig { background: linear-gradient(160deg, var(--c-pri), #123089); border-color: transparent; }
.pxv-card--sig .px-lbl, .pxv-card--sig .px-lbl--on { color: #c7d8fb; }

/* ── قسمُ التغطيةِ ── */
.pxt { background: var(--pxd-bg); color: var(--pxd-txt); border-block: 1px solid var(--pxd-line); }
.px-hd--on .px-h2 { color: var(--pxd-txt); }
.px-hd--on .px-lede { color: var(--pxd-txt2); }
.px-hd--on .px-more { color: var(--c-pri); }
.pxt-n { color: var(--pxd-txt); }
.pxt-l { color: var(--pxd-mut); }
.pxt-bar-t { color: var(--pxd-txt2); }
.pxt-bar-w { background: var(--pxd-bar); }
.pxt-bar-n { color: var(--pxd-mut); }
.pxt-fine { border-top-color: var(--pxd-line); color: var(--pxd-mut); }

/* ── الدعوةُ: النمطُ «الحبريُّ» بيتبعُ الوضعَ كمان ── */
.pxc--ink { background: var(--pxd-bg); color: var(--pxd-txt); }
.pxc--ink .pxc-h2 { color: var(--pxd-txt); }
.pxc--ink .pxc-lede { color: var(--pxd-txt2); }


/* ═══════════════════════════════════════════════════════════════════
   ودّاةُ البحثِ — بالسيّارةِ أو بالمقاسِ
   ═══════════════════════════════════════════════════════════════════

   المالك: *«والبحثُ بتاعُنا… البحثُ بالمقاسِ والسيّارةِ»*. والودّاةُ
   **بطاقةٌ مرتفعةٌ** لأنّها أهمُّ عنصرٍ في الشاشةِ الأولى — الظلُّ والحدُّ
   بيرفعوها عن الأرضيّةِ فالعينُ تلاقيها من غيرِ ما تدوّرْ.
   ═══════════════════════════════════════════════════════════════════ */

.pxq {
  max-width: 720px; margin-top: var(--sp-5);
  border: 1px solid var(--pxh-line); border-radius: var(--rad-lg);
  background: var(--c-sur, #fff);
  box-shadow: 0 1px 2px rgb(11 18 32 / .05), 0 14px 36px rgb(11 18 32 / .09);
  overflow: hidden;
}

/* تبويبتانِ بعنوانينِ عربيّينِ طويلينِ على ٣٢٠px بيطلعوا برّه الإطارِ
   من غيرِ لفٍّ — والزائرُ مابيشوفش التانيةَ خالصٌ. */
.pxq-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--pxh-line); }
.pxq-tab {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2); min-height: 52px; padding: 0 var(--sp-4);
  border: 0; border-bottom: 2px solid transparent; background: none;
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-mut); cursor: pointer;
  transition: color var(--dur, .14s), border-color var(--dur, .14s), background var(--dur, .14s);
}
.pxq-tab:hover { color: var(--c-txt); }
.pxq-tab.is-on { color: var(--c-pri); border-bottom-color: var(--c-pri); background: var(--c-pri-l, #eff4ff); }
.pxq-tab svg { width: 18px; height: 18px; }

.pxq-body { padding: var(--sp-5); }
.pxq-pane { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4); align-items: end; }
@media (max-width: 720px) { .pxq-pane { grid-template-columns: 1fr; } }

.pxq-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-3); }
.pxq-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pxq-f-l { font-size: var(--fs-xs); font-weight: 600; color: var(--c-mut); }

.pxq-sel {
  width: 100%; min-height: 46px; padding: 0 var(--sp-3);
  border: 1px solid var(--pxh-line); border-radius: var(--rad);
  background: var(--c-bg, #fff); color: var(--c-txt);
  font: inherit; cursor: pointer;
  /**
   * **١٦px — و`--fs-sm` (١٤) كانَ بيخلّي iOS يزوّمُ.**
   *
   * سفاري بيكبّرُ الصفحةَ لوحدَه لمّا حقلُ إدخالٍ خطُّه أصغرَ من ١٦px،
   * وبتفضلْ مزوّمةً بعدَ ما الزائرُ يخلصْ. والودّاةُ كلُّها قوائمُ، فده
   * بيمسُّ **أهمَّ عنصرٍ في الشاشةِ الأولى**.
   */
  font-size: 16px;
}
.pxq-sel:focus { outline: none; border-color: var(--c-pri); box-shadow: 0 0 0 3px var(--c-pri-l, rgba(37,99,235,.14)); }
.pxq-sel:disabled { opacity: .55; cursor: not-allowed; }

/* معاينةُ المقاسِ — بتتلوّنْ لمّا التلاتةُ يكتملوا */
.pxq-f--eg { justify-content: flex-end; }
.pxq-eg {
  display: flex; align-items: center; min-height: 46px; padding: 0 var(--sp-3);
  border: 1px dashed var(--pxh-line); border-radius: var(--rad);
  font-size: var(--fs-md); font-weight: 700; color: var(--c-mut);
}
.pxq-eg.is-set { border-style: solid; border-color: var(--c-pri); color: var(--c-pri); }

.pxq-go {
  min-height: 46px; padding: 0 var(--sp-6);
  border: 0; border-radius: var(--rad);
  background: var(--c-pri); color: #fff;
  font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.pxq-go:hover { background: var(--c-pri-d, #1d4ed8); }
@media (max-width: 720px) { .pxq-go { width: 100%; min-height: 50px; } }

/* الطريقانِ التانيانِ — سطرٌ خافتٌ لا زرّانِ منافسانِ */
.pxh-alt { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--pxh-mut); }
.pxh-alt a { color: var(--c-pri); font-weight: 600; border-bottom: 1px solid transparent; }
.pxh-alt a:hover { border-bottom-color: currentColor; }
.pxh-alt-sep { margin: 0 var(--sp-2); opacity: .5; }

/**
 * **اللافتةُ بتبدأُ من نفسِ الحدِّ اللي كلُّ قسمٍ بيبدأُ منه.**
 *
 * `.tyreon-container` بيحدّدُ الحافّةَ، والنصُّ جوّاهُ بياخدْ **مقياسَ
 * قراءةٍ** (عرضًا مريحًا للعينِ) — بس الحافّةَ نفسَها واحدةٌ. لو حطّينا
 * `max-width` بالبكسلِ، الحافّةُ بتتغيّرْ معَ عرضِ الشاشةِ فالأقسامُ
 * تبانُ متزحزحةً عن بعضٍ.
 */
.pxh-say--wide { max-width: 62ch; }
.pxq { max-width: 62ch; }

/* ═══════════════════════════════════════════════════════════════════
   الخدماتُ والتصنيفاتُ — القسمانِ اللي المالكُ بلّغَ إنّهم ناقصانِ
   ═══════════════════════════════════════════════════════════════════

   *«ولا في تصنيفاتٌ ولا الخدماتُ اللي بيقدّمْها الموقعُ لصاحبِ السيّارةِ»*.

   والاتنانِ **مالهمش صورٌ عندَنا** — فالفتحةُ محجوزةُ النسبةِ وفيها أيقونةٌ.
   ورفعُ صورةٍ بعدينِ بيملا **نفسَ المربّعِ** فمافيش زحلقةٌ.
   ═══════════════════════════════════════════════════════════════════ */

.pxsv, .pxct { padding: var(--sp-8) 0; }

/* ── الخدماتُ ── */
.pxsv-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.pxsv-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--c-bor); border-radius: var(--rad-lg);
  background: var(--c-sur); color: inherit; text-decoration: none;
  transition: border-color var(--dur, .14s), transform var(--dur, .14s);
}
.pxsv-card:hover { border-color: var(--c-pri); transform: translateY(-2px); }
.pxsv-ic { color: var(--c-pri); line-height: 0; }
.pxsv-ic svg { width: 24px; height: 24px; }
.pxsv-nm { font-size: var(--px-h3); font-weight: 600; }
.pxsv-n  { font-size: var(--fs-xs); color: var(--c-mut); }

/* **الشكلُ المختارُ بيترسمْ** — القالبُ ماكانش بيقراه، فـ«شريط» كانَ شبكةً
   (٢٠٢٦-٠٩-١٣). الشريطُ صفٌّ أفقيٌّ بيتسحبُ، وبطاقاتُ الصورِ بتاخدُ فتحةَ
   التصنيفاتِ المربّعةَ نفسَها (`.pxct-slot`) — فتحةٌ واحدةٌ للقسمينِ. */
.pxsv--rail .pxsv-grid {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-2);
}
.pxsv--rail .pxsv-card { flex: 0 0 200px; scroll-snap-align: start; }
.pxsv--cards .pxsv-grid { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.pxsv--cards .pxsv-card { padding: var(--sp-4); gap: var(--sp-3); }
.pxsv--cards .pxct-slot { color: var(--c-pri); }

/* ── التصنيفاتُ ── */
.pxct-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: var(--sp-3);
}
.pxct-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--c-bor); border-radius: var(--rad-lg);
  background: var(--c-sur); color: inherit; text-decoration: none;
  transition: border-color var(--dur, .14s), transform var(--dur, .14s);
}
.pxct-card:hover { border-color: var(--c-pri); transform: translateY(-2px); }

/**
 * **فتحةُ الصورةِ — محجوزةُ النسبةِ.**
 *
 * المالك: *«جهّزْ IMAGE SLOTS بشكلٍ احترافيٍّ… عندما أرفعُ صورةً لا يتغيّرُ
 * layout»*. فالمربّعُ ٤:٣ ثابتٌ، والأيقونةُ في نصِّه لحدِّ ما الصورةُ تيجي.
 */
.pxct-slot {
  display: flex; align-items: center; justify-content: center;
  /* **مربّعٌ لا ٤:٣** — طلبُ المالكِ ٢٠٢٦-٠٩-١٢: «مقاسُ الصورةِ في التصنيفِ
     المفروضْ يكونَ مربّعًا وواضحًا عشانْ الصورةُ تكونَ ظاهرةً». وصورُ الأقسامِ
     مربّعةٌ، فنسبةُ ٤:٣ كانتْ بتقصُّ من فوقٍ وتحتٍ. */
  aspect-ratio: 1 / 1; width: 100%;
  border-radius: var(--rad); overflow: hidden;
  background: var(--c-sur2, #f1f5f9);
  color: var(--c-mut);
}
/* الأيقونةُ في النصِّ، والصورةُ فوقَها بتغطّي المربّعَ — `display:flex`
   لوحدَها كانتْ هتحطَّهم **جنبَ بعضٍ** لا فوقَ بعضٍ. والارتدادُ في القالبِ:
   `onerror` بيشيلُ الصورةَ المكسورةَ فتبانُ الأيقونةُ (٢٠٢٦-٠٩-١٢). */
.pxct-slot { position: relative; }
.pxct-slot svg { width: 34px; height: 34px; }
.pxct-slot img { width: 100%; height: 100%; object-fit: cover; }
.pxct-slot .pxct-img { position: absolute; inset: 0; }
.pxct-more { display: flex; justify-content: center; margin-top: 22px; }
.pxct-nm { font-size: var(--fs-md); font-weight: 600; }
.pxct-n  { font-size: var(--fs-xs); color: var(--c-mut); margin-top: -6px; }


/* ═══════════════════════════════════════════════════════════════════
   صورةٌ بنسختينِ — فاتحةٍ وغامقةٍ
   ═══════════════════════════════════════════════════════════════════

   الوضعُ عندَنا بيتحدَّدْ بـ`html[data-tyreon-theme]` لا بـ
   `prefers-color-scheme`، و`<picture>` مابتعرفش تختارُ بسمةٍ على الجذرِ.
   فالاتنانِ بيترسموا والكسوةُ بتخفي واحدةً — **نفسُ اللي الثيمُ بيعملُه**
   في `hero-art-img--light/dark`، فمافيش نمطٌ تانٍ اتخترعَ.

   والغامقةُ اختياريّةٌ: لو مافيش، الفاتحةُ بتترسمُ في الوضعينِ.
   ═══════════════════════════════════════════════════════════════════ */

.px-img--dark { display: none; }
html[data-tyreon-theme="dark"] .px-img--light { display: none; }
html[data-tyreon-theme="dark"] .px-img--dark  { display: block; }

/* والخلفيّةُ بتاخدْ نفسَ التموضعِ في الحالتينِ. */
.pxc-bg.px-img--light, .pxc-bg.px-img--dark { position: absolute; inset: 0; }
.pxc-bg img { width: 100%; height: 100%; object-fit: cover; }


/* ═══════════════════════════════════════════════════════════════════
   مُرشِّحُ الدليلِ
   ═══════════════════════════════════════════════════════════════════ */

.pxdf {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding: 6px 6px 6px var(--sp-4);
  border: 1px solid var(--c-bor); border-radius: 999px;
  background: var(--c-sur);
  max-width: 420px;
}
.pxdf:focus-within { border-color: var(--c-pri); box-shadow: 0 0 0 3px var(--c-pri-l, rgba(37,99,235,.14)); }
.pxdf-in {
  flex: 1 1 auto; min-width: 0; min-height: 40px;
  border: 0; background: none; outline: none;
  font: inherit; font-size: 16px; color: var(--c-txt);
}
/* ١٦px — تحتَه سفاري بيزوّمُ الصفحةَ عندَ التركيزِ وبتفضلْ مزوّمةً. */
.pxdf-in::placeholder { color: var(--c-mut); }
.pxdf-n {
  flex: none; padding-inline-end: var(--sp-3);
  font-size: var(--fs-xs); color: var(--c-mut);
  direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums;
}
.pxdf-none { margin: var(--sp-5) 0 0; font-size: var(--fs-sm); color: var(--c-mut); }

/* ═══════════════════════════════════════════════════════════════════════════
   المناطقُ — «فينِ بالظبطِ؟»
   ═══════════════════════════════════════════════════════════════════════════

   الخليّةُ **رقمُها أولًا**. الزائرُ بيمسحُ الشبكةَ بعينِه عايزٌ يعرفَ «فينِ
   الأكترُ؟» — فالرقمُ هو اللي بيتقرا وهو بيلفُّ، والاسمُ بيتقرا لمّا يقفَ.

   والخليّةُ **رابطٌ كاملٌ** لا نصٌّ جنبَه رابطٌ: مساحةُ اللمسِ هي البطاقةُ
   كلُّها، وده بيدّي هدفًا أكبرَ من ٤٤ بكسل بفارقٍ كبيرٍ على الموبايلِ.
   ═════════════════════════════════════════════════════════════════════════ */

.pxzn { padding: var(--sp-9) 0; }

.pxzn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.pxzn-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-4);
  min-height: 96px;
  border: 1px solid var(--pxd-line);
  border-radius: 14px;
  background: var(--pxd-card);
  color: inherit;
  text-decoration: none;
  transition: border-color .16s, transform .16s;
}

.pxzn-cell:hover,
.pxzn-cell:focus-visible {
  border-color: var(--c-pri);
  transform: translateY(-2px);
}

.pxzn-n {
  font-size: var(--px-h3);
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-pri);
}

.pxzn-nm { font-weight: 700; line-height: 1.45; }

.pxzn-gov {
  font-size: var(--fs-xs);
  color: var(--pxd-mut);
}

/* ملاحظةُ الإحداثيِّ الافتراضيِّ — بتقالْ لا بتتخبّى. [[placeholder-coordinates]] */
.pxzn-cell--soft { border-style: dashed; }

.pxzn-note {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--pxd-mut);
}

.pxzn-fine {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--pxd-mut);
}

@media (max-width: 480px) {
  .pxzn-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   الهيرو المضغوطُ — صفحةٌ داخليّةٌ لا بابٌ
   ═══════════════════════════════════════════════════════════════════════════

   المالك: *«هو ليه ده موجودٌ في كلِّ الصفحاتِ؟»* — وكانَ محقًّا: عشرُ صفحاتٍ
   بنفسِ الهيرو بالحرفِ.

   والفرقُ مش زخرفةً: الزائرُ على الرئيسيّةِ **لسه ما اختارش**، فالبابُ
   بيتفسّحُ ويسألُ. والزائرُ في `/brands/` **اختارَ خلاصٌ**؛ عنوانٌ بيقولْ
   له إنّه في المكانِ الصحيحِ، وبعدَه المحتوى على طولٍ.

   فالعنوانُ بينزلْ من `--px-mega` (لحدِّ ٥٦px) لمقاسٍ يقرا كعنوانِ صفحةٍ،
   والحشوُ بيقلَّ — عشانْ البطاقاتُ تبانَ من غيرِ تمريرٍ.
   ═════════════════════════════════════════════════════════════════════════ */

.pxh--plain { padding: var(--sp-6) 0 var(--sp-5); }

.pxh--plain .pxh-h1 {
  font-size: clamp(24px, 3vw, 38px);
  margin-bottom: var(--sp-3);
}

.pxh--plain .pxh-lede { max-width: 60ch; }

.pxh--plain .pxh-eyebrow { margin-bottom: var(--sp-3); }

@media (max-width: 600px) {
  .pxh--plain { padding: var(--sp-5) 0 var(--sp-4); }
}

/* بانيُ المقاسِ في دليلِ المقاساتِ — نفسُ ودّاةِ الهيرو، بترشّحُ في مكانِها. */
.szq { max-width: 100%; margin: 0 0 var(--sp-6); }

.szq-note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-mut);
}

/* ═══════════════════════════════════════════════════════════════════════════
   التواصلُ — قنواتٌ حقيقيّةٌ
   ═══════════════════════════════════════════════════════════════════════════

   القنواتُ المسجَّلةُ سطورٌ (قليلةٌ ومباشرةٌ)، والطرقُ الشغّالةُ بطاقاتٌ.
   واللي مش متملّي **مابيرسمش صندوقًا فاضيًا** — الفرقُ في القالبِ لا هنا.
   ═════════════════════════════════════════════════════════════════════════ */

.pxk { padding: var(--sp-8) 0; }

.pxk-lines {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
  max-width: 560px;
}

.pxk-line {
  display: grid;
  grid-template-columns: 22px auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--pxd-line);
  border-radius: 12px;
  background: var(--pxd-card);
}

.pxk-ic { display: block; color: var(--c-pri); line-height: 0; }
.pxk-ic svg { width: 20px; height: 20px; }

.pxk-l { font-size: var(--fs-xs); color: var(--pxd-mut); }
.pxk-v { font-weight: 600; color: var(--pxd-txt); text-decoration: none; }
a.pxk-v:hover { text-decoration: underline; }

.pxk-routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.pxk-route {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--pxd-line);
  border-radius: 14px;
  background: var(--pxd-card);
}

.pxk-h3 { margin: 0; font-size: var(--px-h3); font-weight: 700; color: var(--pxd-txt); }
.pxk-p  { margin: 0; font-size: var(--fs-sm); line-height: 1.8; color: var(--pxd-txt2); }

.pxk-go {
  margin-top: auto;
  padding-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-pri);
  text-decoration: none;
}
.pxk-go:hover { text-decoration: underline; }

.pxk-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--pxd-line);
}

.pxk-net {
  padding: 6px 12px;
  border: 1px solid var(--pxd-line);
  border-radius: 999px;
  font-size: var(--fs-sm);
  color: var(--pxd-txt);
  text-decoration: none;
}
.pxk-net:hover { border-color: var(--c-pri); }

/* ═══════════════════════════════════════════════════════════════════════════
   ودّاةُ البحثِ — صفٌّ واحدٌ على الديسكتوب
   ═══════════════════════════════════════════════════════════════════════════

   المالك: *«ليه بياناتُ البحثِ مش ع نفسِ السطرِ؟»*.

   `auto-fit` بيحسبُ عددَ الأعمدةِ من العرضِ المتاحِ، والودّاةُ كانت محدودةً
   بـ`62ch` — مقياسُ **قراءةٍ**، وهي مش نصًّا. فالعمودُ التالتُ ماكانش بيلاقي
   مكانَه ويقعُ لسطرٍ تانٍ معَ الزرِّ.

   والحلُّ **صفٌّ صريحٌ**: تلاتةُ حقولٍ متساويةٍ، والزرُّ جنبَهم. `auto-fit`
   بيفضلْ شغّالًا تحتَ ٧٢٠px فالموبايلُ بيلفُّ زيَّ ما هو.
   ═════════════════════════════════════════════════════════════════════════ */



/* «لسه مانعرفش المقاسَ» — سطرٌ بيقولُ الحالةَ بدل صندوقٍ فيه شرطةٌ.
   والبطاقةُ دي زرقاءُ في الوضعينِ عن قصدٍ (هي **النتيجةُ**)، فالحبرُ
   الفاتحُ جوّاها مقصودٌ — والقاعدةُ بتتسمّى باسمِها عشانْ الحارسُ يفهمَها. */
.pxv-card--sig .pxv-nosize {
  margin: var(--sp-2) 0 var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: #dbe6fb;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ودّاةُ البحثِ — صفٌّ واحدٌ **وفيه نَفَسٌ**
   ═══════════════════════════════════════════════════════════════════════════

   أوّلُ محاولةٍ خلّتْهم صفًّا واحدًا بضغطِهم في ٧٦٠px، والمالك: *«ليه مضيّقٌ
   الدنيا كده؟ الخاناتُ صغيرةٌ أوي وضايقٌ أوي مع بعضِه»*.

   والغلطُ إنّي حلّيتُ «سطرٌ واحدٌ» على حسابِ «مقروءٌ». الاتنانِ مطلوبانِ:
   الودّاةُ **لوحةُ تحكّمٍ** — تاخدْ عرضَها، وحقولُها تبقى واسعةً، والمسافةُ
   بينَهم تفصلْ لا تلزقْ.
   ═════════════════════════════════════════════════════════════════════════ */

@media (min-width: 721px) {
  /**
   * **الودّاةُ كانت جوّا عمودٍ عرضُه ٦٢ch — فالتوسيعُ ماوصلش.**
   *
   * وسّعتُ  لـ٩٤٠ والأبُ  لسه ٥٢ch، فالتلاتُ خاناتٍ
   * (٣×١٥٠) طلعوا أعرضَ من المساحةِ **والزرُّ ركبَ على خانةِ السنةِ**.
   *  على الأبِ بيسقفُ الابنَ مهما وسّعتَه.
   *
   * فالعمودُ نفسُه بيتوسّعُ في شكلِ  وحدَه، والعنوانُ والوصفُ
   * بياخدوا مقياسَ القراءةِ لوحدَهم — الودّاةُ لوحةٌ، والنصُّ نصٌّ.
   */
  .pxh--data .pxh-say { max-width: 940px; }
  .pxh--data .pxh-h1,
  .pxh--data .pxh-lede { max-width: 62ch; }
  .pxq { max-width: 940px; }

  .pxq-body { padding: var(--sp-6); }

  .pxq-pane { gap: var(--sp-5); align-items: end; }

  /* حدٌّ أدنى حقيقيٌّ للخانةِ — `minmax(0,1fr)` كانَ بيسمحْ لها تنكمشْ لصفرٍ. */
  .pxq-fields {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: var(--sp-4);
  }

  /* لوحةُ المقاسِ فيها معاينةٌ رابعةٌ — بتاخدْ عرضَها لوحدَها. */
  .pxq-fields:has(.pxq-f--eg) {
    grid-template-columns: repeat(3, minmax(130px, 1fr)) auto;
  }

  .pxq-sel { min-height: 52px; }
  .pxq-go  { min-height: 52px; padding: 0 var(--sp-7); font-size: var(--fs-md); }
}

/* واللافتةُ فوقَ الخانةِ تُقرأُ — ١٢px عربيٌّ رفيعٌ بيتقرا همسًا. */
.pxq-f-l { font-size: var(--fs-sm); }

/* ═══════════════════════════════════════════════════════════════════════════
   شريطُ الأرقامِ — يفرشُ الحاويةَ، ولافتاتُه تُقرأُ
   ═══════════════════════════════════════════════════════════════════════════

   المالك: *«والمكانُ فاضٍ والكلامُ مكتوبٌ في خطٍّ صغيرٍ»*.

   كانَ `flex` بـ`justify-content: center`، فالأربعةُ بيتجمّعوا في النصِّ
   وبيسيبوا الجانبينِ فاضيينِ. والشبكةُ المتساويةُ بتفرشْ العرضَ كلَّه، فكلُّ
   رقمٍ بياخدْ ربعَ الشريطِ — وده اللي بيخلّيهم يقروا **جدولَ حقائقَ** لا
   مجموعةً في النصِّ.
   ═════════════════════════════════════════════════════════════════════════ */

.pxh-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  justify-content: stretch;
  width: 100%;
  gap: var(--sp-5) 0;
}

.pxh-fact { min-width: 0; padding-inline: var(--sp-4); }

.pxh-fact-n { font-size: clamp(26px, 3vw, 36px); }

/* ١٢px على عربيٍّ خافتٍ = همسٌ. ١٤ بيخلّيه يُقرأُ. */
.pxh-fact-l { font-size: var(--fs-sm); line-height: 1.6; }

@media (max-width: 720px) {
  .pxh-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* بابانِ بوزنٍ مختلفٍ: التبديلُ فعلٌ أساسيٌّ فيبرزُ، والإلغاءُ نادرٌ فيهدأُ. */
.pxv-doors { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }

.pxv-clear {
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--px-on-2, #a7b6cf);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pxv-clear:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   بوّابةُ التواصلِ — شرحٌ لا حائطٌ
   ═══════════════════════════════════════════════════════════════════════════

   الفرقُ بينَ حاجزٍ يُغضِبُ وحاجزٍ يُقنِعُ **سطرُ السببِ**. فاللوحةُ تقولُ
   أوّلًا إنَّ الرقمَ موجودٌ، ثمَّ ما يكسبُه الحسابُ — وكلُّه مبنيٌّ فعلًا.
   ═════════════════════════════════════════════════════════════════════════ */

.cgate { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: var(--sp-4); }
.cgate-veil { position: absolute; inset: 0; background: rgb(11 18 32 / .62); }

.cgate-box {
  position: relative;
  width: min(460px, 100%);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  border-radius: 18px;
  background: var(--c-sur, #fff);
  color: var(--c-txt);
  box-shadow: 0 24px 60px rgb(11 18 32 / .28);
}

.cgate-h { margin: 0 0 var(--sp-3); font-size: var(--px-h3); font-weight: 800; line-height: 1.5; }
.cgate-p { margin: 0 0 var(--sp-5); font-size: var(--fs-sm); line-height: 1.9; color: var(--c-txt2); }

.cgate-list { margin: 0 0 var(--sp-6); padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.cgate-list li {
  position: relative;
  padding-inline-start: var(--sp-6);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.cgate-list li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: var(--c-pri);
  font-weight: 800;
}

.cgate-acts { display: grid; gap: var(--sp-3); }

.cgate-go {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; border-radius: var(--rad);
  background: var(--c-pri); color: #fff;
  font-weight: 700; text-decoration: none;
}
.cgate-alt {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-txt2); text-decoration: none;
}
.cgate-alt:hover { color: var(--c-txt); text-decoration: underline; }

.cgate-x {
  position: absolute; inset-block-start: 8px; inset-inline-end: 8px;
  width: 44px; height: 44px;
  border: 0; background: none;
  font-size: 26px; line-height: 1; color: var(--c-mut); cursor: pointer;
}

/* الرقمُ المحجوبُ لاتينيٌّ الاتّجاهِ زيَّ أيِّ رقمٍ. */
.cgate-masked { direction: ltr; unicode-bidi: isolate; letter-spacing: .04em; }

/* ═══════════════════════════════════════════════════════════════════════════
   شريطُ الموقعِ — طلبُ إذنٍ لا لافتةٌ
   ═══════════════════════════════════════════════════════════════════════════

   المالك: *«الشريطُ ده كبيرٌ أوي، محتاجٌ يكونَ أصغرَ»*.

   وهو محقٌّ: الشريطُ **سؤالٌ عابرٌ** («أسمحُ بالموقعِ؟») يظهرُ مرّةً ويختفي —
   وحجمُه كانَ حجمَ قسمٍ. فالسؤالُ العابرُ يأخذُ ارتفاعَ سطرٍ لا ارتفاعَ لافتةٍ:
   حشوٌ أقلُّ، ونصٌّ أصغرُ، وأزرارٌ في حدِّ اللمسِ (٤٤px) لا أكبرَ.
   ═════════════════════════════════════════════════════════════════════════ */

#vctx.vctx {
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding: 7px 12px;
  border-radius: 12px;
  font-size: var(--fs-xs);
}

#vctx .vctx-ico { display: none; }

#vctx .vctx-say strong { font-size: var(--fs-sm); font-weight: 700; }

/* السطرُ الشارحُ يختفي على الضيّقِ — العنوانُ وحدَه يكفي للسؤالِ. */
@media (max-width: 720px) {
  #vctx .vctx-say span { display: none; }
}

#vctx .vctx-acts { margin-inline-start: auto; }

/* الصغرُ يأتي من الحشوِ والخطِّ — لا من هدفِ لمسٍ تحتَ ٤٤px.
   إصبعٌ لا تصيبُ زرًّا أسوأُ من شريطٍ كبيرٍ. */
#vctx .vctx-acts .tyreon-btn,
#vctx .vctx-skip {
  min-height: 44px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-xs);
}

/* ═══════════════════════════════════════════════════════════════════════════
   دعوةُ الحسابِ — لوحةٌ لا لافتةٌ
   ═══════════════════════════════════════════════════════════════════════════

   المالك: *«وفين في الصفحةِ الرئيسيّةِ اللي يحفّزُ ع التسجيلِ؟»*.

   ودعوةٌ بلا مقابلٍ معروضٍ إعلانٌ. فالعمودُ الأيمنُ **يقولُ الأربعةَ**، والزرُّ
   بجانبِها لا فوقَها: تقرأُ ما تكسبُه ثمَّ تضغطُ، لا العكسَ.
   ═════════════════════════════════════════════════════════════════════════ */

.pxa { padding: var(--sp-8) 0; }

.pxa-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
  padding: var(--sp-7);
  border: 1px solid var(--pxd-line);
  border-radius: 20px;
  background: var(--pxd-card);
}

@media (min-width: 900px) {
  .pxa-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
}

.pxa-say .px-h2 { color: var(--pxd-txt); }
.pxa-say .px-lede { color: var(--pxd-txt2); }

.pxa-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-5); }

.pxa-go {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--sp-7);
  border-radius: var(--rad);
  background: var(--c-pri); color: #fff;
  font-weight: 700; text-decoration: none;
}

.pxa-alt {
  min-height: 44px; display: inline-flex; align-items: center;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--pxd-txt2); text-decoration: underline; text-underline-offset: 3px;
}
.pxa-alt:hover { color: var(--pxd-txt); }

.pxa-list {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-5);
}

.pxa-item { display: grid; gap: 4px; }
.pxa-ic { display: block; color: var(--c-pri); line-height: 0; }
.pxa-ic svg { width: 24px; height: 24px; }
.pxa-t { font-size: var(--fs-md); font-weight: 700; color: var(--pxd-txt); }
.pxa-p { font-size: var(--fs-sm); line-height: 1.8; color: var(--pxd-txt2); }

.pxa-fine {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs);
  color: var(--pxd-mut);
}

/* ═══════════════════════════════════════════════════════════════════════════
   صفحتا الحسابِ — بطاقةٌ واحدةٌ بنصفينِ
   ═══════════════════════════════════════════════════════════════════════════

   المالك أرسلَ تصميمًا وقالَ إنَّ اللي عملتُه سيّئٌ — وكانَ محقًّا. أوّلُ نسخةٍ
   كانت **عمودَ نصٍّ** بجانبِ النموذجِ: صادقةً وباهتةً.

   والفرقُ ثلاثةٌ:

     ١· **بطاقةٌ واحدةٌ بنصفينِ** — لوحةٌ ملوّنةٌ ونموذجٌ على ورقٍ، يقرآنِ
        كشيءٍ واحدٍ لا كعمودٍ مُلصَقٍ.
     ٢· **الأيقونةُ في مربّعٍ** لا رمزًا عائمًا — تعطي للسطرِ وزنًا وتصنعُ
        إيقاعًا رأسيًّا يقودُ العينَ.
     ٣· **وصورةٌ في القاعِ** تقولُ ما هذا الموقعُ قبلَ أن تُقرأَ كلمةٌ.

   وعلى الضيّقِ: اللوحةُ تنكمشُ إلى عنوانِها وقائمتِها بلا شرحٍ، لأنَّ المهمّةَ
   هناكَ الكتابةُ لا القراءةُ.
   ═════════════════════════════════════════════════════════════════════════ */

.tyreon-auth-page,
.tyreon-auth-wrap {
  min-height: 78vh;
  display: grid;
  place-items: center;
  padding: var(--sp-6) var(--sp-4);
  background:
    radial-gradient(1200px 620px at 15% 10%, rgb(37 99 235 / .10), transparent 60%),
    radial-gradient(900px 520px at 85% 90%, rgb(37 99 235 / .08), transparent 60%),
    var(--c-bg, #f6f8fc);
}

.auth-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 1020px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--c-sur, #fff);
  box-shadow: 0 30px 80px rgb(11 18 32 / .16);
}

@media (min-width: 900px) {
  /* اللوحةُ ثابتةٌ والنموذجُ يأخذُ ما بقيَ — النموذجُ هو المهمّةُ. */
  .auth-split { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
}

/* ── اللوحةُ ── */
.awo {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-8) var(--sp-7) 0;
  color: #fff;
  /* **تدرّجٌ بلونِ العلامةِ لا بلونٍ شبهِها.**
     كانَ `#1e4fd8 → #1536a8 → #0f2a86` — تلاتةُ أزرقَ مكتوبينَ بإيدٍ، أوّلُهم
     أقربُ للعلامةِ (`#1B4FD8`) وبيفرقُ عنها بدرجةٍ. فتغييرُ لونِ العلامةِ من
     سطرِها الواحدِ في `style.css` ماكانش بيوصلْ للبانر ده. والاحتياطيُّ فاضلٌ
     شبكةَ أمانٍ زيَّ ما ADR-027 بتقولُ: الرمزُ بيكسبُ والهيكسُ بيلحقُ. */
  background: linear-gradient(155deg,
    var(--c-pri, #1B4FD8) 0%,
    var(--c-pri-d, #1640B0) 55%,
    var(--c-ink, #0F1E3C) 100%);
  overflow: hidden;
}

.awo-brand { display: grid; justify-items: center; gap: 6px; margin-bottom: var(--sp-7); }

.awo-mark {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  color: #1536a8;
  line-height: 0;
}
.awo-mark svg { width: 30px; height: 30px; }

.awo-name { font-size: 26px; font-weight: 800; letter-spacing: .01em; }
.awo-kick { font-size: var(--fs-sm); color: rgb(255 255 255 / .8); }

.awo-h {
  margin: 0 0 var(--sp-7);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  line-height: 1.8;
  text-align: center;
}
.awo-h-em { color: #9ec2ff; }

.awo-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-5); }

.awo-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }

.awo-ic {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .16);
  line-height: 0;
}
.awo-ic svg { width: 22px; height: 22px; }

.awo-say { display: grid; gap: 3px; }
.awo-t { font-size: var(--fs-md); font-weight: 700; }
.awo-p { font-size: var(--fs-sm); line-height: 1.8; color: rgb(255 255 255 / .78); }

.awo-fine {
  margin: var(--sp-6) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: rgb(255 255 255 / .62);
}

/* فتحةُ الصورةِ — محجوزةُ الارتفاعِ فرفعُها لاحقًا لا يزحلقُ اللوحةَ. */
.awo-art {
  margin-top: auto;
  min-height: 120px;
  display: grid;
  align-items: end;
  justify-items: start;
}
.awo-art img { max-width: 78%; height: auto; display: block; }

@media (max-width: 899px) {
  .awo { padding-bottom: var(--sp-6); }
  .awo-p { display: none; }
  .awo-art { display: none; }
  .awo-h { margin-bottom: var(--sp-5); }
}

/* ── نصفُ النموذجِ ── */
.auth-split > .auth-card,
.auth-split > .tyreon-auth-card {
  margin: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--c-sur, #fff);
  padding: var(--sp-8) var(--sp-7);
}

/* الشعارُ الثاني داخلَ النموذجِ تكرارٌ — اللوحةُ تحملُه. */
@media (min-width: 900px) {
  .auth-split > .auth-card > .auth-logo,
  .auth-split > .tyreon-auth-card > .tyreon-auth-logo { display: none; }
}

/* أيقونةُ الحقلِ — تُميّزُ ستّةَ حقولٍ متشابهةٍ بلمحةٍ قبلَ قراءةِ اللافتةِ. */
.auth-field { position: relative; }

.auth-field .auth-fi {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: 50%;
  transform: translateY(4px);
  color: var(--c-mut);
  line-height: 0;
  pointer-events: none;
}
.auth-field .auth-fi svg { width: 18px; height: 18px; }

.auth-field:focus-within .auth-fi { color: var(--c-pri); }

/* الحشوُ يفسحُ للأيقونةِ — الاتّجاهُ منطقيٌّ فيصحُّ عربيًّا وإنجليزيًّا. */
.auth-field input,
.auth-field select { padding-inline-start: 40px; }

/* ═══════════════════════════════════════════════════════════════════════════
   خلفيّةُ صفحتَي الحسابِ — إن رُفِعت
   ═══════════════════════════════════════════════════════════════════════════

   الصورةُ **اختياريّةٌ**: بغيابِها يبقى التدرّجُ وحدَه، ومعها تُعتَّمُ حتّى لا
   تزاحمَ النموذجَ. الصفحةُ مهمّةٌ لا لوحةٌ.

   والملفُّ في `assets/img/auth-bg.jpg` — انظرْ `assets/img/README.md`.
   ═════════════════════════════════════════════════════════════════════════ */

.tyreon-auth-page.has-bg,
.tyreon-auth-wrap.has-bg {
  position: relative;
  isolation: isolate;
}

.tyreon-auth-page.has-bg::before,
.tyreon-auth-wrap.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--auth-bg);
  background-size: cover;
  background-position: center;
  /* التعتيمُ شرطٌ لا ذوقٌ: نموذجٌ فوقَ صورةٍ كاملةِ التبايُنِ لا يُقرأُ. */
  opacity: .16;
}

/* ═══════════════════════════════════════════════════════════════════════════
   **خلفيّةُ اللافتةِ — فتحةُ صورةٍ مستقلّةٌ** (طلبُ المالكِ ٢٠٢٦-٠٩-١٠)
   ═══════════════════════════════════════════════════════════════════════════
   *«الصورةُ الخلفيّةُ للهيرو مش موجودٌ مكانٌ لها»*. وكانتِ الفتحاتُ `desktop`
   و`mobile` وبسْ — والاتنانِ بيترسموا **جنبَ النصِّ**، فاللي رفعَ لافتةً كاملةً
   لقيها كارتًا صغيرًا في نصِّ الصفحةِ.

   **والاسمُ `--pxh-art-bg` لا `--pxh-bg`**: التانِ مستعملٌ خلاص للونِ خلفيّةِ
   القسمِ في `.pxh`، وحطُّ صورةٍ فيه كانَ هيدوسْ على اللونِ — فالقسمُ يفضلْ
   بلا أرضيّةٍ لو الصورةُ ما حمّلتش. اسمانِ مختلفانِ لمعنيينِ مختلفينِ.

   ── والحاجبُ مش زخرفةً ──────────────────────────────────────────────────
   النصُّ فوقَ صورةٍ فوتوغرافيّةٍ بيبقى غيرَ مقروءٍ حسبَ اللي تحتَه بالظبطِ:
   عنوانٌ غامقٌ فوقَ إطارٍ أسودَ بيختفي. فالحاجبُ بيتحطُّ **من لونِ أرضيّةِ
   القسمِ نفسِه** — يعني بيشتغلُ في الوضعينِ بلا قيمةٍ تانيةٍ مكتوبةٍ.
   ═══════════════════════════════════════════════════════════════════════════ */
.pxh--bg {
  background-image: var(--pxh-art-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* الحاجبُ فوقَ الصورةِ وتحتَ المحتوى (`.pxh-in` عندَها `z-index: 1`). */
.pxh--bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    to left,
    color-mix(in srgb, var(--pxh-bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--pxh-bg) 62%, transparent) 55%,
    color-mix(in srgb, var(--pxh-bg) 20%, transparent) 100%);
}
/* والاتّجاهُ بينقلبْ مع الصفحةِ — النصُّ على الشمالِ في الإنجليزيِّ. */
html[dir="ltr"] .pxh--bg::before { background: linear-gradient(
    to right,
    color-mix(in srgb, var(--pxh-bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--pxh-bg) 62%, transparent) 55%,
    color-mix(in srgb, var(--pxh-bg) 20%, transparent) 100%); }