/* Editorial layer: existing Bask tokens, static content, no new JS dependency. */
.blog-main { padding-top: 20px; padding-bottom: 56px; }
.blog-main *, .blog-teaser * { min-width: 0; }
.blog-main a, .blog-teaser a { text-underline-offset: .2em; }
.blog-main :focus-visible, .blog-teaser :focus-visible { outline: 3px solid #075fb3; outline-offset: 4px; }
.blog-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #616161; font-size: 13px; line-height: 1.5; margin-bottom: 28px; }
.blog-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.blog-index-head { max-width: 850px; margin-bottom: 24px; }
.blog-main .eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: #616161; }
.blog-index-head h1, .blog-article-head h1 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 20px; text-wrap: balance; overflow-wrap: anywhere; }
.blog-index-head > p:last-child { font-size: 19px; line-height: 1.6; margin: 0; max-width: 680px; }
.blog-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; }
.blog-topics a { padding: 11px 16px; min-height: 44px; border: 1px solid #deded9; border-radius: 6px; font-size: 14px; text-decoration: none; }
.blog-topics a:hover { border-color: #111; background: #f4f4f2; }
.blog-feature { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(24px,4vw,56px); align-items: center; background: #f4f4f2; border-radius: 8px; overflow: hidden; }
.blog-feature-image { display: block; height: 100%; min-height: 310px; background: #e8e2d8; }
.blog-feature img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1.45; }
.blog-feature > div { padding: 32px 36px 32px 0; }
.blog-feature h2 { font-size: clamp(25px,2.6vw,36px); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 18px; }
.blog-feature h2 a { text-decoration: none; }
.blog-feature h2 a:hover { text-decoration: underline; }
.blog-feature p:not(.eyebrow) { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: #505050; }
.blog-main .button { min-height: 48px; font-size: 15px; white-space: normal; text-align: left; line-height: 1.4; gap: 16px; }
.blog-topic-section { margin-top: 52px; scroll-margin-top: 100px; }
.blog-section-heading { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.blog-section-heading h2 { font-size: clamp(23px,2.4vw,30px); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 8px; }
.blog-section-heading > span { color: #616161; font-size: 13px; }
.blog-section-heading > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.blog-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 40px; }
.blog-card { border-top: 1px solid #deded9; }
.blog-card > a { display: flex; flex-direction: column; align-items: start; height: 100%; padding: 26px 0; text-decoration: none; }
.blog-meta { font-size: 13px; line-height: 1.6; color: #616161; }
.blog-card h3 { font-size: 23px; line-height: 1.25; letter-spacing: -.015em; margin: 10px 0 12px; }
.blog-card p { color: #505050; font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.blog-card a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.blog-read { margin-top: auto; display: flex; justify-content: space-between; width: 100%; font-size: 14px; font-weight: 700; }
.blog-read > span { display: grid; place-items: center; width: 32px; height: 32px; background: #ffdb00; border-radius: 50%; }
.blog-help { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 40px; padding: 32px; background: #f4f4f2; border-radius: 8px; }
.blog-help h2 { font-size: 26px; margin: 0 0 10px; line-height: 1.2; }
.blog-help p { font-size: 16px; line-height: 1.6; margin: 0; max-width: 660px; }
.blog-help > a { flex-shrink: 0; }
.blog-article-head { max-width: 960px; }
.blog-intro { max-width: 810px; font-size: 19px; line-height: 1.65; margin: 0 0 20px; }
.blog-article-head .blog-meta { margin: 0 0 28px; }
.blog-answer { display: grid; grid-template-columns: 100px 1fr; gap: 24px; padding: 24px 28px; background: #f4f4f2; border-left: 4px solid #ffdb00; margin: 0 0 40px; max-width: 1080px; }
.blog-answer strong { font-size: 16px; }
.blog-answer p { max-width: 790px; font-size: 16px; line-height: 1.65; margin: 0; }
.blog-reading-layout { display: grid; grid-template-columns: minmax(210px,260px) minmax(0,760px); gap: clamp(28px,5vw,76px); align-items: start; }
.blog-toc { position: sticky; top: 110px; padding-right: 20px; border-right: 1px solid #deded9; }
.blog-toc summary { min-height: 44px; cursor: pointer; font-size: 15px; font-weight: 700; padding: 10px 0; }
.blog-toc nav { display: grid; }
.blog-toc nav a { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; min-height: 44px; font-size: 14px; line-height: 1.5; text-decoration: none; }
.blog-toc nav a:hover { text-decoration: underline; }
.blog-toc nav span { font-size: 12px; color: #616161; }
.blog-back { display: flex; align-items: center; min-height: 44px; margin-top: 12px; font-size: 14px; }
.blog-prose { font-size: 17px; line-height: 1.75; overflow-wrap: anywhere; }
.blog-prose section { scroll-margin-top: 110px; margin: 0 0 36px; }
.blog-prose h2 { font-size: 27px; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 18px; }
.blog-prose p { margin: 0 0 18px; }
.blog-prose ul, .blog-prose ol { padding-left: 24px; margin: 18px 0 24px; }
.blog-prose li { margin-bottom: 10px; }
.blog-prose a:not(.button) { text-decoration: underline; }
.blog-article-photo { margin: 0 0 32px; }
.blog-article-photo img { width: 100%; height: auto; border-radius: 6px; background: #f4f4f2; }
.blog-article-photo figcaption { color: #616161; font-size: 12px; line-height: 1.5; margin-top: 10px; }
.blog-table-wrap { max-width: 100%; margin: 24px 0; }
.blog-prose table { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 14px; line-height: 1.6; }
.blog-prose caption { text-align: left; font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.blog-prose th, .blog-prose td { padding: 12px; border: 1px solid #deded9; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.blog-prose thead th { background: #f4f4f2; }
.blog-prose th:first-child { width: 27%; }
.blog-article-cta { background: #f4f4f2; padding: 28px; border-radius: 8px; }
.blog-article-cta h2 { font-size: 25px; }
.blog-article-cta p { font-size: 16px; }
.blog-phone { display: block; padding: 10px 0; min-height: 44px; margin-top: 12px; font-size: 14px; }
.blog-related { margin-top: 40px; }
.blog-teaser { margin-block: 48px; padding-block: 24px; border-top: 1px solid #deded9; }
.blog-teaser-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 28px; }
.blog-teaser-links a { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid #deded9; padding: 20px 0; min-height: 44px; font-weight: 600; font-size: 17px; line-height: 1.4; text-decoration: none; }
.blog-teaser-links a:hover { text-decoration: underline; }
@media (max-width:1000px) {
 .blog-reading-layout { grid-template-columns: minmax(0,1fr); gap: 28px; }
 .blog-toc { position: static; border: 1px solid #deded9; padding: 10px 18px; border-radius: 6px; }
 .blog-toc nav { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; }
 .blog-back { margin-top: 0; }
 .blog-prose { max-width: 760px; }
 .blog-help { flex-wrap: wrap; }
}
@media (max-width:760px) {
 .blog-main { padding-top: 8px; padding-bottom: 28px; }
 .blog-crumbs { margin-bottom: 14px; gap: 4px 8px; font-size: 12px; }
 .blog-index-head h1, .blog-article-head h1 { font-size: clamp(28px,7.7vw,36px); margin-bottom: 16px; }
 .blog-index-head > p:last-child, .blog-intro { font-size: 16px; line-height: 1.65; }
 .blog-topics { gap: 6px; margin: 20px 0; }
 .blog-topics a { padding: 11px 12px; font-size: 13px; }
 .blog-feature { grid-template-columns: minmax(0,1fr); gap: 0; }
 .blog-feature-image { min-height: 0; }
 .blog-feature img { aspect-ratio: 1.7; height: auto; object-fit: cover; }
 .blog-feature > div { padding: 22px 20px; }
 .blog-feature h2 { font-size: 26px; }
 .blog-feature p:not(.eyebrow) { font-size: 15px; margin-bottom: 18px; }
 .blog-feature .button { width: 100%; }
 .blog-topic-section { margin-top: 32px; }
 .blog-grid { grid-template-columns: minmax(0,1fr); }
 .blog-card > a { padding: 20px 0; }
 .blog-card h3 { font-size: 22px; }
 .blog-card p { font-size: 15px; }
 .blog-help { padding: 22px 20px; gap: 18px; margin-top: 24px; }
 .blog-help h2 { font-size: 24px; }
 .blog-help .button { width: 100%; flex-shrink: 1; }
 .blog-answer { grid-template-columns: minmax(0,1fr); gap: 8px; padding: 18px; margin-bottom: 24px; }
 .blog-answer p { font-size: 15px; }
 .blog-toc nav { grid-template-columns: minmax(0,1fr); }
 .blog-prose { font-size: 16px; line-height: 1.75; }
 .blog-prose h2 { font-size: 24px; }
 .blog-prose section { margin-bottom: 28px; scroll-margin-top: 80px; }
 .blog-prose table, .blog-prose tbody { display: block; width: 100%; }
 .blog-prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 .blog-prose caption { display: block; }
 .blog-prose tbody tr { display: grid; grid-template-columns: minmax(0,1fr); margin-bottom: 16px; border: 1px solid #deded9; border-radius: 6px; overflow: hidden; }
 .blog-prose th, .blog-prose td { display: block; width: auto; padding: 12px 14px; border: 0; font-size: 15px; }
 .blog-prose th:first-child { width: auto; background: #f4f4f2; }
 .blog-prose td + td { border-top: 1px solid #deded9; }
 .blog-prose td::before { content: attr(data-column); display: block; margin-bottom: 4px; font-weight: 700; }
 .blog-article-cta { padding: 20px 18px; }
 .blog-article-cta .button { width: 100%; }
 .blog-teaser { margin-block: 28px; padding-top: 20px; }
 .blog-teaser-links { grid-template-columns: minmax(0,1fr); }
 .blog-teaser-links a { font-size: 16px; padding-block: 16px; }
}
@media (max-height:800px) { .blog-toc { position: static; } }
@media print { .site-header,.site-footer,.mobile-app-nav,.blog-toc,.blog-article-cta,.blog-related { display:none!important; } .blog-reading-layout { display:block; } .blog-main { width:100%; } }