/* ==========================================================================
   Meni case study — animated product mockups (Shipped Design section)
   ==========================================================================

   These stand in for real screenshots. Each one is a looping, self-contained
   scene that plays out a single interaction end to end.

   Two deliberate choices:

   1. Fixed light product chrome. Like .meni-bubble-hero, these read as
      screenshots of the app, not as page elements, so they don't flip with
      the site theme.

   2. Everything scales off one font-size. Each .mmock is a query container
      and .mmock-stage sets font-size in cqw; every size, gap, and transform
      below is in em. The whole mock then scales like an image at any width,
      with no breakpoints of its own.

   Timings are percentages of each scene's own loop duration; the comment
   above each block is the storyboard. */

.mmock {
  container-type: inline-size;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(28, 22, 48, 0.1);
  box-shadow: 0 18px 44px rgba(30, 25, 60, 0.13);
  background: #FFFFFF;

  /* Menaia product palette — fixed, not themed (see note above). */
  --mp: #6D4AE0;
  --mp-deep: #5733C8;
  --mp-soft: #F3F0FE;
  --mp-line: #E2DAFB;
  --mink: #221F2B;
  --mmuted: #6E6980;
  --mline: #EAE8F0;
  --mapp: #F7F6FA;
  --mgood: #16A34A;
}

.mmock-stage {
  position: relative;
  aspect-ratio: 16 / 11;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 2.6cqw;
  line-height: 1.45;
  color: var(--mink);
  background: var(--mapp);
  overflow: hidden;
}

/* Meni's sparkle avatar, shared by the chat scenes. */
.mmock-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 0.6em;
  background: linear-gradient(145deg, #8B5CF6, #6023C0);
  color: #FFFFFF;
  flex: none;
}

.mmock-avatar svg { width: 1.35em; height: 1.35em; fill: currentColor; }

/* Pointer used by the scenes that show a click. */
.mmock-cursor {
  position: absolute;
  z-index: 6;
  width: 1.5em;
  height: 1.5em;
  fill: #FFFFFF;
  stroke: #1A1626;
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 0.15em 0.3em rgba(20, 16, 40, 0.3));
  opacity: 0;
  pointer-events: none;
}

/* A soft ring that fires on click. */
.mmock-tap {
  position: absolute;
  z-index: 5;
  width: 2.6em;
  height: 2.6em;
  margin: -1.3em 0 0 -1.3em;
  border-radius: 50%;
  background: rgba(109, 74, 224, 0.35);
  opacity: 0;
  pointer-events: none;
}

/* The ripple is keyed to each scene's own loop rather than given its own
   short duration, so it always fires on the frame the button is pressed. */

/* ==========================================================================
   Scene 1 — Ask, think, answer  (13s)

   0–15%   the question types itself into the composer
   20%     it sends as a bubble
   26–33%  a read tool runs, then reports Done
   34–46%  Meni thinks
   48%     the grounded answer lands, stats follow
   94%     everything clears and the loop restarts
   ========================================================================== */

.m1-head {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.85em 1.1em;
  background: #FFFFFF;
  border-bottom: 1px solid var(--mline);
}

.m1-name { display: block; font-size: 1.05em; font-weight: 600; letter-spacing: -0.01em; }
.m1-sub { display: block; font-size: 0.8em; color: var(--mmuted); }

.m1-thread {
  position: absolute;
  left: 0;
  right: 0;
  top: 4.4em;
  bottom: 4.2em;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.7em;
  padding: 0 1.1em;
}

/* The sent question. */
.m1-q {
  align-self: flex-end;
  max-width: 74%;
  padding: 0.6em 0.85em;
  border-radius: 0.9em 0.9em 0.2em 0.9em;
  background: var(--mp);
  color: #FFFFFF;
  font-size: 0.92em;
  animation: m1q 13s infinite;
}

@keyframes m1q {
  0%, 18% { opacity: 0; transform: translateY(0.5em) scale(0.96); }
  22%, 92% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}

/* Tool-call chip. */
.m1-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  align-self: flex-start;
  padding: 0.42em 0.7em;
  border: 1px solid var(--mline);
  border-radius: 0.55em;
  background: #FFFFFF;
  font-size: 0.82em;
  animation: m1tool 13s infinite;
}

@keyframes m1tool {
  0%, 24% { opacity: 0; transform: translateY(0.4em); }
  28%, 92% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}

.m1-tool-name { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.92em; }

.m1-tool-state { position: relative; width: 1.1em; height: 1.1em; margin-left: auto; flex: none; }

