/* ═══════════════════════════════════════════════════════════════════════
   وَصل — الصفحة التعريفية الليليّة.  v1.0 · «قصّةٌ تُمرَّر لا أقسامٌ تُقرأ»

   ورقةُ الصفحة التعريفية وحدها (`theme="night"` في قالب التسويق). صفحاتُ
   الأدوات والوثائق القانونية تبقى على `marketing.css` بلا حرفٍ يتغيّر.
   والخطّة كاملةً في `docs/WASL-LANDING-MOTION-PLAN.md`.

   ── تخطيطان من هيكلٍ واحد ──

   القواعدُ الأساسية صفحةٌ مكدَّسةٌ عاديّة: هي ما يراه الهاتف، ومن لا يعمل
   عنده السكربت، ومن طلب تقليلَ الحركة. و`html.cinema` (يضعه القالبُ قبل
   أوّل رسم حين تتّسع الشاشة والحركةُ مسموحة) يقلب الهيكلَ نفسَه مشاهدَ
   مثبَّتةً يحرّكها `landing.js`. فالسقوطُ هو الأساس لا الاستثناء.

   ── لوحتان، ولكلٍّ دور ──

   `--lm-*` لوحةُ الصفحة: قريبٌ من السواد، وأحمرُ العلامة للفعل والوهج.
   و`--u-*` لوحةُ المنتج كما هي في `tokens.css` تحت `data-scheme="dark"`:
   اللقطاتُ هنا تُرسَم بألوان الشاشة التي ستُفتح بعد الشراء، لا بألوان
   الصفحة. و`--g-*` سطحُ الضيف «سُفرة». ثلاثُ لوحاتٍ لثلاثة أشياء مختلفة،
   والأحمرُ لا يدخل لقطةً ولا الكهرمانيُّ يخرج منها.

   ── واللقطاتُ بوحدة `em` من حاويتها ──

   كلُّ لقطةٍ مرسومةٌ بـ`em`، وحاويتُها (`.fit`) تعطيها حجمَ الخطّ من عرضها
   هي (`cqw`). فاللقطةُ نفسُها تملأ ٣٢٠ و١٤٤٠ بلا كسرٍ واحد، ولا رقمَ
   بكسلٍ فيها يحتاج استعلامَ وسائط.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── الصفحة ── */
  --lm-bg:        #06080C;
  --lm-bg-2:      #0A0D13;
  --lm-panel:     #0F141C;
  --lm-panel-2:   #151B25;
  --lm-line:      #1E2632;
  --lm-line-2:    #2C3745;
  --lm-ink:       #F4F6FA;   /* ١٨٫٦ على الأرضية */
  --lm-ink-2:     #BAC3D0;   /* ١١٫١ */
  --lm-ink-3:     #8D98A9;   /* ٦٫٨ — أدنى ما يُقرأ هنا */
  --lm-red:       #D91F2C;   /* تعبئةُ الفعل — الأبيضُ عليها ٥٫٠ */
  --lm-red-hover: #C01A26;
  --lm-red-hi:    #FF5C66;   /* نصٌّ وخطٌّ على الداكن — ٦٫٦ */
  --lm-white:     #FFFFFF;

  /* ── المنتج («تشغيل» الداكن — نفسُ قيم `tokens.css`) ── */
  --u-bg:         #0B0E13;
  --u-sunk:       #0D1117;
  --u-surface:    #11161D;
  --u-raised:     #18202A;
  --u-line:       #253040;
  --u-line-soft:  #1B2430;
  --u-ink:        #F2F6FA;
  --u-ink-2:      #B0BCCA;
  --u-quiet:      #8696A8;
  --u-amber:      #FFB547;
  --u-on-amber:   #1B1306;
  --u-blue:       #62C3FF;
  --u-green:      #52D69E;
  --u-coral:      #FF7272;
  --u-amber-tint: #2B2110;
  --u-blue-tint:  #0F2436;
  --u-green-tint: #0F2A21;
  --u-coral-tint: #321619;
  --u-pick:       #E9EEF4;   /* اللسانُ المختار — محايد */
  --u-on-pick:    #0B0E13;

  /* ── سطح الضيف («سُفرة» — نفسُ قيم `layl.css`) ── */
  --g-bg:         #100C0A;
  --g-raise:      #191211;
  --g-raise-2:    #241A17;
  --g-line:       #352B23;
  --g-ink:        #EDE2D4;
  --g-quiet:      #A2937F;
  --g-ember:      #F0A030;
  --g-ember-hi:   #F8B857;
  --g-on-ember:   #1B1306;

  /* ── خطّا المنتج — Changa للعناوين والرقم الواقف، Alexandria للنصّ ── */
  --font: "Alexandria", "Cairo", "Tajawal", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  --font-display: "Changa", "Alexandria", "Cairo", ui-sans-serif, system-ui, sans-serif;
  --mono: "Alexandria", "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --nav-h: 72px;
  --gut: clamp(16px, 4vw, 40px);
  --out: cubic-bezier(.16, .84, .24, 1);

  /* اتجاهُ القراءة رقمًا — للتحويلات التي لا خاصّيةَ منطقيّةً لها. */
  --dir: 1;
}

[dir="rtl"] { --dir: -1; }

html { background: var(--lm-bg); }

body {
  background: var(--lm-bg);
  color: var(--lm-ink-2);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: clip;
}

h1, h2, h3, h4 { color: var(--lm-ink); letter-spacing: 0; }

::selection { background: var(--lm-red); color: var(--lm-white); }

/* حلقةُ التركيز بأحمر الصفحة الفاتح: عنّابيُّ `--focus` لا يُرى على أرضيةٍ قريبةٍ من السواد. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline-color: var(--lm-red-hi); }

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

/* ═══════════════════ الأيقونة ══════════════════════════════════════════ */
.ic { inline-size: 18px; block-size: 18px; flex: none; }
.ic-sm { inline-size: 15px; block-size: 15px; }
.ic-lg { inline-size: 22px; block-size: 22px; }

/* ═══════════════════ الأزرار ═══════════════════════════════════════════
   ثلاثةٌ كما في بقيّة التسويق — والأحمرُ للفعل الأساسيّ وحده. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-block-size: 52px;
  padding-inline: 28px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-weight: 700; font-size: 16px;
  cursor: pointer; text-align: center;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), box-shadow .3s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--lm-red); color: var(--lm-white);
  box-shadow: 0 14px 34px -14px rgba(229, 32, 46, .8), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-primary:hover { background: var(--lm-red-hover); box-shadow: 0 18px 40px -14px rgba(229, 32, 46, .95), inset 0 1px 0 rgba(255, 255, 255, .22); }

.btn-ghost {
  background: rgba(255, 255, 255, .04); color: var(--lm-ink);
  border-color: rgba(255, 255, 255, .16);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .34); }

.btn-quiet { background: transparent; color: var(--lm-ink-2); padding-inline: 16px; }
.btn-quiet:hover { color: var(--lm-ink); background: rgba(255, 255, 255, .06); }

.btn-sm { min-block-size: 44px; padding-inline: 20px; font-size: 14.5px; border-radius: 12px; }
.btn-block { inline-size: 100%; }

/* ═══════════════════ الشريط العلوي ═════════════════════════════════════
   ثابتٌ فوق المشاهد لا لاصقٌ في التدفّق: المشهدُ الأوّل يبدأ من أعلى
   الصفحة ويثبّت كادرًا كاملًا، وشريطٌ في التدفّق يدفعه ٧٢px تحت الكادر.
   والزجاجُ هنا وحده في الصفحة كلِّها — `backdrop-filter` يُعاد حسابُه مع
   كلِّ إطار، وعشرُ بطاقاتٍ زجاجيّةٍ تتحرّك تُسقط هاتفًا متوسّطًا. */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60;
  background: rgba(6, 8, 12, .5);
  backdrop-filter: saturate(1.4) blur(18px);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  border-block-end: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.nav.is-stuck { background: rgba(6, 8, 12, .82); border-block-end-color: rgba(255, 255, 255, .08); }
.nav-in { display: flex; align-items: center; gap: 16px; block-size: var(--nav-h); }

/* خطُّ القصّة: كم قطعتَ من الصفحة. يكتبه `landing.js`. */
.nav-thread {
  position: absolute; inset-inline: 0; inset-block-end: -1px;
  block-size: 2px; pointer-events: none;
  background: linear-gradient(to left, var(--lm-red-hi), var(--lm-red));
  transform: scaleX(0); transform-origin: 0 50%;
}
[dir="rtl"] .nav-thread { transform-origin: 100% 50%; }

.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--lm-ink);
  flex: none; min-block-size: 44px;
}
.brand-mk {
  display: grid; place-items: center; overflow: hidden;
  inline-size: 40px; block-size: 40px;
  border-radius: 11px;
  background: #000000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 26px -8px rgba(229, 32, 46, .7);
}

.nav-links { display: flex; align-items: center; gap: 2px; margin-inline-start: 20px; }
.nav-links a {
  display: inline-flex; align-items: center;
  min-block-size: 44px; padding-inline: 14px;
  border-radius: 10px;
  color: var(--lm-ink-2); font-size: 15px; font-weight: 500;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav-links a:hover { color: var(--lm-ink); background: rgba(255, 255, 255, .06); }

.nav-end { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }

.sf-lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; min-inline-size: 44px; padding-inline: 12px;
  border-radius: 10px;
  color: var(--lm-ink-2); font-size: 15px; font-weight: 600;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.sf-lang:hover { color: var(--lm-ink); background: rgba(255, 255, 255, .06); }

.nav-burger {
  display: none; place-items: center;
  inline-size: 44px; block-size: 44px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px;
  background: rgba(255, 255, 255, .04); color: var(--lm-ink);
  cursor: pointer;
}

.nav-scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0, 0, 0, .62);
  opacity: 0; transition: opacity .22s var(--ease);
}
.nav-scrim.is-on { opacity: 1; }

/* `[hidden]` يُعاد إعلانه: `display` المصرَّح يغلب ورقةَ المتصفّح، فدرجٌ
   `flex` يبقى مرئيًّا وهو يحمل `hidden`. */
.nav-drawer[hidden], .nav-scrim[hidden], .pd[hidden], .pd-panel[hidden] { display: none; }

.nav-drawer {
  position: fixed; z-index: 80;
  inset-block: 0; inset-inline-start: 0;
  inline-size: min(340px, 88vw);
  background: var(--lm-bg-2);
  border-inline-end: 1px solid var(--lm-line);
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto;
  transform: translateX(calc(var(--dir) * -100%));
  transition: transform .26s var(--ease);
}
.nav-drawer.is-on { transform: none; }
.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 16px; }
.nav-close {
  display: grid; place-items: center;
  inline-size: 44px; block-size: 44px;
  border: 1px solid var(--lm-line-2); border-radius: 12px;
  background: transparent; color: var(--lm-ink-2); cursor: pointer;
}
.nav-drawer nav { display: grid; gap: 2px; }
.nav-drawer nav a {
  display: flex; align-items: center;
  min-block-size: 48px; padding-inline: 12px;
  border-radius: 10px;
  color: var(--lm-ink); font-weight: 600; font-size: 16px;
}
.nav-drawer nav a:hover { background: rgba(255, 255, 255, .06); }
.nav-drawer .btn { inline-size: 100%; }
.nav-drawer-foot { margin-block-start: auto; display: grid; gap: 12px; padding-block-start: 24px; justify-items: stretch; }

.is-locked { overflow: hidden; }

/* ═══════════════════ هيكلُ المشهد ══════════════════════════════════════
   `.sc` قسمٌ في التدفّق. وفي السينما يصير مسارًا طولُه `--len` كوادر،
   و`.sc-pin` كادرًا لاصقًا داخله — التثبيتُ من المتصفّح لا من سكربت،
   فلا ينفصل عن شريط التمرير ولا يُخطَف التمرير. */
.sc { position: relative; padding-block: clamp(72px, 11vw, 132px); }
/* طولُ كلِّ مشهدٍ بالكوادر حين يُثبَّت — كادرٌ من التمرير لكلِّ نبضة تقريبًا. */
.sc-open { --len: 5; } .sc-jr { --len: 5.2; } .sc-ops { --len: 3.4; }
.sc-an { --len: 3; }    .sc-ig { --len: 2.6; } .sc-br { --len: 3; }
/* الكادرُ بلا موضعٍ خارج السينما: خلفيّةُ المشهد ووهجُه يُقاسان على القسم كلِّه،
   لا على صندوقٍ أضيقَ منه يقصّهما بحافّةٍ حادّة. */

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--lm-red-hi);
  font-weight: 600; font-size: 14px;
}
.eyebrow::before {
  content: ""; inline-size: 26px; block-size: 2px; border-radius: 2px;
  background: var(--lm-red);
}

.h-scene {
  font-size: clamp(30px, 4.3vw, 58px);
  font-weight: 700;
  line-height: 1.22;
  margin-block: 14px 16px;
  text-wrap: balance;
}
.h-scene .accent, .h-display .accent { color: var(--lm-red-hi); }
/* السطرُ الأحمر مصدرُ ضوءٍ فوق الصورة لا لونٌ عليها. */
.h-display .accent { text-shadow: 0 0 .55em rgba(229, 32, 46, .55); }
.sc-lede { color: var(--lm-ink-2); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.9; max-inline-size: 56ch; }

.sc-head { text-align: center; display: grid; justify-items: center; }
.sc-head .sc-lede { margin-inline: auto; }


/* ── الأرضيّةُ المصوَّرة ──
   صورةٌ حقيقيّة بملء المشهد، وفوقها ظلٌّ يحفظ للنصّ تباينَه وضوءٌ أحمر يربطها
   بالعلامة. الصورةُ مدرَّجةٌ في ملفّها (أغمق وأبرد) فلا `filter` هنا: صورةٌ بملء
   الشاشة تتحرّك مع التمرير تُركَّب كلَّ إطار، والمرشِّحُ عليها يُعاد حسابُه معها.
   والحبرُ فوقها `--lm-ink` دائمًا — الظلُّ هو ما يضمن له أرضيّتَه. */
