/* Left-nav section headers: render in the header's primary color so the
   grouping (Concepts, Authoring, Reference, …) stands out from the leaf
   links beneath it. !important is needed to beat Material's own
   higher-specificity `.md-nav--primary .md-nav__item--section` rule. */
.md-nav__item--section > .md-nav__link {
  color: var(--md-primary-fg-color) !important;
  font-weight: 700;
}

/* Homepage live-deck embed: a 16:9 frame holding the interactive hero
   deck built into live/hero/. The iframe fills the aspect-ratio box; its
   own src is lazy-loaded (see index.md) so it stays off first paint. */
.live-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1.2rem 0 0.6rem;
}
.live-embed iframe {
  width: 100%;
  height: 100%;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
}

/* Call-to-action row beneath the embed (full-deck + view-source). */
.live-embed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}