/* ==========================================================================
   landing.css — الصفحة التعريفية (MAKEEN-LANDING-REDESIGN.md)

   طبقة مستقلة تماماً عن `app.css`: **لا يُنسخ منها صنف إلى النظام**، ولا
   تُحمَّل إلا في تخطيط `public`. الاتجاه داكن غالب بمتنفّسين ورقيّين.

   مساحة الأسماء `.lp-*` تعمل بجانب `.mk-*` القديمة حتى تكتمل المراحل، فلا
   ينكسر موقع حيّ بين مرحلة وأخرى، ولا تتعارض الأصناف في الـspecificity.
   ========================================================================== */

/* --------------------------------------------------------------------------
   الخط — مستضاف ذاتياً. Readex Pro خط متغيّر: ملف واحد لكل نطاق يغطي 600–700
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/assets/fonts/ReadexPro-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
                 U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/assets/fonts/ReadexPro-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF;
}

/* --------------------------------------------------------------------------
   1. التوكنات
   -------------------------------------------------------------------------- */
/* ── الاتجاه انقلب: فاتحٌ بلوحة مكين المعتمدة ───────────────────────────────
 *
 * كان داكناً بلوحةٍ خاصةٍ به (`#061A19` · `#1E8877` · رملي `#D9A84E`) من
 * `MAKEEN-LANDING-REDESIGN.md` — **ثلاثةُ ألوانٍ لا وجود لها في CLAUDE.md §8-أ**.
 * فكانت الصفحة التعريفية تعِد بهويةٍ ويفتح الزائر النظام على هويةٍ أخرى.
 *
 * الاتجاه الجديد من تصميم Stitch «Makeen School Platform Landing Page»، وتدقيقُ
 * ألوانه أعطى الحجّة: `#145C5E` · `#052a2b` · `#f4ebd0` · `#E4EAE9` · `#16211F` ·
 * `#1F8A5F` · `#218387` · `#EFE7DD` — **كلُّها من اللوحة المعتمدة**. فالتحوّل
 * ليس ذوقاً بل عودةٌ إلى القاعدة، والصفحة تصير أوّلَ ما يراه الزائر من الهوية
 * نفسِها التي سيعمل فيها.
 *
 * وثلاثةٌ شاردةٌ في التصميم طُوبقت على أقرب معتمَد:
 *   `#004345` ⇒ `#145C5E` · `#F8FAF9` ⇒ `#F3F6F5` · `#E4F1EE` ⇒ `#E4EAE9`
 *
 * **وأسماء التوكنات لم تتغيّر** (`--ink-900` ... `--fg-dim`): 320 استعمالاً لها
 * في 337 قاعدة، فقلبُ القيم وحدها يقلب الصفحة كلَّها متماسكةً — وتغييرُ الأسماء
 * يعني لمس كل قاعدة، وكلُّ لمسةٍ فرصةُ خطأ. الاسم صار وصفاً لدورٍ لا للونٍ:
 * `--ink-900` أعمقُ الأسطح لا أغمقُها.
 */
:root {
  /* الأسطح — من الأفتح إلى الأعمق */
  --ink-900: #F3F6F5;   /* خلفية الصفحة */
  --ink-800: #FFFFFF;   /* الأقسام المتبادلة والبطاقات */
  --ink-700: #FFFFFF;   /* أسطح البطاقات داخل الأقسام */
  --line:     #E4EAE9;
  --line-str: #D6DEDC;

  /* السطح الداكن — بقي دوره: شريطُ نداءٍ واحدٌ وترويسةُ الجوال والتذييل */
  --ink-deep: #052a2b;
  --on-deep:  #f4ebd0;

  /* التفاعل */
  --lp-primary: #145C5E;      /* الروابط والحدود والأيقونات */
  --lp-primary-h: #0F4A4C;
  --lp-link: #218387;         /* الروابط النصّية — أفتحُ للقراءة على الأبيض */
  --lp-cta: #145C5E;
  --lp-cta-h: #0F4A4C;
  --sand: #218387;            /* لم تعد لمسةً ذهبيةً — العلامةُ العلوية بلون الروابط */

  /* الورقي — الخطابات والصناديق المميَّزة */
  --paper: #EFE7DD;
  --paper-2: #E7DDD0;
  --ink-on-paper: #16211F;

  /* النص — سلّم مكين الثلاثي */
  --fg: #16211F;
  --fg-muted: #5A6664;
  --fg-dim: #8A9391;

  /* الوحدات الست — للأيقونات والرقاقات فقط. من ألوان الحالة المعتمدة
     وما قاربها، بتباينٍ يصلح على الأبيض لا على الحبر */
  --u-attend: #1F8A5F;
  --u-late:   #BC8100;
  --u-excuse: #3D7DBF;
  --u-behave: #CE4A3E;
  --u-table:  #145C5E;
  --u-guide:  #218387;

  /* المسافات — سلّم مغلق */
  --s4: 4px;   --s8: 8px;   --s12: 12px; --s16: 16px; --s24: 24px;
  --s32: 32px; --s48: 48px; --s64: 64px; --s96: 96px; --s128: 128px;

  /* المقاس — clamp بدل نقاط توقّف يدوية */
  --t-h1:   clamp(38px, 5.2vw, 64px);
  --t-h2:   clamp(28px, 3.4vw, 40px);
  --t-h3:   clamp(19px, 1.8vw, 22px);
  --t-lead: clamp(17px, 1.4vw, 18px);
  --t-body: clamp(15px, 1.2vw, 16px);
  --t-xs:   clamp(12px, 1vw, 13px);

  --r-card: 16px;
  --r-field: 12px;
  --r-chip: 999px;

  --wrap: 1200px;
  --lp-ease: cubic-bezier(.16, 1, .3, 1);

  /* والظلّ يُرى على الفاتح — فالعمقُ ظلٌّ لا حافةٌ مضيئة. والحافة المضيئة
     على أبيضَ لا تُرى أصلاً، فكانت تُرسم ولا أثر لها */
  --lp-lift: 0 18px 40px -22px rgba(5, 42, 43, .28),
             0 2px 6px -2px rgba(5, 42, 43, .08);
}

/* --------------------------------------------------------------------------
   2. الأساس
   -------------------------------------------------------------------------- */
/* ما كان يأتي من .public-page في app.css — الصفحة لا تحمّلها أصلاً */
.lp-page {
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--ink-900);
  color: var(--fg);
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: 1.9;
}
/* إيقاع واحد لكل الأقسام — لا حشو مخصص لأي قسم على حدة */
.lp-pad  { padding-block: clamp(72px, 9vw, 128px); }
.lp-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s24); }

.lp-h1, .lp-h2, .lp-h3 {
  font-family: 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  line-height: 1.25;
  margin: 0;
  /* لا letter-spacing: العربية خط متصل والتباعد يفكّ وصل حروفها */
}
.lp-h1 { font-size: var(--t-h1); font-weight: 700; color: var(--fg); }
.lp-h2 { font-size: var(--t-h2); font-weight: 700; color: var(--fg); }
.lp-h3 { font-size: var(--t-h3); font-weight: 600; color: var(--fg); }

.lp-lead { font-size: var(--t-lead); color: var(--fg-muted); max-width: 62ch; margin: 0; }
.lp-body { font-size: var(--t-body); color: var(--fg-muted); max-width: 62ch; margin: 0; }

/* العلامة العلوية — الموضع الأول من مواضع --sand الأربعة */
.lp-eyebrow {
  font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--sand);
  margin-block-end: var(--s12);
}

:where(.lp-page) a:focus-visible,
:where(.lp-page) button:focus-visible,
:where(.lp-page) summary:focus-visible {
  outline: 2px solid var(--lp-primary);
  outline-offset: 2px;
  border-radius: var(--s4);
}

/* --------------------------------------------------------------------------
   3. الأزرار
   -------------------------------------------------------------------------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s8);
  min-height: 48px;
  padding-inline: var(--s24);
  border: 1px solid transparent;
  border-radius: var(--r-field);
  font-family: inherit;
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms var(--lp-ease), border-color 180ms var(--lp-ease),
              transform 120ms var(--lp-ease);
}
.lp-btn:hover { text-decoration: none; }
/* ردّ الفعل عند الضغط لا عند الإفلات */
.lp-btn:active { transform: scale(.97); }

/* الزرّ الأساسي حبرٌ داكنٌ ونصُّه أبيض. وقلبُ الصفحة جعل `--fg` داكناً، فكان
   الزرّ نصّاً داكناً على أرضيةٍ داكنة — لا يُقرأ. النصّ يُثبَّت هنا صراحةً */
