Add member welcome modal and promote public login CTAs

- dashboard.php: welcome overlay modal on first visit, shows all 10 tool
  tips in a 2-col grid; localStorage key dbn-welcome-v1-seen persists
  dismiss; "Don't show again" checkbox (default checked); backdrop+Escape
  close without persisting
- index.php: Sign in / Join free buttons added to sticky nav; access gate
  section moved from page bottom to immediately after hero so login CTAs
  are the first thing a visitor sees without scrolling; gate card titles
  enlarged and top-border accent added for visual weight
- tools.css: .wlc-* welcome modal styles; .lt-nav__btn-signin/join nav
  CTA button styles; .lt-gate--prominent and .lt-gate__card-title--large

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/css/tools.css

@@ -8387,3 +8387,228 @@ body.lt-landing {
 .kdoc-diagram-img { margin: 2rem auto; max-width: 100%; overflow: hidden; }
 .kdoc-diagram-img picture { display: block; width: 100%; }
 .kdoc-diagram-img img { display: block; width: 100%; max-width: 100%; height: auto; }
+
+/* ── Welcome modal ───────────────────────────────────────────────────────── */
+.wlc-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 9000;
+  background: rgba(0, 18, 48, 0.72);
+  backdrop-filter: blur(3px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  overflow-y: auto;
+}
+.wlc-backdrop[hidden] { display: none; }
+
+.wlc-card {
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 32px 80px rgba(0, 20, 60, 0.38);
+  max-width: 720px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.wlc-header {
+  background: var(--dbn-blue);
+  padding: 2rem 2rem 1.6rem;
+}
+.wlc-eyebrow {
+  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: rgba(244, 197, 66, 0.85);
+  margin: 0 0 0.6rem;
+}
+.wlc-title {
+  font-family: 'Crimson Pro', serif;
+  font-size: clamp(1.4rem, 3vw, 2rem);
+  font-weight: 700;
+  color: #fff;
+  margin: 0 0 0.5rem;
+  line-height: 1.1;
+}
+.wlc-sub {
+  color: rgba(255, 255, 255, 0.65);
+  font-size: 0.92rem;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.wlc-workbench-tip {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 0.9rem 1.5rem;
+  background: #fef9ea;
+  border-bottom: 1px solid #f3e9c2;
+  font-size: 0.88rem;
+  line-height: 1.5;
+  color: #6b4800;
+}
+.wlc-tip-icon {
+  flex-shrink: 0;
+  font-size: 1.1rem;
+  line-height: 1.5;
+}
+
+.wlc-tools-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  max-height: 44vh;
+  overflow-y: auto;
+}
+.wlc-tool-item {
+  display: grid;
+  grid-template-columns: 28px 1fr;
+  grid-template-rows: auto auto;
+  column-gap: 10px;
+  padding: 0.75rem 1.2rem;
+  border-bottom: 1px solid #f0f2f5;
+  border-right: 1px solid #f0f2f5;
+  text-decoration: none;
+  transition: background 120ms;
+}
+.wlc-tool-item:nth-child(even) { border-right: none; }
+.wlc-tool-item:hover { background: #f5f8ff; }
+.wlc-tool-icon {
+  grid-row: 1 / 3;
+  font-size: 1.3rem;
+  line-height: 1.4;
+  align-self: start;
+}
+.wlc-tool-name {
+  font-weight: 700;
+  font-size: 0.88rem;
+  color: var(--dbn-blue);
+  line-height: 1.3;
+  align-self: end;
+}
+.wlc-tool-tip {
+  font-size: 0.80rem;
+  color: #5d6a7e;
+  line-height: 1.4;
+  align-self: start;
+}
+
+.wlc-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 1rem 1.5rem;
+  background: #f7f8fb;
+  border-top: 1px solid #e8eaef;
+}
+.wlc-no-show {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.86rem;
+  color: #5d6a7e;
+  cursor: pointer;
+  user-select: none;
+}
+.wlc-no-show input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--dbn-blue);
+  cursor: pointer;
+}
+.wlc-btn-start {
+  display: inline-flex;
+  align-items: center;
+  height: 42px;
+  padding: 0 24px;
+  background: var(--dbn-blue);
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 0.95rem;
+  font-weight: 700;
+  cursor: pointer;
+  letter-spacing: 0.01em;
+  transition: background 140ms, transform 120ms, box-shadow 140ms;
+  box-shadow: 0 4px 14px rgba(0, 32, 91, 0.30);
+}
+.wlc-btn-start:hover {
+  background: #001f5a;
+  transform: translateY(-1px);
+  box-shadow: 0 8px 20px rgba(0, 32, 91, 0.40);
+}
+
+@media (max-width: 560px) {
+  .wlc-tools-grid { grid-template-columns: 1fr; max-height: 50vh; }
+  .wlc-tool-item { border-right: none; }
+  .wlc-footer { flex-direction: column; align-items: flex-start; }
+  .wlc-btn-start { width: 100%; justify-content: center; }
+  .wlc-header { padding: 1.4rem 1.2rem 1.2rem; }
+}
+
+/* ── Public nav sign-in / join CTA buttons ───────────────────────────────── */
+.lt-nav__btn-signin {
+  display: inline-flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 16px;
+  border: 1px solid rgba(255, 255, 255, 0.32);
+  border-radius: 8px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.88);
+  font-size: 0.84rem;
+  font-weight: 600;
+  text-decoration: none;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  transition: background 140ms, color 140ms, border-color 140ms;
+}
+.lt-nav__btn-signin:hover {
+  background: rgba(255, 255, 255, 0.10);
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.55);
+}
+
+.lt-nav__btn-join {
+  display: inline-flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 18px;
+  border-radius: 8px;
+  background: #ba0c2f;
+  color: #fff;
+  font-size: 0.84rem;
+  font-weight: 700;
+  text-decoration: none;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  box-shadow: 0 4px 14px rgba(186, 12, 47, 0.38);
+  transition: background 140ms, transform 120ms, box-shadow 140ms;
+}
+.lt-nav__btn-join:hover {
+  background: #9a0a26;
+  transform: translateY(-1px);
+  box-shadow: 0 8px 20px rgba(186, 12, 47, 0.50);
+}
+
+@media (max-width: 560px) {
+  .lt-nav__btn-signin { display: none; }
+}
+
+/* ── Access gate prominence upgrades ─────────────────────────────────────── */
+.lt-gate__card-title--large {
+  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
+}
+.lt-gate__card--member { border-top: 4px solid rgba(244, 197, 66, 0.60); }
+.lt-gate__card--register { border-top: 4px solid rgba(15, 118, 110, 0.70); }
+.lt-gate--prominent {
+  margin-top: 0;
+  scroll-margin-top: 70px;
+}

