/* 06 — guides (template blog, 843px, white with rounded bottom over the dark FAQ) */
.blog { position: relative; z-index: 2; background: #fff; padding: 80px var(--gutter); border-radius: 0 0 120px 120px; }
.blog .sec-head .sub { max-width: 580px; }
.bl-row { display: grid; grid-template-columns: 292px 438px 292px 292px; gap: 10px; justify-content: center; margin-top: 64px; }
.bl { display: flex; flex-direction: column; min-height: 339px; color: var(--ink-2); }
.bl-img { display: block; height: 194px; border-radius: 40px; overflow: hidden; }
.bl-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.bl:hover .bl-img img { transform: scale(1.06); }
.bl-date { margin: 16px 0 0 24px; font-size: 14px; line-height: 21px; color: var(--grey); }
.bl-t { margin: 16px 24px 0; font-size: 18px; line-height: 27px; font-weight: 600; letter-spacing: -0.36px; }
.bl-tags { display: flex; gap: 8px; margin: 12px 24px 0; }
.bl-tags i { font-style: normal; font-size: 13px; color: var(--grey); background: #f5f5f5; border-radius: 8px; padding: 3px 8px; }
.bl-feat { position: relative; height: 339px; border-radius: 48px; overflow: hidden; background: #6262fe; padding: 24px; color: #fff; }
.bl-feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transition: transform .8s var(--ease); }
.bl-feat:hover img { transform: scale(1.05); }
.bl-feat > *:not(img) { position: relative; }
.bl-tag { align-self: flex-start; font-size: 13px; background: rgba(255, 255, 255, .2); border-radius: 8px; padding: 3px 8px; }
.bl-feat .bl-t { margin: 12px 0 0; font-size: 32px; line-height: 38.4px; font-weight: 500; letter-spacing: -0.64px; max-width: 360px; }
.bl-feat .bl-date { margin: 12px 0 0; color: rgba(255, 255, 255, .8); }
.bl-more { margin-top: auto; align-self: flex-start; height: 48px; padding: 0 20px; border-radius: 18px; display: flex; align-items: center; background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; box-shadow: inset 0 -2px 1px rgba(26, 20, 51, .25); }
.bl-all { text-align: center; margin-top: 40px; }
.bl-all a { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--indigo); }
@media (max-width: 1400px) { .bl-row { grid-template-columns: 1fr 1.5fr 1fr 1fr; } }
@media (max-width: 900px) {
  .blog { border-radius: 0 0 56px 56px; }
  .bl-row { grid-template-columns: 1fr; max-width: 420px; margin: 40px auto 0; gap: 20px; }
  .bl { min-height: 0; }
}