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

   القواعد الحاكمة:
   · كل نسب التباين محسوبة على السطح الفعلي الذي يقع عليه النص.
   · الذهب --rq-gold نصاً على الداكن فقط (10.2:1)؛ على الفاتح لا يجوز
     إلا --rq-gold-ink (4.57:1 على الورق).
   · الحالة النهائية هي الافتراضية؛ الإخفاء لا يقع إلا تحت html.rq-anim.
   · خصائص منطقية فقط (inline-start/end) — لا left/right إلا في زوايا
     التدرّجات المقصودة.
   · يُحمَّل من ‎layouts/public.blade.php‎ وحده، بعد ‎rifq.css‎.
   ====================================================================== */

:root {
  /* ── اللون ── */
  --rq-void:      #06201E;
  --rq-void-2:    #0A2E28;
  --rq-onvoid:    #F2F7F5;   /* 15٫0:1 على القبو */
  --rq-onvoid-2:  #D5E4DF;   /* 13٫0:1 */
  --rq-onvoid-3:  #93ADA5;   /* 7٫1:1 — أرضيته 13px فما فوق */
  --rq-gold:      #E9C46A;   /* الذهب — على الداكن فقط، 10٫2:1 */
  --rq-gold-2:    #C9A227;   /* ذهب خافت: ذيل الخيط، الفهارس، ختم التذييل */
  --rq-gold-ink:  #8A6A16;   /* الذهب الوحيد على الفاتح — 4٫57:1 على الورق */
  --rq-hair-gold: rgba(233, 196, 106, .16);
  --rq-paper:     #F5F3EC;
  --rq-card:      #FFFFFF;
  --rq-card-2:    #FBFAF5;
  --rq-ink:       #10231F;   /* 14٫9:1 على الورق */
  --rq-ink-2:     #3A544D;   /* 7٫4:1 */
  --rq-mute:      #5C7168;   /* 4٫71:1 — لا ينزل تحت 13px */
  --rq-line:      #E3DDCB;
  --rq-line-2:    #EDE8DA;
  --rq-teal:      #0D7A6F;   /* لون الفعل — الأبيض عليه 5٫22:1 */
  --rq-teal-d:    #0A5B53;   /* روابط على الفاتح — 7٫97:1 */
  --rq-teal-wash: #F1F7F6;
  --rq-focus:     #0A5B53;          /* حلقة البؤرة على الفاتح */
  --rq-focus-onvoid: #2FBFAE;       /* حلقة البؤرة على القبو — 7٫45:1 */
  --rq-bad:       #B3261E;

  /* ── الأنصاف والإيقاع ── */
  --rq-r-lg: 18px; --rq-r: 12px; --rq-r-sm: 8px;
  --rq-max: 1160px;
  /* الشريط لاصقٌ داخل المجرى لا فوقه، فارتفاعه يُقتطع من الطيّة فعلاً —
     شاشة العهد هي ‎100svh‎ ناقصه، لا ‎100svh‎ */
  --rq-nav-h: 73px;
  --rq-pad: clamp(1rem, 4vw, 1.75rem);
  --rq-gap: clamp(4.5rem, 9vw, 8rem);
  --rq-gap-in: clamp(2rem, 5vw, 4rem);

  /* ── الطباعة (تجوال 400/500/700 محلياً لا غير) ── */
  /* الأطروحة تُقاس بالعرض والارتفاع معاً: ‎vw‎ وحده يكبّرها على شاشةٍ
     عريضةٍ قصيرة حتى تدفع الشمسة والأزرار تحت الطيّة. ‎min()‎ يُسلّم
     القياس لأضيق البُعدين، فتنكمش الأطروحة قبل أن ينكسر العهد. */
  --fs-thesis-loud:  clamp(3rem, min(6.6vw, 8.6svh), 5.6rem);
  --fs-thesis-quiet: clamp(1.9rem, min(3.6vw, 4.7svh), 3rem);
  --fs-h2:   clamp(1.5rem, 2.8vw, 2.15rem);
  --fs-h3:   1.35rem;
  --fs-lede: clamp(1.05rem, 1.6vw, 1.2rem);
  --fs-body: 1rem;
  --fs-cap:  .8125rem;
  --fs-eyebrow: .75rem;
  --fs-num:  clamp(2.6rem, 5vw, 4rem);
  --fs-stage-n: clamp(4.5rem, 8vw, 7rem);

  --rq-ease: cubic-bezier(.22, .61, .36, 1);
  --rq-pop:  cubic-bezier(.34, 1.56, .64, 1);

  /* المثمّن — هيئة الختم في كل مواضعه */
  --rq-oct: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

/* ======================================================================
   ١ · الأساس
   ====================================================================== */

body {
  background: var(--rq-paper);
  color: var(--rq-ink-2);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;

  /* التذييل يلزم قاع النافذة على الصفحات القصيرة.
     كان يأتي من ‎styles.css‎ — 936 كيلوبايت من قالب لوحة الإدارة كانت
     تُحمَّل على صفحة الزائر لتُعطيها ثلاثة أسطر. رُفع الملف وبقيت
     الأسطر هنا، حيث تخصّ من يستعملها. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ‎<main>‎ يبتلع الفراغ فينزل التذييل، ولا يُزاحم ‎<nav>‎ الملتصق */
body > main { flex: 1 0 auto; }

/* الثلاثة الباقية من ‎styles.css‎ — تُستعمل في قوالب الزائر */
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }

/* ‎.pub-wrap‎ بالاسم — قواعد طباعة التقرير السنوي تستهدفه */
.pub-wrap {
  max-width: var(--rq-max);
  margin-inline: auto;
  padding-inline: var(--rq-pad);
}
main.pub-wrap { padding-block: 0 var(--rq-gap); }

/*
 * الخروج بملء العرض. ‎--rq-sbw‎ عرض شريط التمرير يقيسه السكربت —
 * ‎100vw‎ تحسبه و‎100%‎ لا تحسبه، وبلا تعويض يظهر تمرير أفقي دائم.
 */
.rq-bleed {
  margin-inline: calc(50% - 50vw + var(--rq-sbw, 0px) / 2);
  padding-inline: calc(50vw - 50% - var(--rq-sbw, 0px) / 2 + var(--rq-pad));
}

/* إخفاء بصري بلا فيضان — بديل ‎left:-9999px‎ الذي يمدّ ‎scrollWidth‎ في RTL */
.rq-offscreen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* لا ‎letter-spacing‎ هنا: النص عربي، وبلينك يفرّق الحروف المتصلة فيقطع
   وصلاتها — التمييز بالوزن واللون والمسافة قبل الشعرة، لا بالتفريق */
.rq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: var(--rq-mute);
}
/* شعرة ذهبية خافتة تسبق العنوان الصغير على القبو */
.rq-eyebrow--onvoid { color: var(--rq-onvoid-3); }
.rq-eyebrow--onvoid::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--rq-gold-2);
  flex: 0 0 auto;
}

/* عنوان قسم: شعرة تمتد منه إلى آخر السطر */
.rq-sec { margin-top: var(--rq-gap); }
.rq-sec-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: var(--rq-gap-in);
}
.rq-sec-head h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.5;
  color: var(--rq-ink);
  margin: 0;
  white-space: nowrap;
}
.rq-sec-head .rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--rq-line);
  transform-origin: right center;
}
.rq-anim .rq-sec-head .rule { transform: scaleX(0); transition: transform .9s var(--rq-ease); }
.rq-anim .rq-in .rq-sec-head .rule,
.rq-anim .rq-sec-head.rq-in .rule { transform: scaleX(1); }

@media (max-width: 575.98px) {
  .rq-sec-head { flex-direction: column; align-items: stretch; gap: .7rem; }
  .rq-sec-head h2 { white-space: normal; }
}

/* ======================================================================
   ٢ · الشريط العلوي — غطاء القبو، داكنٌ على امتداد الصفحة
   ====================================================================== */

.pub-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--rq-void);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
/* الشفافية ٫92 لا ٫82: تحتها، حين يمرّ اللوح الأبيض خلف الشريط، يهبط
   تباين الروابط إلى 4٫33:1 فيرسب — عند ٫92 يصير 5٫5:1 على أسوأ خلفية */
.pub-nav.is-stuck {
  background: rgba(5, 26, 27, .92);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  border-bottom-color: var(--rq-hair-gold);
}
.rq-nav-in {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 72px;
}

/* الشعار: مثمّن مزدوج — ذهبٌ يطوّق القبو، والحرف ذهبي */
.rq-brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  flex: 0 0 auto;
}
/*
 * الشعار حرٌّ على القبو بلا لوحٍ ولا مثمّن — قرارٌ صريح من صاحب المشروع
 * بعد تجربة لوح الختم الورقي. فيُعوَّض غياب اللوح بالحجم: ‎48px‎ كاملة
 * للرسمة بدل ‎32‎ داخل مثمّن. والمثمّن باقٍ حيث لغة الختم: المدالية
 * وختم التذييل.
 */
/* ‎rq-mark‎ لا ‎mark‎ — انظر تعليق القالب: ‎.mark‎ صنفُ تظليلٍ في بوتستراب
   بخلفية ‎#fff3cd‎ وحشوة، فكان يضع مربّعاً كريمياً خلف الشعار */
.rq-brand .rq-mark {
  display: block;
  flex: 0 0 auto;
  width: 52px;
  /* النسبة (‎466×479‎) تحكم الارتفاع، والوسم يعلن البعدين فلا تقفز الترويسة */
  height: auto;
  /*
   * السقف لأجل الشعار المرفوع من الإعدادات: نسبته غير معلومة، وشعارٌ
   * طويل (‎1:4‎) كان سيمدّ الشريط إلى ‎208px‎ ويدفع القائمة تحت الطيّة.
   * و‎contain‎ لا ‎cover‎ — الثاني يقصّ الشعار ليملأ الصندوق.
   */
  max-height: 56px;
  object-fit: contain;
}

/*
 * حرف العلامة — ما يُرسم حين لا شعار مرفوع.
 *
 * البديل الحقيقي لغياب الصورة حرفٌ على لون العلامة، لا أيقونةُ صورةٍ
 * مكسورة ولا فراغ: الشريط بلا علامةٍ يبدو صفحةً لم تُحمَّل بالكامل.
 * واللون يأتي من الإعدادات في سمة ‎style‎ — قيمةٌ واحدة متغيّرة لا تستحق
 * ورقة أنماط، والسمة لا تقبل ‎nonce‎ بحال (انظر ‎SecurityHeaders‎).
 */
.rq-brand .rq-mark--letter {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  color: var(--rq-gold);
  background: var(--rq-brand-bg, var(--rq-void-2));
  border: 1px solid var(--rq-hair-gold);
}

/*
 * الشريط المعلن — سطرٌ يعلو كل صفحات الزائر.
 *
 * فوق الشريط لا تحته: ما دون الشريط اللاصق يمرّ تحته عند التمرير فيختفي
 * الخبر بعد أول لمسة. وهذا يُمرَّر مع الصفحة عمداً — الخبر يُقرأ مرة ثم
 * يترك المساحة للمحتوى، ولا يسكن الشاشة إلى الأبد.
 */
