:root{--bg:#0b0b0c;--card:#1a1a1c;--card2:#212124;--border:#232326;--text:#f4f4f3;--muted:#8d8d8f;--accent:#4d90fe;--accent2:#6B90DA;--accent-soft:rgba(77,144,254,.16);--radius:14px;--ink:#dcdce0;--prose:68ch}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'IBM Plex Sans Arabic','Segoe UI',system-ui,-apple-system,sans-serif;line-height:1.9;font-size:clamp(16px,0.4vw + 15px,18px);min-height:100vh;display:flex;flex-direction:column;-webkit-text-size-adjust:100%}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
/* A link in a paragraph has to look like a link before anyone hovers it. */
.blog-wrap p a,.blog-wrap li a,.blog-wrap td a,.blog-wrap article p a,.blog-wrap article li a{text-decoration:underline;text-decoration-color:rgba(77,144,254,.45);text-underline-offset:3px}
.blog-wrap p a:hover,.blog-wrap li a:hover,.blog-wrap td a:hover,.blog-wrap article p a:hover,.blog-wrap article li a:hover{text-decoration-color:var(--accent2)}
:focus-visible{outline:2px solid var(--accent2);outline-offset:3px;border-radius:6px}
.blog-topbar{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06);height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.blog-topbar .t-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;color:var(--text);text-decoration:none}
.blog-topbar .t-brand img{width:28px;height:28px;border-radius:8px}
.blog-topbar .t-links{display:flex;align-items:center;gap:4px}
.blog-topbar .t-links a{color:var(--muted);font-size:13.5px;font-weight:600;padding:8px 12px;border-radius:9px;text-decoration:none;transition:all .16s}
.blog-topbar .t-links a:hover,.blog-topbar .t-links a.on{background:rgba(255,255,255,.06);color:var(--text)}
.blog-topbar .cta{background:var(--accent);color:#fff;font-size:13px;font-weight:700;padding:8px 16px;border-radius:10px;text-decoration:none;transition:transform .16s,box-shadow .16s;white-space:nowrap}
.blog-topbar .cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(77,144,254,.40);text-decoration:none}
.blog-wrap{flex:1;width:100%;max-width:860px;margin:0 auto;padding:40px 24px 70px}
/* Long-form prose wants a measure, not the widest column the screen allows.
   Headings, tables and cards keep the full width; paragraphs do not. */
