/* =====================================================================
   Movie Minder marketing home — hero section
   Ported from design_handoff_movie_minder_site/design_references/marketing_site.html
   All rules scoped to .mm-marketing to avoid colliding with Marcus globals.
   ===================================================================== */

/* Avoid applying overflow-x: hidden to html/body — when one overflow axis
   is non-visible, the browser treats the other as `auto`, which turns body
   into a scroll container and breaks position: sticky on descendants.
   Instead, clip horizontal overflow on the marketing root only. */
.mm-marketing { overflow-x: clip; }
.mm-marketing {
  background: var(--mm-ink);
  color: var(--mm-fg1);
  font-family: var(--mm-font-body);
  min-height: 100vh;
}
.mm-marketing * { box-sizing: border-box; }
.mm-marketing img { display: block; max-width: 100%; }
.mm-marketing a { color: inherit; text-decoration: none; }
.mm-marketing button { font-family: inherit; }

/* =======================
   NAV
   ======================= */
.mm-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px; height: 72px;
  background: transparent;
  transition: background .3s, border-color .3s;
}
/* Backdrop blur lives on a pseudo-element so the nav itself does NOT
   create a `containing block` for fixed-position descendants — the
   mobile slide-down panel needs to be fixed-relative to the viewport,
   not to the 56px nav. Blur only kicks in on scroll, matching the
   transparent-at-top behavior. */
.mm-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transition: backdrop-filter .3s;
}
.mm-nav.is-scrolled {
  background: rgba(10,10,14,0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.mm-nav.is-scrolled::before {
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.mm-nav-left { display: flex; align-items: center; gap: 36px; }
.mm-nav-logo { display: flex; align-items: center; line-height: 1; }
.mm-nav-logo-img {
  display: block;
  height: 22px;
  width: auto;
  filter: drop-shadow(0 1px 8px rgba(226, 192, 107, 0.25));
}
.mm-nav-links { display: flex; gap: 28px; }
.mm-nav-links a { font-size: 14px; font-weight: 500; color: var(--mm-fg2); transition: color .2s; }
.mm-nav-links a:hover { color: var(--mm-gold); }
.mm-nav-right { display: flex; align-items: center; gap: 14px; }

/* =======================
   BUTTONS
   ======================= */
.mm-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px; border-radius: var(--mm-r-pill);
  font-weight: 700; font-size: 15px;
  letter-spacing: -0.005em; border: none; cursor: pointer;
  transition: transform .2s var(--mm-ease-smooth),
              filter .2s var(--mm-ease-smooth),
              background .2s, box-shadow .3s;
  white-space: nowrap;
  font-family: inherit;
  text-decoration: none;
}
a.mm-btn { color: inherit; }
.mm-btn:focus-visible { outline: 2px solid rgba(222,210,138,0.95); outline-offset: 3px; }
/* Gold gradient + inset highlight + soft glow — the "Book the pilot"
   treatment from the Circuits hero, applied site-wide so every gold CTA
   shares one look. */
.mm-btn-primary {
  background: linear-gradient(180deg, #F0CF7B, #D9AD52);
  color: #1A1308;
  box-shadow:
    0 1px 0 rgba(255, 240, 200, 0.7) inset,
    0 -1px 0 rgba(0, 0, 0, 0.2) inset,
    0 10px 32px -12px rgba(226, 192, 107, 0.6);
}
.mm-btn-primary:hover {
  transform: translateY(-1px);
  filter: none;
  box-shadow:
    0 1px 0 rgba(255, 240, 200, 0.8) inset,
    0 -1px 0 rgba(0, 0, 0, 0.2) inset,
    0 16px 40px -10px rgba(226, 192, 107, 0.75);
}
.mm-btn-lg { padding: 18px 32px; font-size: 17px; }
.mm-btn-sm { padding: 10px 18px; font-size: 13px; }

/* =======================
   HERO
   ======================= */
.mm-hero {
  position: relative;
  min-height: clamp(560px, 100svh, 900px);
  padding: clamp(78px, 9vh, 88px) 0 clamp(16px, 4vh, 24px);
  overflow: hidden;
  background:
    /* Subtle edge vignette so the traveling light never fights the content */
    radial-gradient(ellipse 85% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.50) 82%, rgba(0, 0, 0, 0.90) 100%),
    #060612;
}

/* =======================
   PURPLE ORB — single soft light that drifts across the whole page,
   following the currently active section. Sits behind everything.
   ======================= */
.mm-orb {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(200, 165, 255, 0.95) 0%,
    rgba(165, 105, 255, 0.55) 18%,
    rgba(120, 55, 220, 0.28) 40%,
    rgba(80, 32, 155, 0.10) 64%,
    rgba(76, 29, 149, 0) 84%);
  filter: blur(60px) saturate(130%);
  mix-blend-mode: screen;
  will-change: left, top, width, height, opacity;
}

/* =======================
   HERO AURA — subtle purple light drifting diagonally from top-right
   to bottom-left, very slowly. Purely background — should never compete
   with the logo, carousel, or copy.
   A secondary, smaller blob follows the same path on a different clock
   so there's always some color somewhere on screen.
   ======================= */
.mm-hero-aura {
  position: absolute;
  inset: 0;
  z-index: 1;              /* below .mm-hero-inner (z-index 2) */
  pointer-events: none;
  overflow: hidden;
}
.mm-hero-aura .blob {
  position: absolute;
  /* Aggressive asymmetric corners — never reads as a circle. Keyframes
     swing through wildly different ratios so the silhouette pulls and
     stretches like ink in water. */
  border-radius: 70% 30% 55% 45% / 35% 65% 30% 70%;
  filter: blur(38px) saturate(140%);
  mix-blend-mode: screen;
  will-change: transform, opacity, border-radius;
}
/* Primary bloom — parked just below the wordmark, centered, so the purple
   light pools right under the Movie Minder logo. */
.mm-hero-aura .h1 {
  width: 46%; height: 42%;
  left: 27%; top: 4%;
  background: radial-gradient(ellipse at 50% 32%,
    rgba(180, 150, 255, 0.55) 0%,
    rgba(147, 80, 255, 0.30) 28%,
    rgba(100, 40, 200, 0.12) 52%,
    rgba(76, 29, 149, 0) 80%);
  animation: mmHeroWander 38s ease-in-out infinite;
}
/* Secondary bloom — upper-right companion to the main bloom under the logo.
   Same upper band, slightly offset so the light has texture, not a single dot. */
.mm-hero-aura .h2 {
  width: 40%; height: 38%;
  left: 60%; top: 8%;
  background: radial-gradient(ellipse at 50% 40%,
    rgba(210, 160, 255, 0.45) 0%,
    rgba(165, 110, 255, 0.24) 32%,
    rgba(95, 40, 180, 0.10) 58%,
    rgba(67, 20, 138, 0) 80%);
  animation: mmHeroWander2 52s ease-in-out infinite;
  animation-delay: -26s;
}

/* Big swing + extreme corner morphing — silhouette stretches and lobes
   between waypoints. Translates are % of element size; with smaller blobs
   the relative drift is bigger so it covers the hero. */
@keyframes mmHeroWander {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    border-radius: 70% 30% 55% 45% / 35% 65% 30% 70%;
    opacity: 0.85;
  }
  20% {
    transform: translate(-48%, 26%) scale(1.18) rotate(8deg);
    border-radius: 25% 75% 80% 20% / 60% 30% 70% 40%;
    opacity: 1;
  }
  40% {
    transform: translate(38%, 60%) scale(0.84) rotate(-6deg);
    border-radius: 80% 20% 35% 65% / 25% 75% 30% 70%;
    opacity: 0.72;
  }
  60% {
    transform: translate(50%, 14%) scale(1.20) rotate(12deg);
    border-radius: 40% 60% 75% 25% / 70% 30% 65% 35%;
    opacity: 1;
  }
  80% {
    transform: translate(-32%, 44%) scale(0.92) rotate(-10deg);
    border-radius: 65% 35% 25% 75% / 30% 70% 80% 20%;
    opacity: 0.78;
  }
}

/* Secondary blob — opposite path, different shape progression. */
@keyframes mmHeroWander2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    border-radius: 35% 65% 70% 30% / 60% 25% 75% 40%;
    opacity: 0.75;
  }
  25% {
    transform: translate(56%, 50%) scale(1.16) rotate(-9deg);
    border-radius: 75% 25% 30% 70% / 25% 80% 20% 75%;
    opacity: 1;
  }
  50% {
    transform: translate(-44%, 70%) scale(0.86) rotate(11deg);
    border-radius: 25% 75% 60% 40% / 70% 30% 65% 35%;
    opacity: 0.68;
  }
  75% {
    transform: translate(-54%, 18%) scale(1.20) rotate(-12deg);
    border-radius: 60% 40% 80% 20% / 35% 65% 30% 70%;
    opacity: 1;
  }
}

.mm-hero-inner { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 40px); }

/* BIG SHINY LOGO */
.mm-hero-logos {
  display: flex; align-items: center; justify-content: center;
  margin: 28px 0 20px;
  text-align: center;
  animation: mmFadeUp 1s .1s both;
  position: relative; z-index: 4;
}
.mm-hero-logo-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  filter: drop-shadow(0 4px 28px rgba(226, 192, 107, 0.18));
}
.mm-hero-logo {
  display: block;
  width: clamp(360px, 36vw, 620px);
  height: auto;
}
/* Diagonal light sweep — masked to the logo silhouette so the highlight
   only appears where the logo has pixels (text + reel), like the tagline shimmer. */
.mm-hero-logo-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0)    35%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0)    65%
  );
  background-size: 220% 100%;
  background-position: 160% 0;
  background-repeat: no-repeat;
  -webkit-mask-image: var(--mm-logo-mask);
          mask-image: var(--mm-logo-mask);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  animation: mmHeroLogoShine 5s ease-out 1.4s infinite;
}
@keyframes mmHeroLogoShine {
  0%   { background-position: 160% 0; }
  35%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}