.rq-notice {
  background: var(--rq-void-2);
  border-block-end: 1px solid var(--rq-hair-gold);
  color: var(--rq-onvoid-2);
  font-size: var(--fs-cap);
  line-height: 1.6;
}
.rq-notice .pub-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-block: .5rem;
}
.rq-notice i { color: var(--rq-gold-2); flex: 0 0 auto; font-size: 15px; }
.rq-notice a {
  margin-inline-start: auto;
  flex: 0 0 auto;
  color: var(--rq-gold);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* النبرة تُملي اللون — والنصّ يُقاس تباينه على السطح الذي يقع عليه */
.rq-notice--warn   { background: #2A2109; color: #F3E4BE; }
.rq-notice--warn i { color: var(--rq-gold); }
.rq-notice--urgent { background: #3A0D0A; color: #FBE3E1; }
.rq-notice--urgent i, .rq-notice--urgent a { color: #FFC9C4; }
.rq-brand b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--rq-onvoid);
  line-height: 1.35;
}
.rq-brand small {
  display: block;
  font-size: 11px;
  color: var(--rq-onvoid-3);
  line-height: 1.35;
}

.rq-nav-links {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-inline-start: auto;
}
/* الخط الذهبي يُرسم تحت الرابط من جهة القراءة */
.rq-nav-links a.rq-nl {
  font-size: 14px;
  font-weight: 500;
  color: var(--rq-onvoid-3);
  text-decoration: none;
  padding: .55rem .7rem;
  background-image: linear-gradient(var(--rq-gold), var(--rq-gold));
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0 1.5px;
  transition: color .22s ease, background-size .22s var(--rq-ease);
}
.rq-nav-links a.rq-nl:hover { color: var(--rq-onvoid-2); background-size: 100% 1.5px; }
.rq-nav-links a.rq-nl.is-on {
  color: var(--rq-onvoid);
  background-image: linear-gradient(var(--rq-gold-2), var(--rq-gold-2));
  background-size: 100% 1.5px;
}

.rq-nav-cta { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }

/* ── الأزرار ── */
.rq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 46px;
  padding-inline: 1.4rem;
  border-radius: var(--rq-r);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease-out, border-color .18s ease-out,
              color .18s ease-out, transform .18s ease-out;
}
.rq-btn i { font-size: 17px; }
.rq-btn:active { transform: translateY(0); }
.rq-btn--solid { background: var(--rq-teal); color: #fff; }
.rq-btn--solid:hover { background: var(--rq-teal-d); color: #fff; transform: translateY(-1px); }
.rq-btn--onvoid {
  background: transparent;
  border-color: rgba(233, 196, 106, .55);  /* مفلطحةً على القبو ≈ 3٫6:1 */
  color: var(--rq-gold);
}
.rq-btn--onvoid:hover { border-color: var(--rq-gold); background: rgba(233, 196, 106, .08); color: var(--rq-gold); }
.rq-btn--ghost { border-color: var(--rq-teal); color: var(--rq-teal-d); background: transparent; }
.rq-btn--ghost:hover { background: var(--rq-teal-wash); color: var(--rq-teal-d); }
/* «بوابة الكافل» في الشريط الداكن */
.rq-nav-cta .rq-btn--ghost { border-color: rgba(213, 228, 223, .45); color: var(--rq-onvoid-2); }
.rq-nav-cta .rq-btn--ghost:hover { background: rgba(255, 255, 255, .07); border-color: rgba(213, 228, 223, .6); color: var(--rq-onvoid); }

/* قائمة الجوال */
.rq-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(232, 244, 241, .45);
  border-radius: 10px;
  color: var(--rq-onvoid);
  font-size: 21px;
  cursor: pointer;
}
.rq-burger .ri-close-line { display: none; }
.rq-burger[aria-expanded="true"] .ri-close-line { display: inline; }
.rq-burger[aria-expanded="true"] .ri-menu-line { display: none; }

.rq-nav-drawer { display: contents; }

@media (max-width: 991.98px) {
  .rq-nav-in { min-height: 60px; flex-wrap: wrap; }
  .rq-burger { display: inline-flex; margin-inline-start: auto; }

  .rq-nav-drawer {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 0 1.1rem;
    border-top: 1px solid var(--rq-hair-gold);
    margin-top: .5rem;
  }
  .rq-nav-drawer.is-open { display: flex; }
  /* بلا جافاسكربت لا يوجد زر يفتح — فالقائمة مبسوطة في مكانها */
  html:not([data-rq-js]) .rq-nav-drawer { display: flex; }
  html:not([data-rq-js]) .rq-burger { display: none; }

  .rq-nav-links { margin-inline-start: 0; flex-direction: column; align-items: stretch; gap: 0; }
  .rq-nav-links a.rq-nl {
    font-size: 1.1rem;
    padding-block: .8rem;
    border-bottom: 1px solid rgba(233, 196, 106, .08);
    background: none;
  }
  .rq-nav-links a.rq-nl.is-on { color: var(--rq-gold); }
  .rq-nav-cta { flex-direction: column; align-items: stretch; margin-top: .9rem; gap: .6rem; }
  .rq-nav-cta .rq-btn { width: 100%; }
}

/* ======================================================================
   ٣ · الرسائل العابرة
   ====================================================================== */

.rq-flash {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: 1.5rem;
  padding: .9rem 1.1rem;
  border-radius: var(--rq-r-sm);
  border: 1px solid;
  font-size: 14px;
  line-height: 1.9;
}
.rq-flash i { font-size: 18px; line-height: 1.5; flex: 0 0 auto; }
.rq-flash--ok  { background: #E8F3F1; border-color: #BFDDD8; color: #0A5B53; }
.rq-flash--bad { background: #FCEDEA; border-color: #F3C7C2; color: var(--rq-bad); }
.rq-flash--flush { margin-top: 0; margin-bottom: 1rem; }
.rq-flash ul { margin: .35rem 0 0; padding-inline-start: 1.1rem; }

/* حامل رمز الختم — صفري الحجم، يُخرَج من التدفق فحسب */
.rq-sprite { position: absolute; }

/* ======================================================================
   ٤ · العهد — النُّصب في القبو
   ====================================================================== */

.rq-hero {
  position: relative;
  padding-block: clamp(2rem, 5svh, 3.5rem) clamp(3rem, 6svh, 5.5rem);
  min-height: min(calc(100svh - var(--rq-nav-h)), 860px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--rq-void);
  /* همس شبكة الإنشاء ±45° + هالة ذهبية خلف الشمسة */
  background-image:
    radial-gradient(640px at 24% 44%, rgba(233, 196, 106, .10), transparent 70%),
    repeating-linear-gradient(45deg,  rgba(213, 228, 223, .03) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(-45deg, rgba(213, 228, 223, .03) 0 1px, transparent 1px 96px);
  isolation: isolate;
  overflow: hidden;
}
.rq-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--rq-gap-in);
  align-items: center;
}
.rq-hero-grid > div:first-child { position: relative; z-index: 1; }

/* الأطروحة — إيقاع تلاوة: خافت / عالٍ / خافت / عالٍ */
.rq-thesis { margin: .8rem 0 0; }
.rq-thesis span {
  display: block;
  font-size: var(--fs-thesis-quiet);
  font-weight: 500;
  line-height: 1.3;
  color: var(--rq-onvoid-3);
}
.rq-thesis .w {
  font-size: var(--fs-thesis-loud);
  font-weight: 700;
  line-height: 1.15;
  color: var(--rq-onvoid);
  margin-inline-start: 1ch;
}
/* الكلمتان اللتان يقوم عليهما العهد — تحتهما يُسطَّر بالذهب */
.rq-thesis .w em {
  font-style: normal;
  color: var(--rq-gold);
  position: relative;
}
.rq-thesis .w em::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: .06em;
  height: 3px;
  border-radius: 2px;
  /* ‎-90deg‎: الذهب الساطع عند بداية القراءة (اليمين) ويخفت نحو الذيل —
     نفس منطق الخيط الذي يخفت نازلاً. زاوية فيزيائية مقصودة لصفحة RTL. */
  background: linear-gradient(-90deg, #E9C46A, #C9A227);
  transform-origin: right center;   /* يُرسم من جهة بداية القراءة */
}

.rq-anim .rq-thesis span {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .62s var(--rq-ease), transform .62s var(--rq-ease);
}
.rq-anim .rq-in .rq-thesis span { opacity: 1; transform: none; }
.rq-anim .rq-in .rq-thesis span:nth-child(1) { transition-delay: 0s; }
.rq-anim .rq-in .rq-thesis span:nth-child(2) { transition-delay: .14s; }
.rq-anim .rq-in .rq-thesis span:nth-child(3) { transition-delay: .28s; }
.rq-anim .rq-in .rq-thesis span:nth-child(4) { transition-delay: .42s; }
/* السطر الذهبي يُمَدّ تحت الكلمة بعد أن تحطّ — كما يُسطِّر الكاتب تحت قيدٍ اكتمل */
.rq-anim .rq-thesis .w em::after { transform: scaleX(0); transition: transform .48s var(--rq-ease); }
.rq-anim .rq-in .rq-thesis span:nth-child(2) em::after { transform: scaleX(1); transition-delay: .9s; }
.rq-anim .rq-in .rq-thesis span:nth-child(4) em::after { transform: scaleX(1); transition-delay: 1.08s; }

/* ── تناوب القوافي — العهد يُنضَّد حرفاً حرفاً ──────────────────────────
   ‎.is-typed‎ يضعها ‎public-rq.js‎ حين يتولّى التنضيد فعلاً. وما دامت
   غائبة فالقواعد أعلاه هي العاملة: السطور تنزلق وتحطّ ثم يُمَدّ التسطير.
   فأي عطبٍ في الملف — أو غيابه أصلاً — يترك العهد على تلك الحال: مكتملاً
   لا نصفَ جملةٍ معلّقة.

   وأربع قواعد لا غير، ولكلٍّ سببها:

   ١· السطور تحجز ارتفاعها ولو خلت. النضد يبدأ بأربعة أسطر فارغة، ولولا
      الحجز لانطبق ما تحت العهد ثم انفتح مع كل حرف — قفزة تخطيط كل ثانية.
      والحجز بـ‎em‎ لا بقيمة ثابتة، فيتبع قياس الخط في كل استعلام.
   ٢· لا انزلاق ولا تدرّج: الحرف يظهر حين يُكتب، لا حين تنتهي حركة.
   ٣· التسطير الذهبي يُترك على مقاسه الطبيعي بدل أن يُمَدّ بحركة —
      و‎em::after‎ ممدود ‎inset-inline: 0‎ داخل الكلمة، فعرضه عرضُها ويطول
      معها حرفاً حرفاً بلا سطرٍ واحدٍ يديره.
   ٤· القلم يقف عند موضع الحرف التالي. في RTL يقع على يسار المكتوب —
      وذاك موضع الحرف القادم فعلاً، لا زخرفةً في طرف السطر.
   ────────────────────────────────────────────────────────────────────── */
.rq-thesis.is-typed > span   { min-block-size: 1.3em; }
.rq-thesis.is-typed > span.w { min-block-size: 1.15em; }

.rq-anim .rq-thesis.is-typed span { opacity: 1; transform: none; transition: none; }
.rq-anim .rq-thesis.is-typed .w em::after { transform: none; transition: none; }

.rq-thesis .rq-pen::after {
  content: "";
  display: inline-block;
  vertical-align: -.04em;
  inline-size: 3px;
  block-size: .78em;
  margin-inline-start: .14em;
  border-radius: 2px;
  background: var(--rq-gold);
}
/* يثبت ما دام يكتب، ويومض حين يقف — كما القلم في اليد */
.rq-thesis.is-resting .rq-pen::after { animation: rq-pen 1.05s infinite; }
@keyframes rq-pen { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }

/* الحاشية — تعليقٌ هامشي كما في المخطوطات */
.rq-hero-quiet {
  max-inline-size: 36rem;
  margin: 1.2rem 0 0;
  padding-inline-start: 1.1rem;
  border-inline-start: 2px solid var(--rq-gold-2);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 2;
  color: var(--rq-onvoid-3);
}
.rq-lede {
  max-inline-size: 38rem;
  margin: 1rem 0 0;
  font-size: var(--fs-lede);
  line-height: 2;
  color: var(--rq-onvoid-2);
}
.rq-hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

.rq-anim .rq-fade { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--rq-ease) .6s, transform .7s var(--rq-ease) .6s; }
.rq-anim .rq-in .rq-fade { opacity: 1; transform: none; }

/* شاشةٌ قصيرة — محمولٌ بارتفاع ٧٦٨px أو نافذةٌ نصفية. الأطروحة وحدها لا
   تكفي هنا: ما تبقّى من الطول بياضٌ وتلاوةٌ لا حجمُ خط، فيُضيَّق البياض
   ويُقصَّر السطر. لا يُحذف سطرٌ من العهد ليتّسع — العهد يُقرأ كاملاً أو
   لا معنى لعرضه في شاشةٍ واحدة. */
@media (min-width: 900px) and (max-height: 760px) {
  .rq-hero { padding-block: 1.75rem 2.15rem; }
  .rq-thesis span { font-size: max(1.6rem, min(3.6vw, 4.7svh)); }
  .rq-thesis .w   { font-size: max(2.6rem, min(6.6vw, 8svh)); }
  .rq-hero-quiet { margin-top: .75rem; }
  .rq-hero-quiet, .rq-lede { line-height: 1.75; }
  .rq-hero-cta { margin-top: 1.25rem; }
}

/* ── الوجهان — صورتان تُقرأان من القبو لا تُلصقان عليه ────────────────
   ثلاث طبقات، كلٌّ منها تُلغي علامةً من علامات «الصورة الملصوقة»:

   ١· قناعان متقاطعان (‎mask-composite: intersect‎): بيضويٌّ يُذيب الأركان
      الأربعة، وخطّيٌّ يُنزل الأسفل في الخلفية. لا حافة تبقى تُرى، فلا
      حاجة إلى صندوقٍ ولا إطارٍ ولا نصف قطر.
   ٢· ‎mix-blend-mode: color‎ على غلالةٍ خضراء: يأخذ اللون من الغلالة
      والضوءَ من الصورة، فيدخل الأخضرُ لونَ الصورة نفسه — لا فوقه.
      الشفافية ٫58 لا ١: عندها يبقى في الوجه دفءٌ يُميّزه من الخلفية،
      وفوقها يصير الطفل صبغةً خضراء لا طفلاً.
   ٣· غرقٌ نحو القبو: الأطراف والأسفل تعودان إلى ‎#06201E‎ نفسه.

   الطبقة بنتُ ‎.rq-hero‎ لا بنت الشمسة: ‎.rq-rosette-slot‎ يُنشئ سياق
   تراصٍّ بـ‎filter‎، والمزج لا يتعدّى سياقه. */
/* ‎inset-inline-end‎ لا ‎-start‎: الشمسة آخرُ عمودٍ في الشبكة، وفي RTL
   يقع آخرُ الأعمدة على الحافة المقابلة للقراءة. الوجهان يسكنان عمودها. */
.rq-faces {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(46%, 640px);
  z-index: 0;
  pointer-events: none;
}
/* ‎.rq-drift‎ يتحرّك و‎.rq-face‎ يُرسم — الفصل مقصود لا تنظيمٌ شكلي.
   لو تحرّك المقنَّع نفسه لأُعيد رسم الصورة والقناع الثلاثي والمزج في كل
   إطار، ولَقُرّب موضعه إلى بكسلٍ صحيح؛ وحركةٌ بطيئة كهذه تقطع بكسلاً
   واحداً كل ثلاثين إطاراً — وذاك هو التقطّع. الغلاف عارٍ من كل ذلك،
   فنقلُه نقلُ طبقةٍ مرسومةٍ سلفاً. */
.rq-drift {
  position: absolute;
  will-change: transform;
}
.rq-face {
  position: absolute;
  inset: 0;
  display: block;
  background-repeat: no-repeat;
  /* الصبغة طبقةُ خلفيةٍ تُمزَج بـ‎background-blend-mode‎ لا عنصرٌ يُمزَج
     بـ‎mix-blend-mode‎. الفرق ليس أسلوبياً: مزج العناصر يحتاج قراءة ما
     خلفه في كل إطار، فيمنع المتصفح من تركيب الطبقة على البطاقة ويُجبره
     على إعادة الرسم — ومع إعادة الرسم يُقرَّب الموضع إلى بكسلٍ صحيح،
     وحركةٌ بـ‎0.04px‎ في الإطار تصير وقوفاً ٢٥ إطاراً ثم قفزةَ بكسل.
     مزجُ الخلفيات يُخبز في الرسم مرةً واحدة، فتبقى الطبقة قابلةً للنقل. */
  --rq-tint: linear-gradient(200deg, rgba(15,59,55,.6), rgba(18,70,63,.6) 58%, rgba(110,90,30,.6));
  background-blend-mode: color, normal;
  filter: contrast(1.06) brightness(1.02) saturate(.92);
  opacity: .96;
  /* ثلاث طبقاتٍ تتقاطع، والتقاطع يأخذ الأدنى — فيكفي أن تُصفّر طبقةٌ
     واحدة عند الحافة ليُصفَّر الكل. البيضويّ وحده لا يكفي: المسافة من
     مركزه (‎42%‎) إلى الحافة العليا أقصرُ من نصف قطره الرأسي، فيصل إلى
     أعلى الإطار وفيه بقيّةُ عتمة ثم يُقطع — وذاك هو الخطّ الذي يُرى.
     الخطّيان يضمنان الصفر عند الجهات الأربع مهما تغيّرت هندسة البيضوي. */
  -webkit-mask-image:
    radial-gradient(ellipse 66% 56% at 50% 42%, #000 22%, rgba(0,0,0,.74) 48%, rgba(0,0,0,.24) 68%, transparent 85%),
    linear-gradient(to bottom, transparent 0, #000 15%, #000 44%, transparent 90%),
    linear-gradient(to right,  transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 66% 56% at 50% 42%, #000 22%, rgba(0,0,0,.74) 48%, rgba(0,0,0,.24) 68%, transparent 85%),
    linear-gradient(to bottom, transparent 0, #000 15%, #000 44%, transparent 90%),
    linear-gradient(to right,  transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.rq-face::after { content: ""; position: absolute; inset: 0; }
/* الغرق — لا يوجد «أين تنتهي الصورة»، توجد فقط عودةٌ إلى القبو.
   طبقتا الغرق متغيّران لا قيمٌ ثابتة: الوجه الفاتح يحتاج غرقاً أثقل،
   ويكفيه عندئذٍ أن يُبدّل المتغيّرين دون أن يُعيد كتابة اللمعة معهما. */
.rq-face {
  --rq-sink-1: radial-gradient(ellipse 74% 66% at 50% 36%, rgba(6,32,30,0) 44%, rgba(6,32,30,.58) 84%);
  --rq-sink-2: linear-gradient(to bottom, rgba(6,32,30,0) 48%, rgba(6,32,30,.92));
}
.rq-face::after {
  background: var(--rq-sink-1), var(--rq-sink-2);
}
/* البرقة — شريطٌ مائل يعبر الوجه ثم يطول صمته.
   ‎z-index:1‎ يرفعه فوق ‎::after‎ فلا يبتلعه الغرق، وقناعُ الأب ما زال
   يقصّه عند الحواف — فالبرقة تُضيء الوجه ولا تُضيء حدّاً. */
.rq-glint {
  position: absolute;
  z-index: 1;
  top: -12%;
  bottom: -12%;
  left: -45%;
  width: 40%;
  background: linear-gradient(112deg,
    transparent,
    rgba(233,196,106,.12) 38%,
    rgba(255,255,255,.20) 50%,
    rgba(233,196,106,.12) 62%,
    transparent);
  pointer-events: none;
  will-change: transform;
}
/* الأكبر يسيل خارج حافة الصفحة — الصورة لا تنتهي، الصفحةُ هي التي تنتهي */
.rq-drift--a {
  inset-inline-end: -6%;
  bottom: -2%;
  inline-size: 58%;
  block-size: 76%;
}
.rq-drift--b {
  inset-inline-start: 6%;
  top: 3%;
  inline-size: 47%;
  block-size: 53%;
}
.rq-face--a {
  background-image: var(--rq-tint), url("../images/hero/hero-face-1.webp");
  /* ‎150%‎ لا ‎cover‎: نسبة الصورة الأصلية تكاد تطابق نسبة الإطار، فـ‎cover‎
     يُدخل خلفية القاعة كلَّها — الأعلام والطاولة وقوارير الماء — في العهد.
     التقريب يُخرجها ويُبقي الطفل. هذان الرقمان هما مِقبضا الضبط. */
  background-size: auto, auto 150%;
  background-position: 0 0, 44% 8%;
}
.rq-face--b {
  background-image: var(--rq-tint), url("../images/hero/hero-face-2.webp");
  /* أقرب من الأولى بكثير: خلفية هذه الصورة جدارٌ فاتح، و‎cover‎ كان يُدخل
     الجدار والسقف فيقرأهما الزائر مستطيلاً على الأخضر. التقريب يُخرج
     الجدار ويُبقي الوجه — الحافة لا تُخفى بالقناع وحده بل بما نُدخله. */
  background-size: auto, auto 230%;
  background-position: 0 0, 50% 61%;
}
/* والفاتح يحتاج غرقاً أثقل: نفس القناع لا يكفي حين يكون المصدر أنصع */
.rq-face--b {
  --rq-sink-1: radial-gradient(ellipse 70% 62% at 50% 40%, rgba(6,32,30,.06) 34%, rgba(6,32,30,.72) 82%);
  --rq-sink-2: linear-gradient(to bottom, rgba(6,32,30,0) 40%, rgba(6,32,30,.95));
}

/* ── اللمعة والسريان ──────────────────────────────────────────────────
   «عشوائي» في CSS لا وجود له — لا مولّد أرقام في ورقة أنماط. البديل
   الصادق: دوران غير متوافقة الأطوال. اللمعة ‎9.3s‎/‎13.7s‎ والسريان
   ‎21s‎/‎27s‎ — أربعة أطوالٍ لا يقسم بعضها بعضاً، فالمجموعة لا تعود إلى
   وضعها الأول إلا بعد ساعاتٍ من التشغيل المتصل. ما يراه الزائر في دقيقة
   أو دقيقتين لا يتكرّر، وهذا كلُّ ما تعنيه العشوائية هنا عملياً.

   واللمعة تشغل ٢٢٪ من الدورة فقط: البرقة تمرّ ثم يطول الصمت. لمعةٌ
   متصلة تصير وميضاً يستدعي النظر، والوجه هنا لا يُستدعى إليه النظر. */
/* البرقة عنصرٌ لا طبقةَ خلفية: تحريك ‎background-position‎ يُعيد الرسم في
   كل إطار، وتحريك ‎transform‎ على عنصرٍ مستقلّ يتولّاه المُركِّب. */
@keyframes rq-glint {
  0%, 78% { transform: translate3d(0, 0, 0); }
  100%    { transform: translate3d(363%, 0, 0); }
}

/* السريان — مدارٌ دائريٌّ حقيقي، لا مضلَّعٌ يُقارب الدائرة.
   ‎rotate(θ) translate(r) rotate(-θ)‎: الدوران الخارجي يحمل العنصر حول
   المركز، والداخلي يفكّ عنه الدوران فيبقى قائماً. المتصفح يُقحِم كل
   دالّةٍ على حدة، فينتج مسارٌ دائريٌّ متصل — لا رؤوس ولا انكسار اتجاه.

   وهذا هو الفرق عمّا سبق: ثماني محطاتٍ بتوقيت ‎linear‎ سرعتها منتظمة
   نعم، لكن الاتجاه ينكسر ٤٥° فجأةً عند كل محطة. العين تلتقط انكسار
   الاتجاه لا تفاوت السرعة — والمثمَّن يُقرأ متقطّعاً وإن لم يسقط إطار.
   والمدار لا محطة فيه أصلاً: دالّتان تدوران، فالسرعة والاتجاه يتغيّران
   تغيّراً متصلاً في كل لحظة. */
/* نصف القطر والمدّة معاً يحدّدان نعومةً لا يملكها المسار وحده: ‎9px‎ على
   ‎24s‎ تساوي ‎0.04px‎ في الإطار — تحت عتبة ما يُرسم كسرياً، فتُقرأ
   وقوفاً وقفزات. ‎16px‎ على ‎9.7s‎ تساوي ‎~10px‎ في الثانية — فوق العتبة،
   وما زالت طفواً لا تنقّلاً. المدّتان أوّليّتان كي لا تتوافقا مع دورتَي
   اللمعة (‎9.3‎/‎13.7‎) فيتكرّر المشهد. */
@keyframes rq-orbit-a {
  from { transform: rotate(0deg)   translate3d(16px, 0, 0) rotate(0deg); }
  to   { transform: rotate(360deg) translate3d(16px, 0, 0) rotate(-360deg); }
}
/* عكس الدوران — لو دارتا في جهةٍ واحدة قُرئتا لوحاً واحداً يتأرجح */
@keyframes rq-orbit-b {
  from { transform: rotate(0deg)    translate3d(13px, 0, 0) rotate(0deg); }
  to   { transform: rotate(-360deg) translate3d(13px, 0, 0) rotate(360deg); }
}
.rq-drift--a { animation: rq-orbit-a  9.7s linear infinite; }
.rq-drift--b { animation: rq-orbit-b 12.9s linear infinite -4s; }
.rq-drift--a .rq-glint { animation: rq-glint  9.3s ease-in-out infinite; }
.rq-drift--b .rq-glint { animation: rq-glint 13.7s ease-in-out infinite -4.5s; }
/* الظهور بعد الأطروحة لا قبلها — الوعد يُقرأ أولاً، ثم يظهر مَن قُطع له */
.rq-anim .rq-face { opacity: 0; transition: opacity 1.3s var(--rq-ease) .5s; }
.rq-anim .rq-in .rq-face { opacity: .96; }

/* ── الشمسة — الإنشاء الثماني يؤدّي أمام الزائر ── */
.rq-rosette-slot {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1;
  justify-self: center;
  filter: drop-shadow(0 0 60px rgba(233, 196, 106, .15));
}
.rq-rosette { width: 100%; height: 100%; display: block; overflow: visible; }

/* دوائر الإنشاء: تظهر أولاً، وبعد اكتمال الخطوط تخفت إلى أثرها */
.rq-anim .rq-guides circle {
  opacity: 0;
  transition: opacity .5s ease;
}
.rq-anim .rq-rosette.rq-in .rq-guides circle { opacity: .34; }
.rq-anim .rq-guides circle:nth-child(1) { transition-delay: .3s; }
.rq-anim .rq-guides circle:nth-child(2) { transition-delay: .4s; }
.rq-anim .rq-guides circle:nth-child(n+3) { transition-delay: .5s; }
.rq-anim .rq-guides { transition: opacity .6s ease; }
.rq-anim .rq-rosette.rq-in .rq-guides { opacity: .35; transition-delay: 2.3s; }

/* الخطوط تُرسم بترتيب البنّاء: مربّع، مربّع، مثمّن، نجمة، أنصاف أقطار */
.rq-draw path { stroke-dasharray: 100; stroke-dashoffset: 0; }
.rq-anim .rq-draw path { stroke-dashoffset: 100; }
.rq-anim .rq-rosette.rq-in .rq-draw path { stroke-dashoffset: 0; }
.rq-anim .rq-rosette.rq-in .d1 { transition: stroke-dashoffset .6s var(--rq-ease) .6s; }
.rq-anim .rq-rosette.rq-in .d2 { transition: stroke-dashoffset .6s var(--rq-ease) .9s; }
.rq-anim .rq-rosette.rq-in .d3 { transition: stroke-dashoffset .5s var(--rq-ease) 1.35s; }
.rq-anim .rq-rosette.rq-in .d4 { transition: stroke-dashoffset .7s var(--rq-ease) 1.6s; }
.rq-anim .rq-rosette.rq-in .d5 { transition: stroke-dashoffset .35s var(--rq-ease) calc(2.05s + var(--i, 0) * .07s); }

.rq-fill { opacity: 1; }
.rq-anim .rq-fill { opacity: 0; transition: opacity 1.2s ease 2.4s; }
.rq-anim .rq-rosette.rq-in .rq-fill { opacity: 1; }

.rq-heart { transform-box: fill-box; transform-origin: center; }
.rq-anim .rq-heart { opacity: 0; transform: scale(0); transition: opacity .3s ease 2.5s, transform .3s var(--rq-pop) 2.5s; }
.rq-anim .rq-rosette.rq-in .rq-heart { opacity: .9; transform: scale(1); }
/* الحلقة الوحيدة في الصفحة كلها: نبض القلب الذهبي */
@media (prefers-reduced-motion: no-preference) {
  .rq-anim .rq-rosette.rq-in .rq-heart { animation: rq-heart 3.2s ease-in-out 3s infinite; }
}
@keyframes rq-heart { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

/* ======================================================================
   ٥ · سلسلة العهدة — خيط السند (التوقيع)
   ----------------------------------------------------------------------
   العهد والسلسلة حقلٌ داكن واحد بلا درز. الخيط الذهبي ينزل عمودياً في
   عمود العُقد، وكل ختمٍ يقطعه ويعقده: لا يُتتبَّع الخط إلا عبر الأختام
   السبعة — حجّة سلسلة العهدة مرسومةً ببكسلين.
   ====================================================================== */

.rq-chain {
  background: var(--rq-void);
  color: var(--rq-onvoid-2);
  padding-block: var(--rq-gap) 10rem;
  margin-top: 0;
}
.rq-chain-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 4rem;
  align-items: start;
}
.rq-chain-head { position: sticky; top: 112px; }
.rq-chain-head h2 {
  margin: .8rem 0 .7rem;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.6;
  color: var(--rq-onvoid);
}
.rq-chain-head p {
  margin: 0;
  font-size: 15px;
  line-height: 2;
  color: var(--rq-onvoid-3);
  max-inline-size: 34rem;
}

.rq-stations {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* الخيط: يخفت كلما نزل نحو عالم الورق */
.rq-stations::before {
  content: "";
  position: absolute;
  inset-inline-start: 21px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(180deg, #E9C46A 0%, #C9A227 60%, rgba(201, 162, 39, .35) 100%);
}

.rq-station {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.25rem;
  padding-block: 1.4rem;
  border-radius: var(--rq-r);
  transition: background .2s ease;
}
.rq-station + .rq-station { border-top: 1px solid var(--rq-hair-gold); }
@media (hover: hover) {
  .rq-station:hover { background: rgba(233, 196, 106, .04); }
  .rq-station:hover .rq-seal { transform: scale(1.08); }
  .rq-station:hover .rq-seal + .rq-seal { transform: scale(1.08) rotate(12deg); }
}

.rq-node {
  position: relative;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rq-node .dot {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--rq-gold);
}
/* الختم: عقدة تقطع الخيط — الهالة القبوية حول الحلقة هي القطع نفسه */
.rq-seal {
  position: relative;
  z-index: 1;
  width: 34px; height: 34px;
  color: var(--rq-gold);
  border-radius: 50%;
  background: var(--rq-void);
  box-shadow: 0 0 0 6px var(--rq-void);
  transition: transform .18s var(--rq-ease);
}
/* المحطة السادسة: ختمان متراكبان — اعتماد شخصين مرئياً */
.rq-seal + .rq-seal { margin-inline-start: -10px; transform: rotate(12deg); }

.rq-txt { display: flex; flex-direction: column; gap: .15rem; }
.rq-st-i {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--rq-gold-2);
  font-variant-numeric: tabular-nums;
}
.rq-st-t { font-size: 1.15rem; font-weight: 700; line-height: 1.6; color: var(--rq-onvoid); }
.rq-st-a { font-size: 14px; line-height: 1.8; color: var(--rq-onvoid-3); }

.rq-chain-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.2rem;
  margin-top: 3rem;
  padding: 1.1rem 1.4rem;
  border: 1px solid rgba(233, 196, 106, .18);
  border-radius: var(--rq-r);
  background: rgba(10, 46, 40, .5);
  font-size: 14px;
  line-height: 2;
  color: var(--rq-onvoid-2);
}
.rq-chain-foot a {
  color: var(--rq-gold);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .2s ease;
}
.rq-chain-foot a:hover { color: var(--rq-onvoid); }

/* الخيط والأختام تُطبع مع القراءة — تحسين تدريجي خالص: الافتراضي وثيقة
   مكتملة، ومن لا يدعم متصفحه الخط الزمني للتمرير يراها مكتملة كذلك */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.rq-anim .rq-stations::before {
      transform-origin: top center;
      animation: rq-thread linear both;
      animation-timeline: view(block 90% 30%);
    }
    html.rq-anim .rq-seal {
      animation: rq-press linear both;
      animation-timeline: view(block 85% 45%);
    }
  }
}
@keyframes rq-thread { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rq-press  { from { opacity: .25; } to { opacity: 1; } }

/* ======================================================================
   ٦ · لوح الشهادة — الأرقام تخرج من العتمة موثَّقة
   ====================================================================== */

.rq-plate {
  position: relative;
  z-index: 2;
  margin-top: -6.5rem;
  background: var(--rq-card);
  border: 1px solid var(--rq-line);
  border-radius: var(--rq-r-lg);
  box-shadow: 0 24px 60px -24px rgba(6, 32, 30, .35);
  padding: clamp(1.5rem, 4vw, 3rem);
}

/* التاج: المدالية المثمّنة تخترق الحافة العليا — الأرشيف يصادق على الأرقام */
.rq-plate-medal {
  position: absolute;
  top: 0;
  inset-inline: 0;
  margin-inline: auto;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  z-index: 1;
}
.rq-plate-medal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--rq-oct);
  background: var(--rq-gold-ink);
}
.rq-plate-medal::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  clip-path: var(--rq-oct);
  background: #fff;
}
.rq-plate-medal svg { width: 26px; height: 26px; color: var(--rq-gold-ink); }

.rq-plate .rq-sec-head { margin-bottom: 1.6rem; }

.rq-register {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.rq-reg-cell {
  display: block;
  padding: 1.5rem;
  text-decoration: none;
  border-inline-start: 1px solid var(--rq-line-2);
  transition: background .18s ease;
}
.rq-reg-cell:first-child { border-inline-start: 0; }
.rq-reg-cell:hover { background: var(--rq-teal-wash); }
.rq-reg-cell:hover .rq-reg-num { color: var(--rq-teal-d); }

.rq-reg-lbl {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: 13px;
  font-weight: 700;
  color: var(--rq-teal-d);
}
.rq-reg-lbl i { font-size: 16px; }
.rq-reg-num {
  margin: .6rem 0 0;
  font-size: var(--fs-num);
  font-weight: 700;
  line-height: 1.15;
  color: var(--rq-ink);
  font-variant-numeric: tabular-nums lining-nums;
  /* العنصر ‎dir="ltr"‎ داخل صفحة RTL، و‎start‎ عنده تعني اليسار — فيهرب
     الرقم إلى الحافة المقابلة لعنوانه. ‎right‎ فيزيائية هنا عمداً. */
  text-align: right;
  transition: color .18s ease;
}

/* سطرا المحاسب: علامة «الإجمالي مدقَّق» تحت كل رقم */
.rq-reg-rule {
  display: block;
  height: 1px;
  margin-top: .5rem;
  background: rgba(138, 106, 22, .55);
  box-shadow: 0 3px 0 rgba(138, 106, 22, .3);
  transform-origin: right center;
}
.rq-anim .rq-reg-rule { transform: scaleX(0); transition: transform .24s var(--rq-pop); }
.rq-anim .is-struck .rq-reg-rule,
html:not(.rq-anim) .rq-reg-rule { transform: scaleX(1); }

.rq-reg-sub { margin: .6rem 0 0; font-size: 13px; line-height: 1.8; color: var(--rq-mute); }
.rq-reg-note {
  margin: 1.4rem 0 0;
  font-size: 13px;
  line-height: 2;
  color: var(--rq-mute);
  text-align: center;
}
.rq-reg-note a {
  color: var(--rq-teal-d);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* شريط الأمان المضفور — يقفل الشهادة التي فتحتها المدالية */
.rq-guilloche {
  display: block;
  width: 100%;
  height: 10px;
  margin-top: 1.2rem;
  color: var(--rq-gold-ink);
}

/* ======================================================================
   ٧ · كيف تعمل المنصة — Journey: خطٌّ يُرسم، ومحطات تتناوب حوله
   ----------------------------------------------------------------------
   محطة١ و٣ فوق الخط، ٢ تحته — التناوب هو ما يكسر إيقاع «ثلاثة صناديق
   متطابقة». كل محطة شبكتها الداخلية ثابتة (‎1fr / عقدة / 1fr‎) بارتفاعٍ
   واحدٍ صريح، فتقع العقد الثلاث على ارتفاع الخط نفسه تماماً مهما اختلف
   طول النص — لا حاجة لمزامنة يدوية بين محطة وأخرى.

   الحركة تتبع هندسة الخط لا توقيتاً عشوائياً: الخط ‎transform-origin:
   right‎، فرسمه يبدأ من عمود١ (يلامسه فوراً) نحو عمود٣. لذلك: محطة١
   تصحو قرب بداية الرسم، محطة٢ عند ٪٥٠ منه بالضبط (عمود٢ هو منتصف
   المسافة بين١ و٣ هندسياً)، ومحطة٣ عند اكتماله.

   والمزامنة هنا ليست مجازاً: تحويل الخطّ ‎linear‎ لا ‎var(--rq-ease)‎
   عمداً — لأن التأخيرات أدناه (‎calc(.2s + si*.5s)‎) خطّية أيضاً، فلو
   كان تسريع الخطّ منحنياً (بطيئاً ثم سريعاً أو العكس) لَما طابق التقدّم
   الزمني الخطّي تقدّم الرسم البصري الفعلي، وتصحو محطة٢ قبل أو بعد أن
   يصلها الخطّ فعلاً. حسبتُ هذا رقمياً على منحنى Bezier السابق فوجدت
   محطة٢ تصحو والخط مرسوم فعلاً ٪٧٨ لا ٪٥٠ — ولهذا صار الخطّ ‎linear‎.
   ====================================================================== */

.rq-journey-lede {
  margin: -.5rem 0 2.5rem;
  font-size: 15px;
  line-height: 1.9;
  color: var(--rq-mute);
  max-inline-size: 52ch;
}

.rq-journey {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.rq-journey::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline: 16.6667%;           /* = 1/6 → مركز أول عمود وآخره تماماً، كما في سلسلة العهدة */
  height: 1.5px;
  /* ‎--rq-gold‎/‎--rq-gold-2‎ صُمِّما للقبو الداكن (10٫2:1 و5٫9:1 هناك) —
     على الورق يهبطان إلى 1٫5:1 و2٫18:1، خطٌّ لا يكاد يُرى. ‎--rq-gold-ink‎
     هو الذهب الوحيد المخصَّص للسطح الفاتح (4٫55:1)؛ قِسته قبل الكتابة. */
  background: var(--rq-gold-ink);
  transform-origin: right center;   /* يُرسم من جهة بداية القراءة في RTL */
}
/* ‎linear‎ لا ‎var(--rq-ease)‎ — انظر الملاحظة أعلى القسم: التأخيرات
   الخطّية للمحطات تفترض تقدّماً بصرياً خطّياً للخطّ، ومنحنًى متسارع
   يكسر تلك المطابقة */
.rq-anim .rq-journey::before { transform: scaleX(0); transition: transform 1.3s linear .2s; }
.rq-anim .rq-reveal.rq-in .rq-journey::before { transform: scaleX(1); }

/*
 * العقدة مُثبَّتة بـ ‎top:50%‎ + ‎translate‎ — لا علاقة لموضعها بارتفاع
 * المحتوى إطلاقاً. جرّبت أولاً شبكة ‎1fr / عقدة / 1fr‎ متناظرة، فاكتشفت
 * بالتحليل قبل الكتابة النهائية أنها هشّة: لو احتاج نصٌّ فوق الخط مساحة
 * أكبر من نصيبه الاسمي، توزيع ‎fr‎ يكبر ذلك الصفّ بمفرده ويترك الصفّ
 * المقابل (الفارغ) كما هو — فتنزاح العقدة عن مركز الخط الحقيقي. التموضع
 * المطلق هنا يقطع هذا الاعتماد كلياً: العقدة دائماً ٪٥٠ مهما طال النص.
 */
.rq-journey-station {
  position: relative;
  height: 640px;                    /* سخيّ عمداً — يتّسع لأطول فقرة في الأعمدة الثلاثة بهامش مريح */
  padding-inline: 1.25rem;
}
/*
 * ‎--rq-jn-pos‎ يحمل تحويل التوسيط وحده، منفصلاً عن أي تحويل حركي. لو
 * كُتب ‎translate(50%,-50%)‎ مباشرة في ‎transform‎ لَمَحته أي قاعدة حركة
 * لاحقة تكتب ‎transform: scale(...)‎ فوقه — التحويلان لا يتراكمان عبر
 * قواعد منفصلة، والأخيرة تُلغي الأولى كاملة لا تدمجها. كل قاعدة تالية
 * (الدخول، الاستقرار، الـHover) تكتب ‎transform: var(--rq-jn-pos) ...‎
 * فيبقى التوسيط حاضراً دائماً. على الجوال تُصفَّر المتغيّر إلى فراغ.
 */
.rq-journey-node {
  --rq-jn-pos: translate(50%, -50%);   /* ‎50%‎ لا ‎-50%‎ أفقياً: يقابل ‎inset-inline-start‎ في RTL */
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: var(--rq-jn-pos);
  z-index: 1;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rq-gold-ink);
  box-shadow: 0 0 0 5px var(--rq-paper);   /* يقطع الخطّ خلفه فلا يمرّ من فوقه */
  transition: transform .25s var(--rq-ease), box-shadow .25s ease;
}

.rq-journey-content {
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 100%;
  max-inline-size: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* فوق الخط: الحافة السفلى للمحتوى مثبّتة على مسافة ثابتة من العقدة،
   والنص ينمو صاعداً منها بطبيعة التدفّق — لا اعتماد على ارتفاع شقيقه.
   الترتيب البصري ينعكس (الرقم أقرب للعقدة) بلا مسّ ترتيب DOM، فقارئ
   الشاشة يقرأ الرقم أولاً دائماً؛ الانعكاس بصريٌّ فقط عبر ‎flex‎. */
.rq-journey-station--above .rq-journey-content { bottom: calc(50% + 16px); flex-direction: column-reverse; }
.rq-journey-station--below .rq-journey-content { top: calc(50% + 16px); }

.rq-journey-num {
  display: block;
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  font-weight: 700;
  color: var(--rq-gold-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rq-journey-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin: .85rem 0;
  color: var(--rq-teal-d);
  transition: color .25s ease, filter .25s ease;
}
.rq-journey-ic .rq-icon { width: 30px; height: 30px; transition: transform .25s var(--rq-ease); }
.rq-journey-content h3 { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 700; color: var(--rq-ink); line-height: 1.6; }
.rq-journey-content p { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--rq-ink-2); }

/* تفاعل هادئ لا استعراضي: الأيقونة تكبر قليلاً وتذهب ذهباً، وهجٌ خفيف
   خلفها، والعقدة على الخطّ تكبر معها — لا حركة على المحطة كلها */
@media (hover: hover) {
  .rq-journey-station:hover .rq-journey-ic { color: var(--rq-gold-ink); filter: drop-shadow(0 0 9px rgba(233, 196, 106, .4)); }
  .rq-journey-station:hover .rq-journey-ic .rq-icon { transform: scale(1.1); }
  .rq-journey-station:hover .rq-journey-node {
    transform: var(--rq-jn-pos) scale(1.5);
    box-shadow: 0 0 0 5px var(--rq-paper), 0 0 0 8px rgba(233, 196, 106, .16);
  }
}

/*
 * الدخول: كل محطة توقظها اللحظة التي «يصلها» الخطّ هندسياً — محسوبة من
 * ‎--rq-si‎ (فهرس المحطة، يضعه القالب) لا رقماً ثابتاً لكل محطة. الرقم
 * والعقدة يظهران أولاً، فالأيقونة، فالعنوان، فالوصف أخيراً — بالضبط
 * كما طُلب: لا الأربعة معاً.
 */
/* ‎.rq-journey-node‎ منفصلةٌ عمداً عن ‎.rq-journey-num‎ هنا: الأولى تحمل
   تحويل توسيطٍ (‎--rq-jn-pos‎) يجب أن يبقى مركَّباً مع كل حالة حركية،
   والثانية عنصرٌ عادي في التدفّق بلا تحويل آخر ينافس القياس */
.rq-anim .rq-journey-node { opacity: 0; transform: var(--rq-jn-pos) scale(.7); }
.rq-anim .rq-journey-num { opacity: 0; transform: scale(.7); }
.rq-anim .rq-journey-ic { opacity: 0; transform: scale(.85); }
.rq-anim .rq-journey-content h3,
.rq-anim .rq-journey-content p { opacity: 0; transform: translateY(8px); }

.rq-anim .rq-reveal.rq-in .rq-journey-node {
  opacity: 1; transform: var(--rq-jn-pos) scale(1);
  transition: opacity .4s var(--rq-ease), transform .4s var(--rq-ease);
  transition-delay: calc(.2s + (var(--rq-si, 0) * .5s));
}
.rq-anim .rq-reveal.rq-in .rq-journey-num {
  opacity: 1; transform: scale(1);
  transition: opacity .4s var(--rq-ease), transform .4s var(--rq-ease);
  transition-delay: calc(.2s + (var(--rq-si, 0) * .5s));
}
.rq-anim .rq-reveal.rq-in .rq-journey-ic {
  opacity: 1; transform: scale(1);
  transition: opacity .4s var(--rq-ease), transform .4s var(--rq-ease);
  transition-delay: calc(.3s + (var(--rq-si, 0) * .5s));
}
.rq-anim .rq-reveal.rq-in .rq-journey-content h3 {
  opacity: 1; transform: none;
  transition: opacity .4s var(--rq-ease), transform .4s var(--rq-ease);
  transition-delay: calc(.45s + (var(--rq-si, 0) * .5s));
}
.rq-anim .rq-reveal.rq-in .rq-journey-content p {
  opacity: 1; transform: none;
  transition: opacity .4s var(--rq-ease), transform .4s var(--rq-ease);
  transition-delay: calc(.6s + (var(--rq-si, 0) * .5s));
}

@media (max-width: 767.98px) {
  /* عمودي حقيقي: لا فوق/تحت — تناوب الجانبين لا معنى له في عمودٍ واحد.
     تقنية الخطّ والعقدة نفسها المستخدَمة في «سلسلة العهدة» على الجوال. */
  .rq-journey { grid-template-columns: 1fr; gap: 0; }
  .rq-journey::before { display: none; }

  .rq-journey-station,
  .rq-journey-station--above {
    position: relative;
    display: grid;
    grid-template-columns: 18px 1fr;
    grid-template-rows: none;
    height: auto;
    column-gap: 1rem;
    justify-items: stretch;
    text-align: start;
    padding: 0 0 2.25rem;
  }
  .rq-journey-station::before,
  .rq-journey-station::after {
    content: "";
    position: absolute;
    /* عمود العقدة ‎18px‎، والعقدة تتوسّطه فمركزها ‎9px‎ من الحافة — الخطّ
       عرضه ‎1.5px‎، فيبدأ عند ‎9 − .75‎ ليقع مركزه على مركز العقدة تماماً */
    inset-inline-start: 8.25px;
    top: 9px;
    width: 1.5px;
  }
  .rq-journey-station::before { bottom: 0; background: var(--rq-line); }
  .rq-journey-station::after {
    height: 0;
    background: var(--rq-gold-ink);
    transition: height .5s var(--rq-ease);
  }
  .rq-anim .rq-reveal.rq-in .rq-journey-station::after { height: calc(100% - 9px); }
  html:not(.rq-anim) .rq-journey-station::after { height: calc(100% - 9px); }
  .rq-journey-station:last-child { padding-bottom: 0; }
  .rq-journey-station:last-child::before { display: none; }

  /*
   * تصفير كامل لتموضع الحاسوب المطلق: العقدة والمحتوى كانا ‎position:
   * absolute‎ بمرجعية ‎top:50%‎/‎inset-inline-start:50%‎ لتوسّطٍ مستقلٍّ عن
   * ارتفاع النص (انظر الملاحظة أعلى القاعدة الأصلية). بلا هذا التصفير
   * الصريح هنا يبقيان معلَّقين بإحداثيات الحاسوب فوق شبكة الجوال الجديدة
   * — عقدة طائفة في منتصف الشاشة ومحتوى فوقها، لا عمودٌ مقروء.
   *
   * ‎--rq-jn-pos‎ نفسه يُصفَّر هنا أيضاً لا العرض المباشر فقط: قواعد
   * الدخول الحركي أدناه (‎.rq-anim .rq-journey-node‎ وأخواتها) لا تحمل
   * استعلام عرض، فتبقى تقرأ المتغيّر من قاعدته الأصلية إن لم يُعَد
   * تعريفه هنا.
   *
   * والقيمة فراغٌ لا كلمة ‎none‎ — فرقٌ تحقّقت منه فعلياً لا افتراضاً:
   * ‎transform: var(--x) scale(1)‎ مع ‎--x:none‎ يُنتج ‎"none scale(1)"‎
   * بعد الاستبدال، وهذه ليست قيمة ‎transform‎ صالحة (‎none‎ لا يُركَّب مع
   * دالّة أخرى) — فيُسقط المتصفح التصريح كاملاً بصمت. جرّبتها مباشرة في
   * المتصفح فرأيت العقدة تبقى بلا حركة دخول إطلاقاً. الفراغ يختفي عند
   * الاستبدال بلا أثر، فتبقى ‎scale(...)‎ وحدها — قيمةً صالحة.
   */
  .rq-journey-node {
    --rq-jn-pos: ;
    position: static;
    inset-inline-start: auto;
    transform: none;
    grid-row: 1; grid-column: 1;
    align-self: start;
    margin-top: 4.5px;
    box-shadow: 0 0 0 5px var(--rq-paper);
  }
  .rq-journey-station:hover .rq-journey-node { transform: scale(1.5); }

  /*
   * الفرعان ‎--above‎ و‎--below‎ مذكوران صراحةً كلاهما — لا الصنف المجرَّد
   * وحده. قاعدة الحاسوب ‎.rq-journey-station--below .rq-journey-content
   * { top: calc(50% + 16px) }‎ خصوصيتها (٠،٢،٠) تساوي خصوصية أي بديلٍ
   * هنا يستهدف ‎--below‎ صراحةً، فتُحسم بترتيب الورود لا تُترك للمصادفة.
   * كانت ‎top:auto‎ تعمل عملياً بفضل ‎position:static‎ (يُسقط top/bottom
   * أياً كانت قيمتهما) — لكن الاعتماد على ذلك تصادفٌ لا ضمان.
   */
  .rq-journey-content,
  .rq-journey-station--above .rq-journey-content,
  .rq-journey-station--below .rq-journey-content {
    position: static;
    inset-inline-start: auto;
    bottom: auto; top: auto;
    transform: none;
    grid-row: 1; grid-column: 2;
    align-self: start;
    align-items: flex-start;
    text-align: start;
    flex-direction: column;
    max-inline-size: none;
    padding: 0;
  }
  .rq-journey-num { font-size: 2rem; }
  .rq-journey-ic { margin: .5rem 0; }

  /* على الجوال يتبع الظهور ترتيب القراءة الطبيعي — محطة تلو أخرى بالتتابع */
  .rq-anim .rq-reveal.rq-in .rq-journey-node,
  .rq-anim .rq-reveal.rq-in .rq-journey-num { transition-delay: calc(.15s + (var(--rq-si, 0) * .3s)); }
  .rq-anim .rq-reveal.rq-in .rq-journey-ic { transition-delay: calc(.22s + (var(--rq-si, 0) * .3s)); }
  .rq-anim .rq-reveal.rq-in .rq-journey-content h3 { transition-delay: calc(.29s + (var(--rq-si, 0) * .3s)); }
  .rq-anim .rq-reveal.rq-in .rq-journey-content p { transition-delay: calc(.36s + (var(--rq-si, 0) * .3s)); }
}

/* ======================================================================
   ٧٫٥ · الأيقونات — خطٌّ يُرسم أو ملءٌ يتلاشى، لا يظهران دفعة واحدة
   ----------------------------------------------------------------------
   نفس أسلوب الشمسة حرفياً: ‎pathLength="100"‎ في القالب، و‎stroke-dasharray:
   100‎ هنا يجعل ‎stroke-dashoffset‎ نسبةً موحّدة. الحالة النهائية هي
   الافتراضية دائماً؛ الإخفاء لا يقع إلا تحت ‎.rq-anim‎، ولا يبدأ إلا حين
   يدخل قسم الأيقونة نطاق الرؤية (يرثه من ‎.rq-reveal.rq-in‎ المحيط).
   ====================================================================== */

.rq-icon { width: 100%; height: 100%; display: block; overflow: visible; }

.rq-anim .rq-icon .ic-draw { stroke-dasharray: 100; stroke-dashoffset: 100; }
.rq-anim .rq-icon .ic-fade { opacity: 0; }
.rq-anim .rq-reveal.rq-in .rq-icon .ic-draw,
.rq-anim .rq-reveal.rq-in .rq-icon .ic-fade { transition-timing-function: var(--rq-ease); }
.rq-anim .rq-reveal.rq-in .rq-icon .ic-draw { stroke-dashoffset: 0; transition-property: stroke-dashoffset; transition-duration: .5s; }
.rq-anim .rq-reveal.rq-in .rq-icon .ic-fade { opacity: 1; transition-property: opacity; transition-duration: .4s; }
.rq-anim .rq-reveal.rq-in .rq-icon .ic-1 { transition-delay: .05s; }
.rq-anim .rq-reveal.rq-in .rq-icon .ic-2 { transition-delay: .25s; }
.rq-anim .rq-reveal.rq-in .rq-icon .ic-3 { transition-delay: .45s; }
.rq-anim .rq-reveal.rq-in .rq-icon .ic-4 { transition-delay: .65s; }

/* ======================================================================
   ٨ · لماذا تثق بنا — Trust Story: بيانٌ رئيسي كبير + أدلّة داعمة أصغر
   ----------------------------------------------------------------------
   لا شبكة متساوية: عمودٌ رئيسي أعرض (١٫٣fr) يحمل الضمانة الأولى — سجل
   الحركة، لأن البقية كلها مقيَّدة داخله فعلياً — بلا صندوقٍ ولا ظلّ، حجم
   الخط وحده هو الفارق. خلفه نصف الشمسة (تمتدّ خارج حدود العمود عمداً)
   بشفافية ٪٥ لا تُقرأ كأيقونة بل كنسيج. بجانبه ثلاثة أدلّة أصغر موصولة
   بخطٍّ رأسي رفيع — القطعة نفسها المستخدَمة في «سلسلة العهدة» و«كيف
   تعمل المنصة» على الجوال، مُعاد استخدامها هنا حرفياً.
   ====================================================================== */

.rq-trust-lede {
  margin: -.5rem 0 3rem;
  font-size: 15px;
  line-height: 1.9;
  color: var(--rq-mute);
  max-inline-size: 56ch;
}

.rq-trust-story {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

/* ── البيان الرئيسي ── */
.rq-trust-primary { position: relative; }
.rq-trust-glow {
  position: absolute;
  top: -12%;
  inset-inline-end: -18%;    /* يمتدّ خارج حدود العمود — «نصف شكل خلف المحتوى» لا ختماً محاذياً كاملاً */
  width: 130%;
  aspect-ratio: 1;
  z-index: 0;
  opacity: .05;
  pointer-events: none;
}
.rq-trust-glow .rq-rosette { width: 100%; height: 100%; }
.rq-anim .rq-trust-glow { opacity: 0; transform: scale(.94); }
.rq-anim .rq-reveal.rq-in .rq-trust-glow {
  opacity: .05;
  transform: scale(1);
  transition: opacity 1s var(--rq-ease), transform 1s var(--rq-ease);
}

.rq-trust-primary-ic {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  margin-bottom: 1.4rem;
  color: var(--rq-gold-ink);
}
.rq-trust-primary-ic .rq-icon { width: 46px; height: 46px; }
.rq-trust-primary h3 {
  position: relative; z-index: 1;
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  font-weight: 700;
  color: var(--rq-ink);
  line-height: 1.55;
}
.rq-trust-primary p {
  position: relative; z-index: 1;
  margin: 0;
  font-size: 15px;
  line-height: 2;
  color: var(--rq-ink-2);
  max-inline-size: 48ch;
}

.rq-anim .rq-trust-primary-ic,
.rq-anim .rq-trust-primary h3,
.rq-anim .rq-trust-primary p { opacity: 0; transform: translateY(10px); }
.rq-anim .rq-reveal.rq-in .rq-trust-primary-ic,
.rq-anim .rq-reveal.rq-in .rq-trust-primary h3,
.rq-anim .rq-reveal.rq-in .rq-trust-primary p {
  opacity: 1; transform: none;
  transition: opacity .6s var(--rq-ease), transform .6s var(--rq-ease);
}
.rq-anim .rq-reveal.rq-in .rq-trust-primary-ic { transition-delay: .1s; }
.rq-anim .rq-reveal.rq-in .rq-trust-primary h3  { transition-delay: .25s; }
.rq-anim .rq-reveal.rq-in .rq-trust-primary p   { transition-delay: .4s; }

/* ── الأدلّة الداعمة ── */
.rq-evidence { list-style: none; margin: 0; padding: 0; }

.rq-evidence-item { position: relative; padding-inline-start: 26px; padding-bottom: 1.85rem; }
.rq-evidence-item:last-child { padding-bottom: 0; }

/* نفس حساب «سلسلة العهدة» على الجوال حرفياً: عقدة ٧px مركزها ٩px من
   الحافة، خطٌّ ١٫٥px يبدأ عند ٩ ناقص نصف عرضه ليقع مركزه على مركز
   العقدة تماماً — هنا الأصل ‎top‎ عند مركز الأيقونة (١٤px) لا حافة أولى. */
.rq-evidence-item::before,
.rq-evidence-item::after {
  content: "";
  position: absolute;
  inset-inline-start: 8.25px;
  top: 14px;
  width: 1.5px;
}
.rq-evidence-item::before { bottom: 0; background: var(--rq-line); }
.rq-evidence-item:last-child::before { display: none; }
.rq-evidence-item::after {
  height: calc(100% - 14px);   /* الحالة الافتراضية: الخطّ الذهبي مكتمل بلا سكربت */
  background: var(--rq-gold-ink);
}
.rq-anim .rq-evidence-item::after { height: 0; transition: height .5s var(--rq-ease); }
.rq-anim .rq-reveal.rq-in .rq-evidence-item::after { height: calc(100% - 14px); }

.rq-evidence-node {
  position: absolute;
  inset-inline-start: 5.5px;
  top: 14px;
  transform: translateY(-50%);
  z-index: 1;
  width: 7px; height: 7px;
  border-radius: 50%;
  /* ‎--rq-paper‎ لا ‎--rq-card‎: العقدة تجلس على خلفية الصفحة العارية بلا
     لوحٍ خلفها (خلافاً لعقدة السلسلة وشمسة العهد)، فيجب أن يطابق حشوها
     السطح الفعلي لا لون البطاقة البيضاء — وإلا ظهرت نقطة بيضاء خفيفة */
  background: var(--rq-paper);
  box-shadow: 0 0 0 1.5px var(--rq-gold-ink);
  transition: box-shadow .25s ease;
}

.rq-evidence-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  margin-bottom: .55rem;
  color: var(--rq-teal-d);
  transition: color .25s ease, transform .25s var(--rq-ease);
}
.rq-evidence-ic .rq-icon { width: 18px; height: 18px; }
.rq-evidence-item h3 { margin: 0 0 .35rem; font-size: .95rem; font-weight: 700; color: var(--rq-ink); line-height: 1.6; }
.rq-evidence-item p { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--rq-ink-2); }

@media (hover: hover) {
  .rq-evidence-item:hover .rq-evidence-ic { color: var(--rq-gold-ink); transform: translateX(-3px); }
  .rq-evidence-item:hover .rq-evidence-node { box-shadow: 0 0 0 1.5px var(--rq-gold-ink), 0 0 0 4px rgba(233, 196, 106, .18); }
}

/* دخول متعاقب — بعد البيان الرئيسي وخطّه، دليلٌ فدليل لا الثلاثة معاً */
.rq-anim .rq-evidence-item { opacity: 0; transform: translateY(12px); }
.rq-anim .rq-reveal.rq-in .rq-evidence-item {
  opacity: 1; transform: none;
  transition: opacity .5s var(--rq-ease), transform .5s var(--rq-ease);
}
.rq-anim .rq-reveal.rq-in .rq-evidence-item:nth-child(1) { transition-delay: .7s; }
.rq-anim .rq-reveal.rq-in .rq-evidence-item:nth-child(1)::after { transition-delay: .7s; }
.rq-anim .rq-reveal.rq-in .rq-evidence-item:nth-child(2) { transition-delay: .95s; }
.rq-anim .rq-reveal.rq-in .rq-evidence-item:nth-child(2)::after { transition-delay: .95s; }
.rq-anim .rq-reveal.rq-in .rq-evidence-item:nth-child(3) { transition-delay: 1.2s; }
.rq-anim .rq-reveal.rq-in .rq-evidence-item:nth-child(3)::after { transition-delay: 1.2s; }

@media (max-width: 899.98px) {
  .rq-trust-story { grid-template-columns: 1fr; gap: 2.25rem; }
  .rq-trust-glow { width: 90%; inset-inline-end: 0; top: -8%; opacity: .04; }
  .rq-anim .rq-reveal.rq-in .rq-trust-glow { opacity: .04; }
  .rq-trust-primary h3 { font-size: 1.35rem; }
  .rq-trust-primary p { max-inline-size: none; }
}

/* ======================================================================
   ٩ · الأبواب الثلاثة — باب الأسرة مقطوعٌ من القبو نفسه
   ====================================================================== */

.rq-doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}
.rq-door {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.75rem;
  border-radius: var(--rq-r-lg);
  background: var(--rq-card);
  border: 1px solid var(--rq-line);
  text-decoration: none;
  transition: transform .22s var(--rq-ease), box-shadow .22s ease, border-color .22s ease;
}
.rq-door:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -20px rgba(6, 32, 30, .25);
  border-color: var(--rq-teal);
}
.rq-door .who { font-size: 12px; font-weight: 700; color: var(--rq-teal-d); }
.rq-door .what { font-size: 1.4rem; font-weight: 700; color: var(--rq-ink); line-height: 1.55; }
.rq-door .why { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--rq-ink-2); flex-grow: 1; }
.rq-door .go {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.25rem;
  font-size: 15px;
  font-weight: 700;
  color: var(--rq-teal-d);
}
.rq-door .go i { transition: transform .22s var(--rq-ease); }
.rq-door:hover .go i { transform: translateX(-4px); }

.rq-door--lead { background: var(--rq-void); border-color: rgba(233, 196, 106, .3); }
.rq-door--lead .who { color: var(--rq-gold); }
.rq-door--lead .what { color: var(--rq-onvoid); }
.rq-door--lead .why { color: var(--rq-onvoid-3); }
.rq-door--lead .go { color: var(--rq-gold); }
.rq-door--lead:hover { border-color: var(--rq-gold); box-shadow: 0 18px 40px -20px rgba(6, 32, 30, .55); }

.rq-doors-note {
  margin: 1.6rem 0 0;
  font-size: 13px;
  line-height: 2;
  color: var(--rq-mute);
  text-align: center;
}
.rq-doors-note a { color: var(--rq-teal-d); text-decoration: underline; text-underline-offset: 3px; }

/* ======================================================================
   ١٠ · التذييل — الختم يستقرّ: من السجل وإليه
   ====================================================================== */

.pub-foot {
  position: relative;
  background: var(--rq-void);
  color: var(--rq-onvoid-3);
  margin-top: var(--rq-gap);
  border-top: 1px solid var(--rq-hair-gold);
  padding-block: 4rem 2rem;
}
.rq-foot-seal {
  position: absolute;
  top: 0;
  inset-inline: 0;
  margin-inline: auto;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  z-index: 0;
}
.rq-foot-seal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--rq-oct);
  background: var(--rq-gold-2);
}
.rq-foot-seal::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  clip-path: var(--rq-oct);
  background: var(--rq-void);
}
.rq-foot-seal svg { width: 20px; height: 20px; color: var(--rq-gold-2); }

