/* Services and prices: every amount comes from Mariusz's answers (knowledge file, section 6).
   A cool light grey (Stal mixed with white) lets the white cards stand out without a dark block
   right after the dark hero. */
.mm-services {
  --mm-services-gutter: var(--mm-section-gutter);
  background: #eef1f5;
  color: #101827;
  margin-block: 0 !important;
  padding-block: clamp(4rem, 7vw, 6.5rem);
}

.mm-services__inner {
  padding-inline: var(--mm-services-gutter);
}

.mm-services__head {
  margin-bottom: clamp(1.4rem, 2.4vw, 2rem);
  max-width: 52rem;
}

.mm-services__signal {
  background: #f4c542;
  border-radius: 999px;
  display: block;
  height: 4px;
  margin-bottom: 1.2rem;
  width: 56px;
}

.mm-services__title {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0;
}

.mm-services__title-accent {
  color: #315bff;
}

/* Situations: the visitor names their case in one click and lands on the matching card, with the
   right package already chosen. The icon carries the meaning; names stay short enough for phones. */
/* The tiles are a menu, the first card below is the answer to it, so the gap under the whole
   block is clearly bigger than the gaps between the tiles. Without that pause the first card
   reads as one more tile and the visitor scrolls past their own situation. */
.mm-situations {
  margin-bottom: clamp(3rem, 5.6vw, 5rem);
}

.mm-situations__title {
  color: #4b5563;
  font-family: Epilogue, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.2;
  margin: 0 0 0.85rem;
  text-transform: uppercase;
}

