/* ==========================================================================
   MadMooze v2 — gold & obsidian layer
   --------------------------------------------------------------------------
   Loaded AFTER css/styles.css and scoped to `body.mm-v2`, so any page that
   opts in gets the new look and every other page is untouched. Colours come
   from the tokens in styles.css :root — add tokens there, not hexes here.
   ========================================================================== */

body.mm-v2 {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(232, 183, 63, 0.10), transparent 70%),
    var(--mm-bg);
}

/* Film grain — one inline SVG, no extra request. Keeps large flat blacks
   from banding on wide gamut displays. */
/* No blend mode here on purpose: a fixed full-page layer with soft-light
   forces the whole document into one compositing group and makes scrolling
   janky on modest GPUs. Plain low opacity reads the same at this scale. */
body.mm-v2::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

body.mm-v2 > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Header — transparent over the hero, solidifies on scroll
   -------------------------------------------------------------------------- */
body.mm-v2 .site-header {
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  transition: background 0.4s var(--mm-ease), border-color 0.4s var(--mm-ease),
    backdrop-filter 0.4s var(--mm-ease);
}

body.mm-v2 .site-header.is-stuck {
  background: rgba(8, 7, 10, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--mm-border);
}

/* Gold hairline that fades in with the header background */
body.mm-v2 .site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--mm-hairline-gold);
  opacity: 0;
  transition: opacity 0.4s var(--mm-ease);
}

body.mm-v2 .site-header.is-stuck::after {
  opacity: 1;
}

body.mm-v2 .nav a:not(.btn) {
  position: relative;
  color: var(--mm-text-muted);
  transition: color 0.2s var(--mm-ease);
}

body.mm-v2 .nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1.5px;
  background: var(--mm-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--mm-ease);
}

body.mm-v2 .nav a:not(.btn):hover,
body.mm-v2 .nav a[aria-current="page"] {
  color: var(--mm-text);
}

body.mm-v2 .nav a:not(.btn):hover::after,
body.mm-v2 .nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Header brand lockup: faceted mark + chrome wordmark */
body.mm-v2 .brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

body.mm-v2 .brand-lockup img.mark {
  height: clamp(36px, 3.2vw, 46px);
  width: auto;
  filter: drop-shadow(0 0 14px rgba(232, 183, 63, 0.35));
  transition: filter 0.3s var(--mm-ease), transform 0.3s var(--mm-ease);
}

body.mm-v2 .brand-lockup:hover img.mark {
  filter: drop-shadow(0 0 22px rgba(232, 183, 63, 0.6));
  transform: translateY(-1px) rotate(-2deg);
}

body.mm-v2 .brand-lockup img.wordmark {
  height: clamp(22px, 2vw, 28px);
  width: auto;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.mm-hero {
  position: relative;
  isolation: isolate;
  min-height: min(92vh, 900px);
  display: flex;
  align-items: center;
  padding: calc(var(--mm-header-h) + 4rem) 0 5rem;
  overflow: hidden;
}

/* Layer 1 — cinematic gold-shaft plate, parallaxed */
.mm-hero-bg {
  position: absolute;
  inset: -12% 0 -12%;
  z-index: -3;
  background: url("../assets/brand/hero-ambient.webp") center / cover no-repeat;
  opacity: 0.55;
  will-change: transform;
}

/* Layer 2 — veil that pins contrast under the copy and fades the plate out
   at the bottom so the next section starts from true black */
.mm-hero-veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(100deg, rgba(8, 7, 10, 0.96) 18%, rgba(8, 7, 10, 0.55) 52%, rgba(8, 7, 10, 0.8) 100%),
    linear-gradient(to bottom, rgba(8, 7, 10, 0.9) 0%, transparent 22%, transparent 62%, var(--mm-bg) 100%);
}

.mm-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.mm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mm-gold);
  margin: 0 0 1.5rem;
}

.mm-eyebrow::before {
  content: "";
  width: clamp(24px, 3vw, 42px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mm-gold));
}