.rq-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
/* الشعار كاملاً في عمود الهوية — ‎height:auto‎ مع نسبةٍ معلنة في الوسم
   فيحجز مكانه قبل وصوله ولا يقفز التذييل */
.rq-foot-logo {
  display: block;
  width: min(210px, 60%);
  height: auto;
  /* سقفٌ لأجل الشعار المرفوع من الإعدادات — نسبته غير معلومة، وطويلٌ
     منها كان سيدفع بقية عمود الهوية خارج الشاشة */
  max-height: 200px;
  object-fit: contain;
  object-position: start;
  margin-bottom: 1.25rem;
}
.pub-foot h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--rq-onvoid-2);
  margin: 0 0 1rem;
}
.pub-foot p { margin: 0; font-size: 14px; line-height: 2; }
.pub-foot .lead { font-size: 14.5px; color: var(--rq-onvoid-3); max-inline-size: 44ch; }
.pub-foot a {
  color: var(--rq-onvoid-3);
  font-size: 14px;
  text-decoration: none;
  background-image: linear-gradient(var(--rq-gold-2), var(--rq-gold-2));
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0 1px;
  transition: color .2s ease, background-size .2s var(--rq-ease);
}
.pub-foot a:hover { color: var(--rq-onvoid-2); background-size: 100% 1px; }
.rq-foot-col { display: flex; flex-direction: column; gap: .6rem; }
.rq-foot-col span { display: flex; align-items: center; gap: .5rem; font-size: 14px; }
.rq-foot-col span i { color: var(--rq-gold-2); font-size: 15px; }
.rq-foot-base {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rq-hair-gold);
  font-size: 13px;
  line-height: 1.9;
  color: var(--rq-onvoid-3);
}

