/* Intro + Why It Matters — structural styles and design defaults.
   Left: heading, prose, optional accent-bar callout.
   Right: a tinted panel with its own heading, intro prose and a grid of
   icon rows. Every value a user should change is also a Style-tab control;
   the custom properties below are what those controls write to. */

.iwm-28400 {
	--iwm-left: 58%;
	--iwm-gap: 64px;
	--iwm-accent: #128ccd;
	--iwm-bar: #dc272d;
	--iwm-icon-size: 34px;
	--iwm-cols: 2;
	display: flex;
	flex-wrap: wrap;
	gap: var(--iwm-gap);
	align-items: stretch;
}

.iwm-28400 .iwm-28400__main,
.iwm-28400 .iwm-28400__panel {
	min-width: 0;
	flex: 1 1 0;
}

.iwm-28400 .iwm-28400__main {
	flex: 0 1 calc(var(--iwm-left) - (var(--iwm-gap) / 2));
}

.iwm-28400 .iwm-28400__panel {
	background-color: #f4f4f4;
	padding: 40px;
}

.iwm-28400 .iwm-28400__heading,
.iwm-28400 .iwm-28400__panel-heading {
	margin: 0 0 32px;
	color: #1f2a33;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.15;
}

.iwm-28400 .iwm-28400__prose,
.iwm-28400 .iwm-28400__panel-intro {
	margin: 0;
}

.iwm-28400 .iwm-28400__prose > *:first-child,
.iwm-28400 .iwm-28400__panel-intro > *:first-child,
.iwm-28400 .iwm-28400__callout > *:first-child {
	margin-top: 0;
}

.iwm-28400 .iwm-28400__prose > *:last-child,
.iwm-28400 .iwm-28400__panel-intro > *:last-child,
.iwm-28400 .iwm-28400__callout > *:last-child {
	margin-bottom: 0;
}

.iwm-28400 .iwm-28400__callout {
	margin-top: 48px;
	border-inline-start: 2px solid var(--iwm-bar);
	padding: 4px 0 4px 32px;
	font-weight: 700;
}

/* Icon grid */
.iwm-28400 .iwm-28400__list {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--iwm-cols), minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 28px;
}

.iwm-28400 .iwm-28400__item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin: 0;
}

.iwm-28400 .iwm-28400__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--iwm-icon-size);
	height: var(--iwm-icon-size);
	color: var(--iwm-accent);
	font-size: var(--iwm-icon-size);
	line-height: 1;
}

/* Elementor renders icons as inline SVG by default, where font-size and color
   have no effect — both have to be mirrored onto the svg. The built-in warning
   glyph is stroked, uploaded/library icons are filled; each keeps its own mode. */
.iwm-28400 .iwm-28400__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.iwm-28400 .iwm-28400__icon svg:not(.iwm-28400__glyph) {
	fill: var(--iwm-accent);
}

.iwm-28400 .iwm-28400__icon i {
	color: var(--iwm-accent);
	font-size: var(--iwm-icon-size);
}

.iwm-28400 .iwm-28400__label {
	min-width: 0;
	padding-top: 2px;
}

/* Stacking. `never` keeps both columns side by side at every width. */
@media (max-width: 1024px) {
	.iwm-28400--stack-tablet {
		--iwm-gap: 40px;
	}

	.iwm-28400.iwm-28400--stack-tablet .iwm-28400__main,
	.iwm-28400.iwm-28400--stack-tablet .iwm-28400__panel {
		flex: 1 1 100%;
	}

	/* Stacked, the text column sits against the viewport edge. */
	.iwm-28400.iwm-28400--stack-tablet .iwm-28400__main {
		padding-inline: 32px;
	}
}

@media (max-width: 767px) {
	.iwm-28400--stack-mobile {
		--iwm-gap: 32px;
	}

	.iwm-28400.iwm-28400--stack-mobile .iwm-28400__main,
	.iwm-28400.iwm-28400--stack-mobile .iwm-28400__panel {
		flex: 1 1 100%;
	}

	.iwm-28400 .iwm-28400__panel {
		padding: 28px 20px;
	}

	.iwm-28400.iwm-28400--stack-mobile .iwm-28400__main {
		padding-inline: 20px;
	}
}