dashboard.php

@@ -149,8 +149,103 @@ window.DBN_TOOLS_LANG = <?= json_encode($uiLang, JSON_UNESCAPED_UNICODE) ?>;
         </a>
 <?php endforeach; ?>
     </section>
+
+    <!-- Welcome modal — shown once per browser until dismissed with "don't show again" -->
+    <div id="welcomeModal" class="wlc-backdrop" role="dialog" aria-modal="true" aria-labelledby="wlcTitle" hidden>
+        <div class="wlc-card">
+            <div class="wlc-header">
+                <p class="wlc-eyebrow"><?= htmlspecialchars(dbnToolsT('brand_line', $uiLang)) ?></p>
+                <h2 class="wlc-title" id="wlcTitle">Welcome to Do Better Norge Legal Tools</h2>
+                <p class="wlc-sub">Here&rsquo;s a quick look at what each tool does &mdash; click any card on the dashboard to go straight in.</p>
+            </div>
+            <div class="wlc-workbench-tip">
+                <span class="wlc-tip-icon" aria-hidden="true">💡</span>
+                <span><strong>Start with the Case Workbench</strong> &mdash; frame your situation first, then use the tools below with context already loaded.</span>
+            </div>
+            <div class="wlc-tools-grid">
+<?php
+$welcomeTips = [
+    'transcribe'    => 'Upload a hearing recording to get an accurate, speaker-separated transcript',
+    'timeline'      => 'Paste case notes to instantly map all key dates and Barnevernet milestones',
+    'redact'        => 'Strip names and ID numbers before sharing any document with third parties',
+    'korrespond'    => 'Draft authority letters in Norwegian + your language with verified citations',
+    'barnevernet'   => 'Upload child-welfare documents to flag procedural violations and red flags',
+    'advocate'      => 'Generate a fully-cited brief for your position from ECHR and Lovdata',
+    'deep-research' => 'Ask a complex legal question and get a multi-angle cited research brief',
+    'discrepancy'   => 'Upload two doc versions to surface deleted facts or new allegations',
+    'corpus'        => 'Browse the 220 K+ indexed legal passages behind every AI answer',
+    'citations'     => 'Trace how cases cite each other to find supporting precedents',
+];
+$toolIcons = [
+    'transcribe'    => '🎙',
+    'timeline'      => '📅',
+    'redact'        => '🔒',
+    'korrespond'    => '✉️',
+    'barnevernet'   => '🔍',
+    'advocate'      => '⚖️',
+    'deep-research' => '🔬',
+    'discrepancy'   => '🔎',
+    'corpus'        => '📚',
+    'citations'     => '🔗',
+];
+foreach ($tools as $slug => $item):
+    $tip = $welcomeTips[$slug] ?? $item['description'];
+    $icon = $toolIcons[$slug] ?? '🛠';
+?>
+                <a class="wlc-tool-item" href="<?= htmlspecialchars($item['url']) ?>">
+                    <span class="wlc-tool-icon" aria-hidden="true"><?= $icon ?></span>
+                    <span class="wlc-tool-name"><?= htmlspecialchars($item['label']) ?></span>
+                    <span class="wlc-tool-tip"><?= htmlspecialchars($tip) ?></span>
+                </a>
+<?php endforeach; ?>
+            </div>
+            <div class="wlc-footer">
+                <label class="wlc-no-show">
+                    <input type="checkbox" id="wlcDontShow" checked>
+                    Don&rsquo;t show this again
+                </label>
+                <button id="wlcGetStarted" class="wlc-btn-start" type="button">Get started &rarr;</button>
+            </div>
+        </div>
+    </div>
 </main>
 <?php require_once __DIR__ . '/includes/footer.php'; ?>
 <script src="assets/js/tools.js" defer></script>
