/* ==========================================================================
   MindMonks — Components
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons — minimum 44px tap target everywhere
   -------------------------------------------------------------------------- */

.mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mm-space-2xs);
  min-height: var(--mm-tap-target);
  padding: 0.75rem 1.5rem;
  border-radius: var(--mm-radius-pill);
  font-family: var(--mm-font-body);
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--mm-duration-base) var(--mm-ease-soft),
    color var(--mm-duration-base) var(--mm-ease-soft),
    border-color var(--mm-duration-base) var(--mm-ease-soft),
    box-shadow var(--mm-duration-base) var(--mm-ease-soft),
    transform var(--mm-duration-base) var(--mm-ease-calm);
}

.mm-btn:hover {
  transform: translateY(-1px);
}

.mm-btn:active {
  transform: translateY(0);
}

.mm-btn--primary {
  background: var(--mm-primary);
  color: var(--mm-on-primary);
  box-shadow: var(--mm-shadow-sm);
}

.mm-btn--primary:hover {
  background: var(--mm-primary-hover);
  color: var(--mm-on-primary);
  box-shadow: var(--mm-shadow-md);
}

.mm-btn--secondary {
  background: var(--mm-secondary);
  color: var(--mm-on-secondary);
}

.mm-btn--secondary:hover {
  background: var(--mm-secondary-hover);
  color: var(--mm-on-secondary);
}

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

.mm-btn--outline:hover {
  background: var(--mm-primary-soft);
  border-color: var(--mm-teal-300);
  color: var(--mm-teal-800);
}

.mm-btn--ghost {
  background: var(--mm-surface);
  color: var(--mm-primary);
  border-color: var(--mm-border);
  box-shadow: var(--mm-shadow-xs);
}

.mm-btn--ghost:hover {
  background: var(--mm-surface);
  border-color: var(--mm-border-strong);
  box-shadow: var(--mm-shadow-sm);
}

.mm-btn--accent {
  background: var(--mm-accent);
  color: var(--mm-on-accent);
}

.mm-btn--accent:hover {
  background: var(--mm-accent-hover);
  color: var(--mm-on-accent);
}

.mm-btn--on-dark {
  background: var(--mm-on-dark-fill);
  color: var(--mm-white);
  border-color: var(--mm-on-dark-border);
}

.mm-btn--on-dark:hover {
  background: var(--mm-on-dark-fill-hover);
  color: var(--mm-white);
}

.mm-btn--lg {
  padding: 0.95rem 1.85rem;
  font-size: var(--mm-text-base);
  min-height: 52px;
}

.mm-btn--sm {
  padding: 0.5rem 1rem;
  min-height: 40px;
  font-size: var(--mm-text-xs);
}

.mm-btn--block {
  display: flex;
  width: 100%;
}

.mm-btn[disabled],
.mm-btn.is-loading {
  opacity: 0.62;
  pointer-events: none;
}

.mm-btn.is-loading::after {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: mm-spin 0.8s linear infinite;
}

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

/* Tertiary: for "read more" style actions that must not compete with a
   primary CTA but still need to behave, and be sized, like a button. */
.mm-btn--text {
  background: transparent;
  border-color: transparent;
  color: var(--mm-link);
  padding-inline: 0.4rem;
  box-shadow: none;
}

.mm-btn--text:hover {
  background: transparent;
  color: var(--mm-link-hover);
  transform: none;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The one breathing element: the primary hero CTA */
.mm-btn--breathe {
  position: relative;
}

.mm-btn--breathe::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid var(--mm-teal-300);
  opacity: 0;
  animation: mm-breathe 6.5s var(--mm-ease-calm) infinite;
  pointer-events: none;
}

@keyframes mm-breathe {
  0%,
  100% {
    transform: scale(0.97);
    opacity: 0;
  }
  40% {
    opacity: 0.55;
  }
  70% {
    transform: scale(1.06);
    opacity: 0;
  }
}

/* Full-width booking CTAs on phones */
@media (max-width: 30rem) {
  .mm-btn--stack-block {
    display: flex;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Eyebrow / section headings
   -------------------------------------------------------------------------- */

.mm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--mm-font-body);
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-semibold);
  letter-spacing: var(--mm-tracking-wider);
  text-transform: uppercase;
  color: var(--mm-olive-700);
  margin: 0;
}

.mm-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}

.mm-eyebrow--purple {
  color: var(--mm-purple-700);
}

.mm-eyebrow--on-dark {
  color: var(--mm-olive-300);
}

.mm-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-xs);
  max-width: var(--mm-measure);
  margin-bottom: var(--mm-space-lg);
}

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

.mm-section-head--center .mm-eyebrow::before {
  display: none;
}

.mm-section-head p {
  font-size: var(--mm-text-md);
  color: var(--mm-text-secondary);
  max-width: var(--mm-measure);
}

.mm-section-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mm-space-md);
  margin-bottom: var(--mm-space-lg);
}

.mm-section-head__row .mm-section-head {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.mm-card {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-xs);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  padding: var(--mm-space-md);
  box-shadow: var(--mm-shadow-xs);
  transition: transform var(--mm-duration-base) var(--mm-ease-calm),
    box-shadow var(--mm-duration-base) var(--mm-ease-calm),
    border-color var(--mm-duration-base) var(--mm-ease-soft);
  min-width: 0;
}

.mm-card--interactive:hover,
.mm-card--interactive:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--mm-shadow-md);
  border-color: var(--mm-border-primary);
}

.mm-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface-muted);
  color: var(--mm-teal-700);
}

.mm-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.mm-card__icon--olive {
  background: var(--mm-olive-100);
  color: var(--mm-olive-800);
}

.mm-card__icon--purple {
  background: var(--mm-purple-100);
  color: var(--mm-purple-700);
}

.mm-card__title {
  font-size: var(--mm-text-lg);
  margin: 0;
}

.mm-card__text {
  color: var(--mm-text-secondary);
  font-size: var(--mm-text-sm);
  margin: 0;
}

.mm-card__link {
  margin-top: auto;
  padding-top: var(--mm-space-2xs);
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-semibold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 32px;
}

.mm-card__link::after {
  content: "→";
  transition: transform var(--mm-duration-base) var(--mm-ease-calm);
}

.mm-card__link:hover::after {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Condition cards

   Hover (pointer devices) or a tap/click reveals the description in a
   floating panel — never inside the card. The card itself (dot, name, sign)
   is a fixed-size button; the panel is a sibling of it, positioned
   absolutely against the wrap below, so it never contributes to the wrap's
   own box. The grid's row height is set purely by the buttons, so nothing
   in the layout can ever shift when a panel opens. Only one panel is ever
   open — main.js keeps that in sync via aria-expanded.
   -------------------------------------------------------------------------- */

.mm-condition-card-wrap {
  position: relative;
  display: block;
}

.mm-condition-card {
  display: flex;
  align-items: center;
  gap: var(--mm-space-xs);
  width: 100%;
  height: 100%;
  min-height: 4.75rem;
  padding: var(--mm-space-sm);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md);
  text-align: left;
  text-decoration: none;
  color: var(--mm-text-primary);
  font-family: inherit;
  font-weight: var(--mm-weight-medium);
  font-size: var(--mm-text-sm);
  cursor: pointer;
  transition: border-color var(--mm-duration-base) var(--mm-ease-soft),
    background var(--mm-duration-base) var(--mm-ease-soft),
    box-shadow var(--mm-duration-base) var(--mm-ease-soft),
    transform var(--mm-duration-base) var(--mm-ease-calm);
}

.mm-condition-card--static { cursor: default; }

.mm-condition-card__name { flex: 1; min-width: 0; }

.mm-condition-card__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--mm-olive-600);
  flex: none;
  transition: transform var(--mm-duration-base) var(--mm-ease-calm);
}

/* A plus that becomes a minus. Drawn from two rules so it needs no icon font
   and no second SVG. */
.mm-condition-card__sign {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: auto;
}

.mm-condition-card__sign::before,
.mm-condition-card__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--mm-olive-700);
  transition: transform var(--mm-duration-base) var(--mm-ease-calm),
    opacity var(--mm-duration-fast) var(--mm-ease-soft);
}

.mm-condition-card__sign::after { transform: rotate(90deg); }

.mm-condition-card:hover,
.mm-condition-card[aria-expanded="true"] {
  border-color: var(--mm-teal-300);
  background: var(--mm-surface-muted);
  color: var(--mm-teal-800);
  transform: translateY(-2px);
}

.mm-condition-card--static:hover { transform: none; }

.mm-condition-card[aria-expanded="true"] {
  border-color: var(--mm-teal-600);
  background: var(--mm-surface);
  box-shadow: var(--mm-shadow-sm);
}

.mm-condition-card[aria-expanded="true"] .mm-condition-card__sign::after,
.mm-condition-card:hover .mm-condition-card__sign::after {
  transform: rotate(90deg) scaleX(0.001);
}

.mm-condition-card[aria-expanded="true"] .mm-condition-card__dot { transform: scale(1.35); }