.blog-wrap>p,.blog-wrap article>p,.blog-wrap>ul,.blog-wrap>ol,
.blog-wrap article>ul,.blog-wrap article>ol,.blog-wrap>.lead-box,.blog-wrap>.tip,
.blog-wrap>.warn,.blog-wrap>.faq-item,.blog-wrap>.faq-item p{max-width:var(--prose)}
.blog-crumb{font-size:13px;color:var(--muted);margin-bottom:26px}
.blog-crumb a{color:var(--muted)}
.blog-crumb a:hover{color:var(--accent2)}
.blog-hero .kicker{display:inline-block;background:var(--accent-soft);color:var(--accent2);font-size:12px;font-weight:700;padding:5px 12px;border-radius:99px;margin-bottom:16px;letter-spacing:.3px}
.blog-hero h1{font-size:40px;font-weight:800;line-height:1.35;margin-bottom:14px;letter-spacing:-.5px}
.blog-hero .lede{font-size:19px;color:#c9c9c8;line-height:1.8;margin-bottom:16px}
.blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;color:var(--muted);font-size:13px;margin-bottom:34px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.06)}
.blog-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted)}
.blog-meta .tagchip{background:rgba(255,255,255,.05);padding:3px 10px;border-radius:99px;font-size:12px}
h2{font-size:clamp(21px,1.1vw + 18px,27px);font-weight:800;margin:3.2em 0 .7em;padding-bottom:.45em;border-bottom:1px solid rgba(255,255,255,.07);line-height:1.45;letter-spacing:-.2px;scroll-margin-top:84px}
h3{font-size:clamp(18px,0.7vw + 16px,21px);font-weight:700;margin:2.1em 0 .6em;color:#ededee;line-height:1.55;scroll-margin-top:84px}
h4{font-size:18px;font-weight:700;margin:22px 0 8px;color:#e9e9e8}
p{margin:1.05em 0;color:var(--ink);line-height:1.95;text-align:start}
ul,ol{margin:1.05em 0 1.3em;padding-inline-start:1.6em;color:var(--ink)}
li{margin:.5em 0;padding-inline-start:.25em}
li::marker{color:var(--accent2)}
ol>li::marker{font-variant-numeric:tabular-nums;font-weight:700}
strong{color:var(--text)}
em{color:#e9e9e8}
.lead-box{background:var(--card);border:1px solid var(--border);border-inline-start:3px solid var(--accent);border-radius:var(--radius);padding:1.15em 1.35em;margin:1.7em 0;font-size:1.06em}
.lead-box p{margin:0;color:#e6e6e8}
.tip{background:rgba(77,144,254,.08);border:1px solid rgba(77,144,254,.28);border-inline-start:3px solid var(--accent2);border-radius:var(--radius);padding:1.05em 1.25em;margin:1.6em 0;font-size:.97em;color:#cfe0ff}
.tip b{color:var(--accent2)}
.warn{background:rgba(255,120,90,.06);border:1px solid rgba(255,120,90,.26);border-inline-start:3px solid #ff8f7e;border-radius:var(--radius);padding:1.05em 1.25em;margin:1.6em 0;font-size:.97em;color:#ffc4b6}
.warn b{color:#ff8f7e}
/* Five comparison columns cannot fit a phone. Below the desktop breakpoint the
   table keeps a readable minimum width and scrolls sideways inside its own
   rounded frame, instead of crushing every cell to 95px or pushing the whole
   page sideways. On a wide screen it simply fills the column. */
.tbl-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.9em 0;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.tbl-scroll::-webkit-scrollbar{height:9px}
.tbl-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9px}
.tbl-scroll::-webkit-scrollbar-track{background:transparent}
table{width:100%;border-collapse:collapse;margin:0;font-size:15px}
.tbl-scroll table{min-width:660px}
th,td{text-align:start;padding:13px 16px;border-bottom:1px solid var(--border);border-inline-end:1px solid var(--border);vertical-align:top;line-height:1.6}
th:last-child,td:last-child{border-inline-end:none}
tbody tr:last-child td{border-bottom:none}
th{background:var(--card2);color:var(--text);font-weight:700;position:sticky;top:60px;z-index:2}
td{background:rgba(255,255,255,.015);color:var(--ink)}
tr:nth-child(even) td{background:rgba(255,255,255,.032)}
.toc{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.3em 1.5em;margin:2em 0;max-width:none}
.toc b{display:block;margin-bottom:.7em;color:var(--accent2);font-size:.95em;letter-spacing:.2px}
.toc ol{margin:0;padding-inline-start:1.5em}
.toc li{margin:.34em 0;font-size:.93em}
.toc li::marker{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent2)}
.toc a{color:#cfe0ff}
.toc a:hover{color:#fff}
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.15em 1.3em;margin:1em 0;max-width:none}
.faq-item h3{margin:0 0 .5em;font-size:1.05em;color:var(--text);position:relative;padding-inline-start:1.4em}
.faq-item h3::before{content:"؟";position:absolute;inset-inline-start:0;top:-.1em;width:1.15em;height:1.15em;border-radius:50%;background:var(--accent-soft);color:var(--accent2);font-size:.78em;font-weight:800;display:flex;align-items:center;justify-content:center}
.faq-item p{margin:0;font-size:.97em;color:#c6c6c8}
.cta-block{background:linear-gradient(135deg,rgba(77,144,254,.16),rgba(77,144,254,.06));border:1px solid rgba(77,144,254,.36);border-radius:18px;text-align:center;padding:44px 28px;margin:58px 0 10px}
.cta-block h2{border:none;margin:0 0 10px;font-size:27px;color:var(--text)}
.cta-block p{color:#c9c9c8;margin-bottom:26px}
.cta-btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;font-weight:800;font-size:17px;padding:15px 34px;border-radius:14px;text-decoration:none;box-shadow:0 12px 34px rgba(77,144,254,.42);transition:transform .16s,box-shadow .16s}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(77,144,254,.52);text-decoration:none}
.cta-note{font-size:12.5px;color:var(--muted);margin-top:14px}
.related{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
@media(max-width:720px){.related{grid-template-columns:1fr}}
.related a{display:block;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;color:var(--text);text-decoration:none;transition:all .16s}
.related a:hover{border-color:var(--accent);background:var(--card2)}
.related a small{display:block;color:var(--accent2);font-size:12px;font-weight:700;margin-bottom:6px}
.related a span{font-size:15px;font-weight:600}
code{background:rgba(255,255,255,.07);border-radius:6px;padding:2px 7px;font-size:.9em;direction:ltr;display:inline-block;color:#cfe0ff}
.blog-footer{border-top:1px solid rgba(255,255,255,.06);padding:26px 22px;text-align:center;color:var(--muted);font-size:13px}
.blog-footer a{color:var(--muted)}
.blog-footer a:hover{color:var(--accent2)}
.back-btn{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px;font-weight:600;margin-bottom:28px;text-decoration:none;transition:color .16s}
.back-btn:hover{color:var(--accent2)}
@media(max-width:700px){.blog-hero h1{font-size:clamp(26px,6.4vw,32px)}.blog-wrap{padding:26px 16px 60px}.blog-topbar .t-links a:not(.cta){display:none}.tbl-scroll{margin:1.5em -16px;border-radius:0;border-inline:none}th{position:static}}
.blog-banner{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;margin-bottom:30px;font-size:14px;color:#cfe0ff}
.blog-banner svg{flex-shrink:0}