/* ==========================================================================
   MamaMotion — Components
   Reusable component layer for the MamaMotion design system.
   Load AFTER mm-tokens.css (or mm.css) — these rules consume the tokens.
   Pairs with assets/mm.js for behaviour (sliders, accordion, widgets).

   Contents: course/pricing cards (.crs-*), phase finder, story signature,
   testimonial + topic sliders (.mm-slider / .feat-slider), app phone +
   floating notifications (.app-*), value props (.vp-*), AI coach band (.ai-*),
   CTA band, footer (.mmf-*) and floating widgets (.mm-fab-*, .mm-chat).
   ========================================================================== */

/* Global form-control tint: native checkboxes/radios default to the browser's
   blue accent — recolor every one across the theme to the brand ink (the
   design system's emphasis/selection colour, matching buttons & CTAs). */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ink);
}

.ph-soft {
  background: radial-gradient(
    120% 90% at 50% 6%,
    var(--cream),
    var(--blush) 55%,
    #f6d3d8
  ) !important;
}
.mm-course-media {
  aspect-ratio: 16/10;
  border-radius: var(--r);
}
.courses-bento .mm-tile {
  min-height: 210px;
}
@media (min-width: 760px) {
  .courses-bento .mm-tile {
    min-height: 240px;
  }
}

/* ===== Courses: pricing/phase cards ===== */
.crs-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .crs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.crs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--sh-sm);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.crs-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-md);
}
.crs-img {
  position: relative;
  aspect-ratio: 16/8;
  border-radius: var(--r);
  overflow: hidden;
  background: linear-gradient(150deg, var(--blush), var(--mauve));
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.crs-img svg {
  width: 38%;
  max-width: 58px;
  color: rgba(139, 91, 90, 0.5);
}
.crs-img__tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--accent-ink);
  background: rgba(255, 255, 255, 0.82);
  padding: 4px 9px;
  border-radius: 999px;
}
.crs-kicker {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.crs-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 6px 0 0;
  line-height: 1.12;
}
.crs-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 14px 0 0;
}
.crs-price__pre {
  font-size: 13px;
  color: var(--text-soft);
}
.crs-price__n {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.crs-price__per {
  font-size: 14px;
  color: var(--text-soft);
}
.crs-price__sub {
  font-size: 12.5px;
  color: var(--text-soft);
  margin-top: 6px;
  min-height: 1em;
}
.crs-feat {
  list-style: none;
  margin: 16px 0 20px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.crs-feat li {
  display: flex;
  gap: 10px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text);
}
.crs-feat svg {
  width: 18px;
  height: 18px;
  color: var(--rose-700);
  flex-shrink: 0;
  margin-top: 1px;
}
.crs-card .mm-btn {
  margin-top: auto;
}
.crs-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.crs-badge svg {
  width: 12px;
  height: 12px;
}
.crs-card--pop {
  border: 0;
  background: var(--ink);
}
.crs-card--pop .crs-kicker {
  color: var(--mauve);
}
.crs-card--pop .crs-title,
.crs-card--pop .crs-price__n {
  color: var(--cream);
}
.crs-card--pop .crs-price__per,
.crs-card--pop .crs-price__sub,
.crs-card--pop .crs-price__pre {
  color: rgba(255, 245, 245, 0.66);
}
.crs-card--pop .crs-feat {
  border-color: rgba(255, 245, 245, 0.16);
}
.crs-card--pop .crs-feat li {
  color: rgba(255, 245, 245, 0.85);
}
.crs-card--pop .crs-feat svg {
  color: var(--mauve);
}
.crs-card--pop .crs-img {
  background: linear-gradient(150deg, var(--rose), var(--mauve));
}
.crs-card--pop .crs-badge {
  background: var(--cream);
  color: var(--ink);
}
/* per-card reassurance line under a CTA */
.crs-reassure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-soft);
  text-align: center;
}
.crs-reassure svg {
  width: 13px;
  height: 13px;
  color: var(--rose-700);
  flex: 0 0 auto;
}

/* floating price tag pinned to a course media tile (Valmennukset rows) */
.crs-pricetag {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  padding: 11px 15px;
  z-index: 3;
}
.crs-pricetag .crs-price {
  margin: 0;
}
@media (max-width: 560px) {
  .crs-pricetag {
    right: 12px;
    bottom: 12px;
    padding: 7px 11px;
  }
  /* Smaller badge on phones so it covers less of the product graphic. */
  .crs-pricetag .crs-price__n {
    font-size: 28px;
  }
  .crs-pricetag .crs-price__pre {
    font-size: 11px;
  }
  .crs-pricetag .crs-price__per {
    font-size: 12px;
  }
}

.crs-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 26px;
  flex-wrap: wrap;
  margin-top: 28px;
  font-size: 13.5px;
  color: var(--text-soft);
}
.crs-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.crs-trust svg {
  width: 17px;
  height: 17px;
  color: var(--rose-700);
}

/* AI assistant badge on product image */
.crs-aibadge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: -0.01em;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  box-shadow: var(--sh-sm);
  cursor: help;
}
.crs-aibadge__tip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  max-width: 230px;
  text-align: left;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  padding: 11px 13px;
  border-radius: 12px;
  box-shadow: var(--sh-md);
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease);
  z-index: 5;
}
.crs-aibadge__tip::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 18px;
  width: 10px;
  height: 10px;
  background: var(--ink);
  transform: rotate(45deg);
}
.crs-aibadge:hover .crs-aibadge__tip,
.crs-aibadge:focus-visible .crs-aibadge__tip {
  opacity: 1;
  transform: none;
}
.crs-aibadge svg {
  width: 13px;
  height: 13px;
  color: var(--rose-700);
}
.crs-aibadge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4c8268;
  box-shadow: 0 0 0 3px rgba(76, 130, 104, 0.18);
  animation: mm-dot-blink 1.8s ease-in-out infinite;
}
@keyframes mm-dot-blink {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(76, 130, 104, 0.18);
  }
  50% {
    opacity: 0.45;
    box-shadow: 0 0 0 5px rgba(76, 130, 104, 0.07);
  }
}
@media (prefers-reduced-motion: reduce) {
  .crs-aibadge .dot {
    animation: none;
  }
}

/* phase finder (JS) */
.crs-finder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 auto clamp(26px, 4vw, 38px);
}
.crs-finder__q {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.crs-finder__opts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.crs-finder__opts button {
  border: 1px solid var(--line-2);
  background: #fff;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-soft);
  padding: 11px 20px;
  border-radius: 999px;
  box-shadow: var(--sh-sm);
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.crs-finder__opts button:hover {
  color: var(--ink);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.crs-finder__opts button.on {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* recommended state */
.crs-grid.has-rec .crs-card:not(.is-rec) {
  opacity: 0.62;
}
.crs-card.is-rec {
  box-shadow:
    0 0 0 2px var(--ink),
    var(--sh-md);
  transform: translateY(-4px);
}
.crs-rec-tag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: none;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--ink);
  padding: 5px 12px;
  border-radius: 999px;
}
.crs-rec-tag svg {
  width: 12px;
  height: 12px;
}
.crs-card.is-rec .crs-rec-tag {
  display: inline-flex;
}

/* Plus add-on banner (calm, secondary) */
.crs-addon {
  position: relative;
  display: flex;
  gap: clamp(20px, 2.4vw, 32px);
  align-items: center;
  /* Soft mauve add-on block — distinct from the blush page but calmer than the
     ink it replaced. Dark text reads fine on mauve; the blush product tile
     separates and the Plus logo pops. */
  background: var(--mauve);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2.6vw, 26px);
  margin-top: 16px;
  flex-wrap: wrap;
  box-shadow: var(--sh-md);
}
/* Plus product image — a wide 16:8 media box matching the course cards'
   product images (mockup gradient + "Tuotekuva" tag until a real image is set);
   the wider image pushes the content column to the right. */
.crs-addon__ic {
  position: relative;
  width: clamp(160px, 24%, 256px);
  aspect-ratio: 16 / 8;
  border-radius: var(--r);
  /* blush product tile on the dark ink card — the light tile separates the
     product image cleanly and the transparent rose/mauve Plus logo reads
     against it. (Earlier a blush→mauve gradient here bled through the logo;
     a white-on-blush-card version was abandoned for this ink-card treatment.) */
  background: var(--blush);
  display: grid;
  place-items: center;
  color: var(--rose-700);
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.crs-addon__ic svg {
  width: 34px;
  height: 34px;
}
@media (max-width: 640px) {
  .crs-addon__ic {
    width: 100%;
  }
}
.crs-addon__main {
  flex: 1;
  min-width: 220px;
}
.crs-addon__tag {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.crs-addon__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 4px 0 5px;
}
.crs-addon__desc {
  font-size: 13.5px;
  /* --text (not --text-soft) — muted soft washes out on the mauve card;
     normal body copy keeps the description legible */
  color: var(--text);
  line-height: 1.5;
  max-width: 56ch;
}
.crs-addon__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.crs-addon__price {
  line-height: 1.1;
}
.crs-addon__price .n {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.crs-addon__price .s {
  font-size: 12px;
  /* --text (not --text-soft) for legibility on the mauve card, matching the desc */
  color: var(--text);
}

.story-bento {
  align-items: stretch;
}
.story-bento .mm-ratio {
  border-radius: var(--r-lg);
}
/* founder signature */
.story-sign {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
}
.story-sign__av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--cream);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.story-sign__av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-sign__txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.story-sign__name {
  line-height: 1.2;
}
.story-sign__role {
  line-height: 1.2;
}
.story-sign__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.story-sign__role {
  font-size: 12.5px;
  color: var(--text-soft);
}
/* testimonial slider */
.mm-slider {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mm-slider__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.mm-slider__label {
  font-family: var(--font);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.mm-slider__label svg {
  width: 14px;
  height: 14px;
}
.mm-slider__nav {
  display: flex;
  gap: 6px;
}
.mm-slider__nav button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 245, 245, 0.3);
  background: none;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--dur) var(--ease);
}
.mm-slider__nav button:hover {
  background: rgba(255, 245, 245, 0.14);
}
.mm-slider__nav svg {
  width: 15px;
  height: 15px;
}
.mm-slider__view {
  overflow: hidden;
  flex: 1;
}
.mm-slider__track {
  display: flex;
  height: 100%;
  transition: transform 0.5s var(--ease);
}
.mm-slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.mm-slide__stars {
  color: #f0c869;
  letter-spacing: 2px;
  font-size: 15px;
}
.mm-slide__quote {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.38;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.mm-slide__cite {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  padding-top: 12px;
}
.mm-slide__cite > span {
  line-height: 1.2;
}
.mm-slide__av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 245, 245, 0.25);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.mm-slide__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
}
.mm-slide__role {
  font-size: 12.5px;
  color: rgba(255, 245, 245, 0.72);
  white-space: nowrap;
}
.mm-slider__dots {
  display: flex;
  gap: 7px;
  margin-top: 16px;
}
.mm-slider__dots button {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 245, 245, 0.4);
  cursor: pointer;
  transition:
    width var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
/* Extend the dot tap target to ~24px (WCAG 2.5.8) without enlarging the dot. */
.mm-slider__dots button::before {
  content: "";
  position: absolute;
  inset: -9px;
}
.mm-slider__dots button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.mm-slider__dots button.on {
  background: #fff;
  width: 22px;
  border-radius: 99px;
}

