/* landing.css — صفحة الدخول (البيع) بس. التطبيق نفسه في app.css.
   القاعدة اللي ماشيين عليها: الصفحة لازم تحس إنها «مطبوعة» — شرايط، خطوط رفيعة، ورق.
   مفيش كروت مدوّرة متشابهة في كل قسم، ولا تدرّجات بنفسجي، ولا إيموجي كعلامة قسم. */

/* ========== الهيدر ==========
   ━━ ارتفاع الشريط بقى رقم واحد معلن ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   قبل كده الارتفاع كان **ناتج جانبي** للمحتوى: ٦٩px لما زرار «ابدأ مجانًا»
   يقعد في سطر، و٨٢px لما يلف على سطرين على الموبايل. فمفيش رقم تقدر أي حاجة
   تانية تقرأ منه — ولا الـscroll-margin ولا طول قايمة الموبايل.
   دلوقتي --top-h هو المصدر الوحيد، والشريط متفرض عليه. */
:root { --top-h: 69px; }
@media (max-width: 1000px) { :root { --top-h: 65px; } }

/* القفز لقسم من القايمة كان بيحط أول القسم تحت الشريط اللاصق بالظبط: على
   الموبايل حشو القسم ٣٦px والشريط ٨٢px، يعني «أولًا» والعنوان مختفيين تمامًا
   والزائر بيبص على نص نازل من نصّه. الـscroll-margin بيتحسب من نفس المتغيّر. */
main [id], section[id] { scroll-margin-block-start: calc(var(--top-h) + var(--s3)); }

.top {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-block-end: 1px solid var(--line);
}
.top__in {
  display: flex; align-items: center; gap: var(--s4);
  /* ناقص ١px عشان الحد السفلي بتاع .top داخل في الارتفاع الكلي */
  min-block-size: calc(var(--top-h) - 1px); padding-block: var(--s2);
}
.brand { display: flex; align-items: center; gap: var(--s2); text-decoration: none; flex: none; min-inline-size: 0; }
.brand__mark {
  /* flex: none مهم: من غيره المربّع ده عنصر فلكس قابل للانضغاط، وأول ما الصف
     يزنق بيتنقص عرضه تحت ٣٨px والحرف اللي جوّه (place-items: center) يفضل
     بحجمه ويخرج برّه المربّع فوق الكلمة اللي جنبه. */
  flex: none;
  inline-size: 38px; block-size: 38px; display: grid; place-items: center;
  background: var(--brand-green); color: var(--brand-gold);
  font-family: var(--font-head); font-weight: 900; font-size: 1.25rem;
  border-radius: 10px 10px 10px 2px;      /* ركن واحد مقصوص — توقيع بصري بدل مربع عادي */
  box-shadow: inset 0 -3px 0 var(--brand-mint);
}
/* line-height كان ١.١٥: صندوق سطر «مذكرتي» ١٩.٥px بس ذيل الـ«ي» بينزل أكتر من
   كده، فكان بيقع على «من Q Marketing» اللي تحتيه بصفر مسافة. العربي محتاج سطر
   أوسع من اللاتيني — والرقم بدون وحدة يعني كل سطر بياخد نسبة من **حجمه هو**. */
.brand__txt {
  display: flex; flex-direction: column; min-inline-size: 0;
  line-height: 1.35;
  /* قياس بالـcanvas: مع line-height لوحدها ذيل الـ«ي» في «مذكرتي» لسه
     بيلمس حرف الـ«Q» في «من Q Marketing» بـ٠.٦px. الفرق بين السطرين
     لازم يتقال صراحةً — مش نكبّر line-height لحد ما السطر يبقى ٣٠px
     ويكسر توازن القفل مع المربّع. */
  gap: var(--s1);
}
.brand__txt b { font-family: var(--font-head); font-size: 1.0625rem; font-weight: 800; white-space: nowrap; }
.brand__txt small { font-size: .6875rem; color: var(--ink-3); white-space: nowrap; }

