/* ============================================================
   Attendly — landing.css : صفحة الاستقبال التعريفية
   ============================================================ */

/* ⚠ كان هنا html:has(.lp) — و:has() ماشي مدعومة فـSafari قبل 15.4
   ولا فمتصفحات أندرويد القديمة، يعني القاعدة كانت كتخدم عند البعض
   وما كتخدمش عند البعض الآخر. وهي زائدة أصلاً: .lp هي body، ومنين
   كيكون عندها max-width:100% وoverflow-x:hidden، html ما بقا عندو
   محتوى كيفيض يمرّرو أفقياً. */
.lp{overflow-x:hidden;max-width:100%}

/* ---------- الرأس ---------- */
.lp-header{
  position:sticky;top:0;z-index:100;
  background:var(--surface);
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:var(--transition);
}
.lp-header.scrolled{border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}
.lp-bar{
  max-width:1240px;margin:0 auto;padding:13px 22px;
  display:flex;align-items:center;gap:18px;
}
.lp-links{display:flex;align-items:center;gap:5px;margin-inline-start:26px}
.lp-links a{
  padding:8px 13px;border-radius:10px;font-size:14px;font-weight:600;
  color:var(--text-soft);transition:var(--transition);
}
.lp-links a:hover{background:var(--brand-50);color:var(--brand-700);text-decoration:none}
.lp-actions{margin-inline-start:auto;display:flex;align-items:center;gap:9px}
.lp-burger{display:none}

.lp-drawer{
  position:fixed;inset:0;z-index:150;background:var(--surface);
  padding:22px;display:flex;flex-direction:column;gap:6px;animation:fade .2s;
}
.lp-drawer a{
  padding:14px 12px;border-radius:12px;font-size:16px;font-weight:700;color:var(--text);
  border-bottom:1px solid var(--line);
}
.lp-drawer a:hover{text-decoration:none;background:var(--surface-2)}

/* ---------- أقسام عامة ---------- */
.sec{max-width:1240px;margin:0 auto;padding:80px 22px;scroll-margin-top:80px}
.sec-head{text-align:center;max-width:680px;margin:0 auto 46px}
.sec-head h2{font-size:36px;letter-spacing:-1px;margin-bottom:12px}
.sec-head p{font-size:16.5px;color:var(--text-mute);line-height:1.8}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:var(--r-pill);
  background:var(--brand-100);color:var(--brand-700);font-size:12.5px;font-weight:800;
  margin-bottom:16px;letter-spacing:.2px;
}
[data-theme="dark"] .eyebrow{color:var(--brand-300)}

