:root {
  /* --- Brand primary scale --- */
  --sw-primary-100: #e3f4f7;
  --sw-primary-200: #c7e9ef;
  --sw-primary-300: #abdee7;
  --sw-primary-400: #8fd3df;
  --sw-primary-500: #09a5c2; /* brand primary */
  --sw-primary-600: #0894af;
  --sw-primary-700: #078a9c;
  --sw-primary-800: #067f89;
  --sw-primary-900: #057576;
  /* --- Semantic colors --- */
  --sw-primary: #09a5c2;
  --sw-secondary: #808390;
  --sw-success: #28c76f;
  --sw-info: #00bad1;
  --sw-warning: #ff9f43;
  --sw-danger: #ff4c51;
  --sw-light: #dfdfe3;
  --sw-dark: #4b4b4b;
  /* --- Neutral / gray scale --- */
  --sw-gray-100: #eaeaec;
  --sw-gray-200: #d5d5d8;
  --sw-gray-300: #c1bfc5;
  --sw-gray-400: #acaab1;
  --sw-gray-500: #97959e;
  --sw-gray-600: #82808b;
  --sw-gray-700: #6d6b77;
  --sw-gray-800: #595564;
  --sw-gray-900: #444050;
  /* --- Surfaces & text --- */
  --sw-body-bg: #f8f7fa;
  --sw-surface: #ffffff; /* cards / "paper" */
  --sw-text-heading: #2f2b3d;
  --sw-text-body: #6d6b77;
  --sw-text-muted: #acaab1;
  --sw-text-disabled: rgba(47, 43, 61, 0.4);
  --sw-border: #d1d0d4;
  --sw-divider: rgba(47, 43, 61, 0.12);
  /* --- Typography --- */
  --sw-font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  --sw-font-mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Courier New", monospace;
  --sw-font-size-root: 16px;
  --sw-font-size-xs: 0.6875rem; /* 11px */
  --sw-font-size-sm: 0.8125rem; /* 13px */
  --sw-font-size-base: 0.9375rem; /* 15px */
  --sw-font-size-lg: 1rem; /* 16px */
  --sw-font-size-xl: 1.1875rem; /* 19px */
  --sw-h1: 2.875rem; /* 46px */
  --sw-h2: 2.375rem; /* 38px */
  --sw-h3: 1.75rem; /* 28px */
  --sw-h4: 1.5rem; /* 24px */
  --sw-h5: 1.125rem; /* 18px */
  --sw-h6: 0.9375rem; /* 15px */
  --sw-fw-light: 300;
  --sw-fw-normal: 400;
  --sw-fw-medium: 500; /* headings, buttons, nav */
  --sw-fw-semibold: 600;
  --sw-fw-bold: 700;
  --sw-fw-extrabold: 800;
  --sw-line-height-base: 1.375;
  --sw-line-height-sm: 1.125;
  --sw-line-height-lg: 1.625;
  --sw-line-height-heading: 1.37;
  /* --- Spacing (base = 1rem / 16px) --- */
  --sw-space-1: 0.125rem; /* 2px  */
  --sw-space-2: 0.25rem; /* 4px  */
  --sw-space-3: 0.375rem; /* 6px  */
  --sw-space-4: 0.5rem; /* 8px  */
  --sw-space-5: 0.75rem; /* 12px */
  --sw-space-6: 1rem; /* 16px */
  --sw-space-7: 1.25rem; /* 20px */
  --sw-space-8: 1.5rem; /* 24px */
  --sw-space-9: 1.75rem; /* 28px */
  --sw-space-10: 2rem; /* 32px */
  --sw-space-11: 2.5rem; /* 40px */
  --sw-space-12: 3rem; /* 48px */
  --sw-gutter: 1.5rem; /* grid gutter / container padding */
  /* --- Border radius --- */
  --sw-radius-xs: 0.125rem; /* 2px  */
  --sw-radius-sm: 0.25rem; /* 4px  */
  --sw-radius: 0.375rem; /* 6px  (default) */
  --sw-radius-lg: 0.5rem; /* 8px  */
  --sw-radius-xl: 0.625rem; /* 10px */
  --sw-radius-pill: 50rem;
  /* --- Shadows --- */
  --sw-shadow-xs: 0 1px 6px 0 rgba(47, 43, 61, 0.10);
  --sw-shadow-sm: 0 2px 8px 0 rgba(47, 43, 61, 0.12);
  --sw-shadow: 0 3px 12px 0 rgba(47, 43, 61, 0.14);
  --sw-shadow-lg: 0 4px 18px 0 rgba(47, 43, 61, 0.16);
  --sw-shadow-xl: 0 5px 30px 0 rgba(47, 43, 61, 0.18);
  /* --- Breakpoints (container max-widths) --- */
  --sw-bp-sm: 540px;
  --sw-bp-md: 720px;
  --sw-bp-lg: 960px;
  --sw-bp-xl: 1140px;
  --sw-bp-xxl: 1440px;
}

/* --- Dark theme overrides --- */
[data-bs-theme=dark] {
  --sw-body-bg: #25293c;
  --sw-surface: #2f3349; /* cards */
  --sw-light: #44475b;
  --sw-dark: #d7d8de;
  --sw-text-heading: #d7d8de;
  --sw-text-body: #b6bee3;
  /* brand + semantic hues are shared across themes */
}

/* ============================================================
   Base
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--sw-font-size-root);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sw-font-sans);
  font-size: 1rem;
  line-height: var(--sw-line-height-lg);
  color: var(--sw-text-body);
  background-color: var(--sw-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sw-space-6);
  color: var(--sw-text-heading);
  font-weight: var(--sw-fw-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

p {
  margin: 0 0 var(--sw-space-6);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--sw-primary-700);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--sw-primary-900);
}

img, svg {
  max-width: 100%;
}

img {
  height: auto;
}

ul, ol {
  margin: 0 0 var(--sw-space-6);
  padding-left: 1.25rem;
}

li {
  margin-bottom: var(--sw-space-3);
}

code {
  font-family: var(--sw-font-mono);
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  border-radius: var(--sw-radius-sm);
  background: var(--sw-gray-100);
  color: var(--sw-text-heading);
}

:focus-visible {
  outline: 2px solid var(--sw-primary-500);
  outline-offset: 2px;
  border-radius: var(--sw-radius-sm);
}

.mk-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mk-skip-link {
  position: absolute;
  top: -3rem;
  left: var(--sw-space-6);
  z-index: 100;
  padding: var(--sw-space-4) var(--sw-space-6);
  background: var(--sw-primary-500);
  color: #fff;
  border-radius: 0 0 var(--sw-radius) var(--sw-radius);
  transition: top 0.15s ease;
}

.mk-skip-link:focus {
  top: 0;
  color: #fff;
}

/* ============================================================
   Layout primitives
   ============================================================ */
.mk-container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--sw-gutter);
}

.mk-container--narrow {
  max-width: 820px;
}

.mk-section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.mk-section--tight {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.mk-section--pagehead {
  padding-block: clamp(2.75rem, 5.5vw, 4.25rem);
}

.mk-section--tinted {
  background: var(--sw-body-bg);
}

.mk-section--ink {
  background: var(--sw-text-heading);
  color: rgba(255, 255, 255, 0.75);
}

.mk-section--ink h2,
.mk-section--ink h3 {
  color: #fff;
}

.mk-grid {
  display: grid;
  gap: var(--sw-space-8);
}

@media (min-width: 640px) {
  .mk-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .mk-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .mk-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 640px) and (max-width: 899px) {
  .mk-grid--3, .mk-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.mk-split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .mk-split {
    grid-template-columns: 1fr 1fr;
  }
  .mk-split--flip > *:first-child {
    order: 2;
  }
}
.mk-stack > * + * {
  margin-top: var(--sw-space-6);
}

.mk-center {
  text-align: center;
}

.mk-center .mk-section-head {
  margin-inline: auto;
}

/* ============================================================
   Type scale
   ============================================================ */
.mk-display {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: var(--sw-fw-extrabold);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.mk-h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

.mk-h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.mk-h4 {
  font-size: 1.125rem;
  margin-bottom: var(--sw-space-4);
}

.mk-lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--sw-text-body);
}

.mk-section--ink .mk-lead {
  color: rgba(255, 255, 255, 0.72);
}

.mk-eyebrow {
  display: inline-block;
  margin-bottom: var(--sw-space-5);
  font-size: var(--sw-font-size-sm);
  font-weight: var(--sw-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sw-primary-700);
}

.mk-section--ink .mk-eyebrow {
  color: var(--sw-primary-400);
}

.mk-section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.mk-muted {
  color: var(--sw-text-muted);
}

.mk-accent {
  color: var(--sw-primary-600);
}

.mk-gradient-text {
  background: linear-gradient(96deg, var(--sw-primary-600), #84d2e1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   Buttons
   ============================================================ */
.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sw-space-4);
  padding: 0.8125rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--sw-radius-lg);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: var(--sw-fw-semibold);
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

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

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

.mk-btn .mk-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.mk-btn--primary {
  background: var(--sw-primary-500);
  color: #fff;
  box-shadow: 0 1px 2px rgba(47, 43, 61, 0.12);
}

.mk-btn--primary:hover {
  background: #07768b;
  color: #fff;
  box-shadow: var(--sw-shadow);
}

.mk-btn--ghost {
  background: transparent;
  border-color: var(--sw-border);
  color: var(--sw-text-heading);
}

.mk-btn--ghost:hover {
  border-color: var(--sw-primary-500);
  color: var(--sw-primary-700);
  background: var(--sw-primary-100);
}

.mk-btn--on-ink {
  background: #fff;
  color: var(--sw-text-heading);
}

.mk-btn--on-ink:hover {
  background: var(--sw-primary-100);
  color: var(--sw-text-heading);
}

.mk-btn--ghost-on-ink {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  background: transparent;
}

.mk-btn--ghost-on-ink:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.mk-btn--lg {
  padding: 0.9375rem 1.75rem;
  font-size: 1rem;
}

.mk-btn--sm {
  padding: 0.5rem 0.875rem;
  font-size: var(--sw-font-size-sm);
}

.mk-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sw-space-5);
}

.mk-center .mk-btn-row {
  justify-content: center;
}

.mk-textlink {
  display: inline-flex;
  align-items: center;
  gap: var(--sw-space-3);
  font-weight: var(--sw-fw-semibold);
}

.mk-textlink .mk-icon {
  width: 1.0625rem;
  height: 1.0625rem;
  transition: transform 0.15s ease;
}

.mk-textlink:hover .mk-icon {
  transform: translateX(3px);
}

/* ============================================================
   Icons, cards, lists
   ============================================================ */
.mk-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  flex: none;
}

.mk-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--sw-space-6);
  border-radius: var(--sw-radius-lg);
  background: var(--sw-primary-100);
  color: var(--sw-primary-700);
}

.mk-section--ink .mk-icon-tile {
  background: rgba(255, 255, 255, 0.1);
  color: var(--sw-primary-400);
}

.mk-card {
  padding: var(--sw-space-9);
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-xl);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.mk-card h3 {
  font-size: 1.0625rem;
  margin-bottom: var(--sw-space-4);
}

.mk-card p {
  font-size: 0.9375rem;
  margin: 0;
}

.mk-card--link:hover {
  border-color: var(--sw-primary-400);
  box-shadow: var(--sw-shadow);
  transform: translateY(-2px);
}

.mk-card--flush {
  padding: 0;
  border: 0;
  background: none;
}

.mk-section--ink .mk-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.mk-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mk-checklist li {
  position: relative;
  display: flex;
  gap: var(--sw-space-5);
  align-items: flex-start;
  margin-bottom: var(--sw-space-5);
}

.mk-checklist .mk-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  color: var(--sw-success);
}

.mk-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sw-space-4);
  padding: 0.375rem 0.75rem;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-primary-100);
  color: var(--sw-primary-800);
  font-size: var(--sw-font-size-sm);
  font-weight: var(--sw-fw-medium);
}

.mk-pill .mk-icon {
  width: 1rem;
  height: 1rem;
}

.mk-pill--muted {
  background: var(--sw-gray-100);
  color: var(--sw-text-body);
}

/* ============================================================
   Header / footer
   ============================================================ */
.mk-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--sw-divider);
}

.mk-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sw-space-8);
  min-height: 4.25rem;
}

.mk-header__brand {
  display: flex;
  align-items: center;
  flex: none;
}

.mk-header__brand img {
  height: 28px;
  width: auto;
  display: block;
}

.mk-nav {
  display: none;
  gap: var(--sw-space-8);
  margin-inline-start: auto;
}

.mk-nav a {
  font-size: 0.9375rem;
  font-weight: var(--sw-fw-medium);
  color: var(--sw-text-body);
}

.mk-nav a:hover,
.mk-nav a[aria-current=page] {
  color: var(--sw-primary-700);
}

.mk-header__actions {
  display: none;
  align-items: center;
  gap: var(--sw-space-5);
  margin-inline-start: var(--sw-space-6);
}

.mk-navtoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
  padding: var(--sw-space-4);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius);
  background: transparent;
  color: var(--sw-text-heading);
  cursor: pointer;
}

.mk-navtoggle__close {
  display: none;
}

.mk-navtoggle[aria-expanded=true] .mk-navtoggle__close {
  display: block;
}

.mk-navtoggle[aria-expanded=true] .mk-navtoggle__open {
  display: none;
}

.mk-mobilenav {
  display: none;
  padding-block: var(--sw-space-6) var(--sw-space-8);
  border-top: 1px solid var(--sw-divider);
}

.mk-mobilenav.is-open {
  display: block;
}

.mk-mobilenav a {
  display: block;
  padding-block: var(--sw-space-5);
  font-weight: var(--sw-fw-medium);
  color: var(--sw-text-heading);
}

.mk-mobilenav .mk-btn {
  width: 100%;
  margin-top: var(--sw-space-5);
}

@media (min-width: 900px) {
  .mk-nav, .mk-header__actions {
    display: flex;
  }
  .mk-navtoggle, .mk-mobilenav {
    display: none !important;
  }
}
.mk-footer {
  padding-block: clamp(3rem, 6vw, 4.5rem) var(--sw-space-10);
  background: var(--sw-body-bg);
  border-top: 1px solid var(--sw-divider);
  font-size: 0.9375rem;
}

