/* ══════════════════════════════════════════════════════════════════
   مكتب المؤيد للمحاماة — نظام التصميم
   تركيبة أنماط: البنية والمسافات من Editorial Restrained ·
   خط العرض وحجم الصورة والدفء من Luxe Considered ·
   المكوّنات والدلالات والأرقام من Clinical / Technical Precise
   ══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}

:root{
  /* ── سلّم المسافات (أساس 4) ───────────────────────────── */
  --s0:4px;  --s1:8px;  --s2:12px; --s3:16px; --s4:20px; --s5:24px;
  --s6:32px; --s7:40px; --s8:48px; --s9:64px; --s10:80px; --s11:96px;
  --s12:128px; --s13:160px;

  /* إيقاع الأقسام — Editorial: 96→128 */
  --sect: clamp(64px, 8vw, 128px);
  --sect-sm: clamp(44px, 5.5vw, 80px);
  --gut: clamp(20px, 4.5vw, 48px);
  --wrap: 1216px;
  --measure: 68ch;

  /* ── سلّم الخطوط (نسبة 1.25 على أساس 17) ──────────────── */
  --ff-display:'Amiri', 'Noto Naskh Arabic', Georgia, serif;
  --ff-body:'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:'IBM Plex Mono','IBM Plex Sans Arabic', ui-monospace, monospace;

  --t-over: 12px;  --t-cap: 13.5px;   --t-sm: 14.5px;
  --t-body: 17px;    --t-lg: 19px;    --t-h4: 21px;
  --t-h3: clamp(22px, 2.1vw, 27px);
  --t-h2: clamp(27px, 3.3vw, 40px);
  --t-h1: clamp(32px, 4.3vw, 53px);
  --t-disp: clamp(38px, 5.8vw, 74px);

  --lh-tight:1.28; --lh-head:1.36; --lh-body:1.95; --lh-ui:1.5;
  --tr-over:.18em; --tr-head:-.005em;

  /* ── الأنصاف والحدود ─────────────────────────────────── */
  --r0:4px; --r1:8px; --r2:12px; --r3:16px; --r4:24px; --rf:999px;

  /* ── الارتفاع: خط شعرة افتراضًا، ظلّ للطبقات العائمة فقط ── */
  --e0:none;
  --e1:0 1px 2px rgba(18,21,26,.045);
  --e2:0 4px 14px rgba(18,21,26,.07), 0 1px 2px rgba(18,21,26,.04);
  --e3:0 14px 36px rgba(18,21,26,.11), 0 2px 6px rgba(18,21,26,.05);
  --e4:0 28px 72px rgba(18,21,26,.18);

  /* ── الحركة ──────────────────────────────────────────── */
  --d1:120ms; --d2:180ms; --d3:240ms; --d4:320ms;
  --ez:cubic-bezier(.2,0,0,1);
  --ez-in:cubic-bezier(.4,0,1,1);
  --ez-spring:cubic-bezier(.34,1.36,.44,1);

  /* ── الطبقات ─────────────────────────────────────────── */
  --z-raised:10; --z-sticky:20; --z-header:40; --z-drawer:80;
  --z-overlay:90; --z-toast:100;

  /* ── طبقات الحالة ────────────────────────────────────── */
  --st-hover:6%; --st-press:11%;
}

/* ── اللوحة الفاتحة (الأساس) ──────────────────────────── */
:root, [data-theme="light"]{
  --paper:#F7F4EE;      /* الصفحة — ورق دافئ */
  --paper2:#FFFFFF;     /* بطاقة مرفوعة */
  --paper3:#EFEBE2;     /* شريط غائر / بديل */
  --ink:#12151A;        /* جرافيت — لون العلامة */
  --ink2:#4A5058;
  --ink3:#5F656D;
  --line:#E2DCD1;
  --line2:#EFEBE3;
  --brass:#82612D;      /* اللكنة بتباين نص (AA على الورق) */
  --brass-lg:#A9803F;   /* اللكنة في المقاسات الكبيرة */
  --brass-wash:rgba(140,106,51,.08);
  --forest:#2A4A3A;     /* لكنة السلطة */
  --forest-wash:rgba(42,74,58,.09);
  --ok:#2F6B4F;   --ok-wash:rgba(47,107,79,.10);
  --warn:#8A5A18; --warn-wash:rgba(138,90,24,.10);
  --danger:#9B2C2C; --danger-wash:rgba(155,44,44,.09);
  --info:#2D5F86; --info-wash:rgba(45,95,134,.09);
  --solid:#12151A;  --on-solid:#FFFFFF;
  --ring-bg:#F7F4EE;
  --veil:linear-gradient(100deg,rgba(16,19,22,.94) 0%,rgba(16,19,22,.86) 42%,rgba(16,19,22,.58) 74%,rgba(16,19,22,.30) 100%);
  --img-adj:1;
  --scrim:rgba(10,12,14,.52);
  color-scheme:light;
}

/* ── اللوحة الداكنة: للوضع الداكن الكامل وللأشرطة .inv ── */
[data-theme="dark"], .inv{
  --paper:#101316;
  --paper2:#171B1F;
  --paper3:#0A0C0E;
  --ink:#F2EFE9;
  --ink2:#A9AFB7;
  --ink3:#8C939B;
  --line:rgba(255,255,255,.13);
  --line2:rgba(255,255,255,.07);
  --brass:#C9A465;
  --brass-lg:#DCBE87;
  --brass-wash:rgba(201,164,101,.11);
  --forest:#6FAE8B;
  --forest-wash:rgba(111,174,139,.12);
  --ok:#6FC79A;   --ok-wash:rgba(111,199,154,.12);
  --warn:#D9A557; --warn-wash:rgba(217,165,87,.12);
  --danger:#E58585; --danger-wash:rgba(229,133,133,.12);
  --info:#7FB6DE; --info-wash:rgba(127,182,222,.12);
  --solid:#F2EFE9;  --on-solid:#12151A;
  --ring-bg:#101316;
  --img-adj:.94;
  --e1:0 1px 2px rgba(0,0,0,.4);
  --e2:0 4px 14px rgba(0,0,0,.45);
  --e3:0 14px 36px rgba(0,0,0,.5);
  --e4:0 28px 72px rgba(0,0,0,.6);
  --scrim:rgba(0,0,0,.62);
}
[data-theme="dark"]{color-scheme:dark}
.inv{background:var(--paper);color:var(--ink)}

/* ══════════════════ الأساس ══════════════════ */
html{
  scroll-behavior:smooth; scroll-padding-top:calc(var(--s11) + var(--s2));
  -webkit-text-size-adjust:100%; overflow-x:clip;
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ff-body); font-size:var(--t-body); line-height:var(--lh-body);
  font-feature-settings:"ss01","kern"; -webkit-font-smoothing:antialiased;
  overflow-x:clip; min-height:100dvh;
  transition:background var(--d3) var(--ez), color var(--d3) var(--ez);
}
img,svg,video{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
:where(h1,h2,h3,h4){margin:0; color:var(--ink); text-wrap:balance}
h1,h2{font-family:var(--ff-display); font-weight:700; line-height:var(--lh-tight); letter-spacing:var(--tr-head)}
h3,h4{font-family:var(--ff-body); font-weight:700; line-height:var(--lh-head)}
p{margin:0}
::selection{background:var(--brass-wash); color:var(--ink)}

/* حلقة التركيز — موحّدة على كل عنصر تفاعلي */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--ring-bg), 0 0 0 4px var(--brass);
  border-radius:var(--r0);
}
.skip{
  position:absolute; inset-inline-start:var(--s3); top:-100px; z-index:var(--z-toast);
  background:var(--solid); color:var(--on-solid); padding:var(--s2) var(--s4);
  border-radius:var(--rf); font-size:var(--t-sm); font-weight:700;
  transition:top var(--d2) var(--ez);
}
.skip:focus{top:var(--s3)}