/* ---------- البطل ---------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--grad-hero);color:#eaf1ff;
}
.hero::before{
  content:"";position:absolute;width:820px;height:820px;border-radius:50%;
  background:radial-gradient(circle,rgba(59,130,246,.34),transparent 65%);
  top:-380px;inset-inline-start:-220px;pointer-events:none;
}
.hero::after{
  content:"";position:absolute;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.22),transparent 68%);
  bottom:-330px;inset-inline-end:-160px;pointer-events:none;
}
.hero-grid{
  max-width:1240px;margin:0 auto;padding:64px 22px 90px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;
  position:relative;z-index:1;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  font-size:13px;font-weight:700;color:#cfe2ff;margin-bottom:22px;
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan-400);
  box-shadow:0 0 0 0 rgba(34,211,238,.7);animation:pulse 2s infinite}
.hero h1{font-size:52px;line-height:1.22;letter-spacing:-1.6px;color:#fff;font-weight:900}
.hero h1 em{font-style:normal;
  background:linear-gradient(120deg,var(--cyan-300),var(--brand-300));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-sub{margin-top:20px;font-size:17px;line-height:1.9;color:#bed3f2;max-width:520px}
.hero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero-note{margin-top:16px;font-size:13px;color:#93b3de;display:flex;align-items:center;gap:8px}

.hero-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
  max-width:1240px;margin:0 auto;padding:0 22px 64px;position:relative;z-index:1;
}
.hero-stat{
  padding:18px 20px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
}
.hero-stat b{display:block;font-size:30px;font-weight:900;color:#fff;letter-spacing:-1px;line-height:1.2}
.hero-stat span{font-size:12.5px;color:#a8c4e8}

/* ---------- نموذج الشاشة ---------- */
.mock{
  border-radius:18px;overflow:hidden;background:var(--surface);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 80px rgba(3,10,30,.55);
}
.mock-bar{
  display:flex;align-items:center;gap:7px;padding:11px 14px;
  background:var(--surface-2);border-bottom:1px solid var(--line);
}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:var(--line-strong);display:block}
.mock-bar i:nth-child(1){background:#ff5f57}
.mock-bar i:nth-child(2){background:#febc2e}
.mock-bar i:nth-child(3){background:#28c840}
.mock-url{
  margin-inline-start:12px;flex:1;height:22px;border-radius:99px;background:var(--bg-soft);
  display:flex;align-items:center;padding:0 12px;font-size:10.5px;color:var(--text-mute);
  font-weight:600;direction:ltr;
}

/* ⚠ اتحيّدو من هنا: .mock-body/.mock-row/.mock-side/.mock-main/
   .mock-cards/.mock-card/.mock-chart/.mock-list/.mock-line —
   27 سطر ديال لوحة قيادة مزوّرة بالـCSS. تعوّضات بلقطة حقيقية
   (hero-*.jpg) وبقات فالملف. اللي باقي (.mock/.mock-bar/.mock-url)
   هو إطار المتصفح اللي كيلفّ اللقطة، ومازال مستعمل. */

.hero-visual{position:relative}
.float-card{
  position:absolute;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:13px 15px;
  display:flex;align-items:center;gap:11px;animation:floaty 5s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.float-card b{display:block;font-size:13px;line-height:1.3}
.float-card span{font-size:11px;color:var(--text-mute)}
.float-qr{bottom:-26px;inset-inline-start:-28px;animation-delay:.4s}
.float-qr .qrbox{width:52px;height:52px;border-radius:10px;background:#fff;padding:3px;flex:none;box-shadow:var(--shadow-sm)}
.float-qr .qrbox svg{width:100%;height:100%;display:block}
.float-alert{top:-24px;inset-inline-end:-20px}
.float-alert .ic{
  width:36px;height:36px;border-radius:11px;background:var(--rose-100);color:var(--rose-600);
  display:grid;place-items:center;flex:none;
}

/* ---------- كيف يعمل ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:step}
.step{
  position:relative;padding:26px 22px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);transition:var(--transition);
}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--brand-200)}
.step .n{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:var(--grad-brand);color:#fff;font-weight:900;font-size:18px;margin-bottom:15px;
  box-shadow:var(--shadow-brand);
}
.step h3{font-size:16.5px;margin-bottom:9px}
.step p{font-size:14px;color:var(--text-mute);line-height:1.8}
.step::after{
  content:"";position:absolute;top:48px;inset-inline-end:-18px;width:18px;height:2px;
  background:linear-gradient(90deg,var(--brand-300),transparent);
}
.step:last-child::after{display:none}

/* ---------- المزايا ---------- */
.feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.feat{
  padding:24px 22px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);transition:var(--transition);
}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand-200)}
.feat .ic{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:15px;
  background:var(--brand-100);color:var(--brand-700);
}
.feat:nth-child(4n+2) .ic{background:var(--cyan-100);color:var(--cyan-700)}
.feat:nth-child(4n+3) .ic{background:var(--green-100);color:var(--green-700)}
.feat:nth-child(4n+4) .ic{background:var(--gold-100);color:var(--gold-700)}
.feat h3{font-size:15.5px;margin-bottom:8px}
.feat p{font-size:13.8px;color:var(--text-mute);line-height:1.8}

/* ---------- البوابات ---------- */
.roles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.role-card{
  padding:24px 20px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--surface);transition:var(--transition);position:relative;overflow:hidden;
}
.role-card::before{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--brand-500);
  opacity:0;transition:var(--transition);
}
.role-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.role-card:hover::before{opacity:1}
.role-card .ic{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin-bottom:14px;
  background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-brand);
}
.role-card:nth-child(2) .ic{background:var(--grad-cyan);color:#04262f;box-shadow:0 8px 20px rgba(8,145,178,.3)}
.role-card:nth-child(3) .ic{background:linear-gradient(135deg,#10b981,#047857);box-shadow:0 8px 20px rgba(5,150,105,.3)}
.role-card:nth-child(4) .ic{background:linear-gradient(135deg,#fbbf24,#d97706);color:#3a2400;box-shadow:0 8px 20px rgba(217,119,6,.3)}
.role-card:nth-child(5) .ic{background:linear-gradient(135deg,#8b5cf6,#6d28d9);box-shadow:0 8px 20px rgba(124,58,237,.3)}
.role-card h3{font-size:16px;margin-bottom:8px}
.role-card p{font-size:13.5px;color:var(--text-mute);line-height:1.75;margin-bottom:14px}
.role-card ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.role-card li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-soft)}
.role-card li svg{color:var(--green-600);flex:none}

/* ---------- المعرض ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.shot{
  border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow);transition:var(--transition);
}
.shot:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.shot-screen{
  padding:18px;background:var(--grad-hero);min-height:268px;
  display:flex;align-items:center;justify-content:center;
}
.shot-cap{padding:18px 20px}
.shot-cap h3{font-size:15.5px;margin-bottom:6px}
.shot-cap p{font-size:13.3px;color:var(--text-mute);line-height:1.75}

/* ⚠ اتحيّدو من هنا: عائلة .sc-* كاملة (39 سطر) — شاشات مزوّرة
   بالـCSS للأستاذ والحارس وولي الأمر. تعوّضات بلقطات حقيقية
   (shot-*.jpg) من زمان، والأنماط بقات ميتة. */

/* ---------- التقييمات ---------- */
.rev-top{
  display:grid;grid-template-columns:280px 1fr;gap:26px;align-items:center;
  padding:24px;border-radius:var(--r-xl);background:var(--surface);
  border:1px solid var(--line);margin-bottom:26px;box-shadow:var(--shadow-sm);
}
.rev-score{text-align:center;padding-inline-end:26px;border-inline-end:1px solid var(--line)}
.rev-score .n{font-size:52px;font-weight:900;letter-spacing:-2px;line-height:1}
.rev-score .sub{font-size:12.5px;color:var(--text-mute);margin-top:6px}
.stars{display:inline-flex;gap:2px;color:var(--gold-500)}
.stars svg{width:17px;height:17px}
.stars .off{color:var(--line-strong)}
.rev-dist{display:grid;gap:7px;flex:1}
.rev-dist-row{display:flex;align-items:center;gap:10px;font-size:12.5px}
.rev-dist-row .lab{width:44px;color:var(--text-mute);font-weight:700}
.rev-dist-row .bar{flex:1;height:8px;border-radius:99px;background:var(--bg-soft);overflow:hidden}
.rev-dist-row .bar i{display:block;height:100%;background:var(--gold-500);border-radius:99px}
.rev-dist-row .cnt{width:26px;text-align:end;color:var(--text-mute);font-weight:700}

.rev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rev-card{
  padding:22px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);
  transition:var(--transition);position:relative;
}
.rev-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.rev-card .quote{position:absolute;top:16px;inset-inline-end:18px;color:var(--brand-100)}
.rev-card .quote svg{width:34px;height:34px}
.rev-card p{font-size:14px;line-height:1.85;color:var(--text-soft);margin:12px 0 16px;position:relative;z-index:1}
.rev-who{display:flex;align-items:center;gap:11px}
.rev-who b{display:block;font-size:13.5px}
.rev-who span{font-size:11.5px;color:var(--text-mute)}
.rev-new{border:2px solid var(--brand-400);background:var(--brand-50)}
/* شارة «مثال»: كل بطاقة كتوسّم راسها، باش حتى إلا تصوّرات لوحدها
   ما تبانش كشهادة حقيقية من شخص حقيقي */
.rev-sample{
  display:inline-block;margin-inline-start:9px;padding:2px 9px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;vertical-align:2px;
  background:var(--bg-soft);color:var(--text-mute);border:1px solid var(--line);
}

.rev-form{
  margin-top:26px;padding:26px;border-radius:var(--r-xl);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.rev-form h3{font-size:18px;margin-bottom:18px}
.rev-2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rate-pick{display:flex;gap:6px;align-items:center}
.rate-pick button{
  border:none;background:transparent;cursor:pointer;color:var(--line-strong);padding:2px;
  transition:var(--transition);
}
.rate-pick button svg{width:30px;height:30px}
.rate-pick button.on{color:var(--gold-500);transform:scale(1.08)}
.rate-pick button:hover{transform:scale(1.15)}

/* ---------- الأسئلة ---------- */
.faq{max-width:820px;margin:0 auto;display:grid;gap:11px}
.faq-item{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  overflow:hidden;transition:var(--transition);
}
.faq-item.open{border-color:var(--brand-300);box-shadow:var(--shadow-sm)}
.faq-q{
  width:100%;text-align:start;padding:18px 20px;border:none;background:transparent;
  cursor:pointer;font-size:15.5px;font-weight:800;color:var(--text);
  display:flex;align-items:center;gap:12px;
}
.faq-q .ico{margin-inline-start:auto;color:var(--text-mute);transition:var(--transition);flex:none}
.faq-item.open .faq-q .ico{transform:rotate(180deg);color:var(--brand-600)}
.faq-a{padding:0 20px;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}
.faq-item.open .faq-a{padding:0 20px 20px;max-height:420px}
.faq-a p{font-size:14.2px;color:var(--text-mute);line-height:1.9}

/* ---------- دعوة ---------- */
.cta-band{
  max-width:1240px;margin:0 auto 80px;padding:52px 40px;border-radius:var(--r-xl);
  background:var(--grad-hero);color:#fff;text-align:center;position:relative;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.26),transparent 68%);
  top:-260px;inset-inline-start:-120px;
}
.cta-band > *{position:relative;z-index:1}
.cta-band h2{font-size:33px;letter-spacing:-1px;margin-bottom:12px}
.cta-band p{font-size:16px;color:#bed3f2;max-width:540px;margin:0 auto 26px;line-height:1.8}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- التذييل ---------- */
.lp-footer{background:var(--surface);border-top:1px solid var(--line);padding:52px 22px 26px}
.foot-grid{
  max-width:1240px;margin:0 auto;display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;
}
.foot-about p{font-size:13.5px;color:var(--text-mute);line-height:1.8;margin-top:14px;max-width:320px}
.foot-col h4{font-size:14px;margin-bottom:14px}
.foot-col a,.foot-col span{display:block;font-size:13.5px;color:var(--text-mute);margin-bottom:9px}
.foot-col a:hover{color:var(--brand-600)}
.foot-bottom{
  max-width:1240px;margin:34px auto 0;padding-top:20px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12.5px;color:var(--text-mute);
}

/* ---------- استجابة ---------- */
/* ⚠ الرأس كان كيفيض بين 900 و 1080.
   قسناها فـdev/probe-layout.html على 1024px:
       scrollWidth = 1225   ·   clientWidth = 1014   →  فيض 211px
   السبب: ستّة روابط + أربعة أزرار. القائمة المنسدلة ما كتبانش
   حتى 900px، وما بينهما كلشي ظاهر ومكدّس.
   الحل: نضيّقو الروابط ونخبّيو الأزرار الثانوية قبل ما يوصل
   للانهيار الكامل — بلا ما نبدّلو التصميم على الشاشات الواسعة. */
/* ⚠⚠ 1400 وماشي 1120: الرأس كامل (شعار + 7 روابط + أزرار) كيحتاج
   ~1344px. القائمة المختصرة كانت كتبدا من 1120، والقائمة الكاملة
   من 1121 — يعني كل عرض بين 1121 و1344 كيفيض الرأس خارج الشاشة.
   وهادشي كيمس iPad Pro 11" أفقياً (1194) وحواسيب 1280، وما كانش
   كيبان فالفحص حيت `.lp{overflow-x:hidden}` كيقص الفائض بلا شريط
   تمرير: الزر كيختافى، وما كاين حتى خطأ.

   ⚠ ومنين تزيد رابط للقائمة زيد هاد الرقم معاه، وإلا رجع الفيضان.
     الرقم = عرض الرأس الكامل + هامش. كيتقاس بـdev/probe-responsive.html
     ماشي بالنظر. */
@media(max-width:1400px){
  .lp-links{gap:1px;margin-inline-start:12px}
  .lp-links a{padding:8px 9px;font-size:13.5px}
  .lp-bar{gap:10px;padding:13px 16px}
  .lp-actions{gap:6px}
  .lp-actions .hide-sm{display:none}
  .lang-btn > span{display:none}
  .lang-btn{padding:8px 10px}
  .logo-sub{display:none}
}

@media(max-width:1080px){
  /* ⚠⚠ القائمة تنطوي هنا لا عند 900.

     القائمة المختصرة نفسها (شعار + **سبعة** روابط + أزرار) تحتاج
     ~1043px بعد أن أُضيف رابط «الأسعار» إلى `LINKS` في
     `landing.js`. وكان الطيّ يبدأ من 900 — أي أنّ كلّ عرض بين
     901 و1043 يفيض الرأس خارج الشاشة، و`.lp{overflow-x:hidden}`
     يقصّ الفائض بلا شريط تمرير فلا يظهر شيء: زرّ «إنشاء الحساب»
     يُقصّ جزئياً ولا خطأ في أيّ مكان. قاسه `dev/probe-responsive.html`
     عند 1024 بالضبط: `#lpActions` يمتدّ إلى 1043.

     ⚠ ولا نُخفي `.btn-primary` هنا كما يفعل مقطع 900: إخفاء
       الروابط السبعة وحده يحرّر أضعاف الـ19px الناقصة، وزرّ
       إنشاء الحساب هو سبب الصفحة كلّها — لا يُخفى بلا داعٍ.

     ⚠ ونفس تحذير مقطع 1400: كلّ رابط جديد في `LINKS` يرفع هذا
       الرقم. يُقاس بالفاحص لا بالنظر. */
  .lp-links{display:none}
  .lp-burger{display:grid}

  .steps,.feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step::after{display:none}
  .roles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gallery,.rev-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .lp-links{display:none}
  .lp-burger{display:grid}
  .lp-actions .hide-sm{display:none}
  /* الرأس يجب أن يبقى داخل عرض الشاشة */
  .lp-bar{padding:11px 14px;gap:10px}
  .lp-actions{gap:6px}
  .lp-actions .btn-primary{display:none}   /* زر الإنشاء متاح داخل القائمة المنسدلة */
  .lang-btn > span{display:none}
  .lang-btn{padding:8px 10px}
  .logo-mark{width:38px;height:38px;border-radius:11px}
  .logo-name{font-size:18px}
  .hero-visual{max-width:100%}
  .mock{max-width:100%}
  .hero-grid{grid-template-columns:1fr;padding:44px 22px 70px;gap:44px}
  .hero h1{font-size:36px;letter-spacing:-1px}
  .hero-sub{font-size:15.5px}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:48px}
  .sec{padding:60px 18px}
  .sec-head h2{font-size:27px}
  .sec-head p{font-size:15px}
  .roles,.gallery,.rev-grid{grid-template-columns:1fr}
  .rev-top{grid-template-columns:1fr;gap:18px}
  .rev-score{padding-inline-end:0;border-inline-end:none;padding-bottom:18px;border-bottom:1px solid var(--line)}
  .rev-2{grid-template-columns:1fr}
  .cta-band{padding:38px 22px;margin-bottom:60px}
  .cta-band h2{font-size:25px}
  .float-qr{inset-inline-start:-10px;bottom:-18px}
  .float-alert{inset-inline-end:-8px}
  .foot-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .steps,.feats{grid-template-columns:1fr}
}

/* ⚠⚠ الهواتف الضيّقة (320–420): `.btn` عندها `white-space:nowrap`
   فـbase.css — قرارٌ صحيح فداخل التطبيق (صفّ أزرارٍ ينكسر داخلياً
   يصير غير مقروء). لكنّه يجعل أصغرَ عرضٍ ممكن للزرّ = عرضَ نصّه
   كاملاً. وزرّ «Créer mon établissement — gratuit» نصّه ~344px.

   وفي شبكةٍ عمودها `1fr` يكون الحدّ الأدنى للعمود هو min-content
   لأعرض عنصر فيه — فصار عمود البطل 344px داخل شاشة 320px، وسحب
   معه العنوانَ والفقرةَ واللقطة. و`.lp{overflow-x:hidden}` كان
   يبتلع الفائض بلا شريط تمرير: النصّ مقصوصٌ من الحافّة والزائر
   لا يملك حتى أن يمرّر ليراه.

   فالحلّ ليس رفع `overflow` بل إلغاء سبب الاتّساع: الزرّان يصيران
   عمودين بعرضٍ كامل، ونصّهما يُسمح له بالانكسار. */
@media(max-width:420px){
  .hero-grid{padding:36px 16px 60px}
  .hero-badge{max-width:100%;white-space:normal;line-height:1.55}
  .hero h1{font-size:33px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%;white-space:normal;text-align:center;line-height:1.45}
  .cta-btns{flex-direction:column;align-items:stretch}
  .cta-btns .btn{width:100%;white-space:normal;text-align:center;line-height:1.45}
  .sec{padding:52px 16px}
}

/* ============================================================
   لقطات حقيقية من التطبيق
   ============================================================
   ⚠⚠ اللقطات **مقصوصة عرضاً فقط** إلى 1172×880: يُحذف الشريط
     الجانبي (268 بكسلاً) من لقطة النافذة الكاملة (1440×880)،
     ولا يُقطع الارتفاع. والأصول محفوظة في `dev/shots-full/`،
     وسكربت القصّ `dev/crop-shots.ps1` في نفس المجلّد.

     ولماذا حذف الشريط: البطاقة في الشبكة الثلاثية عرضها ~390
     بكسلاً. صورةٌ عرضها 1440 تُصغَّر فيها 3.7 أضعاف فلا يُقرأ
     فيها حرف. والشريط وحده يبتلع 19٪ من العرض على نصٍّ لا يُقرأ
     في هذا الحجم أصلاً. فحذفناه، فكبُر الباقي 1.23×.

   ⚠ ولماذا لا يُقطع الأسفل: كان القطع عند «حدٍّ نظيف» يبحث عنه
     السكربت — فاصلٍ بين سطرين أو فجوةٍ بين بطاقتين — إلى ارتفاع
     716. وشاشة وليّ الأمر ليس فيها حدٌّ نظيف قبل 716 أصلاً،
     فقُطعت بطاقتا «آخر الإشعارات» و«الاستدعاءات» من منتصفهما
     وبدت الواجهة معطوبة في صفحة البيع.

     فالحلّ ليس حدّاً أنظف بل ألّا نَعِد بحدٍّ أصلاً: القطع عند
     أسفل النافذة + إطار متصفّحٍ فوقها + تلاشٍ في الأسفل. عندها
     تقرأ الحافّة كنافذةٍ فيها تمرير، لا كصورةٍ مبتورة.

   ⚠ ومن يبدّل الصور يبدّل هذا الرقم معها — وكذلك `SHOT_W/SHOT_H`
     في `assets/js/landing.js` و`sizes` في `manifest.webmanifest`.
     ثلاثة مواضع تُعلن نفس الأبعاد، وأيّها تأخّر كذَب.

   ⚠⚠ وزِد `SHOT_V` في `landing.js` و`VERSION` في `sw.js` مع كلّ
     إعادة قصّ: عامل الخدمة يعطي الأصل المخزَّن أوّلاً (stale-
     while-revalidate)، فصورةٌ جديدة بنفس الاسم لا تظهر في أوّل
     زيارة. أُصلح القصّ مرّةً إصلاحاً كاملاً وبقي المتصفّح يعرض
     القديم — فبدا الإصلاح وكأنّه لم يقع، وضاع نصف مساء.

   ⚠ والقياس لا يُقدَّر بالنظر:
       Add-Type -AssemblyName System.Drawing
       ([System.Drawing.Image]::FromFile("...\shot-teacher-ar.jpg")).Size

   ⚠ والدرس الأغلى: حين تشكو صورةٌ من القصّ، **افتح الصورة** قبل
     أن تلمس التنسيق الذي يعرضها. قِسنا النسبة ثلاث مرّات وعدّلنا
     هذا السطر مرّتين، والعلّة كانت في الملفّ نفسه في كلّ مرّة. */
/* ⚠ الإطار: شريطُ متصفّحٍ فوق اللقطة، نفسه الذي يلفّ لقطة البطل.
   اللقطة تنتهي عند أسفل النافذة (880) والمحتوى يستمرّ تحتها. بلا
   إطارٍ تقرأ الحافّةُ السفلى كقصٍّ معطوب؛ ومعه تقرأ كنافذةٍ فيها
   تمرير — وهو ما هي عليه فعلاً. */
.shot-frame{
  margin:14px 14px 0;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface);
  box-shadow:0 10px 26px rgba(15,35,80,.10);
}
.shot-frame .mock-bar{padding:8px 11px;gap:6px}
.shot-frame .mock-bar i{width:8px;height:8px}
.shot-frame .mock-url{height:19px;font-size:9.5px;margin-inline-start:9px}

.shot-screen.shot-real{
  padding:0;min-height:0;display:block;position:relative;
  background:var(--grad-hero);
  aspect-ratio:1172 / 880;overflow:hidden;
}
.shot-screen.shot-real img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  /* ⚠ تكبير 0.5٪: النسبة مطابقة تماماً، فبلا تكبير تظهر أحياناً
     خيوطُ خلفيةٍ على الحواف من تدوير البكسلات. */
  transform:scale(1.005);
}
/* ⚠ التلاشي في الأسفل: الحافّة السفلى تمرّ حتماً وسط بطاقةٍ ما —
   لا حدَّ نظيفاً في كلّ الشاشات الثلاث عند ارتفاعٍ واحد، وقد
   جُرّب البحثُ عنه وفشل في شاشة وليّ الأمر. فبدل قطعٍ حادٍّ يبدو
   عطباً، نذيب الحافّة في لون البطاقة. pointer-events:none كي لا
   يبتلع التدرّجُ مرورَ الفأرة فيموت تكبيرُ الصورة. */
.shot-screen.shot-real::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:56px;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--surface));
}
/* ⚠ الحركة على الصورة وحدها ماشي على البطاقة كاملة: تحريك
   عنصر فيه ظل كيجبر المتصفح يعاود يرسم الظل فكل إطار. */