.mk-footer__grid {
  display: grid;
  gap: var(--sw-space-10);
  grid-template-columns: 1fr;
  margin-bottom: var(--sw-space-11);
}

@media (min-width: 640px) {
  .mk-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .mk-footer__grid {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }
}
.mk-footer h2 {
  font-size: var(--sw-font-size-sm);
  font-weight: var(--sw-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sw-text-muted);
  margin-bottom: var(--sw-space-6);
}

.mk-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mk-footer li {
  margin-bottom: var(--sw-space-5);
}

.mk-footer a {
  color: var(--sw-text-body);
}

.mk-footer a:hover {
  color: var(--sw-primary-700);
}

.mk-footer__brand img {
  height: 28px;
  width: auto;
  margin-bottom: var(--sw-space-6);
}

.mk-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sw-space-5);
  justify-content: space-between;
  padding-top: var(--sw-space-8);
  border-top: 1px solid var(--sw-divider);
  color: var(--sw-text-muted);
  font-size: var(--sw-font-size-sm);
}

/* ============================================================
   Mock building blocks — skeleton lines, small cards and stage swatches,
   used by the marketing illustrations. Deliberately abstract: they suggest
   the interface without pretending to show data that does not exist.
   ============================================================ */
.mk-mock__swatch {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--sw-primary-500);
}

.mk-mock__swatch--warn {
  background: var(--sw-warning);
}

.mk-mock__swatch--ok {
  background: var(--sw-success);
}

.mk-mock__card {
  padding: var(--sw-space-5);
  margin-bottom: var(--sw-space-4);
  border-radius: var(--sw-radius);
  background: var(--sw-surface);
  border: 1px solid var(--sw-divider);
  box-shadow: var(--sw-shadow-xs);
}

.mk-mock__line {
  height: 0.4375rem;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-gray-200);
  margin-bottom: var(--sw-space-3);
}

.mk-mock__line--short {
  width: 55%;
}

.mk-mock__line--mid {
  width: 75%;
}

.mk-mock__line--accent {
  background: var(--sw-primary-300);
  width: 40%;
  margin-bottom: 0;
}

/* ============================================================
   Stat band
   ============================================================ */
.mk-stat strong {
  display: block;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--sw-fw-extrabold);
  color: #fff;
  line-height: 1.1;
  margin-bottom: var(--sw-space-4);
}

.mk-stat span {
  font-size: 0.9375rem;
}

/* ============================================================
   Pricing
   ============================================================ */
.mk-price {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mk-price--featured {
  border-color: var(--sw-primary-500);
  box-shadow: var(--sw-shadow-lg);
  position: relative;
}

.mk-price__badge {
  position: absolute;
  top: calc(var(--sw-space-6) * -1);
  left: var(--sw-space-9);
  padding: 0.25rem 0.625rem;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-primary-500);
  color: #fff;
  font-size: var(--sw-font-size-xs);
  font-weight: var(--sw-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mk-price__amount {
  display: flex;
  align-items: baseline;
  gap: var(--sw-space-3);
  margin-block: var(--sw-space-5) var(--sw-space-7);
}

.mk-price__amount strong {
  font-size: 2.25rem;
  font-weight: var(--sw-fw-extrabold);
  color: var(--sw-text-heading);
  letter-spacing: -0.02em;
}

.mk-price .mk-checklist {
  flex: 1;
  margin-block: var(--sw-space-7);
}

.mk-price .mk-btn {
  width: 100%;
}

.mk-callout {
  padding: var(--sw-space-7);
  border-radius: var(--sw-radius-lg);
  border: 1px dashed var(--sw-warning);
  background: rgba(255, 159, 67, 0.08);
  color: var(--sw-text-heading);
  font-size: 0.9375rem;
}

.mk-callout strong {
  color: var(--sw-text-heading);
}

/* ============================================================
   Docs
   ============================================================ */
.mk-docs {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .mk-docs {
    grid-template-columns: 15rem 1fr;
  }
}
.mk-docs__nav {
  position: sticky;
  top: 5.5rem;
  font-size: 0.9375rem;
}

.mk-docs__nav h2 {
  font-size: var(--sw-font-size-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sw-text-muted);
  font-weight: var(--sw-fw-semibold);
  margin-block: var(--sw-space-8) var(--sw-space-5);
}

.mk-docs__nav h2:first-child {
  margin-top: 0;
}

.mk-docs__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mk-docs__nav li {
  margin-bottom: 0;
}

.mk-docs__nav a {
  display: block;
  padding: var(--sw-space-4) var(--sw-space-5);
  border-radius: var(--sw-radius);
  color: var(--sw-text-body);
}

.mk-docs__nav a:hover {
  background: var(--sw-gray-100);
  color: var(--sw-text-heading);
}

.mk-docs__nav a[aria-current=page] {
  background: var(--sw-primary-100);
  color: var(--sw-primary-800);
  font-weight: var(--sw-fw-semibold);
}

.mk-prose {
  max-width: 46rem;
}

.mk-prose h2 {
  font-size: 1.5rem;
  margin-top: var(--sw-space-11);
}

.mk-prose h2:first-child {
  margin-top: 0;
}

.mk-prose h3 {
  font-size: 1.125rem;
  margin-top: var(--sw-space-9);
  margin-bottom: var(--sw-space-4);
}

.mk-prose ul {
  padding-left: 1.15rem;
}

.mk-prose li {
  line-height: var(--sw-line-height-lg);
}

.mk-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--sw-space-8);
  font-size: 0.9375rem;
}

.mk-prose th, .mk-prose td {
  padding: var(--sw-space-5);
  border-bottom: 1px solid var(--sw-divider);
  text-align: left;
  vertical-align: top;
}

.mk-prose th {
  color: var(--sw-text-heading);
  font-weight: var(--sw-fw-semibold);
}

.mk-table-wrap {
  overflow-x: auto;
}

.mk-breadcrumb {
  display: flex;
  gap: var(--sw-space-4);
  margin-bottom: var(--sw-space-7);
  font-size: var(--sw-font-size-sm);
  color: var(--sw-text-muted);
}

/* ============================================================
   Changelog / blog
   ============================================================ */
.mk-entry {
  display: grid;
  gap: var(--sw-space-5);
  padding-block: var(--sw-space-9);
  border-bottom: 1px solid var(--sw-divider);
}

@media (min-width: 720px) {
  .mk-entry {
    grid-template-columns: 11rem 1fr;
    gap: var(--sw-space-9);
  }
}
.mk-entry:last-child {
  border-bottom: 0;
}

.mk-entry__meta {
  font-size: var(--sw-font-size-sm);
  color: var(--sw-text-muted);
}

.mk-entry h3 {
  font-size: 1.0625rem;
  margin-bottom: var(--sw-space-4);
}

.mk-empty {
  padding: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
  border: 1px dashed var(--sw-border);
  border-radius: var(--sw-radius-xl);
  background: var(--sw-body-bg);
}

.mk-empty .mk-icon-tile {
  margin-inline: auto;
}

/* ============================================================
   Contact
   ============================================================ */
.mk-contact-card {
  display: flex;
  gap: var(--sw-space-6);
  align-items: flex-start;
  padding: var(--sw-space-8);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-xl);
  background: var(--sw-surface);
}

.mk-contact-card .mk-icon-tile {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .mk-btn:hover, .mk-card--link:hover {
    transform: none;
  }
}
.mk-docs > * {
  min-width: 0;
}

.mk-prose pre {
  max-width: 100%;
  overflow-x: auto;
}

/* ============================================================
   Hero
   ============================================================ */
.mk-hero2 {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--sw-space-6);
  text-align: center;
  background: radial-gradient(70rem 26rem at 50% -8%, var(--sw-primary-100) 0%, transparent 70%), linear-gradient(180deg, #fff 0%, var(--sw-body-bg) 100%);
}

.mk-hero2__inner {
  position: relative;
  z-index: 1;
}

.mk-hero2__glow {
  position: absolute;
  inset: auto 0 0 0;
  height: min(26rem, 62%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(38rem 13rem at 50% 100%, rgba(9, 165, 194, 0.3), transparent 72%), radial-gradient(circle, rgba(9, 165, 194, 0.55) 1.3px, transparent 1.7px) 0 0/14px 14px;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 92%);
  mask-image: linear-gradient(to top, #000 10%, transparent 92%);
}

.mk-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem;
  border: 1px solid var(--sw-primary-200);
  border-radius: var(--sw-radius-pill);
  background: #fff;
  box-shadow: 0 6px 18px rgba(9, 165, 194, 0.16);
}

.mk-tag__icon {
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #0897b3, #067f89);
  color: #fff;
}

.mk-tag__icon .mk-icon {
  width: 0.9375rem;
  height: 0.9375rem;
}

.mk-tag__text {
  padding: 0 var(--sw-space-5) 0 var(--sw-space-4);
  font-size: var(--sw-font-size-sm);
  font-weight: var(--sw-fw-semibold);
  color: var(--sw-primary-800);
}

.mk-hero2__title {
  margin: var(--sw-space-7) auto var(--sw-space-6);
  font-size: clamp(2.125rem, 6.2vw, 4.5rem);
  letter-spacing: -0.035em;
}

.mk-hero2__lead {
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: var(--sw-space-9);
}

.mk-hero2 .mk-btn-row {
  justify-content: center;
}

.mk-hero2__fine {
  margin: var(--sw-space-5) 0 0;
  font-size: var(--sw-font-size-xs);
}

.mk-btn--glow {
  background: linear-gradient(180deg, #0897b3 0%, #067f89 100%);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 4px rgba(9, 165, 194, 0.16), 0 10px 22px rgba(9, 165, 194, 0.34);
}

.mk-btn--glow:hover {
  color: #fff;
  background: linear-gradient(180deg, #09a5c2 0%, #078a9c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 5px rgba(9, 165, 194, 0.2), 0 12px 26px rgba(9, 165, 194, 0.42);
}

/* ============================================================
   The "New" badge on a card (used by the hero's board and the lead-to-deal illustration)
   ============================================================ */
.mk-flow__badge {
  position: absolute;
  top: -0.5rem;
  right: var(--sw-space-3);
  padding: 0.0625rem 0.4375rem;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-primary-500);
  color: #fff;
  font-size: 0.625rem;
  font-weight: var(--sw-fw-semibold);
}

.mk-ai {
  display: flex;
  flex-direction: column;
  gap: var(--sw-space-5);
  padding: var(--sw-space-6);
  background: var(--sw-surface);
  border-top: 1px solid var(--sw-divider);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--sw-text-body);
}

@media (min-width: 560px) {
  .mk-ai {
    border-top: 0;
    border-left: 1px solid var(--sw-divider);
  }
}
.mk-ai p {
  margin: 0;
  font-size: inherit;
}

.mk-ai__head {
  display: flex;
  align-items: center;
  gap: var(--sw-space-3);
  color: var(--sw-text-heading);
  font-size: var(--sw-font-size-sm);
}

.mk-ai__head strong {
  margin: 0;
  font-size: inherit;
  letter-spacing: 0;
}

.mk-ai__spark {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--sw-primary-600);
}

.mk-ai__thread {
  display: flex;
  flex-direction: column;
  gap: var(--sw-space-4);
}

.mk-ai .mk-ai__user {
  align-self: flex-end;
  max-width: 85%;
  padding: var(--sw-space-3) var(--sw-space-5);
  border-radius: var(--sw-radius-lg) var(--sw-radius-lg) var(--sw-radius-sm) var(--sw-radius-lg);
  background: var(--sw-primary-500);
  color: #fff;
}

.mk-ai__reply {
  display: flex;
  flex-direction: column;
  gap: var(--sw-space-3);
}

.mk-ai__reply ul {
  margin: 0;
  padding-left: 1rem;
}

.mk-ai__reply li {
  margin: 0;
}

.mk-ai__reply b {
  color: var(--sw-text-heading);
}

.mk-ai .mk-ai__receipt {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--sw-space-2);
  padding: 0.125rem var(--sw-space-4) 0.125rem var(--sw-space-3);
  border-radius: var(--sw-radius-pill);
  background: var(--sw-primary-100);
  color: var(--sw-primary-800);
  font-size: 0.6875rem;
  font-weight: var(--sw-fw-medium);
}

.mk-ai__receipt svg {
  width: 0.75rem;
  height: 0.75rem;
  stroke-width: 2.25;
}

.mk-ai__action {
  padding: var(--sw-space-5);
  border: 1px solid var(--sw-primary-300);
  border-radius: var(--sw-radius-lg);
  background: var(--sw-primary-100);
}

.mk-ai .mk-ai__action-title {
  font-weight: var(--sw-fw-semibold);
  color: var(--sw-primary-800);
  font-size: 0.6875rem;
}

.mk-ai .mk-ai__action-body {
  margin: var(--sw-space-2) 0 var(--sw-space-4);
  color: var(--sw-text-heading);
  font-weight: var(--sw-fw-medium);
}

.mk-ai__action-btns {
  display: flex;
  gap: var(--sw-space-3);
}

.mk-ai__btn {
  padding: 0.1875rem var(--sw-space-5);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius);
  background: var(--sw-surface);
  color: var(--sw-text-heading);
  font-size: 0.6875rem;
  font-weight: var(--sw-fw-semibold);
}

.mk-ai__btn--primary {
  border-color: var(--sw-primary-500);
  background: var(--sw-primary-500);
  color: #fff;
}

.mk-ai .mk-ai__hint {
  margin-top: var(--sw-space-4);
  font-size: 0.625rem;
  color: var(--sw-primary-800);
}

.mk-ai__composer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sw-space-3);
}

.mk-ai__input {
  display: block;
  padding: var(--sw-space-4) var(--sw-space-5);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-lg);
  color: var(--sw-text-muted);
}

.mk-ai__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sw-space-3);
}

.mk-ai__chips span {
  padding: 0.0625rem var(--sw-space-4);
  border-radius: var(--sw-radius-pill);
  background: var(--sw-gray-100);
  font-size: 0.625rem;
  font-weight: var(--sw-fw-medium);
}