/* ======================================================================
   ١١ · صفحات البوابة الأخرى — ‎.pub-hero‎ بالاسم (طباعة التقرير تستهدفه)
   ====================================================================== */

.pub-hero {
  position: relative;
  background: var(--rq-void);
  background-image: radial-gradient(520px at 82% 0%, rgba(233, 196, 106, .09), transparent 70%);
  color: var(--rq-onvoid-2);
  border: 1px solid var(--rq-hair-gold);
  border-radius: var(--rq-r-lg);
  padding: clamp(1.8rem, 4.5vw, 2.7rem) clamp(1.3rem, 3.5vw, 2.3rem);
  margin-top: 2.5rem;
  overflow: hidden;
}
.pub-hero h1 {
  font-size: clamp(22px, 3.4vw, 31px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--rq-onvoid);
  margin: 0 0 .8rem;
}
/* السطر يملأ عرض الصندوق. كان محدوداً بـ‎66ch‎ حفاظاً على مقياس القراءة،
   فكان نصف الترويسة يبقى فارغاً على الشاشات العريضة والنص ملتصقاً بحافةٍ
   واحدة — فراغٌ يُقرأ خللاً في التخطيط لا اختياراً في التنضيد. */
.pub-hero p {
  color: var(--rq-onvoid-3);
  font-size: 14.5px;
  line-height: 2;
  margin: 0;
}
.pub-hero a:not(.btn):not(.rq-btn) { color: var(--rq-gold); }

