/* ---------------------------------------------------------------------------
   Header logo — render as a plain white mark so it's visible against the
   purple header bar (the source logo is itself purple/dark blue and
   otherwise blends in).
   --------------------------------------------------------------------------- */
.md-header .md-logo img {
  filter: brightness(0) invert(1);
}

/* Material's default header spacing leaves a wide (~32px) gap between the
   logo mark and the site title; tighten it for a more integrated look.
   Matches [dir=ltr] .md-header__title's specificity so this actually wins. */
.md-header .md-header__title {
  margin-left: 0.4rem;
}

/* ---------------------------------------------------------------------------
   Landing page hero
   --------------------------------------------------------------------------- */
.hero {
  text-align: center;
  max-width: 44rem;
  margin: 2.5rem auto 3rem;
}

.hero img.hero-logo {
  display: block;
  width: 180px;
  height: auto;
  margin: 0 auto 0.75rem;
}

.hero h1 {
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.15;
  margin: 0 0 0.6rem;
  color: var(--md-default-fg-color);
}

/* Tagline (first bold paragraph under the title). */
.hero > p:first-of-type {
  font-size: 1.05rem;
  color: var(--md-default-fg-color--light);
  margin: 0 auto 1.4rem;
  max-width: 38rem;
}

/* Badge row: keep shields tight and centered. */
.hero p img {
  display: inline-block;
  margin: 0.15rem 0.2rem;
}

/* Call-to-action buttons. */
.hero .md-button {
  margin: 0.4rem 0.3rem 0;
}

/* Hide the auto-generated (empty) page title on the home page so the hero
   heading is the only H1. */
.md-content__button {
  display: none;
}

/* ---------------------------------------------------------------------------
   Feature card grid — a little more breathing room than the default.
   --------------------------------------------------------------------------- */
.md-typeset .grid.cards > ul > li {
  border-radius: 0.5rem;
  transition: border-color 125ms, box-shadow 125ms;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.05);
}