@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..500;1,6..72,200..400&display=swap');

/* ==========================================================================
   MORINGA MEDIA TECH — main.css
   One stylesheet. Load after bootstrap.min.css and nothing else.

   CONTENTS
     01  Tokens ................ colour, type, space, shape (:root)
     02  Legacy aliases ........ old variable names kept alive
     03  Bootstrap bridge ...... points Bootstrap's vars at our tokens
     04  Base .................. reset and element defaults
     05  Typography ............ .mm-display, .mm-heading, .mm-body ...
     06  Buttons ............... .btn overrides and .mm-btn
     07  Layout ................ container, section, bands
     08  Frames ................ media containers, cross-fade layers
     09  Cards ................. perk, stat, tile button
     10  Strips ................ notice bar, marquee, chips
     11  Placeholder visuals ... delete when Figma artwork lands
     12  Navbar
     13  Footer
     14  Home view ............. hero, sticky slider
     15  Shared view parts ..... fx frames, FAQ, contact CTA, forms
     16  Accessibility
     17  Legal page

   RULE OF THUMB: no raw hex below section 01. If you need a colour, add a
   token. That is what makes re-theming a one-block edit.
   ========================================================================== */


/* ==========================================================================
   01  TOKENS
   ========================================================================== */
:root {

  /* --- brand ramp, sampled from the Moringa leaf mark ------------------- */
  --mm-green-950: #05130E;
  /* near-black with a green cast — dark bands  */
  --mm-green-900: #072A1F;
  --mm-green-800: #0B4A36;
  --mm-green-700: #0E6B4C;
  /* darkest usable for TEXT and solid buttons  */
  --mm-green-600: #128A61;
  --mm-green-500: #16B67F;
  /* mid brand green — body of the mark         */
  --mm-green-400: #10CE8E;
  /* SMALL ACCENTS ONLY — dots, rings, gradient */
  --mm-green-300: #0FE39F;
  /* stops on dark. Never a large light surface. */

  /* --- warm stone: all light surfaces ----------------------------------
       A saturated green at 95% lightness always reads mint, and mint reads
       clinical. Stone keeps the light end warm so the green stays an accent
       rather than becoming the whole environment. */
  --mm-stone-50: #FAF8F4;
  /* faintest wash — hovers, chips              */
  --mm-stone-100: #F2EEE7;
  /* tint surface — cards, media frames         */
  --mm-stone-200: #E6DFD4;
  --mm-stone-300: #D4CBBC;

  /* CONTRAST — these are requirements, not preferences
         --mm-green-700 on white ...... 5.8:1  OK for text and buttons
         white on --mm-green-700 ...... 5.8:1  OK for button labels
         --mm-green-500 on white ...... 2.9:1  large display text only
         --mm-green-300 on white ...... 1.8:1  NEVER text. Fills only.       */

  /* --- neutrals, warmed to sit on stone rather than mint ---------------- */
  --mm-paper: #F7F5F0;
  /* page background                            */
  --mm-white: #FFFFFF;
  --mm-ink: #101A16;
  /* primary text                               */
  --mm-ink-soft: #3A423D;
  /* secondary text                             */
  --mm-muted: #5A625C;
  /* body copy, captions                        */
  --mm-faint: #A0A49C;
  /* de-emphasised, body copy on dark           */
  --mm-line: #E4DDD2;
  /* hairlines and card borders                 */
  --mm-line-soft: #EFEAE2;

  /* --- semantic aliases: use THESE in rules, not the ramp --------------- */
  --mm-surface: var(--mm-white);
  --mm-surface-page: var(--mm-paper);
  --mm-surface-tint: var(--mm-stone-100);
  --mm-surface-wash: var(--mm-stone-50);
  --mm-surface-inverse: var(--mm-green-950);

  --mm-text: var(--mm-ink);
  --mm-text-secondary: var(--mm-ink-soft);
  --mm-text-muted: var(--mm-muted);
  --mm-text-on-inverse: var(--mm-white);
  --mm-text-muted-on-inverse: var(--mm-faint);
  --mm-text-link: var(--mm-green-700);
  --mm-text-link-hover: var(--mm-green-800);

  --mm-action: var(--mm-green-700);
  --mm-action-hover: var(--mm-green-800);
  --mm-action-label: var(--mm-white);
  --mm-emphasis: var(--mm-green-700);
  /* eyebrows, numerals —
                                   was green-500 at 2.9:1, which fails for
                                   14px uppercase text                       */
  --mm-focus-ring: var(--mm-green-500);
  /* decorative, exempt   */

  --mm-gradient-brand: linear-gradient(135deg, var(--mm-green-800), var(--mm-green-500));
  --mm-gradient-soft: linear-gradient(135deg, var(--mm-stone-200), var(--mm-stone-50));
  --mm-gradient-text: linear-gradient(90deg, var(--mm-green-200), var(--mm-green-400), var(--mm-green-300));
  --mm-gradient-deep:
    radial-gradient(60% 70% at 20% 20%, rgba(22, 182, 127, .38), transparent 60%),
    radial-gradient(70% 70% at 85% 80%, rgba(15, 227, 159, .28), transparent 60%),
    linear-gradient(140deg, #0B3427, #05130E);

  /* --- type ------------------------------------------------------------- */
  --mm-font-sans: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mm-font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;

  --mm-text-display: clamp(2.5rem, 6.4vw, 4.375rem);
  --mm-text-heading: clamp(1.875rem, 4.8vw, 3.75rem);
  --mm-text-title-lg: clamp(1.875rem, 3.2vw, 2.5rem);
  --mm-text-title-sm: clamp(1.25rem, 1.8vw, 1.5rem);
  --mm-text-lead: clamp(1.125rem, 1.4vw, 1.25rem);
  --mm-text-body: clamp(1rem, 1.1vw, 1.125rem);
  --mm-text-ui: 1rem;
  --mm-text-caption: .875rem;

  --mm-leading-tight: 1;
  --mm-leading-snug: 1.15;
  --mm-leading-body: 1.6;
  --mm-tracking-flat: -.01em;

  /* --- space ------------------------------------------------------------ */
  --mm-space-section: clamp(3.75rem, 9vw, 10rem);
  --mm-space-section-tight: clamp(3rem, 6vw, 6.25rem);
  --mm-space-block: clamp(1.5rem, 3vw, 2.5rem);
  --mm-container-max: 1312px;
  --mm-container-gutter: 16px;

  /* --- shape and depth --------------------------------------------------- */
  --mm-radius-hero: 26px;
  --mm-radius-lg: 24px;
  --mm-radius-md: 16px;
  --mm-radius-sm: 12px;
  --mm-radius-xs: 8px;
  --mm-radius-pill: 999rem;

  --mm-shadow-card: 0 1px 2px rgba(16, 26, 22, .04), 0 12px 32px -12px rgba(16, 26, 22, .12);
  --mm-shadow-lift: 0 20px 50px -24px rgba(16, 26, 22, .35);

  /* --- motion ------------------------------------------------------------ */
  --mm-ease: cubic-bezier(.4, 0, .2, 1);
  --mm-duration-fast: .18s;
  --mm-duration-mid: .3s;
  --mm-duration-slow: .55s;
}


/* ==========================================================================
     02  LEGACY ALIASES
     The older variable names, re-pointed at the current system. Existing views
     (FAQ, contact, membership) keep working and pick up the palette with no
     markup changes. Retire these as each view is migrated to --mm-*.
     ========================================================================== */
:root {
  --primary: var(--mm-green-700);
  --primary-hover: var(--mm-green-800);
  --accent: var(--mm-green-700);
  --accent-hover: var(--mm-green-800);

  --paper: var(--mm-paper);
  --light: var(--mm-stone-50);
  --lightgrey: var(--mm-line-soft);
  --white: var(--mm-white);

  --tint-blue: var(--mm-stone-100);
  --tint-clay: var(--mm-stone-50);
  --tint-sage: var(--mm-stone-100);
  --line: var(--mm-line);

  --dark: var(--mm-ink);
  --grey: var(--mm-muted);

  --fs-h1: var(--mm-text-display);
  --fs-h2: var(--mm-text-heading);
  --fs-h3: var(--mm-text-title-lg);
  --fs-h4: var(--mm-text-title-sm);
  --fs-h5: clamp(1.1rem, 3vw, 1.4rem);

  --fs-base: var(--mm-text-ui);
  --fs-md: .9rem;
  --fs-sm: var(--mm-text-caption);
  --fs-xs: .75rem;

  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;

  --section-p-xl: clamp(7em, 11vw, 13em);
  --section-p-lg: var(--mm-space-section);
  --section-p-base: clamp(3.5em, 7vw, 7em);
  --section-p-md: var(--mm-space-section-tight);
  --section-p-sm: clamp(2em, 3.5vw, 3.5em);
  --section-p-xs: clamp(1em, 2vw, 2em);
  --section-p-xxs: clamp(.5em, 1.5vw, 1.5em);

  --br-base: var(--mm-radius-md);
  --br-sm: var(--mm-radius-xs);
  --br-rd: var(--mm-radius-pill);
  --br-frame: 0;

  --transition: all var(--mm-duration-mid) ease-in-out;
  --transition-slow: all .4s ease-in-out;
}


/* ==========================================================================
     03  BOOTSTRAP BRIDGE
     Bootstrap 5.3 runs on its own CSS variables, so pointing them here means
     .btn-primary, .text-primary, .border and .link-primary inherit the brand
     with no Sass rebuild and no !important.
     ========================================================================== */
:root {
  --bs-primary: var(--mm-green-700);
  --bs-primary-rgb: 14, 107, 76;
  --bs-primary-text-emphasis: var(--mm-green-800);
  --bs-primary-bg-subtle: var(--mm-stone-100);
  --bs-primary-border-subtle: var(--mm-stone-200);

  --bs-body-color: var(--mm-ink);
  --bs-body-color-rgb: 16, 26, 22;
  --bs-body-bg: var(--mm-paper);
  --bs-secondary-color: var(--mm-muted);

  --bs-border-color: var(--mm-line);
  --bs-border-radius: var(--mm-radius-xs);
  --bs-border-radius-lg: var(--mm-radius-md);
  --bs-border-radius-xl: var(--mm-radius-lg);
  --bs-border-radius-pill: var(--mm-radius-pill);

  --bs-link-color: var(--mm-text-link);
  --bs-link-color-rgb: 14, 107, 76;
  --bs-link-hover-color: var(--mm-text-link-hover);

  --bs-font-sans-serif: var(--mm-font-sans);
  --bs-body-font-family: var(--mm-font-sans);
  --bs-focus-ring-color: rgba(22, 182, 127, .35);
}


/* ==========================================================================
   04  BASE
   ========================================================================== */
html {
  color: var(--mm-text);
}

/* clip, never hidden: `hidden` makes body a scroll container, which silently
   breaks every position:sticky on the site. Do not change this back. */
html, body {
  overflow-x: clip;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0 !important;
  font-family: var(--mm-font-sans);
  font-optical-sizing: auto;
  font-weight: 300;
  background: var(--mm-surface-page);
}

main {
  flex: 1;
}

img {
  max-width: 100%;
  height: auto;
}

section {
  position: relative;
  padding-block: var(--mm-space-section-tight);
}

.section-lg {
  padding-block: var(--mm-space-section);
}

.head {
  position: relative;
}

.head-xl {
  padding: var(--section-p-xl) 0;
}

.head-lg {
  padding: var(--mm-space-section) 0;
}

.head-md {
  padding: var(--mm-space-section-tight) 0;
}

.head-sm {
  padding: var(--section-p-sm) 0 var(--mm-space-section-tight);
}

.message {
  position: absolute;
  top: 10%;
  z-index: 99;
  left: 40px;
  right: 40px;
  margin: auto;
}


/* ==========================================================================
   05  TYPOGRAPHY
   Class names describe ROLE, not pixel size, so changing the scale in
   section 01 never leaves a class called .t40 rendering at 32px.
   ========================================================================== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  font-family: var(--mm-font-sans);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.14;
  color: var(--mm-text);
}

h1, .h1 {
  font-size: var(--fs-h1);
}

h2, .h2 {
  font-size: var(--fs-h2);
}

h3, .h3 {
  font-size: var(--fs-h3);
}

h4, .h4 {
  font-size: var(--fs-h4);
}

h5, .h5 {
  font-size: var(--fs-h5);
}

p, .p {
  font-family: var(--mm-font-sans);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--mm-text-muted);
}

.text-primary {
  color: var(--mm-text-link) !important;
}

.text-dark {
  color: var(--mm-text);
}

.text-white {
  color: var(--mm-white) !important;
}

.text-grey {
  color: var(--mm-text-muted);
}

/* --- design-system type ---------------------------------------------- */
.mm-serif {
  font-family: var(--mm-font-serif);
  font-weight: 300;
}

.mm-display {
  font-family: var(--mm-font-serif);
  font-weight: 400;
  font-size: var(--mm-text-display);
  line-height: var(--mm-leading-tight);
  letter-spacing: var(--mm-tracking-flat);
  margin: 0;
  color: inherit;
  /* takes colour from the band it sits in */
}

/* Two-line heading: sans on top, light serif beneath. The house device. */
.mm-heading {
  margin: 0;
  line-height: var(--mm-leading-tight);
  text-align: center;
}

.mm-heading--start {
  text-align: left;
}

.mm-heading__line {
  display: block;
  font-family: var(--mm-font-sans);
  font-size: var(--mm-text-heading);
  line-height: var(--mm-leading-tight);
  letter-spacing: var(--mm-tracking-flat);
  font-weight: 400;
  color: inherit;
}

.mm-heading__line--serif {
  font-family: var(--mm-font-serif);
  font-weight: 300;
}

.mm-heading__line--accent {
  background: var(--mm-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mm-lead {
  font-size: var(--mm-text-lead);
  line-height: 1.55;
  color: var(--mm-text-secondary);
  max-width: 50rem;
  margin-inline: auto;
}

.mm-lead--inverse {
  color: var(--mm-text-muted-on-inverse);
}

.mm-lead--light {
  color: var(--mm-text-on-inverse);
}

.mm-title-lg {
  font-family: var(--mm-font-serif);
  font-weight: 400;
  font-size: var(--mm-text-title-lg);
  line-height: var(--mm-leading-snug);
  letter-spacing: var(--mm-tracking-flat);
  margin: 0;
  color: inherit;
  /* takes colour from the band it sits in */
}

.mm-title-sm {
  font-family: var(--mm-font-serif);
  font-weight: 400;
  font-size: var(--mm-text-title-sm);
  line-height: 1.25;
  margin: 0;
  color: inherit;
  /* takes colour from the band it sits in */
}

.mm-title-sm--inverse {
  color: var(--mm-text-on-inverse);
}

.mm-body {
  font-size: var(--mm-text-body);
  line-height: var(--mm-leading-body);
  color: var(--mm-text-muted);
  margin: 0;
}

.mm-body--inverse {
  color: var(--mm-text-muted-on-inverse);
}

.mm-caption {
  font-size: var(--mm-text-caption);
  line-height: 1.3;
}

.mm-quote {
  font-family: var(--mm-font-serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: var(--mm-leading-snug);
  margin: 0;
  color: inherit;
  /* takes colour from the band it sits in */
}

.mm-eyebrow {
  font-size: var(--mm-text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--mm-emphasis);
}

.mm-eyebrow--sm { font-size: .7rem; letter-spacing: .16em; }


/* ==========================================================================
   06  BUTTONS
   ========================================================================== */
.btn {
  position: relative;
  width: fit-content;
  padding: 1rem 1.6rem;
  line-height: 1;
  font-family: var(--mm-font-sans);
  font-size: var(--fs-base);
  font-weight: 500 !important;
  border-radius: var(--mm-radius-xs);
  transition: var(--transition);
}

.btn-primary {
  background-color: var(--mm-action);
  border-color: var(--mm-action);
  color: var(--mm-action-label);
}

.btn-primary:hover {
  background-color: var(--mm-action-hover);
  border-color: var(--mm-action-hover);
  color: var(--mm-action-label);
}

.btn-secondary {
  background-color: var(--mm-emphasis);
  border-color: var(--mm-emphasis);
  color: var(--mm-ink);
}

.btn-secondary:hover {
  background-color: var(--mm-green-600);
  border-color: var(--mm-green-600);
  color: var(--mm-white);
}

.btn-outline-primary {
  background-color: transparent;
  border-color: var(--mm-action);
  color: var(--mm-text-link);
}

.btn-outline-primary:hover {
  background-color: var(--mm-action);
  border-color: var(--mm-action);
  color: var(--mm-action-label);
}

.btn-light {
  background-color: var(--mm-white);
  border-color: var(--mm-white);
  color: var(--mm-text-link);
}

.btn-light:hover {
  background-color: var(--mm-surface-wash);
  border-color: var(--mm-surface-wash);
  color: var(--mm-text-link);
}

/* design-system button */
.mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 40px;
  padding-inline: 1rem;
  border: 1px solid transparent;
  border-radius: var(--mm-radius-xs);
  font-family: var(--mm-font-sans);
  font-size: var(--mm-text-ui);
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  transition: background-color var(--mm-duration-fast) var(--mm-ease),
    border-color var(--mm-duration-fast) var(--mm-ease),
    color var(--mm-duration-fast) var(--mm-ease),
    transform var(--mm-duration-fast) var(--mm-ease),
    box-shadow var(--mm-duration-mid) var(--mm-ease);
}

.mm-btn:focus-visible {
  outline: 2px solid var(--mm-focus-ring);
  outline-offset: 3px;
}

/* primary lifts: the page's main action should feel physical */
.mm-btn--primary {
  background: var(--mm-action);
  color: var(--mm-action-label);
  box-shadow: 0 1px 2px rgba(16, 26, 22, .12);
}

.mm-btn--primary:hover {
  background: var(--mm-action-hover);
  color: var(--mm-action-label);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(14, 107, 76, .55);
}

.mm-btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(16, 26, 22, .12);
}

/* secondary stays flat; its border darkens instead */
.mm-btn--secondary {
  background: var(--mm-surface);
  color: var(--mm-text);
  border-color: var(--mm-line);
}

.mm-btn--secondary:hover {
  background: var(--mm-surface);
  color: var(--mm-text-link);
  border-color: var(--mm-action);
}

.mm-btn--inverse {
  background: var(--mm-surface);
  color: var(--mm-text);
}

.mm-btn--inverse:hover {
  background: var(--mm-white);
  color: var(--mm-text-link);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(16, 26, 22, .35);
}

@media (prefers-reduced-motion: reduce) {
  .mm-btn:hover, .mm-btn:active {
    transform: none;
  }
}

.mm-btn--ghost {
  background: transparent;
  color: var(--mm-text);
  border-color: transparent;
}

.mm-btn--ghost:hover {
  background: var(--mm-surface-wash);
  color: var(--mm-text-link);
}

@media (min-width: 768px) {
  .mm-btn--block {
    width: auto;
  }
}

.mm-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--mm-text-link);
}