.lp-btn-primary { background: var(--lp-cta); color: #FFFFFF; font-weight: 600; }
.lp-btn-primary:hover { background: var(--lp-cta-h); }

.lp-btn-ghost { background: transparent; border-color: var(--line-str); color: var(--fg); }
.lp-btn-ghost:hover { background: #EDF1F0; border-color: var(--lp-primary); }

/* --------------------------------------------------------------------------
   4. الشريط العلوي
   -------------------------------------------------------------------------- */
.lp-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: transparent;
  border-block-end: 1px solid transparent;
  transition: background 220ms var(--lp-ease), border-color 220ms var(--lp-ease);
}
/* الصنف يضعه landing.js بعد تمرير 40px — بلا JS يبقى الشريط شفافاً وسليماً */
/* الشريط **أبيضُ من أول لحظة** لا شفافٌ ثم يمتلئ: التصميم يجعله سطحاً قائماً
   (`sticky` بحدٍّ سفليٍّ وظلٍّ خفيف)، والقائمةُ فوق بطلٍ فاتحٍ لا تُقرأ شفافة.
   و`is-stuck` يزيد الظلّ وحده بعد التمرير — يضعه `landing.js`، وبلا JS يبقى
   الشريط أبيضَ سليماً */
.lp-nav {
  background: #FFFFFF;
  border-block-end-color: var(--line);
}
.lp-nav.is-stuck {
  box-shadow: 0 1px 3px rgba(5, 42, 43, .06), 0 8px 24px -16px rgba(5, 42, 43, .18);
}
.lp-nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s16);
  min-height: 72px;
}
/* العلامة: رمزٌ في مربّعٍ حبريّ + الاسم وتحته صفتُه (تصميم Stitch).
   الرمزُ لا ينعكس في RTL — درعٌ شكلٌ متماثلٌ لا اتجاهَ قراءةٍ فيه */
.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s12);
  text-decoration: none;
  color: var(--fg);
}
/* الرمز صورةُ الشعار نفسه على أرضيته `#052a2b` — وهي أرضية الأصل حرفاً، فلا
   حافةَ تظهر بين المربّع والصورة. و`contain` لأن الرمز طوليٌّ لا مربّع */
.lp-brand-mark {
  inline-size: 38px;
  block-size: 38px;
  flex: none;
  border-radius: 10px;
  background: var(--ink-deep);
  object-fit: contain;
  padding: 3px;
}
.lp-brand-txt { display: grid; line-height: 1.3; }
.lp-brand-name {
  font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
}
/* السطر الثاني صغيرٌ وباهت — يُقرأ إن أراد ولا يزاحم الاسم */
.lp-brand-sub { font-size: 11px; color: var(--fg-muted); }
@media (max-width: 560px) { .lp-brand-sub { display: none; } }
/* سبعةُ روابطَ لا ثلاثة (تصميم Stitch): الزائر يرى خريطة المنتج قبل أن يمرّر.
   والفجوة أضيق والمقاس أصغر قليلاً كي تتّسع دون أن تزاحم العلامة والأزرار */
.lp-nav-links { display: flex; align-items: center; gap: var(--s16); }
.lp-nav-links a {
  color: var(--fg-muted);
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 180ms var(--lp-ease);
}
.lp-nav-links a:hover { color: var(--lp-primary); }
/* دون 1180px لا تتّسع السبعة مع العلامة والزرَّين — تُطوى إلى قائمة الجوال
   قبل أن تلتفّ أو تُقصّ. والحدُّ أعلى من نقطة الطيّ القديمة (860px) لهذا السبب.
   **وزرُّ القائمة يظهر معها في النقطة نفسها**: إخفاءُ الروابط عند 1180 وإظهارُ
   الزرّ عند 860 يترك الشاشات بينهما **بلا تنقّلٍ إطلاقاً** — لا روابطَ ولا زرّ. */
@media (max-width: 1180px) {
  .lp-nav-links { display: none; }
  .lp-burger { display: block; }
}
.lp-nav-cta { display: flex; align-items: center; gap: var(--s12); }
.lp-nav-cta .lp-btn { min-height: 40px; padding-inline: var(--s16); font-size: var(--t-xs); }

/* زر القائمة على الجوال — <details> فلا يحتاج JS */
.lp-burger { display: none; }
.lp-burger > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--line-str);
  border-radius: var(--r-field);
  color: var(--fg);
  cursor: pointer;
  list-style: none;
}
.lp-burger > summary::-webkit-details-marker { display: none; }
.lp-burger-panel {
  position: absolute;
  inset-block-start: 100%;        /* أسفل شريط الرأس مباشرةً — بلا ارتفاعٍ مثبَّت */
  inset-inline: var(--s16);       /* من حافتَي الصفحة (نسبةً إلى الرأس كامل العرض) */
  z-index: 50;                    /* فوق البطل، تحت لا شيء */
  margin-block-start: var(--s8);
  padding: var(--s16);
  background: var(--ink-800);
  border: 1px solid var(--line-str);
  border-radius: var(--r-card);
  box-shadow: var(--lp-lift);
  display: grid;
  gap: var(--s16);
}
.lp-burger-panel a { color: var(--fg); text-decoration: none; }
/* زر الدخول في قائمة الجوال — بارزٌ كزرّ لا رابطاً باهتاً يضيع بين الروابط */
.lp-burger-login { margin-block-start: var(--s8); }

/* شريط الإجراء السفلي — يظهر بعد 600px تمرير */
.lp-dock {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 45;
  display: none;
  padding: var(--s12) var(--s16);
  padding-block-end: max(var(--s12), env(safe-area-inset-bottom));
  background: rgba(6, 26, 25, .92);
  backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform 260ms var(--lp-ease);
}
.lp-dock.is-in { transform: none; }
.lp-dock .lp-btn { inline-size: 100%; }

/* --------------------------------------------------------------------------
   5. البطل
   -------------------------------------------------------------------------- */
.lp-hero { position: relative; isolation: isolate; overflow: hidden; }
/* أرضية البطل من تصميم Stitch: تدرّجٌ رأسيٌّ من نعناعٍ باهتٍ إلى خلفية الصفحة
   — يفصل الطيّة الأولى بلا خطٍّ ولا صندوق. وكانت هالتين خضراوين تُقرآن على
   الحبر ولا تُرى على الفاتح، فتُرسم بلا أثر. */
.lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #E9F5F1 0%, #F3F6F5 62%, #F3F6F5 100%);
}
/* البطل ممركَزٌ ثم لوحةٌ عريضةٌ تحته (تصميم Stitch) — لا عمودين. النصّ محصورٌ
   في عرضٍ يُقرأ، واللوحة تأخذ الصفحة كلَّها لأنها الحجّة لا الزخرفة */
.lp-hero-head {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: var(--s48);
}
.lp-hero-head .lp-lead { margin-inline: auto; }

/* الشارة بنقطةٍ نابضةٍ قبلها (تصميم Stitch): النقطة تقول «الآن» بلا كلمة،
   والحدُّ بلون العلامة لا رمادياً فتُقرأ دعوةً لا حاشية */
.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  padding: var(--s8) var(--s16);
  border: 1px solid #CDE3E1;
  border-radius: var(--r-chip);
  background: #FFFFFF;
  color: var(--lp-primary);
  font-size: var(--t-xs);
  font-weight: 500;
  margin-block-end: var(--s24);
}
.lp-badge::before {
  content: '';
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--r-chip);
  background: var(--u-attend);
  flex: none;
}
/* الموضع الثاني من مواضع --sand: خط تحت كلمة واحدة في العنوان */
.lp-underline {
  position: relative;
  white-space: nowrap;
}
.lp-underline::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -.12em;
  block-size: 3px;
  border-radius: 2px;
  background: var(--sand);
}
.lp-hero-lead { margin-block: var(--s24) var(--s32); }
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: var(--s16); justify-content: center; }
.lp-hero-actions .lp-btn-ghost { background: #FFFFFF; }
.lp-hero-actions .lp-btn-ghost svg { color: var(--lp-link); }

/* --------------------------------------------------------------------------
   6. لقطة المنتج — واجهة فاتحة داخل قسم داكن
   -------------------------------------------------------------------------- */
/* الفاتح داخل الداكن هو التأثير المقصود: تُقرأ فوراً كأنها لقطة حقيقية.
   وهي مبنيّة بالكود لا صورة، فتبقى حادة على كل شاشة وتتغيّر مع المنتج. */
.lp-shot-wrap { position: relative; }
.lp-shot-wrap::before {
  content: '';
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  background: radial-gradient(60% 55% at 50% 45%, rgba(30, 136, 119, .12) 0%, transparent 70%);
  filter: blur(48px);
}
.lp-shot {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  background: #FBFBF9;
  color: #16211F;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--lp-lift);
  transform: perspective(1400px) rotate(-1deg);
}

/* الشريط الجانبي المصغّر */
.lp-shot-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s8);
  padding-block: var(--s12);
  background: var(--ink-900);
}
.lp-rail-item {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 9px;
  color: var(--fg-dim);
}
.lp-rail-item.is-on { background: rgba(63, 169, 143, .16); color: var(--u-attend); }

