/* ==========================================================================
   Home page sections. Every measurement comes from the Figma source
   (file qJY7C3cgNfhLj6FU3p5MgC, frame 6:265, 1728px wide, 64px gutters).
   ========================================================================== */

/* ============================================================== Hero ===== */

.pp93-hero {
	position: relative;
	overflow: hidden;
	min-height: 1045px;
	background: var(--pp93-dark);
	color: #FFFFFF;
	isolation: isolate;
}

.pp93-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* The wash is baked into the photo rather than laid over it in CSS.
   The source anchors it in the bottom-left corner — alpha 0.97 there, 0.00 at the
   bottom-right, 0.07 at the centre — which no single linear-gradient reproduces; the
   closest one still left the hero ~33 levels out. A safety wash stays here for the
   case where an editor uploads a photo with no darkening of its own, so the white
   headline never lands on a bright picture. */
.pp93-hero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: none;
}

.pp93-hero__inner {
	position: relative;
	display: flex;
	min-height: 1045px;
	padding-top: 170px;
}

.pp93-hero__left {
	display: flex;
	flex-direction: column;
	gap: 100px;
	width: 462px;
	max-width: 100%;
}

.pp93-hero__head { display: flex; flex-direction: column; gap: 12px; }

.pp93-hero__title {
	font-size: 48px;
	line-height: 57.6px;
	font-weight: 900;
	text-transform: uppercase;
	/* The headline fades from white into grey down its own box. */
	background: linear-gradient(174.44deg, #FFFFFF 8%, #585060 245%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pp93-hero__lead {
	font-size: 20px;
	line-height: 30px;
	color: var(--pp93-on-dark);
}

/* --- The bet-slip card --------------------------------------------------- */

.pp93-hero__card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 415px;
	max-width: 100%;
	padding: 24px;
	border-radius: var(--pp93-radius-lg);
	background: var(--pp93-glass);
	backdrop-filter: blur(18.3px);
	-webkit-backdrop-filter: blur(18.3px);
}

.pp93-hero__shot { display: block; overflow: hidden; border-radius: 14px; }
.pp93-hero__shot img { width: 100%; height: auto; }
.pp93-hero__card .pp93-btn { width: 100%; }

/* --- Faces and rating ---------------------------------------------------- */

.pp93-proof { display: flex; align-items: center; gap: 20px; }

.pp93-proof__faces { display: flex; align-items: center; }

.pp93-proof__face {
	display: block;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 50%;
	background: #D9D9D9;
}

.pp93-proof__face + .pp93-proof__face { margin-left: -9px; }
.pp93-proof__face img { width: 100%; height: 100%; object-fit: cover; }

.pp93-proof__rating { display: flex; flex-direction: column; justify-content: center; }
.pp93-proof__stars { display: flex; color: var(--pp93-gold); }
.pp93-proof__stars svg { width: 16px; height: 16px; }

.pp93-proof__label {
	font-size: 16px;
	line-height: 24px;
	color: var(--pp93-on-dark-dim);
}

/* On the light discover panel the same block needs the accent colour instead. */
.pp93-proof--light .pp93-proof__face { width: 50px; height: 50px; }
.pp93-proof--light .pp93-proof__stars svg { width: 24px; height: 24px; }
.pp93-proof--light .pp93-proof__label { color: var(--pp93-blue); }

/* --- Notification chips -------------------------------------------------- */

.pp93-notes { position: absolute; inset: 0; pointer-events: none; }

.pp93-note {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	border-radius: var(--pp93-radius-lg);
	background: var(--pp93-glass);
	backdrop-filter: blur(18.3px);
	-webkit-backdrop-filter: blur(18.3px);
}

/* Three fixed positions, straight from the frame. The container's padding box starts
   at the viewport edge, so these are the frame's own x values — subtracting the gutter
   shifted every chip 64px left. */
.pp93-note--1 { left: 1249px; top: 131px; width: 280px; }
.pp93-note--2 { left: 680px;  top: 339px; width: 266px; }
.pp93-note--3 { left: 1424px; top: 385px; width: 249px; }

.pp93-note__amount {
	font-size: 32px;
	line-height: 38.4px;
	font-weight: 600;
	color: var(--pp93-amber);
}

/* One line, as in the source: the chip is exactly 98px tall — 16 + 38 + 4 + 24 + 16 —
   and a second line would break that. */
.pp93-note__text {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 16px;
	line-height: 24px;
	color: var(--pp93-on-dark);
}