.mk-ai__reply,
.mk-ai__action {
  animation: mk-ai-in 0.6s ease both;
}

.mk-ai__reply {
  animation-delay: 1.5s;
}

.mk-ai__action {
  animation-delay: 2.2s;
}

@keyframes mk-flow-land {
  from {
    opacity: 0;
    transform: translateY(-5rem) scale(0.96);
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes mk-ai-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-ai__reply,
.mk-ai__action {
    animation: none;
  }
}
/* ============================================================
   Integrations strip (scrolls sideways, CSS only)
   ============================================================ */
.mk-marquee__caption {
  margin-bottom: var(--sw-space-7);
  font-size: var(--sw-font-size-sm);
}

.mk-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.mk-marquee__track {
  display: flex;
  width: max-content;
  padding-block: 0.25rem;
  animation: mk-marquee 34s linear infinite;
}

.mk-marquee:hover .mk-marquee__track {
  animation-play-state: paused;
}

.mk-marquee__group {
  display: flex;
  gap: var(--sw-space-5);
  padding-right: var(--sw-space-5);
}

.mk-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sw-space-4);
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-pill);
  background: #fff;
  color: var(--sw-text-heading);
  font-size: 0.9375rem;
  font-weight: var(--sw-fw-semibold);
  white-space: nowrap;
}

.mk-marquee__item .mk-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--sw-primary-700);
}

@keyframes mk-marquee {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .mk-marquee__track {
    width: auto;
    justify-content: center;
    animation: none;
  }
  .mk-marquee__group {
    flex-wrap: wrap;
    justify-content: center;
  }
  .mk-marquee__group[aria-hidden=true] {
    display: none;
  }
}
/* ============================================================
   Feature cards: illustration on top, words underneath
   ============================================================ */
.mk-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.mk-bento {
  display: grid;
  gap: var(--sw-space-7);
}

@media (min-width: 640px) {
  .mk-bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .mk-bento__card:last-child {
    grid-column: 1/-1;
  }
}
@media (min-width: 900px) {
  .mk-bento {
    grid-template-columns: repeat(6, 1fr);
  }
  .mk-bento__card,
.mk-bento__card:last-child {
    grid-column: span 2;
  }
  .mk-bento__card--wide,
.mk-bento__card--wide:last-child {
    grid-column: span 3;
  }
}
.mk-bento__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: 1.125rem;
}

.mk-bento__art {
  position: relative;
  display: grid;
  place-items: center;
  height: 12.5rem;
  overflow: hidden;
  background: radial-gradient(20rem 11rem at 50% 0%, var(--sw-primary-100), transparent 72%), var(--sw-body-bg);
  border-bottom: 1px solid var(--sw-divider);
}

.mk-bento__art::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(9, 165, 194, 0.35) 1px, transparent 1.4px);
  background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(closest-side at 50% 0%, #000, transparent);
  mask-image: radial-gradient(closest-side at 50% 0%, #000, transparent);
}

.mk-bento__art > * {
  position: relative;
}

.mk-bento__body {
  padding: var(--sw-space-8);
  text-align: left;
}

.mk-bento__body h3 {
  font-size: 1.125rem;
  margin-bottom: var(--sw-space-3);
}

.mk-bento__body p {
  font-size: 0.9375rem;
  margin: 0;
}

.mk-orb {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 35% 25%, #5fd6ea, #09a5c2 55%, #067f89);
  box-shadow: 0 0 0 0.5rem rgba(9, 165, 194, 0.12), 0 0 0 1.1rem rgba(9, 165, 194, 0.07), 0 14px 30px rgba(9, 165, 194, 0.4);
}

.mk-orb--lg {
  width: 5.25rem;
  height: 5.25rem;
}

.mk-orb .mk-icon,
.mk-orb > svg {
  width: 1.75rem;
  height: 1.75rem;
}

.mk-art-board {
  display: grid;
  grid-template-columns: repeat(3, 5.5rem);
  gap: var(--sw-space-4);
}

.mk-art-col {
  min-height: 8.5rem;
  padding: var(--sw-space-4);
  border: 1px solid var(--sw-divider);
  border-radius: var(--sw-radius-lg);
  background: rgba(255, 255, 255, 0.75);
}

.mk-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sw-space-2);
  margin-bottom: var(--sw-space-4);
  font-size: 0.6875rem;
  font-weight: var(--sw-fw-semibold);
  color: var(--sw-text-heading);
}

.mk-art-gap {
  height: 1.5rem;
  margin-bottom: var(--sw-space-4);
  border: 1.5px dashed var(--sw-primary-300);
  border-radius: var(--sw-radius);
}

.mk-art-lift {
  border-color: var(--sw-primary-400);
  box-shadow: var(--sw-shadow);
  transform: rotate(-3deg) translate(-0.15rem, -0.15rem);
}

.mk-art-flow {
  display: flex;
  align-items: center;
  gap: var(--sw-space-5);
}

.mk-art-form {
  width: 7rem;
  padding: var(--sw-space-5);
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 0.625rem;
  box-shadow: var(--sw-shadow-sm);
}

.mk-art-form i {
  display: block;
  height: 1.125rem;
  margin-bottom: var(--sw-space-3);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-sm);
  background: var(--sw-body-bg);
}

.mk-art-btn {
  display: block;
  height: 1.25rem;
  margin-top: var(--sw-space-4);
  border-radius: var(--sw-radius-sm);
  background: var(--sw-primary-500);
}

.mk-art-arrow {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--sw-primary-700);
  color: #fff;
  box-shadow: 0 0 0 0.3rem rgba(9, 165, 194, 0.16);
}

.mk-art-arrow .mk-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.mk-art-deal {
  position: relative;
  width: 7rem;
  margin: 0;
  border-color: var(--sw-primary-400);
  box-shadow: 0 0 0 3px var(--sw-primary-100), var(--sw-shadow-sm);
}

.mk-art-ai {
  position: relative;
  display: grid;
  place-items: center;
  width: 17rem;
  height: 10.5rem;
}

.mk-art-ai::before,
.mk-art-ai::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(9, 165, 194, 0.26);
}

.mk-art-ai::before {
  width: 9.5rem;
  height: 9.5rem;
}

.mk-art-ai::after {
  width: 13rem;
  height: 13rem;
  border-color: rgba(9, 165, 194, 0.14);
}

.mk-art-ai .mk-orb {
  z-index: 1;
}

.mk-art-chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sw-space-2);
  padding: 0.1875rem 0.625rem;
  border: 1px solid var(--sw-primary-200);
  border-radius: var(--sw-radius-pill);
  background: #fff;
  color: var(--sw-primary-800);
  font-size: 0.6875rem;
  font-weight: var(--sw-fw-semibold);
  box-shadow: var(--sw-shadow-xs);
}

.mk-art-chip .mk-icon {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--sw-success);
}

.mk-art-chip--l {
  left: 0;
  top: 1.5rem;
}

.mk-art-chip--r {
  right: 0;
  top: 4.25rem;
}

.mk-art-chip--b {
  left: 50%;
  bottom: 0.25rem;
  transform: translateX(-50%);
}

.mk-art-chip--confirm {
  border-color: var(--sw-primary-700);
  background: var(--sw-primary-700);
  color: #fff;
}

.mk-art-roles {
  display: flex;
  gap: var(--sw-space-5);
}

.mk-art-panel {
  width: 11rem;
  padding: var(--sw-space-5);
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 0.625rem;
  box-shadow: var(--sw-shadow-sm);
  font-size: 0.6875rem;
  color: var(--sw-text-body);
}

.mk-art-panel b {
  display: block;
  margin-bottom: var(--sw-space-3);
  color: var(--sw-text-heading);
  font-weight: var(--sw-fw-semibold);
}

.mk-art-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sw-space-4);
  padding-block: var(--sw-space-3);
  border-top: 1px solid var(--sw-divider);
}

.mk-art-row .mk-mock__line {
  display: block;
  margin: 0;
  flex: 0 0 45%;
}

.mk-art-hub {
  display: flex;
  align-items: center;
  gap: var(--sw-space-4);
}

.mk-art-sat {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--sw-border);
  box-shadow: var(--sw-shadow-sm);
  color: var(--sw-primary-700);
}

.mk-art-sat .mk-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.mk-art-wire {
  width: 1.5rem;
  height: 2px;
  background: linear-gradient(90deg, var(--sw-primary-200), var(--sw-primary-500));
}

/* ============================================================
   How it works: a real sequence, so numbered
   ============================================================ */
.mk-steps2 {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .mk-steps2 {
    grid-template-columns: 1.05fr 0.95fr;
  }
}
.mk-steps2__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: s;
}

.mk-steps2__list li {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--sw-space-6);
  margin: 0;
  padding-bottom: var(--sw-space-9);
  counter-increment: s;
}

.mk-steps2__list li:last-child {
  padding-bottom: 0;
}

.mk-steps2__list li::before {
  content: counter(s, decimal-leading-zero);
  font-size: 1.75rem;
  font-weight: var(--sw-fw-extrabold);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--sw-primary-400);
}

.mk-steps2__list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 2.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(var(--sw-primary-300), transparent);
}

.mk-steps2 h3 {
  font-size: 1.125rem;
  margin-bottom: var(--sw-space-3);
}

.mk-steps2__list p {
  font-size: 0.9375rem;
}

.mk-formpanel {
  position: relative;
  display: grid;
  gap: var(--sw-space-7);
  justify-items: center;
  padding: clamp(2rem, 6vw, 3.5rem) var(--sw-space-8);
  overflow: hidden;
  border-radius: 1.25rem;
  background: radial-gradient(18rem 14rem at 30% 0%, rgba(111, 212, 230, 0.75), transparent 70%), linear-gradient(160deg, #0ba2bf, #067f89);
}

.mk-formpanel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.28) 1px, transparent 1.4px);
  background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000);
  mask-image: linear-gradient(to bottom, transparent, #000);
}

.mk-formpanel > * {
  position: relative;
}

.mk-formcard {
  width: min(100%, 19rem);
  padding: var(--sw-space-9);
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 20px 50px rgba(6, 127, 137, 0.45), 0 0 0 0.6rem rgba(255, 255, 255, 0.18);
}

.mk-formcard__title {
  margin: 0 0 var(--sw-space-6);
  font-weight: var(--sw-fw-bold);
  color: var(--sw-text-heading);
}

.mk-formcard i {
  display: block;
  height: 2.25rem;
  margin-bottom: var(--sw-space-5);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius);
  background: var(--sw-body-bg);
}

.mk-formcard i::after {
  content: "";
  display: block;
  width: var(--w, 60%);
  height: 0.4375rem;
  margin: 0.9375rem 0.75rem;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-gray-200);
}

.mk-formcard__btn {
  display: block;
  padding: 0.625rem;
  border-radius: var(--sw-radius);
  background: linear-gradient(180deg, #0897b3, #067f89);
  color: #fff;
  text-align: center;
  font-weight: var(--sw-fw-semibold);
}

.mk-formpanel__done {
  display: inline-flex;
  align-items: center;
  gap: var(--sw-space-3);
  padding: 0.4375rem var(--sw-space-6) 0.4375rem var(--sw-space-5);
  border-radius: var(--sw-radius-pill);
  background: #fff;
  color: var(--sw-primary-800);
  font-size: var(--sw-font-size-sm);
  font-weight: var(--sw-fw-semibold);
  box-shadow: var(--sw-shadow);
}

.mk-formpanel__done .mk-icon {
  width: 1rem;
  height: 1rem;
  color: var(--sw-success);
}

/* ============================================================
   FAQ (native <details>, so no script)
   ============================================================ */
.mk-faq {
  display: grid;
  gap: var(--sw-space-4);
  max-width: 46rem;
  margin-inline: auto;
}

.mk-faq details {
  padding: 0 var(--sw-space-8);
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: 0.875rem;
}

.mk-faq details[open] {
  border-color: var(--sw-primary-300);
  box-shadow: var(--sw-shadow-xs);
}

.mk-faq summary {
  position: relative;
  padding: var(--sw-space-7) 2rem var(--sw-space-7) 0;
  list-style: none;
  cursor: pointer;
  font-weight: var(--sw-fw-semibold);
  color: var(--sw-text-heading);
}

.mk-faq summary::-webkit-details-marker {
  display: none;
}

.mk-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: var(--sw-fw-normal, 400);
  line-height: 1;
  color: var(--sw-primary-700);
}

.mk-faq details[open] summary::after {
  content: "−";
}

.mk-faq details p {
  margin: 0;
  padding-bottom: var(--sw-space-7);
  font-size: 0.9375rem;
}

/* ============================================================
   Closing call to action
   ============================================================ */
.mk-cta2 {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 5rem) var(--sw-space-8);
  text-align: center;
  border: 1px solid var(--sw-primary-200);
  border-radius: 1.5rem;
  background: radial-gradient(34rem 14rem at 50% 100%, rgba(9, 165, 194, 0.22), transparent 72%), linear-gradient(180deg, #fff, var(--sw-primary-100));
}

.mk-cta2::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(9, 165, 194, 0.5) 1.3px, transparent 1.7px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
  mask-image: linear-gradient(to top, #000, transparent);
}

.mk-cta2 > * {
  position: relative;
}

.mk-cta2 .mk-btn--ghost {
  background: #fff;
}

/* ============================================================
   Point-in-time reporting figure
   ============================================================ */
.mk-pit {
  margin: 0;
}

.mk-pit__title {
  margin-bottom: var(--sw-space-6);
  font-size: 1.0625rem;
  font-weight: var(--sw-fw-bold);
  color: var(--sw-text-heading);
}

.mk-pit__axis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--sw-space-4);
  font-size: var(--sw-font-size-xs);
  font-weight: var(--sw-fw-semibold);
  color: var(--sw-text-muted);
}

.mk-pit__axis span:last-child {
  color: var(--sw-primary-800);
}

.mk-pit__rows {
  list-style: none;
  margin: 0 0 var(--sw-space-7);
  padding: 0;
}

.mk-pit__row {
  margin-bottom: var(--sw-space-6);
}

