/* stage: the key moment fills a full-width band. The name sits centered and small above it, then the
   promise, then the band. For games, one-input tools, and anything whose result is the hook. The theme
   button keeps its own cell, so the bar never wraps it onto a second line on a phone. Link after
   identity.css. */
html[data-layout="stage"] .site-header { border-bottom: 0; }
html[data-layout="stage"] .site-header .container {
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "nav brand tools";
  align-items: center; gap: var(--s2) var(--s3); min-height: 0; padding-block: var(--s3);
}
html[data-layout="stage"] .site-header .brand { grid-area: brand; justify-self: center; }
html[data-layout="stage"] .site-header nav { grid-area: nav; margin: 0; }
html[data-layout="stage"] .site-header .icon-btn { grid-area: tools; justify-self: end; margin: 0; }
@media (max-width: 560px) {
  html[data-layout="stage"] .site-header .container { grid-template-columns: 2.75rem 1fr 2.75rem; grid-template-areas: ". brand tools" "nav nav nav"; }
  html[data-layout="stage"] .site-header nav { justify-content: center; }
}
html[data-layout="stage"] .hero { padding-block: var(--s3) var(--s5); }
html[data-layout="stage"] .hero .container { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; gap: var(--s2); }
html[data-layout="stage"] .hero-title { font-size: var(--step-3); }
html[data-layout="stage"] .promise { margin: 0 auto; }
html[data-layout="stage"] .stage { background: var(--brand); color: var(--brand-ink); padding-block: var(--s6); }
html[data-layout="stage"] .stage > .container { display: grid; gap: var(--s5); justify-items: center; }
html[data-layout="stage"] .stage-sheet { width: 100%; max-width: 40rem; padding: var(--s5); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-3); }
html[data-layout="stage"] .stage .game { max-width: none; }