.top__nav { display: flex; gap: var(--s5); margin-inline-start: auto; font-size: var(--fs-sm); font-weight: 500; }
.top__nav a { text-decoration: none; color: var(--ink-2); padding-block: var(--s2); position: relative; }
.top__nav a::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline: 0;
  block-size: 2px; background: var(--gold); transform: scaleX(0); transform-origin: inline-end;
  transition: transform .22s var(--ease);
}
.top__nav a:hover { color: var(--ink); }
.top__nav a:hover::after { transform: scaleX(1); transform-origin: inline-start; }

/* ━━ «ابدأ مجانًا» كان بيلف سطرين جوّه الكبسولة ━━━━━━━━━━━━━━━━━━━━━━━━━━━
   .top__act كان عنصر فلكس عادي (قابل للانضغاط)، فلما الصف يزنق المتصفح كان
   بيضغط الزرار ويكسر لابله على سطرين — كبسولة ٦٥px بسطرين متلازقين، وهي كمان
   اللي كانت بتطوّل الهيدر من ٦٩ لـ٨٢px. العلاج إن الصف ده ما ينضغطش أصلًا،
   واللي بينفسح له مكان هو اللي بيختفي (الاسم، ورابط «دخول» اللي مكرر في القايمة). */
.top__act { display: flex; align-items: center; gap: var(--s2); margin-inline-start: var(--s3); flex: none; }
.top__act .btn { white-space: nowrap; flex: none; }
.icon-btn {
  inline-size: var(--tap); block-size: var(--tap); display: grid; place-items: center;
  border-radius: var(--r); color: var(--ink-2);
}
.icon-btn:hover { background: var(--sheet-2); color: var(--ink); }
.icon-btn svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* أيقونة واحدة بس تبان حسب الثيم الشغّال */
.icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun, html[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: none; }
  :root:not([data-theme="light"]) .icon-moon { display: block; }
}