/* -------------------------------------------------------------------------
   The floating panel. Positioned absolutely against the wrap above, so it
   is removed from normal flow entirely — it can never change the wrap's
   own box, which is what keeps the grid still. It defaults to centred
   beneath the card; --mm-panel-nudge and [data-place="above"] are set by
   main.js only when the default position would spill past the viewport, so
   the panel always stays fully on screen without ever touching the grid.
   ------------------------------------------------------------------------- */
.mm-condition-card__panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  z-index: var(--mm-z-sticky);
  width: max(15rem, 100%);
  max-width: min(20rem, calc(100vw - 2 * var(--mm-gutter)));
  margin: 0;
  padding: var(--mm-space-sm);
  background: var(--mm-surface);
  border: 1px solid var(--mm-teal-200);
  border-radius: var(--mm-radius-md);
  box-shadow: var(--mm-shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(calc(-50% + var(--mm-panel-nudge, 0px)), -4px) scale(0.97);
  transform-origin: top center;
  transition: opacity var(--mm-duration-base) var(--mm-ease-calm),
    transform var(--mm-duration-base) var(--mm-ease-calm),
    visibility 0s linear var(--mm-duration-base);
}

.mm-condition-card__panel::before {
  content: "";
  position: absolute;
  top: -6px;
  left: calc(50% + var(--mm-panel-arrow-nudge, 0px));
  width: 12px;
  height: 12px;
  background: var(--mm-surface);
  border-left: 1px solid var(--mm-teal-200);
  border-top: 1px solid var(--mm-teal-200);
  border-radius: 3px 0 0 0;
  transform: translateX(-50%) rotate(45deg);
}

.mm-condition-card__panel[data-place="above"] {
  top: auto;
  bottom: calc(100% + 0.6rem);
  transform: translate(calc(-50% + var(--mm-panel-nudge, 0px)), 4px) scale(0.97);
  transform-origin: bottom center;
}

.mm-condition-card__panel[data-place="above"]::before {
  top: auto;
  bottom: -6px;
  border-left: none;
  border-top: none;
  border-right: 1px solid var(--mm-teal-200);
  border-bottom: 1px solid var(--mm-teal-200);
  border-radius: 0 0 3px 0;
}

.mm-condition-card__text {
  display: block;
  margin: 0;
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-regular);
  line-height: var(--mm-leading-normal);
  color: var(--mm-text-secondary);
}

.mm-condition-card-wrap:focus-within .mm-condition-card__panel,
.mm-condition-card-wrap.is-open .mm-condition-card__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(calc(-50% + var(--mm-panel-nudge, 0px)), 0) scale(1);
  transition: opacity var(--mm-duration-base) var(--mm-ease-calm),
    transform var(--mm-duration-base) var(--mm-ease-calm);
}

/* Hover preview, pointer devices only. A touch screen reports no hover, so
   phones and tablets get the tap behaviour and nothing sticky. */
@media (hover: hover) and (pointer: fine) {
  .mm-condition-card-wrap:hover .mm-condition-card__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(calc(-50% + var(--mm-panel-nudge, 0px)), 0) scale(1);
    transition: opacity var(--mm-duration-base) var(--mm-ease-calm),
      transform var(--mm-duration-base) var(--mm-ease-calm);
  }
}

.mm-condition-hint {
  font-size: var(--mm-text-xs);
  color: var(--mm-text-muted);
  margin-bottom: var(--mm-space-xs);
}

/* Small screens: a panel anchored to a card can crowd the edge of the
   screen. Below this width it docks instead as a small, fixed panel
   centred near the bottom of the viewport — still a light panel, never a
   full modal. */
@media (max-width: 30rem) {
  .mm-condition-card__panel,
  .mm-condition-card__panel[data-place="above"] {
    position: fixed;
    top: auto;
    left: 50%;
    bottom: calc(var(--mm-space-md) + var(--mm-safe-bottom));
    width: min(22rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    transform: translate(-50%, 10px) scale(0.97);
    transform-origin: bottom center;
  }

  .mm-condition-card__panel::before,
  .mm-condition-card__panel[data-place="above"]::before {
    display: none;
  }

  .mm-condition-card-wrap:focus-within .mm-condition-card__panel,
  .mm-condition-card-wrap.is-open .mm-condition-card__panel {
    transform: translate(-50%, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-condition-card,
  .mm-condition-card__panel,
  .mm-condition-card__sign::before,
  .mm-condition-card__sign::after,
  .mm-condition-card__dot {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Site header + navigation
   -------------------------------------------------------------------------- */

.mm-site-header {
  position: sticky;
  top: 0;
  z-index: var(--mm-z-header);
  background: var(--mm-surface-frosted);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  padding-top: var(--mm-safe-top);
  transition: border-color var(--mm-duration-base) var(--mm-ease-soft),
    background var(--mm-duration-base) var(--mm-ease-soft),
    backdrop-filter var(--mm-duration-base) var(--mm-ease-soft),
    box-shadow var(--mm-duration-base) var(--mm-ease-soft);
}

/* On a page that opens with a hero, the header starts as part of that hero —
   no surface, no border — and adopts the frosted plate the moment you scroll.
   It is the same component either way; only the surface changes. */
body.mm-has-hero .mm-site-header:not(.is-stuck) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mm-site-header.is-stuck {
  border-bottom-color: var(--mm-border);
  box-shadow: var(--mm-shadow-sm);
}

.mm-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-space-sm);
  min-height: var(--mm-header-height);
}

.mm-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  text-decoration: none;
  padding-block: 0.4rem;
}

/* The approved logo keeps its exact proportions at every size: we only ever
   constrain height and let width follow the intrinsic aspect ratio. */
.mm-brand__logo {
  height: clamp(40px, 3.1vw + 26px, 68px);
  width: auto;
  max-width: min(68vw, 400px);
  object-fit: contain;
  object-position: left center;
}

/* Between the drawer breakpoint and a comfortable desktop, the full-size logo
   and a seven-item nav are competing for the same row. The logo yields. */
@media (min-width: 64rem) and (max-width: 84rem) {
  .mm-brand__logo {
    height: 48px;
  }
}

.mm-site-footer .mm-brand__logo {
  height: clamp(44px, 3.8vw + 28px, 72px);
  max-width: 100%;
}

.mm-nav {
  display: none;
}

.mm-nav__list {
  display: flex;
  align-items: center;
  /* Never wrap. Seven items beside an enlarged logo were spilling onto a
     second row at 1280, which pushed Contact under the rest and made the
     header look broken. Below the drawer breakpoint there is no nav at all,
     so nowrap costs nothing. */
  flex-wrap: nowrap;
  gap: clamp(0.15rem, 0.55vw, 0.7rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mm-nav__list li {
  margin: 0;
  position: relative;
}

.mm-nav__list a {
  position: relative;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.35rem 0.55rem;
  border-radius: var(--mm-radius-sm);
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-medium);
  color: var(--mm-teal-800);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--mm-duration-fast) var(--mm-ease-soft),
    color var(--mm-duration-fast) var(--mm-ease-soft);
}

.mm-nav__list a:hover {
  background: var(--mm-primary-soft);
  color: var(--mm-teal-900);
}

/* Where you are. Colour alone would not carry this, so the current item also
   gets weight and a rule beneath it. */
.mm-nav__list .current-menu-item > a,
.mm-nav__list .current_page_item > a,
.mm-nav__list .current-menu-ancestor > a,
.mm-nav__list .current-page-ancestor > a,
.mm-nav__list .current-menu-parent > a {
  background: var(--mm-primary-soft);
  color: var(--mm-teal-900);
  font-weight: var(--mm-weight-semibold);
}

.mm-nav__list > li > a::after {
  content: "";
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: var(--mm-radius-pill);
  background: var(--mm-secondary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mm-duration-base) var(--mm-ease-calm);
}

.mm-nav__list > li.current-menu-item > a::after,
.mm-nav__list > li.current_page_item > a::after,
.mm-nav__list > li.current-menu-ancestor > a::after,
.mm-nav__list > li.current-page-ancestor > a::after,
.mm-nav__list > li.current-menu-parent > a::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .mm-nav__list > li > a::after {
    transition: none;
  }
}

/* Dropdown submenus */
.mm-nav__list .sub-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 14rem;
  max-width: min(20rem, 90vw);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md);
  box-shadow: var(--mm-shadow-md);
  padding: 0.4rem;
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--mm-duration-base) var(--mm-ease-soft),
    transform var(--mm-duration-base) var(--mm-ease-calm),
    visibility var(--mm-duration-base);
  z-index: 2;
}

.mm-nav__list li:hover > .sub-menu,
.mm-nav__list li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mm-nav__list .sub-menu a {
  white-space: normal;
  width: 100%;
}

.mm-header__actions {
  display: flex;
  align-items: center;
  gap: var(--mm-space-2xs);
  flex: none;
}

.mm-header__cta {
  display: none;
}

/* Hamburger */
.mm-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mm-tap-target);
  height: var(--mm-tap-target);
  border-radius: var(--mm-radius-sm);
  border: 1px solid var(--mm-border);
  background: var(--mm-surface);
  color: var(--mm-teal-800);
  flex: none;
}

.mm-nav-toggle__bars {
  position: relative;
  width: 20px;
  height: 14px;
  display: block;
}

