/*
 * base.css — theme-agnostic layout & template structures.
 *
 * This file is loaded for every deck. Skins (marcelmellor, sipgate) only
 * provide colors, fonts, and brand-specific overrides via the custom
 * properties declared below.
 *
 * Theme hooks (override in skin CSS):
 *   --mm-bg, --mm-section-bg, --mm-fg, --mm-fg-on-dark
 *   --mm-accent, --mm-accent-soft, --mm-link
 *   --mm-divider-bg
 *   --mm-font-body, --mm-font-display
 *   --mm-h1-weight, --mm-h2-weight
 */

:root {
  /* Layout */
  --mm-slide-padding: 40px;
  --mm-slide-padding-wide: 56px;
  --mm-body-text: clamp(18px, 1.6vw, 28px);

  /* Theme hooks — fallbacks (skins override) */
  --mm-bg: #2f0d5b;
  --mm-section-bg: #ffffff;
  --mm-fg: #2f0d5b;
  --mm-fg-on-dark: #ffffff;
  --mm-accent: #ffa800;
  --mm-accent-soft: #e8ac68;
  --mm-link: #2f0d5b;
  --mm-divider-bg: #2f0d5b;
  --mm-font-body: system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mm-font-display: var(--mm-font-body);
  --mm-h1-weight: 500;
  --mm-h2-weight: 500;
}

/* =========================================================================
 * Reveal base
 * ========================================================================= */

body,
.reveal-viewport {
  background: var(--mm-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.reveal {
  font-family: var(--mm-font-body);
  color: var(--mm-fg);
  background: transparent;
  font-weight: 400;
}

.reveal .slides {
  text-align: left;
  height: 100%;
}

.reveal .slides > section,
.reveal .slides > section > section,
.reveal .pdf-page > section {
  height: 100%;
  min-height: 100%;
}

/* Reveal v5 prints set `padding: 0 !important` on all sections (selector
   `html.reveal-print .reveal .slides section`). We have to match that
   specificity to override and re-apply our slide padding so PDF output
   matches the on-screen layout. */
html.reveal-print .reveal .slides section,
html.print-pdf .reveal .slides section {
  padding: 80px var(--mm-slide-padding-wide) var(--mm-slide-padding) var(--mm-slide-padding-wide) !important;
}
html.reveal-print .reveal .slides section.mm-quote,
html.reveal-print .reveal .slides section.mm-big-text,
html.reveal-print .reveal .slides section.mm-image,
html.reveal-print .reveal .slides section.mm-text-image,
html.print-pdf .reveal .slides section.mm-quote,
html.print-pdf .reveal .slides section.mm-big-text,
html.print-pdf .reveal .slides section.mm-image,
html.print-pdf .reveal .slides section.mm-text-image {
  padding: 0 !important;
}
html.reveal-print .reveal .slides section.mm-collage,
html.print-pdf .reveal .slides section.mm-collage {
  padding: var(--mm-slide-padding) var(--mm-slide-padding-wide) !important;
}

/* Reveal's progress bar (purple accent) bleeds a thin line onto every
   exported page — hide it in print/PDF output. */
html.reveal-print .reveal .progress,
html.print-pdf .reveal .progress {
  display: none !important;
}


.reveal section {
  padding: 80px var(--mm-slide-padding-wide) var(--mm-slide-padding) var(--mm-slide-padding-wide);
  box-sizing: border-box;
  background: var(--mm-section-bg);
}

/* Standard slide (no mm-* class, no template) — vertically centered.
   The content is wrapped at runtime in `.mm-standard-content` because
   Reveal sets `display: block` inline on the section, blocking direct flex. */
.mm-standard-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.reveal section:not([class*="mm-"]) h2 {
  margin-bottom: 12px;
}

.reveal section:not([class*="mm-"]) ul {
  list-style: disc;
  margin: 48px 0 0 60px;
}

/* =========================================================================
 * Typography
 * ========================================================================= */

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-h1-weight);
  color: var(--mm-fg);
  line-height: 1.15;
}

