landing: add product screenshots — hero shot, feature thumbnails, lightbox

Five PNGs at app/static/images/ (renamed from screenshot dumps):
- dashboard.png         — full dashboard hero shot, sits below the hero CTAs
- news-feed.png         — feature-card thumbnail: auto-tagged news feed
- indicators-read.png   — feature-card thumbnail: per-group AI commentary
- strategic-log.png     — feature-card thumbnail: hourly strategic log text
- chat-with-log.png     — "More views" gallery: ask follow-ups against a log

Every screenshot is a <button class="shot"> with data-full + data-caption;
click opens an HTML5 <dialog>-based lightbox. <dialog> handles focus trap,
ESC-to-close, inert background; the backdrop click closes too. Images use
loading="lazy" so the lightbox-only ones don't block first paint.

CSS appended to cassandra.css: .shot, .shot-hero, .shots-grid, .shot__caption,
and .shot-modal (+ ::backdrop). All colours pull from the existing palette
vars so light and dark themes stay coherent.

Total image weight: ~950 KB across all five — acceptable for a marketing
landing page with lazy-loaded thumbnails.

app/static/css/cassandra.css

@@ -1724,3 +1724,150 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); }
   vertical-align: middle;
   user-select: none;
 }
+
+
+/* -----------------------------------------------------------------------------
+   Landing-page screenshots: hero shot, thumbnails inside feature cards, gallery
+   strip, and a <dialog>-based lightbox. See app/templates/landing.html. */
+
+/* All clickable screenshots are <button>s — reset the default chrome so they
+   read as image cards, not form controls. */
+.shot {
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+  border: 1px solid var(--border);
+  padding: 0;
+  margin: 0;
+  display: block;
+  width: 100%;
+  cursor: zoom-in;
+  border-radius: 4px;
+  overflow: hidden;
+  transition: border-color 120ms ease, transform 120ms ease;
+  position: relative;
+}
+.shot:hover,
+.shot:focus-visible {
+  border-color: var(--accent);
+  outline: none;
+}
+.shot:focus-visible {
+  box-shadow: 0 0 0 2px var(--accent);
+}
+.shot img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+/* Hero screenshot — sits just below the headline CTAs, full landing width. */
+.shot-hero {
+  max-width: 960px;
+  margin: 0 auto 56px;
+  padding: 0 24px;
+}
+.shot--hero .shot__zoom {
+  position: absolute;
+  bottom: 10px;
+  right: 12px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--bg);
+  background: var(--accent);
+  padding: 4px 9px;
+  border-radius: 3px;
+  opacity: 0.85;
+  pointer-events: none;
+}
+
+/* Thumbnail tucked at the bottom of each feature card. */
+.feature-card__shot {
+  margin-top: 16px;
+}
+.feature-card__shot img {
+  max-height: 200px;
+  object-fit: cover;
+  object-position: top left;
+}
+
+/* "More views" strip — flex so we can drop in 2-3 extra shots later. */
+.shots-section {
+  margin-top: 8px;
+}
+.shots-grid {
+  display: grid;
+  gap: 18px;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  margin-top: 12px;
+}
+.shot__caption {
+  padding: 10px 12px;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--muted);
+  background: var(--surface);
+  border-top: 1px solid var(--border);
+  text-align: left;
+}
+.shot__caption strong {
+  display: block;
+  font-size: 13px;
+  color: var(--text);
+  margin-bottom: 2px;
+  font-family: var(--font-mono);
+  letter-spacing: 0.04em;
+}
+
+/* Lightbox. <dialog> handles the modal mechanics (focus trap, ESC-to-close,
+   inert background); we just style the surface. */
+.shot-modal {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  max-width: min(96vw, 1400px);
+  max-height: 94vh;
+  padding: 0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.shot-modal::backdrop {
+  background: rgba(0, 0, 0, 0.78);
+}
+.shot-modal img {
+  display: block;
+  max-width: 100%;
+  max-height: 80vh;
+  width: auto;
+  height: auto;
+  margin: 0 auto;
+}
+.shot-modal p {
+  margin: 0;
+  padding: 14px 22px 18px;
+  font-size: 13.5px;
+  line-height: 1.6;
+  color: var(--muted);
+  border-top: 1px solid var(--border);
+  background: var(--surface-2);
+}
+.shot-modal__close {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+  background: transparent;
+  border: 0;
+  color: var(--text);
+  font-size: 28px;
+  line-height: 1;
+  padding: 4px 10px;
+  cursor: pointer;
+  font-family: var(--font-mono);
+}
+.shot-modal__close:hover,
+.shot-modal__close:focus-visible {
+  color: var(--accent);
+  outline: none;
+}