/* ==========================================================================
   Climedo product animations — Autonomous Data Capture
   Self-contained CSS/SVG scenes, namespaced .si-* / .ex-* / .pr-* / .nt-*
   so nothing here can reach the rest of the page.

   Source prototypes: climedo-adc-hero, climedo-extract-flow,
   climedo-parse-page. Step names and palette follow the product's own
   smart-import components (navy #051F48, mint #B4F4DC, teal #17A2AC).

   The prototypes loaded Manrope + IBM Plex Mono from Google. Manrope is
   already self-hosted by the theme; IBM Plex Mono is self-hosted below, so
   this file makes no third-party request and needs no consent gate.
   ========================================================================== */

@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- adc-hero ---------- */
.si-host { width: 100%; max-width: 1200px; margin: 0 auto; }


	/* ============================================================
	   Climedo · Autonomous Data Capture hero animation
	   Palette + step names taken from the product itself:
	   navy #051F48, mint #B4F4DC, teal #17A2AC (cleo tokens),
	   steps 1 Select source / 2 Upload / 3 Review (smart-import-modal)
	   ============================================================ */
	.si-wrap {
		--navy: #051f48;
		--navy-soft: #0a2c5e;
		--teal: #17a2ac;
		--teal-deep: #117985;
		--mint: #b4f4dc;
		--mint-bright: #7aebc1;
		--green: #17ac6b;
		--paper: #ffffff;
		--ground: #f4f9f9;
		--ground-2: #e7f2f3;
		--line: #d3e3e5;
		--line-soft: #e6eff0;
		--muted: #6d8189;
		--dur: 7s;

		position: relative;
		width: 100%;
		aspect-ratio: 1 / 1;
		overflow: hidden;
		background:
			radial-gradient(120% 90% at 50% 12%, #ffffff 0%, var(--ground) 46%, var(--ground-2) 100%);
		font-family: Manrope, 'Helvetica Neue', Arial, sans-serif;
		color: var(--navy);
		-webkit-font-smoothing: antialiased;
	}

	/* blueprint ground -------------------------------------------------- */
	.si-grid {
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(to right, rgba(23, 162, 172, 0.09) 1px, transparent 1px),
			linear-gradient(to bottom, rgba(23, 162, 172, 0.09) 1px, transparent 1px);
		background-size: 48px 48px;
		-webkit-mask-image: radial-gradient(72% 62% at 50% 48%, #000 30%, transparent 100%);
		mask-image: radial-gradient(72% 62% at 50% 48%, #000 30%, transparent 100%);
	}
	.si-frame {
		position: absolute;
		inset: 2.2%;
		border: 1px dashed rgba(5, 31, 72, 0.14);
		border-radius: 2px;
	}
	.si-frame::before,
	.si-frame::after {
		content: '';
		position: absolute;
		width: 7px;
		height: 7px;
		border: 1px solid rgba(5, 31, 72, 0.28);
		background: #fff;
	}
	.si-frame::before {
		left: -4px;
		top: -4px;
	}
	.si-frame::after {
		right: -4px;
		bottom: -4px;
	}
	.si-floor {
		position: absolute;
		left: calc(50% + 95px);
		top: 50%;
		width: 660px;
		height: 300px;
		margin: -150px 0 0 -330px;
		transform: translateY(300px);
		background: radial-gradient(50% 50% at 50% 50%, rgba(5, 31, 72, 0.13), transparent 70%);
	}

	/* stage ------------------------------------------------------------- */
	.si-stage {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 1000px;
		height: 1000px;
		transform: translate(-50%, -50%) scale(var(--si-scale, 1));
		transform-origin: 50% 50%;
	}

	/* dashed corner risers, drawn behind the stack ---------------------- */
	.si-riser {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 0;
		border-left: 1px dashed rgba(17, 121, 133, 0.4);
	}
	.si-riser--l {
		height: 605px;
		transform: translate(-139px, -326px);
	}
	.si-riser--r {
		height: 605px;
		transform: translate(329px, -326px);
	}
	.si-riser--f {
		height: 564px;
		transform: translate(95px, -195px);
	}
	.si-riser i {
		position: absolute;
		left: -3px;
		top: 0;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: var(--teal);
		box-shadow: 0 0 8px rgba(23, 162, 172, 0.8);
		animation: si-spark var(--dur) linear infinite;
	}
	.si-riser--r i {
		animation-delay: calc(var(--dur) * -0.33);
	}
	.si-riser--f i {
		animation-delay: calc(var(--dur) * -0.66);
	}
	@keyframes si-spark {
		0% {
			top: 100%;
			opacity: 0;
		}
		8% {
			opacity: 1;
		}
		84% {
			opacity: 1;
		}
		92%,
		100% {
			top: -2%;
			opacity: 0;
		}
	}

	/* isometric scene --------------------------------------------------- */
	.si-scene {
		position: absolute;
		left: calc(50% + 95px);
		top: calc(50% + 40px);
		width: 0;
		height: 0;
		transform-style: preserve-3d;
		animation: si-bob var(--dur) ease-in-out infinite;
	}
	@keyframes si-bob {
		0%,
		100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-9px);
		}
	}
	.si-iso {
		position: absolute;
		transform-style: preserve-3d;
		transform: rotateX(56deg) rotateZ(-45deg) scale(0.72);
	}

	.si-layer {
		position: absolute;
		left: -230px;
		top: -230px;
		width: 460px;
		height: 460px;
		transform-style: preserve-3d;
		transform: translateZ(var(--z));
		animation: si-lift var(--dur) ease-in-out infinite;
		animation-delay: var(--d, 0s);
	}
	@keyframes si-lift {
		0%,
		100% {
			transform: translateZ(var(--z));
		}
		14%,
		34% {
			transform: translateZ(calc(var(--z) + 10px));
		}
	}

	/* activation glow shared by every content plate --------------------- */
	.si-panel::after,
	.si-page::after {
		content: '';
		position: absolute;
		inset: 0;
		border: 1px solid var(--teal);
		opacity: 0;
		pointer-events: none;
		animation: si-plate-hot var(--dur) ease-out infinite;
		animation-delay: var(--d, 0s);
	}
	@keyframes si-plate-hot {
		0%,
		10%,
		46%,
		100% {
			opacity: 0;
			box-shadow: 0 0 0 0 rgba(23, 162, 172, 0);
		}
		18%,
		30% {
			opacity: 0.9;
			box-shadow: 0 0 22px 0 rgba(23, 162, 172, 0.28);
		}
	}

	/* ---- layer 0 · source documents ----------------------------------- */
	.si-sheet {
		position: absolute;
		width: 152px;
		height: 196px;
		padding: 14px;
		background: var(--paper);
		border: 1px solid var(--line);
		box-shadow: 0 14px 24px -18px rgba(5, 31, 72, 0.6);
		animation: si-sheet-in var(--dur) ease-in-out infinite;
	}
	@keyframes si-sheet-in {
		0%,
		100% {
			transform: translateZ(0);
		}
		12%,
		40% {
			transform: translateZ(8px);
		}
	}
	.si-sheet--a {
		left: 22px;
		top: 140px;
		animation-delay: 0s;
	}
	.si-sheet--b {
		left: 152px;
		top: 24px;
		animation-delay: 0.1225s;
	}
	.si-sheet--c {
		left: 286px;
		top: 148px;
		animation-delay: 0.245s;
	}
	.si-doc-tag {
		font: 700 10px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.1em;
		color: var(--teal-deep);
		border: 1px solid var(--line);
		padding: 3px 5px;
		display: inline-block;
		margin-bottom: 9px;
	}
	.si-tl {
		height: 4px;
		background: var(--line-soft);
		margin-bottom: 7px;
	}
	.si-tl--dark {
		background: #cbd8dd;
	}
	.si-tl--w7 {
		width: 70%;
	}
	.si-tl--w5 {
		width: 50%;
	}
	.si-tl--w9 {
		width: 88%;
	}
	.si-scrawl {
		stroke: #9fb2ba;
		stroke-width: 2.2;
		fill: none;
		stroke-linecap: round;
	}
	.si-mini-tab {
		display: grid;
		grid-template-columns: 1fr 34px;
		gap: 4px 6px;
		margin-top: 4px;
	}
	.si-mini-tab span {
		height: 5px;
		background: var(--line-soft);
	}
	.si-mini-tab span:nth-child(2n) {
		background: #d8e6e8;
	}

	/* ---- layer 1 · select source -------------------------------------- */
	.si-panel {
		position: absolute;
		inset: 25px;
		background: var(--paper);
		border: 1px solid var(--line);
		box-shadow: 0 20px 34px -22px rgba(5, 31, 72, 0.55);
		padding: 22px 24px;
		display: flex;
		flex-direction: column;
		gap: 14px;
	}
	.si-panel-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--line-soft);
		padding-bottom: 8px;
	}
	.si-panel-title {
		font: 800 15px/1 Manrope, sans-serif;
		letter-spacing: 0.01em;
		color: var(--navy);
	}
	.si-panel-meta {
		font: 500 11px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--muted);
		letter-spacing: 0.06em;
	}
	.si-tiles {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}
	.si-tile {
		border: 1px solid var(--line);
		padding: 16px 8px;
		display: flex;
		flex-direction: column;
		gap: 8px;
		align-items: center;
		background: #fbfdfd;
	}
	.si-tile b {
		font: 700 11px/1.2 Manrope, sans-serif;
		color: var(--muted);
		text-align: center;
	}
	.si-tile svg {
		width: 28px;
		height: 28px;
		stroke: var(--muted);
		fill: none;
		stroke-width: 1.6;
	}
	.si-tile--pick {
		animation: si-tile-pick var(--dur) ease-out infinite;
	}
	.si-tile--pick svg {
		animation: si-tile-ico var(--dur) ease-out infinite;
	}
	.si-tile--pick b {
		animation: si-tile-lbl var(--dur) ease-out infinite;
	}
	@keyframes si-tile-pick {
		0%,
		12%,
		52%,
		100% {
			border-color: var(--line);
			background: #fbfdfd;
			box-shadow: none;
		}
		20%,
		44% {
			border-color: var(--teal);
			background: #effbfa;
			box-shadow: 0 0 0 3px rgba(180, 244, 220, 0.55);
		}
	}
	@keyframes si-tile-ico {
		0%,
		12%,
		52%,
		100% {
			stroke: var(--muted);
		}
		20%,
		44% {
			stroke: var(--teal-deep);
		}
	}
	@keyframes si-tile-lbl {
		0%,
		12%,
		52%,
		100% {
			color: var(--muted);
		}
		20%,
		44% {
			color: var(--navy);
		}
	}

	/* ---- layer 2 · upload & extract ----------------------------------- */
	.si-page {
		position: absolute;
		inset: 25px;
		background: var(--paper);
		border: 1px solid var(--line);
		box-shadow: 0 20px 34px -22px rgba(5, 31, 72, 0.55);
		padding: 22px 24px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		gap: 14px;
	}
	.si-page-head {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		border-bottom: 1px solid var(--line-soft);
		padding-bottom: 10px;
	}
	.si-page-head b {
		font: 800 14px/1 Manrope, sans-serif;
	}
	.si-page-head span {
		font: 500 11px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--muted);
	}
	.si-page-body {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px 16px;
		align-content: start;
		flex: 1;
	}
	.si-kv {
		display: flex;
		align-items: center;
		gap: 8px;
		height: 19px;
	}
	.si-kv i {
		height: 5px;
		flex: 1;
		background: var(--line-soft);
		font-style: normal;
	}
	.si-hit {
		position: relative;
		font: 600 11px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--navy);
		padding: 3px 4px;
		white-space: nowrap;
		border: 1px solid transparent;
		animation: si-hit var(--dur) ease-out infinite;
		animation-delay: var(--hd, 0s);
	}
	@keyframes si-hit {
		0%,
		22%,
		62%,
		100% {
			background: transparent;
			border-color: transparent;
			color: #93a7ae;
		}
		30%,
		54% {
			background: rgba(180, 244, 220, 0.62);
			border-color: var(--mint-bright);
			color: var(--navy);
		}
	}
	.si-beam {
		position: absolute;
		top: -10%;
		left: 0;
		width: 34%;
		height: 120%;
		background: linear-gradient(
			90deg,
			rgba(23, 162, 172, 0) 0%,
			rgba(180, 244, 220, 0.5) 55%,
			rgba(122, 235, 193, 0.85) 88%,
			rgba(17, 121, 133, 0) 100%
		);
		border-right: 1.5px solid var(--teal);
		opacity: 0;
		animation: si-beam var(--dur) linear infinite;
	}
	@keyframes si-beam {
		0%,
		19% {
			transform: translateX(-40%);
			opacity: 0;
		}
		22% {
			opacity: 1;
		}
		48% {
			opacity: 1;
		}
		52%,
		100% {
			transform: translateX(300%);
			opacity: 0;
		}
	}

	/* ---- layer 3 · review --------------------------------------------- */
	.si-rows {
		display: flex;
		flex-direction: column;
		margin-top: auto;
		gap: 9px;
	}
	.si-tiles-fill {
		margin-top: auto;
		display: grid;
	}
		.si-split {
		display: grid;
		grid-template-columns: 124px 1fr;
		gap: 14px;
		margin-top: auto;
	}
	.si-split .si-rows {
		margin-top: 0;
	}
	.si-preview {
		position: relative;
		border: 1px solid var(--line);
		background: #fbfdfd;
		padding: 10px 9px;
		overflow: hidden;
	}
	.si-preview-tag {
		display: block;
		font: 600 8px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.08em;
		color: var(--muted);
		margin-bottom: 9px;
	}
	.si-bbox {
		position: absolute;
		border: 2px solid var(--teal);
		border-radius: 3px;
		background: transparent;
		opacity: 0;
		animation: si-bbox var(--dur) ease-out infinite;
		animation-delay: var(--bd, 0s);
	}
	@keyframes si-bbox {
		0%,
		40% {
			opacity: 0;
			transform: scale(0.94);
			box-shadow: 0 0 0 0 rgba(23, 162, 172, 0);
		}
		46%,
		56% {
			opacity: 1;
			transform: scale(1);
			box-shadow:
				0 0 0 3px rgba(180, 244, 220, 0.65),
				0 0 12px rgba(23, 162, 172, 0.4);
		}
		64%,
		88% {
			opacity: 0.5;
			transform: scale(1);
			box-shadow: 0 0 0 0 rgba(23, 162, 172, 0);
		}
		94%,
		100% {
			opacity: 0;
			transform: scale(0.94);
		}
	}
	.si-fields {
		display: flex;
		flex-direction: column;
		gap: 10px;
		min-width: 0;
	}
	.si-toolbar-count {
		font: 500 9px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--muted);
	}
	.si-lede {
		margin: 0;
		max-width: 230px;
		font: 500 11px/1.5 Manrope, sans-serif;
		color: var(--muted);
	}
	.si-toolbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}
	.si-toolbar-title {
		font: 800 11px/1 Manrope, sans-serif;
		color: var(--navy);
	}
	.si-search {
		flex: 1;
		max-width: 150px;
		border: 1px solid var(--line);
		padding: 6px 9px;
		font: 500 10px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: #9fb2ba;
	}
	.si-subject {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 16px;
		font: 600 10px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--navy);
	}
	.si-subject em {
		font-style: normal;
		color: var(--muted);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		margin-right: 5px;
	}
	.si-foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		border-top: 1px solid var(--line-soft);
		padding-top: 14px;
	}
	.si-foot-note {
		font: 500 11px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--muted);
		letter-spacing: 0.02em;
	}
	.si-cta {
		font: 700 12px/1 Manrope, sans-serif;
		padding: 9px 16px;
		border-radius: 18px;
		background: linear-gradient(90deg, #b4f4dc 0%, #8fe9d0 100%);
		color: var(--navy);
		white-space: nowrap;
	}
	.si-prog {
		position: relative;
		flex: 1;
		height: 5px;
		background: var(--line-soft);
		overflow: hidden;
	}
		.si-prog i {
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, var(--teal) 0%, var(--mint-bright) 100%);
		transform: scaleX(0);
		transform-origin: 0 50%;
		animation: si-prog var(--dur) linear infinite;
	}
	@keyframes si-prog {
		0%,
		18% {
			transform: scaleX(0);
		}
		48%,
		88% {
			transform: scaleX(1);
		}
		94%,
		100% {
			transform: scaleX(0);
		}
	}
	.si-saved {
		display: flex;
		align-items: center;
		gap: 6px;
		font: 700 11px/1 Manrope, sans-serif;
		color: #fff;
		background: var(--green);
		padding: 7px 12px;
		border-radius: 14px;
		opacity: 0;
		transform: scale(0.6);
		animation: si-saved-pop var(--dur) cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
	}
	@keyframes si-saved-pop {
		0%,
		74%,
		96%,
		100% {
			opacity: 0;
			transform: scale(0.6);
		}
		80%,
		92% {
			opacity: 1;
			transform: scale(1);
		}
	}
	.si-saved svg {
		width: 10px;
		height: 10px;
		stroke: #fff;
		stroke-width: 3;
		fill: none;
	}
	.si-row {
		display: grid;
		grid-template-columns: 13px 1fr 66px 32px;
		align-items: center;
		gap: 7px;
		height: 20px;
		border-bottom: 1px solid #f0f5f6;
		padding-bottom: 4px;
	}
	.si-box {
		width: 13px;
		height: 13px;
		border: 1px solid #b8ccd1;
		display: grid;
		place-items: center;
		animation: si-box var(--dur) ease-out infinite;
		animation-delay: var(--rd, 0s);
	}
	.si-box svg {
		width: 10px;
		height: 10px;
		stroke: #fff;
		stroke-width: 2.6;
		fill: none;
		opacity: 0;
		animation: si-tick var(--dur) ease-out infinite;
		animation-delay: var(--rd, 0s);
	}
	@keyframes si-box {
		0%,
		44%,
		92%,
		100% {
			background: #fff;
			border-color: #b8ccd1;
		}
		50%,
		86% {
			background: var(--green);
			border-color: var(--green);
		}
	}
	@keyframes si-tick {
		0%,
		46%,
		92%,
		100% {
			opacity: 0;
		}
		52%,
		86% {
			opacity: 1;
		}
	}
	.si-row-label {
		font: 600 10px/1 Manrope, sans-serif;
		color: var(--navy);
		white-space: nowrap;
		overflow: hidden;
	}
	.si-row-val {
		font: 600 10px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--navy);
		text-align: right;
		white-space: nowrap;
		opacity: 0;
		animation: si-val var(--dur) ease-out infinite;
		animation-delay: var(--rd, 0s);
	}
	@keyframes si-val {
		0%,
		40%,
		92%,
		100% {
			opacity: 0;
			transform: translateX(5px);
		}
		48%,
		86% {
			opacity: 1;
			transform: translateX(0);
		}
	}
	.si-conf {
		font: 600 9px/1 'IBM Plex Mono', ui-monospace, monospace;
		white-space: nowrap;
		color: var(--teal-deep);
		background: rgba(180, 244, 220, 0.5);
		border: 1px solid rgba(122, 235, 193, 0.9);
		text-align: center;
		padding: 2px 0;
		opacity: 0;
		animation: si-val var(--dur) ease-out infinite;
		animation-delay: var(--rd, 0s);
	}

	/* ---- layer 4 · the eCRF ------------------------------------------- */
	.si-crf-row {
		display: grid;
		grid-template-columns: 1fr 88px 16px;
		align-items: center;
		gap: 10px;
		height: 22px;
		border-bottom: 1px solid #f0f5f6;
	}
	.si-crf-row > b {
		font: 600 11px/1 Manrope, sans-serif;
		color: var(--muted);
	}
	.si-cell {
		position: relative;
		height: 17px;
		border: 1px solid var(--line);
		background: #fff;
		overflow: hidden;
	}
	.si-cell::before {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(180, 244, 220, 0.45);
		transform: scaleX(0);
		transform-origin: 0 50%;
		animation: si-fill var(--dur) cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
		animation-delay: var(--cd, 0s);
	}
	@keyframes si-fill {
		0%,
		58%,
		94%,
		100% {
			transform: scaleX(0);
		}
		66%,
		90% {
			transform: scaleX(1);
		}
	}
	.si-cell span {
		position: absolute;
		inset: 0;
		display: grid;
		place-items: center;
		font: 600 10px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--navy);
		white-space: nowrap;
		opacity: 0;
		animation: si-cell-txt var(--dur) ease-out infinite;
		animation-delay: var(--cd, 0s);
	}
	@keyframes si-cell-txt {
		0%,
		60%,
		94%,
		100% {
			opacity: 0;
		}
		68%,
		90% {
			opacity: 1;
		}
	}
	.si-crf-check {
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background: var(--green);
		opacity: 0;
		transform: scale(0.4);
		display: grid;
		place-items: center;
		animation: si-pop var(--dur) cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
		animation-delay: var(--cd, 0s);
	}
	.si-crf-check svg {
		width: 9px;
		height: 9px;
		stroke: #fff;
		stroke-width: 3;
		fill: none;
	}
	@keyframes si-pop {
		0%,
		62%,
		94%,
		100% {
			opacity: 0;
			transform: scale(0.4);
		}
		70%,
		90% {
			opacity: 1;
			transform: scale(1);
		}
	}

	/* ---- layer 5 · platform canopy ------------------------------------ */
	.si-glass {
		position: absolute;
		left: 0;
		top: 0;
		width: 460px;
		height: 460px;
		border: 1.5px solid var(--teal);
		background: linear-gradient(
			135deg,
			rgba(180, 244, 220, 0.22) 0%,
			rgba(122, 235, 193, 0.15) 45%,
			rgba(23, 162, 172, 0.12) 100%
		);
		box-shadow: 0 30px 60px -40px rgba(5, 31, 72, 0.55);
		display: grid;
		place-items: center;
	}
	.si-glass::before {
		content: '';
		position: absolute;
		inset: 16px;
		border: 1px dashed rgba(17, 121, 133, 0.45);
	}
	.si-glass::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			120deg,
			transparent 30%,
			rgba(255, 255, 255, 0.75) 47%,
			transparent 62%
		);
		opacity: 0;
		animation: si-sheen var(--dur) ease-in-out infinite;
	}
	@keyframes si-sheen {
		0%,
		66%,
		100% {
			opacity: 0;
			transform: translateX(-30%);
		}
		78% {
			opacity: 1;
		}
		92% {
			opacity: 0;
			transform: translateX(30%);
		}
	}
	.si-mark {
		width: 190px;
		height: 190px;
		opacity: 0.3;
		filter: blur(1.4px);
		animation: si-mark var(--dur) ease-in-out infinite;
	}
	@keyframes si-mark {
		0%,
		62%,
		100% {
			opacity: 0.3;
			filter: blur(1.4px);
		}
		78%,
		90% {
			opacity: 0.52;
			filter: blur(0.6px);
		}
	}
	.si-ring {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 300px;
		height: 300px;
		margin: -150px 0 0 -150px;
		border: 1.5px solid var(--teal);
		opacity: 0;
		animation: si-ring var(--dur) ease-out infinite;
	}
	@keyframes si-ring {
		0%,
		72%,
		100% {
			opacity: 0;
			transform: scale(0.55);
		}
		76% {
			opacity: 0.75;
		}
		94% {
			opacity: 0;
			transform: scale(1.5);
		}
	}

	/* ---- data in flight ----------------------------------------------- */
	.si-chip {
		position: absolute;
		left: 50%;
		top: 50%;
		display: flex;
		align-items: center;
		gap: 5px;
		padding: 4px 7px;
		background: #fff;
		border: 1px solid var(--teal);
		box-shadow: 0 0 0 3px rgba(180, 244, 220, 0.5);
		font: 600 12px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--navy);
		white-space: nowrap;
		opacity: 0;
		animation: si-chip var(--dur) cubic-bezier(0.45, 0, 0.3, 1) infinite;
		animation-delay: var(--fd, 0s);
	}
	.si-chip em {
		width: 4px;
		height: 4px;
		background: var(--mint-bright);
		font-style: normal;
	}
	@keyframes si-chip {
		0%,
		24% {
			opacity: 0;
			transform: translate3d(var(--cx), var(--cy), 0px) scale(0.85);
		}
		28% {
			opacity: 1;
			transform: translate3d(var(--cx), var(--cy), 30px) scale(1);
		}
		40% {
			opacity: 1;
		}
		48%,
		100% {
			opacity: 0;
			transform: translate3d(var(--cx), var(--cy), 175px) scale(0.9);
		}
	}

	/* ---- flat labels --------------------------------------------------- */
	.si-hud {
		position: absolute;
		left: calc(50% + 95px);
		top: calc(50% + 22px);
		width: 0;
		height: 0;
	}
	.si-tag {
		position: absolute;
		right: 249px;
		display: flex;
		align-items: center;
		gap: 10px;
		white-space: nowrap;
		transform: translateY(-50%);
	}
	.si-tag::after {
		content: '';
		position: absolute;
		right: -11px;
		top: 50%;
		width: 11px;
		border-top: 1px dashed rgba(17, 121, 133, 0.55);
	}
	.si-tag u {
		font: 600 11px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.12em;
		color: var(--teal-deep);
		text-decoration: none;
		opacity: 0.75;
	}
	.si-tag b {
		font: 700 15px/1 Manrope, sans-serif;
		letter-spacing: -0.01em;
		color: var(--navy);
	}
	.si-tag--soft b {
		font-weight: 600;
		color: var(--muted);
	}
	.si-tag-dot {
		position: absolute;
		right: -18px;
		top: 50%;
		width: 7px;
		height: 7px;
		margin-top: -3.5px;
		border-radius: 50%;
		background: #fff;
		border: 1.5px solid rgba(17, 121, 133, 0.5);
		animation: si-dot var(--dur) ease-out infinite;
		animation-delay: var(--d, 0s);
	}
	@keyframes si-dot {
		0%,
		10%,
		48%,
		100% {
			background: #fff;
			border-color: rgba(17, 121, 133, 0.5);
			box-shadow: 0 0 0 0 rgba(23, 162, 172, 0);
		}
		18%,
		38% {
			background: var(--teal);
			border-color: var(--teal);
			box-shadow: 0 0 0 5px rgba(180, 244, 220, 0.65);
		}
	}
	.si-tag--live b {
		animation: si-tag-hot var(--dur) ease-out infinite;
		animation-delay: var(--d, 0s);
	}
	@keyframes si-tag-hot {
		0%,
		10%,
		48%,
		100% {
			color: var(--navy);
		}
		18%,
		38% {
			color: var(--teal-deep);
		}
	}

	.si-caption {
		position: absolute;
		left: 50%;
		white-space: nowrap;
		bottom: 5.5%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		gap: 10px;
		font: 600 12px/1 Manrope, sans-serif;
		color: var(--muted);
		letter-spacing: 0.01em;
	}
	.si-caption span {
		width: 5px;
		height: 5px;
		background: var(--mint-bright);
		border: 1px solid var(--teal);
	}

	@media (prefers-reduced-motion: reduce) {
		.si-wrap *,
		.si-wrap *::before,
		.si-wrap *::after {
			animation-play-state: paused !important;
			animation-delay: -4.725s !important;
		}
	}

/* ---------- extract-flow ---------- */
.ex-host { width: 100%; max-width: 1200px; margin: 0 auto; }


	/* ============================================================
	   Climedo · Extraction figure (companion to the ADC hero)
	   Source documents travel a belt, pass through the Smart Import
	   gate, and come out the other side as structured RWE records.
	   Palette from the cleo tokens: navy #051F48, mint #B4F4DC,
	   teal #17A2AC, verified green #17AC6B.
	   ============================================================ */
	.ex-wrap {
		--navy: #051f48;
		--teal: #17a2ac;
		--teal-deep: #117985;
		--mint: #b4f4dc;
		--mint-bright: #7aebc1;
		--green: #17ac6b;
		--paper: #ffffff;
		--ground: #f4f9f9;
		--ground-2: #e7f2f3;
		--line: #d3e3e5;
		--line-soft: #e6eff0;
		--muted: #6d8189;
		--dur: 7s;

		position: relative;
		width: 100%;
		aspect-ratio: 3 / 2;
		overflow: hidden;
		background:
			radial-gradient(110% 100% at 46% 20%, #ffffff 0%, var(--ground) 48%, var(--ground-2) 100%);
		font-family: Manrope, 'Helvetica Neue', Arial, sans-serif;
		color: var(--navy);
		-webkit-font-smoothing: antialiased;
	}

	/* schematic ground --------------------------------------------------- */
	.ex-grid {
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(to right, rgba(23, 162, 172, 0.09) 1px, transparent 1px),
			linear-gradient(to bottom, rgba(23, 162, 172, 0.09) 1px, transparent 1px);
		background-size: 48px 48px;
		-webkit-mask-image: radial-gradient(76% 70% at 50% 50%, #000 26%, transparent 100%);
		mask-image: radial-gradient(76% 70% at 50% 50%, #000 26%, transparent 100%);
	}
	.ex-frame {
		position: absolute;
		inset: 2.6% 2%;
		border: 1px dashed rgba(5, 31, 72, 0.14);
	}
	.ex-frame::before,
	.ex-frame::after {
		content: '';
		position: absolute;
		width: 7px;
		height: 7px;
		border: 1px solid rgba(5, 31, 72, 0.28);
		background: #fff;
	}
	.ex-frame::before {
		left: -4px;
		top: -4px;
	}
	.ex-frame::after {
		right: -4px;
		bottom: -4px;
	}

	/* stage --------------------------------------------------------------- */
	.ex-stage {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 1200px;
		height: 800px;
		transform: translate(-50%, -50%) scale(var(--ex-scale, 1));
		transform-origin: 50% 50%;
	}
	.ex-scene {
		position: absolute;
		left: 50%;
		top: calc(50% + 15px);
		width: 0;
		height: 0;
		transform-style: preserve-3d;
	}
	.ex-iso {
		position: absolute;
		transform-style: preserve-3d;
		transform: rotateX(56deg) rotateZ(-45deg);
	}

	/* the belt ------------------------------------------------------------ */
	.ex-belt {
		position: absolute;
		left: -170px;
		top: -430px;
		width: 340px;
		height: 900px;
		background: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.78) 16%,
			rgba(255, 255, 255, 0.78) 84%,
			rgba(255, 255, 255, 0) 100%
		);
		border-left: 1px dashed rgba(17, 121, 133, 0.42);
		border-right: 1px dashed rgba(17, 121, 133, 0.42);
		-webkit-mask-image: linear-gradient(
			to bottom,
			transparent 0%,
			#000 15%,
			#000 85%,
			transparent 100%
		);
		mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
	}
	.ex-belt::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 430px;
		border-top: 1px solid rgba(23, 162, 172, 0.5);
	}
	.ex-rung {
		position: absolute;
		left: 0;
		width: 340px;
		border-top: 1px solid rgba(17, 121, 133, 0.14);
	}

	/* documents and records in transit ------------------------------------ */
	.ex-item {
		position: absolute;
		left: -85px;
		top: -105px;
		width: 170px;
		height: 210px;
		transform-style: preserve-3d;
		animation: ex-travel var(--dur) linear infinite;
		animation-delay: var(--d, 0s);
	}
	@keyframes ex-travel {
		0% {
			transform: translate3d(0, -380px, 9px);
		}
		100% {
			transform: translate3d(0, 400px, 9px);
		}
	}
	.ex-face {
		position: absolute;
		inset: 0;
		background: var(--paper);
		border: 1px solid var(--line);
		box-shadow: 0 22px 34px -24px rgba(5, 31, 72, 0.6);
		padding: 14px 15px;
		display: flex;
		flex-direction: column;
		gap: 8px;
		overflow: hidden;
	}
	.ex-face--doc {
		animation: ex-doc var(--dur) linear infinite;
		animation-delay: var(--d, 0s);
	}
	.ex-face--rec {
		animation: ex-rec var(--dur) linear infinite;
		animation-delay: var(--d, 0s);
		border-color: rgba(23, 162, 172, 0.55);
		box-shadow:
			0 0 0 3px rgba(180, 244, 220, 0.4),
			0 22px 34px -24px rgba(5, 31, 72, 0.55);
	}
	@keyframes ex-doc {
		0% {
			opacity: 0;
		}
		7%,
		43% {
			opacity: 1;
		}
		48%,
		100% {
			opacity: 0;
		}
	}
	@keyframes ex-rec {
		0%,
		52% {
			opacity: 0;
		}
		57%,
		92% {
			opacity: 1;
		}
		99%,
		100% {
			opacity: 0;
		}
	}

	/* document faces ------------------------------------------------------- */
	.ex-doc-tag {
		align-self: flex-start;
		font: 700 9px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.12em;
		color: var(--teal-deep);
		border: 1px solid var(--line);
		padding: 4px 6px;
	}
	.ex-tl {
		height: 5px;
		background: var(--line-soft);
	}
	.ex-tl--dark {
		background: #cbd8dd;
	}
	.ex-tl--w9 {
		width: 88%;
	}
	.ex-tl--w7 {
		width: 68%;
	}
	.ex-tl--w5 {
		width: 46%;
	}
	.ex-stack {
		display: flex;
		flex-direction: column;
		gap: 7px;
	}
	.ex-doc-grid {
		display: grid;
		grid-template-columns: 1fr 40px 34px;
		gap: 6px 8px;
	}
	.ex-doc-grid span {
		height: 5px;
		background: var(--line-soft);
	}
	.ex-doc-grid span:nth-child(3n + 2) {
		background: #d8e6e8;
	}
	.ex-qrow {
		display: flex;
		align-items: center;
		gap: 7px;
	}
	.ex-qbox {
		width: 9px;
		height: 9px;
		border: 1px solid #b8ccd1;
		flex: none;
	}
	.ex-qbox--on {
		background: #cbd8dd;
		border-color: #a8bcc2;
	}
	.ex-qrow i {
		height: 5px;
		flex: 1;
		background: var(--line-soft);
		font-style: normal;
	}
	.ex-scrawl {
		stroke: #9fb2ba;
		stroke-width: 2.4;
		fill: none;
		stroke-linecap: round;
	}

	/* record faces --------------------------------------------------------- */
	.ex-rec-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
	}
	.ex-chip {
		font: 700 8px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.14em;
		color: var(--teal-deep);
		background: rgba(180, 244, 220, 0.45);
		border: 1px solid rgba(122, 235, 193, 0.9);
		padding: 4px 6px;
	}
	.ex-ok {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background: var(--green);
		display: grid;
		place-items: center;
		flex: none;
	}
	.ex-ok svg {
		width: 9px;
		height: 9px;
		stroke: #fff;
		stroke-width: 3;
		fill: none;
	}
	.ex-rec-title {
		margin: 0;
		font: 800 13px/1.2 Manrope, sans-serif;
		letter-spacing: -0.01em;
		color: var(--navy);
	}
	.ex-rec-sub {
		margin: 0;
		font: 500 10px/1.3 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--teal-deep);
	}
	.ex-rule {
		border-top: 1px solid var(--line-soft);
	}
	.ex-kv {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}
	.ex-kv div {
		display: flex;
		align-items: baseline;
		gap: 6px;
		font: 600 10px/1 Manrope, sans-serif;
		color: var(--muted);
	}
	.ex-kv em {
		flex: 1;
		border-bottom: 1px dotted #c3d5d9;
		font-style: normal;
	}
	.ex-kv b {
		font: 600 10px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--navy);
		white-space: nowrap;
	}
	.ex-tab {
		display: grid;
		grid-template-columns: 1fr 46px 30px;
		gap: 6px 8px;
		font: 600 9px/1.1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--navy);
	}
	.ex-tab u {
		font: 600 8px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.1em;
		color: var(--muted);
		text-decoration: none;
	}
	.ex-tab-fill {
		grid-column: 1 / -1;
		height: 5px;
		background: rgba(180, 244, 220, 0.55);
	}
	.ex-pills {
		display: flex;
		flex-wrap: wrap;
		gap: 5px;
	}
	.ex-pill {
		font: 600 9px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--navy);
		background: rgba(180, 244, 220, 0.4);
		border: 1px solid rgba(122, 235, 193, 0.8);
		padding: 4px 5px;
	}
	.ex-more {
		font: 500 9px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--muted);
	}

	/* the gate -------------------------------------------------------------- */
	.ex-gate {
		position: absolute;
		left: -180px;
		top: -224px;
		width: 360px;
		height: 224px;
		transform-origin: 50% 100%;
		transform: rotateX(-90deg);
		border: 1.5px solid var(--teal);
		background: linear-gradient(
			160deg,
			rgba(180, 244, 220, 0.34) 0%,
			rgba(122, 235, 193, 0.2) 46%,
			rgba(23, 162, 172, 0.14) 100%
		);
		display: grid;
		place-items: center;
		overflow: hidden;
	}
	.ex-gate::before {
		content: '';
		position: absolute;
		inset: 13px;
		border: 1px dashed rgba(17, 121, 133, 0.45);
	}
	.ex-mark {
		width: 232px;
		height: auto;
		opacity: 0.5;
		filter: blur(0.5px);
		animation: ex-mark var(--dur) ease-out infinite;
	}
	@keyframes ex-mark {
		17%,
		21%,
		50%,
		54%,
		83%,
		87% {
			opacity: 0.7;
			filter: blur(0.2px);
		}
		0%,
		33%,
		66%,
		100% {
			opacity: 0.42;
			filter: blur(0.6px);
		}
	}
	.ex-flash {
		position: absolute;
		inset: 0;
		background: radial-gradient(
			62% 70% at 50% 55%,
			rgba(180, 244, 220, 0.95) 0%,
			rgba(122, 235, 193, 0.5) 45%,
			rgba(23, 162, 172, 0) 100%
		);
		opacity: 0;
		animation: ex-flash var(--dur) linear infinite;
	}
	@keyframes ex-flash {
		0%,
		15% {
			opacity: 0;
		}
		17% {
			opacity: 0.85;
		}
		24%,
		48% {
			opacity: 0;
		}
		50% {
			opacity: 0.85;
		}
		57%,
		82% {
			opacity: 0;
		}
		83% {
			opacity: 0.85;
		}
		90%,
		100% {
			opacity: 0;
		}
	}
	.ex-scanline {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 12%;
		background: linear-gradient(
			90deg,
			rgba(23, 162, 172, 0) 0%,
			rgba(122, 235, 193, 0.85) 60%,
			rgba(23, 162, 172, 0) 100%
		);
		border-right: 1px solid rgba(23, 162, 172, 0.65);
		animation: ex-scan var(--dur) linear infinite;
	}
	@keyframes ex-scan {
		0% {
			transform: translateX(-140%);
		}
		49.9% {
			transform: translateX(880%);
		}
		50% {
			transform: translateX(-140%);
		}
		100% {
			transform: translateX(880%);
		}
	}
	.ex-gate-foot {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		border-bottom: 2px solid var(--teal);
	}

	/* flat callouts ---------------------------------------------------------- */
	.ex-hud {
		position: absolute;
		inset: 0;
		pointer-events: none;
	}
	.ex-label {
		position: absolute;
		display: flex;
		align-items: center;
		gap: 9px;
		white-space: nowrap;
	}
	.ex-label u {
		font: 600 10px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--teal-deep);
		text-decoration: none;
	}
	.ex-label b {
		font: 700 16px/1 Manrope, sans-serif;
		letter-spacing: -0.01em;
		color: var(--navy);
	}
	.ex-label--soft b {
		font-weight: 600;
		color: var(--muted);
	}
	.ex-label i {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #fff;
		border: 1.5px solid rgba(17, 121, 133, 0.55);
		flex: none;
	}
	.ex-leader {
		position: absolute;
		border-top: 1px dashed rgba(17, 121, 133, 0.5);
	}
	.ex-drop {
		position: absolute;
		border-left: 1px dashed rgba(17, 121, 133, 0.5);
	}
	.ex-readout {
		position: absolute;
		display: grid;
		gap: 9px;
		padding: 14px 16px;
		border: 1px dashed rgba(17, 121, 133, 0.35);
		background: rgba(255, 255, 255, 0.72);
	}
	.ex-readout div {
		display: flex;
		align-items: baseline;
		gap: 14px;
		justify-content: space-between;
	}
	.ex-readout u {
		font: 600 9px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.14em;
		color: var(--muted);
		text-decoration: none;
	}
	.ex-readout b {
		font: 600 11px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--navy);
	}
	.ex-num {
		position: relative;
		display: inline-block;
		min-width: 26px;
		height: 11px;
	}
	.ex-num span {
		position: absolute;
		right: 0;
		top: 0;
		opacity: 0;
		animation: ex-num var(--dur) steps(1, end) infinite;
		animation-delay: var(--nd, 0s);
	}
	@keyframes ex-num {
		0% {
			opacity: 1;
		}
		33.3% {
			opacity: 0;
		}
		100% {
			opacity: 0;
		}
	}
	.ex-caption {
		position: absolute;
		left: 50%;
		bottom: 5.5%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		gap: 10px;
		font: 600 13px/1 Manrope, sans-serif;
		color: var(--muted);
	}
	.ex-caption span {
		width: 5px;
		height: 5px;
		background: var(--mint-bright);
		border: 1px solid var(--teal);
	}

	@media (prefers-reduced-motion: reduce) {
		.ex-wrap *,
		.ex-wrap *::before,
		.ex-wrap *::after {
			animation-play-state: paused !important;
			animation-delay: -4.025s !important;
		}
	}

