html body .blog-section--static { padding-left: var(--pandect-nav-gutter) !important; padding-right: var(--pandect-nav-gutter) !important; overflow: hidden; }
.blog-static-shell { max-width: 1680px; margin: 0 auto; }
.blog-static-header { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 64px; }
html body .blog-static-header .blog-title { margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; }
.blog-see-all { display: inline-flex; align-items: center; gap: 10px; flex: none; color: #121212; font-size: 16px; text-decoration: none; }
html body .blog-section--static .blog-see-all,
html body .blog-section--static .blog-see-all:is(:hover,:focus-visible,:visited,:active) { color: #121212 !important; }
.blog-see-all-square { width: 8px; height: 8px; background: #121212; }
.blog-static-grid { display: grid; grid-template-columns: repeat(3,minmax(0,470px)); justify-content: space-between; gap: 24px; }
.blog-static-card { display: block; min-width: 0; color: #121212; text-decoration: none; }
.blog-static-image { width: 100%; aspect-ratio: 470 / 312; overflow: hidden; border-radius: 7px; }
.blog-static-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease; }
.blog-static-card:hover img { transform: scale(1.035); }
.blog-static-card:focus-visible { outline: 1px solid #121212; outline-offset: 6px; border-radius: 7px; }
.blog-static-copy h3 { margin: 22px 0 14px; font-size: 20px; line-height: 1.25; font-weight: 400; letter-spacing: -.018em; }
.blog-static-copy p { margin: 0; font-size: 16px; line-height: 1.5; color: #797979; }
@media(max-width:900px) { .blog-static-grid { grid-template-columns: 1fr; gap: 40px; } .blog-static-header { margin-bottom: 40px; } }
@media(prefers-reduced-motion:reduce) { .blog-static-image img { transition: none; } }

html body .blog-static-card,
html body .blog-static-card:is(:hover, :focus-visible, :visited, :active),
html body .blog-static-card .blog-static-copy h3,
html body .blog-static-card:is(:hover, :focus-visible, :visited, :active) .blog-static-copy h3 { color: #121212 !important; }

/* Align the single featured article with the FAQ's right column. */
@media (min-width: 901px) {
  .blog-section--static:has(.blog-static-grid > .blog-static-card:only-child) .blog-static-shell {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }
  .blog-section--static:has(.blog-static-grid > .blog-static-card:only-child) .blog-static-header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    min-width: 0;
    margin-bottom: 0;
  }
  html:root body .blog-section--static:has(.blog-static-grid > .blog-static-card:only-child) .blog-static-header .blog-title {
    font-size: clamp(28px, 3vw, 50px) !important;
    white-space: nowrap;
  }
  .blog-section--static:has(.blog-static-grid > .blog-static-card:only-child) .blog-static-grid {
    grid-template-columns: minmax(0, 500px);
    justify-content: start;
    align-items: start;
    min-width: 0;
  }
}

/* The see-all control uses the same top-right placement and spacing as FAQ. */
.blog-section--static .blog-static-shell:has(> .blog-static-see-all) { position: relative; padding-top: 84px; }
html body .blog-section--static .blog-static-see-all { position: absolute; top: 0; right: 0; }
@media (max-width: 900px) { .blog-section--static .blog-static-shell:has(> .blog-static-see-all) { padding-top: 60px; } }