.mm-wordmark-big {
  font-family: var(--mm-font-display); font-weight: 900;
  font-size: clamp(28px, 4.2vw, 56px);
  letter-spacing: -0.045em; line-height: 0.9;
  text-align: center;
  margin: 0;
  text-shadow: 0 0 60px rgba(226,192,107,0.22);
  filter: drop-shadow(0 2px 22px rgba(226,192,107,0.30));
}
.mm-wordmark-big .movie {
  display: block;
  font-family: 'Limelight', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 96px;
  letter-spacing: -0.03em;
  position: relative;
  background-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 38%,
      rgba(255,255,255,0.0) 44%,
      rgba(255,255,255,0.85) 50%,
      rgba(255,255,255,0.0) 56%,
      transparent 62%,
      transparent 100%
    ),
    linear-gradient(180deg, #FFF4C9 0%, #F6D57E 20%, #E2C06B 45%, #B68F3A 70%, #FFE9A8 100%);
  background-size: 220% 100%, 100% 100%;
  background-position: 160% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mmMovieShine 1.8s ease-out 0.6s 1 both;
}
@keyframes mmMovieShine {
  0%   { background-position: 160% 0, 0 0; }
  100% { background-position: -60% 0, 0 0; }
}
.mm-wordmark-big .m {
  display: block;
  font-family: 'Limelight', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 58px;
  letter-spacing: -0.01em;
  margin-top: -4px;
  background: linear-gradient(180deg, #FFF4C9 0%, #F6D57E 20%, #E2C06B 45%, #B68F3A 70%, #FFE9A8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero copy */
.mm-hero-copy {
  text-align: center;
  max-width: 1180px;
  margin: 88px auto 40px;
  animation: mmFadeUp 1s .55s both;
  /* No panel chrome — we want this to read as part of the hero, not a card.
     The section pools its own purple light but shares the hero background. */
  position: relative;
  padding: clamp(24px, 3vw, 36px) clamp(20px, 4vw, 48px);
  overflow: visible;
  isolation: isolate;
  /* Scroll-driven light position — updated by JS.
     --mm-hero-light-y: 0 = light parked up in the hero aura, 1 = fully here. */
  --mm-hero-light-y: 0;
}
.mm-hero-headline {
  font-family: var(--mm-font-display); font-weight: 800;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.1; letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0 0 18px;
  color: var(--mm-fg1);
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.mm-hero-sub {
  text-wrap: balance;
  position: relative;
  z-index: 2;
}
.mm-hero-ctas {
  position: relative;
  z-index: 2;
}
.mm-hero-headline .gold { color: var(--mm-gold); }
/* Purple emphasis — picks up the hero aura language ("Now they're home" etc) */
.mm-hero-headline .mm-hero-purple {
  background-image:
    linear-gradient(180deg,
      #D6C2FF 0%,
      #B69BE8 55%,
      #8B6CD8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(167, 139, 250, 0.4));
}

/* The traveling purple light — a single bloom that starts up at the top
   (where the hero aura lives) and slides down through the copy as you scroll.
   No separate second bloom; it's one continuous light. */
.mm-hero-copy::before {
  content: '';
  position: absolute;
  left: 50%;
  /* At y=0 the bloom is parked well above the block (pulling the hero aura
     in), at y=1 it has traveled past the bottom. */
  top: calc(var(--mm-hero-light-y) * 140% - 70%);
  transform: translateX(-50%);
  width: 130%;
  height: 100%;
  background: radial-gradient(ellipse 55% 55% at 50% 50%,
    rgba(180, 150, 255, 0.55) 0%,
    rgba(147, 80, 255, 0.28) 32%,
    rgba(100, 40, 200, 0.1) 58%,
    rgba(76, 29, 149, 0) 80%);
  filter: blur(48px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  transition: top 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mm-hero-sub { font-size: 18px; line-height: 1.55; color: var(--mm-fg2); margin: 0 0 20px; text-wrap: pretty; max-width: clamp(34ch, 94vw, 82ch); margin-left: auto; margin-right: auto; }
.mm-hero-closer {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.5;
  color: var(--mm-fg3);
  margin: 0 auto 32px;
  max-width: 52ch;
  text-wrap: pretty;
}
.mm-hero-closer strong {
  font-weight: 700;
  color: var(--mm-fg1);
  background: linear-gradient(92deg, var(--mm-gold-bright), var(--mm-gold) 55%, var(--mm-gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mm-hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.mm-hero-support {
  margin: 18px auto 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--mm-fg4);
  max-width: 48ch;
}

/* =======================
   AURA-STYLE COVERFLOW CAROUSEL
   ======================= */
.mm-trailer-stage {
  position: relative;
  margin: 20px auto 24px;
  max-width: 1600px;
  padding: 0 20px;
  animation: mmFadeUp 1s .3s both;
  --slide-w: 920px;
  --slide-h: 518px;
  /* No `isolation: isolate` here — we want mix-blend-mode on the tagline
     inside this stage to reach the hero aura painted behind .mm-hero-inner. */
}

.mm-trailer-viewport {
  position: relative;
  z-index: 1;
  height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2200px;
  transform-style: preserve-3d;
  touch-action: pan-y;
  user-select: none;
}
.mm-trailer-track {
  position: relative; width: 100%; height: 600px;
  transform-style: preserve-3d;
}
.mm-trailer-slide {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--slide-w); height: var(--slide-h);
  margin-top: calc(var(--slide-h) / -2);
  margin-left: calc(var(--slide-w) / -2);
  border-radius: 20px;
  overflow: hidden;
  cursor: default;
  will-change: transform, opacity, filter;
  background: #000;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 1.4s cubic-bezier(.32,.72,0,1),
              opacity 1.4s cubic-bezier(.32,.72,0,1),
              filter 1.4s cubic-bezier(.32,.72,0,1),
              box-shadow .8s ease;
}
.mm-trailer-slide::before {
  content: ''; position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
  transform: translateX(-100%); transition: transform .8s;
  pointer-events: none;
}
/* hover sweep removed — slides are not interactive */

.mm-trailer-slide::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 30%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35));
  pointer-events: none; z-index: 5;
}

.mm-trailer-media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 6s ease-out, opacity .6s;
  z-index: 2;
}
.mm-trailer-slide.is-active .mm-trailer-media { transform: scale(1.08); }
.mm-trailer-slide .mm-trailer-media.faded { opacity: 0; }

.mm-trailer-video {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.mm-trailer-video:empty { display: none; }
.mm-trailer-video iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 180%; height: 180%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

.mm-trailer-slide.is-active {
  box-shadow: 0 30px 80px rgba(0,0,0,0.7),
              0 0 0 1px rgba(226,192,107,0.28),
              0 0 80px rgba(226,192,107,0.18);
}
.mm-trailer-slide.is-offstage { opacity: 0; pointer-events: none; }

.mm-trailer-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 40%, rgba(0,0,0,0.9) 100%);
  z-index: 2;
  transition: opacity .4s;
}
.mm-trailer-slide:not(.is-active) .mm-trailer-scrim { opacity: 0.3; }

/* =======================
   TITLE + CTA DRAMATIC REVEAL
   Fires only once the slide's YouTube video is actually playing
   (`.is-active.has-video`). The `has-video` class gets applied when the
   iframe onLoad fires (or via a 1600ms failsafe). The elements then stay
   visible for the full duration of the slide and fade out with the slide.
   Timeline — relative to video start:
     0ms      video is playing
    120ms    date eyebrow fades in
    280ms    movie title drops in (+scale+blur clear)
    720ms    Buy Now & Save punches up
    960ms    Remind Me! punches up
   Once fully landed, both buttons breathe + shimmer + glow.
   ======================= */
.mm-trailer-info {
  position: absolute;
  left: 28px; right: 28px; bottom: 22px;
  z-index: 6;
  color: #fff;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mm-trailer-slide:not(.is-active) .mm-trailer-info { pointer-events: none; }

/* ----- Hidden state (applies to non-active slides) ----- */
.mm-trailer-info .d,
.mm-trailer-info .t,
.mm-trailer-info .mm-cta-btn {
  opacity: 0;
  will-change: transform, opacity, filter;
}
.mm-trailer-info .d {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mm-gold); font-weight: 700; margin-bottom: 8px;
  transform: translateY(6px);
  transition: opacity .4s ease .12s, transform .4s ease .12s;
}
.mm-trailer-info .t {
  font-family: var(--mm-font-display); font-weight: 600;
  font-size: 40px; line-height: 1.02; letter-spacing: -0.025em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.8), 0 0 28px rgba(226,192,107,0.18);
  transform: translateY(-28px) scale(1.08);
  filter: blur(10px);
  transition:
    opacity .55s cubic-bezier(.32,.72,0,1) .28s,
    transform .7s cubic-bezier(.32,.72,0,1) .28s,
    filter .6s ease .28s;
}

/* Action row */
.mm-trailer-actions {
  display: flex; gap: 16px; align-items: center;
  justify-content: center;
  margin-top: 22px;
  perspective: 1000px;
}

/* ----- Revealed state (video is playing) ----- */
.mm-trailer-slide.is-active.has-video .mm-trailer-info .d {
  opacity: 1; transform: translateY(0);
}
.mm-trailer-slide.is-active.has-video .mm-trailer-info .t {
  opacity: 1; transform: translateY(0) scale(1); filter: blur(0);
}

/* =======================
   CTA BUTTONS — two dramatic treatments that sell the product:
   - Buy Now & Save → GOLD primary. The money hook.
   - Remind Me!     → glass with a gold edge. The insider hook.
   Entrance: punchy bounce-in with overshoot, then idle-breathe + light-sweep.
   ======================= */
.mm-cta-btn {
  --cta-bg: rgba(0, 0, 0, 0.55);
  --cta-fg: #fff;
  --cta-border: rgba(255, 255, 255, 0.22);
  --cta-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  --cta-glow: rgba(226, 192, 107, 0.0);

  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  min-width: 190px;
  height: 60px;
  padding: 0 26px;
  border-radius: 100px;
  border: 2px solid var(--cta-border);
  background: var(--cta-bg);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: var(--cta-fg);
  font-family: var(--mm-font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: var(--cta-shadow), 0 0 0 0 var(--cta-glow);
  /* Start state — dramatic: offscreen-down + tiny + blurred */
  transform: translateY(60px) scale(0.58) rotate(-2deg);
  filter: blur(8px);
  opacity: 0;
  transition:
    opacity .75s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    transform .75s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    filter .5s ease,
    background .25s ease,
    border-color .25s ease,
    color .25s ease,
    box-shadow .35s ease;
}
.mm-cta-btn > svg,
.mm-cta-btn > span { position: relative; z-index: 2; }
.mm-cta-btn svg { flex: 0 0 auto; }

/* Buy Now & Save — GOLD primary, the money ask */
.mm-cta-buy {
  --cta-bg: linear-gradient(180deg, #F6D57E 0%, #E2C06B 55%, #B68F3A 100%);
  --cta-fg: #0A0A0E;
  --cta-border: rgba(255, 240, 190, 0.75);
  --cta-shadow: 0 16px 44px rgba(226, 192, 107, 0.55), 0 8px 18px rgba(0, 0, 0, 0.45);
  --cta-glow: rgba(226, 192, 107, 0.55);
  font-weight: 600;
}

/* Remind Me — glass with a gold edge */
.mm-cta-remind {
  --cta-bg: rgba(10, 10, 14, 0.72);
  --cta-fg: #fff;
  --cta-border: rgba(226, 192, 107, 0.55);
  --cta-shadow: 0 14px 36px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --cta-glow: rgba(226, 192, 107, 0.32);
  font-weight: 600;
}

/* Staggered entrance — buy first, then remind */
.mm-trailer-slide.is-active.has-video .mm-cta-buy {
  transition-delay: .72s, .72s, .72s, 0s, 0s, 0s, 0s;
}
.mm-trailer-slide.is-active.has-video .mm-cta-remind {
  transition-delay: .96s, .96s, .96s, 0s, 0s, 0s, 0s;
}

.mm-trailer-slide.is-active.has-video .mm-cta-btn {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
  filter: blur(0);
}

/* Hover: lifts + brightens */
.mm-cta-buy:hover {
  filter: brightness(1.08);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 22px 54px rgba(226, 192, 107, 0.70), 0 10px 20px rgba(0, 0, 0, 0.5);
}
.mm-cta-remind:hover {
  background: rgba(226, 192, 107, 0.95);
  color: #0A0A0E;
  border-color: var(--mm-gold);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 20px 48px rgba(226, 192, 107, 0.55), 0 8px 18px rgba(0, 0, 0, 0.5);
}
.mm-cta-btn:active { transform: translateY(0) scale(0.97); }
.mm-cta-btn:focus-visible { outline: 2px solid rgba(222, 210, 138, 0.95); outline-offset: 4px; }

/* Display-only variant — no pointer, no hover, no active. The idle breathe
   and shimmer animations stay so it still reads as a polished CTA visually. */
.mm-cta-btn.is-display { cursor: default; }
.mm-cta-btn.is-display:hover,
.mm-cta-btn.is-display:active { transform: translateY(0) scale(1); filter: none; box-shadow: var(--cta-shadow), 0 0 0 0 var(--cta-glow); }
.mm-cta-buy.is-display:hover { background: var(--cta-bg); }
.mm-cta-remind.is-display:hover { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-border); }

/* =======================
   IDLE "POP" ANIMATIONS — run after entrance has landed.
   1. Breathe  → subtle scale pulse on the button itself (::after holds glow separately).
   2. Glow     → gold ring pulse via ::after (behind the button).
   3. Shimmer  → diagonal light streak via ::before that sweeps every 3.5s.
   ======================= */

/* Glow ring — behind the button */
.mm-cta-btn::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}
.mm-trailer-slide.is-active.has-video .mm-cta-buy::after    { animation: mmCtaGlowGold 2.6s ease-in-out 1.55s infinite; }
.mm-trailer-slide.is-active.has-video .mm-cta-remind::after { animation: mmCtaGlowEdge 2.6s ease-in-out 1.80s infinite; }

@keyframes mmCtaGlowGold {
  0%, 100% {
    opacity: 0.55;
    box-shadow: 0 0 0 0 rgba(226, 192, 107, 0.0),
                0 0 28px rgba(226, 192, 107, 0.28);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 0 6px rgba(226, 192, 107, 0.35),
                0 0 64px rgba(226, 192, 107, 0.65),
                0 0 120px rgba(255, 220, 130, 0.35);
  }
}
@keyframes mmCtaGlowEdge {
  0%, 100% {
    opacity: 0.5;
    box-shadow: 0 0 0 0 rgba(226, 192, 107, 0.0),
                0 0 22px rgba(226, 192, 107, 0.22);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 0 4px rgba(226, 192, 107, 0.40),
                0 0 52px rgba(226, 192, 107, 0.55);
  }
}

/* Button breathing + shimmer — applied directly so they don't fight the entrance */
.mm-trailer-slide.is-active.has-video .mm-cta-btn {
  animation: mmCtaPulse 2.6s ease-in-out 1.6s infinite;
}
.mm-trailer-slide.is-active.has-video .mm-cta-remind { animation-delay: 1.85s; }

@keyframes mmCtaPulse {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }
  50%      { transform: translateY(-2px) scale(1.035) rotate(0); }
}

/* Shimmer streak — a bright diagonal gradient that sweeps across */
.mm-cta-btn::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 40%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-22deg);
  opacity: 0;
}
.mm-trailer-slide.is-active.has-video .mm-cta-btn::before {
  animation: mmCtaShimmer 3.4s ease-in-out 2s infinite;
}
.mm-trailer-slide.is-active.has-video .mm-cta-remind::before { animation-delay: 2.6s; }
@keyframes mmCtaShimmer {
  0%   { left: -60%; opacity: 0; }
  25%  { opacity: 0.9; }
  50%  { left: 120%; opacity: 0; }
  100% { left: 120%; opacity: 0; }
}

/* Bell rings once when the Remind Me! button lands.
   Delay ~= Remind Me's entrance delay (960ms) + entrance duration (~750ms). */
