/* Section: flow, the interactive diagram. The pipeline sits on the night band (stages in a row, one panel open); the
   timeline on a pale band (moments down a line that fills as the page scrolls, coloured by who acts). Tokens only. */
.s-flow { position: relative; overflow: hidden; isolation: isolate; }
.s-flow__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.s-flow__foot { display: flex; flex-direction: column; align-items: center; gap: var(--wp--preset--spacing--20); margin-block-start: var(--wp--preset--spacing--40); text-align: center; }
.s-flow__note { margin: 0; max-inline-size: 44rem; font-size: 0.9375rem; }

/* ---------- pipeline: the night band ---------- */
.s-flow--pipeline { background: var(--wp--custom--gradient--night); color: var(--wp--preset--color--primary-contrast); }
.s-flow--pipeline .s-flow__deco { background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 0) 0 0 / 26px 26px; mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent); }
.s-flow--pipeline :is(.section-head__title, .section-head__text) { color: var(--wp--preset--color--primary-contrast); }
.s-flow--pipeline .section-head__text { color: rgba(255, 255, 255, 0.82); }
.s-flow--pipeline .s-flow__note { color: rgba(255, 255, 255, 0.78); }
.s-flow--pipeline .s-flow__foot .btn--primary { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast); }
.s-flow--pipeline .s-flow__foot .btn--primary:hover { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); }

