/* Shared by the GitHub mockups and the Tools page: the whole chapter, heading included, fits one
   screen. Its own scene and pin, so the Tools page needs nothing from the mockup frame. */
.gh-scene { position: relative; height: 420vh; }
.gh-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.ghz { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 2vh; padding: 84px var(--gutter) 3vh; max-width: 1400px; margin: 0 auto; box-sizing: border-box; }
.ghz-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.ghz-head .h { font-size: clamp(30px, 3.6vw, 56px); }
.ghz-head .lede { max-width: 46ch; margin: 0; font-size: 15px; }
.ghz-k { display: block; margin-bottom: 8px; font: 500 12px var(--mono); color: #7a6231; }
.ghz-say { margin: 0; font: 600 clamp(18px, 1.8vw, 24px)/1.2 var(--sans); letter-spacing: -0.02em; min-height: 1.2em; }
.ghz-stage { position: relative; min-height: 0; }
.ghz-note { margin: 0; font: 500 11px var(--mono); color: var(--grey-3); }
.gh-face { display: inline-block; flex: none; width: var(--s); height: var(--s); } .gh-face .agent-persona { width: 100%; height: 100%; }
@media (max-width: 760px) {
  .ghz { padding: 70px 14px 2vh; gap: 1.4vh; }
  .ghz-head { flex-direction: column; align-items: start; gap: 6px; }
  .ghz-head .h { font-size: 28px; }
  .ghz-head .lede { display: none; }
}