.mm-cta-remind > svg {
  transform-origin: 50% 10%;
}
.mm-trailer-slide.is-active.has-video .mm-cta-remind > svg {
  animation: mmBellRing 0.9s cubic-bezier(.36, .07, .19, .97) 1.7s 1 both;
}
@keyframes mmBellRing {
  0%, 100% { transform: rotate(0); }
  10%      { transform: rotate(-16deg); }
  22%      { transform: rotate(16deg); }
  34%      { transform: rotate(-12deg); }
  46%      { transform: rotate(12deg); }
  58%      { transform: rotate(-7deg); }
  70%      { transform: rotate(7deg); }
  82%      { transform: rotate(-3deg); }
  92%      { transform: rotate(2deg); }
}

/* Tiny toast */
.mm-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: #1a3d2a; color: #d9f5e5; padding: 12px 22px;
  border-radius: 999px; font-size: 14px; font-weight: 500;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.mm-toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(-4px); }

/* Glassmorphic arrows + dot pagination */
.mm-trailer-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .3s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  z-index: 20;
  font-family: inherit;
}
.mm-trailer-arrow.prev { left: 24px; }
.mm-trailer-arrow.next { right: 24px; }
.mm-trailer-arrow:hover {
  background: rgba(226,192,107,0.95); color: #0A0A0E; border-color: var(--mm-gold);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 12px 32px rgba(226,192,107,0.4), 0 6px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.mm-trailer-arrow:active { transform: translateY(-50%) scale(0.96); }
.mm-trailer-arrow:focus-visible { outline: 2px solid rgba(222,210,138,0.95); outline-offset: 3px; }

.mm-trailer-tagline {
  position: relative;
  margin: 22px auto 0;
  max-width: 1040px;
  padding: 6px 40px;
  text-align: center;
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.5vw, 38px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-wrap: balance;
  animation: mmFadeUp 1s .9s both, mmTaglineBreathe 4.5s ease-in-out 2s infinite;
}
/* Flanking lines — bolder, gold-tipped, with a star punctuation. */
.mm-trailer-tagline::before,
.mm-trailer-tagline::after {
  content: '';
  position: absolute; top: 50%;
  width: clamp(80px, 16vw, 220px); height: 2px;
  background: linear-gradient(90deg,
    rgba(167, 139, 250, 0) 0%,
    rgba(167, 139, 250, 0.6) 30%,
    rgba(226, 192, 107, 0.95) 75%,
    rgba(255, 233, 168, 1) 100%);
  box-shadow: 0 0 12px rgba(226, 192, 107, 0.45);
}
.mm-trailer-tagline::before {
  right: 100%; margin-right: 22px;
  background: linear-gradient(90deg,
    rgba(255, 233, 168, 1) 0%,
    rgba(226, 192, 107, 0.95) 25%,
    rgba(167, 139, 250, 0.6) 70%,
    rgba(167, 139, 250, 0) 100%);
}
.mm-trailer-tagline::after { left: 100%; margin-left: 22px; }

/* Lead phrase lights purple; kicker stays cream/gold. The purple picks up
   the accent from the hero copy ("Now they're home.") and makes the
   callout feel like part of the same narrative. A warm highlight still
   sweeps through so the line breathes. */
.mm-trailer-tagline .tt-lead {
  color: #C9B6FF;
  background-image:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0)    0%,
      rgba(255, 255, 255, 0)    36%,
      rgba(236, 228, 255, 0.55) 46%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(236, 228, 255, 0.55) 54%,
      rgba(255, 255, 255, 0)    64%,
      rgba(255, 255, 255, 0)    100%
    ),
    linear-gradient(180deg,
      #E9DDFF 0%,
      #B79BFA 55%,
      #8B6DE8 100%
    );
  background-size: 280% 100%, 100% 100%;
  background-position: 100% 50%, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mmTaglineSweep 4.2s ease-in-out infinite;
  font-weight: 600;
  /* Subtle purple glow underneath so the line reads even on darker beds */
  filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.35));
}
.mm-trailer-tagline .tt-kicker {
  color: #EDE2C6;
  background-image:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0)    0%,
      rgba(255, 255, 255, 0)    36%,
      rgba(255, 244, 201, 0.55) 46%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(255, 244, 201, 0.55) 54%,
      rgba(255, 255, 255, 0)    64%,
      rgba(255, 255, 255, 0)    100%
    ),
    linear-gradient(180deg,
      #F4E9CE 0%,
      #E8D7A6 60%,
      #C9B072 100%
    );
  background-size: 280% 100%, 100% 100%;
  background-position: 100% 50%, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mmTaglineSweep 4.2s ease-in-out infinite;
  animation-delay: -2s; /* highlight trails the lead */
  font-weight: 600;
}
@keyframes mmTaglineBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

/* Only the highlight layer (first bg) moves; the vertical gradient stays put. */
@keyframes mmTaglineSweep {
  0%   { background-position: 100% 50%, 0 0; }
  100% { background-position: 0% 50%, 0 0; }
}

@keyframes mmFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =======================
   RESPONSIVE
   ======================= */
@media (max-width: 900px) {
  .mm-nav-links { display: none; }
  .mm-nav { padding: 14px 20px; }
  .mm-trailer-stage { --slide-w: 88vw; --slide-h: 48vw; padding: 0 12px; }
  .mm-trailer-viewport { height: 58vw; min-height: 260px; }
  .mm-trailer-track { height: 64vw; min-height: 300px; }
  .mm-trailer-info .t { font-size: 22px; }
  .mm-hero { padding: 80px 0 40px; }
  .mm-hero-inner { padding: 0 20px; }
  .mm-hero-copy { margin: 72px auto 32px; padding: 0 8px; }
  .mm-wordmark-big .movie { font-size: clamp(56px, 14vw, 108px); }
  .mm-trailer-arrow { width: 44px; height: 44px; }
  .mm-trailer-arrow.prev { left: 8px; }
  .mm-trailer-arrow.next { right: 8px; }
}

/* @bp <md — mobile carousel: kill the desktop coverflow fan and show only
   the active slide, centered. The JS still rotates the active slide every
   6s (or via arrows) so users still see all 7 trailers; the side-card 3D
   spray is what would overflow a 360-430px viewport, so we hide it. */
@media (max-width: 767.98px) {
  .mm-trailer-viewport {
    perspective: none;
    transform-style: flat;
  }
  .mm-trailer-track {
    transform-style: flat;
  }
  /* Non-active slides retreat behind the active one. Use visibility + opacity
     (not display:none) so the JS layout pass doesn't error on missing
     bounding rects. */
  .mm-trailer-slide:not(.is-active) {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
    /* Override the inline transform from JS — keep the slide centered so it
       doesn't fly off the side as it transitions out. */
    transform: translate3d(0, 0, -1px) !important;
  }
  .mm-trailer-slide.is-active {
    /* Override JS transform so the active slide is dead-centered with no
     rotation/depth. Inline JS still adds transition timing; we just
     replace the transform value. */
    transform: translate3d(0, 0, 0) !important;
    filter: none !important;
  }

  /* Trailer CTAs ("Buy Now & Save", "Remind Me!") were sized for a 920px
     desktop slide — at 330px mobile they swallow the bottom of the
     trailer. Halve the height, drop min-width, tighten gap. */
  .mm-trailer-actions { gap: 8px; margin-top: 12px; }
  .mm-cta-btn {
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    font-size: 12px;
    border-width: 1px;
    gap: 6px;
  }
  /* The buy/remind buttons each carry an icon + label. Clip the icon width
     so the visible label has room. */
  .mm-cta-btn svg { width: 14px; height: 14px; }

  /* Hero composition: tighter vertical rhythm. The 900px-and-below rule
     ships .mm-hero-copy with margin-top: 72px which leaves a noticeable
     gap between the trailer tagline and the "Your moviegoers saw…"
     headline at phone widths. Cut it to 24px. */
  .mm-hero-copy { margin-top: 24px !important; margin-bottom: 24px !important; }
  .mm-trailer-stage { margin-top: 12px; margin-bottom: 12px; }
}


/* =====================================================================
   SECTIONS — primitives + per-section styles, inlined.
   ===================================================================== */

/* Shared primitives for all marketing sections below the hero.
   All rules scoped under .mm-marketing. Imported once from MarketingHome.jsx. */

.mm-marketing .mm-section {
  position: relative;
  width: 100%;
  padding: clamp(72px, 16vw, 120px) 0;
  scroll-margin-top: 90px;
}

.mm-marketing .mm-section-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 48px);
  padding-left: max(clamp(20px, 5vw, 48px), env(safe-area-inset-left));
  padding-right: max(clamp(20px, 5vw, 48px), env(safe-area-inset-right));
}

.mm-marketing .mm-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mm-gold);
  margin-bottom: clamp(16px, 2vw, 20px);
}

.mm-marketing .mm-section-headline {
  font-size: clamp(32px, 6.5vw, 56px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--mm-fg1);
  max-width: 22ch;
  margin-bottom: clamp(20px, 3vw, 28px);
}

.mm-marketing .mm-section-lead {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--mm-fg3);
  max-width: 60ch;
}

.mm-marketing .mm-gold-phrase {
  background: linear-gradient(92deg, var(--mm-gold-bright), var(--mm-gold) 55%, var(--mm-gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mm-marketing .mm-card {
  position: relative;
  background: var(--mm-curtain);
  border: var(--mm-border-hair);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 36px);
}

.mm-marketing .mm-note {
  font-size: 13px;
  font-style: italic;
  color: var(--mm-fg4);
  margin-top: clamp(12px, 1.5vw, 16px);
}

.mm-marketing .mm-draft-flag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-gold-deep);
  background: rgba(226, 192, 107, 0.08);
  border: 1px dashed rgba(226, 192, 107, 0.35);
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 12px;
}

/* Kill hover effects on touch-only devices to avoid sticky hovered state. */
@media not all and (hover: hover) {
  .mm-marketing .mm-section a:hover,
  .mm-marketing .mm-section button:hover {
    transform: none !important;
    filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-marketing .mm-section *,
  .mm-marketing .mm-section *::before,
  .mm-marketing .mm-section *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --- HowItWorks.css --- */
/* Section 1 — How It Works
   4 numbered steps: stacked mobile, 2x2 tablet, 4-col desktop. */

.mm-marketing .mm-how {
  background: var(--mm-ink);
}

.mm-marketing .mm-how-grid {
  list-style: none;
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 20px);
}

.mm-marketing .mm-how-step {
  display: flex;
  flex-direction: column;
  min-height: 220px;
}

.mm-marketing .mm-how-n {
  font-family: var(--mm-font-display);
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: transparent;
  background: linear-gradient(135deg, var(--mm-gold-bright), var(--mm-gold) 55%, var(--mm-gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: clamp(16px, 2.2vw, 24px);
}

.mm-marketing .mm-how-title {
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mm-fg1);
  margin-bottom: 12px;
}

.mm-marketing .mm-how-body {
  font-size: clamp(15px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--mm-fg3);
}

@media (min-width: 768px) {
  .mm-marketing .mm-how-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 2vw, 22px);
  }
}

@media (min-width: 1024px) {
  .mm-marketing .mm-how-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* --- ForMoviegoers.css --- */
/* Section — For moviegoers
   Narrative lead (full-width) + 3 short benefits. */

.mm-marketing .mm-value {
  background: var(--mm-ink);
}

.mm-marketing .mm-value-head {
  margin-bottom: clamp(32px, 5vw, 48px);
}

.mm-marketing .mm-value-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
}

.mm-marketing .mm-value-lead-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 18px);
}

.mm-marketing .mm-value-lead {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--mm-fg2);
}

.mm-marketing .mm-value-closer {
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-weight: 600;
  background: linear-gradient(92deg, var(--mm-gold-bright), var(--mm-gold) 55%, var(--mm-gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  max-width: 36ch;
}

.mm-marketing .mm-value-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(22px, 3vw, 32px);
}

.mm-marketing .mm-value-benefit {
  padding-left: clamp(16px, 2vw, 20px);
  border-left: 2px solid var(--mm-gold);
}

.mm-marketing .mm-value-benefit-title {
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mm-fg1);
  margin-bottom: 6px;
}

.mm-marketing .mm-value-benefit-body {
  font-size: clamp(15px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--mm-fg3);
}

@media (min-width: 900px) {
  .mm-marketing .mm-value-body {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 80px);
    align-items: start;
  }
}


/* --- ForTheatres.css --- */
/* Section — For theatres
   Single-column linear flow: headline → lead → transition → 4 claims → economics → CTA.
   Claims follow the "bold lead + proof line" rhythm. */

.mm-marketing .mm-theatres {
  background: var(--mm-ink);
}

.mm-marketing .mm-theatres-body {
  max-width: 760px;
  margin: 0 auto;
}

.mm-marketing .mm-theatres-body .mm-section-headline {
  max-width: 24ch;
}

.mm-marketing .mm-theatres-bridge {
  margin-top: clamp(14px, 2vw, 20px);
  color: var(--mm-fg2);
}

.mm-marketing .mm-claims {
  list-style: none;
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: var(--mm-border-hair);
}

.mm-marketing .mm-claim {
  padding: clamp(20px, 2.6vw, 28px) 0;
  border-bottom: var(--mm-border-hair);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 10px);
}

