/* The /platform page (layouts/landing_pages/platform_overview.php). It loads
   after event-os.css. The motion rules apply only when
   resources/js/platform-overview.js has put .platform-motion on <html>, so a
   page without the script, or a reader who asks for reduced motion, sees all
   of the content at rest. */

/* Hero: the promise, a wall of the real dashboard, and the figures. */
/* The page wrapper clips sideways overflow. `clip` does it without making
   the wrapper a scroll container, so the scroll story's stage can pin. */
@supports (overflow: clip) {
	.platform-overview-page .wrapper.symbols-bg-wrapper { overflow: clip; }
}

.platform-overview-page #hero.platform-hero {
	position: relative;
	isolation: isolate;
	padding-top: 48px;
	padding-bottom: 64px;
}

/* The home page's light beam behind the hero, as on /event-ticketing,
   fading out at the hero's foot; and behind the story. */
.platform-overview-page #hero.platform-hero {
	background-image: linear-gradient(180deg, rgba(11, 10, 21, 0) 70%, #0b0a15), url('/resources/images/home_new/hero-bg.png');
	background-size: 100% 100%, min(70%, 1020px) auto;
	background-position: 0 0, bottom right;
	background-repeat: no-repeat;
}

.platform-overview-page #journey {
	background-image: linear-gradient(180deg, rgba(11, 10, 21, 0) 80%, #0b0a15), url('/resources/images/home_new/sales-bottom-bg.png');
	background-size: 100% 100%, min(60%, 900px) auto;
	background-position: 0 0, bottom right;
	background-repeat: no-repeat;
}

@media (max-width: 760px) {
	.platform-overview-page #hero.platform-hero {
		background-image: linear-gradient(180deg, rgba(11, 10, 21, 0) 70%, #0b0a15), url('/resources/images/home_new/hero-bg-mobile.png');
		background-size: 100% 100%, 100% auto;
	}
	.platform-overview-page #journey {
		background-image: linear-gradient(180deg, rgba(11, 10, 21, 0) 80%, #0b0a15), url('/resources/images/home_new/sales-bottom-bg-mobile.png');
		background-size: 100% 100%, 100% auto;
	}
}