+<script>
+(function () {
+    var STORAGE_KEY = 'dbn-welcome-v1-seen';
+    var modal = document.getElementById('welcomeModal');
+    var btnStart = document.getElementById('wlcGetStarted');
+    var chkDontShow = document.getElementById('wlcDontShow');
+
+    function closeModal(saveFlag) {
+        modal.hidden = true;
+        document.body.style.overflow = '';
+        if (saveFlag) {
+            try { localStorage.setItem(STORAGE_KEY, '1'); } catch (e) {}
+        }
+    }
+
+    if (modal && !localStorage.getItem(STORAGE_KEY)) {
+        modal.hidden = false;
+        document.body.style.overflow = 'hidden';
+    }
+
+    if (btnStart) {
+        btnStart.addEventListener('click', function () {
+            closeModal(chkDontShow && chkDontShow.checked);
+        });
+    }
+
+    if (modal) {
+        modal.addEventListener('click', function (e) {
+            if (e.target === modal) closeModal(false);
+        });
+        document.addEventListener('keydown', function (e) {
+            if (e.key === 'Escape' && !modal.hidden) closeModal(false);
+        });
+    }
+}());
+</script>
 </body>
 </html>

index.php

@@ -103,7 +103,8 @@ window.DBN_TOOLS_LANG = <?= json_encode($uiLang, JSON_UNESCAPED_UNICODE) ?>;
                 <a href="<?= htmlspecialchars($langPath . '?lang=' . $langCode . '&return=' . urlencode($returnPath)) ?>" class="<?= $langCode === $uiLang ? 'is-active' : '' ?>"><?= htmlspecialchars(dbnToolsLanguageLabel($langCode)) ?></a>
 <?php endforeach; ?>
             </nav>
