/* ==========================================================================
   Slow Qamar — سلو قمر · B2B لأجهزة العناية الشخصية (الخليج والشرق الأوسط).
   «فخامة ضوء القمر»: خلفية كريمية دافئة، أسطح بنفسجية عميقة (باذنجاني)،
   ولمسات ذهبية خليجية. أسلوب محمول أولاً، دعم RTL كامل.
   ========================================================================== */

:root {
  --color-plum-deep: #1a111f;
  --color-plum: #241a29;
  --color-plum-soft: #2f2236;
  --color-moon: #f1e9da;
  --color-paper: #faf6ee;
  --color-gold: #c8a24f;
  --color-gold-bright: #ddbc6d;
  --color-ink: #2a2228;
  --color-steel: #8a7f86;
  --color-mist: #9a908c;

  --color-line: #e6dfd2;
  --color-line-dark: #453748;
  --color-moon-dim: #c9bfae;

  --glow-moon: rgba(241, 233, 218, 0.16);
  --glow-gold: rgba(200, 162, 79, 0.42);
  --grad-plum: radial-gradient(
      120% 120% at 82% -10%,
      rgba(241, 233, 218, 0.10) 0%,
      rgba(200, 162, 79, 0.07) 26%,
      rgba(26, 17, 31, 0) 60%
    ),
    linear-gradient(180deg, #2a1e30 0%, #241a29 60%, #1a111f 100%);

  /* الخطّ الاحتياطيّ المهيّأ يأتي مباشرةً بعد الويب فونت، قبل خطوط النظام:
     هو الوحيد الذي يحمل size-adjust وascent-override المطابقين (fonts.css)،
     فحين يتأخّر الويب فونت على وصلة بطيئة يرسم النصّ بالمساحة نفسها ولا
     يقفز عند وصوله — وهو مصدر CLS الأخير المقيس (٠٫١٠ من حدّ ٠٫١). */
  --font-display: "Qamar Naskh", "Qamar Naskh Fallback", Georgia,
    "Times New Roman", serif;
  --font-body: "Qamar Sans", "Qamar Sans Fallback", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;

  /* ٦٠٠ لا ٧٠٠: قياس فعليّ في المتصفّح (getClientRects، أطول ١٥ فقرة)
     أعطى ٧٨٫٧ حرفاً في السطر عند ١٤٤٠ بكسل — أي فوق النطاق المريح ٦٦–٧٥.
     بعد الضبط: ٧٢٫٤ عند ١٤٤٠، و٧٣٫٥ عند ١٢٨٠، و٧٢٫٦ عند ١٠٢٤. القيمة
     الأساسية أضيق (٥٤٨) لأن هذا النطاق بلا حشو جانبي وحرفه أصغر (١٦٫٦
     بكسل)، فالسطر نفسه يحمل حروفاً أكثر عند العرض نفسه. */
  --max-read-width: 548px;
  --max-page-width: 1240px;
  --radius: 10px;
  --radius-lg: 18px;
  --space-section: 104px;
  --space-section-sm: 60px;

  --shadow-card: 0 1px 2px rgba(42, 34, 40, 0.04),
    0 8px 24px rgba(42, 34, 40, 0.06);
  --shadow-card-lg: 0 2px 4px rgba(42, 34, 40, 0.06),
    0 22px 48px rgba(42, 34, 40, 0.12);
  --shadow-glow: 0 10px 30px rgba(200, 162, 79, 0.30);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.85;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-ink);
  text-decoration-color: var(--color-moon-dim);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.16s ease, color 0.16s ease;
}

a:hover {
  text-decoration-color: var(--color-gold);
}

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0;
  margin: 0 0 0.55em;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
}
h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}
h3 {
  font-size: clamp(1.15rem, 2.1vw, 1.4rem);
}

p {
  margin: 0 0 1.1em;
}

.wrap {
  width: 100%;
  max-width: var(--max-page-width);
  margin-inline: auto;
  padding-inline: 24px;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--color-moon);
  color: var(--color-plum);
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  inset-inline-start: 0;
}

.section {
  padding-block: var(--space-section);
}

.section--tight {
  padding-block: calc(var(--space-section) * 0.6);
}

.section--plum {
  background: var(--color-plum);
  color: var(--color-moon);
}

.section--plum h2,
.section--plum h3 {
  color: var(--color-moon);
}

.section--lined {
  border-top: 1px solid var(--color-line);
}

.eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--color-steel);
  margin: 0 0 1rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--color-gold);
  flex: none;
}

.prose {
  max-width: var(--max-read-width);
}

.prose--wide {
  max-width: 860px;
}

.lede {
  font-size: 1.12rem;
  color: #554a52;
  line-height: 1.85;
}

.section--plum .lede {
  color: #cfc6c4;
}

/* --- كتلة الإجابة المباشرة (AIO / GEO) ----------------------------------
   إجابة من 40–80 كلمة في أعلى الصفحة: هي ما تقتبسه Google AI Overviews
   ومساعدات البحث عند سؤال «من يورّد …» أو «ما هو الحد الأدنى …».
   النص ظاهر للزائر أيضاً: كتلة «باختصار» قبل التفاصيل.
   ------------------------------------------------------------------------ */

.answer-block {
  border: 1px solid var(--color-line);
  border-inline-start: 3px solid var(--color-gold);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fffdf8 0%, #faf6ee 100%);
  padding: 26px 30px;
  max-width: 900px;
  box-shadow: var(--shadow-card);
}

.answer-block h2 {
  margin: 0 0 10px;
  font-size: 1.18rem;
  letter-spacing: 0.01em;
}

.answer-block p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.95;
  color: #4a4048;
}

.answer-block__label {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
}

@media (max-width: 640px) {
  .answer-block {
    padding: 20px 18px;
  }
}

/* --- الترويسة ------------------------------------------------------------ */

.site-header {
  background: rgba(26, 17, 31, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line-dark);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 70px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-moon);
  text-decoration: none;
  white-space: nowrap;
}

.brand__mark {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-moon);
  box-shadow: inset -5px -2px 0 0 var(--color-plum-deep),
    0 0 16px rgba(241, 233, 218, 0.45);
  flex: none;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: #d7cfc9;
  text-decoration: none;
  font-size: 0.95rem;
  padding-block: 4px;
  position: relative;
  transition: color 0.16s ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--color-gold);
  transition: width 0.2s ease;
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  width: 100%;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  color: var(--color-gold-bright);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-moon);
  color: var(--color-plum-deep);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background-color 0.16s ease, transform 0.16s ease;
}

.header-cta:hover {
  background: #fff;
  transform: translateY(-1px);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-cta--wa {
  background: #1f8f5f;
  color: #fff;
  border: 1px solid transparent;
}

.header-cta--wa svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  flex: none;
}

.header-cta--wa:hover {
  background: #17734c;
  color: #fff;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius);
  color: var(--color-moon);
  padding: 8px 12px;
  font-size: 0.9rem;
  cursor: pointer;
}

/* --- شريط الثقة (الشهادات + الأرقام) ------------------------------------- */

.trustbar {
  background: var(--color-plum-deep);
  border-bottom: 1px solid var(--color-line-dark);
  color: #cfc6c4;
}

.trustbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding-block: 11px;
  flex-wrap: wrap;
}

.trustbar__certs {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.trustbar__certs li {
  font-family: var(--font-display);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  color: #e5dcc9;
  border: 1px solid var(--color-line-dark);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: default;
}

.trustbar__facts {
  display: flex;
  align-items: center;
  gap: 8px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  font-size: 0.84rem;
}

.trustbar__facts strong {
  color: var(--color-moon);
  font-weight: 700;
}

/* --- عدّاد وقت التشغيل في الواجهة ------------------------------------------
   يبقى مخفياً حتى يتوفر رقم مُقاس. قاعدة [hidden] مكتوبة صراحة لأن قاعدة
   العرض الخاصة تتغلب على [hidden] { display: none } الافتراضية. */

.live-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  font-size: 0.9rem;
  color: var(--color-moon-dim);
}

.live-trust[hidden] {
  display: none;
}

.live-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
  animation: live-pulse 2.6s ease-out infinite;
}

@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 var(--glow-gold);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(200, 162, 79, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(200, 162, 79, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot {
    animation: none;
    box-shadow: 0 0 0 3px var(--glow-gold);
  }
}

/* --- الواجهة (Hero) ------------------------------------------------------ */

.hero {
  background: var(--grad-plum);
  color: var(--color-moon);
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 128px);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 50% at 84% 12%,
    var(--glow-gold) 0%,
    rgba(200, 162, 79, 0) 55%
  );
  opacity: 0.7;
  pointer-events: none;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 56px;
  align-items: center;
  position: relative;
}

.hero h1 {
  color: var(--color-moon);
  margin-bottom: 0.45em;
}

.hero h1 .accent {
  background: linear-gradient(100deg, var(--color-gold-bright), #f0d9a6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  font-size: 1.18rem;
  color: #d3cbc7;
  max-width: 620px;
  line-height: 1.85;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.hero__meta {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-size: 0.9rem;
  color: #b0a6a2;
  list-style: none;
  padding: 0;
}

.hero__meta li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero__meta li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 10px var(--glow-gold);
  flex: none;
}

/* القمر — دورة 12 ثانية، حركة CSS خالصة */
.moon-wrap {
  display: flex;
  justify-content: center;
  position: relative;
}

.moon-wrap::after {
  content: "";
  position: absolute;
  width: clamp(220px, 30vw, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(241, 233, 218, 0.16);
  box-sizing: border-box;
}

.moon {
  position: relative;
  width: clamp(160px, 22vw, 230px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(
    circle at 34% 28%,
    #fffdf6 0%,
    var(--color-moon) 44%,
    #d8cbb0 100%
  );
  box-shadow: 0 0 90px rgba(241, 233, 218, 0.24),
    inset -10px -6px 24px rgba(26, 17, 31, 0.4);
}

.moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-plum-deep);
  animation: lunar 12s ease-in-out infinite alternate;
}

@keyframes lunar {
  0% {
    transform: translateX(-104%);
  }
  100% {
    transform: translateX(104%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .moon::after {
    animation: none;
    transform: translateX(-58%);
  }
}

/* --- الأزرار ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 0.97rem;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease,
    color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.btn--primary {
  background: var(--color-moon);
  color: var(--color-plum-deep);
  box-shadow: 0 8px 22px rgba(241, 233, 218, 0.18);
}

.btn--primary:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(241, 233, 218, 0.26);
}

.btn--ghost {
  background: transparent;
  color: var(--color-moon);
  border-color: #57495c;
}

.btn--ghost:hover {
  border-color: var(--color-moon);
}

.btn--dark {
  background: var(--color-plum);
  color: var(--color-moon);
}

.btn--dark:hover {
  background: #140d18;
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line);
}

.btn--outline:hover {
  border-color: var(--color-plum);
}

.btn--whatsapp {
  background: #1f8f5f;
  color: #fff;
}

.btn--whatsapp:hover {
  background: #17734c;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(31, 143, 95, 0.32);
}

.btn--glow {
  background: linear-gradient(100deg, var(--color-gold), var(--color-gold-bright));
  color: #2a1c12;
  border-color: transparent;
  box-shadow: 0 10px 30px var(--glow-gold);
}

.btn--glow:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 14px 38px var(--glow-gold);
}

/* --- الشعار المركزي ------------------------------------------------------ */

.manifest {
  text-align: center;
}

.manifest p {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.6vw, 3.9rem);
  line-height: 1.5;
  margin: 0;
  font-weight: 700;
}

/* --- الشارات / الكلمات المفتاحية ----------------------------------------- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-plum);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 7px 15px;
}

.section--plum .pill {
  color: var(--color-moon);
  background: transparent;
  border-color: var(--color-line-dark);
}

.pill .pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  flex: none;
}

/* --- شبكة البطاقات -------------------------------------------------------- */

.grid {
  display: grid;
  gap: 22px;
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-lg);
  border-color: #d9d2c2;
}

.card--plum {
  background: var(--color-plum-soft);
  border-color: var(--color-line-dark);
  color: var(--color-moon);
}

.card--plum h3 {
  color: var(--color-moon);
}

.card--plum p {
  color: #d3cbc7;
}

.card__num {
  font-family: var(--font-display);
  font-size: 0.86rem;
  color: var(--color-gold);
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 12px;
}

.card h3 {
  margin-bottom: 0.45em;
}

.card p:last-child {
  margin-bottom: 0;
}

.card__link {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--color-gold);
  text-decoration: none;
}

.card__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- شريط الأرقام --------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stat {
  background: var(--color-paper);
  padding: 30px 24px;
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  font-weight: 700;
  display: block;
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--color-plum);
}

.stat__label {
  font-size: 0.88rem;
  color: var(--color-steel);
  display: block;
}

.stat__note {
  font-size: 0.8rem;
  color: var(--color-steel);
  display: block;
  margin-top: 6px;
}

/* --- كتلة السوق (الحجم / النمو) ------------------------------------------- */

.market {
  background: var(--color-plum);
  color: var(--color-moon);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}

.market::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    80% 120% at 12% 0%,
    rgba(200, 162, 79, 0.18) 0%,
    rgba(26, 17, 31, 0) 55%
  );
  pointer-events: none;
}

.market__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  position: relative;
}

.market h2 {
  color: var(--color-moon);
}

.market__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-line-dark);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-line-dark);
}

.market__fig {
  background: rgba(255, 255, 255, 0.03);
  padding: 22px 20px;
}

.market__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.3;
  display: block;
  color: #fff;
}

.market__num span {
  color: var(--color-gold-bright);
}

.market__cap {
  font-size: 0.84rem;
  color: #b0a6a2;
  display: block;
  margin-top: 8px;
}

.market__src {
  font-size: 0.8rem;
  color: #9a908c;
  margin-top: 22px;
}

/* --- الخط الزمني للعملية (4 خطوات) ---------------------------------------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.timeline li {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 26px 84px 26px 26px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.timeline li:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-lg);
}

.timeline li::before {
  content: counter(step);
  counter-increment: step;
  position: absolute;
  inset-inline-start: 22px;
  top: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #2a1c12;
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-bright));
  box-shadow: 0 6px 16px rgba(200, 162, 79, 0.28);
}

.timeline {
  counter-reset: step;
}

.timeline li::after {
  content: "";
  position: absolute;
  inset-inline-start: 43px;
  top: 70px;
  bottom: -18px;
  width: 1px;
  background: var(--color-line);
}

.timeline li:last-child::after {
  display: none;
}

.timeline h3 {
  margin-bottom: 0.35em;
  font-size: 1.1rem;
}

.timeline p {
  margin: 0;
  font-size: 0.96rem;
  color: #554a52;
}

/* --- صف الشهادات ---------------------------------------------------------- */

.cert-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 116px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}

.cert__abbr {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-plum);
}

.cert__title {
  font-size: 0.76rem;
  color: var(--color-steel);
  line-height: 1.5;
}

.section--plum .cert {
  background: var(--color-plum-soft);
  border-color: var(--color-line-dark);
}

.section--plum .cert__abbr {
  color: var(--color-moon);
}

.section--plum .cert__title {
  color: #b0a6a2;
}

/* --- المرجع --------------------------------------------------------------- */

.reference {
  border-inline-start: 3px solid var(--color-gold);
  padding-inline-start: 26px;
  max-width: 780px;
}

.reference blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.1vw, 1.4rem);
  line-height: 1.7;
}

.reference cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--color-steel);
}

/* --- فتات التنقل ---------------------------------------------------------- */

.breadcrumbs {
  font-size: 0.86rem;
  color: var(--color-steel);
  padding-block: 20px 0;
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.breadcrumbs li + li::before {
  content: "‹";
  margin-inline-end: 8px;
  color: var(--color-moon-dim);
}

.breadcrumbs a {
  color: var(--color-steel);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

/* --- كتلة الإجابة (AIO/GEO) ----------------------------------------------- */

.answer {
  background: #fff;
  border: 1px solid var(--color-line);
  border-inline-start: 3px solid var(--color-gold);
  border-radius: var(--radius);
  padding: 28px 30px;
  max-width: 860px;
  box-shadow: var(--shadow-card);
}

.answer p {
  margin: 0;
  font-size: 1.05rem;
}

.answer p + p {
  margin-top: 1em;
}

.answer__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--color-steel);
}

.answer__facts strong {
  color: var(--color-ink);
  font-weight: 700;
}

/* --- الصفحة / المنتج ------------------------------------------------------ */

.page-head {
  padding-block: 26px 0;
}

.product {
  border-top: 1px solid var(--color-line);
  padding-block: 62px;
  scroll-margin-top: 84px;
}

.product:first-of-type {
  border-top: none;
  padding-top: 8px;
}

.product__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.product__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

.product__sku {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--color-steel);
  font-weight: 700;
}

.product__kicker {
  font-size: 0.84rem;
  color: var(--color-gold);
  border: 1px solid rgba(200, 162, 79, 0.4);
  border-radius: 999px;
  padding: 2px 11px;
  display: inline-block;
}

.product__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 0;
}

.product__gallery img:first-child {
  grid-column: 1 / -1;
}

.product__gallery img {
  width: 100%;
  border-radius: var(--radius);
  background: var(--color-plum);
  border: 1px solid var(--color-line);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.product__gallery img:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-card);
}

.product__usp {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.product__usp li {
  position: relative;
  padding-inline-start: 24px;
  margin-bottom: 8px;
  font-size: 0.98rem;
}

.product__usp li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.68em;
  width: 9px;
  height: 1px;
  background: var(--color-gold);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  margin-bottom: 24px;
}

.spec-table th,
.spec-table td {
  text-align: start;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}

.spec-table th {
  color: var(--color-steel);
  font-weight: 700;
  width: 42%;
  padding-inline-end: 18px;
}

.spec-table td {
  font-weight: 500;
}

.procure {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.procure dl {
  margin: 0 0 20px;
  display: grid;
  gap: 12px;
}

.procure dt {
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--color-steel);
  font-weight: 700;
}

.procure dd {
  margin: 3px 0 0;
  font-size: 0.98rem;
  font-weight: 500;
}

.procure__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.procure__cta .btn {
  flex: 1 1 auto;
}

.btn--sm {
  padding: 11px 16px;
  font-size: 0.88rem;
}

/* --- فهرس القفز ----------------------------------------------------------- */

section[id] {
  scroll-margin-top: 86px;
}

.quick-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  max-width: 860px;
}

.quick-index a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 0.92rem;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.quick-index a:hover {
  border-color: var(--color-plum);
  transform: translateY(-1px);
}

.quick-index__sku {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--color-steel);
  font-weight: 700;
  flex: none;
}

/* --- بطل الكتالوج -------------------------------------------------------- */

.catalog-hero {
  background: var(--grad-plum);
  color: var(--color-moon);
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 96px);
}

.catalog-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 50% at 84% 12%,
    var(--glow-gold) 0%,
    rgba(200, 162, 79, 0) 55%
  );
  opacity: 0.7;
  pointer-events: none;
}

.catalog-hero h1 {
  color: var(--color-moon);
  margin-bottom: 0.45em;
  max-width: 880px;
}

.catalog-hero h1 .accent {
  background: linear-gradient(100deg, var(--color-gold-bright), #f0d9a6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.catalog-hero .lede {
  font-size: 1.15rem;
  color: #d3cbc7;
  max-width: 700px;
  line-height: 1.85;
}

.catalog-hero .hero__actions {
  margin-top: 28px;
}

.catalog-hero__meta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 0.92rem;
  color: #c9bfae;
  list-style: none;
  padding: 0;
}

.catalog-hero__meta li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.catalog-hero__meta li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 10px var(--glow-gold);
  flex: none;
}

.catalog-hero__meta strong {
  color: var(--color-moon);
  font-weight: 700;
}

/* --- فهرس كتالوج مرئي ---------------------------------------------------- */

.index-title {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  margin-bottom: 24px;
}

.quick-index--catalog {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: none;
}

.quick-index--catalog a {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.quick-index--catalog a:hover {
  border-color: var(--color-gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-lg);
}

.quick-index__thumb {
  display: block;
  background: var(--color-plum);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.quick-index__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.quick-index--catalog a:hover .quick-index__thumb img {
  transform: scale(1.05);
}

.quick-index__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px 16px;
}

.quick-index__name {
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-ink);
}

.quick-index__type {
  font-size: 0.82rem;
  color: var(--color-steel);
}

/* --- بطاقة المنتج المحسّنة ------------------------------------------------ */

.product__media {
  position: sticky;
  top: 92px;
}

.product__badge {
  font-size: 0.82rem;
  font-weight: 700;
  color: #3a2b10;
  background: linear-gradient(100deg, var(--color-gold), var(--color-gold-bright));
  border-radius: 999px;
  padding: 3px 13px;
  display: inline-block;
  box-shadow: 0 4px 12px var(--glow-gold);
}

.product__positioning {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-plum);
  border-inline-start: 3px solid var(--color-gold);
  padding-inline-start: 14px;
  margin: 0 0 14px;
  line-height: 1.6;
}

.product__desc {
  color: #554a52;
}

.procure {
  background: linear-gradient(180deg, #fff 0%, #fbf7ee 100%);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-card);
}

.procure__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--color-line);
}

.procure__fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.procure__label {
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--color-steel);
  font-weight: 700;
}

.procure__fact strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.5;
}

.procure__note {
  margin: 16px 0 0;
  font-size: 0.86rem;
  color: var(--color-steel);
}

/* --- شريط ثقة الكتالوج ---------------------------------------------------- */

.catalog-trust h2 {
  color: var(--color-moon);
  text-align: center;
  margin-bottom: 36px;
}

.catalog-trust__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.catalog-trust__grid li {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.catalog-trust__grid strong {
  color: var(--color-gold-bright);
  font-size: 1.05rem;
  font-family: var(--font-display);
}

.catalog-trust__grid span {
  color: #c9bfae;
  font-size: 0.92rem;
  line-height: 1.7;
}

/* --- استجابة المنتجات ----------------------------------------------------- */

@media (max-width: 960px) {
  .product__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .product__media {
    position: static;
  }
  .quick-index--catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .catalog-trust__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .quick-index--catalog {
    grid-template-columns: 1fr;
  }
  .catalog-trust__grid {
    grid-template-columns: 1fr;
  }
  .procure__facts {
    grid-template-columns: 1fr;
  }
  .product__head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- الأسئلة الشائعة ------------------------------------------------------ */

.faq {
  max-width: 860px;
}

/* [R34] فهرس المجموعات الفرعية داخل صفحة الأسئلة.
   السبب: «المشتريات» وحدها ٤٩ سؤالاً تحت عنوان واحد — صفحة تُقرأ كجدار.
   الشريط يقفز إلى الغرض بدل التمرير، وهو نفس منطق «اقفز إلى سؤالك» لكن
   على مستوى أدقّ: من الفئة إلى الموضوع داخل الفئة. */
.faq__jump {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 4px;
  padding: 0;
}

.faq__jump a {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-paper);
  color: inherit;
  font-size: 0.86rem;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.faq__jump a:hover,
.faq__jump a:focus-visible {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-paper);
}

/* العنوان الفرعي داخل الفئة — أصغر من h2 بدرجة، وبخطّ فاصل تحته حتى يُقرأ
   بداية قسم لا سؤالاً طويلاً منزلقاً. */
.faq__sect {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--color-ink);
  border-bottom: 2px solid var(--color-line);
  margin: 34px 0 0;
  padding-bottom: 8px;
  scroll-margin-top: 96px;
}

.faq__sect:first-of-type {
  margin-top: 16px;
}

.faq details {
  border-bottom: 1px solid var(--color-line);
  padding: 20px 0;
}

.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--color-steel);
  font-size: 1.3rem;
  line-height: 1;
  flex: none;
}

.faq details[open] summary::after {
  content: "–";
}

.faq details p {
  margin: 14px 0 0;
  max-width: 760px;
  color: #554a52;
}

/* --- دعوة الاستفسار في نهاية كل فئة أسئلة --------------------------------- */

.faq-cta {
  margin-top: 28px;
  background: var(--color-plum);
  color: var(--color-moon);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px 30px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.faq-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    70% 130% at 88% 0%,
    rgba(200, 162, 79, 0.22) 0%,
    rgba(26, 17, 31, 0) 60%
  );
  pointer-events: none;
}

.faq-cta > div:first-child {
  position: relative;
}

.faq-cta h3 {
  color: var(--color-moon);
  margin: 0 0 0.25em;
  font-size: 1.16rem;
}

.faq-cta p {
  margin: 0;
  color: #d3cbc7;
  font-size: 0.95rem;
  max-width: 600px;
}

.faq-cta__actions {
  position: relative;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- النموذج -------------------------------------------------------------- */

.form {
  display: grid;
  gap: 18px;
  max-width: 640px;
}

.field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 7px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-ink);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-plum);
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 34, 40, 0.08);
}

.field--check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.9rem;
}

.field--check input {
  width: auto;
  margin-top: 5px;
  flex: none;
}

.form__note {
  font-size: 0.86rem;
  color: var(--color-steel);
}

.form__status {
  border-radius: var(--radius);
  padding: 15px 18px;
  font-size: 0.94rem;
  display: none;
}

.form__status.is-visible {
  display: block;
}

.form__status--ok {
  background: #eef7f1;
  border: 1px solid #bfe0cc;
  color: #1a5c39;
}

.form__status--err {
  background: #fdf1ec;
  border: 1px solid #f0cdbd;
  color: #8a3b1c;
}

/* --- طرق التواصل ---------------------------------------------------------- */

.contact-ways {
  display: grid;
  gap: 18px;
}

.contact-way {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 22px;
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-way:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-lg);
}

.contact-way h3 {
  margin-bottom: 0.3em;
  font-size: 1.06rem;
}

.contact-way p {
  margin-bottom: 0;
  font-size: 0.94rem;
  color: #554a52;
}

.contact-way a {
  font-weight: 700;
}

/* --- بطاقة واتساب البارزة في صفحة الاتصال ---------------------------------- */

.wa-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  background: var(--grad-plum);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  position: relative;
  overflow: hidden;
}

.wa-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 120% at 84% 0%,
    rgba(31, 143, 95, 0.35) 0%,
    rgba(26, 17, 31, 0) 60%
  );
  pointer-events: none;
}