.mm-display {
  font-family: var(--mm-display);
  font-size: clamp(2.7rem, 6.2vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

/* Molten-gold word. Falls back to solid gold where background-clip is out. */
.mm-gold-text {
  color: var(--mm-gold);
  background: linear-gradient(100deg, #fff0c4 0%, var(--mm-gold) 38%, #b8821f 62%, #ffe6a3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 220% 100%;
}

/* Chrome word, matching the "Mad" in the wordmark */
.mm-chrome-text {
  color: var(--mm-chrome);
  background: var(--mm-grad-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mm-hero .lead {
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  color: var(--mm-text-muted);
  max-width: 34rem;
  margin-bottom: 2.25rem;
}

.mm-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  margin-bottom: 2.75rem;
}

.mm-btn-lg {
  min-height: 56px;
  padding: 0.9rem 1.85rem;
  font-size: 1rem;
}

/* Hero art — the faceted mark, lit and slowly breathing */
.mm-hero-art {
  position: relative;
  display: grid;
  place-items: center;
}

.mm-hero-art img {
  width: min(100%, 460px);
  height: auto;
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 60px rgba(232, 183, 63, 0.28));
  animation: mm-float 9s ease-in-out infinite;
}

/* Halo behind the mark */
.mm-hero-art::before {
  content: "";
  position: absolute;
  width: min(78%, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 183, 63, 0.3), transparent 65%);
  filter: blur(40px);
  animation: mm-pulse 7s ease-in-out infinite;
}

@keyframes mm-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(1.2deg); }
}

@keyframes mm-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.08); }
}

/* --------------------------------------------------------------------------
   Product strip — the five marks, sitting under the hero
   -------------------------------------------------------------------------- */
.mm-strip {
  border-top: 1px solid var(--mm-border);
  border-bottom: 1px solid var(--mm-border);
  background: rgba(255, 255, 255, 0.015);
}

.mm-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 4vw, 3rem);
  padding: 1.5rem 0;
}

.mm-strip-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mm-text-dim);
  white-space: nowrap;
}

.mm-strip-marks {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  flex-wrap: wrap;
}

.mm-strip-marks a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--mm-text-dim);
  transition: color 0.25s var(--mm-ease), transform 0.25s var(--mm-ease);
}

.mm-strip-marks a:hover {
  color: var(--mm-text);
  transform: translateY(-2px);
}

.mm-strip-marks img {
  height: 28px;
  width: 28px;
  object-fit: contain;
  filter: opacity(0.75);
  transition: filter 0.25s var(--mm-ease);
}

.mm-strip-marks a:hover img {
  filter: none;
}

/* --------------------------------------------------------------------------
   Section furniture
   -------------------------------------------------------------------------- */
.mm-section {
  padding: clamp(5rem, 9vw, 8.5rem) 0;
  position: relative;
}

.mm-section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.mm-section-head.center {
  margin-inline: auto;
  text-align: center;
}

.mm-section-head.center .mm-eyebrow {
  justify-content: center;
}

.mm-section-head h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  letter-spacing: -0.035em;
  margin-bottom: 1rem;
  text-wrap: balance;
}

.mm-section-head p {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--mm-text-muted);
  margin: 0;
}

.mm-rule {
  height: 1px;
  background: var(--mm-hairline-gold);
  opacity: 0.45;
}

/* --------------------------------------------------------------------------
   Product showcase
   -------------------------------------------------------------------------- */
.mm-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.mm-showcase .mm-pcard-wide {
  grid-column: span 2;
}

.mm-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.mm-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--mm-radius-lg);
  border: 1px solid var(--mm-border);
  background: linear-gradient(180deg, var(--mm-surface), var(--mm-bg-elevated));
  transition: transform 0.45s var(--mm-ease), border-color 0.45s var(--mm-ease),
    box-shadow 0.45s var(--mm-ease);
  will-change: transform;
}

.mm-pcard:hover {
  transform: translateY(-6px);
  border-color: var(--mm-border-strong);
  box-shadow: var(--mm-shadow-lift);
}

/* Gold edge that lights up on hover */
.mm-pcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(232, 183, 63, 0.65), transparent 45%, rgba(217, 221, 226, 0.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s var(--mm-ease);
  pointer-events: none;
}

.mm-pcard:hover::after {
  opacity: 1;
}

/* Card artwork — key art bleeds in and fades into the card body */
.mm-pcard-art {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* The product art is key art, not screenshots — a wordmark cropped in half
   reads as a mistake. `contain` shows each piece whole; the artwork's own
   black ground makes the letterboxing invisible. */
.mm-pcard-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.8s var(--mm-ease);
}

.mm-pcard:hover .mm-pcard-art img {
  transform: scale(1.035);
}

.mm-pcard-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 52%, rgba(20, 18, 26, 0.7) 84%, var(--mm-surface) 100%);
}

/* Coverant's key art is light — this keeps it in the same night-time register
   as the rest of the wall without touching the source file. */
.mm-pcard-art.is-light img {
  filter: brightness(0.82) saturate(1.05);
}

