/* ==========================================================================
   mumME — brand theme layer
   Built on the Geex admin template design system (assets/css/style.css).
   Load order:  style.css  ->  mumme.css

   Contents
   01. Fonts
   02. Palette & themes
   03. Base & scrollbars
   04. Layout helpers
   05. Surfaces (cards, sections)
   06. Stat cards
   07. Chips, pills & badges
   08. Buttons
   09. Avatars
   10. Match ring
   11. Progress
   12. Timeline / pipeline steps
   13. List rows
   14. Tabs & filter chips
   15. Forms, search, toggle
   16. Chat
   17. Tables
   18. Charts (bars, donut, legend)
   19. Empty state, toast, sheet, dropdown
   20. Landing page
   21. Onboarding
   22. Admin console
   23. Template shell adaptations
   24. Utilities & responsive
   25. Dark theme
   26. Template authentication pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Fonts
   Poppins is self-hosted (latin subset) so the template typography renders
   exactly as designed while the app stays fully offline.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/poppins/poppins-300.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/poppins/poppins-800.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   02. Palette & themes

   The palette is declared here and nowhere else, so a colour only ever has
   to change in one place. Two themes ship:
     · light -> :root                    (cream canvas, plum ink, sage accents)
     · dark  -> html[data-theme="dark"]  (deep-plum canvas, blush ink, coral)

   Values are taken from color-pallet/pallet.html:
     plum  #4E1F47   coral #F06B58   rose   #D25872   peach #FBC59D
     cream #FDFBFA   blush #F8EEF3
     sage  #BFCFBB (hint) / #E8EFE5 (mist) / #3F6B50 (deep) / #2F5240 (night)

   This block also re-points the Geex template's own tokens (--primary-color,
   --body-color, --section-color, ...) at the palette, so the template shell
   and every mumME component move together.
   -------------------------------------------------------------------------- */
:root {
  /* Palette primitives ------------------------------------------------- */
  --mm-plum: #4e1f47;
  --mm-plum-deep: #34122f;
  --mm-coral: #f06b58;
  --mm-coral-deep: #d2543f;
  --mm-rose: #d25872;
  --mm-rose-deep: #a93a55;
  --mm-peach: #fbc59d;
  --mm-peach-ink: #9a5a12;
  --mm-cream: #fdfbfa;
  --mm-cream-warm: #fff6ee;
  --mm-blush: #f8eef3;
  --mm-sage-hint: #bfcfbb;
  --mm-sage-mist: #e8efe5;
  --mm-sage: #3f6b50;
  --mm-sage-night: #2f5240;
  --mm-sage-soft: #a9c4a3;
  --mm-mauve: #5f4e63;
  --mm-ink: #2b1428;
  --mm-ink-soft: #5a4453;
  --mm-ink-muted: #7c6a76;
  --mm-hairline: #eae0e5;

  /* Semantic accent tokens — what every .mumme-* component consumes ----- */
  --mumme-primary: var(--mm-plum);
  --mumme-primary-dark: var(--mm-plum-deep);
  --mumme-primary-soft: rgba(78, 31, 71, 0.1);

  --mumme-secondary: var(--mm-coral);
  --mumme-secondary-dark: var(--mm-coral-deep);
  --mumme-secondary-soft: rgba(240, 107, 88, 0.14);

  /* `caution` doubles as a chart/indicator fill and as the chip accent; the
     fill uses the peach, the chip text uses the darker amber below. */
  --mumme-caution: var(--mm-peach);
  --mumme-caution-dark: var(--mm-peach-ink);
  --mumme-caution-soft: rgba(251, 197, 157, 0.4);

  --mumme-positive: var(--mm-sage);
  --mumme-positive-dark: var(--mm-sage-night);
  --mumme-positive-soft: rgba(191, 207, 187, 0.4);

  /* Calm surfaces. The palette gives sage a surface role, not just a status
     one — "Sage hint #BFCFBB: calm sections, wellness cards", "Sage mist
     #E8EFE5: tint for banners", "Sage night #2F5240: dark mode sage surface".
     Without these the sage family only ever appeared as chip text and icons. */
  --mumme-calm: var(--mm-sage-mist);
  --mumme-calm-strong: var(--mm-sage-hint);
  --mumme-calm-ink: var(--mm-ink);
  /* The eyebrow tone on a calm surface. Plum, not a warm grey: a grey-mauve
     both reads too light and muddies against green (the palette's own sage
     block uses plum for its heading). */
  --mumme-calm-ink-muted: var(--mm-plum);

  --mumme-info: var(--mm-mauve);
  --mumme-info-dark: #4a3b4e;
  --mumme-info-soft: rgba(95, 78, 99, 0.14);

  --mumme-negative: var(--mm-rose);
  --mumme-negative-dark: var(--mm-rose-deep);
  --mumme-negative-soft: rgba(210, 88, 114, 0.14);

  /* Neutrals ----------------------------------------------------------- */
  --mumme-ink: var(--mm-ink);
  --mumme-muted: var(--mm-ink-muted);
  --mumme-line: var(--mm-hairline);

  /* Surface tokens. Light values live here; the dark block re-maps them. */
  --mumme-surface: #ffffff;
  --mumme-surface-2: var(--mm-cream-warm);
  --mumme-surface-3: var(--mm-blush);
  --mumme-surface-hover: #f6eef2;
  --mumme-border: var(--mm-hairline);
  --mumme-text: var(--mm-ink);
  --mumme-text-muted: var(--mm-ink-muted);
  /* Copy laid over the hero artwork rather than an opaque surface: the artwork
     varies underneath it, so it needs its own, stronger value per theme. */
  --mumme-on-art: var(--mm-ink);

  --mumme-radius: 24px;
  --mumme-radius-sm: 14px;
  --mumme-radius-pill: 999px;

  --mumme-shadow: 0 10px 30px rgba(43, 20, 40, 0.06);
  --mumme-shadow-sm: 0 4px 14px rgba(43, 20, 40, 0.05);
  --mumme-shadow-lg: 0 22px 60px rgba(43, 20, 40, 0.12);

  /* Geex template tokens, re-pointed at the palette --------------------- */
  --primary-color: var(--mm-plum);
  --primary-color-transparent: rgba(78, 31, 71, 0.12);
  --secondary-color: var(--mm-peach);
  --dark-color: #1e0f1c;
  --body-color: var(--mm-ink);
  --desc-color: var(--mm-ink-soft);
  --sec-color: var(--mm-ink-muted);
  --gray-color: var(--mm-hairline);
  --grayTwo-color: #dcd0d6;
  --grayThree-color: #c3b6bc;
  --section-color: var(--mm-cream);
  --sectionTwo-color: var(--mm-blush);
  --sectionThree-color: #fffbf8;
  --light-color: #ffffff;
  --white-color: #ffffff;
  --success-color: var(--mm-sage);
  --success-color-transparent: rgba(63, 107, 80, 0.14);
  --warning-color: var(--mm-peach-ink);
  --warning-color-transparent: rgba(251, 197, 157, 0.42);
  --danger-color: var(--mm-rose);
  --danger-color-transparent: rgba(210, 88, 114, 0.14);
  --pink-color: var(--mm-coral);
  --info-color: var(--mm-mauve);
  --info-color-transparent: rgba(95, 78, 99, 0.14);
  --tertiary-color: var(--mm-peach);
  --quatinery-color: var(--mm-sage-mist);
  --dark-color-transparent: rgba(30, 15, 28, 0.15);
}

/* --------------------------------------------------------------------------
   03. Base & scrollbars
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mumme-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 24px;
  line-height: 1;
  color: var(--body-color);
}
.mumme-brand:hover {
  color: var(--body-color);
}
/* The mark is the real logo, painted as a background so the dark theme can
   swap in the lightened artwork (color-pallet/new-logo.png) without a second
   network request or a JS hook. The box keeps the artwork's 200:148 ratio. */
.mumme-brand__mark {
  display: block;
  flex: none;
  width: 46px;
  height: 34px;
  background: url("../img/logo.png") no-repeat center / contain;
}
html[data-theme="dark"] .mumme-brand__mark {
  background-image: url("../img/logo-dark.png");
}
/* The wordmark is one flex item, so the lockup gap only separates it from the
   mark — "mumME", never "mum ME". */
.mumme-brand__word {
  display: inline-block;
}
.mumme-brand__me {
  color: var(--mumme-primary);
}
.mumme-brand--light,
.mumme-brand--light:hover {
  color: #fff;
}

/* The application shell sits on the palette's blush rather than the cream the
   marketing pages use, so its white panels read as raised cards instead of
   dissolving into the canvas. index.html keeps the cream because the hero
   artwork is painted on it. */
body.mumme-shell {
  background-color: var(--mm-blush);
}
html[data-theme="dark"] body.mumme-shell {
  background-color: var(--mm-canvas);
}

/* --------------------------------------------------------------------------
   04. Layout helpers
   -------------------------------------------------------------------------- */