-            <a href="#access" class="lt-nav__cta"><?= htmlspecialchars(dbnToolsT('primary_access', $uiLang)) ?></a>
+            <a href="<?= htmlspecialchars($toolsLogin) ?>" class="lt-nav__btn-signin"><?= htmlspecialchars(dbnToolsT('sign_in', $uiLang)) ?></a>
+            <a href="<?= htmlspecialchars($registerUrl) ?>" class="lt-nav__btn-join">Join free &rarr;</a>
         </div>
     </header>
 
@@ -134,6 +135,52 @@ window.DBN_TOOLS_LANG = <?= json_encode($uiLang, JSON_UNESCAPED_UNICODE) ?>;
         </div>
     </section>
 
+<?php if (!$isAuthed): ?>
+    <section id="access" class="lt-access lt-gate lt-gate--prominent" aria-labelledby="ltGateTitle">
+        <div class="lt-gate__grid">
+
+            <div class="lt-gate__card lt-gate__card--member">
+                <p class="lt-gate__card-eyebrow">Do Better Norge</p>
+                <h2 class="lt-gate__card-title lt-gate__card-title--large" id="ltGateTitle"><?= htmlspecialchars(dbnToolsT('member_card_title', $uiLang)) ?></h2>
+                <p class="lt-gate__card-note"><?= htmlspecialchars(dbnToolsT('member_card_note', $uiLang)) ?></p>
+                <a class="lt-access-btn" href="<?= htmlspecialchars($toolsLogin) ?>"><?= htmlspecialchars(dbnToolsT('primary_access', $uiLang)) ?></a>
+                <details class="fallback-login">
+                    <summary><?= htmlspecialchars(dbnToolsT('secondary_access', $uiLang)) ?></summary>
+                    <form id="passcodeForm" class="passcode-form">
+                        <label for="loginEmail"><?= htmlspecialchars(dbnToolsT('email', $uiLang)) ?></label>
+                        <input id="loginEmail" name="email" type="email" autocomplete="username email" required>
+                        <label for="loginPassword"><?= htmlspecialchars(dbnToolsT('password', $uiLang)) ?></label>
+                        <div class="passcode-row">
+                            <input id="loginPassword" name="password" type="password" autocomplete="current-password" required>
+                            <button type="submit"><?= htmlspecialchars(dbnToolsT('sign_in', $uiLang)) ?></button>
+                        </div>
+                        <p id="gateStatus" class="form-status" role="status" aria-live="polite"></p>
+                    </form>
+                </details>
+            </div>
+
+            <div class="lt-gate__card lt-gate__card--register">
+                <p class="lt-gate__card-eyebrow">Free membership</p>
+                <h2 class="lt-gate__card-title lt-gate__card-title--large"><?= htmlspecialchars(dbnToolsT('register_card_title', $uiLang)) ?></h2>
+                <p class="lt-gate__card-note"><?= htmlspecialchars(dbnToolsT('register_card_note', $uiLang)) ?></p>
+                <a class="lt-register-btn lt-register-btn--google" href="<?= htmlspecialchars($registerUrl . '?method=google') ?>">
+                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
+                        <path d="M17.64 9.205c0-.639-.057-1.252-.164-1.841H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615Z" fill="#4285F4"/>
+                        <path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18Z" fill="#34A853"/>
+                        <path d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332Z" fill="#FBBC05"/>
+                        <path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58Z" fill="#EA4335"/>
+                    </svg>
+                    <?= htmlspecialchars(dbnToolsT('register_google', $uiLang)) ?>
+                </a>
+                <a class="lt-register-btn lt-register-btn--email" href="<?= htmlspecialchars($registerUrl) ?>">
+                    <?= htmlspecialchars(dbnToolsT('register_email', $uiLang)) ?>
+                </a>
+            </div>
+
+        </div>
+    </section>
+<?php endif; ?>
+
     <!-- Why-ours feature strip -->
     <section class="lt-why-strip">
         <div class="lt-why-strip__inner">