.lp-shot-main { min-width: 0; }
.lp-shot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s8);
  padding: var(--s12) var(--s16);
  border-block-end: 1px solid #E8ECEA;
}
.lp-shot-title { font-size: 14px; font-weight: 600; color: #0A2523; }
.lp-shot-date  { font-size: 12px; color: #63726F; }

.lp-shot-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s8);
  padding: var(--s12) var(--s16);
}
.lp-stat {
  padding: var(--s8) var(--s12);
  border: 1px solid #E8ECEA;
  border-radius: 10px;
  background: #fff;
}
.lp-stat-n {
  font-family: 'Readex Pro', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: start;
}
.lp-stat-l { font-size: 11px; color: #63726F; }   /* رُفع من #6B7A77: كان 4.49:1 */
/* نغمات النص من app.css §3.6 — والزائر يرى ما يراه المستخدم.
   وكان #9A7420 عند 4.29 أي دون 4.5:1 */
.lp-stat-present .lp-stat-n { color: #12613F; }
.lp-stat-late    .lp-stat-n { color: #7D5600; }
.lp-stat-absent  .lp-stat-n { color: #8E2C22; }

.lp-shot-table { inline-size: 100%; border-collapse: collapse; font-size: 12px; }
.lp-shot-table td {
  padding: 9px var(--s16);
  border-block-start: 1px solid #EEF1F0;
  color: #16211F;
  white-space: nowrap;
}
.lp-shot-table tr td:first-child { font-weight: 500; }
.lp-cell-class { color: #63726F; font-variant-numeric: tabular-nums; direction: ltr; }
.lp-cell-time  { color: #63726F; font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
.lp-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--r-chip);
  font-size: 11px;
  font-weight: 500;
}
.lp-chip-present { background: #E3F0E9; color: #1F5C42; }
.lp-chip-late    { background: #F7EEDC; color: #7A5A12; }
.lp-chip-absent  { background: #F6E5E3; color: #7E2F28; }

/* --------------------------------------------------------------------------
   7. الحركة — تحسينٌ لا شرط
   -------------------------------------------------------------------------- */
/* `.js-lp` يضعه landing.js: بلا JS لا يختفي شيء أصلاً */
@media (prefers-reduced-motion: no-preference) {
  .js-lp [data-lp-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms var(--lp-ease), transform 600ms var(--lp-ease);
  }
  .js-lp [data-lp-reveal].is-in { opacity: 1; transform: none; }
  /* اللقطة تدخل بعد النص: النص فوري حفاظاً على LCP */
  .js-lp .lp-shot-wrap[data-lp-reveal] {
    transform: translateY(24px) scale(.98);
    transition-delay: 200ms;
  }
  .js-lp .lp-shot-wrap[data-lp-reveal].is-in { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-page *, .lp-page *::before, .lp-page *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   8. الجوال
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .lp-hero-grid { grid-template-columns: 1fr; }
  .lp-shot { transform: none; }
}
@media (max-width: 860px) {
  .lp-nav-links { display: none; }
  .lp-nav-cta .lp-btn-ghost { display: none; }
  /* بلا `position: relative`: اللوحة تُوضَّع نسبةً إلى الرأس (`.lp-nav` الساكن)
     لا إلى الزرّ 44px — وإلا خرجت خارج الشاشة (inset-inline من صندوقٍ ضيّق) */
  .lp-burger { display: block; }
  .lp-dock { display: block; }
}
@media (max-width: 560px) {
  .lp-shot { grid-template-columns: 44px minmax(0, 1fr); }
  .lp-shot-stats { grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
  .lp-shot-table td { padding-inline: var(--s12); }
}

/* الطباعة — قد تُطبع الصفحة لعرضها على مدير */
@media print {
  .lp-page { background: #fff; color: #16211F; }
  .lp-hero::before, .lp-shot-wrap::before, .lp-dock, .lp-nav { display: none; }
  .lp-h1, .lp-h2, .lp-h3 { color: var(--ink-on-paper); }
  .lp-lead, .lp-body { color: #4A5A57; }
  .lp-shot { box-shadow: none; transform: none; }
  [data-lp-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   9. شريط الثقة — المرحلة 2
   -------------------------------------------------------------------------- */
.lp-trust { background: var(--ink-800); border-block: 1px solid var(--line); }
.lp-trust-in {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s24);
  padding-block: var(--s32);
}
/* بطاقاتٌ لا أسطرٌ بفواصل (تصميم Stitch): لكلٍّ عنوانٌ وسطرٌ تحته، فيصير
   دعوى قائمةً بذاتها لا كلمةً عابرة. والأيقونة في مربّعٍ بلون العلامة باهتاً */
.lp-trust-card {
  display: flex;
  align-items: center;
  gap: var(--s16);
  padding: var(--s16);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--ink-900);
}
.lp-trust-ico {
  flex: none;
  inline-size: 48px;
  block-size: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #E4EEEE;
  color: var(--lp-primary);
}
.lp-trust-txt { display: grid; gap: 2px; min-width: 0; }
.lp-trust-h {
  font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.4;
}
.lp-trust-p { font-size: 13px; color: var(--fg-muted); line-height: 1.6; }
@media (max-width: 860px) { .lp-trust-in { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   10. الشبكة والبطاقة — تُستعمل في «الأثقل ليس اليومي» والوحدات
   -------------------------------------------------------------------------- */
.lp-head { max-width: 62ch; margin-block-end: var(--s48); }
.lp-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s24);
}
.lp-card {
  padding: var(--s32) var(--s24);
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color 200ms var(--lp-ease), transform 200ms var(--lp-ease);
}
/* لا تحريك على اللمس: التمرير يقع بالنقر فيعلق الكرت مرفوعاً */
@media (hover: hover) and (pointer: fine) {
  .lp-card:hover { border-color: var(--line-str); transform: translateY(-2px); }
}
/* مربع الأيقونة بلون وحدته، والخلفية نفس اللون بشفافية 12% */
.lp-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--u) 12%, transparent);
  color: var(--u);
  margin-block-end: var(--s16);
}
.lp-card-title { margin-block-end: var(--s8); }
.lp-card-text { font-size: var(--t-body); color: var(--fg-muted); line-height: 1.75; margin: 0; }

/* بطاقة الوحدة — تزيد ثلاثة أسطر قدرات */
.lp-mod-list {
  margin: var(--s16) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s8);
}
.lp-mod-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s8);
  font-size: var(--t-xs);
  color: var(--fg-dim);
  line-height: 1.6;
}
.lp-mod-list li::before {
  content: '';
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--u);
  flex: none;
  margin-block-start: .55em;
}
@media (hover: hover) and (pointer: fine) {
  .lp-mod:hover { border-color: color-mix(in srgb, var(--u) 40%, var(--line-str)); }
}

@media (max-width: 900px) {
  .lp-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-trust-in { grid-template-columns: 1fr; gap: var(--s24); }
  .lp-trust-item { border-inline-start: 0; padding-inline: 0; }
}
@media (max-width: 620px) {
  .lp-grid-3 { grid-template-columns: 1fr; }
}

/* لون الوحدة يُمرَّر بصنف لا بـstyle: المتغيّر --u تقرؤه .lp-ico و.lp-mod-list
   والحدّ عند التمرير، فيكفي صنف واحد على البطاقة لتلوّن كل ما بداخلها. */
.lp-u-attend { --u: var(--u-attend); }
.lp-u-late   { --u: var(--u-late); }
.lp-u-excuse { --u: var(--u-excuse); }
.lp-u-behave { --u: var(--u-behave); }
.lp-u-table  { --u: var(--u-table); }
.lp-u-guide  { --u: var(--u-guide); }

/* --------------------------------------------------------------------------
   11. القسم الورقي والانتقال إليه — المرحلة 3
   -------------------------------------------------------------------------- */
/* الانتقال المعتمد: تلاشٍ بارتفاع 80px، **واحد يُستعمل في كل الانتقالات**.
   الحدّ الحاد بين شريطين متضادين يُقرأ خطأً في التركيب لا قراراً. */
.lp-paper {
  position: relative;
  background: var(--paper);
  color: var(--ink-on-paper);
}
.lp-paper::before,
.lp-paper::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  block-size: 80px;
  pointer-events: none;
}
.lp-paper::before { inset-block-start: -80px; background: linear-gradient(to bottom, transparent, var(--paper)); }
.lp-paper::after  { inset-block-end: -80px;  background: linear-gradient(to top,    transparent, var(--paper)); }

/* كل الألوان تنقلب داخل الورقي */
.lp-paper .lp-h2 { color: var(--ink-on-paper); }
.lp-paper .lp-lead { color: #5A6B62; }
.lp-paper .lp-eyebrow { color: #7A5F1C; }   /* --sand يعطي 1.90:1 على الورق؛ وهذه 5.27:1 */

/* --------------------------------------------------------------------------
   12. الخط الزمني المتبادل
   -------------------------------------------------------------------------- */
.lp-tl {
  --tl-gap: 64px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--tl-gap);
  row-gap: var(--s48);
  margin-block-start: var(--s48);
}
/* الخط المركزي */
.lp-tl::before {
  content: '';
  position: absolute;
  inset-block: 8px 8px;
  inset-inline-start: 50%;
  inline-size: 2px;
  margin-inline-start: -1px;
  background: rgba(10, 37, 35, .15);
}
.lp-tl-item { position: relative; grid-column: 1; }
/* في RTL العمود الأول هو اليمين — فالفردي يميناً والزوجي يساراً */
.lp-tl-item:nth-child(even) { grid-column: 2; }
.lp-tl-item:nth-child(1) { grid-row: 1; }
.lp-tl-item:nth-child(2) { grid-row: 2; }
.lp-tl-item:nth-child(3) { grid-row: 3; }
.lp-tl-item:nth-child(4) { grid-row: 4; }
.lp-tl-item:nth-child(5) { grid-row: 5; }
.lp-tl-item:nth-child(6) { grid-row: 6; }

/* النقطة على الخط نفسه: نصف الفجوة من حافة العمود */
.lp-tl-item::before {
  content: '';
  position: absolute;
  inset-block-start: 10px;
  inline-size: 13px;
  block-size: 13px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--u, var(--lp-primary));
}
.lp-tl-item:nth-child(odd)::before  { inset-inline-end:   calc(-1 * (var(--tl-gap) / 2) - 6px); }
.lp-tl-item:nth-child(even)::before { inset-inline-start: calc(-1 * (var(--tl-gap) / 2) - 7px); }

.lp-tl-time {
  font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 22px;
  font-weight: 700;
  /* --lp-primary يعطي 3.79:1 على الورق: يمرّ كنص كبير ويرسب في حدّ 4.5
     الذي تفرضه المواصفة. درجة أغمق من العائلة نفسها تعطي 5.56:1. */
  color: #176B5D;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: start;
  line-height: 1.2;
}
.lp-tl-title {
  font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--ink-on-paper);
  line-height: 1.4;
  margin-block: var(--s8) var(--s8);
}
.lp-tl-text { font-size: var(--t-body); color: #5A6B62; line-height: 1.8; margin: 0; max-width: 46ch; }

/* رقاقة الوحدة المسؤولة — «الوحدة:» تسبقها ليفهم الزائر ما هي */
.lp-tl-unit {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  margin-block-start: var(--s12);
  padding: 4px var(--s12);
  border-radius: var(--r-chip);
  background: color-mix(in srgb, var(--u) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--u) 34%, transparent);
  font-size: var(--t-xs);
}
.lp-tl-unit b { font-weight: 600; color: color-mix(in srgb, var(--u) 72%, #0A2523); }
.lp-tl-unit span { color: #5A6B62; font-weight: 400; }

/* --------------------------------------------------------------------------
   13. قصاصات الواجهة — ثلاث محطات فقط، وإلا امتلأ القسم
   -------------------------------------------------------------------------- */
.lp-snip {
  margin-block-start: var(--s16);
  background: #fff;
  border: 1px solid rgba(10, 37, 35, .10);
  border-radius: var(--r-field);
  box-shadow: 0 10px 26px -14px rgba(10, 37, 35, .30);
  max-width: 340px;
  overflow: hidden;
}
.lp-snip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s8) var(--s12);
  border-block-end: 1px solid #EEF1F0;
  font-size: 11px;
  color: #63726F;
}
.lp-snip-body { padding: var(--s12); }
.lp-snip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s8);
  font-size: 12px;
  color: #16211F;
}
.lp-snip-name { font-weight: 500; }
.lp-snip-meta { font-size: 11px; color: #63726F; margin-block-start: 2px; }
.lp-snip-btn {
  display: block;
  margin-block-start: var(--s12);
  padding: 7px;
  border-radius: 9px;
  background: var(--lp-cta);
  color: var(--fg);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.lp-snip-score {
  font-family: 'Readex Pro', sans-serif;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  color: #B96A6A;
}
/* إطار جوال مصغّر لقصاصة ولي الأمر */
.lp-snip-phone {
  max-width: 190px;
  border-radius: 20px;
  border: 6px solid #0E322F;
  box-shadow: 0 14px 30px -16px rgba(10, 37, 35, .45);
}
.lp-snip-phone .lp-snip-head { border-radius: 0; }

@media (max-width: 860px) {
  .lp-tl { grid-template-columns: 1fr; row-gap: var(--s32); padding-inline-start: var(--s24); }
  .lp-tl::before { inset-inline-start: 6px; }
  .lp-tl-item, .lp-tl-item:nth-child(even) { grid-column: 1; }
  .lp-tl-item:nth-child(n) { grid-row: auto; }
  .lp-tl-item::before,
  .lp-tl-item:nth-child(odd)::before,
  .lp-tl-item:nth-child(even)::before { inset-inline-start: -24px; inset-inline-end: auto; }
  .lp-snip { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   14. جولة في النظام — تبويبات بلا JS
   -------------------------------------------------------------------------- */
/* أزرار الراديو تعطي التنقل بالأسهم ومنطق «واحد فقط نشط» مجاناً من المتصفح.
   ويجت JS مكتوب يدوياً يعيد بناء ذلك كله ويخطئ فيه عادةً. */
.lp-tour { background: var(--ink-800); }
.lp-tabs { position: relative; }
.lp-tabs > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  inline-size: 1px;
  block-size: 1px;
}
.lp-tab-nav {
  display: inline-flex;
  gap: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: #FFFFFF;
  margin-block-end: var(--s32);
  max-width: 100%;
  overflow-x: auto;
}
.lp-tab-nav label {
  padding: var(--s8) var(--s24);
  border-radius: var(--r-chip);
  color: var(--fg-muted);
  font-size: var(--t-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background 200ms var(--lp-ease), color 200ms var(--lp-ease);
}
.lp-tab-nav label:hover { color: var(--fg); }

/* الشبكة تُكدّس اللوحات في خلية واحدة فلا يقفز الارتفاع عند التبديل */
.lp-tab-panels { display: grid; }
.lp-tab-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 260ms var(--lp-ease), transform 260ms var(--lp-ease),
              visibility 0s linear 260ms;
}
.lp-tabs > input:nth-of-type(1):checked ~ .lp-tab-panels > :nth-child(1),
.lp-tabs > input:nth-of-type(2):checked ~ .lp-tab-panels > :nth-child(2),
.lp-tabs > input:nth-of-type(3):checked ~ .lp-tab-panels > :nth-child(3) {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.lp-tabs > input:nth-of-type(1):checked ~ .lp-tab-nav label:nth-of-type(1),
.lp-tabs > input:nth-of-type(2):checked ~ .lp-tab-nav label:nth-of-type(2),
.lp-tabs > input:nth-of-type(3):checked ~ .lp-tab-nav label:nth-of-type(3) {
  background: var(--lp-cta);
  color: var(--fg);
  font-weight: 600;
}
/* التركيز يظهر على التسمية لأن الزر نفسه مخفي بصرياً */
.lp-tabs > input:nth-of-type(1):focus-visible ~ .lp-tab-nav label:nth-of-type(1),
.lp-tabs > input:nth-of-type(2):focus-visible ~ .lp-tab-nav label:nth-of-type(2),
.lp-tabs > input:nth-of-type(3):focus-visible ~ .lp-tab-nav label:nth-of-type(3) {
  outline: 2px solid var(--lp-primary);
  outline-offset: 2px;
}

/* اللقطة داخل التبويب: بلا ميل، فالميل للبطل وحده */
.lp-tab-panel .lp-shot { transform: none; max-width: 860px; }
.lp-shot-plain { grid-template-columns: minmax(0, 1fr); }

/* صفوف مفتاح/قيمة داخل لقطة السلوك */
.lp-kv { display: grid; gap: var(--s12); padding: var(--s16); }
.lp-kv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s12);
  font-size: 13px;
}
.lp-kv-k { color: #63726F; }
.lp-kv-v { color: #16211F; font-weight: 500; }
.lp-score {
  font-family: 'Readex Pro', sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  color: #12613F;
}
.lp-score small { font-size: 15px; font-weight: 600; color: #63726F; }
.lp-note {
  padding: var(--s12) var(--s16);
  margin: 0 var(--s16) var(--s16);
  border-radius: 10px;
  background: #F7F3EC;
  border: 1px solid #E9E0D2;
  font-size: 12px;
  color: #5A4B33;
  line-height: 1.7;
}
.lp-act {
  display: inline-block;
  margin: 0 var(--s16) var(--s16);
  padding: 8px var(--s16);
  border-radius: 9px;
  background: var(--lp-cta);
  color: var(--fg);
  font-size: 12px;
  font-weight: 600;
}
/* إطار الجوال داخل التبويب */
.lp-phone {
  max-width: 300px;
  margin-inline: auto;
  border: 8px solid #0E322F;
  border-radius: 28px;
  background: #FBFBF9;
  overflow: hidden;
  box-shadow: var(--lp-lift);
}
.lp-feed { display: grid; gap: var(--s8); padding: var(--s12) var(--s16) var(--s16); }
.lp-feed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 7px;
  border-block-start: 1px solid #EEF1F0;
  font-size: 12px;
  color: #16211F;
}
.lp-feed-row:first-child { border-block-start: 0; }
.lp-feed-day { color: #63726F; font-variant-numeric: tabular-nums; direction: ltr; }

/* --------------------------------------------------------------------------
   15. الامتثال 1447
   -------------------------------------------------------------------------- */
.lp-comply {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: clamp(var(--s32), 5vw, var(--s64));
  align-items: start;
}
/* الموضع الرابع والأخير من مواضع --sand */
.lp-comply-num {
  font-family: 'Readex Pro', sans-serif;
  font-size: clamp(64px, 9vw, 96px);
  font-weight: 700;
  line-height: 1;
  color: var(--sand);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.lp-comply-list { margin: var(--s24) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s16); }
.lp-comply-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s12);
  font-size: var(--t-body);
  color: var(--fg-muted);
  line-height: 1.8;
}
.lp-comply-list svg { color: var(--lp-primary); flex: none; margin-block-start: 5px; }

@media (max-width: 760px) {
  .lp-comply { grid-template-columns: 1fr; gap: var(--s24); }
  .lp-tab-nav { inline-size: 100%; }
  .lp-tab-nav label { flex: 1; text-align: center; padding-inline: var(--s12); }
}

/* --------------------------------------------------------------------------
   16. التسعير — على الورقي
   -------------------------------------------------------------------------- */
.lp-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s24);
  margin-block-start: var(--s48);
  align-items: start;
}
.lp-plan {
  display: flex;
  flex-direction: column;
  padding: var(--s32) var(--s24);
  background: #fff;
  border: 1px solid rgba(10, 37, 35, .10);
  border-radius: var(--r-card);
  box-shadow: 0 10px 30px -18px rgba(10, 37, 35, .28);
}
/* الأوسط داكن داخل قسم فاتح — انعكاس مقصود لعلاقة اللقطة الفاتحة في البطل */
.lp-plan-hi {
  background: var(--ink-800);
  border-color: transparent;
  transform: translateY(-12px);
  box-shadow: 0 26px 60px -24px rgba(10, 37, 35, .55);
}
.lp-plan-name {
  font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--ink-on-paper);
}
.lp-plan-hi .lp-plan-name { color: var(--fg); }

/* الموضع الثالث من مواضع --sand */
.lp-plan-badge {
  align-self: flex-start;
  padding: 4px var(--s12);
  border-radius: var(--r-chip);
  background: var(--sand);
  color: #3A2A06;
  font-size: var(--t-xs);
  font-weight: 600;
  margin-block-end: var(--s12);
}
.lp-plan-price { display: flex; align-items: baseline; gap: var(--s8); margin-block: var(--s16) var(--s4); }
.lp-plan-amount {
  font-family: 'Readex Pro', sans-serif;
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 700;
  line-height: 1;
  color: var(--ink-on-paper);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.lp-plan-hi .lp-plan-amount { color: var(--fg); }
.lp-plan-unit { font-size: var(--t-body); color: #5A6B62; }
.lp-plan-hi .lp-plan-unit { color: var(--fg-muted); }
.lp-plan-year { font-size: var(--t-xs); color: #5F6E69; min-height: 1.3em; }
.lp-plan-hi .lp-plan-year { color: #7FCBAE; }

.lp-plan-cap {
  margin-block: var(--s16);
  padding-block: var(--s16);
  border-block: 1px solid rgba(10, 37, 35, .10);
  font-size: var(--t-body);
  color: #5A6B62;
}
.lp-plan-hi .lp-plan-cap { border-color: var(--line); color: var(--fg-muted); }

.lp-plan-from {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-on-paper);
  margin-block-end: var(--s12);
}
.lp-plan-hi .lp-plan-from { color: var(--fg); }
.lp-plan-list { margin: 0 0 var(--s24); padding: 0; list-style: none; display: grid; gap: var(--s8); }
.lp-plan-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s8);
  font-size: var(--t-body);
  color: #40514A;
  line-height: 1.6;
}
.lp-plan-hi .lp-plan-list li { color: var(--fg-muted); }
.lp-plan-list svg { color: var(--lp-primary); flex: none; margin-block-start: 4px; }
.lp-plan-hi .lp-plan-list svg { color: #4FC49E; }
.lp-plan .lp-btn { margin-block-start: auto; inline-size: 100%; }
.lp-plan-note { margin-block-start: var(--s24); font-size: var(--t-xs); color: #5F6E69; text-align: center; }

/* ── زرّ التبديل: حكومي/أهلي ────────────────────────────────────────────────
   النشط أخضر داكن (--ink-800) بنصٍّ كريمي (--paper)، وهي علاقة «النشط» في
   هوية مكين. وشارة الدعم بالرملي (--sand) — لون الهوية الدافئ، لا ذهبٌ
   مخترع. بلا زجاج ولا شفافية (DESIGN.md: لا glassmorphism). */
.lp-seg {
  display: flex;
  gap: 4px;
  inline-size: fit-content;
  margin: var(--s32) auto 0;
  padding: 4px;
  background: var(--paper-2);
  border: 1px solid rgba(10, 37, 35, .12);
  border-radius: var(--r-chip);
}
.lp-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  padding: 10px var(--s24);
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--r-chip);
  font-family: inherit;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink-on-paper);
  transition: background .2s ease, color .2s ease;
}
.lp-seg-btn:hover { color: var(--lp-primary); }
.lp-seg-btn.is-active {
  background: var(--ink-800);
  color: var(--paper);
}
.lp-seg-btn.is-active:hover { color: var(--paper); }
.lp-seg-tag {
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-chip);
  background: var(--sand);
  color: #3A2A06;
}