.reveal h1 {
  font-size: clamp(72px, 6.6vw, 105px);
  margin: 0 0 12px 0;
}

.reveal h2 {
  font-size: clamp(50px, 4.6vmin, 78px);
  font-weight: var(--mm-h2-weight);
  margin: 0 0 12px 0;
}

.reveal p {
  font-size: clamp(42px, 3.6vw, 60px);
  line-height: 1.35;
}

.mm-standard-content > p {
  margin: 0;
}

.mm-standard-content > p + p {
  margin-top: 0.4em;
}

.reveal li {
  font-size: clamp(50px, 4.6vmin, 78px);
  line-height: 1.35;
}

.reveal a {
  color: var(--mm-link);
  text-decoration: underline;
}

.reveal strong {
  font-weight: 500;
}

.reveal ul {
  list-style: disc;
  margin: 48px 0 0 60px;
  padding: 0;
}

.reveal ul li::marker {
  color: var(--mm-fg);
}

/* =========================================================================
 * Dark mode (per-slide via [class:: dark]) + divider
 * ========================================================================= */

.reveal section.mm-divider,
.reveal .slides > section.mm-divider,
.reveal section.dark,
.reveal .slides > section.dark {
  background: var(--mm-divider-bg);
}

.reveal section.dark,
.reveal section.dark h1,
.reveal section.dark h2,
.reveal section.dark h3,
.reveal section.dark p,
.reveal section.dark li,
.reveal section.dark .mm-text,
.reveal section.dark .mm-signature,
.reveal section.dark strong {
  color: var(--mm-fg-on-dark);
}

.reveal section.dark a {
  color: var(--mm-fg-on-dark);
}

.reveal section.dark ul li::marker {
  color: var(--mm-fg-on-dark);
}

.reveal section.dark.mm-quote .mm-quote-author {
  color: var(--mm-accent);
  opacity: 1;
}

.mm-divider * {
  color: var(--mm-fg-on-dark);
}

/* =========================================================================
 * Brandmark — source attribution on content slides
 * Injected per section in index.html (skips title & thanks slides).
 * Carries its own contrast so it stays legible on photos/fullscreen images.
 * ========================================================================= */

.mm-brandmark {
  position: absolute;
  right: 40px;
  bottom: 28px;
  z-index: 30;
  font-family: var(--mm-font-display, var(--mm-font-body));
  font-weight: 500;
  font-size: 16px;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: right;
  color: var(--mm-fg-on-dark);
  background: var(--mm-fg);
  padding: 8px 12px 7px;
  pointer-events: none;
  user-select: none;
}

/* Dark variant: white text directly on the slide's dark ground (no separate
   box — the dark slide acts as the ground). Applied automatically on dark
   slides (`dark` class or dark `data-background-color`) or via an explicit
   `[class:: brandmark-light]` opt-in. */
.reveal section.dark .mm-brandmark,
.reveal section.brandmark-light .mm-brandmark {
  color: var(--mm-fg-on-dark);
  background: transparent;
}

/* =========================================================================
 * Title template
 * ========================================================================= */

.reveal section.mm-title .mm-title-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "title title"
    "signature illustration";
  align-items: stretch;
  gap: 24px 32px;
  height: 100%;
}

.mm-title .mm-title-text {
  grid-area: title;
  align-self: start;
  margin-top: 120px;
  max-width: 80%;
}

.mm-title .mm-signature {
  font-size: 34px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  grid-area: signature;
  align-self: end;
  justify-self: start;
  font-weight: 500;
}

.mm-title .mm-illustration {
  width: 260px;
  height: auto;
  grid-area: illustration;
  align-self: end;
  justify-self: end;
}

.mm-title h1 {
  font-size: clamp(82px, 7vw, 98px);
}

/* =========================================================================
 * Quote / Big-Text — shared centering
 * ========================================================================= */

.mm-quote,
.mm-big-text,
.mm-icon-title,
.mm-icon-quote {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  text-align: center;
}