@@ -220,52 +267,6 @@ window.DBN_TOOLS_LANG = <?= json_encode($uiLang, JSON_UNESCAPED_UNICODE) ?>;
         </div>
     </section>
 
-<?php if (!$isAuthed): ?>
-    <section id="access" class="lt-access lt-gate" aria-labelledby="ltGateTitle">
-        <div class="lt-gate__grid">
-
-            <div class="lt-gate__card lt-gate__card--member">
-                <p class="lt-gate__card-eyebrow">Do Better Norge</p>
-                <h2 class="lt-gate__card-title" id="ltGateTitle"><?= htmlspecialchars(dbnToolsT('member_card_title', $uiLang)) ?></h2>
-                <p class="lt-gate__card-note"><?= htmlspecialchars(dbnToolsT('member_card_note', $uiLang)) ?></p>
-                <a class="lt-access-btn" href="<?= htmlspecialchars($toolsLogin) ?>"><?= htmlspecialchars(dbnToolsT('primary_access', $uiLang)) ?></a>
-                <details class="fallback-login">
-                    <summary><?= htmlspecialchars(dbnToolsT('secondary_access', $uiLang)) ?></summary>
-                    <form id="passcodeForm" class="passcode-form">
-                        <label for="loginEmail"><?= htmlspecialchars(dbnToolsT('email', $uiLang)) ?></label>
-                        <input id="loginEmail" name="email" type="email" autocomplete="username email" required>
-                        <label for="loginPassword"><?= htmlspecialchars(dbnToolsT('password', $uiLang)) ?></label>
-                        <div class="passcode-row">
-                            <input id="loginPassword" name="password" type="password" autocomplete="current-password" required>
-                            <button type="submit"><?= htmlspecialchars(dbnToolsT('sign_in', $uiLang)) ?></button>
-                        </div>
-                        <p id="gateStatus" class="form-status" role="status" aria-live="polite"></p>
-                    </form>
-                </details>
-            </div>
-
-            <div class="lt-gate__card lt-gate__card--register">
-                <p class="lt-gate__card-eyebrow">Free membership</p>
-                <h2 class="lt-gate__card-title"><?= htmlspecialchars(dbnToolsT('register_card_title', $uiLang)) ?></h2>
-                <p class="lt-gate__card-note"><?= htmlspecialchars(dbnToolsT('register_card_note', $uiLang)) ?></p>
-                <a class="lt-register-btn lt-register-btn--google" href="<?= htmlspecialchars($registerUrl . '?method=google') ?>">
-                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
-                        <path d="M17.64 9.205c0-.639-.057-1.252-.164-1.841H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615Z" fill="#4285F4"/>
-                        <path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18Z" fill="#34A853"/>
-                        <path d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332Z" fill="#FBBC05"/>
-                        <path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58Z" fill="#EA4335"/>
-                    </svg>
-                    <?= htmlspecialchars(dbnToolsT('register_google', $uiLang)) ?>
-                </a>
-                <a class="lt-register-btn lt-register-btn--email" href="<?= htmlspecialchars($registerUrl) ?>">
-                    <?= htmlspecialchars(dbnToolsT('register_email', $uiLang)) ?>
-                </a>
-            </div>
-
-        </div>
-    </section>
-<?php endif; ?>
-
 </main>
 <?php require_once __DIR__ . '/includes/footer.php'; ?>
 <script src="assets/js/tools.js" defer></script>