.mm-situations__list {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each situation is a row that says "go": icon, name, a short scope line and a chevron on the
   right, the list-row pattern every phone and site uses for "tap to see more". */
.mm-situation {
  align-items: center;
  background: #fff;
  border: 1px solid #d5dde7;
  border-radius: 8px;
  color: #101827;
  column-gap: 0.8rem;
  display: grid;
  grid-template-areas:
    "icon name go"
    "icon desc go";
  grid-template-columns: auto minmax(0, 1fr) auto;
  height: 100%;
  padding: 0.75rem 0.8rem 0.75rem 0.9rem;
  row-gap: 0.1rem;
  text-decoration: none;
  transition: background-color 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out, transform 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

.mm-situation__go {
  color: #4b5563;
  display: flex;
  grid-area: go;
  transition: color 140ms ease-out;
}

.mm-situation__go svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  transition: transform 160ms ease-out;
  width: 20px;
}

/* The picked situation tints blue like a chosen package and stays that way when the visitor
   comes back up; focus turns the chevron blue as well. */
.mm-situation[aria-current="true"] {
  background: #f6f8ff;
  border-color: #315bff;
  box-shadow: 0 0 0 1px #315bff;
}

.mm-situation:focus-visible .mm-situation__go,
.mm-situation[aria-current="true"] .mm-situation__go {
  color: #315bff;
}

.mm-situation__icon {
  grid-area: icon;
  height: 44px;
  width: 44px;
}

.mm-situation__icon svg {
  display: block;
  fill: none;
  height: 100%;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
  width: 100%;
}

.mm-situation__name {
  align-self: end;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  grid-area: name;
  line-height: 1.15;
}

.mm-situation__desc {
  align-self: start;
  color: #5b6675;
  font-size: 0.82rem;
  grid-area: desc;
  line-height: 1.35;
}

/* Emergencies run round the clock; the badge says so before the card does. */
.mm-situation__badge {
  background: #f4c542;
  border-radius: 3px;
  color: #101827;
  font-family: Epilogue, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-left: 0.3rem;
  padding: 0.18rem 0.35rem 0.12rem;
  vertical-align: 0.14em;
}

.mm-situation:focus-visible {
  outline: 3px solid #315bff;
  outline-offset: 3px;
}

.mm-situation:active {
  transform: scale(0.985);
}

/* Laptops: the same five tiles with a slightly smaller icon, so long names keep one line. */
@media (max-width: 1439px) {
  .mm-situation {
    column-gap: 0.7rem;
  }

  .mm-situation__icon {
    height: 40px;
    width: 40px;
  }
}

/* Tablets and small laptops: two columns of rows. */
@media (max-width: 1279px) {
  .mm-situations__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mm-situation {
    column-gap: 0.8rem;
  }

  .mm-situation__icon {
    height: 44px;
    width: 44px;
  }
}

/* Phones: one column of rows, like a settings list, the clearest "tap here" on a phone. */
@media (max-width: 700px) {
  .mm-situations__list {
    gap: 0.45rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .mm-situation {
    column-gap: 0.75rem;
    padding: 0.6rem 0.7rem 0.6rem 0.8rem;
  }

  .mm-situation__icon {
    height: 34px;
    width: 34px;
  }

  .mm-situation__name {
    font-size: 1.02rem;
  }

  .mm-situation__desc {
    font-size: 0.8rem;
    line-height: 1.3;
  }
}

/* Icon sprite: symbols only, never rendered on its own. */
.mm-icons {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}

/* Two cards per row on tablets and small laptops, one column on phones; computers give each service
   its own row (see the 1280px rule below). */
.mm-services__grid {
  align-items: stretch;
  display: grid;
  gap: clamp(1rem, 1.8vw, 2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Card */
/* A hairline one tone darker than the grey keeps the card edge crisp where the soft shadow fades
   (phones in daylight, weak screens), yet stays quieter than the package rows inside. */
.mm-service {
  background: #fff;
  border: 1px solid #ccd5e0;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgb(16 24 39 / 5%), 0 14px 32px -18px rgb(16 24 39 / 24%);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  scroll-margin-top: 1rem;
  transition: border-color 320ms ease-out, box-shadow 320ms ease-out, transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Focus moves to a picked card; its blue light below already shows where the visitor is. */
.mm-service:focus {
  outline: none;
}

/* The service being read (crossing the middle of the screen, or just picked) lights its edge in
   brand blue with a soft halo and, on computers, rises a touch. The others stay as they are, so
   the services never blur together; leaving the middle, a card eases back. */
.mm-service.is-focused {
  border-color: #315bff;
  box-shadow: 0 0 0 1px #315bff, 0 0 0 6px rgb(49 91 255 / 12%), 0 28px 56px -28px rgb(16 24 39 / 38%);
}

/* Phones: a picked card starts at the top of the screen and fills it. */
@media (max-width: 700px) {
  .mm-service {
    scroll-margin-top: 0.5rem;
  }
}

/* Without the script, a card reached from the situations greets the visitor with a short blue ring. */
.mm-service:target {
  animation: mm-service-arrive 2s ease-out;
}

@keyframes mm-service-arrive {
  0%,
  40% {
    box-shadow: 0 0 0 3px #315bff, 0 14px 32px -18px rgb(16 24 39 / 24%);
  }

  100% {
    box-shadow: 0 1px 2px rgb(16 24 39 / 5%), 0 14px 32px -18px rgb(16 24 39 / 24%);
  }
}

.mm-service__cover {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 78% 28%, rgb(49 91 255 / 24%), transparent 52%),
    linear-gradient(160deg, #0d2747 0%, #071a30 72%);
  color: #fff;
  display: grid;
  overflow: hidden;
  position: relative;
}

/* Temporary cover art until the owner's loops arrive: the service icon alone, centred, since the
   cover carries no text. */
.mm-service__art {
  fill: none;
  height: clamp(84px, 9vw, 132px);
  inset: 0;
  margin: auto;
  position: absolute;
  stroke: #f4c542;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  width: clamp(84px, 9vw, 132px);
}

/* One film per card: a still frame loads lazily, the film fades in over it once it plays. */
.mm-service__still,
.mm-service__video {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.mm-service__video {
  opacity: 0;
  transition: opacity 240ms ease-out;
}

.mm-service__video.is-playing {
  opacity: 1;
}

/* AI visualisations are labelled so they never pass for Mariusz's own jobs. */
.mm-service__media-note {
  background: rgb(7 26 48 / 64%);
  border-radius: 3px;
  color: #fff;
  font-family: Epilogue, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  left: clamp(0.8rem, 1.2vw, 1.1rem);
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0;
  padding: 0.4rem 0.55rem 0.34rem;
  position: absolute;
  text-transform: uppercase;
  top: clamp(0.8rem, 1.2vw, 1.1rem);
  z-index: 2;
}

.mm-service__media-toggle {
  align-items: center;
  background: rgb(7 26 48 / 64%);
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  height: 42px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: clamp(0.8rem, 1.2vw, 1.1rem);
  top: clamp(0.8rem, 1.2vw, 1.1rem);
  transition: background-color 150ms ease-out;
  width: 42px;
  z-index: 2;
}

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

/* Pause icon: two bars; play icon: a triangle. */
.mm-service__media-toggle::before {
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
  box-sizing: border-box;
  content: "";
  height: 13px;
  width: 11px;
}

.mm-service__media-toggle[data-state="paused"]::before {
  border-color: transparent transparent transparent currentColor;
  border-style: solid;
  border-width: 7.5px 0 7.5px 12px;
  height: 0;
  margin-left: 4px;
  width: 0;
}

.mm-service__media-toggle:focus-visible {
  outline: 3px solid #f4c542;
  outline-offset: 2px;
}

/* The service name heads its text column, not the film: a situation label with the brand's
   yellow signal, then the name set large, so it is clear at once what the card offers. */
.mm-service__heading {
  display: grid;
  gap: 0.4rem;
}

.mm-service__audience {
  align-items: center;
  color: #315bff;
  display: flex;
  font-family: Epilogue, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  gap: 0.55rem;
  letter-spacing: 0.09em;
  line-height: 1.2;
  margin: 0;
  text-transform: uppercase;
}

.mm-service__audience::before {
  background: #f4c542;
  border-radius: 999px;
  content: "";
  flex: none;
  height: 3px;
  width: 22px;
}

.mm-service__title {
  color: #101827;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: clamp(1.6rem, 2.3vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

.mm-service__body {
  container: mm-card / inline-size;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.1rem, 1.5vw, 1.4rem) clamp(1.1rem, 1.6vw, 1.5rem) 0;
}

/* Every card closes the same way: Mariusz's promises, then the call. On narrow cards this simply
   continues the body; the growing body keeps it at the bottom of cards stretched in a row. */
.mm-service__close {
  container: mm-card / inline-size;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem clamp(1.1rem, 1.6vw, 1.5rem) clamp(1.2rem, 1.6vw, 1.5rem);
}

.mm-service__action {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mm-service__lead {
  color: #374151;
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}

/* Packages: every option, its short scope and its price are visible at once, so nobody has to
   guess that there is more to see. Native radios drive the choice; the indicator lights up like a
   status LED and the chosen package's icon lights up with it. */
.mm-plans {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.mm-plans__label,
.mm-service__label,
.mm-promise__label {
  color: #667180;
  font-family: Epilogue, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.2;
  margin: 0 0 0.55rem;
  padding: 0;
  text-transform: uppercase;
}

/* The legend is an instruction, not a label: dark and in sentence case, so the rows below read as a choice. */
.mm-plans legend {
  color: #101827;
  font-family: Epilogue, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.6rem;
  padding: 0;
}

.mm-plans__list {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mm-plan {
  align-items: center;
  background: #fff;
  border: 1px solid #d5dde7;
  border-radius: 6px;
  column-gap: 0.75rem;
  display: grid;
  grid-template-areas:
    "radio icon text"
    "radio icon price";
  grid-template-columns: auto auto minmax(0, 1fr);
  padding: 0.7rem 0.85rem;
  position: relative;
  row-gap: 0.2rem;
  transition: background-color 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out, transform 100ms ease-out;
}

/* A row the visitor can pick stands up from the card like a button: a firmer edge and a shadow. */
label.mm-plan {
  border-color: #c3ceda;
  box-shadow: 0 1px 2px rgb(16 24 39 / 10%), 0 3px 8px -6px rgb(16 24 39 / 30%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Rows without a choice: the same row, only as a price list. */
.mm-plans--static .mm-plan {
  background: #fbfcfd;
  border-color: #e3e8ee;
  grid-template-areas:
    "icon text"
    "icon price";
  grid-template-columns: auto minmax(0, 1fr);
}

.mm-plan__input {
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

/* The ring looks like a real control: white, a dark edge, a shade inside, and big enough to notice. */
.mm-plan__radio {
  background: #fff;
  border: 2px solid #6f7d90;
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgb(16 24 39 / 14%);
  grid-area: radio;
  height: 22px;
  position: relative;
  transition: border-color 140ms ease-out, box-shadow 160ms ease-out;
  width: 22px;
}

.mm-plan__radio::after {
  background: #315bff;
  border-radius: 50%;
  content: "";
  inset: 4px;
  position: absolute;
  transform: scale(0);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.mm-plan__icon {
  align-items: center;
  background: #eef2f7;
  border-radius: 8px;
  color: #101827;
  display: flex;
  grid-area: icon;
  height: 40px;
  justify-content: center;
  transition: background-color 160ms ease-out, color 160ms ease-out;
  width: 40px;
}

.mm-plan__icon svg,
.mm-promise__list svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.mm-plan__icon svg {
  height: 22px;
  width: 22px;
}

.mm-plan__text {
  display: grid;
  gap: 0.1rem;
  grid-area: text;
  min-width: 0;
}

.mm-plan__name {
  color: #101827;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.15;
}

.mm-plan__desc {
  color: #5b6675;
  font-size: 0.85rem;
  line-height: 1.35;
}

/* The price informs the choice without shouting over it. */
.mm-plan__price {
  color: #101827;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  grid-area: price;
  line-height: 1.2;
  white-space: nowrap;
}

.mm-plan__from {
  color: #667180;
  font-family: Epilogue, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
}

.mm-plan__price--quote {
  color: #5b6675;
  font-family: Epilogue, sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
}

.mm-plan__input:checked ~ .mm-plan__radio {
  border-color: #315bff;
  box-shadow: 0 0 0 4px rgb(49 91 255 / 15%);
}

.mm-plan__input:checked ~ .mm-plan__radio::after {
  transform: scale(1);
}

.mm-plan__input:checked ~ .mm-plan__icon {
  background: #315bff;
  color: #fff;
}

.mm-plan:has(.mm-plan__input:checked) {
  background: #f6f8ff;
  border-color: #315bff;
  box-shadow: 0 0 0 1px #315bff;
}

.mm-plan__input:focus-visible ~ .mm-plan__radio {
  outline: 3px solid #315bff;
  outline-offset: 3px;
}

@supports selector(:has(*)) {
  .mm-plan__input:focus-visible ~ .mm-plan__radio {
    outline: none;
  }

  .mm-plan:has(.mm-plan__input:focus-visible) {
    outline: 3px solid #315bff;
    outline-offset: 3px;
  }
}

/* Pressing already tints the row the way the picked one looks. */
label.mm-plan:active {
  background: #f6f8ff;
  border-color: #315bff;
  transform: scale(0.99);
}

.mm-plans__note {
  color: #667180;
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0.6rem 0 0;
}

/* Wider cards keep each package on one line, with the price aligned on the right. */
@container mm-card (min-width: 430px) {
  .mm-plan {
    grid-template-areas: "radio icon text price";
    grid-template-columns: auto auto minmax(0, 1fr) auto;
  }

  .mm-plans--static .mm-plan {
    grid-template-areas: "icon text price";
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .mm-plan__price {
    text-align: right;
  }
}

@media (hover: hover) and (pointer: fine) {
  /* Under the pointer a row turns towards blue, and its empty ring shows a faint dot: click, and it fills. */
  label.mm-plan:hover {
    background: #f9faff;
    border-color: #315bff;
    box-shadow: 0 3px 10px -4px rgb(49 91 255 / 35%);
  }

  label.mm-plan:hover > .mm-plan__input:not(:checked) ~ .mm-plan__radio {
    border-color: #315bff;
    box-shadow: 0 0 0 4px rgb(49 91 255 / 10%);
  }

  label.mm-plan:hover > .mm-plan__input:not(:checked) ~ .mm-plan__radio::after {
    opacity: 0.4;
    transform: scale(0.6);
  }

  label.mm-plan:has(.mm-plan__input:checked):hover {
    background: #f6f8ff;
    border-color: #315bff;
    box-shadow: 0 0 0 1px #315bff;
  }

  .mm-service__cta:hover {
    background: #0c4fe6;
    transform: translateY(-1px);
  }

  .mm-service__media-toggle:hover {
    background: rgb(7 26 48 / 88%);
  }

  .mm-situation:hover {
    background: #f6f8ff;
    border-color: #315bff;
    box-shadow: 0 10px 22px -16px rgb(16 24 39 / 45%);
    transform: translateY(-1px);
  }

  .mm-situation:hover .mm-situation__go {
    color: #315bff;
  }

  /* The chevron leans the way the visitor is about to go. */
  .mm-situation:hover .mm-situation__go svg {
    transform: translateX(2px);
  }
}

/* What the chosen package includes; without :has() support every package is listed in turn. */
.mm-service__variants {
  border-top: 1px solid #dce3ea;
  padding-top: 1rem;
}

.mm-service__variant + .mm-service__variant {
  margin-top: 1.1rem;
}

.mm-service__variant-name {
  color: #101827;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.3rem;
}

@supports selector(:has(*)) {
  .mm-service__variant,
  .mm-service__variant-name {
    display: none;
  }

  .mm-service__variant + .mm-service__variant {
    margin-top: 0;
  }

  .mm-service:has(.mm-plan:nth-child(1) > .mm-plan__input:checked) .mm-service__variant:nth-child(1),
  .mm-service:has(.mm-plan:nth-child(2) > .mm-plan__input:checked) .mm-service__variant:nth-child(2),
  .mm-service:has(.mm-plan:nth-child(3) > .mm-plan__input:checked) .mm-service__variant:nth-child(3),
  .mm-service:has(.mm-plan:nth-child(4) > .mm-plan__input:checked) .mm-service__variant:nth-child(4) {
    display: block;
  }
}

.mm-service__variant-note {
  color: #667180;
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0.65rem 0 0;
}

/* Mariusz's standing promises for this kind of job, right before the call to action. */
.mm-promise {
  background: #f4f6f9;
  border-radius: 6px;
  padding: 0.85rem 0.95rem 0.95rem;
}

.mm-promise__list {
  display: grid;
  gap: 0.6rem 1rem;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mm-promise__list li {
  align-items: flex-start;
  color: #1f2937;
  display: flex;
  font-size: 0.87rem;
  gap: 0.55rem;
  line-height: 1.35;
}

.mm-promise__list svg {
  color: #101827;
  flex: none;
  height: 20px;
  margin-top: -1px;
  width: 20px;
}

@container mm-card (min-width: 340px) {
  .mm-promise__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mm-service__scope {
  display: grid;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mm-service__scope li {
  color: #1f2937;
  font-size: 0.95rem;
  line-height: 1.5;
  padding-left: 1.15rem;
  position: relative;
}

.mm-service__scope li::before {
  background: #f4c542;
  border-radius: 1px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 0.74em;
  width: 0.6rem;
}

.mm-service__variant .mm-service__label {
  margin: 0 0 0.55rem;
}

/* In the flex body the label hugs its list; inside a variant it keeps normal spacing. */
.mm-service__body > .mm-service__label {
  margin-bottom: -0.45rem;
}

.mm-service__explain {
  color: #374151;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

.mm-service__quote {
  color: #5b6675;
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
}

.mm-service__quote strong {
  color: #101827;
  display: block;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}

.mm-service__hint {
  border-left: 3px solid #f4c542;
  color: #374151;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  padding-left: 0.75rem;
}

.mm-service__reference {
  border-left: 3px solid #f4c542;
  color: #101827;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  padding-left: 0.75rem;
}

/* Card action: the same filled blue call button as in the hero, sized for a card, one line wide. */
.mm-service__cta {
  align-items: center;
  align-self: stretch;
  background: #175dff;
  border-radius: 8px;
  color: #fff;
  display: flex;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  gap: 0.65rem;
  justify-content: center;
  line-height: 1;
  margin-top: auto;
  min-height: 58px;
  padding: 0.8rem 1.25rem;
  text-decoration: none;
  transition: background-color 160ms ease-out, transform 140ms ease-out;
  white-space: nowrap;
}

.mm-service__cta svg {
  fill: currentColor;
  flex: 0 0 auto;
  height: 22px;
  width: 22px;
}

/* A card whose service has its own page links to it under the call: the call stays the main
   action, the link is for a visitor who wants the whole story first. */
.mm-service__more-link {
  align-items: center;
  align-self: center;
  color: #175dff;
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 600;
  gap: 0.15rem;
  line-height: 1.3;
  min-height: 32px;
  text-decoration: none;
}

.mm-service__more-link svg {
  fill: none;
  flex: none;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  transition: transform 160ms ease-out;
  width: 18px;
}

.mm-service__more-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mm-service__more-link:hover svg {
  transform: translateX(2px);
}

.mm-service__more-link:focus-visible {
  border-radius: 4px;
  outline: 3px solid #315bff;
  outline-offset: 3px;
}

.mm-service__cta:active {
  transform: scale(0.985);
}

.mm-service__cta:focus-visible {
  outline: 3px solid #315bff;
  outline-offset: 3px;
}

/* Phones: every millimetre counts. The intro line under the cover repeats the title or the promise
   strip, so narrow cards go straight from the title to the packages. */
@container mm-card (max-width: 460px) {
  .mm-service__lead {
    display: none;
  }
}

/* The narrowest cards keep the number on one line. */
@container mm-card (max-width: 300px) {
  .mm-service__cta {
    font-size: 1.15rem;
    padding-inline: 0.75rem;
  }
}

/* Computers: one service per row. The film fills the left and grows with the packages beside it
   (its sides crop a little on laptops), and a band underneath closes with the promises and the call.
   The whole offer and its button fit on one screen, and only one film sits in the eye line. Below
   1280px the package rows would break into two lines and the film would lose too much of its sides. */
@media (min-width: 1280px) {
  .mm-services__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Each card is its own layer stack, so the veil below covers its film and labels too. */
  .mm-service {
    display: grid;
    grid-template-areas:
      "cover body"
      "close close";
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    position: relative;
    z-index: 0;
  }

  /* Every other service mirrors: film on the right, packages and the call on the left, so six
     rows never read as one repeated block. */
  .mm-service:nth-child(even) {
    grid-template-areas:
      "body cover"
      "close close";
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  /* The lit card rises a touch; rows have room around them, phones and tablets do not. */
  .mm-service.is-focused {
    transform: scale(1.015);
    z-index: 1;
  }

  /* The width stays the column's; only the height grows, so the film crops instead of widening. */
  .mm-service__cover {
    align-self: stretch;
    grid-area: cover;
    width: 100%;
  }

  .mm-service__body {
    align-self: center;
    grid-area: body;
    padding: clamp(1.5rem, 2.2vw, 2.25rem);
  }

  /* The band follows its row: promises under the film, the call under the packages. */
  .mm-service__close {
    align-items: center;
    background: #f4f6f9;
    border-top: 1px solid #e3e8ee;
    display: grid;
    gap: 0;
    grid-area: close;
    grid-template-areas: "promise action";
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    padding: 0;
  }

  .mm-service:nth-child(even) .mm-service__close {
    grid-template-areas: "action promise";
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .mm-service__close .mm-promise {
    background: none;
    border-radius: 0;
    container: mm-promise / inline-size;
    grid-area: promise;
    padding: 1.1rem clamp(1.5rem, 2.2vw, 2.25rem);
  }

  .mm-service__action {
    gap: 0.75rem;
    grid-area: action;
    padding: 1.1rem clamp(1.5rem, 2.2vw, 2.25rem);
  }

  /* Spotlight: while a service holds the middle of the screen, everything around it dims a little,
     like the sun going down, and brightens again once the list is left. The same 30% navy veil
     lies over the other cards, the situation tiles and, as a darker grey, the section itself.
     Only opacity, one background colour and one small filter change, so it costs next to nothing. */
  .mm-services {
    transition: background-color 420ms ease-out;
  }

  .mm-services:has(.mm-service.is-focused) {
    background-color: #aab2bd;
  }

  .mm-situation {
    position: relative;
  }

  .mm-service::after,
  .mm-situation::after {
    background: rgb(7 26 48 / 30%);
    border-radius: inherit;
    content: "";
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 420ms ease-out;
    z-index: 5;
  }

  .mm-situation::after {
    inset: -1px;
  }

  .mm-services:has(.mm-service.is-focused) .mm-service:not(.is-focused)::after,
  .mm-services:has(.mm-service.is-focused) .mm-situation::after {
    opacity: 1;
  }
}

/* Laptops: the column beside the film is narrow, and every line there makes the film crop more.
   The name is set a size down and the intro line drops out, since the name already says it. */
@media (min-width: 1280px) and (max-width: 1679px) {
  .mm-service__body {
    gap: 0.85rem;
  }

  .mm-service__lead {
    display: none;
  }

  .mm-service__title {
    font-size: 1.75rem;
  }
}

/* A wide band lays the promises out in one line. */
@container mm-promise (min-width: 48rem) {
  .mm-promise__list {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-template-columns: none;
  }
}

@media (max-width: 700px) {
  .mm-services__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Phones: the card is the film, the title, the packages and the call; what a package includes
     and the promises fold into one row underneath (services-compact.js builds it). */
  .mm-service__more {
    border-top: 1px solid #e3e8ef;
    margin: 0 clamp(1.1rem, 1.6vw, 1.5rem);
    padding-bottom: 0.4rem;
  }

  .mm-service__more-summary {
    align-items: center;
    color: #101827;
    cursor: pointer;
    display: flex;
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    justify-content: space-between;
    list-style: none;
    min-height: 48px;
    padding: 0.6rem 0;
  }

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

  .mm-service__more-summary::after {
    border-bottom: 2px solid #315bff;
    border-right: 2px solid #315bff;
    content: "";
    height: 9px;
    margin-right: 4px;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 160ms ease-out;
    width: 9px;
  }

  .mm-service__more[open] > .mm-service__more-summary::after {
    transform: rotate(-135deg) translateY(-2px);
  }

  .mm-service__more-summary:focus-visible {
    border-radius: 6px;
    outline: 3px solid #315bff;
    outline-offset: 2px;
  }

  .mm-service__more > :not(summary) {
    margin-top: 0.9rem;
  }

  .mm-service__more > .mm-service__scope {
    margin-top: 0.4rem;
  }

  .mm-service__more > .mm-promise {
    margin-bottom: 0.8rem;
  }

  .mm-service[data-mm-compact] .mm-service__close {
    padding-bottom: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-plan,
  .mm-plan__radio,
  .mm-plan__radio::after,
  .mm-plan__icon,
  .mm-service__cta,
  .mm-service__media-toggle,
  .mm-service__video,
  .mm-situation,
  .mm-situation__go,
  .mm-situation__go svg {
    transition: none;
  }

  .mm-service.is-focused,
  label.mm-plan:active,
  .mm-service__cta:active,
  .mm-situation:active,
  .mm-situation:hover,
  .mm-situation:hover .mm-situation__go svg {
    transform: none;
  }
}

@media (forced-colors: active) {
  .mm-plan__radio::after {
    background: CanvasText;
  }

  .mm-plan:has(.mm-plan__input:checked) {
    border-color: Highlight;
  }
}