.app-wrap {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

/* app phone + floating notifications */
.app-phone {
  display: flex;
  justify-content: flex-end;
}
.app-phone__stage {
  position: relative;
  width: min(320px, 80%);
}
.app-phone__img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.4));
}
.app-noti {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 11px;
  width: min(290px, 92vw);
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(0.96);
}
.app-noti__ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--ink);
  color: var(--cream);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.app-noti__body {
  min-width: 0;
  flex: 1;
}
.app-noti__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.app-noti__app {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-noti__time {
  font-size: 11px;
  color: var(--mauve);
  flex-shrink: 0;
}
.app-noti__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.25;
}
.app-noti__text {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-noti--1 {
  top: 6%;
  left: -14%;
}
.app-noti--2 {
  top: 38%;
  right: -10%;
}
.app-noti--3 {
  bottom: 6%;
  left: -8%;
  z-index: 1;
}
.app-noti--4 {
  top: 22%;
  left: -12%;
}
.app-noti--5 {
  bottom: 22%;
  right: -10%;
  z-index: 1;
}
@media (max-width: 560px) {
  .app-phone__stage {
    width: min(280px, 86%);
    margin: 0 auto;
  }
  .app-noti {
    width: min(230px, 64vw);
  }
  .app-noti--1 {
    left: -6%;
  }
  .app-noti--2 {
    right: -4%;
  }
  .app-noti--3 {
    left: -4%;
  }
  .app-noti--4 {
    left: -6%;
  }
  .app-noti--5 {
    right: -4%;
  }
}
@keyframes app-noti-cycle {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  3.5%,
  16% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  20%,
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
  }
}
.mm-js .app-noti {
  animation: app-noti-cycle 17.5s var(--ease) infinite;
}
.mm-js .app-noti--1 {
  animation-delay: 0.4s;
}
.mm-js .app-noti--2 {
  animation-delay: 3.7s;
}
.mm-js .app-noti--3 {
  animation-delay: 7s;
}
.mm-js .app-noti--4 {
  animation-delay: 10.3s;
}
.mm-js .app-noti--5 {
  animation-delay: 13.6s;
}
@media (prefers-reduced-motion: reduce) {
  .mm-js .app-noti {
    animation: none;
    opacity: 1;
    transform: none;
    position: static;
    width: 100%;
    margin-top: 12px;
  }
  .app-phone__stage {
    width: min(320px, 80%);
  }
}
/* value-prop bento */
.vp-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vp-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(20px, 2.1vw, 23px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  line-height: 1.18;
}
.vp-text {
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0;
}
.vp-card .mm-btn,
.vp-wide .mm-btn,
.vp-cta .mm-btn {
  align-self: flex-start;
}
.vp-media {
  margin-top: auto;
  border-radius: var(--r);
  overflow: hidden;
  min-height: 168px;
}
.vp-media .mm-ph {
  border-radius: 0;
}
.vp-card--center {
  text-align: center;
  align-items: center;
}
.vp-rating {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.vp-rating__n {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(58px, 7vw, 80px);
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
}
.vp-quote-name {
  margin: -4px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.vp-quote-name strong {
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 600;
}
.vp-rating__stars {
  color: var(--star);
  letter-spacing: 3px;
  font-size: 19px;
}
.vp-rating__src {
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}
/* wide card — text left, larger mockup image right */
.vp-wide {
  overflow: hidden;
  min-height: 340px;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 34px);
  align-items: center;
  padding: clamp(24px, 3vw, 36px);
}
@media (min-width: 700px) {
  .vp-wide {
    grid-template-columns: 0.85fr 1.15fr;
  }
}
.vp-wide__bg {
  order: 2;
  border-radius: var(--r);
  overflow: hidden;
  min-height: 240px;
  align-self: stretch;
  box-shadow: var(--sh-sm);
}
.vp-wide__bg .mm-ph {
  border-radius: 0;
}
.vp-wide__body {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.vp-wide .vp-title {
  font-size: clamp(23px, 2.9vw, 31px);
  line-height: 1.14;
}
.vp-wide__body .vp-text {
  font-size: 15.5px;
}
/* dark CTA card — full dark bg + subtle image overlay */
.mm-tile.vp-cta {
  padding: clamp(26px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: flex-start;
  overflow: hidden;
  position: relative;
  background: var(--ink);
  min-height: 320px;
}
.vp-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.16;
  mix-blend-mode: luminosity;
}
.vp-cta__bg .mm-ph {
  border-radius: 0;
  background: none;
  place-items: end center;
}
.vp-cta__bg .mm-ph::after {
  display: none;
}
.vp-cta__bg .mm-ph svg {
  width: 100%;
  max-width: 360px;
  color: rgba(255, 245, 245, 0.55);
  transform: translateY(8%);
}
.mm-tile.vp-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    130% 90% at 85% 0%,
    rgba(184, 151, 150, 0.4),
    transparent 58%
  );
  pointer-events: none;
}
.vp-cta__head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: flex-start;
}
.vp-cta__head .vp-text {
  max-width: 30ch;
}
@media (min-width: 880px) {
  .app-wrap {
    grid-template-columns: 1fr 0.9fr;
  }
}
.check-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 22px 0;
}
.check-list div {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--cream);
}
.check-list svg {
  width: 20px;
  height: 20px;
  color: var(--mint);
  flex-shrink: 0;
}
.mm-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.mm-badge-img {
  display: inline-flex;
  border-radius: 10px;
  transition:
    transform 0.3s var(--ease),
    opacity 0.3s var(--ease);
}
.mm-badge-img:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}
.mm-badge-img img {
  height: 52px;
  width: auto;
  display: block;
}

/* ===== Feature topics slider (in value-prop card) ===== */
.feat-slider {
  display: flex;
  flex-direction: column;
}
.feat-slider__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.feat-slider__eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.feat-slider__nav {
  display: flex;
  gap: 6px;
}
.feat-slider__nav button {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
/* Extend the tap target to 44px (WCAG 2.5.5) without enlarging the 30px disc. */
.feat-slider__nav button::before {
  content: "";
  position: absolute;
  inset: -7px;
}
.feat-slider__nav button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.feat-slider__nav button:hover {
  background: var(--blush);
  border-color: var(--rose);
}
.feat-slider__nav svg {
  width: 15px;
  height: 15px;
}
.feat-slider .mm-slider__view {
  overflow: hidden;
  flex: 1;
}
.feat-slider .mm-slider__track {
  display: flex;
  align-items: stretch;
  transition: transform 0.5s var(--ease);
}
.feat-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feat-ic {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--blush);
  color: var(--rose-700);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}
.feat-ic svg {
  width: 26px;
  height: 26px;
}
/* The brand PNG icons carry their own (square, light-blush) background, so don't
   stack them on the disc's blush — let the PNG fill the disc and clip to its
   rounding, so the icon's bg IS the tile (no mismatched inner square). */
.feat-ic--img {
  background: transparent;
  padding: 0;
  overflow: hidden;
}
.feat-ic--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.feat-slider .vp-text {
  min-height: 3em;
}
.feat-slider__dots {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.feat-slider__dots button {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--line-2);
  cursor: pointer;
  transition:
    width var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
.feat-slider__dots button.on {
  background: var(--rose-700);
  width: 18px;
  border-radius: 99px;
}
/* Review slider (Meistä mosaic): a flex track of N non-shrinking 100% slides
   blows out its grid cell on mobile (min-width:0 / overflow can't cap a
   spanning grid item whose flex children won't shrink). A grid track with
   fixed 100% columns takes its size FROM the cell instead of from content, so
   the slider stays within the bento; mm.js still drives it via translateX. */
.mm-reviews .mm-slider__view {
  width: 100%;
}
.mm-reviews .mm-slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
}

/* ===== Own review carousel (.mm-crev) — replaces the Common Ninja widget =====
   Horizontal scroll-snap track of testimonial cards; [data-mm-crev] in mm.js
   wires arrows + dots + active sync. Works without JS (native scroll). */
.mm-crev {
  position: relative;
  max-width: 1500px;
  margin: clamp(24px, 3vw, 40px) auto 0;
  padding: 0 clamp(14px, 4vw, 56px);
}
.mm-crev__track {
  --crev-fade: clamp(28px, 6vw, 90px);
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 4px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* soft-fade both edges to transparent so the capped scroller blends into the
     section instead of ending on a hard vertical cut */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--crev-fade),
    #000 calc(100% - var(--crev-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--crev-fade),
    #000 calc(100% - var(--crev-fade)),
    transparent 100%
  );
}
.mm-crev__track::-webkit-scrollbar {
  display: none;
}
.mm-crev__card {
  flex: 0 0 auto;
  width: min(88vw, 400px);
  scroll-snap-align: center;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: clamp(22px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.mm-crev__head {
  display: flex;
  align-items: center;
  gap: 13px;
}
.mm-crev__avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blush);
  color: var(--rose-700);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.mm-crev__name {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  font-size: var(--fs-sm);
}
.mm-crev__stars {
  color: var(--star);
  font-size: 15px;
  letter-spacing: 1px;
}
.mm-crev__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.mm-crev__text {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.mm-crev__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--sh-sm);
  transition:
    background 0.2s var(--ease),
    border-color 0.2s var(--ease),
    opacity 0.2s var(--ease);
}
.mm-crev__arrow:hover {
  background: var(--cream);
  border-color: var(--rose);
}
.mm-crev__arrow--prev {
  left: clamp(2px, 1vw, 14px);
}
.mm-crev__arrow--next {
  right: clamp(2px, 1vw, 14px);
}
.mm-crev__arrow[disabled] {
  opacity: 0;
  pointer-events: none;
}
.mm-crev__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.mm-crev__dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mauve);
  opacity: 0.5;
  cursor: pointer;
  transition:
    opacity 0.2s var(--ease),
    background 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.mm-crev__dots button.on {
  opacity: 1;
  background: var(--ink);
  transform: scale(1.15);
}
@media (max-width: 600px) {
  .mm-crev__arrow {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mm-crev__track {
    scroll-behavior: auto;
  }
}

/* ===== AI coach highlight band ===== */
.ai-band {
  background: var(--ink);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  overflow: hidden;
}
@media (min-width: 860px) {
  .ai-band {
    grid-template-columns: 1.05fr 0.95fr;
  }
}
.ai-band__body .mm-h2 {
  color: var(--cream);
}
.ai-band .mm-btn--primary {
  background: var(--cream);
  color: var(--ink);
  box-shadow: none;
}
.ai-band .mm-btn--primary:hover {
  background: #fff;
}
.ai-band__body .mm-h2 .mm-thin {
  color: var(--mauve);
}
.ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--mauve);
  padding: 7px 14px;
  border-radius: 999px;
}
.ai-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4caf72;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(76, 175, 114, 0.6);
  animation: ai-blink 1.8s var(--ease) infinite;
}
@keyframes ai-blink {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(76, 175, 114, 0.55);
  }
  50% {
    opacity: 0.45;
    box-shadow: 0 0 0 5px rgba(76, 175, 114, 0);
  }
}
.ai-feats {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.ai-feats li {
  display: flex;
  gap: 11px;
  font-size: 15px;
  color: rgba(255, 245, 245, 0.85);
}
.ai-feats svg {
  width: 19px;
  height: 19px;
  color: var(--mauve);
  flex-shrink: 0;
  margin-top: 1px;
}
/* chat mockup */
.ai-chat {
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--sh-lg);
  max-width: 420px;
  width: 100%;
  justify-self: center;
}
.ai-chat__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.ai-chat__av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--cream);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ai-chat__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.ai-chat__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-soft);
}
.ai-chat__msgs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
}
.ai-bub {
  max-width: 84%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
}
.ai-bub--in {
  align-self: flex-end;
  background: var(--ink);
  color: var(--cream);
  border-bottom-right-radius: 5px;
}
.ai-bub--out {
  align-self: flex-start;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
}
.ai-bub--link {
  color: var(--rose-700);
  font-weight: 600;
  font-family: var(--font-head);
}
.ai-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  border-bottom-left-radius: 5px;
  padding: 13px 15px;
}
.ai-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mauve);
  animation: ai-typing 1.3s ease-in-out infinite;
}
.ai-typing span:nth-child(2) {
  animation-delay: 0.18s;
}
.ai-typing span:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes ai-typing {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-dot,
  .ai-typing span {
    animation: none;
  }
}

.cta-band {
  background: var(--mauve);
  border-radius: var(--r-xl);
  padding: clamp(34px, 6vw, 72px) clamp(24px, 5vw, 56px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band .mm-spark-bg {
  position: absolute;
  color: rgba(255, 255, 255, 0.4);
}

/* ===================== FOOTER (IG-feed style) ===================== */
.mmf {
  background: var(--cream);
}
.mmf-wrap {
  max-width: 1500px;
  margin: 0 auto;
}
/* newsletter band */
.mmf-news {
  background: var(--blush);
}
.mmf-news__in {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 64px) var(--gutter);
  display: grid;
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
}
@media (min-width: 880px) {
  .mmf-news__in {
    grid-template-columns: 1fr 1fr;
  }
}
.mmf-news h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(23px, 3vw, 33px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.mmf-news p {
  margin: 10px 0 0;
  color: var(--text);
  max-width: 44ch;
  font-size: var(--fs-sm);
}
.mmf-form {
  background: #fff;
  border-radius: var(--pill);
  padding: 7px 7px 7px 8px;
  display: flex;
  gap: 8px;
  box-shadow: var(--sh-sm);
  border: 1px solid var(--line);
}
.mmf-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0 16px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
}
.mmf-form input::placeholder {
  color: var(--text-soft);
}
.mmf-form input:focus {
  outline: none;
}
.mmf-sub {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13.5px;
}
/* divider stripe */
.mmf-stripe {
  height: 7px;
  background: linear-gradient(
    90deg,
    var(--blush) 0%,
    var(--mauve) 38%,
    var(--rose) 66%,
    var(--blush) 100%
  );
}
/* instagram feed */
.mmf-feed {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scrollbar-width: none;
}
.mmf-feed::-webkit-scrollbar {
  display: none;
}
.mmf-feed.is-drag {
  cursor: grabbing;
  scroll-snap-type: none;
}
.mmf-feed.is-drag a {
  pointer-events: none;
}
.mmf-tile {
  position: relative;
  flex: 0 0 auto;
  width: clamp(168px, 21vw, 286px);
  aspect-ratio: 1;
  scroll-snap-align: start;
  overflow: hidden;
}
.mmf-tile .mm-ph {
  border-radius: 0;
}
.mmf-tile .mm-ph[data-label]::after {
  left: 12px;
  bottom: 12px;
}
.mmf-tile__ov {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(37, 17, 16, 0);
  transition: background 0.35s var(--ease);
}
.mmf-tile:hover .mmf-tile__ov {
  background: rgba(37, 17, 16, 0.34);
}
.mmf-tile__ov svg {
  width: 30px;
  height: 30px;
  color: #fff;
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.35s var(--ease),
    transform 0.35s var(--ease);
}
.mmf-tile:hover .mmf-tile__ov svg {
  opacity: 1;
  transform: scale(1);
}
.mmf-tile--video .mmf-cap {
  position: absolute;
  left: 14px;
  bottom: 14px;
  right: 14px;
  z-index: 2;
  color: #fff;
}
.mmf-tile--video .mmf-cap b {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.mmf-tile--video .mmf-cap span {
  font-size: 12.5px;
  opacity: 0.85;
}
.mmf-tile--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(37, 17, 16, 0.6));
}
.mmf-tile--video .mmf-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}
.mmf-handle {
  position: absolute;
  top: 16px;
  left: max(16px, calc((100% - 1500px) / 2 + 16px));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 15px;
  border-radius: var(--pill);
  box-shadow: var(--sh-sm);
  pointer-events: none;
}
.mmf-handle svg {
  width: 17px;
  height: 17px;
  color: var(--rose-700);
}
.mmf-feedwrap {
  position: relative;
}
/* main columns */
.mmf-main {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 76px) var(--gutter) clamp(20px, 3vw, 32px);
}
.mmf-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 44px) 20px;
}
@media (min-width: 760px) {
  .mmf-cols {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
  }
}
.mmf-col h4 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 18px;
}
.mmf-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.mmf-col a {
  font-size: 15px;
  color: var(--text-soft);
  transition: color var(--dur) var(--ease);
}
.mmf-col a:hover {
  color: var(--ink);
}
/* meta: logo + copyright left, social aligned with Yhteys column & logo level */
.mmf-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: clamp(30px, 4vw, 52px);
}
.mmf-meta__left {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
}
@media (min-width: 760px) {
  .mmf-meta {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    align-items: start;
    gap: 24px;
  }
  .mmf-meta__left {
    grid-column: 1 / 4;
  }
  .mmf-social {
    grid-column: 4;
  }
}
.mmf-logo img {
  height: clamp(26px, 3.6vw, 40px);
  width: auto;
  display: block;
}
.mmf-fine {
  margin: 0;
  color: var(--mauve);
  font-size: 12.5px;
  line-height: 1.7;
  max-width: 60ch;
}
.mmf-social {
  display: flex;
  gap: 12px;
}
.mmf-social a {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--cream);
  display: grid;
  place-items: center;
  transition:
    transform var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
