/*
 * proof/how. Four portrait tiles (285 : 422, as the reference) in the content
 * width: 434 wide, 24 apart at 1920, 20 radius. The visual takes the upper
 * part, the copy block at the bottom has a fixed height (title two lines,
 * text three) so the four tiles align. proof.js sets --pf-tw (the tile's
 * width in px) on every tile; everything inside the visuals is sized from
 * it, so the push notification and its type scale with the tile.
 * Kinds: image (a still, optionally light with dark copy, optionally with a
 * silent loop), dial (ticks turn lime in turn, the arrow turns up-right),
 * phone (photo, the push notification fades in on the screen plane), growth
 * (counter, bars grow, the line draws; started by proof.js with is-in) and
 * team (photo cards sliding; kept for the field, the live page uses a still).
 * Reduced motion: no reveal, no loops, every visual in its final state.
 * No bottom padding: the next block sets the gap, as after proof/split.
 */

.pf-block.pf-howsec {
	padding-top: calc(111 * var(--pf-u));
}
.pf-block .pf-how {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: calc(24 * var(--pf-u));
	margin-top: calc(72 * var(--pf-u));
	padding: 0;
	list-style: none;
}
.pf-block .pf-how-tile {
	--pf-tw: 340px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 285 / 422;
	min-width: 0;
	overflow: hidden;
	border-radius: 20px;
	background: #fff;
	color: var(--pf-ink);
	isolation: isolate;
	/* Reveal (proof.js): from 28px below and transparent. */
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	transition-delay: calc(var(--pf-i, 0) * 110ms);
}
.pf-block .pf-how.is-in .pf-how-tile,
.pf-block .pf-how.no-reveal .pf-how-tile {
	opacity: 1;
	transform: none;
}
.pf-block .pf-how-tile--dial {
	background: #e9e8e6;
}
.pf-block .pf-how-tile--phone,
.pf-block .pf-how-tile--image {
	background: #2b2b2b;
	color: #fff;
}
.pf-block .pf-how-tile--image.pf-how-tile--light {
	background: #fff;
	color: var(--pf-ink);
}
.pf-block .pf-how-tile--growth {
	background: #1c1e22;
	color: #fff;
}

/* The visual: the upper 60 % for dial / growth / team, the whole tile for photos. */
.pf-block .pf-how-media {
	position: absolute;
	inset: 0 0 40%;
}
.pf-block .pf-how-tile--phone .pf-how-media,
.pf-block .pf-how-tile--image .pf-how-media {
	inset: 0;
}
.pf-block .pf-how-media img,
.pf-block .pf-how-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}
.pf-block .pf-how-tile--light .pf-how-media img {
	object-position: 50% 0;
}
.pf-block .pf-how-video {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}
.pf-block .pf-how-video.is-playing {
	opacity: 1;
}
/* Dark photo tiles: gradient under the copy. */
.pf-block .pf-how-tile--phone .pf-how-media::after,
.pf-block .pf-how-tile--image:not(.pf-how-tile--light) .pf-how-media::after {
	content: "";
	position: absolute;
	inset: 45% 0 0;
	background: linear-gradient(to bottom, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.75) 55%, rgba(20, 20, 20, 0.92) 100%);
}
/* Light photo tiles: the copy stands on white, the image fades out above it. */
.pf-block .pf-how-tile--light .pf-how-media::after {
	content: "";
	position: absolute;
	inset: 58% 0 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 45%);
}

/* Copy block, fixed height: title two lines (bottom-aligned), text three. */
.pf-block .pf-how-body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: calc(8 * var(--pf-t));
	padding: calc(22 * var(--pf-u)) calc(26 * var(--pf-u)) calc(26 * var(--pf-u));
}
.pf-block .pf-how-title {
	display: flex;
	align-items: flex-end;
	min-height: calc(2 * 1.2em);
	font-family: var(--pf-sans);
	font-weight: 500;
	font-size: calc(21 * var(--pf-t));
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: inherit;
	text-wrap: balance;
}
.pf-block .pf-how-text {
	min-height: calc(3 * 1.5em);
	font-size: calc(13.5 * var(--pf-t));
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: rgba(16, 17, 20, 0.6);
}
.pf-block .pf-how-tile--phone .pf-how-text,
.pf-block .pf-how-tile--image:not(.pf-how-tile--light) .pf-how-text,
.pf-block .pf-how-tile--growth .pf-how-text {
	color: rgba(255, 255, 255, 0.72);
}
.pf-block .pf-how-link {
	display: flex;
	justify-content: center;
	margin-top: calc(40 * var(--pf-u));
}