.shot:hover .shot-screen.shot-real img{ transform:scale(1.028); }
.shot-screen.shot-real img{ transition:transform .5s cubic-bezier(.22,.61,.36,1); }

/* ============================================================
   ظهور عند التمرير  (assets/js/reveal.js)
   ============================================================
   ⚠ العناصر ظاهرة افتراضياً. الإخفاء كيوقع غير إلا زاد
     reveal.js الكلاس `rv-on` على الجذر — يعني بلا JS، ولا إلا
     طاح الملف، الصفحة كتبقى كاملة بلا حركة عوض ما تبقى خاوية. */
.rv-on [data-rv]{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.rv-on [data-rv].rv-in{
  opacity:1;transform:none;
  will-change:auto;   /* كنحيّدوها بعد الحركة — كتستهلك ذاكرة رسم */
}

/* ⚠ احترام إعداد النظام: كاين ناس الحركة كتصدّعهم.
   حتى إلا خدم JS، هاد القاعدة كتغلبو. */
@media (prefers-reduced-motion: reduce){
  .rv-on [data-rv]{opacity:1;transform:none;transition:none}
  .shot-screen.shot-real img{transition:none}
  .shot:hover{transform:none}
  .shot:hover .shot-screen.shot-real img{transform:scale(1.005)}
}

/* ============================================================
   لقطة البطل — لوحة المدير الحقيقية
   ============================================================
   ⚠ .mock-body القديمة كان فيها padding وخلفية: كانت تحيط
     بالمجسّم. الصورة الحقيقية خاصها تملأ الإطار من الحافة للحافة
     بحال شاشة حقيقية داخل متصفح. */
/* ⚠ 1440/880 = أبعاد الملفّ بالضبط، فلا يقصّ `cover` شيئاً. كانت
   1400/850 والملفّات مقصوصة إلى تلك الأبعاد من الأعلى — فكان شعار
   التطبيق مقطوعاً نصفين في أوّل ما يراه الزائر. الرقم هنا يجب أن
   يساوي `HERO_W/HERO_H` في `assets/js/landing.js` و`sizes` في
   `manifest.webmanifest`. */
.mock-shot{
  display:block;background:var(--bg);position:relative;
  aspect-ratio:1440 / 880;overflow:hidden;
}
.mock-shot img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center;
}
/* ⚠ نفس تلاشي المعرض: الحافّة السفلى تمرّ وسط بطاقتَي «الأقسام»
   و«الغيابات المتكرّرة» — وهذا ما تفعله كلّ نافذةٍ فيها تمرير.
   التلاشي يقولها بدل أن تُقرأ كصورةٍ مبتورة. */
