/* how-it-looks.html only: the demo video, framed like the site's figures.
   Tighter top spacing than other pages, and the video's width is capped by the
   window HEIGHT too, so the whole 16:9 frame (subtitles included, at its
   bottom) fits on a laptop screen without scrolling. */
/* .look is a <div>, not a <section>: Chrome reports an <h1> inside a <section>
   as a deprecation (H1UserAgentFontSizeInSection) if it ever lays it out
   before the stylesheet sizing it applies, as on a cold Lighthouse run. */
.look{padding:clamp(24px,3.5vw,44px) 0 clamp(48px,7vw,88px)}
.look .sub{margin-bottom:26px}
.demo{max-width:min(1100px,calc((100vh - 370px) * 16 / 9 + 36px));min-width:min(100%,320px);margin:0 auto 40px;background:var(--bg-subtle);border-radius:var(--radius-lg);padding:clamp(10px,2vw,18px)}
.demo video{display:block;width:100%;height:auto;border-radius:var(--radius-md);background:#181b21}