.wa-hero__text {
  position: relative;
  max-width: 560px;
}

/* --- دعوة الختام ---------------------------------------------------------- */

.cta-final {
  text-align: center;
}

.cta-final h2 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
}

.cta-final .lede {
  max-width: 620px;
  margin-inline: auto;
}

.cta-final .hero__actions {
  justify-content: center;
  margin-top: 26px;
}

.cta-final--panel {
  background: var(--grad-plum);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 72px);
  position: relative;
  overflow: hidden;
  color: var(--color-moon);
}

.cta-final--panel h2,
.cta-final--panel .lede {
  color: var(--color-moon);
}

.cta-final--panel .note {
  color: #b0a6a2;
}

.cta-final--panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 100% at 80% 0%,
    rgba(200, 162, 79, 0.22) 0%,
    rgba(26, 17, 31, 0) 60%
  );
  pointer-events: none;
}

/* --- التذييل -------------------------------------------------------------- */

.site-footer {
  background: var(--color-plum-deep);
  color: #cfc6c4;
  padding-block: 72px 40px;
  font-size: 0.94rem;
}

.site-footer a {
  color: #ddd4ce;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-moon);
  text-decoration: underline;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: 40px;
}

.footer-grid h3 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--color-steel);
  margin-bottom: 16px;
  font-weight: 700;
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-moon);
  margin-bottom: 12px;
  display: block;
}

.footer-bottom {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--color-line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  font-size: 0.84rem;
  color: #9a908c;
}

.age-note {
  color: var(--color-gold);
}

/* توقيع المصنّع — Spec 7.3: حصراً في تذييل /contact/، 12px رمادي باهت،
   بدون أيقونة ولا إبراز. رابط dofollow + rel="noopener". */
.maker-note {
  font-size: 12px;
  color: var(--color-mist);
}
.maker-note a {
  color: inherit;
  text-decoration: none;
}

/* --- شريط الاتصال الثابت (جوال) -------------------------------------------- */

.mobile-bar {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--color-plum-deep);
  border-top: 1px solid var(--color-line-dark);
  padding: 8px 16px;
  gap: 10px;
}

.mobile-bar .btn {
  flex: 1;
  padding: 11px 12px;
  font-size: 0.88rem;
}

/* --- زر واتساب العائم (تحويل دائم) ---------------------------------------- */

.wa-float {
  position: fixed;
  inset-inline-end: 22px;
  bottom: 24px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1f8f5f;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 20px 13px 22px;
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(31, 143, 95, 0.4);
  transition: transform 0.18s ease, background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.wa-float svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  flex: none;
}

.wa-float:hover {
  background: #17734c;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(31, 143, 95, 0.5);
  color: #fff;
}

.wa-float__pulse {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid #1f8f5f;
  animation: wa-ring 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes wa-ring {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float__pulse {
    animation: none;
    opacity: 0;
  }
}

@media (max-width: 860px) {
  .wa-float {
    bottom: 72px;
    inset-inline-end: 14px;
    padding: 11px 16px 11px 18px;
  }
  .wa-float__label {
    display: none;
  }
}

/* --- شريط الإلحاح / الضمان (تحويل) ---------------------------------------- */

.urgency {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-top: 22px;
}

.urgency__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-plum-deep);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 7px 15px;
}

.urgency__badge--gold {
  background: linear-gradient(100deg, var(--color-gold), var(--color-gold-bright));
  color: #2a1c12;
  border-color: transparent;
  box-shadow: 0 8px 22px var(--glow-gold);
}

.urgency__badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1f8f5f;
  flex: none;
}

/* --- شريط الضمان (ثلاث نقاط قوية) ------------------------------------------ */

.guarantee {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}

.guarantee__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.guarantee__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-plum-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  flex: none;
  font-family: var(--font-display);
}

.guarantee__item h4 {
  font-size: 1rem;
  margin: 0 0 0.2em;
  color: var(--color-moon);
}

.guarantee__item p {
  margin: 0;
  font-size: 0.88rem;
  color: #b0a6a2;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .guarantee {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- 404 ------------------------------------------------------------------ */

.notfound {
  text-align: center;
  padding-block: 130px;
}

/* --- الجداول / أدوات ------------------------------------------------------ */

.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 560px;
}

.data-table th,
.data-table td {
  text-align: start;
  padding: 12px 0 12px 16px;
  border-bottom: 1px solid var(--color-line);
}

.data-table th {
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--color-steel);
  font-weight: 700;
}

.mt-0 {
  margin-top: 0;
}
.mt-2 {
  margin-top: 2rem;
}
.mb-0 {
  margin-bottom: 0;
}

.note {
  font-size: 0.88rem;
  color: var(--color-steel);
}

/* --- الظهور عند التمرير --------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- الصفحات القانونية ---------------------------------------------------- */

.page-legal .page-head h1 {
  margin-bottom: 0.3em;
}

.legal {
  max-width: 820px;
}

.legal h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-top: 1.9em;
  padding-top: 0.7em;
  border-top: 1px solid var(--color-line);
  scroll-margin-top: 90px;
}

.legal h2:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.legal h3 {
  font-size: 1.12rem;
  margin-top: 1.5em;
  margin-bottom: 0.4em;
}

.legal p,
.legal li {
  color: #4a4148;
}

.legal ul {
  padding-inline-start: 1.25em;
  margin: 0 0 1.2em;
}

.legal li {
  margin-bottom: 0.45em;
}

.legal a {
  color: var(--color-plum);
  font-weight: 700;
}

.legal a:hover {
  color: var(--color-gold);
}

.legal__meta {
  font-size: 0.84rem;
  color: var(--color-steel);
  margin-top: 2.2em;
}

.legal__toc {
  list-style: none;
  margin: 0 0 2em;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 8px;
}

.legal__toc a {
  text-decoration: none;
  font-weight: 700;
}

.legal__toc a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- صندوق تكبير الصور (Lightbox) ------------------------------------------ */

.zoomable {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 12, 18, 0.92);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox__img {
  max-width: 92vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  background: var(--color-plum);
}

.lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--color-line-dark);
  border-radius: 50%;
  background: rgba(36, 26, 41, 0.85);
  color: var(--color-moon);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.lightbox__btn:hover,
.lightbox__btn:focus-visible {
  background: var(--color-gold);
  color: var(--color-plum-deep);
}

.lightbox__close {
  top: 18px;
  inset-inline-end: 18px;
}

.lightbox__nav--prev {
  inset-inline-start: 18px;
}

.lightbox__nav--next {
  inset-inline-end: 18px;
}

.lightbox__caption {
  position: absolute;
  bottom: 20px;
  inset-inline: 0;
  text-align: center;
  color: var(--color-moon);
  font-size: 0.9rem;
  padding: 0 60px;
  margin: 0;
}

/* --- الاستجابة ------------------------------------------------------------ */

@media (max-width: 1000px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .market__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .hero__grid,
  .product__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .moon-wrap {
    order: -1;
    justify-content: flex-start;
  }
  .moon {
    width: 130px;
  }

  .site-nav {
    display: none;
    width: 100%;
    order: 3;
    padding-bottom: 14px;
  }
  .site-nav.is-open {
    display: block;
  }
  .site-nav ul {
    flex-direction: column;
    gap: 2px;
  }
  .site-nav a {
    display: block;
    padding: 9px 0;
    border-top: 1px solid var(--color-line-dark);
  }
  .nav-toggle {
    display: inline-block;
  }
  .site-header__inner {
    flex-wrap: wrap;
    padding-block: 12px;
  }
  .header-cta {
    display: none;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3,
  .grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .product__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .quick-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mobile-bar {
    display: flex;
    height: 56px;
  }
  body {
    padding-bottom: 56px;
  }
  .section {
    padding-block: var(--space-section-sm);
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .market__figures {
    grid-template-columns: minmax(0, 1fr);
  }
  .card {
    padding: 24px;
  }
  .trustbar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 860px) {
  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a[aria-current="page"] {
    color: var(--color-gold-bright);
    background: rgba(200, 162, 79, 0.08);
    padding-inline-start: 10px;
  }
  .site-nav a {
    transition: color 0.16s ease, background-color 0.16s ease, padding-inline-start 0.16s ease;
  }
}

/* ===== المدونة والمقالات ===== */
/* الشريط العلوي للمدونة يستخدم نفس تدرّج «القمر» المستخدم في الرئيسية،
   فتبقى هوية الموقع واحدة من أول صفحة إلى آخر مقال. */
.hero--blog {
  background: var(--grad-plum);
  padding-block: 72px 54px;
  color: var(--color-moon);
}
.hero--blog h1,
.hero--blog .hero__lede,
.hero--blog .eyebrow {
  color: var(--color-moon);
}
.hero--blog .hero__lede {
  color: var(--color-moon-dim);
  max-width: 68ch;
}
.article-head {
  max-width: var(--max-read-width);
  margin: 10px auto 0;
  padding-top: 20px;
}
.article-meta {
  color: var(--color-steel);
  font-size: 0.9rem;
  letter-spacing: 0.2px;
  margin: 0 0 12px;
}
/* عنوان المقال في الترويسة: هو أول ما يقرأه المشتري وأول ما يقرأه
   المحرّك. قياسه أكبر من سطر النصّ بمرتبتين، ولا يُزاح عن عمود القراءة. */
.article-head__title {
  font-size: clamp(1.62rem, 3.1vw, 2.28rem);
  line-height: 1.42;
  letter-spacing: -0.2px;
  color: var(--color-ink);
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(24, 42, 61, 0.10);
  text-wrap: balance;
}
.article-excerpt {
  font-size: 1.12rem;
  line-height: 1.95;
  color: var(--color-ink);
  margin: 0 0 6px;
  padding: 14px 18px;
  border-inline-start: 3px solid var(--color-gold);
  background: #f6f1e6;
  border-radius: 0 10px 10px 0;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
.blog-card {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  padding: 24px 24px 26px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.blog-card:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 162, 79, 0.55);
  box-shadow: var(--shadow-card-lg);
}
/* الرابط يلفّ العنوان فقط، والبطاقة تُنقر كاملة عبر ::after — فيبقى نصّ
   الرابط عنواناً وصفياً قصيراً بدل جملة تجمع التاريخ والتصنيف والملخّص. */
.blog-card__link {
  color: inherit;
  text-decoration: none;
}
.blog-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* قاعدة الغلاف: العنوان الكبير هو الغلاف — لا توجد صورة غلاف */
.blog-card__link::before {
  content: "";
  display: block;
  height: 4px;
  width: 46px;
  margin: 0 0 18px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--color-gold), rgba(200, 162, 79, 0.15));
}
.blog-card__meta {
  color: var(--color-steel);
  font-size: 0.83rem;
  margin: 0 0 10px;
}
.blog-card__title {
  font-family: var(--font-display);
  font-size: 1.34rem;
  line-height: 1.55;
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--color-plum);
}
.blog-card__excerpt {
  color: #5a4f57;
  line-height: 1.85;
  font-size: 0.96rem;
  margin: 0 0 14px;
}
.blog-card__more {
  color: var(--color-plum);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration-color: var(--color-gold);
}
/* حالة "لا مقالات منشورة بعد": تظهر في صفحة المدونة قبل أول موعد نشر،
   فتبقى الصفحة ذات محتوى مفيد بدل شبكة فارغة. */
.blog-pending {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  padding: 44px 28px;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: #fffdf8;
  box-shadow: var(--shadow-card);
}
.blog-pending h2 {
  font-size: 1.5rem;
  line-height: 1.5;
  margin: 0 0 14px;
}
.blog-pending p {
  color: #5a4f57;
  line-height: 1.9;
  margin: 0 0 26px;
}
.blog-pending__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.blog-grid:empty {
  display: none;
}
/* ==========================================================================
   هيكل المقال على الحاسوب: عمود قراءة ضيّق + فهرس جانبي ثابت.
   السطر العربي الطويل يُتعب العين ويُفقد القارئ موضعه؛ فالعرض الأقصى هنا
   ٧٠٠ بكسل (نحو ٧٢ حرفاً)، والفهرس يأخذ الشبكة على اليسار في واجهة RTL.
   ========================================================================== */
.page-article .prose {
  max-width: 820px;
  margin-inline: auto;
}
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-bottom: 72px;
}
.article-prose {
  max-width: var(--max-read-width);
  margin-inline: auto;
  min-width: 0;
}
.article-prose > p,
.article-prose > ul,
.article-prose > ol,
.article-prose > blockquote,
.article-prose > h2,
.article-prose > h3,
.article-prose > h4,
.article-prose > figure,
.article-prose > table {
  max-width: 100%;
}
.article-prose p {
  font-size: 1.04rem;
  line-height: 2.05;
  margin: 0 0 1.15rem;
}
.article-prose h2 {
  font-family: var(--font-display);
  font-size: 1.62rem;
  line-height: 1.55;
  margin: 2.4rem 0 0.9rem;
  color: var(--color-plum);
  scroll-margin-top: 96px;
  padding-top: 0.4rem;
}
.article-prose h3 {
  font-size: 1.22rem;
  margin: 1.7rem 0 0.6rem;
  color: var(--color-plum);
  scroll-margin-top: 96px;
}
.article-prose ul,
.article-prose ol {
  padding-inline-start: 1.5rem;
  line-height: 1.95;
  margin: 0 0 1.2rem;
}
.article-prose li {
  margin: 0.35rem 0;
}
.article-prose li::marker {
  color: var(--color-gold);
  font-weight: 700;
}
.article-prose blockquote {
  margin: 1.6rem 0;
  padding: 14px 20px;
  border-inline-start: 3px solid var(--color-gold);
  background: #f8f4ec;
  border-radius: 0 10px 10px 0;
  color: #4a4048;
}
.article-prose a {
  color: var(--color-plum);
  font-weight: 600;
  text-decoration-color: var(--color-gold);
}
.article-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: 0.94rem;
}
.article-prose th,
.article-prose td {
  border: 1px solid var(--color-line);
  padding: 10px 12px;
  text-align: start;
  vertical-align: top;
}
.article-prose th {
  background: #f6f1e6;
  font-weight: 700;
}
.article-prose figure {
  margin: 1.8rem 0;
}
.article-prose figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--color-steel);
}

/* الفهرس الجانبي */
.article-toc {
  display: none;
}
.article-toc__title {
  margin: 0 0 12px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-steel);
  text-transform: uppercase;
}
.article-toc ol {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  counter-reset: toc;
  display: grid;
  gap: 2px;
}
.article-toc li {
  margin: 0;
}
.article-toc a {
  display: flex;
  gap: 9px;
  padding: 7px 10px 7px 8px;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #5a4f57;
  text-decoration: none;
  border-inline-start: 2px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.article-toc a:hover,
.article-toc a.is-active {
  background: #f6f1e6;
  color: var(--color-plum);
  border-inline-start-color: var(--color-gold);
}
.article-toc__num {
  font-variant-numeric: tabular-nums;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-gold);
  padding-top: 2px;
  min-width: 1.1em;
}
.article-toc__cta {
  display: block;
  text-align: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--color-plum);
  color: var(--color-moon) !important;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

@media (min-width: 1180px) {
  .article-layout {
    grid-template-columns: 232px minmax(0, var(--max-read-width));
    justify-content: center;
    gap: 54px;
    align-items: start;
  }
  .article-prose {
    margin-inline: 0;
  }
  .article-toc {
    display: block;
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-block: 6px 20px;
    border-inline-end: 1px solid var(--color-line);
    padding-inline-end: 16px;
  }
}

/* المراجع */
.article-refs {
  margin-top: 3rem;
  padding: 22px 24px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fffdf8;
}
.article-refs h2 {
  margin: 0 0 0.9rem !important;
  font-size: 1.24rem !important;
  padding-top: 0 !important;
}
.ref-list {
  list-style: none;
  padding: 0 !important;
  margin: 0 0 0.8rem !important;
  display: grid;
  gap: 9px;
  font-size: 0.92rem;
  line-height: 1.8;
}
.ref-list li {
  margin: 0 !important;
  padding-inline-start: 2.2rem;
  position: relative;
}
.ref-num {
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-gold);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ref-note {
  color: var(--color-steel);
  font-size: 0.85rem;
}
.ref-disclaimer {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--color-mist);
}

/* الإحالة في المتن: [المؤلف, السنة] — رابط إلى بند المرجع نفسه.
   صغيرة وبلا خطّ تحت حتى لا تقطع القراءة، وتُبرز عند المرور. */
.cite {
  font-size: 0.86em;
  color: var(--color-plum);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--color-plum) 45%, transparent);
  white-space: nowrap;
}
.cite:hover,
.cite:focus-visible {
  border-bottom-style: solid;
  background: color-mix(in srgb, var(--color-plum) 8%, transparent);
}
.ref-list li:target {
  background: color-mix(in srgb, var(--color-gold) 14%, transparent);
  outline: 1px solid color-mix(in srgb, var(--color-gold) 40%, transparent);
  outline-offset: 2px;
}

/* صندوق «الدليل المقابل»: يفصل نيّة صفحتين متقاربتين في العنوان.
   سطر واحد بلا عنوان — وظيفته توجيه لا إشهار. */
.pair-note {
  margin: 1.4rem 0 1.8rem;
  padding: 0.9rem 1.1rem;
  border-inline-start: 3px solid var(--color-gold);
  background: color-mix(in srgb, var(--color-gold) 7%, transparent);
  border-radius: 0 6px 6px 0;
}
.pair-note p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.85;
  color: var(--color-ink);
}
.pair-note a {
  color: var(--color-plum);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-plum) 35%, transparent);
}

/* مسار القراءة أسفل المقال */
.article-rail {
  max-width: var(--max-read-width);
  margin: 2.2rem auto 0;
  padding: 18px 20px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #f8f4ec;
}
.article-rail__title {
  margin: 0 0 10px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-steel);
}
.article-rail ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.article-rail li {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  font-size: 0.92rem;
  line-height: 1.6;
}
.article-rail li span {
  color: var(--color-steel);
  font-size: 0.8rem;
}
.article-rail a {
  font-weight: 600;
  color: var(--color-plum);
}
@media (max-width: 560px) {
  .article-rail li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
.page-article .article-foot {
  max-width: var(--max-read-width);
  margin: 3rem auto 0;
  padding: 24px 26px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fffdf8;
  box-shadow: var(--shadow-card);
}
.article-extras h2 {
  font-size: 1.32rem;
  margin: 0 0 0.9rem;
}
.article-related {
  list-style: none;
  padding-inline-start: 0 !important;
  margin: 0 0 1rem;
}
.article-related li {
  margin: 0.5rem 0;
}
.article-related a {
  font-weight: 600;
}
.article-related--scored li {
  padding: 12px 0;
  border-top: 1px solid var(--color-line);
  margin: 0 !important;
}
.article-related--scored li:first-child {
  border-top: 0;
  padding-top: 0;
}
.related-item__note {
  display: block;
  font-size: 0.9rem;
  line-height: 1.75;
  color: #5a4f57;
  margin-top: 3px;
}
.related-item__tag {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-gold);
  border: 1px solid rgba(200, 162, 79, 0.4);
  border-radius: 999px;
  padding: 1px 9px;
}
.article-hublinks {
  margin: 0;
  color: #554a52;
  line-height: 2;
}
.article-hublinks a {
  font-weight: 600;
}
/* --- خريطة السلسلة (Pillar / Satellite) ---------------------------------
   المقال الرئيسي يعرض ترتيب القراءة كاملاً مع إجابة مختصرة، والمقال التابع
   يعرض موضعه والخطوة التالية. الترتيب الرقمي مقصود: يمنح الزاحف تسلسلاً
   مفهوماً بدل شبكة روابط متكافئة لا تعرف أيّ صفحة هي المرجع.
   ------------------------------------------------------------------------ */
.cluster-map {
  max-width: 820px;
  margin: 3rem auto 0;
  padding: 24px 26px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fffdf8 0%, #f8f4ec 100%);
  box-shadow: var(--shadow-card);
}
.cluster-map__kicker {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.cluster-map h2 {
  margin: 0 0 0.9rem;
  font-size: 1.32rem;
  line-height: 1.55;
}
.cluster-map__answer {
  margin: 0 0 1.2rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  max-width: none;
}
.cluster-map__answer p {
  font-size: 1rem;
}
.cluster-map__list {
  counter-reset: cm;
  list-style: none;
  padding: 0 !important;
  margin: 0 0 1rem;
  display: grid;
  gap: 12px;
}
.cluster-map__list li {
  position: relative;
  margin: 0;
  padding-inline-start: 2.3rem;
  line-height: 1.85;
}
.cluster-map__list li::before {
  counter-increment: cm;
  content: counter(cm);
  position: absolute;
  inset-inline-start: 0;
  top: 0.3rem;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--color-gold);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
}
.cluster-map__list a {
  font-weight: 700;
}
.cluster-map__note {
  display: block;
  color: #5a4f57;
  font-size: 0.93rem;
}
.cluster-map__foot {
  margin: 0;
  color: #5a4f57;
  font-size: 0.93rem;
  line-height: 1.9;
}
.cluster-map__back,
.cluster-map__next {
  margin: 0.45rem 0;
  line-height: 1.95;
  color: #4a4048;
}
.cluster-map__next {
  font-weight: 700;
}
.cluster-map--leaf {
  background: linear-gradient(180deg, #fdfbf6 0%, #f6f1e8 100%);
}
@media (max-width: 640px) {
  .cluster-map {
    padding: 20px 18px;
  }
}
.guides-cta {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}
.guides-cta h2 {
  margin: 0.4rem 0 0.8rem;
}
.guides-cta__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guides-cta__list a {
  font-weight: 600;
  display: inline-block;
  padding: 12px 16px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.16s ease;
}
.guides-cta__list a:hover {
  border-color: var(--color-gold);
  text-decoration-color: var(--color-gold);
}
.text-link {
  font-weight: 600;
  color: var(--color-ink);
  text-decoration-color: var(--color-gold);
}
@media (max-width: 760px) {
  .guides-cta {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   مخططات المحتوى (GEO): أشرطة أفقية + مؤشّرات + ملاحظة مصدر.
   بلا صور أو مكتبات خارجية — CSS صرف، يعمل داخل CSP، ويُقرأ بالكامل
   من قِبل محرّكات البحث ونماذج الاستدلال (النص ظاهر لا محبوس في SVG).
   ========================================================================== */
.viz {
  margin: 2rem 0;
  padding: 22px 24px 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: #fffdf8;
  box-shadow: 0 1px 0 rgba(26, 17, 31, 0.03);
}
.viz__cap {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-plum);
}
/* نطاق القياس ومنهجه — يُستخدم في الأشكال البيانية وفي جداول البيانات
   (`.data-sub`) بالمقاس نفسه: الاثنان يجيبان السؤال ذاته «ما الذي يقيسه
   هذا الرقم» فيجب أن يُقرآ بالطريقة نفسها. */
.viz__sub,
.data-sub {
  margin: 0 0 1.1rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--color-steel);
}
.viz__rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.viz__row {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr auto;
  gap: 12px;
  align-items: center;
}
.viz__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.35;
}
.viz__track {
  height: 11px;
  border-radius: 999px;
  background: #efe7da;
  overflow: hidden;
}
.viz__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-bright) 100%);
}
.viz__fill--plum {
  background: linear-gradient(90deg, #3a2a42 0%, #5b4363 100%);
}
.viz__val {
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-plum);
  min-width: 3.2em;
  text-align: end;
}
.viz__note {
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--color-mist);
}
/* سطر المصدر: الرقم بلا مصدره ليس دليلاً. يظهر تحت الملاحظة بخطّ أصغر
   وحدّ علوي خفيف، ويحمل اسم الجهة والسنة ونطاق القياس — وهو ما يُقرأ
   عند الاستشهاد بالمقال في محرّكات الإجابات. */
.viz__src,
.data-src {
  margin: 0.55rem 0 0;
  font-size: 0.74rem;
  line-height: 1.7;
  color: var(--color-steel);
  opacity: 0.92;
}
.viz__src b,
.data-src b {
  color: var(--color-plum);
  font-weight: 700;
}
.viz__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.4rem 0 1rem;
}
.viz__kpi {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: #f6f1e6;
  border: 1px solid var(--color-line);
}
.viz__kpi b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--color-plum);
}
.viz__kpi span {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-steel);
}
@media (max-width: 640px) {
  .viz {
    padding: 18px 16px 14px;
  }
  .viz__row {
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
  }
  .viz__track {
    grid-column: 1 / -1;
    order: 3;
  }
  .viz__kpis {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   طبقة الموارد (/guides/) وطبقة الموديلات (/products/<sku>/)
   هذه المكوّنات الثلاثة (رأس الصفحة، بطاقة المحور، بطاقة الموديل) هي ما
   يجعل الخريطة ثلاثية الطبقات قابلة للمشي بالعين قبل الزاحف: رأس يقول
   أين أنت، وبطاقة تقول إلى أين تذهب، وقائمة تقول ماذا تقرأ.
   ========================================================================== */

.page-head {
  background: var(--grad-plum);
  color: var(--color-moon);
  padding-block: 54px 56px;
}
.page-head__kicker {
  margin: 0 0 14px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-gold-bright);
}
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.1vw, 2.55rem);
  line-height: 1.4;
  margin: 0 0 18px;
  color: var(--color-moon);
  max-width: 22ch;
}
.page-head__lede {
  font-size: 1.06rem;
  line-height: 1.95;
  color: var(--color-moon-dim);
  margin: 0 0 26px;
  max-width: 62ch;
}
.page-head .answer-block {
  max-width: 68ch;
  margin: 0 0 26px;
  background: rgba(241, 233, 218, 0.08);
  border: 1px solid rgba(200, 162, 79, 0.35);
  box-shadow: none;
}
.page-head .answer-block p {
  color: #e8dfd1;
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
}
.page-head .answer-block__label {
  color: var(--color-gold-bright);
}
.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.page-head__actions .btn--ghost {
  color: var(--color-moon);
  border-color: rgba(241, 233, 218, 0.35);
}
.page-head__actions .btn--ghost:hover {
  border-color: var(--color-gold-bright);
  color: #fff;
}
.page-head .btn--primary {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-plum-deep);
}
.page-head .btn--primary:hover {
  background: var(--color-gold-bright);
  border-color: var(--color-gold-bright);
}
.page-head__note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-moon-dim);
}
.section__lede {
  max-width: 66ch;
  color: #554a52;
  line-height: 1.9;
  margin: 0 0 34px;
}

