/* Research pages only (famous-logos, hero-images, hero demo): loaded after the shared stylesheets so the
   landing page stays inside the 32 KB CSS budget. */
.sample__title { margin: 0; font: var(--type-h3); color: var(--text-emphasis); }
.samples--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.sample--wide .sample__pair img { aspect-ratio: auto; }
.hero-demo { padding-block: 0 var(--section-pad); background: var(--surface-canvas); }
.hero-demo__figure { margin: 0; display: grid; gap: var(--space-3); }
.hero-demo__figure img { width: 100%; height: auto; display: block; max-height: 70vh; object-fit: cover; }
.hero-demo__cap { font: var(--type-caption); color: var(--text-muted); }
.hero-demo__copy { margin-top: var(--space-8); }
.hero-demo__code { margin-top: var(--space-5); white-space: pre-wrap; word-break: break-all; font-size: 13px; }