/* الأرقام: خانات ثابتة في كل مكان يظهر فيه رقم */
.num,.tbl td,.tbl th,.kpi__v,.calc__big,.calc__rows dd,.fee__p,.rcard__yr,time{
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ══════════════════ التخطيط ══════════════════ */
.wrap{width:min(100% - 2*var(--gut), var(--wrap)); margin-inline:auto}
.sect{padding-block:var(--sect)}
.sect--sm{padding-block:var(--sect-sm)}
.sect--alt{background:var(--paper3)}
.sect--paper{background:var(--paper2)}
.stack > * + *{margin-top:var(--s5)}
.grid{display:grid; gap:var(--s5)}
.g2{display:grid; gap:var(--s5); grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{display:grid; gap:var(--s5); grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{display:grid; gap:var(--s4); grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{display:grid; gap:var(--s3); grid-template-columns:repeat(5,minmax(0,1fr))}

/* ══════════════════ التيبوغرافيا ══════════════════ */
.over{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--ff-body); font-size:var(--t-over); font-weight:700;
  letter-spacing:var(--tr-over); color:var(--brass); text-transform:none;
  margin-bottom:var(--s3);
}
.over::before{content:""; inline-size:26px; block-size:1px; background:currentColor; opacity:.55; flex:none}
.over--c::before{display:none}
.h-disp{font-family:var(--ff-display); font-weight:700; font-size:var(--t-disp); line-height:1.22}
.h-xl{font-size:var(--t-h1); line-height:1.24}
.h-lg{font-size:var(--t-h2)}
.h-md{font-size:var(--t-h3); font-family:var(--ff-body); font-weight:700}
.lead{font-size:var(--t-lg); color:var(--ink2); max-width:var(--measure); line-height:1.92}
.small{font-size:var(--t-sm); color:var(--ink2); line-height:1.75}
.cap{font-size:var(--t-cap); color:var(--ink3); line-height:1.6}
.mono{font-family:var(--ff-mono); font-variant-numeric:tabular-nums; letter-spacing:.01em}

.shead{max-width:var(--measure); margin-bottom:var(--s8)}
.shead--c{margin-inline:auto; text-align:center}
.shead--row{max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); flex-wrap:wrap}
.shead .lead{margin-top:var(--s3)}

/* ══════════════════ الأزرار — تشريح كامل للحالات ══════════════════
   الحالات: default · hover · focus-visible · active · disabled · loading
   ═══════════════════════════════════════════════════════════════ */
.btn{
  --btn-bg:var(--solid); --btn-fg:var(--on-solid); --btn-bd:var(--solid);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s2); min-block-size:48px; padding-inline:var(--s5); padding-block:var(--s2);
  border:1.5px solid var(--btn-bd); border-radius:var(--rf);
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:var(--t-sm); font-weight:700; letter-spacing:-.005em;
  cursor:pointer; user-select:none; touch-action:manipulation; white-space:nowrap;
  transition:background var(--d2) var(--ez), border-color var(--d2) var(--ez),
             color var(--d2) var(--ez), transform var(--d1) var(--ez), box-shadow var(--d2) var(--ez);
}
.btn svg{flex:none}
.btn > span{display:inline-block}
@media (hover:hover){
  .btn:hover{background:color-mix(in srgb,var(--btn-bg), var(--ink) var(--st-hover)); transform:translateY(-1px); box-shadow:var(--e2)}
  .btn--brass:hover{background:var(--brass-lg); border-color:var(--brass-lg)}
}
.btn:active{transform:translateY(0) scale(.985); box-shadow:none;
  background:color-mix(in srgb,var(--btn-bg), var(--ink) var(--st-press))}
.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.42; cursor:not-allowed; transform:none; box-shadow:none; pointer-events:none;
}
.btn[data-loading]{color:transparent; pointer-events:none}
.btn[data-loading]::after{
  content:""; position:absolute; inline-size:18px; block-size:18px; border-radius:50%;
  border:2px solid color-mix(in srgb,var(--btn-fg), transparent 65%);
  border-block-start-color:var(--btn-fg); animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.btn--brass{--btn-bg:var(--brass-lg); --btn-fg:#14100A; --btn-bd:var(--brass-lg)}
[data-theme="dark"] .btn--brass,.inv .btn--brass{--btn-fg:#12151A}
.btn--line{--btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line)}
@media (hover:hover){.btn--line:hover{--btn-bg:var(--solid); --btn-fg:var(--on-solid); --btn-bd:var(--solid)}}
.btn--quiet{--btn-bg:transparent; --btn-fg:var(--ink2); --btn-bd:transparent; padding-inline:var(--s3)}
@media (hover:hover){.btn--quiet:hover{--btn-bg:var(--brass-wash); --btn-fg:var(--ink); box-shadow:none; transform:none}}
.btn--lg{min-block-size:54px; padding-inline:var(--s6); font-size:var(--t-body)}
.btn--sm{min-block-size:40px; padding-inline:var(--s4); font-size:var(--t-cap)}
.btn--block{inline-size:100%}
/* رابط نصّي — أسلوب Luxe: خط تحت النص لا زرّ */
.tlink{
  display:inline-flex; align-items:center; gap:var(--s1); min-block-size:44px;
  font-size:var(--t-sm); font-weight:700; color:var(--brass);
  border-block-end:1.5px solid color-mix(in srgb,var(--brass), transparent 60%);
  transition:border-color var(--d2) var(--ez), gap var(--d2) var(--ez);
}
@media (hover:hover){.tlink:hover{border-block-end-color:var(--brass); gap:var(--s2)}}

/* ══════════════════ الشارات والرقائق ══════════════════ */
.badge{
  display:inline-flex; align-items:center; gap:var(--s1);
  padding:5px var(--s2); border-radius:var(--r0);
  font-size:var(--t-over); font-weight:700; letter-spacing:.02em; line-height:1.5;
  background:var(--paper3); color:var(--ink2);
}
.badge svg{inline-size:13px; block-size:13px; flex:none}
.badge--ok{background:var(--ok-wash); color:var(--ok)}
.badge--warn{background:var(--warn-wash); color:var(--warn)}
.badge--danger{background:var(--danger-wash); color:var(--danger)}
.badge--info{background:var(--info-wash); color:var(--info)}
.badge--brass{background:var(--brass-wash); color:var(--brass)}

.chip{
  display:inline-flex; align-items:center; gap:var(--s1); min-block-size:42px;
  padding:0 var(--s3); border-radius:var(--rf); border:1px solid var(--line);
  background:var(--paper2); color:var(--ink2);
  font-size:var(--t-cap); font-weight:600;
}
.chip svg{color:var(--brass); flex:none}
.chips{display:flex; flex-wrap:wrap; gap:var(--s1)}

/* رقائق التصفية — عنصر تحكّم فعلي */
.fbar{display:flex; flex-wrap:wrap; gap:var(--s1); align-items:center}
.fchip{
  appearance:none; min-block-size:44px; padding:0 var(--s4);
  border:1px solid var(--line); border-radius:var(--rf);
  background:var(--paper2); color:var(--ink2);
  font-size:var(--t-cap); font-weight:600; cursor:pointer; touch-action:manipulation;
  display:inline-flex; align-items:center; gap:var(--s1);
  transition:all var(--d2) var(--ez);
}
@media (hover:hover){.fchip:hover{border-color:var(--ink3); color:var(--ink)}}
.fchip:active{transform:scale(.97)}
.fchip[aria-pressed="true"]{background:var(--solid); border-color:var(--solid); color:var(--on-solid)}
.fchip__n{
  font-family:var(--ff-mono); font-size:12px; opacity:.75;
  font-variant-numeric:tabular-nums;
}

/* ══════════════════ حالة فارغة ══════════════════ */
.empty{
  display:none; text-align:center; padding:var(--s10) var(--s5);
  border:1px dashed var(--line); border-radius:var(--r3); background:var(--paper2);
}
.empty[data-on]{display:block; animation:fadeUp var(--d3) var(--ez)}
.empty__ic{
  inline-size:52px; block-size:52px; margin-inline:auto; margin-block-end:var(--s3);
  border-radius:var(--rf); display:grid; place-items:center;
  background:var(--paper3); color:var(--ink3);
}
.empty h3{font-size:var(--t-h4); margin-block-end:var(--s1)}
.empty p{color:var(--ink2); font-size:var(--t-sm); max-width:44ch; margin-inline:auto}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ══════════════════ التنبيه المنبثق ══════════════════ */
.toast{
  position:fixed; inset-block-end:calc(var(--s5) + env(safe-area-inset-bottom));
  inset-inline-start:50%; transform:translate(50%, 16px);
  z-index:var(--z-toast); display:flex; align-items:center; gap:var(--s2);
  padding:var(--s3) var(--s5); border-radius:var(--rf);
  background:var(--solid); color:var(--on-solid); box-shadow:var(--e4);
  font-size:var(--t-sm); font-weight:600; opacity:0; pointer-events:none;
  transition:opacity var(--d2) var(--ez), transform var(--d3) var(--ez-spring);
}
.toast[data-on]{opacity:1; transform:translate(50%,0)}
.toast svg{color:var(--ok)}

/* ══════════════════ شريط تقدّم القراءة ══════════════════ */
.rprog{
  position:fixed; inset-block-start:0; inset-inline:0; block-size:2px;
  z-index:var(--z-toast); background:transparent; pointer-events:none;
}
.rprog__b{
  block-size:100%; inline-size:0; background:var(--brass);
  transform-origin:right center; transition:inline-size 80ms linear;
}

/* ══════════════════ الهيدر ══════════════════ */
.topbar{
  background:var(--paper3); color:var(--ink2);
  font-size:var(--t-cap); border-block-end:1px solid var(--line2);
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); min-block-size:42px}
.topbar__l{display:flex; align-items:center; gap:var(--s1)}
.topbar__l svg{color:var(--brass); flex:none}
.topbar__r{display:flex; gap:var(--s5)}
.topbar a{display:inline-flex; align-items:center; gap:var(--s1); min-block-size:40px; transition:color var(--d2) var(--ez)}
@media (hover:hover){.topbar a:hover{color:var(--brass)}}

.hdr{
  position:sticky; inset-block-start:0; z-index:var(--z-header);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border-block-end:1px solid transparent;
  transition:border-color var(--d3) var(--ez), box-shadow var(--d3) var(--ez), background var(--d3) var(--ez);
}
.hdr[data-stuck]{border-block-end-color:var(--line); box-shadow:var(--e1)}
.hdr .wrap{display:flex; align-items:center; gap:var(--s5); min-block-size:76px}
.brand{display:flex; align-items:center; gap:var(--s3); min-block-size:48px}
.brand__mark{inline-size:42px; block-size:42px; flex:none; position:relative}
.brand__mark img{inline-size:100%; block-size:100%; object-fit:contain}
.brand__t{display:flex; flex-direction:column; line-height:1.3}
.brand__t b{font-family:var(--ff-display); font-size:17px; font-weight:700}
.brand__t span{font-size:12px; color:var(--ink3); letter-spacing:.01em}
.lg-dark{display:none}
[data-theme="dark"] .lg-dark,.inv .lg-dark{display:block}
[data-theme="dark"] .lg-light,.inv .lg-light{display:none}

.nav{margin-inline-start:auto; display:flex; gap:2px}
.nav a{
  position:relative; display:inline-flex; align-items:center; min-block-size:44px;
  padding-inline:var(--s3); border-radius:var(--r1);
  font-size:var(--t-sm); font-weight:600; color:var(--ink2);
  transition:color var(--d2) var(--ez), background var(--d2) var(--ez);
}
@media (hover:hover){.nav a:hover{color:var(--ink); background:var(--brass-wash)}}
.nav a::after{
  content:""; position:absolute; inset-block-end:6px; inset-inline:var(--s3);
  block-size:2px; background:var(--brass); border-radius:2px;
  transform:scaleX(0); transform-origin:right center;
  transition:transform var(--d3) var(--ez);
}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr__cta{display:flex; align-items:center; gap:var(--s1)}
.iconbtn{
  inline-size:44px; block-size:44px; border-radius:var(--rf);
  border:1px solid var(--line); background:transparent; color:var(--ink);
  cursor:pointer; display:grid; place-items:center; touch-action:manipulation;
  transition:background var(--d2) var(--ez), border-color var(--d2) var(--ez), transform var(--d1) var(--ez);
}
@media (hover:hover){.iconbtn:hover{background:var(--brass-wash); border-color:var(--brass)}}
.iconbtn:active{transform:scale(.94)}
.mode-dark{display:none}
[data-theme="dark"] .mode-dark{display:grid}
[data-theme="dark"] .mode-light{display:none}
.burger{display:none}

/* درج الجوال */
.drawer{
  position:fixed; inset:0; z-index:var(--z-drawer); overflow:hidden;
  visibility:hidden; pointer-events:none;
}
.drawer[data-open]{visibility:visible; pointer-events:auto}
.drawer__scrim{
  position:absolute; inset:0; background:var(--scrim);
  opacity:0; transition:opacity var(--d3) var(--ez);
  backdrop-filter:blur(3px);
}
.drawer[data-open] .drawer__scrim{opacity:1}
.drawer__panel{
  position:absolute; inset-block:0; inset-inline-end:0;
  inline-size:min(88vw, 340px); background:var(--paper2);
  border-inline-start:1px solid var(--line); box-shadow:var(--e4);
  transform:translateX(-100%); transition:transform var(--d4) var(--ez);
  display:flex; flex-direction:column; padding:var(--s5) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom));
  overflow-y:auto;
}
[dir="rtl"] .drawer__panel{transform:translateX(100%)}
.drawer[data-open] .drawer__panel{transform:none}
.drawer__top{display:flex; align-items:center; justify-content:space-between; margin-block-end:var(--s5)}
.drawer nav{display:flex; flex-direction:column; gap:2px}
.drawer nav a{
  min-block-size:52px; display:flex; align-items:center; padding-inline:var(--s3);
  border-radius:var(--r1); font-size:var(--t-body); font-weight:600; color:var(--ink2);
}
.drawer nav a[aria-current="page"]{background:var(--brass-wash); color:var(--brass)}
.drawer__foot{margin-block-start:auto; padding-block-start:var(--s6); display:grid; gap:var(--s2)}