.mm-marketing .mm-claim-lead {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  background: linear-gradient(92deg, var(--mm-gold-bright), var(--mm-gold) 55%, var(--mm-gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mm-marketing .mm-claim-proof {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
  color: var(--mm-fg3);
  max-width: 60ch;
}

.mm-marketing .mm-econ {
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(22px, 2.6vw, 28px) clamp(22px, 2.6vw, 28px);
  background: var(--mm-curtain);
  border: var(--mm-border-hair);
  border-radius: 16px;
}

.mm-marketing .mm-econ-lead {
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--mm-fg1);
  margin-bottom: 8px;
}

.mm-marketing .mm-econ-body {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--mm-fg3);
}

.mm-marketing .mm-theatres-cta {
  margin-top: clamp(32px, 4vw, 44px);
}


/* --- ForStudios.css --- */
/* Section — For studios
   Single-column flow matching ForTheatres. Reuses .mm-claims and .mm-econ primitives. */

.mm-marketing .mm-studios {
  background: var(--mm-curtain);
  border-top: var(--mm-border-hair);
  border-bottom: var(--mm-border-hair);
}

.mm-marketing .mm-studios-body {
  max-width: 760px;
  margin: 0 auto;
}

.mm-marketing .mm-studios-body .mm-section-headline {
  max-width: 24ch;
}

.mm-marketing .mm-studios-bridge {
  margin-top: clamp(14px, 2vw, 20px);
  color: var(--mm-fg2);
}

.mm-marketing .mm-studios .mm-econ {
  background: var(--mm-ink);
}

.mm-marketing .mm-studios-cta {
  margin-top: clamp(32px, 4vw, 44px);
}


/* --- AudienceIntelligence.css --- */
/* Section 5 — Audience intelligence
   Two-column desktop: narrative left, stacked tier diagram right. */

.mm-marketing .mm-intel {
  background: var(--mm-ink);
  overflow: hidden;
}

.mm-marketing .mm-intel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}

.mm-marketing .mm-intel-copy .mm-section-headline {
  max-width: 16ch;
}

.mm-marketing .mm-intel-para-2 {
  margin-top: clamp(14px, 1.8vw, 20px);
}

.mm-marketing .mm-intel-stack-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 32px);
  position: relative;
}

.mm-marketing .mm-intel-stack-wrap::before {
  content: '';
  position: absolute;
  inset: 10% -20% 10% auto;
  width: 55%;
  background: radial-gradient(ellipse at 70% 50%,
    rgba(226, 192, 107, 0.14) 0%,
    rgba(226, 192, 107, 0.05) 40%,
    transparent 70%);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
}

.mm-marketing .mm-intel-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.mm-marketing .mm-intel-tier {
  position: relative;
  padding-left: calc(var(--tier-i) * 14px);
  transition: transform 200ms var(--mm-ease-smooth);
}

.mm-marketing .mm-intel-tier-inner {
  background: var(--mm-curtain);
  border: var(--mm-border-hair);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color 200ms var(--mm-ease-smooth), background 200ms var(--mm-ease-smooth);
}

.mm-marketing .mm-intel-tier:nth-child(1) .mm-intel-tier-inner {
  background: linear-gradient(135deg, rgba(226, 192, 107, 0.14), rgba(226, 192, 107, 0.04));
  border-color: rgba(226, 192, 107, 0.35);
}

.mm-marketing .mm-intel-tier-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--mm-fg1);
}

.mm-marketing .mm-intel-tier:nth-child(1) .mm-intel-tier-label {
  background: linear-gradient(92deg, var(--mm-gold-bright), var(--mm-gold) 55%, var(--mm-gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mm-marketing .mm-intel-tier-detail {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mm-fg3);
}

@media (min-width: 900px) {
  .mm-marketing .mm-intel-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(56px, 7vw, 96px);
  }
}


/* --- PrivacyAndCompliance.css --- */
/* Section 6 — Privacy & compliance
   Four hairline cards, 1-col mobile, 2-col tablet, 4-col desktop. */

.mm-marketing .mm-privacy {
  background: var(--mm-ink);
}

.mm-marketing .mm-privacy-head {
  margin-bottom: clamp(32px, 5vw, 56px);
  max-width: 58ch;
}

.mm-marketing .mm-privacy-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 20px);
}

.mm-marketing .mm-privacy-pillar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 1.6vw, 16px);
}

.mm-marketing .mm-privacy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(226, 192, 107, 0.08);
  border: 1px solid rgba(226, 192, 107, 0.22);
  color: var(--mm-gold);
}

.mm-marketing .mm-privacy-title {
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mm-fg1);
  line-height: 1.3;
}

.mm-marketing .mm-privacy-body {
  font-size: clamp(14px, 1.1vw, 15px);
  line-height: 1.6;
  color: var(--mm-fg3);
}

@media (min-width: 768px) {
  .mm-marketing .mm-privacy-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1100px) {
  .mm-marketing .mm-privacy-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* --- BuiltForScale.css --- */
/* Section 7 — Built for scale
   Three pillar cards, stacked mobile, 3-col desktop. */

.mm-marketing .mm-scale {
  background: var(--mm-curtain);
  border-top: var(--mm-border-hair);
  border-bottom: var(--mm-border-hair);
}

.mm-marketing .mm-scale-head {
  margin-bottom: clamp(32px, 5vw, 56px);
  max-width: 58ch;
}

.mm-marketing .mm-scale-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 20px);
}

.mm-marketing .mm-scale-pillar {
  background: var(--mm-ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 1.6vw, 16px);
}

.mm-marketing .mm-scale-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(226, 192, 107, 0.08);
  border: 1px solid rgba(226, 192, 107, 0.22);
  color: var(--mm-gold);
}

.mm-marketing .mm-scale-title {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mm-fg1);
  line-height: 1.3;
}

.mm-marketing .mm-scale-body {
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.6;
  color: var(--mm-fg3);
}

.mm-marketing .mm-scale-note {
  margin-top: clamp(24px, 3vw, 32px);
  max-width: 64ch;
}

@media (min-width: 768px) {
  .mm-marketing .mm-scale-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1100px) {
  .mm-marketing .mm-scale-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* --- Results.css --- */
/* Section 8 — Results
   Three-phase timeline + 4 placeholder metric tiles. */

.mm-marketing .mm-results {
  background: var(--mm-ink);
}

.mm-marketing .mm-results-head {
  margin-bottom: clamp(32px, 5vw, 56px);
  max-width: 60ch;
}

.mm-marketing .mm-results-phases {
  list-style: none;
  margin: 0 0 clamp(48px, 6vw, 72px);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 20px);
  counter-reset: phase;
}

.mm-marketing .mm-results-phase {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 18px);
  position: relative;
}

.mm-marketing .mm-results-phase-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.mm-marketing .mm-results-phase-n {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--mm-gold-bright), var(--mm-gold) 55%, var(--mm-gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mm-marketing .mm-results-phase-label {
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mm-fg1);
}

.mm-marketing .mm-results-phase-body {
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.6;
  color: var(--mm-fg3);
}

.mm-marketing .mm-results-caption {
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: var(--mm-border-hair);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-gold);
  text-align: center;
}

@media (min-width: 768px) {
  .mm-marketing .mm-results-phases {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* --- FAQ.css --- */
/* Section 9 — FAQ
   Tabbed by audience. Horizontal pill tabs with horizontal scroll on mobile.
   Native details/summary accordions below. */

.mm-marketing .mm-faq {
  background: var(--mm-curtain);
  border-top: var(--mm-border-hair);
  border-bottom: var(--mm-border-hair);
}

.mm-marketing .mm-faq-head {
  margin-bottom: clamp(28px, 4vw, 40px);
  max-width: 60ch;
}

.mm-marketing .mm-faq-head .mm-draft-flag {
  margin-top: clamp(18px, 2vw, 22px);
}

.mm-marketing .mm-faq-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: clamp(20px, 2.5vw, 28px);
  padding-bottom: 4px;
}
.mm-marketing .mm-faq-tabs::-webkit-scrollbar { display: none; }

.mm-marketing .mm-faq-tab {
  flex: 0 0 auto;
  padding: 10px 18px;
  border-radius: var(--mm-r-pill);
  background: transparent;
  border: var(--mm-border-hair);
  color: var(--mm-fg3);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 200ms var(--mm-ease-smooth),
              color 200ms var(--mm-ease-smooth),
              border-color 200ms var(--mm-ease-smooth);
  min-height: 44px;
}

@media (hover: hover) and (pointer: fine) {
  .mm-marketing .mm-faq-tab:hover {
    color: var(--mm-fg1);
    border-color: rgba(255, 255, 255, 0.25);
  }
}

.mm-marketing .mm-faq-tab.is-active {
  background: var(--mm-gold);
  color: var(--mm-ink);
  border-color: var(--mm-gold);
}

.mm-marketing .mm-faq-tab:focus-visible {
  outline: 2px solid rgba(222, 210, 138, 0.95);
  outline-offset: 3px;
}

.mm-marketing .mm-faq-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mm-marketing .mm-faq-item {
  border: var(--mm-border-hair);
  border-radius: 14px;
  background: var(--mm-ink);
  overflow: hidden;
  /* Entrance: each card lifts up from far below, scaled down and slightly
     tilted, fading in as it settles. The cascade is exaggerated (160ms
     between cards) so the motion reads even at a glance. Going via a
     keyframe instead of CSS transitions guarantees the animation
     replays cleanly each time the panel re-enters the viewport
     (when React remounts the items with a fresh key). */
  opacity: 0;
  transform: translate3d(0, 80px, 0) scale(0.9) rotate(-1.5deg);
  filter: blur(8px);
  transition: border-color 220ms var(--mm-ease-smooth),
              background 220ms var(--mm-ease-smooth);
  will-change: opacity, transform, filter;
}

.mm-marketing .mm-faq-panel.is-in .mm-faq-item {
  animation: mmFaqRise 900ms cubic-bezier(0.22, 0.72, 0.12, 1) both;
  animation-delay: calc(var(--mm-faq-i, 0) * 160ms);
}

@keyframes mmFaqRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 80px, 0) scale(0.9) rotate(-1.5deg);
    filter: blur(8px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-marketing .mm-faq-item {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .mm-marketing .mm-faq-panel.is-in .mm-faq-item {
    animation: none;
  }
}

.mm-marketing .mm-faq-item.is-open {
  border-color: rgba(226, 192, 107, 0.3);
}

.mm-marketing .mm-faq-q {
  list-style: none;
  cursor: pointer;
  padding: clamp(18px, 2.2vw, 22px) clamp(20px, 2.4vw, 26px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--mm-fg1);
  min-height: 56px;
  line-height: 1.45;
}
.mm-marketing .mm-faq-q::-webkit-details-marker { display: none; }
.mm-marketing .mm-faq-q::marker { content: ''; }

.mm-marketing .mm-faq-q > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.mm-marketing .mm-faq-q svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--mm-gold);
}

.mm-marketing .mm-faq-a {
  padding: 0 clamp(20px, 2.4vw, 26px) clamp(20px, 2.4vw, 24px);
  font-size: clamp(14px, 1.15vw, 15.5px);
  line-height: 1.65;
  color: var(--mm-fg3);
  max-width: clamp(38ch, 92vw, 70ch);
}


/* --- About.css --- */
/* Section 10 — About
   Two-column editorial: headline left, paragraphs right. */

.mm-marketing .mm-about {
  background: var(--mm-ink);
}

.mm-marketing .mm-about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.mm-marketing .mm-about-lead .mm-section-headline {
  max-width: 18ch;
}

.mm-marketing .mm-about-p2 {
  margin-top: clamp(16px, 2vw, 22px);
}

@media (min-width: 900px) {
  .mm-marketing .mm-about-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(56px, 7vw, 96px);
  }
}


/* --- FinalCTA.css --- */
/* Section 11 — Final CTA
   Centered. Ambient gold glow. Gold pill primary + secondary email link. */

.mm-marketing .mm-final-cta {
  background: var(--mm-ink);
  position: relative;
  overflow: hidden;
}

.mm-marketing .mm-final-cta::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(70vw, 720px);
  height: min(70vw, 720px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%,
    rgba(226, 192, 107, 0.12) 0%,
    rgba(226, 192, 107, 0.04) 35%,
    transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mm-marketing .mm-final-cta::before {
    opacity: 0.6;
  }
}

.mm-marketing .mm-final-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Three-vignette graphic above the headline (trailer → ticket →
   measured). Wider than a single icon since it carries the whole
   storyline; sized down on phones, scales up gently on wide screens.
   Soft purple+gold halos drop it into the section's ambient lighting. */
.mm-marketing .mm-cta-graphic {
  width: clamp(320px, 56vw, 560px);
  margin: 0 auto clamp(28px, 3.4vw, 40px);
  filter:
    drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 24px rgba(167, 139, 250, 0.18))
    drop-shadow(0 0 18px rgba(226, 192, 107, 0.12));
  animation: mmFadeUp 1s 0.2s both;
}
.mm-marketing .mm-cta-graphic svg {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 540px) {
  .mm-marketing .mm-cta-graphic { width: min(94vw, 460px); }
}