.mumme-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mumme-grid {
  display: grid;
  gap: 20px;
}
.mumme-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mumme-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mumme-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mumme-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mumme-row--between {
  justify-content: space-between;
}
.mumme-row--wrap {
  flex-wrap: wrap;
}
.mumme-spacer {
  flex: 1;
}
.mumme-scroll-x {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mumme-scroll-x::-webkit-scrollbar {
  display: none;
}

/* --------------------------------------------------------------------------
   05. Surfaces
   -------------------------------------------------------------------------- */
.mumme-card {
  background: var(--light-color);
  border: 1px solid var(--mumme-line);
  border-radius: var(--mumme-radius);
  padding: 28px;
  /* White on a tinted canvas needs a crisp edge as well as a lift: the hairline
     gives the card a definite outline, the shadow gives it height.
     `.mumme-card--flat` opts out of the shadow only. */
  box-shadow: var(--mumme-shadow-sm);
  /* Owns its own containing block, so anything positioned inside a card stays
     inside that card. */
  position: relative;
}
.mumme-card--flat {
  box-shadow: none;
}
.mumme-card--muted {
  background: var(--sectionTwo-color);
}
/* Tinted "hero" banners. Each is a defined surface: an opaque card with a soft
   two-stop wash laid over it, rather than a fade to the page colour. The fill
   is therefore the same wherever the card sits, and the card keeps a visible
   edge instead of dissolving into the canvas behind it. */
.mumme-card--primary {
  background-color: var(--light-color);
  background-image: linear-gradient(120deg, rgba(78, 31, 71, 0.13), rgba(210, 88, 114, 0.07));
}
.mumme-card--secondary {
  background-color: var(--light-color);
  background-image: linear-gradient(120deg, rgba(240, 107, 88, 0.16), rgba(251, 197, 157, 0.14));
}
.mumme-card--caution {
  background-color: var(--light-color);
  background-image: linear-gradient(120deg, rgba(251, 197, 157, 0.42), rgba(251, 197, 157, 0.16));
}
.mumme-card--positive {
  background: var(--mumme-positive-soft);
}
.mumme-card--primary-solid {
  background: linear-gradient(135deg, var(--mumme-primary), var(--mumme-primary-dark));
  color: #fff;
}
.mumme-card__title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}
.mumme-card__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--mumme-muted);
}
.mumme-divider {
  height: 1px;
  background: var(--mumme-line);
  margin: 18px 0;
}

/* Highlight banner (contextual, template-styled) */
.mumme-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 22px;
  border-radius: var(--mumme-radius-sm);
  background: var(--sectionTwo-color);
  font-size: 14px;
}
.mumme-note__icon {
  font-size: 18px;
  line-height: 1.2;
}
.mumme-note--primary {
  background: var(--mumme-primary-soft);
}
.mumme-note--secondary {
  background: var(--mumme-secondary-soft);
}
.mumme-note--positive {
  background: var(--mumme-positive-soft);
}
.mumme-note--info {
  background: var(--mumme-info-soft);
}
.mumme-note__title {
  font-weight: 600;
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   06. Stat cards
   -------------------------------------------------------------------------- */
.mumme-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  border: 1px solid var(--mumme-line);
  border-radius: var(--mumme-radius);
  background: var(--light-color);
  box-shadow: var(--mumme-shadow-sm);
}
.mumme-stat__value {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.mumme-stat__label {
  font-size: 13px;
  color: var(--mumme-muted);
  display: flex;
  align-items: center;
  gap: 7px;
}
.mumme-stat__delta {
  font-size: 13px;
  font-weight: 600;
  color: var(--mumme-positive);
}
.mumme-stat__delta--down {
  color: var(--mumme-negative);
}
.mumme-stat__icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sectionTwo-color);
  font-size: 19px;
}
.mumme-stat--accent .mumme-stat__icon {
  background: var(--primary-color-transparent);
}

/* --------------------------------------------------------------------------
   07. Chips, pills & badges
   -------------------------------------------------------------------------- */
.mumme-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--mumme-radius-pill);
  background: var(--sectionTwo-color);
  border: 1px solid transparent;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--body-color);
  white-space: nowrap;
  transition: all 0.2s ease;
}
button.mumme-chip {
  cursor: pointer;
}
.mumme-chip--outline {
  background: transparent;
  border-color: var(--gray-color);
}
.mumme-chip--primary {
  background: var(--mumme-primary-soft);
  color: var(--mumme-primary-dark);
}
.mumme-chip--secondary {
  background: var(--mumme-secondary-soft);
  color: var(--mumme-secondary);
}
.mumme-chip--caution {
  background: var(--mumme-caution-soft);
  color: var(--mumme-caution-dark);
}
.mumme-chip--positive {
  background: var(--mumme-positive-soft);
  color: var(--mumme-positive);
}
.mumme-chip--info {
  background: var(--mumme-info-soft);
  color: var(--mumme-info);
}
.mumme-chip--negative {
  background: var(--mumme-negative-soft);
  color: var(--mumme-negative);
}
.mumme-chip--active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
.mumme-chip--active:hover {
  color: #fff;
}
.mumme-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.mumme-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mumme-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--mumme-radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  background: var(--sectionTwo-color);
  color: var(--body-color);
}
.mumme-badge--ok {
  background: var(--mumme-positive-soft);
  color: var(--mumme-positive);
}
.mumme-badge--warn {
  background: var(--mumme-caution-soft);
  color: var(--mumme-caution-dark);
}
.mumme-badge--info {
  background: var(--mumme-info-soft);
  color: var(--mumme-info);
}
.mumme-badge--bad {
  background: var(--mumme-negative-soft);
  color: var(--mumme-negative);
}
.mumme-badge--primary {
  background: var(--mumme-primary-soft);
  color: var(--mumme-primary-dark);
}
.mumme-badge--secondary {
  background: var(--mumme-secondary-soft);
  color: var(--mumme-secondary);
}
.mumme-badge__count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--mumme-radius-pill);
  background: var(--primary-color);
  color: #fff;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   08. Buttons  (complements .geex-btn)
   -------------------------------------------------------------------------- */
.mumme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: none;
  border-radius: var(--mumme-radius-sm);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: all 0.25s ease;
  background: var(--sectionTwo-color);
  color: var(--body-color);
}
.mumme-btn:hover {
  background: var(--gray-color);
}
.mumme-btn--primary {
  background: var(--primary-color);
  color: var(--white-color);
}
.mumme-btn--primary:hover {
  background: var(--mumme-primary-dark);
  color: var(--white-color);
}
.mumme-btn--secondary {
  background: var(--mumme-secondary);
  color: var(--white-color);
}
.mumme-btn--secondary:hover {
  background: var(--mumme-secondary-dark);
  color: var(--white-color);
}
.mumme-btn--dark {
  background: var(--mumme-ink);
  color: #fff;
}
.mumme-btn--dark:hover {
  background: #000;
  color: #fff;
}
.mumme-btn--ghost {
  background: transparent;
  border: 1px solid var(--gray-color);
}
.mumme-btn--ghost:hover {
  background: var(--sectionTwo-color);
}
.mumme-btn--outline {
  background: transparent;
  border: 1.5px solid var(--primary-color);
  color: var(--primary-color);
}
.mumme-btn--outline:hover {
  background: var(--primary-color-transparent);
}
.mumme-btn--sm {
  padding: 10px 16px;
  font-size: 13.5px;
  border-radius: 12px;
}
.mumme-btn--lg {
  padding: 16px 30px;
  font-size: 16px;
}
.mumme-btn--block {
  width: 100%;
}
.mumme-btn--icon {
  padding: 11px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
}
.mumme-btn[disabled],
.mumme-btn--disabled {
  opacity: 0.55;
  pointer-events: none;
}
.mumme-btn--static {
  pointer-events: none;
  cursor: default;
}

/* --- Theme switch (light ⇄ dark) -----------------------------------------
   Rendered on every page so the colour mode is always one click away. The
   button shows the mode it will switch *to*; assets/js/mumme-theme.js flips
   data-theme on <html> and both icons live in the markup so the swap needs
   no JavaScript. */
.mumme-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--mumme-line);
  border-radius: 50%;
  background: var(--light-color);
  color: var(--body-color);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.mumme-theme-toggle:hover {
  border-color: var(--mumme-primary);
  color: var(--mumme-primary);
}
.mumme-theme-toggle:focus-visible {
  outline: 2px solid var(--mumme-primary);
  outline-offset: 2px;
}
.mumme-theme-toggle svg {
  display: block;
  width: 19px;
  height: 19px;
}
/* Specificity has to beat `.mumme-theme-toggle svg` above. */
.mumme-theme-toggle .mumme-theme-toggle__sun {
  display: none;
}
html[data-theme="dark"] .mumme-theme-toggle {
  background: var(--mumme-surface-2);
  border-color: var(--mumme-border);
  color: var(--mumme-text);
}
html[data-theme="dark"] .mumme-theme-toggle:hover {
  border-color: var(--mumme-primary);
  color: var(--mumme-primary);
}
html[data-theme="dark"] .mumme-theme-toggle__sun {
  display: block;
}
html[data-theme="dark"] .mumme-theme-toggle__moon {
  display: none;
}
/* Landing nav: the sticky header is translucent, so the switch borrows the
   surface it sits on instead of painting its own card. */
.mumme-landing__nav .mumme-theme-toggle {
  background: transparent;
}
.mumme-landing__nav .mumme-theme-toggle:hover {
  background: var(--sectionTwo-color);
}
html[data-theme="dark"] .mumme-landing__nav .mumme-theme-toggle {
  background: transparent;
}
html[data-theme="dark"] .mumme-landing__nav .mumme-theme-toggle:hover {
  background: var(--mumme-surface-2);
}
/* Authentication pages: the split layout has no header, so the switch floats
   in the top corner of the form column. */
.mumme-theme-toggle--floating {
  position: fixed;
  top: 24px;
  inset-inline-end: 24px;
  z-index: 40;
  box-shadow: var(--mumme-shadow-sm);
}
@media only screen and (max-width: 767px) {
  .mumme-theme-toggle--floating {
    top: 14px;
    inset-inline-end: 14px;
  }
}

/* --------------------------------------------------------------------------
   09. Avatars
   -------------------------------------------------------------------------- */