.mock-shot::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:64px;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--surface));
}

/* ============================================================
   المحتوى الأوّليّ للزواحف

   ⚠ `#lpBoot` نصٌّ ثابت داخل `lpMain` يقرؤه من لا يشغّل
     JavaScript — الزواحف، ومعاينات الروابط في واتساب وفيسبوك.
     ومن يشغّله يجب ألّا يراه لحظةً واحدة: `landing.js` يمسحه،
     لكنّ بينهما ومضةَ نصٍّ أسود على أبيض بلا تنسيق تجعل الموقع
     يبدو معطوباً عند كلّ تحديث.

   ⚠ والصنف `has-js` يوضع في **أوّل سكربت في المستند** (رأس
     index.html)، قبل أن يُرسم شيء — فلا ومضة أصلاً.

   ⚠ ولا نستعمل `display:none` ثابتاً: نصٌّ مخفيّ عن الجميع
     تُسقطه محرّكات البحث وقد تعدّه إخفاءً. الشرط هنا معكوس —
     ظاهرٌ افتراضاً، ويُخفى فقط حين يثبت أنّ JS يعمل.
   ============================================================ */
.has-js #lpBoot { display: none; }

/* ============================================================
   لماذا Attendly · الأمان · التسعير
   ============================================================ */

/* ---------- المقارنة ---------- */
/* ⚠ عمودان على الحاسوب، عمود واحد على الهاتف. والسهم يختفي في
   العمود الواحد: سهمٌ أفقيّ بين صفَّين متراكبَين يشير إلى لا شيء. */
