platform-traction {
	display: grid;
	gap: var(--common-gap);
	grid-template-columns: 1fr;

	.intro {
		/*border: 2px solid red;*/

		.stats {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: column;
			gap: 1.5em;

			margin-top: 1.2em;

			li {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 10px;
			}

			strong {
				font-size: 1.5em;
			}
		}
	}

	.latest {
		/*border: 2px solid orange;*/

		/* Grid item: cap its intrinsic minimum so a wide carousel inside can't
		   blow the 1fr track out. Default grid/flex items are min-width:auto
		   (= content min-width); Flickity's slider reports a huge intrinsic
		   width, which on iOS 18 WebKit propagated up here and ballooned the
		   carousel to millions of px (aspect-ratio then made it a mile tall). */
		min-width: 0;

		.story {

			h3 {
				margin-top: 0.4em;
			}
		}
	}

	.partners {
		/*border: 2px solid purple;*/

		display: grid;
		gap: 30px;

		h3 {
			margin-top: 0.5em;
		}

		p {
			margin-top: 0.2em;
		}

		.logos {
			display: flex;
			flex-direction: column;
			gap: 30px;
			padding-block: 1.5em;

			border: var(--border);
		}

		.logo {
			&.prenuvo {
				max-width: 13ch;
				margin-top: -1ch;
				margin-bottom: -0.6ch;
			}
			&.skytale {
				max-width: 16ch;
			}
			&.alle {
				max-width: 6ch;
			}
			&.ultralight {
				max-width: 16ch;
			}
			&.modassembly {
				max-width: 16ch;
			}
			&.wells {
				max-width: 10ch;
				margin-top: -1ch;
			}
		}

	}



	.group {
		background-color: var(--fill-secondary);
		padding: var(--common-gap);
		border-radius: var(--fill-corners);
		/*margin-top: 0.5em;*/

		display: grid;
		gap: 1.3em;

		&.clinical {
			margin-top: 0.6em;
		}
	}

	.harvard {
		max-width: 13ch;
	}

	.stanford {
		max-width: 12ch;
	}



	.portrait {
		display: block;
		border-radius: var(--fill-corners);
		overflow: clip;
		background: var(--fill-secondary, #eee);
		border: var(--border);
	}

	.story {
		display: flex;
		flex-direction: column;
		gap: 0.5em;
	}

	/* LIVV carousel — 3:2 aspect box, slides cover-fit. The container
	   ratio stays fixed regardless of which image is showing. */
	.livv-carousel {
		aspect-ratio: 5 / 4;
		border-radius: var(--fill-corners);
		overflow: clip;
		background: var(--fill-secondary, #eee);
		border: var(--border);

		/* Hard width cap. This is a flex item (in .story's column flex); pin it
		   to its container and forbid growing to Flickity's huge intrinsic
		   width. Belt to .latest's min-width:0 — together they make the runaway
		   width impossible regardless of what Flickity measures. */
		width: 100%;
		min-width: 0;
		max-width: 100%;

		max-width: 100%;

		.slide {
			display: block;
			width: 100%;
			height: 100%;

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		/* Until Flickity marks itself .flickity-enabled (added synchronously
		   on init), show only the first slide. Without this the raw cells
		   stack before JS runs — and if the CDN ever fails to load Flickity
		   at all, this is the graceful fallback: one clean image instead of a
		   broken stack. Flickity takes over cell display once enabled. */
		&:not(.flickity-enabled) .slide:not(:first-child) {
			display: none;
		}

		/* Flickity wraps cells in .flickity-slider — the cells themselves
		   need to fill the viewport area for the fade to look right. */
		.flickity-viewport,
		.flickity-slider {
			height: 100% !important;
		}

		/* Flickity parks the dots at bottom:-25px (below the box). Our
		   overflow:clip — kept for the rounded image corners — would cut
		   them off, so pull them inside and onto the photo. White + shadow
		   so they read over light or dark slides. */
		.flickity-page-dots {
			position: absolute;
			bottom: 0.75rem;
			width: 100%;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: center;
			gap: 0.5rem;
			line-height: 1;

			.dot {
				width: 0.5rem;
				height: 0.5rem;
				margin: 0;
				border-radius: 50%;
				background: #fff;
				opacity: 0.5;
				box-shadow: 0 1px 3px rgb(0 0 0 / 0.45);
				cursor: pointer;

				&.is-selected {
					opacity: 1;
				}
			}
		}
	}

	@media (width < 900px) {
		.latest {
			margin-block: 40px;
		}
	}

	@media (width >= 900px) {
		grid-template-columns: 1fr 2fr 1fr;
		align-items: start;

		.intro {
			position: sticky;
			top: 100px;
		}
	}
}