/* Decision Cloud® platform diagram (replaces the old cloud-and-hexagons PNG on
   /software/decision-cloud, /software/larry-the-digital-analyst and /about/company).
   Markup is generated from the header Products / Solutions menus; all classes are scoped cpx-pd-.
   Layout responds to the width of the content column (container queries), not the viewport;
   without container-query support it falls back to the stacked (narrow) layout. */

.cpx-pd {
	container-type: inline-size;
	clear: both;
	margin: 21px 0;
	border: 1px solid #E6E9EC;
	border-radius: 16px;
	overflow: hidden;
	background: #F5F7F9;
	font-family: 'Open Sans', sans-serif;
	line-height: 1.4;
	text-align: center;
	box-shadow: 0 4px 16px rgba(14,46,69,.06);
}
.cpx-pd *,
.cpx-pd *::before,
.cpx-pd *::after { box-sizing: border-box; }
.cpx-pd .cpx-pd__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- navy "cloud": title, data -> Larry, products ---------- */
.cpx-pd__cloud {
	position: relative;
	padding: 24px 16px 22px;
	background:
		radial-gradient(ellipse 70% 55% at 50% 0%, rgba(1,112,172,.42) 0%, rgba(1,112,172,0) 100%),
		linear-gradient(165deg, #0B2538 0%, #0E2E45 58%, #12527D 100%);
	color: #C9D6E0;
}
.cpx-pd .cpx-pd__head { margin: 0 0 18px; }
.cpx-pd h3.cpx-pd__title {
	margin: 0 !important;
	padding: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	text-align: center;
	text-transform: none;
	color: #fff;
}
.cpx-pd h3.cpx-pd__title sup { font-size: .5em; line-height: 0; vertical-align: super; }
.cpx-pd p.cpx-pd__subtitle {
	margin: 6px 0 0;
	padding: 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #FFB012;
}

/* data sources feeding the AI engine (narrow: sources side by side, arrows down, engine below) */
.cpx-pd .cpx-pd__engine {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	grid-template-areas: "in ex" "fin fex" "core core";
	align-items: center;
	justify-items: center;
	gap: 0 12px;
	margin: 0 0 22px;
}
.cpx-pd p.cpx-pd__data {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
}
.cpx-pd__data--in { grid-area: in; }
.cpx-pd__data--ex { grid-area: ex; }
.cpx-pd__icon {
	display: block;
	width: 26px;
	height: 26px;
	fill: rgba(255,176,18,.14);
	stroke: #FFB012;
	stroke-width: 1.6;
	stroke-linecap: round;
}
.cpx-pd__flow {
	position: relative;
	display: block;
	width: 2px;
	height: 26px;
	margin: 6px 0 8px;
	background: linear-gradient(180deg, rgba(255,176,18,.15), #FFB012);
	border-radius: 2px;
}
.cpx-pd__flow::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	margin-left: -5px;
	border: 5px solid transparent;
	border-top: 6px solid #FFB012;
	border-bottom: 0;
}
.cpx-pd__flow--in { grid-area: fin; }
.cpx-pd__flow--ex { grid-area: fex; }

.cpx-pd a.cpx-pd__core {
	grid-area: core;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	max-width: 100%;
	padding: 10px 18px 10px 10px;
	border-radius: 14px;
	background: #fff;
	color: #0E2E45;
	text-align: left;
	text-decoration: none !important;
	box-shadow: 0 0 0 4px rgba(255,176,18,.35), 0 14px 30px rgba(0,0,0,.3);
	transition: box-shadow .2s ease, transform .2s ease;
}
.cpx-pd a.cpx-pd__core:hover { transform: translateY(-2px); box-shadow: 0 0 0 4px #FFB012, 0 16px 34px rgba(0,0,0,.34); }
/* Larry logo on a flat-top blue hexagon with an even orange rim, like the hexagons in the original
   Decision Cloud graphic; the bust stands on the hexagon's bottom edge so nothing looks cut off */
.cpx-pd__core-icon {
	flex: 0 0 auto;
	position: relative;
	display: block;
	width: 72px;
	height: 63px;
}
.cpx-pd__core-fig {
	position: absolute;
	inset: 3px;
	overflow: hidden;
	background: #5175A4;
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.cpx-pd .cpx-pd__core-fig img { position: absolute; left: 50%; bottom: -1px; display: block; width: 46px; height: auto; max-width: none; margin: 0; border: 0; transform: translateX(-50%); }
.cpx-pd__core-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 63'%3E%3Cpolygon points='2.5,31.5 19.4,2.5 52.6,2.5 69.5,31.5 52.6,60.5 19.4,60.5' fill='none' stroke='%23FFB012' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.cpx-pd__core-text { display: flex; flex-direction: column; }
.cpx-pd__core-k {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #5B6B77;
}
.cpx-pd__core-t { font-size: 15px; font-weight: 700; line-height: 1.3; color: #0E2E45; }
.cpx-pd a.cpx-pd__core:hover .cpx-pd__core-t { color: #017CC0; }

/* section labels with hairlines either side */
.cpx-pd h4.cpx-pd__label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px !important;
	padding: 0;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .14em;
	text-align: center;
	text-transform: uppercase;
	color: #FFB012;
}
.cpx-pd h4.cpx-pd__label::before,
.cpx-pd h4.cpx-pd__label::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(255,255,255,.2); }

/* lists: neutralise the content-column bullets / indents */
.cpx-pd ul.cpx-pd__list { display: grid; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.cpx-pd ul.cpx-pd__list > li { margin: 0 !important; padding: 0 !important; background: none; }
.cpx-pd ul.cpx-pd__list > li::before { content: none !important; display: none !important; }

/* software products */
.cpx-pd ul.cpx-pd__products { grid-template-columns: minmax(0,1fr); gap: 8px; }
.cpx-pd ul.cpx-pd__products a {
	display: flex;
	align-items: center;
	gap: 9px;
	height: 100%;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 10px;
	background: rgba(255,255,255,.06);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	text-decoration: none !important;
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.cpx-pd ul.cpx-pd__products a:hover { background: rgba(255,176,18,.14); border-color: #FFB012; color: #fff; transform: translateY(-1px); }
.cpx-pd__hex {
	flex: 0 0 auto;
	width: 12px;
	height: 14px;
	background: #FFB012;
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.cpx-pd__ext { margin-left: 4px; font-size: .9em; color: #FFB012; }

/* ---------- business functions (solutions) ---------- */
.cpx-pd__functions { position: relative; padding: 26px 16px 18px; }
.cpx-pd__functions::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 50%;
	margin-left: -11px;
	border: 11px solid transparent;
	border-top: 10px solid #0F3350;
	border-bottom: 0;
}
.cpx-pd h4.cpx-pd__label--light { color: #0E2E45; }
.cpx-pd h4.cpx-pd__label--light::before,
.cpx-pd h4.cpx-pd__label--light::after { background: #D9DFE5; }
.cpx-pd .cpx-pd__cols { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.cpx-pd .cpx-pd__col {
	padding: 14px 16px 8px;
	border: 1px solid #E6E9EC;
	border-top: 3px solid #FFB012;
	border-radius: 12px;
	background: #fff;
	text-align: left;
	box-shadow: 0 4px 16px rgba(14,46,69,.05);
}
.cpx-pd h5.cpx-pd__col-h {
	margin: 0 0 4px !important;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	color: #0E2E45;
}
.cpx-pd ul.cpx-pd__solutions { grid-template-columns: minmax(0,1fr); }
.cpx-pd ul.cpx-pd__solutions > li + li { border-top: 1px solid #EEF0F2; }
.cpx-pd ul.cpx-pd__solutions a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	padding: 7px 0;
	color: #0E2E45;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.35;
	text-decoration: none !important;
}
.cpx-pd ul.cpx-pd__solutions a::after { content: "\203A"; flex: 0 0 auto; color: #E09510; font-size: 20px; line-height: 1; }
.cpx-pd ul.cpx-pd__solutions a:hover { color: #017CC0; }
.cpx-pd ul.cpx-pd__solutions .cpx-pd__ext { color: #E09510; }

.cpx-pd a:focus-visible { outline: 3px solid #FFB012; outline-offset: 2px; }
.cpx-pd .cpx-pd__functions a:focus-visible { outline-color: #017CC0; }

@media (prefers-reduced-motion: reduce) {
	.cpx-pd a { transition: none !important; transform: none !important; }
}

/* ---------- wider columns ---------- */
@container (min-width: 340px) {
	.cpx-pd ul.cpx-pd__products { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@container (min-width: 460px) {
	.cpx-pd ul.cpx-pd__products a { gap: 10px; padding: 8px 12px; }
	.cpx-pd__cloud { padding: 28px 22px 24px; }
	.cpx-pd__functions { padding: 28px 22px 22px; }
	.cpx-pd h3.cpx-pd__title { font-size: 28px; }
	.cpx-pd ul.cpx-pd__solutions { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 20px; }
	.cpx-pd ul.cpx-pd__solutions > li:nth-child(2) { border-top: 0; }
}
@container (min-width: 540px) {
	/* one row: Internal data -> Larry <- External data */
	.cpx-pd .cpx-pd__engine {
		grid-template-columns: auto minmax(18px,1fr) auto minmax(18px,1fr) auto;
		grid-template-areas: "in fin core fex ex";
		gap: 0 10px;
	}
	.cpx-pd__flow { width: 100%; height: 2px; margin: 0; background: linear-gradient(90deg, rgba(255,176,18,.15), #FFB012); }
	.cpx-pd__flow::after { left: auto; right: -6px; top: 50%; bottom: auto; margin: -5px 0 0; border: 5px solid transparent; border-left: 6px solid #FFB012; border-right: 0; }
	.cpx-pd__flow--ex { background: linear-gradient(270deg, rgba(255,176,18,.15), #FFB012); }
	.cpx-pd__flow--ex::after { right: auto; left: -6px; border-left: 0; border-right: 6px solid #FFB012; }
	.cpx-pd a.cpx-pd__core { max-width: 252px; }
}
@container (min-width: 580px) {
	.cpx-pd .cpx-pd__cols { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
	.cpx-pd .cpx-pd__col { padding: 14px 12px 6px; }
	.cpx-pd h5.cpx-pd__col-h { display: flex; align-items: flex-end; min-height: 2.6em; font-size: 14px; }
	.cpx-pd ul.cpx-pd__solutions { grid-template-columns: minmax(0,1fr); }
	.cpx-pd ul.cpx-pd__solutions > li:nth-child(2) { border-top: 1px solid #EEF0F2; }
	.cpx-pd ul.cpx-pd__solutions a { font-size: 13px; }
}