.mk-pit__track {
  position: relative;
  display: block;
  height: 1.75rem;
  border-radius: var(--sw-radius);
  background: linear-gradient(90deg, var(--sw-body-bg) 50%, var(--sw-primary-100) 50%);
}

.mk-pit__track::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--from);
  width: calc(var(--to) - var(--from));
  height: 0.375rem;
  margin-top: -0.1875rem;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-gray-300);
}

.mk-pit__track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--to);
  width: 0.875rem;
  height: 0.875rem;
  margin: -0.4375rem 0 0 -0.4375rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--sw-gray-400);
}

.mk-pit__row--counted .mk-pit__track::before {
  background: var(--sw-primary-300);
}

.mk-pit__row--counted .mk-pit__track::after {
  background: var(--sw-success);
}

.mk-pit__row--open .mk-pit__track::after {
  display: none;
}

.mk-pit__note {
  display: block;
  margin-top: var(--sw-space-3);
  font-size: var(--sw-font-size-sm);
  line-height: 1.5;
}

.mk-pit__note strong,
.mk-pit__note b {
  color: var(--sw-text-heading);
}

.mk-pit .mk-pit__body {
  font-size: 0.9375rem;
}

.mk-pit .mk-pit__fine {
  margin-top: var(--sw-space-5);
  font-size: var(--sw-font-size-sm);
}

/* ============================================================
   Role-based field visibility
   ============================================================ */
.mk-roles {
  display: grid;
  gap: var(--sw-space-6);
}

@media (min-width: 640px) {
  .mk-roles {
    grid-template-columns: 1fr 1fr;
  }
}
.mk-roles__panel {
  padding: var(--sw-space-7);
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-xl);
}

.mk-roles__who {
  margin: 0 0 var(--sw-space-5);
  font-size: var(--sw-font-size-sm);
  font-weight: var(--sw-fw-semibold);
  color: var(--sw-text-heading);
}

.mk-roles__fields {
  margin: 0;
}

.mk-roles__fields > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sw-space-5);
  padding-block: var(--sw-space-5);
  border-top: 1px solid var(--sw-divider);
}

.mk-roles__fields dt {
  font-size: var(--sw-font-size-sm);
  color: var(--sw-text-body);
}

.mk-roles__fields dd {
  margin: 0;
  flex: 0 0 48%;
}

.mk-roles__fields .mk-mock__line {
  display: block;
  margin: 0;
}

.mk-roles__hidden {
  display: inline-flex;
  align-items: center;
  gap: var(--sw-space-3);
  padding: 0.1875rem 0.625rem;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-gray-100);
  color: var(--sw-gray-700);
  font-size: var(--sw-font-size-xs);
  font-weight: var(--sw-fw-medium);
}

.mk-roles__hidden .mk-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* ============================================================
   Feature index and integrations
   ============================================================ */
.mk-index {
  display: grid;
  gap: var(--sw-space-9) var(--sw-space-10);
  margin: 0;
}

@media (min-width: 640px) {
  .mk-index {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .mk-index {
    grid-template-columns: repeat(3, 1fr);
  }
}
.mk-index__item {
  padding-top: var(--sw-space-6);
  border-top: 1px solid var(--sw-border);
}

.mk-index dt {
  margin-bottom: var(--sw-space-3);
  font-size: 1.0625rem;
  font-weight: var(--sw-fw-bold);
  color: var(--sw-text-heading);
}

.mk-index dd {
  margin: 0;
  font-size: 0.9375rem;
}

/* ============================================================
   Hero sparkles, section glows
   ============================================================ */
.mk-section--glowtop {
  background: radial-gradient(60rem 18rem at 50% 0%, var(--sw-primary-100), transparent 70%);
}

.mk-section--glow {
  position: relative;
  overflow: hidden;
}

.mk-section--glow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(40rem 18rem at 85% 0%, rgba(9, 165, 194, 0.38), transparent 70%), radial-gradient(circle, rgba(255, 255, 255, 0.16) 1px, transparent 1.4px) 0 0/14px 14px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 90%);
  mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

.mk-section--glow > * {
  position: relative;
}

/* ============================================================
   SWARECO AI showcase: ask, check, confirm
   ============================================================ */
.mk-show {
  display: grid;
  gap: var(--sw-space-11);
  margin-bottom: var(--sw-space-7);
}

@media (min-width: 900px) {
  .mk-show {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.75rem;
  }
}
.mk-show__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: 1.125rem;
}

.mk-show__ui {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: var(--sw-space-10) var(--sw-space-8) var(--sw-space-8);
  border-bottom: 1px solid var(--sw-divider);
  border-radius: 1.125rem 1.125rem 0 0;
  background: radial-gradient(18rem 9rem at 50% 0%, var(--sw-primary-100), transparent 75%), var(--sw-body-bg);
}

.mk-show__badge {
  position: absolute;
  top: -0.875rem;
  left: var(--sw-space-8);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #0897b3, #067f89);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: var(--sw-fw-bold);
  box-shadow: 0 0 0 0.3rem rgba(9, 165, 194, 0.18);
}

.mk-show__text {
  padding: var(--sw-space-8);
}

.mk-show__text h3 {
  font-size: 1.125rem;
  margin-bottom: var(--sw-space-3);
}

.mk-show__text p {
  font-size: 0.9375rem;
  margin: 0;
}

.mk-show__note {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--sw-text-muted);
}

@media (min-width: 900px) {
  .mk-show__card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 5.5rem;
    right: -2.25rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--sw-primary-700);
    box-shadow: 0 0 0 0.3rem rgba(9, 165, 194, 0.16);
  }
  .mk-show__card:not(:last-child)::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 6.15rem;
    right: -1.7rem;
    width: 0.45rem;
    height: 0.45rem;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
  }
}
.mk-ai.mk-ai--bare {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.8125rem;
  gap: var(--sw-space-5);
}

.mk-show .mk-ai__reply,
.mk-show .mk-ai__action {
  animation: none;
}

.mk-ai .mk-ai__callout {
  padding: var(--sw-space-4) var(--sw-space-5);
  border: 1px solid rgba(255, 159, 67, 0.45);
  border-radius: var(--sw-radius-lg);
  background: rgba(255, 159, 67, 0.14);
  color: var(--sw-text-heading);
}

.mk-ai .mk-ai__receipt--hist {
  background: #fff;
  border: 1px solid var(--sw-divider);
  color: var(--sw-text-heading);
}

.mk-ai__receipt--hist svg {
  color: var(--sw-success);
}

.mk-chats {
  width: min(17rem, 100% - 1.5rem);
  padding: var(--sw-space-5);
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 0.75rem;
  box-shadow: var(--sw-shadow-sm);
  font-size: 0.6875rem;
}

.mk-chats__group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--sw-space-3) 0 var(--sw-space-3);
  color: var(--sw-text-muted);
  font-weight: var(--sw-fw-semibold);
}

.mk-chats__group:first-child {
  margin-top: 0;
}

.mk-chats__group b {
  display: grid;
  place-items: center;
  min-width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-primary-500);
  color: #fff;
  font-size: 0.625rem;
}

.mk-chats__row {
  display: flex;
  align-items: center;
  gap: var(--sw-space-4);
  padding: var(--sw-space-4) var(--sw-space-3);
  border-top: 1px solid var(--sw-divider);
}

.mk-chats__row .mk-mock__line {
  flex: 1;
  margin: 0;
}

.mk-chats__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--sw-primary-500);
}

.mk-chats__dot--run {
  background: var(--sw-gray-300);
}

.mk-chats__tag {
  padding: 0.0625rem var(--sw-space-4);
  border-radius: var(--sw-radius-pill);
  background: var(--sw-primary-100);
  color: var(--sw-primary-800);
  font-weight: var(--sw-fw-semibold);
  white-space: nowrap;
}

.mk-skills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sw-space-4);
  max-width: 17rem;
}

.mk-skills span {
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--sw-primary-200);
  border-radius: var(--sw-radius-pill);
  background: #fff;
  color: var(--sw-primary-800);
  font-family: var(--sw-font-mono);
  font-size: 0.75rem;
  box-shadow: var(--sw-shadow-xs);
}

.mk-skills .mk-skills__add {
  border-style: dashed;
  background: transparent;
  color: var(--sw-text-body);
  font-family: var(--sw-font-sans);
}

.mk-log {
  width: min(16.5rem, 100% - 1.5rem);
  padding: var(--sw-space-5);
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 0.75rem;
  box-shadow: var(--sw-shadow-sm);
  font-size: 0.625rem;
}

.mk-log__filters {
  display: flex;
  gap: var(--sw-space-3);
  margin-bottom: var(--sw-space-4);
}

.mk-log__filters span {
  padding: 0.125rem var(--sw-space-4);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-pill);
  color: var(--sw-text-body);
  font-weight: var(--sw-fw-medium);
}

.mk-log__filters .is-on {
  border-color: var(--sw-primary-300);
  background: var(--sw-primary-100);
  color: var(--sw-primary-800);
}

.mk-log__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: center;
  gap: var(--sw-space-4);
  padding-block: var(--sw-space-3);
  border-top: 1px solid var(--sw-divider);
}

.mk-log__row .mk-mock__line {
  display: block;
  margin: 0;
}

.mk-log__row--head {
  color: var(--sw-text-muted);
  font-weight: var(--sw-fw-semibold);
}

/* ============================================================
   A contact's timeline
   ============================================================ */
.mk-record {
  padding: var(--sw-space-8);
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: 1.125rem;
  box-shadow: var(--sw-shadow-lg);
}

.mk-record__head {
  display: flex;
  align-items: center;
  gap: var(--sw-space-6);
  margin-bottom: var(--sw-space-7);
}

.mk-record__avatar {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--sw-primary-300), var(--sw-primary-600));
}

.mk-record__who {
  flex: 1;
}

.mk-record__who .mk-mock__line {
  display: block;
}

.mk-record__tabs {
  display: flex;
  gap: var(--sw-space-7);
  margin-bottom: var(--sw-space-7);
  overflow-x: auto;
  border-bottom: 1px solid var(--sw-divider);
  font-size: var(--sw-font-size-sm);
  font-weight: var(--sw-fw-medium);
  color: var(--sw-text-body);
}

.mk-record__tabs span {
  padding-bottom: var(--sw-space-4);
  white-space: nowrap;
}

.mk-record__tabs .is-on {
  border-bottom: 2px solid var(--sw-primary-500);
  color: var(--sw-primary-800);
  font-weight: var(--sw-fw-semibold);
}

.mk-tl {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mk-tl li {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--sw-space-6);
  margin: 0;
  padding-bottom: var(--sw-space-7);
}

.mk-tl li:last-child {
  padding-bottom: 0;
}

.mk-tl li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.0625rem;
  top: 2.25rem;
  bottom: 0.25rem;
  width: 2px;
  background: var(--sw-divider);
}

.mk-tl__dot {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--sw-primary-100);
  color: var(--sw-primary-700);
}

.mk-tl__dot .mk-icon,
.mk-tl__dot > svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

.mk-tl__dot--ai {
  background: linear-gradient(180deg, #0897b3, #067f89);
  color: #fff;
}

.mk-tl__title {
  margin: 0 0 var(--sw-space-2);
  font-size: 0.9375rem;
  font-weight: var(--sw-fw-semibold);
  color: var(--sw-text-heading);
  line-height: 1.35;
}

.mk-tl__tag {
  display: inline-block;
  padding: 0.0625rem var(--sw-space-4);
  border-radius: var(--sw-radius-pill);
  background: var(--sw-gray-100);
  color: var(--sw-text-body);
  font-size: 0.6875rem;
  font-weight: var(--sw-fw-semibold);
}

.mk-tl__tag--ai {
  background: var(--sw-primary-100);
  color: var(--sw-primary-800);
}

/* ============================================================
   The MCP consent page
   ============================================================ */
.mk-orb--sm {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  box-shadow: 0 0 0 0.3rem rgba(9, 165, 194, 0.14), 0 8px 18px rgba(9, 165, 194, 0.35);
}

.mk-orb--sm .mk-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.mk-consent {
  padding: var(--sw-space-9);
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: 1.125rem;
  box-shadow: var(--sw-shadow-lg);
  font-size: 0.875rem;
}

.mk-consent p {
  margin: 0;
}

.mk-consent__head {
  display: flex;
  align-items: center;
  gap: var(--sw-space-6);
  margin-bottom: var(--sw-space-7);
}

.mk-consent__title {
  font-weight: var(--sw-fw-bold);
  color: var(--sw-text-heading);
}

.mk-consent__sub {
  font-size: var(--sw-font-size-sm);
  color: var(--sw-text-body);
}

.mk-consent .mk-consent__label {
  margin-bottom: var(--sw-space-4);
  font-size: var(--sw-font-size-sm);
  font-weight: var(--sw-fw-semibold);
  color: var(--sw-text-heading);
}

.mk-consent__list {
  list-style: none;
  margin: 0 0 var(--sw-space-6);
  padding: 0;
}

.mk-consent__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sw-space-5);
  margin-bottom: var(--sw-space-4);
  line-height: 1.4;
}

.mk-box {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.0625rem;
  border: 1.5px solid var(--sw-gray-400);
  border-radius: 0.3rem;
  background: #fff;
  color: #fff;
}

.mk-box.is-on {
  border-color: var(--sw-primary-700);
  background: var(--sw-primary-700);
}

.mk-box .mk-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.mk-consent__warn {
  margin-bottom: var(--sw-space-7);
  padding: var(--sw-space-6);
  border: 1px dashed var(--sw-primary-400);
  border-radius: var(--sw-radius-lg);
  background: rgba(9, 165, 194, 0.06);
}

.mk-consent__warn .mk-consent__label--warn {
  display: flex;
  align-items: center;
  gap: var(--sw-space-3);
}

.mk-consent__label--warn .mk-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--sw-primary-700);
}

.mk-consent__warn .mk-consent__list {
  margin-bottom: var(--sw-space-5);
}

.mk-consent__confirm {
  display: flex;
  align-items: flex-start;
  gap: var(--sw-space-5);
  font-size: var(--sw-font-size-sm);
  color: var(--sw-text-heading);
}

.mk-consent__btns {
  display: flex;
  gap: var(--sw-space-5);
}

