/* ====================================================================
   HOW IT WORKS — cinematic scroll scene styles
   ==================================================================== */

.mmx-how {
  position: relative;
  /* Tight pacing — acts move quickly with the scroll */
  height: calc(100vh * 2.4);
  /* Section itself is black; purple aura is painted by .mmx-theater::before
     with opacity driven by --mmx-scroll-p (set from JS). */
  background: #000;
  color: #fff;
  isolation: isolate;
  --mmx-scroll-p: 0;
}

.mmx-how-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(8px, 1.6vh, 16px);
  padding: clamp(72px, 9vh, 100px) clamp(20px, 5vw, 64px) clamp(14px, 2.4vh, 24px);
}

.mmx-theater {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Black theater. The ambient purple light is painted by the global
     PurpleOrb (in pages/MarketingHome.css), not per-section. */
  background: #000;
}

.mmx-screen-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(820px, 80vw);
  height: min(480px, 50vh);
  transform: translate(-50%, -50%);
  /* Was amber — now matches the hero's purple aura */
  background:
    radial-gradient(closest-side, rgba(180, 150, 255, 0.22), transparent 72%);
  filter: blur(30px);
  mix-blend-mode: screen;
  animation: mmx-glow-pulse 7.5s ease-in-out infinite;
}
@keyframes mmx-glow-pulse {
  0%,100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  50%     { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}

.mmx-projector-cone {
  position: absolute;
  top: -8%;
  right: -12%;
  width: 75vw;
  height: 120vh;
  /* Purple cone to echo the hero aura rather than a gold projector beam */
  background:
    conic-gradient(from 200deg at 100% 0%,
      transparent 0deg,
      rgba(180, 150, 255, 0.14) 20deg,
      rgba(180, 150, 255, 0.06) 35deg,
      transparent 45deg);
  filter: blur(18px);
  mix-blend-mode: screen;
  opacity: var(--cone-op, 0.4);
  transition: opacity 400ms var(--ease-smooth, cubic-bezier(0.32, 0.72, 0, 1));
}

.mmx-curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14vw;
  max-width: 200px;
  background:
    linear-gradient(90deg,
      #18060c 0%,
      #3a1018 30%,
      #5c1823 55%,
      #3a1018 85%,
      #18060c 100%);
  box-shadow: inset 0 0 80px rgba(0,0,0,0.8);
  opacity: 0.92;
}
.mmx-curtain-l { left: 0;  mask-image: linear-gradient(90deg, #000 55%, transparent 100%); }
.mmx-curtain-r { right: 0; mask-image: linear-gradient(270deg, #000 55%, transparent 100%); }
.mmx-curtain::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 12px,
    rgba(0,0,0,0.28) 13px,
    rgba(0,0,0,0) 24px);
  mix-blend-mode: multiply;
}

.mmx-grain {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.8'/></svg>");
  animation: mmx-grain-shift 1.2s steps(6) infinite;
}
@keyframes mmx-grain-shift {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -1%); }
  75%  { transform: translate(-1%, -2%); }
  100% { transform: translate(0,0); }
}

/* ---- Section header -------------------------------------------------- */
.mmx-how-header {
  position: relative;
  z-index: 2;
  text-align: center;
  /* Keep header visible throughout — don't fade it */
}

.mmx-eyebrow {
  display: inline-block;
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #E2C06B;
  margin-bottom: 10px;
}

.mmx-how-headline {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
  color: #fff;
}
.mmx-gold-phrase {
  background: linear-gradient(135deg, #FFE5A8 0%, #E2C06B 45%, #B68F3A 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  letter-spacing: -0.03em;
}

/* ---- Stage grid: acts + phone --------------------------------------- */
.mmx-stage-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vh, 40px);
  align-items: center;
  justify-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .mmx-stage-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(16px, 2.4vw, 36px);
    justify-items: stretch;
  }
}

/* ---- Acts ------------------------------------------------------------ */
.mmx-acts {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 20px;
  align-items: start;
  width: min(520px, 100%);
  margin: 0 auto;
}
@media (min-width: 900px) {
  .mmx-acts { margin: 0; }
}