/* ══════════════════ فتات الخبز ══════════════════ */
.crumbs{border-block-end:1px solid var(--line2); background:var(--paper)}
.crumbs ol{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s1); min-block-size:46px; font-size:var(--t-cap); color:var(--ink2);
}
.crumbs li{display:flex; align-items:center; gap:var(--s1)}
.crumbs li + li::before{content:"/"; color:var(--line); margin-inline-end:2px}
.crumbs a{transition:color var(--d2) var(--ez)}
@media (hover:hover){.crumbs a:hover{color:var(--brass)}}
.crumbs [aria-current="page"]{color:var(--ink2); font-weight:600}

/* ══════════════════ شريط الترخيص ══════════════════ */
.licbar{display:flex; flex-wrap:wrap; gap:var(--s1); margin-block:var(--s5)}
.lic{
  display:inline-flex; align-items:center; gap:var(--s1); min-block-size:42px;
  padding:0 var(--s3); border-radius:var(--rf);
  border:1px solid var(--line); background:var(--paper2);
  font-size:var(--t-cap); font-weight:600; color:var(--ink2);
}
.lic svg{color:var(--ink3); flex:none}
.lic--verify{color:var(--ok); border-color:color-mix(in srgb,var(--ok), transparent 62%); background:var(--ok-wash)}
.lic--verify svg{color:var(--ok)}
@media (hover:hover){.lic--verify:hover{border-color:var(--ok)}}

/* ══════════════════ الفوتر ══════════════════ */
.ftr{background:#0A0C0E; color:rgba(255,255,255,.72); font-size:var(--t-sm)}
.ftr__h{font-family:var(--ff-body); font-size:var(--t-sm); color:#fff; margin-block-end:var(--s3); letter-spacing:.01em}
.ftr__g{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.15fr auto; gap:var(--s7); padding-block:var(--s10) var(--s8)}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s1)}
.ftr li a{display:inline-flex; min-block-size:40px; align-items:center; transition:color var(--d2) var(--ez)}
@media (hover:hover){.ftr a:hover{color:var(--brass-lg)}}
.ftr__about{margin-block:var(--s3); max-width:38ch; line-height:1.85}
.ftr__lic{display:flex; align-items:center; gap:var(--s1); font-size:var(--t-cap); color:rgba(255,255,255,.62)}
.ftr__lic svg{color:var(--brass-lg)}

/* ── رمز QR للواتساب ─────────────────────────────────────────────
   بديل بلوك الإضافة الخارجية الذي كان يسقط سائبًا أسفل الصفحة بلا تنسيق
   (تنسيقاتها مستبعدة في inc/assets.php). هنا نسختان: بطاقة داخل التذييل
   بعمود التواصل، وبطاقة عائمة ثابتة على جانب الشاشة للشاشات الكبيرة فقط
   — الرمز يُمسح بهاتف آخر، فلا معنى له على الجوال حيث يوجد شريط الإجراءات. */
.ftr__qr{display:grid; gap:var(--s2); justify-items:start; align-content:start}
.ftr__qr__b{
  display:block; padding:7px; background:#fff; border-radius:var(--r2);
  line-height:0; box-shadow:0 2px 10px rgba(0,0,0,.28);
}
.ftr__qr__b img{inline-size:104px; block-size:104px; display:block}
.ftr__qr__t{font-size:var(--t-cap); color:rgba(255,255,255,.62); max-inline-size:16ch; line-height:1.6; margin:0}

.qrfl{display:none}
@media (min-width:1081px){
  .qrfl{
    display:block; position:fixed; inset-inline-start:var(--s4); inset-block-end:var(--s5);
    z-index:var(--z-sticky);
  }
  .qrfl__a{
    display:grid; gap:6px; justify-items:center; padding:9px 9px 8px;
    background:var(--paper2,#fff); border:1px solid var(--line);
    border-radius:var(--r2); box-shadow:0 8px 28px rgba(18,21,26,.16);
    transition:transform var(--d2) var(--ez), box-shadow var(--d2) var(--ez);
  }
  .qrfl__a img{inline-size:96px; block-size:96px; display:block; border-radius:4px}
  .qrfl__t{font-size:10.5px; font-weight:700; line-height:1.45; color:var(--ink2); text-align:center}
  @media (hover:hover){.qrfl__a:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(18,21,26,.22)}}
}
@media print{.qrfl{display:none !important}}
.socs{display:flex; gap:var(--s1); margin-block-start:var(--s4)}
.socs a{
  inline-size:40px; block-size:40px; border-radius:var(--rf);
  border:1px solid rgba(255,255,255,.14); display:grid; place-items:center;
  transition:all var(--d2) var(--ez);
}
@media (hover:hover){.socs a:hover{background:rgba(255,255,255,.08); border-color:var(--brass-lg); color:var(--brass-lg)}}
.ftr__bot{
  border-block-start:1px solid rgba(255,255,255,.08); padding-block:var(--s5);
  display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap;
  font-size:var(--t-cap); color:rgba(255,255,255,.36);
}
.brand--ftr .brand__t b{color:#fff}
.brand--ftr .brand__t span{color:rgba(255,255,255,.6)}

/* ══════════════════ شريط الإجراء اللاصق (جوال) ══════════════════ */
.abar{display:none}

/* ══════════════════ الهيرو ══════════════════ */
.hero{position:relative; overflow:hidden; padding-block:var(--s11) var(--s12)}
.hero__bg{position:absolute; inset:0; z-index:0}
.hero__bg img{inline-size:100%; block-size:100%; object-fit:cover; filter:brightness(var(--img-adj))}
.hero__veil{position:absolute; inset:0; background:var(--veil)}
.hero__in{position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,4.6vw,72px); align-items:center}
.hero h1{margin-block-end:var(--s5); max-width:17ch}
.hero__sub{color:var(--ink2); font-size:var(--t-lg); max-width:52ch; margin-block-end:var(--s6); line-height:1.9}
.hero__act{display:flex; flex-wrap:wrap; gap:var(--s2); margin-block-end:var(--s5)}
.hero__pills{display:flex; flex-wrap:wrap; gap:var(--s1)}

/* هيرو الصفحات الداخلية */
.phero{
  background:var(--paper3); border-block-end:1px solid var(--line);
  padding-block:clamp(40px,5.4vw,80px);
}
.phero__in{display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(28px,3.6vw,56px); align-items:center}
.phero h1{font-size:var(--t-h1); margin-block-end:var(--s3)}
.phero__sub{font-size:var(--t-lg); color:var(--ink2); line-height:1.9; max-width:56ch; margin-block-end:var(--s5)}
.phero__act{display:flex; flex-wrap:wrap; gap:var(--s2)}
.phero--c{text-align:center}
.phero--c .phero__in{grid-template-columns:1fr}
.phero--c .phero__sub{margin-inline:auto}
.phero--c .phero__act,.phero--c .licbar{justify-content:center}

/* إطار الصورة — أسلوب Luxe: الصورة تحمل الصفحة */
.frame{position:relative; border-radius:var(--r3); overflow:hidden; background:var(--paper3)}
.frame img{inline-size:100%; block-size:100%; object-fit:cover; aspect-ratio:4/5}
.frame--wide img{aspect-ratio:16/10}
.frame--sq img{aspect-ratio:1}
.frame__cap{
  position:absolute; inset-block-end:var(--s3); inset-inline-start:var(--s3);
  padding:6px var(--s3); border-radius:var(--rf);
  background:rgba(10,12,14,.72); color:#fff; backdrop-filter:blur(8px);
  font-size:var(--t-over); font-weight:700; letter-spacing:.02em;
}
.pillbar{
  display:inline-flex; align-items:center; background:#fff; border-radius:var(--rf);
  padding:6px; box-shadow:var(--e3);
}
.pillbar > *{display:inline-flex; align-items:center; gap:var(--s1); padding:4px var(--s4);
  font-size:var(--t-cap); font-weight:700; color:#12151A; white-space:nowrap}
.pillbar > * + *{border-inline-start:1px solid #E2DCD1}
.pillbar svg{color:#8C6A33; flex:none}

/* ══════════════════ شريط المؤشرات ══════════════════ */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line)}
.kpi{padding:var(--s6) var(--s4); position:relative}
.kpi + .kpi::before{content:""; position:absolute; inset-block:var(--s5); inset-inline-start:0; inline-size:1px; background:var(--line)}
.kpi__v{font-family:var(--ff-display); font-size:clamp(28px,3.2vw,42px); font-weight:700; line-height:1.1; color:var(--ink)}
.kpi__v i{font-style:normal; font-size:.5em; color:var(--brass); margin-inline-start:2px}
.kpi__l{font-size:var(--t-cap); color:var(--ink2); margin-block-start:var(--s1); line-height:1.6}

/* ══════════════════ البطاقات ══════════════════ */
.card{
  background:var(--paper2); border:1px solid var(--line); border-radius:var(--r3);
  padding:var(--s5); transition:border-color var(--d3) var(--ez), transform var(--d3) var(--ez), box-shadow var(--d3) var(--ez);
}
@media (hover:hover){
  a.card:hover,.card--int:hover{border-color:var(--ink3); transform:translateY(-2px); box-shadow:var(--e2)}
}
.card--int:active{transform:translateY(0) scale(.995)}

/* بطاقة مسار / خدمة */
.pcard{
  position:relative; background:var(--paper2); border:1px solid var(--line);
  border-radius:var(--r3); padding:var(--s5); display:flex; flex-direction:column; gap:var(--s2);
  transition:border-color var(--d3) var(--ez), transform var(--d3) var(--ez), box-shadow var(--d3) var(--ez);
}
.pcard__ic{
  inline-size:44px; block-size:44px; border-radius:var(--r2); display:grid; place-items:center;
  background:var(--brass-wash); color:var(--brass); margin-block-end:var(--s2);
  transition:background var(--d3) var(--ez), color var(--d3) var(--ez);
}
.pcard h3{font-size:var(--t-h4)}
.pcard p{font-size:var(--t-sm); color:var(--ink2); line-height:1.8}
.pcard .tlink{margin-block-start:auto; padding-block-start:var(--s2)}
@media (hover:hover){
  .pcard:hover{border-color:var(--ink3); transform:translateY(-3px); box-shadow:var(--e2)}
  .pcard:hover .pcard__ic{background:var(--brass-lg); color:#14100A}
}

/* بطاقة نتيجة قضية */
.rcard{
  background:var(--paper2); border:1px solid var(--line); border-radius:var(--r3);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color var(--d3) var(--ez), transform var(--d3) var(--ez), box-shadow var(--d3) var(--ez);
}
@media (hover:hover){.rcard:hover{border-color:var(--ink3); transform:translateY(-2px); box-shadow:var(--e2)}}
.rcard__h{padding:var(--s4) var(--s5); border-block-end:1px solid var(--line2); display:flex; justify-content:space-between; align-items:center; gap:var(--s2)}
.rcard__yr{font-family:var(--ff-mono); font-size:var(--t-cap); color:var(--ink2)}
.rcard__b{padding:var(--s5); display:grid; gap:var(--s2); flex:1}
.rcard__b h3{font-size:var(--t-h4); line-height:1.45}
.rcard__b p{font-size:var(--t-sm); color:var(--ink2); line-height:1.8}
.rcard__out{
  display:inline-flex; align-items:center; gap:var(--s1); align-self:flex-start;
  padding:6px var(--s3); border-radius:var(--r0);
  background:var(--ok-wash); color:var(--ok); border:1px solid color-mix(in srgb,var(--ok), transparent 70%);
  font-size:var(--t-cap); font-weight:700;
}
.rrow{display:flex; justify-content:space-between; gap:var(--s3); padding-block:var(--s2);
  border-block-start:1px solid var(--line2); font-size:var(--t-cap)}
.rrow dt{color:var(--ink2)} .rrow dd{margin:0; font-weight:600; text-align:end}

/* بطاقة فيديو */
.vcard{
  background:var(--paper2); border:1px solid var(--line); border-radius:var(--r4); overflow:hidden;
  transition:border-color var(--d3) var(--ez), transform var(--d3) var(--ez), box-shadow var(--d3) var(--ez);
}
@media (hover:hover){.vcard:hover{border-color:var(--ink3); transform:translateY(-3px); box-shadow:var(--e3)}}
.vcard__th{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--paper3)}
.vcard__th img{inline-size:100%; block-size:100%; object-fit:cover; transition:transform var(--d4) var(--ez)}
@media (hover:hover){.vcard:hover .vcard__th img{transform:scale(1.04)}}
.vcard__play{
  position:absolute; inset:0; display:grid; place-items:center; border:0; inline-size:100%;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.42)); cursor:pointer;
}
.vcard__play span{
  inline-size:64px; block-size:64px; border-radius:var(--rf); display:grid; place-items:center;
  background:rgba(255,255,255,.94); color:#12151A; box-shadow:var(--e3);
  transition:transform var(--d3) var(--ez-spring), background var(--d2) var(--ez);
}
@media (hover:hover){.vcard__play:hover span{transform:scale(1.09); background:var(--brass-lg)}}
.vcard__play:active span{transform:scale(.96)}
.vcard__dur{
  position:absolute; inset-block-end:var(--s2); inset-inline-end:var(--s2);
  padding:4px var(--s2); border-radius:var(--r0); background:rgba(10,12,14,.85);
  color:#fff; font-family:var(--ff-mono); font-size:12px;
}
.vcard__b{padding:var(--s4) var(--s5) var(--s5)}
.vcard__tag{font-size:var(--t-over); font-weight:700; letter-spacing:.1em; color:var(--brass)}
.vcard__b h3{font-size:var(--t-h4); margin-block-start:var(--s1); line-height:1.45}