.mm-nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--mm-duration-base) var(--mm-ease-calm),
    opacity var(--mm-duration-fast) var(--mm-ease-soft),
    top var(--mm-duration-base) var(--mm-ease-calm);
}

.mm-nav-toggle__bars span:nth-child(1) {
  top: 0;
}
.mm-nav-toggle__bars span:nth-child(2) {
  top: 6px;
}
.mm-nav-toggle__bars span:nth-child(3) {
  top: 12px;
}

.mm-nav-toggle[aria-expanded="true"] .mm-nav-toggle__bars span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
.mm-nav-toggle[aria-expanded="true"] .mm-nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}
.mm-nav-toggle[aria-expanded="true"] .mm-nav-toggle__bars span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

/* Mobile drawer */
.mm-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--mm-z-drawer);
  display: flex;
  justify-content: flex-end;
  visibility: hidden;
  pointer-events: none;
}

.mm-mobile-nav.is-open {
  visibility: visible;
  pointer-events: auto;
}

.mm-mobile-nav__backdrop {
  position: absolute;
  inset: 0;
  background: var(--mm-overlay);
  opacity: 0;
  transition: opacity var(--mm-duration-base) var(--mm-ease-soft);
}

.mm-mobile-nav.is-open .mm-mobile-nav__backdrop {
  opacity: 1;
}

.mm-mobile-nav__panel {
  position: relative;
  width: min(24rem, 92vw);
  max-width: 100%;
  height: 100%;
  background: var(--mm-background);
  box-shadow: var(--mm-shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--mm-duration-base) var(--mm-ease-calm);
  padding-top: var(--mm-safe-top);
  padding-bottom: calc(var(--mm-space-md) + var(--mm-safe-bottom));
  padding-right: var(--mm-safe-right);
  overflow: hidden;
}

.mm-mobile-nav.is-open .mm-mobile-nav__panel {
  transform: translateX(0);
}

.mm-mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-space-sm);
  padding: var(--mm-space-sm) var(--mm-space-md);
  border-bottom: 1px solid var(--mm-border);
  min-height: var(--mm-header-height);
}

.mm-mobile-nav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mm-tap-target);
  height: var(--mm-tap-target);
  border-radius: var(--mm-radius-sm);
  border: 1px solid var(--mm-border);
  background: var(--mm-surface);
  color: var(--mm-teal-800);
  font-size: 1.25rem;
  line-height: 1;
  flex: none;
}

.mm-mobile-nav__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--mm-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-md);
}

.mm-mobile-nav__list,
.mm-mobile-nav__list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mm-mobile-nav__list .sub-menu {
  margin: 2px 0 var(--mm-space-2xs) var(--mm-space-sm);
  padding-left: var(--mm-space-sm);
  border-left: 2px solid var(--mm-border);
}

.mm-mobile-nav__list li {
  margin: 0;
}

.mm-mobile-nav__list a {
  display: flex;
  align-items: center;
  min-height: var(--mm-tap-target);
  padding: 0.6rem 0.75rem;
  border-radius: var(--mm-radius-sm);
  color: var(--mm-teal-800);
  text-decoration: none;
  font-weight: var(--mm-weight-medium);
  font-size: var(--mm-text-base);
}

.mm-mobile-nav__list a:hover {
  background: var(--mm-primary-soft);
}

.mm-mobile-nav__list .current-menu-item > a,
.mm-mobile-nav__list .current_page_item > a,
.mm-mobile-nav__list .current-menu-ancestor > a,
.mm-mobile-nav__list .current-page-ancestor > a,
.mm-mobile-nav__list .current-menu-parent > a {
  background: var(--mm-primary-soft);
  color: var(--mm-teal-900);
  font-weight: var(--mm-weight-semibold);
  border-left: 3px solid var(--mm-secondary);
  padding-left: calc(0.75rem - 3px);
}

.mm-mobile-nav__footer {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-2xs);
  padding-top: var(--mm-space-sm);
  border-top: 1px solid var(--mm-border);
}

.mm-mobile-nav__meta {
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
}

body.mm-scroll-locked {
  overflow: hidden;
}

@media (min-width: 64rem) {
  .mm-nav {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
  }

  .mm-nav__list {
    justify-content: center;
  }

  .mm-header__cta {
    display: inline-flex;
  }

  .mm-nav-toggle {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Sticky mobile CTA
   -------------------------------------------------------------------------- */

.mm-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--mm-z-sticky);
  display: flex;
  gap: var(--mm-space-2xs);
  padding: 0.55rem var(--mm-gutter)
    calc(0.55rem + var(--mm-safe-bottom));
  background: var(--mm-surface-frosted-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--mm-border);
  transform: translateY(110%);
  transition: transform var(--mm-duration-base) var(--mm-ease-calm);
}

.mm-sticky-cta.is-visible {
  transform: translateY(0);
}

.mm-sticky-cta .mm-btn {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 0.75rem;
}

/* Keep the sticky bar off the end of the page content */
body.has-sticky-cta .mm-site-footer {
  padding-bottom: calc(var(--mm-space-xl) + var(--mm-sticky-cta-height));
}

@media (min-width: 48rem) {
  .mm-sticky-cta {
    display: none;
  }

  body.has-sticky-cta .mm-site-footer {
    padding-bottom: var(--mm-space-xl);
  }
}

/* Never let the sticky bar sit over a focused input on short screens */
@media (max-height: 30rem) {
  .mm-sticky-cta {
    display: none;
  }
}

body.mm-keyboard-open .mm-sticky-cta {
  transform: translateY(110%);
}

/* --------------------------------------------------------------------------
   Badges, chips, trust markers
   -------------------------------------------------------------------------- */

.mm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3rem 0.7rem;
  border-radius: var(--mm-radius-pill);
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-semibold);
  background: var(--mm-primary-soft);
  color: var(--mm-teal-800);
  line-height: 1.3;
}

.mm-badge--olive {
  background: var(--mm-olive-100);
  color: var(--mm-olive-800);
}

.mm-badge--purple {
  background: var(--mm-purple-100);
  color: var(--mm-purple-700);
}

.mm-badge--outline {
  background: transparent;
  border: 1px solid var(--mm-border-strong);
  color: var(--mm-text-secondary);
}

.mm-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-2xs) var(--mm-space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mm-trust li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-size: var(--mm-text-xs);
  color: var(--mm-text-secondary);
  min-width: 0;
}

.mm-trust svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  color: var(--mm-olive-600);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.mm-form {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-md);
  width: 100%;
  min-width: 0;
}

.mm-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-sm);
  min-width: 0;
}

.mm-fieldset__legend {
  font-family: var(--mm-font-body);
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-semibold);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: var(--mm-olive-700);
  padding: 0;
  margin-bottom: var(--mm-space-3xs);
}

/* Single column on narrow screens; two only when there is genuinely room */
.mm-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-sm);
}

.mm-field-row > * {
  flex: 1 1 min(100%, 15rem);
  min-width: 0;
}

.mm-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.mm-field__label {
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-teal-800);
}

.mm-field__label .mm-req {
  color: var(--mm-error);
  margin-left: 0.15em;
}

.mm-field__hint {
  font-size: var(--mm-text-xs);
  color: var(--mm-text-muted);
  /* Hints sit below the control so that two fields side by side keep their
     inputs on the same line even when only one of them has a hint. */
  order: 1;
}

.mm-field__error {
  order: 2;
}

.mm-input,
.mm-select,
.mm-textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--mm-tap-target);
  padding: 0.7rem 0.9rem;
  /* 16px minimum stops iOS Safari zooming the page on focus */
  font-size: max(16px, var(--mm-text-sm));
  background: var(--mm-surface);
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-radius-sm);
  color: var(--mm-text-primary);
  transition: border-color var(--mm-duration-fast) var(--mm-ease-soft),
    box-shadow var(--mm-duration-fast) var(--mm-ease-soft);
  -webkit-appearance: none;
  appearance: none;
}

.mm-textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: var(--mm-leading-normal);
}

.mm-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23545a55' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 0.7rem;
  padding-right: 2.4rem;
}

.mm-input:focus,
.mm-select:focus,
.mm-textarea:focus {
  outline: none;
  border-color: var(--mm-teal-500);
  box-shadow: var(--mm-shadow-focus);
}

.mm-input::placeholder,
.mm-textarea::placeholder {
  color: var(--mm-text-muted);
}

.mm-field.has-error .mm-input,
.mm-field.has-error .mm-select,
.mm-field.has-error .mm-textarea {
  border-color: var(--mm-error);
  background: var(--mm-error-soft);
}

/* Errors always sit directly underneath their field */
.mm-field__error {
  font-size: var(--mm-text-xs);
  color: var(--mm-error);
  font-weight: var(--mm-weight-medium);
  display: none;
}

.mm-field.has-error .mm-field__error {
  display: block;
}

/* Checkbox / radio + consent */
.mm-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
  line-height: var(--mm-leading-normal);
  min-height: var(--mm-tap-target);
  padding-block: 0.35rem;
  cursor: pointer;
}

/* accent-color left the box filled with the browser's own near-black in several
   engines. These are drawn instead: transparent when off, brand teal when on,
   with a white tick that clears AA against it. The check mark is a background
   image rather than a pseudo-element, because pseudo-elements on form controls
   are not reliable across engines. */
