/* MetaAffinity Process Steps widget */
html body { overflow-x: clip; }

.mapr {
	--mapr-bg: #F4F5F7;
	--mapr-ink: #0B1426;
	--mapr-text: #4a5262;
	--mapr-accent: #FF5A1F;
	--mapr-line: rgba(11, 20, 38, .14);
	--mapr-cols: 6;
	--mapr-icon: 96px;
	--mapr-hue: 0deg;
	--mapr-sat: 100%;
	--mapr-head: "Barlow Condensed", "Arial Narrow", sans-serif;
	--mapr-font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--mapr-bg);
	color: var(--mapr-ink);
	font-family: var(--mapr-font);
}
.mapr *, .mapr *::before, .mapr *::after { box-sizing: border-box; }

.mapr-inner {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: clamp(40px, 4.5vw, 72px) clamp(24px, 3.2vw, 64px) clamp(36px, 4vw, 64px);
}

/* heading row */
.mapr-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: clamp(28px, 3.4vw, 52px);
}
.mapr .mapr-title {
	font-family: var(--mapr-head);
	font-weight: 800;
	font-size: clamp(34px, 3.6vw, 60px);
	line-height: .9;
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: var(--mapr-ink);
	margin: 0;
}
.mapr .mapr-text {
	flex: none;
	max-width: 380px;
	margin: 8px 0 0;
	font-size: clamp(14px, 1.05vw, 16px);
	line-height: 1.75;
	color: var(--mapr-text);
}

/* steps */
.mapr .mapr-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--mapr-cols), minmax(0, 1fr));
}
.mapr .mapr-step {
	position: relative;
	margin: 0;
	padding: 0 clamp(12px, 1.4vw, 24px) 6px;
	border-left: 1px solid var(--mapr-line);
}
.mapr .mapr-step:first-child { border-left: 0; padding-left: 0; }
.mapr--arrows .mapr-step:not(:first-child)::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 0;
	width: 13px;
	height: 13px;
	background: var(--mapr-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h12M11 5l5 5-5 5' fill='none' stroke='%238a92a3' stroke-width='1.8'/%3E%3C/svg%3E");
	background-size: 13px 13px;
	background-repeat: no-repeat;
	background-position: center;
}
.mapr .mapr-top {
	display: flex;
	align-items: center;
	gap: clamp(8px, 1vw, 16px);
	margin-bottom: 18px;
}
.mapr .mapr-num {
	font-family: var(--mapr-head);
	font-weight: 700;
	font-size: clamp(24px, 2vw, 32px);
	line-height: 1;
	color: var(--mapr-accent);
}
.mapr .mapr-icon { display: block; width: var(--mapr-icon); height: var(--mapr-icon); flex: none; }
.mapr .mapr-icon img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	margin: 0;
	border-radius: 0;
	filter: hue-rotate(var(--mapr-hue)) saturate(var(--mapr-sat));
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.mapr .mapr-step:hover .mapr-icon img { transform: translateY(-4px) scale(1.04); }
.mapr .mapr-name {
	font-family: var(--mapr-head);
	font-weight: 700;
	font-size: clamp(17px, 1.35vw, 22px);
	line-height: 1.1;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--mapr-ink);
	margin: 0;
}

@media (max-width: 1100px) {
	.mapr { --mapr-cols: 3; --mapr-icon: 84px; }
	.mapr .mapr-steps { row-gap: 34px; }
	.mapr .mapr-step:nth-child(3n+1) { border-left: 0; padding-left: 0; }
	.mapr--arrows .mapr-step:nth-child(3n+1)::before { display: none; }
}
@media (max-width: 640px) {
	.mapr { --mapr-cols: 2; --mapr-icon: 72px; }
	.mapr-head { flex-direction: column; gap: 14px; }
	.mapr .mapr-text { max-width: none; margin-top: 0; }
	.mapr .mapr-step:nth-child(3n+1) { border-left: 1px solid var(--mapr-line); padding-left: clamp(12px, 3vw, 20px); }
	.mapr .mapr-step:nth-child(2n+1) { border-left: 0; padding-left: 0; }
	.mapr--arrows .mapr-step::before { display: none; }
	.mapr .mapr-top { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.mapr .mapr-icon img { transition: none; }
}