.mm-link:hover {
  color: var(--mm-text-link-hover);
}

/* --- sizes --- */
.mm-btn--md {
  height: 48px;
  padding-inline: 1.25rem;
  font-size: 1.125rem;
}

.mm-btn--lg {
  height: 56px;
  padding-inline: 1.25rem;
  font-size: 1.25rem;
}

.mm-btn--pill {
  border-radius: var(--mm-radius-sm);
}

/* full width on mobile, natural width from md up */
.mm-btn--block {
  width: 100%;
}

@media (min-width: 768px) {
  .mm-btn--block {
    width: auto;
  }
}

/* --- submit button, busy state ------------------------------------------
   The label is swapped rather than hidden, so the button never changes
   width mid-submit. */
.btn--busy {
  position: relative;
  pointer-events: none;
}

.btn--busy .btn__label {
  visibility: hidden;
}

.btn--busy .btn__spinner {
  display: block;
}

.btn__spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: var(--mm-white);
  animation: mm-btn-spin .7s linear infinite;
}

@keyframes mm-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn__spinner {
    animation-duration: 1.4s;
  }
}

/* outlined: for secondary in-page actions like scroll anchors, where a
   filled button would compete with the real CTAs */
   .mm-btn--outline {
    background: transparent;
    color: var(--mm-text-link);
    border-color: var(--mm-action);
  }
  .mm-btn--outline:hover {
    background: var(--mm-action);
    color: var(--mm-action-label);
    border-color: var(--mm-action);
  }
  
  /* the arrow nudges down on hover, hinting at the destination */
  .mm-btn__arrow { transition: transform var(--mm-duration-fast) var(--mm-ease); }
  .mm-btn:hover .mm-btn__arrow { transform: translateY(2px); }
  
  @media (prefers-reduced-motion: reduce) {
    .mm-btn__arrow { transition: none; }
  }

