/* ═══════════════════════════════════════════════════════════════════════
   وَصل — أدواتُ أصحاب المطاعم بلوحة الليل.  (`theme="tools"` في قالب التسويق)

   تُحمَّل **بعد** `landing.css`: الشريطُ والتذييلُ والأزرارُ و`.sec` وخطّا
   Changa وAlexandria كلُّها من هناك — فالمركزُ والحاسباتُ الثماني تُقرأ
   امتدادًا للصفحة التعريفية لا موقعًا ثانيًا. وكانت على `marketing.css`
   البيضاء بأيقونات خطوطٍ على أبيض، فقال المالك (٢٠٢٦-١٠-١٩): «حاسس إن
   الشاشة دي غير الباقي، وحاسس إن مفيهاش روح».

   ── الرموزُ تُربَط بلوحة الليل، والقواعدُ كما كانت ──

   قواعدُ `tl-*` كُتبت بالرموز وحدها (`--surface` · `--ink-500` ·
   `--brand-500` …) لا بألوانٍ خامّة. فنُقلت من `marketing.css` كما هي،
   وتُربَط الرموزُ هنا بلوحة الصفحة (`--lm-*`) ولوحة المنتج الداكنة
   (`--u-*`) — والأحمرُ للفعل كما في الصفحة، لا العنّابيُّ الذي لا يُرى
   على أرضيةٍ قريبةٍ من السواد. ولا لونَ خامٌّ في القواعد إلّا طبقاتُ
   القناع فوق الصور: تدرّجٌ معتمٌ لا لونَ سِمة.

   ── والصورةُ أوّلًا ──

   لكلِّ أداةٍ صورةٌ حقيقيّةٌ من صور الصفحة التعريفية (`ToolCatalogue::photo`):
   على بطاقتها في المركز، وخلفيّةً لترويستها، ومصغّرةً بين أخواتها. ولا صورةَ
   من خارج المستودع.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* السطوحُ والخطوط */
  --surface:      var(--lm-panel);
  --surface-sunk: var(--lm-bg-2);
  --line:         var(--lm-line);
  --line-strong:  var(--lm-line-2);

  /* الحبر — `--lm-ink-3` أدنى ما يُقرأ على اللوح (٦٫٣ على `--lm-panel`). */
  --ink-900: var(--lm-ink);
  --ink-800: var(--lm-ink);
  --ink-700: var(--lm-ink-2);
  --ink-600: var(--lm-ink-2);
  --ink-500: var(--lm-ink-3);
  --ink-300: var(--lm-line-2);

  /* العلامة: أحمرُ الصفحة — تعبئتُه للفعل، وفاتحُه للنصّ والخطّ على الداكن. */
  --brand-500: var(--lm-red);
  --brand-600: var(--lm-red-hi);
  --brand-400: var(--lm-red-hi);
  --brand-300: rgba(255, 92, 102, .5);
  --brand-200: rgba(255, 92, 102, .3);
  --brand-100: rgba(217, 31, 44, .2);
  --brand-50:  rgba(217, 31, 44, .1);

  /* الحالاتُ من لوحة المنتج الداكنة — ما سيراه صاحبُ المطعم في لوحته بعد الشراء. */
  --ok-500: var(--u-green);   --ok-600: var(--u-green);   --ok-tint: var(--u-green-tint);
  --warn-500: var(--u-amber); --warn-600: var(--u-amber); --warn-tint: var(--u-amber-tint);
  --danger-500: var(--u-coral); --danger-600: var(--u-coral); --danger-tint: var(--u-coral-tint);
  --info-600: var(--u-blue);  --info-tint: var(--u-blue-tint);
}

/* ═══════════════════ ما كانت تعطيه `marketing.css` ═════════════════════ */

/* المربّعُ الحامل للأيقونة — زجاجٌ داكنٌ بحدٍّ أحمرَ خافت. */
.ic-box {
  display: grid; place-items: center;
  inline-size: 44px; block-size: 44px;
  border-radius: 12px;
  background: rgba(217, 31, 44, .12);
  border: 1px solid rgba(255, 92, 102, .28);
  color: var(--lm-red-hi);
  flex: none;
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, .06); color: var(--lm-ink-2);
  border: 1px solid var(--lm-line-2);
}

