diff --git a/app/pages/classroom-introduction.vue b/app/pages/classroom-introduction.vue
index 6683236..32ba829 100644
--- a/app/pages/classroom-introduction.vue
+++ b/app/pages/classroom-introduction.vue
@@ -1,1036 +1,345 @@
 <template>
-  <div class="learn-theme min-h-screen bg-[#070d1a] text-white">
-    <header class="border-b border-white/5 bg-[#070d1a]/80 backdrop-blur">
-      <div
-        class="mx-auto flex w-full max-w-screen-xl flex-wrap items-center justify-between gap-4 px-4 py-6 sm:px-6 md:px-8"
-      >
-        <div class="flex items-center gap-3">
-          <div class="flex h-12 w-12 items-center justify-center rounded-2xl border border-cyan-400/40 bg-cyan-500/10">
-            <v-icon icon="mdi-radar" size="26" class="text-cyan-300" />
-          </div>
-          <div>
-            <p class="text-lg font-semibold tracking-tight">Classroom orientation</p>
-            <p class="text-sm text-white/60">Guided preflight briefing</p>
-          </div>
+  <main class="classroom-intro">
+    <div class="intro-glow intro-glow--one" aria-hidden="true"></div>
+    <div class="intro-glow intro-glow--two" aria-hidden="true"></div>
+
+    <section class="intro-shell" aria-labelledby="classroom-intro-title">
+      <div class="intro-copy">
+        <span class="eyebrow">
+          <v-icon icon="mdi-school-outline" size="17" />
+          Classroom
+        </span>
+
+        <h1 id="classroom-intro-title">Learn the radio patterns before Live ATC</h1>
+        <p class="lead">
+          Classroom breaks ICAO/SERA English into short guided drills. Read or listen to a prompt,
+          complete the safety-critical parts of the pilot response, check your answer, and repeat
+          with new training data.
+        </p>
+
+        <div class="steps" aria-label="How Classroom works">
+          <article>
+            <span class="step-number">1</span>
+            <div>
+              <h2>Understand the prompt</h2>
+              <p>Identify the clearance, instruction, or situation.</p>
+            </div>
+          </article>
+          <article>
+            <span class="step-number">2</span>
+            <div>
+              <h2>Build the pilot response</h2>
+              <p>Complete the required callsign, runway, level, heading, channel, or other critical elements.</p>
+            </div>
+          </article>
+          <article>
+            <span class="step-number">3</span>
+            <div>
+              <h2>Check and repeat</h2>
+              <p>See what was correct, review the standard phrase, and practise another variation.</p>
+            </div>
+          </article>
+        </div>
+
+        <div class="scope-note" role="note">
+          <v-icon icon="mdi-information-outline" size="20" />
+          <p>
+            Answers are typed. ATC audio is optional. Training values are synthetic and must not be
+            used for real-world operations.
+          </p>
+        </div>
+
+        <div class="intro-actions">
+          <NuxtLink
+            class="primary-action"
+            to="/classroom?panel=module&module=normalize&lesson=icao-alphabet"
+            @click="completeIntroduction"
+          >
+            Start with Foundations
+            <v-icon icon="mdi-arrow-right" size="20" />
+          </NuxtLink>
+          <NuxtLink class="secondary-action" to="/classroom" @click="completeIntroduction">
+            View all modules
+          </NuxtLink>
         </div>
-        <NuxtLink v-if="false" to="/classroom" class="btn primary" @click="handleClassroomEntry">
-          Enter Classroom hub
-          <v-icon icon="mdi-launch" size="18" class="text-[#061318]" />
-        </NuxtLink>
       </div>
-    </header>
 
-    <main>
-      <section class="relative border-b border-white/5">
-        <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-cyan-500/15 via-transparent to-indigo-500/25"></div>
-        <div class="relative z-10 mx-auto w-full max-w-screen-xl px-4 py-16 sm:px-6 md:px-8">
-          <div class="grid gap-12 lg:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)] lg:items-center">
-            <div class="space-y-6">
-              <span
-                class="inline-flex items-center gap-2 rounded-full border border-cyan-300/40 bg-cyan-400/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-cyan-200/80"
-              >Orientation</span>
-              <h1 class="text-3xl font-semibold leading-tight sm:text-4xl md:text-5xl">
-                Get comfortable with the Classroom
-              </h1>
-              <p class="max-w-2xl text-base text-white/80 sm:text-lg">
-                This is your training playground. Build phraseology, timing and confidence at your own pace. I will
-                guide you through the flow before you dive into the hub.
-              </p>
-
-              <ul class="grid gap-3 text-sm text-white/70 sm:grid-cols-2 sm:text-base">
-                <li class="flex items-start gap-3">
-                  <v-icon icon="mdi-compass-outline" size="20" class="mt-1 text-cyan-300" />
-                  <span>Follow a short, interactive tour so nothing drops on you all at once.</span>
-                </li>
-                <li class="flex items-start gap-3">
-                  <v-icon icon="mdi-headset" size="20" class="mt-1 text-cyan-300" />
-                  <span>Choose text only or let the instructor speak over a radio-style voice.</span>
-                </li>
-              </ul>
-            </div>
-            <div class="flex flex-col gap-6">
-              <div class="overflow-hidden rounded-3xl border border-white/10 bg-black/40 shadow-xl shadow-cyan-500/10">
-                <NuxtImg
-                  src="/img/learn/modules/img14.jpeg"
-                  alt="Pilots reviewing the Classroom mission board"
-                  class="h-56 w-full object-cover"
-                  loading="lazy"
-                  format="webp"
-                />
-              </div>
-              <div class="rounded-3xl border border-white/10 bg-[#0b1328]/90 p-6 shadow-xl shadow-cyan-500/10">
-                <div class="flex items-center gap-4">
-                  <NuxtImg src="/img/learn/instructor.png" alt="Avery, the Classroom instructor" class="h-14 w-14 rounded-2xl border border-cyan-400/40 object-cover" />
-                  <div>
-                    <p class="text-base font-semibold">Avery</p>
-                    <p class="text-sm text-white/60">Your Classroom instructor</p>
-                  </div>
-                </div>
-                <p class="mt-4 text-sm text-white/70">
-                  Hey! I will keep the pace relaxed and fun. Pick how you want to follow along and we will walk through each
-                  stop together.
-                </p>
-                <div class="mt-6 space-y-4">
-                  <div>
-                    <p class="text-xs uppercase tracking-[0.3em] text-cyan-200/70">Delivery</p>
-                    <div class="delivery-seg mt-3">
-                      <button
-                        type="button"
-                        class="delivery-seg-btn"
-                        :class="{ 'is-active': voiceMode === 'text' }"
-                        @click="setVoiceMode('text')"
-                        :aria-pressed="voiceMode === 'text'"
-                      >
-                        <v-icon icon="mdi-text" size="18" />
-                        Text only
-                      </button>
-                      <button
-                        type="button"
-                        class="delivery-seg-btn"
-                        :class="{ 'is-active': voiceMode === 'radio' }"
-                        @click="setVoiceMode('radio')"
-                        :aria-pressed="voiceMode === 'radio'"
-                      >
-                        <v-icon icon="mdi-radio-handheld" size="18" />
-                        Radio voice
-                      </button>
-                    </div>
-                  </div>
-                  <div
-                    v-if="voiceMode === 'radio'"
-                    class="space-y-4 rounded-2xl border border-cyan-400/30 bg-cyan-400/5 p-4"
-                  >
-                    <div>
-                      <label
-                        for="radio-level"
-                        class="flex items-center justify-between text-xs uppercase tracking-[0.2em] text-cyan-100/80"
-                      >
-                        Radio clarity
-                        <span class="text-[11px] text-cyan-100/60">Level {{ radioLevel }}</span>
-                      </label>
-                      <input
-                        id="radio-level"
-                        v-model.number="radioLevel"
-                        type="range"
-                        min="1"
-                        max="5"
-                        step="1"
-                        class="mt-2 h-1 w-full rounded-full accent-cyan-300"
-                      />
-                      <p class="mt-2 text-xs text-cyan-100/70">Lower numbers add static. Higher numbers sound crisp.</p>
-                    </div>
-                    <div class="flex flex-wrap items-center gap-3">
-                      <button
-                        type="button"
-                        class="btn primary"
-                        @click="handleRadioCheck"
-                        :disabled="speechLoading"
-                      >
-                        <v-icon
-                          :icon="speechLoading ? 'mdi-loading' : 'mdi-radio-check'"
-                          size="18"
-                          class="text-[#061318]"
-                          :class="{ 'animate-spin': speechLoading }"
-                        />
-                        {{ speechLoading ? 'Checking…' : hasCompletedRadioCheck ? 'Radio check again' : 'Run radio check' }}
-                      </button>
-                      <p v-if="!hasCompletedRadioCheck" class="text-xs text-cyan-100/70">
-                        Play a quick sample to confirm the instructor audio works.
-                      </p>
-                      <p v-else class="flex items-center gap-1 text-xs text-emerald-200/80">
-                        <v-icon icon="mdi-check-circle" size="16" class="text-emerald-300" />
-                        Loud and clear! Audio is ready.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <div class="mt-6 flex flex-wrap items-center gap-3">
-                  <button
-                    type="button"
-                    class="btn primary"
-                    @click="startTour"
-                    :disabled="startDisabled"
-                  >
-                    <v-icon icon="mdi-gesture-tap-button" size="18" class="text-[#061318]" />
-                    Start guided tour
-                  </button>
-                </div>
-                <p v-if="startDisabled && voiceMode === 'radio'" class="mt-2 text-xs text-amber-200/80">
-                  Run the radio check once so I know you can hear me before we roll.
-                </p>
-                <p v-if="speechError" class="mt-2 text-xs text-rose-200/80">
-                  {{ speechError }}
-                </p>
-                <NuxtLink
-                  to="/classroom"
-                  class="skip-classroom mt-5"
-                  @click="handleClassroomEntry"
-                >
-                  <span class="skip-classroom__icon" aria-hidden="true">
-                    <v-icon icon="mdi-skip-forward-circle-outline" size="22" />
-                  </span>
-                  <span class="text-left">
-                    <span class="block text-sm font-semibold">Skip orientation</span>
-                    <span class="mt-0.5 block text-xs">Go straight to the Classroom hub</span>
-                  </span>
-                  <v-icon icon="mdi-arrow-right" size="20" class="skip-classroom__arrow" aria-hidden="true" />
-                </NuxtLink>
-              </div>
-            </div>
+      <aside class="practice-card" aria-label="Example guided drill">
+        <div class="practice-card__top">
+          <span class="practice-kicker">Example · Mandatory readback</span>
+          <span class="synthetic-chip">Synthetic data</span>
+        </div>
+        <p class="controller-label">ATC prompt</p>
+        <blockquote>
+          “Training Two Four, turn left heading two seven zero, descend four thousand feet.”
+        </blockquote>
+        <div class="response-preview">
+          <p>Pilot readback</p>
+          <div>
+            Turn <span>left</span> heading <span>270</span>, descend <span>4,000 ft</span>,
+            <span>Training Two Four</span>
           </div>
         </div>
