.blog-page,.support-page{background:#f1f5f8}
.blog-main,.support-main{padding-bottom:80px}
.blog-container{max-width:1440px}
.blog-breadcrumbs{display:flex;flex-wrap:wrap;gap:10px 14px;padding-block:30px;font-size:.875rem;color:var(--muted)}
.blog-breadcrumbs a{color:var(--ink);border-bottom:1px solid var(--line)}
.blog-heading{padding:14px 0 42px;margin-bottom:0;border-bottom:1px solid var(--line)}
.blog-heading h1,.article-header h1,.missing-page h1{font-family:var(--display);font-synthesis:none;font-weight:400;letter-spacing:-.025em;font-size:clamp(2.4rem,4.8vw,4.8rem);line-height:1.22;max-width:20ch;margin-top:28px}
.blog-heading h1{font-size:clamp(2.5rem,4.3vw,4.4rem);margin-top:22px;max-width:25ch}
.blog-heading>p:last-child{margin-top:22px;max-width:66ch;font-size:1.125rem}
.blog-controls{padding-block:28px 12px}
.blog-tabs{display:flex;gap:8px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.blog-tabs button{padding:12px 20px 15px;border:0;border-bottom:2px solid transparent;background:transparent;font-size:1.125rem;min-height:48px;color:var(--muted)}
.blog-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.blog-tabs button:hover:not(:disabled){color:var(--accent)}
.blog-tabs button:disabled{cursor:default}
.blog-topic-cloud{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.blog-topic{display:inline-flex;gap:10px;align-items:center;min-height:44px;border:1px solid var(--line);border-radius:999px;background:#fff;padding:9px 16px;font-size:.9375rem;line-height:1.4;transition:background-color 160ms ease,border-color 160ms ease}
.blog-topic-count{font-size:.8125rem;font-variant-numeric:tabular-nums;opacity:.75}
.blog-topic[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.blog-topic:hover:not(:disabled){border-color:var(--accent)}
.blog-topic:disabled{cursor:default}
.blog-results-note{font-size:.875rem;color:var(--muted);min-height:1.6em;margin-block:12px 18px}
.blog-results-note:empty{min-height:0;margin-block:12px}
.blog-empty{padding:48px;background:white;border-radius:24px}
.blog-empty h2{font:400 2rem/1.3 var(--display);margin-bottom:18px}
.blog-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.blog-card{min-width:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform 220ms ease,border-color 220ms ease,box-shadow 220ms ease}
.blog-card-cover{aspect-ratio:16/9;overflow:hidden;background:#d4e5f3}
.blog-card-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 350ms ease}
.blog-type-cover{padding:clamp(22px,2.4vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:20px;background:linear-gradient(125deg,#c4dced,#e8f2f9);color:var(--ink)}
.blog-type-cover>span{font-size:.8125rem;letter-spacing:.02em}
.blog-type-cover>strong{font:400 clamp(1.8rem,2.6vw,2.8rem)/1.2 var(--display);letter-spacing:-.025em;max-width:15ch}
.blog-card:nth-child(3n+2) .blog-type-cover{background:linear-gradient(125deg,#244966,#16324a);color:#fff}
.blog-card:nth-child(3n+3) .blog-type-cover{background:linear-gradient(125deg,#78a9d7,#abcce8)}
.blog-card-content{padding:26px;display:flex;flex:1;flex-direction:column;gap:18px}
.blog-card h2{font:500 clamp(1.35rem,1.75vw,1.7rem)/1.4 Onest,Arial,sans-serif;letter-spacing:-.025em;transition:color 180ms ease;overflow-wrap:anywhere}
.blog-card-content>p{color:var(--muted);font-size:1rem;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-meta{display:flex;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;font-size:.8125rem;color:var(--muted)}
.blog-card-stats{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:auto;padding-top:16px;color:var(--muted)}
.blog-stat{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.blog-stat svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5;flex:none}
.blog-card-arrow{margin-left:auto;font-size:1.5rem;color:var(--accent);transition:transform 220ms ease}
.blog-card:focus-visible{border-color:var(--accent);outline-offset:4px}
@media(hover:hover){.blog-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 16px 35px rgba(22,50,74,.09)}.blog-card:hover h2{color:var(--accent)}.blog-card:hover img{transform:scale(1.04)}.blog-card:hover .blog-card-arrow{transform:translate(2px,-2px)}}
.blog-card[hidden],.blog-empty[hidden],.article-reading-progress[hidden]{display:none}
.blog-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.blog-pagination{display:flex;justify-content:space-between;gap:24px;margin-top:32px;min-height:44px;align-items:center}
.article-header{padding:clamp(30px,4.5vw,64px);border-radius:28px;background:var(--blue);margin-bottom:52px}
.article-header h1{max-width:24ch;margin:0 0 28px}
.article-excerpt{font-size:1.125rem;line-height:1.7;max-width:65ch}
.article-meta{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:.875rem;margin-top:32px}
.article-topics{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.article-topics a{border:1px solid rgba(22,50,74,.3);border-radius:999px;padding:8px 14px;min-height:44px;font-size:.875rem}
.article-topics:empty{display:none}
.article-cover{border-radius:24px;overflow:hidden;margin-bottom:44px}
.article-cover img{display:block;width:100%;height:auto;max-height:650px;object-fit:cover}
.article-reading-progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:60;background:rgba(35,100,162,.15);pointer-events:none}
.article-reading-progress>span{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left center}
.blog-article .nav-progress{display:none}
.article-layout-blog{display:grid;grid-template-columns:minmax(0,8fr) minmax(220px,3fr);gap:7%;align-items:start}
.article-body{max-width:76ch;font-size:1.125rem;line-height:1.85;min-width:0;overflow-wrap:anywhere}
.article-body>:first-child{margin-top:0}
.article-body p,.article-body ul,.article-body ol,.article-body blockquote,.article-body pre{margin-block:0 26px}
.article-body h2{font:400 clamp(1.8rem,3vw,2.7rem)/1.3 var(--display);margin:48px 0 24px;letter-spacing:-.02em}
.article-body h3,.article-body h4,.article-body h5,.article-body h6{font:500 1.375rem/1.5 Onest,Arial,sans-serif;margin:32px 0 18px}
.article-body a{text-decoration:underline;text-underline-offset:4px;color:var(--accent)}
.article-body strong{font-weight:500}
.article-body li+li{margin-top:10px}
.article-body blockquote{padding:18px 24px;border-left:3px solid var(--accent);background:white;border-radius:0 16px 16px 0}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body pre{padding:22px;background:#e1eaf2;border-radius:14px;overflow-x:auto;font-size:.9375rem;line-height:1.6;white-space:pre-wrap}
.article-body code{font-family:ui-monospace,monospace;font-size:.9em}
.article-body hr{border:0;border-top:1px solid var(--line);margin:36px 0}
.article-aside-blog{position:sticky;top:calc(var(--nav) + 28px);display:grid;gap:18px}
.article-side-card{padding:28px;background:white;border-radius:22px;min-width:0}
.article-side-card p{font-size:.875rem;color:var(--muted);margin-bottom:16px}
.article-side-card h2{font-size:1.25rem;line-height:1.45;margin-bottom:20px}
.article-side-card .line-link{width:100%;font-size:.9375rem;gap:16px}
.missing-page{position:relative;margin-top:48px;padding:clamp(30px,5vw,80px);background:var(--blue);border-radius:28px}
.missing-page h1{max-width:15ch}
.missing-page>p:not(.eyebrow){max-width:50ch;font-size:1.125rem;margin-top:28px}
.support-actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px 32px;margin-top:38px}
.missing-code{display:block;margin-top:48px;font:400 clamp(3rem,8vw,8rem)/1 var(--display);color:var(--ink);opacity:.45}
@media(max-width:1080px){.blog-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-type-cover>strong{font-size:clamp(2rem,3.6vw,3rem)}}
@media(max-width:900px){.article-layout-blog{grid-template-columns:minmax(0,1fr)}.article-aside-blog{position:static;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:36px}}
@media(max-width:620px){.blog-main,.support-main{padding-bottom:48px}.blog-container{width:calc(100% - 28px)}.blog-heading{padding:8px 10px 30px}.article-header{padding:30px 24px;border-radius:22px}.blog-heading h1,.article-header h1,.missing-page h1{font-size:clamp(2.1rem,8vw,3rem)}.blog-cards{grid-template-columns:minmax(0,1fr);gap:20px}.blog-card-content{padding:24px}.blog-type-cover{padding:28px}.blog-type-cover>strong{font-size:2.4rem}.blog-empty{padding:30px 24px}.article-header{margin-bottom:36px}.article-body{font-size:1rem;line-height:1.85;padding-inline:8px}.article-aside-blog{grid-template-columns:minmax(0,1fr)}.article-meta{gap:10px 20px}.article-excerpt{font-size:1rem}.missing-page{margin-top:24px;padding:30px 24px}.support-actions{align-items:stretch;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.blog-card,.blog-card img,.blog-card h2,.blog-card-arrow,.blog-topic{transition:none}.blog-card:hover,.blog-card:hover img,.blog-card:hover .blog-card-arrow{transform:none}}

.article-figure{margin:32px auto;max-width:420px;width:100%}
.article-figure img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--line)}
.article-figure figcaption{margin-top:12px;font-size:.875rem;line-height:1.6;color:var(--muted)}

/* Compact editorial layout; images share their section with flowing text. */
.blog-cards{grid-template-columns:repeat(3,minmax(0,360px));gap:22px}
.blog-card-content{padding:20px;gap:14px}
.blog-card h2{font-size:1.25rem;line-height:1.4}
.blog-card-content>p{-webkit-line-clamp:2;font-size:.9375rem}
.blog-card-stats{padding-top:8px;gap:14px}
.article-header{padding:32px 40px;margin-bottom:36px;border-radius:24px}
.article-header h1{font-size:clamp(2rem,3.1vw,3.15rem);max-width:36ch;line-height:1.25;margin-bottom:18px}
.article-excerpt{font-size:1rem;max-width:80ch;line-height:1.65}
.article-topics{margin-bottom:16px}
.article-meta{margin-top:20px;gap:10px 22px}
.article-layout-blog{grid-template-columns:minmax(0,1fr) 220px;gap:40px}
.article-body{max-width:none}
.article-aside-blog{gap:12px}
.article-side-card{padding:18px;border-radius:16px}
.article-side-card p{margin-bottom:10px}
.article-side-card h2{font-size:1.0625rem;margin-bottom:12px}
.article-side-card .line-link,.article-aside-blog>.line-link{font-size:.875rem;min-height:40px}
.article-illustrated{display:flow-root}
.article-illustrated>.article-figure{float:right;width:260px;max-width:36%;margin:4px 0 24px 28px}
.article-figure figcaption{font-size:.875rem;line-height:1.45}
@media(max-width:1080px){.blog-cards{grid-template-columns:repeat(2,minmax(0,360px))}.article-layout-blog{grid-template-columns:minmax(0,1fr) 190px;gap:28px}.article-illustrated>.article-figure{width:230px;margin-left:22px}}
@media(max-width:900px){.article-layout-blog{grid-template-columns:minmax(0,1fr)}.article-aside-blog{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}.article-illustrated>.article-figure{width:260px}}
@media(max-width:620px){.blog-cards{grid-template-columns:minmax(0,360px)}.article-header{padding:24px 22px}.article-header h1{font-size:clamp(1.85rem,6.5vw,2.4rem)}.article-illustrated{display:flex;flex-direction:column}.article-illustrated>.article-figure{float:none;order:1;width:260px;max-width:100%;margin:4px auto 24px}.article-aside-blog{grid-template-columns:minmax(0,1fr)}.blog-card-content{padding:20px}}