/* --- بطاقات المحاور الاثني عشر ------------------------------------------ */
.topic-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
  counter-reset: topic;
}
.topic-card {
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: #fffdf8;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.topic-card:hover {
  border-color: rgba(200, 162, 79, 0.55);
  box-shadow: var(--shadow-card-lg);
  transform: translateY(-3px);
}
.topic-card__head {
  display: block;
  padding: 22px 22px 16px;
  text-decoration: none;
  color: inherit;
}
.topic-card__stage {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-gold);
  border: 1px solid rgba(200, 162, 79, 0.4);
  border-radius: 999px;
  padding: 1px 10px;
  margin-bottom: 10px;
}
.topic-card h3 {
  font-family: var(--font-display);
  font-size: 1.14rem;
  line-height: 1.5;
  margin: 0 0 8px;
  color: var(--color-plum);
}
.topic-card p {
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.8;
  color: #5a4f57;
}
.topic-card__count {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-steel);
}
.topic-card__links {
  list-style: none;
  margin: 0;
  padding: 12px 22px 18px;
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 7px;
}
.topic-card__links li {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  padding-inline-start: 14px;
  position: relative;
}
.topic-card__links li::before {
  content: "›";
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-gold);
  font-weight: 700;
}
.topic-card__links a {
  color: #4a4048;
  text-decoration-color: transparent;
}
.topic-card__links a:hover {
  color: var(--color-plum);
  text-decoration-color: var(--color-gold);
}

/* --- تخطيط صفحة الفهرس -------------------------------------------------- */
.guides-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
}
@media (min-width: 940px) {
  .guides-split {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
    gap: 64px;
  }
}
.steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: st;
  display: grid;
  gap: 20px;
}
.steps-list li {
  counter-increment: st;
  position: relative;
  padding-inline-start: 46px;
  line-height: 1.9;
  color: #4a4048;
}
.steps-list li::before {
  content: counter(st);
  position: absolute;
  inset-inline-start: 0;
  top: 0.15rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-plum);
  color: var(--color-moon);
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font-body);
}
.steps-list strong {
  display: block;
  color: var(--color-plum);
  font-size: 1.02rem;
  margin-bottom: 2px;
}
.guides-aside {
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: #f8f4ec;
  padding: 24px;
}
.guides-aside__title,
.topic-aside__title,
.product-aside__title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-steel);
  margin: 0 0 12px;
}
.guides-aside__title + .link-list + .guides-aside__title {
  margin-top: 22px;
}
.link-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.link-list li {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.7;
}
.link-list a {
  color: var(--color-plum);
  font-weight: 600;
  text-decoration-color: var(--color-line);
}
.link-list a:hover {
  text-decoration-color: var(--color-gold);
}
.aside-cta {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
}
.aside-cta p {
  font-size: 0.9rem;
  line-height: 1.8;
  color: #5a4f57;
  margin: 0 0 12px;
}
.btn--block {
  display: block;
  text-align: center;
}

/* --- صفحة المحور -------------------------------------------------------- */
.topic-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 980px) {
  .topic-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 64px;
  }
}
.topic-intro h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 14px;
}
.topic-intro p {
  font-size: 1.04rem;
  line-height: 2.05;
  color: #3d3439;
  margin: 0 0 20px;
}
.term-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.term-chips li {
  font-size: 0.8rem;
  line-height: 1.5;
  padding: 4px 11px;
  border-radius: 999px;
  background: #f6f1e6;
  border: 1px solid var(--color-line);
  color: #5a4f57;
  margin: 0;
}
.topic-aside {
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: #f8f4ec;
  padding: 24px;
  position: sticky;
  top: 92px;
}
.topic-aside .link-list {
  margin-bottom: 20px;
}
.pillar-card {
  display: block;
  padding: 26px 28px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf8 0%, #f7f2e8 100%);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.pillar-card:hover {
  border-color: rgba(200, 162, 79, 0.6);
  box-shadow: var(--shadow-card-lg);
}
.pillar-card__kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-plum-deep);
  background: var(--color-gold);
  border-radius: 999px;
  padding: 2px 11px;
  margin-bottom: 12px;
}
.pillar-card h3 {
  font-family: var(--font-display);
  font-size: 1.42rem;
  line-height: 1.5;
  margin: 0 0 10px;
  color: var(--color-plum);
}
.pillar-card p {
  margin: 0 0 12px;
  font-size: 0.97rem;
  line-height: 1.9;
  color: #4a4048;
}
.pillar-card__meta {
  font-size: 0.82rem;
  color: var(--color-steel);
}
.guide-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
.guide-list__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--color-line);
}
.guide-list__item:first-child {
  border-top: 0;
  padding-top: 4px;
}
.guide-list__num {
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-gold);
  padding-top: 4px;
}
.guide-list__item a {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-plum);
  text-decoration-color: transparent;
}
.guide-list__item a:hover {
  text-decoration-color: var(--color-gold);
}
.guide-list__item p {
  margin: 6px 0 6px;
  font-size: 0.93rem;
  line-height: 1.8;
  color: #5a4f57;
}
.guide-list__meta {
  font-size: 0.78rem;
  color: var(--color-mist);
}

/* تنقّل بين المحاور */
.topic-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 760px) {
  .topic-nav {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .topic-nav__all {
    grid-column: 1 / -1;
  }
}
.topic-nav a {
  display: block;
  padding: 18px 20px;
  border: 1px solid rgba(241, 233, 218, 0.22);
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-moon);
  background: rgba(241, 233, 218, 0.04);
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.topic-nav a:hover {
  border-color: var(--color-gold);
  background: rgba(200, 162, 79, 0.1);
}
.topic-nav span {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--color-moon-dim);
  margin-bottom: 5px;
}
.topic-nav strong {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.5;
}
.topic-nav__all {
  text-align: center;
  font-weight: 700;
  color: var(--color-gold-bright) !important;
}

/* --- صفحة الموديل ------------------------------------------------------- */
.product-hero {
  background: var(--grad-plum);
  color: var(--color-moon);
  padding-block: 48px 60px;
}
.product-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 900px) {
  .product-hero__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 56px;
  }
}
.product-hero__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.product-hero__media img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: rgba(241, 233, 218, 0.06);
}
.product-hero__media img:first-child {
  grid-column: 1 / -1;
}
.product-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.4;
  margin: 0 0 10px;
  color: var(--color-moon);
}
.product-hero__kicker {
  color: var(--color-gold-bright);
  font-size: 0.92rem;
  font-weight: 700;
  margin: 0 0 14px;
}
.product-hero__desc {
  color: #ded5c8;
  line-height: 1.95;
  margin: 0 0 20px;
}
.product-hero .answer-block {
  background: rgba(241, 233, 218, 0.08);
  border: 1px solid rgba(200, 162, 79, 0.32);
  box-shadow: none;
  margin-bottom: 22px;
}
.product-hero .answer-block p {
  color: #e8dfd1;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.9;
}
.product-hero .answer-block__label {
  color: var(--color-gold-bright);
}
.product-facts {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(241, 233, 218, 0.16);
  border: 1px solid rgba(241, 233, 218, 0.16);
  border-radius: 10px;
  overflow: hidden;
}
.product-facts li {
  margin: 0;
  padding: 12px 14px;
  background: var(--color-plum);
}
.product-facts span {
  display: block;
  font-size: 0.74rem;
  color: var(--color-moon-dim);
  margin-bottom: 3px;
}
.product-facts strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-moon);
}
.product-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.product-hero .btn--primary {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-plum-deep);
}
.product-hero .btn--ghost {
  color: var(--color-moon);
  border-color: rgba(241, 233, 218, 0.35);
}
.product-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: start;
}
@media (min-width: 960px) {
  .product-split {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
    gap: 60px;
  }
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.spec-table caption {
  text-align: start;
  font-size: 0.82rem;
  color: var(--color-steel);
  padding-bottom: 10px;
}
.spec-table th,
.spec-table td {
  border-bottom: 1px solid var(--color-line);
  padding: 11px 12px;
  text-align: start;
  vertical-align: top;
  line-height: 1.75;
}
.spec-table th {
  width: 34%;
  font-weight: 700;
  color: var(--color-plum);
  background: #fbf7ef;
}
.product-aside {
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: #f8f4ec;
  padding: 24px;
}
.usp-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 11px;
}
.usp-list li {
  position: relative;
  margin: 0;
  padding-inline-start: 22px;
  font-size: 0.94rem;
  line-height: 1.8;
  color: #3d3439;
}
.usp-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
}
.related-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}
/* البطاقة صندوقُها <li> والرابط داخلها يلفّ العنوان وحده. السبب: حين كان
   الرابط يلفّ التصنيف والعنوان والمقتطف معاً، صار نصّه سطراً من مئة حرف
   يُقرأ فقرةً لا نصّاً رابطاً — والصفحة الهدف لا تتعلّم شيئاً منه. */
.related-cards li {
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: 100%;
  padding: 18px 20px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: #fffdf8;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.related-cards li:hover {
  border-color: rgba(200, 162, 79, 0.55);
  box-shadow: var(--shadow-card);
}
.related-cards strong a {
  color: inherit;
  text-decoration: none;
}
.related-cards strong a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.related-cards__tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-gold);
}
.related-cards strong {
  font-family: var(--font-display);
  font-size: 1.04rem;
  line-height: 1.5;
  color: var(--color-plum);
}
.related-cards a span:last-child {
  font-size: 0.88rem;
  line-height: 1.75;
  color: #5a4f57;
}
.sku-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.sku-strip__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(241, 233, 218, 0.2);
  border-radius: 10px;
  background: rgba(241, 233, 218, 0.04);
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.sku-strip__item:hover {
  border-color: var(--color-gold);
  background: rgba(200, 162, 79, 0.1);
}
.sku-strip__link {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px 0;
  text-decoration: none;
  color: var(--color-moon);
}
.sku-strip__item:hover .sku-strip__link strong {
  color: var(--color-gold-bright);
}
.sku-strip__sku {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-gold-bright);
}
.sku-strip strong {
  font-size: 0.93rem;
  line-height: 1.5;
  font-weight: 700;
  transition: color 0.16s ease;
}
.sku-strip__moq {
  padding: 2px 16px 14px;
  font-size: 0.78rem;
  color: var(--color-moon-dim);
  margin-top: auto;
}

/* --- مطابقة داخل المتن --------------------------------------------------- */
.article-prose .section {
  padding-block: 1.4rem 0;
}
.article-prose .section .wrap {
  max-width: none;
  padding-inline: 0;
}
.article-prose .faq summary {
  font-size: 1rem;
}
.article-prose .answer-block {
  max-width: none;
}

/* --- تحسينات الحاسوب: مساحة تنفّس أكبر للقراءة ------------------------- */
@media (min-width: 1200px) {
  :root {
    --space-section: 112px;
  }
  body {
    font-size: 17.5px;
  }
  .article-prose p {
    font-size: 1.06rem;
  }
  .article-prose {
    padding-top: 8px;
  }
}

/* إبراز الفقرة الجارية عند التمرير — يحافظ على موضع العين في نصوص طويلة */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ==========================================================================
   جدار الموديلات في الرئيسية.
   كان زائر الحاسوب يمرّ من العنوان إلى «من نحن» دون أن يرى منتجاً واحداً؛
   وهذا الجدار يعرض التسعة بشبكة ثلاثية على الشاشات الواسعة، وبعمودين على
   اللوحي، وبعمود واحد على الجوال.
   ========================================================================== */
.home-products__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.home-products__head h2 {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
}
.home-products__head .lede {
  margin: 0;
  max-width: 62ch;
}
.home-products__head .text-link {
  white-space: nowrap;
  padding-bottom: 4px;
}
.home-sku-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 560px) {
  .home-sku-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 980px) {
  .home-sku-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}
.home-sku {
  margin: 0;
}
.home-sku a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: #fffdf8;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.home-sku a:hover {
  border-color: rgba(200, 162, 79, 0.6);
  box-shadow: var(--shadow-card-lg);
  transform: translateY(-3px);
}
.home-sku__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #f6f1e6 0%, #eee6d8 100%);
  overflow: hidden;
}
.home-sku__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.home-sku a:hover .home-sku__media img {
  transform: scale(1.04);
}
.home-sku__body {
  display: grid;
  gap: 5px;
  padding: 16px 18px 18px;
}
.home-sku__sku {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--color-gold);
}
.home-sku__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--color-plum);
  font-weight: 700;
}
.home-sku__type {
  font-size: 0.85rem;
  color: #5a4f57;
}
.home-sku__moq {
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px solid var(--color-line);
  font-size: 0.8rem;
  color: var(--color-steel);
}

/* محاذاة رأس المقال مع عمود القراءة على الحاسوب.
   العمود يبدأ بعد الفهرس الجانبي (٢٣٢px) والفجوة (٥٤px)، فرأس بعرض كامل
   كان سيبدو مُزاحاً عن النصّ الذي يليه. */
@media (min-width: 1180px) {
  .article-head {
    max-width: calc(var(--max-read-width) + 286px);
    padding-inline-start: 286px;
    padding-inline-end: 24px;
  }
}

/* شريط المحاور أعلى أرشيف المدونة — يحوّل صفحة زمنية طويلة إلى مدخل
   تنقّل موضوعي، ويوزّع سلطة الأرشيف على المحاور الاثني عشر. */
.blog-topics {
  display: grid;
  gap: 20px;
  padding: 24px 26px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: #f8f4ec;
}
@media (min-width: 900px) {
  .blog-topics {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 40px;
  }
}
.blog-topics__head h2 {
  margin: 0 0 8px;
  font-size: 1.24rem;
}
.blog-topics__head p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.8;
  color: #5a4f57;
}
.blog-topics__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.blog-topics__list li {
  margin: 0;
}
.blog-topics__list a {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: #fffdf8;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-plum);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.blog-topics__list a:hover {
  border-color: var(--color-gold);
  background: #fdf8ee;
}

/* شريط المحاور أعلى أرشيف المدونة — يحوّل صفحة زمنية طويلة إلى مدخل
   تنقّل موضوعي، ويوزّع سلطة الأرشيف على المحاور الاثني عشر. */
.blog-topics {
  display: grid;
  gap: 20px;
  padding: 24px 26px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: #f8f4ec;
}
@media (min-width: 900px) {
  .blog-topics {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 40px;
  }
}
.blog-topics__head h2 {
  margin: 0 0 8px;
  font-size: 1.24rem;
}
.blog-topics__head p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.8;
  color: #5a4f57;
}
.blog-topics__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.blog-topics__list li {
  margin: 0;
}
.blog-topics__list a {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: #fffdf8;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-plum);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.blog-topics__list a:hover {
  border-color: var(--color-gold);
  background: #fdf8ee;
}

/* رابط صفحة الموديل المستقلة من داخل الكتالوج — يمنع بقاء الموديل
   محصوراً في صفحة واحدة طويلة، ويعطيه عنواناً قابلاً للفهرسة والمشاركة. */
.procure__page {
  margin: 12px 0 0;
  font-size: 0.9rem;
}
.procure__page a {
  font-weight: 700;
  color: var(--color-plum);
  text-decoration-color: var(--color-gold);
}

/* رابط صفحة الموديل المستقلة من داخل الكتالوج — يمنع بقاء الموديل
   محصوراً في صفحة واحدة طويلة، ويعطيه عنواناً قابلاً للفهرسة والمشاركة. */
.procure__page {
  margin: 12px 0 0;
  font-size: 0.9rem;
}
.procure__page a {
  font-weight: 700;
  color: var(--color-plum);
  text-decoration-color: var(--color-gold);
}

/* ===== ذيل صفحة المحور: محاور مجاورة + مقالات مختارة ===== */
.topic-more h2 {
  margin: 0 0 18px;
  font-size: 1.34rem;
}
.topic-more h2 + .topic-adj,
.topic-more .pick-list + h2,
.topic-more h2:not(:first-child) {
  margin-top: 40px;
}
.topic-adj {
  display: grid;
  gap: 16px;
}
@media (min-width: 820px) {
  .topic-adj {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.topic-adj__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 22px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: #fffdf8;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.topic-adj__card:hover {
  border-color: var(--color-gold);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(60, 40, 55, 0.08);
}
.topic-adj__stage {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  text-transform: none;
}
.topic-adj__card strong {
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--color-plum);
}
.topic-adj__lede {
  font-size: 0.9rem;
  line-height: 1.75;
  color: #5a4f57;
}
.pick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-line);
}
@media (min-width: 900px) {
  .pick-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }
}
.pick-list li {
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-line);
}
.pick-list a {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-plum);
  text-decoration-color: var(--color-gold);
}
.pick-list span {
  display: block;
  margin-top: 6px;
  font-size: 0.88rem;
  line-height: 1.75;
  color: #5a4f57;
}
.topic-more__all {
  margin: 26px 0 0;
  font-size: 0.92rem;
  color: #5a4f57;
}
.topic-more__all a {
  font-weight: 700;
}

/* ===== ذيل صفحة المحور: محاور مجاورة + مقالات مختارة ===== */
.topic-more h2 {
  margin: 0 0 18px;
  font-size: 1.34rem;
}
.topic-more h2 + .topic-adj,
.topic-more .pick-list + h2,
.topic-more h2:not(:first-child) {
  margin-top: 40px;
}
.topic-adj {
  display: grid;
  gap: 16px;
}
@media (min-width: 820px) {
  .topic-adj {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.topic-adj__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 22px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: #fffdf8;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.topic-adj__card:hover {
  border-color: var(--color-gold);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(60, 40, 55, 0.08);
}
.topic-adj__stage {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  text-transform: none;
}
.topic-adj__card strong {
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--color-plum);
}
.topic-adj__lede {
  font-size: 0.9rem;
  line-height: 1.75;
  color: #5a4f57;
}
.pick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-line);
}
@media (min-width: 900px) {
  .pick-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }
}
.pick-list li {
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-line);
}
.pick-list a {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-plum);
  text-decoration-color: var(--color-gold);
}
.pick-list span {
  display: block;
  margin-top: 6px;
  font-size: 0.88rem;
  line-height: 1.75;
  color: #5a4f57;
}
.topic-more__all {
  margin: 26px 0 0;
  font-size: 0.92rem;
  color: #5a4f57;
}
.topic-more__all a {
  font-weight: 700;
}

/* تذييل نحيل في صفحة المقال: عمودان فقط بدل خمسة.
   الصفحة التي يقرأ فيها المستخدم ١٥٠٠ كلمة لا تحتاج خريطة موقع كاملة
   تحتها؛ تحتاج خمسة مسارات وخطوة تالية واحدة. */
.page-article .footer-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
.page-article .footer-slim ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}
@media (max-width: 720px) {
  .page-article .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-article .footer-slim ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* تذييل نحيل في صفحة المقال: عمودان فقط بدل خمسة.
   الصفحة التي يقرأ فيها المستخدم ١٥٠٠ كلمة لا تحتاج خريطة موقع كاملة
   تحتها؛ تحتاج خمسة مسارات وخطوة تالية واحدة. */
.page-article .footer-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
.page-article .footer-slim ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}
@media (max-width: 720px) {
  .page-article .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-article .footer-slim ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* عنوان فرعي داخل كتلة «محتوى ذو صلة» يفصل الأقرب موضوعياً عن الامتداد. */
.article-extras__sub {
  margin: 22px 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-steel);
}

/* عنوان فرعي داخل كتلة «محتوى ذو صلة» يفصل الأقرب موضوعياً عن الامتداد. */
.article-extras__sub {
  margin: 22px 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-steel);
}

/* ==========================================================================
   تحسين القراءة على الحاسوب (الجولة السابعة)
   قرار الشراء التجاري يُتّخذ على شاشة كبيرة: المشتري يقرأ الدليل كاملاً،
   ويقارن، ويرجع إلى فقرة بعينها قبل أن يراسل. ثلاث خصائص تخدم هذا السلوك:
   شريط تقدّم يعطي موضع القارئ في النصّ، وفهرس يتبع موضعه فعليًّا،
   وعمود قراءة يتّسع على الشاشات الكبيرة بدل أن يبقى ضيّقًا بلا سبب.
   كل ما يلي يظهر من ١١٨٠ بكسل فأعلى؛ الهاتف لا يتأثّر.
   ========================================================================== */

/* شريط تقدّم القراءة — مُثبَّت أعلى النافذة، يملأ من اليمين في واجهة RTL. */
.read-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 3px;
  z-index: 120;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.read-progress.is-on {
  opacity: 1;
}
.read-progress__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-gold), var(--color-plum));
  transform: scaleX(0);
  transform-origin: right center;
}

