/* Blog templates (site/blog/). Shared article, FAQ, table, related-links,
 * CTA and browse-row rules live in design.css. This file only holds what is
 * specific to the blog. It loads before design.css (sync-nav.py appends
 * design.css at the end of <head>), so every selector is anchored on
 * .land-main.blog-index to win the cascade without !important. */

/* Index hero: left-aligned and oversized like the landing pages, instead of a
 * centred block whose lede wraps into five centred lines on a phone. */
.land-main.blog-index > .page-hero { text-align:left; padding:88px 0 8px; }
.land-main.blog-index > .page-hero h1 { font-size:clamp(44px,6.4vw,84px); line-height:1; letter-spacing:-.045em; font-weight:700; margin:0; max-width:none; }
.land-main.blog-index > .page-hero p { margin:22px 0 0; max-width:62ch; font-size:clamp(16px,1.5vw,18.5px); line-height:1.65; color:var(--text-dim); }

@media (max-width:680px) {
  .land-main.blog-index > .page-hero { padding:48px 0 0; }
}

/* Table wrappers scroll (overflow-x:auto) but are not positioned, so the
 * absolutely positioned .sr-only text inside td.good escaped the scroll box
 * and widened the whole page to 605 px at 375. Positioning the wrapper keeps
 * it inside. Blog-scoped stopgap; the shared fix belongs in design.css. */
.article .bench-table, .article .compare-table { position:relative; }