.mmf-social a:hover {
  transform: translateY(-3px);
  background: var(--ink-2);
}
.mmf-social svg {
  width: 19px;
  height: 19px;
}
/* Social icons relocate into the Yhteys (col 4) column when the footer columns
   stack on mobile/tablet; on desktop only the meta-row copy shows. The in-column
   copy gets top breathing room after the last link and slightly smaller buttons. */
.mmf-social--incol {
  display: none;
}
@media (max-width: 759px) {
  .mmf-social--meta {
    display: none;
  }
  .mmf-social--incol {
    display: flex;
    margin-top: 22px;
  }
  .mmf-social--incol a {
    width: 38px;
    height: 38px;
  }
  .mmf-social--incol svg {
    width: 16px;
    height: 16px;
  }
}

/* ===== floating widgets ===== */
.mm-fab-offer {
  position: fixed;
  left: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--cream);
  border: 0;
  white-space: nowrap;
  border-radius: var(--pill);
  padding: 11px 11px 11px 18px;
  box-shadow: var(--sh-md);
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  transition:
    transform 0.3s var(--ease),
    opacity 0.3s var(--ease);
}
.mm-fab-offer:hover {
  transform: translateY(-2px);
}
.mm-fab-offer .x {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 245, 245, 0.16);
  display: grid;
  place-items: center;
  transition: background 0.3s var(--ease);
}
.mm-fab-offer .x:hover {
  background: rgba(255, 245, 245, 0.3);
}
.mm-fab-offer .x svg {
  width: 13px;
  height: 13px;
}
.mm-fab-offer.is-hidden {
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
}

.mm-chat {
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.mm-chat__panel {
  width: min(300px, 78vw);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  padding: 18px;
  animation: mmpop 0.3s var(--ease);
}
.mm-chat__panel[hidden] {
  display: none;
}
@keyframes mmpop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
}
.mm-chat__head {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mm-chat__head .on {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4c8268;
  box-shadow: 0 0 0 3px rgba(76, 130, 104, 0.18);
}
.mm-chat__head small {
  font-family: var(--font);
  font-weight: 500;
  font-size: 12px;
  color: var(--text-soft);
  margin-left: auto;
}
.mm-chat__panel p {
  margin: 12px 0 14px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}
.mm-fab-chat {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  border: 0;
  display: grid;
  place-items: center;
  box-shadow: var(--sh-md);
  cursor: pointer;
  transition: transform 0.3s var(--ease);
}
.mm-fab-chat:hover {
  transform: translateY(-3px) scale(1.04);
}
.mm-fab-chat svg {
  width: 26px;
  height: 26px;
}
.mm-fab-chat__dot {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rose);
  border: 2px solid var(--ink);
}

/* ===== subpage hero (.mm-page-hero) ===== */
.mm-page-hero {
  padding-bottom: 0;
}
/* opt-in cream breathing room below the hero when it sits directly above a
   contrasting block (e.g. Sovellus hero -> dark app band) */
.mm-page-hero--pad-below {
  padding-bottom: clamp(40px, 6vw, 72px);
}
.mm-page-hero__chips {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.mm-page-hero__chips-label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.mm-page-hero__chiprow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.mm-page-hero__rating {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
/* Optional warm background glow on a subpage hero (opt-in via the section's
   "glow" setting → .mm-page-hero--glow; used on Valmennukset). Mirrors the
   homepage hero's LIGHTER Oura-style wash and shares the rose/terracotta recipe
   + tokens with the .hero-sec / .shero glow (see the glow system lower in this
   file). Pulls up under the transparent header so the glow fills from the very
   top, and masks its bottom edge so it dissolves into the cream of the block
   below (the hero sits on cream; the next section is cream too — no seam). */
.mm-page-hero--glow {
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--header-h, 69px));
  padding-top: calc(var(--section-y) + var(--header-h, 69px));
}
.mm-page-hero--glow > .mm-container {
  position: relative;
  z-index: 1;
}
.mm-page-hero--glow::before {
  content: "";
  position: absolute;
  /* Full-bleed: the hero glow flows freely across the whole section width (its
     radial mask handles the fade). No max-width cap — that boxed it on wide
     screens. (The capped/centred treatment is only for the content glowband.) */
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Default fade envelope (variant "bloom" overrides it). The glow background
     itself is set per variant below. */
  -webkit-mask: radial-gradient(
    110% 85% at 50% 12%,
    #000 0%,
    #000 46%,
    transparent 88%
  );
  mask: radial-gradient(
    110% 85% at 50% 12%,
    #000 0%,
    #000 46%,
    transparent 88%
  );
}
/* Variant "warm" (Valmennukset) — broad rose field from the top-centre plus a
   terracotta warmth on the right: one continuous symmetric warm wash. */
.mm-page-hero--glow-warm::before {
  background:
    radial-gradient(
      130% 100% at 48% 6%,
      color-mix(in srgb, var(--rose) 30%, transparent) 0%,
      color-mix(in srgb, var(--rose) 11%, transparent) 44%,
      transparent 76%
    ),
    radial-gradient(
      95% 85% at 82% 26%,
      color-mix(in srgb, var(--terracotta) 22%, transparent) 0%,
      transparent 60%
    );
}
/* Variant "bloom" (Meistä) — a deliberately ASYMMETRIC, offset arrangement of
   three soft pools (rose upper-left, mauve mid-right, terracotta rising from
   the centre) for a different, less even organic field than the warm wash; an
   off-centre, taller mask makes the fade envelope distinct too. */
.mm-page-hero--glow-bloom::before {
  background:
    radial-gradient(
      108% 95% at 18% 16%,
      color-mix(in srgb, var(--rose) 30%, transparent) 0%,
      color-mix(in srgb, var(--rose) 11%, transparent) 42%,
      transparent 74%
    ),
    radial-gradient(
      88% 82% at 88% 42%,
      color-mix(in srgb, var(--mauve) 32%, transparent) 0%,
      transparent 60%
    ),
    radial-gradient(
      95% 78% at 56% 2%,
      color-mix(in srgb, var(--terracotta) 18%, transparent) 0%,
      transparent 56%
    );
  -webkit-mask: radial-gradient(
    122% 96% at 44% 8%,
    #000 0%,
    #000 40%,
    transparent 90%
  );
  mask: radial-gradient(122% 96% at 44% 8%, #000 0%, #000 40%, transparent 90%);
}
/* Variant "dream" (Sovellus) — a PRONOUNCED app-flavoured wash that keeps a cool
   lavender note but anchors on a strong rose top and a WARM terracotta bloom in
   the lower-right corner (mirrors the Valmennukset bento glowband's warm corner).
   A larger, softer mask than the base envelope lets the lower glow stay visible
   behind the feature tiles instead of being clipped at the centre-top fade. */
.mm-page-hero--glow-dream::before {
  background:
    radial-gradient(
      136% 116% at 44% 0%,
      color-mix(in srgb, var(--rose) 32%, transparent) 0%,
      color-mix(in srgb, var(--rose) 12%, transparent) 48%,
      transparent 84%
    ),
    radial-gradient(
      90% 86% at 73% 20%,
      color-mix(in srgb, var(--lav) 40%, transparent) 0%,
      transparent 66%
    ),
    radial-gradient(
      98% 92% at 47% 54%,
      color-mix(in srgb, var(--terracotta) 34%, transparent) 0%,
      color-mix(in srgb, var(--terracotta) 11%, transparent) 48%,
      transparent 74%
    ),
    radial-gradient(
      100% 94% at 22% 64%,
      color-mix(in srgb, var(--mauve) 27%, transparent) 0%,
      transparent 70%
    ),
    radial-gradient(
      74% 72% at 86% 76%,
      color-mix(in srgb, var(--rose) 18%, transparent) 0%,
      transparent 62%
    );
  -webkit-mask: radial-gradient(
    156% 140% at 47% 16%,
    #000 0%,
    #000 50%,
    transparent 100%
  );
  mask: radial-gradient(
    156% 140% at 47% 16%,
    #000 0%,
    #000 50%,
    transparent 100%
  );
}
/* Feature tiles moved into the hero (Sovellus): the app feature grid sits below
   the hero head with its own breathing room. */
.mm-page-hero__features {
  margin-top: clamp(28px, 4vw, 44px);
}

/* ===== steps strip (.mm-steps) ===== */
.mm-steps {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  grid-template-columns: 1fr;
  counter-reset: mm-step;
}
@media (min-width: 760px) {
  .mm-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}
.mm-steps__item {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 26px 22px 22px;
}
.mm-steps__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blush);
  color: var(--accent-ink);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
}
.mm-steps__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 8px;
}
.mm-steps__text {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
@media (min-width: 760px) {
  /* connector line between step cards */
  .mm-steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: calc(-1 * clamp(18px, 3vw, 28px));
    width: clamp(18px, 3vw, 28px);
    height: 2px;
    background: var(--line-2);
  }
}

/* ===== quote tiles (.mm-quotes) ===== */
.mm-quotes {
  display: grid;
  gap: var(--bento-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .mm-quotes {
    grid-template-columns: repeat(3, 1fr);
  }
}
.mm-quotes__tile {
  margin: 0;
  position: relative;
}
.mm-quotes__mark {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 54px;
  line-height: 0.6;
  color: var(--rose);
  margin: 8px 0 14px;
}
.mm-quotes__tile blockquote {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text);
}
.mm-quotes__stars {
  display: block;
  color: var(--star);
  font-size: 15px;
  letter-spacing: 3px;
  line-height: 1;
  margin-bottom: 12px;
}
.mm-quotes__head {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.mm-quotes__tile.mm-tile--mauve blockquote,
.mm-quotes__tile.mm-tile--mauve .mm-quotes__head,
.mm-quotes__tile.mm-tile--mauve .mm-quotes__tag {
  color: var(--ink);
}
.mm-quotes__tile.mm-tile--mauve figcaption {
  color: var(--ink);
  opacity: 0.78;
}
.mm-quotes__tile.mm-tile--mauve .mm-quotes__tag {
  background: rgba(255, 245, 245, 0.55);
}
.mm-quotes__tile figcaption {
  margin-top: 16px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mm-quotes__tile figcaption strong {
  color: var(--ink);
  font-family: var(--font-head);
}
.mm-quotes__tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--blush);
  padding: 2px 9px;
  border-radius: var(--pill);
}

/* ===== mosaic bento (.mm-mosaic) ===== */
.mm-mosaic .mm-tile {
  min-height: 180px;
}
.mm-mosaic__photo {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.mm-mosaic__photo img,
.mm-mosaic__photo .mm-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease);
}
/* Gentle image zoom on hover — a subtle sign of life on the photo tiles (they
   aren't links, so no lift that would imply clickability). */
.mm-mosaic__photo:hover img {
  transform: scale(1.04);
}
.mm-mosaic__big {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 56px);
  letter-spacing: -0.03em;
  color: var(--cream);
  line-height: 1;
}
/* "About MamaMotion" intro card (mauve) — checklist of programme pillars */
.mm-mosaic__pts {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.mm-mosaic__pts li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink);
}
.mm-mosaic__pts li svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--rose-700);
}
.mm-mosaic .mm-ring {
  max-width: 190px;
}

/* ===== values tiles (.mm-values__ic) ===== */
.mm-values__ic {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: var(--sh-sm);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.mm-tile--white .mm-values__ic {
  background: var(--blush);
  box-shadow: none;
}
.mm-values__ic svg {
  width: 21px;
  height: 21px;
  color: var(--accent-ink);
}

/* ===== course detail rows (.crs-row) — Valmennukset page ===== */
.crs-detail {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 72px);
}
/* More breathing room between stacked course blocks on phones. */
@media (max-width: 640px) {
  .crs-detail {
    gap: 56px;
  }
}
.crs-row {
  display: grid;
  gap: clamp(20px, 3.5vw, 56px);
  align-items: start;
  grid-template-columns: 1fr;
  scroll-margin-top: 90px;
}
@media (min-width: 860px) {
  .crs-row {
    grid-template-columns: 1fr 1.1fr;
  }
  .crs-detail .crs-row {
    align-items: start;
  }
  .crs-row__media {
    aspect-ratio: 5/4;
  }
  .crs-detail .crs-row:nth-child(even) .crs-row__media,
  .crs-row--flip .crs-row__media {
    order: 2;
  }
}
.crs-row__media {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--blush);
  box-shadow: var(--sh-sm);
}
.crs-row__media > svg {
  width: 26%;
  max-width: 90px;
  color: rgba(139, 91, 90, 0.45);
}
.crs-row__media--mint {
  background: var(--mint);
}
.crs-row__media--blush {
  background: var(--blush);
}
.crs-row__media--mauve {
  background: var(--mauve);
}
.crs-row__media--rose {
  background: var(--rose);
}
.crs-row__media--cream {
  background: var(--cream);
}
.crs-row__media--peach {
  background: var(--peach);
}
.crs-row__media--lav {
  background: var(--lav);
}
.crs-row__media--butter {
  background: var(--butter);
}
.crs-row__media--sky {
  background: var(--sky);
}
.crs-row__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The course value-split photos (all three rows after the reviews band) are
   16:9 sources in a 16:10 tile — cover crops them tightly. Fit the whole image
   inside instead; the pastel tile keeps its size and shows a thin warm border.
   Scoped to the course sales pages (their only .crs-row__photo are these three
   splits — the hero card image isn't one) so the Meistä/valmennukset splits, which
   reuse .mm-callout/.mm-quote, keep their full-bleed cover. */
body:has(.shero--bloom) .crs-row__photo,
body:has(.shero--flow) .crs-row__photo,
body:has(.shero--glow) .crs-row__photo,
body:has(.shero--plus) .crs-row__photo,
#valmennukset-lista .crs-row__photo {
  object-fit: contain;
}
/* Per-instance opt-in (mm_split fit_contain) — fit the whole image inside the
   tile instead of cropping; the brand tile shows as a frame. Used where a
   landscape/transparent source would otherwise crop (e.g. Meistä "Laadukas
   valmennus"); portraits like the founder intro stay on cover. */