/* ---- Team (field kind, not used on the live page): photo cards sliding right to left ---- */
.pf-block .pf-how-tile--team .pf-how-media {
	display: flex;
	align-items: center;
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.pf-block .pf-how-track {
	display: flex;
	flex: none;
	align-items: center;
	gap: calc(var(--pf-tw) * 0.03);
	width: max-content;
	padding-left: calc(var(--pf-tw) * 0.03);
	animation: pf-how-slide calc(var(--pf-cards, 5) * 3.2s) linear infinite;
}
.pf-block .pf-how-card {
	flex: none;
	width: calc(var(--pf-tw) * 0.36);
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: 2px solid #fff;
	border-radius: calc(var(--pf-tw) * 0.034);
	background: #dcdcdc;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
	transform: rotate(-5deg) translateY(4%);
}
.pf-block .pf-how-card:nth-child(even) {
	transform: rotate(5deg) translateY(-4%);
}
.pf-block .pf-how-card img {
	position: static;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@keyframes pf-how-slide {
	to {
		transform: translateX(-50%);
	}
}

/* ---- Dial: tick ring, the first 32 ticks turn lime in turn, the arrow turns ---- */
.pf-block .pf-how-tile--dial .pf-how-media {
	display: grid;
	place-items: center;
}
.pf-block .pf-how-dial {
	width: 66%;
	height: auto;
	overflow: visible;
}
.pf-block .pf-how-dial-ring {
	fill: none;
	stroke: rgba(0, 0, 0, 0.04);
	stroke-width: 12;
}
.pf-block .pf-how-dial-ring--2 {
	stroke: rgba(0, 0, 0, 0.03);
	stroke-width: 10;
}
.pf-block .pf-how-dial-ticks line {
	stroke: rgba(0, 0, 0, 0.18);
	stroke-width: 2;
	stroke-linecap: round;
}
.pf-block .pf-how-dial-ticks line:nth-child(-n + 32) {
	stroke-width: 3;
	animation: pf-how-tick 4s ease-in-out infinite;
	animation-delay: calc(var(--pf-n, 0) * 28ms);
}
.pf-block .pf-how-dial-hub {
	fill: #fff;
	stroke: rgba(0, 0, 0, 0.06);
}
.pf-block .pf-how-dial-arrow path {
	fill: none;
	stroke: var(--pf-blue);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.pf-block .pf-how-dial-arrow {
	transform-origin: 0 0;
	animation: pf-how-arrow 4s ease-in-out infinite;
}
@keyframes pf-how-tick {
	0%, 12% {
		stroke: rgba(0, 0, 0, 0.18);
	}
	30%, 78% {
		stroke: var(--pf-lime);
	}
	92%, 100% {
		stroke: rgba(0, 0, 0, 0.18);
	}
}
@keyframes pf-how-arrow {
	0%, 12% {
		transform: rotate(0deg);
	}
	40%, 78% {
		transform: rotate(45deg);
	}
	92%, 100% {
		transform: rotate(0deg);
	}
}

/* ---- Phone: the push notification on the lock screen. Its plane was measured in the photo
   (four corners of a notification rendered there once) and is reproduced as a matrix; it
   fades in like on iOS: a little smaller and blurred, then sharp, out again after 4 s. ---- */
.pf-block .pf-how-push-anchor {
	position: absolute;
	left: calc(var(--pf-tw) * 0.2634);
	top: calc(var(--pf-tw) * 0.4635);
	width: calc(var(--pf-tw) * 0.4455);
	transform-origin: 0 0;
	transform: matrix3d(1.02022, -0.09677, 0, 0.0001556, 0.105054, 0.990617, 0, -0.0000855, 0, 0, 1, 0, 0, 0, 0, 1);
}
.pf-block .pf-how-push {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--pf-tw) * 0.024);
	padding: calc(var(--pf-tw) * 0.024) calc(var(--pf-tw) * 0.028);
	border-radius: calc(var(--pf-tw) * 0.03);
	background: rgba(255, 255, 255, 0.93);
	box-shadow: 0 calc(var(--pf-tw) * 0.015) calc(var(--pf-tw) * 0.04) rgba(0, 0, 0, 0.28);
	color: #111;
	font-family: var(--pf-sans);
	transform-origin: 50% 50%;
	animation: pf-how-push 7s ease-in-out infinite;
}
.pf-block .pf-how-push-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: calc(var(--pf-tw) * 0.065);
	height: calc(var(--pf-tw) * 0.065);
	border-radius: 22%;
	background: var(--pf-blue);
	color: #fff;
	font-weight: 700;
	font-size: calc(var(--pf-tw) * 0.04);
	line-height: 1;
}
.pf-block .pf-how-push-body {
	display: flex;
	flex-direction: column;
	gap: calc(var(--pf-tw) * 0.004);
	min-width: 0;
	font-size: calc(var(--pf-tw) * 0.0235);
	line-height: 1.3;
}
.pf-block .pf-how-push-head {
	display: flex;
	justify-content: space-between;
	gap: calc(var(--pf-tw) * 0.02);
	font-size: calc(var(--pf-tw) * 0.025);
}
.pf-block .pf-how-push-head span {
	color: rgba(0, 0, 0, 0.45);
	font-weight: 400;
}
@keyframes pf-how-push {
	0%, 8% {
		opacity: 0;
		transform: scale(0.86);
		filter: blur(3px);
	}
	18%, 74% {
		opacity: 1;
		transform: scale(1);
		filter: blur(0);
	}
	86%, 100% {
		opacity: 0;
		transform: scale(0.94);
		filter: blur(2px);
	}
}

