/* «Cairo Fallback» ليس خطاً مستقلاً: Arial بمقاس معدَّل إلى 94.66%
   ليقارب مقاييس Cairo، فلا يقفز النص حين ينتهي تحميل Cairo. */
@font-face{
  font-family:'Cairo Fallback';
  src:local('Arial'), local('Helvetica'), local('Segoe UI');
  size-adjust:94.66%;
  ascent-override:normal;
  descent-override:normal;
  line-gap-override:normal;
}

/* Layout: RTL. One locked theme per mode (no section inversions). Asymmetric split hero,
   full-bleed figure band, bento features, numbered track rows, step rail, plan comparison.
   Shape rule: panels/cards 14px, buttons/inputs 10px, chips pill. One accent (steel blue
   from the mark); green/red appear only as chart semantics. */
:root{
  --bg:#F3F6FA; --surface:#FFFFFF; --surface-2:#E9EFF6; --band:#FFFFFF;
  --fg:#0A1C30; --fg-2:#51657D; --fg-3:#7D8FA5;
  --cta:var(--accent); --cta-2:var(--accent-2); --on-cta:var(--on-accent); --done:var(--up); --vterm:#0E7490;
  /* نصّ القراءة الطويل أخفّ من العناوين: الأسود شبه التامّ يُتعب
     العين على بياضٍ ناصع في فقرةٍ كاملة. 9.67:1 — فوق AAA بفرق. */
  --prose:#33465C;
  --line:#DCE4EE; --line-2:#C9D5E3;
  --accent:#2A6AA8; --accent-2:#1E5287; --on-accent:#FFFFFF;
  --accent-wash:#E4EDF7;
  --up:#2C8A68; --dn:#BE5F3F;
  /* رقم «الدروس المتبقية» في بطاقة المستوى: أحمر غامق يُقرأ
     عدّاداً ينزل. قيس على خلفية البطاقة (--up ٩٪ فوق الأبيض)
     = 6.66:1، بدل 3.83:1 للتراكوتا السابق. */
  --count-dn:#A81A12;
  /* الأصفر: سبب القفل في صفحة الدروس */
  --gold:#8A6100; --gold-bg:#FEF7DF; --gold-line:#F0D486;
  --note-bg:#EAF7F0; --note-line:#BBE2CE; --note-title:#1B6447; --note-fg:#2E6B51;
  --warn-bg:#FDF2EC; --warn-line:#F0CDB9; --warn-title:#9A4A24; --warn-fg:#7C4B33;
  --shadow:14px 30px 60px -36px rgba(10,28,48,.45);
  --dia-1:#CFE3F5; --dia-2:#DEEAF7; --dia-3:#EEF4FB;
  --brz-1:#F0E2C4; --brz-2:#F6ECD8; --brz-3:#FBF5EA;
  --tier-chip:#FFFFFF; --tier-chip-ink:#2A6AA8; --tier-ink:#0A1C30; --tier-sub:#51657D;
  --tier-badge-bg:rgba(255,255,255,.70); --tier-badge-ink:#1E5287; --tier-badge-line:rgba(42,106,168,.26);
  --story-bg:#0C2340; --story-line:rgba(147,169,193,.18); --story-fg:#FFFFFF;
  --story-dim:#A8BED4; --story-accent:#8FBFEE; --story-chip:rgba(143,191,238,.14); --story-ph:#143254;
  --tier-edge:rgba(10,28,48,.08); --tier-cta:#2A6AA8; --tier-cta-h:#1E5287; --tier-cta-ink:#FFFFFF;
  /* Cairo لكل النصوص. ds.css يعيد تعريفها أيضاً، وتُكتب هنا كي لا
     تبقى قيمة قديمة تظهر على صفحة لم تُحمَّل فيها نظام التصميم. */
  --display:'Cairo','Cairo Fallback',system-ui,sans-serif;
  --body:'Cairo','Cairo Fallback',system-ui,sans-serif;
  /* خطٌّ واحد في الموقع كلّه. كان الرقم والرمز بخطٍّ ثانٍ
     (IBM Plex Mono) فيُقرأ كأنه من موقعٍ آخر. بقي الاسم
     --mono لأن عشرات القواعد تناديه، وصار يشير إلى كايرو.
     واصطفاف الأرقام في الجداول يأتي من tabular-nums لا من
     خطٍّ ثابت العرض. والشيفرة وحدها تبقى monospace. */
  --mono:'Cairo','Cairo Fallback',system-ui,sans-serif;
  --code:ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:'Cairo','Cairo Fallback',system-ui,sans-serif;
  --rp:14px; --rb:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0A1428; --surface:#0F1D38; --surface-2:#142749; --band:#0C1830;
  --fg:#E9F0F8; --fg-2:#93A9C1; --fg-3:#7D93AB; --prose:#D7E3F0;
  --line:rgba(130,160,220,.17); --line-2:rgba(130,160,220,.28);
  --accent:#6CA6E0; --accent-2:#8FBFEE; --on-accent:#06182B;
  --accent-wash:rgba(108,166,224,.12);
  --up:#34A274; --dn:#D97C57; --count-dn:#F87171;
  --cta:#2563EB; --cta-2:#1D4ED8; --on-cta:#FFFFFF; --done:#15803D; --vterm:#5FD0E4;
  --gold:#E8C35A; --gold-bg:rgba(232,195,90,.10); --gold-line:rgba(232,195,90,.32);
  --note-bg:rgba(73,179,138,.11); --note-line:rgba(73,179,138,.30); --note-title:#7FD3AE; --note-fg:#A6CDBB;
  --warn-bg:rgba(217,124,87,.12); --warn-line:rgba(217,124,87,.30); --warn-title:#E3A07C; --warn-fg:#CBAD9B;
  --shadow:14px 30px 60px -30px rgba(0,0,0,.7);
  --dia-1:#143A5F; --dia-2:#102B47; --dia-3:#0B2038;
  --brz-1:#473719; --brz-2:#332713; --brz-3:#24190E;
  --tier-chip:#F3F7FC; --tier-chip-ink:#2A6AA8; --tier-ink:#F2F7FC; --tier-sub:#AEC4DA;
  --tier-badge-bg:rgba(255,255,255,.12); --tier-badge-ink:#EAF2FA; --tier-badge-line:rgba(255,255,255,.24);
  --story-bg:#0F1F3D; --story-line:rgba(147,169,193,.16); --story-fg:#F2F7FC;
  --story-dim:#9FB6CE; --story-accent:#8FBFEE; --story-chip:rgba(143,191,238,.13); --story-ph:#102943;
  --tier-edge:rgba(255,255,255,.12); --tier-cta:#6CA6E0; --tier-cta-h:#8FBFEE; --tier-cta-ink:#06182B;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0A1428; --surface:#0F1D38; --surface-2:#142749; --band:#0C1830;
  --fg:#E9F0F8; --fg-2:#93A9C1; --fg-3:#7D93AB; --prose:#D7E3F0;
  --line:rgba(130,160,220,.17); --line-2:rgba(130,160,220,.28);
  --accent:#6CA6E0; --accent-2:#8FBFEE; --on-accent:#06182B;
  --accent-wash:rgba(108,166,224,.12);
  --up:#34A274; --dn:#D97C57; --count-dn:#F87171;
  --cta:#2563EB; --cta-2:#1D4ED8; --on-cta:#FFFFFF; --done:#15803D; --vterm:#5FD0E4;
  --gold:#E8C35A; --gold-bg:rgba(232,195,90,.10); --gold-line:rgba(232,195,90,.32);
  --note-bg:rgba(73,179,138,.11); --note-line:rgba(73,179,138,.30); --note-title:#7FD3AE; --note-fg:#A6CDBB;
  --warn-bg:rgba(217,124,87,.12); --warn-line:rgba(217,124,87,.30); --warn-title:#E3A07C; --warn-fg:#CBAD9B;
  --shadow:14px 30px 60px -30px rgba(0,0,0,.7);
  --dia-1:#143A5F; --dia-2:#102B47; --dia-3:#0B2038;
  --brz-1:#473719; --brz-2:#332713; --brz-3:#24190E;
  --tier-chip:#F3F7FC; --tier-chip-ink:#2A6AA8; --tier-ink:#F2F7FC; --tier-sub:#AEC4DA;
  --tier-badge-bg:rgba(255,255,255,.12); --tier-badge-ink:#EAF2FA; --tier-badge-line:rgba(255,255,255,.24);
  --story-bg:#0F1F3D; --story-line:rgba(147,169,193,.16); --story-fg:#F2F7FC;
  --story-dim:#9FB6CE; --story-accent:#8FBFEE; --story-chip:rgba(143,191,238,.13); --story-ph:#102943;
  --tier-edge:rgba(255,255,255,.12); --tier-cta:#6CA6E0; --tier-cta-h:#8FBFEE; --tier-cta-ink:#06182B;
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--body);font-size:16px;line-height:1.75;
  direction:rtl;text-align:right;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface)}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url(grain.png);background-size:140px;opacity:.5;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.28;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.ms{
  /* ٣٠٠ هنا سماكة خطّ الأيقونة لا وزن نصّ Cairo — لا تُوحَّد معه */
  font-family:'Material Symbols Rounded';font-weight:300;font-style:normal;
  font-size:22px;line-height:1;letter-spacing:normal;direction:ltr;display:inline-block;
  white-space:nowrap;font-feature-settings:'liga';font-variation-settings:'FILL' 0,'wght' 300;
  -webkit-font-smoothing:antialiased;user-select:none;
  /* الخط قد يفشل تحميله عند مستخدم فعلي، فيُعرض اسم الأيقونة نصاً.
     القيد على العرض وحده لا يكفي: النص يلتفّ ويرتفع العنصر بدل أن يتمدّد. */
  max-width:1.4em;max-height:1.4em;overflow:hidden;flex-shrink:0;
}
.ms.sm{font-size:17px}