/* ── حالتا السعر: الحكومي افتراضاً، والأهلي بالتبديل ─────────────────────── */
.lp-plan-pricebox { margin-block: var(--s16) var(--s4); }
/* الأهلي مخفيٌّ حتى يُطلب — والحكومي هو الظاهر بلا JS (الصنف is-gov مكتوب) */
.lp-price-private { display: none; }
.lp-plans.is-private .lp-price-private { display: block; }
.lp-plans.is-private .lp-price-gov { display: none; }

.lp-price-was {
  display: inline-block;
  font-size: var(--t-body);
  color: #8A9A93;
  text-decoration: line-through;
  text-decoration-color: rgba(10, 37, 35, .4);
  direction: ltr;
  margin-block-end: 2px;
}
.lp-plan-hi .lp-price-was { color: var(--fg-dim); }

.lp-plan-term {
  font-size: var(--t-xs);
  color: #5F6E69;
  margin-block-start: var(--s4);
}
.lp-plan-hi .lp-plan-term { color: var(--fg-dim); }

.lp-plan-initiative {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-block-start: var(--s8);
  font-size: var(--t-xs);
  color: var(--lp-primary);
  line-height: 1.5;
}
.lp-plan-initiative svg { flex: none; margin-block-start: 2px; }
.lp-plan-hi .lp-plan-initiative { color: #4FC49E; }

/* --------------------------------------------------------------------------
   17. الأسئلة
   -------------------------------------------------------------------------- */
.lp-faq { max-width: 820px; margin-block-start: var(--s48); }
.lp-q { border-block-end: 1px solid var(--line); }
.lp-q > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s16);
  padding-block: var(--s24);
  font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
}
.lp-q > summary::-webkit-details-marker { display: none; }
.lp-q-sign {
  display: flex;
  flex: none;
  color: var(--lp-primary);
  transition: transform 240ms var(--lp-ease);
}
.lp-q[open] .lp-q-sign { transform: rotate(45deg); }
.lp-q-body { padding-block-end: var(--s24); }
.lp-q-body p { margin: 0; font-size: var(--t-body); color: var(--fg-muted); line-height: 1.9; max-width: 68ch; }

