fix: address code review issues and rebuild CSS

- nav: add functional mobile menu panel with JS toggle
- nav: hamburger now shows/hides mobile-menu with aria-expanded state
- about_page: full styled layout (header, prose body, author aside)
- legal_page: full styled layout (header with last-updated, max-w-3xl prose)
- article: fix aside newsletter label to 'Subscribe' for E2E test
- CSS: rebuild after all template changes (4.8KB → 24.3KB)
  Committed CSS must match CI build — rebuilt after ALL template edits

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

templates/blog/about_page.html

@@ -1,14 +1,40 @@
 {% extends 'base.html' %}
 {% load wagtailimages_tags wagtailcore_tags %}
+{% block title %}{{ page.title }} | No Hype AI{% endblock %}
 {% block content %}
-<h1>{{ page.title }}</h1>
-<p>{{ page.mission_statement }}</p>
-{{ page.body|richtext }}
-{% if page.featured_author %}
-  <h2>{{ page.featured_author.name }}</h2>
-  <p>{{ page.featured_author.bio }}</p>
-  {% if page.featured_author.avatar %}
-    {% image page.featured_author.avatar fill-200x200 %}
+
+<!-- Page Header -->
+<div class="py-8 md:py-12 border-b border-zinc-200 dark:border-zinc-800 mb-12">
+  <h1 class="font-display font-black text-4xl md:text-6xl mb-4">{{ page.title }}</h1>
+  {% if page.mission_statement %}
+    <p class="text-xl md:text-2xl text-zinc-600 dark:text-zinc-400 font-medium max-w-2xl">{{ page.mission_statement }}</p>
   {% endif %}
-{% endif %}
+</div>
+
+<!-- Body -->
+<div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
+  <div class="lg:col-span-8 prose prose-lg dark:prose-invert max-w-none
+    prose-headings:font-display prose-headings:font-bold
+    prose-a:text-brand-cyan hover:prose-a:text-brand-pink prose-a:transition-colors prose-a:no-underline hover:prose-a:underline">
+    {{ page.body|richtext }}
+  </div>
+
+  {% if page.featured_author %}
+  <aside class="lg:col-span-4">
+    <div class="bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 p-6 relative overflow-hidden">
+      <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-brand-cyan to-brand-pink"></div>
+      {% if page.featured_author.avatar %}
+        <div class="w-20 h-20 mb-4 overflow-hidden border border-zinc-200 dark:border-zinc-800">
+          {% image page.featured_author.avatar fill-80x80 class="w-full h-full object-cover" %}
+        </div>
+      {% else %}
+        <div class="w-20 h-20 mb-4 bg-gradient-to-tr from-brand-cyan to-brand-pink"></div>
+      {% endif %}
+      <h2 class="font-display font-bold text-xl mb-1">{{ page.featured_author.name }}</h2>
+      {% if page.featured_author.role %}<p class="font-mono text-xs text-zinc-500 mb-3">{{ page.featured_author.role }}</p>{% endif %}
+      {% if page.featured_author.bio %}<p class="text-sm text-zinc-600 dark:text-zinc-400">{{ page.featured_author.bio }}</p>{% endif %}
+    </div>
+  </aside>
+  {% endif %}
+</div>
 {% endblock %}