.crs-row__photo--contain {
  object-fit: contain;
}
.crs-row__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  line-height: var(--lh-head);
  color: var(--ink);
  margin: 6px 0 0;
}
.crs-row__text {
  margin-top: 14px;
  color: var(--text);
  line-height: var(--lh-body);
}
.crs-row__text p {
  margin: 0 0 0.9em;
}
.crs-row__text p:last-child {
  margin-bottom: 0;
}
.crs-row .crs-feat {
  margin-top: 16px;
}
.crs-row__actions {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 22px;
}
.crs-row__actions .crs-price {
  margin: 0;
}
.crs-addon__photo {
  width: 100%;
  height: 100%;
  /* cover — the original framing (the image fills the tile as it did before) */
  object-fit: cover;
  border-radius: inherit;
}

/* ===== blog hero (.mm-blog-hero / .mm-hpost) — 2-col intro + popular ===== */
.mm-blog-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
@media (min-width: 920px) {
  .mm-blog-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}
.mm-blog-hero__intro .mm-eyebrow {
  margin-bottom: 14px;
}
.mm-blog-hero__intro .mm-lead {
  max-width: 46ch;
  margin-top: 18px;
}
.mm-blog-hero__pop .mm-eyebrow {
  margin-bottom: 10px;
}
.mm-blog-hero__pop-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 18px;
}
.mm-hpost-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mm-hpost {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 14px;
  align-items: stretch;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.mm-hpost:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.mm-hpost__media {
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--blush);
  min-height: 92px;
}
.mm-hpost__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mm-hpost__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 2px 0;
}
.mm-hpost__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mm-hpost:hover .mm-hpost__title {
  color: var(--rose-700);
}
.mm-hpost .mm-article-meta {
  font-size: var(--fs-xs);
  gap: 6px 8px;
}
.mm-hpost__excerpt {
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* warm randomised glow (homepage-hero flavour); slides under the sticky header
   like .mm-page-hero--glow. Five irregular off-axis warm pools (rose top,
   terracotta warmth mid/right, mauve lower-left) + a soft mask fade envelope. */
.mm-blog-hero--glow {
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--header-h, 69px));
  padding-top: calc(var(--section-y) + var(--header-h, 69px));
}
.mm-blog-hero--glow > .mm-container {
  position: relative;
  z-index: 1;
}
.mm-blog-hero--glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      120% 110% at 28% 0%,
      color-mix(in srgb, var(--rose) 30%, transparent) 0%,
      color-mix(in srgb, var(--rose) 11%, transparent) 46%,
      transparent 80%
    ),
    radial-gradient(
      86% 84% at 82% 14%,
      color-mix(in srgb, var(--terracotta) 26%, transparent) 0%,
      transparent 62%
    ),
    radial-gradient(
      94% 90% at 60% 52%,
      color-mix(in srgb, var(--terracotta) 16%, transparent) 0%,
      transparent 66%
    ),
    radial-gradient(
      80% 78% at 16% 60%,
      color-mix(in srgb, var(--mauve) 24%, transparent) 0%,
      transparent 64%
    ),
    radial-gradient(
      70% 70% at 90% 74%,
      color-mix(in srgb, var(--rose) 16%, transparent) 0%,
      transparent 60%
    );
  -webkit-mask: radial-gradient(
    150% 130% at 44% 12%,
    #000 0%,
    #000 52%,
    transparent 100%
  );
  mask: radial-gradient(
    150% 130% at 44% 12%,
    #000 0%,
    #000 52%,
    transparent 100%
  );
}

/* ===== blog listing (.mm-blog / .mm-bpost / .mm-pag) ===== */
/* shared blog section head — full container width, left-aligned, aligns with
   the cards below it; optional right-side link (e.g. "Kaikki artikkelit").
   Used by every blog strip head: popular, all-articles, search, read-more. */
.mm-blog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 18px;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.mm-blog-head > * {
  margin: 0;
}
.mm-blog-head__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mm-blog-head__group > * {
  margin: 0;
}
.mm-blog-head .mm-bpost__more {
  margin-bottom: 6px;
}
/* index listing sits tight under the hero (no "Kaikki artikkelit" head) */
.mm-blog--top-tight {
  padding-top: clamp(8px, 2vw, 24px);
}
/* breadcrumb (search results etc.) */
.mm-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(14px, 2vw, 22px);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.mm-crumbs a {
  color: var(--accent-ink);
}
.mm-crumbs a:hover {
  color: var(--rose-700);
}
.mm-crumbs__sep {
  color: var(--mauve);
}
.mm-blog__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 22px;
  margin-bottom: clamp(24px, 3.5vw, 40px);
}
/* search field styled to match the footer newsletter form (.mmf-form): a white
   pill holding a borderless input + an uppercase submit button. */
.mm-blog__search {
  display: flex;
  gap: 8px;
  flex: 0 1 420px;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 7px 7px 7px 8px;
  box-shadow: var(--sh-sm);
}
.mm-blog__search .mm-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 16px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
}
.mm-blog__search .mm-input:focus {
  outline: none;
  box-shadow: none;
}
.mm-blog__search .mm-btn {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13.5px;
}
.mm-blog__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
}
.mm-blog__grid {
  display: grid;
  gap: var(--bento-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .mm-blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .mm-blog__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.mm-bpost {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.mm-bpost:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
.mm-bpost__media {
  position: relative;
  display: block;
  aspect-ratio: 16/10;
  background: var(--blush);
}
.mm-bpost__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mm-bpost__media .mm-ph {
  position: absolute;
  inset: 0;
}
.mm-bpost__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.mm-bpost__play svg {
  width: 52px;
  height: 52px;
  color: #fff;
  filter: drop-shadow(0 4px 14px rgba(37, 17, 16, 0.35));
}
.mm-bpost__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  flex: 1;
}
.mm-bpost__tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--blush);
  padding: 3px 10px;
  border-radius: var(--pill);
}
.mm-bpost__tag:hover {
  background: var(--blush-2);
}
.mm-bpost__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  letter-spacing: -0.02em;
  margin: 0;
}
.mm-bpost__title a {
  color: var(--ink);
}
.mm-bpost__title a:hover {
  color: var(--rose-700);
}
.mm-bpost__excerpt {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.mm-bpost__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.mm-bpost__more:hover {
  color: var(--rose-700);
}
/* card footer — date (lower-left) + read-more (lower-right), pinned to bottom */
.mm-bpost__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
}
.mm-bpost__date {
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
@media (min-width: 860px) {
  .mm-bpost--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
  }
  .mm-bpost--featured .mm-bpost__media {
    aspect-ratio: auto;
    min-height: 320px;
    height: 100%;
  }
  .mm-bpost--featured .mm-bpost__body {
    padding: clamp(24px, 3vw, 40px);
    justify-content: center;
  }
  .mm-bpost--featured .mm-bpost__title {
    font-size: var(--fs-h2);
  }
  .mm-bpost--featured .mm-bpost__excerpt {
    font-size: var(--fs-body);
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}
.mm-blog__empty {
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
}
.mm-pag {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: clamp(28px, 4vw, 44px);
}
.mm-pag__link {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 8px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
  transition: all var(--dur) var(--ease);
}
.mm-pag__link:hover {
  border-color: var(--rose);
  background: var(--blush);
}
.mm-pag__link--current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.mm-pag__gap {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 42px;
  color: var(--text-soft);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  user-select: none;
}

/* ===== blog post body (.mm-bpb) ===== */
/* tighter top: the article should sit close under the header (~50–72px before
   the breadcrumb), not a full section rhythm. */
.mm-bpb {
  padding-top: clamp(40px, 5vw, 72px);
}
.mm-bpb__col {
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.mm-bpb__meta {
  margin-top: 14px;
}
.mm-bpb__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-head);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 14px 0 0;
}
.mm-bpb__media {
  margin: clamp(20px, 3vw, 32px) 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--blush);
}
.mm-bpb__media img {
  display: block;
  width: 100%;
  height: auto;
}
.mm-bpb__col .mm-article {
  margin-top: clamp(20px, 3vw, 32px);
}
.mm-bpb__cta {
  margin-top: clamp(20px, 3vw, 32px);
}
/* read-more strip — full container width, sits below the narrow article col */
.mm-bpb__related {
  margin-top: clamp(48px, 7vw, 84px);
  padding-top: clamp(32px, 5vw, 52px);
  border-top: 1px solid var(--line);
}

/* ===== sales pages (.mm-sales-hero / .crs-cur / .crs-tiers) ===== */
.mm-sales-hero .crs-row {
  align-items: start;
}
.mm-sales-hero .crs-row__media {
  aspect-ratio: 4/5;
  max-height: 560px;
}
.crs-cur__module {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: clamp(22px, 3vw, 34px) 0 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.crs-cur__module::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-2);
}
/* 3-up large thumbnails, 16:9 like the source images — mirrors the original
   Encore gallery (image blocks at width 4/12) */
.crs-cur__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .crs-cur__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .crs-cur__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.crs-cur__thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sh-sm);
}
.crs-cur__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.crs-cur__thumb:hover img {
  transform: scale(1.04);
}
.crs-cur__label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
  padding: 2px 8px;
  border-radius: var(--pill);
}
.crs-tiers {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-bottom: clamp(20px, 3vw, 32px);
}
@media (min-width: 760px) {
  .crs-tiers {
    grid-template-columns: repeat(3, 1fr);
  }
  .crs-tiers[data-count="1"] {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
  }
  .crs-tiers[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 420px));
    justify-content: center;
  }
}
.crs-tiers__note {
  margin: 10px 0 16px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: var(--lh-body);
}

/* ===== Encore auth pages restyle (login / forgot password) ===== */
/* The auth FORM markup stays Encore's (member session post, field names,
   social login — backend frozen); only the look is tokenized. */
.auth__content {
  max-width: 440px;
  margin: clamp(24px, 5vw, 64px) auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: clamp(24px, 4vw, 40px);
  text-align: center;
}
.auth__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 18px;
}
.auth__label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.auth__content .form-group {
  text-align: left;
  margin-bottom: 14px;
}
.auth__content .form-control {
  width: 100%;
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.auth__content .form-control:focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 3px var(--blush);
}
.auth__content .form-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  background: var(--ink) !important;
  color: var(--cream) !important;
  border: 0;
  border-radius: var(--pill) !important;
  padding: 14px 22px;
  cursor: pointer;
  transition:
    transform 0.32s var(--ease),
    background 0.32s var(--ease);
}
.auth__content .form-btn:hover {
  background: var(--ink-2) !important;
  transform: translateY(-1px);
}
.auth__content a {
  color: var(--accent-ink);
  font-weight: 600;
}
.auth__content a:hover {
  color: var(--ink);
}
.auth__message.alert {
  background: var(--blush);
  border: 1px solid var(--rose);
  color: var(--ink);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: var(--fs-sm);
}
.auth__content .divider {
  color: var(--text-soft);
  font-size: var(--fs-sm);
  margin: 18px 0 12px;
}

/* Center the auth card in the viewport (below the sticky header). The grid +
   min-height holds regardless of Encore's bootstrap row/sizer (which don't load
   locally); intermediate wrappers are flattened so the card itself centers. */
.mm-auth {
  position: relative; /* scope the absolute .section__overlay to this section */
  display: grid;
  place-items: center;
  /* Fill the space below the sticky header and centre the card in THAT band, so
     the visible whitespace above and below the card is equal (true viewport-
     centre would look high — the opaque header eats the space above it). */
  min-height: calc(100svh - 84px);
  padding: 32px 16px;
}
/* The Encore section overlay is absolutely positioned over the section (a
   darkening layer for bg images). With no bg it's invisible, but it sat ON TOP
   of the form and ate every click — make it click-through. */
.mm-auth .section__overlay {
  pointer-events: none;
}
.mm-auth .sizer--full,
.mm-auth .container,
.mm-auth .row {
  min-height: 0;
  min-width: 0; /* grid item: don't expand to the slider's min-content (overflow) */
  width: 100%;
  margin-inline: auto; /* the Encore .container is left-aligned here — re-centre it */
}
/* section_styles emits `#section-<id> .sizer { padding-top/bottom }` (default
   100px) — an ID selector, so !important is required to beat it. That padding
   bloats the section past min-height and breaks the grid centering; the card's
   vertical rhythm is handled by .mm-auth instead. (Horizontal gutters kept.) */
