/* Blog article detail page — all rules scoped under .blog-page
   so they can never leak into the shared header/footer or other pages.
   Hooks required by inline scripts / blog.js are preserved as-is:
   #pageProgress, .toc, .toc-item-wrapper, .toggle, .toc-item, .toc-subitem,
   .faq-item, .faq-toggle, .faq-content, .blog-content a */
.blog-page{
  --blue:#2F6BFF; --blue-600:#1D4ED8; --blue-50:#EEF3FF;
  --violet:#7C3AED;
  --ink:#0B1120; --ink-2:#232C42; --muted:#5B6478;
  --line:#E6E9F2; --line-2:#D6DCEA;
  --panel-2:#F7F9FC;
  --mint:#0F9D6E; --mint-50:#E9F8F2;
  --amber:#D97706;
  --shadow-sm:0 1px 2px rgba(11,17,32,.04), 0 8px 24px -16px rgba(11,17,32,.28);
  --shadow-lg:0 30px 70px -34px rgba(47,107,255,.42), 0 2px 6px rgba(11,17,32,.05);
  position:relative;
  background:#fff; color:var(--ink); font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased;
}
.blog-page, .blog-page *{box-sizing:border-box}
.blog-page img{max-width:100%}
.blog-page a{color:inherit}
.blog-page .mono{font-family:"IBM Plex Mono",monospace}
.blog-page .wrap{max-width:1220px; margin:0 auto; padding:0 26px}
@media(max-width:640px){.blog-page .wrap{padding:0 18px}}

.blog-page .btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 24px; border-radius:999px; text-decoration:none; font-weight:700; font-size:.9rem; border:1.5px solid transparent; transition:transform .16s, box-shadow .22s, background .2s, color .2s; white-space:nowrap; font-family:"Plus Jakarta Sans",sans-serif; cursor:pointer}
.blog-page .btn-primary{background:var(--blue); color:#fff; box-shadow:0 10px 26px -10px rgba(47,107,255,.7)}
.blog-page .btn-primary:hover{background:var(--blue-600); transform:translateY(-2px)}
.blog-page .btn-sm{padding:9px 18px; font-size:.83rem}

/* ---------- reading progress ---------- */
.blog-page .progress-wrap{position:fixed; top:0; left:0; width:100%; height:3px; z-index:9999; background:var(--line)}
.blog-page .progress-bar{height:100%; width:0; background:linear-gradient(90deg,var(--blue),var(--violet)); transition:width .1s linear}

/* ---------- sticky title bar, appears on scroll ---------- */
.blog-page .subbar{position:fixed; top:60px; left:0; right:0; z-index:40; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); transform:translateY(-140%); transition:transform .25s; padding:9px 0}
.blog-page .subbar.on{transform:none}
.blog-page .subbar-in{display:flex; align-items:center; justify-content:space-between; gap:20px}
.blog-page .subbar b{font-family:"Plus Jakarta Sans",sans-serif; font-size:.86rem; font-weight:700; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink)}
@media(max-width:760px){.blog-page .subbar{display:none}}

/* ---------- breadcrumb ---------- */
.blog-page .crumbs{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:26px 0 0; display:flex; gap:9px; flex-wrap:wrap; align-items:center}
.blog-page .crumbs a{text-decoration:none; color:var(--muted); transition:color .15s}
.blog-page .crumbs a:hover{color:var(--blue)}
.blog-page .crumbs span.sep{color:var(--line-2)}
.blog-page .crumbs span.cur{color:var(--muted)}

/* ---------- article head ---------- */
.blog-page .wash{position:absolute; inset:0 0 auto 0; height:460px; z-index:0; pointer-events:none;
  background:radial-gradient(700px 420px at 8% 0%, rgba(16,185,129,.08), transparent 62%),
             radial-gradient(760px 460px at 94% 6%, rgba(124,58,237,.09), transparent 64%),
             radial-gradient(900px 520px at 50% 0%, rgba(47,107,255,.07), transparent 68%);}