.mm-marketing .mm-final-cta-heading {
  font-size: clamp(32px, 6vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--mm-fg1);
  margin: 0 0 clamp(28px, 4vw, 40px);
  max-width: 22ch;
}

.mm-marketing .mm-final-cta-promises {
  list-style: none;
  margin: 0 0 clamp(32px, 4vw, 44px);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 14px);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
  color: var(--mm-fg3);
  max-width: 56ch;
  text-align: left;
}

.mm-marketing .mm-final-cta-promises li {
  padding-left: 20px;
  position: relative;
}

.mm-marketing .mm-final-cta-promises li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 2px;
  background: var(--mm-gold);
  border-radius: 2px;
}

.mm-marketing .mm-final-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.8vw, 18px);
}


/* --- Footer.css --- */
/* Section 12 — Footer
   Curtain band. Brand + 4 link columns top. Legal + social bottom.
   Respects safe-area-inset-bottom on phones. */

.mm-marketing .mm-footer {
  position: relative;
  z-index: 5;
  background: var(--mm-curtain);
  border-top: var(--mm-border-hair);
  padding: clamp(48px, 7vw, 72px) 0 calc(clamp(24px, 3vw, 32px) + env(safe-area-inset-bottom));
}

.mm-marketing .mm-footer-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 48px);
}

.mm-marketing .mm-footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 48px);
  align-items: start;
}

.mm-marketing .mm-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mm-marketing .mm-footer-logo {
  height: 26px;
  width: auto;
  filter: drop-shadow(0 1px 8px rgba(226, 192, 107, 0.25));
  align-self: flex-start;
}

/* Tagline reads as a sotto-voce caption attached to the logo —
   a thin gold rule sits between them so the wordmark and the line
   read as one signature. Italic + slightly tracked + Georgia so
   it picks up the editorial voice from the rest of the page. */
.mm-marketing .mm-footer-tagline {
  position: relative;
  margin: 0;
  padding-top: 10px;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: #C7BA9A;
  max-width: 30ch;
}
.mm-marketing .mm-footer-tagline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 1.5px;
  background: linear-gradient(90deg,
    #E2C06B 0%, rgba(226,192,107,0.35) 100%);
  border-radius: 1px;
}

.mm-marketing .mm-footer-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 32px) clamp(20px, 3vw, 28px);
}

.mm-marketing .mm-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.mm-marketing .mm-footer-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mm-fg4);
  margin-bottom: 4px;
}

.mm-marketing .mm-footer-col a {
  font-size: 14px;
  color: var(--mm-fg2);
  transition: color 200ms var(--mm-ease-smooth);
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}

@media (hover: hover) and (pointer: fine) {
  .mm-marketing .mm-footer-col a:hover {
    color: var(--mm-gold);
  }
}

.mm-marketing .mm-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: clamp(24px, 3vw, 32px);
  border-top: var(--mm-border-hair);
}

.mm-marketing .mm-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
  color: var(--mm-fg4);
}

