.es-blog{background:#F6F8FB}
.es-blog-shell{width:min(calc(100% - 32px),1120px);margin-inline:auto}
.es-blog-hero{background:linear-gradient(135deg,#17284A,#20375F);padding:68px 0;color:#fff}
.es-blog-hero__inner{max-width:830px;margin:auto;text-align:center}
.es-blog-hero h1{font-size:clamp(38px,5vw,58px);line-height:1.07;letter-spacing:-.045em;margin:16px auto}
.es-blog-hero p{font-size:18px;line-height:1.75;color:rgba(255,255,255,.8);max-width:720px;margin:auto}
.es-blog-main{padding:52px 0 76px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin:0 0 22px}
.section-heading h2{font-size:clamp(28px,3.5vw,38px);color:#1A2B4A;letter-spacing:-.03em;margin:0}
.section-heading p{max-width:520px;color:#64748B;line-height:1.7;margin:0}
.need-grid,.article-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.need-card,.article-card{background:#fff;border:1px solid #DCE6EF;border-radius:22px;box-shadow:0 14px 34px rgba(15,23,42,.05);overflow:hidden}
.need-card{padding:28px}
.need-card h3,.article-card h3{font-size:24px;line-height:1.18;color:#1A2B4A;margin:0 0 10px}
.need-card p,.article-card p{font-size:15px;line-height:1.75;color:#64748B}
.need-card a{font-weight:800}
.article-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.article-card__body{padding:22px}
.article-card__category{display:inline-flex;padding:6px 10px;border-radius:999px;background:#E8F6F3;color:#0F7B6C;font-size:11px;font-weight:800;margin-bottom:14px}
.article-card__meta{font-size:12px;color:#94A3B8;margin:14px 0}
.user-guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.user-guide-card{background:#fff;border:1px solid #DCE6EF;border-radius:18px;padding:20px}
.user-guide-card b{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#E8F6F3;color:#0F7B6C;margin-bottom:13px}
.user-guide-card h3{font-size:17px;color:#1A2B4A;margin:0 0 7px}
.user-guide-card p{font-size:14px;line-height:1.65;color:#64748B;margin:0}
.blog-block{margin-top:50px}
@media(max-width:820px){
  .need-grid,.article-card-grid{grid-template-columns:1fr}
  .user-guide-grid{grid-template-columns:1fr 1fr}
  .section-heading{align-items:start;flex-direction:column}
  .es-blog-hero__inner{text-align:left}
}
@media(max-width:640px){.user-guide-grid{grid-template-columns:1fr}}