/* Insights: articles and hub. Linked after athar.css. */
.article-head, .article-body, .article-faq, .article-cta { width: min(100% - var(--gutter) * 2, 740px); margin-inline: auto; }
.article-head { padding-block: clamp(28px, 4vw, 56px) 8px; }
.article-head .article-meta { font: 500 12px/1.5 var(--mono); color: var(--muted); margin: 0 0 18px; letter-spacing: .02em; }
.article-head h1 { margin-inline: 0; max-width: none; font-size: clamp(34px, 5vw, 60px); text-align: start; }
.article-head .intro { margin: 26px 0 0; max-width: 62ch; text-align: start; }
.article-body { padding-bottom: 24px; }
.article-body h2 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.04em; line-height: 1.12; margin: 44px 0 14px; color: var(--fg); }
.article-body p, .article-body li { font-size: 17px; line-height: 1.7; }
.article-body p { margin: 0 0 16px; }
.article-body a { border-bottom: 1px solid currentColor; }
.article-body .mini-list { margin: 0 0 18px; gap: 12px; }
.article-body .steps-list { padding-inline-start: 22px; margin: 0 0 18px; display: grid; gap: 8px; }
.article-body table.data { width: 100%; border-collapse: collapse; margin: 18px 0 22px; font-size: 15px; }
.article-body table.data th, .article-body table.data td { text-align: start; padding: 12px 0; padding-inline-end: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.article-body table.data th { font: 600 12px/1.4 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.article-body pre.code { direction: ltr; text-align: left; background: var(--surface, #e9e7df); padding: 16px 18px; overflow-x: auto; font: 13px/1.6 var(--mono); margin: 0 0 18px; }
.article-body code { font-family: var(--mono); font-size: .92em; }
html[lang="ar"] .article-meta, html[lang="ar"] .article-body table.data th, html[lang="ar"] .insight-list .article-meta { font-family: var(--arabic, inherit); letter-spacing: 0; text-transform: none; font-size: 13px; }
.article-faq { padding-block: 8px 24px; }
.article-faq h2 { font-size: clamp(24px, 2.6vw, 34px); margin: 36px 0 14px; }
.article-faq h3 { font-size: 19px; letter-spacing: -0.02em; margin: 22px 0 6px; font-weight: 600; }
.article-faq p { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--muted); }
.article-cta { padding: 28px 0 8px; border-top: 1px solid var(--line); margin-top: 28px; }
.article-cta p { margin: 0 0 6px; font-size: 18px; font-weight: 500; }
.article-cta .btn { width: auto; display: inline-flex; margin-top: 14px; }
.article-cta .cal-link { margin-top: 14px; margin-inline-start: 18px; }
.more-insights { padding-block: clamp(28px, 4vw, 56px); }
.more-insights h2 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 18px; }
.insight-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.insight-list li { border-bottom: 1px solid var(--line); }
.insight-list a { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
.insight-list a:hover h3 { color: var(--accent); }
.insight-list h3 { margin: 0; font-size: clamp(21px, 2.2vw, 28px); }
.insight-list p { margin: 0; color: var(--muted); max-width: 70ch; font-size: 16px; }
.insight-list .article-meta { font: 500 12px/1.5 var(--mono); color: var(--muted); }
@media (max-width: 700px) { .article-body table.data thead { display: none; } .article-body table.data tr { display: block; border-bottom: 1px solid var(--line); padding: 10px 0; } .article-body table.data td { display: block; border: 0; padding: 3px 0; } .article-body table.data td::before { content: attr(data-label) ": "; font-weight: 600; } }