/* "Deliver a session on Health Hour", on /volunteer below the form (step 39, DECISIONS.md rounds 38, 55 and 56). It is
   the section that was "Be on the show" on the home page until step 32, without its paragraph and its button.
   .vid-round, .cap and the .sheet rules are as they were in 58ecd0d, but for the sheet's bottom margin, which made
   room for the button. The rest is this page's own layout: the heading across the top, then the video beside the cards.
   These rules are in a file of their own, loaded by /volunteer only, so that no file the home page loads changed in
   step 39. The heading repeats the section heading style of site.css (.screen-top h2), with a gentler middle size so
   that it sits on one line from about 700 px. */
/* The form is not drawn until site.js marks the page (.js-only), a moment after the first paint. Until then the grid
   above holds only the introduction, and this section would sit in the first screen and then be pushed down when the
   form arrives: a layout shift of 0.41 on a desktop screen. So on this page the grid is at least as tall as the first
   screen below the header space (the same sum as .reg's top padding), which keeps this section below the fold
   until the form is in. With the form shown the grid is taller than that already, so nothing above moves. */
.reg-grid { min-height: calc(100vh - (5.5rem + clamp(1.5rem, 4vw, 3rem))); align-content: start; }
.deliver { margin-top: clamp(3rem, 7vw, 5rem); }
.deliver h2 { margin: 0 0 clamp(1.4rem, 3vw, 2.2rem); font-weight: var(--weight-display); font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; }
.deliver-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.vid-round { border: 1px solid rgba(236, 228, 214, 0.14); }
.cap { margin: 0.8rem 0 0; color: var(--cream); }
.sheet { display: grid; gap: 0.6rem; margin: 0; }
.sheet div { padding: 0.9rem 1rem; border-radius: 18px; background: var(--studio-panel); border: 1px solid rgba(192, 225, 160, 0.18); }
.sheet dt { font-weight: 800; font-size: 1.1rem; line-height: 1; text-transform: uppercase; color: var(--glow); }
.sheet dd { margin: 0.35rem 0 0; font-size: 0.95rem; color: var(--on-dark-muted); }
@media (min-width: 560px) { .sheet { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .deliver-grid { grid-template-columns: 1fr 1fr; } }