/* components/process-section/process-section.css */

.mvc-process-section--primary {
	background-color: var(--color-primary);
}

.mvc-process-section--primary .mvc-service-grid__headline,
.mvc-process-section--primary .mvc-process-section__step-title {
	color: var(--color-text-inverse);
}

.mvc-process-section--primary .mvc-service-grid__subtext,
.mvc-process-section--primary .mvc-process-section__step-desc {
	color: rgba(255, 255, 255, 0.85);
}

/* ── Steps list ─────────────────────────────────────────────────────────── */
.mvc-process-section__steps {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: steps;
}

/* Horizontal layout — steps side by side with connecting line */
.mvc-process-section--horizontal .mvc-process-section__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-8);
	position: relative;
}

/* Connecting line between steps */
.mvc-process-section--horizontal .mvc-process-section__steps::before {
	content: '';
	position: absolute;
	top: 28px;
	left: calc(28px + var(--space-8));
	right: calc(28px + var(--space-8));
	height: 2px;
	background: var(--color-border);
	z-index: 0;
}

/* Suppress base-layout connector when any style override is active —
   the override owns its own connector treatment. */
.mvc-process-section--style-vertical-timeline.mvc-process-section--horizontal .mvc-process-section__steps::before,
.mvc-process-section--style-icon-grid.mvc-process-section--horizontal .mvc-process-section__steps::before,
.mvc-process-section--style-zig-zag.mvc-process-section--horizontal .mvc-process-section__steps::before,
.mvc-process-section--style-circular-orbit.mvc-process-section--horizontal .mvc-process-section__steps::before {
	content: none;
}

.mvc-process-section--horizontal .mvc-process-section__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	z-index: 1;
}

/* Vertical layout — true timeline: left spine, badges sit on the spine,
   step bodies become cards with left padding so they offset from spine. */
.mvc-process-section--vertical .mvc-process-section__steps {
	position: relative;
	padding-inline-start: var(--space-20);
	max-width: 720px;
	margin-inline: auto;
}

.mvc-process-section--vertical .mvc-process-section__steps::before {
	content: '';
	position: absolute;
	left: 27px;
	/* start + end at the vertical center of the first/last badge
	   (badge top = step padding space-5; badge is 56px tall → center
	   is space-5 + 28px from each end) so the line never overhangs */
	top: calc(var(--space-5) + 28px);
	bottom: calc(var(--space-5) + 28px);
	width: 2px;
	background: var(--mvc-color-process-spine, #7eb6e8);
	z-index: 0;
}

.mvc-process-section--vertical .mvc-process-section__step {
	display: block;
	position: relative;
	margin-block-end: var(--space-10);
	padding: var(--space-5) var(--space-6);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.mvc-process-section--vertical .mvc-process-section__step:last-child {
	margin-block-end: 0;
}

.mvc-process-section--vertical .mvc-process-section__step-num {
	position: absolute;
	left: calc(-1 * var(--space-20));
	top: var(--space-5);
	width: 56px;
	height: 56px;
	margin-block-end: 0;
	z-index: 1;
}

@media (max-width: 639px) {
	.mvc-process-section--vertical .mvc-process-section__steps {
		padding-inline-start: var(--space-14);
	}
	.mvc-process-section--vertical .mvc-process-section__steps::before {
		left: 21px;
	}
	.mvc-process-section--vertical .mvc-process-section__step-num {
		left: calc(-1 * var(--space-14));
		top: var(--space-4);
		width: 44px;
		height: 44px;
		font-size: var(--text-base);
	}
	.mvc-process-section--vertical .mvc-process-section__step {
		padding: var(--space-4) var(--space-5);
	}
}

/* Grid layout */
.mvc-process-section--grid .mvc-process-section__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-8);
}