.mm-check input[type="checkbox"],
.mm-check input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.12rem 0 0;
  border: 1.5px solid var(--mm-border-strong);
  border-radius: var(--mm-radius-xs);
  background: transparent;
  cursor: pointer;
  transition: background var(--mm-duration-fast) var(--mm-ease-soft),
    border-color var(--mm-duration-fast) var(--mm-ease-soft),
    border-width var(--mm-duration-fast) var(--mm-ease-soft);
}

.mm-check input[type="radio"] {
  border-radius: 50%;
}

.mm-check:hover input[type="checkbox"],
.mm-check:hover input[type="radio"] {
  border-color: var(--mm-teal-300);
}

.mm-check input[type="checkbox"]:checked {
  border-color: var(--mm-teal-600);
  background: var(--mm-teal-600)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8.4 3 3 6-6.6'/%3E%3C/svg%3E")
    center / 0.8rem no-repeat;
}

.mm-check input[type="radio"]:checked {
  border-color: var(--mm-teal-600);
  border-width: 0.42rem;
}

.mm-check input[type="checkbox"]:focus-visible,
.mm-check input[type="radio"]:focus-visible {
  outline: 2px solid var(--mm-teal-600);
  outline-offset: 3px;
}

/* Windows high-contrast mode paints its own colours and ignores backgrounds,
   so the tick is restored there as a border the OS will honour. */
@media (forced-colors: active) {
  .mm-check input[type="checkbox"]:checked,
  .mm-check input[type="radio"]:checked {
    border-color: Highlight;
    background-color: Highlight;
  }
}

/* Segmented option cards (slot pickers, region choice, consult type) */
.mm-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-2xs);
}

.mm-option {
  flex: 1 1 min(100%, 11rem);
  min-width: 0;
  position: relative;
}

.mm-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.mm-option__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  height: 100%;
  min-height: var(--mm-tap-target);
  justify-content: center;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface);
  cursor: pointer;
  transition: border-color var(--mm-duration-fast) var(--mm-ease-soft),
    background var(--mm-duration-fast) var(--mm-ease-soft),
    box-shadow var(--mm-duration-fast) var(--mm-ease-soft);
}

.mm-option__title {
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-teal-800);
}

.mm-option__meta {
  font-size: var(--mm-text-xs);
  color: var(--mm-text-muted);
}

.mm-option input:checked + .mm-option__body {
  border-color: var(--mm-teal-600);
  background: var(--mm-surface-muted);
  box-shadow: inset 0 0 0 1px var(--mm-teal-600);
}

.mm-option input:focus-visible + .mm-option__body {
  outline: 2px solid var(--mm-teal-600);
  outline-offset: 2px;
}

.mm-option input:disabled + .mm-option__body {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Form-level messages */
.mm-form__notice {
  display: flex;
  gap: 0.65rem;
  padding: var(--mm-space-sm);
  border-radius: var(--mm-radius-md);
  font-size: var(--mm-text-sm);
  border: 1px solid transparent;
}

.mm-form__notice--info {
  background: var(--mm-info-soft);
  border-color: var(--mm-teal-200);
  color: var(--mm-teal-800);
}

.mm-form__notice--error {
  background: var(--mm-error-soft);
  border-color: var(--mm-error-border);
  color: var(--mm-error);
}

.mm-form__notice--success {
  background: var(--mm-success-soft);
  border-color: var(--mm-success-border);
  color: var(--mm-success);
  flex-direction: column;
  align-items: flex-start;
}

.mm-form__notice-text {
  margin: 0;
}

.mm-form__notice[hidden] {
  display: none;
}

.mm-consent {
  font-size: var(--mm-text-xs);
  color: var(--mm-text-secondary);
  line-height: var(--mm-leading-normal);
}

/* Honeypot */
.mm-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Form panel wrapper */
.mm-form-panel {
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  padding: clamp(var(--mm-space-sm), 3vw, var(--mm-space-lg));
  box-shadow: var(--mm-shadow-sm);
  min-width: 0;
}

.mm-summary {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-2xs);
  padding: var(--mm-space-sm);
  background: var(--mm-surface-muted);
  border-radius: var(--mm-radius-md);
  font-size: var(--mm-text-sm);
}

.mm-summary__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
}

.mm-summary__row--total {
  padding-top: var(--mm-space-2xs);
  border-top: 1px solid var(--mm-teal-200);
  font-weight: var(--mm-weight-semibold);
  font-size: var(--mm-text-md);
  color: var(--mm-teal-800);
}

/* --------------------------------------------------------------------------
   Pricing — cards on every screen, never a scrolling table
   -------------------------------------------------------------------------- */

.mm-price-toggle {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-pill);
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

.mm-price-toggle__btn {
  min-height: 40px;
  padding: 0.5rem 1.15rem;
  border-radius: var(--mm-radius-pill);
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-text-secondary);
  white-space: nowrap;
  transition: background var(--mm-duration-fast) var(--mm-ease-soft),
    color var(--mm-duration-fast) var(--mm-ease-soft);
}

.mm-price-toggle__btn[aria-pressed="true"] {
  background: var(--mm-primary);
  color: var(--mm-on-primary);
}

.mm-price-card {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-xs);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  padding: var(--mm-space-md);
  box-shadow: var(--mm-shadow-xs);
  min-width: 0;
  position: relative;
}

.mm-price-card--featured {
  border-color: var(--mm-teal-300);
  box-shadow: var(--mm-shadow-md);
}

/* The badge used to be absolutely positioned over the top-right corner, with
   the title given a padding-right big enough to dodge it. That works until a
   title wraps to two lines or the card narrows, and then they collide. It now
   sits in a row of its own, which is reserved on every card whether or not it
   carries a badge — so the four titles start on the same baseline and nothing
   can ever overlap. */
.mm-price-card__flagrow {
  display: flex;
  align-items: flex-start;
  min-height: 1.75rem;
  margin-bottom: var(--mm-space-2xs);
}

.mm-price-card__flag { position: static; }

.mm-price-card__name {
  /* One size and one line-height across all four cards, with two lines of
     space reserved so the prices below them line up as a row. */
  font-size: var(--mm-text-md);
  line-height: 1.3;
  margin: 0;
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
  text-wrap: balance;
}

.mm-price-card__amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: var(--mm-space-2xs);
  font-family: var(--mm-font-heading);
  font-size: var(--mm-text-2xl);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-teal-800);
  line-height: 1.05;
}

.mm-price-card__unit {
  font-family: var(--mm-font-body);
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-regular);
  color: var(--mm-text-muted);
}

.mm-price-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  gap: 0.5rem;
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
}

.mm-price-card__list li {
  display: flex;
  gap: 0.55rem;
  margin: 0;
  min-width: 0;
}

.mm-price-card__list li::before {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--mm-olive-100)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234a5200' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8.4 3 3 6-6.6'/%3E%3C/svg%3E")
    center / 0.72rem no-repeat;
}

.mm-price-card__cta {
  margin-top: auto;
  padding-top: var(--mm-space-sm);
}

.mm-price-card__cta .mm-btn {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Doctor / team
   -------------------------------------------------------------------------- */

.mm-doctor-card {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-md);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  padding: var(--mm-space-md);
  box-shadow: var(--mm-shadow-xs);
  min-width: 0;
  transition: transform var(--mm-duration-base) var(--mm-ease-calm),
    box-shadow var(--mm-duration-base) var(--mm-ease-calm);
}

.mm-doctor-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--mm-shadow-md);
}

.mm-doctor-card__media {
  flex: 0 1 clamp(7rem, 30%, 12rem);
  min-width: 6.5rem;
}

.mm-doctor-card__body {
  flex: 1 1 min(100%, 15rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-2xs);
}

.mm-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--mm-radius-md);
  overflow: hidden;
  background: var(--mm-surface-muted);
}

.mm-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias upward so faces are never cropped at the chin */
  object-position: center 22%;
}

.mm-portrait--round {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.mm-portrait--tall {
  aspect-ratio: 4 / 5;
}

.mm-portrait__initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mm-font-heading);
  font-size: clamp(2rem, 8vw, 3.5rem);
  color: var(--mm-teal-700);
  background: linear-gradient(150deg, var(--mm-teal-050), var(--mm-olive-100));
  letter-spacing: 0.02em;
}

.mm-doctor-card__name {
  font-size: var(--mm-text-xl);
  margin: 0;
}

.mm-doctor-card__role {
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-olive-700);
  margin: 0;
}

.mm-doctor-card__creds {
  font-size: var(--mm-text-xs);
  color: var(--mm-text-muted);
  margin: 0;
}

.mm-doctor-card__text {
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
  margin: 0;
}

/* Doctor profile hero */
.mm-doctor-hero {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-xl);
  align-items: flex-start;
}

.mm-doctor-hero__media {
  flex: 1 1 min(100%, 20rem);
  max-width: 26rem;
  min-width: 0;
}

.mm-doctor-hero__body {
  flex: 1 1 min(100%, 24rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-sm);
}

.mm-doctor-hero__media .mm-portrait {
  box-shadow: var(--mm-shadow-md);
}

