/* ==================================================================================================
   لمّاح — صفحة التعريف.

   الأطروحة: البيعة تكتمل داخل المتجر. فالبطل في كل قسم هو «المتجر وهو يعمل»: متجر خيالي («نَسَق»)
   بصور منتجات مصوّرة بأسلوب واحد (/landing/img، خلفيتها #f2f0ec)، ولمّاح يتحرك داخله بشكله الحقيقي.

   اللوحة: صفحة بيضاء — المنتج يعيش في متجر أبيض، والتاجر يرى لمّاح كما سيظهر عنده. البنفسجي #4f44e0
   للهوية والأفعال، والهاتف بإطاره الغامق هو ما يبرز المشهد على الأبيض.
   الحركة: مشاهد بخطوات (landing.js · data-scene) — الخطوة n تضيف .on-n للمشهد، وكل عنصر .s-n يظهر
   عندها. خارج الشاشة يتوقف المشهد، ومن يطلب تقليل الحركة يرى الحالة النهائية ثابتة.
   ================================================================================================== */

:root {
  /* الصفحة: بيضاء، لأن المنتج يعيش في متجر أبيض — التاجر يرى لمّاح كما سيظهر عنده. */
  --page:  #ffffff;
  --panel: #f3f1ed;   /* اللوحة الدافئة: من خلفية صور المنتجات نفسها، فالصورة تذوب فيها */
  --night: #1f1f1f;   /* اللوحة الداكنة = حبر الشعار (نسخة الكريمي على الأسود) */
  --cream: #faf9f2;   /* كريمي الهوية: العلامة على الأسطح الداكنة والبنفسجية */
  --faint: #85829a;   /* للكبير أو الزخرفي فقط */
  --card:  #ffffff;
  --rule:  #e6e3f0;   /* الخيط الذي يفصل الطبقات */

  --head:        #1f1f1f;   /* العناوين = حبر الشعار */
  --text-strong: #2a2738;
  --text:        #4a4760;   /* المتن: 8.9:1 على الأبيض، 7.9:1 على اللوحة الدافئة */
  --muted:       #6a677d;   /* ≥4.5:1 على الأبيض واللوحة الدافئة */

  --violet:      #4f44e0;   /* الهوية: الأزرار والتعبئة */
  --violet-press:#4338ca;
  --accent-text: #4f44e0;   /* السطر الملوّن من العنوان */
  --violet-tint: color-mix(in srgb, var(--violet) 8%, transparent);
  --close-bg: var(--violet);  /* لوحة الختام */
  --nav-bg: rgba(255, 255, 255, .94);
  --foot-bg: transparent;
  --font-body: 'Readex Pro';  /* الخطان قابلان للتغيير من /ops */
  --font-head: 'Alexandria';

  --good: #12a165;
  --bad:  #e5484d;
  --shadow: 0 1px 2px rgba(21, 19, 31, .04), 0 12px 32px -12px rgba(21, 19, 31, .12);

  /* سطح المتجر */
  --ink:   var(--head);
  --ink-2: var(--text);
  --ink-3: var(--muted);
  --paper: #fbfbfd;
  --mist:  #f4f3f8;
  --line:  #e7e5ef;
  --photo: #f2f0ec;   /* خلفية صور المنتجات */
  --bot:   #f2f0fb;

  --r-pill: 999px;
  --r-md:   12px;
  --r-lg:   18px;

  --page-w: 1180px;
  --gap-section: 120px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; background: var(--page); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--page); color: var(--text);
  font-family: var(--font-body), system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px; line-height: 1.8; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
svg { display: block; }
.wrap { max-width: var(--page-w); margin-inline: auto; padding-inline: 24px; }

h1, h2, h3, h4 { margin: 0; color: var(--head); font-weight: 600; letter-spacing: 0; line-height: 1.3; text-wrap: balance; }
h1, h2 { font-family: var(--font-head), var(--font-body), system-ui, sans-serif; }
h1 { font-size: clamp(26px, 4vw, 50px); line-height: 1.25; }
h2 { font-size: clamp(27px, 3.3vw, 44px); font-weight: 600; line-height: 1.26; }
h3 { font-size: 19px; font-weight: 500; line-height: 1.5; }
::selection { background: color-mix(in srgb, var(--violet) 18%, transparent); color: var(--head); }
p { margin: 0; }
b { font-weight: 600; }

.hl { color: var(--accent-text); }
.lede { color: var(--text); font-size: clamp(17px, 1.45vw, 19px); line-height: 1.85; text-wrap: pretty; }
.small { font-size: 14.5px; color: var(--muted); line-height: 1.75; text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; }

.badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 17px; border-radius: var(--r-pill);
  background: var(--violet-tint); color: var(--accent-text); font-size: 13.5px; font-weight: 500; line-height: 1;
  margin-block-end: 22px; border: 1px solid var(--rule);
}
.badge svg { width: 15px; height: 15px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 30px;
  border-radius: var(--r-md); font: inherit; font-size: 16px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: transform .16s var(--ease), background-color .16s ease-out, border-color .16s ease-out, color .16s ease-out;
}
.btn-sm { padding: 11px 20px; font-size: 14.5px; }
.btn-primary { background: var(--violet); color: #fff; }
.btn-primary:hover { background: var(--violet-press); }
.btn-ghost { background: transparent; color: var(--text-strong); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--accent-text); color: var(--head); }
.btn:active { transform: scale(.98); }
.btn:focus-visible, .tab:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
a { color: var(--accent-text); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }

/* ---- الترويسة ---------------------------------------------------------------------------------- */
/* شريط ممتد ملتصق بأعلى الشاشة بعرض الصفحة، كترويسة سلة، بنفس النمط على الحاسوب والجوال. كان شريطًا عائمًا
   بزوايا دائرية، وعلى الجوال كان يطفو فوق المحتوى ويغطيه. */
.nav { position: sticky; inset-block-start: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-block-end: 1px solid var(--rule); }
.nav-in { display: flex; align-items: center; gap: 28px; height: 72px; }
.nav-login { color: var(--nav-text, var(--text-strong)); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; }
.nav-login:hover { color: var(--head); }
.nav-in .btn-sm { border-radius: var(--r-pill); }
.brand { display: flex; align-items: center; text-decoration: none; color: var(--logo, var(--violet)); }
/* الشعار الرسمي قناعٌ واحد يُلوَّن بلون الهوية: بنفسجي في الشريط، حبر في الفوتر */
.wordmark {
  display: block; width: 116px; aspect-ratio: 621 / 222; background: currentColor;
  -webkit-mask: url(/brand/lammah-wordmark-brand.svg) center / contain no-repeat; mask: url(/brand/lammah-wordmark-brand.svg) center / contain no-repeat;
}
.brand-foot { color: var(--logo, var(--head)); }
footer .small { color: var(--foot-text, var(--muted)); }
footer .foot-row .small:last-child { color: var(--foot-text, var(--text-strong)); }
.brand-foot .wordmark { width: 104px; }
.nav-links { display: flex; gap: 26px; margin-inline-start: auto; }
.nav-links a { color: var(--nav-text, var(--text)); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--head); }

/* ---- الإيقاع ------------------------------------------------------------------------------------
   كل قسم شكل مختلف: لوحة داكنة، جملة كبيرة، لوحة دافئة، شريط يُسحب، عمود ثابت، نص وصورة يتبادلان،
   أرقام على خيط، ولوحة بنفسجية في الختام. الأقسام المفتوحة تتنفّس بمسافة كبيرة، واللوحات تقترب. */