.mm-marketing .mm-footer-parent a {
  color: var(--mm-fg3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 1px;
  transition: color 200ms var(--mm-ease-smooth), border-color 200ms var(--mm-ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
  .mm-marketing .mm-footer-parent a:hover {
    color: var(--mm-gold);
    border-color: var(--mm-gold);
  }
}

.mm-marketing .mm-footer-social {
  display: flex;
  gap: 18px;
  font-size: 13px;
}

.mm-marketing .mm-footer-social a {
  color: var(--mm-fg3);
  transition: color 200ms var(--mm-ease-smooth);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

@media (hover: hover) and (pointer: fine) {
  .mm-marketing .mm-footer-social a:hover {
    color: var(--mm-gold);
  }
}

@media (min-width: 768px) {
  .mm-marketing .mm-footer-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(48px, 6vw, 72px);
  }
  .mm-marketing .mm-footer-nav {
    grid-template-columns: repeat(4, 1fr);
  }
  .mm-marketing .mm-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ---------- Home hero stage (phone + background poster scroll) ------
   Replaces the old 3D trailer carousel. The poster scroll lives behind
   everything via .mmh-bgscroll (shared rule from MoviegoersHero.css).
   The phone sits centered with a YouTube iframe filling the hero
   region — we use the cover-by-oversize trick so 16:9 trailers don't
   letterbox inside the portrait phone hero. */
.mm-marketing .mm-home-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 8px auto 0;
  padding: 0;
  min-height: 540px;
}
.mm-marketing .mm-home-stage-phone {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
}
.mm-marketing .mm-home-stage-video {
  position: absolute;
  /* Trailer occupies most of the in-phone hero, with a smaller bottom
     band reserved for the CTAs. CTAs are pinned a bit higher (38px from
     bottom) so they still sit on a clean shaded area without leaving a
     wide black strip between the trailer and the carousel below. */
  inset: 0 0 18% 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.mm-marketing .mm-home-stage-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180%;
  height: 180%;
  transform: translate(-50%, -50%);
  border: 0;
}
.mm-marketing .mm-home-stage .mm-trailer-tagline {
  position: relative;
  z-index: 2;
}

/* Background poster scroll — spans the full hero section. Lifted to
   the top of the hero and made noticeably more visible so the posters
   feel like the backdrop of the scene rather than a watermark. */
.mm-marketing .mm-hero > .mmh-bgscroll {
  top: 0;
  bottom: 40px;
  opacity: 0.46;
  filter: blur(1px) saturate(0.92);
  z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 2%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 2%, #000 70%, transparent 100%);
}
/* Pull the scrolling poster row upward so the posters sit in the upper
   band of the hero (behind the nav + box) rather than centered in the
   full hero height. Flip the direction (reverse) so posters appear to
   travel left-to-right across the marketing hero — entering from the
   left and exiting on the right. The moviegoers page keeps the default
   direction since this override is scoped to .mm-hero. */
.mm-marketing .mm-hero > .mmh-bgscroll .mmh-bgscroll-strip {
  top: clamp(-280px, -24vw, -150px);
  animation-direction: reverse;
}

/* Hero row: just a constrained wrapper now — the panel inside it owns
   the 2-col (copy + phone) layout so they read as a single boxed unit.
   Pushed below the fixed top nav so the box does not touch it. */
.mm-marketing .mm-hero-row {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: clamp(12px, 2vh, 24px) auto 0;
  padding: 0 clamp(16px, 2vw, 24px);
}

/* The phone column is a positioning context for any floating callouts
   that need to anchor to the phone (e.g. the in-screen calendar).
   We add perspective so the rotateY tilt below reads as 3D depth
   (the phone leans in toward the copy), and flex-center it inside the
   grid cell so the smaller tilt-cropped silhouette stays balanced. */
.mm-marketing .mm-home-stage .mm-home-stage-phone {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1600px;
}

/* Phone sits inside the boxed panel. Tilted into a showcase angle so
   it reads as large and dimensional even though the actual width is
   constrained to fit inside a typical hero viewport (so the Buy Now
   CTA at the bottom of the in-phone hero is never clipped). */
.mm-marketing .mm-home-stage .mmh-phone {
  width: clamp(280px, 28vw, 360px);
  transform: rotateY(-16deg) rotateX(4deg);
  transform-origin: 60% 50%;
}
.mm-marketing .mm-home-stage .mmh-phone:hover {
  transform: rotateY(-10deg) rotateX(2deg);
}

/* "Added to calendar" sticky-note card — now pops INSIDE the phone hero,
   covering the Buy Now / Remind Me CTAs. Animates in 5 seconds after the
   hero re-mounts (each trailer cycle remounts .mmh-app-hero), then the
   next trailer kicks in and the popup re-fires for the new movie. */
.mm-marketing .mm-home-stage .mmh-app-hero .mm-home-cal {
  position: absolute;
  left: 50%;
  bottom: 92px;
  z-index: 4;
  width: clamp(128px, 13vw, 160px);
  background: #0d0b14;
  color: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(245, 220, 148, 0.30);
  box-shadow:
    0 28px 56px rgba(0, 0, 0, 0.65),
    0 6px 14px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(226, 192, 107, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  font-family: var(--mm-font-display, 'Inter', sans-serif);
  opacity: 0;
  transform: translate(-50%, 18px) rotate(-3deg) scale(0.9);
  animation:
    mmHomeCalIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 5s forwards,
    mmHomeCalBob 4.2s ease-in-out 5.8s infinite;
}
.mm-marketing .mm-home-stage .mmh-app-hero .mm-home-cal-month {
  background: linear-gradient(180deg, #FFF4C9 0%, #F6D57E 25%, #E2C06B 55%, #B68F3A 100%);
  color: #1a140a;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  padding: 6px 0 4px;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.4);
}
.mm-marketing .mm-home-stage .mmh-app-hero .mm-home-cal-day {
  font-size: clamp(34px, 3.6vw, 44px);
  font-weight: 800;
  text-align: center;
  letter-spacing: -0.02em;
  padding: 8px 0 4px;
  line-height: 1;
  background: linear-gradient(180deg, #FFF4C9 0%, #F6D57E 30%, #E2C06B 55%, #B68F3A 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.mm-marketing .mm-home-stage .mmh-app-hero .mm-home-cal-title {
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  padding: 0 8px 8px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.18;
  text-wrap: balance;
}
.mm-marketing .mm-home-stage .mmh-app-hero .mm-home-cal-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  color: #F6D57E;
  background: rgba(245, 220, 148, 0.10);
  padding: 6px 4px;
  border-top: 1px solid rgba(245, 220, 148, 0.18);
  letter-spacing: 0.02em;
}
@keyframes mmHomeCalIn {
  0%   { transform: translate(-50%, 28px) rotate(-12deg) scale(0.55); opacity: 0; }
  55%  { transform: translate(-50%, -6px) rotate(1deg)   scale(1.06); opacity: 1; }
  78%  { transform: translate(-50%, 3px)  rotate(-4deg)  scale(0.98); opacity: 1; }
  100% { transform: translate(-50%, 0)    rotate(-3deg)  scale(1);    opacity: 1; }
}
@keyframes mmHomeCalBob {
  0%, 100% { transform: translate(-50%, 0)   rotate(-3deg) scale(1); }
  50%      { transform: translate(-50%, -3px) rotate(-2deg) scale(1); }
}
@media (max-width: 959px) {
  .mm-marketing .mm-home-stage .mmh-app-hero .mm-home-cal {
    width: 118px;
    bottom: 78px;
  }
}

/* Translucent panel chrome — frosted box on the left of the phone,
   styled like the moviegoers page's hero panel. Inside lives the
   tagline (the headline copy sits centered below the row). */
.mm-marketing .mm-hero-copy.mm-hero-copy--panel {
  text-align: left;
  margin: 0;
  max-width: none;
  background: rgba(8, 7, 12, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: clamp(28px, 3.4vw, 48px) clamp(26px, 3vw, 40px);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 960px) {
  .mm-marketing .mm-hero-copy.mm-hero-copy--panel {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}
.mm-marketing .mm-hero-copy--panel .mm-hero-copy-text {
  min-width: 0;
  /* Pin the text column to the top of the panel so the Movie Minder
     logo sits at the top of the box rather than being centered against
     the (tall) phone column. Perspective makes the rotateX in the
     logo's slam-in entrance read as real 3D depth. */
  align-self: start;
  perspective: 1200px;
}
/* Match the phone alignment so the prototype rides up to the top of
   the box rather than being centered against the (potentially shorter)
   text column. */
.mm-marketing .mm-hero-copy--panel .mm-home-stage-phone {
  align-self: start;
}
.mm-marketing .mm-hero-copy--panel .mm-hero-copy-logo-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  margin: 0 0 clamp(20px, 2vw, 28px);
  /* Persistent gold halo behind the wordmark — gives it that "lit" feel
     even between shine sweeps. The pulse subtly breathes the halo. */
  filter: drop-shadow(0 4px 18px rgba(226, 192, 107, 0.38));
  opacity: 0;
  /* Start oversized — the logo enters huge (filling the eye line) and
     shrinks into its final position, like a film studio title card
     contracting onto the screen. */
  transform: scale(2.2) rotateX(-10deg);
  transform-origin: 50% 50%;
  animation:
    mmHeroLogoIn 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards,
    mmHeroLogoGlow 4.2s ease-in-out 1.8s infinite;
}
.mm-marketing .mm-hero-copy--panel .mm-hero-copy-logo {
  display: block;
  height: clamp(96px, 12vw, 184px);
  width: auto;
  position: relative;
  z-index: 1;
}
/* Diagonal gold light sweep — masked to the SVG silhouette so the
   highlight only shows where the letters/reel actually paint. Sweeps
   across once as the logo enters, then again every few seconds. */
.mm-marketing .mm-hero-copy--panel .mm-hero-copy-logo-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    100deg,
    rgba(255, 245, 200, 0)    32%,
    rgba(255, 245, 200, 0.95) 50%,
    rgba(255, 245, 200, 0)    68%
  );
  background-size: 220% 100%;
  background-position: 160% 0;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  -webkit-mask-image: var(--mm-logo-mask);
          mask-image: var(--mm-logo-mask);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left center;
          mask-position: left center;
  animation: mmHeroCopyLogoShine 4.5s ease-out 0.5s infinite;
}
/* Dramatic zoom-in: the wordmark enters HUGE, fades up to full opacity
   quickly, then contracts down past its target with a tiny overshoot
   and settles. Cinematic title-card "shrinking into place" feel. */
@keyframes mmHeroLogoIn {
  0%   { opacity: 0; transform: scale(2.2)  rotateX(-10deg); }
  22%  { opacity: 1; transform: scale(1.85) rotateX(-6deg); }
  62%  {              transform: scale(0.94) rotateX(2deg);  }
  80%  {              transform: scale(1.03) rotateX(0);     }
  100% { opacity: 1; transform: scale(1)    rotateX(0);     }
}
@keyframes mmHeroLogoGlow {
  0%, 100% { filter: drop-shadow(0 4px 18px rgba(226, 192, 107, 0.32)); }
  50%      { filter: drop-shadow(0 6px 28px rgba(245, 220, 148, 0.65)); }
}
@keyframes mmHeroCopyLogoShine {
  0%   { background-position: 160% 0; }
  40%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}
/* Typewriter caret — blinks while the headline is being typed and is
   removed entirely once typing completes. */
.mm-marketing .mmh-hero-caret {
  display: inline-block;
  width: 0.08em;
  height: 0.95em;
  margin-left: 0.06em;
  vertical-align: -0.1em;
  background: currentColor;
  border-radius: 1px;
  animation: mmHeroCaretBlink 0.75s steps(1, end) infinite;
}
.mm-marketing .mmh-hero-title-em .mmh-hero-caret {
  /* Match the italic gold tone of the em line so the caret reads as
     part of the active typing color. */
  background: #E2C06B;
}
@keyframes mmHeroCaretBlink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (max-width: 959px) {
  .mm-marketing .mm-hero-copy--panel .mm-hero-copy-logo {
    height: clamp(56px, 14vw, 80px);
    margin-left: auto;
    margin-right: auto;
  }
}
/* Mobile: bump logo size on phones only (the 959px rule above covers
   tablet 768–959px; this overrides below 768px). 72→104 is on the 8px
   grid and reads as a clear bump from the previous 56→80. */
@media (max-width: 767.98px) {
  .mm-marketing .mm-hero-copy--panel .mm-hero-copy-logo {
    height: clamp(72px, 18vw, 104px);
  }
  /* Hide the typewriter caret on mobile — its 0.08em inline width was
     the only thing nudging neighbouring letters as it advanced. Letters
     themselves use visibility:hidden so they don't reflow; removing the
     caret means each letter simply appears in its final position. */
  .mm-marketing .mmh-hero-caret {
    display: none;
  }
  /* Phone sized to fit inside the hero panel with room for the in-screen
     CTAs. Flatten the 3D rotation so the phone reads symmetrical inside
     the panel (desktop's rotateY(-16deg) shifts it visually to one side
     at narrow widths). !important defeats the 60vw rule that
     MoviegoersHero.css ships at the same specificity. */
  .mm-marketing .mm-home-stage .mmh-phone {
    width: clamp(270px, 84vw, 330px) !important;
    transform: rotateY(0) rotateX(0);
  }
  .mm-marketing .mm-home-stage .mmh-phone:hover {
    transform: rotateY(0) rotateX(0);
  }
  /* Without this, the grid column's default min-width: auto inflates to
     the phone's intrinsic width and pushes the whole column past the
     panel's right padding, leaving the phone visually flush-right.
     min-width: 0 lets the 1fr column stay panel-wide so justify-content:
     center symmetrically overflows the wider phone on both sides. */
  .mm-marketing .mm-hero-copy--panel .mm-home-stage-phone {
    min-width: 0;
  }
  /* Pull the in-phone carousel track left so the scaled-up center poster
     sits equidistant from the phone's left/right edges. The JS pins the
     center thumb to a fixed x in the carousel container (STEP = 108) —
     that math leaves it ~15px right of true center on mobile, which the
     margin compensates for. */
  .mm-marketing .mm-home-stage .mmh-app-carousel-track {
    margin-left: -15px;
  }
  /* Reinforce notch centering — desktop's rotated frame can cause the
     centered translate to read slightly off; lock it explicitly. */
  .mm-marketing .mm-home-stage .mmh-phone-notch {
    left: 50%;
    transform: translateX(-50%);
    right: auto;
  }
  /* Buttons side by side, tighter padding + smaller text so both
     "Buy Now & Save" and "Remind Me!" fit without clipping. Pull the
     CTA row in tighter to the phone edges so each button is a bit
     wider. */
  .mm-marketing .mm-home-stage .mmh-app-ctas {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    left: 6px;
    right: 6px;
  }
  .mm-marketing .mm-home-stage .mmh-app-ctas .mm-cta-btn {
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    font-size: 10.5px;
    gap: 4px;
    letter-spacing: -0.01em;
  }
  .mm-marketing .mm-home-stage .mmh-app-ctas .mm-cta-btn svg {
    width: 12px;
    height: 12px;
  }
  /* Hold the buttons offscreen/invisible until the trailer has been
     playing for a beat — video plays first, then CTAs pop in. */
  .mm-marketing .mm-home-stage .mm-cta-buy.is-hero-pop {
    animation-delay: 2.4s;
  }
  .mm-marketing .mm-home-stage .mm-cta-remind.is-hero-pop {
    animation-delay: 2.7s;
  }
  /* Unify every section headline on the mobile homepage to a single
     line-height. Base rules range from 1.04 to 1.2 across files that
     load after this one, so !important is needed to win the cascade
     without editing each scene file individually. */
  .mm-marketing .mmh-hero-title,
  .mm-marketing .mm-section-headline,
  .mm-marketing .mmx-how-headline,
  .mm-marketing .mmx-theatres-headline,
  .mm-marketing .mmx-mg-headline,
  .mm-marketing .mmx-res-headline,
  .mm-marketing .mmx-ai-headline {
    line-height: 1.15 !important;
  }
  /* Hide the lone "X" social link in the footer on mobile — it reads
     as a stray close-button glyph rather than a Twitter/X icon. */
  .mm-marketing .mm-footer-social {
    display: none;
  }
}
/* Mobile: each headline segment starts on its own line and wraps within
   the screen when too long. We don't force nowrap so phrases can break
   naturally — the typewriter pre-allocates the wrap layout. */
@media (max-width: 600px) {
  .mm-marketing .mm-hero-copy--panel .mmh-hero-title {
    font-size: clamp(15px, 4.5vw, 20px);
    line-height: 1.2;
  }
  .mm-marketing .mm-hero-copy--panel .mmh-hero-title-seg,
  .mm-marketing .mm-hero-copy--panel .mmh-hero-title-em {
    display: block;
    white-space: normal;
    /* `stable` keeps the wrap algorithm from rebalancing as the
       typewriter slices content between typed/rest spans. */
    text-wrap: stable;
  }
  .mm-marketing .mmh-hero-title.is-done .mmh-hero-title-rest {
    display: inline;
  }
}
/* Constrain the moviegoers-style title typography so it scales right
   inside the home panel (which is narrower than the moviegoers panel).
   Disable kerning and ligatures so character widths are perfectly
   stable as letters cross the typed/rest boundary during typewriter
   animation — otherwise the inline width fluctuates per character. */
.mm-marketing .mm-hero-copy--panel .mmh-hero-title {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.2;
  font-kerning: none;
  font-variant-ligatures: none;
  text-rendering: geometricPrecision;
}
/* Keep the short em phrase on a single line — if it doesn't fit
   we'd rather shrink the type than wrap mid-phrase. */
.mm-marketing .mm-hero-copy--panel .mmh-hero-title-em {
  white-space: nowrap;
}

/* Per-character typewriter rendering — every character is its own span
   whose position is locked the moment the segment mounts. Toggling
   `.is-hidden` on a char span only changes its paint (visibility:hidden
   preserves layout), so the reveal never causes a reflow. */
.mm-marketing .mmh-hero-title-char {
  display: inline;
}
.mm-marketing .mmh-hero-title-char.is-hidden {
  visibility: hidden;
}
/* Words are nowrap units so line breaks only happen at real spaces
   between words, never mid-word between adjacent char spans. */
.mm-marketing .mmh-hero-title-word {
  white-space: nowrap;
}
/* Legacy typed/rest spans (no longer rendered by the typewriter, kept
   for compatibility just in case any consumer still references them). */
.mm-marketing .mmh-hero-title-rest {
  visibility: hidden;
}
.mm-marketing .mmh-hero-title.is-done .mmh-hero-title-rest {
  display: inline;
}
.mm-marketing .mm-hero-copy--panel .mmh-hero-lead {
  max-width: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.mm-marketing .mm-hero-copy--panel .mmh-hero-title.is-done + .mmh-hero-lead {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 959px) {
  .mm-marketing .mm-hero-copy.mm-hero-copy--panel {
    padding: 24px 22px;
    text-align: center;
  }
  .mm-marketing .mm-hero-copy--panel .mmh-hero-meta {
    align-items: center;
  }
  .mm-marketing .mm-hero-copy--panel .mmh-hero-dots {
    justify-content: center;
  }
}

/* @bp <md — phone-only overrides for the hero. Tablet (768-959px) keeps
   the 959px rules above.
   1) Edge-to-edge gray panel: kill the .mm-hero-row outer padding and
      remove the panel's border-radius + horizontal border so it spans
      viewport-to-viewport. Inner padding stays at 24px so headline copy
      doesn't kiss the screen edge (3 × 8 — on grid).
   2) Posters higher: pull .mmh-bgscroll-strip down (less negative top)
      so the strip's visible band lands behind the "Your moviegoers"
      headline rather than scrolling above the panel. */
@media (max-width: 767.98px) {
  .mm-marketing .mm-hero-row {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
  }
  .mm-marketing .mm-hero-copy.mm-hero-copy--panel {
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding-left: 24px;
    padding-right: 24px;
  }
  .mm-marketing .mm-hero > .mmh-bgscroll .mmh-bgscroll-strip {
    top: 0;
  }
  /* Pin the posters to the top of the strip and pad them down past the
     56px nav plus 100px of clearance so the row reads as a band lower
     in the hero rather than touching the nav. */
  .mm-marketing .mm-hero > .mmh-bgscroll .mmh-bgscroll-track {
    align-items: flex-start;
    padding-top: 156px;
  }
}

/* Tighten the status bar (no second-line "‹ Outlook") and pull the hero up. */
.mm-marketing .mm-home-stage .mmh-app-status {
  padding: 6px 16px 4px;
}
.mm-marketing .mm-home-stage .mmh-app-hero {
  margin: 2px 8px 0;
}

/* Bigger posters in the bottom carousel — fills the space we freed by
   killing the second status-bar line. Thumb width 100 + gap 8 = STEP 108
   (matches HomeHeroStage's STEP constant). Container is taller and
   overflow:visible so the scaled-up center poster has room to bloom
   without clipping. */
.mm-marketing .mm-home-stage .mmh-app-carousel {
  height: 200px;
  margin: 8px 12px 4px;
  overflow: visible;
}
.mm-marketing .mm-home-stage .mmh-app-thumb {
  flex: 0 0 100px;
  height: 140px;
  border-radius: 9px;
  opacity: 0.55;
  transform: scale(0.82);
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 420ms ease,
              opacity 420ms ease,
              filter 420ms ease;
}
/* The center thumbnail represents the trailer currently playing in the
   hero above. Scaled up significantly and ringed in gold so it reads
   as the "now playing" anchor of the carousel. */
.mm-marketing .mm-home-stage .mmh-app-thumb.is-center {
  opacity: 1;
  transform: scale(1.36);
  z-index: 2;
  box-shadow:
    0 0 0 2px rgba(245, 220, 148, 0.9),
    0 12px 32px rgba(0, 0, 0, 0.65),
    0 0 44px rgba(226, 192, 107, 0.55);
}
.mm-marketing .mm-home-stage .mmh-app-thumb.is-center img {
  filter: brightness(1.1) saturate(1.1);
}

/* Soft gold radial light blooming behind the poster carousel inside the
   phone — sits on the phone-screen layer behind the carousel itself so
   the edge fades on the carousel still read. */
.mm-marketing .mm-home-stage .mmh-app-carousel-glow {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 96px;
  height: 220px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 55% 55% at 50% 55%,
    rgba(245, 220, 148, 0.55) 0%,
    rgba(226, 192, 107, 0.32) 28%,
    rgba(184, 142, 58, 0.14) 55%,
    rgba(0, 0, 0, 0) 78%);
  filter: blur(26px);
  mix-blend-mode: screen;
}
.mm-marketing .mm-home-stage .mmh-app-carousel { position: relative; z-index: 1; }

/* ----- Gold + glass CTAs inside the phone hero ----------------------
   Reuses .mm-cta-btn / .mm-cta-buy / .mm-cta-remind styling, sized for
   the phone screen. The .is-hero-pop entrance + idle pulse + glow +
   shimmer + bell ring all apply by default — and because
   .mmh-app-hero re-mounts every trailer cycle (React key change),
   every cycle re-fires the entrance and the bell ring. */
.mm-marketing .mm-home-stage .mmh-app-ctas {
  bottom: 14px;
  gap: 6px;
}
/* Slightly larger Movie Minder wordmark in the brand row below the
   carousel (default 18px feels lost against the bigger posters). */
.mm-marketing .mm-home-stage .mmh-app-brand {
  padding: 6px 0 6px;
}
.mm-marketing .mm-home-stage .mmh-app-brand-logo {
  height: 26px;
}
.mm-marketing .mm-home-stage .mm-cta-btn.is-hero-pop {
  min-width: 0;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border-radius: 100px;
  border-width: 1.5px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  gap: 7px;
  /* Resting state (post-entrance) — animations control entry */
  transform: translateY(0) scale(1) rotate(0);
  filter: none;
  opacity: 1;
  /* Drop the original entrance transitions; we drive everything via animations */
  transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .35s ease;
  /* Entrance only — no idle pulse. Once the buttons settle they stay still. */
  animation: mmHeroCtaEnter 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.mm-marketing .mm-home-stage .mm-cta-btn.is-hero-pop svg {
  width: 15px;
  height: 15px;
}
/* Buy Now & Save — primary money ask. Lighter weight so the gold-on-dark
   letterforms stay readable. Glow ring removed; only a soft black drop
   shadow remains for grounding. */
.mm-marketing .mm-home-stage .mm-cta-buy.is-hero-pop {
  font-weight: 500;
  --cta-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
  animation-delay: 0.25s;
}
.mm-marketing .mm-home-stage .mm-cta-remind.is-hero-pop {
  font-weight: 600;
  animation-delay: 0.55s;
}

/* Glow ring animations disabled on the in-phone CTAs — they were
   adding a pulsing gold halo behind the buttons; the resting state
   without the halo reads cleaner alongside the carousel. */
.mm-marketing .mm-home-stage .mm-cta-buy.is-hero-pop::after,
.mm-marketing .mm-home-stage .mm-cta-remind.is-hero-pop::after {
  animation: none;
  opacity: 0;
  box-shadow: none;
}

/* Diagonal shimmer */
.mm-marketing .mm-home-stage .mm-cta-buy.is-hero-pop::before {
  animation: mmCtaShimmer 3.4s ease-in-out 1.5s infinite;
}
.mm-marketing .mm-home-stage .mm-cta-remind.is-hero-pop::before {
  animation: mmCtaShimmer 3.4s ease-in-out 2.4s infinite;
}

/* Bell rings once per cycle on Remind Me */
.mm-marketing .mm-home-stage .mm-cta-remind.is-hero-pop > svg {
  animation: mmBellRing 0.9s cubic-bezier(.36, .07, .19, .97) 1.6s 1 both;
}

/* Entrance: drops in from below with an overshoot, then a soft settle.
   The middle keyframe is past the resting scale so the button visibly
   pops up before locking in. */
@keyframes mmHeroCtaEnter {
  0%   { transform: translateY(54px) scale(0.55) rotate(-3deg); filter: blur(8px); opacity: 0; }
  55%  { transform: translateY(-9px) scale(1.14) rotate(1deg);  filter: blur(0);   opacity: 1; }
  78%  { transform: translateY(2px)  scale(0.97) rotate(0); }
  100% { transform: translateY(0)    scale(1)    rotate(0); }
}

/* Idle pulse — slightly stronger than the page-wide mmCtaPulse so the
   phone-screen CTAs read as the call to action. */
@keyframes mmHeroCtaPulse {
  0%, 100% { transform: translateY(0)   scale(1)     rotate(0); }
  50%      { transform: translateY(-3px) scale(1.055) rotate(0); }
}

/* Beefier gold glow specifically for the Buy Now & Save button. */
@keyframes mmHeroBuyGlow {
  0%, 100% {
    opacity: 0.6;
    box-shadow: 0 0 0 0 rgba(226, 192, 107, 0.0),
                0 0 34px rgba(226, 192, 107, 0.40);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 0 9px rgba(226, 192, 107, 0.45),
                0 0 88px rgba(226, 192, 107, 0.85),
                0 0 160px rgba(255, 220, 130, 0.45);
  }
}

/* ----- Scroll-revealed hero copy (the "Your moviegoers saw..." block).
   Each .mm-hero-line and the CTA row start hidden + slid down; when the
   block scrolls into view (IntersectionObserver in MarketingHome adds
   .is-revealed), they cascade in via staggered transition-delays.
   --------------------------------------------------------------------- */
.mm-hero-copy--reveal .mm-hero-line,
.mm-hero-copy--reveal .mm-hero-ctas {
  display: block;
  /* Balance the wrapping inside each line so words distribute evenly
     rather than orphaning a short tail on a line by itself. */
  text-wrap: balance;
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.mm-hero-copy--reveal.is-revealed .mm-hero-line,
.mm-hero-copy--reveal.is-revealed .mm-hero-ctas {
  opacity: 1;
  transform: translateY(0);
}
.mm-hero-copy--reveal .mm-hero-headline .mm-hero-line:nth-of-type(1) { transition-delay: 0s; }
.mm-hero-copy--reveal .mm-hero-headline .mm-hero-line:nth-of-type(2) { transition-delay: 0.18s; }
.mm-hero-copy--reveal .mm-hero-sub      .mm-hero-line:nth-of-type(1) { transition-delay: 0.38s; }
.mm-hero-copy--reveal .mm-hero-sub      .mm-hero-line:nth-of-type(2) { transition-delay: 0.56s; }
.mm-hero-copy--reveal .mm-hero-ctas                                    { transition-delay: 0.78s; }


/* ====================================================================
   IN-THEATER ADVERTISING — section + contextual placement scenes
   ==================================================================== */
.mm-marketing .mm-itx {
  position: relative;
  /* 8px grid — every section uses the same clamp for consistent
     vertical rhythm across the page. */
  padding: clamp(80px, 10vw, 120px) clamp(24px, 5vw, 64px);
  background: #050507;
  color: #fff;
  overflow: hidden;
}
.mm-marketing .mm-itx::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(closest-side at 75% 30%, rgba(150, 90, 220, 0.18), transparent 70%),
    radial-gradient(closest-side at 20% 70%, rgba(226, 192, 107, 0.10), transparent 70%);
  pointer-events: none;
}
/* Mobile: lean the In-theater section toward warm gold/amber so it
   reads as visually distinct from the purple-lit How It Works section
   directly above it. Also adds a faint gold divider line at the top
   to mark the section boundary cleanly. */
@media (max-width: 899px) {
  .mm-marketing .mm-itx {
    background:
      radial-gradient(ellipse 90% 30% at 50% 0%, rgba(226, 192, 107, 0.22) 0%, rgba(184, 142, 58, 0.10) 38%, transparent 70%),
      radial-gradient(ellipse 95% 40% at 50% 100%, rgba(245, 220, 148, 0.14) 0%, rgba(184, 142, 58, 0.05) 42%, transparent 75%),
      linear-gradient(180deg, #0c0a08 0%, #08070a 60%, #050507 100%);
    border-top: 1px solid rgba(226, 192, 107, 0.22);
  }
  .mm-marketing .mm-itx::before {
    /* Strengthen the gold poles, drop the purple — the section now
       owns the warm/amber palette to contrast with the cool purple
       sections around it. */
    background:
      radial-gradient(ellipse 75% 45% at 20% 30%, rgba(245, 220, 148, 0.16), transparent 65%),
      radial-gradient(ellipse 65% 40% at 80% 70%, rgba(226, 192, 107, 0.13), transparent 65%);
  }
}
.mm-marketing .mm-itx-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 899px) {
  .mm-marketing .mm-itx-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.mm-marketing .mm-itx-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: 12px;
  white-space: nowrap;
}
.mm-marketing .mm-itx-headline {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.022em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.mm-marketing .mm-itx-headline .gold {
  /* keep "in-theater advertising" together on one line — break before it, not inside it */
  white-space: nowrap;
}
.mm-marketing .mm-itx-lead {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 20px;
  max-width: 56ch;
}
.mm-marketing .mm-itx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.mm-marketing .mm-itx-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px;
  align-items: baseline;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
.mm-marketing .mm-itx-roman {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #E2C06B;
}

/* Stage / cycler */
.mm-marketing .mm-itx-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.mm-marketing .mm-itx-slides {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4 / 3;
}
.mm-marketing .mm-itx-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 12px;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.mm-marketing .mm-itx-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.mm-marketing .mm-itx-caption {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}
.mm-marketing .mm-itx-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* QR overlay — same shape on every placement */
.mm-marketing .mm-itx-qr {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 30%;
  max-width: 64px;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 3px;
  padding: 3%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm-marketing .mm-itx-qr-svg { width: 100%; height: 100%; display: block; }

.mm-marketing .mm-itx-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.25) 0%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.08) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ---- Scene 1: EXTERIOR — marquee + entrance + poster cases --------- */
.mm-marketing .mm-itx-exterior {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #0d0a18 0%, #1a1228 60%, #0a0712 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.mm-marketing .mm-itx-marquee {
  position: relative;
  height: 22%;
  background: linear-gradient(180deg, #b68f3a 0%, #e2c06b 40%, #FFE5A8 70%, #b68f3a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 12px rgba(226, 192, 107, 0.4);
}
.mm-marketing .mm-itx-marquee-bulbs {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.95) 1.5px, transparent 2.5px);
  background-size: 14px 14px;
  background-position: 7px 4px;
  opacity: 0.5;
  pointer-events: none;
}
.mm-marketing .mm-itx-marquee-text {
  position: relative;
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 900;
  font-size: clamp(14px, 1.9vw, 22px);
  letter-spacing: 0.18em;
  color: #1a0e00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.mm-marketing .mm-itx-exterior-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 8px;
  height: 62%;
  padding: 10px;
}
.mm-marketing .mm-itx-case {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: #0A0A0E;
  box-shadow:
    0 0 0 3px #1a1a22,
    0 0 0 4px rgba(255, 255, 255, 0.06),
    0 16px 28px rgba(0, 0, 0, 0.6);
}
.mm-marketing .mm-itx-entrance {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, #1a1a22 0%, #050507 100%);
  padding: 8px 6px;
  align-self: stretch;
}
.mm-marketing .mm-itx-entrance-door {
  position: relative;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(226, 192, 107, 0.18) 0%, rgba(0, 0, 0, 0.6) 100%);
  border: 1px solid rgba(226, 192, 107, 0.3);
}
.mm-marketing .mm-itx-entrance-door::after {
  content: '';
  position: absolute;
  inset: 8% 28% 8% 28%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 60%);
  border-radius: 2px;
}
.mm-marketing .mm-itx-sidewalk {
  position: relative;
  height: 16%;
  background: linear-gradient(180deg, #14111c 0%, #050507 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---- Shared lobby env ---------------------------------------------- */
.mm-marketing .mm-itx-lobby {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #0c0a14 0%, #181323 60%, #08060e 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  display: grid;
  grid-template-rows: 26% 1fr 18%;
}
.mm-marketing .mm-itx-ceiling {
  background:
    linear-gradient(180deg, rgba(226, 192, 107, 0.18) 0%, transparent 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 60px);
}
.mm-marketing .mm-itx-floor {
  position: relative;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%),
    linear-gradient(0deg, #14111c 0%, #1f1a2d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.mm-marketing .mm-itx-floor--warm {
  position: relative;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.65) 100%),
    linear-gradient(0deg, #1b1408 0%, #2a1f10 100%);
}
.mm-marketing .mm-itx-spilled-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.mm-marketing .mm-itx-lobby--warm {
  background: linear-gradient(180deg, #1a1408 0%, #2a1f10 50%, #08060e 100%);
}

/* ---- Scene 2: AUDITORIUM perspective with seats descending to the screen ---- */
.mm-marketing .mm-itx-auditorium {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #050308;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.mm-marketing .mm-itx-aud-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.mm-marketing .mm-itx-side-digital {
  position: absolute;
  z-index: 3;
  width: 24%;
  aspect-ratio: 2 / 3;
}
/* Wall perspective: near edge stays anchored to the front (viewer side),
   far edge rotates back into the wall, matching the trapezoidal wall shape. */
.mm-marketing .mm-itx-side-digital--l {
  left: 4%;
  top: 30%;
  transform: perspective(900px) rotateY(58deg);
  transform-origin: left center;
}
.mm-marketing .mm-itx-side-digital--r {
  right: 4%;
  top: 30%;
  transform: perspective(900px) rotateY(-58deg);
  transform-origin: right center;
}
.mm-marketing .mm-itx-aud-rows {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.mm-marketing .mm-itx-aud-row {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: 3%;
}
.mm-marketing .mm-itx-aud-seat {
  position: relative;
  aspect-ratio: 1 / 1.1;
  border-radius: 5px 5px 1px 1px;
  background: linear-gradient(180deg, #3a2050 0%, #1a0e22 55%, #08060e 100%);
  box-shadow:
    inset 0 -2px 0 rgba(255, 255, 255, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.55);
}
.mm-marketing .mm-itx-aud-seat::before {
  content: '';
  position: absolute;
  inset: 16% 22% auto 22%;
  height: 36%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent);
  border-radius: 3px;
}
.mm-marketing .mm-itx-digital {
  position: relative;
  width: 100%;
  height: 100%;
}
.mm-marketing .mm-itx-digital--secondary { transform: scale(0.82); transform-origin: bottom center; opacity: 0.88; }
.mm-marketing .mm-itx-digital-bezel {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(145deg, #2a2a32 0%, #0e0e14 60%, #1a1a22 100%);
  padding: 6px;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.7),
    0 0 0 1.5px rgba(255, 255, 255, 0.06) inset,
    0 0 60px rgba(150, 90, 220, 0.35);
}
.mm-marketing .mm-itx-digital-bezel > .mm-itx-art { border-radius: 4px; }
.mm-marketing .mm-itx-digital-scan {
  position: absolute;
  inset: 6px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
  border-radius: 4px;
  pointer-events: none;
  animation: mmItxScan 4s linear infinite;
}
@keyframes mmItxScan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
.mm-marketing .mm-itx-digital-glow {
  position: absolute;
  inset: -12%;
  background: radial-gradient(closest-side, rgba(150, 90, 220, 0.45), transparent 70%);
  filter: blur(36px);
  z-index: -1;
  pointer-events: none;
}

/* ---- Scene 3: STANDEES — lobby + concessions + popcorn + soda ------ */
.mm-marketing .mm-itx-concessions {
  position: relative;
  margin: 0 12px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #5a3a14 0%, #3b2a14 60%, #1a1208 100%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 8px 10px 6px;
  gap: 4px;
}
.mm-marketing .mm-itx-concessions-glow {
  position: absolute;
  inset: -20% -10% -10% -10%;
  background: radial-gradient(closest-side, rgba(255, 196, 80, 0.4), transparent 70%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}
.mm-marketing .mm-itx-concessions-label {
  position: relative;
  z-index: 1;
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: #FFE5A8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.mm-marketing .mm-itx-menu-board {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 70%;
}
.mm-marketing .mm-itx-menu-board span {
  flex: 1;
  height: 6px;
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.mm-marketing .mm-itx-standee-row {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr 0.9fr;
  gap: 10px;
  padding: 8px 16px 0;
  align-items: end;
  justify-items: center;
}
.mm-marketing .mm-itx-standee {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mm-marketing .mm-itx-standee-shape {
  position: relative;
  width: 92%;
  height: 100%;
  border-radius: 10px 10px 4px 4px;
  overflow: hidden;
  background: #0A0A0E;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.6);
  transform: perspective(900px) rotateY(-8deg);
  transform-origin: bottom center;
}
.mm-marketing .mm-itx-standee-shadow {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 70%;
  height: 12px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
  transform: translateX(-50%);
  filter: blur(3px);
}

/* ---- Concessions layout (CSS art, popcorn.jpg essence) ------------ */
.mm-marketing .mm-itx-concessions-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  padding: 8px 24px 0;
  height: 100%;
}

/* POPCORN BUCKET — bright red+white stripes, popcorn overflowing the top */
.mm-marketing .mm-itx-popcorn {
  position: relative;
  flex: 0 0 auto;
  width: 56%;
  max-width: 210px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.mm-marketing .mm-itx-pop-mound {
  width: 100%;
  height: 17%;
  margin-bottom: -7%;
  /* sit BEHIND the bucket so the lower half of the kernels reads as "inside" the tub */
  position: relative;
  z-index: 0;
  overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}
.mm-marketing .mm-itx-pop-bucket {
  position: relative;
  width: 100%;
  height: 70%;
  /* near-cylindrical tub — sides almost parallel, very slight inward taper */
  clip-path: polygon(2% 0, 98% 0, 95% 100%, 5% 100%);
  background:
    /* edge shading for cylindrical feel */
    linear-gradient(90deg, rgba(0,0,0,0.32) 0%, transparent 14%, transparent 86%, rgba(0,0,0,0.38) 100%),
    /* slight bottom darkening */
    linear-gradient(180deg, transparent 80%, rgba(0,0,0,0.18) 100%),
    /* bright red + white vertical stripes */
    repeating-linear-gradient(90deg, #e6242c 0 16.66%, #ffffff 16.66% 33.33%);
  box-shadow: 0 14px 22px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
/* rolled paper rim at the top of the tub */
.mm-marketing .mm-itx-pop-bucket::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7%;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.18) 55%, rgba(255,255,255,0.25) 100%);
  pointer-events: none;
  z-index: 1;
}
.mm-marketing .mm-itx-pop-bucket::before {
  /* soft center highlight — cylinder curve hint */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 100% at 50% 50%, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.mm-marketing .mm-itx-pop-poster {
  position: absolute;
  /* Sized to a 2:3 movie-poster aspect, filling the front face of the bucket */
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  width: 62%;
  aspect-ratio: 2 / 3;
  max-height: 90%;
  z-index: 1;
  overflow: hidden;
  background: #0A0A0E;
  border-radius: 1px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  /* cylindrical shading so the poster reads as wrapped flat on the curve */
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, #000 22%, #000 78%, rgba(0,0,0,0.55) 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, #000 22%, #000 78%, rgba(0,0,0,0.55) 100%);
}
.mm-marketing .mm-itx-pop-poster img {
  width: 100%;
  height: 100%;
  /* show the entire poster image */
  object-fit: contain;
  display: block;
}
.mm-marketing .mm-itx-pop-qr {
  position: absolute;
  /* bottom-right corner inside the poster */
  bottom: 5%;
  right: 6%;
  width: 28%;
  max-width: 32px;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 2px;
  padding: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
  z-index: 3;
}
.mm-marketing .mm-itx-pop-spilled {
  position: absolute;
  bottom: -2%;
  left: -10%;
  width: 120%;
  height: 14%;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}

/* CUP — solid red with flat lid and white straw poking out the top */
.mm-marketing .mm-itx-cup {
  position: relative;
  flex: 0 0 auto;
  width: 26%;
  max-width: 104px;
  height: 72%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.mm-marketing .mm-itx-cup-straw {
  position: absolute;
  /* clearly protrudes above the lid */
  top: -14%;
  left: 56%;
  width: 5.5%;
  height: 28%;
  background: linear-gradient(90deg, #b8b8b8 0%, #ffffff 50%, #b8b8b8 100%);
  transform: translateX(-50%) rotate(8deg);
  transform-origin: bottom center;
  border-radius: 2px;
  z-index: 2;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}
.mm-marketing .mm-itx-cup-lid {
  position: relative;
  width: 108%;
  height: 6%;
  /* flat plastic lid — thin disc, slight perspective oval */
  background: linear-gradient(180deg, #e0242c 0%, #c8232a 35%, #8e1820 100%);
  border-radius: 50% / 35%;
  box-shadow:
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 2px 3px rgba(0, 0, 0, 0.35);
  margin-bottom: -2%;
  z-index: 1;
}
.mm-marketing .mm-itx-cup-lid::before {
  /* straw hole (dark dot) */
  content: '';
  position: absolute;
  top: 32%;
  left: 56%;
  width: 7%;
  height: 38%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.65), transparent 70%);
  border-radius: 50%;
  transform: translateX(-50%);
}
.mm-marketing .mm-itx-cup-body {
  position: relative;
  width: 100%;
  height: 86%;
  /* slight taper, wider at top */
  clip-path: polygon(4% 0, 96% 0, 88% 100%, 12% 100%);
  background:
    /* cylinder shading */
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 10%, transparent 88%, rgba(0,0,0,0.35) 100%),
    /* solid red with side-to-side curve */
    linear-gradient(90deg, #8e1820 0%, #c8232a 22%, #e63a44 48%, #c8232a 74%, #8e1820 100%);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.mm-marketing .mm-itx-cup-body::before {
  content: '';
  position: absolute;
  left: 22%;
  top: 7%;
  bottom: 9%;
  width: 4%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.08));
  border-radius: 3px;
  filter: blur(0.5px);
}
.mm-marketing .mm-itx-cup-poster {
  position: absolute;
  /* 2:3 poster filling the front face of the cup */
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  width: 60%;
  aspect-ratio: 2 / 3;
  max-height: 86%;
  z-index: 1;
  overflow: hidden;
  background: #0A0A0E;
  border-radius: 1px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, #000 22%, #000 78%, rgba(0,0,0,0.55) 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, #000 22%, #000 78%, rgba(0,0,0,0.55) 100%);
}
.mm-marketing .mm-itx-cup-poster img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.mm-marketing .mm-itx-cup-qr {
  position: absolute;
  bottom: 4%;
  right: 4%;
  width: 26%;
  max-width: 24px;
  z-index: 3;
}

/* Dots */
.mm-marketing .mm-itx-dots {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.mm-marketing .mm-itx-dot {
  appearance: none;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  width: 24px;
  height: 4px;
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  transition: background 240ms ease, width 240ms ease;
}
.mm-marketing .mm-itx-dot:hover { background: rgba(255, 255, 255, 0.35); }
.mm-marketing .mm-itx-dot.is-active {
  background: #E2C06B;
  width: 36px;
}

/* ============================================================
   BENEFITS — sits under the in-theater advertising section
   ============================================================ */
.mm-marketing .mm-ben {
  position: relative;
  isolation: isolate;
  background: var(--mm-ink, #0A0A0E);
  color: var(--mm-fg1, #f5f1e6);
  /* 8px grid — same clamp as every other section for consistent
     vertical rhythm. */
  padding: clamp(80px, 10vw, 120px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
/* Dramatic ambient lighting — large soft gold bloom behind the headline,
   a cooler secondary glow off-axis, and a faint vignette to pull focus. */
.mm-marketing .mm-ben::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  max-width: 1400px;
  aspect-ratio: 2 / 1;
  background:
    radial-gradient(ellipse 55% 55% at 50% 40%, rgba(226, 192, 107, 0.28) 0%, rgba(226, 192, 107, 0.12) 28%, rgba(226, 192, 107, 0.04) 50%, transparent 72%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.mm-marketing .mm-ben::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  max-width: 820px;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(120, 80, 200, 0.28) 0%, rgba(120, 80, 200, 0.10) 40%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  /* starts off-axis bottom-right + smaller + dim, then travels to center on scroll-in */
  transform: translate(35%, 38%) scale(0.7);
  opacity: 0.55;
  transition:
    transform 1600ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1400ms ease-out;
}
.mm-marketing .mm-ben.is-in-view::after {
  transform: translate(-50%, -50%) scale(1.15);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .mm-marketing .mm-ben::after {
    transition: none;
  }
}
.mm-marketing .mm-ben-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  /* 8px grid — mobile gutter sits at 24px. */
  padding: 0 clamp(24px, 4vw, 64px);
}
.mm-marketing .mm-ben-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vw, 72px);
}
.mm-marketing .mm-ben-eyebrow {
  /* base type — pill chrome comes from the global rule in index.css */
  font-family: 'Inter', -apple-system, sans-serif;
  margin-bottom: 18px;
}
.mm-marketing .mm-ben-headline {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.18;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
  color: var(--mm-fg1, #f5f1e6);
}
.mm-marketing .mm-ben-headline .gold {
  background: linear-gradient(92deg, var(--mm-gold-bright, #f5dc94), var(--mm-gold, #e2c06b) 55%, var(--mm-gold-deep, #a97b1e));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

/* Flex layout so the last partial row centers instead of left-aligning */
.mm-marketing .mm-ben-list {
  list-style: none;
  margin: 0 0 clamp(40px, 5vw, 56px);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 2vw, 24px);
}
.mm-marketing .mm-ben-item {
  position: relative;
  /* three across on desktop — width = (100% - 2*gap) / 3 */
  flex: 0 1 calc((100% - 2 * clamp(16px, 2vw, 24px)) / 3);
  min-width: 240px;
  padding: clamp(28px, 2.8vw, 36px) clamp(22px, 2.2vw, 28px) clamp(22px, 2.4vw, 28px);
  /* Editorial card, not a button: soft frosted surface, no border, no hover */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border-radius: 14px;
  overflow: hidden;
}
/* Thin gold accent strip across the top — like a film leader */
.mm-marketing .mm-ben-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(226, 192, 107, 0.65), transparent);
  pointer-events: none;
}
/* Big numbered watermark — typographic flourish in the corner */
.mm-marketing .mm-ben-item-num {
  position: absolute;
  top: -6px;
  right: 10px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 900;
  font-size: clamp(64px, 6.5vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  background: linear-gradient(180deg, rgba(226, 192, 107, 0.22) 0%, rgba(226, 192, 107, 0.04) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
}
/* tablet — 2 across */
@media (max-width: 960px) {
  .mm-marketing .mm-ben-item {
    flex: 0 1 calc((100% - clamp(16px, 2vw, 24px)) / 2);
  }
}
/* mobile — 1 across */
@media (max-width: 600px) {
  .mm-marketing .mm-ben-item {
    flex: 0 1 100%;
    min-width: 0;
  }
}
.mm-marketing .mm-ben-item-title {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--mm-gold, #E2C06B);
}
.mm-marketing .mm-ben-item-desc {
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.mm-marketing .mm-ben-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(8px, 1.5vw, 16px);
}