/* ==========================================================================
   07  LAYOUT
   Bootstrap keeps the grid, flex, spacing and display utilities. We only
   add what it lacks.
   ========================================================================== */
.mm {
  font-family: var(--mm-font-sans);
  color: var(--mm-text);
  background: var(--mm-surface-page);
  -webkit-font-smoothing: antialiased;
}

.mm a {
  text-decoration: none;
}

.mm p {
  margin: 0;
}

/* Never add overflow, transform or filter to .mm — it would make it the
   scroll container and break every sticky descendant. */

.mm-container {
  width: 100%;
  max-width: var(--mm-container-max);
  margin-inline: auto;
  padding-inline: var(--mm-container-gutter);
}

.mm-section {
  padding-block: var(--mm-space-section);
}

.mm-section--tight {
  padding-block: var(--mm-space-section-tight);
}

.mm-section--flush-top {
  padding-top: 0;
}

.mm-band--tint {
  background: var(--mm-surface-tint);
}

.mm-band--wash {
  background: var(--mm-surface-wash);
}

.mm-band--dark {
  background: var(--mm-surface-inverse);
  color: var(--mm-text-on-inverse);
}

.mm-band--gradient {
  position: relative;
  overflow: hidden;
  background: var(--mm-gradient-deep);
  color: var(--mm-text-on-inverse);
}

/* Perks carrying a label and a paragraph rather than a single line.
   .mm-perk is fixed-height by default, which is right for short cards
   and wrong here. */
.mm-band--gradient .mm-perk {
  height: auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  overflow: visible;
}

@media (min-width: 768px) {
  .mm-band--gradient .mm-perk {
    max-width: 18rem;
    flex: 1 1 0;
    padding: 1.75rem;
  }
}

.mm-perk__label {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mm-green-700);
  margin-bottom: .55rem;
}
.mm-perk__body {
  display: block;
  font-family: var(--mm-font-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--mm-ink-soft);
}

.mm-perk__label {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mm-green-700);
  margin-bottom: .55rem;
}

.mm-perk__body {
  display: block;
  font-family: var(--mm-font-sans);
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--mm-ink-soft);
}

.mm-band__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 10vw, 12.25rem);
}


/* ==========================================================================
   08  FRAMES
   One media container, several ratios. This is where Figma artwork drops in:
   add <img class="mm-frame__fill"> and delete the placeholder markup.
   ========================================================================== */
.mm-frame {
  position: relative;
  width: 100%;
  border-radius: var(--mm-radius-lg);
  background: var(--mm-surface-tint);
  padding: clamp(1rem, 3vw, 2.5rem);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.mm-frame--hero {
  border-radius: var(--mm-radius-hero);
  aspect-ratio: 16 / 7;
  padding: clamp(1rem, 4vw, 3rem);
}

.mm-frame--stage {
  aspect-ratio: 592 / 570;
}

.mm-frame--tile {
  aspect-ratio: 288 / 280;
}

.mm-frame--portrait {
  height: 440px;
  padding: 2rem;
}

.mm-frame--gradient {
  background: var(--mm-gradient-soft);
}

.mm-frame--flush {
  padding: 0;
}

@media (max-width: 767.98px) {
  .mm-frame--hero {
    aspect-ratio: 4 / 5;
  }
}

@media (min-width: 768px) {
  .mm-frame--tile {
    aspect-ratio: 592 / 570;
  }
}

.mm-frame__fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cross-fading contents. The frame never fades or moves, only these layers.
   inset matches the frame padding, since absolute positioning resolves
   against the padding box. */
.mm-frame__layer {
  position: absolute;
  inset: clamp(1rem, 3vw, 2.5rem);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transition: opacity var(--mm-duration-slow) var(--mm-ease),
    transform var(--mm-duration-slow) var(--mm-ease);
  pointer-events: none;
  will-change: opacity, transform;
}

.mm-frame__layer.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.mm-frame__layer>* {
  width: 100%;
}

/* --- image frames with positioned overlay elements ---------------------- */
/* A looping hero video is motion the OS setting should be able to refuse.
   Hiding the video reveals the poster underneath, so the frame still fills. */
@media (prefers-reduced-motion: reduce) {

  .mm-frame__fill video,
  video.mm-frame__fill {
    display: none;
  }
}

.mm-frame--media {
  padding: 0;
}

/* --- hero video loop -----------------------------------------------------
   A short fade over the seam. The video keeps its native loop; we just
   dip it to the poster underneath for a moment either side of the jump,
   which hides the frame-one snap. */
.mm-frame--media video {
  transition: opacity .45s var(--mm-ease);
}

.mm-frame--media.is-looping video {
  opacity: 0;
}

/* --- annotation pills ----------------------------------------------------
     Held until the frame is on screen, and restarted with each loop. */
.mm-annotate__pill {
  animation-play-state: paused;
}

.mm-frame--media.is-revealed .mm-annotate__pill {
  animation-play-state: running;
}

/* a pill that just sits there: no entrance, no drift. For static images
   where the label is a caption rather than part of a sequence. */
   .mm-annotate__pill--static {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }

.mm-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mm-overlay>* {
  pointer-events: auto;
}

/* Position with --mm-x / --mm-y as percentages, stagger with --mm-delay.
   The outer element owns placement, the inner owns motion, so the two
   transforms never fight. */
.mm-overlay__item {
  position: absolute;
  top: var(--mm-y, 50%);
  left: var(--mm-x, 50%);
  transform: translate(-50%, -50%);
  max-width: 62%;
}

.mm-overlay__card {
  opacity: 0;
  animation: mm-rise-in .6s var(--mm-ease) var(--mm-delay, 0s) forwards,
    mm-drift 6s ease-in-out calc(var(--mm-delay, 0s) + .6s) infinite;
}

@keyframes mm-rise-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mm-drift {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@media (max-width: 767.98px) {
  .mm-overlay__item {
    max-width: 78%;
  }
}

/* --- floating glass labels over media ----------------------------------
   HTML only. Position with --mm-x / --mm-y percentages, stagger with
   --mm-delay. No connectors: the pills read as ambient annotation rather
   than a diagram, which stays legible however the footage crops. */
.mm-annotate {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

@media (min-width: 992px) {
  .mm-annotate {
    display: block;
  }
}

.mm-annotate__pill {
  position: absolute;
  left: var(--mm-x);
  top: var(--mm-y);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1.05rem;
  border-radius: var(--mm-radius-pill);
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 10px 30px -14px rgba(10, 21, 18, .45);
  font-family: var(--mm-font-sans);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1;
  color: var(--mm-ink);
  white-space: nowrap;

  /* translate lives on the element, so the keyframes below must carry it
        too or the pill jumps to the corner when the animation takes over */
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: mm-pill-in .6s var(--mm-ease) var(--mm-delay, 0s) forwards,
    mm-pill-float 7s ease-in-out calc(var(--mm-delay, 0s) + .6s) infinite;
}

.mm-annotate__pill::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mm-green-500);
  box-shadow: 0 0 0 3px rgba(22, 182, 127, .18);
}

@keyframes mm-pill-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 14px)) scale(.96);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes mm-pill-float {
  0%, 100% {
    transform: translate(-50%, -50%);
  }

  50% {
    transform: translate(-50%, calc(-50% - 7px));
  }
}

@media (max-width: 1199.98px) {
  .mm-annotate__pill {
    font-size: .875rem;
    padding: .45rem .85rem;
  }
}

/* Animations are staged but held until the frame scrolls into view. Paused
   at 0% keeps the pill at opacity 0, so nothing flashes before reveal. */
/* the fade that covers the loop seam — dips to the poster underneath */
.mm-frame--media video { transition: opacity .45s var(--mm-ease); }
.mm-frame--media.is-looping video { opacity: 0; }

/* pills hold until the frame is on screen, and rewind on each loop */
.mm-annotate__pill { animation-play-state: paused; }
.mm-frame--media.is-revealed .mm-annotate__pill { animation-play-state: running; }
.mm-annotate.is-reset .mm-annotate__pill { animation: none !important; }

/* No JS? Show them. Better a static pill than an invisible one. */
.no-js .mm-annotate__pill {
  animation-play-state: running;
}

/* --- studio stage visuals ----------------------------------------------
   0 — a field of what already exists, scanned, one opportunity found
   1 — candidates probed in turn; three fall away, one is carried forward
   2 — parts assemble, then keep being improved while the platform runs
   Paused until the layer is active so all three are not looping behind
   the cross-fade. */

/* ==========================================================================
   STUDIO STAGE VISUALS
   Three panels for the sticky slider. Shared foundation first, then the
   per-panel specifics, then keyframes.

   Every panel runs on --mm-viz-cycle, so the three stay the same length.
   Keyframes are percentage based, so changing that one value rescales all
   three sequences without altering their internal proportions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FOUNDATION — shared by all three panels
   -------------------------------------------------------------------------- */
.mm-viz {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  --mm-viz-cycle: 10s;
  /* every panel runs on one clock */
}

/* Nothing runs until the section is on screen AND the layer is the active
   one. animation-play-state only pauses — it does not rewind — so the JS
   below also forces a restart via .is-reset whenever a panel takes over. */
.mm-viz * {
  animation-play-state: paused;
}

.mm-slider-section.is-onscreen .mm-frame__layer.is-active .mm-viz * {
  animation-play-state: running;
}

/* momentarily detaching the animation is what rewinds it to 0% */
.mm-viz.is-reset * {
  animation: none !important;
}

/* --- surfaces: one card treatment, three names ---
     .mm-viz__card (panel 0) · .mm-viz__note (panel 1) · .mm-viz__node (panel 2) */
.mm-viz__card,
.mm-viz__note,
.mm-viz__node {
  padding: 1.15rem 1.25rem !important;
  border-radius: 18px;
  background: var(--mm-surface);
  box-shadow: 0 8px 24px -18px rgba(16, 26, 22, .1);
  opacity: 0;
}

