/* AppWeb+ — blog article pages + article cards (black & white editorial, coral + accents) */
.post-hero{padding:clamp(120px,18vh,170px) 0 clamp(30px,5vh,50px)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;color:var(--grey);margin-bottom:clamp(26px,4vh,40px)}
.crumbs a{text-decoration:none;color:var(--grey)}
.crumbs a:hover{color:var(--coral)}
.post-hero .kicker{display:inline-flex;align-items:center;gap:10px;color:var(--coral)}
.post-hero .kicker::before{content:"+";font-family:"Anybody",sans-serif;font-variation-settings:"wdth" 100,"wght" 900;font-size:18px}
.post-title{font-size:clamp(40px,6.4vw,104px);line-height:.92;letter-spacing:-.01em;margin:18px 0 26px;max-width:18ch;font-variation-settings:"wdth" 66,"wght" 820;text-transform:uppercase}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--grey)}
.post-meta span+span::before{content:"+";color:var(--coral);margin-inline-end:22px}
.post-cover{margin:clamp(20px,4vh,40px) auto 0;max-width:1480px;padding-inline:var(--gut)}
.post-cover .tint{aspect-ratio:21/9;border-radius:2px}
.post-cover .tint img{object-position:center}
.post-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,80px);padding-block:clamp(40px,7vh,80px) clamp(70px,10vh,120px)}
@media(min-width:1000px){.post-grid{grid-template-columns:240px minmax(0,1fr)}}
.post-toc{display:none}
@media(min-width:1000px){.post-toc{display:block;position:sticky;top:110px;align-self:start;max-height:calc(100vh - 140px);overflow:auto}}
.post-toc b{display:block;font-family:"JetBrains Mono",monospace;font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:12px}
.post-toc a{display:block;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.35;text-decoration:none;color:var(--ink-2)}
.post-toc a.on{color:var(--ink);font-variation-settings:"wdth" 100,"wght" 700}
.post-toc a.on::before{content:"+ ";color:var(--coral)}
@media (hover:hover) and (pointer:fine){.post-toc a:hover{color:var(--coral)}}
.post-body{max-width:760px;min-width:0}
.tldr{background:var(--ink);color:var(--paper);padding:clamp(22px,3vw,36px);border-radius:2px;margin-bottom:clamp(34px,5vh,50px)}
.tldr h2{font-family:"JetBrains Mono",monospace;font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-bottom:14px}
.tldr ul{list-style:none;display:grid;gap:10px}
.tldr li{position:relative;padding-inline-start:24px;font-size:clamp(16px,1.25vw,18px);line-height:1.55;color:#E9E6DF}
.tldr li::before{content:"+";position:absolute;inset-inline-start:0;top:0;color:var(--coral);font-variation-settings:"wdth" 100,"wght" 900}
.prose{font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.72;color:var(--ink-2)}
.prose h2{font-size:clamp(28px,2.8vw,42px);line-height:1.08;color:var(--ink);margin:clamp(40px,6vh,64px) 0 16px;font-variation-settings:"wdth" 80,"wght" 820;scroll-margin-top:100px}
.prose h3{font-size:clamp(20px,1.7vw,25px);line-height:1.2;color:var(--ink);margin:30px 0 10px;font-variation-settings:"wdth" 92,"wght" 760}
.prose p{margin:0 0 16px}
.prose strong{color:var(--ink);font-variation-settings:"wdth" 100,"wght" 700;font-weight:inherit}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.prose a:hover{color:var(--coral)}}
.prose ul,.prose ol{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:9px}
.prose li{position:relative;padding-inline-start:26px}
.prose ul li::before{content:"+";position:absolute;inset-inline-start:2px;top:0;color:var(--coral);font-variation-settings:"wdth" 100,"wght" 900}
.prose ol{counter-reset:o}
.prose ol li::before{counter-increment:o;content:counter(o,decimal-leading-zero);position:absolute;inset-inline-start:0;top:.25em;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--coral)}
.prose blockquote{margin:24px 0;padding:18px 22px;border-inline-start:3px solid var(--coral);background:var(--white);color:var(--ink)}
.table-wrap{overflow-x:auto;margin:22px 0 26px;border:1px solid var(--line)}
.prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;min-width:520px}
.prose th,.prose td{padding:12px 14px;text-align:start;vertical-align:top;border-bottom:1px solid var(--line)}
.prose th{background:var(--ink);color:var(--paper);font-variation-settings:"wdth" 92,"wght" 700;font-weight:inherit}
.prose tr:nth-child(even) td{background:var(--white)}
.post-faq{margin-top:clamp(44px,7vh,70px);border-top:1px solid var(--line);padding-top:clamp(30px,5vh,46px)}
.post-faq h2{font-size:clamp(28px,2.8vw,42px);line-height:1.05;margin-bottom:18px;font-variation-settings:"wdth" 80,"wght" 820}
.post-faq details{border-bottom:1px solid var(--line)}
.post-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px;padding:18px 0;font-size:clamp(17px,1.35vw,20px);line-height:1.35;font-variation-settings:"wdth" 92,"wght" 700}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq summary::after{content:"+";color:var(--coral);font-size:24px;line-height:1;transition:transform .4s var(--ease);flex:none}
.post-faq details[open] summary::after{transform:rotate(45deg)}
.post-faq details p{padding:0 0 20px;color:var(--ink-2);line-height:1.7}
.post-cta{margin-top:clamp(40px,6vh,60px);padding:clamp(26px,3.6vw,44px);background:var(--ink);color:var(--paper);display:grid;gap:20px;align-items:center}
@media(min-width:760px){.post-cta{grid-template-columns:minmax(0,1fr) auto}}
.post-cta p{font-size:clamp(19px,1.6vw,24px);line-height:1.4}
.post-cta .btn-ink{background:var(--paper);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.post-cta .btn-ink:hover{background:var(--coral);color:#fff}}
/* cards (blog list + related) */
.posts-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px);margin-top:clamp(36px,6vh,60px)}
@media(min-width:760px){.posts-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.posts-grid{grid-template-columns:repeat(3,1fr)}}
.post-card a{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;height:100%}
.post-card .tint{aspect-ratio:16/10}
.post-card .mono{color:var(--coral)}
.post-card h3{font-size:clamp(22px,1.8vw,28px);line-height:1.12;font-variation-settings:"wdth" 84,"wght" 800}
.post-card p{color:var(--ink-2);font-size:15px;line-height:1.55}
.post-card .go{margin-top:auto;font-variation-settings:"wdth" 100,"wght" 700;font-size:15px}
.post-card .go::after{content:" →";color:var(--coral)}
html[dir="rtl"] .post-card .go::after{content:" ←"}
@media (hover:hover) and (pointer:fine){.post-card a:hover h3{color:var(--coral)}}
.related{border-top:1px solid var(--line)}
html[lang="ar"] .post-title{text-transform:none;line-height:1.3!important}
@media(max-width:700px){.post-hero{padding-top:110px}.post-cover .tint{aspect-ratio:16/10}}