/* الارتفاع المتحرك: يعمل حيث يُدعم، ويفتح فوراً حيث لا يُدعم */
.lp-page { interpolate-size: allow-keywords; }
.lp-q::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 240ms var(--lp-ease), content-visibility 240ms allow-discrete;
}
.lp-q[open]::details-content { block-size: auto; }

@media (max-width: 900px) {
  .lp-plans { grid-template-columns: 1fr; }
  .lp-plan-hi { transform: none; }
}

/* السقف يتصدّر البطاقة: هو الفرق الحقيقي بين الباقات، والسعر نتيجته */
.lp-plan-caplabel { font-size: var(--t-xs); color: #5F6E69; margin-block-start: var(--s16); }  /* رُفع من #5F6E69: كان 4.23:1 */
.lp-plan-hi .lp-plan-caplabel { color: var(--fg-dim); }
.lp-plan-cap {
  display: flex;
  align-items: baseline;
  gap: var(--s8);
  margin-block: var(--s4) var(--s16);
  padding-block-end: var(--s16);
  border-block-end: 1px solid rgba(10, 37, 35, .10);
  border-block-start: 0;
  padding-block-start: 0;
}
.lp-plan-hi .lp-plan-cap { border-block-end-color: var(--line); }
.lp-plan-capv {
  font-family: 'Readex Pro', sans-serif;
  font-size: clamp(30px, 3.6vw, 40px);
  font-weight: 700;
  line-height: 1;
  color: var(--ink-on-paper);
  font-variant-numeric: tabular-nums;
}
.lp-plan-hi .lp-plan-capv { color: var(--fg); }
.lp-plan-capu { font-size: var(--t-body); color: #5A6B62; }
.lp-plan-hi .lp-plan-capu { color: var(--fg-muted); }
/* السعر صار ثانوياً */
.lp-plan-amount { font-size: clamp(24px, 2.4vw, 30px); }

/* --------------------------------------------------------------------------
   18. اطلب تجربة — المرحلة 6
   -------------------------------------------------------------------------- */
.lp-req { background: var(--ink-800); }
.lp-req-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s32), 5vw, var(--s64));
  align-items: start;
}
.lp-assure { margin-block-start: var(--s32); display: grid; gap: var(--s16); }
.lp-assure-row { display: flex; align-items: flex-start; gap: var(--s12); }
.lp-assure-row svg { color: var(--lp-primary); flex: none; margin-block-start: 5px; }
.lp-assure-row span { font-size: var(--t-body); color: var(--fg-muted); line-height: 1.8; }
.lp-mail { margin-block-start: var(--s32); font-size: var(--t-body); color: var(--fg-muted); }
.lp-mail a { color: var(--fg); text-decoration: underline; }