.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.rail{
  position:relative;z-index:1;max-width:1240px;margin-inline:auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px));
}
.band{padding-block:clamp(60px,7.5vw,112px)}
.h2{font-size:clamp(27px,3.6vw,44px);letter-spacing:-.015em}
.lede{color:var(--fg-2);font-size:clamp(15px,1.4vw,17.5px);max-width:58ch;margin-top:16px}
.sec-head{margin-bottom:clamp(34px,4.5vw,56px);max-width:70ch}
.pill{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  color:var(--accent);background:var(--accent-wash);border-radius:999px;padding:6px 15px;margin-bottom:18px;
  letter-spacing:.01em;
}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--body);font-size:14.5px;font-weight:600;white-space:nowrap;
  padding:12px 24px;border-radius:var(--rb);border:1px solid transparent;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,transform .12s,box-shadow .18s;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--cta);color:var(--on-cta);box-shadow:0 10px 24px -14px color-mix(in srgb,var(--cta) 80%,transparent)}
.btn-primary:hover{background:var(--cta-2)}
.btn-ghost{border-color:var(--line-2);color:var(--fg)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-wash)}
.btn-sm{padding:9px 18px;font-size:13.5px}
.btn-wide{width:100%}

/* nav */
.nav{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{height:34px;width:auto}
.brand span{display:flex;flex-direction:column;line-height:1}
.brand b{font-family:var(--serif);font-size:19px;letter-spacing:.24em;font-weight:600}
.brand i{font-style:normal;font-size:10.5px;color:var(--fg-2);margin-top:3px}
.logo-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-dark{display:block}:root:not([data-theme="light"]) .logo-light{display:none}}
:root[data-theme="dark"] .logo-dark{display:block}
:root[data-theme="dark"] .logo-light{display:none}
.nav-links{display:flex;gap:4px;margin-inline-start:auto;font-size:14.5px}
.nav-links a{color:var(--fg-2);padding:8px 13px;border-radius:var(--rb);transition:color .18s,background .18s}
.nav-links a:hover{color:var(--fg);background:var(--surface-2)}
.nav-act{display:flex;align-items:center;gap:9px}
.icon-btn{
  width:38px;height:38px;border-radius:var(--rb);border:1px solid var(--line);
  background:transparent;color:var(--fg-2);cursor:pointer;display:grid;place-items:center;flex-shrink:0;
  transition:color .18s,border-color .18s;
}
.icon-btn:hover{color:var(--fg);border-color:var(--line-2)}
.menu-btn{display:none}