/* --- type inside a card --- */
.mm-viz__card-label {
  display: block;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mm-green-600);
  margin-bottom: 0;
}

.mm-viz__card-title {
  display: block;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--mm-ink);
}

/* --- cycling text slot ---
     Several lines stacked in one place so only one shows at a time and the
     card never changes height. Used by panels 1 and 2. */
.mm-viz__note-status,
.mm-viz__title-slot {
  position: relative;
}

.mm-viz__note-status span,
.mm-viz__title-slot .mm-viz__card-title {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

/* --- dashed connectors ---
     The dash pattern lives in stroke-dasharray, so a draw-in has to be done
     with clip-path: the two cannot share that property. */
.mm-viz__branch path,
.mm-viz__link path {
  fill: none;
  stroke: var(--mm-ink-soft);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.mm-viz__branch svg,
.mm-viz__link svg {
  width: 100%;
  height: 100%;
}


/* ==========================================================================
     0 · AN OPPORTUNITY ARRIVES, AND GETS LOOKED INTO
     The card lands, then each step appears in ink and drops back to faint as
     the next takes over. Distinct keyframe sets rather than one set with
     delays, so the loop cannot drift.
     ========================================================================== */
.mm-viz__panel-0 {
  position: absolute;
  inset: 6% 4%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.75rem;
}

.mm-viz__card {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1.15rem 1.25rem;
  animation: mm-card-cycle var(--mm-viz-cycle) var(--mm-ease) infinite;
}

.mm-viz__card-mark {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin: auto 0;
  object-fit: contain;
}

.mm-viz__steps {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  text-align: center;
}

.mm-viz__step {
  display: block;
  font-size: 1.2rem;
  line-height: 1.3;
  opacity: 0;
}

.mm-viz__step:nth-child(1) {
  animation: mm-step-1 var(--mm-viz-cycle) var(--mm-ease) infinite;
}

.mm-viz__step:nth-child(2) {
  animation: mm-step-2 var(--mm-viz-cycle) var(--mm-ease) infinite;
}

.mm-viz__step:nth-child(3) {
  animation: mm-step-3 var(--mm-viz-cycle) var(--mm-ease) infinite;
}


/* ==========================================================================
     1 · ONE ASSUMPTION, TWO APPROACHES, ONE VALIDATED
     A wide card, a short connector gap, two square option cards beneath.
     Fixed sizes so the panel cannot redistribute space between them.
     ========================================================================== */
.mm-viz__panel-1 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6%;
}

.mm-viz__note-mark,
.mm-viz__mark {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  object-fit: contain;
}

.mm-viz__card-mark {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin: auto 0;
  object-fit: contain;
}

.mm-viz__note {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  gap: .85rem;
  padding: 1.15rem 1.25rem;
  /* background: var(--mm-green-300); */
  /* panel 1 overrides the white surface */
  animation: mm-note-in var(--mm-viz-cycle) var(--mm-ease) infinite;
}

.mm-viz__note-status {
  height: 1.5rem;
  margin-top: .1rem;
}

.mm-viz__note-status span {
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.5rem;
  white-space: nowrap;
  color: var(--mm-ink);
}

.mm-viz__note-status .is-final {
  /* color: var(--mm-green-700); */
  /* font-weight: 600; */
}

.mm-viz__note-status span:nth-child(1) {
  animation: mm-ns-1 var(--mm-viz-cycle) var(--mm-ease) infinite;
}

.mm-viz__note-status span:nth-child(2) {
  animation: mm-ns-2 var(--mm-viz-cycle) var(--mm-ease) infinite;
}

.mm-viz__note-status span:nth-child(3) {
  animation: mm-ns-3 var(--mm-viz-cycle) var(--mm-ease) infinite;
}

.mm-viz__branch {
  width: 100%;
  height: 56px;
  flex: 0 0 56px;
}

.mm-viz__branch svg {
  overflow: visible;
}

.mm-viz__branch path {
  stroke-dasharray: 5 6;
  opacity: .5;
}

/* Each segment is its own path so it can be clipped along its own axis:
     the stem downward, the arms outward from the centre. clip-path rather
     than stroke-dashoffset, since the dash pattern already owns dasharray. */
.mm-viz__branch .is-stem {
  clip-path: inset(0 0 100% 0);
  animation: mm-branch-stem var(--mm-viz-cycle) var(--mm-ease) infinite;
}

.mm-viz__branch .is-arm-left {
  clip-path: inset(0 0 0 100%);
  animation: mm-branch-left var(--mm-viz-cycle) var(--mm-ease) infinite;
}

.mm-viz__branch .is-arm-right {
  clip-path: inset(0 100% 0 0);
  animation: mm-branch-right var(--mm-viz-cycle) var(--mm-ease) infinite;
}

.mm-viz__opts {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.mm-viz__opt {
  position: relative;
  width: 150px;
  height: 150px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: .7rem;
  border-radius: 16px;
  background: var(--mm-surface);
  box-shadow: 0 10px 26px -20px rgba(16, 26, 22, .3);
  opacity: 0;
}

.mm-viz__opt:nth-child(1) {
  animation: mm-opt-out var(--mm-viz-cycle) var(--mm-ease) infinite;
}

.mm-viz__opt:nth-child(2) {
  animation: mm-opt-keep var(--mm-viz-cycle) var(--mm-ease) infinite;
}

.mm-viz__opt-media {
  flex: 1 1 auto;
  border-radius: 11px;
  background: var(--mm-gradient-soft);
  margin-bottom: .6rem;
}

.mm-viz__opt-line {
  height: 7px;
  border-radius: 99px;
  background: var(--mm-line);
  flex: 0 0 auto;
}

.mm-viz__opt-line+.mm-viz__opt-line {
  margin-top: .4rem;
}

.mm-viz__opt-tick {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mm-green-700);
  color: var(--mm-white);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px -4px rgba(16, 26, 22, .35);
  opacity: 0;
  transform: scale(.5);
  animation: mm-tick-in var(--mm-viz-cycle) var(--mm-ease) infinite;
}

/* ==========================================================================
   2 · BUILT, THEN LIVE
   The build card holds through the first two beats, then gives way to the
   finished product — a page view that assembles and stays running.
   ========================================================================== */
.mm-viz__panel-2 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 6%;
}

.mm-viz__panel-2>* {
  grid-area: 1 / 1;
  width: 100%;
}

/* --- state one: the card, as before --- */
.mm-viz__node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-radius: 16px;
}

.mm-viz__node--build {
  animation: mm-build-in var(--mm-viz-cycle) var(--mm-ease) infinite;
}

.mm-viz__title-slot {
  flex: 1 1 auto;
  min-height: 1.6rem;
}

.mm-viz__title-slot .mm-viz__card-title {
  right: 0;
  line-height: 1.6rem;
}

.mm-viz__title-slot .mm-viz__card-title:nth-child(1) {
  animation: mm-bt-1 var(--mm-viz-cycle) var(--mm-ease) infinite;
}

.mm-viz__title-slot .mm-viz__card-title:nth-child(2) {
  animation: mm-bt-2 var(--mm-viz-cycle) var(--mm-ease) infinite;
}

.mm-viz__spinner {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--mm-line);
  border-top-color: var(--mm-green-600);
  animation: mm-spin 1s linear infinite,
    mm-spin-out var(--mm-viz-cycle) var(--mm-ease) infinite;
}

/* --- state two: the finished product --- */
.mm-viz__page {
  border-radius: 18px;
  background: var(--mm-surface);
  box-shadow: 0 12px 32px -20px rgba(16, 26, 22, .3);
  overflow: hidden;
  opacity: 0;
  animation: mm-page-in var(--mm-viz-cycle) var(--mm-ease) infinite;
}

/* browser bar, with the live state where a URL would sit */
.mm-viz__page-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--mm-line);
}

.mm-viz__page-dots {
  display: flex;
  gap: .3rem;
  flex: 0 0 auto;
}

.mm-viz__page-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mm-line);
  display: block;
}

.mm-viz__page-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .6rem;
  border-radius: var(--mm-radius-pill);
  background: var(--mm-green-100);
  color: var(--mm-green-700);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mm-viz__page-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mm-green-600);
  animation: mm-live-pulse 2s ease-in-out infinite;
}

/* the page contents, arriving in order */
.mm-viz__page-body {
  display: block;
  padding: 1.15rem;
}

.mm-viz__page-el {
  display: block;
  opacity: 0;
}

.mm-viz__page-el--hero {
  height: 62px;
  border-radius: 10px;
  background: var(--mm-gradient-soft);
  margin-bottom: .85rem;
}

.mm-viz__page-el--line {
  height: 8px;
  border-radius: 99px;
  background: var(--mm-line);
  margin-bottom: .5rem;
}

.mm-viz__page-el--grid {
  display: flex;
  gap: .6rem;
  margin-top: .85rem;
}

.mm-viz__page-el--grid i {
  flex: 1;
  height: 38px;
  border-radius: 9px;
  background: var(--mm-surface-wash);
  display: block;
}

.mm-viz__page-dots {
  display: flex;
  gap: .35rem;
  flex: 0 0 auto;
}

.mm-viz__page-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}

.mm-viz__page-dots i:nth-child(1) {
  background: #FF5F57;
}

.mm-viz__page-dots i:nth-child(2) {
  background: #FEBC2E;
}

.mm-viz__page-dots i:nth-child(3) {
  background: #28C840;
}

.mm-viz__page-el {
  display: block;
  opacity: 0;
}

.mm-viz__page-el--hero {
  height: 62px;
  border-radius: 10px;
  background: var(--mm-gradient-soft);
  margin-bottom: .7rem;
}

.mm-viz__page-el--line {
  height: 8px;
  border-radius: 99px;
  background: var(--mm-line);
  margin-bottom: .45rem;
}

.mm-viz__page-el--grid {
  display: flex;
  gap: .5rem;
  margin-top: .7rem;
}

.mm-viz__page-el--grid i {
  flex: 1;
  height: 38px;
  border-radius: 9px;
  background: var(--mm-surface-wash);
  display: block;
}

.mm-viz__page-el:nth-of-type(1) {
  animation: mm-pel-1 var(--mm-viz-cycle) var(--mm-ease) infinite;
}

