/* Move four card sections halfway toward the actual last line of text, retaining the vertical space reserved by
   Hermes for voice transcript and activation. Do not shrink .gridspace: its
   full height prevents Hermes controls from covering the card row. */
@media(min-width:781px) {
  .page[data-view="home"] #cards.home-grid,
  .page[data-view="levels"] #cards.complete-levels,
  .page[data-view="about"] #cards.about-grid,
  .page[data-view="agents"] #cards.agent-grid {
    margin-top: -146px !important;
  }
  /* Speech controls must clear newly raised cards and the Hermes label. */
  .page[data-view="home"] #hermes-entry,
  .page[data-view="levels"] #hermes-entry,
  .page[data-view="about"] #hermes-entry,
  .page[data-view="agents"] #hermes-entry,
  .page[data-view="home"] #hermes-entry.is-open,
  .page[data-view="levels"] #hermes-entry.is-open,
  .page[data-view="about"] #hermes-entry.is-open,
  .page[data-view="agents"] #hermes-entry.is-open {
    top: 630px !important;
  }
  .page[data-view="home"] #hermes-voice-transcript,
  .page[data-view="levels"] #hermes-voice-transcript,
  .page[data-view="about"] #hermes-voice-transcript,
  .page[data-view="agents"] #hermes-voice-transcript {
    top: 622px;
  }
}
/* At tablet/mobile size Hermes sits between text and cards in normal flow.
   Keep the original spacing and order, with no negative margins. */
@media(max-width:780px) {
  .page[data-view="home"] #cards.home-grid,
  .page[data-view="levels"] #cards.complete-levels,
  .page[data-view="about"] #cards.about-grid,
  .page[data-view="agents"] #cards.agent-grid {
    margin-top: 0 !important;
  }
}