.blog-page main{position:relative; z-index:2}
.blog-page .head{padding:22px 0 30px; max-width:860px}
.blog-page .cat{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); background:var(--blue-50); padding:6px 12px; border-radius:99px; font-weight:600; margin-bottom:20px}
.blog-page .head h1{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; letter-spacing:-.04em; line-height:1.08; font-size:clamp(1.9rem,4vw,3.1rem); margin:0 0 18px}
.blog-page .dek{font-size:1.1rem; color:var(--muted); max-width:62ch; margin:0 0 26px}
.blog-page .byline{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--line)}
.blog-page .byline img{width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:var(--shadow-sm); flex:none}
.blog-page .byline .who b{font-family:"Plus Jakarta Sans",sans-serif; font-size:.92rem; font-weight:700; display:block; letter-spacing:-.02em}
.blog-page .byline .who span{font-family:"IBM Plex Mono",monospace; font-size:.66rem; color:var(--muted); letter-spacing:.03em}
.blog-page .byline .meta{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.blog-page .tagpill{font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:6px 12px; background:#fff}
.blog-page .tagpill.fresh{color:var(--mint); border-color:rgba(15,157,110,.3); background:var(--mint-50)}

.blog-page .hero-img{border-radius:20px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-lg); margin-bottom:46px}
.blog-page .hero-img img{width:100%; height:auto; display:block}

/* ---------- 3 column shell ---------- */
.blog-page .shell{display:grid; grid-template-columns:56px minmax(0,1fr) 320px; gap:30px; align-items:start; padding-bottom:60px}
@media(max-width:1180px){.blog-page .shell{grid-template-columns:minmax(0,1fr) 300px; gap:22px} .blog-page .rail{display:none}}
@media(max-width:860px){.blog-page .shell{grid-template-columns:1fr} .blog-page .side{order:2} .blog-page article.post{order:1}}

/* slim share rail */
.blog-page .rail{position:sticky; top:110px; display:flex; flex-direction:column; gap:8px; align-items:center}
.blog-page .rail .lbl{font-family:"IBM Plex Mono",monospace; font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); writing-mode:vertical-rl; margin-bottom:6px}
.blog-page .rail a, .blog-page .rail button{width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:#fff; display:grid; place-items:center; text-decoration:none; color:var(--muted); transition:all .18s; cursor:pointer; font-size:.8rem; font-weight:700; font-family:"Plus Jakarta Sans",sans-serif}
.blog-page .rail a:hover, .blog-page .rail button:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-2px); box-shadow:var(--shadow-sm)}

.blog-page .box{border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow-sm); overflow:hidden}
.blog-page .box + .box{margin-top:0}
.blog-page .box-h{padding:14px 18px; border-bottom:1px solid var(--line); background:var(--panel-2); font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:flex; justify-content:space-between; align-items:center}
.blog-page .side{position:sticky; top:110px; display:grid; gap:14px}