/* ======================================================================
   ١٢ · كشف بالتمرير + بؤرة لكل سطح + تقليل الحركة
   ====================================================================== */

.rq-anim .rq-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--rq-ease), transform .6s var(--rq-ease);
}
.rq-anim .rq-reveal.rq-in { opacity: 1; transform: none; }

/* حلقة البؤرة بلون سطحها — تركوازي فاتح على القبو، تركوازي غامق على الورق */
.rq-btn:focus-visible,
.rq-door:focus-visible,
.rq-reg-cell:focus-visible {
  outline: 2px solid var(--rq-focus);
  outline-offset: 2px;
  border-radius: var(--rq-r);
}
.rq-nl:focus-visible,
.rq-brand:focus-visible,
.rq-burger:focus-visible,
.rq-nav-cta .rq-btn:focus-visible,
.rq-hero .rq-btn:focus-visible,
.rq-chain-foot a:focus-visible,
.pub-hero .rq-btn:focus-visible,
.pub-hero a:focus-visible,
.pub-foot a:focus-visible {
  outline: 2px solid var(--rq-focus-onvoid);
  outline-offset: 2px;
  border-radius: var(--rq-r-sm);
}
/* باب الأسرة داكنٌ لكن حلقته تُرسم خارجه فوق الورق (‎offset‎ موجب) —
   فلونها لون الورق لا لون البطاقة: 7٫18:1 على الورق */