/* بطاقة مقال */
.art{
  background:var(--paper2); border:1px solid var(--line); border-radius:var(--r3); overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color var(--d3) var(--ez), transform var(--d3) var(--ez), box-shadow var(--d3) var(--ez);
}
@media (hover:hover){.art:hover{border-color:var(--ink3); transform:translateY(-2px); box-shadow:var(--e2)}}
.art__th{aspect-ratio:16/10; background:var(--paper3); display:grid; place-items:center; color:var(--ink3); border-block-end:1px solid var(--line2)}
.art__b{padding:var(--s5); display:flex; flex-direction:column; gap:var(--s2); flex:1}
.art__b h3{font-size:var(--t-h4); line-height:1.5}
.art__auth{display:flex; align-items:center; gap:var(--s2); margin-block-start:auto;
  padding-block-start:var(--s3); border-block-start:1px solid var(--line2); font-size:var(--t-cap); color:var(--ink2)}
.art__av{inline-size:30px; block-size:30px; border-radius:var(--rf); overflow:hidden; flex:none; background:var(--paper3)}
.art__av img{inline-size:100%; block-size:100%; object-fit:cover}

/* شعارات العملاء */
.clt{
  border:1px solid var(--line2); border-radius:var(--r2); background:var(--paper2);
  aspect-ratio:16/9; display:grid; place-items:center; padding:var(--s4);
  filter:grayscale(1); opacity:.62; transition:all var(--d3) var(--ez);
}
@media (hover:hover){.clt:hover{filter:none; opacity:1; border-color:var(--line)}}
.clt img{max-block-size:56px; object-fit:contain}

/* ══════════════════ النماذج — تشريح كامل ══════════════════
   label · input · helper · error · success · counter · required
   ═══════════════════════════════════════════════════════════ */
.form{
  background:var(--paper2); border:1px solid var(--line); border-radius:var(--r3);
  padding:var(--s6); display:grid; gap:var(--s4);
}
.form > h3{font-size:var(--t-h3); font-family:var(--ff-display); font-weight:700}
.form__sub{font-size:var(--t-cap); color:var(--ink3); margin-block-start:calc(var(--s1)*-1)}
.f{display:grid; gap:6px}
.f > label{
  display:flex; align-items:center; gap:6px;
  font-size:var(--t-cap); font-weight:700; color:var(--ink2);
}
.f .req{color:var(--danger); font-size:12px}
.f .opt{color:var(--ink3); font-weight:500; font-size:12px}
.f input,.f select,.f textarea{
  min-block-size:50px; padding:var(--s2) var(--s3); border-radius:var(--r1);
  border:1.5px solid var(--line); background:var(--paper); color:var(--ink);
  font-size:var(--t-sm); inline-size:100%;
  transition:border-color var(--d2) var(--ez), background var(--d2) var(--ez), box-shadow var(--d2) var(--ez);
}
.f textarea{min-block-size:104px; resize:vertical; line-height:1.8; padding-block:var(--s3)}
.f select{cursor:pointer; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(var(--s4) - 3px) calc(50% + 1px), calc(var(--s4) + 2px) calc(50% + 1px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.f input::placeholder,.f textarea::placeholder{color:var(--ink3); opacity:.75}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--ink3)}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none; border-color:var(--brass); background:var(--paper2);
  box-shadow:0 0 0 3px var(--brass-wash);
}
.f__hint{font-size:12.5px; color:var(--ink2); line-height:1.6}
.f__err{
  display:none; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600; color:var(--danger); line-height:1.6;
}
.f__err svg{inline-size:13px; block-size:13px; flex:none}
.f[data-state="err"] .f__err{display:flex; animation:shakeIn var(--d3) var(--ez)}
.f[data-state="err"] .f__hint{display:none}
.f[data-state="err"] input,.f[data-state="err"] select,.f[data-state="err"] textarea{
  border-color:var(--danger); background:var(--danger-wash);
}
.f[data-state="ok"] input,.f[data-state="ok"] select,.f[data-state="ok"] textarea{border-color:color-mix(in srgb,var(--ok),transparent 45%)}
@keyframes shakeIn{0%{opacity:0;transform:translateX(-4px)}60%{transform:translateX(2px)}100%{opacity:1;transform:none}}
.f__count{font-family:var(--ff-mono); font-size:12px; color:var(--ink2); text-align:end}
.form__priv{display:flex; align-items:center; justify-content:center; gap:var(--s1);
  font-size:12.5px; color:var(--ink2)}
.form__ok{
  display:none; text-align:center; padding:var(--s6) var(--s3);
}
.form[data-sent] > *:not(.form__ok){display:none}
.form[data-sent] .form__ok{display:block; animation:fadeUp var(--d4) var(--ez)}
.form__ok .ic{
  inline-size:56px; block-size:56px; margin-inline:auto; margin-block-end:var(--s3);
  border-radius:var(--rf); display:grid; place-items:center;
  background:var(--ok-wash); color:var(--ok);
}
.form__ok h3{font-size:var(--t-h3); margin-block-end:var(--s1)}
.form__ok p{font-size:var(--t-sm); color:var(--ink2)}

.radios{display:grid; gap:var(--s1)}
.radio{
  display:flex; align-items:flex-start; gap:var(--s3); cursor:pointer;
  padding:var(--s3) var(--s4); border:1.5px solid var(--line); border-radius:var(--r2);
  background:var(--paper); transition:all var(--d2) var(--ez); min-block-size:56px;
}
@media (hover:hover){.radio:hover{border-color:var(--ink3)}}
.radio input{
  appearance:none; inline-size:20px; block-size:20px; flex:none; margin-block-start:3px;
  border:2px solid var(--line); border-radius:var(--rf); cursor:pointer;
  transition:all var(--d2) var(--ez); position:relative; min-block-size:20px; padding:0;
}
.radio input:checked{border-color:var(--brass); border-width:6px}
.radio:has(input:checked){border-color:var(--brass); background:var(--brass-wash)}
.radio span{display:grid; gap:2px; font-size:var(--t-sm)}
.radio b{font-weight:700} .radio span span{font-size:12.5px; color:var(--ink2)}

/* ══════════════════ الأكورديون ══════════════════ */
.acc{border-block-end:1px solid var(--line)}
.acc__btn{
  inline-size:100%; text-align:start; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding-block:var(--s5); min-block-size:64px;
  font-family:var(--ff-body); font-size:var(--t-body); font-weight:700; color:var(--ink);
  transition:color var(--d2) var(--ez);
}
@media (hover:hover){.acc__btn:hover{color:var(--brass)}}
.acc__ic{
  inline-size:34px; block-size:34px; flex:none; border-radius:var(--rf);
  border:1px solid var(--line); display:grid; place-items:center; color:var(--ink2);
  transition:all var(--d3) var(--ez);
}
.acc__btn[aria-expanded="true"] .acc__ic{background:var(--brass-lg); border-color:var(--brass-lg); color:#14100A; transform:rotate(45deg)}
.acc__p{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--d4) var(--ez)}
.acc:has(.acc__btn[aria-expanded="true"]) .acc__p{grid-template-rows:1fr}
.acc__p > div{overflow:hidden}
.acc__p p{padding-block-end:var(--s5); font-size:var(--t-sm); color:var(--ink2); line-height:1.9; max-width:var(--measure)}

/* ══════════════════ الفهرس الجانبي ══════════════════ */
.doc{
  display:grid; grid-template-columns:264px minmax(0,1fr);
  gap:clamp(28px,3.6vw,60px); align-items:start; padding-block:var(--sect);
}
.toc{position:sticky; inset-block-start:calc(76px + var(--s5)); max-block-size:calc(100dvh - 140px); overflow-y:auto}
.toc__t{font-size:var(--t-over); letter-spacing:var(--tr-over); color:var(--ink2); font-weight:700; margin-block-end:var(--s3)}
.toc ol{list-style:none; margin:0; padding:0; display:grid; gap:1px; counter-reset:toc}
.toc a{
  position:relative; display:flex; gap:var(--s2); align-items:baseline; min-block-size:40px;
  padding:var(--s2) var(--s3); border-radius:var(--r1); font-size:var(--t-cap);
  color:var(--ink2); line-height:1.6; transition:all var(--d2) var(--ez);
}
.toc a::before{
  counter-increment:toc; content:counter(toc,decimal-leading-zero);
  font-family:var(--ff-mono); font-size:12px; color:var(--ink3); flex:none;
  transition:color var(--d2) var(--ez);
}
@media (hover:hover){.toc a:hover{color:var(--ink); background:var(--paper3)}}
.toc a[aria-current="true"]{color:var(--ink); font-weight:700; background:var(--brass-wash)}
.toc a[aria-current="true"]::before{color:var(--brass)}

