.blog-hero{background:#000;color:#fff;padding:3rem 0 3.2rem;border-top:1px solid #16202b}
.blog-hero h1{font:800 clamp(1.8rem,4.5vw,2.8rem)/1.2 var(--head);margin:0 0 .8rem;max-width:44rem}
.blog-hero .sub{color:#b9c7d4;margin:0;max-width:34rem}
.narrow{max-width:760px}
.back{display:inline-block;color:var(--sky);font:600 .9rem var(--head);margin-bottom:1.2rem}
.list{padding:3rem 0 4rem}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.post-card{display:flex;flex-direction:column;gap:.5rem;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.6rem}
.post-card:hover{border-color:var(--blue)}
.post-card h2{font:700 1.2rem/1.3 var(--head);margin:0}
.post-card p{margin:0;color:var(--mute)}
.post-card .eyebrow{color:var(--blue);margin:0}
.post-card .more{margin-top:auto;padding-top:.8rem;color:var(--blue);font:600 .95rem var(--head)}
.post{max-width:760px;margin:0 auto;padding:3rem 1.5rem 4rem;font-size:1.06rem}
.post h2{font:700 1.4rem/1.3 var(--head);margin:2rem 0 .6rem}
.post p,.post li{color:#2a3644}
.post ul{padding-left:1.2rem}
.post li{margin:.3rem 0}
.cta{margin-top:3rem;background:#000;color:#fff;border-radius:14px;padding:2rem}
.cta h2{margin-top:0;color:#fff}
.cta p{color:#c3d0dd}
footer a{color:#8fa0b1}
footer a:hover{color:#fff}