.rq-door--lead:focus-visible {
  outline: 2px solid var(--rq-focus);
  outline-offset: 2px;
  border-radius: var(--rq-r-lg);
}

/*
 * من أطفأ الحركة يستلم النُّصب مكتملاً فوراً: الأطروحة منضّدة، السطور
 * مسطَّرة، الخيط موصول، الأختام مطبوعة، الأرقام مطبوعة وسطورها مشطوبة.
 * والشمسة تُعرض كاملةً **مع دوائر إنشائها** عند شفافيتها العاملة —
 * النقش معروضاً بسقالته، وهي أصدق نسخ الصفحة.
 */
@media (prefers-reduced-motion: reduce) {
  .rq-reveal, .rq-thesis span, .rq-fade, .rq-face,
  .rq-draw path, .rq-fill, .rq-heart,
  .rq-sec-head .rule,
  .rq-icon .ic-draw, .rq-icon .ic-fade,
  .rq-journey::before,
  .rq-journey-num, .rq-journey-ic, .rq-journey-content h3, .rq-journey-content p,
  .rq-trust-primary-ic, .rq-trust-primary h3, .rq-trust-primary p,
  .rq-evidence-item,
  .rq-reg-rule, .rq-thesis .w em::after {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  /*
   * ‎.rq-journey-node‎ منفصلة: ‎transform:none !important‎ يُسقط تحويل
   * التوسيط ‎--rq-jn-pos‎ فتهرب العقدة عن مركز الخطّ على الحاسوب — تُفرض
   * قيمة المتغيّر نفسها، لا التصفير الكامل.
   *
   * وعلى الجوال المتغيّر **فراغٌ** لا كلمة ‎none‎ (انظر تعليق قاعدة
   * الإعادة في استعلام الجوال، وسبب الفرق: ‎transform: none scale(1)‎
   * قيمةٌ غير صالحة يُسقطها المتصفح كاملاً — تحقّقتُ منها مباشرة).
   * فهذا السطر هنا يتحوّل هناك إلى ‎transform: !important‎ بلا قيمة —
   * تصريحٌ غير صالح يُسقطه المتصفح، فيسقط معه ‎!important‎ أيضاً، ويعود
   * الحسم لقاعدة الجوال العادية (‎transform:none‎) — لا مصادفة، لكنه
   * اعتمادٌ على إسقاط تصريح لا فرضه، فلا تُصلحه مستقبلاً إلى ‎none‎
   * حرفية ظنّاً أنها الأوضح؛ ستُعيد نفس علّة «‎none scale(1)‎» في مكانٍ آخر.
   */
  .rq-journey-node { opacity: 1 !important; transform: var(--rq-jn-pos) !important; animation: none !important; }

  /* موصل الجوال العمودي («كيف تعمل المنصة»): ‎height:100%‎ لا ‎auto‎ —
     عنصر مطلق التموضع بلا محتوى ينهار إلى صفر تحت ‎auto‎ */
  .rq-journey-station::after { height: calc(100% - 9px) !important; transition: none !important; }
  /* الخطّ الرأسي في «لماذا تثق بنا» — نفس المنطق، أصل مختلف (١٤px) */
  .rq-evidence-item::after { height: calc(100% - 14px) !important; transition: none !important; }
  /* خلفية الشمسة الخافتة تبقى خافتة — ‎opacity:1‎ هنا تُحوّلها من نسيجٍ
     صامت إلى ختمٍ صارخ، عكس ما صُمِّمت له تماماً */
  .rq-trust-glow { opacity: .05 !important; transform: none !important; }
  .rq-guides, .rq-guides circle { opacity: .34 !important; transition: none !important; }
  .rq-stations::before, .rq-seal { animation: none !important; }
  /* لا قلم هنا: التنضيد لا يبدأ أصلاً عند من أطفأ الحركة. والقاعدة
     للحال النادرة وحدها — من بدّل تفضيله والصفحة مفتوحة أمامه. */
  .rq-thesis .rq-pen::after { display: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ======================================================================
   ١٣ · الجوال
   ====================================================================== */

@media (max-width: 899.98px) {
  .rq-hero { min-height: auto; padding-block: 3.5rem 7rem; }
  .rq-hero-grid { grid-template-columns: 1fr; }
  /* الشمسة علامة مائية خلف الأطروحة — لا عنصراً ينافسها */
  .rq-rosette-slot {
    position: absolute;
    inset-inline: 0;
    top: 3.5rem;
    margin-inline: auto;
    width: min(88vw, 460px);
    opacity: .13;
    pointer-events: none;
    z-index: 0;
    filter: none;
  }

  /* الوجهان على الجوال: أرضٌ لا عنصر. العمود واحدٌ هنا، فالنصّ يمرّ فوق
     الصورتين حتماً — ‎.28‎ تُبقي الوجه محسوساً وتُبقي ‎#F2F7F5‎ فوق ٧:١.
     تكرار ‎.rq-anim .rq-in‎ لازم: قاعدة الظهور أعلاه أخصّ من ‎.rq-face‎. */
  .rq-faces { inline-size: 100%; }
  .rq-face, .rq-anim .rq-in .rq-face { opacity: .28; }
  .rq-drift--a { inset-inline-end: -14%; bottom: 1%; inline-size: 74%; block-size: 44%; }
  .rq-drift--b { inset-inline-start: 2%; top:    7%; inline-size: 66%; block-size: 39%; }

  .rq-chain-grid { grid-template-columns: 1fr; gap: 0; }
  .rq-chain-head { position: static; margin-bottom: 2rem; }

  .rq-plate { margin-top: -4rem; padding: 1.5rem; }
  .rq-register { grid-template-columns: repeat(2, 1fr); }
  .rq-reg-cell:nth-child(odd) { border-inline-start: 0; }
  .rq-reg-cell:nth-child(n+3) { border-top: 1px solid var(--rq-line-2); }
  .rq-reg-num { font-size: clamp(2.2rem, 8vw, 2.6rem); }

  /* ‎.rq-journey‎ و‎.rq-trust-story‎ سُوّيا في قسميهما أعلاه — لكلٍّ
     استعلامه الخاص هناك، فلا حاجة لتكرارهما هنا. */

  .rq-doors { grid-template-columns: 1fr; }
  .rq-foot-grid { grid-template-columns: 1fr; gap: 2rem; }
  .rq-foot-seal { width: 36px; height: 36px; }
}

@media (max-width: 575.98px) {
  .rq-thesis .w { font-size: max(2.35rem, var(--fs-thesis-loud)); }
  .rq-thesis span { font-size: max(1.5rem, var(--fs-thesis-quiet)); }
  .rq-hero-cta { flex-direction: column; }
  .rq-hero-cta .rq-btn { width: 100%; }

  .rq-register { grid-template-columns: 1fr; }
  .rq-reg-cell { border-inline-start: 0; }
  .rq-reg-cell + .rq-reg-cell { border-top: 1px solid var(--rq-line-2); }

  .rq-chain-foot { flex-direction: column; align-items: stretch; gap: .8rem; }
  .rq-station { grid-template-columns: 36px 1fr; gap: 1rem; }
  .rq-node { width: 36px; }
  .rq-stations::before { inset-inline-start: 17px; }

  .rq-plate { padding: 1.25rem; }
  /* المدالية تبرز ٢٦ بكسلاً في لوحٍ حشوته ٢٠ فقط — تُصغَّر ويُزاح
     العنوان قليلاً كي لا تلامس صواعدُ العربية قاعدة المثمّن */
  .rq-plate-medal { width: 44px; height: 44px; }
  .rq-plate-medal svg { width: 22px; height: 22px; }
  .rq-plate .rq-sec-head { margin-top: .6rem; }
  .rq-guilloche { height: 8px; }
  .rq-door { padding: 1.4rem; }
  .pub-foot { padding-block: 3rem 1.5rem; }
}

/* ======================================================================
   ١٤ · معالج الطلب — نموذجٌ واحد يُقرأ خطوةً خطوة
   ----------------------------------------------------------------------
   الأسرة التي تملأ هذا النموذج ليست موظفةَ إدخال بيانات: تملؤه مرة واحدة
   في عمرها، غالباً على هاتفٍ صغير وشبكةٍ متقطّعة. فالنموذج مقسومٌ إلى
   ستّ صفحات قصيرة، في كل واحدة أربعة حقول أو خمسة، وشريطٌ يقول أين هي
   من الطريق. البيانات كلها في ‎<form>‎ واحد وإرسالٍ واحد — التقسيم
   بصريٌّ بحت، فلا خطوة تُحفظ في الخادم ولا نصف طلبٍ يعلق في القاعدة.

   وقاعدة الملف نفسها تحكم هنا: الحالة النهائية هي الافتراض. بلا
   جافاسكربت تنبسط الخطوات الستّ نموذجاً واحداً طويلاً يعمل بالكامل،
   ولا يظهر شريط الخطوات ولا زرّا «السابق/التالي» — لأنها بلا سكربتٍ
   أزرارٌ ميتة. ‎.rq-wiz-armed‎ نافذة الإقلاع وحدها (يشيلها مؤقّت الأمان
   في القالب إن لم يُقلع السكربت)، و‎.rq-wiz--on‎ إعلانُ السكربت أنه
   أمسك بالنموذج فعلاً — وعندها وحدها يحكم ‎hidden‎ ما يظهر وما يختفي.
   ====================================================================== */

/* الخطوات الخمس التالية مطويّةٌ في نافذة الإقلاع فقط. المحدِّد بالرقم
   لا بـ‎:first-of-type‎: القالب يضع ‎<script>‎ الإقلاع و‎@csrf‎ إخوةً
   للأقسام، وأيّ عنصرٍ يُدسّ بينها لاحقاً يقلب ترتيب «الأول». */
.rq-wiz-armed .rq-wiz-panel:not([data-step="1"]) { display: none; }
.rq-wiz--on   .rq-wiz-panel[hidden]              { display: none; }

.rq-wiz-bar,
.rq-wiz-nav { display: none; }
.rq-wiz-armed .rq-wiz-bar,
.rq-wiz--on   .rq-wiz-bar { display: block; }
.rq-wiz--on   .rq-wiz-nav { display: flex; }

/* ── شريط الخطوات ── */

.rq-wiz-bar {
  position: sticky;
  top: var(--rq-nav-h);
  z-index: 40;
  margin-bottom: 1.25rem;
  padding: .8rem clamp(.75rem, 2.5vw, 1.15rem) .7rem;
  background: var(--rq-card);
  border: 1px solid var(--rq-line);
  border-radius: var(--rq-r);
  box-shadow: 0 14px 28px -24px rgba(6, 32, 30, .7);
}

.rq-wiz-head {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .55rem;
}
.rq-wiz-head .now { font-size: 15px; font-weight: 700; color: var(--rq-ink); }
.rq-wiz-head .of  { margin-inline-start: auto; font-size: 12px; color: var(--rq-mute); white-space: nowrap; }

.rq-wiz-track {
  height: 6px;
  border-radius: 99px;
  background: var(--rq-line-2);
  overflow: hidden;
}
/* التعبئة أول أبناء المضمار، فتنمو من جهة البدء — يميناً في RTL بلا قاعدة اتجاه */
.rq-wiz-fill {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  border-radius: 99px;
  background: linear-gradient(to left, var(--rq-teal-d), var(--rq-teal));
  transition: width .35s var(--rq-ease);
}

.rq-wiz-dots {
  display: flex;
  gap: .2rem;
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
}
.rq-wiz-dots > li { flex: 1 1 0; min-width: 0; }

.rq-wiz-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .28rem;
  width: 100%;
  padding: .2rem .1rem;
  background: none;
  border: 0;
  border-radius: var(--rq-r-sm);
  font: inherit;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--rq-mute);
  cursor: pointer;
}
.rq-wiz-dot .n {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 1.5px solid var(--rq-line);
  border-radius: 50%;
  background: var(--rq-card);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--rq-mute);
  transition: background .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}