.m1-tool-state svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.m1-spin {
  fill: none;
  stroke: var(--mp);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 34 46;
  animation: m1spin 0.9s linear infinite, m1spinOut 13s infinite;
}

@keyframes m1spin { to { transform: rotate(360deg); transform-origin: 50% 50%; } }
@keyframes m1spinOut { 0%, 31% { opacity: 1; } 33%, 100% { opacity: 0; } }

.m1-done { color: var(--mgood); fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; animation: m1done 13s infinite; }

@keyframes m1done {
  0%, 32% { opacity: 0; transform: scale(0.5); }
  36%, 100% { opacity: 1; transform: none; }
}

/* Answer slot — "Thinking" sits on top of the answer and hands off to it,
   so the column never opens a gap when it clears. */
.m1-slot { position: relative; align-self: stretch; }

.m1-think {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.88em;
  color: var(--mmuted);
  opacity: 0;
  animation: m1think 13s infinite;
}

@keyframes m1think {
  0%, 33% { opacity: 0; }
  37%, 44% { opacity: 1; }
  47%, 100% { opacity: 0; }
}

.m1-think i {
  width: 0.32em;
  height: 0.32em;
  border-radius: 50%;
  background: currentColor;
  animation: m1dot 1.1s ease-in-out infinite;
}

.m1-think i:nth-child(3) { animation-delay: 0.15s; }
.m1-think i:nth-child(4) { animation-delay: 0.3s; }

@keyframes m1dot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

.m1-a { font-size: 0.92em; animation: m1a 13s infinite; }

@keyframes m1a {
  0%, 46% { opacity: 0; transform: translateY(0.5em); }
  51%, 92% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}

.m1-a p { margin: 0; }
.m1-a b { font-weight: 600; }

/* Grounded figures, cited back to the record they came from. */
.m1-stats { display: flex; gap: 0.5em; margin-top: 0.6em; }

.m1-stat {
  flex: 1;
  padding: 0.5em 0.6em;
  border: 1px solid var(--mp-line);
  border-radius: 0.6em;
  background: var(--mp-soft);
  animation: m1stat 13s infinite;
}

.m1-stat:nth-child(2) { animation-delay: 0.12s; }
.m1-stat:nth-child(3) { animation-delay: 0.24s; }

@keyframes m1stat {
  0%, 52% { opacity: 0; transform: translateY(0.4em); }
  57%, 92% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}

.m1-stat span { display: block; font-size: 0.78em; color: var(--mmuted); }
.m1-stat b { display: block; font-size: 1.15em; font-weight: 600; letter-spacing: -0.02em; }

/* Composer. */
.m1-composer {
  position: absolute;
  left: 1.1em;
  right: 1.1em;
  bottom: 1.1em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 2.6em;
  padding: 0 0.5em 0 0.9em;
  border: 1px solid var(--mline);
  border-radius: 1.3em;
  background: #FFFFFF;
}

/* Sized to the text's own width so the animated width lands on the last
   character rather than the field's edge. */
.m1-typewrap { display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; font-size: 0.92em; }

/* The caret is this element's own right border, so it tracks the clip edge
   as the width animates instead of parking at the end of the full string. */
.m1-type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: 0;
  border-right: 0.1em solid var(--mp);
  animation: m1type 13s infinite, m1caret 0.85s step-end infinite;
}

@keyframes m1type {
  0% { width: 0; border-right-width: 0.1em; animation-timing-function: steps(38, end); }
  15%, 19% { width: 100%; border-right-width: 0.1em; }
  20%, 100% { width: 0; border-right-width: 0; }
}

/* Blink while typing; the border is dropped once the message sends. */
@keyframes m1caret {
  0%, 100% { border-right-color: var(--mp); }
  50% { border-right-color: transparent; }
}

.m1-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  margin-left: auto;
  border-radius: 50%;
  background: var(--mp);
  color: #FFFFFF;
  flex: none;
  animation: m1send 13s infinite;
}

.m1-send svg { width: 1em; height: 1em; fill: currentColor; }

@keyframes m1send {
  0%, 17% { transform: none; }
  19% { transform: scale(0.86); }
  22%, 100% { transform: none; }
}

/* ==========================================================================
   Scene 2 — Pin an answer to a dashboard  (13s)

   0–38%   the chart is an answer inside the chat
   18–33%  the pointer travels to "Pin to dashboard" and clicks
   40–58%  the chat clears, the card flies into the dashboard grid
   62%     it settles as a tile and goes Live
   90%     the scene resets

   The card's resting position is the dashboard slot, so with motion off the
   mock reads as the finished, pinned tile.
   ========================================================================== */

.m2-stage { background: var(--mapp); }