.mmx-acts-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
}
.mmx-acts-tick {
  width: 2px;
  height: 38px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  transition: background 320ms var(--ease-smooth, ease), height 320ms;
}
.mmx-acts-tick.is-active { background: #E2C06B; height: 56px; box-shadow: 0 0 16px rgba(226,192,107,0.55); }
.mmx-acts-tick.is-past   { background: rgba(226,192,107,0.45); }

.mmx-acts-stack {
  position: relative;
  min-height: clamp(180px, 26vh, 260px);
}

.mmx-act {
  position: absolute;
  inset: 0;
  transition: opacity 320ms var(--ease-smooth, cubic-bezier(0.32,0.72,0,1));
  will-change: opacity;
}

.mmx-act-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}
.mmx-act-n {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(226,192,107,0.55);
}
.mmx-act-eyebrow {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.mmx-act-title {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 14px;
  color: #fff;
  text-wrap: balance;
}
.mmx-act-body {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: rgba(255,255,255,0.74);
  max-width: 46ch;
  margin: 0;
  text-wrap: pretty;
}

/* ---- Phone frame ----------------------------------------------------- */
.mmx-stage-phone {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
}

.mmx-phone {
  position: relative;
  width: min(240px, 54vw);
  aspect-ratio: 9 / 19;
  transform: perspective(1400px) rotateY(-8deg) rotateX(2deg);
  transition: transform 600ms var(--ease-smooth, ease);
  max-height: 56vh;
}
@media (min-width: 900px) {
  .mmx-phone { width: min(260px, 28vw); }
}

.mmx-phone-bezel {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #2a2a32 0%, #0e0e14 60%, #1a1a22 100%);
  border-radius: 44px;
  padding: 10px;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.7),
    0 0 0 1.5px rgba(255,255,255,0.06) inset,
    0 0 60px rgba(226,192,107,0.15);
}
.mmx-phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 24px;
  background: #000;
  border-radius: 16px;
  z-index: 3;
}
.mmx-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: #0A0A0E;
  box-shadow: 0 0 0 2px #000 inset;
}
.mmx-phone-glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(closest-side, rgba(226,192,107,0.25), transparent 70%);
  filter: blur(40px);
  z-index: -1;
  opacity: 0.7;
  pointer-events: none;
}

/* "Naked" mode for the attribution act — drop the phone chrome so the
   chart reads as a standalone dashboard. */
.mmx-phone.is-naked {
  aspect-ratio: auto;
  width: min(420px, 92%);
  max-height: 56vh;
  height: 56vh;
  transform: none;
}
.mmx-phone.is-naked .mmx-phone-bezel {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 18px;
}
.mmx-phone.is-naked .mmx-phone-notch { opacity: 0; }
.mmx-phone.is-naked .mmx-phone-screen {
  border-radius: 18px;
  box-shadow: none;
  background: transparent;
}
.mmx-phone.is-naked .mmx-phone-glow { opacity: 0; }

.mmx-screen-layer {
  position: absolute;
  inset: 0;
  transition: opacity 320ms var(--ease-smooth, ease), transform 320ms var(--ease-smooth, ease);
}

