.blog-hero{padding:96px 0 82px;background:radial-gradient(circle at 85% 20%,var(--brand-soft) 0,rgba(var(--brand-rgb),0) 34%),var(--surface-tint)}
.blog-hero h1{max-width:760px}.blog-hero p:not(.eyebrow){max-width:650px;color:var(--text-secondary);font-size:19px}
.blog-index{padding:88px 0}.blog-index-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.blog-card{display:flex;flex-direction:column;min-height:350px;padding:30px;border:1px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:0 8px 20px rgba(18,28,44,.03);transition:transform .2s,box-shadow .2s}.blog-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(18,28,44,.08)}
.blog-card.featured{grid-column:1/-1;background:linear-gradient(135deg,var(--surface-dark),var(--surface-dark-raised));color:var(--text-on-dark)}.blog-card.featured p,.blog-card.featured .blog-meta{color:var(--text-on-dark-muted)}
.blog-card h2{margin:16px 0 12px;font-size:30px}.blog-card h2 a:hover,.blog-card h3 a:hover{color:var(--success-on-dark)}.blog-card h3{margin:16px 0 11px;font-size:23px;line-height:1.2}.blog-card p{margin-bottom:24px;color:var(--text-secondary);font-size:15px}.blog-meta{margin-top:auto;color:var(--text-muted);font-size:12px}.blog-label{color:var(--brand);font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.featured .blog-label{color:var(--success-on-dark)}.blog-read{display:inline-flex;align-items:center;gap:11px;margin-top:auto;color:var(--brand);font-size:var(--font-size-link);font-weight:var(--font-weight-medium);line-height:1.2}.featured .blog-read{color:var(--success-on-dark)}
.article-shell{padding:75px 0 110px;background:var(--paper)}.article-header{max-width:760px;margin:0 auto 48px}.article-header h1{max-width:none;margin-bottom:20px;font-size:clamp(40px,6vw,68px);letter-spacing:-.05em}.article-dek{max-width:720px;color:var(--text-secondary);font-size:19px}.article-byline{display:flex;gap:18px;align-items:center;margin-top:26px;color:var(--text-muted);font-size:13px}.article-byline span+span{padding-left:18px;border-left:1px solid var(--line)}
.article-body{max-width:760px;margin:0 auto}.article-body h2{margin-top:48px;font-size:30px;letter-spacing:-.035em}.article-body h3{margin-top:30px;font-size:20px}.article-body p,.article-body li{color:var(--text-secondary);font-size:17px;line-height:1.75}.article-body ul,.article-body ol{padding-left:24px}.article-body li{margin:10px 0}.article-body strong{color:var(--text-primary)}.article-cta strong{color:var(--text-on-dark)}
.article-callout{margin:34px 0;padding:24px 26px;border-left:4px solid var(--brand);border-radius:0 12px 12px 0;background:var(--brand-soft);color:var(--text-secondary)}.article-callout p{margin:0;font-size:15px}.article-cta{margin-top:55px;padding:30px;border-radius:16px;background:var(--surface-dark);color:var(--text-on-dark)}.article-cta p{margin:10px 0 20px;color:var(--text-on-dark-muted);font-size:15px}.article-cta .button{background:var(--success-on-dark);color:var(--surface-dark)}.article-disclaimer{margin-top:42px;color:var(--text-muted)!important;font-size:13px!important}.article-nav{display:flex;justify-content:space-between;gap:20px;margin-top:60px;padding-top:25px;border-top:1px solid var(--line);color:var(--brand);font-size:13px;font-weight:800}.article-nav a:last-child{text-align:right}
@media(max-width:700px){.blog-hero{padding:68px 0 60px}.blog-index{padding:60px 0}.blog-index-grid{grid-template-columns:1fr}.blog-card.featured{grid-column:auto}.blog-card{min-height:300px;padding:24px}.article-shell{padding:50px 0 78px}.article-body p,.article-body li{font-size:16px}.article-header h1{font-size:44px}.article-nav{flex-direction:column}.article-nav a:last-child{text-align:left}}

/* Blog headings use the same, more open display tracking as the homepage. */
.blog-hero h1,
.article-header h1 {
  font-family: var(--font-family-base);
  font-size: var(--type-display);
  font-weight: var(--font-weight-heading);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
}
.article-body h2 {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--tracking-heading);
}
.blog-card h2,
.blog-card h3 {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--tracking-heading);
}
@media(max-width:700px){.article-header h1{font-size:48px}}