.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.is-locked { overflow: hidden; }

/* العناوينُ بخطّ العرض، والرقمُ الواقفُ كذلك — كما في الصفحة التعريفية. */
.tl-photo-hero h1, .tl-card h2, .tl-panel-head h2, .tl-cta-box h2, .tl-lead-copy h2,
.tl-big, .tl-val, .tl-kind b, .tl-metric strong, .tl-more-card strong {
  font-family: var(--font-display);
}

/* ═══════════════════ الصورةُ البطلة — المركزُ وترويسةُ كلِّ أداة ═══════
   الشريطُ ثابتٌ فوق الصفحة (`landing.css`)، فالبطلُ يبدأ من أعلاها ويحسب
   ارتفاعَ الشريط في حشوته. والصورةُ تملأ القسمَ بقناعين: ظلٌّ من بداية
   السطر حيث يُقرأ النصّ، وظلٌّ من الأسفل يذيبها في الأرضية — فالنصُّ لا
   يقع على وجهٍ أو لهبٍ أبيض أبدًا. */
.tl-photo-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end;
  min-block-size: clamp(460px, 62vh, 640px);
  padding-block: calc(var(--nav-h) + 48px) clamp(40px, 6vw, 72px);
  background: var(--lm-bg);
}
.tl-photo-hero--tool { min-block-size: clamp(400px, 54vh, 540px); }
.tl-photo-hero > .tl-photo-bg {
  position: absolute; inset: 0; z-index: -2;
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: center 40%;
}
.tl-photo-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to left, rgba(6, 8, 12, .94) 0%, rgba(6, 8, 12, .78) 38%, rgba(6, 8, 12, .3) 72%, rgba(6, 8, 12, .5) 100%),
    linear-gradient(to top, #06080C 0%, rgba(6, 8, 12, .55) 34%, rgba(6, 8, 12, 0) 62%);
}
[dir="ltr"] .tl-photo-hero::before {
  background:
    linear-gradient(to right, rgba(6, 8, 12, .94) 0%, rgba(6, 8, 12, .78) 38%, rgba(6, 8, 12, .3) 72%, rgba(6, 8, 12, .5) 100%),
    linear-gradient(to top, #06080C 0%, rgba(6, 8, 12, .55) 34%, rgba(6, 8, 12, 0) 62%);
}
.tl-photo-copy { max-inline-size: 640px; display: grid; justify-items: start; gap: 14px; }
.tl-photo-hero h1 {
  margin: 0;
  font-size: clamp(36px, 5.6vw, 72px); font-weight: 700; line-height: 1.12;
  color: var(--lm-ink); text-wrap: balance;
}
.tl-photo-hero--tool h1 { font-size: clamp(32px, 4.6vw, 58px); }
.tl-photo-copy > p { margin: 0; color: var(--lm-ink-2); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.9; max-inline-size: 56ch; }

/* ثلاثُ حقائقَ لا شعار: كم أداة، وبلا تسجيل، والحسابُ في المتصفّح. */
.tl-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.tl-facts li {
  display: inline-flex; align-items: center; gap: 8px;
  min-block-size: 36px; padding-inline: 14px;
  border-radius: 999px;
  background: rgba(6, 8, 12, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--lm-ink); font-size: 14px; font-weight: 600;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tl-facts .ic { color: var(--lm-red-hi); }

/* القسمُ بعد البطل لا يبدأ بفراغ مشهدٍ كامل: البطلُ هو المسافة. */
.tl-photo-hero + .sec { padding-block-start: clamp(36px, 5vw, 64px); }

.tl-crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 4px; color: var(--lm-ink-3); }
.tl-crumb a { color: var(--lm-ink-2); min-block-size: 44px; display: inline-flex; align-items: center; }
.tl-crumb a:hover { color: var(--lm-ink); }

/* ═══════════════════ المركز — بطاقةٌ لكلِّ أداة بصورتها ════════════════ */
.tl-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
}