.flow--pipeline { position: relative; display: grid; gap: var(--wp--preset--spacing--20); }
.flow__node {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: var(--wp--preset--spacing--20);
	align-items: center;
	inline-size: 100%;
	padding: 0.6rem;
	border: 0;
	border-radius: var(--wp--custom--radius--large);
	background: transparent;
	color: inherit;
	text-align: start;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.flow__node:hover { background: rgba(255, 255, 255, 0.05); }
.flow__dot {
	position: relative;
	grid-row: span 2;
	display: grid;
	place-items: center;
	inline-size: 3.6rem;
	block-size: 3.6rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: var(--wp--custom--tint--lime-bright);
	transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.flow__dot .icon { inline-size: 1.6rem; block-size: 1.6rem; }
.flow__num {
	position: absolute;
	inset-block-start: -4px;
	inset-inline-end: -4px;
	display: grid;
	place-items: center;
	inline-size: 1.4rem;
	block-size: 1.4rem;
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--wp--preset--color--primary-contrast);
	font-size: 0.75rem;
	font-weight: var(--wp--custom--weight--heading);
	line-height: 1;
}
.flow__tag { font-size: var(--wp--preset--font-size--small); color: rgba(255, 255, 255, 0.72); font-weight: var(--wp--custom--weight--strong); align-self: end; }
.flow__name { font-family: var(--wp--custom--font--heading); font-weight: var(--wp--custom--weight--heading); font-size: 1.05rem; line-height: 1.35; align-self: start; }
.flow__node[aria-expanded="true"] .flow__dot {
	background: var(--wp--custom--gradient--lime);
	border-color: transparent;
	color: var(--wp--preset--color--accent-contrast);
	box-shadow: 0 0 0 6px rgba(155, 225, 93, 0.16), 0 0 32px rgba(155, 225, 93, 0.45);
	transform: scale(1.06);
}
.flow__card {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	align-items: flex-start;
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--large);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(6px);
}
.flow__card-icon { display: grid; place-items: center; inline-size: 3.2rem; block-size: 3.2rem; flex: none; border-radius: 16px; background: var(--wp--custom--gradient--lime); color: var(--wp--preset--color--accent-contrast); }
.flow__card-body { min-inline-size: 0; }
.flow--pipeline .flow__title { color: var(--wp--preset--color--primary-contrast); font-size: var(--wp--preset--font-size--large); margin-block-end: var(--wp--preset--spacing--10); }
.flow--pipeline .flow__text { color: rgba(255, 255, 255, 0.85); }
.flow__points { list-style: none; margin: var(--wp--preset--spacing--10) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.flow__points li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; border-radius: var(--wp--custom--radius--pill); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.9375rem; line-height: 1.45; }
.flow__points .icon { inline-size: 1rem; block-size: 1rem; color: var(--wp--custom--tint--lime-bright); flex: none; }
.flow__line { display: none; }
.flow__panel[hidden] { display: none; }
.flow__panel.is-in .flow__card { animation: flow-in 0.45s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes flow-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* on a phone and a tablet: the stages down the page, joined by a line at their dots, one panel open under its stage */
@media (max-width: 899px) {
	.flow__step { position: relative; }
	.flow__step:not(:last-child)::before {
		content: "";
		position: absolute;
		inset-inline-start: calc(0.6rem + 1.8rem - 1px);
		inset-block: 4rem -0.6rem;
		inline-size: 2px;
		background: linear-gradient(180deg, rgba(155, 225, 93, 0.6), rgba(255, 255, 255, 0.12));
	}
	.flow__panel { padding-inline-start: calc(0.6rem + 3.6rem + var(--wp--preset--spacing--20)); padding-block: 0.25rem 0.75rem; }
	.flow__panel .flow__card { padding: var(--wp--preset--spacing--20); }
	.flow__panel .flow__card-icon { display: none; }
	.flow--pipeline .flow__panel .flow__title { font-size: var(--wp--preset--font-size--medium); }
}

/* from 900px, with the script: the stages in a row on one line, the open panel under them */
@media (min-width: 900px) {
	.flow--pipeline.is-ready { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--10); row-gap: var(--wp--preset--spacing--30); }
	.flow--pipeline.is-ready .flow__step { display: contents; }
	.flow--pipeline.is-ready .flow__node { grid-row: 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; justify-items: center; row-gap: 0.4rem; text-align: center; padding: 0.4rem 0.3rem 0.6rem; }
	.flow--pipeline.is-ready .flow__dot { grid-row: auto; inline-size: 4.4rem; block-size: 4.4rem; z-index: 1; background: var(--wp--custom--tint--deep); }
	.flow--pipeline.is-ready .flow__node[aria-expanded="true"] .flow__dot { background: var(--wp--custom--gradient--lime); }
	.flow--pipeline.is-ready .flow__dot .icon { inline-size: 1.9rem; block-size: 1.9rem; }
	.flow--pipeline.is-ready .flow__tag { align-self: auto; }
	.flow--pipeline.is-ready .flow__name { align-self: auto; text-wrap: balance; }
	.flow--pipeline.is-ready .flow__panel { grid-row: 2; grid-column: 1 / -1; }
	.flow--pipeline.is-ready .flow__card { max-inline-size: 52rem; margin-inline: auto; padding: var(--wp--preset--spacing--40); }
	/* the line through the dots: from the first stage's centre to the last's, filled up to the open one */
	.flow--pipeline.is-ready .flow__line {
		display: block;
		position: absolute;
		inset-block-start: calc(0.4rem + 2.2rem - 1px);
		inset-inline: calc(100% / var(--n) / 2);
		block-size: 2px;
		border-radius: 2px;
		background: rgba(255, 255, 255, 0.16);
	}
	.flow__fill { display: block; block-size: 100%; inline-size: calc(var(--p, 0) * 100%); border-radius: inherit; background: var(--wp--custom--gradient--text); box-shadow: 0 0 12px rgba(155, 225, 93, 0.6); transition: inline-size 0.6s cubic-bezier(.4, 0, .2, 1); }
}