.plate { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.plate img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.plate-shade { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.motion:not(.cinema) .plate img { animation: lm-kenburns 26s ease-in-out infinite alternate; }
@keyframes lm-kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }
/* الجمر: لوحةٌ يرسم عليها `landing.js`. بلا سكربت أو مع تقليل الحركة تبقى فارغة. */
.embers { position: absolute; inset: 0; z-index: 1; inline-size: 100%; block-size: 100%; pointer-events: none; }
/* صورُ المشهد. في التخطيط المكدَّس: شريطٌ في رأس القسم يذوب في أرضيّة الصفحة وعنوانُ
   القسم فوقه — وأولى صوره وحدها (الباقيةُ `display: none` فلا تُحمَّل: هي `lazy`).
   وفي السينما: بملء الكادر المثبَّت، تذوب إحداها في التالية، وظلُّها أغمقُ جهةَ النصّ
   وأخفُّ جهةَ اللقطة. و`z-index: -1` داخل سياق تراصٍّ (القسمُ معزول، والكادرُ اللاصق
   سياقٌ بنفسه): الصورُ فوق الخلفيّة وتحت كلِّ ما في المشهد، بلا موضعٍ يُفرَض على إخوتها. */
.sc { isolation: isolate; }
.sc-plates {
  position: absolute; inset: 0 0 auto 0; z-index: -1;
  block-size: min(86svh, 720px); overflow: hidden; pointer-events: none;
  mask-image: linear-gradient(#000 36%, transparent);
  -webkit-mask-image: linear-gradient(#000 36%, transparent);
}
.sc-plates .plate:nth-child(n+2) { display: none; }
.sc-plates .plate-shade { background: linear-gradient(180deg, rgba(6, 8, 12, .8) 0%, rgba(6, 8, 12, .58) 46%, rgba(6, 8, 12, .7) 100%); }
.cinema .sc-plates { inset: 0; block-size: auto; mask-image: none; -webkit-mask-image: none; }
.cinema .sc-plates .plate:nth-child(n+2) { display: block; }
/* الصورةُ التي تقترب وتذوب مع التمرير طبقةٌ مركَّبة: تحويلُها عملُ المركِّب لا إعادةُ رسم.
   وللمشهد القريب وحده — ثماني طبقاتٍ بملء الشاشة دفعةً واحدة ذاكرةٌ بلا مقابل.
   (والتبديلُ هنا مأمون: الصورةُ ورقةٌ لا لقطاتٍ تحتها يُعاد تخطيطُها.) */
.cinema .sc.is-near .plate { will-change: transform, opacity; }
.cinema .sc-plates .plate-shade {
  background:
    linear-gradient(180deg, rgba(6, 8, 12, .92) 0%, rgba(6, 8, 12, .5) 30%, rgba(6, 8, 12, .06) 58%, rgba(6, 8, 12, .55) 100%),
    linear-gradient(270deg, rgba(6, 8, 12, .88) 0%, rgba(6, 8, 12, .66) 34%, rgba(6, 8, 12, .16) 70%, rgba(6, 8, 12, .36) 100%);
}
[dir="ltr"].cinema .sc-plates .plate-shade {
  background:
    linear-gradient(180deg, rgba(6, 8, 12, .92) 0%, rgba(6, 8, 12, .5) 30%, rgba(6, 8, 12, .06) 58%, rgba(6, 8, 12, .55) 100%),
    linear-gradient(90deg, rgba(6, 8, 12, .88) 0%, rgba(6, 8, 12, .66) 34%, rgba(6, 8, 12, .16) 70%, rgba(6, 8, 12, .36) 100%);
}

.skip-link {
  position: absolute; inset-block-start: -80px; inset-inline-start: var(--gut);
  z-index: 100;
  padding: 12px 24px;
  background: var(--lm-red); color: var(--lm-white);
  border-radius: 0 0 12px 12px; font-weight: 700;
  transition: inset-block-start .15s var(--ease);
}
.skip-link:focus { inset-block-start: 0; }

/* ═══════════════════ عُدّة اللقطات ═════════════════════════════════════
   `.fit` حاويةٌ تقيس نفسَها، و`.ui` بداخلها تأخذ حجمَ الخطّ من عرض الحاوية
   مقسومًا على عرض التصميم (`--cols` بـ`em`). وكلُّ ما بداخل `.ui` بـ`em`. */
.fit { container-type: inline-size; inline-size: 100%; }
/* **شارةُ «بيانات توضيحية» على كلِّ نموذج** (جولة الاستخدام الثانية ٢٠٢٦-١٠-٠٤): الأرقامُ على شاشات المنتج هنا مثال.
   والشارةُ بحجمٍ ثابت لا بـ`em` النموذج — النموذجُ يصغر على الهاتف حتى يصير خطُّه خمسةَ بكسل، والشارةُ تُقرأ.
   و`.fit` حاويةُ استعلامٍ فهي حاويةٌ للمطلق أصلًا (احتواءُ التخطيط) — لا موضعَ يُضاف ولا لقطةَ تتحرّك. */
/* الرمزُ معرَّفٌ هنا فارغًا كي لا يكون مستعمَلًا بلا تعريف — ونصُّه المترجَمُ في رأس الصفحة بعد هذه الورقة يغلبه. */
:root { --demo-tag: ""; }
.fit:has(> .ui)::after {
  content: var(--demo-tag);
  /* على حافّة الإطار العليا لا داخله: داخله كانت تغطّي لسانًا في شريط الكاشير. */
  position: absolute; inset-block-start: 0; inset-inline-end: 18px; translate: 0 -50%; z-index: 7;
  padding: 3px 9px; border-radius: 99px;
  background: rgba(6, 8, 12, .82); border: 1px solid rgba(255, 255, 255, .22);
  color: #F2F4F7; font: 700 11px/1.5 var(--font); letter-spacing: .01em;
  pointer-events: none;
}
.ui {
  --cols: 56;
  font-size: calc(100cqw / var(--cols));
  font-family: var(--font);
  color: var(--u-ink-2);
  line-height: 1.5;
  text-align: start;
}
.ui b, .ui strong { font-weight: 600; color: var(--u-ink); }
.ui .ic { inline-size: 1.15em; block-size: 1.15em; }
.ui .num, .ui .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ui img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.win {
  background: var(--u-bg);
  border: 1px solid var(--u-line);
  border-radius: 1.1em;
  overflow: hidden;
  box-shadow: 0 2.4em 5em -2em rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .03) inset;
}

/* شارةُ الحالة — الكلمةُ دائمًا مع اللون، لا لونٌ وحده. */
.pl {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .2em .7em; border-radius: 99em;
  font-size: .78em; font-weight: 600; white-space: nowrap;
  background: var(--u-raised); color: var(--u-ink-2);
}
.pl--blue  { background: var(--u-blue-tint);  color: var(--u-blue); }
.pl--amber { background: var(--u-amber-tint); color: var(--u-amber); }
.pl--green { background: var(--u-green-tint); color: var(--u-green); }
.pl--coral { background: var(--u-coral-tint); color: var(--u-coral); }
.pl--live::before { content: ""; inline-size: .5em; block-size: .5em; border-radius: 50%; background: var(--u-green); }

.thumb { display: block; flex: none; inline-size: 3em; block-size: 3em; border-radius: .6em; overflow: hidden; background: var(--u-raised); }

/* ── بطاقةُ مؤشّر ── */
.kp {
  background: var(--u-surface); border: 1px solid var(--u-line);
  border-radius: 1em; padding: 1em 1.1em;
  display: grid; gap: .25em; align-content: start; min-inline-size: 0;
}
.kp > span { display: flex; align-items: center; justify-content: space-between; gap: .5em; font-size: .82em; color: var(--u-ink-2); }
.kp > span i {
  display: grid; place-items: center; inline-size: 2.1em; block-size: 2.1em; border-radius: .6em;
  background: var(--u-blue-tint); color: var(--u-blue); font-style: normal;
}
.kp > b { font-family: var(--font-display); font-size: 1.9em; font-weight: 700; color: var(--u-ink); line-height: 1.15; }
.kp > b small { font-family: var(--font); font-size: .42em; font-weight: 500; color: var(--u-quiet); margin-inline-start: .3em; }
.kp > em { font-style: normal; font-size: .74em; color: var(--u-quiet); display: flex; gap: .5em; align-items: center; }
.kp .up { color: var(--u-green); }
.kp .dn { color: var(--u-coral); }
.kp--lead { border-color: rgba(255, 181, 71, .5); }

/* ── النافذة: شريطُ عنوانها ── */
.win-bar {
  display: flex; align-items: center; gap: .9em;
  padding: .85em 1.2em;
  border-block-end: 1px solid var(--u-line-soft);
}
.win-bar > b { font-family: var(--font-display); font-size: 1.15em; font-weight: 700; }
.win-bar > small { font-size: .78em; color: var(--u-quiet); }
.win-bar > .pl { margin-inline-start: auto; }

/* ═══════════════════ نقطة البيع ════════════════════════════════════════
   تشريحُ `/staff/register`: شريطٌ علويّ، ألسنةُ النوع، بحث، ألسنةُ الأقسام،
   بطاقاتُ أصنافٍ بصورها، وسلّةٌ على الطرف بزرّ دفعٍ كهرمانيّ. */
.pos { --cols: 56; inline-size: 56em; display: grid; grid-template-rows: auto 1fr; }
.pos-top {
  display: flex; align-items: center; gap: 1.4em;
  padding: .8em 1.4em; border-block-end: 1px solid var(--u-line-soft);
}
.pos-user { display: flex; align-items: center; gap: .7em; }
.pos-user i {
  display: grid; place-items: center; inline-size: 2.5em; block-size: 2.5em; border-radius: 50%;
  background: var(--u-amber); color: var(--u-on-amber); font-style: normal;
}
.pos-user b { display: block; font-size: .92em; }
.pos-user small { display: block; font-size: .74em; color: var(--u-quiet); }
.pos-menu { margin-inline-start: auto; display: flex; gap: 1.6em; font-size: .84em; font-weight: 500; }
.pos-menu span { display: inline-flex; align-items: center; gap: .45em; }

.pos-body { display: grid; grid-template-columns: minmax(0, 1fr) 17.5em; }
.pos-main { padding: 1.1em 1.4em 1.4em; display: grid; gap: .85em; align-content: start; min-inline-size: 0; }

.seg { display: flex; gap: .35em; font-size: .86em; font-weight: 600; }
.seg span { padding: .6em 1.05em; border-radius: .65em; color: var(--u-ink-2); white-space: nowrap; }
.seg span.on { background: var(--u-pick); color: var(--u-on-pick); }

.pos-search {
  display: flex; align-items: center; gap: .7em;
  block-size: 3em; padding-inline: 1em;
  border: 1px solid var(--u-line); border-radius: .7em;
  background: var(--u-sunk); color: var(--u-quiet); font-size: .86em;
}

.pos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65em; }
.pos-card {
  display: flex; align-items: center; gap: .65em;
  padding: .55em; min-inline-size: 0;
  border: 1px solid var(--u-line-soft); border-radius: .85em;
  background: var(--u-surface);
  position: relative;
}
.pos-card b { display: block; font-size: .84em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-card small { display: block; font-size: .76em; color: var(--u-quiet); }
.pos-card > span:last-child { min-inline-size: 0; }
.pos-card .thumb { inline-size: 3.1em; block-size: 3.1em; }

.pos-cart {
  border-inline-start: 1px solid var(--u-line-soft);
  padding: 1.1em 1.2em 1.2em;
  display: grid; grid-template-rows: auto 1fr auto; gap: .8em;
}
.pos-cart-head { display: flex; align-items: center; justify-content: space-between; font-size: .86em; color: var(--u-ink-2); }
.pos-cart-head i {
  display: grid; place-items: center; min-inline-size: 1.7em; block-size: 1.7em; border-radius: 99em;
  background: var(--u-amber); color: var(--u-on-amber); font-style: normal; font-weight: 700; font-size: .92em;
}
.cart-lines { display: grid; align-content: start; }
.cart-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2em .8em;
  padding-block: .6em; border-block-end: 1px dashed var(--u-line);
  font-size: .82em;
}
.cart-line b { font-weight: 500; }
.cart-line small { grid-column: 1; color: var(--u-quiet); font-size: .9em; }
.cart-line span { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--u-ink); font-weight: 600; }

.cart-total {
  background: var(--u-raised); border: 1px solid var(--u-line);
  border-radius: 1em; padding: .9em; display: grid; gap: .75em;
}
.cart-total > div { display: flex; align-items: baseline; justify-content: space-between; font-size: .84em; }
.cart-total > div b { font-family: var(--font-display); font-size: 1.7em; font-weight: 700; }
.cart-pay {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  block-size: 3.1em; border-radius: .75em;
  background: var(--u-amber); color: var(--u-on-amber);
  font-weight: 700; font-size: .98em;
}

/* ═══════════════════ بطاقةُ الطلب المسافرة ═════════════════════════════
   طلبٌ واحد — `#2749 · طاولة ١٢` — يعبر خمسَ شاشات. وشارتُه تقول أين هو
   الآن: الكلمةُ تتغيّر مع اللون، والحالةُ من `data-ph` على البطاقة. */
.tok {
  inline-size: 20em; block-size: 5.2em;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9em;
  padding-inline: 1em;
  background: linear-gradient(180deg, #1D2632, #161D27);
  border: 1px solid #3A4759;
  border-radius: 1em;
  box-shadow: 0 1.2em 2.6em -1em rgba(0, 0, 0, .9);
  color: var(--u-ink-2);
}
.tok > i {
  display: grid; place-items: center; inline-size: 2.6em; block-size: 2.6em; border-radius: .75em;
  background: var(--u-blue-tint); color: var(--u-blue); font-style: normal;
}
.tok b { display: block; font-size: 1em; color: var(--u-ink); white-space: nowrap; }
.tok small { display: block; font-size: .8em; color: var(--u-quiet); white-space: nowrap; }
.tok-st { display: grid; justify-items: end; }
.tok-st .pl { grid-area: 1 / 1; opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease); transform: translateY(.4em); }
.tok[data-ph="cart"] .st-cart, .tok[data-ph="new"] .st-new, .tok[data-ph="ok"] .st-ok,
.tok[data-ph="queue"] .st-queue, .tok[data-ph="cook"] .st-cook, .tok[data-ph="ready"] .st-ready,
.tok[data-ph="paid"] .st-paid, .tok[data-ph="done"] .st-paid { opacity: 1; transform: none; }