/* The profile's own type scale — one step up from the card version */
.mm-doctor-hero__name {
  margin: 0;
}

.mm-doctor-hero__role {
  font-size: var(--mm-text-md);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-olive-700);
  margin: 0;
}

.mm-doctor-hero__lead {
  font-size: var(--mm-text-md);
  color: var(--mm-text-secondary);
  max-width: var(--mm-measure);
  margin: 0;
}

/* Credential / experience list */
.mm-cred-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-sm);
}

.mm-cred-list li {
  display: flex;
  gap: var(--mm-space-sm);
  margin: 0;
  min-width: 0;
  padding-bottom: var(--mm-space-sm);
  border-bottom: 1px solid var(--mm-border);
}

.mm-cred-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mm-cred-list__when {
  flex: 0 0 auto;
  min-width: 6.5rem;
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-olive-700);
  letter-spacing: var(--mm-tracking-wide);
  padding-top: 0.15rem;
}

.mm-cred-list__what {
  flex: 1 1 min(100%, 14rem);
  min-width: 0;
}

.mm-cred-list__what strong {
  display: block;
  color: var(--mm-teal-800);
}

.mm-cred-list__what span {
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
}

/* --------------------------------------------------------------------------
   Accordion (FAQ) — native details/summary, keyboard-friendly by default
   -------------------------------------------------------------------------- */

.mm-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-2xs);
  min-width: 0;
}

.mm-accordion__item {
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md);
  overflow: hidden;
}

.mm-accordion__item[open] {
  border-color: var(--mm-border-primary);
  box-shadow: var(--mm-shadow-xs);
}

.mm-accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-space-sm);
  padding: var(--mm-space-sm) var(--mm-space-md);
  min-height: var(--mm-tap-target);
  font-weight: var(--mm-weight-semibold);
  font-size: var(--mm-text-base);
  color: var(--mm-teal-800);
  cursor: pointer;
  list-style: none;
}

.mm-accordion__q::-webkit-details-marker {
  display: none;
}

.mm-accordion__q::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--mm-duration-base) var(--mm-ease-calm);
  opacity: 0.6;
}

.mm-accordion__item[open] .mm-accordion__q::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.mm-accordion__a {
  padding: 0 var(--mm-space-md) var(--mm-space-md);
  color: var(--mm-text-secondary);
  font-size: var(--mm-text-sm);
  max-width: var(--mm-measure);
}

/* --------------------------------------------------------------------------
   Modal / dialog — bottom sheet on phones, centred dialog above that
   -------------------------------------------------------------------------- */

.mm-modal {
  position: fixed;
  inset: 0;
  z-index: var(--mm-z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}

.mm-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

.mm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--mm-overlay);
  opacity: 0;
  transition: opacity var(--mm-duration-base) var(--mm-ease-soft);
}

.mm-modal.is-open .mm-modal__backdrop {
  opacity: 1;
}

.mm-modal__panel {
  position: relative;
  width: min(38rem, 100%);
  max-height: min(92dvh, 92vh);
  display: flex;
  flex-direction: column;
  background: var(--mm-surface);
  border-radius: var(--mm-radius-xl) var(--mm-radius-xl) 0 0;
  box-shadow: var(--mm-shadow-lg);
  transform: translateY(24px);
  opacity: 0;
  transition: transform var(--mm-duration-base) var(--mm-ease-calm),
    opacity var(--mm-duration-base) var(--mm-ease-soft);
  padding-bottom: var(--mm-safe-bottom);
  overflow: hidden;
}

.mm-modal.is-open .mm-modal__panel {
  transform: translateY(0);
  opacity: 1;
}

.mm-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mm-space-sm);
  padding: var(--mm-space-md) var(--mm-space-md) var(--mm-space-xs);
  flex: none;
}

.mm-modal__title {
  margin: 0;
  font-size: var(--mm-text-xl);
}

.mm-modal__close {
  flex: none;
  width: var(--mm-tap-target);
  height: var(--mm-tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mm-radius-sm);
  border: 1px solid var(--mm-border);
  color: var(--mm-teal-800);
  font-size: 1.25rem;
  line-height: 1;
}

.mm-modal__body {
  padding: 0 var(--mm-space-md) var(--mm-space-md);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}

@media (min-width: 40rem) {
  .mm-modal {
    align-items: center;
    padding: var(--mm-space-md);
  }

  .mm-modal__panel {
    border-radius: var(--mm-radius-xl);
    max-height: min(86dvh, 86vh);
  }
}

/* --------------------------------------------------------------------------
   Tables — only for genuinely tabular content, and never a mobile blocker
   -------------------------------------------------------------------------- */

.mm-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface);
}

.mm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mm-text-sm);
  min-width: 34rem;
}

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

.mm-table thead th {
  background: var(--mm-surface-muted);
  color: var(--mm-teal-800);
  font-weight: var(--mm-weight-semibold);
  white-space: nowrap;
}

.mm-table tbody tr:last-child td {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Notices / disclaimers
   -------------------------------------------------------------------------- */

.mm-note {
  display: flex;
  gap: var(--mm-space-xs);
  padding: var(--mm-space-sm) var(--mm-space-md);
  border-radius: var(--mm-radius-md);
  border: 1px solid var(--mm-border);
  background: var(--mm-surface);
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
  min-width: 0;
}

.mm-note svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
}

.mm-note--emergency {
  background: var(--mm-warning-soft);
  border-color: var(--mm-warning-border);
  color: var(--mm-warning-text);
}

.mm-note--emergency svg {
  color: var(--mm-warning);
}

.mm-note strong {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.mm-site-footer {
  position: relative;
  background: var(--mm-teal-900);
  color: var(--mm-text-on-dark-muted);
  padding-top: var(--mm-space-2xl);
  padding-bottom: calc(var(--mm-space-xl) + var(--mm-safe-bottom));
  font-size: var(--mm-text-sm);
}

/* A single hairline of brand colour where the page meets the footer, so it
   reads as the end of a composition rather than a block bolted underneath. */
.mm-site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--mm-teal-600),
    var(--mm-olive-600) 55%,
    var(--mm-purple-600)
  );
  opacity: 0.85;
}

.mm-site-footer a {
  color: var(--mm-text-on-dark);
  text-decoration: none;
}

.mm-site-footer a:hover {
  color: var(--mm-white);
  text-decoration: underline;
}

.mm-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-xl);
  padding-bottom: var(--mm-space-xl);
  border-bottom: 1px solid var(--mm-on-dark-rule);
}

.mm-footer__brand {
  flex: 1 1 min(100%, 20rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-sm);
  max-width: 26rem;
}

.mm-footer__brand-logo {
  background: var(--mm-on-dark-plate);
  border-radius: var(--mm-radius-md);
  padding: 0.85rem 1.1rem;
  align-self: flex-start;
  max-width: 100%;
  box-shadow: var(--mm-shadow-sm);
}

.mm-footer__brand p {
  max-width: 42ch;
  line-height: var(--mm-leading-normal);
}

.mm-footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-2xs);
}

.mm-footer__contact li {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.mm-footer__cols {
  flex: 2 1 min(100%, 26rem);
  min-width: 0;
  display: grid;
  gap: var(--mm-space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.mm-footer__col h3 {
  font-family: var(--mm-font-body);
  font-size: var(--mm-text-xs);
  letter-spacing: var(--mm-tracking-wider);
  text-transform: uppercase;
  color: var(--mm-olive-300);
  margin: 0 0 var(--mm-space-sm);
  padding-bottom: var(--mm-space-2xs);
  border-bottom: 1px solid var(--mm-on-dark-rule);
}

.mm-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mm-footer__col li {
  margin: 0;
  min-width: 0;
}

.mm-footer__col a {
  display: inline-block;
  min-height: 28px;
  overflow-wrap: anywhere;
}

.mm-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-sm) var(--mm-space-md);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--mm-space-md);
  padding-top: var(--mm-space-md);
  border-top: 1px solid var(--mm-on-dark-rule);
  font-size: var(--mm-text-xs);
  color: var(--mm-on-dark-muted-text);
}

.mm-footer__credit a {
  color: var(--mm-text-on-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  font-weight: var(--mm-weight-medium);
}

.mm-footer__credit a:hover,
.mm-footer__credit a:focus-visible {
  color: var(--mm-olive-300);
}

.mm-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--mm-space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-basis: 100%;
}

@media (min-width: 48em) {
  .mm-footer__legal {
    flex-basis: auto;
  }
}

.mm-footer__legal li {
  margin: 0;
}

.mm-footer__emergency {
  margin-block: var(--mm-space-md);
  background: var(--mm-on-dark-fill-soft);
  border: 1px solid var(--mm-on-dark-border-soft);
  color: var(--mm-text-on-dark);
}

.mm-footer__emergency svg {
  color: var(--mm-olive-300);
}

/* --------------------------------------------------------------------------
   Blog / article
   -------------------------------------------------------------------------- */

.mm-post-card {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-xs);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  overflow: hidden;
  min-width: 0;
  transition: transform var(--mm-duration-base) var(--mm-ease-calm),
    box-shadow var(--mm-duration-base) var(--mm-ease-calm);
}

