/* Center the top banner (navigation tabs). */
.md-tabs__list {
  justify-content: center;
}

/* Make the tabs bar a touch lighter than the (dark blue) header — an 8% white
   overlay on top of the primary colour, so it tracks any palette change. */
.md-tabs {
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.08)
  );
}

/* Slimmer tabs bar (default item height is 2.4rem, link margin-top .8rem). */
.md-tabs__item {
  height: 1.9rem;
}
.md-tabs__link {
  margin-top: 0.5rem;
}

/* --- Home hero --- */
.hero-logo {
  max-width: 80%; /* scale down instead of overflowing on narrow screens */
  height: auto;
  position: relative;
  left: 12px; /* optical-centering nudge for the logo's left whitespace */
}
.hero-lead {
  text-align: center;
  font-size: 1.35rem;
  line-height: 1.5;
  margin: 0 auto 1.75rem;
}
.hero-main {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2.5rem;
  font-size: 1.02rem;
  line-height: 1.7;
}
/* orchestration note, below the main idea */
.hero-orch {
  margin-top: 1.25rem;
  color: var(--md-default-fg-color--light);
}
/* installation block: no wider than the framework text above it */
.install {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

/* --- Mobile: keep the hero from overflowing on phones --- */
@media (max-width: 600px) {
  .hero-lead {
    font-size: 1.15rem; /* a touch smaller once the tagline wraps */
  }
  .hero-logo {
    left: 0; /* drop the desktop nudge so it stays centered */
  }
}