@media (min-width: 1180px) {
  :root {
    /* ٦٦٠ مع حشو ٢٢ بكسل يميناً ويساراً = ٦١٦ بكسل نصّاً ≈ ٧٣ حرفاً.
       القياس عند ١٢٨٠ بكسل أعطى ٧٦٫٥ حرفاً مع ٦٩٠، وهو فوق النطاق. */
    --max-read-width: 660px;
    --max-page-width: 1280px;
  }
  /* العمود الأوسع وحده لا يكفي: المسافة بين الفقرات تكبر معه، وإلا صار
     النصّ كتلة واحدة تُتعب العين على مدى ألفَي كلمة. */
  .article-prose p {
    font-size: 1.08rem;
    line-height: 2.12;
    margin: 0 0 1.35rem;
  }
  .article-prose h2 {
    font-size: 1.78rem;
    margin: 2.9rem 0 1rem;
    scroll-margin-top: 104px;
  }
  .article-prose h3 {
    font-size: 1.28rem;
    margin: 2rem 0 0.7rem;
  }
  .article-prose ul,
  .article-prose ol {
    line-height: 2.0;
    margin: 0 0 1.35rem;
  }
  .article-prose li {
    margin: 0.5rem 0;
  }
  .article-layout {
    gap: 64px;
  }
  .article-toc {
    top: 104px;
    max-height: calc(100vh - 150px);
    padding-inline-end: 20px;
  }
  /* الفهرس الطويل يصبح قابلًا للتمرير بدل أن يُقطع: مقال من ثلاثين عنوانًا
     فرعيًا يخرج عن الشاشة، والقارئ يحتاج أن يرى كلّه لا أن يُخمّنه. */
  .article-toc__scroll {
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .article-toc a.is-active {
    font-weight: 700;
  }
  .article-head {
    max-width: 726px;
  }
  .article-excerpt {
    font-size: 1.16rem;
    line-height: 2.0;
    padding: 18px 22px;
  }
}

@media (min-width: 1440px) {
  :root {
    /* لا تُوسَّع القراءة على الشاشات العريضة: الشاشة الأكبر تعني هامشاً
       أوسع لا سطراً أطول. القيمة نفسها تحفظ وحدة القياس عبر الأحجام. */
    --max-read-width: 690px;
  }
  .article-layout {
    grid-template-columns: 252px minmax(0, var(--max-read-width));
  }
  .article-head {
    max-width: 690px;
  }
  /* شاشة عريضة بلا مساحة إضافية تُقرأ كصفحة مزدحمة: القسم يأخذ هواءً أكثر. */
  .section {
    padding-block: 116px;
  }
}

/* ==========================================================================
   الجولة ١٤ — قراءة الحاسوب بوصفها سطح القرار الأول.
   مشتري الجملة يقرأ العرض على شاشة واسعة، ويقارن رقمين وهو يمرّر، ويبحث
   عن الرابط التالي بعينه لا بإصبعه. القواعد التالية تحكم الثلاثة:
   قياس سطر مريح، ورابط مرئي بلا إزعاج، وشكل بياني يقرأ من بعيد.
   ========================================================================== */
@media (min-width: 1180px) {
  .article-prose p {
    font-size: 1.09rem;
    line-height: 2.0;
    margin: 0 0 1.35rem;
  }
  .article-prose li {
    margin: 0.45rem 0;
  }
  .article-prose h2 {
    font-size: 1.78rem;
    margin: 3rem 0 1.1rem;
    scroll-margin-top: 108px;
  }
  .article-prose h3 {
    font-size: 1.3rem;
    margin: 2.1rem 0 0.7rem;
  }
  .article-prose blockquote {
    padding: 18px 26px;
    font-size: 1.07rem;
  }
  /* الرابط الداخلي داخل النصّ: خط سفلي خفيف دائماً، فيراه القارئ وهو يمرّر
     دون أن ينتظر تمرير المؤشر. الوصف تحته يمنع الالتباس مع النصّ العادي. */
  .article-prose p a,
  .article-prose li a {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(200, 162, 79, 0.75);
    transition: text-decoration-color 0.15s ease, background-color 0.15s ease;
  }
  .article-prose p a:hover,
  .article-prose li a:hover {
    text-decoration-color: var(--color-gold);
    background-color: rgba(200, 162, 79, 0.10);
  }
  /* الشكل البياني على شاشة واسعة: هواء حوله حتى لا يلتصق بالنصّ،
     والتسمية أوضح لأن القارئ يقرأ المحور والرقم معاً من مسافة. */
  .article-prose figure.viz {
    margin: 2.6rem 0;
    padding: 26px 30px;
  }
  .article-prose figure.viz .viz__label {
    font-size: 0.95rem;
  }
  .article-prose figure.viz .viz__val {
    font-size: 1.02rem;
  }
  /* الجدول: صفوف أعرض وتظليل متبادل — المقارنة بين رقمين هي عمل المشتري. */
  .article-prose table {
    font-size: 1rem;
  }
  .article-prose th,
  .article-prose td {
    padding: 13px 16px;
  }
}

@media (min-width: 1440px) {
  .article-prose p {
    font-size: 1.12rem;
  }
  .article-prose h2 {
    font-size: 1.86rem;
  }
}

/* الفهرس الجانبي لاصق: من يقرأ ثلاثة آلاف كلمة لا يعود إلى الأعلى
   ليختار عنواناً تالياً. */
@media (min-width: 1180px) {
  .article-layout > .article-toc,
  .article-layout > nav.article-toc,
  .article-layout > aside.article-toc {
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ==========================================================================
   الجولة ١٥ — الحاسوب بوصفه سطح القرار: تنقّل أوسع، ومقارنة أسهل.
   الجولة السابقة ضبطت عمود القراءة؛ هذه تضبط ما حوله: الفهرس يبقى معك
   حتى آخر المقال، والجدول يُقرأ صفّاً صفّاً بلا أن يضيع رأس العمود،
   وشبكة الأرشيف تستعرض ثلاثة أعمدة على الشاشة العريضة بدل عمودين
   ومسافة فارغة. كل قاعدة هنا تجيب عن سؤال واحد: ماذا يفعل المشتري
   وهو يمرّر؟
   ========================================================================== */

@media (min-width: 1180px) {
  /* الفهرس الجانبي لاصق — من يصل إلى الفقرة الأربعين لا يعود إلى الأعلى
     ليختار عنواناً تالياً، ولا يفقد موضعه من المقال. */
  .article-layout > .article-toc {
    position: sticky;
    top: 88px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  /* عمود المحور لاصق كذلك: أزرار الانتقال وأسئلة المحور تبقى في النظر
     بينما يقرأ المشتري مقدّمة من مئة وعشرين كلمة. */
  .topic-layout > .topic-aside {
    position: sticky;
    top: 88px;
    align-self: start;
  }

  /* الجدول: تظليل متبادل وتحديد الصفّ عند المرور. عمل المشتري مقارنة
     رقمين في صفّين متجاورين، والخط الأفقي وحده لا يكفي عند ثمانية صفوف. */
  .article-prose table th,
  .article-prose table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-line);
  }
  .article-prose table thead th {
    background: #f2ece0;
    font-size: 1rem;
    position: relative;
  }
  .article-prose table tbody tr:nth-child(even) {
    background: rgba(246, 241, 230, 0.5);
  }
  .article-prose table tbody tr:hover {
    background: rgba(200, 162, 79, 0.09);
  }

  /* كتلة الإجابة المختصرة على شاشة واسعة: هي أول ما يُقتبس، فتُعطى
     حدّاً أوضح وهواءً أكثر من الفقرة العادية. */
  .article-prose .answer-block,
  .page-head .answer-block {
    padding: 22px 28px;
    font-size: 1.08rem;
    line-height: 1.98;
  }
  .answer-block__label {
    font-size: 0.82rem;
    letter-spacing: 0.4px;
  }

  /* عنوان فرعي يحمل مرساة ظاهرة عند المرور — ينسخها المشتري ليشاركها
     مع زميله في الشراء. */
  .article-prose h2,
  .article-prose h3 {
    position: relative;
  }
  .article-prose h2 > a.heading-anchor,
  .article-prose h3 > a.heading-anchor {
    opacity: 0;
    transition: opacity 0.15s ease;
    text-decoration: none;
    color: var(--color-steel);
    font-size: 0.72em;
    padding-inline-start: 8px;
  }
  .article-prose h2:hover > a.heading-anchor,
  .article-prose h3:hover > a.heading-anchor {
    opacity: 1;
  }
}

@media (min-width: 1440px) {
  /* شاشة عريضة وعمودان فقط في الأرشيف = مسافة مهدورة. ثلاثة أعمدة
     تعرض ثلاثة عناوين دفعة واحدة، والموزّع يقارن بالعين قبل النقر. */
  .blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
  }
  .blog-card {
    padding: 26px 26px 24px;
  }
  .blog-card__title {
    font-size: 1.24rem;
    line-height: 1.6;
  }
  .blog-card__excerpt {
    font-size: 0.98rem;
    line-height: 1.9;
  }

  /* عنوان المقال: أكبر خطوة واحدة على الشاشة العريضة، وبنفس محاذاة
     عمود القراءة لا بعرض النافذة. */
  .article-head__title {
    font-size: 2.5rem;
    line-height: 1.38;
    margin-bottom: 26px;
  }

  /* شبكة المحاور: أربعة أعمدة تعرض المسار كله في شاشة واحدة، فيرى
     المشتري أنّ القرار اثنتا عشرة خطوة لا صفحة واحدة. */
  .topics-grid,
  .hub-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* الفهرس الجانبي أعرض قليلاً: العناوين الطويلة لا تُقطع. */
  .article-layout {
    grid-template-columns: 268px minmax(0, var(--max-read-width));
  }
  .article-toc {
    font-size: 0.96rem;
  }
}

/* احترام تفضيل تقليل الحركة: الحركات الزخرفية تُوقف، واللاصق يبقى.
   من يطلب تقليل الحركة لا يطلب فقدان التنقّل. */
@media (prefers-reduced-motion: reduce) {
  .article-layout > .article-toc,
  .topic-layout > .topic-aside {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   الجولة ١٦ — كتل المحتوى العميق داخل صفحات المحاور.
   المحور كان حتّى الآن: تمهيد، قائمة قراءة، أسئلة. وهذه الثلاثة لا تحمل
   جدولاً ولا خطوة. الكتل التالية تُدخل الطبقة التي يبحث عنها المشتري فعلاً:
   جدول مقارنة، وخط زمني، وبطاقة تقييم. ولأنّها تُقرأ على الحاسوب أوّلاً،
   فالعرض والهواء محسوبان لشاشة عريضة لا لعمود ضيّق.
   ========================================================================== */

.topic-deep .data-table {
  min-width: 640px;
}

.topic-deep .data-table caption {
  caption-side: top;
  text-align: start;
  font-size: 0.86rem;
  letter-spacing: 0.2px;
  color: var(--color-steel);
  padding: 0 0 10px;
}

.topic-deep h3 {
  margin: 2.4rem 0 0.9rem;
  font-size: 1.24rem;
}

.topic-deep > .wrap > p {
  max-width: 68ch;
}

/* قائمة مرقّمة تُقرأ كخطوات لا كفقرة: الرقم في عمود ثابت، والنصّ يبدأ
   من نفس المحاذاة في كل سطر — عين المشتري تمسح الأرقام أوّلاً. */
.deep-list {
  list-style: none;
  counter-reset: deep;
  margin: 1.1rem 0 1.6rem;
  padding: 0;
  max-width: 72ch;
}

.deep-list > li {
  counter-increment: deep;
  position: relative;
  padding-inline-start: 2.2rem;
  margin: 0 0 1rem;
  line-height: 1.95;
}

.deep-list > li::before {
  content: counter(deep);
  position: absolute;
  inset-inline-start: 0;
  top: 0.15em;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f2ece0;
  border: 1px solid var(--color-line);
  color: #7a6a52;
  font-size: 0.76rem;
  font-weight: 600;
}

/* ul داخل الكتلة لا تحتاج ترقيماً — تُعطى شرطة ذهبية هادئة بدلاً منه. */
.topic-deep ul.deep-list {
  counter-reset: none;
}

.topic-deep ul.deep-list > li::before {
  content: '';
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--color-gold);
  border: 0;
}

.deep-callout {
  margin: 1.8rem 0;
  padding: 18px 22px;
  border-inline-start: 3px solid var(--color-gold);
  background: #faf6ec;
  border-radius: 0 10px 10px 0;
  max-width: 72ch;
}

.deep-callout p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.95;
  color: #4a4046;
}

@media (min-width: 1180px) {
  .topic-deep .data-table {
    font-size: 0.95rem;
  }
  .topic-deep .data-table th,
  .topic-deep .data-table td {
    padding: 13px 16px;
    line-height: 1.7;
  }
  .topic-deep .data-table tbody tr:nth-child(even) {
    background: rgba(246, 241, 230, 0.5);
  }
  .topic-deep .data-table tbody tr:hover {
    background: rgba(200, 162, 79, 0.09);
  }
  .deep-list > li {
    font-size: 1.04rem;
  }
  .deep-callout p {
    font-size: 1.02rem;
  }
}

/* ==========================================================================
   R18 — تحسينات سطح الحاسوب (2026-10-28)
   ١) كتالوج الرئيسية: شارة + شريط مواصفات + تفاعل أقوى
   ٢) مسارات المشتري الخمسة (روابط داخلية بارزة على الحاسوب)
   ٣) القراءة الغامرة للمقالات على الحاسوب
   ٤) روابط «مقالات ذات صلة / موديلات» ككتل بطاقات بارزة
   ٥) أرقام GEO: إطار figure/figcaption أوضح
   ========================================================================== */

/* ١) كتالوج الرئيسية */
.home-sku { position: relative; }
.home-sku__badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  padding: 4px 11px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #2a1c12;
  background: linear-gradient(135deg, var(--color-gold), #e9cb79);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.home-sku__spec {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px dashed var(--color-line);
  font-size: 0.78rem;
  color: var(--color-steel);
}
.home-sku__spec b { color: var(--color-plum); font-weight: 700; }
@media (min-width: 980px) {
  .home-sku a:hover { transform: translateY(-4px); }
  .home-sku__name { font-size: 1.08rem; }
  .home-sku-grid { gap: 20px; }
}

/* ٢) مسارات المشتري الخمسة */
.home-nav__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 18px;
}
@media (min-width: 640px) { .home-nav__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .home-nav__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.home-nav__card {
  display: block;
  padding: 18px 18px 20px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: #fffdf8;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.home-nav__card:hover {
  border-color: rgba(200,162,79,.6);
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}
.home-nav__card h3 {
  margin: 0 0 6px;
  font-size: 1.04rem;
  color: var(--color-plum);
  font-family: var(--font-display);
}
.home-nav__card p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.75;
  color: #5a4f57;
}

/* ٣) القراءة الغامرة على الحاسوب */
@media (min-width: 1024px) {
  .page-article .prose, .article-prose { max-width: 860px; }
  .article-prose p { font-size: 1.07rem; line-height: 2.18; margin: 0 0 1.3rem; }
  .article-prose h2 { font-size: 1.74rem; }
  .article-prose h3 { font-size: 1.3rem; }
  .article-prose li { margin: 0.42rem 0; }
  .article-prose blockquote { font-size: 1.02rem; }
}

/* ٤) روابط «مقالات ذات صلة / موديلات» ككتل بطاقات */
.article-related {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
@media (min-width: 760px) { .article-related { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.article-related li { margin: 0; }
.article-related a {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: #fffdf8;
  text-decoration: none;
  color: var(--color-plum);
  font-weight: 600;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.article-related a:hover { border-color: rgba(200,162,79,.6); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.article-models a { font-size: 0.92rem; }
.article-hublinks {
  margin: 1.5rem 0 0;
  padding: 14px 16px;
  border-inline-start: 3px solid var(--color-gold);
  background: #f8f4ec;
  border-radius: 0 10px 10px 0;
  font-size: 0.96rem;
  line-height: 2.05;
}
.article-hublinks a { font-weight: 700; }

/* ٥) أرقام GEO: إطار figure/figcaption أوضح */
.article-prose figure {
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: 16px 18px;
  background: #fbf8f1;
}
.article-prose figcaption { font-style: normal; }

/* ==========================================================================
   الجولة ١٩ — صقل قراءة الحاسوب + إطار الأشكال البيانية (data-figure).
   العشرون جدولاً التي غُلّفت في R18 بـ <figure class="data-figure"> لم تكن
   تحمل تنسيقاً، فكانت الحواشي تُقرأ كنصّ عاديّ. هذا القسم يمنحها إطاراً
   هادئاً وحاشية واضحة، ويضبط إيقاع القراءة على الشاشات الواسعة.
   ========================================================================== */
.article-prose figure.data-figure {
  margin: 1.9rem 0;
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: #fffdf8;
}
.article-prose figure.data-figure figcaption {
  margin: 0 0 0.85rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-plum);
  line-height: 1.6;
}
.article-prose .data-src {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  color: var(--color-steel);
  line-height: 1.7;
}
.article-prose figure.data-figure .table-scroll {
  margin: 0;
}

/* إيقاع قراءة أهدأ على الشاشات الواسعة (B2B يقرأ على الحاسوب غالباً). */
@media (min-width: 1280px) {
  .article-prose > p {
    margin-block: 1.15em;
    line-height: 1.95;
  }
  .article-prose > p:first-of-type {
    font-size: 1.045em;
  }
  .article-prose h2 {
    scroll-margin-top: 96px;
  }
  .article-prose a:not(.cite) {
    text-underline-offset: 3px;
  }
}

/* ==========================================================================
   صفحة الموديل — الكتل الأربع (R20)
   السيناريو والمطابقة والمقارنة وملاحظة القرار. أُضيفت لأنّ صفحة الموديل
   كانت أضعف صفحة في الموقع نصّاً، وأقواها في نيّة الشراء — أي أنّها كانت
   تُهدر نيّة جاهزة. الأنماط هنا تحافظ على إيقاع القراءة نفسه المستخدم في
   المقالات: عمود ضيّق، تباعد رأسي واضح، وجداول قابلة للتمرير أفقياً على
   الشاشات الضيّقة بلا كسر التخطيط.
   ========================================================================== */

.sku-fit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 28px;
}
@media (min-width: 860px) {
  .sku-fit {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}
.sku-fit__item {
  padding: 22px 22px 24px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: #fffdf8;
}
.sku-fit__item h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-plum);
  font-weight: 700;
}
.sku-fit__item p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--color-steel);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 22px;
}
.spec-table--certs {
  min-width: 720px;
  font-size: 0.9rem;
}
.spec-table--certs th,
.spec-table--certs td {
  vertical-align: top;
  line-height: 1.75;
}
.spec-table--certs thead th {
  text-align: start;
  font-weight: 700;
  color: var(--color-plum);
  border-bottom: 1px solid var(--color-line);
}
.spec-table--certs tbody th {
  white-space: nowrap;
  width: 1%;
  font-weight: 700;
  color: var(--color-gold);
}

.sku-versus {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
@media (min-width: 860px) {
  .sku-versus {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}
.sku-versus__item {
  padding: 20px 22px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: #fffdf8;
}
.sku-versus__link {
  display: block;
  text-decoration: none;
  margin-bottom: 10px;
}
.sku-versus__sku {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--color-gold);
  margin-bottom: 4px;
}
.sku-versus__link strong {
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--color-plum);
  font-weight: 700;
}
.sku-versus__link:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sku-versus__item p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--color-steel);
}
.sku-versus__all {
  margin-top: 22px;
  font-size: 0.9rem;
}

.sku-buyer-note {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 22px;
  border-inline-start: 3px solid var(--color-gold);
  background: rgba(200, 162, 79, 0.06);
  border-radius: 0 10px 10px 0;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--color-plum);
}

/* ==========================================================================
   كتلة «من المسار إلى الموديل» (R20)
   تُستخدم في الصفحات التجارية الستّ وفي فهرس الأدلة. سبب وجودها بنيوي:
   هذه الصفحات كانت تنتهي عند نموذج التواصل بلا إشارة إلى أي موديل، وهو
   الموضع الذي يخرج منه المشتري المقتنع إلى محرّك بحث آخر. الشبكة تعطي
   ثلاثة خيارات مع سبب كل خيار، لا قائمة أرقام مجرّدة.
   ========================================================================== */

.model-picker__list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
@media (min-width: 720px) {
  .model-picker__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (min-width: 1040px) {
  .model-picker__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.model-picker__item {
  padding: 20px 22px 22px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: #fffdf8;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.model-picker__item:hover {
  border-color: rgba(200, 162, 79, 0.55);
  box-shadow: var(--shadow-card-lg);
}
.model-picker__link {
  display: block;
  text-decoration: none;
  margin-bottom: 9px;
}
.model-picker__sku {
  display: block;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  margin-bottom: 4px;
}
.model-picker__link strong {
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--color-plum);
  font-weight: 700;
}
.model-picker__link:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.model-picker__item p {
  margin: 0;
  font-size: 0.89rem;
  line-height: 1.78;
  color: var(--color-steel);
}
.model-picker__all {
  margin-top: 22px;
  font-size: 0.9rem;
}

/* --- الخطّ الزمني للشراء وأخطاء متكرّرة (صفحة الموديل) ------------------- */
.sku-timeline {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-inline-start: 2px solid var(--color-line);
  padding-inline-start: 24px;
}
.sku-timeline__step {
  position: relative;
  padding-bottom: 26px;
}
.sku-timeline__step:last-child {
  padding-bottom: 0;
}
.sku-timeline__step::before {
  content: "";
  position: absolute;
  inset-inline-start: -32px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 0 4px #fffdf8;
}
.sku-timeline__num {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  margin-bottom: 4px;
}
.sku-timeline__step h3 {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-plum);
  font-weight: 700;
}
.sku-timeline__step p {
  margin: 0;
  font-size: 0.91rem;
  line-height: 1.85;
  color: var(--color-steel);
  max-width: 74ch;
}

.sku-mistakes {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
@media (min-width: 900px) {
  .sku-mistakes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}
.sku-mistakes li {
  padding: 20px 22px;
  border: 1px solid rgba(200, 162, 79, 0.32);
  border-radius: 12px;
  background: rgba(200, 162, 79, 0.05);
  font-size: 0.9rem;
  line-height: 1.82;
  color: var(--color-steel);
}
.sku-mistakes strong {
  display: block;
  margin-bottom: 7px;
  color: var(--color-plum);
  font-weight: 700;
  font-size: 0.94rem;
  line-height: 1.55;
}

/* ==========================================================================
   جدول مقارنة الموديلات — شاشات مكتبية فقط
   الهاتف يبقى على البطاقات: تمرير جدول أفقي على شاشة ٣٩٠ بكسل أسوأ من
   غيابه. الجدول يظهر من ٩٠٠ بكسل وما فوق، حيث يكون العرض كافياً لعرض
   خمسة أعمدة بلا تمرير.
   ========================================================================== */

.home-products__note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--color-line);
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--color-steel);
  max-width: 82ch;
}

.cmp-wrap {
  display: none;
}
@media (min-width: 900px) {
  .cmp-wrap {
    display: block;
    margin-top: 30px;
    /* الحواف والتمرير على الغلاف لا على الجدول: overflow:hidden على table
       يقصّ العمود الأول في RTL بدل أن يمرّره، فتُقرأ أسماء الموديلات مبتورة. */
    overflow-x: auto;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    background: #fffdf8;
  }
}
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.cmp-table caption {
  caption-side: top;
  text-align: start;
  padding: 0 0 12px;
  font-size: 0.83rem;
  color: var(--color-steel);
}
.cmp-table thead th {
  text-align: start;
  padding: 13px 16px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-steel);
  background: #f7f2e7;
  border-bottom: 1px solid var(--color-line);
  white-space: nowrap;
}
.cmp-table tbody th,
.cmp-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-line);
  vertical-align: middle;
  text-align: start;
  line-height: 1.6;
}
.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td {
  border-bottom: 0;
}
.cmp-table tbody tr:hover {
  background: rgba(200, 162, 79, 0.06);
}
.cmp-table tbody th {
  font-weight: 600;
  /* الاسم يلتفّ ولا يُقصّ: nowrap على عمود طويل يدفع الجدول أوسع من حاويته،
     فيُقتطع العمود الأول في RTL — وهو أهمّ عمود في الجدول. */
  white-space: normal;
  min-width: 148px;
}
.cmp-table tbody th a {
  color: var(--color-plum);
  text-decoration: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.cmp-table tbody th a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cmp__sku {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- جدول المقارنة المثبَّت في الكتالوج (R24) ------------------------------
   الغرض: صفحة الكتالوج تسع كتل، والمشتري يقرأ السابعة وقد نسي حدّ أدنى قرأه
   في الثانية. الجدول يبقى أعلى الشاشة أثناء التمرير فتبقى الأرقام التسعة
   أمامه، ويُثبَّت عمود الموديل أفقياً حتى لا يضيع الاسم عند التمرير الجانبي.
   ========================================================================== */

.compare-head {
  max-width: 62ch;
}
.compare-head h2 {
  margin-bottom: 10px;
}
.compare-head p {
  color: var(--color-steel);
  font-size: 0.96rem;
  line-height: 1.75;
}
.cmp-sticky-wrap {
  margin-top: 20px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: #fffdf8;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* الالتصاق على المكتب فقط: على الهاتف يحتلّ الجدول الشاشة كلها فيمنع
   القراءة. هناك يبقى في مساره الطبيعي مع تمرير أفقي. */
@media (min-width: 1024px) {
  .cmp-sticky-wrap {
    position: sticky;
    top: 78px;
    z-index: 21;
    max-height: calc(100vh - 104px);
    overflow: auto;
    box-shadow: 0 22px 44px -30px rgba(26, 17, 31, 0.5);
  }
  /* ظلّ سفلي خفيف يقول «هذا مثبَّت لا جزء من المحتوى» بلا إطار ثانٍ. */
  .cmp-sticky-wrap::after {
    content: '';
    display: block;
    height: 2px;
  }
}
.cmp-sticky {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
  /* تخطيط ثابت: الأعمدة تُقسَّم على العرض المتاح بالتساوي، فيلتفّ النصّ
     بدل أن يمدّ الجدول خارج حاويته. مع التخطيط التلقائي كان عمود
     «التفاصيل» يُقتطع من حافة RTL. */
  table-layout: fixed;
}
.cmp-sticky caption {
  caption-side: top;
  text-align: start;
  padding: 13px 16px 11px;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--color-steel);
}
.cmp-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  text-align: start;
  padding: 10px 11px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-plum);
  background: #f3ecdd;
  border-bottom: 1px solid var(--color-line);
  line-height: 1.35;
}
.cmp-sticky tbody th,
.cmp-sticky tbody td {
  padding: 9px 11px;
  text-align: start;
  vertical-align: middle;
  line-height: 1.5;
  border-bottom: 1px solid var(--color-line);
  /* الالتفاف لا التمدّد: خلية «محركان مستقلان بتحكّم منفصل» تدفع الجدول
     أوسع من حاويته فيُقتطع عمود التفاصيل في RTL. */
  max-width: 190px;
}
.cmp-sticky tbody th {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  background: #fffdf8;
  min-width: 156px;
  max-width: 186px;
  box-shadow: -1px 0 0 var(--color-line) inset;
}
.cmp-sticky tbody tr:nth-child(even) th,
.cmp-sticky tbody tr:nth-child(even) td {
  background: #faf6ee;
}
.cmp-sticky tbody tr:hover th,
.cmp-sticky tbody tr:hover td {
  background: rgba(200, 162, 79, 0.1);
}
.cmp-sticky tbody th a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--color-plum);
  text-decoration: none;
}
.cmp-sticky tbody th a:hover .cmp-sticky__name {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cmp-sticky__sku {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
}
.cmp-sticky__name {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}
.cmp-sticky__na {
  color: var(--color-mist);
}
.cmp-sticky__go {
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-plum);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-gold);
}
.compare-note {
  margin-top: 12px;
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--color-steel);
}
.compare-note a {
  color: var(--color-plum);
}

/* ==========================================================================
   غلاف مقال نصّي (R20)
   الغلاف هنا كتلة طباعية وليس صورة: خلفية دافئة متدرّجة، شريط ذهبي رفيع،
   وعنوان بخطّ العرض بحجم يقود العين. السبب أنّ الصور المصغّرة المتشابهة
   في شبكة من مئة وسبع وثلاثين مقالاً لا تميّز شيئاً، بينما العنوان المكتوب
   بوضوح يقول للمشتري عن أيّ قرار يتكلّم المقال قبل أن يقرأ حرفاً من الملخّص.
   ========================================================================== */

.blog-card__cover {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: -24px -24px 18px;
  padding: 22px 24px 24px;
  background: linear-gradient(158deg, #fdf8ed 0%, #f6ecda 55%, #f1e4cf 100%);
  border-bottom: 1px solid var(--color-line);
  min-height: 168px;
}
.blog-card__cover::before {
  content: "";
  display: block;
  height: 3px;
  width: 44px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--color-gold), rgba(200, 162, 79, 0.18));
  margin-bottom: 4px;
}
/* الشريط القديم أعلى البطاقة لم يبقَ له موضع بعد إدخال الغلاف. */
.blog-card__link::before {
  display: none;
}
.blog-card__cover .blog-card__meta {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: #8a7c85;
}
.blog-card__cover .blog-card__title {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.52;
  letter-spacing: -0.01em;
}
.blog-card__excerpt {
  display: block;
}
.blog-card__more {
  display: inline-block;
}
@media (min-width: 900px) {
  .blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
  }
  .blog-card__cover {
    min-height: 186px;
  }
  .blog-card__cover .blog-card__title {
    font-size: 1.22rem;
    line-height: 1.55;
  }
}

/* ==========================================================================
   R21 — تحسين سطح الحاسوب للمشترين التجاريين.
   القاعدة الحاكمة: المشتري بين الشركات يقرأ على شاشة عريضة، ويقرأ ليقرّر
   لا ليتصفّح. فالمساحة الفارغة في نصف الشاشة ليست «هواءً» بل قراراً مؤجَّلاً.
   الحل هنا: نقل أرقام القرار (الحدّ الأدنى، المدّة، العينة، الامتثال) من
   سطرٍ رقيق أسفل العنوان إلى لوحة رأسية يراها المشتري في أول ثانية،
   ويأخذ النصّ عموداً مقروءاً لا صفّاً ممتدّاً.
   ========================================================================== */
@media (min-width: 1080px) {
  .catalog-hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 344px);
    column-gap: clamp(32px, 4.5vw, 68px);
    align-items: center;
  }
  .catalog-hero__body {
    grid-column: 1;
    min-width: 0;
  }
  /* حدود العنوان والفقرة تُقاس بعمود النصّ لا بعرض الشاشة، وإلا امتدّ
     السطر العربي إلى ما يزيد على ٩٠ حرفاً فيتعب العين عند القراءة. */
  .catalog-hero h1,
  .catalog-hero .lede {
    max-width: 100%;
  }
  .catalog-hero .catalog-hero__meta {
    grid-column: 2;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 22px;
    border: 1px solid rgba(200, 162, 79, 0.26);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(2px);
    font-size: 0.95rem;
    line-height: 1.6;
  }
  .catalog-hero .catalog-hero__meta li {
    padding-block: 13px;
    border-top: 1px solid rgba(200, 162, 79, 0.16);
  }
  .catalog-hero .catalog-hero__meta li:first-child {
    border-top: 0;
  }
  .catalog-hero .catalog-hero__meta strong {
    display: block;
    margin-bottom: 3px;
  }
}