.lp-form {
  padding: var(--s32);
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--lp-lift);
}
.lp-f { display: block; margin-block-end: var(--s24); }
.lp-f-label { display: block; font-size: var(--t-xs); color: var(--fg-muted); margin-block-end: var(--s8); }
.lp-f-in {
  inline-size: 100%;
  min-block-size: 52px;
  padding-inline: var(--s16);
  background: #FFFFFF;
  border: 1px solid var(--line-str);
  border-radius: var(--r-field);
  color: var(--fg);
  font-family: inherit;
  font-size: var(--t-body);
  transition: border-color 180ms var(--lp-ease);
}
.lp-f-in::placeholder { color: var(--fg-dim); }
.lp-f-in:focus { outline: 0; border-color: var(--lp-primary); box-shadow: 0 0 0 3px rgba(30, 136, 119, .22); }
/* التحقق بعد تفاعل المستخدم لا قبله: :user-invalid لا يلوّن حقلاً لم يُلمس */
.lp-f-in:user-invalid { border-color: #C97F79; }
.lp-f-err { display: none; margin-block-start: var(--s8); font-size: var(--t-xs); color: #E0A29C; }
/* :has على الحقل كله — المُدخَل في حقل الجوال داخل غلاف فليس شقيقاً للرسالة */
.lp-f:has(.lp-f-in:user-invalid) .lp-f-err { display: block; }

/* +966 داخل الحقل نفسه بحدّ فاصل رفيع، لا مربع منفصل */
.lp-f-phone {
  display: flex;
  align-items: stretch;
  background: #FFFFFF;
  border: 1px solid var(--line-str);
  border-radius: var(--r-field);
  overflow: hidden;
  transition: border-color 180ms var(--lp-ease);
}
.lp-f-phone:focus-within { border-color: var(--lp-primary); box-shadow: 0 0 0 3px rgba(30, 136, 119, .22); }
.lp-f-phone:has(:user-invalid) { border-color: #C97F79; }
.lp-f-cc {
  display: flex;
  align-items: center;
  padding-inline: var(--s16);
  border-inline-end: 1px solid var(--line-str);
  color: var(--fg-muted);
  font-size: var(--t-body);
  direction: ltr;
  flex: none;
}
.lp-f-phone .lp-f-in {
  border: 0;
  background: transparent;
  border-radius: 0;
  direction: ltr;
  text-align: start;
}
.lp-f-phone .lp-f-in:focus { box-shadow: none; }

.lp-form .lp-btn { inline-size: 100%; }
/* النجاح داخل النموذج نفسه لا تنبيهاً منفصلاً فوقه */
.lp-done { text-align: center; padding-block: var(--s24); }
.lp-done-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  background: rgba(79, 196, 158, .14);
  color: #4FC49E;
  margin-block-end: var(--s16);
}
.lp-done h3 { font-family: 'Readex Pro', sans-serif; font-size: var(--t-h3); font-weight: 600; color: var(--fg); margin: 0; }
.lp-done p { margin-block-start: var(--s8); font-size: var(--t-body); color: var(--fg-muted); }
.lp-err-box {
  padding: var(--s12) var(--s16);
  margin-block-end: var(--s24);
  border-radius: var(--r-field);
  background: rgba(201, 127, 121, .12);
  border: 1px solid rgba(201, 127, 121, .34);
  color: #E0A29C;
  font-size: var(--t-body);
}

/* --------------------------------------------------------------------------
   19. التذييل
   -------------------------------------------------------------------------- */
.lp-footer { background: var(--ink-900); border-block-start: 1px solid var(--line); }
.lp-foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s48);
  padding-block: var(--s64) var(--s48);
}
/* الشعار الكامل — `height: auto` كي لا تُشوَّه نسبتُه لو تغيّر عرض العمود */
.lp-foot-logo { inline-size: 240px; max-inline-size: 100%; block-size: auto; }
.lp-foot-brand {
  font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
}
.lp-foot-desc { margin-block-start: var(--s12); font-size: var(--t-body); color: var(--fg-muted); line-height: 1.8; max-width: 38ch; }
.lp-foot-h { font-size: var(--t-xs); font-weight: 600; color: var(--fg); margin-block-end: var(--s16); }
.lp-foot-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s12); }
.lp-foot-list a, .lp-foot-list span { font-size: var(--t-body); color: var(--fg-muted); text-decoration: none; }
.lp-foot-list a:hover { color: var(--fg); }
.lp-foot-lic { font-variant-numeric: tabular-nums; direction: ltr; text-align: start; display: block; }
.lp-foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s16);
  padding-block: var(--s24);
  border-block-start: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--fg-dim);
}
.lp-foot-bottom nav { display: flex; gap: var(--s24); }
.lp-foot-bottom a { color: var(--fg-dim); text-decoration: none; }
.lp-foot-bottom a:hover { color: var(--fg-muted); }

@media (max-width: 860px) {
  .lp-req-grid { grid-template-columns: 1fr; }
  .lp-foot-grid { grid-template-columns: 1fr; gap: var(--s32); padding-block: var(--s48) var(--s32); }
}

/* --------------------------------------------------------------------------
   20. طبقة الحركة — المرحلة 7
   -------------------------------------------------------------------------- */
/* التتابع داخل الشبكات: 60ms لكل عنصر. الشبكة كلها تظهر دفعةً واحدة تُقرأ
   وميضاً، وبتتابعٍ طويل تُقرأ انتظاراً. */
@media (prefers-reduced-motion: no-preference) {
  .js-lp .lp-grid-3 > [data-lp-reveal]:nth-child(2),
  .js-lp .lp-plans  > [data-lp-reveal]:nth-child(2),
  .js-lp .lp-faq    > [data-lp-reveal]:nth-child(2) { transition-delay: 60ms; }
  .js-lp .lp-grid-3 > [data-lp-reveal]:nth-child(3),
  .js-lp .lp-plans  > [data-lp-reveal]:nth-child(3),
  .js-lp .lp-faq    > [data-lp-reveal]:nth-child(3) { transition-delay: 120ms; }
  .js-lp .lp-grid-3 > [data-lp-reveal]:nth-child(4),
  .js-lp .lp-faq    > [data-lp-reveal]:nth-child(4) { transition-delay: 180ms; }
  .js-lp .lp-grid-3 > [data-lp-reveal]:nth-child(5),
  .js-lp .lp-faq    > [data-lp-reveal]:nth-child(5) { transition-delay: 240ms; }
  .js-lp .lp-grid-3 > [data-lp-reveal]:nth-child(6),
  .js-lp .lp-faq    > [data-lp-reveal]:nth-child(6) { transition-delay: 300ms; }
}

/* العدّاد: الشبح يحجز عرض القيمة النهائية في نفس خلية الشبكة، فلا يتغيّر
   عرض العنصر أثناء العدّ ولا يقع أي إزاحة تخطيط. */
.lp-count { display: inline-grid; font-variant-numeric: tabular-nums; direction: ltr; }
.lp-count > * { grid-area: 1 / 1; }
.lp-count-ghost { visibility: hidden; }

/* الإزاحة الموازية: متغيّر يركّبه JS فوق الميل القائم بدل أن يستبدله */
.lp-shot { transform: perspective(1400px) rotate(-1deg) translateY(var(--lp-par, 0px)); }
@media (max-width: 1024px) {
  .lp-shot { transform: none; }
}

/* الإلزامي في المواصفة — يسبق كل ما فوقه لأنه يأتي بعده في الملف */
@media (prefers-reduced-motion: reduce) {
  .lp-page *,
  .lp-page *::before,
  .lp-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .lp-shot { transform: perspective(1400px) rotate(-1deg); }
}

/* الرابط الداخلي يهبط تحت الشريط اللاصق فيختفي عنوان القسم */
[id] { scroll-margin-block-start: 96px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.public-main-flush { flex: 1; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* --------------------------------------------------------------------------
   قسم التطبيق — من تصميم Stitch. عمودان: الحجّة يميناً واللقطتان يساراً.
   -------------------------------------------------------------------------- */
.lp-app { background: var(--ink-800); border-block: 1px solid var(--line); }
.lp-app-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s64);
  align-items: center;
}
.lp-app-lead { margin-block: var(--s16) var(--s32); }

.lp-app-list { list-style: none; margin: 0 0 var(--s32); padding: 0; display: grid; gap: var(--s16); }
.lp-app-item { display: flex; align-items: start; gap: var(--s12); color: var(--fg); }
/* رقاقةُ الصحّ: خضراءُ باهتةٌ بحدٍّ — الحالة لا تُمثَّل بلونٍ وحده، والأيقونة معها */
.lp-app-tick {
  flex: none;
  inline-size: 24px;
  block-size: 24px;
  margin-block-start: 3px;
  display: grid;
  place-items: center;
  border-radius: var(--r-chip);
  background: #E8F4EE;
  border: 1px solid #C9E4D6;
  color: var(--u-attend);
}

/* الصندوق الورقيّ — الموضع الوحيد للورقي في هذا القسم */
.lp-app-note {
  display: flex;
  align-items: center;
  gap: var(--s12);
  padding: var(--s16);
  border-radius: var(--r-card);
  background: var(--paper);
  border: 1px solid var(--paper-2);
  color: var(--ink-on-paper);
  margin-block-end: var(--s24);
}
.lp-app-note p { margin: 0; font-weight: 500; }
.lp-app-note svg { flex: none; color: var(--lp-primary); }