/* --- the dashboard underneath --- */
.m2-dash { position: absolute; inset: 0; padding: 1em; animation: m2dash 13s infinite; }

@keyframes m2dash {
  0%, 38% { opacity: 0; }
  50%, 88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

.m2-dash-head { display: flex; align-items: center; gap: 0.5em; font-size: 0.92em; font-weight: 600; }

.m2-dash-head svg { width: 1.1em; height: 1.1em; fill: none; stroke: var(--mp); stroke-width: 1.8; }

/* Row 1 matches the pinned card's own height so it seats cleanly in its slot. */
.m2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 7.7em 11.5em;
  gap: 0.7em;
  margin-top: 0.8em;
}

/* The empty slot the card flies into. */
.m2-slot {
  border: 1px dashed var(--mp-line);
  border-radius: 0.7em;
  background: rgba(109, 74, 224, 0.03);
}

/* Neighbouring tiles, kept quiet so the pinned one reads first. */
.m2-ghost {
  border: 1px solid var(--mline);
  border-radius: 0.7em;
  background: #FFFFFF;
  padding: 0.7em;
}

.m2-ghost-t { width: 60%; height: 0.5em; border-radius: 0.25em; background: var(--mline); }
.m2-ghost-b { display: flex; align-items: flex-end; gap: 0.3em; height: calc(100% - 1.9em); margin-top: 1em; }
.m2-ghost-b i { flex: 1; border-radius: 0.15em 0.15em 0 0; background: #EDEAF7; }

/* A donut, so the two lower tiles don't read as the same chart twice. */
.m2-ghost-ring {
  width: 5.2em;
  height: 5.2em;
  margin: 1.2em auto 0;
  border-radius: 50%;
  background: conic-gradient(#C9BCF5 0 42%, #E4DAFA 0 68%, #F0EBFC 0 100%);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%);
  mask: radial-gradient(circle, transparent 52%, #000 53%);
}

/* --- the flying card --- */
.m2-card {
  position: absolute;
  z-index: 3;
  left: 1em;
  top: 3.3em;
  width: calc(50% - 1.35em);
  padding: 0.7em;
  border: 1px solid var(--mline);
  border-radius: 0.7em;
  background: #FFFFFF;
  box-shadow: 0 0.2em 0.5em rgba(30, 25, 60, 0.06);
  transform-origin: top left;
  animation: m2card 13s infinite;
}

/* In the chat it sits centred and larger; pinning shrinks it into the slot. */
@keyframes m2card {
  0%, 40% { transform: translate(1.6em, 3.1em) scale(1.62); box-shadow: 0 0.5em 1.4em rgba(30, 25, 60, 0.12); opacity: 1; }
  58%, 88% { transform: none; box-shadow: 0 0.2em 0.5em rgba(30, 25, 60, 0.06); opacity: 1; }
  93% { opacity: 0; transform: none; }
  93.5% { opacity: 0; transform: translate(1.6em, 3.1em) scale(1.62); }
  100% { opacity: 1; transform: translate(1.6em, 3.1em) scale(1.62); }
}

.m2-card-head { display: flex; align-items: center; gap: 0.4em; }
.m2-card-title { font-size: 0.72em; font-weight: 600; letter-spacing: -0.01em; }

.m2-live {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-left: auto;
  font-size: 0.6em;
  color: var(--mgood);
  animation: m2live 13s infinite;
}

.m2-live::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: currentColor;
  animation: m2pulse 2s ease-in-out infinite;
}

@keyframes m2live { 0%, 58% { opacity: 0; } 64%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes m2pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); } 60% { box-shadow: 0 0 0 0.35em rgba(22, 163, 74, 0); } }

/* Horizontal bars read better than columns at this size. */
.m2-bars { margin-top: 0.55em; display: flex; flex-direction: column; gap: 0.4em; }

.m2-bar { display: grid; grid-template-columns: 5.6em 1fr 2.8em; align-items: center; gap: 0.35em; font-size: 0.6em; }