/* البطاقةُ رابطٌ كامل: هدفُ اللمس هو البطاقة، والصورةُ رأسُها. */
.tl-card {
  position: relative; display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--lm-panel);
  border: 1px solid var(--lm-line);
  border-radius: 18px;
  color: inherit;
  transition: border-color .25s var(--ease), transform .35s var(--out), box-shadow .35s var(--ease);
}
.tl-card:hover {
  border-color: rgba(255, 92, 102, .45);
  transform: translateY(-4px);
  box-shadow: 0 26px 60px -30px rgba(229, 32, 46, .55);
}
.tl-card:focus-visible { outline: 2px solid var(--lm-red-hi); outline-offset: 3px; }

.tl-card-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--lm-bg-2); }
.tl-card-photo img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--out), filter .4s var(--ease);
  filter: saturate(.92) brightness(.86);
}
.tl-card:hover .tl-card-photo img { transform: scale(1.09); filter: saturate(1.05) brightness(.95); }
.tl-card-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, #0F141C 0%, rgba(15, 20, 28, .35) 45%, rgba(15, 20, 28, 0) 75%);
}
/* الأيقونةُ على حافّة الصورة — تربطها بجسد البطاقة. */
.tl-card-photo .ic-box {
  position: absolute; inset-block-end: 14px; inset-inline-start: 16px; z-index: 1;
  background: rgba(6, 8, 12, .72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.tl-card-body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 18px 20px 20px; }
.tl-card h2 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.35; color: var(--lm-ink); }
.tl-card p { margin: 0; color: var(--lm-ink-2); font-size: 14.5px; line-height: 1.8; flex: 1 1 auto; }

.tl-card-tag {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px; z-index: 1;
  display: inline-flex; align-items: center; min-block-size: 28px; padding-inline: 12px;
  border-radius: 999px;
  background: var(--lm-red); color: var(--lm-white);
  font-size: 12.5px; font-weight: 700;
  box-shadow: 0 10px 24px -10px rgba(229, 32, 46, .9);
}
.tl-card-go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-block-start: 6px;
  color: var(--lm-red-hi); font-weight: 700; font-size: 15px;
}
.tl-card-go .ic { transition: transform .3s var(--out); }
.tl-card:hover .tl-card-go .ic { transform: translateX(calc(var(--dir) * 4px)); }

/* ═══════════════════ الأداة مقابل المنتج ═══════════════════════════════ */
.tl-vs-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.tl-vs-col {
  padding: 28px;
  background: var(--lm-panel);
  border: 1px solid var(--lm-line);
  border-radius: 18px;
}
.tl-vs-col--on {
  border-color: rgba(255, 92, 102, .5);
  background: linear-gradient(160deg, rgba(217, 31, 44, .16), rgba(15, 20, 28, 0) 60%), var(--lm-panel);
  box-shadow: 0 30px 70px -40px rgba(229, 32, 46, .7);
}
.tl-vs-col--on .chip { background: var(--lm-red); border-color: var(--lm-red); color: var(--lm-white); }
.tl-vs-col ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.tl-vs-col li { color: var(--lm-ink-2); font-size: 16px; line-height: 1.7; padding-inline-start: 22px; position: relative; }
.tl-vs-col--on li { color: var(--lm-ink); }
.tl-vs-col li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 10px;
  inline-size: 8px; block-size: 8px; border-radius: 999px;
  background: var(--lm-line-2);
}
.tl-vs-col--on li::before { background: var(--lm-red-hi); box-shadow: 0 0 12px rgba(255, 92, 102, .7); }

/* ═══════════════════ الحاسبة — منقولةٌ من `marketing.css` كما هي ═══════
   والرموزُ في رأس الورقة تجعلها ليلًا. */

/* ── جسد الحاسبة ────────────────────────────────────────────────────── */
.tl-calc { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }

.tl-panel {
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.tl-panel-head { display: flex; align-items: flex-start; gap: var(--s3); margin-block-end: var(--s5); }
.tl-panel-head h2 { font-size: 19px; margin: 0; }
.tl-panel-head p { color: var(--ink-500); font-size: 14px; margin-block-start: 2px; line-height: 1.7; }

/* الحقل: سؤالٌ ثم سببُه ثم القيمةُ الحيّة ثم المِزلاق. والسببُ ليس زخرفة —
   صاحبُ المطعم لا يعرف «الفود كوست» بالضرورة، ويترك الحقلَ لو لم يُشرَح. */
.tl-field { margin-block-end: var(--s5); }
.tl-field:last-child { margin-block-end: 0; }
.tl-q { font-weight: 700; font-size: 15.5px; color: var(--ink-800); margin: 0 0 2px; }
.tl-why { color: var(--ink-500); font-size: 13px; line-height: 1.7; margin: 0 0 var(--s3); }
.tl-val {
  font-size: 22px; font-weight: 800; color: var(--brand-600);
  font-variant-numeric: tabular-nums; margin-block-end: var(--s2);
  unicode-bidi: plaintext;
}

.tl-scale { display: flex; justify-content: space-between; color: var(--ink-500); font-size: 12px; margin-block-start: var(--s1); }

/* المِزلاق: الجزءُ المقطوعُ ملوَّنٌ بالعلامة عبر `--p` من السكربت.
   والتدرّجُ `to left` لأن السطحَ عربيٌّ يبدأ من اليمين. */
.tl-range {
  /* `--p` نسبةُ الجزء المقطوع، يكتبها السكربتُ على العنصر نفسِه. وتُعلَن
     هنا صفرًا لا تُترك للاحتياطيّ: رمزٌ غيرُ معرَّفٍ في أيِّ ورقة يشكو
     منه `verify_live_surfaces` بحقّ — الاحتياطيُّ يُنجي هذا التصريح
     وحدَه، ولا يُنجي رمزًا يُستعمل غدًا في موضعٍ بلا احتياطيّ. */
  --p: 0%;
  /* **الحقلُ ٤٤px والمسارُ المرسوم ٦px في منتصفه** (٢٠٢٦-١٠-١٩): كان الحقلُ نفسُه ٦px — إصبعٌ يلمسه فوق
     المسار أو تحته لا يمسكه، والمؤشّرُ وحده ٢٢px. فالتدرّجُ خلفيّةٌ بارتفاع ٦px متوسّطة لا ارتفاعُ العنصر. */
  inline-size: 100%; block-size: 44px; margin: 0;
  appearance: none; -webkit-appearance: none;
  background: linear-gradient(to left, var(--brand-500) var(--p), var(--line-strong) var(--p)) center / 100% 6px no-repeat;
  cursor: pointer;
}
[dir="ltr"] .tl-range {
  background: linear-gradient(to right, var(--brand-500) var(--p), var(--line-strong) var(--p)) center / 100% 6px no-repeat;
}
.tl-range:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 4px; }
.tl-range::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  inline-size: 22px; block-size: 22px; border-radius: var(--r-full);
  background: var(--surface); border: 3px solid var(--brand-500);
  cursor: grab;
}
.tl-range::-moz-range-thumb {
  inline-size: 16px; block-size: 16px; border-radius: var(--r-full);
  background: var(--surface); border: 3px solid var(--brand-500);
  cursor: grab;
}

/* حقلٌ رقميٌّ مكتوب — للأدوات التي تأخذ مبالغ لا نسبًا. */
.tl-num {
  inline-size: 100%;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  background: var(--surface);
  color: var(--ink-800);
  font: inherit; font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.tl-num:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; border-color: var(--brand-400); }

/* ── النتيجة ────────────────────────────────────────────────────────── */
.tl-result { position: sticky; inset-block-start: var(--s8); }
.tl-hero-num { text-align: center; padding-block: var(--s5) var(--s4); }
.tl-lbl { color: var(--ink-500); font-size: 14px; }
.tl-big {
  font-size: clamp(38px, 6vw, 56px); font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--brand-500);
  margin-block: var(--s2);
}
.tl-big.ok   { color: var(--ok-600); }
.tl-big.warn { color: var(--warn-600); }
.tl-big.bad  { color: var(--danger-600); }
.tl-sub { color: var(--ink-500); font-size: 14px; }

.tl-stamp {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-full);
  font-size: 13px; font-weight: 700;
  background: var(--ok-tint); color: var(--ok-600);
}
.tl-stamp.warn { background: var(--warn-tint); color: var(--warn-600); }
.tl-stamp.bad  { background: var(--danger-tint); color: var(--danger-600); }