/* شعار المتجر — حبرٌ داكنٌ ونصٌّ كريميّ، وهو الموضع الثاني للسطح الداكن */
.lp-app-store {
  display: inline-flex;
  align-items: center;
  gap: var(--s12);
  padding: var(--s12) var(--s24);
  border-radius: var(--r-field);
  background: var(--ink-deep);
  color: var(--on-deep);
  text-decoration: none;
  transition: background 180ms var(--lp-ease);
}
a.lp-app-store:hover { background: var(--lp-primary); }
.lp-app-store svg { flex: none; }
.lp-app-store-txt { display: grid; line-height: 1.4; }
.lp-app-store-pre { font-size: 11px; color: #B9C4C0; }
.lp-app-store-name { font-size: var(--t-body); font-weight: 600; }
.lp-app-soon { margin-block-start: var(--s12); font-size: var(--t-xs); color: var(--fg-muted); }

/* اللقطتان — هاتفان متداخلان قليلاً */
.lp-app-shots { display: flex; gap: var(--s16); justify-content: center; align-items: center; }
.lp-app-phone {
  inline-size: 260px;
  padding: var(--s16);
  display: grid;
  gap: var(--s12);
  background: #FFFFFF;
  border: 5px solid var(--ink-deep);
  border-radius: 28px;
  box-shadow: var(--lp-lift);
}
/* الخلفيّ أصغرُ وأخفضُ قليلاً — عمقٌ بلا ظلٍّ ثانٍ */
.lp-app-phone-back { transform: translateY(24px) scale(.94); }
.lp-app-phone-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-end: var(--s8);
  border-block-end: 1px solid var(--line);
}
.lp-app-phone-app  { font-size: 12px; font-weight: 700; color: var(--lp-primary); }
.lp-app-phone-time { font-size: 12px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.lp-app-phone-card {
  padding: var(--s12);
  border-radius: var(--r-field);
  background: var(--ink-900);
  border: 1px solid var(--line);
}
.lp-app-phone-card-alert { background: #FBF1EF; border-color: #F0D6D2; }
.lp-app-phone-card-ok    { background: #EDF6F1; border-color: #CFE6DA; }
.lp-app-phone-row { display: flex; align-items: center; gap: var(--s8); margin-block-end: 2px; }
.lp-dot { inline-size: 8px; block-size: 8px; border-radius: var(--r-chip); flex: none; }
.lp-dot-late    { background: var(--u-late); }
.lp-dot-present { background: var(--u-attend); }
.lp-app-phone-kind { font-size: 12px; font-weight: 700; color: var(--fg); }
.lp-app-phone-name { font-size: 15px; font-weight: 600; color: var(--fg); }
.lp-app-phone-meta { font-size: 12px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .lp-app-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s48); }
  .lp-app-shots { flex-wrap: wrap; }
  .lp-app-phone-back { transform: none; }
}

/* --------------------------------------------------------------------------
   لوحة تدفّق الحضور — بطلُ الصفحة الحقيقيّ (تصميم Stitch)
   -------------------------------------------------------------------------- */
/* بعرض الصفحة تحت النصّ لا في زاويته: الزائر يرى النظام يعمل قبل أن يقرأ عنه.
   وهي مبنيّةٌ بالكود لا صورة — تبقى حادّةً على كل شاشة وتتغيّر مع المنتج. */
.lp-live {
  max-width: 1040px;
  margin-inline: auto;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--lp-lift);
  overflow: hidden;
}
.lp-live-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s16);
  padding: var(--s16) var(--s24);
  background: #EDF4F2;
  border-block-end: 1px solid var(--line);
}
.lp-live-id { display: flex; align-items: center; gap: var(--s12); }
/* النقطة الحيّة تنبض — «مباشر» تُقال بحركةٍ لا بكلمة. وتسكن مع تقليل الحركة */
.lp-live-dot {
  inline-size: 12px;
  block-size: 12px;
  border-radius: var(--r-chip);
  background: var(--u-attend);
  flex: none;
  box-shadow: 0 0 0 0 rgba(31, 138, 95, .55);
  animation: lp-pulse 2s var(--lp-ease) infinite;
}
@keyframes lp-pulse {
  70%  { box-shadow: 0 0 0 10px rgba(31, 138, 95, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 138, 95, 0); }
}
.lp-live-titles { display: grid; }
.lp-live-title {
  font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--lp-primary);
}
.lp-live-sub { font-size: 12px; color: var(--fg-muted); }

.lp-live-stats {
  display: flex;
  align-items: center;
  gap: var(--s16);
  padding: var(--s8) var(--s16);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
}
.lp-live-stat { display: inline-flex; align-items: center; gap: var(--s8); }
.lp-live-stat-l { font-size: 13px; color: var(--fg-muted); }
.lp-live-stat-n {
  font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 16px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.lp-live-sep { inline-size: 1px; block-size: 16px; background: var(--line); }
.lp-dot-absent { background: var(--u-behave); }

/* الجدول يتمرّر أفقياً في صندوقه — لا يدفع الصفحة كلَّها (DESIGN.md) */
.lp-live-scroll { overflow-x: auto; }
.lp-live-table { inline-size: 100%; border-collapse: collapse; text-align: start; }
.lp-live-table th {
  padding: var(--s12) var(--s24);
  background: #F7F2EA;
  border-block-end: 2px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
  text-align: start;
  white-space: nowrap;
}
.lp-live-table td {
  padding: var(--s12) var(--s24);
  border-block-start: 1px solid var(--line);
  font-size: 14px;
  white-space: nowrap;
}
/* **تضليلُ الصفّ عند المرور** — التفصيل الذي يجعل الجدول يبدو حيّاً يُتصفَّح
   لا صورةً مطبوعة. لا ظلَّ ولا رفع: أرضيةٌ تتبدّل وحدها (DESIGN.md: لا ظلَّ
   على صفٍّ في جدول) */
.lp-live-table tbody tr { transition: background 160ms var(--lp-ease); }
.lp-live-table tbody tr:hover { background: var(--ink-900); }
.lp-live-name { font-weight: 600; color: var(--fg); }
.lp-live-dim  { color: var(--fg-muted); }
.lp-live-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--lp-primary);
}
.lp-live-src.is-none { color: var(--fg-dim); }