/* The oversized mark sits on the laptop lid at x=1020 in the frame, which is not the
   page centre. */
.pp93-hero__mark {
	position: absolute;
	left: 1020px;
	bottom: 87px;
	width: 93px;
	color: #FFFFFF;
	opacity: .55;
}

.pp93-hero__mark svg { width: 93px; height: 82px; }

/* The About copy follows the hero directly, with the contents card under it. The
   copy needs its own top space, and the card drops its top padding so the two do not
   stack into a double gap. */
.pp93-hero + .pp93-seo { padding-top: 72px; }
.pp93-seo + .pp93-toc { padding-top: 0; }

/* ============================================================ Mosaic ===== */

.pp93-mosaic {
	position: relative;
	overflow: hidden;
	min-height: 1043px;
	background: var(--pp93-bg);
}

/* Two soft blooms behind the heading. */
.pp93-mosaic__glow {
	position: absolute;
	z-index: 1;
	border-radius: 50%;
	filter: blur(90px);
	pointer-events: none;
}

.pp93-mosaic__glow--gold  { left: 577px; top: 149px; width: 291px; height: 89px;  background: rgba(255, 187, 50, .3); }
.pp93-mosaic__glow--lilac { left: 963px; top: 185px; width: 204px; height: 112px; background: rgba(167, 181, 255, .75); }

/* --- The photo wall ------------------------------------------------------
   Nine columns of 164x208 tiles at fixed offsets. The wall keeps the design's
   1600px width and scales as one piece below it: the columns are staggered by
   hand-set offsets that only read correctly in proportion. */

.pp93-mosaic__wall {
	position: absolute;
	left: 50%;
	top: 80px;
	z-index: 0;
	display: flex;
	gap: 15.4px;
	width: 1600px;
	transform: translateX(-50%) scale(var(--pp93-wall-k, 1));
	transform-origin: top center;
	pointer-events: none;
}

.pp93-mosaic__col {
	display: flex;
	flex-direction: column;
	gap: 15.5px;
	width: 164px;
	flex: none;
}

/* Each column starts lower than the last up to the middle, then rises again. */
.pp93-mosaic__col--1, .pp93-mosaic__col--9 { margin-top: 0; }
.pp93-mosaic__col--2, .pp93-mosaic__col--8 { margin-top: 79px; }
.pp93-mosaic__col--3, .pp93-mosaic__col--7 { margin-top: 221px; }
.pp93-mosaic__col--4, .pp93-mosaic__col--6 { margin-top: 298px; }
.pp93-mosaic__col--5 { margin-top: 244px; }

.pp93-mosaic__tile {
	width: 164px;
	height: 208px;
	overflow: hidden;
	border-radius: 13.13px;
	flex: none;
}

.pp93-mosaic__tile img { width: 100%; height: 100%; object-fit: cover; }

/* The empty tile that heads every column. */
.pp93-mosaic__tile--empty {
	border-radius: 8.76px;
	background: linear-gradient(180deg, rgba(217, 222, 250, 0) 0%, #D9DEFA 226%);
}

/* --- Centred copy -------------------------------------------------------- */

.pp93-mosaic__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 170px;
	text-align: center;
}

.pp93-mosaic__title { max-width: 725px; }
.pp93-mosaic__lead { max-width: 460px; margin-top: 24px; }
.pp93-mosaic__inner .pp93-btn { margin-top: 48px; }

.pp93-mosaic__script {
	position: absolute;
	left: 50%;
	top: 889px;
	z-index: 2;
	width: 380px;
	height: auto;
	transform: translateX(-50%);
}

/* =============================================================== Why ===== */

.pp93-why {
	position: relative;
	overflow: hidden;
	padding-block: 100px;
	background: var(--pp93-bg);
}

/* The frame declares a 164px gap but is SPACE_BETWEEN with two fixed columns that
   together exceed its content box, so what actually renders is the remainder:
   1600 - 749 - 781 = 70px. Declaring the gap would push the copy out of the page. */
.pp93-why__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0;
}

/* --- Image card ---------------------------------------------------------- */

.pp93-why__visual {
	position: relative;
	flex: none;
	width: 749px;
	max-width: 100%;
	border-radius: var(--pp93-radius-lg);
	overflow: hidden;
	isolation: isolate;
}

/* Two blurred rectangles bleed a warm and a cool glow past the card edges. */
.pp93-why::before,
.pp93-why::after {
	content: '';
	position: absolute;
	z-index: 0;
	width: 555px;
	height: 444px;
	border-radius: var(--pp93-radius-lg);
	filter: blur(80px);
	pointer-events: none;
}

