.mydev-feature {
	--mydev-feature-local-gap: var(--mydev-feature-gap, var(--mydev-component-gap, 1rem));
	--mydev-feature-local-content-gap: var(--mydev-space-2, .5rem);
	--mydev-feature-local-radius: var(--mydev-radius-lg, 8px);
	--mydev-feature-local-surface: var(--mydev-feature-background, transparent);
	--mydev-feature-local-border: var(--mydev-feature-border-color, transparent);
	--mydev-feature-local-border-width: var(--mydev-feature-border-width, 0px);
	--mydev-feature-media-width-default: 100%;
	--mydev-feature-media-height-default: 220px;
	align-items: start;
	background: var(--mydev-feature-local-surface);
	border: var(--mydev-feature-local-border-width) solid var(--mydev-feature-local-border);
	border-radius: var(--mydev-feature-local-radius);
	box-sizing: border-box;
	color: var(--mydev-color-text, #131b2e);
	display: grid;
	gap: var(--mydev-feature-local-gap);
	min-inline-size: 0;
	padding: var(--mydev-feature-padding, var(--mydev-component-padding, 1.5rem));
}

.mydev-feature__visual,
.mydev-feature__image,
.mydev-feature__icon,
.mydev-feature__number,
.mydev-feature__content,
.mydev-feature__title,
.mydev-feature__description,
.mydev-feature__action {
	box-sizing: border-box;
}

.mydev-feature-inline,
.mydev-feature-compact {
	grid-template-columns: auto minmax(0, 1fr);
}

.mydev-feature-inline {
	align-items: start;
}

.mydev-feature-stacked:not(.mydev-feature-visual-none) {
	grid-template-rows: auto minmax(0, 1fr);
}

.mydev-feature-stacked.mydev-feature-visual-none {
	grid-template-rows: minmax(0, 1fr);
}

.mydev-feature-compact {
	align-items: center;
	--mydev-feature-local-gap: var(--mydev-space-3, .75rem);
	padding-block: var(--mydev-space-3, .75rem);
}

.mydev-feature-density-flush {
	padding: 0;
}

.mydev-feature-density-compact {
	--mydev-feature-local-gap: var(--mydev-space-3, .75rem);
	padding: var(--mydev-space-4, 1rem);
}

.mydev-feature-density-spacious {
	--mydev-feature-local-gap: var(--mydev-space-6, 1.5rem);
	padding: var(--mydev-space-8, 2rem);
}

.mydev-feature-align-center {
	justify-items: center;
	text-align: center;
}

.mydev-feature-align-center .mydev-feature__content {
	align-items: center;
}

.mydev-feature-align-end {
	justify-items: end;
	text-align: end;
}

.mydev-feature-align-end .mydev-feature__content {
	align-items: flex-end;
}

.mydev-feature-inline.mydev-feature-align-center,
.mydev-feature-inline.mydev-feature-align-end,
.mydev-feature-compact.mydev-feature-align-center,
.mydev-feature-compact.mydev-feature-align-end {
	justify-items: initial;
	text-align: start;
}

.mydev-feature-surface-none {
	--mydev-feature-local-surface: transparent;
	--mydev-feature-local-border: transparent;
	--mydev-feature-local-border-width: 0px;
}

.mydev-feature-surface-default {
	--mydev-feature-local-surface: var(--mydev-color-surface, #fff);
	--mydev-feature-local-border: var(--mydev-color-border, #c9d4e8);
	--mydev-feature-local-border-width: 1px;
}

.mydev-feature-surface-subtle {
	--mydev-feature-local-surface: var(--mydev-color-surface-muted, #f3f6fa);
	--mydev-feature-local-border: transparent;
	--mydev-feature-local-border-width: 0px;
}

.mydev-feature-surface-brand {
	--mydev-feature-local-surface: var(--mydev-color-accent, #ff6224);
	--mydev-feature-local-border: transparent;
	--mydev-feature-local-border-width: 0px;
	color: var(--mydev-color-on-accent, #0a0f1a);
}

.mydev-feature-surface-inverse {
	--mydev-feature-local-surface: var(--mydev-color-surface-inverse, #0a0f1a);
	--mydev-feature-local-border: transparent;
	--mydev-feature-local-border-width: 0px;
	color: var(--mydev-color-on-inverse, #fff);
}

.mydev-feature__visual {
	--mydev-feature-local-visual-color: var(--mydev-color-secondary, #131b2e);
	--mydev-feature-local-visual-background: transparent;
	align-items: center;
	aspect-ratio: 1;
	background: var(--mydev-feature-local-visual-background);
	border: 1px solid transparent;
	border-radius: var(--mydev-radius-md, 6px);
	color: var(--mydev-feature-local-visual-color);
	display: inline-flex;
	flex: 0 0 auto;
	font-family: var(--mydev-font-heading, inherit);
	font-size: calc(var(--mydev-feature-visual-size) * .42);
	font-weight: var(--mydev-font-weight-heading, 400);
	inline-size: var(--mydev-feature-visual-size);
	justify-content: center;
	overflow: hidden;
}

.mydev-feature-visual-size-s {
	--mydev-feature-visual-size: calc(var(--mydev-feature-icon-size, 48px) * .75);
}

.mydev-feature-visual-size-m {
	--mydev-feature-visual-size: var(--mydev-feature-icon-size, 48px);
}

.mydev-feature-visual-size-l {
	--mydev-feature-visual-size: calc(var(--mydev-feature-icon-size, 48px) * 1.35);
}

.mydev-feature-treatment-soft .mydev-feature__visual {
	--mydev-feature-local-visual-background: color-mix(in srgb, var(--mydev-color-secondary, #131b2e) 9%, transparent);
}

.mydev-feature-treatment-filled .mydev-feature__visual {
	--mydev-feature-local-visual-background: var(--mydev-color-secondary, #131b2e);
	--mydev-feature-local-visual-color: var(--mydev-color-on-secondary, #fff);
}

.mydev-feature-treatment-outline .mydev-feature__visual {
	border-color: currentColor;
}

.mydev-feature-surface-brand .mydev-feature__visual {
	--mydev-feature-local-visual-color: currentColor;
}

.mydev-feature-surface-brand.mydev-feature-treatment-soft .mydev-feature__visual {
	--mydev-feature-local-visual-background: color-mix(in srgb, var(--mydev-color-on-accent, #0a0f1a) 12%, transparent);
}

.mydev-feature-surface-brand.mydev-feature-treatment-filled .mydev-feature__visual {
	--mydev-feature-local-visual-background: var(--mydev-color-on-accent, #0a0f1a);
	--mydev-feature-local-visual-color: var(--mydev-color-accent, #ff6224);
}

.mydev-feature-surface-inverse.mydev-feature-treatment-soft .mydev-feature__visual {
	--mydev-feature-local-visual-background: rgb(255 255 255 / 10%);
	--mydev-feature-local-visual-color: var(--mydev-color-on-inverse, #fff);
}

.mydev-feature-surface-inverse.mydev-feature-treatment-filled .mydev-feature__visual {
	--mydev-feature-local-visual-background: var(--mydev-color-on-inverse, #fff);
	--mydev-feature-local-visual-color: var(--mydev-color-surface-inverse, #0a0f1a);
}

.mydev-feature__icon,
.mydev-feature__icon svg {
	block-size: 1em;
	inline-size: 1em;
}

.mydev-feature-visual-image .mydev-feature__visual {
	aspect-ratio: auto;
	block-size: var(--mydev-feature-media-height, var(--mydev-feature-media-height-default));
	height: var(--mydev-feature-media-height, var(--mydev-feature-media-height-default));
	inline-size: var(--mydev-feature-media-width, var(--mydev-feature-media-width-default));
	max-inline-size: 100%;
	min-inline-size: 0;
	position: relative;
	width: var(--mydev-feature-media-width, var(--mydev-feature-media-width-default));
}

.mydev-feature-inline.mydev-feature-visual-image {
	--mydev-feature-media-width-default: 160px;
	--mydev-feature-media-height-default: 120px;
}

.mydev-feature-compact.mydev-feature-visual-image {
	--mydev-feature-media-width-default: 72px;
	--mydev-feature-media-height-default: 72px;
}

.mydev-feature .mydev-feature__image {
	block-size: 100%;
	display: block;
	height: 100%;
	inline-size: 100%;
	inset: 0;
	max-block-size: none;
	max-inline-size: none;
	object-fit: cover;
	object-position: center center;
	position: absolute;
	width: 100%;
}

.mydev-feature__content {
	align-self: stretch;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--mydev-feature-local-content-gap);
	inline-size: 100%;
	min-inline-size: 0;
}

.mydev-feature__title {
	color: inherit;
	font-family: var(--mydev-font-heading, inherit);
	font-size: var(--mydev-font-size-lg, 1.25rem);
	font-weight: var(--mydev-font-weight-heading, 400);
	letter-spacing: var(--mydev-letter-spacing-heading, 0);
	line-height: var(--mydev-line-height-heading, 1.25);
	margin: 0;
}

.mydev-feature-emphasis-strong .mydev-feature__title {
	font-size: var(--mydev-font-size-xl, 1.5rem);
}

.mydev-feature__description {
	color: var(--mydev-color-muted, #4c5870);
	font-family: var(--mydev-font-body, inherit);
	font-size: var(--mydev-font-size-sm, .9375rem);
	line-height: var(--mydev-line-height-body, 1.6);
	margin: 0;
}

.mydev-feature-surface-brand .mydev-feature__description {
	color: color-mix(in srgb, var(--mydev-color-on-accent, #0a0f1a) 78%, transparent);
}

.mydev-feature-surface-inverse .mydev-feature__description {
	color: color-mix(in srgb, var(--mydev-color-on-inverse, #fff) 76%, transparent);
}

.mydev-feature__action {
	align-items: center;
	color: var(--mydev-color-link, #b93800);
	display: inline-flex;
	font-weight: 600;
	gap: var(--mydev-space-1, .25rem);
	align-self: flex-start;
	margin-block-start: var(--mydev-space-1, .25rem);
	min-block-size: var(--mydev-target-size-min, 44px);
	text-decoration: none;
	transition: color var(--mydev-transition, 180ms ease);
}

.mydev-feature-align-center .mydev-feature__action {
	align-self: center;
}

.mydev-feature-align-end .mydev-feature__action {
	align-self: flex-end;
}

.mydev-feature-inline .mydev-feature__action,
.mydev-feature-compact .mydev-feature__action {
	align-self: flex-start;
}

.mydev-feature__action--button {
	border: 1px solid transparent;
	border-radius: var(--mydev-button-radius, 6px);
	font-size: var(--mydev-button-font-size, 1rem);
	font-weight: var(--mydev-button-font-weight, 600);
	justify-content: center;
	min-block-size: var(--mydev-button-min-height-md, var(--mydev-button-min-height, 3rem));
	padding: var(--mydev-button-padding-block, .6875rem) var(--mydev-button-padding-inline, 1.375rem);
}

.mydev-feature-button-size-small .mydev-feature__action--button { min-block-size: var(--mydev-button-min-height-sm, 2.75rem); }
.mydev-feature-button-size-medium .mydev-feature__action--button { min-block-size: var(--mydev-button-min-height-md, var(--mydev-button-min-height, 3rem)); }
.mydev-feature-button-size-large .mydev-feature__action--button { min-block-size: var(--mydev-button-min-height-lg, 3.5rem); }
.mydev-feature-button-variant-primary .mydev-feature__action--button { background: var(--mydev-color-accent, #ff6224); border-color: var(--mydev-color-accent, #ff6224); color: var(--mydev-color-on-accent, #0a0f1a); }
.mydev-feature-button-variant-secondary .mydev-feature__action--button { background: var(--mydev-color-secondary, #131b2e); border-color: var(--mydev-color-secondary, #131b2e); color: var(--mydev-color-on-secondary, #fff); }
.mydev-feature-button-variant-outline .mydev-feature__action--button { background: transparent; border-color: currentColor; color: var(--mydev-color-link, var(--mydev-color-accent, #ff6224)); }
.mydev-feature-surface-brand.mydev-feature-button-variant-primary .mydev-feature__action--button { background: var(--mydev-color-on-accent, #0a0f1a); border-color: var(--mydev-color-on-accent, #0a0f1a); color: var(--mydev-color-accent, #ff6224); }
.mydev-feature-surface-inverse.mydev-feature-button-variant-primary .mydev-feature__action--button { background: var(--mydev-color-on-inverse, #fff); border-color: var(--mydev-color-on-inverse, #fff); color: var(--mydev-color-surface-inverse, #0a0f1a); }

.mydev-feature__action:hover {
	color: var(--mydev-color-link-hover, #8f2b00);
}

.mydev-feature__action:focus-visible {
	outline: var(--mydev-focus-width, 2px) solid var(--mydev-color-focus, #ff6224);
	outline-offset: var(--mydev-focus-offset, 3px);
}

.mydev-feature-surface-brand .mydev-feature__action,
.mydev-feature-surface-brand .mydev-feature__action:hover {
	color: var(--mydev-color-on-accent, #0a0f1a);
}

.mydev-feature-surface-brand .mydev-feature__action:focus-visible {
	outline-color: var(--mydev-color-on-accent, #0a0f1a);
}

.mydev-feature-surface-brand.mydev-feature-button-variant-outline .mydev-feature__action--button,
.mydev-feature-surface-brand.mydev-feature-button-variant-outline .mydev-feature__action--button:hover {
	border-color: currentColor;
	color: var(--mydev-color-on-accent, #0a0f1a);
}

.mydev-feature-surface-inverse .mydev-feature__action {
	color: var(--mydev-color-on-inverse, #fff);
}

.mydev-feature-button-variant-primary .mydev-feature__action--button:hover {
	background: var(--mydev-color-accent-strong, var(--mydev-color-accent, #ff6224));
	border-color: var(--mydev-color-accent-strong, var(--mydev-color-accent, #ff6224));
	color: var(--mydev-color-on-accent, #0a0f1a);
}

.mydev-feature-button-variant-secondary .mydev-feature__action--button:hover {
	background: var(--mydev-color-secondary-strong, var(--mydev-color-secondary, #131b2e));
	border-color: var(--mydev-color-secondary-strong, var(--mydev-color-secondary, #131b2e));
	color: var(--mydev-color-on-secondary, #fff);
}

.mydev-feature-button-variant-outline .mydev-feature__action--button:hover {
	background: transparent;
	color: var(--mydev-color-link-hover, var(--mydev-color-accent-strong, #b93800));
}

.mydev-feature-surface-brand.mydev-feature-button-variant-primary .mydev-feature__action--button,
.mydev-feature-surface-brand.mydev-feature-button-variant-primary .mydev-feature__action--button:hover {
	background: var(--mydev-color-on-accent, #0a0f1a);
	border-color: var(--mydev-color-on-accent, #0a0f1a);
	color: var(--mydev-color-accent, #ff6224);
}

.mydev-feature-surface-inverse.mydev-feature-button-variant-primary .mydev-feature__action--button,
.mydev-feature-surface-inverse.mydev-feature-button-variant-primary .mydev-feature__action--button:hover {
	background: var(--mydev-color-on-inverse, #fff);
	border-color: var(--mydev-color-on-inverse, #fff);
	color: var(--mydev-color-surface-inverse, #0a0f1a);
}

.mydev-feature__action-icon {
	transition: transform var(--mydev-transition, 180ms ease);
}

@media (hover: hover) and (pointer: fine) {
	.mydev-feature-action-arrow .mydev-feature__action:hover .mydev-feature__action-icon {
		transform: translateX(.2em);
	}

	[dir="rtl"] .mydev-feature-action-arrow .mydev-feature__action:hover .mydev-feature__action-icon {
		transform: rotate(180deg) translateX(.2em);
	}
}

[dir="rtl"] .mydev-feature__action-icon {
	transform: rotate(180deg);
}

@supports not (color: color-mix(in srgb, black, white)) {
	.mydev-feature-treatment-soft .mydev-feature__visual {
		--mydev-feature-local-visual-background: var(--mydev-color-surface-muted, #f3f6fa);
	}
}

@media (max-width: 600px) {
	.mydev-feature-inline {
		grid-template-columns: 1fr;
	}

	.mydev-feature-inline.mydev-feature-visual-image {
		--mydev-feature-media-width-default: 100%;
		--mydev-feature-media-height-default: 220px;
	}

	.mydev-feature-inline.mydev-feature-align-center {
		justify-items: center;
		text-align: center;
	}

	.mydev-feature-inline.mydev-feature-align-end {
		justify-items: end;
		text-align: end;
	}
}

@media (forced-colors: active) {
	.mydev-feature,
	.mydev-feature__visual {
		border-color: CanvasText;
	}

	.mydev-feature__action {
		color: LinkText;
	}
}

/* Legacy component-specific surface classes remain in earlier rules for saved-document compatibility.
 * Current preset colour ownership is centralized by the generic mydev-has-surface-preset contract below. */
/* Dynamic Surface Presets: any validated preset slug consumes the same semantic component contract. */
.mydev-feature.mydev-has-surface-preset {
	--mydev-feature-local-surface: var(--mydev-component-background);
	--mydev-feature-local-border: color-mix(in srgb, var(--mydev-component-border) 32%, transparent);
	color: var(--mydev-component-body);
}
.mydev-feature.mydev-has-surface-preset .mydev-feature__title { color:var(--mydev-component-heading); }
.mydev-feature.mydev-has-surface-preset .mydev-feature__description { color:color-mix(in srgb,var(--mydev-component-muted) var(--mydev-feature-description-opacity, 82%),transparent); }
.mydev-feature.mydev-has-surface-preset .mydev-feature__action { color:var(--mydev-component-action); }
.mydev-feature.mydev-has-surface-preset .mydev-feature__visual { --mydev-feature-local-visual-color:var(--mydev-component-accent); }
.mydev-feature.mydev-has-surface-preset.mydev-feature-treatment-soft .mydev-feature__visual { --mydev-feature-local-visual-background:color-mix(in srgb,var(--mydev-component-accent) 12%,transparent); }
.mydev-feature.mydev-has-surface-preset.mydev-feature-treatment-filled .mydev-feature__visual { --mydev-feature-local-visual-background:var(--mydev-component-accent);--mydev-feature-local-visual-color:var(--mydev-component-on-accent); }
.mydev-feature.mydev-has-surface-preset.mydev-feature-button-variant-primary .mydev-feature__action--button { background:var(--mydev-component-accent);border-color:var(--mydev-component-accent);color:var(--mydev-component-on-accent); }
.mydev-feature.mydev-has-surface-preset.mydev-feature-button-variant-outline .mydev-feature__action--button { background:transparent;border-color:currentColor;color:var(--mydev-component-action); }

/* Design System v1 shared Density + Button contracts. Appended to preserve stabilized Feature layout while centralizing recipe ownership. */
.mydev-feature-density-flush {padding:var(--mydev-density-flush-padding-block) var(--mydev-density-flush-padding-inline);--mydev-feature-local-gap:var(--mydev-density-flush-gap);--mydev-feature-local-content-gap:var(--mydev-density-flush-content-gap);}
.mydev-feature-density-compact {padding:var(--mydev-density-compact-padding-block) var(--mydev-density-compact-padding-inline);--mydev-feature-local-gap:var(--mydev-density-compact-gap);--mydev-feature-local-content-gap:var(--mydev-density-compact-content-gap);}
.mydev-feature-density-normal {padding:var(--mydev-density-normal-padding-block) var(--mydev-density-normal-padding-inline);--mydev-feature-local-gap:var(--mydev-density-normal-gap);--mydev-feature-local-content-gap:var(--mydev-density-normal-content-gap);}
.mydev-feature-density-spacious {padding:var(--mydev-density-spacious-padding-block) var(--mydev-density-spacious-padding-inline);--mydev-feature-local-gap:var(--mydev-density-spacious-gap);--mydev-feature-local-content-gap:var(--mydev-density-spacious-content-gap);}
/* Design System v1 authoritative shared button recipe. Keep later and more specific than legacy surface/button rules. */
.mydev-feature.mydev-feature-action-button[class*="mydev-feature-button-variant-"] .mydev-feature__action--button.mydev-button {
	background: var(--mydev-button-background);
	border-color: var(--mydev-button-border);
	color: var(--mydev-button-foreground);
	font-size: var(--mydev-button-size-font-size);
	gap: var(--mydev-button-size-icon-gap);
	min-block-size: var(--mydev-button-size-min-height);
	padding: var(--mydev-button-size-padding-block) var(--mydev-button-size-padding-inline);
}
.mydev-feature.mydev-feature-action-button[class*="mydev-feature-button-variant-"] .mydev-feature__action--button.mydev-button:hover {
	background: var(--mydev-button-hover-background);
	border-color: var(--mydev-button-hover-border);
	color: var(--mydev-button-hover-foreground);
}

/* Promise: a compact commitment with a leading accent rule. Surface, typography,
 * spacing, media and actions remain governed by the existing widget controls. */
.mydev-feature.mydev-feature-promise {
  --mydev-feature-local-content-gap: 0px;
  --mydev-feature-description-opacity: 68%;
  border: 0;
  border-inline-start: 1px solid color-mix(in srgb, var(--mydev-component-accent, var(--mydev-color-accent)) 44%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.mydev-feature-promise.mydev-feature-density-flush {
  padding-inline-start: var(--mydev-font-size-sm, 14px);
}
.mydev-feature-promise .mydev-feature__title {
  margin-block: 0 5px;
  font-family: var(--mydev-font-body);
  font-size: var(--mydev-font-size-sm, 14px);
  font-weight: 500;
  line-height: var(--mydev-line-height-body, 1.7);
  letter-spacing: 0;
}
.mydev-feature-promise :where(.mydev-feature__description) {
  font-size: var(--mydev-font-size-xs, 12px);
  line-height: 1.5;
}
/* Promise descriptions own their paragraph spacing outside any hero composition. */
.mydev-feature-promise .mydev-feature__description { margin: 0; }

/* Signal: body-copy pain point used by the Service/Expertise symptoms row. */
.mydev-feature.mydev-feature-signal {
	align-content: start;
	min-block-size: 235px;
	gap: 0;
}
.mydev-feature-signal .mydev-feature__visual {
	inline-size: 48px;
	block-size: 48px;
	margin-block-end: 0;
	border-radius: 13px;
}
.mydev-feature-signal .mydev-feature__icon svg {
	fill: currentColor;
}
.mydev-feature-signal .mydev-feature__content {
	gap: 0;
}
.mydev-feature-signal .mydev-feature__description {
	margin: 58px 0 0;
	font-family: var(--mydev-font-body, inherit);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--mydev-component-body, var(--mydev-color-text, #131b2e));
}

/* Deliverable: dark inverse card used by expertise solution grids. The grid
 * owns the columns; this focused variant owns the card anatomy and icon box. */
.mydev-feature.mydev-feature-deliverable {
	display: block;
	min-block-size: 323px;
	background: var(--mydev-feature-local-surface, rgba(17, 29, 50, .82));
	border: 1px solid var(--mydev-feature-local-border, rgba(201, 212, 232, .14));
	border-radius: var(--mydev-feature-local-radius, 13px);
	padding: var(--mydev-feature-padding, 28px);
}
.mydev-feature-deliverable .mydev-feature__visual {
	inline-size: 48px;
	block-size: 48px;
	margin-block-end: 24px;
	border: 1px solid color-mix(in srgb, var(--mydev-color-accent, #ff6224) 27%, transparent);
	border-radius: 13px;
	background: var(--mydev-feature-local-visual-background, color-mix(in srgb, var(--mydev-color-accent, #ff6224) 6.3%, transparent));
	color: var(--mydev-feature-local-visual-color, var(--mydev-color-accent, #ff6224));
}
.mydev-feature-deliverable .mydev-feature__icon svg { fill: currentColor; }
.mydev-feature-deliverable .mydev-feature__content { gap: 0; }
.mydev-feature-deliverable .mydev-feature__title {
	margin: 30px 0 12px;
	font-family: var(--mydev-font-body, "Poppins", sans-serif);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 0;
}
.mydev-feature-deliverable .mydev-feature__description {
	margin: 0;
	font-family: var(--mydev-font-body, "Poppins", sans-serif);
	font-size: 16px;
	line-height: 1.65;
	color: rgba(201, 212, 232, .68);
}
.mydev-feature-deliverable {
	position: relative;
	overflow: hidden;
	transition: transform 420ms cubic-bezier(.16, 1, .3, 1), border-color 360ms ease, box-shadow 420ms cubic-bezier(.16, 1, .3, 1), background 360ms ease;
}
.mydev-feature-deliverable::before {
	content: "";
	position: absolute;
	z-index: 2;
	inset-block-start: 0;
	inset-inline: 18px;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, var(--mydev-color-accent, #ff6224), transparent);
	opacity: 0;
	pointer-events: none;
	transform: scaleX(.25);
	transition: opacity 360ms ease, transform 500ms cubic-bezier(.16, 1, .3, 1);
}
.mydev-feature-deliverable:hover,
.mydev-feature-deliverable:focus-within {
	border-color: color-mix(in srgb, var(--mydev-color-accent, #ff6224) 30%, transparent);
	transform: translateY(-7px);
	box-shadow: 0 28px 70px color-mix(in srgb, #111e34 14%, transparent);
}
.mydev-feature-deliverable:hover::before,
.mydev-feature-deliverable:focus-within::before {
	opacity: 1;
	transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
	.mydev-feature-deliverable { transition: none; }
	.mydev-feature-deliverable::before { transition: none; }
}

@media (max-width: 767px) {
	.mydev-feature.mydev-feature-signal {
		min-block-size: 200px;
	}
}

/* Opt-in outcome treatment. The document owns columns and card padding. */
.mydev-feature.mydev-feature-outcome {
  --mydev-feature-description-opacity:100%;
  display: block;
  min-block-size: 210px;
  border: 1px solid var(--mydev-color-border-light, rgba(19,27,46,.13));
  border-radius: 18px;
  background: linear-gradient(145deg,var(--mydev-color-surface,#fff),#f3f6fb);
  box-shadow: 0 20px 55px color-mix(in srgb,var(--mydev-color-heading,#131b2e) 7%,transparent);
}

/* Proof: the light benefit cards used by the homepage Pourquoi MyDev split. */
.mydev-feature.mydev-feature-proof {
	align-content: center;
	min-inline-size: 0;
	max-inline-size: 100%;
	min-block-size: 156px;
	padding: 24px;
	border: 1px solid var(--mydev-color-border-light, #dce2ec);
	border-radius: 16px;
	background: rgb(255 255 255 / 70%);
	transition: transform 250ms ease, border-color 250ms ease, background-color 250ms ease, box-shadow 250ms ease;
}
.mydev-feature.mydev-feature-proof:focus-within {
	outline: var(--mydev-focus-width, 2px) solid var(--mydev-color-focus, var(--mydev-color-accent, #ff6224));
	outline-offset: var(--mydev-focus-offset, 3px);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.mydev-feature.mydev-feature-proof:hover {
		border-color: rgb(255 98 36 / 40%);
		background: #fff8f4;
		box-shadow: 0 12px 28px rgb(19 27 46 / 5%);
		transform: translateY(-4px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.mydev-feature.mydev-feature-proof { transition: none; }
	.mydev-feature.mydev-feature-proof:hover { transform: none; }
}
.mydev-feature-proof .mydev-feature__content { gap: 0; }
.mydev-feature-proof .mydev-feature__title {
	margin: 0 0 12px;
	font-family: var(--mydev-font-heading, "Questrial", sans-serif);
	font-size: 25px;
	font-weight: 400;
	line-height: 1.7;
}
.mydev-feature-proof .mydev-feature__description {
	margin: 0;
	min-inline-size: 0;
	overflow-wrap: anywhere;
	color: var(--mydev-color-muted, #657086);
	font-family: var(--mydev-font-body, "Poppins", sans-serif);
	font-size: 16px;
	line-height: 1.6;
}

@media (max-width: 767px) {
	.elementor-page-12 .elementor-element-4f17657.e-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Project principle: compact inverse editorial cards. Geometry remains in the
 * native parent grid; this opt-in Feature variant owns only card anatomy. */
.mydev-feature.mydev-feature-principle {
	min-block-size: 0;
	padding: 24px;
	border: 1px solid color-mix(in srgb, var(--mydev-color-on-inverse) 14%, transparent);
	border-radius: 12px;
	background: transparent;
	color: var(--mydev-color-on-inverse);
	transition: transform .42s cubic-bezier(.16, 1, .3, 1), border-color .36s, box-shadow .42s;
}
.mydev-feature-principle .mydev-feature__content { gap: 0; }
.mydev-feature-principle .mydev-feature__title { margin: 0 0 12px; color: var(--mydev-color-on-inverse); font-size: 1.25rem; font-weight: 500; line-height: 1.4; }
.mydev-feature-principle .mydev-feature__description { margin: 0; color: color-mix(in srgb, var(--mydev-color-on-inverse) 65%, transparent); font-size: .8125rem; line-height: 1.65; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.mydev-feature.mydev-feature-principle:hover,
	.mydev-feature.mydev-feature-principle:focus-within {
		border-color: color-mix(in srgb, var(--mydev-color-accent) 30%, var(--mydev-color-on-inverse));
		box-shadow: 0 1.75rem 4.375rem color-mix(in srgb, #111e34 14%, transparent);
		transform: translateY(-.4375rem);
	}
}
@media (prefers-reduced-motion: reduce) { .mydev-feature.mydev-feature-principle { transition: none; } }

/* Proof cards inherit their surface. This inverse recipe is selected through
 * the existing Feature Surface control, preserving the light homepage cards. */
.mydev-feature.mydev-feature-proof.mydev-feature-surface-inverse {
	border-color: color-mix(in srgb, var(--mydev-color-on-inverse) 15%, transparent);
	background: color-mix(in srgb, var(--mydev-color-surface-inverse) 84%, var(--mydev-color-info, #4c78b9));
	color: var(--mydev-color-on-inverse);
}
.mydev-feature-proof.mydev-feature-surface-inverse .mydev-feature__title { color: var(--mydev-color-on-inverse); }
.mydev-feature-proof.mydev-feature-surface-inverse .mydev-feature__description { color: color-mix(in srgb, var(--mydev-color-on-inverse) 68%, transparent); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.mydev-feature.mydev-feature-proof.mydev-feature-surface-inverse:hover {
		border-color: color-mix(in srgb, var(--mydev-color-accent) 42%, var(--mydev-color-on-inverse));
		background: color-mix(in srgb, var(--mydev-color-surface-inverse) 74%, var(--mydev-color-info, #4c78b9));
		box-shadow: 0 1rem 2.25rem color-mix(in srgb, var(--mydev-color-surface-inverse) 42%, transparent);
	}
}
.mydev-feature-outcome::before {content:"";display:block;inline-size:42px;block-size:4px;margin-block-end:42px;border-radius:99px;background:var(--mydev-color-accent,#ff6224)}
.mydev-feature-outcome .mydev-feature__content {gap:0}
.mydev-feature-outcome .mydev-feature__title {margin:0 0 9px;font-family:var(--mydev-font-heading,"Questrial",sans-serif);font-size:29px;font-weight:400;line-height:1.1;letter-spacing:-.035em}
.mydev-feature-outcome .mydev-feature__description {margin:0;color:var(--mydev-color-muted,#657086);font-size:14px;line-height:1.7}
@media(max-width:767px){.mydev-feature.mydev-feature-outcome{min-block-size:165px}.mydev-feature-outcome::before{margin-block-end:26px}}

/* Opt-in Formation outcome: icon and an editable index are separate semantic parts. */
.mydev-feature.mydev-feature-training-outcome{position:relative;min-block-size:270px;padding:24px;border:1px solid var(--mydev-component-border,var(--mydev-color-border-inverse));border-radius:12px;background:var(--mydev-component-background,color-mix(in srgb,var(--mydev-color-surface-inverse) 82%,transparent));color:var(--mydev-component-body,var(--mydev-color-on-inverse));transition:transform 350ms ease,border-color 350ms ease,box-shadow 350ms ease}.mydev-feature-training-outcome .mydev-feature__visual{margin:0}.mydev-feature-training-outcome .mydev-feature__icon{display:grid;place-items:center;inline-size:48px;block-size:48px;border:1px solid color-mix(in srgb,var(--mydev-component-accent,var(--mydev-color-primary)) 30%,transparent);border-radius:13px;background:color-mix(in srgb,var(--mydev-component-accent,var(--mydev-color-primary)) 4%,transparent);color:var(--mydev-component-accent,var(--mydev-color-primary));font-size:24px}.mydev-feature-training-outcome .mydev-feature__index{display:block;margin-block-start:18px;color:var(--mydev-component-accent,var(--mydev-color-primary));font:10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}.mydev-feature-training-outcome .mydev-feature__content{gap:0}.mydev-feature-training-outcome .mydev-feature__title{margin:70px 0 8px;color:var(--mydev-component-heading,var(--mydev-color-on-inverse));font-family:var(--mydev-font-heading);font-size:21px;font-weight:400;line-height:1.2}.mydev-feature-training-outcome .mydev-feature__description{margin:0;color:var(--mydev-component-muted,color-mix(in srgb,var(--mydev-color-on-inverse) 65%,transparent));font-size:13px;line-height:1.7}@media(hover:hover) and (prefers-reduced-motion:no-preference){.mydev-feature-training-outcome:hover{border-color:color-mix(in srgb,var(--mydev-component-accent,var(--mydev-color-primary)) 30%,var(--mydev-component-border,var(--mydev-color-border-inverse)));box-shadow:0 28px 70px color-mix(in srgb,var(--mydev-color-background) 40%,transparent);transform:translateY(-7px)}.mydev-feature-training-outcome:hover .mydev-feature__icon{transform:rotate(-6deg) scale(1.08)}}@media(prefers-reduced-motion:reduce){.mydev-feature-training-outcome,.mydev-feature-training-outcome .mydev-feature__icon{transition:none}.mydev-feature-training-outcome:hover{transform:none}}@media(max-width:767px){.mydev-feature.mydev-feature-training-outcome{min-block-size:0}.mydev-feature-training-outcome .mydev-feature__title{margin:20px 0 8px}}
.mydev-feature.mydev-feature-training-outcome{border-color:color-mix(in srgb,var(--mydev-color-border) 14%,transparent)}
.mydev-feature-training-outcome .mydev-feature__icon{color:color-mix(in srgb,var(--mydev-color-primary) 70%,var(--mydev-color-on-inverse))}
.mydev-feature-training-outcome .mydev-feature__icon svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Surface preset recipes are emitted later than the opt-in variant rules. Keep
 * the signal copy on the page's body colour, matching the maquette's readable
 * pain-point text rather than the generic muted description role. */
.mydev-feature.mydev-feature-signal .mydev-feature__description {
	color: var(--mydev-component-body, var(--mydev-color-text, #131b2e));
}