/* ---------- parse-page ---------- */
.pr-host { width: 100%; max-width: 1200px; margin: 0 auto; }


	/* ============================================================
	   Climedo · Parse figure (third in the set)
	   The scanner plate drops in over the page, a band sweeps the
	   page top to bottom, the regions it crosses light up, and the
	   values lift off toward the plate. Every edge is straight.
	   Geometry note: the scale3d on .pr-iso and the .pr-scene offset
	   must match SCALE / OY in build3.py, which computes the beams.
	   ============================================================ */
	.pr-wrap {
		--navy: #051f48;
		--navy-deep: #041634;
		--teal: #17a2ac;
		--teal-deep: #117985;
		--mint: #b4f4dc;
		--mint-bright: #7aebc1;
		--green: #17ac6b;
		--paper: #ffffff;
		--ground: #f4f9f9;
		--ground-2: #e7f2f3;
		--line: #d3e3e5;
		--line-soft: #e6eff0;
		--muted: #6d8189;
		--dur: 7s;

		position: relative;
		width: 100%;
		aspect-ratio: 3 / 2;
		overflow: hidden;
		background:
			radial-gradient(105% 95% at 50% 22%, #ffffff 0%, var(--ground) 46%, var(--ground-2) 100%);
		font-family: Manrope, 'Helvetica Neue', Arial, sans-serif;
		color: var(--navy);
		-webkit-font-smoothing: antialiased;
	}
	.pr-wrap,
	.pr-wrap *,
	.pr-wrap *::before,
	.pr-wrap *::after {
		box-sizing: border-box;
	}

	.pr-grid {
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(to right, rgba(23, 162, 172, 0.09) 1px, transparent 1px),
			linear-gradient(to bottom, rgba(23, 162, 172, 0.09) 1px, transparent 1px);
		background-size: 48px 48px;
		-webkit-mask-image: radial-gradient(74% 72% at 50% 50%, #000 28%, transparent 100%);
		mask-image: radial-gradient(74% 72% at 50% 50%, #000 28%, transparent 100%);
	}
	.pr-frame {
		position: absolute;
		inset: 2.6% 2%;
		border: 1px dashed rgba(5, 31, 72, 0.14);
	}
	.pr-frame::before,
	.pr-frame::after {
		content: '';
		position: absolute;
		width: 7px;
		height: 7px;
		border: 1px solid rgba(5, 31, 72, 0.28);
		background: #fff;
	}
	.pr-frame::before {
		left: -4px;
		top: -4px;
	}
	.pr-frame::after {
		right: -4px;
		bottom: -4px;
	}

	/* stage ---------------------------------------------------------------- */
	.pr-stage {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 1200px;
		height: 800px;
		transform: translate(-50%, -50%) scale(var(--pr-scale, 1));
		transform-origin: 50% 50%;
	}
	.pr-beams {
		position: absolute;
		inset: 0;
		width: 1200px;
		height: 800px;
		opacity: 0;
		animation: pr-beams-in var(--dur) ease-out infinite;
	}
	@keyframes pr-beams-in {
		0%,
		12% {
			opacity: 0;
		}
		18%,
		72% {
			opacity: 1;
		}
		82%,
		100% {
			opacity: 0;
		}
	}
	.pr-beams--front .pr-beam {
		stroke: rgba(23, 162, 172, 0.42);
	}
	.pr-beams--front .pr-beam-flow {
		stroke: rgba(23, 162, 172, 0.85);
	}
	.pr-beam {
		stroke: rgba(23, 162, 172, 0.34);
		stroke-width: 1;
		fill: none;
	}
	.pr-beam-flow {
		stroke: rgba(23, 162, 172, 0.75);
		stroke-width: 1.4;
		fill: none;
		stroke-dasharray: 5 13;
		animation: pr-flow var(--dur) linear infinite;
	}
	@keyframes pr-flow {
		0% {
			stroke-dashoffset: 0;
		}
		100% {
			stroke-dashoffset: 216;
		}
	}
	.pr-scene {
		position: absolute;
		left: 50%;
		top: calc(50% + 85px);
		width: 0;
		height: 0;
		transform-style: preserve-3d;
	}
	.pr-iso {
		position: absolute;
		transform-style: preserve-3d;
		transform: rotateX(56deg) rotateZ(-45deg) scale3d(1.1, 1.1, 1.1);
	}

	/* the page ------------------------------------------------------------- */
	.pr-doc {
		position: absolute;
		left: -280px;
		top: -200px;
		width: 560px;
		height: 400px;
		background: var(--paper);
		border: 1px solid var(--line);
		box-shadow: 0 34px 50px -34px rgba(5, 31, 72, 0.55);
		padding: 26px 28px;
		display: flex;
		flex-direction: column;
		gap: 14px;
		overflow: hidden;
	}
	.pr-doc-head {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 20px;
		border-bottom: 2px solid var(--navy);
		padding-bottom: 12px;
	}
	.pr-doc-head b {
		display: block;
		font: 800 19px/1.1 Manrope, sans-serif;
		letter-spacing: -0.015em;
	}
	.pr-doc-head span {
		display: block;
		margin-top: 5px;
		font: 500 11px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--muted);
		letter-spacing: 0.04em;
	}
	.pr-doc-date {
		font: 600 12px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--navy);
		white-space: nowrap;
	}
	.pr-meta {
		display: flex;
		gap: 26px;
		border-bottom: 1px solid var(--line-soft);
		padding-bottom: 10px;
	}
	.pr-meta span {
		font: 600 11px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--navy);
	}
	.pr-meta u {
		font: 600 9px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.14em;
		color: var(--muted);
		text-decoration: none;
		margin-right: 7px;
	}
	.pr-body {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 26px;
		flex: 1;
	}
	.pr-col {
		display: flex;
		flex-direction: column;
		gap: 9px;
		min-width: 0;
	}
	.pr-col + .pr-col {
		border-left: 1px solid var(--line-soft);
		padding-left: 26px;
	}
	.pr-h {
		margin: 0;
		font: 700 10px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.14em;
		color: var(--teal-deep);
	}
	.pr-txt {
		margin: 0;
		font: 500 11px/1.5 Manrope, sans-serif;
		color: var(--navy);
	}
	.pr-rule {
		height: 4px;
		background: var(--line-soft);
	}
	.pr-rule--w9 {
		width: 92%;
	}
	.pr-rule--w7 {
		width: 72%;
	}
	.pr-rule--w5 {
		width: 54%;
	}
	.pr-rows {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}
	.pr-row {
		display: flex;
		align-items: baseline;
		gap: 8px;
		font: 600 11px/1.25 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--navy);
	}
	.pr-row i {
		font-style: normal;
		font-family: Manrope, sans-serif;
		font-weight: 600;
		color: var(--muted);
		white-space: nowrap;
	}
	.pr-row em {
		flex: 1;
		border-bottom: 1px dotted #c3d5d9;
		font-style: normal;
	}
	.pr-ecg {
		width: 100%;
		height: 34px;
		stroke: var(--teal-deep);
		stroke-width: 1.6;
		fill: none;
		stroke-linejoin: miter;
	}
	.pr-foot {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 20px;
		border-top: 1px solid var(--line-soft);
		padding-top: 10px;
	}
	.pr-sign {
		display: flex;
		flex-direction: column;
		gap: 5px;
		min-width: 168px;
	}
	.pr-sign span {
		border-top: 1px solid var(--navy);
		padding-top: 5px;
		font: 500 9px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--muted);
		letter-spacing: 0.1em;
	}
	.pr-stamp {
		border: 1.5px solid var(--teal-deep);
		padding: 6px 10px;
		font: 700 9px/1.3 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.12em;
		color: var(--teal-deep);
		text-align: center;
	}

	/* the band runs down the page, not across it ---------------------------- */
	.pr-scan {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 15%;
		background: linear-gradient(
			180deg,
			rgba(23, 162, 172, 0) 0%,
			rgba(180, 244, 220, 0.36) 60%,
			rgba(122, 235, 193, 0.7) 95%,
			rgba(23, 162, 172, 0) 100%
		);
		border-bottom: 1.5px solid var(--teal);
		opacity: 0;
		animation: pr-scan var(--dur) linear infinite;
	}
	@keyframes pr-scan {
		0%,
		19% {
			transform: translateY(-40%);
			opacity: 0;
		}
		22% {
			opacity: 1;
		}
		60% {
			opacity: 1;
		}
		64%,
		100% {
			transform: translateY(680%);
			opacity: 0;
		}
	}

	/* regions light up as the band reaches their row ------------------------ */
	.pr-hit {
		position: absolute;
		border: 2px solid var(--teal);
		background: rgba(180, 244, 220, 0.3);
		opacity: 0;
	}
	.pr-hit--1,
	.pr-hit--3 {
		animation: pr-hit-upper var(--dur) ease-out infinite;
	}
	.pr-hit--2,
	.pr-hit--4 {
		animation: pr-hit-lower var(--dur) ease-out infinite;
	}
	@keyframes pr-hit-upper {
		0%,
		33% {
			opacity: 0;
			box-shadow: 0 0 0 0 rgba(23, 162, 172, 0);
		}
		36%,
		44% {
			opacity: 1;
			box-shadow: 0 0 0 3px rgba(180, 244, 220, 0.6);
		}
		52%,
		80% {
			opacity: 0.75;
			box-shadow: 0 0 0 0 rgba(23, 162, 172, 0);
		}
		90%,
		100% {
			opacity: 0;
		}
	}
	@keyframes pr-hit-lower {
		0%,
		43% {
			opacity: 0;
			box-shadow: 0 0 0 0 rgba(23, 162, 172, 0);
		}
		46%,
		54% {
			opacity: 1;
			box-shadow: 0 0 0 3px rgba(180, 244, 220, 0.6);
		}
		62%,
		80% {
			opacity: 0.75;
			box-shadow: 0 0 0 0 rgba(23, 162, 172, 0);
		}
		90%,
		100% {
			opacity: 0;
		}
	}

	/* values lifting off the page ------------------------------------------- */
	.pr-chip {
		position: absolute;
		left: 50%;
		top: 50%;
		display: flex;
		align-items: center;
		gap: 7px;
		padding: 6px 9px;
		background: #fff;
		border: 1px solid var(--teal);
		box-shadow: 0 0 0 3px rgba(180, 244, 220, 0.45);
		font: 600 12px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--navy);
		white-space: nowrap;
		opacity: 0;
	}
	.pr-chip u {
		font: 600 9px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.1em;
		color: var(--teal-deep);
		text-decoration: none;
	}
	.pr-chip--1,
	.pr-chip--3 {
		animation: pr-lift-upper var(--dur) cubic-bezier(0.35, 0, 0.25, 1) infinite;
	}
	.pr-chip--2,
	.pr-chip--4 {
		animation: pr-lift-lower var(--dur) cubic-bezier(0.35, 0, 0.25, 1) infinite;
	}
	@keyframes pr-lift-upper {
		0%,
		40% {
			opacity: 0;
			transform: translate3d(var(--cx), var(--cy), 10px) scale(0.9);
		}
		45% {
			opacity: 1;
			transform: translate3d(var(--cx), var(--cy), 52px) scale(1);
		}
		57% {
			opacity: 1;
		}
		68%,
		100% {
			opacity: 0;
			transform: translate3d(var(--cx), var(--cy), 205px) scale(0.94);
		}
	}
	@keyframes pr-lift-lower {
		0%,
		50% {
			opacity: 0;
			transform: translate3d(var(--cx), var(--cy), 10px) scale(0.9);
		}
		55% {
			opacity: 1;
			transform: translate3d(var(--cx), var(--cy), 52px) scale(1);
		}
		67% {
			opacity: 1;
		}
		78%,
		100% {
			opacity: 0;
			transform: translate3d(var(--cx), var(--cy), 205px) scale(0.94);
		}
	}

	/* the scanner plate arrives, hovers, withdraws --------------------------- */
	.pr-tile {
		position: absolute;
		left: -120px;
		top: -78px;
		width: 240px;
		height: 156px;
		transform: translateZ(340px);
		background: var(--paper);
		border: 1px solid var(--line);
		box-shadow: 0 26px 40px -26px rgba(5, 31, 72, 0.5);
		padding: 13px;
		animation: pr-land var(--dur) cubic-bezier(0.25, 0.9, 0.3, 1) infinite;
	}
	@keyframes pr-land {
		0% {
			transform: translateZ(620px);
			opacity: 0;
		}
		6% {
			opacity: 1;
		}
		12% {
			transform: translateZ(324px);
		}
		17% {
			transform: translateZ(340px);
		}
		42% {
			transform: translateZ(348px);
		}
		68% {
			transform: translateZ(333px);
		}
		82% {
			transform: translateZ(340px);
			opacity: 1;
		}
		95%,
		100% {
			transform: translateZ(620px);
			opacity: 0;
		}
	}
	.pr-plate {
		position: relative;
		width: 100%;
		height: 100%;
		background: linear-gradient(150deg, #ffffff 0%, #f2f9f8 100%);
		border: 1px solid var(--line-soft);
		display: grid;
		place-items: center;
		overflow: hidden;
	}
	.pr-plate::after {
		content: '';
		position: absolute;
		inset: 0;
		background: radial-gradient(
			72% 72% at 50% 50%,
			rgba(122, 235, 193, 0.45) 0%,
			rgba(23, 162, 172, 0) 72%
		);
		opacity: 0;
		animation: pr-plate var(--dur) ease-in-out infinite;
	}
	@keyframes pr-plate {
		0%,
		16%,
		86%,
		100% {
			opacity: 0;
		}
		26%,
		64% {
			opacity: 1;
		}
	}
	.pr-mark {
		position: relative;
		z-index: 1;
		width: 186px;
		height: auto;
	}

	/* flat callouts --------------------------------------------------------- */
	.pr-hud {
		position: absolute;
		inset: 0;
		pointer-events: none;
	}
	.pr-label {
		position: absolute;
		display: flex;
		align-items: center;
		gap: 9px;
		white-space: nowrap;
	}
	.pr-label u {
		font: 600 10px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--teal-deep);
		text-decoration: none;
	}
	.pr-label b {
		font: 700 16px/1 Manrope, sans-serif;
		letter-spacing: -0.01em;
		color: var(--navy);
	}
	.pr-label--soft b {
		font-weight: 600;
		color: var(--muted);
	}
	.pr-label i {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #fff;
		border: 1.5px solid rgba(17, 121, 133, 0.55);
		flex: none;
	}
	.pr-leader {
		position: absolute;
		border-top: 1px dashed rgba(17, 121, 133, 0.5);
	}

	.pr-conv {
		position: absolute;
		display: grid;
		gap: 9px;
		padding: 13px 15px;
		border: 1px dashed rgba(17, 121, 133, 0.35);
		background: rgba(255, 255, 255, 0.72);
	}
	.pr-conv > u {
		font: 600 9px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.14em;
		color: var(--muted);
		text-decoration: none;
	}
	.pr-conv div {
		display: flex;
		align-items: baseline;
		gap: 9px;
		font: 600 11px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--navy);
	}
	.pr-conv s {
		color: var(--muted);
		text-decoration: none;
	}
	.pr-conv b {
		padding: 3px 5px;
		color: var(--teal-deep);
		background: rgba(180, 244, 220, 0.45);
		border: 1px solid rgba(122, 235, 193, 0.85);
		opacity: 0;
	}
	.pr-conv-a b {
		animation: pr-conv-a var(--dur) ease-out infinite;
	}
	.pr-conv-b b {
		animation: pr-conv-b var(--dur) ease-out infinite;
	}
	@keyframes pr-conv-a {
		0%,
		46% {
			opacity: 0;
			transform: translateX(-4px);
		}
		52%,
		84% {
			opacity: 1;
			transform: translateX(0);
		}
		92%,
		100% {
			opacity: 0;
		}
	}
	@keyframes pr-conv-b {
		0%,
		54% {
			opacity: 0;
			transform: translateX(-4px);
		}
		60%,
		84% {
			opacity: 1;
			transform: translateX(0);
		}
		92%,
		100% {
			opacity: 0;
		}
	}

	.pr-caption {
		position: absolute;
		left: 50%;
		bottom: 5.5%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		gap: 10px;
		font: 600 13px/1 Manrope, sans-serif;
		color: var(--muted);
	}
	.pr-caption span {
		width: 5px;
		height: 5px;
		background: var(--mint-bright);
		border: 1px solid var(--teal);
	}

	@media (prefers-reduced-motion: reduce) {
		.pr-wrap *,
		.pr-wrap *::before,
		.pr-wrap *::after {
			animation-play-state: paused !important;
			animation-delay: -3.7s !important;
		}
	}


