/* The lab hero (the funnel of checks). Owned by the hero; the rest of the page is in lab.css. */
.lab-hero { background: none; }                                   /* flat paper: the funnel carries its own tone */
.lab-hero .stage { position: absolute; inset: 0; }
.funnel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.funnel-note { margin: 14px 0 0; font: 10.5px/1.5 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.funnel-note b { font: 600 13px/1 var(--mono); letter-spacing: 0; color: var(--ink-2); }

/* the three numbers (k2d labels): a quiet figure over a mono line */
.lab-hero .k2d-label { font-size: 10.5px; letter-spacing: .14em; color: var(--muted); }
.lab-hero .k2d-label b { font-size: 24px; margin-bottom: 2px; color: var(--ink); }
.lab-hero .k2d-label.lit b { font-size: 30px; color: var(--ok-ink); }
.lab-hero .k2d-label.small { font-size: 9px; letter-spacing: .08em; white-space: normal; max-width: 30vw; line-height: 1.3; }
.lab-hero .k2d-label.small b { font-size: 18px; }
.lab-hero .k2d-label.small.lit b { font-size: 20px; }

/* --solo: 1 tells the funnel nothing sits beside it, so it centres itself with its rows and labels */
:root[data-thumb] .lab-hero .stage { --solo: 1; }
@media (max-width: 960px) { .lab-hero .stage { --solo: 1; } }
@media (min-width: 641px) and (max-width: 960px) {              /* too narrow for the title beside the funnel: stack, as on phones */
  .lab-hero { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .lab-hero .hero-text { position: static; max-width: 640px; padding: 30px clamp(16px, 4.5vw, 72px) 0; pointer-events: auto; }
  .lab-hero .stage { position: relative; order: 1; height: 450px; }
}
@media (max-width: 640px) {
  .lab-hero .stage { position: relative; height: 400px; }
}

/* signal only: nothing under 11px */
:root[data-palette="signal"] :is(.funnel-note, .lab-hero .k2d-label, .lab-hero .k2d-label.small) { font-size: 11px; }