website: M3 part A - the controller's shell, and the home page inside it

The direction the operator chose: the controller's FRAME around the website's own
content. Staged at /preview/m3/, noindex, nothing live.

website/assets/shell.css - 117 rules COPIED VERBATIM from felhom-controller
  style.css @ dcd89364a4 (sidebar, mobile top bar, off-canvas drawer, and the
  component atoms the restyled pages use: btn, alert, app-info-card, launch-*,
  stack-detail-card, form-*). Exactly ONE rule is not verbatim and says so:
  body.shell { display:flex; min-height:100vh }, which lives in the controller's
  base rather than in a component, scoped to .shell so other pages are untouched.

  The generator NAMES every rule it copies and REFUSES to write the file if one has
  disappeared upstream. That is not ceremony: it already caught two things this
  session. It refused because .sidebar::-webkit-scrollbar does not exist (only the
  -track override does), and because prefers-reduced-motion is split across FIVE
  separate blocks in the controller - reading only the first would have silently
  lost four rules. The M1 round lost a rule exactly this way.

  The bare `body { flex-direction: column }` that broke M1's phone layout is copied
  this time, by name, as are body.nav-open and the no-js/js pair.

  Load order is deliberate: shell.css AFTER site.css. Thirteen selectors exist in
  both files with different meanings (.nav-links, .page-header, .lang-globe*, .ico)
  - a horizontal site nav there, a vertical sidebar here. Later wins, and a page
  that does not load shell.css is completely unaffected.

website/preview/m3/index.html - the home page in the shell. Content is /preview/'s
  cleaned text; body carries `shell page-index` so the existing .page-index content
  rules (caps, flow, vs, band, who-mini) are reused rather than duplicated. Six
  sections, left-aligned headers, the controller's cards. Head tags (title, meta
  description, canonical, hreflang) are already the FINAL values, so the switch in
  part D needs no head edit.

  Four changes from the operator's mockup, each with its reason in the generator:
    1. the active item follows the page (the mockups show Inditopult active on all)
    2. Teszteles is ALSO a primary button at the top of the lower group - it is the
       one action we want and the mockup buries it at the bottom
    3. the Alkalmazasok categories are anchors on /alkalmazasok: real URLs, no
       JS-only state
    4. ADDED GYIK. It is in today's nav; dropping it silently would take a page out
       of navigation, which is not a change a restyle gets to make.

scripts/site_gates.py - gate 3 extended rather than duplicated, as asked: a SHELL
  set whose pages must carry an IDENTICAL <nav class="sidebar"> after the active
  marker is normalised. RED-PROOFED: a one-character change to one menu label on a
  second shell page convicts. It also prints "DIFFER" rather than a reassuring
  "identical" count when it fails - a false reassurance printed beside a conviction
  is the exact defect this repo files rows about.

documentation/design/design-system.md - new "Shell" section: what is shared (tokens
  + shell + atoms), what each side owns, how a change flows (controller first, the
  website's copy the same week), and that the cross-repo gate is deliberately NOT
  built yet.

website/assets/site.css

@@ -2376,3 +2376,54 @@ footer a:hover, footer a:focus-visible { text-decoration: underline; }
     .page-index .who-mini p { text-align: center; }
 }
 
+
+/* ================= M3 shell pages - 2026-10-11 =================
+   Additions only, all new class names. These are the WEBSITE's own additions to the
+   controller's shell (assets/shell.css, which stays a pure copy): the wordmark under
+   the sidebar logo, the tester button in the sidebar, the hero row, and the sample
+   badge. Nothing here exists in the controller, so nothing here has to keep in step
+   with it. See documentation/design/design-system.md "Shell". */
+
+/* --- the website's own additions to the sidebar --- */
+.sidebar-logo-link { display: flex; flex-direction: column; align-items: center; gap: 8px; }
+.sidebar-word { height: 16px; width: auto; display: block; }
+.sidebar-cta { width: 100%; justify-content: center; margin-bottom: 1rem; }
+
+/* --- every invented value on a page wears this --- */
+.sample {
+    font-family: var(--font-data); font-size: .68rem; text-transform: uppercase;
+    letter-spacing: .04em; color: var(--warn);
+    border: 1px solid var(--warn); background: var(--warn-dim);
+    padding: .05rem .3rem; border-radius: var(--radius); white-space: nowrap;
+}
+
+/* --- section rhythm inside the shell's content column --- */
+.shell-section { margin-bottom: 3.5rem; }
+.shell-section:last-child { margin-bottom: 1rem; }
+.shell .sec-head { max-width: 46rem; margin-bottom: 1.75rem; }
+.shell .sec-head h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: .4rem; }
+.shell .sec-head p { color: var(--text-2); font-size: 1rem; }
+
+/* --- the hero row: copy on the left, the dashboard window on the right --- */
+.hero-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.5rem; align-items: center; margin-bottom: 3.5rem; }
+.hero-copy h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; margin-bottom: .75rem; }
+.hero-copy p { color: var(--text-2); font-size: 1.05rem; margin-bottom: 1.5rem; max-width: 34ch; }
+.hero-logo { display: flex; justify-content: center; }
+.hero-logo img { max-width: 340px; width: 100%; height: auto; }
+.hero-window { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-1); overflow: hidden; }
+.hero-window-bar { display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem; background: var(--bg-2); border-bottom: 1px solid var(--line); }
+.hw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: inline-block; }
+.hero-window-title { margin-left: .7rem; font-size: .78rem; color: var(--text-3); display: inline-flex; align-items: center; gap: .5rem; }
+.hero-window-body { padding: 1.1rem; }
+.hero-window-lede { font-size: .88rem; color: var(--text-2); margin-bottom: .9rem; }
+.launch-grid--mini { grid-template-columns: repeat(4, 1fr); gap: .9rem; }
+
+@media (max-width: 900px) {
+    .hero-row { grid-template-columns: 1fr; gap: 1.75rem; }
+    .hero-copy p { max-width: none; }
+    .launch-grid--mini { grid-template-columns: repeat(4, 1fr); }
+}
+@media (max-width: 600px) {
+    .launch-grid--mini { grid-template-columns: repeat(3, 1fr); }
+    .shell-section { margin-bottom: 2.5rem; }
+}