/* ---------- timeline: the pale band ---------- */
.s-flow--timeline { background: var(--wp--custom--gradient--soft); }
.s-flow--timeline .s-flow__deco { background: radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent) 0, transparent 24rem), radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--wp--custom--tint--mint) 12%, transparent) 0, transparent 22rem); }
.s-flow--timeline .s-flow__note { color: var(--wp--preset--color--muted); }
.flow--timeline { --c: var(--wp--custom--tint--mint); }
.flow__moment--customer { --c: var(--wp--custom--tint--amber); }
.flow__moment--bot { --c: var(--wp--custom--tint--mint); }
.flow__moment--team { --c: var(--wp--preset--color--primary); }
.flow__moment--owner { --c: var(--wp--preset--color--accent); }
.flow__actor--customer { --c: var(--wp--custom--tint--amber); }
.flow__actor--bot { --c: var(--wp--custom--tint--mint); }
.flow__actor--team { --c: var(--wp--preset--color--primary); }
.flow__actor--owner { --c: var(--wp--preset--color--accent); }
.flow__actors { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-block-end: var(--wp--preset--spacing--40); }
.flow__actor {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-block-size: 44px;
	padding: 0.35rem 1rem;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-weight: var(--wp--custom--weight--strong);
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
	box-shadow: var(--wp--custom--shadow--small);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.flow__actor:hover { border-color: var(--wp--preset--color--primary); }
.flow__actor[aria-pressed="true"] { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--primary-contrast); }
.flow__swatch { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--wp--preset--color--surface); }
.flow__track { position: relative; }
.flow__rail { position: absolute; inset-block: 0; inset-inline-start: 1.5rem; inline-size: 3px; border-radius: 2px; background: var(--wp--preset--color--line); }
.flow__rail-fill { display: block; inline-size: 100%; block-size: calc(var(--p, 1) * 100%); border-radius: inherit; background: linear-gradient(180deg, var(--wp--custom--tint--amber), var(--wp--custom--tint--mint) 35%, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--accent)); }
.flow__moments { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--30); }
.flow__moment { position: relative; padding-inline-start: 4rem; transition: opacity 0.35s ease, filter 0.35s ease; }
.flow__pin {
	position: absolute;
	inset-inline-start: calc(1.5rem + 1.5px - 1.35rem);
	inset-block-start: 0.6rem;
	display: grid;
	place-items: center;
	inline-size: 2.7rem;
	block-size: 2.7rem;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	border: 3px solid var(--c);
	color: var(--wp--preset--color--ink);
	box-shadow: var(--wp--custom--shadow--small);
	z-index: 1;
}
.flow__pin .icon { inline-size: 1.2rem; block-size: 1.2rem; }
.flow--timeline .flow__card {
	display: block;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-block-start: 4px solid var(--c);
	box-shadow: var(--wp--custom--shadow--lift);
	backdrop-filter: none;
}
.flow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-end: 0.5rem; }
.flow__time { padding: 0.1rem 0.65rem; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--ink); color: var(--wp--preset--color--primary-contrast); font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--weight--heading); font-variant-numeric: tabular-nums; }
.flow__who { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--weight--strong); color: var(--wp--preset--color--muted); }
.flow__who::before { content: ""; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--c); }
.flow--timeline .flow__title { font-size: var(--wp--preset--font-size--medium); margin-block-end: 0.35rem; }
.flow--timeline .flow__text { color: var(--wp--preset--color--muted); }
.flow--timeline .flow__text:last-child { margin-block-end: 0; }
.flow--timeline .flow__points li { background: var(--wp--preset--color--surface-alt); border-color: var(--wp--preset--color--line); color: var(--wp--preset--color--ink); }
.flow--timeline .flow__points .icon { color: var(--wp--preset--color--primary); }
/* the actor picked: the others step back */
.flow--timeline[data-pick] .flow__moment:not(.is-picked) { opacity: 0.32; filter: saturate(0.4); }
/* the moments come in as the page reaches them (only when the script runs; never for a crawler) */
.flow--timeline.is-ready .flow__moment:not(.is-seen) .flow__card { opacity: 0; transform: translateY(18px); }
.flow--timeline.is-ready .flow__moment .flow__card { transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2, .8, .3, 1); }

/* from 900px: the line in the middle, the moments on either side of it */
@media (min-width: 900px) {
	.flow__rail { inset-inline-start: calc(50% - 1.5px); }
	.flow__moments { gap: var(--wp--preset--spacing--20); }
	.flow__moment { inline-size: 50%; padding-inline: 0 3.2rem; }
	.flow__moment:nth-child(even) { margin-inline-start: 50%; padding-inline: 3.2rem 0; }
	.flow__moment .flow__pin { inset-inline-start: auto; inset-inline-end: -1.35rem; }
	.flow__moment:nth-child(even) .flow__pin { inset-inline-start: -1.35rem; inset-inline-end: auto; }
	.flow__moment:not(:first-child) { margin-block-start: -2.5rem; }
}