/* ── Blog shared styles ────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:'Inter',sans-serif;color:#1a1a2e;background:#fff}

/* ── Topbar (reuse shared-nav pattern) ── */
.topbar{position:sticky;top:0;z-index:999;background:#fff;border-bottom:1px solid #e2e8f0;height:60px;display:flex;align-items:center;padding:0 24px;gap:16px}
.topbar-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:1.05rem;color:#1a1a2e}
.topbar-brand img{height:32px;width:32px;border-radius:8px}
.topbar-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.topbar-nav a{font-size:.88rem;color:#64748b;text-decoration:none;padding:6px 12px;border-radius:8px;font-weight:500;transition:background .15s,color .15s}
.topbar-nav a:hover{background:#f1f5f9;color:#1a1a2e}
.topbar-cta{background:#2563EB;color:#fff!important;border-radius:8px;padding:7px 16px!important;font-weight:600!important;font-size:.85rem!important}
.topbar-cta:hover{background:#1d4ed8!important}

/* ── Blog hero ── */
.blog-hero{background:linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 50%,#2563EB 100%);padding:72px 24px 56px;text-align:center;color:#fff}
.blog-hero .badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:5px 14px;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:20px}
.blog-hero h1{font-size:clamp(1.7rem,4vw,2.8rem);font-weight:800;line-height:1.2;margin:0 0 16px;letter-spacing:-.02em}
.blog-hero p{font-size:1.05rem;color:rgba(255,255,255,.8);max-width:640px;margin:0 auto 28px;line-height:1.7}
.blog-hero .meta{display:flex;justify-content:center;align-items:center;gap:20px;font-size:.82rem;color:rgba(255,255,255,.7);flex-wrap:wrap}
.blog-hero .meta span{display:flex;align-items:center;gap:5px}

/* ── Breadcrumb ── */
.breadcrumb{padding:14px 0;font-size:.8rem;color:#94a3b8}
.breadcrumb a{color:#2563EB;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{margin:0 6px}

/* ── Layout ── */
.blog-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.blog-layout{display:grid;grid-template-columns:1fr 300px;gap:48px;padding:40px 0 80px;align-items:start}
@media(max-width:900px){.blog-layout{grid-template-columns:1fr}}

/* ── Article body ── */
.article-body{min-width:0}
.article-toc{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:20px 24px;margin-bottom:32px}
.article-toc h3{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b;margin:0 0 12px}
.article-toc ol{margin:0;padding-left:18px}
.article-toc li{margin-bottom:6px}
.article-toc a{color:#2563EB;text-decoration:none;font-size:.88rem;font-weight:500}
.article-toc a:hover{text-decoration:underline}

.article-body h2{font-size:1.5rem;font-weight:800;color:#1a1a2e;margin:40px 0 14px;padding-top:8px;border-top:3px solid #2563EB;display:inline-block}
.article-body h3{font-size:1.15rem;font-weight:700;color:#1e40af;margin:28px 0 10px}
.article-body p{font-size:1rem;line-height:1.8;color:#374151;margin:0 0 18px}
.article-body ul,.article-body ol{padding-left:22px;margin:0 0 18px}
.article-body li{font-size:.97rem;line-height:1.75;color:#374151;margin-bottom:7px}
.article-body strong{color:#1a1a2e}
.article-body a{color:#2563EB;text-decoration:underline}

/* ── Callout boxes ── */
.callout{border-radius:12px;padding:18px 22px;margin:24px 0;display:flex;gap:14px;align-items:flex-start}
.callout-icon{font-size:1.3rem;flex-shrink:0;line-height:1.3}
.callout-body{flex:1}
.callout-body p{margin:0;font-size:.92rem;line-height:1.65}
.callout-body strong{font-size:.95rem}
.callout.tip{background:#eff6ff;border:1px solid #bfdbfe}
.callout.tip .callout-body p{color:#1e40af}
.callout.warning{background:#fefce8;border:1px solid #fde68a}
.callout.warning .callout-body p{color:#92400e}
.callout.tool{background:#f0fdf4;border:1px solid #86efac}
.callout.tool .callout-body p{color:#14532d}
.callout.tool .callout-body strong{color:#166534}

/* ── Stat blocks ── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin:24px 0}
.stat-card{background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:18px 16px;text-align:center}
.stat-num{font-size:1.7rem;font-weight:800;color:#1d4ed8;line-height:1}
.stat-label{font-size:.75rem;color:#1e40af;margin-top:5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}

/* ── Step list ── */
.step-list{list-style:none;padding:0;margin:0 0 24px;counter-reset:steps}
.step-list li{counter-increment:steps;display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.step-list li::before{content:counter(steps);background:#2563EB;color:#fff;font-size:.8rem;font-weight:700;min-width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.step-list li .step-body{flex:1}
.step-list li .step-body strong{display:block;font-size:.97rem;color:#1a1a2e;margin-bottom:4px}
.step-list li .step-body p{font-size:.9rem;color:#4b5563;margin:0;line-height:1.6}

/* ── Comparison table ── */
.compare-table{width:100%;border-collapse:collapse;margin:20px 0 28px;font-size:.9rem;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.compare-table th{background:#1e3a8a;color:#fff;padding:12px 16px;text-align:left;font-weight:600}
.compare-table td{padding:11px 16px;border-bottom:1px solid #f1f5f9;color:#374151}
.compare-table tr:last-child td{border-bottom:none}
.compare-table tr:nth-child(even) td{background:#f8fafc}
.tag-yes{color:#059669;font-weight:600}
.tag-no{color:#dc2626;font-weight:600}
.tag-partial{color:#d97706;font-weight:600}

/* ── CTA box ── */
.cta-box{background:linear-gradient(135deg,#1e3a8a,#2563EB);border-radius:16px;padding:32px 28px;margin:36px 0;text-align:center;color:#fff}
.cta-box h3{font-size:1.3rem;font-weight:800;margin:0 0 10px}
.cta-box p{font-size:.93rem;color:rgba(255,255,255,.85);margin:0 0 20px;line-height:1.65}
.cta-box .btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#1e3a8a;font-weight:700;font-size:.92rem;padding:12px 24px;border-radius:10px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.cta-box .btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.15)}
.cta-box .btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5);margin-left:10px}
.cta-box .btn-outline:hover{background:rgba(255,255,255,.1)}

/* ── Sidebar ── */
.blog-sidebar{position:sticky;top:76px}
.sidebar-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:20px;margin-bottom:20px}
.sidebar-card h4{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b;margin:0 0 14px}
.sidebar-card ul{list-style:none;padding:0;margin:0}
.sidebar-card li{margin-bottom:9px}
.sidebar-card li a{font-size:.85rem;color:#2563EB;text-decoration:none;font-weight:500;line-height:1.4;display:block}
.sidebar-card li a:hover{text-decoration:underline}
.sidebar-cta{background:linear-gradient(135deg,#1e3a8a,#2563EB);color:#fff;text-align:center}
.sidebar-cta h4{color:rgba(255,255,255,.7)!important}
.sidebar-cta p{font-size:.83rem;color:rgba(255,255,255,.8);margin:0 0 14px;line-height:1.6}
.sidebar-cta a.cta-btn{display:block;background:#fff;color:#1e3a8a;font-weight:700;font-size:.87rem;padding:10px 16px;border-radius:9px;text-decoration:none;text-align:center;margin-top:8px}
.sidebar-cta a.cta-btn:hover{background:#eff6ff}

/* ── Author box ── */
.author-box{border:1px solid #e2e8f0;border-radius:14px;padding:22px;margin:48px 0 20px;display:flex;gap:18px;align-items:flex-start}
.author-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#1e3a8a,#2563EB);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;font-weight:800;flex-shrink:0}
.author-info h4{font-size:.95rem;font-weight:700;color:#1a1a2e;margin:0 0 3px}
.author-info .role{font-size:.8rem;color:#2563EB;font-weight:600;margin:0 0 7px}
.author-info p{font-size:.85rem;color:#64748b;margin:0;line-height:1.6}

/* ── Related posts ── */
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:16px 0 0}
.related-card{border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-decoration:none;transition:box-shadow .15s,transform .15s;display:block}
.related-card:hover{box-shadow:0 4px 18px rgba(0,0,0,.08);transform:translateY(-2px)}
.related-card .rc-tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#2563EB;margin-bottom:8px}
.related-card h5{font-size:.88rem;font-weight:700;color:#1a1a2e;margin:0 0 7px;line-height:1.4}
.related-card p{font-size:.78rem;color:#64748b;margin:0;line-height:1.5}

/* ── Blog index grid ── */
.blog-index-hero{background:linear-gradient(135deg,#1e3a8a,#1d4ed8);padding:60px 24px 48px;text-align:center;color:#fff}
.blog-index-hero h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;margin:0 0 14px;letter-spacing:-.02em}
.blog-index-hero p{font-size:1rem;color:rgba(255,255,255,.8);max-width:560px;margin:0 auto}
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;padding:40px 0 80px}
.post-card{border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;text-decoration:none;transition:box-shadow .15s,transform .15s;display:flex;flex-direction:column}
.post-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.09);transform:translateY(-3px)}
.post-card-img{height:160px;display:flex;align-items:center;justify-content:center;font-size:3rem}
.post-card-img.gbp{background:linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 100%)}
.post-card-img.fb{background:linear-gradient(135deg,#1877F2 0%,#0a55b5 100%)}
.post-card-body{padding:18px;flex:1;display:flex;flex-direction:column}
.post-card-tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.post-card-tag.gbp{color:#1d4ed8}
.post-card-tag.fb{color:#1877F2}
.post-card h3{font-size:.97rem;font-weight:700;color:#1a1a2e;margin:0 0 8px;line-height:1.4}
.post-card p{font-size:.82rem;color:#64748b;margin:0 0 14px;line-height:1.55;flex:1}
.post-card .read-more{font-size:.8rem;font-weight:600;color:#2563EB}
.post-card-meta{font-size:.75rem;color:#94a3b8;padding:12px 18px;border-top:1px solid #f1f5f9}

/* ── Pillar badge ── */
.pillar-badge{display:inline-flex;align-items:center;gap:5px;background:#fef3c7;border:1px solid #fde68a;color:#92400e;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:20px;margin-bottom:8px}

/* ── Footer ── */
.blog-footer{background:#f8fafc;border-top:1px solid #e2e8f0;padding:32px 24px;text-align:center}
.blog-footer p{font-size:.82rem;color:#94a3b8;margin:0}
.blog-footer a{color:#2563EB;text-decoration:none}

@media(max-width:600px){
  .blog-hero h1{font-size:1.5rem}
  .author-box{flex-direction:column}
  .cta-box .btn-outline{margin:10px 0 0}
  .stat-grid{grid-template-columns:1fr 1fr}
}