/* الخانةُ التي ترسو فيها البطاقة — بنسبتها نفسِها، فيطابقها التحجيمُ تمامًا. */
.slot {
  container-type: inline-size;
  aspect-ratio: 20 / 5.2;
  border-radius: 1em;
  position: relative;
}
.slot > .tok { font-size: calc(100cqw / 20); }

/* ═══════════════════ المشهد ١ · الافتتاح ═══════════════════════════════
   البطل ← المنظومة ← الموصول، في كادرٍ واحد: نافذةُ نقطة البيع نفسُها
   تسافر من جانب العنوان إلى قلب المنظومة. مشهدٌ يتحوّل لا قسمٌ يعقبه قسم. */
.sc-open { padding-block-start: calc(var(--nav-h) + clamp(28px, 6vw, 64px)); overflow: clip; }

.open-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* في التخطيط المكدَّس القسمُ طويل (بطلٌ ثم منظومة)، فالصورةُ لأوّل شاشةٍ منه وتذوب
   في أرضيّة الصفحة. وفي السينما الكادرُ كلُّه. */
.open-bg .plate, .open-bg .plate-shade, .open-bg .embers { inset-block-end: auto; block-size: min(112svh, 1040px); }
.open-bg .plate {
  mask-image: linear-gradient(#000 62%, transparent);
  -webkit-mask-image: linear-gradient(#000 62%, transparent);
}
.open-bg .plate-shade {
  background:
    radial-gradient(72% 52% at 50% 96%, rgba(229, 32, 46, .36), rgba(229, 32, 46, .08) 58%, transparent 74%),
    linear-gradient(180deg, rgba(6, 8, 12, .9) 0%, rgba(6, 8, 12, .74) 30%, rgba(6, 8, 12, .5) 58%, rgba(6, 8, 12, .2) 80%, transparent 100%);
}
.cinema .open-bg .plate, .cinema .open-bg .plate-shade, .cinema .open-bg .embers { block-size: 100%; }
.cinema .open-bg .plate { mask-image: none; -webkit-mask-image: none; }
.cinema .open-bg .plate-shade {
  background:
    radial-gradient(62% 40% at 50% 108%, rgba(229, 32, 46, .5), rgba(229, 32, 46, .12) 56%, transparent 74%),
    linear-gradient(180deg, rgba(6, 8, 12, .86) 0%, rgba(6, 8, 12, .7) 38%, rgba(6, 8, 12, .5) 64%, rgba(6, 8, 12, .66) 100%);
}

.open-wrap { position: relative; z-index: 3; }
.open-copy { max-inline-size: 640px; }

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 14px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 99px;
  background: rgba(255, 255, 255, .04);
  font-size: 13.5px; color: var(--lm-ink-2);
}
.pill b { color: var(--lm-ink); font-weight: 600; }
.pill i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--lm-red-hi); box-shadow: 0 0 0 4px rgba(229, 32, 46, .24); flex: none; }

.h-display {
  font-size: clamp(38px, 5.1vw, 76px);
  font-weight: 800;
  line-height: 1.18;
  margin-block: 22px 20px;
}
/* كلُّ سطرٍ في قناعه: يصعد منه عند الدخول. والحشوةُ تحفظ نقاطَ الحروف
   وذيولَها من القصّ، والهامشُ السالبُ يردّ ما أخذته. */
.ln { display: block; overflow: hidden; padding-block: .1em .22em; margin-block: -.1em -.22em; }
.ln-in { display: block; }

.open-copy .lede { font-size: clamp(16px, 1.4vw, 19.5px); line-height: 1.95; max-inline-size: 50ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-block: 30px 22px; }
.assure { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; font-weight: 500; color: var(--lm-ink-3); }
.assure span { display: inline-flex; align-items: center; gap: 8px; }
.assure .ic { color: var(--lm-red-hi); }

/* ── المنصّة: نافذةُ نقطة البيع وأقمارُها ── */
.open-stage {
  position: relative; z-index: 2;
  inline-size: min(100% - 2 * var(--gut), 900px);
  margin: clamp(56px, 9vw, 84px) auto 0;
}
.hub-fly, .stage-tilt, .px, .tilt-in { display: block; }
.stage-halo {
  position: absolute; inset: -34% -24%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(229, 32, 46, .52), rgba(229, 32, 46, .16) 52%, transparent 76%);
}
/* لمعةُ الزجاج وحافّةُ الضوء: النافذةُ جسمٌ في مكانٍ مُضاء لا مستطيلٌ على أسود. */
.tilt-in { position: relative; }
.open-stage .win { box-shadow: 0 -1px 0 rgba(255, 138, 146, .55), 0 -2.2em 6em -2.6em rgba(229, 32, 46, .95), 0 3.6em 7em -2.4em #000000; }
.tilt-in::after {
  content: ""; position: absolute; inset: 0; border-radius: 1.3em; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 30%);
}

.sat { position: absolute; z-index: 3; font-size: clamp(11px, 1.04vw, 15.5px); }
.sat-in {
  display: block;
  background: linear-gradient(180deg, #1D2632, #141A23);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 1.15em;
  padding: .95em 1.1em;
  box-shadow: 0 1.8em 3.8em -1.5em rgba(0, 0, 0, .95);
  color: var(--u-ink-2);
  white-space: nowrap;
}
.sat-in b { color: var(--u-ink); font-weight: 600; }
.sat-in small { color: var(--u-quiet); font-size: .82em; }
.sat-in .ic { inline-size: 1.2em; block-size: 1.2em; }

.sat-notify { inset-block-start: -7%; inset-inline-start: 4%; }
.sat-notify .sat-in { display: flex; align-items: center; gap: .85em; padding-inline-end: 1.4em; }
.sat-notify i {
  position: relative; display: grid; place-items: center;
  inline-size: 2.7em; block-size: 2.7em; border-radius: .8em;
  background: rgba(229, 32, 46, .18); color: var(--lm-red-hi); font-style: normal; flex: none;
}
.sat-notify i::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--lm-red-hi); opacity: 0;
}
.sat-notify b, .sat-notify small { display: block; }

.sat-sales { inset-block-end: -9%; inset-inline-end: 3%; }
.sat-sales .sat-in { display: grid; gap: .3em; min-inline-size: 13.5em; }
.sat-sales span { display: flex; align-items: center; justify-content: space-between; gap: 1em; font-size: .86em; }
.sat-sales strong { font-family: var(--font-display); font-size: 2em; font-weight: 700; color: var(--u-ink); line-height: 1.1; }
.sat-sales strong small { font-family: var(--font); font-size: .4em; font-weight: 500; margin-inline-start: .35em; }
.sat-sales svg { inline-size: 100%; block-size: 2.4em; margin-block-start: .2em; }

.sat-orders, .sat-bill { display: none; }
.sat-orders .sat-in { display: grid; gap: .55em; min-inline-size: 15em; }
.sat-orders .sat-in > span { font-size: .84em; display: flex; justify-content: space-between; align-items: center; }
.sat-row { display: flex; align-items: center; justify-content: space-between; gap: 1.2em; font-size: .88em; padding-block-start: .55em; border-block-start: 1px solid rgba(255, 255, 255, .08); }

.sat-bill .sat-in { display: grid; gap: .45em; min-inline-size: 12.5em; padding-block-end: 1.1em; }
.sat-bill .sat-in > span { display: flex; justify-content: space-between; gap: 1.4em; font-size: .84em; }
.sat-bill .sat-in > span.sum { padding-block-start: .55em; border-block-start: 1px dashed rgba(255, 255, 255, .2); color: var(--u-ink); font-weight: 600; font-size: .95em; }


/* ── المنظومة ── */
.eco { position: relative; z-index: 1; margin-block-start: clamp(88px, 13vw, 140px); }
.eco-head { display: grid; gap: clamp(36px, 6vw, 56px); }
.eco-beat { text-align: center; display: grid; justify-items: center; }
.eco-beat .sc-lede { margin-inline: auto; }

