/* Lab hero: copy on the left, the converging-networks orb on the right (lab-hero.js draws it) */
.mf-hero { position: relative; overflow: hidden; padding: 6.4rem 0 1rem; }
.mf-hero .split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 2.5rem; align-items: center; min-height: min(780px, 88svh); }
.mf-hero .split.solo { grid-template-columns: 1fr; min-height: min(560px, 70svh); }
.mf-hero h1 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(3.6rem, 8.4vw, 7.4rem); line-height: .86; letter-spacing: -.025em; margin: .9rem 0 1.3rem; }
.mf-hero .lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.5; max-width: 34rem; color: var(--text-2); margin: 0 0 1.7rem; }
.mf-hero .lede p { margin: 0; }
.mf-hero .orb { margin: 0; }
.mf-hero .stage { position: relative; aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(circle at 50% 45%, var(--orb-core) 0%, var(--orb-mid) 55%, transparent 71%); }
.mf-hero canvas.bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; border-radius: 50%; }
.mf-hero canvas.bg:active { cursor: grabbing; }
.mf-hero .legend { position: absolute; left: 0; top: .4rem; display: flex; flex-direction: column; gap: .3rem; }
.mf-hero .stage .hud { position: absolute; right: 0; bottom: .4rem; }
.mf-hero .stage .motion { position: absolute; left: 0; bottom: .1rem; }
.mf-hero .neuron canvas.bg { opacity: 0; transition: opacity .8s ease; }
.mf-hero .neuron canvas.bg.ready { opacity: 1; }
.mf-hero .stage .credit { position: absolute; right: 0; bottom: .4rem; text-transform: none; }
.mf-hero .stage .credit span { min-width: 0; color: inherit; display: inline; }
.mf-hero .stage .credit { max-width: calc(100% - 9.5rem); text-align: right; white-space: normal; }   /* wraps before it reaches "Pause motion" */
.mf-hero canvas.bg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.mf-hero .cap { margin: .8rem auto 0; max-width: 32rem; text-align: center; font-size: .78rem; line-height: 1.5; color: var(--dim); }
.mf-hero .cap p { margin: 0; }
.mf-hero .cap strong { color: var(--text); font-weight: 500; }
@media (max-width: 960px) {
  .mf-hero .split { grid-template-columns: 1fr; min-height: 0; gap: 1rem; }
  .mf-hero .orb { order: 2; max-width: 520px; width: 100%; margin: 0 auto; }
}