.pp93-why::before { left: 64px;  top: 100px; background: rgba(167, 181, 255, .55); }
.pp93-why::after  { left: 258px; top: 277px; background: rgba(255, 187, 50, .45); }

.pp93-why__photo {
	width: 100%;
	height: 621px;
	object-fit: cover;
}

.pp93-why__badge {
	position: absolute;
	left: 32px;
	top: 56px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 20px;
	border-radius: var(--pp93-radius-lg);
	background: linear-gradient(2.31deg, #F5711B -83%, #F2B539 216%);
	color: #FFFFFF;
	font-size: 24px;
	line-height: 28.8px;
	font-weight: 500;
}

.pp93-why__card {
	position: absolute;
	left: 32px;
	bottom: 32px;
	width: 312px;
	padding: 24px;
	border-radius: var(--pp93-radius-lg);
	background: var(--pp93-glass);
	backdrop-filter: blur(18.3px);
	-webkit-backdrop-filter: blur(18.3px);
	box-shadow: 0 6px 10px rgba(0, 2, 7, .25);
	color: #FFFFFF;
}

.pp93-why__card-icon { display: block; width: 48px; color: #FFFFFF; }
.pp93-why__card-icon svg { width: 48px; height: 48px; }

/* The hand-shake glyph sits in the card's top-right corner in the source. */
.pp93-why__card-emoji {
	position: absolute;
	right: 24px;
	top: 12px;
	font-size: 72px;
	line-height: 86px;
}

.pp93-why__card-title {
	margin-top: 8px;
	font-size: 24px;
	line-height: 28.8px;
	font-weight: 500;
}

.pp93-why__card-text {
	margin-top: 8px;
	font-size: 16px;
	line-height: 24px;
}

.pp93-why__mark {
	position: absolute;
	right: 27px;
	bottom: 13px;
	color: #FFFFFF;
	opacity: .8;
}

.pp93-why__mark svg { width: 93px; height: 82px; }

/* --- Copy and features -------------------------------------------------- */

.pp93-why__body {
	position: relative;
	z-index: 1;
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 80px;
	width: 781px;
	max-width: 100%;
}

.pp93-why__head { display: flex; flex-direction: column; gap: 12px; }
.pp93-why__title { text-align: center; }
.pp93-why__lead { max-width: 460px; margin-inline: auto; text-align: center; }

.pp93-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
}

.pp93-feature { display: flex; align-items: flex-start; gap: 20px; }

.pp93-feature__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 85px;
	height: 85px;
	border-radius: 50%;
	background: linear-gradient(97deg, #4B5CC9, #7E8BE0);
	box-shadow: 0 0 0 1px rgba(61, 79, 183, .35);
	color: #FFFFFF;
}

.pp93-feature__icon svg { width: 40px; height: 40px; }

.pp93-feature__title {
	font-size: 24px;
	line-height: 28.8px;
	font-weight: 500;
}

.pp93-feature__text {
	margin-top: 8px;
	font-size: 16px;
	line-height: 24px;
	color: var(--pp93-muted);
}

/* ========================================================== Discover ===== */

.pp93-discover {
	position: relative;
	overflow: hidden;
	min-height: 672px;
	padding-block: 100px;
	background: linear-gradient(106.25deg, rgba(68, 117, 215, .2) 4%, rgba(25, 69, 180, .4) 109%);
}

.pp93-discover__art {
	position: absolute;
	left: 50%;
	top: 58px;
	z-index: 0;
	width: 595px;
	height: auto;
	margin-left: 423px;         /* 1287 - 864 */
	opacity: 1;
	pointer-events: none;
}

.pp93-discover__inner { position: relative; z-index: 1; }

.pp93-discover__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 146px;
}

.pp93-discover__intro { width: 671px; max-width: 100%; }
.pp93-discover__text { max-width: 671px; }

.pp93-discover__actions {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-top: 32px;
}

.pp93-discover__title { width: 726px; max-width: 100%; }

/* --- The journey line and its cards ------------------------------------- */

/* The label and the cards share one 174px band: the label sits at the left edge and
   the cards at the right, joined by the elbow below. Stacking them added 60px. */
.pp93-journey {
	position: relative;
	min-height: 174px;
	margin-top: 96px;
}

.pp93-journey__label {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 32px;
	line-height: 38.4px;
	font-weight: 600;
}