.rq-wiz-dot .t {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* المكتملة تُختم بعلامة صحّ — الرقم يُخفى ولا يُحذف (قارئ الشاشة يقرأ النص) */
.rq-wiz-dot.is-done .n {
  background: var(--rq-teal-wash);
  border-color: var(--rq-teal);
  color: var(--rq-teal-d);
}
.rq-wiz-dot[aria-current="step"] { color: var(--rq-ink); font-weight: 700; }
.rq-wiz-dot[aria-current="step"] .n {
  background: var(--rq-teal);
  border-color: var(--rq-teal);
  color: #fff;
}
/* خطوةٌ فيها حقلٌ ناقص — تُعلَّم في الشريط كي لا يبحث أحدٌ عن خطئه */
.rq-wiz-dot.is-bad .n {
  background: #FCF2F1;
  border-color: var(--rq-bad);
  color: var(--rq-bad);
}
.rq-wiz-dot:hover .n { border-color: var(--rq-teal); }
.rq-wiz-dot:focus-visible { outline: 2px solid var(--rq-focus); outline-offset: 2px; }

/* ── جسم الخطوة ── */

.rq-wiz-lede {
  margin: 0 0 1rem;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--rq-ink-2);
}

/* الإرشاد تحت الحقل: صغيرٌ ورماديّ، لكنه لا ينزل تحت ١٢px ولا تحت
   ‎--rq-mute‎ — 4٫71:1، وهذه أرضيته */