/* hero: asymmetric split, chart carries the visual weight */
.hero{position:relative;overflow:hidden;background:var(--band);border-bottom:1px solid var(--line)}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 420px at 86% -4%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 66%),
    radial-gradient(620px 380px at 6% 108%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 64%);
}
.hero-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.hero-in{
  position:relative;z-index:1;display:grid;grid-template-columns:1.16fr .94fr;
  gap:clamp(34px,4.6vw,70px);align-items:center;
  padding-top:clamp(44px,5vw,88px);padding-bottom:clamp(52px,6vw,96px);
}
.hero h1{font-size:clamp(32px,4.9vw,60px);font-weight:600;letter-spacing:-.025em;line-height:1.2}
.hero h1 b{font-weight:600;color:var(--accent);display:inline}
.hero .sub{color:var(--fg-2);font-size:clamp(15.5px,1.5vw,18.5px);line-height:1.8;margin-top:20px;max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:32px}

/* chart panel */
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rp);
  box-shadow:var(--shadow);overflow:hidden;
}
.panel-top{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.panel-top b{font-size:13px;font-weight:600}
.panel-top .tf{margin-inline-start:auto;display:flex;gap:4px}
.tf span{font-family:var(--mono);font-size:11px;color:var(--fg-3);padding:3px 8px;border-radius:999px}
.tf span.on{background:var(--accent-wash);color:var(--accent)}
.panel-body{padding:10px 8px 0}
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .ax{fill:var(--fg-3);font-family:var(--mono);font-size:10px}
.chart .body.up,.chart .wick.up{fill:var(--up);stroke:var(--up)}
.chart .body.dn,.chart .wick.dn{fill:var(--dn);stroke:var(--dn)}
.chart .wick{stroke-width:1.2}
.chart .lvl{stroke-width:1.2;stroke-dasharray:5 5}
.chart .lvl.res{stroke:var(--dn);opacity:.75}
.chart .lvl.sup{stroke:var(--up);opacity:.75}
.chart .lvlT{font-family:var(--body);font-size:11px;font-weight:400}
.chart .lvlT.res{fill:var(--dn)}
.chart .lvlT.sup{fill:var(--up)}
.chart .ema{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--accent)}
.chart .pulse{fill:var(--accent);opacity:0;
  transform-box:fill-box;transform-origin:50% 50%}
.panel-cap{
  display:flex;align-items:center;gap:8px;padding:12px 18px 14px;
  font-size:12.5px;color:var(--fg-2);border-top:1px solid var(--line);margin-top:8px;
}
.panel-cap .ms{color:var(--accent)}
.panel-figs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.panel-figs div{padding:14px 18px;display:flex;flex-direction:column;gap:2px}
.panel-figs div+div{border-inline-end:1px solid var(--line)}
.panel-figs b{font-family:var(--mono);font-size:17px;font-weight:600}
.panel-figs span{font-size:11.5px;color:var(--fg-2)}