/* ========== الهيرو ========== */
.hero { padding-block: clamp(var(--s6), 7vw, var(--s8)) var(--s7); position: relative; overflow: hidden; }
/* هالة نعناعي خفيفة ورا الورقة — لمسة واحدة بس، مش تدرّج على الصفحة كلها */
.hero::before {
  content: ""; position: absolute; z-index: 0;
  inline-size: 46rem; block-size: 46rem; inset-block-start: -22rem; inset-inline-start: -14rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-mint) 26%, transparent) 0%, transparent 62%);
  pointer-events: none;
}
.hero__in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(var(--s5), 5vw, var(--s8));
  align-items: center;
}
.hero__kicker {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs);
  color: var(--gold); margin-block-end: var(--s3);
  display: inline-flex; align-items: center; gap: var(--s2);
}
.hero__kicker::before { content: ""; inline-size: 28px; block-size: 2px; background: var(--gold); }
.hero__h1 {
  font-size: var(--fs-2xl); font-weight: 900; margin-block-end: var(--s4);
  /* العنوان بيتكسر لسطرين على الموبايل، وكان بيسيب «مطبعة.» لوحدها في سطر —
     كلمة يتيمة تحت سطر طويل. balance بيوزّع الكلمات على السطرين بالتساوي بدل
     ما يملا السطر الأول للآخر. مفيش تصغير خط ولا كسر بالإيد. */
  text-wrap: balance;
}
.hero__h1 .hl {
  /* ━━ خط دهبي تحت الكلمة المهمة — زي ما القلم بيعلّم على المذكرة ━━━━━━━━━
     كان متعمول بـbackground-size: 100% .30em مع background-position: 0 84%.
     و٨٤٪ دي محسوبة من ارتفاع **الصندوق** (inline box) مش من الـbaseline. وصندوق
     السطر عندنا ٧٨px والخط ٤١.٦px، فالشريط كان بينزل في **نص جسم الحرف**: بيعدّي
     جوّه بطن الباء والشين والكاف واللام في «بشكل» وجوّه «مطبعة». يعني أول وأكبر
     حاجة بتتشاف في الصفحة كانت شكلها **شطب** مش تحته-خط — في الثيمين وعلى كل
     المقاسات.
     text-decoration بيحسبها المتصفح من **مقاييس الخط نفسه**، فبتحترم الذيول
     العربية العميقة تلقائيًا، وبتتكرر على كل سطر من غير box-decoration-break.
     و skip-ink: none عشان الخط ما يتقطّعش تحت الذيول. */
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand-gold) 55%, transparent);
  text-decoration-thickness: .16em;
  text-underline-offset: .22em;
  text-decoration-skip-ink: none;
  padding-inline: .08em;
}
.hero__lede { font-size: var(--fs-lg); color: var(--ink-2); max-inline-size: 36ch; text-wrap: pretty; }
.hero__lede b {
  color: var(--ink); font-weight: 700;
  /* ━━ ليه nowrap هنا تحديدًا ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     الـ<b> دول مش «تعتيق» في وسط جملة — دول **أسماء الصيغ** في قايمة اختيار:
     «Word أو PDF أو صور صفحات مطبوعة». «صور صفحات مطبوعة» كانت بتتقسم على
     سطرين، فصندوقها الواحد بيمتد على السطرين ويتقاطع مع «Word» و«PDF» فوق
     و«A4» تحت — تلات تقاطعات حقيقية في الكاشف على ٣٦٠px. والقراءة نفسها
     بتتكسر: نص اسم الصيغة في آخر سطر ونصّه في أول السطر اللي بعده.
     الاسم بيفضل وحدة واحدة. أطول واحد فيهم ١٣٥px جوّه عمود ٣٢٨px على ٣٦٠px،
     فمفيش أي خطر خروج — والكاشف بيتأكد من ده في كل المقاسات.
     ملحوظة: line-height موروث كرقم (1.75) مش كمقاس ثابت، يعني أي <b> بحجم
     خط أكبر بياخد ارتفاع سطر متناسب مع حجمه هو — ده اللي بيخلّي الأسطر
     العربية ما تتلزقش في بعض. ممنوع نحوّله لقيمة بالبكسل. */
  white-space: nowrap;
}
.hero__lede--2 { font-size: var(--fs-md); margin-block-start: var(--s3); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block: var(--s5) var(--s4); }
.hero__pills { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-sm); color: var(--ink-2); }
.hero__pills li { display: flex; align-items: center; gap: var(--s1); }
.hero__pills svg { inline-size: 15px; block-size: 15px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* الورقة: إطار + ميلان بسيط عشان تحس إنها ورقة موضوعة مش صورة ملزوقة */
.paper {
  background: #fff; border: 1px solid var(--line-2); border-radius: 4px;
  box-shadow: var(--shadow-lift); overflow: hidden;
  position: relative;
}
.paper img { inline-size: 100%; block-size: auto; }
.hero__paper {
  margin: 0;
  /* ━━ الورقة مايلة ١.٤ درجة، والميلان بياخد عرض زيادة ━━━━━━━━━━━━━━━━━━━━━
     صندوق العنصر بعد الدوران بيوسع بمقدار (الارتفاع × جا الزاوية). نسبة
     الورقة A4 يعني الارتفاع ≈ ١.٤١٤ × العرض، فالزيادة = ١.٤١٤ × جا(١.٤°) ≈
     ٣.٤٥٪ من العرض، يعني ١.٧٣٪ على كل ناحية.
     على ٣٦٠px الورقة بتملا العمود كله، فالزيادة دي كانت بتاكل الهامش: حافة
     الورقة كانت بتوقف على ١٠.٤px من طرف الشاشة بينما كل حاجة تانية على ١٦px
     — الصفحة بتبان مش متظبطة على المسطرة.
     الحل إننا نحجز المساحة اللي الدوران محتاجها بدل ما نلغي الميلان أو
     نزقّه بالبكسل: ٢٪ داخلية (أكبر شوية من ١.٧٣٪) بتغطّي كمان الـscale
     بتاع الهوفر (١.٢٪ = ٠.٦٪ كل ناحية وهي مش مايلة ساعتها). */
  padding-inline: 2%;
}
.hero__paper .paper {
  transform: rotate(-1.4deg);
  transition: transform .4s var(--ease);
}
.hero__paper .paper:hover { transform: rotate(0deg) scale(1.012); }
.hero__paper figcaption {
  margin-block-start: var(--s3); text-align: center;
  font-size: var(--fs-xs); color: var(--ink-3);
}

/* ========== الشرايط ========== */
.band { padding-block: clamp(var(--s6), 6vw, var(--s8)); }
.band--tint { background: var(--sheet); border-block: 1px solid var(--line); }

/* ملحوظة: scroll-margin لأقسام الصفحة (عشان العنوان ما يقعش تحت الشريط
   اللاصق لما الرابط ينطّ عليه) متعرّف فوق مع الهيدر على `section[id]`
   وبيتحسب من --top-h. ما بنكرّرهوش هنا عشان ما يتغلبش عليه. */

.band__lede { max-inline-size: 62ch; color: var(--ink-2); font-size: var(--fs-md); margin-block-end: var(--s6); text-wrap: pretty; }
.band__lede b { color: var(--ink); }

/* ===== الخطوات — قايمة مرقّمة بخط واصل، مش تلات كروت متشابهة ===== */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); counter-reset: step;
  /* الرقم الشبح بيطلع فوق خط الخطوة بـ٠.٥٥em (≈٢١px على الموبايل)، وفوقه
     كان فيه ١٢px بس من الـsec-title — فالرقم كان بيركب على خط العنوان.
     بنحجزله الارتفاع اللي بيحتاجه بدل ما نقصّه. */
  margin-block-start: var(--s5);
}
.step { position: relative; padding-block-start: var(--s5); }
.step::before {
  /* الخط الواصل اللي فوق — بيربط التلاتة مع بعض كخط إنتاج واحد */
  content: ""; position: absolute; inset-block-start: 0; inset-inline: -8px;
  block-size: 2px; background: var(--line);
}
.step:first-child::before { inset-inline-end: 0; border-start-end-radius: 2px; }
.step:last-child::before  { inset-inline-start: 0; }
.step__n {
  position: absolute; inset-block-start: -.72em;
  /* الخط الواصل بيعدّي ورا الرقم فيقطعه نصّين — بيبان غلطة رسم مش تصميم.
     بنقطع الخط ورا الرقم بخلفية الأرضية نفسها (زي عنوان على مسطرة)، والحشو
     الجانبي بيتعوّض بإزاحة مساوية عشان الرقم يفضل على نفس حافة العمود. */
  inset-inline-start: calc(var(--s2) * -1); padding-inline: var(--s2);
  background: var(--ground);
  font-family: var(--font-head); font-weight: 900; font-size: 3.1rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--line-2);
  pointer-events: none; user-select: none;
}
.step__i {
  inline-size: 26px; block-size: 26px; margin-block-end: var(--s3);
  fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.step h3 { font-size: var(--fs-lg); margin-block-end: var(--s2); }
.step p { color: var(--ink-2); font-size: var(--fs-sm); text-wrap: pretty; }
.step p b { color: var(--ink); }

/* ===== النماذج ===== */
.samples { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
.samples__item { margin: 0; }
.paper--sm { border-radius: 3px; }
.samples__item figcaption { margin-block-start: var(--s3); font-size: var(--fs-sm); color: var(--ink-2); text-wrap: pretty; }
/* ━━ الأسماء العريضة في شرح النموذج تفضل وحدة واحدة ━━━━━━━━━━━━━━━━━━━━━━
   «شعارك واسمك إنت» كانت بتتقسم على سطرين تحت ٣٤٠px: «شعارك واسمك» في آخر
   السطر و«إنت» لوحدها في أول السطر اللي بعده — وهي بالظبط الكلمة اللي الجملة
   كلها مبنية عليها.
   أمانة في الوصف: مفيش هنا تصادم حبر — السطرين بينهم ٢٣px والحرف ١٣px، ومفيش
   أي تقاطع بين المستطيلات الحقيقية. اللي كان بيتحسب «تداخل» هو صندوق الـinline
   الواحد اللي بيلفّ على سطرين فبيغطّي «الغلاف.» اللي فوقه في الصندوق الجامع بس.
   فالسبب اللي بنصلّحه هو **الكلمة اليتيمة**، ونظافة القياس نتيجة جانبية.
   ميزانية العرض: أطول اسم عريض هنا ١١٧px جوّه عمود ٢٨٨px على ٣٢٠px — أي نص
   جديد أعرض من ٢٨٠px لازم يرجّع اللفّ بدل ما يخرج برّه. */
.samples__item figcaption b { white-space: nowrap; }
.samples__note { margin-block-start: var(--s6); }

/* ===== بيعمل / ما بيعملش ===== */
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }
.card-list { padding: var(--s5); }
.card-list h3 {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-lg); margin-block-end: var(--s4);
  padding-block-end: var(--s3); border-block-end: 1px solid var(--line);
}
.card-list h3 svg { inline-size: 20px; block-size: 20px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.card-list--yes h3 svg { stroke: var(--accent); }
.card-list--no  h3 svg { stroke: var(--danger); }
.card-list ul { display: grid; gap: var(--s3); }
.card-list li {
  font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.75;
  padding-inline-start: var(--s4); position: relative; text-wrap: pretty;
}
.card-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .72em;
  inline-size: 7px; block-size: 7px; border-radius: 2px;
}
.card-list--yes li::before { background: var(--accent); }
.card-list--no  li::before { background: var(--danger); opacity: .55; }
.card-list li b { color: var(--ink); }
/* المربع «ما بيعملوش» مش محدّد بأخضر — بيفضل أهدى بصريًا عشان ما يسرقش العين،
   بس مش مخبّي: هو جنبه بنفس الحجم. */