.reveal section.mm-quote,
.reveal section.mm-big-text {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.mm-quote p,
.mm-big-text p,
.mm-icon-title p,
.mm-icon-quote p,
.mm-quote .mm-text,
.mm-big-text .mm-text,
.mm-icon-title .mm-text,
.mm-icon-quote .mm-text {
  font-size: clamp(56px, 4.9vw, 76px);
}

/* Quote */
.reveal section.mm-quote .mm-quote-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  gap: 1.4em;
  text-align: center;
}

.reveal section.mm-quote .mm-quote-wrap .mm-text {
  width: auto;
  max-width: min(1100px, 88%);
  margin: 0 auto;
  text-align: center;
}

.reveal section.mm-quote.mm-quote-has-author .mm-text {
  font-size: clamp(36px, 3.2vw, 56px);
  line-height: 1.25;
}

.reveal section.mm-quote .mm-quote-author {
  font-size: clamp(18px, 1.4vw, 24px);
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.55;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  max-width: 88%;
}

.reveal section.mm-quote .mm-quote-author::before {
  content: "— ";
}

.reveal section.mm-quote .mm-quote-author a {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}

/* Big text */
.reveal section.mm-big-text .mm-big-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: relative;
}

.reveal section.mm-big-text .mm-text {
  margin: 0;
  width: min(1100px, 92%);
  max-width: 1100px;
}

.mm-big-text p,
.mm-big-text .mm-text {
  font-size: clamp(56px, 4.9vw, 76px);
  line-height: 1.1;
  max-width: 1100px;
  white-space: pre-line;
}

.mm-big-text .mm-paragraph-break {
  display: block;
  height: 0.2em;
  width: 100%;
}

.reveal section.mm-big-text .mm-big-text-kicker {
  font-family: var(--mm-font-body);
  font-size: clamp(20px, 1.5vw, 28px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-kicker-color, var(--mm-accent, currentColor));
  margin: 0 0 1.2em 0;
  width: auto;
  max-width: 88%;
  text-align: center;
  line-height: 1.2;
}

.mm-big-text .mm-big-text-illustration {
  position: absolute;
  right: 64px;
  bottom: 48px;
  width: 180px;
  height: auto;
}

.reveal section.mm-big-text.mm-big-text-illustration-bottom .mm-big-text-illustration {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 56px;
  transform: translateX(-50%);
  width: 180px;
  margin-top: 0;
}

/* =========================================================================
 * Stat — large number with a subline below
 * ========================================================================= */

.mm-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  text-align: center;
}