.mk-consent__btns .mk-formcard__btn {
  flex: 1;
}

.mk-consent__cancel {
  display: grid;
  place-items: center;
  padding: 0.625rem var(--sw-space-8);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius);
  color: var(--sw-text-heading);
  font-weight: var(--sw-fw-semibold);
}

.mk-caps__label {
  margin: var(--sw-space-8) 0 var(--sw-space-4);
  font-size: var(--sw-font-size-sm);
  color: var(--sw-text-muted);
}

.mk-caps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sw-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-caps li {
  display: inline-flex;
  align-items: center;
  gap: var(--sw-space-4);
  margin: 0;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-pill);
  background: #fff;
  color: var(--sw-text-heading);
  font-size: 0.875rem;
  font-weight: var(--sw-fw-medium);
}

.mk-caps .mk-icon {
  width: 1rem;
  height: 1rem;
  color: var(--sw-primary-700);
}

/* ============================================================
   Feature index icons
   ============================================================ */
.mk-index__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--sw-space-5);
  border-radius: 0.625rem;
  background: var(--sw-primary-100);
  color: var(--sw-primary-700);
}

.mk-index__icon .mk-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.mk-bento--mini {
  margin-top: var(--sw-space-9);
}

.mk-split > * {
  min-width: 0;
}

@media (max-width: 479px) {
  .mk-art-board {
    grid-template-columns: repeat(3, 4.75rem);
  }
  .mk-art-roles {
    gap: var(--sw-space-4);
  }
  .mk-art-panel {
    width: 9rem;
    padding: var(--sw-space-4);
  }
  .mk-art-hub {
    gap: var(--sw-space-2);
  }
  .mk-art-sat {
    width: 2.25rem;
    height: 2.25rem;
  }
  .mk-art-sat .mk-icon {
    width: 1.0625rem;
    height: 1.0625rem;
  }
  .mk-art-wire {
    width: 0.875rem;
  }
  .mk-orb {
    width: 3.75rem;
    height: 3.75rem;
  }
  .mk-log {
    width: 14.5rem;
  }
}
/* ============================================================
   Animated stars
   ============================================================ */
.mk-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.mk-cta2 > .mk-deco {
  position: absolute;
}

.mk-deco--star {
  width: var(--s, 1.5rem);
  height: var(--s, 1.5rem);
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(9, 165, 194, 0.45));
  animation: mk-twinkle var(--d, 5s) ease-in-out var(--w, 0s) infinite;
}

.mk-deco--star svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--sw-primary-400);
}

.mk-deco--star.is-deep svg {
  fill: var(--sw-primary-500);
}

.mk-deco--onink {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
}

.mk-deco--onink svg {
  fill: rgba(255, 255, 255, 0.75);
}

@keyframes mk-twinkle {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(-25deg);
  }
  35% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  65% {
    opacity: 1;
    transform: scale(1.2) rotate(10deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.2) rotate(25deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-deco--star {
    animation: none;
    opacity: 0.85;
  }
}
.mk-section-head--center {
  position: relative;
}

@media (max-width: 999px) {
  .mk-deco--wide {
    display: none;
  }
}
@media (max-width: 759px) {
  .mk-deco--mid {
    display: none;
  }
}
.mk-art-board {
  grid-template-columns: repeat(3, minmax(0, 5.5rem));
  max-width: calc(100% - 1.5rem);
}

.mk-art-flow {
  width: calc(100% - 1.5rem);
  justify-content: center;
}

.mk-art-flow .mk-art-form,
.mk-art-flow .mk-art-deal {
  flex: 0 1 7rem;
  width: auto;
  min-width: 0;
}

.mk-art-roles {
  width: calc(100% - 1.5rem);
  justify-content: center;
}

.mk-art-roles .mk-art-panel {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 11rem;
}

.mk-art-ai {
  width: min(17rem, 100% - 1rem);
}

/* ============================================================
   Hero: the product as a cluster of small cards
   ============================================================ */
.mk-px-wrap {
  max-width: 64rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  text-align: left;
}

@media (max-width: 899px) {
  .mk-px-board,
.mk-px-sched,
.mk-px-mail {
    display: none;
  }
}
.mk-px-toast .mk-fx-tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--sw-primary-200);
  border-radius: 0.625rem;
  background: linear-gradient(160deg, #fff, var(--sw-primary-100));
  color: var(--sw-primary-700);
}

.mk-px-toast .mk-fx-tile .mk-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.mk-px i {
  font-style: normal;
}

.mk-px i.mk-mock__line {
  display: block;
}

.mk-fx-seg {
  display: inline-flex;
  padding: 0.125rem;
  border-radius: 0.4rem;
  background: #eef0f4;
  font-weight: var(--sw-fw-medium);
}

.mk-fx-seg b, .mk-fx-seg i {
  padding: 0.1875rem 0.5rem;
  border-radius: 0.3rem;
}

.mk-fx-seg b {
  background: #fff;
  color: var(--sw-text-heading);
  box-shadow: var(--sw-shadow-xs);
}

.mk-fx-link {
  color: var(--sw-primary-600);
  font-weight: var(--sw-fw-semibold);
}

.mk-fx-card {
  padding: 0.625rem 0.75rem;
  background: #fff;
  border-radius: 0.625rem;
  box-shadow: var(--sw-shadow-xs);
}

.mk-fx-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sw-space-4);
  margin-bottom: 0.5rem;
}

.mk-fx-card b {
  display: block;
  color: var(--sw-text-heading);
  font-size: 0.75rem;
}

.mk-fx-card small {
  color: var(--sw-text-muted);
  font-size: 0.625rem;
}

.mk-fx-metric {
  position: relative;
  padding: 0.625rem 0.75rem;
  background: #fff;
  border-radius: 0.625rem;
  box-shadow: var(--sw-shadow-xs);
}

.mk-fx-metric__icon {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.375rem;
  border-radius: 0.4rem;
}

.mk-fx-metric__icon .mk-icon {
  width: 0.8125rem;
  height: 0.8125rem;
}

.mk-fx-metric__icon.is-cyan {
  background: #e1f4f8;
  color: #0b8ca6;
}

.mk-fx-metric__icon.is-green {
  background: #e2f4ea;
  color: #1d8a4b;
}

.mk-fx-metric__icon.is-slate {
  background: #ecedf1;
  color: var(--sw-gray-700);
}

.mk-fx-metric__icon.is-teal {
  background: var(--sw-primary-100);
  color: var(--sw-primary-800);
}

.mk-fx-metric em {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  padding: 0.0625rem 0.4rem;
  border-radius: var(--sw-radius-pill);
  background: #eef0f4;
  color: var(--sw-text-body);
  font-size: 0.5625rem;
  font-style: normal;
  font-weight: var(--sw-fw-bold);
}

.mk-fx-metric strong {
  display: block;
  color: var(--sw-text-heading);
  font-size: 1.25rem;
  line-height: 1.1;
}

.mk-fx-metric small {
  color: var(--sw-text-muted);
  font-size: 0.625rem;
}

.mk-fx-sched {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-fx-sched li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding-block: 0.4rem;
  border-top: 1px solid var(--sw-divider);
}

.mk-fx-sched time {
  flex: none;
  width: 2rem;
  color: var(--sw-text-heading);
  font-weight: var(--sw-fw-semibold);
}

.mk-fx-sched div {
  flex: 1;
}

.mk-fx-sched .mk-mock__line {
  margin: 0 0 0.25rem;
}

.mk-fx-bar {
  display: flex;
  gap: 0.125rem;
  height: 0.4375rem;
  margin-bottom: 0.5rem;
}

.mk-fx-bar i {
  background: var(--c);
  border-radius: var(--sw-radius-pill);
}

.mk-fx-stages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-fx-stages li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.mk-fx-stages li > i {
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--c);
}

.mk-fx-stages li > div {
  flex: 1;
  min-width: 0;
}

.mk-fx-stages em {
  margin-left: 0.25rem;
  color: var(--sw-text-muted);
  font-size: 0.5rem;
  font-style: normal;
  font-weight: var(--sw-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mk-fx-stages strong {
  color: var(--sw-text-heading);
  font-size: 0.8125rem;
}

.mk-fx-colhead {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
  padding: 0.3125rem 0.5rem;
  border-radius: 0.5rem;
  background: #f0f0f4;
  background: color-mix(in srgb, var(--c) 10%, #fff);
  box-shadow: inset 3px 0 0 var(--c);
}

.mk-fx-colhead i {
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--c);
}

.mk-fx-colhead b {
  color: var(--sw-text-heading);
}

.mk-fx-colhead em {
  color: var(--sw-text-muted);
  font-size: 0.5rem;
  font-style: normal;
  font-weight: var(--sw-fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mk-fx-colhead span {
  margin-left: auto;
  padding: 0 0.4rem;
  border-radius: var(--sw-radius-pill);
  background: #fff;
  color: var(--sw-text-heading);
  font-weight: var(--sw-fw-semibold);
}

.mk-fx-deal {
  position: relative;
  margin-bottom: 0.4rem;
  padding: 0.5rem 0.625rem;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: inset 3px 0 0 var(--c), var(--sw-shadow-xs);
}

.mk-fx-deal > .mk-mock__line {
  margin-bottom: 0.5rem;
}

.mk-fx-deal__meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--sw-text-body);
}

.mk-fx-deal__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.mk-fx-deal__meta svg {
  width: 0.75rem;
  height: 0.75rem;
}

.mk-fx-avatar {
  margin-left: auto;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #d6d6dc;
}

.mk-fx-deal--new {
  box-shadow: inset 3px 0 0 var(--c), 0 0 0 2px var(--sw-primary-300), var(--sw-shadow-sm);
  animation: mk-flow-land 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both;
}

@media (prefers-reduced-motion: reduce) {
  .mk-fx-deal--new {
    animation: none;
  }
}
.mk-fx-mail__row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.5rem 0.375rem;
  border-radius: 0.4rem;
}

.mk-fx-mail__row > i {
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-top: 0.25rem;
  border-radius: 50%;
  background: transparent;
}

.mk-fx-mail__row.is-unread {
  background: var(--sw-primary-100);
}

.mk-fx-mail__row.is-unread > i {
  background: var(--sw-primary-600);
}

.mk-fx-mail__row > div {
  flex: 1;
}

.mk-fx-mail__row .mk-mock__line {
  margin-bottom: 0.25rem;
}

.mk-fx-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--sw-space-2);
  padding: 0.1875rem 0.625rem;
  border-radius: var(--sw-radius-pill);
  background: rgba(40, 199, 111, 0.14);
  color: #167a45;
  font-size: 0.6875rem;
  font-weight: var(--sw-fw-semibold);
}

.mk-fx-badge .mk-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.mk-px {
  position: relative;
  display: grid;
  gap: var(--sw-space-7);
  color: var(--sw-text-body);
  font-size: 0.6875rem;
  line-height: 1.35;
}

.mk-px-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sw-space-5);
}

.mk-px .mk-fx-metric,
.mk-px-card {
  box-shadow: var(--sw-shadow);
}

.mk-px-card {
  padding: var(--sw-space-6);
  background: #fff;
  border-radius: 1rem;
}

.mk-px-board {
  padding: var(--sw-space-5);
}

.mk-px-board .mk-fx-col {
  padding: 0;
}

.mk-fx-stages--one {
  grid-template-columns: 1fr;
}

.mk-px-mail .mk-fx-mail__row {
  margin-bottom: var(--sw-space-3);
}

.mk-px-mail .mk-fx-badge {
  margin-top: var(--sw-space-3);
}

.mk-px-ai .mk-ai {
  padding: 0.875rem;
  border: 1px solid var(--sw-border);
  border-radius: 1rem;
  box-shadow: var(--sw-shadow-lg);
  font-size: 0.6875rem;
}

.mk-px-toast {
  display: none;
  align-items: center;
  gap: var(--sw-space-5);
  width: 15rem;
  padding: var(--sw-space-5) var(--sw-space-6);
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 1rem;
  box-shadow: var(--sw-shadow-lg);
}

.mk-px-toast b {
  display: block;
  color: var(--sw-text-heading);
}

.mk-px-toast small {
  color: var(--sw-text-body);
}

@media (min-width: 900px) {
  .mk-px {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sw-space-7);
    align-items: start;
  }
  .mk-px-metrics {
    grid-column: 1/span 7;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .mk-px-pipe {
    grid-column: 1/span 4;
  }
  .mk-px-board {
    grid-column: 5/span 3;
  }
  .mk-px-sched {
    grid-column: 1/span 3;
  }
  .mk-px-mail {
    grid-column: 4/span 4;
  }
  .mk-px-ai {
    grid-column: 8/span 5;
    grid-row: 1/span 4;
    align-self: stretch;
  }
  .mk-px-ai .mk-ai {
    height: 100%;
  }
  .mk-px-toast {
    display: flex;
    width: auto;
  }
  .mk-px-toast--1 {
    grid-column: 1/span 3;
    grid-row: 4;
  }
  .mk-px-toast--2 {
    grid-column: 4/span 4;
    grid-row: 4;
  }
}
@media (min-width: 900px) {
  .mk-px-float {
    animation: mk-px-drift var(--d, 8s) ease-in-out var(--w, 0s) infinite;
  }
}
@keyframes mk-px-drift {
  0%, 100% {
    transform: translateY(0) rotate(var(--r, 0deg));
  }
  50% {
    transform: translateY(-0.4rem) rotate(var(--r, 0deg));
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-px-float {
    animation: none;
  }
}
/* ============================================================
   Small shared pieces
   ============================================================ */
i.mk-mock__line {
  display: block;
}

.mk-fineprint {
  margin-top: var(--sw-space-6);
  font-size: var(--sw-font-size-sm);
}

.mk-split--spaced {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.mk-icon-tile--sm {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--sw-space-5);
  border-radius: var(--sw-radius);
}

.mk-icon-tile--sm .mk-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.mk-record__avatar--sm {
  width: 1.75rem;
  height: 1.75rem;
}

.mk-bento.mk-bento--2 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .mk-bento.mk-bento--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.mk-bento.mk-bento--2 > .mk-bento__card {
  grid-column: auto;
}

.mk-callout {
  border: 1px dashed var(--sw-primary-400);
  background: rgba(9, 165, 194, 0.06);
}

/* ============================================================
   Chips, badges and tiles used inside the illustrations
   ============================================================ */
.mk-fa-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sw-space-3);
}

