/* Flares page. Page structure, steps, facts, FAQ and CTA come from feature-pages.css; this adds the
   hero video (the narrated-video component in hero-video.css), the category grid and a plain list.
   Script: scripts/hero-video.js. */
.gfl-video { margin: 0; min-width: 0; }
.gfl-video figcaption { margin-top: 0.75rem; color: var(--gf-muted); font-size: var(--gf-small); }

.gfl-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.gfl-cats li { padding: 1.5rem; background: var(--gf-panel); border: 1px solid var(--gf-rule); border-radius: var(--gf-radius); }
.gfl-cats b { display: block; margin-bottom: 0.5rem; color: var(--gf-ink); font-size: 1.0625rem; letter-spacing: -0.01em; }
.gfl-cats p { margin: 0; color: var(--gf-muted); font-size: 0.9375rem; }
@media (min-width: 640px) { .gfl-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .gfl-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.gfl-list { margin: 0 0 1.25rem; padding-left: 1.25rem; max-width: 60ch; color: var(--gf-muted); }
.gfl-list li { margin-bottom: 0.5rem; padding-left: 0.25rem; }
.gfl-list li::marker { color: var(--gf-accent); }