.mvc-process-section--grid .mvc-process-section__step {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

/* ── Step number badge ──────────────────────────────────────────────────── */
.mvc-process-section__step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-full);
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	font-size: var(--text-xl);
	font-weight: var(--mvc-font-weight-heading, var(--font-weight-bold, 700));
	flex-shrink: 0;
	margin-block-end: var(--space-4);
}

.mvc-process-section--vertical .mvc-process-section__step-num,
.mvc-process-section--grid .mvc-process-section__step-num {
	margin-block-end: 0;
}

.mvc-process-section--primary .mvc-process-section__step-num {
	background-color: rgba(255, 255, 255, 0.2);
	color: var(--color-text-inverse);
}

/* Number chip when icon + numbers are both shown */
.mvc-process-section__step-num--has-chip {
	position: relative;
}
.mvc-process-section__step-num-chip {
	position: absolute;
	top: -6px;
	left: -6px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background-color: var(--color-accent, var(--color-primary));
	color: var(--color-text-inverse);
	font-size: var(--text-xs, 0.75rem);
	font-weight: var(--font-weight-bold, 700);
	line-height: 22px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--mvc-color-section-bg, var(--color-bg, #fff));
}

/* ── Step body ──────────────────────────────────────────────────────────── */
.mvc-process-section__step-title {
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	margin-block-end: var(--space-2);
}

.mvc-process-section__step-desc {
	font-size: var(--text-base);
	color: var(--color-text-muted);
}

/* ── Hover popover (only rendered when Show Descriptions is OFF) ──────────
   Desktop: hidden, fades in above the icon on hover/focus. Simple
   left-aligned card. Mobile: shown inline as a normal block. */
.mvc-process-section__step {
	/* ensure the popover positions against the step */
	position: relative;
}
.mvc-process-section__step-popover {
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	z-index: 20;
	width: max-content;
	max-width: 280px;
	padding: var(--space-4) var(--space-5);
	background-color: var(--color-surface, #fff);
	color: var(--color-text, #1a1a1a);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	font-size: var(--text-sm, 0.875rem);
	line-height: 1.5;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.mvc-process-section__step-popover,
.mvc-process-section__step-popover * {
	color: var(--color-text, #1a1a1a) !important;
}
/* little pointer */
.mvc-process-section__step-popover::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 7px solid transparent;
	border-top-color: var(--color-surface, #fff);
}
/* reveal on hover/focus of the step (icon or anywhere in the step) */
.mvc-process-section__step:hover .mvc-process-section__step-popover,
.mvc-process-section__step:focus-within .mvc-process-section__step-popover {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
/* Mobile: no hover — show the description inline as a normal block */
@media (max-width: 767px) {
	.mvc-process-section__step-popover {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		max-width: none;
		width: auto;
		box-shadow: none;
		margin-block-start: var(--space-3);
		background: none;
		border: 0;
		padding: 0;
		text-align: inherit;
	}
	.mvc-process-section__step-popover::after {
		display: none;
	}
	.mvc-process-section__step-popover,
	.mvc-process-section__step-popover * {
		color: inherit !important;
	}
}

/* ── Card-variant text contrast ─────────────────────────────────────────
   When a step has a card background (white --color-surface), the title
   inherits white from the global bg-presets.css h1-h6 rule which uses
   !important. We must use !important here too to win. This is the one
   acceptable !important exception per dark_preset_contrast convention,
   because the step card is a self-contained surface that ignores the
   parent section's text-on-dark rule. */
.mvc-process-section--vertical .mvc-process-section__step .mvc-process-section__step-title,
.mvc-process-section--grid .mvc-process-section__step .mvc-process-section__step-title,
.mvc-process-section--style-icon-grid .mvc-process-section__step .mvc-process-section__step-title,
.mvc-process-section--style-zig-zag .mvc-process-section__step .mvc-process-section__step-title,
.mvc-process-section--style-circular-orbit .mvc-process-section__step .mvc-process-section__step-title,
.mvc-process-section--style-alternating-timeline .mvc-process-section__step-body .mvc-process-section__step-title {
	color: var(--color-heading, var(--color-text, #111)) !important;
}
.mvc-process-section--vertical .mvc-process-section__step .mvc-process-section__step-desc,
.mvc-process-section--grid .mvc-process-section__step .mvc-process-section__step-desc,
.mvc-process-section--style-icon-grid .mvc-process-section__step .mvc-process-section__step-desc,
.mvc-process-section--style-zig-zag .mvc-process-section__step .mvc-process-section__step-desc,
.mvc-process-section--style-circular-orbit .mvc-process-section__step .mvc-process-section__step-desc,
.mvc-process-section--style-alternating-timeline .mvc-process-section__step-body .mvc-process-section__step-desc,
.mvc-process-section--vertical .mvc-process-section__step .mvc-process-section__step-desc p,
.mvc-process-section--grid .mvc-process-section__step .mvc-process-section__step-desc p,
.mvc-process-section--style-icon-grid .mvc-process-section__step .mvc-process-section__step-desc p,
.mvc-process-section--style-zig-zag .mvc-process-section__step .mvc-process-section__step-desc p,
.mvc-process-section--style-circular-orbit .mvc-process-section__step .mvc-process-section__step-desc p,
.mvc-process-section--style-alternating-timeline .mvc-process-section__step-body .mvc-process-section__step-desc p {
	color: var(--color-text-muted, #555) !important;
}

/* ── CTA ────────────────────────────────────────────────────────────────── */
.mvc-process-section__cta {
	display: flex;
	justify-content: center;
	margin-block-start: var(--space-10);
}

/* Mobile: all layouts stack vertically */
@media (max-width: 639px) {
	.mvc-process-section--horizontal .mvc-process-section__steps::before {
		display: none;
	}
	.mvc-process-section--horizontal .mvc-process-section__step {
		align-items: flex-start;
		text-align: left;
		flex-direction: row;
		gap: var(--space-4);
	}
	.mvc-process-section--horizontal .mvc-process-section__step-num {
		margin-block-end: 0;
	}
}

/* ── Style overrides ────────────────────────────────────────────────────── */

/* Horizontal steps — same as horizontal layout, explicit override class */
.mvc-process-section--style-horizontal-steps .mvc-process-section__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-8);
}
.mvc-process-section--style-horizontal-steps .mvc-process-section__step {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Vertical timeline — left border accent, steps flow down */
.mvc-process-section--style-vertical-timeline .mvc-process-section__steps {
	position: relative;
	padding-inline-start: var(--space-16);
}
.mvc-process-section--style-vertical-timeline .mvc-process-section__steps::before {
	content: '';
	position: absolute;
	left: 27px;
	/* start + end at first/last badge center (badge 56px tall → 28px) */
	top: 28px;
	bottom: 28px;
	width: 2px;
	background: var(--mvc-color-process-spine, #7eb6e8);
}
.mvc-process-section--style-vertical-timeline .mvc-process-section__step {
	display: flex;
	align-items: flex-start;
	gap: var(--space-6);
	margin-block-end: var(--space-10);
	position: relative;
}
.mvc-process-section--style-vertical-timeline .mvc-process-section__step:last-child {
	margin-block-end: 0;
}
.mvc-process-section--style-vertical-timeline .mvc-process-section__step-num {
	position: absolute;
	left: calc(-1 * var(--space-16));
	width: 56px;
	height: 56px;
	margin-block-end: 0;
}
@media (max-width: 639px) {
	.mvc-process-section--style-vertical-timeline .mvc-process-section__steps {
		padding-inline-start: var(--space-14);
	}
}

/* Icon grid — icon-forward, card-per-step, no number */
.mvc-process-section--style-icon-grid .mvc-process-section__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-6);
}
.mvc-process-section--style-icon-grid .mvc-process-section__step {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-6);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.mvc-process-section--style-icon-grid .mvc-process-section__step-num {
	width: 48px;
	height: 48px;
	font-size: var(--text-lg);
	margin-block-end: 0;
}

/* ── NEW: Hexagon chain ─────────────────────────────────────────────────── */
.mvc-process-section--style-hexagon-chain .mvc-process-section__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-8);
	position: relative;
}
.mvc-process-section--style-hexagon-chain .mvc-process-section__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	z-index: 1;
}
.mvc-process-section--style-hexagon-chain .mvc-process-section__step-num {
	width: 72px;
	height: 80px;
	border-radius: 0;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background-color: var(--mvc-color-primary, var(--color-primary));
	color: var(--color-text-inverse, #fff);
	font-size: var(--text-2xl, 1.5rem);
	font-weight: var(--font-weight-bold, 700);
	margin-block-end: var(--space-4);
}
/* Hexagon shows ONE thing, never both. When Show Numbers is on (which
   adds the chip span), the NUMBER wins: hide the icon SVG and recenter
   the chip's number inside the hexagon (the chip's corner position +
   pill background are reset so it reads as the main number).
   When Show Numbers is off, no chip exists and the icon SVG shows. */
.mvc-process-section--style-hexagon-chain .mvc-process-section__step-num svg {
	width: 32px;
	height: 32px;
}
/* if a number chip is present, it means Show Numbers is on → number wins */
.mvc-process-section--style-hexagon-chain .mvc-process-section__step-num--has-chip svg {
	display: none;
}
.mvc-process-section--style-hexagon-chain .mvc-process-section__step-num-chip {
	position: static;
	inset: auto;
	min-width: 0;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: var(--text-2xl, 1.5rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-text-inverse, #fff);
	line-height: 1;
}
/* connector line between hexagons — light blue, visible on dark bg */
.mvc-process-section--style-hexagon-chain .mvc-process-section__steps::before {
	content: '';
	position: absolute;
	top: 40px;
	left: calc(36px + var(--space-8));
	right: calc(36px + var(--space-8));
	height: 3px;
	background: var(--mvc-color-process-spine, #7eb6e8);
	z-index: 0;
}
@media (max-width: 639px) {
	.mvc-process-section--style-hexagon-chain .mvc-process-section__steps::before {
		display: none;
	}
}

/* ── NEW: Zig-zag staircase ─────────────────────────────────────────────── */
.mvc-process-section--style-zig-zag .mvc-process-section__steps {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	max-width: 900px;
	margin-inline: auto;
}
.mvc-process-section--style-zig-zag .mvc-process-section__step {
	display: flex;
	align-items: flex-start;
	gap: var(--space-6);
	padding: var(--space-6);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	max-width: 70%;
}
.mvc-process-section--style-zig-zag .mvc-process-section__step:nth-child(2) {
	margin-inline-start: 15%;
}
.mvc-process-section--style-zig-zag .mvc-process-section__step:nth-child(3) {
	margin-inline-start: 30%;
}
.mvc-process-section--style-zig-zag .mvc-process-section__step:nth-child(n+4) {
	margin-inline-start: auto;
}
.mvc-process-section--style-zig-zag .mvc-process-section__step-num {
	margin-block-end: 0;
}
@media (max-width: 767px) {
	.mvc-process-section--style-zig-zag .mvc-process-section__step,
	.mvc-process-section--style-zig-zag .mvc-process-section__step:nth-child(n) {
		max-width: 100%;
		margin-inline-start: 0;
	}
}

/* ── NEW: Circular orbit ─────────────────────────────────────────────────
   Desktop: steps arranged around a circle via absolute + transform/rotate.
   Each step occupies a fixed angular slot (supports up to 8 steps).
   Mobile/tablet: falls back to a clean vertical stack.
   The center hosts a dashed ring + optional eyebrow flair. */
.mvc-process-section--style-circular-orbit .mvc-process-section__steps {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	max-width: 600px;
	margin-inline: auto;
}
.mvc-process-section--style-circular-orbit .mvc-process-section__step {
	display: flex;
	flex-direction: row;
	align-items: center;
	text-align: left;
	gap: var(--space-4);
	padding: var(--space-5);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	color: var(--color-text, #1a1a1a);
}
.mvc-process-section--style-circular-orbit .mvc-process-section__step-num {
	margin-block-end: 0;
	flex-shrink: 0;
}

@media (min-width: 1024px) {
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps {
		position: relative;
		display: block;
		width: 640px;
		height: 640px;
		max-width: 100%;
		aspect-ratio: 1 / 1;
		margin-inline: auto;
	}
	/* Decorative dashed orbit ring */
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps::before {
		content: '';
		position: absolute;
		inset: 25%;
		border: 2px dashed var(--mvc-color-primary, var(--color-primary));
		border-radius: 50%;
		opacity: 0.4;
		z-index: 0;
	}
	/* Step card placed on orbit perimeter via rotate trick:
	   1. rotate the step around the center by --angle
	   2. translate outward along the now-rotated Y axis (radius)
	   3. counter-rotate the inner content so text reads upright */
	.mvc-process-section--style-circular-orbit .mvc-process-section__step {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 220px;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--space-2);
		transform-origin: center center;
		z-index: 1;
	}
	/* Even distribution via :has() — picks angle set by total step count.
	   Uses radius 240px. Pattern:
	     transform: translate(-50%,-50%) rotate(Adeg) translate(0,-240px) rotate(-Adeg);
	   for each step, where A = (i-1) * (360/N). */

	/* ─── 3 steps: 120deg apart ─── */
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps:has(> :nth-child(3):last-child) .mvc-process-section__step:nth-child(1) { transform: translate(-50%,-50%) rotate(0deg)   translate(0,-240px) rotate(0deg); }
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps:has(> :nth-child(3):last-child) .mvc-process-section__step:nth-child(2) { transform: translate(-50%,-50%) rotate(120deg) translate(0,-240px) rotate(-120deg); }
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps:has(> :nth-child(3):last-child) .mvc-process-section__step:nth-child(3) { transform: translate(-50%,-50%) rotate(240deg) translate(0,-240px) rotate(-240deg); }

	/* ─── 4 steps: 90deg apart ─── */
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps:has(> :nth-child(4):last-child) .mvc-process-section__step:nth-child(1) { transform: translate(-50%,-50%) rotate(0deg)   translate(0,-240px) rotate(0deg); }
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps:has(> :nth-child(4):last-child) .mvc-process-section__step:nth-child(2) { transform: translate(-50%,-50%) rotate(90deg)  translate(0,-240px) rotate(-90deg); }
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps:has(> :nth-child(4):last-child) .mvc-process-section__step:nth-child(3) { transform: translate(-50%,-50%) rotate(180deg) translate(0,-240px) rotate(-180deg); }
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps:has(> :nth-child(4):last-child) .mvc-process-section__step:nth-child(4) { transform: translate(-50%,-50%) rotate(270deg) translate(0,-240px) rotate(-270deg); }

	/* ─── 5 steps: 72deg apart ─── */
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps:has(> :nth-child(5):last-child) .mvc-process-section__step:nth-child(1) { transform: translate(-50%,-50%) rotate(0deg)   translate(0,-240px) rotate(0deg); }
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps:has(> :nth-child(5):last-child) .mvc-process-section__step:nth-child(2) { transform: translate(-50%,-50%) rotate(72deg)  translate(0,-240px) rotate(-72deg); }
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps:has(> :nth-child(5):last-child) .mvc-process-section__step:nth-child(3) { transform: translate(-50%,-50%) rotate(144deg) translate(0,-240px) rotate(-144deg); }
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps:has(> :nth-child(5):last-child) .mvc-process-section__step:nth-child(4) { transform: translate(-50%,-50%) rotate(216deg) translate(0,-240px) rotate(-216deg); }
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps:has(> :nth-child(5):last-child) .mvc-process-section__step:nth-child(5) { transform: translate(-50%,-50%) rotate(288deg) translate(0,-240px) rotate(-288deg); }

	/* ─── 6 steps: 60deg apart ─── */
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps:has(> :nth-child(6):last-child) .mvc-process-section__step:nth-child(1) { transform: translate(-50%,-50%) rotate(0deg)   translate(0,-240px) rotate(0deg); }
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps:has(> :nth-child(6):last-child) .mvc-process-section__step:nth-child(2) { transform: translate(-50%,-50%) rotate(60deg)  translate(0,-240px) rotate(-60deg); }
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps:has(> :nth-child(6):last-child) .mvc-process-section__step:nth-child(3) { transform: translate(-50%,-50%) rotate(120deg) translate(0,-240px) rotate(-120deg); }
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps:has(> :nth-child(6):last-child) .mvc-process-section__step:nth-child(4) { transform: translate(-50%,-50%) rotate(180deg) translate(0,-240px) rotate(-180deg); }
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps:has(> :nth-child(6):last-child) .mvc-process-section__step:nth-child(5) { transform: translate(-50%,-50%) rotate(240deg) translate(0,-240px) rotate(-240deg); }
	.mvc-process-section--style-circular-orbit .mvc-process-section__steps:has(> :nth-child(6):last-child) .mvc-process-section__step:nth-child(6) { transform: translate(-50%,-50%) rotate(300deg) translate(0,-240px) rotate(-300deg); }
}

/* ── NEW: Alternating timeline ───────────────────────────────────────────
   Orientation is driven by the Layout dropdown:
     Layout = Vertical   → vertical spine, cards alternate LEFT / RIGHT
     Layout = Horizontal → horizontal spine, cards alternate ABOVE / BELOW
   Shared badge + body card styling first, then per-orientation layout. */

/* Shared: spine color + badge ring + body card */
.mvc-process-section--style-alternating-timeline .mvc-process-section__steps {
	position: relative;
	margin-inline: auto;
}
.mvc-process-section--style-alternating-timeline .mvc-process-section__steps::before {
	content: '';
	position: absolute;
	background: var(--mvc-color-process-spine, #7eb6e8);
	z-index: 0;
}
.mvc-process-section--style-alternating-timeline .mvc-process-section__step-num {
	margin-block-end: 0;
	width: 56px;
	height: 56px;
	z-index: 2;
	outline: 6px solid var(--mvc-color-section-bg, var(--color-bg, transparent));
}
.mvc-process-section--style-alternating-timeline .mvc-process-section__step-body {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5) var(--space-6);
	box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04));
	position: relative;
	z-index: 1;
}

/* ── Vertical orientation: spine center, cards L/R ─────────────────────── */
.mvc-process-section--style-alternating-timeline.mvc-process-section--vertical .mvc-process-section__steps {
	max-width: 980px;
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	/* reset the base --vertical layout's left padding so the spine
	   (left:50%) is truly centered, not pushed right by space-20 */
	padding-inline-start: 0;
	padding-block: var(--space-6);
}
.mvc-process-section--style-alternating-timeline.mvc-process-section--vertical .mvc-process-section__steps::before {
	top: 28px;
	bottom: 28px;
	left: 50%;
	width: 3px;
	transform: translateX(-50%);
}
/* Reset the base --vertical step card (white box) — only the body is a card.
   3-col grid: [left card zone | center spine/badge | right card zone].
   Badge ALWAYS centered on the spine; only the title card alternates
   left/right. Both vertically centered on the badge row. */
.mvc-process-section--style-alternating-timeline.mvc-process-section--vertical .mvc-process-section__step {
	position: relative;
	display: grid;
	/* center column is exactly 80px wide and dead-center, so the badge
	   placed there lands on the spine (which is at left:50%). NO
	   column-gap — gaps would shift the 50% center off the spine.
	   Card-side padding lives inside the card zones instead. */
	grid-template-columns: 1fr 80px 1fr;
	align-items: center;
	column-gap: 0;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-block-end: 0;
}
.mvc-process-section--style-alternating-timeline.mvc-process-section--vertical .mvc-process-section__step-num {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	align-self: center;
	/* relative (not static) so the number chip anchors to the badge,
	   but clear the base --vertical absolute offset */
	position: relative;
	left: auto;
	top: auto;
}
/* odd: card on the RIGHT, hugging the spine (left edge of right column) */
.mvc-process-section--style-alternating-timeline.mvc-process-section--vertical .mvc-process-section__step:nth-child(odd) .mvc-process-section__step-body {
	grid-column: 3;
	grid-row: 1;
	align-self: center;
	justify-self: start;
	width: 100%;
	text-align: left;
	margin-inline-start: var(--space-4);
	margin-inline-end: 0;
}
/* even: card on the LEFT, hugging the spine (right edge of left column) */
.mvc-process-section--style-alternating-timeline.mvc-process-section--vertical .mvc-process-section__step:nth-child(even) .mvc-process-section__step-body {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	justify-self: end;
	width: 100%;
	text-align: right;
	margin-inline-start: 0;
	margin-inline-end: var(--space-4);
}

/* ── Horizontal orientation: spine across middle, cards above/below ──────
   Each step is a fixed 3-row grid (top card zone / badge row / bottom
   card zone) of equal heights so every badge lands on the same
   horizontal line. The spine sits at that line and connects the
   badges. Odd steps fill the TOP card zone, even steps the BOTTOM. */
.mvc-process-section--style-alternating-timeline.mvc-process-section--horizontal .mvc-process-section__steps {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--space-6);
	/* both card zones get a fixed min height so badges align */
	--mvc-tl-zone: 160px;
}
.mvc-process-section--style-alternating-timeline.mvc-process-section--horizontal .mvc-process-section__steps::before {
	/* line sits at the badge row center: top zone (160px) + half badge (28px) */
	top: calc(var(--mvc-tl-zone) + 28px);
	left: 28px;
	right: 28px;
	height: 3px;
	transform: translateY(-50%);
}
.mvc-process-section--style-alternating-timeline.mvc-process-section--horizontal .mvc-process-section__step {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	display: grid;
	grid-template-rows: var(--mvc-tl-zone) 56px var(--mvc-tl-zone);
	justify-items: center;
	gap: 0;
	background: none;
	border: 0;
	padding: 0;
}
.mvc-process-section--style-alternating-timeline.mvc-process-section--horizontal .mvc-process-section__step-num {
	grid-row: 2;
	align-self: center;
}
.mvc-process-section--style-alternating-timeline.mvc-process-section--horizontal .mvc-process-section__step-body {
	text-align: center;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.mvc-process-section--style-alternating-timeline.mvc-process-section--horizontal .mvc-process-section__step:nth-child(odd) .mvc-process-section__step-body {
	grid-row: 1;
	margin-block-end: var(--space-4);
}
.mvc-process-section--style-alternating-timeline.mvc-process-section--horizontal .mvc-process-section__step:nth-child(even) .mvc-process-section__step-body {
	grid-row: 3;
	margin-block-start: var(--space-4);
}

/* ── Mobile: simple stacked grid — no spine. Each step is a centered
   column: icon+number on top, title card below. Steps stack downward. */
@media (max-width: 767px) {
	.mvc-process-section--style-alternating-timeline .mvc-process-section__steps,
	.mvc-process-section--style-alternating-timeline.mvc-process-section--vertical .mvc-process-section__steps,
	.mvc-process-section--style-alternating-timeline.mvc-process-section--horizontal .mvc-process-section__steps {
		display: flex;
		flex-direction: column;
		gap: var(--space-8);
		max-width: none;
	}
	/* no spine on mobile */
	.mvc-process-section--style-alternating-timeline .mvc-process-section__steps::before {
		content: none;
		display: none;
	}
	.mvc-process-section--style-alternating-timeline .mvc-process-section__step,
	.mvc-process-section--style-alternating-timeline.mvc-process-section--vertical .mvc-process-section__step,
	.mvc-process-section--style-alternating-timeline.mvc-process-section--horizontal .mvc-process-section__step {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--space-3);
		grid-template-columns: none;
		grid-template-rows: none;
	}
	.mvc-process-section--style-alternating-timeline .mvc-process-section__step-num {
		grid-row: auto;
		grid-column: auto;
		justify-self: center;
		align-self: center;
		outline: 0;
	}
	.mvc-process-section--style-alternating-timeline .mvc-process-section__step:nth-child(odd) .mvc-process-section__step-body,
	.mvc-process-section--style-alternating-timeline .mvc-process-section__step:nth-child(even) .mvc-process-section__step-body {
		grid-column: auto;
		grid-row: auto;
		text-align: center;
		align-self: auto;
		margin-block: 0;
		width: 100%;
	}
}

/* ── Connector decorations (apply on top of any variant with a connector) ─ */

/* Dashed connectors — light blue dashes, visible on dark bg.
   Horizontal layouts: dashed top border. */
.mvc-process-section--connector-dashed.mvc-process-section--horizontal .mvc-process-section__steps::before,
.mvc-process-section--connector-dashed.mvc-process-section--style-horizontal-steps .mvc-process-section__steps::before,
.mvc-process-section--connector-dashed.mvc-process-section--style-hexagon-chain .mvc-process-section__steps::before {
	background: transparent !important;
	border-top: 3px dashed var(--mvc-color-process-spine, #7eb6e8);
	height: 0;
}
/* Vertical layouts: dashed left border. */
.mvc-process-section--connector-dashed.mvc-process-section--vertical .mvc-process-section__steps::before,
.mvc-process-section--connector-dashed.mvc-process-section--style-vertical-timeline .mvc-process-section__steps::before,
.mvc-process-section--connector-dashed.mvc-process-section--style-alternating-timeline.mvc-process-section--vertical .mvc-process-section__steps::before {
	background: transparent !important;
	border-top: 0;
	border-left: 3px dashed var(--mvc-color-process-spine, #7eb6e8);
	width: 0;
}
/* Alternating-timeline horizontal: dashed top border too. */
.mvc-process-section--connector-dashed.mvc-process-section--style-alternating-timeline.mvc-process-section--horizontal .mvc-process-section__steps::before {
	background: transparent !important;
	border-top: 3px dashed var(--mvc-color-process-spine, #7eb6e8);
	border-left: 0;
	height: 0;
}

/* Arrow tips between horizontal steps — light blue, larger, aligned to
   the badge vertical center (badges are ~72-80px tall → center ~36-40px) */
.mvc-process-section--connector-arrows.mvc-process-section--horizontal .mvc-process-section__step:not(:last-child)::after,
.mvc-process-section--connector-arrows.mvc-process-section--style-horizontal-steps .mvc-process-section__step:not(:last-child)::after,
.mvc-process-section--connector-arrows.mvc-process-section--style-hexagon-chain .mvc-process-section__step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 40px;
	right: calc(-1 * var(--space-4) - 2px);
	width: 0;
	height: 0;
	transform: translateY(-50%);
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	border-left: 16px solid var(--mvc-color-process-spine, #7eb6e8);
	z-index: 2;
}
@media (max-width: 639px) {
	.mvc-process-section--connector-arrows.mvc-process-section--horizontal .mvc-process-section__step:not(:last-child)::after,
	.mvc-process-section--connector-arrows.mvc-process-section--style-horizontal-steps .mvc-process-section__step:not(:last-child)::after,
	.mvc-process-section--connector-arrows.mvc-process-section--style-hexagon-chain .mvc-process-section__step:not(:last-child)::after {
		display: none;
	}
}