body.home-page { background: #f9fafb; color: #111827; }
.home-page .site-header, .home-page footer { background: #f9fafb; border-color: #e5e7eb; }
.home-page .site-header { padding: 0 40px; }
/* Catalog pages need this gap for the bordered controls row below; the home page has none. */
.home-page .header-main { padding-bottom: 10px; }
.home-page footer a { color: #111827; }
.home-hero, .home-tools { max-width: 1380px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
/* Label, tagline and status share one row, so the tagline costs no vertical space. */
.home-hero { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 6px; padding-top: 10px; padding-bottom: 14px; }
/* The chip separates the label from the tagline without spending a line: its padded box measures
   the same as the 13px tagline's line box, so the hero's height is unchanged. */
.home-hero h1 { margin: 0; padding: 3px 8px; border-radius: 4px; background: #111827; color: #fff; font: 500 10px 'IBM Plex Mono', monospace; letter-spacing: 1px; }
.home-hero > p { margin: 0; color: #4b5563; font-size: 13px; line-height: 1.5; }
/* .catalog-status is a two-row grid elsewhere; in the hero it runs on one line so the count and
   the build time sit beside each other instead of driving the hero's height. */
.home-hero > .catalog-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.home-hero > .catalog-status strong { color: var(--color-text); }
.home-hero > .catalog-status small { padding-left: 10px; border-left: 1px solid var(--color-line); }
/* SELECT sits right under the hero, so it needs less lead-in than DEPLOY (see .home-ops). */
.home-tools { padding-top: 16px; padding-bottom: 0; }
/* Last section on the page, so it carries the same bottom spacing the tool grids used to. */
.home-whats-new { max-width: 1380px; margin: 0 auto; padding: 24px 40px 48px; }
.whats-new-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; }
.whats-new-list li { background: #fff; }
.whats-new-list li + li { border-top: 1px solid #e5e7eb; }
.whats-new-list a { display: flex; align-items: baseline; gap: 16px; padding: 14px 20px; text-decoration: none; color: #111827; transition: background .15s; }
.whats-new-list a:hover { background: #eff6ff; }
.whats-new-list time { flex-shrink: 0; font: 12px 'IBM Plex Mono', monospace; color: #9ca3af; min-width: 90px; }
.whats-new-list span { font-size: 14px; line-height: 1.5; }
.whats-new-loading, .whats-new-empty { padding: 14px 20px; font-size: 14px; color: #9ca3af; font: 12px 'IBM Plex Mono', monospace; }
.home-section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 20px; }
/* The section label is the h2 itself, so .eyebrow carries the type and no h2 rule is needed. */
.home-section-heading .eyebrow { margin: 0; }
.tool-grid { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 1px; background: #e5e7eb; border: 1px solid #e5e7eb; }
.tool-card { grid-column: span 6; }
/* No rule between SELECT and DEPLOY; just enough padding to keep the DEPLOY label off the grid
   above it. padding-bottom carries the spacing .home-tools no longer provides, ahead of WHAT'S NEW. */
.home-ops { padding-top: 24px; padding-bottom: 40px; }
.tool-card {  display: flex; flex-direction: column; min-height: 270px; padding: 22px; background: #fff; color: #111827; text-decoration: none; transition: background .15s; }
.tool-card:hover { background: #eff6ff; }
.tool-card p { margin: 0; color: #9ca3af; font: 11px 'IBM Plex Mono', monospace; }
.tool-card-image { width: 100%; height: 84px; margin-top: 16px; object-fit: cover; border: 1px solid #e5e7eb; border-radius: 6px; }
.tool-card h3 { margin: 16px 0 12px; font-size: 26px; letter-spacing: -.05em; }
.tool-card span { color: #6b7280; font-size: 13px; line-height: 1.55; }
.tool-card b { margin-top: auto; padding-top: 24px; color: #2563eb; font-size: 12px; }
@media (max-width: 900px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } .tool-card { grid-column: auto; } }
@media (max-width: 720px) { .home-page .site-header, .home-hero, .home-tools { padding-left: 20px; padding-right: 20px; } .home-whats-new { padding-left: 20px; padding-right: 20px; } .home-hero { padding-top: 20px; padding-bottom: 20px; } .home-hero > .catalog-status { width: 100%; margin-left: 0; margin-top: 6px; text-align: left; justify-content: flex-start; } .home-hero > .catalog-status div { justify-content: flex-start; } .tool-grid { grid-template-columns: 1fr; } .tool-card { min-height: 220px; } .whats-new-list a { flex-direction: column; gap: 4px; } .whats-new-list time { min-width: 0; } }