.reveal section.mm-stat {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.reveal section.mm-stat .mm-stat-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.reveal section.mm-stat .mm-stat-number {
  margin: 0;
  font-size: clamp(120px, 12vw, 220px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}

.reveal section.mm-stat .mm-stat-subline {
  margin: 0.4em 0 0 0;
  font-size: clamp(22px, 1.8vw, 34px);
  line-height: 1.25;
  max-width: 80%;
  opacity: 0.65;
}

/* =========================================================================
 * Split — two images side by side, optional connector icon between
 * ========================================================================= */

.reveal section.mm-split {
  width: 100%;
  height: 100%;
  /* Left/right flush with the brandmark (--mm-slide-padding = 40px); extra
     bottom space so vertically-centered images clear the brandmark. */
  padding: 48px var(--mm-slide-padding) 96px;
  margin: 0;
}

.reveal section.mm-split .mm-split-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.reveal section.mm-split .mm-split-title {
  font-family: var(--mm-font-body);
  font-size: clamp(20px, 1.5vw, 28px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-kicker-color, var(--mm-accent, currentColor));
  margin: 0 0 0.9em 0;
  text-align: center;
}

.reveal section.mm-split .mm-split-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(24px, 3vw, 56px);
  width: 100%;
  /* Fill the vertical space left over after the (optional) title, so images
     can use the full available height. */
  flex: 1 1 auto;
  min-height: 0;
}

.reveal section.mm-split .mm-split-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer-align the images: left cell flush-left (aligned with the brandmark),
   right cell flush-right, arrow stays centered between them. */
.reveal section.mm-split .mm-split-cell:first-child {
  justify-content: flex-start;
}

.reveal section.mm-split .mm-split-cell:last-child {
  justify-content: flex-end;
}

.reveal section.mm-split .mm-split-cell img {
  max-width: 100%;
  /* Fill the cell's height (= the stretched row). Uses % of the logical slide
     canvas, not vh, so proportions stay stable when the browser is resized. */
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.reveal section.mm-split .mm-split-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reveal section.mm-split .mm-split-icon img {
  width: clamp(56px, 6vw, 96px);
  height: auto;
}

/* =========================================================================
 * Bullets — heading + bullet list
 * ========================================================================= */

.reveal section.mm-bullets h2 {
  font-size: clamp(56px, 4.8vw, 84px);
  line-height: 1.05;
  margin: 0 0 0.6em 0;
  max-width: 90%;
}

.reveal section.mm-bullets ul {
  list-style: disc;
  margin: 0;
  padding-left: 80px;
}

.reveal section.mm-bullets li {
  font-size: clamp(34px, 3.1vw, 50px);
  line-height: 1.35;
  margin-bottom: 0.3em;
  padding-left: 0.4em;
}

.reveal section.mm-bullets ul li::marker {
  color: var(--mm-fg);
}

/* Ordered lists — numbers in colored circles */
.reveal ol,
.reveal section.mm-bullets ol {
  list-style: none;
  counter-reset: mm-ol-counter;
  margin: 0;
  padding-left: 80px;
}

.reveal ol > li,
.reveal section.mm-bullets ol > li {
  counter-increment: mm-ol-counter;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.4em;
}

.reveal ol > li::before,
.reveal section.mm-bullets ol > li::before {
  content: counter(mm-ol-counter);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: var(--mm-kicker-color, var(--mm-accent, currentColor));
  color: var(--mm-on-kicker, #fff);
  font-family: var(--mm-font-body);
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
}

/* =========================================================================
 * Wordcloud
 * ========================================================================= */

.mm-wordcloud {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
}

.mm-wordcloud span {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 500;
  color: var(--mm-fg);
  white-space: nowrap;
}

.mm-wordcloud .xl { font-size: clamp(78px, 6.2vw, 140px); }
.mm-wordcloud .lg { font-size: clamp(60px, 4.6vw, 92px); }
.mm-wordcloud .md { font-size: clamp(48px, 3.8vw, 72px); }
.mm-wordcloud .sm { font-size: clamp(36px, 3.2vw, 52px); }

/* =========================================================================
 * Icon-Title / Icon-Quote / Icon-Quote-Top
 * ========================================================================= */

.mm-icon-title {
  --mm-icon-title-size: 120px;
  --mm-icon-title-gap: 36px;
  --mm-icon-title-offset: -78px;
}

.mm-icon-title.mm-icon-title-large {
  --mm-icon-title-size: 150px;
  --mm-icon-title-gap: 40px;
  --mm-icon-title-offset: -95px;
}

.mm-icon-title .mm-icon {
  width: var(--mm-icon-title-size);
  height: var(--mm-icon-title-size);
  margin-right: var(--mm-icon-title-gap);
}

.mm-icon-quote .mm-icon {
  width: 120px;
  height: 120px;
  margin-right: 36px;
}

.mm-icon-title .mm-icon-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  transform: translateX(var(--mm-icon-title-offset));
}

.mm-icon-title .mm-text {
  margin: 0;
}

.mm-icon-quote .mm-text {
  margin: 0;
  text-align: center;
}

.mm-icon-quote {
  position: relative;
}

.mm-icon-quote .mm-icon-quote-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.mm-icon-quote .mm-icon {
  position: absolute;
  left: 8%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0;
}

.mm-icon-quote .mm-text {
  max-width: 70%;
}

.mm-icon-quote-top {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mm-icon-quote-top .mm-icon-quote-top-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  height: 100%;
  width: 100%;
}

.mm-icon-quote-top .mm-icon {
  width: 110px;
  height: 110px;
  margin: 0;
}

.mm-icon-quote-top .mm-text {
  margin: 0;
  text-align: center;
  max-width: 80%;
  font-size: clamp(56px, 4.9vw, 76px);
}

/* Icon pair */
.reveal section.mm-icon-pair {
  width: 100%;
  height: 100%;
  padding: 72px var(--mm-slide-padding-wide) 96px;
  margin: 0;
}

.mm-icon-pair .mm-icon-pair-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(34px, 4vmin, 64px);
  height: 100%;
  width: 100%;
}

.mm-icon-pair .mm-icon-pair-title {
  margin: 0;
  font-size: clamp(28px, 2.2vw, 42px);
  text-align: center;
}

.mm-icon-pair .mm-icon-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(72px, 9vw, 150px);
  align-items: start;
  justify-content: center;
  width: min(1050px, 86%);
}