/* ══════════════════ النثر ══════════════════ */
.prose{max-width:var(--measure)}
.prose > * + *{margin-block-start:var(--s5)}
.prose h2{font-size:var(--t-h2); margin-block-start:var(--s10); scroll-margin-top:110px}
.prose h2:first-child{margin-block-start:0}
.prose h3{font-size:var(--t-h3); margin-block-start:var(--s7)}
.prose p{font-size:var(--t-body); line-height:1.95; color:var(--ink2)}
.prose ul,.prose ol{margin:0; padding-inline-start:var(--s5); display:grid; gap:var(--s2); color:var(--ink2)}
.prose li{line-height:1.9}
.prose li::marker{color:var(--brass)}
.prose strong{color:var(--ink); font-weight:700}
.prose a:not(.btn):not(.tlink){color:var(--brass); border-block-end:1px solid color-mix(in srgb,var(--brass),transparent 60%)}

/* صندوق الإجابة المباشرة */
.answer{
  border:1px solid var(--brass); border-inline-start-width:4px;
  border-radius:var(--r2); padding:var(--s5); background:var(--brass-wash);
}
.answer b{display:flex; align-items:center; gap:var(--s1); font-size:var(--t-over);
  letter-spacing:var(--tr-over); color:var(--brass); margin-block-end:var(--s2)}
.answer p{font-size:var(--t-body); color:var(--ink); line-height:1.9}

/* ══════════════════ المسار المرقّم ══════════════════ */
.flow{border:1px solid var(--line); border-radius:var(--r3); overflow:hidden; background:var(--paper2)}
.fstep{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s4);
  padding:var(--s5); border-block-end:1px solid var(--line2); position:relative;
  transition:background var(--d3) var(--ez);
}
.fstep:last-child{border-block-end:0}
@media (hover:hover){.fstep:hover{background:var(--paper3)}}
.fstep__n{
  inline-size:44px; block-size:44px; flex:none; border-radius:var(--rf);
  display:grid; place-items:center; background:var(--paper3); color:var(--brass);
  font-family:var(--ff-mono); font-size:var(--t-sm); font-weight:600;
  border:1px solid var(--line); transition:all var(--d3) var(--ez);
}
@media (hover:hover){.fstep:hover .fstep__n{background:var(--brass-lg); color:#14100A; border-color:var(--brass-lg)}}
.fstep h3{font-size:var(--t-h4); margin-block-end:4px}
.fstep p{font-size:var(--t-sm); color:var(--ink2); line-height:1.85}
.fstep__m{display:flex; flex-wrap:wrap; gap:var(--s1); margin-block-start:var(--s2)}

/* ══════════════════ الجدول ══════════════════ */
.tblwrap{
  border:1px solid var(--line); border-radius:var(--r3); overflow:auto;
  background:var(--paper2); max-inline-size:100%;
}
.tbl{inline-size:100%; border-collapse:collapse; font-size:var(--t-sm); min-inline-size:560px}
.tbl caption{
  caption-side:top; text-align:start; padding:var(--s4) var(--s5);
  font-size:var(--t-cap); color:var(--ink2); border-block-end:1px solid var(--line2);
}
.tbl thead th{
  position:sticky; inset-block-start:0; z-index:1;
  background:var(--paper3); text-align:start; padding:0;
  font-size:var(--t-over); letter-spacing:.06em; color:var(--ink2); font-weight:700;
  border-block-end:1px solid var(--line); white-space:nowrap;
}
.tbl thead th > span,.tbl thead th > button{
  display:flex; align-items:center; gap:6px; inline-size:100%;
  padding:var(--s3) var(--s4); min-block-size:46px; text-align:start;
  background:none; border:0; font:inherit; color:inherit;
}
.tbl thead th > button{cursor:pointer; transition:color var(--d2) var(--ez)}
@media (hover:hover){.tbl thead th > button:hover{color:var(--brass)}}
.tbl thead th svg{opacity:.3; transition:opacity var(--d2) var(--ez), transform var(--d2) var(--ez)}
.tbl th[aria-sort="ascending"] svg{opacity:1; color:var(--brass)}
.tbl th[aria-sort="descending"] svg{opacity:1; color:var(--brass); transform:rotate(180deg)}
.tbl td{padding:var(--s3) var(--s4); border-block-end:1px solid var(--line2); color:var(--ink2); line-height:1.7; vertical-align:top}
.tbl tbody tr{transition:background var(--d2) var(--ez)}
@media (hover:hover){.tbl tbody tr:hover{background:var(--paper3)}}
.tbl tbody tr:last-child td{border-block-end:0}
.tbl td strong{color:var(--ink)}

/* ══════════════════ الحاسبة ══════════════════ */
.calc{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:start}
.calc__form{background:var(--paper2); border:1px solid var(--line); border-radius:var(--r3); padding:var(--s6); display:grid; gap:var(--s4)}
.calc__out{
  position:sticky; inset-block-start:calc(76px + var(--s5));
  border:1px solid var(--brass); border-radius:var(--r3);
  padding:var(--s6); background:var(--brass-wash);
}
.calc__big{
  font-family:var(--ff-display); font-size:clamp(34px,4.6vw,54px); font-weight:700;
  line-height:1.1; margin-block:var(--s1) var(--s0); color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.calc__big i{font-style:normal; font-size:.42em; color:var(--brass); margin-inline-start:var(--s1)}
.calc__note{font-size:var(--t-cap); color:var(--ink2); line-height:1.75; min-block-size:2.6em}
.calc__rows{margin-block-start:var(--s5); display:grid; gap:0}
.calc__rows > div{
  display:flex; justify-content:space-between; gap:var(--s3);
  padding-block:var(--s2); border-block-end:1px solid color-mix(in srgb,var(--brass),transparent 82%);
  font-size:var(--t-cap);
}
.calc__rows > div:last-child{border-block-end:0}
.calc__rows dt{color:var(--ink2)} .calc__rows dd{margin:0; font-weight:700; font-family:var(--ff-mono)}
/* المنزلق */
.slider{display:grid; gap:var(--s1)}
.slider__top{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2)}
.slider__v{font-family:var(--ff-mono); font-size:var(--t-sm); font-weight:600; color:var(--brass)}
.slider input[type=range]{
  appearance:none; inline-size:100%; block-size:32px; background:none; cursor:pointer; padding:0; border:0; min-block-size:32px;
}
.slider input[type=range]::-webkit-slider-runnable-track{
  block-size:4px; border-radius:2px;
  background:linear-gradient(to left, var(--brass) var(--pct,0%), var(--line) var(--pct,0%));
}
.slider input[type=range]::-moz-range-track{block-size:4px; border-radius:2px; background:var(--line)}
.slider input[type=range]::-moz-range-progress{block-size:4px; border-radius:2px; background:var(--brass)}
.slider input[type=range]::-webkit-slider-thumb{
  appearance:none; inline-size:22px; block-size:22px; border-radius:var(--rf); margin-block-start:-9px;
  background:var(--paper2); border:2px solid var(--brass); box-shadow:var(--e2);
  transition:transform var(--d1) var(--ez);
}
.slider input[type=range]::-moz-range-thumb{
  inline-size:22px; block-size:22px; border-radius:var(--rf);
  background:var(--paper2); border:2px solid var(--brass); box-shadow:var(--e2);
}
.slider input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)}
.slider__sc{display:flex; justify-content:space-between; font-family:var(--ff-mono); font-size:12px; color:var(--ink2)}

/* ══════════════════ كتل خاصة ══════════════════ */
.trig{border:1px solid var(--brass); border-radius:var(--r3); overflow:hidden; background:var(--paper2)}
.trig__h{padding:var(--s4) var(--s5); background:var(--brass-wash); display:flex; align-items:center; gap:var(--s2);
  border-block-end:1px solid color-mix(in srgb,var(--brass),transparent 70%)}
.trig__h svg{color:var(--brass); flex:none}
.trig__h h3{font-size:var(--t-h4)}
.trig ul{list-style:none; margin:0; padding:var(--s1) 0; display:grid}
.trig li{display:flex; gap:var(--s3); padding:var(--s3) var(--s5); font-size:var(--t-sm);
  color:var(--ink2); line-height:1.8; border-block-end:1px solid var(--line2)}
.trig li:last-child{border-block-end:0}
.trig li svg{color:var(--brass); flex:none; margin-block-start:5px}
.trig li b{color:var(--ink)}

.lawref{border-inline-start:3px solid var(--brass); padding-inline-start:var(--s5); display:grid; gap:var(--s3)}
.lawref__h{display:flex; align-items:center; gap:var(--s1); font-size:var(--t-over);
  letter-spacing:var(--tr-over); color:var(--brass)}
.lawref__slot{border:1px dashed var(--line); border-radius:var(--r1); padding:var(--s3) var(--s4);
  font-size:var(--t-cap); color:var(--ink2)}

.tmpl{
  background:var(--paper3); border:1px dashed var(--line); border-radius:var(--r2);
  padding:var(--s4) var(--s5); font-size:var(--t-sm); line-height:2.1; color:var(--ink2);
}
.tmpl span{display:block}
.tmpl b{color:var(--brass); font-weight:700}
.copybar{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-block-end:var(--s2)}

.note{
  display:flex; gap:var(--s2); padding:var(--s3) var(--s4); border-radius:var(--r2);
  background:var(--paper3); border:1px solid var(--line2);
  font-size:var(--t-cap); color:var(--ink2); line-height:1.75;
}
.note svg{color:var(--brass); flex:none; margin-block-start:3px}
.note--warn{background:var(--warn-wash); border-color:color-mix(in srgb,var(--warn),transparent 78%)}
.note--warn svg{color:var(--warn)}
.disc{display:flex; gap:var(--s2); font-size:12.5px; color:var(--ink2); line-height:1.7}
.disc svg{flex:none; margin-block-start:3px}

/* شريط الدعوة */
.strip{
  border-radius:var(--r4); padding:clamp(28px,3.2vw,44px);
  background:var(--paper2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s6); flex-wrap:wrap;
}
.strip h3{font-family:var(--ff-display); font-size:var(--t-h3); margin-block-end:var(--s1)}
.strip p{font-size:var(--t-sm); color:var(--ink2); max-width:50ch; line-height:1.85}
.strip__a{display:flex; gap:var(--s2); flex-wrap:wrap}

/* توقيع المراجعة */
.byline{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s5); border:1px solid var(--line); border-radius:var(--r2);
  background:var(--paper2);
}
.byline__av{inline-size:46px; block-size:46px; border-radius:var(--rf); overflow:hidden; flex:none; background:var(--paper3)}
.byline__av img{inline-size:100%; block-size:100%; object-fit:cover}
.byline b{display:block; font-size:var(--t-sm)}
.byline span{display:block; font-size:12.5px; color:var(--ink2); margin-block-start:2px}