.mm-pcard-body {
  position: relative;
  z-index: 1;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: -2.5rem;
}

.mm-pcard-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.mm-pcard-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--mm-border);
  padding: 5px;
  flex-shrink: 0;
}

.mm-pcard-name {
  font-family: var(--mm-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.mm-pcard h3 {
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  margin: 0 0 0.7rem;
  letter-spacing: -0.025em;
}

.mm-pcard p {
  color: var(--mm-text-muted);
  margin: 0 0 1.25rem;
  font-size: 0.97rem;
}

.mm-pcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
}

.mm-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--mm-border-strong);
  color: var(--mm-gold);
  background: var(--mm-accent-soft);
}

.mm-tag.beta {
  color: var(--mm-chrome);
  border-color: rgba(217, 221, 226, 0.25);
  background: rgba(217, 221, 226, 0.08);
}

.mm-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mm-text-dim);
  transition: color 0.3s var(--mm-ease), gap 0.3s var(--mm-ease);
}

.mm-pcard:hover .mm-arrow {
  color: var(--mm-gold);
  gap: 0.7rem;
}

/* --------------------------------------------------------------------------
   Principles — numbered, hairline-separated
   -------------------------------------------------------------------------- */
.mm-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--mm-border);
}

.mm-principle {
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.25rem, 2.5vw, 2.25rem);
  border-right: 1px solid var(--mm-border);
  border-bottom: 1px solid var(--mm-border);
  position: relative;
  transition: background 0.4s var(--mm-ease);
}

.mm-principle:last-child {
  border-right: none;
}

.mm-principle:hover {
  background: rgba(232, 183, 63, 0.03);
}

.mm-principle-num {
  font-family: var(--mm-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--mm-gold);
  opacity: 0.7;
  margin-bottom: 1.5rem;
  display: block;
}

.mm-principle h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.mm-principle p {
  color: var(--mm-text-muted);
  margin: 0;
  font-size: 0.96rem;
}

/* --------------------------------------------------------------------------
   Studio band — the non-software side of the business
   -------------------------------------------------------------------------- */
.mm-studio {
  position: relative;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(232, 183, 63, 0.08), transparent 65%),
    linear-gradient(180deg, var(--mm-bg-elevated), var(--mm-bg));
  border-top: 1px solid var(--mm-border);
  border-bottom: 1px solid var(--mm-border);
}

.mm-studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.mm-studio-list {
  display: grid;
  gap: 0.75rem;
}

.mm-studio-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.35rem 1.5rem;
  border-radius: var(--mm-radius);
  border: 1px solid var(--mm-border);
  background: rgba(255, 255, 255, 0.02);
  transition: transform 0.35s var(--mm-ease), border-color 0.35s var(--mm-ease),
    background 0.35s var(--mm-ease);
}

.mm-studio-item:hover {
  transform: translateX(6px);
  border-color: var(--mm-border-strong);
  background: rgba(232, 183, 63, 0.04);
}

.mm-studio-item .mm-si-text {
  flex: 1;
  min-width: 0;
}

.mm-studio-item h3 {
  font-size: 1.08rem;
  margin: 0 0 0.3rem;
}

.mm-studio-item p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--mm-text-muted);
}

.mm-studio-item .mm-si-arrow {
  color: var(--mm-text-dim);
  transition: color 0.35s var(--mm-ease), transform 0.35s var(--mm-ease);
  flex-shrink: 0;
}

.mm-studio-item:hover .mm-si-arrow {
  color: var(--mm-gold);
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.mm-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--mm-radius-lg);
  border: 1px solid var(--mm-border-strong);
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(232, 183, 63, 0.16), transparent 70%),
    linear-gradient(180deg, var(--mm-surface), var(--mm-bg-elevated));
}

.mm-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--mm-hairline-gold);
}

.mm-cta h2 {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  margin-bottom: 1rem;
  text-wrap: balance;
}

.mm-cta p {
  color: var(--mm-text-muted);
  max-width: 34rem;
  margin: 0 auto 2rem;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

.mm-cta .mm-cta-row {
  justify-content: center;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Motion — reveal on scroll
   -------------------------------------------------------------------------- */
/* Scoped to html.js — the class is set by an inline script in <head>. With
   JavaScript off the class never lands, so .reveal stays fully visible and
   the page reads normally instead of rendering blank.

   The shown state must carry MORE specificity than the hidden state (html +
   three classes vs html + two), or .is-in loses the cascade and every reveal
   element sits at opacity 0 forever — an invisible site that still looks
   correct in the DOM. That exact bug shipped once; don't reintroduce it. */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--mm-ease), transform 0.8s var(--mm-ease);
}