.m2-bar span { color: var(--mmuted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.m2-bar i {
  display: block;
  height: 0.75em;
  border-radius: 0.4em;
  background: linear-gradient(90deg, #8B5CF6, #6D4AE0);
  width: var(--w);
  transform-origin: left center;
  animation: m2bar 13s infinite;
}

.m2-bar:nth-child(2) i { animation-delay: 0.1s; }
.m2-bar:nth-child(3) i { animation-delay: 0.2s; }
.m2-bar:nth-child(4) i { animation-delay: 0.3s; }

@keyframes m2bar {
  0%, 6% { transform: scaleX(0); }
  16%, 100% { transform: scaleX(1); }
}

.m2-bar b { font-weight: 600; text-align: right; }

/* --- the chat layer on top --- */
.m2-chat { position: absolute; inset: 0; padding: 1em; background: #FFFFFF; animation: m2chat 13s infinite; }

@keyframes m2chat {
  0%, 36% { opacity: 1; }
  46%, 92% { opacity: 0; }
  100% { opacity: 1; }
}

.m2-q {
  align-self: flex-end;
  max-width: 70%;
  margin-left: auto;
  padding: 0.5em 0.75em;
  border-radius: 0.8em 0.8em 0.2em 0.8em;
  background: var(--mp);
  color: #FFFFFF;
  font-size: 0.85em;
  width: fit-content;
}

.m2-lead { margin-top: 0.7em; font-size: 0.85em; max-width: 82%; }
.m2-lead b { font-weight: 600; }

/* Positioned by a wrapper kept at the stage's own font-size — em offsets on
   the button itself would resolve against its smaller font and ride up.
   Sits just under where .m2-card floats, so the button belongs to it. */
.m2-pinwrap { position: absolute; left: 2.6em; top: 19.5em; }

.m2-pin {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.8em;
  border: 1px solid var(--mp-line);
  border-radius: 0.5em;
  background: var(--mp-soft);
  color: var(--mp-deep);
  font-size: 0.8em;
  font-weight: 500;
  animation: m2pin 13s infinite;
}

.m2-pin svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

@keyframes m2pin {
  0%, 30% { transform: none; background: var(--mp-soft); }
  33% { transform: scale(0.94); background: var(--mp-line); }
  37%, 100% { transform: none; background: var(--mp-soft); }
}

.m2-cursor { animation: m2cursor 13s infinite; }

@keyframes m2cursor {
  0%, 10% { opacity: 0; left: 62%; top: 92%; }
  16% { opacity: 1; left: 62%; top: 92%; }
  30%, 34% { opacity: 1; left: 18%; top: 78%; }
  42% { opacity: 0; left: 18%; top: 78%; }
  100% { opacity: 0; left: 18%; top: 78%; }
}

.m2-tap { left: 18%; top: 78%; animation: m2tap 13s infinite; }

@keyframes m2tap {
  0%, 31% { transform: scale(0.3); opacity: 0; }
  33% { transform: scale(0.3); opacity: 0.7; }
  40%, 100% { transform: scale(1.7); opacity: 0; }
}

/* ==========================================================================
   Scene 3 — Approve a queued action  (12s)

   0–26%   the queue sits waiting, pointer travels to Approve
   30%     the button presses
   32–44%  the row confirms and collapses out of the queue, count ticks down
   48–80%  a toast confirms it sent
   90%     the row returns and the loop restarts

   Resting state is the full queue with its buttons, so with motion off the
   mock still shows what the surface is.
   ========================================================================== */

.m3-stage { background: var(--mapp); padding: 1em; }

.m3-head { display: flex; align-items: center; gap: 0.5em; font-size: 0.92em; font-weight: 600; }

.m3-head svg { width: 1.1em; height: 1.1em; fill: none; stroke: var(--mp); stroke-width: 1.8; }

/* The count ticks 3 → 2 as the row clears. */
.m3-count { position: relative; width: 1.5em; height: 1.5em; font-size: 0.85em; }

.m3-count b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mp-soft);
  color: var(--mp-deep);
  font-weight: 600;
}

.m3-count b:nth-child(1) { animation: m3countA 12s infinite; }
.m3-count b:nth-child(2) { animation: m3countB 12s infinite; }

@keyframes m3countA { 0%, 40% { opacity: 1; } 45%, 88% { opacity: 0; } 93%, 100% { opacity: 1; } }
@keyframes m3countB { 0%, 40% { opacity: 0; } 45%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }

.m3-list { margin-top: 0.8em; display: flex; flex-direction: column; gap: 0.6em; }

.m3-item {
  padding: 0.6em 0.8em;
  border: 1px solid var(--mline);
  border-radius: 0.7em;
  background: #FFFFFF;
}

.m3-kind { font-size: 0.72em; color: var(--mmuted); }
.m3-subject { font-size: 0.85em; font-weight: 500; margin-top: 0.1em; }
.m3-when { font-size: 0.68em; color: var(--mmuted); margin-top: 0.15em; }

.m3-actions { display: flex; align-items: center; gap: 0.45em; margin-top: 0.6em; }

.m3-btn {
  padding: 0.35em 0.85em;
  border-radius: 0.4em;
  font-size: 0.75em;
  font-weight: 500;
  border: 1px solid transparent;
}

.m3-btn--yes { background: var(--mp); color: #FFFFFF; }
.m3-btn--no { background: #FFFFFF; border-color: var(--mline); color: var(--mink); }
.m3-details { margin-left: auto; font-size: 0.72em; color: var(--mmuted); }

/* The row being approved: press, confirm, collapse away. */
.m3-item--act { animation: m3collapse 12s infinite; }

@keyframes m3collapse {
  0%, 33% { max-height: 12em; opacity: 1; transform: none; margin-bottom: 0; }
  36% { max-height: 12em; opacity: 1; transform: none; }
  /* hold on the confirmed state so the tick is readable */
  42% { max-height: 12em; opacity: 1; }
  50% { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-width: 0; margin-bottom: -0.6em; }
  88% { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-width: 0; margin-bottom: -0.6em; }
  96%, 100% { max-height: 12em; opacity: 1; margin-bottom: 0; }
}

.m3-item--act .m3-btn--yes { animation: m3press 12s infinite; }

@keyframes m3press {
  0%, 28% { transform: none; background: var(--mp); }
  31% { transform: scale(0.93); background: var(--mp-deep); }
  34%, 100% { transform: none; background: var(--mp); }
}

/* Swaps in over the buttons the moment it's approved. */
.m3-sent {
  position: absolute;
  left: 0.8em;
  bottom: 0.7em;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.75em;
  font-weight: 500;
  color: var(--mgood);
  opacity: 0;
  animation: m3sent 12s infinite;
}

.m3-sent svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@keyframes m3sent { 0%, 33% { opacity: 0; } 36%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }

.m3-item--act { position: relative; overflow: hidden; }
.m3-item--act .m3-actions { animation: m3hideBtns 12s infinite; }

@keyframes m3hideBtns { 0%, 33% { opacity: 1; } 36%, 100% { opacity: 0; } }

/* Toast. */
.m3-toast {
  position: absolute;
  left: 1em;
  right: 1em;
  bottom: 1em;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.65em 0.85em;
  border-radius: 0.6em;
  background: #1E1A2B;
  color: #FFFFFF;
  font-size: 0.82em;
  box-shadow: 0 0.6em 1.6em rgba(20, 16, 40, 0.3);
  opacity: 0;
  animation: m3toast 12s infinite;
}

.m3-toast svg { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: #4ADE80; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@keyframes m3toast {
  0%, 44% { opacity: 0; transform: translateY(1.2em); }
  50%, 78% { opacity: 1; transform: none; }
  84%, 100% { opacity: 0; transform: translateY(0.6em); }
}

.m3-cursor { animation: m3cursor 12s infinite; }

@keyframes m3cursor {
  0%, 8% { opacity: 0; left: 58%; top: 84%; }
  14% { opacity: 1; left: 58%; top: 84%; }
  27%, 33% { opacity: 1; left: 10%; top: 33%; }
  40% { opacity: 0; left: 10%; top: 33%; }
  100% { opacity: 0; left: 10%; top: 33%; }
}

.m3-tap { left: 10%; top: 33%; animation: m3tap 12s infinite; }

@keyframes m3tap {
  0%, 29% { transform: scale(0.3); opacity: 0; }
  31% { transform: scale(0.3); opacity: 0.7; }
  38%, 100% { transform: scale(1.7); opacity: 0; }
}

/* ==========================================================================
   Final Thought — headline outcome numbers.
   Page-scoped for now; promote to style.css if another case study wants it.
   ========================================================================== */

.outcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0;
}

.outcome {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}

.outcome b {
  display: block;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  /* Green rather than the site's orange accent: these are wins, and orange
     reads as a warning next to a dollar figure. Lightened for dark mode so
     it keeps its contrast against the dark page background. */
  color: #15803D;
}

[data-theme="dark"] .outcome b { color: #4ADE80; }

.outcome span {
  display: block;
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 700px) {
  .outcome-grid { grid-template-columns: 1fr; }
  .outcome { padding: 20px; }
  .outcome b { font-size: 2rem; }
}

/* ==========================================================================
   Motion off — hold each scene on its resting frame (see notes per scene).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mmock *,
  .mmock *::before,
  .mmock *::after { animation: none !important; }

  .m1-type { width: 100%; border-right-width: 0; }
  .mmock-cursor, .mmock-tap, .m1-spin { display: none; }
  .m2-chat { opacity: 0; }
  .m2-card { box-shadow: 0 0.2em 0.5em rgba(30, 25, 60, 0.06); }
  .m3-sent, .m3-toast { display: none; }
  .m3-count b:nth-child(2) { opacity: 0; }
}