/* رأس المقال: كان يتقارب عند ١٤٤٠ بكسل إلى ٤٥٤ بكسل بينما عمود النصّ
   ٧٦٤ — فيلتفّ العنوان في ثلاثة أسطر قصيرة فوق نصّ عريض، ويبدو مُزاحاً عن
   العمود الذي يليه. الحل: شبكة مطابقة لشبكة المقال نفسها، فتُصبح المحاذاة
   نتيجةً للبنية لا حسابَ هوامش يتعارض بين نقطتَي توقّف. */
@media (min-width: 1180px) {
  .wrap.article-head {
    display: grid;
    grid-template-columns: 232px minmax(0, var(--max-read-width));
    justify-content: center;
    column-gap: 54px;
    max-width: var(--max-page-width);
    padding-inline: 24px;
  }
  .wrap.article-head > * {
    grid-column: 2;
  }
}
@media (min-width: 1440px) {
  /* تُبدَّل أعمدة الشبكة فقط، ويبقى الصندوق نفس صندوق .article-layout
     (العرض الأقصى والهوامش). أي تغيير في الصندوق هنا يُنتج إزاحة بضعة
     بكسلات بين العنوان والنصّ — وهي إزاحة تُرى بالعين وإن لم تُرصد بالقياس. */
  .wrap.article-head {
    grid-template-columns: 252px minmax(0, var(--max-read-width));
  }
}

/* ==========================================================================
   R21 — تحسين سطح الحاسوب للمشترين التجاريين.
   القاعدة الحاكمة: المشتري بين الشركات يقرأ على شاشة عريضة، ويقرأ ليقرّر
   لا ليتصفّح. فالمساحة الفارغة في نصف الشاشة ليست «هواءً» بل قراراً مؤجَّلاً.
   الحل هنا: نقل أرقام القرار (الحدّ الأدنى، المدّة، العينة، الامتثال) من
   سطرٍ رقيق أسفل العنوان إلى لوحة رأسية يراها المشتري في أول ثانية،
   ويأخذ النصّ عموداً مقروءاً لا صفّاً ممتدّاً.
   ========================================================================== */
@media (min-width: 1080px) {
  .catalog-hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 344px);
    column-gap: clamp(32px, 4.5vw, 68px);
    align-items: center;
  }
  .catalog-hero__body {
    grid-column: 1;
    min-width: 0;
  }
  /* حدود العنوان والفقرة تُقاس بعمود النصّ لا بعرض الشاشة، وإلا امتدّ
     السطر العربي إلى ما يزيد على ٩٠ حرفاً فيتعب العين عند القراءة. */
  .catalog-hero h1,
  .catalog-hero .lede {
    max-width: 100%;
  }
  .catalog-hero .catalog-hero__meta {
    grid-column: 2;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 22px;
    border: 1px solid rgba(200, 162, 79, 0.26);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(2px);
    font-size: 0.95rem;
    line-height: 1.6;
  }
  .catalog-hero .catalog-hero__meta li {
    padding-block: 13px;
    border-top: 1px solid rgba(200, 162, 79, 0.16);
  }
  .catalog-hero .catalog-hero__meta li:first-child {
    border-top: 0;
  }
  .catalog-hero .catalog-hero__meta strong {
    display: block;
    margin-bottom: 3px;
  }
}

/* ==========================================================================
   R22 — heroes الواجهة: من «فراغ جمالي» إلى «لوحة قرار».
   في ١٤٤٠px كان القمر يطفو في عمودٍ فارغ ارتفاعه ٤٠٠px: لا يُنتج معنى ولا
   يُعين على قرار. أُضيفت تحت القمر ثلاثة أرقام هي بالضبط ما يسأل عنه المشتري
   في أول عشر ثوانٍ (الحدّ الأدنى، المدّة، عدد الموديلات) فصار العمود الأيسر
   يقرأ نفسه بدل أن يكون مساحةً مهدورة.
   ========================================================================== */
.hero__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  min-width: 0;
}

.hero__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  width: 100%;
  max-width: 380px;
  border-top: 1px solid rgba(200, 162, 79, 0.22);
}

.hero__facts li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 14px;
  padding-block: 13px;
  border-bottom: 1px solid rgba(200, 162, 79, 0.14);
}

.hero__facts strong {
  font-family: var(--font-display);
  font-size: 1.62rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-gold-bright);
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hero__facts span {
  font-size: 0.84rem;
  line-height: 1.6;
  color: #a99f9b;
}

@media (min-width: 1080px) {
  /* العمود الأيسر يصبح لوحةً كاملة الارتفاع: القمر في الوسط، والأرقام تحته
     مباشرةً، فيُملأ الفراغ الرأسي بمعلومة لا بزخرفة. */
  .hero__grid {
    align-items: stretch;
  }
  .hero__aside {
    justify-content: center;
    gap: 34px;
  }
  .hero__aside .moon-wrap {
    flex: none;
  }
  .hero__facts {
    max-width: none;
  }
  .hero__facts strong {
    font-size: 1.78rem;
  }
}

@media (min-width: 1440px) {
  .hero__facts li {
    padding-block: 15px;
  }
  .hero__facts strong {
    font-size: 1.92rem;
  }
  .hero__facts span {
    font-size: 0.88rem;
  }
}

/* --- R22: رأس مكتبة الأدلة — عمودان على الحاسوب --------------------------- */
@media (min-width: 1080px) {
  .page-head--wide > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.24fr) minmax(320px, 0.76fr);
    column-gap: clamp(36px, 4.6vw, 76px);
    align-items: start;
  }
  .page-head--wide__body {
    grid-column: 1;
    min-width: 0;
  }
  .page-head--wide__body h1,
  .page-head--wide__body .page-head__lede {
    max-width: 100%;
  }
  .page-head--wide__aside {
    grid-column: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 24px;
    border: 1px solid rgba(200, 162, 79, 0.28);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(2px);
  }
  .page-head--wide__aside .answer-block {
    max-width: none;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .page-head--wide__aside .answer-block__label {
    display: block;
    margin-bottom: 8px;
  }
  .page-head--wide__aside .page-head__actions {
    margin: 0;
    flex-direction: column;
    align-items: stretch;
  }
  .page-head--wide__aside .page-head__actions .btn {
    justify-content: center;
    text-align: center;
  }
  .page-head--wide__aside .page-head__note {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid rgba(200, 162, 79, 0.16);
    line-height: 1.7;
  }
}

/* --- R22: رأس مكتبة الأدلة — عمودان على الحاسوب --------------------------- */
@media (min-width: 1080px) {
  .page-head--wide > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.24fr) minmax(320px, 0.76fr);
    column-gap: clamp(36px, 4.6vw, 76px);
    align-items: start;
  }
  .page-head--wide__body {
    grid-column: 1;
    min-width: 0;
  }
  .page-head--wide__body h1,
  .page-head--wide__body .page-head__lede {
    max-width: 100%;
  }
  .page-head--wide__aside {
    grid-column: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 24px;
    border: 1px solid rgba(200, 162, 79, 0.28);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(2px);
  }
  .page-head--wide__aside .answer-block {
    max-width: none;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .page-head--wide__aside .answer-block__label {
    display: block;
    margin-bottom: 8px;
  }
  .page-head--wide__aside .page-head__actions {
    margin: 0;
    flex-direction: column;
    align-items: stretch;
  }
  .page-head--wide__aside .page-head__actions .btn {
    justify-content: center;
    text-align: center;
  }
  .page-head--wide__aside .page-head__note {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid rgba(200, 162, 79, 0.16);
    line-height: 1.7;
  }
}

/* --- R22: رأس أرشيف المدونة — المحاور تنتقل إلى الواجهة ------------------- */
.blog-topics--hero {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(200, 162, 79, 0.28);
  backdrop-filter: blur(2px);
}
.blog-topics--hero .blog-topics__head h2 {
  color: var(--color-moon);
}
.blog-topics--hero .blog-topics__head p {
  color: var(--color-moon-dim);
}
.blog-topics--hero .blog-topics__head a {
  color: var(--color-gold-bright);
}
.blog-topics--hero .blog-topics__list a {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(200, 162, 79, 0.26);
  color: var(--color-moon);
}
.blog-topics--hero .blog-topics__list a:hover {
  background: rgba(200, 162, 79, 0.18);
  border-color: var(--color-gold-bright);
  color: #fff;
}
@media (min-width: 1080px) {
  .hero--blog__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.94fr);
    column-gap: clamp(36px, 4.6vw, 76px);
    align-items: center;
  }
  .hero--blog__body {
    min-width: 0;
  }
  .hero--blog__body h1,
  .hero--blog__body .hero__lede {
    max-width: 100%;
  }
  .hero--blog .blog-topics--hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 22px 24px;
  }
}

/* --- R22: رأس أرشيف المدونة — المحاور تنتقل إلى الواجهة ------------------- */
.blog-topics--hero {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(200, 162, 79, 0.28);
  backdrop-filter: blur(2px);
}
.blog-topics--hero .blog-topics__head h2 {
  color: var(--color-moon);
}
.blog-topics--hero .blog-topics__head p {
  color: var(--color-moon-dim);
}
.blog-topics--hero .blog-topics__head a {
  color: var(--color-gold-bright);
}
.blog-topics--hero .blog-topics__list a {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(200, 162, 79, 0.26);
  color: var(--color-moon);
}
.blog-topics--hero .blog-topics__list a:hover {
  background: rgba(200, 162, 79, 0.18);
  border-color: var(--color-gold-bright);
  color: #fff;
}
@media (min-width: 1080px) {
  .hero--blog__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.94fr);
    column-gap: clamp(36px, 4.6vw, 76px);
    align-items: center;
  }
  .hero--blog__body {
    min-width: 0;
  }
  .hero--blog__body h1,
  .hero--blog__body .hero__lede {
    max-width: 100%;
  }
  .hero--blog .blog-topics--hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 22px 24px;
  }
}

/* --- R22: مؤشّر سريع في الكتالوج يحمل الأرقام لا الاسم وحده ---------------- */
.quick-index__moq {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid rgba(26, 17, 31, 0.09);
  font-size: 0.8rem;
  line-height: 1.4;
}
.quick-index__moq b {
  font-weight: 700;
  color: #3d2f17;
  font-variant-numeric: tabular-nums;
}
.quick-index__moq i {
  font-style: normal;
  color: var(--color-steel);
  white-space: nowrap;
}

/* --- R22: مؤشّر سريع في الكتالوج يحمل الأرقام لا الاسم وحده ---------------- */
.quick-index__moq {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid rgba(26, 17, 31, 0.09);
  font-size: 0.8rem;
  line-height: 1.4;
}
.quick-index__moq b {
  font-weight: 700;
  color: #3d2f17;
  font-variant-numeric: tabular-nums;
}
.quick-index__moq i {
  font-style: normal;
  color: var(--color-steel);
  white-space: nowrap;
}

/* ==========================================================================
   R23 — شريط الشروط في التذييل.
   التذييل كان تعريفاً بالشركة وروابط؛ من يقرأ صفحة على الحاسوب في مرحلة
   المقارنة يريد أربعة أرقام قبل أن يراسل: الحدّ الأدنى، المدّة، زمن الردّ،
   الضمان. الأرقام مشتقّة من site.productionFacts لا مكتوبة هنا، والشريط
   بلا روابط كي لا يتضاعف أثره في خريطة الروابط ١٧٥ مرّة.
   ========================================================================== */
.footer-terms {
  padding-bottom: 34px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--color-line-dark);
}

.footer-terms__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 26px;
}

.footer-terms__list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.footer-terms__list b {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-gold-bright);
  font-variant-numeric: tabular-nums;
}

.footer-terms__list span {
  font-size: 0.82rem;
  line-height: 1.5;
  color: #9d938f;
}

.footer-terms__certs {
  margin: 20px 0 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: #9d938f;
}

.footer-terms__certs span {
  color: #b9afaa;
}

@media (min-width: 760px) {
  .footer-terms__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }
  .footer-terms__list li {
    padding-inline-start: 22px;
    border-inline-start: 1px solid rgba(200, 162, 79, 0.2);
  }
  .footer-terms__list li:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

@media (min-width: 1080px) {
  .footer-terms__list b {
    font-size: 1.32rem;
  }
  .footer-terms__certs {
    font-size: 0.84rem;
  }
}

/* رقم الهاتف سطر مستقلّ: كان ملتصقاً بعبارة «تواصل عبر المحادثة الفورية ·»
   فينكسر الرقم إلى «2293 …» ثم «2295» وحده. الرقم وحدة واحدة. */
.footer-contact {
  margin-top: 14px;
  line-height: 1.9;
}

.footer-phone {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
/* ==========================================================================
   R23 — صفحات الأسئلة الموحّدة /faq/<group>/.
   الصفحة ليست أرشيفاً بل مسار قرار: عنوان المحور يقود إلى دليله، وكل جواب
   يُنسب إلى مقاله الأصلي. النسبة هي ما يمنعها من أن تُقرأ محتوى مكرّراً.
   ========================================================================== */
.faq-hub {
  display: grid;
  gap: 4px;
  max-width: 880px;
}

.faq-hub__group + .faq-hub__group {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--color-line);
}

.faq-hub__group h2 {
  font-size: clamp(1.28rem, 2.1vw, 1.62rem);
  margin-bottom: 10px;
}

.faq-hub__group h2 a {
  color: inherit;
  text-decoration: none;
}

.faq-hub__group h2 a:hover {
  color: var(--color-gold);
}

.faq__body {
  padding-bottom: 6px;
}

.faq__body p {
  margin-bottom: 10px;
}

/* مصدر الجواب: سطر خفيف لا يُنافس الجواب، لكنه يجعل الصفحة مدخلاً
   إلى الدليل الكامل لا بديلاً عنه. */
.faq__src {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--color-steel);
}

.faq__src a {
  color: var(--color-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 162, 79, 0.35);
}

.faq__src a:hover {
  color: var(--color-gold-bright);
  border-bottom-color: currentColor;
}

/* ==========================================================================
   R23 — شبكة مراحل القرار في /faq/.
   الصفحة كانت قائمة طويلة بلا مدخل: من يعرف مرحلته لا يجد طريقه بين ٢٠
   سؤالاً. أربع بطاقات مرقّمة تُدخله من موضعه لا من أوّل السؤال.
   ========================================================================== */
.faq-stage-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.faq-stage-grid a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 14px;
  row-gap: 4px;
  padding: 20px 22px;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.faq-stage-grid a:hover {
  border-color: rgba(200, 162, 79, 0.55);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.faq-stage-grid__n {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-gold);
}

.faq-stage-grid strong {
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.4;
  color: var(--color-ink);
}

.faq-stage-grid a > span:last-child {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--color-steel);
}

@media (min-width: 900px) {
  .faq-stage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* ==========================================================================
   R23 — مستندات الصفقة ومسار العيّنة.
   المشتري التجاري لا يقرأ صفحة الجملة بحثاً عن الشعر بل عن الورق: أي
   مستند يصل، وماذا يثبت، ومتى يُطلب. البطاقات تجعل كل مستند وحدة قابلة
   للفحص بدل أن تُذكر المستندات في جملة واحدة تُنسى.
   ========================================================================== */
.doc-grid {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.doc-grid__item {
  padding: 20px 22px;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: #fff;
}

.doc-grid__item h3 {
  font-size: 1.04rem;
  margin-bottom: 8px;
  line-height: 1.45;
}

.doc-grid__item p {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--color-body, #4a4048);
  margin: 0;
}

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

@media (min-width: 1180px) {
  .doc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

/* مسار العيّنة: رقم في هامش الكتلة، ونصّ مُزاح عنه بمقدار ثابت.
   الشبكة لا تصلح هنا لأن وصف الخطوة نصّ خامّ لا عنصر — فيصير عنصراً
   مجهولاً في الشبكة ويُسقط التخطيط. الإزاحة بالـpadding مضمونة الصلاحية
   مع أي طول عنوان، والرقم في الهامش لا يزاحم النصّ. */
.step-list {
  counter-reset: step;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.step-list li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 58px;
  font-size: 0.95rem;
  line-height: 1.8;
  min-height: 40px;
}

.step-list li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(200, 162, 79, 0.5);
  background: var(--color-cream, #f8f4ec);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.04rem;
  color: #7a5f22;
}

.step-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 3px;
  color: var(--color-ink, #241a29);
}

.note-line {
  margin-top: 22px;
  padding: 16px 20px;
  border-inline-start: 3px solid rgba(200, 162, 79, 0.6);
  background: rgba(200, 162, 79, 0.07);
  border-radius: 0 12px 12px 0;
  font-size: 0.9rem;
  line-height: 1.8;
}

html[dir="rtl"] .note-line {
  border-radius: 12px 0 0 12px;
}

/* ==========================================================================
   R25 — واجهة الرئيسية: من قمرٍ زخرفي إلى ثلاثة موديلات.
   كان العمود الأيسر في ١٤٤٠px يحمل قرصاً مجرّداً وأرقاماً: لا صورة منتج فوق
   الخطّ في صفحةٍ تبيع منتجات. صار الآن لوحة عرض: موديل يقود وكبير، وموديلان
   يُكملان التشكيلة، ورمز كل موديل وحدّه الأدنى على الصورة نفسها. القمر نزل
   إلى الخلفية (هالة `.hero::before`) فبقي الطابع وخسرت الزخرفة أولويتها.
   ========================================================================== */
.hero-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  /* صفّان متساويان: الموديل القائد يمتدّ على الصفّين فيصل ارتفاعه إلى ارتفاع
     الموديلين الصغيرين تماماً. بلا هذا السطر ينتهي القائد قبل جاره بخمسة
     وستّين بكسل، فيُقرأ الصفّ كخطأ محاذاة لا كتكوين. */
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 520px;
}

.hero-showcase__tile {
  position: relative;
  display: block;
  border: 1px solid rgba(200, 162, 79, 0.22);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.hero-showcase__tile:hover,
.hero-showcase__tile:focus-visible {
  border-color: rgba(224, 190, 126, 0.62);
  transform: translateY(-2px);
}

.hero-showcase__tile--lead {
  grid-row: span 2;
}

/* الحجم محجوز قبل وصول الصورة: الموديلان الصغيران مربّعان بالتعريف، فيثبّت
   كلٌّ منهما ارتفاع صفّه فوراً. بلا هذا السطر يبدأ الإطار بارتفاع صفر ثم
   يتضخّم عند وصول الصورة، فيتغيّر ارتفاع الواجهة كلها ويتحرّك عمود النصّ
   (انزياح تخطيط 0.06 قياساً). القائد يمتدّ على الصفّين فلا يحتاج نسبة. */
.hero-showcase__tile:not(.hero-showcase__tile--lead) {
  aspect-ratio: 1 / 1;
}

/* الحجم محجوز قبل وصول الصورة: الموديلان الصغيران مربّعان بالتعريف، فيثبّت
   كلٌّ منهما ارتفاع صفّه فوراً. بلا هذا السطر يبدأ الإطار بارتفاع صفر ثم
   يتضخّم عند وصول الصورة، فيتغيّر ارتفاع الواجهة كلها ويتحرّك عمود النصّ
   (انزياح تخطيط 0.06 قياساً). القائد يمتدّ على الصفّين فلا يحتاج نسبة. */
.hero-showcase__tile:not(.hero-showcase__tile--lead) {
  aspect-ratio: 1 / 1;
}

.hero-showcase__media {
  display: block;
  overflow: hidden;
  height: 100%;
}

.hero-showcase__media img {
  display: block;
  width: 100%;
  height: 100%;
  /* القصّ لا التمدّد: الصور مربّعة في المصدر، والإطار يقصّ الحواف فقط
     فتبقى القطعة في وسط الإطار على كل المقاسات. */
  object-fit: cover;
}

/* التسمية فوق الصورة لا تحتها: اللوحة عمودٌ ضيّق، وكتلة نصّ تحتها تدفع
   الموديل الثالث خارج الشاشة الأولى. التدرّج يضمن التباين على أي صورة. */
.hero-showcase__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  gap: 3px;
  padding: 26px 12px 11px;
  background: linear-gradient(to top, rgba(18, 11, 20, 0.94) 30%, rgba(18, 11, 20, 0));
  text-align: start;
}

.hero-showcase__sku {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--color-gold-bright);
}

.hero-showcase__name {
  font-family: var(--font-display);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-moon);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-showcase__moq {
  font-size: 0.68rem;
  color: #b9aea9;
}

.hero-showcase__tile--lead .hero-showcase__name {
  font-size: 0.94rem;
}

.hero-showcase__tile--lead .hero-showcase__moq {
  font-size: 0.74rem;
}

.hero-showcase__all {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding-top: 11px;
  border-top: 1px solid rgba(200, 162, 79, 0.18);
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--color-gold-bright);
  text-decoration: none;
}

.hero-showcase__all:hover {
  color: var(--color-moon);
}

@media (max-width: 720px) {
  /* على الجوّال يبقى الموديل القائد وحده: ثلاثة إطارات صغيرة في عرض ٣٦٠px
     تصير طوابع بريد لا صور منتج. */
  .hero-showcase {
    grid-template-columns: minmax(0, 1fr);
    /* صفّ واحد لا اثنان: `repeat(2, 1fr)` تبقى فعّالة بعد إخفاء الموديلين
       الصغيرين، فيُحجز صفٌّ فارغ بارتفاع نحو ١٩٠px بين البطاقة والرابط. */
    grid-template-rows: auto;
    max-width: 340px;
  }
  .hero-showcase__tile--lead {
    grid-row: auto;
  }
  .hero-showcase__tile--lead .hero-showcase__media img {
    aspect-ratio: 4 / 3;
  }
  .hero-showcase__tile:not(.hero-showcase__tile--lead) {
    display: none;
  }
}

@media (min-width: 1080px) {
  /* عمود العرض يصير أعرض: ٠٫٦٥fr كانت تكفي لقمر، ولا تكفي لثلاث صور. */
  .hero__grid {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
    gap: 44px;
    /* محاذاة من الأعلى لا من الوسط: العمود الأيمن (النصّ) يحدّد ارتفاع الصفّ
       في البداية، ثمّ يكبر عمود الصور عند وصولها فيُعاد توسيط النصّ فيتحرّك
       ٧٢px بعد الرسم — قياس CLS أظهر 0.066 بسببه. من الأعلى يبقى النصّ حيث
       رُسم، فلا انزياح أصلاً. */
    align-items: start;
  }
  .hero__aside {
    justify-content: center;
    gap: 26px;
  }
  .hero-showcase {
    max-width: none;
  }
}

/* ==========================================================================
   R25 — «الخطوط الحمراء»: قائمة تُنهي التفاوض لا قائمة تُلاحظ.
   الفرق بين هذه الكتلة وكتلة خطوات عادية أن كل بند فيها مقبول/مرفوض: له
   اختبار عملي (ما تطلبه بالضبط) وإجراء عند الرسوب (ما تفعله فوراً). الشكل
   يعكس ذلك: مربّع محاط بإطار تحذيري خفيف، ورقم غير ذهبي متكرّر، وعنوان
   بارز، وسطرا «الاختبار» و«الإجراء» بمسمّيين صغيرين حتى يُقرأ البند كحكم
   لا كفقرة.
   ========================================================================== */
.redlines {
  margin: 2rem 0;
  padding: 26px 26px 22px;
  border: 1px solid rgba(140, 62, 74, 0.28);
  border-radius: 18px;
  background: #fdfaf4;
}

.redlines__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.22rem;
  line-height: 1.5;
  color: var(--color-plum);
}

.redlines__intro {
  margin: 0 0 18px;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--color-steel);
}

.redlines__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  counter-reset: redline;
}

.redlines__list > li {
  counter-increment: redline;
  position: relative;
  padding-inline-start: 46px;
  padding-block: 4px 14px;
  border-bottom: 1px solid rgba(140, 62, 74, 0.14);
}

.redlines__list > li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.redlines__list > li::before {
  content: counter(redline);
  position: absolute;
  inset-inline-start: 0;
  top: 2px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(140, 62, 74, 0.42);
  background: #fff;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: #8c3e4a;
}

.redlines__list h4 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--color-plum);
}

.redlines__list p {
  margin: 0 0 5px;
  font-size: 0.88rem;
  line-height: 1.8;
  color: #4b4147;
}

.redlines__list p:last-child {
  margin-bottom: 0;
}

.redlines__tag {
  display: inline-block;
  min-width: 62px;
  margin-inline-end: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #8c3e4a;
}

.redlines__note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(140, 62, 74, 0.16);
  font-size: 0.84rem;
  line-height: 1.8;
  color: var(--color-steel);
}

@media (max-width: 560px) {
  .redlines {
    padding: 20px 18px 18px;
  }
  .redlines__list > li {
    padding-inline-start: 38px;
  }
  .redlines__list > li::before {
    width: 26px;
    height: 26px;
    font-size: 0.82rem;
  }
}

/* ==========================================================================
   الجولة ٢٦ — الدائرة الخماسية: كتلة واحدة تُغلق المسار بين طبقات الموقع.
   قبلها: المقال يصل إلى التجارية والأدلة والمدونة والمنتجات ولا يعود إلى
   الرئيسية أبداً (صفر رابط من ١٣٧ مقالاً). الكتلة هنا ليست تنقّلاً مكرّراً
   بل خطوة قراءة: خمسة أسماء طبقات، ولكلٍّ سطر يشرح ما يجده القارئ فيها.
   عرضها على الحاسوب خمسة أعمدة في صفّ واحد — القارئ يقارن الطبقات بنظرة،
   لا يمرّر قائمة.
   ========================================================================== */

.loopmap {
  margin: 56px 0 8px;
  padding: 0;
}

.loopmap__inner {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fffdf8 0%, #fbf7ee 100%);
  padding: 26px 26px 22px;
}

.loopmap__kicker {
  margin: 0 0 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-gold);
}

.loopmap__lede {
  margin: 0 0 20px;
  max-width: 68ch;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--color-steel);
}

.loopmap__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

.loopmap__item {
  margin: 0;
}

.loopmap__item > a,
.loopmap__item--here {
  display: grid;
  gap: 3px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.loopmap__item > a:hover {
  border-color: rgba(200, 162, 79, 0.65);
  box-shadow: 0 6px 18px rgba(36, 26, 41, 0.07);
  transform: translateY(-1px);
}

.loopmap__name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-gold);
}

.loopmap__anchor {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-plum);
}

