/* Artmark Flow Diagram widget — numbered input cards on the left whose curved
   lines converge into a dark result node, then fan back out to outcome chips
   on the right, with a notched gradient band underneath.

   Namespaced .am-flow so it cannot touch .am-conv (Artmark Convergence), which
   draws the simpler two-stage converge-only diagram.

   The connector geometry depends on one thing: each item column is a grid of
   EQUAL-height tracks with no row gap, so item i's centre is exactly
   (i + 0.5) / n of the column height. The visual gap comes from padding inside
   each track, which is symmetric and so does not move those centres. That is
   what lets the SVG curves — which are drawn in a normalised viewBox and
   stretched with preserveAspectRatio="none" — land on the items every time,
   at any width, without measuring anything in JavaScript. */

.am-flow {
	width: 100%;
	background-color: #faf6ef;
}

.am-flow__inner {
	width: 100%;
	max-width: none;
	margin: 0 auto;
}

/* ---------------------------------------------------------------- */
/* Head                                                              */
/* ---------------------------------------------------------------- */

.am-flow__eyerow {
	display: block;
	width: 100%;
}

.am-flow__head {
	margin-bottom: 64px;
}

.am-flow__headrow {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 60px;
}

.am-flow__title {
	margin: 0;
	max-width: 720px;
	font-size: 44px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #0b1016;
}

.am-flow__para {
	flex: 0 0 auto;
	max-width: var(--am-fl-paraw, 440px);
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: #4b5563;
}

/* ---------------------------------------------------------------- */
/* Diagram                                                           */
/* ---------------------------------------------------------------- */

.am-flow__diagram {
	display: flex;
	align-items: stretch;
}

/* Equal tracks, no row gap — see the note at the top of this file. */
.am-flow__col {
	display: grid;
	min-width: 0;
}

.am-flow__col--in {
	flex: 0 0 var(--am-fl-inw, 370px);
	grid-template-rows: repeat(var(--am-fl-inrows, 3), 1fr);
}

.am-flow__col--out {
	flex: 0 0 var(--am-fl-outw, 260px);
	grid-template-rows: repeat(var(--am-fl-outrows, 4), 1fr);
}

/* The half-gap padding sits inside each track, so it never shifts the centre
   the curves are aimed at. */
.am-flow__cell {
	display: flex;
	align-items: center;
	min-width: 0;
}

.am-flow__col--in .am-flow__cell {
	padding: calc(var(--am-fl-ingap, 44px) / 2) 0;
}

.am-flow__col--out .am-flow__cell {
	padding: calc(var(--am-fl-outgap, 30px) / 2) 0;
}

/* --- input cards --- */

.am-flow__input {
	--am-fl-in-notch: 0px;
	--am-fl-in-bg: #ffffff;
	--am-fl-in-bd: #e7e2d8;
	width: 100%;
	min-width: 0;
	padding: 26px 28px;
	background-color: var(--am-fl-in-bg);
	border: var(--am-fl-in-bdw, 1px) solid var(--am-fl-in-bd);
	color: inherit;
	text-decoration: none;
	clip-path: polygon(
		0 0,
		calc(100% - var(--am-fl-in-notch)) 0,
		100% var(--am-fl-in-notch),
		100% 100%,
		0 100%
	);
	transition: transform 0.25s ease, background-color 0.25s ease;
}