.mumme-avatar {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.mumme-avatar--sm {
  width: 36px;
  height: 36px;
  border-radius: 13px;
  font-size: 12.5px;
}
.mumme-avatar--lg {
  width: 76px;
  height: 76px;
  border-radius: 26px;
  font-size: 26px;
}
.mumme-avatar--round {
  border-radius: 50%;
}
.mumme-avatar--primary {
  background: linear-gradient(135deg, var(--primary-color), var(--mumme-primary-dark));
}
.mumme-avatar--secondary {
  background: linear-gradient(135deg, var(--pink-color), var(--mumme-secondary-dark));
}
.mumme-avatar--caution {
  background: linear-gradient(135deg, var(--warning-color), var(--mumme-caution-dark));
}
.mumme-avatar--positive {
  background: linear-gradient(135deg, var(--success-color), var(--mumme-positive-dark));
}
.mumme-avatar--info {
  background: linear-gradient(135deg, var(--info-color), var(--mumme-info-dark));
}
.mumme-avatar__status {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid var(--light-color);
  background: var(--mumme-positive);
}

/* --------------------------------------------------------------------------
   10. Match ring
   -------------------------------------------------------------------------- */
.mumme-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: none;
}
.mumme-ring text {
  font-family: inherit;
  font-weight: 600;
}
.mumme-match {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: none;
}
.mumme-match__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--mumme-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   11. Progress
   -------------------------------------------------------------------------- */
.mumme-progress {
  height: 8px;
  border-radius: var(--mumme-radius-pill);
  background: var(--sectionTwo-color);
  overflow: hidden;
}
.mumme-progress__bar {
  display: block;
  height: 100%;
  border-radius: var(--mumme-radius-pill);
  background: var(--primary-color);
}
.mumme-progress--slim {
  height: 5px;
}

/* --------------------------------------------------------------------------
   12. Timeline / pipeline steps
   -------------------------------------------------------------------------- */
.mumme-steps {
  position: relative;
  padding-inline-start: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mumme-steps::before {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--mumme-line);
}
.mumme-step {
  position: relative;
  font-size: 14px;
}
.mumme-step::before {
  content: "";
  position: absolute;
  inset-inline-start: -25px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gray-color);
  box-shadow: 0 0 0 3px var(--light-color);
}
.mumme-step--done::before {
  background: var(--mumme-positive);
  box-shadow: 0 0 0 3px var(--mumme-positive-soft);
}
.mumme-step--current::before {
  background: var(--mumme-primary);
  box-shadow: 0 0 0 3px var(--mumme-primary-soft);
}
.mumme-step__label {
  font-weight: 600;
}
.mumme-step__date {
  font-size: 12.5px;
  color: var(--mumme-muted);
}
.mumme-step__now {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mumme-primary-dark);
}

/* --------------------------------------------------------------------------
   13. List rows
   -------------------------------------------------------------------------- */
.mumme-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mumme-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.mumme-item__body {
  flex: 1;
  min-width: 0;
}
.mumme-item__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 3px;
}
.mumme-item__meta {
  font-size: 13.5px;
  color: var(--mumme-muted);
}
.mumme-item__text {
  font-size: 14px;
  margin-top: 10px;
}
.mumme-tree {
  display: flex;
  gap: 12px;
  align-items: center;
}
.mumme-tree__ico {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sectionTwo-color);
  font-size: 15px;
  flex: none;
}

.mumme-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mumme-line);
}
.mumme-list-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.mumme-list-row:first-child {
  padding-top: 0;
}

.mumme-tap {
  cursor: pointer;
  transition: transform 0.15s ease;
}
.mumme-tap:active {
  transform: scale(0.99);
}
a.mumme-tap,
a.mumme-tap:hover {
  color: inherit;
}

/* --------------------------------------------------------------------------
   14. Tabs & filter chips
   -------------------------------------------------------------------------- */
.mumme-tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: var(--mumme-radius-sm);
  background: var(--sectionTwo-color);
  overflow-x: auto;
  scrollbar-width: none;
}
.mumme-tabs::-webkit-scrollbar {
  display: none;
}
.mumme-tab {
  flex: 1;
  min-width: max-content;
  padding: 10px 18px;
  border: none;
  border-radius: 11px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mumme-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.mumme-tab.is-active {
  background: var(--light-color);
  color: var(--mumme-primary-dark);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   15. Forms, search, toggle
   -------------------------------------------------------------------------- */
.mumme-field {
  margin-bottom: 20px;
}
.mumme-field__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--body-color);
  margin-bottom: 8px;
}
.mumme-input,
.mumme-select,
.mumme-textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--gray-color);
  border-radius: var(--mumme-radius-sm);
  background: var(--light-color);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--body-color);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mumme-input:focus,
.mumme-select:focus,
.mumme-textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-color-transparent);
}
.mumme-textarea {
  min-height: 110px;
  resize: vertical;
}
.mumme-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: var(--mumme-radius-sm);
  background: var(--sectionTwo-color);
}
.mumme-search input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--body-color);
  min-width: 0;
}
.mumme-search svg {
  flex: none;
  opacity: 0.55;
}

.mumme-toggle {
  position: relative;
  width: 46px;
  height: 26px;
  flex: none;
  border: none;
  border-radius: var(--mumme-radius-pill);
  background: var(--gray-color);
  cursor: pointer;
  transition: background 0.2s ease;
}
.mumme-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: inset-inline-start 0.2s ease;
}
.mumme-toggle.is-on {
  background: var(--primary-color);
}
.mumme-toggle.is-on::after {
  inset-inline-start: 23px;
}

.mumme-check {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--gray-color);
  border-radius: var(--mumme-radius-sm);
  background: var(--light-color);
  cursor: pointer;
  transition: all 0.2s ease;
}
.mumme-check.is-selected {
  border-color: var(--primary-color);
  background: var(--mumme-primary-soft);
}

/* --------------------------------------------------------------------------
   16. Chat
   -------------------------------------------------------------------------- */
.mumme-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mumme-bubble {
  max-width: min(78%, 620px);
  padding: 14px 18px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  background: var(--sectionTwo-color);
  border-end-start-radius: 6px;
}
.mumme-bubble--me {
  margin-inline-start: auto;
  background: var(--primary-color);
  color: var(--white-color);
  border-end-start-radius: 18px;
  border-end-end-radius: 6px;
}
.mumme-bubble__time {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.65;
}
.mumme-composer {
  display: flex;
  gap: 12px;
  align-items: center;
  position: sticky;
  bottom: 0;
  padding: 16px 0;
  background: var(--section-color);
}
.mumme-composer .mumme-input {
  flex: 1;
}

/* --------------------------------------------------------------------------
   17. Tables
   -------------------------------------------------------------------------- */
.mumme-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--mumme-radius-sm);
}
.mumme-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}
.mumme-table th {
  padding: 14px 18px;
  text-align: start;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--mumme-muted);
  background: var(--sectionTwo-color);
  white-space: nowrap;
}
.mumme-table th:first-child {
  border-start-start-radius: var(--mumme-radius-sm);
  border-end-start-radius: var(--mumme-radius-sm);
}
.mumme-table th:last-child {
  border-start-end-radius: var(--mumme-radius-sm);
  border-end-end-radius: var(--mumme-radius-sm);
}
.mumme-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--mumme-line);
  font-size: 14px;
  vertical-align: middle;
}
.mumme-table tbody tr:last-child td {
  border-bottom: none;
}
.mumme-table tbody tr:hover td {
  background: var(--sectionTwo-color);
}
.mumme-table td b {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   18. Charts
   -------------------------------------------------------------------------- */
.mumme-bars {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 190px;
  padding: 26px 4px 24px;
}
.mumme-bars__bar {
  flex: 1;
  min-height: 8px;
  border-radius: 10px 10px 4px 4px;
  background: var(--primary-color);
  position: relative;
  transition: height 0.4s ease;
}
.mumme-bars__value {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--body-color);
}
.mumme-bars__label {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--mumme-muted);
  font-style: normal;
}

.mumme-donut {
  width: 150px;
  height: 150px;
  flex: none;
  border-radius: 50%;
  position: relative;
}
.mumme-donut::after {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  background: var(--light-color);
}
.mumme-donut__center {
  position: absolute;
  /* exactly cover the hole the ::after leaves, so the caption wraps inside
     it instead of spilling over the ring */
  inset: 28px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6px;
}
.mumme-donut__center b {
  font-size: 19px;
  font-weight: 600;
}
.mumme-donut__center span {
  font-size: 11px;
  line-height: 1.2;
  max-width: 100%;
  color: var(--mumme-muted);
}
.mumme-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mumme-legend__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.mumme-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex: none;
}
.mumme-legend__row b {
  margin-inline-start: auto;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   19. Empty state, toast, sheet, dropdown
   -------------------------------------------------------------------------- */
.mumme-empty {
  text-align: center;
  padding: 52px 24px;
  color: var(--mumme-muted);
}
.mumme-empty__icon {
  display: block;
  font-size: 40px;
  margin-bottom: 14px;
}

.mumme-toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%) translateY(24px);
  z-index: 300;
  padding: 12px 20px;
  border-radius: var(--mumme-radius-pill);
  background: var(--mumme-ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--mumme-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: all 0.28s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 620px);
}
.mumme-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.mumme-toast__action {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--mumme-primary);
  cursor: pointer;
  padding: 0;
}

.mumme-sheet {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(43, 20, 40, 0.5);
  backdrop-filter: blur(2px);
}
.mumme-sheet__panel {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 30px;
  border-radius: var(--mumme-radius);
  background: var(--light-color);
  box-shadow: var(--mumme-shadow-lg);
}
.mumme-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.mumme-sheet__title {
  font-size: 20px;
  font-weight: 600;
}
.mumme-sheet__close {
  border: none;
  background: var(--sectionTwo-color);
  border-radius: 12px;
  width: 38px;
  height: 38px;
  flex: none;
  cursor: pointer;
  font-size: 17px;
  color: var(--body-color);
  line-height: 1;
}

