.datajoint-wwf {
	background: #fff;
	color: var(--wp--preset--color--text-on-light, #011627);
	padding-top: 120px;
	padding-bottom: 120px;
}

.datajoint-wwf__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--dj-gutter, 48px);
}

/* Header */
.datajoint-wwf__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-blue, #00a0df);
	line-height: 1;
}

.datajoint-wwf__heading {
	margin: 24px 0 0;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	color: var(--wp--preset--color--text-on-light, #011627);
}

@media (min-width: 1024px) {
	.datajoint-wwf__heading { font-size: 48px; }
}

.datajoint-wwf__intro {
	margin: 32px 0 0;
	max-width: 1240px;
	font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
	font-weight: 300;
	font-size: 22px;
	line-height: 1.5;
	color: #4a5568;
}

/* Diagram grid */
.datajoint-wwf__diagram { margin-top: 72px; }

.datajoint-wwf__grid {
	display: grid;
	grid-template-columns: 17fr 3.5fr 59fr 3.5fr 17fr;
	gap: 0;
	align-items: stretch;
}

.datajoint-wwf__flow-cell {
	display: flex;
	align-items: stretch;
	justify-content: stretch;
}

.datajoint-wwf__flow-cell--mirror { transform: scaleX(-1); }

/* Flank columns (Source / Outcomes) */
.datajoint-wwf__flank {
	display: flex;
	flex-direction: column;
	background: rgba(255, 81, 19, 0.04);
	border: 2px solid var(--wp--preset--color--brand-orange, #ff5113);
	border-radius: 8px;
	padding: 20px;
}

.datajoint-wwf__flank-title {
	margin: 0 0 16px;
	text-align: center;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-orange, #ff5113);
}

.datajoint-wwf__flank-boxes {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 10px;
}

/* Equal-height boxes (client decision): every Source Systems / Research Outcomes
   box grows to the same height regardless of 1 vs 2 lines of text, so the column
   reads uniform rather than ragged. */
.datajoint-wwf__flank-boxes > * { flex: 1 1 0; }

.datajoint-wwf__box {
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--brand-orange, #ff5113);
	border-radius: 8px;
	padding: 10px 14px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 13px;
	color: var(--wp--preset--color--text-on-light, #011627);
}

.datajoint-wwf__flank-caption {
	margin: 16px 0 0;
	min-height: 36px;
	text-align: center;
	font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
	font-weight: 300;
	font-style: italic;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 81, 19, 0.9);
}

.datajoint-wwf__flank-caption--neutral { color: #4a5568; }

/* The Downstream tier's caption sits inside a fixed-padding card, so it doesn't
   need the tall reserved height the flank captions use for column alignment. */
.datajoint-wwf__tier--ds .datajoint-wwf__flank-caption {
	margin-top: 10px;
	min-height: 0;
}

/* Center stacked column */
.datajoint-wwf__center {
	display: flex;
	flex-direction: column;
}

.datajoint-wwf__tier { border-radius: 8px; }

.datajoint-wwf__tier--dj {
	background: rgba(0, 160, 223, 0.04);
	border: 2px solid var(--wp--preset--color--brand-blue, #00a0df);
	padding: 14px;
}

.datajoint-wwf__tier--ds {
	background: var(--wp--preset--color--bg-light-grey, #f4f7fa);
	border: 2px solid #4a5568;
	/* Tighten the bottom so the Downstream card's lower whitespace matches the
	   DataJoint card above it (client feedback). */
	padding: 12px 20px 14px;
}

.datajoint-wwf__tier-title {
	margin: 0 0 12px;
	text-align: center;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	text-transform: uppercase;
}

.datajoint-wwf__tier-title--dj {
	font-size: 15px;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-wwf__tier-title--ds {
	font-size: 14px;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-on-light, #011627);
	margin-bottom: 10px;
}

.datajoint-wwf__sep { opacity: 0.6; }

/* DataJoint step cards */
.datajoint-wwf__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 20px;
}

.datajoint-wwf__step {
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--brand-blue, #00a0df);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.datajoint-wwf__step.is-accent { border-color: var(--wp--preset--color--brand-orange, #ff5113); }

.datajoint-wwf__step-bar {
	display: block;
	height: 3px;
	background: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-wwf__step.is-accent .datajoint-wwf__step-bar { background: var(--wp--preset--color--brand-orange, #ff5113); }

.datajoint-wwf__step-body {
	padding: 12px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.datajoint-wwf__step-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.datajoint-wwf__step-num {
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-wwf__step.is-accent .datajoint-wwf__step-num { color: var(--wp--preset--color--brand-orange, #ff5113); }

.datajoint-wwf__step-name {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 20px;
	color: var(--wp--preset--color--text-on-light, #011627);
	text-align: left;
}

.datajoint-wwf__step-text {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
	font-weight: 300;
	font-size: 10.5px;
	line-height: 1.45;
	color: #4a5568;
	text-align: left;
}

.datajoint-wwf__step-div {
	display: block;
	height: 1px;
	background: var(--wp--preset--color--border-light, #e2e2e2);
	/* Keep the divider a true 1px hairline. Push it DOWN using auto top margin
	   (transparent) so it never paints as a thick grey bar (client: "not thick
	   grey bars, just the same thin line, pushed down"). The 20px min gap above
	   it comes from the text block's margin-bottom below, since margin-top can't
	   be both `auto` and a fixed minimum. */
	margin: 0 0 10px;
	margin-top: auto;
}

/* Guaranteed breathing room above the hairline on every card. */
.datajoint-wwf__step-text {
	margin-bottom: 20px;
}

.datajoint-wwf__step-pillar {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 8.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-blue, #00a0df);
	text-align: left;
	line-height: 1.35;
	min-height: calc(8.5px * 1.35 * 3);
}

.datajoint-wwf__step.is-accent .datajoint-wwf__step-pillar { color: var(--wp--preset--color--brand-orange, #ff5113); }

/* Scientist-in-the-loop bar */
.datajoint-wwf__sitl {
	margin-top: 12px;
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--brand-blue, #00a0df);
	border-radius: 8px;
	padding: 8px 20px;
	text-align: center;
}

.datajoint-wwf__sitl-title {
	margin: 0 0 2px;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 15px;
	color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-wwf__sitl-text {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
	font-weight: 300;
	font-style: italic;
	font-size: 13px;
	color: #4a5568;
}

/* Vertical connector */
.datajoint-wwf__vconnector {
	width: 100%;
	height: 40px;
}

/* Downstream boxes */
.datajoint-wwf__dp-boxes {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

.datajoint-wwf__dp-box {
	flex: 1;
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--brand-blue, #00a0df);
	border-radius: 8px;
	padding: 8px 12px;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 12.5px;
	color: var(--wp--preset--color--text-on-light, #011627);
	line-height: 1.3;
}

/* Progression pill */
.datajoint-wwf__progression {
	margin-top: 64px;
	text-align: center;
}

.datajoint-wwf__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	background: var(--wp--preset--color--bg-dark, #0a1628);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(1, 22, 39, 0.06);
	padding: 20px 32px;
}

.datajoint-wwf__stage {
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.datajoint-wwf__stage--white { color: #fff; }
.datajoint-wwf__stage--blue { color: var(--wp--preset--color--brand-blue, #00a0df); }
.datajoint-wwf__stage--orange { color: var(--wp--preset--color--brand-orange, #ff5113); }
.datajoint-wwf__pill-arrow { flex-shrink: 0; }

/* Closing statement */
.datajoint-wwf__closing {
	margin: 24px auto 0;
	max-width: 960px;
	text-align: center;
	font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
	font-weight: 500;
	font-size: 30px;
	line-height: 1.35;
	color: var(--wp--preset--color--text-on-light, #011627);
	padding-top: 12px;
}

.datajoint-wwf__closing .is-accent { color: var(--wp--preset--color--brand-blue, #00a0df); }

/* CTA */
.datajoint-wwf__cta-wrap {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.datajoint-wwf__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 16px;
	color: var(--wp--preset--color--brand-blue, #00a0df);
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: border-color 200ms ease;
}

.datajoint-wwf__cta:hover { border-bottom-color: var(--wp--preset--color--brand-blue, #00a0df); }
.datajoint-wwf__cta-arrow { display: inline-block; transition: transform 200ms ease; }
.datajoint-wwf__cta:hover .datajoint-wwf__cta-arrow { transform: translateX(4px); }

/*
 * Collapse the horizontal flow connectors and stack the diagram below 1199px.
 * The flow cells only make sense in the 5-column desktop layout.
 */
@media (max-width: 1199px) {
	.datajoint-wwf__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.datajoint-wwf__flow-cell { display: none; }
	/* When the diagram stacks vertically the curved horizontal connectors are
	   hidden; hide the middle DataJoint<->Downstream connector too so we don't
	   show a single orphan flow strip with the others gone (client feedback). */
	.datajoint-wwf__vconnector { display: none; }
	.datajoint-wwf__center { gap: 16px; }
	.datajoint-wwf__flank-boxes {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.datajoint-wwf__flank-boxes > * { flex: 1 1 calc(20% - 12px); min-width: 140px; }
}

@media (max-width: 1199px) and (min-width: 768px) {
	.datajoint-wwf__steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.datajoint-wwf { padding-top: 64px; padding-bottom: 64px; }
	.datajoint-wwf__flank-boxes > * { flex: 1 1 calc(50% - 12px); }
	.datajoint-wwf__steps { grid-template-columns: 1fr; }
	.datajoint-wwf__dp-boxes { flex-wrap: wrap; }
	.datajoint-wwf__dp-box { flex: 1 1 calc(50% - 12px); }
	.datajoint-wwf__closing { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.datajoint-wwf__diagram .wwf-dot { animation: none; }
}