.ech-roi {
	--roi-dark: var(--wp--preset--color--dark);
	--roi-accent: var(--wp--preset--color--accent);
	--roi-border: var(--wp--preset--color--border);
	--roi-muted: var(--wp--preset--color--muted);
	--roi-focus: 0 0 0 2px color-mix(in srgb, var(--roi-accent) 25%, transparent), 0 0 18px 3px color-mix(in srgb, var(--roi-accent) 55%, transparent);

	container-type: inline-size;
	font-family: var(--wp--preset--font-family--display);
	color: var(--roi-dark);
}
.ech-roi :where(p) { margin: 0; }
/* German/Dutch compounds ("Brandstof-/energiemonitoring") must break in narrow columns */
.ech-roi-label,
.ech-roi-hint,
.ech-roi-kpi-label,
.ech-roi-kpi-sub,
.ech-roi-lever-label {
	overflow-wrap: anywhere;
	hyphens: auto;
}

.ech-roi-grid {
	display: grid;
	gap: 24px;
	align-items: start;
}
@container (min-width: 880px) {
	.ech-roi-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr); }
}

.ech-roi-card {
	container-type: inline-size;
	box-sizing: border-box;
	padding: 32px;
	border-radius: var(--wp--custom--radius--xl);
}
@container (max-width: 520px) {
	.ech-roi-card { padding: 24px 20px; }
}

/* inputs */
.ech-roi-inputs {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--roi-border);
	box-shadow: var(--wp--custom--shadow--sm);
}
.ech-roi-set {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.ech-roi-set + .ech-roi-set { margin-top: 32px; }
.ech-roi-legend,
.ech-roi-eyebrow {
	display: block;
	padding: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.ech-roi-legend {
	margin: 0 0 18px;
	color: var(--roi-muted);
}

.ech-roi-field {
	display: grid;
	gap: 8px;
}
.ech-roi-field + .ech-roi-field { margin-top: 16px; }
@container (min-width: 440px) {
	.ech-roi-field {
		grid-template-columns: minmax(0, 1fr) 196px;
		align-items: center;
		gap: 18px;
	}
}
.ech-roi-label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--roi-dark);
}
.ech-roi-hint {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--roi-muted);
}

.ech-roi-control {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	height: 50px;
	padding: 0 14px;
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--roi-border);
	border-radius: var(--wp--custom--radius--base);
	cursor: text;
	transition: box-shadow 0.2s var(--wp--custom--ease--standard);
}
.ech-roi-control:focus-within { box-shadow: var(--roi-focus); }
/* doubled class: outranks the editor canvas's own input[type=number] styles */
.ech-roi-input.ech-roi-input {
	flex: 1;
	width: 100%;
	min-width: 0;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
	line-height: normal;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 16px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--roi-dark);
	appearance: textfield;
	-moz-appearance: textfield;
}
.ech-roi-input::-webkit-outer-spin-button,
.ech-roi-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.ech-roi-unit {
	flex: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	font-weight: 500;
	color: var(--roi-muted);
	white-space: nowrap;
}

.ech-roi-example {
	display: flex;
	gap: 8px;
	margin-bottom: 26px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--roi-muted);
}
.ech-roi-example svg {
	flex: none;
	margin-top: 1px;
	color: var(--roi-accent);
}

.ech-roi-set-note {
	margin: -8px 0 18px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--roi-muted);
}

/* derived figure, styled apart from the editable fields */
.ech-roi-readout {
	padding: 14px 16px;
	background: var(--wp--preset--color--surface-muted);
	border-radius: var(--wp--custom--radius--base);
}
.ech-roi-readout-value {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--roi-dark);
}
@container (min-width: 440px) {
	.ech-roi-readout-value { text-align: right; }
}

/* results */
.ech-roi-results {
	position: relative;
	overflow: hidden;
	background: var(--roi-dark);
	color: #fff;
	box-shadow: var(--wp--custom--shadow--xl);
}
.ech-roi-results::before {
	content: "";
	position: absolute;
	top: -140px;
	right: -110px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 159, 227, 0.24), transparent 68%);
	pointer-events: none;
}
.ech-roi-results > * { position: relative; }
/* the inputs column is much taller: keep the estimate in view (clears the fixed header),
   only when the whole card fits in the window — a pinned card never hides its own button */
@container (min-width: 880px) {
	@media (min-height: 840px) {
		.ech-roi:not(.ech-roi--kpis) .ech-roi-results {
			position: sticky;
			top: 104px;
		}
	}
	@media (min-height: 1100px) {
		.ech-roi--kpis .ech-roi-results {
			position: sticky;
			top: 104px;
		}
	}
}
.ech-roi-eyebrow { color: var(--roi-accent); }

.ech-roi-total-label {
	margin-top: 20px;
	font-size: 15px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
}
.ech-roi-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin-top: 10px;
}
.ech-roi-total-value {
	font-size: clamp(30px, 12cqi, 56px);
	font-weight: 900;
	overflow-wrap: anywhere;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--roi-accent);
}
.ech-roi-per {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
}

.ech-roi-kpis {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 26px 0 0;
}
.ech-roi-kpi:first-child { grid-column: 1 / -1; }
@container (min-width: 620px) {
	.ech-roi-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ech-roi-kpi:first-child { grid-column: auto; }
}
.ech-roi-kpi {
	padding: 16px 18px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: var(--wp--custom--radius--lg);
}
.ech-roi-kpi-label {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.72);
}
.ech-roi-kpi-value {
	margin: 6px 0 0;
	font-size: clamp(19px, 6.5cqi, 26px);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
	color: #fff;
}
.ech-roi-kpi-unit {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.72);
}
.ech-roi-kpi-sub {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.6);
}

.ech-roi-levers {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ech-roi-levers-title {
	margin-bottom: 16px;
	font-size: 16px;
	font-weight: 800;
	color: #fff;
}
.ech-roi-lever-list {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ech-roi-lever {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 7px 16px;
	margin: 0;
}
.ech-roi-lever-label {
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.85);
}
.ech-roi-lever-value {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: #fff;
}
/* bars: square at the baseline, rounded data end */
.ech-roi-bar {
	grid-column: 1 / -1;
	height: 8px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 0 4px 4px 0;
}
.ech-roi-bar-fill {
	display: block;
	height: 100%;
	background: var(--roi-accent);
	border-radius: 0 4px 4px 0;
	transition: width 0.3s var(--wp--custom--ease--standard);
}

.ech-roi-note {
	margin-top: 22px;
	font-size: 12.5px;
	font-weight: 300;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.6);
}

.ech-roi .ech-roi-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	box-sizing: border-box;
	max-width: 100%;
	min-height: 50px;
	margin-top: 24px;
	padding: 12px 24px;
	border-radius: var(--wp--custom--radius--base);
	background: var(--wp--preset--color--highlight);
	box-shadow: var(--wp--custom--shadow--md);
	color: var(--roi-dark);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.005em;
	line-height: 1.25;
	text-decoration: none;
	transition: background 0.2s;
}
.ech-roi .ech-roi-cta:hover { background: #f0b92a; }
.ech-roi .ech-roi-cta:active { transform: translateY(1px); }
.ech-roi .ech-roi-cta:focus-visible {
	outline: 2px solid var(--roi-accent);
	outline-offset: 2px;
}
.ech-roi-cta svg { flex: none; }
@container (max-width: 420px) {
	.ech-roi .ech-roi-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.ech-roi-control,
	.ech-roi-bar-fill { transition: none; }
}