.mm-viz__page-el:nth-of-type(2) {
  animation: mm-pel-2 var(--mm-viz-cycle) var(--mm-ease) infinite;
}

.mm-viz__page-el:nth-of-type(3) {
  animation: mm-pel-3 var(--mm-viz-cycle) var(--mm-ease) infinite;
}

.mm-viz__page-el:nth-of-type(4) {
  animation: mm-pel-4 var(--mm-viz-cycle) var(--mm-ease) infinite;
}

/* ==========================================================================
   KEYFRAMES

   All three panels share one timing grid, expressed as percentages of
   --mm-viz-cycle. Change that variable and every sequence rescales
   together, keeping these relationships intact.

       3 –  8    primary element enters
      14 – 34    text beat 1   (fades in 14–18, holds to 34)
      38 – 58    text beat 2   (fades in 38–42, holds to 58)
      62 – 94    text beat 3   (fades in 62–66, holds to the end)
      94 – 100   everything exits

   Supporting elements — connectors, option cards, badges — fill the gaps
   between beats. Every fade is 4% (≈0.5s at 12s) so no transition in any
   panel is quicker or slower than the equivalent one elsewhere.
   ========================================================================== */

/* --- panel 0 --------------------------------------------------------------
   The card enters, then three steps complete in turn. Unlike the other two
   panels the steps persist, greying off rather than disappearing. */
/* beats shortened to ~1.8s, with the last one clearing early so the panel
   rests visibly before the loop restarts */
@keyframes mm-step-1 {
  0%, 12% {
    opacity: 0;
    transform: translateY(5px);
    color: var(--mm-ink);
  }

  16%, 30% {
    opacity: 1;
    transform: none;
    color: var(--mm-ink);
  }

  34%, 84% {
    opacity: 1;
    transform: none;
    color: var(--mm-faint);
  }

  90%, 100% {
    opacity: 0;
    transform: none;
    color: var(--mm-faint);
  }
}

@keyframes mm-step-2 {
  0%, 32% {
    opacity: 0;
    transform: translateY(5px);
    color: var(--mm-ink);
  }

  36%, 50% {
    opacity: 1;
    transform: none;
    color: var(--mm-ink);
  }

  54%, 84% {
    opacity: 1;
    transform: none;
    color: var(--mm-faint);
  }

  90%, 100% {
    opacity: 0;
    transform: none;
    color: var(--mm-faint);
  }
}

@keyframes mm-step-3 {
  0%, 52% {
    opacity: 0;
    transform: translateY(5px);
    color: var(--mm-ink);
  }

  56%, 84% {
    opacity: 1;
    transform: none;
    color: var(--mm-ink);
  }

  90%, 100% {
    opacity: 0;
    transform: none;
    color: var(--mm-ink);
  }
}

@keyframes mm-card-cycle {
  0%, 3% {
    opacity: 0;
    transform: translateY(10px) scale(.98);
  }

  8%, 84% {
    opacity: 1;
    transform: none;
  }

  90%, 100% {
    opacity: 0;
    transform: none;
  }
}

/* --- panel 1 --------------------------------------------------------------
   Card enters, status cycles through the same three beats. The branch and
   option cards build during beat 1, both hold through beat 2 while they are
   prototyped, and the verdict lands on beat 3. */
@keyframes mm-note-in {
  0%, 3% {
    opacity: 0;
    transform: translateY(10px) scale(.98);
  }

  8%, 94% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: none;
  }
}

/* "Researching" arrives with the card, so the status row is never empty */
@keyframes mm-ns-1 {
  0%, 3% {
    opacity: 0;
  }

  8%, 34% {
    opacity: 1;
  }

  38%, 100% {
    opacity: 0;
  }
}

@keyframes mm-ns-2 {
  0%, 38% {
    opacity: 0;
  }

  42%, 58% {
    opacity: 1;
  }

  62%, 100% {
    opacity: 0;
  }
}

@keyframes mm-ns-3 {
  0%, 62% {
    opacity: 0;
  }

  66%, 94% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes mm-branch-stem {
  0%, 20% {
    clip-path: inset(0 0 100% 0);
  }

  25%, 94% {
    clip-path: inset(0 0 0 0);
  }

  100% {
    clip-path: inset(0 0 100% 0);
  }
}

@keyframes mm-branch-left {
  0%, 26% {
    clip-path: inset(0 0 0 100%);
  }

  32%, 94% {
    clip-path: inset(0 0 0 0);
  }

  100% {
    clip-path: inset(0 0 0 100%);
  }
}

@keyframes mm-branch-right {
  0%, 26% {
    clip-path: inset(0 100% 0 0);
  }

  32%, 94% {
    clip-path: inset(0 0 0 0);
  }

  100% {
    clip-path: inset(0 100% 0 0);
  }
}

@keyframes mm-opt-out {
  0%, 32% {
    opacity: 0;
    transform: translateY(8px);
  }

  37%, 62% {
    opacity: 1;
    transform: none;
  }

  66%, 94% {
    opacity: .22;
    transform: scale(.97);
  }

  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes mm-opt-keep {
  0%, 36% {
    opacity: 0;
    transform: translateY(8px);
  }

  41%, 62% {
    opacity: 1;
    transform: none;
  }

  66%, 94% {
    opacity: 1;
    transform: translateY(-6px) scale(1.03);
  }

  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes mm-tick-in {
  0%, 66% {
    opacity: 0;
    transform: scale(.5);
  }

  72%, 94% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* --- panel 2 --------------------------------------------------------------
   Two text beats rather than three, the first arriving with the card so
   nothing loads in on an empty card. The handover happens earlier, giving
   the finished product the second half of the cycle. */
@keyframes mm-build-in {
  0%, 3% {
    opacity: 0;
    transform: translateY(8px);
  }

  8%, 44% {
    opacity: 1;
    transform: none;
  }

  49%, 100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* "Building" is already there when the card lands */
@keyframes mm-bt-1 {
  0%, 3% {
    opacity: 0;
  }

  8%, 26% {
    opacity: 1;
  }

  30%, 100% {
    opacity: 0;
  }
}

@keyframes mm-bt-2 {
  0%, 30% {
    opacity: 0;
  }

  34%, 44% {
    opacity: 1;
  }

  48%, 100% {
    opacity: 0;
  }
}

/* the spinner retires as Launching takes over */
@keyframes mm-spin-out {
  0%, 30% {
    opacity: 1;
  }

  35%, 100% {
    opacity: 0;
  }
}

/* the product takes the card's place and assembles */
@keyframes mm-page-in {
  0%, 46% {
    opacity: 0;
    transform: translateY(10px) scale(.97);
  }

  52%, 94% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes mm-pel-1 {
  0%, 52% {
    opacity: 0;
    transform: translateY(5px);
  }

  57%, 94% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
  }
}

@keyframes mm-pel-2 {
  0%, 58% {
    opacity: 0;
    transform: translateY(5px);
  }

  63%, 94% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
  }
}

@keyframes mm-pel-3 {
  0%, 64% {
    opacity: 0;
    transform: translateY(5px);
  }

  69%, 94% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
  }
}

@keyframes mm-pel-4 {
  0%, 70% {
    opacity: 0;
    transform: translateY(5px);
  }

  75%, 94% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
  }
}

@keyframes mm-live-in {
  0%, 78% {
    opacity: 0;
    transform: translateY(8px);
  }

  83%, 94% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: none;
  }
}

/* the spinner retires as the launch badge takes over */
@keyframes mm-spin-out {
  0%, 64% {
    opacity: 1;
  }

  69%, 94% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* --- independent textures, deliberately off the grid --------------------- */
@keyframes mm-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes mm-deploy-arrow {
  0% {
    transform: translateY(2px);
    opacity: .5;
  }

  40% {
    transform: translateY(-1px);
    opacity: 1;
  }

  100% {
    transform: translateY(2px);
    opacity: .5;
  }
}

@keyframes mm-live-pulse {
  0%, 100% {
    opacity: .3;
  }

  50% {
    opacity: 1;
  }
}

/* ==========================================================================
   09  CARDS
   ========================================================================== */
.mm-card {
  background: var(--mm-surface);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius-lg);
  padding: var(--mm-space-block);
}

.mm-card--lift {
  border-color: transparent;
  box-shadow: var(--mm-shadow-card);
}

.mm-perk {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  height: 188px;
  padding: 1.5rem 2rem;
  border-radius: var(--mm-radius-lg);
  background: var(--mm-surface-tint);
  color: var(--mm-text);
}

@media (min-width: 768px) {
  .mm-perk {
    height: 320px;
    width: 280px;
    flex: 0 0 280px;
  }
}

.mm-perk__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.mm-stat-card {
  position: relative;
  width: 100%;
  height: 440px;
  border-radius: var(--mm-radius-lg);
  overflow: hidden;
  background: var(--mm-gradient-brand);
}

@media (min-width: 768px) {
  .mm-stat-card {
    width: 384px;
    flex: 0 0 384px;
  }
}

.mm-stat-card__label {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-size: var(--mm-text-caption);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--mm-text-on-inverse);
}

.mm-stat {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 212px;
  height: 237px;
  padding: 1.5rem;
  border-radius: var(--mm-radius-lg);
  background: var(--mm-surface);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.mm-stat__value {
  font-family: var(--mm-font-serif);
  font-weight: 300;
  font-size: 2.5rem;
  line-height: 1.15;
  background: var(--mm-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mm-tile-btn {
  position: relative;
  display: block;
  width: 100%;
  height: 200px;
  padding: 1.25rem 1.25rem 2rem 2rem;
  border-radius: var(--mm-radius-lg);
  overflow: hidden;
  background: var(--mm-surface);
  color: var(--mm-text);
}

@media (min-width: 768px) {
  .mm-tile-btn {
    width: 384px;
    flex: 0 0 384px;
  }
}

.mm-tile-btn--gradient {
  background: var(--mm-gradient-soft);
}

.mm-tile-btn:focus-visible {
  outline: 2px solid var(--mm-focus-ring);
  outline-offset: 4px;
}

.mm-tile-btn__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  height: 100%;
}

.mm-tile-btn__label {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  line-height: 1.2;
}

.mm-tile-btn__label span {
  display: block;
}

/* icon holder on card-based sections */
.mm-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--mm-radius-sm);
  background: var(--mm-surface-wash);
  color: var(--mm-green-700);
  flex: 0 0 auto;
}
.mm-card__icon svg { width: 22px; height: 22px; }

