/* SEOKIFY blog + static pages — uses the design tokens from style.css */
.blog-wrap{max-width:1040px;margin:0 auto;padding:8px 0 40px}
.blog-post{max-width:820px}
.blog-crumbs{font-size:.8rem;color:var(--text2);margin:6px 0 18px}
.blog-crumbs a{color:var(--accent);text-decoration:none}.blog-crumbs a:hover{text-decoration:underline}
.blog-crumbs span{margin:0 4px}
.blog-hero{text-align:center;padding:18px 0 28px}
.blog-hero h1{font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.2;color:var(--heading);margin:0 0 10px;font-weight:800}
.blog-hero p{color:var(--text2);max-width:640px;margin:0 auto;font-size:1.02rem}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.blog-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-xs);display:flex;flex-direction:column;gap:8px;transition:box-shadow .15s,transform .15s}
.blog-card:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.blog-card h2,.blog-card h3{font-size:1.08rem;line-height:1.35;margin:0;color:var(--heading)}
.blog-card h2 a,.blog-card h3 a{color:inherit;text-decoration:none}.blog-card h2 a:hover,.blog-card h3 a:hover{color:var(--accent)}
.blog-card p{margin:0;color:var(--text2);font-size:.9rem;line-height:1.55}
.blog-more{margin-top:auto;font-weight:600;font-size:.88rem;color:var(--accent);text-decoration:none}
.blog-cat{display:inline-block;align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--accent-lt);padding:3px 9px;border-radius:999px}
.blog-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:.8rem;color:var(--text2)}
.blog-cta{margin-top:40px;text-align:center;background:var(--accent-lt);border:1px solid var(--accent-mid);border-radius:var(--r-xl);padding:28px 20px}
.blog-cta h2{margin:0 0 6px;color:var(--heading)}.blog-cta p{color:var(--text);margin:0 0 14px}.blog-cta .btn{margin:4px}

.blog-article h1{font-size:clamp(1.65rem,4vw,2.25rem);line-height:1.2;color:var(--heading);margin:10px 0 12px;font-weight:800}
.blog-toc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 20px;margin:22px 0}
.blog-toc ol{margin:8px 0 0;padding-left:20px;display:grid;gap:4px;font-size:.92rem}
.blog-toc a{color:var(--accent);text-decoration:none}.blog-toc a:hover{text-decoration:underline}
.blog-body{font-size:1.04rem;line-height:1.78;color:var(--text)}
.blog-body h2{font-size:1.45rem;line-height:1.3;margin:2.1rem 0 .7rem;color:var(--heading);scroll-margin-top:80px}
.blog-body h3{font-size:1.15rem;margin:1.5rem 0 .5rem;color:var(--heading)}
.blog-body p{margin:0 0 1.05rem}
.blog-body ul,.blog-body ol{margin:0 0 1.1rem;padding-left:1.4rem}.blog-body li{margin:.35rem 0}
.blog-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.blog-body code{font-family:var(--mono);font-size:.88em;background:var(--bg3);padding:1px 6px;border-radius:5px}
.blog-body pre{background:#0f172a;color:#e2e8f0;padding:16px 18px;border-radius:var(--r);overflow-x:auto;margin:0 0 1.2rem}
.blog-body pre code{background:none;padding:0;color:inherit}
.blog-body table{width:100%;border-collapse:collapse;margin:0 0 1.3rem;font-size:.93rem;display:block;overflow-x:auto}
.blog-body th,.blog-body td{border:1px solid var(--border);padding:9px 12px;text-align:left;vertical-align:top}
.blog-body th{background:var(--bg3);color:var(--heading)}
.callout{background:var(--accent-lt);border-left:4px solid var(--accent);padding:14px 18px;border-radius:0 var(--r) var(--r) 0;margin:0 0 1.2rem}

.blog-tools{margin:2.2rem 0;padding:20px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg)}
.blog-tools h2{font-size:1.15rem;margin:0 0 12px;color:var(--heading)}
.blog-tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.blog-tool{display:flex;gap:10px;align-items:flex-start;padding:10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);text-decoration:none;color:var(--text)}
.blog-tool:hover{border-color:var(--accent)}
.blog-tool-ico{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center}
.blog-tool strong{display:block;font-size:.88rem;color:var(--heading)}.blog-tool small{display:block;font-size:.76rem;color:var(--text2);line-height:1.4;margin-top:2px}
.blog-faq{margin-top:2rem}.blog-faq h2{font-size:1.4rem;color:var(--heading)}
.blog-faq details{border:1px solid var(--border);border-radius:var(--r);padding:12px 16px;margin:10px 0;background:var(--bg)}
.blog-faq summary{cursor:pointer;font-weight:600;color:var(--heading)}.blog-faq details p{margin:10px 0 2px;color:var(--text);line-height:1.65}
.blog-related{margin-top:44px}.blog-related h2{color:var(--heading);margin-bottom:14px}

/* homepage SEO sections */
.home-seo{max-width:900px;margin:0 auto 48px;line-height:1.75;color:var(--text)}
.home-seo h2{font-size:1.5rem;color:var(--heading);margin:0 0 12px}
.home-seo h3{font-size:1.1rem;color:var(--heading);margin:1.4rem 0 .4rem}
.home-seo a{color:var(--accent)}
.home-faq details{border:1px solid var(--border);border-radius:var(--r);padding:12px 16px;margin:10px 0;background:var(--bg)}
.home-faq summary{cursor:pointer;font-weight:600;color:var(--heading)}.home-faq p{margin:10px 0 2px}
.home-blog{margin-bottom:48px}.home-blog>h2{font-size:1.5rem;color:var(--heading);margin:0 0 14px}
@media (max-width:640px){.blog-body{font-size:1rem}.blog-body h2{font-size:1.28rem}}