.omap {
  position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin-block-start: 28px;
}
.omap-lines { display: none; }
.eco-hub {
  grid-column: 1 / -1; justify-self: center;
  display: grid; place-items: center;
  inline-size: 84px; block-size: 84px; border-radius: 24px;
  background: #000000; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 64px -6px rgba(229, 32, 46, .75);
  margin-block-end: 12px;
}
.node {
  --x: 600; --y: 320;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--lm-panel-2), var(--lm-panel));
  border: 1px solid var(--lm-line-2);
  border-radius: 16px;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.node i {
  grid-row: 1 / 3; display: grid; place-items: center;
  inline-size: 42px; block-size: 42px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); color: var(--lm-ink); font-style: normal;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.node b { color: var(--lm-ink); font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.node small { color: var(--lm-ink-3); font-size: 13px; line-height: 1.5; }
.node.is-lit { border-color: rgba(255, 92, 102, .7); box-shadow: 0 0 0 1px rgba(255, 92, 102, .25), 0 18px 44px -20px rgba(229, 32, 46, .9); }
.node.is-lit i { background: var(--lm-red); color: var(--lm-white); }

/* السلسلة — للتخطيط المكدَّس وحده. في السينما تقولها الخريطةُ نفسُها. */
.eco-chain {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 6px;
  margin-block-start: 28px;
  font-size: 14px; font-weight: 600; color: var(--lm-ink);
}
.eco-chain span { padding: 8px 14px; border-radius: 99px; border: 1px solid var(--lm-line-2); background: var(--lm-panel); }
.eco-chain span.core { background: var(--lm-red); border-color: var(--lm-red); color: var(--lm-white); }
.eco-chain .ic { color: var(--lm-red-hi); }

/* **عمودٌ واحد على الهاتف الضيّق** (جولة الاستخدام الثانية ٢٠٢٦-١٠-٠٤): عمودان على ٣٢٠ يتركان لاسم العقدة ٦٦ بكسل،
   و«المدفوعات» و«الدفع الإلكتروني» كلمتان لا تنكسران — فتفيضان فوق جارهما. */
@media (max-width: 419.98px) {
  .omap { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 700px) {
  .omap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .open-stage { margin-block-start: clamp(64px, 8vw, 96px); }
  .sat-notify { inset-inline-start: -2%; }
  .sat-sales { inset-inline-end: -2%; }
}

/* شاشةٌ عريضة بلا سينما (طُلب تقليلُ الحركة، أو لم يعمل السكربت): البطلُ عمودان
   ساكنان — لا عنوانٌ فوق نافذةٍ تحته بعرض الهاتف. */
@media (min-width: 1024px) {
  html:not(.cinema) .sc-open > .sc-pin {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; column-gap: 4vw;
    inline-size: min(1240px, 100% - 2 * var(--gut)); margin-inline: auto;
  }
  html:not(.cinema) .sc-open .open-wrap, html:not(.cinema) .sc-open .open-stage { inline-size: auto; margin: 0; }
  html:not(.cinema) .sc-open .eco { grid-column: 1 / -1; }
  html:not(.cinema) .h-display { font-size: clamp(38px, 4vw, 60px); }
}

/* ── السينما ── */
.cinema .sc--pin { padding: 0; block-size: calc(var(--len) * 100vh); block-size: calc(var(--len) * 100svh); overflow: visible; }
.cinema .sc--pin > .sc-pin {
  position: sticky; inset-block-start: 0;
  block-size: 100vh; block-size: 100svh;
  overflow: hidden;
}

/* البطل: العنوانُ في وسط الكادر بأكبر ما يحتمله، والنافذةُ تحته تطلّ من الحافّة
   مائلةً ثم تصعد. والمقاسُ بالعرض **والارتفاع** معًا (`min(vw, vh)`): شاشةٌ عريضةٌ
   قصيرة لا تعطي عنوانًا يأكل الكادرَ كلَّه. */
.cinema .open-wrap {
  position: absolute; inset: var(--nav-h) 0 0 0; margin: 0 auto;
  display: grid; justify-items: center; align-content: start;
  padding-block-start: clamp(14px, 4.6vh, 56px);
  pointer-events: none; text-align: center;
}
.cinema .open-copy { max-inline-size: min(1120px, 96%); display: grid; justify-items: center; pointer-events: auto; }
.cinema .h-display {
  font-size: clamp(40px, min(6.7vw, 11.4vh), 116px);
  line-height: 1.12; margin-block: clamp(8px, 2vh, 22px) clamp(6px, 1.6vh, 18px);
  text-shadow: 0 2px 40px rgba(6, 8, 12, .6);
}
.cinema .open-copy .lede { font-size: clamp(15px, min(1.32vw, 2.25vh), 20.5px); line-height: 1.85; max-inline-size: 60ch; }
.cinema .cta-row { justify-content: center; margin-block: clamp(12px, 2.6vh, 28px) clamp(8px, 1.8vh, 18px); }
.cinema .assure { justify-content: center; }

/* صندوقُ المنصّة موضعُ **العرض**: وسطَ الكادر وبعرضه تقريبًا. والبدايةُ (تحت الحافّة،
   مائلةً) تحويلٌ على `stage-tilt` يكتبه المحرّك — والسطرُ هنا حالتُه عند تقدّمٍ صفر
   كي لا تقفز النافذةُ حين يقوم. والإزاحةُ نسبةٌ من ارتفاع النافذة نفسِها لا من الشاشة:
   النافذةُ تصغر في الكادر الضيّق، وإزاحةٌ بـ`vh` كانت تُنزلها تحت الحافّة كلَّها
   على ١٠٢٤×٧٦٨. */
.cinema .open-stage {
  position: absolute; margin: 0;
  inset-inline-start: 50%; inset-block-start: calc(50% + var(--nav-h) / 2);
  inline-size: min(1240px, 84vw, calc((100svh - var(--nav-h) - 64px) * 1.9));
  translate: calc(var(--dir) * -50%) -50%;
}
.cinema .hub-fly { perspective: 1700px; transform-origin: 0 0; }
.cinema .stage-tilt, .cinema .px { transform-style: preserve-3d; }
.cinema .stage-tilt { transform: translate3d(0, 75%, 0) rotateX(26deg) scale(1.06); }

.cinema .sat-orders, .cinema .sat-bill { display: block; }
.cinema .sat-notify { inset-block-start: 41%; inset-inline-start: -4%; }
.cinema .sat-sales { inset-block-start: 36%; inset-block-end: auto; inset-inline-end: -4%; }
.cinema .sat-orders { inset-block-start: 68%; inset-block-end: auto; inset-inline-start: auto; inset-inline-end: 3%; }
.cinema .sat-bill { inset-block-start: 71%; inset-block-end: auto; inset-inline-end: auto; inset-inline-start: 4%; }
/* تحت ١٢٤٠ العنوانُ يأخذ العرضَ كلَّه، فالبطاقتان العلويّتان تزاحمانه. */
@media (max-width: 1239px) { .cinema .sat-notify, .cinema .sat-sales { display: none; } }

.cinema .eco {
  position: absolute; inset: var(--nav-h) 0 0 0; margin: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; align-content: center;
  gap: 1.5vh; padding-block: 2.5vh 4vh;
  pointer-events: none;
}
.cinema .eco-head { display: grid; gap: 0; }
.cinema .eco-beat { grid-area: 1 / 1; }
.cinema .eco-beat .h-scene { font-size: clamp(28px, min(4.1vw, 6.8vh), 62px); margin-block: 8px 6px; }
.cinema .eco-beat .sc-lede { font-size: clamp(14px, min(1.25vw, 2.1vh), 19px); line-height: 1.75; max-inline-size: 62ch; }
.cinema .eco-chain { display: none; }

.cinema .omap {
  display: block; margin: 0;
  inline-size: min(1240px, 94vw, calc((100svh - var(--nav-h) - 236px) * 1.875));
  aspect-ratio: 1200 / 640;
  container-type: inline-size;
}
.cinema .omap-lines { display: block; position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
[dir="rtl"] .omap-lines { transform: scaleX(-1); }
.omap-lines .spoke { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; }
.omap-lines .comet { fill: none; stroke: var(--lm-red-hi); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: .16 1; stroke-dashoffset: .16; }
.omap-lines .orbit { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 1; stroke-dasharray: 3 9; }

.cinema .eco-hub {
  position: absolute; margin: 0;
  inset-inline-start: 50%; inset-block-start: 53%;
  inline-size: 38%; block-size: auto; aspect-ratio: 56 / 35.5;
  translate: calc(var(--dir) * -50%) -50%;
  background: none; box-shadow: none; border-radius: 0; overflow: visible;
}
.cinema .eco-hub img { display: none; }
.cinema .node {
  position: absolute;
  inset-inline-start: calc(var(--x) / 12 * 1%); inset-block-start: calc(var(--y) / 6.4 * 1%);
  translate: calc(var(--dir) * -50%) -50%;
  inline-size: max-content; max-inline-size: 17em;
  font-size: clamp(12px, 1.38cqw, 17px);
  padding: .8em 1em; gap: .1em .8em; border-radius: 1.05em;
  background: linear-gradient(180deg, rgba(28, 36, 48, .94), rgba(16, 21, 30, .94));
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 1.4em 3em -1.4em #000000, inset 0 1px 0 rgba(255, 255, 255, .07);
}
.cinema .node i { inline-size: 2.7em; block-size: 2.7em; border-radius: .8em; }
.cinema .node b { font-size: 1.06em; }
.cinema .node small { font-size: .86em; }

/* ═══════════════════ المشهد ٢ · رحلة الطلب ═════════════════════════════
   خمسُ شاشاتٍ حقيقيّة على شريطٍ واحد، وطلبٌ واحد يُحمَل بينها. في السينما
   الشريطُ أفقيٌّ داخل كادرٍ مثبَّت والبطاقةُ تطير من خانةٍ إلى خانة. وفي
   التخطيط المكدَّس كلُّ شاشةٍ تحمل نسختَها من البطاقة بحالتها هي. */
.sc-jr { overflow: clip; }

.jr-steps { display: none; margin: 0; padding: 0; list-style: none; }

.jr-film {
  position: relative;
  display: grid; gap: clamp(64px, 10vw, 104px);
  margin-block-start: clamp(44px, 7vw, 80px);
}
.jr-panel { display: grid; gap: 28px; justify-items: center; min-inline-size: 0; }
.jr-cap { text-align: center; max-inline-size: 540px; padding-inline: var(--gut); }
.jr-n {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--lm-red-hi);
}
.jr-n::after { content: ""; inline-size: 34px; block-size: 1px; background: rgba(255, 92, 102, .5); }
.jr-cap h3 { font-size: clamp(23px, 2.7vw, 36px); font-weight: 700; margin-block: 8px 10px; line-height: 1.3; }
.jr-cap p { color: var(--lm-ink-2); font-size: 16px; line-height: 1.85; }

.jr-dev {
  --dev-w: 720px; --ar: 1.6;
  inline-size: min(100% - 2 * var(--gut), var(--dev-w));
  display: grid; justify-items: center; align-items: center; gap: 20px;
  position: relative; min-inline-size: 0;
}
.tok--fly { display: none; }

/* ── الهاتف: منيو الضيف «سُفرة» ── */
.jr-dev--phone { --dev-w: 520px; grid-template-columns: auto minmax(0, 300px); justify-content: center; gap: clamp(16px, 4vw, 40px); }
.qr-card {
  display: grid; gap: 10px; justify-items: center; text-align: center;
  padding: 20px 18px;
  background: var(--lm-white); color: #14181F;
  border-radius: 20px;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .9);
}
.qr-card svg { inline-size: 92px; block-size: 92px; }
.qr-card b { display: block; font-size: 15px; font-weight: 700; color: #14181F; }
.qr-card small { display: block; font-size: 12.5px; color: #4A5464; }

.phone {
  --cols: 22; inline-size: 22em;
  background: var(--g-bg); color: var(--g-ink);
  border: .45em solid #20262F; border-radius: 3em;
  overflow: hidden;
  box-shadow: 0 3em 6em -2.4em rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .08);
}
.ph-notch { block-size: 2em; display: grid; place-items: center; }
.ph-notch i { inline-size: 6em; block-size: .45em; border-radius: 1em; background: rgba(255, 255, 255, .16); }
.ph-screen { padding: 0 1.2em 1.4em; display: grid; gap: .95em; }
.ph-head { display: flex; align-items: center; gap: .8em; }
.ph-head > i {
  display: grid; place-items: center; inline-size: 2.9em; block-size: 2.9em; border-radius: .9em; flex: none;
  background: var(--g-raise-2); color: var(--g-ember-hi); font-style: normal; border: 1px solid var(--g-line);
}
.ph-head b { display: block; color: var(--g-ink); font-family: var(--font-display); font-size: 1.2em; font-weight: 700; line-height: 1.3; }
.ph-head small { display: block; color: var(--g-quiet); font-size: .8em; }
.ph-chips { display: flex; gap: .45em; overflow: hidden; }
.ph-chips span {
  padding: .5em 1em; border-radius: 99em; white-space: nowrap;
  background: var(--g-raise-2); border: 1px solid var(--g-line);
  color: var(--g-ink); font-size: .84em; font-weight: 600;
}
.ph-chips span.on { background: var(--g-ember); border-color: var(--g-ember); color: var(--g-on-ember); }

.ph-dish { margin: 0; position: relative; border-radius: 1.3em; overflow: hidden; border: 1px solid var(--g-line); background: var(--g-raise); }
.ph-dish > img { block-size: 11.5em; }
.ph-dish figcaption {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: 2.4em 1em .9em;
  background: linear-gradient(to top, rgba(16, 12, 10, .96) 35%, transparent);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .2em .8em;
}
.ph-dish b { font-family: var(--font-display); font-size: 1.3em; font-weight: 700; color: #FFFFFF; }
.ph-dish small { grid-column: 1; color: var(--g-ember-hi); font-size: .95em; font-weight: 600; }
.ph-add {
  grid-column: 2; grid-row: 1 / 3;
  display: grid; place-items: center; inline-size: 2.9em; block-size: 2.9em; border-radius: 50%;
  background: var(--g-ember); color: var(--g-on-ember); font-style: normal;
  transition: transform .35s var(--spring), box-shadow .35s var(--ease);
}
.ph-row {
  display: flex; align-items: center; gap: .8em;
  padding: .6em; border-radius: 1em;
  background: var(--g-raise); border: 1px solid var(--g-line);
}
.ph-row b { display: block; color: var(--g-ink); font-size: .95em; }
.ph-row small { display: block; color: var(--g-ember-hi); font-size: .84em; font-weight: 600; }
.ph-row .ph-add { margin-inline-start: auto; inline-size: 2.2em; block-size: 2.2em; background: var(--g-raise-2); color: var(--g-ember-hi); border: 1px solid var(--g-line); }

/* السلّةُ والخانة في الموضع نفسِه: السلّةُ تخلي مكانَها للطلب حين يُرسَل. */
.ph-dock { display: grid; }
.ph-dock > * { grid-area: 1 / 1; }
.ph-cart {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  block-size: 5.2em; padding-inline: 1.2em; border-radius: 1.1em;
  background: var(--g-ember); color: var(--g-on-ember);
  font-weight: 700; font-size: 1em;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.ph-cart b { color: var(--g-on-ember); font-family: var(--font-display); font-size: 1.25em; font-weight: 700; }
.ph-cart > span, .ph-cart > b { display: grid; white-space: nowrap; }
.ph-cart > span > *, .ph-cart > b > * { grid-area: 1 / 1; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.ph-cart .c-b { opacity: 0; transform: translateY(.5em); }
.ph-sent {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  color: var(--g-ember-hi); font-size: .86em; font-weight: 600;
  transition: opacity .35s var(--ease);
}

.phone[data-ph="added"] .ph-dish .ph-add, .phone[data-ph="count"] .ph-dish .ph-add { transform: scale(1.18); box-shadow: 0 0 0 .5em rgba(240, 160, 48, .25); }
.phone[data-ph="count"] .c-a, .phone[data-ph="sent"] .c-a { opacity: 0; transform: translateY(-.5em); }
.phone[data-ph="count"] .c-b, .phone[data-ph="sent"] .c-b { opacity: 1; transform: none; }
.phone[data-ph="sent"] .ph-cart { opacity: 0; transform: scale(.94); }
.phone .slot > .tok { opacity: 0; transition: opacity .35s var(--ease); }
.phone[data-ph="sent"] .slot > .tok { opacity: 1; }
.phone:not([data-ph="sent"]) .ph-sent { opacity: 0; }

/* ── دفتر الطلبات ── */
.ords { --cols: 50; inline-size: 50em; }
.ords-sum { display: flex; align-items: center; gap: .9em; padding: 1em 1.3em; border-block-end: 1px solid var(--u-line-soft); flex-wrap: wrap; }
.ords-sum b { font-family: var(--font-display); font-size: 1.7em; font-weight: 700; }
.ords-sum small { font-size: .82em; color: var(--u-quiet); margin-inline-end: auto; }
.ords-sum small > span { display: inline-grid; }
.ords-sum small > span > * { grid-area: 1 / 1; transition: opacity .3s var(--ease); }
.ords-list { padding: 1em 1.3em 1.3em; display: grid; gap: .6em; position: relative; }
.ord-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 1.2em;
  padding: .75em 1em; border-radius: .9em;
  background: var(--u-surface); border: 1px solid var(--u-line-soft);
  font-size: .9em;
}
.ord-row b { display: block; }
.ord-row small { display: block; color: var(--u-quiet); font-size: .86em; }
.ord-thumbs { display: flex; }
.ord-thumbs .thumb { inline-size: 2em; block-size: 2em; border-radius: .5em; border: 2px solid var(--u-surface); margin-inline-start: -.6em; }
.ord-row > .num { color: var(--u-ink); font-weight: 600; }

.ords-toast {
  position: absolute; inset-block-start: -1.1em; inset-inline-end: 1.3em; z-index: 2;
  display: flex; align-items: center; gap: .7em;
  padding: .7em 1.1em; border-radius: .9em;
  background: #1D2632; border: 1px solid rgba(98, 195, 255, .5); color: var(--u-ink);
  box-shadow: 0 1.2em 2.6em -1em rgba(0, 0, 0, .9);
  font-size: .86em;
  opacity: 0; transform: translateY(-.8em);
  transition: opacity .35s var(--ease), transform .45s var(--spring);
}
.ords-toast .ic { color: var(--u-blue); }
.ords[data-ph="new"] .ords-toast { opacity: 1; transform: none; }

.ords .slot { outline: 1px dashed transparent; outline-offset: .2em; transition: outline-color .3s var(--ease), box-shadow .5s var(--ease); inline-size: min(100%, 26em); }
.ords[data-ph="new"] .slot { outline-color: rgba(98, 195, 255, .6); box-shadow: 0 0 0 .5em rgba(98, 195, 255, .1); }
.ords .slot > .tok { opacity: 0; transition: opacity .35s var(--ease); }
.ords[data-ph="new"] .slot > .tok, .ords[data-ph="ok"] .slot > .tok { opacity: 1; }
.ords:not([data-ph="new"]):not([data-ph="ok"]) .n-b, .ords[data-ph="new"] .n-a, .ords[data-ph="ok"] .n-a { opacity: 0; }

/* ── شاشة المطبخ ── */
.kds { --cols: 54; inline-size: 54em; }
.kds-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; padding: 1.1em 1.3em 1.4em; position: relative; }
.kds-col { display: grid; gap: .7em; align-content: start; min-inline-size: 0; }
.kds-h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .86em; font-weight: 600; color: var(--u-ink-2);
  padding-block-end: .6em; border-block-end: 1px solid var(--u-line);
}
.kds-h i { font-style: normal; color: var(--u-ink); font-weight: 700; }
.tkt {
  background: var(--u-surface); border: 1px solid var(--u-line-soft); border-radius: .9em;
  border-inline-start: .28em solid var(--u-line);
  padding: .7em .9em; display: grid; gap: .25em; font-size: .88em;
}
.tkt > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.tkt b { font-family: var(--font-display); font-size: 1.15em; font-weight: 700; }
.tkt small { color: var(--u-quiet); font-size: .9em; }
.tkt--cook { border-inline-start-color: var(--u-amber); }
.tkt--ready { border-inline-start-color: var(--u-green); }
.tkt--new { border-inline-start-color: var(--u-blue); }

.kds .slot { outline: 1px dashed var(--u-line); outline-offset: -1px; }
.kds .slot > .tok { opacity: 0; transition: opacity .3s var(--ease); }
.kds[data-ph="queue"] .slot--q > .tok, .kds[data-ph="cook"] .slot--c > .tok, .kds[data-ph="ready"] .slot--r > .tok { opacity: 1; }

/* ── الحساب والإيصال ── */
.jr-dev--pay { --dev-w: 620px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; }
.pay { --cols: 30; inline-size: 30em; }
.pay-body { padding: 1.1em 1.3em 1.3em; display: grid; gap: .9em; }
.pay-lines { display: grid; font-size: .9em; }
.pay-lines > span { display: flex; justify-content: space-between; gap: 1em; padding-block: .5em; border-block-end: 1px dashed var(--u-line); }
.pay-lines > span b { font-weight: 500; }
.pay-total { display: flex; align-items: baseline; justify-content: space-between; font-size: .95em; }
.pay-total b { font-family: var(--font-display); font-size: 1.9em; font-weight: 700; }
.pay-total b small { font-family: var(--font); font-size: .42em; font-weight: 500; color: var(--u-quiet); margin-inline-start: .3em; }
.pay-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; font-size: .88em; font-weight: 600; }
.pay-methods span {
  display: flex; align-items: center; justify-content: center; gap: .4em;
  block-size: 2.9em; border-radius: .7em; border: 1px solid var(--u-line); color: var(--u-ink-2);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.jr-dev--pay[data-ph="method"] .pick, .jr-dev--pay[data-ph="paid"] .pick { background: var(--u-pick); color: var(--u-on-pick); border-color: var(--u-pick); }
.pay-btn { display: grid; block-size: 3.3em; border-radius: .8em; font-weight: 700; overflow: hidden; }
.pay-btn span {
  grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: .5em;
  background: var(--u-amber); color: var(--u-on-amber);
  transition: opacity .35s var(--ease);
}
.pay-btn .b { background: #047857; color: #FFFFFF; opacity: 0; }
.jr-dev--pay[data-ph="paid"] .pay-btn .b { opacity: 1; }
.pay .slot > .tok { opacity: 1; }

.rcpt {
  font-size: clamp(11px, 1.1vw, 14px);
  inline-size: 100%; max-inline-size: 16.5em;
  background: #F6F3EE; color: #2A2527;
  border-radius: .5em .5em 0 0;
  padding: 1.2em 1.2em 1.6em;
  display: grid; gap: .5em;
  position: relative;
  box-shadow: 0 2em 4em -2em rgba(0, 0, 0, .9);
  transition: opacity .5s var(--ease), transform .7s var(--out);
}
.rcpt::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -.55em; block-size: .6em;
  background: linear-gradient(-45deg, transparent .42em, #F6F3EE 0) 0 0 / .84em .84em repeat-x,
              linear-gradient(45deg, transparent .42em, #F6F3EE 0) 0 0 / .84em .84em repeat-x;
  transform: scaleY(-1);
}
.rcpt b { color: #181719; font-weight: 700; }
.rcpt-h { text-align: center; display: grid; gap: .1em; padding-block-end: .6em; border-block-end: 1px dashed #B8AFA6; }
.rcpt-h b { font-family: var(--font-display); font-size: 1.25em; }
.rcpt-h small { color: #6F6763; font-size: .82em; }
.rcpt-l { display: flex; justify-content: space-between; gap: 1em; font-size: .88em; }
.rcpt-l.sum { padding-block-start: .6em; border-block-start: 1px dashed #B8AFA6; font-weight: 700; font-size: 1em; }
.rcpt-ok {
  justify-self: center; margin-block-start: .3em;
  padding: .25em .9em; border-radius: 99em;
  background: #047857; color: #FFFFFF; font-size: .82em; font-weight: 700;
}
.jr-dev--pay:not([data-ph="paid"]) .rcpt { opacity: 0; transform: translateY(-2em); }

/* ── الرقم يدخل التقرير ── */
.kps { --cols: 46; inline-size: 46em; }
.kps-row { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: .8em; padding: 1.1em 1.3em .4em; }
.kps .kp { position: relative; }
.kps .slot { position: absolute; inset-block-start: -.9em; inset-inline: 6% 6%; pointer-events: none; }
.kp-plus {
  color: var(--u-green); font-weight: 700;
  opacity: 0; transform: translateY(.5em); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.kps[data-ph="in"] .kp-plus { opacity: 1; transform: none; }
.kps-top { padding: .8em 1.3em 1.3em; display: grid; gap: .65em; }
.kps-top > span { font-family: var(--font-display); font-size: 1.1em; font-weight: 700; color: var(--u-ink); }
.rank {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .15em .9em;
  font-size: .9em;
}
.rank .thumb { grid-row: 1 / 3; inline-size: 2.7em; block-size: 2.7em; }
.rank small { grid-column: 2; color: var(--u-quiet); font-size: .84em; }
.rank > .num { grid-row: 1 / 3; grid-column: 3; color: var(--u-ink); font-weight: 600; }
.rk-bar { grid-column: 1 / -1; display: block; block-size: .36em; border-radius: 1em; background: var(--u-line-soft); overflow: hidden; }
.rk-bar u { display: block; block-size: 100%; border-radius: inherit; background: var(--u-blue); transform-origin: calc(50% - var(--dir) * 50%) 50%; transition: transform .9s var(--out); }
.rank:nth-of-type(1) .rk-bar u { inline-size: 92%; }
.rank:nth-of-type(2) .rk-bar u { inline-size: 71%; }
.rank:nth-of-type(3) .rk-bar u { inline-size: 54%; }
.kps:not([data-ph="in"]) .rank:nth-of-type(1) .rk-bar u { transform: scaleX(.86); }

/* ── اللقطاتُ على حاويةٍ ضيّقة — تخطيطٌ ثانٍ لا تصغير ── */
@container (max-width: 520px) {
  .ords { --cols: 30; inline-size: 30em; }
  .ords .ord-thumbs { display: none; }
  .ord-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: .8em; }
  .ords-sum small { flex-basis: 100%; order: 3; }

  .kds { --cols: 30; inline-size: 30em; }
  .kds-cols { grid-template-columns: minmax(0, 1fr); gap: .9em; }
  .kds-col > .tkt:not(.kds-loop) { display: none; }
  .motion .is-live .kds-loop { animation-name: lm-ticket-still; }

  .kps { --cols: 30; inline-size: 30em; }
  .kps-row { grid-template-columns: 1fr 1fr; }
  .kps-row .kp--lead { grid-column: 1 / -1; }

  .pos { --cols: 30; inline-size: 30em; }
  .pos-menu, .pos-cart { display: none; }
  .pos-body { grid-template-columns: minmax(0, 1fr); }
  .pos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos-main .seg:last-of-type span:nth-child(n+4) { display: none; }
}

@media (max-width: 560px) {
  .jr-dev--phone { grid-template-columns: minmax(0, 280px); }
  .qr-card { display: none; }
  .jr-dev--pay { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .jr-dev--pay .fit { max-inline-size: 340px; }
}

/* ── السينما ── */
.cinema .sc-jr .sc-pin {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  padding-block: calc(var(--nav-h) + 2.2vh) 3vh;
}
.cinema .sc-jr .sc-head .h-scene { font-size: clamp(26px, min(3.4vw, 5.6vh), 52px); margin-block: 6px 0; }
.cinema .sc-jr .sc-head .sc-lede { display: none; }

.cinema .jr-steps {
  position: relative;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
  inline-size: min(1240px, 100% - 2 * var(--gut)); margin: 2.4vh auto 1.6vh;
  padding-block-start: 16px;
}
.jr-rail { position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 2px; background: rgba(255, 255, 255, .1); border-radius: 2px; overflow: hidden; }
.jr-rail i { display: block; block-size: 100%; background: linear-gradient(to left, var(--lm-red-hi), var(--lm-red)); transform-origin: calc(50% - var(--dir) * 50%) 50%; }
.jr-steps li {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--lm-ink-3);
  transition: color .35s var(--ease);
}
.jr-steps li b { font-family: var(--font-display); font-weight: 700; color: inherit; }
.jr-steps[data-ph="1"] li:nth-child(-n+2),
.jr-steps[data-ph="2"] li:nth-child(-n+3),
.jr-steps[data-ph="3"] li:nth-child(-n+4),
.jr-steps[data-ph="4"] li:nth-child(-n+5),
.jr-steps[data-ph="5"] li { color: var(--lm-ink-2); }
.jr-steps[data-ph="1"] li:nth-child(2),
.jr-steps[data-ph="2"] li:nth-child(3),
.jr-steps[data-ph="3"] li:nth-child(4),
.jr-steps[data-ph="4"] li:nth-child(5),
.jr-steps[data-ph="5"] li:nth-child(6) { color: var(--lm-ink); }
.jr-steps[data-ph="1"] li:nth-child(2) b,
.jr-steps[data-ph="2"] li:nth-child(3) b,
.jr-steps[data-ph="3"] li:nth-child(4) b,
.jr-steps[data-ph="4"] li:nth-child(5) b,
.jr-steps[data-ph="5"] li:nth-child(6) b { color: var(--lm-red-hi); }

.cinema .jr-view { position: relative; overflow: hidden; min-block-size: 0; }
.cinema .jr-film { display: flex; gap: 0; margin: 0; inline-size: 500%; block-size: 100%; }
.cinema .jr-panel {
  flex: 0 0 20%;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.55fr); align-items: center; justify-items: stretch;
  gap: 4vw;
  padding-inline: max(var(--gut), calc((100vw - 1320px) / 2));
}
.cinema .jr-cap { text-align: start; padding: 0; max-inline-size: 500px; }
.cinema .jr-cap h3 { font-size: clamp(26px, min(3.3vw, 5.6vh), 52px); line-height: 1.22; }
.cinema .jr-cap p { font-size: clamp(15px, min(1.25vw, 2.2vh), 19px); }
.cinema .jr-dev .win, .cinema .jr-dev .phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 3em 6em -2.4em #000000, 0 0 7em -3em rgba(229, 32, 46, .5); }
.cinema .jr-dev { inline-size: 100%; justify-self: center; }
/* العرضُ من الارتفاع المتاح: الكادرُ ثابتُ الارتفاع، ولقطةٌ أطولُ منه تُقصّ. */
.cinema .jr-dev--phone { grid-template-columns: auto minmax(0, min(340px, calc((100svh - 290px) * .5))); }
.jr-dev--ords { --ar: 1.5; } .jr-dev--kds { --ar: 1.9; } .jr-dev--kps { --ar: 1.42; }
.cinema .jr-dev--win .fit { inline-size: min(100%, calc((100svh - 290px) * var(--ar))); }
.cinema .jr-dev--pay { grid-template-columns: minmax(0, min(340px, calc((100svh - 300px) * .82))) auto; justify-content: center; }
.cinema .slot > .tok { visibility: hidden; }
.cinema .tok--fly {
  display: grid; position: absolute; left: 0; top: 0; z-index: 6;
  font-size: 14px; transform-origin: 0 0;
  will-change: transform, opacity;
}

/* ═══════════════════ المشهد ٣ · التشغيل ════════════════════════════════
   أربعُ شاشاتٍ حقيقيّة. في السينما رزمةٌ بالعمق: التي في المقدّمة تحيا،
   ثم تطير وتتقدّم التي خلفها. وفي التخطيط المكدَّس كلٌّ في صفّه، وتحيا
   حين تدخل الكادر. والحياةُ صنفٌ واحد (`is-live`) في الحالتين. */
.sc-ops { overflow: clip; }
.ops-grid { display: grid; gap: clamp(36px, 6vw, 56px); }
.ops-copy { text-align: center; display: grid; justify-items: center; }
.ops-roles { display: none; margin: 0; padding: 0; list-style: none; }

.ops-deck { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.ops-tile { margin: 0; display: grid; gap: 14px; min-inline-size: 0; }
.ops-tile figcaption { display: grid; gap: 2px; text-align: start; }
.ops-tile figcaption b { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--lm-ink); }
.ops-tile figcaption span { color: var(--lm-ink-2); font-size: 15px; line-height: 1.75; }
.ops-screen {
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--u-line);
  background: var(--u-bg);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .95);
}
.ops-screen .win { border: 0; border-radius: 0; box-shadow: none; }
.ops-screen { position: relative; }
.ops-dim { position: absolute; inset: 0; background: var(--lm-bg); opacity: 0; pointer-events: none; }

@media (min-width: 760px) {
  .ops-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
}

/* ── الصالة ── */
.flr { --cols: 44; inline-size: 44em; }
.flr-legend { display: flex; gap: 1.6em; padding: .9em 1.3em; border-block-end: 1px solid var(--u-line-soft); font-size: .82em; }
.flr-legend span { display: grid; }
.flr-legend b { font-family: var(--font-display); font-size: 1.5em; font-weight: 700; line-height: 1.1; }
.flr-legend .amber b { color: var(--u-amber); }
.flr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7em; padding: 1.1em 1.3em 1.4em; }
.tb {
  position: relative; display: grid; align-content: start; gap: .15em;
  min-block-size: 6.6em; padding: .8em .9em;
  border-radius: .9em; background: var(--u-surface);
  border: 1px dashed var(--u-line);
  font-size: .86em;
}
.tb b { font-family: var(--font-display); font-size: 1.25em; font-weight: 700; color: var(--u-ink-2); }
.tb small { color: var(--u-quiet); font-size: .9em; }
.tb--busy { border-style: solid; border-color: var(--u-line-soft); border-inline-end: .3em solid var(--u-blue); }
.tb--busy b, .tb--bill b { color: var(--u-ink); }
.tb--bill { border-style: solid; border-color: #5C4519; border-inline-end: .3em solid var(--u-amber); background: var(--u-amber-tint); }
.tb--bill small { color: var(--u-amber); font-weight: 600; }
/* الطاولةُ الحيّة: ثلاثةُ أوجهٍ فوق بعض، يظهر كلٌّ في دوره. */
.tb-face { position: absolute; inset: -1px; border-radius: inherit; padding: .8em .9em; display: grid; align-content: start; gap: .15em; opacity: 0; }
.tb-face.f-busy { background: var(--u-surface); border: 1px solid var(--u-line-soft); border-inline-end: .3em solid var(--u-blue); }
.tb-face.f-bill { background: var(--u-amber-tint); border: 1px solid #5C4519; border-inline-end: .3em solid var(--u-amber); }
.tb-face.f-busy b, .tb-face.f-bill b { color: var(--u-ink); }
.tb-face.f-bill small { color: var(--u-amber); font-weight: 600; }

/* ── المخزن ── */
.stk { --cols: 44; inline-size: 44em; }
.stk-table { padding: .5em 1.3em 1.3em; display: grid; }
.stk-row {
  display: grid; grid-template-columns: minmax(0, 1.5fr) 1fr 1fr auto; align-items: center; gap: 1em;
  padding-block: .78em; border-block-end: 1px solid var(--u-line-soft);
  font-size: .9em;
}
.stk-row:last-child { border-block-end: 0; }
.stk-row.head { font-size: .78em; color: var(--u-quiet); padding-block: .7em; }
.stk-row b { font-weight: 600; }
.stk-row .num { color: var(--u-ink); }
.stk-row small { display: block; color: var(--u-quiet); font-size: .84em; }
.stk-qty { display: inline-grid; }
.stk-qty > * { grid-area: 1 / 1; }
.stk-qty .q-b, .stk-note { opacity: 0; }
.stk-note { color: var(--u-blue); }

/* ── الحياة: حلقاتٌ قصيرة تعمل والشاشةُ في المقدّمة وحدها ── */
.pos .cart-line.is-new { opacity: 0; }
.pos .t-b { opacity: 0; }
.pos .cart-total > div b { display: inline-grid; }
.pos .cart-total > div b > * { grid-area: 1 / 1; }
.pos-card.is-tap::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--u-amber); opacity: 0; }
/* التذكرةُ الدوّارة حاضرةٌ في التخطيط متى سُمحت الحركة، شفّافةً إلى أن تحيا الشاشة:
   إظهارُها بـ`display` عند كلِّ نبضةٍ يعيد تخطيطَ اللقطة ومعها الرزمةَ كلَّها. */
.kds-loop { display: none; }
.motion .kds-loop { display: grid; opacity: 0; }

.motion .is-live .pos .cart-line.is-new { animation: lm-line 9s var(--ease) infinite; }
.motion .is-live .pos .t-a { animation: lm-swap-a 9s var(--ease) infinite; }
.motion .is-live .pos .t-b { animation: lm-swap-b 9s var(--ease) infinite; }
.motion .is-live .pos-card.is-tap::after { animation: lm-tap 9s var(--ease) infinite; }
.motion .is-live .tb-face.f-busy { animation: lm-face-a 10s var(--ease) infinite; }
.motion .is-live .tb-face.f-bill { animation: lm-face-b 10s var(--ease) infinite; }
.motion .is-live .stk-qty .q-a { animation: lm-swap-a 8s var(--ease) infinite; }
.motion .is-live .stk-qty .q-b { animation: lm-swap-b 8s var(--ease) infinite; }
.motion .is-live .stk-note { animation: lm-swap-b 8s var(--ease) infinite; }
.motion .is-live .kds-loop { animation: lm-ticket 10s var(--ease) infinite; }
.motion .is-live .kds-loop .pl--blue { animation: lm-st-1 10s linear infinite; }
.motion .is-live .kds-loop .pl--amber { animation: lm-st-2 10s linear infinite; }
.motion .is-live .kds-loop .pl--green { animation: lm-st-3 10s linear infinite; }
.kds-loop .pl { grid-area: 1 / 1; opacity: 0; }
.kds-loop .kl-st { display: inline-grid; }

@keyframes lm-line   { 0%, 14% { opacity: 0; transform: translateY(.6em); } 22%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes lm-swap-a { 0%, 20% { opacity: 1; } 26%, 90% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes lm-swap-b { 0%, 20% { opacity: 0; } 26%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes lm-tap    { 0%, 8% { opacity: 0; transform: scale(1); } 12% { opacity: 1; transform: scale(1); } 22%, 100% { opacity: 0; transform: scale(1.06); } }
@keyframes lm-face-a { 0%, 12% { opacity: 0; } 18%, 52% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes lm-face-b { 0%, 52% { opacity: 0; } 58%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes lm-ticket {
  0% { opacity: 0; transform: translateX(0) translateY(.8em); }
  6%, 28% { opacity: 1; transform: translateX(0); }
  36%, 62% { opacity: 1; transform: translateX(calc(var(--dir) * (100% + 1em))); }
  70%, 92% { opacity: 1; transform: translateX(calc(var(--dir) * (200% + 2em))); }
  100% { opacity: 0; transform: translateX(calc(var(--dir) * (200% + 2em))); }
}
/* الأعمدةُ صفوفٌ على الحاوية الضيّقة، فالتذكرةُ تبدّل شارتَها في مكانها ولا تعبر. */
@keyframes lm-ticket-still { 0% { opacity: 0; transform: translateY(.8em); } 6%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes lm-st-1 { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes lm-st-2 { 0%, 30% { opacity: 0; } 34%, 64% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes lm-st-3 { 0%, 64% { opacity: 0; } 68%, 100% { opacity: 1; } }

/* ── السينما: رزمةٌ بالعمق ── */
.cinema .sc-ops .sc-pin { display: grid; align-items: center; padding-block-start: var(--nav-h); }
.cinema .ops-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr); align-items: center; gap: 4vw; }
.cinema .ops-copy { text-align: start; justify-items: start; }
.cinema .ops-copy .h-scene, .cinema .an-copy .h-scene, .cinema .br-copy .h-scene { font-size: clamp(25px, 2.75vw, 42px); }
.cinema .ops-roles { display: grid; gap: 4px; margin-block-start: 2.4vh; inline-size: 100%; }
.cinema .ops-copy .sc-lede { display: none; }
.ops-roles li {
  display: grid; gap: 2px; padding: 10px 16px;
  border-inline-start: 2px solid rgba(255, 255, 255, .1);
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
/* **الوصفُ مرسومٌ دائمًا، والدورُ الحاليُّ يُضاء لا يُفتَح.** طيُّه بـ`max-block-size`
   كان يحرّك خاصّيةَ تخطيط: ارتفاعُ العمود يتغيّر كلَّ إطار، فتُعاد محاذاةُ الشبكة
   كلِّها ومعها أربعُ لقطات — ١٤ مللي تخطيطًا لكلِّ إطار في المشهد، مقيسةً. */
.ops-roles b { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--lm-ink-3); transition: color .4s var(--ease); }
.ops-roles span { font-size: 14px; color: var(--lm-ink-3); line-height: 1.7; opacity: .55; transition: opacity .4s var(--ease), color .4s var(--ease); }
.ops-roles[data-ph="1"] li:nth-child(1), .ops-roles[data-ph="2"] li:nth-child(2),
.ops-roles[data-ph="3"] li:nth-child(3), .ops-roles[data-ph="4"] li:nth-child(4) { border-inline-start-color: var(--lm-red-hi); background: linear-gradient(to left, transparent, rgba(229, 32, 46, .09)); }
[dir="ltr"] .ops-roles[data-ph="1"] li:nth-child(1), [dir="ltr"] .ops-roles[data-ph="2"] li:nth-child(2),
[dir="ltr"] .ops-roles[data-ph="3"] li:nth-child(3), [dir="ltr"] .ops-roles[data-ph="4"] li:nth-child(4) { background: linear-gradient(to right, transparent, rgba(229, 32, 46, .09)); }
.ops-roles[data-ph="1"] li:nth-child(1) b, .ops-roles[data-ph="2"] li:nth-child(2) b,
.ops-roles[data-ph="3"] li:nth-child(3) b, .ops-roles[data-ph="4"] li:nth-child(4) b { color: var(--lm-ink); }
.ops-roles[data-ph="1"] li:nth-child(1) span, .ops-roles[data-ph="2"] li:nth-child(2) span,
.ops-roles[data-ph="3"] li:nth-child(3) span, .ops-roles[data-ph="4"] li:nth-child(4) span { opacity: 1; color: var(--lm-ink-2); }

/* **الرزمةُ صندوقٌ بمقاسٍ معلوم والشاشاتُ مطلقةٌ فيه** — لا أربعةُ عناصرَ في خليّةِ
   شبكةٍ واحدة. في الشبكة كان أيُّ تبدّلٍ في شاشةٍ يعيد تخطيطَ الأربع (وكلٌّ منها
   حاويةٌ تقيس نفسَها): ٢٫٦ مللي لكلِّ إطار. وبالموضع المطلق ٠٫١٥ — مقيسةً.
   والنسبةُ تترك أسفلَها مكانًا لحوافّ الشاشات المنتظرة. */
.cinema .ops-deck {
  display: block; position: relative;
  inline-size: min(100%, calc((100svh - var(--nav-h) - 150px) * 1.56));
  aspect-ratio: 56 / 30.4;
  justify-self: center;
}
.cinema .ops-tile { position: absolute; inset: 0 0 auto 0; }
.cinema .ops-tile figcaption { display: none; }
.cinema .ops-screen { aspect-ratio: 56 / 28; }
.cinema .ops-tile:nth-child(1) { z-index: 4; }
.cinema .ops-tile:nth-child(2) { z-index: 3; }
.cinema .ops-tile:nth-child(3) { z-index: 2; }
.cinema .ops-tile:nth-child(4) { z-index: 1; }

/* ═══════════════════ المشهد ٤ · التقارير ═══════════════════════════════ */
.sc-an { overflow: clip; }
.an-grid { display: grid; gap: clamp(36px, 6vw, 56px); }
.an-copy { text-align: center; display: grid; justify-items: center; }
.an-points { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; text-align: start; }
.an-points li { display: flex; align-items: flex-start; gap: 12px; color: var(--lm-ink-2); font-size: 15.5px; line-height: 1.75; }
.an-points .ic { color: var(--lm-red-hi); margin-block-start: 5px; }
.an-stage { position: relative; min-inline-size: 0; display: grid; gap: 16px; }

.dash { --cols: 60; inline-size: 60em; }
.dash-kpis { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: .8em; padding: 1.1em 1.3em 0; }
.dash-main { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: .8em; padding: .8em 1.3em 1.3em; }
.pnl { background: var(--u-surface); border: 1px solid var(--u-line); border-radius: 1em; padding: 1em 1.1em; min-inline-size: 0; position: relative; }
.pnl > span { display: block; font-family: var(--font-display); font-size: 1.12em; font-weight: 700; color: var(--u-ink); }
.pnl > small { display: block; font-size: .78em; color: var(--u-quiet); margin-block-end: .7em; }
/* اللافتةُ تقف فوق نقطتها وترتفع عن حافّة الرسم — والهامشُ يحجز لها مكانَها كي لا
   تغطّي سطرَ الشرح فوق المبيان (في العرض الضيّق الرسمُ أقصر فتعلو اللافتةُ أكثر). */
.chart { position: relative; margin-block-start: 1.1em; }
.chart svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
[dir="ltr"] .chart svg { transform: scaleX(-1); }
.chart .grid-l { stroke: rgba(160, 190, 225, .1); stroke-width: 1; }
.chart .area { fill: url(#lmArea); }
.chart .line { fill: none; stroke: var(--u-blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(98, 195, 255, .55)); }
.chart .dot { fill: var(--u-bg); stroke: var(--u-blue); stroke-width: 2.5; }
.call {
  --x: 50; --y: 50;
  position: absolute; translate: calc(var(--dir) * -50%) -112%;
  inset-inline-start: calc(var(--x) * 1%); inset-block-start: calc(var(--y) * 1%);
  padding: .5em .8em; border-radius: .8em;
  background: var(--u-raised); border: 1px solid rgba(98, 195, 255, .45);
  font-size: .78em; white-space: nowrap; line-height: 1.45;
  box-shadow: 0 1em 2em -1em rgba(0, 0, 0, .9);
}
.call--end { translate: calc(var(--dir) * -94%) -112%; }
.call small { display: block; color: var(--u-blue); font-weight: 600; }
.call b { font-family: var(--font-display); font-size: 1.2em; }

.dash .rank { font-size: .86em; padding-block: .5em; }
.dash .rank + .rank { border-block-start: 1px solid var(--u-line-soft); }
.dash .rank:nth-of-type(4) .rk-bar u { inline-size: 38%; }

.an-cmps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.an-cmp {
  font-size: clamp(11.5px, 1vw, 14px);
  background: linear-gradient(180deg, #1D2632, #141A23);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 1.15em;
  padding: 1em 1.15em; display: grid; gap: .55em;
  box-shadow: 0 1.8em 3.8em -1.5em rgba(0, 0, 0, .95);
  color: var(--u-ink-2);
}
.an-cmp > span { font-size: .86em; display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.an-cmp b { color: var(--u-ink); font-weight: 600; }
.cmp-row { display: grid; grid-template-columns: minmax(0, 5.4em) minmax(0, 1fr) auto; align-items: center; gap: .7em; font-size: .86em; }
.cmp-row i { display: block; block-size: .55em; border-radius: 1em; background: var(--u-blue); }
.cmp-row.dim i { background: #2E4A63; }
.cmp-row .num { color: var(--u-ink); font-weight: 600; }
.cmp-row:nth-of-type(1) i { inline-size: 100%; } .cmp-row:nth-of-type(2) i { inline-size: 78%; }

@container (max-width: 520px) {
  .dash { --cols: 30; inline-size: 30em; }
  .dash-kpis { grid-template-columns: 1fr 1fr; }
  .dash-main { grid-template-columns: minmax(0, 1fr); }
  .chart { margin-block-start: 2em; }
  .flr { --cols: 28; inline-size: 28em; }
  .flr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flr-grid .tb:nth-child(n+7) { display: none; }
  .stk { --cols: 28; inline-size: 28em; }
  .stk-row { grid-template-columns: minmax(0, 1.4fr) 1fr auto; }
  .stk-row > :nth-child(3) { display: none; }
}

.cinema .sc-an .sc-pin { display: grid; align-items: center; padding-block-start: var(--nav-h); }
.cinema .an-grid { grid-template-columns: minmax(0, .74fr) minmax(0, 1.6fr); align-items: center; gap: 4vw; }
.cinema .an-copy { text-align: start; justify-items: start; }
.cinema .an-stage { display: block; inline-size: min(100%, calc((100svh - var(--nav-h) - 120px) * 1.5)); justify-self: center; perspective: 1800px; }
.cinema .an-cmps { display: contents; }
.cinema .an-cmp { position: absolute; z-index: 3; min-inline-size: 15.5em; }
.cinema .an-cmp.c1 { inset-block-end: -7%; inset-inline-start: -7%; }
.cinema .an-cmp.c2 { inset-block-start: -13%; inset-inline-end: 16%; }

/* ═══════════════════ الخريطةُ المداريّة — المنظومة والتكاملات ═══════════ */
.sc-ig { overflow: clip; }
.ig-core {
  grid-column: 1 / -1; justify-self: center;
  display: grid; place-items: center; position: relative;
  inline-size: 104px; block-size: 104px; border-radius: 30px;
  background: #000000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 90px -4px rgba(229, 32, 46, .85);
  margin-block-end: 14px;
}
.ig-core img { inline-size: 100%; block-size: 100%; border-radius: inherit; object-fit: cover; }
.ig-core::before, .ig-core::after {
  content: ""; position: absolute; inset: -22%; border-radius: 42%;
  border: 1px solid rgba(255, 92, 102, .32); pointer-events: none;
}
.ig-core::after { inset: -46%; border-color: rgba(255, 92, 102, .14); }
.sc-ig .omap { margin-block-start: clamp(36px, 6vw, 56px); }
.omap-lines .ig-comet { fill: none; stroke: var(--lm-red-hi); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .12 1; stroke-dashoffset: 1.12; opacity: 0; }
.motion .is-live .ig-comet { animation: lm-comet 3.6s linear infinite; opacity: 1; }
.motion .is-live .ig-comet:nth-of-type(2n) { animation-delay: -1.2s; }
.motion .is-live .ig-comet:nth-of-type(3n) { animation-delay: -2.4s; }
@keyframes lm-comet { from { stroke-dashoffset: 1.12; } to { stroke-dashoffset: 0; } }
.motion .is-live .ig-core::before { animation: lm-ring 3.2s var(--ease) infinite; }
@keyframes lm-ring { 0% { transform: scale(.86); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }

.cinema .sc-ig .sc-pin {
  display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; align-content: center;
  gap: 2vh; padding-block: calc(var(--nav-h) + 2.5vh) 4vh;
}
.cinema .sc-ig .sc-head .h-scene { font-size: clamp(24px, 3vw, 44px); margin-block: 8px 0; }
.cinema .ig-core {
  position: absolute; margin: 0;
  inset-inline-start: 50%; inset-block-start: 50%;
  inline-size: 13%; block-size: auto; aspect-ratio: 1; border-radius: 26%;
  translate: calc(var(--dir) * -50%) -50%;
}

/* ═══════════════════ المشهد ٦ · الفروع ═════════════════════════════════ */
.sc-br { overflow: clip; }
.br-grid { display: grid; gap: clamp(36px, 6vw, 56px); }
.br-copy { text-align: center; display: grid; justify-items: center; }
.br-stage { position: relative; min-inline-size: 0; display: grid; gap: 18px; }
.br-map {
  --c: 1;
  position: relative; aspect-ratio: 10 / 6.4; border-radius: 24px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #121924, #0A0E15 70%);
  border: 1px solid var(--lm-line-2);
  clip-path: circle(calc(var(--c) * 76%) at 50% 46%);
}
.br-map svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.br-map .dots { fill: rgba(255, 255, 255, .16); }
.br-map .road { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 2; }
.br-map .nile { fill: none; stroke: rgba(98, 195, 255, .34); stroke-width: 9; stroke-linecap: round; }
.br-map .link { fill: none; stroke: rgba(255, 92, 102, .45); stroke-width: 1.5; }

.pin {
  --x: 50; --y: 50;
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  translate: -50% -50%;
  display: grid; justify-items: center; gap: 6px;
}
.pin i {
  position: relative; display: block; inline-size: 16px; block-size: 16px; border-radius: 50%;
  background: var(--lm-red-hi); box-shadow: 0 0 0 4px rgba(229, 32, 46, .3), 0 0 26px 4px rgba(229, 32, 46, .7);
  transition: transform .5s var(--spring), opacity .4s var(--ease);
}
.pin i::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid rgba(255, 92, 102, .65); opacity: 0; }
.motion .is-live .pin i::after { animation: lm-ring 2.8s var(--ease) infinite; }
.pin b {
  padding: 2px 10px; border-radius: 99px; white-space: nowrap;
  background: rgba(6, 8, 12, .82); border: 1px solid rgba(255, 255, 255, .14);
  color: var(--lm-ink); font-size: 12.5px; font-weight: 600;
  transition: opacity .4s var(--ease);
}
.br-map[data-ph="0"] .pin i, .br-map[data-ph="0"] .pin b,
.br-map[data-ph="1"] .pin:nth-of-type(n+2) i, .br-map[data-ph="1"] .pin:nth-of-type(n+2) b,
.br-map[data-ph="2"] .pin:nth-of-type(n+3) i, .br-map[data-ph="2"] .pin:nth-of-type(n+3) b,
.br-map[data-ph="3"] .pin:nth-of-type(n+4) i, .br-map[data-ph="3"] .pin:nth-of-type(n+4) b { transform: scale(0); opacity: 0; }

.br-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.br-card {
  font-size: clamp(11.5px, 1vw, 14px);
  background: linear-gradient(180deg, #1D2632, #141A23);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 1.1em;
  padding: .9em 1.05em; display: grid; gap: .35em;
  box-shadow: 0 1.8em 3.8em -1.5em rgba(0, 0, 0, .95);
  color: var(--u-ink-2); min-inline-size: 0;
}
.br-card > span { display: flex; align-items: center; justify-content: space-between; gap: .8em; font-size: .88em; }
.br-card > span b { color: var(--u-ink); font-weight: 600; font-size: 1.1em; }
.br-card strong { font-family: var(--font-display); font-size: 1.6em; font-weight: 700; color: var(--u-ink); line-height: 1.15; }
.br-card strong small { font-family: var(--font); font-size: .45em; font-weight: 500; color: var(--u-quiet); margin-inline-start: .3em; }
.br-card em { font-style: normal; font-size: .8em; display: flex; justify-content: space-between; gap: .8em; align-items: center; color: var(--u-quiet); }
.br-card .rk-bar u { background: var(--lm-red-hi); }
.br-card.b1 .rk-bar u { inline-size: 100%; } .br-card.b2 .rk-bar u { inline-size: 70%; }
.br-card.b3 .rk-bar u { inline-size: 55%; }  .br-card.b4 .rk-bar u { inline-size: 42%; }

.brt { --cols: 46; inline-size: 46em; }
.brt-rows { padding: .4em 1.3em 1.2em; display: grid; }
.brt-row {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr) auto auto; align-items: center; gap: 1.1em;
  padding-block: .72em; border-block-end: 1px solid var(--u-line-soft); font-size: .9em;
}
.brt-row:last-child { border-block-end: 0; }
.brt-row.head { font-size: .78em; color: var(--u-quiet); }
.brt-row b { font-weight: 600; }
.brt-bar { display: flex; align-items: center; gap: .7em; }
.brt-bar i { display: block; block-size: .5em; border-radius: 1em; background: var(--u-blue); }
.brt-row:nth-of-type(2) .brt-bar i { inline-size: 58%; } .brt-row:nth-of-type(3) .brt-bar i { inline-size: 41%; }
.brt-row:nth-of-type(4) .brt-bar i { inline-size: 32%; } .brt-row:nth-of-type(5) .brt-bar i { inline-size: 25%; }
.brt-row .num { color: var(--u-ink); }

@container (max-width: 520px) {
  .brt { --cols: 30; inline-size: 30em; }
  .brt-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; }
  .brt-row > :nth-child(3) { display: none; }
}

.cinema .sc-br .sc-pin { display: grid; align-items: center; padding-block-start: var(--nav-h); }
.cinema .br-grid { grid-template-columns: minmax(0, .74fr) minmax(0, 1.6fr); align-items: center; gap: 4vw; }
.cinema .br-copy { text-align: start; justify-items: start; }
.cinema .br-stage { display: block; inline-size: min(100%, calc((100svh - var(--nav-h) - 110px) * 1.5)); justify-self: center; }
.cinema .br-cards { display: contents; }
.cinema .br-card { position: absolute; z-index: 2; min-inline-size: 13.5em; }
.cinema .br-card.b1 { left: 21%; top: 60%; }
.cinema .br-card.b2 { left: -4%; top: 4%; }
.cinema .br-card.b3 { left: 54%; top: 1%; }
.cinema .br-card.b4 { right: -5%; top: 62%; }
.cinema .br-table { position: absolute; z-index: 3; inset-inline: 7% 7%; inset-block-end: -6%; }

/* ═══════════════════ الأسعار ═══════════════════════════════════════════
   الهيكلُ هيكلُ `sections/pricing` كما هو — البطاقاتُ من كتالوج الخطط،
   وثلاثةَ عشرَ اختبارًا تحرس أرقامَها. هنا لبسُها الليليّ وحده. */
.sec { position: relative; padding-block: clamp(72px, 11vw, 132px); }
.sec--edge { border-block-start: 1px solid var(--lm-line); }
.sec--sunk { background: linear-gradient(180deg, var(--lm-bg-2), var(--lm-bg)); }
.sec-head { max-inline-size: 720px; margin-inline: auto; text-align: center; margin-block-end: clamp(36px, 5vw, 56px); display: grid; justify-items: center; }
.sec-head h2 { font-size: clamp(30px, 4.3vw, 58px); font-weight: 700; line-height: 1.22; margin-block: 14px 16px; text-wrap: balance; }
.sec-head p { color: var(--lm-ink-2); font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.9; }

.pg-switch { display: grid; justify-items: center; gap: 12px; margin-block-end: 48px; }
.pg-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: var(--lm-panel); border: 1px solid var(--lm-line-2); border-radius: 99px; }
.pg-toggle button {
  display: inline-flex; align-items: center; gap: 8px;
  min-block-size: 44px; padding-inline: 24px;
  border: 0; border-radius: 99px;
  background: transparent; color: var(--lm-ink-2);
  font-weight: 600; font-size: 15px; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.pg-toggle button[aria-checked="true"] { background: var(--lm-ink); color: var(--lm-bg); }
.pg-save { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--u-green-tint); color: var(--u-green); }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 292px)); justify-content: center; gap: 20px; align-items: stretch; }
.plan {
  position: relative;
  background: linear-gradient(180deg, var(--lm-panel-2), var(--lm-panel));
  border: 1px solid var(--lm-line-2);
  border-radius: 22px;
  padding: 32px 24px 24px;
  display: flex; flex-direction: column; gap: 18px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.plan:hover { border-color: rgba(255, 255, 255, .26); transform: translateY(-4px); }
.plan.hot { border-color: rgba(255, 92, 102, .65); box-shadow: 0 30px 80px -40px rgba(229, 32, 46, .85); }
.plan-tag {
  position: absolute; inset-block-start: -14px; inset-inline-start: 50%;
  transform: translateX(calc(var(--dir) * -50%));
  background: var(--lm-red); color: var(--lm-white);
  padding: 4px 16px; border-radius: 99px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.plan-name { display: grid; gap: 6px; }
.plan-name h3 { font-size: 22px; font-weight: 700; }
.plan-name p { color: var(--lm-ink-3); font-size: 14px; line-height: 1.7; }
.plan-p { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan-v { font-family: var(--font-display); font-size: 44px; font-weight: 700; color: var(--lm-ink); line-height: 1.1; }
.plan-u { color: var(--lm-ink-3); font-size: 14px; font-weight: 500; }
.plan-note { font-size: 13px; color: var(--u-green); font-weight: 600; }
.plan-feats { display: grid; gap: 12px; flex: 1; align-content: start; }
.plan-feats li { display: flex; align-items: flex-start; gap: 12px; color: var(--lm-ink-2); font-size: 14.5px; line-height: 1.7; }
.plan-feats .ic { color: var(--lm-red-hi); margin-block-start: 4px; }
.plan-feats b { color: var(--lm-ink); font-weight: 600; }
.plan-more {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 44px;
  border: 0; background: transparent; border-radius: 12px;
  color: var(--lm-ink-2); font-weight: 600; font-size: 14.5px; cursor: pointer;
}
.plan-more:hover { background: rgba(255, 255, 255, .06); color: var(--lm-ink); }

[data-interval="MONTHLY"] [data-price="YEARLY"],
[data-interval="YEARLY"]  [data-price="MONTHLY"] { display: none; }
[data-interval="MONTHLY"] .plan:not([data-has~="MONTHLY"]),
[data-interval="YEARLY"]  .plan:not([data-has~="YEARLY"]) { display: none; }

.pg-assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; margin-block-start: 48px; font-size: 14.5px; font-weight: 500; color: var(--lm-ink-2); }
.pg-assure span { display: inline-flex; align-items: center; gap: 8px; }
.pg-assure .ic { color: var(--lm-red-hi); }

/* ── درج تفاصيل الباقة ── */
.pd { position: fixed; inset: 0; z-index: 90; }
.pd-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .66); opacity: 0; transition: opacity .22s var(--ease); }
.pd.is-open .pd-scrim { opacity: 1; }
.pd-panel {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: min(480px, 100%);
  background: var(--lm-bg-2); border-inline-end: 1px solid var(--lm-line-2);
  display: flex; flex-direction: column;
  transform: translateX(calc(var(--dir) * -100%));
  transition: transform .32s var(--ease);
}
.pd.is-open .pd-panel { transform: none; }
.pd-head { padding: 24px; border-block-end: 1px solid var(--lm-line); display: flex; align-items: flex-start; gap: 12px; background: var(--lm-panel); }
.pd-head > div { flex: 1; min-inline-size: 0; }
.pd-head h2 { font-size: 24px; font-weight: 700; }
.pd-head p { color: var(--lm-ink-3); font-size: 14px; margin-block-start: 4px; line-height: 1.7; }
.pd-close {
  flex: none; inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--lm-line-2); border-radius: 12px;
  background: transparent; color: var(--lm-ink-2); cursor: pointer;
}
.pd-close:hover { color: var(--lm-ink); border-color: rgba(255, 255, 255, .3); }
.pd-price { padding: 24px; border-block-end: 1px solid var(--lm-line); display: grid; gap: 16px; }
.pd-price .plan-v { font-size: 38px; }
.pd-body { flex: 1; overflow-y: auto; padding: 24px; display: grid; gap: 32px; align-content: start; }
.pd-body h3 { font-size: 13.5px; color: var(--lm-ink-3); font-weight: 600; display: flex; align-items: center; gap: 8px; margin-block-end: 12px; }
.pd-group { margin-block-end: 16px; }
.pd-group > span { display: block; font-size: 12.5px; font-weight: 600; color: var(--lm-red-hi); margin-block-end: 8px; }
.pd-list { display: grid; gap: 8px; }
.pd-list li { display: flex; align-items: center; gap: 12px; color: var(--lm-ink-2); font-size: 15px; }
.pd-list .ic { color: var(--u-green); flex: none; }
.pd-list em { margin-inline-start: auto; font-style: normal; font-size: 13px; color: var(--lm-ink-3); font-weight: 500; }
.pd-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pd-limit { border: 1px solid var(--lm-line-2); border-radius: 14px; padding: 12px 16px; background: var(--lm-panel); }
.pd-limit b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--lm-ink); }
.pd-limit span { font-size: 13px; color: var(--lm-ink-3); font-weight: 500; }
.pd-diff { background: rgba(229, 32, 46, .08); border: 1px solid rgba(255, 92, 102, .3); border-radius: 14px; padding: 16px; }
.pd-diff h3 { color: var(--lm-red-hi); }
.pd-diff li { color: var(--lm-ink); font-size: 14.5px; }
.pd-diff .ic { color: var(--lm-red-hi); }
.pd-foot { padding: 16px 24px; border-block-start: 1px solid var(--lm-line); background: var(--lm-panel); display: grid; gap: 8px; }
.pd-foot small { color: var(--lm-ink-3); font-size: 13px; text-align: center; }

/* ═══════════════════ الأسئلة الشائعة ═══════════════════════════════════ */
.faq { max-inline-size: 820px; margin-inline: auto; display: grid; gap: 10px; }
.faq details {
  background: var(--lm-panel); border: 1px solid var(--lm-line-2); border-radius: 16px;
  overflow: hidden; transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.faq details[open] { border-color: rgba(255, 255, 255, .24); background: var(--lm-panel-2); }
.faq summary {
  display: flex; align-items: center; gap: 16px;
  min-block-size: 60px; padding: 16px 24px;
  cursor: pointer; list-style: none;
  font-weight: 600; font-size: 16.5px; color: var(--lm-ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { margin-inline-start: auto; flex: none; color: var(--lm-ink-3); transition: transform .25s var(--ease), color .25s var(--ease); }
.faq details[open] summary .ic { transform: rotate(180deg); color: var(--lm-red-hi); }
.faq .a { padding: 0 24px 24px; color: var(--lm-ink-2); line-height: 1.95; font-size: 15.5px; }
.faq .a strong { color: var(--lm-ink); font-weight: 600; }
.faq .a a { color: var(--lm-red-hi); text-decoration: underline; }

/* ═══════════════════ الختام ════════════════════════════════════════════
   الصورةُ تُفتَح من قناعٍ وتهدأ خلف العنوان. فكرةٌ واحدة، وزرّان. */
.sc-cta { padding-block: 0; }
.cta-frame {
  --c: 1;
  position: relative; overflow: hidden;
  min-block-size: min(92vh, 780px);
  display: grid; place-items: center;
  clip-path: inset(calc((1 - var(--c)) * 9%) calc((1 - var(--c)) * 7%) round calc((1 - var(--c)) * 44px));
}
.cta-photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.cta-shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 100%, rgba(229, 32, 46, .34), transparent 70%),
    radial-gradient(ellipse 58% 46% at 50% 48%, rgba(6, 8, 12, .62), transparent 78%),
    linear-gradient(180deg, rgba(6, 8, 12, .92), rgba(6, 8, 12, .7) 45%, rgba(6, 8, 12, .95));
}
.cta-copy { position: relative; z-index: 1; text-align: center; display: grid; justify-items: center; padding-block: 96px; }
.cta-copy .h-scene { font-size: clamp(34px, 5.4vw, 76px); font-weight: 800; }
.cta-copy .sc-lede { color: #D5DBE4; }
.cta-copy .cta-row { justify-content: center; margin-block: 34px 26px; }
.cta-copy .assure { justify-content: center; color: #C4CCD8; }

/* ═══════════════════ التذييل ═══════════════════════════════════════════ */
.foot { background: var(--lm-bg); border-block-start: 1px solid var(--lm-line); padding-block: 72px 32px; }
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: 32px 24px; padding-block-end: 40px; border-block-end: 1px solid var(--lm-line);
}
.foot-about { display: grid; gap: 16px; align-content: start; justify-items: start; max-inline-size: 36ch; }
.foot-about p { color: var(--lm-ink-3); font-size: 14.5px; line-height: 1.85; }
.foot-col { display: grid; gap: 4px; align-content: start; }
.foot-col > span { font-size: 14px; font-weight: 600; color: var(--lm-ink); margin-block-end: 6px; }
.foot-col a { color: var(--lm-ink-3); font-size: 14.5px; min-block-size: 44px; display: inline-flex; align-items: center; }
.foot-col a:hover { color: var(--lm-ink); }
.foot-end { padding-block-start: 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; color: var(--lm-ink-3); font-size: 13.5px; }
.foot-end nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-end a { min-block-size: 44px; min-inline-size: 44px; display: inline-flex; align-items: center; justify-content: center; }
.foot-end a:hover { color: var(--lm-ink); }

/* ═══════════════════ الحركة ════════════════════════════════════════════
   كلُّ ما هنا تحت `.motion` — يضعه القالبُ لمن لم يطلب تقليلَ الحركة.
   فبلا السكربت أو مع طلب التقليل: لا شيءَ مخفيٌّ ولا شيءَ يتحرّك. */

/* الظهورُ عند الدخول — `.reveal` لِما يديره `marketing.js`، و`.rv` لمحرّك القصّة. */
.js .reveal,
.motion:not(.cinema) .rv,
.cinema .rv:not([data-k]) {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--out), transform .9s var(--out);
  transition-delay: var(--d, 0s);
}
.js .reveal.in, .motion:not(.cinema) .rv.in, .cinema .rv.in:not([data-k]) { opacity: 1; transform: none; }
.d1 { --d: .08s; } .d2 { --d: .16s; } .d3 { --d: .24s; } .d4 { --d: .32s; }
.d5 { --d: .40s; } .d6 { --d: .48s; } .d7 { --d: .56s; } .d8 { --d: .64s; }

/* ── دخولُ البطل: زمنيٌّ، مرّةً واحدة، بـCSS وحدها ── */
.t-pill { --t: .50s; } .t-l1 { --t: .55s; } .t-l2 { --t: .67s; } .t-lede { --t: .95s; }
.t-cta { --t: 1.3s; } .t-assure { --t: 1.45s; }
.t-sales { --t: 1.0s; } .t-orders { --t: .82s; } .t-bill { --t: .95s; } .t-notify { --t: 1.2s; }

/* `backwards` لا `both`: بعد الدخول يعود العنصرُ إلى نمطه هو (وهو الحالةُ الأخيرة)،
   فلا تبقى قيمةُ الحركة فوق ما يكتبه المحرّكُ على العنصر نفسِه مع التمرير. */
.motion .open-bg { animation: lm-fade 1.4s ease backwards; }
.motion .nav { animation: lm-nav .7s var(--out) .2s backwards; }
.motion .intro { animation: lm-rise .85s var(--out) var(--t, 0s) backwards; }
.motion .ln-in { animation: lm-line-up 1s var(--out) var(--t, 0s) backwards; }
.motion .tilt-in { animation: lm-window 1.3s var(--out) .35s backwards; }
.motion .sat-in { animation: lm-sat .8s var(--spring) var(--t, 0s) backwards, lm-float var(--fd, 7s) ease-in-out calc(var(--t, 0s) + 1s) infinite; }
.motion .sat-notify i::after { animation: lm-ping 2.2s var(--ease) 1.5s 3; }
.motion .stage-halo { animation: lm-fade 1.6s ease .3s backwards; }
.sat-sales { --fd: 8s; --fy: -11px; } .sat-orders { --fd: 9s; --fy: 9px; }
.sat-bill { --fd: 7.5s; --fy: -8px; } .sat-notify { --fd: 6.5s; --fy: -7px; }

@keyframes lm-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes lm-nav     { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes lm-rise    { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes lm-line-up { from { transform: translateY(118%); } to { transform: none; } }
@keyframes lm-window  { from { opacity: 0; transform: translateY(16%) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes lm-sat     { from { opacity: 0; transform: scale(.72) translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes lm-float   { 0%, 100% { translate: 0 0; } 50% { translate: 0 var(--fy, -9px); } }
@keyframes lm-ping    { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }

/* **الستارُ إلى أن يقوم المحرّك.** في السينما تبدأ المنظومةُ وما بعدها مخفيّةً
   بما يكتبه المحرّك لا بما تكتبه الورقة؛ فلو رُسمت الصفحةُ قبل قيامه لظهرت
   المنظومةُ فوق البطل لحظةً. البطلُ نفسُه خارج الستار: هو أوّلُ ما يُرى. */
.cinema:not(.story-on) .eco,
.cinema:not(.story-on) .sc--pin:not(.sc-open) > .sc-pin { visibility: hidden; }

/* الروابطُ إلى الأقسام تقف تحت الشريط الثابت لا خلفه. */
.sc[id], .sec[id], .eco { scroll-margin-block-start: calc(var(--nav-h) + 12px); }

/* المشهدُ البعيد عن الشاشة لا يعمل: حلقاتُه تقف. ولا `will-change` يُبدَّل مع
   الاقتراب: تبديلُه يغيّر الحاويةَ المرجعيّة لِما تحته فيعيد تخطيطَ اللقطات —
   قِيس ٢٥ مللي للمرّة في مشهد التشغيل. و`translate3d` يكفي لترقية ما يتحرّك. */
.motion .sc.is-off *, .motion .sc.is-off *::before, .motion .sc.is-off *::after { animation-play-state: paused !important; }

/* من طلب تقليلَ الحركة: الصفحةُ مكدَّسةٌ ساكنة، والمشاهدُ تظهر بتلاشٍ وحده
   — عتامةٌ بلا انتقال، وهو كلُّ ما يُستثنى من قاعدة `tokens.css` العامّة. */
.calm .rv { opacity: 0; }
.calm .rv.in { opacity: 1; transition: opacity .6s ease !important; }

/* ═══════════════════ الشاشات الضيّقة ═══════════════════════════════════ */
/* ستّةُ روابطَ وزرّان لا تتّسع تحت ١١٨٠: تنكسر سطرين وتدفع الشريطَ فوق المشهد.
   فالدرجُ يبدأ من هنا — والسينما تبقى من ١٠٢٤. */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav-end .sf-lang, .nav-end .btn-quiet { display: none; }
  .nav-burger { display: grid; }
}

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

  /* دخولٌ أقصر على الهاتف: العنوانُ أوّلُ ما يُرى، والنافذةُ تحته. */
  .t-pill { --t: .15s; } .t-l1 { --t: .2s; } .t-l2 { --t: .3s; } .t-lede { --t: .5s; }
  .t-cta { --t: .65s; } .t-assure { --t: .8s; } .t-sales { --t: 1s; } .t-notify { --t: 1.15s; }
  .motion .tilt-in { animation-delay: .6s; }
}

@media (max-width: 700px) {
  :root { --nav-h: 64px; }
  body { font-size: 15.5px; }
  .cta-row .btn { inline-size: 100%; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .pd-limits { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .br-cards, .an-cmps { grid-template-columns: minmax(0, 1fr); }
  .pd-panel {
    inset-block: auto 0; inset-inline: 0; inline-size: auto; max-block-size: 92vh;
    border-inline-end: 0; border-start-start-radius: 22px; border-start-end-radius: 22px;
    transform: translateY(100%);
  }
  .sat { font-size: 11.5px; }
  .pin b { font-size: 11.5px; padding-inline: 8px; }
}