.card-list--no { background: transparent; border-style: dashed; box-shadow: none; }

/* عناوين الأقسام بتتكسر لسطرين على الموبايل. balance بيمنع الكلمة اليتيمة.
   مقصور على .landing عشان base.css مشترك مع التطبيق. */
.landing .sec-title { text-wrap: balance; }

/* ===== الأسعار ===== */
/**
 * ━━ كروت الأسعار اتشالت ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * كان هنا نظام كامل لكروت الباقات (.plans/.plan/.plan--pick/.plan__flag).
 * اتشال بقرار المالك: «مش عايز يكون ظاهر نظام الباقات دا في الصفحة الرئيسية».
 * التسعير بقى جملتين نص في #prices، فالستايلات دي مابقالهاش مستخدم — وستايل
 * ميّت بيرجع يتلزق على حاجة غلط بعد شهور. لو رجعنا كروت يومًا، تتكتب من جديد
 * على شكلها وقتها مش على شكل باقات ٢٠٢٦.
 */
.prices__note { margin-block-start: var(--s6); }

/* ===== الثقة ===== */
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.trust__grid > div { padding-block-start: var(--s4); border-block-start: 2px solid var(--accent); }
.trust__grid h3 { font-size: var(--fs-md); margin-block-end: var(--s2); }
.trust__grid p { font-size: var(--fs-sm); text-wrap: pretty; }