.mk-fa-chips span,
.mk-fa-chips__one {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.625rem;
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-pill);
  background: #fff;
  color: var(--sw-text-body);
  font-size: 0.6875rem;
  font-weight: var(--sw-fw-semibold);
  white-space: nowrap;
}

.mk-fa-chips .is-accent,
.mk-fa-chips__one.is-accent {
  border-color: var(--sw-primary-200);
  background: var(--sw-primary-100);
  color: var(--sw-primary-800);
}

.mk-fa-chips--cloud {
  max-width: 24rem;
  gap: var(--sw-space-4);
}

.mk-fa-chips--cloud span {
  padding: 0.3125rem 0.75rem;
  font-size: 0.75rem;
  box-shadow: var(--sw-shadow-xs);
}

.mk-fa-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sw-space-2);
  padding: 0.1875rem 0.625rem;
  border-radius: var(--sw-radius-pill);
  background: rgba(40, 199, 111, 0.14);
  color: #167a45;
  font-size: 0.6875rem;
  font-weight: var(--sw-fw-semibold);
}

.mk-fa-badge .mk-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.mk-fa-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--sw-primary-200);
  border-radius: 0.875rem;
  background: linear-gradient(160deg, #fff, var(--sw-primary-100));
  color: var(--sw-primary-700);
  box-shadow: var(--sw-shadow-sm);
}

.mk-fa-tile .mk-icon {
  width: 1.375rem;
  height: 1.375rem;
}

.mk-fa-tile--sm {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
}

.mk-fa-tile--sm .mk-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.mk-fa-contact,
.mk-fa-week,
.mk-fa-file,
.mk-fa-comment,
.mk-fa-tab,
.mk-fa-search {
  display: flex;
  flex-direction: column;
  gap: var(--sw-space-5);
  width: min(18rem, 100% - 1.5rem);
  padding: var(--sw-space-6);
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 0.75rem;
  box-shadow: var(--sw-shadow-sm);
}

/* ============================================================
   Feature-page illustrations
   ============================================================ */
.mk-fa-contact__top {
  display: flex;
  align-items: center;
  gap: var(--sw-space-5);
}

.mk-fa-contact__who {
  flex: 1;
}

.mk-fa-contact .mk-fa-badge {
  align-self: flex-start;
}

.mk-fa-week__days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
  font-size: 0.625rem;
  font-weight: var(--sw-fw-semibold);
  color: var(--sw-text-muted);
}

.mk-fa-week__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1.0625rem);
  gap: 0.25rem;
}

.mk-fa-ev {
  border-radius: 0.3rem;
  background: var(--sw-primary-300);
}

.mk-fa-ev.is-ok {
  background: var(--sw-success);
  opacity: 0.8;
}

.mk-fa-ev.is-ghost {
  background: transparent;
  border: 1.5px dashed var(--sw-gray-400);
}

.mk-fa-offers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sw-space-6);
}

.mk-fa-offers__tiles {
  display: flex;
  gap: var(--sw-space-5);
}

.mk-fa-offers__tiles .mk-fa-tile {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
}

.mk-fa-offers__tiles .mk-fa-tile .mk-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.mk-fa-file__row {
  display: flex;
  align-items: center;
  gap: var(--sw-space-5);
}

.mk-fa-file__main {
  flex: 1;
}

.mk-fa-file__bar {
  display: block;
  height: 0.375rem;
  margin-top: var(--sw-space-3);
  border-radius: var(--sw-radius-pill);
  background: var(--sw-gray-100);
  overflow: hidden;
}

.mk-fa-file__bar i {
  display: block;
  width: 72%;
  height: 100%;
  background: var(--sw-primary-500);
}

.mk-fa-comment__bubble {
  display: flex;
  gap: var(--sw-space-5);
  align-items: flex-start;
}

.mk-fa-comment__bubble > div {
  flex: 1;
}

.mk-fa-tl {
  width: auto;
}

.mk-fa-tl .mk-tl li {
  grid-template-columns: 1.875rem 1fr;
  gap: var(--sw-space-5);
  padding-bottom: var(--sw-space-5);
}

.mk-fa-tl .mk-tl li:not(:last-child)::after {
  left: 0.9rem;
  top: 1.875rem;
}

.mk-fa-tl .mk-tl__dot {
  width: 1.875rem;
  height: 1.875rem;
}

.mk-fa-tl .mk-tl__dot .mk-icon {
  width: 0.9375rem;
  height: 0.9375rem;
}

.mk-fa-tl .mk-tl__title {
  margin-bottom: 0.125rem;
  font-size: 0.75rem;
}

.mk-fa-tl .mk-tl__tag {
  font-size: 0.625rem;
}

.mk-fa-search {
  width: min(22rem, 100% - 1.5rem);
  margin-inline: auto;
}

.mk-fa-search__box {
  display: flex;
  align-items: center;
  gap: var(--sw-space-4);
  padding: var(--sw-space-4) var(--sw-space-5);
  border: 1px solid var(--sw-primary-300);
  border-radius: var(--sw-radius-lg);
  background: var(--sw-primary-100);
  color: var(--sw-primary-700);
}

.mk-fa-search__box .mk-icon {
  width: 1rem;
  height: 1rem;
}

.mk-fa-search__box .mk-mock__line {
  flex: 0 1 8rem;
  margin: 0;
}

.mk-fa-search__row {
  display: flex;
  align-items: center;
  gap: var(--sw-space-5);
  padding-block: var(--sw-space-3);
  border-bottom: 1px solid var(--sw-divider);
}

.mk-fa-search__row > div {
  flex: 1;
}

.mk-fa-search__row .mk-mock__line {
  margin: 0;
}

.mk-fa-thread {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sw-space-4);
  width: min(18rem, 100% - 1.5rem);
}

.mk-fa-msg {
  display: flex;
  align-items: center;
  gap: var(--sw-space-4);
  width: 85%;
  padding: var(--sw-space-4) var(--sw-space-5);
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 0.75rem;
  box-shadow: var(--sw-shadow-xs);
}

.mk-fa-msg > .mk-icon {
  width: 1rem;
  height: 1rem;
  color: var(--sw-primary-700);
}

.mk-fa-msg > div {
  flex: 1;
}

.mk-fa-msg .mk-mock__line {
  margin-bottom: var(--sw-space-2);
}

.mk-fa-msg.is-out {
  align-self: flex-start;
}

.mk-fa-msg.is-in {
  align-self: flex-end;
  border-color: var(--sw-primary-200);
  background: var(--sw-primary-100);
}

.mk-fa-appt {
  width: 8rem;
  margin: 0;
}

.mk-fa-appt .mk-fa-chips__one {
  margin-top: var(--sw-space-3);
}

.mk-fa-notify {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sw-space-6);
}

.mk-fa-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--sw-primary-200);
  border-radius: 1rem;
  background: #fff;
  color: var(--sw-primary-700);
  box-shadow: var(--sw-shadow-sm);
}

.mk-fa-bell .mk-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.mk-fa-bell b {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  display: grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-primary-500);
  color: #fff;
  font-size: 0.6875rem;
}

.mk-fa-roles {
  display: flex;
  align-items: flex-end;
  gap: var(--sw-space-3);
  width: calc(100% - 1.5rem);
  max-width: 22rem;
  margin-inline: auto;
}

.mk-fa-roles span {
  display: flex;
  flex: 1 1 0;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  padding: var(--sw-space-3);
  border-radius: 0.5rem 0.5rem 0 0;
  background: var(--sw-primary-100);
  color: var(--sw-primary-800);
  font-size: 0.6875rem;
  font-weight: var(--sw-fw-semibold);
  line-height: 1.15;
  text-align: center;
}

.mk-fa-roles span:nth-child(1) {
  height: 2.5rem;
}

.mk-fa-roles span:nth-child(2) {
  height: 3.5rem;
  background: var(--sw-primary-200);
}

.mk-fa-roles span:nth-child(3) {
  height: 4.5rem;
  background: var(--sw-primary-500);
  color: #fff;
}

.mk-fa-roles span:nth-child(4) {
  height: 5.5rem;
  background: var(--sw-primary-700);
  color: #fff;
}

.mk-fa-tab__bar {
  display: flex;
  align-items: center;
  gap: var(--sw-space-4);
  padding-bottom: var(--sw-space-4);
  border-bottom: 1px solid var(--sw-divider);
}

.mk-fa-tab__fav {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.3rem;
  background: linear-gradient(160deg, #0ba2bf, #067f89);
}

.mk-fa-tab__bar .mk-mock__line {
  flex: 1;
  margin: 0;
}

.mk-fa-mcp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sw-space-8);
}

.mk-fa-mcp .mk-orb {
  width: 3.75rem;
  height: 3.75rem;
}

.mk-fa-turnstile {
  display: flex;
  align-items: center;
  gap: var(--sw-space-5);
  padding: var(--sw-space-6) var(--sw-space-8);
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 0.625rem;
  box-shadow: var(--sw-shadow-sm);
}

.mk-fa-turnstile b {
  color: var(--sw-text-heading);
}

.mk-fa-turnstile__shield {
  margin-left: var(--sw-space-6);
  color: var(--sw-primary-600);
}

.mk-fa-turnstile__shield .mk-icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* ============================================================
   Security illustrations
   ============================================================ */
.mk-sec-tenant {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sw-space-6);
}

.mk-sec-tenant__acct {
  display: flex;
  flex-direction: column;
  gap: var(--sw-space-4);
  padding: var(--sw-space-7);
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 1rem;
  font-size: var(--sw-font-size-sm);
}

.mk-sec-tenant__acct b {
  color: var(--sw-text-heading);
  font-size: 0.8125rem;
}

.mk-sec-tenant__acct .mk-mock__line {
  margin: 0;
}

.mk-sec-tenant__acct.is-mine {
  border-color: var(--sw-primary-300);
  background: linear-gradient(180deg, #fff, var(--sw-primary-100));
  box-shadow: 0 0 0 0.3rem rgba(9, 165, 194, 0.1);
}

.mk-sec-tenant__ok,
.mk-sec-tenant__no {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--sw-space-2);
  margin-top: var(--sw-space-3);
  padding: 0.1875rem 0.625rem;
  border-radius: var(--sw-radius-pill);
  font-size: 0.6875rem;
  font-weight: var(--sw-fw-semibold);
}

.mk-sec-tenant__ok {
  background: rgba(40, 199, 111, 0.14);
  color: #167a45;
}

.mk-sec-tenant__no {
  background: var(--sw-gray-100);
  color: var(--sw-gray-700);
}

.mk-sec-tenant__ok .mk-icon,
.mk-sec-tenant__no .mk-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.mk-sec-roles {
  display: flex;
  flex-direction: column;
  gap: var(--sw-space-9);
}

.mk-sec-secrets {
  display: flex;
  flex-direction: column;
  gap: var(--sw-space-5);
}

.mk-sec-secrets__row {
  display: flex;
  align-items: center;
  gap: var(--sw-space-6);
  padding: var(--sw-space-6) var(--sw-space-7);
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 0.875rem;
  box-shadow: var(--sw-shadow-xs);
}

.mk-sec-secrets__row > div {
  flex: 1;
}

.mk-sec-secrets__row b {
  display: block;
  margin-bottom: var(--sw-space-3);
  color: var(--sw-text-heading);
  font-size: var(--sw-font-size-sm);
}

.mk-sec-secrets__row .mk-mock__line {
  margin: 0;
}

.mk-sec-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sw-space-3);
  padding: var(--sw-space-9);
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 1rem;
  box-shadow: var(--sw-shadow-sm);
}

.mk-sec-steps > span {
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-pill);
  background: var(--sw-body-bg);
  color: var(--sw-text-heading);
  font-size: var(--sw-font-size-sm);
  font-weight: var(--sw-fw-semibold);
}

.mk-sec-steps > span.is-accent {
  border-color: var(--sw-primary-200);
  background: var(--sw-primary-100);
  color: var(--sw-primary-800);
}

.mk-sec-steps > i {
  width: 0.5rem;
  height: 0.5rem;
  margin-bottom: 0.125rem;
  border-top: 2px solid var(--sw-primary-400);
  border-right: 2px solid var(--sw-primary-400);
  transform: rotate(135deg);
}

.mk-sec-steps__alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sw-space-4);
  margin: var(--sw-space-5) 0 0;
  font-size: var(--sw-font-size-sm);
  color: var(--sw-text-body);
}

.mk-sec-steps__alt .mk-icon {
  width: 1rem;
  height: 1rem;
  color: var(--sw-primary-700);
}

/* ============================================================
   About
   ============================================================ */
.mk-about-scale {
  display: flex;
  flex-direction: column;
  gap: var(--sw-space-6);
}

.mk-about-scale > div {
  display: flex;
  flex-direction: column;
  gap: var(--sw-space-2);
  padding: var(--sw-space-8);
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 1rem;
}

.mk-about-scale b {
  color: var(--sw-text-heading);
  font-size: 1.0625rem;
}

.mk-about-scale span {
  font-size: 0.9375rem;
}

.mk-about-scale > .mk-about-scale__mid {
  border-color: transparent;
  background: linear-gradient(160deg, #0ba2bf, #067f89);
  box-shadow: 0 14px 30px rgba(6, 127, 137, 0.3);
}

.mk-about-scale__mid b,
.mk-about-scale__mid span {
  color: #fff;
}

.mk-about-stack {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: var(--sw-space-5);
}

.mk-about-stack span {
  padding: 0.5rem 1rem;
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-pill);
  background: #fff;
  color: var(--sw-text-heading);
  font-weight: var(--sw-fw-semibold);
  box-shadow: var(--sw-shadow-xs);
}

.mk-about-stack .is-accent {
  border-color: var(--sw-primary-200);
  background: var(--sw-primary-100);
  color: var(--sw-primary-800);
}

.mk-card--no .mk-icon-tile {
  background: var(--sw-gray-100);
  color: var(--sw-gray-600);
}

/* ============================================================
   Contact
   ============================================================ */
