.blog-shell{max-width:940px}
.blog-header .logo{color:var(--text)}
.blog-hero{padding:34px 0 28px}
.blog-eyebrow{margin:0 0 9px;color:var(--accent2);font-size:.78rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.blog-hero h1,.article-head h1{margin:0;color:var(--text);font-size:clamp(2.35rem,7vw,4.5rem);line-height:1.02;letter-spacing:-.045em}
.blog-hero>p:last-child,.article-dek{max-width:680px;margin:18px 0 0;color:var(--dim);font-size:1.12rem;line-height:1.65}
.post-list{display:grid;gap:20px;margin:14px 0 28px}
.post-card{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:26px;align-items:center;padding:28px;border:1px solid var(--border);border-radius:24px;background:var(--surface);box-shadow:0 18px 48px rgba(22,32,58,.08);color:var(--text);text-decoration:none}
.post-card:hover{border-color:#B8A9FF;box-shadow:0 22px 54px rgba(22,32,58,.13);text-decoration:none;transform:translateY(-1px)}
.post-card:focus-visible{outline:3px solid var(--accent2);outline-offset:4px}
.post-meta,.article-meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--dim);font-size:.88rem;font-weight:700}
.post-card h2{margin:12px 0 10px;padding:0;border:0;font-size:clamp(1.55rem,4vw,2.15rem);line-height:1.12;letter-spacing:-.025em}
.post-card p{margin:0;color:var(--dim);line-height:1.62}
.post-arrow{display:inline-block;margin-top:18px;color:var(--accent2);font-weight:900}
.milestone-art{position:relative;display:grid;place-items:center;min-height:180px;overflow:hidden;border-radius:19px;background:linear-gradient(145deg,#192442 0%,#403075 60%,#FF6B4A 150%);color:#fff;text-align:center}
.milestone-art::before,.milestone-art::after{content:"";position:absolute;border-radius:999px;background:rgba(255,255,255,.11)}
.milestone-art::before{width:155px;height:155px;right:-62px;top:-75px}
.milestone-art::after{width:90px;height:90px;left:-35px;bottom:-40px}
.milestone-art strong{position:relative;z-index:1;font-size:3.35rem;line-height:1;letter-spacing:-.05em}
.milestone-art span{position:relative;z-index:1;display:block;margin-top:8px;font-weight:800;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.article{max-width:760px;margin:0 auto}
.article-head{padding:34px 0 24px}
.article-head h1{max-width:730px;font-size:clamp(2.35rem,7vw,4.25rem)}
.article-meta{margin-top:20px}
.article-hero{margin:18px 0 34px;min-height:270px;border-radius:28px}
.article-hero strong{font-size:clamp(4rem,18vw,7.5rem)}
.article-hero span{font-size:1rem}
.article-body{font-size:1.08rem;line-height:1.82;color:var(--text)}
.article-body>p:first-child{font-size:1.25rem;line-height:1.7;color:var(--dim)}
.article-body h2{margin:42px 0 14px;padding:0;border:0;font-size:1.75rem;line-height:1.2;letter-spacing:-.02em}
.article-body ul{padding-left:1.35rem}
.article-body li{margin:9px 0}
.article-callout{margin:34px 0;padding:24px 26px;border:1px solid #CFC5FF;border-radius:20px;background:linear-gradient(145deg,#F2EFFF,#EEF6FF)}
.article-callout h2{margin-top:0}
.article-callout p:last-child{margin-bottom:0}
.article-actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 4px}
.article-actions .cta{margin:0}
.cta-secondary{background:var(--surface);border:1px solid var(--border);color:var(--accent2)}
.article-signoff{margin-top:42px;font-weight:800}
.back-to-blog{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-weight:800}
@media(max-width:680px){
  .blog-hero{padding:22px 0 18px}
  .blog-hero h1,.article-head h1{font-size:2.35rem}
  .post-card{grid-template-columns:1fr;padding:20px;border-radius:20px}
  .milestone-art{grid-row:1;min-height:150px}
  .article{max-width:none}
  .article-head{padding:22px 0 16px}
  .article-dek{font-size:1.03rem;line-height:1.55}
  .article-hero{min-height:210px;margin-bottom:26px;border-radius:22px}
  .article-body{font-size:1rem;line-height:1.72}
  .article-body>p:first-child{font-size:1.12rem;line-height:1.62}
  .article-body h2{font-size:1.48rem;margin-top:34px}
  .article-callout{padding:20px 18px}
  .article-actions{display:grid}
  .article-actions .cta{text-align:center}
}