diff --git a/packages/shared/src/features/onboarding/steps/FunnelPersonaQuiz.module.css b/packages/shared/src/features/onboarding/steps/FunnelPersonaQuiz.module.css
index 1b00cc35f6..53fedf2d56 100644
--- a/packages/shared/src/features/onboarding/steps/FunnelPersonaQuiz.module.css
+++ b/packages/shared/src/features/onboarding/steps/FunnelPersonaQuiz.module.css
@@ -42,15 +42,507 @@
 }
 
 .revealName {
-  animation: reveal-rise 0.5s ease 0.15s both;
+  animation: reveal-rise 0.5s ease 0.5s both;
 }
 
 .revealTagline {
-  animation: reveal-rise 0.5s ease 0.3s both;
+  animation: reveal-rise 0.5s ease 0.64s both;
 }
 
 .revealActions {
-  animation: reveal-rise 0.5s ease 0.45s both;
+  animation: reveal-rise 0.5s ease 0.78s both;
+}
+
+/* ─── Reveal celebration ──────────────────────────────────────────────────
+ * The genie's verdict lands as an event: a glowing persona "amulet" springs
+ * in, a shockwave ring snaps out, spokes of light spin behind it, and a burst
+ * of brand-coloured confetti scatters. `--persona` (the persona's brand colour)
+ * is set inline on the .emblem and inherited by every layer. */
+.emblem {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 9rem;
+  height: 9rem;
+}
+
+@keyframes emblem-pop {
+  0% {
+    transform: scale(0) rotate(-28deg);
+    opacity: 0;
+  }
+  62% {
+    transform: scale(1.14) rotate(6deg);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1) rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes emblem-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 0 1px
+        color-mix(in srgb, var(--persona) 55%, transparent),
+      0 14px 44px -10px color-mix(in srgb, var(--persona) 55%, transparent);
+  }
+  50% {
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--persona) 85%, transparent),
+      0 18px 64px -8px color-mix(in srgb, var(--persona) 85%, transparent);
+  }
+}
+
+.emblemCoin {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  width: 7rem;
+  height: 7rem;
+  border-radius: 9999px;
+  background: radial-gradient(
+      circle at 36% 28%,
+      color-mix(in srgb, var(--persona) 10%, white) 0%,
+      transparent 46%
+    ),
+    color-mix(in srgb, var(--persona) 32%, var(--theme-surface-float));
+  border: 1px solid color-mix(in srgb, var(--persona) 65%, transparent);
+  animation: emblem-pop 0.6s cubic-bezier(0.18, 0.9, 0.32, 1.4) both,
+    emblem-glow 2.6s ease-in-out 0.65s infinite;
+}
+
+.emblemEmoji {
+  font-size: 3.25rem;
+  line-height: 1;
+  filter: drop-shadow(0 3px 8px rgb(0 0 0 / 0.4));
+}
+
+@keyframes shockwave {
+  0% {
+    transform: scale(0.55);
+    opacity: 0.85;
+  }
+  100% {
+    transform: scale(2.7);
+    opacity: 0;
+  }
+}
+
+.emblemFlash {
+  position: absolute;
+  z-index: 1;
+  width: 7rem;
+  height: 7rem;
+  border-radius: 9999px;
+  border: 2px solid color-mix(in srgb, var(--persona) 70%, transparent);
+  animation: shockwave 0.85s ease-out 0.1s both;
+}
+
+/* Firework burst: glowing dots (same family as the floating dust) explode
+ * outward from the emblem centre, decelerate, sag a touch with gravity, then
+ * fade — like a firework going off where the icon is. */
+@keyframes firework {
+  0% {
+    transform: translate(-50%, -50%) scale(0.3);
+    opacity: 0;
+  }
+  12% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
+      scale(0.6);
+    opacity: 0;
+  }
+}
+
+.fireworkSpark {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 0;
+  width: var(--sw, 5px);
+  height: var(--sw, 5px);
+  border-radius: 9999px;
+  background: var(--sc);
+  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--sc) 65%, transparent);
+  animation: firework var(--sd, 1.3s) cubic-bezier(0.12, 0.75, 0.25, 1)
+    var(--sdelay, 0s) both;
+}
+
+/* ─── Casino / arcade micro-interactions ──────────────────────────────────
+ * Patchy is a genie, so the whole step leans into a "make a wish" slot-machine
+ * feel: the primary CTA breathes a neon halo and flashes a shine sweep on
+ * hover, the yes/no answers behave like tactile chips with a color-coded glow,
+ * and the option cards light up as you reach for them. Everything is paired
+ * with cheap transform/opacity work and fully disabled under reduced motion. */
+
+/* White CTA sitting in a spotlight: a soft luminous halo that breathes, so the
+ * button reads as the lit object on the stage. Neutral white light with the
+ * faintest cabbage rim — never tints the white fill. */
+@keyframes cta-pulse {
+  0%,
+  100% {
+    box-shadow: 0 10px 34px -16px rgb(255 255 255 / 35%);
+  }
+  50% {
+    box-shadow: 0 12px 42px -14px rgb(255 255 255 / 55%),
+      0 0 24px -6px
+        color-mix(in srgb, var(--theme-accent-cabbage-default) 45%, transparent);
+  }
+}
+
+@keyframes shine-sweep {
+  from {
+    transform: translateX(-180%) skewX(-16deg);
+  }
+  to {
+    transform: translateX(320%) skewX(-16deg);
+  }
+}
+
+@keyframes bar-shimmer {
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes tick-pop {
+  0% {
+    transform: scale(0.4);
+    opacity: 0;
+  }
+  60% {
+    transform: scale(1.18);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes aurora-drift {
+  from {
+    transform: translate(-58%, -3%) scale(1);
+  }
+  to {
+    transform: translate(-42%, 5%) scale(1.08);
+  }
+}
+
+@keyframes star-twinkle {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+/* "Stage" backdrop. Full-bleed via `fixed` so it never gets clipped by the
+ * content column, and sits behind the content through a negative z-index inside
+ * the isolated stage. A faint pool of lamp-light glows up from the base and a
+ * vignette pulls focus to the centre — the top stays clean and dark. */
+.stageBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  overflow: hidden;
+  background: radial-gradient(
+      120% 95% at 50% 32%,
+      transparent 52%,
+      rgb(0 0 0 / 55%) 100%
+    ),
+    radial-gradient(
+      46% 36% at 50% 104%,
+      color-mix(in srgb, var(--theme-accent-cabbage-default) 18%, transparent),
+      transparent 72%
+    );
+}
+
+/* Slow-drifting aurora blob rising from the base — gives the lamp-light life
+ * and a colour shift without lighting up the top of the screen. */
+.stageBackdrop::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: -28%;
+  width: 90vw;
+  height: 60vh;
+  transform: translate(-50%, 0);
+  background: radial-gradient(
+    closest-side,
+    color-mix(in srgb, var(--theme-accent-cabbage-default) 24%, transparent),
+    transparent
+  );
+  filter: blur(48px);
+  animation: aurora-drift 16s ease-in-out infinite alternate;
+}
+
+/* Sparse "magic dust" starfield — subtle, masked to the stage centre. */
+.stageBackdrop::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(
+      1.5px 1.5px at 18% 24%,
+      color-mix(in srgb, var(--theme-text-primary) 55%, transparent),
+      transparent
+    ),
+    radial-gradient(
+      1.5px 1.5px at 72% 16%,
+      color-mix(in srgb, var(--theme-text-primary) 45%, transparent),
+      transparent
+    ),
+    radial-gradient(
+      1px 1px at 84% 60%,
+      color-mix(in srgb, var(--theme-text-primary) 45%, transparent),
+      transparent
+    ),
+    radial-gradient(
+      1px 1px at 30% 72%,
+      color-mix(in srgb, var(--theme-text-primary) 40%, transparent),
+      transparent
+    ),
+    radial-gradient(
+      1.5px 1.5px at 58% 84%,
+      color-mix(in srgb, var(--theme-text-primary) 40%, transparent),
+      transparent
+    ),
+    radial-gradient(
+      1px 1px at 8% 54%,
+      color-mix(in srgb, var(--theme-text-primary) 40%, transparent),
+      transparent
+    );
+  animation: star-twinkle 5s ease-in-out infinite;
+  mask-image: radial-gradient(75% 70% at 50% 35%, #000, transparent 80%);
+}
+
+/* Second aurora in a cooler hue. It drifts the opposite way and breathes its
+ * opacity out of phase with the cabbage one, so the spotlight slowly shifts
+ * colour — purple → blue → purple — like magic settling over the stage. */
+@keyframes aurora-shift {
+  0%,
+  100% {
+    opacity: 0.25;
+    transform: translate(-38%, 4%) scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: translate(-58%, -4%) scale(1.12);
+  }
+}
+
+.auroraAlt {
+  position: absolute;
+  left: 50%;
+  bottom: -30%;
+  width: 80vw;
+  height: 58vh;
+  background: radial-gradient(
+    closest-side,
+    color-mix(in srgb, var(--theme-accent-blueCheese-default) 26%, transparent),
+    transparent
+  );
+  filter: blur(54px);
+  animation: aurora-shift 13s ease-in-out infinite;
+}
+
+/* Floating "magic dust": specks that lift off the bottom edge, drift steadily
+ * up, and fade out by the time they reach ~25% of the screen height. Linear
+ * timing keeps them continuously moving (never parked mid-screen). */
+@keyframes particle-rise {
+  0% {
+    transform: translateY(0) scale(0.5);
+    opacity: 0;
+  }
+  12% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 0.9;
+  }
+  100% {
+    transform: translateY(-26vh) scale(1);
+    opacity: 0;
+  }
+}
+
+.magicParticle {
+  position: absolute;
+  bottom: 0;
+  width: 4px;
+  height: 4px;
+  border-radius: 9999px;
+  background: color-mix(in srgb, var(--theme-accent-cabbage-default) 75%, white);
+  box-shadow: 0 0 8px 1px
+    color-mix(in srgb, var(--theme-accent-cabbage-default) 60%, transparent);
+  animation: particle-rise var(--particle-duration, 6s) linear infinite;
+  animation-delay: var(--particle-delay, 0s);
+}
+
+/* Thought-cloud connector: glassy circles that trail from the panel toward
+ * Patchy, so the message reads as coming from the avatar. */
+.bubbleDot {
+  border-radius: 9999px;
+  background: color-mix(in srgb, var(--theme-surface-float) 50%, transparent);
+  backdrop-filter: blur(18px) saturate(1.1);
+  -webkit-backdrop-filter: blur(18px) saturate(1.1);
+  border: 1px solid
+    color-mix(in srgb, var(--theme-text-primary) 12%, transparent);
+}
+
+/* Frosted-glass panel for Patchy's lines: translucent, blurred, with a glass
+ * top-edge highlight. Replaces the flat bordered speech bubble. */
+.panel {
+  border-radius: 24px;
+  background: color-mix(in srgb, var(--theme-surface-float) 50%, transparent);
+  backdrop-filter: blur(18px) saturate(1.1);
+  -webkit-backdrop-filter: blur(18px) saturate(1.1);
+  border: 1px solid
+    color-mix(in srgb, var(--theme-text-primary) 12%, transparent);
+  box-shadow: 0 28px 64px -34px rgb(0 0 0 / 65%),
+    inset 0 1px 0 0 color-mix(in srgb, var(--theme-text-primary) 10%, transparent);
+}
+
+/* Primary "play" button: a living halo plus a shine that sweeps across on
+ * hover. overflow-hidden clips the shine; the pseudo-element never eats
+ * pointer events so the click target is unchanged. */
+.cta {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  animation: cta-pulse 2.6s ease-in-out infinite;
+}
+
+.cta::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 36%;
+  transform: translateX(-180%) skewX(-16deg);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgb(255 255 255 / 45%),
+    transparent
+  );
+  pointer-events: none;
+}
+
+.cta:hover::after {
+  animation: shine-sweep 0.8s ease-out;
+}
+
+/* Yes / No answers. Flat — no tile background or border. Just a colour-filled
+ * circle (the icon) beside a plain label; the two circles sit close together in
+ * the middle with the labels flanking the outer edges. On hover the circle
+ * fills solid, glows and lifts. */
+.answer {
+  background: transparent;
+  border: none;
+  transition: transform 0.18s ease;
+}
+
+/* Icon circle: a colour-tinted disc that brightens to a solid fill on hover. */
+.answerBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.answerYes .answerBadge {
+  background: color-mix(in srgb, var(--theme-accent-avocado-default) 22%, transparent);
+  color: var(--theme-accent-avocado-default);
+}
+
+.answerNo .answerBadge {
+  background: color-mix(in srgb, var(--theme-accent-ketchup-default) 22%, transparent);
+  color: var(--theme-accent-ketchup-default);
+}
+
+/* Scaling the badge (not the svg) keeps the downvote's `rotate-180` intact. */
+.answerYes:hover .answerBadge {
+  background: var(--theme-accent-avocado-default);
+  color: var(--theme-surface-invert);
+  transform: scale(1.08);
+  box-shadow: 0 0 28px -4px
+    color-mix(in srgb, var(--theme-accent-avocado-default) 75%, transparent);
+}
+
+.answerNo:hover .answerBadge {
+  background: var(--theme-accent-ketchup-default);
+  color: var(--theme-surface-invert);
+  transform: scale(1.08);
+  box-shadow: 0 0 28px -4px
+    color-mix(in srgb, var(--theme-accent-ketchup-default) 75%, transparent);
+}
+
+/* "Not sure": a clearly secondary ghost pill — visible, but lighter than the
+ * answer tiles. Dashed hairline + muted label that warms on hover. */
+.notSure {
+  border-radius: 9999px;
+  border: 1px dashed
+    color-mix(in srgb, var(--theme-text-primary) 22%, transparent);
+  background: color-mix(in srgb, var(--theme-surface-float) 30%, transparent);
+  color: var(--theme-text-secondary);
+  transition: transform 0.16s ease, color 0.18s ease, border-color 0.18s ease,
+    background-color 0.18s ease;
+}
+
+.notSure:hover {
+  color: var(--theme-text-primary);
+  border-color: color-mix(in srgb, var(--theme-text-primary) 40%, transparent);
+  background: color-mix(in srgb, var(--theme-surface-float) 55%, transparent);
+}
+
+/* Persona / option cards: reach-for-it glow + emoji wink. */
+.card {
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.card:hover {
+  box-shadow: 0 14px 34px -16px
+    color-mix(in srgb, var(--theme-accent-cabbage-default) 90%, transparent);
+}
+
+.cardEmoji {
+  transition: transform 0.2s ease;
+}
+
+.card:hover .cardEmoji {
+  transform: scale(1.16) rotate(-6deg);
+}
+
+/* Selected modifier tick. */
+.tick {
+  animation: tick-pop 0.28s ease both;
+}
+
+/* Progress fill: a slow gold→grape shimmer so the bar feels alive while it
+ * fills, not a static block. */
+.progressFill {
+  background-image: linear-gradient(
+    90deg,
+    var(--theme-accent-cabbage-default),
+    var(--theme-accent-bacon-default),
+    var(--theme-accent-cheese-default),
+    var(--theme-accent-cabbage-default)
+  );
+  background-size: 200% 100%;
+  animation: bar-shimmer 3s linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -58,7 +550,26 @@
   .dot,
   .revealName,
   .revealTagline,
-  .revealActions {
+  .revealActions,
+  .cta,
+  .progressFill,
+  .tick,
+  .stageBackdrop::before,
+  .stageBackdrop::after,
+  .auroraAlt,
+  .magicParticle,
+  .emblemCoin,
+  .emblemFlash {
     animation: none;
   }
+
+  .magicParticle,
+  .emblemFlash,
+  .fireworkSpark {
+    display: none;
+  }
+
+  .cta::after {
+    display: none;
+  }
 }
diff --git a/packages/shared/src/features/onboarding/steps/FunnelPersonaQuiz.tsx b/packages/shared/src/features/onboarding/steps/FunnelPersonaQuiz.tsx
index 5187b25125..61bf9eb229 100644
--- a/packages/shared/src/features/onboarding/steps/FunnelPersonaQuiz.tsx
+++ b/packages/shared/src/features/onboarding/steps/FunnelPersonaQuiz.tsx
@@ -11,10 +11,10 @@ import type { FunnelStepPersonaQuiz } from '../types/funnel';
 import { FunnelStepTransitionType } from '../types/funnel';
 import { withIsActiveGuard } from '../shared/withActiveGuard';
 import {
-  Button,
   ButtonSize,
+  ButtonV2,
   ButtonVariant,
-} from '../../../components/buttons/Button';
+} from '../../../components/buttons/ButtonV2';
 import {
   Typography,
   TypographyColor,
@@ -22,6 +22,7 @@ import {
   TypographyType,
 } from '../../../components/typography/Typography';
 import { DownvoteIcon, UpvoteIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
 import { usePersonaQuiz } from './persona/usePersonaQuiz';
 import type { AnswerValue } from './persona/engine';
 import type { DeveloperPersona } from './persona/data';
@@ -297,21 +298,30 @@ const SpeechBubble = ({
 }): ReactElement => (
   <div
     className={classNames(
-      'relative w-full rounded-16 border-2 border-border-subtlest-tertiary p-6 text-center tablet:p-8',
+      styles.panel,
+      'relative w-full p-6 text-center tablet:p-8',
       className,
     )}
   >
     {children}
-    {/* On mobile Patchy sits above the bubble, so the tail points up. */}
+    {/* Thought-cloud trailing toward Patchy: up on mobile (he sits above),
+     * out to the right on laptop (he sits beside). */}
     <span
       aria-hidden
-      className="absolute left-1/2 top-0 h-6 w-6 -translate-x-1/2 -translate-y-1/2 rotate-45 border-l-2 border-t-2 border-border-subtlest-tertiary bg-background-default laptop:hidden"
-    />
-    {/* On laptop Patchy sits to the right, so the tail points right. */}
+      className="absolute bottom-full left-1/2 mb-2 flex -translate-x-1/2 flex-col-reverse items-center gap-1.5 laptop:hidden"
+    >
+      <span className={classNames(styles.bubbleDot, 'h-4 w-4')} />
+      <span className={classNames(styles.bubbleDot, 'h-2.5 w-2.5')} />
+      <span className={classNames(styles.bubbleDot, 'h-1.5 w-1.5')} />
+    </span>
     <span
       aria-hidden
-      className="absolute right-0 top-1/2 hidden h-8 w-8 -translate-y-1/2 translate-x-1/2 rotate-45 border-r-2 border-t-2 border-border-subtlest-tertiary bg-background-default laptop:block"
-    />
+      className="absolute left-full top-1/2 ml-3 hidden -translate-y-1/2 items-center gap-2 laptop:flex"
+    >
+      <span className={classNames(styles.bubbleDot, 'h-5 w-5')} />
+      <span className={classNames(styles.bubbleDot, 'h-3 w-3')} />
+      <span className={classNames(styles.bubbleDot, 'h-2 w-2')} />
+    </span>
   </div>
 );
 
@@ -323,6 +333,74 @@ interface QuizStageProps {
   children: ReactNode;
 }
 
+// Fixed configs (left column / size / timing) so the floating dust is stable
+// across SSR and re-renders instead of jumping on every paint.
+const MAGIC_PARTICLES = [
+  { left: '10%', size: 3, delay: '0s', duration: '5s' },
+  { left: '22%', size: 5, delay: '1.6s', duration: '6.2s' },
+  { left: '34%', size: 3, delay: '3.2s', duration: '4.6s' },
+  { left: '44%', size: 4, delay: '0.8s', duration: '5.6s' },
+  { left: '52%', size: 6, delay: '2.4s', duration: '6.8s' },
+  { left: '61%', size: 3, delay: '4s', duration: '5.2s' },
+  { left: '70%', size: 5, delay: '0.4s', duration: '6s' },
+  { left: '79%', size: 4, delay: '3s', duration: '4.4s' },
+  { left: '88%', size: 3, delay: '1.2s', duration: '6.4s' },
+  { left: '16%', size: 4, delay: '3.8s', duration: '5.4s' },
+  { left: '66%', size: 3, delay: '4.6s', duration: '4.8s' },
+  { left: '93%', size: 5, delay: '2s', duration: '7s' },
+];
+
+// Reveal firework: glowing dots (same family as the floating dust) explode
+// radially from the emblem centre. Generated once (deterministic, no
+// randomness) so it's SSR-stable.
+const FIREWORK_COLORS = [
+  'var(--theme-accent-cabbage-default)',
+  'var(--theme-accent-cabbage-bolder)',
+  'var(--theme-accent-cabbage-subtler)',
+  'var(--theme-accent-onion-default)',
+  'var(--theme-accent-onion-bolder)',
+  'var(--theme-accent-onion-subtler)',
+];
+
+const REVEAL_FIREWORK = Array.from({ length: 30 }, (_, index) => {
+  // Even radial spread + slight per-spoke jitter so it reads organic.
+  const angle = (index / 30) * Math.PI * 2 + (index % 2 ? 0.12 : -0.12);
+  const distance = 95 + (index % 4) * 48; // 95 → 239px rings
+  const gravity = 24 + (index % 3) * 16; // gentle downward sag
+  return {
+    id: index,
+    dx: `${Math.round(Math.cos(angle) * distance)}px`,
+    dy: `${Math.round(Math.sin(angle) * distance + gravity)}px`,
+    sw: `${4 + (index % 3) * 2}px`,
+    sc: FIREWORK_COLORS[index % FIREWORK_COLORS.length],
+    sd: `${1.1 + (index % 4) * 0.2}s`,
+    sdelay: `${(index % 3) * 0.05}s`,
+  };
+});
+
+// Decorative spotlight-stage layer: a colour-shifting aurora plus floating
+// "magic dust" rising from the lamp. Purely presentational, behind content.
+const StageBackdrop = (): ReactElement => (
+  <div aria-hidden className={styles.stageBackdrop}>
+    <span className={styles.auroraAlt} />
+    {MAGIC_PARTICLES.map((particle) => (
+      <span
+        key={particle.left + particle.delay}
+        className={styles.magicParticle}
+        style={
+          {
+            left: particle.left,
+            width: `${particle.size}px`,
+            height: `${particle.size}px`,
+            '--particle-delay': particle.delay,
+            '--particle-duration': particle.duration,
+          } as React.CSSProperties
+        }
+      />
+    ))}
+  </div>
+);
+
 // Shared skeleton for the intro, question and reveal screens: a top progress
 // header (reserved on every screen) above the bubble + Patchy. On mobile Patchy
 // stacks on top with actions anchored to the bottom thumb zone; on laptop they
@@ -332,7 +410,8 @@ const QuizStage = ({
   mascot,
   children,
 }: QuizStageProps): ReactElement => (
-  <div className="flex flex-1 flex-col px-4 py-6 tablet:px-6 laptop:py-10">
+  <div className="relative isolate flex flex-1 flex-col px-4 py-6 tablet:px-6 laptop:py-10">
+    <StageBackdrop />
     <div
       aria-hidden={!progress}
       className={classNames(
@@ -356,7 +435,10 @@ const QuizStage = ({
       </div>
       <div className="h-1.5 w-full overflow-hidden rounded-10 bg-surface-float">
         <div
-          className="h-full rounded-10 bg-accent-cabbage-default transition-[width] duration-500"
+          className={classNames(
+            styles.progressFill,
+            'h-full rounded-10 transition-[width] duration-500',
+          )}
           style={{ width: `${(progress?.value ?? 0) * 100}%` }}
         />
       </div>
@@ -385,12 +467,16 @@ const PersonaCard = ({
     key={persona.id}
     type="button"
     onClick={() => onSelect(persona.id)}
-    className="flex flex-col items-center gap-2 rounded-16 border-2 border-border-subtlest-tertiary bg-surface-float p-6 text-center transition-all hover:-translate-y-1 hover:border-accent-cabbage-default tablet:p-8"
+    className={classNames(
+      styles.card,
+      'flex flex-col items-center gap-2 rounded-16 border-2 border-border-subtlest-tertiary bg-surface-float p-6 text-center hover:-translate-y-1 hover:border-accent-cabbage-default active:translate-y-0 active:scale-[0.98] tablet:p-8',
+    )}
   >
     <span
-      className={
-        size === 'small' ? 'text-4xl leading-none' : 'text-5xl leading-none'
-      }
+      className={classNames(
+        styles.cardEmoji,
+        size === 'small' ? 'text-4xl leading-none' : 'text-5xl leading-none',
+      )}
       style={{ color: persona.color }}
     >
       {persona.emoji}
@@ -410,6 +496,42 @@ const PersonaCard = ({
   </button>
 );
 
+// The celebratory persona "amulet" for the reveal: a glowing coin in the
+// persona's brand colour with a shockwave ring, and a firework of glowing dots
+// that explodes outward from the icon. `--persona` cascades to every layer.
+const PersonaEmblem = ({
+  persona,
+}: {
+  persona: DeveloperPersona;
+}): ReactElement => (
+  <div
+    className={styles.emblem}
+    style={{ '--persona': persona.color } as React.CSSProperties}
+  >
+    <span aria-hidden className={styles.emblemFlash} />
+    {REVEAL_FIREWORK.map((spark) => (
+      <span
+        key={spark.id}
+        aria-hidden
+        className={styles.fireworkSpark}
+        style={
+          {
+            '--dx': spark.dx,
+            '--dy': spark.dy,
+            '--sw': spark.sw,
+            '--sc': spark.sc,
+            '--sd': spark.sd,
+            '--sdelay': spark.sdelay,
+          } as React.CSSProperties
+        }
+      />
+    ))}
+    <span className={styles.emblemCoin}>
+      <span className={styles.emblemEmoji}>{persona.emoji}</span>
+    </span>
+  </div>
+);
+
 function FunnelPersonaQuizComponent({
   parameters: { headline, explainer, cta, mascotVideoBaseUrl },
   onTransition,
@@ -439,24 +561,6 @@ function FunnelPersonaQuizComponent({
 
   // Which clip plays during the thinking beat, chosen per answer.
   const [thinkingClip, setThinkingClip] = useState<MascotState>('thinking');
-  // On the reveal we hold the answer back until Patchy finishes his animation.
-  const [revealReady, setRevealReady] = useState(false);
-
-  useEffect(() => {
-    if (phase !== 'reveal') {
-      return undefined;
-    }
-    setRevealReady(false);
-    // Patchy now plays the reveal on every breakpoint, so wait for his
-    // animation whenever there is a video to wait for.
-    if (!mascotVideoBaseUrl) {
-      setRevealReady(true);
-      return undefined;
-    }
-    // Fallback in case the video never reports progress (e.g. blocked autoplay).
-    const timeout = setTimeout(() => setRevealReady(true), 2500);
-    return () => clearTimeout(timeout);
-  }, [phase, mascotVideoBaseUrl]);
 
   const handleAnswer = (value: AnswerValue) => {
     if (isThinking) {
@@ -515,23 +619,27 @@ function FunnelPersonaQuizComponent({
             </div>
           </SpeechBubble>
           <div className="mt-auto flex w-full flex-col items-center gap-3 laptop:mt-0 laptop:w-auto">
-            <Button
-              className="w-full laptop:w-auto"
+            <ButtonV2
+              className={classNames(
+                styles.cta,
+                'w-full transition-transform duration-200 ease-out hover:scale-[1.03] active:scale-[0.97] laptop:w-auto',
+              )}
               variant={ButtonVariant.Primary}
               size={ButtonSize.XLarge}
               onClick={start}
               type="button"
             >
               {cta || "I'm ready!"}
-            </Button>
-            <Button
+            </ButtonV2>
+            <ButtonV2
+              className="text-text-tertiary transition-transform duration-150 ease-out hover:scale-105 active:scale-95"
               variant={ButtonVariant.Tertiary}
               size={ButtonSize.Medium}
               onClick={pickManually}
               type="button"
             >
               Nah, I&apos;ll pick myself
-            </Button>
+            </ButtonV2>
           </div>
         </div>
       </QuizStage>
@@ -542,8 +650,9 @@ function FunnelPersonaQuizComponent({
     return (
       <div
         key={phase}
-        className="flex flex-1 flex-col items-center gap-6 px-6 py-10 text-center"
+        className="relative isolate flex flex-1 flex-col items-center gap-6 px-6 py-10 text-center"
       >
+        <StageBackdrop />
         <Typography tag={TypographyTag.H2} type={TypographyType.Title1} bold>
           Who are you, really?
         </Typography>
@@ -559,10 +668,16 @@ function FunnelPersonaQuizComponent({
               key={persona.id}
               type="button"
               onClick={() => selectPersona(persona.id)}
-              className="flex w-full items-center gap-4 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-4 text-left transition-colors hover:border-accent-cabbage-default"
+              className={classNames(
+                styles.card,
+                'flex w-full items-center gap-4 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-4 text-left hover:translate-x-1 hover:border-accent-cabbage-default active:scale-[0.99]',
+              )}
             >
               <span
-                className="shrink-0 text-4xl leading-none"
+                className={classNames(
+                  styles.cardEmoji,
+                  'shrink-0 text-4xl leading-none',
+                )}
                 style={{ color: persona.color }}
               >
                 {persona.emoji}
@@ -673,15 +788,15 @@ function FunnelPersonaQuizComponent({
               />
             ))}
           </div>
-          <Button
-            className="mt-auto laptop:mt-0"
+          <ButtonV2
+            className="mt-auto text-text-tertiary transition-transform duration-150 ease-out hover:scale-105 active:scale-95 laptop:mt-0"
             variant={ButtonVariant.Tertiary}
             size={ButtonSize.Medium}
             onClick={pickManually}
             type="button"
           >
             None of these. Let me pick.
-          </Button>
+          </ButtonV2>
         </div>
       </QuizStage>
     );
@@ -731,13 +846,19 @@ function FunnelPersonaQuizComponent({
                   aria-checked={checked}
                   onClick={() => toggleModifier(modifier.id)}
                   className={classNames(
-                    'flex w-full items-center gap-4 rounded-16 border-2 p-4 text-left transition-colors',
+                    styles.card,
+                    'flex w-full items-center gap-4 rounded-16 border-2 p-4 text-left active:scale-[0.99]',
                     checked
                       ? 'border-accent-cabbage-default bg-surface-float'
-                      : 'border-border-subtlest-tertiary bg-surface-float hover:border-text-quaternary',
+                      : 'border-border-subtlest-tertiary bg-surface-float hover:translate-x-1 hover:border-accent-cabbage-default',
                   )}
                 >
-                  <span className="shrink-0 text-4xl leading-none">
+                  <span
+                    className={classNames(
+                      styles.cardEmoji,
+                      'shrink-0 text-4xl leading-none',
+                    )}
+                  >
                     {modifier.emoji}
                   </span>
                   <span className="flex min-w-0 flex-1 flex-col gap-0.5">
@@ -753,21 +874,24 @@ function FunnelPersonaQuizComponent({
                   </span>
                   <span
                     className={classNames(
-                      'flex h-6 w-6 shrink-0 items-center justify-center rounded-6 border-2 text-sm font-bold',
+                      'flex h-6 w-6 shrink-0 items-center justify-center rounded-6 border-2 text-sm font-bold transition-colors',
                       checked
                         ? 'border-accent-cabbage-default bg-accent-cabbage-default text-text-primary'
                         : 'border-border-subtlest-tertiary',
                     )}
                     aria-hidden
                   >
-                    {checked ? '✓' : ''}
+                    {checked && <span className={styles.tick}>✓</span>}
                   </span>
                 </button>
               );
             })}
           </div>
-          <Button
-            className="mt-auto w-full laptop:mt-0 laptop:w-auto"
+          <ButtonV2
+            className={classNames(
+              styles.cta,
+              'mt-auto w-full transition-transform duration-200 ease-out hover:scale-[1.03] active:scale-[0.97] laptop:mt-0 laptop:w-auto',
+            )}
             variant={ButtonVariant.Primary}
             size={ButtonSize.XLarge}
             onClick={handleComplete}
@@ -776,7 +900,7 @@ function FunnelPersonaQuizComponent({
             {selectedModifierIds.length === 0
               ? 'None of these — continue'
               : 'Continue →'}
-          </Button>
+          </ButtonV2>
         </div>
       </QuizStage>
     );
@@ -793,60 +917,58 @@ function FunnelPersonaQuizComponent({
             clips={['reveal']}
             idleClips={IDLE_CLIPS}
             size="lg"
-            onHalfway={() => setRevealReady(true)}
             className={MASCOT_STAGE_CLASS}
           />
         }
       >
-        <div className="flex w-full max-w-xl flex-1 flex-col items-center gap-8 laptop:flex-none">
-          {revealReady && (
-            <>
-              <SpeechBubble>
-                <div className="flex flex-col gap-4">
-                  <Typography
-                    tag={TypographyTag.H1}
-                    type={TypographyType.LargeTitle}
-                    bold
-                    className={styles.revealName}
-                    style={{ color: persona.color }}
-                  >
-                    {personaRevealPhrase(persona.name)} {persona.emoji}
-                  </Typography>
-                  <Typography
-                    type={TypographyType.Body}
-                    color={TypographyColor.Secondary}
-                    className={styles.revealTagline}
-                  >
-                    {persona.tagline}
-                  </Typography>
-                </div>
-              </SpeechBubble>
-              <div
-                className={classNames(
-                  styles.revealActions,
-                  'mt-auto flex w-full flex-col items-center gap-3 laptop:mt-0 laptop:w-auto',
-                )}
-              >
-                <Button
-                  className="w-full laptop:w-auto"
-                  variant={ButtonVariant.Primary}
-                  size={ButtonSize.XLarge}
-                  onClick={confirmPersona}
-                  type="button"
-                >
-                  {cta || "Yes, that's me!"}
-                </Button>
-                <Button
-                  variant={ButtonVariant.Tertiary}
-                  size={ButtonSize.Medium}
-                  onClick={pickManually}
-                  type="button"
-                >
-                  Nah, I&apos;ll pick myself
-                </Button>
-              </div>
-            </>
-          )}
+        <div className="flex w-full max-w-xl flex-1 flex-col items-center justify-center gap-5 laptop:flex-none">
+          <PersonaEmblem persona={persona} />
+          <Typography
+            tag={TypographyTag.H1}
+            type={TypographyType.Title1}
+            bold
+            className={styles.revealName}
+            style={{
+              color: `color-mix(in srgb, ${persona.color} 60%, white)`,
+            }}
+          >
+            {personaRevealPhrase(persona.name)}
+          </Typography>
+          <Typography
+            type={TypographyType.Body}
+            color={TypographyColor.Secondary}
+            className={classNames(styles.revealTagline, 'max-w-md')}
+          >
+            {persona.tagline}
+          </Typography>
+          <div
+            className={classNames(
+              styles.revealActions,
+              'mt-auto flex w-full flex-col items-center gap-3 laptop:mt-2 laptop:w-auto',
+            )}
+          >
+            <ButtonV2
+              className={classNames(
+                styles.cta,
+                'w-full transition-transform duration-200 ease-out hover:scale-[1.03] active:scale-[0.97] laptop:w-auto',
+              )}
+              variant={ButtonVariant.Primary}
+              size={ButtonSize.XLarge}
+              onClick={confirmPersona}
+              type="button"
+            >
+              {cta || "Yes, that's me!"}
+            </ButtonV2>
+            <ButtonV2
+              className="text-text-tertiary transition-transform duration-150 ease-out hover:scale-105 active:scale-95"
+              variant={ButtonVariant.Tertiary}
+              size={ButtonSize.Medium}
+              onClick={pickManually}
+              type="button"
+            >
+              Nah, I&apos;ll pick myself
+            </ButtonV2>
+          </div>
         </div>
       </QuizStage>
     );
@@ -890,47 +1012,68 @@ function FunnelPersonaQuizComponent({
             {questionText}
           </Typography>
         </SpeechBubble>
-        <div className="mx-auto mt-auto w-full max-w-md laptop:mt-0">
+        <div className="mx-auto mt-auto w-full max-w-sm laptop:mt-0">
           <div
             className={classNames(
-              'flex flex-col gap-3 transition-opacity duration-200',
+              'flex flex-col gap-7 transition-opacity duration-200',
               isThinking && 'pointer-events-none opacity-0',
             )}
           >
-            <div className="flex w-full gap-3">
-              <Button
-                className="flex-1"
-                variant={ButtonVariant.Secondary}
-                size={ButtonSize.Large}
+            <div className="flex w-full items-center justify-center gap-2">
+              <button
                 type="button"
-                icon={<UpvoteIcon />}
                 disabled={isThinking}
                 onClick={() => handleAnswer(1)}
+                className={classNames(
+                  styles.answer,
+                  styles.answerYes,
+                  'flex items-center gap-3 p-1 transition-transform duration-200 ease-out hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.95]',
+                )}
               >
-                Yes
-              </Button>
-              <Button
-                className="flex-1"
-                variant={ButtonVariant.Secondary}
-                size={ButtonSize.Large}
+                <Typography
+                  type={TypographyType.Title3}
+                  color={TypographyColor.Secondary}
+                >
+                  Yes
+                </Typography>
+                <span className={classNames(styles.answerBadge, 'h-20 w-20')}>
+                  <UpvoteIcon size={IconSize.XLarge} />
+                </span>
+              </button>
+              <button
                 type="button"
-                icon={<DownvoteIcon />}
                 disabled={isThinking}
                 onClick={() => handleAnswer(0)}
+                className={classNames(
+                  styles.answer,
+                  styles.answerNo,
+                  'flex items-center gap-3 p-1 transition-transform duration-200 ease-out hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.95]',
+                )}
               >
-                No
-              </Button>
+                <span className={classNames(styles.answerBadge, 'h-20 w-20')}>
+                  <DownvoteIcon size={IconSize.XLarge} />
+                </span>
+                <Typography
+                  type={TypographyType.Title3}
+                  color={TypographyColor.Secondary}
+                >
+                  No
+                </Typography>
+              </button>
             </div>
-            <Button
-              className="self-center"
-              variant={ButtonVariant.Tertiary}
-              size={ButtonSize.Medium}
+            <button
               type="button"
               disabled={isThinking}
               onClick={() => handleAnswer(0.5)}
+              className={classNames(
+                styles.notSure,
+                'mx-auto flex items-center gap-2 px-5 py-2 transition-transform duration-150 ease-out hover:scale-105 active:scale-95',
+              )}
             >
-              Not sure
-            </Button>
+              <Typography type={TypographyType.Footnote} bold>
+                Not sure
+              </Typography>
+            </button>
           </div>
         </div>
         {isThinking && (
diff --git a/packages/webapp/pages/onboarding-persona-demo.tsx b/packages/webapp/pages/onboarding-persona-demo.tsx
index 3194a06e95..cafdc0714c 100644
--- a/packages/webapp/pages/onboarding-persona-demo.tsx
+++ b/packages/webapp/pages/onboarding-persona-demo.tsx
@@ -26,7 +26,7 @@ function PersonaQuizDemo(): ReactElement {
     type: FunnelStepType.PersonaQuiz,
     isActive: true,
     parameters: {
-      backgroundType: FunnelBackgroundVariant.Default,
+      backgroundType: FunnelBackgroundVariant.Blank,
       mascotVideoBaseUrl: '/onboarding/patchy',
     },
     transitions: [],