.mk-contact-card {
  border-radius: 1.125rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mk-contact-card:hover {
  border-color: var(--sw-primary-300);
  box-shadow: var(--sw-shadow);
}

@media (max-width: 479px) {
  .mk-contact-card {
    flex-direction: column;
    padding: var(--sw-space-7);
  }
}
.mk-contact-card--feature {
  border-color: var(--sw-primary-300);
  background: linear-gradient(180deg, #fff, var(--sw-primary-100));
  box-shadow: 0 0 0 0.3rem rgba(9, 165, 194, 0.08);
}

.mk-contact-card--feature .mk-icon-tile {
  background: #fff;
}

/* ============================================================
   Docs
   ============================================================ */
.mk-section--docs {
  padding-top: clamp(2rem, 4vw, 3rem);
}

.mk-breadcrumb a {
  color: var(--sw-text-body);
}

.mk-breadcrumb a:hover {
  color: var(--sw-primary-700);
}

.mk-breadcrumb__group {
  padding: 0.0625rem 0.625rem;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-primary-100);
  color: var(--sw-primary-800);
  font-weight: var(--sw-fw-medium);
}

.mk-docs__feedback {
  margin-top: var(--sw-space-11);
}

.mk-prose table {
  border: 1px solid var(--sw-border);
  border-radius: 0.75rem;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.mk-prose th {
  background: var(--sw-body-bg);
}

.mk-prose tr:last-child td {
  border-bottom: 0;
}

.mk-prose pre {
  margin: 0 0 var(--sw-space-6);
  padding: var(--sw-space-6) var(--sw-space-7);
  border: 1px solid var(--sw-divider);
  border-radius: 0.75rem;
  background: var(--sw-body-bg);
  line-height: 1.6;
}

.mk-prose pre code {
  padding: 0;
  background: none;
  font-size: 0.875rem;
}

.mk-prose li > pre {
  margin-top: var(--sw-space-4);
}

/* ============================================================
   Features: a soft wash of light, a mosaic of every feature, and a jump bar
   ============================================================ */
.mk-ft-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: radial-gradient(46rem 30rem at 76% 40%, rgba(9, 165, 194, 0.16), transparent 70%), radial-gradient(34rem 22rem at 6% 0%, rgba(9, 165, 194, 0.08), transparent 70%), radial-gradient(24rem 14rem at 28% 100%, rgba(9, 165, 194, 0.1), transparent 70%), radial-gradient(20rem 12rem at 48% 6%, rgba(9, 165, 194, 0.07), transparent 70%), radial-gradient(18rem 12rem at 100% 100%, rgba(9, 165, 194, 0.1), transparent 70%), linear-gradient(180deg, #fff, var(--sw-body-bg));
}

.mk-ft-hero > .mk-container {
  position: relative;
  z-index: 1;
}

.mk-ft-hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 960px) {
  .mk-ft-hero__grid {
    grid-template-columns: 1fr 1.05fr;
  }
}
.mk-ft-hero__kicker {
  margin: 0 0 var(--sw-space-5);
  font-size: var(--sw-font-size-sm);
  font-weight: var(--sw-fw-semibold);
  color: var(--sw-primary-700);
}

.mk-ft-hero__title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  text-wrap: balance;
}

.mk-ft-hero .mk-btn-row {
  margin-top: var(--sw-space-9);
}

.mk-ft-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;
}

@media (max-width: 519px) {
  .mk-ft-mosaic .mk-ft-tile {
    aspect-ratio: 8/5;
  }
}
@media (min-width: 520px) {
  .mk-ft-mosaic {
    grid-template-columns: repeat(6, 1fr);
  }
}
.mk-ft-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  aspect-ratio: 1;
  padding: 0.5rem;
  border: 1px solid var(--sw-border);
  border-radius: 1rem;
  background: #fff;
  color: var(--sw-primary-700);
  box-shadow: var(--sw-shadow-xs);
  animation: mk-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 45ms + 0.1s);
}

.mk-ft-tile .mk-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.mk-ft-tile b {
  font-size: 0.625rem;
  font-weight: var(--sw-fw-semibold);
  line-height: 1.1;
  text-align: center;
  color: var(--sw-text-heading);
}

.mk-ft-tile--soft {
  border-color: var(--sw-primary-200);
  background: var(--sw-primary-100);
}

.mk-ft-tile--strong {
  border-color: transparent;
  background: linear-gradient(160deg, #0ba2bf, #067f89);
  color: #fff;
  box-shadow: 0 8px 18px rgba(6, 127, 137, 0.3);
}

.mk-ft-tile--strong b {
  color: #fff;
}

@keyframes mk-pop {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-ft-tile {
    animation: none;
  }
}
.mk-jump {
  position: sticky;
  top: 4.25rem;
  z-index: 30;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-block: 1px solid var(--sw-divider);
}

.mk-jump__inner {
  display: flex;
  gap: var(--sw-space-4);
  padding-block: var(--sw-space-5);
  overflow-x: auto;
  scrollbar-width: none;
}

@media (max-width: 759px) {
  .mk-jump__inner {
    padding-inline-end: 3rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
  }
}
.mk-jump a {
  flex: none;
  padding: 0.375rem 0.875rem;
  border-radius: var(--sw-radius-pill);
  color: var(--sw-text-body);
  font-size: 0.875rem;
  font-weight: var(--sw-fw-medium);
}

.mk-jump a:hover {
  background: var(--sw-primary-100);
  color: var(--sw-primary-800);
}

.mk-section[id] {
  scroll-margin-top: 7.5rem;
}

/* ============================================================
   Security: layers of defence orbiting a shield
   ============================================================ */
.mk-sx-hero {
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: radial-gradient(34rem 30rem at 78% 50%, rgba(9, 165, 194, 0.2), transparent 70%), radial-gradient(24rem 16rem at 4% 6%, rgba(9, 165, 194, 0.1), transparent 70%), radial-gradient(26rem 14rem at 30% 100%, rgba(9, 165, 194, 0.09), transparent 70%), radial-gradient(18rem 10rem at 52% 0%, rgba(9, 165, 194, 0.07), transparent 70%), radial-gradient(50rem 30rem at 85% 40%, var(--sw-primary-100), transparent 70%), linear-gradient(180deg, #fff, var(--sw-body-bg));
}

.mk-sx-hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 960px) {
  .mk-sx-hero__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.mk-sx-hero__title {
  margin-top: var(--sw-space-6);
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  text-wrap: balance;
}

.mk-sx-facts {
  margin-top: var(--sw-space-8);
}

.mk-sx-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: min(30rem, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
}

.mk-sx-orbit__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(9, 165, 194, 0.28);
}

.mk-sx-orbit__ring--1 {
  inset: 26%;
}

.mk-sx-orbit__ring--2 {
  inset: 12%;
  border-style: dashed;
  opacity: 0.8;
  animation: mk-sx-turn 48s linear infinite;
}

.mk-sx-orbit__ring--3 {
  inset: 0;
  border-color: rgba(9, 165, 194, 0.14);
}

.mk-sx-orbit__core {
  position: relative;
  z-index: 2;
}

.mk-sx-orbit::before,
.mk-sx-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.mk-sx-orbit::before {
  inset: 0;
  background: conic-gradient(from 290deg, transparent, rgba(9, 165, 194, 0.22) 70deg, transparent 70.5deg);
  animation: mk-sx-turn 14s linear infinite;
}

.mk-sx-orbit::after {
  inset: 38%;
  border: 2px solid var(--sw-primary-300);
  animation: mk-sx-pulse 3.6s ease-out infinite;
}

@keyframes mk-sx-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes mk-sx-pulse {
  from {
    transform: scale(0.7);
    opacity: 0.9;
  }
  to {
    transform: scale(3.9);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-sx-orbit::before,
.mk-sx-orbit__ring--2 {
    animation: none;
  }
  .mk-sx-orbit::after {
    display: none;
  }
}
.mk-sx-node {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--sw-space-3);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--sw-primary-200);
  border-radius: var(--sw-radius-pill);
  background: #fff;
  box-shadow: var(--sw-shadow-sm);
  color: var(--sw-text-heading);
  font-size: 0.75rem;
  font-weight: var(--sw-fw-semibold);
  white-space: nowrap;
}

.mk-sx-node .mk-icon {
  width: 0.9375rem;
  height: 0.9375rem;
  color: var(--sw-primary-700);
}

.mk-sx-node--1 {
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
}

.mk-sx-node--2 {
  top: 22%;
  right: 0;
}

.mk-sx-node--3 {
  bottom: 16%;
  right: 4%;
}

.mk-sx-node--4 {
  bottom: 4%;
  left: 14%;
}

.mk-sx-node--5 {
  top: 38%;
  left: 0;
}

@media (max-width: 479px) {
  .mk-sx-node--2 {
    top: 19%;
  }
  .mk-sx-node--5 {
    top: 19%;
  }
}
@media (max-width: 379px) {
  .mk-sx-node--1 {
    top: 0;
  }
  .mk-sx-node--2 {
    top: 13%;
  }
  .mk-sx-node--5 {
    top: 27%;
  }
}
.mk-bento__art--fit {
  height: auto;
  min-height: 12.5rem;
  padding: var(--sw-space-8) var(--sw-space-7);
}

.mk-bento__art--fit > * {
  width: 100%;
}

.mk-sx-cards .mk-bento__body p + p {
  margin-top: var(--sw-space-5);
}

.mk-sx-cards .mk-sec-roles {
  gap: var(--sw-space-6);
}

.mk-sx-cards .mk-roles {
  grid-template-columns: 1fr;
  gap: var(--sw-space-4);
}

@media (min-width: 960px) {
  .mk-sx-cards .mk-roles {
    grid-template-columns: 1fr 1fr;
  }
}
.mk-sx-cards .mk-roles__panel {
  padding: var(--sw-space-5);
}

.mk-sx-cards .mk-sec-steps {
  flex-flow: row wrap;
  justify-content: center;
  padding: var(--sw-space-7);
}

.mk-sx-cards .mk-sec-steps > i {
  margin: 0 0.125rem 0 0;
  transform: rotate(45deg);
}

.mk-sx-cards .mk-sec-steps__alt {
  flex-basis: 100%;
}

.mk-sx-lists {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 960px) {
  .mk-sx-lists {
    grid-template-columns: 1fr 1fr;
  }
}
.mk-sx-lists h2 {
  margin-bottom: var(--sw-space-4);
}

.mk-sx-lists > div > p {
  margin-bottom: var(--sw-space-7);
}

.mk-sx-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-sx-list li {
  display: flex;
  gap: var(--sw-space-6);
  margin: 0;
  padding-block: var(--sw-space-6);
  border-top: 1px solid var(--sw-divider);
}

.mk-sx-list .mk-icon-tile--sm {
  flex: none;
  margin: 0;
}

.mk-sx-list h3 {
  margin: 0 0 var(--sw-space-2);
  font-size: 1rem;
}

.mk-sx-list p {
  margin: 0;
  font-size: 0.9375rem;
}

/* ============================================================
   Integrations: the CRM at the hub, each integration on a spoke
   ============================================================ */
.mk-ix-hero {
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: radial-gradient(32rem 28rem at 76% 50%, rgba(9, 165, 194, 0.2), transparent 70%), radial-gradient(22rem 14rem at 6% 4%, rgba(9, 165, 194, 0.1), transparent 70%), radial-gradient(24rem 14rem at 34% 100%, rgba(9, 165, 194, 0.09), transparent 70%), radial-gradient(16rem 10rem at 50% 8%, rgba(9, 165, 194, 0.07), transparent 70%), radial-gradient(44rem 26rem at 78% 45%, var(--sw-primary-100), transparent 70%), linear-gradient(180deg, #fff, var(--sw-body-bg));
}

.mk-ix-hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}

@media (min-width: 960px) {
  .mk-ix-hero__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.mk-ix-hero__kicker {
  margin: 0 0 var(--sw-space-5);
  font-size: var(--sw-font-size-sm);
  font-weight: var(--sw-fw-semibold);
  color: var(--sw-primary-700);
}

.mk-ix-hero__title {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  text-wrap: balance;
}

@property --spin {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
.mk-ix-hub {
  --spin: 0deg;
  --size: min(28rem, calc(100vw - 3rem));
  --r: calc(var(--size) * .37);
  position: relative;
  width: var(--size);
  height: var(--size);
  margin-inline: auto;
  animation: mk-ix-spin 60s linear infinite;
}

@keyframes mk-ix-spin {
  to {
    --spin: 360deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-ix-hub {
    animation: none;
  }
}
.mk-ix-hub__core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
}

.mk-ix-hub__pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7rem;
  height: 7rem;
  margin: -3.5rem 0 0 -3.5rem;
  border: 2px solid var(--sw-primary-300);
  border-radius: 50%;
  animation: mk-ix-pulse 3.6s ease-out infinite;
}

@keyframes mk-ix-pulse {
  from {
    transform: scale(0.8);
    opacity: 0.9;
  }
  to {
    transform: scale(2.4);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-ix-hub__pulse {
    animation: none;
    opacity: 0.4;
  }
}
.mk-ix-spoke {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 2px;
  height: var(--r);
  margin-left: -1px;
  transform-origin: bottom center;
  transform: rotate(calc(var(--a) + var(--spin)));
  background: linear-gradient(to top, var(--sw-primary-400), var(--sw-primary-200));
}

.mk-ix-node {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sw-space-2);
  transform: translate(-50%, -50%) rotate(calc(var(--a) + var(--spin))) translateY(calc(var(--r) * -1)) rotate(calc((var(--a) + var(--spin)) * -1));
}

.mk-ix-node__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--sw-primary-200);
  border-radius: 50%;
  background: #fff;
  color: var(--sw-primary-700);
  box-shadow: var(--sw-shadow-sm);
}

.mk-ix-node__icon .mk-icon {
  width: 1.375rem;
  height: 1.375rem;
}

.mk-ix-node b {
  color: var(--sw-text-heading);
  font-size: 0.6875rem;
  font-weight: var(--sw-fw-semibold);
  white-space: nowrap;
}

/* ============================================================
   About: an editorial layout with numbered principles
   ============================================================ */