.mm-post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--mm-shadow-md);
}

.mm-post-card__media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(140deg, var(--mm-teal-050), var(--mm-olive-100));
  overflow: hidden;
}

.mm-post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mm-post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-2xs);
  padding: var(--mm-space-md);
  flex: 1 1 auto;
}

.mm-post-card__meta {
  font-size: var(--mm-text-xs);
  color: var(--mm-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.mm-post-card__title {
  font-size: var(--mm-text-lg);
  margin: 0;
}

.mm-post-card__title a {
  color: inherit;
  text-decoration: none;
}

.mm-post-card__title a:hover {
  color: var(--mm-teal-600);
}

/* The lead image above an article */
.mm-article__lead-image {
  margin-inline: 0;
}

.mm-article__lead-image img {
  width: 100%;
  border-radius: var(--mm-radius-lg);
}

/* Article body */
.mm-article {
  max-width: var(--mm-measure);
  font-size: var(--mm-text-md);
  line-height: var(--mm-leading-relaxed);
  min-width: 0;
}

.mm-article > * + * {
  margin-top: var(--mm-space-sm);
}

.mm-article h2 {
  margin-top: var(--mm-space-lg);
  font-size: var(--mm-text-2xl);
}

.mm-article h3 {
  margin-top: var(--mm-space-md);
}

.mm-article img,
.mm-article figure,
.mm-article iframe,
.mm-article video {
  max-width: 100%;
  border-radius: var(--mm-radius-md);
}

.mm-article figure {
  margin-inline: 0;
}

.mm-article figcaption {
  font-size: var(--mm-text-sm);
  color: var(--mm-text-muted);
  margin-top: var(--mm-space-2xs);
}

.mm-article table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

/* Alignwide/alignfull from the block editor should never cause overflow */
.mm-article .alignwide,
.mm-article .alignfull {
  max-width: 100%;
  margin-inline: 0;
}

.mm-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-2xs);
  margin-top: var(--mm-space-lg);
}

.mm-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--mm-tap-target);
  min-height: var(--mm-tap-target);
  padding: 0 0.75rem;
  border-radius: var(--mm-radius-sm);
  border: 1px solid var(--mm-border);
  background: var(--mm-surface);
  text-decoration: none;
  font-size: var(--mm-text-sm);
}

.mm-pagination .page-numbers.current {
  background: var(--mm-primary);
  border-color: var(--mm-primary);
  color: var(--mm-on-primary);
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

.mm-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-lg);
  counter-reset: mm-step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mm-steps > li {
  flex: 1 1 min(100%, 15rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-2xs);
  margin: 0;
  position: relative;
  padding-top: var(--mm-space-sm);
}

.mm-steps > li::before {
  counter-increment: mm-step;
  content: counter(mm-step, decimal-leading-zero);
  font-family: var(--mm-font-heading);
  font-size: var(--mm-text-xl);
  color: var(--mm-olive-500);
  line-height: 1;
}

.mm-steps > li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--mm-olive-300);
  border-radius: 2px;
}

.mm-steps h3 {
  font-size: var(--mm-text-lg);
  margin: 0;
}

.mm-steps p {
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Multi-step forms — the 90-second self check-in

   Selected states are built from the brand's own soft teal, never a hard dark
   fill: this form asks people about difficult things, and the controls should
   not feel like they are snapping shut on an answer.
   -------------------------------------------------------------------------- */

.mm-progress {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-2xs);
  min-width: 0;
}

.mm-progress__steps {
  display: flex;
  align-items: flex-start;
  gap: var(--mm-space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.mm-progress__step {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
}

/* The dot is the progress bar: a full-width rule that fills as you advance. */
.mm-progress__dot {
  display: block;
  height: 4px;
  border-radius: var(--mm-radius-pill);
  background: var(--mm-border);
  transition: background var(--mm-duration-base) var(--mm-ease-soft);
}

.mm-progress__step.is-done .mm-progress__dot {
  background: var(--mm-teal-300);
}

.mm-progress__step.is-current .mm-progress__dot {
  background: var(--mm-primary);
}

.mm-progress__label {
  font-size: var(--mm-text-xs);
  color: var(--mm-text-muted);
  line-height: 1.35;
}

.mm-progress__step.is-current .mm-progress__label {
  color: var(--mm-teal-800);
  font-weight: var(--mm-weight-semibold);
}

.mm-progress__status {
  margin: 0;
  font-size: var(--mm-text-xs);
  color: var(--mm-text-muted);
}

/* On the narrowest screens the labels stop fitting; the bar and the status
   line carry the information instead. */
@media (max-width: 30rem) {
  .mm-progress__label {
    display: none;
  }
}

.mm-step-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-2xs);
  align-items: center;
}

.mm-step-nav .mm-btn {
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 34rem) {
  .mm-step-nav {
    justify-content: flex-end;
  }

  .mm-step-nav .mm-btn {
    flex: 0 0 auto;
    min-width: 9rem;
  }

  .mm-step-nav [data-mm-step-back] {
    margin-right: auto;
  }
}

/* --- Multi-select choice cards ------------------------------------------ */

.mm-choice-grid {
  display: grid;
  gap: var(--mm-space-2xs);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.mm-choice {
  position: relative;
  min-width: 0;
}

.mm-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.mm-choice__body {
  display: flex;
  align-items: center;
  gap: var(--mm-space-2xs);
  height: 100%;
  min-height: var(--mm-tap-target);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface);
  cursor: pointer;
  transition: border-color var(--mm-duration-fast) var(--mm-ease-soft),
    background var(--mm-duration-fast) var(--mm-ease-soft);
}

.mm-choice__tick {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: var(--mm-radius-xs);
  border: 1.5px solid var(--mm-border-strong);
  /* Transparent, not white: the box takes the colour of whatever it sits on,
     so it reads as an empty control rather than a filled one. */
  background: transparent;
  position: relative;
  transition: border-color var(--mm-duration-fast) var(--mm-ease-soft),
    background var(--mm-duration-fast) var(--mm-ease-soft);
}

.mm-choice__tick::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8.4 3 3 6-6.6'/%3E%3C/svg%3E")
    center / 0.8rem no-repeat;
  opacity: 0;
  transition: opacity var(--mm-duration-fast) var(--mm-ease-soft);
}

.mm-choice__label {
  font-size: var(--mm-text-sm);
  color: var(--mm-text-primary);
  min-width: 0;
}

.mm-choice input:checked + .mm-choice__body {
  border-color: var(--mm-teal-500);
  background: var(--mm-surface-muted);
}

/* teal-600 rather than the near-black teal-800 primary. A checkbox is a state,
   not a call to action, and it should not be the darkest thing on the page. */
.mm-choice input:checked + .mm-choice__body .mm-choice__tick {
  background: var(--mm-teal-600);
  border-color: var(--mm-teal-600);
}

.mm-choice input:checked + .mm-choice__body .mm-choice__tick::after {
  opacity: 1;
}

.mm-choice input:focus-visible + .mm-choice__body {
  outline: 2px solid var(--mm-teal-600);
  outline-offset: 2px;
}

/* --- Frequency scale ---------------------------------------------------- */

.mm-scale {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-2xs);
  padding: var(--mm-space-sm);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface);
  min-width: 0;
}

/* The safety item is set apart — quietly, with the olive rule rather than a
   red alarm. It should not feel like a trap. */
.mm-scale--safety {
  border-color: var(--mm-olive-300);
  background: var(--mm-surface-olive);
}

.mm-scale__question {
  margin: 0;
  font-size: var(--mm-text-base);
  font-weight: var(--mm-weight-medium);
  color: var(--mm-teal-800);
  text-wrap: pretty;
}

.mm-scale__options {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .mm-scale__options {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mm-scale__option {
  position: relative;
  min-width: 0;
}

.mm-scale__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.mm-scale__body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: var(--mm-tap-target);
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-radius-sm);
  background: var(--mm-surface);
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-medium);
  color: var(--mm-text-secondary);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--mm-duration-fast) var(--mm-ease-soft),
    background var(--mm-duration-fast) var(--mm-ease-soft),
    color var(--mm-duration-fast) var(--mm-ease-soft);
}

.mm-scale__option input:checked + .mm-scale__body {
  border-color: var(--mm-teal-600);
  background: var(--mm-primary-soft);
  color: var(--mm-teal-900);
  font-weight: var(--mm-weight-semibold);
}

.mm-scale__option input:focus-visible + .mm-scale__body {
  outline: 2px solid var(--mm-teal-600);
  outline-offset: 2px;
}

.mm-scale.has-error {
  border-color: var(--mm-error);
}

/* --- Completion --------------------------------------------------------- */

.mm-checkin-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mm-space-xs);
  padding: clamp(var(--mm-space-md), 4vw, var(--mm-space-xl));
  background: var(--mm-surface);
  border: 1px solid var(--mm-border-primary);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow-sm);
  min-width: 0;
}

.mm-checkin-done[hidden] {
  display: none !important;
}

.mm-checkin-done__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--mm-success-soft);
  color: var(--mm-success);
}

.mm-checkin-done h2 {
  margin: 0;
  font-size: var(--mm-text-2xl);
}

