html{-webkit-text-size-adjust:100%}body{margin:0}[hidden]{display:none!important}img{max-width:100%}

/* Layout: sticky nav; full-width bands with a centred 1180px inner column; hero = copy + product mock side by side, stacking on phones */
:root{
  --bg:#EEF3F1; --surface:#FFFFFF; --surface-2:#F5F8F7; --ink:#13201D; --muted:#56675F; --line:#D8E2DE;
  --primary:#0D6A5B; --primary-ink:#FFFFFF; --primary-soft:#DCEFEA; --deep:#0A3F37; --deep-ink:#E8F4F1;
  --accent:#D98C1F; --accent-soft:#FBEBD2; --good:#1E7F4F; --good-soft:#DDF2E6;
  --display:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic","Readex Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:16px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B1513; --surface:#13201D; --surface-2:#182824; --ink:#E6EFEC; --muted:#9AADA8; --line:#263833;
  --primary:#3DB79E; --primary-ink:#06231D; --primary-soft:#163A33; --deep:#0F2B26; --deep-ink:#E6EFEC;
  --accent:#F0AA45; --accent-soft:#3A2A12; --good:#5BC98D; --good-soft:#163323; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B1513; --surface:#13201D; --surface-2:#182824; --ink:#E6EFEC; --muted:#9AADA8; --line:#263833;
  --primary:#3DB79E; --primary-ink:#06231D; --primary-soft:#163A33; --deep:#0F2B26; --deep-ink:#E6EFEC;
  --accent:#F0AA45; --accent-soft:#3A2A12; --good:#5BC98D; --good-soft:#163323; color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--surface)}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.015em;line-height:1.2}
p{margin:0}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.in{max-width:1180px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.band{padding-block:84px}
.band.alt{background:var(--surface)}
.eyebrow{font-size:13px;font-weight:600;color:var(--primary);letter-spacing:.08em;text-transform:uppercase}
:lang(ar) .eyebrow{letter-spacing:0;text-transform:none;font-size:14px}
.sec-head{display:flex;flex-direction:column;gap:12px;max-width:700px;margin-bottom:40px}
.sec-head h2{font-size:clamp(28px,4vw,40px)}
.sec-head p{color:var(--muted);font-size:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:13px 20px;font-weight:600;font-size:16px;text-decoration:none;cursor:pointer;background:var(--primary);color:var(--primary-ink)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--primary)}
.btn.sm{padding:9px 14px;font-size:14px;border-radius:10px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .in{display:flex;align-items:center;gap:18px;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo b{font-family:var(--display);font-size:21px}
.links{display:flex;gap:22px;margin-inline-start:18px}
.links a{text-decoration:none;font-size:15px;color:var(--muted);font-weight:500}
.links a:hover{color:var(--ink)}
.nav .sp{flex:1}
.langb{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:14px;cursor:pointer}
@media (max-width:900px){.links,.nav .demo-nav{display:none}}
@media (max-width:420px){.nav .trial-nav{padding:8px 11px;font-size:13px}}

/* hero */
.hero{padding-block:64px 80px;overflow:hidden}
.hero .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}
.hero h1{font-size:clamp(34px,5.2vw,58px);font-weight:600}
.hero h1 em{font-style:normal;color:var(--primary);position:relative}
.hero h1 em::after{content:"";position:absolute;inset-inline:0;bottom:.04em;height:.18em;background:var(--accent);opacity:.35;border-radius:4px;z-index:-1}
.hero .lede{font-size:19px;color:var(--muted);margin-top:18px;max-width:34em}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero .fine{margin-top:16px;font-size:14px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap}
.hero .fine span{display:inline-flex;align-items:center;gap:6px}
.hero .fine svg{color:var(--good)}
/* product mock */
.mock{position:relative;min-width:0}
.dash{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 30px 60px -35px rgba(8,50,42,.45)}
.dash .top{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.dash .dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
.dash .ttl{font-family:var(--display);font-weight:600;font-size:15px;margin-inline-start:8px}
.kp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kp div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.kp div.lead{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.kp small{display:block;font-size:11px;opacity:.75}
.kp b{font-family:var(--display);font-size:22px;font-weight:600}
.bars{display:flex;align-items:flex-end;gap:7px;height:120px;margin-top:16px;padding-top:6px;border-bottom:1px solid var(--line)}
.bars i{flex:1;background:var(--primary);border-radius:5px 5px 0 0;opacity:.9}
.bars i.hi{background:var(--accent)}
.rep{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface-2);border-radius:12px;padding:10px 12px;font-size:13px}
.rep .chip{background:var(--good-soft);color:var(--good);border-radius:999px;padding:3px 10px;font-weight:600;font-size:12px;white-space:nowrap}
.phone{position:absolute;width:168px;inset-inline-end:-14px;bottom:-44px;background:var(--bg);border:6px solid var(--ink);border-radius:28px;overflow:hidden;box-shadow:0 30px 50px -25px rgba(0,0,0,.5)}
.phone .ph-top{background:var(--primary);color:var(--primary-ink);padding:14px 12px 12px}
.phone .ph-top b{font-family:var(--display);font-size:14px;display:block}
.phone .ph-top small{font-size:10px;opacity:.85}
.phone .ph-body{padding:10px;display:flex;flex-direction:column;gap:8px}
.ev{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;gap:8px;align-items:center}
.ev .d{width:30px;height:34px;border-radius:7px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:13px;flex:none}
.ev span{font-size:10.5px;line-height:1.3;font-weight:600}
.ph-btn{background:var(--primary);color:var(--primary-ink);text-align:center;border-radius:9px;font-size:11px;font-weight:600;padding:7px}
@media (max-width:900px){.hero .in{grid-template-columns:minmax(0,1fr)}.mock{margin-inline-end:40px}}
@media (max-width:520px){.phone{width:132px;inset-inline-end:-30px;bottom:-36px}.mock{margin-inline-end:56px}.kp b{font-size:17px}.kp{gap:6px}}

/* problems */
.probs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;counter-reset:p}
.prob{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding-block:18px;border-top:1px solid var(--line)}
.prob .n{font-family:var(--display);font-weight:600;color:var(--accent);font-size:15px;width:28px}
.prob h3{font-size:17px;font-weight:600}
.prob p{color:var(--muted);font-size:15px;margin-top:4px}
@media (max-width:760px){.probs{grid-template-columns:minmax(0,1fr)}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;position:relative}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.step .k{width:36px;height:36px;border-radius:50%;background:var(--primary);color:var(--primary-ink);display:grid;place-items:center;font-family:var(--display);font-weight:600}
.step:last-child .k{background:var(--accent);color:#fff}
.step h3{font-size:18px}
.step p{color:var(--muted);font-size:15px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}

/* features */
.fgroups{display:flex;flex-direction:column;gap:56px}
.fgroup{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px}
.fgroup .gh{display:flex;flex-direction:column;gap:10px;position:sticky;top:96px;align-self:start}
.fgroup .gh h3{font-size:24px}
.fgroup .gh p{color:var(--muted)}
.fgroup .tag{align-self:flex-start;font-size:13px;font-weight:600;padding:4px 11px;border-radius:999px;background:var(--primary-soft);color:var(--primary)}
.flist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.feat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;align-items:start}
.band.alt .feat{background:var(--bg)}
.feat .ic{width:36px;height:36px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}
.feat .ic svg{width:19px;height:19px}
.feat h4{font-size:15.5px;font-weight:600;font-family:var(--body);letter-spacing:0}
.feat p{font-size:14px;color:var(--muted);margin-top:3px}
.feat .fn{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:900px){.fgroup{grid-template-columns:minmax(0,1fr);gap:18px}.fgroup .gh{position:static}}
@media (max-width:620px){.flist{grid-template-columns:minmax(0,1fr)}}

/* compliance */
.comp{background:var(--deep);color:var(--deep-ink);border-radius:24px;padding:48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px}
.comp h2{font-size:clamp(26px,3.4vw,36px)}
.comp .lead{opacity:.85;margin-top:14px}
.comp .note{font-size:13px;opacity:.7;margin-top:18px}
.comp ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.comp li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px}
.comp li svg{color:var(--accent);margin-top:3px}
.comp li b{display:block;font-family:var(--display);font-weight:500;font-size:17px}
.comp li span{opacity:.8;font-size:15px}
@media (max-width:820px){.comp{grid-template-columns:minmax(0,1fr);padding:28px 22px}}

/* audience */
.aud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.aud div{border-top:3px solid var(--primary);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.aud div:nth-child(2){border-color:var(--accent)}
.aud h3{font-size:18px}
.aud p{color:var(--muted);font-size:15px}
@media (max-width:900px){.aud{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.aud{grid-template-columns:minmax(0,1fr)}}
.ints{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;align-items:center}
.ints .lab{font-size:14px;color:var(--muted);margin-inline-end:6px}
.ints span.c{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:500}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:14px;min-width:0;position:relative}
.plan.pop{border:2px solid var(--primary);box-shadow:0 24px 50px -30px rgba(8,80,66,.5)}
.plan.addon{background:var(--surface-2);border-style:dashed}
.plan .badge{position:absolute;top:-13px;inset-inline-start:20px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px}
.plan h3{font-size:20px}
.plan .who{color:var(--muted);font-size:14px;min-height:2.6em}
.price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price b{font-family:var(--display);font-size:38px;font-weight:600;line-height:1}
.price span{color:var(--muted);font-size:14px}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px;flex:1}
.plan li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}
.plan li svg{color:var(--good);margin-top:4px}
.plan .btn{width:100%}
.pnote{margin-top:18px;color:var(--muted);font-size:14px}
@media (max-width:1020px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.plans{grid-template-columns:minmax(0,1fr)}}
.cmpwrap{overflow-x:auto;margin-top:40px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.cmp{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
.cmp th,.cmp td{padding:11px 16px;border-bottom:1px solid var(--line);text-align:center}
.cmp th:first-child,.cmp td:first-child{text-align:start}
.cmp thead th{background:var(--surface-2);font-family:var(--display);font-weight:600;font-size:15px}
.cmp tr.grp td{background:var(--surface-2);font-weight:600;font-size:13px;color:var(--muted)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp .y{color:var(--good)}
.cmp .no{color:var(--muted)}
.cmp .pop{background:color-mix(in srgb,var(--primary-soft) 45%,transparent)}

/* faq */
.faq{max-width:820px;display:flex;flex-direction:column}
.faq details{border-top:1px solid var(--line);padding-block:6px}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding-block:14px;font-family:var(--display);font-weight:500;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--primary);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--muted);padding-bottom:16px;max-width:68ch}