/* An elbow leaving the label, then a rule running under the cards. */
.pp93-journey::before {
	content: '';
	position: absolute;
	left: 89px;
	top: 44px;
	width: 731px;
	height: 52px;
	border-left: 1px solid #445AD7;
	border-bottom: 1px solid #445AD7;
	border-bottom-left-radius: 16px;
	pointer-events: none;
}

.pp93-journey__list {
	position: relative;
	display: flex;
	gap: 52px;
	padding-left: 817px;
}

.pp93-stat {
	flex: none;
	width: 227px;
	padding: 18px;
	border-radius: var(--pp93-radius-lg);
	background: linear-gradient(160deg, #FFFFFF, #A2B5E5);
}

.pp93-stat__value {
	display: block;
	font-size: 48px;
	line-height: 57.6px;
	font-weight: 900;
	text-transform: uppercase;
	background: linear-gradient(350.29deg, #FF9E34 30%, #FFBB32 106%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pp93-stat__text {
	display: block;
	margin-top: 8px;
	font-size: 16px;
	line-height: 24px;
	color: var(--pp93-muted);
}

/* ======================================================== Testimonials === */

.pp93-reviews {
	position: relative;
	overflow: hidden;
	padding-block: 100px;
	background: var(--pp93-bg);
}

.pp93-reviews__head {
	max-width: 702px;
	margin-inline: auto;
	text-align: center;
}

.pp93-reviews__head .pp93-lead { margin-top: 12px; }

.pp93-reviews__deck {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 80px;
}

/* A warm bloom behind the middle card, as in the source. */
.pp93-reviews__deck::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 620px;
	height: 240px;
	background: rgba(255, 187, 50, .3);
	filter: blur(90px);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.pp93-reviews__viewport { position: relative; z-index: 1; flex: 1; overflow: hidden; }

.pp93-reviews__track {
	display: flex;
	gap: 20px;
	transition: transform .4s ease;
}

/* Spacing is set item by item rather than with one flex gap: the source puts 8px
   between the stars and the quote and larger gaps below, which adds up to exactly
   289px. A single 24px gap made the card 337px tall. */
.pp93-review {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	width: 472px;
	padding: 24px 16px;
	border-radius: var(--pp93-radius);
	background: linear-gradient(160deg, #FFFFFF, #E4E9FA);
	box-shadow: 0 3px 15px rgba(0, 9, 106, .12);
	text-align: center;
}

.pp93-review__quote { margin-top: 8px; }
.pp93-review__face  { margin-top: 24px; }
.pp93-review__name  { margin-top: 16px; }

.pp93-review__stars { display: flex; color: var(--pp93-gold); }
.pp93-review__stars svg { width: 24px; height: 24px; }

.pp93-review__quote {
	max-width: 312px;
	font-size: 20px;
	line-height: 30px;
}

.pp93-review__face {
	display: block;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 50%;
	background: #D9D9D9;
}

.pp93-review__face img { width: 100%; height: 100%; object-fit: cover; }

.pp93-review__name { font-size: 24px; line-height: 28.8px; font-weight: 500; }
.pp93-review__role { font-size: 16px; line-height: 24px; color: var(--pp93-muted); }

.pp93-reviews__arrow {
	display: grid;
	place-items: center;
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	color: var(--pp93-blue);
	transition: background-color .18s ease;
}

.pp93-reviews__arrow:hover { background: #EBEFFC; }
.pp93-reviews__arrow[disabled] { opacity: .3; cursor: default; }
.pp93-reviews__arrow svg { width: 32px; height: 32px; }

.pp93-reviews__action { display: flex; justify-content: center; margin-top: 48px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1727px) {
	/* The wall is a fixed 1600px composition, so it scales as one piece. */
	.pp93-mosaic__wall { --pp93-wall-k: calc((100vw - 2 * var(--pp93-gutter)) / 1600); }
}

@media (max-width: 1439px) {
	.pp93-hero, .pp93-hero__inner { min-height: 0; }
	.pp93-hero__inner { padding-block: 150px 100px; }
	.pp93-hero__title { font-size: 40px; line-height: 48px; }
	.pp93-note--1 { left: auto; right: 0; top: 120px; }
	.pp93-note--2 { left: 52%; top: 330px; }
	.pp93-note--3 { left: auto; right: 0; top: 380px; }
	.pp93-hero__mark { bottom: 40px; }

	.pp93-why__inner { gap: 64px; }
	.pp93-why__visual { width: 46%; }
	.pp93-why__photo { height: 520px; }
	.pp93-why__body { width: 50%; gap: 48px; }
	.pp93-features { gap: 28px; }
	.pp93-feature__icon { width: 68px; height: 68px; }
	.pp93-feature__icon svg { width: 32px; height: 32px; }

	.pp93-discover__top { gap: 48px; }
	.pp93-discover__intro, .pp93-discover__title { width: 48%; }
	.pp93-discover__art { display: none; }
	.pp93-journey::before { display: none; }
	.pp93-journey__list { padding-left: 0; gap: 24px; margin-top: 32px; }
	.pp93-stat { flex: 1; width: auto; }
}

@media (max-width: 1023px) {
	.pp93-hero__inner { flex-direction: column; padding-block: 120px 72px; }
	.pp93-hero__left { gap: 40px; width: 100%; max-width: 520px; }
	.pp93-hero__title { font-size: 34px; line-height: 42px; }

	/* The wash is baked into the photo for the desktop crop. A narrow viewport crops
	   that photo differently, so the dark corner no longer sits under the headline —
	   this puts the contrast back. */
	.pp93-hero__veil {
		background: linear-gradient(180deg, rgba(0, 2, 7, .78) 0%, rgba(0, 2, 7, .45) 42%, rgba(0, 2, 7, .88) 100%);
	}

	.pp93-hero__bg { object-position: 62% center; }

	/* The chips leave their fixed positions and become a strip under the copy. Left
	   floating, they landed on top of the headline at every width below the design. */
	.pp93-notes {
		position: static;
		display: flex;
		gap: 12px;
		width: 100%;
		margin-top: 8px;
		padding-bottom: 6px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		pointer-events: auto;
	}

	.pp93-notes::-webkit-scrollbar { display: none; }

	.pp93-note {
		position: static;
		flex: 0 0 auto;
		width: 252px;
		scroll-snap-align: start;
	}

	.pp93-note--1, .pp93-note--2, .pp93-note--3 { left: auto; top: auto; width: 252px; }

	.pp93-mosaic { min-height: 0; padding-bottom: 120px; }
	.pp93-mosaic__inner { padding-top: 120px; }
	.pp93-mosaic__script { position: static; margin: 48px auto 0; transform: none; }

	.pp93-why__inner { flex-direction: column; align-items: stretch; gap: 48px; }
	.pp93-why__visual, .pp93-why__body { width: 100%; }
	.pp93-why__photo { height: 420px; }
	.pp93-why__title, .pp93-why__lead { text-align: left; margin-inline: 0; }

	.pp93-discover__top { flex-direction: column; }
	.pp93-discover__intro, .pp93-discover__title { width: 100%; }
	.pp93-discover__title { order: -1; }

	.pp93-reviews__deck { margin-top: 48px; }
	.pp93-review { width: 380px; }
}

@media (max-width: 767px) {
	.pp93-hero + .pp93-seo { padding-top: 48px; }
	.pp93-hero__inner { padding-block: 104px 56px; }
	.pp93-hero__left { gap: 28px; }
	.pp93-hero__title { font-size: 28px; line-height: 36px; }
	.pp93-hero__lead { font-size: 17px; line-height: 26px; }
	.pp93-hero__card { width: 100%; padding: 16px; gap: 16px; }
	.pp93-hero__mark { display: none; }

	.pp93-note { width: 228px; padding: 14px; }
	.pp93-note__amount { font-size: 26px; line-height: 32px; }
	.pp93-note__text { font-size: 15px; line-height: 22px; }

	/* The strip runs to the screen edges so the second chip is visibly cut off — the
	   cue that it scrolls. */
	.pp93-notes {
		margin-inline: calc(var(--pp93-gutter) * -1);
		padding-inline: var(--pp93-gutter);
	}

	/* The wall would be 3px tall at this width; the copy carries the section. */
	.pp93-mosaic__wall, .pp93-mosaic__glow { display: none; }
	.pp93-mosaic { padding-bottom: 64px; }
	.pp93-mosaic__inner { padding-top: 64px; }
	.pp93-mosaic__script { width: 260px; }

	.pp93-why { padding-block: 64px; }
	.pp93-why__photo { height: 320px; }
	.pp93-why__badge { left: 16px; top: 16px; padding: 6px 14px; font-size: 18px; line-height: 24px; }
	.pp93-why__card { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 18px; }
	.pp93-why__card-title { font-size: 20px; line-height: 26px; }
	.pp93-why__mark { width: 60px; right: 14px; bottom: 8px; }
	.pp93-why__mark svg { width: 60px; height: 53px; }
	.pp93-features { grid-template-columns: minmax(0, 1fr); gap: 24px; }

	.pp93-discover { padding-block: 64px; }
	.pp93-discover__actions { flex-direction: column; align-items: flex-start; gap: 20px; }
	.pp93-journey { margin-top: 40px; }
	.pp93-journey__label { font-size: 24px; line-height: 30px; }
	.pp93-journey__list { flex-direction: column; }
	.pp93-stat__value { font-size: 36px; line-height: 44px; }

	.pp93-reviews { padding-block: 64px; }
	.pp93-reviews__deck::before { display: none; }
	.pp93-reviews__deck { gap: 4px; }
	.pp93-reviews__arrow { width: 36px; height: 36px; }
	.pp93-reviews__arrow svg { width: 24px; height: 24px; }
	/* One card fills the viewport exactly: a fixed width overflowed it, since the
	   viewport is only the screen minus the gutters and both arrows (~230px at 375). */
	.pp93-review { width: 100%; flex-basis: 100%; min-width: 0; padding: 20px 14px; gap: 16px; }
	.pp93-review__quote { max-width: 100%; overflow-wrap: anywhere; }
	.pp93-review__quote { font-size: 17px; line-height: 26px; }
	.pp93-review__name { font-size: 20px; line-height: 26px; }
}

/* ==========================================================================
   Motion. Ambient loops use the individual `translate`/`scale`/`rotate`
   properties so they compose with the reveal and parallax transforms instead of
   overriding them. Everything here is switched off for reduced motion at the end.
   ========================================================================== */

/* --- Hero: the copy rises in on load, the photo breathes, the chips float --- */

.pp93-hero__bg { animation: pp93-kenburns 22s ease-in-out infinite alternate; transform: translateY(calc(var(--pp93-hero-p, 0) * 120px)); will-change: transform; }

@keyframes pp93-kenburns {
	from { scale: 1; }
	to   { scale: 1.08; }
}

.pp93-hero__title,
.pp93-hero__lead,
.pp93-hero__card { animation: pp93-rise .9s cubic-bezier(.2, .8, .2, 1) both; }

.pp93-hero__title { animation-delay: .1s; }
.pp93-hero__lead  { animation-delay: .25s; }
.pp93-hero__card  { animation-delay: .4s; }

@keyframes pp93-rise {
	from { opacity: 0; transform: translateY(32px); filter: blur(6px); }
	to   { opacity: 1; transform: none; filter: none; }
}

/* The headline's grey fade gains a slow gold glint passing through it. */
.pp93-hero__title {
	background: linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 40%, #FFD27A 50%, #FFFFFF 60%, #FFFFFF 100%), linear-gradient(174.44deg, #FFFFFF 8%, #585060 245%);
	background-size: 300% 100%, 100% 100%;
	background-blend-mode: multiply;
	-webkit-background-clip: text;
	background-clip: text;
	animation: pp93-rise .9s cubic-bezier(.2, .8, .2, 1) .1s both, pp93-glint 6s ease-in-out 1.5s infinite;
}

@keyframes pp93-glint {
	0%   { background-position: 100% 0, 0 0; }
	60%, 100% { background-position: 0% 0, 0 0; }
}

.pp93-hero__shot img { transition: scale .6s ease; }
.pp93-hero__card:hover .pp93-hero__shot img { scale: 1.04; }

/* Pointer parallax (set from script) moves the chip layer; each chip also bobs. */
.pp93-notes { transform: translate3d(calc(var(--pp93-mx, 0) * -18px), calc(var(--pp93-my, 0) * -12px), 0); transition: transform .4s ease-out; }

.pp93-note { animation: pp93-bob 5s ease-in-out infinite; }
.pp93-note--2 { animation-duration: 6s; animation-delay: -2s; }
.pp93-note--3 { animation-duration: 5.5s; animation-delay: -3.5s; }

@keyframes pp93-bob {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -12px; }
}

.pp93-note__amount { animation: pp93-amount-glow 3s ease-in-out infinite; }

@keyframes pp93-amount-glow {
	0%, 100% { text-shadow: 0 0 0 rgba(255, 172, 53, 0); }
	50%      { text-shadow: 0 0 18px rgba(255, 172, 53, .65); }
}

.pp93-hero__mark { animation: pp93-breathe 4s ease-in-out infinite; }

@keyframes pp93-breathe {
	0%, 100% { opacity: .35; scale: 1; }
	50%      { opacity: .7;  scale: 1.06; }
}

/* Stars in the rating light up one after another. */
.pp93-proof__stars svg { animation: pp93-twinkle 3s ease-in-out infinite; }
.pp93-proof__stars svg:nth-child(2) { animation-delay: .15s; }
.pp93-proof__stars svg:nth-child(3) { animation-delay: .3s; }
.pp93-proof__stars svg:nth-child(4) { animation-delay: .45s; }
.pp93-proof__stars svg:nth-child(5) { animation-delay: .6s; }

@keyframes pp93-twinkle {
	0%, 80%, 100% { scale: 1; filter: none; }
	88%           { scale: 1.3; filter: drop-shadow(0 0 4px rgba(255, 187, 50, .9)); }
}

.pp93-proof__face { transition: translate .25s ease; }
.pp93-proof__face:hover { translate: 0 -4px; }

/* --- Mosaic: tiles fly in, columns drift, the wall parallaxes on scroll ----- */

/* Scroll parallax: outer columns travel further than inner ones. */
.pp93-mosaic__col { transform: translateY(calc(var(--pp93-p, 0) * var(--pp93-depth, 0) * 1px)); will-change: transform; }
.pp93-mosaic__col--1, .pp93-mosaic__col--9 { --pp93-depth: -90; }
.pp93-mosaic__col--2, .pp93-mosaic__col--8 { --pp93-depth: 60; }
.pp93-mosaic__col--3, .pp93-mosaic__col--7 { --pp93-depth: -40; }
.pp93-mosaic__col--4, .pp93-mosaic__col--6 { --pp93-depth: 30; }
.pp93-mosaic__col--5 { --pp93-depth: -20; }

/* And an ambient drift on top of it, odd columns down, even columns up. */
.pp93-mosaic__col { animation: pp93-drift 9s ease-in-out infinite; }
.pp93-mosaic__col:nth-child(even) { animation-direction: reverse; animation-duration: 11s; }
.pp93-mosaic__col:nth-child(3n) { animation-duration: 13s; }

@keyframes pp93-drift {
	0%, 100% { translate: 0 -10px; }
	50%      { translate: 0 10px; }
}

/* Entrance, only when script has armed it — without script the tiles just show. */
.pp93-mosaic.pp93-armed .pp93-mosaic__tile {
	opacity: 0;
	transform: translateY(60px) scale(.85) rotate(var(--pp93-tilt, 0deg));
	transition: opacity .8s ease var(--pp93-delay, 0ms), transform 1s cubic-bezier(.2, .9, .3, 1.15) var(--pp93-delay, 0ms);
}

.pp93-mosaic.pp93-armed.is-in .pp93-mosaic__tile { opacity: 1; transform: none; }

.pp93-mosaic__tile:not(.pp93-mosaic__tile--empty) { box-shadow: 0 10px 30px -12px rgba(0, 9, 106, .35); }

.pp93-mosaic__tile img { animation: pp93-tile-zoom 14s ease-in-out infinite alternate; }
.pp93-mosaic__col:nth-child(even) .pp93-mosaic__tile img { animation-delay: -7s; }

@keyframes pp93-tile-zoom {
	from { scale: 1; }
	to   { scale: 1.12; }
}

/* The two blooms wander and breathe behind the heading. */
.pp93-mosaic__glow--gold  { animation: pp93-wander-a 10s ease-in-out infinite; }
.pp93-mosaic__glow--lilac { animation: pp93-wander-b 12s ease-in-out infinite; }

@keyframes pp93-wander-a {
	0%, 100% { translate: 0 0; scale: 1; }
	33%      { translate: 80px 30px; scale: 1.25; }
	66%      { translate: -40px 50px; scale: .9; }
}

@keyframes pp93-wander-b {
	0%, 100% { translate: 0 0; scale: 1; }
	40%      { translate: -90px -20px; scale: 1.2; }
	70%      { translate: 40px 40px; scale: .95; }
}

/* Accented words in section headings carry a moving gradient. */
.pp93-home .pp93-h2 em {
	background: linear-gradient(90deg, #3D4FB7, #7E8BE0, #F5711B, #3D4FB7);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: pp93-flow 8s linear infinite;
}

@keyframes pp93-flow {
	from { background-position: 0% 0; }
	to   { background-position: 300% 0; }
}

.pp93-mosaic__script { animation: pp93-script 5s ease-in-out infinite; }

@keyframes pp93-script {
	0%, 100% { rotate: -2deg; scale: 1; }
	50%      { rotate: 2deg;  scale: 1.05; }
}

/* --- Why --------------------------------------------------------------------- */

.pp93-why::before { animation: pp93-wander-a 14s ease-in-out infinite; }
.pp93-why::after  { animation: pp93-wander-b 16s ease-in-out infinite; }

.pp93-why__photo { transition: scale 1.2s cubic-bezier(.2, .8, .2, 1); }
.pp93-why__visual:hover .pp93-why__photo { scale: 1.06; }

.pp93-why__badge { animation: pp93-bob 4s ease-in-out infinite; box-shadow: 0 10px 24px -8px rgba(245, 113, 27, .6); }
.pp93-why__card  { animation: pp93-bob 6s ease-in-out -2s infinite; }
.pp93-why__card-emoji { display: inline-block; animation: pp93-wave 3s ease-in-out infinite; transform-origin: 70% 70%; }

@keyframes pp93-wave {
	0%, 60%, 100% { rotate: 0deg; }
	70% { rotate: 14deg; }
	80% { rotate: -8deg; }
	90% { rotate: 10deg; }
}

.pp93-why__mark { animation: pp93-breathe 5s ease-in-out infinite; }

.pp93-feature__icon { position: relative; transition: scale .35s cubic-bezier(.2, .9, .3, 1.4), rotate .35s ease, box-shadow .35s ease; }

.pp93-feature__icon::after {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid rgba(126, 139, 224, .5);
	opacity: 0;
	scale: .8;
	transition: opacity .35s ease, scale .35s ease;
}

.pp93-feature:hover .pp93-feature__icon { scale: 1.1; rotate: -8deg; box-shadow: 0 12px 28px -8px rgba(75, 92, 201, .7); }
.pp93-feature:hover .pp93-feature__icon::after { opacity: 1; scale: 1; }
.pp93-feature__title { transition: color .2s ease; }
.pp93-feature:hover .pp93-feature__title { color: var(--pp93-blue); }

/* --- Discover ------------------------------------------------------------ */

.pp93-discover { background-size: 200% 200%; animation: pp93-bg-pan 18s ease-in-out infinite alternate; }

@keyframes pp93-bg-pan {
	from { background-position: 0% 0%; }
	to   { background-position: 100% 100%; }
}

.pp93-discover__art { animation: pp93-float-art 8s ease-in-out infinite; }

@keyframes pp93-float-art {
	0%, 100% { translate: 0 0; rotate: 0deg; }
	50%      { translate: 0 -18px; rotate: -2deg; }
}

/* The elbow draws itself left to right once the journey scrolls into view. */
.pp93-journey.pp93-reveal::before { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.6, 0, .2, 1) .3s; }
.pp93-journey.pp93-reveal.is-in::before { clip-path: inset(0 0 0 0); }

.pp93-stat { transition: translate .3s ease, box-shadow .3s ease; }
.pp93-stat:hover { translate: 0 -6px; box-shadow: 0 18px 36px -14px rgba(25, 69, 180, .45); }

/* --- Reviews ------------------------------------------------------------- */

.pp93-reviews__viewport { padding-block: 10px 28px; margin-block: -10px -28px; }
.pp93-review { transition: translate .3s ease, box-shadow .3s ease; }
.pp93-review:hover { translate: 0 -6px; box-shadow: 0 18px 40px -12px rgba(0, 9, 106, .3); }
.pp93-review__face { transition: scale .3s ease; }
.pp93-review:hover .pp93-review__face { scale: 1.12; }
.pp93-reviews__deck::before { animation: pp93-breathe-glow 6s ease-in-out infinite; }

@keyframes pp93-breathe-glow {
	0%, 100% { opacity: .6; scale: .9; }
	50%      { opacity: 1;  scale: 1.1; }
}

.pp93-reviews__arrow { transition: background-color .18s ease, scale .2s ease; }
.pp93-reviews__arrow:not([disabled]):hover { scale: 1.1; }

/* --- Narrow screens and reduced motion ----------------------------------- */

@media (max-width: 1023px) {
	/* The chips become a scrolling strip here; floating would fight the scroll. */
	.pp93-notes { transform: none; }
	.pp93-note { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pp93-hero__bg, .pp93-mosaic__col { transform: none; }
	.pp93-hero__title { animation: none; }
	.pp93-notes { transform: none; }
}