/* الشرائح: نصيبُ كلِّ بندٍ من الرقم الكبير. */
.tl-bars { display: grid; gap: var(--s3); margin-block-start: var(--s5); }
.tl-bar-h { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-600); margin-block-end: 4px; }
.tl-bar-h b { color: var(--ink-800); font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }
.tl-bar-t { block-size: 8px; border-radius: var(--r-full); background: var(--surface-sunk); overflow: hidden; }
.tl-bar-f {
  block-size: 100%; inline-size: 0; border-radius: var(--r-full);
  background: var(--brand-500);
  transition: inline-size 700ms var(--ease);
}
.tl-bar-f.warn { background: var(--warn-500); }
.tl-bar-f.bad  { background: var(--danger-500); }
.tl-bar-f.ok   { background: var(--ok-500); }

.tl-metrics { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); margin-block-start: var(--s5); }
.tl-metric {
  padding: var(--s3) var(--s4);
  background: var(--surface-sunk);
  border-radius: var(--r-md);
  font-size: 13px; color: var(--ink-500);
  display: grid; gap: var(--s1);
}
.tl-metric strong {
  font-size: 17px; color: var(--ink-800); font-weight: 800;
  font-variant-numeric: tabular-nums; unicode-bidi: plaintext;
}
.tl-metric--hl { background: var(--brand-50); }
.tl-metric--hl strong { color: var(--brand-600); }

.tl-insight {
  margin-block-start: var(--s5);
  padding: var(--s4);
  background: var(--info-tint);
  border-radius: var(--r-md);
  color: var(--ink-700); font-size: 14.5px; line-height: 1.85;
}
.tl-insight b { color: var(--ink-900); }
.tl-insight.bad { background: var(--danger-tint); }

.tl-empty { color: var(--ink-500); text-align: center; padding-block: var(--s7); font-size: 15px; line-height: 1.8; }

.tl-send { margin-block-start: var(--s5); }
.tl-send .btn { inline-size: 100%; }
.tl-privacy { color: var(--ink-500); font-size: 12.5px; text-align: center; margin-block-start: var(--s3); line-height: 1.7; }

/* ── جدول تحليل المنيو ──────────────────────────────────────────────── */
.tl-table { inline-size: 100%; border-collapse: collapse; font-size: 14px; }
.tl-table th {
  text-align: start; padding: var(--s2) var(--s3);
  color: var(--ink-500); font-weight: 600; font-size: 12.5px; white-space: nowrap;
  border-block-end: 1px solid var(--line);
}
.tl-table td { padding: var(--s2); border-block-end: 1px solid var(--line); }
.tl-table .tl-num { padding: var(--s2); font-size: 14px; }
.tl-del {
  inline-size: 34px; block-size: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-500); cursor: pointer;
}
.tl-del:hover { border-color: var(--danger-500); color: var(--danger-600); }

.tl-kinds { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); margin-block-start: var(--s5); }
.tl-kind { padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--surface-sunk); display: grid; gap: 2px; }
.tl-kind b { font-size: 20px; font-variant-numeric: tabular-nums; }
.tl-kind small { color: var(--ink-500); font-size: 12.5px; line-height: 1.6; }
.tl-kind.star   b { color: var(--ok-600); }
.tl-kind.plow   b { color: var(--info-600); }
.tl-kind.puzzle b { color: var(--warn-600); }
.tl-kind.dog    b { color: var(--danger-600); }

/* ── اختبار الفرع ───────────────────────────────────────────────────── */
.tl-quiz { display: grid; gap: var(--s4); }
.tl-quiz-q { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); }
.tl-quiz-q p { margin: 0 0 var(--s3); font-weight: 700; font-size: 15px; color: var(--ink-800); line-height: 1.7; }
.tl-choices { display: flex; gap: var(--s2); flex-wrap: wrap; }
.tl-choice {
  padding: var(--s2) var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink-600);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.tl-choice[aria-pressed="true"] { background: var(--brand-500); border-color: var(--brand-500); color: var(--white); }