/* signup */
.cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:start}
.cta h2{font-size:clamp(28px,4vw,40px)}
.cta .pts{margin-top:20px;display:flex;flex-direction:column;gap:10px;color:var(--muted)}
.cta .pts span{display:flex;gap:10px;align-items:center}
.cta .pts svg{color:var(--good);flex:none}
form.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.field.full{grid-column:1/-1}
.field input,.field select{border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:11px 12px;font-weight:400;font-size:16px;width:100%}
.field input:focus,.field select:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-soft)}
form .full.btn{grid-column:1/-1}
.formnote{grid-column:1/-1;font-size:13px;color:var(--muted)}
.err{grid-column:1/-1;color:#B23A3A;font-size:14px}
.thanks{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:12px}
.thanks .tick{width:52px;height:52px;border-radius:50%;background:var(--good);display:grid;place-items:center}
@media (max-width:860px){.cta{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){form.card{grid-template-columns:minmax(0,1fr);padding:20px}}


/* ===== Shared shell: mega-menu navigation ===== */
.nav{position:sticky}
.links{align-items:center;gap:4px}
.links>a,.mmb{display:inline-flex;align-items:center;gap:5px;text-decoration:none;font-size:15px;color:var(--muted);font-weight:500;background:none;border:0;padding:8px 10px;border-radius:9px;cursor:pointer}
.links>a:hover,.mmb:hover,.mmb[aria-expanded="true"]{color:var(--ink);background:var(--surface-2)}
.links>a[aria-current="page"],.mmb.cur{color:var(--primary)}
.mmb svg{width:14px;height:14px;transition:transform .15s}
.mmb[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (prefers-reduced-motion: reduce){.mmb svg{transition:none}}
.mm{position:static}
.mmp{position:absolute;inset-inline:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 30px 50px -30px rgba(8,50,42,.35)}
.mmp .wrap{max-width:980px;margin-inline:auto;padding:26px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.mmcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 36px}
.mmcol h6{margin:0 0 10px;font-family:var(--body);font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
:lang(ar) .mmcol h6{letter-spacing:0;text-transform:none;font-size:14px}
.mmi{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:12px;border-radius:12px;text-decoration:none;align-items:start}
.mmi:hover,.mmi:focus-visible{background:var(--surface-2)}
.mmi[aria-current="page"]{background:var(--primary-soft)}
.mmi .ic{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--primary);display:grid;place-items:center}
.mmi .ic svg{width:19px;height:19px}
.mmi b{display:block;font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--ink)}
.mmi span{display:block;font-size:14px;color:var(--muted);line-height:1.45;margin-top:2px}
.mmfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;padding-block:14px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.mmfoot a{color:var(--primary);font-weight:600;text-decoration:none}
.mmfoot a:hover{text-decoration:underline}
.burger{display:none;border:1px solid var(--line);background:var(--surface);border-radius:10px;width:40px;height:38px;place-items:center;cursor:pointer;color:var(--ink)}
.burger svg{width:20px;height:20px}
.mnav{border-top:1px solid var(--line);background:var(--surface);max-height:calc(100vh - 64px);overflow-y:auto;padding-block:8px 20px}
.nav .mnav .in{display:block;padding-block:0}
.mnav details{border-bottom:1px solid var(--line)}
.mnav summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding-block:14px;font-family:var(--display);font-weight:600;font-size:17px}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"+";color:var(--primary);font-size:22px;line-height:1}
.mnav details[open] summary::after{content:"−"}
.mnav .mmcol{margin-bottom:10px}
.mnav .mmi{padding:10px 6px}
.mnav .plain{display:block;padding-block:14px;font-family:var(--display);font-weight:600;font-size:17px;text-decoration:none;border-bottom:1px solid var(--line)}
.mnav .mbtns{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.mnav .mbtns .btn{width:100%}
@media (max-width:900px){.burger{display:grid}.mmp{display:none}.nav .login-nav{display:none}}
@media (min-width:901px){.mnav{display:none!important}}

/* ===== Footer sitemap ===== */
.foot{background:var(--surface);border-top:1px solid var(--line);padding-block:56px 28px;font-size:14px;color:var(--muted)}
.foot .grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:32px}
.foot .brand p{margin-top:12px;max-width:30ch}
.foot h6{margin:0 0 12px;font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot a{text-decoration:none;color:var(--muted)}
.foot a:hover{color:var(--ink)}
.foot .bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;margin-top:44px;padding-top:20px;border-top:1px solid var(--line)}
@media (max-width:900px){.foot .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot .brand{grid-column:1/-1}}
@media (max-width:420px){.foot .grid{grid-template-columns:minmax(0,1fr)}}