.mm-icon-pair .mm-icon-pair-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  gap: clamp(10px, 1.2vmin, 18px);
  text-align: center;
}

.mm-icon-pair .mm-icon-pair-image {
  width: clamp(340px, 46vmin, 440px);
  height: auto;
  display: block;
}

.mm-icon-pair .mm-icon-pair-label {
  margin: 0;
  color: var(--mm-fg);
  font-family: var(--mm-font-display);
  font-size: clamp(42px, 3.6vw, 60px);
  font-weight: var(--mm-h2-weight);
  line-height: 1.12;
  text-align: center;
}

.mm-icon-title p,
.mm-icon-quote p {
  max-width: 900px;
}

.mm-icon-title {
  text-align: left;
  justify-content: center;
}

.mm-icon-quote {
  text-align: left;
  justify-content: flex-start;
}

/* =========================================================================
 * Thanks
 * ========================================================================= */

.mm-thanks {
  height: 100%;
}

.mm-thanks .mm-thanks-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mm-thanks h1 {
  font-size: clamp(52px, 4.7vw, 76px);
  margin-top: 120px;
}

.mm-thanks .mm-thanks-footer {
  margin-top: auto;
}

.mm-thanks .mm-footer-link {
  font-size: 36px;
}

.mm-thanks .mm-thanks-illustration {
  width: auto;
  height: 192px;
}

.mm-thanks-footer {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 24px;
  align-self: end;
  margin-top: auto;
  padding-bottom: 8px;
}