/* ===== النداء الأخير ===== */
.finale {
  background: var(--brand-green); color: #f3fbf6;
  padding-block: clamp(var(--s7), 7vw, var(--s8));
  /* خط دهبي فوق — نفس توقيع الغلاف في الـPDF */
  border-block-start: 4px solid var(--brand-gold);
}
.finale__in { text-align: center; }
.finale h2 { font-size: var(--fs-xl); margin-block-end: var(--s3); text-wrap: balance; }
.finale p { color: #b6d9c5; max-inline-size: 46ch; margin-inline: auto; text-wrap: pretty; }
.finale__cta { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-block-start: var(--s5); }
.finale__ghost { --btn-fg: #f3fbf6; --btn-line: rgba(243,251,246,.35); }
.finale__ghost:hover { --btn-line: #f3fbf6; }
.finale :focus-visible { outline-color: var(--brand-gold); }

/* «دخول» جوّه قايمة الموبايل — مخفية غير تحت ٤٤٠px (شوف الـmedia query) */
.top__nav .top__nav-login { display: none; color: var(--ink); font-weight: 700; }

/* زرار قايمة الموبايل — مخفي على الديسكتوب، بيظهر مع الـmedia query تحت.
   ٤٤×٤٤ مساحة لمس، وهو الحد الموصى بيه. */
.top__burger {
  display: none; place-items: center;
  inline-size: 44px; block-size: 44px; flex: none;
  /* بياخد مكان روابط القايمة المخفية بدل ما يزوّد عنصر على الصف — من غير
     السطر ده الهيدر بيعدّي عرض الشاشة على ٣٧٥px والصفحة كلها بتتزحزح. */
  margin-inline-start: auto;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: transparent; color: var(--ink); cursor: pointer;
}
.top__burger svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.top__burger:hover { background: var(--sheet-2); }
.top__burger[aria-expanded="true"] { background: var(--sheet-2); border-color: var(--accent); color: var(--ink); }

/* ===== الفوتر ===== */
.foot { padding-block: var(--s6); border-block-start: 1px solid var(--line); }
.foot__in { display: grid; gap: var(--s4); }
.foot__brand { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.foot__brand b { font-family: var(--font-head); font-size: var(--fs-lg); }
/* السالب على الحاوية بيلغي حشو أول رابط، فالنص يفضل واقف على خط الفوتر نفسه */
.foot__nav { display: flex; gap: 0 var(--s3); flex-wrap: wrap; font-size: var(--fs-sm); margin-inline-start: calc(var(--s2) * -1); }
/* كانت <a> نص عادي ٢٣px طول و٣٥px عرض — أقل من هدف اللمس في البُعدين.
   inline-flex + min-block-size + حشو أفقي بيدّوا الرابط جسم يتلمس، من غير ما
   شكل السطر يتغيّر ولا نحتاج نقطة كسر جديدة. */
.foot__nav a {
  color: var(--ink-2); text-decoration: none;
  display: inline-flex; align-items: center;
  min-block-size: var(--tap); padding-inline: var(--s2);
}
.foot__nav a:hover { color: var(--ink); text-decoration: underline; }
.foot__legal { max-inline-size: 64ch; font-size: var(--fs-xs); }

/* ========== التجاوب ==========
   ثلاث نقط بس: تابلت (الهيرو بيتكسر)، موبايل كبير، وموبايل ٤٠٠px. */
@media (max-width: 1000px) {
  /* ━━ التنقّل تحت ١٠٠٠px ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     كان `display: none` وخلاص: من ١٠٠٠px لتحت الصفحة البيعية كلها ملهاش أي
     تنقّل — لا همبرجر ولا tab bar ولا حتى روابط في الهيدر. يعني كل زائر من
     موبايل (وده أغلب الزوار) مش شايف «الأسعار» ولا «نموذج حقيقي».
     دلوقتي: زرار همبرجر بيفتح نفس الأربع روابط كلوحة تحت الهيدر. */
  .top__nav {
    position: absolute; inset-inline: 0; inset-block-start: 100%;
    display: none; flex-direction: column; gap: 0;
    background: var(--sheet); border-block-end: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
    /* الحشو الأفقي بالـgutter عشان الروابط تقف على نفس خط باقي الصفحة */
    padding: var(--s2) var(--gutter) var(--s4);
    /* موبايل أفقي = شاشة ٣٥٠px طول: القايمة بتطلع أطول من الشاشة. تتسكرول
       جوّه نفسها بدل ما تتقطع، والسكرول ما يسرّبش للصفحة ورا. */
    max-block-size: calc(100dvh - var(--top-h)); overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* .top__in كان position: relative فالقايمة كانت بتتعلّق على **عرض الـwrap**:
     لوحة سايبة ١٦px فاضي على كل جنب من غير حدود جانبية ولا حواف مدوّرة، شكلها
     ناقص. .top نفسه sticky (يعني positioned)، فمن غير relative هنا اللوحة
     بتاخد عرض الشريط كله. */
  .top__in { position: static; }
  .top__nav[data-open="1"] { display: flex; }
  .top__nav a {
    display: flex; align-items: center; min-block-size: var(--tap);
    padding-block: var(--s3); border-block-end: 1px solid var(--line);
  }
  .top__nav a:last-child { border-block-end: 0; }
  /* «دخول» بتعيش في القايمة على طول اللي فيها القايمة. قبل كده كانت بتفضل في صف
     الهيدر لحد ٤٤٠px — ومن ٤٤١ لـ~٥٢٠px مافيش مكان لها، فكانت بتضغط الصف
     وتكسر لابل «ابدأ مجانًا». رابط واحد في مكان واحد = مفيش منطقة مكسورة. */
  .top__act .top__login { display: none; }
  .top__nav .top__nav-login { display: block; }
  /* الزرار بيضيّق حشوه الأفقي على الشاشات الضيقة بدل ما لابله يتكسر */
  .top__act .btn { padding-inline: var(--s4); }
  .top__burger { display: inline-grid; }
  /* الهيدر لازم يقدر يضيق: من غير min-inline-size: 0 عناصر الفلكس بترفض تصغر
     تحت حجم محتواها وبتدفع الصفحة برّه الشاشة. */
  .top__in { gap: var(--s3); }
  .brand { min-inline-size: 0; }
  .top__act { min-inline-size: 0; }
  .hero__in { grid-template-columns: 1fr; }
  .hero__paper { max-inline-size: 30rem; margin-inline: auto; }
  .hero__lede { max-inline-size: none; }
  .trust__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: var(--s5); }
  .step::before { inset-inline: 0; }
  .step__n { inset-block-start: -.55em; font-size: 2.4rem; }
  .samples { grid-template-columns: 1fr; }
  .cols2 { grid-template-columns: 1fr; }
  .hero__h1 { font-size: clamp(1.9rem, 7.5vw, 2.6rem); }
}

/* ===== القشرة تحت ٤٤٠px =====
   تحت ٤٤٠px الصف مش بيستوعب (الشعار + الاسم بسطرين) + الهمبرجر + زرار الثيم +
   «ابدأ مجانًا»: مجموعهم ٣٤٤px والمتاح ٣٢٨px على ٣٦٠. فبنشيل **الاسم** بقرار
   صريح ونسيب الشعار لوحده — هو نفس توقيع الغلاف اللي بيطبعه المحرك، و.brand
   لسه فيه aria-label بالاسم الكامل للقارئ الصوتي. البديل (نضغط الكل) هو بالظبط
   اللي كان بيعمل الكبسولة بسطرين والحرف فوق الاسم. */
@media (max-width: 440px) {
  .brand__txt { display: none; }
  /* الشعار لوحده يستحق يكبر شويّة — هدف لمس أوضح لرابط «الرئيسية» */
  .brand__mark { inline-size: 40px; block-size: 40px; }
  .trust__grid { grid-template-columns: 1fr; }
  .hero__cta .btn { inline-size: 100%; }
  .finale__cta .btn { inline-size: 100%; }
}