/* ============================================================
   GATIO — لغة الموقع البصريّة (الإصدار الثاني)
   كلُّ قرارٍ هنا مشروحٌ في DESIGN.md. ولا لونَ ولا مقاسَ خارج هذه الرموز.
   ============================================================ */

:root{
  /* الأرضيّة — أعمقُ من أيقونة التطبيق: الموقعُ مسرحٌ لا واجهة */
  --bg:#05070A;
  --surface:#0A0F13;
  --raise:#0E151A;
  --sunk:#10171C;
  --hair:rgba(255,255,255,.075);
  --hair-2:rgba(255,255,255,.14);
  --hair-3:rgba(255,255,255,.22);

  /* رُفعت درجتا الخفوت: كانتا تُقرآن رخيصتين على أرضيّةٍ بهذا العمق */
  --ink:#EAF1EE;
  --dim:#A6B4AF;
  --faint:#7A8882;

  /* العلامة — منقولةٌ حرفاً من public/logo.svg */
  --g1:#35C96F; --g2:#20C08D; --g3:#12B6D4;
  --brand:#20C08D;
  --brand-lit:#2FD79E;
  --brand-soft:rgba(32,192,141,.10);
  /* الرمل للأرقام الماليّة وحدها */
  --sand:#D4B36A;
  --danger:#E8695B;

  --ar-display:'Noto Kufi Arabic',system-ui,sans-serif;
  --ar:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --la:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --r:3px;
  --r-lg:8px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1400px;
  --read:1120px;      /* مدى النثر — أضيق من الإطار حتى لا يطول السطر */
  --head:74px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ar);font-size:18px;line-height:1.85;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[dir=ltr] body{font-family:var(--la);font-size:17px;line-height:1.62}
/* LTR remap: الصفحة الإنجليزيّة لا تحمّل الخطوط العربيّة، فتُعاد الأدوار
   إلى الوجه اللاتينيّ بدل السقوط الصامت إلى system-ui. */
[dir=ltr]{--ar:var(--la);--ar-display:var(--la)}

/* الأرقام والمعرّفات — دائماً معزولةٌ اتّجاهيّاً */
.n,code,kbd{font-family:var(--mono);font-variant-numeric:tabular-nums;
  direction:ltr;unicode-bidi:isolate}
.money{color:var(--sand)}

img{max-width:100%;height:auto}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r)}
::selection{background:rgba(32,192,141,.28)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.wrap--read{max-width:var(--read)}
section{padding:150px 0;position:relative}
/* الرأس ثابت، فالرابط يهبط تحته ويخفي العنوان لولا هذا */
section[id],.tale,.step[id]{scroll-margin-top:var(--head)}
@media(max-width:1080px){.wrap{padding:0 26px}}
@media(max-width:720px){section{padding:88px 0}.wrap{padding:0 20px}}

/* خطٌّ شعريّ يفصل الأقسام — الموقع بنيةٌ لا كومةَ بطاقات */
.rule{height:1px;max-width:var(--wrap);margin:0 auto;
  background:linear-gradient(90deg,transparent,var(--hair) 12%,var(--hair) 88%,transparent)}

/* ── الطباعة ────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--ar-display);font-weight:600;letter-spacing:-.01em;
  line-height:1.24;text-wrap:balance;margin:0}
[dir=ltr] h1,[dir=ltr] h2,[dir=ltr] h3,[dir=ltr] h4{font-family:var(--la);font-weight:600}
h1{font-size:clamp(36px,5.1vw,70px);line-height:1.14;letter-spacing:-.02em;max-width:15ch}
[dir=ltr] h1{max-width:19ch;font-size:clamp(33px,4.2vw,58px)}
h2{font-size:clamp(30px,3.5vw,50px);margin-bottom:16px;max-width:22ch}
[dir=ltr] h2{max-width:26ch}
h3{font-size:clamp(19px,1.5vw,23px);margin-bottom:8px}
h4{font-size:16.5px;margin-bottom:6px;letter-spacing:0}
p{margin:0 0 18px;max-width:62ch}
.lede{font-size:clamp(18px,1.45vw,21px);color:var(--dim);font-weight:300;max-width:58ch;
  line-height:1.75}
.muted{color:var(--dim)}
.tiny{font-size:14.5px;color:var(--faint);line-height:1.7}
.wide{max-width:none}

/* العنوان الفرعيّ: كان بخطٍّ أحاديٍّ لا محارفَ عربيّةً فيه، فكان يسقط
   صامتاً إلى خطّ النظام — وهذا مصدر «الرخص» الذي رُئي في أوّل مراجعة. */
.eyebrow{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ar);font-size:14px;font-weight:500;letter-spacing:0;
  color:var(--dim);margin:0 0 20px}
[dir=ltr] .eyebrow{letter-spacing:.14em;text-transform:uppercase;font-size:12.5px}
.eyebrow::before{content:"";width:22px;height:2px;flex:0 0 auto;border-radius:2px;
  background:linear-gradient(90deg,var(--g1),var(--g3))}

