/* Product landing pages (each project's main.htm). Classes are prefixed with pp- so that they never collide with the 2016 page styles the rest of the site still uses. */
.pp {
	--pp-accent: var(--primary-color);
	--pp-accent-2: #7fe3d6;
	--pp-gold: #e2ae47;
	--pp-surface: rgba(255, 255, 255, 0.72);
	--pp-surface-strong: rgba(255, 255, 255, 0.92);
	--pp-surface-border: rgba(0, 0, 0, 0.08);
	--pp-tile: rgba(0, 0, 0, 0.03);
	--pp-tile-hover: rgba(0, 0, 0, 0.06);
	--pp-mark-opacity: 0.08;
	--pp-glow: rgba(48, 162, 163, 0.35);
	--pp-heading: #1d2b2b;
	/* Section and card titles: a teal-tinted variant of the heading colour */
	--pp-title: #1f7576;
	--pp-muted: var(--text-color-secondary);
	--pp-radius: 16px;
	--pp-ease: cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	color: var(--text-color);
}

.dark-theme .pp {
	--pp-surface: rgba(22, 24, 25, 0.72);
	--pp-surface-strong: rgba(26, 29, 30, 0.92);
	--pp-surface-border: rgba(255, 255, 255, 0.08);
	--pp-tile: rgba(255, 255, 255, 0.03);
	--pp-tile-hover: rgba(255, 255, 255, 0.07);
	--pp-mark-opacity: 0.11;
	--pp-glow: rgba(61, 184, 185, 0.4);
	--pp-heading: #f2f5f5;
	--pp-title: #93d6d1;
}

.pp *,
.pp *::before,
.pp *::after {
	box-sizing: border-box;
}

.pp a {
	text-decoration: none;
}

.pp-section {
	position: relative;
	margin: 0 10px 64px;
}

.pp-sectionTitle {
	margin: 0 0 8px;
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: var(--font-weight-light);
	line-height: 1.15;
	letter-spacing: -0.5px;
	color: var(--pp-title);
}

	.pp-sectionTitle strong {
		font-weight: var(--font-weight-bold);
	}

.pp-sectionLead {
	margin: 0 0 36px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--pp-muted);
}

.pp-accent {
	background: linear-gradient(100deg, var(--pp-accent) 0%, var(--pp-accent-2) 35%, var(--pp-gold) 55%, var(--pp-accent) 80%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: pp-shimmer 9s linear infinite;
}

@keyframes pp-shimmer {
	from {
		background-position: 100% 0;
	}

	to {
		background-position: -150% 0;
	}
}

/* Hero */
/* The headline and the pitch share the first row, the video spans the whole column below them */
.pp-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 32px 56px;
	align-items: end;
	margin: 0 10px 64px;
}

.pp-heroMedia {
	grid-column: 1 / -1;
	margin-top: 8px;
}

.pp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
	padding: 6px 14px 6px 8px;
	border: 1px solid var(--pp-surface-border);
	border-radius: 999px;
	background: var(--pp-surface);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: 13px;
	color: var(--pp-muted);
}

	.pp-eyebrow b {
		padding: 2px 9px;
		border-radius: 999px;
		background: var(--pp-accent);
		font-size: 11px;
		letter-spacing: 0.6px;
		text-transform: uppercase;
		color: #fff;
	}

.pp-eyebrow:hover {
	color: var(--pp-heading);
	border-color: var(--pp-accent);
}

.pp-hero h1 {
	margin: 0;
	font-size: clamp(38px, 5vw, 62px);
	font-weight: var(--font-weight-light);
	line-height: 1.04;
	letter-spacing: -1.5px;
	color: var(--pp-heading);
}

	.pp-hero h1 strong {
		font-weight: 800;
	}

.pp-heroLead {
	margin: 0 0 22px;
	font-size: 19px;
	line-height: 1.5;
	color: var(--pp-muted);
}

.pp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
}

	.pp-chips li {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		margin: 0;
		padding: 7px 13px;
		border: 1px solid var(--pp-surface-border);
		border-radius: 999px;
		background: var(--pp-surface);
		font-size: 14px;
		color: var(--text-color);
	}

		.pp-chips li::before {
			content: "";
			width: 7px;
			height: 7px;
			border-radius: 50%;
			background: var(--pp-accent);
			box-shadow: 0 0 0 3px var(--pp-glow);
		}

.pp-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 14px;
}

.pp-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 0 28px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 17px;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.2px;
	white-space: nowrap;
	transition: transform 0.25s var(--pp-ease), box-shadow 0.25s var(--pp-ease), background-color 0.25s, border-color 0.25s, color 0.25s;
}