/* --- large tappable CTA card -------------------------------------------- */
.mm-tile-btn {
  position: relative;
  display: block;
  width: 100%;
  height: 200px;
  padding: 1.25rem 1.25rem 2rem 2rem;
  border-radius: var(--mm-radius-lg);
  overflow: hidden;
  background: var(--mm-surface);
  color: var(--mm-text);
  transition: transform var(--mm-duration-mid) var(--mm-ease),
    box-shadow var(--mm-duration-mid) var(--mm-ease);
}

@media (min-width: 768px) {
  .mm-tile-btn {
    width: 384px;
    flex: 0 0 384px;
  }
}

.mm-tile-btn--gradient {
  background: var(--mm-gradient-soft);
}

.mm-tile-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(16, 26, 22, .5);
}

.mm-tile-btn:focus-visible {
  outline: 2px solid var(--mm-focus-ring);
  outline-offset: 4px;
}

.mm-tile-btn__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  height: 100%;
}

.mm-tile-btn__label {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  line-height: 1.2;
}

.mm-tile-btn__label span {
  display: block;
}

/* --- the arrow disc ---
   Two identical arrows stacked in one grid cell. On hover the first leaves
   up-right while fading, and the second arrives from below-left after a
   short delay — so the two are never both visible at the centre. */
.mm-tile-btn__circle {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--mm-radius-pill);
  background: var(--mm-action);
  color: var(--mm-white);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: background-color var(--mm-duration-mid) var(--mm-ease);
}

.mm-tile-btn:hover .mm-tile-btn__circle {
  background: var(--mm-green-600);
}

.mm-tile-btn__circle svg {
  grid-area: 1 / 1;
  transition: transform var(--mm-duration-mid) var(--mm-ease),
    opacity .18s var(--mm-ease);
}

/* outgoing: leaves and fades */
.mm-tile-btn:hover .mm-tile-btn__circle svg:nth-child(1) {
  transform: translate(110%, -110%);
  opacity: 0;
}

/* incoming: parked below-left, arrives on a short delay */
.mm-tile-btn__circle svg:nth-child(2) {
  transform: translate(-110%, 110%);
  opacity: 0;
}

.mm-tile-btn:hover .mm-tile-btn__circle svg:nth-child(2) {
  transform: none;
  opacity: 1;
  transition: transform var(--mm-duration-mid) var(--mm-ease) .1s,
    opacity .2s var(--mm-ease) .12s;
}

@media (prefers-reduced-motion: reduce) {
  .mm-tile-btn:hover {
    transform: none;
  }

  .mm-tile-btn__circle svg {
    transition: none;
  }

  .mm-tile-btn__circle svg:nth-child(2) {
    display: none;
  }
}


/* ==========================================================================
   10  STRIPS
   ========================================================================== */
.mm-notice {
  display: block;
  padding: .625rem 1rem;
  background: var(--mm-surface-tint);
  color: var(--mm-text);
  overflow: hidden;
}

.mm-notice:hover {
  background: var(--mm-green-200);
  color: var(--mm-text);
}

.mm-notice__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.mm-notice__badge {
  padding: .25rem .625rem;
  border-radius: 4px;
  background: var(--mm-action);
  color: var(--mm-action-label);
  font-size: var(--mm-text-caption);
  white-space: nowrap;
}

.mm-notice__text {
  font-size: var(--mm-text-caption);
  white-space: nowrap;
}

.mm-marquee {
  overflow: hidden;
}

.mm-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 2rem;
  animation: mm-scroll 26s linear infinite;
}

@keyframes mm-scroll {
  to {
    transform: translateX(-50%);
  }
}

.mm-cloud-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  min-width: 100px;
  padding-inline: 1rem;
  font-weight: 600;
  color: var(--mm-text-muted);
  white-space: nowrap;
}

.mm-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: var(--mm-radius-pill);
  background: var(--mm-surface-wash);
  color: var(--mm-text-link);
  font-size: .8125rem;
  font-weight: 500;
}


/* ==========================================================================
   11  PLACEHOLDER VISUALS
   Temporary stand-ins for the Figma artwork. Safe to delete this whole
   block once real imagery lands — nothing above depends on it.
   ========================================================================== */
.mm-mock {
  width: 100%;
  max-width: 420px;
  padding: 1.25rem;
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface);
  box-shadow: var(--mm-shadow-lift);
}

.mm-mock__row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 0;
}

.mm-mock__row+.mm-mock__row {
  border-top: 1px solid var(--mm-line);
}

.mm-mock__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mm-surface-tint);
  flex: 0 0 auto;
}

.mm-mock__bar {
  height: 8px;
  border-radius: var(--mm-radius-pill);
  background: var(--mm-line);
}

.mm-mock__bar--accent {
  background: var(--mm-gradient-brand);
}

.mm-mock__big {
  font-family: var(--mm-font-serif);
  font-weight: 300;
  font-size: 2.5rem;
  line-height: 1;
}

.mm-swatches {
  display: flex;
  gap: .5rem;
}

.mm-swatch {
  flex: 1 1 0;
  height: 44px;
  border-radius: 10px;
  background: var(--mm-c, var(--mm-surface-tint));
}

.mm-specimen {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 0 1rem;
  border-bottom: 1px solid var(--mm-line);
}

.mm-specimen__glyph {
  font-size: 3rem;
  line-height: 1;
}

.mm-specimen__meta {
  flex: 1 1 auto;
}

.mm-browser {
  width: 100%;
  max-width: 420px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--mm-surface);
  box-shadow: var(--mm-shadow-lift);
}

.mm-browser__bar {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .75rem 1rem;
  background: var(--mm-surface-wash);
  border-bottom: 1px solid var(--mm-line);
}

.mm-browser__bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mm-line);
}

.mm-browser__body {
  padding: 1rem;
}

.mm-browser__hero {
  height: 96px;
  border-radius: 10px;
  background: var(--mm-gradient-brand);
}

.mm-browser__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: .75rem;
}

.mm-browser__grid i {
  display: block;
  height: 44px;
  border-radius: var(--mm-radius-xs);
  background: var(--mm-surface-tint);
}

.mm-chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .5rem;
  height: 120px;
}

.mm-chart span {
  flex: 1 1 0;
  max-width: 34px;
  height: var(--mm-h, 50%);
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--mm-green-300), var(--mm-green-500));
}

.mm-chart span:last-child {
  background: var(--mm-green-800);
}


/* ==========================================================================
   12  NAVBAR
   Sticky rather than absolute: it survives the long scrolling sections and
   does not need the hero to reserve space for it.
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 99;
}

.navbar {
  background-color: var(--mm-surface-page);
  padding: .875rem 0;
  border-bottom: none !important;
  box-shadow: none !important;
  transition:
    /* box-shadow var(--mm-duration-mid) var(--mm-ease), */
    /* border-color var(--mm-duration-mid) var(--mm-ease), */
    background-color var(--mm-duration-mid) var(--mm-ease);
}

.navbar.scrolled {
  background-color: var(--mm-surface-page);
  border-bottom-color: var(--mm-line);
  box-shadow: 0 2px 16px rgba(10, 21, 18, .06);
}

.navbar-brand,
.navbar-brand:hover {
  color: var(--mm-text);
}

.navbar-brand span {
  font-family: var(--mm-font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.navbar-brand img {
  border-radius: var(--mm-radius-xs);
}

.nav-link {
  position: relative;
  font-family: var(--mm-font-sans);
  font-weight: 500;
  font-size: var(--fs-base);
  color: var(--mm-text);
  padding: .4rem .25rem;
  border-radius: 0;
  transition: color var(--mm-duration-fast) var(--mm-ease);
}

/* an underline that draws from the left, matching the drawn connectors
   used throughout the site rather than a filled pill */
.nav-link::after {
  content: "";
  position: absolute;
  left: .25rem;
  right: .25rem;
  bottom: .15rem;
  height: 1.5px;
  border-radius: 2px;
  background: var(--mm-green-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mm-duration-mid) var(--mm-ease);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--mm-text-link);
  background: transparent;
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
}

/* current page: underline already drawn, and it stays */
.nav-link.active {
  color: var(--mm-text-link);
}

.nav-link.active::after {
  transform: scaleX(1);
}

.nav-link:focus-visible {
  outline: 2px solid var(--mm-focus-ring);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-link::after {
    transition: none;
  }
}

/* on mobile the links stack, so an underline reads oddly — revert to the
   tinted row, which suits a vertical list */
@media (max-width: 991.98px) {
  .nav-link {
    padding: .5rem .75rem;
    border-radius: var(--mm-radius-xs);
  }

  .nav-link::after {
    display: none;
  }

  .nav-link:hover,
  .nav-link:focus-visible {
    background: var(--mm-surface-wash);
  }
}

.navbar-collapse {
  justify-content: space-between;
}

.navbar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.navbar-toggler {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--mm-ink);
  transition: color var(--mm-duration-fast) var(--mm-ease);
}

.navbar-toggler:hover {
  color: var(--mm-text-link);
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler:focus-visible {
  outline: 2px solid var(--mm-focus-ring);
  outline-offset: 4px;
  border-radius: var(--mm-radius-xs);
}

/* two bars, the lower one short. Both are right-aligned so the short one
   reads as deliberate rather than clipped. */
.mm-burger {
  position: relative;
  display: block;
  width: 22px;
  height: 10px;
}

.mm-burger span {
  position: absolute;
  right: 0;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transition: width var(--mm-duration-mid) var(--mm-ease),
    transform var(--mm-duration-mid) var(--mm-ease);
}

.mm-burger span:nth-child(1) {
  top: 0;
  width: 22px;
}

.mm-burger span:nth-child(2) {
  bottom: 0;
  width: 13px;
}

/* the short bar grows to match on hover, before it is even opened */
.navbar-toggler:hover .mm-burger span:nth-child(2) {
  width: 22px;
}

/* open: both bars meet in the middle and cross */
.navbar-toggler[aria-expanded="true"] .mm-burger span:nth-child(1) {
  width: 22px;
  transform: translateY(4.1px) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .mm-burger span:nth-child(2) {
  width: 22px;
  transform: translateY(-4.1px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .mm-burger span {
    transition: none;
  }
}

@media (max-width: 991.98px) {
  .navbar {
    background-color: var(--mm-surface-page);
    border-bottom: 1px solid var(--mm-line);
  }

  .navbar-collapse {
    padding-top: 1rem;
  }

  .site-header {
    position: relative;
  }
  
}


/* ==========================================================================
   13  FOOTER
   ========================================================================== */
footer {
  background-color: var(--mm-surface-inverse);
  color: var(--mm-text-on-inverse);
}

.footer-main {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.footer-heading {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mm-green-300);
  margin-bottom: 1rem;
}

.footer-tagline {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .55);
  line-height: 1.6;
  margin: 0;
}

.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.footer-nav a {
  position: relative;
  display: inline-block;
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--mm-white);
  text-decoration: none;
  transition: color var(--mm-duration-fast) var(--mm-ease),
    transform var(--mm-duration-mid) var(--mm-ease);
}

/* a short rule that draws out from the left as the link steps aside */
.footer-nav a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 8px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--mm-green-300);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mm-duration-mid) var(--mm-ease);
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--mm-green-300);
  transform: translateX(14px);
}