.loopmap__note {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--color-steel);
}

/* الطبقة التي يقف فيها القارئ: تُقرأ كحالة لا كرابط معطّل. */
.loopmap__item--here {
  background: #f4efe4;
  border-style: dashed;
  cursor: default;
}

.loopmap__item--here .loopmap__anchor {
  color: #6d5f66;
}

@media (min-width: 720px) {
  .loopmap__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  /* خمسة في صفّ واحد على الحاسوب: المقارنة تُقرأ أفقياً. */
  .loopmap__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }
  .loopmap__inner {
    padding: 30px 32px 26px;
  }
  /* العمود الخامس قد يكون وحدَه في السطر الثاني عند نقص طبقة؛ لا يتمدّد. */
  .loopmap__item > a,
  .loopmap__item--here {
    padding: 15px 14px;
  }
  .loopmap__anchor {
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loopmap__item > a:hover {
    transform: none;
  }
}

/* ==========================================================================
   الجولة ٢٦ — واجهة الحاسوب: ما يراه المشتري قبل أن يمرّر.
   ثلاثة قياسات حكمت هذه القواعد، كلّها على ١٤٤٠ بكسل:
     · شبكة الموديلات كانت تبدأ عند ١٨٢٧ بكسل — أي بعد شاشتين.
     · كتلة الأسئلة وحدها ٣٩٧٠ بكسل — خمس طول الصفحة.
     · عمود الأسئلة بعرض ٨٦٠ محاذى إلى اليمين، فيبقى ثلث الشاشة فارغاً.
   ========================================================================== */

/* شريط الموديلات في الواجهة: تسعة أرقام في سطرين، كلٌّ منها رابط. */
.hero-chips {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(200, 162, 79, 0.22);
}

.hero-chips__label {
  margin: 0 0 12px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.56);
}

.hero-chips__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-chips__item {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(200, 162, 79, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hero-chips__item:hover {
  border-color: rgba(224, 190, 126, 0.7);
  background: rgba(255, 255, 255, 0.08);
}

.hero-chips__link {
  text-decoration: none;
  color: var(--color-gold-bright);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  /* الأرقام اللاتينية داخل سياق عربي: عزل ثنائي الاتجاه يمنع انقلابها. */
  unicode-bidi: isolate;
}

.hero-chips__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-chips__type {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.62);
}

/* ارتفاع الواجهة على الشاشة العريضة: الفراغ فوق العنوان كان ١٢٨ بكسل
   من أعلى الشاشة قبل أول كلمة — والزائر لا يحتاج كل هذا التنفّس قبل أن
   يعرف ماذا نصنع. */
@media (min-width: 1180px) {
  .hero {
    padding-block: clamp(64px, 6vw, 96px);
  }
}

/* أسئلة الصفحة الرئيسية: عمودان على الحاسوب بدل عمود واحد طويل. */
.faq__head {
  margin-bottom: 8px;
}

.faq__head h2 {
  margin-bottom: 10px;
}

.faq__note {
  margin: 0 0 22px;
  max-width: 74ch;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--color-steel);
}

.faq__more {
  margin: 22px 0 0;
}

@media (min-width: 900px) {
  .faq--home {
    max-width: none;
  }
  .faq--home {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    align-items: start;
  }
  .faq--home .faq__head,
  .faq--home .faq__more {
    grid-column: 1 / -1;
  }
  /* السؤال المفتوح يفسد توازن العمودين لأن ارتفاعه يتغيّر؛ الحدّ الأدنى
     للصفّ يحفظ الإيقاع، والقارئ لا يرى قفزة عند الفتح. */
  .faq--home details {
    padding: 18px 0;
  }
}

/* ==========================================================================
   الجولة ٢٧ — القراءة الطويلة على الحاسوب: الفهرس يُرى وهو يتحرّك.
   ثلاثة قياسات على ١٤٤٠ بكسل حكمت ما يلي:
     · فهرس أحد المقالات ١٩ عنواناً وارتفاعه ٧٤٠ بكسل داخل شاشة ٩٠٠ —
       فالعنصر النشط يخرج من الجزء المرئي بعد العنوان العاشر.
     · لا إشارة بصرية إلى أن الفهرس يمرّر؛ القارئ يظنّ العدد انتهى.
     · العنوان النشط كان يُثقل بالخطّ العريض وحده، وهو تغيير ضعيف في
       قائمة من ١٩ سطراً متقارب.
   ========================================================================== */

@media (min-width: 1180px) {
  /* الفهرس المتدفّق: قناع سفلي يقول «بقي أكثر» بدل أن يقطع السطر فجأة. */
  .article-layout > .article-toc {
    /* لا `position` هنا: القاعدة السابقة تجعله لاصقاً، وإعادة تعريفها هنا
       كانت ستُلغي الالتصاق وتُعيد الفهرس إلى أعلى الصفحة. */
    /* الحافة اليمنى في RTL: الخطّ العمودي يفصل الفهرس عن عمود القراءة. */
    border-inline-start: 1px solid var(--color-line);
    padding-inline-start: 20px;
    padding-inline-end: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 162, 79, 0.45) transparent;
  }

  .article-layout > .article-toc::after {
    content: '';
    position: sticky;
    bottom: 0;
    display: block;
    height: 34px;
    margin-top: -34px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(250, 247, 240, 0), rgba(250, 247, 240, 0.96));
  }

  .article-toc a {
    transition: color 0.15s ease, background-color 0.15s ease;
  }

  /* العنصر النشط يُقرأ كسطر محدَّد لا كسطر أعرض: خلفية خفيفة وحافة ذهبية.
     القائمة الطويلة تحتاج موضعاً يُلتقط بالعين في نصف ثانية. */
  .article-toc a.is-active {
    background: rgba(200, 162, 79, 0.1);
    border-inline-start: 2px solid var(--color-gold);
    padding-inline-start: 10px;
    margin-inline-start: -12px;
  }

  /* التنفّس بين أقسام المقال: العنوان الفرعي يحتاج مسافة قبله أكثر من
     بعده، وإلا قرأ القارئ القسمين ككتلة واحدة. */
  .article-prose h2 {
    margin-top: 3.1rem;
  }

  .article-prose h2 + p {
    margin-top: 0;
  }
}

/* ==========================================================================
   الجولة ٢٨ — الإحالة داخل النصّ، وزمن القراءة في الفهرس.
   ========================================================================== */

/* الإحالة [المؤلف، السنة]: تُقرأ كعلامة لا كرابط.
   الرابط الأزرق المسطّر في منتصف سطر عربي يكسر تدفّق القراءة ويجرّ العين
   إلى أسفل الصفحة قبل أن تُكمل الجملة. الشكل المتّخذ: علامة صغيرة بلون
   الذهب، بلا تسطير، تُرى حين تُبحث عنها ولا تُرى حين تُقرأ الجملة. */
.cite {
  font-size: 0.82em;
  color: var(--color-gold);
  text-decoration: none;
  padding-inline: 1px;
  border-radius: 3px;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cite:hover {
  background: rgba(200, 162, 79, 0.14);
  color: var(--color-plum);
}

/* المرجع الذي وُصل للتوّ — يُبرز عند الوصول من الإحالة. */
.ref-list li:target {
  background: rgba(200, 162, 79, 0.12);
  border-radius: 6px;
}

/* زمن القراءة الكلّي أسفل عنوان الفهرس. */
.article-toc__meta {
  margin: -6px 0 14px;
  font-size: 0.76rem;
  color: var(--color-mist);
  font-variant-numeric: tabular-nums;
}

.article-toc__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* زمن القسم: رقم صغير في الطرف، لا يزاحم العنوان. */
.article-toc__min {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: var(--color-mist);
  opacity: 0.75;
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* شريط تقدّم القسم: خطّ رقيق في أسفل السطر يمتلئ مع التمرير داخل القسم.
   القيمة تُكتب من JS على العنصر الأب في شكل ٠…١. */
.article-toc a {
  position: relative;
}
.article-toc__prog {
  position: absolute;
  inset-inline: 0;
  bottom: 1px;
  height: 2px;
  background: transparent;
  overflow: hidden;
  border-radius: 2px;
}
.article-toc__prog i {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--color-gold);
  opacity: 0.55;
  transition: width 0.2s linear;
}

/* ==========================================================================
   الجولة ٢٩ — الكلمة الرئيسية في العنوان الفرعي، وحاسبة كلفة التأخير.
   ========================================================================== */

/* الجزء الموسوم من العنوان الفرعي: موضوع القسم.
   لا لون صارخ ولا خلفية: حجم أصغر ووزن أخفّ يكفيان لقراءته كتصنيف،
   ويحفظان للعنوان هيبته كعنوان. */
.h2-key {
  color: var(--color-plum);
  opacity: 0.72;
  font-weight: 600;
}

/* ------------------------------------------------------------------ الحاسبة */

/* الشبكة: إدخال في عمود، نتيجة في عمود — على سطح المكتب.
   السبب: المشتري يعدّل رقماً ويرى أثره في اللحظة نفسها؛ ولو وُضعت
   النتيجة تحته لاحتجّ إلى تمرير ليرى ما تغيّر. */
.dc {
  margin: 30px 0 34px;
  padding: 20px 20px 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fffdf8 0%, #faf6ee 100%);
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.dc__hint {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-steel);
}

.dc__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.dc__f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
}

.dc__l {
  font-size: 0.86rem;
  color: var(--color-ink);
  line-height: 1.35;
}

.dc__i {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex: 0 0 auto;
}

.dc__i input {
  width: 104px;
  padding: 5px 8px;
  border: 1px solid var(--color-line);
  border-radius: 7px;
  background: var(--color-paper);
  font: inherit;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--color-plum);
}

.dc__i input:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 1px;
}

.dc__i em {
  font-style: normal;
  font-size: 0.74rem;
  color: var(--color-mist);
}

.dc__out {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--color-plum);
  color: var(--color-moon);
}

.dc__rows {
  display: grid;
  gap: 2px;
}

.dc__r {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 0.84rem;
  border-bottom: 1px solid rgba(241, 233, 218, 0.10);
}

.dc__rk {
  color: var(--color-moon-dim);
  line-height: 1.4;
}

.dc__rv {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-moon);
  white-space: nowrap;
}

.dc__r--total {
  margin-top: 6px;
  padding-top: 9px;
  border-bottom: 0;
  border-top: 1px solid rgba(200, 162, 79, 0.55);
  font-size: 0.95rem;
}

.dc__r--total .dc__rv {
  color: var(--color-gold-bright);
  font-size: 1.16rem;
}

.dc__kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.dc__kpi {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(241, 233, 218, 0.07);
  text-align: center;
}

.dc__kpi b {
  font-size: 1.02rem;
  color: var(--color-gold-bright);
  font-variant-numeric: tabular-nums;
}

.dc__kpi span {
  font-size: 0.7rem;
  color: var(--color-mist);
  line-height: 1.3;
}

/* سطح المكتب: عمودان — الأرقام تُدخل يميناً وتُقرأ يساراً في مساحة واحدة. */
@media (min-width: 860px) {
  .dc {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas:
      'hint hint'
      'in out';
    gap: 18px 22px;
    padding: 22px 24px 20px;
  }
  .dc__hint {
    grid-area: hint;
  }
  .dc__in {
    grid-area: in;
    align-content: start;
  }
  .dc__out {
    grid-area: out;
  }
}

/* ==========================================================================
   الجولة ٢٩ — صفحة الأسئلة على الحاسوب: عمودان لا عمود واحد.
   ========================================================================== */

/* صفحة محور واحد تحمل اليوم واحداً وخمسين سؤالاً في عمود بعرض ٨٨٠ بكسل.
   النتيجة أن الزائر يمشي مسافة تمرير تعادل أربع شاشات ليجد سؤالاً واحداً،
   وهو ما يجعل الصفحة تُغادر قبل أن تُقرأ — والمحتوى كامل ولا أحد يصله.
   العلاج ليس تقصير الصفحة (الأسئلة هي الصفحة) بل عرضها: عمودان على
   الحاسوب يقطعون المسافة إلى النصف، ويبقى السؤال مطوياً حتى يُطلب. */
@media (min-width: 1080px) {
  .faq-hub {
    max-width: 1120px;
  }
  .faq-hub__group .faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 44px;
    align-items: start;
  }
  /* السؤال المفتوح يدفع ما يقابله في الصف نفسه فقط، لا الصفحة كلها. */
  .faq-hub__group .faq > details {
    align-self: start;
  }
  .faq-hub__group h2 {
    margin-bottom: 16px;
  }
}

/* فهرس الأسئلة: شرائح قفز إلى مجموعات الصفحة، تظهر حين تصير الصفحة
   طويلة بما يكفي لتُضيع القارئ. الروابط نصّية لا أزرار ملوّنة. */
.faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.faq-jump a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--color-plum);
  text-decoration: none;
  background: #fffdf8;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.faq-jump a:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* ==========================================================================
   الجولة ٣٠ — جداول المقارنة على الحاسوب: رأس ثابت، وملاحظة، وقائمة مراجع
   في عمودين.
   ========================================================================== */

/* ملاحظة الجدول: الاستثناء الذي لا يتّسع له صفّ.
   الشكل مقصود: ليس صندوق تحذير أصفر — الجدول مرجع لا إنذار. خطّ ذهبيّ
   رقيق على الجانب يكفي ليفصله عن المصدر الذي فوقه، ويُقرأ كحاشية عالم. */
.data-figure .data-note {
  margin: 12px 0 0;
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--color-gold);
  font-size: 0.88rem;
  line-height: 1.85;
  color: var(--color-steel);
}

/* رأس الجدول يبقى مرئياً أثناء التمرير داخل الجدول الطويل.
   سبعة صفوف بلا رأس ثابت تُنسي القارئ أيّ عمود يقرأ — وهو خطأ يُنتج
   قراءة خاطئة لا قراءة بطيئة. */
@media (min-width: 900px) {
  /* التمرير الداخليّ يُفتح للجدول الطويل فقط (تسعة صفوف وأكثر). جدول من
     أربعة صفوف بصندوق تمرير يُنتج تمريراً داخل تمرير — وهو أسوأ من
     الجدول الطويل نفسه. والصنف يُكتب في البناء (`markLongTables`) لا في
     المتصفّح: `:has()` كلّفت ٥٥٢ مللي‑ثانية من TBT على الصفحة الرئيسية. */
  .article-prose .table-scroll--long {
    max-height: 78vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .article-prose .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-paper, #fbf7ef);
    box-shadow: inset 0 -1px 0 var(--color-line);
  }
  /* الصفّ الذي تحت المؤشّر يُظلَّل تظليلاً خفيفاً جداً: العين تتبع السطر
     في جدول من أربعة أعمدة، والظلّ يمنعها من الانزلاق إلى سطر مجاور. */
  .article-prose .data-table tbody tr:hover {
    background: rgba(200, 162, 79, 0.07);
  }
  /* العمود الأول يلتصق أفقياً في الجداول العريضة: اسم البند هو المرجع
     الذي يُعاد إليه بعد كل سطر، ولا يجوز أن يخرج من الشاشة. */
  .article-prose .data-table td:first-child,
  .article-prose .data-table th:first-child {
    position: sticky;
    inset-inline-start: 0;
    background: var(--color-paper, #fbf7ef);
    z-index: 1;
  }
}

/* قائمة المراجع في عمودين على الحاسوب.
   خمسة عشر مرجعاً في عمود واحد تعني شاشة كاملة من نصّ صغير بعد نهاية
   المقال — وهي أوّل ما يُتخطّى. عمودان يجعلانها قابلة للمسح بالعين،
   والمقال يبقى مقروءاً كوثيقة لها مصادرها لا كصفحة تنتهي فجأة. */
@media (min-width: 1080px) {
  .ref-list {
    columns: 2;
    column-gap: 40px;
  }
  .ref-list li {
    break-inside: avoid;
    margin-bottom: 10px;
  }
}

/* ==========================================================================
   الجولة ٣١ — الهاتف: الجدول يصير بطاقة، لا صندوق تمرير.
   ==========================================================================
   القياس الذي فرض هذا: الجدول المرجعيّ هنا أربعة أو خمسة أعمدة، وعرضه
   الأدنى ٥٦٠ بكسل. على شاشة ٤٨٠ بكسل يبقى نصف الجدول خارج الشاشة،
   والتمرير الأفقي يعمل لكنه يفصل الرقم عن اسم عموده — أي أن القارئ يرى
   «٥٫٠٠» بلا أن يعرف هل هي رسم أم ضريبة.

   الحلّ: كل صفّ بطاقة، وكل خليّة يحمل اسمها فوقها. الاسم مكتوب في
   `data-th` وقت البناء (tablemobile.ts) لا مستنتَجاً في المتصفّح، وCSS
   تقرأه بـ`content: attr(data-th)`.

   الشرط: `data-stack` يكتبه البناء للجداول المتوازنة الأعمدة فقط. الجدول
   غير المتوازن (خلايا مدمجة) لا يُوسم، ويبقى صندوق تمرير — لأن اسماً
   خاطئاً فوق رقم أسوأ من غياب الاسم. */

@media (max-width: 560px) {
  table[data-stack] {
    display: block;
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    font-size: 0.92rem;
  }
  table[data-stack] thead {
    display: none;
  }
  table[data-stack] tbody {
    display: block;
  }
  table[data-stack] tr {
    display: block;
    padding: 14px 0 8px;
    border-bottom: 1px solid var(--color-line);
  }
  table[data-stack] tr:last-child {
    border-bottom: 0;
  }
  /* الصفّ الأوّل في كل بطاقة عنوانها: يُعرض بلا اسم عمود لأن اسمه هو
     نفسه، ويُلوَّن بلون العلامة ليفصل البطاقات عن بعضها بالعين. */
  table[data-stack] td:first-child {
    display: block;
    margin-bottom: 6px;
    padding: 0;
    border: 0;
    font-weight: 700;
    color: var(--color-plum);
  }
  table[data-stack] td:first-child::before {
    display: none;
  }
  table[data-stack] td {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    border: 0;
    line-height: 1.75;
    overflow-wrap: anywhere;
  }
  table[data-stack] td::before {
    content: attr(data-th);
    flex: 0 0 38%;
    max-width: 38%;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-steel);
  }
  /* الخليّة صارت عموداً مرناً: النصّ المباشر يصير عنصر flex مجهولاً،
     فنمنحه العرض المتبقّي كي لا ينضغط الحرف الواحد في سطر. */
  table[data-stack] td > * {
    min-width: 0;
  }
  .data-figure {
    margin-block: 1.8rem;
  }
  .data-figure .data-sub,
  .data-figure .data-src,
  .data-figure .data-note {
    font-size: 0.84rem;
    line-height: 1.8;
  }
}

/* مساحة تنفّس أكبر للجداول على الحاسوب: الجدول مرجع يُقرأ بعد المتن،
   فلا يجوز أن يلتصق بالفقرة التي قبله. */
@media (min-width: 900px) {
  .article-prose .data-figure {
    margin-block: 2.4rem;
  }
  .article-prose .data-figure figcaption {
    font-size: 1.04rem;
    line-height: 1.65;
  }
  .article-prose .data-table td {
    line-height: 1.8;
  }
}

/* الجداول التي تعنون صفوفها بـ`th scope="row"` (النمط الصحيح دلالياً):
   عنوان الصفّ يصير عنوان البطاقة، فلا يُعرض بجانبه اسم عمود. */
@media (max-width: 560px) {
  table[data-stack] th[scope='row'] {
    display: block;
    margin-bottom: 6px;
    padding: 0;
    border: 0;
    text-align: start;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-plum);
  }
}

/* الجداول التي تعنون صفوفها بـ`th scope="row"` (النمط الصحيح دلالياً):
   عنوان الصفّ يصير عنوان البطاقة، فلا يُعرض بجانبه اسم عمود. */
@media (max-width: 560px) {
  table[data-stack] th[scope='row'] {
    display: block;
    margin-bottom: 6px;
    padding: 0;
    border: 0;
    text-align: start;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-plum);
  }
}

/* ==========================================================================
   R32 — العرض الضيّق (٣٢٠–٣٧٥): إزالة الفائض الأفقي في حاسبة التأخير.
   ==========================================================================
   القياس الذي فرض هذا: عند ٣٢٠ بكسل كان `document.scrollWidth` يساوي ٣٨٠
   في كل صفحة مقال — أي أن الصفحة تُزيح ٦٠ بكسل أفقياً بلا أن يظهر شيء
   مقطوع. والسبب لم يكن الجداول (صارت بطاقات) بل صندوق نتائج الحاسبة:
   صفوفه flex وفيها قيمة `white-space: nowrap`، ومؤشّراته عمودان، فمجموع
   عرض القيمة والاسم يتجاوز الحاوية فينضغط الاسم ثم يفيض.

   والقاعدة المستعملة هنا ليست `overflow-x: hidden` — ذلك يخفي الفائض لا
   يصلحه، ويقصّ الرقم بدل أن يعيد ترتيبه. القاعدة: اسمح للاسم بالتقلّص،
   واسمح للصفّ بالانكسار سطراً، واجعل المؤشّرين عموداً واحداً تحت ٤٢٠. */

.dc__r,
.dc__kpi,
.dc__out,
.dc__rows {
  min-width: 0;
}