/* stats: hairline-divided figures, no cards */
/* ثلاث بطاقات مستقلّة لا شريطٌ مقسَّم: الرقم يقف وحده فوق كلمته */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px)}
.fig{padding:clamp(20px,2.6vw,30px) clamp(16px,2vw,26px);text-align:center;
  border:1px solid var(--line);border-radius:var(--rp);background:var(--surface)}
.fig b{display:block;font-family:var(--display);font-size:clamp(30px,4vw,46px);
  font-weight:900;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.fig span{display:block;font-size:13.5px;color:var(--fg-2);margin-top:8px}
.figs-note{margin-top:26px;font-size:12.5px;color:var(--fg-3);display:flex;align-items:center;gap:8px}

/* bento features */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.cell{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rp);
  padding:26px;grid-column:span 2;display:flex;flex-direction:column;gap:10px;min-width:0;
  transition:border-color .2s,transform .2s;
}
.cell:hover{border-color:var(--line-2);transform:translateY(-2px)}
.cell .ms{color:var(--accent)}
.cell h3{font-size:17.5px}
.cell p{font-size:14.5px;color:var(--fg-2);line-height:1.8}
.cell-wide{grid-column:span 3}
.cell-wash{background:linear-gradient(140deg,var(--accent-wash),var(--surface) 72%)}
.cell-dark{
  background:linear-gradient(145deg,#0C2743,#071726);border-color:rgba(147,169,193,.2);color:#E9F0F8;
}
.cell-dark h3{color:#fff}
.cell-dark p{color:#9FB6CE}
.cell-dark .ms{color:#8FBFEE}
/* mini lesson list inside a bento cell */
.mini{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.mini i{
  display:flex;align-items:center;gap:9px;font-style:normal;font-size:13px;color:#B8CBDF;
  border:1px solid rgba(147,169,193,.2);border-radius:var(--rb);padding:8px 12px;
}
.mini i .ms{font-size:16px;color:#49B38A}
.mini i.pend{color:#8198AF}
.mini i.pend .ms{color:#5C7891}
/* risk figure inside a bento cell */
.risk{display:flex;gap:10px;margin-top:auto;padding-top:16px;border-top:1px solid rgba(147,169,193,.2)}
.risk div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.risk b{font-family:var(--mono);font-size:17px;font-weight:600;color:#8FBFEE;line-height:1.2}
.risk span{font-size:10.5px;color:#93A9C1;line-height:1.4}

/* track rows: numbered editorial list */
.rows{border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:92px 1.1fr 1fr;gap:clamp(18px,3vw,44px);
  padding-block:clamp(26px,3vw,38px);border-bottom:1px solid var(--line);
  align-items:start;transition:background .2s;
}
.row:hover{background:var(--surface)}
.row-n{
  font-family:var(--mono);font-size:clamp(28px,3.4vw,42px);font-weight:400;
  color:var(--accent);opacity:.55;line-height:1;letter-spacing:-.04em;
}
.row-main h3{font-size:clamp(19px,2.1vw,25px);letter-spacing:-.01em}
.row-main .chip{
  display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;color:var(--fg-2);
  background:var(--surface-2);border-radius:999px;padding:4px 12px;margin-top:12px;
}
.row-side p{font-size:14.5px;color:var(--fg-2);line-height:1.85}
.row-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tag{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-2);
  border:1px solid var(--line);border-radius:var(--rb);padding:5px 10px;
}
.tag .ms{font-size:15px;color:var(--accent)}
.tag b{font-family:var(--mono);font-weight:400}

/* step rail */
.rail-steps{display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.rail-steps::before{
  content:"";position:absolute;top:19px;inset-inline:9%;height:1px;background:var(--line-2);
}
.st{display:flex;flex-direction:column;gap:12px;padding-inline-end:18px;position:relative}
.st-n{
  width:38px;height:38px;border-radius:999px;display:grid;place-items:center;flex-shrink:0;
  background:var(--bg);border:1px solid var(--line-2);color:var(--accent);
  font-family:var(--mono);font-size:14px;font-weight:600;position:relative;z-index:1;
  transition:background .2s,color .2s,border-color .2s;
}
.st:hover .st-n{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.st h4{font-size:15.5px}
.st p{font-size:13px;color:var(--fg-2);line-height:1.7}

/* ---- subscription tiers: matched to the client reference, checkout on Salla ---- */
.tiers-head{max-width:960px;margin-inline:auto}
.tiers-note{max-width:960px;margin-inline:auto}
.tiers{display:flex;flex-direction:column;gap:22px;max-width:960px;margin-inline:auto}
.tier-card{
  position:relative;border-radius:28px;padding:clamp(26px,3.6vw,44px);
  display:flex;flex-direction:column;gap:clamp(30px,7vw,100px);
  border:1px solid var(--tier-edge);box-shadow:0 20px 44px -30px rgba(16,40,70,.4);
}
.tier-dia{background:linear-gradient(135deg,var(--dia-1) 0%,var(--dia-2) 52%,var(--dia-3) 100%)}
.tier-brz{background:linear-gradient(135deg,var(--brz-1) 0%,var(--brz-2) 52%,var(--brz-3) 100%)}
.tier-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.tier-ico{
  width:clamp(64px,6vw,84px);aspect-ratio:1;border-radius:22px;
  display:grid;place-items:center;flex-shrink:0;
  background:var(--tier-chip);box-shadow:0 10px 24px -14px rgba(16,40,70,.5);
}
.tier-ico .ms{
  font-size:clamp(28px,3vw,36px);color:var(--tier-chip-ink);
  font-variation-settings:'FILL' 1,'wght' 400;max-width:1.2em;
}
.tier-badge{
  font-size:14px;font-weight:600;color:var(--tier-badge-ink);
  background:var(--tier-badge-bg);border:1px solid var(--tier-badge-line);
  border-radius:999px;padding:9px 19px;white-space:nowrap;
}
.tier-body h3{font-size:clamp(26px,3.6vw,38px);font-weight:700;letter-spacing:-.02em;color:var(--tier-ink)}
.tier-body p{
  font-size:clamp(15px,1.5vw,17.5px);line-height:1.8;margin-top:14px;max-width:48ch;
  color:var(--tier-sub);
}
.tier-btn{
  align-self:flex-start;background:var(--tier-cta);color:var(--tier-cta-ink);border:none;
  font-size:clamp(15px,1.5vw,17px);font-weight:600;padding:16px 36px;border-radius:12px;
  box-shadow:0 12px 26px -14px var(--tier-cta);
}
.tier-btn:hover{background:var(--tier-cta-h);color:var(--tier-cta-ink)}
@media (max-width:640px){
  .tier-card{border-radius:22px}
  .tier-btn{align-self:stretch;padding-inline:20px}
}

.note{
  margin-top:22px;font-size:12.5px;color:var(--fg-2);display:flex;gap:9px;align-items:flex-start;
  background:var(--surface-2);border-radius:var(--rp);padding:14px 16px;line-height:1.7;max-width:76ch;
}
.note .ms{font-size:18px;color:var(--accent);flex-shrink:0}

/* closing */
.close-in{
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(22px,4vw,56px);align-items:center;
  background:linear-gradient(145deg,#0D2C4B,#06131F);border:1px solid rgba(147,169,193,.18);border-radius:var(--rp);
  padding:clamp(34px,4.6vw,58px) clamp(26px,4vw,52px);color:#E9F0F8;position:relative;overflow:hidden;
}
.close-in::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(540px 300px at 88% 0%, rgba(108,166,224,.2), transparent 64%);
}
.close-in>*{position:relative;z-index:1}
.close-in h2{font-size:clamp(25px,3.3vw,40px);color:#fff;letter-spacing:-.02em}
.close-in p{color:#9FB6CE;font-size:15.5px;margin-top:14px;max-width:44ch}
.close-act{display:flex;flex-direction:column;gap:10px}
.close-act .btn-primary{background:#fff;color:#0A1C30;box-shadow:none}
.close-act .btn-primary:hover{background:#C9DEF4}
.close-act .btn-ghost{border-color:rgba(255,255,255,.3);color:#fff}
.close-act .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff;color:#fff}

/* footer */
.footer{border-top:1px solid var(--line);background:var(--surface);margin-top:clamp(60px,7vw,104px)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:34px;padding-block:clamp(44px,5vw,66px)}
.foot-brand img{height:56px;width:auto;margin-bottom:16px}
.foot-brand p{font-size:13.5px;color:var(--fg-2);line-height:1.85;max-width:34ch}
.fcol h4{font-size:13.5px;margin-bottom:14px;font-weight:600}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.fcol a{color:var(--fg-2);transition:color .18s}
.fcol a:hover{color:var(--accent)}
.fcol p{font-size:13.5px;color:var(--fg-2);line-height:1.8}
.fcol .lab{display:block;font-size:12px;color:var(--fg-3);margin-top:12px}
.sel{user-select:all;color:var(--accent);direction:ltr;display:inline-block;font-family:var(--mono);font-size:13px}
.fbar{
  border-top:1px solid var(--line);padding-block:18px;display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;font-size:12.5px;color:var(--fg-3);
  padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
}
.fbar nav{display:flex;flex-wrap:wrap;gap:18px}
.fbar a:hover{color:var(--accent)}

/* load choreography: ends at the visible resting state */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .7s cubic-bezier(.16,1,.3,1) backwards}
  .rise:nth-child(1){animation-delay:.02s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .d1{animation-delay:.06s}.d2{animation-delay:.13s}.d3{animation-delay:.2s}.d4{animation-delay:.28s}
  /* الشارت يُطبع كما يُطبع السوق: شمعةً شمعة من اليسار، والمتوسط
     يُرسم معها، ثمّ يستقرّ عند آخر سعرٍ نبضٌ يقول إنّ السوق حيّ.
     كلّ ما بعد الحركة هو المشهد الساكن نفسه، فمن أطفأ الحركة في
     نظامه رأى الشارت كاملاً بلا نقصان. */
  .chart .wick,.chart .body{
    opacity:0;transform-box:fill-box;transform-origin:50% 100%;
    animation:candleIn .4s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay:calc(.28s + var(--i,0) * 34ms)}
  @keyframes candleIn{
    from{opacity:0;transform:scaleY(.1) translateY(6px)}
    to{opacity:1;transform:none}}

  /* المتوسط يُرسم مع الشموع لا يسبقها: آخر شمعة تستقرّ عند ١٫٤ث
     وطرف الخطّ يبلغها في اللحظة نفسها. ثمّ المساحة تحته، ثم خطّا
     الدعم والمقاومة، ثمّ النقطة. */
  /* pathLength=100 على الخطّ: الطول المنطقيّ مئة مهما كان الطول
     الحقيقي، فيُرسم من صفر إلى تمامه لا أن ينتهي في منتصف الوقت
     كما كان مع رقمٍ مقدَّر. */
  .chart .ema{stroke-dasharray:100;stroke-dashoffset:100;
    animation:draw 1.14s .3s cubic-bezier(.33,0,.5,1) forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  .chart .emaArea{opacity:0;animation:pop .7s 1.3s forwards}

  /* خطّا الدعم والمقاومة يظهران بعد استقرار الشموع: هما خلاصةُ
     ما طُبع، فلا يسبقانه. */
  /* الصنفان .res و.sup يحملان opacity:.75 بخصوصيةٍ أعلى، فلو
     كُتب هنا .lvl وحده لبقي الخطّ ظاهراً طوال التأخير. */
  .chart .lvl.res,.chart .lvl.sup{opacity:0;animation:popL .6s 1.45s forwards}
  @keyframes popL{to{opacity:.75}}
  .chart .lvlT{opacity:0;animation:pop .5s 1.75s forwards}

  .chart .dot{opacity:0;animation:pop .4s 1.5s forwards}
  @keyframes pop{to{opacity:1}}

  /* النبض لا يتوقّف: حلقةٌ تتّسع وتخفت عند آخر سعر */
  .chart .pulse{animation:ping 2.4s 1.9s cubic-bezier(.2,.6,.3,1) infinite}
  @keyframes ping{
    0%{opacity:.5;transform:scale(1)}
    70%{opacity:0;transform:scale(3.6)}
    100%{opacity:0;transform:scale(3.6)}}
}

/* responsive */
@media (max-width:1040px){
  .hero-in{grid-template-columns:1fr;gap:38px}
  .bento{grid-template-columns:repeat(4,1fr)}
  .cell,.cell-wide{grid-column:span 2}
  .row{grid-template-columns:62px 1fr;gap:16px 20px}
  .row-side{grid-column:2}
  .rail-steps{grid-template-columns:repeat(3,1fr);gap:28px 14px}
  .rail-steps::before{display:none}
  .plans{grid-template-columns:1fr 1fr}
  .plans .plan:last-child{grid-column:1/-1}
  .foot-grid{grid-template-columns:1fr 1fr}
  .close-in{grid-template-columns:1fr}
  .nav-links{display:none}
  .menu-btn{display:grid}
}
@media (max-width:640px){
  .figs{grid-template-columns:1fr}
  .fig{padding-inline:18px}
  .fig:nth-child(odd){padding-inline-start:0}
  .fig:nth-child(even){border-inline-end:none}
  .bento{grid-template-columns:1fr}
  .cell,.cell-wide{grid-column:auto}
  .plans{grid-template-columns:1fr}
  .plans .plan:last-child{grid-column:auto}
  .rail-steps{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .panel-figs{grid-template-columns:1fr 1fr}
  .panel-figs div:nth-child(3){border-inline-end:none;grid-column:1/-1;border-top:1px solid var(--line)}
  .nav-in{height:64px;gap:10px}
  .hero-cta .btn{flex:1 1 100%}
  .nav-act .btn-ghost{display:none}
}

/* ---- success stories: image + headline + body + amount badge ---- */
.stories-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(26px,3.4vw,42px)}
.stories-head h2{font-size:clamp(25px,3.4vw,40px)}
.pending{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  color:var(--fg-2);background:var(--surface-2);border:1px dashed var(--line-2);
  border-radius:999px;padding:7px 15px;white-space:nowrap;
}
.pending .ms{font-size:17px;color:var(--fg-3)}
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.story{
  background:var(--story-bg);border:1px solid var(--story-line);border-radius:var(--rp);
  padding:16px;display:flex;flex-direction:column;gap:16px;min-width:0;
  box-shadow:0 18px 40px -30px rgba(10,28,48,.45);
}
.story-img{
  border-radius:10px;overflow:hidden;background:var(--story-ph);
  aspect-ratio:4/3;display:grid;place-items:center;
}
.story-img img{width:100%;height:100%;object-fit:cover;display:block}
.story-img .ms{font-size:34px;color:var(--story-dim)}
.story-body{display:flex;flex-direction:column;gap:9px;flex:1;padding-inline:4px}
.story-eyebrow{font-size:12.5px;font-weight:600;color:var(--story-accent);line-height:1.6}
.story-body h3{font-size:17.5px;font-weight:700;color:var(--story-fg);line-height:1.55}
.story-body p{font-size:13.5px;line-height:1.95;color:var(--story-dim)}
.story-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px}
.story-amount{
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--story-accent);
  background:var(--story-chip);border-radius:8px;padding:7px 14px;
}
.story-who{font-size:12.5px;color:var(--story-dim)}
.stories-empty{
  margin-top:20px;display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--fg-2);
  background:var(--surface-2);border-radius:var(--rp);padding:15px 17px;line-height:1.8;max-width:80ch;
}
.stories-empty .ms{font-size:19px;color:var(--accent);flex-shrink:0}
@media (max-width:980px){.stories{grid-template-columns:1fr 1fr}.stories .story:last-child{display:none}}
@media (max-width:640px){.stories{grid-template-columns:1fr}.stories .story:last-child{display:flex}}

/* ---- private classes: offer block with a single booking CTA ---- */
.offer{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rp);
  padding:clamp(28px,4vw,52px);
}
.offer h2{font-size:clamp(24px,3.1vw,38px);letter-spacing:-.015em}
.offer p{color:var(--fg-2);font-size:15.5px;line-height:1.85;margin-top:14px;max-width:48ch}
.offer-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.soon{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--fg-3);
  margin-top:14px;
}
.soon .ms{font-size:16px}
.offer-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.offer-list>div{
  display:flex;align-items:center;gap:11px;min-width:0;
  background:var(--surface-2);border-radius:var(--rb);padding:14px 16px;
}
.offer-list>div>.ms{color:var(--accent);font-size:20px;flex-shrink:0}
.offer-list b{font-size:14px;font-weight:600;min-width:0}
@media (max-width:420px){.offer-list{grid-template-columns:1fr}}

@media (max-width:1040px){
  .stories{grid-template-columns:repeat(2,1fr)}
  .stories .story:last-child{display:none}
  .offer{grid-template-columns:1fr}
}
@media (max-width:640px){
  .stories{grid-template-columns:1fr}
  .stories .story:last-child{display:flex}
  .offer-cta .btn{flex:1 1 100%}
}

/* ---- تنبيه توعوي: محتوى تعليمي لا توصية ---- */
.alert{
  background:var(--note-bg);border:1px solid var(--note-line);border-radius:var(--rp);
  padding:20px 22px;display:flex;flex-direction:column;gap:9px;
}
.alert-h{display:flex;align-items:center;gap:9px}
.alert-h .ms{font-size:21px;color:var(--note-title);flex-shrink:0}
.alert-h b{font-family:var(--display);font-size:15.5px;font-weight:700;color:var(--note-title)}
.alert p{font-size:14px;line-height:1.9;color:var(--note-fg);max-width:54ch}
@media (max-width:640px){.alert{padding:18px}}

/* ---- legal pages ---- */
.legal{max-width:760px;margin-inline:auto;padding-block:clamp(34px,5vw,60px);position:relative;z-index:1}
.legal-head{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:34px}
.legal-head h1{font-size:clamp(27px,3.6vw,40px);letter-spacing:-.02em}
.legal-head .upd{font-size:13px;color:var(--fg-3);margin-top:12px;display:flex;align-items:center;gap:7px}
.legal-head .upd .ms{font-size:16px}
.legal h2{font-size:clamp(18px,2vw,21px);margin-top:36px;margin-bottom:12px}
.legal h2:first-of-type{margin-top:0}
.legal p{color:var(--fg-2);font-size:15px;line-height:2;margin-bottom:12px}
.legal ul{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.legal li{
  color:var(--fg-2);font-size:15px;line-height:1.95;position:relative;padding-inline-start:20px;
}
.legal li::before{
  content:"";position:absolute;inset-inline-start:6px;top:14px;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}
.legal strong{color:var(--fg);font-weight:600}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal .warn{
  background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--rp);
  padding:20px 22px;margin-block:24px;
}
.legal .warn p{color:var(--warn-fg);margin:0}
.legal .warn p+p{margin-top:10px}
.legal .warn b{color:var(--warn-title);font-weight:700;display:flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:15.5px;margin-bottom:10px}
.legal .warn .ms{font-size:20px;color:var(--warn-title)}
.legal-foot{margin-top:42px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--fg-2)}
.legal-foot a{font-weight:600}

/* ---- أسئلة شائعة ---- */
.faq{max-width:860px;margin-inline:auto;display:flex;flex-direction:column;gap:10px}
.faq details{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rb);
  overflow:hidden;transition:border-color .2s;
}
.faq details[open]{border-color:color-mix(in srgb,var(--accent) 38%,var(--line))}
.faq summary{
  display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none;
  padding:17px 20px;font-size:15px;font-weight:600;color:var(--fg);line-height:1.6;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq .q{flex:1;min-width:0}
.faq .sign{
  width:26px;height:26px;border-radius:7px;flex-shrink:0;display:grid;place-items:center;
  background:var(--accent-wash);color:var(--accent);position:relative;transition:transform .22s;
}
.faq .sign::before,.faq .sign::after{
  content:"";position:absolute;background:currentColor;border-radius:2px;
}
.faq .sign::before{width:11px;height:1.8px}
.faq .sign::after{width:1.8px;height:11px;transition:opacity .2s,transform .22s}
.faq details[open] .sign{transform:rotate(90deg)}
.faq details[open] .sign::after{opacity:0}
.faq .a{padding:0 20px 19px;color:var(--fg-2);font-size:14.5px;line-height:1.95}
.faq .a a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.faq .sign,.faq .sign::after{transition:none}}
@media (max-width:640px){.faq summary{padding:15px 16px;font-size:14.5px}.faq .a{padding:0 16px 17px}}

.stories-disc{
  margin-top:20px;display:flex;align-items:flex-start;gap:10px;max-width:80ch;
  font-size:12.5px;line-height:1.85;color:var(--fg-2);
  background:var(--surface-2);border-radius:var(--rp);padding:14px 16px;
}
.stories-disc .ms{font-size:18px;color:var(--fg-3);flex-shrink:0}
.stories-disc a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   شاشات ضيقة جداً (≤ 380 بكسل)
   مجموع الشعار وبطاقة الحساب والأزرار يتجاوز عرض الشاشة، فيظهر
   تمرير أفقي. تُقلَّص العناصر القابلة للتقليص بدل كسر الصف.
   ============================================================ */
@media (max-width:380px){
  .rail{padding-inline:12px}
  .brand img{width:30px;height:30px}
  .brand span b{font-size:15px;letter-spacing:.14em}
  .brand span i{font-size:9.5px}
  .nav-act{gap:6px}
  /* بطاقة الحساب: الصورة الحرفية تكفي، والاسم في القائمة المنسدلة */
  .acct-id{display:none}
  .acct-btn{padding-inline:6px}
}

/* أهداف اللمس على الأجهزة اللمسية: أربع وأربعون بكسل هو الحد المريح.
   تُوسَّع بالحشو لا بالارتفاع الصريح حتى لا تتمدّد الصفوف. */
@media (hover:none) and (pointer:coarse){
  .nav-links a{padding-block:11px}
  .lnav-item{padding-block:15px}
}

/* تنبيه تحت عنوان القسم */
.sec-note{display:flex;gap:8px;align-items:flex-start;max-width:70ch;margin-top:12px;
  font-size:13.5px;line-height:1.9;color:var(--fg-2)}
.sec-note .ms{color:var(--accent);flex:0 0 auto;margin-top:2px}
/* ثلاث بطاقات متساوية بدل شبكة البنتو الستّية */
.bento-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.bento-3 .cell{grid-column:auto;grid-row:auto}

/* سطر العدد تحت عنوان القسم */
.sec-meta{margin-top:10px;font-size:13.5px;color:var(--fg-2);font-family:var(--mono)}

/* لون المستوى على الصفحة الرئيسية — نفس لونه في الخارطة */
.row[class*="lvc-"]{border-inline-start:3px solid transparent;padding-inline-start:clamp(10px,1.4vw,18px)}
.row[class*="lvc-"]:hover{border-inline-start-color:var(--lv,var(--accent))}
.row[class*="lvc-"] .row-n{color:var(--lv,var(--accent));opacity:.75}
.row[class*="lvc-"] .chip{background:color-mix(in srgb,var(--lv,var(--accent)) 12%,transparent);
  color:var(--lv,var(--accent));font-weight:700}
.row[class*="lvc-"] .tag .ms{color:var(--lv,var(--accent))}

/* بطاقة الميزة المقفلة: تمييزٌ هادئ بلون كهرماني في الوضعين */
:root{
  --pl-1:#FBF3E2; --pl-2:#F7EEDC; --pl-3:#FDF9F1; --pl-row:rgba(255,255,255,.72);
  --pl-line:#E6D4AE; --pl-ink:#8A6418; --pl-fg:#6B5526;
  --pl-chip:rgba(255,255,255,.78); --pl-btn:#D8A72C; --pl-btn-ink:#2B1F05;
}
:root[data-theme="dark"]{
  --pl-1:#241B0B; --pl-2:#1A1409; --pl-3:#120E07; --pl-row:rgba(255,255,255,.05);
  --pl-line:rgba(216,167,44,.32); --pl-ink:#F0C860; --pl-fg:#D2BE92;
  --pl-chip:rgba(216,167,44,.16); --pl-btn:#E8BE4A; --pl-btn-ink:#241B0B;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --pl-1:#241B0B; --pl-2:#1A1409; --pl-3:#120E07; --pl-row:rgba(255,255,255,.05);
    --pl-line:rgba(216,167,44,.32); --pl-ink:#F0C860; --pl-fg:#D2BE92;
    --pl-chip:rgba(216,167,44,.16); --pl-btn:#E8BE4A; --pl-btn-ink:#241B0B;
  }
}

/* رقم التواصل: يفتح واتساب مباشرة */
.wa-link{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:700;
  text-decoration:none;direction:rtl;vertical-align:middle}
.wa-link:hover{text-decoration:underline;text-underline-offset:3px}
.wa-link .wa-i{width:20px;height:20px;flex:0 0 auto;color:#25D366}