/* ===== Detail pages ===== */
.more{margin-top:28px}
.more a{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-weight:600;text-decoration:none}
.more a:hover{text-decoration:underline}
.comp .more a{color:var(--accent)}
.phero{padding-block:56px 64px;background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%);border-bottom:1px solid var(--line)}
.phero .in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
.phero.solo .in{grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){.phero .in{grid-template-columns:minmax(0,1fr);gap:36px}}
.phero{overflow:hidden}
.phero.solo .copy{max-width:820px}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:14px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--muted)}.crumbs a:hover{color:var(--ink)}
.phero h1{font-size:clamp(32px,4.6vw,50px);font-weight:600;margin-top:12px}
.phero h1 em{font-style:normal;color:var(--primary)}
.phero .lede{font-size:19px;color:var(--muted);margin-top:16px;max-width:36em}
.phero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.phero .meta{margin-top:16px;font-size:14px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cardx{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.band.alt .cardx{background:var(--bg)}
.cardx .ic{width:40px;height:40px;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}
.cardx .ic svg{width:20px;height:20px}
.cardx h3{font-size:18px}
.cardx p{color:var(--muted);font-size:15px}
.cardx ul{margin:0;padding-inline-start:18px;color:var(--muted);font-size:15px;display:flex;flex-direction:column;gap:4px}
.cardx .tagx{align-self:flex-start;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
@media (max-width:980px){.cards,.cards.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards,.cards.c2,.cards.c4{grid-template-columns:minmax(0,1fr)}}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.split.rev .txt{order:2}
.split .txt{display:flex;flex-direction:column;gap:14px;min-width:0}
.split .txt h2{font-size:clamp(26px,3.4vw,36px)}
.split .txt p{color:var(--muted);font-size:17px}
.ticks{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ticks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;font-size:16px}
.ticks li svg{color:var(--good);margin-top:5px}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr);gap:32px}.split.rev .txt{order:0}}
.plannedpill{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);margin-inline-start:6px;vertical-align:middle;font-family:var(--body);letter-spacing:0}
.notice{border:1px solid var(--line);border-inline-start:4px solid var(--accent);background:var(--accent-soft);border-radius:12px;padding:14px 18px;font-size:15px;max-width:860px}
.prose{max-width:760px;font-size:17px;line-height:1.75}
.prose h2{font-size:clamp(24px,3vw,30px);margin:40px 0 12px}
.prose h3{font-size:20px;margin:28px 0 8px}
.prose p{margin:0 0 16px;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 18px;padding-inline-start:24px;display:flex;flex-direction:column;gap:6px}
.prose a{color:var(--primary)}
.prose .callout{border-inline-start:4px solid var(--primary);background:var(--primary-soft);border-radius:10px;padding:14px 18px;margin:20px 0;font-size:16px}
.prose .src{font-size:14px;color:var(--muted)}
.prose>:first-child{margin-top:0}
.artmeta{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-top:16px}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px;text-decoration:none;min-width:0}
.post:hover{border-color:var(--primary)}
.post .tagx{align-self:flex-start;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary)}
.post h3{font-size:19px}
.post p{color:var(--muted);font-size:15px;flex:1}
.post .rm{color:var(--primary);font-weight:600;font-size:14px}
@media (max-width:980px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.posts{grid-template-columns:minmax(0,1fr)}}
.toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.toc a{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:500;text-decoration:none}
.toc a:hover{border-color:var(--primary)}
.guide{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:40px;padding-block:36px;border-top:1px solid var(--line);scroll-margin-top:90px}
.guide:first-child{border-top:0;padding-top:0}
.guide .gh h3{font-size:22px}
.guide .gh p{color:var(--muted);margin-top:8px;font-size:15px}
.guide .gh .who{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary)}
.olist{list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.olist li{counter-increment:s;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.olist li::before{content:counter(s);width:30px;height:30px;border-radius:50%;background:var(--primary);color:var(--primary-ink);display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:14px}
.olist b{display:block;font-family:var(--display);font-weight:600}
.olist span{color:var(--muted);font-size:15px}
.olist code,.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
@media (max-width:860px){.guide{grid-template-columns:minmax(0,1fr);gap:18px}}
.copyb{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;scroll-margin-top:90px}
.copyb+.copyb{margin-top:20px}
.copyb .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.copyb .hd h3{font-size:19px}
.copyb .hd p{color:var(--muted);font-size:15px;margin-top:4px;max-width:60ch}
.copyb pre{margin:0;padding:20px;white-space:pre-wrap;font-family:var(--body);font-size:15px;line-height:1.7;background:var(--surface-2);max-height:440px;overflow:auto}
.copybtn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 14px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.copybtn:hover{border-color:var(--primary)}
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.related a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;text-decoration:none;align-items:start}
.band.alt .related a{background:var(--bg)}
.related a:hover{border-color:var(--primary)}
.related .ic{width:36px;height:36px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}
.related .ic svg{width:18px;height:18px}
.related b{display:block;font-family:var(--display);font-weight:600;font-size:15.5px}
.related span{display:block;font-size:14px;color:var(--muted)}
@media (max-width:900px){.related{grid-template-columns:minmax(0,1fr)}}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.tbl table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
.tbl th,.tbl td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.tbl th{background:var(--surface-2);font-family:var(--display);font-weight:600;font-size:14px}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:600}
.faqg+.faqg{margin-top:44px}
.faqg h3{font-size:22px;margin-bottom:10px}
.closing{background:var(--deep);color:var(--deep-ink);border-radius:24px;padding:44px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.closing h2{font-size:clamp(26px,3.4vw,36px)}
.closing p{opacity:.85;margin-top:10px;max-width:46ch}
.closing .ctas{display:flex;gap:12px;flex-wrap:wrap}
.closing .btn.ghost{color:var(--deep-ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--deep-ink) 40%,transparent)}
@media (max-width:620px){.closing{padding:28px 22px}}
.verlist{display:flex;flex-direction:column;gap:22px;max-width:860px}
.ver{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.ver .vh{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.ver .vh h3{font-size:22px}
.ver .vh span{color:var(--muted);font-size:14px}
.ver ul{margin:14px 0 0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px}

/* ===== Mini product mocks (HTML/CSS, no images) ===== */
.mini{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 30px 60px -35px rgba(8,50,42,.45);min-width:0;font-size:14px}
.band.alt .mini{background:var(--bg)}
.mini .mt{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.mini .mt b{font-family:var(--display);font-size:15px}
.mini .pill{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pill.g{background:var(--good-soft);color:var(--good)}.pill.a{background:var(--accent-soft);color:var(--accent)}.pill.p{background:var(--primary-soft);color:var(--primary)}.pill.r{background:#F8E0DF;color:#B23A3A}
.mini .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);min-width:0}
.mini .row:first-of-type{border-top:0}
.mini .row>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini .sb{flex:1;max-width:120px;height:8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.mini .sb i{display:block;height:100%;background:var(--primary);border-radius:999px}
.mini .sb i.w{background:var(--accent)}
.mini .qrbox{display:grid;place-items:center;gap:10px;padding:10px}
.mini .qr{width:132px;height:132px;background:conic-gradient(var(--ink) 0 25%,transparent 0 50%,var(--ink) 0 75%,transparent 0) 0 0/22px 22px;border:10px solid var(--surface);outline:1px solid var(--line);border-radius:10px}
.mini .code{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:.3em;direction:ltr}
.mini .kpi2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.mini .kpi2 div{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.mini .kpi2 small{display:block;font-size:11px;color:var(--muted)}
.mini .kpi2 b{font-family:var(--display);font-size:20px}
.mini .tree{display:flex;flex-direction:column;gap:8px}
.mini .tree div{border:1px solid var(--line);border-radius:10px;padding:9px 12px;display:flex;justify-content:space-between;gap:10px}
.mini .tree .l2{margin-inline-start:22px}
.mini .tree .l3{margin-inline-start:44px}
.mini .srv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mini .srv div{border:1px dashed var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px}
.mini .srv div.on{border:2px solid var(--primary);background:var(--primary-soft)}
.mini .ph{width:220px;margin-inline:auto;border:7px solid var(--ink);border-radius:30px;overflow:hidden;background:var(--bg)}
.mini .ph .top{background:var(--primary);color:var(--primary-ink);padding:14px}
.mini .ph .top b{display:block;font-family:var(--display)}
.mini .ph .top small{opacity:.85;font-size:11px}
.mini .ph .bd{padding:10px;display:flex;flex-direction:column;gap:8px}
.mini .ph .ev span{font-size:11.5px}
.mini .cardv{background:var(--primary);color:var(--primary-ink);border-radius:14px;padding:16px;display:flex;gap:14px;align-items:center}
.mini .cardv .q{width:64px;height:64px;flex:none;background:conic-gradient(#111 0 25%,#fff 0 50%,#111 0 75%,#fff 0) 0 0/12px 12px;border:5px solid #fff;border-radius:8px}
.mini .cardv b{font-family:var(--display);display:block}
.mini .cardv small{opacity:.85;font-size:12px}

.trial-nav{white-space:nowrap}
@media (max-width:440px){.nav .in>.langb{display:none}}
.mnav .mbtns .langb{align-self:flex-start}

/* country selector, language link and geo suggestion (localization) */
a.langb{text-decoration:none;color:var(--ink);display:inline-flex;align-items:center}
.ctry{position:relative}
.ctry summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 10px;font-size:14px;color:var(--ink);white-space:nowrap}
.ctry summary::-webkit-details-marker{display:none}
.ctry summary svg{width:16px;height:16px}
.ctry[open] summary svg:last-child{transform:rotate(180deg)}
.ctry-l{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:40;min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.12);padding:6px;display:flex;flex-direction:column}
.ctry-l a{padding:9px 12px;border-radius:9px;text-decoration:none;color:var(--ink);font-size:14.5px}
.ctry-l a:hover{background:var(--surface-2)}
.ctry-l a[aria-current]{background:var(--primary-soft);font-weight:600}
.ctry-l a[data-cc="intl"]{border-top:1px solid var(--line);margin-top:4px;color:var(--muted)}
@media (max-width:900px){.nav .ctry-nav{display:none}}
.mnav .ctry-m{margin-top:12px}
.mnav .ctry-m .ctry-l{position:static;box-shadow:none;margin-top:8px;min-width:0}
.geobar{background:var(--primary-soft);border-bottom:1px solid var(--line);font-size:14.5px}
.geobar .in{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-block:9px}
.geobar a{font-weight:600;color:var(--primary)}
.geobar button{margin-inline-start:auto;background:none;border:0;cursor:pointer;color:var(--muted);padding:4px;display:inline-flex}
.geobar button svg{width:18px;height:18px}

/* ===== Knowledge base ===== */
[hidden]{display:none!important}
.kbsearch{max-width:560px;margin:0 0 28px}
.kbsearch input{width:100%;font:inherit;font-size:16px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink,inherit)}
.kbsearch input:focus{outline:2px solid var(--primary);outline-offset:1px}
.kbsearch p{color:var(--muted);margin-top:12px}
.kbcat{margin-top:36px}
.kbcath{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:16px}
.kbcath h2{font-size:clamp(20px,2.4vw,26px);margin:0}
.kbcath p{color:var(--muted);margin:0;flex:1 1 280px}
.kbcath span{font-size:13px;color:var(--primary);background:var(--primary-soft);border-radius:999px;padding:3px 10px}
.kbart{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start}
.kbtoc{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;border-inline-start:2px solid var(--line);padding-inline-start:14px;font-size:14px}
.kbtoc a{color:var(--muted);text-decoration:none;padding:5px 0}
.kbtoc a:hover{color:var(--primary)}
.kbtoc .kbback{margin-top:12px;color:var(--primary)}
.kbbody{max-width:76ch}
.kbbody h2:first-of-type{margin-top:28px}
.kbbody h3{font-size:18px;margin:26px 0 12px}
.kbbody code{font-size:.9em;background:var(--surface2,rgba(0,0,0,.05));padding:1px 5px;border-radius:5px;overflow-wrap:anywhere}
.kbfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.band.alt .kbfacts{background:var(--bg)}
.kbfacts small{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
.kbfacts b{font-weight:500;font-size:14px;line-height:1.45}
@media (max-width:900px){.kbart{grid-template-columns:1fr;gap:20px}.kbtoc{position:static;flex-direction:row;flex-wrap:wrap;gap:6px 14px;border:0;padding:0}.kbtoc a{padding:2px 0}.kbfacts{grid-template-columns:1fr}.related.kbgrid{grid-template-columns:1fr}}
@media (min-width:901px) and (max-width:1100px){.related.kbgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* wordmark + Arabic line under the logo */
.logo .wm{display:flex;flex-direction:column;line-height:1.1}
.logo .wm b{font-family:var(--display);font-size:21px;direction:ltr}
.logo .wm small{font-size:11px;font-weight:500;color:var(--muted);margin-top:3px;white-space:nowrap}

/* ===== Plans: three plans + add-ons ===== */
.plans{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1020px){.plans{grid-template-columns:minmax(0,1fr)}}
@media (min-width:700px) and (max-width:1020px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.addons-h{margin-top:48px}
.addons-h h3{font-size:clamp(22px,2.6vw,28px);margin:8px 0 6px}
.addons-h p{color:var(--muted);margin:0}
.addons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.addcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:12px;min-width:0}
.addcard.priv{background:var(--surface-2);border-style:dashed}
.addcard .tagx{align-self:flex-start}
.addcard h3{margin:0;font-size:21px}
.addcard .who{margin:0;color:var(--muted)}
.addcard .aprice{display:flex;flex-direction:column;gap:2px}
.addcard .aprice b{font-size:24px;font-family:var(--display)}
.addcard .aprice span{color:var(--muted);font-size:14px}
.addcard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.addcard li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start}
.addcard li svg{color:var(--primary);margin-top:3px}
.addcard .btn{margin-top:auto;align-self:stretch;text-align:center}
.which{margin-top:24px}
.which h4{font-size:17px;margin:0 0 10px}
.which .cmp td,.which .cmp th{text-align:start;vertical-align:top}
.addpill{display:inline-block;font-size:12px;font-weight:600;color:var(--accent-ink,var(--primary));background:var(--primary-soft);border-radius:999px;padding:2px 10px}
@media (max-width:760px){.addons{grid-template-columns:minmax(0,1fr)}}
.addcard .tagx{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary)}
.addcard.priv .tagx{background:var(--accent-soft);color:var(--accent)}
.addcard .aval{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.addcard .aval b{font-size:24px;font-family:var(--display)}
.addcard .aval .afrom{color:var(--muted);font-size:14px}