.pp-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pp a.pp-buttonPrimary {
	background: linear-gradient(135deg, #2e8f90 0%, #3db8b9 55%, #5fd0c8 100%);
	box-shadow: 0 8px 24px -8px var(--pp-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	color: #fff;
}

	.pp a.pp-buttonPrimary:hover {
		transform: translateY(-2px);
		box-shadow: 0 14px 34px -10px var(--pp-glow), 0 0 0 4px var(--pp-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	}

.pp a.pp-buttonGhost {
	border-color: var(--pp-surface-border);
	background: var(--pp-surface-strong);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--pp-heading);
}

	.pp a.pp-buttonGhost:hover {
		transform: translateY(-2px);
		border-color: var(--pp-accent);
		color: var(--pp-accent);
	}

.pp a.pp-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 2px;
	font-size: 15px;
	color: var(--pp-accent);
}

	.pp a.pp-link::after {
		content: "";
		position: absolute;
		left: 2px;
		right: 2px;
		bottom: 0;
		height: 1px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.3s var(--pp-ease);
	}

	.pp a.pp-link:hover::after {
		transform: scaleX(1);
	}

	.pp a.pp-link .pp-icon {
		width: 18px;
		height: 18px;
	}

/* Video: a poster with a play button that turns into the YouTube player on click, so nothing is fetched from YouTube until the visitor asks for it */
.pp-video {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	padding: 0;
	border: 0;
	border-radius: var(--pp-radius);
	background: #0b0d0e center / cover no-repeat;
	box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--pp-surface-border);
	cursor: pointer;
}

	.pp-video::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.65) 100%);
		transition: opacity 0.3s;
	}

	.pp-video::after {
		content: "";
		position: absolute;
		inset: -1px;
		border-radius: inherit;
		padding: 1px;
		background: linear-gradient(130deg, var(--pp-accent-2), transparent 35%, transparent 65%, var(--pp-gold));
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
		opacity: 0.8;
		pointer-events: none;
	}

.pp-videoPlay {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin: -42px 0 0 -42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
	transition: transform 0.3s var(--pp-ease), background-color 0.3s;
}

	.pp-videoPlay::before {
		content: "";
		position: absolute;
		inset: -12px;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, 0.35);
		animation: pp-pulse 2.6s var(--pp-ease) infinite;
	}

	.pp-videoPlay svg {
		width: 30px;
		height: 30px;
		margin-left: 5px;
		fill: #fff;
	}

.pp-video:hover .pp-videoPlay {
	transform: scale(1.08);
	background: var(--pp-accent);
}

.pp-videoCaption {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 18px;
	z-index: 1;
	font-size: 15px;
	text-align: left;
	color: rgba(255, 255, 255, 0.92);
}

	.pp-videoCaption span {
		display: block;
		font-size: 12px;
		letter-spacing: 1px;
		text-transform: uppercase;
		opacity: 0.7;
	}

.pp-video.is-playing::before,
.pp-video.is-playing .pp-videoPlay,
.pp-video.is-playing .pp-videoCaption {
	display: none;
}

.pp-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@keyframes pp-pulse {
	0% {
		transform: scale(0.85);
		opacity: 0.9;
	}

	100% {
		transform: scale(1.35);
		opacity: 0;
	}
}

/* Logo marquee. The track holds the logos twice and slides by half its width, so the loop has no seam. */
.pp-logos h2 {
	margin-bottom: 22px;
}

	.pp-logos .pp-marquee {
		margin: 0 -34px;
	}

.pp-marquee {
	position: relative;
	overflow: hidden;
	padding: 6px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.pp-marqueeTrack {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: pp-marquee var(--pp-marquee-duration, 45s) linear infinite;
}

.pp-marquee:hover .pp-marqueeTrack {
	animation-play-state: paused;
}

.pp-marqueeTrack li {
	flex: 0 0 auto;
	margin: 0 6px;
}

.pp-marqueeTrack a,
.pp-marqueeTrack span.pp-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 180px;
	height: 90px;
	position: relative;
	overflow: hidden;
	padding: 14px 22px;
	border: 1px solid var(--pp-surface-border);
	border-radius: 12px;
	background: var(--pp-tile);
	transition: background-color 0.3s, border-color 0.3s;
}

	/* A company's graphic mark, when it has one, sits faintly behind its name. The page sets it per tile through --pp-mark. */
	.pp-marqueeTrack a::before {
		content: "";
		position: absolute;
		inset: 10px;
		background: var(--pp-mark, none) center / contain no-repeat;
		opacity: var(--pp-mark-opacity);
		filter: var(--image-filter);
		transition: opacity 0.3s, transform 0.3s var(--pp-ease);
	}

	.pp-marqueeTrack a:hover::before {
		opacity: calc(var(--pp-mark-opacity) * 1.8);
		transform: scale(1.05);
	}

	.pp-marqueeTrack a > * {
		position: relative;
	}

	.pp-marqueeTrack a:hover {
		border-color: rgba(61, 184, 185, 0.45);
		background: var(--pp-tile-hover);
	}