.mumme-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 120;
  min-width: 250px;
  padding: 8px;
  border-radius: 18px;
  background: var(--light-color);
  box-shadow: var(--mumme-shadow-lg);
}
.mumme-dropdown__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 12px;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--body-color);
  text-align: start;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mumme-dropdown__item:hover {
  background: var(--sectionTwo-color);
}
.mumme-dropdown__sep {
  height: 1px;
  margin: 6px 10px;
  background: var(--mumme-line);
}
.mumme-dropdown__head {
  padding: 12px 14px 8px;
}
.mumme-dropdown__head b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
}
.mumme-dropdown__head span {
  font-size: 12.5px;
  color: var(--mumme-muted);
}

/* --------------------------------------------------------------------------
   20. Landing page
   -------------------------------------------------------------------------- */
.mumme-landing {
  background: var(--section-color);
}
.mumme-landing__nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 18px 0;
  background: rgba(253, 251, 250, 0.88);
  backdrop-filter: blur(12px);
}
.mumme-landing__nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.mumme-landing__nav-links {
  display: flex;
  gap: 26px;
  margin-inline-start: 24px;
}
.mumme-landing__nav-links a {
  font-size: 14.5px;
  color: var(--body-color);
}
.mumme-landing__nav-links a:hover {
  color: var(--primary-color);
}
.mumme-landing__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.mumme-hero {
  position: relative;
  overflow: hidden;
  padding: 70px 0 80px;
}
.mumme-hero__grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 70px;
  align-items: center;
}
.mumme-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: var(--mumme-radius-pill);
  background: var(--mumme-primary-soft);
  color: var(--mumme-primary-dark);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.mumme-hero__title {
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 24px 0 20px;
}
.mumme-hero__title span {
  color: var(--mumme-primary);
}
.mumme-hero__lead {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--desc-color);
  max-width: 560px;
}
.mumme-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
/* Hero — copy column: proof, stats and the primary calls to action. */
.mumme-hero__intro {
  max-width: 640px;
}
/* Four counts, always on one row. As a wrapping flex row the fourth landed on
   a line of its own: the widest labels plus 40px gutters need ~606px and the
   copy column is ~553px at desktop. An explicit four-column grid fits them and
   keeps the numbers on a common baseline. */
.mumme-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: space-between;
  gap: 16px 12px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--gray-color);
}
.mumme-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mumme-hero__stat b {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--dark-color);
}
.mumme-hero__stat span {
  font-size: 12.5px;
  color: var(--sec-color);
}

/* Hero — live-match panel: one curated example from each pillar. */
.mumme-hero__panel {
  position: relative;
}
.mumme-hero__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
/* Right-hand item of the panel head, so it lands over the artwork itself and
   takes --mumme-on-art (see the hero copy rules further down). */
.mumme-hero__panel-note {
  font-size: 12.5px;
  font-weight: 500;
}
.mumme-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--body-color);
}
.mumme-live__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--success-color);
  box-shadow: 0 0 0 4px var(--success-color-transparent);
  animation: mumme-pulse 2.4s ease-in-out infinite;
}
@keyframes mumme-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
.mumme-hero__stack {
  display: grid;
  gap: 14px;
}
.mumme-match-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid transparent;
  border-radius: 22px;
  background: var(--white-color);
  box-shadow: var(--mumme-shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.mumme-match-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--mumme-shadow);
}
.mumme-match-card--primary:hover {
  border-color: var(--primary-color);
}
.mumme-match-card--caution:hover {
  border-color: var(--warning-color);
}
.mumme-match-card--info:hover {
  border-color: var(--info-color);
}
.mumme-match-card__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 15px;
  font-size: 20px;
  line-height: 1;
  background: var(--sectionTwo-color);
}
.mumme-match-card--primary .mumme-match-card__ico {
  background: var(--mumme-primary-soft);
}
.mumme-match-card--caution .mumme-match-card__ico {
  background: var(--mumme-caution-soft);
}
.mumme-match-card--info .mumme-match-card__ico {
  background: var(--mumme-info-soft);
}
.mumme-match-card__body {
  flex: 1;
  min-width: 0;
}
.mumme-match-card__kind {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--sec-color);
}
.mumme-match-card__title {
  margin: 4px 0 3px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--dark-color);
}
.mumme-match-card__meta {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--desc-color);
}
.mumme-match-card__score {
  flex: none;
}
.mumme-match-card__score svg {
  display: block;
}
/* The landing hero's "Matched on real life" panel — a wellness card, so it
   takes the stronger sage (the palette's "Your me-time" swatch). */
.mumme-hero__signals {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 22px;
  background: var(--mumme-calm-strong);
  color: var(--mumme-calm-ink);
}
.mumme-hero__signals .mumme-card__label {
  display: block;
  margin-bottom: 12px;
  color: var(--mumme-calm-ink-muted);
}
/* Chips on a calm surface take a solid fill: their own pale accent tint would
   dissolve into the green, and the accent hue fights it. */
.mumme-hero__signals .mumme-chip {
  background: rgba(255, 255, 255, 0.75);
  color: var(--mumme-calm-ink);
}
html[data-theme="dark"] .mumme-hero__signals .mumme-chip {
  background: rgba(255, 255, 255, 0.12);
  color: var(--mumme-calm-ink);
}

/* Hero — backdrop layers.
   Paint order: photograph (0) -> brand wash (1) -> scrim (2) -> copy (3).
   The brand wash sits UNDER the scrim so the scrim alone decides how much
   light reaches the copy column, which keeps the contrast predictable. */
.mumme-hero {
  background-color: var(--section-color);
}
.mumme-hero__media,
.mumme-hero__mesh,
.mumme-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mumme-hero__media {
  z-index: 0;
  background-repeat: no-repeat;
  /* Bias right: the artwork's desk-and-monitor area sits on the left, where
     the scrim is heaviest, so it is naturally subdued. */
  background-position: 70% center;
  background-size: cover;
  /* Plain fallback first, then the negotiating declaration - if image-set()
     or the type() function is unsupported the second line is dropped and the
     JPEG stands. */
  background-image: url("../img/hero/hero-1408.jpg");
  background-image: image-set(
    url("../img/hero/hero-1408.avif") type("image/avif"),
    url("../img/hero/hero-1408.webp") type("image/webp"),
    url("../img/hero/hero-1408.jpg") type("image/jpeg")
  );
}

/* Step the backdrop down on smaller viewports so the bytes match the slot. */
@media only screen and (max-width: 1199px) {
  .mumme-hero__media {
    background-image: url("../img/hero/hero-1024.jpg");
    background-image: image-set(
      url("../img/hero/hero-1024.avif") type("image/avif"),
      url("../img/hero/hero-1024.webp") type("image/webp"),
      url("../img/hero/hero-1024.jpg") type("image/jpeg")
    );
  }
}
@media only screen and (max-width: 991px) {
  .mumme-hero__media {
    background-image: url("../img/hero/hero-768.jpg");
    background-image: image-set(
      url("../img/hero/hero-768.avif") type("image/avif"),
      url("../img/hero/hero-768.webp") type("image/webp"),
      url("../img/hero/hero-768.jpg") type("image/jpeg")
    );
    background-position: 64% center;
  }
}
.mumme-hero__mesh {
  z-index: 1;
  background:
    radial-gradient(58% 52% at 8% -8%, var(--primary-color-transparent), transparent 62%),
    radial-gradient(46% 46% at 98% 12%, var(--mumme-secondary-soft), transparent 64%);
}
/* The veil stops below are --section-color (#FDFBFA) at reduced alpha - the
   same page colour, feathered so the artwork emerges gradually instead of
   ending on a hard edge. Only the box is feathered; the copy keeps its own
   contrast because the veil is fully opaque down the copy column. */
.mumme-hero__scrim {
  --mumme-hero-veil: 253, 251, 250;
  /* How far the veil is allowed to thin out over the artwork. Light can go all
     the way to 0 — the artwork is cream on a cream page. Dark must keep a
     floor, or the artwork reappears as a bright panel on the dark canvas. */
  --mumme-hero-veil-floor: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(var(--mumme-hero-veil), 0.97) 0%, rgba(var(--mumme-hero-veil), 0) 15%),
    linear-gradient(0deg, rgba(var(--mumme-hero-veil), 0.97) 0%, rgba(var(--mumme-hero-veil), 0) 14%),
    linear-gradient(var(--mumme-hero-dir, 90deg),
      rgba(var(--mumme-hero-veil), 1) 0%,
      rgba(var(--mumme-hero-veil), 1) 30%,
      rgba(var(--mumme-hero-veil), 0.95) 44%,
      rgba(var(--mumme-hero-veil), 0.66) 57%,
      rgba(var(--mumme-hero-veil), 0.24) 70%,
      rgba(var(--mumme-hero-veil), var(--mumme-hero-veil-floor)) 82%);
}
html[dir="rtl"] .mumme-hero__scrim {
  --mumme-hero-dir: 270deg;
}
/* Dark mode veils with --dark-color (#1E0F1C) so the artwork sinks into
   the dark canvas rather than glowing behind it. The artwork itself is knocked
   back as well: veiling alone leaves it washed out and mid-grey. */
html[data-theme="dark"] .mumme-hero {
  background-color: var(--dark-color);
}
html[data-theme="dark"] .mumme-hero__media {
  filter: brightness(0.34) saturate(0.72);
}
html[data-theme="dark"] .mumme-hero__scrim {
  --mumme-hero-veil: 30, 15, 28;
  --mumme-hero-veil-floor: 0.42;
}
.mumme-hero > .mumme-landing__wrap {
  position: relative;
  z-index: 3;
}

/* Stacked layout: the copy sits over the full height of the photograph, so
   the veil becomes near-uniform and the artwork reads as warm texture. */