.grad{background:linear-gradient(105deg,var(--g1),var(--g2) 55%,var(--g3));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ── سطر الدفتر ─────────────────────────────── */
.ledger{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--hair)}
.ledger .k{color:var(--dim);font-size:16px;line-height:1.55}
.ledger .v{font-family:var(--mono);font-size:16px;color:var(--ink);flex:0 0 auto;
  direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.ledger .acc{color:var(--brand)}

/* ── الرأس ──────────────────────────────────── */
.top{position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  backdrop-filter:blur(18px) saturate(140%);background:rgba(5,7,10,.78);
  border-bottom:1px solid var(--hair);transition:background .3s var(--ease)}
.top.on{background:rgba(5,7,10,.94)}
.top__in{max-width:var(--wrap);margin:0 auto;padding:0 40px;height:var(--head);
  display:flex;align-items:center;gap:30px}
.mark{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.mark svg{width:31px;height:31px;display:block}
.mark b{font-family:var(--ar-display);font-size:21px;font-weight:600;letter-spacing:.03em}
.top nav{display:flex;gap:2px;margin-inline-start:auto;font-size:15px}
.top nav a{color:var(--dim);font-weight:400;padding:8px 13px;border-radius:var(--r);
  transition:color .18s var(--ease),background .18s var(--ease)}
.top nav a:hover{color:var(--ink);background:rgba(255,255,255,.05);text-decoration:none}
.top__act{display:flex;align-items:center;gap:10px;flex:0 0 auto}

/* مبدّل اللغة: زرٌّ بحرفٍ واحدٍ يبدو زهيدا — يُكتب باسم اللغة كاملا */
.lang{display:inline-flex;align-items:center;gap:7px;padding:10px 15px;
  border:1px solid var(--hair-2);border-radius:var(--r);color:var(--dim);
  font-size:14px;font-weight:500;font-family:var(--ar);transition:.18s var(--ease);
  line-height:1}
.lang:hover{border-color:var(--hair-3);color:var(--ink);text-decoration:none}
.lang svg{width:15px;height:15px;opacity:.7;flex:0 0 auto}

@media(max-width:1180px){.top nav a{padding:8px 9px;font-size:14px}}
/* حين يختفي التنقّل يفقد الشريط ما كان يدفع الأزرار إلى الطرف. */
@media(max-width:1000px){
  .top nav{display:none}
  :root{--head:64px}
  .top__in{gap:10px;padding:0 20px}
  .top__act{margin-inline-start:auto}
}
@media(max-width:420px){
  .mark b{font-size:18px}.mark svg{width:27px;height:27px}
  .lang span{display:none}.lang{padding:10px 11px}
}

/* ── الأزرار ────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;
  border-radius:var(--r);font-family:var(--ar);font-size:16.5px;font-weight:500;
  border:1px solid transparent;cursor:pointer;transition:.2s var(--ease);
  text-decoration:none;white-space:nowrap;line-height:1}
.btn svg{width:16px;height:16px;flex:0 0 auto;transition:transform .2s var(--ease)}
/* السهم يشير إلى جهة القراءة، فينقلب مع الاتّجاه */
[dir=rtl] .btn svg{transform:scaleX(-1)}
.btn:hover{text-decoration:none}
.btn--p{background:linear-gradient(135deg,var(--g1),var(--g2) 62%,#1BBBA8);
  color:#04120C;font-weight:600;box-shadow:0 10px 34px -14px rgba(32,192,141,.75)}
.btn--p:hover{filter:brightness(1.07);box-shadow:0 14px 40px -12px rgba(32,192,141,.85)}
.btn--g{border-color:var(--hair-2);color:var(--ink);background:rgba(255,255,255,.02)}
.btn--g:hover{border-color:var(--hair-3);background:rgba(255,255,255,.055)}
[dir=rtl] .btn:hover svg{transform:scaleX(-1) translateX(3px)}
[dir=ltr] .btn:hover svg{transform:translateX(3px)}
.btn--sm{padding:10px 19px;font-size:14.5px}
.btn--sm svg{width:14px;height:14px}
@media(max-width:1000px){.top__act .btn--sm{padding:10px 15px;font-size:13.5px}}

/* ── الكشف عند الدخول ───────────────────────── */
.rv{opacity:0;transform:translateY(20px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ── البطل ──────────────────────────────────── */
.hero{padding:calc(var(--head) + 74px) 0 96px;position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
@media(min-width:961px){[dir=ltr] .hero__grid{grid-template-columns:1.12fr .88fr}}
@media(max-width:960px){.hero__grid{grid-template-columns:1fr;gap:34px}
  .hero{padding:calc(var(--head) + 44px) 0 64px}}
.hero h1 em{font-style:normal;
  background:linear-gradient(105deg,var(--g1),var(--g2) 55%,var(--g3));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{margin:26px 0 34px;max-width:54ch}
.hero__cta{display:flex;gap:13px;flex-wrap:wrap}
.hero__note{margin-top:30px;font-size:14.5px;color:var(--faint);
  display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero__note i{width:4px;height:4px;border-radius:50%;background:var(--faint);
  display:inline-block;font-style:normal}

/* شريط القدرات تحت البطل */
.caps{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--hair);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-top:86px}
.caps>div{background:var(--bg);padding:26px 22px}
.caps b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);margin-bottom:7px;
  font-family:var(--ar-display)}
[dir=ltr] .caps b{font-family:var(--la)}
.caps span{display:block;font-size:14.5px;color:var(--dim);line-height:1.65}
@media(max-width:1180px){.caps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:660px){.caps{grid-template-columns:repeat(2,1fr);margin-top:52px}
  .caps>div{padding:20px 16px}}

/* ── المشاهد ────────────────────────────────── */
.scene{position:relative;width:100%;aspect-ratio:1/1;max-height:520px}
.scene canvas{width:100%;height:100%;display:block}
.scene--wide{aspect-ratio:4/3;max-height:430px}

/* ── السرد اللاصق ───────────────────────────── */
.tale{position:relative}
.tale__stick{position:sticky;top:0;height:100vh;display:grid;place-items:center;
  pointer-events:none}
.tale__stick canvas{width:min(52vw,700px);height:min(52vw,700px);display:block;
  transform:translateX(-14%)}
[dir=ltr] .tale__stick canvas{transform:translateX(14%)}
.tale__steps{position:relative;z-index:2}
.step{min-height:100vh;display:flex;align-items:center}
.step__in{max-width:490px;
  background:linear-gradient(270deg,rgba(5,7,10,.95),rgba(5,7,10,.74) 82%,transparent);
  padding:38px 34px;border-inline-start:2px solid var(--brand);
  opacity:.22;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.step.on .step__in{opacity:1;transform:none}
/* العتمة تسند النصّ من جهته: يمينا في العربيّة، يسارا في الإنجليزيّة. */
[dir=ltr] .step__in{background:linear-gradient(90deg,rgba(5,7,10,.95),rgba(5,7,10,.74) 82%,transparent)}
@media(max-width:900px){
  .tale__stick{height:66vh}
  .tale__stick canvas,[dir=ltr] .tale__stick canvas{
    width:min(80vw,400px);height:min(80vw,400px);transform:none}
  .step{min-height:86vh}
  .step__in{max-width:none;padding:24px 20px}
}

/* ── الشبكات ────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.split--sc{grid-template-columns:1.04fr .96fr;align-items:center}
@media(max-width:940px){.split,.split--sc{grid-template-columns:1fr;gap:36px}}
.cols{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.cols>div{background:var(--bg);padding:30px 26px}
.cols--2{grid-template-columns:1fr 1fr}
.cols--3{grid-template-columns:repeat(3,1fr)}
.cols--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.cols--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:940px){.cols--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cols--2,.cols--3,.cols--4{grid-template-columns:1fr}}

/* ── بحر الوحدات ────────────────────────────── */
.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair)}
.mod{background:var(--bg);padding:24px 22px;transition:background .2s var(--ease)}
.mod:hover{background:var(--raise)}
.mod__h{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.mod__h svg{width:17px;height:17px;color:var(--brand);flex:0 0 auto}
.mod__h b{font-size:15.5px;font-weight:600;color:var(--ink);font-family:var(--ar-display)}
[dir=ltr] .mod__h b{font-family:var(--la)}
.mod p{margin:0;font-size:14.5px;color:var(--dim);line-height:1.68;max-width:none}
/* عنوان المجموعة كان بخطٍّ أحاديٍّ مباعَدٍ: الخطّ لا محارفَ عربيّةً فيه،
   والتباعد يفكّ اتّصال ما بقي. النتيجة كلمةٌ مقطّعةٌ تبدو زهيدة. */
.mods__grp{grid-column:1/-1;background:var(--surface);padding:15px 22px;
  font-family:var(--ar);font-size:13.5px;font-weight:600;letter-spacing:0;
  color:var(--dim)}
.mods__grp::before{content:"";display:inline-block;width:16px;height:2px;
  vertical-align:middle;margin-inline-end:10px;border-radius:2px;
  background:linear-gradient(90deg,var(--g1),var(--g3))}
[dir=ltr] .mods__grp{font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
@media(max-width:1080px){.mods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.mods{grid-template-columns:1fr}}

/* ── الخطوات المرقّمة ───────────────────────── */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair)}
.steps>div{background:var(--bg);padding:26px 22px}
.steps .no{font-family:var(--mono);font-size:11.5px;color:var(--brand);
  letter-spacing:.14em;display:block;margin-bottom:12px}
.steps b{display:block;font-size:16px;font-weight:600;margin-bottom:7px;
  font-family:var(--ar-display)}
[dir=ltr] .steps b{font-family:var(--la)}
.steps p{margin:0;font-size:14.5px;color:var(--dim);line-height:1.68;max-width:none}
@media(max-width:1080px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.steps{grid-template-columns:1fr}}


/* ── الهاتف ─────────────────────────────────── */
.phone{width:284px;margin:0 auto;background:#0b0f14;border:1px solid var(--hair-2);
  border-radius:32px;padding:13px;box-shadow:0 40px 100px -46px #000}
.phone__scr{background:#070b0f;border-radius:21px;padding:18px 16px;min-height:474px}
.phone__h{font-size:12px;color:var(--faint);margin-bottom:13px}
.phone__tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.phone__tab{font-size:11.5px;padding:5px 11px;border:1px solid var(--hair-2);
  border-radius:99px;color:var(--dim);cursor:pointer;background:none;font-family:inherit}
.phone__tab.on{background:var(--brand);border-color:var(--brand);color:#04110C}
[dir=ltr] .phone__tabs{gap:5px}
[dir=ltr] .phone__tab{font-size:11px;padding:5px 8px}
.phone__big{font-family:var(--mono);font-size:31px;color:#fff;direction:ltr;
  unicode-bidi:isolate;line-height:1.2}
.phone__sub{font-size:12.5px;color:var(--brand);margin-bottom:18px}
.phone__bars{display:flex;align-items:flex-end;gap:6px;height:96px;margin-bottom:20px}
.phone__bars i{flex:1;background:linear-gradient(180deg,var(--g2),rgba(32,192,141,.14));
  border-radius:2px 2px 0 0;transition:height .5s var(--ease)}
.phone__li{display:flex;justify-content:space-between;font-size:12.5px;
  padding:9px 0;border-top:1px solid var(--hair);color:var(--dim)}
.phone__li b{font-family:var(--mono);color:#e2e8f0;direction:ltr;unicode-bidi:isolate}

/* ── الخطّ الزمنيّ ──────────────────────────── */
.tl{position:relative;padding-inline-start:28px}
.tl::before{content:"";position:absolute;inset-block:6px;inset-inline-start:0;
  width:1px;background:linear-gradient(180deg,var(--brand),transparent)}
.tl__i{position:relative;padding-bottom:30px}
.tl__i::before{content:"";position:absolute;inset-inline-start:-32px;top:11px;
  width:7px;height:7px;border-radius:50%;background:var(--brand)}
.tl__d{font-family:var(--mono);font-size:12px;color:var(--faint);
  direction:ltr;unicode-bidi:isolate}
.tl__t{font-weight:600;font-size:17px;margin-top:2px;font-family:var(--ar-display)}
[dir=ltr] .tl__t{font-family:var(--la)}
.tl__x{color:var(--dim);font-size:15px;margin:5px 0 0;line-height:1.7;max-width:none}

/* ── التدفّق ────────────────────────────────── */
.flow{display:flex;flex-wrap:wrap;border:1px solid var(--hair);background:var(--surface)}
.flow__s{flex:1 1 160px;padding:24px 22px;border-inline-start:1px solid var(--hair)}
.flow__s:first-child{border-inline-start:0}
.flow__n{font-family:var(--mono);font-size:11px;color:var(--faint)}
.flow__t{font-weight:600;margin-top:9px;font-size:16px}
.flow__v{font-family:var(--mono);font-size:20px;direction:ltr;unicode-bidi:isolate;
  margin-top:5px}
.flow__l{font-size:13.5px;color:var(--dim);margin:9px 0 0;line-height:1.65;max-width:none}
@media(max-width:820px){.flow__s{flex:1 1 100%;border-inline-start:0;
  border-top:1px solid var(--hair)}.flow__s:first-child{border-top:0}}

/* ── الباقات ────────────────────────────────── */
.pk{border:1px solid var(--hair);padding:34px 30px;background:var(--surface);
  display:flex;flex-direction:column;gap:15px}
.pk--f{border-color:rgba(32,192,141,.42);
  background:linear-gradient(180deg,rgba(32,192,141,.055),transparent 55%),var(--surface);
  box-shadow:0 30px 80px -50px rgba(32,192,141,.55)}
.pk__n{font-family:var(--ar-display);font-size:25px;font-weight:600}
[dir=ltr] .pk__n{font-family:var(--la)}
.pk__w{color:var(--dim);font-size:15px;margin:0;line-height:1.7;max-width:none}
.pk__l{list-style:none;padding:0;margin:6px 0 auto;font-size:15px}
.pk__l li{padding:9px 0;border-bottom:1px solid var(--hair);color:var(--dim)}
.pk__l li b{color:var(--ink);font-weight:600}
.pk__tag{font-family:var(--ar);font-size:13px;font-weight:600;letter-spacing:0;
  color:var(--brand);margin:0}
[dir=ltr] .pk__tag{font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase}
.pk .btn{justify-content:center}

/* ── الختام ─────────────────────────────────── */
.end{text-align:center;border-top:1px solid var(--hair);
  background:radial-gradient(1100px 380px at 50% 0,rgba(32,192,141,.075),transparent 70%)}
/* text-align وحده لا يوسّط فقرةً محدودةَ العرض: صندوقها يبقى على حافّة البدء. */
.end h2,.end p{margin-inline:auto}
.end__cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ── التذييل ────────────────────────────────── */
footer{border-top:1px solid var(--hair);padding:64px 0 44px;color:var(--faint);
  font-size:15px;background:var(--surface)}
footer .grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
footer h4{color:var(--ink);font-size:14px;margin:0 0 14px;letter-spacing:.05em;
  font-family:var(--ar)}
[dir=ltr] footer h4{font-family:var(--la)}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
footer a{color:var(--faint)}
footer a:hover{color:var(--ink)}
@media(max-width:860px){footer .grid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){footer .grid{grid-template-columns:1fr}}

/* ── تاريخُ الخطّ الزمنيّ ────────────────────── */
/* كان رماديّاً صغيراً فيسبق العينَ إلى العنوان ويضيع التسلسل. */
.tl__d{display:inline-block;font-size:12.5px;font-weight:500;color:var(--brand);
  background:var(--brand-soft);border:1px solid rgba(32,192,141,.24);
  border-radius:99px;padding:3px 11px;margin-bottom:7px;letter-spacing:.04em}

/* ── شريطُ التجربة ──────────────────────────── */
/*
   تسعون يوماً ليست شعاراً: TRIAL_DAYS في licenseCore.ts، وحولها اختباراتٌ
   تُثبت أنّها تبدأ تسعين وتنقص يوماً بيوم ولا تُصفَّر بحذف ختم أوّل تشغيل.
   فتُعرض كحقيقةٍ قابلةٍ للتحقّق لا كإغراء.
*/
.trial{border:1px solid rgba(32,192,141,.34);border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(32,192,141,.10),rgba(18,182,212,.05) 60%,transparent),
             var(--surface);
  padding:40px 42px;display:grid;grid-template-columns:auto 1fr auto;gap:36px;
  align-items:center;box-shadow:0 34px 90px -60px rgba(32,192,141,.7)}
.trial__n{font-family:var(--mono);font-size:clamp(48px,6vw,76px);line-height:1;
  font-weight:500;background:linear-gradient(140deg,var(--g1),var(--g3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  direction:ltr;unicode-bidi:isolate}
.trial__u{display:block;font-family:var(--ar);font-size:15px;color:var(--dim);
  margin-top:6px;letter-spacing:0;-webkit-text-fill-color:var(--dim)}
.trial h3{margin-bottom:8px;font-size:clamp(20px,2vw,26px)}
/* الحصرُ في الفقرة العارية وحدها: القاعدة العامّة وزنها (0,1,1) فتغلب
   .trial__flag و.trial__left و.trial__fine — وكلُّها فقرات. فكانت الشارةُ
   تُرسم بلون --dim الباهت فوق أخضرَ ساطع، والقائمةُ تُكبَّر إلى 15.5px
   فتفيض وتُسقط آخرَ بنودها سطراً وحده. */
.trial p:not([class]){margin:0;color:var(--dim);font-size:15.5px;max-width:52ch;line-height:1.75}
.trial__act{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.trial__act .btn{justify-content:center}
.trial__fine{font-size:13px;color:var(--faint);text-align:center;margin:0}
@media(max-width:1000px){
  .trial{grid-template-columns:auto 1fr;gap:26px;padding:32px 28px}
  .trial__act{grid-column:1/-1}
}
@media(max-width:620px){
  .trial{grid-template-columns:1fr;gap:20px;text-align:start;padding:26px 22px}
  .trial__act{grid-column:auto}
}

/* شارةُ التجربة فوق الباقات */
.pk__trial{display:inline-flex;align-items:center;gap:7px;font-size:13px;
  color:var(--brand);background:var(--brand-soft);border:1px solid rgba(32,192,141,.24);
  border-radius:99px;padding:5px 12px;align-self:flex-start}
.pk__trial svg{width:13px;height:13px}

/* ── حمايةُ الباقات من الانسكاب ──────────────── */
/*
   عنوانٌ إنجليزيٌّ طويلٌ في عمودٍ ضيّق كان يخرج من البطاقة. الكسر هنا
   مسموحٌ للكلمة الطويلة وحدها، فلا يُشوَّه النصّ العاديّ.
*/
.pk,.mod,.caps>div,.cols>div{min-width:0}
.pk__n,.pk__w,.pk__l li,.mod__h b,.caps b{overflow-wrap:anywhere;word-break:break-word}
.ledger .k{min-width:0;overflow-wrap:anywhere}

/* ── أضيقُ الشاشات ──────────────────────────── */
/*
   قِيس عند 320px: شريطُ الرأس الإنجليزيّ يتجاوز الإطار بسبعةٍ وعشرين
   بكسلاً — «Request a demo» أطولُ من «اطلب عرضا»، والسهمُ وأيقونةُ اللغة
   يزيدان. فيُسقَط ما هو زينةٌ ويبقى ما هو فعل.
*/
@media(max-width:360px){
  .top__act .btn svg{display:none}
  .top__act .btn--sm{padding:9px 12px;font-size:13px;gap:0}
  .lang{padding:9px 9px;gap:0}
  .top__in{gap:8px;padding:0 14px}
  .wrap{padding:0 14px}
  .trial{padding:22px 18px}
  .trial__n{font-size:44px}
}

/* ══════════════════════════════════════════════════════════
   إطاراتُ المنتج — منقولةٌ من رموز التطبيق لا مؤلَّفة

   القيم أدناه مأخوذةٌ حرفاً من src/styles/global.css و
   src/pages/Pos.css: الأرضيّة #f4f6fb، والسطح الأبيض، والحدّ
   #e5e9f0، واللون الأساسيّ #2563eb — أزرقُ التطبيق لا أخضرُ
   العلامة. وأنصافُ الأقطار 12 و14 و16 لا ثلاثة.

   ولماذا يهمّ: أوّلُ رسمٍ استعمل لونَ الموقع فبدا المنتجُ شيئاً
   آخر — ومن يرى ذلك يحكم على المنتج بما ليس منه.
   ══════════════════════════════════════════════════════════ */

.ui{--u-bg:#f4f6fb;--u-sf:#fff;--u-sf2:#f8fafc;--u-bd:#e5e9f0;
  --u-tx:#0f172a;--u-mu:#64748b;--u-pr:#2563eb;--u-prs:#eff4ff;
  --u-ok:#15803d;--u-okb:#ecfdf3;--u-wn:#b45309;--u-wnb:#fffbeb;
  --u-side:#0f172a;--u-sidetx:#cbd5e1;--u-sidedim:#8494a8;--u-sideact:#1e293b;
  background:var(--u-side);border:1px solid var(--hair-2);border-radius:14px;
  overflow:hidden;font-family:var(--ar);
  box-shadow:0 40px 100px -50px rgba(0,0,0,.95)}
[dir=ltr] .ui{font-family:var(--la)}

.ui__bar{display:flex;align-items:center;gap:7px;padding:10px 14px;
  background:#0b1220;border-bottom:1px solid rgba(255,255,255,.06)}
.ui__dot{width:9px;height:9px;border-radius:50%;background:#1e293b}
.ui__ttl{margin-inline-start:8px;font-size:12px;color:#94a3b8}

.ui__body{display:grid;grid-template-columns:190px 1fr;min-height:300px}

/* الشريط الجانبيّ: داكنٌ كما هو في التطبيق، بأقسامٍ لا بقائمةٍ مسطّحة */
.ui__side{background:var(--u-side);padding:12px 8px;font-size:12.5px;
  border-inline-end:1px solid rgba(255,255,255,.06)}
.ui__side i{display:block;padding:8px 12px;color:var(--u-sidetx);font-style:normal;
  border-radius:9px;margin-bottom:2px}
.ui__side i.on{background:var(--u-sideact);color:#fff;font-weight:700;
  box-shadow:inset 3px 0 0 var(--u-pr)}
[dir=ltr] .ui__side i.on{box-shadow:inset -3px 0 0 var(--u-pr)}
.ui__side s{display:block;text-decoration:none;font-size:10.5px;font-weight:800;
  letter-spacing:.06em;color:var(--u-sidedim);padding:12px 12px 6px}

.ui__main{background:var(--u-bg);padding:16px;color:var(--u-tx)}
/* الإطارُ فاتحٌ داخل صفحةٍ مظلمة، فكلُّ لونٍ موروثٍ يُقلب هنا — لكنّ
   هذه القاعدة كانت تهزم أبيضَ الزرّ الأزرق بأولويّتها، فيصير النصُّ
   كحليّاً على أزرق: 3.45. تُستثنى العناصرُ التي تحمل لونها بنفسها. */
.ui__main strong,.ui__main b,.ui__main span,.ui__main h5{color:inherit}
.ui__main .ui__pill,.ui__main .ui__pay em{color:#fff}
.ui__main .ui__good u{color:var(--u-pr)}
.ui__main .ui__kpi u{color:var(--u-ok)}
.ui__main .ui__cart h5 em{color:var(--u-pr)}
.ui__main .ui__sum b{color:var(--u-pr)}
.ui__main .ui__map em{color:var(--u-pr)}
.ui__main .ui__good span.low{color:var(--u-wn)}

/* شريطُ البحث: حدٌّ أزرقُ سميكٌ وهالةٌ حوله — علامةُ البؤرة في التطبيق */
.ui__top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ui__search{flex:1;background:var(--u-sf);border:2px solid var(--u-pr);
  border-radius:12px;padding:10px 14px;color:var(--u-mu);font-size:12.5px;
  font-weight:600;box-shadow:0 0 0 4px var(--u-prs)}
.ui__pill{background:var(--u-pr);color:#fff;border-radius:10px;padding:10px 16px;
  font-size:12.5px;font-weight:700;white-space:nowrap}

/* بطاقةُ الصنف: 14px نصفُ قطر، شريطُ تصنيفٍ علويّ، سعرٌ أزرقُ ثقيل، شارةُ مخزون */
.ui__goods{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.ui__good{position:relative;background:var(--u-sf);border:1px solid var(--u-bd);
  border-radius:14px;padding:16px 10px 12px;text-align:center;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:6px;min-height:132px;
  justify-content:center}
.ui__good::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;
  height:4px;background:var(--u-pr)}
.ui__good:nth-child(3n+2)::before{background:var(--u-ok)}
.ui__good:nth-child(3n+3)::before{background:#7c3aed}
.ui__good i{display:block;width:100%;max-width:78px;height:44px;border-radius:8px;
  background:var(--u-sf2);font-style:normal}
.ui__good b{display:block;font-size:12.5px;color:var(--u-tx);font-weight:700;
  line-height:1.3}
.ui__good u{display:block;text-decoration:none;font-family:var(--mono);font-size:16px;
  font-weight:800;color:var(--u-pr);direction:ltr;unicode-bidi:isolate}
.ui__good span{display:inline-block;font-size:10.5px;color:var(--u-mu);
  background:var(--u-sf2);padding:2px 9px;border-radius:999px}
.ui__good span.low{color:var(--u-wn);background:var(--u-wnb);font-weight:700}

/* السلّة: بطاقةٌ بيضاء بحدٍّ وظلّ، وسطورٌ على سطحٍ ثانويّ */
.ui__cart{background:var(--u-sf);border:1px solid var(--u-bd);border-radius:16px;
  overflow:hidden;box-shadow:0 1px 3px rgba(15,23,42,.08)}
.ui__cart h5{margin:0;padding:13px 14px;font-size:13.5px;font-weight:800;
  border-bottom:1px solid var(--u-bd);display:flex;justify-content:space-between;
  align-items:center}
/* «3 أصناف» يبدأ برقم، فالاتّجاه يُشتقّ من أوّل حرفٍ قويّ لا من السياق —
   وإلا انقلب الترتيب في العربيّة. */
.ui__cart h5 em{unicode-bidi:plaintext;font-style:normal;font-size:11px;font-weight:700;color:var(--u-pr);
  background:var(--u-prs);border-radius:999px;padding:3px 9px}
.ui__cart .pad{padding:11px}
.ui__line{background:var(--u-sf2);border:1px solid var(--u-bd);border-radius:12px;
  padding:9px 11px;margin-bottom:7px}
.ui__line .t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ui__line .t span{font-size:12.5px;font-weight:700;color:var(--u-tx)}
.ui__line .t b{font-family:var(--mono);font-size:13.5px;font-weight:800;
  direction:ltr;unicode-bidi:isolate}
.ui__line .u{font-size:11px;color:var(--u-mu);margin-top:4px}
.ui__sum{border-top:1px solid var(--u-bd);padding:12px 14px;display:flex;
  justify-content:space-between;align-items:center}
.ui__sum span{font-size:13px;font-weight:700;color:var(--u-mu)}
.ui__sum b{font-family:var(--mono);font-size:20px;font-weight:800;color:var(--u-pr);
  direction:ltr;unicode-bidi:isolate}
.ui__pay{padding:0 14px 14px}
.ui__pay em{display:block;background:var(--u-ok);color:#fff;border-radius:12px;
  padding:12px;text-align:center;font-style:normal;font-size:13.5px;font-weight:800}
.ui__split{display:grid;grid-template-columns:1.35fr .9fr;gap:14px}
/* ستّةُ أصنافٍ تقسم على ثلاثةٍ وعلى اثنين. خمسةُ أعمدةٍ كانت تترك
   يتيماً في صفٍّ وحده — وهو ما يُقرأ عطبا. والعرضُ الناتج (~170px)
   يطابق pos-grid--md في التطبيق: minmax(164px,1fr). */
.ui--wide .ui__goods{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.ui--wide .ui__goods{grid-template-columns:repeat(2,1fr)}}

/* صفٌّ عامّ داخل الإطار */
.ui__row{display:flex;justify-content:space-between;align-items:center;
  padding:11px 13px;background:var(--u-sf);border:1px solid var(--u-bd);
  border-radius:12px;margin-bottom:8px;font-size:12.5px}
.ui__row span{color:var(--u-mu);font-weight:600}
.ui__row b{font-family:var(--mono);font-size:13px;font-weight:800;
  direction:ltr;unicode-bidi:isolate}

/* بطاقاتُ المؤشّرات */
/* عند 1024 يضيق عمودُ الإطار فتُقصّ أرقامُ المؤشّرات. auto-fit يلفّها
   بدل أن يقصّها، والمقاسُ يتنفّس مع العرض. قِيس عند 1024 فعلا. */
.ui__kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:10px;margin-bottom:12px}
.ui__kpi{background:var(--u-sf);border:1px solid var(--u-bd);border-radius:14px;
  padding:13px 12px;position:relative;overflow:hidden;min-width:0}
.ui__kpi::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;
  height:3px;background:var(--u-pr)}
.ui__kpi:nth-child(2)::before{background:var(--u-ok)}
.ui__kpi:nth-child(3)::before{background:var(--u-wn)}
.ui__kpi span{display:block;font-size:11px;color:var(--u-mu);font-weight:600}
.ui__kpi b{display:block;font-family:var(--mono);font-size:clamp(15px,1.5vw,19px);
  font-weight:800;color:var(--u-tx);direction:ltr;unicode-bidi:isolate;margin-top:3px}
.ui__kpi u{display:block;text-decoration:none;font-size:10.5px;font-weight:700;
  color:var(--u-ok);margin-top:2px}

/* رسمٌ بيانيّ */
.ui__chart{background:var(--u-sf);border:1px solid var(--u-bd);border-radius:14px;
  padding:14px;margin-bottom:10px}
.ui__chart h5{margin:0 0 12px;font-size:12.5px;font-weight:800}
.ui__cols{display:flex;align-items:flex-end;gap:8px;height:92px}
.ui__cols i{flex:1;border-radius:6px 6px 0 0;font-style:normal;
  background:linear-gradient(180deg,var(--u-pr),#93c5fd)}
.ui__cols i:last-child{background:linear-gradient(180deg,var(--u-ok),#86efac)}
.ui__legend{display:flex;gap:16px;margin-top:10px;font-size:10.5px;color:var(--u-mu)}
.ui__legend s{width:9px;height:9px;border-radius:3px;background:var(--u-pr);
  display:inline-block;margin-inline-end:5px;text-decoration:none}

/* معالجُ النقل */
.ui__wiz{display:flex;gap:7px;margin-bottom:14px}
.ui__wiz i{flex:1;height:5px;border-radius:99px;background:var(--u-bd);font-style:normal}
.ui__wiz i.on{background:var(--u-pr)}
.ui__map{display:grid;grid-template-columns:1fr auto 1fr;gap:9px;align-items:center;
  font-size:12px;margin-bottom:8px}
.ui__map span{background:var(--u-sf);border:1px solid var(--u-bd);border-radius:10px;
  padding:9px 11px;color:var(--u-tx);font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ui__map em{color:var(--u-pr);font-style:normal;font-weight:800;font-size:15px}
.ui__tally{display:flex;gap:10px;margin-top:13px}
.ui__tally div{flex:1;background:var(--u-sf);border:1px solid var(--u-bd);
  border-radius:14px;padding:11px;text-align:center;position:relative;overflow:hidden}
.ui__tally div::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;
  height:3px;background:var(--u-ok)}
.ui__tally div:nth-child(2)::before{background:var(--u-wn)}
.ui__tally div:nth-child(3)::before{background:#dc2626}
.ui__tally b{display:block;font-family:var(--mono);font-size:18px;font-weight:800;
  color:var(--u-tx);direction:ltr;unicode-bidi:isolate}
.ui__tally span{display:block;font-size:11px;color:var(--u-mu);margin-top:3px;
  font-weight:600}

.ui__cap{margin-top:14px;font-size:13.5px;color:var(--faint);text-align:center}

@media(max-width:820px){
  .ui__body{grid-template-columns:1fr;min-height:0}
  .ui__side{display:flex;gap:4px;overflow:hidden;padding:9px;
    border-inline-end:0;border-bottom:1px solid rgba(255,255,255,.06)}
  .ui__side s{display:none}
  .ui__side i{margin:0;white-space:nowrap;font-size:11.5px;padding:7px 10px}
  .ui__side i:nth-child(n+5){display:none}
  .ui__split{grid-template-columns:1fr}
  .ui__main{padding:12px}
}
@media(max-width:520px){
  .ui__goods{grid-template-columns:repeat(2,1fr)}
  .ui__kpis{grid-template-columns:1fr 1fr}
  .ui__kpi:nth-child(3){grid-column:1/-1}
}

/* ══════════════════════════════════════════════════════════
   الحركة — مقيسةٌ بالغرض لا مبعثرة
   ══════════════════════════════════════════════════════════ */

/* شريطُ تقدّمٍ للقراءة: يقول أين أنت من الصفحة بلا أن يُقاطع */
.prog{position:fixed;inset-block-start:0;inset-inline-start:0;height:2px;z-index:70;
  width:0;background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3));
  transition:width .12s linear;pointer-events:none}

/* بطاقةُ الوحدة ترتفع قليلاً وتُضيء حافّتها */
.mod{position:relative;transition:background .2s var(--ease),transform .25s var(--ease)}
.mod:hover{transform:translateY(-2px)}
.mod::after{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  opacity:0;transition:opacity .25s var(--ease)}
.mod:hover::after{opacity:.75}

/* البطاقاتُ تتتابع لا تظهر دفعةً واحدة */
.rv--stagger>*{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rv--stagger.in>*{opacity:1;transform:none}

/* الأرقامُ الكبيرة تتنفّس عند دخولها */
.n[data-count]{display:inline-block}
.rv.in .n[data-count]{animation:pop .6s var(--ease) both}
@keyframes pop{from{transform:scale(.96);opacity:.4}to{transform:none;opacity:1}}

/* المشهدُ يقترب قليلاً حين يدخل — عمقٌ لا استعراض */
.scene{transform:scale(.97);opacity:.001;
  transition:transform .9s var(--ease),opacity .9s var(--ease)}
.scene.seen{transform:none;opacity:1}

@media(prefers-reduced-motion:reduce){
  .prog{display:none}
  .mod:hover{transform:none}
  .rv--stagger>*{opacity:1;transform:none;transition:none}
  .rv.in .n[data-count]{animation:none}
  .scene{transform:none;opacity:1;transition:none}
}

/* ══════════════════════════════════════════════════════════
   الخانات الفارغة في الشبكات
   ══════════════════════════════════════════════════════════ */
/*
   اثنتان وعشرون وحدةً على أربعة أعمدةٍ تترك فراغين في المجموعات
   السداسيّة — مستطيلان أسودان وسط جدولٍ منتظم، يقرآن كعطبٍ لا كتصميم.

   والحلُّ ليس حشوَهما بكلام: الشبكة تصير `auto-fit` فتوزّع ما فيها على
   العرض المتاح، فلا يبقى فراغٌ أصلا. وما تبقّى — إن بقي — يُملأ بخليّةٍ
   منسوجةٍ خافتةٍ تُقرأ استمراراً للجدول لا ثقباً فيه.
*/
.mods{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.mods__grp{grid-column:1/-1}

/* خليّةُ الوصل: قُطريّاتٌ خافتةٌ بلون الحدّ نفسه */
.mod--fill{background:
  repeating-linear-gradient(135deg,
    transparent 0 9px,
    rgba(255,255,255,.022) 9px 10px);
  pointer-events:none}
.mod--fill:hover{background:
  repeating-linear-gradient(135deg,
    transparent 0 9px,
    rgba(255,255,255,.022) 9px 10px)}
.mod--fill::after{display:none}

/* نفسُ العلاج للشبكات الأخرى */
.cols--3,.cols--4{grid-auto-rows:1fr}
.cols>div:empty{display:none}

/* ══════════════════════════════════════════════════════════
   عرضُ التأسيس — بروزٌ وإلحاحٌ بلا كذب
   ══════════════════════════════════════════════════════════ */
.trial{position:relative;overflow:hidden}
/* وميضٌ يمرّ مرّةً كلَّ ستّ ثوانٍ: يجذب العين ولا يشغلها */
.trial::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.055) 50%,transparent 62%);
  transform:translateX(-120%);animation:sweep 6s var(--ease) infinite}
@keyframes sweep{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

.trial__flag{display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,var(--g1),var(--g2));color:#04120C;
  font-family:var(--ar-display);font-size:16px;font-weight:700;line-height:1.2;
  letter-spacing:0;border-radius:99px;padding:9px 18px;
  margin-bottom:16px;box-shadow:0 10px 30px -12px rgba(32,192,141,.95)}
/* الإنجليزيّة لا تحمّل الكوفيّ، فيؤدّي الموحّدُ دورَ التباين هناك. */
[dir=ltr] .trial__flag{font-family:var(--mono);font-size:13px;
  letter-spacing:.07em;text-transform:uppercase}
.trial__flag i{width:7px;height:7px;border-radius:50%;background:#04120C;
  font-style:normal;animation:blip 1.6s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}

/* ما يشمله العرض — لا عدّادُ أماكنَ متبقّيةٍ لا نملك بياناتها. الندرةُ
   الصادقة «لأول ثلاثين محل»، وهي قرارٌ يُلتزم به؛ أمّا «يبقى ٢٩» فرقمٌ
   يتطلّب سجلّا حقيقيّا. */
.trial__left{display:flex;align-items:baseline;gap:9px;margin-top:16px;
  flex-wrap:wrap;font-size:14px;color:var(--dim);font-weight:500}
.trial__left b{color:var(--sand);font-weight:700}

/* دون 620px لا يتّسع السطر لستّة عناصر، وتركُها تلتفّ يخلّف بنداً يتيماً
   وفاصلةً معلّقةً في آخر السطر الذي قبله. فتُقلب قائمةً صريحة. */
@media(max-width:620px){
  .trial__left{flex-direction:column;align-items:flex-start;gap:8px;margin-top:18px}
  .trial__left>span:not(:first-child){display:none}
  .trial__left b{display:inline-flex;align-items:center;gap:8px}
  .trial__left b::before{content:"✓";color:var(--brand);font-size:12px;line-height:1}
}

@media(prefers-reduced-motion:reduce){
  .trial::after{animation:none;opacity:0}
  .trial__flag i{animation:none}
}

/* ══════════════════════════════════════════════════════════
   الثقة — من مادّةٍ صحيحةٍ وحدها
   ══════════════════════════════════════════════════════════ */
/* ثلاثةُ أعمدةٍ لا auto-fit: ستُّ بطاقاتٍ تقسم على ثلاثةٍ وعلى اثنين بلا
   بقيّة، وauto-fit أعطى خمسةً فتركت أربعَ خاناتٍ فارغة. عددُ الأعمدة
   يُختار ليقسم عددَ البطاقات، لا ليملأ العرض. */
.trust{display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media(max-width:1000px){.trust{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.trust{grid-template-columns:1fr}}
.trust>div{background:var(--bg);padding:26px 24px}
.trust b{display:block;font-family:var(--ar-display);font-size:16px;font-weight:600;
  margin-bottom:8px;display:flex;align-items:center;gap:9px}
[dir=ltr] .trust b{font-family:var(--la)}
.trust b svg{width:17px;height:17px;color:var(--brand);flex:0 0 auto}
.trust p{margin:0;font-size:14.5px;color:var(--dim);line-height:1.7;max-width:none}
.trust__q{border-inline-start:2px solid var(--brand);padding:22px 26px;
  background:var(--surface);margin-top:30px}
.trust__q p{font-size:17px;color:var(--ink);line-height:1.8;margin:0 0 10px;max-width:64ch}
.trust__q cite{font-style:normal;font-size:14px;color:var(--faint)}