.mm-auth .sizer--full {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.mm-auth .auth__content {
  margin: 0 auto; /* vertical placement handled by the grid */
}

/* Field icons on email + password, matching the contact form (rose data-URI
   glyphs, left-padded). Email is type=text (id member_email), so target by id. */
.auth__content #member_email,
.auth__content #member_password {
  padding-left: 44px;
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 18px 18px;
}
.auth__content #member_email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B89796' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}
.auth__content #member_password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B89796' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}

/* ===== login showcase (.mm-auth__split + .mmls) ===== */
/* 50/50 on desktop: form card left, app-mockup feature slider right. Stacks
   (form on top, slider below) under 960px. Driven by the shared mm.js slider. */
.mm-auth__split {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: stretch;
}
.mm-auth__split > .col-6 {
  /* block_login's bootstrap column — neutralize the bento `.col-6` (width:50% +
     grid-column: span 6, which would force a 6-track grid and stack the panel). */
  grid-column: auto;
  width: auto;
  max-width: none;
  padding: 0;
  display: grid;
  place-items: center;
}
.mm-auth__split .auth__content {
  margin: 0 auto;
}
@media (min-width: 960px) {
  .mm-auth__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 3.5vw, 56px);
    align-items: stretch;
  }
}

.mm-auth__showcase {
  position: relative;
  min-width: 0; /* flex/grid item: allow shrink below the slider's content width */
  display: flex;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  overflow: hidden;
  min-height: 440px;
  padding: clamp(20px, 2.4vw, 30px);
  background:
    radial-gradient(120% 80% at 20% 0%, var(--blush), transparent 60%),
    radial-gradient(120% 90% at 100% 100%, #fbe0e6, transparent 55%),
    linear-gradient(160deg, var(--cream), var(--blush-2));
}
@media (min-width: 960px) {
  .mm-auth__showcase {
    min-height: 0;
  } /* match form column height via the grid */
}
.mmls {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  gap: 14px;
}
.mmls__view {
  flex: 1;
  min-width: 0;
}
.mmls-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px;
}
/* image area: a rounded panel filled by the uploaded screenshot (full-bleed bg)
   or, until one is set, a soft per-slide pastel field. The prop (.mmls-prop)
   floats on top of whichever it is. */
.mmls-slide__stage {
  position: relative;
  flex: 1;
  min-height: 360px;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    radial-gradient(
      94% 80% at 50% 32%,
      color-mix(in srgb, var(--mmls-glow, var(--lav)) 60%, var(--cream)),
      transparent 76%
    ),
    linear-gradient(
      158deg,
      var(--cream),
      color-mix(in srgb, var(--mmls-glow, var(--lav)) 32%, var(--cream))
    );
}
.mmls-slide__stage--lav {
  --mmls-glow: var(--lav);
}
.mmls-slide__stage--mint {
  --mmls-glow: var(--mint);
}
.mmls-slide__stage--blush {
  --mmls-glow: var(--blush-2);
}
.mmls-slide__stage--peach {
  --mmls-glow: var(--peach);
}
/* uploaded screenshot fills the area as the background, behind the prop.
   border-radius: inherit so the image keeps the stage's rounded corners even
   while an ancestor (.mm-slider__track) is transform-animated — Chrome drops a
   parent's overflow-clip on a child during the transform, which made the corners
   flash sharp mid-slide; a self-rounded image survives that. */
.mmls-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 0;
}
/* the floating feature box(es) on top of the image/field */
.mmls-prop {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
/* corner-anchored prop (e.g. the "4/5 treeniä tehty" badge over a screenshot) */
.mmls-prop--bl {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: auto;
  align-items: flex-start;
  z-index: 2;
}
/* overlay boxes animate in just after each slide change (.is-active set by the
   inline controller), lightly staggered. Reduced-motion shows them static. */
.mmls-prop > *:not(.mmls-chat) {
  opacity: 0;
  transform: translateY(12px);
}
.mmls-slide.is-active .mmls-prop > *:not(.mmls-chat) {
  animation: mmls-pop 0.5s var(--ease) both 0.35s;
}
.mmls-slide.is-active .mmls-prop > *:not(.mmls-chat) + * {
  animation-delay: 0.5s;
}
@keyframes mmls-pop {
  to {
    opacity: 1;
    transform: none;
  }
}

/* AI slide (4): a little conversation — the question pops in, a typing
   indicator blinks, then the reply pops in. Each bubble animates on its own. */
.mmls-chat__b,
.mmls-typing {
  opacity: 0;
  transform: translateY(10px);
}
.mmls-slide.is-active .mmls-chat__b--me {
  animation: mmls-pop 0.4s var(--ease) both 0.4s;
}
.mmls-slide.is-active .mmls-typing {
  animation: mmls-type-cycle 1.1s var(--ease) both 0.95s;
}
.mmls-slide.is-active .mmls-chat__b--ai {
  animation: mmls-pop 0.42s var(--ease) both 2s;
}
/* slide 2: the "4/5 treeniä tehty" check icon pops in with a satisfying
   overshoot just after its chip appears (.mmls-prop--bl is unique to slide 2). */
.mmls-slide.is-active .mmls-prop--bl .mmls-card__ic {
  animation: mmls-check-pop 0.5s var(--ease) both 0.85s;
}
@keyframes mmls-check-pop {
  0% {
    transform: scale(0);
  }
  55% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
/* the typing indicator: a small AI bubble with three bouncing dots.
   Lifted OUT of flow and overlaid on the AI reply's own slot — otherwise
   its (opacity-hidden) box would permanently reserve a flex row + gaps
   between the question and the reply. */
.mmls-typing {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  gap: 5px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px 16px 16px 5px;
  box-shadow: var(--sh-sm);
}
.mmls-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mauve);
  animation: mmls-typing-dot 1s var(--ease) infinite;
}
.mmls-typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.mmls-typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes mmls-typing-dot {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
/* show the dots only mid-sequence (between the question and the reply) */
@keyframes mmls-type-cycle {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  18% {
    opacity: 1;
    transform: none;
  }
  82% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mmls-prop > *:not(.mmls-chat),
  .mmls-chat__b,
  .mmls-prop--bl .mmls-card__ic {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .mmls-typing {
    display: none;
  }
}
/* mockup cards (static cousins of .app-noti) */
.mmls-card {
  width: min(300px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--sh-md);
  padding: 13px 15px;
}
.mmls-card--chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: auto;
  max-width: 100%;
  padding: 9px 14px 9px 10px;
  border-radius: var(--pill);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.mmls-card__row {
  display: flex;
  align-items: center;
  gap: 11px;
}
.mmls-card__ic {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--cream);
  display: grid;
  place-items: center;
}
.mmls-card__ic--mint {
  background: var(--mint-ink);
}
.mmls-card__ic--peach {
  background: var(--peach-ink);
}
.mmls-card__ic--lav {
  background: var(--lav-ink);
}
.mmls-card__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.mmls-card__k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.mmls-card__t {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
  line-height: 1.25;
}
.mmls-card__time {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--mauve);
}
.mmls-card__quote {
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text);
}
.mmls-bar {
  margin-top: 12px;
  height: 6px;
  border-radius: var(--pill);
  background: var(--blush-2);
  overflow: hidden;
}
.mmls-bar span {
  display: block;
  height: 100%;
  border-radius: var(--pill);
  background: var(--ink);
}
/* chat mockup */
.mmls-chat {
  width: min(300px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mmls-chat__b {
  max-width: 88%;
  padding: 11px 14px;
  font-size: var(--fs-sm);
  line-height: 1.4;
  box-shadow: var(--sh-sm);
}
.mmls-chat__b--me {
  align-self: flex-end;
  background: var(--ink);
  color: var(--cream);
  border-radius: 16px 16px 5px 16px;
}
.mmls-chat__b--ai {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 16px 16px 16px 5px;
}
/* wraps the typing indicator + AI reply so the (absolute) typing bubble
   overlays the reply's slot — the reply's own height is the only space
   reserved, so there's no empty gap above the answer */
.mmls-chat__reply {
  position: relative;
  align-self: flex-start;
  display: flex;
  max-width: 88%;
}
.mmls-chat__reply > .mmls-chat__b--ai {
  max-width: 100%;
}
.mmls-chat__who {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--rose-700);
  margin-bottom: 4px;
}
.mmls-chat__who svg {
  color: var(--rose);
}
/* caption */
.mmls-slide__cap {
  text-align: left;
}
.mmls-slide__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 4px;
}
.mmls-slide__text {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}
/* footer: dots + arrows (dark-on-light, the base dots are tuned for dark bg) */
.mmls__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mmls__dots {
  margin: 0;
}
.mmls__dots button {
  background: var(--mauve);
}
.mmls__dots button.on {
  background: var(--ink);
  width: 20px;
  border-radius: var(--pill);
}
.mmls__nav {
  display: flex;
  gap: 8px;
}
.mmls__nav button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.mmls__nav button:hover {
  background: #fff;
  border-color: var(--rose);
}

/* ===== glossary (.mm-glossary) ===== */
/* Single scrollable row at ALL widths: a wrapping nav is 1 row on mobile but
   2–3 rows on tablet/desktop, so its sticky height — and the heading offset it
   needs — changes with viewport width. One predictable row (~66px) lets a single
   scroll-margin-top work everywhere and stops the index eating the tablet fold.
   `safe center` centers it when the letters fit (desktop) and falls back to
   start-aligned when it overflows (so the first letters stay scroll-reachable). */
.mm-glossary__nav {
  position: sticky;
  top: 76px;
  z-index: 5;
  display: flex;
  flex-wrap: nowrap;
  justify-content: safe center;
  gap: 5px;
  padding: 12px 0;
  margin-bottom: clamp(20px, 3vw, 36px);
  background: var(--cream);
  box-shadow: 0 -28px 0 0 var(--cream); /* mask the strip between sticky header and nav */
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mm-glossary__nav::-webkit-scrollbar {
  display: none;
}
.mm-glossary__nav .mm-chip {
  min-width: 36px;
  justify-content: center;
  padding: 8px 8px;
  flex: 0 0 auto;
  /* short, snappier-than-token timing: the scrollspy active state changes while
     scrolling, so it must track closely rather than ease over --dur (0.4s). */
  transition:
    background-color 0.18s var(--ease),
    border-color 0.18s var(--ease),
    color 0.18s var(--ease);
}
/* scrollspy: the letter whose section is currently in view (set by the inline
   script in mm_glossary.liquid). Filled ink pill — a clear "you are here" that
   reads stronger than the blush hover state. */
.mm-glossary__nav .mm-chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.mm-glossary__body h2[id] {
  scroll-margin-top: 160px; /* clears sticky header + single-row A–Ö index at every width */
}
.mm-glossary__body h2 {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mm-glossary__body h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-2);
}

/* ===== 404 (.mm-404) ===== */
.mm-404__card {
  position: relative;
  padding: clamp(20px, 4vw, 48px) 0;
}
.mm-404__card .mm-spark-bg {
  position: absolute;
  color: var(--blush-2);
}
.mm-404__code {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(88px, 16vw, 168px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--blush-2);
  margin-top: 10px;
  text-shadow: 0 2px 0 rgba(184, 151, 150, 0.18);
}
.mm-404__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

/* ===== contact (.mm-contact) ===== */
.mm-contact__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .mm-contact__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.mm-contact__rows {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mm-contact__rows li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}
.mm-contact__rows a {
  color: var(--accent-ink);
  font-weight: 600;
}
.mm-contact__rows a:hover {
  color: var(--ink);
}
.mm-contact__ic {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blush);
  display: grid;
  place-items: center;
}
.mm-contact__ic svg {
  width: 18px;
  height: 18px;
  color: var(--accent-ink);
}
.mm-contact__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: clamp(22px, 3vw, 34px);
}
.mm-contact__card-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
}
.mm-contact__card-sub {
  margin: 8px 0 18px;
  color: var(--text-soft);
  font-size: var(--fs-sm);
}
.mm-contact__card form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mm-contact__card textarea.mm-input {
  min-height: 120px;
  resize: vertical;
}
.mm-contact__disclaimer {
  margin: 12px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

/* ===== contact form: field icons + live valid/invalid states ===== */
/* Icons keyed on the HTML5 type Kajabi emits (EmailField->email, PhoneField->tel,
   TextAreaField->textarea). :user-valid/-invalid fire only AFTER interaction, so
   borders go green when a field is filled+valid and red on a real error -- never
   on untouched empties. Falls back gracefully where :has()/:user-* unsupported. */
.mm-contact__card .mm-field {
  position: relative;
}
.mm-contact__card .mm-input {
  padding: 15px 42px 15px 46px;
  background-repeat: no-repeat;
  background-position: 15px center;
  background-size: 18px 18px;
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.mm-contact__card textarea.mm-input {
  background-position: 15px 16px;
}
.mm-contact__card input[type="text"].mm-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B89796' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}
.mm-contact__card input[type="email"].mm-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B89796' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}
.mm-contact__card input[type="tel"].mm-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B89796' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.8a12 12 0 005.7 5.7L18 14l5 2v4a1 1 0 01-1 1A16 16 0 013 5a1 1 0 011-1z'/%3E%3C/svg%3E");
}
.mm-contact__card textarea.mm-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B89796' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4H4a1 1 0 00-1 1v10a1 1 0 001 1h3v3l4-3h9a1 1 0 001-1V5a1 1 0 00-1-1z'/%3E%3C/svg%3E");
}

.mm-contact__card .mm-input:user-valid:not(:placeholder-shown) {
  border-color: var(--viz-green);
}
.mm-contact__card .mm-input:user-invalid {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(189, 98, 66, 0.14);
}