/* Contact card (thanks template) */
.mm-contact-card {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 48px;
}
.mm-contact-portrait {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.mm-contact-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mm-contact-name {
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 700;
  font-family: var(--mm-font-display, var(--mm-font-body));
  color: var(--mm-fg, #1a1a2e);
}
.mm-contact-role {
  font-size: var(--mm-body-text);
  opacity: 0.6;
  margin-bottom: 8px;
}
.reveal .mm-contact-email a,
.reveal .mm-contact-link a {
  font-size: var(--mm-body-text);
  color: var(--mm-fg, #1a1a2e);
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.mm-contact-link {
  margin-top: 8px;
}

/* =========================================================================
 * Image / Text-Image / Collage
 * ========================================================================= */

.reveal section.mm-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  height: 100%;
}

.mm-image .mm-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mm-image .mm-image-content {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Full-bleed for images whose aspect nearly matches the 16:9 slide (set at
   runtime in index.html). Fills edge-to-edge without the `contain` letterbox
   sliver; graphics/charts with a clearly different aspect stay `contain`. */
.mm-image .mm-image-content.is-bleed {
  object-fit: cover;
}

/* Hero Image */
.reveal section.mm-hero-image {
  padding: 0 !important;
  overflow: hidden;
}

.mm-hero-image .mm-hero-image-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mm-hero-image h2 {
  flex-shrink: 0;
  padding: 32px var(--mm-slide-padding-wide) 16px;
  margin: 0;
  text-align: center;
}

.mm-hero-image .mm-hero-image-bg {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  /* Vertical alignment of the letterboxed image, set per slide via the
     [data-image-position:: top|center|bottom] inline field (default center).
     Horizontal alignment stays centered. */
  object-position: center var(--mm-image-position, center);
}

.mm-text-image {
  padding: 0 !important;
  overflow: hidden;
}

.mm-text-image .mm-text-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  height: 100%;
}

.mm-text-image .mm-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--mm-slide-padding) var(--mm-slide-padding-wide);
}

.mm-text-image .mm-content h2 {
  margin-bottom: 24px;
}

.mm-text-image .mm-content ul {
  margin-top: 0;
}

.reveal .mm-text-image .mm-content li {
  font-size: var(--mm-body-text);
}

.mm-text-image .mm-image-container {
  display: flex;
  align-items: stretch;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}

.mm-text-image .mm-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mm-text-image .mm-image-container img[src$=".svg"] {
  object-fit: contain;
  padding: 24px;
}

/* Product Demo (MacBook mockup) */
.mm-product-demo {
  padding: var(--mm-slide-padding) 0 var(--mm-slide-padding) var(--mm-slide-padding-wide) !important;
  overflow: hidden !important;
}

.mm-product-demo .mm-product-demo-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 48px;
  height: 100%;
  align-items: center;
  overflow: hidden;
}

.mm-product-demo .mm-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mm-product-demo .mm-content h2 {
  margin-bottom: 24px;
}

.mm-product-demo .mm-content ul {
  margin-top: 0;
}

.reveal .mm-product-demo .mm-content li {
  font-size: var(--mm-body-text);
}

.mm-device-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  overflow: visible;
}

.mm-macbook-frame {
  position: relative;
  width: 145%;
  flex-shrink: 0;
  margin-left: -10%;
}

.mm-macbook-mockup {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: block;
}

.mm-macbook-screen-clip {
  position: absolute;
  z-index: 1;
  top: 16.2%;
  left: 19.3%;
  width: 61.2%;
  height: 59.3%;
}

.mm-macbook-screen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}

/* Steps */
.mm-steps {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  padding: var(--mm-slide-padding) var(--mm-slide-padding-wide) !important;
}
.mm-steps h2 {
  margin-bottom: 8px;
}
.reveal .mm-steps .mm-steps-subtitle {
  font-size: var(--mm-body-text);
  opacity: 0.7;
  margin-bottom: 48px;
}
.mm-steps-track {
  position: relative;
  padding-top: 32px;
}
.mm-steps-line {
  position: absolute;
  top: 55px;
  left: 5%;
  right: 5%;
  height: 3px;
  background: var(--mm-accent, #7C3AED);
  opacity: 0.25;
}
.mm-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
}
.mm-step {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mm-step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mm-accent, #7C3AED);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.mm-step-title {
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 700;
  font-family: var(--mm-font-display, var(--mm-font-body));
  color: var(--mm-fg, #1a1a2e);
  margin-bottom: 8px;
}
.mm-step-desc {
  font-size: clamp(14px, 1.4vw, 22px);
  opacity: 0.65;
  line-height: 1.4;
}

/* Collage */
.mm-collage {
  padding: var(--mm-slide-padding) var(--mm-slide-padding-wide) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mm-collage .mm-collage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 20px;
  height: 100%;
  width: 100%;
  align-items: stretch;
}

.mm-collage-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mm-collage-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transform: translateX(var(--mm-collage-shift-x, 0px));
  will-change: transform;
}

.mm-collage-item-landscape { grid-column: span 2; grid-row: span 1; }
.mm-collage-item-portrait  { grid-column: span 1; grid-row: span 2; }
.mm-collage-item-square    { grid-column: span 1; grid-row: span 1; }

:where(.mm-collage .mm-collage-grid):has(.mm-collage-item:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-auto-flow: dense;
}