.dc__rk {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dc__r {
  flex-wrap: wrap;
  gap: 4px 8px;
}

.dc__rv {
  margin-inline-start: auto;
}

@media (max-width: 420px) {
  .dc__kpis {
    grid-template-columns: minmax(0, 1fr);
  }
  .dc__out {
    padding: 12px 12px 10px;
  }
  .dc {
    padding: 16px 14px 14px;
  }
  .dc__i input {
    width: 88px;
  }
  .dc__f {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ==========================================================================
   R32 — العرض الضيّق (٣٢٠–٣٧٥): إزالة الفائض الأفقي في حاسبة التأخير.
   ==========================================================================
   القياس الذي فرض هذا: عند ٣٢٠ بكسل كان `document.scrollWidth` يساوي ٣٨٠
   في كل صفحة مقال — أي أن الصفحة تُزيح ٦٠ بكسل أفقياً بلا أن يظهر شيء
   مقطوع. والسبب لم يكن الجداول (صارت بطاقات) بل صندوق نتائج الحاسبة:
   صفوفه flex وفيها قيمة `white-space: nowrap`، ومؤشّراته عمودان، فمجموع
   عرض القيمة والاسم يتجاوز الحاوية فينضغط الاسم ثم يفيض.

   والقاعدة المستعملة هنا ليست `overflow-x: hidden` — ذلك يخفي الفائض لا
   يصلحه، ويقصّ الرقم بدل أن يعيد ترتيبه. القاعدة: اسمح للاسم بالتقلّص،
   واسمح للصفّ بالانكسار سطراً، واجعل المؤشّرين عموداً واحداً تحت ٤٢٠. */

.dc__r,
.dc__kpi,
.dc__out,
.dc__rows {
  min-width: 0;
}

.dc__rk {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dc__r {
  flex-wrap: wrap;
  gap: 4px 8px;
}

.dc__rv {
  margin-inline-start: auto;
}

@media (max-width: 420px) {
  .dc__kpis {
    grid-template-columns: minmax(0, 1fr);
  }
  .dc__out {
    padding: 12px 12px 10px;
  }
  .dc {
    padding: 16px 14px 14px;
  }
  .dc__i input {
    width: 88px;
  }
  .dc__f {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ==========================================================================
   R32 — تخطيط الصفوف في جداول المقال على الحاسوب.
   ==========================================================================
   السبب: جداول هذه الجولة ستّة أو سبعة صفوف وأربعة أعمدة، والصفّ الواحد
   يمتدّ على عرض ٧٠٠ بكسل وأكثر. العين تنتقل من الاسم في الطرف الأيمن إلى
   القيمة في الطرف الأيسر، وإن لم يكن للصفّ لون يفترق به عن جاره انزلقت
   إلى الصفّ التالي في منتصف الطريق.

   ولم تُستعمل `nth-child(even) td` مع لون شفّاف في العمود الأول: ذلك
   العمود ملتصق (sticky)، وخلفيته يجب أن تساوي لون الصفّ بالضبط وإلّا
   ظهر شقّ لونيّ عند التمرير. فحُسب اللون: ورقة #fbf7ef + ٤٫٥٪ ذهبيّ
   = #f9f3e8، وهو ما كُتب صريحاً في العمود الأول. */

@media (min-width: 900px) {
  .article-prose .data-table tbody tr:nth-child(even) {
    background: rgba(200, 162, 79, 0.045);
  }
  .article-prose .data-table tbody tr:nth-child(even) td:first-child,
  .article-prose .data-table tbody tr:nth-child(even) th:first-child {
    background: #f9f3e8;
  }
  .article-prose .data-table tbody tr:nth-child(even):hover {
    background: rgba(200, 162, 79, 0.09);
  }
}

/* ==========================================================================
   R32 — تخطيط الصفوف في جداول المقال على الحاسوب.
   ==========================================================================
   السبب: جداول هذه الجولة ستّة أو سبعة صفوف وأربعة أعمدة، والصفّ الواحد
   يمتدّ على عرض ٧٠٠ بكسل وأكثر. العين تنتقل من الاسم في الطرف الأيمن إلى
   القيمة في الطرف الأيسر، وإن لم يكن للصفّ لون يفترق به عن جاره انزلقت
   إلى الصفّ التالي في منتصف الطريق.

   ولم تُستعمل `nth-child(even) td` مع لون شفّاف في العمود الأول: ذلك
   العمود ملتصق (sticky)، وخلفيته يجب أن تساوي لون الصفّ بالضبط وإلّا
   ظهر شقّ لونيّ عند التمرير. فحُسب اللون: ورقة #fbf7ef + ٤٫٥٪ ذهبيّ
   = #f9f3e8، وهو ما كُتب صريحاً في العمود الأول. */

@media (min-width: 900px) {
  .article-prose .data-table tbody tr:nth-child(even) {
    background: rgba(200, 162, 79, 0.045);
  }
  .article-prose .data-table tbody tr:nth-child(even) td:first-child,
  .article-prose .data-table tbody tr:nth-child(even) th:first-child {
    background: #f9f3e8;
  }
  .article-prose .data-table tbody tr:nth-child(even):hover {
    background: rgba(200, 162, 79, 0.09);
  }
}

/* ==========================================================================
   الجولة ٣٣ — النطاق المتوسّط (٥٦١–٨٩٩): اللوحيّ، وهو النطاق الذي كان فراغاً.
   ==========================================================================
   القياس الذي فرض هذا: الموقع كان مضبوطاً على ٣٢٠–٣٧٥ (R32) وعلى ٩٠٠ فأكثر
   (R29–R31)، وبينهما ٥٦١–٨٩٩ بلا قاعدة واحدة. والقياس عند ٧٦٨ أظهر الحالة:
   جدول بخمسة أعمدة داخل حاوية ٦٦٠ بكسل — لا يفقد شيئاً لكنه يُزيح أفقياً،
   والعمود الأوّل (اسم البند) يخرج من الشاشة أوّل ما يُزاح. أي أن القارئ يفقد
   «عن أيّ بند أقرأ» وهو يقرأ الرقم — وهو أسوأ من ضيق المسافة.

   فالقاعدتان هنا ليستا تجميلاً:
   ١) تجميد العمود الأوّل على اللوحيّ: الاسم يبقى في مكانه والقياسات تتحرّك.
   ٢) الإطار الملوّن: الجدول يُزيح بلا إشارة بصرية تفصل العمود المثبَّت عن
      المتحرّك، فيبدو كأنّ الأعمدة اختلطت. الخطّ الواحد يحلّ ذلك بلا ظلّ ثقيل.
   ولم تُلمس قواعد الهاتف (≤٥٦٠) ولا الحاسوب (≥٩٠٠): كلاهما مقيس ومضبوط.
   ========================================================================== */

@media (min-width: 561px) and (max-width: 899px) {
  .article-prose .data-table th,
  .article-prose .data-table td {
    padding-inline: 10px;
  }
  /* الرأس كان ١٢٫٨ بكسل هنا و١٦ على الحاسوب: هبوط مفاجئ عند ٨٩٩ بكسل.
     الرأس هو ما يُقرأ أوّلاً في جدول مرجعيّ، فلا يجوز أن يكون أصغر عنصر فيه. */
  .article-prose .data-table thead th {
    font-size: 0.87rem;
  }
  /* الرأس كان ١٢٫٨ بكسل هنا و١٦ على الحاسوب: هبوط مفاجئ عند ٨٩٩ بكسل.
     الرأس هو ما يُقرأ أوّلاً في جدول مرجعيّ، فلا يجوز أن يكون أصغر عنصر فيه. */
  .article-prose .data-table thead th {
    font-size: 0.87rem;
  }
  /* التجميد: العمود الأوّل يلتصق بحدّ البداية (اليمين في RTL) ويبقى مرئياً. */
  .article-prose .data-table thead th:first-child,
  .article-prose .data-table tbody td:first-child,
  .article-prose .data-table tbody th:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--color-paper);
    box-shadow: inset 1px 0 0 var(--color-line);
  }
  .article-prose .data-table thead th:first-child {
    z-index: 2;
  }
  .article-prose p {
    line-height: 1.95;
  }
  .article-prose .data-figure figcaption {
    font-size: 1.02rem;
    line-height: 1.6;
  }
  .article-prose .data-figure .data-sub,
  .article-prose .data-figure .data-src,
  .article-prose .data-figure .data-note {
    font-size: 0.88rem;
    line-height: 1.85;
  }
}

/* الحاسبة: العمودان يبدآن عند ٧٠٠ لا ٨٦٠ — لأن الحاسبة في ٧٠٠–٨٦٠ كانت
   عموداً واحداً بعرض ٦٦٠ بكسل، أي سطر إدخال طويل وقيمة في الطرف الآخر.
   والفارق بين العرضين ١٦٠ بكسل كانت تُهدر كاملةً. */
@media (min-width: 700px) and (max-width: 859px) {
  .dc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'hint hint'
      'in out';
    gap: 16px 18px;
  }
  .dc__hint {
    grid-area: hint;
  }
  .dc__in {
    grid-area: in;
    align-content: start;
  }
  .dc__out {
    grid-area: out;
  }
}

/* ==========================================================================
   الجولة ٣٣ — النطاق المتوسّط (٥٦١–٨٩٩): اللوحيّ، وهو النطاق الذي كان فراغاً.
   ==========================================================================
   القياس الذي فرض هذا: الموقع كان مضبوطاً على ٣٢٠–٣٧٥ (R32) وعلى ٩٠٠ فأكثر
   (R29–R31)، وبينهما ٥٦١–٨٩٩ بلا قاعدة واحدة. والقياس عند ٧٦٨ أظهر الحالة:
   جدول بخمسة أعمدة داخل حاوية ٦٦٠ بكسل — لا يفقد شيئاً لكنه يُزيح أفقياً،
   والعمود الأوّل (اسم البند) يخرج من الشاشة أوّل ما يُزاح. أي أن القارئ يفقد
   «عن أيّ بند أقرأ» وهو يقرأ الرقم — وهو أسوأ من ضيق المسافة.

   فالقاعدتان هنا ليستا تجميلاً:
   ١) تجميد العمود الأوّل على اللوحيّ: الاسم يبقى في مكانه والقياسات تتحرّك.
   ٢) الإطار الملوّن: الجدول يُزيح بلا إشارة بصرية تفصل العمود المثبَّت عن
      المتحرّك، فيبدو كأنّ الأعمدة اختلطت. الخطّ الواحد يحلّ ذلك بلا ظلّ ثقيل.
   ولم تُلمس قواعد الهاتف (≤٥٦٠) ولا الحاسوب (≥٩٠٠): كلاهما مقيس ومضبوط.
   ========================================================================== */

@media (min-width: 561px) and (max-width: 899px) {
  .article-prose .data-table th,
  .article-prose .data-table td {
    padding-inline: 10px;
  }
  /* الرأس كان ١٢٫٨ بكسل هنا و١٦ على الحاسوب: هبوط مفاجئ عند ٨٩٩ بكسل.
     الرأس هو ما يُقرأ أوّلاً في جدول مرجعيّ، فلا يجوز أن يكون أصغر عنصر فيه. */
  .article-prose .data-table thead th {
    font-size: 0.87rem;
  }
  /* الرأس كان ١٢٫٨ بكسل هنا و١٦ على الحاسوب: هبوط مفاجئ عند ٨٩٩ بكسل.
     الرأس هو ما يُقرأ أوّلاً في جدول مرجعيّ، فلا يجوز أن يكون أصغر عنصر فيه. */
  .article-prose .data-table thead th {
    font-size: 0.87rem;
  }
  /* التجميد: العمود الأوّل يلتصق بحدّ البداية (اليمين في RTL) ويبقى مرئياً. */
  .article-prose .data-table thead th:first-child,
  .article-prose .data-table tbody td:first-child,
  .article-prose .data-table tbody th:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--color-paper);
    box-shadow: inset 1px 0 0 var(--color-line);
  }
  .article-prose .data-table thead th:first-child {
    z-index: 2;
  }
  .article-prose p {
    line-height: 1.95;
  }
  .article-prose .data-figure figcaption {
    font-size: 1.02rem;
    line-height: 1.6;
  }
  .article-prose .data-figure .data-sub,
  .article-prose .data-figure .data-src,
  .article-prose .data-figure .data-note {
    font-size: 0.88rem;
    line-height: 1.85;
  }
}

/* الحاسبة: العمودان يبدآن عند ٧٠٠ لا ٨٦٠ — لأن الحاسبة في ٧٠٠–٨٦٠ كانت
   عموداً واحداً بعرض ٦٦٠ بكسل، أي سطر إدخال طويل وقيمة في الطرف الآخر.
   والفارق بين العرضين ١٦٠ بكسل كانت تُهدر كاملةً. */
@media (min-width: 700px) and (max-width: 859px) {
  .dc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'hint hint'
      'in out';
    gap: 16px 18px;
  }
  .dc__hint {
    grid-area: hint;
  }
  .dc__in {
    grid-area: in;
    align-content: start;
  }
  .dc__out {
    grid-area: out;
  }
}

/* ==========================================================================
   [R34] سطح المكتب الضيّق: 900–1179 بكسل.
   لماذا هذا النطاق بالذات: R29–R31 ضبطت ≥1200، وR32 ضبطت 320–375، وR33
   ضبطت 561–899. وبقي النطاق الذي يجلس عليه أكثر قرار شراء فعليّ — حاسوب
   محمول 1024 أو 1152 — بلا قاعدة واحدة تخصّه. والقياس كشف عيبين لا عيباً:
     ١) الفهرس الجانبي كان يختفي كلّياً تحت 1180، فيقرأ المشتري مقالاً من
        ثلاثة آلاف كلمة بلا فهرس — أسوأ من ضيق الشاشة.
     ٢) المتن كان يُفرَض إلى ٨٦٠ بكسل، أي نحو مئة حرف في السطر بينما المدى
        المقروء ٦٥–٧٥. والعين لا تُكمل سطراً بهذا الطول فترتدّ إلى أوّله،
        وهو أوّل سبب تختلط فيه الأسطر في النصوص العربية الطويلة.
   ========================================================================== */
@media (min-width: 900px) and (max-width: 1179px) {
  :root {
    /* ٦٤٢ لا ٧٠٠: القياس الفعليّ عند ١٠٢٤ بكسل أعطى ٧٩٫٥ حرفاً في السطر
       مع ٧٠٠ — أي فوق النطاق. التعليق القديم كان يقول ٧٥–٨٠ ويعدّها مقبولة،
       والقياس أثبت أنها أعلى من المريح. ٦٤٢ تعطي نحو ٧٣. */
    --max-read-width: 642px;
  }
  .page-article .prose,
  .article-prose {
    max-width: var(--max-read-width);
  }
  .article-prose p {
    font-size: 1.04rem;
    line-height: 2.12;
    margin: 0 0 1.25rem;
  }
  .article-prose h2 {
    font-size: 1.62rem;
  }
  .article-prose li {
    margin: 0.44rem 0;
  }
}

/* من 1020 بكسل يصير في الشبكة متّسع لعمود فهرس ضيّق: ٢٠٨ + ٤٠ + ٧٠٠ = ٩٤٨،
   وهي أقلّ من عرض الحاوية عند ١٠٢٤ (نحو ١٠٠٩). فالفهرس يعود بدل أن يغيب. */
@media (min-width: 1020px) and (max-width: 1179px) {
  .article-layout {
    /* العمود الثاني مقصوص على ٧٠٠ لا على 1fr: مع 1fr في شاشة ١١٥٢ يصير
       العمود ٨٤١ والعمود المقروء ٧٠٠، فيبقى ١٤١ بكسل فراغاً ميتاً في
       الطرف. التقصير يجعل الشبكة ٩٤٨ وتتوسّط الشاشة بلا فراغ. */
    grid-template-columns: 208px minmax(0, var(--max-read-width));
    justify-content: center;
    gap: 40px;
    align-items: start;
  }
  .article-prose {
    margin-inline: 0;
    max-width: var(--max-read-width);
  }
  .article-toc {
    display: block;
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding-block: 6px 16px;
    padding-inline-end: 14px;
    border-inline-end: 1px solid var(--color-line);
  }
  .article-toc__scroll {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* الجداول في النطاق الضيّق: المتن ضاق فصارت الأعمدة أضيق، وتثبيت العمود
   الأوّل هو ما يمنع القارئ من أن يقرأ رقماً بلا أن يعرف بند أيّ سطر. */
@media (min-width: 900px) and (max-width: 1179px) {
  .article-prose .data-table thead th:first-child,
  .article-prose .data-table tbody td:first-child,
  .article-prose .data-table tbody th:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--color-paper);
    box-shadow: inset 1px 0 0 var(--color-line);
  }
}

/* ==========================================================================
   الجولة ٣٥ — المكتب أولاً: المنتج في الشاشة الأولى، والقراءة بلا فراغ.
   القياس الذي دفع هذا القسم: لقطة 1440×900 للرئيسية أظهرت أنّ الواجهة
   وحدها تشغل ٨٦٠ بكسل (حشوة ١٢٨ أعلى وأسفل + عنوان بثلاثة أسطر + شارات
   وثلاثة أسطر بيانات)، فلا يظهر موديل واحد في الشاشة الأولى. والمشتري
   التجاري يفتح الموقع على المكتب ليجيب عن سؤال واحد: ماذا تبيع؟
   ========================================================================== */

/* ١) حزام الموديلات — شبكة أفقية تحت الواجهة مباشرة */
.sku-rail {
  background: #fffdf9;
  border-block: 1px solid var(--color-line);
  padding-block: 18px 16px;
}

.sku-rail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.sku-rail__label {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-steel);
  line-height: 1.6;
}

.sku-rail__all {
  flex: none;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-plum);
  text-decoration: none;
  white-space: nowrap;
}

.sku-rail__all:hover {
  color: var(--color-gold);
}

.sku-rail__list {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(116px, 1fr);
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.sku-rail__item {
  scroll-snap-align: start;
  min-width: 0;
}

.sku-rail__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 9px 8px 11px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: #fff;
  text-decoration: none;
  color: var(--color-ink);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.sku-rail__card:hover,
.sku-rail__card:focus-visible {
  border-color: var(--color-gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.sku-rail__media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #f7f3ea, #efe8dc);
}

.sku-rail__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sku-rail__sku {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-gold);
  direction: ltr;
}

.sku-rail__name {
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: center;
  color: var(--color-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ٢) المكتب: الحشوة تُقصّ فلا يبقى فراغ بمقاس شاشة بين كل قسمين */
@media (min-width: 1180px) {
  .hero {
    padding-block: 52px 58px;
  }
  .hero h1 {
    font-size: clamp(2.2rem, 2.6vw, 2.9rem);
  }
  .hero__lede {
    font-size: 1.1rem;
    line-height: 1.75;
    max-width: 640px;
  }
  .hero__grid {
    gap: 44px;
  }
  .hero__actions {
    margin-top: 22px;
  }
  .hero__meta {
    margin-top: 18px;
    gap: 6px 22px;
  }
  .hero__facts {
    margin-top: 18px;
  }
  .hero__facts li {
    padding-block: 10px;
  }
  .sku-rail {
    padding-block: 16px 14px;
  }
  .sku-rail__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    overflow-x: visible;
    gap: 12px;
  }
  .sku-rail__label {
    font-size: 0.94rem;
  }
}

/* ٣) القراءة على المكتب: سطر أقصر ونصّ أكبر، لأن العمود 764px عند 1.12rem
   يقارب ٩٠ حرفاً في العربية — وهو أطول من المدى المريح (٦٥–٧٥). */
@media (min-width: 1440px) {
  .section {
    padding-block: 88px;
  }
  .section--tight {
    padding-block: 52px;
  }
  .article-prose p {
    font-size: 1.14rem;
    line-height: 1.95;
  }
  .article-prose > p {
    max-width: 70ch;
  }
}

/* أرقام المصنع الثلاثة تنتقل من جانب الواجهة إلى رأس الحزام على المكتب:
   الجانب كان يدفع ارتفاع الواجهة إلى ٦٤١ بكسل، وهي المانع الحقيقي لظهور
   أي موديل في الشاشة الأولى. المعلومات نفسها باقية — لكن في السطر الذي
   يليه مباشرة، لا في صندوق يطيل الطيّة. */
.sku-rail__facts {
  display: none;
}

@media (min-width: 1180px) {
  .hero {
    padding-block: 44px 48px;
  }
  .hero__facts {
    display: none;
  }
  .sku-rail__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.88rem;
    color: var(--color-steel);
  }
  .sku-rail__facts li {
    display: flex;
    align-items: baseline;
    gap: 7px;
  }
  .sku-rail__facts b {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-plum);
  }
}

/* أرقام المصنع الثلاثة تنتقل من جانب الواجهة إلى رأس الحزام على المكتب:
   الجانب كان يدفع ارتفاع الواجهة إلى ٦٤١ بكسل، وهي المانع الحقيقي لظهور
   أي موديل في الشاشة الأولى. المعلومات نفسها باقية — لكن في السطر الذي
   يليه مباشرة، لا في صندوق يطيل الطيّة. */
.sku-rail__facts {
  display: none;
}

@media (min-width: 1180px) {
  .hero {
    padding-block: 44px 48px;
  }
  .hero__facts {
    display: none;
  }
  .sku-rail__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.88rem;
    color: var(--color-steel);
  }
  .sku-rail__facts li {
    display: flex;
    align-items: baseline;
    gap: 7px;
  }
  .sku-rail__facts b {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-plum);
  }
}

/* ضبط أخير للطيّة على 1440×900: ثلاث قواعد فقط، كل واحدة تُقاس بالبكسل.
   (١) سطر «بدون سعر علني…» يُخفى على المكتب لأن نصّه مكرّر حرفياً في
       كتلة الإجابة أسفل الحزام — وإخفاؤه يوفر ٥٩ بكسل.
   (٢) حشوة الواجهة ٣٦/٤٠.
   (٣) صورة البطاقة ٤:٣ بدل ١:١ داخل الحزام فقط: البطاقة تُقرأ بالاسم
       والرقم، والقصّ المربّع يزيد الطيّة بلا فائدة معلوماتية. */
@media (min-width: 1180px) {
  .hero {
    padding-block: 36px 40px;
  }
  .hero__meta {
    display: none;
  }
  .hero__actions {
    margin-top: 18px;
  }
  .sku-rail__media {
    aspect-ratio: 4 / 3;
  }
  .sku-rail__card {
    padding: 8px 7px 9px;
    gap: 3px;
  }
}

/* كتلة «أحدث ما نُشر» على الرئيسية: عمودان على المكتب — قائمة الروابط
   في عمود، والتعليق في الآخر — لأن ستة عناوين عربية بعرض الصفحة كلها
   تُقرأ كسطور طويلة لا كقائمة. */
.latest-block__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.latest-block__head h2 {
  margin-bottom: 0;
}

.latest-block__note {
  margin-top: 16px;
  font-size: 0.92rem;
  color: var(--color-steel);
  line-height: 1.75;
}

.latest-guides {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-line);
}

.latest-guides__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--color-line);
}

.latest-guides__item a {
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--color-ink);
  text-decoration: none;
}

.latest-guides__item a:hover {
  color: var(--color-gold);
}

.latest-guides__cat {
  flex: none;
  font-size: 0.78rem;
  color: var(--color-steel);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .latest-guides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 44px;
  }
  .latest-guides__item:nth-last-child(2) {
    border-bottom: 1px solid var(--color-line);
  }
}

/* رأس الحزام على المكتب: شبكة منطقتين لا صفّاً واحداً. القياس أظهر أنّ
   الصفّ الواحد يدفع «الكتالوج الكامل» إلى سطر ثالث، فتضيع ٥٥ بكسل من
   الطيّة الثمينة. الشبكة تضع العنوان يميناً والرابط يساراً، والأرقام
   الثلاثة في سطر ثانٍ عريض. */
@media (min-width: 1180px) {
  .sku-rail__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'label link'
      'facts facts';
    gap: 4px 24px;
    align-items: baseline;
    margin-bottom: 10px;
  }
  .sku-rail__label {
    grid-area: label;
    font-size: 0.92rem;
  }
  .sku-rail__all {
    grid-area: link;
  }
  .sku-rail__facts {
    grid-area: facts;
  }
  /* الصورة تُحفظ كاملة داخل البطاقة: القطع رأسية، والقصّ المربّع كان يقطع
     رأس المنتج وقاعدته فيُقرأ كخطأ تحميل لا كصورة منتج. */
  .sku-rail__media img {
    object-fit: contain;
  }
}

/* ==========================================================================
   الجولة ٣٦ — الطبقة الوسطى تعود إلى أصلها، والمكتب يقرأ بعينه.
   ========================================================================== */

/* ١) شريط «العودة إلى نقطة البداية» — على صفحات المحاور وفهرس المدونة
   وصفحات الأسئلة. شريط واحد برابطين، لا قائمة ثانية: الخريطة الخماسية
   أسفل المتن تؤدّي دور القائمة، وهذا الشريط يذكّر بالأصل فقط. */
.backstart {
  border-block: 1px solid var(--color-line);
  background: #fbf8f2;
  padding-block: 26px 24px;
  margin-top: 8px;
}

.backstart__inner {
  display: grid;
  gap: 8px;
  max-width: 1080px;
}

.backstart__kicker {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  text-transform: none;
}

.backstart__lede {
  margin: 0;
  max-width: 74ch;
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--color-steel);
}

.backstart__list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.backstart__list a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-plum);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.16s ease, color 0.16s ease;
}

.backstart__list a::after {
  content: '←';
  font-size: 0.9em;
  opacity: 0.55;
  transition: transform 0.16s ease;
}

.backstart__list a:hover,
.backstart__list a:focus-visible {
  color: var(--color-gold);
  border-bottom-color: currentColor;
}

.backstart__list a:hover::after {
  transform: translateX(-3px);
}

@media (min-width: 900px) {
  .backstart {
    padding-block: 32px 30px;
  }
  .backstart__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'kicker kicker'
      'lede list';
    align-items: center;
    gap: 6px 40px;
  }
  .backstart__kicker {
    grid-area: kicker;
  }
  .backstart__lede {
    grid-area: lede;
  }
  .backstart__list {
    grid-area: list;
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ٢) كتلة قنوات العرض في صفحة الموديل — بعد المواصفة، قبل الخريطة. */
.sku-channel {
  background: linear-gradient(180deg, #fffdf9, #f8f2e8);
  border-top: 1px solid var(--color-line);
  padding-block: 28px 26px;
  margin-top: 8px;
}

.sku-channel__inner {
  max-width: 940px;
}

.sku-channel__kicker {
  margin: 0 0 8px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-gold);
}

.sku-channel__lede {
  margin: 0 0 14px;
  max-width: 68ch;
  font-size: 0.97rem;
  line-height: 1.8;
  color: var(--color-steel);
}

.sku-channel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sku-channel__list a {
  display: block;
  padding: 13px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: #fff;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.sku-channel__list a:hover,
.sku-channel__list a:focus-visible {
  border-color: var(--color-gold);
  transform: translateY(-1px);
}

@media (min-width: 860px) {
  .sku-channel__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

/* ٣) شريط تقدّم القراءة في الفهرس الجانبي — يُحدَّث من initTocSpy. */
.article-toc__bar {
  height: 4px;
  margin: 10px 0 6px;
  border-radius: 99px;
  background: var(--color-line);
  overflow: hidden;
}

.article-toc__barfill {
  display: block;
  height: 100%;
  width: 4%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-plum));
  transition: width 0.28s ease;
}

.article-toc__pos {
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: var(--color-steel);
}

.article-toc__pos b {
  color: var(--color-plum);
  font-weight: 700;
}

/* الوقت المتبقّي: ثانويّ بصرياً — لا ينافس «القسم ٧ من ٢٣» بل يكمله.
   الفصل بنقطة وسطية يمنع قراءتهما كجملة واحدة. */
.article-toc__left {
  color: var(--color-mist);
  white-space: nowrap;
}

.article-toc__left b {
  color: var(--color-plum);
  font-weight: 700;
}

/* ٤) المكتب: خمسة أعمدة عند ١٤٤٠ — لا أربعة.
   أربعة أعمدة لتسع بطاقات تُنتج ٤+٤+١: بطاقة وحيدة في الصفّ الثالث وعن
   يمينها (في RTL يسارها) ثلثا صفّ فارغان، وهو أسوأ من ثلاثة أعمدة كاملة.
   خمسة أعمدة تُنتج ٥+٤: صفّان بلا مقعد شاغل مفرد، والقسم يقصر ٦٤٠ بكسل
   تقريباً. والقياس أُخذ على ١٤٤٠: ٥ أعمدة × ٢٤٦ بكسل + فراغات ٢٠. */
@media (min-width: 1440px) {
  .home-sku-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
  }
  .home-sku__name {
    font-size: 0.98rem;
    line-height: 1.5;
  }
  .home-sku__spec {
    font-size: 0.8rem;
  }
}

/* ٥) القراءة الطويلة على المكتب: الفقرة الأولى بعد كل عنوان تأخذ وزناً
   أكبر بقليل، فيجد القارئ مدخلاً سريعاً لكل قسم قبل أن يقرّر الاستمرار. */
@media (min-width: 1180px) {
  .article-prose h2 + p {
    font-size: 1.16rem;
    color: var(--color-ink);
  }
}

/* ==========================================================================
   R37 — كتلة المحاور الأفقيّة، وسطر «ما نصنعه» القانونيّ، وتوحيد ارتفاع
   بطاقات الموديلات، والجداول العريضة على ١٢٨٠ فأعلى.
   ========================================================================== */

/* --- محاور أخرى على كل محور --------------------------------------------- */
.cross-axes {
  margin: 40px 0 8px;
  padding: 22px 24px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: #f8f4ec;
}
.cross-axes__kicker {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-gold);
  text-transform: none;
}
.cross-axes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px 22px;
}
.cross-axes__list li {
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(200, 162, 79, 0.22);
}
.cross-axes__list li:last-child {
  border-bottom: 0;
}
.cross-axes__list a {
  font-size: 0.92rem;
  line-height: 1.7;
  color: #4a3f47;
  text-decoration: none;
  transition: color 0.15s ease;
}
.cross-axes__list a:hover,
.cross-axes__list a:focus-visible {
  color: var(--color-plum);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (min-width: 760px) {
  .cross-axes__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1120px) {
  .cross-axes__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- سطر «ما نصنعه» على الصفحات القانونيّة ------------------------------ */
.legal-models-wrap {
  max-width: var(--max-read-width);
  margin: 0 auto;
}
.legal-models {
  margin: 0 0 40px;
  padding: 14px 18px;
  border-inline-start: 3px solid var(--color-gold);
  background: #f8f4ec;
  border-radius: 0 10px 10px 0;
  font-size: 0.9rem;
  line-height: 1.85;
  color: #5a4f57;
}
.legal-models a {
  color: var(--color-plum);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- توحيد ارتفاع بطاقات الموديلات --------------------------------------
   القياس الذي دفعها: في صفٍّ من خمس بطاقات كان عنوان كل بطاقة يشغل سطراً أو
   سطرين بحسب طول الاسم، وسطر النوع كذلك، فصار سطر الحدّ الأدنى في كل بطاقة
   على ارتفاع مختلف — والصفّ يبدو مائلاً وإن كان إطاره مستقيماً. الحلّ: تثبيت
   عنوان الاسم على سطرين، والنوع على سطرين، ودفع الحدّ الأدنى إلى الأسفل. */
.home-sku__body {
  flex: 1;
  grid-template-rows: auto minmax(0, auto) minmax(0, auto) 1fr;
  align-content: start;
}
.home-sku__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.55em * 2);
}
.home-sku__type {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.6em * 2);
}
.home-sku__moq {
  align-self: end;
}

