diff --git a/apps/zoom-app/src/b/LookContext.js b/apps/zoom-app/src/b/LookContext.js
new file mode 100644
index 0000000..dc55308
--- /dev/null
+++ b/apps/zoom-app/src/b/LookContext.js
@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Which panel a shared component is drawn in: 'classic' (today's) or 'b'
+ * (design B, plan 13). Dialogs that both panels open (Upgrade, the club
+ * question, the Pro launch) read it to present themselves the new way inside
+ * design B's shell, and stay exactly as they are everywhere else.
+ */
+export const LookContext = createContext('classic');
+
+export function useLook() {
+  return useContext(LookContext);
+}
diff --git a/apps/zoom-app/src/b/NewLookShell.jsx b/apps/zoom-app/src/b/NewLookShell.jsx
index f1f9ebb..e7c3b65 100644
--- a/apps/zoom-app/src/b/NewLookShell.jsx
+++ b/apps/zoom-app/src/b/NewLookShell.jsx
@@ -6,6 +6,7 @@ import PeriodicPrompts from '../components/PeriodicPrompts';
 import TimerSounds from '../components/TimerSounds';
 import ContactCapture from '../components/ContactCapture';
 import TopBar from './TopBar';
+import { LookContext } from './LookContext';
 
 const TimerTab = lazy(() => import('./TimerTab'));
 const AgendaTabB = lazy(() => import('./AgendaTabB'));
@@ -40,6 +41,7 @@ export default function NewLookShell() {
   };
 
   return (
+    <LookContext.Provider value="b">
     <div className="app-container flex h-screen w-full flex-col bg-white" data-look="b">
       <ZoomConnectionNotice />
       <ClubStatusBanner />
@@ -76,5 +78,6 @@ export default function NewLookShell() {
       <TimerSounds />
       <ContactCapture />
     </div>
+    </LookContext.Provider>
   );
 }
diff --git a/apps/zoom-app/src/b/Phase3.test.jsx b/apps/zoom-app/src/b/Phase3.test.jsx
new file mode 100644
index 0000000..022156e
--- /dev/null
+++ b/apps/zoom-app/src/b/Phase3.test.jsx
@@ -0,0 +1,92 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { resetClubForTests, resetEntitlementForTests, resetFlagsForTests, setEntitlement, setFlags } from '@toastmaster-timer/shared';
+import { resolveZoomIdentity } from '../utils/zoomIdentity';
+import UpgradeModal from '../components/UpgradeModal';
+import ClubSurveyModal from '../components/ClubSurveyModal';
+import ProLaunchModal from '../components/ProLaunchModal';
+import TimerStage from '../components/TimerStage';
+import { LookContext } from './LookContext';
+
+vi.mock('../utils/zoomSdk', () => ({
+  openExternalUrl: vi.fn(),
+  getBackgroundUrl: vi.fn((color) => `/backgrounds/${color}.png`),
+  getZoomParticipants: vi.fn(async () => ({ participants: [], restricted: false })),
+}));
+vi.mock('../utils/posthog', () => ({ trackEvent: vi.fn() }));
+vi.mock('../utils/zoomIdentity', () => ({
+  resolveZoomIdentity: vi.fn(),
+  getSessionToken: vi.fn(() => 'session-token'),
+}));
+vi.mock('../utils/clubSurvey', () => ({ submitClubResponse: vi.fn(() => true) }));
+
+const inB = (ui) => render(<LookContext.Provider value="b">{ui}</LookContext.Provider>);
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  localStorage.clear();
+  resetClubForTests();
+  resetEntitlementForTests();
+  resetFlagsForTests();
+  resolveZoomIdentity.mockResolvedValue({ identified: true, uid: 'u1' });
+  global.fetch = vi.fn();
+  setFlags({ pro: true, sounds: true, new_look: true });
+  setEntitlement({ plan: 'free' });
+});
+
+describe('Pro in design B', () => {
+  it('opens Upgrade as a sheet with the PRO tag, the same content inside', async () => {
+    const onClose = vi.fn();
+    inB(<UpgradeModal isOpen onClose={onClose} source="pro_chip" />);
+    const sheet = screen.getByRole('dialog', { name: 'One Pro account for your whole club' });
+    expect(sheet).toHaveAttribute('aria-modal', 'true');
+    expect(sheet).toHaveTextContent('PRO');
+    expect(await screen.findByLabelText('Already on Pro through your club?')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('keeps today\'s dialog outside design B', () => {
+    render(<UpgradeModal isOpen onClose={() => {}} source="footer" />);
+    expect(screen.queryByTestId('sheet-backdrop')).toBeNull();
+  });
+
+  it('shows the launch announcement under the four cards, then hands off to the Upgrade sheet', () => {
+    const onDismiss = vi.fn();
+    inB(<ProLaunchModal isOpen onAnswered={() => {}} onDismiss={onDismiss} />);
+    const dialog = screen.getByRole('dialog', { name: 'New: Pro for your club' });
+    expect(dialog).toHaveTextContent('NEW');
+    expect(dialog).toHaveTextContent('The timer itself stays free. Not the one who decides? Tell your club officers.');
+    expect(dialog).toHaveTextContent('A chime when the card changes, and music during breaks');
+    fireEvent.click(screen.getByRole('button', { name: 'Not now' }));
+    expect(onDismiss).toHaveBeenCalled();
+  });
+});
+
+describe('notices in design B', () => {
+  it('asks which club as a sheet', () => {
+    const onDismiss = vi.fn();
+    inB(<ClubSurveyModal isOpen onAnswered={() => {}} onDismiss={onDismiss} onDecline={() => {}} />);
+    expect(screen.getByRole('dialog', { name: 'Which club are you from?' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: "Don't ask me again" })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Not now' }));
+    expect(onDismiss).toHaveBeenCalled();
+  });
+});
+
+describe('the stage in design B', () => {
+  it('names the share for what the meeting will see', () => {
+    const props = {
+      status: 'green', elapsedTime: 267, rules: { green: 240, yellow: 300, red: 360 }, speakerName: 'Bob', role: 'Ice Breaker',
+      isRunning: true, onStart() {}, onContinue() {}, onStop() {}, onReset() {}, onFinish() {}, onExit() {},
+      clockHidden: false, onToggleClock() {}, isSharing: false, onToggleShare: vi.fn(), isPoppedOut: false, onTogglePopout() {},
+      canPopout: true, onSpeakerNameChange() {}, agendaItems: [], activeSpeakerId: null, onSelectSpeaker() {}, onAddSpeaker() {},
+      onRenameSpeaker() {}, clubKit: null, badgePlacement: null,
+    };
+    const view = inB(<TimerStage {...props} />);
+    expect(screen.getByRole('button', { name: 'Share the timer to the meeting' })).toHaveTextContent('Share to the meeting');
+    view.unmount();
+    render(<TimerStage {...props} />);
+    expect(screen.getByRole('button', { name: 'Screenshare the timer' })).toHaveTextContent('Screenshare');
+  });
+});
diff --git a/apps/zoom-app/src/components/ClubSurveyModal.jsx b/apps/zoom-app/src/components/ClubSurveyModal.jsx
index a3dcb6d..0f040ff 100644
--- a/apps/zoom-app/src/components/ClubSurveyModal.jsx
+++ b/apps/zoom-app/src/components/ClubSurveyModal.jsx
@@ -3,6 +3,8 @@ import { X, Send } from 'lucide-react';
 import { CLUB_SURVEY_ID } from '@toastmaster-timer/shared';
 import { trackEvent } from '../utils/posthog';
 import { submitClubResponse } from '../utils/clubSurvey';
+import { useLook } from '../b/LookContext';
+import Sheet from '../b/Sheet';
 
 /**
  * Periodic prompt asking which Toastmasters club the user belongs to.
@@ -12,6 +14,7 @@ export default function ClubSurveyModal({ isOpen, onAnswered, onDismiss, onDecli
   const [club, setClub] = useState('');
   const [district, setDistrict] = useState('');
   const [submitted, setSubmitted] = useState(false);
+  const look = useLook();
 
   const handleSubmit = () => {
     if (submitted) return;
@@ -28,8 +31,89 @@ export default function ClubSurveyModal({ isOpen, onAnswered, onDismiss, onDecli
     onDismiss();
   };
 
+  const body = (
+    <>
+      {submitted ? (
+        <p className="text-green-600 font-medium py-4 text-center">
+          Thank you — that helps a lot!
+        </p>
+      ) : (
+        <>
+          <p className="text-sm text-gray-600 mb-4">
+            Knowing which clubs use the timer helps us build the right features. One question,
+            then we won&apos;t ask again.
+          </p>
+
+          <div className="mb-3">
+            <label htmlFor="club-name" className="block text-sm font-medium text-gray-700 mb-1">
+              Club name
+            </label>
+            <input
+              id="club-name"
+              type="text"
+              value={club}
+              onChange={(e) => setClub(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && handleSubmit()}
+              placeholder="e.g. Downtown Speakers"
+              autoFocus
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+            />
+          </div>
+
+          <div className="mb-4">
+            <label htmlFor="club-district" className="block text-sm font-medium text-gray-700 mb-1">
+              District <span className="text-gray-400 font-normal">(optional)</span>
+            </label>
+            <input
+              id="club-district"
+              type="text"
+              value={district}
+              onChange={(e) => setDistrict(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && handleSubmit()}
+              placeholder="e.g. 61"
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+            />
+          </div>
+
+          <div className="flex gap-2 justify-end">
+            <button
+              onClick={handleDismiss}
+              className="px-4 py-2 bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold rounded-lg transition-colors text-sm"
+            >
+              Not now
+            </button>
+            <button
+              onClick={handleSubmit}
+              disabled={!club.trim()}
+              className="flex items-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-colors text-sm"
+            >
+              <Send className="w-4 h-4" />
+              Submit
+            </button>
+          </div>
+
+          <button
+            onClick={onDecline}
+            className="mt-3 w-full text-center text-xs text-gray-400 hover:text-gray-600 transition-colors"
+          >
+            Don&apos;t ask me again
+          </button>
+        </>
+      )}
+    </>
+  );
+
   if (!isOpen) return null;
 
+  // Design B (plan 13): the same question as a sheet from the bottom edge.
+  if (look === 'b') {
+    return (
+      <Sheet open onClose={handleDismiss} title="Which club are you from?">
+        {body}
+      </Sheet>
+    );
+  }
+
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
       <div className="bg-white rounded-lg p-6 w-full max-w-md">
@@ -44,73 +128,7 @@ export default function ClubSurveyModal({ isOpen, onAnswered, onDismiss, onDecli
           </button>
         </div>
 
-        {submitted ? (
-          <p className="text-green-600 font-medium py-4 text-center">
-            Thank you — that helps a lot!
-          </p>
-        ) : (
-          <>
-            <p className="text-sm text-gray-600 mb-4">
-              Knowing which clubs use the timer helps us build the right features. One question,
-              then we won&apos;t ask again.
-            </p>
-
-            <div className="mb-3">
-              <label htmlFor="club-name" className="block text-sm font-medium text-gray-700 mb-1">
-                Club name
-              </label>
-              <input
-                id="club-name"
-                type="text"
-                value={club}
-                onChange={(e) => setClub(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && handleSubmit()}
-                placeholder="e.g. Downtown Speakers"
-                autoFocus
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
-              />
-            </div>
-
-            <div className="mb-4">
-              <label htmlFor="club-district" className="block text-sm font-medium text-gray-700 mb-1">
-                District <span className="text-gray-400 font-normal">(optional)</span>
-              </label>
-              <input
-                id="club-district"
-                type="text"
-                value={district}
-                onChange={(e) => setDistrict(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && handleSubmit()}
-                placeholder="e.g. 61"
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
-              />
-            </div>
-
-            <div className="flex gap-2 justify-end">
-              <button
-                onClick={handleDismiss}
-                className="px-4 py-2 bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold rounded-lg transition-colors text-sm"
-              >
-                Not now
-              </button>
-              <button
-                onClick={handleSubmit}
-                disabled={!club.trim()}
-                className="flex items-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-colors text-sm"
-              >
-                <Send className="w-4 h-4" />
-                Submit
-              </button>
-            </div>
-
-            <button
-              onClick={onDecline}
-              className="mt-3 w-full text-center text-xs text-gray-400 hover:text-gray-600 transition-colors"
-            >
-              Don&apos;t ask me again
-            </button>
-          </>
-        )}
+        {body}
       </div>
     </div>
   );
diff --git a/apps/zoom-app/src/components/ProLaunchModal.jsx b/apps/zoom-app/src/components/ProLaunchModal.jsx
index d9d0a39..dd8bc56 100644
--- a/apps/zoom-app/src/components/ProLaunchModal.jsx
+++ b/apps/zoom-app/src/components/ProLaunchModal.jsx
@@ -2,6 +2,7 @@ import { lazy, Suspense, useState } from 'react';
 import { X, Sparkles } from 'lucide-react';
 import { useFlag } from '../hooks/useFlag';
 import { trackEvent } from '../utils/posthog';
+import { useLook } from '../b/LookContext';
 
 const UpgradeModal = lazy(() => import('./UpgradeModal'));
 
@@ -20,6 +21,7 @@ export default function ProLaunchModal({ isOpen, onAnswered, onDismiss }) {
   // Sounds are only pitched once they are released: while `sounds` is off a
   // Pro user would find them locked as "coming soon".
   const { enabled: soundsReleased } = useFlag('sounds');
+  const look = useLook();
 
   if (!isOpen) return null;
 
@@ -36,6 +38,61 @@ export default function ProLaunchModal({ isOpen, onAnswered, onDismiss }) {
     setShowUpgrade(true);
   };
 
+  // Design B (plan 13, board B-P04): the same words under a row of the four
+  // timing cards, as one card in the middle of the panel.
+  if (look === 'b') {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/45 p-4">
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-label="New: Pro for your club"
+          className="w-full max-w-[340px] overflow-hidden rounded-2xl bg-white shadow-[0_16px_40px_rgba(15,23,42,0.3)]"
+        >
+          <div className="relative bg-gradient-to-b from-blue-50 to-white px-4 pb-3 pt-4">
+            <div className="grid grid-cols-4 gap-1.5" aria-hidden="true">
+              {['#4f86f7', '#16a34a', '#facc15', '#dc2626'].map((colour) => (
+                <span key={colour} className="aspect-video rounded-md shadow-sm" style={{ background: colour }} />
+              ))}
+            </div>
+            <div className="mt-3 flex items-center gap-2">
+              <span className="rounded bg-blue-600 px-1.5 py-0.5 text-[10px] font-bold tracking-wide text-white">NEW</span>
+              <h2 className="m-0 text-lg font-bold text-gray-900">Pro for your club</h2>
+            </div>
+            <button
+              type="button"
+              onClick={onDismiss}
+              aria-label="Close"
+              className="absolute right-3 top-3 flex h-7 w-7 items-center justify-center rounded-full bg-white/80 text-slate-600 hover:bg-white"
+            >
+              <X className="h-3.5 w-3.5" aria-hidden="true" />
+            </button>
+          </div>
+          <div className="px-4 pb-4">
+            <p className="mb-2 mt-0 text-sm text-slate-600">One plan covers every timer in your club:</p>
+            <ul className="mb-3 mt-0 list-disc space-y-1 pl-5 text-sm text-gray-700">
+              <li>Your club&apos;s brand kit on every timer card and report</li>
+              <li>Shared timing presets, set once for every timer</li>
+              <li>Every meeting saved to your club&apos;s archive</li>
+              {soundsReleased && <li>A chime when the card changes, and music during breaks</li>}
+            </ul>
+            <p className="mb-4 mt-0 text-sm text-slate-600">
+              The timer itself stays free. Not the one who decides? Tell your club officers.
+            </p>
+            <div className="flex gap-2">
+              <button type="button" onClick={onDismiss} className="h-11 flex-1 rounded-xl border border-gray-300 text-sm font-semibold hover:bg-slate-50">
+                Not now
+              </button>
+              <button type="button" onClick={handleLearnMore} className="h-11 flex-1 rounded-xl bg-blue-600 text-sm font-bold text-white hover:bg-blue-700">
+                See what&apos;s in Pro
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
       <div
diff --git a/apps/zoom-app/src/components/TimerStage.jsx b/apps/zoom-app/src/components/TimerStage.jsx
index 20ecc31..eecc579 100644
--- a/apps/zoom-app/src/components/TimerStage.jsx
+++ b/apps/zoom-app/src/components/TimerStage.jsx
@@ -15,6 +15,7 @@ import { formatTime, getPhaseInfo, formatPhaseTextFor, getDisplaySeconds } from
 import ClubBadge, { ClubBadgeLayer } from '@toastmaster-timer/ui/ClubBadge';
 import { getBackgroundUrl } from '../utils/zoomSdk';
 import StageSpeakerPicker from './StageSpeakerPicker';
+import { useLook } from '../b/LookContext';
 
 // Shown underneath the branded PNG, so the color signal is already correct while
 // the image loads and stays correct if it fails to load at all.
@@ -80,6 +81,7 @@ export default memo(function TimerStage({
   clubKit,
   badgePlacement,
 }) {
+  const look = useLook();
   const phaseInfo = rules ? getPhaseInfo(elapsedTime, rules, status) : null;
   const phaseText = phaseInfo ? formatPhaseTextFor(phaseInfo, rules) : '';
   const bgColor = STATUS_COLORS[status] || STATUS_COLORS.blue;
@@ -185,7 +187,7 @@ export default memo(function TimerStage({
               className={`flex items-center gap-1.5 pl-2.5 pr-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
                 isSharing ? 'bg-white text-blue-700 hover:bg-white/90' : 'bg-black/25 text-white hover:bg-black/35'
               }`}
-              aria-label={isSharing ? 'Stop sharing the timer' : 'Screenshare the timer'}
+              aria-label={isSharing ? 'Stop sharing the timer' : look === 'b' ? 'Share the timer to the meeting' : 'Screenshare the timer'}
               aria-pressed={isSharing}
             >
               {isSharing ? (
@@ -193,7 +195,8 @@ export default memo(function TimerStage({
               ) : (
                 <ScreenShare className="h-4 w-4 flex-shrink-0" />
               )}
-              {isSharing ? 'Stop sharing' : 'Screenshare'}
+              {/* Design B (board B-T16) names what the meeting will see. */}
+              {isSharing ? 'Stop sharing' : look === 'b' ? 'Share to the meeting' : 'Screenshare'}
             </button>
 
             {/* Desktop only, and never while sharing: Zoom refuses to undock an
diff --git a/apps/zoom-app/src/components/UpgradeModal.jsx b/apps/zoom-app/src/components/UpgradeModal.jsx
index 25acc6b..3d12ad1 100644
--- a/apps/zoom-app/src/components/UpgradeModal.jsx
+++ b/apps/zoom-app/src/components/UpgradeModal.jsx
@@ -19,6 +19,8 @@ import { openExternalUrl } from '../utils/zoomSdk';
 import { getSessionToken, resolveZoomIdentity } from '../utils/zoomIdentity';
 import { useEntitlement } from '../hooks/useEntitlement';
 import { useFlag } from '../hooks/useFlag';
+import { useLook } from '../b/LookContext';
+import Sheet from '../b/Sheet';
 
 /**
  * Buying Pro from inside Zoom, and joining a club that already bought it.
@@ -94,6 +96,7 @@ async function openPortal() {
 
 export default function UpgradeModal({ isOpen, onClose, source = 'unknown', onUpgraded }) {
   const { entitlement, isPro } = useEntitlement();
+  const look = useLook();
   // Sounds join the pitch only once released; while `sounds` is off they are
   // locked as "coming soon" even for Pro.
   const { enabled: soundsReleased } = useFlag('sounds');
@@ -533,6 +536,22 @@ export default function UpgradeModal({ isOpen, onClose, source = 'unknown', onUp
     );
   };
 
+  const title = isPro || phase === 'done' ? 'Toastmasters Timer Pro' : 'One Pro account for your whole club';
+
+  // Design B (plan 13) opens every setting as a sheet from the bottom edge.
+  if (look === 'b') {
+    return (
+      <Sheet
+        open
+        onClose={onClose}
+        title={title}
+        badge={<span className="rounded bg-amber-100 px-1.5 py-0.5 text-[11px] font-bold text-amber-800">PRO</span>}
+      >
+        {renderBody()}
+      </Sheet>
+    );
+  }
+
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
       <div className="bg-white rounded-lg p-6 w-full max-w-md">
@@ -542,7 +561,7 @@ export default function UpgradeModal({ isOpen, onClose, source = 'unknown', onUp
             {/* The pitch that passes the 30-second test: a treasurer who never
                 times a meeting has to see what their whole club gets, not what
                 one laptop gets. */}
-            {isPro || phase === 'done' ? 'Toastmasters Timer Pro' : 'One Pro account for your whole club'}
+            {title}
           </h3>
           <button
             onClick={onClose}
diff --git a/docs/FEATURE_FLAGS.md b/docs/FEATURE_FLAGS.md
index f678072..0a0fa16 100644
--- a/docs/FEATURE_FLAGS.md
+++ b/docs/FEATURE_FLAGS.md
@@ -54,7 +54,7 @@ Server gates: flagEnabled(env, key, { uid }) → bare 404 when off
 
 ## The flags
 
-There are two flags, `pro` and `contact_capture`, declared in `FLAG_FALLBACKS`
+The flags are `pro`, `contact_capture`, `sounds` and `new_look`, declared in `FLAG_FALLBACKS`
 in `worker/flags.js`, each with a `removeBy` date in a comment. Both fallbacks
 are `false`: the safe value, not the current one. **Both must exist in PostHog
 before they can be turned on in production**; until then the fallback applies.
@@ -115,6 +115,31 @@ server-side only, as `flag off: pro <route>`, so it shows in
   `anonymous` id, so a percentage rollout puts all of them in or all of them
   out together. Treat the anonymous position as on only at 100%.
 
+### `new_look` (design B)
+
+`new_look` draws the redesigned Zoom panel (plan 13): one timer card, a "Look &
+sound" section of sheets, the ⋯ menu and no footer. UI only: no endpoint reads it,
+and the code that talks to Zoom is shared with today's panel (`useLiveTimer`), so
+turning it off puts everyone back on today's panel at their next open with nothing
+lost. The Zoom app remembers the last answer per device
+(`toastmaster_new_look_last`) so the new look does not flash the old one while flags
+load.
+
+Rollout, in order:
+
+1. Create `new_look` in PostHog, off.
+2. Target your own `zoom:<uid>` and run `e2e/zoom-client/new-look.md` in production
+   with `pro` still off (the mix most users will get first).
+3. A handful of friendly clubs' uids; watch `tab_viewed` (`look: 'b'`),
+   `more_menu_opened` and support mail for a week.
+4. Everyone. Guests follow the anonymous position, so they move only at 100%.
+5. When it has been at 100% for a release, retire the flag (below): delete today's
+   panel (`ClassicShell`, `LiveTab`, `Footer`, `NavTabs`, the dialogs' classic
+   branches) in the same commit.
+
+While `new_look` is on and `pro` is off, the top note reads "New look: …" instead of
+the pre-launch "Coming soon: …" (`packages/shared/announcements.js`).
+
 ## Finding your uid
 
 - **PostHog → Persons**, search `zoom:`. The Zoom app identifies as
diff --git a/e2e/zoom-client/INDEX.md b/e2e/zoom-client/INDEX.md
index 43d373f..206c33c 100644
--- a/e2e/zoom-client/INDEX.md
+++ b/e2e/zoom-client/INDEX.md
@@ -15,13 +15,13 @@ Since plan 13 (design B), FLAGS_FORCE "1" also turns on `new_look`. Every spec e
 | [reauth-landing](reauth-landing.md) | stale | never | install landing: `tt_approved` mark, `?welcome=new` / `?welcome=back`, "You're reconnected" and Open in Zoom; a marked browser's bare `/` redirects to `/reconnect` (`/?home` and the `zoom.` host do not); where Zoom lands a guest after approving (#96) |
 | [contact-capture](contact-capture.md) | draft | never | Zoom email/name capture: authorize, "Stay in touch" card, browser and web sign-in doors, purge on uninstall (#83) |
 | [timer-sounds](timer-sounds.md) | stale | never | Pro sounds: card-change chime (1/2/3 notes), break music during Take a Break, locked for free plans ("Hold tight! Sounds are coming soon." while `pro` is off), audible through Share sound (#105). TS-09 ran green on 60e1b6e (2026-11-14); TS-01 needs a free device (the test device is on club Pro), TS-08 needs per-uid PostHog flags; audio steps never run. Plan 13 Phase 0 moved the modal's body into `SoundsPanel` (rerun pending) |
-| [pro-launch](pro-launch.md) | stale | eeaa840, 2026-11-13 | one-time "New: Pro for your club" window after FINISH for free devices once `pro` is on; hand-off to the Upgrade dialog; red dot on the footer's Upgrade button until Pro has been looked at. Stale: the Sounds line (ffc3a37) and the merge with dev's locked Pro button (pro-coming-soon) came after the last run; PL-01's free-device half and PL-04 (Free account) not run yet |
-| [announcement-banner](announcement-banner.md) | stale | cb49176, 2026-11-14 | one-line announcement above the tabs, picked from `ANNOUNCEMENTS` (packages/shared/announcements.js); today the pre-launch notice ("Coming soon: a fresh new look… and Pro features") while `pro` is off; a close is kept per device per announcement. Stale since 2026-11-14: App.jsx now switches shells on `new_look` (plan 13 Phase 0); rerun blocked while the test device is held for #145's CC-10 |
+| [pro-launch](pro-launch.md) | stale | eeaa840, 2026-11-13 | one-time "New: Pro for your club" window after FINISH for free devices once `pro` is on; hand-off to the Upgrade dialog; red dot on the footer's Upgrade button until Pro has been looked at; on design B the dot on the Pro chip and the window as a card (PL-05, not run). Stale: the Sounds line (ffc3a37) and the merge with dev's locked Pro button (pro-coming-soon) came after the last run; PL-01's free-device half and PL-04 (Free account) not run yet |
+| [announcement-banner](announcement-banner.md) | stale | cb49176, 2026-11-14 | one-line announcement above the tabs, picked from `ANNOUNCEMENTS` (packages/shared/announcements.js); today the pre-launch notice ("Coming soon: a fresh new look… and Pro features") while `pro` is off; a close is kept per device per announcement; on design B the "New look:" note instead (AB-05, not run). Stale since 2026-11-14: App.jsx now switches shells on `new_look` (plan 13 Phase 0); rerun blocked while the test device is held for #145's CC-10 |
 | [club-card-sets](club-card-sets.md) | stale | 905d8d1, 2026-11-13 | an admin or editor shares a custom card set with the club; another club device downloads it and shows it on real video; own choice kept; members can't publish; console removal; lapse; republish prunes the old image (plan 10 Phase 1). CC-07 and CC-08 not run on 905d8d1, and CC-06's member 403 never yet (a guest got 401). Stale since 2026-11-14: covered files changed for the 60-day reminder (#147) and the pro gate (club-pro-gate), and plan 13 Phase 0 moved the picker into `CardSetsPanel`; rerun before the next release |
 | [club-renewal-reminder](club-renewal-reminder.md) | stale | 51534f9, 2026-11-14 | amber "<club>'s Pro ends in N days" line: only in the last 60 days of a club that will not renew; a failed payment at once. CR-01 in Zoom; CR-02/CR-03 on the web app as a second club device (the Zoom client can't be made to refresh its club). CR-04 (nothing while `pro` is off) added 2026-11-14, not run yet (needs the club inside the 60-day window in dev KV) |
 | [club-pro-gate](club-pro-gate.md) | current | 32ebeb7, 2026-11-14 | every club feature (badge, club card set, club timings, archive strip / History / share, report branding, renewal line) only while the club is active **and** `pro` is on; nothing deleted while off |
 | [pro-coming-soon](pro-coming-soon.md) | current | 4d95d3d, 2026-11-14 | footer Pro button while `pro` is off: grey with a lock; hover or click lists what is coming (sounds, club card sets, voting, and more); the real Pro / Upgrade button once `pro` is on |
-| [new-look](new-look.md) | draft | never | design B behind `new_look` (plan 13): top row with the Pro chip and ⋯, no footer; the timer card drives the colour on real video; the 16:9 preview's chip and badge drags land where shown; each Look & sound sheet's setting reaches the video. Run with FLAGS_FORCE "1,pro=0". Held until plan 13's last phase is built |
+| [new-look](new-look.md) | draft | never | design B behind `new_look` (plan 13): top row with the Pro chip and ⋯, no footer; the timer card drives the colour on real video; the 16:9 preview's chip and badge drags land where shown; each Look & sound sheet's setting reaches the video; the Agenda, Report and rules sheets; Pro as a sheet, the stage, the club question. Run with FLAGS_FORCE "1,pro=0". Held until plan 13's last phase is built |
 | pro-club | **not migrated** | — | source: `docs/ZOOM_TEST_PLAN.md` P1–P7, plus the internal Club Pro plan (`06-zoom-client-test-plan-club-pro.md`); reference run `test-runs/2026-09-28-club-pro/run.md` |
 | webhooks-lifecycle | **not migrated** | — | source: `docs/ZOOM_TEST_PLAN.md` Steps 4, 5, 6 |
 
diff --git a/e2e/zoom-client/announcement-banner.md b/e2e/zoom-client/announcement-banner.md
index 8e97726..1d3b9bb 100644
--- a/e2e/zoom-client/announcement-banner.md
+++ b/e2e/zoom-client/announcement-banner.md
@@ -66,6 +66,14 @@ Expect: the banner disappears at once and is not back after reopening.
 Evidence: `localStorage.toastmaster_announcements_dismissed` holds its id; PostHog
 `announcement_dismissed`.
 
+### AB-05 · auto · On the new look, the note says it is here
+Do: with FLAGS_FORCE "1,pro=0" on dev (`new_look` on, `pro` off), open the app on a device that
+never closed it.
+Expect: the strip above the top row reads "New look: the timer sits in the middle now, with your
+settings under Look & sound. Pro is coming soon." and the "Coming soon:" notice does not show.
+Closing it keeps both closed after reopening.
+Evidence: screenshot; `toastmaster_announcements_dismissed` holds `new-look-2026-11`.
+
 ## Not covered
 - The web app (`apps/web`). The shared banner and the list support `surfaces: ['web']`, but
   only the Zoom app renders it so far.
diff --git a/e2e/zoom-client/new-look.md b/e2e/zoom-client/new-look.md
index 23e536b..ec42547 100644
--- a/e2e/zoom-client/new-look.md
+++ b/e2e/zoom-client/new-look.md
@@ -8,6 +8,10 @@ covers:
   - apps/zoom-app/src/hooks/useNewLook.js
   - apps/zoom-app/src/components/VideoPreviewLayer.jsx
   - apps/zoom-app/src/hooks/useRulesEditor.js
+  - apps/zoom-app/src/components/TimerStage.jsx
+  - apps/zoom-app/src/components/ProLaunchModal.jsx
+  - apps/zoom-app/src/components/ClubSurveyModal.jsx
+  - apps/zoom-app/src/components/UpgradeModal.jsx
 automated:
   - e2e/zoom.new-look.spec.js
   - apps/zoom-app/src/b/NewLookShell.test.jsx
@@ -15,6 +19,7 @@ automated:
   - apps/zoom-app/src/b/TopBar.test.jsx
   - apps/zoom-app/src/b/Sheet.test.jsx
   - apps/zoom-app/src/b/AgendaReport.test.jsx
+  - apps/zoom-app/src/b/Phase3.test.jsx
   - apps/zoom-app/src/hooks/useNewLook.test.js
 needs:
   - dev deployed
@@ -159,8 +164,36 @@ shows 0:20 · 0:45 · 1:00 and the video turns green at 0:20. On the club device
 "Using Claude Test Club's timings" with "Use mine".
 Evidence: screenshots; `toastmaster_role_rules`.
 
+### NL-17 · auto · Pro chip and ⋯ once Pro is released
+Do: with FLAGS_FORCE "1" on a free device, look at the top row; press the Pro chip; close; ⋯.
+Expect: a blue "Pro" chip with the red launch dot; Upgrade opens as a sheet from the bottom edge
+with the PRO tag, the prices and the club code field; ⋯ starts with "Your plan · Free · See Pro"
+and "Join my club with a code". On the club Pro device the chip is amber and reads "Manage".
+Evidence: screenshots.
+
+### NL-18 · auto · The full-screen timer from its sheet
+Do: "On your video" → Full-screen timer; press "Share to the meeting"; stop sharing; close the
+stage.
+Expect: the stage covers the panel with the card artwork; the share button reads "Share to the
+meeting" and starts a Zoom share of the timer; closing returns to the panel in Timer only.
+Evidence: screenshots; Zoom's share toolbar.
+
+### NL-19 · auto · The club question as a sheet
+Do: with the prompt debug controls (dev build) or a due prompt, let the club question come up
+after FINISH.
+Expect: "Which club are you from?" rises as a sheet; Not now closes it; Don't ask me again
+retires it.
+Evidence: screenshots; `toastmaster_prompts`.
+
+### NL-20 · auto · The top note on the new look
+Do: on a device that never closed it, open the app with FLAGS_FORCE "1,pro=0".
+Expect: "New look: the timer sits in the middle now, with your settings under Look & sound. Pro
+is coming soon." above the top row (see announcement-banner AB-05).
+Evidence: screenshot.
+
 ## Not covered
 - Today's panel with `new_look` off: the other specs, run with FLAGS_FORCE "1,new_look=0".
 - Audio of the sounds: timer-sounds.
-- The Pro sheets, the banners and the stage restyle: steps added with plan 13's Phase 3.
+- The connection and club-renewal banners: unchanged by design B (they already sit at the top
+  as the boards draw them); connection-notice and club-renewal-reminder cover them.
 - Dragging agenda rows: the same dnd-kit sorting as today's tab, covered by the e2e and unit tests.
diff --git a/e2e/zoom-client/pro-launch.md b/e2e/zoom-client/pro-launch.md
index 9f0cc01..6e72255 100644
--- a/e2e/zoom-client/pro-launch.md
+++ b/e2e/zoom-client/pro-launch.md
@@ -4,6 +4,7 @@ title: Pro launch announcement
 status: stale
 covers:
   - apps/zoom-app/src/components/ProLaunchModal.jsx
+  - apps/zoom-app/src/components/UpgradeModal.jsx
   - apps/zoom-app/src/components/PeriodicPrompts.jsx
   - apps/zoom-app/src/components/Footer.jsx
   - packages/shared/promptScheduler.js
@@ -78,6 +79,13 @@ Run 2026-11-13 (eeaa840, Zoom on macOS, device Pro through its own subscription)
 PL-03 passed; PL-01 only its Pro half (no dot on "Pro"); PL-04 not run (needs a Free account).
 Log: test-runs/2026-11-13-pro-launch/run.md.
 
+### PL-05 · auto · On the new look: the dot is on the Pro chip, the window is a card
+Do: with FLAGS_FORCE "1" on a free device (`new_look` and `pro` on), open the app; FINISH a speech.
+Expect: the red dot sits on the top row's Pro chip (there is no footer). 2.5 s after FINISH the
+window shows the four timing cards over "NEW · Pro for your club" with the same words as PL-02;
+"See what's in Pro" opens Upgrade as a sheet from the bottom edge.
+Evidence: screenshots; `pro_launch_learn_more` in PostHog.
+
 ## Not covered
 - The footer while `pro` is off: since the merge with dev (2026-11-14) it shows the locked
   "Pro (coming soon)" button instead of nothing. See [pro-coming-soon](pro-coming-soon.md).
diff --git a/e2e/zoom.new-look.spec.js b/e2e/zoom.new-look.spec.js
index 5fd63d8..191ed34 100644
--- a/e2e/zoom.new-look.spec.js
+++ b/e2e/zoom.new-look.spec.js
@@ -193,3 +193,33 @@ test('report: empty, then a speech to copy; the rules sheet edits a role', async
   await page.getByRole('button', { name: /Timing role/ }).click();
   await expect(page.getByRole('option', { name: /Ice Breaker/ })).toContainText('3:30 · 5:00 · 6:00');
 });
+
+// ── Phase 3: Pro, notices, stage ─────────────────────────────────────────
+
+test('the top note says the new look is here, while Pro is still coming', async ({ page }) => {
+  await openPanel(page);
+  await expect(page.getByText('New look:')).toBeVisible();
+  await expect(page.getByText('Coming soon:')).toHaveCount(0);
+});
+
+test('the Pro chip opens Upgrade as a sheet once Pro is released', async ({ page }) => {
+  await openPanel(page, { flags: { new_look: true, pro: true, sounds: true } });
+  await page.getByRole('button', { name: 'Upgrade to Pro' }).click();
+  const sheet = page.getByRole('dialog', { name: 'One Pro account for your whole club' });
+  await expect(sheet).toBeVisible();
+  await expect(sheet.getByText('Already on Pro through your club?')).toBeVisible();
+  await page.keyboard.press('Escape');
+  await expect(sheet).toHaveCount(0);
+});
+
+test('the full-screen timer opens from its sheet and names the share', async ({ page }) => {
+  await openPanel(page);
+  await page.getByRole('button', { name: /^On your video/ }).click();
+  await page.getByRole('radio', { name: /Full-screen timer/ }).click();
+  const stage = page.getByTestId('timer-stage');
+  await expect(stage).toBeVisible();
+  await expect(stage.getByRole('button', { name: 'Share the timer to the meeting' })).toHaveText('Share to the meeting');
+  await stage.getByRole('button', { name: 'Close the timer stage' }).click();
+  await expect(stage).toHaveCount(0);
+  await expect(page.getByRole('button', { name: 'On your video: Timer only' })).toBeVisible();
+});
diff --git a/packages/shared/__tests__/announcements.test.js b/packages/shared/__tests__/announcements.test.js
index ebecee7..8442e2d 100644
--- a/packages/shared/__tests__/announcements.test.js
+++ b/packages/shared/__tests__/announcements.test.js
@@ -81,6 +81,18 @@ describe('the shipped pre-launch announcement', () => {
     expect(pick({ pro: true, sounds: true })).toBeNull();
   });
 
+  it('gives way to the new-look note for anyone already on design B', () => {
+    const pick = (flags) => pickAnnouncement({ surface: 'zoom', flags, flagsKnown: true, dismissed: [], now: NOW });
+    const note = pick({ pro: false, sounds: true, new_look: true });
+    expect(note?.id).toBe('new-look-2026-11');
+    expect(`${note.lead} ${note.text}`).toBe(
+      'New look: the timer sits in the middle now, with your settings under Look & sound. Pro is coming soon.',
+    );
+    expect(pick({ pro: true, new_look: true })).toBeNull();
+    // Closing the new-look note does not bring the pre-launch one back.
+    expect(pickAnnouncement({ surface: 'zoom', flags: { pro: false, new_look: true }, flagsKnown: true, dismissed: ['new-look-2026-11'], now: NOW })).toBeNull();
+  });
+
   it('has unique ids across the list', () => {
     const ids = ANNOUNCEMENTS.map((a) => a.id);
     expect(new Set(ids).size).toBe(ids.length);
diff --git a/packages/shared/announcements.js b/packages/shared/announcements.js
index 19cd054..47afe4f 100644
--- a/packages/shared/announcements.js
+++ b/packages/shared/announcements.js
@@ -22,14 +22,25 @@
  * - `link`     optional { label, url }, opened outside the app.
  */
 export const ANNOUNCEMENTS = Object.freeze([
+  // Design B is on for this person (plan 13, `new_look`), so the new look is
+  // no longer "coming": say where things went, and keep Pro as what is coming.
+  Object.freeze({
+    id: 'new-look-2026-11',
+    lead: 'New look:',
+    text: 'the timer sits in the middle now, with your settings under Look & sound. Pro is coming soon.',
+    tone: 'info',
+    surfaces: ['zoom'],
+    when: ({ flags }) => flags.new_look === true && !flags.pro,
+  }),
   Object.freeze({
     id: 'pre-launch-2026-11',
     lead: 'Coming soon:',
     text: 'a fresh new look for the timer, and Pro features for your club.',
     tone: 'info',
     surfaces: ['zoom'],
-    // Retires itself at launch, when the Pro launch announcement takes over.
-    when: ({ flags }) => !flags.pro,
+    // Retires itself at launch, when the Pro launch announcement takes over,
+    // and for anyone already on the new look.
+    when: ({ flags }) => !flags.pro && flags.new_look !== true,
   }),
 ]);