@media only screen and (max-width: 767px) {
  .mumme-hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(var(--mumme-hero-veil), 0.92) 0%,
        rgba(var(--mumme-hero-veil), 0.88) 26%,
        rgba(var(--mumme-hero-veil), 0.95) 62%,
        rgba(var(--mumme-hero-veil), 1) 100%);
  }
}

/* Hero copy sits on the artwork, where the veil has thinned right out: the
   muted tones only reach ~2:1 there. It uses --mumme-on-art instead. */
.mumme-hero__stat span,
.mumme-hero__panel-note {
  color: var(--mumme-on-art);
}
html[data-theme="dark"] .mumme-hero__stat span,
html[data-theme="dark"] .mumme-hero__panel-note,
html[data-theme="dark"] .mumme-live {
  color: var(--mumme-on-art);
}

.mumme-section {
  padding: 76px 0;
}
/* The landing's "How it works" band: the palette's "calm section". */
.mumme-section--tint {
  background: var(--mumme-calm);
}
/* Eyebrows on a calm surface take the calm ink rather than the default muted
   mauve, which sits at ~4.3:1 on sage mist and ~3.7:1 on sage night. */
.mumme-section--tint .mumme-card__label {
  color: var(--mumme-calm-ink-muted);
}
.mumme-section__head {
  max-width: 720px;
  margin: 0 auto 50px;
  text-align: center;
}
.mumme-section__title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 16px 0 14px;
}
.mumme-section__lead {
  font-size: 16.5px;
  color: var(--desc-color);
  line-height: 1.65;
}

.mumme-pillar {
  height: 100%;
  padding: 34px;
  border-radius: 28px;
  background: var(--light-color);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mumme-pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--mumme-shadow);
}
.mumme-pillar__icon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 22px;
  background: var(--sectionTwo-color);
}
.mumme-pillar__title {
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 12px;
}
.mumme-pillar__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.mumme-pillar__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--desc-color);
}
.mumme-pillar__list li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--primary-color);
  flex: none;
}

.mumme-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  counter-reset: step;
}
.mumme-step-card {
  position: relative;
  padding: 30px 26px;
  border-radius: var(--mumme-radius);
  background: var(--light-color);
}
.mumme-step-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--primary-color);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 18px;
}
.mumme-step-card__title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}

.mumme-cta {
  position: relative;
  overflow: hidden;
  padding: 66px 48px;
  border-radius: 34px;
  background: var(--dark-color);
  color: var(--white-color);
  text-align: center;
}
.mumme-cta__title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.mumme-cta__lead {
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 620px;
  margin: 0 auto 32px;
}
.mumme-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.mumme-cta .mumme-btn--ghost {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.mumme-cta .mumme-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

.mumme-footer {
  padding: 46px 0 60px;
  background: var(--section-color);
}
.mumme-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--gray-color);
  padding-top: 30px;
}
.mumme-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 14px;
}
.mumme-footer__copy {
  font-size: 13.5px;
  color: var(--mumme-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   21. Onboarding
   -------------------------------------------------------------------------- */
.mumme-onboarding {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 40px 24px 60px;
  background: linear-gradient(180deg, var(--primary-color-transparent) 0%, var(--section-color) 46%);
}
.mumme-onboarding__inner {
  width: 100%;
  max-width: 640px;
}
.mumme-onboarding__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
}
.mumme-onboarding__progress {
  display: flex;
  gap: 8px;
  margin-bottom: 34px;
}
.mumme-onboarding__progress i {
  flex: 1;
  height: 6px;
  border-radius: var(--mumme-radius-pill);
  background: var(--gray-color);
  transition: background 0.3s ease;
}
.mumme-onboarding__progress i.is-on {
  background: var(--primary-color);
}
.mumme-onboarding__title {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
}
.mumme-onboarding__sub {
  margin-top: 10px;
  text-align: center;
  font-size: 15px;
  color: var(--mumme-muted);
}
.mumme-onboarding__options {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 34px;
}
.mumme-option {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 20px 22px;
  border: 1.5px solid var(--gray-color);
  border-radius: 20px;
  background: var(--light-color);
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  transition: all 0.2s ease;
}
.mumme-option:hover {
  border-color: var(--mumme-primary);
}
.mumme-option.is-selected {
  border-color: var(--primary-color);
  background: var(--mumme-primary-soft);
}
.mumme-option__icon {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mumme-calm);
  font-size: 22px;
}
.mumme-option.is-selected .mumme-option__icon {
  background: var(--light-color);
}
.mumme-option__title {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--body-color);
}
.mumme-option__desc {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--mumme-muted);
}
.mumme-option__tick {
  margin-inline-start: auto;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--gray-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: transparent;
}
.mumme-option.is-selected .mumme-option__tick {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
.mumme-onboarding__foot {
  display: flex;
  gap: 14px;
  margin-top: 36px;
}
.mumme-onboarding__hint {
  margin-top: 24px;
  text-align: center;
  font-size: 12.5px;
  color: var(--mumme-muted);
}

/* --------------------------------------------------------------------------
   22. Admin console
   -------------------------------------------------------------------------- */
.mumme-admin-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 24px;
  border-radius: var(--mumme-radius-sm);
  margin-bottom: 26px;
  background: var(--dark-color);
  color: var(--white-color);
  font-size: 13px;
  font-weight: 500;
}
.mumme-admin-bar__pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success-color);
  flex: none;
  box-shadow: 0 0 0 4px var(--success-color-transparent);
}
.mumme-admin-bar__stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--mumme-radius-pill);
  background: rgba(255, 255, 255, 0.14);
}
.mumme-admin-bar__spacer {
  flex: 1;
}

.mumme-audit {
  display: flex;
  flex-direction: column;
}
.mumme-audit__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mumme-line);
  font-size: 14px;
}
.mumme-audit__row:last-child {
  border-bottom: none;
}

.mumme-perm-table td {
  text-align: center;
}
.mumme-perm-table td:first-child {
  text-align: start;
}
.mumme-perm-yes {
  color: var(--mumme-positive);
  font-weight: 600;
}
.mumme-perm-no {
  color: var(--grayThree-color);
}

.mumme-rating-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}
.mumme-rating-row__label {
  width: 62px;
  font-size: 13px;
  color: var(--mumme-muted);
  flex: none;
}
.mumme-rating-row__value {
  width: 44px;
  text-align: end;
  font-size: 13px;
  color: var(--mumme-muted);
  flex: none;
}

/* --------------------------------------------------------------------------
   23. Template shell adaptations
   -------------------------------------------------------------------------- */

/* App-scale card headings (the template's 24px is a landing-page scale). */
.geex-content__section__header__title {
  font-size: 19px;
  line-height: 1.45;
  font-weight: 600;
}

/* Panels (`section()` wraps view content in .geex-content__section) get the
   same edge, elevation and containing block as .mumme-card, so every surface
   in the app sits on the canvas the same way. */
.geex-content__section {
  position: relative;
  border: 1px solid var(--mumme-line);
  box-shadow: var(--mumme-shadow-sm);
}

/* Header popups are display:none until toggled by the app. */
.geex-content__header__popup.is-open {
  display: block;
}

/* Template quick-action, popup and section links are authored as <a> in the
   template, so their classes never reset the user-agent button chrome. The app
   renders them as <button> (keyboard-operable, no href) - reset the box only,
   so the template's own typography and colours still apply. */
.geex-content__header__quickaction__link,
.geex-content__header__popup__link,
.geex-content__header__popup__footer__link,
.geex-content__section__header__link {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* The template ships no hover state for the header quick actions, and its
   popup arrow is offset 10px from the link edge — so give the 20px icon a
   square target that keeps the arrow inside and the tap area comfortable. */
.geex-content__header__quickaction__link {
  min-width: 30px;
  border-radius: 12px;
  transition: opacity 0.25s ease;
}
.geex-content__header__quickaction__link:hover svg {
  stroke: var(--primary-color);
}
.geex-content__header__quickaction__link:hover .mumme-avatar {
  opacity: 0.85;
}
.geex-content__header__quickaction__link:focus-visible,
.geex-content__header__popup__link:focus-visible,
.geex-content__header__popup__footer__link:focus-visible,
.geex-content__section__header__link:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}

/* Header triggers.
   These deliberately avoid the template's .geex-btn__customizer /
   .geex-btn__toggle-sidebar classes, which main.js binds to directly. */
.mumme-sidebar-toggle,
.mumme-customizer-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 18px;
  border: none;
  border-radius: 14px;
  background: var(--sectionTwo-color);
  color: var(--body-color);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: all 0.25s ease;
}
.mumme-sidebar-toggle:hover {
  background: var(--gray-color);
}
.mumme-customizer-toggle {
  background: var(--primary-color);
  color: #fff;
}
.mumme-customizer-toggle:hover {
  background: var(--mumme-primary-dark);
}
.mumme-sidebar-toggle {
  display: none;
}
@media only screen and (max-width: 1199px) {
  .mumme-sidebar-toggle {
    display: inline-flex;
  }
}
.geex-content__header__popup__link {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  text-align: start;
  font-family: inherit;
  cursor: pointer;
}
.geex-content__header__popup__item__img {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.geex-content__header__popup__footer__link {
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.mumme-nav-popup {
  min-width: 260px;
  padding: 6px;
}

/* Sidebar additions */
.mumme-nav-section {
  display: block;
  padding: 22px 25px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--sec-color);
}
.mumme-nav-badge {
  margin-inline-start: auto;
}
.geex-sidebar__header {
  padding-bottom: 6px;
}
.mumme-nav-role {
  padding: 10px 25px 0;
}
.geex-sidebar__user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 18px;
  background: var(--sectionTwo-color);
}
.geex-sidebar__user b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}
.geex-sidebar__user span {
  font-size: 12px;
  color: var(--mumme-muted);
}
.geex-sidebar__footer {
  margin-top: 18px;
  padding: 0 25px 6px;
}
.geex-sidebar__footer__title {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
}
.geex-sidebar__footer__copyright {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--mumme-muted);
}
.geex-sidebar__close {
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}