/* The skip link stays off screen until it takes focus. */
.platform-overview-page .lp-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 1000;
	padding: 12px 20px;
	border-radius: 0 0 var(--roundings-12, 12px) var(--roundings-12, 12px);
	background: var(--bg-surface-primary, #0b0a15);
	color: var(--fg-primary-rest, #ebebee);
	font-size: 15px;
	text-decoration: none;
	transition: top 160ms ease;
}

.platform-overview-page .lp-skip-link:focus {
	top: 0;
	outline: 2px solid var(--colors-violet-300, #c4b5ff);
	outline-offset: 2px;
}

.platform-overview-page #hero.platform-hero > .inner-wrapper {
	position: relative;
	z-index: 1;
	display: block;
}

/* The hero copy arrives line by line. */
.platform-motion .platform-hero-copy > * {
	animation: platform-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.platform-motion .platform-hero-copy > :nth-child(2) { animation-delay: 0.08s; }
.platform-motion .platform-hero-copy > :nth-child(3) { animation-delay: 0.18s; }
.platform-motion .platform-hero-copy > :nth-child(4) { animation-delay: 0.28s; }
.platform-motion .platform-hero-copy > :nth-child(5) { animation-delay: 0.36s; }

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

.platform-hero-copy {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}

.platform-overview-page #hero .platform-eyebrow { justify-content: center; margin: 0 0 20px; }

.platform-overview-page #hero.platform-hero h1 {
	max-width: 17ch;
	margin: 0 auto 24px;
	font-size: clamp(40px, 6vw, 76px);
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: var(--fg-primary-rest, #ebebee);
}

/* The headings stay solid, as on the microsites; the highlight is the
   violet figure. */
.platform-overview-page #hero.platform-hero h1 .highlight-stat {
	background: none;
	color: var(--colors-violet-300, #c4b5ff);
	-webkit-text-fill-color: currentColor;
}

.platform-reassurance {
	max-width: 720px;
	margin: 20px auto 0;
	color: var(--fg-secondary-rest, rgba(235, 235, 238, 0.7));
	font: 400 14px/22px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	text-align: center;
	text-wrap-style: balance;
}

/* The press quote and the invitation to talk to Fai, under the figures. */
.platform-hero-trust {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 760px;
	margin: 56px auto 0;
}

.platform-hero-trust .conversion-fai-invitation {
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	border: 0;
}

.platform-hero-trust .conversion-fai-invitation p {
	max-width: 36ch;
	margin: 0;
	color: var(--fg-secondary-rest, rgba(235, 235, 238, 0.7));
	font-size: 15px;
	line-height: 22px;
	text-align: left;
}

@media (max-width: 700px) {
	.platform-hero-trust .conversion-fai-invitation { flex-direction: column; }
	.platform-hero-trust .conversion-fai-invitation p { text-align: center; }
}

.platform-overview-page main .title-top .audience-eyebrow { margin-bottom: 16px; }

/* Centred lines break evenly, so no word hangs on a line of its own. */
.platform-overview-page main .title-top h2,
.platform-overview-page main .title-top p,
.platform-overview-page #hero.platform-hero h1,
.platform-note h2,
.platform-note p,
.platform-proof span,
.platform-replaces-title,
.platform-stats span { text-wrap-style: balance; }

.platform-hero-intro {
	max-width: 62ch;
	margin: 0 auto 32px;
	text-wrap-style: balance;
	color: var(--fg-secondary-rest, rgba(235, 235, 238, 0.78));
	font: 400 clamp(17px, 1.6vw, 20px)/1.55 var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.platform-hero-copy .button-row { justify-content: center; }

/* The wall of dashboard captures. Columns of captures stand on a plane that
   tilts away from the reader and turns to face them as the hero scrolls up:
   --fold goes from 1, tilted, to 0, flat (platform-overview.js). Without the
   script the wall rests part way. It spans the whole window and fades out at
   every edge. */
.platform-wall {
	--fold: 0.6;
	position: relative;
	left: 50%;
	width: 100vw;
	height: clamp(440px, 58vw, 780px);
	margin: -24px 0 0;
	transform: translateX(-50%);
	perspective: 1600px;
	perspective-origin: 50% 0;
	overflow: hidden;
	-webkit-mask-image:
		linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent),
		linear-gradient(180deg, transparent, #000 10%, #000 64%, transparent);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent),
		linear-gradient(180deg, transparent, #000 10%, #000 64%, transparent);
	mask-composite: intersect;
}

.platform-wall-plane {
	display: flex;
	justify-content: center;
	gap: clamp(12px, 1.6vw, 24px);
	width: 140%;
	margin-left: -20%;
	padding-top: 24px;
	transform-origin: 50% 0;
	transform:
		translateY(calc(var(--fold) * 6%))
		rotateX(calc(var(--fold) * 42deg))
		rotateZ(calc(var(--fold) * -12deg))
		scale(calc(1 - var(--fold) * 0.12));
	will-change: transform;
}

.platform-wall-column {
	flex: 0 0 clamp(200px, 21vw, 340px);
	min-width: 0;
}

/* The columns stand at staggered heights, like a skyline. */
.platform-wall-column:nth-child(2) { margin-top: -140px; }
.platform-wall-column:nth-child(3) { margin-top: -40px; }
.platform-wall-column:nth-child(4) { margin-top: -200px; }
.platform-wall-column:nth-child(5) { margin-top: -90px; }

.platform-wall-screen {
	position: relative;
	margin: 0 0 clamp(12px, 1.6vw, 24px);
	overflow: hidden;
	border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
	border-radius: var(--roundings-12, 12px);
	background: #12111c;
	box-shadow: 0 24px 60px rgba(5, 4, 12, 0.7);
}

/* The captures on the wall and on the story's stage fill the frames this
   page gives them, so they drop the site's own capture frame and its faded
   foot, and do not settle in (ticketing-conversion.js) as they come into
   view. */
.platform-overview-page main :is(.platform-wall, .platform-journey-frame) .product-capture {
	aspect-ratio: auto;
	border: 0;
	border-radius: 0;
	background: none;
}

.platform-overview-page main :is(.platform-wall, .platform-journey-frame) .product-capture::after { content: none; }

.platform-overview-page main :is(.platform-wall, .platform-journey-frame) .product-capture.will-settle {
	opacity: 1;
	transform: none;
}

/* A sheen across each capture, as on glass. */
.platform-wall-screen::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(155deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 38%);
	pointer-events: none;
}

.platform-wall-screen--tall { aspect-ratio: 4 / 5; }
.platform-wall-screen--square { aspect-ratio: 1 / 1; }
.platform-wall-screen--wide { aspect-ratio: 16 / 10; }

.platform-overview-page main .platform-wall-screen :is(picture, img) {
	display: block;
	width: 100%;
	height: 100%;
}

.platform-overview-page main .platform-wall-screen img {
	object-fit: cover;
	object-position: 50% 0;
}

/* Each column drifts, the even ones the other way. A column holds its
   captures twice, so moving it up by half its height loops without a seam. */
.platform-motion .platform-wall-track { animation: platform-wall-drift 80s linear infinite; }
.platform-motion .platform-wall-column:nth-child(even) .platform-wall-track { animation-duration: 96s; animation-direction: reverse; }
.platform-motion .platform-wall-column:nth-child(3) .platform-wall-track { animation-duration: 110s; }
.platform-motion .platform-wall.is-paused .platform-wall-track { animation-play-state: paused; }

@keyframes platform-wall-drift {
	from { transform: translateY(0); }
	to { transform: translateY(-50%); }
}

.platform-motion .platform-wall-plane { animation: platform-wall-in 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s both; }

@keyframes platform-wall-in {
	from { opacity: 0; translate: 0 120px; }
	to { opacity: 1; translate: none; }
}

/* The figures that float over the wall. They rise more slowly than the wall
   turns, so they seem to stand in front of it. */
.platform-wall-figures {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}

.platform-wall-figures .platform-figure {
	position: absolute;
	transform: translateY(calc(var(--fold) * var(--rise, 60px)));
}

.platform-wall-figures .platform-figure:nth-child(1) { top: 16%; left: 14%; --rise: 90px; }
.platform-wall-figures .platform-figure:nth-child(2) { top: 30%; right: 12%; --rise: 40px; }
.platform-wall-figures .platform-figure:nth-child(3) { top: 50%; left: 24%; --rise: 120px; }
.platform-wall-figures .platform-figure:nth-child(4) { top: 8%; right: 30%; --rise: 70px; }
.platform-wall-figures .platform-figure:nth-child(5) { top: 58%; right: 22%; --rise: 100px; }
.platform-wall-figures .platform-figure:nth-child(6) { top: 36%; left: 5%; --rise: 50px; }

.platform-motion .platform-wall-figures .platform-figure {
	animation:
		platform-figure-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both,
		platform-bob 7s ease-in-out infinite alternate;
	animation-delay: 0.9s, 0s;
}

.platform-motion .platform-wall-figures .platform-figure:nth-child(2) { animation-delay: 1.1s, -2s; }
.platform-motion .platform-wall-figures .platform-figure:nth-child(3) { animation-delay: 1.3s, -4s; }
.platform-motion .platform-wall-figures .platform-figure:nth-child(4) { animation-delay: 1.5s, -1s; }
.platform-motion .platform-wall-figures .platform-figure:nth-child(5) { animation-delay: 1.7s, -5s; }
.platform-motion .platform-wall-figures .platform-figure:nth-child(6) { animation-delay: 1.9s, -3s; }

@keyframes platform-figure-in {
	from { opacity: 0; scale: 0.85; }
	to { opacity: 1; scale: 1; }
}

@keyframes platform-bob {
	from { translate: 0 0; }
	to { translate: 0 -10px; }
}

/* A figure: an icon, a label and a value, on frosted glass. The wall and the
   story's stage both use it. */
.platform-figure {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	column-gap: 12px;
	align-items: center;
	margin: 0;
	padding: 10px 16px 10px 10px;
	border: 1px solid rgba(235, 235, 238, 0.16);
	border-radius: 16px;
	background: rgba(22, 20, 38, 0.72);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	box-shadow: 0 18px 40px rgba(5, 4, 12, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	white-space: nowrap;
}

.platform-figure-icon {
	display: inline-flex;
	grid-row: span 2;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--roundings-12, 12px);
	background: var(--home-tag-gradient, linear-gradient(120deg, #ffbfb5 22%, #c4b5ff 56%, #b5bfff 85%));
	color: var(--bg-surface-primary, #0b0a15);
	font-size: 15px;
}

.platform-figure-label {
	color: rgba(235, 235, 238, 0.66);
	font: 500 12px/16px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.platform-figure strong {
	color: #ffffff;
	font: 600 18px/22px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
	.platform-wall-column:nth-child(5) { display: none; }
	.platform-wall-figures .platform-figure:nth-child(6) { display: none; }
}

@media (max-width: 700px) {
	.platform-wall { height: 420px; }
	.platform-wall-plane { width: 170%; margin-left: -35%; }
	.platform-wall-column { flex-basis: 46vw; }
	.platform-wall-column:nth-child(1) { display: none; }
	.platform-wall-figures .platform-figure:nth-child(n + 4) { display: none; }
	.platform-wall-figures .platform-figure:nth-child(1) { top: 14%; left: 6%; }
	.platform-wall-figures .platform-figure:nth-child(2) { top: 34%; right: 5%; }
	.platform-wall-figures .platform-figure:nth-child(3) { top: 54%; left: 10%; }
	.platform-figure { padding: 8px 12px 8px 8px; column-gap: 10px; }
	.platform-figure-icon { width: 30px; height: 30px; font-size: 13px; }
	.platform-figure strong { font-size: 16px; line-height: 20px; }
}

.platform-stats {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	max-width: 1040px;
	margin: -48px auto 0;
	padding: 0;
	list-style: none;
}

.platform-stats li {
	margin: 0;
	padding: 8px 20px;
	text-align: center;
}

.platform-stats li + li { border-left: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1)); }

.platform-stats strong {
	display: block;
	background: var(--home-tag-gradient, linear-gradient(138.91deg, #ffbfb5 22%, #c4b5ff 56%, #b5bfff 85%));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font: 500 clamp(32px, 4vw, 56px)/1.15 var(--font-family-inter-tight, "Inter Tight", sans-serif);
	font-variant-numeric: tabular-nums;
}

.platform-stats span {
	display: block;
	margin-top: 4px;
	color: var(--fg-secondary-rest, rgba(235, 235, 238, 0.78));
	font: 400 15px/22px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

@media (max-width: 600px) {
	.platform-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
	.platform-stats li { padding: 8px 12px; }
	.platform-stats li + li { border-left: 0; }
}

/* Bento: two wide cards, then rows of three. */
.platform-bento {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 24px;
}

.platform-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--roundings-xl, 24px);
	background: linear-gradient(180deg, rgba(235, 235, 238, 0.06), rgba(235, 235, 238, 0.01));
	box-shadow: 0 4px 24px rgba(11, 10, 21, 0.8);
	transition: border-color 0.2s ease;
}

.platform-card--wide { grid-column: span 3; }
.platform-card--narrow { grid-column: span 2; }

.platform-card:hover { border-color: rgba(196, 181, 255, 0.35); }

.platform-card-copy {
	position: relative;
	z-index: 1;
	padding: 32px 32px 24px;
}

.platform-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 20px;
	border: 1px solid var(--colors-violet-300-12, rgba(196, 181, 255, 0.12));
	border-radius: 50%;
	background: var(--colors-base-white-05, rgba(235, 235, 238, 0.05));
	color: var(--colors-violet-300, #c4b5ff);
	font-size: 18px;
}

.platform-card h3 {
	margin: 0 0 10px;
	color: var(--fg-primary-rest, #ebebee);
	font: 500 22px/30px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.platform-card p {
	margin: 0 0 16px;
	color: rgba(235, 235, 238, 0.8);
	font: 400 16px/24px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.platform-card-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.platform-card-links li { margin: 0; }

.platform-card-links a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
	border-radius: var(--roundings-round, 999px);
	color: var(--fg-primary-rest, #ebebee);
	font: 500 14px/20px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.platform-card-links a:hover,
.platform-card-links a:focus-visible {
	border-color: var(--colors-violet-300, #c4b5ff);
	background: var(--colors-violet-300-12, rgba(196, 181, 255, 0.12));
}

.platform-card-media {
	position: relative;
	z-index: 1;
	margin: auto 16px 16px;
	padding: 24px 16px;
	border-radius: var(--roundings-l, 16px);
	background: rgba(11, 10, 21, 0.35);
	overflow: hidden;
}

.platform-card-media img,
.platform-card-media svg {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.platform-card-media picture img {
	border-radius: var(--roundings-12, 12px);
}

@media (max-width: 1100px) {
	.platform-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.platform-card--wide,
	.platform-card--narrow { grid-column: span 1; }
}

@media (max-width: 700px) {
	.platform-bento { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.platform-card-copy { padding: 24px 20px 20px; }
	.platform-card-media { margin: auto 12px 12px; padding: 16px 12px; }
}

/* Proof: the results, then the tools the platform replaces. */
.platform-proof {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0 0 64px;
	padding: 0;
	list-style: none;
}

.platform-proof li {
	margin: 0;
	padding: 32px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--roundings-xl, 24px);
	background: linear-gradient(180deg, rgba(235, 235, 238, 0.05), rgba(235, 235, 238, 0.01));
	text-align: center;
}

.platform-proof strong {
	display: block;
	margin-bottom: 8px;
	background: var(--gradient-button-outline, linear-gradient(90deg, #c4b5ff, #ff8fc7));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font: 500 clamp(40px, 4.6vw, 60px)/1.1 var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.platform-proof span {
	color: rgba(235, 235, 238, 0.82);
	font: 400 16px/24px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

@media (max-width: 800px) {
	.platform-proof { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 48px; }
	.platform-proof li { padding: 24px 20px; }
}

.platform-replaces-title {
	margin: 0 0 24px;
	color: var(--fg-primary-rest, #ebebee);
	font: 500 24px/32px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	text-align: center;
}

.platform-replaces {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	max-width: 860px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.platform-replaces li {
	margin: 0;
	padding: 8px 16px;
	border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
	border-radius: var(--roundings-round, 999px);
	background: var(--colors-base-white-05, rgba(235, 235, 238, 0.05));
	color: rgba(235, 235, 238, 0.86);
	font: 400 16px/22px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

/* Pricing: three promises in tiles. */
.platform-overview-page #pricing.section-margin-bottom .platform-note { max-width: 1040px; }

.platform-pricing {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 32px 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.platform-pricing li {
	margin: 0;
	padding: 28px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--roundings-xl, 24px);
	background: linear-gradient(180deg, rgba(235, 235, 238, 0.05), rgba(235, 235, 238, 0.01));
}

.platform-pricing strong {
	display: block;
	margin-bottom: 6px;
	color: var(--fg-primary-rest, #ebebee);
	font: 500 20px/28px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

.platform-pricing li > span:last-child {
	color: rgba(235, 235, 238, 0.8);
	font: 400 16px/24px var(--font-family-inter-tight, "Inter Tight", sans-serif);
}

@media (max-width: 800px) {
	.platform-pricing { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* Reveal on scroll, with the translate property. */
.platform-motion .platform-reveal {
	opacity: 0;
	translate: 0 28px;
	transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease;
	transition-delay: var(--reveal-delay, 0s), var(--reveal-delay, 0s), 0s;
}

.platform-motion .platform-reveal.is-visible {
	opacity: 1;
	translate: none;
}

/* The scroll story: steps on the left, a pinned stage on the right. The
   stage shows the step's dashboard in a window, a second capture in front of
   it and a figure in front of both, turned towards the steps. When the step
   changes, the old scene swings back and away and the new one comes forward. */
.platform-journey-body {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
	gap: 56px;
	align-items: start;
}

.platform-journey-stage {
	position: sticky;
	top: calc(50vh - 320px);
	order: 2;
	perspective: 1800px;
}

/* The stage's links, one for each step. */
.platform-journey-nav ol {
	display: flex;
	gap: 4px;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 28px;
	padding: 4px;
	border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
	border-radius: var(--roundings-round, 999px);
	background: rgba(22, 20, 38, 0.6);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.platform-journey-nav li { flex: none; margin: 0; }

.platform-journey-nav a {
	display: block;
	padding: 8px 14px;
	border-radius: var(--roundings-round, 999px);
	color: var(--fg-secondary-rest, rgba(235, 235, 238, 0.72));
	font: 500 14px/20px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.platform-journey-nav a:hover { color: var(--fg-primary-rest, #ebebee); }

.platform-journey-nav a[aria-current="step"] {
	background: var(--gradient-button-primary, linear-gradient(90deg, #7c5cff, #c4b5ff));
	color: #ffffff;
}

.platform-journey-nav a:focus-visible {
	outline: 2px solid var(--colors-violet-300, #c4b5ff);
	outline-offset: 2px;
}

.platform-journey-frame {
	position: relative;
	height: 540px;
	transform-style: preserve-3d;
	transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
	transition: transform 0.4s ease-out;
}

.platform-journey-scene {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: translate3d(12%, 30px, -220px) rotateY(-34deg);
	transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
	pointer-events: none;
}

.platform-journey-scene.is-past { transform: translate3d(-14%, -20px, -260px) rotateY(24deg); }
.platform-journey-scene.is-active { transform: rotateX(4deg) rotateY(-14deg); }

/* The scene's parts fade, not the scene, so its parts keep their depth. */
.platform-journey-scene > * {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.platform-journey-scene.is-active > * { opacity: 1; transition-delay: 0.1s; }
.platform-journey-scene.is-active > .platform-journey-detail { transition-delay: 0.25s; }
.platform-journey-scene.is-active > .platform-journey-figure { transition-delay: 0.4s; }

.platform-journey-window {
	position: absolute;
	top: 0;
	right: 8%;
	bottom: 16%;
	left: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
	border-radius: var(--roundings-l, 16px);
	background: #12111c;
	box-shadow: 0 40px 100px rgba(5, 4, 12, 0.75);
}

.platform-journey-bar {
	display: flex;
	flex: none;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 14px;
	border-bottom: 1px solid rgba(235, 235, 238, 0.08);
	background: rgba(235, 235, 238, 0.04);
}

.platform-journey-bar span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(235, 235, 238, 0.18);
}

.platform-journey-bar em {
	flex: 1;
	margin-right: 36px;
	overflow: hidden;
	color: rgba(235, 235, 238, 0.56);
	font: 500 12px/16px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	font-style: normal;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The window shows the top of its capture, then pans slowly down it while
   its scene is in view. A capture shorter than the window stays still. */
.platform-journey-view {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	container-type: size;
}

.platform-overview-page main .platform-journey-view :is(picture, img) {
	display: block;
	width: 100%;
	height: auto;
}

.platform-motion .platform-journey-scene.is-active .platform-journey-view img {
	animation: platform-pan 16s ease-in-out 1.2s infinite alternate;
}

@keyframes platform-pan {
	to { transform: translateY(min(0px, max(calc(-100% + 100cqh), -45%))); }
}

.platform-journey-detail {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 44%;
	height: 50%;
	overflow: hidden;
	border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
	border-radius: var(--roundings-12, 12px);
	background: #12111c;
	box-shadow: 0 30px 70px rgba(5, 4, 12, 0.8);
	transform: translateZ(90px);
}

.platform-overview-page main .platform-journey-detail :is(picture, img) {
	display: block;
	width: 100%;
	height: 100%;
}

.platform-overview-page main .platform-journey-detail img {
	object-fit: cover;
	object-position: 50% 0;
}

.platform-journey-figure {
	position: absolute;
	top: 12%;
	right: 0;
	transform: translateZ(150px);
}

.platform-journey-steps {
	order: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}

.platform-journey-step {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 78vh;
	margin: 0;
	scroll-margin-top: 30vh;
	transition: opacity 0.4s ease;
}

/* With the script running, the steps away from the reading area dim. */
.is-live .platform-journey-step { opacity: 0.3; }
.is-live .platform-journey-step.is-active { opacity: 1; }

.platform-journey-when {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	color: var(--colors-violet-300, #c4b5ff);
	font: 500 14px/21px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	letter-spacing: 0.1px;
}

.platform-journey-when span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(196, 181, 255, 0.3);
	border-radius: 50%;
	color: var(--fg-primary-rest, #ebebee);
	font-size: 12px;
}

.platform-journey-step h3 {
	margin: 0 0 14px;
	color: var(--fg-primary-rest, #ebebee);
	font: 500 clamp(30px, 3.2vw, 44px)/1.12 var(--font-family-inter-tight, "Inter Tight", sans-serif);
	letter-spacing: -0.015em;
	text-wrap-style: balance;
}

.platform-journey-step p:last-child {
	max-width: 44ch;
	margin: 0;
	color: rgba(235, 235, 238, 0.82);
	font: 400 18px/28px var(--font-family-inter-tight, "Inter Tight", sans-serif);
	text-wrap-style: pretty;
}

/* On a phone the stage pins under the header and the steps pass beneath. */
@media (max-width: 900px) {
	.platform-journey-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.platform-journey-stage {
		top: 64px;
		z-index: 2;
		order: 1;
		padding: 8px 0 16px;
	}
	/* The stage's background spans the window, so the steps pass under it. */
	.platform-journey-stage::before {
		content: "";
		position: absolute;
		inset: 0 -50vw;
		z-index: -1;
		background: linear-gradient(180deg, #0b0a15 90%, rgba(11, 10, 21, 0));
	}
	.platform-journey-nav ol { margin-bottom: 14px; }
	.platform-journey-nav a { padding: 6px 12px; font-size: 13px; }
	.platform-journey-frame { height: 34vh; min-height: 240px; }
	.platform-journey-scene.is-active { transform: rotateX(3deg) rotateY(-8deg); }
	.platform-journey-window { right: 6%; bottom: 14%; border-radius: var(--roundings-12, 12px); }
	.platform-journey-bar { height: 24px; padding: 0 10px; }
	.platform-journey-bar span { width: 7px; height: 7px; }
	.platform-journey-bar em { display: none; }
	.platform-journey-detail { width: 42%; height: 52%; border-radius: var(--roundings-12, 12px); transform: translateZ(60px); }
	.platform-journey-figure { top: 6%; transform: translateZ(100px); }
	.platform-journey-steps { order: 2; }
	.platform-journey-step { min-height: 60vh; scroll-margin-top: 50vh; }
	.platform-journey-step h3 { font-size: 28px; }
	.platform-journey-step p:last-child { font-size: 17px; line-height: 26px; }
}

/* The tools the platform replaces drift past in two rows. */
.platform-replaces-marquee {
	display: grid;
	gap: 12px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.platform-replaces-track { display: flex; justify-content: center; }

.platform-motion .platform-replaces-track {
	justify-content: flex-start;
	width: max-content;
	animation: platform-marquee 40s linear infinite;
}

.platform-motion .platform-replaces-track--reverse { animation-direction: reverse; }
.platform-motion .platform-replaces-marquee:hover .platform-replaces-track { animation-play-state: paused; }

.platform-motion .platform-replaces {
	flex-wrap: nowrap;
	max-width: none;
	margin: 0;
	padding-right: 10px;
}

html:not(.platform-motion) .platform-replaces-track--reverse,
html:not(.platform-motion) .platform-replaces[aria-hidden="true"] { display: none; }

@keyframes platform-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.platform-journey-scene,
	.platform-journey-scene > *,
	.platform-journey-step,
	.platform-journey-frame { transition: none; }
}