html.js .reveal.is-in,
.reveal.is-in {
  opacity: 1;
  transform: none;
}

.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .mm-hero {
    min-height: auto;
    padding: calc(var(--mm-header-h) + 2.5rem) 0 3.5rem;
  }

  .mm-hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .mm-hero-art {
    order: -1;
  }

  .mm-hero-art img {
    width: min(58%, 280px);
  }

  .mm-hero-veil {
    background:
      linear-gradient(180deg, rgba(8, 7, 10, 0.72) 0%, rgba(8, 7, 10, 0.88) 45%, var(--mm-bg) 100%);
  }

  .mm-studio-grid,
  .mm-showcase,
  .mm-grid-3 {
    grid-template-columns: 1fr;
  }

  .mm-showcase .mm-pcard-wide {
    grid-column: auto;
  }

  .mm-pcard-wide .mm-pcard-art {
    aspect-ratio: 16 / 8;
  }

  .mm-principles {
    grid-template-columns: 1fr;
  }

  .mm-principle {
    border-right: none;
  }
}

@media (max-width: 640px) {
  .mm-strip-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .mm-strip-marks {
    gap: 1.1rem;
  }

  .mm-cta-row .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — everything above degrades to a static, legible page
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mm-hero-art img,
  .mm-hero-art::before {
    animation: none;
  }

  html.js .reveal,
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mm-hero-bg {
    transform: none !important;
  }

  .mm-pcard:hover,
  .mm-studio-item:hover {
    transform: none;
  }
}

/* ==========================================================================
   Interior pages
   --------------------------------------------------------------------------
   Everything below applies the homepage's atmosphere to the existing
   `.hero` / `.card` / `.section` markup already on the other pages — no
   HTML restructuring required, so each page keeps its own content and
   product theme while sharing one visual language.
   ========================================================================== */

/* Interior hero — the same ambient gold plate, dialled well back so it reads
   as depth behind the type rather than as a picture. */
body.mm-v2 .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--mm-header-h) + clamp(3rem, 6vw, 5.5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

body.mm-v2 .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 7, 10, 0.62) 0%, rgba(8, 7, 10, 0.86) 55%, var(--mm-bg) 100%),
    url("../assets/brand/hero-ambient.webp") center / 150% auto no-repeat;
  opacity: 0.34;
  pointer-events: none;
}

/* Product pages recolour --mm-accent, so their hero glow follows the product
   rather than the studio gold. Keep that, just soften it. */
body.mm-v2 .hero::before {
  opacity: 0.85;
}

body.mm-v2 .hero h1 {
  font-family: var(--mm-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Cards — match the lift and gold edge from the homepage product wall */
body.mm-v2 .card,
body.mm-v2 .price-card,
body.mm-v2 .score-card,
body.mm-v2 .flow-card,
body.mm-v2 .compare-card {
  transition: transform 0.4s var(--mm-ease), border-color 0.4s var(--mm-ease),
    box-shadow 0.4s var(--mm-ease), background 0.4s var(--mm-ease);
}

body.mm-v2 .card:hover,
body.mm-v2 .card-link:hover {
  transform: translateY(-4px);
  border-color: var(--mm-border-strong);
  box-shadow: var(--mm-shadow-lift);
}

/* Section headings pick up the display face and gold eyebrow rule */
body.mm-v2 .section-head h2,
body.mm-v2 .cta-band h2 {
  font-family: var(--mm-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Steps and stats get a gold numeral, matching the homepage principles */
body.mm-v2 .step-num {
  background: var(--mm-grad-gold);
  color: var(--mm-gold-ink);
  border: none;
}

body.mm-v2 .stat strong,
body.mm-v2 .quote-stat strong,
body.mm-v2 .price {
  font-family: var(--mm-display);
}

/* Footer — a gold hairline instead of a flat grey rule */
body.mm-v2 .site-footer {
  position: relative;
  border-top: 1px solid var(--mm-border);
}

body.mm-v2 .site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--mm-hairline-gold);
  opacity: 0.5;
}

/* Partner and affiliation logo walls read better lightly knocked back on a
   warm-black ground, then brought to full strength on hover. */
body.mm-v2 .partner-logo img,
body.mm-v2 .affiliation-logo img {
  filter: opacity(0.8);
  transition: filter 0.3s var(--mm-ease);
}

body.mm-v2 .partner-logo:hover img,
body.mm-v2 .affiliation-logo:hover img {
  filter: none;
}