a.am-flow__input,
a.am-flow__input:hover,
a.am-flow__input:focus,
a.am-flow__input:focus-visible,
a.am-flow__input:active {
	background-image: none;
	background-color: var(--am-fl-in-bg, #ffffff);
	border-color: var(--am-fl-in-bd, #e7e2d8);
	box-shadow: none;
	outline: 0;
	color: inherit;
	text-decoration: none;
	transform: none;
}

a.am-flow__input:hover {
	background-color: var(--am-fl-in-bg-h, var(--am-fl-in-bg, #ffffff));
	transform: translateY(var(--am-fl-in-lift, 0px));
}

a.am-flow__input:focus-visible {
	outline: 2px solid var(--am-fl-focus, #0080b8);
	outline-offset: 2px;
}

.am-flow__num {
	display: block;
	margin-bottom: 10px;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.12em;
	color: #9ca3af;
}

.am-flow__intitle {
	margin: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #0b1016;
}

.am-flow__indesc {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: #6b7280;
}

/* --- connector lines --- */

.am-flow__lines {
	position: relative;
	flex: 1 1 auto;
	min-width: var(--am-fl-linemin, 70px);
	align-self: stretch;
}

.am-flow__lines svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.am-flow__line {
	stroke: var(--am-fl-linecolor, #cfc4ad);
	stroke-width: var(--am-fl-linew, 1);
	fill: none;
}

.am-flow__flow {
	stroke: var(--am-fl-flowcolor, #0080b8);
	stroke-width: var(--am-fl-floww, 2);
	stroke-dasharray: var(--am-fl-dash, 8 120);
	fill: none;
}

.am-flow-flow-yes .am-flow__flow {
	animation: am-flow-dash var(--am-fl-speed, 4s) linear infinite;
}

@keyframes am-flow-dash {
	to {
		stroke-dashoffset: -128;
	}
}

@media (prefers-reduced-motion: reduce) {
	.am-flow-flow-yes .am-flow__flow {
		animation: none;
	}
}

/* Junction dots. Drawn in CSS, not as SVG circles: the SVG is stretched with
   preserveAspectRatio="none", which would squash a circle into an ellipse. */
.am-flow-dots-yes .am-flow__lines--in::after,
.am-flow-dots-yes .am-flow__lines--out::before {
	content: "";
	position: absolute;
	top: 50%;
	z-index: 2;
	width: var(--am-fl-dot, 8px);
	height: var(--am-fl-dot, 8px);
	margin-top: calc(var(--am-fl-dot, 8px) / -2);
	border-radius: 50%;
	background-color: var(--am-fl-dotcolor, #0080b8);
}

.am-flow-dots-yes .am-flow__lines--in::after {
	right: calc(var(--am-fl-dot, 8px) / -2);
}

.am-flow-dots-yes .am-flow__lines--out::before {
	left: calc(var(--am-fl-dot, 8px) / -2);
}

/* --- result node --- */

.am-flow__nodewrap {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	min-width: 0;
}

.am-flow__node {
	--am-fl-node-notch: 24px;
	width: var(--am-fl-nodew, 236px);
	padding: 30px 32px;
	background-color: var(--am-fl-node-bg, #101820);
	clip-path: polygon(
		0 0,
		calc(100% - var(--am-fl-node-notch)) 0,
		100% var(--am-fl-node-notch),
		100% 100%,
		0 100%
	);
}

.am-flow__node-label {
	display: block;
	margin-bottom: 14px;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #9fb0bf;
}

.am-flow__node-text {
	display: block;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.22;
	letter-spacing: -0.01em;
	color: #ffffff;
}

/* --- outcome chips --- */

.am-flow__result {
	--am-fl-out-bg: #ffffff;
	--am-fl-out-bd: #e7e2d8;
	display: flex;
	align-items: flex-start;
	gap: var(--am-fl-bulletgap, 12px);
	width: 100%;
	min-width: 0;
	padding: 15px 18px;
	background-color: var(--am-fl-out-bg);
	border: var(--am-fl-out-bdw, 1px) solid var(--am-fl-out-bd);
	color: inherit;
	text-decoration: none;
	transition: transform 0.25s ease, background-color 0.25s ease;
}

a.am-flow__result,
a.am-flow__result:hover,
a.am-flow__result:focus,
a.am-flow__result:focus-visible,
a.am-flow__result:active {
	background-image: none;
	background-color: var(--am-fl-out-bg, #ffffff);
	border-color: var(--am-fl-out-bd, #e7e2d8);
	box-shadow: none;
	outline: 0;
	color: inherit;
	text-decoration: none;
	transform: none;
}

a.am-flow__result:hover {
	background-color: var(--am-fl-out-bg-h, var(--am-fl-out-bg, #ffffff));
	transform: translateX(var(--am-fl-out-lift, 0px));
}

a.am-flow__result:focus-visible {
	outline: 2px solid var(--am-fl-focus, #0080b8);
	outline-offset: 2px;
}

.am-flow__bullet {
	flex: 0 0 auto;
	width: var(--am-fl-bullet, 7px);
	height: var(--am-fl-bullet, 7px);
	margin-top: 0.5em;
	background-color: var(--am-fl-bulletcolor, #0080b8);
}

.am-flow__bullet img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.am-flow__outtext {
	margin: 0;
	min-width: 0;
	font-size: 14px;
	line-height: 1.45;
	color: #1f2937;
}

/* ---------------------------------------------------------------- */
/* Bottom band                                                       */
/* ---------------------------------------------------------------- */

.am-flow__band {
	--am-fl-bn-tl: 36px;
	--am-fl-bn-tr: 0px;
	--am-fl-bn-br: 36px;
	--am-fl-bn-bl: 0px;
	position: relative;
	margin-top: 72px;
	padding: 44px 56px;
	overflow: hidden;
	background-color: var(--am-fl-band-a, #3a8ede);
	background-image: linear-gradient(
		var(--am-fl-band-angle, 100deg),
		var(--am-fl-band-a, #3a8ede),
		var(--am-fl-band-b, #1a6fd4)
	);
	clip-path: polygon(
		var(--am-fl-bn-tl) 0,
		calc(100% - var(--am-fl-bn-tr)) 0,
		100% var(--am-fl-bn-tr),
		100% calc(100% - var(--am-fl-bn-br)),
		calc(100% - var(--am-fl-bn-br)) 100%,
		var(--am-fl-bn-bl) 100%,
		0 calc(100% - var(--am-fl-bn-bl)),
		0 var(--am-fl-bn-tl)
	);
}

.am-flow__band-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: var(--am-fl-band-imgop, 1);
	pointer-events: none;
}

.am-flow__band-inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
}

.am-flow__band-title {
	flex: 0 0 auto;
	margin: 0;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #ffffff;
}

.am-flow__band-text {
	flex: 0 1 auto;
	max-width: var(--am-fl-bandtextw, 600px);
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
}

/* ---------------------------------------------------------------- */
/* Responsive                                                        */
/* ---------------------------------------------------------------- */

@media (max-width: 1200px) {
	.am-flow__title {
		font-size: 36px;
	}

	.am-flow__node-text {
		font-size: 22px;
	}
}

/* The curves only make sense while the three zones sit side by side. Below
   this the diagram stacks and the connectors are dropped rather than left
   pointing at nothing. */
@media (max-width: 1024px) {
	.am-flow__headrow {
		flex-direction: column;
		gap: 24px;
	}

	.am-flow__para {
		max-width: 100%;
	}

	.am-flow__diagram {
		display: grid;
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.am-flow__lines {
		display: none;
	}

	.am-flow__col--in,
	.am-flow__col--out {
		flex: none;
		grid-template-rows: none;
		gap: var(--am-fl-ingap, 20px);
	}

	.am-flow__col--in .am-flow__cell,
	.am-flow__col--out .am-flow__cell {
		padding: 0;
	}

	.am-flow__nodewrap {
		justify-content: flex-start;
	}

	.am-flow__node {
		width: 100%;
	}

	.am-flow__band-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.am-flow__band-text {
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.am-flow__head {
		margin-bottom: 40px;
	}

	.am-flow__title {
		font-size: 28px;
	}

	.am-flow__input {
		padding: 20px 22px;
	}

	.am-flow__intitle {
		font-size: 18px;
	}

	.am-flow__band {
		--am-fl-bn-tl: 22px;
		--am-fl-bn-br: 22px;
		padding: 30px 24px;
	}

	.am-flow__band-title {
		font-size: 23px;
	}
}