From 1638db3eb97a9e48dfdf0b0b63f911e67e52c8c3 Mon Sep 17 00:00:00 2001
From: davegilligan <davegilligan73@gmail.com>
Date: Tue, 19 May 2026 13:39:58 +0200
Subject: [PATCH] Add output-draft screenshot inside step 2 card on about page

---
 assets/css/tools.css | 7 +++++++
 korrespond-about.php | 1 +
 2 files changed, 8 insertions(+)

diff --git a/assets/css/tools.css b/assets/css/tools.css
index 7444c4f..b6d1834 100644
--- a/assets/css/tools.css
+++ b/assets/css/tools.css
@@ -7427,6 +7427,13 @@ body.lt-landing {
   color: var(--dbn-blue);
   opacity: 0.75;
 }
+.kdoc-step-card__screenshot {
+  display: block;
+  width: 100%;
+  margin-top: 1rem;
+  border-radius: 6px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
+}
 @media (min-width: 700px) {
   .kdoc-steps {
     grid-template-columns: 1fr auto 1fr auto 1fr;
diff --git a/korrespond-about.php b/korrespond-about.php
index 4d7b9a1..fca2541 100644
--- a/korrespond-about.php
+++ b/korrespond-about.php
@@ -141,6 +141,7 @@ $ctaUrl = $isAuthed ? '/korrespond.php' : ($toolsLogin);
             <h3 class="kdoc-step-card__title">AI retrieves applicable law &amp; drafts</h3>
             <p class="kdoc-step-card__body">The pipeline classifies your situation, identifies the relevant statute set for your chosen authority, retrieves the top matching passages from 220,000+ indexed sources, and drafts a formal letter — citing only what it actually found.</p>
             <p class="kdoc-step-card__example">Produces two-column output: Norsk (bokmål) canonical + your working language reference.</p>
+            <img src="assets/images/korrespond/output-draft.png" alt="Two-column draft output — Norwegian bokmål and English side by side" class="kdoc-step-card__screenshot" loading="lazy">
         </div>
         <span class="kdoc-step-arrow" aria-hidden="true">&rarr;</span>
         <div class="kdoc-step-card">