/* ---------- clai-form-builder ---------- */
.cf-host{width:100%;margin:0;padding:0;container-type:inline-size}

	/* Climedo · CLAI form building intelligence — protocol + prompt in, eCRF / PRO / SAE forms out.
	   Panel copy follows the product's own CLAI screen. One 10s loop, no per-element
	   delays on anything that has to disappear before the loop restarts. */
	.cf-wrap {
		--navy:#051f48; --navy-soft:#0a2c5e; --teal:#17a2ac; --teal-deep:#117985;
		--mint:#b4f4dc; --mint-bright:#7aebc1;
		--paper:#fff; --ground:#f4f9f9; --ground-2:#e7f2f3;
		--line:#d3e3e5; --line-soft:#e6eff0; --muted:#6d8189; --dur:10s;
		position:relative; overflow:hidden; box-sizing:border-box; padding:28px 24px;
		display:grid; grid-template-columns:minmax(0,46fr) 34px minmax(0,54fr); align-items:center;
		background:radial-gradient(120% 90% at 50% 12%,#fff 0%,var(--ground) 46%,var(--ground-2) 100%);
		font-family:Manrope,'Helvetica Neue',Arial,sans-serif; color:var(--navy);
		-webkit-font-smoothing:antialiased; text-align:left;
	}
	.cf-wrap * { box-sizing:border-box; }
	.cf-grid { position:absolute; inset:0; pointer-events:none;
		background-image:linear-gradient(to right,rgba(23,162,172,.07) 1px,transparent 1px),
			linear-gradient(to bottom,rgba(23,162,172,.07) 1px,transparent 1px);
		background-size:24px 24px; }
	.cf-frame { position:absolute; inset:10px; border:1px dashed rgba(23,162,172,.28); pointer-events:none; }
	.cf-mono { font-family:'IBM Plex Mono',ui-monospace,monospace; }

	/* Input: the CLAI panel */
	.cf-panel { position:relative; background:var(--paper); border:1px solid var(--line);
		box-shadow:0 18px 34px rgba(5,31,72,.10); padding:12px 13px 13px; }
	.cf-head { display:flex; align-items:center; gap:8px; padding-bottom:9px; margin-bottom:10px;
		border-bottom:1px solid var(--line-soft); }
	/* CLAI wordmark: Montserrat, mint to navy left to right, as in the product */
	.cf-logo { font-family:Montserrat,Manrope,sans-serif; font-size:15px; font-weight:700; letter-spacing:-.01em;
		color:var(--navy); background:linear-gradient(90deg,#b4f4dc 0%,#5f9a9b 45%,#051f48 100%);
		-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
	.cf-title { border-left:1px solid var(--line); padding-left:8px; font-size:7.5px; font-weight:700;
		letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep); }
	.cf-label { font-size:9px; font-weight:800; margin:0 0 5px; }
	.cf-prompt { height:38px; border:1.5px solid var(--mint-bright); border-radius:5px; padding:6px 7px;
		margin-bottom:10px; overflow:hidden; }
	.cf-type { display:inline-block; vertical-align:top; overflow:hidden; white-space:nowrap; width:0;
		font-size:8.5px; line-height:1.4; color:var(--navy-soft); border-right:1.5px solid var(--teal);
		animation:cf-type var(--dur) steps(var(--n)) infinite, cf-caret .8s step-end infinite; }
	@keyframes cf-type { 0%,16%{width:0} 36%,94%{width:calc(var(--n) * 1ch + 4px)} 100%{width:0} }
	@keyframes cf-caret { 50%{border-right-color:transparent} }
	.cf-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:11px; }
	.cf-slot { position:relative; height:46px; border:1.5px dashed var(--line); border-radius:5px;
		display:flex; align-items:center; justify-content:center; }
	.cf-empty { font-size:7.5px; color:var(--teal-deep); }
	.cf-file { position:absolute; inset:3px; border-radius:3px; background:var(--ground);
		display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
		opacity:0; animation:cf-drop1 var(--dur) cubic-bezier(.2,.7,.3,1) infinite; }
	.cf-file.f2 { animation-name:cf-drop2; }
	@keyframes cf-drop1 { 0%,3%{opacity:0;transform:translateY(-14px)} 9%,94%{opacity:1;transform:none} 98%,100%{opacity:0} }
	@keyframes cf-drop2 { 0%,9%{opacity:0;transform:translateY(-14px)} 15%,94%{opacity:1;transform:none} 98%,100%{opacity:0} }
	.cf-doc { font-size:6.5px; font-weight:600; letter-spacing:.08em; color:#fff; padding:2px 5px;
		border-radius:2px; background:var(--teal); }
	.cf-doc.pdf { background:#d0574a; }
	.cf-file b { max-width:92%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
		font-size:6.5px; font-weight:500; color:var(--navy-soft); }
	.cf-btn { position:relative; overflow:hidden; border-radius:30px; padding:8px 0; text-align:center;
		font-size:9.5px; font-weight:800; background:linear-gradient(90deg,#c4f3e1,#a5e8d3);
		animation:cf-btn var(--dur) ease-out infinite; }
	.cf-btn:after { content:''; position:absolute; top:0; bottom:0; left:-40%; width:40%;
		background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
		animation:cf-shine var(--dur) ease-in-out infinite; }
	@keyframes cf-btn { 0%,38%{transform:none;box-shadow:none} 40%{transform:scale(.96)}
		43%{transform:none;box-shadow:0 0 0 5px rgba(122,235,193,.35)} 52%,100%{box-shadow:0 0 0 0 rgba(122,235,193,0)} }
	@keyframes cf-shine { 0%,40%{left:-40%} 50%,100%{left:110%} }

	/* Link: one pulse travels from panel to forms */
	.cf-link { position:relative; align-self:stretch; }
	.cf-link:before { content:''; position:absolute; left:4px; right:4px; top:50%;
		border-top:1.5px dashed rgba(23,162,172,.45); }
	.cf-link i { position:absolute; top:50%; left:0; width:8px; height:8px; margin-top:-4px; border-radius:50%;
		background:var(--teal); box-shadow:0 0 0 4px rgba(23,162,172,.18); opacity:0;
		animation:cf-flow-x var(--dur) ease-in-out infinite; }
	@keyframes cf-flow-x { 0%,42%{opacity:0;left:0} 44%{opacity:1;left:0} 50%{opacity:1;left:calc(100% - 8px)} 52%,100%{opacity:0;left:calc(100% - 8px)} }
	@keyframes cf-flow-y { 0%,42%{opacity:0;top:0} 44%{opacity:1;top:0} 50%{opacity:1;top:calc(100% - 8px)} 52%,100%{opacity:0;top:calc(100% - 8px)} }

	/* Output: three generated forms, each with display label + exportLabel */
	.cf-out { position:relative; }
	.cf-k { font-size:7.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
		color:var(--teal-deep); margin-bottom:7px; }
	.cf-forms { position:relative; display:grid; gap:7px; }
	.cf-scan { position:absolute; left:-4px; right:-4px; height:2px; top:0; z-index:3; opacity:0;
		background:linear-gradient(90deg,transparent,var(--teal),transparent);
		box-shadow:0 0 12px rgba(23,162,172,.55); animation:cf-scan var(--dur) linear infinite; }
	@keyframes cf-scan { 0%,44%{opacity:0;top:0} 46%{opacity:1;top:0} 70%{opacity:1;top:100%} 72%,100%{opacity:0;top:100%} }
	.cf-form { position:relative; }
	.cf-form:before { content:''; position:absolute; inset:0; border:1.5px dashed var(--line); border-radius:4px; }
	.cf-body { position:relative; background:var(--paper); border:1px solid var(--line);
		border-left:3px solid var(--tc,var(--teal)); border-radius:4px; padding:7px 9px 4px;
		box-shadow:0 10px 22px rgba(5,31,72,.08); opacity:0; animation:cf-c1 var(--dur) ease-out infinite; }
	.cf-form.c2 .cf-body { animation-name:cf-c2; }
	.cf-form.c3 .cf-body { animation-name:cf-c3; }
	@keyframes cf-c1 { 0%,50%{opacity:0;transform:translateY(6px)} 52%,93%{opacity:1;transform:none} 97%,100%{opacity:0} }
	@keyframes cf-c2 { 0%,58%{opacity:0;transform:translateY(6px)} 60%,93%{opacity:1;transform:none} 97%,100%{opacity:0} }
	@keyframes cf-c3 { 0%,66%{opacity:0;transform:translateY(6px)} 68%,93%{opacity:1;transform:none} 97%,100%{opacity:0} }
	.cf-fh { display:flex; align-items:center; justify-content:space-between; font-size:9.5px; font-weight:800;
		margin-bottom:3px; }
	.cf-chip { font-size:6.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
		padding:2px 6px; border-radius:20px; background:var(--cc,var(--mint)); color:var(--navy); }
	.cf-row { display:flex; align-items:center; justify-content:space-between; gap:8px;
		border-top:1px solid var(--line-soft); padding:4px 0; font-size:8.5px; color:var(--navy-soft);
		opacity:0; animation:cf-row var(--dur) ease-out infinite; animation-delay:var(--d,0s); }
	@keyframes cf-row { 0%,50%{opacity:0;transform:translateX(-6px)} 53%,100%{opacity:1;transform:none} }
	.cf-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
	.cf-row code { flex:none; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:7.5px; font-weight:500;
		color:var(--teal-deep); background:var(--ground); padding:1px 5px; border-radius:3px; }
	.cf-done { margin-top:9px; display:flex; align-items:center; gap:7px; font-size:9px; font-weight:700;
		color:var(--navy-soft); opacity:0; animation:cf-done var(--dur) ease-out infinite; }
	.cf-done:before { content:'✓'; width:15px; height:15px; border-radius:50%; flex:none;
		display:inline-flex; align-items:center; justify-content:center;
		background:var(--teal); color:#fff; font-size:9px; font-weight:800; }
	@keyframes cf-done { 0%,78%{opacity:0;transform:translateY(4px)} 82%,93%{opacity:1;transform:none} 97%,100%{opacity:0} }

	/* Narrow column (tablet half-width, phones): stack panel above forms */
	@container (max-width:520px) {
		.cf-wrap { grid-template-columns:minmax(0,1fr); grid-template-rows:auto 30px auto; padding:22px 18px; }
		.cf-link:before { left:50%; right:auto; top:4px; bottom:4px; border-top:0; border-left:1.5px dashed rgba(23,162,172,.45); }
		.cf-link i { left:50%; margin-left:-4px; margin-top:0; animation-name:cf-flow-y; }
	}
	@media (prefers-reduced-motion:reduce){ .cf-wrap *,.cf-wrap *:after{animation:none!important}
		.cf-file,.cf-body,.cf-row,.cf-done{opacity:1!important;transform:none!important}
		.cf-type{width:calc(var(--n) * 1ch + 4px)!important;border-right:0} }

/* ---------- integrations-hub ---------- */
.ig-host{width:100%;max-width:1200px;margin:0 auto}

	/* Climedo · integrations: sources flow into the EDC core, the core feeds CTMS,
	   dashboards, exports and the audit trail. Packets move on SVG paths (SMIL), so the
	   geometry scales with the square box. */
	.ig-wrap {
		--navy:#051f48; --navy-soft:#0a2c5e; --teal:#17a2ac; --teal-deep:#117985;
		--mint:#b4f4dc; --mint-bright:#7aebc1; --paper:#fff; --ground:#f4f9f9; --ground-2:#e7f2f3;
		--line:#d3e3e5; --muted:#6d8189; --dur:8s;
		position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; color:var(--navy);
		background:radial-gradient(120% 90% at 50% 12%,#fff 0%,var(--ground) 46%,var(--ground-2) 100%);
		font-family:Manrope,'Helvetica Neue',Arial,sans-serif; -webkit-font-smoothing:antialiased;
	}
	.ig-wrap * { box-sizing:border-box; }
	.ig-grid { position:absolute; inset:0;
		background-image:linear-gradient(to right,rgba(23,162,172,.07) 1px,transparent 1px),
			linear-gradient(to bottom,rgba(23,162,172,.07) 1px,transparent 1px);
		background-size:6.25% 6.25%; }
	.ig-frame { position:absolute; inset:4.5%; border:1px dashed rgba(23,162,172,.28); }
	.ig-svg { position:absolute; inset:0; width:100%; height:100%; }
	.ig-path { fill:none; stroke:rgba(23,162,172,.55); stroke-width:.45; stroke-dasharray:1.2 .9; }
	.ig-dot { fill:var(--teal); }
	.ig-dot.out { fill:var(--mint-bright); }
	.ig-k { position:absolute; top:7.5%; font-family:'IBM Plex Mono',ui-monospace,monospace;
		font-size:8px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
		color:var(--teal-deep); }
	.ig-k.in { left:7%; } .ig-k.out { right:7%; }
	.ig-node { position:absolute; width:27%; height:9%; display:flex; align-items:center; gap:7px;
		padding:0 9px; background:var(--paper); border:1px solid var(--line);
		box-shadow:0 10px 22px rgba(5,31,72,.08); font-size:10.5px; font-weight:700; color:var(--navy); }
	.ig-node.in { left:7%; border-left:3px solid var(--teal); }
	.ig-node.out { right:7%; border-right:3px solid var(--mint-bright); justify-content:space-between; }
	.ig-node i { font-style:normal; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:7.5px;
		font-weight:500; color:var(--muted); }
	.ig-tick { width:14px; height:14px; border-radius:50%; flex:none; display:inline-flex;
		align-items:center; justify-content:center; background:var(--teal); color:#fff;
		font-size:8px; font-weight:800; opacity:0; transform:scale(.4);
		animation:var(--tk) var(--dur) ease-out infinite; }
	@keyframes ig-t1 { 0%,58%{opacity:0;transform:scale(.4)} 62%,94%{opacity:1;transform:none} 100%{opacity:0} }
	@keyframes ig-t2 { 0%,64%{opacity:0;transform:scale(.4)} 68%,94%{opacity:1;transform:none} 100%{opacity:0} }
	@keyframes ig-t3 { 0%,70%{opacity:0;transform:scale(.4)} 74%,94%{opacity:1;transform:none} 100%{opacity:0} }
	@keyframes ig-t4 { 0%,76%{opacity:0;transform:scale(.4)} 80%,94%{opacity:1;transform:none} 100%{opacity:0} }
	.ig-core { position:absolute; left:50%; top:46%; width:18%; aspect-ratio:1/1;
		transform:translate(-50%,-50%); background:var(--navy); color:var(--mint);
		display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
		box-shadow:0 18px 36px rgba(5,31,72,.25); z-index:2; }
	.ig-core b { font-size:13px; font-weight:800; line-height:1.15; }
	.ig-core i { font-style:normal; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:7px;
		letter-spacing:.1em; text-transform:uppercase; color:var(--mint-bright); margin-top:4px; }
	.ig-core:before { content:''; position:absolute; inset:-6px; border:2px solid var(--mint-bright);
		opacity:0; animation:ig-pulse var(--dur) ease-out infinite; }
	@keyframes ig-pulse { 0%,34%{opacity:0;transform:scale(.9)} 40%{opacity:.9;transform:scale(1)}
		52%,100%{opacity:0;transform:scale(1.18)} }
	.ig-card { position:absolute; left:50%; bottom:7%; transform:translateX(-50%); width:70%;
		background:var(--paper); border:1px solid var(--line); box-shadow:0 14px 28px rgba(5,31,72,.1);
		padding:9px 12px; display:flex; justify-content:space-between; align-items:center; gap:8px;
		font-size:10px; color:var(--navy-soft); opacity:0; animation:ig-card var(--dur) ease-out infinite; }
	.ig-card b { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:9px; font-weight:600;
		color:var(--teal-deep); white-space:nowrap; }
	@keyframes ig-card { 0%,62%{opacity:0;transform:translateX(-50%) translateY(8px)}
		68%,94%{opacity:1;transform:translateX(-50%)} 100%{opacity:0;transform:translateX(-50%)} }
	@media (max-width:600px){ .ig-node{font-size:9px;padding:0 6px;gap:5px} .ig-node i{display:none}
		.ig-core b{font-size:11px} .ig-card{width:84%;font-size:9px} }
	@media (prefers-reduced-motion:reduce){ .ig-wrap *{animation:none!important}
		.ig-dot{display:none} .ig-tick{opacity:1;transform:none}
		.ig-card{opacity:1;transform:translateX(-50%)} }

/* ---------- study-start-up ---------- */
.su-host{width:100%;max-width:1200px;margin:0 auto}

	/* Climedo · study start-up: one "today" cursor sweeps four weeks. Climedo is live on day 4
	   and enrolling; the legacy EDC track is still being built and goes live at week 4. */
	.su-wrap {
		--navy:#051f48; --navy-soft:#0a2c5e; --teal:#17a2ac; --teal-deep:#117985;
		--mint:#b4f4dc; --mint-bright:#7aebc1; --paper:#fff; --ground:#f4f9f9; --ground-2:#e7f2f3;
		--line:#d3e3e5; --muted:#6d8189; --grey:#dfe6ea; --dur:10s;
		position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; color:var(--navy);
		background:radial-gradient(120% 90% at 50% 12%,#fff 0%,var(--ground) 46%,var(--ground-2) 100%);
		font-family:Manrope,'Helvetica Neue',Arial,sans-serif; -webkit-font-smoothing:antialiased;
	}
	.su-wrap * { box-sizing:border-box; }
	.su-grid { position:absolute; inset:0;
		background-image:linear-gradient(to right,rgba(23,162,172,.07) 1px,transparent 1px),
			linear-gradient(to bottom,rgba(23,162,172,.07) 1px,transparent 1px);
		background-size:6.25% 6.25%; }
	.su-frame { position:absolute; inset:4.5%; border:1px dashed rgba(23,162,172,.28); }
	.su-k { position:absolute; left:8%; top:8%; font-family:'IBM Plex Mono',ui-monospace,monospace;
		font-size:8px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-deep); }
	.su-chart { position:absolute; left:8%; right:8%; top:16%; }
	.su-weeks { display:grid; grid-template-columns:repeat(4,1fr); margin-left:22%;
		font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:7.5px; color:var(--muted);
		border-bottom:1px solid var(--line); padding-bottom:4px; }
	.su-row { display:flex; align-items:center; margin-top:14px; }
	.su-name { width:22%; font-size:10.5px; font-weight:800; line-height:1.2; }
	.su-name i { display:block; font-style:normal; font-family:'IBM Plex Mono',ui-monospace,monospace;
		font-size:7.5px; font-weight:500; color:var(--muted); }
	.su-track { position:relative; flex:1; height:30px; background:var(--paper); border:1px solid var(--line);
		overflow:hidden; }
	.su-seg { position:absolute; top:0; bottom:0; display:flex; align-items:center; justify-content:center;
		font-size:8px; font-weight:700; color:var(--navy); border-right:1px solid #fff; overflow:hidden;
		white-space:nowrap; }
	.su-mask { position:absolute; top:0; bottom:0; right:0; left:0; background:var(--paper);
		animation:su-reveal var(--dur) linear infinite; }
	@keyframes su-reveal { 0%{left:0} 88%,100%{left:100%} }
	.su-cursor { position:absolute; top:-6px; bottom:-6px; width:2px; background:var(--teal); left:22%;
		box-shadow:0 0 0 3px rgba(23,162,172,.15); animation:su-cursor var(--dur) linear infinite; }
	@keyframes su-cursor { 0%{left:22%} 88%,100%{left:100%} }
	.su-badge { position:absolute; top:50%; transform:translate(-50%,-50%) scale(.6); padding:3px 7px;
		border-radius:20px; font-size:7.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
		white-space:nowrap; opacity:0; z-index:2; animation:var(--bk) var(--dur) ease-out infinite; }
	.su-badge.live { background:var(--navy); color:var(--mint); }
	.su-badge.legacy { background:var(--muted); color:#fff; }
	@keyframes su-live { 0%,12%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
		15%,95%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0} }
	@keyframes su-golive { 0%,86%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
		89%,95%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0} }
	.su-pts { position:absolute; left:15%; right:2%; top:0; bottom:0; display:flex; align-items:center;
		gap:4%; padding-left:4%; }
	.su-pts span { width:7px; height:7px; border-radius:50%; background:var(--teal); flex:none; }
	.su-card { position:absolute; left:8%; right:8%; bottom:8%; background:var(--paper);
		border:1px solid var(--line); box-shadow:0 18px 34px rgba(5,31,72,.1); padding:11px 14px; }
	.su-card .su-k { position:static; margin-bottom:6px; }
	.su-stat { display:flex; justify-content:space-between; align-items:center; font-size:10px;
		color:var(--navy-soft); padding:5px 0; border-top:1px solid #e6eff0; }
	.su-stat b { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:9.5px; font-weight:600;
		color:var(--teal-deep); }
	.su-stat b.grey { color:var(--muted); }
	.su-steps { position:absolute; left:8%; right:8%; top:46%; display:flex; gap:6px; }
	.su-step { flex:1; background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--sc);
		padding:7px 8px; font-size:9px; font-weight:700; color:var(--navy); opacity:.3;
		animation:var(--sk) var(--dur) ease-in-out infinite; }
	.su-step i { display:block; font-style:normal; font-family:'IBM Plex Mono',ui-monospace,monospace;
		font-size:7px; font-weight:500; color:var(--muted); margin-bottom:2px; }
	@keyframes su-s1 { 0%{opacity:.3} 2%,30%{opacity:1} 34%,100%{opacity:.3} }
	@keyframes su-s2 { 0%,4%{opacity:.3} 7%,30%{opacity:1} 34%,100%{opacity:.3} }
	@keyframes su-s3 { 0%,12%{opacity:.3} 15%,95%{opacity:1} 100%{opacity:.3} }
	/* Phones: the names wrap, so the steps move up and the card drops its third line. */
	@media (max-width:600px){ .su-name{font-size:9px} .su-seg{font-size:6.5px} .su-step{font-size:8px;padding:5px}
		.su-steps{top:50%} .su-card{padding:8px 10px} .su-stat:last-child{display:none} }
	@media (prefers-reduced-motion:reduce){ .su-wrap *{animation:none!important}
		.su-mask{left:100%} .su-cursor{display:none} .su-badge{opacity:1;transform:translate(-50%,-50%)}
		.su-step{opacity:1} }

/* ---------- bhag-2030 ---------- */
/* Climedo · BHAG 2030: the foundation (entrepreneurial culture and innovation engine) is laid,
   the four pillars rise on it one by one, each with its goal, and the 2030 roof settles on top
   while the year counter runs 2026 to 2030. The scene fades as a whole, so the loop resets cleanly. */
.bh-host{width:100%;margin:0 0 48px}
	.bh-wrap {
		--navy:#051f48; --navy-soft:#0a2c5e; --teal:#17a2ac; --teal-deep:#117985;
		--mint:#b4f4dc; --paper:#fff; --ground:#f4f9f9; --ground-2:#e7f2f3;
		--line:#d3e3e5; --muted:#6d8189; --dur:12s;
		position:relative; width:100%; aspect-ratio:16/6; overflow:hidden; color:var(--navy);
		background:radial-gradient(120% 90% at 50% 12%,#fff 0%,var(--ground) 46%,var(--ground-2) 100%);
		font-family:Manrope,'Helvetica Neue',Arial,sans-serif; -webkit-font-smoothing:antialiased;
	}
	.bh-wrap * { box-sizing:border-box; }
	.bh-grid { position:absolute; inset:0;
		background-image:linear-gradient(to right,rgba(23,162,172,.07) 1px,transparent 1px),
			linear-gradient(to bottom,rgba(23,162,172,.07) 1px,transparent 1px);
		background-size:2.5% 6.667%; }
	.bh-frame { position:absolute; inset:5% 2.5%; border:1px dashed rgba(23,162,172,.28); }
	.bh-k { position:absolute; left:4.5%; top:9%; font-family:'IBM Plex Mono',ui-monospace,monospace;
		font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep); }
	.bh-years { position:absolute; right:4.5%; top:7%; height:30px; width:120px; text-align:right;
		font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:24px; font-weight:600; color:var(--navy); }
	.bh-years span { position:absolute; right:0; top:0; opacity:0; animation:var(--yk) var(--dur) linear infinite; }
	@keyframes bh-y1 { 0%,1%{opacity:0} 2%,17%{opacity:1} 18%,100%{opacity:0} }
	@keyframes bh-y2 { 0%,17%{opacity:0} 18%,31%{opacity:1} 32%,100%{opacity:0} }
	@keyframes bh-y3 { 0%,31%{opacity:0} 32%,45%{opacity:1} 46%,100%{opacity:0} }
	@keyframes bh-y4 { 0%,45%{opacity:0} 46%,59%{opacity:1} 60%,100%{opacity:0} }
	@keyframes bh-y5 { 0%,59%{opacity:0} 60%,94%{opacity:1} 100%{opacity:0} }
	.bh-scene { position:absolute; inset:0; animation:bh-scene var(--dur) linear infinite; }
	@keyframes bh-scene { 0%{opacity:0} 2%,93%{opacity:1} 99%,100%{opacity:0} }
	/* roof */
	.bh-roof { position:absolute; left:4.5%; right:4.5%; top:19%; height:12%; background:var(--navy);
		display:flex; align-items:center; justify-content:center; gap:14px;
		font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:13px; font-weight:600; letter-spacing:.2em;
		text-transform:uppercase; color:var(--mint); box-shadow:0 14px 28px rgba(5,31,72,.18);
		opacity:0; animation:bh-roof var(--dur) cubic-bezier(.2,.8,.2,1) infinite; }
	.bh-roof i { width:28px; height:2px; background:var(--mint); opacity:.6; }
	@keyframes bh-roof { 0%,62%{opacity:0;transform:translateY(-60%)} 68%,100%{opacity:1;transform:none} }
	/* pillars */
	.bh-cols { position:absolute; left:6%; right:6%; top:33%; bottom:29%; display:flex; gap:3.2%; }
	.bh-p { position:relative; flex:1 1 0; min-width:0; background:var(--paper); border:1px solid var(--line);
		border-top:4px solid var(--mint); padding:16px 18px; display:flex; flex-direction:column;
		box-shadow:0 10px 24px rgba(5,31,72,.06); clip-path:inset(100% 0 0 0);
		animation:var(--pk) var(--dur) cubic-bezier(.3,.7,.2,1) infinite; }
	@keyframes bh-p1 { 0%,12%{clip-path:inset(100% 0 0 0)} 19%,100%{clip-path:inset(0)} }
	@keyframes bh-p2 { 0%,24%{clip-path:inset(100% 0 0 0)} 31%,100%{clip-path:inset(0)} }
	@keyframes bh-p3 { 0%,36%{clip-path:inset(100% 0 0 0)} 43%,100%{clip-path:inset(0)} }
	@keyframes bh-p4 { 0%,48%{clip-path:inset(100% 0 0 0)} 55%,100%{clip-path:inset(0)} }
	.bh-n { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:10px; font-weight:600;
		letter-spacing:.12em; color:var(--teal-deep); }
	.bh-t { font-size:15px; font-weight:800; line-height:1.2; margin-top:4px; }
	.bh-chip { margin-top:auto; align-self:flex-start; background:var(--navy); color:var(--mint);
		font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:10px; font-weight:600;
		padding:4px 8px; white-space:nowrap; opacity:0; transform:translateY(6px);
		animation:var(--ck) var(--dur) ease-out infinite; }
	@keyframes bh-c1 { 0%,19%{opacity:0;transform:translateY(6px)} 22%,100%{opacity:1;transform:none} }
	@keyframes bh-c2 { 0%,31%{opacity:0;transform:translateY(6px)} 34%,100%{opacity:1;transform:none} }
	@keyframes bh-c3 { 0%,43%{opacity:0;transform:translateY(6px)} 46%,100%{opacity:1;transform:none} }
	@keyframes bh-c4 { 0%,55%{opacity:0;transform:translateY(6px)} 58%,100%{opacity:1;transform:none} }
	/* foundation */
	.bh-base { position:absolute; left:3.5%; right:3.5%; bottom:13%; height:14%;
		background:linear-gradient(90deg,var(--teal-deep),var(--teal)); color:#fff;
		display:flex; align-items:center; justify-content:center; gap:12px;
		font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:12px; font-weight:600;
		letter-spacing:.12em; text-transform:uppercase; clip-path:inset(0 100% 0 0);
		animation:bh-base var(--dur) cubic-bezier(.4,.6,.2,1) infinite; }
	.bh-base b { color:var(--mint); font-weight:600; }
	@keyframes bh-base { 0%,2%{clip-path:inset(0 100% 0 0)} 10%,100%{clip-path:inset(0)} }
	/* Narrow screens: a taller stage, smaller type; the pillar goals drop their chips. */
	@media (max-width:900px){ .bh-wrap{aspect-ratio:4/3} .bh-cols{top:31%;bottom:31%;gap:2%}
		.bh-p{padding:8px 7px}
		.bh-t{font-size:11px} .bh-chip{font-size:8px;padding:3px 5px;white-space:normal}
		.bh-base{font-size:8.5px;gap:6px;letter-spacing:.06em;text-align:center;padding:0 3%}
		.bh-roof{font-size:10px} .bh-k{font-size:9px} .bh-years{font-size:17px} }
	@media (max-width:500px){ .bh-chip{display:none} .bh-t{font-size:9.5px} .bh-n{font-size:8px}
		.bh-base{font-size:7px;flex-direction:column;gap:2px} }
	@media (prefers-reduced-motion:reduce){ .bh-wrap *{animation:none!important}
		.bh-p,.bh-base{clip-path:none} .bh-roof,.bh-chip{opacity:1;transform:none}
		.bh-years span{opacity:0} .bh-years span:last-child{opacity:1} }

/* --- From Data to Dialogue: example LDL-C dashboard (Benchmarking + Progression) ----------
   Static, vector-only rebuild of the product's dashboard, so it stays sharp at any width.
   Two panels side by side from 900px, stacked below. Colours are set explicitly so the
   phone dark-mode overrides never turn its text white on the white panels. */
.dd-host { margin:0; color:#051F48; font-family:'Mulish', sans-serif; }
.dd-wrap { background:#E6F0F6; border-radius:10px; padding:14px; box-shadow:0 10px 30px rgba(5,31,72,.08); }
.dd-bar { display:flex; align-items:center; gap:8px; padding:2px 6px 12px; font-size:15px; color:#051F48; }
.dd-bar svg { width:12px; height:12px; }
.dd-panels { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:900px) { .dd-panels { grid-template-columns:1fr 1fr; } }
.dd-panel { background:#fff; border-radius:8px; padding:16px 18px 14px; min-width:0; }
.dd-head { display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:700; color:#051F48; margin-bottom:12px; }
.dd-head svg { width:13px; height:13px; color:#97A8BA; }
.dd-filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
.dd-field { display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:#051F48; min-width:0; }
.dd-select { display:flex; justify-content:space-between; align-items:center; gap:10px; min-width:118px; border:1px solid #C9D6E0; border-radius:4px; padding:5px 8px; font-size:11px; font-weight:400; color:#35404F; background:#fff; }
.dd-select::after { content:""; border:4px solid transparent; border-top:5px solid #35404F; margin-top:4px; }
.dd-match { font-size:11px; font-weight:700; color:#051F48; margin:4px 0 6px; }
.dd-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.dd-chip { font-size:10.5px; color:#5F7A8A; background:#F2F6F9; border:1px solid #DCE6EC; border-radius:4px; padding:4px 10px; }
.dd-title { font-size:11.5px; font-weight:700; color:#051F48; margin:2px 0 4px; }
.dd-chart { display:block; width:100%; height:auto; }
.dd-chart text { font-family:'Mulish', sans-serif; fill:#5F7A8A; font-size:9.5px; }
.dd-chart .dd-axis { fill:#051F48; font-weight:700; }
.dd-chart .dd-hl { fill:#17A2AC; font-weight:700; }
.dd-chart .dd-target { fill:#C9862A; font-weight:700; }
.dd-table { width:100%; border-collapse:collapse; font-size:10.5px; color:#35404F; margin-top:8px; }
.dd-table th { font-weight:700; color:#051F48; text-align:left; padding:6px 4px; border-bottom:1px solid #DCE6EC; }
.dd-table td { padding:6px 4px; }
.dd-scroll { overflow-x:auto; border:1px solid #DCE6EC; border-radius:4px; margin-top:12px; padding:0 8px; }
.dd-scroll .dd-table { margin:0; min-width:430px; }
.dd-sum td:first-child { border-left:3px solid #17A2AC; padding-left:8px; font-weight:700; color:#051F48; }
.dd-note { font-size:9.5px; line-height:1.45; color:#5F7A8A; margin:10px 0 0; }
.dd-cap { font-size:12px; color:#5F7A8A; margin:10px 2px 0; }
.dd-host p.dd-match, .dd-host p.dd-title { color:#051F48 !important; }
.dd-host p.dd-note { color:#5F7A8A !important; }
@media (max-width:600px) {
	.dd-chartbox { overflow-x:auto; }
	.dd-chartbox .dd-chart { min-width:480px; }
	.dd-chart text { font-size:12px; }
}
@media screen and (max-width:501px) and (prefers-color-scheme:dark) { .dd-cap { color:#97A8D3; } }

/* --- eCOA Patient Cockpit: the patient app's symptom chart beside the paragraph -------------
   Vector rebuild of the "Skin itching" analytics screen from the DCT Flow prototype. Colours are
   explicit so the phone dark-mode overrides never recolour the screen. */
.pc-row { margin-top:40px; }
.pc-host { margin:0 auto; width:100%; max-width:330px; font-family:'Mulish', sans-serif; }
.pc-phone { background:linear-gradient(145deg,#d9dde2,#f7f8fa 30%,#b9bfc6 70%,#e9ecef); border-radius:52px; padding:5px;
	box-shadow:0 30px 60px rgba(5,31,72,.18), 0 8px 18px rgba(5,31,72,.10); }
.pc-screen { position:relative; background:#EEF8F6; border:9px solid #0b0d10; border-radius:47px; overflow:hidden; color:#051F48; }
.pc-status { display:flex; align-items:center; justify-content:space-between; padding:12px 22px 0 26px; height:40px; font-size:14px; font-weight:800; color:#051F48; }
.pc-status svg { width:46px; height:11px; }
.pc-island { position:absolute; left:50%; top:9px; width:96px; height:28px; margin-left:-48px; background:#0b0d10; border-radius:16px; }
.pc-head { display:flex; align-items:center; gap:12px; padding:14px 18px 0; }
.pc-head b { flex:1; font-size:18px; font-weight:500; color:#051F48; }
.pc-head svg:first-child { width:9px; height:15px; }
.pc-head svg:last-child { width:20px; height:20px; }
p.pc-sub { margin:18px 18px 4px !important; font-size:14px !important; line-height:1.3 !important; color:#051F48 !important; }
.pc-chart { display:block; width:calc(100% - 20px); margin:0 10px; height:auto; }
.pc-grid { stroke:#DCE7E6; stroke-width:1; }
.pc-axis { stroke:#5B6B86; stroke-width:1.2; }
.pc-ax { font-size:12.5px; fill:#4A5A75; font-family:'Mulish', sans-serif; }
.pc-line { fill:none; stroke:#21A06B; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.pc-dots circle { fill:#21A06B; }
.pc-hint { margin:10px 18px 14px; padding:12px 16px; background:#D6F5E8; border-radius:12px; font-size:13px; line-height:1.4; color:#051F48; }
.pc-hint u { display:block; margin-top:3px; }
.pc-nav { display:flex; justify-content:space-between; align-items:center; gap:8px; background:#fff; padding:10px 14px 18px; box-shadow:0 -1px 0 #E1EBEA; }
.pc-nav span { display:flex; align-items:center; gap:9px; padding:8px 14px; border-radius:22px; font-size:15px; font-weight:800; color:#051F48; }
.pc-nav span.on { background:#D6F5E8; }
.pc-nav svg { width:21px; height:19px; }
p.pc-text { margin:0; }
@media (max-width:1023px) { p.pc-text { margin-top:40px; } }
.pc-quote { margin:36px 0 0; padding:4px 0 4px 24px; border-left:3px solid #7AEBC1; }
.pc-quote p { margin:0; font-family:'Montserrat', sans-serif; font-size:20px; line-height:1.5; font-weight:500; }
.pc-by { margin-top:16px; font-size:15px; line-height:1.5; }
.pc-by b { display:block; }
.pc-by a { color:#2A7F86; }
@media (max-width:600px) { .pc-quote p { font-size:17px; } }
@media screen and (max-width:501px) and (prefers-color-scheme:dark) { .pc-by a { color:#97A8D3; } }

/* ---------- edc-hero: study set up in days ----------
   A form is prompted (fields arrive with an AI badge), one field is dragged in, modules are
   combined and the study goes live on day 3. One 10s loop, no per-element delays: every element
   has its own keyframe window, and the whole stage fades at the loop seam. */
.es-host { width:100%; max-width:1200px; margin:0 auto; }
.es-wrap {
	--navy:#051f48; --teal:#17a2ac; --teal-deep:#117985; --mint:#b4f4dc; --mint-bright:#7aebc1;
	--green:#17ac6b; --paper:#fff; --line:#d3e3e5; --line-soft:#e6eff0; --muted:#6d8189; --dur:10s;
	position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; container-type:inline-size;
	background:radial-gradient(120% 90% at 50% 12%, #fff 0%, #f4f9f9 46%, #e7f2f3 100%);
	font-family:Manrope, 'Helvetica Neue', Arial, sans-serif; color:var(--navy); -webkit-font-smoothing:antialiased;
}
.es-grid { position:absolute; inset:0; background-size:6.25% 6.25%;
	background-image:linear-gradient(to right, rgba(23,162,172,.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(23,162,172,.07) 1px, transparent 1px); }
.es-frame { position:absolute; inset:4.5%; border:1px dashed rgba(23,162,172,.28); }
.es-tick { position:absolute; width:7px; height:7px; border:1px solid rgba(23,162,172,.5); background:#fff; }
.es-tick.tl { left:-4px; top:-4px; } .es-tick.br { right:-4px; bottom:-4px; }

.es-rail { position:absolute; left:7%; top:24%; bottom:24%; width:2px; border-left:1px dashed rgba(23,162,172,.3); z-index:8; }
.es-step { position:absolute; left:-6px; display:flex; align-items:center; gap:9px; white-space:nowrap; opacity:.28;
	background:rgba(255,255,255,.94); padding:3px 9px 3px 7px; box-shadow:0 2px 8px rgba(5,31,72,.08);
	transform:translateY(-50%); animation:var(--dur) ease-in-out infinite; }
.es-step.s1 { animation-name:es-s1; } .es-step.s2 { animation-name:es-s2; } .es-step.s3 { animation-name:es-s3; }
@keyframes es-s1 { 0% { opacity:.28; } 2%, 30% { opacity:1; } 33%, 100% { opacity:.28; } }
@keyframes es-s2 { 0%, 32% { opacity:.28; } 35%, 60% { opacity:1; } 63%, 100% { opacity:.28; } }
@keyframes es-s3 { 0%, 62% { opacity:.28; } 65%, 94% { opacity:1; } 97%, 100% { opacity:.28; } }
.es-dot { order:-1; width:9px; height:9px; border-radius:50%; background:#fff; border:2px solid var(--teal); flex:none; }
.es-step b { font-size:12px; font-weight:800; }
.es-step i { font-style:normal; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9px; color:var(--muted); }

.es-stage { position:absolute; left:47%; top:11%; width:300px; transform-origin:0 0; scale:1.25;
	animation:es-scene var(--dur) linear infinite; }
@keyframes es-scene { 0% { opacity:0; } 3%, 95% { opacity:1; } 100% { opacity:0; } }
@container (max-width:800px) { .es-stage { scale:1; } }
@container (max-width:680px) { .es-stage { scale:.9; } }
@container (max-width:600px) { .es-stage { scale:.76; left:50%; } }
/* phones: the steps become one row along the top and the builder sits centred below them */
@container (max-width:450px) {
	.es-rail { left:5%; right:5%; top:7%; bottom:auto; width:auto; border-left:0; display:flex; justify-content:space-between; gap:4px; }
	.es-step { position:static; transform:none; padding:3px 7px; }
	.es-step b { font-size:9.5px; } .es-step i, .es-dot { display:none; }
	.es-stage { scale:.66; left:50%; margin-left:-99px; top:17%; }
}
@container (max-width:380px) { .es-stage { scale:.6; margin-left:-90px; } .es-step b { font-size:9px; } .es-step { padding:3px 5px; } }
@container (max-width:320px) { .es-stage { scale:.54; margin-left:-81px; top:16%; } .es-rail { left:3%; right:3%; gap:2px; } .es-step b { font-size:8px; } .es-step { padding:2px 4px; } }

.es-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px 14px;
	box-shadow:0 22px 44px rgba(5,31,72,.13); }
.es-head { display:flex; flex-direction:column; gap:3px; margin-bottom:12px; }
.es-k { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9px; font-weight:600; letter-spacing:.12em;
	text-transform:uppercase; color:var(--teal-deep); }
.es-head b { font-size:15px; font-weight:800; }
.es-prompt { display:flex; align-items:center; gap:5px; border:1px solid #9fdfe3; background:#f3fbfb; border-radius:22px;
	padding:7px 6px 7px 9px; font-size:11px; font-weight:700; color:var(--navy); margin-bottom:12px; }
.es-prompt .sp { width:14px; height:14px; color:var(--teal); flex:none; }
.es-type { white-space:nowrap; overflow:hidden; clip-path:inset(0 100% 0 0);
	animation:es-type var(--dur) infinite; }
@keyframes es-type { 0%, 3% { clip-path:inset(0 100% 0 0); animation-timing-function:steps(28, end); }
	17%, 100% { clip-path:inset(0 0 0 0); } }
.es-caret { width:1.5px; height:13px; background:var(--teal); margin-left:-5px; animation:es-caret .9s steps(1) infinite; }
@keyframes es-caret { 50% { opacity:0; } }
.es-gen { margin-left:auto; flex:none; background:var(--teal); color:#fff; font-size:10px; font-weight:800;
	padding:5px 9px; border-radius:16px; animation:es-gen var(--dur) infinite; }
@keyframes es-gen { 0%, 16% { background:#9fd3d7; } 18% { background:var(--teal); transform:scale(.94); }
	21%, 100% { background:var(--teal); transform:none; } }

.es-fields { display:flex; flex-direction:column; gap:7px; min-height:166px; }
.es-field { position:relative; display:flex; align-items:center; gap:8px; border:1px solid var(--line-soft);
	background:#fbfdfd; border-radius:9px; padding:8px 9px; opacity:0; }
.es-flab { font-size:12px; font-weight:700; flex:1; }
.es-fin { display:flex; align-items:baseline; gap:6px; border:1px solid var(--line); background:#fff; border-radius:6px;
	padding:3px 7px; min-width:82px; justify-content:space-between; }
.es-fin em { font-style:normal; font-size:10.5px; font-weight:700; color:var(--navy); }
.es-fin small { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9px; color:var(--muted); }
.es-badge { display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:800; color:var(--teal-deep);
	background:#e2f6f7; border-radius:10px; padding:2px 7px; }
.es-badge .sp { width:10px; height:10px; }
.es-badge.dnd { color:#5b3fb0; background:#efeafb; }
.es-field.f1 { animation:es-f1 var(--dur) ease-out infinite; }
.es-field.f2 { animation:es-f2 var(--dur) ease-out infinite; }
.es-field.f3 { animation:es-f3 var(--dur) ease-out infinite; }
.es-field.f4 { animation:es-f4 var(--dur) cubic-bezier(.3,.7,.3,1) infinite; }
@keyframes es-f1 { 0%, 19% { opacity:0; transform:translateY(-6px); } 22%, 100% { opacity:1; transform:none; } }
@keyframes es-f2 { 0%, 22% { opacity:0; transform:translateY(-6px); } 25%, 100% { opacity:1; transform:none; } }
@keyframes es-f3 { 0%, 25% { opacity:0; transform:translateY(-6px); } 28%, 100% { opacity:1; transform:none; } }
@keyframes es-f4 { 0%, 31% { opacity:0; transform:translate(-70px,26px) rotate(-4deg); box-shadow:none; }
	33% { opacity:1; transform:translate(-70px,26px) rotate(-4deg); box-shadow:0 14px 26px rgba(5,31,72,.18); }
	40% { opacity:1; transform:none; box-shadow:0 14px 26px rgba(5,31,72,.18); }
	44%, 100% { opacity:1; transform:none; box-shadow:none; } }
.es-cursor { position:absolute; right:-10px; bottom:-14px; animation:es-cur var(--dur) infinite; }
.es-cursor .cur { width:15px; height:19px; display:block; }
@keyframes es-cur { 0%, 31% { opacity:0; } 33%, 41% { opacity:1; } 45%, 100% { opacity:0; } }

.es-mods { display:flex; flex-wrap:wrap; align-items:center; gap:6px 5px; margin-top:12px; padding-top:11px; border-top:1px solid var(--line-soft); }
.es-ml { font-size:10px; font-weight:700; color:var(--muted); margin-right:2px; }
.es-mod { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:800; border-radius:14px;
	padding:4px 8px 4px 6px; background:#eef5f6; color:#8fa3ab; white-space:nowrap; }
.es-mod .ck { width:11px; height:11px; opacity:0; }
.es-mod.m1 { animation:es-m1 var(--dur) infinite; } .es-mod.m1 .ck { animation:es-mk1 var(--dur) infinite; }
.es-mod.m2 { animation:es-m2 var(--dur) infinite; } .es-mod.m2 .ck { animation:es-mk2 var(--dur) infinite; }
.es-mod.m3 { animation:es-m3 var(--dur) infinite; } .es-mod.m3 .ck { animation:es-mk3 var(--dur) infinite; }
@keyframes es-m1 { 0%, 46% { background:#eef5f6; color:#8fa3ab; } 49%, 100% { background:var(--mint); color:var(--navy); } }
@keyframes es-m2 { 0%, 50% { background:#eef5f6; color:#8fa3ab; } 53%, 100% { background:var(--mint); color:var(--navy); } }
@keyframes es-m3 { 0%, 54% { background:#eef5f6; color:#8fa3ab; } 57%, 100% { background:var(--mint); color:var(--navy); } }
@keyframes es-mk1 { 0%, 46% { opacity:0; } 49%, 100% { opacity:1; } }
@keyframes es-mk2 { 0%, 50% { opacity:0; } 53%, 100% { opacity:1; } }
@keyframes es-mk3 { 0%, 54% { opacity:0; } 57%, 100% { opacity:1; } }

.es-time { position:relative; display:grid; grid-template-columns:repeat(3,1fr); margin-top:12px; background:#fff;
	border:1px solid var(--line); border-radius:12px; padding:14px 12px 12px; box-shadow:0 14px 30px rgba(5,31,72,.10); }
.es-track { position:absolute; left:16.6%; right:16.6%; top:24px; height:3px; background:#e6eff0; border-radius:3px; }
.es-track i { position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg, var(--teal), var(--green));
	border-radius:3px; animation:es-track var(--dur) cubic-bezier(.4,0,.3,1) infinite; }
@keyframes es-track { 0%, 62% { width:0; } 82%, 100% { width:100%; } }
.es-day { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; }
.es-day i { width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid #cfe0e3; display:grid;
	place-items:center; color:#fff; margin-bottom:5px; }
.es-day i .ck { width:12px; height:12px; opacity:0; }
.es-day b { font-size:11px; font-weight:800; }
.es-day span { font-size:10px; color:var(--muted); }
.es-day.d1 i { animation:es-d1 var(--dur) infinite; } .es-day.d1 .ck { animation:es-mk1 var(--dur) infinite; }
.es-day.d2 i { animation:es-d2 var(--dur) infinite; } .es-day.d2 .ck { animation:es-dk2 var(--dur) infinite; }
.es-day.d3 i { animation:es-d3 var(--dur) infinite; } .es-day.d3 .ck { animation:es-dk3 var(--dur) infinite; }
@keyframes es-d1 { 0%, 60% { background:#fff; border-color:#cfe0e3; } 63%, 100% { background:var(--teal); border-color:var(--teal); } }
@keyframes es-d2 { 0%, 71% { background:#fff; border-color:#cfe0e3; } 73%, 100% { background:var(--teal); border-color:var(--teal); } }
@keyframes es-d3 { 0%, 81% { background:#fff; border-color:#cfe0e3; transform:none; } 83% { transform:scale(1.18); }
	86%, 100% { background:var(--green); border-color:var(--green); transform:none; } }
@keyframes es-dk2 { 0%, 71% { opacity:0; } 73%, 100% { opacity:1; } }
@keyframes es-dk3 { 0%, 81% { opacity:0; } 83%, 100% { opacity:1; } }
.es-live { position:absolute; right:-10px; top:-14px; display:inline-flex; align-items:center; gap:5px; background:var(--green);
	color:#fff; font-size:11px; font-weight:800; padding:5px 11px 5px 9px; border-radius:16px;
	box-shadow:0 8px 18px rgba(23,172,107,.35); opacity:0; animation:es-live var(--dur) cubic-bezier(.2,.8,.3,1.3) infinite; }
.es-live .ck { width:12px; height:12px; }
@keyframes es-live { 0%, 84% { opacity:0; transform:translateY(6px) scale(.8); } 88%, 100% { opacity:1; transform:none; } }

.es-cap { position:absolute; left:0; right:0; bottom:6.5%; display:flex; align-items:center; justify-content:center;
	gap:8px; font-size:12px; color:#0a2c5e; }
.es-cap span { width:7px; height:7px; background:var(--teal); display:inline-block; }
@container (max-width:450px) { .es-cap { display:none; } }

@media (prefers-reduced-motion: reduce) {
	.es-wrap * { animation:none !important; }
	.es-field, .es-stage, .es-live, .es-step, .es-mod .ck, .es-day .ck { opacity:1 !important; }
	.es-type { clip-path:none !important; }
	.es-track i { width:100% !important; }
	.es-mod { background:var(--mint) !important; color:var(--navy) !important; }
	.es-day i { background:var(--teal) !important; border-color:var(--teal) !important; }
	.es-cursor { display:none; }
}

/* ---------- EDC benefit cards: deploy in days, real-time dashboards, unified platform ---------- */
.eb-h2 { margin-bottom:40px; }
.eb-row { margin-left:-12px; margin-right:-12px; }
.eb-row > div { display:flex; padding:0 12px; margin-bottom:24px; }
.eb-card { flex:1; display:flex; flex-direction:column; background:#fff; border:1px solid #E1EBEA; border-radius:16px;
	overflow:hidden; box-shadow:0 10px 30px rgba(5,31,72,.06); transition:transform .3s ease, box-shadow .3s ease; }
.eb-card:hover { transform:translateY(-4px); box-shadow:0 20px 44px rgba(5,31,72,.11); }
.eb-art { margin:0; container-type:inline-size; background:linear-gradient(160deg,#F3FBF8 0%,#E2F3F0 100%);
	border-bottom:1px solid #E1EBEA; }
.eb-art > div { position:relative; height:0; padding-bottom:58%; font-size:min(12px, 3.16cqw); }
.eb-body { flex:1; display:flex; flex-direction:column; padding:26px 28px 30px; }
.eb-num { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12px; font-weight:600; letter-spacing:.1em; color:#117985; }
.eb-card h3 { margin:6px 0 12px; font-size:24px; line-height:1.25; font-weight:700; color:#051F48 !important; }
.eb-card p { margin:0 0 18px; font-size:16px; line-height:1.6; color:#35404F !important; }
.eb-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.eb-list li { display:flex; gap:10px; font-size:15px; line-height:1.5; color:#051F48 !important; }
.eb-list .ck { flex:none; width:20px; height:20px; padding:3px; margin-top:1px; border-radius:50%; background:#B4F4DC; color:#051F48; }
.eb-cta { align-self:flex-start; margin-top:auto; }
.eb-list + .eb-cta { margin-top:24px; }
@media (max-width:1023px) { .eb-row > div { margin-bottom:20px; } .eb-h2 { margin-bottom:28px; } }

/* shared bits inside the illustrations (sizes in em, scaled by .eb-art's container) */
.eb-art .sp { width:1.1em; height:1.1em; color:#17A2AC; flex:none; }
.eb-art .ck { width:1em; height:1em; flex:none; }
.eb-a1, .eb-a2, .eb-a3 { position:absolute; inset:0; color:#051F48; font-family:'Mulish', sans-serif; }

/* 1: builder */
.eb-pal { position:absolute; left:6%; top:12%; width:22%; display:flex; flex-direction:column; gap:.55em; }
.eb-pal span { display:flex; align-items:center; gap:.5em; background:#fff; border:1px solid #D6E5E4; border-radius:.5em;
	padding:.45em .6em; font-size:.92em; font-weight:700; box-shadow:0 .2em .5em rgba(5,31,72,.05); }
.eb-pal i { width:.75em; height:.75em; border-radius:.2em; background:#B4F4DC; border:1px solid #7AEBC1; }
.eb-form { position:absolute; left:33%; right:6%; top:9%; bottom:9%; background:#fff; border:1px solid #D6E5E4;
	border-radius:.8em; padding:.8em .9em; box-shadow:0 .9em 2em rgba(5,31,72,.10); }
.eb-pr { display:flex; align-items:center; gap:.45em; background:#F0FAFA; border:1px solid #A8E0E3; border-radius:2em;
	padding:.4em .7em; font-size:.88em; font-weight:700; margin-bottom:.7em; white-space:nowrap; overflow:hidden; }
.eb-fl { display:flex; align-items:center; justify-content:space-between; gap:.6em; margin-bottom:.5em; font-size:.88em; }
.eb-fl b { font-weight:700; }
.eb-fl i { width:45%; height:1.5em; border:1px solid #D6E5E4; border-radius:.35em; background:#FBFDFD; }
.eb-drop { height:1.9em; border:1.5px dashed #7AEBC1; border-radius:.45em; background:rgba(180,244,220,.18); }
.eb-drag { position:absolute; left:-12%; bottom:15%; width:78%; display:flex; align-items:center; justify-content:space-between;
	gap:.6em; background:#fff; border:1px solid #17A2AC; border-radius:.5em; padding:.45em .6em; font-size:.88em;
	transform:rotate(-4deg); box-shadow:0 .9em 1.8em rgba(5,31,72,.18); }
.eb-drag i { width:42%; height:1.3em; border:1px solid #D6E5E4; border-radius:.3em; }
.eb-drag .cur { position:absolute; right:-.4em; bottom:-1.1em; width:1.2em; height:1.5em; }
.eb-pill { position:absolute; display:inline-flex; align-items:center; gap:.35em; border-radius:2em; padding:.35em .8em;
	font-size:.85em; font-weight:800; white-space:nowrap; }
.eb-pill.p1 { left:5%; bottom:10%; background:#051F48; color:#fff; }
.eb-pill.p2 { right:3%; top:3%; background:#17AC6B; color:#fff; box-shadow:0 .5em 1em rgba(23,172,107,.3); }

/* 2: dashboard */
.eb-dash { position:absolute; left:6%; right:6%; top:9%; bottom:9%; display:flex; flex-direction:column; gap:.6em; }
.eb-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:.5em; }
.eb-kpi { background:#fff; border:1px solid #D6E5E4; border-radius:.6em; padding:.5em .65em; }
.eb-kpi span { display:block; font-size:.78em; color:#6D8189; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eb-kpi b { font-size:1.5em; font-weight:800; }
.eb-ch { position:relative; flex:1; background:#fff; border:1px solid #D6E5E4; border-radius:.6em; padding:.5em .7em 0; }
.eb-ch span { font-size:.82em; font-weight:700; }
.eb-ch em { position:absolute; right:.7em; top:.5em; font-style:normal; font-size:.75em; font-weight:800; color:#117985;
	background:#E2F6F7; border-radius:1em; padding:.1em .6em; }
.eb-ch svg { position:absolute; left:.7em; right:.7em; bottom:.5em; width:calc(100% - 1.4em); height:62%; }
.eb-sdv { display:flex; align-items:center; gap:.7em; background:#051F48; color:#fff; border-radius:.6em; padding:.55em .8em; font-size:.85em; font-weight:700; }
.eb-sdv i { flex:1; height:.5em; border-radius:1em; background:rgba(255,255,255,.18); overflow:hidden; }
.eb-sdv i b { display:block; width:82%; height:100%; background:#7AEBC1; border-radius:1em; }
.eb-sdv em { font-style:normal; color:#7AEBC1; }

/* 3: hub */
.eb-lines { position:absolute; inset:0; width:100%; height:100%; }
.eb-lines line { stroke:#17A2AC; stroke-width:1.4; stroke-dasharray:4 5; opacity:.55; animation:eb-flow 1.6s linear infinite; }
@keyframes eb-flow { to { stroke-dashoffset:-18; } }
.eb-node { position:absolute; transform:translate(-50%,-50%); background:#fff; border:1px solid #D6E5E4; border-radius:2em;
	padding:.4em .9em; font-size:.92em; font-weight:800; white-space:nowrap; box-shadow:0 .4em 1em rgba(5,31,72,.08); }
.eb-hub { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column;
	align-items:center; gap:.35em; background:#051F48; color:#fff; border-radius:1em; padding:.9em 1.2em .75em;
	box-shadow:0 0 0 .6em rgba(23,162,172,.16), 0 1em 2em rgba(5,31,72,.25); }
.eb-hub .mk { width:2.2em; height:2.2em; }
.eb-hub b { font-size:.85em; font-weight:800; white-space:nowrap; }
@media (prefers-reduced-motion: reduce) { .eb-lines line { animation:none; } .eb-card { transition:none; } }

/* ---------- EDC click-through: rebuilds of the real Climedo app ----------
   Subject overview, eCRF, queries, monitoring and dashboard of a demo study, drawn in HTML at the
   app's own sizes (em of its 14px type, Muli/Mulish, teal #17A2AC bar, navy #052049 sidebar).
   The frame is 1100 app-pixels wide; its font size follows the column, like a scaled screenshot. */
.accordion-scroll .image-wrap .cx-host { width:100%; }
.cx-host { margin:0; width:100%; max-width:720px; container-type:inline-size; }
.cx-app { --t:#17A2AC; --n:#052049; font-size:calc(100cqw / 78.57); position:relative; display:grid;
	grid-template-columns:4.3em 1fr; grid-template-rows:3.64em 1fr 2.4em; aspect-ratio:1100 / 690; overflow:hidden;
	background:#ECEFF3; border-radius:.7em; font-family:'Mulish', 'Muli', sans-serif; color:#333; line-height:1.3; text-align:left;
	box-shadow:0 2.2em 4.4em rgba(5,31,72,.18), 0 .4em 1em rgba(5,31,72,.08); }
.cx-app * { box-sizing:border-box; }
.cx-app .ci { width:1em; height:1em; flex:none; vertical-align:-.14em; }
.cx-app p { margin:0; }
.cx-top { grid-column:1 / 3; display:flex; align-items:center; gap:1.6em; background:var(--t); color:#fff; padding-right:1.1em; }
.cx-logo { width:4.3em; height:100%; display:grid; place-items:center; background:rgba(0,0,0,.06); }
.cx-logo .mk { width:1.6em; height:1.6em; }
.cx-logo .mk path:first-child { fill:#fff; } .cx-logo .mk path { stroke:#fff; }
.cx-nav { height:100%; display:flex; align-items:center; font-size:1em; padding:0 .2em; }
.cx-nav.on { box-shadow:inset 0 -.2em 0 #fff; }
.cx-topr { margin-left:auto; display:flex; align-items:center; gap:1.3em; }
.cx-topr .ci { width:1.15em; height:1.15em; }
.cx-out { display:flex; align-items:center; gap:.35em; }
.cx-side { grid-row:2 / 4; background:var(--n); color:#fff; display:flex; flex-direction:column; align-items:center; gap:.35em; padding-top:.9em; }
.cx-av { position:relative; width:2.6em; height:2.6em; border-radius:50%; background:#6B7A90; display:grid; place-items:center;
	font-size:.86em; font-weight:700; margin-bottom:.9em; }
.cx-av i { position:absolute; right:.05em; bottom:.1em; width:.62em; height:.62em; border-radius:50%; background:#2ECC71; border:.12em solid var(--n); }
.cx-si { width:2.8em; height:2.3em; display:grid; place-items:center; border-radius:.3em; color:#C6CFDC; }
.cx-si .ci { width:1.1em; height:1.1em; }
.cx-si.on { background:rgba(255,255,255,.12); color:#fff; box-shadow:inset .2em 0 0 var(--t); }
.cx-sib { margin-top:auto; margin-bottom:.6em; }
.cx-main { padding:1em 1.4em 0; overflow:hidden; min-width:0; }
.cx-foot { grid-column:2; display:flex; align-items:center; justify-content:space-between; background:#fff; padding:0 1.4em;
	font-size:.86em; color:#333; border-top:1px solid #E3E7EC; }
.cx-crumb { display:flex; align-items:center; gap:.45em; font-size:1.75em; color:#333; white-space:nowrap; margin-bottom:.45em; }
.cx-crumb .ci-chev { width:.5em; height:.5em; color:#555; }
.cx-crumb .ci-caret { width:.5em; height:.5em; }
.cx-tl { color:var(--t); }
.cx-card { background:#fff; border-radius:3px; box-shadow:0 1px 1px rgba(0,0,0,.1); padding:1.6em 1.6em 1.2em; }
.cx-tabs { display:flex; align-items:flex-end; border-bottom:1px solid #DDD; margin-bottom:1.5em; }
.cx-tab { display:flex; align-items:center; gap:.45em; padding:.75em 1.25em; color:var(--t); font-size:1.05em; }
.cx-tab.on { color:#333; border:1px solid #DDD; border-bottom-color:#fff; border-radius:3px 3px 0 0; margin-bottom:-1px; background:#fff; }
.cx-tab .ci { color:#555; width:.9em; height:.9em; }
.cx-plus .ci { color:var(--t); }
.cx-srow { display:flex; gap:1.4em; align-items:stretch; }
.cx-search { flex:1; display:flex; align-items:center; border:1px solid #CCC; border-radius:3px; height:2.7em; color:#555; }
.cx-search > span { height:100%; width:3.1em; display:grid; place-items:center; border-right:1px solid #CCC; }
.cx-search > span:last-child { border-right:0; border-left:1px solid #CCC; }
.cx-search em { flex:1; font-style:normal; padding:0 1em; color:#666; font-size:1.05em; font-weight:600; }
.cx-star { color:#F5B301; }
.cx-act { width:20em; display:flex; align-items:center; justify-content:center; gap:.4em; background:#EEE; border:1px solid #DDD; border-radius:3px; font-size:1.05em; }
.cx-act .ci { width:.7em; }
.cx-enroll { width:20em; display:flex; align-items:center; justify-content:center; gap:.5em; background:var(--t); color:#fff; border-radius:3px; font-size:1.05em; font-weight:600; }
.cx-note { color:#8A97A4; font-size:.98em; margin:.55em 0 1.6em !important; }
.cx-tbar { display:flex; justify-content:space-between; align-items:center; color:#333; font-size:1.05em; margin-bottom:.7em; }
.cx-tbar .ci { width:.75em; height:.75em; }
.cx-table { border:1px solid #DDD; border-radius:3px; }
.cx-tr { display:grid; align-items:center; gap:.6em; padding:0 1em; height:3.45em; color:var(--n); font-size:1em; white-space:nowrap; }
.cx-tr > span { overflow:hidden; text-overflow:ellipsis; }
.cx-tr + .cx-tr { border-top:0; }
.cx-th { border-bottom:1px solid #DDD; height:3.3em; }
.cx-th .ci { color:var(--n); width:.85em; }
.cx-tr.s1 { grid-template-columns:1.6em 8.8em 11em 7em 5.4em 2.6em 2.6em 4.4em 6.2em 4.2em 5.2em; }
.cx-tr.s3 { grid-template-columns:1.6em 4.4em 8.6em 6.6em 6.4em 12.6em 6.4em 12em 1fr; }
.cx-tr.s4 { grid-template-columns:1.6em 6.4em 10em 6.8em 5.4em 4.2em 4.2em 5.2em 8.4em 1fr; }
.cx-tr.s4 .cx-act-b { width:6.8em; }
.cx-cb { display:block; width:1.25em; height:1.25em; border:1px solid #888; border-radius:2px; }
.cx-sic { display:flex; align-items:center; gap:.5em; }
.cx-sic em { display:flex; gap:.45em; color:var(--t); flex:none; }
.cx-act-b { display:block; width:7em; text-align:center; background:#BFE6E8; color:#14868F; font-size:.78em; font-weight:400;
	letter-spacing:.04em; padding:.55em 0; border-radius:3px; }
.cx-avt { display:grid; place-items:center; width:2.2em; height:2.2em; border-radius:50%; color:#fff; font-style:normal; font-size:.66em; font-weight:700; letter-spacing:-.02em; }
.cx-n { text-align:center; }
.cx-qb { position:relative; display:inline-grid; place-items:center; width:1.85em; height:1.85em; border:1px solid #E57373; border-radius:50%; font-size:.9em; }
.cx-qb i { position:absolute; right:-.55em; top:-.45em; width:1.15em; height:1.15em; border-radius:50%; background:#F25C5C; color:#fff;
	font-style:normal; font-size:.62em; font-weight:800; display:grid; place-items:center; }
.cx-pct { display:block; font-size:.86em; color:var(--n); }
.cx-bar { display:block; height:4px; width:100%; border-radius:2px; background:rgba(221,221,221,.38); margin-top:.15em; }
.cx-bar b { display:block; height:100%; border-radius:2px; background:#FFB400; }
.cx-bar.full b { background:#5CB85C; }
.cx-ok { color:var(--t); } .cx-no { color:#E57373; }
.cx-ok .ci, .cx-no .ci { width:1.15em; height:1.15em; }
.cx-upd { color:var(--t); }
.cx-qa { display:flex; gap:.7em; color:#E57373; }
.cx-qs { display:flex; align-items:center; gap:.4em; }
.cx-qs .ci { width:1.15em; height:1.15em; }
.cx-rem { color:#333; }
/* eCRF */
.cx-ecrf { position:relative; padding-bottom:4.5em; height:calc(100% - 3.2em); overflow:hidden; }
.cx-erow { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2em; }
.cx-navto { display:flex; align-items:center; gap:.6em; font-size:1.05em; }
.cx-sel { display:flex; align-items:center; justify-content:space-between; width:21em; border:1px solid #CCC; border-radius:3px; padding:.55em .8em; }
.cx-sel .ci { width:.7em; color:#777; }
.cx-erb { display:flex; gap:.6em; }
.cx-calb { width:2.6em; height:2.6em; display:grid; place-items:center; border:1px solid var(--t); border-radius:3px; color:var(--t); }
.cx-saeb { display:flex; align-items:center; gap:.5em; border:1px solid #FFB400; color:#FFA000; border-radius:3px; padding:0 1.4em; font-weight:700; font-size:1.05em; }
.cx-steps { display:flex; align-items:center; gap:.4em; margin-bottom:1.3em; }
.cx-step { width:15.5em; height:4.5em; border:1px solid var(--t); border-radius:3px; color:var(--t); padding:.7em .9em; font-size:1.02em; display:flex; flex-direction:column; justify-content:space-between; }
.cx-step i { width:.85em; height:.85em; border-radius:50%; display:block; }
.cx-step.on { color:#333; border:2px solid var(--n); border-left-width:.45em; }
.cx-arr { color:#7FCCD2; } .cx-arr .ci { width:.85em; height:.85em; }
.cx-ftabs { margin-bottom:1.1em; }
.cx-dot { display:inline-block; width:.75em; height:.75em; border-radius:50%; }
.cx-vb { color:#A9B3BD; display:inline-flex; } .cx-vb .ci { width:1.1em; height:1.1em; }
.cx-fsearch { flex:none; width:75%; margin-bottom:1.2em; }
.cx-form { border:1px solid #DDD; box-shadow:0 .2em .6em rgba(0,0,0,.06); padding:1.4em 2.2em; }
.cx-field { margin-bottom:1.35em; }
.cx-field label { display:flex; align-items:center; gap:.6em; font-weight:700; color:#333; margin-bottom:.5em; font-size:1.02em; }
.cx-more { display:inline-grid; place-items:center; width:1.6em; height:1.4em; background:#EEE; border:1px solid #DDD; border-radius:2px; color:#333; }
.cx-more .ci { width:.85em; }
.cx-in { border:1px solid #CCC; padding:.5em .9em; font-size:1.15em; color:#333; }
.cx-field small { display:block; color:#666; font-size:.98em; margin-top:.25em; }
.cx-warn { display:flex; align-items:center; gap:.45em; color:#F0A500; margin-top:.9em !important; font-size:1em; }
.cx-warn .ci { color:#F0A500; }
.cx-sticky { position:absolute; left:1.2em; right:1.2em; bottom:.9em; display:grid; grid-template-columns:1fr 1fr 9.3em; gap:1.2em; }
.cx-sticky > span { display:flex; align-items:center; justify-content:center; gap:.5em; height:2.75em; border-radius:3px; color:#fff; font-size:1.05em; }
.cx-dis { background:#FFD07A; } .cx-sav { background:#7DCBA0; } .cx-btt { background:#EEE; border:1px solid #DDD; color:#333 !important; }
/* dashboard */
.cx-dhead { display:flex; justify-content:space-between; align-items:center; margin-bottom:.9em; }
.cx-dt { font-size:1.75em; color:#333; display:flex; align-items:center; gap:.3em; }
.cx-dt .ci { width:.5em; height:.5em; }
.cx-db { display:flex; gap:.5em; }
.cx-gb { display:flex; align-items:center; gap:.4em; background:#F5F5F5; border:1px solid #DDD; border-radius:3px; padding:.5em .9em; font-size:1em; color:#333; }
.cx-gb .ci { width:.85em; }
.cx-w { background:#fff; border-radius:3px; box-shadow:0 1px 1px rgba(0,0,0,.1); }
.cx-wh { display:flex; justify-content:space-between; align-items:center; padding:.8em 1em; border-bottom:1px solid #EEE; }
.cx-wh b { color:#444; font-weight:700; }
.cx-wh .ci { color:#9AA5B1; width:.95em; }
.cx-wb { padding:.8em 1em; }
.cx-tiles { display:grid; grid-template-columns:repeat(3, 1fr); padding:.2em 2em; }
.cx-tile { display:flex; align-items:center; gap:1.1em; }
.cx-tic { width:3.1em; height:3.1em; border-radius:.6em; display:grid; place-items:center; box-shadow:0 .2em .7em rgba(0,0,0,.12); background:#fff; }
.cx-tic .ci { width:1.5em; height:1.5em; }
.cx-tile b { display:block; font-size:1.65em; color:#333; font-weight:700; }
.cx-tile b small { font-size:.62em; color:#888; font-weight:400; }
.cx-tile span { color:#333; font-weight:700; font-size:.98em; }
.cx-wrow { display:grid; grid-template-columns:1.2fr 1fr .9fr; gap:.8em; margin-top:.8em; }
.cx-leg { display:flex; flex-wrap:wrap; justify-content:center; gap:.3em .9em; font-size:.82em; color:#666; margin-bottom:.4em; }
.cx-leg span { display:flex; align-items:center; gap:.35em; }
.cx-leg i { width:2.4em; height:.95em; display:block; }
.cx-chart { width:100%; height:auto; display:block; }
.cx-gl { stroke:#E6E6E6; stroke-width:1; }
.cx-ax { font-size:11px; fill:#666; font-family:'Mulish', sans-serif; }
.cx-dn { display:block; width:72%; margin:.6em auto 0; }
.cx-app p.cx-note { color:#8A97A4 !important; }

/* ---------- eConsent click-through: same rebuilds, plus the patient side on phones ----------
   cx-stage keeps the app frame's 1100 x 690 box, so phones and windows scale with the column. */
.cx-stage { position:relative; font-size:calc(100cqw / 78.57); aspect-ratio:1100 / 690; font-family:'Mulish', 'Muli', sans-serif;
	color:#333; line-height:1.3; text-align:left; }
.cx-stage *, .cx-stage *::before { box-sizing:border-box; }
.cx-stage .ci, .cx-app .ck { width:1em; height:1em; flex:none; }
.cx-sub { position:absolute; left:0; top:4.95em; width:80%; container-type:inline-size; }
/* enroll new subject */
.cx-enr { height:calc(100% - 3.2em); padding:1.3em 2em; }
.cx-ill { width:5.4em; height:5.4em; margin:0 auto 1.3em; border-radius:50%; background:#D9F1F2; color:var(--t); display:grid; place-items:center; }
.cx-ill .ci { width:2.6em; height:2.6em; }
.cx-fgrid { width:66%; margin:0 auto; }
.cx-frow { display:grid; grid-template-columns:11em 1fr; gap:1.3em; align-items:center; margin-bottom:.85em; }
.cx-frow label { text-align:right; font-weight:700; font-size:.98em; color:#333; margin:0; }
.cx-frow label i { color:#E53935; font-style:normal; }
.cx-sel2 { position:relative; display:flex; align-items:center; gap:.5em; height:2.7em; padding:0 .8em; border:1px solid #CCC;
	border-radius:3px; background:#fff; font-size:1em; color:#333; white-space:nowrap; }
.cx-sel2.open { border-color:var(--t); box-shadow:0 0 0 .2em rgba(23,162,172,.15); z-index:2; }
.cx-xc { margin-left:auto; display:flex; gap:.6em; color:#888; }
.cx-xc .ci { width:.75em; height:.75em; }
.cx-chip { display:inline-flex; align-items:center; gap:.4em; background:#DDF2F3; color:#14868F; padding:.25em .55em; border-radius:2px; font-size:.92em; }
.cx-chip .ci { width:.65em; height:.65em; }
.cx-flag { display:inline-flex; flex-direction:column; width:1.45em; height:1em; flex:none; }
.cx-flag b { flex:1; background:#111; } .cx-flag b + b { background:#DD0000; } .cx-flag b + b + b { background:#FFCE00; }
.cx-dd { position:absolute; left:-1px; right:-1px; top:calc(100% + .25em); margin:0; padding:.35em 0; list-style:none; background:#fff;
	border:1px solid #CCC; border-radius:3px; box-shadow:0 .6em 1.6em rgba(5,32,73,.16); }
.cx-dd li { display:grid; grid-template-columns:1.2em 1fr auto; gap:.7em; align-items:center; padding:.55em .9em; color:#333; font-size:.98em; margin:0; }
.cx-dd li.on { background:#F0FAFA; }
.cx-dd b { font-weight:600; }
.cx-dd li span { font-size:.85em; color:#5B6B7C; background:#F1F3F5; border-radius:1em; padding:.15em .7em; }
.cx-cbx { display:grid; place-items:center; width:1.2em; height:1.2em; border:1px solid #888; border-radius:2px; color:#fff; }
.cx-dd li.on .cx-cbx { background:var(--t); border-color:var(--t); }
.cx-cbx .ck { width:.9em; height:.9em; }
.cx-btns { display:grid; grid-template-columns:1fr 2fr; gap:.9em; margin-top:4.6em; }
.cx-btns span { display:flex; align-items:center; justify-content:center; gap:.45em; height:2.6em; border-radius:3px; color:#fff; font-size:1em; }
.cx-btns .ci { width:.9em; height:.9em; }
.cx-bk { background:#FFB400; } .cx-sv { background:#28A745; }
/* subject profile */
.cx-ptop { display:flex; align-items:flex-end; gap:1.2em; border-bottom:1px solid #DDD; margin-bottom:1.3em; }
.cx-ptop .cx-tabs { border:0; margin:0 .6em 0 0; }
.cx-signed { display:flex; align-items:center; gap:.35em; color:#28A745; font-weight:700; font-size:.98em; margin-bottom:.7em; }
.cx-pgrid { display:grid; grid-template-columns:1.25fr 1fr; gap:1.2em; }
.cx-box { border:1px solid #E3E7EC; border-radius:3px; padding:1.1em 1.3em; background:#fff; }
.cx-box h4 { display:flex; align-items:center; gap:.5em; margin:0 0 .9em; font-size:1.2em; font-weight:700; color:#333; line-height:1.3; text-transform:none; letter-spacing:0; }
.cx-fic { color:var(--t); display:flex; }
.cx-box dl { display:grid; grid-template-columns:11em 1fr; gap:.6em 1em; margin:0; align-items:center; }
.cx-box dt { color:#666; font-size:.95em; font-weight:400; margin:0; }
.cx-box dd { margin:0; color:#333; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-okb { display:inline-flex; align-items:center; gap:.35em; background:#E6F4EA; color:#1E7E34; padding:.2em .6em; border-radius:3px; font-size:.95em; }
.cx-trail { list-style:none; margin:1.1em 0 0; padding:0; }
.cx-trail li { display:grid; grid-template-columns:1.5em 1fr auto; gap:.7em; align-items:center; padding:.6em 0; border-top:1px solid #EEE; margin:0; color:#333; font-size:.98em; }
.cx-trail i { display:grid; place-items:center; width:1.5em; height:1.5em; border-radius:50%; background:var(--t); color:#fff; }
.cx-trail i .ck { width:.95em; height:.95em; }
.cx-trail span { color:#888; font-size:.92em; }
.cx-up { display:flex; gap:.7em; }
.cx-up em { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-selb { display:flex; align-items:center; gap:.4em; background:var(--t); color:#fff; border-radius:3px; padding:0 1em; font-weight:600; white-space:nowrap; }
.cx-drop { display:block; color:#888; font-size:.9em; text-align:right; margin:.35em 0 .9em; }
.cx-file { display:flex; flex-direction:column; align-items:flex-start; gap:.5em; border:1px dashed #AAB5C0; border-radius:3px; padding:1.1em 1.2em; }
.cx-file .ci { width:3.3em; height:3.3em; }
.cx-file span { font-size:.9em; color:#333; }
/* patient app on a phone (climedo-patient: mint #B4F4DC, navy #051F48) */
.cp-ph { position:absolute; top:2.9em; width:21em; height:43.5em; padding:.7em; border-radius:3.2em; background:#16181D;
	box-shadow:inset 0 0 0 .18em #3A3E46, 0 2em 4em rgba(5,31,72,.28), 0 .4em 1em rgba(5,31,72,.12); }
.cp-scr { position:relative; display:flex; flex-direction:column; width:100%; height:100%; overflow:hidden; border-radius:2.6em;
	background:#fff; color:#051F48; font-size:1em; }
.cp-sb { position:relative; display:flex; align-items:center; height:3em; padding:0 1.7em 0 2em; flex:none; }
.cp-sb b { font-size:.95em; font-weight:700; color:#051F48; }
.cp-isl { position:absolute; left:50%; top:.7em; width:6.6em; height:1.8em; margin-left:-3.3em; border-radius:1em; background:#000; }
.cp-sig { margin-left:auto; display:flex; align-items:flex-end; gap:.12em; height:.75em; }
.cp-sig i { width:.22em; background:#051F48; border-radius:.1em; }
.cp-sig i:nth-child(1) { height:35%; } .cp-sig i:nth-child(2) { height:55%; } .cp-sig i:nth-child(3) { height:78%; } .cp-sig i:nth-child(4) { height:100%; }
.cp-bat { width:1.6em; height:.78em; margin-left:.45em; border-radius:.22em; border:.1em solid #051F48; box-shadow:inset 0 0 0 .1em #fff; background:#051F48; }
.cp-head { display:flex; align-items:center; gap:.6em; padding:.5em 1.2em .9em; flex:none; }
.cp-head .ci { width:1em; height:1em; color:#051F48; }
.cp-head b { font-size:1.12em; font-weight:600; white-space:nowrap; }
.cp-prog { flex:1; height:.42em; border-radius:1em; background:#E7F1EE; overflow:hidden; }
.cp-prog i { display:block; height:100%; background:#7AEBC1; border-radius:1em; }
.cp-head em { font-style:normal; font-size:.8em; }
.cp-body { flex:1; padding:.4em 1.4em; min-height:0; }
.cp-f { margin-bottom:1.1em; }
.cp-f label { display:block; font-weight:700; font-size:.98em; margin:0 0 .4em; color:#051F48; }
.cp-f label i { color:#E53935; font-style:normal; }
.cp-in { display:flex; align-items:center; gap:.6em; border:1px solid #8D99AE; border-radius:.35em; padding:.7em .8em; font-size:.95em; color:#051F48; white-space:nowrap; }
.cp-in em { font-style:normal; color:#555; padding-right:.6em; border-right:1px solid #DDE2E8; }
.cp-foot { flex:none; padding:.6em 1.2em .9em; background:#F1FAF7; }
.cp-font { display:flex; align-items:center; gap:.7em; margin-bottom:.8em; }
.cp-font small { font-size:.7em; } .cp-font b { font-size:1.35em; font-weight:400; }
.cp-font span { flex:1; height:.12em; background:#051F48; position:relative; }
.cp-font span i { position:absolute; left:0; top:50%; width:1.1em; height:1.1em; margin-top:-.55em; border-radius:50%; background:#051F48; }
.cp-btn { display:flex; align-items:center; justify-content:center; gap:.5em; height:2.7em; border-radius:2em; background:#B4F4DC; color:#051F48; font-size:1em; font-weight:600; }
.cp-btn.dark { background:#051F48; color:#fff; height:2.5em; padding:0 1.4em; margin:0 auto; font-size:.92em; }
.cp-url { flex:none; display:flex; align-items:center; justify-content:space-between; margin:.5em .9em .3em; padding:.55em .9em; border-radius:.8em;
	background:#F2F3F5; font-size:.82em; color:#111; }
.cp-url b { display:flex; align-items:center; gap:.35em; font-weight:400; } .cp-url .ci { width:.9em; height:.9em; color:#555; }
.cp-home { flex:none; width:8em; height:.3em; margin:.35em auto .55em; border-radius:1em; background:#111; }
/* phone 1: scanning the poster */
.cx-two .cp-a { left:calc(50% - 24.2em); }
.cx-two .cp-b { left:calc(50% + 3.2em); }
.cp-flow { position:absolute; left:50%; top:50%; width:3.6em; height:3.6em; margin:-1.8em 0 0 -1.8em; border-radius:50%; background:#B4F4DC;
	color:#051F48; display:grid; place-items:center; box-shadow:0 .6em 1.4em rgba(5,31,72,.15); }
.cp-flow .ci { width:1.3em; height:1.3em; }
.cp-a .cp-sb { position:absolute; left:0; right:0; z-index:2; }
.cp-a .cp-sb b { color:#fff; } .cp-a .cp-sig i { background:#fff; } .cp-a .cp-bat { border-color:#fff; background:#fff; box-shadow:inset 0 0 0 .1em #333; }
.cp-cam { position:relative; flex:1; background:linear-gradient(180deg, #8E8A86 0%, #A19C96 55%, #6F6A65 56%, #5E5955 100%); }
.cp-x { position:absolute; left:1.6em; top:4.1em; color:#fff; } .cp-x .ci { width:1.5em; height:1.5em; }
.cp-poster { position:absolute; left:50%; top:46%; width:15.5em; transform:translate(-50%, -50%) rotate(-2deg); display:flex; flex-direction:column;
	align-items:center; gap:.9em; padding:1.5em 1.2em 1.2em; background:#F3E6D3; border-radius:.3em; box-shadow:0 1em 2em rgba(0,0,0,.25); }
.cp-poster b { font-size:1.25em; line-height:1.2; font-weight:800; color:#051F48; text-align:center; }
.cp-qr { width:8.6em; height:8.6em; display:block; }
.cp-poster small { font-size:.8em; color:#051F48; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.cp-scan { position:relative; display:block; padding:.75em; margin:-.3em 0; }
.cp-scan i { position:absolute; width:2.2em; height:2.2em; border:.3em solid #fff; filter:drop-shadow(0 0 .2em rgba(0,0,0,.25)); }
.cp-scan .tl { left:0; top:0; border-right:0; border-bottom:0; border-radius:.8em 0 0 0; }
.cp-scan .tr { right:0; top:0; border-left:0; border-bottom:0; border-radius:0 .8em 0 0; }
.cp-scan .bl { left:0; bottom:0; border-right:0; border-top:0; border-radius:0 0 0 .8em; }
.cp-scan .br { right:0; bottom:0; border-left:0; border-top:0; border-radius:0 0 .8em 0; }
.cp-shutter { position:absolute; left:50%; bottom:2em; width:4.2em; height:4.2em; margin-left:-2.1em; border-radius:50%; background:#fff; box-shadow:0 0 0 .3em rgba(255,255,255,.4); }
/* phone 3: the patient signs */
.cx-over .cp-c { right:0; transform:scale(.9); transform-origin:100% 50%; }
.cp-doc { display:flex; flex-direction:column; gap:.55em; padding:1em; border-radius:.5em; background:#F5F7F9; margin-bottom:1em; }
.cp-doc i { display:block; height:.45em; border-radius:1em; background:#D5DCE4; } .cp-doc i.s { width:60%; }
.cp-agree { display:flex; gap:.6em; align-items:flex-start; font-size:.92em; line-height:1.4; color:#051F48; margin-bottom:1.1em; }
.cp-agree .ck { width:1.3em; height:1.3em; padding:.2em; border-radius:.25em; background:#051F48; color:#fff; margin-top:.05em; }
.cp-sl { display:block; font-weight:700; font-size:.95em; margin:0 0 .4em; color:#051F48; }
.cp-pad { height:8em; border:1px dashed #9AA8B8; border-radius:.5em; background:#FAFBFC; display:flex; align-items:center; }
.cp-sig2 { width:100%; height:100%; }
.cp-sig2 path { fill:none; stroke:#051F48; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.cp-sig2 path.ln { stroke:#CDD5DE; stroke-width:1; }
.cp-sn { display:block; font-size:.8em; color:#5B6B7C; margin:.4em 0 1.2em; }
/* 4: video visit */
.cv-win { position:absolute; left:0; top:3.85em; width:64em; border-radius:.9em; overflow:hidden; background:#1B2433;
	box-shadow:0 2.2em 4.4em rgba(5,31,72,.22), 0 .4em 1em rgba(5,31,72,.1); }
.cv-bar { display:flex; align-items:center; gap:.45em; height:2.6em; padding:0 1em; }
.cv-bar i { width:.75em; height:.75em; border-radius:50%; background:#FF5F57; } .cv-bar i + i { background:#FEBC2E; } .cv-bar i + i + i { background:#28C840; }
.cv-bar span { margin-left:1em; color:#C8D1DC; font-size:.95em; }
.cv-vid { position:relative; }
.accordion-scroll .image-wrap .cv-vid img, .cv-vid img { display:block; width:100%; max-width:none; height:auto; max-height:none; }
.cv-live { position:absolute; left:1em; top:1em; display:flex; align-items:center; gap:.45em; padding:.3em .8em; border-radius:1em;
	background:rgba(0,0,0,.45); color:#fff; font-size:.95em; }
.cv-live b { width:.6em; height:.6em; border-radius:50%; background:#F25C5C; }
.cv-name { position:absolute; left:1em; bottom:1em; padding:.35em .8em; border-radius:.4em; background:rgba(5,32,73,.72); color:#fff; font-size:.95em; }
.cv-self { position:absolute; left:1em; top:3.4em; width:9.5em; height:6.2em; border-radius:.6em; border:.15em solid rgba(255,255,255,.7);
	background:linear-gradient(160deg, #50627A, #2D3A4D); display:grid; place-items:center; box-shadow:0 .5em 1.2em rgba(0,0,0,.25); }
.cv-self b { display:grid; place-items:center; width:2.6em; height:2.6em; border-radius:50%; background:#B4F4DC; color:#051F48; font-size:1em; }
.cv-self i { display:none; }
.cv-ctl { position:absolute; left:45%; bottom:1.1em; transform:translateX(-50%); display:flex; gap:.9em; }
.cv-ctl span { display:grid; place-items:center; width:3.2em; height:3.2em; border-radius:50%; background:rgba(27,36,51,.75); color:#fff; }
.cv-ctl span.end { width:4.6em; border-radius:1.6em; background:#D93A49; }
.cv-ctl .ci { width:1.3em; height:1.3em; }
.cx-call .cp-d { right:0; }
.cp-next { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.8em; padding-top:1.4em; }
.cp-nic { display:grid; place-items:center; width:3.6em; height:3.6em; border-radius:50%; background:#E3FBF2; color:#051F48; }
.cp-nic .ci { width:1.6em; height:1.6em; }
.cp-next > b { font-size:1.2em; font-weight:700; color:#051F48; }
.cp-next > div { font-size:.9em; line-height:1.5; color:#051F48; }
.cp-next .cp-btn { margin-top:.4em; }

/* ---------- eCOA: workflow for Direct-to-Patient studies ----------
   Five steps with value propositions beside the patient's phone (screens from the Figma demo,
   patient-app parts as in the eConsent click-through). dtp-flow.js moves the steps along. */
.dw-lead { max-width:640px; margin-top:12px; }
.dw-row { margin-top:36px; }
.dw-steps { display:flex; flex-direction:column; gap:10px; }
.dw-step { position:relative; display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start; width:100%;
	padding:18px 22px 20px; border:1px solid #DCE5EA; border-radius:12px; background:#fff; text-align:left; cursor:pointer;
	font:inherit; color:#051F48; overflow:hidden; transition:border-color .3s, box-shadow .3s, background .3s; }
.dw-step:hover { border-color:#9FDDD9; }
.dw-step:focus-visible { outline:2px solid #17A2AC; outline-offset:2px; }
.dw-step i { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#EEF4F6; color:#051F48;
	font-style:normal; font-weight:800; font-size:15px; transition:background .3s; }
.dw-step b { display:block; font-size:18px; font-weight:700; line-height:1.3; margin-top:10px; color:#051F48; }
.dw-step em { display:block; font-style:normal; font-size:15px; line-height:1.55; color:#3D4F66; max-height:0; opacity:0; overflow:hidden;
	transition:max-height .45s ease, opacity .35s ease, margin .35s ease; }
.dw-step.on { border-color:#B4F4DC; background:#F3FCF8; box-shadow:0 12px 28px rgba(5,31,72,.08); }
.dw-step.on i { background:#B4F4DC; }
.dw-step.on em { max-height:120px; opacity:1; margin-top:6px; }
.dw-bar { position:absolute; left:0; right:0; bottom:0; height:3px; background:transparent; text-decoration:none; }
.dw-bar u { display:block; height:100%; width:0; background:#17A2AC; }
.dw-run .dw-step.on .dw-bar u { animation:dw-fill 5.2s linear forwards; }
@keyframes dw-fill { to { width:100%; } }
.dw-stage { position:relative; display:flex; justify-content:center; padding:24px 0; font-size:15px; }
.dw-stage::before { content:""; position:absolute; left:50%; top:50%; width:28em; height:28em; margin:-14em 0 0 -14em; border-radius:50%;
	background:radial-gradient(circle, rgba(180,244,220,.55), rgba(180,244,220,0) 68%); }
.cp-ph.dw-ph { position:relative; top:auto; }
.dw-s { position:absolute; inset:.7em; width:auto; height:auto; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s .45s; }
.dw-s.on { opacity:1; visibility:visible; transition:opacity .45s ease; }
.dw-cam { background:linear-gradient(180deg, #C9CDC8 0%, #B9BDB6 52%, #8A6A4C 53%, #6E523A 100%); }
.dw-poster { background:#EAF6F5; transform:translate(-50%, -50%); }
.dw-poster b { font-weight:700; font-size:1.15em; }
.dw-body { display:flex; flex-direction:column; overflow:hidden; }
.dw-ic { align-self:center; display:grid; place-items:center; width:3.2em; height:3.2em; border-radius:50%; background:#E3FBF2; color:#051F48; }
.dw-ic .ci { width:1.4em; height:1.4em; }
.dw-h { display:block; text-align:center; font-size:1.15em; font-weight:700; margin:.5em 0 .4em; color:#051F48; }
.dw-p { font-size:.88em; line-height:1.45; color:#051F48; margin-bottom:1em; }
.dw-rad { display:flex; align-items:center; gap:.6em; font-size:.95em; padding:.35em 0; color:#051F48; }
.dw-rad i { width:1.15em; height:1.15em; border-radius:50%; border:1px solid #6B7A90; display:grid; place-items:center; }
.dw-rad.on i { border-color:#051F48; }
.dw-rad.on i::after { content:""; width:.6em; height:.6em; border-radius:50%; background:#051F48; }
.dw-ck { display:flex; gap:.6em; align-items:flex-start; font-size:.88em; line-height:1.45; color:#051F48; margin-top:.2em; }
.dw-ck i { flex:none; display:grid; place-items:center; width:1.3em; height:1.3em; border-radius:.25em; background:#051F48; color:#fff; }
.dw-ck .ck { width:.9em; height:.9em; }
.dw-note { display:flex; gap:.5em; align-items:center; margin-top:1.1em; padding:.7em .8em; border-radius:.5em; background:#F1FAF7;
	font-size:.8em; line-height:1.4; color:#3D4F66; }
.dw-note .ci { width:1em; height:1em; color:#17A2AC; }
.dw-push { display:flex; gap:.7em; margin:.2em .7em .6em; padding:.75em .85em; border-radius:1.1em; background:rgba(242,243,245,.96);
	box-shadow:0 .5em 1.4em rgba(5,31,72,.14); font-size:.85em; line-height:1.35; color:#111; animation:dw-drop .6s ease both; }
.dw-s:not(.on) .dw-push { animation:none; }
@keyframes dw-drop { from { transform:translateY(-1.5em); opacity:0; } }
.dw-pi { flex:none; display:grid; place-items:center; width:2.3em; height:2.3em; border-radius:.55em; background:#051F48; }
.dw-pi .mk { width:1.4em; height:1.4em; }
.dw-push b { font-weight:700; } .dw-push em { float:right; font-style:normal; color:#777; } .dw-push span { display:block; }
.dw-scale { display:grid; grid-template-columns:repeat(11, 1fr); gap:.2em; }
.dw-scale span { display:grid; place-items:center; height:2em; border:1px solid #8D99AE; border-radius:.3em; font-size:.8em; color:#051F48; }
.dw-scale span.on { background:#051F48; border-color:#051F48; color:#fff; }
.dw-sl { display:flex; justify-content:space-between; font-size:.75em; color:#5B6B7C; margin-top:.3em; }
.dw-done { align-items:center; text-align:center; padding-top:1.8em; }
.dw-big { display:grid; place-items:center; width:4.4em; height:4.4em; border-radius:50%; background:#B4F4DC; color:#051F48;
	box-shadow:0 0 0 .6em rgba(180,244,220,.35); }
.dw-big .ck { width:2.2em; height:2.2em; }
.dw-done .dw-h { margin-top:1em; }
.dw-card { width:100%; text-align:left; margin-top:.7em; padding:.8em 1em; border-radius:.7em; border:1px solid #DCE5EA; }
.dw-card span { display:flex; align-items:center; gap:.45em; font-size:.8em; color:#5B6B7C; }
.dw-card .ci { width:1em; height:1em; color:#17A2AC; }
.dw-card b { display:block; font-size:1em; margin-top:.2em; color:#051F48; }
.dw-pb { display:block; height:.4em; margin-top:.5em; border-radius:1em; background:#E7F1EE; }
.dw-pb u { display:block; width:33%; height:100%; border-radius:1em; background:#7AEBC1; }
.dw .cp-prog { min-width:2.4em; }
@media screen and (max-width:1024px) { .dw-row > div:last-child { order:-1; } .dw-stage { margin-bottom:20px; font-size:13px; } }
@media screen and (max-width:450px) { .dw-stage { font-size:12px; } .dw-step { padding:14px 16px 16px; gap:12px; grid-template-columns:36px 1fr; }
	.dw-step i { width:36px; height:36px; } .dw-step b { font-size:16px; margin-top:7px; } }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .dw-step:not(.on) { background:#0B1A3D; border-color:#24365E; }
	:root:not([data-theme="light"]) .dw-step:not(.on) b { color:#fff; } :root:not([data-theme="light"]) .dw-step:not(.on) i { background:#1B2C52; color:#fff; } }
@media (prefers-reduced-motion: reduce) { .dw-s, .dw-step, .dw-step em { transition:none; } .dw-push { animation:none; } }
.dw-poster small { text-align:center; }
.dw-visit { display:flex; align-items:center; gap:.7em; padding:.8em .9em; border-radius:.7em; background:#F1FAF7; border:1px solid #CDEFE3; margin-bottom:1em; }
.dw-vi { flex:none; display:grid; place-items:center; width:2.4em; height:2.4em; border-radius:50%; background:#051F48; color:#fff; }
.dw .dw-vi svg { display:block; width:1.2em; height:1.2em; color:#fff; }
.dw-visit b { display:block; font-size:.85em; line-height:1.3; color:#051F48; }
.dw-visit span { display:block; font-size:.78em; color:#5B6B7C; margin-top:.15em; }
.dw-visit em { margin-left:auto; display:flex; align-items:center; gap:.25em; font-style:normal; font-size:.75em; font-weight:700; color:#1E7E34; white-space:nowrap; }
.dw-visit em .ck { width:1em; height:1em; }
.dw-docname { display:flex; align-items:center; gap:.5em; font-size:.85em; color:#051F48; margin-bottom:.9em; }
.dw .dw-docname svg { display:block; flex:none; width:1.9em; height:1.9em; }
.dw-sl2 { margin-top:1em; }

/* ---------- Benefits click-throughs on the dashboard, eCOA, DCT and industry pages ----------
   cz- = dashboards, studies, roles, editor; cw- = the patient web app on a tablet or laptop. */
.cx-w { display:flex; flex-direction:column; min-height:0; }
.cx-wb { flex:1; min-height:0; display:flex; flex-direction:column; }
.cx-wb .cx-chart { flex:1; min-height:0; height:100%; }
.cx-wb .cx-dn { flex:1; min-height:0; width:auto; max-width:100%; margin:.4em auto 0; }
.cz-full { height:39em; }
.cz-col { display:flex; flex-direction:column; gap:.8em; height:39em; }
.cz-col > .cx-w { flex:1; }
.cz-two { display:grid; grid-template-columns:1fr 1fr; gap:.8em; height:22em; }
.cz-two.cz-mt { height:16em; margin-top:.8em; }
.cx-over .cz-two { height:39em; }
.cz-grid { display:grid; grid-template-columns:1.12fr 1fr; grid-template-rows:15.5em 22.5em; gap:.8em; }
.cz-sel { display:flex; gap:1.6em; margin-bottom:.6em; }
.cz-sel label { display:flex; flex-direction:column; gap:.25em; font-size:.82em; color:#666; margin:0; }
.cz-sel label span { display:flex; justify-content:space-between; align-items:center; gap:1em; min-width:14em; border:1px solid #CCC;
	border-radius:3px; padding:.35em .7em; color:#333; font-size:1.05em; }
.cz-sel .ci { width:.7em; height:.7em; color:#777; }
.cz-vt { margin-top:.6em; border:1px solid #DDD; border-radius:3px; font-size:.82em; }
.cz-vt div { display:grid; grid-template-columns:repeat(9, 1fr); text-align:center; }
.cz-vt b { padding:.35em 0; color:#333; border-bottom:1px solid #EEE; } .cz-vt span { padding:.35em 0; color:#555; }
.cz-per { display:flex; gap:.2em; margin-bottom:.4em; }
.cz-per span { padding:.3em .8em; font-size:.85em; color:var(--t); }
.cz-per span.on { color:#333; box-shadow:inset 0 -2px 0 var(--t); }
.cz-tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:1em 1.2em; padding:.4em .6em; }
.cz-tiles .cx-tile b { font-size:1.45em; }
.cz-tiles .cx-tile span { font-size:.85em; }
.cz-vid { flex:1; min-height:5em; border-radius:4px; display:grid; place-items:center;
	background:linear-gradient(135deg, #2BB5BE 0%, #17A2AC 45%, #052049 100%); }
.cz-vid span { display:grid; place-items:center; width:3em; height:3em; border-radius:50%; background:#fff; color:var(--t); }
.cz-vid .ci { width:1.3em; height:1.3em; }
.cz-wp { font-size:.86em; line-height:1.45; color:#444; margin:.7em 0 .5em; }
.cz-links { display:flex; gap:1.2em; font-size:.85em; color:var(--t); }
.cz-links span { display:flex; align-items:center; gap:.35em; } .cz-links .ci { width:.85em; height:.85em; }
/* dashboard editor */
.cz-edit, .cz-save { display:flex; align-items:center; gap:.4em; border-radius:3px; padding:.5em .9em; font-size:1em; }
.cz-edit { background:#FFF4D6; color:#A66F00; } .cz-save { background:var(--t); color:#fff; }
.cz-edit .ci, .cz-save .ci { width:.9em; height:.9em; }
.cz-edit-row { display:grid; grid-template-columns:15.5em 1fr; gap:.9em; height:39em; }
.cz-panel { background:#fff; border-radius:3px; box-shadow:0 1px 1px rgba(0,0,0,.1); padding:1em; }
.cz-panel > b { display:block; font-size:1.05em; color:#333; }
.cz-panel small { display:block; font-size:.8em; color:#888; margin:.2em 0 .5em; }
.cz-panel ul { list-style:none; margin:0; padding:0; }
.cz-panel li { display:flex; align-items:center; gap:.6em; margin:.45em 0 0; padding:.55em .7em; border:1px solid #E3E7EC; border-radius:3px;
	background:#FAFBFC; color:#333; font-size:.92em; }
.cz-panel li span { color:var(--t); display:flex; } .cz-panel li em { margin-left:auto; color:#AAB5C0; display:flex; }
.cz-board { position:relative; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:21em 1fr; gap:.9em; }
.cz-edit-w { outline:2px dashed #9FDDD9; outline-offset:2px; }
.cz-drop { grid-column:1 / 3; display:grid; place-items:center; border:2px dashed var(--t); border-radius:4px; background:rgba(23,162,172,.06); color:var(--t); }
.cz-drop .ci { width:2em; height:2em; }
.cz-ghost { position:absolute; right:3em; bottom:2.2em; width:19em; height:15em; transform:rotate(-3deg); opacity:.96;
	filter:drop-shadow(0 1.2em 1.6em rgba(5,32,73,.28)); }
.cz-ghost .cx-w { height:100%; }
/* studies overview */
.cz-cards { display:grid; grid-template-columns:repeat(4, 1fr); gap:1em; margin-top:1.2em; }
.cz-sc { display:flex; flex-direction:column; gap:.45em; border:1px solid #E3E7EC; border-radius:4px; padding:1.1em; }
.cz-si { align-self:center; display:grid; place-items:center; width:4em; height:4em; border-radius:50%; background:#D9F1F2; color:var(--t); margin-bottom:.4em; }
.cz-si .ci { width:1.8em; height:1.8em; }
.cz-sc small { font-size:.78em; color:#666; } .cz-sc small em { font-style:normal; color:#E0A100; }
.cz-sc > b { font-size:1em; color:var(--n); line-height:1.25; min-height:2.5em; }
.cz-sd { font-size:.82em; color:#666; min-height:2.4em; }
.cz-sc dl { display:grid; grid-template-columns:auto 1fr; gap:.25em .6em; margin:.2em 0 0; font-size:.8em; }
.cz-sc dt { color:#666; font-weight:400; } .cz-sc dd { margin:0; color:#333; font-weight:600; text-align:right; }
.cz-open { display:flex; align-items:center; justify-content:center; gap:.4em; margin-top:.5em; height:2.4em; border-radius:3px; background:var(--t); color:#fff; font-size:.9em; }
.cz-open .ci { width:.9em; height:.9em; }
/* site eCRF filled by the patient */
.cz-ecrf { height:calc(100% - 3.2em); }
.cz-pe { display:flex; align-items:center; gap:.6em; margin-bottom:1.1em; padding:.7em 1em; border:1px solid #BFE6E8; border-radius:3px;
	background:#F0FAFA; color:#14868F; font-size:.95em; }
.cz-pe b { margin-left:1.4em; display:flex; align-items:center; gap:.35em; color:#1E7E34; white-space:nowrap; }
.cz-pe .ck { width:1em; height:1em; }
.cz-ro { background:#F7F9FA; }
/* roles and permissions */
.cz-steps { display:flex; gap:3em; margin-bottom:1.2em; }
.cz-ss { display:flex; align-items:center; gap:.5em; color:#8A97A4; font-size:.95em; }
.cz-ss i { display:grid; place-items:center; width:1.9em; height:1.9em; border-radius:50%; border:1px solid #C8D0D8; font-style:normal; font-size:.85em; }
.cz-ss.done i { background:var(--t); border-color:var(--t); color:#fff; } .cz-ss.done .ck { width:1em; height:1em; }
.cz-ss.on { color:var(--n); font-weight:700; } .cz-ss.on i { border:2px solid var(--n); }
.cz-rtable { margin-top:1.3em; border:1px solid #DDD; border-radius:3px; }
.cz-rt { display:grid; grid-template-columns:12em repeat(6, 1fr); align-items:center; height:3.1em; padding:0 1em; border-top:1px solid #EEE; color:var(--n); }
.cz-rt > span + span { text-align:center; }
.cz-rh { border-top:0; font-weight:700; font-size:.86em; }
.cz-pm { display:inline-grid; place-items:center; width:1.35em; height:1.35em; border:1px solid #AAB5C0; border-radius:3px; color:#fff; }
.cz-pm.on { background:var(--t); border-color:var(--t); } .cz-pm .ck { width:.9em; height:.9em; }
.cz-audit { display:flex; align-items:center; gap:.5em; margin-top:1em; color:#5B6B7C; font-size:.9em; }
.cz-audit .ci { color:var(--t); }
/* patient app extras */
.cz-ph-r { right:0; transform:scale(.9); transform-origin:100% 50%; }
.cz-sl { padding-top:.6em; }
.cz-track { position:relative; display:block; height:.4em; border-radius:1em; background:#DDE3EA; }
.cz-track i { display:block; height:100%; border-radius:1em; background:#17A2AC; }
.cz-track b { position:absolute; top:50%; width:1.3em; height:1.3em; border-radius:50%; background:#051F48; transform:translate(-50%, -50%); }
.cz-cb { display:flex; align-items:center; gap:.6em; font-size:.95em; padding:.3em 0; color:#051F48; }
.cz-cb i { display:grid; place-items:center; width:1.15em; height:1.15em; border-radius:.2em; border:1px solid #6B7A90; color:#fff; }
.cz-cb.on i { background:#051F48; border-color:#051F48; } .cz-cb .ck { width:.8em; height:.8em; }
.cz-fr { display:flex; align-items:center; gap:.8em; } .cz-fr .cp-font { flex:1; }
.cz-lang { display:flex; align-items:center; gap:.3em; margin-bottom:.8em; padding:.15em .6em; border:1px solid #8D99AE; border-radius:1em; font-size:.8em; color:#051F48; }
.cz-lang .ci { width:.65em; height:.65em; }
.cz-big { font-size:1.2em; }
.cz-pt { display:block; font-size:.85em; color:#5B6B7C; margin-bottom:.4em; }
.cz-nav { flex:none; display:flex; justify-content:space-around; padding:.6em 0 .2em; border-top:1px solid #E3E7EC; }
.cz-nav span { display:flex; flex-direction:column; align-items:center; gap:.2em; font-size:.72em; color:#8A97A4; }
.cz-nav span.on { color:#17A2AC; } .cz-nav .ci { width:1.5em; height:1.5em; }
.cz-p1 { left:calc(50% - 24.2em); } .cz-p2 { left:calc(50% + 3.2em); }
.cz-mailhd { display:flex; align-items:center; gap:.6em; padding:.4em 1.2em .8em; border-bottom:1px solid #E3E7EC; color:#051F48; }
.cz-mailhd .ci { width:1em; height:1em; color:#17A2AC; }
.cz-mail { display:flex; flex-direction:column; gap:.9em; padding-top:1em; font-size:.9em; line-height:1.45; color:#051F48; }
.cz-subj { font-size:1.2em; }
.cz-brand { display:flex; align-items:center; gap:.4em; font-weight:800; font-size:1.1em; color:#051F48; }
.cz-brand .mk { width:1.5em; height:1.5em; } .cz-brand .mk path:first-child { fill:#051F48; }
.cz-mail .cp-btn.dark { margin:.3em 0; align-self:flex-start; }
.cz-qr { display:block; width:5.5em; margin:0 auto 1em; } .cz-qr .cp-qr { width:100%; height:auto; }
/* patient web app on a tablet or laptop */
.cw-app { display:flex; flex-direction:column; height:100%; background:#fff; color:#051F48; font-family:'Mulish', 'Muli', sans-serif; }
.cw-hd { display:flex; align-items:center; justify-content:space-between; gap:2em; padding:1em 1.8em; background:#F1FAF7; }
.cw-hd b { display:block; font-size:1.15em; font-weight:600; }
.cw-hd span { display:flex; align-items:center; gap:.3em; font-size:.8em; color:#051F48; margin-top:.3em; }
.cw-hd span .ci { width:.8em; height:.8em; }
.cw-hd .cp-prog { flex:0 0 9em; }
.cw-bd { flex:1; min-height:0; overflow:hidden; width:100%; max-width:36em; margin:0 auto; padding:1.2em 1.8em 0; display:flex; flex-direction:column; }
.cw-ft { flex:none; display:flex; align-items:center; gap:2em; padding:.8em 1.8em; background:#F1FAF7; }
.cw-ft .cp-btn { flex:0 0 12em; } .cw-ft .cp-font { flex:1; margin:0; }
.cw-tab { position:absolute; padding:1em; border-radius:2em; background:#16181D;
	box-shadow:inset 0 0 0 .18em #3A3E46, 0 2em 4em rgba(5,31,72,.24), 0 .4em 1em rgba(5,31,72,.1); }
.cw-tscr { height:100%; overflow:hidden; border-radius:1.1em; background:#fff; }
.cw-tab .cw-app { font-size:.78em; }
.cw-lap { position:absolute; }
.cw-lscr { display:flex; flex-direction:column; height:30em; padding:.9em .9em 0; border-radius:1.3em 1.3em 0 0; background:#16181D; }
.cw-lscr > .cw-bar { flex:none; display:flex; align-items:center; gap:.4em; height:2.2em; padding:0 .9em; border-radius:.5em .5em 0 0; background:#F2F3F5; }
.cw-bar i { width:.65em; height:.65em; border-radius:50%; background:#FF5F57; } .cw-bar i + i { background:#FEBC2E; } .cw-bar i + i + i { background:#28C840; }
.cw-bar span { display:flex; align-items:center; gap:.35em; margin-left:1.2em; padding:.25em 1em; border-radius:1em; background:#fff; font-size:.75em; color:#333; }
.cw-bar .ci { width:.9em; height:.9em; color:#777; }
.cw-lscr .cw-app { flex:1; min-height:0; font-size:.7em; }
.cw-base { height:1.5em; margin:0 -3.5em; border-radius:0 0 1.6em 1.6em; background:linear-gradient(#D7DBE0, #9AA1AA);
	box-shadow:0 1.6em 3em rgba(5,31,72,.22); }
.cz-dev .cz-tab-l { left:2em; top:6.5em; width:47em; height:36em; }
.cz-dev .cz-ph-r { right:4em; transform:none; }
.cz-dev3 .cz-lap { left:4em; top:6em; width:44em; }
.cz-dev3 .cz-tab-m { left:37.5em; top:10.5em; width:24em; height:34em; }
.cz-dev3 .cz-tab-m .cw-app { font-size:.6em; }
.cz-dev3 .cz-ph-s { right:2em; top:auto; bottom:2em; transform:scale(.72); transform-origin:100% 100%; }

/* EDC page, phone-pairing capture in three steps: cards like .eb-card, lit one after the other in a 9 s loop.
   Default styles are the end state (reduced motion keeps it); the animations replay the flow. */
.pp-trust { list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 10px; }
.pp-trust li { display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 7px; border-radius:2em; background:#F1FAF7;
	border:1px solid #CDEFE3; font-size:14px; line-height:1.3; color:#051F48 !important; }
.pp-trust .ck { width:20px; height:20px; padding:3px; border-radius:50%; background:#B4F4DC; color:#051F48; flex:none; }
.pp-steps { margin-top:40px; }
.pp-steps > div { position:relative; }
@media (min-width:1024px) {
	.pp-steps > div:not(:last-child)::after { content:""; position:absolute; z-index:3; right:-16px; top:96px; width:32px; height:32px;
		border-radius:50%; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5L10.5 8 6 12.5' fill='none' stroke='%23117985' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
		border:1px solid #B4F4DC; box-shadow:0 6px 16px rgba(5,31,72,.1); }
}
.pp-c1 { animation:pp-g1 9s infinite; } .pp-c2 { animation:pp-g2 9s infinite; } .pp-c3 { animation:pp-g3 9s infinite; }
@keyframes pp-g1 { 0%, 30% { border-color:#7AEBC1; box-shadow:0 18px 40px rgba(23,162,172,.16); } 36%, 100% { border-color:#E1EBEA; box-shadow:0 10px 30px rgba(5,31,72,.06); } }
@keyframes pp-g2 { 0%, 30%, 69%, 100% { border-color:#E1EBEA; box-shadow:0 10px 30px rgba(5,31,72,.06); } 36%, 63% { border-color:#7AEBC1; box-shadow:0 18px 40px rgba(23,162,172,.16); } }
@keyframes pp-g3 { 0%, 63% { border-color:#E1EBEA; box-shadow:0 10px 30px rgba(5,31,72,.06); } 69%, 97% { border-color:#7AEBC1; box-shadow:0 18px 40px rgba(23,162,172,.16); } 100% { border-color:#E1EBEA; } }
.pp-a1, .pp-a2, .pp-a3 { position:absolute; inset:0; color:#051F48; font-family:'Mulish', sans-serif; }
/* the phones run the Climedo app: status bar, header with the Climedo mark, content, mint controls */
.pp-ph { position:absolute; padding:.32em; border-radius:1.5em; background:#16181D; box-shadow:0 1em 2.4em rgba(5,31,72,.22); }
.pp-scr { position:relative; display:flex; flex-direction:column; width:100%; height:100%; border-radius:1.2em; overflow:hidden; background:#fff; }
.pp-sb { position:relative; display:flex; flex:none; align-items:center; justify-content:space-between; height:1.5em; padding:0 .9em; }
.pp-sb b { font-size:.5em; font-weight:800; color:#051F48; }
.pp-isl { position:absolute; left:50%; top:.38em; width:2.3em; height:.65em; margin-left:-1.15em; border-radius:1em; background:#16181D; }
.pp-bt { width:1em; height:.48em; border:1px solid #051F48; border-radius:.14em;
	background:linear-gradient(#051F48, #051F48) .08em 50% / 65% calc(100% - .16em) no-repeat; }
.pp-ah { display:flex; flex:none; align-items:center; gap:.35em; padding:.2em .7em .45em; border-bottom:1px solid #EDF3F3; }
.pp-ah .mk { flex:none; width:1.15em; height:1.15em; }
.pp-ah .mk path:nth-child(1) { fill:#051F48; }
.pp-ah .mk path:nth-child(2) { stroke:#7AEBC1; }
.pp-ah b { font-size:.62em; font-weight:800; color:#051F48; white-space:nowrap; }
.pp-bd { position:relative; flex:1; min-height:0; margin:.5em .5em .45em; border-radius:.6em; overflow:hidden; }
.pp-ft { display:flex; flex:none; flex-direction:column; align-items:center; gap:.4em; padding:0 .5em .65em; }
.pp-ft small { font-size:.52em; font-weight:700; color:#117985; white-space:nowrap; }
.pp-pill { position:absolute; z-index:4; display:inline-flex; align-items:center; gap:.35em; border-radius:2em; padding:.4em .9em .4em .5em;
	font-size:.85em; font-weight:800; background:#17AC6B; color:#fff; box-shadow:0 .5em 1em rgba(23,172,107,.3); }
.pp-pill .ck { width:1.15em; height:1.15em; }
/* 1 pair device */
.pp-win { position:absolute; left:7%; top:11%; bottom:11%; width:52%; display:flex; flex-direction:column; background:#fff;
	border:1px solid #D6E5E4; border-radius:.7em; box-shadow:0 .8em 2em rgba(5,31,72,.08); overflow:hidden; }
.pp-bar { display:flex; gap:.3em; padding:.5em .7em; border-bottom:1px solid #EDF3F3; }
.pp-bar i { width:.45em; height:.45em; border-radius:50%; background:#D6E5E4; }
.pp-wb { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5em; }
.pp-wb b { font-size:.95em; font-weight:800; }
.pp-wb span { font-size:.75em; color:#6D8189; }
.pp-qr .cp-qr { width:6.4em; height:6.4em; }
.pp-ph1 { right:10%; top:8%; width:8.2em; height:15.4em; transform:rotate(6deg); }
.pp-cam { position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(circle at 50% 42%, #3B4C63, #16243A); }
.pp-aim { position:relative; width:4.7em; height:4.7em; }
.pp-aim > i { position:absolute; width:1.1em; height:1.1em; border:.2em solid #7AEBC1; }
.pp-aim > i:nth-child(1) { left:0; top:0; border-right:0; border-bottom:0; border-radius:.35em 0 0 0; }
.pp-aim > i:nth-child(2) { right:0; top:0; border-left:0; border-bottom:0; border-radius:0 .35em 0 0; }
.pp-aim > i:nth-child(3) { left:0; bottom:0; border-right:0; border-top:0; border-radius:0 0 0 .35em; }
.pp-aim > i:nth-child(4) { right:0; bottom:0; border-left:0; border-top:0; border-radius:0 0 .35em 0; }
.pp-mini { position:absolute; inset:.6em; } .pp-mini .cp-qr { width:100%; height:100%; }
.pp-scanl { position:absolute; left:.25em; right:.25em; top:10%; height:.16em; border-radius:1em; background:#7AEBC1;
	box-shadow:0 0 .7em #7AEBC1; opacity:0; animation:pp-scan 9s infinite; }
@keyframes pp-scan { 0% { top:10%; opacity:1; } 11% { top:88%; opacity:1; } 22% { top:10%; opacity:1; } 25%, 100% { top:10%; opacity:0; } }
.pp-ok1 { right:4%; bottom:8%; animation:pp-pop1 9s infinite; }
@keyframes pp-pop1 { 0%, 22% { opacity:0; transform:scale(.6); } 26%, 94% { opacity:1; transform:scale(1); } 100% { opacity:0; } }
/* 2 upload documents */
.pp-ph2 { left:8%; top:8%; width:8.2em; height:15.4em; transform:rotate(-5deg); }
.pp-ph2 .pp-bd { background:radial-gradient(circle at 50% 40%, #3B4C63, #16243A); }
.pp-ph2 .pp-bd::after { content:""; position:absolute; inset:0; background:#fff; opacity:0; animation:pp-flash 9s infinite; }
@keyframes pp-flash { 0%, 34% { opacity:0; } 35.5% { opacity:.85; } 39%, 100% { opacity:0; } }
.pp-doc { position:absolute; left:14%; right:14%; top:10%; bottom:10%; display:flex; flex-direction:column; gap:.45em; padding:.7em .6em;
	background:#fff; border-radius:.3em; transform:rotate(-3deg); box-shadow:0 .3em .8em rgba(0,0,0,.3); }
.pp-doc b { width:60%; height:.6em; margin-bottom:.2em; border-radius:.2em; background:#051F48; }
.pp-doc i { height:.32em; border-radius:.2em; background:#D6E5E4; } .pp-doc i.s { width:65%; }
.pp-modes { display:flex; gap:.9em; font-size:.5em; font-weight:700; color:#6D8189; }
.pp-modes span { padding-bottom:.2em; border-bottom:.22em solid transparent; }
.pp-modes .on { color:#051F48; border-color:#7AEBC1; }
.pp-shut { display:grid; place-items:center; width:2em; height:2em; border:.16em solid #051F48; border-radius:50%; }
.pp-shut i { width:1.4em; height:1.4em; border-radius:50%; background:#7AEBC1; }
.pp-files { position:absolute; left:43%; right:6%; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:.55em; }
.pp-file { display:flex; align-items:center; gap:.6em; padding:.55em .7em; background:#fff; border:1px solid #D6E5E4; border-radius:.6em;
	box-shadow:0 .4em 1em rgba(5,31,72,.06); }
.pp-file .ci { flex:none; width:1.7em; height:1.7em; }
.pp-file span { flex:1; min-width:0; }
.pp-file b { display:block; font-size:.8em; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-file u { display:block; height:.3em; margin-top:.35em; border-radius:1em; background:#E7F1EE; overflow:hidden; }
.pp-file s { display:block; width:100%; height:100%; border-radius:1em; background:#17A2AC; transform-origin:left; animation:pp-up1 9s infinite; }
.pp-file em { flex:none; display:grid; place-items:center; width:1.35em; height:1.35em; border-radius:50%; background:#B4F4DC; color:#051F48;
	animation:pp-done1 9s infinite; }
.pp-file em .ck { width:.85em; height:.85em; }
.pp-f2 s { animation-name:pp-up2; } .pp-f2 em { animation-name:pp-done2; }
.pp-f3 s { animation-name:pp-up3; } .pp-f3 em { animation-name:pp-done3; }
@keyframes pp-up1 { 0%, 37% { transform:scaleX(0); } 46%, 97% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
@keyframes pp-up2 { 0%, 41% { transform:scaleX(0); } 50%, 97% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
@keyframes pp-up3 { 0%, 45% { transform:scaleX(0); } 54%, 97% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
@keyframes pp-done1 { 0%, 46% { opacity:0; transform:scale(.4); } 49%, 97% { opacity:1; transform:scale(1); } 100% { opacity:0; } }
@keyframes pp-done2 { 0%, 50% { opacity:0; transform:scale(.4); } 53%, 97% { opacity:1; transform:scale(1); } 100% { opacity:0; } }
@keyframes pp-done3 { 0%, 54% { opacity:0; transform:scale(.4); } 57%, 97% { opacity:1; transform:scale(1); } 100% { opacity:0; } }
/* 3 review and save */
.pp-form { position:absolute; left:7%; right:7%; top:9%; bottom:9%; display:flex; flex-direction:column; gap:.45em; padding:.8em 1em;
	background:#fff; border:1px solid #D6E5E4; border-radius:.7em; box-shadow:0 .8em 2em rgba(5,31,72,.08); }
.pp-fh { display:flex; align-items:center; justify-content:space-between; gap:.5em; margin-bottom:.15em; }
.pp-fh b { font-size:.95em; font-weight:800; }
.pp-ai { display:inline-flex; align-items:center; gap:.3em; padding:.2em .6em; border-radius:2em; background:#F0FAFA; border:1px solid #A8E0E3;
	font-size:.72em; font-weight:700; color:#117985; white-space:nowrap; }
.pp-fr { display:flex; align-items:center; justify-content:space-between; gap:.6em; font-size:.82em; }
.pp-fr span { color:#6D8189; white-space:nowrap; }
.pp-fr b { display:flex; align-items:center; gap:.35em; width:56%; height:1.8em; padding:0 .5em; border:1px solid #7AEBC1; border-radius:.35em;
	background:#F3FCF8; font-weight:700; white-space:nowrap; overflow:hidden; animation:pp-box1 9s infinite; }
.pp-fr s { text-decoration:none; overflow:hidden; animation:pp-type1 9s infinite; }
.pp-fr .sp { margin-left:auto; animation:pp-spk1 9s infinite; }
.pp-r2 b { animation-name:pp-box2; } .pp-r2 s { animation-name:pp-type2; } .pp-r2 .sp { animation-name:pp-spk2; }
.pp-r3 b { animation-name:pp-box3; } .pp-r3 s { animation-name:pp-type3; } .pp-r3 .sp { animation-name:pp-spk3; }
.pp-r4 b { animation-name:pp-box4; } .pp-r4 s { animation-name:pp-type4; } .pp-r4 .sp { animation-name:pp-spk4; }
@keyframes pp-type1 { 0%, 68% { clip-path:inset(0 100% 0 0); } 71%, 97% { clip-path:inset(0 0 0 0); } 100% { clip-path:inset(0 100% 0 0); } }
@keyframes pp-type2 { 0%, 72% { clip-path:inset(0 100% 0 0); } 75%, 97% { clip-path:inset(0 0 0 0); } 100% { clip-path:inset(0 100% 0 0); } }
@keyframes pp-type3 { 0%, 76% { clip-path:inset(0 100% 0 0); } 79%, 97% { clip-path:inset(0 0 0 0); } 100% { clip-path:inset(0 100% 0 0); } }
@keyframes pp-type4 { 0%, 80% { clip-path:inset(0 100% 0 0); } 83%, 97% { clip-path:inset(0 0 0 0); } 100% { clip-path:inset(0 100% 0 0); } }
@keyframes pp-spk1 { 0%, 71% { opacity:0; } 72%, 97% { opacity:1; } 100% { opacity:0; } }
@keyframes pp-spk2 { 0%, 75% { opacity:0; } 76%, 97% { opacity:1; } 100% { opacity:0; } }
@keyframes pp-spk3 { 0%, 79% { opacity:0; } 80%, 97% { opacity:1; } 100% { opacity:0; } }
@keyframes pp-spk4 { 0%, 83% { opacity:0; } 84%, 97% { opacity:1; } 100% { opacity:0; } }
@keyframes pp-box1 { 0%, 68% { border-color:#D6E5E4; background:#FBFDFD; } 71%, 97% { border-color:#7AEBC1; background:#F3FCF8; } 100% { border-color:#D6E5E4; background:#FBFDFD; } }
@keyframes pp-box2 { 0%, 72% { border-color:#D6E5E4; background:#FBFDFD; } 75%, 97% { border-color:#7AEBC1; background:#F3FCF8; } 100% { border-color:#D6E5E4; background:#FBFDFD; } }
@keyframes pp-box3 { 0%, 76% { border-color:#D6E5E4; background:#FBFDFD; } 79%, 97% { border-color:#7AEBC1; background:#F3FCF8; } 100% { border-color:#D6E5E4; background:#FBFDFD; } }
@keyframes pp-box4 { 0%, 80% { border-color:#D6E5E4; background:#FBFDFD; } 83%, 97% { border-color:#7AEBC1; background:#F3FCF8; } 100% { border-color:#D6E5E4; background:#FBFDFD; } }
.pp-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.6em; }
.pp-src { display:inline-flex; align-items:center; gap:.35em; min-width:0; font-size:.72em; color:#117985; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-src .ci { flex:none; width:1.3em; height:1.3em; }
.pp-save { flex:none; padding:.4em 1.2em; border-radius:.35em; background:#051F48; color:#fff; font-size:.78em; font-weight:700; }
.pp-ok3 { right:3%; top:2%; animation:pp-pop3 9s infinite; }
@keyframes pp-pop3 { 0%, 86% { opacity:0; transform:scale(.6); } 89%, 97% { opacity:1; transform:scale(1); } 100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) {
	.pp-card, .pp-a1 *, .pp-a2 *, .pp-a3 *, .pp-ph2 .pp-bd::after { animation:none !important; }
}

/* Patient Cockpit, two app screens (batch 17): batch 5 phone frame, each screen one SVG */
.pc-host.pd-duo { max-width:560px; }
.pd-pair { display:flex; align-items:flex-start; gap:24px; }
.pd-pair .pc-phone { flex:1 1 0; min-width:0; border-radius:44px; }
.pd-pair .pc-screen { border-width:8px; border-radius:40px; }
.pd-svg { display:block; width:100%; height:auto; font-family:'Mulish', sans-serif; }
.pd-time { font-size:15px; font-weight:800; fill:#051F48; }
.pd-title { font-size:19px; font-weight:500; fill:#051F48; }
.pd-ico, .pd-doc { fill:none; stroke:#051F48; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pd-chip rect { fill:none; stroke:#051F48; stroke-width:1.3; }
.pd-chip.on rect { fill:#051F48; }
.pd-chip text { font-size:12px; font-weight:700; fill:#051F48; text-anchor:middle; }
.pd-chip.on text { fill:#fff; }
.pd-unit { font-size:11.5px; font-weight:600; fill:#051F48; }
.pd-grid { stroke:#DCE7E6; stroke-width:1; }
.pd-ax { font-size:12px; fill:#4A5A75; }
.pd-tick { font-size:9.5px; fill:#4A5A75; text-anchor:middle; }
.pd-line { fill:none; stroke:#21A06B; stroke-width:2.2; stroke-linejoin:round; }
.pd-dots circle { fill:#21A06B; }
.pd-bar { fill:#C2EFDA; }
.pd-you { fill:#051F48; }
.pd-youl { stroke:#051F48; stroke-width:1.2; }
.pd-avg { stroke:#051F48; stroke-width:1.2; stroke-dasharray:2 2.5; }
.pd-tgt { stroke:#C27A3A; stroke-width:1.2; stroke-dasharray:2 2.5; }
.pd-lb { font-size:11.5px; font-weight:800; fill:#051F48; text-anchor:middle; }
.pd-lv { font-size:11.5px; font-weight:500; fill:#051F48; }
.pd-lb .pd-lv { text-anchor:middle; }
.pd-lb.pd-o, .pd-lb.pd-o tspan { fill:#C27A3A; }
.pd-lb.pd-o tspan + tspan { font-weight:500; }
.pd-bub { fill:#D6F5E8; }
.pd-bubt { font-size:13px; fill:#051F48; }
.pd-navt { font-size:15px; font-weight:800; fill:#051F48; }
@media (max-width:600px) { .pd-pair { gap:12px; } .pd-pair .pc-phone { border-radius:30px; padding:3px; } .pd-pair .pc-screen { border-width:5px; border-radius:27px; } }

/* ---------- AI Medical Coding page (batch 18) ----------
   mc- screens of the Medical Coding module in the batch 6 app frame (em of its 14px type),
   mh- hero card, ma- card illustrations. Status and confidence colours as in the app. */
.mc-app .cx-main { position:relative; }
.mc-app .ci-tag { width:1.1em; height:1.1em; }
.mc-st { display:flex; align-items:center; justify-content:space-between; gap:.4em; height:1.75em; padding:0 .6em; border-radius:3px;
	font-size:.8em; white-space:nowrap; }
.mc-st .ci { width:.75em; height:.75em; flex:none; }
.mc-u { background:#F8F8F8; color:#909090; border:1px solid #E6E6E6; } .mc-p { background:#FDF2DD; color:#A36A00; }
.mc-a { background:#D5F0E6; color:#17AC6B; } .mc-d { background:#C4E7EA; color:#117985; } .mc-r { background:#FBE5E0; color:#B42F4F; }
.mc-ring { display:inline-grid; place-items:center; width:1.9em; height:1.9em; border-radius:50%; border:2px solid #D5D5D5; color:#052049; background:#fff; flex:none; }
.mc-ring .ci-bot { width:1em; height:1em; }
.mc-ring.mc-h { border-color:#17AC6B; } .mc-ring.mc-m { border-color:#FFB400; } .mc-ring.mc-l { border-color:#E02E34; }
.mc-avt { width:2.7em; height:2.7em; font-size:.7em; }
.mc-card { padding:1.2em 1.4em 1em; height:calc(100% - 3.2em); overflow:hidden; }
.mc-rpp { display:flex; align-items:center; gap:.5em; padding:0 .9em; border:1px solid #DDD; border-radius:3px; color:#333; white-space:nowrap; }
.mc-rpp .ci { width:.7em; }
.mc-filters { display:flex; align-items:flex-end; gap:.7em; margin:1em 0 .9em; }
.mc-f { display:flex; flex-direction:column; gap:.25em; }
.mc-f small { font-size:.78em; color:#666; }
.mc-f b { display:flex; align-items:center; justify-content:space-between; gap:.6em; min-width:7.4em; height:2.3em; padding:0 .7em;
	border:1px solid #CCC; border-radius:3px; font-weight:400; color:#333; font-size:.9em; background:#fff; }
.mc-f b .ci { width:.65em; color:#777; }
.mc-f.on b { border-color:var(--t); background:var(--t); color:#fff; } .mc-f.on b .ci { color:#fff; }
.mc-clear { color:var(--t); font-size:.9em; padding-bottom:.55em; white-space:nowrap; }
.mc-table { font-size:.92em; }
.cx-tr.mc-tr { grid-template-columns:1.6em 15.5em 7.4em 8.6em 15em 5.6em 3.6em 5.4em 8.6em 9em; height:3.75em; gap:.9em; }
.cx-tr.mc-th, .mc-table .cx-th { height:3.1em; font-weight:700; }
.mc-tr.mc-sel { background:#F2FAFA; }
.mc-vb { display:flex; align-items:center; gap:.45em; }
.mc-vb > span { overflow:hidden; text-overflow:ellipsis; } .mc-vb > em { flex:none; }
.mc-cut { display:inline-flex; } .mc-cut .ci { width:1em; height:1em; }
.mc-cut.mc-rec { color:#FFB400; } .mc-cut.mc-child { color:rgba(5,32,73,.75); }
.mc-sic, .mc-code { display:flex; flex-direction:column; line-height:1.25; overflow:hidden; }
.mc-sic b, .mc-code b { font-weight:400; overflow:hidden; text-overflow:ellipsis; }
.mc-code b { font-weight:700; }
.mc-sic small, .mc-code small { color:#8A97A4; font-size:.88em; overflow:hidden; text-overflow:ellipsis; }
.mc-dash { color:#8A97A4; }
.mc-upd { color:#555; }
.cx-cb.mc-on { background:var(--t); border-color:var(--t); color:#fff; display:grid; place-items:center; }
.cx-cb.mc-on .ck { width:.9em; height:.9em; }
.mc-bulk { display:flex; justify-content:space-between; align-items:center; background:#EAF6F7; border:1px solid #BFE6E8; border-radius:3px;
	padding:.55em .9em; margin-bottom:.7em; font-size:.92em; }
.mc-bulk > span:first-child { display:flex; gap:1em; } .mc-bulk u { color:var(--t); text-decoration:none; }
.mc-bb { display:flex; align-items:center; gap:.5em; white-space:nowrap; }
.mc-bb .mc-st { font-size:.86em; padding:0 .8em; }
/* detail panel (560 of 1100 app px) */
.mc-panel { position:absolute; top:0; right:0; bottom:0; width:40em; background:#fff; box-shadow:-.6em 0 1.6em rgba(5,31,72,.16);
	padding:1.3em 1.5em; display:flex; flex-direction:column; gap:.75em; font-size:.92em; color:#052049; overflow:hidden; }
.mc-ph { display:flex; justify-content:space-between; align-items:flex-start; gap:1em; }
.mc-ph small, .mc-orig small, .mc-ctx small, .mc-hier small { display:block; color:#8A97A4; font-size:.86em; }
.mc-ph h4 { margin:.15em 0 0; font-size:1.35em; font-weight:700; color:#052049; line-height:1.25; font-family:inherit; }
.mc-flag { display:flex; align-items:center; gap:.4em; border:1px solid var(--t); color:var(--t); border-radius:3px; padding:.4em .8em; white-space:nowrap; }
.mc-flag .ci { width:.95em; height:.95em; }
.mc-orig { background:#F7F9FA; border:1px solid #E6EAEE; border-radius:3px; padding:.6em .8em; }
.mc-orig p { font-size:.95em; line-height:1.35; }
.mc-ctx { display:grid; grid-template-columns:1fr 1fr; gap:.55em 1.2em; border-top:1px solid #EEE; padding-top:.75em; }
.mc-ctx b { font-weight:600; font-size:.95em; }
.mc-nav { display:flex; align-items:center; gap:.4em; color:var(--t); }
.mc-nav .ci { width:.9em; }
.mc-codeh { display:flex; align-items:center; gap:.8em; border-top:1px solid #EEE; padding-top:.8em; }
.mc-codeh > b { display:flex; align-items:center; gap:.35em; font-size:1.05em; margin-right:auto; }
.mc-info { color:#8A97A4; display:inline-flex; } .mc-info .ci { width:.95em; height:.95em; }
.mc-ver { color:#8A97A4; font-size:.86em; white-space:nowrap; }
.mc-codeh .mc-st { flex:none; min-width:9em; }
.mc-codeh .mc-ver { overflow:hidden; text-overflow:ellipsis; min-width:0; }
.mc-hier { border:1px solid #DDE7E6; border-left:.3em solid #17A2AC; border-radius:3px; background:#F4FBFA; padding:.6em .9em; display:grid; gap:.3em; }
.mc-hier > div { position:relative; display:grid; grid-template-columns:3.4em 1fr; align-items:baseline; }
.mc-hier em { position:absolute; right:0; top:0; color:#8A97A4; display:inline-flex; } .mc-hier em .ci { width:.85em; }
.mc-q { display:flex; gap:1em; border-top:1px solid #EEE; padding-top:.8em; } .mc-q span { color:#8A97A4; }
.mc-sibh { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #EEE; padding-top:.8em; }
.mc-sibh b { display:flex; align-items:center; gap:.4em; } .mc-sibh .ci { width:.85em; height:.85em; }
.mc-sibh u { color:#B42F4F; text-decoration:none; font-size:.92em; }
.mc-sib { display:flex; justify-content:space-between; align-items:center; border:1px solid #E6EAEE; border-radius:3px; padding:.45em .8em; }
.mc-sib span:first-child { display:flex; flex-direction:column; } .mc-sib small { color:#8A97A4; font-size:.85em; }
.mc-sib .mc-st { font-size:.75em; }
.mc-newsplit { display:flex; gap:.5em; } .mc-newsplit em { flex:1; font-style:normal; color:#999; border:1px solid #DDD; border-radius:3px; padding:.4em .7em; }
.mc-newsplit b { border:1px solid var(--t); color:var(--t); border-radius:3px; padding:.4em .8em; font-weight:600; }
.mc-open { margin-top:auto; display:block; text-align:center; background:#2F7A73; color:#fff; border-radius:3px; padding:.75em; font-weight:700; }
/* study setup */
.mc-set { height:calc(100% - 3.2em); }
.mc-info-box { display:flex; align-items:center; gap:.5em; background:#EAF6F7; border:1px solid #BFE6E8; color:#117985; border-radius:3px;
	padding:.65em .9em; margin-bottom:1.2em; }
.mc-info-box .ci { width:.95em; height:.95em; } .mc-info-box .ci-caret { margin-left:auto; width:.7em; }
.mc-sec { border:1px solid #E6EAEE; border-radius:3px; padding:1em 1.2em; margin-bottom:1em; }
.mc-sec h5 { display:flex; align-items:center; gap:.6em; margin:0 0 .9em; font-size:1.1em; font-weight:700; color:#052049; font-family:inherit; }
.mc-n { display:grid; place-items:center; width:1.7em; height:1.7em; border-radius:50%; background:var(--t); color:#fff; font-size:.8em; line-height:1; }
.mc-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.2em; }
.mc-grid3 label { display:flex; flex-direction:column; gap:.4em; margin:0; font-weight:400; color:#333; }
.mc-grid3 label:first-child { flex-direction:row; flex-wrap:wrap; align-items:center; gap:.4em .6em; }
.mc-grid3 label:first-child small { flex-basis:100%; }
.mc-grid3 small { color:#666; font-size:.86em; }
.mc-grid3 .cx-sel2 .ci, .mc-frow .cx-sel2 .ci { margin-left:auto; width:.7em; color:#777; }
.mc-tog { position:relative; width:2.6em; height:1.4em; border-radius:1em; background:var(--t); }
.mc-tog i { position:absolute; right:.15em; top:.15em; width:1.1em; height:1.1em; border-radius:50%; background:#fff; }
.mc-frow { display:grid; grid-template-columns:1fr 1fr 2.4em; gap:.8em; align-items:center; margin-bottom:.55em; }
.mc-frh small { color:#666; font-size:.86em; }
.mc-del { display:grid; place-items:center; height:2.4em; border:1px solid #F0C9C9; border-radius:3px; color:#E57373; }
.mc-del .ci { width:.8em; }
.mc-add { display:inline-flex; align-items:center; gap:.4em; color:var(--t); border:1px solid var(--t); border-radius:3px; padding:.45em .9em; margin-top:.3em; }
.mc-add .ci { width:.75em; }

/* hero card: verbatim, AI, code with confidence, approved (9 s loop) */
.mh-host { margin:0 auto; width:100%; max-width:520px; container-type:inline-size; }
.mh { position:relative; font-size:min(15px, 3.2cqw); font-family:'Mulish', sans-serif; color:#052049; padding:1em 0 1.5em; }
.mh .ci, .mh .ck, .mh .sp { width:1em; height:1em; flex:none; }
.mh-card { position:relative; background:#fff; border-radius:1em; box-shadow:0 1.6em 3em rgba(5,31,72,.14), 0 .3em .8em rgba(5,31,72,.06); }
.mh-v { width:78%; padding:1em 1.3em; display:flex; flex-direction:column; gap:.25em; }
.mh-v small, .mh-l small { color:#8A97A4; font-size:.82em; }
.mh-v b { font-size:1.15em; }
.mh-v span { font-size:.85em; color:#5B6B86; }
.mh-flow { display:flex; align-items:center; gap:.6em; margin:.6em 0 .6em 2.4em; height:2.4em; }
.mh-flow i { width:2px; height:100%; background:repeating-linear-gradient(#17A2AC 0 4px, transparent 4px 8px); }
.mh-flow i + span + i { display:none; }
.mh-ai { display:inline-flex; align-items:center; gap:.45em; background:#051F48; color:#fff; border-radius:2em; padding:.35em .85em; font-size:.85em; font-weight:700;
	animation:mh-ai 9s infinite; }
.mh-ai .sp { color:#7AEBC1; }
.mh-c { margin-left:12%; padding:1.1em 1.3em 1em; }
.mh-top { display:flex; align-items:center; gap:.6em; margin-bottom:.7em; }
.mh-top b { font-size:1.05em; }
.mh-conf { margin-left:auto; font-style:normal; font-size:.8em; font-weight:700; color:#17AC6B; background:#E8F7F0; border-radius:2em; padding:.25em .7em;
	animation:mh-in 9s infinite; }
.mh-top .mc-ring { width:2.1em; height:2.1em; animation:mh-in 9s infinite; }
.mh-h { border:1px solid #DDE7E6; border-left:.3em solid #17A2AC; border-radius:.4em; background:#F4FBFA; padding:.6em .9em; display:grid; gap:.3em; }
.mh-l { display:grid; grid-template-columns:3.6em 1fr; align-items:baseline; font-size:.92em; opacity:0; }
.mh-l1 { animation:mh-l1 9s infinite; } .mh-l2 { animation:mh-l2 9s infinite; } .mh-l3 { animation:mh-l3 9s infinite; }
.mh-l4 { animation:mh-l4 9s infinite; } .mh-l5 { animation:mh-l5 9s infinite; }
.mh-foot { position:relative; display:flex; align-items:center; gap:.6em; margin-top:.9em; min-height:2.2em; }
.mh-ver { color:#8A97A4; font-size:.8em; margin-right:auto; }
.mh-foot .mc-st { font-size:.85em; height:2em; min-width:9.5em; }
.mh-s1 { animation:mh-s1 9s infinite; }
.mh-s2 { position:absolute; right:0; gap:.35em; justify-content:flex-start; opacity:0; animation:mh-s2 9s infinite; }
.mh-cur { position:absolute; right:1.4em; bottom:-.6em; width:1.3em; opacity:0; animation:mh-cur 9s infinite; }
.mh-cur .cur { width:1.3em; height:1.6em; }
@keyframes mh-ai { 0%, 8% { opacity:.35; transform:scale(.92); } 14%, 100% { opacity:1; transform:none; } }
@keyframes mh-in { 0%, 14% { opacity:0; } 20%, 100% { opacity:1; } }
@keyframes mh-l1 { 0%, 18% { opacity:0; transform:translateY(.4em); } 24%, 100% { opacity:1; transform:none; } }
@keyframes mh-l2 { 0%, 23% { opacity:0; transform:translateY(.4em); } 29%, 100% { opacity:1; transform:none; } }
@keyframes mh-l3 { 0%, 28% { opacity:0; transform:translateY(.4em); } 34%, 100% { opacity:1; transform:none; } }
@keyframes mh-l4 { 0%, 33% { opacity:0; transform:translateY(.4em); } 39%, 100% { opacity:1; transform:none; } }
@keyframes mh-l5 { 0%, 38% { opacity:0; transform:translateY(.4em); } 44%, 100% { opacity:1; transform:none; } }
@keyframes mh-cur { 0%, 50% { opacity:0; transform:translate(2em, 1.5em); } 58%, 66% { opacity:1; transform:none; } 72%, 100% { opacity:0; transform:none; } }
@keyframes mh-s1 { 0%, 62% { opacity:1; transform:none; } 64% { transform:scale(.95); } 68%, 100% { opacity:0; } }
@keyframes mh-s2 { 0%, 68% { opacity:0; transform:scale(.9); } 73%, 100% { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
	.mh-ai, .mh-conf, .mh-top .mc-ring, .mh-l, .mh-cur, .mh-s1, .mh-s2 { animation:none; }
	.mh-l { opacity:1; } .mh-s1 { display:none; } .mh-s2 { position:static; opacity:1; }
}
@media (max-width:1023px) { .mc-hero #header { margin-top:32px; } }

/* card illustrations */
.ma { position:absolute; inset:0; padding:1.6em 1.8em; display:flex; flex-direction:column; justify-content:center; gap:.8em; color:#052049; font-family:'Mulish', sans-serif; }
.ma .ci { width:1em; height:1em; flex:none; }
.ma .mc-ring { width:2em; height:2em; }
.ma-form, .ma-row, .ma-sug, .ma-parent, .ma-kids > div { background:#fff; border-radius:.7em; box-shadow:0 .6em 1.4em rgba(5,31,72,.1); padding:.8em 1em; }
.ma-form small, .ma-row small { display:block; color:#8A97A4; font-size:.85em; }
.ma-form label { display:block; font-weight:700; margin:.3em 0; font-size:.95em; }
.ma-in { position:relative; border:1px solid #CCD6DD; border-radius:.35em; padding:.45em .7em; font-size:.92em; line-height:1.35; }
.ma-in i { display:inline-block; width:1px; height:1em; background:#052049; vertical-align:-.15em; margin-left:1px; animation:ma-blink 1s steps(1) infinite; }
.ma-arrow { display:flex; justify-content:center; height:1.2em; } .ma-arrow i { width:2px; background:repeating-linear-gradient(#17A2AC 0 4px, transparent 4px 8px); }
.ma-q { align-self:center; display:inline-flex; align-items:center; gap:.45em; background:#051F48; color:#fff; border-radius:2em; padding:.4em .9em; font-weight:700; font-size:.9em; }
.ma-q .ci-tag { color:#7AEBC1; }
.ma-row b { font-size:.95em; }
.ma-sug { display:flex; align-items:center; gap:.7em; border-left:.3em solid #17A2AC; }
.ma-sug span:last-child { display:flex; flex-direction:column; } .ma-sug small { color:#8A97A4; font-size:.85em; }
.ma-rings { display:flex; justify-content:space-between; gap:.5em; }
.ma-rings > span { display:flex; align-items:center; gap:.45em; font-size:.88em; font-weight:700; background:#fff; border-radius:2em; padding:.25em .7em .25em .3em; }
.ma-rings .mc-ring { width:1.8em; height:1.8em; }
.ma-parent { display:flex; align-items:center; gap:.55em; align-self:center; }
.ma-parent .ci-cut { color:#FFB400; width:1.15em; height:1.15em; }
.ma-split { position:relative; height:1.6em; margin:0 22%; border:2px dashed #17A2AC; border-bottom:0; border-radius:.6em .6em 0 0; }
.ma-split i { display:none; }
.ma-kids { display:grid; grid-template-columns:1fr 1fr; gap:.8em; }
.ma-kids > div { display:flex; flex-direction:column; gap:.2em; border-top:.25em solid #17AC6B; }
.ma-kids small { color:#5B6B86; font-size:.8em; }
@keyframes ma-blink { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .ma-in i { animation:none; } }

/* ---------- "Audited and validated" compliance panel (batch 19) ----------
   Replaces the four-checkmark image in the click-through; sizes in em of a font that follows the panel width. */
.rc-host { width:100%; max-width:720px; container-type:inline-size; }
.rc { font-size:min(14px, calc(100cqw / 52)); font-family:'Mulish', sans-serif; color:#051F48; text-align:left;
	display:grid; grid-template-columns:1fr 17.5em; gap:1.1em 1.8em; padding:1.6em 1.9em 1.1em; border-radius:.9em;
	background:linear-gradient(160deg,#F3FBF8 0%,#E2F3F0 100%); box-shadow:0 1.6em 3.2em rgba(5,31,72,.12); }
.rc h3 { margin:0; font-family:'Montserrat', sans-serif; font-size:1.18em; line-height:1.25; font-weight:700; color:#051F48; }
.rc p { margin:.3em 0 0 !important; font-size:.92em !important; line-height:1.45 !important; color:#2B3A55 !important; }
.rc-items { display:flex; flex-direction:column; gap:1em; }
.rc-item { display:grid; grid-template-columns:2.6em 1fr; gap:1em; align-items:start; }
.rc-ck { display:grid; place-items:center; width:2.4em; height:2.4em; border-radius:50%; background:#4FA3A5; flex:none;
	box-shadow:.3em .28em 0 #B4F4DC; }
.rc-ck svg { width:60%; height:60%; }
.rc-norms { grid-column:1 / -1; }
.rc-norms ul { list-style:none; margin:.6em 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.5em 1.6em; }
.rc-norms li { display:flex; align-items:center; gap:.7em; font-size:.92em; line-height:1.35; }
.rc-norms li .rc-ck { width:1.6em; height:1.6em; box-shadow:.2em .2em 0 #B4F4DC; }
.rc-norms li b { font-weight:800; }
.rc sup { font-size:.62em; line-height:0; vertical-align:super; position:static; }
.rc-box { align-self:start; background:#fff; border:1px solid #CFDCDB; border-radius:.6em; padding:1.1em 1.2em 1.2em; box-shadow:0 .8em 1.8em rgba(5,31,72,.08); }
.rc-box h3 { font-size:1em; padding-bottom:.6em; border-bottom:.18em solid #051F48; }
.rc-bx { display:flex; flex-direction:column; gap:.6em; margin-top:.7em; }
.rc-box p { font-size:.82em !important; }
.rc-5 { display:grid; grid-template-columns:auto 1fr; gap:.8em; align-items:center; border-top:1px solid #E1EBEA; padding-top:.7em; }
.rc-5 > b { font-family:'Montserrat', sans-serif; font-size:2.6em; line-height:1; font-weight:800; color:#051F48; }
.rc-5 p { margin:0 !important; }
.rc-fn { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.2em 1.2em; margin:0 !important; font-size:.72em !important; color:#5B6B86 !important; }
@container (max-width:560px) {
	.rc { font-size:14px; grid-template-columns:1fr; padding:1.4em 1.2em; }
	.rc-norms ul { grid-template-columns:1fr; }
}

/* ---------- AI Study Configurator page (batch 20) ----------
   sx- screens of the Climedo Co-Pilot workspace in Climedo's colours (teal bar with the Climedo mark, navy
   thread list; study navy, step teal, form green, field slate, ePRO amber, SAE red), 1100 x 690 app px like
   the cx- frames.
   sh- hero card, sg- steps and tiles. */
.sx-app { --b:#17A2AC; --bs:#117985; --bsoft:#E2F6F7; --ink:#051F48; --ink2:#35404F; --mu:#6D8189; --ln:#E1EBEA; --ln2:#D3E3E5;
	--ok:#17AC6B; --oks:#D5F0E6; --wa:#A36A00; --was:#FDF2DD; --bad:#D64545; --bads:#FBEAEA;
	font-size:calc(100cqw / 78.57); position:relative; display:grid; grid-template-columns:12.5em minmax(0,1fr) 21em;
	grid-template-rows:3.5em minmax(0,1fr); aspect-ratio:1100 / 690; overflow:hidden; background:#F3F7F8; border-radius:.7em;
	font-family:'Mulish', 'Muli', sans-serif; color:var(--ink); line-height:1.3; text-align:left;
	box-shadow:0 2.2em 4.4em rgba(5,31,72,.18), 0 .4em 1em rgba(5,31,72,.08); }
.sx-app.sx-wide { grid-template-columns:12.5em minmax(0,1fr); }
.sx-app * { box-sizing:border-box; }
.sx-app p { margin:0; line-height:1.35; }
/* the theme's p colour is !important; each mock paragraph names its own */
.sx-app p { color:var(--ink2) !important; }
.sx-app .ci { width:1em; height:1em; flex:none; }
.sx-app .cur { width:1.2em; height:1.5em; }
.sx-top { grid-column:1 / -1; display:flex; align-items:center; gap:.7em; padding:0 1.3em 0 0; background:var(--b); color:#fff; }
.sx-mark { min-width:12.5em; height:100%; display:flex; align-items:center; gap:.7em; padding:0 1.2em 0 1.1em; background:rgba(0,0,0,.06); white-space:nowrap; }
.sx-mark .mk { width:1.7em; height:1.7em; flex:none; }
.sx-mark .mk path:first-child { fill:#fff; } .sx-mark .mk path { stroke:#fff; }
.sx-brand, .sx-who { display:flex; flex-direction:column; line-height:1.2; }
.sx-brand b { font-size:.95em; font-weight:800; } .sx-brand small, .sx-who small { font-size:.72em; color:rgba(255,255,255,.92); font-weight:600; }
.sx-who { margin-left:auto; text-align:right; } .sx-who b { font-size:.8em; }
.sx-avatar { width:2em; height:2em; border-radius:50%; background:rgba(255,255,255,.2); color:#fff; display:grid; place-items:center; font-size:.78em; font-weight:800; }
.sx-ghost { border:1px solid var(--ln2); border-radius:.5em; padding:.35em .8em; font-size:.8em; font-weight:700; color:var(--ink2); background:#fff; white-space:nowrap; }
.sx-top .sx-ghost { background:transparent; border-color:rgba(255,255,255,.6); color:#fff; }
.sx-threads { background:var(--ink); color:#fff; padding:.9em .7em; display:flex; flex-direction:column; gap:.35em; min-width:0; overflow:hidden; }
.sx-new { display:flex; align-items:center; justify-content:center; gap:.4em; background:var(--b); color:#fff; border-radius:.6em; padding:.6em; font-weight:800; font-size:.85em; margin-bottom:.5em; }
.sx-tgrp { font-size:.62em; font-weight:800; letter-spacing:.06em; color:#8FA3BF; margin:.6em .3em .1em; }
.sx-th { display:flex; flex-direction:column; gap:.25em; padding:.5em .6em; border-radius:.5em; min-width:0; }
.sx-th b { font-size:.78em; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sx-th span { display:flex; align-items:center; gap:.4em; font-size:.66em; color:#C6CFDC; white-space:nowrap; overflow:hidden; }
.sx-th.on { background:rgba(255,255,255,.12); box-shadow:inset .2em 0 0 var(--b); } .sx-th.on b { color:#fff; }
.sx-tag { font-style:normal; font-size:.9em; font-weight:800; border-radius:2em; padding:.05em .55em; flex:none; }
.sx-protocol { background:var(--was); color:var(--wa); } .sx-specs { background:var(--bsoft); color:var(--bs); }
.sx-import { background:#E2F6F7; color:#117985; }
.sx-center { padding:1em 1.2em; min-width:0; overflow:hidden; display:flex; flex-direction:column; gap:.8em; }
.sx-right { background:#fff; border-left:1px solid var(--ln); padding:1em; display:flex; flex-direction:column; gap:.7em; min-width:0; overflow:hidden; position:relative; }
.sx-chead { display:flex; align-items:center; justify-content:space-between; gap:1em; }
.sx-chead > div:first-child { display:flex; align-items:center; gap:.6em; min-width:0; }
.sx-chead > div:first-child b { font-size:1.1em; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sx-chead .sx-tag { font-size:.68em; }
.sx-chips { display:flex; gap:.4em; flex:none; }
.sx-chip { font-size:.68em; font-weight:700; color:var(--ink2); background:#fff; border:1px solid var(--ln2); border-radius:2em; padding:.25em .7em; white-space:nowrap; }
.sx-pill { font-size:.68em; font-weight:800; border-radius:2em; padding:.25em .75em; white-space:nowrap; }
.sx-pill.sx-ok { background:var(--oks); color:#0F7A4B; } .sx-pill.sx-run { background:var(--bsoft); color:var(--bs); }
.sx-btn { display:inline-flex; align-items:center; gap:.4em; background:var(--b); color:#fff; border-radius:.55em; padding:.5em .95em; font-size:.8em; font-weight:800; white-space:nowrap; position:relative; }
.sx-bar { display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid var(--ln); border-radius:.8em; padding:.5em .6em .5em 1em; }
.sx-bar b { font-size:.85em; }
/* graph */
.sx-canvas { position:relative; background:#fff; border:1px solid var(--ln); border-radius:.9em; padding:.7em .9em .6em; }
.sx-cols { position:relative; height:1.3em; }
.sx-cols span { position:absolute; top:0; }
.sx-cols i { font-style:normal; font-size:.6em; font-weight:800; letter-spacing:.08em; color:var(--mu); }
.sx-plane { position:relative; width:41em; height:27.6em; }
.sx-edges { position:absolute; left:0; top:0; width:41em; height:27.6em; overflow:visible; }
.sx-e { fill:none; stroke:#CBDCDD; stroke-width:.07; } .sx-e.on { stroke:#6CC5CB; stroke-width:.09; }
.sx-rule { fill:none; stroke:var(--wa); stroke-width:.08; stroke-dasharray:.25 .2; }
.sx-node { position:absolute; height:3em; display:flex; align-items:center; gap:.45em; padding:0 .5em; border-radius:.55em; background:#fff;
	border:1px solid var(--ln2); border-left-width:.22em; box-shadow:0 .2em .5em rgba(12,23,38,.05); }
.sx-ni { width:1.65em; height:1.65em; border-radius:.45em; display:grid; place-items:center; flex:none; color:#fff; }
.sx-ni .ci { width:.95em; height:.95em; }
.sx-nt { display:flex; flex-direction:column; min-width:0; line-height:1.15; }
.sx-nt i { font-style:normal; font-size:.5em; font-weight:800; letter-spacing:.06em; }
.sx-nt b { font-size:.72em; font-weight:800; line-height:1.1; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.sx-nt small { font-size:.58em; color:var(--mu); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sx-n-study { background:#051F48; border-color:#051F48; color:#fff; } .sx-n-study .sx-ni { background:rgba(255,255,255,.16); }
.sx-n-study small, .sx-n-study i { color:#B4F4DC; }
.sx-n-step { background:#EAF6F7; border-color:#BFE6E8; border-left-color:var(--b); } .sx-n-step .sx-ni { background:var(--b); } .sx-n-step i { color:var(--bs); }
.sx-n-epro { background:#FFF8E6; border-color:#F7E1A8; border-left-color:#E0A100; } .sx-n-epro .sx-ni { background:#E0A100; } .sx-n-epro i { color:#8A5A00; }
.sx-n-sae { background:#FBEFEF; border-color:#F3CACA; border-left-color:#E57373; } .sx-n-sae .sx-ni { background:#E57373; } .sx-n-sae i { color:#B42F4F; }
.sx-n-form { background:#E9FBF4; border-color:#B4F4DC; border-left-color:#17AC6B; } .sx-n-form .sx-ni { background:#17AC6B; } .sx-n-form i { color:#0F7A4B; }
.sx-n-field { background:#F2F5F9; border-color:#D8E0EA; border-left-color:#5B6B86; } .sx-n-field .sx-ni { background:#5B6B86; } .sx-n-field i { color:#3E4C66; }
.sx-node.on { box-shadow:0 0 0 .18em rgba(23,162,172,.3), 0 .4em 1em rgba(12,23,38,.1); border-color:var(--bs); }
.sx-gate { position:absolute; transform:translateY(-50%); }
.sx-gate i { display:flex; align-items:center; gap:.3em; font-style:normal; font-size:.6em; font-weight:800; color:var(--wa); background:var(--was);
	border-radius:2em; padding:.15em .55em; }
.sx-why { position:absolute; width:10.2em; background:var(--ink); color:#fff; border-radius:.6em; padding:.6em .75em; z-index:2;
	box-shadow:0 .8em 1.6em rgba(12,23,38,.25); display:flex; flex-direction:column; gap:.3em; }
.sx-why small { font-size:.62em; font-weight:800; color:#7AEBC1; }
.sx-why b { font-size:.74em; }
.sx-why p { font-size:.66em; line-height:1.35; color:#DBE4EE !important; }
.sx-why span { display:flex; align-items:center; gap:.3em; font-size:.6em; color:#b8c4d3; }
.sx-legend { display:flex; gap:1.2em; margin-top:.3em; font-size:.62em; color:var(--mu); font-weight:700; }
.sx-legend span { display:flex; align-items:center; gap:.4em; }
.sx-legend i { width:1.6em; height:0; border-top:.14em solid #6CC5CB; } .sx-legend i.sx-l2 { border-top:.14em dashed var(--wa); }
/* right panel */
.sx-rh { display:flex; align-items:center; justify-content:space-between; }
.sx-rh b { display:flex; align-items:center; gap:.4em; font-size:.92em; font-weight:800; }
.sx-hist { color:var(--mu); display:flex; }
.sx-rtabs { display:flex; gap:.2em; border-bottom:1px solid var(--ln); }
.sx-rtabs span { font-size:.64em; font-weight:700; color:var(--mu); padding:.45em .4em; white-space:nowrap; }
.sx-rtabs span.on { color:var(--bs); box-shadow:inset 0 -.18em 0 var(--b); }
.sx-rtabs em { font-style:normal; background:var(--was); color:var(--wa); border-radius:2em; padding:0 .45em; }
.sx-feas { display:flex; gap:.55em; border:1px solid var(--ln); border-radius:.6em; padding:.55em .6em; }
.sx-feas > span { width:1.5em; height:1.5em; border-radius:50%; display:grid; place-items:center; flex:none; }
.sx-feas > span .ci { width:.85em; height:.85em; }
.sx-feas i { font-style:normal; font-size:.62em; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.sx-feas p { font-size:.74em; line-height:1.35; color:var(--ink2); margin-top:.15em; }
.sx-v-ok > span { background:var(--oks); color:var(--ok); } .sx-v-ok i { color:var(--ok); }
.sx-v-part > span { background:var(--was); color:var(--wa); } .sx-v-part i { color:var(--wa); }
.sx-v-no > span { background:var(--bads); color:var(--bad); } .sx-v-no i { color:var(--bad); }
.sx-chatbox { margin-top:auto; display:flex; align-items:center; gap:.5em; border:1px solid var(--ln2); border-radius:.7em; padding:.65em .75em; color:var(--mu); font-size:.78em; }
.sx-chatbox span { flex:1; } .sx-chatbox .ci:last-child { color:var(--b); }
/* specs */
.sx-files { display:flex; flex-wrap:wrap; gap:.5em; }
.sx-file { display:flex; align-items:center; gap:.45em; background:#fff; border:1px solid var(--ln2); border-radius:.55em; padding:.4em .7em; font-size:.74em; font-weight:700; }
.sx-file .ci { color:#1d7a46; }
.sx-prog { background:#fff; border:1px solid var(--ln); border-radius:.9em; padding:.8em 1em; display:flex; flex-direction:column; gap:.55em; }
.sx-p { display:flex; align-items:center; gap:.7em; font-size:.82em; color:var(--mu); }
.sx-p > span { width:1.5em; height:1.5em; border-radius:50%; display:grid; place-items:center; flex:none; border:1.5px solid var(--ln2); }
.sx-p > span .ci { width:.8em; height:.8em; }
.sx-p-done { color:var(--ink); } .sx-p-done > span { background:var(--oks); border-color:var(--oks); color:var(--ok); }
.sx-p-now { color:var(--bs); font-weight:800; } .sx-p-now > span { border-color:var(--b); }
.sx-spin { width:.8em; height:.8em; border-radius:50%; border:2px solid var(--bsoft); border-top-color:var(--b); animation:sx-spin 1s linear infinite; }
@keyframes sx-spin { to { transform:rotate(360deg); } }
.sx-hitl { display:flex; flex-direction:column; gap:.6em; border:1px solid #BFE6E8; background:#F0FAFA; border-radius:.9em; padding:.9em; position:relative; }
.sx-kick { display:flex; align-items:center; gap:.35em; font-size:.66em; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--bs); }
.sx-hitl > b { font-size:.9em; line-height:1.3; }
.sx-hitl > p { font-size:.72em; color:var(--ink2); line-height:1.35; }
.sx-bucket { background:#fff; border:1px solid var(--ln2); border-radius:.6em; padding:.55em .6em; display:flex; flex-direction:column; gap:.45em; }
.sx-bucket small { font-size:.62em; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--mu); }
.sx-bucket > div { display:flex; flex-wrap:wrap; gap:.3em; }
.sx-bucket u { align-self:flex-start; text-decoration:none; font-size:.66em; font-weight:700; color:var(--bs); }
.sx-fchip { font-size:.66em; font-weight:700; background:#E9FBF4; color:#0F7A4B; border-radius:2em; padding:.2em .6em; white-space:nowrap; }
.sx-fchip.sx-fsae { background:#FBEFEF; color:#B42F4F; }
.sx-hbtns { display:flex; gap:.5em; }
.sx-hitl .sx-cur { position:absolute; left:2.4em; bottom:-.2em; }
/* create plan and write-back plan */
.sx-plan { background:#fff; border:1px solid var(--ln); border-radius:.9em; padding:1em 1.2em; display:flex; flex-direction:column; gap:.7em; min-height:0; flex:1; overflow:hidden; }
.sx-ph { display:flex; align-items:flex-start; justify-content:space-between; gap:1em; }
.sx-ph b { font-size:1.05em; font-weight:800; } .sx-ph p { font-size:.74em; color:var(--mu) !important; margin-top:.2em; }
.sx-go { flex:none; }
.sx-go .sx-cur { position:absolute; right:-.4em; bottom:-1.1em; }
.sx-ptabs { display:flex; gap:.2em; border-bottom:1px solid var(--ln); }
.sx-ptabs span { font-size:.76em; font-weight:700; color:var(--mu); padding:.5em .7em; white-space:nowrap; }
.sx-ptabs span.on { color:var(--bs); box-shadow:inset 0 -.18em 0 var(--b); }
.sx-pgrid { display:grid; grid-template-columns:17em minmax(0,1fr); gap:1.1em; min-height:0; }
.sx-will { background:#F0FAFA; border:1px solid #CDEDEF; border-radius:.7em; padding:.8em .9em; align-self:start; }
.sx-phase { list-style:none; margin:0 0 .8em; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.4em; }
.sx-phase li { display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid var(--ln); border-radius:.5em; padding:.35em .5em; }
.sx-phase b { font-size:1.15em; line-height:1.1; color:var(--ink); } .sx-phase span { font-size:.62em; font-weight:700; color:var(--mu); }
.sx-story { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45em; }
.sx-story li { display:flex; align-items:center; gap:.5em; font-size:.76em; font-weight:700; }
.sx-story i { font-style:normal; display:grid; place-items:center; width:1.5em; height:1.5em; border-radius:50%; background:var(--oks); color:#0F7A4B; font-size:.85em; flex:none; }
.sx-wfl { display:flex; flex-direction:column; gap:.5em; min-width:0; }
.sx-wf { display:flex; gap:.6em; border:1px solid var(--ln); border-left:.22em solid var(--b); border-radius:.6em; padding:.5em .65em; }
.sx-wf-epro { border-left-color:#E0A100; } .sx-wf.sx-wf-epro .sx-ni { background:#E0A100; }
.sx-wf-sae { border-left-color:#E57373; } .sx-wf.sx-wf-sae .sx-ni { background:#E57373; }
.sx-wf .sx-ni { background:var(--b); }
.sx-wf > div { min-width:0; flex:1; }
.sx-wf b { font-size:.82em; } .sx-wf small { display:block; font-size:.66em; color:var(--mu); }
.sx-wff { display:flex; flex-wrap:wrap; gap:.3em; margin-top:.35em; }
.sx-wff i { font-style:normal; font-size:.64em; font-weight:700; background:#E9FBF4; color:#0F7A4B; border-radius:2em; padding:.15em .55em; white-space:nowrap; }
.sx-ep { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:.4em; margin-top:.45em; }
.sx-ep span { display:flex; flex-direction:column; font-size:.62em; font-weight:700; line-height:1.25; }
.sx-ep small { font-size:.85em; color:var(--mu); font-weight:600; }
.sx-more { font-size:.7em; color:var(--mu); font-weight:700; padding-left:.4em; }
.sx-wbg { grid-template-columns:13.5em minmax(0,1fr); }
.sx-sum { list-style:none; margin:0; padding:.8em .9em; background:#F0FAFA; border:1px solid #CDEDEF; border-radius:.7em; display:flex; flex-direction:column; gap:.5em; align-self:start; }
.sx-sum li { font-size:.72em; font-weight:700; line-height:1.3; }
.sx-sum li:nth-child(even) { font-weight:500; color:var(--mu); margin-top:-.35em; }
.sx-wbg > div { display:flex; flex-direction:column; gap:.45em; min-width:0; }
.sx-wb { border:1px solid var(--ln); border-radius:.6em; padding:.45em .7em; }
.sx-wb > div { display:flex; align-items:center; gap:.5em; }
.sx-wb b { font-size:.8em; } .sx-wb > div span { margin-left:auto; font-size:.62em; font-weight:800; color:var(--mu); text-transform:uppercase; letter-spacing:.05em; }
.sx-wb ul { margin:.25em 0 0 1.25em; padding:0; list-style:none; }
.sx-wb li { font-size:.68em; color:var(--ink2); line-height:1.4; }
.sx-wb li.sx-rm { color:var(--bad); }
.sx-dot { width:.6em; height:.6em; border-radius:50%; flex:none; }
.sx-d-new { background:var(--ok); } .sx-d-changed { background:var(--wa); } .sx-d-removed { background:var(--bad); }
.sx-break { display:flex; gap:.5em; align-items:flex-start; background:var(--bads); color:#9B2C2C; border-radius:.6em; padding:.5em .7em; }
.sx-break p { font-size:.68em; line-height:1.35; color:#9B2C2C !important; }
.sx-msg { font-size:.74em; line-height:1.4; border-radius:.8em; padding:.6em .75em; }
.sx-me { align-self:flex-end; max-width:92%; background:var(--b); color:#fff; border-bottom-right-radius:.2em; display:flex; flex-direction:column; gap:.4em; }
.sx-ai { display:flex; gap:.5em; background:#f4f7fb; border:1px solid var(--ln); color:var(--ink2); border-bottom-left-radius:.2em; }
.sx-ai > span { color:var(--b); flex:none; }
.sx-ai p { font-size:1em; line-height:1.4; color:inherit; }
.sx-att { display:inline-flex; align-items:center; gap:.35em; align-self:flex-start; background:rgba(255,255,255,.18); border-radius:.4em; padding:.2em .5em; font-weight:700; font-size:.92em; }
/* UAT */
.sx-uat { background:#fff; border:1px solid var(--ln); border-radius:.9em; padding:1em 1.2em; display:flex; flex-direction:column; gap:.55em; flex:1; min-height:0; overflow:hidden; }
.sx-uh { font-size:1.05em; font-weight:800; } .sx-uat > p { font-size:.74em; color:var(--mu) !important; }
.sx-cts { display:grid; grid-template-columns:repeat(5, 1fr); gap:.5em; margin:.2em 0; }
.sx-ct { display:flex; flex-direction:column; border:1px solid var(--ln); border-radius:.6em; padding:.45em .6em; font-size:.66em; font-weight:700; color:var(--mu); }
.sx-ct b { font-size:1.9em; line-height:1.1; color:var(--ink); }
.sx-ct.sx-c-missing b { color:var(--bad); } .sx-ct.sx-c-mismatch b { color:var(--wa); } .sx-ct.sx-c-setup b { color:#3E4C66; } .sx-ct.sx-c-impl b { color:var(--ok); }
.sx-ur { display:flex; gap:.7em; align-items:flex-start; border:1px solid var(--ln); border-radius:.6em; padding:.5em .7em; }
.sx-ur.on { border-color:#BFE6E8; background:#F0FAFA; }
.sx-ur > div { min-width:0; flex:1; display:flex; flex-direction:column; gap:.15em; }
.sx-ur b { font-size:.78em; } .sx-ur small { display:flex; align-items:center; gap:.3em; font-size:.64em; color:var(--mu); }
.sx-uv { font-style:normal; flex:none; width:7.2em; text-align:center; font-size:.62em; font-weight:800; border-radius:2em; padding:.2em 0; }
.sx-uv.sx-c-missing { background:var(--bads); color:var(--bad); } .sx-uv.sx-c-mismatch { background:var(--was); color:var(--wa); }
.sx-uv.sx-c-setup { background:#F2F5F9; color:#3E4C66; }
.sx-ud { display:grid; grid-template-columns:1fr 1fr; gap:.5em; margin-top:.3em; }
.sx-ud span { display:flex; flex-direction:column; background:#fff; border:1px solid var(--ln); border-radius:.45em; padding:.3em .55em; font-size:.72em; font-weight:700; }
.sx-ud small { font-size:.85em; }
.sx-back { align-self:flex-start; font-size:.72em; font-weight:700; color:var(--bs); }

/* hero: protocol, graph, create plan, approved (10 s loop) */
.sh-host { margin:0 auto; width:100%; max-width:540px; container-type:inline-size; }
.sh { position:relative; height:0; padding-bottom:70%; font-size:min(15px, 3.1cqw); font-family:'Mulish', sans-serif; color:#051F48; }
.sh .ck, .sh .sp { width:1em; height:1em; flex:none; }
.sh-doc, .sh-graph, .sh-plan { position:absolute; background:#fff; border-radius:1em; box-shadow:0 1.4em 2.8em rgba(5,31,72,.14), 0 .3em .8em rgba(5,31,72,.06); }
.sh-doc { left:0; top:2%; width:36%; padding:1em; display:flex; flex-direction:column; gap:.5em; overflow:hidden; }
.sh-pdf { align-self:flex-start; background:#D64545; color:#fff; font-size:.7em; font-weight:800; border-radius:.3em; padding:.15em .45em; }
.sh-doc b { font-size:.85em; } .sh-doc small { font-size:.72em; color:#6D8189; margin-top:-.4em; }
.sh-doc > i:not(.sh-scan) { height:.45em; border-radius:1em; background:#E1EBEA; } .sh-doc > i:nth-of-type(2) { width:80%; } .sh-doc > i:nth-of-type(3) { width:60%; }
.sh-scan { position:absolute; left:0; right:0; top:0; height:2.2em; background:linear-gradient(transparent, rgba(23,162,172,.22)); border-bottom:2px solid #17A2AC; animation:sh-scan 10s infinite; }
.sh-ai { position:absolute; left:6%; top:31%; display:inline-flex; align-items:center; gap:.45em; background:#051F48; color:#fff; border-radius:2em; padding:.35em .85em; font-size:.8em; font-weight:700; white-space:nowrap; animation:sh-ai 10s infinite; }
.sh-ai .sp { color:#7AEBC1; }
.sh-graph { right:0; top:0; width:58%; height:38%; padding:.7em .9em; }
.sh-graph small, .sh-plan small { display:block; font-size:.66em; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#6D8189; }
.sh-edges { position:absolute; left:4%; right:4%; top:22%; width:92%; height:72%; }
.sh-edges path { fill:none; stroke:#6CC5CB; stroke-width:.8; stroke-dasharray:60; stroke-dashoffset:60; animation:sh-draw 10s infinite; }
.sh-g { position:absolute; width:18%; height:13%; border-radius:.35em; border-left:.22em solid; opacity:0; animation:sh-node 10s infinite; }
.sh-g1 { left:5%; top:52%; background:#051F48; border-color:#051F48; width:15%; }
.sh-g2, .sh-g3, .sh-g4 { left:36%; background:#EAF6F7; border-color:#17A2AC; } .sh-g2 { top:28%; } .sh-g3 { top:52%; } .sh-g4 { top:76%; }
.sh-g6, .sh-g7, .sh-g8 { left:70%; background:#E9FBF4; border-color:#17AC6B; } .sh-g6 { top:40%; } .sh-g7 { top:64%; } .sh-g8 { top:88%; height:9%; background:#F2F5F9; border-color:#5B6B86; }
.sh-g1 { animation-delay:0s; } .sh-g2 { animation-delay:.25s; } .sh-g3 { animation-delay:.4s; } .sh-g4 { animation-delay:.55s; }
.sh-g6 { animation-delay:.75s; } .sh-g7 { animation-delay:.9s; } .sh-g8 { animation-delay:1.05s; }
.sh-plan { left:14%; right:0; bottom:0; top:52%; padding:1em 1.2em; display:flex; flex-direction:column; }
.sh-plan ul { list-style:none; margin:.6em 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.55em .9em; }
.sh-w { display:flex; align-items:flex-start; gap:.45em; font-size:.8em; font-weight:700; line-height:1.25; opacity:0; animation:sh-w 10s infinite; }
.sh-w .ck { width:1.3em; height:1.3em; padding:.2em; border-radius:50%; background:#D5F0E6; color:#17AC6B; }
.sh-w1 { animation-delay:0s; } .sh-w2 { animation-delay:.2s; } .sh-w3 { animation-delay:.4s; } .sh-w4 { animation-delay:.6s; } .sh-w5 { animation-delay:.8s; } .sh-w6 { animation-delay:1s; }
.sh-foot { position:relative; margin-top:auto; display:flex; justify-content:flex-end; min-height:2.3em; align-items:center; }
.sh-btn, .sh-done { display:inline-flex; align-items:center; gap:.4em; border-radius:.55em; padding:.5em 1em; font-size:.8em; font-weight:800; white-space:nowrap; }
.sh-btn { background:#17A2AC; color:#fff; animation:sh-btn 10s infinite; }
.sh-done { position:absolute; right:0; background:#D5F0E6; color:#17AC6B; opacity:0; animation:sh-done 10s infinite; }
.sh-cur { position:absolute; right:2.2em; bottom:-.8em; opacity:0; animation:sh-cur 10s infinite; }
.sh-cur .cur { width:1.3em; height:1.6em; }
@keyframes sh-scan { 0% { top:0; opacity:1; } 22% { top:calc(100% - 2.2em); opacity:1; } 26%, 100% { opacity:0; top:calc(100% - 2.2em); } }
@keyframes sh-ai { 0%, 4% { opacity:.4; transform:scale(.94); } 10%, 100% { opacity:1; transform:none; } }
@keyframes sh-draw { 0%, 18% { stroke-dashoffset:60; } 34%, 100% { stroke-dashoffset:0; } }
@keyframes sh-node { 0%, 16% { opacity:0; transform:scale(.8); } 24%, 100% { opacity:1; transform:none; } }
@keyframes sh-w { 0%, 36% { opacity:0; transform:translateY(.4em); } 42%, 100% { opacity:1; transform:none; } }
@keyframes sh-cur { 0%, 58% { opacity:0; transform:translate(2em, 1.5em); } 66%, 72% { opacity:1; transform:none; } 78%, 100% { opacity:0; transform:none; } }
@keyframes sh-btn { 0%, 70% { opacity:1; transform:none; } 72% { transform:scale(.95); } 76%, 100% { opacity:0; } }
@keyframes sh-done { 0%, 75% { opacity:0; transform:scale(.9); } 80%, 100% { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
	.sh-scan, .sh-cur { display:none; } .sh-ai, .sh-edges path, .sh-g, .sh-w, .sh-btn, .sx-spin { animation:none; }
	.sh-edges path { stroke-dashoffset:0; } .sh-g, .sh-w { opacity:1; } .sh-btn { display:none; } .sh-done { position:static; opacity:1; animation:none; }
}
@media (max-width:1023px) { .sh-hero #header { margin-top:32px; } }

/* steps and tiles */
.sg-steps { list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; counter-reset:none; }
.sg-step { position:relative; background:#fff; border:1px solid #E1EBEA; border-radius:16px; padding:22px 20px 24px; box-shadow:0 10px 30px rgba(5,31,72,.06); }
.sg-step:not(:last-child)::after { content:''; position:absolute; right:-13px; top:42px; width:10px; height:10px; border-top:2px solid #17A2AC; border-right:2px solid #17A2AC; transform:rotate(45deg); }
.sg-ic { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#E2F6F7; color:#117985; }
.sg-ic .ci { width:22px; height:22px; }
.sg-num { display:block; margin-top:16px; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12px; font-weight:600; letter-spacing:.1em; color:#117985; }
.sg-step h3, .sg-tile h3 { margin:4px 0 8px; font-size:19px; line-height:1.3; font-weight:700; color:#051F48 !important; }
.sg-step p, .sg-tile p { margin:0; font-size:15px; line-height:1.55; color:#35404F !important; }
.sg-grid { margin-top:40px; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.sg-tile { background:#fff; border:1px solid #E1EBEA; border-radius:16px; padding:24px 24px 26px; box-shadow:0 10px 30px rgba(5,31,72,.06); }
.sg-tile h3 { margin-top:16px; }
.sg-days > div { display:flex; margin-bottom:20px; }
.sg-day { flex:1; border-radius:16px; padding:28px; }
.sg-old { background:#F4F6F8; border:1px solid #E1E6EB; }
.sg-new { background:#E9FBF4; border:1px solid #B4F4DC; }
@media (max-width:1199px) { .sg-steps { grid-template-columns:repeat(3, 1fr); } .sg-step:nth-child(3)::after { display:none; } }
@media (max-width:767px) {
	.sg-steps, .sg-grid { grid-template-columns:1fr; } .sg-step::after { display:none; }
}

/* ---------- Flat hero illustrations (batch 21) ----------
   hx- scenes replace the isometric heroes of eCOA/ePRO, eConsent, Dashboards, Hybrid/DCT and Study Types /
   RWE. Same look as the other Climedo scenes (grid, dashed frame, mono kickers, caption), but every
   card faces the viewer and nothing follows the mouse. Steps are chips across the top; the chip and the card
   of the same step light up together (9 s for three steps, 12 s for four). Sizes in em of the scene. */
.hx-host { margin:0; width:100%; container-type:inline-size; }
.hx { --n:#051F48; --t:#17A2AC; --td:#117985; --m:#B4F4DC; --mb:#7AEBC1; --g:#17AC6B; --mu:#6D8189; --ln:#D3E3E5;
	position:relative; aspect-ratio:1 / 1; overflow:hidden; font-size:min(15px, calc(100cqw / 34));
	display:flex; flex-direction:column; gap:.9em; padding:7.5% 7% 6%;
	font-family:'Mulish', sans-serif; color:var(--n); line-height:1.3; text-align:left;
	background:radial-gradient(120% 90% at 50% 12%, #fff 0%, #F4F9F9 46%, #E7F2F3 100%); }
.hx * { box-sizing:border-box; }
.hx p { margin:0; }
.hx-grid { position:absolute; inset:0; background-image:linear-gradient(to right, rgba(23,162,172,.07) 1px, transparent 1px),
	linear-gradient(to bottom, rgba(23,162,172,.07) 1px, transparent 1px); background-size:6.25% 6.25%; }
.hx-frame { position:absolute; inset:4.5%; border:1px dashed rgba(23,162,172,.28); }
.hx-frame i { position:absolute; width:7px; height:7px; border:1px solid rgba(23,162,172,.5); background:#fff; }
.hx-frame .tl { left:-4px; top:-4px; } .hx-frame .br { right:-4px; bottom:-4px; }
.hx-steps { position:relative; display:flex; flex-wrap:wrap; gap:.4em; margin:0; padding:0; list-style:none; }
.hx-steps li { display:flex; align-items:center; gap:.45em; padding:.3em .7em .3em .5em; border-radius:2em; background:rgba(255,255,255,.9);
	border:1px solid var(--ln); font-size:.72em; font-weight:700; color:var(--mu); white-space:nowrap;
	animation:hx-on3 9s infinite; animation-delay:calc(var(--p) * 3s); }
.hx-n4 .hx-steps li { animation-name:hx-on4; animation-duration:12s; }
.hx-steps i { font-style:normal; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.9em; color:var(--t); }
.hx-body { position:relative; flex:1; min-height:0; }
.hx-cap { position:relative; display:flex; justify-content:center; align-items:center; gap:.55em;
	font-size:.8em !important; color:var(--n) !important; line-height:1.3 !important; text-align:center; }
.hx-cap span { width:.6em; height:.6em; background:var(--t); flex:none; }
.hx-card { position:absolute; background:#fff; border:1px solid #E1EBEA; border-radius:.8em; padding:.75em .85em;
	box-shadow:0 1em 2.2em rgba(5,31,72,.10), 0 .2em .5em rgba(5,31,72,.05); display:flex; flex-direction:column; gap:.4em; }
.hx-h { font-size:.92em; font-weight:800; line-height:1.2; }
.hx-kick { display:block; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.6em; letter-spacing:.08em; text-transform:uppercase;
	color:var(--td); font-weight:600; }
.hx-mono { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.6em; letter-spacing:.04em; color:var(--mu); text-transform:uppercase; }
.hx-card p { font-size:.7em !important; line-height:1.4 !important; color:#35404F !important; }
.hx-row { display:flex; align-items:center; justify-content:space-between; gap:.6em; }
.hx-kv { display:flex; align-items:center; gap:.5em; font-size:.7em; padding:.3em 0; border-top:1px solid #EEF3F4; }
.hx-kv span { flex:1; color:#35404F; min-width:0; hyphens:auto; overflow-wrap:break-word; }
.hx-kv b { font-weight:800; white-space:nowrap; }
.hx-btn { display:inline-flex; align-items:center; gap:.35em; background:var(--t); color:#fff; border-radius:.45em; padding:.35em .8em;
	font-size:.7em; font-weight:800; white-space:nowrap; position:relative; }
.hx-ck { width:1em; height:1em; flex:none; }
.hx-ic { width:1.1em; height:1.1em; flex:none; }
.hx-tag { font-style:normal; font-size:.85em; font-weight:800; border-radius:2em; padding:.05em .55em; background:#E2F6F7; color:var(--td); }
.hx-tag.hx-site { background:#EDF0F7; color:#3E4C66; }
.hx-ok { color:var(--g); }
/* the card or part of a step lights up while its chip does */
.hx-a { outline:.2em solid rgba(23,162,172,0); outline-offset:.15em; animation:hx-a3 9s infinite; animation-delay:calc(var(--p) * 3s); border-radius:.8em; }
.hx-n4 .hx-a { animation-name:hx-a4; animation-duration:12s; }
@keyframes hx-on3 { 0%, 31% { background:var(--n); color:#fff; border-color:var(--n); } 36%, 100% { background:rgba(255,255,255,.9); color:var(--mu); border-color:var(--ln); } }
@keyframes hx-on4 { 0%, 23% { background:var(--n); color:#fff; border-color:var(--n); } 27%, 100% { background:rgba(255,255,255,.9); color:var(--mu); border-color:var(--ln); } }
@keyframes hx-a3 { 0%, 31% { outline-color:rgba(23,162,172,.45); } 36%, 100% { outline-color:rgba(23,162,172,0); } }
@keyframes hx-a4 { 0%, 23% { outline-color:rgba(23,162,172,.45); } 27%, 100% { outline-color:rgba(23,162,172,0); } }
.hx-steps li:first-child { background:var(--n); color:#fff; border-color:var(--n); }

/* eCOA/ePRO: phone and site dashboard side by side */
.hx-phone { position:absolute; left:2%; top:50%; transform:translateY(-50%); width:47%; background:#fff; border:1px solid #DDE7E8; border-radius:1.6em;
	padding:1.3em .9em .9em; box-shadow:0 1.2em 2.6em rgba(5,31,72,.14); display:flex; flex-direction:column; gap:.35em; }
.hx-notch { position:absolute; left:38%; right:38%; top:.55em; height:.3em; border-radius:1em; background:#E1EBEA; }
.hx-ph-t { font-size:.9em; font-weight:800; }
.hx-q small { display:block; font-size:.62em; font-weight:800; margin-top:.35em; }
.hx-pips { display:grid; grid-template-columns:repeat(5, 1fr); gap:.25em; margin-top:.2em; }
.hx-pips i { height:1.15em; border:1px solid #DDE7E8; border-radius:.3em; display:grid; place-items:center; color:#fff; }
.hx-pips i.on { background:var(--td); border-color:var(--td); }
.hx-pips .hx-ck { width:.75em; height:.75em; }
.hx-ph-foot { margin-top:.4em; display:flex; flex-direction:column; gap:.3em; padding:.2em; }
.hx-ph-foot small:first-child { font-size:.62em; font-weight:800; }
.hx-vas { display:block; height:.35em; border-radius:1em; background:#E7EEF0; } .hx-vas b { display:block; width:72%; height:100%; border-radius:1em; background:var(--td); }
.hx-phone .hx-btn { justify-content:center; padding:.5em; }
.hx-phone .hx-btn em { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:.35em; border-radius:.45em;
	background:var(--g); font-style:normal; opacity:0; animation:hx-scored 9s infinite; animation-delay:3s; }
@keyframes hx-scored { 0%, 8% { opacity:0; } 14%, 31% { opacity:1; } 36%, 100% { opacity:0; } }
.hx-pa-dash { right:0; top:50%; transform:translateY(-50%); width:47%; }
.hx-bars { display:flex; align-items:flex-end; gap:.25em; height:3.6em; margin:.2em 0; }
.hx-bars i { flex:1; background:var(--m); border-radius:.2em .2em 0 0; } .hx-bars i:last-child { background:var(--t); }
.hx-flag { align-self:flex-start; font-size:.62em; font-weight:800; color:#8A5A00; background:#FDF2DD; border-radius:2em; padding:.25em .7em; }

/* eConsent: consent document and audit trail */
.hx-co-doc { left:0; top:50%; transform:translateY(-58%); width:57%; gap:.5em; }
.hx-co-head { display:flex; flex-direction:column; gap:.2em; padding:.1em; }
.hx-line { display:block; height:.35em; border-radius:1em; background:#EEF3F4; } .hx-line.s { width:70%; }
.hx-check { display:flex; gap:.5em; align-items:flex-start; font-size:.66em; line-height:1.35; padding:.25em; }
.hx-check i { flex:none; width:1.35em; height:1.35em; border-radius:.3em; background:var(--td); color:#fff; display:grid; place-items:center; }
.hx-signs { margin-top:.5em; display:grid; grid-template-columns:1fr 1fr; gap:.8em; }
.hx-signs > div { display:flex; flex-direction:column; gap:.2em; border-bottom:1px solid #C9D6DA; padding:.2em; }
.hx-signs small { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.55em; letter-spacing:.06em; text-transform:uppercase; color:var(--mu); }
.hx-sig { width:100%; height:2em; } .hx-sig path { fill:none; stroke:var(--n); stroke-width:2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; }
.hx-signs > div:first-child .hx-sig path { animation:hx-sign 12s infinite; animation-delay:3s; }
.hx-signs > div:last-child .hx-sig path { stroke:var(--td); animation:hx-sign 12s infinite; animation-delay:6s; }
@keyframes hx-sign { 0% { stroke-dashoffset:1; } 12%, 100% { stroke-dashoffset:0; } }
.hx-co-audit { right:0; top:50%; transform:translateY(-12%); width:41%; }

/* Dashboards: study dashboard and the signal */
.hx-db-dash { left:0; right:0; top:0; height:72%; }
.hx-live { display:inline-flex; align-items:center; gap:.35em; font-size:.62em; font-weight:800; color:var(--g); }
.hx-live i { width:.5em; height:.5em; border-radius:50%; background:var(--g); animation:hx-pulse 1.6s infinite; }
@keyframes hx-pulse { 50% { opacity:.3; } }
.hx-chips { display:flex; flex-wrap:wrap; gap:.3em; padding:.15em; }
.hx-chips span { font-size:.6em; font-weight:700; border:1px solid var(--ln); border-radius:2em; padding:.15em .6em; color:var(--mu); }
.hx-chips span.on { background:var(--m); border-color:var(--mb); color:var(--n); }
.hx-kpis { display:grid; grid-template-columns:repeat(3, 1fr); gap:.4em; padding:.15em; }
.hx-kpi { border:1px solid #E6EEF0; border-radius:.5em; padding:.35em .5em; }
.hx-kpi small { display:block; font-size:.58em; color:var(--mu); font-weight:700; }
.hx-kpi b { font-size:1.05em; font-weight:800; } .hx-kpi s { font-size:.6em; color:var(--mu); margin-right:.35em; font-weight:600; }
.hx-chart { flex:1; display:grid; grid-template-columns:repeat(6, 1fr); gap:.5em; align-items:end; min-height:0; }
.hx-chart div { height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; gap:.2em; }
.hx-chart i { background:var(--m); border-radius:.25em .25em 0 0; } .hx-chart div:last-child i { background:var(--t); }
.hx-chart small { font-size:.55em; text-align:center; color:var(--mu); font-family:'IBM Plex Mono', ui-monospace, monospace; }
.hx-db-sig { right:0; bottom:0; width:64%; border-left:.25em solid var(--t); }

/* Hybrid/DCT: home and site into one record */
.hx-dc-home { left:0; top:0; width:47.5%; } .hx-dc-site { right:0; top:0; width:47.5%; }
.hx-icb { width:1.9em; height:1.9em; border-radius:.5em; display:grid; place-items:center; background:#E2F6F7; color:var(--td); flex:none; }
.hx-dc-site .hx-icb { background:#EDF0F7; color:#3E4C66; }
.hx-dc-home .hx-row, .hx-dc-site .hx-row { justify-content:flex-start; }
.hx-dc-home .hx-row > div, .hx-dc-site .hx-row > div { display:flex; flex-direction:column; }
.hx-join { position:absolute; left:0; width:100%; top:47%; height:9%; overflow:visible; }
.hx-join path { fill:none; stroke:var(--t); stroke-width:1.2; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; }
.hx-dc-rec { left:12%; right:12%; bottom:0; }
.hx-dc-rec .hx-kv .hx-tag { font-size:.85em; }

/* Study types: three study cards and the platform list */
.hx-st-row { position:absolute; left:0; right:0; top:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:.6em; }
.hx-st-c { position:relative; padding:.65em .7em; }
.hx-st-c .hx-h { font-size:.8em; }
.hx-st-c .hx-kv { font-size:.62em; }
.hx-st0 { border-top:.25em solid var(--mb); } .hx-st1 { border-top:.25em solid var(--t); } .hx-st2 { border-top:.25em solid #E0A100; }
.hx-st-list { left:8%; right:8%; bottom:4%; }

@media (prefers-reduced-motion: reduce) {
	.hx-steps li, .hx-a, .hx-phone .hx-btn em, .hx-sig path, .hx-live i { animation:none !important; }
}

/* Network figure (solutions overview): climedo-network prototype, namespaced .nt-*;
   sources, the platform and the audiences, scaled to its box by a small inline script */
	.nt-wrap {
		--navy: #051f48;
		--teal: #17a2ac;
		--teal-deep: #117985;
		--mint: #b4f4dc;
		--mint-bright: #7aebc1;
		--green: #17ac6b;
		--green-deep: #0f7a4b;
		--ground: #f4f9f9;
		--ground-2: #e7f2f3;
		--line: #d3e3e5;
		--line-soft: #e6eff0;
		--muted: #6d8189;
		--dur: 7s;
		--half: 3.5s;

		position: relative;
		width: 100%;
		aspect-ratio: 3 / 2;
		overflow: hidden;
		background:
			radial-gradient(110% 100% at 50% 30%, #ffffff 0%, var(--ground) 50%, var(--ground-2) 100%);
		font-family: Manrope, 'Helvetica Neue', Arial, sans-serif;
		color: var(--navy);
		-webkit-font-smoothing: antialiased;
	}
	.nt-wrap,
	.nt-wrap *,
	.nt-wrap *::before,
	.nt-wrap *::after {
		box-sizing: border-box;
	}

	.nt-grid {
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(to right, rgba(23, 162, 172, 0.075) 1px, transparent 1px),
			linear-gradient(to bottom, rgba(23, 162, 172, 0.075) 1px, transparent 1px);
		background-size: 48px 48px;
		-webkit-mask-image: radial-gradient(80% 74% at 50% 44%, #000 22%, transparent 100%);
		mask-image: radial-gradient(80% 74% at 50% 44%, #000 22%, transparent 100%);
	}
	.nt-frame {
		position: absolute;
		inset: 2.6% 2%;
		border: 1px dashed rgba(5, 31, 72, 0.14);
	}
	.nt-frame::before,
	.nt-frame::after {
		content: '';
		position: absolute;
		width: 7px;
		height: 7px;
		border: 1px solid rgba(5, 31, 72, 0.28);
		background: #fff;
	}
	.nt-frame::before {
		left: -4px;
		top: -4px;
	}
	.nt-frame::after {
		right: -4px;
		bottom: -4px;
	}

	/* stage ---------------------------------------------------------------- */
	.nt-stage {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 1200px;
		height: 800px;
		transform: translate(-50%, -50%) scale(var(--nt-scale, 1));
		transform-origin: 50% 50%;
	}
	.nt-halo {
		position: absolute;
		left: 600px;
		top: 300px;
		width: 700px;
		height: 480px;
		margin: -240px 0 0 -350px;
		border-radius: 50%;
		background: radial-gradient(
			closest-side,
			rgba(180, 244, 220, 0.5) 0%,
			rgba(180, 244, 220, 0.19) 54%,
			rgba(180, 244, 220, 0) 100%
		);
	}
	.nt-beam {
		position: absolute;
		left: 600px;
		top: 450px;
		width: 246px;
		height: 116px;
		margin-left: -123px;
		background: linear-gradient(
			to top,
			rgba(180, 244, 220, 0.55) 0%,
			rgba(180, 244, 220, 0.2) 58%,
			rgba(180, 244, 220, 0) 100%
		);
		clip-path: polygon(0 0, 100% 0, 76% 100%, 24% 100%);
	}
	.nt-scene,
	.nt-links {
		position: absolute;
		inset: 0;
		width: 1200px;
		height: 800px;
		overflow: visible;
	}
	.nt-link {
		fill: none;
		stroke: rgba(23, 162, 172, 0.38);
		stroke-width: 1.2;
		stroke-dasharray: 3 5;
	}
	.nt-link--out {
		stroke: rgba(23, 172, 107, 0.36);
	}
	.nt-tapdot {
		fill: #ffffff;
		stroke: var(--teal);
		stroke-width: 1.4;
	}
	.nt-tapdot--out {
		stroke: var(--green);
	}

	/* travelling bits ------------------------------------------------------ */
	.nt-pk {
		position: absolute;
		left: 0;
		top: 0;
		width: 0;
		height: 0;
		animation-duration: var(--half);
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}
	.nt-pk::before {
		content: '';
		position: absolute;
		left: -5px;
		top: -3px;
		width: 10px;
		height: 6px;
		border-radius: 2px;
		background: var(--teal);
		box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.92);
	}
	.nt-pk--out::before {
		background: var(--green);
	}
	.nt-pk--s::before {
		left: -3px;
		top: -3px;
		width: 6px;
		height: 6px;
		background: var(--teal-deep);
	}
	.nt-pk--out.nt-pk--s::before {
		background: var(--green-deep);
	}

	/* band headings --------------------------------------------------------- */
	.nt-band {
		position: absolute;
		display: flex;
		align-items: center;
		gap: 8px;
		font: 600 9.5px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.19em;
		text-transform: uppercase;
		color: var(--teal-deep);
	}
	.nt-band--out {
		color: var(--green-deep);
	}
	.nt-band i {
		width: 6px;
		height: 6px;
		flex: none;
		background: var(--mint-bright);
		border: 1px solid var(--teal);
	}
	.nt-band--out i {
		border-color: var(--green);
	}
	.nt-pill {
		position: absolute;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 15px;
		font: 600 9.5px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.19em;
		text-transform: uppercase;
		color: var(--navy);
		background: linear-gradient(90deg, var(--mint) 0%, var(--mint-bright) 100%);
		border: 1px solid rgba(23, 162, 172, 0.34);
	}

	/* the platform ---------------------------------------------------------- */
	.nt-core {
		position: absolute;
		left: 430px;
		top: 96px;
		width: 340px;
		height: 360px;
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 14px;
		overflow: hidden;
		box-shadow:
			0 2px 0 rgba(5, 31, 72, 0.03),
			0 34px 60px -30px rgba(5, 31, 72, 0.55);
	}
	.nt-core-head {
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
		border-bottom: 1px solid var(--line-soft);
		background: linear-gradient(180deg, #ffffff 0%, #f7fcfc 100%);
	}
	.nt-mark {
		width: 108px;
		height: auto;
		display: block;
	}
	.nt-core-head u {
		font: 600 7.5px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--muted);
		text-decoration: none;
	}
	.nt-sec {
		position: absolute;
		left: 16px;
		font: 600 7.5px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.17em;
		text-transform: uppercase;
		color: var(--teal-deep);
	}
	.nt-sec--b {
		color: var(--green-deep);
	}

	.nt-lane {
		position: absolute;
		left: 16px;
		width: 284px;
		height: 6px;
	}
	.nt-lane::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 2px;
		height: 1px;
		background: repeating-linear-gradient(
			90deg,
			rgba(23, 162, 172, 0.3) 0 3px,
			transparent 3px 8px
		);
	}
	.nt-bit {
		position: absolute;
		top: 0;
		left: 0;
		width: 11px;
		height: 6px;
		border-radius: 2px;
		background: var(--teal);
		animation: nt-bit var(--half) linear infinite;
	}
	.nt-bit--s {
		width: 6px;
		background: var(--teal-deep);
	}
	@keyframes nt-bit {
		0% {
			transform: translateX(0);
			opacity: 0;
		}
		7% {
			opacity: 1;
		}
		82% {
			transform: translateX(258px);
			opacity: 1;
		}
		94% {
			transform: translateX(273px);
			opacity: 0;
		}
		100% {
			transform: translateX(273px);
			opacity: 0;
		}
	}
	.nt-bus {
		position: absolute;
		left: 306px;
		width: 2px;
		border-radius: 1px;
		background: linear-gradient(180deg, var(--teal) 0%, var(--green) 100%);
		opacity: 0.55;
	}
	.nt-rule {
		position: absolute;
		left: 16px;
		right: 16px;
		height: 1px;
		background: var(--line-soft);
	}

	.nt-row {
		position: absolute;
		left: 16px;
		width: 308px;
		height: 28px;
		display: flex;
		align-items: center;
		gap: 7px;
		border-bottom: 1px solid var(--line-soft);
		opacity: 0.2;
		animation: nt-row var(--half) ease-out infinite;
	}
	@keyframes nt-row {
		0% {
			opacity: 0.2;
		}
		16% {
			opacity: 1;
		}
		88% {
			opacity: 1;
		}
		100% {
			opacity: 0.2;
		}
	}
	.nt-row-k {
		font: 700 10.5px/1 Manrope, sans-serif;
		letter-spacing: -0.01em;
		color: var(--navy);
		width: 88px;
		flex: none;
		white-space: nowrap;
	}
	.nt-row-v {
		font: 600 10.5px/1 'IBM Plex Mono', ui-monospace, monospace;
		color: var(--teal-deep);
		flex: 1;
		white-space: nowrap;
	}
	.nt-row-t {
		font: 600 7px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--muted);
		background: var(--ground);
		border: 1px solid var(--line-soft);
		border-radius: 3px;
		padding: 4px 5px;
		flex: none;
	}
	.nt-row-c {
		width: 12px;
		height: 12px;
		flex: none;
		border-radius: 50%;
		background: var(--mint-bright);
		border: 1px solid var(--green);
	}

	.nt-foot {
		position: absolute;
		left: 16px;
		right: 16px;
		bottom: 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font: 600 8px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--muted);
	}
	.nt-count {
		position: relative;
		display: inline-block;
		width: 96px;
		height: 9px;
		vertical-align: middle;
	}
	.nt-count span {
		position: absolute;
		left: 0;
		top: 0;
		color: var(--navy);
		opacity: 0;
		animation: nt-count var(--dur) steps(1, end) infinite;
	}
	@keyframes nt-count {
		0% {
			opacity: 1;
		}
		33.33% {
			opacity: 0;
		}
		100% {
			opacity: 0;
		}
	}

	/* the labels pinned to each place ---------------------------------------- */
	.nt-tag {
		position: absolute;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		gap: 7px;
		padding: 5px 10px 5px 8px;
		background: rgba(255, 255, 255, 0.95);
		border: 1px solid var(--line);
		border-radius: 13px;
		white-space: nowrap;
		box-shadow: 0 5px 12px -9px rgba(5, 31, 72, 0.6);
	}
	.nt-tag i {
		width: 6px;
		height: 6px;
		flex: none;
		border-radius: 50%;
		background: var(--teal);
	}
	.nt-tag--out i {
		background: var(--green);
	}
	.nt-tag u {
		font: 600 8px/1 'IBM Plex Mono', ui-monospace, monospace;
		letter-spacing: 0.13em;
		text-transform: uppercase;
		color: var(--teal-deep);
		text-decoration: none;
	}
	.nt-tag--out u {
		color: var(--green-deep);
	}
	.nt-tag b {
		font: 700 11px/1 Manrope, sans-serif;
		letter-spacing: -0.012em;
		color: var(--navy);
	}

	.nt-caption {
		position: absolute;
		left: 50%;
		bottom: 4.4%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		gap: 10px;
		font: 600 13px/1 Manrope, sans-serif;
		color: var(--muted);
	}
	.nt-caption span {
		width: 5px;
		height: 5px;
		background: var(--mint-bright);
		border: 1px solid var(--teal);
	}

		@keyframes nt-f0 {
		0.0000% { transform: translate3d(133.3px, 409.5px, 0); opacity: 0; }
		4.1667% { transform: translate3d(134.4px, 392.7px, 0); opacity: 1; }
		8.3333% { transform: translate3d(137.7px, 376.3px, 0); opacity: 1; }
		12.5000% { transform: translate3d(143.0px, 360.3px, 0); opacity: 1; }
		16.6667% { transform: translate3d(149.9px, 345.0px, 0); opacity: 1; }
		20.8333% { transform: translate3d(158.2px, 330.4px, 0); opacity: 1; }
		25.0000% { transform: translate3d(167.8px, 316.6px, 0); opacity: 1; }
		29.1667% { transform: translate3d(178.3px, 303.5px, 0); opacity: 1; }
		33.3333% { transform: translate3d(189.7px, 291.1px, 0); opacity: 1; }
		37.5000% { transform: translate3d(201.7px, 279.4px, 0); opacity: 1; }
		41.6667% { transform: translate3d(214.4px, 268.3px, 0); opacity: 1; }
		45.8333% { transform: translate3d(227.6px, 257.9px, 0); opacity: 1; }
		50.0000% { transform: translate3d(241.2px, 248.0px, 0); opacity: 1; }
		54.1667% { transform: translate3d(255.2px, 238.7px, 0); opacity: 1; }
		58.3333% { transform: translate3d(269.6px, 230.0px, 0); opacity: 1; }
		62.5000% { transform: translate3d(284.3px, 221.9px, 0); opacity: 1; }
		66.6667% { transform: translate3d(299.3px, 214.3px, 0); opacity: 1; }
		70.8333% { transform: translate3d(314.5px, 207.2px, 0); opacity: 1; }
		75.0000% { transform: translate3d(330.1px, 200.8px, 0); opacity: 1; }
		79.1667% { transform: translate3d(345.9px, 195.0px, 0); opacity: 1; }
		83.3333% { transform: translate3d(361.9px, 189.9px, 0); opacity: 1; }
		87.5000% { transform: translate3d(378.1px, 185.6px, 0); opacity: 1; }
		91.6667% { transform: translate3d(394.6px, 182.2px, 0); opacity: 1; }
		95.8333% { transform: translate3d(411.2px, 179.9px, 0); opacity: 0.55; }
		100.0000% { transform: translate3d(428.0px, 179.0px, 0); opacity: 0; }
	}
	@keyframes nt-f1 {
		0.0000% { transform: translate3d(331.3px, 407.5px, 0); opacity: 0; }
		4.1667% { transform: translate3d(331.4px, 397.3px, 0); opacity: 1; }
		8.3333% { transform: translate3d(331.8px, 387.1px, 0); opacity: 1; }
		12.5000% { transform: translate3d(332.5px, 377.0px, 0); opacity: 1; }
		16.6667% { transform: translate3d(333.5px, 366.9px, 0); opacity: 1; }
		20.8333% { transform: translate3d(334.7px, 356.8px, 0); opacity: 1; }
		25.0000% { transform: translate3d(336.2px, 346.8px, 0); opacity: 1; }
		29.1667% { transform: translate3d(338.0px, 336.8px, 0); opacity: 1; }
		33.3333% { transform: translate3d(340.0px, 326.8px, 0); opacity: 1; }
		37.5000% { transform: translate3d(342.4px, 316.9px, 0); opacity: 1; }
		41.6667% { transform: translate3d(345.1px, 307.1px, 0); opacity: 1; }
		45.8333% { transform: translate3d(348.0px, 297.4px, 0); opacity: 1; }
		50.0000% { transform: translate3d(351.3px, 287.8px, 0); opacity: 1; }
		54.1667% { transform: translate3d(355.0px, 278.3px, 0); opacity: 1; }
		58.3333% { transform: translate3d(359.0px, 269.0px, 0); opacity: 1; }
		62.5000% { transform: translate3d(363.3px, 259.8px, 0); opacity: 1; }
		66.6667% { transform: translate3d(368.1px, 250.8px, 0); opacity: 1; }
		70.8333% { transform: translate3d(373.3px, 242.1px, 0); opacity: 1; }
		75.0000% { transform: translate3d(379.1px, 233.7px, 0); opacity: 1; }
		79.1667% { transform: translate3d(385.4px, 225.8px, 0); opacity: 1; }
		83.3333% { transform: translate3d(392.3px, 218.4px, 0); opacity: 1; }
		87.5000% { transform: translate3d(400.0px, 211.7px, 0); opacity: 1; }
		91.6667% { transform: translate3d(408.6px, 206.3px, 0); opacity: 1; }
		95.8333% { transform: translate3d(418.0px, 202.4px, 0); opacity: 0.55; }
		100.0000% { transform: translate3d(428.0px, 201.0px, 0); opacity: 0; }
	}
	@keyframes nt-f2 {
		0.0000% { transform: translate3d(112.1px, 548.1px, 0); opacity: 0; }
		4.1667% { transform: translate3d(113.0px, 527.7px, 0); opacity: 1; }
		8.3333% { transform: translate3d(115.7px, 507.5px, 0); opacity: 1; }
		12.5000% { transform: translate3d(120.0px, 487.5px, 0); opacity: 1; }
		16.6667% { transform: translate3d(125.9px, 468.0px, 0); opacity: 1; }
		20.8333% { transform: translate3d(133.2px, 448.9px, 0); opacity: 1; }
		25.0000% { transform: translate3d(141.8px, 430.5px, 0); opacity: 1; }
		29.1667% { transform: translate3d(151.6px, 412.6px, 0); opacity: 1; }
		33.3333% { transform: translate3d(162.5px, 395.3px, 0); opacity: 1; }
		37.5000% { transform: translate3d(174.3px, 378.7px, 0); opacity: 1; }
		41.6667% { transform: translate3d(187.0px, 362.7px, 0); opacity: 1; }
		45.8333% { transform: translate3d(200.5px, 347.4px, 0); opacity: 1; }
		50.0000% { transform: translate3d(214.7px, 332.7px, 0); opacity: 1; }
		54.1667% { transform: translate3d(229.5px, 318.7px, 0); opacity: 1; }
		58.3333% { transform: translate3d(245.0px, 305.4px, 0); opacity: 1; }
		62.5000% { transform: translate3d(261.0px, 292.8px, 0); opacity: 1; }
		66.6667% { transform: translate3d(277.6px, 280.9px, 0); opacity: 1; }
		70.8333% { transform: translate3d(294.7px, 269.8px, 0); opacity: 1; }
		75.0000% { transform: translate3d(312.3px, 259.5px, 0); opacity: 1; }
		79.1667% { transform: translate3d(330.4px, 250.0px, 0); opacity: 1; }
		83.3333% { transform: translate3d(349.0px, 241.6px, 0); opacity: 1; }
		87.5000% { transform: translate3d(368.1px, 234.4px, 0); opacity: 1; }
		91.6667% { transform: translate3d(387.7px, 228.6px, 0); opacity: 1; }
		95.8333% { transform: translate3d(407.7px, 224.6px, 0); opacity: 0.55; }
		100.0000% { transform: translate3d(428.0px, 223.0px, 0); opacity: 0; }
	}
	@keyframes nt-f3 {
		0.0000% { transform: translate3d(225.2px, 517.6px, 0); opacity: 0; }
		4.1667% { transform: translate3d(225.7px, 502.4px, 0); opacity: 1; }
		8.3333% { transform: translate3d(227.0px, 487.2px, 0); opacity: 1; }
		12.5000% { transform: translate3d(229.3px, 472.2px, 0); opacity: 1; }
		16.6667% { transform: translate3d(232.4px, 457.3px, 0); opacity: 1; }
		20.8333% { transform: translate3d(236.3px, 442.6px, 0); opacity: 1; }
		25.0000% { transform: translate3d(240.9px, 428.1px, 0); opacity: 1; }
		29.1667% { transform: translate3d(246.3px, 413.9px, 0); opacity: 1; }
		33.3333% { transform: translate3d(252.5px, 399.9px, 0); opacity: 1; }
		37.5000% { transform: translate3d(259.2px, 386.3px, 0); opacity: 1; }
		41.6667% { transform: translate3d(266.6px, 373.0px, 0); opacity: 1; }
		45.8333% { transform: translate3d(274.7px, 360.1px, 0); opacity: 1; }
		50.0000% { transform: translate3d(283.2px, 347.5px, 0); opacity: 1; }
		54.1667% { transform: translate3d(292.4px, 335.3px, 0); opacity: 1; }
		58.3333% { transform: translate3d(302.0px, 323.6px, 0); opacity: 1; }
		62.5000% { transform: translate3d(312.2px, 312.3px, 0); opacity: 1; }
		66.6667% { transform: translate3d(322.9px, 301.5px, 0); opacity: 1; }
		70.8333% { transform: translate3d(334.2px, 291.2px, 0); opacity: 1; }
		75.0000% { transform: translate3d(345.9px, 281.5px, 0); opacity: 1; }
		79.1667% { transform: translate3d(358.2px, 272.5px, 0); opacity: 1; }
		83.3333% { transform: translate3d(371.0px, 264.2px, 0); opacity: 1; }
		87.5000% { transform: translate3d(384.3px, 257.0px, 0); opacity: 1; }
		91.6667% { transform: translate3d(398.3px, 251.0px, 0); opacity: 1; }
		95.8333% { transform: translate3d(412.9px, 246.7px, 0); opacity: 0.55; }
		100.0000% { transform: translate3d(428.0px, 245.0px, 0); opacity: 0; }
	}
	@keyframes nt-f4 {
		0.0000% { transform: translate3d(373.7px, 624.2px, 0); opacity: 0; }
		4.1667% { transform: translate3d(373.7px, 608.7px, 0); opacity: 1; }
		8.3333% { transform: translate3d(373.8px, 593.1px, 0); opacity: 1; }
		12.5000% { transform: translate3d(373.9px, 577.6px, 0); opacity: 1; }
		16.6667% { transform: translate3d(374.1px, 562.0px, 0); opacity: 1; }
		20.8333% { transform: translate3d(374.3px, 546.4px, 0); opacity: 1; }
		25.0000% { transform: translate3d(374.5px, 530.9px, 0); opacity: 1; }
		29.1667% { transform: translate3d(374.9px, 515.3px, 0); opacity: 1; }
		33.3333% { transform: translate3d(375.3px, 499.8px, 0); opacity: 1; }
		37.5000% { transform: translate3d(375.8px, 484.2px, 0); opacity: 1; }
		41.6667% { transform: translate3d(376.4px, 468.7px, 0); opacity: 1; }
		45.8333% { transform: translate3d(377.1px, 453.1px, 0); opacity: 1; }
		50.0000% { transform: translate3d(378.0px, 437.6px, 0); opacity: 1; }
		54.1667% { transform: translate3d(379.0px, 422.1px, 0); opacity: 1; }
		58.3333% { transform: translate3d(380.1px, 406.6px, 0); opacity: 1; }
		62.5000% { transform: translate3d(381.5px, 391.1px, 0); opacity: 1; }
		66.6667% { transform: translate3d(383.2px, 375.6px, 0); opacity: 1; }
		70.8333% { transform: translate3d(385.1px, 360.2px, 0); opacity: 1; }
		75.0000% { transform: translate3d(387.5px, 344.8px, 0); opacity: 1; }
		79.1667% { transform: translate3d(390.3px, 329.5px, 0); opacity: 1; }
		83.3333% { transform: translate3d(393.9px, 314.3px, 0); opacity: 1; }
		87.5000% { transform: translate3d(398.5px, 299.5px, 0); opacity: 1; }
		91.6667% { transform: translate3d(404.7px, 285.2px, 0); opacity: 1; }
		95.8333% { transform: translate3d(414.0px, 272.8px, 0); opacity: 0.55; }
		100.0000% { transform: translate3d(428.0px, 267.0px, 0); opacity: 0; }
	}
	@keyframes nt-f5 {
		0.0000% { transform: translate3d(772.0px, 190.0px, 0); opacity: 0; }
		4.1667% { transform: translate3d(783.5px, 190.8px, 0); opacity: 1; }
		8.3333% { transform: translate3d(794.9px, 193.0px, 0); opacity: 1; }
		12.5000% { transform: translate3d(806.0px, 196.2px, 0); opacity: 1; }
		16.6667% { transform: translate3d(816.9px, 200.2px, 0); opacity: 1; }
		20.8333% { transform: translate3d(827.5px, 204.8px, 0); opacity: 1; }
		25.0000% { transform: translate3d(837.8px, 210.0px, 0); opacity: 1; }
		29.1667% { transform: translate3d(847.9px, 215.7px, 0); opacity: 1; }
		33.3333% { transform: translate3d(857.7px, 221.9px, 0); opacity: 1; }
		37.5000% { transform: translate3d(867.2px, 228.5px, 0); opacity: 1; }
		41.6667% { transform: translate3d(876.4px, 235.5px, 0); opacity: 1; }
		45.8333% { transform: translate3d(885.3px, 242.9px, 0); opacity: 1; }
		50.0000% { transform: translate3d(893.8px, 250.6px, 0); opacity: 1; }
		54.1667% { transform: translate3d(902.0px, 258.8px, 0); opacity: 1; }
		58.3333% { transform: translate3d(909.8px, 267.3px, 0); opacity: 1; }
		62.5000% { transform: translate3d(917.2px, 276.3px, 0); opacity: 1; }
		66.6667% { transform: translate3d(924.1px, 285.6px, 0); opacity: 1; }
		70.8333% { transform: translate3d(930.4px, 295.3px, 0); opacity: 1; }
		75.0000% { transform: translate3d(936.1px, 305.3px, 0); opacity: 1; }
		79.1667% { transform: translate3d(941.2px, 315.7px, 0); opacity: 1; }
		83.3333% { transform: translate3d(945.4px, 326.5px, 0); opacity: 1; }
		87.5000% { transform: translate3d(948.9px, 337.5px, 0); opacity: 1; }
		91.6667% { transform: translate3d(951.5px, 348.8px, 0); opacity: 1; }
		95.8333% { transform: translate3d(953.0px, 360.2px, 0); opacity: 0.55; }
		100.0000% { transform: translate3d(953.6px, 371.8px, 0); opacity: 0; }
	}
	@keyframes nt-f6 {
		0.0000% { transform: translate3d(772.0px, 250.0px, 0); opacity: 0; }
		4.1667% { transform: translate3d(783.8px, 252.9px, 0); opacity: 1; }
		8.3333% { transform: translate3d(793.4px, 260.4px, 0); opacity: 1; }
		12.5000% { transform: translate3d(800.8px, 270.2px, 0); opacity: 1; }
		16.6667% { transform: translate3d(806.6px, 281.0px, 0); opacity: 1; }
		20.8333% { transform: translate3d(811.4px, 292.3px, 0); opacity: 1; }
		25.0000% { transform: translate3d(815.3px, 304.0px, 0); opacity: 1; }
		29.1667% { transform: translate3d(818.6px, 315.8px, 0); opacity: 1; }
		33.3333% { transform: translate3d(821.5px, 327.7px, 0); opacity: 1; }
		37.5000% { transform: translate3d(824.0px, 339.7px, 0); opacity: 1; }
		41.6667% { transform: translate3d(826.1px, 351.8px, 0); opacity: 1; }
		45.8333% { transform: translate3d(828.0px, 364.0px, 0); opacity: 1; }
		50.0000% { transform: translate3d(829.7px, 376.1px, 0); opacity: 1; }
		54.1667% { transform: translate3d(831.1px, 388.3px, 0); opacity: 1; }
		58.3333% { transform: translate3d(832.4px, 400.5px, 0); opacity: 1; }
		62.5000% { transform: translate3d(833.5px, 412.8px, 0); opacity: 1; }
		66.6667% { transform: translate3d(834.4px, 425.0px, 0); opacity: 1; }
		70.8333% { transform: translate3d(835.2px, 437.2px, 0); opacity: 1; }
		75.0000% { transform: translate3d(835.9px, 449.5px, 0); opacity: 1; }
		79.1667% { transform: translate3d(836.4px, 461.8px, 0); opacity: 1; }
		83.3333% { transform: translate3d(836.8px, 474.0px, 0); opacity: 1; }
		87.5000% { transform: translate3d(837.2px, 486.3px, 0); opacity: 1; }
		91.6667% { transform: translate3d(837.4px, 498.6px, 0); opacity: 1; }
		95.8333% { transform: translate3d(837.5px, 510.9px, 0); opacity: 0.55; }
		100.0000% { transform: translate3d(837.6px, 523.1px, 0); opacity: 0; }
	}
	@keyframes nt-f7 {
		0.0000% { transform: translate3d(772.0px, 310.0px, 0); opacity: 0; }
		4.1667% { transform: translate3d(788.0px, 310.7px, 0); opacity: 1; }
		8.3333% { transform: translate3d(804.0px, 312.6px, 0); opacity: 1; }
		12.5000% { transform: translate3d(819.8px, 315.4px, 0); opacity: 1; }
		16.6667% { transform: translate3d(835.4px, 319.0px, 0); opacity: 1; }
		20.8333% { transform: translate3d(850.9px, 323.2px, 0); opacity: 1; }
		25.0000% { transform: translate3d(866.2px, 328.0px, 0); opacity: 1; }
		29.1667% { transform: translate3d(881.3px, 333.4px, 0); opacity: 1; }
		33.3333% { transform: translate3d(896.3px, 339.3px, 0); opacity: 1; }
		37.5000% { transform: translate3d(911.0px, 345.7px, 0); opacity: 1; }
		41.6667% { transform: translate3d(925.5px, 352.6px, 0); opacity: 1; }
		45.8333% { transform: translate3d(939.7px, 360.1px, 0); opacity: 1; }
		50.0000% { transform: translate3d(953.7px, 368.0px, 0); opacity: 1; }
		54.1667% { transform: translate3d(967.3px, 376.4px, 0); opacity: 1; }
		58.3333% { transform: translate3d(980.6px, 385.4px, 0); opacity: 1; }
		62.5000% { transform: translate3d(993.5px, 395.0px, 0); opacity: 1; }
		66.6667% { transform: translate3d(1005.9px, 405.2px, 0); opacity: 1; }
		70.8333% { transform: translate3d(1017.7px, 416.1px, 0); opacity: 1; }
		75.0000% { transform: translate3d(1028.8px, 427.7px, 0); opacity: 1; }
		79.1667% { transform: translate3d(1038.9px, 440.1px, 0); opacity: 1; }
		83.3333% { transform: translate3d(1048.0px, 453.4px, 0); opacity: 1; }
		87.5000% { transform: translate3d(1055.7px, 467.5px, 0); opacity: 1; }
		91.6667% { transform: translate3d(1061.6px, 482.4px, 0); opacity: 1; }
		95.8333% { transform: translate3d(1065.4px, 498.0px, 0); opacity: 0.55; }
		100.0000% { transform: translate3d(1066.7px, 514.0px, 0); opacity: 0; }
	}
	@keyframes nt-f8 {
		0.0000% { transform: translate3d(772.0px, 370.0px, 0); opacity: 0; }
		4.1667% { transform: translate3d(785.3px, 371.7px, 0); opacity: 1; }
		8.3333% { transform: translate3d(798.0px, 375.9px, 0); opacity: 1; }
		12.5000% { transform: translate3d(810.1px, 381.7px, 0); opacity: 1; }
		16.6667% { transform: translate3d(821.6px, 388.6px, 0); opacity: 1; }
		20.8333% { transform: translate3d(832.6px, 396.4px, 0); opacity: 1; }
		25.0000% { transform: translate3d(843.0px, 404.9px, 0); opacity: 1; }
		29.1667% { transform: translate3d(852.9px, 414.0px, 0); opacity: 1; }
		33.3333% { transform: translate3d(862.3px, 423.5px, 0); opacity: 1; }
		37.5000% { transform: translate3d(871.3px, 433.5px, 0); opacity: 1; }
		41.6667% { transform: translate3d(879.7px, 443.9px, 0); opacity: 1; }
		45.8333% { transform: translate3d(887.8px, 454.7px, 0); opacity: 1; }
		50.0000% { transform: translate3d(895.3px, 465.8px, 0); opacity: 1; }
		54.1667% { transform: translate3d(902.4px, 477.2px, 0); opacity: 1; }
		58.3333% { transform: translate3d(908.9px, 489.0px, 0); opacity: 1; }
		62.5000% { transform: translate3d(914.9px, 501.0px, 0); opacity: 1; }
		66.6667% { transform: translate3d(920.4px, 513.2px, 0); opacity: 1; }
		70.8333% { transform: translate3d(925.4px, 525.7px, 0); opacity: 1; }
		75.0000% { transform: translate3d(929.7px, 538.4px, 0); opacity: 1; }
		79.1667% { transform: translate3d(933.5px, 551.3px, 0); opacity: 1; }
		83.3333% { transform: translate3d(936.6px, 564.4px, 0); opacity: 1; }
		87.5000% { transform: translate3d(939.0px, 577.6px, 0); opacity: 1; }
		91.6667% { transform: translate3d(940.8px, 590.9px, 0); opacity: 1; }
		95.8333% { transform: translate3d(941.9px, 604.2px, 0); opacity: 0.55; }
		100.0000% { transform: translate3d(942.2px, 617.7px, 0); opacity: 0; }
	}

	@media (prefers-reduced-motion: reduce) {
		.nt-wrap *,
		.nt-wrap *::before,
		.nt-wrap *::after {
			animation-play-state: paused !important;
			animation-delay: -2.4s !important;
		}
	}

/* Network figure: the section around it */
.ns-head { max-width:820px; }
.ns-head p { color:#3E4C66; }
.ns-fig { margin:48px 0 0; border:1px solid #D3E3E5; border-radius:16px; overflow:hidden; box-shadow:0 30px 60px -40px rgba(5,31,72,.45); }
.ns-fig .nt-host { max-width:none; }
.ns-fig .nt-caption { white-space:nowrap; gap:.75em; font-size:max(8px, calc(13px * var(--nt-scale, 1))); }
.ns-steps { margin-top:40px; }
.ns-step { height:100%; padding:24px 24px 26px; border-top:3px solid #17A2AC; background:#F4F9F9; border-radius:0 0 12px 12px; }
.ns-step--b { border-top-color:#051F48; } .ns-step--c { border-top-color:#17AC6B; }
.ns-k { display:flex; align-items:center; gap:10px; margin:0 0 14px; font:600 12px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing:.16em; text-transform:uppercase; color:#117985; }
.ns-step--b .ns-k { color:#051F48; } .ns-step--c .ns-k { color:#0F7A4B; }
.ns-k span { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#B4F4DC; color:#051F48; letter-spacing:0; }
.ns-step h4 { hyphens:auto; }
.ns-more { margin-top:32px; }
.ns--split .ns-fig { margin:0; }
.ns-list { list-style:none; margin:16px 0 0; padding:0; }
.ns-list li { position:relative; padding:0 0 0 30px; margin:0 0 10px; }
.ns-list li::before { content:''; position:absolute; left:0; top:.3em; width:18px; height:18px; border-radius:50%; background:#B4F4DC; border:1px solid #17AC6B; }
.ns-list li::after { content:''; position:absolute; left:6px; top:calc(.3em + 4px); width:5px; height:8px; border:solid #0F7A4B; border-width:0 2px 2px 0; transform:rotate(45deg); }
.ns-scope { margin-top:16px; font-size:.9em; line-height:1.6; color:#6D8189; }
@media (max-width: 640px) {
	.ns-fig .nt-caption { display:none; }
}
@media (max-width: 1023px) {
	.ns--split .ns-fig { margin-top:32px; }
	.ns-step { margin-bottom:16px; height:auto; }
	.ns-fig { margin-top:32px; border-radius:12px; }
}