/* right-side state glyph via the field wrapper */
.mm-contact__card .mm-field::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 15px;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.mm-contact__card
  .mm-field:has(.mm-input:user-valid:not(:placeholder-shown))::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234e9b73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-11'/%3E%3C/svg%3E");
  opacity: 1;
}
.mm-contact__card .mm-field:has(.mm-input:user-invalid)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bd6242' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 16.4v.01'/%3E%3C/svg%3E");
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .mm-contact__card .mm-input,
  .mm-contact__card .mm-field::after {
    transition: none;
  }
}

/* ===== Encore-content polish (library page & legacy sections) ===== */
/* The library keeps its Encore sections (user decision: same content/UI,
   small design-system improvements). Token-tint the Encore product cards,
   progress bars and resume card. !important only where Encore section
   <style> blocks (rendered later in <body>) would otherwise win. */
.product {
  border: 1px solid var(--line);
  border-radius: var(--r-lg) !important;
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
.product__title {
  font-family: var(--font-head);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.products .progress {
  background: var(--blush-2) !important;
  border-radius: var(--pill);
  overflow: hidden;
}
.products .progress__inner {
  background: var(--rose-600) !important;
  border-radius: var(--pill);
}
.products .btn {
  font-family: var(--font-head);
  font-weight: 600;
  border-radius: var(--pill) !important;
}
.resume-course {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.resume-course__title {
  font-family: var(--font-head);
  letter-spacing: -0.02em;
}

/* Plus add-on category chips */
.crs-addon__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.crs-addon__cat {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent-ink);
  background: #fff;
  border: 1px solid var(--line-2);
  padding: 4px 11px;
  border-radius: var(--pill);
  white-space: nowrap;
  box-shadow: var(--sh-sm);
}

/* community inclusion badge — a status seal, not a button */
.vp-community-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px 12px 6px 7px;
  box-shadow: var(--sh-sm);
}
.vp-community-badge__ic {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rose);
  color: #fff;
  display: grid;
  place-items: center;
}
.vp-community-badge__ic svg {
  width: 10px;
  height: 10px;
}

/* ===== long-form prose (.mm-article) — blog posts, legal pages, glossary ===== */
/* Calm editorial column: narrow measure, quiet headings (hierarchy from
     weight + spacing, not size jumps), warm blockquotes. Token-driven. */
.mm-article {
  max-width: var(--container-narrow);
  margin: 0 auto;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}
.mm-article > * + * {
  margin-top: 1.15em;
}
.mm-article h1,
.mm-article h2,
.mm-article h3,
.mm-article h4 {
  font-family: var(--font-head);
  color: var(--heading);
  line-height: var(--lh-head);
  letter-spacing: -0.02em;
}
/* document title (legal pages, long-form). Was unstyled → inherited body
   line-height (the 1.65 trap); now a clear step above the h2 section heads. */
.mm-article h1 {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.3em;
}
.mm-article h2 {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-top: 2em;
}
.mm-article h3 {
  font-size: var(--fs-lead);
  font-weight: 600;
  margin-top: 1.7em;
}
.mm-article h4 {
  font-size: var(--fs-body);
  font-weight: 600;
  margin-top: 1.5em;
}
.mm-article a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-color: var(--rose);
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
.mm-article a:hover {
  color: var(--ink);
}
.mm-article strong {
  color: var(--ink);
}
.mm-article ul,
.mm-article ol {
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}
.mm-article ul li::marker {
  color: var(--rose-700);
}
.mm-article ol li::marker {
  color: var(--accent-ink);
  font-weight: 600;
}
.mm-article blockquote {
  margin: 1.6em 0;
  padding: 18px 22px;
  background: var(--blush);
  border-left: 4px solid var(--rose);
  border-radius: var(--r-sm);
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--ink);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.mm-article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r);
}
.mm-article figure {
  margin: 1.6em 0;
}
.mm-article figcaption {
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.mm-article hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.2em 0;
}
.mm-article table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.mm-article th,
.mm-article td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.mm-article th {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
}
/* Narrow screens: a multi-column table (e.g. the privacy legal-basis table) is
   wider than the prose column and would push the whole page horizontally — let
   it scroll inside the column instead. Desktop keeps the full-width table. */
@media (max-width: 640px) {
  .mm-article table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* article meta row (date · tags · reading time) */
.mm-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.mm-article-meta a {
  color: var(--accent-ink);
}
/* reading-time estimate — pairs with the date, middot separator */
.mm-read-min {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-soft);
  background: #fff;
  border: 1px solid var(--line);
  padding: 3px 10px 3px 8px;
  border-radius: var(--pill);
}
.mm-read-min__ic {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

/* ===== hero phase selector (.mm-phasecard) ===== */
/* smooth anchor travel; reduced-motion override lives in mm.css. The global
   scroll-padding-top offsets EVERY anchor target for the sticky header so any
   in-page link lands at the right position (JS in mm.js makes the travel fast). */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
.mm-phasecards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: min(860px, 100%);
  margin: 16px auto 0;
}
@media (max-width: 759px) {
  .mm-phasecards {
    grid-template-columns: 1fr;
    width: min(420px, 100%);
  }
}
.mm-phasecard {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  text-decoration: none;
  transition:
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.mm-phasecard:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
  border-color: var(--line-2);
}
.mm-phasecard:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}
.mm-phasecard__ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.mm-phasecard__ic svg {
  width: 22px;
  height: 22px;
}
.mm-phasecard__ic--mint {
  background: var(--mint);
  color: var(--mint-ink);
}
.mm-phasecard__ic--blush {
  background: var(--blush);
  color: var(--accent-ink);
}
.mm-phasecard__ic--peach {
  background: var(--peach);
  color: var(--peach-ink);
}
.mm-phasecard__txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}
.mm-phasecard__label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.25;
  color: var(--ink);
}
.mm-phasecard__hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--rose-700);
}
.mm-phasecard__hint svg {
  width: 12px;
  height: 12px;
  transition: transform var(--dur) var(--ease);
}
.mm-phasecard:hover .mm-phasecard__hint svg {
  transform: translateX(3px);
}

/* course rows: quiet journey numbering 01/02/03 on the kickers */
.crs-detail {
  counter-reset: crs;
}
.crs-detail .crs-kicker::before {
  counter-increment: crs;
  content: counter(crs, decimal-leading-zero) " · ";
  margin-right: 2px;
  color: inherit;
  opacity: 0.65;
}
/* price fine print under the CTA row */
.crs-row__pricenote {
  margin: 10px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

/* balanced rag on centered section heads (progressive enhancement) */
.mm-section-head h1,
.mm-section-head h2,
.mm-section-head .mm-lead {
  text-wrap: balance;
}

/* ===== per-course identity colours (tags, avatars, kickers, cross-sell) ===== */
.mm-quotes__tag--flow {
  background: var(--course-flow-bg);
  color: var(--course-flow-ink);
  border: 1px solid var(--line-2);
}
.mm-quotes__tag--bloom {
  background: var(--course-bloom-bg);
  color: var(--ink);
}
.mm-quotes__tag--glow {
  background: var(--course-glow-bg);
  color: var(--course-glow-ink);
}
.mm-quotes__tag--plus {
  background: var(--course-plus-bg);
  color: var(--course-plus-ink);
}
.mm-slide__av--flow {
  background: var(--course-flow-bg);
  color: var(--course-flow-ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.mm-slide__av--bloom {
  background: var(--course-bloom-bg);
  color: var(--ink);
}
.mm-slide__av--glow {
  background: var(--course-glow-bg);
  color: var(--course-glow-ink);
}
.mm-slide__av--plus {
  background: var(--course-plus-bg);
  color: var(--course-plus-ink);
}
.crs-kicker--flow,
.crs-kicker--bloom,
.crs-kicker--glow,
.crs-kicker--plus {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 11px;
  border-radius: var(--pill);
}
.crs-kicker--flow {
  background: var(--course-flow-bg);
  color: var(--course-flow-ink);
  border: 1px solid var(--line-2);
}
.crs-kicker--bloom {
  background: var(--course-bloom-bg);
  color: var(--ink);
}
.crs-kicker--glow {
  background: var(--course-glow-bg);
  color: var(--course-glow-ink);
}
.crs-kicker--plus {
  background: var(--course-plus-bg);
  color: var(--course-plus-ink);
}
.crs-addon__tag--plus {
  position: absolute;
  top: clamp(14px, 2vw, 20px);
  right: clamp(14px, 2vw, 20px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--pill);
  /* lighter than the solid-ink identity badge: a soft frosted pill in the
     corner — ink text on a translucent white, hairline border. */
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* cross-sell cards (.crs-other, mm_sales_others) — identity card per product */
.crs-others {
  display: grid;
  gap: var(--bento-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .crs-others {
    grid-template-columns: repeat(3, 1fr);
  }
}
.crs-other {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.crs-other:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
/* corner product image (top-right packshot) — same 16:9 blush tile as the hero
   pricing card (.shero__card-img), so the full packshot shows on a soft tile */
.crs-other__corner {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 116px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--blush);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
}
.crs-other__name,
.crs-other__aud {
  padding-right: 128px;
}
/* reserve two lines for the card title so price/feature rows align across cards */
.crs-other__aud {
  min-height: 2.5em;
}
/* per-course identity colour themes (design-system §2b) */
.crs-other--flow {
  background: var(--course-flow-bg);
  border: 1px solid var(--line);
  color: var(--text);
}
.crs-other--bloom {
  background: var(--course-bloom-bg);
  color: var(--ink);
}
.crs-other--glow {
  background: var(--course-glow-bg);
  color: var(--course-glow-ink);
}
.crs-other--plus {
  background: var(--course-plus-bg);
  color: var(--course-plus-ink);
}
.crs-other__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.crs-other--flow .crs-other__name {
  color: var(--rose-700);
}
.crs-other--bloom .crs-other__name {
  color: var(--course-bloom-ink);
}
.crs-other__aud {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: inherit;
}
.crs-other__price {
  font-size: var(--fs-sm);
}
.crs-other__price strong {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.crs-other .crs-feat {
  margin-top: 2px;
}
.crs-other .crs-feat li {
  color: inherit;
}
.crs-other .crs-feat svg {
  color: currentColor;
  opacity: 0.75;
}
.crs-other--flow .crs-feat svg {
  color: var(--rose-700);
  opacity: 1;
}
/* block-width CTA, outlined in the card's own ink colour (adapts per course) */
.crs-other__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 48px;
  padding: 10px 20px;
  border: 1px solid currentColor;
  border-radius: var(--pill);
  color: inherit;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.crs-other--flow .crs-other__cta {
  color: var(--rose-700);
}
.crs-other__cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.crs-other__cta:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* course stats bento (.cstat, mm_course_stats) — big-number content tiles,
   echoing the front-page value-props bento but stat-forward. */
.cstat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px 26px;
}
.cstat__ic {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: var(--r-sm);
  background: var(--blush);
  margin-bottom: 4px;
}
.cstat__ic img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.cstat__ic svg {
  width: 26px;
  height: 26px;
  color: var(--rose-700);
}
.cstat__head {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.cstat__n {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.cstat__unit {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  color: var(--rose-700);
}
.cstat__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-soft);
}
@media (max-width: 759px) {
  .cstat__n {
    font-size: var(--fs-h1);
  }
}

/* course bento (mm_course_bento) — stat tiles sit in narrower col-2 cells, so
   step the big number down a notch; AI + community tiles reuse vp-/ai- classes. */
.cb-stat .cstat__n {
  font-size: var(--fs-h1);
}
.cb-stat {
  padding: 26px 24px;
}
/* slightly smaller icon disc so the stat description lines up with the AI +
   community descriptions in the same row */
.cb-stat .cstat__ic {
  width: 51px;
  height: 51px;
}
.mm-tile--blush .mm-values__ic {
  background: #fff;
}
/* AI tile label — compact white tag like the front-page card AI badge. The
   extra margin-bottom makes the pill's top zone match the community tile's icon
   disc, so the AI title lines up with the community title. */
/* Plus has no stat counts — when the stat tiles are hidden, let the two support
   tiles (AI + community) share the full 6-col grid (3 each) instead of leaving
   a gap. Collapses to 1 column on mobile via the base .mm-bento rules. */
.mm-bento--6.cb--duo .vp-card {
  grid-column: span 3;
}
/* Plus includes grid — the live Plus page's 3-column guide/material cards
   (image + title + text). White tiles, soft shadow, responsive 3/2/1 cols. */
.plus-incl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bento-gap, 20px);
  margin-top: clamp(32px, 4vw, 48px);
}
.plus-incl__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.plus-incl__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.plus-incl__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.plus-incl__body {
  padding: clamp(18px, 2vw, 24px);
}
.plus-incl__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 8px;
}
.plus-incl__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-soft);
  margin: 0;
}
/* AI card — a decorative chat snippet (no header, so it doesn't read as a live
   input) sits where the cover photo would; the normal title + description
   render below, exactly like the other cards. */
.plus-incl__chat {
  /* match the photo cards' 4:3 media box so the title + desc below line up
     with the rest of the row */
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(150deg, var(--blush), var(--cream));
  padding: clamp(16px, 2.4vw, 22px);
}
.plus-incl__chat .ai-chat__msgs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 0;
}
.plus-incl__chat .ai-bub {
  font-size: 12.5px;
  padding: 9px 12px;
  max-width: 92%;
  border-radius: 13px;
}
.plus-incl__chat .ai-bub--in {
  border-bottom-right-radius: 4px;
}
.plus-incl__chat .ai-bub--out {
  border-bottom-left-radius: 4px;
}
.plus-incl__chat .ai-typing {
  padding: 9px 12px;
}
/* "PLUS-paketti tiivistettynä" — emoji checklist in the split body */
.plus-tiiv {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.plus-tiiv li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.plus-tiiv__e {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 17px;
  background: var(--blush);
  border-radius: var(--r-sm);
}
.plus-tiiv__t {
  padding-top: 6px;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--ink);
}
.plus-tiiv__d {
  color: var(--text-soft);
  font-weight: 400;
}
@media (max-width: 900px) {
  .plus-incl {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .plus-incl {
    grid-template-columns: 1fr;
  }
}
.cb-ai__pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  padding: 5px 11px 5px 9px;
  border-radius: var(--pill);
  box-shadow: var(--sh-sm);
}
/* drop the icon disc's extra bottom margin in the bento so its title sits at the
   same offset as the AI tile's (both then rely on the flex gap) */
