.page--blog, .page--blog-article { background: #f7f9fc; color: #152235; }
.blog-main { padding-top: 0; }
.blog-wrap { width: min(100% - 64px, 1240px); margin: 0 auto; }
.blog-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 86% 15%, #e4effc 0, transparent 31%), linear-gradient(145deg, #fff 42%, #f0f5fb); border-bottom: 1px solid #e5ebf2; padding: clamp(130px, 15vw, 196px) 0 clamp(92px, 10vw, 144px); }
.blog-hero::after { content: ""; position: absolute; width: 260px; height: 260px; top: 23%; right: 8%; border: 1px solid #d8e7f6; transform: rotate(45deg); opacity: .43; pointer-events: none; }
.blog-hero .blog-wrap { position: relative; z-index: 1; }
.blog-eyebrow { margin: 0 0 26px; font-size: 12px; font-weight: 700; color: #2459ac; letter-spacing: 0; }
.blog-hero h1 { max-width: 890px; margin: 0; color: #102746; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(42px, 5vw, 75px); line-height: 1.1; letter-spacing: 0; }
.blog-hero-lead { max-width: 630px; margin: 30px 0 0; color: #526477; font-size: clamp(17px, 1.5vw, 20px); font-weight: 400; line-height: 1.65; }
.blog-hero .blog-eyebrow { animation: blog-enter .65s both; }
.blog-hero h1 { animation: blog-enter .72s .08s both; }
.blog-hero-lead { animation: blog-enter .72s .16s both; }
@keyframes blog-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.blog-index { padding: 54px 0 122px; }
.blog-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 40px; }
.blog-filters button { appearance: none; border: 1px solid transparent; background: transparent; color: #526477; padding: 9px 14px; border-radius: 5px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.blog-filters button:hover, .blog-filters button[aria-pressed="true"] { color: #174b99; background: #eaf2fd; border-color: #d5e5f9; }
.blog-filters button:focus-visible, .blog-card-link:focus-visible, .blog-back:focus-visible { outline: 2px solid #1d5bc1; outline-offset: 3px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.blog-card { min-width: 0; border: 1px solid #e2e8f1; border-radius: 8px; background: #fff; overflow: hidden; box-shadow: 0 4px 14px #1e3b5c08; transition: transform .22s, box-shadow .22s, border-color .22s; }
.blog-card[hidden] { display: none; }
.blog-card:hover { transform: translateY(-3px); border-color: #bfd4eb; box-shadow: 0 16px 30px #1e3b5c13; }
.blog-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.blog-card-image { aspect-ratio: 8 / 5; background: #e6f0fa; overflow: hidden; }
.blog-card-image img, .blog-article-visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .22s; }
.blog-card:hover .blog-card-image img { filter: contrast(1.05); }
.blog-card-content { position: relative; flex: 1; padding: 25px 25px 62px; }
.blog-card-meta, .blog-article-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #738195; font-size: 12px; font-weight: 600; }
.blog-card-meta span, .blog-article-meta span { color: #1d5cb2; }
.blog-card h2 { margin: 20px 0 14px; color: #17283c; font-size: clamp(20px, 1.65vw, 23px); line-height: 1.32; font-weight: 600; }
.blog-card p { margin: 0; color: #596a7a; font-size: 14px; font-weight: 400; line-height: 1.65; }
.blog-card-arrow { position: absolute; right: 25px; bottom: 23px; color: #1a58ac; font-size: 20px; transition: transform .22s; }
.blog-card:hover .blog-card-arrow { transform: translate(3px, -3px); }
.blog-empty { color: #526477; }
.blog-article { background: #fff; }
.blog-article-wrap { width: min(100% - 64px, 960px); margin: 0 auto; }
.blog-article-hero { padding: 152px 0 62px; background: linear-gradient(145deg, #fff 38%, #edf4fc); border-bottom: 1px solid #e3ebf4; }
.blog-back { display: inline-flex; align-items: center; gap: 10px; color: #1e5aaf; text-decoration: none; font-size: 13px; font-weight: 600; }
.blog-back:hover { text-decoration: underline; }
.blog-article-meta { justify-content: flex-start; gap: 20px; margin-top: 64px; }
.blog-article h1 { max-width: 900px; margin: 20px 0 22px; color: #102746; font: 400 clamp(39px, 4.3vw, 66px)/1.13 Georgia, "Times New Roman", serif; letter-spacing: 0; }
.blog-article-intro { max-width: 700px; margin: 0; color: #536578; font-size: 18px; font-weight: 400; line-height: 1.65; }
.blog-article-visual { aspect-ratio: 8 / 5; margin: 56px 0 74px; overflow: hidden; border-radius: 8px; }
.blog-article-body { max-width: 700px; margin: 0 auto; }
.blog-article-body section { margin-bottom: 55px; }
.blog-article-body h2 { margin: 0 0 20px; color: #173252; font: 400 34px/1.24 Georgia, "Times New Roman", serif; }
.blog-article-body p { margin: 0 0 18px; color: #405165; font-size: 17px; font-weight: 400; line-height: 1.78; }
.blog-back-bottom { margin: 0 0 110px; }
@media (max-width: 1023px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .blog-wrap, .blog-article-wrap { width: min(100% - 36px, 540px); } .blog-hero { padding: 142px 0 80px; } .blog-hero::after { width: 140px; height: 140px; right: -70px; top: 30%; } .blog-hero-lead { margin-top: 22px; } .blog-index { padding: 35px 0 80px; } .blog-filters { gap: 4px; margin-bottom: 26px; } .blog-filters button { font-size: 12px; padding: 8px 10px; } .blog-grid { grid-template-columns: 1fr; gap: 20px; } .blog-card-content { padding: 22px 22px 60px; } .blog-card-arrow { right: 22px; } .blog-article-hero { padding: 137px 0 46px; } .blog-article-meta { margin-top: 42px; } .blog-article-intro { font-size: 16px; } .blog-article-visual { margin: 36px 0 51px; } .blog-article-body h2 { font-size: 28px; } .blog-article-body p { font-size: 16px; } .blog-back-bottom { margin-bottom: 80px; } }
@media (prefers-reduced-motion: reduce) { .blog-hero .blog-eyebrow, .blog-hero h1, .blog-hero-lead { animation: none; } .blog-card, .blog-card-arrow, .blog-card-image img { transition: none; } }
.blog-hero { background: radial-gradient(ellipse 54% 95% at 90% 48%, rgba(149,191,235,.38), transparent 76%), radial-gradient(ellipse 65% 78% at 30% 96%, rgba(216,232,249,.49), transparent 77%), linear-gradient(112deg, #f8fbfe 0%, #eef4fb 58%, #deebf8 100%); }
.blog-hero::after { display: none; }
.blog-hero-geometry { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.blog-hero-geometry i { position: absolute; display: block; border: 1px solid rgba(66,115,170,.13); background: linear-gradient(135deg, rgba(255,255,255,.3), rgba(116,168,220,.095) 64%, rgba(255,255,255,.05)); box-shadow: inset 1px 1px 0 rgba(255,255,255,.48); animation: blog-panel-drift 20s ease-in-out infinite alternate; }
.blog-hero-geometry i:nth-child(1) { width: 24%; height: 61%; top: 15%; right: 7%; }
.blog-hero-geometry i:nth-child(2) { width: 18%; height: 48%; top: 25%; right: 22%; animation-duration: 24s; animation-delay: -7s; }
.blog-hero-geometry i:nth-child(3) { width: 29%; height: 23%; top: 57%; right: 1%; background: linear-gradient(125deg, rgba(102,158,217,.12), rgba(255,255,255,.04)); animation-delay: -10s; }
.blog-hero-geometry i:nth-child(4) { width: 10%; height: 17%; top: 13%; right: 36%; opacity: .66; animation-duration: 27s; }
.blog-hero-geometry i:nth-child(5) { width: 39%; height: 1px; top: 82%; right: 3%; border: 0; background: linear-gradient(90deg, transparent, rgba(57,107,164,.2), transparent); animation: none; }
@keyframes blog-panel-drift { from { transform: translateY(0); opacity: .7; } to { transform: translateY(-7px); opacity: 1; } }
.blog-article-visual:has(+ .blog-case-summary) { margin-bottom: 0; }
.blog-case-summary { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: center; padding: 35px 0 64px; border-bottom: 1px solid #e2eaf3; margin-bottom: 66px; }
.blog-case-metric { display: flex; flex-direction: column; gap: 4px; color: #153e78; }
.blog-case-metric strong { font: 400 54px/1 Georgia, "Times New Roman", serif; }
.blog-case-metric span { font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.blog-case-flow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; list-style: none; margin: 0; padding: 0; }
.blog-case-flow li { display: flex; align-items: center; gap: 10px; color: #405c7a; font-size: 12px; font-weight: 650; white-space: nowrap; }
.blog-case-flow li + li::before { content: "→"; color: #2a68be; font-size: 16px; font-weight: 400; }
.blog-agent-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 25px 0 0; padding: 0; }
.blog-agent-list li { border-top: 1px solid #dce7f3; padding: 12px 0; color: #1f4f86; font-size: 13px; font-weight: 600; }
.blog-external-links { padding: 0 0 58px; }
.blog-external-links a { color: #1b56aa; font-size: 13px; font-weight: 650; text-decoration: none; }
.blog-external-links a:hover { text-decoration: underline; }
.blog-external-links a:focus-visible { outline: 2px solid #245de8; outline-offset: 4px; }
@media (max-width: 1023px) { .blog-hero-geometry i { opacity: .55; } }
@media (max-width: 767px) { .blog-hero-geometry i:nth-child(n+2) { display: none; } .blog-hero-geometry i:nth-child(1) { top: 22%; right: -23%; width: 49%; height: 45%; opacity: .2; animation: none; } .blog-case-summary { grid-template-columns: 1fr; gap: 22px; padding: 28px 0 43px; margin-bottom: 52px; } .blog-case-metric strong { font-size: 48px; } .blog-case-flow { gap: 8px; } .blog-case-flow li { font-size: 11px; gap: 8px; } .blog-agent-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .blog-hero-geometry i { animation: none; } }
.blog-hero { background: radial-gradient(ellipse 53% 90% at 90% 44%, rgba(126,177,231,.43), transparent 77%), radial-gradient(ellipse 64% 78% at 27% 96%, rgba(202,223,245,.53), transparent 78%), linear-gradient(112deg, #f8fbfe 0%, #edf4fb 55%, #dceaf8 100%); }
.blog-article-context { margin: 26px 0 0; color: #5a6f86; font-size: 12px; font-weight: 700; }
.blog-article-context span { padding: 0 6px; color: #9bb0c8; }
.blog-article-hero .blog-external-links { margin-top: 13px; padding: 0; }
.blog-external-links a { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 3px; border-bottom: 1px solid #8caedb; transition: color .2s, border-color .2s; }
.blog-external-links a span { display: inline-block; transition: transform .2s; }
.blog-external-links a:hover { color: #123d83; border-color: #245de8; text-decoration: none; }
.blog-external-links a:hover span { transform: translate(3px,-2px); }
@media (prefers-reduced-motion: reduce) { .blog-external-links a, .blog-external-links a span { transition: none; } .blog-external-links a:hover span { transform: none; } }

/* Keep the blog's chapter spacing in step with the interior pages. */
.blog-index { padding-top: 72px; }
.blog-filters { margin-bottom: 48px; }
.blog-card-content { padding: 29px 27px 64px; }
.blog-card h2 { margin-top: 23px; }
.blog-article-visual { margin-bottom: 82px; }
.blog-article-body section { margin-bottom: 66px; }
.blog-article-body h2 { margin-bottom: 25px; }
@media (max-width: 767px) {
  .blog-index { padding-top: 48px; }
  .blog-filters { margin-bottom: 31px; }
  .blog-card-content { padding: 24px 23px 60px; }
  .blog-article-visual { margin-bottom: 57px; }
  .blog-article-body section { margin-bottom: 51px; }
  .blog-article-body h2 { margin-bottom: 21px; }
}
.blog-example-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.blog-example-list li { padding: 10px 0; border-top: 1px solid #e0e9f3; color: #405a76; font-size: 14px; }
.blog-simple-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 26px; }
.blog-simple-compare>div { padding-top: 16px; border-top: 1px solid #cddced; }
.blog-simple-compare strong { color: #23599b; font-size: 11px; letter-spacing: .04em; }
.blog-article-body .blog-simple-compare p { margin: 11px 0 0; font-size: 15px; line-height: 1.6; }
.blog-simple-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 27px 0 0; padding: 0; list-style: none; }
.blog-simple-flow li { display: flex; align-items: center; gap: 10px; color: #24548b; font-size: 12px; font-weight: 700; }
.blog-simple-flow li+li::before { content: "→"; color: #7695bc; font-size: 17px; font-weight: 400; }
@media (max-width: 767px) { .blog-example-list, .blog-simple-compare { grid-template-columns: 1fr; } }