/* ══════════════════ متفرقات موروثة ══════════════════ */
.who__in,.faq__in,.contact__in,.office{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,64px); align-items:center}
.cinfo{list-style:none; margin:var(--s6) 0 0; padding:0; display:grid; gap:var(--s3)}
.cinfo li{display:flex; gap:var(--s3); align-items:flex-start}
.cinfo__ic{inline-size:40px; block-size:40px; border-radius:var(--r2); flex:none; display:grid; place-items:center;
  background:var(--brass-wash); color:var(--brass)}
.cinfo b{display:block; font-size:var(--t-cap); color:var(--ink2); font-weight:600}
.cinfo span{display:block; font-size:var(--t-sm); font-weight:600}
.cinfo div span:last-child{color:var(--ink)}
.creds .wrap{display:grid; grid-template-columns:repeat(4,1fr)}
.cred{padding:var(--s6) var(--s4); position:relative; display:flex; gap:var(--s3); align-items:flex-start}
.cred__ic{inline-size:40px; block-size:40px; border-radius:var(--r2); flex:none; display:grid; place-items:center;
  background:var(--brass-wash); color:var(--brass)}
.cred b{display:block; font-size:var(--t-sm); margin-block-end:2px}
.cred span{font-size:var(--t-cap); color:var(--ink2); line-height:1.65}
.offcard{border:1px solid var(--line); border-radius:var(--r3); overflow:hidden; background:var(--paper2); position:relative}
.offcard img{aspect-ratio:4/3; object-fit:cover; inline-size:100%}
.offcard figcaption,.offcard h3{padding:var(--s3) var(--s4); font-size:var(--t-sm); font-weight:700}
.offcard p{padding:0 var(--s4) var(--s4); font-size:var(--t-sm); color:var(--ink2); line-height:1.8}
.offgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4)}
.rev{background:var(--paper2); border:1px solid var(--line); border-radius:var(--r3); padding:var(--s5); display:grid; gap:var(--s3)}
.rev__top{display:flex; justify-content:space-between; gap:var(--s2); align-items:center}
.rev__stars{display:flex; gap:2px; color:var(--brass)}
.rev__src{font-size:12.5px; color:var(--ink2)}
.rev__q{font-size:var(--t-sm); line-height:1.9; color:var(--ink2)}
.rev__by{display:flex; align-items:center; gap:var(--s2); font-size:var(--t-cap); color:var(--ink2)}
.rev__av{inline-size:34px; block-size:34px; border-radius:var(--rf); background:var(--paper3); display:grid; place-items:center;
  font-weight:700; color:var(--brass); font-size:var(--t-cap); flex:none}
.revagg{display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap}
.revagg__score{font-family:var(--ff-display); font-size:44px; font-weight:700; line-height:1}
.revagg__stars{display:flex; gap:3px; color:var(--brass)}
.revagg__meta{font-size:var(--t-cap); color:var(--ink2)}
.fee{background:var(--paper2); border:1px solid var(--line); border-radius:var(--r3); padding:var(--s5); display:grid; gap:var(--s2)}
.fee__p{font-family:var(--ff-mono); font-size:var(--t-h4); font-weight:600; color:var(--brass)}
.feerange{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4)}
.courts{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3)}
.court{display:flex; gap:var(--s3); padding:var(--s4); border:1px solid var(--line); border-radius:var(--r2); background:var(--paper2);
  transition:border-color var(--d3) var(--ez), transform var(--d3) var(--ez)}
@media(hover:hover){.court:hover{border-color:var(--ink3); transform:translateY(-2px)}}
.court__ic{inline-size:40px; block-size:40px; border-radius:var(--r2); flex:none; display:grid; place-items:center;
  background:var(--brass-wash); color:var(--brass)}
.court__t b{display:block; font-size:var(--t-sm)}
.court__t span{font-size:var(--t-cap); color:var(--ink2); line-height:1.65}
.libgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4)}
.lib{background:var(--paper2); border:1px solid var(--line); border-radius:var(--r3); padding:var(--s5); display:grid; gap:var(--s2);
  transition:border-color var(--d3) var(--ez), transform var(--d3) var(--ez), box-shadow var(--d3) var(--ez)}
@media(hover:hover){.lib:hover{border-color:var(--ink3); transform:translateY(-2px); box-shadow:var(--e2)}}
.lib__ic{inline-size:40px; block-size:40px; border-radius:var(--r2); display:grid; place-items:center; background:var(--brass-wash); color:var(--brass)}
.lib__n{font-family:var(--ff-mono); font-size:12px; color:var(--ink2)}
.libsearch{position:relative; max-inline-size:460px}
.libsearch input{min-block-size:52px; padding-inline:var(--s10) var(--s4); border-radius:var(--rf);
  border:1.5px solid var(--line); background:var(--paper2); inline-size:100%; font-size:var(--t-sm)}
.libsearch input:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-wash)}
.libsearch svg{position:absolute; inset-inline-start:var(--s4); inset-block-start:50%; transform:translateY(-50%); color:var(--ink3)}
.docbox{border:1px solid var(--line); border-radius:var(--r3); overflow:hidden; background:var(--paper2)}
.docbox__h{padding:var(--s4) var(--s5); background:var(--paper3); border-block-end:1px solid var(--line); font-weight:700; font-size:var(--t-sm)}
.docbox__b{padding:var(--s4) var(--s5); display:grid; gap:var(--s2)}
.docbox__b li,.docbox__b > div{display:flex; gap:var(--s2); font-size:var(--t-sm); color:var(--ink2); line-height:1.8}
.docbox ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s2)}
.docbox svg{color:var(--brass); flex:none; margin-block-start:5px}
.stage{background:var(--paper2); border:1px solid var(--line); border-radius:var(--r2); padding:var(--s4)}
.stage__n{font-family:var(--ff-mono); font-size:var(--t-cap); color:var(--brass); margin-block-end:var(--s1)}
.stage h3{font-size:var(--t-sm); margin-block-end:4px}
.stage p{font-size:var(--t-cap); color:var(--ink2); line-height:1.7}
.paths,.pgrid{display:grid; gap:var(--s4)}
.urgent{display:flex; gap:var(--s3)}
.urgent__ic{inline-size:48px; block-size:48px; flex:none; border-radius:var(--r2); display:grid; place-items:center;
  background:var(--brass-wash); color:var(--brass)}
.urgent__t b{display:block; font-size:var(--t-sm); margin-block-end:2px}
.urgent__t span{font-size:var(--t-cap); color:var(--ink2); line-height:1.7}
.summary{display:grid; gap:var(--s3)}
.media,.results,.fees,.faq{background:var(--paper2)}
.revs{background:var(--paper)}
.media.inv,.results.inv,.fees.inv,.faq.inv,.revs.inv,.sect.inv{background:var(--paper)}
.vgrid{display:grid; gap:var(--s5); grid-template-columns:repeat(3,1fr)}
.cgrid{display:grid; gap:var(--s3); grid-template-columns:repeat(6,1fr)}
.arts{}
.who__ph,.who__meta,.who__tags,.who__act{}
.dash{position:relative; border-radius:var(--r3); overflow:hidden}
.fmeta{display:flex; gap:var(--s1); flex-wrap:wrap}
.fm-do{background:var(--brass-wash); color:var(--brass); padding:4px var(--s2); border-radius:var(--r0); font-size:12px; font-weight:700}

/* ══════════════════ الاستجابة ══════════════════ */
@media (max-width:1180px){
  .cgrid{grid-template-columns:repeat(3,1fr)}
  .g5{grid-template-columns:repeat(3,1fr)}
  .vgrid{grid-template-columns:repeat(2,1fr)}
  .libgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1080px){
  .hero__in,.who__in,.faq__in,.contact__in,.office,.phero__in{grid-template-columns:1fr}
  .g4,.offgrid{grid-template-columns:repeat(2,1fr)}
  .creds .wrap{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpi:nth-child(odd)::before{display:none}
  .ftr__g{grid-template-columns:1fr 1fr}
  .doc{grid-template-columns:1fr}
  .toc{position:static; max-block-size:none; border:1px solid var(--line); border-radius:var(--r2); padding:var(--s4); background:var(--paper2)}
  .toc ol{grid-template-columns:repeat(2,1fr); display:grid}
  .calc{grid-template-columns:1fr}
  .calc__out{position:static}
  .nav{display:none}
  .burger{display:grid}
  .hdr .wrap{min-block-size:66px}
  .hdr__cta .btn--brass{display:none}
}
@media (max-width:760px){
  :root{--sect:clamp(52px,10vw,72px); --t-body:16.5px}
  .g2,.g3,.g4,.g5,.vgrid,.libgrid,.offgrid,.feerange,.courts,.cgrid{grid-template-columns:1fr}
  .cgrid{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:1fr}
  .kpi + .kpi::before{inset-inline:var(--s5) var(--s5); inset-block-start:0; inline-size:auto; block-size:1px}
  .creds .wrap{grid-template-columns:1fr}
  .ftr__g{grid-template-columns:1fr; gap:var(--s6)}
  .topbar__r a:not(:first-child){display:none}
  .topbar__l{display:none}
  .topbar .wrap{justify-content:flex-end}
  .strip{flex-direction:column; align-items:stretch}
  .strip__a .btn{flex:1}
  .toc ol{grid-template-columns:1fr}
  .form{padding:var(--s5)}
  .fstep{grid-template-columns:1fr; gap:var(--s2)}
  body{padding-block-end:76px}
  .abar{
    display:flex; position:fixed; inset-inline:0; inset-block-end:0; z-index:var(--z-sticky);
    background:color-mix(in srgb,var(--paper2) 94%, transparent); backdrop-filter:blur(16px);
    border-block-start:1px solid var(--line);
    padding:var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom));
    box-shadow:0 -6px 24px rgba(18,21,26,.08);
  }
  .abar a{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-block-size:56px; border-radius:var(--r2); font-size:10.5px; font-weight:700; color:var(--ink2);
    transition:background var(--d2) var(--ez);
  }
  .abar a:active{background:var(--paper3)}
  .abar a.pri{background:var(--brass-lg); color:#14100A}
  .abar svg{inline-size:20px; block-size:20px}
}
@media (max-width:400px){
  :root{--gut:16px}
  .btn{padding-inline:var(--s4)}
}

/* ══════════════════ النثر: النص محصور، والمكوّنات تتمدّد ══════════════════ */
.prose{max-width:none}
.prose > p,.prose > ul,.prose > ol,.prose > h2,.prose > h3,.prose > h4,
.prose > .answer,.prose > .lead,.prose > .disc,.prose > .note{max-width:var(--measure)}
.doc .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
.doc .feerange{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3)}
.doc .fee{padding:var(--s4)}
.doc .fee__p{font-size:var(--t-body)}
@media (max-width:900px){.doc .g3,.doc .feerange{grid-template-columns:1fr}}
.shead--c .over::before{display:none}
.shead--c .over{justify-content:center}

