.hero { padding: 2.5rem 0 1.5rem; max-width: 60ch; }
.hero h1 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); line-height: 1.15; letter-spacing: -.02em; }
.hero .lede { font-size: 1.15rem; }

.tool-featured { margin-bottom: 1.5rem; }
.tool-list { margin-top: 1rem; }
.elsewhere { margin-top: 2.5rem; }
.link-row { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.link-row a { text-decoration: none; font-weight: 600; }

/* The one line of news above the hero: what shipped, linked to its notes. */
.news-pill {
  display: inline-flex; align-items: center; gap: .55rem; max-width: 100%;
  padding: .3rem .8rem .3rem .3rem; border: 1px solid var(--border-subtle); border-radius: 999px;
  background: var(--surface-card); color: var(--text-primary); text-decoration: none; font-size: .9rem;
  transition: border-color .2s ease;
}
.news-pill:hover { border-color: var(--accent-brand); }
.news-pill__tag {
  flex: none; padding: .1rem .55rem; border-radius: 999px; background: var(--accent-brand); color: var(--on-accent);
  font: 600 .72rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}