/* Client logos sit on a padded 2:1 canvas of their own (see the clients page), so their tile needs little padding of its own */
.pp-marqueeTrack a:has(img) {
	padding: 4px 6px;
}

.pp-marqueeTrack img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0.75;
	filter: var(--image-filter);
	transition: opacity 0.3s, transform 0.3s var(--pp-ease);
}

.pp-marqueeTrack a:hover img {
	opacity: 1;
	transform: scale(1.06);
}

/* A company without a logo file is shown as its name */
.pp-wordmark {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.3px;
	text-align: center;
	color: var(--pp-heading);
	opacity: 0.55;
	transition: opacity 0.3s;
}

.pp-marqueeTrack a:hover .pp-wordmark {
	opacity: 1;
}

@keyframes pp-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* Feature cards */
.pp-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.pp-card {
	position: relative;
	overflow: hidden;
	padding: 34px 34px 26px;
	border: 1px solid var(--pp-surface-border);
	border-radius: var(--pp-radius);
	background: var(--pp-surface);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 20px 40px -30px rgba(0, 0, 0, 0.5);
	transition: transform 0.4s var(--pp-ease), border-color 0.4s, box-shadow 0.4s var(--pp-ease);
}

	/* Spotlight that follows the pointer, positioned by product.js through --pp-mx / --pp-my */
	.pp-card::before {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(420px circle at var(--pp-mx, 50%) var(--pp-my, -20%), var(--pp-glow), transparent 45%);
		opacity: 0;
		transition: opacity 0.4s;
		pointer-events: none;
	}

	.pp-card:hover {
		transform: translateY(-4px);
		border-color: rgba(61, 184, 185, 0.45);
		box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
	}

		.pp-card:hover::before {
			opacity: 0.55;
		}

	.pp-card > * {
		position: relative;
	}

.pp-cardHead {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px;
}

.pp-cardIcon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(61, 184, 185, 0.22), rgba(226, 174, 71, 0.18));
	box-shadow: inset 0 0 0 1px rgba(61, 184, 185, 0.35);
	transition: transform 0.4s var(--pp-ease);
}

	.pp-cardIcon svg {
		width: 26px;
		height: 26px;
		fill: none;
		stroke: var(--pp-accent);
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

.pp-card:hover .pp-cardIcon {
	transform: rotate(-6deg) scale(1.08);
}

.pp-card h3 {
	margin: 0;
	font-size: 24px;
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.3px;
	color: var(--pp-title);
}

.pp-card ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-card li {
	position: relative;
	margin: 0;
	padding: 10px 0 10px 26px;
	border-top: 1px solid var(--pp-surface-border);
	font-size: 15.5px;
	line-height: 1.45;
	color: var(--text-color-secondary);
}

	.pp-card li:first-child {
		border-top: 0;
	}

	.pp-card li::before {
		content: "";
		position: absolute;
		left: 2px;
		top: 17px;
		width: 12px;
		height: 6px;
		border-left: 2px solid var(--pp-accent);
		border-bottom: 2px solid var(--pp-accent);
		transform: rotate(-45deg);
	}

	.pp-card li strong {
		color: var(--pp-heading);
	}

/* Renderers and testimonials */
.pp-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
}

