diff --git a/src/App.vue b/src/App.vue
index 852a474..9ef7afb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -209,7 +209,7 @@
   </div>
 
   <header class="site-header">
-    <div class="logo" data-i18n="brand">Deepstock</div>
+    <a class="logo" data-i18n="brand" href="#" aria-label="Back to landing page" @click.prevent="restartQuiz">Deepstock</a>
     <div class="header-right">
       <button class="mod-open-btn" id="modOpenBtn" type="button" title="Open style modifier" aria-label="Open style modifier">⚙</button>
       <div id="region-indicator" style="font-family:var(--font-mono);font-size:10px;color:var(--text-dim);padding:4px 8px;background:var(--panel);border:1px solid var(--border);border-radius:4px;white-space:nowrap;cursor:pointer;" @click="showRegionPicker" title="Click to change region"></div>
@@ -2132,9 +2132,15 @@ onMounted(() => {
 
   // Initial render — pull saved session state (if any) so reload mid-quiz
   // restores the user where they left off. Lang sets first so renderQuestion
-  // / renderResults pick up the right strings.
+  // / renderResults pick up the right strings. If no saved language, sniff
+  // navigator.language so German speakers land on the German copy without
+  // having to click the toggle.
   const saved = loadState()
-  const lang = (saved && saved.currentLang) || 'en'
+  const detectLang = () => {
+    const nav = (navigator.language || navigator.userLanguage || 'en').toLowerCase()
+    return nav.startsWith('de') ? 'de' : 'en'
+  }
+  const lang = (saved && saved.currentLang) || detectLang()
   setLang(lang)
   updateRegionIndicator()
 
diff --git a/src/styles.css b/src/styles.css
index 5c91fb0..79ea0fb 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -116,11 +116,18 @@ body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); f
 .page-bg-pattern {
   position: fixed;
   inset: 0;
-  z-index: 0;
+  /* z-index:-1 keeps the pattern below normal-flow content (hero / quiz
+     / results) without forcing those sections into their own stacking
+     context. That matters because creating a context on .results-section
+     would trap the capture-modal (a position:fixed descendant) inside
+     it, and its z-index:200 wouldn't escape that context to sit above
+     the body-level site-header. Body bg is the canvas; the pattern
+     paints above the canvas and below positioned content. */
+  z-index: -1;
   pointer-events: none;
   user-select: none;
   overflow: hidden;
-  background: #F0F0F0;
+  background: #FAFAFA;
   /* Parent is always visible — the intro overlay covers it during the
      intro, and the per-row animations handle the staggered reveal once
      intro-done lands. Nothing to fade on the wrapper. */
@@ -148,31 +155,18 @@ body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); f
      reads comfortably across viewport sizes. */
   font-size: clamp(42px, 8vw, 60px);
   letter-spacing: 0.04em;
-  /* Emboss: text colour matches the panel; only the shadows render —
-     highlight top-left, faint dark on bottom-right. */
-  color: #F0F0F0;
-  text-shadow:
-    -1px -1px 0 rgba(255, 255, 255, 0.95),
-     1px  1px 0 rgba(0, 0, 0, 0.06);
-}
-.page-bg-pattern .bg-row span { display: inline-block; }
-
-/* Lighter pattern on the assessment + results pages — homepage stays
-   on the slightly darker #F0F0F0 panel; quiz / results lift to #FAFAFA
-   so the questions and result cards (also #FAFAFA white-paint) sit on
-   a softer background. Text colour follows so the emboss effect still
-   relies on shadows alone. */
-body.quiz-active .page-bg-pattern,
-body.results-active .page-bg-pattern {
-  background: #FAFAFA;
-}
-body.quiz-active .page-bg-pattern .bg-row,
-body.results-active .page-bg-pattern .bg-row {
+  /* Emboss: text colour matches the panel (#FAFAFA on every page now);
+     only the shadows render — white highlight top-left, faint dark
+     bottom-right. */
   color: #FAFAFA;
   text-shadow:
     -1px -1px 0 rgba(255, 255, 255, 0.95),
      1px  1px 0 rgba(0, 0, 0, 0.05);
 }
+.page-bg-pattern .bg-row span { display: inline-block; }
+
+/* Background pattern uses the same #FAFAFA across every page now —
+   homepage, quiz, results all on the lighter panel. */
 /* Rows slide in horizontally with alternating direction — odd rows
    come from the left, even rows from the right — so the pattern weaves
    itself together rather than fading in as one slab. The translateX
@@ -207,26 +201,12 @@ body.intro-done .page-bg-pattern .bg-row:nth-child(7) { animation-delay: 0.72s;
   to   { opacity: 1; transform: translateX(0); }
 }
 
-/* Lighter background on the quiz/results pages — FAFAFA matches the
-   white-paint cards, and the embossed text colour shifts to match so
-   only the highlight + shadow text-shadows render (same trick as the
-   homepage, just on a lighter base). */
-body.quiz-active .page-bg-pattern,
-body.results-active .page-bg-pattern {
-  background: #FAFAFA;
-}
-body.quiz-active .page-bg-pattern .bg-row,
-body.results-active .page-bg-pattern .bg-row {
-  color: #FAFAFA;
-}
+/* (Per-page bg override removed — every page now uses #FAFAFA.) */
 
-/* Sections that sit above the pattern need to live in a higher
-   stacking context. Position:relative + z-index:1 puts hero / quiz /
-   results / about content above the fixed pattern. */
-.hero, .quiz-section, .results-section, .about-section {
-  position: relative;
-  z-index: 1;
-}
+/* No section-level stacking context needed — the pattern lives at
+   z-index:-1 so normal-flow sections paint above it automatically.
+   Avoiding a stacking context on .results-section also lets the
+   capture-modal (z-index:200) reach above the site-header. */
 .hero-eyebrow {
   position: relative; z-index: 1;
   font-family: var(--font-body);