/* Landing-page hero. The `.hero` class is applied via a <div> wrapper in
 * src/index.md with `markdown` passthrough so the inner markdown still
 * renders. Keep this file small and purely cosmetic. */

.hero {
  padding: 3rem 0 2rem;
  text-align: center;
  max-width: 44rem;
  margin: 0 auto;
}

.hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.hero h3 {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
  margin: 0 0 2rem;
}

.hero .md-button + .md-button {
  margin-left: 0.5rem;
}

/* Grid cards: tighten the vertical rhythm on the landing page. */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid.cards > .card {
  border-radius: 12px;
}

/* Make mermaid diagrams inherit the page background so dark mode looks
 * intentional rather than a white rectangle. */
.mermaid {
  background: transparent !important;
}