.bhead{margin:4px 0 26px}
.bkick{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#A1EB1A}
.bhead h1{font-weight:800;font-size:clamp(2.4rem,5vw,4rem);line-height:.98;margin-top:14px}
.bhead p{color:var(--grey);font-size:15px;line-height:1.6;margin-top:16px;max-width:52ch}

.bfeat{display:flex;min-height:clamp(420px,54vh,560px)}
.bfeat .banner-body{align-self:center;max-width:640px;padding:clamp(28px,4vw,56px);gap:14px}
.bfeat h2{text-transform:none;font-size:clamp(1.7rem,3.2vw,2.9rem);line-height:1.04;transition:color .25s}
.bfeat:hover h2{color:#DACCFA}
.bfeat>figure img{transition:transform .7s ease}
.bfeat:hover>figure img{transform:scale(1.03)}
.bfeat .btn-white{margin-top:6px}
.bchips{display:flex;gap:8px;flex-wrap:wrap}

.bmeta{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint,#8a8a8a)}

.blog-grid{grid-template-columns:repeat(3,1fr)}
.bpost{display:flex;flex-direction:column}
.bpost .bcap{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px 16px 18px}
.bpost .bcap .chip-dark{font-size:10.5px;padding:5px 11px}
.bpost h3{font-weight:700;font-size:16.5px;letter-spacing:-.02em;line-height:1.25}
.bpost .bcap p{color:var(--grey);font-size:12.5px;line-height:1.5;font-family:'Inter',sans-serif}
.bpost .bmeta{margin-top:auto;padding-top:4px}

.bsub .banner-center{padding:clamp(36px,5vw,60px)}
.bsub h2{font-size:clamp(1.9rem,4vw,3.2rem)}
.bsub p{max-width:44ch}
.subform{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%;max-width:480px;margin-top:10px}
.subform input{flex:1;min-width:220px;background:rgba(8,8,10,.55);border:1px solid rgba(255,255,255,.18);
  border-radius:100px;padding:13px 20px;color:#fff;font-family:'Inter',sans-serif;font-size:14px;outline:none;
  backdrop-filter:blur(8px);transition:.2s}
.subform input::placeholder{color:rgba(255,255,255,.45)}
.subform input:focus{border-color:#DACCFA;background:rgba(8,8,10,.72)}
.subform .btn-brand{border:0;cursor:pointer}

@media(max-width:1150px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .blog-grid{grid-template-columns:1fr}
  .bfeat .scrim{background:linear-gradient(0deg,rgba(8,8,9,.95) 45%,rgba(8,8,9,.35))}
}