/* sidebar CTA card */
.blog-page .side-cta{border:1px solid var(--line); border-radius:18px; padding:22px; background:radial-gradient(400px circle at 88% 0%, rgba(124,58,237,.45), transparent 62%), linear-gradient(135deg,var(--blue),var(--blue-600)); color:#fff; box-shadow:0 24px 50px -30px rgba(47,107,255,.9)}
.blog-page .side-cta b{font-family:"Plus Jakarta Sans",sans-serif; font-size:1.02rem; font-weight:800; letter-spacing:-.025em; display:block; margin-bottom:8px}
.blog-page .side-cta p{font-size:.82rem; color:rgba(255,255,255,.82); margin:0 0 16px}
.blog-page .side-cta .btn{display:inline-flex; align-items:center; justify-content:center; width:100%; padding:12px 20px; border-radius:999px; background:#fff; color:var(--blue); font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:.88rem; text-decoration:none; box-shadow:none; transition:transform .16s}
.blog-page .side-cta .btn:hover{transform:translateY(-2px)}

/* sidebar mini author card */
.blog-page .side-mini{padding:18px; display:flex; gap:12px; align-items:center}
.blog-page .side-mini img{width:42px; height:42px; border-radius:50%; object-fit:cover; flex:none; border:2px solid #fff; box-shadow:var(--shadow-sm)}
.blog-page .side-mini b{font-family:"Plus Jakarta Sans",sans-serif; font-size:.86rem; display:block; letter-spacing:-.02em; color:var(--ink)}
.blog-page .side-mini span{font-size:.72rem; color:var(--muted); line-height:1.4; display:block}

/* TOC (class hooks kept for blog.js / inline scroll-spy script) */
.blog-page .toc{list-style:none; margin:0; padding:10px; max-height:44vh; overflow-y:auto}
.blog-page .toc-item-wrapper{margin:0}
.blog-page .toc-item-wrapper > div{display:flex; align-items:center}
.blog-page .toggle{width:22px; height:22px; border:0; background:transparent; padding:0; display:grid; place-items:center; cursor:pointer; color:var(--muted); flex:none}
.blog-page .toggle svg{width:14px; height:14px; transition:transform .2s}
.blog-page .toggle svg.rotate-90{transform:rotate(90deg)}
.blog-page a.toc-item{display:block; flex:1; text-decoration:none; font-size:.84rem; color:var(--muted); padding:8px 10px; border-radius:9px; line-height:1.4; transition:all .16s; border-left:2px solid transparent}
.blog-page a.toc-item:hover{background:var(--panel-2); color:var(--ink)}
.blog-page a.toc-item.active{background:var(--blue-50); color:var(--blue); font-weight:600; border-left-color:var(--blue)}
.blog-page .toc-item-wrapper ul{list-style:none; margin:2px 0 4px; padding:0 0 0 30px}
.blog-page a.toc-subitem{display:block; text-decoration:none; font-size:.79rem; color:var(--muted); padding:7px 10px; border-radius:9px; transition:all .16s; border-left:2px solid transparent}
.blog-page a.toc-subitem:hover{background:var(--panel-2); color:var(--ink)}
.blog-page a.toc-subitem.active{background:var(--blue-50); color:var(--blue); font-weight:600; border-left-color:var(--blue)}
.blog-page .toc-item-wrapper ul.hidden{display:none}

/* contact column (stacked inside .side, below the TOC box) */
.blog-page .contact-col{margin-top:0}

/* ---------- article body ---------- */
.blog-page article.post{font-size:1.04rem; line-height:1.78; color:var(--ink-2); max-width:100%}
.blog-page article.post .section-block{margin-bottom:44px; scroll-margin-top:110px}
.blog-page article.post h2{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; letter-spacing:-.035em; font-size:clamp(1.5rem,2.6vw,2rem); margin:0 0 16px; scroll-margin-top:110px; color:var(--ink)}
.blog-page article.post h3{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; letter-spacing:-.02em; font-size:1.22rem; margin:30px 0 12px; scroll-margin-top:110px; color:var(--ink)}
.blog-page article.post .section-img{border-radius:16px; border:1px solid var(--line); margin-bottom:20px; width:100%}
.blog-page .blog-content{font-size:1.04rem; line-height:1.78; color:var(--ink-2)}
.blog-page .blog-content p{margin:0 0 1.1rem}
.blog-page .blog-content a{color:var(--blue); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(47,107,255,.3); transition:border-color .16s}
.blog-page .blog-content a:hover{border-bottom-color:var(--blue)}
.blog-page .blog-content strong{color:var(--ink); font-weight:600}
.blog-page .blog-content img{border-radius:14px; border:1px solid var(--line); margin:20px 0}
.blog-page .blog-content ul, .blog-page .blog-content ol{padding-left:1.3em; margin:0 0 1.1rem}
.blog-page .blog-content table{width:100%; border-collapse:collapse; font-size:.92rem; margin:20px 0}
.blog-page .blog-content th, .blog-page .blog-content td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line)}
.blog-page .blog-content thead th{background:var(--panel-2); color:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500}

/* ---------- faq (native <details>, CSS-only open/close animation) ---------- */
.blog-page .faq details{border-bottom:1px solid var(--line)}
.blog-page .faq details:first-of-type{border-top:1px solid var(--line)}
.blog-page .faq summary{cursor:pointer; list-style:none; padding:20px 44px 20px 0; position:relative; font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:1rem; letter-spacing:-.025em; color:var(--ink); transition:color .16s}
.blog-page .faq summary::-webkit-details-marker{display:none}
.blog-page .faq summary::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-family:"IBM Plex Mono",monospace; font-size:1.3rem; color:var(--blue); transition:transform .22s}
.blog-page .faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.blog-page .faq summary:hover{color:var(--blue)}
.blog-page .faq .a{padding:0 40px 22px 0; color:var(--muted); font-size:.93rem}