.pp-panel {
	padding: 34px;
	border: 1px solid var(--pp-surface-border);
	border-radius: var(--pp-radius);
	background: var(--pp-surface);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

	.pp-panel h2 {
		margin: 0 0 6px;
		font-size: 26px;
		font-weight: var(--font-weight-light);
		color: var(--pp-title);
	}

		.pp-panel h2 strong {
			font-weight: var(--font-weight-bold);
		}

	.pp-panel > p {
		margin: 0 0 22px;
		font-size: 15px;
		color: var(--pp-muted);
	}

.pp-renderers {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

	.pp-renderers li {
		margin: 0;
	}

	.pp-renderers a {
		display: block;
		overflow: hidden;
		border-radius: 10px;
		box-shadow: 0 0 0 1px var(--pp-surface-border);
		transition: transform 0.3s var(--pp-ease), box-shadow 0.3s;
	}

		.pp-renderers a:hover {
			transform: translateY(-3px);
			box-shadow: 0 0 0 2px var(--pp-accent), 0 12px 24px -12px var(--pp-glow);
		}

	.pp-renderers img {
		display: block;
		width: 100%;
		height: auto;
	}

.pp-quotes {
	position: relative;
	min-height: 210px;
	margin-top: 30px;
}

.pp-quote {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.6s var(--pp-ease), transform 0.6s var(--pp-ease);
	pointer-events: none;
}

	.pp-quote.is-active {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

	.pp-quote p {
		position: relative;
		margin: 0 0 16px;
		padding-left: 36px;
		font-size: 17px;
		font-style: italic;
		line-height: 1.55;
		color: var(--text-color);
	}

		.pp-quote p::before {
			content: "\201C";
			position: absolute;
			left: -4px;
			top: -16px;
			font-family: Georgia, serif;
			font-size: 64px;
			font-style: normal;
			line-height: 1;
			color: var(--pp-accent);
		}

	.pp-quote footer {
		padding-left: 36px;
		font-size: 14px;
		color: var(--text-color-light);
	}

		.pp-quote footer strong {
			color: var(--pp-heading);
		}

.pp-dots {
	display: flex;
	gap: 8px;
	margin-top: 18px;
	padding-left: 36px;
}

	.pp-dots span {
		width: 22px;
		height: 4px;
		border-radius: 2px;
		background: var(--pp-surface-border);
		cursor: pointer;
		transition: background-color 0.3s, width 0.3s var(--pp-ease);
	}

		.pp-dots span.is-active {
			width: 36px;
			background: var(--pp-accent);
		}

/* Closing call to action */
.pp-cta {
	position: relative;
	overflow: hidden;
	margin: 0 10px 40px;
	padding: 56px 40px;
	border-radius: 22px;
	background: radial-gradient(120% 140% at 0% 0%, #3db8b9 0%, #1f6e6f 45%, #123c3d 100%);
	text-align: center;
	color: #fff;
}

	.pp-cta::before {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(500px circle at var(--pp-mx, 80%) var(--pp-my, 20%), rgba(255, 255, 255, 0.18), transparent 50%);
		pointer-events: none;
	}

	.pp-cta > * {
		position: relative;
	}

	.pp-cta h2 {
		margin: 0 0 10px;
		font-size: clamp(28px, 3.6vw, 42px);
		font-weight: var(--font-weight-light);
		letter-spacing: -0.5px;
		color: #fff;
	}

		.pp-cta h2 strong {
			font-weight: 800;
		}

	.pp-cta p {
		max-width: 560px;
		margin: 0 auto 28px;
		font-size: 17px;
		line-height: 1.5;
		color: rgba(255, 255, 255, 0.82);
	}

	.pp-cta .pp-actions {
		justify-content: center;
	}

	.pp-cta a.pp-buttonPrimary {
		background: #fff;
		box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
		color: #165253;
	}

	.pp-cta a.pp-buttonGhost {
		border-color: rgba(255, 255, 255, 0.4);
		background: rgba(255, 255, 255, 0.08);
		color: #fff;
	}

		.pp-cta a.pp-buttonGhost:hover {
			border-color: #fff;
			color: #fff;
		}

/* Scroll reveal: product.js adds pp-reveal-ready to the root only when it can observe intersections, so the content never stays hidden without script */
.pp-reveal-ready [data-pp-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.8s var(--pp-ease), transform 0.8s var(--pp-ease);
	transition-delay: var(--pp-delay, 0s);
}

	.pp-reveal-ready [data-pp-reveal].is-visible {
		opacity: 1;
		transform: none;
	}

@media screen and (max-width: 1024px) {
	.pp-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.pp-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media screen and (max-width: 767px) {
	.pp-section {
		margin-bottom: 60px;
	}

	.pp-features {
		grid-template-columns: minmax(0, 1fr);
	}

	.pp-card,
	.pp-panel {
		padding: 26px 22px 20px;
	}

	.pp-logos .pp-marquee {
		margin: 0 -22px;
	}

	.pp-marqueeTrack a,
	.pp-marqueeTrack span.pp-logo {
		width: 130px;
		height: 66px;
	}

	.pp-cta {
		padding: 40px 22px;
	}

	.pp-quotes {
		min-height: 280px;
	}

	.pp-renderers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.pp-accent,
	.pp-marqueeTrack,
	.pp-videoPlay::before {
		animation: none;
	}

	.pp-marquee {
		overflow-x: auto;
	}

	.pp-reveal-ready [data-pp-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}