.sec { padding-block: var(--gap-section); }
.sec-tight { padding-block: calc(var(--gap-section) / 2); }
.sec-panel { padding-block: 24px; }
.sec-last { padding-block-end: 72px; }
.panel { border-radius: 32px; padding: clamp(44px, 6vw, 96px) clamp(20px, 5vw, 72px); }
.panel-warm { background: var(--panel); }
.panel-ink { background: var(--night); color: #b9b6cc; }
.panel-ink h2, .panel-ink h3 { color: #fff; }
.panel-ink .lede { color: #b9b6cc; }
.panel-ink .scene-note { color: #8d8aa3; }
.head .lede { margin-block-start: 18px; max-width: 56ch; }
.head-center { text-align: center; max-width: 820px; margin-inline: auto; }
.head-center .lede { margin-inline: auto; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.head-row > h2, .head-row > .head { max-width: 640px; }
.scene-note { margin-block-start: 22px; text-align: center; font-size: 13px; color: var(--muted); }

/* ---- البطل -------------------------------------------------------------------------------------
   العنوان في الوسط، ثم المسرح بعرض الصفحة: نافذة حاسوب (اللوحة ملتصقة باليمين) وهاتف يتداخل مع زاويتها. */
.hero { padding-block: clamp(28px, 3.5vw, 44px) clamp(72px, 8vw, 112px); }
.hero-head { text-align: center; max-width: 900px; }
.hero h1 { font-size: clamp(34px, 5vw, 64px); font-weight: 600; line-height: 1.18; }
.hero .lede { max-width: 54ch; margin: 22px auto 0; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-block-start: 32px; }
.ticks { display: flex; gap: 8px 22px; flex-wrap: wrap; justify-content: center; margin-block-start: 18px; }
.tick { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--muted); }
.tick svg { width: 17px; height: 17px; color: var(--accent-text); flex: none; }
.hero-stage { position: relative; margin-block-start: clamp(28px, 3vw, 40px); padding-block-end: 56px; }
.hero-stage::before {               /* أرضية خفيفة تحت المسرح */
  content: ""; position: absolute; inset: 14% 4% 0; border-radius: 40px; background: var(--panel); z-index: 0;
}
.hero-browser { position: relative; z-index: 1; width: calc(100% - 170px); }
.hero-stage .hero-phone { position: absolute; z-index: 2; inset-block-end: 0; left: 0; width: 300px; }

/* ---- الأجهزة ------------------------------------------------------------------------------------
   كل مشهد يُرسم بمقاسه الحقيقي ثم يُصغَّر كاملًا: الهاتف 375px و الحاسوب 1280px (landing.js يضبط --s من
   عرض الإطار). فالنِّسب كلها نِسب الويدجت نفسه، لا تقريب لها. */
.phone {
  position: relative; z-index: 1; width: 300px; aspect-ratio: 330 / 690; padding: 9px;
  border-radius: 48px; background: #16141f; box-shadow: 0 30px 70px -24px rgba(21, 19, 31, .45);
}
.phone-sm { width: 270px; }
.screen { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: #fff; color: #34393f; --s: .826; }
.vp { position: absolute; inset-block-start: 0; right: 0; width: 375px; height: calc(100% / var(--s)); transform: scale(var(--s)); transform-origin: top right; overflow: hidden; }

/* متجر «نَسَق» على الجوّال: ترويسة، صورة، اسم، سعر، زر المتجر، ثم كتلة الأسئلة */
.m-store { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 0; border-block-end: 1px solid #eee; font-size: 20px; }
.m-store b { font-weight: 700; letter-spacing: -.01em; }
.m-store svg { width: 24px; height: 24px; color: #34393f; }
.m-pdp { padding: 16px; }
.m-img { height: 300px; border-radius: 14px; background: var(--photo); overflow: hidden; }
/* صور «نَسَق»: مربعة بخلفية واحدة، فتُقصّ أو تُحتوى داخل أي إطار بلا حدّ ظاهر */
.m-img img, .d-img img, .w-pdp-img img, .w-card-img img { width: 100%; height: 100%; object-fit: cover; }
.m-name { font-size: 19px; font-weight: 700; margin-block-start: 16px; line-height: 1.45; color: #1f1f1f; }
.m-price { font-size: 17px; margin-block-start: 4px; color: #1f1f1f; }
.m-atc { margin-block-start: 14px; height: 46px; border-radius: 10px; background: #2b2b2c; color: #f7f7f8; display: grid; place-items: center; font-size: 15px; font-weight: 600; }

/* ---- كتلة الأسئلة تحت المنتج (widget.css .lammah-sq*) — مقيسة حيًّا --------------------------------
   القرص 32 #1f1f1f واللمعة الفاتحة 21 · العنوان 19/700 #34393f بسطرين على الجوّال · الشرائح 12px،
   حشو 7×16، نصف قطر 18، حدّ 0.9px #34393f، وتعبئتها لون أسئلة التاجر (لنَسَق: رملي). */
.w-sq { margin-block-start: 22px; display: flex; flex-direction: column; gap: 12px; --q: #efe7da; }
.w-sq-head { display: flex; align-items: center; gap: 10px; }
.w-sq-mark { width: 32px; height: 32px; border-radius: 50%; background: #1f1f1f; display: grid; place-items: center; flex: none; }
.w-sq-mark img { width: 21px; height: 21px; }
.w-sq-title { font-size: 19px; font-weight: 700; line-height: 26px; color: #34393f; }
.d-sq .w-sq-title br { display: none; }   /* الحاسوب سطر واحد، الجوّال سطران — كما في الويدجت */
.w-sq-list { display: flex; flex-wrap: wrap; gap: 8px; }
.w-sq-chip {
  display: inline-flex; align-items: center; font-size: 12px; line-height: 16px; padding: 7px 16px; border-radius: 18px;
  background: var(--q, #efe7da); border: .9px solid #34393f; color: #1f1f1f; white-space: nowrap;
  transition: opacity .45s var(--ease), transform .25s var(--ease), filter .25s ease-out;
}

/* ---- لوحة المحادثة (widget.css) — مقيسة حيًّا ---------------------------------------------------- */
.w-sheet {                       /* الجوّال: ورقة بارتفاع الشاشة تقريبًا، زواياها العليا 24 */
  position: absolute; inset-inline: 0; inset-block-end: 0; height: 97%; z-index: 4; background: #fff;
  border-radius: 24px 24px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .14);
  display: flex; flex-direction: column; transform: translateY(102%); transition: transform .6s var(--ease);
}
.w-handle { width: 36px; height: 5px; border-radius: 99px; background: #2b2b2c; margin: 10px auto 0; flex: none; }
.w-panel {                       /* الحاسوب: لوحة بكامل الارتفاع ملاصقة لجانب المتجر */
  background: #fff; color: #34393f; display: flex; flex-direction: column; text-align: start;
}
.w-head { display: flex; align-items: center; gap: 12px; padding: 14px 24px 8px; flex: none; }
.w-sheet .w-head { padding-inline: 16px; }
.w-title { font-size: 14px; color: #8a8f98; margin-inline-end: auto; }
.w-btn { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: #34393f; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(52, 57, 63, .16); flex: none; }
.w-btn svg { width: 20px; height: 20px; }
.w-btn:last-child svg { width: 16px; height: 16px; }
.w-pdp { margin: 4px 24px 6px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 24px; border: .9px solid rgba(43, 43, 44, .1); border-radius: 16px; background: #fff; flex: none; }
.w-sheet .w-pdp { margin-inline: 12px; }
.w-pdp-img { width: 64px; height: 64px; border-radius: 12px; background: var(--photo); overflow: hidden; flex: none; }
.w-pdp-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 18px; color: #34393f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-pdp-atc { font-size: 12.5px; font-weight: 600; padding: 12px 24px; border-radius: 999px; background: #2b2b2c; color: #f7f7f8; white-space: nowrap; transition: transform .2s var(--ease), box-shadow .3s ease-out; }
.w-msgs { flex: 1; min-height: 0; overflow: hidden; padding: 12px 24px; display: flex; flex-direction: column; gap: 18px; }
.w-sheet .w-msgs { padding-inline: 22px; }
.w-div { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #8a8f98; }
.w-div::before, .w-div::after { content: ""; flex: 1; height: 1px; background: #ececef; }
.w-a { align-self: flex-start; max-width: calc(100% - 4px); padding: 4px 2px 0; font-size: 14px; line-height: 1.55; font-weight: 400; color: #34393f; white-space: pre-wrap; }
.w-a b { font-weight: 600; color: inherit; }
.w-u { align-self: flex-end; max-width: 80%; padding: 12px 16px; border-radius: 24px; font-size: 14px; line-height: 1.55; background: var(--q, #efe7da); color: #1f1f1f; transition: background-color .35s ease-out; }
.w-wait { align-self: flex-start; font-size: 14px; color: #8a8f98; padding: 4px 2px 0; }
.w-foot { flex: none; padding: 2px 0 14px; }
.w-note { font-size: 11px; color: #8a8f98; text-align: center; padding: 2px 14px 6px; }
.w-row { display: flex; align-items: center; gap: 8px; padding: 0 24px; }
.w-sheet .w-row { padding-inline: 14px; }
.w-input { flex: 1; height: 50px; border-radius: 999px; background: #f5f6fa; border: .9px solid rgba(43, 43, 44, .2); display: flex; align-items: center; padding: 0 18px; font-size: 14px; color: #8a8f98; }
.w-attach { width: 34px; height: 34px; display: grid; place-items: center; color: #8a8f98; flex: none; }
.w-attach svg { width: 18px; height: 18px; }
.w-panel-solo { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.w-panel-solo .w-msgs { padding-block: 18px; }

/* بطاقة المنتج داخل المحادثة (widget.css .lammah-catalog-tile--lean): 274 بحدّ 1px ونصف قطر 16، صورة مربعة
   على صينية، نقاط المعرض، الاسم 16/600 بسطرين، السعر 16/400، زر 240×40 بنصف قطر 24 بلون زر المتجر. */
.w-card { align-self: flex-start; width: 274px; border: 1px solid #ececef; border-radius: 16px; overflow: hidden; background: #fff; padding-block-end: 16px; display: flex; flex-direction: column; }
.w-card-img { position: relative; aspect-ratio: 1 / 1; background: var(--photo); }
.w-card-img img { object-fit: contain; }
.w-card-eye { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.w-card-eye::after { content: ""; position: absolute; inset: 10px 8px; border: 1.6px solid #2b2b2b; border-radius: 50% / 60%; }
.w-card-dots { height: 22px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.w-card-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d9d9de; }
.w-card-dots i.on { background: #34393f; }
.w-card-name { margin: 0 16px 4px; font-size: 16px; font-weight: 600; line-height: 22.4px; min-height: 44.8px; color: #34393f; }
.w-card-price { margin: 4px 16px 12px; font-size: 16px; line-height: 22.4px; color: #34393f; }
.w-card-atc { margin: 0 16px; height: 40px; border-radius: 24px; background: #2b2b2c; color: #f7f7f8; display: grid; place-items: center; font-size: 16px; }

/* إشعار الإضافة: إشعار المتجر لا لمّاح */
.toast {
  position: absolute; inset-block-start: 70px; inset-inline: 0; margin-inline: auto; width: max-content; z-index: 6;
  display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px;
  background: #fff; color: #1f1f1f; font-size: 15px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
  opacity: 0; transform: translateY(-10px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.toast svg { width: 18px; height: 18px; color: var(--good); }

/* ---- الحاسوب: نافذة المتصفح ----------------------------------------------------------------------- */
.browser { border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 70px -28px rgba(21, 19, 31, .35); overflow: hidden; }
.browser-bar { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 16px; background: #f4f3f8; border-block-end: 1px solid var(--line); direction: ltr; }
.browser-bar > span { width: 11px; height: 11px; border-radius: 50%; background: #d9d6e4; }
.browser-url { margin-inline: auto; width: 40%; height: 24px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: 12px; color: var(--muted); display: grid; place-items: center; }
.browser-view { position: relative; --s: .86; height: calc(720px * var(--s)); overflow: hidden; }
.bvp { position: absolute; inset-block-start: 0; right: 0; width: 1100px; height: 720px; transform: scale(var(--s)); transform-origin: top right; display: flex; }
.d-store { flex: 1; min-width: 0; background: #fff; color: #1f1f1f; }
.d-nav { height: 72px; display: flex; align-items: center; gap: 36px; padding: 0 40px; border-block-end: 1px solid #eee; font-size: 15px; }
.d-nav b { font-size: 24px; font-weight: 700; }
.d-nav nav { display: flex; gap: 26px; color: #4a4858; }
.d-nav-cart { margin-inline-start: auto; }
.d-nav-cart svg { width: 24px; height: 24px; }
.d-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: 32px 40px; }
.d-crumb { font-size: 13px; color: #8a8f98; }
.d-name { font-size: 26px; font-weight: 700; line-height: 1.3; color: #1f1f1f; margin-block-start: 10px; }
.d-price { font-size: 20px; margin-block-start: 8px; }
.d-atc { margin-block-start: 22px; height: 48px; border-radius: 10px; background: #2b2b2c; color: #f7f7f8; display: grid; place-items: center; font-size: 15px; font-weight: 600; }
.bvp .w-panel { width: 480px; flex: none; height: 100%; box-shadow: 0 0 40px rgba(0, 0, 0, .1); order: 2; }   /* اللوحة يسار المتجر */
.demo-body .w-card { width: 230px; }
.d-img { aspect-ratio: 1 / 1; border-radius: 16px; background: var(--photo); overflow: hidden; max-height: 580px; }
.d-desc { font-size: 15px; line-height: 1.8; color: #5f646c; margin-block-start: 14px; }
.d-swatches { display: flex; gap: 10px; margin-block-start: 18px; }
.d-swatches i { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.d-swatches i:first-child { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #1f1f1f; }
/* البطل: المعلومات يمين (تحت اللوحة حين تنفتح) والصورة يسار (يتداخل معها الهاتف) */
.d-pdp-hero { grid-template-columns: 404px 1fr; gap: 44px; }
.d-pdp-hero .d-img { aspect-ratio: auto; height: 584px; max-height: none; }
.hs-panel { position: absolute; inset-block: 0; right: 0; width: 480px; z-index: 3; box-shadow: 0 0 44px rgba(0, 0, 0, .12); transform: translateX(104%); transition: transform .6s var(--ease); }
.hero-phone .toast { inset-block-start: 14px; }
.d-toast { inset-block-start: 96px; font-size: 18px; padding: 16px 26px; }
.d-toast svg { width: 22px; height: 22px; }

/* ---- المشاهد: الخطوات ------------------------------------------------------------------------------
   الحالة الابتدائية مخفية، و.on-n تكشف .s-n. «-only» تظهر في خطوتها وحدها. */
.scene .s-1, .scene .s-2, .scene .s-3, .scene .s-4, .scene .s-5, .scene .s-6,
.scene .s-7, .scene .s-8, .scene .s-10 { opacity: 0; }
.scene .w-a.s-4, .scene .w-a.s-5, .scene .w-a.s-7, .scene .w-a.s-8, .scene .w-sq-chip.s-1, .scene .w-sq-chip.s-2, .scene .w-sq-chip.s-3 { transform: translateY(8px); }
.scene.on-1 .s-1, .scene.on-2 .s-2, .scene.on-3 .s-3, .scene.on-4 .s-4, .scene.on-5 .s-5,
.scene.on-6 .s-6, .scene.on-7 .s-7, .scene.on-8 .s-8, .scene.on-10 .s-10 { opacity: 1; transform: none; }
.scene .w-a, .scene .w-wait { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.scene.is-reset, .scene.is-reset * { transition: none !important; }
.scene .w-wait { display: none; }

/* البطل: مشهد واحد بخطوات للجهازين. الحاسوب ١–٧، الهاتف ٨–١٤ (كل .hs-n تظهر عند .on-n). */
.scene[data-scene="hero"] .hs-4, .scene[data-scene="hero"] .hs-5, .scene[data-scene="hero"] .hs-11, .scene[data-scene="hero"] .hs-12 { opacity: 0; transform: translateY(8px); }
.scene[data-scene="hero"].on-4 .hs-4, .scene[data-scene="hero"].on-5 .hs-5,
.scene[data-scene="hero"].on-11 .hs-11, .scene[data-scene="hero"].on-12 .hs-12 { opacity: 1; transform: none; }
.scene[data-scene="hero"].on-1:not(.on-2) .hs-tap1, .scene[data-scene="hero"].on-8:not(.on-9) .hs-tap2 { filter: brightness(.88); transform: scale(.95); }
.scene[data-scene="hero"].on-2 .hs-panel { transform: none; }
.scene[data-scene="hero"].on-3:not(.on-4) .hs-wait1, .scene[data-scene="hero"].on-10:not(.on-11) .hs-wait2 { display: block; opacity: 1; }
.scene[data-scene="hero"].on-6:not(.on-7) .hs-atc1, .scene[data-scene="hero"].on-13:not(.on-14) .hs-atc2 { transform: scale(.92); box-shadow: 0 0 0 6px rgba(43, 43, 44, .15); }
.scene[data-scene="hero"] .hs-toast1, .scene[data-scene="hero"] .hs-toast2 { opacity: 0; }
.scene[data-scene="hero"].on-7:not(.on-8) .hs-toast1, .scene[data-scene="hero"].on-14 .hs-toast2 { opacity: 1; transform: none; }
.scene[data-scene="hero"].on-9 .hs-sheet { transform: none; }

/* المقارنة */
.night { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.night-copy h2 { font-size: clamp(27px, 2.7vw, 38px); }
.night-copy .lede { margin-block-start: 18px; }
.night-copy .scene-note { text-align: start; margin-block-start: 28px; }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; justify-items: center; }
.panel-ink .phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 80px -30px rgba(0, 0, 0, .7); }
.vs-col { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.vs-label { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; }
.vs-label svg { width: 18px; height: 18px; }
.vs-label.bad { color: #a3a0b5; }
.vs-label.good { color: var(--cream); }
.vs .toast { inset-block-start: 128px; }

.wa-fab {
  position: absolute; inset-block-end: 26px; inset-inline-end: 18px; z-index: 3;
  display: flex; align-items: center; gap: 8px; padding: 13px 18px 13px 16px; border-radius: var(--r-pill);
  background: #25d366; color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 8px 20px rgba(37, 211, 102, .35);
  transition: transform .25s var(--ease);
}
.wa-fab svg { width: 22px; height: 22px; }
.scene[data-scene="vs"].on-1:not(.on-2) .wa-fab { transform: scale(.92); }
.wa { position: absolute; inset: 0; z-index: 4; background: #efe7dd; display: flex; flex-direction: column; transform: translateX(-104%); transition: transform .5s var(--ease); }
.scene[data-scene="vs"].on-2 .wa { transform: none; opacity: 1; }
.wa-head { display: flex; align-items: center; gap: 12px; padding: 22px 16px 14px; background: #1f6f5c; color: #fff; font-size: 16px; }
.wa-head div { display: flex; flex-direction: column; line-height: 1.4; }
.wa-av { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.wa-seen { font-size: 13px; opacity: .8; }
.wa-body { padding: 20px 14px; display: flex; flex-direction: column; gap: 14px; }
.wa-msg { align-self: flex-start; max-width: 85%; padding: 9px 12px; border-radius: 12px 12px 4px 12px; background: #d9fdd3; font-size: 15px; line-height: 1.7; color: #1b1b1b; }
.wa-msg i { display: inline-block; vertical-align: middle; margin-inline-start: 4px; color: #8a8a8a; }
.wa-msg i svg { width: 16px; height: 16px; display: inline-block; }
.wa-wait { position: relative; align-self: center; height: 26px; }
.wa-wait .w {
  position: absolute; inset-inline-start: 50%; transform: translateX(50%); white-space: nowrap; font-size: 13px;
  padding: 6px 13px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .08); color: #5a5a5a; opacity: 0; transition: opacity .3s ease-out;
}
.scene.on-3:not(.on-4) .w-3, .scene.on-4:not(.on-5) .w-4, .scene.on-5 .w-5 { opacity: 1; }
.scene.on-5 .w-5 { background: rgba(255, 122, 122, .18); color: #b33a3a; }
.gone {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(12, 10, 24, .88); color: #fff; text-align: center; transition: opacity .5s ease-out;
}
.gone svg { width: 54px; height: 54px; color: var(--bad); padding: 8px; border-radius: 50%; border: 2px solid var(--bad); }
.gone b { font-size: 21px; margin-block-start: 8px; }
.gone span { font-size: 15px; color: #c9c6da; }
.scene[data-scene="vs"] .gone { opacity: 0; pointer-events: none; }
.scene[data-scene="vs"].on-6 .gone { opacity: 1; }
.scene[data-scene="vs"].on-2 .w-sheet { transform: none; }
.scene[data-scene="vs"].on-3:not(.on-4) .w-wait.s-3-only { display: block; }
.scene[data-scene="vs"].on-6 .toast { transform: none; }
.scene[data-scene="vs"].on-1:not(.on-2) .w-sq-chip.tap { filter: brightness(.9); transform: scale(.95); }

/* بوت الواتساب مقابل لمّاح */
.botvs { margin: 88px auto 0; max-width: 940px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; background: rgba(255, 255, 255, .035); padding: 40px; }
.botvs-head { text-align: center; max-width: 58ch; margin-inline: auto; }
.botvs-head h3 { font-size: 26px; font-weight: 600; color: #fff; }
.botvs-head .small { margin-block-start: 12px; font-size: 16.5px; line-height: 1.8; color: #d6d3e2; }
.botvs-head b { color: #fff; font-weight: 600; }
/* المقارنة: عمود لمّاح شريط بنفسجي متصل من العنوان لآخر صف، وعمود البوت هادئ لكنه مقروء */
.botvs-grid { margin-block-start: 30px; display: flex; flex-direction: column; }
.bv-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr; column-gap: 18px; font-size: 15px; align-items: stretch; }
.bv-row > span { display: flex; align-items: center; padding-block: 16px; border-block-start: 1px solid rgba(255, 255, 255, .1); }
.bv-row > span:first-child { color: #fff; font-weight: 500; }
.bv-no { color: #c4c1d4; gap: 10px; }
.bv-no::before { content: ""; flex: none; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.5 5.5l7 7M12.5 5.5l-7 7' fill='none' stroke='%239e9bb0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.bv-yes { gap: 10px; padding-inline: 18px; color: #fff; font-weight: 500; background: color-mix(in srgb, var(--violet) 22%, transparent); border-block-start-color: rgba(165, 159, 251, .18) !important; }
.bv-yes::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.8 10.3l2.8 2.7 5.6-5.9' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.bv-th > span { border-block-start: 0; padding-block: 12px; font-size: 15px; font-weight: 600; }
.bv-th > span:nth-child(2) { color: #c4c1d4; }
.bv-th .bv-yes { border-radius: 16px 16px 0 0; color: #fff; }
.bv-th .bv-yes::before { display: none; }
.bv-th .bv-yes svg { width: 22px; height: 22px; color: #fff; flex: none; }
.bv-row:last-child .bv-yes { border-radius: 0 0 16px 16px; }

/* ---- لحظات البيعة: ست بطاقات على شبكة (3 × 2) بعرض الصفحة. كل بطاقة مشهد بعناصر الويدجت نفسها، ثم
   عنوان وسطر. كانت شريطًا يُسحب جانبيًا، فكانت نصف البطاقات مخفية خارج الشاشة. */
.moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-block-start: 48px; }

.moment { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 26px; background: var(--panel); border-radius: 28px; }
.moment h3 { margin: 14px 12px 0; font-size: 21px; font-weight: 500; color: var(--head); }
.moment p { margin-inline: 12px; font-size: 15.5px; line-height: 1.7; color: var(--text); }

/* المشهد: شاشة بيضاء بحجم الويدجت الحقيقي، والمحادثة تنزل لأسفلها كما في الويدجت، وأعلاها يتلاشى */
.m-scene {
  position: relative; height: 268px; padding: 18px 16px; border-radius: 20px; background: #fff; color: #34393f;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(21, 19, 31, .05), 0 16px 32px -24px rgba(21, 19, 31, .35);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34px); mask-image: linear-gradient(to bottom, transparent 0, #000 34px);
}
.m-scene-top { -webkit-mask-image: none; mask-image: none; }
.m-scene > * { flex: none; }
.m-scene .w-u, .m-scene .w-a { font-size: 13.5px; }
.m-scene .w-u { padding: 10px 14px; border-radius: 20px; }
.m-scene .w-pdp { margin: 0; padding: 6px 6px 6px 12px; gap: 10px; }
.m-scene .w-pdp-img { width: 46px; height: 46px; border-radius: 10px; }
.m-scene .w-pdp-name, .w-panel-solo .w-pdp-name { font-size: 12.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.m-scene .w-pdp-atc, .w-panel-solo .w-pdp-atc { padding: 9px 14px; font-size: 11.5px; }
.m-scene .w-div { font-size: 11.5px; }
.m-scene .w-sq { margin: 0; gap: 10px; }
.m-scene .w-sq-title { font-size: 15px; line-height: 21px; }
.m-scene .w-sq-mark { width: 28px; height: 28px; }
.m-scene .w-sq-mark img { width: 18px; height: 18px; }
.w-sq-chip.is-tap { box-shadow: 0 0 0 4px rgba(52, 57, 63, .12); }

.sc-pdp { display: flex; align-items: center; gap: 12px; padding-block-end: 14px; border-block-end: 1px solid #ececef; }
.sc-pdp .w-pdp-img { width: 72px; height: 72px; border-radius: 14px; }
.sc-pdp-t { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: #1f1f1f; }
.sc-pdp-t b { font-weight: 700; }
.w-u-photo { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding: 8px !important; }
.w-u-photo img { width: 112px; height: 112px; border-radius: 14px; object-fit: cover; background: var(--photo); }
.w-u-photo span { padding: 0 6px 2px; }
.sc-ad { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #6b7079; }
.tag-ad { font-size: 11.5px; font-weight: 600; padding: 6px 11px; border-radius: 8px; background: var(--mist); color: var(--text-strong); }
.mini-arrow { width: 16px; height: 16px; color: #8a8f98; }

/* ---- جرّبه: داخل اللوحة الدافئة، العنوان يمين والتبويبات يسار -------------------------------------- */
.demo { margin-block-start: 48px; }
.demo .browser-view { height: calc(820px * var(--s)); }
.demo .bvp { height: 820px; }
.demo-body .w-card-img { aspect-ratio: auto; height: 150px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  font: inherit; font-size: 14.5px; font-weight: 500; padding: 10px 18px; border-radius: var(--r-pill); cursor: pointer;
  background: #fff; color: var(--text-strong); border: 1px solid transparent; transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out;
}
.tab:hover { border-color: var(--head); }
.tab.on { background: var(--head); color: #fff; border-color: var(--head); }
.panel-cap { font-size: 13px; color: var(--muted); margin-block-end: 10px; }
.demo-body > * { animation: rise .45s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- عمود ثابت: العنوان يبقى مكانه والمحتوى يمر بجانبه (القيم، الأسئلة) ----------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.split-head { position: sticky; inset-block-start: 110px; }
.split-head .lede { margin-block-start: 18px; }
.split-head .btn { margin-block-start: 30px; }
.panel .split { align-items: center; }
.panel-ink.split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.panel .split-head, .panel.split .split-head { position: static; }

/* يبيع مثل أشطر بائع: أربع لقطات بيضاء داخل اللوحة الدافئة، وتحت كل وحدة السلوك وحدّه */
#sell .panel { background: transparent; padding-block: clamp(24px, 4vw, 56px); }
.sell .m-scene { box-shadow: 0 0 0 1px var(--rule), 0 16px 32px -26px rgba(21, 19, 31, .3); }
.sell-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-block-start: 52px; }
.sell { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.m-scene-sm { height: auto; min-height: 176px; -webkit-mask-image: none; mask-image: none; }
.sell figcaption { display: flex; flex-direction: column; gap: 4px; padding-inline: 6px; }
.sell figcaption b { font-size: 18px; font-weight: 500; color: var(--head); }
.sell figcaption span { font-size: 14.5px; line-height: 1.7; color: var(--text); }

/* ---- نص وصورة يتبادلان: النص في الصفحة، والمشهد في صندوق دافئ ------------------------------------- */
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.duo-rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.duo-rev .media { background: #eeedfc; }
.duo-rev .duo-copy { order: 2; }
.duo-pin { align-items: start; }
.duo-pin .duo-copy { position: sticky; inset-block-start: 140px; padding-block-start: 40px; }
.duo-copy .lede { margin-block-start: 18px; }
.media { background: var(--panel); border-radius: 32px; padding: clamp(24px, 4vw, 56px); }
.pair { display: flex; flex-direction: column; gap: 22px; }
.pair figure { margin: 0; }
.pair figure:first-child { margin-inline-end: 16%; }
.pair figure:last-child { margin-inline-start: 16%; }

/* لوحة التاجر: مثال */
.dash { background: #fff; color: var(--ink); box-shadow: var(--shadow); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dash-kpis div { padding: 14px; border-radius: 12px; background: var(--mist); display: flex; flex-direction: column; gap: 4px; }
.dash-kpis span { font-size: 12px; color: var(--ink-2); }
.dash-kpis b { font-size: 22px; font-weight: 600; color: var(--ink); }
.dash-block { padding: 16px; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 10px; }
.dash-h { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.3; }
.bar { display: grid; grid-template-columns: 9.5em 1fr 2.6em; gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.bar i { height: 8px; border-radius: 99px; background: var(--mist); position: relative; overflow: hidden; }
.bar i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); border-radius: inherit; background: var(--violet); transform-origin: right; transform: scaleX(0); transition: transform 1.2s var(--ease) .2s; }
.dash.in .bar i::after { transform: none; }
.wish { display: flex; flex-wrap: wrap; gap: 8px; }
.wish span { font-size: 12.5px; padding: 7px 12px; border-radius: var(--r-pill); background: #eeedfc; color: #3b2fdb; }
.wish b { margin-inline-start: 4px; }
.bar-n { font-size: 12px; font-weight: 500; color: var(--muted); text-align: end; font-variant-numeric: tabular-nums; }
.sc-cart { background: var(--mist); border-color: transparent; }
.sc-cart-total { font-size: 13px; font-weight: 600; color: #34393f; padding-inline: 12px; }
.dash-note { font-size: 11.5px; color: var(--ink-3); text-align: center; }

/* ---- التركيب: الخطوات متسلسلة فعلًا، فالرقم معلومة. أرقام كبيرة نحيلة على خيط واحد --------------------- */
.steps { list-style: none; padding: 0; margin: 64px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step { padding-block-start: 22px; border-block-start: 1px solid var(--head); display: flex; flex-direction: column; gap: 8px; }
.step-n { font-size: clamp(64px, 7.5vw, 112px); font-weight: 300; line-height: 1; color: var(--accent-text); margin-block-end: 18px; }
.step h3 { font-size: 21px; font-weight: 500; }
.step p { font-size: 15px; line-height: 1.75; color: var(--text); max-width: 34ch; }

/* الأسئلة */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--panel); border-radius: 16px; padding: 4px 24px; }
.faq summary { cursor: pointer; list-style: none; padding-block: 18px; color: var(--head); font-weight: 500; font-size: 16.5px; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-text); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq-a { padding-block-end: 20px; font-size: 15px; line-height: 1.85; max-width: 64ch; }

/* ---- الختام: لوحة بنفسجية، وخانة الكتابة تكتب أسئلة الزوار بنفسها --------------------------------- */
.close-card { position: relative; overflow: hidden; text-align: center; padding: clamp(56px, 8vw, 120px) 24px; border-radius: 32px; background: var(--close-bg); }
.close-card h2 { position: relative; color: var(--cream); font-size: clamp(30px, 3.6vw, 46px); }
.close-card .lede { position: relative; color: rgba(255, 255, 255, .85); margin-block: 28px 30px; }
.close-card .btn { position: relative; background: #fff; color: var(--violet); height: 56px; padding-inline: 38px; font-size: 17px; }
.close-card .btn:focus-visible { outline-color: #fff; }
.close-card .btn:hover { background: #ecebfb; }
.close-mark { position: absolute; inset-inline-end: -60px; inset-block-start: -60px; width: 320px; height: 320px; color: var(--cream); opacity: .1; }
.ask {
  position: relative; display: flex; align-items: center; gap: 12px; max-width: 520px; height: 64px; margin: 40px auto 0;
  padding-inline: 26px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); text-decoration: none;
}
.ask-text { flex: 1; min-width: 0; text-align: start; font-size: 17px; color: #fff; white-space: nowrap; overflow: hidden; }
.ask-text::after { content: ""; display: inline-block; width: 2px; height: 1.15em; margin-inline-start: 3px; vertical-align: -.2em; background: #fff; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ask-send { width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; display: grid; place-items: center; flex: none; }
.ask-send svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .ask-text::after { animation: none; } }

/* ---- أزرار بعد الأقسام الطويلة ------------------------------------------------------------------- */
.after-cta { display: flex; justify-content: center; margin-block-start: 28px; }
.duo-cta { margin-block-start: 28px; }

/* ---- التشغيل: علامة لمّاح في المركز، وما يسويه لعملائك حولها بخيوط ------------------------------- */
.connect-on { margin-block-start: 22px; font-size: 15px; color: var(--text); }
.connect-on b { color: var(--head); }
.hub { position: relative; aspect-ratio: 1.15 / 1; max-width: 640px; width: 100%; margin-inline: auto; }
.hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
/* الحركة تحكي المعنى: النقاط تخرج من لمّاح إلى ما يسويه لعملائك، والعلامة تبث موجات هادئة.
   الخطوط مرسومة من المركز إلى العنصر، فإنقاص الإزاحة يدفع النقاط للخارج؛ ١٨ = دورتان كاملتان من النمط ٤+٥،
   فتعود الحلقة لبدايتها بلا قفزة. */
.hub-lines line {
  stroke: #cdc8ea; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 4 5; stroke-linecap: round;
  animation: hub-flow 1.6s linear infinite;
}
@keyframes hub-flow { to { stroke-dashoffset: -18; } }
.hub-core {
  position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; transform: translate(-50%, -50%); border-radius: 50%;
  display: grid; place-items: center; background: var(--violet); color: var(--cream);
  box-shadow: 0 0 0 12px var(--violet-tint), 0 18px 40px -16px color-mix(in srgb, var(--violet) 60%, transparent);
}
.hub-core::before, .hub-core::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--violet) 45%, transparent); z-index: -1;
  animation: hub-pulse 2.8s cubic-bezier(.16, 1, .3, 1) infinite;
}
.hub-core::after { animation-delay: 1.4s; }
@keyframes hub-pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(2.1); opacity: 0; } }
.hub-core svg { width: 52px; height: 52px; animation: hub-glint 2.8s ease-in-out infinite; }
@keyframes hub-glint { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.08); } 24% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .hub-lines line, .hub-core::before, .hub-core::after, .hub-core svg { animation: none; }
  .hub-core::before, .hub-core::after { opacity: 0; }
}
.hub-node {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); white-space: nowrap;
  padding: 10px 16px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--rule);
  box-shadow: 0 8px 20px -14px rgba(21, 19, 31, .3); font-size: 14px; font-weight: 500; color: var(--head);
}


/* ---- اعتراض البوت داخل اللوحة الداكنة: صف كامل تحت النص والهاتفين ------------------------------- */
.night-row { grid-column: 1 / -1; margin: 32px auto 0; width: 100%; }
.panel-ink .lede b, .panel-ink .small b { color: #fff; font-weight: 500; }

/* ---- لوحة التاجر: وسم «مثال» فوقها، وأكثر المنتجات سؤالًا بصورها ------------------------------- */
.dash-tag { align-self: flex-start; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: var(--r-pill); background: var(--mist); color: var(--muted); }
.dash-prod { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; color: var(--text-strong); }
.dash-prod .w-pdp-img { width: 40px; height: 40px; border-radius: 10px; }
.dash-prod b { font-weight: 500; font-size: 12.5px; color: var(--muted); }

/* ---- التشغيل: الخطوات عمودًا بأرقام هادئة، والمحور بجانبها ------------------------------------- */
.steps-v { grid-template-columns: minmax(0, 1fr); gap: 0; margin-block-start: 32px; }
.steps-v .step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding-block: 20px; border-block-start: 1px solid var(--rule); }
.steps-v .step:first-child { border-block-start: 0; padding-block-start: 0; }
.steps-v .step-n { font-size: 44px; font-weight: 400; line-height: 1; color: var(--violet); margin: 0; }
.steps-v .step h3 { font-size: 19px; }
.steps-v .step p { margin-block-start: 4px; }

/* ---- الأسئلة داخل لوحة دافئة: البطاقات بيضاء ---------------------------------------------------- */
.panel-warm .faq details { background: #fff; }
#faq .panel.split { align-items: start; }
#faq .split-head { position: sticky; inset-block-start: 110px; }

/* ---- الختام: أسئلة عملاء تطفو حول العنوان ---------------------------------------------------- */
.q-cloud { position: absolute; inset: 0; pointer-events: none; }
.q-cloud span {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); white-space: nowrap;
  padding: 9px 16px; border-radius: var(--r-pill); font-size: 14px; color: #fff;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  animation: drift 9s ease-in-out infinite alternate; animation-delay: var(--d);
}
@keyframes drift { from { translate: 0 -6px; } to { translate: 0 6px; } }
@media (prefers-reduced-motion: reduce) { .q-cloud span { animation: none; } }

/* ---- الأسعار: على عرف صفحات أسعار Google وOpenAI وAnthropic ------------------------------------------
   صفحة فاتحة، عنوان في الوسط، ثلاث بطاقات بيضاء بخيط رفيع بلا ظل ولا توهّج. المنصوح بها بحدّ بنفسجي وزرها
   وحده ممتلئ. الإحساس التقني من الأرقام وأسماء القدرات وورقة المواصفات المرقّمة، لا من المؤثرات.
   الأرقام من billing_plans (landing.js)، والقدرات نص الصفحة لأنها في كل الباقات. */
.price-trial { display: inline-flex; align-items: center; gap: 10px; margin-block-start: 24px; padding: 10px 18px 10px 14px; border-radius: var(--r-pill); background: var(--violet-tint); color: var(--head); font-size: 15px; font-weight: 500; text-decoration: none; transition: background .2s; }
.price-trial:hover { background: color-mix(in srgb, var(--violet) 14%, transparent); }
.price-trial svg { width: 22px; height: 22px; color: var(--violet); flex: none; }
.price-trial b { font-weight: 600; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1080px; margin: 56px auto 0; }
.plans-wait { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 15px; }
.plan { display: flex; flex-direction: column; padding: 30px 28px 28px; border-radius: 20px; background: #fff; border: 1px solid rgba(31, 31, 31, .12); }
.plan-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan h3 { font-size: 26px; font-weight: 600; color: var(--head); }
.plan-badge { padding: 2px 9px; border-radius: var(--r-pill); border: 1px solid var(--violet); color: var(--violet); font-size: 12px; font-weight: 500; line-height: 1.6; }
.plan-for { margin-block-start: 6px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-block-start: 22px; }
.plan-price b { font-family: var(--font-head), var(--font-body), sans-serif; font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--head); font-variant-numeric: tabular-nums; }
.plan-price span { font-size: 14px; color: var(--muted); white-space: nowrap; }
.plan-price span strong { font-weight: 600; color: var(--head); }
.plan-cta { margin-block-start: 24px; width: 100%; justify-content: center; }
.btn-line { background: #fff; color: var(--head); border-color: rgba(31, 31, 31, .85); }
.btn-line:hover { background: var(--head); color: #fff; }
.plan-inc { margin-block-start: 26px; padding-block-start: 22px; border-block-start: 1px solid var(--rule); font-size: 14.5px; font-weight: 600; color: var(--head); }
.plan-feat { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.plan-feat li { display: flex; align-items: flex-start; gap: 10px; }
.plan-feat li::before { content: ""; flex: none; width: 16px; height: 16px; margin-block-start: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.1 3L13 4.6' fill='none' stroke='%234f44e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.plan-feat li.is-cap { color: var(--head); font-weight: 500; }
.plan-feat li.is-cap b { font-family: var(--font-head), var(--font-body), sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-feat li.is-cap + li:not(.is-cap) { margin-block-start: 6px; }
.plan.is-pick { border: 2px solid var(--violet); padding: 29px 27px 27px; }
.plans-note { max-width: 1080px; margin: 18px auto 0; font-size: 13px; color: var(--muted); text-align: center; }


/* قبل وصول الأرقام: بطاقات فارغة بنفس المقاس، فلا يقفز القسم */
.plan-skel { min-height: 420px; border-color: transparent; background: linear-gradient(100deg, #f7f6f3 30%, #fbfaf8 50%, #f7f6f3 70%) 0 0 / 300% 100%; animation: plan-skel 1.4s linear infinite; }
@keyframes plan-skel { to { background-position: -300% 0; } }
@media (prefers-reduced-motion: reduce) { .plan-skel { animation: none; } }

/* المقارنة على الجوال: هاتف واحد ومفتاح «بدون / مع» */
.vs-switch { display: none; }

footer { border-block-start: 1px solid var(--rule); padding-block: 30px; background: var(--foot-bg); }
.foot-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot-row .small:last-child { margin-inline-start: auto; color: var(--text-strong); text-decoration: none; }

/* ---- الكشف عند الوصول --------------------------------------------------------------------------- */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
}

/* ---- التخصيص: على قالب قسم «تصميم المتجر» في سلة -------------------------------------------------------
   لوحة رمادية فاتحة جدًا: النص يمين (شارة، عنوان، سطر، نقاط بأيقونات، زر)، وعلى اليسار بطاقات بيضاء عائمة
   تتداخل: الألوان، مكان الزر، معاينة المنتج، وقائمة الإعدادات. المسرح مرسوم بمقاس 600×480 ويُصغَّر
   (landing.js · fit). المعاينة تتلوّن باللون المحدد. */
.cust-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; background: #f8f8fa; }
.cust-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--violet-tint); color: var(--violet); font-size: 15px; font-weight: 600; }
.cust-pill svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cust-copy h2 { margin-block-start: 20px; }
.cust-copy .lede { margin-block-start: 12px; }
.cust-points { list-style: none; margin: 30px 0 34px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.cust-points li { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 500; color: var(--head); }
.cust-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--violet-tint); color: var(--violet); }
.cust-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* المسرح */
.cust-fit { --s: 1; position: relative; height: calc(480px * var(--s)); }
.cust-stage { --q: #f0f0bf; position: absolute; inset-block-start: 0; right: 0; width: 600px; height: 480px; transform: scale(var(--s)); transform-origin: top right; }
.cc { position: absolute; background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(21, 19, 31, .06), 0 20px 44px -24px rgba(21, 19, 31, .28); }
.cc-h { display: block; font-size: 13px; color: var(--muted); margin-block-end: 12px; }
.cc-prev { top: 24px; left: 30px; width: 262px; z-index: 1; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.cc-img { height: 120px; border-radius: 12px; background: var(--photo); overflow: hidden; display: grid; place-items: center; }
.cc-img img { height: 100%; object-fit: contain; }
.cc-name { font-size: 14px; font-weight: 600; color: var(--head); }
.cc-price { font-size: 13px; color: var(--muted); }
.cc-atc { display: block; padding: 9px; border-radius: 9px; background: #1f1f1f; color: #fff; font-size: 12.5px; font-weight: 600; text-align: center; }
.cc-prev .w-sq { --q: inherit; margin: 2px 0 0; gap: 8px; }
.cc-prev .w-sq-title { font-size: 13px; line-height: 18px; }
.cc-prev .w-sq-mark { width: 22px; height: 22px; }
.cc-prev .w-sq-mark img { width: 14px; height: 14px; }
.cc-prev .w-sq-list { gap: 6px; }
.cc-prev .w-sq-chip { font-size: 11px; padding: 5px 10px; transition: background-color .35s ease-out; }
.cc-prev .w-u { font-size: 12px; padding: 8px 12px; }
.cc-sw { top: 0; right: 0; width: 210px; z-index: 2; padding: 16px 18px 18px; }
.cc-sw .cust-sw { display: grid; grid-template-columns: repeat(3, 26px); gap: 12px 16px; justify-content: start; }
.cc-pos { top: 124px; right: 76px; width: 196px; padding: 16px; z-index: 2; }
.cc-pos .cust-pos { grid-template-columns: 1fr; }
.cc-menu { bottom: 0; right: 0; width: 280px; z-index: 3; padding: 6px 16px; }
.cc-row { display: flex; align-items: center; gap: 12px; padding-block: 11px; font-size: 13.5px; font-weight: 500; color: var(--head); }
.cc-row + .cc-row { border-block-start: 1px solid var(--rule); }
.cc-row .cust-ic { width: 28px; height: 28px; border-radius: 8px; }
.cc-row .cust-ic svg { width: 16px; height: 16px; }
.cc-chev { margin-inline-start: auto; width: 7px; height: 7px; border: solid #b4b1c2; border-width: 0 0 1.6px 1.6px; transform: rotate(45deg); }
.cc-row .cust-tog { margin-inline-start: auto; }

/* عناصر مشتركة */
.cust-sw i { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(31, 31, 31, .12); transition: box-shadow .25s ease-out; }
.cust-sw i.on { box-shadow: inset 0 0 0 1px rgba(31, 31, 31, .12), 0 0 0 2px #fff, 0 0 0 4px var(--violet); }
.cust-sw i.on::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%231f1f1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.cust-pos { display: grid; gap: 8px; }
.cust-pos b { white-space: nowrap; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--rule); font-size: 12.5px; font-weight: 500; color: var(--muted); }
.cust-pos b.on { border: 1.5px solid var(--violet); color: var(--head); }
.cust-pos i { position: relative; width: 26px; height: 18px; flex: none; border-radius: 4px; background: #f1f0f5; }
.cust-pos i::after { content: ""; position: absolute; inset-block-end: 3px; inset-inline-start: 3px; width: 6px; height: 6px; border-radius: 50%; background: #a9a6b8; }
.cust-pos b + b i::after { inset-inline-start: auto; inset-inline-end: 3px; }
.cust-pos b.on i::after { background: var(--violet); }
.cust-tog { position: relative; width: 36px; height: 21px; border-radius: 11px; background: var(--violet); }
.cust-tog::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; }

/* ---- الأحجام ------------------------------------------------------------------------------------ */
@media (max-width: 1020px) {
  #faq .split-head { position: static; }
  .cust-panel { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cust-fit { max-width: 600px; width: 100%; margin-inline: auto; }
  .moments { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .plans { gap: 12px; }
  .plan { padding: 24px 18px 22px; }
  .plan.is-pick { padding: 23px 17px 21px; }
  .plan-price b { font-size: 38px; }
  .plan-for { min-height: 3.4em; }
  .sell-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo, .duo-rev, .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .duo-rev .duo-copy { order: 0; }
  .split-head, .duo-pin .duo-copy { position: static; padding-block-start: 0; }
  .night, .panel-ink.split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .media { max-width: 680px; margin-inline: auto; width: 100%; }
  .nav-links { display: none; }
  .nav-login { margin-inline-start: auto; }
}
@media (max-width: 680px) {
  .cust-points li { font-size: 16px; }
  .plans { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-block-start: 40px; }
  .plan { padding: 26px 22px 24px; }
  .plan.is-pick { padding: 25px 21px 23px; }
  .plan-for { min-height: 0; }
  .plan-price b { font-size: 44px; }
  :root { --gap-section: 88px; }
  .wrap { padding-inline: 16px; }
  .panel { border-radius: 24px; }
  .media { border-radius: 24px; padding: 20px 14px; }
  .pair figure:first-child, .pair figure:last-child { margin-inline: 0; }
  .vs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vs-switch { display: flex; justify-content: center; gap: 4px; margin: 0 auto 18px; padding: 4px; width: max-content; border-radius: var(--r-pill); background: rgba(250, 249, 242, .08); }
  .vs-tab { font: inherit; font-size: 14px; font-weight: 500; padding: 9px 18px; border: 0; border-radius: var(--r-pill); background: transparent; color: #a3a0b5; cursor: pointer; }
  .vs-tab.on { background: var(--cream); color: var(--head); }
  .vs-label { display: none; }
  .vs[data-show="bad"] .vs-col:last-child, .vs[data-show="good"] .vs-col:first-child { display: none; }
  .vs-col { width: 100%; }
  .phone-sm { width: min(100%, 280px); border-radius: 34px; padding: 7px; }
  .phone-sm .screen { border-radius: 28px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .sell-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* الأسئلة لا تطفو حول العنوان على الجوال (لا مساحة)، فتصطف فوقه في سطرين */
  .q-cloud { position: static; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block-end: 24px; }
  .q-cloud span { position: static; transform: none; padding: 7px 13px; font-size: 12.5px; }
  .q-cloud span:nth-child(n+5) { display: none; }
  .steps { gap: 28px; margin-block-start: 36px; }
  .step { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; }
  .step-n { grid-row: span 2; font-size: 48px; margin: 0; }
  .moments { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-block-start: 32px; }
  .head-row { align-items: flex-start; }
  .ask { height: 56px; padding-inline: 18px 6px; }
  .nav-in { height: 60px; gap: 14px; }
  .nav .wordmark { width: 92px; }
  .nav-login { font-size: 14px; }
  .hub { aspect-ratio: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-block-start: 128px; }
  .hub-lines { display: none; }
  .hub-core { top: 0; transform: translate(-50%, 0); width: 84px; height: 84px; }
  .hub-core svg { width: 46px; height: 46px; }
  .hub-node { position: static; transform: none; font-size: 13.5px; padding: 9px 14px; }
  .ask-text { font-size: 15px; }
  .panel-ink.split { padding-inline: 16px; }
  .night-row { padding: 22px 14px; margin-block-start: 16px; }
  .moment p { font-size: 15px; }
  .botvs { padding: 28px 16px; }
  .bv-row { grid-template-columns: 1fr 1fr; column-gap: 10px; font-size: 14px; }
  .bv-row > span:first-child { grid-column: 1 / -1; padding-block: 16px 2px; }
  .bv-row > span:first-child + span, .bv-row > span:first-child + span + span { border-block-start: 0; padding-block-start: 8px; align-items: flex-start; }
  .bv-yes, .bv-th .bv-yes, .bv-row:last-child .bv-yes { padding: 10px 12px; border-radius: 12px; align-items: flex-start; }
  .bv-row > span { font-size: 14px; }
  .bv-th span:first-child { display: none; }
  .bv-th > span:nth-child(2), .bv-th > span:nth-child(3) { padding-block-start: 12px; }
  .dash-kpis b { font-size: 18px; }
  .bar { grid-template-columns: 8em 1fr; }
}
@media (max-width: 380px) {
  .phone { width: 100%; }
}

/* الحاسوب على شاشة صغيرة: اللوحة وحدها بمقاسها الحقيقي، لأن متجرًا بعرض 1280 مصغّرًا إلى 360 لا يُقرأ.
   وفي البطل يبقى الهاتف وحده في الوسط: الزائر على جوّاله يرى لمّاح كما سيراه عميله. */
@media (max-width: 1020px) {
  .hero-browser { display: none; }
  .hero-stage { padding-block-end: 0; display: flex; justify-content: center; }
  .hero-stage::before { inset: 18% 16px 6%; }
  .hero-stage .hero-phone { position: relative; left: auto; width: 300px; max-width: 100%; }
  .demo .browser { max-width: 520px; margin-inline: auto; }
  .bvp { width: 480px; }
  .d-store { display: none; }
  .browser-url { width: 60%; }
}
.demo-body { justify-content: flex-end; }
.w-sheet .w-foot { padding-block-end: 30px; }
.w-msgs > * { flex: none; }

/* قسم مضاف من محرّر /ops: صورته داخل الصندوق الدافئ */
.custom-media img { display: block; width: 100%; height: auto; border-radius: 18px; }

/* ── من المحرّر (/ops «الصفحة»): الشعار المرفوع، والأقسام المضافة بتصاميمها الخمسة وخلفياتها الأربع ── */
.wordmark-img { display: block; height: var(--logo-h, 40px); width: auto; max-width: 220px; object-fit: contain; }
.brand-foot .wordmark-img { height: calc(var(--logo-h, 40px) * .85); }
.wordmark { width: calc(var(--logo-h, 41.5px) * 2.797); }
.cx-head { max-width: 820px; }
.cx-head .lede { margin-block-start: 18px; }
.cx-actions { display: flex; justify-content: center; margin-block-start: 32px; }
.cx-head .cx-actions { margin-block-start: 28px; }
.cx-img { margin-block-start: 44px; }
.cx-img img, .cx-banner-img { width: 100%; height: auto; border-radius: 24px; }
.cx-banner { margin-block-start: 40px; }
.cx-banner:first-child { margin-block-start: 0; }
.cx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-block-start: 48px; }
.cx-cards:first-child { margin-block-start: 0; }
.cx-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 26px; background: var(--panel); border-radius: 28px; }
.cx-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; background: var(--photo); }
.cx-card h3 { margin: 12px 12px 0; font-size: 21px; font-weight: 500; }
.cx-card p { margin-inline: 12px; font-size: 15.5px; line-height: 1.7; color: var(--text); }
.cx-faq { max-width: 820px; margin: 40px auto 0; }
.cx-faq:first-child { margin-block-start: 0; }
.cx-tone-warm { background: var(--panel); }
.cx-tone-warm .cx-card, .cx-tone-warm .faq details { background: #fff; }
.cx-tone-ink { background: var(--night); color: #b9b6cc; }
.cx-tone-brand { background: var(--violet); color: rgba(255, 255, 255, .85); }
.cx-tone-ink :is(h2, h3, summary), .cx-tone-brand :is(h2, h3, summary) { color: #fff; }
.cx-tone-ink :is(.lede, p), .cx-tone-brand :is(.lede, p) { color: inherit; }
.cx-tone-ink .cx-card, .cx-tone-ink .faq details { background: rgba(255, 255, 255, .06); }
.cx-tone-brand .cx-card, .cx-tone-brand .faq details { background: rgba(255, 255, 255, .12); }
.cx-tone-brand .hl, .cx-tone-brand .faq summary::after { color: #fff; }
.cx-tone-brand .btn-primary { background: #fff; color: var(--violet); }
.cx-tone-brand .btn-primary:hover { background: #ecebfb; }
.cx-tone-brand .duo-rev .media, .cx-tone-ink .duo-rev .media { background: rgba(255, 255, 255, .08); }
@media (max-width: 680px) { .cx-cards { grid-template-columns: minmax(0, 1fr); } }