/* Copy and 3D scene share one uninterrupted blue background. */
#minebox-mockup .mb-hero {
  padding: 0;
  gap: 0;
  align-items: center;
  background: #0E1259;
  color: #F3F4FF;
}
#minebox-mockup .mb-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(to right, #8EBBE814 1px, transparent 1px), linear-gradient(to bottom, #8EBBE814 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center;
}
#minebox-mockup .mb-hero-copy { padding-block: 54px; }
#minebox-mockup .mb-hero-copy h1 { color: #F3F4FF; }
/* The brand opens the story inside the blue hero, without a separate header. */
#minebox-mockup .mb-hero-logo {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  color: #F3F4FF;
}
#minebox-mockup .mb-hero-logo .mb-wordmark { color: #F3F4FF; }
#minebox-mockup .mb-hero-logo .mb-logo-caption { color: #DADDF0; }
#minebox-mockup .mb-hero-logo .mb-logo-caption strong { color: #F3F4FF; }

#minebox-mockup .mb-hero-copy .mb-eyebrow,
#minebox-mockup .mb-hero-copy .mb-index { color: #8EBBE8; }
#minebox-mockup .mb-hero-copy .mb-intro { color: #DADDF0; }
#minebox-mockup .mb-hero-copy .mb-hero-explore { color: #F3F4FF; }
#minebox-mockup .mb-hero > .mb-viewer {
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#minebox-mockup .mb-hero .mb3d:not(.mb3d-is-fullscreen) .mb3d-stage {
  height: clamp(510px, 43vw, 688px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#minebox-mockup .mb-hero .mb3d:not(.mb3d-is-fullscreen) .mb3d-vignette,
#minebox-mockup .mb-hero .mb3d:not(.mb3d-is-fullscreen) .mb3d-corner { display: none; }

@media (max-width: 820px) {
  #minebox-mockup .mb-hero-copy { padding: 42px 5.5%; }
  #minebox-mockup .mb-hero > .mb-viewer {
    padding: 18px;
  }
  #minebox-mockup .mb-hero .mb3d:not(.mb3d-is-fullscreen) .mb3d-stage { height: 510px; }
}
@media (max-width: 650px) {
  #minebox-mockup .mb-hero-copy { padding: 34px 6% 36px; }
  #minebox-mockup .mb-hero > .mb-viewer { padding: 12px 8px; }
  #minebox-mockup .mb-hero .mb3d:not(.mb3d-is-fullscreen) .mb3d-stage { height: clamp(430px, 105vw, 560px); }
}