/* Unified Namespace — Figma: UNS Section (46:1740) */
.uns {
	padding-block: var(--section-y);
	background: var(--color-light);
	scroll-margin-top: 78px;
}

.uns__inner {
	display: grid;
	gap: 48px;
	align-items: center;
}

.uns__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(32px, 3.47vw, 50px);
	max-width: 527px;
}

.uns__title {
	color: var(--color-dark);
}

.uns__title-accent {
	color: var(--color-secondary);
}

.uns__desc {
	display: flex;
	flex-direction: column;
	gap: 19px;
	max-width: 502px;
}

.uns__lead {
	max-width: 472px;
	color: var(--color-dark);
}

.uns__body {
	color: var(--color-neutral-1);
}

/* UNS Diagram Container */
.uns__diagram {
	position: relative;
	overflow: hidden;
	padding: clamp(20px, 2.5vw, 36px) clamp(20px, 2.5vw, 36px) clamp(19px, 2.43vw, 35px);
	border: 1px solid var(--color-neutral-4);
	border-radius: var(--radius-card);
}

/* Figma image crop: h 153.48%, left -29.48%, top -26.67%, w 158.82% */
.uns__diagram-bg {
	position: absolute;
	left: -29.48%;
	top: -26.67%;
	width: 158.82%;
	height: 153.48%;
	max-width: none;
	pointer-events: none;
}

.uns__steps {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.uns-step {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.53vw, 22px);
	min-height: 100px;
	padding: 22px clamp(16px, 1.6vw, 23px); /* + 1px border = Figma 100 tall */
	border: 1px solid var(--color-neutral-4);
	border-radius: var(--radius-btn);
	background: rgb(237 244 246 / 0.8);
	backdrop-filter: blur(7.5px);
	-webkit-backdrop-filter: blur(7.5px);
}

.uns-step__num {
	display: grid;
	place-items: center;
	flex: none;
	width: 54px;
	height: 54px;
	border-radius: 27px;
	color: var(--color-light);
}

.uns-step__num--dark { background: var(--color-dark); }
.uns-step__num--amber { background: var(--color-primary); }
.uns-step__num--green { background: var(--color-secondary); }

.uns-step__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	line-height: 1.4;
}

.uns-step__title {
	font-size: var(--fs-body-main);
	font-weight: var(--fw-medium);
	color: var(--color-dark);
}

.uns-step__desc {
	color: var(--color-neutral-1);
}

@media (min-width: 1024px) {
	.uns__inner {
		grid-template-columns: minmax(0, 527px) minmax(0, 590px);
		justify-content: space-between;
		gap: 40px;
	}

	.uns__diagram {
		min-height: 407px;
	}
}