.mmx-state {
  position: absolute;
  inset: 0;
  padding: 40px 16px 16px;
  font-family: 'Inter', -apple-system, sans-serif;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- SMS screen ------------------------------------------------------ */
.mmx-state-sms { background: linear-gradient(180deg, #0a0a0e 0%, #14141a 100%); }

.mmx-sms-status {
  display: flex; justify-content: space-between;
  font-size: 11px; color: rgba(255,255,255,0.68);
  padding: 0 6px;
}
.mmx-sms-contact {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mmx-sms-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #004A98, #0063cc);
  display: grid; place-items: center;
  font-weight: 800; font-size: 14px; color: #fff;
}
.mmx-sms-name { font-size: 13px; font-weight: 700; }
.mmx-sms-handle { font-size: 10px; color: rgba(255,255,255,0.5); }

.mmx-sms-bubbles { display: flex; flex-direction: column; gap: 6px; padding: 10px 4px 0; }
.mmx-sms-bubble {
  max-width: 90%;
  padding: 10px 12px;
  border-radius: 16px;
  font-size: 12px;
  line-height: 1.45;
  animation: mmx-bubble-in 520ms var(--ease-bounce, cubic-bezier(0.175,0.885,0.32,1.275)) backwards;
}
.mmx-sms-in {
  background: #2a2a32;
  color: #fff;
  border-bottom-left-radius: 6px;
  align-self: flex-start;
}
.mmx-sms-in b { color: #E2C06B; font-weight: 700; }
.mmx-sms-link {
  display: inline-block;
  margin-top: 6px;
  color: #8fb8ff;
  text-decoration: underline;
  font-weight: 500;
}
.mmx-sms-time {
  align-self: center;
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mmx-sms-dots {
  display: flex; gap: 4px;
  padding: 6px 12px;
  background: #2a2a32;
  border-radius: 16px;
  align-self: flex-start;
  margin-top: auto;
}
.mmx-sms-dots span {
  width: 6px; height: 6px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  animation: mmx-dots 1.2s infinite;
}
.mmx-sms-dots span:nth-child(2) { animation-delay: 0.15s; }
.mmx-sms-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes mmx-dots {
  0%,60%,100% { opacity: 0.4; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
@keyframes mmx-bubble-in {
  0% { opacity: 0; transform: translateY(8px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Engage screen (real screenshot) -------------------------------- */
.mmx-state-engage {
  background: #000;
  padding: 0;
  overflow: hidden;
}
.mmx-engage-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ---- Carousel screen ------------------------------------------------- */
.mmx-state-carousel { background: #08080c; padding-top: 44px; }
.mmx-carousel-header { padding: 0 6px 4px; }
.mmx-carousel-hello {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #E2C06B; font-weight: 700;
}
.mmx-carousel-title {
  font-size: 16px; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.015em; color: #fff; margin-top: 4px;
  text-wrap: balance;
}
.mmx-carousel-rail {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  grid-template-rows: 1fr;
  gap: 8px;
  align-items: center;
  padding: 12px 0;
  perspective: 800px;
}
.mmx-carousel-card {
  position: relative;
  aspect-ratio: 2/3;
  border-radius: 10px;
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
}
.mmx-carousel-i-0 { transform: translateX(20%) scale(0.82) rotateY(22deg); opacity: 0.5; }
.mmx-carousel-i-1 { transform: translateX(0) scale(1) rotateY(0); z-index: 2; }
.mmx-carousel-i-2 { transform: translateX(-20%) scale(0.82) rotateY(-22deg); opacity: 0.5; }
.mmx-carousel-i-3, .mmx-carousel-i-4, .mmx-carousel-i-5 { display: none; }
.mmx-carousel-poster {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.mmx-carousel-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);
}
.mmx-carousel-meta { position: absolute; bottom: 6px; left: 8px; right: 8px; }
.mmx-carousel-genre {
  font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.82); font-weight: 700;
}
.mmx-carousel-tap {
  position: absolute; top: 50%; left: 50%;
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  border: 2px solid #E2C06B;
  box-shadow: 0 0 0 0 rgba(226,192,107,0.55), 0 0 24px rgba(226,192,107,0.3);
  animation: mmx-tap-pulse 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes mmx-tap-pulse {
  0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(226,192,107,0.55); }
  70% { transform: scale(1.25); box-shadow: 0 0 0 28px rgba(226,192,107,0); }
  100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(226,192,107,0); }
}
.mmx-carousel-cta {
  display: flex; align-items: center; gap: 8px;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.82);
}
.mmx-dot { width: 6px; height: 6px; background: #2FB866; border-radius: 50%; box-shadow: 0 0 8px #2FB866; }

/* ---- Ticket screen --------------------------------------------------- */
.mmx-state-ticket { background: #0a0a0e; padding: 0; gap: 0; }
.mmx-ticket-hero {
  position: relative;
  height: 44%;
  background-size: cover;
  background-position: center;
  padding: 44px 14px 14px;
  display: flex;
  align-items: flex-end;
}
.mmx-ticket-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(10,10,14,0.95) 100%);
}
.mmx-ticket-hero-meta { position: relative; z-index: 2; }
.mmx-ticket-genre {
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #E2C06B; font-weight: 700;
}
.mmx-ticket-title {
  font-size: 22px; font-weight: 900; line-height: 1.02;
  letter-spacing: -0.025em; margin-top: 4px;
}
.mmx-ticket-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.mmx-ticket-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
}
.mmx-ticket-row:last-of-type { border-bottom: none; }
.mmx-ticket-row-k { color: rgba(255,255,255,0.5); letter-spacing: 0.04em; }
.mmx-ticket-row-v { color: #fff; font-weight: 600; }
.mmx-ticket-row-price .mmx-ticket-row-v { font-size: 14px; }
.mmx-ticket-strike {
  color: rgba(255,255,255,0.38);
  text-decoration: line-through;
  margin-right: 6px;
  font-size: 11px;
}
.mmx-ticket-final { color: #E2C06B; font-weight: 800; }
.mmx-ticket-cta {
  margin-top: 8px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px;
  background: #E2C06B;
  color: #0A0A0E;
  border: none;
  border-radius: 999px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 24px rgba(226,192,107,0.35);
  cursor: pointer;
  animation: mmx-cta-breathe 2.8s ease-in-out infinite;
}
@keyframes mmx-cta-breathe {
  0%,100% { box-shadow: 0 8px 24px rgba(226,192,107,0.35); }
  50% { box-shadow: 0 8px 36px rgba(226,192,107,0.6); }
}
.mmx-ticket-secure {
  text-align: center; font-size: 9px; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.42); margin-top: 6px;
}

/* ---- Attribution screen --------------------------------------------- */
.mmx-state-attr { background: linear-gradient(180deg, #0a0a0e 0%, #14141a 100%); }
.mmx-attr-head { padding: 4px 6px 0; }
.mmx-attr-label {
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #E2C06B; font-weight: 700;
}
.mmx-attr-title {
  font-size: 15px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px;
}
.mmx-attr-chart {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
  padding: 8px 6px;
  height: 110px;
  align-items: end;
}
.mmx-attr-bar-wrap {
  height: 100%; display: flex; align-items: flex-end; justify-content: center;
}
.mmx-attr-bar {
  width: 100%;
  height: var(--h, 50%);
  background: linear-gradient(180deg, #E2C06B 0%, #B68F3A 100%);
  border-radius: 2px 2px 0 0;
  animation: mmx-bar-grow 1.2s var(--ease-smooth, ease) backwards;
  box-shadow: 0 0 12px rgba(226,192,107,0.25);
}
.mmx-attr-bar-wrap:nth-child(1) .mmx-attr-bar { animation-delay: 0s; }
.mmx-attr-bar-wrap:nth-child(2) .mmx-attr-bar { animation-delay: 0.08s; }
.mmx-attr-bar-wrap:nth-child(3) .mmx-attr-bar { animation-delay: 0.16s; }
.mmx-attr-bar-wrap:nth-child(4) .mmx-attr-bar { animation-delay: 0.24s; }
.mmx-attr-bar-wrap:nth-child(5) .mmx-attr-bar { animation-delay: 0.32s; }
.mmx-attr-bar-wrap:nth-child(6) .mmx-attr-bar { animation-delay: 0.4s; }
.mmx-attr-bar-wrap:nth-child(7) .mmx-attr-bar { animation-delay: 0.48s; }
@keyframes mmx-bar-grow {
  0% { height: 0%; opacity: 0; }
  100% { height: var(--h); opacity: 1; }
}
.mmx-attr-ticker {
  padding: 8px 6px;
  display: flex; flex-direction: column; gap: 5px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mmx-attr-ticker-row {
  display: grid;
  grid-template-columns: 10px 28px 1fr;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  line-height: 1.2;
}
.mmx-tick-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.4);
}
.mmx-tick-dot.is-gold { background: #E2C06B; box-shadow: 0 0 8px rgba(226,192,107,0.8); }
.mmx-tick-time { color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; }
.mmx-tick-text { color: #fff; }
.mmx-attr-stats {
  margin-top: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 4px 6px 0;
}
.mmx-attr-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 8px;
}
.mmx-attr-stat-v {
  font-size: 18px; font-weight: 900; letter-spacing: -0.02em;
  color: #E2C06B;
}
.mmx-attr-stat-k {
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-top: 2px;
}

/* ---- Progress indicator --------------------------------------------- */
.mmx-how-progress {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
.mmx-how-progress-track {
  height: 2px;
  background: rgba(255,255,255,0.10);
  border-radius: 2px;
  overflow: hidden;
}
.mmx-how-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #B68F3A 0%, #E2C06B 50%, #FFE5A8 100%);
  box-shadow: 0 0 16px rgba(226,192,107,0.6);
  transition: width 60ms linear;
}
.mmx-how-progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  gap: 12px;
}
.mmx-how-progress-label {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  transition: color 320ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mmx-how-progress-label.is-active { color: #E2C06B; }
@media (max-width: 700px) {
  .mmx-how-progress-label { font-size: 8px; letter-spacing: 0.1em; }
}

/* Per-act phone preview lives inside each .mmx-act. Hidden by default
   (desktop uses the shared right-column phone that morphs through
   states); shown only on mobile where each act gets its own small
   image above the text. */
.mmx-act-phone-mobile { display: none; }

/* ---- Mobile: ditch the sticky scroll-jacking entirely. All four acts
   stack vertically as natural blocks the user can scroll past with
   regular touch scrolling. Each act renders its OWN small phone
   above its copy via .mmx-act-phone-mobile. Section also gets baked-in
   purple ambient lighting so it's clearly differentiated from the
   sections above and below it. */
@media (max-width: 899px) {
  .mmx-how {
    height: auto;
    background:
      radial-gradient(ellipse 90% 30% at 50% 8%, rgba(150, 80, 220, 0.28) 0%, rgba(120, 55, 200, 0.12) 42%, transparent 75%),
      radial-gradient(ellipse 95% 40% at 50% 92%, rgba(160, 90, 230, 0.22) 0%, rgba(110, 50, 200, 0.08) 40%, transparent 75%),
      #060612;
  }
  .mmx-how-stage {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 80px 24px;
  }
  .mmx-stage-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: clamp(20px, 4vh, 40px);
  }
  /* Hide the shared morphing phone — each act has its own small one. */
  .mmx-stage-phone { display: none; }
  .mmx-acts {
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
    max-width: none;
  }
  .mmx-acts-rail { display: none; }
  .mmx-acts-stack {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 7vh, 72px);
  }
  .mmx-act {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    transition: none;
  }
  /* Per-act phone preview, shown only on mobile. Sized large enough
     that the screen contents render at the same proportions as the
     desktop phone (~220px wide), so the image fills the frame exactly
     as it does on the website. No tilt — phone faces straight on.
     Lives BELOW the act copy so each act reads as content → image.
     A purple halo sits behind the phone so the dark bezel reads
     against the section's already-purple ambient background. */
  .mmx-act-phone-mobile {
    position: relative;
    display: block;
    width: min(220px, 58vw);
    margin: 22px auto 0;
  }
  .mmx-act-phone-mobile::before {
    content: "";
    position: absolute;
    inset: -28% -34%;
    z-index: 0;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(170, 110, 240, 0.55) 0%, rgba(135, 70, 220, 0.32) 28%, rgba(100, 45, 200, 0.14) 52%, transparent 78%);
    filter: blur(30px);
    pointer-events: none;
  }
  .mmx-act-phone-mobile .mmx-phone {
    position: relative;
    z-index: 1;
    width: 100%;
    max-height: none;
    transform: none;
  }
  .mmx-act-phone-mobile .mmx-phone:hover {
    transform: none;
  }
  .mmx-act-phone-mobile .mmx-phone-glow {
    background: radial-gradient(closest-side, rgba(180, 120, 245, 0.4), transparent 72%);
    opacity: 0.85;
  }
  /* Naked Act #4 phone on mobile — the chart fills the slot. */
  .mmx-act-phone-mobile .mmx-phone.is-naked {
    width: 100%;
    max-height: none;
    height: auto;
    aspect-ratio: 4 / 5;
  }
  .mmx-how-progress { display: none; }
  .mmx-how-header { margin-bottom: clamp(24px, 4vh, 40px); }
}

/* Act #4 CTA — sits under the body copy on both desktop (within the
   left column) and mobile (above the per-act phone). */
.mmx-act-cta {
  margin-top: clamp(14px, 1.6vw, 22px);
  display: flex;
  justify-content: flex-start;
}

/* Reduce motion — kill the ambient animations */
@media (prefers-reduced-motion: reduce) {
  .mmx-screen-glow, .mmx-grain, .mmx-sms-dots span,
  .mmx-carousel-tap, .mmx-ticket-cta, .mmx-attr-bar {
    animation: none !important;
  }
}

/* @bp <md — enforce the 24px mobile outer gutter rule. Base padding
   uses clamp(20px, 5vw, 64px) which floors to 20px below ~480px. */
@media (max-width: 767.98px) {
  .mm-marketing .mmx-how-stage {
    padding-left: 24px;
    padding-right: 24px;
  }
}
/* @bp tablet — 48px gutters. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .mm-marketing .mmx-how-stage {
    padding-left: 48px;
    padding-right: 48px;
  }
}