.tl-choice:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* ── نموذج «سيب بياناتك» ────────────────────────────────────────────────
   بديلُ زرِّ الواتساب لمن لن يفتحه (تدقيق ما قبل الإطلاق · أ-13). لوحٌ بعمودين
   على الواسعة — لماذا، ثم الحقول — وعمودٌ واحدٌ تحت ٩٠٠.

   **و`[hidden]` يُعاد إعلانُه هنا**: اللوحُ والنموذجُ وزرُّ الواتساب تحمل كلُّها
   `display` مصرَّحةً (`grid` · `inline-flex` من `.btn`)، وهي تبطل قاعدةَ
   المتصفّح — فيُرسَم ما يحمل `hidden`. وقع هذا في درج الملاحة فوق. */
.tl-lead {
  display: grid; gap: var(--s6); grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); align-items: start;
  margin-block-start: var(--s6);
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.tl-lead[hidden], .tl-lead [hidden] { display: none; }

.tl-lead-copy h2 { font-size: clamp(20px, 2.6vw, 26px); margin-block: var(--s3) var(--s3); }
.tl-lead-copy p { color: var(--ink-600); font-size: 15px; line-height: 1.85; margin: 0; }

.tl-lead-body { display: grid; gap: var(--s4); min-inline-size: 0; }
.tl-lead-form { display: grid; gap: var(--s4); }
/* عمودان حين يتّسع الصفُّ لهما وعمودٌ حين يضيق — **بعرض الحقل لا بعرض الشاشة**:
   عمودان ثابتان أعطيا خانةَ الموبايل ٨٠px على هاتفٍ بعرض ٣٢٠، فلا يُرى من الأحدَ عشر
   رقمًا التي يكتبها صاحبُها إلّا سبعة. ولا فاحصَ يرى ذلك: الخانةُ لا تفيض، هي تقصّ ما فيها. */
.tl-lead-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.tl-lead-f { display: grid; gap: var(--s2); align-content: start; min-inline-size: 0; }
.tl-lead-f label { font-weight: 700; font-size: 14.5px; color: var(--ink-800); }
.tl-lead-opt { font-weight: 400; font-size: 12.5px; color: var(--ink-600); }
.tl-lead-f .tl-num[aria-invalid="true"] { border-color: var(--danger-500); }
.tl-lead-hint { color: var(--ink-600); font-size: 12.5px; line-height: 1.6; margin: 0; }
.tl-lead-err { color: var(--danger-600); font-size: 13px; font-weight: 600; line-height: 1.6; margin: 0; }

.tl-lead-consent { color: var(--ink-600); font-size: 12.5px; line-height: 1.8; margin: 0; }
.tl-lead-consent a { color: var(--brand-600); font-weight: 700; text-decoration: underline; }

.tl-lead-after { display: grid; gap: var(--s3); justify-items: start; }
.tl-lead-done, .tl-lead-fail {
  margin: 0; padding: var(--s4);
  border-radius: var(--r-md);
  font-size: 15px; line-height: 1.85; color: var(--ink-800);
}
.tl-lead-done { background: var(--ok-tint); }
.tl-lead-fail { background: var(--danger-tint); }

/* ── أخوات الأداة: مصغّرةٌ بصورتها ───────────────────────────────────── */
.tl-more-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.tl-more-card {
  display: grid; grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--lm-panel);
  border: 1px solid var(--lm-line);
  border-radius: 16px;
  color: inherit;
  transition: border-color .25s var(--ease), transform .35s var(--out);
}
.tl-more-card:hover { border-color: rgba(255, 92, 102, .45); transform: translateY(-3px); }
.tl-more-card:focus-visible { outline: 2px solid var(--lm-red-hi); outline-offset: 3px; }
.tl-more-photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--lm-bg-2); }
.tl-more-photo img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  filter: saturate(.9) brightness(.82);
  transition: transform 1s var(--out), filter .4s var(--ease);
}
.tl-more-card:hover .tl-more-photo img { transform: scale(1.07); filter: saturate(1.05) brightness(.95); }
.tl-more-text { display: grid; gap: 6px; align-content: start; padding: 14px 16px 16px; }
.tl-more-card strong { font-size: 17px; font-weight: 700; color: var(--lm-ink); line-height: 1.4; }
.tl-more-card small { color: var(--lm-ink-2); font-size: 13.5px; line-height: 1.7; }

