/* Public blog: cards on the landing page and index, and the post layout. */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{display:flex;flex-direction:column;gap:12px;padding:26px 24px;background:#fff;border:1px solid #e5e5e9;border-radius:16px;transition:border-color .15s,box-shadow .15s}
.blog-card:hover{border-color:#c9d0d5;box-shadow:0 12px 30px #24344810}
.blog-card h2,.blog-card h3{font-size:20px;line-height:1.25;letter-spacing:-.5px;margin:0;font-weight:650}
.blog-card p{font-size:14px;line-height:1.6;color:#5d6c79;margin:0;flex:1}
.blog-category{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#b71932}
.blog-meta{font-size:12px;color:#757a82}
.blog-index{margin:34px 0 20px}
.launch-page section.blog-teaser{padding:44px 0}
.blog-teaser-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px}
.launch-page .blog-teaser h2{font-size:36px;line-height:1.1;letter-spacing:-1.3px;margin:14px 0 0}
.launch-page .blog-teaser .text-link{margin:0}
.launch-page .blog-card p{color:#5d6c79}

.blog-post{max-width:720px;margin:0 auto;padding:48px 0 20px}
.blog-post header .breadcrumbs{margin-bottom:22px}
.blog-post header .breadcrumbs a{text-decoration:underline;text-decoration-color:#c9d0d5;text-underline-offset:4px}
.blog-post h1{font-size:clamp(32px,4.4vw,48px);letter-spacing:-1.8px;margin:14px 0 16px}
.blog-post header .blog-meta{margin:0 0 28px}
.blog-post .example-notice{margin-bottom:34px}
.blog-post h2{font-size:25px;letter-spacing:-.7px;margin:42px 0 12px}
.blog-post p,.blog-post li{font-size:17px;line-height:1.7;color:#3a4652}
.blog-post .blog-lead{font-size:20px;line-height:1.55;color:var(--ink)}
.blog-post ul{padding-left:22px}
.blog-post li{margin:8px 0}
.blog-scenario{border-left:3px solid var(--red);background:#fff;padding:18px 22px;margin:26px 0;border-radius:0 10px 10px 0}
.blog-scenario strong{display:block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--red);margin-bottom:6px}
.blog-scenario p{margin:0;font-size:16px}
.blog-figures{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}
.blog-figures div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.blog-figures strong{display:block;font-size:30px;letter-spacing:-1px;line-height:1.1}
.blog-figures span{font-size:12px;color:var(--muted)}
.blog-chart{margin:30px 0}
.blog-chart svg{display:block;width:100%;max-width:600px;margin:22px auto 10px;overflow:visible;font:13px system-ui,-apple-system,sans-serif;fill:var(--muted)}
.blog-chart .chart-rule{stroke:var(--line);fill:none}
.blog-chart .chart-base{stroke:#9aa5ad;fill:none}
.blog-chart .chart-value{font-weight:700;fill:var(--ink)}
.blog-chart .chart-label{fill:var(--ink)}
.blog-chart [data-mark]{transition:opacity .12s}
.blog-chart svg:hover [data-mark]{opacity:.55}
.blog-chart svg [data-mark]:hover{opacity:1}
.blog-legend{display:flex;gap:20px;flex-wrap:wrap;padding:16px 26px 0;font-size:12px;color:var(--muted)}
.blog-legend span{display:inline-flex;align-items:center;gap:7px}
.blog-legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.blog-chart .chart-explanation{font-size:13px;line-height:1.6;color:var(--muted)}
.blog-chart details{padding:0 26px 20px;font-size:13px}
.blog-chart summary{cursor:pointer;font-weight:650;min-height:44px;display:flex;align-items:center}
.blog-chart td,.blog-chart th{white-space:normal}
.blog-more{padding:44px 0 10px;border-top:1px solid var(--line);margin-top:40px}
.blog-more h2{font-size:25px;letter-spacing:-.7px;margin:0 0 22px}
.blog-more .blog-grid{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.blog-grid,.blog-more .blog-grid{grid-template-columns:1fr;gap:14px}.blog-card{padding:22px 20px}.blog-teaser-head{flex-direction:column;align-items:flex-start;gap:6px}.launch-page .blog-teaser h2{font-size:30px}.launch-page section.blog-teaser{padding:30px 0}.blog-post{padding:30px 0 10px}.blog-post p,.blog-post li{font-size:16px}.blog-post .blog-lead{font-size:18px}.blog-figures{grid-template-columns:1fr}.blog-legend,.blog-chart details{padding-inline:20px}}
@media(prefers-reduced-motion:reduce){.blog-card,.blog-chart [data-mark]{transition:none}}