/* Mobile navigation drawer */
@media only screen and (max-width: 1199px) {
  .geex-sidebar.active {
    display: block;
    width: 310px;
    max-width: 86vw;
    box-shadow: var(--mumme-shadow-lg);
  }
  .geex-sidebar.active .geex-sidebar__close {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   24. Utilities & responsive
   -------------------------------------------------------------------------- */
.mumme-muted {
  color: var(--mumme-muted);
}
.mumme-primary {
  color: var(--mumme-primary-dark);
}
.mumme-secondary {
  color: var(--mumme-secondary);
}
.mumme-positive {
  color: var(--mumme-positive);
}
.mumme-center {
  text-align: center;
}
.mumme-fs-12 {
  font-size: 12px;
}
.mumme-fs-13 {
  font-size: 13px;
}
.mumme-fs-14 {
  font-size: 14px;
}
.mumme-fs-15 {
  font-size: 15px;
}
.mumme-fw-6 {
  font-weight: 600;
}
.mumme-mt-0 {
  margin-top: 0;
}
.mumme-mt-8 {
  margin-top: 8px;
}
.mumme-mt-12 {
  margin-top: 12px;
}
.mumme-mt-16 {
  margin-top: 16px;
}
.mumme-mt-20 {
  margin-top: 20px;
}
.mumme-mt-24 {
  margin-top: 24px;
}
.mumme-mt-30 {
  margin-top: 30px;
}
.mumme-mt-40 {
  margin-top: 40px;
}
.mumme-mb-0 {
  margin-bottom: 0;
}
.mumme-mb-8 {
  margin-bottom: 8px;
}
.mumme-mb-16 {
  margin-bottom: 16px;
}
.mumme-mb-20 {
  margin-bottom: 20px;
}
/* The view builders space every block with `mumme-mb-24`; without it the
   cards, stat rows and panels all butt up against each other. */
.mumme-mb-24 {
  margin-bottom: 24px;
}
.mumme-mb-30 {
  margin-bottom: 30px;
}
.mumme-mb-40 {
  margin-bottom: 40px;
}
.mumme-hidden {
  display: none !important;
}
.mumme-capitalize {
  text-transform: capitalize;
}
.mumme-nowrap {
  white-space: nowrap;
}
.mumme-w-100 {
  width: 100%;
}

@media only screen and (max-width: 1199px) {
  .mumme-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mumme-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mumme-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mumme-hero {
    padding: 50px 0 60px;
  }
}

@media only screen and (max-width: 991px) {
  .mumme-landing__nav-links {
    display: none;
  }
  .mumme-hero__grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }
  .mumme-hero__stats {
    gap: 16px 24px;
  }
  /* Below this width the brand plus two buttons no longer fit on one
     nav row, so tighten the lockup and the button padding. */
  .mumme-landing__nav-inner {
    gap: 12px;
    padding: 0 16px;
  }
  .mumme-landing__nav .mumme-brand {
    font-size: 20px;
  }
  .mumme-landing__nav .mumme-brand__mark {
    width: 38px;
    height: 28px;
  }
  .mumme-landing__nav .mumme-btn--sm {
    padding: 9px 13px;
    font-size: 13px;
  }
  .mumme-cta {
    padding: 48px 28px;
  }
  .mumme-section {
    padding: 58px 0;
  }
}

@media only screen and (max-width: 767px) {
  .mumme-grid--2,
  .mumme-grid--3,
  .mumme-grid--4 {
    grid-template-columns: 1fr;
  }
  .mumme-steps-grid {
    grid-template-columns: 1fr;
  }
  .mumme-card,
  .mumme-stat {
    padding: 22px;
  }
  .mumme-item {
    gap: 14px;
  }
  .mumme-bars {
    gap: 9px;
    height: 160px;
  }
  .mumme-donut {
    width: 126px;
    height: 126px;
  }
  .mumme-bubble {
    max-width: 88%;
  }
  .mumme-onboarding__title {
    font-size: 25px;
  }
  /* Four columns of ~85px would crush the labels; two still reads as a block
     and keeps "business opportunities" on one line. */
  .mumme-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: normal;
  }
  .mumme-hero__title {
    margin-top: 18px;
  }
  .mumme-sheet__panel {
    padding: 24px;
  }
}

/* Inline text button (e.g. the footer's "Reset demo data") */
.mumme-link-btn {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--primary-color);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mumme-link-btn:hover {
  color: var(--mumme-primary-dark);
}

/* --------------------------------------------------------------------------
   25. Dark mode — "mumME Dark"

   The template ships its own dark theme (html[data-theme="dark"] in
   assets/css/style.css) but it is painted in neutral greys (#222222) and the
   old purple accent. This block re-points both layers at the dark half of the
   palette — a deep-plum canvas, plum-black surfaces and coral accents — and
   then re-skins the handful of template rules that hard-code their colour.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  /* Dark palette primitives ------------------------------------------- */
  --mm-canvas: #1e0f1c;
  --mm-surface: #2c1828;
  --mm-surface-2: #351e30;
  --mm-surface-3: #3f2438;
  --mm-surface-hover: #482b41;
  --mm-border: #4a2e42;
  --mm-text: #f8eef3;
  --mm-text-muted: #b9a3b1;

  /* Surface tokens ----------------------------------------------------- */
  --mumme-surface: var(--mm-surface);
  --mumme-surface-2: var(--mm-surface-2);
  --mumme-surface-3: var(--mm-surface-3);
  --mumme-surface-hover: var(--mm-surface-hover);
  --mumme-border: var(--mm-border);
  --mumme-text: var(--mm-text);
  --mumme-text-muted: var(--mm-text-muted);
  --mumme-on-art: #cdbcc7;
  --mumme-line: var(--mm-border);
  --mumme-ink: var(--mm-text);
  --mumme-muted: var(--mm-text-muted);

  /* Accents: on the dark canvas the primary action becomes the light coral
     from the palette's dark proof, and sage/peach supply the readable
     "on-soft" tones that --mumme-*-dark paints text with. ---------------- */
  --mumme-primary: #f58572;
  --mumme-primary-dark: #f8a894;
  --mumme-primary-soft: rgba(245, 133, 114, 0.18);

  --mumme-secondary: #fbc59d;
  --mumme-secondary-dark: #fdd6b8;
  --mumme-secondary-soft: rgba(251, 197, 157, 0.16);

  --mumme-caution: #a9c4a3;
  --mumme-caution-dark: #fdd6b8;
  --mumme-caution-soft: rgba(251, 197, 157, 0.16);

  --mumme-positive: #a9c4a3;
  --mumme-positive-dark: #c6dcc0;
  --mumme-positive-soft: rgba(47, 82, 64, 0.6);

  /* "Sage night" is the palette's dark-mode sage surface, used as-is. */
  --mumme-calm: #2f5240;
  --mumme-calm-strong: #37604b;
  --mumme-calm-ink: var(--mm-text);
  /* ...and blush on sage night, matching the palette's dark sage block. */
  --mumme-calm-ink-muted: var(--mm-text);

  --mumme-info: #cbbcc9;
  --mumme-info-dark: #e3d8e1;
  --mumme-info-soft: rgba(95, 78, 99, 0.4);

  --mumme-negative: #ef8b8b;
  --mumme-negative-dark: #f7aeae;
  --mumme-negative-soft: rgba(210, 88, 114, 0.2);

  --mumme-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --mumme-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --mumme-shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.6);

  /* Geex template tokens, dark side ------------------------------------ */
  --primary-color: #f58572;
  --primary-color-transparent: rgba(245, 133, 114, 0.18);
  --secondary-color: var(--mm-sage-night);
  --dark-color: var(--mm-canvas);
  --body-color: var(--mm-text);
  --desc-color: var(--mm-surface-3);
  --sec-color: var(--mm-text-muted);
  /* the template paints dark-mode body copy with --gray-color */
  --gray-color: var(--mm-text);
  --grayTwo-color: var(--mm-border);
  --grayThree-color: #5d3d52;
  --section-color: var(--mm-canvas);
  --sectionTwo-color: var(--mm-surface);
  --sectionThree-color: var(--mm-surface-2);
  --light-color: var(--mm-surface);
  --success-color: var(--mm-sage-soft);
  --success-color-transparent: rgba(169, 196, 163, 0.18);
  --warning-color: var(--mm-peach);
  --warning-color-transparent: rgba(251, 197, 157, 0.18);
  --danger-color: #ef8b8b;
  --danger-color-transparent: rgba(239, 139, 139, 0.18);
  --pink-color: var(--mm-coral);
  --info-color: #cbbcc9;
  --info-color-transparent: rgba(203, 188, 201, 0.18);
  --tertiary-color: var(--mm-peach);
  --quatinery-color: var(--mm-sage-night);
  --dark-color-transparent: rgba(30, 15, 28, 0.4);
}