-      </section>
-
-      <section id="orientation" class="border-b border-white/5 bg-[#080f1f]/80 py-16 sm:py-20">
-        <div class="mx-auto flex w-full max-w-screen-xl flex-col gap-10 px-4 sm:px-6 md:px-8 lg:flex-row">
-          <aside class="shrink-0 rounded-3xl border border-white/10 bg-white/5 p-6 shadow-lg shadow-black/20 lg:w-80">
-            <p class="text-xs uppercase tracking-[0.3em] text-cyan-200/70">Itinerary</p>
-            <div class="mt-4">
-              <div class="flex items-center gap-3 text-xs text-white/70">
-                <div class="flex-1 overflow-hidden rounded-full bg-white/10">
-                  <div
-                    class="progress-fill"
-                    :style="{ width: `${stageProgress}%` }"
-                  ></div>
-                </div>
-                <span class="font-semibold text-white/80">{{ stageProgress }}%</span>
-              </div>
-              <p class="mt-2 text-[13px] text-white/60">
-                We will stop at {{ stages.length }} stations. Follow them in order for the smoothest ride.
-              </p>
-            </div>
-            <ol class="mt-6 space-y-2">
-              <li v-for="(stop, index) in stages" :key="stop.id">
-                <button
-                  type="button"
-                  class="group flex w-full items-center gap-3 rounded-2xl border border-white/5 px-4 py-3 text-left transition hover:border-cyan-300/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-200 focus-visible:ring-offset-2 focus-visible:ring-offset-[#080f1f]"
-                  :class="{
-                    'border-cyan-300/60 bg-cyan-400/10 text-white': tourStarted && index === stageIndex,
-                    'cursor-not-allowed opacity-50': index > unlockedStageIndex
-                  }"
-                  @click="goToStage(index)"
-                  :disabled="index > unlockedStageIndex"
-                >
-                  <div
-                    class="flex h-8 w-8 items-center justify-center rounded-full border border-cyan-300/50 bg-cyan-500/10 text-sm font-semibold text-cyan-200"
-                  >
-                    {{ index + 1 }}
-                  </div>
-                  <div class="flex-1">
-                    <p class="text-sm font-semibold text-white">{{ stop.title }}</p>
-                    <p v-if="tourStarted && index === stageIndex" class="text-xs text-white/60">{{ stop.summary }}</p>
-                  </div>
-                  <v-icon v-if="index < stageIndex" icon="mdi-check" size="18" class="text-emerald-300" />
-                </button>
-              </li>
-            </ol>
-            <button
-              v-if="tourStarted"
-              type="button"
-              class="btn ghost mini mt-6"
-              @click="restartTour"
-            >
-              <v-icon icon="mdi-refresh" size="18" class="text-cyan-200" />
-              Restart tour
-            </button>
-          </aside>
-
-          <div class="flex-1">
-            <div
-              v-if="!tourStarted"
-              class="flex h-full flex-col justify-center rounded-3xl border border-dashed border-white/10 bg-[#0a1326]/60 p-8 text-center shadow-inner shadow-black/20"
-            >
-              <p class="text-lg font-semibold">Ready when you are</p>
-              <p class="mt-3 text-sm text-white/70">
-                Start the guided tour above. I will only show one stop at a time so it never feels overwhelming.
-              </p>
-              <div class="mt-6 flex flex-wrap justify-center gap-3">
-                <button
-                  type="button"
-                  class="btn primary"
-                  @click="startTour"
-                  :disabled="startDisabled"
-                >
-                  <v-icon icon="mdi-gesture-tap-button" size="18" class="text-[#061318]" />
-                  Start guided tour
-                </button>
-              </div>
-              <p v-if="startDisabled && voiceMode === 'radio'" class="mt-4 text-xs text-amber-200/80">
-                Run the radio check above to enable the instructor voice.
-              </p>
-              <p v-if="speechError" class="mt-2 text-xs text-rose-200/80">
-                {{ speechError }}
-              </p>
-            </div>
-
-            <Transition name="fade-slide" mode="out-in">
-              <article
-                v-if="tourStarted"
-                :key="activeStage.id"
-                class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-b from-white/5 via-white/[0.03] to-white/[0.02] shadow-xl shadow-black/30"
-              >
-                <div class="relative h-48 w-full overflow-hidden border-b border-white/5 sm:h-56">
-                  <NuxtImg :src="activeStage.image" :alt="activeStage.imageAlt" class="h-full w-full object-cover" loading="lazy" />
-                  <div class="absolute inset-0 bg-gradient-to-t from-[#080f1f] via-transparent to-transparent"></div>
-                  <div class="absolute bottom-4 left-4 rounded-full bg-[#080f1f]/80 px-3 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-white/80">
-                    Stop {{ stageIndex + 1 }} of {{ stages.length }}
-                  </div>
-                </div>
-                <div class="space-y-6 px-6 py-8 sm:px-8">
-                  <div class="flex flex-wrap items-start justify-between gap-4">
-                    <div>
-                      <h2 class="text-2xl font-semibold">{{ activeStage.title }}</h2>
-                      <p class="mt-2 max-w-2xl text-sm text-white/70">
-                        {{ activeStage.summary }}
-                      </p>
-                    </div>
-                    <div class="rounded-2xl border border-cyan-300/40 bg-cyan-400/10 px-4 py-2 text-sm font-semibold text-cyan-100/90">
-                      {{ progressLabel }}
-                    </div>
-                  </div>
-
-                  <ul class="space-y-3 text-sm text-white/75">
-                    <li v-for="(point, pointIndex) in activeStage.points" :key="pointIndex" class="flex items-start gap-3">
-                      <v-icon icon="mdi-check-circle-outline" size="18" class="mt-0.5 text-cyan-300" />
-                      <span>{{ point }}</span>
-                    </li>
-                  </ul>
-
-                  <div v-if="activeStage.tip" class="rounded-2xl border border-emerald-300/30 bg-emerald-400/10 p-4 text-sm text-emerald-100/90">
-                    <div class="flex items-start gap-3">
-                      <v-icon icon="mdi-lightbulb-on-outline" size="20" class="mt-0.5 text-emerald-200" />
-                      <div>
-                        <p class="font-semibold text-emerald-50">Instructor tip</p>
-                        <p class="mt-1 text-emerald-100/80">{{ activeStage.tip }}</p>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div class="rounded-2xl border border-white/10 bg-[#0c162c]/80 p-4 sm:p-5">
-                    <div class="flex items-start gap-4">
-                      <NuxtImg
-                        src="/img/learn/instructor.png"
-                        alt="Avery instructor avatar"
-                        class="h-24 w-24 rounded-2xl border border-cyan-400/40 object-cover"
-                      />
-                      <div class="flex-1 space-y-3">
-                        <div class="flex flex-wrap items-center gap-2">
-                          <p class="text-xl font-semibold text-white">Avery on comms</p>
-                          <span
-                            v-if="voiceMode === 'radio' && speechPlaying"
-                            class="inline-flex items-center gap-1 rounded-full bg-emerald-400/15 px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-emerald-200"
-                          >
-                            <v-icon icon="mdi-volume-high" size="14" class="text-emerald-200" />
-                            Speaking
-                          </span>
-                        </div>
-                        <p class="text-sm text-white/70">
-                          "{{ activeStage.voiceLine }}"
-                        </p>
-                        <div v-if="voiceMode === 'radio'" class="flex flex-wrap items-center gap-3">
-                          <button
-                            type="button"
-                            class="btn soft mini voice-replay"
-                            @click="replayStageVoice"
-                            :disabled="speechLoading"
-                          >
-                            <v-icon
-                              :icon="speechLoading ? 'mdi-loading' : 'mdi-replay'"
-                              size="18"
-                              class="text-cyan-200"
-                              :class="{ 'animate-spin': speechLoading }"
-                            />
-                            Replay radio voice
-                          </button>
-                          <p v-if="speechError" class="text-xs text-rose-200/80">{{ speechError }}</p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div class="border-t border-white/10 pt-6">
-                    <div class="flex flex-wrap items-center gap-3">
-                      <button
-                        v-if="canGoPrevious"
-                        type="button"
-                        class="btn ghost"
-                        @click="goToPrevious"
-                      >
-                        <v-icon icon="mdi-arrow-left" size="18" class="text-cyan-200" />
-                        Previous stop
-                      </button>
-                      <div class="ml-auto flex flex-wrap items-center gap-3">
-                        <button
-                          v-if="voiceMode === 'radio'"
-                          type="button"
-                          class="btn ghost mini play-again"
-                          @click="maybeSpeakForStage"
-                          :disabled="speechLoading"
-                        >
-                          <v-icon icon="mdi-play-circle" size="16" class="text-cyan-200" />
-                          Play again
-                        </button>
-                        <button
-                          v-if="canGoNext"
-                          type="button"
-                          class="btn primary"
-                          @click="goToNext"
-                        >
-                          Next stop
-                          <v-icon icon="mdi-arrow-right" size="18" class="text-[#061318]" />
-                        </button>
-                      <NuxtLink v-else to="/classroom" class="btn primary" @click="handleClassroomEntry">
-                        Enter Classroom hub
-                          <v-icon icon="mdi-launch" size="18" class="text-[#061318]" />
-                      </NuxtLink>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </article>
-            </Transition>
+        <div class="check-row">
+          <v-icon icon="mdi-check-circle" size="22" />
+          <div>
+            <strong>4 of 4 required elements correct</strong>
+            <span>Direction, heading, level, and callsign</span>
           </div>
         </div>
-      </section>
-    </main>
-  </div>
+      </aside>
+    </section>
+  </main>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
-import { useHead } from '#imports'
-import { useApi } from '~/composables/useApi'
 import { CLASSROOM_INTRO_STORAGE_KEY } from '~~/shared/constants/storage'
-import type { PizzicatoLite } from '~~/shared/utils/pizzicatoLite'
-import { loadPizzicatoLite } from '~~/shared/utils/pizzicatoLite'
-import { clampReadability, createNoiseGenerators, getReadabilityProfile } from '~~/shared/utils/radioEffects'
 
-type VoiceMode = 'text' | 'radio'
+definePageMeta({ middleware: ['require-auth'] })
 