.mk-ab-hero {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background: linear-gradient(180deg, #fff, var(--sw-body-bg));
}

.mk-ab-hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

@media (min-width: 960px) {
  .mk-ab-hero__grid {
    grid-template-columns: 1.25fr 0.75fr;
  }
}
.mk-ab-hero__title {
  font-size: clamp(2.25rem, 5.6vw, 4.25rem);
  line-height: 1.04;
  text-wrap: balance;
}

.mk-ab-mark {
  padding-inline: 0.1em;
  background: linear-gradient(transparent 62%, rgba(9, 165, 194, 0.28) 62%);
}

.mk-ab-ledger {
  padding: var(--sw-space-8);
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 1.125rem;
  box-shadow: var(--sw-shadow);
}

.mk-ab-ledger__title {
  margin: 0 0 var(--sw-space-4);
  font-size: var(--sw-font-size-sm);
  font-weight: var(--sw-fw-semibold);
  color: var(--sw-text-muted);
}

.mk-ab-ledger ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-ab-ledger li {
  margin: 0;
  border-top: 1px solid var(--sw-divider);
}

.mk-ab-ledger a {
  display: flex;
  align-items: baseline;
  gap: var(--sw-space-5);
  padding: var(--sw-space-5) 0;
  color: var(--sw-text-heading);
  font-size: 0.9375rem;
  font-weight: var(--sw-fw-medium);
  line-height: 1.35;
}

.mk-ab-ledger a:hover {
  color: var(--sw-primary-700);
}

.mk-ab-ledger b {
  flex: none;
  color: var(--sw-primary-500);
  font-weight: var(--sw-fw-extrabold);
  letter-spacing: -0.02em;
}

.mk-ab-heading {
  margin-bottom: var(--sw-space-9);
}

.mk-ab-chapters {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-ab-chapters li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--sw-space-7);
  margin: 0;
  padding-block: var(--sw-space-10);
  border-top: 1px solid var(--sw-border);
  scroll-margin-top: 6rem;
}

@media (min-width: 760px) {
  .mk-ab-chapters li {
    grid-template-columns: 8rem minmax(0, 40rem);
  }
}
.mk-ab-chapters__n {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: var(--sw-fw-extrabold);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--sw-primary-200);
}

.mk-ab-chapters h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  margin-bottom: var(--sw-space-5);
}

.mk-ab-chapters p {
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ============================================================
   Contact: a conversation
   ============================================================ */
.mk-ct-hero {
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5rem);
  background: radial-gradient(40rem 24rem at 80% 30%, var(--sw-primary-100), transparent 70%), #fff;
}

.mk-ct-hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .mk-ct-hero__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.mk-ct-hero__title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.mk-ct-hero__mail {
  display: inline-flex;
  align-items: center;
  gap: var(--sw-space-4);
  margin-top: var(--sw-space-7);
  font-size: 1.25rem;
  font-weight: var(--sw-fw-bold);
}

.mk-ct-hero__mail .mk-icon {
  width: 1.375rem;
  height: 1.375rem;
}

.mk-ct-chat {
  display: flex;
  flex-direction: column;
  gap: var(--sw-space-5);
  width: min(24rem, 100%);
  margin-inline: auto;
}

.mk-ct-bubble {
  width: 78%;
  padding: var(--sw-space-6);
  border: 1px solid var(--sw-border);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: var(--sw-shadow-sm);
}

.mk-ct-bubble .mk-mock__line {
  margin-bottom: var(--sw-space-3);
}

.mk-ct-bubble .mk-mock__line:last-child {
  margin-bottom: 0;
}

.mk-ct-bubble.is-them {
  border-bottom-left-radius: 0.375rem;
}

.mk-ct-bubble.is-us {
  align-self: flex-end;
  border-color: transparent;
  border-bottom-right-radius: 0.375rem;
  background: linear-gradient(160deg, #0ba2bf, #067f89);
}

.mk-ct-bubble.is-us .mk-mock__line {
  background: rgba(255, 255, 255, 0.55);
}

.mk-ct-typing {
  align-self: flex-end;
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-pill);
  background: #fff;
}

.mk-ct-typing i {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--sw-primary-400);
  animation: mk-ct-dot 1.2s ease-in-out infinite;
}

.mk-ct-typing i:nth-child(2) {
  animation-delay: 0.15s;
}

.mk-ct-typing i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes mk-ct-dot {
  0%, 60%, 100% {
    transform: none;
    opacity: 0.5;
  }
  30% {
    transform: translateY(-0.25rem);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-ct-typing i {
    animation: none;
  }
}
/* ============================================================
   Docs: a hub with start-here tiles and a directory, and guides with a table of contents
   ============================================================ */
.mk-dx-hero {
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.25rem);
  background: radial-gradient(34rem 26rem at 78% 50%, rgba(9, 165, 194, 0.18), transparent 70%), radial-gradient(30rem 20rem at 4% 0%, rgba(9, 165, 194, 0.08), transparent 70%), radial-gradient(24rem 14rem at 32% 100%, rgba(9, 165, 194, 0.1), transparent 70%), radial-gradient(18rem 10rem at 54% 4%, rgba(9, 165, 194, 0.07), transparent 70%), radial-gradient(16rem 12rem at 100% 100%, rgba(9, 165, 194, 0.1), transparent 70%), linear-gradient(180deg, #fff, var(--sw-body-bg));
  border-bottom: 1px solid var(--sw-divider);
}

.mk-dx-hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}

@media (min-width: 900px) {
  .mk-dx-hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}
.mk-dx-hero__crumb {
  margin: 0 0 var(--sw-space-5);
  font-size: var(--sw-font-size-sm);
  font-weight: var(--sw-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sw-primary-700);
}

.mk-dx-hero__title {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
}

.mk-dx-stack {
  position: relative;
  width: min(22rem, 100%);
  height: 15.5rem;
  margin-inline: auto;
}

.mk-dx-page {
  position: absolute;
  width: min(15rem, 72%);
  padding: var(--sw-space-6);
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 0.75rem;
  box-shadow: var(--sw-shadow);
}

.mk-dx-page--back {
  top: 0;
  left: 0;
  height: 12rem;
  transform: rotate(-7deg);
  background: var(--sw-primary-100);
}

.mk-dx-page--mid {
  top: 1rem;
  left: 10%;
  height: 12.5rem;
  transform: rotate(-2deg);
}

.mk-dx-page--front {
  top: 2rem;
  left: 22%;
  height: 12.5rem;
  transform: rotate(4deg);
  box-shadow: var(--sw-shadow-lg);
}

.mk-dx-page b {
  display: block;
  width: 60%;
  height: 0.75rem;
  margin-bottom: var(--sw-space-5);
  border-radius: 0.25rem;
  background: var(--sw-text-heading);
  opacity: 0.8;
}

.mk-dx-page i {
  display: block;
}

.mk-dx-code {
  display: block;
  margin: var(--sw-space-5) 0;
  padding: var(--sw-space-5);
  border: 1px solid var(--sw-divider);
  border-radius: 0.5rem;
  background: var(--sw-body-bg);
}

.mk-dx-code i {
  height: 0.375rem;
  margin-bottom: 0.3rem;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-primary-300);
}

.mk-dx-code i:nth-child(2) {
  width: 70%;
}

.mk-dx-code i:nth-child(3) {
  width: 45%;
  margin-bottom: 0;
}

.mk-dx-label {
  margin: 0 0 var(--sw-space-7);
  font-size: 1.25rem;
}

.mk-dx-label--browse {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.mk-dx-start {
  position: relative;
  display: block;
  padding: var(--sw-space-9);
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 1.125rem;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.mk-dx-start:hover {
  border-color: var(--sw-primary-400);
  box-shadow: var(--sw-shadow);
  transform: translateY(-2px);
  color: inherit;
}

.mk-dx-start h3 {
  margin-bottom: var(--sw-space-3);
  font-size: 1.1875rem;
}

.mk-dx-start p {
  margin: 0;
  padding-right: 2.5rem;
  font-size: 0.9375rem;
}

.mk-dx-start__go {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--sw-primary-100);
  color: var(--sw-primary-700);
}

.mk-dx-start__go .mk-icon {
  width: 1rem;
  height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .mk-dx-start:hover {
    transform: none;
  }
}
.mk-dx-dir {
  column-gap: var(--sw-space-7);
}

@media (min-width: 900px) {
  .mk-dx-dir {
    columns: 2;
  }
}
@media (min-width: 1000px) {
  .mk-dx-dir {
    columns: 3;
  }
}
.mk-dx-group {
  overflow: hidden;
  margin-bottom: var(--sw-space-7);
  break-inside: avoid;
  background: #fff;
  border: 1px solid var(--sw-border);
  border-radius: 1.125rem;
}

.mk-dx-group > summary {
  display: flex;
  align-items: center;
  gap: var(--sw-space-5);
  padding: var(--sw-space-6) var(--sw-space-7);
  background: var(--sw-body-bg);
  list-style: none;
  cursor: pointer;
}

.mk-dx-group > summary::-webkit-details-marker {
  display: none;
}

.mk-dx-group > summary::after,
.mk-docs__menu > summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0.25rem 0.25rem 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.mk-dx-group[open] > summary::after,
.mk-docs__menu[open] > summary::after {
  margin-bottom: -0.25rem;
  transform: rotate(-135deg);
}

.mk-dx-group > summary::after {
  color: var(--sw-text-muted);
}

.mk-dx-group[open] > summary {
  border-bottom: 1px solid var(--sw-divider);
}

@media (min-width: 900px) {
  .mk-dx-group[open] > summary {
    cursor: default;
    pointer-events: none;
  }
  .mk-dx-group[open] > summary::after {
    display: none;
  }
}
.mk-dx-group h3 {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--sw-space-5);
  margin: 0;
  font-size: 1rem;
}

.mk-dx-group__count {
  padding: 0.125rem 0.625rem;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-primary-100);
  color: var(--sw-primary-800);
  font-size: 0.75rem;
  font-weight: var(--sw-fw-semibold);
}

.mk-dx-group ul {
  margin: 0;
  padding: var(--sw-space-4);
  list-style: none;
}

.mk-dx-group li {
  margin: 0;
}

.mk-dx-group li a {
  display: flex;
  align-items: flex-start;
  gap: var(--sw-space-5);
  padding: var(--sw-space-5);
  border-radius: 0.75rem;
  color: inherit;
}

.mk-dx-group li a:hover {
  background: var(--sw-primary-100);
}

.mk-dx-group .mk-icon-tile--sm {
  flex: none;
  margin: 0;
}

.mk-dx-group b {
  display: block;
  color: var(--sw-text-heading);
  font-size: 0.9375rem;
}

.mk-dx-group small {
  display: block;
  color: var(--sw-text-body);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.mk-dx-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sw-space-7);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: var(--sw-space-8);
  border: 1px dashed var(--sw-primary-400);
  border-radius: 1.125rem;
  background: rgba(9, 165, 194, 0.06);
}

.mk-dx-help .mk-icon-tile {
  margin: 0;
}

.mk-dx-help > div {
  flex: 1 1 16rem;
}

.mk-dx-help h3 {
  margin: 0 0 var(--sw-space-2);
  font-size: 1.0625rem;
}

.mk-dx-help p {
  margin: 0;
  font-size: 0.9375rem;
}

@media (min-width: 1200px) {
  .mk-docs.mk-docs--toc {
    grid-template-columns: 15rem minmax(0, 1fr) 13rem;
  }
}
.mk-docs__toc {
  display: none;
}

@media (min-width: 1200px) {
  .mk-docs__toc {
    position: sticky;
    top: 5.5rem;
    display: block;
    font-size: 0.875rem;
  }
}
.mk-docs__toc p {
  margin: 0 0 var(--sw-space-5);
  font-size: 0.6875rem;
  font-weight: var(--sw-fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sw-text-muted);
}

.mk-docs__toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--sw-divider);
}

.mk-docs__toc li {
  margin: 0;
}

.mk-docs__toc a {
  display: block;
  margin-left: -2px;
  padding: var(--sw-space-3) 0 var(--sw-space-3) var(--sw-space-6);
  border-left: 2px solid transparent;
  color: var(--sw-text-body);
}

.mk-docs__toc a:hover {
  border-left-color: var(--sw-primary-400);
  color: var(--sw-primary-700);
}

.mk-prose h2[id] {
  scroll-margin-top: 6rem;
}

.mk-dx-title {
  display: flex;
  align-items: center;
  gap: var(--sw-space-6);
  margin-bottom: var(--sw-space-5);
}

.mk-dx-title .mk-icon-tile {
  flex: none;
  margin: 0;
}

.mk-dx-title h1 {
  margin: 0;
}

.mk-dx-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sw-space-5);
  margin-top: var(--sw-space-11);
}

.mk-dx-pager a {
  display: block;
  padding: var(--sw-space-6) var(--sw-space-7);
  border: 1px solid var(--sw-border);
  border-radius: 0.875rem;
  color: inherit;
}

.mk-dx-pager a:hover {
  border-color: var(--sw-primary-400);
  box-shadow: var(--sw-shadow-sm);
}

.mk-dx-pager small {
  display: block;
  color: var(--sw-text-muted);
  font-size: 0.75rem;
}

.mk-dx-pager b {
  color: var(--sw-text-heading);
}

.mk-dx-pager__prev {
  grid-column: 1;
}

.mk-dx-pager__next {
  grid-column: 2;
  text-align: right;
}

.mk-docs__menu > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sw-space-5) var(--sw-space-6);
  border: 1px solid var(--sw-border);
  border-radius: 0.75rem;
  background: #fff;
  color: var(--sw-text-heading);
  font-weight: var(--sw-fw-semibold);
  list-style: none;
  cursor: pointer;
}

.mk-docs__menu > summary::-webkit-details-marker {
  display: none;
}

.mk-docs__menu[open] > summary {
  margin-bottom: var(--sw-space-6);
}

.mk-docs__menu > summary + h2 {
  margin-top: 0;
}

@media (max-width: 899px) {
  .mk-docs__nav {
    position: static;
  }
}
@media (min-width: 900px) {
  .mk-docs__menu[open] > summary {
    display: none;
  }
}