/* Home page only: the heading and the menu of tool cards. Also used by 404.html. */

.home { max-width: 980px; margin: 0 auto; padding: 44px 20px 56px; }
.home h1 { font-size: 30px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 8px; text-wrap: balance; }
.home .lede { color: var(--muted); font-size: 16px; max-width: 58ch; margin: 0 0 32px; }
.home .lede a { color: var(--accent-text); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.tool {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: inherit; text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.tool:hover { border-color: var(--cd-blue); transform: translateY(-1px); }
.tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tool h2 { font-size: 18px; line-height: 1.25; letter-spacing: -.01em; margin: 0; }
.tool p { margin: 0; color: var(--muted); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .tool { transition: none; } .tool:hover { transform: none; } }