.techie-timeline {
	--techie-accent: #111827;
	--techie-card: #fff;
	--techie-gap: 38px;
	--techie-muted: #d9d9d9;
	--techie-radius: 18px;
	--techie-border-size: 0;
	--techie-border-color: #ececf1;
	--techie-line-width: 4px;
	--techie-marker-size: 44px;
	--techie-arrow-size: 42px;
	--techie-slider-item-width: 100%;
	--techie-card-padding: 34px;
	--techie-card-min-height: 0;
	border: 0;
	position: relative;
}

.techie-timeline__item {
	position: relative;
}

.techie-timeline__title {
	line-height: 1.15;
	margin: var(--techie-title-space, 0) 0 var(--techie-title-space-b, 12px);
}

.techie-timeline__content > :last-child {
	margin-bottom: 0;
}

.techie-timeline__media img {
	border-radius: var(--techie-radius);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.techie-timeline--image-landscape .techie-timeline__media img {
	aspect-ratio: 16 / 10;
}

.techie-timeline--image-square .techie-timeline__media img {
	aspect-ratio: 1;
}

.techie-timeline--image-portrait .techie-timeline__media img {
	aspect-ratio: 4 / 5;
}

.techie-timeline__card {
	background: var(--techie-card);
	border: var(--techie-border-size) solid var(--techie-border-color);
	border-radius: var(--techie-radius);
	min-height: max(100%, var(--techie-card-min-height));
	padding: var(--techie-card-padding);
}

.techie-timeline__builder-chip {
	background: color-mix(in srgb, var(--techie-accent), transparent 16%);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	margin: 0 0 14px;
	padding: 7px 11px;
	width: fit-content;
}

.techie-timeline--card-clean .techie-timeline__card {
	background: transparent;
	padding: 0;
}

.techie-timeline--card-dark .techie-timeline__card {
	background: #151922;
	color: #fff;
}

.techie-timeline--card-dark .techie-timeline__title {
	color: inherit;
}

.techie-timeline--card-image .techie-timeline__media {
	margin-bottom: 18px;
}

.techie-timeline--skin-soft-accent .techie-timeline__card,
.techie-timeline--skin-soft-accent.techie-timeline--process .techie-timeline__item {
	background: linear-gradient(180deg, rgba(255,255,255,.98), color-mix(in srgb, var(--techie-accent), #fff 94%));
}

.techie-timeline--skin-dark-band {
	background:
		linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.03)),
		transparent;
	padding: clamp(18px, 4vw, 28px);
}

.techie-timeline--skin-dark-band .techie-timeline__card,
.techie-timeline--skin-dark-band.techie-timeline--process .techie-timeline__item {
	box-shadow: var(--techie-shadow-lg);
}

.techie-timeline--skin-editorial .techie-timeline__card {
	border-color: rgba(17, 24, 39, .08);
	box-shadow: var(--techie-shadow-md);
}

.techie-timeline--skin-editorial .techie-timeline__title {
	font-size: clamp(24px, 3vw, 34px);
}

.techie-timeline--shadow-soft .techie-timeline__card,
.techie-timeline--shadow-soft.techie-timeline--process .techie-timeline__item {
	box-shadow: var(--techie-shadow-sm);
}

.techie-timeline--shadow-strong .techie-timeline__card,
.techie-timeline--shadow-strong.techie-timeline--process .techie-timeline__item {
	box-shadow: var(--techie-shadow-md);
}

.techie-timeline--line-dashed::before,
.techie-timeline--line-dashed .techie-timeline__item::after {
	border-style: dashed !important;
}

.techie-timeline--line-dotted::before,
.techie-timeline--line-dotted .techie-timeline__item::after {
	border-style: dotted !important;
}

.techie-timeline--line-none::before,
.techie-timeline--line-none .techie-timeline__item::after {
	display: none !important;
}

.techie-timeline--vertical > .techie-timeline__viewport > .techie-timeline__track {
	display: grid;
	gap: clamp(34px, 6vw, 72px);
}

.techie-timeline--vertical::before {
	border-left: var(--techie-line-width) solid color-mix(in srgb, var(--techie-accent), transparent 50%);
	bottom: 0;
	content: "";
	left: 50%;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
}

.techie-timeline--vertical .techie-timeline__item {
	display: grid;
	gap: clamp(24px, 5vw, 64px);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.techie-timeline--vertical .techie-timeline__item.is-no-image:nth-child(odd) .techie-timeline__card {
	grid-column: 1;
	text-align: right;
}

.techie-timeline--vertical .techie-timeline__item.is-no-image:nth-child(even) .techie-timeline__card {
	grid-column: 2;
}

.techie-timeline--vertical .techie-timeline__item:nth-child(even) .techie-timeline__media {
	order: -1;
}

.techie-timeline__marker {
	align-items: center;
	background: var(--techie-accent);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-weight: 800;
	justify-content: center;
	min-height: var(--techie-marker-size);
	min-width: var(--techie-marker-size);
	padding: 7px 14px;
	text-align: center;
	white-space: nowrap;
	z-index: 1;
}

.techie-timeline--marker-style-soft .techie-timeline__marker {
	background: color-mix(in srgb, var(--techie-accent), white 78%);
	color: var(--techie-accent);
}

.techie-timeline--marker-style-outline .techie-timeline__marker {
	background: #fff;
	border: 2px solid color-mix(in srgb, var(--techie-accent), transparent 18%);
	color: var(--techie-accent);
}

.techie-timeline--marker-style-dark .techie-timeline__marker {
	background: #0f172a;
	box-shadow: var(--techie-shadow-sm);
	color: #fff;
}

.techie-timeline--vertical .techie-timeline__marker {
	left: 50%;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
}

.techie-timeline--marker-icon .techie-timeline__marker {
	border-radius: 50%;
	font-size: 20px;
	padding: 0;
}

.techie-timeline--process > .techie-timeline__viewport > .techie-timeline__track {
	display: grid;
	gap: clamp(42px, 6vw, 86px) var(--techie-gap);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.techie-timeline--process.techie-timeline--cols-2 > .techie-timeline__viewport > .techie-timeline__track {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.techie-timeline--process.techie-timeline--cols-4 > .techie-timeline__viewport > .techie-timeline__track {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.techie-timeline--process .techie-timeline__item {
	background: var(--techie-card);
	border: var(--techie-border-size) solid var(--techie-border-color);
	border-radius: var(--techie-radius);
	min-height: 245px;
	padding: 34px 28px 42px;
}

.techie-timeline--process .techie-timeline__item::after {
	border-top: 3px solid var(--techie-muted);
	content: "";
	left: 100%;
	position: absolute;
	top: 50%;
	width: var(--techie-gap);
}

.techie-timeline--process .techie-timeline__item:nth-child(3n)::after,
.techie-timeline--process .techie-timeline__item:last-child::after {
	display: none;
}

.techie-timeline--process .techie-timeline__marker {
	background: color-mix(in srgb, var(--techie-accent), transparent 72%);
	color: var(--techie-accent);
	margin-bottom: 18px;
}

.techie-timeline--horizontal > .techie-timeline__viewport > .techie-timeline__track {
	display: grid;
	gap: var(--techie-gap);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.techie-timeline--horizontal.techie-timeline--cols-2 > .techie-timeline__viewport > .techie-timeline__track {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.techie-timeline--horizontal.techie-timeline--cols-4 > .techie-timeline__viewport > .techie-timeline__track {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.techie-timeline--horizontal::before {
	border-top: var(--techie-line-width) solid color-mix(in srgb, var(--techie-accent), transparent 50%);
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 26px;
}

.techie-timeline--horizontal .techie-timeline__item {
	padding-top: 70px;
}

.techie-timeline--horizontal .techie-timeline__marker {
	left: 0;
	position: absolute;
	top: 0;
}

/* ============ FLOW (arrow-connected step cards) ============ */
.techie-timeline--flow {
	--techie-connector-color: #b7c3d6;
	--techie-step-color: #c3d0e4;
	--techie-step-size: 34px;
	--techie-flow-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h16M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.techie-timeline--flow > .techie-timeline__viewport > .techie-timeline__track,
.techie-timeline--flow .techie-timeline__track {
	display: grid;
	gap: var(--techie-gap);
	grid-template-columns: repeat(var(--techie-per-desktop, 5), minmax(0, 1fr));
	width: 100%;
}

.techie-timeline--flow.techie-timeline--cols-1 > .techie-timeline__viewport > .techie-timeline__track,
.techie-timeline--flow.techie-timeline--cols-1 .techie-timeline__track {
	grid-template-columns: 1fr;
}

.techie-timeline--flow.techie-timeline--cols-2 > .techie-timeline__viewport > .techie-timeline__track,
.techie-timeline--flow.techie-timeline--cols-2 .techie-timeline__track {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.techie-timeline--flow.techie-timeline--cols-3 > .techie-timeline__viewport > .techie-timeline__track,
.techie-timeline--flow.techie-timeline--cols-3 .techie-timeline__track {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.techie-timeline--flow.techie-timeline--cols-4 > .techie-timeline__viewport > .techie-timeline__track,
.techie-timeline--flow.techie-timeline--cols-4 .techie-timeline__track {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.techie-timeline--flow.techie-timeline--cols-5 > .techie-timeline__viewport > .techie-timeline__track,
.techie-timeline--flow.techie-timeline--cols-5 .techie-timeline__track {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.techie-timeline--flow.techie-timeline--cols-6 > .techie-timeline__viewport > .techie-timeline__track,
.techie-timeline--flow.techie-timeline--cols-6 .techie-timeline__track {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.techie-timeline--flow .techie-timeline__item {
	background: var(--techie-card);
	border: var(--techie-border-size) solid var(--techie-border-color);
	border-radius: var(--techie-radius);
	display: flex;
	flex-direction: column;
	min-height: var(--techie-card-min-height, 0);
	padding: var(--techie-card-padding);
}

.techie-timeline--flow .techie-timeline__card {
	background: transparent;
	border: 0;
	box-shadow: none;
	min-height: 0;
	padding: 0;
}

/* The base marker is a centred badge; here it is a plain numeral, so it follows
   the Marker Position control instead of sitting centred in a stretched box. */
.techie-timeline--flow .techie-timeline__marker {
	align-self: flex-start;
	justify-content: flex-start;
	text-align: left;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--techie-step-color);
	font-size: var(--techie-step-size, 34px);
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1;
	margin: 0 0 8px;
	min-width: 0;
	padding: 0;
	position: static;
	transform: none;
}

.techie-timeline--flow .techie-timeline__title {
	font-size: 18px;
	font-weight: 700;
}

.techie-timeline--flow .techie-timeline__media {
	margin-bottom: 14px;
}

.techie-timeline--flow.techie-timeline--shadow-soft .techie-timeline__item {
	box-shadow: var(--techie-shadow-sm);
}

.techie-timeline--flow.techie-timeline--shadow-strong .techie-timeline__item {
	box-shadow: var(--techie-shadow-md);
}

/* connector between steps */
.techie-timeline--flow .techie-timeline__item::after {
	content: "";
	height: 18px;
	left: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--techie-gap);
}

.techie-timeline--flow.techie-timeline--flow-arrow .techie-timeline__item::after {
	background-color: var(--techie-connector-color);
	-webkit-mask: var(--techie-flow-glyph) center / 20px 18px no-repeat;
	mask: var(--techie-flow-glyph) center / 20px 18px no-repeat;
}

.techie-timeline--flow.techie-timeline--flow-line .techie-timeline__item::after {
	border-top: var(--techie-line-width) solid var(--techie-connector-color);
	height: 0;
}

.techie-timeline--flow.techie-timeline--flow-dot .techie-timeline__item::after {
	background: var(--techie-connector-color);
	border-radius: 999px;
	height: 6px;
	left: calc(100% + (var(--techie-gap) / 2) - 3px);
	width: 6px;
}

.techie-timeline--flow.techie-timeline--flow-none .techie-timeline__item::after,
.techie-timeline--flow.techie-timeline--cols-2 .techie-timeline__item:nth-child(2n)::after,
.techie-timeline--flow.techie-timeline--cols-3 .techie-timeline__item:nth-child(3n)::after,
.techie-timeline--flow.techie-timeline--cols-4 .techie-timeline__item:nth-child(4n)::after,
.techie-timeline--flow.techie-timeline--cols-5 .techie-timeline__item:nth-child(5n)::after,
.techie-timeline--flow.techie-timeline--cols-6 .techie-timeline__item:nth-child(6n)::after,
.techie-timeline--flow .techie-timeline__item:last-child::after {
	display: none;
}

/* ============ SLIDER (premium infinite carousel) ============ */
.techie-timeline--slider {
	--techie-per: var(--techie-per-desktop, 3);
	--techie-track-light: color-mix(in srgb, var(--techie-accent), #fff 82%);
}

.techie-timeline--slider .techie-timeline__viewport {
	/* Clip only left/right (to hide the sliding cards) while allowing generous
	   vertical overflow, so marker rings (top) and card shadows (bottom) are
	   never cut off regardless of hover lift or marker size. */
	clip-path: inset(-70px 0 -70px 0);
	overflow: visible;
	padding: 8px 2px 12px;
	position: relative;
}

.techie-timeline--slider .techie-timeline__track {
	align-items: stretch;
	display: flex;
	gap: var(--techie-gap);
	transition: transform .55s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.techie-timeline--transition-premium .techie-timeline__track {
	transition: transform 0.7s cubic-bezier(0.45, 0, 0.15, 1) !important;
}

.techie-timeline--slider .techie-timeline__item {
	box-sizing: border-box;
	display: flex;
	flex: 0 0 calc((100% - (var(--techie-per) - 1) * var(--techie-gap)) / var(--techie-per));
	flex-direction: column;
	gap: 20px;
	max-width: calc((100% - (var(--techie-per) - 1) * var(--techie-gap)) / var(--techie-per));
	min-width: 0;
	padding: 4px 4px 8px;
	position: relative;
}

/* Continuous connector line running through every marker */
.techie-timeline--slider .techie-timeline__item::before {
	background: var(--techie-track-light);
	border-radius: 999px;
	content: "";
	height: var(--techie-line-width);
	left: calc(var(--techie-gap) / -2 - 4px);
	position: absolute;
	right: calc(var(--techie-gap) / -2 - 4px);
	top: calc(4px + var(--techie-marker-size) / 2);
	transform: translateY(-50%);
	z-index: 0;
}

.techie-timeline--slider.techie-timeline--line-none .techie-timeline__item::before {
	display: none;
}

/* Marker sits on the line; colour hierarchy = active accent, rest light */
.techie-timeline--slider .techie-timeline__marker {
	align-self: center;
	background: var(--techie-track-light);
	box-shadow: 0 0 0 6px var(--techie-card);
	color: var(--techie-accent);
	margin: 0 auto;
	position: relative;
	transition: background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
	z-index: 2;
}

.techie-timeline--slider.techie-timeline--mpos-left .techie-timeline__marker {
	align-self: flex-start;
	margin: 0;
}

.techie-timeline--slider.techie-timeline--mpos-right .techie-timeline__marker {
	align-self: flex-end;
	margin: 0;
}

.techie-timeline--slider .techie-timeline__item.is-active .techie-timeline__marker {
	background: var(--techie-accent);
	box-shadow: 0 0 0 6px var(--techie-card), 0 10px 24px color-mix(in srgb, var(--techie-accent), transparent 60%);
	color: #fff;
	transform: scale(1.06);
}

/* Equal-height cards, premium surface + hover */
.techie-timeline--slider .techie-timeline__media {
	margin-top: 4px;
}

.techie-timeline--slider .techie-timeline__card {
	border: 1px solid color-mix(in srgb, var(--techie-accent), #fff 88%);
	flex: 1 1 auto;
	min-height: var(--techie-card-min-height, 0);
	padding: calc(var(--techie-card-padding) * 0.7); /* Reduces padding from 34px to ~24px for a tight, premium look */
	transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.techie-timeline--slider.techie-timeline--card-clean .techie-timeline__card {
	border: 0;
}

.techie-timeline--slider.techie-timeline--card-dark .techie-timeline__card {
	border-color: rgba(255, 255, 255, .12);
}

.techie-timeline--slider .techie-timeline__item:hover .techie-timeline__card {
	border-color: color-mix(in srgb, var(--techie-accent), transparent 60%);
	box-shadow: var(--techie-shadow-md);
	transform: translateY(-4px);
}

.techie-timeline__controls {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 18px;
}

.techie-timeline--controls-left .techie-timeline__controls,
.techie-timeline--controls-left .techie-timeline__dots {
	justify-content: flex-start;
}

.techie-timeline--controls-center .techie-timeline__controls,
.techie-timeline--controls-center .techie-timeline__dots {
	justify-content: center;
}

/* Arrows on the left & right sides, seated in reserved gutters (never over cards) */
.techie-timeline--slider.techie-timeline--arrows-sides {
	padding-left: 62px;
	padding-right: 62px;
}

.techie-timeline--arrows-sides .techie-timeline__controls {
	align-items: center;
	bottom: 0;
	justify-content: space-between;
	left: 0;
	margin: 0;
	padding: 0 8px;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 3;
}

.techie-timeline--arrows-sides .techie-timeline__dots {
	margin-top: 28px;
}

.techie-timeline--arrows-sides .techie-timeline__arrow {
	pointer-events: auto;
}

.techie-timeline__arrow {
	align-items: center;
	appearance: none;
	background: var(--techie-card);
	border: 1px solid color-mix(in srgb, var(--techie-accent), #fff 78%);
	border-radius: 50%;
	box-shadow: var(--techie-shadow-xs);
	color: var(--techie-accent);
	cursor: pointer;
	display: inline-flex;
	height: var(--techie-arrow-size);
	justify-content: center;
	line-height: 0;
	margin: 0;
	min-height: 0;
	padding: 0;
	position: relative;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
	width: var(--techie-arrow-size);
}

.techie-timeline__arrow:hover {
	background: var(--techie-accent);
	border-color: var(--techie-accent);
	color: #fff;
	transform: translateY(-1px);
}

.techie-timeline__arrow:focus-visible {
	outline: 2px solid var(--techie-accent);
	outline-offset: 2px;
}

.techie-timeline__arrow::before {
	border: solid currentColor;
	border-width: 0 max(2px, calc(var(--techie-arrow-size) / 22)) max(2px, calc(var(--techie-arrow-size) / 22)) 0;
	content: "";
	display: block;
	height: max(9px, calc(var(--techie-arrow-size) / 4.6));
	width: max(9px, calc(var(--techie-arrow-size) / 4.6));
}

.techie-timeline__arrow--prev::before {
	transform: translateX(2px) rotate(135deg);
}

.techie-timeline__arrow--next::before {
	transform: translateX(-2px) rotate(-45deg);
}

.techie-timeline__dots {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 24px;
	position: relative;
	z-index: 2;
}

.techie-timeline__dot {
	appearance: none;
	background: color-mix(in srgb, var(--techie-accent), transparent 72%);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	height: 8px;
	margin: 0;
	min-height: 0;
	padding: 0;
	transition: background-color .2s ease, width .2s ease;
	width: 22px;
}

.techie-timeline__dot.is-active {
	background: var(--techie-accent);
	width: 34px;
}

.techie-timeline--skin-dark-band .techie-timeline__dot {
	background: color-mix(in srgb, var(--techie-accent), transparent 76%);
}

.techie-timeline--slider .techie-timeline__item.is-active .techie-timeline__card {
	border-color: color-mix(in srgb, var(--techie-accent), transparent 66%);
	box-shadow: var(--techie-shadow-md);
}

.techie-timeline--text-center .techie-timeline__card,
.techie-timeline--text-center .techie-timeline__content,
.techie-timeline--text-center .techie-timeline__title {
	text-align: center;
}

.techie-timeline--text-right .techie-timeline__card,
.techie-timeline--text-right .techie-timeline__content,
.techie-timeline--text-right .techie-timeline__title {
	text-align: right;
}

@media (max-width: 1024px) {
	.techie-timeline--slider {
		--techie-per: var(--techie-per-tablet, 2);
	}

	.techie-timeline--flow > .techie-timeline__viewport > .techie-timeline__track,
	.techie-timeline--flow .techie-timeline__track {
		grid-template-columns: repeat(var(--techie-per-tablet, 2), minmax(0, 1fr));
	}

	/* rows re-wrap on tablet, so the desktop row-end rules no longer apply */
	.techie-timeline--flow.techie-timeline--cols-3 .techie-timeline__item:nth-child(3n)::after,
	.techie-timeline--flow.techie-timeline--cols-4 .techie-timeline__item:nth-child(4n)::after,
	.techie-timeline--flow.techie-timeline--cols-5 .techie-timeline__item:nth-child(5n)::after,
	.techie-timeline--flow.techie-timeline--cols-6 .techie-timeline__item:nth-child(6n)::after {
		display: block;
	}

	.techie-timeline--flow .techie-timeline__item:nth-child(2n)::after {
		display: none;
	}

	.techie-timeline--flow.techie-timeline--flow-none .techie-timeline__item::after,
	.techie-timeline--flow .techie-timeline__item:last-child::after {
		display: none;
	}
}

@media (max-width: 849px) {
	.techie-timeline--vertical::before {
		left: 20px;
	}

	.techie-timeline--vertical .techie-timeline__item,
	.techie-timeline--process > .techie-timeline__viewport > .techie-timeline__track,
	.techie-timeline--horizontal > .techie-timeline__viewport > .techie-timeline__track {
		grid-template-columns: 1fr;
	}

	.techie-timeline--horizontal::before {
		display: none;
	}

	.techie-timeline--horizontal .techie-timeline__item {
		padding-top: 0;
	}

	.techie-timeline--horizontal .techie-timeline__marker {
		margin-bottom: 18px;
		position: static;
	}

	.techie-timeline--vertical .techie-timeline__item.is-no-image:nth-child(odd) .techie-timeline__card,
	.techie-timeline--vertical .techie-timeline__item.is-no-image:nth-child(even) .techie-timeline__card {
		grid-column: auto;
		text-align: left;
	}

	.techie-timeline--vertical .techie-timeline__item {
		padding-left: 48px;
	}

	.techie-timeline--vertical .techie-timeline__item:nth-child(even) .techie-timeline__media {
		order: 0;
	}

	.techie-timeline--vertical .techie-timeline__marker {
		left: 20px;
		min-width: 40px;
		padding: 6px;
	}

	.techie-timeline--flow > .techie-timeline__viewport > .techie-timeline__track,
	.techie-timeline--flow .techie-timeline__track {
		grid-template-columns: 1fr;
	}

	.techie-timeline--flow .techie-timeline__item::after {
		left: 50%;
		top: 100%;
		transform: translate(-50%, -50%) rotate(90deg);
	}

	.techie-timeline--flow.techie-timeline--flow-dot .techie-timeline__item::after {
		left: 50%;
		top: calc(100% + (var(--techie-gap) / 2) - 3px);
		transform: translateX(-50%);
	}

	.techie-timeline--flow .techie-timeline__item::after,
	.techie-timeline--flow.techie-timeline--cols-2 .techie-timeline__item:nth-child(2n)::after,
	.techie-timeline--flow.techie-timeline--cols-3 .techie-timeline__item:nth-child(3n)::after,
	.techie-timeline--flow.techie-timeline--cols-4 .techie-timeline__item:nth-child(4n)::after,
	.techie-timeline--flow.techie-timeline--cols-5 .techie-timeline__item:nth-child(5n)::after,
	.techie-timeline--flow.techie-timeline--cols-6 .techie-timeline__item:nth-child(6n)::after {
		display: block;
	}

	.techie-timeline--flow.techie-timeline--flow-none .techie-timeline__item::after,
	.techie-timeline--flow .techie-timeline__item:last-child::after {
		display: none;
	}

	.techie-timeline--process .techie-timeline__item::after {
		border-left: var(--techie-line-width) solid var(--techie-muted);
		border-top: 0;
		height: 42px;
		left: 28px;
		top: 100%;
		width: 0;
	}
}

@media (max-width: 640px) {
	.techie-timeline--slider {
		--techie-per: var(--techie-per-mobile, 1);
	}

	/* With one card per view, stretching every item to the tallest sibling
	   leaves large empty space inside shorter cards — align to top instead. */
	.techie-timeline--slider .techie-timeline__track {
		align-items: flex-start;
	}

	.techie-timeline--slider .techie-timeline__card {
		min-height: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.techie-timeline--slider .techie-timeline__track {
		transition: none;
	}
}

/* ===== Navigation styles (arrows + bullets) ===== */
.techie-timeline--navarrows-square .techie-timeline__arrow { border-radius: 10px; }
.techie-timeline--navarrows-ghost .techie-timeline__arrow { background: color-mix(in srgb, var(--techie-accent), transparent 88%); border-color: transparent; box-shadow: none; }
.techie-timeline--navarrows-ghost .techie-timeline__arrow:hover { background: var(--techie-accent); color: #fff; }
.techie-timeline--navarrows-line .techie-timeline__arrow { background: transparent; border-color: transparent; box-shadow: none; }
.techie-timeline--navarrows-line .techie-timeline__arrow:hover { color: var(--techie-accent); transform: scale(1.15); }
.techie-timeline--navarrows-pill .techie-timeline__arrow { border-radius: 999px; width: calc(var(--techie-arrow-size, 42px) * 1.7); }
.techie-timeline--navarrows-outline .techie-timeline__arrow { background: transparent; border: 2px solid color-mix(in srgb, var(--techie-accent), transparent 55%); box-shadow: none; }
.techie-timeline--navarrows-outline .techie-timeline__arrow:hover { background: var(--techie-accent); border-color: var(--techie-accent); color: #fff; }
.techie-timeline--navarrows-soft .techie-timeline__arrow { background: color-mix(in srgb, var(--techie-accent), #fff 82%); border-color: transparent; box-shadow: none; }
.techie-timeline--navarrows-soft .techie-timeline__arrow:hover { background: var(--techie-accent); color: #fff; }
.techie-timeline--navarrows-floating .techie-timeline__arrow { border-color: transparent; box-shadow: var(--techie-shadow-lg); }
.techie-timeline--navarrows-floating .techie-timeline__arrow:hover { box-shadow: var(--techie-shadow-xl); transform: scale(1.08); }

.techie-timeline--dots-dash .techie-timeline__dot, .techie-timeline--dots-dash .techie-timeline__dot.is-active { border-radius: 999px; height: 4px; width: 20px; }
.techie-timeline--dots-circle .techie-timeline__dot, .techie-timeline--dots-circle .techie-timeline__dot.is-active { border-radius: 50%; height: 10px; width: 10px; }
.techie-timeline--dots-square .techie-timeline__dot, .techie-timeline--dots-square .techie-timeline__dot.is-active { border-radius: 3px; height: 10px; width: 10px; }
.techie-timeline--dots-line .techie-timeline__dot, .techie-timeline--dots-line .techie-timeline__dot.is-active { border-radius: 0; height: 2px; width: 26px; }
.techie-timeline--dots-ring .techie-timeline__dot { background: transparent; border: 2px solid color-mix(in srgb, var(--techie-accent), transparent 40%); height: 12px; width: 12px; }
.techie-timeline--dots-ring .techie-timeline__dot.is-active { background: var(--techie-accent); border-color: var(--techie-accent); width: 12px; }
.techie-timeline--dots-number .techie-timeline__dots { counter-reset: techie-timeline-dot; }
.techie-timeline--dots-number .techie-timeline__dot { align-items: center; background: transparent; border-radius: 8px; color: color-mix(in srgb, var(--techie-accent), transparent 25%); counter-increment: techie-timeline-dot; display: inline-flex; font-size: 13px; font-weight: 700; height: auto; justify-content: center; min-width: 26px; width: auto; }
.techie-timeline--dots-number .techie-timeline__dot::before { content: counter(techie-timeline-dot, decimal-leading-zero); }
.techie-timeline--dots-number .techie-timeline__dot.is-active { background: color-mix(in srgb, var(--techie-accent), transparent 86%); color: var(--techie-accent); width: auto; }
.techie-timeline--dots-worm .techie-timeline__dots { background: color-mix(in srgb, var(--techie-accent), transparent 82%); border-radius: 999px; padding: 5px 8px; }
.techie-timeline--dots-worm .techie-timeline__dot { background: transparent; height: 8px; width: 8px; }
.techie-timeline--dots-worm .techie-timeline__dot.is-active { background: var(--techie-accent); width: 26px; }

.techie-timeline--flow.techie-timeline--mpos-center .techie-timeline__marker {
	align-self: center;
	justify-content: center;
	text-align: center;
}

.techie-timeline--flow.techie-timeline--mpos-right .techie-timeline__marker {
	align-self: flex-end;
	justify-content: flex-end;
	text-align: right;
}

/* Text Align moves the whole step, marker included. */
.techie-timeline--flow.techie-timeline--text-center .techie-timeline__item {
	align-items: center;
	text-align: center;
}

.techie-timeline--flow.techie-timeline--text-right .techie-timeline__item {
	align-items: flex-end;
	text-align: right;
}
/* ============ UX BUILDER LAYOUT ============
   In the builder the steps are inserted straight into the root, so the grid
   rules that hang off `__viewport > __track` never match and the element
   collapses to nothing. These rules put the same grid on the root instead.
   `--builder` is emitted only by the builder template, so the front end, which
   keeps the viewport/track wrappers, is not affected. */
.techie-timeline--builder.techie-timeline--vertical {
	display: grid;
	gap: clamp(34px, 6vw, 72px);
}

.techie-timeline--builder.techie-timeline--process {
	display: grid;
	gap: clamp(42px, 6vw, 86px) var(--techie-gap);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.techie-timeline--builder.techie-timeline--horizontal {
	display: grid;
	gap: var(--techie-gap);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.techie-timeline--builder.techie-timeline--process.techie-timeline--cols-2,
.techie-timeline--builder.techie-timeline--horizontal.techie-timeline--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.techie-timeline--builder.techie-timeline--process.techie-timeline--cols-4,
.techie-timeline--builder.techie-timeline--horizontal.techie-timeline--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.techie-timeline--builder.techie-timeline--flow {
	display: grid;
	gap: var(--techie-gap);
	grid-template-columns: repeat(var(--techie-per-desktop, 5), minmax(0, 1fr));
	width: 100%;
}

.techie-timeline--builder.techie-timeline--flow.techie-timeline--cols-1 {
	grid-template-columns: 1fr;
}

.techie-timeline--builder.techie-timeline--flow.techie-timeline--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.techie-timeline--builder.techie-timeline--flow.techie-timeline--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.techie-timeline--builder.techie-timeline--flow.techie-timeline--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.techie-timeline--builder.techie-timeline--flow.techie-timeline--cols-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.techie-timeline--builder.techie-timeline--flow.techie-timeline--cols-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* The slider is a plain readable column in the builder; its JS carousel needs
   the viewport/track wrappers, which only the front end renders. */
.techie-timeline--builder.techie-timeline--slider {
	display: grid;
	gap: var(--techie-gap);
}

@media (max-width: 1024px) {
	.techie-timeline--builder.techie-timeline--flow {
		grid-template-columns: repeat(var(--techie-per-tablet, 2), minmax(0, 1fr));
	}
}

@media (max-width: 849px) {
	.techie-timeline--builder.techie-timeline--process,
	.techie-timeline--builder.techie-timeline--horizontal {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.techie-timeline--builder.techie-timeline--flow {
		grid-template-columns: 1fr;
	}
}