/* v18 — Arabic blog (/ar/blog). Uses the landing's tokens, fonts (IBM Plex Sans Arabic + IBM Plex Sans) and classes. */
.blog-body{background:var(--bg2)}
.blog-wrap{max-width:760px}
.blog-hero{background:var(--night);color:#fff;padding:22px 0 34px;position:relative;overflow:hidden}
.blog-hero::before{content:"";position:absolute;inset:auto -20% -60% auto;width:70%;height:140%;background:radial-gradient(closest-side,rgba(99,102,241,.35),transparent);pointer-events:none}
.blog-hero::after{content:"";position:absolute;inset:auto auto -70% -20%;width:60%;height:140%;background:radial-gradient(closest-side,rgba(20,184,166,.28),transparent);pointer-events:none}
.blog-hero h1{font-size:clamp(26px,6.6vw,40px);line-height:1.45;margin:10px 0 10px;font-weight:700;position:relative}
.blog-hero .blog-lead{color:#cbd5e1;font-size:17px;margin:0;position:relative}
.blog-hero .post-meta{color:#a5b4fc;position:relative}
.crumbs{position:relative;font-size:14px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px;color:#94a3b8}
.crumbs li{display:inline-flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"‹";color:#64748b}
.crumbs a{color:#c7d2fe;text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:#e2e8f0;min-width:0;max-width:100%}.crumbs [aria-current] span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:calc(100vw - 150px)}
.blog-list{padding:26px 0 48px}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;margin:0 0 16px;box-shadow:var(--shadow)}
.post-card h2{font-size:21px;line-height:1.5;margin:0 0 8px}
.post-card h2 a{color:var(--ink);text-decoration:none}
.post-card h2 a:hover{color:#4f46e5}
.post-card p{margin:0 0 10px;color:#334155}
.post-meta{color:var(--muted);font-size:14px;margin:0}
.post-card .post-meta{margin-bottom:12px}
.post-more{font-weight:700;color:#4f46e5;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.post-body{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px 20px;margin:-18px 0 48px;position:relative;box-shadow:var(--shadow);font-size:17px;line-height:1.95;color:#1e293b}
.post-body h2{font-size:23px;line-height:1.5;margin:34px 0 10px;color:var(--ink);padding-top:4px}
.post-body h2::before{content:"";display:block;width:44px;height:4px;border-radius:4px;background:linear-gradient(90deg,#6366f1,#14b8a6);margin-bottom:12px}
.post-body h3{font-size:19px;line-height:1.55;margin:24px 0 6px;color:#312e81}
.post-body p{margin:0 0 14px}
.post-body .lead-p{font-size:18.5px;color:var(--ink)}
.post-body ul,.post-body ol{margin:0 0 16px;padding-inline-start:22px}
.post-body li{margin:0 0 6px}
.post-body li::marker{color:#6366f1}
.post-body a{color:#4f46e5;text-underline-offset:3px}
.post-body strong{color:var(--ink)}
.post-body .code-ex{margin:6px 0 14px;padding:14px 16px;background:#f1f5ff;border-inline-start:4px solid #6366f1;border-radius:12px;font-size:15.5px;line-height:1.7;color:#1e1b4b;text-align:left}
.tbl-wrap{overflow-x:auto;margin:6px 0 18px;border:1px solid var(--line);border-radius:14px}
.tbl-wrap table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6;}
.tbl-wrap th,.tbl-wrap td{padding:10px 10px;text-align:start;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl-wrap thead th{background:#0b1020;color:#fff;font-weight:600}
.tbl-wrap tbody td:first-child{font-weight:700;color:var(--ink);background:#f8fafc}
.tbl-wrap tr:last-child td{border-bottom:0}
.blog-cta{margin:30px 0 8px;padding:24px 20px;border-radius:var(--radius);background:linear-gradient(135deg,#0b1020 0%,#1e1b4b 60%,#0f3b3a 100%);color:#fff;text-align:center;position:relative;overflow:hidden}
.blog-cta::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:.18;pointer-events:none}
.blog-cta>*{position:relative}
.blog-cta-k{margin:0 0 4px;font-size:14px;color:#99f6e4;font-weight:600}
.blog-cta-h{margin:0 0 16px;font-size:20px;line-height:1.6;font-weight:700;color:#fff}
.blog-cta .btn{color:#fff;text-decoration:none}
.blog-cta-f{margin:12px 0 0;font-size:14px;color:#cbd5e1}
.blog-list .blog-cta{margin-top:24px}
.post-faq{margin-top:34px}
.post-faq .faq{border-bottom:1px solid var(--line)}
.post-faq .faq summary{font-size:17px}
.post-faq .faq p{font-size:16px;line-height:1.85}
.post-next{margin-top:30px;padding-top:4px}
.post-next ul{list-style:none;padding:0}
.post-next a{font-weight:700;text-decoration:none}
.post-back{margin:22px 0 0}
.post-back a{font-weight:700;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
@media (min-width:720px){.blog-hero{padding:30px 0 48px}.post-body{padding:36px 40px 30px}.post-card{padding:26px 28px}}
@media (max-width:480px){.post-body{font-size:16.5px}.post-body h2{font-size:21px}}
.post-body .nw{white-space:nowrap}
@media (max-width:480px){.tbl-wrap table{font-size:14px}.tbl-wrap th,.tbl-wrap td{padding:9px 8px}}
.tbl-wrap .nw{white-space:normal}
.post-body .flow{direction:ltr;text-align:center;font-size:14.5px;line-height:1.9;font-weight:600;color:#312e81;background:#f1f5ff;border-radius:12px;padding:10px 12px;margin:4px 0 14px}