/* ── الدعوة: سُفرةٌ حقيقيّة تحت الكلام، كخاتمة الصفحة التعريفية ───────── */
.tl-cta-box {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  background: var(--lm-bg-2);
}
.tl-cta-photo {
  position: absolute; inset: 0; z-index: -2;
  inline-size: 100%; block-size: 100%; object-fit: cover;
}
.tl-cta-box::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to left, rgba(6, 8, 12, .95) 0%, rgba(6, 8, 12, .82) 55%, rgba(6, 8, 12, .6) 100%),
    radial-gradient(60% 90% at 0% 100%, rgba(217, 31, 44, .28), rgba(217, 31, 44, 0) 70%);
}
[dir="ltr"] .tl-cta-box::before {
  background:
    linear-gradient(to right, rgba(6, 8, 12, .95) 0%, rgba(6, 8, 12, .82) 55%, rgba(6, 8, 12, .6) 100%),
    radial-gradient(60% 90% at 100% 100%, rgba(217, 31, 44, .28), rgba(217, 31, 44, 0) 70%);
}
.tl-cta-box h2 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; line-height: 1.25; margin: 0 0 12px; color: var(--lm-ink); text-wrap: balance; }
.tl-cta-box p { color: var(--lm-ink-2); font-size: 17px; line-height: 1.85; margin: 0; max-inline-size: 60ch; }
.tl-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── اللوح والحقول بزجاج الليل ───────────────────────────────────────── */
/* اللاصقُ تحت الشريط الثابت لا تحته. */
.tl-result { inset-block-start: calc(var(--nav-h) + 20px); }
.tl-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 40%), var(--lm-panel);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -40px rgba(0, 0, 0, .8);
}
.tl-result .tl-panel { border-color: rgba(255, 92, 102, .3); }
.tl-num { background: var(--lm-bg); border-radius: 12px; min-block-size: 48px; }
.tl-num:focus-visible { outline-color: var(--lm-red-hi); border-color: var(--lm-red-hi); }
.tl-big { text-shadow: 0 0 36px rgba(229, 32, 46, .35); }
.tl-lead { border-radius: 18px; background: linear-gradient(160deg, rgba(217, 31, 44, .1), rgba(15, 20, 28, 0) 55%), var(--lm-panel); }

/* ═══════════════════ الحركة ═════════════════════════════════════════════
   صورةُ البطل تتحرّك ببطءٍ شديد (Ken Burns) — الحياةُ التي طلبها المالك بلا ضجيج.
   ومن طلب تقليلَ الحركة يراها ثابتة، ولا تكبيرَ عند المرور. */
@media (prefers-reduced-motion: no-preference) {
  .tl-photo-hero > .tl-photo-bg { animation: tl-drift 26s var(--ease) infinite alternate; }
}
@keyframes tl-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(calc(var(--dir) * -1.5%), -1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tl-card, .tl-card-photo img, .tl-more-card, .tl-more-photo img, .tl-card-go .ic { transition: none; }
  .tl-card:hover, .tl-more-card:hover { transform: none; }
  .tl-card:hover .tl-card-photo img, .tl-more-card:hover .tl-more-photo img { transform: none; }
}

/* ── الضيّق ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tl-lead { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 24px; }
  .tl-calc { grid-template-columns: minmax(0, 1fr); }
  /* اللاصقُ يفقد معناه في عمودٍ واحد: النتيجةُ تحت النموذج لا بجانبه،
     فتثبيتُها يحجب الحقولَ التي تُملأ. */
  .tl-result { position: static; }
  .tl-cta-box { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .tl-photo-hero { min-block-size: 0; padding-block-start: calc(var(--nav-h) + 96px); }
  .tl-photo-hero::before {
    background: linear-gradient(to top, #06080C 0%, rgba(6, 8, 12, .86) 45%, rgba(6, 8, 12, .5) 100%);
  }
  .tl-cta-box::before { background: linear-gradient(to top, rgba(6, 8, 12, .96) 0%, rgba(6, 8, 12, .84) 100%); }
  .tl-vs-col { padding: 22px; }
}