:where(.mm-collage .mm-collage-grid):has(.mm-collage-item:nth-child(2):last-child) .mm-collage-item {
  grid-column: auto;
  grid-row: auto;
}

.mm-collage-grid.mm-collage-layout-p0-l2-s0 {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

:where(.mm-collage .mm-collage-grid):has(.mm-collage-item:nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
}

:where(.mm-collage .mm-collage-grid):has(.mm-collage-item:nth-child(4)) {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: dense;
}

.mm-collage-grid.mm-collage-layout-p1-l1-s2 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: unset;
}

.mm-collage-grid.mm-collage-layout-p1-l1-s2 .mm-collage-item:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.mm-collage-grid.mm-collage-layout-p1-l1-s2 .mm-collage-item:nth-child(2) {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}

.mm-collage-grid.mm-collage-layout-p1-l1-s2 .mm-collage-item:nth-child(3) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.mm-collage-grid.mm-collage-layout-p1-l1-s2 .mm-collage-item:nth-child(4) {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

/* =========================================================================
 * Pricing
 * ========================================================================= */

.reveal section.mm-pricing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.mm-pricing .mm-pricing-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  gap: 40px;
}

.mm-pricing .mm-pricing-headline {
  font-size: clamp(36px, 3.2vw, 56px);
  text-align: center;
  margin: 0;
}

.mm-pricing .mm-pricing-grid {
  display: grid;
  gap: 24px;
  width: 100%;
  flex: 1;
  align-items: stretch;
}

.mm-pricing-1 .mm-pricing-grid { grid-template-columns: minmax(0, 420px); justify-content: center; }
/* minmax(0, 1fr): keep tracks equal even when a tile's content (e.g. a
   white-space: nowrap price) has a wider min-content size than its 1fr share. */
.mm-pricing-2 .mm-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-pricing-3 .mm-pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-pricing-4 .mm-pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mm-pricing-tile {
  background: var(--mm-section-bg);
  border: 2px solid color-mix(in srgb, var(--mm-fg) 12%, transparent);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.mm-pricing-tile.mm-pricing-highlighted {
  border-color: var(--mm-accent);
  box-shadow: 0 0 0 2px var(--mm-accent);
  position: relative;
}

.mm-pricing-name {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-h2-weight);
  font-size: clamp(22px, 2vw, 32px);
  color: var(--mm-fg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mm-pricing-price {
  font-family: var(--mm-font-body);
  font-weight: 700;
  font-size: clamp(28px, 2.8vw, 44px);
  color: var(--mm-fg);
  line-height: 1.1;
  white-space: nowrap;
}

.mm-pricing-price small {
  font-size: 0.5em;
  font-weight: 400;
  opacity: 0.5;
}

.mm-pricing-features {
  width: 100%;
  text-align: left;
  margin-top: 8px;
}

.mm-pricing-features ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mm-pricing-features li {
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.5;
  padding: 6px 0;
  border-top: 1px solid color-mix(in srgb, var(--mm-fg) 8%, transparent);
  color: var(--mm-fg);
}

.mm-pricing-features li:last-child {
  padding-bottom: 0;
}

.mm-pricing-footnote {
  margin-top: 24px;
  font-size: clamp(16px, 1.4vw, 22px);
  color: color-mix(in srgb, var(--mm-fg) 55%, transparent);
  text-align: center;
}

/* Dark mode */
.reveal section.dark .mm-pricing-tile {
  background: color-mix(in srgb, var(--mm-fg-on-dark) 8%, transparent);
  border-color: color-mix(in srgb, var(--mm-fg-on-dark) 20%, transparent);
}

.reveal section.dark .mm-pricing-tile.mm-pricing-highlighted {
  border-color: var(--mm-accent);
  box-shadow: 0 0 0 2px var(--mm-accent);
}

.reveal section.dark .mm-pricing-name,
.reveal section.dark .mm-pricing-price {
  color: var(--mm-fg-on-dark);
}

.reveal section.dark .mm-pricing-footnote {
  color: color-mix(in srgb, var(--mm-fg-on-dark) 55%, transparent);
}

.reveal section.dark .mm-pricing-features li {
  color: var(--mm-fg-on-dark);
  border-top-color: color-mix(in srgb, var(--mm-fg-on-dark) 15%, transparent);
}

/* =========================================================================
 * Cards — tiles with image + headline
 * ========================================================================= */

.reveal section.mm-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.mm-cards .mm-cards-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  gap: 40px;
}

.mm-cards .mm-cards-headline {
  font-size: clamp(36px, 3.2vw, 56px);
  text-align: center;
  margin: 0;
}

.mm-cards .mm-cards-grid {
  display: grid;
  gap: 24px;
  width: 100%;
  flex: 1;
  align-items: stretch;
}

.mm-cards-2 .mm-cards-grid { grid-template-columns: repeat(2, 1fr); }
.mm-cards-3 .mm-cards-grid { grid-template-columns: repeat(3, 1fr); }
.mm-cards-4 .mm-cards-grid { grid-template-columns: repeat(4, 1fr); }

.mm-card-tile {
  background: var(--mm-section-bg);
  border: 2px solid color-mix(in srgb, var(--mm-fg) 12%, transparent);
  border-radius: 16px;
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.mm-card-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 80px;
}

.mm-card-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mm-card-placeholder {
  background: color-mix(in srgb, var(--mm-fg) 6%, transparent);
  border-radius: 12px;
  width: 100%;
}

.mm-card-label {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-h2-weight);
  font-size: clamp(24px, 2.2vw, 36px);
  color: var(--mm-fg);
  line-height: 1.3;
}