.mm-checkin-done p {
  margin: 0;
  color: var(--mm-text-secondary);
  max-width: var(--mm-measure);
}

/* An optional offer inside a longer form — visibly a suggestion, not a step */
.mm-offer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-sm);
  align-items: center;
  justify-content: space-between;
  padding: var(--mm-space-sm) var(--mm-space-md);
  border: 1px dashed var(--mm-olive-300);
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface-olive);
  min-width: 0;
}

.mm-offer__body {
  flex: 1 1 min(100%, 18rem);
  min-width: 0;
}

.mm-offer__title {
  margin: 0 0 0.15rem;
  font-size: var(--mm-text-md);
  font-family: var(--mm-font-body);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-teal-800);
}

.mm-offer__text {
  margin: 0;
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
}

.mm-offer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-2xs);
  align-items: center;
  flex: 0 1 auto;
}

@media (max-width: 34rem) {
  .mm-offer__actions,
  .mm-offer__actions .mm-btn {
    width: 100%;
  }
}

/* Qualifications as a scannable list rather than one dense line of commas */
.mm-qual-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-xs);
}

.mm-qual-list li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0;
  min-width: 0;
  padding-left: var(--mm-space-sm);
  border-left: 2px solid var(--mm-olive-300);
}

.mm-qual-list strong {
  color: var(--mm-teal-800);
  font-size: var(--mm-text-base);
}

.mm-qual-list span {
  font-size: var(--mm-text-sm);
  color: var(--mm-text-secondary);
}

/* --------------------------------------------------------------------------
   Service cards — the whole card is the link
   -------------------------------------------------------------------------- */

.mm-card--service {
  position: relative;
}

.mm-card--service .mm-card__title {
  margin: 0;
}

.mm-card__stretch {
  color: inherit;
  text-decoration: none;
}

/* The stretched hit area. The anchor itself stays where it is in the tab
   order and in the accessibility tree; only its click target grows. */
.mm-card__stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}

.mm-card--service:hover .mm-card__title,
.mm-card--service:focus-within .mm-card__title {
  color: var(--mm-teal-600);
}

/* The focus ring belongs on the card, not on the few words of the title */
.mm-card--service:focus-within {
  outline: 2px solid var(--mm-teal-600);
  outline-offset: 3px;
}

.mm-card__stretch:focus-visible {
  outline: none;
}

/* Only genuinely interactive children sit above the stretched layer. The price
   row is text, so raising it would carve a dead strip out of a card the brief
   says must be clickable everywhere. */
.mm-card--service .mm-card__link,
.mm-card--service .mm-card__price a,
.mm-card--service .mm-card__price button {
  position: relative;
  z-index: 2;
}

.mm-card__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mm-space-2xs);
  margin-top: auto;
  padding-top: var(--mm-space-xs);
  border-top: 1px solid var(--mm-border);
  min-width: 0;
}

.mm-card__amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-family: var(--mm-font-heading);
  font-size: var(--mm-text-xl);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-teal-800);
  line-height: 1.1;
  min-width: 0;
}

.mm-card__amount small {
  font-family: var(--mm-font-body);
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-regular);
  color: var(--mm-text-muted);
}

.mm-card__cue {
  flex: none;
  color: var(--mm-olive-600);
  font-size: var(--mm-text-lg);
  line-height: 1;
  transition: transform var(--mm-duration-base) var(--mm-ease-calm);
}

.mm-card--service:hover .mm-card__cue {
  transform: translateX(4px);
}

.mm-fee-panel__amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mm-fee-panel__amount small {
  font-family: var(--mm-font-body);
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-regular);
  color: var(--mm-text-muted);
}

/* --------------------------------------------------------------------------
   Custom select

   The native <select> stays in the DOM as the form control. Until JavaScript
   enhances it, it is styled to match everything else; once enhanced, it is
   taken out of view and the button and listbox below take over.
   -------------------------------------------------------------------------- */

.mm-combo {
  position: relative;
  min-width: 0;
}

.mm-combo.is-enhanced .mm-combo__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.mm-combo__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-space-2xs);
  width: 100%;
  min-height: var(--mm-tap-target);
  padding: 0.7rem 0.9rem;
  font-size: max(16px, var(--mm-text-sm));
  text-align: left;
  color: var(--mm-text-primary);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-radius-sm);
  transition: border-color var(--mm-duration-fast) var(--mm-ease-soft),
    box-shadow var(--mm-duration-fast) var(--mm-ease-soft);
}

.mm-combo__button::after {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.45rem;
  background: currentColor;
  opacity: 0.55;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform var(--mm-duration-base) var(--mm-ease-calm);
}

.mm-combo.is-open .mm-combo__button::after {
  transform: rotate(180deg);
}

.mm-combo__button:hover {
  border-color: var(--mm-teal-300);
}

.mm-combo__button:focus-visible,
.mm-combo.is-open .mm-combo__button {
  outline: none;
  border-color: var(--mm-teal-500);
  box-shadow: var(--mm-shadow-focus);
}

.mm-combo__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-combo__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: min(20rem, 60vh);
  padding: 0.4rem;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-radius-md);
  box-shadow: var(--mm-shadow-lg);
  overflow: hidden;
}

.mm-combo__panel[hidden] {
  display: none !important;
}

.mm-combo__search {
  flex: none;
  width: 100%;
  min-height: 40px;
  padding: 0.5rem 0.7rem;
  font-size: max(16px, var(--mm-text-sm));
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-sm);
  background: var(--mm-background);
  color: inherit;
}

.mm-combo__search:focus-visible {
  outline: none;
  border-color: var(--mm-teal-500);
  box-shadow: var(--mm-shadow-focus);
}

.mm-combo__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.mm-combo__list:focus-visible {
  outline: none;
}

.mm-combo__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-space-2xs);
  margin: 0;
  padding: 0.6rem 0.7rem;
  min-height: var(--mm-tap-target);
  border-radius: var(--mm-radius-sm);
  font-size: var(--mm-text-sm);
  color: var(--mm-text-primary);
  cursor: pointer;
}

.mm-combo__option[hidden] {
  display: none !important;
}

.mm-combo__option.is-active {
  background: var(--mm-surface-muted);
}

.mm-combo__option.is-selected {
  background: var(--mm-primary-soft);
  color: var(--mm-teal-900);
  font-weight: var(--mm-weight-semibold);
}

.mm-combo__meta {
  flex: none;
  font-size: var(--mm-text-xs);
  color: var(--mm-text-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Phone field — country code and number as one control
   -------------------------------------------------------------------------- */

.mm-phone {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-2xs);
  min-width: 0;
}

.mm-phone__country {
  flex: 0 1 12rem;
  min-width: 0;
}

.mm-phone__number {
  flex: 1 1 min(100%, 10rem);
  min-width: 0;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-radius-sm);
  background: var(--mm-surface);
  overflow: hidden;
}

.mm-phone__number:focus-within {
  border-color: var(--mm-teal-500);
  box-shadow: var(--mm-shadow-focus);
}

.mm-phone__dial {
  display: inline-flex;
  align-items: center;
  padding: 0 0.7rem;
  background: var(--mm-surface-muted);
  border-right: 1px solid var(--mm-border);
  color: var(--mm-teal-800);
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mm-phone__number .mm-input {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.mm-phone__number .mm-input:focus {
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   A quietly revealed optional block
   -------------------------------------------------------------------------- */

.mm-reveal-block {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--mm-duration-base) var(--mm-ease-calm),
    opacity var(--mm-duration-base) var(--mm-ease-soft),
    visibility 0s linear var(--mm-duration-base);
  opacity: 0;
  /* Collapsed content leaves the tab order as well as shrinking to nothing —
     otherwise keyboard users tab into fields nobody can see. */
  visibility: hidden;
}

.mm-reveal-block > * {
  overflow: hidden;
  min-height: 0;
}

.mm-reveal-block.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows var(--mm-duration-base) var(--mm-ease-calm),
    opacity var(--mm-duration-base) var(--mm-ease-soft),
    visibility 0s;
}

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

/* --------------------------------------------------------------------------
   Wide service options — one full-width row per service, with its own price
   -------------------------------------------------------------------------- */

.mm-options--stack {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--mm-space-xs);
}

.mm-option--wide {
  flex: 1 1 100%;
}

.mm-option--wide .mm-option__body {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-space-sm);
  padding: var(--mm-space-sm) var(--mm-space-md);
  flex-wrap: wrap;
}

.mm-option__main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 12rem;
  min-width: 0;
}

.mm-option__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  flex: 0 0 auto;
  text-align: right;
  font-family: var(--mm-font-heading);
  font-size: var(--mm-text-md);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-teal-700);
  line-height: 1.15;
  white-space: nowrap;
}

.mm-option__price > span {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}

.mm-option__price small {
  display: block;
  font-family: var(--mm-font-body);
  font-size: var(--mm-text-2xs);
  font-weight: var(--mm-weight-regular);
  color: var(--mm-text-muted);
  white-space: normal;
}

.mm-option--wide input:checked + .mm-option__body .mm-option__price {
  color: var(--mm-teal-800);
}