.footer-nav a:hover::before,
.footer-nav a:focus-visible::before {
  transform: scaleX(1);
}

.footer-nav a:focus-visible {
  outline: 2px solid var(--mm-green-300);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {

  .footer-nav a:hover,
  .footer-nav a:focus-visible {
    transform: none;
  }

  .footer-nav a::before {
    transition: none;
  }
}

.footer-contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  transition: var(--transition);
}

.footer-contact-link:hover {
  color: var(--mm-green-300);
}

.footer-bottom {
  padding: 1.25rem 0;
  background-color: rgba(0, 0, 0, .25);
}

.footer-bottom p {
  font-size: var(--fs-xs);
  color: var(--mm-white);
  margin: 0;
}

.footer-legal-link {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .4);
  text-decoration: none;
  transition: var(--transition);
}

.footer-legal-link:hover {
  color: rgba(255, 255, 255, .8);
}

/* --- back to top ---------------------------------------------------------
   Sits in the footer's bottom bar rather than floating. No JS, no scroll
   listener, and nothing to hide or reveal. */
   .mm-to-top {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 0;
    background: none;
    border: 0;
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, .5);
    text-decoration: none;
    transition: color var(--mm-duration-fast) var(--mm-ease);
  }
  .mm-to-top:hover { color: var(--mm-green-300); }
  .mm-to-top:focus-visible { outline: 2px solid var(--mm-green-300); outline-offset: 4px; }
  
  .mm-to-top svg {
    width: 13px;
    height: 13px;
    transition: transform var(--mm-duration-fast) var(--mm-ease);
  }
  .mm-to-top:hover svg { transform: translateY(-2px); }
  
  @media (prefers-reduced-motion: reduce) {
    .mm-to-top svg { transition: none; }
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }


/* ==========================================================================
   14  HOME VIEW
   ========================================================================== */
.mm-hero {
  padding-top: 2.5rem;
  padding-bottom: 5rem;
}

@media (min-width: 768px) {
  .mm-hero {
    padding-top: 5rem;
  }
}

.mm-hero__copy {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Hero entrance
   Runs once on load, on any .mm-hero regardless of layout. CSS-only, so it
   cannot leave content hidden if JS fails — the animation is on a delay,
   not a class toggle.

   Targets the direct children of whichever wrapper the page uses:
     homepage  → .mm-hero__copy (centred) + the full-width media frame
     inner     → .row > .col    (split)
   -------------------------------------------------------------------------- */
.mm-hero__copy>*,
.mm-hero .row>[class*="col-"]>*,
.mm-hero .mm-frame--hero {
  opacity: 0;
  animation: mm-enter .7s var(--mm-ease) forwards;
}

/* stagger by position within the column */
.mm-hero__copy>*:nth-child(1),
.mm-hero .row>[class*="col-"]>*:nth-child(1) {
  animation-delay: .05s;
}

.mm-hero__copy>*:nth-child(2),
.mm-hero .row>[class*="col-"]>*:nth-child(2) {
  animation-delay: .15s;
}

.mm-hero__copy>*:nth-child(3),
.mm-hero .row>[class*="col-"]>*:nth-child(3) {
  animation-delay: .25s;
}

.mm-hero__copy>*:nth-child(4),
.mm-hero .row>[class*="col-"]>*:nth-child(4) {
  animation-delay: .35s;
}

/* the media column comes in behind the copy */
.mm-hero .row>[class*="col-"]:last-child>* {
  animation-delay: .4s;
}

.mm-hero .mm-frame--hero {
  animation-delay: .35s;
}

/* Pages with a short hero: the section below is already in view on load,
   so it joins the entrance sequence rather than waiting for a scroll. */
   .mm-hero + .mm-section > .mm-container {
    opacity: 0;
    animation: mm-enter .7s var(--mm-ease) .45s forwards;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .mm-hero + .mm-section > .mm-container { opacity: 1; animation: none; }
  }

@keyframes mm-enter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* the annotation pills already stagger themselves, so push their delays
      back to start after the frame has landed */
.mm-hero .mm-annotate__pill {
  animation-delay: calc(var(--mm-delay, 0s) + .6s);
}

@media (prefers-reduced-motion: reduce) {

  .mm-hero__copy>*,
  .mm-hero .row>[class*="col-"]>*,
  .mm-hero .mm-frame--hero {
    opacity: 1;
    animation: none;
  }
}

/* --- sticky feature slider -------------------------------------------------
   Left column scrolls; right column pins and cross-fades its layers.

   If pinning ever stops working, the cause is almost always an ancestor
   becoming a scroll container (overflow other than visible) or establishing
   a containing block (transform / filter / perspective). Check body first.
   -------------------------------------------------------------------------- */
.mm-slider-section {
  position: relative;
  padding-block: var(--mm-space-section-tight);
}

.mm-slider {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: stretch;
  /* the stage must inherit the text column's height
                             or the sticky child has nowhere to travel */
}

.mm-slider__text {
  width: 45%;
  max-width: 488px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 55vh;
  /* scroll distance between switches */
  padding-top: calc(50vh - 200px);
  /* centres block one on first paint  */
  padding-bottom: 40vh;
}

.mm-slider__stage {
  width: 50%;
  max-width: 592px;
  align-self: stretch;
}

/* clamp keeps the offset positive on short viewports, where 50vh - 200px
   would go negative and push the panel off the top of the screen */
.mm-slider__sticky {
  position: sticky;
  top: clamp(1.5rem, calc(50vh - 200px), 12rem);
}

/* On laptop-height screens a 570px panel plus its offset overruns the
   viewport and the bottom is permanently cut off. Drive height from the
   screen instead and let the aspect ratio go. */
@media (min-width: 992px) and (max-height: 860px) {
  .mm-slider__stage .mm-frame--stage {
    aspect-ratio: auto;
    height: calc(80vh - 6rem);
    height: calc(80svh - 6rem);
  }

  .mm-slider__sticky {
    top: 10rem;
  }
}

/* Below lg there is no pinning: the stage is dropped and each text block
   renders its own visual inline. */
@media (max-width: 991.98px) {
  .mm-slider {
    flex-direction: column;
    gap: 3.75rem;
  }

  .mm-slider__text {
    width: 100%;
    max-width: none;
    gap: 3.75rem;
    padding: 0;
  }

  .mm-slider__stage {
    display: none;
  }
}


/* ==========================================================================
   15  SHARED VIEW PARTS
   Carried over from the previous build so About, FAQ, Contact and the
   membership blocks keep working. They read the aliases in section 02, so
   they picked up the new palette automatically. Migrate them to --mm-*
   tokens as you touch each view.
   ========================================================================== */

/* --- accordion ---------------------------------------------------------- */
.accordion-item {
  margin-bottom: 20px;
  border-radius: 10px !important;
  background-color: var(--mm-surface);
  border: 1px solid var(--mm-line) !important;
  box-shadow: none !important;
  padding: 0;
}

.accordion-header {
  border-radius: 10px !important;
}

.accordion-item>.accordion-header .accordion-button {
  border-radius: 10px;
  background-color: var(--mm-surface);
  border: 0;
  box-shadow: none !important;
  padding: 20px;
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
  background-position: center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E6B4C' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed) {
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.accordion-body {
  padding: 0 20px 20px;
  color: var(--mm-text-muted);
}

.accordion-button svg {
  fill: var(--mm-action);
}

/* --- forms -------------------------------------------------------------- */
.form-label {
  font-weight: 500;
  color: var(--mm-text);
}

.form-control {
  padding: 12px 16px;
  border-radius: var(--mm-radius-xs);
  border: 1px solid var(--mm-line);
  background-color: var(--mm-surface);
  color: var(--mm-text);
  transition: var(--transition);
}

.form-control::placeholder {
  color: var(--mm-text-muted);
  opacity: 1;
}

.form-control:focus {
  border-color: var(--mm-action);
  box-shadow: 0 0 0 .15rem rgba(22, 182, 127, .18);
  background-color: var(--mm-white);
}

.input-group {
  background-color: var(--mm-surface-wash);
  border-radius: var(--mm-radius-xs);
  overflow: hidden;
}

.input-group-text {
  background-color: var(--mm-surface-wash);
  border: 0;
  color: var(--mm-text);
  border-radius: var(--mm-radius-xs) 0 0 var(--mm-radius-xs);
}

/* --- backgrounds -------------------------------------------------------- */
.bg-light {
  background-color: var(--mm-surface-wash) !important;
}

.bg {
  padding: var(--section-p-xs) var(--section-p-sm) !important;
  border-radius: var(--mm-radius-xs);
  border: 1px solid var(--mm-line);
}

.bg-sm {
  padding: var(--section-p-xs) !important;
  border-radius: var(--mm-radius-xs);
  border: 1px solid var(--mm-line);
}

.bg-xxs {
  padding: var(--section-p-xs) var(--section-p-xxs) !important;
  border-radius: var(--mm-radius-xs);
  border: 1px solid var(--mm-line);
}

.bg-pattern-dots {
  background-image: radial-gradient(rgba(10, 21, 18, .05) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

/* --- offset image frames ------------------------------------------------ */
.fx {
  position: relative;
  display: inline-block;
  max-width: 100%;
  isolation: isolate;
}

.fx img {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--br-frame);
  border: 1px solid var(--mm-line);
}

.fx-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--br-frame);
  background: var(--mm-surface-tint);
  transform: translate(18px, 18px);
  transition: transform .35s ease;
}

.fx-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--br-frame);
  border: 1.5px solid var(--mm-ink);
  transform: translate(-14px, -14px);
  transition: transform .35s ease;
}