.cmp{max-width:980px;margin:0 auto;display:grid;gap:12px}
.cmp-head{
  display:grid;grid-template-columns:1fr 42px 1fr;align-items:center;
  font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-mute);padding:0 4px 2px;
}
/* ⚠ grid-column:3 صراحةً: العنوانان طفلان اثنان في شبكةٍ من ثلاثة
   أعمدة، فالثاني كان يسقط في عمود السهم (42px) ويلتفّ على سطرين
   فوق لا شيء. الشبكة لا تخطّي عموداً من تلقاء نفسها. */
.cmp-head-new{color:var(--brand-600);grid-column:3}
.cmp-row{display:grid;grid-template-columns:1fr 42px 1fr;align-items:stretch;gap:0}
.cmp-old,.cmp-new{
  display:flex;align-items:flex-start;gap:10px;padding:16px 18px;
  border-radius:var(--r-lg);font-size:14.2px;line-height:1.7;
}
.cmp-old{background:var(--surface-2);border:1px solid var(--line);color:var(--text-mute)}
.cmp-new{
  background:var(--surface);border:1px solid var(--brand-200);
  color:var(--text);font-weight:600;box-shadow:var(--shadow-sm);
}
.cmp-ic{flex:none;line-height:0;margin-top:2px}
.cmp-old .cmp-ic{color:var(--text-mute)}
.cmp-new .cmp-ic{color:var(--green-600)}
.cmp-arrow{
  display:grid;place-items:center;color:var(--brand-300);
  /* السهم مرسوم لليسار؛ في LTR يُقلب ليشير من القديم إلى الجديد */
  transform:scaleX(1);
}
html[dir="ltr"] .cmp-arrow{transform:scaleX(-1)}

