/* Understanding the Solution — Angie Snippet 27557
   Two-column explainer section.
   Left: headline, prose paragraphs, optional callout.
   Right: icon-text list with red circular SVG icons. */

.uts-27557 {
	--uts-left: 48%;
	--uts-gap: 64px;
	--uts-ar-16-9: 16 / 9;
	--uts-ar-4-3: 4 / 3;
	--uts-ar-21-9: 21 / 9;
	--uts-ar-1-1: 1 / 1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--uts-gap);
	align-items: flex-start;
	box-sizing: border-box;
	padding: 4rem 0;
}

.uts-27557--media-left {
	flex-direction: row-reverse;
}

/* Full-width heading layout: the eyebrow + headline move above the two-column
   row (uts-27557__header), so the row itself carries the flex properties that
   normally live on the root. Default ('inline') is untouched — the root stays
   the flex row and there is no .uts-27557__row in the markup at all. */
.uts-27557--heading-full-width {
	display: block;
}

.uts-27557--heading-full-width .uts-27557__header {
	margin-bottom: 32px;
}

.uts-27557--heading-full-width .uts-27557__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--uts-gap);
	align-items: flex-start;
}

.uts-27557--heading-full-width.uts-27557--media-left {
	flex-direction: unset;
}

.uts-27557--heading-full-width.uts-27557--media-left .uts-27557__row {
	flex-direction: row-reverse;
}

.uts-27557 .uts-27557__col {
	min-width: 0;
	flex: 1 1 0;
}

.uts-27557 .uts-27557__col--left {
	flex: 0 1 calc(var(--uts-left) - (var(--uts-gap) / 2));
	/*max-width: 520px;*/
}

.uts-27557 .uts-27557__eyebrow {
	margin: 0 0 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 13px;
}

.uts-27557 .uts-27557__headline,
.elementor-widget-understanding_the_solution_27557 .uts-27557 .uts-27557__headline {
	margin: 0 0 20px;
	font-size: clamp(26px, 2.8vw, 34px);
	font-weight: 800;
	line-height: 1.2;
	color: #1F2A33;
	letter-spacing: -0.01em;
}

.uts-27557 .uts-27557__prose,
.elementor-widget-understanding_the_solution_27557 .uts-27557 .uts-27557__prose {
	font-size: 15px;
	line-height: 1.6;
	color: #2B2B2B;
}

.uts-27557 .uts-27557__prose p {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.6;
	color: #2B2B2B;
}

.uts-27557 .uts-27557__prose>*:first-child,
.uts-27557 .uts-27557__intro>*:first-child {
	margin-top: 0;
}

.uts-27557 .uts-27557__prose>*:last-child,
.uts-27557 .uts-27557__intro>*:last-child {
	margin-bottom: 0;
}

.uts-27557 .uts-27557__intro {
	margin-bottom: 20px;
	font-size: var(--tw-body-size, 15px);
	line-height: 1.6;
	color: #2B2B2B;
}

.uts-27557 .uts-27557__list-label {
	margin: 0 0 20px;
	font-weight: 700;
	color: #1F2A33;
}

/* Icon text list styling — matches XD 5-item rows */
.uts-27557 .tw-icon-text-list {
	display: grid;
	row-gap: 26px;
	column-gap: 32px;
}

.uts-27557 .tw-icon-text {
	display: flex;
	align-items: center;
	gap: 20px;
}

.uts-27557 .tw-icon-text__icon {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
}

.uts-27557 .tw-icon-text__icon svg {
	width: 46px;
	height: 46px;
	max-width: 46px;
	max-height: 46px;
	display: block;
}

/* Per-item "Ring Around Icon" switch. Off (the default) is for SVG icons that
   draw their own circle; on gives Icon Library glyphs a matching CSS ring.
   The box stays the SVGs' size either way, so the labels keep lining up. */
.uts-27557 .tw-icon-text .tw-icon-text__icon {
	width: 46px;
	height: 46px;
}

.uts-27557 .tw-icon-text--has-icon:not(.tw-icon-text--no-ring) .tw-icon-text__icon {
	box-sizing: border-box;
	border: var(--tw-it-ring-width, 3px) solid var(--tw-it-accent, currentColor);
	border-radius: 50%;
}

.uts-27557 .tw-icon-text--has-icon:not(.tw-icon-text--no-ring) .tw-icon-text__icon svg {
	width: var(--tw-it-icon-size, 22px);
	height: var(--tw-it-icon-size, 22px);
	max-width: 60%;
	max-height: 60%;
}

.uts-27557 .tw-icon-text__label {
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.35;
	color: #1F2A33;
}

/* Image mode */
.uts-27557 .uts-27557__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.uts-27557 .uts-27557__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.uts-27557 .uts-27557__callout {
	margin-top: 28px;
	border-inline-start: 3px solid currentColor;
	padding: 4px 0 4px 20px;
	font-weight: 700;
}

.uts-27557 .uts-27557__callout>*:first-child {
	margin-top: 0;
}

.uts-27557 .uts-27557__callout>*:last-child {
	margin-bottom: 0;
}

/* Video mode */
.uts-27557 .uts-27557__video-container {
	width: 100%;
	display: flex;
	justify-content: center;
}

.uts-27557 .uts-27557__video-wrapper {
	width: 100%;
	max-width: 100%;
}

.uts-27557 .uts-27557__video-embed {
	position: relative;
	aspect-ratio: var(--uts-ar-16-9);
	width: 100%;
	overflow: hidden;
	background-color: #000;
	border-radius: 8px;
}

.uts-27557 .uts-27557__facade {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	appearance: none;
}

.uts-27557 .uts-27557__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.uts-27557 .uts-27557__play {
	--uts-play-bg: #D8262F;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: var(--uts-play-bg);
	color: var(--tw-color-white, #FFFFFF);
	transition: transform 160ms ease, opacity 160ms ease;
}

.uts-27557 .uts-27557__facade:hover .uts-27557__play {
	transform: translate(-50%, -50%) scale(1.08);
}

.uts-27557 .uts-27557__facade:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
	.uts-27557 .uts-27557__play {
		transition: none;
	}

	.uts-27557 .uts-27557__facade:hover .uts-27557__play {
		transform: translate(-50%, -50%);
	}
}

.uts-27557 .uts-27557__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.uts-27557 .uts-27557__video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.uts-27557 .uts-27557__empty-video {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	color: var(--tw-color-white, #FFFFFF);
	text-align: center;
	font-size: 0.95rem;
	opacity: 0.75;
}

@media (max-width: 1024px) {
	.uts-27557 {
		--uts-gap: 40px;
	}

	.uts-27557.uts-27557--stack-tablet .uts-27557__col--left {
		flex-basis: 100%;
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.uts-27557 {
		--uts-gap: 32px;
	}

	.uts-27557.uts-27557--stack-mobile .uts-27557__col--left,
	.uts-27557.uts-27557--stack-tablet .uts-27557__col--left {
		flex-basis: 100%;
		max-width: 100%;
	}

	.uts-27557 .tw-icon-text {
		gap: 16px;
	}

	.uts-27557 .tw-icon-text__icon,
	.uts-27557 .tw-icon-text .tw-icon-text__icon {
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
	}

	.uts-27557 .tw-icon-text__icon svg {
		width: 40px;
		height: 40px;
	}

	.uts-27557 .tw-icon-text--has-icon:not(.tw-icon-text--no-ring) .tw-icon-text__icon svg {
		width: var(--tw-it-icon-size, 20px);
		height: var(--tw-it-icon-size, 20px);
	}
}