.fx-frame:hover::before {
  transform: translate(8px, 8px);
}

.fx-frame:hover::after {
  transform: translate(-7px, -7px);
}

.fx-frame--left::before {
  background: var(--mm-surface-wash);
  transform: translate(-18px, 18px);
}

.fx-frame--left::after {
  transform: translate(14px, -14px);
}

.fx-frame--left:hover::before {
  transform: translate(-8px, 8px);
}

.fx-frame--left:hover::after {
  transform: translate(7px, -7px);
}

.fx-frame.fx-warm::before {
  background: var(--mm-green-200);
}

@media (max-width: 575.98px) {
  .fx-frame::before {
    transform: translate(10px, 10px);
  }

  .fx-frame::after {
    transform: translate(-8px, -8px);
  }

  .fx-frame--left::before {
    transform: translate(-10px, 10px);
  }

  .fx-frame--left::after {
    transform: translate(8px, -8px);
  }
}

/* --- oversized ghost numerals ------------------------------------------- */
.section-index {
  position: absolute;
  z-index: 0;
  top: -.34em;
  left: -.08em;
  font-size: clamp(5rem, 14vw, 11rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.04em;
  color: var(--mm-emphasis);
  opacity: .09;
  pointer-events: none;
}

.section-index--sm {
  font-size: clamp(4rem, 11vw, 7rem);
}

/* --- numbered membership blocks ----------------------------------------- */
.feature-list {
  counter-reset: feat;
}

.feature-block {
  counter-increment: feat;
  position: relative;
  padding: 1.6rem 0 0 3rem;
  margin-top: 1.6rem;
  border-top: 1px solid var(--mm-line);
}

.feature-block:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.feature-block::before {
  content: counter(feat, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.6rem;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--mm-emphasis);
}

.feature-block:first-child::before {
  top: 0;
}

@media (max-width: 575.98px) {
  .feature-block {
    padding-left: 2.5rem;
  }
}

/* --- FAQ ---------------------------------------------------------------- */
.faq-categories {
  counter-reset: cat;
}

.faq-category {
  counter-increment: cat;
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 2.75rem;
  padding: 2.75rem 0;
  border-top: 1px solid var(--mm-line);
}

.faq-category:first-child {
  border-top: 0;
  padding-top: 1rem;
}

.faq-category-head {
  position: sticky;
  top: 6rem;
  align-self: start;
}

.faq-category-head::before {
  content: counter(cat, decimal-leading-zero);
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--mm-emphasis);
  margin-bottom: .5rem;
}

.faq-category-head h2 {
  margin: 0 !important;
}

.faq-page .accordion {
  counter-reset: q;
  margin-bottom: 0 !important;
}

.faq-page .accordion-item {
  counter-increment: q;
  margin-bottom: 0 !important;
  background: transparent;
  border: 0 !important;
  border-top: 1px solid var(--mm-line) !important;
  border-radius: 0 !important;
}

.faq-page .accordion-item:last-child {
  border-bottom: 1px solid var(--mm-line) !important;
}

.faq-page .accordion-item>.accordion-header .accordion-button {
  padding: 1.35rem 2.5rem 1.35rem 3rem !important;
  background: transparent !important;
  border-radius: 0 !important;
  position: relative;
}

/* answers are body copy, not supporting text — they need full contrast */
.faq-page .accordion-body .mm-body {
  color: var(--mm-text);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.faq-page .accordion-button::before {
  content: counter(q, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--mm-text-link);
}

.faq-page .accordion-button:not(.collapsed) {
  color: var(--mm-text-link);
}

.faq-page .accordion-body {
  padding: 0 2.5rem 1.5rem 3rem !important;
}

@media (max-width: 991.98px) {
  .faq-category {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    padding: 2rem 0;
  }

  .faq-category-head {
    position: static;
  }

  .section-index {
    font-size: clamp(3.5rem, 18vw, 6rem);
    opacity: .07;
  }
}

@media (max-width: 575.98px) {
  .faq-page .accordion-item>.accordion-header .accordion-button {
    padding-left: 2.4rem !important;
  }

  .faq-page .accordion-body {
    padding-left: 2.4rem !important;
  }
}

/* --- contact CTA -------------------------------------------------------- */
.contact-cta-section {
  padding-block: var(--mm-space-section);
}

.contact-cta-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mm-emphasis);
  margin-bottom: .75rem;
}

.contact-cta-card {
  background-color: var(--mm-surface);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius-md);
  padding: 2rem 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: border-color var(--transition-slow);
}

.contact-cta-card:hover {
  border-color: var(--mm-action);
  box-shadow: none;
  transform: none;
}

.contact-cta-card--featured {
  border-color: var(--mm-action);
  background: linear-gradient(135deg, var(--mm-white) 70%, var(--mm-surface-wash) 100%);
}

.contact-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--mm-radius-xs);
  background-color: var(--mm-surface-tint);
  color: var(--mm-text-link);
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.contact-cta-icon--accent {
  background-color: var(--mm-surface-wash);
  color: var(--mm-emphasis);
}

.contact-cta-card-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--mm-text-muted);
  margin-bottom: .4rem;
}

.contact-cta-card-value {
  font-size: var(--fs-h5);
  font-weight: 600;
  color: var(--mm-text);
  text-decoration: none;
  line-height: 1.3;
  margin-bottom: .5rem;
  transition: var(--transition);
}

.contact-cta-card-value:hover {
  color: var(--mm-text-link);
}

.contact-cta-card-note {
  font-size: var(--fs-sm);
  color: var(--mm-text-muted);
  margin: 0;
}

.cta-band {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background: var(--mm-surface-wash);
  border-top: 1px solid var(--mm-line);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.contact-cta-row {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: var(--mm-surface);
  border: 1px solid var(--mm-line);
  padding: 1.4rem 1.5rem;
  transition: border-color var(--transition-slow);
}

.contact-cta-row:hover {
  border-color: var(--mm-action);
}

.contact-cta-row--featured {
  border-color: var(--mm-action);
  border-left: 3px solid var(--mm-action);
}

.contact-cta-row__body {
  display: flex;
  flex-direction: column;
}

.contact-cta-row .contact-cta-icon {
  margin-bottom: 0;
}

/* --- contact + support panels ------------------------------------------- */
.contact-form-panel {
  position: relative;
  background: var(--mm-surface);
  border: 1px solid var(--mm-line);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  height: 100%;
}

.contact-form-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 3px;
  background: var(--mm-action);
}

.contact-aside {
  background: var(--mm-surface-wash);
  border: 1px solid var(--mm-line);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  height: 100%;
}

.contact-aside__item {
  padding-top: 1.1rem;
  margin-top: 1.1rem;
  border-top: 1px solid var(--mm-line);
}

.contact-aside__item a:hover {
  color: var(--mm-text-link) !important;
}

.support-statement {
  text-align: center;
  border-block: 1px solid var(--mm-line);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.support-statement p {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.6;
  color: var(--mm-text);
  max-width: 46rem;
  margin-inline: auto;
}


/* ==========================================================================
   16  ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .mm-marquee__track {
    animation: none;
  }

  .fx-frame::before, .fx-frame::after {
    transition: none;
  }
}


/* ==========================================================================
   17  LEGAL PAGES
   ========================================================================== */

/* --- long-form legal pages ----------------------------------------------
   Narrow measure, clear heading rhythm, plain lists. Used by privacy and
   terms, which are read rather than scanned. */
   .mm-legal { margin-inline: auto; }
   .mm-legal h2 { margin: 3rem 0 1rem; }
   .mm-legal h2:first-child { margin-top: 0; }
   .mm-legal p { margin-bottom: 1.1rem; }
   .mm-legal ul { margin: 0 0 1.75rem; padding-left: 1.25rem; }
   .mm-legal li { margin-bottom: .5rem; }
   .mm-legal a { color: var(--mm-text-link); text-decoration: underline; text-underline-offset: 2px; }
   .mm-legal a:hover { color: var(--mm-text-link-hover); }
   .mm-legal__updated {
     padding-bottom: 2rem;
     margin-bottom: 2.5rem;
     border-bottom: 1px solid var(--mm-line);
   }

   /* =========================================================
   Legal page table — used by the cookie policy
   Uses the same --mm-* variables as the rest of the system,
   each with a fallback in case the name differs.
   ========================================================= */

.mm-legal__table-wrap {
  margin: 2rem 0 2.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mm-legal__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
  font-size: .95rem;
  line-height: 1.7;
}

.mm-legal__table th,
.mm-legal__table td {
  text-align: left;
  vertical-align: top;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--mm-border, #e5e7eb);
}

.mm-legal__table thead th {
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mm-text-muted, #6b7280);
  border-bottom-width: 2px;
  padding-top: 0;
}

.mm-legal__table tbody th {
  width: 26%;
  font-weight: 600;
  white-space: nowrap;
  color: var(--mm-text, #111827);
}

.mm-legal__table tbody td {
  color: var(--mm-text-muted, #6b7280);
}

.mm-legal__table tbody tr:last-child th,
.mm-legal__table tbody tr:last-child td {
  border-bottom: 0;
}

/* Stack into cards on narrow screens rather than scrolling sideways */
@media (max-width: 640px) {
  .mm-legal__table { min-width: 0; }
  .mm-legal__table thead { display: none; }
  .mm-legal__table tbody tr,
  .mm-legal__table tbody th,
  .mm-legal__table tbody td { display: block; width: auto; }
  .mm-legal__table tbody tr {
      padding: 1rem 0;
      border-bottom: 1px solid var(--mm-border, #e5e7eb);
  }
  .mm-legal__table tbody tr:last-child { border-bottom: 0; }
  .mm-legal__table tbody th {
      padding: 0 0 .35rem;
      border-bottom: 0;
      white-space: normal;
  }
  .mm-legal__table tbody td { padding: 0; border-bottom: 0; }
}