mobile: match desktop card palette, add stacked supporter footer

Capability cards now carry the desktop's per-layer colours —
sage / slate / clay / plum — with paper-toned text for contrast.
Icon, num, eyebrow, title, body all flipped to paper with per-
element alpha so the hierarchy still reads on the coloured tile.

Footer reintroduced as a stacked column of three supporter marks:
"Project Bifrost" serif lockup, Fenja AI wordmark, Innovationsfonden
mark. Centered, 26px gap, paper background, 44/56 top/bottom padding.
No "view desktop" link — the ?view=desktop query override still
works for anyone who needs it.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

protected/mobile/index.html

@@ -317,6 +317,21 @@
     </div>
   </section>
 
+  <footer class="m-foot" aria-label="Supporters">
+    <div class="m-foot-mark m-foot-mark--project">
+      Project <em>Bifrost</em>
+    </div>
+    <img class="m-foot-mark m-foot-mark--fenja"
+         src="/fenja/fenja-wordmark-black.svg"
+         alt="Fenja AI" />
+    <div class="m-foot-mark m-foot-mark--innov" aria-label="Innovationsfonden">
+      <svg class="m-innov-mark" viewBox="0 0 60 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <path d="M 22 4 L 55 4 L 38 96 L 5 96 Z" fill="currentColor"/>
+      </svg>
+      <span class="m-innov-word">nnovationsfonden</span>
+    </div>
+  </footer>
+
 </main>
 
 <script src="/mobile/mobile.js" defer></script>

protected/mobile/mobile.css

@@ -329,16 +329,22 @@ html, body {
   position: relative;
   padding: 24px 22px 24px;
   margin: 0 0 18px 0;
-  background: #fffdf6;
+  border-radius: 10px;
-  border: 1px solid var(--line);
+  box-shadow:
-  border-radius: 8px;
+    0 16px 28px -22px rgba(46, 46, 40, 0.45),
-  box-shadow: 0 12px 22px -18px rgba(46, 46, 40, 0.24);
+    0 4px 10px -6px rgba(46, 46, 40, 0.18);
-  /* reserve space on the right for the icon so long titles wrap
+  min-height: 108px;
-     instead of running under it. */
+  /* Per-layer backgrounds match the desktop palette: sage, slate,
-  padding-right: 96px;
+     clay, plum. Text is flipped to paper for contrast. */
-  min-height: 104px;
+  background: #7a8c70;  /* default = layer 0, overridden below */
+  color: #fbf6e9;
 }
 .m-cap:last-child { margin-bottom: 0; }
+.m-cap:nth-of-type(1) { background: #7a8c70; }  /* sage  — The AI        */
+.m-cap:nth-of-type(2) { background: #7b9399; }  /* slate — The Knowledge */
+.m-cap:nth-of-type(3) { background: #b07556; }  /* clay  — The Tools     */
+.m-cap:nth-of-type(4) { background: #8a7a92; }  /* plum  — The Agents    */
+
 .m-cap-icon {
   position: absolute;
   top: 14px;
@@ -347,29 +353,30 @@ html, body {
   height: 72px;
   object-fit: contain;
   object-position: center;
-  /* PNGs are illustrative — let the image rest rather than tinting
-     it, which the PNGs aren't authored to tolerate. */
   opacity: 0.98;
   pointer-events: none;
 }
 .m-cap-num {
   display: inline-block;
   font-family: "Newsreader", Georgia, serif;
-  font-weight: 500;
+  font-weight: 600;
   font-size: 13.5px;
-  color: var(--accent);
+  color: rgba(251, 246, 233, 0.85);
   margin-bottom: 10px;
   font-variant-numeric: tabular-nums;
   letter-spacing: 0.02em;
+  /* Keep clear of the icon in the top-right. */
+  padding-right: 92px;
 }
 .m-cap-eyebrow {
   font-family: "Manrope", system-ui, sans-serif;
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 700;
   letter-spacing: 0.16em;
   text-transform: uppercase;
-  color: var(--ink-soft);
+  color: rgba(251, 246, 233, 0.8);
   margin: 0 0 10px 0;
+  padding-right: 92px;
 }
 .m-cap-title {
   font-family: "Newsreader", Georgia, serif;
@@ -377,12 +384,10 @@ html, body {
   font-size: 20px;
   line-height: 1.22;
   letter-spacing: -0.01em;
-  margin: 0 0 10px 0;
+  margin: 0 0 12px 0;
-  color: var(--ink);
+  color: #fbf6e9;
   text-wrap: pretty;
-  /* allow title to relax into the icon column once the icon ends,
+  padding-right: 92px;
-     which lives only in the top-right 86px. */
-  padding-right: 0;
 }
 .m-cap-title b {
   font-weight: 700;
@@ -391,29 +396,19 @@ html, body {
 .m-cap-title em {
   font-style: italic;
   font-weight: 700;
-  color: var(--accent);
+  color: #fff9ea;
 }
 .m-cap-body {
   margin: 0;
   padding-right: 0;
   font-size: 15.5px;
   line-height: 1.55;
-  color: var(--ink-soft);
+  color: rgba(251, 246, 233, 0.88);
 }
-/* Reclaim the right padding for the body copy once the text flows
+.m-cap-body em {
-   below the icon area (icon is ~72px tall + 14px top = 86px). */
+  font-style: italic;
-.m-cap {
+  font-weight: 700;
-  padding-right: 22px;
+  color: #fff9ea;
-}
-.m-cap-num,
-.m-cap-eyebrow,
-.m-cap-title {
-  /* These rows sit beside the icon — keep clear of it. */
-  padding-right: 92px;
-}
-.m-cap-body {
-  /* Body sits below the icon — use the whole card width. */
-  padding-right: 0;
 }
 
 /* ─── Project Bifrost reveal ─────────────────────────────── */
@@ -637,3 +632,56 @@ html, body {
   transform: rotate(-45deg);
 }
 .m-confirm-list em { font-style: italic; font-weight: 700; color: var(--accent); }
+
+/* ─── Footer (stacked brand marks) ───────────────────────── */
+.m-foot {
+  padding: 44px 22px 56px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 26px;
+  border-top: 1px solid var(--line);
+  background: var(--paper);
+}
+.m-foot-mark {
+  line-height: 0;
+  color: var(--ink);
+}
+.m-foot-mark--project {
+  font-family: "Newsreader", Georgia, serif;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 1;
+  letter-spacing: -0.005em;
+  color: var(--ink);
+}
+.m-foot-mark--project em {
+  font-style: italic;
+  font-weight: 700;
+  color: var(--accent);
+}
+.m-foot-mark--fenja {
+  height: 22px;
+  width: auto;
+  display: block;
+  opacity: 0.92;
+}
+.m-foot-mark--innov {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #3c6b6b;
+  line-height: 1;
+}
+.m-innov-mark {
+  width: 9px;
+  height: 16px;
+  display: block;
+}
+.m-innov-word {
+  font-family: "Manrope", system-ui, sans-serif;
+  font-weight: 600;
+  font-size: 14.5px;
+  letter-spacing: 0.04em;
+  color: #3c6b6b;
+}