/* Coming-soon placeholder (coming-soon.html): the menu bar + hero fill exactly the
   viewport and the page can't scroll. The demo panel takes the remaining height and
   the demo is sized to fit inside it (width-limited or height-limited, whichever is
   smaller), so nothing is clipped on short screens or phones. */

html:has(body.coming-soon),
body.coming-soon { height: 100%; overflow: hidden; overscroll-behavior: none; }

body.coming-soon {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}
.coming-soon .site-header { flex: none; }

/* "Coming Soon" pill on the right of the menu bar (a label, not a link) */
.soon-pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--cta);
  color: #FFFFFF;
  font: var(--weight-semibold) 14px/1 var(--font-sans);
  white-space: nowrap;
}
.coming-soon main { flex: 1; min-height: 0; display: flex; }

.coming-soon .hero {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 15px 0;
}
.coming-soon .hero__grid {
  flex: 1;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}
.coming-soon .hero__media {
  min-height: 0;
  container-type: size;
}
.coming-soon .hero .hero-demo {
  margin-block: 0;
  width: min(100cqw, 80cqh, 540px);   /* 4:5 demo: as big as fits both ways */
}

/* Phones / stacked layout: copy on top, the panel fills the rest of the screen */
@media (max-width: 820px) {
  .coming-soon .hero { padding: 16px 0; }
  .coming-soon .hero__grid { grid-template-rows: auto minmax(0, 1fr); gap: 20px; }
  .coming-soon .hero__media { aspect-ratio: auto; }
}