.sp-blog { background: #f5f9ff; color: #080f3e; font-family: 'Inter', sans-serif; }
.blog-index { width: min(1160px, 90%); margin-inline: auto; padding-block: 64px 72px; }
.blog-index h1, .blog-index h2, .blog-index h3 { color: #080f3e; font-family: inherit; font-weight: 700; letter-spacing: -.03em; }
.blog-index h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1.1; margin: 0 0 20px; }
.blog-index-intro { padding-bottom: 48px; max-width: 72ch; }
.blog-index-intro > p:first-of-type { font-size: clamp(21px, 3vw, 28px); line-height: 1.4; margin-bottom: 12px; color: #080f3e; }
.blog-index p { font-size: 16px; line-height: 1.7; color: #4b5871; }
.blog-index .blog-index-description { max-width: 65ch; margin-bottom: 0; }
.blog-index-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid #d7e4f3; }
.blog-index-section-heading h2 { font-size: 24px; margin: 0; }
.blog-index-section-heading > span { font-size: 14px; color: #4b5871; flex-shrink: 0; }
.blog-index-articles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.blog-index-article { display: flex; flex-direction: column; align-items: flex-start; padding-block: 30px; border-bottom: 1px solid #d7e4f3; min-width: 0; }
.blog-index .blog-index-meta { font-size: 13px; margin: 0 0 12px; }
.blog-index-meta span { padding-inline: 5px; }
.blog-index-article h3 { font-size: 23px; line-height: 1.35; margin-bottom: 12px; overflow-wrap: anywhere; }
.blog-index-article h3 a { color: inherit; text-decoration: none; }
.blog-index-article > p:not(.blog-index-meta) { margin-bottom: 22px; }
.blog-index a { text-underline-offset: 4px; }
.blog-index a:hover { color: #164bd4; text-decoration: underline; }
.blog-index .blog-index-read { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: auto; color: #1246cd; font-weight: 600; text-decoration: none; }
.blog-index-read svg { width: 20px; height: 20px; }
.blog-index-help { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-top: 56px; padding: 32px; background: #eaf5ff; border-radius: 12px; }
.blog-index-help h2 { font-size: 24px; margin-bottom: 8px; }
.blog-index-help p { margin: 0; }
.blog-index-help > a { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 48px; padding: 12px 20px; border-radius: 7px; background: #2460ff; color: #fff; font-weight: 600; text-decoration: none; }
.blog-index-help > a:hover { background: #164bd4; color: #fff; }
.blog-index :focus-visible { outline: 3px solid #164bd4; outline-offset: 5px; }
.blog-index ::selection { background: #080f3e; color: #fff; }
.blog-index-empty { padding-top: 28px; grid-column: 1 / -1; }
@media (max-width: 700px) {
    .blog-index { padding-block: 36px 48px; }
    .blog-index-intro { padding-bottom: 32px; }
    .blog-index-articles { grid-template-columns: minmax(0, 1fr); }
    .blog-index-help { align-items: flex-start; flex-direction: column; padding: 24px; margin-top: 36px; }
    .blog-index-section-heading h2 { font-size: 21px; }
}