/* --------------------------------------------------------------------------
   Template shell, re-skinned for the dark palette
   The Geex dark theme hard-codes #222222 for its surfaces (and paints a
   couple of accents with white text on --primary-color). These rules replace
   those constants with the palette so the shell matches the app.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .geex-sidebar {
  border-color: var(--mm-border);
  background-image: none;
  background-color: var(--mm-surface);
}
html[data-theme="dark"] .geex-sidebar__submenu,
html[data-theme="dark"] .geex-customizer,
html[data-theme="dark"] .geex-btn,
html[data-theme="dark"] .geex-btn__customizer,
html[data-theme="dark"] .geex-customizer .geex-btn__customizer-close {
  background-color: var(--mm-surface);
}
html[data-theme="dark"] .geex-content__section,
html[data-theme="dark"] blockquote,
html[data-theme="dark"] .geex-content__authentication__content,
html[data-theme="dark"] .geex-content__header__popup,
html[data-theme="dark"] .geex-content__modal__form,
html[data-theme="dark"] .geex-content__faq__accordion__item,
html[data-theme="dark"] .geex-content__testimonial__single,
html[data-theme="dark"] .geex-content__review__single,
html[data-theme="dark"] .geex-content__pricing__single,
html[data-theme="dark"] .geex-content__blog__single {
  background: var(--mm-surface);
}
html[data-theme="dark"] .geex-content__header__popup:before {
  border-bottom-color: var(--mm-surface);
}
html[data-theme="dark"] .geex-sidebar__menu__link.default-active,
html[data-theme="dark"] .geex-sidebar__menu__link.active,
html[data-theme="dark"] .geex-sidebar__menu__link:hover {
  background: var(--mumme-primary-soft);
}
html[data-theme="dark"] .geex-btn:hover {
  color: var(--mm-canvas);
  background-color: var(--primary-color);
}
html[data-theme="dark"] .geex-content__header__popup__title,
html[data-theme="dark"] .geex-content__header__popup__item__title {
  color: var(--mm-text);
}
html[data-theme="dark"] .geex-content__header__popup__item {
  border-color: var(--mm-border);
}


/* Surfaces */
html[data-theme="dark"] .mumme-card,
html[data-theme="dark"] .mumme-stat,
html[data-theme="dark"] .mumme-option,
html[data-theme="dark"] .mumme-match-card,
html[data-theme="dark"] .mumme-pillar,
html[data-theme="dark"] .mumme-sheet__panel,
html[data-theme="dark"] .mumme-dropdown,
html[data-theme="dark"] .mumme-check {
  background-color: var(--mumme-surface);
  color: var(--mumme-text);
}

html[data-theme="dark"] .mumme-card--muted,
html[data-theme="dark"] .mumme-note,
html[data-theme="dark"] .mumme-search,
html[data-theme="dark"] .mumme-tabs,
html[data-theme="dark"] .geex-sidebar__user,
html[data-theme="dark"] .mumme-tree__ico,
html[data-theme="dark"] .mumme-stat__icon,
html[data-theme="dark"] .mumme-pillar__icon {
  background-color: var(--mumme-surface-2);
  color: var(--mumme-text);
}

/* Same idea on the dark canvas: keep the surface, add the wash, so the banner
   is still distinguishable from a plain card without glowing. */
html[data-theme="dark"] .mumme-card--primary {
  background-color: var(--mumme-surface);
  background-image: linear-gradient(120deg, rgba(245, 133, 114, 0.16), rgba(245, 133, 114, 0.03));
}
html[data-theme="dark"] .mumme-card--secondary {
  background-color: var(--mumme-surface);
  background-image: linear-gradient(120deg, rgba(251, 197, 157, 0.16), rgba(251, 197, 157, 0.03));
}
html[data-theme="dark"] .mumme-card--caution {
  background-color: var(--mumme-surface);
  background-image: linear-gradient(120deg, rgba(251, 197, 157, 0.14), rgba(251, 197, 157, 0.02));
}

html[data-theme="dark"] .mumme-card--primary-solid {
  background: linear-gradient(135deg, var(--mumme-primary), #e87560);
  color: var(--mm-canvas);
}
html[data-theme="dark"] .mumme-toast {
  background: var(--mumme-surface-3);
  color: var(--mumme-text);
  border: 1px solid var(--mumme-border);
}

html[data-theme="dark"] .mumme-card--positive,
html[data-theme="dark"] .mumme-note--positive {
  background-color: var(--mumme-positive-soft);
}

html[data-theme="dark"] .mumme-note--primary {
  background-color: var(--mumme-primary-soft);
}

html[data-theme="dark"] .mumme-note--secondary {
  background-color: var(--mumme-secondary-soft);
}

html[data-theme="dark"] .mumme-note--info {
  background-color: var(--mumme-info-soft);
}

html[data-theme="dark"] .geex-content__header__popup,
html[data-theme="dark"] .geex-content__header__popup__title,
html[data-theme="dark"] .mumme-sheet__close {
  background-color: var(--mumme-surface);
  color: var(--mumme-text);
}

/* Text */
html[data-theme="dark"] .mumme-muted,
html[data-theme="dark"] .mumme-item__meta,
html[data-theme="dark"] .mumme-card__label,
html[data-theme="dark"] .mumme-stat__label,
html[data-theme="dark"] .mumme-match__label,
html[data-theme="dark"] .mumme-step__date,
html[data-theme="dark"] .mumme-rating-row__label,
html[data-theme="dark"] .mumme-rating-row__value {
  color: var(--mumme-text-muted);
}

html[data-theme="dark"] .mumme-item__title,
html[data-theme="dark"] .mumme-card__title,
html[data-theme="dark"] .mumme-stat__value,
html[data-theme="dark"] .geex-content__section__header__title,
html[data-theme="dark"] .mumme-section__title,
html[data-theme="dark"] .mumme-pillar__title,
html[data-theme="dark"] .mumme-pillar__list li,
html[data-theme="dark"] .mumme-option__title,
html[data-theme="dark"] .mumme-onboarding__title {
  color: var(--mumme-text);
}

html[data-theme="dark"] .mumme-item__text,
html[data-theme="dark"] .mumme-hero__lead,
html[data-theme="dark"] .mumme-section__lead {
  color: var(--mumme-text);
}

/* Chips, badges and buttons.
   The base rule below outranks the light-mode modifiers on specificity, so
   each semantic variant is restated here with its own fill. */
html[data-theme="dark"] .mumme-chip {
  background-color: var(--mumme-surface-3);
  color: var(--mumme-text);
}
html[data-theme="dark"] .mumme-chip--outline {
  background-color: transparent;
  border-color: var(--mumme-border);
}
html[data-theme="dark"] .mumme-chip--primary {
  background-color: var(--mumme-primary-soft);
  color: var(--mumme-primary-dark);
}
html[data-theme="dark"] .mumme-chip--secondary {
  background-color: var(--mumme-secondary-soft);
  color: var(--mumme-secondary-dark);
}
html[data-theme="dark"] .mumme-chip--caution {
  background-color: var(--mumme-caution-soft);
  color: var(--mumme-caution-dark);
}
html[data-theme="dark"] .mumme-chip--positive {
  background-color: var(--mumme-positive-soft);
  color: var(--mumme-positive-dark);
}
html[data-theme="dark"] .mumme-chip--info {
  background-color: var(--mumme-info-soft);
  color: var(--mumme-info-dark);
}
html[data-theme="dark"] .mumme-chip--negative {
  background-color: var(--mumme-negative-soft);
  color: var(--mumme-negative-dark);
}
html[data-theme="dark"] .mumme-chip--active {
  background-color: var(--mumme-primary);
  border-color: var(--mumme-primary);
  color: var(--mm-canvas);
}

html[data-theme="dark"] .mumme-badge {
  background-color: var(--mumme-surface-3);
  color: var(--mumme-text);
}
html[data-theme="dark"] .mumme-badge--ok {
  background-color: var(--mumme-positive-soft);
  color: var(--mumme-positive-dark);
}
html[data-theme="dark"] .mumme-badge--warn {
  background-color: var(--mumme-caution-soft);
  color: var(--mumme-caution-dark);
}
html[data-theme="dark"] .mumme-badge--info {
  background-color: var(--mumme-info-soft);
  color: var(--mumme-info-dark);
}
html[data-theme="dark"] .mumme-badge--bad {
  background-color: var(--mumme-negative-soft);
  color: var(--mumme-negative-dark);
}
html[data-theme="dark"] .mumme-badge--primary {
  background-color: var(--mumme-primary-soft);
  color: var(--mumme-primary-dark);
}
html[data-theme="dark"] .mumme-badge--secondary {
  background-color: var(--mumme-secondary-soft);
  color: var(--mumme-secondary-dark);
}
html[data-theme="dark"] .mumme-badge__count {
  background-color: var(--mumme-primary);
  color: var(--mm-canvas);
}

html[data-theme="dark"] .mumme-btn {
  background-color: var(--mumme-surface-2);
  color: var(--mumme-text);
}
html[data-theme="dark"] .mumme-btn:hover {
  background-color: var(--mumme-surface-hover);
}
/* These modifier rules must follow the base rule above: same specificity, so
   source order is what lets a primary button keep its own fill. */
html[data-theme="dark"] .mumme-btn--primary {
  background-color: var(--mumme-primary);
  color: var(--mm-canvas);
}
html[data-theme="dark"] .mumme-btn--primary:hover {
  background-color: #e87560;
  color: var(--mm-canvas);
}
html[data-theme="dark"] .mumme-btn--secondary {
  background-color: var(--mumme-secondary);
  color: var(--mm-canvas);
}
html[data-theme="dark"] .mumme-btn--secondary:hover {
  background-color: #f0b184;
  color: var(--mm-canvas);
}
html[data-theme="dark"] .mumme-btn--ghost {
  background-color: transparent;
  border-color: var(--mumme-border);
  color: var(--mumme-text);
}
html[data-theme="dark"] .mumme-btn--ghost:hover {
  background-color: var(--mumme-surface-2);
}
html[data-theme="dark"] .mumme-btn--outline {
  background-color: transparent;
  border-color: var(--mumme-primary);
  color: var(--mumme-primary);
}
html[data-theme="dark"] .mumme-btn--dark {
  background-color: var(--mumme-text);
  color: var(--mm-canvas);
}
html[data-theme="dark"] .mumme-btn--dark:hover {
  background-color: #fff;
  color: var(--mm-canvas);
}
/* Initials avatars, the "me" chat bubble, step numerals and the customizer
   button all sit on the dark palette's light accent fills, so their labels
   flip to canvas ink instead of white. */
html[data-theme="dark"] .mumme-avatar,
html[data-theme="dark"] .mumme-bubble--me,
html[data-theme="dark"] .mumme-step-card__num,
html[data-theme="dark"] .mumme-customizer-toggle,
html[data-theme="dark"] .mumme-demo-account__go:hover,
html[data-theme="dark"] .mumme-demo-account__go:focus-visible {
  color: var(--mm-canvas);
}
html[data-theme="dark"] .mumme-customizer-toggle {
  background: var(--mumme-primary);
}
html[data-theme="dark"] .mumme-customizer-toggle:hover {
  background: #e87560;
}

html[data-theme="dark"] .mumme-sidebar-toggle {
  background-color: var(--mumme-surface-2);
  color: var(--mumme-text);
}

/* Forms */
html[data-theme="dark"] .mumme-input,
html[data-theme="dark"] .mumme-select,
html[data-theme="dark"] .mumme-textarea {
  background-color: var(--mumme-surface-2);
  border-color: var(--mumme-border);
  color: var(--mumme-text);
}
html[data-theme="dark"] .mumme-search input {
  color: var(--mumme-text);
}
html[data-theme="dark"] .mumme-search input::placeholder,
html[data-theme="dark"] .mumme-input::placeholder,
html[data-theme="dark"] .mumme-textarea::placeholder {
  color: var(--mumme-text-muted);
}
html[data-theme="dark"] .mumme-toggle {
  background-color: var(--mumme-surface-3);
}

/* Tabs */
html[data-theme="dark"] .mumme-tab.is-active {
  background-color: var(--mumme-surface-3);
  color: var(--mumme-text);
}

/* Chat */
html[data-theme="dark"] .mumme-bubble {
  background-color: var(--mumme-surface-2);
  color: var(--mumme-text);
}
html[data-theme="dark"] .mumme-bubble--me {
  background: linear-gradient(135deg, var(--mumme-primary), var(--mumme-primary-dark));
  color: #fff;
}
html[data-theme="dark"] .mumme-composer {
  background: var(--dark-color);
}

/* Tables */
html[data-theme="dark"] .mumme-table th {
  background-color: var(--mumme-surface-2);
  color: var(--mumme-text-muted);
}
html[data-theme="dark"] .mumme-table td {
  border-bottom-color: var(--mumme-line);
  color: var(--mumme-text);
}
html[data-theme="dark"] .mumme-table tbody tr:hover td {
  background-color: var(--mumme-surface-2);
}

/* Progress, timeline and dividers */
html[data-theme="dark"] .mumme-progress {
  background-color: var(--mumme-surface-2);
}
html[data-theme="dark"] .mumme-donut::after {
  background: var(--mumme-surface);
}
html[data-theme="dark"] .mumme-steps::before,
html[data-theme="dark"] .mumme-divider,
html[data-theme="dark"] .mumme-list-row,
html[data-theme="dark"] .mumme-audit__row {
  border-color: var(--mumme-line);
}
html[data-theme="dark"] .mumme-steps::before {
  background: var(--mumme-line);
}
html[data-theme="dark"] .mumme-step::before {
  box-shadow: 0 0 0 3px var(--mumme-surface);
}

/* Landing, onboarding and login */
html[data-theme="dark"] .mumme-landing__nav {
  background: rgba(30, 15, 28, 0.88);
}
html[data-theme="dark"] .mumme-hero__eyebrow {
  background: var(--mumme-primary-soft);
  color: var(--mumme-text);
}
html[data-theme="dark"] .mumme-match-card__ico {
  background: var(--mumme-surface-3);
}
html[data-theme="dark"] .mumme-match-card--primary .mumme-match-card__ico {
  background: var(--mumme-primary-soft);
}
html[data-theme="dark"] .mumme-match-card--caution .mumme-match-card__ico {
  background: var(--mumme-caution-soft);
}
html[data-theme="dark"] .mumme-match-card--info .mumme-match-card__ico {
  background: var(--mumme-info-soft);
}
html[data-theme="dark"] .mumme-match-card__title,
html[data-theme="dark"] .mumme-hero__stat b {
  color: var(--mumme-text);
}
html[data-theme="dark"] .mumme-match-card__meta {
  color: var(--mumme-text-muted);
}
html[data-theme="dark"] .mumme-hero__signals {
  background: var(--mumme-calm);
  color: var(--mumme-calm-ink);
}
html[data-theme="dark"] .mumme-hero__stats {
  border-top-color: var(--mumme-border);
}
html[data-theme="dark"] .mumme-onboarding,
html[data-theme="dark"] .mumme-footer {
  background: var(--dark-color);
}
html[data-theme="dark"] .mumme-option__desc {
  color: var(--mumme-text-muted);
}
html[data-theme="dark"] .mumme-option__icon {
  background: var(--mumme-surface-2);
}

/* --------------------------------------------------------------------------
   26. Template authentication pages  (signin.html / signup.html)

   These screens reuse the Geex `.geex-content__authentication` layout and
   every template class it ships (__title, __form-group, __form-submit,
   __form-separator, __form-footer). This layer only adds the mumME logo
   lockup, inline SVG icons where the template expects its icon font, and
   the demo-account helper.
   -------------------------------------------------------------------------- */

/* --- Logo lockup in the template's logo slot ----------------------------- */
.geex-content__authentication__content__logo .mumme-brand {
  font-size: 26px;
  color: var(--body-color);
}
.geex-content__authentication__content__logo .mumme-brand__mark {
  width: 62px;
  height: 46px;
}

/* --- Inline SVG icons --------------------------------------------------- */
.geex-content__authentication__form-group .mumme-auth__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 0;
}
.mumme-auth__icon svg {
  display: block;
}
.mumme-auth__eye {
  display: block;
}
.mumme-auth__icon--action {
  cursor: pointer;
  transition: color 0.2s ease;
}
.mumme-auth__icon--action:hover,
.mumme-auth__icon--action:focus-visible {
  color: var(--primary-color);
  outline: none;
}
.mumme-auth__eye--off {
  display: none;
}
.mumme-auth__icon.is-visible .mumme-auth__eye--on {
  display: none;
}
.mumme-auth__icon.is-visible .mumme-auth__eye--off {
  display: block;
}