/* شبكة المقر — صورتان لا أربع */
.office .offgrid{grid-template-columns:1.45fr 1fr; gap:var(--s5); align-items:stretch}
.office .offcard{display:flex; flex-direction:column}
.office .offcard img{aspect-ratio:16/11; flex:1}
.offcard figcaption{color:var(--ink2)}
@media (max-width:900px){.office .offgrid{grid-template-columns:1fr}}
/* قسم المقر ليس شبكة عمودين */
.sect.office{display:block}
.office .wrap{display:block}
/* ══════════════════ القائمة المنسدلة للخدمات ══════════════════ */
.nav__grp{position:relative; display:inline-flex}
.nav__grp > a{gap:4px}
.nav__chev{flex:none; transition:transform var(--d2) var(--ez)}
.nav__grp:hover > a .nav__chev,
.nav__grp:focus-within > a .nav__chev{transform:rotate(180deg)}
.nav__sub,.nav__sub2{
  list-style:none; margin:0; padding:var(--s1);
  background:var(--paper2); border:1px solid var(--line); border-radius:var(--r1);
  box-shadow:var(--e3); min-inline-size:230px;
}
.nav__sub{
  position:absolute; inset-block-start:100%; inset-inline-end:0; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--d2) var(--ez), transform var(--d2) var(--ez), visibility var(--d2);
}
.nav__grp:hover > .nav__sub,
.nav__grp:focus-within > .nav__sub{opacity:1; visibility:visible; transform:none}
.nav__sub li{position:relative}
.nav__sub a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  min-block-size:40px; padding-inline:var(--s2); border-radius:calc(var(--r1) - 2px);
  font-size:var(--t-sm); font-weight:600; color:var(--ink2); white-space:nowrap;
  transition:color var(--d2) var(--ez), background var(--d2) var(--ez);
}
.nav__sub a::after{content:none}
@media (hover:hover){.nav__sub a:hover{color:var(--brass); background:var(--brass-wash)}}
.nav__has > a::after{
  content:"\203a"; content:"\203a" / ""; display:inline-block;
  transform:scaleX(-1); opacity:.55; font-size:1.1em; line-height:1;
}
.nav__sub2{
  position:absolute; inset-block-start:-1px; inset-inline-end:100%; z-index:61;
  opacity:0; visibility:hidden; transform:translateX(-6px);
  transition:opacity var(--d2) var(--ez), transform var(--d2) var(--ez), visibility var(--d2);
}
[dir="rtl"] .nav__sub2{transform:translateX(6px)}
.nav__has:hover > .nav__sub2,
.nav__has:focus-within > .nav__sub2{opacity:1; visibility:visible; transform:none}

/* الدرج: قائمة قابلة للطي بلا جافاسكربت */
.nav__acc{border-radius:var(--r1)}
.nav__acc > summary{
  display:flex; align-items:center; gap:6px; cursor:pointer; list-style:none;
  min-block-size:46px; padding-inline:var(--s3); border-radius:var(--r1);
  font-size:var(--t-sm); font-weight:600; color:var(--ink2);
}
.nav__acc > summary::-webkit-details-marker{display:none}
.nav__acc[open] > summary{color:var(--ink)}
.nav__acc[open] > summary .nav__chev{transform:rotate(180deg)}
.drawer nav .nav__acc-i{
  min-block-size:42px; padding-inline-start:var(--s5);
  font-size:var(--t-sm); color:var(--ink3);
}
.drawer nav .nav__acc-i--d{padding-inline-start:var(--s7); font-size:13px}

/* ══════════════════ صفحة المقال: هيرو ومسار وعمود جانبي ══════════════════ */

/* مسار التنقّل داخل الهيرو — لا شريط عريض ولا خلفية */
.phero .crumbs,.phero__doc ~ .crumbs{
  display:block; background:transparent; border:0; padding:0;
  margin-block-end:var(--s5); font-size:var(--t-cap); color:var(--ink3); line-height:1.8;
}
.phero .crumbs a{color:var(--ink2)}
@media (hover:hover){.phero .crumbs a:hover{color:var(--brass)}}
.phero .crumbs [aria-current="page"]{color:var(--ink3); font-weight:600}

.phero--doc{padding-block:clamp(32px,4vw,58px)}
.phero__doc{max-inline-size:74ch}
.phero--doc h1{margin-block-end:var(--s4); text-wrap:balance}
.phero--doc .phero__sub{max-inline-size:70ch; margin-block-end:var(--s5)}
.phero__meta{font-size:var(--t-cap); color:var(--ink3); margin-block-start:var(--s3)}
.over--link{text-decoration:none}
@media (hover:hover){.over--link:hover{color:var(--brass-lg)}}

/* سطر التوقيع: صفّ مسطّح لا بطاقة عائمة */
.byline--flat{
  border:0; background:transparent; padding:0; gap:var(--s3);
  border-block-start:1px solid var(--line); padding-block-start:var(--s4);
  max-inline-size:70ch;
}
.byline--flat .byline__av{
  inline-size:40px; block-size:40px; display:grid; place-items:center;
  font-family:var(--ff-display); font-size:16px; font-weight:700; color:var(--brass);
  background:var(--brass-wash); border:1px solid var(--line);
}
.byline__m{display:grid; gap:2px}
.byline__m > span{display:flex; align-items:center; gap:6px; flex-wrap:wrap}

/* الشبكة: فهرس لاصق + متن */
.docaside{align-self:stretch}
.doc--solo{grid-template-columns:minmax(0,1fr)}
.docbody{min-inline-size:0}
.artimg{margin-block-end:var(--s8)}
.artimg img{aspect-ratio:16/9}
.pglinks{margin-block-start:var(--s7); display:flex; gap:var(--s1); flex-wrap:wrap; font-size:var(--t-sm)}

/* الفهرس: مستوى ثانٍ أهدأ */
.toc ol ol{padding-inline-start:var(--s4); gap:0; margin-block-start:2px}
.toc ol ol a{min-block-size:32px; padding-block:5px; font-size:12.5px; color:var(--ink3)}
.toc ol ol a::before{content:"—"; counter-increment:none; opacity:.5}

/* ══════════════════ متن المقال: سطر ممتلئ ومضبوط ══════════════════ */
.doc .prose,
.doc .prose > p,.doc .prose > ul,.doc .prose > ol,.doc .prose > h2,
.doc .prose > h3,.doc .prose > h4,.doc .prose > .answer,
.doc .prose > .lead,.doc .prose > .disc,.doc .prose > .note{max-width:none}
.doc .prose p,.doc .prose li{text-align:justify; text-justify:inter-word}
.doc .prose h2,.doc .prose h3,.doc .prose h4{text-align:start; text-wrap:balance}
.doc .acc__p p{max-width:none}
.prose figure,.prose img{max-inline-size:100%; height:auto}
.prose figure{border-radius:var(--r3); overflow:hidden}
/* روابط معطوبة يشطبها فاحص الروابط — لا نعرض الشطب للزائر */
.prose a.broken_link{text-decoration:none}

/* الخلاصة داخل صندوق الإجابة */
.prose .answer > *{margin-block-start:var(--s3)}
.prose .answer > :first-child{margin-block-start:0}
.prose .answer p{color:var(--ink)}
.prose .answer ul,.prose .answer ol{color:var(--ink)}

/* الجداول */
.prose .tblwrap{margin-block-start:var(--s5)}
.prose .tbl th,.prose .tbl td{text-align:start}
.prose .tbl thead th{white-space:nowrap}

/* الأسئلة الشائعة */
.accgrp{border-block-start:1px solid var(--line)}
.acc__h{margin:0; font-size:inherit; line-height:inherit}
.prose .accgrp{margin-block-start:var(--s5)}
.prose .acc__btn > span:first-child{text-align:start}
.acc__p > div > *{margin-block-start:var(--s3)}
.acc__p > div > :first-child{margin-block-start:0}
.acc__p > div > :last-child{margin-block-end:var(--s5)}

/* ══════════════════ إصلاحات بطاقات ══════════════════ */
/* قوائم التحقّق داخل بطاقات الخدمات */
.pcard ul,.court ul{list-style:none; margin:var(--s1) 0 0; padding:0; display:grid; gap:7px}
.pcard li,.court li{
  display:flex; align-items:flex-start; gap:var(--s2);
  font-size:var(--t-sm); color:var(--ink2); line-height:1.7;
}
.pcard li::marker,.court li::marker{content:""}
.pcard li svg,.court li svg{color:var(--brass); flex:none; margin-block-start:5px}

/* بطاقة المقال: صورة حقيقية وتصنيف وبديل أنيق */
.art__th img{inline-size:100%; block-size:100%; object-fit:cover}
.art__ph{display:grid; place-items:center; inline-size:100%; block-size:100%; color:var(--ink3); opacity:.55}
.art__cat{font-size:var(--t-over); font-weight:700; letter-spacing:var(--tr-over); color:var(--brass)}
.art__av{display:grid; place-items:center; font-family:var(--ff-display); font-size:13px; font-weight:700; color:var(--brass)}
.art__meta{display:flex; align-items:center; gap:4px; flex-wrap:wrap}

/* شريط الحالة العاجلة: يتنفّس بعيدًا عن البطاقات */
.g3 + .urgent,.g4 + .urgent{
  margin-block-start:var(--s7); align-items:center;
  padding:var(--s4) var(--s5); border:1px solid var(--line);
  border-radius:var(--r3); background:var(--paper2);
}
.urgent__t h3{font-size:var(--t-h4); margin-block-end:2px}
.urgent__t p{font-size:var(--t-cap); color:var(--ink2); line-height:1.7; max-width:64ch}
.g3 + .urgent .btn{margin-inline-start:auto; flex:none}

@media (max-width:1000px){
  .doc{grid-template-columns:minmax(0,1fr)}
  .docaside{align-self:auto}
  .g3 + .urgent{flex-direction:column; align-items:flex-start}
  .g3 + .urgent .btn{margin-inline-start:0}
}
@media (max-width:640px){
  .doc .prose p,.doc .prose li{text-align:start}
}

/* المتن على يمين الصفحة (بداية القراءة) والفهرس على يساره */
.doc--art{grid-template-columns:minmax(0,1fr) 288px}
.doc--art.doc--solo{grid-template-columns:minmax(0,1fr)}

/* روابط المتن: تسطير خفيف بمسافة عن الحروف — لا خطّ ملاصق يشبه الشطب */
.prose a:not(.btn):not(.tlink){
  border-block-end:0;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.26em;
  text-decoration-skip-ink:auto;
  text-decoration-color:color-mix(in srgb,var(--brass),transparent 62%);
  transition:text-decoration-color var(--d2) var(--ez), color var(--d2) var(--ez);
}
@media (hover:hover){
  .prose a:not(.btn):not(.tlink):hover{color:var(--brass-lg); text-decoration-color:currentColor}
}
.prose a.broken_link{text-decoration-line:underline}

@media (max-width:1000px){
  .doc--art{grid-template-columns:minmax(0,1fr)}
  .docaside{order:-1}
}

/* مسافة أهدأ بين الهيرو وبداية المقال */
.doc--art{padding-block-start:var(--s8)}
.doc--art .toc{inset-block-start:calc(76px + var(--s4))}

@media (max-width:1000px){
  .doc--art .toc{max-block-size:min(46vh,360px); overflow:auto; overscroll-behavior:contain}
}

/* بلا جافاسكربت: الأسئلة الشائعة مفتوحة بالكامل بدل أن تبقى مطويّة */
.no-js .acc__p{grid-template-rows:1fr}
.no-js .acc__ic{display:none}