/* ---------- CTA ---------- */
.blog-page .blog-cta{border-radius:20px; padding:clamp(26px,4vw,42px); margin:44px 0; text-align:center; color:#fff; box-shadow:0 30px 60px -36px rgba(47,107,255,.7)}
.blog-page .blog-cta h2{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; letter-spacing:-.03em; font-size:clamp(1.4rem,2.6vw,1.9rem); margin:0 0 10px; color:#fff}
.blog-page .blog-cta p{font-size:.98rem; color:rgba(255,255,255,.9); max-width:640px; margin:0 auto 22px}
.blog-page .blog-cta .btn{display:inline-flex; align-items:center; justify-content:center; padding:13px 26px; border-radius:999px; background:#fff; color:var(--ink); font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:.92rem; text-decoration:none; transition:transform .16s, box-shadow .16s; box-shadow:var(--shadow-sm)}
.blog-page .blog-cta .btn:hover{transform:translateY(-2px)}

/* ---------- AI summarise ---------- */
.blog-page .aisum{border:1px solid var(--line); border-radius:16px; padding:18px 22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:#fff; box-shadow:var(--shadow-sm); margin:36px 0}
.blog-page .aisum .t{flex:1; min-width:190px}
.blog-page .aisum .t b{font-family:"Plus Jakarta Sans",sans-serif; font-size:.9rem; display:block; letter-spacing:-.02em; color:var(--ink)}
.blog-page .aisum .t span{font-size:.76rem; color:var(--muted)}
.blog-page .aisum .ic{display:flex; gap:8px}
.blog-page .aisum .ic a{width:34px; height:34px; border-radius:9px; border:1px solid var(--line); display:grid; place-items:center; background:var(--panel-2); transition:all .16s; text-decoration:none}
.blog-page .aisum .ic a:hover{border-color:var(--blue); transform:translateY(-2px)}
.blog-page .aisum .ic img{width:17px; height:17px; object-fit:contain}

/* ---------- footer CTA ---------- */
.blog-page .fcta{padding:70px 0}
.blog-page .fcta-in{border-radius:24px; padding:clamp(32px,5vw,54px); background:radial-gradient(600px circle at 92% 10%, rgba(124,58,237,.5), transparent 60%), linear-gradient(135deg,var(--blue),var(--blue-600)); color:#fff; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; box-shadow:0 40px 80px -40px rgba(47,107,255,.8)}
@media(max-width:880px){.blog-page .fcta-in{grid-template-columns:1fr; gap:28px}}
.blog-page .fcta-in h2{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; letter-spacing:-.03em; font-size:clamp(1.7rem,3vw,2.4rem); margin:0 0 14px; color:#fff}
.blog-page .fcta-in p{color:rgba(255,255,255,.82); margin:0}
.blog-page .ctalist{display:grid; gap:10px}
.blog-page .ctalist a{display:flex; align-items:center; justify-content:space-between; gap:14px; text-decoration:none; border:1px solid rgba(255,255,255,.28); border-radius:12px; padding:14px 18px; font-size:.9rem; transition:all .18s; background:rgba(255,255,255,.1); color:#fff}
.blog-page .ctalist a:hover{background:#fff; color:var(--blue); transform:translateX(4px)}
.blog-page .ctalist a:hover .k{color:var(--blue)}
.blog-page .ctalist .k{font-family:"IBM Plex Mono",monospace; font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75); display:block; margin-bottom:2px; transition:color .18s}
.blog-page .ctalist b{font-weight:700; font-family:"Plus Jakarta Sans",sans-serif}

/* ---------- tags ---------- */
.blog-page .tags{display:flex; flex-wrap:wrap; gap:9px; padding-top:28px; margin-top:36px; border-top:1px solid var(--line)}
.blog-page .tags span{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.03em; padding:7px 13px; border-radius:99px; border:1px solid var(--line); color:var(--muted); background:#fff}

/* ---------- author card (compact, in-article "Written by") ---------- */
.blog-page .author{border:1px solid var(--line); border-radius:20px; padding:30px; background:#fff; box-shadow:var(--shadow-sm); display:grid; grid-template-columns:auto 1fr; gap:24px; margin:44px 0}
@media(max-width:620px){.blog-page .author{grid-template-columns:1fr}}
.blog-page .author img{width:80px; height:80px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:var(--shadow-sm)}
.blog-page .author .k{font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:8px}
.blog-page .author h3{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; letter-spacing:-.03em; font-size:1.3rem; margin:0 0 10px; color:var(--ink)}
.blog-page .author p{font-size:.9rem; color:var(--muted); margin-bottom:16px}
.blog-page .author .badges{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.blog-page .author .badges span{font-family:"IBM Plex Mono",monospace; font-size:.62rem; padding:5px 10px; border-radius:6px; background:var(--blue-50); color:var(--blue); font-weight:600}
.blog-page .author .lk{display:flex; gap:8px; flex-wrap:wrap}
.blog-page .author .lk a{font-family:"IBM Plex Mono",monospace; font-size:.68rem; padding:7px 13px; border-radius:99px; border:1px solid var(--line); text-decoration:none; color:var(--muted); transition:all .16s}
.blog-page .author .lk a:hover{border-color:var(--blue); color:var(--blue)}

/* ---------- keep reading (related articles) ---------- */
.blog-page .rel{background:var(--panel-2); border-top:1px solid var(--line); padding:70px 0}
.blog-page .rel h2{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; letter-spacing:-.035em; font-size:clamp(1.5rem,2.6vw,2rem); margin:0 0 8px; color:var(--ink)}
.blog-page .rel .sub{color:var(--muted); font-size:.95rem; margin:0 0 32px}
.blog-page .rcards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:900px){.blog-page .rcards{grid-template-columns:1fr}}
.blog-page .rcard{background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; text-decoration:none; display:flex; flex-direction:column; transition:all .2s}
.blog-page .rcard:hover{transform:translateY(-4px); border-color:rgba(47,107,255,.4); box-shadow:var(--shadow-sm)}
.blog-page .rcard .c{font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:12px}
.blog-page .rcard h3{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; letter-spacing:-.02em; font-size:1.02rem; margin:0 0 8px; line-height:1.34; color:var(--ink)}
.blog-page .rcard p{font-size:.84rem; color:var(--muted); margin:0 0 16px; flex:1}
.blog-page .rcard .m{font-family:"IBM Plex Mono",monospace; font-size:.62rem; color:var(--muted); padding-top:14px; border-top:1px solid var(--line)}

/* ---------- where to go from here ---------- */
.blog-page .svc{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px}
@media(max-width:800px){.blog-page .svc{grid-template-columns:1fr}}
.blog-page .svc a{border:1px solid var(--line); border-radius:14px; padding:18px; background:#fff; text-decoration:none; display:flex; justify-content:space-between; align-items:center; gap:12px; transition:all .18s}
.blog-page .svc a:hover{border-color:var(--blue); background:var(--blue-50); transform:translateX(3px)}
.blog-page .svc b{font-family:"Plus Jakarta Sans",sans-serif; font-size:.88rem; display:block; letter-spacing:-.02em; color:var(--ink)}
.blog-page .svc span{font-size:.74rem; color:var(--muted)}
.blog-page .svc i{font-style:normal; color:var(--blue)}

@media(prefers-reduced-motion:reduce){
  .blog-page *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}