/* --- Inline validation -------------------------------------------------- */
.mumme-auth__error {
  margin: -8px 0 0;
  padding: 11px 16px;
  border-radius: var(--mumme-radius-sm);
  background: var(--danger-color-transparent);
  color: var(--mumme-negative-dark);
  font-size: 13.5px;
  line-height: 1.45;
  text-align: start;
}
.mumme-auth__error[hidden] {
  display: none;
}

/* --- Demo accounts ------------------------------------------------------ */
.mumme-auth__demo {
  text-align: start;
}
.mumme-auth__demo__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.mumme-auth__demo__grid {
  display: grid;
  gap: 8px;
}

.mumme-demo-account {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--gray-color);
  border-radius: 14px;
  background: var(--sectionThree-color);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.mumme-demo-account:hover,
.mumme-demo-account:focus-visible {
  border-color: var(--primary-color);
  background: var(--sectionTwo-color);
  outline: none;
}
.mumme-demo-account.is-selected {
  border-color: var(--primary-color);
  background: var(--sectionTwo-color);
  box-shadow: 0 0 0 3px var(--primary-color-transparent);
}
.mumme-demo-account .mumme-avatar {
  width: 38px;
  height: 38px;
  font-size: 13px;
  flex: none;
}
.mumme-demo-account__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.mumme-demo-account__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--body-color);
}
.mumme-demo-account__email {
  font-size: 12px;
  color: var(--sec-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mumme-demo-account .mumme-chip {
  flex: none;
  padding: 4px 10px;
  font-size: 11px;
}
.mumme-demo-account__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--primary-color-transparent);
  color: var(--primary-color);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.mumme-demo-account__go:hover,
.mumme-demo-account__go:focus-visible {
  background: var(--primary-color);
  color: var(--white-color);
  outline: none;
}

/* --- Helper copy + alternate action ------------------------------------- */
.mumme-auth__hint {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--desc-color);
  text-align: start;
}
.mumme-auth__hint[hidden] {
  display: none;
}
.mumme-auth__hint--lead {
  margin: 0 0 14px;
}
.mumme-auth__hint b {
  color: var(--primary-color);
  font-weight: 600;
}
.mumme-auth__alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  border: 1px solid var(--gray-color);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--body-color);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.mumme-auth__alt:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* --- Dark mode ---------------------------------------------------------- */
html[data-theme="dark"] .geex-content__authentication__content__logo .mumme-brand {
  color: var(--mumme-text);
}
html[data-theme="dark"] .mumme-demo-account {
  border-color: var(--mumme-border);
  background: var(--mumme-surface-2);
}
html[data-theme="dark"] .mumme-demo-account:hover,
html[data-theme="dark"] .mumme-demo-account:focus-visible,
html[data-theme="dark"] .mumme-demo-account.is-selected {
  background: var(--mumme-surface-3);
  border-color: var(--primary-color);
}
html[data-theme="dark"] .mumme-demo-account__name {
  color: var(--mumme-text);
}
html[data-theme="dark"] .mumme-demo-account__email {
  color: var(--mumme-text-muted);
}
html[data-theme="dark"] .mumme-auth__hint {
  color: var(--mumme-text-muted);
}
html[data-theme="dark"] .mumme-auth__alt {
  border-color: var(--mumme-border);
  color: var(--mumme-text);
}
html[data-theme="dark"] .mumme-auth__error {
  color: var(--danger-color);
}