.cb-comm .mm-values__ic {
  margin-bottom: 0;
}
/* both AI + community badges sit at the bottom of their tile */
.cb-ai .vp-community-badge,
.cb-comm .vp-community-badge {
  margin-top: auto;
}
/* reserve a two-line title so the description text starts at the same point in
   the AI + community tiles (and lines up with the recipe stat tile) */
.cb-ai .vp-title,
.cb-comm .vp-title {
  min-height: 2.36em;
}

/* FAQ items in two columns on wider screens (each item independent; grid rows
   align so opening one leaves its row-sibling in place) */
.mm-acc-grid {
  display: grid;
  gap: var(--bento-gap);
  align-items: start;
}
.mm-acc-grid .mm-acc__item {
  margin-bottom: 0;
}
@media (min-width: 760px) {
  .mm-acc-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }
  /* reserve a two-line question so a 1-line item matches a 2-line item's
     card height when they share a row */
  .mm-acc-grid .mm-acc__trigger > span:first-child {
    min-height: 2.6em;
  }
}

/* ============================================================================
   Library / member dashboard — SCOPED ADJUSTMENTS ONLY (not a rebuild).
   The dashboard is the original native Encore page; here we just align type
   with the design system and round/soften the blog + product cards. All rules
   are scoped under .mm-library so marketing pages are untouched. Markup stays
   as the original theme (templates/library.liquid only adds the wrapper).
   ========================================================================= */

/* hide the "Säästä 10 %" offer pill on opted-out templates (library, legal).
   Marker .mm-no-offer is emitted by those templates; :has lifts it to <body>. */
body:has(.mm-no-offer) .mm-fab-offer {
  display: none;
}

/* design-system typography across the dashboard */
.mm-library h1,
.mm-library h2,
.mm-library h3,
.mm-library h4,
.mm-library .card__title,
.mm-library .products__title {
  font-family: var(--font-head);
  color: var(--ink);
  letter-spacing: -0.02em;
}
/* keep native heading SIZES (don't force the scale onto the dashboard layout);
   only the family/colour above is aligned to the design system. */

/* blog cards (scoped to the blog blocks so dashboard cards stay untouched) */
.mm-library .block-type--blog .card,
.mm-library .block-type--custom_blog .card {
  display: block;
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sh-sm);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.mm-library .block-type--blog .card:hover,
.mm-library .block-type--custom_blog .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}
.mm-library .block-type--blog .card__image,
.mm-library .block-type--custom_blog .card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.mm-library .block-type--blog .card__body,
.mm-library .block-type--custom_blog .card__body {
  padding: 16px 18px 18px;
}
.mm-library .block-type--blog .card__title,
.mm-library .block-type--custom_blog .card__title {
  font-size: 19px;
  line-height: 1.3;
}
.mm-library .block-type--blog .card__text,
.mm-library .block-type--custom_blog .card__text {
  color: var(--text-soft);
}

/* product list (purchased courses) */
.mm-library .products .product {
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.mm-library .products .product:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}
.mm-library .products .progress {
  border-radius: var(--pill);
  overflow: hidden;
}

/* ============================================================================
   Sales-page hero (.shero) — soft per-course bg pattern + 50/50 lead/pricing.
   Replaces the old media-tile hero; bg image + a clean right-side pricing card.
   ========================================================================= */
.shero {
  position: relative;
  overflow: hidden;
  /* Pull the hero up under the sticky, transparent header so the glow fills the
     page from the very top. The header has no bg until scrolled (.is-stuck),
     so at rest the glow shows straight through it; once stuck it frosts over.
     --header-h is published by mm.js (ResizeObserver); 69px is the no-JS
     fallback. padding-top re-adds the height so content clears the header. */
  margin-top: calc(-1 * var(--header-h, 69px));
  padding-top: calc(var(--section-y) + var(--header-h, 69px));
  /* Base canvas easing into the NEXT block's colour at the very bottom, so the
     hero→next-section seam disappears (--hero-next set per page below). */
  background: linear-gradient(
    to bottom,
    transparent 56%,
    var(--hero-next, var(--blush)) 100%
  );
}
.shero--bg {
  background-size: cover;
  background-position: center;
}
/* warm wash so the lead stays legible over the pattern */
.shero--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--cream) 28%,
    rgba(255, 245, 245, 0.74) 62%,
    rgba(255, 245, 245, 0.42)
  );
  z-index: 0;
}
/* Warm "glow" behind the hero — the idea borrowed from the old live hero /
   Oura: not a tight hot spot but a large, UNEVEN warm wash that spreads across
   the canvas and fades organically. Built from a few big, offset, soft radial
   pools: a terracotta warmth blooming from the lower-left up and across, a
   per-course brand bloom (--glow-1) behind the lead, and an offset secondary
   bloom upper-right. Tokenised via color-mix (no raw hexes); sits below the
   motifs + content. Per-course tint via --glow-1 (overridden below). */
.shero {
  --glow-1: var(--rose); /* brand bloom — per-course */
  --glow-2: var(--terracotta); /* shared warm wash */
  --hero-next: var(--blush); /* colour of the block below (reviews = blush) */
}
.shero--glow {
  --glow-1: var(--mauve);
}
/* Plus' block after the hero is a cream split (no blush reviews band), so its
   bottom fade must land on cream, not blush. */
.shero--plus {
  --hero-next: var(--cream);
}
.shero:not(.shero--bg)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      125% 120% at 16% 52%,
      color-mix(in srgb, var(--glow-2) 26%, transparent) 0%,
      color-mix(in srgb, var(--glow-2) 10%, transparent) 36%,
      transparent 70%
    ),
    radial-gradient(
      95% 100% at 26% 34%,
      color-mix(in srgb, var(--glow-1) 36%, transparent) 0%,
      transparent 58%
    ),
    radial-gradient(
      85% 95% at 90% 14%,
      color-mix(in srgb, var(--glow-1) 26%, transparent) 0%,
      transparent 54%
    );
  /* Keep the glow opaque from the TOP (so it fills behind the transparent
     header) and fade it out toward the BOTTOM so it glides into the base
     canvas — and thus the next block's colour. The mask is a tall radial
     anchored high and HORIZONTALLY CENTRED: that fades the entire bottom edge
     evenly across the width (left included), while the corners — being farther
     from the centre — fade before the middle, giving an organic curved
     "waterline" rather than a flat horizontal seam. */
  -webkit-mask: radial-gradient(
    96% 80% at 50% 14%,
    #000 0%,
    #000 40%,
    transparent 85%
  );
  mask: radial-gradient(96% 80% at 50% 14%, #000 0%, #000 40%, transparent 85%);
}
.shero .mm-container {
  position: relative;
  z-index: 1;
}

/* Pronounced "glow band" for feature sections — the bento "Kaikki mitä
   tarvitset" (flow/bloom/glow) and the Plus includes "Plus-paketin sisältö".
   Stronger + warmer than the hero glow (Oura-like) since it sits on the blush
   section bg: a brand bloom upper-left, a terracotta bloom lower-right, fading
   to blush before the section edges (so no hard cutoff). Per-course tint via
   --gb-1; content kept above via .mm-container z-index. */
.mm-glowband {
  position: relative;
  overflow: hidden;
  --gb-1: var(--rose);
  --gb-2: var(--terracotta);
}
body:has(.shero--glow) .mm-glowband {
  --gb-1: var(--mauve);
}
.mm-glowband > .mm-container {
  position: relative;
  z-index: 1;
}
.mm-glowband::before {
  content: "";
  position: absolute;
  /* Cap the glow to a centred max-width instead of the full section. The pools
     are positioned by % of this box, so on wide screens they stay middle-
     weighted rather than flying out to the viewport edges. ≤1500px = unchanged. */
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 1500px);
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      58% 72% at 16% 22%,
      color-mix(in srgb, var(--gb-1) 66%, transparent) 0%,
      transparent 62%
    ),
    radial-gradient(
      54% 68% at 88% 80%,
      color-mix(in srgb, var(--gb-2) 46%, transparent) 0%,
      transparent 58%
    ),
    radial-gradient(
      82% 86% at 50% 50%,
      color-mix(in srgb, var(--gb-1) 46%, transparent) 0%,
      transparent 70%
    );
  /* Feather the glow out on ALL edges so it dissolves into the neighbouring
     sections (top/bottom) AND fades smoothly toward the sides instead of
     hard-stopping at the capped 1500px box edge on wide screens. Two linear
     masks intersected = opaque only in the centre, fading on every edge. */
  -webkit-mask:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 13%,
      #000 80%,
      transparent 100%
    ),
    linear-gradient(
      to right,
      transparent 0%,
      #000 30%,
      #000 70%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 13%,
      #000 80%,
      transparent 100%
    ),
    linear-gradient(
      to right,
      transparent 0%,
      #000 30%,
      #000 70%,
      transparent 100%
    );
  mask-composite: intersect;
}

/* LIGHTER glow for the homepage hero (.hero-sec). The front page is already
   busy (collage, rating, trust strip), so this is a softer wash than the
   product heroes — two faint warm blooms. Same pull-up-under-header trick so
   it fills behind the transparent header, and the same bottom mask so it
   dissolves into the cream of the next block (mm_courses). Skipped on the
   image-overlay variant (dark bg — a glow would be invisible / clash). */
.hero-sec:not([data-hero="overlay"]) {
  margin-top: calc(-1 * var(--header-h, 69px));
  padding-top: var(--header-h, 69px);
}
.hero-sec:not([data-hero="overlay"]) > .hero-grid,
.hero-sec:not([data-hero="overlay"]) > .hero-strip {
  position: relative;
  z-index: 1;
}
.hero-sec:not([data-hero="overlay"])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Oura-style broad warm field: one large rose spread blooming from the
     top-centre down across the content (with a mid stop for a soft falloff),
     plus a terracotta warmth on the right — reads as one continuous warm wash
     rather than separate corner dots. */
  background:
    radial-gradient(
      130% 100% at 48% 8%,
      color-mix(in srgb, var(--rose) 30%, transparent) 0%,
      color-mix(in srgb, var(--rose) 11%, transparent) 44%,
      transparent 76%
    ),
    radial-gradient(
      95% 85% at 82% 30%,
      color-mix(in srgb, var(--terracotta) 22%, transparent) 0%,
      transparent 60%
    );
  -webkit-mask: radial-gradient(
    110% 85% at 50% 12%,
    #000 0%,
    #000 46%,
    transparent 88%
  );
  mask: radial-gradient(
    110% 85% at 50% 12%,
    #000 0%,
    #000 46%,
    transparent 88%
  );
}
/* Animated decorative flower layer — the hero-pattern motif brought to life.
   Sits above the warm wash (::before z-index 0, this is later in source) but
   below content (z-index 1). Token-coloured via mask + background-color, so a
   per-course tint is a one-line override. Animation touches only opacity and
   transform → GPU-composited, never triggers layout/paint. */
