/* The public pages: the same identity as the app (pearl paper, deep sea, indigo, El Messiri). No script, no inline style. */
:root { --paper:#F3F2F0; --panel:#FFFFFF; --ink:#0B1B2B; --soft:#566474; --rule:#D9D6D1; --petrol:#2D3FA8; --on-petrol:#FFFFFF; --clay:#CF4129; --sea:#0A1433; --r:16px;
  --display:"El Messiri","IBM Plex Sans Arabic",Tahoma,sans-serif; --body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif; --nacre:linear-gradient(115deg,#F7C6DC 0%,#CBC4F7 34%,#B3E9E4 66%,#F7DDB8 100%); }
@media (prefers-color-scheme: dark) { :root { --paper:#070D24; --panel:#101A3D; --ink:#ECEBF8; --soft:#98A3CB; --rule:#243060; --petrol:#9DAAFF; --on-petrol:#0A1235; --clay:#FF8F78; } }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.75 var(--body); }
main { max-width:760px; margin:0 auto; padding:20px 18px 60px; }
a { color:var(--petrol); } :focus-visible { outline:3px solid #1D6BB8; outline-offset:2px; border-radius:6px; }
.brand { display:inline-flex; align-items:center; text-decoration:none; } .brand img { height:30px; width:auto; display:block; }
.brand .dark { display:none; } @media (prefers-color-scheme: dark) { .brand .light { display:none; } .brand .dark { display:block; } }
nav.top { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; justify-content:space-between; margin-bottom:10px; }
nav.top div { display:flex; gap:16px; flex-wrap:wrap; } nav.top a { display:inline-flex; align-items:center; min-height:44px; font-size:15px; }
h1 { font:700 clamp(30px,6vw,40px)/1.25 var(--display); margin:18px 0 8px; } h2 { font:700 22px/1.35 var(--display); margin:34px 0 8px; } h3 { font:600 15px var(--body); color:var(--soft); margin:18px 0 6px; }
p { margin:0 0 10px; } .lead { font-size:19px; color:var(--soft); max-width:36em; }
.beta { display:inline-block; font:700 12px var(--body); color:var(--clay); border:1.5px solid currentColor; border-radius:999px; padding:2px 12px; }
.grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin:14px 0; } @media (max-width:640px) { .grid { grid-template-columns:1fr; } }
.card { background:var(--panel); border:1px solid var(--rule); border-radius:var(--r); padding:14px 16px; } .card b { font:700 18px var(--display); display:block; margin-bottom:4px; }
ul { margin:6px 0; padding-inline-start:22px; } li { margin:4px 0; }
.price { font:700 30px var(--display); color:var(--petrol); }
.cta { display:inline-flex; align-items:center; min-height:50px; padding:0 24px; background:var(--petrol); color:var(--on-petrol); border-radius:var(--r); text-decoration:none; font:700 18px var(--display); margin-top:10px; }
.note { border:1.5px dashed var(--rule); border-radius:var(--r); padding:10px 14px; color:var(--soft); font-size:15px; }
.en { direction:ltr; text-align:left; border-top:2px solid var(--rule); margin-top:40px; padding-top:10px; }
footer { margin-top:40px; padding-top:14px; border-top:1px solid var(--rule); color:var(--soft); font-size:14px; display:flex; flex-wrap:wrap; gap:6px 18px; } footer a { display:inline-flex; align-items:center; min-height:44px; }

nav.top a.enter { font-weight:700; border:1.5px solid var(--petrol); border-radius:999px; padding:0 16px; text-decoration:none; }
.card.demo { display:block; margin:20px 0; line-height:1.8; }
.card.demo .tip { display:block; margin-top:8px; padding:10px 14px; border-radius:12px; border-inline-start:4px solid #2FD3A0; background:rgba(47,211,160,.12); font-weight:600; }
.grid.cmp { grid-template-columns:1fr 1fr; } @media (max-width:640px) { .grid.cmp { grid-template-columns:1fr; } }