/* --- الجداول العريضة على الحاسوب ---------------------------------------
   كانت سبعة عشر جدولاً تُنتج شريط تمرير أفقيّ داخل عمود القراءة على ١٢٨٠
   وأعلى — وهو أسوأ من ضيق الخليّة: القارئ يرى نصف الجدول ويظنّ أنّ العمود
   الأخير غائب. على الحاسوب يتّسع العمود، فيُسمح للجدول بالانضغاط: عرض أدنى
   صفر، وكسر الكلمات الطويلة، وحشو أقلّ. */
@media (min-width: 1280px) {
  .article-prose .data-table,
  .topic-deep .data-table {
    min-width: 0;
    font-size: 0.9rem;
  }
  .article-prose .data-table th,
  .article-prose .data-table td,
  .topic-deep .data-table th,
  .topic-deep .data-table td {
    padding: 10px 0 10px 12px;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .article-prose .table-scroll,
  .topic-deep .table-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

/* --- روابط المتن داخل الشاشة الأولى الداكنة ------------------------------
   القياس الذي دفعها: لقطة ١٤٤٠ على محور /guides/market-trends/ أظهرت رابطاً
   داخل فقرة الهيرو بلون الرابط العامّ (بنفسجيّ داكن) على خلفية بنفسجيّة داكنة
   — أي فرق سطوع يقارب الصفر. النصّ موجود في الشيفرة وسليم، لكنّه لا يُقرأ.
   الحلّ: ذهبيّ فاتح داخل الهيرو فقط، مع خطّ سفليّ خفيف يدلّ على أنّه رابط. */
.hero a:not(.btn):not(.text-link):not(.chip),
.hero__lede a,
.hero__meta a,
.page-head a:not(.btn):not(.text-link):not(.chip),
.page-head__lede a,
.page-head__note a,
.catalog-hero a:not(.btn):not(.text-link):not(.chip),
.catalog-hero .lede a {
  color: var(--color-gold-bright);
  text-decoration: underline;
  text-decoration-color: rgba(200, 162, 79, 0.45);
  text-underline-offset: 3px;
}
.hero a:not(.btn):not(.text-link):not(.chip):hover,
.hero__lede a:hover,
.page-head__lede a:hover,
.page-head__note a:hover,
.catalog-hero .lede a:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* --- روابط المتن داخل الشاشة الأولى الداكنة ------------------------------
   القياس الذي دفعها: لقطة ١٤٤٠ على محور /guides/market-trends/ أظهرت رابطاً
   داخل فقرة الهيرو بلون الرابط العامّ (بنفسجيّ داكن) على خلفية بنفسجيّة داكنة
   — أي فرق سطوع يقارب الصفر. النصّ موجود في الشيفرة وسليم، لكنّه لا يُقرأ.
   الحلّ: ذهبيّ فاتح داخل الهيرو فقط، مع خطّ سفليّ خفيف يدلّ على أنّه رابط. */
.hero a:not(.btn):not(.text-link):not(.chip),
.hero__lede a,
.hero__meta a,
.page-head a:not(.btn):not(.text-link):not(.chip),
.page-head__lede a,
.page-head__note a,
.catalog-hero a:not(.btn):not(.text-link):not(.chip),
.catalog-hero .lede a {
  color: var(--color-gold-bright);
  text-decoration: underline;
  text-decoration-color: rgba(200, 162, 79, 0.45);
  text-underline-offset: 3px;
}
.hero a:not(.btn):not(.text-link):not(.chip):hover,
.hero__lede a:hover,
.page-head__lede a:hover,
.page-head__note a:hover,
.catalog-hero .lede a:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   R39 — تحسين الحاسوب: ارتفاع بطاقات ثابت، زر عائم لا يغطّي المحتوى،
   وضع قراءة داكن، وتنسيق طباعة.
   ========================================================================== */

/* ١) توحيد ارتفاع بطاقة الموديل على الحاسوب.
   القياس قبل الإصلاح عند ١٤٤٠: خمسة أعمدة، عرض البطاقة ٢٣٢، ارتفاعها ٤٧٧
   (نسبة ١:٢). السبب ليس الصورة — نسبتها ٤:٣ — بل اسم الموديل: بلا حدّ
   للأسطر يتمدّد أطول اسم فيرفع الصفّ كلّه لأنّ الشبكة تسوّي ارتفاعات الصفّ.
   الحلّ: قصّ الاسم إلى سطرين، فيصبح الارتفاع محكوماً بالصورة لا بالنصّ. */
@media (min-width: 1180px) {
  .home-sku__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 2;
  }
  .home-sku__spec {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
  }
  /* أُعيدت النسبة إلى ٤:٣ بعد قياس: ٥:٤ ترفع الصورة ١٢ بكسل بلا فائدة.
     سبب ارتفاع البطاقة (٤٨٧ بكسل) ليس الصورة بل __spec: نصّ الحدّ الأدنى
     والإنتاج طويل، ويلتفّ على ١٩٤ بكسل إلى ستّة أسطر = ١٣٠ بكسل. القصّ
     بالسطر هنا يفقد معلومة تجارية (المهلة)، فتُرك النصّ كاملاً وأُصلح
     السبب القابل للإصلاح: تفاوت ارتفاع الصفوف بحسب طول الاسم. */
}

/* ٢) الزر العائم على الحاسوب: دائرة داخل الهامش، تتوسّع عند المرور.
   القياس قبل الإصلاح: الصندوق [٢٢ · ٨٢٢ · ١٤٩ · ٥٤]، والمحتوى يبدأ عند
   x=٩٧ — أي أنّ الزرّ كان يغطّي ٧٤ بكسل من عرض البطاقة اليسرى، ويُنافس
   رابطها على النقر. الهامش الحقيقي ٩٧ بكسل، فدائرة ٥٦ تدخل فيه كاملة. */
@media (min-width: 1180px) {
  .wa-float {
    width: 56px;
    height: 56px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    transition: width 0.24s ease, border-radius 0.24s ease,
      padding 0.24s ease, gap 0.24s ease, background-color 0.18s ease;
  }
  .wa-float__label {
    display: block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.24s ease, opacity 0.16s ease;
  }
  .wa-float:hover,
  .wa-float:focus-visible {
    width: auto;
    padding: 13px 20px 13px 18px;
    gap: 10px;
    border-radius: 999px;
  }
  .wa-float:hover .wa-float__label,
  .wa-float:focus-visible .wa-float__label {
    max-width: 160px;
    opacity: 1;
  }
}

/* ٣) وضع القراءة الداكن.
   لا يُطبَّق تلقائياً على كل الزوّار: الموقع تجاري وفيه صور منتجات على خلفية
   فاتحة، والتبديل القسري يقلب هوية العلامة. يُطبَّق عند طلب النظام، أو عند
   اختيار القارئ من الزرّ (data-theme="dark" على <html>). */
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) {
    color-scheme: dark;
  }
}

html[data-theme='dark'] {
  color-scheme: dark;
  --color-ink: #ece7e2;
  --color-plum: #e6c9d6;
  --color-steel: #b9b1b8;
  --color-mist: #9a9198;
  --color-line: #3a3339;
  --color-paper: #16131a;
  --color-gold: #d9b36b;
  --color-gold-bright: #ecc98a;
  --shadow-card-lg: 0 18px 44px rgba(0, 0, 0, 0.55);
}
html[data-theme='dark'] body,
html[data-theme='dark'] .site-main,
html[data-theme='dark'] main {
  background: #16131a;
  color: #ece7e2;
}
html[data-theme='dark'] .article-prose,
html[data-theme='dark'] .article-prose p,
html[data-theme='dark'] .article-prose li {
  color: #e2dbd6;
}
html[data-theme='dark'] .article-prose h2,
html[data-theme='dark'] .article-prose h3,
html[data-theme='dark'] .article-prose h4 {
  color: #f2ece7;
}
html[data-theme='dark'] .article-prose a,
html[data-theme='dark'] .article-prose a:visited {
  color: #e8b8cd;
  text-decoration-color: rgba(232, 184, 205, 0.42);
}
html[data-theme='dark'] .article-toc,
html[data-theme='dark'] .viz,
html[data-theme='dark'] .callout,
html[data-theme='dark'] .cross-axes,
html[data-theme='dark'] blockquote {
  background: #1f1a23;
  border-color: #3a3339;
}
html[data-theme='dark'] .home-sku a,
html[data-theme='dark'] .card,
html[data-theme='dark'] .loopmap a {
  background: #1f1a23;
  border-color: #3a3339;
  color: #ece7e2;
}
html[data-theme='dark'] .home-sku__media {
  background: linear-gradient(180deg, #241d29 0%, #1b1620 100%);
}
html[data-theme='dark'] .viz__track {
  background: #2c2530;
}
html[data-theme='dark'] .article-prose table {
  background: #1f1a23;
}
html[data-theme='dark'] .article-prose th {
  background: #262030;
  color: #f2ece7;
}
html[data-theme='dark'] .article-prose td {
  border-color: #3a3339;
}

/* ٤) الطباعة: صفحة نظيفة بلا تنقّل ولا أزرار عائمة.
   المشتري يطبع صفحة المواصفات ويأخذها إلى اجتماع — الهدف أن تخرج ورقة
   تُقرأ، لا لقطة من واجهة موقع. */
@media print {
  @page {
    margin: 16mm 14mm;
  }
  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .site-header,
  .site-footer,
  .wa-float,
  .article-toc,
  .loopmap,
  .sku-rail,
  .breadcrumbs,
  .article-share,
  .newsletter,
  .related-posts,
  .article-cta,
  nav,
  button,
  .btn,
  .text-link {
    display: none !important;
  }
  main,
  .wrap,
  .article-layout,
  .article-prose {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: none !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  a {
    color: #000 !important;
    text-decoration: none !important;
  }
  /* إظهار وجهة الرابط مطبوعةً — ورقة بلا روابط لا تُتحقَّق. */
  .article-prose a[href^='http']::after,
  .article-prose a[href^='/']::after {
    content: ' (' attr(href) ')';
    font-size: 0.78em;
    color: #555;
    word-break: break-all;
  }
  .article-prose h2,
  .article-prose h3 {
    break-after: avoid;
    page-break-after: avoid;
  }
  .article-prose p,
  .article-prose li,
  .article-prose tr,
  figure,
  table {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  figure,
  table {
    border: 1px solid #ccc !important;
    background: #fff !important;
  }
  .viz__fill,
  .viz__fill--plum {
    background: #777 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* --- زرّ وضع القراءة الداكن ------------------------------------------------ */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: transparent;
  color: var(--color-steel);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  text-align: start;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: rgba(200, 162, 79, 0.6);
  color: var(--color-plum);
  background: rgba(200, 162, 79, 0.06);
}
.theme-toggle__ico {
  font-size: 1rem;
  line-height: 1;
}
html[data-theme='dark'] .theme-toggle {
  color: #b9b1b8;
  border-color: #3a3339;
}

/* --- موديلات تُظهر مرحلة المحور (R39 / P2-2) ------------------------------ */
.axis-models {
  margin: 26px 0 8px;
  padding: 20px 24px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: #fbf7ef;
}
.axis-models__kicker {
  margin: 0 0 12px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-plum);
  letter-spacing: 0.01em;
}
.axis-models__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.axis-models__list li {
  padding-inline-start: 16px;
  position: relative;
  font-size: 0.94rem;
  line-height: 1.7;
}
.axis-models__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
}
.axis-models__why {
  color: var(--color-steel);
}
.axis-models__foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-line);
  font-size: 0.88rem;
}
html[data-theme='dark'] .axis-models {
  background: #1f1a23;
  border-color: #3a3339;
}

/* --- علامة الخاتمة داخل الفقرة (R39 / P0-1) ------------------------------- */
/* العنوان كان <h2>الخلاصة</h2>؛ صار علامة غليظة في أوّل الفقرة. تُحاذى مع
   بداية السطر ولا تُضاف لها مسافة سفلية، فتُقرأ كاستمرار لا كعنوان جديد. */
.prose-runin {
  padding-inline-start: 14px;
  border-inline-start: 3px solid var(--color-gold);
}
.prose-runin > strong {
  color: var(--color-plum);
  font-weight: 700;
  letter-spacing: 0.01em;
}
html[data-theme='dark'] .prose-runin {
  border-inline-start-color: var(--color-gold);
}
html[data-theme='dark'] .prose-runin > strong {
  color: #e6c9d6;
}

/* ==========================================================================
   R40 — جسر تحريري بين الطبقات الخمس + قراءة المكتب
   المشكلة: الروابط الخماسية كانت كلّها في قالب `loopmap` مكرّر على ١٧٦ صفحة.
   الجسر جملٌ داخل المتن، فيحتاج قياسَ سطرٍ مريحاً لا عرضَ بطاقة تنقّل.
   ========================================================================== */
.layer-bridge {
  margin-block: 0;
  padding-block: 42px 46px;
  background: linear-gradient(180deg, #faf6ee 0%, #f5efe4 100%);
  border-block-start: 1px solid var(--color-line);
}
.layer-bridge__inner {
  max-width: 940px;
}
.layer-bridge__title {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  line-height: 1.4;
  text-wrap: balance;
}
.layer-bridge__intro {
  margin: 0 0 18px;
  color: var(--color-steel);
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 62ch;
}
.layer-bridge__prose {
  display: grid;
  gap: 14px 34px;
}
.layer-bridge__prose p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.95;
  max-width: 66ch;
  text-wrap: pretty;
}
.layer-bridge__prose a {
  color: var(--color-plum);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.layer-bridge__prose a:hover {
  text-decoration-color: var(--color-plum);
}
html[data-theme='dark'] .layer-bridge {
  background: linear-gradient(180deg, #1f1a23 0%, #191419 100%);
  border-block-start-color: #3a3339;
}
html[data-theme='dark'] .layer-bridge__prose a {
  color: #f1e9da;
}
html[data-theme='dark'] .layer-bridge__intro {
  color: #b9aeb5;
}

.article-homeward {
  margin: 26px 0 0;
  padding: 16px 20px;
  border-inline-start: 3px solid var(--color-gold);
  background: #faf6ee;
  font-size: 0.98rem;
  line-height: 1.9;
  text-wrap: pretty;
}
.article-homeward a {
  font-weight: 700;
  text-decoration-color: var(--color-gold);
}
html[data-theme='dark'] .article-homeward {
  background: #1f1a23;
  color: #e8ded0;
}

/* قراءة المكتب: عنوان لا ينكسر بصريّاً، وانتقال إلى قسم لا يخفيه الرأس،
   وقياس سطر يبقى داخل عمود القراءة عند كلّ عرض ≥ ١١٨٠ بكسل. */
@media (min-width: 1180px) {
  .layer-bridge__inner { max-width: 1080px; }
  .layer-bridge__prose { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layer-bridge__prose p { max-width: 52ch; }
  h1, h2, h3 { text-wrap: balance; }
  h2[id], h3[id] { scroll-margin-top: 96px; }
  p { text-wrap: pretty; }
}
@media (min-width: 1440px) {
  .layer-bridge { padding-block: 52px 58px; }
  .layer-bridge__prose { gap: 16px 48px; }
  .layer-bridge__prose p { font-size: 1.05rem; line-height: 2; }
}
@media print {
  .layer-bridge, .article-homeward { display: none; }
}

/* ==========================================================================
   R41 · Sorani (ckb) pilot + language switcher + desktop product showcase.
   Both locales share the same design tokens; only the script changes.
   ========================================================================== */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  color: var(--color-gold-bright);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.lang-switch:hover,
.lang-switch:focus-visible { background: var(--color-gold); color: var(--color-plum-deep); }

.page-ckb { font-family: var(--font-body); }
.ckb-hero { padding-block: 64px 42px; }
.ckb-hero .eyebrow,
.ckb-article .eyebrow {
  color: var(--color-gold);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin: 0 0 14px;
}
.ckb-hero h1,
.ckb-article h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  line-height: 1.35;
  max-width: 26ch;
  margin: 0 0 22px;
  text-wrap: balance;
}
.ckb-hero .lead {
  font-size: 1.12rem;
  line-height: 2;
  max-width: 72ch;
  color: var(--color-ink);
}
.ckb-hero img {
  display: block;
  max-width: 360px;
  border-radius: 18px;
  margin-top: 32px;
  border: 1px solid var(--color-line);
}
.ckb-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ckb-section { padding-block: 40px; border-top: 1px solid var(--color-line); }
.ckb-section h2,
.ckb-article h2 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  margin: 0 0 18px;
  text-wrap: balance;
}
.ckb-section p,
.ckb-article p { line-height: 2; max-width: 76ch; margin: 0 0 16px; }
.ckb-section a,
.ckb-article a { color: var(--color-plum-soft); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ckb-grid { display: grid; gap: 18px; margin-top: 26px; }
.ckb-card,
.ckb-qa,
.ckb-post {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: 22px 24px;
}
.ckb-card h3,
.ckb-qa h3,
.ckb-post h3 { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 10px; }
.ckb-card p,
.ckb-qa p,
.ckb-post p { margin: 0; font-size: .97rem; }
.ckb-steps { padding-inline-start: 24px; margin: 22px 0; }
.ckb-steps li { line-height: 2; margin-bottom: 14px; max-width: 76ch; }
.ckb-list { padding-inline-start: 24px; line-height: 2; }
.ckb-list li { margin-bottom: 10px; }
.ckb-table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: .96rem; }
.ckb-table th,
.ckb-table td { border: 1px solid var(--color-line); padding: 12px 14px; text-align: start; line-height: 1.8; }
.ckb-table thead th { background: var(--color-plum-deep); color: var(--color-moon); font-weight: 700; }
.ckb-faq { display: grid; gap: 14px; }
.ckb-note { font-size: .9rem; color: var(--color-steel); }
.ckb-article { padding-block: 56px 40px; }
.ckb-article .answer-block {
  background: var(--color-paper);
  border-inline-start: 4px solid var(--color-gold);
  padding: 20px 24px;
  border-radius: 0 12px 12px 0;
  margin: 24px 0 32px;
  font-size: 1.06rem;
}
.data-figure { margin: 28px 0; }
.data-figure figcaption { font-size: .9rem; color: var(--color-steel); margin-bottom: 12px; }
.ckb-layers { background: var(--color-paper); }

/* R45 · Kurdish related-article block — gives the /ckb/ and /kmr/ articles the
   same lateral reading path the Arabic articles already have. Two columns from
   900px so a desktop reader can scan four titles in one glance. */
.ckb-related__list,
.kmr-related__list {
  display: grid;
  gap: 0 32px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.ckb-related__list li,
.kmr-related__list li {
  border-top: 1px solid var(--color-line);
  padding-block: 11px;
  font-size: .96rem;
  line-height: 1.45;
}
.ckb-related__more,
.kmr-related__more { margin-top: 14px; font-size: .9rem; }
@media (min-width: 900px) {
  .ckb-related__list,
  .kmr-related__list { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) { .ckb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) {
  .ckb-section { padding-block: 52px; }
  .ckb-section p,
  .ckb-article p { max-width: 72ch; }
  .ckb-hero { padding-block: 84px 56px; }
}
@media (prefers-color-scheme: dark) {
  .ckb-card, .ckb-qa, .ckb-post { background: #241d29; border-color: var(--color-line-dark); color: var(--color-moon); }
  .ckb-hero .lead, .ckb-section p, .ckb-article p { color: var(--color-moon-dim); }
  .ckb-section a, .ckb-article a { color: var(--color-gold-bright); }
  .ckb-article .answer-block { background: #2a2131; }
  .ckb-layers { background: #211a27; }
}
@media print { .lang-switch, .ckb-layers, .ckb-actions { display: none; } }

/* Desktop B2B product decision band — hidden on small screens because the
   9-card rail below already serves that layout; shown ≥1180px where buyers
   actually compare models side by side before requesting a quote. */
.desktop-showcase { display: none; }
@media (min-width: 1180px) {
  .desktop-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding-block: 56px 62px;
    border-top: 1px solid var(--color-line);
  }
  .showcase-visual { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .showcase-visual figure { margin: 0; }
  .showcase-visual img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    border-radius: 14px; border: 1px solid var(--color-line);
    display: block; background: #fff;
  }
  .showcase-visual figcaption { font-size: .76rem; color: var(--color-steel); margin-top: 7px; text-align: center; }
  .showcase-head h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.2rem); text-wrap: balance; margin: 8px 0 14px; }
  .showcase-head p { line-height: 1.95; max-width: 56ch; }
  .showcase-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
  .showcase-links a {
    display: block; padding: 12px 14px; border: 1px solid var(--color-line);
    border-radius: 10px; font-size: .92rem; text-decoration: none;
    color: var(--color-plum-soft); background: #fff;
  }
  .showcase-links a:hover { border-color: var(--color-gold); background: var(--color-paper); }
}

/* R42 · شريط الترابط الخماسي على المكتب: يكمّل desktop-showcase بخريطة
   تنقّل صريحة بين الصفحة الرئيسية والكتالوج والصفحات التجارية والأدلة
   والمدونة. مخفي على الجوال لأن home-nav يغطّي القصد هناك. */
.desktop-hub { display: none; }
@media (min-width: 1180px) {
  .desktop-hub {
    display: block;
    padding-block: 54px 60px;
    border-top: 1px solid var(--color-line);
    background: var(--color-paper);
  }
  .desktop-hub__head { max-width: 64ch; margin-bottom: 28px; }
  .desktop-hub__head h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 2.4vw, 2.3rem); text-wrap: balance; margin: 8px 0 14px; }
  .desktop-hub__head p { line-height: 1.95; color: var(--color-steel); }
  .desktop-hub__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
  }
  .desktop-hub__card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--color-line);
    border-radius: 14px; padding: 20px 20px 18px;
    text-decoration: none; color: inherit;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .desktop-hub__card:hover {
    border-color: var(--color-gold);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(60, 32, 54, .10);
  }
  .desktop-hub__card--lead { border-color: var(--color-plum); }
  .desktop-hub__kicker {
    font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--color-plum); font-weight: 800; margin-bottom: 10px;
  }
  .desktop-hub__card h3 { font-family: var(--font-display); font-size: 1.12rem; margin: 0 0 10px; line-height: 1.4; }
  .desktop-hub__card p { line-height: 1.85; color: var(--color-steel); font-size: .92rem; margin: 0 0 14px; }
  .desktop-hub__go { margin-top: auto; font-weight: 800; color: var(--color-plum); font-size: .9rem; }
  .desktop-hub__card:hover .desktop-hub__go { color: var(--color-gold); }
}

/* R41-0b · أربعة مداخل سياقيّة في /blog/ — عمودان على المكتب. */
.hub-context__grid { display: grid; gap: 18px; margin-top: 28px; }
.hub-step {
  background: #fff; border: 1px solid var(--color-line);
  border-radius: 14px; padding: 22px 24px;
}
.hub-step h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 10px; }
.hub-step p { line-height: 2; margin: 0; }
.hub-step a { color: var(--color-plum-soft); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (min-width: 1180px) {
  .hub-context__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
  .hub-step p { max-width: 58ch; }
}
@media (prefers-color-scheme: dark) {
  .hub-step { background: #241d29; border-color: var(--color-line-dark); color: var(--color-moon); }
  .hub-step a { color: var(--color-gold-bright); }
}

/* R41-0b · مداخل مُوزَّعة داخل شبكة المقالات نفسها (midRail). تشغل
   الصفّ كاملاً كي لا تكسر أعمدة البطاقات، وتُقرأ كفاصل قرار لا كبطاقة. */
.hub-inline-rail {
  grid-column: 1 / -1;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-inline-start: 4px solid var(--color-gold);
  border-radius: 0 14px 14px 0;
  padding: 24px 26px;
  margin-block: 6px;
}
.hub-inline-rail__eyebrow {
  margin: 0 0 8px; font-size: .82rem; font-weight: 700;
  letter-spacing: .03em; color: var(--color-steel);
}
.hub-inline-rail h3 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  margin: 0 0 10px; text-wrap: balance;
}
.hub-inline-rail p { line-height: 1.95; max-width: 78ch; margin: 0; }
.hub-inline-rail__links {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  list-style: none; padding: 0; margin: 16px 0 0;
}
.hub-inline-rail__links a {
  color: var(--color-plum-soft); font-weight: 700;
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
@media (min-width: 1180px) {
  .hub-inline-rail {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: 32px; align-items: start;
  }
  .hub-inline-rail__eyebrow { grid-column: 1 / -1; }
  .hub-inline-rail__links {
    grid-column: 2; grid-row: 2 / span 2;
    flex-direction: column; margin-top: 0;
  }
}
@media (prefers-color-scheme: dark) {
  .hub-inline-rail { background: #241d29; border-color: var(--color-line-dark); color: var(--color-moon); }
  .hub-inline-rail__eyebrow { color: var(--color-moon-dim); }
  .hub-inline-rail__links a { color: var(--color-gold-bright); }
}
@media print { .hub-inline-rail { break-inside: avoid; } }

/* R41-2 · جدول «سؤال المشتري ← الصفحة» في مقالات النيّة المنصّية.
   يُقرأ كخريطة تنقّل لا كجدول بيانات، فلا يُوسَم Dataset ولا يُنسب
   إلى مصدر إحصائي: محتواه أسئلة وصفحات داخلية فقط. */
.article-prose table.buyer-map { margin-block: 1.8rem 2.4rem; }
.article-prose table.buyer-map thead th {
  background: var(--color-plum-deep); color: var(--color-moon);
}
.article-prose table.buyer-map tbody td:first-child { font-weight: 700; }
.article-prose table.buyer-map tbody td:nth-child(2) a { white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  .article-prose table.buyer-map thead th { background: #2a2131; }
}
@media print { .article-prose table.buyer-map { break-inside: avoid; } }