.reveal section.dark .mm-card-tile {
  background: color-mix(in srgb, var(--mm-fg-on-dark) 8%, transparent);
  border-color: color-mix(in srgb, var(--mm-fg-on-dark) 20%, transparent);
}

.reveal section.dark .mm-card-label {
  color: var(--mm-fg-on-dark);
}

/* =========================================================================
 * Badges — inline labels rendered from [Word] in markdown
 * ========================================================================= */

.reveal .mm-badge {
  display: inline-block;
  font-family: var(--mm-font-body);
  font-size: 1em;
  font-weight: 500;
  line-height: 1.2;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: var(--mm-accent);
  color: var(--mm-bg);
  letter-spacing: 0.02em;
  vertical-align: baseline;
  margin: 0 0.15em;
  white-space: nowrap;
}

.reveal section.dark .mm-badge {
  background: var(--mm-accent);
  color: var(--mm-bg);
}

/* Two-column grid: a paragraph whose lines all start with a badge becomes
   a label/value layout. Built from <br>-separated lines at runtime. */
.reveal .mm-badge-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.2em;
  row-gap: 0.6em;
  align-items: baseline;
  margin: 0;
  /* font-size is set at runtime by fitBadgeGrid (auto-fit to slide). */
  font-size: 56px;
}

.reveal .mm-badge-grid .mm-badge-grid-label,
.reveal .mm-badge-grid .mm-badge-grid-text {
  font-size: 1em;
  line-height: 1.35;
}

.reveal .mm-badge-grid .mm-badge-grid-label {
  display: flex;
  align-items: center;
  padding-top: 0.1em;
}

.reveal .mm-badge-grid .mm-badge-grid-label .mm-badge {
  transform: none;
  margin: 0;
}

/* =========================================================================
 * Speaker Notes
 * ========================================================================= */

aside.notes ul,
aside.notes ol {
  margin-left: 20px;
  padding-left: 0;
}

aside.notes li {
  margin-bottom: 4px;
}

/* =========================================================================
 * Responsive
 * ========================================================================= */

@media (max-width: 900px) {
  :root {
    --mm-slide-padding: 28px;
    --mm-slide-padding-wide: 32px;
  }

  .mm-title {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .mm-title .mm-illustration {
    justify-self: center;
  }
}