/* ---- Growth: label, counter, bars and the line ---- */
.pf-block .pf-how-growth {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: calc(6 * var(--pf-u));
	padding: calc(28 * var(--pf-u));
}
.pf-block .pf-how-metric-label {
	display: flex;
	justify-content: space-between;
	font-family: var(--pf-mono);
	font-size: calc(12 * var(--pf-t));
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}
.pf-block .pf-how-metric {
	font-weight: 500;
	font-size: calc(44 * var(--pf-t));
	line-height: 1;
	letter-spacing: -0.04em;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.pf-block .pf-how-metric small {
	margin-left: 8px;
	font-size: calc(15 * var(--pf-t));
	font-weight: 500;
	letter-spacing: 0;
	color: var(--pf-lime);
}
.pf-block .pf-how-chart {
	width: 100%;
	height: auto;
	margin-top: calc(14 * var(--pf-u));
}
.pf-block .pf-how-bars rect {
	fill: #fff;
	transform-box: fill-box;
	transform-origin: 50% 100%;
	transform: scaleY(0);
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(0.3s + var(--pf-n, 0) * 32ms);
}
.pf-block .pf-how-line {
	fill: none;
	stroke: var(--pf-lime);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 420;
	stroke-dashoffset: 420;
	transition: stroke-dashoffset 1.8s ease-out 0.6s;
}
.pf-block .pf-how-dot {
	fill: var(--pf-lime);
	opacity: 0;
	transition: opacity 0.4s ease;
}
.pf-block .pf-how-dot--a {
	transition-delay: 0.6s;
}
.pf-block .pf-how-dot--b {
	transition-delay: 2.3s;
}
.pf-block .pf-how.is-in .pf-how-bars rect,
.pf-block .pf-how.no-reveal .pf-how-bars rect {
	transform: scaleY(1);
}
.pf-block .pf-how.is-in .pf-how-line,
.pf-block .pf-how.no-reveal .pf-how-line {
	stroke-dashoffset: 0;
}
.pf-block .pf-how.is-in .pf-how-dot,
.pf-block .pf-how.no-reveal .pf-how-dot {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.pf-block .pf-how-tile {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.pf-block .pf-how-track,
	.pf-block .pf-how-dial-ticks line,
	.pf-block .pf-how-dial-arrow,
	.pf-block .pf-how-push {
		animation: none;
	}
	.pf-block .pf-how-dial-ticks line:nth-child(-n + 32) {
		stroke: var(--pf-lime);
	}
	.pf-block .pf-how-dial-arrow {
		transform: rotate(45deg);
	}
	.pf-block .pf-how-push {
		opacity: 1;
	}
	.pf-block .pf-how-bars rect,
	.pf-block .pf-how-line,
	.pf-block .pf-how-dot {
		transition: none;
	}
}

/* Tablet: two across. */
@media (max-width: 1024px) {
	.pf-block.pf-howsec {
		padding-top: 88px;
	}
	.pf-block .pf-how {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		margin-top: 44px;
	}
	.pf-block .pf-how-body {
		padding: 20px 22px 24px;
	}
	.pf-block .pf-how-growth {
		padding: 22px;
	}
	.pf-block .pf-how-link {
		margin-top: 32px;
	}
}
/* Phone: one row to swipe, a bit of the next tile visible. */
@media (max-width: 767px) {
	.pf-block .pf-how {
		display: flex;
		gap: 12px;
		margin-right: calc(-1 * var(--pf-gutter));
		padding-right: var(--pf-gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.pf-block .pf-how::-webkit-scrollbar {
		display: none;
	}
	.pf-block .pf-how-tile {
		flex: 0 0 78vw;
		max-width: 340px;
		scroll-snap-align: start;
	}
	.pf-block .pf-how-title {
		font-size: 20px;
	}
	.pf-block .pf-how-text {
		font-size: 13.5px;
	}
	.pf-block .pf-how-metric {
		font-size: 38px;
	}
}