/* ---------- الأمان ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.trust-card{
  padding:26px 24px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);transition:var(--transition);
}
.trust-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand-200)}
.trust-ic{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--brand-50);color:var(--brand-600);margin-bottom:15px;
}
.trust-card h3{font-size:16px;margin-bottom:9px}
.trust-card p{font-size:13.8px;color:var(--text-mute);line-height:1.85}

/* ---------- التسعير ---------- */
.pr-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  max-width:1100px;margin:0 auto;align-items:start;
}
.pr-card{
  position:relative;padding:30px 26px;border-radius:var(--r-xl);
  background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;transition:var(--transition);
}
.pr-card:hover{box-shadow:var(--shadow)}
/* ⚠ البطاقة المميّزة مرفوعة بـ`border` و`shadow` لا بـ`transform`:
   الرفع بالتحويل كان يخرجها من صفّ الشبكة على الهاتف. */
.pr-pop{border:2px solid var(--brand-500);box-shadow:var(--shadow-lg)}
.pr-tag{
  position:absolute;top:-12px;inset-inline-start:26px;
  background:var(--grad-brand);color:#fff;font-size:11.5px;font-weight:800;
  padding:5px 13px;border-radius:99px;box-shadow:var(--shadow-brand);
}
.pr-card h3{font-size:19px;margin-bottom:8px}
.pr-desc{font-size:13.5px;color:var(--text-mute);line-height:1.8;min-height:74px}
.pr-amount{display:flex;align-items:baseline;gap:9px;margin:18px 0 4px;flex-wrap:wrap}
.pr-amount b{
  font-size:46px;font-weight:900;letter-spacing:-2px;line-height:1;
  color:var(--brand-600);
}
.pr-amount span{font-size:13px;color:var(--text-mute);font-weight:600}
.pr-amount-q{min-height:46px;align-items:center;color:var(--brand-400)}
.pr-min{font-size:12.5px;color:var(--text-mute);margin-bottom:20px}
.pr-quote .pr-desc{min-height:74px}
.pr-feat{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.pr-feat li{
  display:flex;align-items:flex-start;gap:9px;font-size:13.4px;
  color:var(--text-soft);line-height:1.65;
}
.pr-feat li svg{flex:none;margin-top:2px;color:var(--green-600)}
/* ⚠ المزيّة الغائبة تبقى مكتوبة لا تُحذف: القارئ يقارن السطر
   بالسطر بين البطاقتين، وحذفُ سطرٍ يُزيح كلّ ما تحته فتنكسر
   المقارنة بصرياً. */
.pr-feat li.off{color:var(--text-mute);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.pr-feat li.off svg{color:var(--text-mute)}
.pr-note{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:30px auto 0;max-width:660px;text-align:center;
  font-size:13.5px;color:var(--text-mute);line-height:1.8;
}
.pr-note svg{flex:none;color:var(--green-600)}

@media(max-width:960px){
  .trust-grid{grid-template-columns:1fr 1fr}
  .pr-grid{grid-template-columns:1fr;max-width:520px}
  .pr-desc,.pr-quote .pr-desc{min-height:0}
}
@media(max-width:700px){
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:1fr;gap:8px}
  .cmp-arrow{display:none}
  .cmp{gap:20px}
}
@media(max-width:560px){
  .trust-grid{grid-template-columns:1fr}
}