/* الرقاقة: أرضيةٌ باهتةٌ **وحدٌّ ونصّ** — الحالة لا تُمثَّل باللون وحده */
.lp-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-chip);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.lp-pill-present { background: #E8F4EE; border: 1px solid #C2E0D0; color: #12613F; }
.lp-pill-late    { background: #FBF1DC; border: 1px solid #EDD9AC; color: #7D5600; }
.lp-pill-excused { background: #E7EFF8; border: 1px solid #C6D9EE; color: #2C5F92; }
.lp-pill-absent  { background: #FAE9E7; border: 1px solid #EFCDC9; color: #8E2C22; }

.lp-live-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s8);
  padding: var(--s12) var(--s24);
  background: var(--ink-900);
  border-block-start: 1px solid var(--line);
  font-size: 12px;
  color: var(--fg-muted);
}
.lp-live-sync { display: inline-flex; align-items: center; gap: 6px; }
.lp-live-sync svg { color: var(--lp-link); }
.lp-live-total { font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif; }

@media (max-width: 860px) {
  .lp-live-bar { flex-direction: column; align-items: stretch; }
  .lp-live-stats { justify-content: space-between; }
  .lp-live-table th, .lp-live-table td { padding-inline: var(--s16); }
}
@media (prefers-reduced-motion: reduce) { .lp-live-dot { animation: none; } }


/* ==========================================================================
   تنقيحات تصميم Stitch — **تعديلاتٌ على قواعدَ قائمةٍ لا تعريفاتٌ ثانية**
   --------------------------------------------------------------------------
   الصفحة كانت مبنيّةً كاملةً قبل هذا الملف. وإعادةُ تعريف صنفٍ موجودٍ في آخر
   الملف تُبقي خصائصَ التعريف الأول وتغلب عليها بالثاني، فيخرج مزيجٌ لا هذا
   ولا ذاك — وهو ما وقع فعلاً في الخط الزمني: تطبيقان متعارضان، شبكةٌ من
   الأصل وعرضٌ ونسبةٌ من التنقيح، فاختلّ القسم على الجوال والحاسب معاً.
   فما دونه هنا **خصائصُ مفردةٌ تُبدَّل**، ولا قاعدةَ تعيد بناء مكوّنٍ قائم.
   ========================================================================== */

/* عناوين الأقسام ممركَزة (تصميم Stitch) — كانت محاذيةً للبداية */
.lp-head { max-width: 760px; margin-inline: auto; text-align: center; }
.lp-head .lp-lead { margin-inline: auto; }

/* ── الخط الزمني: الدبّوس مملوءٌ بحدٍّ أبيض، والوقت أكبر بلون محطّته ────────
   القسم صار سطحاً أبيض (`.lp-sheet`)، والدبّوس كان مملوءاً بالورقيّ الكريميّ
   فيبدو بقعةً غريبة عليه. والحدّ الأبيض السميك يقطع الخطّ فتُقرأ النقطة
   محطّةً لا نقطةً عليه. */
.lp-tl::before { background: var(--line); }
.lp-tl-item::before {
  inline-size: 16px;
  block-size: 16px;
  background: var(--u, var(--lp-primary));
  border: 4px solid #FFFFFF;
  box-shadow: 0 0 0 1px var(--line);
}
.lp-tl-item:nth-child(odd)::before  { inset-inline-end:   calc(-1 * (var(--tl-gap) / 2) - 8px); }
.lp-tl-item:nth-child(even)::before { inset-inline-start: calc(-1 * (var(--tl-gap) / 2) - 8px); }
/* الوقت بلون محطّته وبمقاسٍ كبير — نصٌّ كبيرٌ عتبتُه 3:1، وكلُّ ألوان الوحدات
   تتجاوزها على الأبيض */
.lp-tl-time { font-size: clamp(22px, 2.4vw, 28px); color: var(--u, var(--lp-primary)); }
.lp-tl-title { color: var(--fg); }
.lp-tl-text  { color: var(--fg-muted); }
/* رقاقة الوحدة ورقيّة على السطح الأبيض بدل تلوينها بلون الوحدة — لونان في
   رقاقةٍ واحدةٍ يزاحمان الدبّوس الملوّن بجانبها */
.lp-tl-unit {
  background: var(--paper);
  border-color: var(--paper-2);
  border-radius: 10px;
  padding: 6px var(--s12);
}
.lp-tl-unit b { color: var(--ink-on-paper); }
.lp-tl-unit span { color: var(--ink-on-paper); opacity: .72; }

/* ── بطاقات الوحدات ─────────────────────────────────────────────────────── */
.lp-card { border-radius: 18px; transition: box-shadow 200ms var(--lp-ease), transform 200ms var(--lp-ease); }
.lp-card:hover { box-shadow: var(--lp-lift); transform: translateY(-2px); }
.lp-ico { inline-size: 48px; block-size: 48px; border-radius: 12px; background: #E4EEEE; }

/* ── الأسئلة: بطاقاتٌ منفصلةٌ ورأسٌ مظلَّل (تصميم Stitch) ───────────────── */
.lp-faq { display: grid; gap: var(--s12); margin-inline: auto; }
.lp-q {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.lp-q[open] { border-color: #CDE3E1; }
.lp-q > summary { padding: var(--s16) var(--s24); background: #F8FAF9; }
.lp-q > summary:hover { background: var(--ink-900); }
.lp-q-body { padding: var(--s24); border-block-start: 1px solid var(--line); background: #FFFFFF; }
/* شيفرونٌ يدور 180° — يقول «يُفتح لأسفل» قبل الضغط */
.lp-q-sign { background: transparent; color: var(--lp-primary); }
.lp-q[open] .lp-q-sign { transform: rotate(180deg); }

/* ── التسعير: المميّزة بحدٍّ سميكٍ لا بخلفيةٍ مختلفة ────────────────────── */
.lp-plan { border-radius: 18px; transition: box-shadow 200ms var(--lp-ease), transform 200ms var(--lp-ease); }
.lp-plan:hover { box-shadow: var(--lp-lift); transform: translateY(-2px); }
.lp-plan-hi { border-width: 2px; border-color: var(--lp-primary); box-shadow: var(--lp-lift); }

/* ── طلب التجربة: بطاقةٌ بيضاءُ وخطواتٌ مرقّمة ─────────────────────────── */
.lp-req-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--lp-lift);
  padding: clamp(var(--s24), 4vw, var(--s64));
}
.lp-assure-row { align-items: center; gap: var(--s16); }
.lp-step-n {
  flex: none;
  inline-size: 32px;
  block-size: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-chip);
  background: var(--lp-primary);
  color: #FFFFFF;
  font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 700;
  font-size: 15px;
}

/* ── التذييل ────────────────────────────────────────────────────────────── */
.lp-footer { background: #FFFFFF; }
.lp-foot-logo { inline-size: 240px; max-inline-size: 100%; block-size: auto; }
.lp-foot-store-h { margin-block: var(--s24) var(--s12); }
.lp-foot-store { margin-block-start: 0; }

/* ── سطحٌ أبيضُ بحدٍّ علويٍّ حادّ — الفصل خطٌّ لا تدرّج (تصميم Stitch) ──── */
.lp-sheet { background: var(--ink-800); border-block-start: 1px solid var(--line); }

/* ── الشريط الداكن: بطاقةُ العدّاد الزجاجية ─────────────────────────────── */
.lp-comply-band { background: var(--ink-deep); color: var(--on-deep); }
.lp-comply-band .lp-h2,
.lp-comply-band .lp-comply-num { color: var(--on-deep); }
.lp-comply-band .lp-lead { color: #D8D2BE; }
.lp-comply-band .lp-eyebrow { color: #A9C6C4; }
.lp-comply-band .lp-count-ghost { color: rgba(244, 235, 208, .45); }
.lp-comply-band .lp-comply-list li { color: #D8D2BE; }
/* الزجاجيّ هو الشكل الوحيد الذي يصنع عمقاً على الحبر — الظلّ لا يُرى عليه */
.lp-comply-band .lp-comply-num {
  padding: var(--s32);
  border-radius: 24px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(244, 235, 208, .20);
  text-align: center;
  align-self: center;
}
.lp-comply-cap {
  display: block;
  margin-block-start: var(--s12);
  font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--on-deep);
}
.lp-comply-capd {
  display: block;
  margin-block-start: var(--s8);
  font-size: 13px;
  line-height: 1.8;
  color: rgba(244, 235, 208, .72);
}
.lp-comply-tags { display: flex; flex-wrap: wrap; gap: var(--s12); margin-block-start: var(--s24); }
.lp-comply-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  padding: 7px var(--s12);
  border-radius: 10px;
  background: rgba(244, 235, 208, .10);
  border: 1px solid rgba(244, 235, 208, .22);
  font-size: 13px;
  color: var(--on-deep);
}

/* ── مبدّل الباقات: النشط أخضرُ بنصٍّ أبيض ─────────────────────────────────
   كان `background: var(--ink-800)` و`color: var(--paper)` — وكانا على الاتجاه
   الداكن حبراً وكريميّاً يُقرآن. وبعد قلب الصفحة صار `--ink-800` **أبيضَ**
   و`--paper` كريميّاً: نصٌّ كريميٌّ على أبيض، أي زرٌّ نشطٌ لا يُرى أنه نشط.
   والحالة المختارة يجب أن تُقرأ من متر — فصارت خضراء العلامة بنصٍّ أبيض.
   والمسار الذي تجري فيه رماديٌّ فاتحٌ لا كريميّ، فالقسم لم يعد ورقيّاً. */
.lp-seg { background: var(--ink-900); border-color: var(--line); }
.lp-seg-btn { color: var(--fg-muted); }
.lp-seg-btn.is-active,
.lp-seg-btn.is-active:hover { background: var(--lp-primary); color: #FFFFFF; }
/* رقاقة «دعم 30%» خضراءُ باهتةٌ بحدٍّ — و`--sand` صار فيروزياً بعد القلب،
   فكان نصُّها البنّيّ عليه بلا تباين */
.lp-seg-tag { background: #E8F4EE; border: 1px solid #C2E0D0; color: #12613F; }
.lp-seg-btn.is-active .lp-seg-tag { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .34); color: #FFFFFF; }

/* ── تبويبات الجولة: النشط أبيضُ على أخضر ─────────────────────────────────
   نفس عطب مبدّل الباقات: `background: var(--lp-cta)` مع `color: var(--fg)`.
   كانا حبراً وفاتحاً على الاتجاه الداكن، وبعد القلب صارا **حبراً على حبر** —
   فالتبويب النشط لا يُعرف أنه نشط. */
.lp-tabs > input:nth-of-type(1):checked ~ .lp-tab-nav label:nth-of-type(1),
.lp-tabs > input:nth-of-type(2):checked ~ .lp-tab-nav label:nth-of-type(2),
.lp-tabs > input:nth-of-type(3):checked ~ .lp-tab-nav label:nth-of-type(3) {
  color: #FFFFFF;
}
.lp-tab-nav label:hover { color: var(--lp-primary); }

/* والقسم على خلفية الصفحة لا على الأبيض: قسم التطبيق قبله أبيضُ أيضاً،
   فأبيضان متجاوران بلا فاصلٍ يُقرآن قسماً واحداً طويلاً. والتناوب
   رمادي ← أبيض ← رمادي ← حبر هو إيقاع Stitch */
.lp-tour { background: var(--ink-900); border-block-start: 1px solid var(--line); }
/* شريط التبويبات يتمرّر أفقياً على الجوال ولا يدفع الصفحة (DESIGN.md) */
.lp-tab-nav { scrollbar-width: none; }
.lp-tab-nav::-webkit-scrollbar { display: none; }

@media (max-width: 620px) {
  /* اللوحات تضيق: الهاتف والبطاقة يتراصّان بدل أن يتزاحما */
  .lp-tab-panel .lp-shot { max-width: 100%; }
  .lp-tl { padding-inline-start: var(--s16); }
  .lp-tl-time { font-size: 22px; }
}