.shero__flowers {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.shero__flower {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--sz, 30px);
  height: var(--sz, 30px);
  background-color: color-mix(in srgb, var(--rose-700) 45%, var(--rose));
  -webkit-mask: center / contain no-repeat var(--mm-flower-mask);
  mask: center / contain no-repeat var(--mm-flower-mask);
  opacity: 0;
  transform: scale(0.62) rotate(var(--rot, 0deg));
  animation: mm-flower-twinkle var(--dur, 10s) var(--ease) var(--dly, 0s)
    infinite;
}
@keyframes mm-flower-twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.62) rotate(var(--rot, 0deg));
  }
  45%,
  55% {
    opacity: calc(var(--op, 0.5) * 1.3);
    transform: scale(1) rotate(var(--rot, 0deg));
  }
}
@media (max-width: 760px) {
  /* keep the phone hero light — drop roughly half the flowers */
  .shero__flower--hide-sm {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* no movement for motion-sensitive users — render faint and static */
  .shero__flower {
    animation: none;
    opacity: calc(var(--op, 0.5) * 0.55);
    transform: scale(0.92) rotate(var(--rot, 0deg));
  }
}
/* Per-course hero/accent motif masks, each isolated from that course's hero
   background pattern: Bloom = 5-petal flower, Flow = flowing double-wave,
   Glow = 4-point sparkle, Plus = plus sign. Painted via background-color so the
   colour stays a token / currentColor. */
:root {
  --mm-mask-bloom: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3E%3Cpath%20d=%22M50%2058C58%2061%2059%2071%2058%2077C57%2083%2053%2086%2050%2086C47%2086%2043%2083%2042%2077C41%2071%2042%2061%2050%2058Z%22%20transform=%22rotate(0%2050%2050)%22/%3E%3Cpath%20d=%22M50%2058C58%2061%2059%2071%2058%2077C57%2083%2053%2086%2050%2086C47%2086%2043%2083%2042%2077C41%2071%2042%2061%2050%2058Z%22%20transform=%22rotate(72%2050%2050)%22/%3E%3Cpath%20d=%22M50%2058C58%2061%2059%2071%2058%2077C57%2083%2053%2086%2050%2086C47%2086%2043%2083%2042%2077C41%2071%2042%2061%2050%2058Z%22%20transform=%22rotate(144%2050%2050)%22/%3E%3Cpath%20d=%22M50%2058C58%2061%2059%2071%2058%2077C57%2083%2053%2086%2050%2086C47%2086%2043%2083%2042%2077C41%2071%2042%2061%2050%2058Z%22%20transform=%22rotate(216%2050%2050)%22/%3E%3Cpath%20d=%22M50%2058C58%2061%2059%2071%2058%2077C57%2083%2053%2086%2050%2086C47%2086%2043%2083%2042%2077C41%2071%2042%2061%2050%2058Z%22%20transform=%22rotate(288%2050%2050)%22/%3E%3C/svg%3E");
  --mm-mask-flow: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%227.5%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M24%2056C34%2047%2045%2049%2053%2053C60%2056%2064%2053%2069%2047C72%2043%2076%2045%2075%2050%22/%3E%3Cpath%20d=%22M19%2069C29%2060%2040%2062%2048%2066C55%2069%2059%2066%2064%2060C67%2056%2071%2058%2070%2063%22/%3E%3C/svg%3E");
  --mm-mask-glow: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3E%3Cpath%20d=%22M50%206C54%2038%2062%2046%2094%2050C62%2054%2054%2062%2050%2094C46%2062%2038%2054%206%2050C38%2046%2046%2038%2050%206Z%22/%3E%3C/svg%3E");
  --mm-mask-plus: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%2212%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M50%2016V84M16%2050H84%22/%3E%3C/svg%3E");
  --mm-flower-mask: var(--mm-mask-bloom);
}
/* the animated hero layer (.shero__flower) picks up the page's motif */
.shero--flow {
  --mm-flower-mask: var(--mm-mask-flow);
}
.shero--glow {
  --mm-flower-mask: var(--mm-mask-glow);
}
.shero--plus {
  --mm-flower-mask: var(--mm-mask-plus);
}
/* Each sales page swaps the 4-point sparkle eyebrow/accent motif (#i-spark) for
   its own course motif, scoped via the hero's .shero--<course> marker with
   :has(). Decorative only — browsers without :has() keep the sparkle. The inline
   <use> star is hidden and the motif is painted as a currentColor mask on the
   same <svg>, inheriting the icon's size and colour. */
body:has(.shero--bloom) .mm-spark > use,
body:has(.shero--bloom) .mm-spark-bg > use,
body:has(.shero--flow) .mm-spark > use,
body:has(.shero--flow) .mm-spark-bg > use,
body:has(.shero--glow) .mm-spark > use,
body:has(.shero--glow) .mm-spark-bg > use,
body:has(.shero--plus) .mm-spark > use,
body:has(.shero--plus) .mm-spark-bg > use {
  display: none;
}
body:has(.shero--bloom) .mm-spark,
body:has(.shero--bloom) .mm-spark-bg,
body:has(.shero--flow) .mm-spark,
body:has(.shero--flow) .mm-spark-bg,
body:has(.shero--glow) .mm-spark,
body:has(.shero--glow) .mm-spark-bg,
body:has(.shero--plus) .mm-spark,
body:has(.shero--plus) .mm-spark-bg {
  background-color: currentColor;
}
body:has(.shero--bloom) .mm-spark,
body:has(.shero--bloom) .mm-spark-bg {
  -webkit-mask: center / contain no-repeat var(--mm-mask-bloom);
  mask: center / contain no-repeat var(--mm-mask-bloom);
}
body:has(.shero--flow) .mm-spark,
body:has(.shero--flow) .mm-spark-bg {
  -webkit-mask: center / contain no-repeat var(--mm-mask-flow);
  mask: center / contain no-repeat var(--mm-mask-flow);
}
body:has(.shero--glow) .mm-spark,
body:has(.shero--glow) .mm-spark-bg {
  -webkit-mask: center / contain no-repeat var(--mm-mask-glow);
  mask: center / contain no-repeat var(--mm-mask-glow);
}
body:has(.shero--plus) .mm-spark,
body:has(.shero--plus) .mm-spark-bg {
  -webkit-mask: center / contain no-repeat var(--mm-mask-plus);
  mask: center / contain no-repeat var(--mm-mask-plus);
}
/* nudge the pretitle icon up 2px so it reads optically centred against the text
   on every course page. Per-eyebrow exceptions below. */
body:has(.shero--bloom) .mm-eyebrow .mm-spark,
body:has(.shero--flow) .mm-eyebrow .mm-spark,
body:has(.shero--glow) .mm-eyebrow .mm-spark,
body:has(.shero--plus) .mm-eyebrow .mm-spark {
  transform: translateY(-2px);
}
/* "Kurssin sisältö" (#sisalto) reads better with no nudge */
#sisalto .mm-eyebrow .mm-spark {
  transform: none;
}
/* "Usein kysyttyä" (#ukk FAQ) reads better nudged down instead of up */
body:has(.shero--bloom) #ukk .mm-eyebrow .mm-spark,
body:has(.shero--flow) #ukk .mm-eyebrow .mm-spark,
body:has(.shero--glow) #ukk .mm-eyebrow .mm-spark,
body:has(.shero--plus) #ukk .mm-eyebrow .mm-spark {
  transform: translateY(2px);
}
/* Per-course optical tweaks to the FAQ/showcase pretitle icon — each course's
   motif sits differently against the text, so these are scoped one course at a
   time (deltas from the shared defaults: #sisalto none, #ukk +2px). */
/* Glow optical tweaks (glow-scoped):
   - Kurssin sisältö (#sisalto): -2px (unchanged)
   - Usein kysyttyä (#ukk): up 2px (was 0 → -2px)
   - Sisältö & tuki (.cbento bento eyebrow): down 2px (default -2px → 0) */
body:has(.shero--glow) #sisalto .mm-eyebrow .mm-spark {
  transform: translateY(-2px);
}
body:has(.shero--glow) #ukk .mm-eyebrow .mm-spark {
  transform: translateY(-2px);
}
body:has(.shero--glow) .cbento .mm-eyebrow .mm-spark {
  transform: none;
}
/* Flow: nudge the Kurssin sisältö (#sisalto) + Usein kysyttyä (#ukk) pretitle
   icons 2px up — flow-scoped so no other course page changes
   (Kurssin sisältö: none → -2px; Usein kysyttyä: was 0 on flow → -2px). */
body:has(.shero--flow) #sisalto .mm-eyebrow .mm-spark,
body:has(.shero--flow) #ukk .mm-eyebrow .mm-spark {
  transform: translateY(-2px);
}
/* Bloom: nudge the Kurssin sisältö (#sisalto) pretitle icon 2px up
   (none → -2px), bloom-scoped — no other section or course page changes. */
body:has(.shero--bloom) #sisalto .mm-eyebrow .mm-spark {
  transform: translateY(-2px);
}
/* Plus's cross reads low: Plus-paketin sisältö up 2px (none → -2px), Usein kysyttyä up 3px (+2px → -1px). */
body:has(.shero--plus) #sisalto .mm-eyebrow .mm-spark {
  transform: translateY(-2px);
}
body:has(.shero--plus) #ukk .mm-eyebrow .mm-spark {
  transform: translateY(-1px);
}
.shero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.shero__lead {
  max-width: 560px;
}
.shero__text {
  margin-top: 16px;
  color: var(--text-soft);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}
.shero__text p {
  margin: 0 0 12px;
}
.shero__outcomes {
  margin-top: 20px;
}
.shero__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: clamp(22px, 3vw, 32px);
}
/* product mark in the card's top-right corner — 16:9 box, full image revealed */
.shero__card-img {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 150px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  object-fit: contain;
  box-shadow: var(--sh-sm);
  background: var(--blush);
}
.shero__card-kicker {
  padding-right: 166px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rose-700);
  display: block;
}
@media (max-width: 640px) {
  .shero__card-img {
    width: 112px;
  }
  .shero__card-kicker {
    padding-right: 124px;
  }
}
.shero__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 6px 0 16px;
}
.shero__price-pre {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  align-self: baseline;
}
.shero__price-n {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.shero__price-per {
  font-size: var(--fs-body);
  color: var(--text-soft);
}
.shero__list {
  list-style: none;
  margin: 0 0 22px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 11px;
}
.shero__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--text);
}
.shero__list svg {
  width: 18px;
  height: 18px;
  color: var(--rose-700);
  flex: 0 0 auto;
  margin-top: 3px;
}
.shero__trust {
  display: flex;
  justify-content: center;
  gap: 14px 18px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.shero__trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shero__trust svg {
  width: 13px;
  height: 13px;
  color: var(--rose-700);
}
@media (max-width: 880px) {
  .shero__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .shero__lead {
    max-width: none;
  }
  .shero--bg::before {
    background: linear-gradient(
      180deg,
      var(--cream) 42%,
      rgba(255, 245, 245, 0.72)
    );
  }
}

/* course reviews — wrapper for the injected Common Ninja widget */
.mm-reviews {
  max-width: 1140px;
  margin: 0 auto;
}
.mm-reviews .commonninja_component {
  width: 100%;
}

/* ============================================================================
   Pricing tier toggle (block B) — "Valitse pakettisi". One card, a segmented
   3kk/6kk/12kk control that swaps the price/total/tag/CTA (mm.js). 12 kk is the
   default-selected (featured) period.
   ========================================================================= */
.crs-toggle {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: clamp(22px, 3vw, 36px);
}
.crs-seg {
  display: flex;
  gap: 4px;
  background: var(--blush);
  border-radius: var(--pill);
  padding: 4px;
  margin-bottom: 22px;
}
.crs-seg__btn {
  flex: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--pill);
  padding: 11px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--rose-700);
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.crs-seg__sub {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-soft);
}
/* discount badge on the 6kk / 12kk segments (mint = savings) */
.crs-seg__save {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--mint-ink);
  background: var(--mint);
  padding: 5px 9px;
  border-radius: var(--pill);
  white-space: nowrap;
}
.crs-seg__btn.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.crs-seg__btn.is-active .crs-seg__sub {
  color: var(--rose-700);
}
.crs-seg__btn:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}
.crs-toggle__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.crs-toggle__pre {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  align-self: baseline;
}
.crs-toggle__n {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.crs-toggle__per {
  font-size: var(--fs-body);
  color: var(--text-soft);
}
.crs-toggle__sub {
  font-size: var(--fs-xs);
  color: var(--text-soft);
  margin: 6px 0 0;
}
.crs-toggle__pricerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.crs-toggle__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--pill);
  background: var(--blush);
  color: var(--rose-700);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.crs-toggle__badge[hidden] {
  display: none;
}
.crs-toggle__badge svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}
.crs-toggle__reassure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.crs-toggle__reassure svg {
  width: 13px;
  height: 13px;
  color: var(--rose-700);
  flex: 0 0 auto;
}
.crs-toggle__inc {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}
.crs-toggle__inc li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--text);
}
.crs-toggle__inc svg {
  width: 18px;
  height: 18px;
  color: var(--rose-700);
  flex: 0 0 auto;
  margin-top: 3px;
}

/* ============================================================================
   Course content showcase (.cshow) — "Kurssin sisältö". Topic headings span the
   grid and break it into sections; thumbnails are a responsive 4/3/2-col grid.
   ========================================================================= */
.cshow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cshow__topic {
  grid-column: 1 / -1;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 24px 0 2px;
}
.cshow__topic:first-child {
  margin-top: 0;
}
.cshow__shot {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sh-sm);
  aspect-ratio: 16 / 9;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.cshow__shot:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}
.cshow__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 760px) {
  .cshow {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* testimonial blockquote inside a split's text column (.mm-quote) */
.crs-row__text blockquote.mm-quote {
  margin: 22px 0 0;
  padding: 16px 20px;
  background: var(--blush);
  border-left: 3px solid var(--rose);
  border-radius: var(--r-sm);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--ink);
  line-height: var(--lh-body);
}
.crs-row__text blockquote.mm-quote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-weight: 600;
  color: var(--rose-700);
  font-size: var(--fs-xs);
}

/* accordion inside a split's text column — reuses the FAQ component
   (.mm-acc__item/__trigger/__panel/__icon, JS-animated) so opener + animation
   match the FAQ exactly. Tighter spacing for the narrower column. */
.crs-row__text .mm-acc-group {
  margin-top: 18px;
}
.crs-row__text .mm-acc__item {
  margin-bottom: 10px;
}
.crs-row__text .mm-acc__trigger {
  padding: 14px 16px;
  font-size: var(--fs-sm);
  /* single-line items: vertically centre emoji+text against the 26px "+" disc
     (base trigger top-aligns for 2-line FAQ questions; not wanted here) */
  align-items: center;
}
/* breathing room between the leading emoji and the accordion title */
.mm-acc__e {
  margin-right: var(--s2);
}
.crs-row__text .mm-acc__panel-inner {
  padding: 0 16px 16px;
  font-size: var(--fs-sm);
}

/* credential callout (.mm-callout) inside a split's text column */
.crs-row__text .mm-callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--blush);
  border-left: 3px solid var(--rose);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  margin: 18px 0;
}
.crs-row__text .mm-callout__ic {
  width: 22px;
  height: 22px;
  color: var(--rose-700);
  flex: 0 0 auto;
  margin-top: 2px;
}
.crs-row__text .mm-callout p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink);
}

/* ===== full-width image band (mm_image_band) — edge-to-edge lifestyle photo,
   e.g. the "mama essentials + app" flat-lay above the footer ===== */
.mm-imageband {
  width: 100%;
  line-height: 0; /* kill the inline-image baseline gap */
  background: var(--blush); /* matches the flat-lay's pale-pink field */
}
.mm-imageband__link {
  display: block;
}
.mm-imageband__img {
  display: block;
  width: 100%;
  height: auto;
}