/* blog.css — article + blog index layout. Loaded after the site's own CSS on /blog/ pages only. */
.blog-page{--blog-accent:#4c5e45;--blog-deep:#26362d;--blog-deep-ink:#F5F3EF;--blog-soft:#e7e3d8;--sym-ratio:1.034}
.blog-page.riyalfont{--blog-accent:#5b3d82;--blog-deep:#3B2458;--blog-deep-ink:#F7F7F3;--blog-soft:#ebe8f0;--sym-ratio:.895}
.blog-page{background:var(--field)}
.blog-page .blog-main{pointer-events:auto;padding-top:96px}
.blog-page .blog-main a,.blog-page footer a,.blog-page .site-header a{text-decoration:none!important}
.blog-page .site-header nav a[aria-current="page"]{font-weight:600}

/* Grid: content column on the page grid (left gutter), aside fills the desktop width. */
.post-shell{display:grid;grid-template-columns:minmax(0,760px) minmax(260px,1fr);column-gap:clamp(48px,7vw,140px);padding:64px var(--gutter) 96px;align-items:start}
.post{min-width:0}
.post-aside{min-width:0;height:100%}
.aside-sticky{position:sticky;top:120px;display:flex;flex-direction:column;gap:18px;max-width:380px}
.is-ar .post-shell,.is-ar .post-cta{direction:rtl}

/* Text rhythm */
.post p,.post li,.post figcaption,.post summary{text-wrap:pretty;hyphens:manual}
.post h1,.post h2,.post h3,.post-cta h2{text-wrap:balance}
.crumbs{display:flex;gap:10px;font-size:13px;color:var(--ink-muted);margin-bottom:28px;flex-wrap:wrap}
.crumbs a{color:inherit}.crumbs a:hover{color:var(--ink)}
.post-head .eyebrow{color:var(--blog-accent)}
.blog-page .post-head h1{font-size:clamp(52px,6.2vw,96px);line-height:.9;margin:18px 0 26px}
.post-head .intro{max-width:640px;color:var(--ink-muted);font-size:20px;line-height:1.5}
.post-meta{margin-top:22px;font-size:13px;color:var(--ink-muted);letter-spacing:.02em}
.post-meta a{color:var(--ink);font-weight:600}
.post-body{margin-top:48px;border-top:1px solid var(--rule)}
.blog-page .post-body h2,.blog-page .post-faq h2,.blog-page .post-sources h2{font-size:clamp(34px,3.4vw,50px);line-height:.95;margin:64px 0 20px;scroll-margin-top:120px}
.blog-page .post-body h3{font-family:'Space Grotesk',sans-serif;text-transform:none;font-weight:600;font-size:21px;line-height:1.3;margin:34px 0 10px}
.post-body p,.post-body li{font-size:18px;line-height:1.65;color:var(--ink-muted)}
.post-body p+p{margin-top:16px}
.post-body strong{color:var(--ink);font-weight:600}
.post-body a,.post-sources a,.related a,.toc a,.text-cta{color:var(--blog-accent);font-weight:600;transition:color .2s}
.post-body a:hover,.post-sources a:hover,.related a:hover,.toc a:hover,.text-cta:hover{color:var(--ink)}
.post code{font-family:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;font-size:.86em;background:var(--blog-soft);padding:.12em .4em;border-radius:6px;color:var(--ink);white-space:nowrap}
.post kbd{font-family:'Space Grotesk',sans-serif;font-size:.8em;font-weight:600;border:1px solid var(--rule);border-bottom-width:2px;border-radius:6px;padding:.08em .45em;background:#fff;color:var(--ink);white-space:nowrap}
.post em{font-style:normal;color:var(--ink);font-weight:500}

/* Answer box */
.answer-box{margin-top:40px;padding:28px 30px;border-radius:24px;background:var(--blog-soft)}
.answer-label{font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--blog-accent)!important;margin-bottom:10px}
.answer-box ul{margin:14px 0 0;padding-inline-start:20px;display:grid;gap:10px}
.answer-box p,.answer-box li{color:var(--ink)}

/* Numbered steps, styled like the home page format rows */
.steps{list-style:none;counter-reset:step;margin:26px 0 0;padding:0}
.steps>li{counter-increment:step;position:relative;padding:18px 0;padding-inline-start:48px;border-bottom:1px solid var(--rule)}
.steps>li:first-child{border-top:1px solid var(--rule)}
.steps>li::before{content:counter(step,decimal-leading-zero);position:absolute;inset-inline-start:0;top:24px;font-size:12px;line-height:1;color:var(--ink)}
.how-list{margin:18px 0 0;padding-inline-start:20px;display:grid;gap:10px}
.how-list li::marker{color:var(--blog-accent)}
.tip{margin-top:26px!important;padding:20px 24px;border-inline-start:3px solid var(--blog-accent);background:color-mix(in srgb,var(--blog-soft) 60%,transparent);border-radius:0 14px 14px 0}
.is-ar .tip{border-radius:14px 0 0 14px}

/* Currency symbol: height matched to lining digits (cap height of Space Grotesk ≈ .70em) */
.cur{display:inline-block;line-height:1;white-space:nowrap}
.cur svg{display:inline-block;height:.725em;width:calc(.725em * var(--sym-ratio));vertical-align:0;fill:currentColor;overflow:visible}
.price{white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;color:var(--ink);font-weight:600;unicode-bidi:isolate}
.price-demo{margin:28px 0 0;padding:34px 30px 24px;border:1px solid var(--rule);border-radius:24px;display:flex;flex-wrap:wrap;gap:12px 48px;align-items:baseline}
.price-demo .price{font-family:'Space Grotesk',sans-serif;font-size:clamp(48px,6vw,84px);font-weight:600;letter-spacing:-.02em;line-height:1}
.price-demo figcaption{flex-basis:100%;font-size:14px;color:var(--ink-muted);margin-top:8px}
.is-ar .price-demo{justify-content:flex-start}

/* Copy button */
.copy-sym{display:inline-flex;align-items:center;gap:12px;margin:6px 0;padding:10px 16px 10px 12px;border:1px solid var(--rule);border-radius:100px;background:#fff;color:var(--ink);font-size:15px;line-height:1.2;vertical-align:middle;transition:background .2s,border-color .2s}
.copy-sym:hover{border-color:var(--ink)}
.copy-sym.is-copied{background:var(--blog-soft)}
.copy-glyph{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blog-deep);color:var(--blog-deep-ink);font-size:24px}
.copy-glyph .cur svg{height:.62em;width:calc(.62em * var(--sym-ratio))}
.copy-code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:var(--ink-muted)}

/* FAQ, author, sources */
.post-faq details{border-top:1px solid var(--rule);padding:20px 0}
.post-faq details:last-child{border-bottom:1px solid var(--rule)}
.post-faq summary{font-size:19px;cursor:pointer;line-height:1.35;color:var(--ink);list-style-position:outside}
.post-faq details p{padding-top:14px;font-size:17px;line-height:1.6;color:var(--ink-muted)}
.post-author{display:grid;grid-template-columns:96px 1fr;gap:24px;align-items:start;margin-top:64px;padding:28px;border-radius:24px;background:var(--blog-soft)}
.post-author img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.post-author p{font-size:16px;line-height:1.55;color:var(--ink-muted)}
.post-author .post-author-name{font-family:'Big Shoulders',sans-serif;font-weight:800;text-transform:uppercase;font-size:26px;color:var(--ink);line-height:1;margin-bottom:8px}
.post-author .text-cta{display:inline-block;margin-top:10px;font-size:15px}
.post-sources ol{margin:0;padding-inline-start:22px;display:grid;gap:8px}
.post-sources li{font-size:14px;line-height:1.5;color:var(--ink-muted)}
.post-sources a{font-weight:500}

/* Aside */
.aside-label{font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-muted)}
.toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.toc li{border-bottom:1px solid var(--rule)}
.toc a{display:block;padding:10px 0;font-size:15px;line-height:1.35;color:var(--ink);font-weight:500}
.aside-card{margin:14px 0;padding:26px;border-radius:24px;background:var(--blog-deep);color:var(--blog-deep-ink)}
.aside-card p{font-size:15px;line-height:1.5;color:color-mix(in srgb,var(--blog-deep-ink) 82%,transparent)}
.aside-card .aside-price{font-family:'Space Grotesk',sans-serif;font-size:56px;font-weight:600;line-height:1;color:var(--blog-deep-ink);margin-bottom:12px;display:flex;align-items:baseline;gap:.22em}
.aside-card .button{margin-top:18px;background:var(--blog-deep-ink);color:var(--blog-deep);min-height:48px;padding:12px 22px;font-size:15px}
.related{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.related a{font-size:15px;line-height:1.4}

/* End CTA band */
.post-cta{background:var(--blog-deep);color:var(--blog-deep-ink);padding:110px var(--gutter);--ink:var(--blog-deep-ink);--ink-muted:color-mix(in srgb,var(--blog-deep-ink) 78%,transparent)}
.post-cta-copy{max-width:760px}
.post-cta .eyebrow{color:var(--blog-deep-ink);opacity:.8}
.blog-page .post-cta h2{font-size:clamp(64px,8vw,120px);line-height:.9;margin:18px 0 26px;color:var(--blog-deep-ink);display:flex;align-items:baseline;gap:.3em;flex-wrap:wrap}
.cta-price{display:inline-flex;align-items:baseline;gap:.16em;font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.02em}
.post-cta .intro{max-width:520px;margin-bottom:30px;color:var(--ink-muted)}
.post-cta .button{background:var(--blog-deep-ink);color:var(--blog-deep)}
.post-cta .download-note{color:var(--ink-muted)}

/* Blog index */
.index-list{list-style:none;margin:48px 0 0;padding:0;border-top:1px solid var(--rule)}
.index-card{border-bottom:1px solid var(--rule)}
.index-card a{display:block;padding:34px 0;color:var(--ink)}
.index-card .eyebrow{color:var(--blog-accent)}
.blog-page .index-card h2{font-size:clamp(34px,3.6vw,54px);line-height:.95;margin:12px 0 14px;transition:color .2s}
.index-card p:not(.eyebrow){font-size:17px;line-height:1.55;color:var(--ink-muted);max-width:620px}
.index-card .text-cta{display:inline-block;margin-top:14px;font-size:15px}
.index-card a:hover h2{color:var(--blog-accent)}

/* Arabic */
.is-ar .blog-main,.is-ar .blog-main *:not(code):not(kbd):not(.copy-code){font-family:"Alan Sans","Geeza Pro","Noto Naskh Arabic",Tahoma,sans-serif;letter-spacing:0}
.is-ar .blog-main h1,.is-ar .blog-main h2,.is-ar .post-author-name{text-transform:none;font-weight:800}
.blog-page.is-ar .post-head h1{font-size:clamp(46px,5.4vw,84px);line-height:1.12}
.blog-page.is-ar .post-body h2,.blog-page.is-ar .post-faq h2,.blog-page.is-ar .post-sources h2,.blog-page.is-ar .index-card h2{font-size:clamp(30px,2.9vw,42px);line-height:1.25}
.blog-page.is-ar .post-cta h2{font-size:clamp(56px,7vw,104px);line-height:1.1}
.is-ar .post-body p,.is-ar .post-body li{font-size:18.5px;line-height:1.85}
.is-ar .post-head .intro{line-height:1.75}
.is-ar .answer-label,.is-ar .aside-label{letter-spacing:0}
.is-ar .steps>li::before{font-family:'Space Grotesk',sans-serif}
.is-ar .price,.is-ar .price *{font-family:'Space Grotesk',sans-serif!important}
.is-ar .aside-price,.is-ar .cta-price,.is-ar .cta-price span{font-family:'Space Grotesk',sans-serif!important}
.is-ar .crumbs span[aria-hidden]{transform:scaleX(-1)}

/* Tablet / mobile */
@media (max-width:1080px){.post-shell{grid-template-columns:minmax(0,1fr) 260px;column-gap:48px}}
@media (max-width:860px){
 .post-shell{grid-template-columns:1fr;padding:40px 20px 64px}
 .post-aside{display:none}
 .blog-page .blog-main{padding-top:84px}
 .blog-page .post-head h1{font-size:clamp(46px,13vw,64px)}
 .blog-page.is-ar .post-head h1{font-size:clamp(40px,11vw,56px)}
 .post-head .intro{font-size:17px}
 .post-body p,.post-body li{font-size:17px}
 .blog-page .post-body h2,.blog-page .post-faq h2,.blog-page .post-sources h2{font-size:36px;margin-top:52px}
 .blog-page.is-ar .post-body h2,.blog-page.is-ar .post-faq h2,.blog-page.is-ar .post-sources h2{font-size:30px}
 .steps>li{padding-inline-start:34px}
 .answer-box,.price-demo,.post-author{padding:22px 20px;border-radius:20px}
 .post-author{grid-template-columns:64px 1fr;gap:16px}
 .post-author img{width:64px;height:64px}
 .post-cta{padding:80px 20px}
 .blog-page .post-cta h2{font-size:64px}
 .post code{white-space:normal;overflow-wrap:anywhere}
}

/* v2 fixes */
.post code,.post kbd,.copy-code{direction:ltr;unicode-bidi:isolate}
.post-cta{display:grid;grid-template-columns:minmax(0,760px) minmax(260px,1fr);column-gap:clamp(48px,7vw,140px);align-items:end}
.post-cta-rows{border-top:1px solid color-mix(in srgb,var(--blog-deep-ink) 30%,transparent)}
.post-cta-rows .format-row{display:grid;grid-template-columns:40px 1fr;gap:5px;padding:18px 0;border-bottom:1px solid color-mix(in srgb,var(--blog-deep-ink) 30%,transparent);margin:0}
.post-cta-rows .format-row>span{font-size:12px;padding-top:5px;color:var(--blog-deep-ink)}
.blog-page .post-cta-rows h3{font-size:24px;line-height:1.05;color:var(--blog-deep-ink)}
.post-cta-rows p{font-size:15px;line-height:1.5;margin-top:6px;color:var(--ink-muted)}
.blog-page .post-cta h2 .cta-price,.blog-page .post-cta h2 .cta-price b{color:var(--blog-deep-ink);font-weight:600}
.blog-page footer{background:var(--blog-deep);color:var(--blog-deep-ink);border-top:1px solid color-mix(in srgb,var(--blog-deep-ink) 20%,transparent)}
.blog-page footer a{color:inherit}
.blog-page .cross-sell-panel{margin:0}
.is-ar .post-cta-rows h3{text-transform:none}
@media (max-width:860px){.post-cta{grid-template-columns:1fr;row-gap:48px}}
.blog-page h1 .cur,.blog-page h2 .cur,.blog-page h1 span .cur,.blog-page h2 span .cur,.aside-price .cur{color:inherit!important}
.blog-page .post-cta h2 span.cta-price{color:var(--blog-deep-ink)!important}
.post-body ul+p,.post-body ol+p,.post-body figure+p{margin-top:22px}
.post-body .how-list+.price-demo{margin-top:28px}
.keys{white-space:nowrap;unicode-bidi:isolate}
.post-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq summary::after{content:'+';font-size:22px;line-height:1;color:var(--blog-accent);flex:none}
.post-faq details[open] summary::after{content:'–'}

/* v2: tags, hero image, cross-links, author page */
.post-tags{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.post-tags li{font-size:13px;line-height:1;padding:8px 12px;border:1px solid var(--rule);border-radius:999px;color:var(--ink);background:color-mix(in srgb,var(--blog-soft) 55%,transparent)}
.post-tags.is-card{margin-top:16px}
.post-tags.is-card li{font-size:12px;padding:7px 10px}
.aside-sticky .post-tags{margin:0}
.post-hero{margin:40px 0 0}
.post-hero img{display:block;width:100%;height:auto;border-radius:24px}
.post-also{margin-top:40px!important;padding-top:24px;border-top:1px solid var(--rule)}
.post-author-links{display:flex;flex-wrap:wrap;gap:4px 22px}
.author-head{display:grid;grid-template-columns:160px 1fr;gap:36px;align-items:center}
.author-photo{width:160px;height:160px;border-radius:50%;object-fit:cover}
.blog-page .author-head h1{margin-bottom:18px}
.author-body{margin-top:40px;padding-top:8px}
.author-body p{margin-top:16px}
.blog-page .author-sub{font-size:clamp(30px,3vw,44px);line-height:1;margin:64px 0 4px}
.is-ar .post-tags li{letter-spacing:0}
@media (max-width:900px){
 .author-head{grid-template-columns:1fr;gap:20px}
 .author-photo{width:112px;height:112px}
 .post-hero{margin-top:28px}
 .post-hero img{border-radius:18px}
}
.post-meta .nw{white-space:nowrap;unicode-bidi:isolate}

/* v3: share buttons (plain links, no SDKs) */
.share-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.share-list [hidden]{display:none}
.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:40px;height:40px;padding:0 11px;border:1px solid var(--rule);border-radius:999px;background:transparent;color:var(--ink);font:500 14px/1 'Space Grotesk',sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.is-ar .share-btn{font-family:inherit}
.share-btn svg{width:17px;height:17px;fill:currentColor;flex:none}
.share-btn:hover,.share-btn:focus-visible{background:var(--blog-accent);border-color:var(--blog-accent);color:var(--blog-deep-ink)}
.share-btn.is-done{background:var(--blog-deep);border-color:var(--blog-deep);color:var(--blog-deep-ink)}
.share-btn .share-copy-text:empty{display:none}
.share-btn.is-native{background:var(--ink);border-color:var(--ink);color:var(--field)}
.share-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:22px}
.share-label{font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-muted)}
.is-ar .share-label{letter-spacing:0}
.share-aside{display:flex;flex-direction:column;gap:10px}
.share-aside .share-btn{width:40px;padding:0}
.share-aside .share-btn.is-native{width:auto;padding:0 14px}
.share-end{margin-top:56px;padding:28px;border-radius:24px;background:var(--blog-soft);display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.blog-page .share-end h2{font-size:clamp(28px,2.6vw,38px);line-height:1;margin:0 0 8px}
.share-end p{font-size:16px;line-height:1.5;color:var(--ink-muted)}
.share-end .share-btn{background:var(--field);height:44px;padding:0 14px}
.share-end .share-btn:hover,.share-end .share-btn:focus-visible{background:var(--blog-accent)}
.share-end .share-btn.is-native{background:var(--ink)}
@media (max-width:900px){
 .share-bar{gap:10px}
 .share-end{padding:22px 20px;border-radius:20px}
}

/* v4: enriched author page + story posts */
.author-quote{margin:28px 0 8px;padding:4px 0 4px 24px;border-left:3px solid var(--blog-accent)}
.is-ar .author-quote{padding:4px 24px 4px 0;border-left:0;border-right:3px solid var(--blog-accent)}
.author-quote p{font-size:20px;line-height:1.55;color:var(--ink)}
.author-quote.is-small p{font-size:17px;color:var(--ink-muted)}
.author-quote cite{display:block;margin-top:12px;font-style:normal;font-size:13px;letter-spacing:.02em;color:var(--ink-muted)}
.author-quote cite a{font-weight:600}
.author-note{font-size:13px!important;color:var(--ink-muted)}
.author-does li{margin-top:12px}
.work-list{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.work-list li{margin:0;padding:22px 22px 24px;border:1px solid var(--rule);border-radius:14px;background:color-mix(in srgb,var(--blog-soft) 45%,transparent)}
.work-list .work-meta{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--blog-accent);font-weight:600}
.is-ar .work-list .work-meta{letter-spacing:0;text-transform:none}
.blog-page .work-list h3{margin:10px 0 8px;font-size:20px}
.work-list li p:last-child{font-size:16px;margin:0}
.client-list{margin-top:20px}
.career-list{list-style:none;padding:0;margin:20px 0 0;border-top:1px solid var(--rule)}
.career-list li{display:grid;grid-template-columns:150px 1fr;gap:20px;margin:0;padding:14px 0;border-bottom:1px solid var(--rule);font-size:16px}
.career-when{font-size:13px;color:var(--ink-muted);letter-spacing:.02em;padding-top:3px}
.author-awards li{margin-top:8px}
.author-body .button{margin-top:22px}
@media (max-width:760px){
 .work-list{grid-template-columns:1fr}
 .career-list li{grid-template-columns:1fr;gap:4px}
}
.blog-page .post-body a.button,.blog-page .post-body a.button:hover{color:var(--blog-deep-ink);background:var(--blog-deep)}
.client-list li{direction:ltr;unicode-bidi:isolate}