-interface StageStop {
-  id: string
-  title: string
-  summary: string
-  points: string[]
-  tip?: string
-  image: string
-  imageAlt: string
-  voiceLine: string
+function completeIntroduction() {
+  if (!import.meta.client) return
+  window.localStorage.setItem(CLASSROOM_INTRO_STORAGE_KEY, 'true')
 }
-
-definePageMeta({ middleware: 'require-auth' })
-
-useHead({ title: 'Classroom orientation • OpenSquawk' })
-
-const stages: StageStop[] = [
-  {
-    id: 'hub',
-    title: 'Mission hub',
-    summary: 'Browse modules, see XP progress and decide what to train next.',
-    points: [
-      'Each tile shows remaining lessons, best scores and unlock status.',
-      'Use “Continue” to jump back into the last lesson you touched.'
-    ],
-    tip: 'Hover or tap a tile for a quick brief before opening it.',
-    image: '/img/learn/modules/img11.jpeg',
-    imageAlt: 'Classroom mission hub interface with highlighted modules',
-    voiceLine:
-      'First stop is the mission hub. This is our briefing room before any AI frequency opens. Pick the module you want and you are two clicks from a lesson.'
-  },
-  {
-    id: 'planning',
-    title: 'Plan your mission',
-    summary: 'Some lessons need a quick flight setup so the scenario makes sense.',
-    points: [
-      'Roll a random plan for an instant route or import SimBrief if you have one ready.',
-      'Confirm the callsign, runway notes and weather before starting the lesson.'
-    ],
-    tip: 'Full Flight missions always start here, while most drills jump straight into the console.',
-    image: '/img/learn/modules/img3.jpeg',
-    imageAlt: 'Pilots preparing a flight plan on a tablet',
-    voiceLine:
-      'When a mission asks for a plan, choose Random, Manual or SimBrief. Try the random generator at least once—it is the fastest way to get airborne.'
-  },
-  {
-    id: 'console',
-    title: 'Lesson console',
-    summary: 'Play the ATC clip, give your readback and grade it when ready.',
-    points: [
-      'Press Play to hear ATC, type or speak your response and tap Check to score it.',
-      'Reveal hints or slow the audio whenever you need extra help.'
-    ],
-    tip: 'The console saves your best answer so you can see improvement at a glance.',
-    image: '/img/learn/modules/img8.jpeg',
-    imageAlt: 'Lesson console showing ATC playback controls',
-    voiceLine:
-      'Inside the console you control the pace. Listen to the call, craft your readback and check it only when it sounds right to you.'
-  },
-  {
-    id: 'settings',
-    title: 'Practice boosters',
-    summary: 'Tune the challenge level whenever you want a new workout.',
-    points: [
-      'Adjust audio speed and radio clarity to simulate a quiet or busy frequency.',
-      'Enable Audio Challenge to hide on-screen text once you feel confident.'
-    ],
-    tip: 'Drop the radio level for extra static when you want to stress-test your ears.',
-    image: '/img/learn/modules/img10.jpeg',
-    imageAlt: 'Audio settings and challenge toggles inside the Classroom',
-    voiceLine:
-      'Your settings live here. Slide the radio level for more or less static and flip on Audio Challenge when you want the full listen-and-respond workout.'
-  },
-  {
-    id: 'wrap',
-    title: 'Wrap-up & next steps',
-    summary: 'Review the scorecard and pick your next move back in the hub.',
-    points: [
-      'Every lesson ends with accuracy notes, timing feedback and retry suggestions.',
-      'Use the summary to decide whether to repeat, advance or swap to another module.'
-    ],
-    tip: 'Bookmark /classroom so a quick refresher is always a tab away.',
-    image: '/img/learn/modules/img7.jpeg',
-    imageAlt: 'Pilot reviewing a scorecard summary',
-    voiceLine:
-      'That is the full loop. Check the scorecard for anything to repeat, then head back to the hub and pick your next practice hop.'
-  }
-]
-
-const api = useApi()
-
-function markClassroomIntroComplete() {
-  if (typeof window === 'undefined') return
-  localStorage.setItem(CLASSROOM_INTRO_STORAGE_KEY, 'true')
-}
-
-function handleClassroomEntry() {
-  markClassroomIntroComplete()
-}
-
-const voiceMode = ref<VoiceMode>('text')
-const radioLevel = ref(5)
-const hasCompletedRadioCheck = ref(false)
-const tourStarted = ref(false)
-const stageIndex = ref(0)
-const unlockedStageIndex = ref(0)
-
-const speechLoading = ref(false)
-const speechPlaying = ref(false)
-const speechError = ref<string | null>(null)
-const audioElement = ref<HTMLAudioElement | null>(null)
-let speechRequestId = 0
-
-const isClient = typeof window !== 'undefined'
-let speechContext: AudioContext | null = null
-let pizzicatoLiteInstance: PizzicatoLite | null = null
-type RadioSoundInstance = Awaited<ReturnType<PizzicatoLite['createSoundFromBase64']>>
-let activeRadioSound: RadioSoundInstance | null = null
-let activeRadioCleanup: Array<() => void> = []
-
-const activeStage = computed(() => stages[stageIndex.value])
-const canGoPrevious = computed(() => stageIndex.value > 0)
-const canGoNext = computed(() => stageIndex.value < stages.length - 1)
-const stageProgress = computed(() => {
-  if (!tourStarted.value) return 0
-  const raw = ((stageIndex.value + 1) / stages.length) * 100
-  return Math.min(100, Math.max(0, Math.round(raw)))
-})
-const progressLabel = computed(() => {
-  if (!tourStarted.value) return 'Not started yet'
-  return `Leg ${stageIndex.value + 1} · ${stageProgress.value}% ready`
-})
-const startDisabled = computed(() => voiceMode.value === 'radio' && !hasCompletedRadioCheck.value)
-
-async function ensureSpeechAudioContext(): Promise<AudioContext | null> {
-  if (!isClient) return null
-
-  const audioWindow = window as typeof window & { webkitAudioContext?: typeof AudioContext }
-  const AudioContextCtor = audioWindow.AudioContext || audioWindow.webkitAudioContext
-  if (!AudioContextCtor) return null
-
-  if (!speechContext || speechContext.state === 'closed') {
-    speechContext = new AudioContextCtor()
-  }
-
-  if (speechContext.state === 'suspended') {
-    try {
-      await speechContext.resume()
-    } catch (error) {
-      console.warn('Failed to resume speech audio context', error)
-    }
-  }
-
-  return speechContext
-}
-
-async function ensurePizzicato(ctx: AudioContext | null): Promise<PizzicatoLite | null> {
-  if (!ctx) return null
-  if (!pizzicatoLiteInstance) {
-    pizzicatoLiteInstance = await loadPizzicatoLite()
-  }
-  return pizzicatoLiteInstance
-}
-
-function setMediaElementPreservesPitch(media: HTMLMediaElement | null, preserve: boolean) {
-  if (!media) return
-  const target = !!preserve
-  try {
-    ;(media as any).preservesPitch = target
-  } catch {
-    // ignore unsupported assignments
-  }
-  try {
-    ;(media as any).mozPreservesPitch = target
-  } catch {
-    // ignore unsupported assignments
-  }
-  try {
-    ;(media as any).webkitPreservesPitch = target
-  } catch {
-    // ignore unsupported assignments
-  }
-}
-
-function releaseRadio(cleanups: Array<() => void>, sound: RadioSoundInstance | null) {
-  if (activeRadioSound === sound) {
-    activeRadioSound = null
-  }
-  if (activeRadioCleanup === cleanups) {
-    activeRadioCleanup = []
-  }
-  if (cleanups.length) {
-    cleanups.forEach(stop => {
-      try {
-        stop()
-      } catch {
-        // ignore cleanup failures
-      }
-    })
-    cleanups.length = 0
-  }
-  sound?.clearEffects()
-}
-
-async function playWithRadioEffect(base64: string, readability: number, requestId: number): Promise<boolean> {
-  let sound: RadioSoundInstance | null = null
-  const cleanups: Array<() => void> = []
-
-  try {
-    const ctx = await ensureSpeechAudioContext()
-    if (!ctx || speechRequestId !== requestId) return false
-
-    const pizzicato = await ensurePizzicato(ctx)
-    if (!pizzicato || speechRequestId !== requestId) return false
-
-    sound = await pizzicato.createSoundFromBase64(ctx, base64)
-    if (!sound || speechRequestId !== requestId) return false
-
-    const profile = getReadabilityProfile(readability)
-    const { Effects } = pizzicato
-
-    const highpass = new Effects.HighPassFilter(ctx, {
-      frequency: profile.eq.highpass,
-      q: profile.eq.highpassQ
-    })
-    const lowpass = new Effects.LowPassFilter(ctx, {
-      frequency: profile.eq.lowpass,
-      q: profile.eq.lowpassQ
-    })
-
-    sound.addEffect(highpass)
-    sound.addEffect(lowpass)
-
-    if (profile.eq.bandpass) {
-      sound.addEffect(
-        new Effects.BandPassFilter(ctx, {
-          frequency: profile.eq.bandpass.frequency,
-          q: profile.eq.bandpass.q
-        })
-      )
-    }
-
-    if (profile.presence) {
-      sound.addEffect(new Effects.PeakingFilter(ctx, profile.presence))
-    }
-
-    profile.distortions.forEach(amount => {
-      sound?.addEffect(new Effects.Distortion(ctx, { amount }))
-    })
-
-    sound.addEffect(new Effects.Compressor(ctx, profile.compressor))
-
-    if (profile.tremolos) {
-      profile.tremolos.forEach(tremolo => {
-        sound?.addEffect(new Effects.Tremolo(ctx, tremolo))
-      })
-    }
-
-    sound.setVolume(profile.gain)
-
-    const playbackDuration = Math.max(0.1, sound.duration)
-    cleanups.push(...createNoiseGenerators(ctx, playbackDuration, profile, readability))
-
-    if (speechRequestId !== requestId) {
-      releaseRadio(cleanups, sound)
-      return false
-    }
-
-    activeRadioSound = sound
-    activeRadioCleanup = cleanups
-
-    if (speechRequestId !== requestId) {
-      releaseRadio(cleanups, sound)
-      return false
-    }
-
-    const playbackPromise = sound.play()
-    if (speechRequestId === requestId) {
-      speechPlaying.value = true
-    }
-
-    playbackPromise.finally(() => {
-      const shouldUpdateState = speechRequestId === requestId
-      releaseRadio(cleanups, sound)
-      if (shouldUpdateState) {
-        speechPlaying.value = false
-      }
-    })
-
-    return true
-  } catch (error) {
-    releaseRadio(cleanups, sound)
-    console.error('Failed to apply radio effect', error)
-    return false
-  }
-}
-
-function stopAudio(advanceRequestId = true) {
-  speechPlaying.value = false
-
-  if (activeRadioSound || activeRadioCleanup.length) {
-    const sound = activeRadioSound
-    if (sound) {
-      try {
-        sound.stop()
-      } catch (error) {
-        console.warn('Failed to stop radio voice', error)
-      }
-    }
-    releaseRadio(activeRadioCleanup, sound ?? null)
-  }
-
-  if (audioElement.value) {
-    try {
-      audioElement.value.pause()
-      audioElement.value.currentTime = 0
-    } catch (error) {
-      console.warn('Failed to stop audio', error)
-    }
-    audioElement.value = null
-  }
-
-  if (advanceRequestId) {
-    speechRequestId += 1
-  }
-}
-
-async function speak(text: string, stageId?: string): Promise<boolean> {
-  const trimmed = text?.trim()
-  if (!trimmed) return false
-
-  stopAudio(false)
-
-  const requestId = ++speechRequestId
-
-  speechError.value = null
-  speechLoading.value = true
-  speechPlaying.value = false
-
-  try {
-    const payload: Record<string, unknown> = {
-      text: trimmed,
-      level: radioLevel.value,
-      speed: 1,
-      moduleId: 'classroom-intro',
-      lessonId: stageId || null,
-      tag: 'classroom-orientation'
-    }
-
-    const response: any = await api.post('/api/atc/say', payload)
-    if (requestId !== speechRequestId) {
-      return false
-    }
-
-    const base64 = response?.audio?.base64
-    if (!base64 || typeof base64 !== 'string') {
-      throw new Error('The radio voice is unavailable right now.')
-    }
-
-    const mime = response?.audio?.mime || 'audio/wav'
-    const readability = clampReadability(radioLevel.value)
-
-    const playedWithEffects = await playWithRadioEffect(base64, readability, requestId)
-    if (requestId !== speechRequestId) {
-      return false
-    }
-
-    if (playedWithEffects) {
-      return true
-    }
-
-    const audio = new Audio(`data:${mime};base64,${base64}`)
-    audio.preload = 'auto'
-    setMediaElementPreservesPitch(audio, true)
-
-    audio.onended = () => {
-      if (speechRequestId === requestId) {
-        speechPlaying.value = false
-        if (audioElement.value === audio) {
-          audioElement.value = null
-        }
-      }
-    }
-
-    audio.onerror = () => {
-      if (speechRequestId === requestId) {
-        speechPlaying.value = false
-        speechError.value = 'Playback failed. Check your audio output and try again.'
-        if (audioElement.value === audio) {
-          audioElement.value = null
-        }
-      }
-    }
-
-    audioElement.value = audio
-
-    try {
-      await audio.play()
-      if (speechRequestId === requestId) {
-        speechPlaying.value = true
-      }
-      return true
-    } catch (error) {
-      if (speechRequestId === requestId) {
-        speechError.value = 'Audio was blocked by the browser. Click anywhere on the page and try again.'
-        speechPlaying.value = false
-        if (audioElement.value === audio) {
-          audioElement.value = null
-        }
-      }
-      return false
-    }
-  } catch (error: any) {
-    if (speechRequestId === requestId) {
-      const message = typeof error?.message === 'string' ? error.message : 'The radio voice is unavailable right now.'
-      speechError.value = message
-    }
-    return false
-  } finally {
-    if (speechRequestId === requestId) {
-      speechLoading.value = false
-    }
-  }
-}
-
-async function handleRadioCheck() {
-  if (speechLoading.value) return
-  const success = await speak('Classmate, this is Avery. If you can hear me loud and clear, give me a thumbs up and we will taxi to the first stop.', 'radio-check')
-  if (success) {
-    hasCompletedRadioCheck.value = true
-  }
-}
-
-async function maybeSpeakForStage() {
-  if (!tourStarted.value || voiceMode.value !== 'radio' || !hasCompletedRadioCheck.value) return
-  const stage = activeStage.value
-  if (!stage?.voiceLine) return
-  await nextTick()
-  await speak(stage.voiceLine, stage.id)
-}
-
-function replayStageVoice() {
-  maybeSpeakForStage()
-}
-
-async function startTour() {
-  if (startDisabled.value) return
-  stageIndex.value = 0
-  unlockedStageIndex.value = 0
-  if (!tourStarted.value) {
-    tourStarted.value = true
-    await nextTick()
-    if (typeof window !== 'undefined') {
-      document.getElementById('orientation')?.scrollIntoView({ behavior: 'smooth', block: 'start' })
-    }
-  }
-  await maybeSpeakForStage()
-}
-
-function goToStage(index: number) {
-  if (!tourStarted.value) return
-  if (index < 0 || index >= stages.length) return
-  if (index > unlockedStageIndex.value) return
-  if (stageIndex.value === index) {
-    maybeSpeakForStage()
-    return
-  }
-  stageIndex.value = index
-  maybeSpeakForStage()
-}
-
-function goToNext() {
-  if (!canGoNext.value) return
-  stageIndex.value = Math.min(stages.length - 1, stageIndex.value + 1)
-  unlockedStageIndex.value = Math.max(unlockedStageIndex.value, stageIndex.value)
-  maybeSpeakForStage()
-}
-
-function goToPrevious() {
-  if (!canGoPrevious.value) return
-  stageIndex.value = Math.max(0, stageIndex.value - 1)
-  maybeSpeakForStage()
-}
-
-function restartTour() {
-  stageIndex.value = 0
-  unlockedStageIndex.value = 0
-  if (!tourStarted.value) {
-    tourStarted.value = true
-  }
-  maybeSpeakForStage()
-}
-
-function setVoiceMode(mode: VoiceMode) {
-  if (voiceMode.value === mode) return
-  voiceMode.value = mode
-  stopAudio()
-  if (mode === 'radio') {
-    hasCompletedRadioCheck.value = false
-  } else {
-    speechError.value = null
-  }
-}
-
-watch(
-  () => [tourStarted.value, stageIndex.value, voiceMode.value, hasCompletedRadioCheck.value],
-  () => {
-    maybeSpeakForStage()
-  }
-)
-
-onBeforeUnmount(() => {
-  stopAudio()
-})
 </script>
 
 <style scoped>
-/* Single pill instead of two competing buttons — this is a delivery
-   preference, not a second call to action next to "Start guided tour". */
-.delivery-seg {
-  display: flex;
-  gap: 4px;
-  padding: 4px;
-  border-radius: 14px;
-  border: 1px solid var(--border);
-  background: color-mix(in srgb, var(--text) 4%, transparent);
+.classroom-intro {
+  --ink: #f5f8ff;
+  --muted: #a9b7cc;
+  min-height: 100dvh;
+  display: grid;
+  place-items: center;
+  position: relative;
+  overflow: hidden;
+  padding: clamp(24px, 5vw, 64px);
+  color: var(--ink);
+  background:
+    radial-gradient(circle at 18% 12%, rgba(34, 211, 238, .12), transparent 34%),
+    linear-gradient(145deg, #060b16 0%, #0a1324 55%, #07111c 100%);
 }
 
-.delivery-seg-btn {
-  flex: 1 1 0;
+.intro-glow {
+  position: absolute;
+  width: 360px;
+  height: 360px;
+  border-radius: 999px;
+  filter: blur(100px);
+  opacity: .18;
+  pointer-events: none;
+}
+
+.intro-glow--one { background: #22d3ee; top: -180px; right: 5%; }
+.intro-glow--two { background: #3b82f6; bottom: -220px; left: -80px; }
+
+.intro-shell {
+  position: relative;
+  z-index: 1;
+  width: min(1180px, 100%);
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
+  align-items: center;
+  gap: clamp(36px, 6vw, 86px);
+}
+
+.eyebrow {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   gap: 8px;
-  padding: 9px 12px;
-  border-radius: 10px;
-  font-size: 13.5px;
-  font-weight: 600;
-  color: var(--t3);
-  transition: color 130ms ease, background 130ms ease;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.delivery-seg-btn:hover {
-  color: color-mix(in srgb, var(--text) 85%, transparent);
-}
-
-.delivery-seg-btn.is-active {
-  color: #050910;
-  background: #22d3ee;
-}
-
-.voice-replay {
-  color: var(--t2);
-}
-
-.voice-replay:disabled {
-  opacity: 0.6;
-}
-
-.play-again {
-  letter-spacing: 0.2em;
+  color: #89edff;
+  font-size: .75rem;
+  font-weight: 800;
+  letter-spacing: .18em;
   text-transform: uppercase;
 }
 
-.skip-classroom {
-  display: flex;
-  align-items: center;
+h1 {
+  max-width: 760px;
+  margin: 16px 0;
+  font-size: clamp(2.25rem, 5vw, 4.7rem);
+  line-height: .99;
+  letter-spacing: -.045em;
+}
+
+.lead {
+  max-width: 720px;
+  color: var(--muted);
+  font-size: clamp(1rem, 1.6vw, 1.2rem);
+  line-height: 1.65;
+}
+
+.steps {
+  display: grid;
   gap: 12px;
-  width: 100%;
-  padding: 12px 14px;
-  border: 1px solid color-mix(in srgb, #67e8f9 42%, transparent);
-  border-radius: 14px;
-  background: color-mix(in srgb, #22d3ee 10%, transparent);
-  color: rgb(207 250 254 / 0.9);
-  text-decoration: none;
-  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
+  margin: 28px 0 22px;
 }
 
-.skip-classroom:hover,
-.skip-classroom:focus-visible {
-  border-color: rgb(103 232 249 / 0.85);
-  background: color-mix(in srgb, #22d3ee 18%, transparent);
-  color: #ecfeff;
-  transform: translateY(-1px);
+.steps article {
+  display: grid;
+  grid-template-columns: 38px 1fr;
+  gap: 14px;
+  align-items: start;
 }
 
-.skip-classroom:focus-visible {
-  outline: 2px solid #67e8f9;
-  outline-offset: 3px;
+.step-number {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border: 1px solid rgba(103, 232, 249, .35);
+  border-radius: 10px;
+  color: #8cecff;
+  background: rgba(34, 211, 238, .08);
+  font-weight: 800;
 }
 
-.skip-classroom__icon {
+.steps h2 {
+  margin: 1px 0 3px;
+  font-size: 1rem;
+}
+
+.steps p,
+.scope-note p {
+  margin: 0;
+  color: var(--muted);
+  font-size: .9rem;
+  line-height: 1.5;
+}
+
+.scope-note {
+  display: flex;
+  gap: 12px;
+  max-width: 720px;
+  padding: 13px 15px;
+  border: 1px solid rgba(251, 191, 36, .2);
+  border-radius: 12px;
+  color: #fcd34d;
+  background: rgba(251, 191, 36, .055);
+}
+
+.intro-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 14px;
+  margin-top: 24px;
+}
+
+.primary-action,
+.secondary-action {
   display: inline-flex;
-  flex: 0 0 auto;
   align-items: center;
   justify-content: center;
-  width: 38px;
-  height: 38px;
-  border-radius: 10px;
-  background: rgb(103 232 249 / 0.14);
-  color: #a5f3fc;
+  gap: 9px;
+  min-height: 46px;
+  border-radius: 12px;
+  padding: 0 19px;
+  font-weight: 800;
+  text-decoration: none;
+  transition: transform .18s ease, border-color .18s ease, background .18s ease;
 }
 
-.skip-classroom__arrow {
-  flex: 0 0 auto;
-  margin-left: auto;
+.primary-action {
+  color: #031217;
+  background: linear-gradient(135deg, #67e8f9, #22d3ee);
+  box-shadow: 0 14px 36px rgba(34, 211, 238, .2);
 }
 
-.progress-fill {
-  height: 0.5rem;
-  border-radius: 9999px;
-  background: linear-gradient(90deg, rgba(34, 211, 238, 0.85), rgba(14, 165, 233, 0.92));
-  box-shadow: 0 0 18px rgba(14, 165, 233, 0.35);
-  transition: width 0.45s ease;
+.secondary-action {
+  border: 1px solid rgba(255,255,255,.14);
+  color: #dce8f7;
+  background: rgba(255,255,255,.04);
 }
 
-.fade-slide-enter-active,
-.fade-slide-leave-active {
-  transition: opacity 0.4s ease, transform 0.4s ease;
+.primary-action:hover,
+.secondary-action:hover { transform: translateY(-2px); }
+.secondary-action:hover { border-color: rgba(103,232,249,.4); }
+
+.practice-card {
+  border: 1px solid rgba(255,255,255,.12);
+  border-radius: 24px;
+  padding: clamp(22px, 3vw, 32px);
+  background: linear-gradient(160deg, rgba(18,31,52,.94), rgba(8,17,31,.96));
+  box-shadow: 0 28px 80px rgba(0,0,0,.38);
 }
 
-.fade-slide-enter-from,
-.fade-slide-leave-to {
-  opacity: 0;
-  transform: translateY(16px);
+.practice-card__top {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+}
+
+.practice-kicker,
+.controller-label {
+  color: #93a4bb;
+  font-size: .7rem;
+  font-weight: 800;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+}
+
+.synthetic-chip {
+  padding: 5px 8px;
+  border-radius: 999px;
+  color: #fcd34d;
+  background: rgba(251,191,36,.09);
+  font-size: .68rem;
+  font-weight: 800;
+}
+
+.controller-label { margin: 28px 0 8px; color: #79e8fa; }
+
+blockquote {
+  margin: 0;
+  color: #f2f7ff;
+  font-size: 1.15rem;
+  line-height: 1.6;
+}
+
+.response-preview {
+  margin-top: 24px;
+  padding: 18px;
+  border-radius: 14px;
+  background: rgba(2,8,18,.65);
+}
+
+.response-preview p {
+  margin: 0 0 10px;
+  color: #93a4bb;
+  font-size: .72rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.response-preview div { line-height: 2.1; }
+.response-preview span {
+  padding: 4px 7px;
+  border-bottom: 1px solid #22d3ee;
+  border-radius: 5px 5px 0 0;
+  background: rgba(34,211,238,.1);
+}
+
+.check-row {
+  display: flex;
+  gap: 12px;
+  margin-top: 18px;
+  color: #6ee7b7;
+}
+
+.check-row div { display: grid; gap: 2px; }
+.check-row span { color: #91a2b8; font-size: .78rem; }
+
+@media (max-width: 900px) {
+  .classroom-intro { place-items: start center; overflow: auto; }
+  .intro-shell { grid-template-columns: 1fr; }
+  .practice-card { max-width: 620px; }
+}
+
+@media (max-width: 560px) {
+  .classroom-intro { padding: 24px 18px 36px; }
+  h1 { font-size: 2.45rem; }
+  .intro-actions { align-items: stretch; flex-direction: column; }
+  .practice-card__top { align-items: flex-start; flex-direction: column; }
 }
 </style>
diff --git a/app/pages/classroom.vue b/app/pages/classroom.vue
index 4c2370b..a6e897c 100644
--- a/app/pages/classroom.vue
+++ b/app/pages/classroom.vue
@@ -27,7 +27,7 @@
                 <v-icon size="18" class="experience-option-icon">mdi-school</v-icon>
                 <div class="experience-option-body">
                   <div class="experience-option-title">Classroom</div>
-                  <div class="experience-option-sub">Mission hub & drills</div>
+                  <div class="experience-option-sub">Guided ICAO/SERA radio drills</div>
                 </div>
                 <v-icon size="16" class="experience-option-check">mdi-check</v-icon>
               </div>
@@ -157,8 +157,12 @@
     <!-- HUB -->
     <main v-if="panel==='hub'" class="container" role="main">
       <div class="hub-head">
-        <h2 class="h2">Training Mission Hub</h2>
-        <div class="muted">Start with the ICAO alphabet & numbers, then basics, ground, and more.</div>
+        <h2 class="h2">Build the radio patterns before Live ATC</h2>
+        <div class="muted">Start with Foundations, master the mandatory elements, then practise a complete guided flight.</div>
+        <div class="training-data-notice" role="note">
+          <v-icon size="18">mdi-flask-outline</v-icon>
+          Synthetic training data — not for operational use
+        </div>
       </div>
 
       <div class="tiles">
@@ -171,9 +175,9 @@
         >
           <div class="tile-media"
                :style="{ backgroundImage: `url(${m.art})` }">
-            <span v-if="isFreshModule(m.id)" class="tile-badge">
-              <v-icon size="16">mdi-star</v-icon>
-              New briefing
+            <span class="tile-badge">
+              <v-icon size="16">mdi-format-list-numbered</v-icon>
+              Step {{ moduleNumber(m.id) }} · Recommended order
             </span>
           </div>
           <div class="tile-body">
@@ -189,13 +193,12 @@
               <div class="line-fill" :style="{ width: pct(m.id)+'%' }"></div>
             </div>
             <div class="tile-progress-meta">
-              <span>{{ doneCount(m.id) }}/{{ m.lessons.length }} lessons</span>
-              <span>{{ moduleHasProgress(m.id) ? avgScore(m.id) + '%' : '—' }} avg</span>
+              <span>{{ doneCount(m.id) }}/{{ m.lessons.length }} mastered</span>
+              <span>{{ practisingCount(m.id) }} practising</span>
             </div>
             <div class="tile-actions">
               <button
                   class="btn primary"
-                  :disabled="!isModuleUnlocked(m.id)"
                   @click="handleModulePrimary(m.id)"
               >
                 <v-icon size="18">{{ modulePrimaryIcon(m.id) }}</v-icon>
@@ -204,24 +207,6 @@
 
             </div>
           </div>
-          <div v-if="!isModuleUnlocked(m.id)" class="tile-overlay">
-            <div class="tile-overlay-inner">
-              <v-icon size="26">mdi-lock-alert</v-icon>
-              <div class="tile-overlay-text">
-                <div class="tile-overlay-title">Clearance pending</div>
-                <div class="tile-overlay-sub">
-                  Complete earlier missions to
-                  <button
-                      type="button"
-                      class="tile-overlay-link"
-                      @click.stop.prevent="attemptUnlockModule(m.id)"
-                  >unlock
-                  </button>
-                  this briefing.
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </main>
@@ -241,8 +226,8 @@
             Hub
           </button>
           <span class="muted" v-if="moduleStage==='lessons'">/ {{ current.title }}</span>
-          <span class="muted" v-else-if="moduleStage==='setup'">/ Mission setup</span>
-          <span class="muted" v-else>/ Mission briefing</span>
+          <span class="muted" v-else-if="moduleStage==='setup'">/ Sequence setup</span>
+          <span class="muted" v-else>/ Training briefing</span>
         </div>
         <div class="play-tools">
           <div v-if="requiresFlightPlan" class="plan-status" :class="{ 'is-ready': !!currentPlan }">
@@ -273,7 +258,7 @@
             <span class="stat"><v-icon size="18">mdi-check-circle-outline</v-icon> {{
                 doneCount(current.id)
               }}/{{ current.lessons.length }}</span>
-            <span class="stat"><v-icon size="18">mdi-star</v-icon> Ø {{ avgScore(current.id) }}%</span>
+            <span class="stat"><v-icon size="18">mdi-progress-pencil</v-icon> {{ practisingCount(current.id) }} practising</span>
           </div>
         </div>
       </div>
@@ -281,7 +266,11 @@
       <div v-if="moduleStage==='setup'" class="module-stage-panel mission-setup">
         <div class="setup-header">
           <h2 class="h3">Choose your flight</h2>
-          <p class="muted small">Lock in a gate-to-gate scenario before the radio work begins.</p>
+          <p class="muted small">Choose the data for one consistent guided sequence. Values are for training only.</p>
+          <div class="training-data-notice" role="note">
+            <v-icon size="18">mdi-alert-outline</v-icon>
+            Imported or manual values are not checked against charts, AIRAC data, or current frequencies.
+          </div>
         </div>
         <div class="plan-modes">
           <button
@@ -335,7 +324,7 @@
                     <v-icon size="20">mdi-pencil</v-icon>
                   </div>
                   <div>
-                    <div class="manual-card-title">Design your own mission</div>
+                    <div class="manual-card-title">Set up a training sequence</div>
                     <p class="muted small">Fill in the essentials below. Expand the optional sections when you want to
                       brief gates, taxi routes or procedures.</p>
                   </div>
@@ -544,7 +533,7 @@
                 </button>
                 <button class="btn primary" type="submit">
                   <v-icon size="18">mdi-clipboard-text-outline</v-icon>
-                  Build mission briefing
+                  Build training briefing
                 </button>
               </div>
             </div>
@@ -556,7 +545,7 @@
                     <v-icon size="20">mdi-radar</v-icon>
                   </div>
                   <div>
-                    <div class="preview-title">Live mission preview</div>
+                    <div class="preview-title">Training sequence preview</div>
                     <p class="muted small">See how your ATC readback will sound as you fill in the form.</p>
                   </div>
                 </div>
@@ -597,11 +586,11 @@
               <span class="simbrief-tag">SimBrief import</span>
               <h3 class="simbrief-hero-title">Load your airline dispatch</h3>
               <p class="simbrief-hero-text">
-                Sync the exact OFP you're flying with one click. We'll transform it into a mission-ready briefing and
-                readback drill.
+                Import an OFP as input for a guided training sequence. Classroom does not validate it against current
+                charts, AIRAC data, procedures, or frequencies.
               </p>
               <div class="simbrief-hero-highlights">
-                <span><v-icon size="16">mdi-airplane-cog</v-icon> Real routes</span>
+                <span><v-icon size="16">mdi-airplane-cog</v-icon> Imported route context</span>
                 <span><v-icon size="16">mdi-clock-fast</v-icon> Instant setup</span>
                 <a
                     href="https://www.simbrief.com/home/flight_planning.html"
@@ -637,7 +626,7 @@
                   <span class="step-number">3</span>
                   <span class="simbrief-step-title">Paste &amp; import</span>
                 </div>
-                <p>Drop the ID below. We'll remember it on this device so future missions load instantly.</p>
+                <p>Drop the ID below. We remember it on this device so future training sequences load quickly.</p>
               </div>
             </div>
 
@@ -663,7 +652,7 @@
             </form>
 
             <p class="muted small simbrief-note">
-              New to SimBrief? It's a free airline-style dispatch planner that pairs perfectly with OpenSquawk missions.
+              New to SimBrief? It is an external dispatch planner; imported values remain unvalidated training inputs.
             </p>
 
             <div v-if="simbriefForm.loading" class="simbrief-status">
@@ -693,7 +682,8 @@
           <NuxtImg :src="currentBriefingArt" alt="Mission hero" class="briefing-hero-bg"/>
           <div class="briefing-hero-content">
             <div class="briefing-tag-row">
-              <span class="plan-tag">Mission briefing</span>
+              <span class="plan-tag">Guided sequence briefing</span>
+              <span class="synthetic-data-chip">Synthetic training data — not for operational use</span>
               <span class="briefing-chip">{{ briefingSnapshot.callsign }}</span>
             </div>
             <h2 class="briefing-hero-title">{{ displayCallsign(briefingSnapshot.radioCall, briefingSnapshot) }}</h2>
@@ -848,7 +838,7 @@
           </button>
           <button class="btn primary" type="button" @click="handleBriefingConfirm()">
             <v-icon size="18">{{ briefingReturnStage === 'setup' ? 'mdi-airplane' : 'mdi-play-circle' }}</v-icon>
-            {{ briefingReturnStage === 'setup' ? 'Start mission' : 'Return to mission' }}
+            {{ briefingReturnStage === 'setup' ? 'Start sequence' : 'Return to sequence' }}
           </button>
         </div>
       </div>
@@ -868,7 +858,7 @@
           <div v-if="current" class="module-overview-header">
             <div class="module-overview-meta">
               <div>
-                <span class="module-overview-chip">Mission overview</span>
+                <span class="module-overview-chip">Module overview</span>
               </div>
               <h3 class="module-overview-title">{{ current.title }}</h3>
               <p class="module-overview-sub">{{ current.subtitle }}</p>
@@ -881,18 +871,18 @@
                   :aria-expanded="moduleOverviewIsOpen ? 'true' : 'false'"
                   :aria-controls="moduleOverviewTrackId"
               >
-                <span class="module-overview-toggle-label">Mission lessons</span>
+                <span class="module-overview-toggle-label">Module lessons</span>
                 <v-icon size="16" class="module-overview-toggle-icon">mdi-chevron-down</v-icon>
               </button>
               <div
                   class="module-overview-progress"
                   role="progressbar"
-                  aria-label="Mission progress"
+                  aria-label="Module mastery"
                   :aria-valuenow="pct(current.id)"
                   aria-valuemin="0"
                   aria-valuemax="100"
               >
-                <span class="module-overview-progress-label">Progress</span>
+                <span class="module-overview-progress-label">Mastery</span>
                 <div class="module-overview-progress-bar">
                   <div class="module-overview-progress-fill" :style="{ width: pct(current.id) + '%' }"></div>
                 </div>
@@ -907,7 +897,7 @@
                   :key="l.id"
                   class="lesson"
                   :data-lesson="l.id"
-                  :class="{ active: activeLesson && activeLesson.id===l.id, ok: bestScore(current.id,l.id)>=80 }"
+                  :class="{ active: activeLesson && activeLesson.id===l.id, ok: isLessonMastered(current.id,l.id) }"
                   @click="selectLesson(l)"
               >
                 <div class="lesson-top">
@@ -934,6 +924,10 @@
         </div>
 
         <div v-if="activeLesson" class="module-detail">
+          <div class="lesson-scope-note" role="note">
+            <v-icon size="17">mdi-flask-outline</v-icon>
+            Synthetic ICAO/SERA training data — not for navigation or operational use
+          </div>
           <div class="console">
             <div v-if="scenario && requiresFlightPlan" class="scenario-bar">
               <div class="scenario-item">
@@ -968,7 +962,7 @@
             </div>
             <div class="console-grid">
               <div class="col">
-                <div class="label">Briefing</div>
+                <div class="label">{{ promptLabel }}</div>
                 <div class="panel">
                   <div class="target-row">
                     <div class="target-main">
@@ -986,6 +980,7 @@
                     </div>
                     <div class="target-actions">
                       <button
+                          v-if="canPlayPrompt"
                           class="btn soft mini"
                           type="button"
                           :disabled="!targetPhrase || ttsLoading"
@@ -995,10 +990,10 @@
                         <v-icon size="16" :class="{ spin: ttsLoading }">
                           {{ ttsLoading ? 'mdi-loading' : 'mdi-volume-high' }}
                         </v-icon>
-                        {{ sayButtonLabel }}
+                        {{ hasSpokenTarget ? 'Play again' : 'Play ATC' }}
                       </button>
                       <button
-                          v-if="isSpeaking"
+                          v-if="canPlayPrompt && isSpeaking"
                           class="btn ghost mini"
                           type="button"
                           @click="stopAudio"
@@ -1007,7 +1002,7 @@
                         Stop
                       </button>
                       <button
-                          v-if="audioContentHidden"
+                          v-if="canPlayPrompt && audioContentHidden"
                           class="btn ghost mini"
                           type="button"
                           @click="revealAudioContent"
@@ -1023,6 +1018,14 @@
                   </div>
                 </div>
                 <div class="hints">
+                  <div class="hint standard">
+                    <v-icon size="16">mdi-shield-check-outline</v-icon>
+                    {{ activeLesson.standard }}
+                  </div>
+                  <div class="hint secondary">
+                    <v-icon size="16">mdi-information-outline</v-icon>
+                    {{ activeLesson.whyItMatters }}
+                  </div>
                   <div v-for="hint in activeLesson.hints" :key="hint" class="hint">
                     <v-icon size="16">mdi-lightbulb-on-outline</v-icon>
                     {{ hint }}
@@ -1057,7 +1060,7 @@
               </div>
 
               <div class="col">
-                <div class="label">Your readback</div>
+                <div class="label">{{ activeLesson.responseLabel }}</div>
                 <div class="panel readback-panel">
                   <div class="cloze">
                     <div v-for="group in clozeGroups" :key="group.id" class="cloze-group">
@@ -1105,9 +1108,9 @@
                     <v-icon size="18">mdi-eraser</v-icon>
                     Reset
                   </button>
-                  <button class="btn ghost" type="button" @click="fillSolution">
-                    <v-icon size="18">mdi-auto-fix</v-icon>
-                    Auto-fill
+                  <button class="btn ghost" type="button" @click="showModelAnswer">
+                    <v-icon size="18">mdi-eye-outline</v-icon>
+                    Show model answer
                   </button>
                   <button
                       v-if="correctReadbackText"
@@ -1122,10 +1125,19 @@
                   </button>
                 </div>
                 <div v-if="result" class="score">
-                  <div class="score-num">{{ result.score }}%</div>
+                  <div class="score-num" :class="{ 'is-mastered': result.passed }">
+                    {{ result.hits }} of {{ result.required }} required elements correct
+                  </div>
                   <div class="muted small">
-                    Fields correct: {{ result.hits }}/{{ activeLesson.fields.length }} · Similarity:
-                    {{ Math.round(result.sim * 100) }}%
+                    <template v-if="modelAnswerRevealed">
+                      Model answer revealed — this variation does not count towards mastery.
+                    </template>
+                    <template v-else-if="result.passed">
+                      Clean variation · {{ currentVariantProgressLabel }}
+                    </template>
+                    <template v-else>
+                      Correct every required element before moving on.
+                    </template>
                   </div>
                 </div>
               </div>
@@ -1150,46 +1162,6 @@
     </section>
 
 
-    <!-- NEXT OBJECTIVE -->
-    <div class="container" v-if="panel==='hub'">
-      <h2 class="h2">Your progress</h2>
-      <p class="muted">
-        Level up by completing lessons and missions. Earn badges as you improve your pilot readbacks.
-      </p>
-      <div class="hero-highlight mb-24" role="region" aria-label="Next objective">
-        <div class="hero-orb" :style="{ '--progress': levelProgress + '%' }">
-          <div class="hero-orb-core">
-            <span class="hero-orb-level">Lvl {{ level }}</span>
-            <span class="hero-orb-progress">{{ levelProgress }}%</span>
-          </div>
-        </div>
-        <div class="hero-highlight-meta">
-          <span class="hero-tag">Next objective</span>
-          <div class="hero-highlight-title">
-            {{ primaryObjective ? primaryObjective.title : 'Choose a mission to begin' }}
-          </div>
-          <p class="muted small">
-            {{
-              primaryObjective
-                  ? primaryObjective.description
-                  : 'Open any mission below to start your first readback drills.'
-            }}
-          </p>
-          <div
-              v-if="primaryObjective"
-              class="hero-highlight-bar"
-              role="progressbar"
-              :aria-valuenow="primaryObjectiveProgress"
-              aria-valuemin="0"
-              aria-valuemax="100"
-          >
-            <div class="hero-highlight-fill" :style="{ width: primaryObjectiveProgress + '%' }"></div>
-          </div>
-          <p v-if="primaryObjective" class="muted small">{{ primaryObjective.status }}</p>
-        </div>
-      </div>
-    </div>
-
     <!-- FOOTER -->
     <footer
         class="footer footer-fixed"
@@ -1215,14 +1187,14 @@
               {{ nextLessonMeta.total }}
             </div>
             <div v-else-if="nextMissionMeta" class="mission-footer-hint">
-              Next mission: {{ nextMissionMeta.module.title }} · Mission {{ nextMissionMeta.position }} of
+              Next module: {{ nextMissionMeta.module.title }} · Module {{ nextMissionMeta.position }} of
               {{ nextMissionMeta.total }}
             </div>
             <div v-else-if="isAtEndOfCurriculum" class="mission-footer-hint">
               You've completed all available lessons! More content is coming soon.
             </div>
             <div v-else class="mission-footer-hint">
-              Last lesson in this mission.
+              Last lesson in this module.
             </div>
           </div>
           <div class="mission-footer-section mission-footer-right">
@@ -1351,7 +1323,7 @@
           <div class="set-row reset-row">
             <div class="set-info">
               <span>Reset training data</span>
-              <small class="muted">Clears XP, progress, and local settings on this device.</small>
+              <small class="muted">Clears Classroom mastery and local audio settings on this device.</small>
             </div>
             <button class="btn ghost" type="button" @click="resetAll">
               <v-icon size="18">mdi-refresh</v-icon>
@@ -1444,8 +1416,17 @@ import {computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, shallowRe
 import {useRoute, useRouter} from '#imports'
 import {useApi} from '~/composables/useApi'
 import {useAuthStore} from '~/stores/auth'
-import {createDefaultLearnConfig} from '~~/shared/learn/config'
+import {
+  CLASSROOM_ASSESSMENT_VERSION,
+  CLASSROOM_VARIANTS_FOR_MASTERY,
+  createDefaultLearnConfig,
+} from '~~/shared/learn/config'
 import type {LearnConfig, LearnProgress, LearnState} from '~~/shared/learn/config'
+import {
+  assessRequiredFields,
+  isCurrentMastery,
+  updateMasteryProgress,
+} from '~~/shared/learn/assessment'
 import {learnModules, seedFullFlightScenario} from '~~/shared/data/learnModules'
 import {
   createBaseScenario,
@@ -1456,7 +1437,6 @@ import {
   minutesToWords
 } from '~~/shared/learn/scenario'
 import type {BlankWidth, Frequency, Lesson, LessonField, ModuleDef, ReadbackSegment, Scenario} from '~~/shared/learn/types'
-import {looksLikeCallsignKey, matchTranscriptionToFields, type SttFieldDef} from '~~/shared/utils/sttMatch'
 import {loadPizzicatoLite} from '~~/shared/utils/pizzicatoLite'
 import type {PizzicatoLite} from '~~/shared/utils/pizzicatoLite'
 import {createNoiseGenerators, getReadabilityProfile} from '~~/shared/utils/radioEffects'
@@ -1472,18 +1452,6 @@ import BugReportDialog from '~/components/BugReportDialog.vue'
 
 definePageMeta({middleware: ['require-auth', 'require-classroom-intro']})
 
-type Objective = {
-  id: string
-  title: string
-  description: string
-  progress: number
-  goal: number
-  status: string
-  icon: string
-  complete: boolean
-  moduleId?: string
-}
-
 type FieldState = {
   key: string
   label: string
@@ -1496,6 +1464,7 @@ type FieldState = {
 type ScoreResult = {
   score: number
   hits: number
+  required: number
   sim: number
   passed: boolean
   fields: FieldState[]
@@ -1765,12 +1734,6 @@ const pendingLessonId = ref<string | null>(null)
 
 function displayCallsign(value?: string | null, source?: CallsignContext | null): string {
   if (!value) return ''
-  const context = source ?? scenario.value
-  if (!context) return value
-  const {radioCall, callsign} = context
-  if (radioCall && callsign && value.includes(radioCall)) {
-    return value.split(radioCall).join(callsign)
-  }
   return value
 }
 
@@ -2768,6 +2731,8 @@ const userAnswers = reactive<Record<string, string>>({})
 const readbackFieldRefs = new Map<string, HTMLInputElement>()
 const result = ref<ScoreResult | null>(null)
 const evaluating = ref(false)
+const modelAnswerRevealed = ref(false)
+const variantCounted = ref(false)
 
 // First-run nudge: after the very first readback is checked, highlight the
 // footer's primary button so learners realise they continue from there. Shown
@@ -2817,36 +2782,6 @@ const bugReport = useBugReport({source: 'classroom'})
 const {bugReportCapturing, openBugReport} = bugReport
 const browserTtsAvailable = computed(() => isClient && 'speechSynthesis' in window)
 
-// STT (Speech-to-Text) for the readback — pilot speaks the readback into a mic,
-// transcription is mapped onto the input fields. Driven by /api/atc/ptt.
-// `sttSupported` is a ref (not const) so it can be set after onMounted; this
-// avoids SSR/hydration mismatches around the mic button visibility.
-const sttSupported = ref(false)
-const sttServerAvailable = ref(true)
-const sttRecording = ref(false)
-const sttTranscribing = ref(false)
-const sttError = ref('')
-const sttLastTranscription = ref('')
-const sttEditableTranscription = ref('')
-const sttFilledFields = reactive<Record<string, boolean>>({})
-const sttLastFillSummary = ref<{ filled: number; total: number } | null>(null)
-const sttLastReport = ref<import('~~/shared/utils/sttMatch').SttMatchResult | null>(null)
-const sttRecordingSeconds = ref(0)
-const sttMediaRecorder = ref<MediaRecorder | null>(null)
-const sttChunks = ref<Blob[]>([])
-const sttStream = ref<MediaStream | null>(null)
-let sttRecordingTimer: ReturnType<typeof setInterval> | null = null
-let sttRecordingAutoStop: ReturnType<typeof setTimeout> | null = null
-const STT_MAX_RECORDING_SECONDS = 45
-const sttFeatureVisible = computed(() => sttSupported.value && sttServerAvailable.value)
-
-function formatSttDuration(seconds: number): string {
-  const s = Math.max(0, Math.floor(seconds))
-  const mm = Math.floor(s / 60).toString().padStart(2, '0')
-  const ss = (s % 60).toString().padStart(2, '0')
-  return `${mm}:${ss}`
-}
-
 type SpeechServerHealth = {
   configured: boolean
   reachable: boolean
@@ -2913,12 +2848,8 @@ async function checkSpeechServerAvailability() {
     const hasOnlineTts = Boolean(health.configured && health.reachable)
     showSpeechServerWarning.value = Boolean(health.configured && !health.reachable)
     showOnlineTtsSuggestion.value = Boolean(hasOnlineTts && cfg.value.tts)
-    // STT: if a Speaches server is configured but down, hide the feature.
-    // If no Speaches is configured we assume OpenAI Whisper cloud is reachable.
-    sttServerAvailable.value = !health.configured || health.reachable
   } catch (error) {
     console.error('Failed to check speech server availability', error)
-    sttServerAvailable.value = false
   }
 }
 
@@ -3004,70 +2935,32 @@ const defaultCfg = createDefaultLearnConfig()
 const cfg = ref<LearnConfig>({...defaultCfg})
 audioReveal.value = !cfg.value.audioChallenge
 
-const XP_PER_LEVEL = 300
 const xp = ref(0)
 const progress = ref<LearnProgress>({})
 const unlockedModules = ref<string[]>([])
-const level = computed(() => 1 + Math.floor(xp.value / XP_PER_LEVEL))
-const nextLevel = computed(() => level.value + 1)
-const levelProgress = computed(() => Math.min(100, Math.round(((xp.value % XP_PER_LEVEL) / XP_PER_LEVEL) * 100)))
-const xpToNextLevel = computed(() => Math.max(0, level.value * XP_PER_LEVEL - xp.value))
-type BadgeTier = { id: string; name: string; xp: number; description: string }
 
-const badgeTrack: BadgeTier[] = [
-  {id: 'rookie', name: 'Runway Rookie', xp: 0, description: 'Complete your first guided mission.'},
-  {id: 'cadet', name: 'Clearance Cadet', xp: 120, description: 'Score three missions with ≥80%.'},
-  {id: 'navigator', name: 'Taxi Navigator', xp: 360, description: 'Keep the flow going with solid readbacks.'},
-  {id: 'tower', name: 'Tower Pro', xp: 720, description: 'Master departures with confident phraseology.'}
-]
-
-const currentBadge = computed(() => {
-  let unlocked = badgeTrack[0]
-  for (const badge of badgeTrack) {
-    if (xp.value >= badge.xp) {
-      unlocked = badge
-    }
-  }
-  return unlocked
+const canPlayPrompt = computed(() => {
+  const kind = activeLesson.value?.prompt?.kind
+  return kind === 'atc' || kind === 'copy'
 })
-
-const nextBadge = computed(() => badgeTrack.find(badge => badge.xp > xp.value) || null)
-
-const nextBadgeProgress = computed(() => {
-  const upcoming = nextBadge.value
-  if (!upcoming) return 100
-  const previous = badgeTrack.slice().reverse().find(badge => badge.xp <= xp.value) || badgeTrack[0]
-  const span = Math.max(1, upcoming.xp - previous.xp)
-  const gained = xp.value - previous.xp
-  return Math.min(100, Math.round((gained / span) * 100))
+const promptLabel = computed(() => {
+  const kind = activeLesson.value?.prompt?.kind
+  if (kind === 'situation') return 'Situation'
+  if (kind === 'copy') return 'Copy / decode'
+  return 'ATC prompt'
 })
-
-const nextBadgeXpRemaining = computed(() => {
-  const upcoming = nextBadge.value
-  if (!upcoming) return 0
-  return Math.max(0, upcoming.xp - xp.value)
-})
-
-const totalLessons = computed(() => modules.value.reduce((sum, module) => sum + module.lessons.length, 0))
-const finishedLessons = computed(() => modules.value.reduce((sum, module) => sum + doneCount(module.id), 0))
-const missionCompletionPct = computed(() => (totalLessons.value ? Math.round((finishedLessons.value / totalLessons.value) * 100) : 0))
-
-const globalAccuracy = computed(() => {
-  const scores: number[] = []
-  Object.values(progress.value || {}).forEach(module => {
-    Object.values(module || {}).forEach(entry => {
-      if (entry && typeof entry.best === 'number' && entry.best > 0) {
-        scores.push(entry.best)
-      }
-    })
-  })
-  if (!scores.length) return 0
-  const avg = scores.reduce((acc, value) => acc + value, 0) / scores.length
-  return Math.round(avg)
-})
-
-const audioContentHidden = computed(() => cfg.value.audioChallenge && !audioReveal.value)
+const audioContentHidden = computed(() => canPlayPrompt.value && cfg.value.audioChallenge && !audioReveal.value)
 const audioSpeedDisplay = computed(() => (cfg.value.audioSpeed ?? 1).toFixed(2))
+const currentVariantProgressLabel = computed(() => {
+  if (!current.value || !activeLesson.value) return 'Practising'
+  const entry = progress.value[current.value.id]?.[activeLesson.value.id]
+  const variants = entry?.assessmentVersion === CLASSROOM_ASSESSMENT_VERSION
+    ? Math.min(CLASSROOM_VARIANTS_FOR_MASTERY, entry.successfulVariants || 0)
+    : 0
+  return variants >= CLASSROOM_VARIANTS_FOR_MASTERY
+    ? 'Mastered'
+    : `${variants} of ${CLASSROOM_VARIANTS_FOR_MASTERY} clean variations`
+})
 
 const instructorVoiceOptions = [
   { title: 'Standard (Ryan · US)', value: '' },
@@ -3228,14 +3121,6 @@ if (isClient) {
     dirtyState.progress = true
     schedulePersist()
   }, {deep: true})
-  watch(xp, () => {
-    dirtyState.xp = true
-    schedulePersist()
-  })
-  watch(unlockedModules, () => {
-    dirtyState.unlocked = true
-    schedulePersist()
-  }, {deep: true})
   watch(() => cfg.value.tts, markConfigDirty)
   watch(() => cfg.value.audioChallenge, () => {
     markConfigDirty()
@@ -3348,6 +3233,8 @@ const fieldStates = computed<Record<string, FieldState>>(() => {
           break
         }
 
+        if (field.matching !== 'fuzzy') continue
+
         const distance = lev(normalizedAnswer, option)
         const span = Math.max(option.length, normalizedAnswer.length, 1)
         const score = 1 - distance / span
@@ -3431,7 +3318,8 @@ function fieldExpectedValue(key: string): string {
 
 const targetPhrase = computed(() => {
   if (!activeLesson.value || !scenario.value) return ''
-  return displayCallsign(activeLesson.value.phrase(scenario.value), scenario.value)
+  const prompt = activeLesson.value.prompt?.text ?? activeLesson.value.phrase
+  return displayCallsign(prompt(scenario.value), scenario.value)
 })
 
 const correctReadbackText = computed(() => {
@@ -3476,212 +3364,6 @@ async function speakCorrectReadback() {
   await say(text)
 }
 
-// ---------------------------------------------------------------------------
-// STT — pilot speaks the readback into the mic, transcription is mapped onto
-// the input fields.  Whisper returns natural spoken ATC ("two five right",
-// "lufthansa three five niner"), while fields store the canonical written
-// form ("25R", "DLH359").  The actual matching lives in shared/utils/sttMatch
-// where it can be unit-tested; here we just feed it the per-lesson candidates.
-// ---------------------------------------------------------------------------
-
-function buildSttFieldDefs(): SttFieldDef[] {
-  if (!activeLesson.value || !scenario.value) return []
-  return activeLesson.value.fields.map((field): SttFieldDef => {
-    const expected = (field.expected(scenario.value!) || '').trim()
-    const alternatives = field.alternatives
-      ? field.alternatives(scenario.value!).map(a => (a || '').trim()).filter(Boolean)
-      : []
-    return {
-      key: field.key,
-      expected,
-      alternatives,
-      isCallsign: looksLikeCallsignKey(field.key, field.label),
-    }
-  })
-}
-
-function mapTranscriptionToFields(transcription: string): { filled: number; total: number } {
-  if (!activeLesson.value || !scenario.value) {
-    sttLastReport.value = null
-    return { filled: 0, total: 0 }
-  }
-  const defs = buildSttFieldDefs()
-  const result = matchTranscriptionToFields(transcription, defs)
-  sttLastReport.value = result
-  // Clear stale mic markers for fields not in this match round
-  Object.keys(sttFilledFields).forEach(k => { delete sttFilledFields[k] })
-  for (const [key, value] of Object.entries(result.matches)) {
-    userAnswers[key] = value
-    sttFilledFields[key] = true
-  }
-  return { filled: result.filled, total: result.total }
-}
-
-function applySttTranscription() {
-  const text = sttEditableTranscription.value.trim()
-  if (!text) return
-  sttLastTranscription.value = text
-  const summary = mapTranscriptionToFields(text)
-  sttLastFillSummary.value = summary
-}
-
-function clearSttResult() {
-  sttLastTranscription.value = ''
-  sttEditableTranscription.value = ''
-  sttLastFillSummary.value = null
-  sttLastReport.value = null
-  sttError.value = ''
-  Object.keys(sttFilledFields).forEach(k => { delete sttFilledFields[k] })
-}
-
-async function blobToBase64(blob: Blob): Promise<string> {
-  const buf = await blob.arrayBuffer()
-  const bytes = new Uint8Array(buf)
-  let bin = ''
-  const chunkSize = 0x8000
-  for (let i = 0; i < bytes.length; i += chunkSize) {
-    bin += String.fromCharCode.apply(null, Array.from(bytes.subarray(i, i + chunkSize)))
-  }
-  return btoa(bin)
-}
-
-async function processSTTAudio(blob: Blob) {
-  if (!activeLesson.value) return
-  sttTranscribing.value = true
-  sttError.value = ''
-  try {
-    if (!blob.size) {
-      sttError.value = 'No audio was captured — check that your microphone is connected and unmuted.'
-      return
-    }
-    const base64 = await blobToBase64(blob)
-    // Seed Whisper with this lesson's expected field values (raw + alternatives);
-    // the server expands them to spoken ICAO form and biases recognition.
-    const sttDefs = buildSttFieldDefs()
-    const expectedTokens = Array.from(new Set(
-      sttDefs.flatMap(d => [d.expected, ...(d.alternatives ?? [])]).map(t => (t || '').trim()).filter(Boolean)
-    ))
-    const expectedPhrase = sttDefs.map(d => d.expected).filter(Boolean).join(', ')
-    const result = await api.post<{ success: boolean; transcription: string }>('/api/atc/ptt', {
-      audio: base64,
-      moduleId: current.value?.id || 'classroom',
-      lessonId: activeLesson.value.id,
-      format: 'webm',
-      expected: { phrase: expectedPhrase || undefined, tokens: expectedTokens },
-    })
-    if (result?.success && result.transcription) {
-      const text = result.transcription.trim()
-      sttLastTranscription.value = text
-      sttEditableTranscription.value = text
-      // Auto-apply on first transcription so common cases "just work".
-      // The user can still edit the text and re-apply, or dismiss entirely.
-      const summary = mapTranscriptionToFields(text)
-      sttLastFillSummary.value = summary
-    } else {
-      sttError.value = 'No speech detected. Try recording again, a bit closer to the mic.'
-    }
-  } catch (err: any) {
-    console.error('STT failed', err)
-    const msg = err?.data?.statusMessage || err?.statusMessage || err?.message || 'Transcription failed'
-    sttError.value = String(msg)
-    // If the server explicitly rejected the request, flip availability so the
-    // mic button shows the "unavailable" hint next time around.
-    if (err?.statusCode === 503 || /unreachable|unavailable/i.test(String(msg))) {
-      sttServerAvailable.value = false
-    }
-  } finally {
-    sttTranscribing.value = false
-  }
-}
-
-function stopSttRecordingTimers() {
-  if (sttRecordingTimer) {
-    clearInterval(sttRecordingTimer)
-    sttRecordingTimer = null
-  }
-  if (sttRecordingAutoStop) {
-    clearTimeout(sttRecordingAutoStop)
-    sttRecordingAutoStop = null
-  }
-}
-
-async function startSTTRecording() {
-  if (sttRecording.value || sttTranscribing.value) return
-  if (!sttSupported.value) {
-    sttError.value = 'Your browser does not support microphone recording'
-    return
-  }
-  if (!sttServerAvailable.value) {
-    sttError.value = 'The speech server is currently unavailable.'
-    return
-  }
-  sttError.value = ''
-  // Drop any previous transcription so the panel doesn't show stale text
-  // alongside the new recording state.
-  sttLastTranscription.value = ''
-  sttEditableTranscription.value = ''
-  sttLastFillSummary.value = null
-  try {
-    const stream = await navigator.mediaDevices.getUserMedia({
-      audio: { sampleRate: 16000, channelCount: 1, echoCancellation: true, noiseSuppression: true }
-    })
-    sttStream.value = stream
-    const recorder = new MediaRecorder(stream)
-    sttMediaRecorder.value = recorder
-    sttChunks.value = []
-    recorder.ondataavailable = (e) => {
-      if (e.data && e.data.size > 0) sttChunks.value.push(e.data)
-    }
-    recorder.onstop = async () => {
-      stopSttRecordingTimers()
-      const blob = new Blob(sttChunks.value, { type: recorder.mimeType || 'audio/webm' })
-      sttStream.value?.getTracks().forEach(t => t.stop())
-      sttStream.value = null
-      sttMediaRecorder.value = null
-      sttChunks.value = []
-      await processSTTAudio(blob)
-    }
-    recorder.start()
-    sttRecording.value = true
-    sttRecordingSeconds.value = 0
-    sttRecordingTimer = setInterval(() => {
-      sttRecordingSeconds.value += 1
-    }, 1000)
-    // Hard limit so a forgotten recording doesn't run forever and exceed
-    // the server's 2 MB upload cap (~60s at 16kHz mono).
-    sttRecordingAutoStop = setTimeout(() => {
-      if (sttRecording.value) stopSTTRecording()
-    }, STT_MAX_RECORDING_SECONDS * 1000)
-  } catch (err: any) {
-    console.error('STT start failed', err)
-    sttError.value = err?.name === 'NotAllowedError'
-      ? 'Microphone access denied. Please allow microphone access in your browser settings.'
-      : 'Could not start recording. Check that no other application is using the mic.'
-    sttRecording.value = false
-    stopSttRecordingTimers()
-    sttStream.value?.getTracks().forEach(t => t.stop())
-    sttStream.value = null
-  }
-}
-
-function stopSTTRecording() {
-  if (!sttRecording.value || !sttMediaRecorder.value) return
-  try {
-    sttMediaRecorder.value.stop()
-  } catch (err) {
-    console.warn('STT stop failed', err)
-  }
-  sttRecording.value = false
-}
-
-function toggleSTTRecording() {
-  if (sttRecording.value) {
-    stopSTTRecording()
-  } else {
-    startSTTRecording()
-  }
-}
-
 const lessonInfo = computed(() => (activeLesson.value && scenario.value ? activeLesson.value.info(scenario.value) : []))
 
 const lessonReference = computed(() => {
@@ -3691,7 +3373,7 @@ const lessonReference = computed(() => {
   if (lesson.reference) return lesson.reference(s)
   const entries: { label: string; value: string }[] = []
   const fieldKeys = new Set(lesson.fields.map(f => f.key))
-  const phraseText = lesson.phrase(s)
+  const phraseText = (lesson.prompt?.text ?? lesson.phrase)(s)
   const hasCallsign = fieldKeys.has('callsign') || fieldKeys.has('rc-callsign')
       || fieldKeys.has('tko-callsign') || fieldKeys.has('landing-callsign')
       || phraseText.includes(s.radioCall)
@@ -3954,6 +3636,11 @@ function queueAutoSay() {
 
 function attemptAutoSay() {
   if (!pendingAutoSay.value) return
+  if (!canPlayPrompt.value) {
+    pendingAutoSay.value = false
+    focusFirstReadbackField()
+    return
+  }
   const phrase = targetPhrase.value?.trim()
   if (!phrase) {
     pendingAutoSay.value = false
@@ -3994,6 +3681,8 @@ function rollScenario(clear = false) {
   activeFrequency.value = generated.frequencies.find(freq => freq.type === (defaultType || 'DEL')) || generated.frequencies[0] || null
   resetAnswers(true)
   resetAudioReveal()
+  modelAnswerRevealed.value = false
+  variantCounted.value = false
   if (clear) {
     result.value = null
   }
@@ -4087,23 +3776,19 @@ function resetAnswers(clearResult = false) {
   if (clearResult) {
     result.value = null
   }
-  // Clear stale STT feedback so it doesn't bleed into the next attempt.
-  sttLastTranscription.value = ''
-  sttEditableTranscription.value = ''
-  sttLastFillSummary.value = null
-  sttError.value = ''
-  Object.keys(sttFilledFields).forEach(k => { delete sttFilledFields[k] })
 }
 
 function clearAnswers() {
   resetAnswers(true)
 }
 
-function fillSolution() {
+function showModelAnswer() {
   if (!activeLesson.value || !scenario.value) return
+  modelAnswerRevealed.value = true
   for (const field of activeLesson.value.fields) {
     userAnswers[field.key] = field.expected(scenario.value)
   }
+  result.value = null
 }
 
 function computeScore(): ScoreResult | null {
@@ -4112,14 +3797,20 @@ function computeScore(): ScoreResult | null {
       .map(field => fieldStates.value[field.key])
       .filter(Boolean) as FieldState[]
   if (!details.length) return null
-  const total = details.reduce((sum, item) => sum + item.similarity, 0)
-  const hits = details.filter(item => item.pass).length
-  const avg = total / details.length
+  const fieldDefinitions = new Map(activeLesson.value.fields.map(field => [field.key, field]))
+  const assessment = assessRequiredFields(details.map(item => ({
+    key: item.key,
+    required: fieldDefinitions.get(item.key)?.required !== false,
+    pass: item.pass,
+    similarity: item.similarity,
+  })))
+  if (!assessment) return null
   return {
-    score: Math.round(avg * 100),
-    hits,
-    sim: avg,
-    passed: hits === details.length && hits > 0,
+    score: assessment.score,
+    hits: assessment.hits,
+    required: assessment.required,
+    sim: assessment.similarity,
+    passed: assessment.passed,
     fields: details
   }
 }
@@ -4138,45 +3829,27 @@ function evaluate() {
     const modId = current.value.id
     const lesId = activeLesson.value.id
     if (!progress.value[modId]) progress.value[modId] = {}
-    const previous = progress.value[modId][lesId] || {best: 0, done: false}
-    const best = Math.max(previous.best || 0, summary.score)
-    const passed = summary.passed || summary.score >= 80
-    const wasDone = previous.done
+    const previous = progress.value[modId][lesId]
+    const update = updateMasteryProgress(previous, {
+      score: summary.score,
+      hits: summary.hits,
+      required: summary.required,
+      similarity: summary.sim,
+      passed: summary.passed,
+    }, {
+      modelAnswerRevealed: modelAnswerRevealed.value,
+      variantAlreadyCounted: variantCounted.value,
+    })
 
-    progress.value[modId][lesId] = {best, done: passed}
-
-    let gained = 0
-    if (passed && !wasDone) gained += 40
-    if (summary.score >= 95 && summary.score > (previous.best || 0)) gained += 15
-    if (summary.score >= 80 && summary.score > (previous.best || 0)) gained += 10
-
-    if (gained) {
-      xp.value += gained
-      toastNow(`+${gained} XP · ${activeLesson.value.title}`)
-    }
+    if (update.counted) variantCounted.value = true
+    progress.value[modId][lesId] = update.progress
   } finally {
     evaluating.value = false
   }
 }
 
 function isModuleUnlocked(id: string) {
-  if (unlockedModules.value.includes(id)) return true
-  if (id === 'normalize') return true
-  const order = modules.value.findIndex(module => module.id === id)
-  const previous = modules.value[order - 1]
-  return previous ? pct(previous.id) >= 80 : true
-}
-
-function attemptUnlockModule(modId: string) {
-  if (!isClient) return
-  if (!modId) return
-  if (isModuleUnlocked(modId)) return
-  const confirmed = window.confirm('Unlock this mission briefing early?')
-  if (!confirmed) return
-  const next = new Set(unlockedModules.value)
-  next.add(modId)
-  unlockedModules.value = Array.from(next)
-  toastNow('Mission unlocked')
+  return modules.value.some(module => module.id === id)
 }
 
 function openModule(id: string, options: { autoStart?: boolean } = {}) {
@@ -4224,27 +3897,6 @@ function quickContinue(id: string) {
   openModule(id, {autoStart: true})
 }
 
-function resumeMissionObjective() {
-  const objective = missionObjective.value
-  if (objective?.moduleId) {
-    quickContinue(objective.moduleId)
-    return
-  }
-  panel.value = 'hub'
-}
-
-function goToPrimaryObjective() {
-  const objective = primaryObjective.value
-  if (!objective) return
-
-  if (objective.moduleId) {
-    quickContinue(objective.moduleId)
-    return
-  }
-
-  panel.value = 'hub'
-}
-
 function selectLesson(lesson: Lesson) {
   activeLesson.value = lesson
 }
@@ -4286,7 +3938,24 @@ function doneCount(modId: string) {
   const module = modules.value.find(item => item.id === modId)
   if (!module) return 0
   const moduleProgress = progress.value[modId] || {}
-  return module.lessons.filter(lesson => moduleProgress[lesson.id]?.done).length
+  return module.lessons.filter(lesson => isLessonMastered(modId, lesson.id)).length
+}
+
+function isLessonMastered(modId: string, lesId: string): boolean {
+  return isCurrentMastery(progress.value[modId]?.[lesId])
+}
+
+function isLessonPractising(modId: string, lesId: string): boolean {
+  const entry = progress.value[modId]?.[lesId]
+  if (!entry) return false
+  if (entry.assessmentVersion !== CLASSROOM_ASSESSMENT_VERSION) return entry.best > 0 || entry.done
+  return !isLessonMastered(modId, lesId) && (entry.successfulVariants || 0) > 0
+}
+
+function practisingCount(modId: string): number {
+  const module = modules.value.find(item => item.id === modId)
+  if (!module) return 0
+  return module.lessons.filter(lesson => isLessonPractising(modId, lesson.id)).length
 }
 
 function pct(modId: string) {
@@ -4328,9 +3997,9 @@ function handleModulePrimary(modId: string) {
 }
 
 function modulePrimaryLabel(modId: string) {
-  if (moduleCompleted(modId)) return 'Replay mission'
-  if (!moduleHasProgress(modId)) return 'Launch mission'
-  return 'Resume mission'
+  if (moduleCompleted(modId)) return 'Practise again'
+  if (!moduleHasProgress(modId)) return 'Start module'
+  return 'Continue'
 }
 
 function modulePrimaryIcon(modId: string) {
@@ -4379,153 +4048,30 @@ function tileStatusClass(modId: string) {
 }
 
 function lessonScoreLabel(modId: string, lesId: string) {
-  const score = bestScore(modId, lesId)
-  return score ? `${score}%` : 'New'
+  const entry = progress.value[modId]?.[lesId]
+  if (!entry) return 'Not started'
+  if (entry.assessmentVersion !== CLASSROOM_ASSESSMENT_VERSION) return 'Review needed'
+  if (isLessonMastered(modId, lesId)) return 'Mastered'
+  if ((entry.successfulVariants || 0) > 0) return 'Practising'
+  return entry.best > 0 ? 'Needs review' : 'Not started'
 }
 
 function lessonScoreIcon(modId: string, lesId: string) {
-  const score = bestScore(modId, lesId)
-  if (!score) return 'mdi-star-outline'
-  if (score >= 80) return 'mdi-star-circle-outline'
-  return 'mdi-check-circle-outline'
+  const entry = progress.value[modId]?.[lesId]
+  if (!entry) return 'mdi-circle-outline'
+  if (entry.assessmentVersion !== CLASSROOM_ASSESSMENT_VERSION) return 'mdi-history'
+  if (isLessonMastered(modId, lesId)) return 'mdi-check-decagram'
+  if ((entry.successfulVariants || 0) > 0) return 'mdi-progress-pencil'
+  return 'mdi-alert-circle-outline'
 }
 
 function lessonScoreClass(modId: string, lesId: string) {
-  const score = bestScore(modId, lesId)
-  if (!score) return 'is-new'
-  if (score >= 80) return 'is-great'
+  const entry = progress.value[modId]?.[lesId]
+  if (!entry) return 'is-new'
+  if (isLessonMastered(modId, lesId)) return 'is-great'
   return 'is-progress'
 }
 
-const lessonsWithGreatScore = computed(() => {
-  let count = 0
-  Object.values(progress.value || {}).forEach(module => {
-    Object.values(module || {}).forEach(entry => {
-      if (entry && typeof entry.best === 'number' && entry.best >= 80) {
-        count += 1
-      }
-    })
-  })
-  return count
-})
-
-const modulesStartedCount = computed(() => {
-  let count = 0
-  modules.value.forEach(module => {
-    const moduleProgress = progress.value[module.id]
-    if (!moduleProgress) return
-    const active = Object.values(moduleProgress).some(entry => {
-      if (!entry) return false
-      return Boolean(entry.done) || (typeof entry.best === 'number' && entry.best > 0)
-    })
-    if (active) count += 1
-  })
-  return count
-})
-
-const dailyObjectives = computed<Objective[]>(() => {
-  const readbacks = lessonsWithGreatScore.value
-  const started = modulesStartedCount.value > 0
-  const audioPlayed = hasSpokenTarget.value
-
-  return [
-    {
-      id: 'daily-readbacks',
-      title: '3 readbacks ≥80%',
-      description: 'Score at least 80% in three different lessons.',
-      progress: readbacks,
-      goal: 3,
-      status: readbacks >= 3 ? 'Goal reached' : `${Math.max(0, 3 - Math.min(readbacks, 3))} more ≥80%`,
-      icon: 'mdi-target',
-      complete: readbacks >= 3
-    },
-    {
-      id: 'daily-module',
-      title: 'Start 1 module',
-      description: 'Open a mission set and clear the first lesson.',
-      progress: started ? 1 : 0,
-      goal: 1,
-      status: started ? 'Module started' : 'Pick a module to open',
-      icon: 'mdi-flag-variant',
-      complete: started
-    },
-    {
-      id: 'daily-audio',
-      title: 'Play the target phrase',
-      description: 'Listen to the controller audio before responding.',
-      progress: audioPlayed ? 1 : 0,
-      goal: 1,
-      status: audioPlayed ? 'Played once today' : 'Play the controller audio',
-      icon: 'mdi-volume-high',
-      complete: audioPlayed
-    }
-  ]
-})
-
-const missionObjective = computed<Objective | null>(() => {
-  const nextModule = modules.value.find(module => !moduleCompleted(module.id))
-  if (!nextModule) return null
-  const total = nextModule.lessons.length || 1
-  const completed = Math.min(total, Math.max(0, doneCount(nextModule.id)))
-  const status = completed >= total ? 'Module complete' : `Lesson ${Math.min(completed + 1, total)} of ${total}`
-  return {
-    id: `module-${nextModule.id}`,
-    title: `Continue ${nextModule.title}`,
-    description: nextModule.subtitle,
-    progress: completed,
-    goal: total,
-    status,
-    icon: 'mdi-flag-checkered',
-    complete: completed >= total,
-    moduleId: nextModule.id
-  }
-})
-
-const badgeObjective = computed<Objective | null>(() => {
-  const upcoming = nextBadge.value
-  if (!upcoming) return null
-  const previous = badgeTrack.slice().reverse().find(badge => badge.xp <= xp.value) || badgeTrack[0]
-  const span = Math.max(1, upcoming.xp - previous.xp)
-  const gained = Math.max(0, xp.value - previous.xp)
-  return {
-    id: `badge-${upcoming.id}`,
-    title: `${upcoming.name} badge`,
-    description: upcoming.description,
-    progress: gained,
-    goal: span,
-    status: `${nextBadgeXpRemaining.value} XP to unlock`,
-    icon: 'mdi-shield-star',
-    complete: false
-  }
-})
-
-const objectiveList = computed(() => {
-  const list: Objective[] = []
-  if (missionObjective.value) list.push(missionObjective.value)
-  list.push(...dailyObjectives.value)
-  if (badgeObjective.value) list.push(badgeObjective.value)
-  return list
-})
-
-const primaryObjective = computed(() => objectiveList.value.find(objective => !objective.complete) || objectiveList.value[0] || null)
-
-const primaryObjectiveProgress = computed(() => (primaryObjective.value ? objectiveProgressPct(primaryObjective.value) : 0))
-
-function objectiveProgressPct(objective: Objective): number {
-  if (!objective.goal || objective.goal <= 0) {
-    return objective.complete ? 100 : 0
-  }
-  const clamped = Math.min(objective.goal, Math.max(0, objective.progress))
-  return Math.min(100, Math.round((clamped / objective.goal) * 100))
-}
-
-function objectiveBadgeLabel(objective: Objective): string {
-  if (objective.complete) return 'Completed'
-  if (!objective.goal || objective.goal <= 0) return 'Progress'
-  const clamped = Math.min(objective.goal, Math.max(0, Math.round(objective.progress)))
-  return `${clamped}/${objective.goal}`
-}
-
 function toastNow(text: string) {
   toast.value.text = text
   toast.value.show = true
@@ -4534,14 +4080,10 @@ function toastNow(text: string) {
 function resetAll() {
   if (!isClient) return
   progress.value = {} as LearnProgress
-  xp.value = 0
   cfg.value = {...defaultCfg}
-  unlockedModules.value = []
   audioReveal.value = !cfg.value.audioChallenge
   dirtyState.progress = true
-  dirtyState.xp = true
   dirtyState.config = true
-  dirtyState.unlocked = true
   schedulePersist(true)
 }
 
@@ -5041,23 +4583,10 @@ onMounted(() => {
     if (storedId) {
       simbriefForm.userId = storedId
     }
-    // Detect mic + MediaRecorder support on the client only to keep SSR/CSR
-    // markup consistent until the page is hydrated.
-    sttSupported.value = Boolean(navigator.mediaDevices?.getUserMedia)
-        && typeof window.MediaRecorder !== 'undefined'
   }
   void checkSpeechServerAvailability()
 })
 
-onBeforeUnmount(() => {
-  stopSttRecordingTimers()
-  if (sttMediaRecorder.value && sttRecording.value) {
-    try { sttMediaRecorder.value.stop() } catch { /* ignore */ }
-  }
-  sttStream.value?.getTracks().forEach(t => t.stop())
-  sttStream.value = null
-  sttMediaRecorder.value = null
-})
 </script>
 
 <style scoped>
@@ -5952,6 +5481,36 @@ onBeforeUnmount(() => {
   margin: 6px 0 10px
 }
 
+.training-data-notice,
+.lesson-scope-note {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+  padding: 8px 11px;
+  border: 1px solid color-mix(in srgb, #fbbf24 28%, transparent);
+  border-radius: 10px;
+  color: color-mix(in srgb, #fcd34d 84%, var(--text));
+  background: color-mix(in srgb, #fbbf24 7%, transparent);
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.lesson-scope-note {
+  margin: 0 0 10px;
+}
+
+.synthetic-data-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 5px 9px;
+  border-radius: 999px;
+  color: #fcd34d;
+  background: rgba(251, 191, 36, .12);
+  font-size: 11px;
+  font-weight: 700;
+}
+
 .tiles {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -6705,10 +6264,14 @@ onBeforeUnmount(() => {
 }
 
 .score-num {
-  font-size: 28px;
+  font-size: 18px;
   font-weight: 700
 }
 
+.score-num.is-mastered {
+  color: #6ee7b7;
+}
+
 /* Responsive */
 @media (max-width: 980px) {
   .hero {
@@ -7061,174 +6624,6 @@ onBeforeUnmount(() => {
   margin-top: 12px;
 }
 
-.btn.danger {
-  background: color-mix(in srgb, #ef4444 18%, transparent);
-  border-color: color-mix(in srgb, #ef4444 55%, transparent);
-  color: #fecaca;
-  animation: sttPulse 1.2s ease-in-out infinite;
-}
-
-@keyframes sttPulse {
-  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #ef4444 35%, transparent); }
-  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, #ef4444 0%, transparent); }
-}
-
-.stt-hint {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.stt-panel {
-  margin-top: 14px;
-  padding: 14px 16px;
-  border-radius: 14px;
-  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
-  background: linear-gradient(160deg,
-      color-mix(in srgb, var(--accent) 10%, transparent),
-      color-mix(in srgb, var(--bg2) 75%, transparent));
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.stt-panel.is-recording {
-  border-color: color-mix(in srgb, #ef4444 55%, transparent);
-  background: linear-gradient(160deg,
-      color-mix(in srgb, #ef4444 14%, transparent),
-      color-mix(in srgb, var(--bg2) 75%, transparent));
-}
-
-.stt-panel.is-error {
-  border-color: color-mix(in srgb, #ef4444 40%, transparent);
-}
-
-.stt-panel-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.stt-panel-title {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: .04em;
-  text-transform: uppercase;
-  color: color-mix(in srgb, var(--accent) 78%, var(--text));
-}
-
-.stt-panel.is-recording .stt-panel-title {
-  color: #fca5a5;
-}
-
-.stt-panel.is-error .stt-panel-title {
-  color: #fca5a5;
-}
-
-.stt-summary {
-  font-size: 12px;
-  color: var(--t2);
-  background: color-mix(in srgb, var(--text) 8%, transparent);
-  padding: 3px 9px;
-  border-radius: 999px;
-  letter-spacing: .02em;
-}
-
-.stt-report {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  margin-top: 6px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11.5px;
-}
-.stt-report-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.stt-report-row.is-ok { color: #6ee7a8; }
-.stt-report-row.is-missing { color: #fca5a5; }
-.stt-report-field { color: var(--t2); min-width: 90px; }
-.stt-report-expected { color: var(--text); font-weight: 600; }
-.stt-report-via { color: var(--t2); opacity: .8; }
-.stt-report-folded {
-  margin-top: 2px;
-  color: var(--t2);
-  opacity: .6;
-  font-size: 11px;
-}
-
-.stt-waiting {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 14px;
-  color: var(--t2);
-}
-
-.stt-rec-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: #ef4444;
-  box-shadow: 0 0 0 0 rgba(239, 68, 68, .6);
-  animation: sttDot 1.1s ease-in-out infinite;
-  flex-shrink: 0;
-}
-
-@keyframes sttDot {
-  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); }
-  50%      { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
-}
-
-.stt-error-body {
-  color: #fca5a5;
-  font-size: 14px;
-  padding: 10px 12px;
-  border-radius: 10px;
-  background: color-mix(in srgb, #ef4444 10%, transparent);
-  border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
-}
-
-.stt-textarea {
-  width: 100%;
-  resize: vertical;
-  min-height: 56px;
-  padding: 10px 12px;
-  border-radius: 10px;
-  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
-  background: color-mix(in srgb, var(--text) 5%, transparent);
-  color: var(--text);
-  font-size: 14px;
-  line-height: 1.45;
-  font-family: inherit;
-  outline: none;
-}
-
-.stt-textarea:focus {
-  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
-}
-
-.stt-panel-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.blank-status.stt-marker {
-  top: 8px;
-  right: 28px;
-  color: color-mix(in srgb, var(--accent) 80%, var(--text));
-  opacity: .85;
-}
-
-
 .readback-panel {
   padding: 20px;
   border-radius: 20px;
@@ -7369,6 +6764,11 @@ onBeforeUnmount(() => {
   opacity: 0.8;
 }
 
+.hint.standard {
+  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
+  color: color-mix(in srgb, var(--accent) 78%, var(--text));
+}
+
 .reference-section {
   margin-top: 8px;
   border-top: 1px solid var(--b2, rgba(255, 255, 255, 0.08));