/* ══════════════════ ضمانات الاستجابة ══════════════════
   خلايا الشبكة تأخذ حدًّا أدنى = min-content افتراضيًا، فأي عنصر
   لا يقبل الالتفاف (شريط الاعتمادات مثلًا) كان يوسّع العمود ويخرج
   بالمحتوى عن إطار الصفحة على الشاشات الضيقة. */
.hero__in > *,.who__in > *,.faq__in > *,.contact__in > *,.office > *,.phero__in > *,
.g2 > *,.g3 > *,.g4 > *,.g5 > *,.vgrid > *,.libgrid > *,.offgrid > *,
.feerange > *,.courts > *,.cgrid > *,.kpis > *,.creds .wrap > *,.ftr__g > *,
.doc > *,.summary > *,.flow > *{min-inline-size:0}

@media (max-width:1080px){
  .hero__in,.who__in,.faq__in,.contact__in,.office,.phero__in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .g2,.g3,.g4,.g5,.vgrid,.libgrid,.offgrid,.feerange,.courts{grid-template-columns:minmax(0,1fr)}
}

/* شريط الاعتمادات: يلتفّ بدل أن يفرض عرضه على الصفحة */
.pillbar{flex-wrap:wrap; max-inline-size:100%}
.pillbar > *{min-inline-size:0}

/* لا شيء داخل المتن يتجاوز عرضه */
.prose iframe,.prose video,.prose embed,.prose object,.prose pre{max-inline-size:100%}
.prose pre{overflow-x:auto}
.prose{overflow-wrap:anywhere}

/* المستوى الثاني في القائمة يفتح إلى الداخل لا خارج الشاشة */
.nav__sub2{inset-inline-end:auto; inset-inline-start:100%}
[dir="rtl"] .nav__sub2{transform:translateX(-6px)}
.nav__has:hover > .nav__sub2,.nav__has:focus-within > .nav__sub2{transform:none}

/* حاويات الأقسام التي هي شبكات (.paths مثلًا) كانت تُوسّع عمودها إلى
   أقصى محتوى `.wrap`، فيخرج القسم عن عرض الشاشة تحت 360px. */
.paths,.pgrid{grid-template-columns:minmax(0,1fr)}
.wrap{max-inline-size:100%}

/* شريط الحالة العاجلة: يلتفّ على الشاشات الضيقة (كان يشمل .g3 فقط) */
.urgent{flex-wrap:wrap}
@media (max-width:1000px){
  .g3 + .urgent,.g4 + .urgent{flex-direction:column; align-items:flex-start}
  .g3 + .urgent .btn,.g4 + .urgent .btn{margin-inline-start:0}
}

/* أزرار عائمة من إضافات خارجية تغطّي شريط الإجراءات السفلي — التصميم يغنينا عنها */
.call-widget,.whatsapp-widget,.whatsapp-widget-left,.whatsapp-widget-right,
.call-now-button,.chat-now-button,#whatsapp-widget,#call-widget,
.whatsapp-qr-container,.whatsapp-qr-background{display:none !important}

/* مصيدة البريد المزعج: تُخفى بالقصّ داخل بكسل واحد.
   الإخفاء بـ left:-9999px كان يجعل عرض المستند ~10000px، فيحسب الجوال
   مقياس التصغير على أساسه ويظهر المحتوى مزاحًا وخارج الإطار. */
.alm-hp{
  position:absolute !important; inline-size:1px; block-size:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  margin:-1px; padding:0; border:0;
}

/* شبكة ثلاثية تحتوي خمس بطاقات: صفّان متوازنان (3 + 2) */
.g3:has(> :nth-child(5)):not(:has(> :nth-child(6))){grid-template-columns:repeat(6,minmax(0,1fr))}
.g3:has(> :nth-child(5)):not(:has(> :nth-child(6))) > *{grid-column:span 2}
.g3:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(4),
.g3:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(5){grid-column:span 3}
@media (max-width:760px){
  .g3:has(> :nth-child(5)):not(:has(> :nth-child(6))){grid-template-columns:minmax(0,1fr)}
  .g3:has(> :nth-child(5)):not(:has(> :nth-child(6))) > *{grid-column:auto}
}

/* ══════════════════ تعديلات التصميم — 25 أغسطس 2026 ══════════════════ */

/* ── 1) شريط الاعتمادات: شعارات رسمية بحجم أكبر ─────────────────────
   كانت أيقونات خطّية 40px داخل مربّع نحاسي. صارت شعارات الجهات نفسها
   (وزارة العدل · الهيئة السعودية للمحامين · وزارة التجارة) بارتفاع موحّد
   52px، فوقها العنوان والرقم — تخطيط عمودي متوسّط يستوعب نِسب الشعارات
   المختلفة (المربّع والعريض) دون أن تبدو متفاوتة. */
.creds .wrap{grid-template-columns:repeat(4,minmax(0,1fr))}
.cred{
  padding:var(--s7) var(--s4); position:relative;
  display:grid; gap:var(--s3); justify-items:center; align-content:start; text-align:center;
}
.cred + .cred::before{
  content:""; position:absolute; inset-block:var(--s6); inset-inline-start:0;
  inline-size:1px; background:var(--line2);
}
.cred__ic{
  inline-size:auto; block-size:56px; padding:0; border-radius:0;
  background:none; color:var(--brass);
  display:grid; place-items:center;
}
.cred__ic img{block-size:52px; inline-size:auto; max-inline-size:168px; object-fit:contain; display:block}
.cred__ic svg{inline-size:44px; block-size:44px; stroke-width:1.4}
/* موازنة بصرية: الدرع الطولي يكبر قليلًا، والشعار العريض يصغر
   حتى تبدو الأربعة بوزن واحد رغم اختلاف نِسبها. */
.cred__ic--tall img{block-size:58px}
.cred__ic--wide img{block-size:40px}
.cred b{font-size:var(--t-body); margin-block-end:2px}
.cred span{font-size:var(--t-sm); color:var(--ink2); line-height:1.7}
@media (max-width:1080px){
  .cred + .cred:nth-child(odd)::before{display:none}
}
@media (max-width:760px){
  .cred{padding:var(--s5) var(--s4)}
  .cred + .cred::before{display:none}
  .cred + .cred{border-block-start:1px solid var(--line2)}
}

/* ── 2) بيانات المحامي: كانت dt/dd بلا أي تنسيق فتتكدّس بلا بنية ──── */
.who__meta{
  margin-block-start:var(--s5); display:grid;
  border-block-start:1px solid var(--line2);
}
.who__meta .wrow{
  display:grid; grid-template-columns:minmax(104px,.34fr) minmax(0,1fr);
  gap:var(--s3); align-items:baseline;
  padding-block:var(--s3);
  border-block-end:1px solid var(--line2);
}
.who__meta dt{
  margin:0; font-size:var(--t-cap); font-weight:600; color:var(--ink2);
  letter-spacing:.01em;
}
.who__meta dd{margin:0; font-size:var(--t-sm); color:var(--ink); line-height:1.7; font-weight:600}
.who__act{margin-block-start:var(--s5); display:flex; gap:var(--s2); flex-wrap:wrap}
@media (max-width:520px){
  .who__meta .wrow{grid-template-columns:minmax(0,1fr); gap:2px}
}

/* ── 3) بطاقات مجالات الممارسة: كانت قاعدة إصلاح التجاوز الأفقي
   تحصر .pgrid في عمود واحد، فتمدّد كل بطاقة على العرض كله ويبقى
   نصفها فراغًا. الأربعة الآن في صف واحد. */
.pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pgrid{grid-template-columns:minmax(0,1fr)}}

/* ── 3+4) خلفية البطاقات: بدل السطح الأبيض السادة — تدرّج نحاسي خفيف
   يعمل في الوضعين الفاتح والداكن لأنه طبقة فوق var(--paper2). */
.pcard,.fee{
  position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(140,106,51,.07) 0%, rgba(140,106,51,.015) 42%, rgba(140,106,51,0) 78%),
    var(--paper2);
  border:1px solid var(--line);
  box-shadow:var(--e1);
}
.pcard::after,.fee::after{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:2px;
  background:linear-gradient(90deg, transparent, var(--brass-lg) 50%, transparent);
  opacity:.45;
}
@media (hover:hover){
  .pcard:hover,.fee:hover{box-shadow:var(--e2); border-color:var(--ink3)}
  .pcard:hover::after,.fee:hover::after{opacity:.9}
}
.fee{display:grid; gap:var(--s2); align-content:start; padding:var(--s5)}

/* ── 4) قوائم التحقّق: بطاقات الأتعاب لم تكن مشمولة بقاعدة القوائم،
   فظهرت نقطة المتصفّح الافتراضية مع علامة الصحّ فوق بعضهما. */
.fee ul{list-style:none; margin:var(--s2) 0 0; padding:0; display:grid; gap:9px}
.fee li{
  display:flex; align-items:flex-start; gap:var(--s2);
  font-size:var(--t-sm); color:var(--ink2); line-height:1.7;
}
.fee li::marker{content:""}
.fee li svg{color:var(--brass); flex:none; inline-size:15px; block-size:15px; margin-block-start:4px}
.pcard li svg,.court li svg{inline-size:15px; block-size:15px; margin-block-start:4px}

/* وصف صيغة الأتعاب كان بخطّ Mono — والعربية فيه تتباعد حروفها وتبدو ممطوطة. */
.fee__p{
  font-family:var(--ff-body); font-size:var(--t-lg); font-weight:600;
  color:var(--brass-lg); line-height:1.75; text-align:start;
}
.fee h3{font-size:var(--t-h4)}
.fee .pcard__ic{margin-block-end:var(--s1)}

/* رابط «اطلب استشارة» داخل البطاقة: كان السهم ينزل لسطر جديد
   لأن الوسم <a> بلا صنف ولا تنسيق. */
.pcard > a{
  display:inline-flex; align-items:center; gap:var(--s1);
  margin-block-start:auto; padding-block-start:var(--s3);
  font-size:var(--t-sm); font-weight:700; color:var(--brass);
}
.pcard > a svg{flex:none; transition:transform var(--d2) var(--ez)}
@media (hover:hover){.pcard > a:hover svg{transform:translateX(-3px)}}

/* شعارات الجهات في الوضع الداكن: شعار وزارة التجارة أحادي غامق
   وشعار الهيئة فيه أبيض — كلاهما يختفي على الخلفية الداكنة.
   لوحة فاتحة خلف الشعار فقط (لا خلف أيقونة الساعة). */
[data-theme="dark"] .cred__ic:has(img),.inv .cred__ic:has(img){
  background:#FBFAF7; border-radius:var(--r2);
  padding:8px 14px; box-sizing:content-box;
}
.cred__ic svg{color:var(--brass-lg)}

/* شريط الاعتمادات على الشاشات الأصغر: القاعدة أعلاه تأتي بعد قواعد
   الاستجابة الأصلية فتلغيها — تُعاد هنا بعدها. */
@media (max-width:1080px){.creds .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){
  .creds .wrap{grid-template-columns:minmax(0,1fr)}
  .cred + .cred:nth-child(odd)::before{display:none}
}