/* The solutions pages (marketing/pages/solutions_*). */

.solutions-hero__line { top: 0; left: 50%; width: min(1100px, 120vw); translate: -50% 0; opacity: 0.5; }
.solutions-hero__photo { display: block; width: min(420px, 80%); margin-inline: auto; border: 8px solid #fff; border-radius: var(--mk-radius-l); box-shadow: 0 32px 64px rgb(0 0 0 / 0.35); rotate: -2deg; }

.solutions-highlights { margin: 0; padding: 0; list-style: none; text-align: start; }
.solutions-highlights .mk-card { border: 1px solid var(--mk-line-dark); background: rgb(255 255 255 / 0.06); }

.solutions-inline-link { color: inherit; text-decoration-color: var(--mk-teal); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Legacy product shots: square images on white, framed so they sit on any section. */
.solutions-shot { display: block; width: 100%; max-width: 520px; margin-inline: auto; border-radius: var(--mk-radius); background: #fff; box-shadow: var(--mk-shadow-lift); }
.mk-feature--light .mk-figure figcaption { color: var(--mk-ink-muted); }

.solutions-uses,
.solutions-platforms { margin: 0; padding: 0; list-style: none; }
.solutions-uses .mk-card__media img { aspect-ratio: 4 / 5; }
.solutions-platforms .mk-card__media img { aspect-ratio: 1; object-fit: contain; background: #fff; }

.solutions-problem { align-content: start; }
.solutions-old-software { max-width: 460px; margin-inline: auto; }
.solutions-answer { margin-top: clamp(32px, 5vw, 56px); text-align: center; justify-items: center; }

.solutions-xlist { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.solutions-xlist li { position: relative; padding-left: 32px; }
.solutions-xlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fde4e7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23be123c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.solutions-benefits { max-width: 720px; margin-inline: auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px 32px; font-size: 1.125rem; }

.solutions-closing-header { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .solutions-hero__photo { rotate: none; }
}