/* Below the narrowest comfortable row, stack the price under the name so a
   long service name never squeezes the figure into two characters a line. */
@media (max-width: 26.25em) {
  .mm-option--wide .mm-option__body {
    flex-direction: column;
    align-items: flex-start;
  }

  .mm-option__price,
  .mm-option__price > span {
    align-items: flex-start;
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   A value the visitor cannot change here, shown in place of its control
   -------------------------------------------------------------------------- */

.mm-fixed-value {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  min-height: var(--mm-tap-target);
  justify-content: center;
  padding: 0.7rem 0.9rem;
  border: 1px dashed var(--mm-border-strong);
  border-radius: var(--mm-radius-sm);
  background: var(--mm-surface-muted);
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-teal-800);
}

.mm-fixed-value span {
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-regular);
  color: var(--mm-text-secondary);
}

/* --------------------------------------------------------------------------
   What the visitor can do next, inside a confirmation notice
   -------------------------------------------------------------------------- */

.mm-form__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mm-space-2xs);
  margin-top: var(--mm-space-sm);
}

.mm-form__actions-note {
  font-size: var(--mm-text-xs);
  line-height: 1.55;
  color: var(--mm-text-secondary);
}

/* --------------------------------------------------------------------------
   Date picker

   A month grid drawn over a real date input. Without JavaScript the input is
   an ordinary date field and this never appears; with it, the input is taken
   out of the visual flow but kept in the accessibility tree as the value.
   -------------------------------------------------------------------------- */

.mm-datefield__native--enhanced {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mm-cal {
  width: 100%;
  max-width: 22rem;
  padding: var(--mm-space-xs);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface);
}

.mm-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-space-2xs);
  margin-bottom: var(--mm-space-2xs);
}

.mm-cal__month {
  font-family: var(--mm-font-heading);
  font-size: var(--mm-text-md);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-teal-800);
}

.mm-cal__nav {
  width: var(--mm-tap-target);
  height: var(--mm-tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-radius-sm);
  background: var(--mm-surface);
  color: var(--mm-teal-800);
  cursor: pointer;
  transition: background var(--mm-duration-fast) var(--mm-ease-soft),
    border-color var(--mm-duration-fast) var(--mm-ease-soft);
}

.mm-cal__nav:hover:not([disabled]) {
  background: var(--mm-surface-muted);
  border-color: var(--mm-teal-300);
}

.mm-cal__nav[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.mm-cal__dow,
.mm-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.mm-cal__dow span {
  text-align: center;
  padding-bottom: 0.35rem;
  font-size: var(--mm-text-2xs);
  font-weight: var(--mm-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-text-muted);
}

.mm-cal__day {
  /* Square where there is room, but never below the 44px tap target — at
     320px a seven-column grid computes to about 38px on its own. */
  aspect-ratio: 1;
  min-height: var(--mm-tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--mm-radius-sm);
  background: transparent;
  color: var(--mm-text-primary);
  font-size: var(--mm-text-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--mm-duration-fast) var(--mm-ease-soft),
    color var(--mm-duration-fast) var(--mm-ease-soft);
}

.mm-cal__day:hover:not([disabled]) {
  background: var(--mm-surface-muted);
}

.mm-cal__day[disabled] {
  color: var(--mm-neutral-300);
  cursor: not-allowed;
}

.mm-cal__day.is-today {
  border-color: var(--mm-olive-300);
  font-weight: var(--mm-weight-semibold);
}

.mm-cal__day[aria-pressed="true"] {
  background: var(--mm-teal-800);
  border-color: var(--mm-teal-800);
  color: var(--mm-on-primary);
  font-weight: var(--mm-weight-semibold);
}

.mm-cal__blank {
  min-height: var(--mm-tap-target);
}

/* The chosen date and time, echoed back with a way to undo it */
.mm-picked {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: var(--mm-space-xs) var(--mm-space-sm);
  border: 1px solid var(--mm-success-border);
  border-radius: var(--mm-radius-sm);
  background: var(--mm-success-soft);
  font-size: var(--mm-text-sm);
  color: var(--mm-teal-700);
}

.mm-picked strong {
  font-weight: var(--mm-weight-semibold);
}

.mm-picked__clear {
  margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
  .mm-cal__day,
  .mm-cal__nav {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Anxiety screening indicator

   Deliberately calm. The scale runs from the palette's soft teal to its mid
   teal and never reaches a warning colour, because a screening figure is not
   an alarm and a red bar would tell someone something the number does not
   support.
   -------------------------------------------------------------------------- */

.mm-gauge {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-2xs);
  margin-top: var(--mm-space-md);
  padding: var(--mm-space-sm);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface);
  text-align: left;
}

.mm-gauge__label {
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-olive-700);
  margin: 0;
}

.mm-gauge__figure {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--mm-font-heading);
}

.mm-gauge__value {
  font-size: var(--mm-text-3xl);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-teal-800);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mm-gauge__of {
  font-size: var(--mm-text-md);
  color: var(--mm-text-muted);
}

.mm-gauge__band {
  margin-left: auto;
  font-family: var(--mm-font-body);
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-olive-800);
  background: var(--mm-olive-100);
  padding: 0.3rem 0.8rem;
  border-radius: var(--mm-radius-pill);
}

.mm-gauge__scale {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  margin-top: var(--mm-space-2xs);
}

.mm-gauge__tick {
  height: 2rem;
  border-radius: var(--mm-radius-xs);
  background: var(--mm-neutral-200);
  transition: background var(--mm-duration-slow) var(--mm-ease-calm),
    transform var(--mm-duration-slow) var(--mm-ease-calm);
}

.mm-gauge__tick.is-on { background: var(--mm-teal-300); }

.mm-gauge__tick.is-mark {
  background: var(--mm-teal-700);
  transform: scaleY(1.16);
}

.mm-gauge__legend {
  display: flex;
  justify-content: space-between;
  font-size: var(--mm-text-2xs);
  color: var(--mm-text-muted);
}

.mm-gauge__disclaimer {
  margin-top: var(--mm-space-2xs);
  padding: var(--mm-space-xs);
  border-radius: var(--mm-radius-sm);
  background: var(--mm-neutral-100);
  font-size: var(--mm-text-xs);
  line-height: var(--mm-leading-normal);
  color: var(--mm-text-secondary);
}

.mm-gauge__disclaimer strong { color: var(--mm-text-primary); }

.mm-gauge__method {
  font-size: var(--mm-text-2xs);
  line-height: var(--mm-leading-normal);
  color: var(--mm-text-muted);
}

/* Onward offer ------------------------------------------------------------ */

.mm-upsell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-space-sm);
  margin-top: var(--mm-space-sm);
  padding: var(--mm-space-sm);
  border: 1px solid var(--mm-purple-100);
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface-purple);
  text-align: left;
}

.mm-upsell__body {
  flex: 1 1 17rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.mm-upsell__title {
  font-family: var(--mm-font-heading);
  font-size: var(--mm-text-md);
  font-weight: var(--mm-weight-semibold);
  color: var(--mm-purple-700);
}

.mm-upsell__text {
  font-size: var(--mm-text-sm);
  line-height: var(--mm-leading-normal);
  color: var(--mm-text-secondary);
  margin: 0;
}

.mm-btn--accent {
  background: var(--mm-accent);
  color: var(--mm-on-accent);
  border-color: transparent;
}

.mm-btn--accent:hover { background: var(--mm-accent-hover); }

.mm-privacy-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--mm-space-sm);
  padding: var(--mm-space-2xs) var(--mm-space-xs);
  border-radius: var(--mm-radius-pill);
  background: var(--mm-surface-muted);
  color: var(--mm-teal-700);
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-medium);
  text-align: left;
}

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

/* --------------------------------------------------------------------------
   Booklet PDF download

   The button sits inside a card whose title is a link. It is a sibling of that
   link rather than inside it, and it carries `download`, so pressing it saves
   the file instead of opening the article.
   -------------------------------------------------------------------------- */

.mm-pdf {
  display: inline-flex;
  align-items: center;
  gap: var(--mm-space-2xs);
  flex-wrap: wrap;
  /* Above any stretched card link, so the download wins the click. */
  position: relative;
  z-index: 2;
}

.mm-pdf__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--mm-tap-target);
  padding: 0.55rem 1rem;
  border: 1px solid var(--mm-olive-300);
  border-radius: var(--mm-radius-pill);
  background: var(--mm-surface-olive);
  color: var(--mm-olive-800);
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-semibold);
  text-decoration: none;
  transition: background var(--mm-duration-fast) var(--mm-ease-soft),
    border-color var(--mm-duration-fast) var(--mm-ease-soft);
}

.mm-pdf__btn--sm {
  min-height: 2.25rem;
  padding: 0.4rem 0.85rem;
  font-size: var(--mm-text-xs);
}

.mm-pdf__btn:hover {
  background: var(--mm-olive-100);
  border-color: var(--mm-olive-600);
}

.mm-pdf__meta {
  font-size: var(--mm-text-2xs);
  color: var(--mm-text-muted);
}

.mm-post-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mm-space-2xs);
  margin-top: auto;
  padding-top: var(--mm-space-2xs);
}

.mm-article__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mm-space-xs);
}