.rq-hint {
  margin: .35rem 0 0;
  font-size: 12px;
  line-height: 1.85;
  color: var(--rq-mute);
}
/* الملاحظات التي يكتبها السكربت تبقى فارغةً أكثر وقتها — وفارغةٌ بهامش
   تفتح فجوةً تحت الحقل بلا سبب ظاهر */
.rq-hint:empty { display: none; }

/* تنبيهٌ لا يمنع: رقمان لا يتّسقان، أو بطاقاتٌ أقل مما ذُكر. الذهب
   الوحيد الجائز على الورق — 4٫57:1 */
.rq-warn { color: var(--rq-gold-ink); font-weight: 600; }

/* «(اختياري)» بجانب اسم الحقل — أخفتُ من الاسم ولا يزاحمه */
.rq-opt { font-size: 11.5px; font-weight: 400; }

.rq-err {
  display: flex;
  align-items: flex-start;
  gap: .35rem;
  margin: .4rem 0 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.75;
  color: var(--rq-bad);
}
.rq-err::before {
  content: "!";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  margin-top: .1rem;
  border-radius: 50%;
  background: var(--rq-bad);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* «لماذا نسأل عن هذا؟» — الشرح الطويل يبقى كاملاً ولا يقف في الطريق */
.rq-why {
  margin-top: .7rem;
  border: 1px solid var(--rq-line);
  border-radius: var(--rq-r-sm);
  background: var(--rq-card-2);
}
.rq-why > summary {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .8rem;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rq-teal-d);
  cursor: pointer;
  list-style: none;
}
.rq-why > summary::-webkit-details-marker { display: none; }
.rq-why > summary::after {
  content: "›";
  margin-inline-start: auto;
  font-size: 16px;
  transition: transform .2s var(--rq-ease);
}
.rq-why[open] > summary::after { transform: rotate(90deg); }
.rq-why > summary:focus-visible { outline: 2px solid var(--rq-focus); outline-offset: -2px; border-radius: var(--rq-r-sm); }
.rq-why .bd {
  padding: 0 .8rem .8rem;
  font-size: 12.5px;
  line-height: 2;
  color: var(--rq-ink-2);
}

/* عمر الطفل يُحسب أمام عينَي من يكتب التاريخ — سنُّ القبول أكثر سببٍ
   يُرَدّ به طلب، ومعرفته قبل الإرسال أرحم من معرفتها بعده */
.rq-age {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin: .35rem 0 0;
  padding: .15rem .5rem;
  border-radius: 99px;
  background: var(--rq-teal-wash);
  font-size: 12px;
  font-weight: 600;
  color: var(--rq-teal-d);
}
.rq-age.is-bad { background: #FCF2F1; color: var(--rq-bad); }
.rq-age:empty { display: none; }

/* ── أزرار المسير ── */

.rq-wiz-nav {
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rq-line-2);
}
/* «التالي» إلى اليسار و«السابق» إلى اليمين — لأن الأمام في صفحةٍ عربية
   جهةُ اليسار. وسهما الزرّين يقولان الشيء نفسه، فلو تعاكس الموضعُ
   والسهمُ لتردّدت اليد قبل كل خطوة. */
.rq-wiz-nav [data-wiz-next] { margin-inline-start: auto; }

/* ── لوح المراجعة الأخيرة ── */

.rq-sum-grp {
  margin-bottom: .8rem;
  border: 1px solid var(--rq-line);
  border-radius: var(--rq-r);
  overflow: hidden;
}
.rq-sum-grp > h4 {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .5rem .85rem;
  background: var(--rq-card-2);
  border-bottom: 1px solid var(--rq-line-2);
  font-size: 13px;
  font-weight: 700;
  color: var(--rq-ink);
}
.rq-sum-edit {
  margin-inline-start: auto;
  padding: .2rem .6rem;
  border: 1px solid var(--rq-teal);
  border-radius: 99px;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--rq-teal-d);
  cursor: pointer;
}
.rq-sum-edit:hover { background: var(--rq-teal-wash); }
.rq-sum-edit:focus-visible { outline: 2px solid var(--rq-focus); outline-offset: 2px; }
.rq-sum-grp > dl { margin: 0; }
.rq-sum-row {
  display: grid;
  grid-template-columns: minmax(8rem, 33%) 1fr;
  gap: .3rem 1rem;
  padding: .5rem .85rem;
  font-size: 13px;
  line-height: 1.8;
}
.rq-sum-row + .rq-sum-row { border-top: 1px dashed var(--rq-line-2); }
.rq-sum-row dt { color: var(--rq-mute); }
.rq-sum-row dd { margin: 0; font-weight: 600; color: var(--rq-ink); overflow-wrap: anywhere; }
.rq-sum-row dd.is-empty { font-weight: 400; color: var(--rq-mute); }

/* ── المراحل المرقّمة («ماذا يحدث بعد الإرسال») ──
   تُستعمل في صفحات الطلب والتبرّع والتواصل، ولم يكن لها تعريفٌ قط:
   كان الرقم يخرج مائلاً عارياً في ثلاث صفحات. */
.step { display: flex; align-items: flex-start; gap: .7rem; padding: .6rem 0; }
.step + .step { border-top: 1px solid var(--rq-line-2); }
.step > i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 1px solid var(--rq-line);
  border-radius: 50%;
  background: var(--rq-teal-wash);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--rq-teal-d);
}

@media (max-width: 767.98px) {
  /* أسماء الخطوات تختفي ويبقى ترقيمها — الاسم معروضٌ كاملاً في رأس
     الشريط، وتكراره مقصوصاً في ستّ خانات ضيقة ضجيجٌ لا دلالة */
  .rq-wiz-dot .t { display: none; }
  .rq-wiz-dots { gap: .35rem; }

  /* على الجوال يعمودان: «السابق» أعلى و«التالي» أسفل — الفعل الأساسي
     في أقرب موضعٍ للإبهام، والرجوع فوقه حيث لا تطاله الضغطة العابرة */
  .rq-wiz-nav { flex-direction: column; align-items: stretch; }
  .rq-wiz-nav .rq-btn { width: 100%; }
  .rq-wiz-nav [data-wiz-next] { margin-inline-start: 0; }

  .rq-sum-row { grid-template-columns: 1fr; gap: .1rem; padding: .55rem .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rq-wiz-fill, .rq-why > summary::after { transition: none; }
}

/* رقم هاتف داخل نصّ عربي — ‎bdi‎ يعزله والاتجاه الصريح يمنع قلب مجموعاته.
   كان ‎+970 59 000 0000‎ يُعرض في التذييل ‎0000 000 59 970+‎: خوارزمية ‎bidi‎
   تقرأ المسافات فواصلَ بين مقاطع محايدة فتعكس ترتيبها في سياق يمينيّ. */
.pub-tel {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}